@nurix/ui-component-library 1.1.4-stage.118 → 1.1.4-stage.119

package/dist/index.d.mts

@@ -1590,6 +1590,10 @@ interface DialogProps {
     showCancel?: boolean;
     onCancel?: () => void;
     onConfirm?: () => void;
+    /** @default "primary" */
+    confirmVariant?: ButtonVariant;
+    /** Disable the confirm button. */
+    confirmDisabled?: boolean;
     className?: string;
 }
 interface DialogIconProps {
@@ -1617,6 +1621,10 @@ interface DialogFooterProps {
     showCancel?: boolean;
     onCancel?: () => void;
     onConfirm?: () => void;
+    /** @default "primary" */
+    confirmVariant?: ButtonVariant;
+    /** Disable the confirm button. */
+    confirmDisabled?: boolean;
     showDivider?: boolean;
     className?: string;
 }

package/dist/index.d.ts

@@ -1590,6 +1590,10 @@ interface DialogProps {
     showCancel?: boolean;
     onCancel?: () => void;
     onConfirm?: () => void;
+    /** @default "primary" */
+    confirmVariant?: ButtonVariant;
+    /** Disable the confirm button. */
+    confirmDisabled?: boolean;
     className?: string;
 }
 interface DialogIconProps {
@@ -1617,6 +1621,10 @@ interface DialogFooterProps {
     showCancel?: boolean;
     onCancel?: () => void;
     onConfirm?: () => void;
+    /** @default "primary" */
+    confirmVariant?: ButtonVariant;
+    /** Disable the confirm button. */
+    confirmDisabled?: boolean;
     showDivider?: boolean;
     className?: string;
 }

package/dist/index.js

@@ -7313,8 +7313,11 @@ var INPUT_TOKENS = {
   fieldBase: "border border-token-input focus-within:border-token-brand disabled:pointer-events-none transition-colors",
   // Hover-only border darkening for the active (non-invalid, non-disabled)
   // state. Applied conditionally by the component so it does not override
-  // the destructive border on invalid fields.
-  fieldHover: "hover:border-token-input-hover",
+  // the destructive border on invalid fields. The `:not(:focus-within)`
+  // guard is required because Tailwind emits `:hover` rules AFTER
+  // `:focus-within` — without it, hovering a focused field would replace
+  // the brand border with the hover border.
+  fieldHover: "[&:not(:focus-within)]:hover:border-token-input-hover",
   // Borderless base — transparent resting border, brand border only on focus.
   // No hover/pressed overlay (these cells sit inside a larger interactive row).
   // Layout-shift safe: border width stays 1px across states (color-only swap).
@@ -7534,7 +7537,9 @@ var INPUT_GROUP_TOKENS = {
   fieldBase: "border border-token-light focus-within:border-token-brand disabled:pointer-events-none transition-colors",
   // Hover-only border darkening (Figma hover variant: #dadada). Applied
   // conditionally by the component so it does not override invalid/disabled.
-  fieldHover: "hover:border-token-input-hover",
+  // The `:not(:focus-within)` guard prevents the hover border from beating
+  // the brand focus border (Tailwind emits `:hover` after `:focus-within`).
+  fieldHover: "[&:not(:focus-within)]:hover:border-token-input-hover",
   fieldInvalid: "border-token-destructive focus-within:border-token-destructive",
   fieldDisabled: "border-token-xlight",
   // Inner input area
@@ -7544,7 +7549,7 @@ var INPUT_GROUP_TOKENS = {
   segmentDivider: "border-token-light",
   // Textarea
   textareaField: "w-full bg-token-white py-[10px] px-[var(--input-padding-horizontal,12px)] text-sm border border-token-light focus-visible:outline-none focus-visible:border-token-brand disabled:pointer-events-none shadow-none transition-colors",
-  textareaHover: "hover:border-token-input-hover",
+  textareaHover: "[&:not(:focus-within)]:hover:border-token-input-hover",
   textareaInvalid: "border-token-destructive focus-visible:border-token-destructive",
   textareaDisabled: "border-token-xlight",
   radius: {
@@ -7714,8 +7719,10 @@ var TEXTAREA_TOKENS = {
   // Focus ring uses outline (not ring) so it doesn't contribute to box size.
   fieldBase: "border border-token-input focus-within:border-token-brand disabled:pointer-events-none transition-colors",
   // Hover-only border darkening. Applied conditionally by the component so
-  // it does not override invalid/disabled borders.
-  fieldHover: "hover:border-token-input-hover",
+  // it does not override invalid/disabled borders. The `:not(:focus-within)`
+  // guard keeps the brand focus border visible when a focused field is
+  // hovered (Tailwind emits `:hover` after `:focus-within`).
+  fieldHover: "[&:not(:focus-within)]:hover:border-token-input-hover",
   fieldDisabled: "border-token-xlight",
   fieldInvalid: "border-token-destructive focus-within:border-token-destructive",
   // Textarea itself.
@@ -9269,11 +9276,11 @@ var SELECT_TOKENS = {
   // Main select container
   container: {
     // Figma: trigger uses rounded-xl (12px), border visible, padding px-12 py-10.
-    // Hover darkens the border to match Figma (#dadada) — `data-[state=open]`
-    // and `disabled:` use higher specificity (attribute / pseudo-class) so they
-    // override the hover border when the dropdown is open or the trigger is
-    // disabled.
-    default: "rounded-[var(--rounded-xl,12px)] border border-token-input flex items-center justify-between gap-2 transition-colors hover:border-token-input-hover disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:border-token-input focus-visible:outline-none data-[state=open]:border-token-brand",
+    // Hover darkens the border to match Figma (#dadada). The hover is scoped
+    // via `[&:not([data-state=open])]` so the brand border wins when the
+    // dropdown is open (Tailwind emits `data-[*]` selectors before `:hover`,
+    // so without the guard hover would override the open-state border).
+    default: "rounded-[var(--rounded-xl,12px)] border border-token-input flex items-center justify-between gap-2 transition-colors [&:not([data-state=open])]:hover:border-token-input-hover disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:border-token-input focus-visible:outline-none data-[state=open]:border-token-brand",
     // bg variants: default = input (grey), white = card
     bgDefault: "bg-token-white",
     bgWhite: "bg-token-white",
@@ -10542,7 +10549,7 @@ var DIALOG_TOKENS = {
   },
   header: {
     wrapper: "flex flex-col shrink-0",
-    row: "flex items-center gap-[10px] px-6 py-6",
+    row: "flex items-center gap-[10px] px-6 pt-6 pb-2",
     title: "flex-1 text-lg font-semibold leading-7 text-fg-black",
     closeBtn: "size-9 flex items-center justify-center rounded-md text-fg-black hover:bg-token-grey transition-colors cursor-pointer",
     divider: "h-px bg-border-token-light"
@@ -10577,6 +10584,8 @@ var Dialog = React29.forwardRef(
     showCancel = true,
     onCancel,
     onConfirm,
+    confirmVariant = "primary",
+    confirmDisabled = false,
     className
   }, ref) => {
     const close = React29.useCallback(() => onOpenChange(false), [onOpenChange]);
@@ -10649,9 +10658,10 @@ var Dialog = React29.forwardRef(
               /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
                 Button,
                 {
-                  variant: "primary",
+                  variant: confirmVariant,
                   button_border_radius: "rounded",
                   onClick: onConfirm,
+                  disabled: confirmDisabled,
                   children: confirmLabel
                 }
               )
@@ -10711,6 +10721,8 @@ var DialogFooter = React29.forwardRef(
     showCancel = true,
     onCancel,
     onConfirm,
+    confirmVariant = "primary",
+    confirmDisabled = false,
     showDivider = false,
     className
   }, ref) => {
@@ -10730,9 +10742,10 @@ var DialogFooter = React29.forwardRef(
         /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
           Button,
           {
-            variant: "primary",
+            variant: confirmVariant,
             button_border_radius: "rounded",
             onClick: onConfirm,
+            disabled: confirmDisabled,
             children: confirmLabel
           }
         )

package/dist/index.mjs

@@ -7209,8 +7209,11 @@ var INPUT_TOKENS = {
   fieldBase: "border border-token-input focus-within:border-token-brand disabled:pointer-events-none transition-colors",
   // Hover-only border darkening for the active (non-invalid, non-disabled)
   // state. Applied conditionally by the component so it does not override
-  // the destructive border on invalid fields.
-  fieldHover: "hover:border-token-input-hover",
+  // the destructive border on invalid fields. The `:not(:focus-within)`
+  // guard is required because Tailwind emits `:hover` rules AFTER
+  // `:focus-within` — without it, hovering a focused field would replace
+  // the brand border with the hover border.
+  fieldHover: "[&:not(:focus-within)]:hover:border-token-input-hover",
   // Borderless base — transparent resting border, brand border only on focus.
   // No hover/pressed overlay (these cells sit inside a larger interactive row).
   // Layout-shift safe: border width stays 1px across states (color-only swap).
@@ -7430,7 +7433,9 @@ var INPUT_GROUP_TOKENS = {
   fieldBase: "border border-token-light focus-within:border-token-brand disabled:pointer-events-none transition-colors",
   // Hover-only border darkening (Figma hover variant: #dadada). Applied
   // conditionally by the component so it does not override invalid/disabled.
-  fieldHover: "hover:border-token-input-hover",
+  // The `:not(:focus-within)` guard prevents the hover border from beating
+  // the brand focus border (Tailwind emits `:hover` after `:focus-within`).
+  fieldHover: "[&:not(:focus-within)]:hover:border-token-input-hover",
   fieldInvalid: "border-token-destructive focus-within:border-token-destructive",
   fieldDisabled: "border-token-xlight",
   // Inner input area
@@ -7440,7 +7445,7 @@ var INPUT_GROUP_TOKENS = {
   segmentDivider: "border-token-light",
   // Textarea
   textareaField: "w-full bg-token-white py-[10px] px-[var(--input-padding-horizontal,12px)] text-sm border border-token-light focus-visible:outline-none focus-visible:border-token-brand disabled:pointer-events-none shadow-none transition-colors",
-  textareaHover: "hover:border-token-input-hover",
+  textareaHover: "[&:not(:focus-within)]:hover:border-token-input-hover",
   textareaInvalid: "border-token-destructive focus-visible:border-token-destructive",
   textareaDisabled: "border-token-xlight",
   radius: {
@@ -7610,8 +7615,10 @@ var TEXTAREA_TOKENS = {
   // Focus ring uses outline (not ring) so it doesn't contribute to box size.
   fieldBase: "border border-token-input focus-within:border-token-brand disabled:pointer-events-none transition-colors",
   // Hover-only border darkening. Applied conditionally by the component so
-  // it does not override invalid/disabled borders.
-  fieldHover: "hover:border-token-input-hover",
+  // it does not override invalid/disabled borders. The `:not(:focus-within)`
+  // guard keeps the brand focus border visible when a focused field is
+  // hovered (Tailwind emits `:hover` after `:focus-within`).
+  fieldHover: "[&:not(:focus-within)]:hover:border-token-input-hover",
   fieldDisabled: "border-token-xlight",
   fieldInvalid: "border-token-destructive focus-within:border-token-destructive",
   // Textarea itself.
@@ -9165,11 +9172,11 @@ var SELECT_TOKENS = {
   // Main select container
   container: {
     // Figma: trigger uses rounded-xl (12px), border visible, padding px-12 py-10.
-    // Hover darkens the border to match Figma (#dadada) — `data-[state=open]`
-    // and `disabled:` use higher specificity (attribute / pseudo-class) so they
-    // override the hover border when the dropdown is open or the trigger is
-    // disabled.
-    default: "rounded-[var(--rounded-xl,12px)] border border-token-input flex items-center justify-between gap-2 transition-colors hover:border-token-input-hover disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:border-token-input focus-visible:outline-none data-[state=open]:border-token-brand",
+    // Hover darkens the border to match Figma (#dadada). The hover is scoped
+    // via `[&:not([data-state=open])]` so the brand border wins when the
+    // dropdown is open (Tailwind emits `data-[*]` selectors before `:hover`,
+    // so without the guard hover would override the open-state border).
+    default: "rounded-[var(--rounded-xl,12px)] border border-token-input flex items-center justify-between gap-2 transition-colors [&:not([data-state=open])]:hover:border-token-input-hover disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:border-token-input focus-visible:outline-none data-[state=open]:border-token-brand",
     // bg variants: default = input (grey), white = card
     bgDefault: "bg-token-white",
     bgWhite: "bg-token-white",
@@ -10438,7 +10445,7 @@ var DIALOG_TOKENS = {
   },
   header: {
     wrapper: "flex flex-col shrink-0",
-    row: "flex items-center gap-[10px] px-6 py-6",
+    row: "flex items-center gap-[10px] px-6 pt-6 pb-2",
     title: "flex-1 text-lg font-semibold leading-7 text-fg-black",
     closeBtn: "size-9 flex items-center justify-center rounded-md text-fg-black hover:bg-token-grey transition-colors cursor-pointer",
     divider: "h-px bg-border-token-light"
@@ -10473,6 +10480,8 @@ var Dialog = React29.forwardRef(
     showCancel = true,
     onCancel,
     onConfirm,
+    confirmVariant = "primary",
+    confirmDisabled = false,
     className
   }, ref) => {
     const close = React29.useCallback(() => onOpenChange(false), [onOpenChange]);
@@ -10545,9 +10554,10 @@ var Dialog = React29.forwardRef(
               /* @__PURE__ */ jsx25(
                 Button,
                 {
-                  variant: "primary",
+                  variant: confirmVariant,
                   button_border_radius: "rounded",
                   onClick: onConfirm,
+                  disabled: confirmDisabled,
                   children: confirmLabel
                 }
               )
@@ -10607,6 +10617,8 @@ var DialogFooter = React29.forwardRef(
     showCancel = true,
     onCancel,
     onConfirm,
+    confirmVariant = "primary",
+    confirmDisabled = false,
     showDivider = false,
     className
   }, ref) => {
@@ -10626,9 +10638,10 @@ var DialogFooter = React29.forwardRef(
         /* @__PURE__ */ jsx25(
           Button,
           {
-            variant: "primary",
+            variant: confirmVariant,
             button_border_radius: "rounded",
             onClick: onConfirm,
+            disabled: confirmDisabled,
             children: confirmLabel
           }
         )

package/dist/styles.css

@@ -1511,9 +1511,6 @@
   .lego-land .py-4 {
     padding-block: calc(var(--spacing) * 4);
   }
-  .lego-land .py-6 {
-    padding-block: calc(var(--spacing) * 6);
-  }
   .lego-land .py-8 {
     padding-block: calc(var(--spacing) * 8);
   }
@@ -1538,6 +1535,9 @@
   .lego-land .pt-4 {
     padding-top: calc(var(--spacing) * 4);
   }
+  .lego-land .pt-6 {
+    padding-top: calc(var(--spacing) * 6);
+  }
   .lego-land .pr-2 {
     padding-right: calc(var(--spacing) * 2);
   }
@@ -2296,13 +2296,6 @@
       }
     }
   }
-  .lego-land .hover\:border-token-input-hover {
-    .lego-land &:hover {
-      @media (hover: hover) {
-        border-color: hsl(var(--border-input-hover));
-      }
-    }
-  }
   .lego-land .hover\:border-token-light {
     .lego-land &:hover {
       @media (hover: hover) {
@@ -2825,6 +2818,24 @@
               appearance: none;
     }
   }
+  .lego-land .\[\&\:not\(\:focus-within\)\]\:hover\:border-token-input-hover {
+    .lego-land &:not(:focus-within) {
+      .lego-land &:hover {
+        @media (hover: hover) {
+          border-color: hsl(var(--border-input-hover));
+        }
+      }
+    }
+  }
+  .lego-land .\[\&\:not\(\[data-state\=open\]\)\]\:hover\:border-token-input-hover {
+    .lego-land &:not([data-state=open]) {
+      .lego-land &:hover {
+        @media (hover: hover) {
+          border-color: hsl(var(--border-input-hover));
+        }
+      }
+    }
+  }
   .lego-land .\[\&\>\*\]\:relative {
     .lego-land &>* {
       position: relative;

package/package.json

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