npm - @sth87/shadcn-design-system - Versions diffs - 0.0.1 - Mend

@sth87/shadcn-design-system 0.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (760) hide show

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

@@ -0,0 +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/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 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 />\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","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 ADDED Viewed

@@ -0,0 +1,345 @@
+import { cn as o } from "@dsui/ui/index";
+const c = {
+  sm: {
+    horizontal: "text-xs h-7 [&>button]:px-2",
+    vertical: "text-xs [&>button]:py-0.5"
+  },
+  md: {
+    horizontal: "text-sm h-9 [&>button]:px-3",
+    vertical: "text-sm [&>button]:py-1"
+  },
+  lg: {
+    horizontal: "text-base h-11 [&>button]:px-4",
+    vertical: "text-base [&>button]:py-1.5"
+  }
+}, n = {
+  start: {
+    horizontal: "justify-start",
+    vertical: "items-start"
+  },
+  center: {
+    horizontal: "justify-center",
+    vertical: "items-center"
+  },
+  end: {
+    horizontal: "justify-end",
+    vertical: "items-end"
+  }
+}, b = {
+  top: {
+    root: "flex flex-col",
+    list: "flex-row"
+  },
+  bottom: {
+    root: "flex flex-col-reverse",
+    list: "flex-row"
+  },
+  left: {
+    root: "flex flex-row",
+    list: "flex-col h-fit"
+  },
+  right: {
+    root: "flex flex-row-reverse",
+    list: "flex-col h-fit"
+  }
+}, i = (e, t) => {
+  const a = {
+    primary: {
+      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",
+      text: "data-[state=active]:text-primary dark:data-[state=active]:text-primary",
+      border: "data-[state=active]:border-primary dark:data-[state=active]:border-primary"
+    },
+    secondary: {
+      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",
+      text: "data-[state=active]:text-secondary dark:data-[state=active]:text-secondary",
+      border: "data-[state=active]:border-secondary dark:data-[state=active]:border-secondary"
+    },
+    muted: {
+      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",
+      text: "data-[state=active]:text-muted-foreground dark:data-[state=active]:text-muted-foreground",
+      border: "data-[state=active]:border-border dark:data-[state=active]:border-border"
+    },
+    accent: {
+      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",
+      text: "data-[state=active]:text-accent-foreground dark:data-[state=active]:text-accent-foreground",
+      border: "data-[state=active]:border-accent dark:data-[state=active]:border-accent"
+    },
+    destructive: {
+      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",
+      text: "data-[state=active]:text-destructive dark:data-[state=active]:text-destructive",
+      border: "data-[state=active]:border-destructive dark:data-[state=active]:border-destructive"
+    },
+    success: {
+      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",
+      text: "data-[state=active]:text-success dark:data-[state=active]:text-success",
+      border: "data-[state=active]:border-success dark:data-[state=active]:border-success"
+    },
+    warning: {
+      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",
+      text: "data-[state=active]:text-warning dark:data-[state=active]:text-warning",
+      border: "data-[state=active]:border-warning dark:data-[state=active]:border-warning"
+    }
+  }[t];
+  switch (e) {
+    case "bordered":
+    case "pills":
+      return `${a.bg} dark:data-[state=active]:border-transparent`;
+    case "pill-stroke":
+      return "data-[state=active]:bg-transparent dark:data-[state=active]:bg-transparent";
+    case "text":
+      return a.text;
+    case "outline":
+      return a.border;
+    case "underlined":
+      return o(a.border, a.text);
+    case "enclosed":
+      return o(a.border, a.text);
+    case "enclosed-fill":
+      return o(a.border, a.text);
+    default:
+      return "";
+  }
+}, l = (e, t, r) => {
+  if (e === "underlined")
+    return {
+      top: "border-b",
+      bottom: "border-t",
+      left: "border-r",
+      right: "border-l"
+    }[r];
+  if (e === "enclosed") {
+    const a = {
+      top: "border-b",
+      bottom: "border-t",
+      left: "border-r",
+      right: "border-l"
+    }, d = {
+      top: {
+        primary: "border-b-primary",
+        secondary: "border-b-secondary",
+        muted: "border-b-border",
+        accent: "border-b-accent",
+        destructive: "border-b-destructive",
+        success: "border-b-success",
+        warning: "border-b-warning"
+      },
+      bottom: {
+        primary: "border-t-primary",
+        secondary: "border-t-secondary",
+        muted: "border-t-border",
+        accent: "border-t-accent",
+        destructive: "border-t-destructive",
+        success: "border-t-success",
+        warning: "border-t-warning"
+      },
+      left: {
+        primary: "border-r-primary",
+        secondary: "border-r-secondary",
+        muted: "border-r-border",
+        accent: "border-r-accent",
+        destructive: "border-r-destructive",
+        success: "border-r-success",
+        warning: "border-r-warning"
+      },
+      right: {
+        primary: "border-l-primary",
+        secondary: "border-l-secondary",
+        muted: "border-l-border",
+        accent: "border-l-accent",
+        destructive: "border-l-destructive",
+        success: "border-l-success",
+        warning: "border-l-warning"
+      }
+    };
+    return `${a[r]} ${d[r][t]}`;
+  }
+  if (e === "enclosed-fill") {
+    const a = {
+      top: "border-b",
+      bottom: "border-t",
+      left: "border-r",
+      right: "border-l"
+    }, d = {
+      top: {
+        primary: "border-b-primary",
+        secondary: "border-b-secondary",
+        muted: "border-b-border",
+        accent: "border-b-accent",
+        destructive: "border-b-destructive",
+        success: "border-b-success",
+        warning: "border-b-warning"
+      },
+      bottom: {
+        primary: "border-t-primary",
+        secondary: "border-t-secondary",
+        muted: "border-t-border",
+        accent: "border-t-accent",
+        destructive: "border-t-destructive",
+        success: "border-t-success",
+        warning: "border-t-warning"
+      },
+      left: {
+        primary: "border-r-primary",
+        secondary: "border-r-secondary",
+        muted: "border-r-border",
+        accent: "border-r-accent",
+        destructive: "border-r-destructive",
+        success: "border-r-success",
+        warning: "border-r-warning"
+      },
+      right: {
+        primary: "border-l-primary",
+        secondary: "border-l-secondary",
+        muted: "border-l-border",
+        accent: "border-l-accent",
+        destructive: "border-l-destructive",
+        success: "border-l-success",
+        warning: "border-l-warning"
+      }
+    };
+    return `${a[r]} ${d[r][t]}`;
+  }
+  return "";
+}, g = (e) => {
+  const t = "bg-background dark:bg-background rounded-none border-0 border-transparent data-[state=active]:shadow-none";
+  return {
+    top: `${t} border-b-2 h-full`,
+    bottom: `${t} border-t-2 h-full`,
+    left: `${t} border-r-2 w-full`,
+    right: `${t} border-l-2 w-full`
+  }[e];
+}, u = (e) => {
+  const t = "bg-background dark:bg-background border border-transparent data-[state=active]:shadow-none 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]`,
+    left: `${t} 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]`,
+    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]`
+  }[e];
+}, v = (e) => {
+  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";
+  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]`,
+    left: `${t} 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]`,
+    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]`
+  }[e];
+}, p = {
+  // 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]"
+    },
+    trigger: {
+      horizontal: "",
+      vertical: ""
+    }
+  },
+  // 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"
+    },
+    trigger: {
+      horizontal: "",
+      vertical: ""
+    }
+  },
+  // 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"
+    },
+    trigger: {
+      horizontal: "",
+      vertical: ""
+    }
+  },
+  // 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"
+    },
+    trigger: {
+      horizontal: "border border-border rounded-full bg-transparent",
+      vertical: "border border-border rounded-full 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"
+    },
+    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"
+    }
+  },
+  // 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"
+    },
+    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"
+    }
+  },
+  // 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"
+    },
+    trigger: {
+      horizontal: "",
+      // Will be set dynamically
+      vertical: ""
+      // Will be set dynamically
+    }
+  },
+  // 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"
+    },
+    trigger: {
+      horizontal: "",
+      // Will be set dynamically
+      vertical: ""
+      // Will be set dynamically
+    }
+  },
+  // 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"
+    },
+    trigger: {
+      horizontal: "",
+      // Will be set dynamically
+      vertical: ""
+      // Will be set dynamically
+    }
+  }
+};
+export {
+  n as alignmentClasses,
+  i as getColorClasses,
+  v as getEnclosedFillTriggerClasses,
+  u as getEnclosedTriggerClasses,
+  l as getListBorderClasses,
+  g as getUnderlinedTriggerClasses,
+  b as positionClasses,
+  c as sizeClasses,
+  p as variantClasses
+};
+//# sourceMappingURL=classes.js.map

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

@@ -0,0 +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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"}

package/dist/esm/components/Textarea/Textarea.js ADDED Viewed

@@ -0,0 +1,132 @@
+import { jsx as r, jsxs as l } from "react/jsx-runtime";
+import c from "react";
+import { Textarea as j } from "@dsui/ui/components/textarea";
+import { cn as o } from "@dsui/ui/lib/utils";
+import { Info as E, X as S } from "lucide-react";
+import { Tooltip as T } from "../Tooltip/Tooltip.js";
+import { FloatingLabel as V } from "../FloatLabel.js";
+const _ = c.forwardRef(
+  ({
+    className: b,
+    label: u,
+    helperText: i,
+    state: m,
+    size: e = "normal",
+    isFloatLabel: n,
+    maxLength: d,
+    showCharCount: h,
+    infoTooltip: f,
+    clearable: p,
+    onClear: v,
+    placeholder: y = " ",
+    ...t
+  }, w) => {
+    const [x, N] = c.useState(() => typeof t.value == "string" ? t.value.length : typeof t.defaultValue == "string" ? t.defaultValue.length : 0), I = (s) => {
+      N(s.target.value.length), t.onChange && t.onChange(s);
+    }, g = c.useId(), a = c.useRef(null);
+    c.useImperativeHandle(w, () => a.current);
+    const C = () => {
+      if (a.current) {
+        a.current.value = "", N(0);
+        const s = new Event("input", { bubbles: !0 });
+        a.current.dispatchEvent(s), v && v();
+      }
+    }, R = {
+      default: "text-muted-foreground",
+      success: "text-success",
+      warning: "text-warning",
+      error: "text-error"
+    };
+    return /* @__PURE__ */ r("div", { className: b, children: /* @__PURE__ */ l(
+      "div",
+      {
+        className: o("flex flex-col gap-1.5 relative", {
+          "floating-label": n
+        }),
+        children: [
+          !n && u && /* @__PURE__ */ l(
+            "label",
+            {
+              htmlFor: g,
+              className: "flex gap-2 text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
+              children: [
+                u,
+                f && /* @__PURE__ */ r(T, { content: f, children: /* @__PURE__ */ r(E, { className: "size-3.5 min-w-3.5" }) })
+              ]
+            }
+          ),
+          /* @__PURE__ */ l("div", { className: "relative", children: [
+            /* @__PURE__ */ r(
+              j,
+              {
+                ref: a,
+                id: g,
+                className: o(
+                  "peer resize-y",
+                  {
+                    "pt-6 pb-2": n && (e === "lg" || e === "xl"),
+                    "pt-6 pb-1": n && e !== "lg" && e !== "xl",
+                    "text-lg": (e === "xl" || e === "lg") && !n
+                  },
+                  p && x > 0 && "pr-10"
+                  // className
+                ),
+                placeholder: y,
+                maxLength: d,
+                onChange: I,
+                state: m,
+                size: n ? e === "xl" || e === "lg" ? e : "xl" : e,
+                ...t
+              }
+            ),
+            n && /* @__PURE__ */ r(
+              V,
+              {
+                htmlFor: g,
+                size: e,
+                infoTooltip: f,
+                className: "peer-placeholder-shown:items-start",
+                children: u
+              }
+            ),
+            p && x > 0 && /* @__PURE__ */ r(
+              "button",
+              {
+                type: "button",
+                tabIndex: -1,
+                className: o(
+                  "absolute top-2 right-2 p-1 rounded hover:bg-accent transition-colors"
+                ),
+                onClick: C,
+                disabled: t.disabled,
+                children: /* @__PURE__ */ r(S, { className: "size-4" })
+              }
+            )
+          ] }),
+          (i || h && typeof d == "number") && /* @__PURE__ */ l("div", { className: "flex items-center justify-between text-xs gap-2", children: [
+            i && /* @__PURE__ */ r(
+              "p",
+              {
+                className: o(
+                  "text-xs",
+                  m ? R?.[m] : ""
+                ),
+                children: i
+              }
+            ),
+            h && typeof d == "number" && /* @__PURE__ */ l("span", { className: "ml-auto text-muted-foreground", children: [
+              x,
+              " / ",
+              d
+            ] })
+          ] })
+        ]
+      }
+    ) });
+  }
+);
+_.displayName = "Textarea";
+export {
+  _ as default
+};
+//# sourceMappingURL=Textarea.js.map