{"version":3,"file":"index.cjs","names":["TabsPrimitive","IconButton","ChevronLeft","ChevronRight"],"sources":["../../../src/components/Tabs/Tabs.tsx"],"sourcesContent":["import * as TabsPrimitive from \"@radix-ui/react-tabs\";\nimport clsx from \"clsx\";\nimport { ChevronLeft, ChevronRight } from \"lucide-react\";\nimport React, { forwardRef, useCallback, useEffect, useRef, useState } from \"react\";\nimport { IconButton } from \"../IconButton\";\n\ntype TabsVariant = \"clear\";\n\nexport interface TabsProps extends React.ComponentPropsWithoutRef<typeof TabsPrimitive.Root> {\n  className?: string;\n  style?: React.CSSProperties;\n  variant?: TabsVariant;\n}\n\nconst tabsVariants: Record<TabsVariant, string> = {\n  clear: \"openui-tabs-clear\",\n};\n\nexport const Tabs = forwardRef<React.ComponentRef<typeof TabsPrimitive.Root>, TabsProps>(\n  ({ className, style, variant = \"clear\", ...props }, ref) => (\n    <TabsPrimitive.Root\n      ref={ref}\n      className={clsx(\"openui-tabs\", tabsVariants[variant], className)}\n      style={style}\n      {...props}\n    />\n  ),\n);\n\nTabs.displayName = \"Tabs\";\n\ntype TabsListVariant =\n  | \"title\"\n  | \"iconTitle\"\n  | \"iconTitleSubtext\"\n  | \"imageTitle\"\n  | \"imageTitleSubtext\";\n\nconst tabsListVariants: Record<TabsListVariant, string> = {\n  title: \"openui-tabs-list--title\",\n  iconTitle: \"openui-tabs-list--icon-title\",\n  iconTitleSubtext: \"openui-tabs-list--icon-title-subtext\",\n  imageTitle: \"openui-tabs-list--image-title\",\n  imageTitleSubtext: \"openui-tabs-list--image-title-subtext\",\n};\n\nexport interface TabsListProps extends React.ComponentPropsWithoutRef<typeof TabsPrimitive.List> {\n  className?: string;\n  style?: React.CSSProperties;\n  variant?: TabsListVariant;\n}\n\nexport const TabsList = forwardRef<React.ComponentRef<typeof TabsPrimitive.List>, TabsListProps>(\n  ({ className, style, variant = \"title\", ...props }, ref) => {\n    const listRef = useRef<HTMLDivElement>(null);\n    const indicatorRef = useRef<HTMLDivElement>(null);\n    const [showLeftButton, setShowLeftButton] = useState(false);\n    const [showRightButton, setShowRightButton] = useState(false);\n\n    const updateIndicator = useCallback((animated: boolean) => {\n      const list = listRef.current;\n      const indicator = indicatorRef.current;\n      if (!list || !indicator) return;\n\n      const activeTab = list.querySelector('[role=\"tab\"][data-state=\"active\"]') as HTMLElement;\n      if (!activeTab) return;\n\n      const left = activeTab.offsetLeft - list.scrollLeft;\n      const width = activeTab.offsetWidth;\n\n      indicator.style.transition = animated\n        ? \"transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), width 0.25s cubic-bezier(0.4, 0, 0.2, 1)\"\n        : \"none\";\n      indicator.style.width = `${width}px`;\n      indicator.style.transform = `translateX(${left}px)`;\n      indicator.style.opacity = \"1\";\n    }, []);\n\n    // Check scroll state and keep indicator in sync while scrolling\n    useEffect(() => {\n      const checkScroll = () => {\n        if (listRef.current) {\n          const { scrollLeft, scrollWidth, clientWidth } = listRef.current;\n          setShowLeftButton(scrollLeft > 0);\n          setShowRightButton(scrollLeft < scrollWidth - clientWidth - 1);\n        }\n      };\n\n      const handleScroll = () => {\n        checkScroll();\n        updateIndicator(false);\n      };\n\n      checkScroll();\n      updateIndicator(false);\n\n      const currentRef = listRef.current;\n      if (currentRef) {\n        currentRef.addEventListener(\"scroll\", handleScroll);\n\n        const resizeObserver = new ResizeObserver(() => {\n          checkScroll();\n          updateIndicator(false);\n        });\n        resizeObserver.observe(currentRef);\n\n        return () => {\n          currentRef.removeEventListener(\"scroll\", handleScroll);\n          resizeObserver.disconnect();\n        };\n      }\n      return () => {};\n    }, [updateIndicator]);\n\n    // Watch for active tab changes and animate indicator\n    useEffect(() => {\n      const list = listRef.current;\n      if (!list) return;\n\n      const observer = new MutationObserver(() => updateIndicator(true));\n      observer.observe(list, {\n        attributes: true,\n        subtree: true,\n        attributeFilter: [\"data-state\"],\n      });\n\n      return () => observer.disconnect();\n    }, [updateIndicator]);\n\n    // Center the clicked trigger in the list\n    useEffect(() => {\n      const list = listRef.current;\n      if (!list) return;\n\n      const handleClick = (e: MouseEvent) => {\n        const trigger = (e.target as HTMLElement).closest('[role=\"tab\"]') as HTMLElement;\n        if (!trigger) return;\n\n        const listWidth = list.clientWidth;\n        const triggerLeft = trigger.offsetLeft;\n        const triggerWidth = trigger.offsetWidth;\n        const scrollTo = triggerLeft - listWidth / 2 + triggerWidth / 2;\n\n        list.scrollTo({ left: scrollTo, behavior: \"smooth\" });\n      };\n\n      list.addEventListener(\"click\", handleClick);\n      return () => list.removeEventListener(\"click\", handleClick);\n    }, []);\n\n    const scrollLeft = () => {\n      if (listRef.current) {\n        listRef.current.scrollBy({ left: -120, behavior: \"smooth\" });\n      }\n    };\n\n    const scrollRight = () => {\n      if (listRef.current) {\n        listRef.current.scrollBy({ left: 120, behavior: \"smooth\" });\n      }\n    };\n\n    return (\n      <div className=\"openui-tabs-list-container\">\n        {showLeftButton && (\n          <div className=\"openui-tabs-scroll-button-container-left\">\n            <IconButton\n              className=\"openui-tabs-scroll-button openui-tabs-scroll-left\"\n              onClick={scrollLeft}\n              aria-label=\"Scroll tabs left\"\n              icon={<ChevronLeft />}\n              variant=\"secondary\"\n              size=\"small\"\n            />\n          </div>\n        )}\n\n        <TabsPrimitive.List\n          ref={(node) => {\n            if (typeof ref === \"function\") {\n              ref(node);\n            } else if (ref) {\n              ref.current = node;\n            }\n            listRef.current = node;\n          }}\n          className={clsx(\"openui-tabs-list\", tabsListVariants[variant], className)}\n          style={style}\n          {...props}\n        />\n\n        <div className=\"openui-tabs-indicator\" ref={indicatorRef} />\n\n        {showRightButton && (\n          <div className=\"openui-tabs-scroll-button-container-right\">\n            <IconButton\n              className=\"openui-tabs-scroll-button openui-tabs-scroll-right\"\n              onClick={scrollRight}\n              aria-label=\"Scroll tabs right\"\n              icon={<ChevronRight />}\n              variant=\"secondary\"\n              size=\"small\"\n            />\n          </div>\n        )}\n      </div>\n    );\n  },\n);\n\nTabsList.displayName = \"TabsList\";\n\nexport interface TabsTriggerProps\n  extends React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger> {\n  className?: string;\n  style?: React.CSSProperties;\n  value: string;\n  icon?: React.ReactNode;\n  text: React.ReactNode;\n  subtext?: React.ReactNode;\n  image?: string;\n}\n\nexport const TabsTrigger = forwardRef<\n  React.ComponentRef<typeof TabsPrimitive.Trigger>,\n  TabsTriggerProps\n>(({ className, style, icon, text, subtext, image, value, ...props }, ref) => (\n  <TabsPrimitive.Trigger\n    ref={ref}\n    className={clsx(\"openui-tabs-trigger\", className)}\n    style={style}\n    value={value}\n    {...props}\n  >\n    {image && (\n      <span className=\"openui-tabs-trigger-image\">\n        <img src={image} alt=\"\" />\n      </span>\n    )}\n    {icon && <span className=\"openui-tabs-trigger-icon\">{icon}</span>}\n    <span className=\"openui-tabs-trigger-content\">\n      {text && <span className=\"openui-tabs-trigger-text\">{text}</span>}\n      {subtext && <span className=\"openui-tabs-trigger-subtext\">{subtext}</span>}\n    </span>\n  </TabsPrimitive.Trigger>\n));\n\nTabsTrigger.displayName = \"TabsTrigger\";\n\nexport interface TabsContentProps\n  extends React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content> {\n  className?: string;\n  style?: React.CSSProperties;\n  children?: React.ReactNode;\n}\n\nexport const TabsContent = forwardRef<\n  React.ComponentRef<typeof TabsPrimitive.Content>,\n  TabsContentProps\n>(({ className, style, children, ...props }, ref) => (\n  <TabsPrimitive.Content\n    ref={ref}\n    className={clsx(\"openui-tabs-content\", className)}\n    style={style}\n    {...props}\n  >\n    <div className=\"openui-tabs-content-inner\">{children}</div>\n  </TabsPrimitive.Content>\n));\n\nTabsContent.displayName = \"TabsContent\";\n"],"mappings":"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"}