@stubber/ui 1.1.0 → 1.1.1

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

@@ -2,6 +2,85 @@ import { Tabs as TabsPrimitive } from "bits-ui";
 import Content from "./tabs-content.svelte";
 import List from "./tabs-list.svelte";
 import Trigger from "./tabs-trigger.svelte";
+import { type VariantProps } from "tailwind-variants";
 declare const Root: typeof TabsPrimitive.Root;
-export type TabVariant = "default" | "secondary";
-export { Root, Content, List, Trigger, Root as Tabs, Content as TabsContent, List as TabsList, Trigger as TabsTrigger, };
+declare const listVariants: import("tailwind-variants").TVReturnType<{
+    variant: {
+        default: string;
+        secondary: string;
+    };
+}, undefined, "text-muted-foreground", import("tailwind-variants/dist/config.d.ts").TVConfig<{
+    variant: {
+        default: string;
+        secondary: string;
+    };
+}, {
+    variant: {
+        default: string;
+        secondary: string;
+    };
+}>, {
+    variant: {
+        default: string;
+        secondary: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    variant: {
+        default: string;
+        secondary: string;
+    };
+}, undefined, "text-muted-foreground", import("tailwind-variants/dist/config.d.ts").TVConfig<{
+    variant: {
+        default: string;
+        secondary: string;
+    };
+}, {
+    variant: {
+        default: string;
+        secondary: string;
+    };
+}>, unknown, unknown, undefined>>;
+declare const triggerVariants: import("tailwind-variants").TVReturnType<{
+    variant: {
+        default: string;
+        secondary: string;
+    };
+}, undefined, "data-[state=active]:bg-background data-[state=active]:text-foreground", import("tailwind-variants/dist/config.d.ts").TVConfig<{
+    variant: {
+        default: string;
+        secondary: string;
+    };
+}, {
+    variant: {
+        default: string;
+        secondary: string;
+    };
+}>, {
+    variant: {
+        default: string;
+        secondary: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    variant: {
+        default: string;
+        secondary: string;
+    };
+}, undefined, "data-[state=active]:bg-background data-[state=active]:text-foreground", import("tailwind-variants/dist/config.d.ts").TVConfig<{
+    variant: {
+        default: string;
+        secondary: string;
+    };
+}, {
+    variant: {
+        default: string;
+        secondary: string;
+    };
+}>, unknown, unknown, undefined>>;
+type ListVariant = VariantProps<typeof listVariants>["variant"];
+type ListProps = TabsPrimitive.ListProps & {
+    variant?: ListVariant;
+};
+type TriggerProps = TabsPrimitive.TriggerProps & {
+    variant?: VariantProps<typeof triggerVariants>["variant"];
+};
+export { Root, Content, List, Trigger, type ListProps, type TriggerProps, Root as Tabs, Content as TabsContent, List as TabsList, Trigger as TabsTrigger, type ListProps as TabsListProps, type TriggerProps as TabsTriggerProps, listVariants, triggerVariants, };

package/dist/components/tabs/index.js

@@ -2,7 +2,32 @@ import { Tabs as TabsPrimitive } from "bits-ui";
 import Content from "./tabs-content.svelte";
 import List from "./tabs-list.svelte";
 import Trigger from "./tabs-trigger.svelte";
+import { tv } from "tailwind-variants";
 const Root = TabsPrimitive.Root;
+const listVariants = tv({
+    base: "text-muted-foreground",
+    variants: {
+        variant: {
+            default: "bg-white text-muted-foreground",
+            secondary: "bg-muted text-muted-foreground",
+        },
+    },
+    defaultVariants: {
+        variant: "default",
+    },
+});
+const triggerVariants = tv({
+    base: "data-[state=active]:bg-background data-[state=active]:text-foreground",
+    variants: {
+        variant: {
+            default: "data-[state=active]:border-b-2 border-black",
+            secondary: "data-[state=active]:shadow-sm rounded-lg",
+        },
+    },
+    defaultVariants: {
+        variant: "default",
+    },
+});
 export { Root, Content, List, Trigger, 
 //
-Root as Tabs, Content as TabsContent, List as TabsList, Trigger as TabsTrigger, };
+Root as Tabs, Content as TabsContent, List as TabsList, Trigger as TabsTrigger, listVariants, triggerVariants, };

package/dist/components/tabs/tabs-list.svelte

@@ -1,19 +1,18 @@
 <script>import { Tabs as TabsPrimitive } from "bits-ui";
 import { cn } from "../../utils/shadcn-utils.js";
+import { listVariants } from "./index.js";
+import { getContext } from "svelte";
 let className = void 0;
 export let variant = "default";
 export { className as class };
-const variantStyles = {
-  default: "bg-white text-muted-foreground",
-  secondary: "bg-muted text-muted-foreground"
-};
+let context = getContext("tabs");
+if (context?.options) context.options.variant = variant;
 </script>
 
 <TabsPrimitive.List
   class={cn(
     "inline-flex h-10 items-center justify-center rounded-lg p-1",
-    variantStyles[variant],
-    className
+    listVariants({ variant, className })
   )}
   {...$$restProps}
 >

package/dist/components/tabs/tabs-list.svelte.d.ts

@@ -1,7 +1,7 @@
 import { SvelteComponent } from "svelte";
-import { Tabs as TabsPrimitive } from "bits-ui";
+import { type ListProps } from "./index.js";
 declare const __propDef: {
-    props: TabsPrimitive.ListProps;
+    props: ListProps;
     events: {
         [evt: string]: CustomEvent<any>;
     };

package/dist/components/tabs/tabs-trigger.svelte

@@ -1,20 +1,21 @@
 <script>import { Tabs as TabsPrimitive } from "bits-ui";
 import { cn } from "../../utils/shadcn-utils.js";
+import { triggerVariants } from "./index.js";
+import { getAllContexts, getContext } from "svelte";
 let className = void 0;
 export let value;
 export let variant = "default";
 export { className as class };
-const variantStyles = {
-  default: "data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:border-b-2 border-black",
-  secondary: "data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm rounded-lg"
-};
+let context = getContext("tabs");
+if (context?.options?.variant) {
+  variant = context.options.variant;
+}
 </script>
 
 <TabsPrimitive.Trigger
   class={cn(
     "ring-offset-background focus-visible:ring-ring inline-flex items-center justify-center gap-2 whitespace-nowrap px-3 py-1.5 text-sm font-medium transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
-    variantStyles[variant],
-    className
+    triggerVariants({ variant, className })
   )}
   {value}
   {...$$restProps}

package/dist/components/tabs/tabs-trigger.svelte.d.ts

@@ -1,7 +1,8 @@
 import { SvelteComponent } from "svelte";
 import { Tabs as TabsPrimitive } from "bits-ui";
+import { type TriggerProps } from "./index.js";
 declare const __propDef: {
-    props: TabsPrimitive.TriggerProps;
+    props: TriggerProps;
     slots: {
         default: {};
     };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stubber/ui",
-  "version": "1.1.0",
+  "version": "1.1.1",
   "scripts": {
     "dev": "vite dev",
     "build": "vite build && pnpm run package && node ./fix_dts_imports.js",