@pibit.ai/cure-design-system 0.5.0 → 0.5.2

package/dist/primitives/toggle/toggle.js

@@ -1,67 +1,72 @@
-import { jsx as i, jsxs as m, Fragment as u } from "react/jsx-runtime";
+import { jsx as d, jsxs as b, Fragment as c } from "react/jsx-runtime";
 import { Switch as h } from "react-aria-components";
-import { cx as o } from "../../utils/cn.js";
+import { cx as e } from "../../utils/cn.js";
 const f = ({
-  className: d,
-  isHovered: n,
-  isDisabled: e,
+  className: i,
+  isHovered: s,
+  isDisabled: o,
   isFocusVisible: a,
-  isSelected: t,
-  slim: r,
+  isSelected: r,
+  slim: t,
   size: g = "sm",
   disabledClasses: l
 }) => {
-  const s = {
+  const n = {
     default: {
       sm: {
         root: "h-5 w-9 p-0.5",
-        switch: o("size-4", t && "translate-x-4")
+        switch: e("size-4", r && "translate-x-4")
       },
       md: {
         root: "h-6 w-11 p-0.5",
-        switch: o("size-5", t && "translate-x-5")
+        switch: e("size-5", r && "translate-x-5")
       }
     },
     slim: {
       sm: {
         root: "h-4 w-8",
-        switch: o("size-4", t && "translate-x-4")
+        switch: e("size-4", r && "translate-x-4")
       },
       md: {
         root: "h-5 w-10",
-        switch: o("size-5", t && "translate-x-5")
+        switch: e("size-5", r && "translate-x-5")
       }
     }
-  }, p = r ? s.slim[g] : s.default[g];
-  return /* @__PURE__ */ i(
+  }, p = t ? n.slim[g] : n.default[g];
+  return /* @__PURE__ */ d(
     "div",
     {
-      className: o(
+      className: e(
         "cursor-pointer rounded-full bg-tertiary outline-focus-ring transition duration-150 ease-linear",
-        t && "bg-brand-solid",
-        t && n && "bg-brand-solid_hover",
-        e && "cursor-not-allowed bg-disabled",
+        r && "bg-brand-solid",
+        r && s && "bg-brand-solid_hover",
+        // Disabled track, frozen to platform-ui: it keeps its background and gains a
+        // border, rather than being filled with `bg-disabled`. A disabled toggle that
+        // is ON stays brand-tinted rather than going grey.
+        o && "cursor-not-allowed border border-disabled_subtle",
+        r && o && "bg-utility-brand-50",
         a && "outline-2 outline-offset-2",
-        r && "ring-1 ring-secondary ring-inset",
-        r && e && "bg-utility-gray-50",
-        r && t && "ring-transparent",
+        t && "ring-1 ring-secondary ring-inset",
+        t && o && "border border-disabled_subtle",
+        t && r && o && "bg-utility-brand-50",
+        t && r && "ring-transparent",
         p.root,
-        d,
+        i,
         l
       ),
-      children: /* @__PURE__ */ i(
+      children: /* @__PURE__ */ d(
         "div",
         {
           style: {
             transition: "transform 0.15s ease-in-out, translate 0.15s ease-in-out, border-color 0.1s linear, background-color 0.1s linear",
             boxShadow: "0px 4px 4px -2px rgba(64, 73, 104, 0.08), 0px 2px 12px 0px rgba(64, 73, 104, 0.06)"
           },
-          className: o(
+          className: e(
             "rounded-full bg-fg-white",
-            e && "bg-toggle-button-fg_disabled",
-            r && "border border-disabled_subtle",
-            r && t && "border-toggle-slim-border_pressed",
-            r && t && n && "border-toggle-slim-border_pressed-hover",
+            o && "bg-toggle-button-fg_disabled -translate-px",
+            t && "border border-disabled_subtle",
+            t && r && !o && "border-toggle-slim-border_pressed",
+            t && r && s && "border-toggle-slim-border_pressed-hover",
             p.switch
           )
         }
@@ -69,12 +74,12 @@ const f = ({
     }
   );
 }, w = ({
-  label: d,
-  hint: n,
-  className: e,
+  label: i,
+  hint: s,
+  className: o,
   size: a = "sm",
-  disabledClasses: t,
-  slim: r,
+  disabledClasses: r,
+  slim: t,
   ...g
 }) => {
   const l = {
@@ -91,38 +96,38 @@ const f = ({
       hint: "text-md"
     }
   };
-  return /* @__PURE__ */ i(
+  return /* @__PURE__ */ d(
     h,
     {
       ...g,
-      className: (s) => o(
+      className: (n) => e(
         "flex w-max items-start",
-        s.isDisabled && "cursor-not-allowed",
+        n.isDisabled && "cursor-not-allowed",
         l[a].root,
-        typeof e == "function" ? e(s) : e
+        typeof o == "function" ? o(n) : o
       ),
-      children: ({ isSelected: s, isDisabled: p, isFocusVisible: x, isHovered: c }) => /* @__PURE__ */ m(u, { children: [
-        /* @__PURE__ */ i(
+      children: ({ isSelected: n, isDisabled: p, isFocusVisible: x, isHovered: m }) => /* @__PURE__ */ b(c, { children: [
+        /* @__PURE__ */ d(
           f,
           {
-            slim: r,
+            slim: t,
             size: a,
-            isHovered: c,
+            isHovered: m,
             isDisabled: p,
             isFocusVisible: x,
-            isSelected: s,
-            className: r ? "mt-0.5" : "",
-            disabledClasses: t
+            isSelected: n,
+            className: t ? "mt-0.5" : "",
+            disabledClasses: r
           }
         ),
-        (d || n) && /* @__PURE__ */ m("div", { className: o("flex flex-col", l[a].textWrapper), children: [
-          d && /* @__PURE__ */ i("p", { className: o("text-secondary select-none", l[a].label), children: d }),
-          n && /* @__PURE__ */ i(
+        (i || s) && /* @__PURE__ */ b("div", { className: e("flex flex-col", l[a].textWrapper), children: [
+          i && /* @__PURE__ */ d("p", { className: e("text-secondary select-none", l[a].label), children: i }),
+          s && /* @__PURE__ */ d(
             "span",
             {
-              className: o("text-tertiary", l[a].hint),
-              onClick: (b) => b.stopPropagation(),
-              children: n
+              className: e("text-tertiary", l[a].hint),
+              onClick: (u) => u.stopPropagation(),
+              children: s
             }
           )
         ] })