@health-samurai/react-components 0.0.0-alpha.4 → 0.0.0-alpha.6

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

@@ -2,14 +2,30 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import * as SwitchPrimitive from "@radix-ui/react-switch";
 import { cn } from "../../lib/utils.js";
+// Switch root styles
+const switchRootStyles = cn(// Layout
+"peer", "inline-flex", "items-center", "shrink-0", // Size
+"h-[1.15rem]", "w-8", // Shape
+"rounded-full", "border", "border-transparent", // Interaction
+"transition-all", "outline-none", "cursor-pointer", // States
+"data-[state=unchecked]:bg-bg-quaternary", "data-[state=checked]:bg-bg-link", "hover:data-[state=unchecked]:bg-bg-tertiary", "hover:data-[state=checked]:bg-bg-link_hover", // Focus
+"focus-visible:ring-2", "focus-visible:ring-utility-blue/70", // Disabled
+"disabled:cursor-not-allowed", "disabled:opacity-50", "disabled:data-[state=checked]:bg-bg-disabled", "disabled:data-[state=unchecked]:bg-bg-disabled");
+// Switch thumb styles
+const switchThumbStyles = cn(// Layout
+"pointer-events-none", "block", // Size
+"size-4", // Shape
+"rounded-full", "ring-0", // Color
+"bg-bg-primary", // Animation
+"transition-transform", "data-[state=checked]:translate-x-[calc(100%-2px)]", "data-[state=unchecked]:translate-x-0");
 function Switch({ className, ...props }) {
     return /*#__PURE__*/ _jsx(SwitchPrimitive.Root, {
         "data-slot": "switch",
-        className: cn("peer data-[state=checked]:bg-primary data-[state=unchecked]:bg-input focus-visible:border-ring focus-visible:ring-ring/50 dark:data-[state=unchecked]:bg-input/80 inline-flex h-[1.15rem] w-8 shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50", className),
+        className: cn(switchRootStyles, className),
         ...props,
         children: /*#__PURE__*/ _jsx(SwitchPrimitive.Thumb, {
             "data-slot": "switch-thumb",
-            className: cn("bg-background dark:data-[state=unchecked]:bg-foreground dark:data-[state=checked]:bg-primary-foreground pointer-events-none block size-4 rounded-full ring-0 transition-transform data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0")
+            className: switchThumbStyles
         })
     });
 }

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/shadcn/components/ui/switch.tsx"],"sourcesContent":["\"use client\";\nimport * as SwitchPrimitive from \"@radix-ui/react-switch\";\nimport type * as React from \"react\";\n\nimport { cn } from \"#shadcn/lib/utils\";\n\nfunction Switch({\n\tclassName,\n\t...props\n}: React.ComponentProps<typeof SwitchPrimitive.Root>) {\n\treturn (\n\t\t<SwitchPrimitive.Root\n\t\t\tdata-slot=\"switch\"\n\t\t\tclassName={cn(\n\t\t\t\t\"peer data-[state=checked]:bg-primary data-[state=unchecked]:bg-input focus-visible:border-ring focus-visible:ring-ring/50 dark:data-[state=unchecked]:bg-input/80 inline-flex h-[1.15rem] w-8 shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t>\n\t\t\t<SwitchPrimitive.Thumb\n\t\t\t\tdata-slot=\"switch-thumb\"\n\t\t\t\tclassName={cn(\n\t\t\t\t\t\"bg-background dark:data-[state=unchecked]:bg-foreground dark:data-[state=checked]:bg-primary-foreground pointer-events-none block size-4 rounded-full ring-0 transition-transform data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0\",\n\t\t\t\t)}\n\t\t\t/>\n\t\t</SwitchPrimitive.Root>\n\t);\n}\n\nexport { Switch };\n"],"names":["SwitchPrimitive","cn","Switch","className","props","Root","data-slot","Thumb"],"mappings":"AAAA;;AACA,YAAYA,qBAAqB,yBAAyB;AAG1D,SAASC,EAAE,QAAQ,qBAAoB;AAEvC,SAASC,OAAO,EACfC,SAAS,EACT,GAAGC,OACgD;IACnD,qBACC,KAACJ,gBAAgBK,IAAI;QACpBC,aAAU;QACVH,WAAWF,GACV,6WACAE;QAEA,GAAGC,KAAK;kBAET,cAAA,KAACJ,gBAAgBO,KAAK;YACrBD,aAAU;YACVH,WAAWF,GACV;;;AAKL;AAEA,SAASC,MAAM,GAAG"}
+{"version":3,"sources":["../../../../../src/shadcn/components/ui/switch.tsx"],"sourcesContent":["\"use client\";\nimport * as SwitchPrimitive from \"@radix-ui/react-switch\";\nimport type * as React from \"react\";\n\nimport { cn } from \"#shadcn/lib/utils\";\n\n// Switch root styles\nconst switchRootStyles = cn(\n\t// Layout\n\t\"peer\",\n\t\"inline-flex\",\n\t\"items-center\",\n\t\"shrink-0\",\n\t// Size\n\t\"h-[1.15rem]\",\n\t\"w-8\",\n\t// Shape\n\t\"rounded-full\",\n\t\"border\",\n\t\"border-transparent\",\n\t// Interaction\n\t\"transition-all\",\n\t\"outline-none\",\n\t\"cursor-pointer\",\n\t// States\n\t\"data-[state=unchecked]:bg-bg-quaternary\",\n\t\"data-[state=checked]:bg-bg-link\",\n\t\"hover:data-[state=unchecked]:bg-bg-tertiary\",\n\t\"hover:data-[state=checked]:bg-bg-link_hover\",\n\t// Focus\n\t\"focus-visible:ring-2\",\n\t\"focus-visible:ring-utility-blue/70\",\n\t// Disabled\n\t\"disabled:cursor-not-allowed\",\n\t\"disabled:opacity-50\",\n\t\"disabled:data-[state=checked]:bg-bg-disabled\",\n\t\"disabled:data-[state=unchecked]:bg-bg-disabled\",\n);\n\n// Switch thumb styles\nconst switchThumbStyles = cn(\n\t// Layout\n\t\"pointer-events-none\",\n\t\"block\",\n\t// Size\n\t\"size-4\",\n\t// Shape\n\t\"rounded-full\",\n\t\"ring-0\",\n\t// Color\n\t\"bg-bg-primary\",\n\t// Animation\n\t\"transition-transform\",\n\t\"data-[state=checked]:translate-x-[calc(100%-2px)]\",\n\t\"data-[state=unchecked]:translate-x-0\",\n);\n\nfunction Switch({\n\tclassName,\n\t...props\n}: React.ComponentProps<typeof SwitchPrimitive.Root>) {\n\treturn (\n\t\t<SwitchPrimitive.Root\n\t\t\tdata-slot=\"switch\"\n\t\t\tclassName={cn(switchRootStyles, className)}\n\t\t\t{...props}\n\t\t>\n\t\t\t<SwitchPrimitive.Thumb\n\t\t\t\tdata-slot=\"switch-thumb\"\n\t\t\t\tclassName={switchThumbStyles}\n\t\t\t/>\n\t\t</SwitchPrimitive.Root>\n\t);\n}\n\nexport { Switch };\n"],"names":["SwitchPrimitive","cn","switchRootStyles","switchThumbStyles","Switch","className","props","Root","data-slot","Thumb"],"mappings":"AAAA;;AACA,YAAYA,qBAAqB,yBAAyB;AAG1D,SAASC,EAAE,QAAQ,qBAAoB;AAEvC,qBAAqB;AACrB,MAAMC,mBAAmBD,GACxB,SAAS;AACT,QACA,eACA,gBACA,YACA,OAAO;AACP,eACA,OACA,QAAQ;AACR,gBACA,UACA,sBACA,cAAc;AACd,kBACA,gBACA,kBACA,SAAS;AACT,2CACA,mCACA,+CACA,+CACA,QAAQ;AACR,wBACA,sCACA,WAAW;AACX,+BACA,uBACA,gDACA;AAGD,sBAAsB;AACtB,MAAME,oBAAoBF,GACzB,SAAS;AACT,uBACA,SACA,OAAO;AACP,UACA,QAAQ;AACR,gBACA,UACA,QAAQ;AACR,iBACA,YAAY;AACZ,wBACA,qDACA;AAGD,SAASG,OAAO,EACfC,SAAS,EACT,GAAGC,OACgD;IACnD,qBACC,KAACN,gBAAgBO,IAAI;QACpBC,aAAU;QACVH,WAAWJ,GAAGC,kBAAkBG;QAC/B,GAAGC,KAAK;kBAET,cAAA,KAACN,gBAAgBS,KAAK;YACrBD,aAAU;YACVH,WAAWF;;;AAIf;AAEA,SAASC,MAAM,GAAG"}

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

@@ -1 +1 @@
-{"version":3,"file":"table.d.ts","sourceRoot":"","sources":["../../../../../src/shadcn/components/ui/table.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAIpC,iBAAS,KAAK,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,2CAapE;AAED,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,2CAQ1E;AAED,iBAAS,SAAS,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,2CAQxE;AAED,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,2CAW1E;AAED,iBAAS,QAAQ,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,IAAI,CAAC,2CAWpE;AAED,iBAAS,SAAS,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,IAAI,CAAC,2CAWrE;AAED,iBAAS,SAAS,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,IAAI,CAAC,2CAWrE;AAED,iBAAS,YAAY,CAAC,EACrB,SAAS,EACT,GAAG,KAAK,EACR,EAAE,KAAK,CAAC,cAAc,CAAC,SAAS,CAAC,2CAQjC;AAED,OAAO,EACN,KAAK,EACL,WAAW,EACX,SAAS,EACT,WAAW,EACX,SAAS,EACT,QAAQ,EACR,SAAS,EACT,YAAY,GACZ,CAAC"}
+{"version":3,"file":"table.d.ts","sourceRoot":"","sources":["../../../../../src/shadcn/components/ui/table.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAUpC,iBAAS,KAAK,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,2CAUpE;AAED,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,2CAY1E;AAED,iBAAS,SAAS,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,2CAQxE;AAED,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,2CAe1E;AAED,iBAAS,QAAQ,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,IAAI,CAAC,2CAepE;AAED,iBAAS,SAAS,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,IAAI,CAAC,2CAmBrE;AAED,iBAAS,SAAS,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,IAAI,CAAC,2CAerE;AAED,iBAAS,YAAY,CAAC,EACrB,SAAS,EACT,GAAG,KAAK,EACR,EAAE,KAAK,CAAC,cAAc,CAAC,SAAS,CAAC,2CAQjC;AAED,OAAO,EACN,KAAK,EACL,WAAW,EACX,SAAS,EACT,WAAW,EACX,SAAS,EACT,QAAQ,EACR,SAAS,EACT,YAAY,GACZ,CAAC"}

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

@@ -1,12 +1,16 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { cn } from "../../lib/utils.js";
+// Table container styles
+const tableContainerStyles = cn("relative", "w-full", "overflow-x-auto");
+// Table styles
+const tableStyles = cn("w-full", "caption-bottom", "text-sm");
 function Table({ className, ...props }) {
     return /*#__PURE__*/ _jsx("div", {
         "data-slot": "table-container",
-        className: "relative w-full overflow-x-auto",
+        className: tableContainerStyles,
         children: /*#__PURE__*/ _jsx("table", {
             "data-slot": "table",
-            className: cn("w-full caption-bottom text-sm", className),
+            className: cn(tableStyles, className),
             ...props
         })
     });
@@ -14,7 +18,7 @@ function Table({ className, ...props }) {
 function TableHeader({ className, ...props }) {
     return /*#__PURE__*/ _jsx("thead", {
         "data-slot": "table-header",
-        className: cn("[&_tr]:border-b", className),
+        className: cn("[&_tr]:border-b", "[&_tr]:border-border-primary", className),
         ...props
     });
 }
@@ -28,35 +32,35 @@ function TableBody({ className, ...props }) {
 function TableFooter({ className, ...props }) {
     return /*#__PURE__*/ _jsx("tfoot", {
         "data-slot": "table-footer",
-        className: cn("bg-muted/50 border-t font-medium [&>tr]:last:border-b-0", className),
+        className: cn("bg-bg-tertiary/50", "border-t", "border-border-primary", "font-medium", "[&>tr]:last:border-b-0", className),
         ...props
     });
 }
 function TableRow({ className, ...props }) {
     return /*#__PURE__*/ _jsx("tr", {
         "data-slot": "table-row",
-        className: cn("hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors", className),
+        className: cn("hover:bg-bg-tertiary/50", "data-[state=selected]:bg-bg-tertiary", "border-b", "border-border-primary", "transition-colors", className),
         ...props
     });
 }
 function TableHead({ className, ...props }) {
     return /*#__PURE__*/ _jsx("th", {
         "data-slot": "table-head",
-        className: cn("text-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]", className),
+        className: cn("text-text-primary", "h-10", "px-2", "text-left", "align-middle", "font-medium", "whitespace-nowrap", "[&:has([role=checkbox])]:pr-0", "[&>[role=checkbox]]:translate-y-[2px]", className),
         ...props
     });
 }
 function TableCell({ className, ...props }) {
     return /*#__PURE__*/ _jsx("td", {
         "data-slot": "table-cell",
-        className: cn("p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]", className),
+        className: cn("p-2", "align-middle", "whitespace-nowrap", "[&:has([role=checkbox])]:pr-0", "[&>[role=checkbox]]:translate-y-[2px]", className),
         ...props
     });
 }
 function TableCaption({ className, ...props }) {
     return /*#__PURE__*/ _jsx("caption", {
         "data-slot": "table-caption",
-        className: cn("text-muted-foreground mt-4 text-sm", className),
+        className: cn("text-text-secondary", "mt-4", "text-sm", className),
         ...props
     });
 }

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/shadcn/components/ui/table.tsx"],"sourcesContent":["import type * as React from \"react\";\n\nimport { cn } from \"#shadcn/lib/utils\";\n\nfunction Table({ className, ...props }: React.ComponentProps<\"table\">) {\n\treturn (\n\t\t<div\n\t\t\tdata-slot=\"table-container\"\n\t\t\tclassName=\"relative w-full overflow-x-auto\"\n\t\t>\n\t\t\t<table\n\t\t\t\tdata-slot=\"table\"\n\t\t\t\tclassName={cn(\"w-full caption-bottom text-sm\", className)}\n\t\t\t\t{...props}\n\t\t\t/>\n\t\t</div>\n\t);\n}\n\nfunction TableHeader({ className, ...props }: React.ComponentProps<\"thead\">) {\n\treturn (\n\t\t<thead\n\t\t\tdata-slot=\"table-header\"\n\t\t\tclassName={cn(\"[&_tr]:border-b\", className)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nfunction TableBody({ className, ...props }: React.ComponentProps<\"tbody\">) {\n\treturn (\n\t\t<tbody\n\t\t\tdata-slot=\"table-body\"\n\t\t\tclassName={cn(\"[&_tr:last-child]:border-0\", className)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nfunction TableFooter({ className, ...props }: React.ComponentProps<\"tfoot\">) {\n\treturn (\n\t\t<tfoot\n\t\t\tdata-slot=\"table-footer\"\n\t\t\tclassName={cn(\n\t\t\t\t\"bg-muted/50 border-t font-medium [&>tr]:last:border-b-0\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nfunction TableRow({ className, ...props }: React.ComponentProps<\"tr\">) {\n\treturn (\n\t\t<tr\n\t\t\tdata-slot=\"table-row\"\n\t\t\tclassName={cn(\n\t\t\t\t\"hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nfunction TableHead({ className, ...props }: React.ComponentProps<\"th\">) {\n\treturn (\n\t\t<th\n\t\t\tdata-slot=\"table-head\"\n\t\t\tclassName={cn(\n\t\t\t\t\"text-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nfunction TableCell({ className, ...props }: React.ComponentProps<\"td\">) {\n\treturn (\n\t\t<td\n\t\t\tdata-slot=\"table-cell\"\n\t\t\tclassName={cn(\n\t\t\t\t\"p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nfunction TableCaption({\n\tclassName,\n\t...props\n}: React.ComponentProps<\"caption\">) {\n\treturn (\n\t\t<caption\n\t\t\tdata-slot=\"table-caption\"\n\t\t\tclassName={cn(\"text-muted-foreground mt-4 text-sm\", className)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nexport {\n\tTable,\n\tTableHeader,\n\tTableBody,\n\tTableFooter,\n\tTableHead,\n\tTableRow,\n\tTableCell,\n\tTableCaption,\n};\n"],"names":["cn","Table","className","props","div","data-slot","table","TableHeader","thead","TableBody","tbody","TableFooter","tfoot","TableRow","tr","TableHead","th","TableCell","td","TableCaption","caption"],"mappings":";AAEA,SAASA,EAAE,QAAQ,qBAAoB;AAEvC,SAASC,MAAM,EAAEC,SAAS,EAAE,GAAGC,OAAsC;IACpE,qBACC,KAACC;QACAC,aAAU;QACVH,WAAU;kBAEV,cAAA,KAACI;YACAD,aAAU;YACVH,WAAWF,GAAG,iCAAiCE;YAC9C,GAAGC,KAAK;;;AAIb;AAEA,SAASI,YAAY,EAAEL,SAAS,EAAE,GAAGC,OAAsC;IAC1E,qBACC,KAACK;QACAH,aAAU;QACVH,WAAWF,GAAG,mBAAmBE;QAChC,GAAGC,KAAK;;AAGZ;AAEA,SAASM,UAAU,EAAEP,SAAS,EAAE,GAAGC,OAAsC;IACxE,qBACC,KAACO;QACAL,aAAU;QACVH,WAAWF,GAAG,8BAA8BE;QAC3C,GAAGC,KAAK;;AAGZ;AAEA,SAASQ,YAAY,EAAET,SAAS,EAAE,GAAGC,OAAsC;IAC1E,qBACC,KAACS;QACAP,aAAU;QACVH,WAAWF,GACV,2DACAE;QAEA,GAAGC,KAAK;;AAGZ;AAEA,SAASU,SAAS,EAAEX,SAAS,EAAE,GAAGC,OAAmC;IACpE,qBACC,KAACW;QACAT,aAAU;QACVH,WAAWF,GACV,+EACAE;QAEA,GAAGC,KAAK;;AAGZ;AAEA,SAASY,UAAU,EAAEb,SAAS,EAAE,GAAGC,OAAmC;IACrE,qBACC,KAACa;QACAX,aAAU;QACVH,WAAWF,GACV,sJACAE;QAEA,GAAGC,KAAK;;AAGZ;AAEA,SAASc,UAAU,EAAEf,SAAS,EAAE,GAAGC,OAAmC;IACrE,qBACC,KAACe;QACAb,aAAU;QACVH,WAAWF,GACV,0GACAE;QAEA,GAAGC,KAAK;;AAGZ;AAEA,SAASgB,aAAa,EACrBjB,SAAS,EACT,GAAGC,OAC8B;IACjC,qBACC,KAACiB;QACAf,aAAU;QACVH,WAAWF,GAAG,sCAAsCE;QACnD,GAAGC,KAAK;;AAGZ;AAEA,SACCF,KAAK,EACLM,WAAW,EACXE,SAAS,EACTE,WAAW,EACXI,SAAS,EACTF,QAAQ,EACRI,SAAS,EACTE,YAAY,GACX"}
+{"version":3,"sources":["../../../../../src/shadcn/components/ui/table.tsx"],"sourcesContent":["import type * as React from \"react\";\n\nimport { cn } from \"#shadcn/lib/utils\";\n\n// Table container styles\nconst tableContainerStyles = cn(\"relative\", \"w-full\", \"overflow-x-auto\");\n\n// Table styles\nconst tableStyles = cn(\"w-full\", \"caption-bottom\", \"text-sm\");\n\nfunction Table({ className, ...props }: React.ComponentProps<\"table\">) {\n\treturn (\n\t\t<div data-slot=\"table-container\" className={tableContainerStyles}>\n\t\t\t<table\n\t\t\t\tdata-slot=\"table\"\n\t\t\t\tclassName={cn(tableStyles, className)}\n\t\t\t\t{...props}\n\t\t\t/>\n\t\t</div>\n\t);\n}\n\nfunction TableHeader({ className, ...props }: React.ComponentProps<\"thead\">) {\n\treturn (\n\t\t<thead\n\t\t\tdata-slot=\"table-header\"\n\t\t\tclassName={cn(\n\t\t\t\t\"[&_tr]:border-b\",\n\t\t\t\t\"[&_tr]:border-border-primary\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nfunction TableBody({ className, ...props }: React.ComponentProps<\"tbody\">) {\n\treturn (\n\t\t<tbody\n\t\t\tdata-slot=\"table-body\"\n\t\t\tclassName={cn(\"[&_tr:last-child]:border-0\", className)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nfunction TableFooter({ className, ...props }: React.ComponentProps<\"tfoot\">) {\n\treturn (\n\t\t<tfoot\n\t\t\tdata-slot=\"table-footer\"\n\t\t\tclassName={cn(\n\t\t\t\t\"bg-bg-tertiary/50\",\n\t\t\t\t\"border-t\",\n\t\t\t\t\"border-border-primary\",\n\t\t\t\t\"font-medium\",\n\t\t\t\t\"[&>tr]:last:border-b-0\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nfunction TableRow({ className, ...props }: React.ComponentProps<\"tr\">) {\n\treturn (\n\t\t<tr\n\t\t\tdata-slot=\"table-row\"\n\t\t\tclassName={cn(\n\t\t\t\t\"hover:bg-bg-tertiary/50\",\n\t\t\t\t\"data-[state=selected]:bg-bg-tertiary\",\n\t\t\t\t\"border-b\",\n\t\t\t\t\"border-border-primary\",\n\t\t\t\t\"transition-colors\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nfunction TableHead({ className, ...props }: React.ComponentProps<\"th\">) {\n\treturn (\n\t\t<th\n\t\t\tdata-slot=\"table-head\"\n\t\t\tclassName={cn(\n\t\t\t\t\"text-text-primary\",\n\t\t\t\t\"h-10\",\n\t\t\t\t\"px-2\",\n\t\t\t\t\"text-left\",\n\t\t\t\t\"align-middle\",\n\t\t\t\t\"font-medium\",\n\t\t\t\t\"whitespace-nowrap\",\n\t\t\t\t\"[&:has([role=checkbox])]:pr-0\",\n\t\t\t\t\"[&>[role=checkbox]]:translate-y-[2px]\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nfunction TableCell({ className, ...props }: React.ComponentProps<\"td\">) {\n\treturn (\n\t\t<td\n\t\t\tdata-slot=\"table-cell\"\n\t\t\tclassName={cn(\n\t\t\t\t\"p-2\",\n\t\t\t\t\"align-middle\",\n\t\t\t\t\"whitespace-nowrap\",\n\t\t\t\t\"[&:has([role=checkbox])]:pr-0\",\n\t\t\t\t\"[&>[role=checkbox]]:translate-y-[2px]\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nfunction TableCaption({\n\tclassName,\n\t...props\n}: React.ComponentProps<\"caption\">) {\n\treturn (\n\t\t<caption\n\t\t\tdata-slot=\"table-caption\"\n\t\t\tclassName={cn(\"text-text-secondary\", \"mt-4\", \"text-sm\", className)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nexport {\n\tTable,\n\tTableHeader,\n\tTableBody,\n\tTableFooter,\n\tTableHead,\n\tTableRow,\n\tTableCell,\n\tTableCaption,\n};\n"],"names":["cn","tableContainerStyles","tableStyles","Table","className","props","div","data-slot","table","TableHeader","thead","TableBody","tbody","TableFooter","tfoot","TableRow","tr","TableHead","th","TableCell","td","TableCaption","caption"],"mappings":";AAEA,SAASA,EAAE,QAAQ,qBAAoB;AAEvC,yBAAyB;AACzB,MAAMC,uBAAuBD,GAAG,YAAY,UAAU;AAEtD,eAAe;AACf,MAAME,cAAcF,GAAG,UAAU,kBAAkB;AAEnD,SAASG,MAAM,EAAEC,SAAS,EAAE,GAAGC,OAAsC;IACpE,qBACC,KAACC;QAAIC,aAAU;QAAkBH,WAAWH;kBAC3C,cAAA,KAACO;YACAD,aAAU;YACVH,WAAWJ,GAAGE,aAAaE;YAC1B,GAAGC,KAAK;;;AAIb;AAEA,SAASI,YAAY,EAAEL,SAAS,EAAE,GAAGC,OAAsC;IAC1E,qBACC,KAACK;QACAH,aAAU;QACVH,WAAWJ,GACV,mBACA,gCACAI;QAEA,GAAGC,KAAK;;AAGZ;AAEA,SAASM,UAAU,EAAEP,SAAS,EAAE,GAAGC,OAAsC;IACxE,qBACC,KAACO;QACAL,aAAU;QACVH,WAAWJ,GAAG,8BAA8BI;QAC3C,GAAGC,KAAK;;AAGZ;AAEA,SAASQ,YAAY,EAAET,SAAS,EAAE,GAAGC,OAAsC;IAC1E,qBACC,KAACS;QACAP,aAAU;QACVH,WAAWJ,GACV,qBACA,YACA,yBACA,eACA,0BACAI;QAEA,GAAGC,KAAK;;AAGZ;AAEA,SAASU,SAAS,EAAEX,SAAS,EAAE,GAAGC,OAAmC;IACpE,qBACC,KAACW;QACAT,aAAU;QACVH,WAAWJ,GACV,2BACA,wCACA,YACA,yBACA,qBACAI;QAEA,GAAGC,KAAK;;AAGZ;AAEA,SAASY,UAAU,EAAEb,SAAS,EAAE,GAAGC,OAAmC;IACrE,qBACC,KAACa;QACAX,aAAU;QACVH,WAAWJ,GACV,qBACA,QACA,QACA,aACA,gBACA,eACA,qBACA,iCACA,yCACAI;QAEA,GAAGC,KAAK;;AAGZ;AAEA,SAASc,UAAU,EAAEf,SAAS,EAAE,GAAGC,OAAmC;IACrE,qBACC,KAACe;QACAb,aAAU;QACVH,WAAWJ,GACV,OACA,gBACA,qBACA,iCACA,yCACAI;QAEA,GAAGC,KAAK;;AAGZ;AAEA,SAASgB,aAAa,EACrBjB,SAAS,EACT,GAAGC,OAC8B;IACjC,qBACC,KAACiB;QACAf,aAAU;QACVH,WAAWJ,GAAG,uBAAuB,QAAQ,WAAWI;QACvD,GAAGC,KAAK;;AAGZ;AAEA,SACCF,KAAK,EACLM,WAAW,EACXE,SAAS,EACTE,WAAW,EACXI,SAAS,EACTF,QAAQ,EACRI,SAAS,EACTE,YAAY,GACX"}

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

@@ -1,16 +1,34 @@
 import * as TabsPrimitive from "@radix-ui/react-tabs";
 import { type VariantProps } from "class-variance-authority";
-import type * as React from "react";
+import * as React from "react";
 import { Button } from "./button";
 declare const tabsVariants: (props?: ({
     variant?: "browser" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 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;
+type EdgeScrollPosition = "touch" | "depart";
+type FlowType = "overflow" | "underflow";
+type TabsListProps = {
+    onLeftEdge?: (position: EdgeScrollPosition) => void;
+    onRightEdge?: (position: EdgeScrollPosition) => void;
+    onFlow?: (flow: FlowType) => void;
+    onResize?: (entries: ResizeObserverEntry[]) => void;
+    onTabChange?: (mutationRecords: MutationRecord[]) => void;
+} & React.ComponentProps<typeof TabsPrimitive.List>;
+declare function TabsList({ className, onLeftEdge, onRightEdge, onResize, onFlow, onTabChange, ...props }: TabsListProps): import("react/jsx-runtime").JSX.Element;
+declare function TabsBrowserList({ className, children, ...props }: React.ComponentProps<typeof TabsPrimitive.List>): import("react/jsx-runtime").JSX.Element;
+export declare function TabsListDropdown({ tabs, handleTabSelect, handleCloseTab, }: {
+    tabs: {
+        id: string;
+        content: React.ReactNode;
+    }[];
+    handleTabSelect?: (tabId: string) => void;
+    handleCloseTab?: (tabId: string) => void;
+}): 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 };
+export { Tabs, TabsList, TabsTrigger, TabsContent, TabsBrowserList };
 //# 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":"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"}
+{"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;AAQlE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AA2ElC,QAAA,MAAM,YAAY;;8EAwBhB,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;AAiDD,KAAK,kBAAkB,GAAG,OAAO,GAAG,QAAQ,CAAC;AAC7C,KAAK,QAAQ,GAAG,UAAU,GAAG,WAAW,CAAC;AAEzC,KAAK,aAAa,GAAG;IACpB,UAAU,CAAC,EAAE,CAAC,QAAQ,EAAE,kBAAkB,KAAK,IAAI,CAAC;IACpD,WAAW,CAAC,EAAE,CAAC,QAAQ,EAAE,kBAAkB,KAAK,IAAI,CAAC;IACrD,MAAM,CAAC,EAAE,CAAC,IAAI,EAAE,QAAQ,KAAK,IAAI,CAAC;IAClC,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,mBAAmB,EAAE,KAAK,IAAI,CAAC;IACpD,WAAW,CAAC,EAAE,CAAC,eAAe,EAAE,cAAc,EAAE,KAAK,IAAI,CAAC;CAC1D,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,aAAa,CAAC,IAAI,CAAC,CAAC;AAEpD,iBAAS,QAAQ,CAAC,EACjB,SAAS,EACT,UAAU,EACV,WAAW,EACX,QAAQ,EACR,MAAM,EACN,WAAW,EACX,GAAG,KAAK,EACR,EAAE,aAAa,2CA6If;AAyCD,iBAAS,eAAe,CAAC,EACxB,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACR,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,aAAa,CAAC,IAAI,CAAC,2CAsEjD;AAED,wBAAgB,gBAAgB,CAAC,EAChC,IAAI,EACJ,eAAe,EACf,cAAc,GACd,EAAE;IACF,IAAI,EAAE;QAAE,EAAE,EAAE,MAAM,CAAC;QAAC,OAAO,EAAE,KAAK,CAAC,SAAS,CAAA;KAAE,EAAE,CAAC;IACjD,eAAe,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1C,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACzC,2CA4CA;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,2CA+BA;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,eAAe,EAAE,CAAC"}

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

@@ -2,9 +2,31 @@
 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 { Plus, X } from "lucide-react";
+import { ChevronDownIcon, ChevronLeft, ChevronRight, Plus, X } from "lucide-react";
+import * as React from "react";
 import { cn } from "../../lib/utils.js";
 import { Button } from "./button.js";
+import { Command, CommandEmpty, CommandInput, CommandItem, CommandList } from "./command.js";
+import { Popover, PopoverContent, PopoverTrigger } from "./popover.js";
+// Base tabs styles
+const baseTabsStyles = cn("flex", "flex-col", "h-full");
+// Tabs add button container styles
+const tabsAddButtonContainerStyles = cn("grow", "h-full", "bg-bg-secondary", "border-l", "border-b");
+// Tabs list styles
+const tabsListStyles = cn("inline-flex", "w-fit", "items-center", "no-scrollbar");
+// Base tabs trigger styles
+const baseTabsTriggerStyles = cn(// Layout & Sizing
+"box-border", "flex-1", "h-10", "inline-flex", "items-center", "justify-center", "px-3", "whitespace-nowrap", // Spacing & Padding
+"pb-2", "pt-2.5", // Typography
+"typo-body", // Colors & States
+"cursor-pointer", "text-text-tertiary", "hover:bg-bg-secondary/60", "hover:text-text-tertiary_hover", "data-[state=active]:text-text-primary", "data-[state=active]:border-b-border-brand", "disabled:opacity-50", "disabled:pointer-events-none", // Borders
+"border-b-2", "border-b-transparent", // Focus & Accessibility
+"focus-visible:ring-2", "focus-visible:ring-utility-blue/70", "focus-visible:outline-1", // Transitions
+"transition-[color,box-shadow]", // Icons
+"[&_svg]:pointer-events-none", "[&_svg]:shrink-0", "[&_svg:not([class*='size-'])]:size-4", // Groups
+"group/tabs-trigger");
+// Tabs content styles
+const tabsContentStyles = cn("grow", "outline-none", "overflow-auto");
 const tabsVariants = cva("", {
     variants: {
         variant: {
@@ -16,7 +38,9 @@ const tabsVariants = cva("", {
             `**: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]:w-60
 				 **:data-[slot=tabs-trigger]:min-w-40
+				 **:data-[slot=tabs-trigger]:data-[state=inactive]:text-text-secondary
 				 **: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]
@@ -27,7 +51,7 @@ const tabsVariants = cva("", {
 function Tabs({ className, variant, ...props }) {
     return /*#__PURE__*/ _jsx(TabsPrimitive.Root, {
         "data-slot": "tabs",
-        className: cn("flex flex-col", tabsVariants({
+        className: cn(baseTabsStyles, tabsVariants({
             variant
         }), className),
         ...props
@@ -35,7 +59,7 @@ function Tabs({ className, variant, ...props }) {
 }
 export function TabsAddButton(props) {
     return /*#__PURE__*/ _jsx("div", {
-        className: "grow h-full bg-bg-secondary border-l border-b",
+        className: tabsAddButtonContainerStyles,
         children: /*#__PURE__*/ _jsx(Button, {
             "data-slot": "tabs-add-button",
             variant: "link",
@@ -45,17 +69,299 @@ export function TabsAddButton(props) {
         })
     });
 }
-function TabsList({ className, ...props }) {
+const horizontalScroll = (event)=>{
+    const mode = event.deltaMode;
+    let deltaPx = 0;
+    if (mode === 0) {
+        deltaPx = event.deltaY;
+    } else if (mode === 1) {
+        deltaPx = event.deltaY * 160;
+    } else if (mode === 2) {
+        deltaPx = event.currentTarget.clientWidth;
+    }
+    const newScrollLeft = event.currentTarget.scrollLeft + deltaPx;
+    event.currentTarget.scrollTo({
+        left: newScrollLeft,
+        behavior: "smooth"
+    });
+};
+const performHorizontalScroll = (tabsListRef, direction)=>{
+    if (!tabsListRef.current) return;
+    const scrollAmount = 160;
+    let newScrollLeft = tabsListRef.current.scrollLeft;
+    if (direction === "left") {
+        newScrollLeft -= scrollAmount;
+        newScrollLeft -= newScrollLeft % scrollAmount;
+    } else {
+        newScrollLeft += scrollAmount;
+        const rightCoord = newScrollLeft + tabsListRef.current.clientWidth;
+        if (rightCoord % scrollAmount !== 0) {
+            newScrollLeft += scrollAmount - rightCoord % scrollAmount;
+        }
+    }
+    tabsListRef.current.scrollTo({
+        left: newScrollLeft,
+        behavior: "smooth"
+    });
+};
+function TabsList({ className, onLeftEdge, onRightEdge, onResize, onFlow, onTabChange, ...props }) {
+    const tabListRef = React.useRef(null);
+    const onLeftEdgeRef = React.useRef(onLeftEdge);
+    React.useEffect(()=>{
+        onLeftEdgeRef.current = onLeftEdge;
+    }, [
+        onLeftEdge
+    ]);
+    const onResizeRef = React.useRef(onResize);
+    React.useEffect(()=>{
+        onResizeRef.current = onResize;
+    }, [
+        onResize
+    ]);
+    const onRightEdgeRef = React.useRef(onRightEdge);
+    React.useEffect(()=>{
+        onRightEdgeRef.current = onRightEdge;
+    }, [
+        onRightEdge
+    ]);
+    const onFlowRef = React.useRef(onFlow);
+    React.useEffect(()=>{
+        onFlowRef.current = onFlow;
+    }, [
+        onFlow
+    ]);
+    const onTabChangeRef = React.useRef(onTabChange);
+    React.useEffect(()=>{
+        onTabChangeRef.current = onTabChange;
+    }, [
+        onTabChange
+    ]);
+    React.useEffect(()=>{
+        if (tabListRef.current === null) {
+            return;
+        }
+        const tabList = tabListRef.current;
+        let last = null;
+        const handleScroll = ()=>{
+            if (onLeftEdgeRef.current) {
+                const newState = tabList.scrollLeft < 1 ? "touch" : "depart";
+                if (last === null) {
+                    onLeftEdgeRef.current(newState);
+                } else {
+                    const lastState = last.scrollLeft < 1 ? "touch" : "depart";
+                    if (lastState !== newState) {
+                        onLeftEdgeRef.current(newState);
+                    }
+                }
+            }
+            if (onRightEdgeRef.current) {
+                const newState = tabList.scrollWidth - tabList.clientWidth - tabList.scrollLeft < 1 ? "touch" : "depart";
+                if (last === null) {
+                    onRightEdgeRef.current(newState);
+                } else {
+                    const lastState = last.scrollWidth - last.clientWidth - last.scrollLeft < 1 ? "touch" : "depart";
+                    if (lastState !== newState) {
+                        onRightEdgeRef.current(newState);
+                    }
+                }
+            }
+            if (onFlowRef.current) {
+                const newState = tabList.scrollWidth > tabList.clientWidth ? "overflow" : "underflow";
+                if (last === null) {
+                    onFlowRef.current(newState);
+                } else {
+                    const lastState = last.scrollWidth > last.clientWidth ? "overflow" : "underflow";
+                    if (lastState !== newState) {
+                        onFlowRef.current(newState);
+                    }
+                }
+            }
+            last = {
+                scrollLeft: tabList.scrollLeft,
+                scrollWidth: tabList.scrollWidth,
+                clientWidth: tabList.clientWidth
+            };
+        };
+        const scrollCallback = (_ev)=>handleScroll();
+        const resizeObserver = new ResizeObserver((entries)=>{
+            handleScroll();
+            if (onResizeRef.current) {
+                onResizeRef.current(entries);
+            }
+        });
+        const mutationObserver = new MutationObserver((mutationRecords)=>{
+            handleScroll();
+            if (onTabChangeRef.current) {
+                onTabChangeRef.current(mutationRecords);
+            }
+        });
+        tabList.addEventListener("scroll", scrollCallback, {
+            passive: true
+        });
+        resizeObserver.observe(tabList);
+        mutationObserver.observe(tabList, {
+            childList: true
+        });
+        return ()=>{
+            tabList.removeEventListener("scroll", scrollCallback);
+            resizeObserver.disconnect();
+            mutationObserver.disconnect();
+        };
+    }, []);
     return /*#__PURE__*/ _jsx(TabsPrimitive.List, {
         "data-slot": "tabs-list",
         className: cn("inline-flex w-fit items-center", className),
-        ...props
+        ...props,
+        ref: (element)=>{
+            tabListRef.current = element;
+            if (props.ref !== undefined && props.ref !== null) {
+                if (typeof props.ref === "function") {
+                    props.ref(element);
+                } else {
+                    props.ref.current = element;
+                }
+            }
+        }
+    });
+}
+function TabScrollLeftButton({ disabled, onClick }) {
+    return /*#__PURE__*/ _jsx(Button, {
+        variant: "link",
+        size: "small",
+        disabled: disabled,
+        className: "h-full border-r border-b bg-bg-secondary",
+        onClick: onClick,
+        children: /*#__PURE__*/ _jsx(ChevronLeft, {})
+    });
+}
+function TabScrollRightButton({ disabled, onClick }) {
+    return /*#__PURE__*/ _jsx(Button, {
+        variant: "link",
+        size: "small",
+        disabled: disabled,
+        className: "h-full border-l border-b bg-bg-secondary",
+        onClick: onClick,
+        children: /*#__PURE__*/ _jsx(ChevronRight, {})
+    });
+}
+function TabsBrowserList({ className, children, ...props }) {
+    const tabsListRef = React.useRef(null);
+    const [showScrollButtons, setShowScrollButtons] = React.useState(false);
+    const [canScrollLeft, setCanScrollLeft] = React.useState(false);
+    const [canScrollRight, setCanScrollRight] = React.useState(false);
+    return /*#__PURE__*/ _jsxs(React.Fragment, {
+        children: [
+            showScrollButtons && /*#__PURE__*/ _jsx(TabScrollLeftButton, {
+                disabled: !canScrollLeft,
+                onClick: ()=>performHorizontalScroll(tabsListRef, "left")
+            }),
+            /*#__PURE__*/ _jsx(TabsList, {
+                onLeftEdge: (edgeState)=>{
+                    if (edgeState === "touch") {
+                        setCanScrollLeft(false);
+                    } else {
+                        setCanScrollLeft(true);
+                    }
+                },
+                onRightEdge: (edgeState)=>{
+                    if (edgeState === "touch") {
+                        setCanScrollRight(false);
+                    } else {
+                        setCanScrollRight(true);
+                    }
+                },
+                onFlow: (flow)=>{
+                    if (flow === "overflow") {
+                        setShowScrollButtons(true);
+                    } else {
+                        setShowScrollButtons(false);
+                    }
+                },
+                onResize: ()=>{
+                    tabsListRef.current?.querySelector('button[data-state="active"]')?.scrollIntoView();
+                },
+                onTabChange: (entries)=>{
+                    if (entries.filter((entry)=>entry.addedNodes.length !== 0).length !== 0) {
+                        tabsListRef.current?.querySelector('button[data-state="active"]')?.scrollIntoView();
+                    }
+                },
+                "data-slot": "tabs-list",
+                className: cn(tabsListStyles, className),
+                onWheel: (event)=>horizontalScroll(event),
+                ...props,
+                ref: tabsListRef,
+                children: children
+            }),
+            showScrollButtons && /*#__PURE__*/ _jsx(TabScrollRightButton, {
+                disabled: !canScrollRight,
+                onClick: ()=>performHorizontalScroll(tabsListRef, "right")
+            })
+        ]
+    });
+}
+export function TabsListDropdown({ tabs, handleTabSelect, handleCloseTab }) {
+    const [isMenuOpen, setIsMenuOpen] = React.useState(false);
+    return /*#__PURE__*/ _jsxs(Popover, {
+        open: isMenuOpen,
+        onOpenChange: setIsMenuOpen,
+        children: [
+            /*#__PURE__*/ _jsx(PopoverTrigger, {
+                asChild: true,
+                children: /*#__PURE__*/ _jsx(Button, {
+                    variant: "link",
+                    className: "bg-bg-secondary h-full border-b pr-6",
+                    children: /*#__PURE__*/ _jsx(ChevronDownIcon, {
+                        className: "size-4"
+                    })
+                })
+            }),
+            /*#__PURE__*/ _jsx(PopoverContent, {
+                className: "w-80 p-0 mr-3",
+                align: "end",
+                children: /*#__PURE__*/ _jsxs(Command, {
+                    children: [
+                        /*#__PURE__*/ _jsx(CommandInput, {
+                            placeholder: "Search tabs..."
+                        }),
+                        /*#__PURE__*/ _jsxs(CommandList, {
+                            children: [
+                                /*#__PURE__*/ _jsx(CommandEmpty, {
+                                    children: "Not tabs found."
+                                }),
+                                tabs.map((tab)=>/*#__PURE__*/ _jsxs(CommandItem, {
+                                        onSelect: ()=>{
+                                            handleTabSelect?.(tab.id);
+                                            setIsMenuOpen(false);
+                                        },
+                                        className: "group flex items-center justify-between",
+                                        children: [
+                                            tab.content,
+                                            tabs.length > 1 && /*#__PURE__*/ _jsx(Button, {
+                                                variant: "ghost",
+                                                size: "small",
+                                                className: "opacity-0 group-hover:opacity-100 transition-opacity p-1 ml-2",
+                                                onClick: (e)=>{
+                                                    e.stopPropagation();
+                                                    handleCloseTab?.(tab.id);
+                                                },
+                                                children: /*#__PURE__*/ _jsx(X, {
+                                                    className: "size-3"
+                                                })
+                                            })
+                                        ]
+                                    }, tab.id))
+                            ]
+                        })
+                    ]
+                })
+            })
+        ]
     });
 }
 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),
+        className: cn(baseTabsTriggerStyles, onClose ? "justify-between" : "justify-start", className),
         ...props,
         children: [
             props.children,
@@ -66,7 +372,7 @@ function TabsTrigger({ className, onClose, ...props }) {
                 },
                 variant: "link",
                 size: "small",
-                className: "p-0 ml-2",
+                className: "p-0 ml-2 opacity-0 group-hover/tabs-trigger:opacity-100 transition-opacity",
                 asChild: true,
                 children: /*#__PURE__*/ _jsx("span", {
                     children: /*#__PURE__*/ _jsx(X, {})
@@ -78,10 +384,10 @@ function TabsTrigger({ className, onClose, ...props }) {
 function TabsContent({ className, ...props }) {
     return /*#__PURE__*/ _jsx(TabsPrimitive.Content, {
         "data-slot": "tabs-content",
-        className: cn("flex-1 outline-none", className),
+        className: cn(tabsContentStyles, className),
         ...props
     });
 }
-export { Tabs, TabsList, TabsTrigger, TabsContent };
+export { Tabs, TabsList, TabsTrigger, TabsContent, TabsBrowserList };
 
 //# sourceMappingURL=tabs.js.map