@salilvnair/dui 1.0.6 → 1.0.7

package/dist/index.js

@@ -1038,49 +1038,54 @@ function Oy({
   items: a,
   accentColor: s,
   disabled: l = !1,
-  onPrimaryClick: c,
-  className: d = "",
-  align: u = "auto"
+  primaryDisabled: c = !1,
+  onPrimaryClick: d,
+  className: u = "",
+  align: p = "auto"
 }) {
-  const [p, f] = z(!1), g = $(null), h = s || "var(--color-primary)", b = He(r === "default" ? void 0 : r), m = b.height, y = b.fontSize, v = b.paddingX, w = i ? b.borderRadius : "0px", S = n === "primary", _ = n === "danger", k = S ? "var(--color-btn-primary-text, #fff)" : _ ? "var(--color-btn-danger-text, #fff)" : "var(--color-text-primary)", I = S ? h : _ ? "var(--color-error)" : n === "ghost" ? "transparent" : "var(--color-surface-hover)", E = S || _ || n === "ghost" ? "1px solid transparent" : "1px solid var(--color-surface-border)", N = S || _ ? "rgba(0,0,0,0.12)" : "var(--color-surface-active)";
+  const [f, g] = z(!1), h = $(null), b = s || "var(--color-primary)", m = He(r === "default" ? void 0 : r), y = m.height, v = m.fontSize, w = m.paddingX, S = i ? m.borderRadius : "0px", _ = l || c, k = n === "primary", I = n === "danger", E = k ? "var(--color-btn-primary-text, #fff)" : I ? "var(--color-btn-danger-text, #fff)" : "var(--color-text-primary)", N = k ? b : I ? "var(--color-error)" : n === "ghost" ? "transparent" : "var(--color-surface-hover)", C = k || I || n === "ghost" ? "1px solid transparent" : "1px solid var(--color-surface-border)", T = k || I ? "rgba(0,0,0,0.12)" : "var(--color-surface-active)";
   return /* @__PURE__ */ x(Se, { children: [
     /* @__PURE__ */ x(
       "div",
       {
-        ref: g,
-        className: `inline-flex items-center ${d}`,
+        ref: h,
+        className: `inline-flex items-center ${u}`,
         style: {
-          height: m,
-          borderRadius: w,
+          height: y,
+          borderRadius: S,
           overflow: "hidden",
           opacity: l ? 0.5 : 1,
-          background: I,
-          border: E,
-          color: k,
+          background: N,
+          border: C,
+          color: E,
           padding: 0,
           transition: "background 120ms",
-          "--dui-hover-btn-bg": N
+          "--dui-hover-btn-bg": T
         },
         children: [
           /* @__PURE__ */ x(
             "button",
             {
               type: "button",
-              disabled: l,
-              onClick: c,
+              disabled: _,
+              onClick: d,
               className: "dui_dropdown-button__label",
               style: {
                 height: "100%",
-                paddingLeft: v,
+                paddingLeft: w,
                 paddingRight: "8px",
                 display: "flex",
                 alignItems: "center",
-                gap: b.gap,
-                fontSize: y,
+                gap: m.gap,
+                fontSize: v,
                 fontWeight: 500,
                 border: "none",
                 color: "inherit",
-                cursor: l ? "default" : "pointer",
+                // The wrapper already dims when the whole control is disabled — dim just this
+                // half when it's the only part that's off, so the chevron still reads as live.
+                opacity: c && !l ? 0.5 : 1,
+                transition: "opacity 120ms",
+                cursor: _ ? "default" : "pointer",
                 fontFamily: "inherit"
               },
               children: [
@@ -1092,14 +1097,14 @@ function Oy({
           /* @__PURE__ */ o("div", { style: {
             width: "1px",
             height: "60%",
-            background: S || _ ? "rgba(255,255,255,.25)" : "var(--color-surface-border)"
+            background: k || I ? "rgba(255,255,255,.25)" : "var(--color-surface-border)"
           } }),
           /* @__PURE__ */ o(
             "button",
             {
               type: "button",
               disabled: l,
-              onClick: () => !l && f((C) => !C),
+              onClick: () => !l && g((W) => !W),
               className: "dui_dropdown-button__chevron",
               style: {
                 height: "100%",
@@ -1111,7 +1116,7 @@ function Oy({
                 color: "inherit",
                 cursor: l ? "default" : "pointer"
               },
-              children: /* @__PURE__ */ o(qe, { size: 10, style: { transition: "transform 140ms", transform: p ? "rotate(180deg)" : "rotate(0deg)" } })
+              children: /* @__PURE__ */ o(qe, { size: 10, style: { transition: "transform 140ms", transform: f ? "rotate(180deg)" : "rotate(0deg)" } })
             }
           )
         ]
@@ -1121,13 +1126,13 @@ function Oy({
       Fi,
       {
         items: a,
-        anchorEl: g.current,
-        open: p,
-        onClose: () => f(!1),
+        anchorEl: h.current,
+        open: f,
+        onClose: () => g(!1),
         rounded: i,
         matchAnchorWidth: !1,
         width: "md",
-        align: u
+        align: p
       }
     )
   ] });