@kopexa/theme 17.1.2 → 17.3.0

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/data-grid.d.mts

@@ -42,20 +42,22 @@ declare const datagrid: tailwind_variants.TVReturnType<{
             table: string;
         };
     };
-    headerBackground: {
-        false: {
+    headerColor: {
+        default: {
             headerRow: string;
         };
-        true: {
+        muted: {
             headerRow: string;
         };
-    };
-    stripped: {
-        true: {
+        primary: {
             headerRow: string;
-            bodyRowSkeleton: string;
-            bodyRow: string;
         };
+        accent: {
+            headerRow: string;
+        };
+    };
+    stripped: {
+        true: {};
     };
     width: {
         fixed: {
@@ -81,6 +83,8 @@ declare const datagrid: tailwind_variants.TVReturnType<{
     columnsPinnable: {
         true: {
             headerRowCell: string;
+            bodyRowCell: string;
+            bodyRowSkeletonCell: string;
         };
         false: {};
     };
@@ -148,21 +152,23 @@ declare const datagrid: tailwind_variants.TVReturnType<{
             table: string;
         };
     };
-    headerBackground: {
-        false: {
+    headerColor: {
+        default: {
             headerRow: string;
         };
-        true: {
+        muted: {
             headerRow: string;
         };
-    };
-    stripped: {
-        true: {
+        primary: {
+            headerRow: string;
+        };
+        accent: {
             headerRow: string;
-            bodyRowSkeleton: string;
-            bodyRow: string;
         };
     };
+    stripped: {
+        true: {};
+    };
     width: {
         fixed: {
             table: string;
@@ -187,6 +193,8 @@ declare const datagrid: tailwind_variants.TVReturnType<{
     columnsPinnable: {
         true: {
             headerRowCell: string;
+            bodyRowCell: string;
+            bodyRowSkeletonCell: string;
         };
         false: {};
     };
@@ -254,21 +262,23 @@ declare const datagrid: tailwind_variants.TVReturnType<{
             table: string;
         };
     };
-    headerBackground: {
-        false: {
+    headerColor: {
+        default: {
             headerRow: string;
         };
-        true: {
+        muted: {
             headerRow: string;
         };
-    };
-    stripped: {
-        true: {
+        primary: {
+            headerRow: string;
+        };
+        accent: {
             headerRow: string;
-            bodyRowSkeleton: string;
-            bodyRow: string;
         };
     };
+    stripped: {
+        true: {};
+    };
     width: {
         fixed: {
             table: string;
@@ -293,6 +303,8 @@ declare const datagrid: tailwind_variants.TVReturnType<{
     columnsPinnable: {
         true: {
             headerRowCell: string;
+            bodyRowCell: string;
+            bodyRowSkeletonCell: string;
         };
         false: {};
     };

package/dist/components/data-grid.d.ts

@@ -42,20 +42,22 @@ declare const datagrid: tailwind_variants.TVReturnType<{
             table: string;
         };
     };
-    headerBackground: {
-        false: {
+    headerColor: {
+        default: {
             headerRow: string;
         };
-        true: {
+        muted: {
             headerRow: string;
         };
-    };
-    stripped: {
-        true: {
+        primary: {
             headerRow: string;
-            bodyRowSkeleton: string;
-            bodyRow: string;
         };
+        accent: {
+            headerRow: string;
+        };
+    };
+    stripped: {
+        true: {};
     };
     width: {
         fixed: {
@@ -81,6 +83,8 @@ declare const datagrid: tailwind_variants.TVReturnType<{
     columnsPinnable: {
         true: {
             headerRowCell: string;
+            bodyRowCell: string;
+            bodyRowSkeletonCell: string;
         };
         false: {};
     };
@@ -148,21 +152,23 @@ declare const datagrid: tailwind_variants.TVReturnType<{
             table: string;
         };
     };
-    headerBackground: {
-        false: {
+    headerColor: {
+        default: {
             headerRow: string;
         };
-        true: {
+        muted: {
             headerRow: string;
         };
-    };
-    stripped: {
-        true: {
+        primary: {
+            headerRow: string;
+        };
+        accent: {
             headerRow: string;
-            bodyRowSkeleton: string;
-            bodyRow: string;
         };
     };
+    stripped: {
+        true: {};
+    };
     width: {
         fixed: {
             table: string;
@@ -187,6 +193,8 @@ declare const datagrid: tailwind_variants.TVReturnType<{
     columnsPinnable: {
         true: {
             headerRowCell: string;
+            bodyRowCell: string;
+            bodyRowSkeletonCell: string;
         };
         false: {};
     };
@@ -254,21 +262,23 @@ declare const datagrid: tailwind_variants.TVReturnType<{
             table: string;
         };
     };
-    headerBackground: {
-        false: {
+    headerColor: {
+        default: {
             headerRow: string;
         };
-        true: {
+        muted: {
             headerRow: string;
         };
-    };
-    stripped: {
-        true: {
+        primary: {
+            headerRow: string;
+        };
+        accent: {
             headerRow: string;
-            bodyRowSkeleton: string;
-            bodyRow: string;
         };
     };
+    stripped: {
+        true: {};
+    };
     width: {
         fixed: {
             table: string;
@@ -293,6 +303,8 @@ declare const datagrid: tailwind_variants.TVReturnType<{
     columnsPinnable: {
         true: {
             headerRowCell: string;
+            bodyRowCell: string;
+            bodyRowSkeletonCell: string;
         };
         false: {};
     };

package/dist/components/data-grid.js

@@ -82,20 +82,22 @@ var datagrid = (0, import_tailwind_variants.tv)({
         table: "border-separate border-spacing-0"
       }
     },
-    headerBackground: {
-      false: {
+    headerColor: {
+      default: {
         headerRow: "bg-transparent"
       },
-      true: {
+      muted: {
         headerRow: "bg-muted/40"
+      },
+      primary: {
+        headerRow: "bg-primary/10"
+      },
+      accent: {
+        headerRow: "bg-accent"
       }
     },
     stripped: {
-      true: {
-        headerRow: "bg-transparent",
-        bodyRowSkeleton: "odd:bg-muted/90 hover:bg-transparent odd:hover:bg-muted",
-        bodyRow: "odd:bg-muted/90 hover:bg-transparent odd:hover:bg-muted"
-      }
+      true: {}
     },
     width: {
       fixed: {
@@ -120,7 +122,9 @@ var datagrid = (0, import_tailwind_variants.tv)({
     },
     columnsPinnable: {
       true: {
-        headerRowCell: "[&:not([data-pinned]):has(+[data-pinned])_div.cursor-col-resize:last-child]:opacity-0 [&[data-last-col=left]_div.cursor-col-resize:last-child]:opacity-0 [&[data-pinned=left][data-last-col=left]]:border-e! [&[data-pinned=right]:last-child_div.cursor-col-resize:last-child]:opacity-0 [&[data-pinned=right][data-last-col=right]]:border-s! [&[data-pinned][data-last-col]]:border-border data-pinned:bg-muted/90 data-pinned:backdrop-blur-xs"
+        headerRowCell: "[&:not([data-pinned]):has(+[data-pinned])_div.cursor-col-resize:last-child]:opacity-0 [&[data-last-col=left]_div.cursor-col-resize:last-child]:opacity-0 [&[data-pinned=left][data-last-col=left]]:border-e! [&[data-pinned=right]:last-child_div.cursor-col-resize:last-child]:opacity-0 [&[data-pinned=right][data-last-col=right]]:border-s! [&[data-pinned][data-last-col]]:border-border data-pinned:bg-background",
+        bodyRowCell: "[&[data-pinned=left][data-last-col=left]]:border-e! [&[data-pinned=right][data-last-col=right]]:border-s! [&[data-pinned][data-last-col]]:border-border data-pinned:bg-background",
+        bodyRowSkeletonCell: "[&[data-pinned=left][data-last-col=left]]:border-e! [&[data-pinned=right][data-last-col=right]]:border-s! [&[data-pinned][data-last-col]]:border-border data-pinned:bg-background"
       },
       false: {}
     },
@@ -141,6 +145,71 @@ var datagrid = (0, import_tailwind_variants.tv)({
         bodyRowSkeleton: "border-b border-border [&:not(:last-child)>td]:border-b",
         bodyRow: "border-b border-border [&:not(:last-child)>td]:border-b"
       }
+    },
+    // stripped + headerColor default: odd rows are muted (first data row is muted)
+    {
+      stripped: true,
+      headerColor: "default",
+      className: {
+        bodyRowSkeleton: "odd:bg-muted/90 hover:bg-transparent odd:hover:bg-muted",
+        bodyRow: "odd:bg-muted/90 hover:bg-transparent odd:hover:bg-muted"
+      }
+    },
+    // stripped + headerColor muted: even rows are muted (header counts as first, so first data row is not muted)
+    {
+      stripped: true,
+      headerColor: "muted",
+      className: {
+        bodyRowSkeleton: "even:bg-muted/90 hover:bg-transparent even:hover:bg-muted",
+        bodyRow: "even:bg-muted/90 hover:bg-transparent even:hover:bg-muted"
+      }
+    },
+    // stripped + headerColor primary: even rows are muted
+    {
+      stripped: true,
+      headerColor: "primary",
+      className: {
+        bodyRowSkeleton: "even:bg-muted/90 hover:bg-transparent even:hover:bg-muted",
+        bodyRow: "even:bg-muted/90 hover:bg-transparent even:hover:bg-muted"
+      }
+    },
+    // stripped + headerColor accent: even rows are muted
+    {
+      stripped: true,
+      headerColor: "accent",
+      className: {
+        bodyRowSkeleton: "even:bg-muted/90 hover:bg-transparent even:hover:bg-muted",
+        bodyRow: "even:bg-muted/90 hover:bg-transparent even:hover:bg-muted"
+      }
+    },
+    // columnsPinnable + headerColor: pinned header cells need matching background
+    {
+      columnsPinnable: true,
+      headerColor: "default",
+      className: {
+        headerRowCell: "data-pinned:bg-transparent!"
+      }
+    },
+    {
+      columnsPinnable: true,
+      headerColor: "muted",
+      className: {
+        headerRowCell: "data-pinned:bg-muted/40!"
+      }
+    },
+    {
+      columnsPinnable: true,
+      headerColor: "primary",
+      className: {
+        headerRowCell: "data-pinned:bg-primary/10!"
+      }
+    },
+    {
+      columnsPinnable: true,
+      headerColor: "accent",
+      className: {
+        headerRowCell: "data-pinned:bg-accent!"
+      }
     }
   ],
   defaultVariants: {
@@ -149,7 +218,7 @@ var datagrid = (0, import_tailwind_variants.tv)({
     width: "fixed",
     headerSticky: false,
     headerBorder: true,
-    headerBackground: true,
+    headerColor: "muted",
     cellBorder: false,
     stripped: false,
     columnsPinnable: false,

package/dist/components/data-grid.mjs

@@ -1,6 +1,6 @@
 import {
   datagrid
-} from "../chunk-45KIKY4A.mjs";
+} from "../chunk-Z5W4E7GM.mjs";
 export {
   datagrid
 };