@kimdw-rtk/ui 0.1.17 → 0.1.19

package/dist/components/Tabs/Tabs.cjs

@@ -4,12 +4,23 @@
 var jsxRuntime = require('react/jsx-runtime');
 var react = require('react');
 var clsx = require('../../node_modules/.pnpm/clsx@2.1.1/node_modules/clsx/dist/clsx.cjs');
+var Tabs_css = require('./Tabs.css.vanilla.cjs');
 var TabsProvider = require('./TabsProvider.cjs');
 var sx = require('../../styles/sx.cjs');
 
-const Tabs = react.forwardRef(({ children, defaultValue, className, sx: propSx, ...props }, ref) => {
-    const [value, setValue] = react.useReducer(TabsProvider.tabsReducer, defaultValue);
-    return (jsxRuntime.jsx(TabsProvider.TabsContext.Provider, { value: { value, setValue }, children: jsxRuntime.jsx("div", { ref: ref, className: clsx.clsx(className, sx.sx(propSx)), style: { width: '100%' }, ...props, children: children }) }));
+const Tabs = react.forwardRef(({ children, defaultValue, className, sx: propSx, size = 'md', ...props }, ref) => {
+    const [state, dispatch] = react.useReducer(TabsProvider.tabsReducer, {
+        value: defaultValue,
+        selectedElement: undefined,
+    });
+    const selectTab = (value, selectedElement) => {
+        dispatch({ type: 'SELECT_TAB', value, selectedElement });
+    };
+    return (jsxRuntime.jsx(TabsProvider.TabsContext.Provider, { value: {
+            value: state.value,
+            selectedElement: state.selectedElement,
+            selectTab,
+        }, children: jsxRuntime.jsx("div", { ref: ref, className: clsx.clsx(Tabs_css.tabs({ size }), className, sx.sx(propSx)), ...props, children: children }) }));
 });
 Tabs.displayName = 'Tabs';
 

package/dist/components/Tabs/Tabs.css.d.ts

@@ -0,0 +1,14 @@
+export declare const tabs: import("@vanilla-extract/recipes").RuntimeFn<{
+    size: {
+        sm: {
+            fontSize: "0.875rem";
+        };
+        md: {
+            fontSize: "1rem";
+        };
+        lg: {
+            fontSize: "1.125rem";
+        };
+    };
+}>;
+//# sourceMappingURL=Tabs.css.d.ts.map

package/dist/components/Tabs/Tabs.css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tabs.css.d.ts","sourceRoot":"","sources":["../../../src/components/Tabs/Tabs.css.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,IAAI;;;;;;;;;;;;EAmBf,CAAC"}

package/dist/components/Tabs/Tabs.css.ts.vanilla.css

@@ -0,0 +1,15 @@
+@layer components;
+@layer components {
+  .Tabs_layeredBase__sdjk9u0 {
+    width: 100%;
+  }
+  .Tabs_styleWithLayer__sdjk9u1 {
+    font-size: 0.875rem;
+  }
+  .Tabs_styleWithLayer__sdjk9u2 {
+    font-size: 1rem;
+  }
+  .Tabs_styleWithLayer__sdjk9u3 {
+    font-size: 1.125rem;
+  }
+}

package/dist/components/Tabs/Tabs.css.vanilla.cjs

@@ -0,0 +1,11 @@
+'use strict';
+
+require('./../../styles/layers.css.ts.vanilla.css');
+require('./../../styles/sprinkles.css.ts.vanilla.css');
+require('./../../styles/globalStyle.css.ts.vanilla.css');
+require('./Tabs.css.ts.vanilla.css');
+var createRuntimeFn62c9670f_esm = require('../../node_modules/.pnpm/@vanilla-extract_recipes@0.5.7_@vanilla-extract_css@1.17.4_babel-plugin-macros@3.1.0_/node_modules/@vanilla-extract/recipes/dist/createRuntimeFn-62c9670f.esm.cjs');
+
+var tabs = createRuntimeFn62c9670f_esm.c({defaultClassName:'Tabs__sdjk9u4 Tabs_layeredBase__sdjk9u0',variantClassNames:{size:{sm:'Tabs_styleWithLayer__sdjk9u1',md:'Tabs_styleWithLayer__sdjk9u2',lg:'Tabs_styleWithLayer__sdjk9u3'}},defaultVariants:{},compoundVariants:[]});
+
+exports.tabs = tabs;

package/dist/components/Tabs/Tabs.css.vanilla.js

@@ -0,0 +1,9 @@
+import './../../styles/layers.css.ts.vanilla.css';
+import './../../styles/sprinkles.css.ts.vanilla.css';
+import './../../styles/globalStyle.css.ts.vanilla.css';
+import './Tabs.css.ts.vanilla.css';
+import { c as createRuntimeFn } from '../../node_modules/.pnpm/@vanilla-extract_recipes@0.5.7_@vanilla-extract_css@1.17.4_babel-plugin-macros@3.1.0_/node_modules/@vanilla-extract/recipes/dist/createRuntimeFn-62c9670f.esm.js';
+
+var tabs = createRuntimeFn({defaultClassName:'Tabs__sdjk9u4 Tabs_layeredBase__sdjk9u0',variantClassNames:{size:{sm:'Tabs_styleWithLayer__sdjk9u1',md:'Tabs_styleWithLayer__sdjk9u2',lg:'Tabs_styleWithLayer__sdjk9u3'}},defaultVariants:{},compoundVariants:[]});
+
+export { tabs };

package/dist/components/Tabs/Tabs.d.ts

@@ -1,5 +1,6 @@
 import type { UIComponent } from '#types';
-interface TabsProps extends UIComponent<'div'> {
+import * as s from './Tabs.css';
+interface TabsProps extends UIComponent<'div', typeof s.tabs> {
     defaultValue?: number | string;
 }
 export declare const Tabs: import("react").ForwardRefExoticComponent<Omit<TabsProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/Tabs/Tabs.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tabs.d.ts","sourceRoot":"","sources":["../../../src/components/Tabs/Tabs.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,QAAQ,CAAC;AAI1C,UAAU,SAAU,SAAQ,WAAW,CAAC,KAAK,CAAC;IAC5C,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CAChC;AAED,eAAO,MAAM,IAAI,mHAiBhB,CAAC"}
+{"version":3,"file":"Tabs.d.ts","sourceRoot":"","sources":["../../../src/components/Tabs/Tabs.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,QAAQ,CAAC;AAE1C,OAAO,KAAK,CAAC,MAAM,YAAY,CAAC;AAGhC,UAAU,SAAU,SAAQ,WAAW,CAAC,KAAK,EAAE,OAAO,CAAC,CAAC,IAAI,CAAC;IAC3D,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CAChC;AAED,eAAO,MAAM,IAAI,mHAmChB,CAAC"}

package/dist/components/Tabs/Tabs.js

@@ -2,12 +2,23 @@
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef, useReducer } from 'react';
 import { clsx } from '../../node_modules/.pnpm/clsx@2.1.1/node_modules/clsx/dist/clsx.js';
+import { tabs } from './Tabs.css.vanilla.js';
 import { tabsReducer, TabsContext } from './TabsProvider.js';
 import { sx } from '../../styles/sx.js';
 
-const Tabs = forwardRef(({ children, defaultValue, className, sx: propSx, ...props }, ref) => {
-    const [value, setValue] = useReducer(tabsReducer, defaultValue);
-    return (jsx(TabsContext.Provider, { value: { value, setValue }, children: jsx("div", { ref: ref, className: clsx(className, sx(propSx)), style: { width: '100%' }, ...props, children: children }) }));
+const Tabs = forwardRef(({ children, defaultValue, className, sx: propSx, size = 'md', ...props }, ref) => {
+    const [state, dispatch] = useReducer(tabsReducer, {
+        value: defaultValue,
+        selectedElement: undefined,
+    });
+    const selectTab = (value, selectedElement) => {
+        dispatch({ type: 'SELECT_TAB', value, selectedElement });
+    };
+    return (jsx(TabsContext.Provider, { value: {
+            value: state.value,
+            selectedElement: state.selectedElement,
+            selectTab,
+        }, children: jsx("div", { ref: ref, className: clsx(tabs({ size }), className, sx(propSx)), ...props, children: children }) }));
 });
 Tabs.displayName = 'Tabs';
 

package/dist/components/Tabs/TabsIndicator.cjs

@@ -0,0 +1,13 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var clsx = require('../../node_modules/.pnpm/clsx@2.1.1/node_modules/clsx/dist/clsx.cjs');
+var TabsIndicator_css = require('./TabsIndicator.css.vanilla.cjs');
+
+const TabsIndicator = react.forwardRef(({ className, ...rest }, ref) => {
+    return jsxRuntime.jsx("div", { ref: ref, className: clsx.clsx(TabsIndicator_css.indicator, className), ...rest });
+});
+TabsIndicator.displayName = 'TabsIndicator';
+
+exports.TabsIndicator = TabsIndicator;

package/dist/components/Tabs/TabsIndicator.css.d.ts

@@ -0,0 +1,2 @@
+export declare const indicator: string;
+//# sourceMappingURL=TabsIndicator.css.d.ts.map

package/dist/components/Tabs/TabsIndicator.css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabsIndicator.css.d.ts","sourceRoot":"","sources":["../../../src/components/Tabs/TabsIndicator.css.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,SAAS,QAiBpB,CAAC"}

package/dist/components/Tabs/TabsIndicator.css.ts.vanilla.css

@@ -0,0 +1,15 @@
+@layer components;
+@layer components {
+  .TabsIndicator_styleWithLayer__1ogqhc0 {
+    position: absolute;
+    left: 0;
+    bottom: 0;
+    width: 100%;
+    height: calc((1em - 0.625rem) / 2);
+    background-color: rgb(var(--color-primary__n6e2fs7));
+    transition: transform 0.25s ease;
+  }
+  .TabsList_isAnimated__9gciwt0 .TabsIndicator_styleWithLayer__1ogqhc0 {
+    display: none;
+  }
+}

package/dist/components/Tabs/TabsIndicator.css.vanilla.cjs

@@ -0,0 +1,11 @@
+'use strict';
+
+require('./../../styles/layers.css.ts.vanilla.css');
+require('./../../styles/sprinkles.css.ts.vanilla.css');
+require('./../../styles/globalStyle.css.ts.vanilla.css');
+require('./TabsList.css.ts.vanilla.css');
+require('./TabsIndicator.css.ts.vanilla.css');
+
+var indicator = 'TabsIndicator_styleWithLayer__1ogqhc0';
+
+exports.indicator = indicator;

package/dist/components/Tabs/TabsIndicator.css.vanilla.js

@@ -0,0 +1,9 @@
+import './../../styles/layers.css.ts.vanilla.css';
+import './../../styles/sprinkles.css.ts.vanilla.css';
+import './../../styles/globalStyle.css.ts.vanilla.css';
+import './TabsList.css.ts.vanilla.css';
+import './TabsIndicator.css.ts.vanilla.css';
+
+var indicator = 'TabsIndicator_styleWithLayer__1ogqhc0';
+
+export { indicator };

package/dist/components/Tabs/TabsIndicator.d.ts

@@ -0,0 +1,4 @@
+export declare const TabsIndicator: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=TabsIndicator.d.ts.map

package/dist/components/Tabs/TabsIndicator.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabsIndicator.d.ts","sourceRoot":"","sources":["../../../src/components/Tabs/TabsIndicator.tsx"],"names":[],"mappings":"AAMA,eAAO,MAAM,aAAa;;0DAKxB,CAAC"}

package/dist/components/Tabs/TabsIndicator.js

@@ -0,0 +1,11 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { clsx } from '../../node_modules/.pnpm/clsx@2.1.1/node_modules/clsx/dist/clsx.js';
+import { indicator } from './TabsIndicator.css.vanilla.js';
+
+const TabsIndicator = forwardRef(({ className, ...rest }, ref) => {
+    return jsx("div", { ref: ref, className: clsx(indicator, className), ...rest });
+});
+TabsIndicator.displayName = 'TabsIndicator';
+
+export { TabsIndicator };

package/dist/components/Tabs/TabsList.cjs

@@ -1,13 +1,47 @@
+"use client";
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
 var react = require('react');
+var utils = require('@kimdw-rtk/utils');
 var clsx = require('../../node_modules/.pnpm/clsx@2.1.1/node_modules/clsx/dist/clsx.cjs');
+var TabsIndicator = require('./TabsIndicator.cjs');
 var TabsList_css = require('./TabsList.css.vanilla.cjs');
+var TabsProvider = require('./TabsProvider.cjs');
 var sx = require('../../styles/sx.cjs');
 
+const baseWidth = 100;
 const TabsList = react.forwardRef(({ children, className, sx: propSx, ...props }, ref) => {
-    return (jsxRuntime.jsx("div", { ref: ref, className: clsx.clsx(className, TabsList_css.container, sx.sx(propSx)), ...props, children: children }));
+    const tabsContext = react.useContext(TabsProvider.TabsContext);
+    const indicatorRef = react.useRef(null);
+    const tabsListRef = utils.useCombinedRefs(ref);
+    if (tabsContext === undefined) {
+        throw new Error('TabsList must be used within a Tabs.');
+    }
+    react.useLayoutEffect(() => {
+        const element = tabsContext.selectedElement, indicator = indicatorRef.current, tabsList = tabsListRef.current;
+        if (!element || !indicator || !tabsList) {
+            return;
+        }
+        const animatedIndicator = () => {
+            const left = element.offsetLeft, width = element.offsetWidth;
+            indicator.style.transformOrigin = '0';
+            indicator.style.transform = `translateX(${left}px) scaleX(${width / baseWidth})`;
+        };
+        indicator.style.display = 'block';
+        animatedIndicator();
+        const handleTransitionEnd = () => {
+            indicator.style.display = 'none';
+            tabsList.classList.remove(TabsList_css.isAnimated);
+        };
+        tabsList.classList.add(TabsList_css.isAnimated);
+        indicator.addEventListener('transitionend', handleTransitionEnd);
+        return () => {
+            animatedIndicator();
+            indicator.removeEventListener('transitionend', handleTransitionEnd);
+        };
+    }, [tabsContext.selectedElement, tabsListRef]);
+    return (jsxRuntime.jsxs("div", { ref: tabsListRef, className: clsx.clsx(className, TabsList_css.container, sx.sx(propSx)), ...props, children: [children, jsxRuntime.jsx(TabsIndicator.TabsIndicator, { ref: indicatorRef, style: { display: 'none', width: `${baseWidth}px` } })] }));
 });
 TabsList.displayName = 'TabsList';
 

package/dist/components/Tabs/TabsList.css.d.ts

@@ -1,2 +1,3 @@
+export declare const isAnimated: string;
 export declare const container: string;
 //# sourceMappingURL=TabsList.css.d.ts.map

package/dist/components/Tabs/TabsList.css.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TabsList.css.d.ts","sourceRoot":"","sources":["../../../src/components/Tabs/TabsList.css.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,SAAS,QAOpB,CAAC"}
+{"version":3,"file":"TabsList.css.d.ts","sourceRoot":"","sources":["../../../src/components/Tabs/TabsList.css.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,UAAU,QAAY,CAAC;AAEpC,eAAO,MAAM,SAAS,QAQpB,CAAC"}

package/dist/components/Tabs/TabsList.css.ts.vanilla.css

@@ -1,9 +1,10 @@
 @layer components;
 @layer components {
-  .TabsList_styleWithLayer__9gciwt0 {
+  .TabsList_styleWithLayer__9gciwt1 {
     display: flex;
+    position: relative;
     height: 2.5em;
-    box-shadow: inset 0 -0.125em 0 rgb(var(--color-muted__n6e2fsb));
+    box-shadow: inset 0 -0.1875em 0 rgb(var(--color-muted__n6e2fsb));
     background-color: rgb(var(--color-background__n6e2fs1));
   }
 }

package/dist/components/Tabs/TabsList.css.vanilla.cjs

@@ -5,6 +5,8 @@ require('./../../styles/sprinkles.css.ts.vanilla.css');
 require('./../../styles/globalStyle.css.ts.vanilla.css');
 require('./TabsList.css.ts.vanilla.css');
 
-var container = 'TabsList_styleWithLayer__9gciwt0';
+var container = 'TabsList_styleWithLayer__9gciwt1';
+var isAnimated = 'TabsList_isAnimated__9gciwt0';
 
 exports.container = container;
+exports.isAnimated = isAnimated;

package/dist/components/Tabs/TabsList.css.vanilla.js

@@ -3,6 +3,7 @@ import './../../styles/sprinkles.css.ts.vanilla.css';
 import './../../styles/globalStyle.css.ts.vanilla.css';
 import './TabsList.css.ts.vanilla.css';
 
-var container = 'TabsList_styleWithLayer__9gciwt0';
+var container = 'TabsList_styleWithLayer__9gciwt1';
+var isAnimated = 'TabsList_isAnimated__9gciwt0';
 
-export { container };
+export { container, isAnimated };

package/dist/components/Tabs/TabsList.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TabsList.d.ts","sourceRoot":"","sources":["../../../src/components/Tabs/TabsList.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,QAAQ,CAAC;AAI1C,KAAK,aAAa,GAAG,WAAW,CAAC,KAAK,CAAC,CAAC;AAExC,eAAO,MAAM,QAAQ,uHAYpB,CAAC"}
+{"version":3,"file":"TabsList.d.ts","sourceRoot":"","sources":["../../../src/components/Tabs/TabsList.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,QAAQ,CAAC;AAM1C,KAAK,aAAa,GAAG,WAAW,CAAC,KAAK,CAAC,CAAC;AAIxC,eAAO,MAAM,QAAQ,uHAyDpB,CAAC"}

package/dist/components/Tabs/TabsList.js

@@ -1,11 +1,45 @@
-import { jsx } from 'react/jsx-runtime';
-import { forwardRef } from 'react';
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { forwardRef, useContext, useRef, useLayoutEffect } from 'react';
+import { useCombinedRefs } from '@kimdw-rtk/utils';
 import { clsx } from '../../node_modules/.pnpm/clsx@2.1.1/node_modules/clsx/dist/clsx.js';
-import { container } from './TabsList.css.vanilla.js';
+import { TabsIndicator } from './TabsIndicator.js';
+import { isAnimated, container } from './TabsList.css.vanilla.js';
+import { TabsContext } from './TabsProvider.js';
 import { sx } from '../../styles/sx.js';
 
+const baseWidth = 100;
 const TabsList = forwardRef(({ children, className, sx: propSx, ...props }, ref) => {
-    return (jsx("div", { ref: ref, className: clsx(className, container, sx(propSx)), ...props, children: children }));
+    const tabsContext = useContext(TabsContext);
+    const indicatorRef = useRef(null);
+    const tabsListRef = useCombinedRefs(ref);
+    if (tabsContext === undefined) {
+        throw new Error('TabsList must be used within a Tabs.');
+    }
+    useLayoutEffect(() => {
+        const element = tabsContext.selectedElement, indicator = indicatorRef.current, tabsList = tabsListRef.current;
+        if (!element || !indicator || !tabsList) {
+            return;
+        }
+        const animatedIndicator = () => {
+            const left = element.offsetLeft, width = element.offsetWidth;
+            indicator.style.transformOrigin = '0';
+            indicator.style.transform = `translateX(${left}px) scaleX(${width / baseWidth})`;
+        };
+        indicator.style.display = 'block';
+        animatedIndicator();
+        const handleTransitionEnd = () => {
+            indicator.style.display = 'none';
+            tabsList.classList.remove(isAnimated);
+        };
+        tabsList.classList.add(isAnimated);
+        indicator.addEventListener('transitionend', handleTransitionEnd);
+        return () => {
+            animatedIndicator();
+            indicator.removeEventListener('transitionend', handleTransitionEnd);
+        };
+    }, [tabsContext.selectedElement, tabsListRef]);
+    return (jsxs("div", { ref: tabsListRef, className: clsx(className, container, sx(propSx)), ...props, children: [children, jsx(TabsIndicator, { ref: indicatorRef, style: { display: 'none', width: `${baseWidth}px` } })] }));
 });
 TabsList.displayName = 'TabsList';
 

package/dist/components/Tabs/TabsProvider.cjs

@@ -4,8 +4,17 @@
 var react = require('react');
 
 const TabsContext = react.createContext(undefined);
-const tabsReducer = (_, value) => {
-    return value;
+const tabsReducer = (state, action) => {
+    switch (action.type) {
+        case 'SELECT_TAB':
+            return {
+                ...state,
+                value: action.value,
+                selectedElement: action.selectedElement,
+            };
+        default:
+            return state;
+    }
 };
 
 exports.TabsContext = TabsContext;

package/dist/components/Tabs/TabsProvider.d.ts

@@ -1,9 +1,16 @@
-import { type Dispatch } from 'react';
-interface TabsContext {
+export interface TabsState {
     value: number | string | undefined;
-    setValue: Dispatch<number | string>;
+    selectedElement: HTMLElement | undefined;
+}
+type TabsAction = {
+    type: 'SELECT_TAB';
+    value: TabsState['value'];
+    selectedElement: TabsState['selectedElement'];
+};
+interface TabsContext extends TabsState {
+    selectTab: (value: TabsState['value'], selectedElement: TabsState['selectedElement']) => void;
 }
 export declare const TabsContext: import("react").Context<TabsContext | undefined>;
-export declare const tabsReducer: (_: TabsContext["value"], value: TabsContext["value"]) => string | number | undefined;
+export declare const tabsReducer: (state: TabsState, action: TabsAction) => TabsState;
 export {};
 //# sourceMappingURL=TabsProvider.d.ts.map

package/dist/components/Tabs/TabsProvider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TabsProvider.d.ts","sourceRoot":"","sources":["../../../src/components/Tabs/TabsProvider.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAiB,KAAK,QAAQ,EAAE,MAAM,OAAO,CAAC;AAErD,UAAU,WAAW;IACnB,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC;IACnC,QAAQ,EAAE,QAAQ,CAAC,MAAM,GAAG,MAAM,CAAC,CAAC;CACrC;AAED,eAAO,MAAM,WAAW,kDAAoD,CAAC;AAE7E,eAAO,MAAM,WAAW,GACtB,GAAG,WAAW,CAAC,OAAO,CAAC,EACvB,OAAO,WAAW,CAAC,OAAO,CAAC,gCAG5B,CAAC"}
+{"version":3,"file":"TabsProvider.d.ts","sourceRoot":"","sources":["../../../src/components/Tabs/TabsProvider.tsx"],"names":[],"mappings":"AAIA,MAAM,WAAW,SAAS;IACxB,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC;IACnC,eAAe,EAAE,WAAW,GAAG,SAAS,CAAC;CAC1C;AAED,KAAK,UAAU,GAAG;IAChB,IAAI,EAAE,YAAY,CAAC;IACnB,KAAK,EAAE,SAAS,CAAC,OAAO,CAAC,CAAC;IAC1B,eAAe,EAAE,SAAS,CAAC,iBAAiB,CAAC,CAAC;CAC/C,CAAC;AAEF,UAAU,WAAY,SAAQ,SAAS;IACrC,SAAS,EAAE,CACT,KAAK,EAAE,SAAS,CAAC,OAAO,CAAC,EACzB,eAAe,EAAE,SAAS,CAAC,iBAAiB,CAAC,KAC1C,IAAI,CAAC;CACX;AAED,eAAO,MAAM,WAAW,kDAAoD,CAAC;AAE7E,eAAO,MAAM,WAAW,GACtB,OAAO,SAAS,EAChB,QAAQ,UAAU,KACjB,SAWF,CAAC"}

package/dist/components/Tabs/TabsProvider.js

@@ -2,8 +2,17 @@
 import { createContext } from 'react';
 
 const TabsContext = createContext(undefined);
-const tabsReducer = (_, value) => {
-    return value;
+const tabsReducer = (state, action) => {
+    switch (action.type) {
+        case 'SELECT_TAB':
+            return {
+                ...state,
+                value: action.value,
+                selectedElement: action.selectedElement,
+            };
+        default:
+            return state;
+    }
 };
 
 export { TabsContext, tabsReducer };

package/dist/components/Tabs/TabsTrigger.cjs

@@ -4,20 +4,22 @@
 var jsxRuntime = require('react/jsx-runtime');
 var react = require('react');
 var clsx = require('../../node_modules/.pnpm/clsx@2.1.1/node_modules/clsx/dist/clsx.cjs');
+var TabsIndicator = require('./TabsIndicator.cjs');
 var TabsProvider = require('./TabsProvider.cjs');
 var TabsTrigger_css = require('./TabsTrigger.css.vanilla.cjs');
 var sx = require('../../styles/sx.cjs');
 
-const TabsTrigger = react.forwardRef(({ children, value, className, sx: propSx, ...props }, ref) => {
+const TabsTrigger = react.forwardRef(({ children, value, className, sx: propSx, onClick, ...props }, ref) => {
     const tabsContext = react.useContext(TabsProvider.TabsContext);
     if (tabsContext === undefined) {
         throw new Error('TabsTrigger must be used within a Tabs.');
     }
     const isSelected = tabsContext.value === value;
-    const handleClick = () => {
-        tabsContext.setValue(value);
+    const handleClick = (event) => {
+        tabsContext.selectTab(value, event.currentTarget);
+        onClick?.(event);
     };
-    return (jsxRuntime.jsx("button", { ref: ref, className: clsx.clsx(className, TabsTrigger_css.container({ isSelected }), sx.sx(propSx)), onClick: handleClick, ...props, children: children }));
+    return (jsxRuntime.jsxs("button", { ref: ref, className: clsx.clsx(className, TabsTrigger_css.container({ isSelected }), sx.sx(propSx)), ...props, onClick: handleClick, children: [children, isSelected && jsxRuntime.jsx(TabsIndicator.TabsIndicator, {})] }));
 });
 TabsTrigger.displayName = 'TabsTrigger';
 

package/dist/components/Tabs/TabsTrigger.css.d.ts

@@ -1,11 +1,9 @@
 export declare const container: import("@vanilla-extract/recipes").RuntimeFn<{
     isSelected: {
         true: {
-            borderBottomColor: `rgb(var(--${string}))`;
             color: `rgb(var(--${string}))`;
         };
         false: {
-            borderBottomColor: "transparent";
             color: `rgb(var(--${string}))`;
         };
     };

package/dist/components/Tabs/TabsTrigger.css.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TabsTrigger.css.d.ts","sourceRoot":"","sources":["../../../src/components/Tabs/TabsTrigger.css.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,SAAS;;;;;;;;;;;EAkCpB,CAAC"}
+{"version":3,"file":"TabsTrigger.css.d.ts","sourceRoot":"","sources":["../../../src/components/Tabs/TabsTrigger.css.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,SAAS;;;;;;;;;EA8BpB,CAAC"}

package/dist/components/Tabs/TabsTrigger.css.ts.vanilla.css

@@ -1,11 +1,11 @@
 @layer components;
 @layer components {
   .TabsTrigger_layeredBase__rk5ejr0 {
+    position: relative;
     overflow: hidden;
     height: 100%;
     padding: 0 0.75em;
     border: 0;
-    border-bottom: 0.125rem solid;
     background-color: transparent;
     font-size: 1em;
     text-overflow: ellipsis;
@@ -14,11 +14,9 @@
     cursor: pointer;
   }
   .TabsTrigger_styleWithLayer__rk5ejr1 {
-    border-bottom-color: rgb(var(--color-foreground__n6e2fs2));
     color: rgb(var(--color-foreground__n6e2fs2));
   }
   .TabsTrigger_styleWithLayer__rk5ejr2 {
-    border-bottom-color: transparent;
     color: rgb(var(--color-muted-foreground__n6e2fsc));
   }
 }

package/dist/components/Tabs/TabsTrigger.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TabsTrigger.d.ts","sourceRoot":"","sources":["../../../src/components/Tabs/TabsTrigger.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,QAAQ,CAAC;AAK1C,UAAU,gBAAiB,SAAQ,WAAW,CAAC,QAAQ,CAAC;IACtD,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;CACxB;AAED,eAAO,MAAM,WAAW,6HAyBvB,CAAC"}
+{"version":3,"file":"TabsTrigger.d.ts","sourceRoot":"","sources":["../../../src/components/Tabs/TabsTrigger.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,QAAQ,CAAC;AAM1C,UAAU,gBAAiB,SAAQ,WAAW,CAAC,QAAQ,CAAC;IACtD,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;CACxB;AAED,eAAO,MAAM,WAAW,6HA2BvB,CAAC"}

package/dist/components/Tabs/TabsTrigger.js

@@ -1,21 +1,23 @@
 "use client";
-import { jsx } from 'react/jsx-runtime';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import { forwardRef, useContext } from 'react';
 import { clsx } from '../../node_modules/.pnpm/clsx@2.1.1/node_modules/clsx/dist/clsx.js';
+import { TabsIndicator } from './TabsIndicator.js';
 import { TabsContext } from './TabsProvider.js';
 import { container } from './TabsTrigger.css.vanilla.js';
 import { sx } from '../../styles/sx.js';
 
-const TabsTrigger = forwardRef(({ children, value, className, sx: propSx, ...props }, ref) => {
+const TabsTrigger = forwardRef(({ children, value, className, sx: propSx, onClick, ...props }, ref) => {
     const tabsContext = useContext(TabsContext);
     if (tabsContext === undefined) {
         throw new Error('TabsTrigger must be used within a Tabs.');
     }
     const isSelected = tabsContext.value === value;
-    const handleClick = () => {
-        tabsContext.setValue(value);
+    const handleClick = (event) => {
+        tabsContext.selectTab(value, event.currentTarget);
+        onClick?.(event);
     };
-    return (jsx("button", { ref: ref, className: clsx(className, container({ isSelected }), sx(propSx)), onClick: handleClick, ...props, children: children }));
+    return (jsxs("button", { ref: ref, className: clsx(className, container({ isSelected }), sx(propSx)), ...props, onClick: handleClick, children: [children, isSelected && jsx(TabsIndicator, {})] }));
 });
 TabsTrigger.displayName = 'TabsTrigger';
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kimdw-rtk/ui",
-  "version": "0.1.17",
+  "version": "0.1.19",
   "private": false,
   "type": "module",
   "imports": {
@@ -39,8 +39,8 @@
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0",
-    "@kimdw-rtk/animation": "^0.1.5",
-    "@kimdw-rtk/utils": "0.1.6"
+    "@kimdw-rtk/utils": "0.1.6",
+    "@kimdw-rtk/animation": "^0.1.5"
   },
   "devDependencies": {
     "@babel/preset-env": "^7.26.9",