shad-m 1.0.2 → 1.0.3

package/dist/components/tabs.js

@@ -0,0 +1,287 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var TabsPrimitive = require('@radix-ui/react-tabs');
+var classVarianceAuthority = require('class-variance-authority');
+var react = require('motion/react');
+var utils = require('@/lib/utils');
+var providers = require('@/providers');
+var lib = require('@/lib');
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+var TabsPrimitive__namespace = /*#__PURE__*/_interopNamespace(TabsPrimitive);
+
+const Tabs = TabsPrimitive__namespace.Root;
+const tabsListVariants = classVarianceAuthority.cva("inline-flex items-center relative scrollbar-hide", {
+  variants: {
+    variant: {
+      normal: "bg-muted text-muted-foreground rounded-md p-1 h-10",
+      specific: "border-b border-border bg-transparent gap-6 h-auto p-0 overflow-x-auto",
+      fixed: "bg-transparent border-b border-border h-auto p-0 overflow-x-auto",
+      full: "bg-transparent border-b border-border h-auto p-0 w-full overflow-x-auto gap-4"
+    },
+    scrollable: {
+      true: "overflow-x-auto justify-start",
+      false: "justify-center"
+    }
+  },
+  defaultVariants: {
+    variant: "specific",
+    scrollable: true
+  }
+});
+const tabsTriggerVariants = classVarianceAuthority.cva(
+  "inline-flex items-center justify-center whitespace-nowrap transition-all duration-200 focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50",
+  {
+    variants: {
+      variant: {
+        normal: "rounded-sm px-3 py-1.5 font-medium data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm",
+        specific: "relative px-0 py-3 font-medium text-muted-foreground hover:text-foreground data-[state=active]:!text-primary",
+        fixed: "relative px-4 py-3 font-medium text-muted-foreground hover:text-foreground data-[state=active]:!text-primary",
+        full: "relative px-4 py-3 font-medium text-muted-foreground hover:text-foreground data-[state=active]:!text-primary"
+      },
+      scrollable: {
+        true: "",
+        false: ""
+      }
+    },
+    compoundVariants: [
+      {
+        variant: "full",
+        scrollable: false,
+        className: "flex-1"
+      }
+    ],
+    defaultVariants: {
+      variant: "specific",
+      scrollable: false
+    }
+  }
+);
+const TabsList = React__namespace.forwardRef(
+  ({ className, variant, scrollable, showAnimatedUnderline = true, children, ...props }, ref) => {
+    const listRef = React__namespace.useRef(null);
+    const [showLeftFade, setShowLeftFade] = React__namespace.useState(false);
+    const [showRightFade, setShowRightFade] = React__namespace.useState(false);
+    const [underlineStyle, setUnderlineStyle] = React__namespace.useState({ left: 0, width: 0 });
+    const tabRefs = React__namespace.useRef([]);
+    react.useMotionValue(0);
+    const checkScroll = React__namespace.useCallback(() => {
+      if (!listRef.current || !scrollable) return;
+      const { scrollLeft, scrollWidth, clientWidth } = listRef.current;
+      setShowLeftFade(scrollLeft > 0);
+      setShowRightFade(scrollLeft < scrollWidth - clientWidth - 1);
+    }, [scrollable]);
+    const scrollToActiveTab = React__namespace.useCallback(
+      (activeTab) => {
+        if (!scrollable || !listRef.current) return;
+        const list = listRef.current;
+        const listRect = list.getBoundingClientRect();
+        const tabRect = activeTab.getBoundingClientRect();
+        const tabLeft = tabRect.left - listRect.left + list.scrollLeft;
+        const tabRight = tabLeft + tabRect.width;
+        const visibleLeft = list.scrollLeft;
+        const visibleRight = visibleLeft + list.clientWidth;
+        const padding = 32;
+        let shouldScroll = false;
+        let scrollTarget = 0;
+        if (tabLeft < visibleLeft + padding) {
+          shouldScroll = true;
+          scrollTarget = Math.max(0, tabLeft - padding);
+        } else if (tabRight > visibleRight - padding) {
+          shouldScroll = true;
+          scrollTarget = tabRight - list.clientWidth + padding;
+        }
+        if (shouldScroll) {
+          const startScroll = list.scrollLeft;
+          const distance = scrollTarget - startScroll;
+          react.animate(0, 1, {
+            type: "spring",
+            stiffness: 300,
+            damping: 30,
+            onUpdate: (progress) => {
+              list.scrollTo({
+                left: startScroll + distance * progress,
+                behavior: "auto"
+                // We're handling the animation ourselves
+              });
+            },
+            onComplete: () => {
+              list.scrollTo({ left: scrollTarget, behavior: "auto" });
+            }
+          });
+        }
+      },
+      [scrollable]
+    );
+    React__namespace.useLayoutEffect(() => {
+      if (variant === "normal") return;
+      const updateUnderline = () => {
+        const activeTab = tabRefs.current.find(
+          (tab) => tab?.getAttribute("data-state") === "active"
+        );
+        if (activeTab && listRef.current) {
+          const listRect = listRef.current.getBoundingClientRect();
+          const tabRect = activeTab.getBoundingClientRect();
+          const newLeft = tabRect.left - listRect.left + (listRef.current.scrollLeft || 0);
+          const newWidth = tabRect.width;
+          if (showAnimatedUnderline) {
+            setUnderlineStyle({
+              left: newLeft,
+              width: newWidth
+            });
+          }
+          setTimeout(() => {
+            scrollToActiveTab(activeTab);
+          }, 50);
+        }
+      };
+      updateUnderline();
+      const observer = new MutationObserver(() => {
+        updateUnderline();
+      });
+      tabRefs.current.forEach((tab) => {
+        if (tab) {
+          observer.observe(tab, { attributes: true, attributeFilter: ["data-state"] });
+        }
+      });
+      return () => observer.disconnect();
+    }, [showAnimatedUnderline, variant, children, scrollToActiveTab]);
+    React__namespace.useEffect(() => {
+      checkScroll();
+      window.addEventListener("resize", checkScroll);
+      return () => window.removeEventListener("resize", checkScroll);
+    }, [checkScroll]);
+    const childrenWithRefs = React__namespace.Children.map(children, (child, index) => {
+      if (React__namespace.isValidElement(child) && child.type === TabsTrigger) {
+        return React__namespace.cloneElement(child, {
+          scrollable,
+          ref: (el) => {
+            tabRefs.current[index] = el;
+            const originalRef = child.ref;
+            if (typeof originalRef === "function") {
+              originalRef(el);
+            } else if (originalRef) {
+              originalRef.current = el;
+            }
+          }
+        });
+      }
+      return child;
+    });
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
+      showLeftFade && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "from-background via-background/80 pointer-events-none absolute left-0 top-0 z-10 h-full w-16 bg-gradient-to-r to-transparent" }),
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        TabsPrimitive__namespace.List,
+        {
+          ref: (node) => {
+            if (typeof ref === "function") {
+              ref(node);
+            } else if (ref) {
+              ref.current = node;
+            }
+            listRef.current = node;
+          },
+          onScroll: checkScroll,
+          className: utils.cn(tabsListVariants({ variant, scrollable, className })),
+          ...props,
+          children: [
+            childrenWithRefs,
+            showAnimatedUnderline && variant !== "normal" && /* @__PURE__ */ jsxRuntime.jsx(
+              react.motion.div,
+              {
+                className: "bg-primary absolute bottom-0 h-0.5",
+                layoutId: "tab-underline",
+                style: {
+                  left: underlineStyle.left,
+                  width: underlineStyle.width
+                },
+                transition: {
+                  type: "spring",
+                  stiffness: 400,
+                  damping: 40
+                }
+              }
+            )
+          ]
+        }
+      ),
+      showRightFade && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "from-background via-background/80 pointer-events-none absolute right-0 top-0 z-10 h-full w-16 bg-gradient-to-l to-transparent" })
+    ] });
+  }
+);
+TabsList.displayName = TabsPrimitive__namespace.List.displayName;
+const TabsTrigger = React__namespace.forwardRef(
+  ({
+    className,
+    variant,
+    scrollable,
+    onClick,
+    trackingData,
+    trackingIndex,
+    trackingName,
+    blockSendTracking,
+    ...props
+  }, ref) => {
+    const { sendTrack } = providers.useUISystemContext();
+    const handleClick = (event) => {
+      if ((trackingName || trackingData?.identity) && !blockSendTracking) {
+        sendTrack(
+          trackingName || `sl_tab_${trackingData?.identity}`,
+          lib.TRACKING_TYPE.click,
+          trackingData
+        );
+      }
+      onClick?.(event);
+    };
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      TabsPrimitive__namespace.Trigger,
+      {
+        ref,
+        className: utils.cn(tabsTriggerVariants({ variant, scrollable, className })),
+        onClick: handleClick,
+        ...props
+      }
+    );
+  }
+);
+TabsTrigger.displayName = TabsPrimitive__namespace.Trigger.displayName;
+const TabsContent = React__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+  TabsPrimitive__namespace.Content,
+  {
+    ref,
+    className: utils.cn(
+      "animate-in fade-in-0 slide-in-from-bottom-1 mt-2 duration-200",
+      "focus:outline-none focus-visible:outline-none",
+      className
+    ),
+    ...props
+  }
+));
+TabsContent.displayName = TabsPrimitive__namespace.Content.displayName;
+
+exports.Tabs = Tabs;
+exports.TabsContent = TabsContent;
+exports.TabsList = TabsList;
+exports.TabsTrigger = TabsTrigger;
+//# sourceMappingURL=tabs.js.map
+//# sourceMappingURL=tabs.js.map

package/dist/components/tabs.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/tabs.tsx"],"names":["TabsPrimitive","cva","React","useMotionValue","animate","jsxs","jsx","cn","motion","useUISystemContext","TRACKING_TYPE"],"mappings":"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","file":"tabs.js","sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport * as TabsPrimitive from '@radix-ui/react-tabs';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { motion, useMotionValue, animate } from 'motion/react';\n\nimport { cn } from '@/lib/utils';\nimport { useUISystemContext } from '@/providers';\nimport { TRACKING_TYPE } from '@/lib';\n\nconst Tabs = TabsPrimitive.Root;\n\nconst tabsListVariants = cva('inline-flex items-center relative scrollbar-hide', {\n  variants: {\n    variant: {\n      normal: 'bg-muted text-muted-foreground rounded-md p-1 h-10',\n      specific: 'border-b border-border bg-transparent gap-6 h-auto p-0 overflow-x-auto',\n      fixed: 'bg-transparent border-b border-border h-auto p-0 overflow-x-auto',\n      full: 'bg-transparent border-b border-border h-auto p-0 w-full overflow-x-auto gap-4',\n    },\n    scrollable: {\n      true: 'overflow-x-auto justify-start',\n      false: 'justify-center',\n    },\n  },\n  defaultVariants: {\n    variant: 'specific',\n    scrollable: true,\n  },\n});\n\nconst tabsTriggerVariants = cva(\n  'inline-flex items-center justify-center whitespace-nowrap transition-all duration-200 focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50',\n  {\n    variants: {\n      variant: {\n        normal:\n          'rounded-sm px-3 py-1.5 font-medium data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm',\n        specific:\n          'relative px-0 py-3 font-medium text-muted-foreground hover:text-foreground data-[state=active]:!text-primary',\n        fixed:\n          'relative px-4 py-3 font-medium text-muted-foreground hover:text-foreground data-[state=active]:!text-primary',\n        full: 'relative px-4 py-3 font-medium text-muted-foreground hover:text-foreground data-[state=active]:!text-primary',\n      },\n      scrollable: {\n        true: '',\n        false: '',\n      },\n    },\n    compoundVariants: [\n      {\n        variant: 'full',\n        scrollable: false,\n        className: 'flex-1',\n      },\n    ],\n    defaultVariants: {\n      variant: 'specific',\n      scrollable: false,\n    },\n  },\n);\n\nexport interface TabsListProps\n  extends\n    React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>,\n    VariantProps<typeof tabsListVariants> {\n  scrollable?: boolean;\n  showAnimatedUnderline?: boolean;\n}\n\ninterface TrackingData {\n  identity?: string;\n  object_name?: string; // tab name\n  index?: number; // tab index\n}\n\nexport interface TabsTriggerProps\n  extends\n    React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>,\n    VariantProps<typeof tabsTriggerVariants> {\n  trackingName?: string;\n  trackingData?: TrackingData;\n  trackingIndex?: number;\n  blockSendTracking?: boolean;\n}\n\nconst TabsList = React.forwardRef<React.ElementRef<typeof TabsPrimitive.List>, TabsListProps>(\n  ({ className, variant, scrollable, showAnimatedUnderline = true, children, ...props }, ref) => {\n    const listRef = React.useRef<HTMLDivElement>(null);\n    const [showLeftFade, setShowLeftFade] = React.useState(false);\n    const [showRightFade, setShowRightFade] = React.useState(false);\n    const [underlineStyle, setUnderlineStyle] = React.useState({ left: 0, width: 0 });\n    const tabRefs = React.useRef<(HTMLButtonElement | null)[]>([]);\n    const scrollX = useMotionValue(0);\n\n    // Check scroll position to show/hide fade indicators\n    const checkScroll = React.useCallback(() => {\n      if (!listRef.current || !scrollable) return;\n\n      const { scrollLeft, scrollWidth, clientWidth } = listRef.current;\n      setShowLeftFade(scrollLeft > 0);\n      setShowRightFade(scrollLeft < scrollWidth - clientWidth - 1);\n    }, [scrollable]);\n\n    // Smooth scroll to active tab using Framer Motion\n    const scrollToActiveTab = React.useCallback(\n      (activeTab: HTMLButtonElement) => {\n        if (!scrollable || !listRef.current) return;\n\n        const list = listRef.current;\n        const listRect = list.getBoundingClientRect();\n        const tabRect = activeTab.getBoundingClientRect();\n\n        const tabLeft = tabRect.left - listRect.left + list.scrollLeft;\n        const tabRight = tabLeft + tabRect.width;\n        const visibleLeft = list.scrollLeft;\n        const visibleRight = visibleLeft + list.clientWidth;\n\n        const padding = 32; // Padding from edges\n\n        let shouldScroll = false;\n        let scrollTarget = 0;\n\n        // Check if tab is outside visible area\n        if (tabLeft < visibleLeft + padding) {\n          // Tab is to the left of visible area\n          shouldScroll = true;\n          scrollTarget = Math.max(0, tabLeft - padding);\n        } else if (tabRight > visibleRight - padding) {\n          // Tab is to the right of visible area\n          shouldScroll = true;\n          scrollTarget = tabRight - list.clientWidth + padding;\n        }\n\n        if (shouldScroll) {\n          const startScroll = list.scrollLeft;\n          const distance = scrollTarget - startScroll;\n\n          // Use Framer Motion animate with better mobile support\n          animate(0, 1, {\n            type: 'spring',\n            stiffness: 300,\n            damping: 30,\n            onUpdate: (progress) => {\n              // Use scrollTo instead of direct scrollLeft assignment for better mobile support\n              list.scrollTo({\n                left: startScroll + distance * progress,\n                behavior: 'auto', // We're handling the animation ourselves\n              });\n            },\n            onComplete: () => {\n              // Ensure we're at the exact target position\n              list.scrollTo({ left: scrollTarget, behavior: 'auto' });\n            },\n          });\n        }\n      },\n      [scrollable],\n    );\n\n    // Update underline position based on active tab\n    React.useLayoutEffect(() => {\n      if (variant === 'normal') return;\n\n      const updateUnderline = () => {\n        const activeTab = tabRefs.current.find(\n          (tab) => tab?.getAttribute('data-state') === 'active',\n        );\n\n        if (activeTab && listRef.current) {\n          const listRect = listRef.current.getBoundingClientRect();\n          const tabRect = activeTab.getBoundingClientRect();\n\n          const newLeft = tabRect.left - listRect.left + (listRef.current.scrollLeft || 0);\n          const newWidth = tabRect.width;\n\n          if (showAnimatedUnderline) {\n            setUnderlineStyle({\n              left: newLeft,\n              width: newWidth,\n            });\n          }\n\n          // Scroll to active tab after a small delay\n          setTimeout(() => {\n            scrollToActiveTab(activeTab);\n          }, 50);\n        }\n      };\n\n      // Initial update\n      updateUnderline();\n\n      // Watch for tab state changes\n      const observer = new MutationObserver(() => {\n        updateUnderline();\n      });\n\n      tabRefs.current.forEach((tab) => {\n        if (tab) {\n          observer.observe(tab, { attributes: true, attributeFilter: ['data-state'] });\n        }\n      });\n\n      return () => observer.disconnect();\n    }, [showAnimatedUnderline, variant, children, scrollToActiveTab]);\n\n    React.useEffect(() => {\n      checkScroll();\n      window.addEventListener('resize', checkScroll);\n      return () => window.removeEventListener('resize', checkScroll);\n    }, [checkScroll]);\n\n    // Clone children to inject refs and scrollable prop\n    const childrenWithRefs = React.Children.map(children, (child, index) => {\n      if (React.isValidElement(child) && child.type === TabsTrigger) {\n        return React.cloneElement(child as React.ReactElement<any>, {\n          scrollable,\n          ref: (el: HTMLButtonElement | null) => {\n            tabRefs.current[index] = el;\n            // Preserve original ref if exists\n            const originalRef = (child as any).ref;\n            if (typeof originalRef === 'function') {\n              originalRef(el);\n            } else if (originalRef) {\n              originalRef.current = el;\n            }\n          },\n        });\n      }\n      return child;\n    });\n\n    return (\n      <div className=\"relative\">\n        {/* Left fade indicator */}\n        {showLeftFade && (\n          <div className=\"from-background via-background/80 pointer-events-none absolute left-0 top-0 z-10 h-full w-16 bg-gradient-to-r to-transparent\" />\n        )}\n\n        <TabsPrimitive.List\n          ref={(node) => {\n            if (typeof ref === 'function') {\n              ref(node);\n            } else if (ref) {\n              ref.current = node;\n            }\n            // @ts-ignore\n            listRef.current = node;\n          }}\n          onScroll={checkScroll}\n          className={cn(tabsListVariants({ variant, scrollable, className }))}\n          {...props}\n        >\n          {childrenWithRefs}\n\n          {/* Animated underline */}\n          {showAnimatedUnderline && variant !== 'normal' && (\n            <motion.div\n              className=\"bg-primary absolute bottom-0 h-0.5\"\n              layoutId=\"tab-underline\"\n              style={{\n                left: underlineStyle.left,\n                width: underlineStyle.width,\n              }}\n              transition={{\n                type: 'spring',\n                stiffness: 400,\n                damping: 40,\n              }}\n            />\n          )}\n        </TabsPrimitive.List>\n\n        {/* Right fade indicator */}\n        {showRightFade && (\n          <div className=\"from-background via-background/80 pointer-events-none absolute right-0 top-0 z-10 h-full w-16 bg-gradient-to-l to-transparent\" />\n        )}\n      </div>\n    );\n  },\n);\nTabsList.displayName = TabsPrimitive.List.displayName;\n\nconst TabsTrigger = React.forwardRef<\n  React.ElementRef<typeof TabsPrimitive.Trigger>,\n  TabsTriggerProps\n>(\n  (\n    {\n      className,\n      variant,\n      scrollable,\n      onClick,\n      trackingData,\n      trackingIndex,\n      trackingName,\n      blockSendTracking,\n      ...props\n    },\n    ref,\n  ) => {\n    const { sendTrack } = useUISystemContext();\n    const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {\n      if ((trackingName || trackingData?.identity) && !blockSendTracking) {\n        sendTrack(\n          trackingName || `sl_tab_${trackingData?.identity}`,\n          TRACKING_TYPE.click,\n          trackingData,\n        );\n      }\n      onClick?.(event);\n    };\n\n    return (\n      <TabsPrimitive.Trigger\n        ref={ref}\n        className={cn(tabsTriggerVariants({ variant, scrollable, className }))}\n        onClick={handleClick}\n        {...props}\n      />\n    );\n  },\n);\nTabsTrigger.displayName = TabsPrimitive.Trigger.displayName;\n\nconst TabsContent = React.forwardRef<\n  React.ElementRef<typeof TabsPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>\n>(({ className, ...props }, ref) => (\n  <TabsPrimitive.Content\n    ref={ref}\n    className={cn(\n      'animate-in fade-in-0 slide-in-from-bottom-1 mt-2 duration-200',\n      'focus:outline-none focus-visible:outline-none',\n      className,\n    )}\n    {...props}\n  />\n));\nTabsContent.displayName = TabsPrimitive.Content.displayName;\n\nexport { Tabs, TabsList, TabsTrigger, TabsContent };\n"]}

package/dist/components/tabs.mjs

@@ -0,0 +1,261 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import * as React from 'react';
+import * as TabsPrimitive from '@radix-ui/react-tabs';
+import { cva } from 'class-variance-authority';
+import { useMotionValue, animate, motion } from 'motion/react';
+import { cn } from '@/lib/utils';
+import { useUISystemContext } from '@/providers';
+import { TRACKING_TYPE } from '@/lib';
+
+const Tabs = TabsPrimitive.Root;
+const tabsListVariants = cva("inline-flex items-center relative scrollbar-hide", {
+  variants: {
+    variant: {
+      normal: "bg-muted text-muted-foreground rounded-md p-1 h-10",
+      specific: "border-b border-border bg-transparent gap-6 h-auto p-0 overflow-x-auto",
+      fixed: "bg-transparent border-b border-border h-auto p-0 overflow-x-auto",
+      full: "bg-transparent border-b border-border h-auto p-0 w-full overflow-x-auto gap-4"
+    },
+    scrollable: {
+      true: "overflow-x-auto justify-start",
+      false: "justify-center"
+    }
+  },
+  defaultVariants: {
+    variant: "specific",
+    scrollable: true
+  }
+});
+const tabsTriggerVariants = cva(
+  "inline-flex items-center justify-center whitespace-nowrap transition-all duration-200 focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50",
+  {
+    variants: {
+      variant: {
+        normal: "rounded-sm px-3 py-1.5 font-medium data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm",
+        specific: "relative px-0 py-3 font-medium text-muted-foreground hover:text-foreground data-[state=active]:!text-primary",
+        fixed: "relative px-4 py-3 font-medium text-muted-foreground hover:text-foreground data-[state=active]:!text-primary",
+        full: "relative px-4 py-3 font-medium text-muted-foreground hover:text-foreground data-[state=active]:!text-primary"
+      },
+      scrollable: {
+        true: "",
+        false: ""
+      }
+    },
+    compoundVariants: [
+      {
+        variant: "full",
+        scrollable: false,
+        className: "flex-1"
+      }
+    ],
+    defaultVariants: {
+      variant: "specific",
+      scrollable: false
+    }
+  }
+);
+const TabsList = React.forwardRef(
+  ({ className, variant, scrollable, showAnimatedUnderline = true, children, ...props }, ref) => {
+    const listRef = React.useRef(null);
+    const [showLeftFade, setShowLeftFade] = React.useState(false);
+    const [showRightFade, setShowRightFade] = React.useState(false);
+    const [underlineStyle, setUnderlineStyle] = React.useState({ left: 0, width: 0 });
+    const tabRefs = React.useRef([]);
+    useMotionValue(0);
+    const checkScroll = React.useCallback(() => {
+      if (!listRef.current || !scrollable) return;
+      const { scrollLeft, scrollWidth, clientWidth } = listRef.current;
+      setShowLeftFade(scrollLeft > 0);
+      setShowRightFade(scrollLeft < scrollWidth - clientWidth - 1);
+    }, [scrollable]);
+    const scrollToActiveTab = React.useCallback(
+      (activeTab) => {
+        if (!scrollable || !listRef.current) return;
+        const list = listRef.current;
+        const listRect = list.getBoundingClientRect();
+        const tabRect = activeTab.getBoundingClientRect();
+        const tabLeft = tabRect.left - listRect.left + list.scrollLeft;
+        const tabRight = tabLeft + tabRect.width;
+        const visibleLeft = list.scrollLeft;
+        const visibleRight = visibleLeft + list.clientWidth;
+        const padding = 32;
+        let shouldScroll = false;
+        let scrollTarget = 0;
+        if (tabLeft < visibleLeft + padding) {
+          shouldScroll = true;
+          scrollTarget = Math.max(0, tabLeft - padding);
+        } else if (tabRight > visibleRight - padding) {
+          shouldScroll = true;
+          scrollTarget = tabRight - list.clientWidth + padding;
+        }
+        if (shouldScroll) {
+          const startScroll = list.scrollLeft;
+          const distance = scrollTarget - startScroll;
+          animate(0, 1, {
+            type: "spring",
+            stiffness: 300,
+            damping: 30,
+            onUpdate: (progress) => {
+              list.scrollTo({
+                left: startScroll + distance * progress,
+                behavior: "auto"
+                // We're handling the animation ourselves
+              });
+            },
+            onComplete: () => {
+              list.scrollTo({ left: scrollTarget, behavior: "auto" });
+            }
+          });
+        }
+      },
+      [scrollable]
+    );
+    React.useLayoutEffect(() => {
+      if (variant === "normal") return;
+      const updateUnderline = () => {
+        const activeTab = tabRefs.current.find(
+          (tab) => tab?.getAttribute("data-state") === "active"
+        );
+        if (activeTab && listRef.current) {
+          const listRect = listRef.current.getBoundingClientRect();
+          const tabRect = activeTab.getBoundingClientRect();
+          const newLeft = tabRect.left - listRect.left + (listRef.current.scrollLeft || 0);
+          const newWidth = tabRect.width;
+          if (showAnimatedUnderline) {
+            setUnderlineStyle({
+              left: newLeft,
+              width: newWidth
+            });
+          }
+          setTimeout(() => {
+            scrollToActiveTab(activeTab);
+          }, 50);
+        }
+      };
+      updateUnderline();
+      const observer = new MutationObserver(() => {
+        updateUnderline();
+      });
+      tabRefs.current.forEach((tab) => {
+        if (tab) {
+          observer.observe(tab, { attributes: true, attributeFilter: ["data-state"] });
+        }
+      });
+      return () => observer.disconnect();
+    }, [showAnimatedUnderline, variant, children, scrollToActiveTab]);
+    React.useEffect(() => {
+      checkScroll();
+      window.addEventListener("resize", checkScroll);
+      return () => window.removeEventListener("resize", checkScroll);
+    }, [checkScroll]);
+    const childrenWithRefs = React.Children.map(children, (child, index) => {
+      if (React.isValidElement(child) && child.type === TabsTrigger) {
+        return React.cloneElement(child, {
+          scrollable,
+          ref: (el) => {
+            tabRefs.current[index] = el;
+            const originalRef = child.ref;
+            if (typeof originalRef === "function") {
+              originalRef(el);
+            } else if (originalRef) {
+              originalRef.current = el;
+            }
+          }
+        });
+      }
+      return child;
+    });
+    return /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+      showLeftFade && /* @__PURE__ */ jsx("div", { className: "from-background via-background/80 pointer-events-none absolute left-0 top-0 z-10 h-full w-16 bg-gradient-to-r to-transparent" }),
+      /* @__PURE__ */ jsxs(
+        TabsPrimitive.List,
+        {
+          ref: (node) => {
+            if (typeof ref === "function") {
+              ref(node);
+            } else if (ref) {
+              ref.current = node;
+            }
+            listRef.current = node;
+          },
+          onScroll: checkScroll,
+          className: cn(tabsListVariants({ variant, scrollable, className })),
+          ...props,
+          children: [
+            childrenWithRefs,
+            showAnimatedUnderline && variant !== "normal" && /* @__PURE__ */ jsx(
+              motion.div,
+              {
+                className: "bg-primary absolute bottom-0 h-0.5",
+                layoutId: "tab-underline",
+                style: {
+                  left: underlineStyle.left,
+                  width: underlineStyle.width
+                },
+                transition: {
+                  type: "spring",
+                  stiffness: 400,
+                  damping: 40
+                }
+              }
+            )
+          ]
+        }
+      ),
+      showRightFade && /* @__PURE__ */ jsx("div", { className: "from-background via-background/80 pointer-events-none absolute right-0 top-0 z-10 h-full w-16 bg-gradient-to-l to-transparent" })
+    ] });
+  }
+);
+TabsList.displayName = TabsPrimitive.List.displayName;
+const TabsTrigger = React.forwardRef(
+  ({
+    className,
+    variant,
+    scrollable,
+    onClick,
+    trackingData,
+    trackingIndex,
+    trackingName,
+    blockSendTracking,
+    ...props
+  }, ref) => {
+    const { sendTrack } = useUISystemContext();
+    const handleClick = (event) => {
+      if ((trackingName || trackingData?.identity) && !blockSendTracking) {
+        sendTrack(
+          trackingName || `sl_tab_${trackingData?.identity}`,
+          TRACKING_TYPE.click,
+          trackingData
+        );
+      }
+      onClick?.(event);
+    };
+    return /* @__PURE__ */ jsx(
+      TabsPrimitive.Trigger,
+      {
+        ref,
+        className: cn(tabsTriggerVariants({ variant, scrollable, className })),
+        onClick: handleClick,
+        ...props
+      }
+    );
+  }
+);
+TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
+const TabsContent = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  TabsPrimitive.Content,
+  {
+    ref,
+    className: cn(
+      "animate-in fade-in-0 slide-in-from-bottom-1 mt-2 duration-200",
+      "focus:outline-none focus-visible:outline-none",
+      className
+    ),
+    ...props
+  }
+));
+TabsContent.displayName = TabsPrimitive.Content.displayName;
+
+export { Tabs, TabsContent, TabsList, TabsTrigger };
+//# sourceMappingURL=tabs.mjs.map
+//# sourceMappingURL=tabs.mjs.map

package/dist/components/tabs.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/tabs.tsx"],"names":[],"mappings":";;;;;;;;;AAWA,MAAM,OAAO,aAAA,CAAc;AAE3B,MAAM,gBAAA,GAAmB,IAAI,kDAAA,EAAoD;AAAA,EAC/E,QAAA,EAAU;AAAA,IACR,OAAA,EAAS;AAAA,MACP,MAAA,EAAQ,oDAAA;AAAA,MACR,QAAA,EAAU,wEAAA;AAAA,MACV,KAAA,EAAO,kEAAA;AAAA,MACP,IAAA,EAAM;AAAA,KACR;AAAA,IACA,UAAA,EAAY;AAAA,MACV,IAAA,EAAM,+BAAA;AAAA,MACN,KAAA,EAAO;AAAA;AACT,GACF;AAAA,EACA,eAAA,EAAiB;AAAA,IACf,OAAA,EAAS,UAAA;AAAA,IACT,UAAA,EAAY;AAAA;AAEhB,CAAC,CAAA;AAED,MAAM,mBAAA,GAAsB,GAAA;AAAA,EAC1B,mKAAA;AAAA,EACA;AAAA,IACE,QAAA,EAAU;AAAA,MACR,OAAA,EAAS;AAAA,QACP,MAAA,EACE,wIAAA;AAAA,QACF,QAAA,EACE,8GAAA;AAAA,QACF,KAAA,EACE,8GAAA;AAAA,QACF,IAAA,EAAM;AAAA,OACR;AAAA,MACA,UAAA,EAAY;AAAA,QACV,IAAA,EAAM,EAAA;AAAA,QACN,KAAA,EAAO;AAAA;AACT,KACF;AAAA,IACA,gBAAA,EAAkB;AAAA,MAChB;AAAA,QACE,OAAA,EAAS,MAAA;AAAA,QACT,UAAA,EAAY,KAAA;AAAA,QACZ,SAAA,EAAW;AAAA;AACb,KACF;AAAA,IACA,eAAA,EAAiB;AAAA,MACf,OAAA,EAAS,UAAA;AAAA,MACT,UAAA,EAAY;AAAA;AACd;AAEJ,CAAA;AA0BA,MAAM,WAAW,KAAA,CAAM,UAAA;AAAA,EACrB,CAAC,EAAE,SAAA,EAAW,OAAA,EAAS,UAAA,EAAY,qBAAA,GAAwB,IAAA,EAAM,QAAA,EAAU,GAAG,KAAA,EAAM,EAAG,GAAA,KAAQ;AAC7F,IAAA,MAAM,OAAA,GAAU,KAAA,CAAM,MAAA,CAAuB,IAAI,CAAA;AACjD,IAAA,MAAM,CAAC,YAAA,EAAc,eAAe,CAAA,GAAI,KAAA,CAAM,SAAS,KAAK,CAAA;AAC5D,IAAA,MAAM,CAAC,aAAA,EAAe,gBAAgB,CAAA,GAAI,KAAA,CAAM,SAAS,KAAK,CAAA;AAC9D,IAAA,MAAM,CAAC,cAAA,EAAgB,iBAAiB,CAAA,GAAI,KAAA,CAAM,QAAA,CAAS,EAAE,IAAA,EAAM,CAAA,EAAG,KAAA,EAAO,CAAA,EAAG,CAAA;AAChF,IAAA,MAAM,OAAA,GAAU,KAAA,CAAM,MAAA,CAAqC,EAAE,CAAA;AAC7D,IAAgB,eAAe,CAAC;AAGhC,IAAA,MAAM,WAAA,GAAc,KAAA,CAAM,WAAA,CAAY,MAAM;AAC1C,MAAA,IAAI,CAAC,OAAA,CAAQ,OAAA,IAAW,CAAC,UAAA,EAAY;AAErC,MAAA,MAAM,EAAE,UAAA,EAAY,WAAA,EAAa,WAAA,KAAgB,OAAA,CAAQ,OAAA;AACzD,MAAA,eAAA,CAAgB,aAAa,CAAC,CAAA;AAC9B,MAAA,gBAAA,CAAiB,UAAA,GAAa,WAAA,GAAc,WAAA,GAAc,CAAC,CAAA;AAAA,IAC7D,CAAA,EAAG,CAAC,UAAU,CAAC,CAAA;AAGf,IAAA,MAAM,oBAAoB,KAAA,CAAM,WAAA;AAAA,MAC9B,CAAC,SAAA,KAAiC;AAChC,QAAA,IAAI,CAAC,UAAA,IAAc,CAAC,OAAA,CAAQ,OAAA,EAAS;AAErC,QAAA,MAAM,OAAO,OAAA,CAAQ,OAAA;AACrB,QAAA,MAAM,QAAA,GAAW,KAAK,qBAAA,EAAsB;AAC5C,QAAA,MAAM,OAAA,GAAU,UAAU,qBAAA,EAAsB;AAEhD,QAAA,MAAM,OAAA,GAAU,OAAA,CAAQ,IAAA,GAAO,QAAA,CAAS,OAAO,IAAA,CAAK,UAAA;AACpD,QAAA,MAAM,QAAA,GAAW,UAAU,OAAA,CAAQ,KAAA;AACnC,QAAA,MAAM,cAAc,IAAA,CAAK,UAAA;AACzB,QAAA,MAAM,YAAA,GAAe,cAAc,IAAA,CAAK,WAAA;AAExC,QAAA,MAAM,OAAA,GAAU,EAAA;AAEhB,QAAA,IAAI,YAAA,GAAe,KAAA;AACnB,QAAA,IAAI,YAAA,GAAe,CAAA;AAGnB,QAAA,IAAI,OAAA,GAAU,cAAc,OAAA,EAAS;AAEnC,UAAA,YAAA,GAAe,IAAA;AACf,UAAA,YAAA,GAAe,IAAA,CAAK,GAAA,CAAI,CAAA,EAAG,OAAA,GAAU,OAAO,CAAA;AAAA,QAC9C,CAAA,MAAA,IAAW,QAAA,GAAW,YAAA,GAAe,OAAA,EAAS;AAE5C,UAAA,YAAA,GAAe,IAAA;AACf,UAAA,YAAA,GAAe,QAAA,GAAW,KAAK,WAAA,GAAc,OAAA;AAAA,QAC/C;AAEA,QAAA,IAAI,YAAA,EAAc;AAChB,UAAA,MAAM,cAAc,IAAA,CAAK,UAAA;AACzB,UAAA,MAAM,WAAW,YAAA,GAAe,WAAA;AAGhC,UAAA,OAAA,CAAQ,GAAG,CAAA,EAAG;AAAA,YACZ,IAAA,EAAM,QAAA;AAAA,YACN,SAAA,EAAW,GAAA;AAAA,YACX,OAAA,EAAS,EAAA;AAAA,YACT,QAAA,EAAU,CAAC,QAAA,KAAa;AAEtB,cAAA,IAAA,CAAK,QAAA,CAAS;AAAA,gBACZ,IAAA,EAAM,cAAc,QAAA,GAAW,QAAA;AAAA,gBAC/B,QAAA,EAAU;AAAA;AAAA,eACX,CAAA;AAAA,YACH,CAAA;AAAA,YACA,YAAY,MAAM;AAEhB,cAAA,IAAA,CAAK,SAAS,EAAE,IAAA,EAAM,YAAA,EAAc,QAAA,EAAU,QAAQ,CAAA;AAAA,YACxD;AAAA,WACD,CAAA;AAAA,QACH;AAAA,MACF,CAAA;AAAA,MACA,CAAC,UAAU;AAAA,KACb;AAGA,IAAA,KAAA,CAAM,gBAAgB,MAAM;AAC1B,MAAA,IAAI,YAAY,QAAA,EAAU;AAE1B,MAAA,MAAM,kBAAkB,MAAM;AAC5B,QAAA,MAAM,SAAA,GAAY,QAAQ,OAAA,CAAQ,IAAA;AAAA,UAChC,CAAC,GAAA,KAAQ,GAAA,EAAK,YAAA,CAAa,YAAY,CAAA,KAAM;AAAA,SAC/C;AAEA,QAAA,IAAI,SAAA,IAAa,QAAQ,OAAA,EAAS;AAChC,UAAA,MAAM,QAAA,GAAW,OAAA,CAAQ,OAAA,CAAQ,qBAAA,EAAsB;AACvD,UAAA,MAAM,OAAA,GAAU,UAAU,qBAAA,EAAsB;AAEhD,UAAA,MAAM,UAAU,OAAA,CAAQ,IAAA,GAAO,SAAS,IAAA,IAAQ,OAAA,CAAQ,QAAQ,UAAA,IAAc,CAAA,CAAA;AAC9E,UAAA,MAAM,WAAW,OAAA,CAAQ,KAAA;AAEzB,UAAA,IAAI,qBAAA,EAAuB;AACzB,YAAA,iBAAA,CAAkB;AAAA,cAChB,IAAA,EAAM,OAAA;AAAA,cACN,KAAA,EAAO;AAAA,aACR,CAAA;AAAA,UACH;AAGA,UAAA,UAAA,CAAW,MAAM;AACf,YAAA,iBAAA,CAAkB,SAAS,CAAA;AAAA,UAC7B,GAAG,EAAE,CAAA;AAAA,QACP;AAAA,MACF,CAAA;AAGA,MAAA,eAAA,EAAgB;AAGhB,MAAA,MAAM,QAAA,GAAW,IAAI,gBAAA,CAAiB,MAAM;AAC1C,QAAA,eAAA,EAAgB;AAAA,MAClB,CAAC,CAAA;AAED,MAAA,OAAA,CAAQ,OAAA,CAAQ,OAAA,CAAQ,CAAC,GAAA,KAAQ;AAC/B,QAAA,IAAI,GAAA,EAAK;AACP,UAAA,QAAA,CAAS,OAAA,CAAQ,KAAK,EAAE,UAAA,EAAY,MAAM,eAAA,EAAiB,CAAC,YAAY,CAAA,EAAG,CAAA;AAAA,QAC7E;AAAA,MACF,CAAC,CAAA;AAED,MAAA,OAAO,MAAM,SAAS,UAAA,EAAW;AAAA,IACnC,GAAG,CAAC,qBAAA,EAAuB,OAAA,EAAS,QAAA,EAAU,iBAAiB,CAAC,CAAA;AAEhE,IAAA,KAAA,CAAM,UAAU,MAAM;AACpB,MAAA,WAAA,EAAY;AACZ,MAAA,MAAA,CAAO,gBAAA,CAAiB,UAAU,WAAW,CAAA;AAC7C,MAAA,OAAO,MAAM,MAAA,CAAO,mBAAA,CAAoB,QAAA,EAAU,WAAW,CAAA;AAAA,IAC/D,CAAA,EAAG,CAAC,WAAW,CAAC,CAAA;AAGhB,IAAA,MAAM,mBAAmB,KAAA,CAAM,QAAA,CAAS,IAAI,QAAA,EAAU,CAAC,OAAO,KAAA,KAAU;AACtE,MAAA,IAAI,MAAM,cAAA,CAAe,KAAK,CAAA,IAAK,KAAA,CAAM,SAAS,WAAA,EAAa;AAC7D,QAAA,OAAO,KAAA,CAAM,aAAa,KAAA,EAAkC;AAAA,UAC1D,UAAA;AAAA,UACA,GAAA,EAAK,CAAC,EAAA,KAAiC;AACrC,YAAA,OAAA,CAAQ,OAAA,CAAQ,KAAK,CAAA,GAAI,EAAA;AAEzB,YAAA,MAAM,cAAe,KAAA,CAAc,GAAA;AACnC,YAAA,IAAI,OAAO,gBAAgB,UAAA,EAAY;AACrC,cAAA,WAAA,CAAY,EAAE,CAAA;AAAA,YAChB,WAAW,WAAA,EAAa;AACtB,cAAA,WAAA,CAAY,OAAA,GAAU,EAAA;AAAA,YACxB;AAAA,UACF;AAAA,SACD,CAAA;AAAA,MACH;AACA,MAAA,OAAO,KAAA;AAAA,IACT,CAAC,CAAA;AAED,IAAA,uBACE,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,UAAA,EAEZ,QAAA,EAAA;AAAA,MAAA,YAAA,oBACC,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,8HAAA,EAA+H,CAAA;AAAA,sBAGhJ,IAAA;AAAA,QAAC,aAAA,CAAc,IAAA;AAAA,QAAd;AAAA,UACC,GAAA,EAAK,CAAC,IAAA,KAAS;AACb,YAAA,IAAI,OAAO,QAAQ,UAAA,EAAY;AAC7B,cAAA,GAAA,CAAI,IAAI,CAAA;AAAA,YACV,WAAW,GAAA,EAAK;AACd,cAAA,GAAA,CAAI,OAAA,GAAU,IAAA;AAAA,YAChB;AAEA,YAAA,OAAA,CAAQ,OAAA,GAAU,IAAA;AAAA,UACpB,CAAA;AAAA,UACA,QAAA,EAAU,WAAA;AAAA,UACV,SAAA,EAAW,GAAG,gBAAA,CAAiB,EAAE,SAAS,UAAA,EAAY,SAAA,EAAW,CAAC,CAAA;AAAA,UACjE,GAAG,KAAA;AAAA,UAEH,QAAA,EAAA;AAAA,YAAA,gBAAA;AAAA,YAGA,qBAAA,IAAyB,YAAY,QAAA,oBACpC,GAAA;AAAA,cAAC,MAAA,CAAO,GAAA;AAAA,cAAP;AAAA,gBACC,SAAA,EAAU,oCAAA;AAAA,gBACV,QAAA,EAAS,eAAA;AAAA,gBACT,KAAA,EAAO;AAAA,kBACL,MAAM,cAAA,CAAe,IAAA;AAAA,kBACrB,OAAO,cAAA,CAAe;AAAA,iBACxB;AAAA,gBACA,UAAA,EAAY;AAAA,kBACV,IAAA,EAAM,QAAA;AAAA,kBACN,SAAA,EAAW,GAAA;AAAA,kBACX,OAAA,EAAS;AAAA;AACX;AAAA;AACF;AAAA;AAAA,OAEJ;AAAA,MAGC,aAAA,oBACC,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,+HAAA,EAAgI;AAAA,KAAA,EAEnJ,CAAA;AAAA,EAEJ;AACF;AACA,QAAA,CAAS,WAAA,GAAc,cAAc,IAAA,CAAK,WAAA;AAE1C,MAAM,cAAc,KAAA,CAAM,UAAA;AAAA,EAIxB,CACE;AAAA,IACE,SAAA;AAAA,IACA,OAAA;AAAA,IACA,UAAA;AAAA,IACA,OAAA;AAAA,IACA,YAAA;AAAA,IACA,aAAA;AAAA,IACA,YAAA;AAAA,IACA,iBAAA;AAAA,IACA,GAAG;AAAA,KAEL,GAAA,KACG;AACH,IAAA,MAAM,EAAE,SAAA,EAAU,GAAI,kBAAA,EAAmB;AACzC,IAAA,MAAM,WAAA,GAAc,CAAC,KAAA,KAA+C;AAClE,MAAA,IAAA,CAAK,YAAA,IAAgB,YAAA,EAAc,QAAA,KAAa,CAAC,iBAAA,EAAmB;AAClE,QAAA,SAAA;AAAA,UACE,YAAA,IAAgB,CAAA,OAAA,EAAU,YAAA,EAAc,QAAQ,CAAA,CAAA;AAAA,UAChD,aAAA,CAAc,KAAA;AAAA,UACd;AAAA,SACF;AAAA,MACF;AACA,MAAA,OAAA,GAAU,KAAK,CAAA;AAAA,IACjB,CAAA;AAEA,IAAA,uBACE,GAAA;AAAA,MAAC,aAAA,CAAc,OAAA;AAAA,MAAd;AAAA,QACC,GAAA;AAAA,QACA,SAAA,EAAW,GAAG,mBAAA,CAAoB,EAAE,SAAS,UAAA,EAAY,SAAA,EAAW,CAAC,CAAA;AAAA,QACrE,OAAA,EAAS,WAAA;AAAA,QACR,GAAG;AAAA;AAAA,KACN;AAAA,EAEJ;AACF;AACA,WAAA,CAAY,WAAA,GAAc,cAAc,OAAA,CAAQ,WAAA;AAEhD,MAAM,WAAA,GAAc,MAAM,UAAA,CAGxB,CAAC,EAAE,SAAA,EAAW,GAAG,KAAA,EAAM,EAAG,GAAA,qBAC1B,GAAA;AAAA,EAAC,aAAA,CAAc,OAAA;AAAA,EAAd;AAAA,IACC,GAAA;AAAA,IACA,SAAA,EAAW,EAAA;AAAA,MACT,+DAAA;AAAA,MACA,+CAAA;AAAA,MACA;AAAA,KACF;AAAA,IACC,GAAG;AAAA;AACN,CACD;AACD,WAAA,CAAY,WAAA,GAAc,cAAc,OAAA,CAAQ,WAAA","file":"tabs.mjs","sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport * as TabsPrimitive from '@radix-ui/react-tabs';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { motion, useMotionValue, animate } from 'motion/react';\n\nimport { cn } from '@/lib/utils';\nimport { useUISystemContext } from '@/providers';\nimport { TRACKING_TYPE } from '@/lib';\n\nconst Tabs = TabsPrimitive.Root;\n\nconst tabsListVariants = cva('inline-flex items-center relative scrollbar-hide', {\n  variants: {\n    variant: {\n      normal: 'bg-muted text-muted-foreground rounded-md p-1 h-10',\n      specific: 'border-b border-border bg-transparent gap-6 h-auto p-0 overflow-x-auto',\n      fixed: 'bg-transparent border-b border-border h-auto p-0 overflow-x-auto',\n      full: 'bg-transparent border-b border-border h-auto p-0 w-full overflow-x-auto gap-4',\n    },\n    scrollable: {\n      true: 'overflow-x-auto justify-start',\n      false: 'justify-center',\n    },\n  },\n  defaultVariants: {\n    variant: 'specific',\n    scrollable: true,\n  },\n});\n\nconst tabsTriggerVariants = cva(\n  'inline-flex items-center justify-center whitespace-nowrap transition-all duration-200 focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50',\n  {\n    variants: {\n      variant: {\n        normal:\n          'rounded-sm px-3 py-1.5 font-medium data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm',\n        specific:\n          'relative px-0 py-3 font-medium text-muted-foreground hover:text-foreground data-[state=active]:!text-primary',\n        fixed:\n          'relative px-4 py-3 font-medium text-muted-foreground hover:text-foreground data-[state=active]:!text-primary',\n        full: 'relative px-4 py-3 font-medium text-muted-foreground hover:text-foreground data-[state=active]:!text-primary',\n      },\n      scrollable: {\n        true: '',\n        false: '',\n      },\n    },\n    compoundVariants: [\n      {\n        variant: 'full',\n        scrollable: false,\n        className: 'flex-1',\n      },\n    ],\n    defaultVariants: {\n      variant: 'specific',\n      scrollable: false,\n    },\n  },\n);\n\nexport interface TabsListProps\n  extends\n    React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>,\n    VariantProps<typeof tabsListVariants> {\n  scrollable?: boolean;\n  showAnimatedUnderline?: boolean;\n}\n\ninterface TrackingData {\n  identity?: string;\n  object_name?: string; // tab name\n  index?: number; // tab index\n}\n\nexport interface TabsTriggerProps\n  extends\n    React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>,\n    VariantProps<typeof tabsTriggerVariants> {\n  trackingName?: string;\n  trackingData?: TrackingData;\n  trackingIndex?: number;\n  blockSendTracking?: boolean;\n}\n\nconst TabsList = React.forwardRef<React.ElementRef<typeof TabsPrimitive.List>, TabsListProps>(\n  ({ className, variant, scrollable, showAnimatedUnderline = true, children, ...props }, ref) => {\n    const listRef = React.useRef<HTMLDivElement>(null);\n    const [showLeftFade, setShowLeftFade] = React.useState(false);\n    const [showRightFade, setShowRightFade] = React.useState(false);\n    const [underlineStyle, setUnderlineStyle] = React.useState({ left: 0, width: 0 });\n    const tabRefs = React.useRef<(HTMLButtonElement | null)[]>([]);\n    const scrollX = useMotionValue(0);\n\n    // Check scroll position to show/hide fade indicators\n    const checkScroll = React.useCallback(() => {\n      if (!listRef.current || !scrollable) return;\n\n      const { scrollLeft, scrollWidth, clientWidth } = listRef.current;\n      setShowLeftFade(scrollLeft > 0);\n      setShowRightFade(scrollLeft < scrollWidth - clientWidth - 1);\n    }, [scrollable]);\n\n    // Smooth scroll to active tab using Framer Motion\n    const scrollToActiveTab = React.useCallback(\n      (activeTab: HTMLButtonElement) => {\n        if (!scrollable || !listRef.current) return;\n\n        const list = listRef.current;\n        const listRect = list.getBoundingClientRect();\n        const tabRect = activeTab.getBoundingClientRect();\n\n        const tabLeft = tabRect.left - listRect.left + list.scrollLeft;\n        const tabRight = tabLeft + tabRect.width;\n        const visibleLeft = list.scrollLeft;\n        const visibleRight = visibleLeft + list.clientWidth;\n\n        const padding = 32; // Padding from edges\n\n        let shouldScroll = false;\n        let scrollTarget = 0;\n\n        // Check if tab is outside visible area\n        if (tabLeft < visibleLeft + padding) {\n          // Tab is to the left of visible area\n          shouldScroll = true;\n          scrollTarget = Math.max(0, tabLeft - padding);\n        } else if (tabRight > visibleRight - padding) {\n          // Tab is to the right of visible area\n          shouldScroll = true;\n          scrollTarget = tabRight - list.clientWidth + padding;\n        }\n\n        if (shouldScroll) {\n          const startScroll = list.scrollLeft;\n          const distance = scrollTarget - startScroll;\n\n          // Use Framer Motion animate with better mobile support\n          animate(0, 1, {\n            type: 'spring',\n            stiffness: 300,\n            damping: 30,\n            onUpdate: (progress) => {\n              // Use scrollTo instead of direct scrollLeft assignment for better mobile support\n              list.scrollTo({\n                left: startScroll + distance * progress,\n                behavior: 'auto', // We're handling the animation ourselves\n              });\n            },\n            onComplete: () => {\n              // Ensure we're at the exact target position\n              list.scrollTo({ left: scrollTarget, behavior: 'auto' });\n            },\n          });\n        }\n      },\n      [scrollable],\n    );\n\n    // Update underline position based on active tab\n    React.useLayoutEffect(() => {\n      if (variant === 'normal') return;\n\n      const updateUnderline = () => {\n        const activeTab = tabRefs.current.find(\n          (tab) => tab?.getAttribute('data-state') === 'active',\n        );\n\n        if (activeTab && listRef.current) {\n          const listRect = listRef.current.getBoundingClientRect();\n          const tabRect = activeTab.getBoundingClientRect();\n\n          const newLeft = tabRect.left - listRect.left + (listRef.current.scrollLeft || 0);\n          const newWidth = tabRect.width;\n\n          if (showAnimatedUnderline) {\n            setUnderlineStyle({\n              left: newLeft,\n              width: newWidth,\n            });\n          }\n\n          // Scroll to active tab after a small delay\n          setTimeout(() => {\n            scrollToActiveTab(activeTab);\n          }, 50);\n        }\n      };\n\n      // Initial update\n      updateUnderline();\n\n      // Watch for tab state changes\n      const observer = new MutationObserver(() => {\n        updateUnderline();\n      });\n\n      tabRefs.current.forEach((tab) => {\n        if (tab) {\n          observer.observe(tab, { attributes: true, attributeFilter: ['data-state'] });\n        }\n      });\n\n      return () => observer.disconnect();\n    }, [showAnimatedUnderline, variant, children, scrollToActiveTab]);\n\n    React.useEffect(() => {\n      checkScroll();\n      window.addEventListener('resize', checkScroll);\n      return () => window.removeEventListener('resize', checkScroll);\n    }, [checkScroll]);\n\n    // Clone children to inject refs and scrollable prop\n    const childrenWithRefs = React.Children.map(children, (child, index) => {\n      if (React.isValidElement(child) && child.type === TabsTrigger) {\n        return React.cloneElement(child as React.ReactElement<any>, {\n          scrollable,\n          ref: (el: HTMLButtonElement | null) => {\n            tabRefs.current[index] = el;\n            // Preserve original ref if exists\n            const originalRef = (child as any).ref;\n            if (typeof originalRef === 'function') {\n              originalRef(el);\n            } else if (originalRef) {\n              originalRef.current = el;\n            }\n          },\n        });\n      }\n      return child;\n    });\n\n    return (\n      <div className=\"relative\">\n        {/* Left fade indicator */}\n        {showLeftFade && (\n          <div className=\"from-background via-background/80 pointer-events-none absolute left-0 top-0 z-10 h-full w-16 bg-gradient-to-r to-transparent\" />\n        )}\n\n        <TabsPrimitive.List\n          ref={(node) => {\n            if (typeof ref === 'function') {\n              ref(node);\n            } else if (ref) {\n              ref.current = node;\n            }\n            // @ts-ignore\n            listRef.current = node;\n          }}\n          onScroll={checkScroll}\n          className={cn(tabsListVariants({ variant, scrollable, className }))}\n          {...props}\n        >\n          {childrenWithRefs}\n\n          {/* Animated underline */}\n          {showAnimatedUnderline && variant !== 'normal' && (\n            <motion.div\n              className=\"bg-primary absolute bottom-0 h-0.5\"\n              layoutId=\"tab-underline\"\n              style={{\n                left: underlineStyle.left,\n                width: underlineStyle.width,\n              }}\n              transition={{\n                type: 'spring',\n                stiffness: 400,\n                damping: 40,\n              }}\n            />\n          )}\n        </TabsPrimitive.List>\n\n        {/* Right fade indicator */}\n        {showRightFade && (\n          <div className=\"from-background via-background/80 pointer-events-none absolute right-0 top-0 z-10 h-full w-16 bg-gradient-to-l to-transparent\" />\n        )}\n      </div>\n    );\n  },\n);\nTabsList.displayName = TabsPrimitive.List.displayName;\n\nconst TabsTrigger = React.forwardRef<\n  React.ElementRef<typeof TabsPrimitive.Trigger>,\n  TabsTriggerProps\n>(\n  (\n    {\n      className,\n      variant,\n      scrollable,\n      onClick,\n      trackingData,\n      trackingIndex,\n      trackingName,\n      blockSendTracking,\n      ...props\n    },\n    ref,\n  ) => {\n    const { sendTrack } = useUISystemContext();\n    const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {\n      if ((trackingName || trackingData?.identity) && !blockSendTracking) {\n        sendTrack(\n          trackingName || `sl_tab_${trackingData?.identity}`,\n          TRACKING_TYPE.click,\n          trackingData,\n        );\n      }\n      onClick?.(event);\n    };\n\n    return (\n      <TabsPrimitive.Trigger\n        ref={ref}\n        className={cn(tabsTriggerVariants({ variant, scrollable, className }))}\n        onClick={handleClick}\n        {...props}\n      />\n    );\n  },\n);\nTabsTrigger.displayName = TabsPrimitive.Trigger.displayName;\n\nconst TabsContent = React.forwardRef<\n  React.ElementRef<typeof TabsPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>\n>(({ className, ...props }, ref) => (\n  <TabsPrimitive.Content\n    ref={ref}\n    className={cn(\n      'animate-in fade-in-0 slide-in-from-bottom-1 mt-2 duration-200',\n      'focus:outline-none focus-visible:outline-none',\n      className,\n    )}\n    {...props}\n  />\n));\nTabsContent.displayName = TabsPrimitive.Content.displayName;\n\nexport { Tabs, TabsList, TabsTrigger, TabsContent };\n"]}