@kopexa/theme 17.2.0 → 17.4.0

package/dist/{chunk-W6VVV2XH.mjs → chunk-5YHTCPJL.mjs}

@@ -3,23 +3,22 @@ import { tv } from "tailwind-variants";
 var card = tv({
   slots: {
     root: [
-      "flex flex-col relative h-auto outline-hidden box-border",
+      "flex flex-col relative h-auto outline-hidden box-border overflow-hidden",
       "transition-colors duration-200"
     ],
     header: [
       "flex",
-      "items-center",
+      "items-start",
       "justify-between",
-      "flex-wrap",
-      "min-h-14",
-      "gap-2.5",
       "w-full",
       "shrink-0",
       "overflow-inherit",
       "color-inherit",
       "subpixel-antialiased"
     ],
-    heading: "space-y-1",
+    heading: "space-y-0.5 min-w-0",
+    title: "font-semibold truncate",
+    subtitle: "text-sm text-muted-foreground line-clamp-2",
     toolbar: "flex items-center gap-2.5",
     body: [
       "grow",
@@ -38,7 +37,6 @@ var card = tv({
       "subpixel-antialiased"
     ],
     footer: [
-      "p-3",
       "h-auto",
       "flex",
       "w-full",
@@ -59,12 +57,12 @@ var card = tv({
       accent: {
         root: "bg-muted shadow-xs p-1",
         header: "!border-none",
-        body: "bg-card rounded-t-xl [&:last-child]:rounded-b-xl"
+        body: "bg-card"
       },
       destructive: {
-        root: "bg-destructive/10",
+        root: "bg-destructive/10 p-1",
         header: "!border-none",
-        body: "bg-card rounded-t-xl [&:last-child]:rounded-b-xl"
+        body: "bg-card"
       }
     },
     shadow: {
@@ -95,6 +93,11 @@ var card = tv({
       emphasized: {
         root: "border-2 border-border",
         header: "border-b border-border"
+      },
+      divider: {
+        root: "border-0",
+        header: "border-b border-border",
+        footer: "border-t border-border"
       }
     },
     radius: {
@@ -146,48 +149,42 @@ var card = tv({
       }
     },
     bleed: {
-      none: {},
-      sm: {
-        body: "px-2",
-        header: "px-2",
-        footer: "px-2"
+      none: {
+        body: "px-4",
+        header: "px-4",
+        footer: "px-4"
       },
-      md: {
+      content: {
         body: "px-0",
-        header: "px-0",
-        footer: "px-0"
-      },
-      lg: {
-        body: "-mx-2",
-        header: "-mx-2",
-        footer: "-mx-2"
+        header: "px-4",
+        footer: "px-4"
       },
-      content: {
+      full: {
         body: "px-0",
-        header: "px-3",
-        footer: "px-3"
+        header: "px-0",
+        footer: "px-0"
       }
     },
     spacing: {
       sm: {
-        body: "p-2",
-        header: "p-2",
-        footer: "p-2"
+        body: "py-2",
+        header: "py-2 gap-2",
+        footer: "py-2"
       },
       md: {
-        body: "p-5",
-        header: "px-5",
-        footer: "px-5"
+        body: "py-4",
+        header: "py-4 gap-3",
+        footer: "py-4"
       },
       lg: {
-        body: "p-4",
-        header: "p-4",
-        footer: "p-4"
+        body: "py-5",
+        header: "py-5 gap-4",
+        footer: "py-5"
       },
       xl: {
-        body: "p-6",
-        header: "p-6",
-        footer: "p-6"
+        body: "py-6",
+        header: "py-6 gap-5",
+        footer: "py-6"
       }
     }
   },

package/dist/{chunk-TLCFFCOP.mjs → chunk-AEWKHJEI.mjs}

@@ -6,7 +6,7 @@ var accordion = tv({
     item: "border-b last:border-b-0",
     trigger: [
       "w-full",
-      "focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180"
+      "focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-center justify-between gap-4 rounded-md text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180"
     ],
     triggerIcon: [
       "pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200"
@@ -55,13 +55,25 @@ var accordion = tv({
         trigger: "px-4",
         content: "px-4"
       }
+    },
+    triggerSpacing: {
+      sm: {
+        trigger: "py-2"
+      },
+      md: {
+        trigger: "py-3"
+      },
+      lg: {
+        trigger: "py-4"
+      }
     }
   },
   defaultVariants: {
     color: "default",
     spacing: "default",
     radius: "md",
-    border: "default"
+    border: "default",
+    triggerSpacing: "lg"
   }
 });
 

package/dist/components/accordion.d.mts

@@ -40,6 +40,17 @@ declare const accordion: tailwind_variants.TVReturnType<{
             content: string;
         };
     };
+    triggerSpacing: {
+        sm: {
+            trigger: string;
+        };
+        md: {
+            trigger: string;
+        };
+        lg: {
+            trigger: string;
+        };
+    };
 }, {
     root: string;
     item: string;
@@ -86,6 +97,17 @@ declare const accordion: tailwind_variants.TVReturnType<{
             content: string;
         };
     };
+    triggerSpacing: {
+        sm: {
+            trigger: string;
+        };
+        md: {
+            trigger: string;
+        };
+        lg: {
+            trigger: string;
+        };
+    };
 }, {
     root: string;
     item: string;
@@ -132,6 +154,17 @@ declare const accordion: tailwind_variants.TVReturnType<{
             content: string;
         };
     };
+    triggerSpacing: {
+        sm: {
+            trigger: string;
+        };
+        md: {
+            trigger: string;
+        };
+        lg: {
+            trigger: string;
+        };
+    };
 }, {
     root: string;
     item: string;

package/dist/components/accordion.d.ts

@@ -40,6 +40,17 @@ declare const accordion: tailwind_variants.TVReturnType<{
             content: string;
         };
     };
+    triggerSpacing: {
+        sm: {
+            trigger: string;
+        };
+        md: {
+            trigger: string;
+        };
+        lg: {
+            trigger: string;
+        };
+    };
 }, {
     root: string;
     item: string;
@@ -86,6 +97,17 @@ declare const accordion: tailwind_variants.TVReturnType<{
             content: string;
         };
     };
+    triggerSpacing: {
+        sm: {
+            trigger: string;
+        };
+        md: {
+            trigger: string;
+        };
+        lg: {
+            trigger: string;
+        };
+    };
 }, {
     root: string;
     item: string;
@@ -132,6 +154,17 @@ declare const accordion: tailwind_variants.TVReturnType<{
             content: string;
         };
     };
+    triggerSpacing: {
+        sm: {
+            trigger: string;
+        };
+        md: {
+            trigger: string;
+        };
+        lg: {
+            trigger: string;
+        };
+    };
 }, {
     root: string;
     item: string;

package/dist/components/accordion.js

@@ -30,7 +30,7 @@ var accordion = (0, import_tailwind_variants.tv)({
     item: "border-b last:border-b-0",
     trigger: [
       "w-full",
-      "focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180"
+      "focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-center justify-between gap-4 rounded-md text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180"
     ],
     triggerIcon: [
       "pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200"
@@ -79,13 +79,25 @@ var accordion = (0, import_tailwind_variants.tv)({
         trigger: "px-4",
         content: "px-4"
       }
+    },
+    triggerSpacing: {
+      sm: {
+        trigger: "py-2"
+      },
+      md: {
+        trigger: "py-3"
+      },
+      lg: {
+        trigger: "py-4"
+      }
     }
   },
   defaultVariants: {
     color: "default",
     spacing: "default",
     radius: "md",
-    border: "default"
+    border: "default",
+    triggerSpacing: "lg"
   }
 });
 // Annotate the CommonJS export names for ESM import in node:

package/dist/components/accordion.mjs

@@ -1,6 +1,6 @@
 import {
   accordion
-} from "../chunk-TLCFFCOP.mjs";
+} from "../chunk-AEWKHJEI.mjs";
 export {
   accordion
 };

package/dist/components/card.d.mts

@@ -49,6 +49,11 @@ declare const card: tailwind_variants.TVReturnType<{
             root: string;
             header: string;
         };
+        divider: {
+            root: string;
+            header: string;
+            footer: string;
+        };
     };
     radius: {
         none: {
@@ -98,23 +103,17 @@ declare const card: tailwind_variants.TVReturnType<{
         };
     };
     bleed: {
-        none: {};
-        sm: {
-            body: string;
-            header: string;
-            footer: string;
-        };
-        md: {
+        none: {
             body: string;
             header: string;
             footer: string;
         };
-        lg: {
+        content: {
             body: string;
             header: string;
             footer: string;
         };
-        content: {
+        full: {
             body: string;
             header: string;
             footer: string;
@@ -146,6 +145,8 @@ declare const card: tailwind_variants.TVReturnType<{
     root: string[];
     header: string[];
     heading: string;
+    title: string;
+    subtitle: string;
     toolbar: string;
     body: string[];
     footer: string[];
@@ -197,6 +198,11 @@ declare const card: tailwind_variants.TVReturnType<{
             root: string;
             header: string;
         };
+        divider: {
+            root: string;
+            header: string;
+            footer: string;
+        };
     };
     radius: {
         none: {
@@ -246,23 +252,17 @@ declare const card: tailwind_variants.TVReturnType<{
         };
     };
     bleed: {
-        none: {};
-        sm: {
-            body: string;
-            header: string;
-            footer: string;
-        };
-        md: {
+        none: {
             body: string;
             header: string;
             footer: string;
         };
-        lg: {
+        content: {
             body: string;
             header: string;
             footer: string;
         };
-        content: {
+        full: {
             body: string;
             header: string;
             footer: string;
@@ -294,6 +294,8 @@ declare const card: tailwind_variants.TVReturnType<{
     root: string[];
     header: string[];
     heading: string;
+    title: string;
+    subtitle: string;
     toolbar: string;
     body: string[];
     footer: string[];
@@ -345,6 +347,11 @@ declare const card: tailwind_variants.TVReturnType<{
             root: string;
             header: string;
         };
+        divider: {
+            root: string;
+            header: string;
+            footer: string;
+        };
     };
     radius: {
         none: {
@@ -394,23 +401,17 @@ declare const card: tailwind_variants.TVReturnType<{
         };
     };
     bleed: {
-        none: {};
-        sm: {
-            body: string;
-            header: string;
-            footer: string;
-        };
-        md: {
+        none: {
             body: string;
             header: string;
             footer: string;
         };
-        lg: {
+        content: {
             body: string;
             header: string;
             footer: string;
         };
-        content: {
+        full: {
             body: string;
             header: string;
             footer: string;
@@ -442,6 +443,8 @@ declare const card: tailwind_variants.TVReturnType<{
     root: string[];
     header: string[];
     heading: string;
+    title: string;
+    subtitle: string;
     toolbar: string;
     body: string[];
     footer: string[];

package/dist/components/card.d.ts

@@ -49,6 +49,11 @@ declare const card: tailwind_variants.TVReturnType<{
             root: string;
             header: string;
         };
+        divider: {
+            root: string;
+            header: string;
+            footer: string;
+        };
     };
     radius: {
         none: {
@@ -98,23 +103,17 @@ declare const card: tailwind_variants.TVReturnType<{
         };
     };
     bleed: {
-        none: {};
-        sm: {
-            body: string;
-            header: string;
-            footer: string;
-        };
-        md: {
+        none: {
             body: string;
             header: string;
             footer: string;
         };
-        lg: {
+        content: {
             body: string;
             header: string;
             footer: string;
         };
-        content: {
+        full: {
             body: string;
             header: string;
             footer: string;
@@ -146,6 +145,8 @@ declare const card: tailwind_variants.TVReturnType<{
     root: string[];
     header: string[];
     heading: string;
+    title: string;
+    subtitle: string;
     toolbar: string;
     body: string[];
     footer: string[];
@@ -197,6 +198,11 @@ declare const card: tailwind_variants.TVReturnType<{
             root: string;
             header: string;
         };
+        divider: {
+            root: string;
+            header: string;
+            footer: string;
+        };
     };
     radius: {
         none: {
@@ -246,23 +252,17 @@ declare const card: tailwind_variants.TVReturnType<{
         };
     };
     bleed: {
-        none: {};
-        sm: {
-            body: string;
-            header: string;
-            footer: string;
-        };
-        md: {
+        none: {
             body: string;
             header: string;
             footer: string;
         };
-        lg: {
+        content: {
             body: string;
             header: string;
             footer: string;
         };
-        content: {
+        full: {
             body: string;
             header: string;
             footer: string;
@@ -294,6 +294,8 @@ declare const card: tailwind_variants.TVReturnType<{
     root: string[];
     header: string[];
     heading: string;
+    title: string;
+    subtitle: string;
     toolbar: string;
     body: string[];
     footer: string[];
@@ -345,6 +347,11 @@ declare const card: tailwind_variants.TVReturnType<{
             root: string;
             header: string;
         };
+        divider: {
+            root: string;
+            header: string;
+            footer: string;
+        };
     };
     radius: {
         none: {
@@ -394,23 +401,17 @@ declare const card: tailwind_variants.TVReturnType<{
         };
     };
     bleed: {
-        none: {};
-        sm: {
-            body: string;
-            header: string;
-            footer: string;
-        };
-        md: {
+        none: {
             body: string;
             header: string;
             footer: string;
         };
-        lg: {
+        content: {
             body: string;
             header: string;
             footer: string;
         };
-        content: {
+        full: {
             body: string;
             header: string;
             footer: string;
@@ -442,6 +443,8 @@ declare const card: tailwind_variants.TVReturnType<{
     root: string[];
     header: string[];
     heading: string;
+    title: string;
+    subtitle: string;
     toolbar: string;
     body: string[];
     footer: string[];

package/dist/components/card.js

@@ -27,23 +27,22 @@ var import_tailwind_variants = require("tailwind-variants");
 var card = (0, import_tailwind_variants.tv)({
   slots: {
     root: [
-      "flex flex-col relative h-auto outline-hidden box-border",
+      "flex flex-col relative h-auto outline-hidden box-border overflow-hidden",
       "transition-colors duration-200"
     ],
     header: [
       "flex",
-      "items-center",
+      "items-start",
       "justify-between",
-      "flex-wrap",
-      "min-h-14",
-      "gap-2.5",
       "w-full",
       "shrink-0",
       "overflow-inherit",
       "color-inherit",
       "subpixel-antialiased"
     ],
-    heading: "space-y-1",
+    heading: "space-y-0.5 min-w-0",
+    title: "font-semibold truncate",
+    subtitle: "text-sm text-muted-foreground line-clamp-2",
     toolbar: "flex items-center gap-2.5",
     body: [
       "grow",
@@ -62,7 +61,6 @@ var card = (0, import_tailwind_variants.tv)({
       "subpixel-antialiased"
     ],
     footer: [
-      "p-3",
       "h-auto",
       "flex",
       "w-full",
@@ -83,12 +81,12 @@ var card = (0, import_tailwind_variants.tv)({
       accent: {
         root: "bg-muted shadow-xs p-1",
         header: "!border-none",
-        body: "bg-card rounded-t-xl [&:last-child]:rounded-b-xl"
+        body: "bg-card"
       },
       destructive: {
-        root: "bg-destructive/10",
+        root: "bg-destructive/10 p-1",
         header: "!border-none",
-        body: "bg-card rounded-t-xl [&:last-child]:rounded-b-xl"
+        body: "bg-card"
       }
     },
     shadow: {
@@ -119,6 +117,11 @@ var card = (0, import_tailwind_variants.tv)({
       emphasized: {
         root: "border-2 border-border",
         header: "border-b border-border"
+      },
+      divider: {
+        root: "border-0",
+        header: "border-b border-border",
+        footer: "border-t border-border"
       }
     },
     radius: {
@@ -170,48 +173,42 @@ var card = (0, import_tailwind_variants.tv)({
       }
     },
     bleed: {
-      none: {},
-      sm: {
-        body: "px-2",
-        header: "px-2",
-        footer: "px-2"
+      none: {
+        body: "px-4",
+        header: "px-4",
+        footer: "px-4"
       },
-      md: {
+      content: {
         body: "px-0",
-        header: "px-0",
-        footer: "px-0"
-      },
-      lg: {
-        body: "-mx-2",
-        header: "-mx-2",
-        footer: "-mx-2"
+        header: "px-4",
+        footer: "px-4"
       },
-      content: {
+      full: {
         body: "px-0",
-        header: "px-3",
-        footer: "px-3"
+        header: "px-0",
+        footer: "px-0"
       }
     },
     spacing: {
       sm: {
-        body: "p-2",
-        header: "p-2",
-        footer: "p-2"
+        body: "py-2",
+        header: "py-2 gap-2",
+        footer: "py-2"
       },
       md: {
-        body: "p-5",
-        header: "px-5",
-        footer: "px-5"
+        body: "py-4",
+        header: "py-4 gap-3",
+        footer: "py-4"
       },
       lg: {
-        body: "p-4",
-        header: "p-4",
-        footer: "p-4"
+        body: "py-5",
+        header: "py-5 gap-4",
+        footer: "py-5"
       },
       xl: {
-        body: "p-6",
-        header: "p-6",
-        footer: "p-6"
+        body: "py-6",
+        header: "py-6 gap-5",
+        footer: "py-6"
       }
     }
   },

package/dist/components/card.mjs

@@ -1,6 +1,6 @@
 import {
   card
-} from "../chunk-W6VVV2XH.mjs";
+} from "../chunk-5YHTCPJL.mjs";
 export {
   card
 };

package/dist/components/index.js

@@ -96,7 +96,7 @@ var accordion = (0, import_tailwind_variants.tv)({
     item: "border-b last:border-b-0",
     trigger: [
       "w-full",
-      "focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180"
+      "focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-center justify-between gap-4 rounded-md text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180"
     ],
     triggerIcon: [
       "pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200"
@@ -145,13 +145,25 @@ var accordion = (0, import_tailwind_variants.tv)({
         trigger: "px-4",
         content: "px-4"
       }
+    },
+    triggerSpacing: {
+      sm: {
+        trigger: "py-2"
+      },
+      md: {
+        trigger: "py-3"
+      },
+      lg: {
+        trigger: "py-4"
+      }
     }
   },
   defaultVariants: {
     color: "default",
     spacing: "default",
     radius: "md",
-    border: "default"
+    border: "default",
+    triggerSpacing: "lg"
   }
 });
 
@@ -953,23 +965,22 @@ var import_tailwind_variants11 = require("tailwind-variants");
 var card = (0, import_tailwind_variants11.tv)({
   slots: {
     root: [
-      "flex flex-col relative h-auto outline-hidden box-border",
+      "flex flex-col relative h-auto outline-hidden box-border overflow-hidden",
       "transition-colors duration-200"
     ],
     header: [
       "flex",
-      "items-center",
+      "items-start",
       "justify-between",
-      "flex-wrap",
-      "min-h-14",
-      "gap-2.5",
       "w-full",
       "shrink-0",
       "overflow-inherit",
       "color-inherit",
       "subpixel-antialiased"
     ],
-    heading: "space-y-1",
+    heading: "space-y-0.5 min-w-0",
+    title: "font-semibold truncate",
+    subtitle: "text-sm text-muted-foreground line-clamp-2",
     toolbar: "flex items-center gap-2.5",
     body: [
       "grow",
@@ -988,7 +999,6 @@ var card = (0, import_tailwind_variants11.tv)({
       "subpixel-antialiased"
     ],
     footer: [
-      "p-3",
       "h-auto",
       "flex",
       "w-full",
@@ -1009,12 +1019,12 @@ var card = (0, import_tailwind_variants11.tv)({
       accent: {
         root: "bg-muted shadow-xs p-1",
         header: "!border-none",
-        body: "bg-card rounded-t-xl [&:last-child]:rounded-b-xl"
+        body: "bg-card"
       },
       destructive: {
-        root: "bg-destructive/10",
+        root: "bg-destructive/10 p-1",
         header: "!border-none",
-        body: "bg-card rounded-t-xl [&:last-child]:rounded-b-xl"
+        body: "bg-card"
       }
     },
     shadow: {
@@ -1045,6 +1055,11 @@ var card = (0, import_tailwind_variants11.tv)({
       emphasized: {
         root: "border-2 border-border",
         header: "border-b border-border"
+      },
+      divider: {
+        root: "border-0",
+        header: "border-b border-border",
+        footer: "border-t border-border"
       }
     },
     radius: {
@@ -1096,48 +1111,42 @@ var card = (0, import_tailwind_variants11.tv)({
       }
     },
     bleed: {
-      none: {},
-      sm: {
-        body: "px-2",
-        header: "px-2",
-        footer: "px-2"
+      none: {
+        body: "px-4",
+        header: "px-4",
+        footer: "px-4"
       },
-      md: {
+      content: {
         body: "px-0",
-        header: "px-0",
-        footer: "px-0"
-      },
-      lg: {
-        body: "-mx-2",
-        header: "-mx-2",
-        footer: "-mx-2"
+        header: "px-4",
+        footer: "px-4"
       },
-      content: {
+      full: {
         body: "px-0",
-        header: "px-3",
-        footer: "px-3"
+        header: "px-0",
+        footer: "px-0"
       }
     },
     spacing: {
       sm: {
-        body: "p-2",
-        header: "p-2",
-        footer: "p-2"
+        body: "py-2",
+        header: "py-2 gap-2",
+        footer: "py-2"
       },
       md: {
-        body: "p-5",
-        header: "px-5",
-        footer: "px-5"
+        body: "py-4",
+        header: "py-4 gap-3",
+        footer: "py-4"
       },
       lg: {
-        body: "p-4",
-        header: "p-4",
-        footer: "p-4"
+        body: "py-5",
+        header: "py-5 gap-4",
+        footer: "py-5"
       },
       xl: {
-        body: "p-6",
-        header: "p-6",
-        footer: "p-6"
+        body: "py-6",
+        header: "py-6 gap-5",
+        footer: "py-6"
       }
     }
   },

package/dist/components/index.mjs

@@ -147,7 +147,7 @@ import {
 } from "../chunk-A3F4CV54.mjs";
 import {
   card
-} from "../chunk-W6VVV2XH.mjs";
+} from "../chunk-5YHTCPJL.mjs";
 import {
   checkbox
 } from "../chunk-A4KO7QKC.mjs";
@@ -165,7 +165,7 @@ import {
 } from "../chunk-76J7KB3M.mjs";
 import {
   accordion
-} from "../chunk-TLCFFCOP.mjs";
+} from "../chunk-AEWKHJEI.mjs";
 import {
   alertDialog
 } from "../chunk-XGUDXC5P.mjs";

package/dist/index.js

@@ -96,7 +96,7 @@ var accordion = (0, import_tailwind_variants.tv)({
     item: "border-b last:border-b-0",
     trigger: [
       "w-full",
-      "focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180"
+      "focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-center justify-between gap-4 rounded-md text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180"
     ],
     triggerIcon: [
       "pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200"
@@ -145,13 +145,25 @@ var accordion = (0, import_tailwind_variants.tv)({
         trigger: "px-4",
         content: "px-4"
       }
+    },
+    triggerSpacing: {
+      sm: {
+        trigger: "py-2"
+      },
+      md: {
+        trigger: "py-3"
+      },
+      lg: {
+        trigger: "py-4"
+      }
     }
   },
   defaultVariants: {
     color: "default",
     spacing: "default",
     radius: "md",
-    border: "default"
+    border: "default",
+    triggerSpacing: "lg"
   }
 });
 
@@ -953,23 +965,22 @@ var import_tailwind_variants11 = require("tailwind-variants");
 var card = (0, import_tailwind_variants11.tv)({
   slots: {
     root: [
-      "flex flex-col relative h-auto outline-hidden box-border",
+      "flex flex-col relative h-auto outline-hidden box-border overflow-hidden",
       "transition-colors duration-200"
     ],
     header: [
       "flex",
-      "items-center",
+      "items-start",
       "justify-between",
-      "flex-wrap",
-      "min-h-14",
-      "gap-2.5",
       "w-full",
       "shrink-0",
       "overflow-inherit",
       "color-inherit",
       "subpixel-antialiased"
     ],
-    heading: "space-y-1",
+    heading: "space-y-0.5 min-w-0",
+    title: "font-semibold truncate",
+    subtitle: "text-sm text-muted-foreground line-clamp-2",
     toolbar: "flex items-center gap-2.5",
     body: [
       "grow",
@@ -988,7 +999,6 @@ var card = (0, import_tailwind_variants11.tv)({
       "subpixel-antialiased"
     ],
     footer: [
-      "p-3",
       "h-auto",
       "flex",
       "w-full",
@@ -1009,12 +1019,12 @@ var card = (0, import_tailwind_variants11.tv)({
       accent: {
         root: "bg-muted shadow-xs p-1",
         header: "!border-none",
-        body: "bg-card rounded-t-xl [&:last-child]:rounded-b-xl"
+        body: "bg-card"
       },
       destructive: {
-        root: "bg-destructive/10",
+        root: "bg-destructive/10 p-1",
         header: "!border-none",
-        body: "bg-card rounded-t-xl [&:last-child]:rounded-b-xl"
+        body: "bg-card"
       }
     },
     shadow: {
@@ -1045,6 +1055,11 @@ var card = (0, import_tailwind_variants11.tv)({
       emphasized: {
         root: "border-2 border-border",
         header: "border-b border-border"
+      },
+      divider: {
+        root: "border-0",
+        header: "border-b border-border",
+        footer: "border-t border-border"
       }
     },
     radius: {
@@ -1096,48 +1111,42 @@ var card = (0, import_tailwind_variants11.tv)({
       }
     },
     bleed: {
-      none: {},
-      sm: {
-        body: "px-2",
-        header: "px-2",
-        footer: "px-2"
+      none: {
+        body: "px-4",
+        header: "px-4",
+        footer: "px-4"
       },
-      md: {
+      content: {
         body: "px-0",
-        header: "px-0",
-        footer: "px-0"
-      },
-      lg: {
-        body: "-mx-2",
-        header: "-mx-2",
-        footer: "-mx-2"
+        header: "px-4",
+        footer: "px-4"
       },
-      content: {
+      full: {
         body: "px-0",
-        header: "px-3",
-        footer: "px-3"
+        header: "px-0",
+        footer: "px-0"
       }
     },
     spacing: {
       sm: {
-        body: "p-2",
-        header: "p-2",
-        footer: "p-2"
+        body: "py-2",
+        header: "py-2 gap-2",
+        footer: "py-2"
       },
       md: {
-        body: "p-5",
-        header: "px-5",
-        footer: "px-5"
+        body: "py-4",
+        header: "py-4 gap-3",
+        footer: "py-4"
       },
       lg: {
-        body: "p-4",
-        header: "p-4",
-        footer: "p-4"
+        body: "py-5",
+        header: "py-5 gap-4",
+        footer: "py-5"
       },
       xl: {
-        body: "p-6",
-        header: "p-6",
-        footer: "p-6"
+        body: "py-6",
+        header: "py-6 gap-5",
+        footer: "py-6"
       }
     }
   },

package/dist/index.mjs

@@ -148,7 +148,7 @@ import {
 } from "./chunk-A3F4CV54.mjs";
 import {
   card
-} from "./chunk-W6VVV2XH.mjs";
+} from "./chunk-5YHTCPJL.mjs";
 import {
   checkbox
 } from "./chunk-A4KO7QKC.mjs";
@@ -166,7 +166,7 @@ import {
 } from "./chunk-76J7KB3M.mjs";
 import {
   accordion
-} from "./chunk-TLCFFCOP.mjs";
+} from "./chunk-AEWKHJEI.mjs";
 import {
   alertDialog
 } from "./chunk-XGUDXC5P.mjs";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kopexa/theme",
-  "version": "17.2.0",
+  "version": "17.4.0",
   "description": "The default theme for Kopexa components",
   "keywords": [
     "theme",
@@ -65,7 +65,7 @@
     "tailwind-merge": "3.3.1",
     "tailwind-variants": "^3.2.2",
     "tw-animate-css": "^1.4.0",
-    "@kopexa/shared-utils": "17.0.6"
+    "@kopexa/shared-utils": "17.0.8"
   },
   "peerDependencies": {
     "tailwindcss": ">=4.0.0"