@next-degree/pickle-shared-js 0.12.2 → 0.12.3
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/dist/components/ui/StepTabs.cjs +21 -4
- package/dist/components/ui/StepTabs.cjs.map +1 -1
- package/dist/components/ui/StepTabs.d.cts +2 -2
- package/dist/components/ui/StepTabs.d.ts +2 -2
- package/dist/components/ui/StepTabs.js +21 -4
- package/dist/components/ui/StepTabs.js.map +1 -1
- package/dist/index.cjs +21 -4
- package/dist/index.cjs.map +1 -1
- package/dist/index.js +21 -4
- package/dist/index.js.map +1 -1
- package/dist/styles/globals.css +23 -0
- package/dist/styles/globals.css.map +1 -1
- package/package.json +1 -1
|
@@ -50,7 +50,20 @@ var tabParentVariants = (0, import_cva.cva)("flex flex-col", {
|
|
|
50
50
|
variants: {
|
|
51
51
|
variant: {
|
|
52
52
|
primary: "rounded-lg border shadow-sm",
|
|
53
|
-
neutral: ""
|
|
53
|
+
neutral: "",
|
|
54
|
+
minimal: "relative overflow-x-auto"
|
|
55
|
+
}
|
|
56
|
+
},
|
|
57
|
+
defaultVariants: {
|
|
58
|
+
variant: "primary"
|
|
59
|
+
}
|
|
60
|
+
});
|
|
61
|
+
var headerVariants = (0, import_cva.cva)("flex shrink-0 border-b border-grey-20", {
|
|
62
|
+
variants: {
|
|
63
|
+
variant: {
|
|
64
|
+
primary: "",
|
|
65
|
+
neutral: "",
|
|
66
|
+
minimal: "w-fit relative border-none"
|
|
54
67
|
}
|
|
55
68
|
},
|
|
56
69
|
defaultVariants: {
|
|
@@ -63,7 +76,8 @@ var singleTabVariants = (0, import_cva.cva)(
|
|
|
63
76
|
variants: {
|
|
64
77
|
variant: {
|
|
65
78
|
primary: "first:rounded-tl-md last:rounded-tr-md hover:text-purple-100 data-[state=active]:text-purple-100 data-[state=active]:shadow-[inset_0_-1px_0_0,0_1px_0_0] data-[state=active]:shadow-current data-[state=active]:focus:relative data-[state=active]:focus:shadow-[0_0_0_2px] data-[state=active]:focus:shadow-black",
|
|
66
|
-
neutral: "first:rounded-tl-md last:rounded-tr-md hover:text-black data-[state=active]:text-black data-[state=active]:shadow-[inset_0_-1px_0_0,0_1px_0_0] data-[state=active]:shadow-current data-[state=active]:focus:relative"
|
|
79
|
+
neutral: "first:rounded-tl-md last:rounded-tr-md hover:text-black data-[state=active]:text-black data-[state=active]:shadow-[inset_0_-1px_0_0,0_1px_0_0] data-[state=active]:shadow-current data-[state=active]:focus:relative",
|
|
80
|
+
minimal: "whitespace-nowrap flex-none first:rounded-tl-md last:rounded-tr-md hover:text-black data-[state=active]:font-bold data-[state=active]:text-black data-[state=active]:shadow-[inset_0_-2px_0_0] data-[state=active]:shadow-current data-[state=active]:focus:relative"
|
|
67
81
|
}
|
|
68
82
|
},
|
|
69
83
|
defaultVariants: {
|
|
@@ -91,7 +105,7 @@ function StepTabs({
|
|
|
91
105
|
className: cn(tabParentVariants({ variant }), className),
|
|
92
106
|
...props,
|
|
93
107
|
children: [
|
|
94
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Tabs.List, { className:
|
|
108
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Tabs.List, { className: cn(headerVariants({ variant })), children: list.length > 1 && list.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
95
109
|
Tabs.Trigger,
|
|
96
110
|
{
|
|
97
111
|
className: cn(singleTabVariants({ variant }), classNameTab),
|
|
@@ -103,7 +117,10 @@ function StepTabs({
|
|
|
103
117
|
children && children.map((child, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
104
118
|
Tabs.Content,
|
|
105
119
|
{
|
|
106
|
-
className:
|
|
120
|
+
className: cn(
|
|
121
|
+
"grow rounded-b-md bg-white p-5 outline-none",
|
|
122
|
+
variant === "minimal" && "border-t"
|
|
123
|
+
),
|
|
107
124
|
value: index.toString(),
|
|
108
125
|
children: child
|
|
109
126
|
},
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/ui/StepTabs.tsx","../../../src/lib/utils.ts"],"sourcesContent":["'use client'\n\nimport * as Tabs from '@radix-ui/react-tabs'\nimport { cva, type VariantProps } from 'cva'\nimport { type ReactNode } from 'react'\n\nimport { cn } from '@/lib/utils'\n\nconst tabParentVariants = cva('flex flex-col', {\n variants: {\n variant: {\n primary: 'rounded-lg border shadow-sm',\n neutral: '',\n },\n },\n defaultVariants: {\n variant: 'primary',\n },\n})\n\nconst singleTabVariants = cva(\n 'flex h-[45px] flex-1 cursor-pointer select-none items-center justify-center bg-white px-5 text-[15px] leading-none text-gray-800 outline-none',\n {\n variants: {\n variant: {\n primary:\n 'first:rounded-tl-md last:rounded-tr-md hover:text-purple-100 data-[state=active]:text-purple-100 data-[state=active]:shadow-[inset_0_-1px_0_0,0_1px_0_0] data-[state=active]:shadow-current data-[state=active]:focus:relative data-[state=active]:focus:shadow-[0_0_0_2px] data-[state=active]:focus:shadow-black',\n neutral:\n 'first:rounded-tl-md last:rounded-tr-md hover:text-black data-[state=active]:text-black data-[state=active]:shadow-[inset_0_-1px_0_0,0_1px_0_0] data-[state=active]:shadow-current data-[state=active]:focus:relative',\n },\n },\n defaultVariants: {\n variant: 'primary',\n },\n }\n)\n\ntype StepTabsProps = Tabs.TabsProps &\n VariantProps<typeof tabParentVariants> &\n VariantProps<typeof singleTabVariants> & {\n list: string[]\n currentStep?: string\n setCurrentStep?: (step: string) => void\n children?: ReactNode[]\n classNameTab?: string\n }\n\nexport function StepTabs({\n list,\n currentStep,\n setCurrentStep,\n children,\n className,\n classNameTab,\n defaultValue,\n variant,\n ...props\n}: StepTabsProps) {\n return (\n <Tabs.Root\n value={currentStep}\n onValueChange={setCurrentStep}\n defaultValue={defaultValue ?? '0'}\n className={cn(tabParentVariants({ variant }), className)}\n {...props}\n >\n <Tabs.List className
|
|
1
|
+
{"version":3,"sources":["../../../src/components/ui/StepTabs.tsx","../../../src/lib/utils.ts"],"sourcesContent":["'use client'\n\nimport * as Tabs from '@radix-ui/react-tabs'\nimport { cva, type VariantProps } from 'cva'\nimport { type ReactNode } from 'react'\n\nimport { cn } from '@/lib/utils'\n\nconst tabParentVariants = cva('flex flex-col', {\n variants: {\n variant: {\n primary: 'rounded-lg border shadow-sm',\n neutral: '',\n minimal: 'relative overflow-x-auto',\n },\n },\n defaultVariants: {\n variant: 'primary',\n },\n})\n\nconst headerVariants = cva('flex shrink-0 border-b border-grey-20', {\n variants: {\n variant: {\n primary: '',\n neutral: '',\n minimal: 'w-fit relative border-none',\n },\n },\n defaultVariants: {\n variant: 'primary',\n },\n})\n\nconst singleTabVariants = cva(\n 'flex h-[45px] flex-1 cursor-pointer select-none items-center justify-center bg-white px-5 text-[15px] leading-none text-gray-800 outline-none',\n {\n variants: {\n variant: {\n primary:\n 'first:rounded-tl-md last:rounded-tr-md hover:text-purple-100 data-[state=active]:text-purple-100 data-[state=active]:shadow-[inset_0_-1px_0_0,0_1px_0_0] data-[state=active]:shadow-current data-[state=active]:focus:relative data-[state=active]:focus:shadow-[0_0_0_2px] data-[state=active]:focus:shadow-black',\n neutral:\n 'first:rounded-tl-md last:rounded-tr-md hover:text-black data-[state=active]:text-black data-[state=active]:shadow-[inset_0_-1px_0_0,0_1px_0_0] data-[state=active]:shadow-current data-[state=active]:focus:relative',\n minimal:\n 'whitespace-nowrap flex-none first:rounded-tl-md last:rounded-tr-md hover:text-black data-[state=active]:font-bold data-[state=active]:text-black data-[state=active]:shadow-[inset_0_-2px_0_0] data-[state=active]:shadow-current data-[state=active]:focus:relative',\n },\n },\n defaultVariants: {\n variant: 'primary',\n },\n }\n)\n\ntype StepTabsProps = Tabs.TabsProps &\n VariantProps<typeof tabParentVariants> &\n VariantProps<typeof singleTabVariants> & {\n list: string[]\n currentStep?: string\n setCurrentStep?: (step: string) => void\n children?: ReactNode[]\n classNameTab?: string\n }\n\nexport function StepTabs({\n list,\n currentStep,\n setCurrentStep,\n children,\n className,\n classNameTab,\n defaultValue,\n variant,\n ...props\n}: StepTabsProps) {\n return (\n <Tabs.Root\n value={currentStep}\n onValueChange={setCurrentStep}\n defaultValue={defaultValue ?? '0'}\n className={cn(tabParentVariants({ variant }), className)}\n {...props}\n >\n <Tabs.List className={cn(headerVariants({ variant }))}>\n {list.length > 1 &&\n list.map((item, index) => (\n <Tabs.Trigger\n key={`${item}-${index}`}\n className={cn(singleTabVariants({ variant }), classNameTab)}\n value={index.toString()}\n >\n {item}\n </Tabs.Trigger>\n ))}\n </Tabs.List>\n\n {children &&\n children.map((child, index) => (\n <Tabs.Content\n key={index}\n className={cn(\n 'grow rounded-b-md bg-white p-5 outline-none',\n variant === 'minimal' && 'border-t'\n )}\n value={index.toString()}\n >\n {child}\n </Tabs.Content>\n ))}\n </Tabs.Root>\n )\n}\n","import { type ClassValue, clsx } from 'clsx'\nimport { twMerge } from 'tailwind-merge'\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs))\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,WAAsB;AACtB,iBAAuC;;;ACHvC,kBAAsC;AACtC,4BAAwB;AAEjB,SAAS,MAAM,QAAsB;AAC1C,aAAO,mCAAQ,kBAAK,MAAM,CAAC;AAC7B;;;ADsEI;AAnEJ,IAAM,wBAAoB,gBAAI,iBAAiB;AAAA,EAC7C,UAAU;AAAA,IACR,SAAS;AAAA,MACP,SAAS;AAAA,MACT,SAAS;AAAA,MACT,SAAS;AAAA,IACX;AAAA,EACF;AAAA,EACA,iBAAiB;AAAA,IACf,SAAS;AAAA,EACX;AACF,CAAC;AAED,IAAM,qBAAiB,gBAAI,yCAAyC;AAAA,EAClE,UAAU;AAAA,IACR,SAAS;AAAA,MACP,SAAS;AAAA,MACT,SAAS;AAAA,MACT,SAAS;AAAA,IACX;AAAA,EACF;AAAA,EACA,iBAAiB;AAAA,IACf,SAAS;AAAA,EACX;AACF,CAAC;AAED,IAAM,wBAAoB;AAAA,EACxB;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,SAAS;AAAA,QACP,SACE;AAAA,QACF,SACE;AAAA,QACF,SACE;AAAA,MACJ;AAAA,IACF;AAAA,IACA,iBAAiB;AAAA,MACf,SAAS;AAAA,IACX;AAAA,EACF;AACF;AAYO,SAAS,SAAS;AAAA,EACvB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAkB;AAChB,SACE;AAAA,IAAM;AAAA,IAAL;AAAA,MACC,OAAO;AAAA,MACP,eAAe;AAAA,MACf,cAAc,gBAAgB;AAAA,MAC9B,WAAW,GAAG,kBAAkB,EAAE,QAAQ,CAAC,GAAG,SAAS;AAAA,MACtD,GAAG;AAAA,MAEJ;AAAA,oDAAM,WAAL,EAAU,WAAW,GAAG,eAAe,EAAE,QAAQ,CAAC,CAAC,GACjD,eAAK,SAAS,KACb,KAAK,IAAI,CAAC,MAAM,UACd;AAAA,UAAM;AAAA,UAAL;AAAA,YAEC,WAAW,GAAG,kBAAkB,EAAE,QAAQ,CAAC,GAAG,YAAY;AAAA,YAC1D,OAAO,MAAM,SAAS;AAAA,YAErB;AAAA;AAAA,UAJI,GAAG,IAAI,IAAI,KAAK;AAAA,QAKvB,CACD,GACL;AAAA,QAEC,YACC,SAAS,IAAI,CAAC,OAAO,UACnB;AAAA,UAAM;AAAA,UAAL;AAAA,YAEC,WAAW;AAAA,cACT;AAAA,cACA,YAAY,aAAa;AAAA,YAC3B;AAAA,YACA,OAAO,MAAM,SAAS;AAAA,YAErB;AAAA;AAAA,UAPI;AAAA,QAQP,CACD;AAAA;AAAA;AAAA,EACL;AAEJ;","names":[]}
|
|
@@ -5,10 +5,10 @@ import { VariantProps } from 'cva';
|
|
|
5
5
|
import { ReactNode } from 'react';
|
|
6
6
|
|
|
7
7
|
declare const tabParentVariants: (props?: ({
|
|
8
|
-
variant?: "neutral" | "primary" | null | undefined;
|
|
8
|
+
variant?: "neutral" | "primary" | "minimal" | null | undefined;
|
|
9
9
|
} & cva_types.ClassProp) | undefined) => string;
|
|
10
10
|
declare const singleTabVariants: (props?: ({
|
|
11
|
-
variant?: "neutral" | "primary" | null | undefined;
|
|
11
|
+
variant?: "neutral" | "primary" | "minimal" | null | undefined;
|
|
12
12
|
} & cva_types.ClassProp) | undefined) => string;
|
|
13
13
|
type StepTabsProps = Tabs.TabsProps & VariantProps<typeof tabParentVariants> & VariantProps<typeof singleTabVariants> & {
|
|
14
14
|
list: string[];
|
|
@@ -5,10 +5,10 @@ import { VariantProps } from 'cva';
|
|
|
5
5
|
import { ReactNode } from 'react';
|
|
6
6
|
|
|
7
7
|
declare const tabParentVariants: (props?: ({
|
|
8
|
-
variant?: "neutral" | "primary" | null | undefined;
|
|
8
|
+
variant?: "neutral" | "primary" | "minimal" | null | undefined;
|
|
9
9
|
} & cva_types.ClassProp) | undefined) => string;
|
|
10
10
|
declare const singleTabVariants: (props?: ({
|
|
11
|
-
variant?: "neutral" | "primary" | null | undefined;
|
|
11
|
+
variant?: "neutral" | "primary" | "minimal" | null | undefined;
|
|
12
12
|
} & cva_types.ClassProp) | undefined) => string;
|
|
13
13
|
type StepTabsProps = Tabs.TabsProps & VariantProps<typeof tabParentVariants> & VariantProps<typeof singleTabVariants> & {
|
|
14
14
|
list: string[];
|
|
@@ -17,7 +17,20 @@ var tabParentVariants = cva("flex flex-col", {
|
|
|
17
17
|
variants: {
|
|
18
18
|
variant: {
|
|
19
19
|
primary: "rounded-lg border shadow-sm",
|
|
20
|
-
neutral: ""
|
|
20
|
+
neutral: "",
|
|
21
|
+
minimal: "relative overflow-x-auto"
|
|
22
|
+
}
|
|
23
|
+
},
|
|
24
|
+
defaultVariants: {
|
|
25
|
+
variant: "primary"
|
|
26
|
+
}
|
|
27
|
+
});
|
|
28
|
+
var headerVariants = cva("flex shrink-0 border-b border-grey-20", {
|
|
29
|
+
variants: {
|
|
30
|
+
variant: {
|
|
31
|
+
primary: "",
|
|
32
|
+
neutral: "",
|
|
33
|
+
minimal: "w-fit relative border-none"
|
|
21
34
|
}
|
|
22
35
|
},
|
|
23
36
|
defaultVariants: {
|
|
@@ -30,7 +43,8 @@ var singleTabVariants = cva(
|
|
|
30
43
|
variants: {
|
|
31
44
|
variant: {
|
|
32
45
|
primary: "first:rounded-tl-md last:rounded-tr-md hover:text-purple-100 data-[state=active]:text-purple-100 data-[state=active]:shadow-[inset_0_-1px_0_0,0_1px_0_0] data-[state=active]:shadow-current data-[state=active]:focus:relative data-[state=active]:focus:shadow-[0_0_0_2px] data-[state=active]:focus:shadow-black",
|
|
33
|
-
neutral: "first:rounded-tl-md last:rounded-tr-md hover:text-black data-[state=active]:text-black data-[state=active]:shadow-[inset_0_-1px_0_0,0_1px_0_0] data-[state=active]:shadow-current data-[state=active]:focus:relative"
|
|
46
|
+
neutral: "first:rounded-tl-md last:rounded-tr-md hover:text-black data-[state=active]:text-black data-[state=active]:shadow-[inset_0_-1px_0_0,0_1px_0_0] data-[state=active]:shadow-current data-[state=active]:focus:relative",
|
|
47
|
+
minimal: "whitespace-nowrap flex-none first:rounded-tl-md last:rounded-tr-md hover:text-black data-[state=active]:font-bold data-[state=active]:text-black data-[state=active]:shadow-[inset_0_-2px_0_0] data-[state=active]:shadow-current data-[state=active]:focus:relative"
|
|
34
48
|
}
|
|
35
49
|
},
|
|
36
50
|
defaultVariants: {
|
|
@@ -58,7 +72,7 @@ function StepTabs({
|
|
|
58
72
|
className: cn(tabParentVariants({ variant }), className),
|
|
59
73
|
...props,
|
|
60
74
|
children: [
|
|
61
|
-
/* @__PURE__ */ jsx(Tabs.List, { className:
|
|
75
|
+
/* @__PURE__ */ jsx(Tabs.List, { className: cn(headerVariants({ variant })), children: list.length > 1 && list.map((item, index) => /* @__PURE__ */ jsx(
|
|
62
76
|
Tabs.Trigger,
|
|
63
77
|
{
|
|
64
78
|
className: cn(singleTabVariants({ variant }), classNameTab),
|
|
@@ -70,7 +84,10 @@ function StepTabs({
|
|
|
70
84
|
children && children.map((child, index) => /* @__PURE__ */ jsx(
|
|
71
85
|
Tabs.Content,
|
|
72
86
|
{
|
|
73
|
-
className:
|
|
87
|
+
className: cn(
|
|
88
|
+
"grow rounded-b-md bg-white p-5 outline-none",
|
|
89
|
+
variant === "minimal" && "border-t"
|
|
90
|
+
),
|
|
74
91
|
value: index.toString(),
|
|
75
92
|
children: child
|
|
76
93
|
},
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/ui/StepTabs.tsx","../../../src/lib/utils.ts"],"sourcesContent":["'use client'\n\nimport * as Tabs from '@radix-ui/react-tabs'\nimport { cva, type VariantProps } from 'cva'\nimport { type ReactNode } from 'react'\n\nimport { cn } from '@/lib/utils'\n\nconst tabParentVariants = cva('flex flex-col', {\n variants: {\n variant: {\n primary: 'rounded-lg border shadow-sm',\n neutral: '',\n },\n },\n defaultVariants: {\n variant: 'primary',\n },\n})\n\nconst singleTabVariants = cva(\n 'flex h-[45px] flex-1 cursor-pointer select-none items-center justify-center bg-white px-5 text-[15px] leading-none text-gray-800 outline-none',\n {\n variants: {\n variant: {\n primary:\n 'first:rounded-tl-md last:rounded-tr-md hover:text-purple-100 data-[state=active]:text-purple-100 data-[state=active]:shadow-[inset_0_-1px_0_0,0_1px_0_0] data-[state=active]:shadow-current data-[state=active]:focus:relative data-[state=active]:focus:shadow-[0_0_0_2px] data-[state=active]:focus:shadow-black',\n neutral:\n 'first:rounded-tl-md last:rounded-tr-md hover:text-black data-[state=active]:text-black data-[state=active]:shadow-[inset_0_-1px_0_0,0_1px_0_0] data-[state=active]:shadow-current data-[state=active]:focus:relative',\n },\n },\n defaultVariants: {\n variant: 'primary',\n },\n }\n)\n\ntype StepTabsProps = Tabs.TabsProps &\n VariantProps<typeof tabParentVariants> &\n VariantProps<typeof singleTabVariants> & {\n list: string[]\n currentStep?: string\n setCurrentStep?: (step: string) => void\n children?: ReactNode[]\n classNameTab?: string\n }\n\nexport function StepTabs({\n list,\n currentStep,\n setCurrentStep,\n children,\n className,\n classNameTab,\n defaultValue,\n variant,\n ...props\n}: StepTabsProps) {\n return (\n <Tabs.Root\n value={currentStep}\n onValueChange={setCurrentStep}\n defaultValue={defaultValue ?? '0'}\n className={cn(tabParentVariants({ variant }), className)}\n {...props}\n >\n <Tabs.List className
|
|
1
|
+
{"version":3,"sources":["../../../src/components/ui/StepTabs.tsx","../../../src/lib/utils.ts"],"sourcesContent":["'use client'\n\nimport * as Tabs from '@radix-ui/react-tabs'\nimport { cva, type VariantProps } from 'cva'\nimport { type ReactNode } from 'react'\n\nimport { cn } from '@/lib/utils'\n\nconst tabParentVariants = cva('flex flex-col', {\n variants: {\n variant: {\n primary: 'rounded-lg border shadow-sm',\n neutral: '',\n minimal: 'relative overflow-x-auto',\n },\n },\n defaultVariants: {\n variant: 'primary',\n },\n})\n\nconst headerVariants = cva('flex shrink-0 border-b border-grey-20', {\n variants: {\n variant: {\n primary: '',\n neutral: '',\n minimal: 'w-fit relative border-none',\n },\n },\n defaultVariants: {\n variant: 'primary',\n },\n})\n\nconst singleTabVariants = cva(\n 'flex h-[45px] flex-1 cursor-pointer select-none items-center justify-center bg-white px-5 text-[15px] leading-none text-gray-800 outline-none',\n {\n variants: {\n variant: {\n primary:\n 'first:rounded-tl-md last:rounded-tr-md hover:text-purple-100 data-[state=active]:text-purple-100 data-[state=active]:shadow-[inset_0_-1px_0_0,0_1px_0_0] data-[state=active]:shadow-current data-[state=active]:focus:relative data-[state=active]:focus:shadow-[0_0_0_2px] data-[state=active]:focus:shadow-black',\n neutral:\n 'first:rounded-tl-md last:rounded-tr-md hover:text-black data-[state=active]:text-black data-[state=active]:shadow-[inset_0_-1px_0_0,0_1px_0_0] data-[state=active]:shadow-current data-[state=active]:focus:relative',\n minimal:\n 'whitespace-nowrap flex-none first:rounded-tl-md last:rounded-tr-md hover:text-black data-[state=active]:font-bold data-[state=active]:text-black data-[state=active]:shadow-[inset_0_-2px_0_0] data-[state=active]:shadow-current data-[state=active]:focus:relative',\n },\n },\n defaultVariants: {\n variant: 'primary',\n },\n }\n)\n\ntype StepTabsProps = Tabs.TabsProps &\n VariantProps<typeof tabParentVariants> &\n VariantProps<typeof singleTabVariants> & {\n list: string[]\n currentStep?: string\n setCurrentStep?: (step: string) => void\n children?: ReactNode[]\n classNameTab?: string\n }\n\nexport function StepTabs({\n list,\n currentStep,\n setCurrentStep,\n children,\n className,\n classNameTab,\n defaultValue,\n variant,\n ...props\n}: StepTabsProps) {\n return (\n <Tabs.Root\n value={currentStep}\n onValueChange={setCurrentStep}\n defaultValue={defaultValue ?? '0'}\n className={cn(tabParentVariants({ variant }), className)}\n {...props}\n >\n <Tabs.List className={cn(headerVariants({ variant }))}>\n {list.length > 1 &&\n list.map((item, index) => (\n <Tabs.Trigger\n key={`${item}-${index}`}\n className={cn(singleTabVariants({ variant }), classNameTab)}\n value={index.toString()}\n >\n {item}\n </Tabs.Trigger>\n ))}\n </Tabs.List>\n\n {children &&\n children.map((child, index) => (\n <Tabs.Content\n key={index}\n className={cn(\n 'grow rounded-b-md bg-white p-5 outline-none',\n variant === 'minimal' && 'border-t'\n )}\n value={index.toString()}\n >\n {child}\n </Tabs.Content>\n ))}\n </Tabs.Root>\n )\n}\n","import { type ClassValue, clsx } from 'clsx'\nimport { twMerge } from 'tailwind-merge'\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs))\n}\n"],"mappings":";;;AAEA,YAAY,UAAU;AACtB,SAAS,WAA8B;;;ACHvC,SAA0B,YAAY;AACtC,SAAS,eAAe;AAEjB,SAAS,MAAM,QAAsB;AAC1C,SAAO,QAAQ,KAAK,MAAM,CAAC;AAC7B;;;ADsEI,SAUQ,KAVR;AAnEJ,IAAM,oBAAoB,IAAI,iBAAiB;AAAA,EAC7C,UAAU;AAAA,IACR,SAAS;AAAA,MACP,SAAS;AAAA,MACT,SAAS;AAAA,MACT,SAAS;AAAA,IACX;AAAA,EACF;AAAA,EACA,iBAAiB;AAAA,IACf,SAAS;AAAA,EACX;AACF,CAAC;AAED,IAAM,iBAAiB,IAAI,yCAAyC;AAAA,EAClE,UAAU;AAAA,IACR,SAAS;AAAA,MACP,SAAS;AAAA,MACT,SAAS;AAAA,MACT,SAAS;AAAA,IACX;AAAA,EACF;AAAA,EACA,iBAAiB;AAAA,IACf,SAAS;AAAA,EACX;AACF,CAAC;AAED,IAAM,oBAAoB;AAAA,EACxB;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,SAAS;AAAA,QACP,SACE;AAAA,QACF,SACE;AAAA,QACF,SACE;AAAA,MACJ;AAAA,IACF;AAAA,IACA,iBAAiB;AAAA,MACf,SAAS;AAAA,IACX;AAAA,EACF;AACF;AAYO,SAAS,SAAS;AAAA,EACvB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAkB;AAChB,SACE;AAAA,IAAM;AAAA,IAAL;AAAA,MACC,OAAO;AAAA,MACP,eAAe;AAAA,MACf,cAAc,gBAAgB;AAAA,MAC9B,WAAW,GAAG,kBAAkB,EAAE,QAAQ,CAAC,GAAG,SAAS;AAAA,MACtD,GAAG;AAAA,MAEJ;AAAA,4BAAM,WAAL,EAAU,WAAW,GAAG,eAAe,EAAE,QAAQ,CAAC,CAAC,GACjD,eAAK,SAAS,KACb,KAAK,IAAI,CAAC,MAAM,UACd;AAAA,UAAM;AAAA,UAAL;AAAA,YAEC,WAAW,GAAG,kBAAkB,EAAE,QAAQ,CAAC,GAAG,YAAY;AAAA,YAC1D,OAAO,MAAM,SAAS;AAAA,YAErB;AAAA;AAAA,UAJI,GAAG,IAAI,IAAI,KAAK;AAAA,QAKvB,CACD,GACL;AAAA,QAEC,YACC,SAAS,IAAI,CAAC,OAAO,UACnB;AAAA,UAAM;AAAA,UAAL;AAAA,YAEC,WAAW;AAAA,cACT;AAAA,cACA,YAAY,aAAa;AAAA,YAC3B;AAAA,YACA,OAAO,MAAM,SAAS;AAAA,YAErB;AAAA;AAAA,UAPI;AAAA,QAQP,CACD;AAAA;AAAA;AAAA,EACL;AAEJ;","names":[]}
|
package/dist/index.cjs
CHANGED
|
@@ -2037,7 +2037,20 @@ var tabParentVariants = (0, import_cva10.cva)("flex flex-col", {
|
|
|
2037
2037
|
variants: {
|
|
2038
2038
|
variant: {
|
|
2039
2039
|
primary: "rounded-lg border shadow-sm",
|
|
2040
|
-
neutral: ""
|
|
2040
|
+
neutral: "",
|
|
2041
|
+
minimal: "relative overflow-x-auto"
|
|
2042
|
+
}
|
|
2043
|
+
},
|
|
2044
|
+
defaultVariants: {
|
|
2045
|
+
variant: "primary"
|
|
2046
|
+
}
|
|
2047
|
+
});
|
|
2048
|
+
var headerVariants = (0, import_cva10.cva)("flex shrink-0 border-b border-grey-20", {
|
|
2049
|
+
variants: {
|
|
2050
|
+
variant: {
|
|
2051
|
+
primary: "",
|
|
2052
|
+
neutral: "",
|
|
2053
|
+
minimal: "w-fit relative border-none"
|
|
2041
2054
|
}
|
|
2042
2055
|
},
|
|
2043
2056
|
defaultVariants: {
|
|
@@ -2050,7 +2063,8 @@ var singleTabVariants = (0, import_cva10.cva)(
|
|
|
2050
2063
|
variants: {
|
|
2051
2064
|
variant: {
|
|
2052
2065
|
primary: "first:rounded-tl-md last:rounded-tr-md hover:text-purple-100 data-[state=active]:text-purple-100 data-[state=active]:shadow-[inset_0_-1px_0_0,0_1px_0_0] data-[state=active]:shadow-current data-[state=active]:focus:relative data-[state=active]:focus:shadow-[0_0_0_2px] data-[state=active]:focus:shadow-black",
|
|
2053
|
-
neutral: "first:rounded-tl-md last:rounded-tr-md hover:text-black data-[state=active]:text-black data-[state=active]:shadow-[inset_0_-1px_0_0,0_1px_0_0] data-[state=active]:shadow-current data-[state=active]:focus:relative"
|
|
2066
|
+
neutral: "first:rounded-tl-md last:rounded-tr-md hover:text-black data-[state=active]:text-black data-[state=active]:shadow-[inset_0_-1px_0_0,0_1px_0_0] data-[state=active]:shadow-current data-[state=active]:focus:relative",
|
|
2067
|
+
minimal: "whitespace-nowrap flex-none first:rounded-tl-md last:rounded-tr-md hover:text-black data-[state=active]:font-bold data-[state=active]:text-black data-[state=active]:shadow-[inset_0_-2px_0_0] data-[state=active]:shadow-current data-[state=active]:focus:relative"
|
|
2054
2068
|
}
|
|
2055
2069
|
},
|
|
2056
2070
|
defaultVariants: {
|
|
@@ -2078,7 +2092,7 @@ function StepTabs({
|
|
|
2078
2092
|
className: cn(tabParentVariants({ variant }), className),
|
|
2079
2093
|
...props,
|
|
2080
2094
|
children: [
|
|
2081
|
-
/* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Tabs.List, { className:
|
|
2095
|
+
/* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Tabs.List, { className: cn(headerVariants({ variant })), children: list.length > 1 && list.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
|
|
2082
2096
|
Tabs.Trigger,
|
|
2083
2097
|
{
|
|
2084
2098
|
className: cn(singleTabVariants({ variant }), classNameTab),
|
|
@@ -2090,7 +2104,10 @@ function StepTabs({
|
|
|
2090
2104
|
children && children.map((child, index) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
|
|
2091
2105
|
Tabs.Content,
|
|
2092
2106
|
{
|
|
2093
|
-
className:
|
|
2107
|
+
className: cn(
|
|
2108
|
+
"grow rounded-b-md bg-white p-5 outline-none",
|
|
2109
|
+
variant === "minimal" && "border-t"
|
|
2110
|
+
),
|
|
2094
2111
|
value: index.toString(),
|
|
2095
2112
|
children: child
|
|
2096
2113
|
},
|