@dust-tt/sparkle 0.2.279 → 0.2.280-rc-1

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

@@ -0,0 +1,12 @@
+import * as TabsPrimitive from "@radix-ui/react-tabs";
+import * as React from "react";
+declare const Tabs: React.ForwardRefExoticComponent<TabsPrimitive.TabsProps & React.RefAttributes<HTMLDivElement>>;
+declare const TabsList: React.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsListProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const TabsTrigger: React.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & {
+    label?: string | undefined;
+    icon?: React.ComponentType<{}> | undefined;
+    isLoading?: boolean | undefined;
+} & React.RefAttributes<HTMLButtonElement>>;
+declare const TabsContent: React.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export { Tabs, TabsContent, TabsList, TabsTrigger };
+//# sourceMappingURL=Tabs.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Tabs.d.ts","sourceRoot":"","sources":["../../../src/components/Tabs.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,aAAa,MAAM,sBAAsB,CAAC;AACtD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,QAAA,MAAM,IAAI,gGAAqB,CAAC;AAEhC,QAAA,MAAM,QAAQ,uJAYZ,CAAC;AAGH,QAAA,MAAM,WAAW;;;;2CAkBf,CAAC;AAGH,QAAA,MAAM,WAAW,0JAYf,CAAC;AAGH,OAAO,EAAE,IAAI,EAAE,WAAW,EAAE,QAAQ,EAAE,WAAW,EAAE,CAAC"}

package/dist/esm/components/Tabs.js

@@ -0,0 +1,24 @@
+import { __assign, __rest } from "tslib";
+import * as TabsPrimitive from "@radix-ui/react-tabs";
+import * as React from "react";
+import { Button } from "../components";
+import { cn } from "../lib/utils";
+var Tabs = TabsPrimitive.Root;
+var TabsList = React.forwardRef(function (_a, ref) {
+    var className = _a.className, props = __rest(_a, ["className"]);
+    return (React.createElement(TabsPrimitive.List, __assign({ ref: ref, className: cn("s-inline-flex s-h-10 s-items-center s-gap-2 s-border-b s-border-separator", className) }, props)));
+});
+TabsList.displayName = TabsPrimitive.List.displayName;
+var TabsTrigger = React.forwardRef(function (_a, ref) {
+    var className = _a.className, label = _a.label, icon = _a.icon, props = __rest(_a, ["className", "label", "icon"]);
+    return (React.createElement(TabsPrimitive.Trigger, __assign({ ref: ref, className: cn("s-border-0 s-border-b-2 s-border-primary-800/0 s-pb-1 disabled:s-pointer-events-none data-[state=active]:s-border-primary-800", className) }, props),
+        React.createElement(Button, { variant: "ghost", size: "sm", label: label, icon: icon })));
+});
+TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
+var TabsContent = React.forwardRef(function (_a, ref) {
+    var className = _a.className, props = __rest(_a, ["className"]);
+    return (React.createElement(TabsPrimitive.Content, __assign({ ref: ref, className: cn("focus-visible:s-ring-ring s-contents s-ring-offset-background focus-visible:s-outline-none focus-visible:s-ring-2 focus-visible:s-ring-offset-2", className) }, props)));
+});
+TabsContent.displayName = TabsPrimitive.Content.displayName;
+export { Tabs, TabsContent, TabsList, TabsTrigger };
+//# sourceMappingURL=Tabs.js.map

package/dist/esm/components/Tabs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tabs.js","sourceRoot":"","sources":["../../../src/components/Tabs.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,aAAa,MAAM,sBAAsB,CAAC;AACtD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,EAAE,EAAE,MAAM,oBAAoB,CAAC;AAExC,IAAM,IAAI,GAAG,aAAa,CAAC,IAAI,CAAC;AAEhC,IAAM,QAAQ,GAAG,KAAK,CAAC,UAAU,CAG/B,UAAC,EAAuB,EAAE,GAAG;IAA1B,IAAA,SAAS,eAAA,EAAK,KAAK,cAArB,aAAuB,CAAF;IAAY,OAAA,CAClC,oBAAC,aAAa,CAAC,IAAI,aACjB,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CACX,2EAA2E,EAC3E,SAAS,CACV,IACG,KAAK,EACT,CACH,CAAA;CAAA,CAAC,CAAC;AACH,QAAQ,CAAC,WAAW,GAAG,aAAa,CAAC,IAAI,CAAC,WAAW,CAAC;AAEtD,IAAM,WAAW,GAAG,KAAK,CAAC,UAAU,CAOlC,UAAC,EAAoC,EAAE,GAAG;IAAvC,IAAA,SAAS,eAAA,EAAE,KAAK,WAAA,EAAE,IAAI,UAAA,EAAK,KAAK,cAAlC,8BAAoC,CAAF;IAAY,OAAA,CAC/C,oBAAC,aAAa,CAAC,OAAO,aACpB,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CACX,+HAA+H,EAC/H,SAAS,CACV,IACG,KAAK;QAET,oBAAC,MAAM,IAAC,OAAO,EAAC,OAAO,EAAC,IAAI,EAAC,IAAI,EAAC,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,IAAI,GAAI,CACxC,CACzB,CAAA;CAAA,CAAC,CAAC;AACH,WAAW,CAAC,WAAW,GAAG,aAAa,CAAC,OAAO,CAAC,WAAW,CAAC;AAE5D,IAAM,WAAW,GAAG,KAAK,CAAC,UAAU,CAGlC,UAAC,EAAuB,EAAE,GAAG;IAA1B,IAAA,SAAS,eAAA,EAAK,KAAK,cAArB,aAAuB,CAAF;IAAY,OAAA,CAClC,oBAAC,aAAa,CAAC,OAAO,aACpB,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CACX,iJAAiJ,EACjJ,SAAS,CACV,IACG,KAAK,EACT,CACH,CAAA;CAAA,CAAC,CAAC;AACH,WAAW,CAAC,WAAW,GAAG,aAAa,CAAC,OAAO,CAAC,WAAW,CAAC;AAE5D,OAAO,EAAE,IAAI,EAAE,WAAW,EAAE,QAAQ,EAAE,WAAW,EAAE,CAAC"}

package/dist/esm/components/index.d.ts

@@ -56,7 +56,7 @@ export { Searchbar } from "./Searchbar";
 export { Separator } from "./Separator";
 export { SliderToggle } from "./SliderToggle";
 export { default as Spinner } from "./Spinner";
-export { Tab } from "./Tab";
+export { Tabs, TabsContent, TabsList, TabsTrigger } from "./Tabs";
 export { TextArea } from "./TextArea";
 export { Tooltip, TooltipContent, TooltipProvider, TooltipRoot, TooltipTrigger, } from "./Tooltip";
 export { Tree } from "./Tree";

package/dist/esm/components/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":"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"}

package/dist/esm/components/index.js

@@ -51,7 +51,7 @@ export { Searchbar } from "./Searchbar";
 export { Separator } from "./Separator";
 export { SliderToggle } from "./SliderToggle";
 export { default as Spinner } from "./Spinner";
-export { Tab } from "./Tab";
+export { Tabs, TabsContent, TabsList, TabsTrigger } from "./Tabs";
 export { TextArea } from "./TextArea";
 export { Tooltip, TooltipContent, TooltipProvider, TooltipRoot, TooltipTrigger, } from "./Tooltip";
 export { Tree } from "./Tree";

package/dist/esm/components/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":"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"}

package/dist/esm/stories/Tabs.stories.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+declare const meta: {
+    title: string;
+};
+export default meta;
+export declare function TabExample(): React.JSX.Element;
+//# sourceMappingURL=Tabs.stories.d.ts.map

package/dist/esm/stories/Tabs.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tabs.stories.d.ts","sourceRoot":"","sources":["../../../src/stories/Tabs.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAY1B,QAAA,MAAM,IAAI;;CAEM,CAAC;AAEjB,eAAe,IAAI,CAAC;AAEpB,wBAAgB,UAAU,sBAazB"}

package/dist/esm/stories/Tabs.stories.js

@@ -0,0 +1,17 @@
+import React from "react";
+import { Cog6ToothIcon, CommandIcon, LightbulbIcon, Tabs, TabsContent, TabsList, TabsTrigger, } from "../index_with_tw_base";
+var meta = {
+    title: "Components/Tabs",
+};
+export default meta;
+export function TabExample() {
+    return (React.createElement(Tabs, { defaultValue: "account" },
+        React.createElement(TabsList, { className: "grid w-full grid-cols-2" },
+            React.createElement(TabsTrigger, { value: "account", label: "Hello", icon: CommandIcon }),
+            React.createElement(TabsTrigger, { value: "password", label: "World", icon: LightbulbIcon }),
+            React.createElement(TabsTrigger, { value: "settings", icon: Cog6ToothIcon })),
+        React.createElement(TabsContent, { value: "account" }, "Hello"),
+        React.createElement(TabsContent, { value: "password" }, "World"),
+        React.createElement(TabsContent, { value: "settings" }, "Settings")));
+}
+//# sourceMappingURL=Tabs.stories.js.map

package/dist/esm/stories/Tabs.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tabs.stories.js","sourceRoot":"","sources":["../../../src/stories/Tabs.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EACL,aAAa,EACb,WAAW,EACX,aAAa,EACb,IAAI,EACJ,WAAW,EACX,QAAQ,EACR,WAAW,GACZ,MAAM,uBAAuB,CAAC;AAE/B,IAAM,IAAI,GAAG;IACX,KAAK,EAAE,iBAAiB;CACV,CAAC;AAEjB,eAAe,IAAI,CAAC;AAEpB,MAAM,UAAU,UAAU;IACxB,OAAO,CACL,oBAAC,IAAI,IAAC,YAAY,EAAC,SAAS;QAC1B,oBAAC,QAAQ,IAAC,SAAS,EAAC,yBAAyB;YAC3C,oBAAC,WAAW,IAAC,KAAK,EAAC,SAAS,EAAC,KAAK,EAAC,OAAO,EAAC,IAAI,EAAE,WAAW,GAAI;YAChE,oBAAC,WAAW,IAAC,KAAK,EAAC,UAAU,EAAC,KAAK,EAAC,OAAO,EAAC,IAAI,EAAE,aAAa,GAAI;YACnE,oBAAC,WAAW,IAAC,KAAK,EAAC,UAAU,EAAC,IAAI,EAAE,aAAa,GAAI,CAC5C;QACX,oBAAC,WAAW,IAAC,KAAK,EAAC,SAAS,YAAoB;QAChD,oBAAC,WAAW,IAAC,KAAK,EAAC,UAAU,YAAoB;QACjD,oBAAC,WAAW,IAAC,KAAK,EAAC,UAAU,eAAuB,CAC/C,CACR,CAAC;AACJ,CAAC"}

package/dist/sparkle.css

@@ -824,11 +824,6 @@ select {
   margin-right: -0.25rem;
 }
 
-.s-mx-2 {
-  margin-left: 0.5rem;
-  margin-right: 0.5rem;
-}
-
 .s-mx-auto {
   margin-left: auto;
   margin-right: auto;
@@ -995,6 +990,10 @@ select {
   display: grid;
 }
 
+.s-contents {
+  display: contents;
+}
+
 .s-hidden {
   display: none;
 }
@@ -1268,10 +1267,6 @@ select {
   width: 200px;
 }
 
-.s-w-\[320px\] {
-  width: 320px;
-}
-
 .s-w-\[400px\] {
   width: 400px;
 }
@@ -1736,12 +1731,6 @@ select {
   row-gap: 24rem;
 }
 
-.s-space-x-0 > :not([hidden]) ~ :not([hidden]) {
-  --tw-space-x-reverse: 0;
-  margin-right: calc(0px * var(--tw-space-x-reverse));
-  margin-left: calc(0px * calc(1 - var(--tw-space-x-reverse)));
-}
-
 .s-space-x-1 > :not([hidden]) ~ :not([hidden]) {
   --tw-space-x-reverse: 0;
   margin-right: calc(0.25rem * var(--tw-space-x-reverse));
@@ -1806,10 +1795,6 @@ select {
   overflow-x: hidden;
 }
 
-.s-overflow-y-hidden {
-  overflow-y: hidden;
-}
-
 .s-truncate {
   overflow: hidden;
   text-overflow: ellipsis;
@@ -1923,11 +1908,6 @@ select {
   border-color: rgb(147 197 253 / var(--tw-border-opacity));
 }
 
-.s-border-action-500 {
-  --tw-border-opacity: 1;
-  border-color: rgb(59 130 246 / var(--tw-border-opacity));
-}
-
 .s-border-amber-100 {
   --tw-border-opacity: 1;
   border-color: rgb(254 243 199 / var(--tw-border-opacity));
@@ -2117,6 +2097,10 @@ select {
   border-color: rgb(191 219 254 / 0);
 }
 
+.s-border-primary-800\/0 {
+  border-color: rgb(30 64 175 / 0);
+}
+
 .s-border-purple-100 {
   --tw-border-opacity: 1;
   border-color: rgb(243 232 255 / var(--tw-border-opacity));
@@ -2162,6 +2146,11 @@ select {
   border-color: rgb(253 164 175 / var(--tw-border-opacity));
 }
 
+.s-border-separator {
+  --tw-border-opacity: 1;
+  border-color: rgb(226 232 240 / var(--tw-border-opacity));
+}
+
 .s-border-sky-100 {
   --tw-border-opacity: 1;
   border-color: rgb(224 242 254 / var(--tw-border-opacity));
@@ -2239,10 +2228,6 @@ select {
   border-color: rgb(94 234 212 / var(--tw-border-opacity));
 }
 
-.s-border-transparent {
-  border-color: transparent;
-}
-
 .s-border-violet-100 {
   --tw-border-opacity: 1;
   border-color: rgb(237 233 254 / var(--tw-border-opacity));
@@ -3487,10 +3472,6 @@ select {
   padding-left: 0.5rem;
 }
 
-.s-pl-2\.5 {
-  padding-left: 0.625rem;
-}
-
 .s-pl-3 {
   padding-left: 0.75rem;
 }
@@ -3527,10 +3508,6 @@ select {
   padding-right: 0.75rem;
 }
 
-.s-pr-3\.5 {
-  padding-right: 0.875rem;
-}
-
 .s-pr-4 {
   padding-right: 1rem;
 }
@@ -4425,15 +4402,6 @@ select {
   transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
 }
 
-.s-scrollbar-hide {
-  -ms-overflow-style: none;
-  scrollbar-width: none;
-}
-
-.s-scrollbar-hide::-webkit-scrollbar {
-  display: none;
-}
-
 @keyframes enter {
   from {
     opacity: var(--tw-enter-opacity, 1);
@@ -4582,11 +4550,6 @@ select {
   cursor: not-allowed;
 }
 
-.hover\:s-border-action-300:hover {
-  --tw-border-opacity: 1;
-  border-color: rgb(147 197 253 / var(--tw-border-opacity));
-}
-
 .hover\:s-border-primary-200:hover {
   --tw-border-opacity: 1;
   border-color: rgb(191 219 254 / var(--tw-border-opacity));
@@ -4940,11 +4903,6 @@ select {
   color: rgb(248 113 113 / var(--tw-text-opacity));
 }
 
-.s-group\/tab:hover .group-hover\/tab\:s-text-action-400 {
-  --tw-text-opacity: 1;
-  color: rgb(96 165 250 / var(--tw-text-opacity));
-}
-
 .s-group\/item:hover .group-hover\/item\:s-opacity-100 {
   opacity: 1;
 }
@@ -4994,6 +4952,11 @@ select {
   pointer-events: none;
 }
 
+.data-\[state\=active\]\:s-border-primary-800[data-state=active] {
+  --tw-border-opacity: 1;
+  border-color: rgb(30 64 175 / var(--tw-border-opacity));
+}
+
 .data-\[state\=checked\]\:s-border-highlight[data-state=checked] {
   --tw-border-opacity: 1;
   border-color: rgb(59 130 246 / var(--tw-border-opacity));
@@ -5076,21 +5039,11 @@ select {
   --tw-enter-translate-y: 0.5rem;
 }
 
-:is(.s-dark .dark\:s-border-action-500-dark) {
-  --tw-border-opacity: 1;
-  border-color: rgb(59 130 246 / var(--tw-border-opacity));
-}
-
 :is(.s-dark .dark\:s-border-structure-100-dark) {
   --tw-border-opacity: 1;
   border-color: rgb(30 41 59 / var(--tw-border-opacity));
 }
 
-:is(.s-dark .dark\:s-border-structure-200-dark) {
-  --tw-border-opacity: 1;
-  border-color: rgb(51 65 85 / var(--tw-border-opacity));
-}
-
 :is(.s-dark .dark\:s-border-structure-200-dark\/50) {
   border-color: rgb(51 65 85 / 0.5);
 }
@@ -5153,11 +5106,6 @@ select {
   background-color: rgb(5 150 105 / var(--tw-bg-opacity));
 }
 
-:is(.s-dark :is(.s-dark .dark\:dark\:s-text-action-500-dark)) {
-  --tw-text-opacity: 1;
-  color: rgb(59 130 246 / var(--tw-text-opacity));
-}
-
 :is(.s-dark .dark\:s-text-action-500-dark) {
   --tw-text-opacity: 1;
   color: rgb(59 130 246 / var(--tw-text-opacity));
@@ -5248,11 +5196,6 @@ select {
   color: rgb(59 130 246 / var(--tw-text-opacity));
 }
 
-:is(.s-dark .dark\:hover\:s-text-action-600-dark:hover) {
-  --tw-text-opacity: 1;
-  color: rgb(96 165 250 / var(--tw-text-opacity));
-}
-
 :is(.s-dark .dark\:hover\:s-text-warning-500-dark:hover) {
   --tw-text-opacity: 1;
   color: rgb(239 68 68 / var(--tw-text-opacity));
@@ -5318,11 +5261,6 @@ select {
   color: rgb(248 113 113 / var(--tw-text-opacity));
 }
 
-:is(.s-dark .s-group\/tab:hover .dark\:group-hover\/tab\:s-text-action-500-dark) {
-  --tw-text-opacity: 1;
-  color: rgb(59 130 246 / var(--tw-text-opacity));
-}
-
 :is(.s-dark .s-group\/item:active .dark\:group-active\/item\:s-text-action-400-dark) {
   --tw-text-opacity: 1;
   color: rgb(37 99 235 / var(--tw-text-opacity));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dust-tt/sparkle",
-  "version": "0.2.279",
+  "version": "0.2.280-rc-1",
   "scripts": {
     "build": "rm -rf dist && npm run tailwind && npm run build:esm && npm run build:cjs",
     "tailwind": "tailwindcss -i ./src/styles/tailwind.css -o dist/sparkle.css",
@@ -104,6 +104,7 @@
     "@radix-ui/react-scroll-area": "^1.2.0",
     "@radix-ui/react-separator": "^1.1.0",
     "@radix-ui/react-slot": "^1.1.0",
+    "@radix-ui/react-tabs": "^1.1.1",
     "@radix-ui/react-tooltip": "^1.1.3",
     "@tanstack/react-table": "^8.13.0",
     "class-variance-authority": "^0.7.0",

package/src/components/Tabs.tsx

@@ -0,0 +1,60 @@
+import * as TabsPrimitive from "@radix-ui/react-tabs";
+import * as React from "react";
+
+import { Button } from "@sparkle/components";
+import { cn } from "@sparkle/lib/utils";
+
+const Tabs = TabsPrimitive.Root;
+
+const TabsList = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.List>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.List
+    ref={ref}
+    className={cn(
+      "s-inline-flex s-h-10 s-items-center s-gap-2 s-border-b s-border-separator",
+      className
+    )}
+    {...props}
+  />
+));
+TabsList.displayName = TabsPrimitive.List.displayName;
+
+const TabsTrigger = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger> & {
+    label?: string;
+    icon?: React.ComponentType;
+    isLoading?: boolean;
+  }
+>(({ className, label, icon, ...props }, ref) => (
+  <TabsPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      "s-border-0 s-border-b-2 s-border-primary-800/0 s-pb-1 disabled:s-pointer-events-none data-[state=active]:s-border-primary-800",
+      className
+    )}
+    {...props}
+  >
+    <Button variant="ghost" size="sm" label={label} icon={icon} />
+  </TabsPrimitive.Trigger>
+));
+TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
+
+const TabsContent = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Content
+    ref={ref}
+    className={cn(
+      "focus-visible:s-ring-ring s-contents s-ring-offset-background focus-visible:s-outline-none focus-visible:s-ring-2 focus-visible:s-ring-offset-2",
+      className
+    )}
+    {...props}
+  />
+));
+TabsContent.displayName = TabsPrimitive.Content.displayName;
+
+export { Tabs, TabsContent, TabsList, TabsTrigger };

package/src/components/index.ts

@@ -85,7 +85,7 @@ export { Searchbar } from "./Searchbar";
 export { Separator } from "./Separator";
 export { SliderToggle } from "./SliderToggle";
 export { default as Spinner } from "./Spinner";
-export { Tab } from "./Tab";
+export { Tabs, TabsContent, TabsList, TabsTrigger } from "./Tabs";
 export { TextArea } from "./TextArea";
 export {
   Tooltip,

package/src/stories/Tabs.stories.tsx

@@ -0,0 +1,33 @@
+import { Meta } from "@storybook/react";
+import React from "react";
+
+import {
+  Cog6ToothIcon,
+  CommandIcon,
+  LightbulbIcon,
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
+} from "../index_with_tw_base";
+
+const meta = {
+  title: "Components/Tabs",
+} satisfies Meta;
+
+export default meta;
+
+export function TabExample() {
+  return (
+    <Tabs defaultValue="account">
+      <TabsList className="grid w-full grid-cols-2">
+        <TabsTrigger value="account" label="Hello" icon={CommandIcon} />
+        <TabsTrigger value="password" label="World" icon={LightbulbIcon} />
+        <TabsTrigger value="settings" icon={Cog6ToothIcon} />
+      </TabsList>
+      <TabsContent value="account">Hello</TabsContent>
+      <TabsContent value="password">World</TabsContent>
+      <TabsContent value="settings">Settings</TabsContent>
+    </Tabs>
+  );
+}

package/dist/esm/components/Tab.d.ts

@@ -1,38 +0,0 @@
-import React, { ComponentType, MouseEvent } from "react";
-type TabType<E> = {
-    current: boolean;
-    disabled?: boolean;
-    hasSeparator?: boolean;
-    hideLabel?: boolean;
-    icon?: ComponentType<{
-        className?: string;
-    }>;
-    id?: E;
-    label: string;
-    sizing?: "hug" | "expand";
-} & ({
-    onClick?: (event: MouseEvent<HTMLAnchorElement>) => void;
-    href?: never;
-} | {
-    onClick?: never;
-    href: string;
-});
-type TabProps<E> = {
-    variant?: "default" | "stepper";
-    tabs: Array<TabType<E>>;
-    setCurrentTab?: (tabId: E, e: MouseEvent<HTMLAnchorElement>) => void;
-    tabClassName?: string;
-    className?: string;
-};
-/**
- * Tab component displaying a list of tabs.
- *
- * Tab click action is specified:
- * - either per tab, by providing either an href or an onClick handler in tab
- *   data (mutually exclusive);
- * - or globally, by providing a setCurrentTab function.
- * Both per-tab and global actions can be set, the per-tab action taking precedence.
- */
-export declare function Tab<E>({ variant, tabs, setCurrentTab, className, tabClassName, }: TabProps<E>): React.JSX.Element;
-export {};
-//# sourceMappingURL=Tab.d.ts.map

package/dist/esm/components/Tab.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Tab.d.ts","sourceRoot":"","sources":["../../../src/components/Tab.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,aAAa,EAAE,UAAU,EAAa,MAAM,OAAO,CAAC;AAapE,KAAK,OAAO,CAAC,CAAC,IAAI;IAChB,OAAO,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,IAAI,CAAC,EAAE,aAAa,CAAC;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IAC7C,EAAE,CAAC,EAAE,CAAC,CAAC;IACP,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAC;CAC3B,GAAG,CACA;IAAE,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IAAC,IAAI,CAAC,EAAE,KAAK,CAAA;CAAE,GAC1E;IAAE,OAAO,CAAC,EAAE,KAAK,CAAC;IAAC,IAAI,EAAE,MAAM,CAAA;CAAE,CACpC,CAAC;AAEF,KAAK,QAAQ,CAAC,CAAC,IAAI;IACjB,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;IAChC,IAAI,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC;IACxB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,EAAE,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IACrE,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AA6DF;;;;;;;;GAQG;AACH,wBAAgB,GAAG,CAAC,CAAC,EAAE,EACrB,OAAmB,EACnB,IAAI,EACJ,aAAa,EACb,SAAS,EACT,YAAiB,GAClB,EAAE,QAAQ,CAAC,CAAC,CAAC,qBAqIb"}

package/dist/esm/components/Tab.js

@@ -1,130 +0,0 @@
-import React from "react";
-import { noHrefLink, SparkleContext, } from "../context";
-import { ChevronRightIcon } from "../icons";
-import { classNames } from "../lib/utils";
-import { Icon } from "./Icon";
-import { Tooltip } from "./Tooltip";
-var tabClasses = {
-    default: {
-        base: "s-text-element-800 s-border-transparent s-cursor-pointer s-border-b-2",
-        hover: "hover:s-text-action-500 hover:s-border-action-300",
-        dark: {
-            base: "dark:s-text-element-700-dark",
-            hover: "dark:hover:s-text-action-600-dark",
-        },
-    },
-    selected: {
-        base: "s-border-action-500 s-text-action-500 s-cursor-default s-border-b-2",
-        hover: "",
-        dark: {
-            base: "dark:s-border-action-500-dark dark:s-text-action-500-dark",
-            hover: "",
-        },
-    },
-    stepperDefault: {
-        base: "s-text-element-800 s-cursor-pointer",
-        hover: "hover:s-text-action-500",
-        dark: {
-            base: "dark:s-text-element-700-dark",
-            hover: "dark:hover:s-text-action-600-dark",
-        },
-    },
-    stepperSelected: {
-        base: "s-text-action-500 s-cursor-default",
-        hover: "",
-        dark: {
-            base: "dark:dark:s-text-action-500-dark",
-            hover: "",
-        },
-    },
-};
-var iconClasses = {
-    default: {
-        base: "s-text-element-600",
-        hover: "group-hover/tab:s-text-action-400",
-        dark: {
-            base: "dark:s-text-element-600-dark",
-            hover: "dark:group-hover/tab:s-text-action-500-dark",
-        },
-    },
-    selected: {
-        base: "s-text-action-400",
-        hover: "",
-        dark: {
-            base: "dark:s-text-action-500-dark",
-            hover: "",
-        },
-    },
-};
-var tabSizingClasses = {
-    hug: "",
-    expand: "s-flex-1",
-};
-/**
- * Tab component displaying a list of tabs.
- *
- * Tab click action is specified:
- * - either per tab, by providing either an href or an onClick handler in tab
- *   data (mutually exclusive);
- * - or globally, by providing a setCurrentTab function.
- * Both per-tab and global actions can be set, the per-tab action taking precedence.
- */
-export function Tab(_a) {
-    var _b = _a.variant, variant = _b === void 0 ? "default" : _b, tabs = _a.tabs, setCurrentTab = _a.setCurrentTab, className = _a.className, _c = _a.tabClassName, tabClassName = _c === void 0 ? "" : _c;
-    var components = React.useContext(SparkleContext).components;
-    var renderTabs = function () {
-        return tabs.map(function (tab, i) {
-            var _a, _b, _c, _d, _e;
-            var tabStateClasses = variant === "stepper"
-                ? tab.current
-                    ? tabClasses.stepperSelected
-                    : tabClasses.stepperDefault
-                : tab.current
-                    ? tabClasses.selected
-                    : tabClasses.default;
-            var iconStateClasses = tab.current
-                ? iconClasses.selected
-                : iconClasses.default;
-            var finalTabClasses = classNames("s-group/tab s-justify-center s-flex s-text-sm s-font-semibold s-py-2.5 s-transition-all ease-out s-duration-400 s-whitespace-nowrap s-select-none", variant === "default"
-                ? tab.icon
-                    ? tab.hideLabel
-                        ? "s-px-3"
-                        : "s-pr-3.5 s-pl-2.5"
-                    : "s-px-3"
-                : "s-pl-1", tabStateClasses.base, tabStateClasses.hover, tabStateClasses.dark.base, tabStateClasses.dark.hover, tabClassName, tab.disabled ? "s-opacity-50 s-pointer-events-none" : "");
-            var finalIconClasses = classNames("s-transition-colors s-duration-400", iconStateClasses.base, iconStateClasses.hover, iconStateClasses.dark.base, iconStateClasses.dark.hover, tabClassName);
-            var Link = tab.href
-                ? components.link
-                : noHrefLink;
-            // precedence on href and onClick (mutually exclusive), then setCurrentTab
-            var setCurrentTabFn = function (e) {
-                if (!tab.id) {
-                    throw new Error("Tab id is required to use setCurrentTab");
-                }
-                setCurrentTab === null || setCurrentTab === void 0 ? void 0 : setCurrentTab(tab.id, e);
-            };
-            var onClickAction = tab.href
-                ? undefined
-                : (_a = tab.onClick) !== null && _a !== void 0 ? _a : setCurrentTabFn;
-            var content = (React.createElement(Link, { key: tab.label, className: finalTabClasses, "aria-current": tab.current ? "page" : undefined, onClick: onClickAction, href: tab.href || "#" },
-                React.createElement("div", { className: tab.current
-                        ? "s-flex s-gap-x-2"
-                        : "s-flex s-gap-x-2 s-transition s-duration-300 s-ease-out" },
-                    tab.icon && (React.createElement(Icon, { visual: tab.icon, className: finalIconClasses, size: "sm" })), (_b = tab.hideLabel) !== null && _b !== void 0 ? _b : tab.label,
-                    variant === "stepper" && i < tabs.length - 1 && (React.createElement(Icon, { visual: ChevronRightIcon, className: "s-mx-2 s-text-element-500", size: "sm" })))));
-            return tab.hideLabel ? (tab.label ? (React.createElement(React.Fragment, { key: "tab-".concat(i) },
-                React.createElement("div", { className: tabSizingClasses[(_c = tab.sizing) !== null && _c !== void 0 ? _c : "hug"] },
-                    React.createElement(Tooltip, { trigger: content, label: tab.label })),
-                tab.hasSeparator && (React.createElement("div", { className: "s-flex s-h-full s-grow", key: "sep-".concat(i) })))) : (React.createElement(React.Fragment, { key: "tab-".concat(i) },
-                React.createElement("div", { className: tabSizingClasses[(_d = tab.sizing) !== null && _d !== void 0 ? _d : "hug"] }, content),
-                tab.hasSeparator && (React.createElement("div", { className: "s-flex s-h-full s-grow", key: "sep-".concat(i) }))))) : (React.createElement(React.Fragment, { key: "tab-".concat(i) },
-                React.createElement("div", { className: tabSizingClasses[(_e = tab.sizing) !== null && _e !== void 0 ? _e : "hug"] }, content),
-                tab.hasSeparator && (React.createElement("div", { className: "s-flex s-h-full s-grow", key: "sep-".concat(i) }))));
-        });
-    };
-    return (React.createElement("div", { className: classNames(variant === "default"
-            ? "s-border-b s-border-structure-200 dark:s-border-structure-200-dark"
-            : "", className !== null && className !== void 0 ? className : "", "s-overflow-x-auto s-overflow-y-hidden s-scrollbar-hide") },
-        React.createElement("nav", { className: "s-flex s-space-x-0", "aria-label": "Tabs" }, renderTabs())));
-}
-//# sourceMappingURL=Tab.js.map