@nurix/ui-component-library 1.1.3-stage.105 → 1.1.3-stage.107

package/dist/index.js

@@ -8670,7 +8670,7 @@ function hexToHslChannels(hex) {
   const lRound = Math.round(clamp01(l2) * 100);
   return `${hRound} ${sRound}% ${lRound}%`;
 }
-var UI_TO_CSS_VAR = {
+var UI_COLOR_KEY_TO_CSS_VAR = {
   background: "--background",
   foreground: "--foreground",
   border: "--border",
@@ -8716,7 +8716,7 @@ function themeJsonToCssVars(theme, mode) {
   var _a6, _b5, _c, _d, _e2;
   const ui = (_b5 = (_a6 = theme.uIColors) == null ? void 0 : _a6[mode]) != null ? _b5 : {};
   const out = {};
-  for (const [uiKey, cssVar] of Object.entries(UI_TO_CSS_VAR)) {
+  for (const [uiKey, cssVar] of Object.entries(UI_COLOR_KEY_TO_CSS_VAR)) {
     const val = ui[uiKey];
     if (!val) continue;
     if ([
@@ -9596,7 +9596,8 @@ var React25 = __toESM(require("react"));
 
 // src/list-card/variables.ts
 var LIST_TOKENS = {
-  base: "overflow-hidden transition-colors cursor-pointer relative after:content-[''] after:absolute after:inset-0 after:pointer-events-none after:rounded-[inherit] after:bg-black/10 after:opacity-0 after:transition-opacity hover:after:opacity-100",
+  // Inset shadow follows border-radius (no ::after layer), so hover corners stay flush.
+  base: "overflow-hidden cursor-pointer shadow-none transition-shadow duration-150 ease-out hover:shadow-[inset_0_0_0_9999px_rgba(0,0,0,0.1)]",
   type: {
     card: "flex flex-col gap-4 items-start p-6",
     list: "flex gap-4 items-center py-4 px-6"
@@ -12996,7 +12997,7 @@ function JsonEditor({
     /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
       "div",
       {
-        className: `rounded-lg border border-border overflow-hidden bg-card shadow-sm ${hideHeader ? "rounded-t-none border-t-0" : ""}`,
+        className: `rounded-lg border border-border overflow-hidden bg-card ${hideHeader ? "rounded-t-none border-t-0" : ""}`,
         children: [
           !hideHeader && /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "flex items-center justify-between px-3 py-1.5 bg-muted border-b border-border", children: [
             /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "text-[10px] font-semibold text-muted-foreground tracking-widest uppercase select-none", children: label }),
@@ -13043,7 +13044,7 @@ function JsonEditor({
         confirmLabel: "Close",
         onConfirm: () => setIsOpen(false),
         className: "w-[85vw] max-w-[85vw] h-[85vh]",
-        children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "flex flex-col overflow-hidden h-full", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "flex-1 min-h-0 flex flex-col rounded-lg border border-border overflow-hidden bg-card shadow-sm", children: [
+        children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "flex flex-col overflow-hidden h-full", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "flex-1 min-h-0 flex flex-col rounded-lg border border-border overflow-hidden bg-card", children: [
           /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "flex-none flex items-center justify-between px-3 py-1.5 bg-muted border-b border-border", children: [
             /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "text-[10px] font-semibold text-muted-foreground tracking-widest uppercase select-none" }),
             /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "flex items-center gap-0.5", children: [
@@ -13142,11 +13143,12 @@ var KEY_VALUE_EDITOR_TOKENS = {
   headerCellActions: "flex flex-1 justify-end px-3 py-2 min-w-[77px]",
   headerLabel: "text-sm font-semibold leading-5 text-muted-foreground",
   iconGroup: "flex gap-0.5 items-center justify-center p-0.5 rounded-lg bg-background",
-  row: "flex items-center bg-background border-b border-border w-full",
-  rowCell: "flex h-12 items-center px-3 py-2 border-b border-border shrink-0",
+  // Single horizontal rule per row (borders on cells were stacking with row border and looked like a shadow band).
+  row: "flex items-center bg-background border-b border-border w-full last:border-b-0",
+  rowCell: "flex h-12 items-center px-3 py-2 shrink-0",
   rowCellKey: "w-[216px]",
-  rowCellValue: "flex gap-2 w-[180px] items-center px-3 py-2 border-b border-border shrink-0",
-  rowCellActions: "flex flex-1 justify-center items-center px-3 py-2 border-b border-border min-h-12",
+  rowCellValue: "flex gap-2 w-[180px] items-center px-3 py-2 shrink-0",
+  rowCellActions: "flex flex-1 justify-end items-center px-3 py-2 min-h-12",
   cellInput: "w-full bg-transparent text-sm font-normal leading-5 text-foreground placeholder:text-muted-foreground outline-none",
   deleteButton: "flex items-center justify-center size-4 rounded text-muted-foreground hover:text-foreground transition-opacity"
 };

package/dist/index.mjs

@@ -8582,7 +8582,7 @@ function hexToHslChannels(hex) {
   const lRound = Math.round(clamp01(l2) * 100);
   return `${hRound} ${sRound}% ${lRound}%`;
 }
-var UI_TO_CSS_VAR = {
+var UI_COLOR_KEY_TO_CSS_VAR = {
   background: "--background",
   foreground: "--foreground",
   border: "--border",
@@ -8628,7 +8628,7 @@ function themeJsonToCssVars(theme, mode) {
   var _a6, _b5, _c, _d, _e2;
   const ui = (_b5 = (_a6 = theme.uIColors) == null ? void 0 : _a6[mode]) != null ? _b5 : {};
   const out = {};
-  for (const [uiKey, cssVar] of Object.entries(UI_TO_CSS_VAR)) {
+  for (const [uiKey, cssVar] of Object.entries(UI_COLOR_KEY_TO_CSS_VAR)) {
     const val = ui[uiKey];
     if (!val) continue;
     if ([
@@ -9508,7 +9508,8 @@ import * as React25 from "react";
 
 // src/list-card/variables.ts
 var LIST_TOKENS = {
-  base: "overflow-hidden transition-colors cursor-pointer relative after:content-[''] after:absolute after:inset-0 after:pointer-events-none after:rounded-[inherit] after:bg-black/10 after:opacity-0 after:transition-opacity hover:after:opacity-100",
+  // Inset shadow follows border-radius (no ::after layer), so hover corners stay flush.
+  base: "overflow-hidden cursor-pointer shadow-none transition-shadow duration-150 ease-out hover:shadow-[inset_0_0_0_9999px_rgba(0,0,0,0.1)]",
   type: {
     card: "flex flex-col gap-4 items-start p-6",
     list: "flex gap-4 items-center py-4 px-6"
@@ -12916,7 +12917,7 @@ function JsonEditor({
     /* @__PURE__ */ jsxs24(
       "div",
       {
-        className: `rounded-lg border border-border overflow-hidden bg-card shadow-sm ${hideHeader ? "rounded-t-none border-t-0" : ""}`,
+        className: `rounded-lg border border-border overflow-hidden bg-card ${hideHeader ? "rounded-t-none border-t-0" : ""}`,
         children: [
           !hideHeader && /* @__PURE__ */ jsxs24("div", { className: "flex items-center justify-between px-3 py-1.5 bg-muted border-b border-border", children: [
             /* @__PURE__ */ jsx33("span", { className: "text-[10px] font-semibold text-muted-foreground tracking-widest uppercase select-none", children: label }),
@@ -12963,7 +12964,7 @@ function JsonEditor({
         confirmLabel: "Close",
         onConfirm: () => setIsOpen(false),
         className: "w-[85vw] max-w-[85vw] h-[85vh]",
-        children: /* @__PURE__ */ jsx33("div", { className: "flex flex-col overflow-hidden h-full", children: /* @__PURE__ */ jsxs24("div", { className: "flex-1 min-h-0 flex flex-col rounded-lg border border-border overflow-hidden bg-card shadow-sm", children: [
+        children: /* @__PURE__ */ jsx33("div", { className: "flex flex-col overflow-hidden h-full", children: /* @__PURE__ */ jsxs24("div", { className: "flex-1 min-h-0 flex flex-col rounded-lg border border-border overflow-hidden bg-card", children: [
           /* @__PURE__ */ jsxs24("div", { className: "flex-none flex items-center justify-between px-3 py-1.5 bg-muted border-b border-border", children: [
             /* @__PURE__ */ jsx33("span", { className: "text-[10px] font-semibold text-muted-foreground tracking-widest uppercase select-none" }),
             /* @__PURE__ */ jsxs24("div", { className: "flex items-center gap-0.5", children: [
@@ -13062,11 +13063,12 @@ var KEY_VALUE_EDITOR_TOKENS = {
   headerCellActions: "flex flex-1 justify-end px-3 py-2 min-w-[77px]",
   headerLabel: "text-sm font-semibold leading-5 text-muted-foreground",
   iconGroup: "flex gap-0.5 items-center justify-center p-0.5 rounded-lg bg-background",
-  row: "flex items-center bg-background border-b border-border w-full",
-  rowCell: "flex h-12 items-center px-3 py-2 border-b border-border shrink-0",
+  // Single horizontal rule per row (borders on cells were stacking with row border and looked like a shadow band).
+  row: "flex items-center bg-background border-b border-border w-full last:border-b-0",
+  rowCell: "flex h-12 items-center px-3 py-2 shrink-0",
   rowCellKey: "w-[216px]",
-  rowCellValue: "flex gap-2 w-[180px] items-center px-3 py-2 border-b border-border shrink-0",
-  rowCellActions: "flex flex-1 justify-center items-center px-3 py-2 border-b border-border min-h-12",
+  rowCellValue: "flex gap-2 w-[180px] items-center px-3 py-2 shrink-0",
+  rowCellActions: "flex flex-1 justify-end items-center px-3 py-2 min-h-12",
   cellInput: "w-full bg-transparent text-sm font-normal leading-5 text-foreground placeholder:text-muted-foreground outline-none",
   deleteButton: "flex items-center justify-center size-4 rounded text-muted-foreground hover:text-foreground transition-opacity"
 };

package/dist/styles.css

@@ -16,6 +16,7 @@
     --spacing: 0.25rem;
     --container-sm: 24rem;
     --container-md: 28rem;
+    --container-5xl: 64rem;
     --text-xs: 0.75rem;
     --text-xs--line-height: calc(1 / 0.75);
     --text-sm: 0.875rem;
@@ -35,6 +36,7 @@
     --font-weight-medium: 500;
     --font-weight-semibold: 600;
     --font-weight-bold: 700;
+    --tracking-tight: -0.025em;
     --tracking-normal: 0em;
     --tracking-widest: 0.1em;
     --leading-normal: 1.5;
@@ -340,6 +342,9 @@
   .lego-land .mt-1 {
     margin-top: calc(var(--spacing) * 1);
   }
+  .lego-land .mt-2 {
+    margin-top: calc(var(--spacing) * 2);
+  }
   .lego-land .mt-3 {
     margin-top: calc(var(--spacing) * 3);
   }
@@ -606,6 +611,9 @@
   .lego-land .w-12 {
     width: calc(var(--spacing) * 12);
   }
+  .lego-land .w-14 {
+    width: calc(var(--spacing) * 14);
+  }
   .lego-land .w-20 {
     width: calc(var(--spacing) * 20);
   }
@@ -686,6 +694,9 @@
   .lego-land .w-px {
     width: 1px;
   }
+  .lego-land .max-w-5xl {
+    max-width: var(--container-5xl);
+  }
   .lego-land .max-w-\[85vw\] {
     max-width: 85vw;
   }
@@ -898,6 +909,9 @@
   .lego-land .overflow-hidden {
     overflow: hidden;
   }
+  .lego-land .overflow-x-auto {
+    overflow-x: auto;
+  }
   .lego-land .overflow-y-auto {
     overflow-y: auto;
   }
@@ -1034,12 +1048,27 @@
   .lego-land .bg-\[var\(--\.\.\.\)\] {
     background-color: var(--...);
   }
+  .lego-land .bg-\[var\(--date-picker-circle\)\] {
+    background-color: var(--date-picker-circle);
+  }
   .lego-land .bg-\[var\(--filter-input\)\] {
     background-color: var(--filter-input);
   }
+  .lego-land .bg-\[var\(--hover\)\] {
+    background-color: var(--hover);
+  }
+  .lego-land .bg-\[var\(--hover-solid\)\] {
+    background-color: var(--hover-solid);
+  }
+  .lego-land .bg-\[var\(--primary-selected\)\] {
+    background-color: var(--primary-selected);
+  }
   .lego-land .bg-\[var\(--primary10\)\] {
     background-color: var(--primary10);
   }
+  .lego-land .bg-accent {
+    background-color: hsl(var(--accent));
+  }
   .lego-land .bg-accent\/50 {
     background-color: hsl(var(--accent));
     @supports (color: color-mix(in lab, red, red)) {
@@ -1088,6 +1117,9 @@
       background-color: color-mix(in oklab, hsl(var(--destructive)) 10%, transparent);
     }
   }
+  .lego-land .bg-disabled {
+    background-color: hsl(var(--disabled));
+  }
   .lego-land .bg-foreground\/10 {
     background-color: hsl(var(--foreground));
     @supports (color: color-mix(in lab, red, red)) {
@@ -1112,9 +1144,15 @@
   .lego-land .bg-neutral-300 {
     background-color: var(--color-neutral-300);
   }
+  .lego-land .bg-popover {
+    background-color: hsl(var(--popover));
+  }
   .lego-land .bg-primary {
     background-color: hsl(var(--primary));
   }
+  .lego-land .bg-primary-10 {
+    background-color: var(--primary10);
+  }
   .lego-land .bg-primary\/10 {
     background-color: hsl(var(--primary));
     @supports (color: color-mix(in lab, red, red)) {
@@ -1130,9 +1168,15 @@
   .lego-land .bg-success {
     background-color: hsl(var(--success));
   }
+  .lego-land .bg-switch-track {
+    background-color: hsl(var(--switch-track));
+  }
   .lego-land .bg-transparent {
     background-color: transparent;
   }
+  .lego-land .bg-warning {
+    background-color: hsl(var(--warning));
+  }
   .lego-land .fill-current {
     fill: currentcolor;
   }
@@ -1389,6 +1433,10 @@
     --tw-tracking: var(--tracking-normal);
     letter-spacing: var(--tracking-normal);
   }
+  .lego-land .tracking-tight {
+    --tw-tracking: var(--tracking-tight);
+    letter-spacing: var(--tracking-tight);
+  }
   .lego-land .tracking-widest {
     --tw-tracking: var(--tracking-widest);
     letter-spacing: var(--tracking-widest);
@@ -1423,6 +1471,9 @@
   .lego-land .text-badge-warning-fg {
     color: hsl(var(--badge-warning-fg));
   }
+  .lego-land .text-card-foreground {
+    color: hsl(var(--card-foreground));
+  }
   .lego-land .text-current {
     color: currentcolor;
   }
@@ -1444,6 +1495,9 @@
   .lego-land .text-muted-foreground {
     color: hsl(var(--muted-foreground));
   }
+  .lego-land .text-popover-foreground {
+    color: hsl(var(--popover-foreground));
+  }
   .lego-land .text-primary {
     color: hsl(var(--primary));
   }
@@ -1456,6 +1510,9 @@
   .lego-land .text-success {
     color: hsl(var(--success));
   }
+  .lego-land .text-warning-foreground {
+    color: hsl(var(--warning-foreground));
+  }
   .lego-land .text-white {
     color: var(--color-white);
   }
@@ -1513,6 +1570,9 @@
   .lego-land .ring-background {
     --tw-ring-color: hsl(var(--background));
   }
+  .lego-land .ring-ring {
+    --tw-ring-color: hsl(var(--ring));
+  }
   .lego-land .ring-offset-background {
     --tw-ring-offset-color: hsl(var(--background));
   }
@@ -1538,11 +1598,20 @@
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
     transition-duration: var(--tw-duration, var(--default-transition-duration));
   }
+  .lego-land .transition-shadow {
+    transition-property: box-shadow;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+  }
   .lego-land .transition-transform {
     transition-property: transform, translate, scale, rotate;
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
     transition-duration: var(--tw-duration, var(--default-transition-duration));
   }
+  .lego-land .duration-150 {
+    --tw-duration: 150ms;
+    transition-duration: 150ms;
+  }
   .lego-land .duration-200 {
     --tw-duration: 200ms;
     transition-duration: 200ms;
@@ -1775,6 +1844,14 @@
       }
     }
   }
+  .lego-land .hover\:shadow-\[inset_0_0_0_9999px_rgba\(0\,0\,0\,0\.1\)\] {
+    .lego-land &:hover {
+      @media (hover: hover) {
+        --tw-shadow: inset 0 0 0 9999px var(--tw-shadow-color, rgba(0,0,0,0.1));
+        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+      }
+    }
+  }
   .lego-land .hover\:\[background\:linear-gradient\(0deg\,var\(--hover\)_0\%\,var\(--hover\)_100\%\)\,var\(--filter-input\)\] {
     .lego-land &:hover {
       @media (hover: hover) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nurix/ui-component-library",
-  "version": "1.1.3-stage.105",
+  "version": "1.1.3-stage.107",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",