@zentauri-ui/zentauri-components 1.2.0 → 1.3.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +66 -38
- package/dist/accordion-base-qVomr7f_.d.mts +66 -0
- package/dist/accordion-base-qVomr7f_.d.ts +66 -0
- package/dist/avatar-base-s4dYg-24.d.mts +49 -0
- package/dist/avatar-base-s4dYg-24.d.ts +49 -0
- package/dist/card-base-CIGac8D_.d.mts +70 -0
- package/dist/card-base-CIGac8D_.d.ts +70 -0
- package/dist/chunk-2P3UU2J3.mjs +510 -0
- package/dist/chunk-2P3UU2J3.mjs.map +1 -0
- package/dist/chunk-2PQEXQVR.js +223 -0
- package/dist/chunk-2PQEXQVR.js.map +1 -0
- package/dist/chunk-3OR47XMY.js +273 -0
- package/dist/chunk-3OR47XMY.js.map +1 -0
- package/dist/chunk-4B7KGBQB.js +206 -0
- package/dist/chunk-4B7KGBQB.js.map +1 -0
- package/dist/chunk-5QB2KNZQ.js +148 -0
- package/dist/chunk-5QB2KNZQ.js.map +1 -0
- package/dist/chunk-6I7X5BF2.js +520 -0
- package/dist/chunk-6I7X5BF2.js.map +1 -0
- package/dist/chunk-7HL3A4YF.mjs +214 -0
- package/dist/chunk-7HL3A4YF.mjs.map +1 -0
- package/dist/chunk-AOEI4V3W.mjs +286 -0
- package/dist/chunk-AOEI4V3W.mjs.map +1 -0
- package/dist/chunk-BVXTOEBI.mjs +259 -0
- package/dist/chunk-BVXTOEBI.mjs.map +1 -0
- package/dist/chunk-C2FCPQTO.js +279 -0
- package/dist/chunk-C2FCPQTO.js.map +1 -0
- package/dist/chunk-E3DZNJAD.js +128 -0
- package/dist/chunk-E3DZNJAD.js.map +1 -0
- package/dist/chunk-FLILFCQE.mjs +197 -0
- package/dist/chunk-FLILFCQE.mjs.map +1 -0
- package/dist/chunk-IXDJ3IPG.mjs +315 -0
- package/dist/chunk-IXDJ3IPG.mjs.map +1 -0
- package/dist/chunk-JQ5TIJ4F.mjs +68 -0
- package/dist/chunk-JQ5TIJ4F.mjs.map +1 -0
- package/dist/chunk-LVUPECBT.mjs +217 -0
- package/dist/chunk-LVUPECBT.mjs.map +1 -0
- package/dist/chunk-N4NO3SYL.js +328 -0
- package/dist/chunk-N4NO3SYL.js.map +1 -0
- package/dist/chunk-OJ67PZ6N.js +175 -0
- package/dist/chunk-OJ67PZ6N.js.map +1 -0
- package/dist/chunk-P5HUBXUX.js +231 -0
- package/dist/chunk-P5HUBXUX.js.map +1 -0
- package/dist/chunk-PCK6LX3K.js +253 -0
- package/dist/chunk-PCK6LX3K.js.map +1 -0
- package/dist/chunk-PGH27VTL.mjs +316 -0
- package/dist/chunk-PGH27VTL.mjs.map +1 -0
- package/dist/chunk-QZKMFSH5.js +288 -0
- package/dist/chunk-QZKMFSH5.js.map +1 -0
- package/dist/chunk-RDSPHBHK.mjs +221 -0
- package/dist/chunk-RDSPHBHK.mjs.map +1 -0
- package/dist/chunk-U4YQCAXW.js +204 -0
- package/dist/chunk-U4YQCAXW.js.map +1 -0
- package/dist/chunk-UBFKTC2P.mjs +268 -0
- package/dist/chunk-UBFKTC2P.mjs.map +1 -0
- package/dist/chunk-UOFTZKMM.js +229 -0
- package/dist/chunk-UOFTZKMM.js.map +1 -0
- package/dist/chunk-UXGHUBNJ.mjs +240 -0
- package/dist/chunk-UXGHUBNJ.mjs.map +1 -0
- package/dist/chunk-W6PRMYUC.mjs +169 -0
- package/dist/chunk-W6PRMYUC.mjs.map +1 -0
- package/dist/chunk-WDCIZHXY.mjs +139 -0
- package/dist/chunk-WDCIZHXY.mjs.map +1 -0
- package/dist/chunk-WZKGRU3U.js +182 -0
- package/dist/chunk-WZKGRU3U.js.map +1 -0
- package/dist/chunk-X22LLJL6.js +71 -0
- package/dist/chunk-X22LLJL6.js.map +1 -0
- package/dist/chunk-XIXF7UVM.mjs +194 -0
- package/dist/chunk-XIXF7UVM.mjs.map +1 -0
- package/dist/chunk-XLAFQ24R.js +328 -0
- package/dist/chunk-XLAFQ24R.js.map +1 -0
- package/dist/chunk-XWM2S6VV.mjs +124 -0
- package/dist/chunk-XWM2S6VV.mjs.map +1 -0
- package/dist/chunk-YNCD6TKE.mjs +175 -0
- package/dist/chunk-YNCD6TKE.mjs.map +1 -0
- package/dist/progress-base-Cm1JODYA.d.mts +66 -0
- package/dist/progress-base-Cm1JODYA.d.ts +66 -0
- package/dist/types-C7N9UvRm.d.mts +38 -0
- package/dist/types-C7N9UvRm.d.ts +38 -0
- package/dist/types-CFpwSbpK.d.mts +27 -0
- package/dist/types-CFpwSbpK.d.ts +27 -0
- package/dist/types-CK_vNRIb.d.mts +63 -0
- package/dist/types-CK_vNRIb.d.ts +63 -0
- package/dist/types-Ca3t5aC_.d.mts +31 -0
- package/dist/types-Ca3t5aC_.d.ts +31 -0
- package/dist/types-Cn7IcgkH.d.mts +32 -0
- package/dist/types-Cn7IcgkH.d.ts +32 -0
- package/dist/types-CtFK7mFE.d.mts +34 -0
- package/dist/types-CtFK7mFE.d.ts +34 -0
- package/dist/types-DMkTQsWg.d.mts +46 -0
- package/dist/types-DMkTQsWg.d.ts +46 -0
- package/dist/types-DN400jNg.d.mts +28 -0
- package/dist/types-DN400jNg.d.ts +28 -0
- package/dist/types-vcZcRc6w.d.mts +24 -0
- package/dist/types-vcZcRc6w.d.ts +24 -0
- package/dist/types-zHcMUtKK.d.mts +42 -0
- package/dist/types-zHcMUtKK.d.ts +42 -0
- package/dist/ui/accordion/animated.d.mts +24 -0
- package/dist/ui/accordion/animated.d.ts +24 -0
- package/dist/ui/accordion/animated.js +67 -0
- package/dist/ui/accordion/animated.js.map +1 -0
- package/dist/ui/accordion/animated.mjs +56 -0
- package/dist/ui/accordion/animated.mjs.map +1 -0
- package/dist/ui/accordion.d.mts +9 -65
- package/dist/ui/accordion.d.ts +9 -65
- package/dist/ui/accordion.js +32 -288
- package/dist/ui/accordion.js.map +1 -1
- package/dist/ui/accordion.mjs +6 -281
- package/dist/ui/accordion.mjs.map +1 -1
- package/dist/ui/alert/animated.d.mts +18 -0
- package/dist/ui/alert/animated.d.ts +18 -0
- package/dist/ui/alert/animated.js +47 -0
- package/dist/ui/alert/animated.js.map +1 -0
- package/dist/ui/alert/animated.mjs +44 -0
- package/dist/ui/alert/animated.mjs.map +1 -0
- package/dist/ui/alert.d.mts +10 -40
- package/dist/ui/alert.d.ts +10 -40
- package/dist/ui/alert.js +36 -218
- package/dist/ui/alert.js.map +1 -1
- package/dist/ui/alert.mjs +7 -211
- package/dist/ui/alert.mjs.map +1 -1
- package/dist/ui/avatar/animated.d.mts +22 -0
- package/dist/ui/avatar/animated.d.ts +22 -0
- package/dist/ui/avatar/animated.js +51 -0
- package/dist/ui/avatar/animated.js.map +1 -0
- package/dist/ui/avatar/animated.mjs +37 -0
- package/dist/ui/avatar/animated.mjs.map +1 -0
- package/dist/ui/avatar.d.mts +7 -53
- package/dist/ui/avatar.d.ts +7 -53
- package/dist/ui/avatar.js +32 -210
- package/dist/ui/avatar.js.map +1 -1
- package/dist/ui/avatar.mjs +7 -204
- package/dist/ui/avatar.mjs.map +1 -1
- package/dist/ui/badge/animated.d.mts +22 -0
- package/dist/ui/badge/animated.d.ts +22 -0
- package/dist/ui/badge/animated.js +50 -0
- package/dist/ui/badge/animated.js.map +1 -0
- package/dist/ui/badge/animated.mjs +47 -0
- package/dist/ui/badge/animated.mjs.map +1 -0
- package/dist/ui/badge.d.mts +6 -30
- package/dist/ui/badge.d.ts +6 -30
- package/dist/ui/badge.js +11 -142
- package/dist/ui/badge.js.map +1 -1
- package/dist/ui/badge.mjs +6 -141
- package/dist/ui/badge.mjs.map +1 -1
- package/dist/ui/buttons/animated.d.mts +27 -0
- package/dist/ui/buttons/animated.d.ts +27 -0
- package/dist/ui/buttons/animated.js +101 -0
- package/dist/ui/buttons/animated.js.map +1 -0
- package/dist/ui/buttons/animated.mjs +98 -0
- package/dist/ui/buttons/animated.mjs.map +1 -0
- package/dist/ui/buttons.d.mts +5 -13
- package/dist/ui/buttons.d.ts +5 -13
- package/dist/ui/buttons.js +7 -45
- package/dist/ui/buttons.js.map +1 -1
- package/dist/ui/buttons.mjs +8 -45
- package/dist/ui/buttons.mjs.map +1 -1
- package/dist/ui/card/animated.d.mts +23 -0
- package/dist/ui/card/animated.d.ts +23 -0
- package/dist/ui/card/animated.js +72 -0
- package/dist/ui/card/animated.js.map +1 -0
- package/dist/ui/card/animated.mjs +50 -0
- package/dist/ui/card/animated.mjs.map +1 -0
- package/dist/ui/card.d.mts +6 -70
- package/dist/ui/card.d.ts +6 -70
- package/dist/ui/card.js +43 -245
- package/dist/ui/card.js.map +1 -1
- package/dist/ui/card.mjs +5 -235
- package/dist/ui/card.mjs.map +1 -1
- package/dist/ui/divider/animated.d.mts +19 -0
- package/dist/ui/divider/animated.d.ts +19 -0
- package/dist/ui/divider/animated.js +41 -0
- package/dist/ui/divider/animated.js.map +1 -0
- package/dist/ui/divider/animated.mjs +39 -0
- package/dist/ui/divider/animated.mjs.map +1 -0
- package/dist/ui/divider.d.mts +6 -32
- package/dist/ui/divider.d.ts +6 -32
- package/dist/ui/divider.js +19 -186
- package/dist/ui/divider.js.map +1 -1
- package/dist/ui/divider.mjs +6 -183
- package/dist/ui/divider.mjs.map +1 -1
- package/dist/ui/drawer/animated.d.mts +23 -0
- package/dist/ui/drawer/animated.d.ts +23 -0
- package/dist/ui/drawer/animated.js +143 -0
- package/dist/ui/drawer/animated.js.map +1 -0
- package/dist/ui/drawer/animated.mjs +113 -0
- package/dist/ui/drawer/animated.mjs.map +1 -0
- package/dist/ui/drawer.d.mts +10 -11
- package/dist/ui/drawer.d.ts +10 -11
- package/dist/ui/drawer.js +44 -357
- package/dist/ui/drawer.js.map +1 -1
- package/dist/ui/drawer.mjs +3 -349
- package/dist/ui/drawer.mjs.map +1 -1
- package/dist/ui/empty-state/animated.d.mts +24 -0
- package/dist/ui/empty-state/animated.d.ts +24 -0
- package/dist/ui/empty-state/animated.js +45 -0
- package/dist/ui/empty-state/animated.js.map +1 -0
- package/dist/ui/empty-state/animated.mjs +42 -0
- package/dist/ui/empty-state/animated.mjs.map +1 -0
- package/dist/ui/empty-state.d.mts +11 -32
- package/dist/ui/empty-state.d.ts +11 -32
- package/dist/ui/empty-state.js +35 -160
- package/dist/ui/empty-state.js.map +1 -1
- package/dist/ui/empty-state.mjs +5 -153
- package/dist/ui/empty-state.mjs.map +1 -1
- package/dist/ui/inputs/animated.d.mts +27 -0
- package/dist/ui/inputs/animated.d.ts +27 -0
- package/dist/ui/inputs/animated.js +141 -0
- package/dist/ui/inputs/animated.js.map +1 -0
- package/dist/ui/inputs/animated.mjs +138 -0
- package/dist/ui/inputs/animated.mjs.map +1 -0
- package/dist/ui/inputs.d.mts +7 -21
- package/dist/ui/inputs.d.ts +7 -21
- package/dist/ui/inputs.js +16 -331
- package/dist/ui/inputs.js.map +1 -1
- package/dist/ui/inputs.mjs +13 -329
- package/dist/ui/inputs.mjs.map +1 -1
- package/dist/ui/modal/animated.d.mts +21 -0
- package/dist/ui/modal/animated.d.ts +21 -0
- package/dist/ui/modal/animated.js +120 -0
- package/dist/ui/modal/animated.js.map +1 -0
- package/dist/ui/modal/animated.mjs +117 -0
- package/dist/ui/modal/animated.mjs.map +1 -0
- package/dist/ui/modal.d.mts +10 -48
- package/dist/ui/modal.d.ts +10 -48
- package/dist/ui/modal.js +47 -361
- package/dist/ui/modal.js.map +1 -1
- package/dist/ui/modal.mjs +9 -351
- package/dist/ui/modal.mjs.map +1 -1
- package/dist/ui/progress/animated.d.mts +41 -0
- package/dist/ui/progress/animated.d.ts +41 -0
- package/dist/ui/progress/animated.js +123 -0
- package/dist/ui/progress/animated.js.map +1 -0
- package/dist/ui/progress/animated.mjs +112 -0
- package/dist/ui/progress/animated.mjs.map +1 -0
- package/dist/ui/progress.d.mts +10 -58
- package/dist/ui/progress.d.ts +10 -58
- package/dist/ui/progress.js +35 -227
- package/dist/ui/progress.js.map +1 -1
- package/dist/ui/progress.mjs +10 -222
- package/dist/ui/progress.mjs.map +1 -1
- package/dist/ui/skeleton/animated.d.mts +56 -0
- package/dist/ui/skeleton/animated.d.ts +56 -0
- package/dist/ui/skeleton/animated.js +126 -0
- package/dist/ui/skeleton/animated.js.map +1 -0
- package/dist/ui/skeleton/animated.mjs +119 -0
- package/dist/ui/skeleton/animated.mjs.map +1 -0
- package/dist/ui/skeleton.d.mts +16 -77
- package/dist/ui/skeleton.d.ts +16 -77
- package/dist/ui/skeleton.js +35 -526
- package/dist/ui/skeleton.js.map +1 -1
- package/dist/ui/skeleton.mjs +2 -520
- package/dist/ui/skeleton.mjs.map +1 -1
- package/dist/ui/{spinner.d.mts → spinner/animated.d.mts} +1 -6
- package/dist/ui/{spinner.d.ts → spinner/animated.d.ts} +1 -6
- package/dist/ui/{spinner.js → spinner/animated.js} +3 -9
- package/dist/ui/spinner/animated.js.map +1 -0
- package/dist/ui/{spinner.mjs → spinner/animated.mjs} +4 -9
- package/dist/ui/spinner/animated.mjs.map +1 -0
- package/dist/ui/table/animated.d.mts +21 -0
- package/dist/ui/table/animated.d.ts +21 -0
- package/dist/ui/table/animated.js +50 -0
- package/dist/ui/table/animated.js.map +1 -0
- package/dist/ui/table/animated.mjs +24 -0
- package/dist/ui/table/animated.mjs.map +1 -0
- package/dist/ui/table.d.mts +17 -11
- package/dist/ui/table.d.ts +17 -11
- package/dist/ui/table.js +55 -278
- package/dist/ui/table.js.map +1 -1
- package/dist/ui/table.mjs +2 -269
- package/dist/ui/table.mjs.map +1 -1
- package/dist/ui/tabs/animated.d.mts +25 -0
- package/dist/ui/tabs/animated.d.ts +25 -0
- package/dist/ui/tabs/animated.js +83 -0
- package/dist/ui/tabs/animated.js.map +1 -0
- package/dist/ui/tabs/animated.mjs +79 -0
- package/dist/ui/tabs/animated.mjs.map +1 -0
- package/dist/ui/tabs.d.mts +7 -41
- package/dist/ui/tabs.d.ts +7 -41
- package/dist/ui/tabs.js +35 -261
- package/dist/ui/tabs.js.map +1 -1
- package/dist/ui/tabs.mjs +2 -256
- package/dist/ui/tabs.mjs.map +1 -1
- package/dist/ui/toast/animated.d.mts +23 -0
- package/dist/ui/toast/animated.d.ts +23 -0
- package/dist/ui/toast/animated.js +103 -0
- package/dist/ui/toast/animated.js.map +1 -0
- package/dist/ui/toast/animated.mjs +99 -0
- package/dist/ui/toast/animated.mjs.map +1 -0
- package/dist/ui/toast.d.mts +7 -52
- package/dist/ui/toast.d.ts +7 -52
- package/dist/ui/toast.js +47 -268
- package/dist/ui/toast.js.map +1 -1
- package/dist/ui/toast.mjs +2 -259
- package/dist/ui/toast.mjs.map +1 -1
- package/dist/ui/toggle/animated.d.mts +22 -0
- package/dist/ui/toggle/animated.d.ts +22 -0
- package/dist/ui/toggle/animated.js +88 -0
- package/dist/ui/toggle/animated.js.map +1 -0
- package/dist/ui/toggle/animated.mjs +85 -0
- package/dist/ui/toggle/animated.mjs.map +1 -0
- package/dist/ui/toggle.d.mts +6 -30
- package/dist/ui/toggle.d.ts +6 -30
- package/dist/ui/toggle.js +19 -83
- package/dist/ui/toggle.js.map +1 -1
- package/dist/ui/toggle.mjs +12 -80
- package/dist/ui/toggle.mjs.map +1 -1
- package/dist/ui/tooltip/animated.d.mts +17 -0
- package/dist/ui/tooltip/animated.d.ts +17 -0
- package/dist/ui/tooltip/animated.js +59 -0
- package/dist/ui/tooltip/animated.js.map +1 -0
- package/dist/ui/tooltip/animated.mjs +56 -0
- package/dist/ui/tooltip/animated.mjs.map +1 -0
- package/dist/ui/tooltip.d.mts +6 -33
- package/dist/ui/tooltip.d.ts +6 -33
- package/dist/ui/tooltip.js +26 -193
- package/dist/ui/tooltip.js.map +1 -1
- package/dist/ui/tooltip.mjs +2 -192
- package/dist/ui/tooltip.mjs.map +1 -1
- package/dist/variants-CYODHI8b.d.mts +10 -0
- package/dist/variants-CYODHI8b.d.ts +10 -0
- package/package.json +7 -4
- package/dist/ui/spinner.js.map +0 -1
- package/dist/ui/spinner.mjs.map +0 -1
package/dist/ui/tabs.d.ts
CHANGED
|
@@ -1,48 +1,14 @@
|
|
|
1
1
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
-
import
|
|
3
|
-
import {
|
|
2
|
+
import * as react from 'react';
|
|
3
|
+
import { T as TabsProps, a as TabsContentProps, b as TabsContextType, c as TabsListProps, d as TabsTriggerProps } from '../types-zHcMUtKK.js';
|
|
4
4
|
import * as class_variance_authority_types from 'class-variance-authority/types';
|
|
5
5
|
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
type TabsOrientation = "horizontal" | "vertical";
|
|
10
|
-
declare const tabsContentAnimationPresets: TabsAnimationPresets;
|
|
11
|
-
declare function getTabsContentMotionProps(animation: TabsAnimation, orientation: TabsOrientation, reducedMotion: boolean): TabsPresetMotionProps;
|
|
12
|
-
|
|
13
|
-
type TabsValue = string;
|
|
14
|
-
type TabsProps = {
|
|
15
|
-
value?: TabsValue;
|
|
16
|
-
defaultValue?: TabsValue;
|
|
17
|
-
onValueChange?: (value: TabsValue) => void;
|
|
18
|
-
orientation?: "horizontal" | "vertical";
|
|
19
|
-
variant?: "default" | "underline" | "pills";
|
|
20
|
-
size?: "sm" | "md" | "lg";
|
|
21
|
-
appearance?: "default" | "sky" | "rose" | "purple" | "pink" | "orange" | "yellow" | "teal" | "indigo" | "emerald" | "gray" | "gradient-blue" | "gradient-green" | "gradient-red" | "gradient-yellow" | "gradient-purple" | "gradient-teal" | "gradient-indigo" | "gradient-pink" | "gradient-orange";
|
|
22
|
-
children: ReactNode;
|
|
23
|
-
className?: string;
|
|
24
|
-
};
|
|
25
|
-
type TabsListProps = {
|
|
26
|
-
children: ReactNode;
|
|
27
|
-
className?: string;
|
|
28
|
-
};
|
|
29
|
-
type TabsTriggerProps = {
|
|
30
|
-
value: TabsValue;
|
|
31
|
-
children: ReactNode;
|
|
32
|
-
disabled?: boolean;
|
|
33
|
-
className?: string;
|
|
34
|
-
};
|
|
35
|
-
type TabsContentProps = {
|
|
36
|
-
value: TabsValue;
|
|
37
|
-
children: ReactNode;
|
|
38
|
-
className?: string;
|
|
39
|
-
animation?: TabsAnimation;
|
|
40
|
-
};
|
|
41
|
-
|
|
42
|
-
declare function Tabs({ value, defaultValue, onValueChange, orientation, children, className, }: TabsProps): react_jsx_runtime.JSX.Element;
|
|
6
|
+
declare const TabsContext: react.Context<TabsContextType | null>;
|
|
7
|
+
declare const useTabs: () => TabsContextType;
|
|
8
|
+
declare function Tabs({ value, defaultValue, onValueChange, orientation, variant, size, appearance, children, className, }: TabsProps): react_jsx_runtime.JSX.Element;
|
|
43
9
|
declare function TabsList({ children, className, ...props }: TabsListProps): react_jsx_runtime.JSX.Element;
|
|
44
10
|
declare function TabsTrigger({ value, children, disabled, className, ...props }: TabsTriggerProps): react_jsx_runtime.JSX.Element;
|
|
45
|
-
declare function TabsContent({ value, children, className,
|
|
11
|
+
declare function TabsContent({ value, children, className, as: Wrapper, ...props }: TabsContentProps): react_jsx_runtime.JSX.Element | null;
|
|
46
12
|
|
|
47
13
|
declare const tabsListVariants: (props?: ({
|
|
48
14
|
variant?: "default" | "underline" | "pills" | null | undefined;
|
|
@@ -55,4 +21,4 @@ declare const tabsTriggerVariants: (props?: ({
|
|
|
55
21
|
size?: "sm" | "md" | "lg" | null | undefined;
|
|
56
22
|
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
57
23
|
|
|
58
|
-
export { Tabs,
|
|
24
|
+
export { Tabs, TabsContent, TabsContentProps, TabsContext, TabsList, TabsListProps, TabsProps, TabsTrigger, TabsTriggerProps, tabsListVariants, tabsTriggerVariants, useTabs };
|
package/dist/ui/tabs.js
CHANGED
|
@@ -1,268 +1,42 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
'use strict';
|
|
3
3
|
|
|
4
|
-
var
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
var classVarianceAuthority = require('class-variance-authority');
|
|
8
|
-
var jsxRuntime = require('react/jsx-runtime');
|
|
4
|
+
var chunk2PQEXQVR_js = require('../chunk-2PQEXQVR.js');
|
|
5
|
+
require('../chunk-UOZYPWDZ.js');
|
|
6
|
+
|
|
9
7
|
|
|
10
|
-
// src/ui/tabs/animations.ts
|
|
11
|
-
var easeOutExpo = [0.16, 1, 0.3, 1];
|
|
12
|
-
var tabsContentAnimationPresets = {
|
|
13
|
-
none: {},
|
|
14
|
-
fade: {
|
|
15
|
-
initial: { opacity: 0, y: 6 },
|
|
16
|
-
animate: { opacity: 1, y: 0 },
|
|
17
|
-
transition: { duration: 0.2, ease: easeOutExpo }
|
|
18
|
-
},
|
|
19
|
-
slide: {
|
|
20
|
-
initial: { opacity: 0, y: 8 },
|
|
21
|
-
animate: { opacity: 1, y: 0 },
|
|
22
|
-
transition: {
|
|
23
|
-
type: "spring",
|
|
24
|
-
stiffness: 420,
|
|
25
|
-
damping: 34,
|
|
26
|
-
mass: 0.82
|
|
27
|
-
}
|
|
28
|
-
}
|
|
29
|
-
};
|
|
30
|
-
function getTabsContentMotionProps(animation, orientation, reducedMotion) {
|
|
31
|
-
if (reducedMotion || animation === "none") {
|
|
32
|
-
return {};
|
|
33
|
-
}
|
|
34
|
-
if (animation === "fade") {
|
|
35
|
-
return tabsContentAnimationPresets.fade;
|
|
36
|
-
}
|
|
37
|
-
if (animation === "slide") {
|
|
38
|
-
const offset = 12;
|
|
39
|
-
return {
|
|
40
|
-
initial: orientation === "horizontal" ? { opacity: 0, x: offset, y: 0 } : { opacity: 0, x: 0, y: offset },
|
|
41
|
-
animate: { opacity: 1, x: 0, y: 0 },
|
|
42
|
-
transition: { duration: 0.22, ease: easeOutExpo }
|
|
43
|
-
};
|
|
44
|
-
}
|
|
45
|
-
return {};
|
|
46
|
-
}
|
|
47
|
-
var tabsListVariants = classVarianceAuthority.cva("flex items-center gap-1", {
|
|
48
|
-
variants: {
|
|
49
|
-
variant: {
|
|
50
|
-
default: "bg-transparent",
|
|
51
|
-
underline: "border-b-2 border-transparent",
|
|
52
|
-
pills: "rounded-md"
|
|
53
|
-
},
|
|
54
|
-
size: {
|
|
55
|
-
sm: "text-sm p-1",
|
|
56
|
-
md: "text-base p-1.5",
|
|
57
|
-
lg: "text-lg p-2"
|
|
58
|
-
},
|
|
59
|
-
orientation: {
|
|
60
|
-
horizontal: "flex-row",
|
|
61
|
-
vertical: "flex-col"
|
|
62
|
-
}
|
|
63
|
-
},
|
|
64
|
-
defaultVariants: {
|
|
65
|
-
size: "md",
|
|
66
|
-
orientation: "horizontal"
|
|
67
|
-
}
|
|
68
|
-
});
|
|
69
|
-
var tabsTriggerVariants = classVarianceAuthority.cva(
|
|
70
|
-
"px-3 py-1.5 rounded-md transition-all focus:outline-none focus:ring-2 focus:ring-ring",
|
|
71
|
-
{
|
|
72
|
-
variants: {
|
|
73
|
-
appearance: {
|
|
74
|
-
default: "bg-transparent",
|
|
75
|
-
sky: "bg-sky-500/75",
|
|
76
|
-
rose: "bg-rose-500/75",
|
|
77
|
-
purple: "bg-purple-500/75",
|
|
78
|
-
pink: "bg-pink-500/75",
|
|
79
|
-
orange: "bg-orange-500/75",
|
|
80
|
-
yellow: "bg-yellow-500/75",
|
|
81
|
-
teal: "bg-teal-500/75",
|
|
82
|
-
indigo: "bg-indigo-500/75",
|
|
83
|
-
emerald: "bg-emerald-500/75",
|
|
84
|
-
gray: "bg-gray-500/75",
|
|
85
|
-
"gradient-blue": "bg-gradient-to-r from-blue-600 to-purple-600",
|
|
86
|
-
"gradient-green": "bg-gradient-to-r from-green-600 to-lime-600",
|
|
87
|
-
"gradient-red": "bg-gradient-to-r from-red-600 to-pink-600",
|
|
88
|
-
"gradient-yellow": "bg-gradient-to-r from-yellow-600 to-orange-600",
|
|
89
|
-
"gradient-purple": "bg-gradient-to-r from-purple-600 to-pink-600",
|
|
90
|
-
"gradient-teal": "bg-gradient-to-r from-teal-600 to-cyan-600",
|
|
91
|
-
"gradient-indigo": "bg-gradient-to-r from-indigo-600 to-purple-600",
|
|
92
|
-
"gradient-pink": "bg-gradient-to-r from-pink-600 to-rose-600",
|
|
93
|
-
"gradient-orange": "bg-gradient-to-r from-orange-600 to-red-600"
|
|
94
|
-
},
|
|
95
|
-
variant: {
|
|
96
|
-
default: "data-[state=active]:bg-background",
|
|
97
|
-
underline: "border-b-2 border-transparent data-[state=active]:border-primary rounded-none",
|
|
98
|
-
pills: "data-[state=active]:bg-primary data-[state=active]:text-white"
|
|
99
|
-
},
|
|
100
|
-
size: {
|
|
101
|
-
sm: "px-2 py-1",
|
|
102
|
-
md: "px-3 py-1.5",
|
|
103
|
-
lg: "px-4 py-2"
|
|
104
|
-
}
|
|
105
|
-
},
|
|
106
|
-
defaultVariants: {
|
|
107
|
-
appearance: "default",
|
|
108
|
-
variant: "default",
|
|
109
|
-
size: "md"
|
|
110
|
-
}
|
|
111
|
-
}
|
|
112
|
-
);
|
|
113
|
-
var TabsContext = react.createContext(null);
|
|
114
|
-
var useTabs = () => {
|
|
115
|
-
const ctx = react.useContext(TabsContext);
|
|
116
|
-
if (!ctx) throw new Error("Tabs components must be used within Tabs");
|
|
117
|
-
return ctx;
|
|
118
|
-
};
|
|
119
|
-
function Tabs({
|
|
120
|
-
value,
|
|
121
|
-
defaultValue,
|
|
122
|
-
onValueChange,
|
|
123
|
-
orientation = "horizontal",
|
|
124
|
-
children,
|
|
125
|
-
className
|
|
126
|
-
}) {
|
|
127
|
-
const [internalValue, setInternalValue] = react.useState(defaultValue);
|
|
128
|
-
const idPrefix = react.useId();
|
|
129
|
-
const isControlled = value !== void 0;
|
|
130
|
-
const currentValue = isControlled ? value : internalValue;
|
|
131
|
-
const setValue = (val) => {
|
|
132
|
-
if (!isControlled) setInternalValue(val);
|
|
133
|
-
onValueChange?.(val);
|
|
134
|
-
};
|
|
135
|
-
const tabTriggerId = (tabValue) => `${idPrefix}zentauri-tab-${tabValue}`;
|
|
136
|
-
const tabPanelId = (tabValue) => `${idPrefix}zentauri-panel-${tabValue}`;
|
|
137
|
-
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
138
|
-
TabsContext.Provider,
|
|
139
|
-
{
|
|
140
|
-
value: {
|
|
141
|
-
value: currentValue,
|
|
142
|
-
setValue,
|
|
143
|
-
orientation,
|
|
144
|
-
tabTriggerId,
|
|
145
|
-
tabPanelId
|
|
146
|
-
},
|
|
147
|
-
children: /* @__PURE__ */ jsxRuntime.jsx("div", { "data-slot": "tabs", className: chunkUOZYPWDZ_js.cn("w-full", className), children })
|
|
148
|
-
}
|
|
149
|
-
);
|
|
150
|
-
}
|
|
151
|
-
function TabsList({ children, className, ...props }) {
|
|
152
|
-
const { orientation, size } = useTabs();
|
|
153
|
-
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
154
|
-
"div",
|
|
155
|
-
{
|
|
156
|
-
role: "tablist",
|
|
157
|
-
"aria-orientation": orientation,
|
|
158
|
-
className: chunkUOZYPWDZ_js.cn(tabsListVariants({ orientation, size }), className),
|
|
159
|
-
...props,
|
|
160
|
-
children
|
|
161
|
-
}
|
|
162
|
-
);
|
|
163
|
-
}
|
|
164
|
-
function TabsTrigger({
|
|
165
|
-
value,
|
|
166
|
-
children,
|
|
167
|
-
disabled,
|
|
168
|
-
className,
|
|
169
|
-
...props
|
|
170
|
-
}) {
|
|
171
|
-
const {
|
|
172
|
-
value: activeValue,
|
|
173
|
-
setValue,
|
|
174
|
-
tabTriggerId,
|
|
175
|
-
tabPanelId,
|
|
176
|
-
size,
|
|
177
|
-
appearance,
|
|
178
|
-
variant
|
|
179
|
-
} = useTabs();
|
|
180
|
-
const isActive = activeValue === value;
|
|
181
|
-
const handleKeyDown = (e) => {
|
|
182
|
-
const triggers = Array.from(
|
|
183
|
-
document.querySelectorAll('[role="tab"]')
|
|
184
|
-
);
|
|
185
|
-
const index = triggers.findIndex((el) => el === e.currentTarget);
|
|
186
|
-
if (e.key === "ArrowRight" || e.key === "ArrowDown") {
|
|
187
|
-
e.preventDefault();
|
|
188
|
-
triggers[index + 1]?.focus();
|
|
189
|
-
}
|
|
190
|
-
if (e.key === "ArrowLeft" || e.key === "ArrowUp") {
|
|
191
|
-
e.preventDefault();
|
|
192
|
-
triggers[index - 1]?.focus();
|
|
193
|
-
}
|
|
194
|
-
if (e.key === "Home") {
|
|
195
|
-
e.preventDefault();
|
|
196
|
-
triggers[0]?.focus();
|
|
197
|
-
}
|
|
198
|
-
if (e.key === "End") {
|
|
199
|
-
e.preventDefault();
|
|
200
|
-
triggers[triggers.length - 1]?.focus();
|
|
201
|
-
}
|
|
202
|
-
};
|
|
203
|
-
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
204
|
-
"button",
|
|
205
|
-
{
|
|
206
|
-
id: tabTriggerId(value),
|
|
207
|
-
type: "button",
|
|
208
|
-
role: "tab",
|
|
209
|
-
"data-state": isActive ? "active" : "inactive",
|
|
210
|
-
"aria-selected": isActive,
|
|
211
|
-
"aria-controls": tabPanelId(value),
|
|
212
|
-
disabled,
|
|
213
|
-
onClick: () => setValue(value),
|
|
214
|
-
onKeyDown: handleKeyDown,
|
|
215
|
-
className: chunkUOZYPWDZ_js.cn(
|
|
216
|
-
tabsTriggerVariants({ size, appearance, variant }),
|
|
217
|
-
className,
|
|
218
|
-
"cursor-pointer"
|
|
219
|
-
),
|
|
220
|
-
...props,
|
|
221
|
-
children
|
|
222
|
-
}
|
|
223
|
-
);
|
|
224
|
-
}
|
|
225
|
-
function TabsContent({
|
|
226
|
-
value,
|
|
227
|
-
children,
|
|
228
|
-
className,
|
|
229
|
-
animation = "fade",
|
|
230
|
-
...props
|
|
231
|
-
}) {
|
|
232
|
-
const {
|
|
233
|
-
value: activeValue,
|
|
234
|
-
orientation,
|
|
235
|
-
tabTriggerId,
|
|
236
|
-
tabPanelId
|
|
237
|
-
} = useTabs();
|
|
238
|
-
const prefersReducedMotion = framerMotion.useReducedMotion();
|
|
239
|
-
if (activeValue !== value) return null;
|
|
240
|
-
const motionProps = getTabsContentMotionProps(
|
|
241
|
-
animation,
|
|
242
|
-
orientation,
|
|
243
|
-
Boolean(prefersReducedMotion)
|
|
244
|
-
);
|
|
245
|
-
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
246
|
-
framerMotion.motion.div,
|
|
247
|
-
{
|
|
248
|
-
id: tabPanelId(value),
|
|
249
|
-
role: "tabpanel",
|
|
250
|
-
"aria-labelledby": tabTriggerId(value),
|
|
251
|
-
...props,
|
|
252
|
-
...motionProps,
|
|
253
|
-
className: chunkUOZYPWDZ_js.cn("mt-2", className),
|
|
254
|
-
children
|
|
255
|
-
}
|
|
256
|
-
);
|
|
257
|
-
}
|
|
258
8
|
|
|
259
|
-
exports
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
exports
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
9
|
+
Object.defineProperty(exports, "Tabs", {
|
|
10
|
+
enumerable: true,
|
|
11
|
+
get: function () { return chunk2PQEXQVR_js.Tabs; }
|
|
12
|
+
});
|
|
13
|
+
Object.defineProperty(exports, "TabsContent", {
|
|
14
|
+
enumerable: true,
|
|
15
|
+
get: function () { return chunk2PQEXQVR_js.TabsContent; }
|
|
16
|
+
});
|
|
17
|
+
Object.defineProperty(exports, "TabsContext", {
|
|
18
|
+
enumerable: true,
|
|
19
|
+
get: function () { return chunk2PQEXQVR_js.TabsContext; }
|
|
20
|
+
});
|
|
21
|
+
Object.defineProperty(exports, "TabsList", {
|
|
22
|
+
enumerable: true,
|
|
23
|
+
get: function () { return chunk2PQEXQVR_js.TabsList; }
|
|
24
|
+
});
|
|
25
|
+
Object.defineProperty(exports, "TabsTrigger", {
|
|
26
|
+
enumerable: true,
|
|
27
|
+
get: function () { return chunk2PQEXQVR_js.TabsTrigger; }
|
|
28
|
+
});
|
|
29
|
+
Object.defineProperty(exports, "tabsListVariants", {
|
|
30
|
+
enumerable: true,
|
|
31
|
+
get: function () { return chunk2PQEXQVR_js.tabsListVariants; }
|
|
32
|
+
});
|
|
33
|
+
Object.defineProperty(exports, "tabsTriggerVariants", {
|
|
34
|
+
enumerable: true,
|
|
35
|
+
get: function () { return chunk2PQEXQVR_js.tabsTriggerVariants; }
|
|
36
|
+
});
|
|
37
|
+
Object.defineProperty(exports, "useTabs", {
|
|
38
|
+
enumerable: true,
|
|
39
|
+
get: function () { return chunk2PQEXQVR_js.useTabs; }
|
|
40
|
+
});
|
|
267
41
|
//# sourceMappingURL=tabs.js.map
|
|
268
42
|
//# sourceMappingURL=tabs.js.map
|
package/dist/ui/tabs.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/ui/tabs/animations.ts","../../src/ui/tabs/variants.ts","../../src/ui/tabs/tabs.tsx"],"names":["cva","createContext","useContext","useState","useId","jsx","cn","useReducedMotion","motion"],"mappings":"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","file":"tabs.js","sourcesContent":["import type { HTMLMotionProps } from \"framer-motion\";\n\nexport type TabsAnimation = \"none\" | \"fade\" | \"slide\";\n\ntype TabsPresetMotionProps = Pick<\n HTMLMotionProps<\"div\">,\n \"initial\" | \"animate\" | \"transition\"\n>;\n\nexport type TabsAnimationPresets = Record<TabsAnimation, TabsPresetMotionProps>;\n\ntype TabsOrientation = \"horizontal\" | \"vertical\";\n\nconst easeOutExpo: [number, number, number, number] = [0.16, 1, 0.3, 1];\n\nexport const tabsContentAnimationPresets: TabsAnimationPresets = {\n none: {},\n fade: {\n initial: { opacity: 0, y: 6 },\n animate: { opacity: 1, y: 0 },\n transition: { duration: 0.2, ease: easeOutExpo },\n },\n slide: {\n initial: { opacity: 0, y: 8 },\n animate: { opacity: 1, y: 0 },\n transition: {\n type: \"spring\",\n stiffness: 420,\n damping: 34,\n mass: 0.82,\n },\n },\n};\n\nexport function getTabsContentMotionProps(\n animation: TabsAnimation,\n orientation: TabsOrientation,\n reducedMotion: boolean,\n): TabsPresetMotionProps {\n if (reducedMotion || animation === \"none\") {\n return {};\n }\n if (animation === \"fade\") {\n return tabsContentAnimationPresets.fade;\n }\n if (animation === \"slide\") {\n const offset = 12;\n return {\n initial:\n orientation === \"horizontal\"\n ? { opacity: 0, x: offset, y: 0 }\n : { opacity: 0, x: 0, y: offset },\n animate: { opacity: 1, x: 0, y: 0 },\n transition: { duration: 0.22, ease: easeOutExpo },\n };\n }\n return {};\n}\n","import { cva } from \"class-variance-authority\";\n\nexport const tabsListVariants = cva(\"flex items-center gap-1\", {\n variants: {\n variant: {\n default: \"bg-transparent\",\n underline: \"border-b-2 border-transparent\",\n pills: \"rounded-md\",\n },\n size: {\n sm: \"text-sm p-1\",\n md: \"text-base p-1.5\",\n lg: \"text-lg p-2\",\n },\n orientation: {\n horizontal: \"flex-row\",\n vertical: \"flex-col\",\n },\n },\n defaultVariants: {\n size: \"md\",\n orientation: \"horizontal\",\n },\n});\n\nexport const tabsTriggerVariants = cva(\n \"px-3 py-1.5 rounded-md transition-all focus:outline-none focus:ring-2 focus:ring-ring\",\n {\n variants: {\n appearance: {\n default: \"bg-transparent\",\n sky: \"bg-sky-500/75\",\n rose: \"bg-rose-500/75\",\n purple: \"bg-purple-500/75\",\n pink: \"bg-pink-500/75\",\n orange: \"bg-orange-500/75\",\n yellow: \"bg-yellow-500/75\",\n teal: \"bg-teal-500/75\",\n indigo: \"bg-indigo-500/75\",\n emerald: \"bg-emerald-500/75\",\n gray: \"bg-gray-500/75\",\n \"gradient-blue\": \"bg-gradient-to-r from-blue-600 to-purple-600\",\n \"gradient-green\": \"bg-gradient-to-r from-green-600 to-lime-600\",\n \"gradient-red\": \"bg-gradient-to-r from-red-600 to-pink-600\",\n \"gradient-yellow\": \"bg-gradient-to-r from-yellow-600 to-orange-600\",\n \"gradient-purple\": \"bg-gradient-to-r from-purple-600 to-pink-600\",\n \"gradient-teal\": \"bg-gradient-to-r from-teal-600 to-cyan-600\",\n \"gradient-indigo\": \"bg-gradient-to-r from-indigo-600 to-purple-600\",\n \"gradient-pink\": \"bg-gradient-to-r from-pink-600 to-rose-600\",\n \"gradient-orange\": \"bg-gradient-to-r from-orange-600 to-red-600\",\n },\n variant: {\n default: \"data-[state=active]:bg-background\",\n underline:\n \"border-b-2 border-transparent data-[state=active]:border-primary rounded-none\",\n pills: \"data-[state=active]:bg-primary data-[state=active]:text-white\",\n },\n size: {\n sm: \"px-2 py-1\",\n md: \"px-3 py-1.5\",\n lg: \"px-4 py-2\",\n },\n },\n defaultVariants: {\n appearance: \"default\",\n variant: \"default\",\n size: \"md\",\n },\n },\n);\n","\"use client\";\n\nimport { motion, useReducedMotion } from \"framer-motion\";\nimport {\n createContext,\n KeyboardEvent,\n useContext,\n useId,\n useState,\n} from \"react\";\n\nimport { cn } from \"../../lib/utils\";\n\nimport { getTabsContentMotionProps } from \"./animations\";\nimport {\n TabsContentProps,\n TabsListProps,\n TabsProps,\n TabsTriggerProps,\n TabsValue,\n TabsContextType,\n} from \"./types\";\nimport { tabsListVariants, tabsTriggerVariants } from \"./variants\";\n\nexport const TabsContext = createContext<TabsContextType | null>(null);\n\nexport const useTabs = () => {\n const ctx = useContext(TabsContext);\n if (!ctx) throw new Error(\"Tabs components must be used within Tabs\");\n return ctx;\n};\n\nexport function Tabs({\n value,\n defaultValue,\n onValueChange,\n orientation = \"horizontal\",\n children,\n className,\n}: TabsProps) {\n const [internalValue, setInternalValue] = useState(defaultValue);\n const idPrefix = useId();\n\n const isControlled = value !== undefined;\n const currentValue = isControlled ? value : internalValue;\n\n const setValue = (val: string) => {\n if (!isControlled) setInternalValue(val);\n onValueChange?.(val);\n };\n\n const tabTriggerId = (tabValue: TabsValue) =>\n `${idPrefix}zentauri-tab-${tabValue}`;\n const tabPanelId = (tabValue: TabsValue) =>\n `${idPrefix}zentauri-panel-${tabValue}`;\n\n return (\n <TabsContext.Provider\n value={{\n value: currentValue,\n setValue,\n orientation,\n tabTriggerId,\n tabPanelId,\n }}\n >\n <div data-slot=\"tabs\" className={cn(\"w-full\", className)}>\n {children}\n </div>\n </TabsContext.Provider>\n );\n}\n\nexport function TabsList({ children, className, ...props }: TabsListProps) {\n const { orientation, size } = useTabs();\n\n return (\n <div\n role=\"tablist\"\n aria-orientation={orientation}\n className={cn(tabsListVariants({ orientation, size }), className)}\n {...props}\n >\n {children}\n </div>\n );\n}\n\nexport function TabsTrigger({\n value,\n children,\n disabled,\n className,\n ...props\n}: TabsTriggerProps) {\n const {\n value: activeValue,\n setValue,\n tabTriggerId,\n tabPanelId,\n size,\n appearance,\n variant,\n } = useTabs();\n\n const isActive = activeValue === value;\n\n const handleKeyDown = (e: KeyboardEvent<HTMLButtonElement>) => {\n const triggers = Array.from(\n document.querySelectorAll('[role=\"tab\"]'),\n ) as HTMLElement[];\n\n const index = triggers.findIndex((el) => el === e.currentTarget);\n\n if (e.key === \"ArrowRight\" || e.key === \"ArrowDown\") {\n e.preventDefault();\n triggers[index + 1]?.focus();\n }\n\n if (e.key === \"ArrowLeft\" || e.key === \"ArrowUp\") {\n e.preventDefault();\n triggers[index - 1]?.focus();\n }\n\n if (e.key === \"Home\") {\n e.preventDefault();\n triggers[0]?.focus();\n }\n\n if (e.key === \"End\") {\n e.preventDefault();\n triggers[triggers.length - 1]?.focus();\n }\n };\n\n return (\n <button\n id={tabTriggerId(value)}\n type=\"button\"\n role=\"tab\"\n data-state={isActive ? \"active\" : \"inactive\"}\n aria-selected={isActive}\n aria-controls={tabPanelId(value)}\n disabled={disabled}\n onClick={() => setValue(value)}\n onKeyDown={handleKeyDown}\n className={cn(\n tabsTriggerVariants({ size, appearance, variant }),\n className,\n \"cursor-pointer\",\n )}\n {...props}\n >\n {children}\n </button>\n );\n}\n\nexport function TabsContent({\n value,\n children,\n className,\n animation = \"fade\",\n ...props\n}: TabsContentProps) {\n const {\n value: activeValue,\n orientation,\n tabTriggerId,\n tabPanelId,\n } = useTabs();\n const prefersReducedMotion = useReducedMotion();\n\n if (activeValue !== value) return null;\n\n const motionProps = getTabsContentMotionProps(\n animation,\n orientation,\n Boolean(prefersReducedMotion),\n );\n\n return (\n <motion.div\n id={tabPanelId(value)}\n role=\"tabpanel\"\n aria-labelledby={tabTriggerId(value)}\n {...props}\n {...motionProps}\n className={cn(\"mt-2\", className)}\n >\n {children}\n </motion.div>\n );\n}\n"]}
|
|
1
|
+
{"version":3,"sources":[],"names":[],"mappings":"","file":"tabs.js"}
|
package/dist/ui/tabs.mjs
CHANGED
|
@@ -1,259 +1,5 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
|
|
3
|
-
import
|
|
4
|
-
import { createContext, useState, useId, useContext } from 'react';
|
|
5
|
-
import { cva } from 'class-variance-authority';
|
|
6
|
-
import { jsx } from 'react/jsx-runtime';
|
|
7
|
-
|
|
8
|
-
// src/ui/tabs/animations.ts
|
|
9
|
-
var easeOutExpo = [0.16, 1, 0.3, 1];
|
|
10
|
-
var tabsContentAnimationPresets = {
|
|
11
|
-
none: {},
|
|
12
|
-
fade: {
|
|
13
|
-
initial: { opacity: 0, y: 6 },
|
|
14
|
-
animate: { opacity: 1, y: 0 },
|
|
15
|
-
transition: { duration: 0.2, ease: easeOutExpo }
|
|
16
|
-
},
|
|
17
|
-
slide: {
|
|
18
|
-
initial: { opacity: 0, y: 8 },
|
|
19
|
-
animate: { opacity: 1, y: 0 },
|
|
20
|
-
transition: {
|
|
21
|
-
type: "spring",
|
|
22
|
-
stiffness: 420,
|
|
23
|
-
damping: 34,
|
|
24
|
-
mass: 0.82
|
|
25
|
-
}
|
|
26
|
-
}
|
|
27
|
-
};
|
|
28
|
-
function getTabsContentMotionProps(animation, orientation, reducedMotion) {
|
|
29
|
-
if (reducedMotion || animation === "none") {
|
|
30
|
-
return {};
|
|
31
|
-
}
|
|
32
|
-
if (animation === "fade") {
|
|
33
|
-
return tabsContentAnimationPresets.fade;
|
|
34
|
-
}
|
|
35
|
-
if (animation === "slide") {
|
|
36
|
-
const offset = 12;
|
|
37
|
-
return {
|
|
38
|
-
initial: orientation === "horizontal" ? { opacity: 0, x: offset, y: 0 } : { opacity: 0, x: 0, y: offset },
|
|
39
|
-
animate: { opacity: 1, x: 0, y: 0 },
|
|
40
|
-
transition: { duration: 0.22, ease: easeOutExpo }
|
|
41
|
-
};
|
|
42
|
-
}
|
|
43
|
-
return {};
|
|
44
|
-
}
|
|
45
|
-
var tabsListVariants = cva("flex items-center gap-1", {
|
|
46
|
-
variants: {
|
|
47
|
-
variant: {
|
|
48
|
-
default: "bg-transparent",
|
|
49
|
-
underline: "border-b-2 border-transparent",
|
|
50
|
-
pills: "rounded-md"
|
|
51
|
-
},
|
|
52
|
-
size: {
|
|
53
|
-
sm: "text-sm p-1",
|
|
54
|
-
md: "text-base p-1.5",
|
|
55
|
-
lg: "text-lg p-2"
|
|
56
|
-
},
|
|
57
|
-
orientation: {
|
|
58
|
-
horizontal: "flex-row",
|
|
59
|
-
vertical: "flex-col"
|
|
60
|
-
}
|
|
61
|
-
},
|
|
62
|
-
defaultVariants: {
|
|
63
|
-
size: "md",
|
|
64
|
-
orientation: "horizontal"
|
|
65
|
-
}
|
|
66
|
-
});
|
|
67
|
-
var tabsTriggerVariants = cva(
|
|
68
|
-
"px-3 py-1.5 rounded-md transition-all focus:outline-none focus:ring-2 focus:ring-ring",
|
|
69
|
-
{
|
|
70
|
-
variants: {
|
|
71
|
-
appearance: {
|
|
72
|
-
default: "bg-transparent",
|
|
73
|
-
sky: "bg-sky-500/75",
|
|
74
|
-
rose: "bg-rose-500/75",
|
|
75
|
-
purple: "bg-purple-500/75",
|
|
76
|
-
pink: "bg-pink-500/75",
|
|
77
|
-
orange: "bg-orange-500/75",
|
|
78
|
-
yellow: "bg-yellow-500/75",
|
|
79
|
-
teal: "bg-teal-500/75",
|
|
80
|
-
indigo: "bg-indigo-500/75",
|
|
81
|
-
emerald: "bg-emerald-500/75",
|
|
82
|
-
gray: "bg-gray-500/75",
|
|
83
|
-
"gradient-blue": "bg-gradient-to-r from-blue-600 to-purple-600",
|
|
84
|
-
"gradient-green": "bg-gradient-to-r from-green-600 to-lime-600",
|
|
85
|
-
"gradient-red": "bg-gradient-to-r from-red-600 to-pink-600",
|
|
86
|
-
"gradient-yellow": "bg-gradient-to-r from-yellow-600 to-orange-600",
|
|
87
|
-
"gradient-purple": "bg-gradient-to-r from-purple-600 to-pink-600",
|
|
88
|
-
"gradient-teal": "bg-gradient-to-r from-teal-600 to-cyan-600",
|
|
89
|
-
"gradient-indigo": "bg-gradient-to-r from-indigo-600 to-purple-600",
|
|
90
|
-
"gradient-pink": "bg-gradient-to-r from-pink-600 to-rose-600",
|
|
91
|
-
"gradient-orange": "bg-gradient-to-r from-orange-600 to-red-600"
|
|
92
|
-
},
|
|
93
|
-
variant: {
|
|
94
|
-
default: "data-[state=active]:bg-background",
|
|
95
|
-
underline: "border-b-2 border-transparent data-[state=active]:border-primary rounded-none",
|
|
96
|
-
pills: "data-[state=active]:bg-primary data-[state=active]:text-white"
|
|
97
|
-
},
|
|
98
|
-
size: {
|
|
99
|
-
sm: "px-2 py-1",
|
|
100
|
-
md: "px-3 py-1.5",
|
|
101
|
-
lg: "px-4 py-2"
|
|
102
|
-
}
|
|
103
|
-
},
|
|
104
|
-
defaultVariants: {
|
|
105
|
-
appearance: "default",
|
|
106
|
-
variant: "default",
|
|
107
|
-
size: "md"
|
|
108
|
-
}
|
|
109
|
-
}
|
|
110
|
-
);
|
|
111
|
-
var TabsContext = createContext(null);
|
|
112
|
-
var useTabs = () => {
|
|
113
|
-
const ctx = useContext(TabsContext);
|
|
114
|
-
if (!ctx) throw new Error("Tabs components must be used within Tabs");
|
|
115
|
-
return ctx;
|
|
116
|
-
};
|
|
117
|
-
function Tabs({
|
|
118
|
-
value,
|
|
119
|
-
defaultValue,
|
|
120
|
-
onValueChange,
|
|
121
|
-
orientation = "horizontal",
|
|
122
|
-
children,
|
|
123
|
-
className
|
|
124
|
-
}) {
|
|
125
|
-
const [internalValue, setInternalValue] = useState(defaultValue);
|
|
126
|
-
const idPrefix = useId();
|
|
127
|
-
const isControlled = value !== void 0;
|
|
128
|
-
const currentValue = isControlled ? value : internalValue;
|
|
129
|
-
const setValue = (val) => {
|
|
130
|
-
if (!isControlled) setInternalValue(val);
|
|
131
|
-
onValueChange?.(val);
|
|
132
|
-
};
|
|
133
|
-
const tabTriggerId = (tabValue) => `${idPrefix}zentauri-tab-${tabValue}`;
|
|
134
|
-
const tabPanelId = (tabValue) => `${idPrefix}zentauri-panel-${tabValue}`;
|
|
135
|
-
return /* @__PURE__ */ jsx(
|
|
136
|
-
TabsContext.Provider,
|
|
137
|
-
{
|
|
138
|
-
value: {
|
|
139
|
-
value: currentValue,
|
|
140
|
-
setValue,
|
|
141
|
-
orientation,
|
|
142
|
-
tabTriggerId,
|
|
143
|
-
tabPanelId
|
|
144
|
-
},
|
|
145
|
-
children: /* @__PURE__ */ jsx("div", { "data-slot": "tabs", className: cn("w-full", className), children })
|
|
146
|
-
}
|
|
147
|
-
);
|
|
148
|
-
}
|
|
149
|
-
function TabsList({ children, className, ...props }) {
|
|
150
|
-
const { orientation, size } = useTabs();
|
|
151
|
-
return /* @__PURE__ */ jsx(
|
|
152
|
-
"div",
|
|
153
|
-
{
|
|
154
|
-
role: "tablist",
|
|
155
|
-
"aria-orientation": orientation,
|
|
156
|
-
className: cn(tabsListVariants({ orientation, size }), className),
|
|
157
|
-
...props,
|
|
158
|
-
children
|
|
159
|
-
}
|
|
160
|
-
);
|
|
161
|
-
}
|
|
162
|
-
function TabsTrigger({
|
|
163
|
-
value,
|
|
164
|
-
children,
|
|
165
|
-
disabled,
|
|
166
|
-
className,
|
|
167
|
-
...props
|
|
168
|
-
}) {
|
|
169
|
-
const {
|
|
170
|
-
value: activeValue,
|
|
171
|
-
setValue,
|
|
172
|
-
tabTriggerId,
|
|
173
|
-
tabPanelId,
|
|
174
|
-
size,
|
|
175
|
-
appearance,
|
|
176
|
-
variant
|
|
177
|
-
} = useTabs();
|
|
178
|
-
const isActive = activeValue === value;
|
|
179
|
-
const handleKeyDown = (e) => {
|
|
180
|
-
const triggers = Array.from(
|
|
181
|
-
document.querySelectorAll('[role="tab"]')
|
|
182
|
-
);
|
|
183
|
-
const index = triggers.findIndex((el) => el === e.currentTarget);
|
|
184
|
-
if (e.key === "ArrowRight" || e.key === "ArrowDown") {
|
|
185
|
-
e.preventDefault();
|
|
186
|
-
triggers[index + 1]?.focus();
|
|
187
|
-
}
|
|
188
|
-
if (e.key === "ArrowLeft" || e.key === "ArrowUp") {
|
|
189
|
-
e.preventDefault();
|
|
190
|
-
triggers[index - 1]?.focus();
|
|
191
|
-
}
|
|
192
|
-
if (e.key === "Home") {
|
|
193
|
-
e.preventDefault();
|
|
194
|
-
triggers[0]?.focus();
|
|
195
|
-
}
|
|
196
|
-
if (e.key === "End") {
|
|
197
|
-
e.preventDefault();
|
|
198
|
-
triggers[triggers.length - 1]?.focus();
|
|
199
|
-
}
|
|
200
|
-
};
|
|
201
|
-
return /* @__PURE__ */ jsx(
|
|
202
|
-
"button",
|
|
203
|
-
{
|
|
204
|
-
id: tabTriggerId(value),
|
|
205
|
-
type: "button",
|
|
206
|
-
role: "tab",
|
|
207
|
-
"data-state": isActive ? "active" : "inactive",
|
|
208
|
-
"aria-selected": isActive,
|
|
209
|
-
"aria-controls": tabPanelId(value),
|
|
210
|
-
disabled,
|
|
211
|
-
onClick: () => setValue(value),
|
|
212
|
-
onKeyDown: handleKeyDown,
|
|
213
|
-
className: cn(
|
|
214
|
-
tabsTriggerVariants({ size, appearance, variant }),
|
|
215
|
-
className,
|
|
216
|
-
"cursor-pointer"
|
|
217
|
-
),
|
|
218
|
-
...props,
|
|
219
|
-
children
|
|
220
|
-
}
|
|
221
|
-
);
|
|
222
|
-
}
|
|
223
|
-
function TabsContent({
|
|
224
|
-
value,
|
|
225
|
-
children,
|
|
226
|
-
className,
|
|
227
|
-
animation = "fade",
|
|
228
|
-
...props
|
|
229
|
-
}) {
|
|
230
|
-
const {
|
|
231
|
-
value: activeValue,
|
|
232
|
-
orientation,
|
|
233
|
-
tabTriggerId,
|
|
234
|
-
tabPanelId
|
|
235
|
-
} = useTabs();
|
|
236
|
-
const prefersReducedMotion = useReducedMotion();
|
|
237
|
-
if (activeValue !== value) return null;
|
|
238
|
-
const motionProps = getTabsContentMotionProps(
|
|
239
|
-
animation,
|
|
240
|
-
orientation,
|
|
241
|
-
Boolean(prefersReducedMotion)
|
|
242
|
-
);
|
|
243
|
-
return /* @__PURE__ */ jsx(
|
|
244
|
-
motion.div,
|
|
245
|
-
{
|
|
246
|
-
id: tabPanelId(value),
|
|
247
|
-
role: "tabpanel",
|
|
248
|
-
"aria-labelledby": tabTriggerId(value),
|
|
249
|
-
...props,
|
|
250
|
-
...motionProps,
|
|
251
|
-
className: cn("mt-2", className),
|
|
252
|
-
children
|
|
253
|
-
}
|
|
254
|
-
);
|
|
255
|
-
}
|
|
256
|
-
|
|
257
|
-
export { Tabs, TabsContent, TabsList, TabsTrigger, getTabsContentMotionProps, tabsContentAnimationPresets, tabsListVariants, tabsTriggerVariants };
|
|
2
|
+
export { Tabs, TabsContent, TabsContext, TabsList, TabsTrigger, tabsListVariants, tabsTriggerVariants, useTabs } from '../chunk-7HL3A4YF.mjs';
|
|
3
|
+
import '../chunk-DFEZH7TC.mjs';
|
|
258
4
|
//# sourceMappingURL=tabs.mjs.map
|
|
259
5
|
//# sourceMappingURL=tabs.mjs.map
|