@kopexa/theme 17.12.0 → 17.13.1

package/dist/{chunk-Z5W4E7GM.mjs → chunk-BCQAC4TS.mjs}

@@ -78,7 +78,9 @@ var datagrid = tv({
     width: {
       fixed: {
         table: "table-fixed",
-        headerRowCell: "w-[var(--size)]"
+        headerRowCell: "w-[var(--size)]",
+        bodyRowCell: "w-[var(--size)]",
+        bodyRowSkeletonCell: "w-[var(--size)]"
       },
       auto: {
         table: "table-auto"
@@ -98,9 +100,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-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"
+        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=left][data-last-col=left]]:shadow-[2px_0_5px_-2px_rgba(0,0,0,0.1)] [&[data-pinned=right]:last-child_div.cursor-col-resize:last-child]:opacity-0 [&[data-pinned=right][data-last-col=right]]:border-s [&[data-pinned=right][data-last-col=right]]:shadow-[-2px_0_5px_-2px_rgba(0,0,0,0.1)] [&[data-pinned][data-last-col]]:border-border data-[pinned]:bg-background",
+        bodyRowCell: "[&[data-pinned=left][data-last-col=left]]:border-e [&[data-pinned=left][data-last-col=left]]:shadow-[2px_0_5px_-2px_rgba(0,0,0,0.1)] [&[data-pinned=right][data-last-col=right]]:border-s [&[data-pinned=right][data-last-col=right]]:shadow-[-2px_0_5px_-2px_rgba(0,0,0,0.1)] [&[data-pinned][data-last-col]]:border-border data-[pinned]:bg-background",
+        bodyRowSkeletonCell: "[&[data-pinned=left][data-last-col=left]]:border-e [&[data-pinned=left][data-last-col=left]]:shadow-[2px_0_5px_-2px_rgba(0,0,0,0.1)] [&[data-pinned=right][data-last-col=right]]:border-s [&[data-pinned=right][data-last-col=right]]:shadow-[-2px_0_5px_-2px_rgba(0,0,0,0.1)] [&[data-pinned][data-last-col]]:border-border data-[pinned]:bg-background"
       },
       false: {}
     },
@@ -163,28 +165,28 @@ var datagrid = tv({
       columnsPinnable: true,
       headerColor: "default",
       className: {
-        headerRowCell: "data-pinned:bg-transparent!"
+        headerRowCell: "data-[pinned]:bg-transparent!"
       }
     },
     {
       columnsPinnable: true,
       headerColor: "muted",
       className: {
-        headerRowCell: "data-pinned:bg-muted/40!"
+        headerRowCell: "data-[pinned]:bg-muted/40!"
       }
     },
     {
       columnsPinnable: true,
       headerColor: "primary",
       className: {
-        headerRowCell: "data-pinned:bg-primary/10!"
+        headerRowCell: "data-[pinned]:bg-primary/10!"
       }
     },
     {
       columnsPinnable: true,
       headerColor: "accent",
       className: {
-        headerRowCell: "data-pinned:bg-accent!"
+        headerRowCell: "data-[pinned]:bg-accent!"
       }
     }
   ],

package/dist/chunk-EKOZ2ZVU.mjs

@@ -0,0 +1,44 @@
+// src/components/variable-node.ts
+import { tv } from "tailwind-variants";
+var variableNode = tv({
+  slots: {
+    wrapper: ["inline", "align-baseline"],
+    chip: [
+      "inline-flex items-center",
+      "px-1.5 py-0.5 mx-0.5",
+      "rounded-md",
+      "text-sm font-medium",
+      "cursor-default",
+      "select-none",
+      "whitespace-nowrap",
+      "align-baseline"
+    ],
+    bracket: ["text-primary/50", "font-mono", "text-xs"],
+    name: ["font-mono", "text-xs"],
+    value: ["font-normal"]
+  },
+  variants: {
+    resolved: {
+      true: {
+        chip: ["bg-muted", "border border-border", "text-foreground"],
+        value: ["text-foreground"]
+      },
+      false: {
+        chip: [
+          "bg-primary/10",
+          "border border-primary/20",
+          "text-primary-foreground"
+        ],
+        bracket: ["text-primary"],
+        name: ["text-primary"]
+      }
+    }
+  },
+  defaultVariants: {
+    resolved: false
+  }
+});
+
+export {
+  variableNode
+};

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

@@ -63,6 +63,8 @@ declare const datagrid: tailwind_variants.TVReturnType<{
         fixed: {
             table: string;
             headerRowCell: string;
+            bodyRowCell: string;
+            bodyRowSkeletonCell: string;
         };
         auto: {
             table: string;
@@ -173,6 +175,8 @@ declare const datagrid: tailwind_variants.TVReturnType<{
         fixed: {
             table: string;
             headerRowCell: string;
+            bodyRowCell: string;
+            bodyRowSkeletonCell: string;
         };
         auto: {
             table: string;
@@ -283,6 +287,8 @@ declare const datagrid: tailwind_variants.TVReturnType<{
         fixed: {
             table: string;
             headerRowCell: string;
+            bodyRowCell: string;
+            bodyRowSkeletonCell: string;
         };
         auto: {
             table: string;

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

@@ -63,6 +63,8 @@ declare const datagrid: tailwind_variants.TVReturnType<{
         fixed: {
             table: string;
             headerRowCell: string;
+            bodyRowCell: string;
+            bodyRowSkeletonCell: string;
         };
         auto: {
             table: string;
@@ -173,6 +175,8 @@ declare const datagrid: tailwind_variants.TVReturnType<{
         fixed: {
             table: string;
             headerRowCell: string;
+            bodyRowCell: string;
+            bodyRowSkeletonCell: string;
         };
         auto: {
             table: string;
@@ -283,6 +287,8 @@ declare const datagrid: tailwind_variants.TVReturnType<{
         fixed: {
             table: string;
             headerRowCell: string;
+            bodyRowCell: string;
+            bodyRowSkeletonCell: string;
         };
         auto: {
             table: string;

package/dist/components/data-grid.js

@@ -102,7 +102,9 @@ var datagrid = (0, import_tailwind_variants.tv)({
     width: {
       fixed: {
         table: "table-fixed",
-        headerRowCell: "w-[var(--size)]"
+        headerRowCell: "w-[var(--size)]",
+        bodyRowCell: "w-[var(--size)]",
+        bodyRowSkeletonCell: "w-[var(--size)]"
       },
       auto: {
         table: "table-auto"
@@ -122,9 +124,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-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"
+        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=left][data-last-col=left]]:shadow-[2px_0_5px_-2px_rgba(0,0,0,0.1)] [&[data-pinned=right]:last-child_div.cursor-col-resize:last-child]:opacity-0 [&[data-pinned=right][data-last-col=right]]:border-s [&[data-pinned=right][data-last-col=right]]:shadow-[-2px_0_5px_-2px_rgba(0,0,0,0.1)] [&[data-pinned][data-last-col]]:border-border data-[pinned]:bg-background",
+        bodyRowCell: "[&[data-pinned=left][data-last-col=left]]:border-e [&[data-pinned=left][data-last-col=left]]:shadow-[2px_0_5px_-2px_rgba(0,0,0,0.1)] [&[data-pinned=right][data-last-col=right]]:border-s [&[data-pinned=right][data-last-col=right]]:shadow-[-2px_0_5px_-2px_rgba(0,0,0,0.1)] [&[data-pinned][data-last-col]]:border-border data-[pinned]:bg-background",
+        bodyRowSkeletonCell: "[&[data-pinned=left][data-last-col=left]]:border-e [&[data-pinned=left][data-last-col=left]]:shadow-[2px_0_5px_-2px_rgba(0,0,0,0.1)] [&[data-pinned=right][data-last-col=right]]:border-s [&[data-pinned=right][data-last-col=right]]:shadow-[-2px_0_5px_-2px_rgba(0,0,0,0.1)] [&[data-pinned][data-last-col]]:border-border data-[pinned]:bg-background"
       },
       false: {}
     },
@@ -187,28 +189,28 @@ var datagrid = (0, import_tailwind_variants.tv)({
       columnsPinnable: true,
       headerColor: "default",
       className: {
-        headerRowCell: "data-pinned:bg-transparent!"
+        headerRowCell: "data-[pinned]:bg-transparent!"
       }
     },
     {
       columnsPinnable: true,
       headerColor: "muted",
       className: {
-        headerRowCell: "data-pinned:bg-muted/40!"
+        headerRowCell: "data-[pinned]:bg-muted/40!"
       }
     },
     {
       columnsPinnable: true,
       headerColor: "primary",
       className: {
-        headerRowCell: "data-pinned:bg-primary/10!"
+        headerRowCell: "data-[pinned]:bg-primary/10!"
       }
     },
     {
       columnsPinnable: true,
       headerColor: "accent",
       className: {
-        headerRowCell: "data-pinned:bg-accent!"
+        headerRowCell: "data-[pinned]:bg-accent!"
       }
     }
   ],

package/dist/components/data-grid.mjs

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

package/dist/components/index.d.mts

@@ -68,5 +68,6 @@ export { TextareaVariantProps, textarea } from './textarea.mjs';
 export { TocSlots, TocVariantProps, toc } from './toc.mjs';
 export { ToolbarVariantProps, toolbar } from './toolbar.mjs';
 export { TooltipVariants, tooltip } from './tooltip.mjs';
+export { VariableNodeVariants, variableNode } from './variable-node.mjs';
 import 'tailwind-variants';
 import 'tailwind-merge';

package/dist/components/index.d.ts

@@ -68,5 +68,6 @@ export { TextareaVariantProps, textarea } from './textarea.js';
 export { TocSlots, TocVariantProps, toc } from './toc.js';
 export { ToolbarVariantProps, toolbar } from './toolbar.js';
 export { TooltipVariants, tooltip } from './tooltip.js';
+export { VariableNodeVariants, variableNode } from './variable-node.js';
 import 'tailwind-variants';
 import 'tailwind-merge';

package/dist/components/index.js

@@ -92,7 +92,8 @@ __export(components_exports, {
   textarea: () => textarea,
   toc: () => toc,
   toolbar: () => toolbar,
-  tooltip: () => tooltip
+  tooltip: () => tooltip,
+  variableNode: () => variableNode
 });
 module.exports = __toCommonJS(components_exports);
 
@@ -1931,7 +1932,9 @@ var datagrid = (0, import_tailwind_variants21.tv)({
     width: {
       fixed: {
         table: "table-fixed",
-        headerRowCell: "w-[var(--size)]"
+        headerRowCell: "w-[var(--size)]",
+        bodyRowCell: "w-[var(--size)]",
+        bodyRowSkeletonCell: "w-[var(--size)]"
       },
       auto: {
         table: "table-auto"
@@ -1951,9 +1954,9 @@ var datagrid = (0, import_tailwind_variants21.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-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"
+        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=left][data-last-col=left]]:shadow-[2px_0_5px_-2px_rgba(0,0,0,0.1)] [&[data-pinned=right]:last-child_div.cursor-col-resize:last-child]:opacity-0 [&[data-pinned=right][data-last-col=right]]:border-s [&[data-pinned=right][data-last-col=right]]:shadow-[-2px_0_5px_-2px_rgba(0,0,0,0.1)] [&[data-pinned][data-last-col]]:border-border data-[pinned]:bg-background",
+        bodyRowCell: "[&[data-pinned=left][data-last-col=left]]:border-e [&[data-pinned=left][data-last-col=left]]:shadow-[2px_0_5px_-2px_rgba(0,0,0,0.1)] [&[data-pinned=right][data-last-col=right]]:border-s [&[data-pinned=right][data-last-col=right]]:shadow-[-2px_0_5px_-2px_rgba(0,0,0,0.1)] [&[data-pinned][data-last-col]]:border-border data-[pinned]:bg-background",
+        bodyRowSkeletonCell: "[&[data-pinned=left][data-last-col=left]]:border-e [&[data-pinned=left][data-last-col=left]]:shadow-[2px_0_5px_-2px_rgba(0,0,0,0.1)] [&[data-pinned=right][data-last-col=right]]:border-s [&[data-pinned=right][data-last-col=right]]:shadow-[-2px_0_5px_-2px_rgba(0,0,0,0.1)] [&[data-pinned][data-last-col]]:border-border data-[pinned]:bg-background"
       },
       false: {}
     },
@@ -2016,28 +2019,28 @@ var datagrid = (0, import_tailwind_variants21.tv)({
       columnsPinnable: true,
       headerColor: "default",
       className: {
-        headerRowCell: "data-pinned:bg-transparent!"
+        headerRowCell: "data-[pinned]:bg-transparent!"
       }
     },
     {
       columnsPinnable: true,
       headerColor: "muted",
       className: {
-        headerRowCell: "data-pinned:bg-muted/40!"
+        headerRowCell: "data-[pinned]:bg-muted/40!"
       }
     },
     {
       columnsPinnable: true,
       headerColor: "primary",
       className: {
-        headerRowCell: "data-pinned:bg-primary/10!"
+        headerRowCell: "data-[pinned]:bg-primary/10!"
       }
     },
     {
       columnsPinnable: true,
       headerColor: "accent",
       className: {
-        headerRowCell: "data-pinned:bg-accent!"
+        headerRowCell: "data-[pinned]:bg-accent!"
       }
     }
   ],
@@ -4668,6 +4671,47 @@ var tooltip = (0, import_tailwind_variants70.tv)({
     ]
   }
 });
+
+// src/components/variable-node.ts
+var import_tailwind_variants71 = require("tailwind-variants");
+var variableNode = (0, import_tailwind_variants71.tv)({
+  slots: {
+    wrapper: ["inline", "align-baseline"],
+    chip: [
+      "inline-flex items-center",
+      "px-1.5 py-0.5 mx-0.5",
+      "rounded-md",
+      "text-sm font-medium",
+      "cursor-default",
+      "select-none",
+      "whitespace-nowrap",
+      "align-baseline"
+    ],
+    bracket: ["text-primary/50", "font-mono", "text-xs"],
+    name: ["font-mono", "text-xs"],
+    value: ["font-normal"]
+  },
+  variants: {
+    resolved: {
+      true: {
+        chip: ["bg-muted", "border border-border", "text-foreground"],
+        value: ["text-foreground"]
+      },
+      false: {
+        chip: [
+          "bg-primary/10",
+          "border border-primary/20",
+          "text-primary-foreground"
+        ],
+        bracket: ["text-primary"],
+        name: ["text-primary"]
+      }
+    }
+  },
+  defaultVariants: {
+    resolved: false
+  }
+});
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   accordion,
@@ -4742,5 +4786,6 @@ var tooltip = (0, import_tailwind_variants70.tv)({
   textarea,
   toc,
   toolbar,
-  tooltip
+  tooltip,
+  variableNode
 });

package/dist/components/index.mjs

@@ -1,4 +1,7 @@
-import "../chunk-6RCNFPIU.mjs";
+import "../chunk-FZR3MK36.mjs";
+import {
+  variableNode
+} from "../chunk-EKOZ2ZVU.mjs";
 import {
   switchVariants
 } from "../chunk-WQ446TVH.mjs";
@@ -153,7 +156,7 @@ import {
 } from "../chunk-M4TXKRUU.mjs";
 import {
   datagrid
-} from "../chunk-Z5W4E7GM.mjs";
+} from "../chunk-BCQAC4TS.mjs";
 import {
   dataTable
 } from "../chunk-GNYTZGE5.mjs";
@@ -287,5 +290,6 @@ export {
   textarea,
   toc,
   toolbar,
-  tooltip
+  tooltip,
+  variableNode
 };

package/dist/components/variable-node.d.mts

@@ -0,0 +1,67 @@
+import * as tailwind_variants from 'tailwind-variants';
+import { VariantProps } from 'tailwind-variants';
+
+/**
+ * Variable Node styles for TipTap editor
+ *
+ * Renders template variables like {{companyName}} as inline chips.
+ * When resolved, shows the value in a different style.
+ */
+declare const variableNode: tailwind_variants.TVReturnType<{
+    resolved: {
+        true: {
+            chip: string[];
+            value: string[];
+        };
+        false: {
+            chip: string[];
+            bracket: string[];
+            name: string[];
+        };
+    };
+}, {
+    wrapper: string[];
+    chip: string[];
+    bracket: string[];
+    name: string[];
+    value: string[];
+}, undefined, {
+    resolved: {
+        true: {
+            chip: string[];
+            value: string[];
+        };
+        false: {
+            chip: string[];
+            bracket: string[];
+            name: string[];
+        };
+    };
+}, {
+    wrapper: string[];
+    chip: string[];
+    bracket: string[];
+    name: string[];
+    value: string[];
+}, tailwind_variants.TVReturnType<{
+    resolved: {
+        true: {
+            chip: string[];
+            value: string[];
+        };
+        false: {
+            chip: string[];
+            bracket: string[];
+            name: string[];
+        };
+    };
+}, {
+    wrapper: string[];
+    chip: string[];
+    bracket: string[];
+    name: string[];
+    value: string[];
+}, undefined, unknown, unknown, undefined>>;
+type VariableNodeVariants = VariantProps<typeof variableNode>;
+
+export { type VariableNodeVariants, variableNode };

package/dist/components/variable-node.d.ts

@@ -0,0 +1,67 @@
+import * as tailwind_variants from 'tailwind-variants';
+import { VariantProps } from 'tailwind-variants';
+
+/**
+ * Variable Node styles for TipTap editor
+ *
+ * Renders template variables like {{companyName}} as inline chips.
+ * When resolved, shows the value in a different style.
+ */
+declare const variableNode: tailwind_variants.TVReturnType<{
+    resolved: {
+        true: {
+            chip: string[];
+            value: string[];
+        };
+        false: {
+            chip: string[];
+            bracket: string[];
+            name: string[];
+        };
+    };
+}, {
+    wrapper: string[];
+    chip: string[];
+    bracket: string[];
+    name: string[];
+    value: string[];
+}, undefined, {
+    resolved: {
+        true: {
+            chip: string[];
+            value: string[];
+        };
+        false: {
+            chip: string[];
+            bracket: string[];
+            name: string[];
+        };
+    };
+}, {
+    wrapper: string[];
+    chip: string[];
+    bracket: string[];
+    name: string[];
+    value: string[];
+}, tailwind_variants.TVReturnType<{
+    resolved: {
+        true: {
+            chip: string[];
+            value: string[];
+        };
+        false: {
+            chip: string[];
+            bracket: string[];
+            name: string[];
+        };
+    };
+}, {
+    wrapper: string[];
+    chip: string[];
+    bracket: string[];
+    name: string[];
+    value: string[];
+}, undefined, unknown, unknown, undefined>>;
+type VariableNodeVariants = VariantProps<typeof variableNode>;
+
+export { type VariableNodeVariants, variableNode };

package/dist/components/variable-node.js

@@ -0,0 +1,68 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/variable-node.ts
+var variable_node_exports = {};
+__export(variable_node_exports, {
+  variableNode: () => variableNode
+});
+module.exports = __toCommonJS(variable_node_exports);
+var import_tailwind_variants = require("tailwind-variants");
+var variableNode = (0, import_tailwind_variants.tv)({
+  slots: {
+    wrapper: ["inline", "align-baseline"],
+    chip: [
+      "inline-flex items-center",
+      "px-1.5 py-0.5 mx-0.5",
+      "rounded-md",
+      "text-sm font-medium",
+      "cursor-default",
+      "select-none",
+      "whitespace-nowrap",
+      "align-baseline"
+    ],
+    bracket: ["text-primary/50", "font-mono", "text-xs"],
+    name: ["font-mono", "text-xs"],
+    value: ["font-normal"]
+  },
+  variants: {
+    resolved: {
+      true: {
+        chip: ["bg-muted", "border border-border", "text-foreground"],
+        value: ["text-foreground"]
+      },
+      false: {
+        chip: [
+          "bg-primary/10",
+          "border border-primary/20",
+          "text-primary-foreground"
+        ],
+        bracket: ["text-primary"],
+        name: ["text-primary"]
+      }
+    }
+  },
+  defaultVariants: {
+    resolved: false
+  }
+});
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  variableNode
+});

package/dist/components/variable-node.mjs

@@ -0,0 +1,6 @@
+import {
+  variableNode
+} from "../chunk-EKOZ2ZVU.mjs";
+export {
+  variableNode
+};

package/dist/index.d.mts

@@ -69,5 +69,6 @@ export { TextareaVariantProps, textarea } from './components/textarea.mjs';
 export { TocSlots, TocVariantProps, toc } from './components/toc.mjs';
 export { ToolbarVariantProps, toolbar } from './components/toolbar.mjs';
 export { TooltipVariants, tooltip } from './components/tooltip.mjs';
+export { VariableNodeVariants, variableNode } from './components/variable-node.mjs';
 export { SlotsToClasses } from './utils/types.mjs';
 import 'tailwind-merge';

package/dist/index.d.ts

@@ -69,5 +69,6 @@ export { TextareaVariantProps, textarea } from './components/textarea.js';
 export { TocSlots, TocVariantProps, toc } from './components/toc.js';
 export { ToolbarVariantProps, toolbar } from './components/toolbar.js';
 export { TooltipVariants, tooltip } from './components/tooltip.js';
+export { VariableNodeVariants, variableNode } from './components/variable-node.js';
 export { SlotsToClasses } from './utils/types.js';
 import 'tailwind-merge';

package/dist/index.js

@@ -92,7 +92,8 @@ __export(index_exports, {
   textarea: () => textarea,
   toc: () => toc,
   toolbar: () => toolbar,
-  tooltip: () => tooltip
+  tooltip: () => tooltip,
+  variableNode: () => variableNode
 });
 module.exports = __toCommonJS(index_exports);
 
@@ -1931,7 +1932,9 @@ var datagrid = (0, import_tailwind_variants21.tv)({
     width: {
       fixed: {
         table: "table-fixed",
-        headerRowCell: "w-[var(--size)]"
+        headerRowCell: "w-[var(--size)]",
+        bodyRowCell: "w-[var(--size)]",
+        bodyRowSkeletonCell: "w-[var(--size)]"
       },
       auto: {
         table: "table-auto"
@@ -1951,9 +1954,9 @@ var datagrid = (0, import_tailwind_variants21.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-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"
+        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=left][data-last-col=left]]:shadow-[2px_0_5px_-2px_rgba(0,0,0,0.1)] [&[data-pinned=right]:last-child_div.cursor-col-resize:last-child]:opacity-0 [&[data-pinned=right][data-last-col=right]]:border-s [&[data-pinned=right][data-last-col=right]]:shadow-[-2px_0_5px_-2px_rgba(0,0,0,0.1)] [&[data-pinned][data-last-col]]:border-border data-[pinned]:bg-background",
+        bodyRowCell: "[&[data-pinned=left][data-last-col=left]]:border-e [&[data-pinned=left][data-last-col=left]]:shadow-[2px_0_5px_-2px_rgba(0,0,0,0.1)] [&[data-pinned=right][data-last-col=right]]:border-s [&[data-pinned=right][data-last-col=right]]:shadow-[-2px_0_5px_-2px_rgba(0,0,0,0.1)] [&[data-pinned][data-last-col]]:border-border data-[pinned]:bg-background",
+        bodyRowSkeletonCell: "[&[data-pinned=left][data-last-col=left]]:border-e [&[data-pinned=left][data-last-col=left]]:shadow-[2px_0_5px_-2px_rgba(0,0,0,0.1)] [&[data-pinned=right][data-last-col=right]]:border-s [&[data-pinned=right][data-last-col=right]]:shadow-[-2px_0_5px_-2px_rgba(0,0,0,0.1)] [&[data-pinned][data-last-col]]:border-border data-[pinned]:bg-background"
       },
       false: {}
     },
@@ -2016,28 +2019,28 @@ var datagrid = (0, import_tailwind_variants21.tv)({
       columnsPinnable: true,
       headerColor: "default",
       className: {
-        headerRowCell: "data-pinned:bg-transparent!"
+        headerRowCell: "data-[pinned]:bg-transparent!"
       }
     },
     {
       columnsPinnable: true,
       headerColor: "muted",
       className: {
-        headerRowCell: "data-pinned:bg-muted/40!"
+        headerRowCell: "data-[pinned]:bg-muted/40!"
       }
     },
     {
       columnsPinnable: true,
       headerColor: "primary",
       className: {
-        headerRowCell: "data-pinned:bg-primary/10!"
+        headerRowCell: "data-[pinned]:bg-primary/10!"
       }
     },
     {
       columnsPinnable: true,
       headerColor: "accent",
       className: {
-        headerRowCell: "data-pinned:bg-accent!"
+        headerRowCell: "data-[pinned]:bg-accent!"
       }
     }
   ],
@@ -4668,6 +4671,47 @@ var tooltip = (0, import_tailwind_variants70.tv)({
     ]
   }
 });
+
+// src/components/variable-node.ts
+var import_tailwind_variants71 = require("tailwind-variants");
+var variableNode = (0, import_tailwind_variants71.tv)({
+  slots: {
+    wrapper: ["inline", "align-baseline"],
+    chip: [
+      "inline-flex items-center",
+      "px-1.5 py-0.5 mx-0.5",
+      "rounded-md",
+      "text-sm font-medium",
+      "cursor-default",
+      "select-none",
+      "whitespace-nowrap",
+      "align-baseline"
+    ],
+    bracket: ["text-primary/50", "font-mono", "text-xs"],
+    name: ["font-mono", "text-xs"],
+    value: ["font-normal"]
+  },
+  variants: {
+    resolved: {
+      true: {
+        chip: ["bg-muted", "border border-border", "text-foreground"],
+        value: ["text-foreground"]
+      },
+      false: {
+        chip: [
+          "bg-primary/10",
+          "border border-primary/20",
+          "text-primary-foreground"
+        ],
+        bracket: ["text-primary"],
+        name: ["text-primary"]
+      }
+    }
+  },
+  defaultVariants: {
+    resolved: false
+  }
+});
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   accordion,
@@ -4742,5 +4786,6 @@ var tooltip = (0, import_tailwind_variants70.tv)({
   textarea,
   toc,
   toolbar,
-  tooltip
+  tooltip,
+  variableNode
 });

package/dist/index.mjs

@@ -1,5 +1,8 @@
 import "./chunk-XSN6P5JL.mjs";
-import "./chunk-6RCNFPIU.mjs";
+import "./chunk-FZR3MK36.mjs";
+import {
+  variableNode
+} from "./chunk-EKOZ2ZVU.mjs";
 import {
   switchVariants
 } from "./chunk-WQ446TVH.mjs";
@@ -154,7 +157,7 @@ import {
 } from "./chunk-M4TXKRUU.mjs";
 import {
   datagrid
-} from "./chunk-Z5W4E7GM.mjs";
+} from "./chunk-BCQAC4TS.mjs";
 import {
   dataTable
 } from "./chunk-GNYTZGE5.mjs";
@@ -288,5 +291,6 @@ export {
   textarea,
   toc,
   toolbar,
-  tooltip
+  tooltip,
+  variableNode
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kopexa/theme",
-  "version": "17.12.0",
+  "version": "17.13.1",
   "description": "The default theme for Kopexa components",
   "keywords": [
     "theme",
@@ -66,7 +66,7 @@
     "tailwind-merge": "3.4.0",
     "tailwind-variants": "^3.2.2",
     "tw-animate-css": "^1.4.0",
-    "@kopexa/shared-utils": "17.0.24"
+    "@kopexa/shared-utils": "17.0.26"
   },
   "peerDependencies": {
     "tailwindcss": ">=4.0.0"