@sth87/shadcn-design-system 0.0.35 → 0.1.0

package/dist/esm/components/Tabs/Tabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tabs.js","sources":["../../../../src/components/Tabs/Tabs.tsx"],"sourcesContent":["import React from \"react\";\nimport {\n  Tabs as STabs,\n  TabsList as STabsList,\n  TabsTrigger as STabsTrigger,\n  TabsContent as STabsContent,\n} from \"@dsui/ui/components/tabs\";\nimport { motion } from \"motion/react\";\nimport { cn } from \"@dsui/ui/lib/utils\";\nimport { ScrollArea, ScrollBar } from \"../ScrollArea/ScrollArea\";\nimport { Popover } from \"../Popover\";\nimport { MoreHorizontal } from \"lucide-react\";\nimport type {\n  TabAlignment,\n  TabColor,\n  TabItem,\n  TabOverflowMode,\n  TabPosition,\n  TabSize,\n  TabVariant,\n} from \"./types\";\nimport {\n  alignmentClasses,\n  getColorClasses,\n  getEnclosedFillTriggerClasses,\n  getEnclosedTriggerClasses,\n  getListBorderClasses,\n  getUnderlinedTriggerClasses,\n  positionClasses,\n  sizeClasses,\n  variantClasses,\n} from \"./classes\";\n\nexport interface TabsProps {\n  // Core props\n  items: TabItem[];\n  defaultActiveKey?: string;\n  activeKey?: string;\n  onChange?: (key: string) => void;\n\n  // Layout\n  tabPosition?: TabPosition;\n  size?: TabSize;\n  alignment?: TabAlignment;\n  fullWidth?: boolean;\n\n  // Overflow handling\n  overflowMode?: TabOverflowMode;\n\n  // Styling\n  variant?: TabVariant;\n  color?: TabColor;\n  className?: string;\n  tabListClassName?: string;\n  tabContentClassName?: string;\n  tabTriggerClassName?: string;\n}\n\nconst Tabs = React.forwardRef<HTMLDivElement, TabsProps>((props, ref) => {\n  const {\n    items,\n    defaultActiveKey,\n    activeKey,\n    onChange,\n    tabPosition = \"top\",\n    size = \"md\",\n    alignment = \"start\",\n    fullWidth = false,\n    overflowMode = \"scroll\",\n    variant = \"solid\",\n    color = \"muted\",\n    className,\n    tabListClassName,\n    tabContentClassName,\n    tabTriggerClassName,\n  } = props;\n\n  const tabRefs = React.useRef<(HTMLButtonElement | null)[]>([]);\n  const tabsListRef = React.useRef<HTMLDivElement | null>(null);\n  const containerRef = React.useRef<HTMLDivElement | null>(null);\n  const scrollAreaRef = React.useRef<HTMLDivElement | null>(null);\n\n  const [indicatorStyle, setIndicatorStyle] = React.useState<{\n    left: number;\n    width: number;\n    top: number;\n    height: number;\n  }>({\n    left: 0,\n    width: 0,\n    top: 0,\n    height: 0,\n  });\n\n  const [internalActiveKey, setInternalActiveKey] = React.useState<\n    string | undefined\n  >(activeKey || defaultActiveKey || items[0]?.key);\n\n  // Overflow state management\n  const [isOverflowing, setIsOverflowing] = React.useState(false);\n  const [visibleTabsCount, setVisibleTabsCount] = React.useState(items.length);\n  const [dropdownOpen, setDropdownOpen] = React.useState(false);\n\n  // Fade state management for scroll position\n  const [showStartFade, setShowStartFade] = React.useState(false);\n  const [showEndFade, setShowEndFade] = React.useState(false);\n\n  const currentActiveKey =\n    activeKey !== undefined ? activeKey : internalActiveKey;\n\n  const isVertical = tabPosition === \"left\" || tabPosition === \"right\";\n\n  // Check if tabs are overflowing (for scroll and fade modes)\n  React.useLayoutEffect(() => {\n    if (!overflowMode || overflowMode === \"dropdown\") return;\n\n    const checkOverflow = () => {\n      const container = containerRef.current;\n      const listElement = tabsListRef.current;\n\n      if (!container || !listElement) return;\n\n      const containerSize = isVertical\n        ? container.clientHeight\n        : container.clientWidth;\n      const listSize = isVertical\n        ? listElement.scrollHeight\n        : listElement.scrollWidth;\n\n      const hasOverflow = listSize > containerSize;\n      setIsOverflowing(hasOverflow);\n    };\n\n    // Initial check\n    checkOverflow();\n\n    // Use ResizeObserver for responsive updates\n    const resizeObserver = new ResizeObserver(checkOverflow);\n    if (containerRef.current) {\n      resizeObserver.observe(containerRef.current);\n    }\n    if (tabsListRef.current) {\n      resizeObserver.observe(tabsListRef.current);\n    }\n\n    return () => {\n      resizeObserver.disconnect();\n    };\n  }, [items, overflowMode, isVertical]);\n\n  // Calculate visible tabs for dropdown mode\n  React.useLayoutEffect(() => {\n    if (overflowMode !== \"dropdown\") return;\n\n    const calculateVisibleTabs = () => {\n      const container = containerRef.current;\n      if (!container) return;\n\n      const containerSize = isVertical\n        ? container.clientHeight\n        : container.clientWidth;\n\n      // Calculate how many tabs can fit including the [...] button\n      let totalSize = 0;\n      const dropdownButtonSize = 48; // Size of [...] button with gap\n      const listPadding = 6; // p-[3px] = 6px total padding for some variants\n      const gap =\n        variant === \"enclosed-fill\" ||\n        variant === \"bordered\" ||\n        variant === \"pills\" ||\n        variant === \"pill-stroke\" ||\n        variant === \"text\" ||\n        variant === \"outline\"\n          ? 4\n          : 0; // gap-1 = 4px\n\n      let count = 0;\n      for (let i = 0; i < tabRefs.current.length; i++) {\n        const tab = tabRefs.current[i];\n        if (!tab) break;\n\n        const tabSize = isVertical ? tab.offsetHeight : tab.offsetWidth;\n        const withGap = i > 0 ? gap : 0;\n\n        // Check if we can fit this tab + [...] button if there are more tabs\n        const hasMoreTabs = i < tabRefs.current.length - 1;\n        const requiredSize =\n          totalSize +\n          tabSize +\n          withGap +\n          (hasMoreTabs ? dropdownButtonSize : 0) +\n          listPadding;\n\n        if (requiredSize <= containerSize) {\n          totalSize += tabSize + withGap;\n          count++;\n        } else {\n          break;\n        }\n      }\n\n      // Only show overflow if we can't fit all tabs\n      const hasHiddenTabs = count < items.length;\n      setIsOverflowing(hasHiddenTabs);\n      setVisibleTabsCount(Math.max(1, count));\n    };\n\n    // Initial calculation\n    calculateVisibleTabs();\n\n    // Use ResizeObserver for responsive updates\n    const resizeObserver = new ResizeObserver(calculateVisibleTabs);\n    if (containerRef.current) {\n      resizeObserver.observe(containerRef.current);\n    }\n\n    // Also observe each tab for size changes\n    tabRefs.current.forEach((tab) => {\n      if (tab) resizeObserver.observe(tab);\n    });\n\n    return () => {\n      resizeObserver.disconnect();\n    };\n  }, [items, overflowMode, isVertical, variant]);\n\n  React.useLayoutEffect(() => {\n    const activeIndex = items.findIndex((tab) => tab.key === currentActiveKey);\n    const activeTabElement = tabRefs.current[activeIndex];\n    const listElement = tabsListRef.current;\n\n    if (activeTabElement && listElement) {\n      const listRect = listElement.getBoundingClientRect();\n      const tabRect = activeTabElement.getBoundingClientRect();\n\n      // Calculate relative position within the list\n      const left = tabRect.left - listRect.left;\n      const top = tabRect.top - listRect.top;\n\n      setIndicatorStyle({\n        left: left,\n        width: tabRect.width,\n        top: top,\n        height: tabRect.height,\n      });\n\n      // Auto-scroll to active tab in fade mode\n      if (overflowMode === \"fade\" && scrollAreaRef.current) {\n        const scrollAreaViewport = scrollAreaRef.current.querySelector(\n          \"[data-radix-scroll-area-viewport]\"\n        ) as HTMLElement;\n\n        if (scrollAreaViewport) {\n          const viewportRect = scrollAreaViewport.getBoundingClientRect();\n          const tabRectInViewport = activeTabElement.getBoundingClientRect();\n          const fadeWidth = 96; // 24 * 4 = 96px (w-24 class)\n\n          if (isVertical) {\n            // Scroll vertically\n            const scrollTop = scrollAreaViewport.scrollTop;\n            const scrollHeight = scrollAreaViewport.scrollHeight;\n            const viewportHeight = viewportRect.height;\n            const tabTop = tabRectInViewport.top - viewportRect.top + scrollTop;\n            const tabHeight = tabRectInViewport.height;\n\n            // If it's the first tab, scroll to the very top\n            if (activeIndex === 0) {\n              scrollAreaViewport.scrollTo({\n                top: 0,\n                behavior: \"smooth\",\n              });\n            }\n            // If it's the last tab, scroll to the very bottom\n            else if (activeIndex === items.length - 1) {\n              scrollAreaViewport.scrollTo({\n                top: scrollHeight - viewportHeight,\n                behavior: \"smooth\",\n              });\n            }\n            // For middle tabs, try to center them with padding to avoid fade\n            else {\n              const targetScrollTop =\n                tabTop - viewportHeight / 2 + tabHeight / 2;\n              const maxScroll = scrollHeight - viewportHeight;\n\n              // Ensure we don't scroll beyond bounds and leave space for fade\n              const clampedScroll = Math.max(\n                fadeWidth / 2,\n                Math.min(targetScrollTop, maxScroll - fadeWidth / 2)\n              );\n\n              scrollAreaViewport.scrollTo({\n                top: clampedScroll,\n                behavior: \"smooth\",\n              });\n            }\n          } else {\n            // Scroll horizontally\n            const scrollLeft = scrollAreaViewport.scrollLeft;\n            const scrollWidth = scrollAreaViewport.scrollWidth;\n            const viewportWidth = viewportRect.width;\n            const tabLeft =\n              tabRectInViewport.left - viewportRect.left + scrollLeft;\n            const tabWidth = tabRectInViewport.width;\n\n            // If it's the first tab, scroll to the very left\n            if (activeIndex === 0) {\n              scrollAreaViewport.scrollTo({\n                left: 0,\n                behavior: \"smooth\",\n              });\n            }\n            // If it's the last tab, scroll to the very right\n            else if (activeIndex === items.length - 1) {\n              scrollAreaViewport.scrollTo({\n                left: scrollWidth - viewportWidth,\n                behavior: \"smooth\",\n              });\n            }\n            // For middle tabs, try to center them with padding to avoid fade\n            else {\n              const targetScrollLeft =\n                tabLeft - viewportWidth / 2 + tabWidth / 2;\n              const maxScroll = scrollWidth - viewportWidth;\n\n              // Ensure we don't scroll beyond bounds and leave space for fade\n              const clampedScroll = Math.max(\n                fadeWidth / 2,\n                Math.min(targetScrollLeft, maxScroll - fadeWidth / 2)\n              );\n\n              scrollAreaViewport.scrollTo({\n                left: clampedScroll,\n                behavior: \"smooth\",\n              });\n            }\n          }\n        }\n      }\n    }\n  }, [currentActiveKey, items, isVertical, overflowMode]);\n\n  // Handle scroll events for fade mode to show/hide fade gradients\n  React.useEffect(() => {\n    if (overflowMode !== \"fade\" || !scrollAreaRef.current) return;\n\n    const scrollAreaViewport = scrollAreaRef.current.querySelector(\n      \"[data-radix-scroll-area-viewport]\"\n    ) as HTMLElement;\n\n    if (!scrollAreaViewport) return;\n\n    let rafId: number | null = null;\n\n    const handleScroll = () => {\n      // Cancel previous frame if still pending\n      if (rafId !== null) {\n        cancelAnimationFrame(rafId);\n      }\n\n      // Use requestAnimationFrame for smooth updates\n      rafId = requestAnimationFrame(() => {\n        const threshold = 5; // Small threshold to account for floating point precision\n\n        if (isVertical) {\n          const scrollTop = scrollAreaViewport.scrollTop;\n          const scrollHeight = scrollAreaViewport.scrollHeight;\n          const clientHeight = scrollAreaViewport.clientHeight;\n\n          setShowStartFade(scrollTop > threshold);\n          setShowEndFade(scrollTop < scrollHeight - clientHeight - threshold);\n        } else {\n          const scrollLeft = scrollAreaViewport.scrollLeft;\n          const scrollWidth = scrollAreaViewport.scrollWidth;\n          const clientWidth = scrollAreaViewport.clientWidth;\n\n          setShowStartFade(scrollLeft > threshold);\n          setShowEndFade(scrollLeft < scrollWidth - clientWidth - threshold);\n        }\n\n        // Update indicator position smoothly during scroll\n        const activeIndex = items.findIndex(\n          (tab) => tab.key === currentActiveKey\n        );\n        const activeTabElement = tabRefs.current[activeIndex];\n        const listElement = tabsListRef.current;\n\n        if (activeTabElement && listElement) {\n          const listRect = listElement.getBoundingClientRect();\n          const tabRect = activeTabElement.getBoundingClientRect();\n\n          const left = tabRect.left - listRect.left;\n          const top = tabRect.top - listRect.top;\n\n          setIndicatorStyle({\n            left: left,\n            width: tabRect.width,\n            top: top,\n            height: tabRect.height,\n          });\n        }\n\n        rafId = null;\n      });\n    };\n\n    // Initial check\n    handleScroll();\n\n    // Add scroll listener\n    scrollAreaViewport.addEventListener(\"scroll\", handleScroll, {\n      passive: true,\n    });\n\n    // Recheck on resize\n    const resizeObserver = new ResizeObserver(handleScroll);\n    resizeObserver.observe(scrollAreaViewport);\n\n    return () => {\n      if (rafId !== null) {\n        cancelAnimationFrame(rafId);\n      }\n      scrollAreaViewport.removeEventListener(\"scroll\", handleScroll);\n      resizeObserver.disconnect();\n    };\n  }, [overflowMode, isVertical, isOverflowing, items, currentActiveKey]);\n\n  // Enable horizontal scrolling with mouse wheel for horizontal tabs in scroll/fade modes\n  React.useEffect(() => {\n    if (overflowMode !== \"scroll\" && overflowMode !== \"fade\") return;\n    if (isVertical) return; // Only for horizontal tabs\n\n    const scrollAreaViewport = scrollAreaRef.current?.querySelector(\n      \"[data-radix-scroll-area-viewport]\"\n    ) as HTMLElement;\n\n    if (!scrollAreaViewport) return;\n\n    const handleWheel = (e: WheelEvent) => {\n      if (e.deltaY !== 0) {\n        e.preventDefault();\n        scrollAreaViewport.scrollLeft += e.deltaY * 2;\n      }\n    };\n\n    scrollAreaViewport.addEventListener(\"wheel\", handleWheel, { passive: false });\n\n    return () => {\n      scrollAreaViewport.removeEventListener(\"wheel\", handleWheel);\n    };\n  }, [overflowMode, isVertical]);\n\n  const handleValueChange = (key: string) => {\n    if (activeKey === undefined) {\n      setInternalActiveKey(key);\n    }\n    onChange?.(key);\n  };\n\n  const orientation = isVertical ? \"vertical\" : \"horizontal\";\n\n  // Get variant classes\n  const variantConfig = variantClasses[variant];\n  const listVariantClass =\n    variantConfig.list[isVertical ? \"vertical\" : \"horizontal\"];\n\n  // Get trigger variant class based on variant type\n  let triggerVariantClass =\n    variantConfig.trigger[isVertical ? \"vertical\" : \"horizontal\"];\n\n  // For underlined and enclosed variants, use dynamic classes based on position\n  if (variant === \"underlined\") {\n    triggerVariantClass = getUnderlinedTriggerClasses(tabPosition);\n  } else if (variant === \"enclosed\") {\n    triggerVariantClass = getEnclosedTriggerClasses(tabPosition);\n  } else if (variant === \"enclosed-fill\") {\n    triggerVariantClass = getEnclosedFillTriggerClasses(tabPosition);\n  }\n\n  // Get color classes based on variant\n  const triggerColorClass = getColorClasses(variant, color);\n  const listBorderClass = getListBorderClasses(variant, color, tabPosition);\n\n  // Determine which tabs to show based on overflow mode\n  const visibleTabs =\n    overflowMode === \"dropdown\" && isOverflowing\n      ? items.slice(0, visibleTabsCount)\n      : items;\n\n  const overflowTabs =\n    overflowMode === \"dropdown\" && isOverflowing\n      ? items.slice(visibleTabsCount)\n      : overflowMode === \"fade\" && isOverflowing\n        ? items\n        : [];\n\n  // For dropdown mode: show [...] button only if there are hidden tabs\n  const showDropdownButton =\n    overflowMode === \"dropdown\" && isOverflowing && overflowTabs.length > 0;\n\n  // Check if active tab is in overflow (hidden) tabs\n  const isActiveTabInOverflow =\n    overflowMode === \"dropdown\" &&\n    isOverflowing &&\n    overflowTabs.some((tab) => tab.key === currentActiveKey);\n\n  const renderTabTriggers = (tabItems: TabItem[], startIndex = 0) => (\n    <>\n      {tabItems.map((item, index) => {\n        const actualIndex = startIndex + index;\n        return (\n          <STabsTrigger\n            key={item.key}\n            ref={(el) => {\n              tabRefs.current[actualIndex] = el;\n            }}\n            value={item.key}\n            disabled={item.disabled}\n            className={cn(\n              triggerVariantClass,\n              // Apply styles based on variant\n              {\n                // For sliding indicator variants, remove default background\n                \"relative z-10 bg-transparent data-[state=active]:bg-transparent\":\n                  variant === \"solid\" ||\n                  variant === \"bordered\" ||\n                  variant === \"pills\",\n                // Apply text color for active state with sliding indicator\n                \"data-[state=active]:text-primary-foreground\":\n                  (variant === \"bordered\" || variant === \"pills\") &&\n                  color === \"primary\",\n                \"data-[state=active]:text-secondary-foreground\":\n                  (variant === \"bordered\" || variant === \"pills\") &&\n                  color === \"secondary\",\n                \"data-[state=active]:text-muted-foreground\":\n                  (variant === \"bordered\" || variant === \"pills\") &&\n                  color === \"muted\",\n                \"data-[state=active]:text-accent-foreground\":\n                  (variant === \"bordered\" || variant === \"pills\") &&\n                  color === \"accent\",\n                \"data-[state=active]:text-destructive-foreground\":\n                  (variant === \"bordered\" || variant === \"pills\") &&\n                  color === \"destructive\",\n                \"data-[state=active]:text-white\":\n                  (variant === \"bordered\" || variant === \"pills\") &&\n                  (color === \"success\" || color === \"warning\"),\n                \"flex-1\": fullWidth && !isVertical,\n                \"w-full justify-start\": isVertical,\n              },\n              // For other variants, apply normal color classes\n              !(\n                variant === \"solid\" ||\n                variant === \"bordered\" ||\n                variant === \"pills\"\n              ) && triggerColorClass,\n              item.className,\n              tabTriggerClassName\n            )}\n          >\n            {item.icon && (\n              <span className=\"mr-2 inline-flex items-center\">{item.icon}</span>\n            )}\n            {item.label}\n          </STabsTrigger>\n        );\n      })}\n    </>\n  );\n\n  const renderTabsList = () => {\n    const tabsListContent = (\n      <STabsList\n        ref={tabsListRef}\n        className={cn(\n          positionClasses[tabPosition].list,\n          sizeClasses[size][isVertical ? \"vertical\" : \"horizontal\"],\n          listVariantClass,\n          listBorderClass,\n          tabListClassName,\n          \"relative\",\n          {\n            \"overflow-hidden\": overflowMode === \"fade\" && isOverflowing,\n            \"max-w-full\": overflowMode === \"fade\", // Limit width for fade mode\n            // For overflow modes, allow natural width expansion\n            \"w-auto\": overflowMode === \"dropdown\" || overflowMode === \"fade\",\n          }\n        )}\n      >\n        {renderTabTriggers(visibleTabs)}\n\n        {/* Sliding indicator for underlined variant */}\n        {variant === \"underlined\" &&\n          indicatorStyle.width > 0 &&\n          !isActiveTabInOverflow && (\n            <motion.div\n              className={cn(\"absolute rounded-full z-10\", {\n                // Horizontal positions (top/bottom)\n                \"h-0.5 bottom-0\": tabPosition === \"top\",\n                \"h-0.5 top-0\": tabPosition === \"bottom\",\n                // Vertical positions (left/right)\n                \"w-0.5 right-0\": tabPosition === \"left\",\n                \"w-0.5 left-0\": tabPosition === \"right\",\n                // Colors\n                \"bg-primary\": color === \"primary\",\n                \"bg-secondary\": color === \"secondary\",\n                \"bg-muted-foreground\": color === \"muted\",\n                \"bg-accent\": color === \"accent\",\n                \"bg-destructive\": color === \"destructive\",\n                \"bg-success\": color === \"success\",\n                \"bg-warning\": color === \"warning\",\n              })}\n              animate={\n                isVertical\n                  ? {\n                      top: indicatorStyle.top,\n                      height: indicatorStyle.height,\n                    }\n                  : {\n                      left: indicatorStyle.left,\n                      width: indicatorStyle.width,\n                    }\n              }\n              transition={{\n                type: \"spring\",\n                stiffness: 300,\n                damping: 30,\n              }}\n            />\n          )}\n\n        {/* Sliding indicator for solid, bordered, pills variants */}\n        {(variant === \"solid\" ||\n          variant === \"bordered\" ||\n          variant === \"pills\" ||\n          variant === \"pill-stroke\") &&\n          indicatorStyle.width > 0 &&\n          !isActiveTabInOverflow && (\n            <motion.div\n              className={cn(\"absolute rounded-md pointer-events-none z-0\", {\n                \"bg-background shadow-sm\": variant === \"solid\",\n\n                \"bg-primary\":\n                  (variant === \"bordered\" || variant === \"pills\") &&\n                  color === \"primary\",\n                \"bg-secondary\":\n                  (variant === \"bordered\" || variant === \"pills\") &&\n                  color === \"secondary\",\n                \"bg-muted\":\n                  (variant === \"bordered\" || variant === \"pills\") &&\n                  color === \"muted\",\n                \"bg-accent\":\n                  (variant === \"bordered\" || variant === \"pills\") &&\n                  color === \"accent\",\n                \"bg-destructive\":\n                  (variant === \"bordered\" || variant === \"pills\") &&\n                  color === \"destructive\",\n                \"bg-success\":\n                  (variant === \"bordered\" || variant === \"pills\") &&\n                  color === \"success\",\n                \"bg-warning\":\n                  (variant === \"bordered\" || variant === \"pills\") &&\n                  color === \"warning\",\n\n                \"border rounded-full border-primary\":\n                  variant === \"pill-stroke\" && color === \"primary\",\n                \"border rounded-full border-secondary\":\n                  variant === \"pill-stroke\" && color === \"secondary\",\n                \"rounded-full border-muted\":\n                  variant === \"pill-stroke\" && color === \"muted\",\n                \"border rounded-full border-accent\":\n                  variant === \"pill-stroke\" && color === \"accent\",\n                \"border rounded-full border-destructive\":\n                  variant === \"pill-stroke\" && color === \"destructive\",\n                \"border rounded-full border-success\":\n                  variant === \"pill-stroke\" && color === \"success\",\n                \"border rounded-full border-warning\":\n                  variant === \"pill-stroke\" && color === \"warning\",\n              })}\n              animate={{\n                left: indicatorStyle.left,\n                width: indicatorStyle.width,\n                top: indicatorStyle.top,\n                height: indicatorStyle.height,\n              }}\n              transition={{\n                type: \"spring\",\n                stiffness: 300,\n                damping: 30,\n              }}\n            />\n          )}\n      </STabsList>\n    );\n\n    // Mode 1: Scroll - wrap in ScrollArea with ScrollBar\n    if (overflowMode === \"scroll\") {\n      return (\n        <ScrollArea\n          ref={scrollAreaRef}\n          className={cn({\n            \"w-full\": !isVertical,\n            \"pb-2\": !isVertical && isOverflowing,\n            \"max-h-[300px] *:data-radix-scroll-area-viewport:h-full *:data-radix-scroll-area-viewport:max-h-[inherit]\":\n              isVertical,\n          })}\n        >\n          {tabsListContent}\n          <ScrollBar orientation={isVertical ? \"vertical\" : \"horizontal\"} />\n        </ScrollArea>\n      );\n    }\n\n    // Mode 2: Dropdown - show visible tabs + [...] button for overflow tabs\n    if (overflowMode === \"dropdown\" && showDropdownButton) {\n      return (\n        <div\n          className={cn(\"relative flex items-start gap-1\", {\n            \"flex-col\": isVertical,\n          })}\n        >\n          {/* Show only visible tabs */}\n          {tabsListContent}\n\n          {/* Overflow menu button - only show if there are hidden tabs */}\n          <Popover\n            open={dropdownOpen}\n            onOpenChange={setDropdownOpen}\n            trigger={\n              <button\n                className={cn(\n                  \"inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors\",\n                  \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2\",\n                  \"disabled:pointer-events-none disabled:opacity-50\",\n                  \"hover:bg-accent hover:text-accent-foreground\",\n                  \"h-9 px-3 shrink-0\",\n                  {\n                    \"bg-accent text-accent-foreground\": dropdownOpen,\n                  }\n                )}\n                aria-label=\"More tabs\"\n              >\n                <MoreHorizontal className=\"h-4 w-4\" />\n              </button>\n            }\n            content={\n              <div className={cn(\"flex flex-col gap-1 p-1\")}>\n                {overflowTabs.map((item) => (\n                  <button\n                    key={item.key}\n                    onClick={() => {\n                      handleValueChange(item.key);\n                      setDropdownOpen(false);\n                    }}\n                    disabled={item.disabled}\n                    className={cn(\n                      \"flex items-center gap-2 rounded-sm px-2 py-1.5 text-sm\",\n                      \"hover:bg-accent hover:text-accent-foreground\",\n                      \"disabled:pointer-events-none disabled:opacity-50\",\n                      \"text-left\",\n                      {\n                        \"bg-accent text-accent-foreground\":\n                          item.key === currentActiveKey,\n                      }\n                    )}\n                  >\n                    {item.icon && (\n                      <span className=\"inline-flex items-center\">\n                        {item.icon}\n                      </span>\n                    )}\n                    {item.label}\n                  </button>\n                ))}\n              </div>\n            }\n            side={isVertical ? \"right\" : \"bottom\"}\n            align=\"end\"\n            className=\"w-auto min-w-32 max-w-sm max-h-96 overflow-auto p-0\"\n          />\n        </div>\n      );\n    }\n\n    // Mode 3: Fade with overflow button\n    if (overflowMode === \"fade\" && isOverflowing) {\n      return (\n        <div\n          className={cn(\"relative flex items-start gap-1\", {\n            \"flex-col\": isVertical,\n            \"flex-1 w-full\": true, // Take full width for fade mode\n          })}\n        >\n          {/* Fade effect for mode 3 */}\n          <div\n            className={cn(\"relative flex-1 overflow-hidden\", {\n              \"w-full\": !isVertical,\n              \"h-full\": isVertical,\n            })}\n          >\n            <ScrollArea\n              ref={scrollAreaRef}\n              className={cn({\n                \"w-full\": !isVertical,\n                \"h-full\": isVertical,\n              })}\n            >\n              {tabsListContent}\n              <ScrollBar orientation={isVertical ? \"vertical\" : \"horizontal\"} />\n            </ScrollArea>\n\n            {/* Start gradient overlay (left/top) - only show when scrolled */}\n            {showStartFade && (\n              <div\n                className={cn(\"absolute pointer-events-none z-20\", {\n                  \"top-0 left-0 bottom-0 w-24 bg-linear-to-r from-background to-transparent\":\n                    !isVertical,\n                  \"left-0 right-0 top-0 h-24 bg-linear-to-b from-background to-transparent\":\n                    isVertical,\n                })}\n              />\n            )}\n\n            {/* End gradient overlay (right/bottom) - only show when not at end */}\n            {showEndFade && (\n              <div\n                className={cn(\"absolute pointer-events-none z-20\", {\n                  \"top-0 right-0 bottom-0 w-24 bg-linear-to-l from-background to-transparent\":\n                    !isVertical,\n                  \"left-0 right-0 bottom-0 h-24 bg-linear-to-t from-background to-transparent\":\n                    isVertical,\n                })}\n              />\n            )}\n          </div>\n\n          {/* Overflow menu button - shows all tabs */}\n          <Popover\n            open={dropdownOpen}\n            onOpenChange={setDropdownOpen}\n            trigger={\n              <button\n                className={cn(\n                  \"inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors\",\n                  \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2\",\n                  \"disabled:pointer-events-none disabled:opacity-50\",\n                  \"hover:bg-accent hover:text-accent-foreground\",\n                  \"h-9 px-3 shrink-0\",\n                  {\n                    \"bg-accent text-accent-foreground\": dropdownOpen,\n                  }\n                )}\n                aria-label=\"More tabs\"\n              >\n                <MoreHorizontal className=\"h-4 w-4\" />\n              </button>\n            }\n            content={\n              // <div className={cn(\"flex flex-col gap-1 min-w-[150px]\")}>\n              <ScrollArea\n                className=\"min-w-[150px] max-h-[256px] [&_[data-radix-scroll-area-viewport]]:max-h-[256px]\"\n                snapType=\"y\"\n              >\n                {items.map((item) => (\n                  <button\n                    key={item.key}\n                    onClick={() => {\n                      handleValueChange(item.key);\n                      setDropdownOpen(false);\n                    }}\n                    disabled={item.disabled}\n                    className={cn(\n                      \"snap-start\",\n                      \"w-full flex items-center gap-2 rounded-sm px-2 py-1.5 text-sm\",\n                      \"hover:bg-accent hover:text-accent-foreground\",\n                      \"disabled:pointer-events-none disabled:opacity-50\",\n                      \"text-left\",\n                      {\n                        \"bg-accent text-accent-foreground\":\n                          item.key === currentActiveKey,\n                      }\n                    )}\n                  >\n                    {item.icon && (\n                      <span className=\"inline-flex items-center\">\n                        {item.icon}\n                      </span>\n                    )}\n                    {item.label}\n                  </button>\n                ))}\n              </ScrollArea>\n              // </div>\n            }\n            side={isVertical ? \"right\" : \"bottom\"}\n            align=\"end\"\n            className=\"p-2\"\n          />\n        </div>\n      );\n    }\n\n    return tabsListContent;\n  };\n\n  return (\n    <STabs\n      ref={ref}\n      defaultValue={defaultActiveKey}\n      value={currentActiveKey}\n      onValueChange={handleValueChange}\n      orientation={orientation}\n      className={cn(\"gap-2\", positionClasses[tabPosition].root, className)}\n    >\n      <div\n        ref={containerRef}\n        className={cn(\"flex\", {\n          [alignmentClasses[alignment].horizontal]: !isVertical,\n          [alignmentClasses[alignment].vertical]: isVertical,\n          \"w-full\":\n            (fullWidth ||\n              overflowMode === \"dropdown\" ||\n              overflowMode === \"fade\") &&\n            !isVertical,\n          \"overflow-hidden\":\n            overflowMode === \"dropdown\" || overflowMode === \"fade\",\n        })}\n      >\n        {renderTabsList()}\n      </div>\n      {items.map((item) => (\n        <STabsContent\n          key={item.key}\n          value={item.key}\n          className={cn(tabContentClassName)}\n        >\n          {item.children}\n        </STabsContent>\n      ))}\n    </STabs>\n  );\n});\n\nTabs.displayName = \"Tabs\";\n\nexport default Tabs;\n"],"names":["Tabs","React","props","ref","items","defaultActiveKey","activeKey","onChange","tabPosition","size","alignment","fullWidth","overflowMode","variant","color","className","tabListClassName","tabContentClassName","tabTriggerClassName","tabRefs","tabsListRef","containerRef","scrollAreaRef","indicatorStyle","setIndicatorStyle","internalActiveKey","setInternalActiveKey","isOverflowing","setIsOverflowing","visibleTabsCount","setVisibleTabsCount","dropdownOpen","setDropdownOpen","showStartFade","setShowStartFade","showEndFade","setShowEndFade","currentActiveKey","isVertical","checkOverflow","container","listElement","containerSize","hasOverflow","resizeObserver","calculateVisibleTabs","totalSize","dropdownButtonSize","listPadding","gap","count","i","tab","tabSize","withGap","hasMoreTabs","hasHiddenTabs","activeIndex","activeTabElement","listRect","tabRect","left","top","scrollAreaViewport","viewportRect","tabRectInViewport","fadeWidth","scrollTop","scrollHeight","viewportHeight","tabTop","tabHeight","targetScrollTop","maxScroll","clampedScroll","scrollLeft","scrollWidth","viewportWidth","tabLeft","tabWidth","targetScrollLeft","rafId","handleScroll","clientHeight","clientWidth","handleWheel","e","handleValueChange","key","orientation","variantConfig","variantClasses","listVariantClass","triggerVariantClass","getUnderlinedTriggerClasses","getEnclosedTriggerClasses","getEnclosedFillTriggerClasses","triggerColorClass","getColorClasses","listBorderClass","getListBorderClasses","visibleTabs","overflowTabs","showDropdownButton","isActiveTabInOverflow","renderTabTriggers","tabItems","startIndex","item","index","actualIndex","jsxs","STabsTrigger","el","cn","jsx","renderTabsList","tabsListContent","STabsList","positionClasses","sizeClasses","motion","ScrollArea","ScrollBar","Popover","MoreHorizontal","STabs","alignmentClasses","STabsContent"],"mappings":"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"}
+{"version":3,"file":"Tabs.js","sources":["../../../../src/components/Tabs/Tabs.tsx"],"sourcesContent":["import React from \"react\";\nimport {\n  Tabs as STabs,\n  TabsList as STabsList,\n  TabsTrigger as STabsTrigger,\n  TabsContent as STabsContent,\n} from \"@dsui/ui/components/tabs\";\nimport { motion } from \"motion/react\";\nimport { cn } from \"@dsui/ui/lib/utils\";\nimport { ScrollArea, ScrollBar } from \"../ScrollArea/ScrollArea\";\nimport { Popover } from \"../Popover\";\nimport { MoreHorizontal } from \"lucide-react\";\nimport type {\n  TabAlignment,\n  TabColor,\n  TabItem,\n  TabOverflowMode,\n  TabPosition,\n  TabSize,\n  TabVariant,\n} from \"./types\";\nimport {\n  alignmentClasses,\n  getColorClasses,\n  getEnclosedFillTriggerClasses,\n  getEnclosedTriggerClasses,\n  getListBorderClasses,\n  getUnderlinedTriggerClasses,\n  positionClasses,\n  sizeClasses,\n  variantClasses,\n} from \"./classes\";\n\nexport interface TabsProps {\n  // Core props\n  items: TabItem[];\n  defaultActiveKey?: string;\n  activeKey?: string;\n  onChange?: (key: string) => void;\n\n  // Layout\n  tabPosition?: TabPosition;\n  size?: TabSize;\n  alignment?: TabAlignment;\n  fullWidth?: boolean;\n\n  // Overflow handling\n  overflowMode?: TabOverflowMode;\n\n  // Styling\n  variant?: TabVariant;\n  color?: TabColor;\n  className?: string;\n  tabListClassName?: string;\n  tabContentClassName?: string;\n  tabTriggerClassName?: string;\n}\n\nconst Tabs = React.forwardRef<HTMLDivElement, TabsProps>((props, ref) => {\n  const {\n    items,\n    defaultActiveKey,\n    activeKey,\n    onChange,\n    tabPosition = \"top\",\n    size = \"md\",\n    alignment = \"start\",\n    fullWidth = false,\n    overflowMode = \"scroll\",\n    variant = \"solid\",\n    color = \"muted\",\n    className,\n    tabListClassName,\n    tabContentClassName,\n    tabTriggerClassName,\n  } = props;\n\n  const tabRefs = React.useRef<(HTMLButtonElement | null)[]>([]);\n  const tabsListRef = React.useRef<HTMLDivElement | null>(null);\n  const containerRef = React.useRef<HTMLDivElement | null>(null);\n  const scrollAreaRef = React.useRef<HTMLDivElement | null>(null);\n\n  const [indicatorStyle, setIndicatorStyle] = React.useState<{\n    left: number;\n    width: number;\n    top: number;\n    height: number;\n  }>({\n    left: 0,\n    width: 0,\n    top: 0,\n    height: 0,\n  });\n\n  const [internalActiveKey, setInternalActiveKey] = React.useState<\n    string | undefined\n  >(activeKey || defaultActiveKey || items[0]?.key);\n\n  // Overflow state management\n  const [isOverflowing, setIsOverflowing] = React.useState(false);\n  const [visibleTabsCount, setVisibleTabsCount] = React.useState(items.length);\n  const [dropdownOpen, setDropdownOpen] = React.useState(false);\n\n  // Fade state management for scroll position\n  const [showStartFade, setShowStartFade] = React.useState(false);\n  const [showEndFade, setShowEndFade] = React.useState(false);\n\n  const currentActiveKey =\n    activeKey !== undefined ? activeKey : internalActiveKey;\n\n  const isVertical = tabPosition === \"left\" || tabPosition === \"right\";\n\n  // Check if tabs are overflowing (for scroll and fade modes)\n  React.useLayoutEffect(() => {\n    if (!overflowMode || overflowMode === \"dropdown\") return;\n\n    const checkOverflow = () => {\n      const container = containerRef.current;\n      const listElement = tabsListRef.current;\n\n      if (!container || !listElement) return;\n\n      const containerSize = isVertical\n        ? container.clientHeight\n        : container.clientWidth;\n      const listSize = isVertical\n        ? listElement.scrollHeight\n        : listElement.scrollWidth;\n\n      const hasOverflow = listSize > containerSize;\n      setIsOverflowing(hasOverflow);\n    };\n\n    // Initial check\n    checkOverflow();\n\n    // Use ResizeObserver for responsive updates\n    const resizeObserver = new ResizeObserver(checkOverflow);\n    if (containerRef.current) {\n      resizeObserver.observe(containerRef.current);\n    }\n    if (tabsListRef.current) {\n      resizeObserver.observe(tabsListRef.current);\n    }\n\n    return () => {\n      resizeObserver.disconnect();\n    };\n  }, [items, overflowMode, isVertical]);\n\n  // Calculate visible tabs for dropdown mode\n  React.useLayoutEffect(() => {\n    if (overflowMode !== \"dropdown\") return;\n\n    const calculateVisibleTabs = () => {\n      const container = containerRef.current;\n      if (!container) return;\n\n      const containerSize = isVertical\n        ? container.clientHeight\n        : container.clientWidth;\n\n      // Calculate how many tabs can fit including the [...] button\n      let totalSize = 0;\n      const dropdownButtonSize = 48; // Size of [...] button with gap\n      const listPadding = 6; // p-[3px] = 6px total padding for some variants\n      const gap =\n        variant === \"enclosed-fill\" ||\n        variant === \"bordered\" ||\n        variant === \"pills\" ||\n        variant === \"pill-stroke\" ||\n        variant === \"text\" ||\n        variant === \"outline\"\n          ? 4\n          : 0; // gap-1 = 4px\n\n      let count = 0;\n      for (let i = 0; i < tabRefs.current.length; i++) {\n        const tab = tabRefs.current[i];\n        if (!tab) break;\n\n        const tabSize = isVertical ? tab.offsetHeight : tab.offsetWidth;\n        const withGap = i > 0 ? gap : 0;\n\n        // Check if we can fit this tab + [...] button if there are more tabs\n        const hasMoreTabs = i < tabRefs.current.length - 1;\n        const requiredSize =\n          totalSize +\n          tabSize +\n          withGap +\n          (hasMoreTabs ? dropdownButtonSize : 0) +\n          listPadding;\n\n        if (requiredSize <= containerSize) {\n          totalSize += tabSize + withGap;\n          count++;\n        } else {\n          break;\n        }\n      }\n\n      // Only show overflow if we can't fit all tabs\n      const hasHiddenTabs = count < items.length;\n      setIsOverflowing(hasHiddenTabs);\n      setVisibleTabsCount(Math.max(1, count));\n    };\n\n    // Initial calculation\n    calculateVisibleTabs();\n\n    // Use ResizeObserver for responsive updates\n    const resizeObserver = new ResizeObserver(calculateVisibleTabs);\n    if (containerRef.current) {\n      resizeObserver.observe(containerRef.current);\n    }\n\n    // Also observe each tab for size changes\n    tabRefs.current.forEach((tab) => {\n      if (tab) resizeObserver.observe(tab);\n    });\n\n    return () => {\n      resizeObserver.disconnect();\n    };\n  }, [items, overflowMode, isVertical, variant]);\n\n  React.useLayoutEffect(() => {\n    const activeIndex = items.findIndex((tab) => tab.key === currentActiveKey);\n    const activeTabElement = tabRefs.current[activeIndex];\n    const listElement = tabsListRef.current;\n\n    if (activeTabElement && listElement) {\n      const listRect = listElement.getBoundingClientRect();\n      const tabRect = activeTabElement.getBoundingClientRect();\n\n      // Calculate relative position within the list\n      const left = tabRect.left - listRect.left;\n      const top = tabRect.top - listRect.top;\n\n      setIndicatorStyle({\n        left: left,\n        width: tabRect.width,\n        top: top,\n        height: tabRect.height,\n      });\n\n      // Auto-scroll to active tab in fade mode\n      if (overflowMode === \"fade\" && scrollAreaRef.current) {\n        const scrollAreaViewport = scrollAreaRef.current.querySelector(\n          \"[data-radix-scroll-area-viewport]\"\n        ) as HTMLElement;\n\n        if (scrollAreaViewport) {\n          const viewportRect = scrollAreaViewport.getBoundingClientRect();\n          const tabRectInViewport = activeTabElement.getBoundingClientRect();\n          const fadeWidth = 96; // 24 * 4 = 96px (w-24 class)\n\n          if (isVertical) {\n            // Scroll vertically\n            const scrollTop = scrollAreaViewport.scrollTop;\n            const scrollHeight = scrollAreaViewport.scrollHeight;\n            const viewportHeight = viewportRect.height;\n            const tabTop = tabRectInViewport.top - viewportRect.top + scrollTop;\n            const tabHeight = tabRectInViewport.height;\n\n            // If it's the first tab, scroll to the very top\n            if (activeIndex === 0) {\n              scrollAreaViewport.scrollTo({\n                top: 0,\n                behavior: \"smooth\",\n              });\n            }\n            // If it's the last tab, scroll to the very bottom\n            else if (activeIndex === items.length - 1) {\n              scrollAreaViewport.scrollTo({\n                top: scrollHeight - viewportHeight,\n                behavior: \"smooth\",\n              });\n            }\n            // For middle tabs, try to center them with padding to avoid fade\n            else {\n              const targetScrollTop =\n                tabTop - viewportHeight / 2 + tabHeight / 2;\n              const maxScroll = scrollHeight - viewportHeight;\n\n              // Ensure we don't scroll beyond bounds and leave space for fade\n              const clampedScroll = Math.max(\n                fadeWidth / 2,\n                Math.min(targetScrollTop, maxScroll - fadeWidth / 2)\n              );\n\n              scrollAreaViewport.scrollTo({\n                top: clampedScroll,\n                behavior: \"smooth\",\n              });\n            }\n          } else {\n            // Scroll horizontally\n            const scrollLeft = scrollAreaViewport.scrollLeft;\n            const scrollWidth = scrollAreaViewport.scrollWidth;\n            const viewportWidth = viewportRect.width;\n            const tabLeft =\n              tabRectInViewport.left - viewportRect.left + scrollLeft;\n            const tabWidth = tabRectInViewport.width;\n\n            // If it's the first tab, scroll to the very left\n            if (activeIndex === 0) {\n              scrollAreaViewport.scrollTo({\n                left: 0,\n                behavior: \"smooth\",\n              });\n            }\n            // If it's the last tab, scroll to the very right\n            else if (activeIndex === items.length - 1) {\n              scrollAreaViewport.scrollTo({\n                left: scrollWidth - viewportWidth,\n                behavior: \"smooth\",\n              });\n            }\n            // For middle tabs, try to center them with padding to avoid fade\n            else {\n              const targetScrollLeft =\n                tabLeft - viewportWidth / 2 + tabWidth / 2;\n              const maxScroll = scrollWidth - viewportWidth;\n\n              // Ensure we don't scroll beyond bounds and leave space for fade\n              const clampedScroll = Math.max(\n                fadeWidth / 2,\n                Math.min(targetScrollLeft, maxScroll - fadeWidth / 2)\n              );\n\n              scrollAreaViewport.scrollTo({\n                left: clampedScroll,\n                behavior: \"smooth\",\n              });\n            }\n          }\n        }\n      }\n    }\n  }, [currentActiveKey, items, isVertical, overflowMode]);\n\n  // Handle scroll events for fade mode to show/hide fade gradients\n  React.useEffect(() => {\n    if (overflowMode !== \"fade\" || !scrollAreaRef.current) return;\n\n    const scrollAreaViewport = scrollAreaRef.current.querySelector(\n      \"[data-radix-scroll-area-viewport]\"\n    ) as HTMLElement;\n\n    if (!scrollAreaViewport) return;\n\n    let rafId: number | null = null;\n\n    const handleScroll = () => {\n      // Cancel previous frame if still pending\n      if (rafId !== null) {\n        cancelAnimationFrame(rafId);\n      }\n\n      // Use requestAnimationFrame for smooth updates\n      rafId = requestAnimationFrame(() => {\n        const threshold = 5; // Small threshold to account for floating point precision\n\n        if (isVertical) {\n          const scrollTop = scrollAreaViewport.scrollTop;\n          const scrollHeight = scrollAreaViewport.scrollHeight;\n          const clientHeight = scrollAreaViewport.clientHeight;\n\n          setShowStartFade(scrollTop > threshold);\n          setShowEndFade(scrollTop < scrollHeight - clientHeight - threshold);\n        } else {\n          const scrollLeft = scrollAreaViewport.scrollLeft;\n          const scrollWidth = scrollAreaViewport.scrollWidth;\n          const clientWidth = scrollAreaViewport.clientWidth;\n\n          setShowStartFade(scrollLeft > threshold);\n          setShowEndFade(scrollLeft < scrollWidth - clientWidth - threshold);\n        }\n\n        // Update indicator position smoothly during scroll\n        const activeIndex = items.findIndex(\n          (tab) => tab.key === currentActiveKey\n        );\n        const activeTabElement = tabRefs.current[activeIndex];\n        const listElement = tabsListRef.current;\n\n        if (activeTabElement && listElement) {\n          const listRect = listElement.getBoundingClientRect();\n          const tabRect = activeTabElement.getBoundingClientRect();\n\n          const left = tabRect.left - listRect.left;\n          const top = tabRect.top - listRect.top;\n\n          setIndicatorStyle({\n            left: left,\n            width: tabRect.width,\n            top: top,\n            height: tabRect.height,\n          });\n        }\n\n        rafId = null;\n      });\n    };\n\n    // Initial check\n    handleScroll();\n\n    // Add scroll listener\n    scrollAreaViewport.addEventListener(\"scroll\", handleScroll, {\n      passive: true,\n    });\n\n    // Recheck on resize\n    const resizeObserver = new ResizeObserver(handleScroll);\n    resizeObserver.observe(scrollAreaViewport);\n\n    return () => {\n      if (rafId !== null) {\n        cancelAnimationFrame(rafId);\n      }\n      scrollAreaViewport.removeEventListener(\"scroll\", handleScroll);\n      resizeObserver.disconnect();\n    };\n  }, [overflowMode, isVertical, isOverflowing, items, currentActiveKey]);\n\n  // Enable horizontal scrolling with mouse wheel for horizontal tabs in scroll/fade modes\n  React.useEffect(() => {\n    if (overflowMode !== \"scroll\" && overflowMode !== \"fade\") return;\n    if (isVertical) return; // Only for horizontal tabs\n\n    const scrollAreaViewport = scrollAreaRef.current?.querySelector(\n      \"[data-radix-scroll-area-viewport]\"\n    ) as HTMLElement;\n\n    if (!scrollAreaViewport) return;\n\n    const handleWheel = (e: WheelEvent) => {\n      if (e.deltaY !== 0) {\n        e.preventDefault();\n        scrollAreaViewport.scrollLeft += e.deltaY * 2;\n      }\n    };\n\n    scrollAreaViewport.addEventListener(\"wheel\", handleWheel, { passive: false });\n\n    return () => {\n      scrollAreaViewport.removeEventListener(\"wheel\", handleWheel);\n    };\n  }, [overflowMode, isVertical]);\n\n  const handleValueChange = (key: string) => {\n    if (activeKey === undefined) {\n      setInternalActiveKey(key);\n    }\n    onChange?.(key);\n  };\n\n  const orientation = isVertical ? \"vertical\" : \"horizontal\";\n\n  // Get variant classes\n  const variantConfig = variantClasses[variant];\n  const listVariantClass =\n    variantConfig.list[isVertical ? \"vertical\" : \"horizontal\"];\n\n  // Get trigger variant class based on variant type\n  let triggerVariantClass =\n    variantConfig.trigger[isVertical ? \"vertical\" : \"horizontal\"];\n\n  // For underlined and enclosed variants, use dynamic classes based on position\n  if (variant === \"underlined\") {\n    triggerVariantClass = getUnderlinedTriggerClasses(tabPosition);\n  } else if (variant === \"enclosed\") {\n    triggerVariantClass = getEnclosedTriggerClasses(tabPosition);\n  } else if (variant === \"enclosed-fill\") {\n    triggerVariantClass = getEnclosedFillTriggerClasses(tabPosition);\n  }\n\n  // Get color classes based on variant\n  const triggerColorClass = getColorClasses(variant, color);\n  const listBorderClass = getListBorderClasses(variant, color, tabPosition);\n\n  // Determine which tabs to show based on overflow mode\n  const visibleTabs =\n    overflowMode === \"dropdown\" && isOverflowing\n      ? items.slice(0, visibleTabsCount)\n      : items;\n\n  const overflowTabs =\n    overflowMode === \"dropdown\" && isOverflowing\n      ? items.slice(visibleTabsCount)\n      : overflowMode === \"fade\" && isOverflowing\n        ? items\n        : [];\n\n  // For dropdown mode: show [...] button only if there are hidden tabs\n  const showDropdownButton =\n    overflowMode === \"dropdown\" && isOverflowing && overflowTabs.length > 0;\n\n  // Check if active tab is in overflow (hidden) tabs\n  const isActiveTabInOverflow =\n    overflowMode === \"dropdown\" &&\n    isOverflowing &&\n    overflowTabs.some((tab) => tab.key === currentActiveKey);\n\n  const renderTabTriggers = (tabItems: TabItem[], startIndex = 0) => (\n    <>\n      {tabItems.map((item, index) => {\n        const actualIndex = startIndex + index;\n        return (\n          <STabsTrigger\n            key={item.key}\n            ref={(el) => {\n              tabRefs.current[actualIndex] = el;\n            }}\n            value={item.key}\n            disabled={item.disabled}\n            className={cn(\n              triggerVariantClass,\n              // Apply styles based on variant\n              {\n                // For sliding indicator variants, remove default background\n                \"ds:relative ds:z-10 ds:bg-transparent ds:data-[state=active]:bg-transparent\":\n                  variant === \"solid\" ||\n                  variant === \"bordered\" ||\n                  variant === \"pills\",\n                // Apply text color for active state with sliding indicator\n                \"ds:data-[state=active]:text-primary-foreground\":\n                  (variant === \"bordered\" || variant === \"pills\") &&\n                  color === \"primary\",\n                \"ds:data-[state=active]:text-secondary-foreground\":\n                  (variant === \"bordered\" || variant === \"pills\") &&\n                  color === \"secondary\",\n                \"ds:data-[state=active]:text-muted-foreground\":\n                  (variant === \"bordered\" || variant === \"pills\") &&\n                  color === \"muted\",\n                \"ds:data-[state=active]:text-accent-foreground\":\n                  (variant === \"bordered\" || variant === \"pills\") &&\n                  color === \"accent\",\n                \"ds:data-[state=active]:text-destructive-foreground\":\n                  (variant === \"bordered\" || variant === \"pills\") &&\n                  color === \"destructive\",\n                \"ds:data-[state=active]:text-white\":\n                  (variant === \"bordered\" || variant === \"pills\") &&\n                  (color === \"success\" || color === \"warning\"),\n                \"ds:flex-1\": fullWidth && !isVertical,\n                \"ds:w-full ds:justify-start\": isVertical,\n              },\n              // For other variants, apply normal color classes\n              !(\n                variant === \"solid\" ||\n                variant === \"bordered\" ||\n                variant === \"pills\"\n              ) && triggerColorClass,\n              item.className,\n              tabTriggerClassName\n            )}\n          >\n            {item.icon && (\n              <span className=\"ds:mr-2 ds:inline-flex ds:items-center\">{item.icon}</span>\n            )}\n            {item.label}\n          </STabsTrigger>\n        );\n      })}\n    </>\n  );\n\n  const renderTabsList = () => {\n    const tabsListContent = (\n      <STabsList\n        ref={tabsListRef}\n        className={cn(\n          positionClasses[tabPosition].list,\n          sizeClasses[size][isVertical ? \"vertical\" : \"horizontal\"],\n          listVariantClass,\n          listBorderClass,\n          tabListClassName,\n          \"ds:relative\",\n          {\n            \"ds:overflow-hidden\": overflowMode === \"fade\" && isOverflowing,\n            \"ds:max-w-full\": overflowMode === \"fade\", // Limit width for fade mode\n            // For overflow modes, allow natural width expansion\n            \"ds:w-auto\": overflowMode === \"dropdown\" || overflowMode === \"fade\",\n          }\n        )}\n      >\n        {renderTabTriggers(visibleTabs)}\n\n        {/* Sliding indicator for underlined variant */}\n        {variant === \"underlined\" &&\n          indicatorStyle.width > 0 &&\n          !isActiveTabInOverflow && (\n            <motion.div\n              className={cn(\"ds:absolute ds:rounded-full ds:z-10\", {\n                // Horizontal positions (top/bottom)\n                \"ds:h-0.5 ds:bottom-0\": tabPosition === \"top\",\n                \"ds:h-0.5 ds:top-0\": tabPosition === \"bottom\",\n                // Vertical positions (left/right)\n                \"ds:w-0.5 ds:right-0\": tabPosition === \"left\",\n                \"ds:w-0.5 ds:left-0\": tabPosition === \"right\",\n                // Colors\n                \"ds:bg-primary\": color === \"primary\",\n                \"ds:bg-secondary\": color === \"secondary\",\n                \"ds:bg-muted-foreground\": color === \"muted\",\n                \"ds:bg-accent\": color === \"accent\",\n                \"ds:bg-destructive\": color === \"destructive\",\n                \"ds:bg-success\": color === \"success\",\n                \"ds:bg-warning\": color === \"warning\",\n              })}\n              animate={\n                isVertical\n                  ? {\n                      top: indicatorStyle.top,\n                      height: indicatorStyle.height,\n                    }\n                  : {\n                      left: indicatorStyle.left,\n                      width: indicatorStyle.width,\n                    }\n              }\n              transition={{\n                type: \"spring\",\n                stiffness: 300,\n                damping: 30,\n              }}\n            />\n          )}\n\n        {/* Sliding indicator for solid, bordered, pills variants */}\n        {(variant === \"solid\" ||\n          variant === \"bordered\" ||\n          variant === \"pills\" ||\n          variant === \"pill-stroke\") &&\n          indicatorStyle.width > 0 &&\n          !isActiveTabInOverflow && (\n            <motion.div\n              className={cn(\"ds:absolute ds:rounded-md ds:pointer-events-none ds:z-0\", {\n                \"ds:bg-background ds:shadow-sm\": variant === \"solid\",\n\n                \"ds:bg-primary\":\n                  (variant === \"bordered\" || variant === \"pills\") &&\n                  color === \"primary\",\n                \"ds:bg-secondary\":\n                  (variant === \"bordered\" || variant === \"pills\") &&\n                  color === \"secondary\",\n                \"ds:bg-muted\":\n                  (variant === \"bordered\" || variant === \"pills\") &&\n                  color === \"muted\",\n                \"ds:bg-accent\":\n                  (variant === \"bordered\" || variant === \"pills\") &&\n                  color === \"accent\",\n                \"ds:bg-destructive\":\n                  (variant === \"bordered\" || variant === \"pills\") &&\n                  color === \"destructive\",\n                \"ds:bg-success\":\n                  (variant === \"bordered\" || variant === \"pills\") &&\n                  color === \"success\",\n                \"ds:bg-warning\":\n                  (variant === \"bordered\" || variant === \"pills\") &&\n                  color === \"warning\",\n\n                \"ds:border ds:rounded-full ds:border-primary\":\n                  variant === \"pill-stroke\" && color === \"primary\",\n                \"ds:border ds:rounded-full ds:border-secondary\":\n                  variant === \"pill-stroke\" && color === \"secondary\",\n                \"ds:rounded-full ds:border-muted\":\n                  variant === \"pill-stroke\" && color === \"muted\",\n                \"ds:border ds:rounded-full ds:border-accent\":\n                  variant === \"pill-stroke\" && color === \"accent\",\n                \"ds:border ds:rounded-full ds:border-destructive\":\n                  variant === \"pill-stroke\" && color === \"destructive\",\n                \"ds:border ds:rounded-full ds:border-success\":\n                  variant === \"pill-stroke\" && color === \"success\",\n                \"ds:border ds:rounded-full ds:border-warning\":\n                  variant === \"pill-stroke\" && color === \"warning\",\n              })}\n              animate={{\n                left: indicatorStyle.left,\n                width: indicatorStyle.width,\n                top: indicatorStyle.top,\n                height: indicatorStyle.height,\n              }}\n              transition={{\n                type: \"spring\",\n                stiffness: 300,\n                damping: 30,\n              }}\n            />\n          )}\n      </STabsList>\n    );\n\n    // Mode 1: Scroll - wrap in ScrollArea with ScrollBar\n    if (overflowMode === \"scroll\") {\n      return (\n        <ScrollArea\n          ref={scrollAreaRef}\n          className={cn({\n            \"ds:w-full\": !isVertical,\n            \"ds:pb-2\": !isVertical && isOverflowing,\n            \"ds:max-h-[300px] ds:*:data-radix-scroll-area-viewport:h-full ds:*:data-radix-scroll-area-viewport:max-h-[inherit]\":\n              isVertical,\n          })}\n        >\n          {tabsListContent}\n          <ScrollBar orientation={isVertical ? \"vertical\" : \"horizontal\"} />\n        </ScrollArea>\n      );\n    }\n\n    // Mode 2: Dropdown - show visible tabs + [...] button for overflow tabs\n    if (overflowMode === \"dropdown\" && showDropdownButton) {\n      return (\n        <div\n          className={cn(\"ds:relative ds:flex ds:items-start ds:gap-1\", {\n            \"ds:flex-col\": isVertical,\n          })}\n        >\n          {/* Show only visible tabs */}\n          {tabsListContent}\n\n          {/* Overflow menu button - only show if there are hidden tabs */}\n          <Popover\n            open={dropdownOpen}\n            onOpenChange={setDropdownOpen}\n            trigger={\n              <button\n                className={cn(\n                  \"ds:inline-flex ds:items-center ds:justify-center ds:rounded-md ds:text-sm ds:font-medium ds:ring-offset-background ds:transition-colors\",\n                  \"ds:focus-visible:outline-none ds:focus-visible:ring-2 ds:focus-visible:ring-ring ds:focus-visible:ring-offset-2\",\n                  \"ds:disabled:pointer-events-none ds:disabled:opacity-50\",\n                  \"ds:hover:bg-accent ds:hover:text-accent-foreground\",\n                  \"ds:h-9 ds:px-3 ds:shrink-0\",\n                  {\n                    \"ds:bg-accent ds:text-accent-foreground\": dropdownOpen,\n                  }\n                )}\n                aria-label=\"More tabs\"\n              >\n                <MoreHorizontal className=\"ds:h-4 ds:w-4\" />\n              </button>\n            }\n            content={\n              <div className={cn(\"ds:flex ds:flex-col ds:gap-1 ds:p-1\")}>\n                {overflowTabs.map((item) => (\n                  <button\n                    key={item.key}\n                    onClick={() => {\n                      handleValueChange(item.key);\n                      setDropdownOpen(false);\n                    }}\n                    disabled={item.disabled}\n                    className={cn(\n                      \"ds:flex ds:items-center ds:gap-2 ds:rounded-sm ds:px-2 ds:py-1.5 ds:text-sm\",\n                      \"ds:hover:bg-accent ds:hover:text-accent-foreground\",\n                      \"ds:disabled:pointer-events-none ds:disabled:opacity-50\",\n                      \"ds:text-left\",\n                      {\n                        \"ds:bg-accent ds:text-accent-foreground\":\n                          item.key === currentActiveKey,\n                      }\n                    )}\n                  >\n                    {item.icon && (\n                      <span className=\"ds:inline-flex ds:items-center\">\n                        {item.icon}\n                      </span>\n                    )}\n                    {item.label}\n                  </button>\n                ))}\n              </div>\n            }\n            side={isVertical ? \"right\" : \"bottom\"}\n            align=\"end\"\n            className=\"ds:w-auto ds:min-w-32 ds:max-w-sm ds:max-h-96 ds:overflow-auto ds:p-0\"\n          />\n        </div>\n      );\n    }\n\n    // Mode 3: Fade with overflow button\n    if (overflowMode === \"fade\" && isOverflowing) {\n      return (\n        <div\n          className={cn(\"ds:relative ds:flex ds:items-start ds:gap-1\", {\n            \"ds:flex-col\": isVertical,\n            \"ds:flex-1 ds:w-full\": true, // Take full width for fade mode\n          })}\n        >\n          {/* Fade effect for mode 3 */}\n          <div\n            className={cn(\"ds:relative ds:flex-1 ds:overflow-hidden\", {\n              \"ds:w-full\": !isVertical,\n              \"ds:h-full\": isVertical,\n            })}\n          >\n            <ScrollArea\n              ref={scrollAreaRef}\n              className={cn({\n                \"ds:w-full\": !isVertical,\n                \"ds:h-full\": isVertical,\n              })}\n            >\n              {tabsListContent}\n              <ScrollBar orientation={isVertical ? \"vertical\" : \"horizontal\"} />\n            </ScrollArea>\n\n            {/* Start gradient overlay (left/top) - only show when scrolled */}\n            {showStartFade && (\n              <div\n                className={cn(\"ds:absolute ds:pointer-events-none ds:z-20\", {\n                  \"ds:top-0 ds:left-0 ds:bottom-0 ds:w-24 ds:bg-linear-to-r ds:from-background ds:to-transparent\":\n                    !isVertical,\n                  \"ds:left-0 ds:right-0 ds:top-0 ds:h-24 ds:bg-linear-to-b ds:from-background ds:to-transparent\":\n                    isVertical,\n                })}\n              />\n            )}\n\n            {/* End gradient overlay (right/bottom) - only show when not at end */}\n            {showEndFade && (\n              <div\n                className={cn(\"ds:absolute ds:pointer-events-none ds:z-20\", {\n                  \"ds:top-0 ds:right-0 ds:bottom-0 ds:w-24 ds:bg-linear-to-l ds:from-background ds:to-transparent\":\n                    !isVertical,\n                  \"ds:left-0 ds:right-0 ds:bottom-0 ds:h-24 ds:bg-linear-to-t ds:from-background ds:to-transparent\":\n                    isVertical,\n                })}\n              />\n            )}\n          </div>\n\n          {/* Overflow menu button - shows all tabs */}\n          <Popover\n            open={dropdownOpen}\n            onOpenChange={setDropdownOpen}\n            trigger={\n              <button\n                className={cn(\n                  \"ds:inline-flex ds:items-center ds:justify-center ds:rounded-md ds:text-sm ds:font-medium ds:ring-offset-background ds:transition-colors\",\n                  \"ds:focus-visible:outline-none ds:focus-visible:ring-2 ds:focus-visible:ring-ring ds:focus-visible:ring-offset-2\",\n                  \"ds:disabled:pointer-events-none ds:disabled:opacity-50\",\n                  \"ds:hover:bg-accent ds:hover:text-accent-foreground\",\n                  \"ds:h-9 ds:px-3 ds:shrink-0\",\n                  {\n                    \"ds:bg-accent ds:text-accent-foreground\": dropdownOpen,\n                  }\n                )}\n                aria-label=\"More tabs\"\n              >\n                <MoreHorizontal className=\"ds:h-4 ds:w-4\" />\n              </button>\n            }\n            content={\n              // <div className={cn(\"flex flex-col gap-1 min-w-[150px]\")}>\n              <ScrollArea\n                className=\"ds:min-w-[150px] ds:max-h-[256px] ds:[&_[data-radix-scroll-area-viewport]]:max-h-[256px]\"\n                snapType=\"y\"\n              >\n                {items.map((item) => (\n                  <button\n                    key={item.key}\n                    onClick={() => {\n                      handleValueChange(item.key);\n                      setDropdownOpen(false);\n                    }}\n                    disabled={item.disabled}\n                    className={cn(\n                      \"ds:snap-start\",\n                      \"ds:w-full ds:flex ds:items-center ds:gap-2 ds:rounded-sm ds:px-2 ds:py-1.5 ds:text-sm\",\n                      \"ds:hover:bg-accent ds:hover:text-accent-foreground\",\n                      \"ds:disabled:pointer-events-none ds:disabled:opacity-50\",\n                      \"ds:text-left\",\n                      {\n                        \"ds:bg-accent ds:text-accent-foreground\":\n                          item.key === currentActiveKey,\n                      }\n                    )}\n                  >\n                    {item.icon && (\n                      <span className=\"ds:inline-flex ds:items-center\">\n                        {item.icon}\n                      </span>\n                    )}\n                    {item.label}\n                  </button>\n                ))}\n              </ScrollArea>\n              // </div>\n            }\n            side={isVertical ? \"right\" : \"bottom\"}\n            align=\"end\"\n            className=\"ds:p-2\"\n          />\n        </div>\n      );\n    }\n\n    return tabsListContent;\n  };\n\n  return (\n    <STabs\n      ref={ref}\n      defaultValue={defaultActiveKey}\n      value={currentActiveKey}\n      onValueChange={handleValueChange}\n      orientation={orientation}\n      className={cn(\"ds:gap-2\", positionClasses[tabPosition].root, className)}\n    >\n      <div\n        ref={containerRef}\n        className={cn(\"ds:flex\", {\n          [alignmentClasses[alignment].horizontal]: !isVertical,\n          [alignmentClasses[alignment].vertical]: isVertical,\n          \"ds:w-full\":\n            (fullWidth ||\n              overflowMode === \"dropdown\" ||\n              overflowMode === \"fade\") &&\n            !isVertical,\n          \"ds:overflow-hidden\":\n            overflowMode === \"dropdown\" || overflowMode === \"fade\",\n        })}\n      >\n        {renderTabsList()}\n      </div>\n      {items.map((item) => (\n        <STabsContent\n          key={item.key}\n          value={item.key}\n          className={cn(tabContentClassName)}\n        >\n          {item.children}\n        </STabsContent>\n      ))}\n    </STabs>\n  );\n});\n\nTabs.displayName = \"Tabs\";\n\nexport default Tabs;\n"],"names":["Tabs","React","props","ref","items","defaultActiveKey","activeKey","onChange","tabPosition","size","alignment","fullWidth","overflowMode","variant","color","className","tabListClassName","tabContentClassName","tabTriggerClassName","tabRefs","tabsListRef","containerRef","scrollAreaRef","indicatorStyle","setIndicatorStyle","internalActiveKey","setInternalActiveKey","isOverflowing","setIsOverflowing","visibleTabsCount","setVisibleTabsCount","dropdownOpen","setDropdownOpen","showStartFade","setShowStartFade","showEndFade","setShowEndFade","currentActiveKey","isVertical","checkOverflow","container","listElement","containerSize","hasOverflow","resizeObserver","calculateVisibleTabs","totalSize","dropdownButtonSize","listPadding","gap","count","i","tab","tabSize","withGap","hasMoreTabs","hasHiddenTabs","activeIndex","activeTabElement","listRect","tabRect","left","top","scrollAreaViewport","viewportRect","tabRectInViewport","fadeWidth","scrollTop","scrollHeight","viewportHeight","tabTop","tabHeight","targetScrollTop","maxScroll","clampedScroll","scrollLeft","scrollWidth","viewportWidth","tabLeft","tabWidth","targetScrollLeft","rafId","handleScroll","clientHeight","clientWidth","handleWheel","e","handleValueChange","key","orientation","variantConfig","variantClasses","listVariantClass","triggerVariantClass","getUnderlinedTriggerClasses","getEnclosedTriggerClasses","getEnclosedFillTriggerClasses","triggerColorClass","getColorClasses","listBorderClass","getListBorderClasses","visibleTabs","overflowTabs","showDropdownButton","isActiveTabInOverflow","renderTabTriggers","tabItems","startIndex","item","index","actualIndex","jsxs","STabsTrigger","el","cn","jsx","renderTabsList","tabsListContent","STabsList","positionClasses","sizeClasses","motion","ScrollArea","ScrollBar","Popover","MoreHorizontal","STabs","alignmentClasses","STabsContent"],"mappings":"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"}

package/dist/esm/components/Tabs/classes.js

@@ -5,7 +5,7 @@ import "../../packages/ui/src/components/input.js";
 import "../../packages/ui/src/components/textarea.js";
 import "react/jsx-runtime";
 import "@radix-ui/react-label";
-import { cn as o } from "../../packages/ui/src/lib/utils.js";
+import { cn as s } from "../../packages/ui/src/lib/utils.js";
 import "../../packages/ui/src/components/select.js";
 import "../../packages/ui/src/components/combobox.js";
 import "@radix-ui/react-tooltip";
@@ -34,46 +34,46 @@ import "../../packages/ui/src/components/tabs.js";
 import "../../packages/ui/src/components/toggle.js";
 const J = {
   sm: {
-    horizontal: "text-xs h-7 [&>button]:px-2",
-    vertical: "text-xs [&>button]:py-0.5"
+    horizontal: "ds:text-xs ds:h-7 ds:[&>button]:px-2",
+    vertical: "ds:text-xs ds:[&>button]:py-0.5"
   },
   md: {
-    horizontal: "text-sm h-9 [&>button]:px-3",
-    vertical: "text-sm [&>button]:py-1"
+    horizontal: "ds:text-sm ds:h-9 ds:[&>button]:px-3",
+    vertical: "ds:text-sm ds:[&>button]:py-1"
   },
   lg: {
-    horizontal: "text-base h-11 [&>button]:px-4",
-    vertical: "text-base [&>button]:py-1.5"
+    horizontal: "ds:text-base ds:h-11 ds:[&>button]:px-4",
+    vertical: "ds:text-base ds:[&>button]:py-1.5"
   }
 }, K = {
   start: {
-    horizontal: "justify-start",
-    vertical: "items-start"
+    horizontal: "ds:justify-start",
+    vertical: "ds:items-start"
   },
   center: {
-    horizontal: "justify-center",
-    vertical: "items-center"
+    horizontal: "ds:justify-center",
+    vertical: "ds:items-center"
   },
   end: {
-    horizontal: "justify-end",
-    vertical: "items-end"
+    horizontal: "ds:justify-end",
+    vertical: "ds:items-end"
   }
 }, N = {
   top: {
-    root: "flex flex-col",
-    list: "flex-row"
+    root: "ds:flex ds:flex-col",
+    list: "ds:flex-row"
   },
   bottom: {
-    root: "flex flex-col-reverse",
-    list: "flex-row"
+    root: "ds:flex ds:flex-col-reverse",
+    list: "ds:flex-row"
   },
   left: {
-    root: "flex flex-row",
-    list: "flex-col h-fit"
+    root: "ds:flex ds:flex-row",
+    list: "ds:flex-col ds:h-fit"
   },
   right: {
-    root: "flex flex-row-reverse",
-    list: "flex-col h-fit"
+    root: "ds:flex ds:flex-row-reverse",
+    list: "ds:flex-col ds:h-fit"
   }
 }, O = (r, t) => {
   const a = {
@@ -124,11 +124,11 @@ const J = {
     case "outline":
       return a.border;
     case "underlined":
-      return o(a.border, a.text);
+      return s(a.border, a.text);
     case "enclosed":
-      return o(a.border, a.text);
+      return s(a.border, a.text);
     case "enclosed-fill":
-      return o(a.border, a.text);
+      return s(a.border, a.text);
     default:
       return "";
   }
@@ -234,7 +234,7 @@ const J = {
   }
   return "";
 }, R = (r) => {
-  const t = "bg-background dark:bg-background rounded-none border-0 border-transparent data-[state=active]:shadow-none";
+  const t = "ds:bg-background ds:dark:bg-background ds:rounded-none ds:border-0 ds:border-transparent ds:data-[state=active]:shadow-none";
   return {
     top: `${t} border-b-2 h-full`,
     bottom: `${t} border-t-2 h-full`,
@@ -242,7 +242,7 @@ const J = {
     right: `${t} border-l-2 w-full`
   }[r];
 }, S = (r) => {
-  const t = "bg-background dark:bg-background border border-transparent data-[state=active]:shadow-none rounded-none";
+  const t = "ds:bg-background ds:dark:bg-background ds:border ds:border-transparent ds:data-[state=active]:shadow-none ds:rounded-none";
   return {
     top: `${t} rounded-t-md data-[state=active]:border-t data-[state=active]:border-l data-[state=active]:border-r data-[state=active]:border-b-0 data-[state=active]:border-b-background dark:data-[state=active]:border-b-background h-full data-[state=active]:-mb-0.5 data-[state=active]:translate-y-[0px]`,
     bottom: `${t} rounded-b-md data-[state=active]:border-b data-[state=active]:border-l data-[state=active]:border-r data-[state=active]:border-t-0 data-[state=active]:border-t-background dark:data-[state=active]:border-t-background h-full data-[state=active]:-mt-0.5 data-[state=active]:translate-y-[0px]`,
@@ -250,7 +250,7 @@ const J = {
     right: `${t} rounded-r-md data-[state=active]:border-t data-[state=active]:border-r data-[state=active]:border-b data-[state=active]:border-l-0 data-[state=active]:border-l-background dark:data-[state=active]:border-l-background w-full data-[state=active]:-ml-0.5 data-[state=active]:translate-x-[1px]`
   }[r];
 }, V = (r) => {
-  const t = "bg-muted dark:bg-muted border border-transparent data-[state=active]:bg-background dark:data-[state=active]:bg-background data-[state=active]:shadow-none rounded-none";
+  const t = "ds:bg-muted ds:dark:bg-muted ds:border ds:border-transparent ds:data-[state=active]:bg-background ds:dark:data-[state=active]:bg-background ds:data-[state=active]:shadow-none ds:rounded-none";
   return {
     top: `${t} rounded-t-md data-[state=active]:border-t data-[state=active]:border-l data-[state=active]:border-r data-[state=active]:border-b-0 data-[state=active]:border-b-background dark:data-[state=active]:border-b-background h-full data-[state=active]:-mb-0.5 data-[state=active]:translate-y-[0px]`,
     bottom: `${t} rounded-b-md data-[state=active]:border-b data-[state=active]:border-l data-[state=active]:border-r data-[state=active]:border-t-0 data-[state=active]:border-t-background dark:data-[state=active]:border-t-background h-full data-[state=active]:-mt-0.5 data-[state=active]:translate-y-[0px]`,
@@ -261,8 +261,8 @@ const J = {
   // Solid: Default style (muted background, active has white background)
   solid: {
     list: {
-      horizontal: "bg-muted dark:bg-muted rounded-lg p-[3px]",
-      vertical: "bg-muted dark:bg-muted rounded-lg p-[3px]"
+      horizontal: "ds:bg-muted ds:dark:bg-muted ds:rounded-lg ds:p-[3px]",
+      vertical: "ds:bg-muted ds:dark:bg-muted ds:rounded-lg ds:p-[3px]"
     },
     trigger: {
       horizontal: "",
@@ -272,8 +272,8 @@ const J = {
   // Bordered: With border on group and colored active background
   bordered: {
     list: {
-      horizontal: "bg-background dark:bg-background border p-1 gap-1 rounded-lg",
-      vertical: "bg-background dark:bg-background border p-1 gap-1 rounded-lg"
+      horizontal: "ds:bg-background ds:dark:bg-background ds:border ds:p-1 ds:gap-1 ds:rounded-lg",
+      vertical: "ds:bg-background ds:dark:bg-background ds:border ds:p-1 ds:gap-1 ds:rounded-lg"
     },
     trigger: {
       horizontal: "",
@@ -283,8 +283,8 @@ const J = {
   // Pills: No border/background on group, colored background on active button
   pills: {
     list: {
-      horizontal: "bg-transparent p-0 gap-1",
-      vertical: "bg-transparent p-0 gap-1"
+      horizontal: "ds:bg-transparent ds:p-0 ds:gap-1",
+      vertical: "ds:bg-transparent ds:p-0 ds:gap-1"
     },
     trigger: {
       horizontal: "",
@@ -294,41 +294,41 @@ const J = {
   // Pill-stroke: Pill-style with stroke border, stronger border radius, no background on active
   "pill-stroke": {
     list: {
-      horizontal: "bg-transparent p-0 gap-1",
-      vertical: "bg-transparent p-0 gap-1"
+      horizontal: "ds:bg-transparent ds:p-0 ds:gap-1",
+      vertical: "ds:bg-transparent ds:p-0 ds:gap-1"
     },
     trigger: {
-      horizontal: "border border-border rounded-full bg-transparent",
-      vertical: "border border-border rounded-full bg-transparent"
+      horizontal: "ds:border ds:border-border ds:rounded-full ds:bg-transparent",
+      vertical: "ds:border ds:border-border ds:rounded-full ds:bg-transparent"
     }
   },
   // Text: No border/background on group, colored text on active button
   text: {
     list: {
-      horizontal: "bg-transparent p-0 gap-1",
-      vertical: "bg-transparent p-0 gap-1"
+      horizontal: "ds:bg-transparent ds:p-0 ds:gap-1",
+      vertical: "ds:bg-transparent ds:p-0 ds:gap-1"
     },
     trigger: {
-      horizontal: "bg-transparent data-[state=active]:bg-transparent data-[state=active]:shadow-none",
-      vertical: "bg-transparent data-[state=active]:bg-transparent data-[state=active]:shadow-none"
+      horizontal: "ds:bg-transparent ds:data-[state=active]:bg-transparent ds:data-[state=active]:shadow-none",
+      vertical: "ds:bg-transparent ds:data-[state=active]:bg-transparent ds:data-[state=active]:shadow-none"
     }
   },
   // Outline: No border/background on group, colored border (stroke) on active button
   outline: {
     list: {
-      horizontal: "bg-transparent p-0 gap-1",
-      vertical: "bg-transparent p-0 gap-1"
+      horizontal: "ds:bg-transparent ds:p-0 ds:gap-1",
+      vertical: "ds:bg-transparent ds:p-0 ds:gap-1"
     },
     trigger: {
-      horizontal: "bg-transparent border border-transparent data-[state=active]:bg-transparent data-[state=active]:shadow-none",
-      vertical: "bg-transparent border border-transparent data-[state=active]:bg-transparent data-[state=active]:shadow-none"
+      horizontal: "ds:bg-transparent ds:border ds:border-transparent ds:data-[state=active]:bg-transparent ds:data-[state=active]:shadow-none",
+      vertical: "ds:bg-transparent ds:border ds:border-transparent ds:data-[state=active]:bg-transparent ds:data-[state=active]:shadow-none"
     }
   },
   // Underlined: Bottom border on group, bottom border on active tab
   underlined: {
     list: {
-      horizontal: "bg-background dark:bg-background rounded-none p-0",
-      vertical: "bg-background dark:bg-background rounded-none p-0"
+      horizontal: "ds:bg-background ds:dark:bg-background ds:rounded-none ds:p-0",
+      vertical: "ds:bg-background ds:dark:bg-background ds:rounded-none ds:p-0"
     },
     trigger: {
       horizontal: "",
@@ -340,8 +340,8 @@ const J = {
   // Enclosed: Border on active tab except bottom border (tab style)
   enclosed: {
     list: {
-      horizontal: "bg-background dark:bg-background justify-start rounded-none p-0",
-      vertical: "bg-background dark:bg-background items-start rounded-none p-0"
+      horizontal: "ds:bg-background ds:dark:bg-background ds:justify-start ds:rounded-none ds:p-0",
+      vertical: "ds:bg-background ds:dark:bg-background ds:items-start ds:rounded-none ds:p-0"
     },
     trigger: {
       horizontal: "",
@@ -353,8 +353,8 @@ const J = {
   // Enclosed-fill: Border on active tab except bottom border with background on inactive tabs
   "enclosed-fill": {
     list: {
-      horizontal: "bg-background dark:bg-background justify-start rounded-none p-0 gap-1",
-      vertical: "bg-background dark:bg-background items-start rounded-none p-0 gap-1"
+      horizontal: "ds:bg-background ds:dark:bg-background ds:justify-start ds:rounded-none ds:p-0 ds:gap-1",
+      vertical: "ds:bg-background ds:dark:bg-background ds:items-start ds:rounded-none ds:p-0 ds:gap-1"
     },
     trigger: {
       horizontal: "",

package/dist/esm/components/Tabs/classes.js.map

@@ -1 +1 @@
-{"version":3,"file":"classes.js","sources":["../../../../src/components/Tabs/classes.ts"],"sourcesContent":["import { cn } from \"@dsui/ui/index\";\nimport type {\n  TabAlignment,\n  TabColor,\n  TabPosition,\n  TabSize,\n  TabVariant,\n} from \"./types\";\n\nexport const sizeClasses: Record<\n  TabSize,\n  { horizontal: string; vertical: string }\n> = {\n  sm: {\n    horizontal: \"text-xs h-7 [&>button]:px-2\",\n    vertical: \"text-xs [&>button]:py-0.5\",\n  },\n  md: {\n    horizontal: \"text-sm h-9 [&>button]:px-3\",\n    vertical: \"text-sm [&>button]:py-1\",\n  },\n  lg: {\n    horizontal: \"text-base h-11 [&>button]:px-4\",\n    vertical: \"text-base [&>button]:py-1.5\",\n  },\n};\n\nexport const alignmentClasses: Record<\n  TabAlignment,\n  { horizontal: string; vertical: string }\n> = {\n  start: {\n    horizontal: \"justify-start\",\n    vertical: \"items-start\",\n  },\n  center: {\n    horizontal: \"justify-center\",\n    vertical: \"items-center\",\n  },\n  end: {\n    horizontal: \"justify-end\",\n    vertical: \"items-end\",\n  },\n};\n\nexport const positionClasses: Record<\n  TabPosition,\n  { root: string; list: string }\n> = {\n  top: {\n    root: \"flex flex-col\",\n    list: \"flex-row\",\n  },\n  bottom: {\n    root: \"flex flex-col-reverse\",\n    list: \"flex-row\",\n  },\n  left: {\n    root: \"flex flex-row\",\n    list: \"flex-col h-fit\",\n  },\n  right: {\n    root: \"flex flex-row-reverse\",\n    list: \"flex-col h-fit\",\n  },\n};\n\n// Color classes for backgrounds, text, and borders\nexport const getColorClasses = (\n  variant: TabVariant,\n  color: TabColor\n): string => {\n  // Helper to generate color-specific classes based on variant\n  const colorMap: Record<\n    TabColor,\n    { bg: string; text: string; border: string }\n  > = {\n    primary: {\n      bg: \"data-[state=active]:bg-primary dark:data-[state=active]:bg-primary data-[state=active]:text-primary-foreground dark:data-[state=active]:text-primary-foreground\",\n      text: \"data-[state=active]:text-primary dark:data-[state=active]:text-primary\",\n      border:\n        \"data-[state=active]:border-primary dark:data-[state=active]:border-primary\",\n    },\n    secondary: {\n      bg: \"data-[state=active]:bg-secondary dark:data-[state=active]:bg-secondary data-[state=active]:text-secondary-foreground dark:data-[state=active]:text-secondary-foreground\",\n      text: \"data-[state=active]:text-secondary dark:data-[state=active]:text-secondary\",\n      border:\n        \"data-[state=active]:border-secondary dark:data-[state=active]:border-secondary\",\n    },\n    muted: {\n      bg: \"data-[state=active]:bg-muted dark:data-[state=active]:bg-muted data-[state=active]:text-muted-foreground dark:data-[state=active]:text-muted-foreground\",\n      text: \"data-[state=active]:text-muted-foreground dark:data-[state=active]:text-muted-foreground\",\n      border:\n        \"data-[state=active]:border-border dark:data-[state=active]:border-border\",\n    },\n    accent: {\n      bg: \"data-[state=active]:bg-accent dark:data-[state=active]:bg-accent data-[state=active]:text-accent-foreground dark:data-[state=active]:text-accent-foreground\",\n      text: \"data-[state=active]:text-accent-foreground dark:data-[state=active]:text-accent-foreground\",\n      border:\n        \"data-[state=active]:border-accent dark:data-[state=active]:border-accent\",\n    },\n    destructive: {\n      bg: \"data-[state=active]:bg-destructive dark:data-[state=active]:bg-destructive data-[state=active]:text-destructive-foreground dark:data-[state=active]:text-destructive-foreground\",\n      text: \"data-[state=active]:text-destructive dark:data-[state=active]:text-destructive\",\n      border:\n        \"data-[state=active]:border-destructive dark:data-[state=active]:border-destructive\",\n    },\n    success: {\n      bg: \"data-[state=active]:bg-success dark:data-[state=active]:bg-success data-[state=active]:text-success-foreground dark:data-[state=active]:text-success-foreground\",\n      text: \"data-[state=active]:text-success dark:data-[state=active]:text-success\",\n      border:\n        \"data-[state=active]:border-success dark:data-[state=active]:border-success\",\n    },\n    warning: {\n      bg: \"data-[state=active]:bg-warning dark:data-[state=active]:bg-warning data-[state=active]:text-warning-foreground dark:data-[state=active]:text-warning-foreground\",\n      text: \"data-[state=active]:text-warning dark:data-[state=active]:text-warning\",\n      border:\n        \"data-[state=active]:border-warning dark:data-[state=active]:border-warning\",\n    },\n  };\n\n  const colors = colorMap[color];\n\n  switch (variant) {\n    case \"bordered\":\n    case \"pills\":\n      // Background color on active state\n      return `${colors.bg} dark:data-[state=active]:border-transparent`;\n    case \"pill-stroke\":\n      // Border color on active state, no background\n      return `data-[state=active]:bg-transparent dark:data-[state=active]:bg-transparent`;\n    case \"text\":\n      // Text color only on active state\n      return colors.text;\n    case \"outline\":\n      // Border color on active state\n      return colors.border;\n    case \"underlined\":\n      // Bottom/side border color on active state\n      return cn(colors.border, colors.text);\n    case \"enclosed\":\n      // Border color on active state (except bottom/side)\n      return cn(colors.border, colors.text);\n    case \"enclosed-fill\":\n      // Border color on active state (except bottom/side)\n      return cn(colors.border, colors.text);\n    default:\n      return \"\";\n  }\n};\n\n// Get TabsList border classes based on position\nexport const getListBorderClasses = (\n  variant: TabVariant,\n  color: TabColor,\n  tabPosition: TabPosition\n): string => {\n  if (variant === \"underlined\") {\n    // Underlined variant: border on the opposite side from where tabs connect\n    const borderMap: Record<TabPosition, string> = {\n      top: \"border-b\",\n      bottom: \"border-t\",\n      left: \"border-r\",\n      right: \"border-l\",\n    };\n    return borderMap[tabPosition];\n  }\n\n  if (variant === \"enclosed\") {\n    // Enclosed variant: colored border on the opposite side\n    const borderBaseMap: Record<TabPosition, string> = {\n      top: \"border-b\",\n      bottom: \"border-t\",\n      left: \"border-r\",\n      right: \"border-l\",\n    };\n\n    const colorBorderMap: Record<TabPosition, Record<TabColor, string>> = {\n      top: {\n        primary: \"border-b-primary\",\n        secondary: \"border-b-secondary\",\n        muted: \"border-b-border\",\n        accent: \"border-b-accent\",\n        destructive: \"border-b-destructive\",\n        success: \"border-b-success\",\n        warning: \"border-b-warning\",\n      },\n      bottom: {\n        primary: \"border-t-primary\",\n        secondary: \"border-t-secondary\",\n        muted: \"border-t-border\",\n        accent: \"border-t-accent\",\n        destructive: \"border-t-destructive\",\n        success: \"border-t-success\",\n        warning: \"border-t-warning\",\n      },\n      left: {\n        primary: \"border-r-primary\",\n        secondary: \"border-r-secondary\",\n        muted: \"border-r-border\",\n        accent: \"border-r-accent\",\n        destructive: \"border-r-destructive\",\n        success: \"border-r-success\",\n        warning: \"border-r-warning\",\n      },\n      right: {\n        primary: \"border-l-primary\",\n        secondary: \"border-l-secondary\",\n        muted: \"border-l-border\",\n        accent: \"border-l-accent\",\n        destructive: \"border-l-destructive\",\n        success: \"border-l-success\",\n        warning: \"border-l-warning\",\n      },\n    };\n    return `${borderBaseMap[tabPosition]} ${colorBorderMap[tabPosition][color]}`;\n  }\n\n  if (variant === \"enclosed-fill\") {\n    // Enclosed-fill variant: colored border on the opposite side\n    const borderBaseMap: Record<TabPosition, string> = {\n      top: \"border-b\",\n      bottom: \"border-t\",\n      left: \"border-r\",\n      right: \"border-l\",\n    };\n\n    const colorBorderMap: Record<TabPosition, Record<TabColor, string>> = {\n      top: {\n        primary: \"border-b-primary\",\n        secondary: \"border-b-secondary\",\n        muted: \"border-b-border\",\n        accent: \"border-b-accent\",\n        destructive: \"border-b-destructive\",\n        success: \"border-b-success\",\n        warning: \"border-b-warning\",\n      },\n      bottom: {\n        primary: \"border-t-primary\",\n        secondary: \"border-t-secondary\",\n        muted: \"border-t-border\",\n        accent: \"border-t-accent\",\n        destructive: \"border-t-destructive\",\n        success: \"border-t-success\",\n        warning: \"border-t-warning\",\n      },\n      left: {\n        primary: \"border-r-primary\",\n        secondary: \"border-r-secondary\",\n        muted: \"border-r-border\",\n        accent: \"border-r-accent\",\n        destructive: \"border-r-destructive\",\n        success: \"border-r-success\",\n        warning: \"border-r-warning\",\n      },\n      right: {\n        primary: \"border-l-primary\",\n        secondary: \"border-l-secondary\",\n        muted: \"border-l-border\",\n        accent: \"border-l-accent\",\n        destructive: \"border-l-destructive\",\n        success: \"border-l-success\",\n        warning: \"border-l-warning\",\n      },\n    };\n    return `${borderBaseMap[tabPosition]} ${colorBorderMap[tabPosition][color]}`;\n  }\n\n  return \"\";\n};\n\n// Get trigger border classes for underlined variant based on position\nexport const getUnderlinedTriggerClasses = (\n  tabPosition: TabPosition\n): string => {\n  const baseClasses =\n    \"bg-background dark:bg-background rounded-none border-0 border-transparent data-[state=active]:shadow-none\";\n\n  const positionMap: Record<TabPosition, string> = {\n    top: `${baseClasses} border-b-2 h-full`,\n    bottom: `${baseClasses} border-t-2 h-full`,\n    left: `${baseClasses} border-r-2 w-full`,\n    right: `${baseClasses} border-l-2 w-full`,\n  };\n\n  return positionMap[tabPosition];\n};\n\n// Get trigger border classes for enclosed variant based on position\nexport const getEnclosedTriggerClasses = (tabPosition: TabPosition): string => {\n  const baseClasses =\n    \"bg-background dark:bg-background border border-transparent data-[state=active]:shadow-none rounded-none\";\n\n  const positionMap: Record<TabPosition, string> = {\n    top: `${baseClasses} rounded-t-md data-[state=active]:border-t data-[state=active]:border-l data-[state=active]:border-r data-[state=active]:border-b-0 data-[state=active]:border-b-background dark:data-[state=active]:border-b-background h-full data-[state=active]:-mb-0.5 data-[state=active]:translate-y-[0px]`,\n    bottom: `${baseClasses} rounded-b-md data-[state=active]:border-b data-[state=active]:border-l data-[state=active]:border-r data-[state=active]:border-t-0 data-[state=active]:border-t-background dark:data-[state=active]:border-t-background h-full data-[state=active]:-mt-0.5 data-[state=active]:translate-y-[0px]`,\n    left: `${baseClasses} rounded-l-md data-[state=active]:border-t data-[state=active]:border-l data-[state=active]:border-b data-[state=active]:border-r-0 data-[state=active]:border-r-background dark:data-[state=active]:border-r-background w-full data-[state=active]:-mr-0.5 data-[state=active]:translate-x-[1px]`,\n    right: `${baseClasses} rounded-r-md data-[state=active]:border-t data-[state=active]:border-r data-[state=active]:border-b data-[state=active]:border-l-0 data-[state=active]:border-l-background dark:data-[state=active]:border-l-background w-full data-[state=active]:-ml-0.5 data-[state=active]:translate-x-[1px]`,\n  };\n\n  return positionMap[tabPosition];\n};\n\n// Get trigger border classes for enclosed-fill variant based on position\nexport const getEnclosedFillTriggerClasses = (\n  tabPosition: TabPosition\n): string => {\n  const baseClasses =\n    \"bg-muted dark:bg-muted border border-transparent data-[state=active]:bg-background dark:data-[state=active]:bg-background data-[state=active]:shadow-none rounded-none\";\n\n  const positionMap: Record<TabPosition, string> = {\n    top: `${baseClasses} rounded-t-md data-[state=active]:border-t data-[state=active]:border-l data-[state=active]:border-r data-[state=active]:border-b-0 data-[state=active]:border-b-background dark:data-[state=active]:border-b-background h-full data-[state=active]:-mb-0.5 data-[state=active]:translate-y-[0px]`,\n    bottom: `${baseClasses} rounded-b-md data-[state=active]:border-b data-[state=active]:border-l data-[state=active]:border-r data-[state=active]:border-t-0 data-[state=active]:border-t-background dark:data-[state=active]:border-t-background h-full data-[state=active]:-mt-0.5 data-[state=active]:translate-y-[0px]`,\n    left: `${baseClasses} rounded-l-md data-[state=active]:border-t data-[state=active]:border-l data-[state=active]:border-b data-[state=active]:border-r-0 data-[state=active]:border-r-background dark:data-[state=active]:border-r-background w-full data-[state=active]:-mr-0.5 data-[state=active]:translate-x-[1px]`,\n    right: `${baseClasses} rounded-r-md data-[state=active]:border-t data-[state=active]:border-r data-[state=active]:border-b data-[state=active]:border-l-0 data-[state=active]:border-l-background dark:data-[state=active]:border-l-background w-full data-[state=active]:-ml-0.5 data-[state=active]:translate-x-[1px]`,\n  };\n\n  return positionMap[tabPosition];\n};\n\nexport const variantClasses: Record<\n  TabVariant,\n  {\n    list: { horizontal: string; vertical: string };\n    trigger: { horizontal: string; vertical: string };\n  }\n> = {\n  // Solid: Default style (muted background, active has white background)\n  solid: {\n    list: {\n      horizontal: \"bg-muted dark:bg-muted rounded-lg p-[3px]\",\n      vertical: \"bg-muted dark:bg-muted rounded-lg p-[3px]\",\n    },\n    trigger: {\n      horizontal: \"\",\n      vertical: \"\",\n    },\n  },\n\n  // Bordered: With border on group and colored active background\n  bordered: {\n    list: {\n      horizontal:\n        \"bg-background dark:bg-background border p-1 gap-1 rounded-lg\",\n      vertical: \"bg-background dark:bg-background border p-1 gap-1 rounded-lg\",\n    },\n    trigger: {\n      horizontal: \"\",\n      vertical: \"\",\n    },\n  },\n\n  // Pills: No border/background on group, colored background on active button\n  pills: {\n    list: {\n      horizontal: \"bg-transparent p-0 gap-1\",\n      vertical: \"bg-transparent p-0 gap-1\",\n    },\n    trigger: {\n      horizontal: \"\",\n      vertical: \"\",\n    },\n  },\n\n  // Pill-stroke: Pill-style with stroke border, stronger border radius, no background on active\n  \"pill-stroke\": {\n    list: {\n      horizontal: \"bg-transparent p-0 gap-1\",\n      vertical: \"bg-transparent p-0 gap-1\",\n    },\n    trigger: {\n      horizontal: \"border border-border rounded-full bg-transparent\",\n      vertical: \"border border-border rounded-full bg-transparent\",\n    },\n  },\n\n  // Text: No border/background on group, colored text on active button\n  text: {\n    list: {\n      horizontal: \"bg-transparent p-0 gap-1\",\n      vertical: \"bg-transparent p-0 gap-1\",\n    },\n    trigger: {\n      horizontal:\n        \"bg-transparent data-[state=active]:bg-transparent data-[state=active]:shadow-none\",\n      vertical:\n        \"bg-transparent data-[state=active]:bg-transparent data-[state=active]:shadow-none\",\n    },\n  },\n\n  // Outline: No border/background on group, colored border (stroke) on active button\n  outline: {\n    list: {\n      horizontal: \"bg-transparent p-0 gap-1\",\n      vertical: \"bg-transparent p-0 gap-1\",\n    },\n    trigger: {\n      horizontal:\n        \"bg-transparent border border-transparent data-[state=active]:bg-transparent data-[state=active]:shadow-none\",\n      vertical:\n        \"bg-transparent border border-transparent data-[state=active]:bg-transparent data-[state=active]:shadow-none\",\n    },\n  },\n\n  // Underlined: Bottom border on group, bottom border on active tab\n  underlined: {\n    list: {\n      horizontal: \"bg-background dark:bg-background rounded-none p-0\",\n      vertical: \"bg-background dark:bg-background rounded-none p-0\",\n    },\n    trigger: {\n      horizontal: \"\", // Will be set dynamically\n      vertical: \"\", // Will be set dynamically\n    },\n  },\n\n  // Enclosed: Border on active tab except bottom border (tab style)\n  enclosed: {\n    list: {\n      horizontal:\n        \"bg-background dark:bg-background justify-start rounded-none p-0\",\n      vertical: \"bg-background dark:bg-background items-start rounded-none p-0\",\n    },\n    trigger: {\n      horizontal: \"\", // Will be set dynamically\n      vertical: \"\", // Will be set dynamically\n    },\n  },\n\n  // Enclosed-fill: Border on active tab except bottom border with background on inactive tabs\n  \"enclosed-fill\": {\n    list: {\n      horizontal:\n        \"bg-background dark:bg-background justify-start rounded-none p-0 gap-1\",\n      vertical:\n        \"bg-background dark:bg-background items-start rounded-none p-0 gap-1\",\n    },\n    trigger: {\n      horizontal: \"\", // Will be set dynamically\n      vertical: \"\", // Will be set dynamically\n    },\n  },\n};\n"],"names":["sizeClasses","alignmentClasses","positionClasses","getColorClasses","variant","color","colors","cn","getListBorderClasses","tabPosition","borderBaseMap","colorBorderMap","getUnderlinedTriggerClasses","baseClasses","getEnclosedTriggerClasses","getEnclosedFillTriggerClasses","variantClasses"],"mappings":"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"}
+{"version":3,"file":"classes.js","sources":["../../../../src/components/Tabs/classes.ts"],"sourcesContent":["import { cn } from \"@dsui/ui/index\";\nimport type {\n  TabAlignment,\n  TabColor,\n  TabPosition,\n  TabSize,\n  TabVariant,\n} from \"./types\";\n\nexport const sizeClasses: Record<\n  TabSize,\n  { horizontal: string; vertical: string }\n> = {\n  sm: {\n    horizontal: \"ds:text-xs ds:h-7 ds:[&>button]:px-2\",\n    vertical: \"ds:text-xs ds:[&>button]:py-0.5\",\n  },\n  md: {\n    horizontal: \"ds:text-sm ds:h-9 ds:[&>button]:px-3\",\n    vertical: \"ds:text-sm ds:[&>button]:py-1\",\n  },\n  lg: {\n    horizontal: \"ds:text-base ds:h-11 ds:[&>button]:px-4\",\n    vertical: \"ds:text-base ds:[&>button]:py-1.5\",\n  },\n};\n\nexport const alignmentClasses: Record<\n  TabAlignment,\n  { horizontal: string; vertical: string }\n> = {\n  start: {\n    horizontal: \"ds:justify-start\",\n    vertical: \"ds:items-start\",\n  },\n  center: {\n    horizontal: \"ds:justify-center\",\n    vertical: \"ds:items-center\",\n  },\n  end: {\n    horizontal: \"ds:justify-end\",\n    vertical: \"ds:items-end\",\n  },\n};\n\nexport const positionClasses: Record<\n  TabPosition,\n  { root: string; list: string }\n> = {\n  top: {\n    root: \"ds:flex ds:flex-col\",\n    list: \"ds:flex-row\",\n  },\n  bottom: {\n    root: \"ds:flex ds:flex-col-reverse\",\n    list: \"ds:flex-row\",\n  },\n  left: {\n    root: \"ds:flex ds:flex-row\",\n    list: \"ds:flex-col ds:h-fit\",\n  },\n  right: {\n    root: \"ds:flex ds:flex-row-reverse\",\n    list: \"ds:flex-col ds:h-fit\",\n  },\n};\n\n// Color classes for backgrounds, text, and borders\nexport const getColorClasses = (\n  variant: TabVariant,\n  color: TabColor\n): string => {\n  // Helper to generate color-specific classes based on variant\n  const colorMap: Record<\n    TabColor,\n    { bg: string; text: string; border: string }\n  > = {\n    primary: {\n      bg: \"data-[state=active]:bg-primary dark:data-[state=active]:bg-primary data-[state=active]:text-primary-foreground dark:data-[state=active]:text-primary-foreground\",\n      text: \"data-[state=active]:text-primary dark:data-[state=active]:text-primary\",\n      border:\n        \"data-[state=active]:border-primary dark:data-[state=active]:border-primary\",\n    },\n    secondary: {\n      bg: \"data-[state=active]:bg-secondary dark:data-[state=active]:bg-secondary data-[state=active]:text-secondary-foreground dark:data-[state=active]:text-secondary-foreground\",\n      text: \"data-[state=active]:text-secondary dark:data-[state=active]:text-secondary\",\n      border:\n        \"data-[state=active]:border-secondary dark:data-[state=active]:border-secondary\",\n    },\n    muted: {\n      bg: \"data-[state=active]:bg-muted dark:data-[state=active]:bg-muted data-[state=active]:text-muted-foreground dark:data-[state=active]:text-muted-foreground\",\n      text: \"data-[state=active]:text-muted-foreground dark:data-[state=active]:text-muted-foreground\",\n      border:\n        \"data-[state=active]:border-border dark:data-[state=active]:border-border\",\n    },\n    accent: {\n      bg: \"data-[state=active]:bg-accent dark:data-[state=active]:bg-accent data-[state=active]:text-accent-foreground dark:data-[state=active]:text-accent-foreground\",\n      text: \"data-[state=active]:text-accent-foreground dark:data-[state=active]:text-accent-foreground\",\n      border:\n        \"data-[state=active]:border-accent dark:data-[state=active]:border-accent\",\n    },\n    destructive: {\n      bg: \"data-[state=active]:bg-destructive dark:data-[state=active]:bg-destructive data-[state=active]:text-destructive-foreground dark:data-[state=active]:text-destructive-foreground\",\n      text: \"data-[state=active]:text-destructive dark:data-[state=active]:text-destructive\",\n      border:\n        \"data-[state=active]:border-destructive dark:data-[state=active]:border-destructive\",\n    },\n    success: {\n      bg: \"data-[state=active]:bg-success dark:data-[state=active]:bg-success data-[state=active]:text-success-foreground dark:data-[state=active]:text-success-foreground\",\n      text: \"data-[state=active]:text-success dark:data-[state=active]:text-success\",\n      border:\n        \"data-[state=active]:border-success dark:data-[state=active]:border-success\",\n    },\n    warning: {\n      bg: \"data-[state=active]:bg-warning dark:data-[state=active]:bg-warning data-[state=active]:text-warning-foreground dark:data-[state=active]:text-warning-foreground\",\n      text: \"data-[state=active]:text-warning dark:data-[state=active]:text-warning\",\n      border:\n        \"data-[state=active]:border-warning dark:data-[state=active]:border-warning\",\n    },\n  };\n\n  const colors = colorMap[color];\n\n  switch (variant) {\n    case \"bordered\":\n    case \"pills\":\n      // Background color on active state\n      return `${colors.bg} dark:data-[state=active]:border-transparent`;\n    case \"pill-stroke\":\n      // Border color on active state, no background\n      return `data-[state=active]:bg-transparent dark:data-[state=active]:bg-transparent`;\n    case \"text\":\n      // Text color only on active state\n      return colors.text;\n    case \"outline\":\n      // Border color on active state\n      return colors.border;\n    case \"underlined\":\n      // Bottom/side border color on active state\n      return cn(colors.border, colors.text);\n    case \"enclosed\":\n      // Border color on active state (except bottom/side)\n      return cn(colors.border, colors.text);\n    case \"enclosed-fill\":\n      // Border color on active state (except bottom/side)\n      return cn(colors.border, colors.text);\n    default:\n      return \"\";\n  }\n};\n\n// Get TabsList border classes based on position\nexport const getListBorderClasses = (\n  variant: TabVariant,\n  color: TabColor,\n  tabPosition: TabPosition\n): string => {\n  if (variant === \"underlined\") {\n    // Underlined variant: border on the opposite side from where tabs connect\n    const borderMap: Record<TabPosition, string> = {\n      top: \"border-b\",\n      bottom: \"border-t\",\n      left: \"border-r\",\n      right: \"border-l\",\n    };\n    return borderMap[tabPosition];\n  }\n\n  if (variant === \"enclosed\") {\n    // Enclosed variant: colored border on the opposite side\n    const borderBaseMap: Record<TabPosition, string> = {\n      top: \"border-b\",\n      bottom: \"border-t\",\n      left: \"border-r\",\n      right: \"border-l\",\n    };\n\n    const colorBorderMap: Record<TabPosition, Record<TabColor, string>> = {\n      top: {\n        primary: \"border-b-primary\",\n        secondary: \"border-b-secondary\",\n        muted: \"border-b-border\",\n        accent: \"border-b-accent\",\n        destructive: \"border-b-destructive\",\n        success: \"border-b-success\",\n        warning: \"border-b-warning\",\n      },\n      bottom: {\n        primary: \"border-t-primary\",\n        secondary: \"border-t-secondary\",\n        muted: \"border-t-border\",\n        accent: \"border-t-accent\",\n        destructive: \"border-t-destructive\",\n        success: \"border-t-success\",\n        warning: \"border-t-warning\",\n      },\n      left: {\n        primary: \"border-r-primary\",\n        secondary: \"border-r-secondary\",\n        muted: \"border-r-border\",\n        accent: \"border-r-accent\",\n        destructive: \"border-r-destructive\",\n        success: \"border-r-success\",\n        warning: \"border-r-warning\",\n      },\n      right: {\n        primary: \"border-l-primary\",\n        secondary: \"border-l-secondary\",\n        muted: \"border-l-border\",\n        accent: \"border-l-accent\",\n        destructive: \"border-l-destructive\",\n        success: \"border-l-success\",\n        warning: \"border-l-warning\",\n      },\n    };\n    return `${borderBaseMap[tabPosition]} ${colorBorderMap[tabPosition][color]}`;\n  }\n\n  if (variant === \"enclosed-fill\") {\n    // Enclosed-fill variant: colored border on the opposite side\n    const borderBaseMap: Record<TabPosition, string> = {\n      top: \"border-b\",\n      bottom: \"border-t\",\n      left: \"border-r\",\n      right: \"border-l\",\n    };\n\n    const colorBorderMap: Record<TabPosition, Record<TabColor, string>> = {\n      top: {\n        primary: \"border-b-primary\",\n        secondary: \"border-b-secondary\",\n        muted: \"border-b-border\",\n        accent: \"border-b-accent\",\n        destructive: \"border-b-destructive\",\n        success: \"border-b-success\",\n        warning: \"border-b-warning\",\n      },\n      bottom: {\n        primary: \"border-t-primary\",\n        secondary: \"border-t-secondary\",\n        muted: \"border-t-border\",\n        accent: \"border-t-accent\",\n        destructive: \"border-t-destructive\",\n        success: \"border-t-success\",\n        warning: \"border-t-warning\",\n      },\n      left: {\n        primary: \"border-r-primary\",\n        secondary: \"border-r-secondary\",\n        muted: \"border-r-border\",\n        accent: \"border-r-accent\",\n        destructive: \"border-r-destructive\",\n        success: \"border-r-success\",\n        warning: \"border-r-warning\",\n      },\n      right: {\n        primary: \"border-l-primary\",\n        secondary: \"border-l-secondary\",\n        muted: \"border-l-border\",\n        accent: \"border-l-accent\",\n        destructive: \"border-l-destructive\",\n        success: \"border-l-success\",\n        warning: \"border-l-warning\",\n      },\n    };\n    return `${borderBaseMap[tabPosition]} ${colorBorderMap[tabPosition][color]}`;\n  }\n\n  return \"\";\n};\n\n// Get trigger border classes for underlined variant based on position\nexport const getUnderlinedTriggerClasses = (\n  tabPosition: TabPosition\n): string => {\n  const baseClasses =\n    \"ds:bg-background ds:dark:bg-background ds:rounded-none ds:border-0 ds:border-transparent ds:data-[state=active]:shadow-none\";\n\n  const positionMap: Record<TabPosition, string> = {\n    top: `${baseClasses} border-b-2 h-full`,\n    bottom: `${baseClasses} border-t-2 h-full`,\n    left: `${baseClasses} border-r-2 w-full`,\n    right: `${baseClasses} border-l-2 w-full`,\n  };\n\n  return positionMap[tabPosition];\n};\n\n// Get trigger border classes for enclosed variant based on position\nexport const getEnclosedTriggerClasses = (tabPosition: TabPosition): string => {\n  const baseClasses =\n    \"ds:bg-background ds:dark:bg-background ds:border ds:border-transparent ds:data-[state=active]:shadow-none ds:rounded-none\";\n\n  const positionMap: Record<TabPosition, string> = {\n    top: `${baseClasses} rounded-t-md data-[state=active]:border-t data-[state=active]:border-l data-[state=active]:border-r data-[state=active]:border-b-0 data-[state=active]:border-b-background dark:data-[state=active]:border-b-background h-full data-[state=active]:-mb-0.5 data-[state=active]:translate-y-[0px]`,\n    bottom: `${baseClasses} rounded-b-md data-[state=active]:border-b data-[state=active]:border-l data-[state=active]:border-r data-[state=active]:border-t-0 data-[state=active]:border-t-background dark:data-[state=active]:border-t-background h-full data-[state=active]:-mt-0.5 data-[state=active]:translate-y-[0px]`,\n    left: `${baseClasses} rounded-l-md data-[state=active]:border-t data-[state=active]:border-l data-[state=active]:border-b data-[state=active]:border-r-0 data-[state=active]:border-r-background dark:data-[state=active]:border-r-background w-full data-[state=active]:-mr-0.5 data-[state=active]:translate-x-[1px]`,\n    right: `${baseClasses} rounded-r-md data-[state=active]:border-t data-[state=active]:border-r data-[state=active]:border-b data-[state=active]:border-l-0 data-[state=active]:border-l-background dark:data-[state=active]:border-l-background w-full data-[state=active]:-ml-0.5 data-[state=active]:translate-x-[1px]`,\n  };\n\n  return positionMap[tabPosition];\n};\n\n// Get trigger border classes for enclosed-fill variant based on position\nexport const getEnclosedFillTriggerClasses = (\n  tabPosition: TabPosition\n): string => {\n  const baseClasses =\n    \"ds:bg-muted ds:dark:bg-muted ds:border ds:border-transparent ds:data-[state=active]:bg-background ds:dark:data-[state=active]:bg-background ds:data-[state=active]:shadow-none ds:rounded-none\";\n\n  const positionMap: Record<TabPosition, string> = {\n    top: `${baseClasses} rounded-t-md data-[state=active]:border-t data-[state=active]:border-l data-[state=active]:border-r data-[state=active]:border-b-0 data-[state=active]:border-b-background dark:data-[state=active]:border-b-background h-full data-[state=active]:-mb-0.5 data-[state=active]:translate-y-[0px]`,\n    bottom: `${baseClasses} rounded-b-md data-[state=active]:border-b data-[state=active]:border-l data-[state=active]:border-r data-[state=active]:border-t-0 data-[state=active]:border-t-background dark:data-[state=active]:border-t-background h-full data-[state=active]:-mt-0.5 data-[state=active]:translate-y-[0px]`,\n    left: `${baseClasses} rounded-l-md data-[state=active]:border-t data-[state=active]:border-l data-[state=active]:border-b data-[state=active]:border-r-0 data-[state=active]:border-r-background dark:data-[state=active]:border-r-background w-full data-[state=active]:-mr-0.5 data-[state=active]:translate-x-[1px]`,\n    right: `${baseClasses} rounded-r-md data-[state=active]:border-t data-[state=active]:border-r data-[state=active]:border-b data-[state=active]:border-l-0 data-[state=active]:border-l-background dark:data-[state=active]:border-l-background w-full data-[state=active]:-ml-0.5 data-[state=active]:translate-x-[1px]`,\n  };\n\n  return positionMap[tabPosition];\n};\n\nexport const variantClasses: Record<\n  TabVariant,\n  {\n    list: { horizontal: string; vertical: string };\n    trigger: { horizontal: string; vertical: string };\n  }\n> = {\n  // Solid: Default style (muted background, active has white background)\n  solid: {\n    list: {\n      horizontal: \"ds:bg-muted ds:dark:bg-muted ds:rounded-lg ds:p-[3px]\",\n      vertical: \"ds:bg-muted ds:dark:bg-muted ds:rounded-lg ds:p-[3px]\",\n    },\n    trigger: {\n      horizontal: \"\",\n      vertical: \"\",\n    },\n  },\n\n  // Bordered: With border on group and colored active background\n  bordered: {\n    list: {\n      horizontal:\n        \"ds:bg-background ds:dark:bg-background ds:border ds:p-1 ds:gap-1 ds:rounded-lg\",\n      vertical: \"ds:bg-background ds:dark:bg-background ds:border ds:p-1 ds:gap-1 ds:rounded-lg\",\n    },\n    trigger: {\n      horizontal: \"\",\n      vertical: \"\",\n    },\n  },\n\n  // Pills: No border/background on group, colored background on active button\n  pills: {\n    list: {\n      horizontal: \"ds:bg-transparent ds:p-0 ds:gap-1\",\n      vertical: \"ds:bg-transparent ds:p-0 ds:gap-1\",\n    },\n    trigger: {\n      horizontal: \"\",\n      vertical: \"\",\n    },\n  },\n\n  // Pill-stroke: Pill-style with stroke border, stronger border radius, no background on active\n  \"pill-stroke\": {\n    list: {\n      horizontal: \"ds:bg-transparent ds:p-0 ds:gap-1\",\n      vertical: \"ds:bg-transparent ds:p-0 ds:gap-1\",\n    },\n    trigger: {\n      horizontal: \"ds:border ds:border-border ds:rounded-full ds:bg-transparent\",\n      vertical: \"ds:border ds:border-border ds:rounded-full ds:bg-transparent\",\n    },\n  },\n\n  // Text: No border/background on group, colored text on active button\n  text: {\n    list: {\n      horizontal: \"ds:bg-transparent ds:p-0 ds:gap-1\",\n      vertical: \"ds:bg-transparent ds:p-0 ds:gap-1\",\n    },\n    trigger: {\n      horizontal:\n        \"ds:bg-transparent ds:data-[state=active]:bg-transparent ds:data-[state=active]:shadow-none\",\n      vertical:\n        \"ds:bg-transparent ds:data-[state=active]:bg-transparent ds:data-[state=active]:shadow-none\",\n    },\n  },\n\n  // Outline: No border/background on group, colored border (stroke) on active button\n  outline: {\n    list: {\n      horizontal: \"ds:bg-transparent ds:p-0 ds:gap-1\",\n      vertical: \"ds:bg-transparent ds:p-0 ds:gap-1\",\n    },\n    trigger: {\n      horizontal:\n        \"ds:bg-transparent ds:border ds:border-transparent ds:data-[state=active]:bg-transparent ds:data-[state=active]:shadow-none\",\n      vertical:\n        \"ds:bg-transparent ds:border ds:border-transparent ds:data-[state=active]:bg-transparent ds:data-[state=active]:shadow-none\",\n    },\n  },\n\n  // Underlined: Bottom border on group, bottom border on active tab\n  underlined: {\n    list: {\n      horizontal: \"ds:bg-background ds:dark:bg-background ds:rounded-none ds:p-0\",\n      vertical: \"ds:bg-background ds:dark:bg-background ds:rounded-none ds:p-0\",\n    },\n    trigger: {\n      horizontal: \"\", // Will be set dynamically\n      vertical: \"\", // Will be set dynamically\n    },\n  },\n\n  // Enclosed: Border on active tab except bottom border (tab style)\n  enclosed: {\n    list: {\n      horizontal:\n        \"ds:bg-background ds:dark:bg-background ds:justify-start ds:rounded-none ds:p-0\",\n      vertical: \"ds:bg-background ds:dark:bg-background ds:items-start ds:rounded-none ds:p-0\",\n    },\n    trigger: {\n      horizontal: \"\", // Will be set dynamically\n      vertical: \"\", // Will be set dynamically\n    },\n  },\n\n  // Enclosed-fill: Border on active tab except bottom border with background on inactive tabs\n  \"enclosed-fill\": {\n    list: {\n      horizontal:\n        \"ds:bg-background ds:dark:bg-background ds:justify-start ds:rounded-none ds:p-0 ds:gap-1\",\n      vertical:\n        \"ds:bg-background ds:dark:bg-background ds:items-start ds:rounded-none ds:p-0 ds:gap-1\",\n    },\n    trigger: {\n      horizontal: \"\", // Will be set dynamically\n      vertical: \"\", // Will be set dynamically\n    },\n  },\n};\n"],"names":["sizeClasses","alignmentClasses","positionClasses","getColorClasses","variant","color","colors","cn","getListBorderClasses","tabPosition","borderBaseMap","colorBorderMap","getUnderlinedTriggerClasses","baseClasses","getEnclosedTriggerClasses","getEnclosedFillTriggerClasses","variantClasses"],"mappings":"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"}