@sth87/shadcn-design-system 0.0.36 → 0.1.1

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

@@ -5,7 +5,7 @@ import "../../packages/ui/src/components/input.js";
 import "../../packages/ui/src/components/textarea.js";
 import "react/jsx-runtime";
 import "@radix-ui/react-label";
-import { cn as o } from "../../packages/ui/src/lib/utils.js";
+import { cn as s } from "../../packages/ui/src/lib/utils.js";
 import "../../packages/ui/src/components/select.js";
 import "../../packages/ui/src/components/combobox.js";
 import "@radix-ui/react-tooltip";
@@ -34,235 +34,235 @@ import "../../packages/ui/src/components/tabs.js";
 import "../../packages/ui/src/components/toggle.js";
 const J = {
   sm: {
-    horizontal: "text-xs h-7 [&>button]:px-2",
-    vertical: "text-xs [&>button]:py-0.5"
+    horizontal: "ds:text-xs ds:h-7 ds:[&>button]:px-2",
+    vertical: "ds:text-xs ds:[&>button]:py-0.5"
   },
   md: {
-    horizontal: "text-sm h-9 [&>button]:px-3",
-    vertical: "text-sm [&>button]:py-1"
+    horizontal: "ds:text-sm ds:h-9 ds:[&>button]:px-3",
+    vertical: "ds:text-sm ds:[&>button]:py-1"
   },
   lg: {
-    horizontal: "text-base h-11 [&>button]:px-4",
-    vertical: "text-base [&>button]:py-1.5"
+    horizontal: "ds:text-base ds:h-11 ds:[&>button]:px-4",
+    vertical: "ds:text-base ds:[&>button]:py-1.5"
   }
 }, K = {
   start: {
-    horizontal: "justify-start",
-    vertical: "items-start"
+    horizontal: "ds:justify-start",
+    vertical: "ds:items-start"
   },
   center: {
-    horizontal: "justify-center",
-    vertical: "items-center"
+    horizontal: "ds:justify-center",
+    vertical: "ds:items-center"
   },
   end: {
-    horizontal: "justify-end",
-    vertical: "items-end"
+    horizontal: "ds:justify-end",
+    vertical: "ds:items-end"
   }
 }, N = {
   top: {
-    root: "flex flex-col",
-    list: "flex-row"
+    root: "ds:flex ds:flex-col",
+    list: "ds:flex-row"
   },
   bottom: {
-    root: "flex flex-col-reverse",
-    list: "flex-row"
+    root: "ds:flex ds:flex-col-reverse",
+    list: "ds:flex-row"
   },
   left: {
-    root: "flex flex-row",
-    list: "flex-col h-fit"
+    root: "ds:flex ds:flex-row",
+    list: "ds:flex-col ds:h-fit"
   },
   right: {
-    root: "flex flex-row-reverse",
-    list: "flex-col h-fit"
+    root: "ds:flex ds:flex-row-reverse",
+    list: "ds:flex-col ds:h-fit"
   }
-}, O = (r, t) => {
-  const a = {
+}, O = (a, t) => {
+  const d = {
     primary: {
-      bg: "data-[state=active]:bg-primary dark:data-[state=active]:bg-primary data-[state=active]:text-primary-foreground dark:data-[state=active]:text-primary-foreground",
-      text: "data-[state=active]:text-primary dark:data-[state=active]:text-primary",
-      border: "data-[state=active]:border-primary dark:data-[state=active]:border-primary"
+      bg: "ds:data-[state=active]:bg-primary ds:dark:data-[state=active]:bg-primary ds:data-[state=active]:text-primary-foreground ds:dark:data-[state=active]:text-primary-foreground",
+      text: "ds:data-[state=active]:text-primary ds:dark:data-[state=active]:text-primary",
+      border: "ds:data-[state=active]:border-primary ds:dark:data-[state=active]:border-primary"
     },
     secondary: {
-      bg: "data-[state=active]:bg-secondary dark:data-[state=active]:bg-secondary data-[state=active]:text-secondary-foreground dark:data-[state=active]:text-secondary-foreground",
-      text: "data-[state=active]:text-secondary dark:data-[state=active]:text-secondary",
-      border: "data-[state=active]:border-secondary dark:data-[state=active]:border-secondary"
+      bg: "ds:data-[state=active]:bg-secondary ds:dark:data-[state=active]:bg-secondary ds:data-[state=active]:text-secondary-foreground ds:dark:data-[state=active]:text-secondary-foreground",
+      text: "ds:data-[state=active]:text-secondary ds:dark:data-[state=active]:text-secondary",
+      border: "ds:data-[state=active]:border-secondary ds:dark:data-[state=active]:border-secondary"
     },
     muted: {
-      bg: "data-[state=active]:bg-muted dark:data-[state=active]:bg-muted data-[state=active]:text-muted-foreground dark:data-[state=active]:text-muted-foreground",
-      text: "data-[state=active]:text-muted-foreground dark:data-[state=active]:text-muted-foreground",
-      border: "data-[state=active]:border-border dark:data-[state=active]:border-border"
+      bg: "ds:data-[state=active]:bg-muted ds:dark:data-[state=active]:bg-muted ds:data-[state=active]:text-muted-foreground ds:dark:data-[state=active]:text-muted-foreground",
+      text: "ds:data-[state=active]:text-muted-foreground ds:dark:data-[state=active]:text-muted-foreground",
+      border: "ds:data-[state=active]:border-border ds:dark:data-[state=active]:border-border"
     },
     accent: {
-      bg: "data-[state=active]:bg-accent dark:data-[state=active]:bg-accent data-[state=active]:text-accent-foreground dark:data-[state=active]:text-accent-foreground",
-      text: "data-[state=active]:text-accent-foreground dark:data-[state=active]:text-accent-foreground",
-      border: "data-[state=active]:border-accent dark:data-[state=active]:border-accent"
+      bg: "ds:data-[state=active]:bg-accent ds:dark:data-[state=active]:bg-accent ds:data-[state=active]:text-accent-foreground ds:dark:data-[state=active]:text-accent-foreground",
+      text: "ds:data-[state=active]:text-accent-foreground ds:dark:data-[state=active]:text-accent-foreground",
+      border: "ds:data-[state=active]:border-accent ds:dark:data-[state=active]:border-accent"
     },
     destructive: {
-      bg: "data-[state=active]:bg-destructive dark:data-[state=active]:bg-destructive data-[state=active]:text-destructive-foreground dark:data-[state=active]:text-destructive-foreground",
-      text: "data-[state=active]:text-destructive dark:data-[state=active]:text-destructive",
-      border: "data-[state=active]:border-destructive dark:data-[state=active]:border-destructive"
+      bg: "ds:data-[state=active]:bg-destructive ds:dark:data-[state=active]:bg-destructive ds:data-[state=active]:text-destructive-foreground ds:dark:data-[state=active]:text-destructive-foreground",
+      text: "ds:data-[state=active]:text-destructive ds:dark:data-[state=active]:text-destructive",
+      border: "ds:data-[state=active]:border-destructive ds:dark:data-[state=active]:border-destructive"
     },
     success: {
-      bg: "data-[state=active]:bg-success dark:data-[state=active]:bg-success data-[state=active]:text-success-foreground dark:data-[state=active]:text-success-foreground",
-      text: "data-[state=active]:text-success dark:data-[state=active]:text-success",
-      border: "data-[state=active]:border-success dark:data-[state=active]:border-success"
+      bg: "ds:data-[state=active]:bg-success ds:dark:data-[state=active]:bg-success ds:data-[state=active]:text-success-foreground ds:dark:data-[state=active]:text-success-foreground",
+      text: "ds:data-[state=active]:text-success ds:dark:data-[state=active]:text-success",
+      border: "ds:data-[state=active]:border-success ds:dark:data-[state=active]:border-success"
     },
     warning: {
-      bg: "data-[state=active]:bg-warning dark:data-[state=active]:bg-warning data-[state=active]:text-warning-foreground dark:data-[state=active]:text-warning-foreground",
-      text: "data-[state=active]:text-warning dark:data-[state=active]:text-warning",
-      border: "data-[state=active]:border-warning dark:data-[state=active]:border-warning"
+      bg: "ds:data-[state=active]:bg-warning ds:dark:data-[state=active]:bg-warning ds:data-[state=active]:text-warning-foreground ds:dark:data-[state=active]:text-warning-foreground",
+      text: "ds:data-[state=active]:text-warning ds:dark:data-[state=active]:text-warning",
+      border: "ds:data-[state=active]:border-warning ds:dark:data-[state=active]:border-warning"
     }
   }[t];
-  switch (r) {
+  switch (a) {
     case "bordered":
     case "pills":
-      return `${a.bg} dark:data-[state=active]:border-transparent`;
+      return `${d.bg} ds:dark:data-[state=active]:border-transparent`;
     case "pill-stroke":
-      return "data-[state=active]:bg-transparent dark:data-[state=active]:bg-transparent";
+      return "ds:data-[state=active]:bg-transparent ds:dark:data-[state=active]:bg-transparent";
     case "text":
-      return a.text;
+      return d.text;
     case "outline":
-      return a.border;
+      return d.border;
     case "underlined":
-      return o(a.border, a.text);
+      return s(d.border, d.text);
     case "enclosed":
-      return o(a.border, a.text);
+      return s(d.border, d.text);
     case "enclosed-fill":
-      return o(a.border, a.text);
+      return s(d.border, d.text);
     default:
       return "";
   }
-}, Q = (r, t, e) => {
-  if (r === "underlined")
+}, Q = (a, t, r) => {
+  if (a === "underlined")
     return {
-      top: "border-b",
-      bottom: "border-t",
-      left: "border-r",
-      right: "border-l"
-    }[e];
-  if (r === "enclosed") {
-    const a = {
-      top: "border-b",
-      bottom: "border-t",
-      left: "border-r",
-      right: "border-l"
-    }, d = {
+      top: "ds:border-b",
+      bottom: "ds:border-t",
+      left: "ds:border-r",
+      right: "ds:border-l"
+    }[r];
+  if (a === "enclosed") {
+    const d = {
+      top: "ds:border-b",
+      bottom: "ds:border-t",
+      left: "ds:border-r",
+      right: "ds:border-l"
+    }, e = {
       top: {
-        primary: "border-b-primary",
-        secondary: "border-b-secondary",
-        muted: "border-b-border",
-        accent: "border-b-accent",
-        destructive: "border-b-destructive",
-        success: "border-b-success",
-        warning: "border-b-warning"
+        primary: "ds:border-b-primary",
+        secondary: "ds:border-b-secondary",
+        muted: "ds:border-b-border",
+        accent: "ds:border-b-accent",
+        destructive: "ds:border-b-destructive",
+        success: "ds:border-b-success",
+        warning: "ds:border-b-warning"
       },
       bottom: {
-        primary: "border-t-primary",
-        secondary: "border-t-secondary",
-        muted: "border-t-border",
-        accent: "border-t-accent",
-        destructive: "border-t-destructive",
-        success: "border-t-success",
-        warning: "border-t-warning"
+        primary: "ds:border-t-primary",
+        secondary: "ds:border-t-secondary",
+        muted: "ds:border-t-border",
+        accent: "ds:border-t-accent",
+        destructive: "ds:border-t-destructive",
+        success: "ds:border-t-success",
+        warning: "ds:border-t-warning"
       },
       left: {
-        primary: "border-r-primary",
-        secondary: "border-r-secondary",
-        muted: "border-r-border",
-        accent: "border-r-accent",
-        destructive: "border-r-destructive",
-        success: "border-r-success",
-        warning: "border-r-warning"
+        primary: "ds:border-r-primary",
+        secondary: "ds:border-r-secondary",
+        muted: "ds:border-r-border",
+        accent: "ds:border-r-accent",
+        destructive: "ds:border-r-destructive",
+        success: "ds:border-r-success",
+        warning: "ds:border-r-warning"
       },
       right: {
-        primary: "border-l-primary",
-        secondary: "border-l-secondary",
-        muted: "border-l-border",
-        accent: "border-l-accent",
-        destructive: "border-l-destructive",
-        success: "border-l-success",
-        warning: "border-l-warning"
+        primary: "ds:border-l-primary",
+        secondary: "ds:border-l-secondary",
+        muted: "ds:border-l-border",
+        accent: "ds:border-l-accent",
+        destructive: "ds:border-l-destructive",
+        success: "ds:border-l-success",
+        warning: "ds:border-l-warning"
       }
     };
-    return `${a[e]} ${d[e][t]}`;
+    return `${d[r]} ${e[r][t]}`;
   }
-  if (r === "enclosed-fill") {
-    const a = {
-      top: "border-b",
-      bottom: "border-t",
-      left: "border-r",
-      right: "border-l"
-    }, d = {
+  if (a === "enclosed-fill") {
+    const d = {
+      top: "ds:border-b",
+      bottom: "ds:border-t",
+      left: "ds:border-r",
+      right: "ds:border-l"
+    }, e = {
       top: {
-        primary: "border-b-primary",
-        secondary: "border-b-secondary",
-        muted: "border-b-border",
-        accent: "border-b-accent",
-        destructive: "border-b-destructive",
-        success: "border-b-success",
-        warning: "border-b-warning"
+        primary: "ds:border-b-primary",
+        secondary: "ds:border-b-secondary",
+        muted: "ds:border-b-border",
+        accent: "ds:border-b-accent",
+        destructive: "ds:border-b-destructive",
+        success: "ds:border-b-success",
+        warning: "ds:border-b-warning"
       },
       bottom: {
-        primary: "border-t-primary",
-        secondary: "border-t-secondary",
-        muted: "border-t-border",
-        accent: "border-t-accent",
-        destructive: "border-t-destructive",
-        success: "border-t-success",
-        warning: "border-t-warning"
+        primary: "ds:border-t-primary",
+        secondary: "ds:border-t-secondary",
+        muted: "ds:border-t-border",
+        accent: "ds:border-t-accent",
+        destructive: "ds:border-t-destructive",
+        success: "ds:border-t-success",
+        warning: "ds:border-t-warning"
       },
       left: {
-        primary: "border-r-primary",
-        secondary: "border-r-secondary",
-        muted: "border-r-border",
-        accent: "border-r-accent",
-        destructive: "border-r-destructive",
-        success: "border-r-success",
-        warning: "border-r-warning"
+        primary: "ds:border-r-primary",
+        secondary: "ds:border-r-secondary",
+        muted: "ds:border-r-border",
+        accent: "ds:border-r-accent",
+        destructive: "ds:border-r-destructive",
+        success: "ds:border-r-success",
+        warning: "ds:border-r-warning"
       },
       right: {
-        primary: "border-l-primary",
-        secondary: "border-l-secondary",
-        muted: "border-l-border",
-        accent: "border-l-accent",
-        destructive: "border-l-destructive",
-        success: "border-l-success",
-        warning: "border-l-warning"
+        primary: "ds:border-l-primary",
+        secondary: "ds:border-l-secondary",
+        muted: "ds:border-l-border",
+        accent: "ds:border-l-accent",
+        destructive: "ds:border-l-destructive",
+        success: "ds:border-l-success",
+        warning: "ds:border-l-warning"
       }
     };
-    return `${a[e]} ${d[e][t]}`;
+    return `${d[r]} ${e[r][t]}`;
   }
   return "";
-}, R = (r) => {
-  const t = "bg-background dark:bg-background rounded-none border-0 border-transparent data-[state=active]:shadow-none";
+}, R = (a) => {
+  const t = "ds:bg-background ds:dark:bg-background ds:rounded-none ds:border-0 ds:border-transparent ds:data-[state=active]:shadow-none";
   return {
-    top: `${t} border-b-2 h-full`,
-    bottom: `${t} border-t-2 h-full`,
-    left: `${t} border-r-2 w-full`,
-    right: `${t} border-l-2 w-full`
-  }[r];
-}, S = (r) => {
-  const t = "bg-background dark:bg-background border border-transparent data-[state=active]:shadow-none rounded-none";
+    top: `${t} ds:border-b-2 ds:h-full`,
+    bottom: `${t} ds:border-t-2 ds:h-full`,
+    left: `${t} ds:border-r-2 ds:w-full`,
+    right: `${t} ds:border-l-2 ds:w-full`
+  }[a];
+}, S = (a) => {
+  const t = "ds:bg-background ds:dark:bg-background ds:border ds:border-transparent ds:data-[state=active]:shadow-none ds:rounded-none";
   return {
-    top: `${t} rounded-t-md data-[state=active]:border-t data-[state=active]:border-l data-[state=active]:border-r data-[state=active]:border-b-0 data-[state=active]:border-b-background dark:data-[state=active]:border-b-background h-full data-[state=active]:-mb-0.5 data-[state=active]:translate-y-[0px]`,
-    bottom: `${t} rounded-b-md data-[state=active]:border-b data-[state=active]:border-l data-[state=active]:border-r data-[state=active]:border-t-0 data-[state=active]:border-t-background dark:data-[state=active]:border-t-background h-full data-[state=active]:-mt-0.5 data-[state=active]:translate-y-[0px]`,
-    left: `${t} rounded-l-md data-[state=active]:border-t data-[state=active]:border-l data-[state=active]:border-b data-[state=active]:border-r-0 data-[state=active]:border-r-background dark:data-[state=active]:border-r-background w-full data-[state=active]:-mr-0.5 data-[state=active]:translate-x-[1px]`,
-    right: `${t} rounded-r-md data-[state=active]:border-t data-[state=active]:border-r data-[state=active]:border-b data-[state=active]:border-l-0 data-[state=active]:border-l-background dark:data-[state=active]:border-l-background w-full data-[state=active]:-ml-0.5 data-[state=active]:translate-x-[1px]`
-  }[r];
-}, V = (r) => {
-  const t = "bg-muted dark:bg-muted border border-transparent data-[state=active]:bg-background dark:data-[state=active]:bg-background data-[state=active]:shadow-none rounded-none";
+    top: `${t} ds:rounded-t-md ds:data-[state=active]:border-t ds:data-[state=active]:border-l ds:data-[state=active]:border-r ds:data-[state=active]:border-b-0 ds:data-[state=active]:border-b-background dark:ds:data-[state=active]:border-b-background ds:h-full ds:data-[state=active]:-mb-0.5 ds:data-[state=active]:translate-y-[0px]`,
+    bottom: `${t} ds:rounded-b-md ds:data-[state=active]:border-b ds:data-[state=active]:border-l ds:data-[state=active]:border-r ds:data-[state=active]:border-t-0 ds:data-[state=active]:border-t-background dark:ds:data-[state=active]:border-t-background ds:h-full ds:data-[state=active]:-mt-0.5 ds:data-[state=active]:translate-y-[0px]`,
+    left: `${t} ds:rounded-l-md ds:data-[state=active]:border-t ds:data-[state=active]:border-l ds:data-[state=active]:border-b ds:data-[state=active]:border-r-0 ds:data-[state=active]:border-r-background dark:ds:data-[state=active]:border-r-background ds:w-full ds:data-[state=active]:-mr-0.5 ds:data-[state=active]:translate-x-[1px]`,
+    right: `${t} ds:rounded-r-md ds:data-[state=active]:border-t ds:data-[state=active]:border-r ds:data-[state=active]:border-b ds:data-[state=active]:border-l-0 ds:data-[state=active]:border-l-background dark:ds:data-[state=active]:border-l-background ds:w-full ds:data-[state=active]:-ml-0.5 ds:data-[state=active]:translate-x-[1px]`
+  }[a];
+}, V = (a) => {
+  const t = "ds:bg-muted ds:dark:bg-muted ds:border ds:border-transparent ds:data-[state=active]:bg-background ds:dark:data-[state=active]:bg-background ds:data-[state=active]:shadow-none ds:rounded-none";
   return {
-    top: `${t} rounded-t-md data-[state=active]:border-t data-[state=active]:border-l data-[state=active]:border-r data-[state=active]:border-b-0 data-[state=active]:border-b-background dark:data-[state=active]:border-b-background h-full data-[state=active]:-mb-0.5 data-[state=active]:translate-y-[0px]`,
-    bottom: `${t} rounded-b-md data-[state=active]:border-b data-[state=active]:border-l data-[state=active]:border-r data-[state=active]:border-t-0 data-[state=active]:border-t-background dark:data-[state=active]:border-t-background h-full data-[state=active]:-mt-0.5 data-[state=active]:translate-y-[0px]`,
-    left: `${t} rounded-l-md data-[state=active]:border-t data-[state=active]:border-l data-[state=active]:border-b data-[state=active]:border-r-0 data-[state=active]:border-r-background dark:data-[state=active]:border-r-background w-full data-[state=active]:-mr-0.5 data-[state=active]:translate-x-[1px]`,
-    right: `${t} rounded-r-md data-[state=active]:border-t data-[state=active]:border-r data-[state=active]:border-b data-[state=active]:border-l-0 data-[state=active]:border-l-background dark:data-[state=active]:border-l-background w-full data-[state=active]:-ml-0.5 data-[state=active]:translate-x-[1px]`
-  }[r];
+    top: `${t} ds:rounded-t-md ds:data-[state=active]:border-t ds:data-[state=active]:border-l ds:data-[state=active]:border-r ds:data-[state=active]:border-b-0 ds:data-[state=active]:border-b-background dark:ds:data-[state=active]:border-b-background ds:h-full ds:data-[state=active]:-mb-0.5 ds:data-[state=active]:translate-y-[0px]`,
+    bottom: `${t} ds:rounded-b-md ds:data-[state=active]:border-b ds:data-[state=active]:border-l ds:data-[state=active]:border-r ds:data-[state=active]:border-t-0 ds:data-[state=active]:border-t-background dark:ds:data-[state=active]:border-t-background ds:h-full ds:data-[state=active]:-mt-0.5 ds:data-[state=active]:translate-y-[0px]`,
+    left: `${t} ds:rounded-l-md ds:data-[state=active]:border-t ds:data-[state=active]:border-l ds:data-[state=active]:border-b ds:data-[state=active]:border-r-0 ds:data-[state=active]:border-r-background dark:ds:data-[state=active]:border-r-background ds:w-full ds:data-[state=active]:-mr-0.5 ds:data-[state=active]:translate-x-[1px]`,
+    right: `${t} ds:rounded-r-md ds:data-[state=active]:border-t ds:data-[state=active]:border-r ds:data-[state=active]:border-b ds:data-[state=active]:border-l-0 ds:data-[state=active]:border-l-background dark:ds:data-[state=active]:border-l-background ds:w-full ds:data-[state=active]:-ml-0.5 ds:data-[state=active]:translate-x-[1px]`
+  }[a];
 }, W = {
   // Solid: Default style (muted background, active has white background)
   solid: {
     list: {
-      horizontal: "bg-muted dark:bg-muted rounded-lg p-[3px]",
-      vertical: "bg-muted dark:bg-muted rounded-lg p-[3px]"
+      horizontal: "ds:bg-muted ds:dark:bg-muted ds:rounded-lg ds:p-[3px]",
+      vertical: "ds:bg-muted ds:dark:bg-muted ds:rounded-lg ds:p-[3px]"
     },
     trigger: {
       horizontal: "",
@@ -272,8 +272,8 @@ const J = {
   // Bordered: With border on group and colored active background
   bordered: {
     list: {
-      horizontal: "bg-background dark:bg-background border p-1 gap-1 rounded-lg",
-      vertical: "bg-background dark:bg-background border p-1 gap-1 rounded-lg"
+      horizontal: "ds:bg-background ds:dark:bg-background ds:border ds:p-1 ds:gap-1 ds:rounded-lg",
+      vertical: "ds:bg-background ds:dark:bg-background ds:border ds:p-1 ds:gap-1 ds:rounded-lg"
     },
     trigger: {
       horizontal: "",
@@ -283,8 +283,8 @@ const J = {
   // Pills: No border/background on group, colored background on active button
   pills: {
     list: {
-      horizontal: "bg-transparent p-0 gap-1",
-      vertical: "bg-transparent p-0 gap-1"
+      horizontal: "ds:bg-transparent ds:p-0 ds:gap-1",
+      vertical: "ds:bg-transparent ds:p-0 ds:gap-1"
     },
     trigger: {
       horizontal: "",
@@ -294,41 +294,41 @@ const J = {
   // Pill-stroke: Pill-style with stroke border, stronger border radius, no background on active
   "pill-stroke": {
     list: {
-      horizontal: "bg-transparent p-0 gap-1",
-      vertical: "bg-transparent p-0 gap-1"
+      horizontal: "ds:bg-transparent ds:p-0 ds:gap-1",
+      vertical: "ds:bg-transparent ds:p-0 ds:gap-1"
     },
     trigger: {
-      horizontal: "border border-border rounded-full bg-transparent",
-      vertical: "border border-border rounded-full bg-transparent"
+      horizontal: "ds:border ds:border-border ds:rounded-full ds:bg-transparent",
+      vertical: "ds:border ds:border-border ds:rounded-full ds:bg-transparent"
     }
   },
   // Text: No border/background on group, colored text on active button
   text: {
     list: {
-      horizontal: "bg-transparent p-0 gap-1",
-      vertical: "bg-transparent p-0 gap-1"
+      horizontal: "ds:bg-transparent ds:p-0 ds:gap-1",
+      vertical: "ds:bg-transparent ds:p-0 ds:gap-1"
     },
     trigger: {
-      horizontal: "bg-transparent data-[state=active]:bg-transparent data-[state=active]:shadow-none",
-      vertical: "bg-transparent data-[state=active]:bg-transparent data-[state=active]:shadow-none"
+      horizontal: "ds:bg-transparent ds:data-[state=active]:bg-transparent ds:data-[state=active]:shadow-none",
+      vertical: "ds:bg-transparent ds:data-[state=active]:bg-transparent ds:data-[state=active]:shadow-none"
     }
   },
   // Outline: No border/background on group, colored border (stroke) on active button
   outline: {
     list: {
-      horizontal: "bg-transparent p-0 gap-1",
-      vertical: "bg-transparent p-0 gap-1"
+      horizontal: "ds:bg-transparent ds:p-0 ds:gap-1",
+      vertical: "ds:bg-transparent ds:p-0 ds:gap-1"
     },
     trigger: {
-      horizontal: "bg-transparent border border-transparent data-[state=active]:bg-transparent data-[state=active]:shadow-none",
-      vertical: "bg-transparent border border-transparent data-[state=active]:bg-transparent data-[state=active]:shadow-none"
+      horizontal: "ds:bg-transparent ds:border ds:border-transparent ds:data-[state=active]:bg-transparent ds:data-[state=active]:shadow-none",
+      vertical: "ds:bg-transparent ds:border ds:border-transparent ds:data-[state=active]:bg-transparent ds:data-[state=active]:shadow-none"
     }
   },
   // Underlined: Bottom border on group, bottom border on active tab
   underlined: {
     list: {
-      horizontal: "bg-background dark:bg-background rounded-none p-0",
-      vertical: "bg-background dark:bg-background rounded-none p-0"
+      horizontal: "ds:bg-background ds:dark:bg-background ds:rounded-none ds:p-0",
+      vertical: "ds:bg-background ds:dark:bg-background ds:rounded-none ds:p-0"
     },
     trigger: {
       horizontal: "",
@@ -340,8 +340,8 @@ const J = {
   // Enclosed: Border on active tab except bottom border (tab style)
   enclosed: {
     list: {
-      horizontal: "bg-background dark:bg-background justify-start rounded-none p-0",
-      vertical: "bg-background dark:bg-background items-start rounded-none p-0"
+      horizontal: "ds:bg-background ds:dark:bg-background ds:justify-start ds:rounded-none ds:p-0",
+      vertical: "ds:bg-background ds:dark:bg-background ds:items-start ds:rounded-none ds:p-0"
     },
     trigger: {
       horizontal: "",
@@ -353,8 +353,8 @@ const J = {
   // Enclosed-fill: Border on active tab except bottom border with background on inactive tabs
   "enclosed-fill": {
     list: {
-      horizontal: "bg-background dark:bg-background justify-start rounded-none p-0 gap-1",
-      vertical: "bg-background dark:bg-background items-start rounded-none p-0 gap-1"
+      horizontal: "ds:bg-background ds:dark:bg-background ds:justify-start ds:rounded-none ds:p-0 ds:gap-1",
+      vertical: "ds:bg-background ds:dark:bg-background ds:items-start ds:rounded-none ds:p-0 ds:gap-1"
     },
     trigger: {
       horizontal: "",

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

@@ -1 +1 @@
-{"version":3,"file":"classes.js","sources":["../../../../src/components/Tabs/classes.ts"],"sourcesContent":["import { cn } from \"@dsui/ui/index\";\nimport type {\n  TabAlignment,\n  TabColor,\n  TabPosition,\n  TabSize,\n  TabVariant,\n} from \"./types\";\n\nexport const sizeClasses: Record<\n  TabSize,\n  { horizontal: string; vertical: string }\n> = {\n  sm: {\n    horizontal: \"text-xs h-7 [&>button]:px-2\",\n    vertical: \"text-xs [&>button]:py-0.5\",\n  },\n  md: {\n    horizontal: \"text-sm h-9 [&>button]:px-3\",\n    vertical: \"text-sm [&>button]:py-1\",\n  },\n  lg: {\n    horizontal: \"text-base h-11 [&>button]:px-4\",\n    vertical: \"text-base [&>button]:py-1.5\",\n  },\n};\n\nexport const alignmentClasses: Record<\n  TabAlignment,\n  { horizontal: string; vertical: string }\n> = {\n  start: {\n    horizontal: \"justify-start\",\n    vertical: \"items-start\",\n  },\n  center: {\n    horizontal: \"justify-center\",\n    vertical: \"items-center\",\n  },\n  end: {\n    horizontal: \"justify-end\",\n    vertical: \"items-end\",\n  },\n};\n\nexport const positionClasses: Record<\n  TabPosition,\n  { root: string; list: string }\n> = {\n  top: {\n    root: \"flex flex-col\",\n    list: \"flex-row\",\n  },\n  bottom: {\n    root: \"flex flex-col-reverse\",\n    list: \"flex-row\",\n  },\n  left: {\n    root: \"flex flex-row\",\n    list: \"flex-col h-fit\",\n  },\n  right: {\n    root: \"flex flex-row-reverse\",\n    list: \"flex-col h-fit\",\n  },\n};\n\n// Color classes for backgrounds, text, and borders\nexport const getColorClasses = (\n  variant: TabVariant,\n  color: TabColor\n): string => {\n  // Helper to generate color-specific classes based on variant\n  const colorMap: Record<\n    TabColor,\n    { bg: string; text: string; border: string }\n  > = {\n    primary: {\n      bg: \"data-[state=active]:bg-primary dark:data-[state=active]:bg-primary data-[state=active]:text-primary-foreground dark:data-[state=active]:text-primary-foreground\",\n      text: \"data-[state=active]:text-primary dark:data-[state=active]:text-primary\",\n      border:\n        \"data-[state=active]:border-primary dark:data-[state=active]:border-primary\",\n    },\n    secondary: {\n      bg: \"data-[state=active]:bg-secondary dark:data-[state=active]:bg-secondary data-[state=active]:text-secondary-foreground dark:data-[state=active]:text-secondary-foreground\",\n      text: \"data-[state=active]:text-secondary dark:data-[state=active]:text-secondary\",\n      border:\n        \"data-[state=active]:border-secondary dark:data-[state=active]:border-secondary\",\n    },\n    muted: {\n      bg: \"data-[state=active]:bg-muted dark:data-[state=active]:bg-muted data-[state=active]:text-muted-foreground dark:data-[state=active]:text-muted-foreground\",\n      text: \"data-[state=active]:text-muted-foreground dark:data-[state=active]:text-muted-foreground\",\n      border:\n        \"data-[state=active]:border-border dark:data-[state=active]:border-border\",\n    },\n    accent: {\n      bg: \"data-[state=active]:bg-accent dark:data-[state=active]:bg-accent data-[state=active]:text-accent-foreground dark:data-[state=active]:text-accent-foreground\",\n      text: \"data-[state=active]:text-accent-foreground dark:data-[state=active]:text-accent-foreground\",\n      border:\n        \"data-[state=active]:border-accent dark:data-[state=active]:border-accent\",\n    },\n    destructive: {\n      bg: \"data-[state=active]:bg-destructive dark:data-[state=active]:bg-destructive data-[state=active]:text-destructive-foreground dark:data-[state=active]:text-destructive-foreground\",\n      text: \"data-[state=active]:text-destructive dark:data-[state=active]:text-destructive\",\n      border:\n        \"data-[state=active]:border-destructive dark:data-[state=active]:border-destructive\",\n    },\n    success: {\n      bg: \"data-[state=active]:bg-success dark:data-[state=active]:bg-success data-[state=active]:text-success-foreground dark:data-[state=active]:text-success-foreground\",\n      text: \"data-[state=active]:text-success dark:data-[state=active]:text-success\",\n      border:\n        \"data-[state=active]:border-success dark:data-[state=active]:border-success\",\n    },\n    warning: {\n      bg: \"data-[state=active]:bg-warning dark:data-[state=active]:bg-warning data-[state=active]:text-warning-foreground dark:data-[state=active]:text-warning-foreground\",\n      text: \"data-[state=active]:text-warning dark:data-[state=active]:text-warning\",\n      border:\n        \"data-[state=active]:border-warning dark:data-[state=active]:border-warning\",\n    },\n  };\n\n  const colors = colorMap[color];\n\n  switch (variant) {\n    case \"bordered\":\n    case \"pills\":\n      // Background color on active state\n      return `${colors.bg} dark:data-[state=active]:border-transparent`;\n    case \"pill-stroke\":\n      // Border color on active state, no background\n      return `data-[state=active]:bg-transparent dark:data-[state=active]:bg-transparent`;\n    case \"text\":\n      // Text color only on active state\n      return colors.text;\n    case \"outline\":\n      // Border color on active state\n      return colors.border;\n    case \"underlined\":\n      // Bottom/side border color on active state\n      return cn(colors.border, colors.text);\n    case \"enclosed\":\n      // Border color on active state (except bottom/side)\n      return cn(colors.border, colors.text);\n    case \"enclosed-fill\":\n      // Border color on active state (except bottom/side)\n      return cn(colors.border, colors.text);\n    default:\n      return \"\";\n  }\n};\n\n// Get TabsList border classes based on position\nexport const getListBorderClasses = (\n  variant: TabVariant,\n  color: TabColor,\n  tabPosition: TabPosition\n): string => {\n  if (variant === \"underlined\") {\n    // Underlined variant: border on the opposite side from where tabs connect\n    const borderMap: Record<TabPosition, string> = {\n      top: \"border-b\",\n      bottom: \"border-t\",\n      left: \"border-r\",\n      right: \"border-l\",\n    };\n    return borderMap[tabPosition];\n  }\n\n  if (variant === \"enclosed\") {\n    // Enclosed variant: colored border on the opposite side\n    const borderBaseMap: Record<TabPosition, string> = {\n      top: \"border-b\",\n      bottom: \"border-t\",\n      left: \"border-r\",\n      right: \"border-l\",\n    };\n\n    const colorBorderMap: Record<TabPosition, Record<TabColor, string>> = {\n      top: {\n        primary: \"border-b-primary\",\n        secondary: \"border-b-secondary\",\n        muted: \"border-b-border\",\n        accent: \"border-b-accent\",\n        destructive: \"border-b-destructive\",\n        success: \"border-b-success\",\n        warning: \"border-b-warning\",\n      },\n      bottom: {\n        primary: \"border-t-primary\",\n        secondary: \"border-t-secondary\",\n        muted: \"border-t-border\",\n        accent: \"border-t-accent\",\n        destructive: \"border-t-destructive\",\n        success: \"border-t-success\",\n        warning: \"border-t-warning\",\n      },\n      left: {\n        primary: \"border-r-primary\",\n        secondary: \"border-r-secondary\",\n        muted: \"border-r-border\",\n        accent: \"border-r-accent\",\n        destructive: \"border-r-destructive\",\n        success: \"border-r-success\",\n        warning: \"border-r-warning\",\n      },\n      right: {\n        primary: \"border-l-primary\",\n        secondary: \"border-l-secondary\",\n        muted: \"border-l-border\",\n        accent: \"border-l-accent\",\n        destructive: \"border-l-destructive\",\n        success: \"border-l-success\",\n        warning: \"border-l-warning\",\n      },\n    };\n    return `${borderBaseMap[tabPosition]} ${colorBorderMap[tabPosition][color]}`;\n  }\n\n  if (variant === \"enclosed-fill\") {\n    // Enclosed-fill variant: colored border on the opposite side\n    const borderBaseMap: Record<TabPosition, string> = {\n      top: \"border-b\",\n      bottom: \"border-t\",\n      left: \"border-r\",\n      right: \"border-l\",\n    };\n\n    const colorBorderMap: Record<TabPosition, Record<TabColor, string>> = {\n      top: {\n        primary: \"border-b-primary\",\n        secondary: \"border-b-secondary\",\n        muted: \"border-b-border\",\n        accent: \"border-b-accent\",\n        destructive: \"border-b-destructive\",\n        success: \"border-b-success\",\n        warning: \"border-b-warning\",\n      },\n      bottom: {\n        primary: \"border-t-primary\",\n        secondary: \"border-t-secondary\",\n        muted: \"border-t-border\",\n        accent: \"border-t-accent\",\n        destructive: \"border-t-destructive\",\n        success: \"border-t-success\",\n        warning: \"border-t-warning\",\n      },\n      left: {\n        primary: \"border-r-primary\",\n        secondary: \"border-r-secondary\",\n        muted: \"border-r-border\",\n        accent: \"border-r-accent\",\n        destructive: \"border-r-destructive\",\n        success: \"border-r-success\",\n        warning: \"border-r-warning\",\n      },\n      right: {\n        primary: \"border-l-primary\",\n        secondary: \"border-l-secondary\",\n        muted: \"border-l-border\",\n        accent: \"border-l-accent\",\n        destructive: \"border-l-destructive\",\n        success: \"border-l-success\",\n        warning: \"border-l-warning\",\n      },\n    };\n    return `${borderBaseMap[tabPosition]} ${colorBorderMap[tabPosition][color]}`;\n  }\n\n  return \"\";\n};\n\n// Get trigger border classes for underlined variant based on position\nexport const getUnderlinedTriggerClasses = (\n  tabPosition: TabPosition\n): string => {\n  const baseClasses =\n    \"bg-background dark:bg-background rounded-none border-0 border-transparent data-[state=active]:shadow-none\";\n\n  const positionMap: Record<TabPosition, string> = {\n    top: `${baseClasses} border-b-2 h-full`,\n    bottom: `${baseClasses} border-t-2 h-full`,\n    left: `${baseClasses} border-r-2 w-full`,\n    right: `${baseClasses} border-l-2 w-full`,\n  };\n\n  return positionMap[tabPosition];\n};\n\n// Get trigger border classes for enclosed variant based on position\nexport const getEnclosedTriggerClasses = (tabPosition: TabPosition): string => {\n  const baseClasses =\n    \"bg-background dark:bg-background border border-transparent data-[state=active]:shadow-none rounded-none\";\n\n  const positionMap: Record<TabPosition, string> = {\n    top: `${baseClasses} rounded-t-md data-[state=active]:border-t data-[state=active]:border-l data-[state=active]:border-r data-[state=active]:border-b-0 data-[state=active]:border-b-background dark:data-[state=active]:border-b-background h-full data-[state=active]:-mb-0.5 data-[state=active]:translate-y-[0px]`,\n    bottom: `${baseClasses} rounded-b-md data-[state=active]:border-b data-[state=active]:border-l data-[state=active]:border-r data-[state=active]:border-t-0 data-[state=active]:border-t-background dark:data-[state=active]:border-t-background h-full data-[state=active]:-mt-0.5 data-[state=active]:translate-y-[0px]`,\n    left: `${baseClasses} rounded-l-md data-[state=active]:border-t data-[state=active]:border-l data-[state=active]:border-b data-[state=active]:border-r-0 data-[state=active]:border-r-background dark:data-[state=active]:border-r-background w-full data-[state=active]:-mr-0.5 data-[state=active]:translate-x-[1px]`,\n    right: `${baseClasses} rounded-r-md data-[state=active]:border-t data-[state=active]:border-r data-[state=active]:border-b data-[state=active]:border-l-0 data-[state=active]:border-l-background dark:data-[state=active]:border-l-background w-full data-[state=active]:-ml-0.5 data-[state=active]:translate-x-[1px]`,\n  };\n\n  return positionMap[tabPosition];\n};\n\n// Get trigger border classes for enclosed-fill variant based on position\nexport const getEnclosedFillTriggerClasses = (\n  tabPosition: TabPosition\n): string => {\n  const baseClasses =\n    \"bg-muted dark:bg-muted border border-transparent data-[state=active]:bg-background dark:data-[state=active]:bg-background data-[state=active]:shadow-none rounded-none\";\n\n  const positionMap: Record<TabPosition, string> = {\n    top: `${baseClasses} rounded-t-md data-[state=active]:border-t data-[state=active]:border-l data-[state=active]:border-r data-[state=active]:border-b-0 data-[state=active]:border-b-background dark:data-[state=active]:border-b-background h-full data-[state=active]:-mb-0.5 data-[state=active]:translate-y-[0px]`,\n    bottom: `${baseClasses} rounded-b-md data-[state=active]:border-b data-[state=active]:border-l data-[state=active]:border-r data-[state=active]:border-t-0 data-[state=active]:border-t-background dark:data-[state=active]:border-t-background h-full data-[state=active]:-mt-0.5 data-[state=active]:translate-y-[0px]`,\n    left: `${baseClasses} rounded-l-md data-[state=active]:border-t data-[state=active]:border-l data-[state=active]:border-b data-[state=active]:border-r-0 data-[state=active]:border-r-background dark:data-[state=active]:border-r-background w-full data-[state=active]:-mr-0.5 data-[state=active]:translate-x-[1px]`,\n    right: `${baseClasses} rounded-r-md data-[state=active]:border-t data-[state=active]:border-r data-[state=active]:border-b data-[state=active]:border-l-0 data-[state=active]:border-l-background dark:data-[state=active]:border-l-background w-full data-[state=active]:-ml-0.5 data-[state=active]:translate-x-[1px]`,\n  };\n\n  return positionMap[tabPosition];\n};\n\nexport const variantClasses: Record<\n  TabVariant,\n  {\n    list: { horizontal: string; vertical: string };\n    trigger: { horizontal: string; vertical: string };\n  }\n> = {\n  // Solid: Default style (muted background, active has white background)\n  solid: {\n    list: {\n      horizontal: \"bg-muted dark:bg-muted rounded-lg p-[3px]\",\n      vertical: \"bg-muted dark:bg-muted rounded-lg p-[3px]\",\n    },\n    trigger: {\n      horizontal: \"\",\n      vertical: \"\",\n    },\n  },\n\n  // Bordered: With border on group and colored active background\n  bordered: {\n    list: {\n      horizontal:\n        \"bg-background dark:bg-background border p-1 gap-1 rounded-lg\",\n      vertical: \"bg-background dark:bg-background border p-1 gap-1 rounded-lg\",\n    },\n    trigger: {\n      horizontal: \"\",\n      vertical: \"\",\n    },\n  },\n\n  // Pills: No border/background on group, colored background on active button\n  pills: {\n    list: {\n      horizontal: \"bg-transparent p-0 gap-1\",\n      vertical: \"bg-transparent p-0 gap-1\",\n    },\n    trigger: {\n      horizontal: \"\",\n      vertical: \"\",\n    },\n  },\n\n  // Pill-stroke: Pill-style with stroke border, stronger border radius, no background on active\n  \"pill-stroke\": {\n    list: {\n      horizontal: \"bg-transparent p-0 gap-1\",\n      vertical: \"bg-transparent p-0 gap-1\",\n    },\n    trigger: {\n      horizontal: \"border border-border rounded-full bg-transparent\",\n      vertical: \"border border-border rounded-full bg-transparent\",\n    },\n  },\n\n  // Text: No border/background on group, colored text on active button\n  text: {\n    list: {\n      horizontal: \"bg-transparent p-0 gap-1\",\n      vertical: \"bg-transparent p-0 gap-1\",\n    },\n    trigger: {\n      horizontal:\n        \"bg-transparent data-[state=active]:bg-transparent data-[state=active]:shadow-none\",\n      vertical:\n        \"bg-transparent data-[state=active]:bg-transparent data-[state=active]:shadow-none\",\n    },\n  },\n\n  // Outline: No border/background on group, colored border (stroke) on active button\n  outline: {\n    list: {\n      horizontal: \"bg-transparent p-0 gap-1\",\n      vertical: \"bg-transparent p-0 gap-1\",\n    },\n    trigger: {\n      horizontal:\n        \"bg-transparent border border-transparent data-[state=active]:bg-transparent data-[state=active]:shadow-none\",\n      vertical:\n        \"bg-transparent border border-transparent data-[state=active]:bg-transparent data-[state=active]:shadow-none\",\n    },\n  },\n\n  // Underlined: Bottom border on group, bottom border on active tab\n  underlined: {\n    list: {\n      horizontal: \"bg-background dark:bg-background rounded-none p-0\",\n      vertical: \"bg-background dark:bg-background rounded-none p-0\",\n    },\n    trigger: {\n      horizontal: \"\", // Will be set dynamically\n      vertical: \"\", // Will be set dynamically\n    },\n  },\n\n  // Enclosed: Border on active tab except bottom border (tab style)\n  enclosed: {\n    list: {\n      horizontal:\n        \"bg-background dark:bg-background justify-start rounded-none p-0\",\n      vertical: \"bg-background dark:bg-background items-start rounded-none p-0\",\n    },\n    trigger: {\n      horizontal: \"\", // Will be set dynamically\n      vertical: \"\", // Will be set dynamically\n    },\n  },\n\n  // Enclosed-fill: Border on active tab except bottom border with background on inactive tabs\n  \"enclosed-fill\": {\n    list: {\n      horizontal:\n        \"bg-background dark:bg-background justify-start rounded-none p-0 gap-1\",\n      vertical:\n        \"bg-background dark:bg-background items-start rounded-none p-0 gap-1\",\n    },\n    trigger: {\n      horizontal: \"\", // Will be set dynamically\n      vertical: \"\", // Will be set dynamically\n    },\n  },\n};\n"],"names":["sizeClasses","alignmentClasses","positionClasses","getColorClasses","variant","color","colors","cn","getListBorderClasses","tabPosition","borderBaseMap","colorBorderMap","getUnderlinedTriggerClasses","baseClasses","getEnclosedTriggerClasses","getEnclosedFillTriggerClasses","variantClasses"],"mappings":"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"}
+{"version":3,"file":"classes.js","sources":["../../../../src/components/Tabs/classes.ts"],"sourcesContent":["import { cn } from \"@dsui/ui/index\";\nimport type {\n  TabAlignment,\n  TabColor,\n  TabPosition,\n  TabSize,\n  TabVariant,\n} from \"./types\";\n\nexport const sizeClasses: Record<\n  TabSize,\n  { horizontal: string; vertical: string }\n> = {\n  sm: {\n    horizontal: \"ds:text-xs ds:h-7 ds:[&>button]:px-2\",\n    vertical: \"ds:text-xs ds:[&>button]:py-0.5\",\n  },\n  md: {\n    horizontal: \"ds:text-sm ds:h-9 ds:[&>button]:px-3\",\n    vertical: \"ds:text-sm ds:[&>button]:py-1\",\n  },\n  lg: {\n    horizontal: \"ds:text-base ds:h-11 ds:[&>button]:px-4\",\n    vertical: \"ds:text-base ds:[&>button]:py-1.5\",\n  },\n};\n\nexport const alignmentClasses: Record<\n  TabAlignment,\n  { horizontal: string; vertical: string }\n> = {\n  start: {\n    horizontal: \"ds:justify-start\",\n    vertical: \"ds:items-start\",\n  },\n  center: {\n    horizontal: \"ds:justify-center\",\n    vertical: \"ds:items-center\",\n  },\n  end: {\n    horizontal: \"ds:justify-end\",\n    vertical: \"ds:items-end\",\n  },\n};\n\nexport const positionClasses: Record<\n  TabPosition,\n  { root: string; list: string }\n> = {\n  top: {\n    root: \"ds:flex ds:flex-col\",\n    list: \"ds:flex-row\",\n  },\n  bottom: {\n    root: \"ds:flex ds:flex-col-reverse\",\n    list: \"ds:flex-row\",\n  },\n  left: {\n    root: \"ds:flex ds:flex-row\",\n    list: \"ds:flex-col ds:h-fit\",\n  },\n  right: {\n    root: \"ds:flex ds:flex-row-reverse\",\n    list: \"ds:flex-col ds:h-fit\",\n  },\n};\n\n// Color classes for backgrounds, text, and borders\nexport const getColorClasses = (\n  variant: TabVariant,\n  color: TabColor\n): string => {\n  // Helper to generate color-specific classes based on variant\n  const colorMap: Record<\n    TabColor,\n    { bg: string; text: string; border: string }\n  > = {\n    primary: {\n      bg: \"ds:data-[state=active]:bg-primary ds:dark:data-[state=active]:bg-primary ds:data-[state=active]:text-primary-foreground ds:dark:data-[state=active]:text-primary-foreground\",\n      text: \"ds:data-[state=active]:text-primary ds:dark:data-[state=active]:text-primary\",\n      border:\n        \"ds:data-[state=active]:border-primary ds:dark:data-[state=active]:border-primary\",\n    },\n    secondary: {\n      bg: \"ds:data-[state=active]:bg-secondary ds:dark:data-[state=active]:bg-secondary ds:data-[state=active]:text-secondary-foreground ds:dark:data-[state=active]:text-secondary-foreground\",\n      text: \"ds:data-[state=active]:text-secondary ds:dark:data-[state=active]:text-secondary\",\n      border:\n        \"ds:data-[state=active]:border-secondary ds:dark:data-[state=active]:border-secondary\",\n    },\n    muted: {\n      bg: \"ds:data-[state=active]:bg-muted ds:dark:data-[state=active]:bg-muted ds:data-[state=active]:text-muted-foreground ds:dark:data-[state=active]:text-muted-foreground\",\n      text: \"ds:data-[state=active]:text-muted-foreground ds:dark:data-[state=active]:text-muted-foreground\",\n      border:\n        \"ds:data-[state=active]:border-border ds:dark:data-[state=active]:border-border\",\n    },\n    accent: {\n      bg: \"ds:data-[state=active]:bg-accent ds:dark:data-[state=active]:bg-accent ds:data-[state=active]:text-accent-foreground ds:dark:data-[state=active]:text-accent-foreground\",\n      text: \"ds:data-[state=active]:text-accent-foreground ds:dark:data-[state=active]:text-accent-foreground\",\n      border:\n        \"ds:data-[state=active]:border-accent ds:dark:data-[state=active]:border-accent\",\n    },\n    destructive: {\n      bg: \"ds:data-[state=active]:bg-destructive ds:dark:data-[state=active]:bg-destructive ds:data-[state=active]:text-destructive-foreground ds:dark:data-[state=active]:text-destructive-foreground\",\n      text: \"ds:data-[state=active]:text-destructive ds:dark:data-[state=active]:text-destructive\",\n      border:\n        \"ds:data-[state=active]:border-destructive ds:dark:data-[state=active]:border-destructive\",\n    },\n    success: {\n      bg: \"ds:data-[state=active]:bg-success ds:dark:data-[state=active]:bg-success ds:data-[state=active]:text-success-foreground ds:dark:data-[state=active]:text-success-foreground\",\n      text: \"ds:data-[state=active]:text-success ds:dark:data-[state=active]:text-success\",\n      border:\n        \"ds:data-[state=active]:border-success ds:dark:data-[state=active]:border-success\",\n    },\n    warning: {\n      bg: \"ds:data-[state=active]:bg-warning ds:dark:data-[state=active]:bg-warning ds:data-[state=active]:text-warning-foreground ds:dark:data-[state=active]:text-warning-foreground\",\n      text: \"ds:data-[state=active]:text-warning ds:dark:data-[state=active]:text-warning\",\n      border:\n        \"ds:data-[state=active]:border-warning ds:dark:data-[state=active]:border-warning\",\n    },\n  };\n\n  const colors = colorMap[color];\n\n  switch (variant) {\n    case \"bordered\":\n    case \"pills\":\n      // Background color on active state\n      return `${colors.bg} ds:dark:data-[state=active]:border-transparent`;\n    case \"pill-stroke\":\n      // Border color on active state, no background\n      return `ds:data-[state=active]:bg-transparent ds:dark:data-[state=active]:bg-transparent`;\n    case \"text\":\n      // Text color only on active state\n      return colors.text;\n    case \"outline\":\n      // Border color on active state\n      return colors.border;\n    case \"underlined\":\n      // Bottom/side border color on active state\n      return cn(colors.border, colors.text);\n    case \"enclosed\":\n      // Border color on active state (except bottom/side)\n      return cn(colors.border, colors.text);\n    case \"enclosed-fill\":\n      // Border color on active state (except bottom/side)\n      return cn(colors.border, colors.text);\n    default:\n      return \"\";\n  }\n};\n\n// Get TabsList border classes based on position\nexport const getListBorderClasses = (\n  variant: TabVariant,\n  color: TabColor,\n  tabPosition: TabPosition\n): string => {\n  if (variant === \"underlined\") {\n    // Underlined variant: border on the opposite side from where tabs connect\n    const borderMap: Record<TabPosition, string> = {\n      top: \"ds:border-b\",\n      bottom: \"ds:border-t\",\n      left: \"ds:border-r\",\n      right: \"ds:border-l\",\n    };\n    return borderMap[tabPosition];\n  }\n\n  if (variant === \"enclosed\") {\n    // Enclosed variant: colored border on the opposite side\n    const borderBaseMap: Record<TabPosition, string> = {\n      top: \"ds:border-b\",\n      bottom: \"ds:border-t\",\n      left: \"ds:border-r\",\n      right: \"ds:border-l\",\n    };\n\n    const colorBorderMap: Record<TabPosition, Record<TabColor, string>> = {\n      top: {\n        primary: \"ds:border-b-primary\",\n        secondary: \"ds:border-b-secondary\",\n        muted: \"ds:border-b-border\",\n        accent: \"ds:border-b-accent\",\n        destructive: \"ds:border-b-destructive\",\n        success: \"ds:border-b-success\",\n        warning: \"ds:border-b-warning\",\n      },\n      bottom: {\n        primary: \"ds:border-t-primary\",\n        secondary: \"ds:border-t-secondary\",\n        muted: \"ds:border-t-border\",\n        accent: \"ds:border-t-accent\",\n        destructive: \"ds:border-t-destructive\",\n        success: \"ds:border-t-success\",\n        warning: \"ds:border-t-warning\",\n      },\n      left: {\n        primary: \"ds:border-r-primary\",\n        secondary: \"ds:border-r-secondary\",\n        muted: \"ds:border-r-border\",\n        accent: \"ds:border-r-accent\",\n        destructive: \"ds:border-r-destructive\",\n        success: \"ds:border-r-success\",\n        warning: \"ds:border-r-warning\",\n      },\n      right: {\n        primary: \"ds:border-l-primary\",\n        secondary: \"ds:border-l-secondary\",\n        muted: \"ds:border-l-border\",\n        accent: \"ds:border-l-accent\",\n        destructive: \"ds:border-l-destructive\",\n        success: \"ds:border-l-success\",\n        warning: \"ds:border-l-warning\",\n      },\n    };\n    return `${borderBaseMap[tabPosition]} ${colorBorderMap[tabPosition][color]}`;\n  }\n\n  if (variant === \"enclosed-fill\") {\n    // Enclosed-fill variant: colored border on the opposite side\n    const borderBaseMap: Record<TabPosition, string> = {\n      top: \"ds:border-b\",\n      bottom: \"ds:border-t\",\n      left: \"ds:border-r\",\n      right: \"ds:border-l\",\n    };\n\n    const colorBorderMap: Record<TabPosition, Record<TabColor, string>> = {\n      top: {\n        primary: \"ds:border-b-primary\",\n        secondary: \"ds:border-b-secondary\",\n        muted: \"ds:border-b-border\",\n        accent: \"ds:border-b-accent\",\n        destructive: \"ds:border-b-destructive\",\n        success: \"ds:border-b-success\",\n        warning: \"ds:border-b-warning\",\n      },\n      bottom: {\n        primary: \"ds:border-t-primary\",\n        secondary: \"ds:border-t-secondary\",\n        muted: \"ds:border-t-border\",\n        accent: \"ds:border-t-accent\",\n        destructive: \"ds:border-t-destructive\",\n        success: \"ds:border-t-success\",\n        warning: \"ds:border-t-warning\",\n      },\n      left: {\n        primary: \"ds:border-r-primary\",\n        secondary: \"ds:border-r-secondary\",\n        muted: \"ds:border-r-border\",\n        accent: \"ds:border-r-accent\",\n        destructive: \"ds:border-r-destructive\",\n        success: \"ds:border-r-success\",\n        warning: \"ds:border-r-warning\",\n      },\n      right: {\n        primary: \"ds:border-l-primary\",\n        secondary: \"ds:border-l-secondary\",\n        muted: \"ds:border-l-border\",\n        accent: \"ds:border-l-accent\",\n        destructive: \"ds:border-l-destructive\",\n        success: \"ds:border-l-success\",\n        warning: \"ds:border-l-warning\",\n      },\n    };\n    return `${borderBaseMap[tabPosition]} ${colorBorderMap[tabPosition][color]}`;\n  }\n\n  return \"\";\n};\n\n// Get trigger border classes for underlined variant based on position\nexport const getUnderlinedTriggerClasses = (\n  tabPosition: TabPosition\n): string => {\n  const baseClasses =\n    \"ds:bg-background ds:dark:bg-background ds:rounded-none ds:border-0 ds:border-transparent ds:data-[state=active]:shadow-none\";\n\n  const positionMap: Record<TabPosition, string> = {\n    top: `${baseClasses} ds:border-b-2 ds:h-full`,\n    bottom: `${baseClasses} ds:border-t-2 ds:h-full`,\n    left: `${baseClasses} ds:border-r-2 ds:w-full`,\n    right: `${baseClasses} ds:border-l-2 ds:w-full`,\n  };\n\n  return positionMap[tabPosition];\n};\n\n// Get trigger border classes for enclosed variant based on position\nexport const getEnclosedTriggerClasses = (tabPosition: TabPosition): string => {\n  const baseClasses =\n    \"ds:bg-background ds:dark:bg-background ds:border ds:border-transparent ds:data-[state=active]:shadow-none ds:rounded-none\";\n\n  const positionMap: Record<TabPosition, string> = {\n    top: `${baseClasses} ds:rounded-t-md ds:data-[state=active]:border-t ds:data-[state=active]:border-l ds:data-[state=active]:border-r ds:data-[state=active]:border-b-0 ds:data-[state=active]:border-b-background dark:ds:data-[state=active]:border-b-background ds:h-full ds:data-[state=active]:-mb-0.5 ds:data-[state=active]:translate-y-[0px]`,\n    bottom: `${baseClasses} ds:rounded-b-md ds:data-[state=active]:border-b ds:data-[state=active]:border-l ds:data-[state=active]:border-r ds:data-[state=active]:border-t-0 ds:data-[state=active]:border-t-background dark:ds:data-[state=active]:border-t-background ds:h-full ds:data-[state=active]:-mt-0.5 ds:data-[state=active]:translate-y-[0px]`,\n    left: `${baseClasses} ds:rounded-l-md ds:data-[state=active]:border-t ds:data-[state=active]:border-l ds:data-[state=active]:border-b ds:data-[state=active]:border-r-0 ds:data-[state=active]:border-r-background dark:ds:data-[state=active]:border-r-background ds:w-full ds:data-[state=active]:-mr-0.5 ds:data-[state=active]:translate-x-[1px]`,\n    right: `${baseClasses} ds:rounded-r-md ds:data-[state=active]:border-t ds:data-[state=active]:border-r ds:data-[state=active]:border-b ds:data-[state=active]:border-l-0 ds:data-[state=active]:border-l-background dark:ds:data-[state=active]:border-l-background ds:w-full ds:data-[state=active]:-ml-0.5 ds:data-[state=active]:translate-x-[1px]`,\n  };\n\n  return positionMap[tabPosition];\n};\n\n// Get trigger border classes for enclosed-fill variant based on position\nexport const getEnclosedFillTriggerClasses = (\n  tabPosition: TabPosition\n): string => {\n  const baseClasses =\n    \"ds:bg-muted ds:dark:bg-muted ds:border ds:border-transparent ds:data-[state=active]:bg-background ds:dark:data-[state=active]:bg-background ds:data-[state=active]:shadow-none ds:rounded-none\";\n\n  const positionMap: Record<TabPosition, string> = {\n    top: `${baseClasses} ds:rounded-t-md ds:data-[state=active]:border-t ds:data-[state=active]:border-l ds:data-[state=active]:border-r ds:data-[state=active]:border-b-0 ds:data-[state=active]:border-b-background dark:ds:data-[state=active]:border-b-background ds:h-full ds:data-[state=active]:-mb-0.5 ds:data-[state=active]:translate-y-[0px]`,\n    bottom: `${baseClasses} ds:rounded-b-md ds:data-[state=active]:border-b ds:data-[state=active]:border-l ds:data-[state=active]:border-r ds:data-[state=active]:border-t-0 ds:data-[state=active]:border-t-background dark:ds:data-[state=active]:border-t-background ds:h-full ds:data-[state=active]:-mt-0.5 ds:data-[state=active]:translate-y-[0px]`,\n    left: `${baseClasses} ds:rounded-l-md ds:data-[state=active]:border-t ds:data-[state=active]:border-l ds:data-[state=active]:border-b ds:data-[state=active]:border-r-0 ds:data-[state=active]:border-r-background dark:ds:data-[state=active]:border-r-background ds:w-full ds:data-[state=active]:-mr-0.5 ds:data-[state=active]:translate-x-[1px]`,\n    right: `${baseClasses} ds:rounded-r-md ds:data-[state=active]:border-t ds:data-[state=active]:border-r ds:data-[state=active]:border-b ds:data-[state=active]:border-l-0 ds:data-[state=active]:border-l-background dark:ds:data-[state=active]:border-l-background ds:w-full ds:data-[state=active]:-ml-0.5 ds:data-[state=active]:translate-x-[1px]`,\n  };\n\n  return positionMap[tabPosition];\n};\n\nexport const variantClasses: Record<\n  TabVariant,\n  {\n    list: { horizontal: string; vertical: string };\n    trigger: { horizontal: string; vertical: string };\n  }\n> = {\n  // Solid: Default style (muted background, active has white background)\n  solid: {\n    list: {\n      horizontal: \"ds:bg-muted ds:dark:bg-muted ds:rounded-lg ds:p-[3px]\",\n      vertical: \"ds:bg-muted ds:dark:bg-muted ds:rounded-lg ds:p-[3px]\",\n    },\n    trigger: {\n      horizontal: \"\",\n      vertical: \"\",\n    },\n  },\n\n  // Bordered: With border on group and colored active background\n  bordered: {\n    list: {\n      horizontal:\n        \"ds:bg-background ds:dark:bg-background ds:border ds:p-1 ds:gap-1 ds:rounded-lg\",\n      vertical: \"ds:bg-background ds:dark:bg-background ds:border ds:p-1 ds:gap-1 ds:rounded-lg\",\n    },\n    trigger: {\n      horizontal: \"\",\n      vertical: \"\",\n    },\n  },\n\n  // Pills: No border/background on group, colored background on active button\n  pills: {\n    list: {\n      horizontal: \"ds:bg-transparent ds:p-0 ds:gap-1\",\n      vertical: \"ds:bg-transparent ds:p-0 ds:gap-1\",\n    },\n    trigger: {\n      horizontal: \"\",\n      vertical: \"\",\n    },\n  },\n\n  // Pill-stroke: Pill-style with stroke border, stronger border radius, no background on active\n  \"pill-stroke\": {\n    list: {\n      horizontal: \"ds:bg-transparent ds:p-0 ds:gap-1\",\n      vertical: \"ds:bg-transparent ds:p-0 ds:gap-1\",\n    },\n    trigger: {\n      horizontal: \"ds:border ds:border-border ds:rounded-full ds:bg-transparent\",\n      vertical: \"ds:border ds:border-border ds:rounded-full ds:bg-transparent\",\n    },\n  },\n\n  // Text: No border/background on group, colored text on active button\n  text: {\n    list: {\n      horizontal: \"ds:bg-transparent ds:p-0 ds:gap-1\",\n      vertical: \"ds:bg-transparent ds:p-0 ds:gap-1\",\n    },\n    trigger: {\n      horizontal:\n        \"ds:bg-transparent ds:data-[state=active]:bg-transparent ds:data-[state=active]:shadow-none\",\n      vertical:\n        \"ds:bg-transparent ds:data-[state=active]:bg-transparent ds:data-[state=active]:shadow-none\",\n    },\n  },\n\n  // Outline: No border/background on group, colored border (stroke) on active button\n  outline: {\n    list: {\n      horizontal: \"ds:bg-transparent ds:p-0 ds:gap-1\",\n      vertical: \"ds:bg-transparent ds:p-0 ds:gap-1\",\n    },\n    trigger: {\n      horizontal:\n        \"ds:bg-transparent ds:border ds:border-transparent ds:data-[state=active]:bg-transparent ds:data-[state=active]:shadow-none\",\n      vertical:\n        \"ds:bg-transparent ds:border ds:border-transparent ds:data-[state=active]:bg-transparent ds:data-[state=active]:shadow-none\",\n    },\n  },\n\n  // Underlined: Bottom border on group, bottom border on active tab\n  underlined: {\n    list: {\n      horizontal: \"ds:bg-background ds:dark:bg-background ds:rounded-none ds:p-0\",\n      vertical: \"ds:bg-background ds:dark:bg-background ds:rounded-none ds:p-0\",\n    },\n    trigger: {\n      horizontal: \"\", // Will be set dynamically\n      vertical: \"\", // Will be set dynamically\n    },\n  },\n\n  // Enclosed: Border on active tab except bottom border (tab style)\n  enclosed: {\n    list: {\n      horizontal:\n        \"ds:bg-background ds:dark:bg-background ds:justify-start ds:rounded-none ds:p-0\",\n      vertical: \"ds:bg-background ds:dark:bg-background ds:items-start ds:rounded-none ds:p-0\",\n    },\n    trigger: {\n      horizontal: \"\", // Will be set dynamically\n      vertical: \"\", // Will be set dynamically\n    },\n  },\n\n  // Enclosed-fill: Border on active tab except bottom border with background on inactive tabs\n  \"enclosed-fill\": {\n    list: {\n      horizontal:\n        \"ds:bg-background ds:dark:bg-background ds:justify-start ds:rounded-none ds:p-0 ds:gap-1\",\n      vertical:\n        \"ds:bg-background ds:dark:bg-background ds:items-start ds:rounded-none ds:p-0 ds:gap-1\",\n    },\n    trigger: {\n      horizontal: \"\", // Will be set dynamically\n      vertical: \"\", // Will be set dynamically\n    },\n  },\n};\n"],"names":["sizeClasses","alignmentClasses","positionClasses","getColorClasses","variant","color","colors","cn","getListBorderClasses","tabPosition","borderBaseMap","colorBorderMap","getUnderlinedTriggerClasses","baseClasses","getEnclosedTriggerClasses","getEnclosedFillTriggerClasses","variantClasses"],"mappings":"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"}