@health-samurai/react-components 0.0.0-alpha.1 → 0.0.0-alpha.3

package/dist/src/shadcn/components/ui/table.stories.js

@@ -1,54 +1,115 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, } from "#shadcn/components/ui/table";
+import { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow } from "./table.js";
 const invoices = [
     {
         invoice: "INV001",
         paymentStatus: "Paid",
         totalAmount: "$250.00",
-        paymentMethod: "Credit Card",
+        paymentMethod: "Credit Card"
     },
     {
         invoice: "INV002",
         paymentStatus: "Pending",
         totalAmount: "$150.00",
-        paymentMethod: "PayPal",
+        paymentMethod: "PayPal"
     },
     {
         invoice: "INV003",
         paymentStatus: "Unpaid",
         totalAmount: "$350.00",
-        paymentMethod: "Bank Transfer",
+        paymentMethod: "Bank Transfer"
     },
     {
         invoice: "INV004",
         paymentStatus: "Paid",
         totalAmount: "$450.00",
-        paymentMethod: "Credit Card",
+        paymentMethod: "Credit Card"
     },
     {
         invoice: "INV005",
         paymentStatus: "Paid",
         totalAmount: "$550.00",
-        paymentMethod: "PayPal",
+        paymentMethod: "PayPal"
     },
     {
         invoice: "INV006",
         paymentStatus: "Pending",
         totalAmount: "$200.00",
-        paymentMethod: "Bank Transfer",
+        paymentMethod: "Bank Transfer"
     },
     {
         invoice: "INV007",
         paymentStatus: "Unpaid",
         totalAmount: "$300.00",
-        paymentMethod: "Credit Card",
-    },
+        paymentMethod: "Credit Card"
+    }
 ];
 const meta = {
-    title: "Component/Table",
+    title: "Component/Table"
 };
 export default meta;
 export const Demo = {
-    render: () => (_jsxs(Table, { children: [_jsx(TableCaption, { children: "A list of your recent invoices." }), _jsx(TableHeader, { children: _jsxs(TableRow, { children: [_jsx(TableHead, { className: "w-[100px]", children: "Invoice" }), _jsx(TableHead, { children: "Status" }), _jsx(TableHead, { children: "Method" }), _jsx(TableHead, { className: "text-right", children: "Amount" })] }) }), _jsx(TableBody, { children: invoices.map((invoice) => (_jsxs(TableRow, { children: [_jsx(TableCell, { className: "font-medium", children: invoice.invoice }), _jsx(TableCell, { children: invoice.paymentStatus }), _jsx(TableCell, { children: invoice.paymentMethod }), _jsx(TableCell, { className: "text-right", children: invoice.totalAmount })] }, invoice.invoice))) }), _jsx(TableFooter, { children: _jsxs(TableRow, { children: [_jsx(TableCell, { colSpan: 3, children: "Total" }), _jsx(TableCell, { className: "text-right", children: "$2,500.00" })] }) })] })),
+    render: ()=>/*#__PURE__*/ _jsxs(Table, {
+            children: [
+                /*#__PURE__*/ _jsx(TableCaption, {
+                    children: "A list of your recent invoices."
+                }),
+                /*#__PURE__*/ _jsx(TableHeader, {
+                    children: /*#__PURE__*/ _jsxs(TableRow, {
+                        children: [
+                            /*#__PURE__*/ _jsx(TableHead, {
+                                className: "w-[100px]",
+                                children: "Invoice"
+                            }),
+                            /*#__PURE__*/ _jsx(TableHead, {
+                                children: "Status"
+                            }),
+                            /*#__PURE__*/ _jsx(TableHead, {
+                                children: "Method"
+                            }),
+                            /*#__PURE__*/ _jsx(TableHead, {
+                                className: "text-right",
+                                children: "Amount"
+                            })
+                        ]
+                    })
+                }),
+                /*#__PURE__*/ _jsx(TableBody, {
+                    children: invoices.map((invoice)=>/*#__PURE__*/ _jsxs(TableRow, {
+                            children: [
+                                /*#__PURE__*/ _jsx(TableCell, {
+                                    className: "font-medium",
+                                    children: invoice.invoice
+                                }),
+                                /*#__PURE__*/ _jsx(TableCell, {
+                                    children: invoice.paymentStatus
+                                }),
+                                /*#__PURE__*/ _jsx(TableCell, {
+                                    children: invoice.paymentMethod
+                                }),
+                                /*#__PURE__*/ _jsx(TableCell, {
+                                    className: "text-right",
+                                    children: invoice.totalAmount
+                                })
+                            ]
+                        }, invoice.invoice))
+                }),
+                /*#__PURE__*/ _jsx(TableFooter, {
+                    children: /*#__PURE__*/ _jsxs(TableRow, {
+                        children: [
+                            /*#__PURE__*/ _jsx(TableCell, {
+                                colSpan: 3,
+                                children: "Total"
+                            }),
+                            /*#__PURE__*/ _jsx(TableCell, {
+                                className: "text-right",
+                                children: "$2,500.00"
+                            })
+                        ]
+                    })
+                })
+            ]
+        })
 };
+
 //# sourceMappingURL=table.stories.js.map

package/dist/src/shadcn/components/ui/table.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"table.stories.js","sourceRoot":"","sources":["../../../../../src/shadcn/components/ui/table.stories.tsx"],"names":[],"mappings":";AACA,OAAO,EACN,KAAK,EACL,SAAS,EACT,YAAY,EACZ,SAAS,EACT,WAAW,EACX,SAAS,EACT,WAAW,EACX,QAAQ,GACR,MAAM,6BAA6B,CAAC;AAErC,MAAM,QAAQ,GAAG;IAChB;QACC,OAAO,EAAE,QAAQ;QACjB,aAAa,EAAE,MAAM;QACrB,WAAW,EAAE,SAAS;QACtB,aAAa,EAAE,aAAa;KAC5B;IACD;QACC,OAAO,EAAE,QAAQ;QACjB,aAAa,EAAE,SAAS;QACxB,WAAW,EAAE,SAAS;QACtB,aAAa,EAAE,QAAQ;KACvB;IACD;QACC,OAAO,EAAE,QAAQ;QACjB,aAAa,EAAE,QAAQ;QACvB,WAAW,EAAE,SAAS;QACtB,aAAa,EAAE,eAAe;KAC9B;IACD;QACC,OAAO,EAAE,QAAQ;QACjB,aAAa,EAAE,MAAM;QACrB,WAAW,EAAE,SAAS;QACtB,aAAa,EAAE,aAAa;KAC5B;IACD;QACC,OAAO,EAAE,QAAQ;QACjB,aAAa,EAAE,MAAM;QACrB,WAAW,EAAE,SAAS;QACtB,aAAa,EAAE,QAAQ;KACvB;IACD;QACC,OAAO,EAAE,QAAQ;QACjB,aAAa,EAAE,SAAS;QACxB,WAAW,EAAE,SAAS;QACtB,aAAa,EAAE,eAAe;KAC9B;IACD;QACC,OAAO,EAAE,QAAQ;QACjB,aAAa,EAAE,QAAQ;QACvB,WAAW,EAAE,SAAS;QACtB,aAAa,EAAE,aAAa;KAC5B;CACD,CAAC;AAEF,MAAM,IAAI,GAAG;IACZ,KAAK,EAAE,iBAAiB;CACT,CAAC;AACjB,eAAe,IAAI,CAAC;AAIpB,MAAM,CAAC,MAAM,IAAI,GAAG;IACnB,MAAM,EAAE,GAAG,EAAE,CAAC,CACb,MAAC,KAAK,eACL,KAAC,YAAY,kDAA+C,EAC5D,KAAC,WAAW,cACX,MAAC,QAAQ,eACR,KAAC,SAAS,IAAC,SAAS,EAAC,WAAW,wBAAoB,EACpD,KAAC,SAAS,yBAAmB,EAC7B,KAAC,SAAS,yBAAmB,EAC7B,KAAC,SAAS,IAAC,SAAS,EAAC,YAAY,uBAAmB,IAC1C,GACE,EACd,KAAC,SAAS,cACR,QAAQ,CAAC,GAAG,CAAC,CAAC,OAAO,EAAE,EAAE,CAAC,CAC1B,MAAC,QAAQ,eACR,KAAC,SAAS,IAAC,SAAS,EAAC,aAAa,YAAE,OAAO,CAAC,OAAO,GAAa,EAChE,KAAC,SAAS,cAAE,OAAO,CAAC,aAAa,GAAa,EAC9C,KAAC,SAAS,cAAE,OAAO,CAAC,aAAa,GAAa,EAC9C,KAAC,SAAS,IAAC,SAAS,EAAC,YAAY,YAAE,OAAO,CAAC,WAAW,GAAa,KAJrD,OAAO,CAAC,OAAO,CAKnB,CACX,CAAC,GACS,EACZ,KAAC,WAAW,cACX,MAAC,QAAQ,eACR,KAAC,SAAS,IAAC,OAAO,EAAE,CAAC,sBAAmB,EACxC,KAAC,SAAS,IAAC,SAAS,EAAC,YAAY,0BAAsB,IAC7C,GACE,IACP,CACR;CACe,CAAC"}
+{"version":3,"sources":["../../../../../src/shadcn/components/ui/table.stories.tsx"],"sourcesContent":["import type { Meta, StoryObj } from \"@storybook/react-vite\";\nimport {\n\tTable,\n\tTableBody,\n\tTableCaption,\n\tTableCell,\n\tTableFooter,\n\tTableHead,\n\tTableHeader,\n\tTableRow,\n} from \"#shadcn/components/ui/table\";\n\nconst invoices = [\n\t{\n\t\tinvoice: \"INV001\",\n\t\tpaymentStatus: \"Paid\",\n\t\ttotalAmount: \"$250.00\",\n\t\tpaymentMethod: \"Credit Card\",\n\t},\n\t{\n\t\tinvoice: \"INV002\",\n\t\tpaymentStatus: \"Pending\",\n\t\ttotalAmount: \"$150.00\",\n\t\tpaymentMethod: \"PayPal\",\n\t},\n\t{\n\t\tinvoice: \"INV003\",\n\t\tpaymentStatus: \"Unpaid\",\n\t\ttotalAmount: \"$350.00\",\n\t\tpaymentMethod: \"Bank Transfer\",\n\t},\n\t{\n\t\tinvoice: \"INV004\",\n\t\tpaymentStatus: \"Paid\",\n\t\ttotalAmount: \"$450.00\",\n\t\tpaymentMethod: \"Credit Card\",\n\t},\n\t{\n\t\tinvoice: \"INV005\",\n\t\tpaymentStatus: \"Paid\",\n\t\ttotalAmount: \"$550.00\",\n\t\tpaymentMethod: \"PayPal\",\n\t},\n\t{\n\t\tinvoice: \"INV006\",\n\t\tpaymentStatus: \"Pending\",\n\t\ttotalAmount: \"$200.00\",\n\t\tpaymentMethod: \"Bank Transfer\",\n\t},\n\t{\n\t\tinvoice: \"INV007\",\n\t\tpaymentStatus: \"Unpaid\",\n\t\ttotalAmount: \"$300.00\",\n\t\tpaymentMethod: \"Credit Card\",\n\t},\n];\n\nconst meta = {\n\ttitle: \"Component/Table\",\n} satisfies Meta;\nexport default meta;\n\ntype Story = StoryObj<typeof meta>;\n\nexport const Demo = {\n\trender: () => (\n\t\t<Table>\n\t\t\t<TableCaption>A list of your recent invoices.</TableCaption>\n\t\t\t<TableHeader>\n\t\t\t\t<TableRow>\n\t\t\t\t\t<TableHead className=\"w-[100px]\">Invoice</TableHead>\n\t\t\t\t\t<TableHead>Status</TableHead>\n\t\t\t\t\t<TableHead>Method</TableHead>\n\t\t\t\t\t<TableHead className=\"text-right\">Amount</TableHead>\n\t\t\t\t</TableRow>\n\t\t\t</TableHeader>\n\t\t\t<TableBody>\n\t\t\t\t{invoices.map((invoice) => (\n\t\t\t\t\t<TableRow key={invoice.invoice}>\n\t\t\t\t\t\t<TableCell className=\"font-medium\">{invoice.invoice}</TableCell>\n\t\t\t\t\t\t<TableCell>{invoice.paymentStatus}</TableCell>\n\t\t\t\t\t\t<TableCell>{invoice.paymentMethod}</TableCell>\n\t\t\t\t\t\t<TableCell className=\"text-right\">{invoice.totalAmount}</TableCell>\n\t\t\t\t\t</TableRow>\n\t\t\t\t))}\n\t\t\t</TableBody>\n\t\t\t<TableFooter>\n\t\t\t\t<TableRow>\n\t\t\t\t\t<TableCell colSpan={3}>Total</TableCell>\n\t\t\t\t\t<TableCell className=\"text-right\">$2,500.00</TableCell>\n\t\t\t\t</TableRow>\n\t\t\t</TableFooter>\n\t\t</Table>\n\t),\n} satisfies Story;\n"],"names":["Table","TableBody","TableCaption","TableCell","TableFooter","TableHead","TableHeader","TableRow","invoices","invoice","paymentStatus","totalAmount","paymentMethod","meta","title","Demo","render","className","map","colSpan"],"mappings":";AACA,SACCA,KAAK,EACLC,SAAS,EACTC,YAAY,EACZC,SAAS,EACTC,WAAW,EACXC,SAAS,EACTC,WAAW,EACXC,QAAQ,QACF,aAA8B;AAErC,MAAMC,WAAW;IAChB;QACCC,SAAS;QACTC,eAAe;QACfC,aAAa;QACbC,eAAe;IAChB;IACA;QACCH,SAAS;QACTC,eAAe;QACfC,aAAa;QACbC,eAAe;IAChB;IACA;QACCH,SAAS;QACTC,eAAe;QACfC,aAAa;QACbC,eAAe;IAChB;IACA;QACCH,SAAS;QACTC,eAAe;QACfC,aAAa;QACbC,eAAe;IAChB;IACA;QACCH,SAAS;QACTC,eAAe;QACfC,aAAa;QACbC,eAAe;IAChB;IACA;QACCH,SAAS;QACTC,eAAe;QACfC,aAAa;QACbC,eAAe;IAChB;IACA;QACCH,SAAS;QACTC,eAAe;QACfC,aAAa;QACbC,eAAe;IAChB;CACA;AAED,MAAMC,OAAO;IACZC,OAAO;AACR;AACA,eAAeD,KAAK;AAIpB,OAAO,MAAME,OAAO;IACnBC,QAAQ,kBACP,MAAChB;;8BACA,KAACE;8BAAa;;8BACd,KAACI;8BACA,cAAA,MAACC;;0CACA,KAACF;gCAAUY,WAAU;0CAAY;;0CACjC,KAACZ;0CAAU;;0CACX,KAACA;0CAAU;;0CACX,KAACA;gCAAUY,WAAU;0CAAa;;;;;8BAGpC,KAAChB;8BACCO,SAASU,GAAG,CAAC,CAACT,wBACd,MAACF;;8CACA,KAACJ;oCAAUc,WAAU;8CAAeR,QAAQA,OAAO;;8CACnD,KAACN;8CAAWM,QAAQC,aAAa;;8CACjC,KAACP;8CAAWM,QAAQG,aAAa;;8CACjC,KAACT;oCAAUc,WAAU;8CAAcR,QAAQE,WAAW;;;2BAJxCF,QAAQA,OAAO;;8BAQhC,KAACL;8BACA,cAAA,MAACG;;0CACA,KAACJ;gCAAUgB,SAAS;0CAAG;;0CACvB,KAAChB;gCAAUc,WAAU;0CAAa;;;;;;;AAKvC,EAAkB"}

package/dist/src/shadcn/components/ui/tabs.d.ts

@@ -1,12 +1,16 @@
 import * as TabsPrimitive from "@radix-ui/react-tabs";
 import { type VariantProps } from "class-variance-authority";
 import type * as React from "react";
-declare function Tabs({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
-declare const tabListVariants: (props?: ({
-    variant?: "button" | "dashed" | null | undefined;
+import { Button } from "./button";
+declare const tabsVariants: (props?: ({
+    variant?: "browser" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
-declare function TabsList({ className, variant, ...props }: React.ComponentProps<typeof TabsPrimitive.List> & VariantProps<typeof tabListVariants>): import("react/jsx-runtime").JSX.Element;
-declare function TabsTrigger({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Trigger>): import("react/jsx-runtime").JSX.Element;
+declare function Tabs({ className, variant, ...props }: React.ComponentProps<typeof TabsPrimitive.Root> & VariantProps<typeof tabsVariants>): import("react/jsx-runtime").JSX.Element;
+export declare function TabsAddButton(props: React.ComponentProps<typeof Button>): import("react/jsx-runtime").JSX.Element;
+declare function TabsList({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.List>): import("react/jsx-runtime").JSX.Element;
+declare function TabsTrigger({ className, onClose, ...props }: React.ComponentProps<typeof TabsPrimitive.Trigger> & {
+    onClose?: (value: string) => void;
+}): import("react/jsx-runtime").JSX.Element;
 declare function TabsContent({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Content>): import("react/jsx-runtime").JSX.Element;
 export { Tabs, TabsList, TabsTrigger, TabsContent };
 //# sourceMappingURL=tabs.d.ts.map

package/dist/src/shadcn/components/ui/tabs.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tabs.d.ts","sourceRoot":"","sources":["../../../../../src/shadcn/components/ui/tabs.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,aAAa,MAAM,sBAAsB,CAAC;AACtD,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAGpC,iBAAS,IAAI,CAAC,EACb,SAAS,EACT,GAAG,KAAK,EACR,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,aAAa,CAAC,IAAI,CAAC,2CAQjD;AAED,QAAA,MAAM,eAAe;;8EAUnB,CAAC;AAEH,iBAAS,QAAQ,CAAC,EACjB,SAAS,EACT,OAAO,EACP,GAAG,KAAK,EACR,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,aAAa,CAAC,IAAI,CAAC,GACjD,YAAY,CAAC,OAAO,eAAe,CAAC,2CAYpC;AAED,iBAAS,WAAW,CAAC,EACpB,SAAS,EACT,GAAG,KAAK,EACR,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,aAAa,CAAC,OAAO,CAAC,2CAgBpD;AAED,iBAAS,WAAW,CAAC,EACpB,SAAS,EACT,GAAG,KAAK,EACR,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,aAAa,CAAC,OAAO,CAAC,2CAQpD;AAED,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,WAAW,EAAE,WAAW,EAAE,CAAC"}
+{"version":3,"file":"tabs.d.ts","sourceRoot":"","sources":["../../../../../src/shadcn/components/ui/tabs.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,aAAa,MAAM,sBAAsB,CAAC;AACtD,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAElE,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAEpC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAElC,QAAA,MAAM,YAAY;;8EAsBhB,CAAC;AAEH,iBAAS,IAAI,CAAC,EACb,SAAS,EACT,OAAO,EACP,GAAG,KAAK,EACR,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,aAAa,CAAC,IAAI,CAAC,GACjD,YAAY,CAAC,OAAO,YAAY,CAAC,2CAQjC;AAED,wBAAgB,aAAa,CAAC,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,MAAM,CAAC,2CAavE;AAED,iBAAS,QAAQ,CAAC,EACjB,SAAS,EACT,GAAG,KAAK,EACR,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,aAAa,CAAC,IAAI,CAAC,2CAQjD;AAED,iBAAS,WAAW,CAAC,EACpB,SAAS,EACT,OAAO,EACP,GAAG,KAAK,EACR,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,aAAa,CAAC,OAAO,CAAC,GAAG;IACvD,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CAClC,2CAsCA;AAED,iBAAS,WAAW,CAAC,EACpB,SAAS,EACT,GAAG,KAAK,EACR,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,aAAa,CAAC,OAAO,CAAC,2CAQpD;AAED,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,WAAW,EAAE,WAAW,EAAE,CAAC"}

package/dist/src/shadcn/components/ui/tabs.js

@@ -1,29 +1,87 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as TabsPrimitive from "@radix-ui/react-tabs";
 import { cva } from "class-variance-authority";
-import { cn } from "#shadcn/lib/utils";
-function Tabs({ className, ...props }) {
-    return (_jsx(TabsPrimitive.Root, { "data-slot": "tabs", className: cn("flex flex-col", className), ...props }));
-}
-const tabListVariants = cva("", {
+import { Plus, X } from "lucide-react";
+import { cn } from "../../lib/utils.js";
+import { Button } from "./button.js";
+const tabsVariants = cva("", {
     variants: {
         variant: {
-            button: "",
-            dashed: "",
-        },
-    },
-    defaultVariants: {
-        variant: "dashed",
-    },
+            browser: cn(// Tabs
+            `flex-row 
+				 items-center
+				 h-10
+				 `, // TabsList
+            `**:data-[slot=tabs-list]:overflow-x-auto
+				 **:data-[slot=tabs-list]:divide-x`, // TabsTrigger
+            `**:data-[slot=tabs-trigger]:max-w-80 
+				 **:data-[slot=tabs-trigger]:min-w-40
+				 **:data-[slot=tabs-trigger]:data-[state=inactive]:border-b-1
+				 **:data-[slot=tabs-trigger]:data-[state=inactive]:border-b-border-secondary
+				 **:data-[slot=tabs-trigger]:data-[state=inactive]:pt-[9px]
+				 `)
+        }
+    }
 });
-function TabsList({ className, variant, ...props }) {
-    return (_jsx(TabsPrimitive.List, { "data-slot": "tabs-list", className: cn(tabListVariants({ variant }), "inline-flex w-fit items-center", className), ...props }));
+function Tabs({ className, variant, ...props }) {
+    return /*#__PURE__*/ _jsx(TabsPrimitive.Root, {
+        "data-slot": "tabs",
+        className: cn("flex flex-col", tabsVariants({
+            variant
+        }), className),
+        ...props
+    });
+}
+export function TabsAddButton(props) {
+    return /*#__PURE__*/ _jsx("div", {
+        className: "grow h-full bg-bg-secondary border-l border-b",
+        children: /*#__PURE__*/ _jsx(Button, {
+            "data-slot": "tabs-add-button",
+            variant: "link",
+            className: "h-full",
+            ...props,
+            children: /*#__PURE__*/ _jsx(Plus, {})
+        })
+    });
+}
+function TabsList({ className, ...props }) {
+    return /*#__PURE__*/ _jsx(TabsPrimitive.List, {
+        "data-slot": "tabs-list",
+        className: cn("inline-flex w-fit items-center", className),
+        ...props
+    });
 }
-function TabsTrigger({ className, ...props }) {
-    return (_jsx(TabsPrimitive.Trigger, { "data-slot": "tabs-trigger", className: cn("h-10 typo-label px-3 py-2 cursor-pointer text-text-tertiary data-[state=active]:text-text-primary border-b-2", "data-[state=active]:border-border-brand border-transparent hover:text-text-tertiary-hover focus-visible:border-ring", "focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input dark:text-muted-foreground", "inline-flex flex-1 items-center justify-center whitespace-nowrap transition-[color,box-shadow,border]", "focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50", "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className), ...props }));
+function TabsTrigger({ className, onClose, ...props }) {
+    return /*#__PURE__*/ _jsxs(TabsPrimitive.Trigger, {
+        "data-slot": "tabs-trigger",
+        className: cn("group/tabs-trigger", "box-border h-10 typo-body px-3 pb-2 pt-2.5 cursor-pointer text-text-tertiary data-[state=active]:text-text-primary", "data-[state=active]:border-b-border-brand border-b-2 border-b-transparent hover:text-text-tertiary-hover focus-visible:border-ring", "focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input dark:text-muted-foreground", "inline-flex flex-1 items-center justify-center whitespace-nowrap transition-[color,box-shadow]", "focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50", "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", "hover:bg-bg-secondary/60", onClose ? "justify-between" : "", className),
+        ...props,
+        children: [
+            props.children,
+            onClose && /*#__PURE__*/ _jsx(Button, {
+                onClick: (event)=>{
+                    event.stopPropagation();
+                    onClose(props.value);
+                },
+                variant: "link",
+                size: "small",
+                className: "p-0 ml-2",
+                asChild: true,
+                children: /*#__PURE__*/ _jsx("span", {
+                    children: /*#__PURE__*/ _jsx(X, {})
+                })
+            })
+        ]
+    });
 }
 function TabsContent({ className, ...props }) {
-    return (_jsx(TabsPrimitive.Content, { "data-slot": "tabs-content", className: cn("flex-1 outline-none", className), ...props }));
+    return /*#__PURE__*/ _jsx(TabsPrimitive.Content, {
+        "data-slot": "tabs-content",
+        className: cn("flex-1 outline-none", className),
+        ...props
+    });
 }
 export { Tabs, TabsList, TabsTrigger, TabsContent };
+
 //# sourceMappingURL=tabs.js.map

package/dist/src/shadcn/components/ui/tabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"tabs.js","sourceRoot":"","sources":["../../../../../src/shadcn/components/ui/tabs.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,aAAa,MAAM,sBAAsB,CAAC;AACtD,OAAO,EAAE,GAAG,EAAqB,MAAM,0BAA0B,CAAC;AAElE,OAAO,EAAE,EAAE,EAAE,MAAM,mBAAmB,CAAC;AAEvC,SAAS,IAAI,CAAC,EACb,SAAS,EACT,GAAG,KAAK,EACyC;IACjD,OAAO,CACN,KAAC,aAAa,CAAC,IAAI,iBACR,MAAM,EAChB,SAAS,EAAE,EAAE,CAAC,eAAe,EAAE,SAAS,CAAC,KACrC,KAAK,GACR,CACF,CAAC;AACH,CAAC;AAED,MAAM,eAAe,GAAG,GAAG,CAAC,EAAE,EAAE;IAC/B,QAAQ,EAAE;QACT,OAAO,EAAE;YACR,MAAM,EAAE,EAAE;YACV,MAAM,EAAE,EAAE;SACV;KACD;IACD,eAAe,EAAE;QAChB,OAAO,EAAE,QAAQ;KACjB;CACD,CAAC,CAAC;AAEH,SAAS,QAAQ,CAAC,EACjB,SAAS,EACT,OAAO,EACP,GAAG,KAAK,EAE4B;IACpC,OAAO,CACN,KAAC,aAAa,CAAC,IAAI,iBACR,WAAW,EACrB,SAAS,EAAE,EAAE,CACZ,eAAe,CAAC,EAAE,OAAO,EAAE,CAAC,EAC5B,gCAAgC,EAChC,SAAS,CACT,KACG,KAAK,GACR,CACF,CAAC;AACH,CAAC;AAED,SAAS,WAAW,CAAC,EACpB,SAAS,EACT,GAAG,KAAK,EAC4C;IACpD,OAAO,CACN,KAAC,aAAa,CAAC,OAAO,iBACX,cAAc,EACxB,SAAS,EAAE,EAAE,CACZ,8GAA8G,EAC9G,qHAAqH,EACrH,wHAAwH,EACxH,uGAAuG,EACvG,mGAAmG,EACnG,mFAAmF,EACnF,SAAS,CACT,KACG,KAAK,GACR,CACF,CAAC;AACH,CAAC;AAED,SAAS,WAAW,CAAC,EACpB,SAAS,EACT,GAAG,KAAK,EAC4C;IACpD,OAAO,CACN,KAAC,aAAa,CAAC,OAAO,iBACX,cAAc,EACxB,SAAS,EAAE,EAAE,CAAC,qBAAqB,EAAE,SAAS,CAAC,KAC3C,KAAK,GACR,CACF,CAAC;AACH,CAAC;AAED,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,WAAW,EAAE,WAAW,EAAE,CAAC"}
+{"version":3,"sources":["../../../../../src/shadcn/components/ui/tabs.tsx"],"sourcesContent":["\"use client\";\nimport * as TabsPrimitive from \"@radix-ui/react-tabs\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { Plus, X } from \"lucide-react\";\nimport type * as React from \"react\";\nimport { cn } from \"#shadcn/lib/utils\";\nimport { Button } from \"./button\";\n\nconst tabsVariants = cva(\"\", {\n\tvariants: {\n\t\tvariant: {\n\t\t\tbrowser: cn(\n\t\t\t\t// Tabs\n\t\t\t\t`flex-row \n\t\t\t\t items-center\n\t\t\t\t h-10\n\t\t\t\t `,\n\t\t\t\t// TabsList\n\t\t\t\t`**:data-[slot=tabs-list]:overflow-x-auto\n\t\t\t\t **:data-[slot=tabs-list]:divide-x`,\n\t\t\t\t// TabsTrigger\n\t\t\t\t`**:data-[slot=tabs-trigger]:max-w-80 \n\t\t\t\t **:data-[slot=tabs-trigger]:min-w-40\n\t\t\t\t **:data-[slot=tabs-trigger]:data-[state=inactive]:border-b-1\n\t\t\t\t **:data-[slot=tabs-trigger]:data-[state=inactive]:border-b-border-secondary\n\t\t\t\t **:data-[slot=tabs-trigger]:data-[state=inactive]:pt-[9px]\n\t\t\t\t `, // TODO: Try to implement this without using pt-[9px].\n\t\t\t),\n\t\t},\n\t},\n});\n\nfunction Tabs({\n\tclassName,\n\tvariant,\n\t...props\n}: React.ComponentProps<typeof TabsPrimitive.Root> &\n\tVariantProps<typeof tabsVariants>) {\n\treturn (\n\t\t<TabsPrimitive.Root\n\t\t\tdata-slot=\"tabs\"\n\t\t\tclassName={cn(\"flex flex-col\", tabsVariants({ variant }), className)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nexport function TabsAddButton(props: React.ComponentProps<typeof Button>) {\n\treturn (\n\t\t<div className=\"grow h-full bg-bg-secondary border-l border-b\">\n\t\t\t<Button\n\t\t\t\tdata-slot=\"tabs-add-button\"\n\t\t\t\tvariant=\"link\"\n\t\t\t\tclassName=\"h-full\"\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t<Plus />\n\t\t\t</Button>\n\t\t</div>\n\t);\n}\n\nfunction TabsList({\n\tclassName,\n\t...props\n}: React.ComponentProps<typeof TabsPrimitive.List>) {\n\treturn (\n\t\t<TabsPrimitive.List\n\t\t\tdata-slot=\"tabs-list\"\n\t\t\tclassName={cn(\"inline-flex w-fit items-center\", className)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nfunction TabsTrigger({\n\tclassName,\n\tonClose,\n\t...props\n}: React.ComponentProps<typeof TabsPrimitive.Trigger> & {\n\tonClose?: (value: string) => void;\n}) {\n\treturn (\n\t\t<TabsPrimitive.Trigger\n\t\t\tdata-slot=\"tabs-trigger\"\n\t\t\tclassName={cn(\n\t\t\t\t\"group/tabs-trigger\",\n\t\t\t\t\"box-border h-10 typo-body px-3 pb-2 pt-2.5 cursor-pointer text-text-tertiary data-[state=active]:text-text-primary\",\n\t\t\t\t\"data-[state=active]:border-b-border-brand border-b-2 border-b-transparent hover:text-text-tertiary-hover focus-visible:border-ring\",\n\t\t\t\t\"focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input dark:text-muted-foreground\",\n\t\t\t\t\"inline-flex flex-1 items-center justify-center whitespace-nowrap transition-[color,box-shadow]\",\n\t\t\t\t\"focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50\",\n\t\t\t\t\"[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n\t\t\t\t\"hover:bg-bg-secondary/60\",\n\t\t\t\tonClose ? \"justify-between\" : \"\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t>\n\t\t\t{props.children}\n\n\t\t\t{onClose && (\n\t\t\t\t<Button\n\t\t\t\t\tonClick={(event) => {\n\t\t\t\t\t\tevent.stopPropagation();\n\t\t\t\t\t\tonClose(props.value);\n\t\t\t\t\t}}\n\t\t\t\t\tvariant=\"link\"\n\t\t\t\t\tsize=\"small\"\n\t\t\t\t\tclassName=\"p-0 ml-2\"\n\t\t\t\t\tasChild\n\t\t\t\t>\n\t\t\t\t\t<span>\n\t\t\t\t\t\t<X />\n\t\t\t\t\t</span>\n\t\t\t\t</Button>\n\t\t\t)}\n\t\t</TabsPrimitive.Trigger>\n\t);\n}\n\nfunction TabsContent({\n\tclassName,\n\t...props\n}: React.ComponentProps<typeof TabsPrimitive.Content>) {\n\treturn (\n\t\t<TabsPrimitive.Content\n\t\t\tdata-slot=\"tabs-content\"\n\t\t\tclassName={cn(\"flex-1 outline-none\", className)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nexport { Tabs, TabsList, TabsTrigger, TabsContent };\n"],"names":["TabsPrimitive","cva","Plus","X","cn","Button","tabsVariants","variants","variant","browser","Tabs","className","props","Root","data-slot","TabsAddButton","div","TabsList","List","TabsTrigger","onClose","Trigger","children","onClick","event","stopPropagation","value","size","asChild","span","TabsContent","Content"],"mappings":"AAAA;;AACA,YAAYA,mBAAmB,uBAAuB;AACtD,SAASC,GAAG,QAA2B,2BAA2B;AAClE,SAASC,IAAI,EAAEC,CAAC,QAAQ,eAAe;AAEvC,SAASC,EAAE,QAAQ,qBAAoB;AACvC,SAASC,MAAM,QAAQ,cAAW;AAElC,MAAMC,eAAeL,IAAI,IAAI;IAC5BM,UAAU;QACTC,SAAS;YACRC,SAASL,GACR,OAAO;YACP,CAAC;;;KAGA,CAAC,EACF,WAAW;YACX,CAAC;sCACiC,CAAC,EACnC,cAAc;YACd,CAAC;;;;;KAKA,CAAC;QAEJ;IACD;AACD;AAEA,SAASM,KAAK,EACbC,SAAS,EACTH,OAAO,EACP,GAAGI,OAE8B;IACjC,qBACC,KAACZ,cAAca,IAAI;QAClBC,aAAU;QACVH,WAAWP,GAAG,iBAAiBE,aAAa;YAAEE;QAAQ,IAAIG;QACzD,GAAGC,KAAK;;AAGZ;AAEA,OAAO,SAASG,cAAcH,KAA0C;IACvE,qBACC,KAACI;QAAIL,WAAU;kBACd,cAAA,KAACN;YACAS,aAAU;YACVN,SAAQ;YACRG,WAAU;YACT,GAAGC,KAAK;sBAET,cAAA,KAACV;;;AAIL;AAEA,SAASe,SAAS,EACjBN,SAAS,EACT,GAAGC,OAC8C;IACjD,qBACC,KAACZ,cAAckB,IAAI;QAClBJ,aAAU;QACVH,WAAWP,GAAG,kCAAkCO;QAC/C,GAAGC,KAAK;;AAGZ;AAEA,SAASO,YAAY,EACpBR,SAAS,EACTS,OAAO,EACP,GAAGR,OAGH;IACA,qBACC,MAACZ,cAAcqB,OAAO;QACrBP,aAAU;QACVH,WAAWP,GACV,sBACA,sHACA,sIACA,0HACA,kGACA,qGACA,qFACA,4BACAgB,UAAU,oBAAoB,IAC9BT;QAEA,GAAGC,KAAK;;YAERA,MAAMU,QAAQ;YAEdF,yBACA,KAACf;gBACAkB,SAAS,CAACC;oBACTA,MAAMC,eAAe;oBACrBL,QAAQR,MAAMc,KAAK;gBACpB;gBACAlB,SAAQ;gBACRmB,MAAK;gBACLhB,WAAU;gBACViB,OAAO;0BAEP,cAAA,KAACC;8BACA,cAAA,KAAC1B;;;;;AAMP;AAEA,SAAS2B,YAAY,EACpBnB,SAAS,EACT,GAAGC,OACiD;IACpD,qBACC,KAACZ,cAAc+B,OAAO;QACrBjB,aAAU;QACVH,WAAWP,GAAG,uBAAuBO;QACpC,GAAGC,KAAK;;AAGZ;AAEA,SAASF,IAAI,EAAEO,QAAQ,EAAEE,WAAW,EAAEW,WAAW,GAAG"}

package/dist/src/shadcn/components/ui/tabs.stories.d.ts

@@ -23,4 +23,10 @@ export declare const Demo: {
         };
     }) => import("react/jsx-runtime").JSX.Element;
 };
+export declare const Browser: {
+    parameters: {
+        layout: string;
+    };
+    render: () => import("react/jsx-runtime").JSX.Element;
+};
 //# sourceMappingURL=tabs.stories.d.ts.map

package/dist/src/shadcn/components/ui/tabs.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tabs.stories.d.ts","sourceRoot":"","sources":["../../../../../src/shadcn/components/ui/tabs.stories.tsx"],"names":[],"mappings":"AAmBA,QAAA,MAAM,IAAI;;;;;;;;;;CAQM,CAAC;AACjB,eAAe,IAAI,CAAC;AAIpB,eAAO,MAAM,IAAI;;;;;;;;;;;;CA2DA,CAAC"}
+{"version":3,"file":"tabs.stories.d.ts","sourceRoot":"","sources":["../../../../../src/shadcn/components/ui/tabs.stories.tsx"],"names":[],"mappings":"AAqBA,QAAA,MAAM,IAAI;;;;;;;;;;CAQM,CAAC;AACjB,eAAe,IAAI,CAAC;AAIpB,eAAO,MAAM,IAAI;;;;;;;;;;;;CA2DA,CAAC;AAclB,eAAO,MAAM,OAAO;;;;;CAyCH,CAAC"}

package/dist/src/shadcn/components/ui/tabs.stories.js

@@ -1,20 +1,231 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Button } from "#shadcn/components/ui/button";
-import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, } from "#shadcn/components/ui/card";
-import { Input } from "#shadcn/components/ui/input";
-import { Label } from "#shadcn/components/ui/label";
-import { Tabs, TabsContent, TabsList, TabsTrigger, } from "#shadcn/components/ui/tabs";
+import { action } from "storybook/internal/actions";
+import { Button } from "./button.js";
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "./card.js";
+import { Input } from "./input.js";
+import { Label } from "./label.js";
+import { Tabs, TabsAddButton, TabsContent, TabsList, TabsTrigger } from "./tabs.js";
 const meta = {
     title: "Component/Tabs",
     argTypes: {
         variant: {
-            options: ["button", "dashed"],
-            control: { type: "select" },
-        },
-    },
+            options: [
+                "button",
+                "dashed"
+            ],
+            control: {
+                type: "select"
+            }
+        }
+    }
 };
 export default meta;
 export const Demo = {
-    render: (props) => (_jsx("div", { className: "flex w-full max-w-sm flex-col gap-6", children: _jsxs(Tabs, { defaultValue: "account", ...props, children: [_jsxs(TabsList, { children: [_jsx(TabsTrigger, { value: "account", children: "Account" }), _jsx(TabsTrigger, { value: "password", children: "Password" })] }), _jsx(TabsContent, { value: "account", children: _jsxs(Card, { children: [_jsxs(CardHeader, { children: [_jsx(CardTitle, { children: "Account" }), _jsx(CardDescription, { children: "Make changes to your account here. Click save when you're done." })] }), _jsxs(CardContent, { className: "grid gap-6", children: [_jsxs("div", { className: "grid gap-3", children: [_jsx(Label, { htmlFor: "tabs-demo-name", children: "Name" }), _jsx(Input, { id: "tabs-demo-name", defaultValue: "Pedro Duarte" })] }), _jsxs("div", { className: "grid gap-3", children: [_jsx(Label, { htmlFor: "tabs-demo-username", children: "Username" }), _jsx(Input, { id: "tabs-demo-username", defaultValue: "@peduarte" })] })] }), _jsx(CardFooter, { children: _jsx(Button, { children: "Save changes" }) })] }) }), _jsx(TabsContent, { value: "password", children: _jsxs(Card, { children: [_jsxs(CardHeader, { children: [_jsx(CardTitle, { children: "Password" }), _jsx(CardDescription, { children: "Change your password here. After saving, you'll be logged out." })] }), _jsxs(CardContent, { className: "grid gap-6", children: [_jsxs("div", { className: "grid gap-3", children: [_jsx(Label, { htmlFor: "tabs-demo-current", children: "Current password" }), _jsx(Input, { id: "tabs-demo-current", type: "password" })] }), _jsxs("div", { className: "grid gap-3", children: [_jsx(Label, { htmlFor: "tabs-demo-new", children: "New password" }), _jsx(Input, { id: "tabs-demo-new", type: "password" })] })] }), _jsx(CardFooter, { children: _jsx(Button, { children: "Save password" }) })] }) })] }) })),
+    render: (props)=>/*#__PURE__*/ _jsx("div", {
+            className: "flex w-full max-w-sm flex-col gap-6",
+            children: /*#__PURE__*/ _jsxs(Tabs, {
+                defaultValue: "account",
+                ...props,
+                children: [
+                    /*#__PURE__*/ _jsxs(TabsList, {
+                        children: [
+                            /*#__PURE__*/ _jsx(TabsTrigger, {
+                                value: "account",
+                                children: "Account"
+                            }),
+                            /*#__PURE__*/ _jsx(TabsTrigger, {
+                                value: "password",
+                                children: "Password"
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ _jsx(TabsContent, {
+                        value: "account",
+                        children: /*#__PURE__*/ _jsxs(Card, {
+                            children: [
+                                /*#__PURE__*/ _jsxs(CardHeader, {
+                                    children: [
+                                        /*#__PURE__*/ _jsx(CardTitle, {
+                                            children: "Account"
+                                        }),
+                                        /*#__PURE__*/ _jsx(CardDescription, {
+                                            children: "Make changes to your account here. Click save when you're done."
+                                        })
+                                    ]
+                                }),
+                                /*#__PURE__*/ _jsxs(CardContent, {
+                                    className: "grid gap-6",
+                                    children: [
+                                        /*#__PURE__*/ _jsxs("div", {
+                                            className: "grid gap-3",
+                                            children: [
+                                                /*#__PURE__*/ _jsx(Label, {
+                                                    htmlFor: "tabs-demo-name",
+                                                    children: "Name"
+                                                }),
+                                                /*#__PURE__*/ _jsx(Input, {
+                                                    id: "tabs-demo-name",
+                                                    defaultValue: "Pedro Duarte"
+                                                })
+                                            ]
+                                        }),
+                                        /*#__PURE__*/ _jsxs("div", {
+                                            className: "grid gap-3",
+                                            children: [
+                                                /*#__PURE__*/ _jsx(Label, {
+                                                    htmlFor: "tabs-demo-username",
+                                                    children: "Username"
+                                                }),
+                                                /*#__PURE__*/ _jsx(Input, {
+                                                    id: "tabs-demo-username",
+                                                    defaultValue: "@peduarte"
+                                                })
+                                            ]
+                                        })
+                                    ]
+                                }),
+                                /*#__PURE__*/ _jsx(CardFooter, {
+                                    children: /*#__PURE__*/ _jsx(Button, {
+                                        children: "Save changes"
+                                    })
+                                })
+                            ]
+                        })
+                    }),
+                    /*#__PURE__*/ _jsx(TabsContent, {
+                        value: "password",
+                        children: /*#__PURE__*/ _jsxs(Card, {
+                            children: [
+                                /*#__PURE__*/ _jsxs(CardHeader, {
+                                    children: [
+                                        /*#__PURE__*/ _jsx(CardTitle, {
+                                            children: "Password"
+                                        }),
+                                        /*#__PURE__*/ _jsx(CardDescription, {
+                                            children: "Change your password here. After saving, you'll be logged out."
+                                        })
+                                    ]
+                                }),
+                                /*#__PURE__*/ _jsxs(CardContent, {
+                                    className: "grid gap-6",
+                                    children: [
+                                        /*#__PURE__*/ _jsxs("div", {
+                                            className: "grid gap-3",
+                                            children: [
+                                                /*#__PURE__*/ _jsx(Label, {
+                                                    htmlFor: "tabs-demo-current",
+                                                    children: "Current password"
+                                                }),
+                                                /*#__PURE__*/ _jsx(Input, {
+                                                    id: "tabs-demo-current",
+                                                    type: "password"
+                                                })
+                                            ]
+                                        }),
+                                        /*#__PURE__*/ _jsxs("div", {
+                                            className: "grid gap-3",
+                                            children: [
+                                                /*#__PURE__*/ _jsx(Label, {
+                                                    htmlFor: "tabs-demo-new",
+                                                    children: "New password"
+                                                }),
+                                                /*#__PURE__*/ _jsx(Input, {
+                                                    id: "tabs-demo-new",
+                                                    type: "password"
+                                                })
+                                            ]
+                                        })
+                                    ]
+                                }),
+                                /*#__PURE__*/ _jsx(CardFooter, {
+                                    children: /*#__PURE__*/ _jsx(Button, {
+                                        children: "Save password"
+                                    })
+                                })
+                            ]
+                        })
+                    })
+                ]
+            })
+        })
+};
+function BrowserTabOnClose(value) {
+    action("onClose")(value);
+}
+function BrowserTabOnClick() {
+    action("onClick")();
+}
+function BrowserTabOnAdd() {
+    action("onAdd")();
+}
+export const Browser = {
+    parameters: {
+        layout: "fullscreen"
+    },
+    render: ()=>/*#__PURE__*/ _jsxs(Tabs, {
+            defaultValue: "first",
+            variant: "browser",
+            children: [
+                /*#__PURE__*/ _jsxs(TabsList, {
+                    children: [
+                        /*#__PURE__*/ _jsx(TabsTrigger, {
+                            value: "first",
+                            onClick: BrowserTabOnClick,
+                            onClose: BrowserTabOnClose,
+                            children: /*#__PURE__*/ _jsxs("span", {
+                                className: "flex items-center gap-1",
+                                children: [
+                                    /*#__PURE__*/ _jsx("span", {
+                                        className: "text-utility-green",
+                                        children: "GET"
+                                    }),
+                                    /*#__PURE__*/ _jsx("span", {
+                                        children: "/fhir/Patient"
+                                    })
+                                ]
+                            })
+                        }),
+                        /*#__PURE__*/ _jsx(TabsTrigger, {
+                            value: "second",
+                            onClick: BrowserTabOnClick,
+                            onClose: BrowserTabOnClose,
+                            children: /*#__PURE__*/ _jsxs("span", {
+                                className: "flex items-center gap-1",
+                                children: [
+                                    /*#__PURE__*/ _jsx("span", {
+                                        className: "text-utility-yellow",
+                                        children: "POST"
+                                    }),
+                                    /*#__PURE__*/ _jsx("span", {
+                                        children: "/fhir"
+                                    })
+                                ]
+                            })
+                        }),
+                        /*#__PURE__*/ _jsx(TabsTrigger, {
+                            value: "third",
+                            onClick: BrowserTabOnClick,
+                            onClose: BrowserTabOnClose,
+                            children: /*#__PURE__*/ _jsxs("span", {
+                                className: "flex items-center gap-1",
+                                children: [
+                                    /*#__PURE__*/ _jsx("span", {
+                                        className: "text-utility-yellow",
+                                        children: "POST"
+                                    }),
+                                    /*#__PURE__*/ _jsx("span", {
+                                        children: "/$graphql"
+                                    })
+                                ]
+                            })
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ _jsx(TabsAddButton, {
+                    onClick: BrowserTabOnAdd
+                })
+            ]
+        })
 };
+
 //# sourceMappingURL=tabs.stories.js.map

package/dist/src/shadcn/components/ui/tabs.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"tabs.stories.js","sourceRoot":"","sources":["../../../../../src/shadcn/components/ui/tabs.stories.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,MAAM,EAAE,MAAM,8BAA8B,CAAC;AACtD,OAAO,EACN,IAAI,EACJ,WAAW,EACX,eAAe,EACf,UAAU,EACV,UAAU,EACV,SAAS,GACT,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAE,KAAK,EAAE,MAAM,6BAA6B,CAAC;AACpD,OAAO,EAAE,KAAK,EAAE,MAAM,6BAA6B,CAAC;AACpD,OAAO,EACN,IAAI,EACJ,WAAW,EACX,QAAQ,EACR,WAAW,GACX,MAAM,4BAA4B,CAAC;AAEpC,MAAM,IAAI,GAAG;IACZ,KAAK,EAAE,gBAAgB;IACvB,QAAQ,EAAE;QACT,OAAO,EAAE;YACR,OAAO,EAAE,CAAC,QAAQ,EAAE,QAAQ,CAAC;YAC7B,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;SAC3B;KACD;CACc,CAAC;AACjB,eAAe,IAAI,CAAC;AAIpB,MAAM,CAAC,MAAM,IAAI,GAAG;IACnB,MAAM,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,CAClB,cAAK,SAAS,EAAC,qCAAqC,YACnD,MAAC,IAAI,IAAC,YAAY,EAAC,SAAS,KAAK,KAAK,aACrC,MAAC,QAAQ,eACR,KAAC,WAAW,IAAC,KAAK,EAAC,SAAS,wBAAsB,EAClD,KAAC,WAAW,IAAC,KAAK,EAAC,UAAU,yBAAuB,IAC1C,EACX,KAAC,WAAW,IAAC,KAAK,EAAC,SAAS,YAC3B,MAAC,IAAI,eACJ,MAAC,UAAU,eACV,KAAC,SAAS,0BAAoB,EAC9B,KAAC,eAAe,kFAGE,IACN,EACb,MAAC,WAAW,IAAC,SAAS,EAAC,YAAY,aAClC,eAAK,SAAS,EAAC,YAAY,aAC1B,KAAC,KAAK,IAAC,OAAO,EAAC,gBAAgB,qBAAa,EAC5C,KAAC,KAAK,IAAC,EAAE,EAAC,gBAAgB,EAAC,YAAY,EAAC,cAAc,GAAG,IACpD,EACN,eAAK,SAAS,EAAC,YAAY,aAC1B,KAAC,KAAK,IAAC,OAAO,EAAC,oBAAoB,yBAAiB,EACpD,KAAC,KAAK,IAAC,EAAE,EAAC,oBAAoB,EAAC,YAAY,EAAC,WAAW,GAAG,IACrD,IACO,EACd,KAAC,UAAU,cACV,KAAC,MAAM,+BAAsB,GACjB,IACP,GACM,EACd,KAAC,WAAW,IAAC,KAAK,EAAC,UAAU,YAC5B,MAAC,IAAI,eACJ,MAAC,UAAU,eACV,KAAC,SAAS,2BAAqB,EAC/B,KAAC,eAAe,iFAGE,IACN,EACb,MAAC,WAAW,IAAC,SAAS,EAAC,YAAY,aAClC,eAAK,SAAS,EAAC,YAAY,aAC1B,KAAC,KAAK,IAAC,OAAO,EAAC,mBAAmB,iCAAyB,EAC3D,KAAC,KAAK,IAAC,EAAE,EAAC,mBAAmB,EAAC,IAAI,EAAC,UAAU,GAAG,IAC3C,EACN,eAAK,SAAS,EAAC,YAAY,aAC1B,KAAC,KAAK,IAAC,OAAO,EAAC,eAAe,6BAAqB,EACnD,KAAC,KAAK,IAAC,EAAE,EAAC,eAAe,EAAC,IAAI,EAAC,UAAU,GAAG,IACvC,IACO,EACd,KAAC,UAAU,cACV,KAAC,MAAM,gCAAuB,GAClB,IACP,GACM,IACR,GACF,CACN;CACe,CAAC"}
+{"version":3,"sources":["../../../../../src/shadcn/components/ui/tabs.stories.tsx"],"sourcesContent":["import type { Meta, StoryObj } from \"@storybook/react-vite\";\nimport { action } from \"storybook/internal/actions\";\nimport { Button } from \"#shadcn/components/ui/button\";\nimport {\n\tCard,\n\tCardContent,\n\tCardDescription,\n\tCardFooter,\n\tCardHeader,\n\tCardTitle,\n} from \"#shadcn/components/ui/card\";\nimport { Input } from \"#shadcn/components/ui/input\";\nimport { Label } from \"#shadcn/components/ui/label\";\nimport {\n\tTabs,\n\tTabsAddButton,\n\tTabsContent,\n\tTabsList,\n\tTabsTrigger,\n} from \"#shadcn/components/ui/tabs\";\n\nconst meta = {\n\ttitle: \"Component/Tabs\",\n\targTypes: {\n\t\tvariant: {\n\t\t\toptions: [\"button\", \"dashed\"],\n\t\t\tcontrol: { type: \"select\" },\n\t\t},\n\t},\n} satisfies Meta;\nexport default meta;\n\ntype Story = StoryObj<typeof meta>;\n\nexport const Demo = {\n\trender: (props) => (\n\t\t<div className=\"flex w-full max-w-sm flex-col gap-6\">\n\t\t\t<Tabs defaultValue=\"account\" {...props}>\n\t\t\t\t<TabsList>\n\t\t\t\t\t<TabsTrigger value=\"account\">Account</TabsTrigger>\n\t\t\t\t\t<TabsTrigger value=\"password\">Password</TabsTrigger>\n\t\t\t\t</TabsList>\n\t\t\t\t<TabsContent value=\"account\">\n\t\t\t\t\t<Card>\n\t\t\t\t\t\t<CardHeader>\n\t\t\t\t\t\t\t<CardTitle>Account</CardTitle>\n\t\t\t\t\t\t\t<CardDescription>\n\t\t\t\t\t\t\t\tMake changes to your account here. Click save when you&apos;re\n\t\t\t\t\t\t\t\tdone.\n\t\t\t\t\t\t\t</CardDescription>\n\t\t\t\t\t\t</CardHeader>\n\t\t\t\t\t\t<CardContent className=\"grid gap-6\">\n\t\t\t\t\t\t\t<div className=\"grid gap-3\">\n\t\t\t\t\t\t\t\t<Label htmlFor=\"tabs-demo-name\">Name</Label>\n\t\t\t\t\t\t\t\t<Input id=\"tabs-demo-name\" defaultValue=\"Pedro Duarte\" />\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t<div className=\"grid gap-3\">\n\t\t\t\t\t\t\t\t<Label htmlFor=\"tabs-demo-username\">Username</Label>\n\t\t\t\t\t\t\t\t<Input id=\"tabs-demo-username\" defaultValue=\"@peduarte\" />\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</CardContent>\n\t\t\t\t\t\t<CardFooter>\n\t\t\t\t\t\t\t<Button>Save changes</Button>\n\t\t\t\t\t\t</CardFooter>\n\t\t\t\t\t</Card>\n\t\t\t\t</TabsContent>\n\t\t\t\t<TabsContent value=\"password\">\n\t\t\t\t\t<Card>\n\t\t\t\t\t\t<CardHeader>\n\t\t\t\t\t\t\t<CardTitle>Password</CardTitle>\n\t\t\t\t\t\t\t<CardDescription>\n\t\t\t\t\t\t\t\tChange your password here. After saving, you&apos;ll be logged\n\t\t\t\t\t\t\t\tout.\n\t\t\t\t\t\t\t</CardDescription>\n\t\t\t\t\t\t</CardHeader>\n\t\t\t\t\t\t<CardContent className=\"grid gap-6\">\n\t\t\t\t\t\t\t<div className=\"grid gap-3\">\n\t\t\t\t\t\t\t\t<Label htmlFor=\"tabs-demo-current\">Current password</Label>\n\t\t\t\t\t\t\t\t<Input id=\"tabs-demo-current\" type=\"password\" />\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t<div className=\"grid gap-3\">\n\t\t\t\t\t\t\t\t<Label htmlFor=\"tabs-demo-new\">New password</Label>\n\t\t\t\t\t\t\t\t<Input id=\"tabs-demo-new\" type=\"password\" />\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</CardContent>\n\t\t\t\t\t\t<CardFooter>\n\t\t\t\t\t\t\t<Button>Save password</Button>\n\t\t\t\t\t\t</CardFooter>\n\t\t\t\t\t</Card>\n\t\t\t\t</TabsContent>\n\t\t\t</Tabs>\n\t\t</div>\n\t),\n} satisfies Story;\n\nfunction BrowserTabOnClose(value: string) {\n\taction(\"onClose\")(value);\n}\n\nfunction BrowserTabOnClick() {\n\taction(\"onClick\")();\n}\n\nfunction BrowserTabOnAdd() {\n\taction(\"onAdd\")();\n}\n\nexport const Browser = {\n\tparameters: {\n\t\tlayout: \"fullscreen\",\n\t},\n\trender: () => (\n\t\t<Tabs defaultValue=\"first\" variant=\"browser\">\n\t\t\t<TabsList>\n\t\t\t\t<TabsTrigger\n\t\t\t\t\tvalue=\"first\"\n\t\t\t\t\tonClick={BrowserTabOnClick}\n\t\t\t\t\tonClose={BrowserTabOnClose}\n\t\t\t\t>\n\t\t\t\t\t<span className=\"flex items-center gap-1\">\n\t\t\t\t\t\t<span className=\"text-utility-green\">GET</span>\n\t\t\t\t\t\t<span>/fhir/Patient</span>\n\t\t\t\t\t</span>\n\t\t\t\t</TabsTrigger>\n\t\t\t\t<TabsTrigger\n\t\t\t\t\tvalue=\"second\"\n\t\t\t\t\tonClick={BrowserTabOnClick}\n\t\t\t\t\tonClose={BrowserTabOnClose}\n\t\t\t\t>\n\t\t\t\t\t<span className=\"flex items-center gap-1\">\n\t\t\t\t\t\t<span className=\"text-utility-yellow\">POST</span>\n\t\t\t\t\t\t<span>/fhir</span>\n\t\t\t\t\t</span>\n\t\t\t\t</TabsTrigger>\n\t\t\t\t<TabsTrigger\n\t\t\t\t\tvalue=\"third\"\n\t\t\t\t\tonClick={BrowserTabOnClick}\n\t\t\t\t\tonClose={BrowserTabOnClose}\n\t\t\t\t>\n\t\t\t\t\t<span className=\"flex items-center gap-1\">\n\t\t\t\t\t\t<span className=\"text-utility-yellow\">POST</span>\n\t\t\t\t\t\t<span>/$graphql</span>\n\t\t\t\t\t</span>\n\t\t\t\t</TabsTrigger>\n\t\t\t</TabsList>\n\t\t\t<TabsAddButton onClick={BrowserTabOnAdd} />\n\t\t</Tabs>\n\t),\n} satisfies Story;\n"],"names":["action","Button","Card","CardContent","CardDescription","CardFooter","CardHeader","CardTitle","Input","Label","Tabs","TabsAddButton","TabsContent","TabsList","TabsTrigger","meta","title","argTypes","variant","options","control","type","Demo","render","props","div","className","defaultValue","value","htmlFor","id","BrowserTabOnClose","BrowserTabOnClick","BrowserTabOnAdd","Browser","parameters","layout","onClick","onClose","span"],"mappings":";AACA,SAASA,MAAM,QAAQ,6BAA6B;AACpD,SAASC,MAAM,QAAQ,cAA+B;AACtD,SACCC,IAAI,EACJC,WAAW,EACXC,eAAe,EACfC,UAAU,EACVC,UAAU,EACVC,SAAS,QACH,YAA6B;AACpC,SAASC,KAAK,QAAQ,aAA8B;AACpD,SAASC,KAAK,QAAQ,aAA8B;AACpD,SACCC,IAAI,EACJC,aAAa,EACbC,WAAW,EACXC,QAAQ,EACRC,WAAW,QACL,YAA6B;AAEpC,MAAMC,OAAO;IACZC,OAAO;IACPC,UAAU;QACTC,SAAS;YACRC,SAAS;gBAAC;gBAAU;aAAS;YAC7BC,SAAS;gBAAEC,MAAM;YAAS;QAC3B;IACD;AACD;AACA,eAAeN,KAAK;AAIpB,OAAO,MAAMO,OAAO;IACnBC,QAAQ,CAACC,sBACR,KAACC;YAAIC,WAAU;sBACd,cAAA,MAAChB;gBAAKiB,cAAa;gBAAW,GAAGH,KAAK;;kCACrC,MAACX;;0CACA,KAACC;gCAAYc,OAAM;0CAAU;;0CAC7B,KAACd;gCAAYc,OAAM;0CAAW;;;;kCAE/B,KAAChB;wBAAYgB,OAAM;kCAClB,cAAA,MAAC1B;;8CACA,MAACI;;sDACA,KAACC;sDAAU;;sDACX,KAACH;sDAAgB;;;;8CAKlB,MAACD;oCAAYuB,WAAU;;sDACtB,MAACD;4CAAIC,WAAU;;8DACd,KAACjB;oDAAMoB,SAAQ;8DAAiB;;8DAChC,KAACrB;oDAAMsB,IAAG;oDAAiBH,cAAa;;;;sDAEzC,MAACF;4CAAIC,WAAU;;8DACd,KAACjB;oDAAMoB,SAAQ;8DAAqB;;8DACpC,KAACrB;oDAAMsB,IAAG;oDAAqBH,cAAa;;;;;;8CAG9C,KAACtB;8CACA,cAAA,KAACJ;kDAAO;;;;;;kCAIX,KAACW;wBAAYgB,OAAM;kCAClB,cAAA,MAAC1B;;8CACA,MAACI;;sDACA,KAACC;sDAAU;;sDACX,KAACH;sDAAgB;;;;8CAKlB,MAACD;oCAAYuB,WAAU;;sDACtB,MAACD;4CAAIC,WAAU;;8DACd,KAACjB;oDAAMoB,SAAQ;8DAAoB;;8DACnC,KAACrB;oDAAMsB,IAAG;oDAAoBT,MAAK;;;;sDAEpC,MAACI;4CAAIC,WAAU;;8DACd,KAACjB;oDAAMoB,SAAQ;8DAAgB;;8DAC/B,KAACrB;oDAAMsB,IAAG;oDAAgBT,MAAK;;;;;;8CAGjC,KAAChB;8CACA,cAAA,KAACJ;kDAAO;;;;;;;;;AAOf,EAAkB;AAElB,SAAS8B,kBAAkBH,KAAa;IACvC5B,OAAO,WAAW4B;AACnB;AAEA,SAASI;IACRhC,OAAO;AACR;AAEA,SAASiC;IACRjC,OAAO;AACR;AAEA,OAAO,MAAMkC,UAAU;IACtBC,YAAY;QACXC,QAAQ;IACT;IACAb,QAAQ,kBACP,MAACb;YAAKiB,cAAa;YAAQT,SAAQ;;8BAClC,MAACL;;sCACA,KAACC;4BACAc,OAAM;4BACNS,SAASL;4BACTM,SAASP;sCAET,cAAA,MAACQ;gCAAKb,WAAU;;kDACf,KAACa;wCAAKb,WAAU;kDAAqB;;kDACrC,KAACa;kDAAK;;;;;sCAGR,KAACzB;4BACAc,OAAM;4BACNS,SAASL;4BACTM,SAASP;sCAET,cAAA,MAACQ;gCAAKb,WAAU;;kDACf,KAACa;wCAAKb,WAAU;kDAAsB;;kDACtC,KAACa;kDAAK;;;;;sCAGR,KAACzB;4BACAc,OAAM;4BACNS,SAASL;4BACTM,SAASP;sCAET,cAAA,MAACQ;gCAAKb,WAAU;;kDACf,KAACa;wCAAKb,WAAU;kDAAsB;;kDACtC,KAACa;kDAAK;;;;;;;8BAIT,KAAC5B;oBAAc0B,SAASJ;;;;AAG3B,EAAkB"}