@shipfox/react-ui 0.12.0 → 0.13.0

package/dist/components/tabs/tabs.js

@@ -0,0 +1,243 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { motion } from 'framer-motion';
+import { Children, createContext, forwardRef, isValidElement, useCallback, useContext, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
+import { cn } from '../../utils/cn.js';
+import { debounce } from '../../utils/debounce.js';
+const TabsContext = /*#__PURE__*/ createContext(undefined);
+function useTabs() {
+    const context = useContext(TabsContext);
+    if (!context) {
+        throw new Error('useTabs must be used within a Tabs component');
+    }
+    return context;
+}
+function Tabs({ defaultValue, value, onValueChange, children, className, ...props }) {
+    const [activeValue, setActiveValue] = useState(defaultValue ?? undefined);
+    const triggersRef = useRef(new Map());
+    const initialSet = useRef(false);
+    const isControlled = value !== undefined;
+    useEffect(()=>{
+        if (!isControlled && activeValue === undefined && triggersRef.current.size > 0 && !initialSet.current) {
+            const firstTab = Array.from(triggersRef.current.keys())[0];
+            setActiveValue(firstTab);
+            initialSet.current = true;
+        }
+    }, [
+        activeValue,
+        isControlled
+    ]);
+    const registerTrigger = useCallback((value, node)=>{
+        if (node) {
+            triggersRef.current.set(value, node);
+            if (!isControlled && activeValue === undefined && !initialSet.current) {
+                setActiveValue(value);
+                initialSet.current = true;
+            }
+        } else {
+            triggersRef.current.delete(value);
+        }
+    }, [
+        isControlled,
+        activeValue
+    ]);
+    const handleValueChange = useCallback((val)=>{
+        if (!isControlled) setActiveValue(val);
+        else onValueChange?.(val);
+    }, [
+        isControlled,
+        onValueChange
+    ]);
+    const getTriggerElement = useCallback((val)=>{
+        return triggersRef.current.get(val);
+    }, []);
+    const getAllTriggerValues = useCallback(()=>{
+        return Array.from(triggersRef.current.keys());
+    }, []);
+    const resolvedActiveValue = useMemo(()=>{
+        if (value !== undefined) return value;
+        if (activeValue !== undefined) return activeValue;
+        const firstKey = Array.from(triggersRef.current.keys())[0];
+        return firstKey ?? '';
+    }, [
+        value,
+        activeValue
+    ]);
+    return /*#__PURE__*/ _jsx(TabsContext.Provider, {
+        value: {
+            activeValue: resolvedActiveValue,
+            handleValueChange: handleValueChange,
+            registerTrigger,
+            getTriggerElement,
+            getAllTriggerValues
+        },
+        children: /*#__PURE__*/ _jsx("div", {
+            "data-slot": "tabs",
+            className: cn('flex flex-col gap-2', className),
+            ...props,
+            children: children
+        })
+    });
+}
+function TabsList({ children, className, activeClassName, transition = {
+    type: 'spring',
+    stiffness: 400,
+    damping: 30
+}, ...props }) {
+    const { activeValue, getTriggerElement } = useTabs();
+    const [indicatorStyle, setIndicatorStyle] = useState(null);
+    const listRef = useRef(null);
+    const updateIndicator = useCallback(()=>{
+        const activeTrigger = getTriggerElement(activeValue);
+        if (activeTrigger && listRef.current) {
+            const listRect = listRef.current.getBoundingClientRect();
+            const triggerRect = activeTrigger.getBoundingClientRect();
+            setIndicatorStyle({
+                left: triggerRect.left - listRect.left,
+                width: triggerRect.width
+            });
+        }
+    }, [
+        activeValue,
+        getTriggerElement
+    ]);
+    useEffect(()=>{
+        const debouncedUpdate = debounce(updateIndicator, 100);
+        window.addEventListener('resize', debouncedUpdate);
+        requestAnimationFrame(updateIndicator);
+        return ()=>{
+            window.removeEventListener('resize', debouncedUpdate);
+        };
+    }, [
+        updateIndicator
+    ]);
+    return /*#__PURE__*/ _jsxs("div", {
+        ref: listRef,
+        role: "tablist",
+        "data-slot": "tabs-list",
+        className: cn('relative inline-flex items-center gap-8', className),
+        ...props,
+        children: [
+            children,
+            indicatorStyle && /*#__PURE__*/ _jsx(motion.div, {
+                className: cn('absolute bottom-0 h-2 bg-foreground-highlight-interactive', activeClassName),
+                initial: false,
+                animate: {
+                    left: indicatorStyle.left,
+                    width: indicatorStyle.width
+                },
+                transition: transition
+            })
+        ]
+    });
+}
+const TabsTrigger = /*#__PURE__*/ forwardRef(({ value, children, className, onKeyDown, ...props }, ref)=>{
+    const { activeValue, handleValueChange, registerTrigger, getAllTriggerValues, getTriggerElement } = useTabs();
+    const localRef = useRef(null);
+    useImperativeHandle(ref, ()=>localRef.current);
+    useEffect(()=>{
+        registerTrigger(value, localRef.current);
+        return ()=>registerTrigger(value, null);
+    }, [
+        value,
+        registerTrigger
+    ]);
+    const isActive = activeValue === value;
+    const handleKeyDown = useCallback((event)=>{
+        onKeyDown?.(event);
+        const allValues = getAllTriggerValues();
+        const currentIndex = allValues.indexOf(value);
+        if (currentIndex === -1) return;
+        let targetIndex = currentIndex;
+        let shouldPreventDefault = true;
+        switch(event.key){
+            case 'ArrowLeft':
+                {
+                    targetIndex = currentIndex > 0 ? currentIndex - 1 : allValues.length - 1;
+                    break;
+                }
+            case 'ArrowRight':
+                {
+                    targetIndex = currentIndex < allValues.length - 1 ? currentIndex + 1 : 0;
+                    break;
+                }
+            case 'Home':
+                {
+                    targetIndex = 0;
+                    break;
+                }
+            case 'End':
+                {
+                    targetIndex = allValues.length - 1;
+                    break;
+                }
+            default:
+                {
+                    shouldPreventDefault = false;
+                    return;
+                }
+        }
+        if (shouldPreventDefault) {
+            event.preventDefault();
+            const targetValue = allValues[targetIndex];
+            if (targetValue) {
+                handleValueChange(targetValue);
+                const targetElement = getTriggerElement(targetValue);
+                targetElement?.focus();
+            }
+        }
+    }, [
+        value,
+        getAllTriggerValues,
+        getTriggerElement,
+        handleValueChange,
+        onKeyDown
+    ]);
+    return /*#__PURE__*/ _jsx(motion.button, {
+        ref: localRef,
+        "data-slot": "tabs-trigger",
+        role: "tab",
+        tabIndex: isActive ? 0 : -1,
+        whileTap: {
+            scale: 0.95
+        },
+        onClick: ()=>handleValueChange(value),
+        onKeyDown: handleKeyDown,
+        "data-state": isActive ? 'active' : 'inactive',
+        "aria-selected": isActive,
+        "aria-controls": `tabpanel-${value}`,
+        id: `tab-${value}`,
+        className: cn('relative inline-flex cursor-pointer items-center justify-center whitespace-nowrap px-0 py-10 text-sm font-medium transition-colors outline-none focus-visible:shadow-border-interactive-with-active focus-visible:rounded-2 disabled:pointer-events-none disabled:opacity-50', isActive ? 'text-foreground-neutral-base' : 'text-foreground-neutral-muted', className),
+        ...props,
+        children: children
+    });
+});
+TabsTrigger.displayName = 'TabsTrigger';
+function TabsContents({ children, className, ...props }) {
+    const { activeValue } = useTabs();
+    const childrenArray = Children.toArray(children);
+    const activeChild = childrenArray.find((child)=>/*#__PURE__*/ isValidElement(child) && typeof child.props === 'object' && child.props !== null && 'value' in child.props && child.props.value === activeValue);
+    return /*#__PURE__*/ _jsx("div", {
+        "data-slot": "tabs-contents",
+        className: cn(className),
+        ...props,
+        children: activeChild
+    });
+}
+function TabsContent({ children, value, className, ...props }) {
+    const { activeValue } = useTabs();
+    const isActive = activeValue === value;
+    if (!isActive) {
+        return null;
+    }
+    return /*#__PURE__*/ _jsx("div", {
+        role: "tabpanel",
+        "data-slot": "tabs-content",
+        "aria-labelledby": `tab-${value}`,
+        className: cn(className),
+        ...props,
+        children: children
+    });
+}
+export { Tabs, TabsList, TabsTrigger, TabsContents, TabsContent, useTabs };
+
+//# sourceMappingURL=tabs.js.map

package/dist/components/tabs/tabs.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/tabs/tabs.tsx"],"sourcesContent":["import {type HTMLMotionProps, motion, type Transition} from 'framer-motion';\nimport {\n  Children,\n  type ComponentProps,\n  createContext,\n  forwardRef,\n  isValidElement,\n  type ReactElement,\n  type ReactNode,\n  useCallback,\n  useContext,\n  useEffect,\n  useImperativeHandle,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport {cn} from 'utils/cn';\nimport {debounce} from 'utils/debounce';\n\ntype TabsContextType<T extends string = string> = {\n  activeValue: T;\n  handleValueChange: (value: T) => void;\n  registerTrigger: (value: string, node: HTMLElement | null) => void;\n  getTriggerElement: (value: string) => HTMLElement | undefined;\n  getAllTriggerValues: () => string[];\n};\n\nconst TabsContext = createContext<TabsContextType<string> | undefined>(undefined);\n\nfunction useTabs<T extends string = string>(): TabsContextType<T> {\n  const context = useContext(TabsContext);\n  if (!context) {\n    throw new Error('useTabs must be used within a Tabs component');\n  }\n  return context as unknown as TabsContextType<T>;\n}\n\ntype BaseTabsProps = ComponentProps<'div'> & {\n  children: ReactNode;\n};\n\ntype UnControlledTabsProps<T extends string = string> = BaseTabsProps & {\n  defaultValue?: T;\n  value?: never;\n  onValueChange?: never;\n};\n\ntype ControlledTabsProps<T extends string = string> = BaseTabsProps & {\n  value: T;\n  onValueChange?: (value: T) => void;\n  defaultValue?: never;\n};\n\ntype TabsProps<T extends string = string> = UnControlledTabsProps<T> | ControlledTabsProps<T>;\n\nfunction Tabs<T extends string = string>({\n  defaultValue,\n  value,\n  onValueChange,\n  children,\n  className,\n  ...props\n}: TabsProps<T>) {\n  const [activeValue, setActiveValue] = useState<T | undefined>(defaultValue ?? undefined);\n  const triggersRef = useRef(new Map<string, HTMLElement>());\n  const initialSet = useRef(false);\n  const isControlled = value !== undefined;\n\n  useEffect(() => {\n    if (\n      !isControlled &&\n      activeValue === undefined &&\n      triggersRef.current.size > 0 &&\n      !initialSet.current\n    ) {\n      const firstTab = Array.from(triggersRef.current.keys())[0];\n      setActiveValue(firstTab as T);\n      initialSet.current = true;\n    }\n  }, [activeValue, isControlled]);\n\n  const registerTrigger = useCallback(\n    (value: string, node: HTMLElement | null) => {\n      if (node) {\n        triggersRef.current.set(value, node);\n        if (!isControlled && activeValue === undefined && !initialSet.current) {\n          setActiveValue(value as T);\n          initialSet.current = true;\n        }\n      } else {\n        triggersRef.current.delete(value);\n      }\n    },\n    [isControlled, activeValue],\n  );\n\n  const handleValueChange = useCallback(\n    (val: T) => {\n      if (!isControlled) setActiveValue(val);\n      else onValueChange?.(val);\n    },\n    [isControlled, onValueChange],\n  );\n\n  const getTriggerElement = useCallback((val: string) => {\n    return triggersRef.current.get(val);\n  }, []);\n\n  const getAllTriggerValues = useCallback(() => {\n    return Array.from(triggersRef.current.keys());\n  }, []);\n\n  const resolvedActiveValue: T = useMemo(() => {\n    if (value !== undefined) return value;\n    if (activeValue !== undefined) return activeValue;\n    const firstKey = Array.from(triggersRef.current.keys())[0];\n    return (firstKey ?? '') as T;\n  }, [value, activeValue]);\n\n  return (\n    <TabsContext.Provider\n      value={{\n        activeValue: resolvedActiveValue as string,\n        handleValueChange: handleValueChange as (value: string) => void,\n        registerTrigger,\n        getTriggerElement,\n        getAllTriggerValues,\n      }}\n    >\n      <div\n        data-slot=\"tabs\"\n        className={cn('flex flex-col gap-2', className)}\n        {...(props as ComponentProps<'div'>)}\n      >\n        {children}\n      </div>\n    </TabsContext.Provider>\n  );\n}\n\ntype TabsListProps = ComponentProps<'div'> & {\n  children: ReactNode;\n  activeClassName?: string;\n  transition?: Transition;\n};\n\nfunction TabsList({\n  children,\n  className,\n  activeClassName,\n  transition = {\n    type: 'spring',\n    stiffness: 400,\n    damping: 30,\n  },\n  ...props\n}: TabsListProps) {\n  const {activeValue, getTriggerElement} = useTabs();\n  const [indicatorStyle, setIndicatorStyle] = useState<{\n    left: number;\n    width: number;\n  } | null>(null);\n  const listRef = useRef<HTMLDivElement>(null);\n\n  const updateIndicator = useCallback(() => {\n    const activeTrigger = getTriggerElement(activeValue);\n\n    if (activeTrigger && listRef.current) {\n      const listRect = listRef.current.getBoundingClientRect();\n      const triggerRect = activeTrigger.getBoundingClientRect();\n      setIndicatorStyle({\n        left: triggerRect.left - listRect.left,\n        width: triggerRect.width,\n      });\n    }\n  }, [activeValue, getTriggerElement]);\n\n  useEffect(() => {\n    const debouncedUpdate = debounce(updateIndicator, 100);\n    window.addEventListener('resize', debouncedUpdate);\n    requestAnimationFrame(updateIndicator);\n\n    return () => {\n      window.removeEventListener('resize', debouncedUpdate);\n    };\n  }, [updateIndicator]);\n\n  return (\n    <div\n      ref={listRef}\n      role=\"tablist\"\n      data-slot=\"tabs-list\"\n      className={cn('relative inline-flex items-center gap-8', className)}\n      {...(props as ComponentProps<'div'>)}\n    >\n      {children}\n      {indicatorStyle && (\n        <motion.div\n          className={cn(\n            'absolute bottom-0 h-2 bg-foreground-highlight-interactive',\n            activeClassName,\n          )}\n          initial={false}\n          animate={{\n            left: indicatorStyle.left,\n            width: indicatorStyle.width,\n          }}\n          transition={transition}\n        />\n      )}\n    </div>\n  );\n}\n\ntype TabsTriggerProps = Omit<HTMLMotionProps<'button'>, 'ref'> & {\n  value: string;\n  children: ReactNode;\n};\n\nconst TabsTrigger = forwardRef<HTMLButtonElement, TabsTriggerProps>(\n  ({value, children, className, onKeyDown, ...props}, ref) => {\n    const {\n      activeValue,\n      handleValueChange,\n      registerTrigger,\n      getAllTriggerValues,\n      getTriggerElement,\n    } = useTabs();\n\n    const localRef = useRef<HTMLButtonElement | null>(null);\n    useImperativeHandle(ref, () => localRef.current as HTMLButtonElement);\n\n    useEffect(() => {\n      registerTrigger(value, localRef.current);\n      return () => registerTrigger(value, null);\n    }, [value, registerTrigger]);\n\n    const isActive = activeValue === value;\n\n    const handleKeyDown = useCallback(\n      (event: React.KeyboardEvent<HTMLButtonElement>) => {\n        onKeyDown?.(event);\n\n        const allValues = getAllTriggerValues();\n        const currentIndex = allValues.indexOf(value);\n\n        if (currentIndex === -1) return;\n\n        let targetIndex = currentIndex;\n        let shouldPreventDefault = true;\n\n        switch (event.key) {\n          case 'ArrowLeft': {\n            targetIndex = currentIndex > 0 ? currentIndex - 1 : allValues.length - 1;\n            break;\n          }\n          case 'ArrowRight': {\n            targetIndex = currentIndex < allValues.length - 1 ? currentIndex + 1 : 0;\n            break;\n          }\n          case 'Home': {\n            targetIndex = 0;\n            break;\n          }\n          case 'End': {\n            targetIndex = allValues.length - 1;\n            break;\n          }\n          default: {\n            shouldPreventDefault = false;\n            return;\n          }\n        }\n\n        if (shouldPreventDefault) {\n          event.preventDefault();\n          const targetValue = allValues[targetIndex];\n          if (targetValue) {\n            handleValueChange(targetValue);\n            const targetElement = getTriggerElement(targetValue);\n            targetElement?.focus();\n          }\n        }\n      },\n      [value, getAllTriggerValues, getTriggerElement, handleValueChange, onKeyDown],\n    );\n\n    return (\n      <motion.button\n        ref={localRef}\n        data-slot=\"tabs-trigger\"\n        role=\"tab\"\n        tabIndex={isActive ? 0 : -1}\n        whileTap={{scale: 0.95}}\n        onClick={() => handleValueChange(value)}\n        onKeyDown={handleKeyDown}\n        data-state={isActive ? 'active' : 'inactive'}\n        aria-selected={isActive}\n        aria-controls={`tabpanel-${value}`}\n        id={`tab-${value}`}\n        className={cn(\n          'relative inline-flex cursor-pointer items-center justify-center whitespace-nowrap px-0 py-10 text-sm font-medium transition-colors outline-none focus-visible:shadow-border-interactive-with-active focus-visible:rounded-2 disabled:pointer-events-none disabled:opacity-50',\n          isActive ? 'text-foreground-neutral-base' : 'text-foreground-neutral-muted',\n          className,\n        )}\n        {...props}\n      >\n        {children}\n      </motion.button>\n    );\n  },\n);\n\nTabsTrigger.displayName = 'TabsTrigger';\n\ntype TabsContentsProps = ComponentProps<'div'> & {\n  children: ReactNode;\n};\n\nfunction TabsContents({children, className, ...props}: TabsContentsProps) {\n  const {activeValue} = useTabs();\n  const childrenArray = Children.toArray(children);\n\n  const activeChild = childrenArray.find(\n    (child): child is ReactElement<{value: string}> =>\n      isValidElement(child) &&\n      typeof child.props === 'object' &&\n      child.props !== null &&\n      'value' in child.props &&\n      child.props.value === activeValue,\n  );\n\n  return (\n    <div data-slot=\"tabs-contents\" className={cn(className)} {...(props as ComponentProps<'div'>)}>\n      {activeChild}\n    </div>\n  );\n}\n\ntype TabsContentProps = ComponentProps<'div'> & {\n  value: string;\n  children: ReactNode;\n};\n\nfunction TabsContent({children, value, className, ...props}: TabsContentProps) {\n  const {activeValue} = useTabs();\n  const isActive = activeValue === value;\n\n  if (!isActive) {\n    return null;\n  }\n\n  return (\n    <div\n      role=\"tabpanel\"\n      data-slot=\"tabs-content\"\n      aria-labelledby={`tab-${value}`}\n      className={cn(className)}\n      {...props}\n    >\n      {children}\n    </div>\n  );\n}\n\nexport {\n  Tabs,\n  TabsList,\n  TabsTrigger,\n  TabsContents,\n  TabsContent,\n  useTabs,\n  type TabsContextType,\n  type TabsProps,\n  type TabsListProps,\n  type TabsTriggerProps,\n  type TabsContentsProps,\n  type TabsContentProps,\n};\n"],"names":["motion","Children","createContext","forwardRef","isValidElement","useCallback","useContext","useEffect","useImperativeHandle","useMemo","useRef","useState","cn","debounce","TabsContext","undefined","useTabs","context","Error","Tabs","defaultValue","value","onValueChange","children","className","props","activeValue","setActiveValue","triggersRef","Map","initialSet","isControlled","current","size","firstTab","Array","from","keys","registerTrigger","node","set","delete","handleValueChange","val","getTriggerElement","get","getAllTriggerValues","resolvedActiveValue","firstKey","Provider","div","data-slot","TabsList","activeClassName","transition","type","stiffness","damping","indicatorStyle","setIndicatorStyle","listRef","updateIndicator","activeTrigger","listRect","getBoundingClientRect","triggerRect","left","width","debouncedUpdate","window","addEventListener","requestAnimationFrame","removeEventListener","ref","role","initial","animate","TabsTrigger","onKeyDown","localRef","isActive","handleKeyDown","event","allValues","currentIndex","indexOf","targetIndex","shouldPreventDefault","key","length","preventDefault","targetValue","targetElement","focus","button","tabIndex","whileTap","scale","onClick","data-state","aria-selected","aria-controls","id","displayName","TabsContents","childrenArray","toArray","activeChild","find","child","TabsContent","aria-labelledby"],"mappings":"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"}

package/dist/components/tabs/tabs.stories.js

@@ -0,0 +1,179 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Tabs, TabsContent, TabsContents, TabsList, TabsTrigger } from './index.js';
+const meta = {
+    title: 'Components/Tabs',
+    component: Tabs,
+    parameters: {
+        layout: 'centered'
+    },
+    tags: [
+        'autodocs'
+    ]
+};
+export default meta;
+export const Default = {
+    args: {
+        defaultValue: 'analytics'
+    },
+    render: ()=>/*#__PURE__*/ _jsx("div", {
+            className: "bg-background-neutral-background p-24 w-[80vw]",
+            children: /*#__PURE__*/ _jsx(Tabs, {
+                defaultValue: "analytics",
+                children: /*#__PURE__*/ _jsxs(TabsList, {
+                    className: "gap-12 border-b border-neutral-strong",
+                    children: [
+                        /*#__PURE__*/ _jsx(TabsTrigger, {
+                            value: "analytics",
+                            children: "Analytics"
+                        }),
+                        /*#__PURE__*/ _jsx(TabsTrigger, {
+                            value: "jobs",
+                            children: "Jobs"
+                        })
+                    ]
+                })
+            })
+        })
+};
+export const Controlled = {
+    args: {
+        value: 'analytics',
+        onValueChange: ()=>undefined
+    },
+    render: ()=>{
+        const [value, setValue] = useState('analytics');
+        return /*#__PURE__*/ _jsx("div", {
+            className: "bg-background-neutral-background p-24 w-[80vw]",
+            children: /*#__PURE__*/ _jsxs(Tabs, {
+                value: value,
+                onValueChange: setValue,
+                children: [
+                    /*#__PURE__*/ _jsxs(TabsList, {
+                        className: "gap-12 border-b border-neutral-strong",
+                        children: [
+                            /*#__PURE__*/ _jsx(TabsTrigger, {
+                                value: "analytics",
+                                children: "Analytics"
+                            }),
+                            /*#__PURE__*/ _jsx(TabsTrigger, {
+                                value: "jobs",
+                                children: "Jobs"
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ _jsxs(TabsContents, {
+                        children: [
+                            /*#__PURE__*/ _jsx(TabsContent, {
+                                value: "analytics",
+                                children: /*#__PURE__*/ _jsx("div", {
+                                    className: "py-16",
+                                    children: /*#__PURE__*/ _jsxs("p", {
+                                        className: "text-foreground-neutral-base",
+                                        children: [
+                                            "Analytics content - Current value: ",
+                                            value
+                                        ]
+                                    })
+                                })
+                            }),
+                            /*#__PURE__*/ _jsx(TabsContent, {
+                                value: "jobs",
+                                children: /*#__PURE__*/ _jsx("div", {
+                                    className: "py-16",
+                                    children: /*#__PURE__*/ _jsxs("p", {
+                                        className: "text-foreground-neutral-base",
+                                        children: [
+                                            "Jobs content - Current value: ",
+                                            value
+                                        ]
+                                    })
+                                })
+                            })
+                        ]
+                    })
+                ]
+            })
+        });
+    }
+};
+export const MultipleTabs = {
+    args: {
+        defaultValue: 'tab1'
+    },
+    render: ()=>/*#__PURE__*/ _jsx("div", {
+            className: "bg-background-neutral-background p-24 w-[80vw]",
+            children: /*#__PURE__*/ _jsxs(Tabs, {
+                defaultValue: "tab1",
+                children: [
+                    /*#__PURE__*/ _jsxs(TabsList, {
+                        className: "gap-12 border-b border-neutral-strong",
+                        children: [
+                            /*#__PURE__*/ _jsx(TabsTrigger, {
+                                value: "tab1",
+                                children: "Tab 1"
+                            }),
+                            /*#__PURE__*/ _jsx(TabsTrigger, {
+                                value: "tab2",
+                                children: "Tab 2"
+                            }),
+                            /*#__PURE__*/ _jsx(TabsTrigger, {
+                                value: "tab3",
+                                children: "Tab 3"
+                            }),
+                            /*#__PURE__*/ _jsx(TabsTrigger, {
+                                value: "tab4",
+                                children: "Tab 4"
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ _jsxs(TabsContents, {
+                        children: [
+                            /*#__PURE__*/ _jsx(TabsContent, {
+                                value: "tab1",
+                                children: /*#__PURE__*/ _jsx("div", {
+                                    className: "py-16",
+                                    children: /*#__PURE__*/ _jsx("p", {
+                                        className: "text-foreground-neutral-base",
+                                        children: "Content for Tab 1"
+                                    })
+                                })
+                            }),
+                            /*#__PURE__*/ _jsx(TabsContent, {
+                                value: "tab2",
+                                children: /*#__PURE__*/ _jsx("div", {
+                                    className: "py-16",
+                                    children: /*#__PURE__*/ _jsx("p", {
+                                        className: "text-foreground-neutral-base",
+                                        children: "Content for Tab 2"
+                                    })
+                                })
+                            }),
+                            /*#__PURE__*/ _jsx(TabsContent, {
+                                value: "tab3",
+                                children: /*#__PURE__*/ _jsx("div", {
+                                    className: "py-16",
+                                    children: /*#__PURE__*/ _jsx("p", {
+                                        className: "text-foreground-neutral-base",
+                                        children: "Content for Tab 3"
+                                    })
+                                })
+                            }),
+                            /*#__PURE__*/ _jsx(TabsContent, {
+                                value: "tab4",
+                                children: /*#__PURE__*/ _jsx("div", {
+                                    className: "py-16",
+                                    children: /*#__PURE__*/ _jsx("p", {
+                                        className: "text-foreground-neutral-base",
+                                        children: "Content for Tab 4"
+                                    })
+                                })
+                            })
+                        ]
+                    })
+                ]
+            })
+        })
+};
+
+//# sourceMappingURL=tabs.stories.js.map

package/dist/components/tabs/tabs.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/tabs/tabs.stories.tsx"],"sourcesContent":["import type {Meta, StoryObj} from '@storybook/react';\nimport {useState} from 'react';\nimport {Tabs, TabsContent, TabsContents, TabsList, TabsTrigger} from '.';\n\nconst meta = {\n  title: 'Components/Tabs',\n  component: Tabs,\n  parameters: {\n    layout: 'centered',\n  },\n  tags: ['autodocs'],\n} satisfies Meta<typeof Tabs>;\n\nexport default meta;\ntype Story = StoryObj<typeof meta>;\n\nexport const Default: Story = {\n  args: {defaultValue: 'analytics'} as never,\n  render: () => (\n    <div className=\"bg-background-neutral-background p-24 w-[80vw]\">\n      <Tabs defaultValue=\"analytics\">\n        <TabsList className=\"gap-12 border-b border-neutral-strong\">\n          <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          <TabsTrigger value=\"jobs\">Jobs</TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </div>\n  ),\n};\n\nexport const Controlled: Story = {\n  args: {value: 'analytics', onValueChange: () => undefined} as never,\n  render: () => {\n    const [value, setValue] = useState('analytics');\n    return (\n      <div className=\"bg-background-neutral-background p-24 w-[80vw]\">\n        <Tabs value={value} onValueChange={setValue}>\n          <TabsList className=\"gap-12 border-b border-neutral-strong\">\n            <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n            <TabsTrigger value=\"jobs\">Jobs</TabsTrigger>\n          </TabsList>\n          <TabsContents>\n            <TabsContent value=\"analytics\">\n              <div className=\"py-16\">\n                <p className=\"text-foreground-neutral-base\">\n                  Analytics content - Current value: {value}\n                </p>\n              </div>\n            </TabsContent>\n            <TabsContent value=\"jobs\">\n              <div className=\"py-16\">\n                <p className=\"text-foreground-neutral-base\">\n                  Jobs content - Current value: {value}\n                </p>\n              </div>\n            </TabsContent>\n          </TabsContents>\n        </Tabs>\n      </div>\n    );\n  },\n};\n\nexport const MultipleTabs: Story = {\n  args: {defaultValue: 'tab1'} as never,\n  render: () => (\n    <div className=\"bg-background-neutral-background p-24 w-[80vw]\">\n      <Tabs defaultValue=\"tab1\">\n        <TabsList className=\"gap-12 border-b border-neutral-strong\">\n          <TabsTrigger value=\"tab1\">Tab 1</TabsTrigger>\n          <TabsTrigger value=\"tab2\">Tab 2</TabsTrigger>\n          <TabsTrigger value=\"tab3\">Tab 3</TabsTrigger>\n          <TabsTrigger value=\"tab4\">Tab 4</TabsTrigger>\n        </TabsList>\n        <TabsContents>\n          <TabsContent value=\"tab1\">\n            <div className=\"py-16\">\n              <p className=\"text-foreground-neutral-base\">Content for Tab 1</p>\n            </div>\n          </TabsContent>\n          <TabsContent value=\"tab2\">\n            <div className=\"py-16\">\n              <p className=\"text-foreground-neutral-base\">Content for Tab 2</p>\n            </div>\n          </TabsContent>\n          <TabsContent value=\"tab3\">\n            <div className=\"py-16\">\n              <p className=\"text-foreground-neutral-base\">Content for Tab 3</p>\n            </div>\n          </TabsContent>\n          <TabsContent value=\"tab4\">\n            <div className=\"py-16\">\n              <p className=\"text-foreground-neutral-base\">Content for Tab 4</p>\n            </div>\n          </TabsContent>\n        </TabsContents>\n      </Tabs>\n    </div>\n  ),\n};\n"],"names":["useState","Tabs","TabsContent","TabsContents","TabsList","TabsTrigger","meta","title","component","parameters","layout","tags","Default","args","defaultValue","render","div","className","value","Controlled","onValueChange","undefined","setValue","p","MultipleTabs"],"mappings":";AACA,SAAQA,QAAQ,QAAO,QAAQ;AAC/B,SAAQC,IAAI,EAAEC,WAAW,EAAEC,YAAY,EAAEC,QAAQ,EAAEC,WAAW,QAAO,IAAI;AAEzE,MAAMC,OAAO;IACXC,OAAO;IACPC,WAAWP;IACXQ,YAAY;QACVC,QAAQ;IACV;IACAC,MAAM;QAAC;KAAW;AACpB;AAEA,eAAeL,KAAK;AAGpB,OAAO,MAAMM,UAAiB;IAC5BC,MAAM;QAACC,cAAc;IAAW;IAChCC,QAAQ,kBACN,KAACC;YAAIC,WAAU;sBACb,cAAA,KAAChB;gBAAKa,cAAa;0BACjB,cAAA,MAACV;oBAASa,WAAU;;sCAClB,KAACZ;4BAAYa,OAAM;sCAAY;;sCAC/B,KAACb;4BAAYa,OAAM;sCAAO;;;;;;AAKpC,EAAE;AAEF,OAAO,MAAMC,aAAoB;IAC/BN,MAAM;QAACK,OAAO;QAAaE,eAAe,IAAMC;IAAS;IACzDN,QAAQ;QACN,MAAM,CAACG,OAAOI,SAAS,GAAGtB,SAAS;QACnC,qBACE,KAACgB;YAAIC,WAAU;sBACb,cAAA,MAAChB;gBAAKiB,OAAOA;gBAAOE,eAAeE;;kCACjC,MAAClB;wBAASa,WAAU;;0CAClB,KAACZ;gCAAYa,OAAM;0CAAY;;0CAC/B,KAACb;gCAAYa,OAAM;0CAAO;;;;kCAE5B,MAACf;;0CACC,KAACD;gCAAYgB,OAAM;0CACjB,cAAA,KAACF;oCAAIC,WAAU;8CACb,cAAA,MAACM;wCAAEN,WAAU;;4CAA+B;4CACNC;;;;;0CAI1C,KAAChB;gCAAYgB,OAAM;0CACjB,cAAA,KAACF;oCAAIC,WAAU;8CACb,cAAA,MAACM;wCAAEN,WAAU;;4CAA+B;4CACXC;;;;;;;;;;IAQ/C;AACF,EAAE;AAEF,OAAO,MAAMM,eAAsB;IACjCX,MAAM;QAACC,cAAc;IAAM;IAC3BC,QAAQ,kBACN,KAACC;YAAIC,WAAU;sBACb,cAAA,MAAChB;gBAAKa,cAAa;;kCACjB,MAACV;wBAASa,WAAU;;0CAClB,KAACZ;gCAAYa,OAAM;0CAAO;;0CAC1B,KAACb;gCAAYa,OAAM;0CAAO;;0CAC1B,KAACb;gCAAYa,OAAM;0CAAO;;0CAC1B,KAACb;gCAAYa,OAAM;0CAAO;;;;kCAE5B,MAACf;;0CACC,KAACD;gCAAYgB,OAAM;0CACjB,cAAA,KAACF;oCAAIC,WAAU;8CACb,cAAA,KAACM;wCAAEN,WAAU;kDAA+B;;;;0CAGhD,KAACf;gCAAYgB,OAAM;0CACjB,cAAA,KAACF;oCAAIC,WAAU;8CACb,cAAA,KAACM;wCAAEN,WAAU;kDAA+B;;;;0CAGhD,KAACf;gCAAYgB,OAAM;0CACjB,cAAA,KAACF;oCAAIC,WAAU;8CACb,cAAA,KAACM;wCAAEN,WAAU;kDAA+B;;;;0CAGhD,KAACf;gCAAYgB,OAAM;0CACjB,cAAA,KAACF;oCAAIC,WAAU;8CACb,cAAA,KAACM;wCAAEN,WAAU;kDAA+B;;;;;;;;;AAO1D,EAAE"}

package/dist/components/toast/index.d.ts

@@ -1,3 +1,3 @@
-export { Toaster, type ToasterProps, toast } from './toast';
-export { ToastCustom, type ToastCustomProps } from './toast-custom';
+export * from './toast';
+export * from './toast-custom';
 //# sourceMappingURL=index.d.ts.map

package/dist/components/toast/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/toast/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,OAAO,EAAE,KAAK,YAAY,EAAE,KAAK,EAAC,MAAM,SAAS,CAAC;AAC1D,OAAO,EAAC,WAAW,EAAE,KAAK,gBAAgB,EAAC,MAAM,gBAAgB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/toast/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,cAAc,gBAAgB,CAAC"}

package/dist/components/toast/index.js

@@ -1,4 +1,4 @@
-export { Toaster, toast } from './toast.js';
-export { ToastCustom } from './toast-custom.js';
+export * from './toast.js';
+export * from './toast-custom.js';
 
 //# sourceMappingURL=index.js.map

package/dist/components/toast/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/toast/index.ts"],"sourcesContent":["export {Toaster, type ToasterProps, toast} from './toast';\nexport {ToastCustom, type ToastCustomProps} from './toast-custom';\n"],"names":["Toaster","toast","ToastCustom"],"mappings":"AAAA,SAAQA,OAAO,EAAqBC,KAAK,QAAO,UAAU;AAC1D,SAAQC,WAAW,QAA8B,iBAAiB"}
+{"version":3,"sources":["../../../src/components/toast/index.ts"],"sourcesContent":["export * from './toast';\nexport * from './toast-custom';\n"],"names":[],"mappings":"AAAA,cAAc,UAAU;AACxB,cAAc,iBAAiB"}