@kopexa/theme 17.1.2 → 17.2.0

package/dist/chunk-4XIBRN6X.mjs

@@ -0,0 +1,69 @@
+// src/components/preview-card.ts
+import { tv } from "tailwind-variants";
+var previewCard = tv({
+  slots: {
+    root: [
+      "grid w-full grid-cols-[auto_1fr_auto] items-center gap-y-1.5 rounded-md bg-background p-2",
+      "transition-all group min-h-10 cursor-pointer",
+      "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1"
+    ],
+    icon: ["row-start-1 col-start-1 mr-3 text-muted-foreground"],
+    content: ["row-start-1 col-start-2 flex min-w-0 flex-col justify-center"],
+    title: ["truncate text-xs font-medium text-foreground"],
+    description: ["truncate text-[10px] text-muted-foreground line-clamp-1"],
+    action: ["row-start-1 col-start-3 ml-3 rounded-full [&_svg]:size-4"],
+    tags: ["col-start-2 flex items-center gap-2"]
+  },
+  variants: {
+    size: {
+      md: {
+        icon: "[&__svg]:size-5"
+      }
+    },
+    border: {
+      all: {
+        root: ["border"]
+      },
+      bottom: {
+        root: ["border-b rounded-none"]
+      },
+      none: {}
+    },
+    hoverBorder: {
+      true: {
+        root: "hover:border-primary"
+      },
+      false: {}
+    },
+    hoverBg: {
+      true: {
+        root: "hover:bg-muted/50"
+      },
+      false: {}
+    },
+    hoverTitle: {
+      true: {
+        title: "group-hover:underline"
+      },
+      false: {}
+    },
+    showAction: {
+      hover: {
+        action: "opacity-0 group-hover:opacity-100 transition-opacity"
+      },
+      always: {}
+    }
+  },
+  defaultVariants: {
+    size: "md",
+    border: "all",
+    hoverBorder: true,
+    hoverBg: true,
+    hoverTitle: false,
+    showAction: "hover"
+  }
+});
+
+export {
+  previewCard
+};

package/dist/chunk-CC225WUG.mjs

@@ -0,0 +1,75 @@
+// src/components/section-row.ts
+import { tv } from "tailwind-variants";
+var sectionRow = tv({
+  slots: {
+    root: ["grid grid-cols-1 text-base/6 sm:text-sm/6", "w-full"],
+    title: [
+      "col-start-1 text-muted-foreground text-sm font-medium",
+      "flex flex-row items-center gap-1.5",
+      "shrink-0"
+    ],
+    icon: "shrink-0 text-muted-foreground [&>svg]:size-4",
+    infoTip: ["min-w-64 w-auto max-w-96 p-2"],
+    valueText: "whitespace-pre-line text-pretty text-sm",
+    valueContainer: ["flex flex-row items-start gap-1", "grow min-w-0"],
+    action: "shrink-0"
+  },
+  variants: {
+    orientation: {
+      horizontal: {
+        root: "grid-cols-[min(33%,theme(spacing.48))_1fr_auto]"
+      },
+      vertical: {
+        root: "grid-cols-[1fr_auto] items-center",
+        valueContainer: "col-span-full items-start",
+        action: "row-start-1 col-start-2"
+      }
+    },
+    align: {
+      start: {
+        root: "items-start"
+      },
+      center: {
+        root: "items-center"
+      }
+    },
+    spacing: {
+      none: {
+        root: "gap-x-3 gap-y-0 py-0"
+      },
+      tight: {
+        root: "gap-x-3 gap-y-0.5 py-1"
+      },
+      default: {
+        root: "gap-x-3 gap-y-1 py-2"
+      },
+      loose: {
+        root: "gap-x-3 gap-y-2 py-3"
+      }
+    },
+    hasActions: {
+      true: {},
+      false: {
+        action: "hidden"
+      }
+    },
+    justify: {
+      start: {},
+      between: {
+        root: "justify-between",
+        valueContainer: "justify-end text-right"
+      }
+    }
+  },
+  defaultVariants: {
+    hasActions: false,
+    orientation: "horizontal",
+    align: "start",
+    spacing: "default",
+    justify: "start"
+  }
+});
+
+export {
+  sectionRow
+};

package/dist/{chunk-45KIKY4A.mjs → chunk-Z5W4E7GM.mjs}

@@ -58,20 +58,22 @@ var datagrid = 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: {
@@ -96,7 +98,9 @@ var datagrid = 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: {}
     },
@@ -117,6 +121,71 @@ var datagrid = 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: {
@@ -125,7 +194,7 @@ var datagrid = tv({
     width: "fixed",
     headerSticky: false,
     headerBorder: true,
-    headerBackground: true,
+    headerColor: "muted",
     cellBorder: false,
     stripped: false,
     columnsPinnable: false,

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
 };