@pibit.ai/cure-design-system 0.6.5 → 0.6.7

package/dist/primitives/checkbox/checkbox.js

@@ -1,49 +1,168 @@
-import { jsxs as s, jsx as e } from "react/jsx-runtime";
-import * as o from "@radix-ui/react-checkbox";
-import { cn as n } from "../../utils/cn.js";
-import { Icon as d } from "../icon/icon.js";
-function b({
-  label: t,
-  description: r,
-  checked: a,
-  className: c,
-  id: m,
-  ...l
-}) {
-  const i = m || `checkbox-${Math.random().toString(36).slice(2, 9)}`;
-  return /* @__PURE__ */ s("div", { className: n("flex items-start gap-2", c), children: [
-    /* @__PURE__ */ e(
-      o.Root,
-      {
-        id: i,
-        checked: a,
-        className: n(
-          "h-4 w-4 shrink-0 rounded border border-gray-300 bg-white",
-          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-600 focus-visible:ring-offset-2",
-          "disabled:cursor-not-allowed disabled:opacity-50",
-          "data-[state=checked]:bg-brand-600 data-[state=checked]:border-brand-600",
-          "data-[state=indeterminate]:bg-brand-600 data-[state=indeterminate]:border-brand-600",
-          // Ensure checkbox is vertically aligned with first line of text
-          "mt-0.5"
+import { jsx as n, jsxs as v, Fragment as E } from "react/jsx-runtime";
+import { Checkbox as P } from "react-aria-components";
+import { cx as e } from "../../utils/cn.js";
+function F() {
+  try {
+    return process.env.NODE_ENV !== "production";
+  } catch {
+    return !1;
+  }
+}
+const N = /* @__PURE__ */ new Set();
+function b(t, a) {
+  N.has(t) || !F() || (N.add(t), console.warn(`[cure-design-system] Checkbox: \`${t}\` is deprecated and will be removed; use \`${a}\`.`));
+}
+const B = ({
+  className: t,
+  isSelected: a,
+  isDisabled: d,
+  isIndeterminate: r,
+  size: i = "sm",
+  isFocusVisible: c = !1,
+  filled: o = !0,
+  svgDisabledClasses: h = "",
+  baseDisabledClasses: g = ""
+}) => {
+  const u = !!(a || r);
+  return /* @__PURE__ */ v(
+    "div",
+    {
+      className: e(
+        "relative flex size-4 shrink-0 cursor-pointer appearance-none items-center justify-center rounded bg-primary ring-1 ring-primary ring-inset",
+        i === "md" && "size-5 rounded-sm",
+        i === "sm" && "rounded-xs",
+        o && u && "bg-brand-solid ring-bg-brand-solid",
+        !o && u && "ring-utility-brand-600",
+        d && e("cursor-not-allowed bg-disabled_subtle ring-disabled", h),
+        c && "outline-2 outline-offset-2 outline-focus-ring",
+        t
+      ),
+      children: [
+        /* @__PURE__ */ n(
+          "svg",
+          {
+            "aria-hidden": "true",
+            viewBox: "0 0 14 14",
+            fill: "none",
+            className: e(
+              "pointer-events-none absolute h-3 w-2.5 opacity-0 transition-inherit-all",
+              i === "md" && "size-3.5",
+              r && "opacity-100",
+              o ? "text-fg-white" : "text-utility-brand-600",
+              d && "text-fg-disabled_subtle"
+            ),
+            children: /* @__PURE__ */ n("path", { d: "M2.91675 7H11.0834", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" })
+          }
         ),
-        ...l,
-        children: /* @__PURE__ */ e(o.Indicator, { className: "flex items-center justify-center text-white", children: a === "indeterminate" ? /* @__PURE__ */ e(d, { name: "Minus", size: 12 }) : /* @__PURE__ */ e(d, { name: "Check", size: 12 }) })
-      }
-    ),
-    (t || r) && /* @__PURE__ */ s("div", { className: "flex flex-col gap-0.5", children: [
-      t && /* @__PURE__ */ e(
-        "label",
-        {
-          htmlFor: i,
-          className: "text-sm font-medium text-gray-700 cursor-pointer",
-          children: t
-        }
+        /* @__PURE__ */ n(
+          "svg",
+          {
+            "aria-hidden": "true",
+            viewBox: "0 0 14 14",
+            fill: "none",
+            className: e(
+              "pointer-events-none absolute size-3 opacity-0 transition-inherit-all",
+              i === "md" && "size-3.5",
+              a && !r && "opacity-100",
+              o ? "text-fg-white" : "text-utility-brand-600",
+              d && e("text-fg-disabled_subtle", g)
+            ),
+            children: /* @__PURE__ */ n(
+              "path",
+              {
+                d: "M11.6666 3.5L5.24992 9.91667L2.33325 7",
+                stroke: "currentColor",
+                strokeWidth: "2",
+                strokeLinecap: "round",
+                strokeLinejoin: "round"
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+};
+B.displayName = "CheckboxBase";
+const H = ({
+  label: t,
+  hint: a,
+  "aria-label": d,
+  size: r = "sm",
+  className: i,
+  labelContainerClassName: c,
+  labelClasses: o,
+  filled: h = !0,
+  svgDisabledClasses: g,
+  baseDisabledClasses: u,
+  checked: y,
+  onCheckedChange: l,
+  description: w,
+  disabled: k,
+  // React Aria collections (Table, GridList) provide a checkbox context whose header row only has a
+  // `selection` slot, so an un-slotted checkbox there throws. Opt out of that context unless asked.
+  slot: j = null,
+  ...L
+}) => {
+  const W = d ?? (typeof t == "string" ? t : void 0), p = a ?? w, m = {};
+  y !== void 0 && (b("checked", "isSelected / isIndeterminate"), m.isSelected = y === !0, m.isIndeterminate = y === "indeterminate"), k !== void 0 && (b("disabled", "isDisabled"), m.isDisabled = k), l && b("onCheckedChange", "onChange"), w !== void 0 && b("description", "hint");
+  const { onChange: x } = L, _ = x || l ? (s) => {
+    x == null || x(s), l == null || l(s);
+  } : void 0, f = {
+    sm: {
+      root: "gap-2",
+      textWrapper: c,
+      label: e("text-xs font-medium", o),
+      hint: "text-[11px]"
+    },
+    md: {
+      root: "gap-3",
+      textWrapper: e("gap-0.5", c),
+      label: e("text-md font-medium", o),
+      hint: "text-md"
+    }
+  };
+  return /* @__PURE__ */ n(
+    P,
+    {
+      ...m,
+      ...L,
+      slot: j,
+      onChange: _,
+      "aria-label": W,
+      className: (s) => e(
+        // `relative` keeps React Aria's visually hidden input inside the label. Unpositioned, it is
+        // placed against the nearest positioned ancestor, and focusing it on click scrolls that ancestor.
+        "relative flex items-start",
+        s.isDisabled && "cursor-not-allowed",
+        f[r].root,
+        typeof i == "function" ? i(s) : i
       ),
-      r && /* @__PURE__ */ e("p", { className: "text-sm text-gray-500", children: r })
-    ] })
-  ] });
-}
-b.displayName = "Checkbox";
+      children: ({ isSelected: s, isIndeterminate: D, isDisabled: M, isFocusVisible: $ }) => /* @__PURE__ */ v(E, { children: [
+        /* @__PURE__ */ n(
+          B,
+          {
+            size: r,
+            isSelected: s,
+            isIndeterminate: D,
+            isDisabled: M,
+            isFocusVisible: $,
+            filled: h,
+            className: t || p ? "mt-0.5" : "",
+            baseDisabledClasses: u,
+            svgDisabledClasses: g
+          }
+        ),
+        (t || p) && /* @__PURE__ */ v("div", { className: e("inline-flex flex-col", f[r].textWrapper), children: [
+          t && /* @__PURE__ */ n("p", { className: e("text-secondary select-none", f[r].label), children: t }),
+          p && /* @__PURE__ */ n("span", { className: e("text-tertiary", f[r].hint), children: p })
+        ] })
+      ] })
+    }
+  );
+};
+H.displayName = "Checkbox";
 export {
-  b as Checkbox
+  H as Checkbox,
+  B as CheckboxBase
 };

package/dist/primitives/checkbox/index.d.ts

@@ -1,2 +1,2 @@
-export { Checkbox, type CheckboxProps } from './checkbox';
+export { Checkbox, CheckboxBase, type CheckboxProps, type CheckboxBaseProps } from './checkbox';
 //# sourceMappingURL=index.d.ts.map

package/dist/primitives/checkbox/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/primitives/checkbox/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,KAAK,aAAa,EAAE,MAAM,YAAY,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/primitives/checkbox/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,YAAY,EAAE,KAAK,aAAa,EAAE,KAAK,iBAAiB,EAAE,MAAM,YAAY,CAAC"}

package/dist/primitives/dropdown/dropdown.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dropdown.d.ts","sourceRoot":"","sources":["../../../src/primitives/dropdown/dropdown.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAG/C,OAAO,KAAK,EACV,WAAW,IAAI,eAAe,EAC9B,aAAa,IAAI,iBAAiB,EAClC,SAAS,IAAI,aAAa,EAC1B,YAAY,IAAI,gBAAgB,EAChC,cAAc,IAAI,kBAAkB,EACrC,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EAML,WAAW,IAAI,eAAe,EAG/B,MAAM,uBAAuB,CAAC;AAG/B,UAAU,iBAAkB,SAAQ,iBAAiB;IACnD,6CAA6C;IAC7C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,8DAA8D;IAC9D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,kDAAkD;IAClD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,4DAA4D;IAC5D,IAAI,CAAC,EAAE,EAAE,CAAC;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IAClC,0CAA0C;IAC1C,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,4BAA4B;IAC5B,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;CACpB;AAgFD,UAAU,iBAAiB,CAAC,CAAC,SAAS,MAAM,CAAE,SAAQ,aAAa,CAAC,CAAC,CAAC;CAAG;AAoBzE,UAAU,oBAAqB,SAAQ,gBAAgB;CAAG;AAY1D;;;;;GAKG;AACH,eAAO,MAAM,sBAAsB,GAAI,SAAS,OAAO,KAAG,OAGvD,CAAC;AAwEJ,eAAO,MAAM,QAAQ;;0DAnElB,oBAAoB;WA5CD,CAAC,SAAS,MAAM,SAAS,iBAAiB,CAAC,CAAC,CAAC;;;yFAvEhE,iBAAiB;uBAqJc,kBAAkB;wBAU3C,eAAe,GAAG,aAAa,CAAC,iBAAiB,CAAC;CAgC1D,CAAC;AAEF,YAAY,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,oBAAoB,EAAE,CAAC"}
+{"version":3,"file":"dropdown.d.ts","sourceRoot":"","sources":["../../../src/primitives/dropdown/dropdown.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAG/C,OAAO,KAAK,EACV,WAAW,IAAI,eAAe,EAC9B,aAAa,IAAI,iBAAiB,EAClC,SAAS,IAAI,aAAa,EAC1B,YAAY,IAAI,gBAAgB,EAChC,cAAc,IAAI,kBAAkB,EACrC,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EAML,WAAW,IAAI,eAAe,EAG/B,MAAM,uBAAuB,CAAC;AAG/B,UAAU,iBAAkB,SAAQ,iBAAiB;IACnD,6CAA6C;IAC7C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,8DAA8D;IAC9D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,kDAAkD;IAClD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,4DAA4D;IAC5D,IAAI,CAAC,EAAE,EAAE,CAAC;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IAClC,0CAA0C;IAC1C,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,4BAA4B;IAC5B,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;CACpB;AAgFD,UAAU,iBAAiB,CAAC,CAAC,SAAS,MAAM,CAAE,SAAQ,aAAa,CAAC,CAAC,CAAC;CAAG;AAoBzE,UAAU,oBAAqB,SAAQ,gBAAgB;CAAG;AAY1D;;;;;GAKG;AACH,eAAO,MAAM,sBAAsB,GAAI,SAAS,OAAO,KAAG,OAGvD,CAAC;AA0EJ,eAAO,MAAM,QAAQ;;0DArElB,oBAAoB;WA5CD,CAAC,SAAS,MAAM,SAAS,iBAAiB,CAAC,CAAC,CAAC;;;yFAvEhE,iBAAiB;uBAuJc,kBAAkB;wBAU3C,eAAe,GAAG,aAAa,CAAC,iBAAiB,CAAC;CAgC1D,CAAC;AAEF,YAAY,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,oBAAoB,EAAE,CAAC"}

package/dist/primitives/dropdown/dropdown.js

@@ -2,12 +2,12 @@ import { jsx as n, jsxs as d } from "react/jsx-runtime";
 import { useCallback as f } from "react";
 import { DotsVertical as x, Check as g } from "@untitledui/icons";
 import { Header as p, MenuSection as y, MenuTrigger as N, Button as b, Separator as h, MenuItem as c, Menu as v, Popover as w } from "react-aria-components";
-import { cx as r } from "../../utils/cn.js";
+import { cx as a } from "../../utils/cn.js";
 const D = ({
   label: e,
   children: t,
   addon: s,
-  icon: a,
+  icon: r,
   unstyled: m,
   isSelected: l = !1,
   size: u = "sm",
@@ -16,7 +16,7 @@ const D = ({
   c,
   {
     ...i,
-    className: (o) => r(
+    className: (o) => a(
       "group block cursor-pointer px-1.5 py-px outline-hidden",
       o.isDisabled && "cursor-not-allowed",
       typeof i.className == "function" ? i.className(o) : i.className
@@ -24,7 +24,7 @@ const D = ({
     children: (o) => /* @__PURE__ */ d(
       "div",
       {
-        className: r(
+        className: a(
           "relative flex items-center rounded-md px-2.5 py-2 outline-focus-ring transition duration-100 ease-linear",
           !o.isDisabled && !l && "group-hover:bg-primary_hover",
           o.isFocused && "bg-primary_hover",
@@ -32,11 +32,11 @@ const D = ({
           l && "bg-utility-brand-25"
         ),
         children: [
-          a && /* @__PURE__ */ n(
-            a,
+          r && /* @__PURE__ */ n(
+            r,
             {
               "aria-hidden": "true",
-              className: r(
+              className: a(
                 "mr-2 size-4 shrink-0 stroke-[2.25px]",
                 o.isDisabled ? "text-fg-disabled" : "text-fg-quaternary"
               )
@@ -45,7 +45,7 @@ const D = ({
           /* @__PURE__ */ n(
             "span",
             {
-              className: r(
+              className: a(
                 "grow truncate text-sm font-medium",
                 o.isDisabled ? "text-disabled" : "text-secondary",
                 o.isFocused && "text-secondary_hover",
@@ -58,7 +58,7 @@ const D = ({
           s && /* @__PURE__ */ n(
             "span",
             {
-              className: r(
+              className: a(
                 "ml-3 shrink-0 rounded px-1 py-px text-xs font-medium ring-1 ring-secondary ring-inset",
                 o.isDisabled ? "text-disabled" : "text-quaternary"
               ),
@@ -75,7 +75,7 @@ const D = ({
     disallowEmptySelection: !0,
     selectionMode: "single",
     ...e,
-    className: (t) => r(
+    className: (t) => a(
       "h-min overflow-y-auto py-1 outline-hidden select-none",
       typeof e.className == "function" ? e.className(t) : e.className
     )
@@ -94,7 +94,7 @@ const D = ({
   ...t
 }) => {
   const s = f(
-    (a) => S(a) ? !1 : (e == null ? void 0 : e(a)) ?? !0,
+    (r) => S(r) ? !1 : (e == null ? void 0 : e(r)) ?? !0,
     [e]
   );
   return /* @__PURE__ */ n(
@@ -103,11 +103,11 @@ const D = ({
       placement: "bottom left",
       ...t,
       shouldCloseOnInteractOutside: s,
-      className: (a) => r(
-        "max-h-max! w-62 origin-(--trigger-anchor-point) overflow-auto rounded-lg bg-primary shadow-lg ring-1 ring-secondary_alt will-change-transform",
-        a.isEntering && "duration-150 ease-out animate-in fade-in placement-right:slide-in-from-left-0.5 placement-top:slide-in-from-bottom-0.5 placement-bottom:slide-in-from-top-0.5",
-        a.isExiting && "duration-100 ease-in animate-out fade-out placement-right:slide-out-to-left-0.5 placement-top:slide-out-to-bottom-0.5 placement-bottom:slide-out-to-top-0.5",
-        typeof t.className == "function" ? t.className(a) : t.className
+      className: (r) => a(
+        "w-62 origin-(--trigger-anchor-point) overflow-auto rounded-lg bg-primary shadow-lg ring-1 ring-secondary_alt will-change-transform",
+        r.isEntering && "duration-150 ease-out animate-in fade-in placement-right:slide-in-from-left-0.5 placement-top:slide-in-from-bottom-0.5 placement-bottom:slide-in-from-top-0.5",
+        r.isExiting && "duration-100 ease-in animate-out fade-out placement-right:slide-out-to-left-0.5 placement-top:slide-out-to-bottom-0.5 placement-bottom:slide-out-to-top-0.5",
+        typeof t.className == "function" ? t.className(r) : t.className
       ),
       children: t.children
     }
@@ -116,14 +116,14 @@ const D = ({
   h,
   {
     ...e,
-    className: r("my-1 h-px w-full bg-secondary", e.className)
+    className: a("my-1 h-px w-full bg-secondary", e.className)
   }
 ), P = (e) => /* @__PURE__ */ n(
   b,
   {
     ...e,
     "aria-label": "Open menu",
-    className: (t) => r(
+    className: (t) => a(
       "cursor-pointer rounded-md text-fg-quaternary transition duration-100 ease-linear",
       (t.isPressed || t.isHovered) && "text-fg-quaternary_hover",
       (t.isPressed || t.isFocusVisible) && "outline-2 outline-offset-2",

package/dist/primitives/toggle/toggle.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"toggle.d.ts","sourceRoot":"","sources":["../../../src/primitives/toggle/toggle.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,WAAW,IAAI,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAI5E,UAAU,eAAe;IACvB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACnB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B;AAED,eAAO,MAAM,UAAU,GAAI,gGASxB,eAAe,4CAkEjB,CAAC;AAEF,MAAM,WAAW,WAAY,SAAQ,eAAe;IAClD,mBAAmB;IACnB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACnB,iBAAiB;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,4BAA4B;IAC5B,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,kCAAkC;IAClC,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,gDAAgD;IAChD,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B;AAED;;;;;;;;;;;;;;;GAeG;AACH,eAAO,MAAM,MAAM;kFAQhB,WAAW;;CA0Db,CAAC"}
+{"version":3,"file":"toggle.d.ts","sourceRoot":"","sources":["../../../src/primitives/toggle/toggle.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,WAAW,IAAI,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAI5E,UAAU,eAAe;IACvB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACnB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B;AAED,eAAO,MAAM,UAAU,GAAI,gGASxB,eAAe,4CAkEjB,CAAC;AAEF,MAAM,WAAW,WAAY,SAAQ,eAAe;IAClD,mBAAmB;IACnB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACnB,iBAAiB;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,4BAA4B;IAC5B,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,kCAAkC;IAClC,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,gDAAgD;IAChD,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B;AAED;;;;;;;;;;;;;;;GAeG;AACH,eAAO,MAAM,MAAM;kFAQhB,WAAW;;CA6Db,CAAC"}

package/dist/primitives/toggle/toggle.js

@@ -101,7 +101,10 @@ const f = ({
     {
       ...g,
       className: (n) => e(
-        "flex w-max items-start",
+        // `relative` keeps React Aria's visually hidden input inside the label. Unpositioned, it is
+        // placed against the nearest positioned ancestor (often far off-screen inside a scrolling
+        // page), and focusing it on click scrolls that ancestor.
+        "relative flex w-max items-start",
         n.isDisabled && "cursor-not-allowed",
         l[a].root,
         typeof o == "function" ? o(n) : o