daleui 0.0.2 → 0.0.5

package/dist/components/Checkbox/Checkbox.js

@@ -0,0 +1,657 @@
+import { jsx as i, jsxs as N } from "react/jsx-runtime";
+import { forwardRef as k, useMemo as K, useId as j, useState as M } from "react";
+import { c as X } from "../../css-QiVVeZaw.js";
+import { c as P } from "../../cva-BrKodHDH.js";
+import { C as $ } from "../../check-DEVerfH5.js";
+import { c as R, m as f, a as C, d as u, v as A, i as B, b as J, g as Q, e as U, f as Y, h as Z, j as _, s as ee, t as te, k as oe, l as re, u as ae, n as ne, o as se, p as de, q as ie } from "../../use-locale-context-DYXE7B4r.js";
+const [ce, T] = R({
+  name: "CheckboxContext",
+  hookName: "useCheckboxContext",
+  providerName: "<CheckboxProvider />"
+}), H = k((e, t) => {
+  const o = T(), a = f(o.getControlProps(), e);
+  return /* @__PURE__ */ i(C.div, { ...a, ref: t });
+});
+H.displayName = "CheckboxControl";
+var le = J("checkbox").parts("root", "label", "control", "indicator"), E = le.build(), q = (e) => e.ids?.root ?? `checkbox:${e.id}`, F = (e) => e.ids?.label ?? `checkbox:${e.id}:label`, ue = (e) => e.ids?.control ?? `checkbox:${e.id}:control`, S = (e) => e.ids?.hiddenInput ?? `checkbox:${e.id}:input`, he = (e) => e.getById(q(e)), g = (e) => e.getById(S(e));
+function fe(e, t) {
+  const { send: o, context: a, prop: r, computed: d, scope: n } = e, s = !!r("disabled"), l = !!r("readOnly"), p = !!r("required"), v = !!r("invalid"), m = !s && a.get("focused"), O = !s && a.get("focusVisible"), h = d("checked"), b = d("indeterminate"), x = a.get("checked"), y = {
+    "data-active": u(a.get("active")),
+    "data-focus": u(m),
+    "data-focus-visible": u(O),
+    "data-readonly": u(l),
+    "data-hover": u(a.get("hovered")),
+    "data-disabled": u(s),
+    "data-state": b ? "indeterminate" : h ? "checked" : "unchecked",
+    "data-invalid": u(v),
+    "data-required": u(p)
+  };
+  return {
+    checked: h,
+    disabled: s,
+    indeterminate: b,
+    focused: m,
+    checkedState: x,
+    setChecked(c) {
+      o({ type: "CHECKED.SET", checked: c, isTrusted: !1 });
+    },
+    toggleChecked() {
+      o({ type: "CHECKED.TOGGLE", checked: h, isTrusted: !1 });
+    },
+    getRootProps() {
+      return t.label({
+        ...E.root.attrs,
+        ...y,
+        dir: r("dir"),
+        id: q(n),
+        htmlFor: S(n),
+        onPointerMove() {
+          s || o({ type: "CONTEXT.SET", context: { hovered: !0 } });
+        },
+        onPointerLeave() {
+          s || o({ type: "CONTEXT.SET", context: { hovered: !1 } });
+        },
+        onClick(c) {
+          Q(c) === g(n) && c.stopPropagation();
+        }
+      });
+    },
+    getLabelProps() {
+      return t.element({
+        ...E.label.attrs,
+        ...y,
+        dir: r("dir"),
+        id: F(n)
+      });
+    },
+    getControlProps() {
+      return t.element({
+        ...E.control.attrs,
+        ...y,
+        dir: r("dir"),
+        id: ue(n),
+        "aria-hidden": !0
+      });
+    },
+    getIndicatorProps() {
+      return t.element({
+        ...E.indicator.attrs,
+        ...y,
+        dir: r("dir"),
+        hidden: !b && !h
+      });
+    },
+    getHiddenInputProps() {
+      return t.input({
+        id: S(n),
+        type: "checkbox",
+        required: r("required"),
+        defaultChecked: h,
+        disabled: s,
+        "aria-labelledby": F(n),
+        "aria-invalid": v,
+        name: r("name"),
+        form: r("form"),
+        value: r("value"),
+        style: A,
+        onFocus() {
+          const c = B();
+          o({ type: "CONTEXT.SET", context: { focused: !0, focusVisible: c } });
+        },
+        onBlur() {
+          o({ type: "CONTEXT.SET", context: { focused: !1, focusVisible: !1 } });
+        },
+        onClick(c) {
+          if (l) {
+            c.preventDefault();
+            return;
+          }
+          const V = c.currentTarget.checked;
+          o({ type: "CHECKED.SET", checked: V, isTrusted: !0 });
+        }
+      });
+    }
+  };
+}
+var { not: w } = Z(), pe = Y({
+  props({ props: e }) {
+    return {
+      value: "on",
+      ...e,
+      defaultChecked: e.defaultChecked ?? !1
+    };
+  },
+  initialState() {
+    return "ready";
+  },
+  context({ prop: e, bindable: t }) {
+    return {
+      checked: t(() => ({
+        defaultValue: e("defaultChecked"),
+        value: e("checked"),
+        onChange(o) {
+          e("onCheckedChange")?.({ checked: o });
+        }
+      })),
+      fieldsetDisabled: t(() => ({ defaultValue: !1 })),
+      focusVisible: t(() => ({ defaultValue: !1 })),
+      active: t(() => ({ defaultValue: !1 })),
+      focused: t(() => ({ defaultValue: !1 })),
+      hovered: t(() => ({ defaultValue: !1 }))
+    };
+  },
+  watch({ track: e, context: t, prop: o, action: a }) {
+    e([() => o("disabled")], () => {
+      a(["removeFocusIfNeeded"]);
+    }), e([() => t.get("checked")], () => {
+      a(["syncInputElement"]);
+    });
+  },
+  effects: ["trackFormControlState", "trackPressEvent", "trackFocusVisible"],
+  on: {
+    "CHECKED.TOGGLE": [
+      {
+        guard: w("isTrusted"),
+        actions: ["toggleChecked", "dispatchChangeEvent"]
+      },
+      {
+        actions: ["toggleChecked"]
+      }
+    ],
+    "CHECKED.SET": [
+      {
+        guard: w("isTrusted"),
+        actions: ["setChecked", "dispatchChangeEvent"]
+      },
+      {
+        actions: ["setChecked"]
+      }
+    ],
+    "CONTEXT.SET": {
+      actions: ["setContext"]
+    }
+  },
+  computed: {
+    indeterminate: ({ context: e }) => I(e.get("checked")),
+    checked: ({ context: e }) => be(e.get("checked")),
+    disabled: ({ context: e, prop: t }) => !!t("disabled") || e.get("fieldsetDisabled")
+  },
+  states: {
+    ready: {}
+  },
+  implementations: {
+    guards: {
+      isTrusted: ({ event: e }) => !!e.isTrusted
+    },
+    effects: {
+      trackPressEvent({ context: e, computed: t, scope: o }) {
+        if (!t("disabled"))
+          return re({
+            pointerNode: he(o),
+            keyboardNode: g(o),
+            isValidKey: (a) => a.key === " ",
+            onPress: () => e.set("active", !1),
+            onPressStart: () => e.set("active", !0),
+            onPressEnd: () => e.set("active", !1)
+          });
+      },
+      trackFocusVisible({ computed: e, scope: t }) {
+        if (!e("disabled"))
+          return oe({ root: t.getRootNode?.() });
+      },
+      trackFormControlState({ context: e, scope: t }) {
+        return te(g(t), {
+          onFieldsetDisabledChange(o) {
+            e.set("fieldsetDisabled", o);
+          },
+          onFormReset() {
+            e.set("checked", e.initial("checked"));
+          }
+        });
+      }
+    },
+    actions: {
+      setContext({ context: e, event: t }) {
+        for (const o in t.context)
+          e.set(o, t.context[o]);
+      },
+      syncInputElement({ context: e, computed: t, scope: o }) {
+        const a = g(o);
+        a && (ee(a, t("checked")), a.indeterminate = I(e.get("checked")));
+      },
+      removeFocusIfNeeded({ context: e, prop: t }) {
+        t("disabled") && e.get("focused") && (e.set("focused", !1), e.set("focusVisible", !1));
+      },
+      setChecked({ context: e, event: t }) {
+        e.set("checked", t.checked);
+      },
+      toggleChecked({ context: e, computed: t }) {
+        const o = I(t("checked")) ? !0 : !t("checked");
+        e.set("checked", o);
+      },
+      dispatchChangeEvent({ computed: e, scope: t }) {
+        queueMicrotask(() => {
+          const o = g(t);
+          _(o, { checked: e("checked") });
+        });
+      }
+    }
+  }
+});
+function I(e) {
+  return e === "indeterminate";
+}
+function be(e) {
+  return I(e) ? !1 : !!e;
+}
+U()([
+  "defaultChecked",
+  "checked",
+  "dir",
+  "disabled",
+  "form",
+  "getRootNode",
+  "id",
+  "ids",
+  "invalid",
+  "name",
+  "onCheckedChange",
+  "readOnly",
+  "required",
+  "value"
+]);
+const [Re, ge] = R({
+  name: "CheckboxGroupContext",
+  hookName: "useCheckboxGroupContext",
+  providerName: "<CheckboxGroupProvider />",
+  strict: !1
+}), [Oe, D] = R({
+  name: "FieldContext",
+  hookName: "useFieldContext",
+  providerName: "<FieldProvider />",
+  strict: !1
+}), G = k((e, t) => {
+  const o = T(), a = f(o.getHiddenInputProps(), e), r = D();
+  return /* @__PURE__ */ i(C.input, { "aria-describedby": r?.ariaDescribedby, ...a, ref: t });
+});
+G.displayName = "CheckboxHiddenInput";
+const W = k((e, t) => {
+  const { indeterminate: o, ...a } = e, r = T(), d = f(r.getIndicatorProps(), a), n = o ? r.indeterminate : r.checked;
+  return /* @__PURE__ */ i(C.div, { ...d, hidden: !n, ref: t });
+});
+W.displayName = "CheckboxIndicator";
+const L = k((e, t) => {
+  const o = T(), a = f(o.getLabelProps(), e);
+  return /* @__PURE__ */ i(C.span, { ...a, ref: t });
+});
+L.displayName = "CheckboxLabel";
+const ke = (e = {}) => {
+  const t = ge(), o = D(), a = K(() => f(e, t?.getItemProps({ value: e.value }) ?? {}), [e, t]), r = j(), { getRootNode: d } = ae(), { dir: n } = ne(), s = {
+    id: r,
+    ids: {
+      label: o?.ids.label,
+      hiddenInput: o?.ids.control
+    },
+    dir: n,
+    disabled: o?.disabled,
+    readOnly: o?.readOnly,
+    invalid: o?.invalid,
+    required: o?.required,
+    getRootNode: d,
+    ...a
+  }, l = se(pe, s);
+  return fe(l, de);
+}, Ce = ie(), z = k((e, t) => {
+  const [o, a] = Ce(e, [
+    "checked",
+    "defaultChecked",
+    "disabled",
+    "form",
+    "id",
+    "ids",
+    "invalid",
+    "name",
+    "onCheckedChange",
+    "readOnly",
+    "required",
+    "value"
+  ]), r = ke(o), d = f(r.getRootProps(), a);
+  return /* @__PURE__ */ i(ce, { value: r, children: /* @__PURE__ */ i(C.label, { ...d, ref: t }) });
+});
+z.displayName = "CheckboxRoot";
+const Ve = ({
+  label: e,
+  name: t,
+  checked: o,
+  defaultChecked: a,
+  disabled: r,
+  invalid: d,
+  tone: n = "brand",
+  required: s = !1,
+  onChange: l
+}) => {
+  const p = o !== void 0, [v, m] = M(
+    a ?? !1
+  );
+  return /* @__PURE__ */ N(
+    z,
+    {
+      name: t,
+      checked: p ? o : v,
+      defaultChecked: p ? void 0 : a,
+      disabled: r,
+      invalid: d,
+      required: s,
+      onCheckedChange: (b) => {
+        const x = b.checked === !0;
+        p || m(x), l && typeof l == "function" && l(x);
+      },
+      className: `group ${ve({ disabled: r })}`,
+      children: [
+        /* @__PURE__ */ i(
+          H,
+          {
+            className: me({
+              tone: n,
+              disabled: r,
+              invalid: !r && d
+            }),
+            children: /* @__PURE__ */ i(W, { className: xe(), children: /* @__PURE__ */ i($, { size: 10, absoluteStrokeWidth: !0 }) })
+          }
+        ),
+        e && /* @__PURE__ */ N(
+          L,
+          {
+            className: ye({ disabled: r, invalid: !r && d }),
+            children: [
+              e,
+              s && /* @__PURE__ */ N(
+                "span",
+                {
+                  "data-testid": "checkbox-required-indicator",
+                  className: X({
+                    color: r ? "fg.neutral.disabled" : "fg.danger"
+                  }),
+                  children: [
+                    " ",
+                    "*"
+                  ]
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ i(
+          G,
+          {
+            "data-test-tone": n,
+            "aria-required": s ? !0 : void 0
+          }
+        )
+      ]
+    }
+  );
+}, ve = P({
+  base: {
+    display: "flex",
+    alignItems: "center",
+    gap: "8",
+    cursor: "pointer",
+    padding: "4"
+  },
+  variants: {
+    disabled: {
+      true: {
+        cursor: "not-allowed"
+      }
+    }
+  }
+}), me = P({
+  base: {
+    position: "relative",
+    flexShrink: 0,
+    width: "16px",
+    height: "16px",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    backgroundColor: "transparent",
+    borderWidth: "2px",
+    borderStyle: "solid",
+    borderColor: "fg.neutral",
+    borderRadius: "sm",
+    transition: "all 0.2s",
+    color: "transparent",
+    '&[data-state="checked"]': {
+      color: "fg.neutral"
+    }
+  },
+  variants: {
+    tone: {
+      brand: {
+        ".group:hover &::before": {
+          content: '""',
+          position: "absolute",
+          width: "26px",
+          height: "26px",
+          borderRadius: "8",
+          backgroundColor: "fg.brand.hover",
+          opacity: 0.2,
+          left: "50%",
+          top: "50%",
+          transform: "translate(-50%, -50%)",
+          zIndex: -1
+        },
+        ".group:active &::before": {
+          content: '""',
+          position: "absolute",
+          width: "26px",
+          height: "26px",
+          borderRadius: "8",
+          backgroundColor: "fg.brand.active",
+          opacity: 0.2,
+          left: "50%",
+          top: "50%",
+          transform: "translate(-50%, -50%)",
+          zIndex: -1
+        },
+        "&[data-focus-visible]": {
+          outline: "solid",
+          outlineWidth: "lg",
+          outlineColor: "border.brand.focus",
+          outlineOffset: "2"
+        }
+      },
+      success: {
+        ".group:hover &::before, .group:active &::before": {
+          content: '""',
+          position: "absolute",
+          width: "26px",
+          height: "26px",
+          borderRadius: "8",
+          backgroundColor: "fg.success",
+          opacity: 0.2,
+          left: "50%",
+          top: "50%",
+          transform: "translate(-50%, -50%)",
+          zIndex: -1
+        },
+        "&[data-focus-visible]": {
+          outline: "solid",
+          outlineWidth: "lg",
+          outlineColor: "border.success",
+          outlineOffset: "2"
+        }
+      },
+      warning: {
+        ".group:hover &::before, .group:active &::before": {
+          content: '""',
+          position: "absolute",
+          width: "26px",
+          height: "26px",
+          borderRadius: "8",
+          backgroundColor: "fg.warning",
+          opacity: 0.2,
+          left: "50%",
+          top: "50%",
+          transform: "translate(-50%, -50%)",
+          zIndex: -1
+        },
+        "&[data-focus-visible]": {
+          outline: "solid",
+          outlineWidth: "lg",
+          outlineColor: "border.warning",
+          outlineOffset: "2"
+        }
+      },
+      info: {
+        ".group:hover &::before, .group:active &::before": {
+          content: '""',
+          position: "absolute",
+          width: "26px",
+          height: "26px",
+          borderRadius: "8",
+          backgroundColor: "fg.info",
+          opacity: 0.2,
+          left: "50%",
+          top: "50%",
+          transform: "translate(-50%, -50%)",
+          zIndex: -1
+        },
+        "&[data-focus-visible]": {
+          outline: "solid",
+          outlineWidth: "lg",
+          outlineColor: "border.info",
+          outlineOffset: "2"
+        }
+      },
+      danger: {
+        borderColor: "fg.danger",
+        ".group:hover &::before, .group:active &::before": {
+          content: '""',
+          position: "absolute",
+          width: "26px",
+          height: "26px",
+          borderRadius: "8",
+          backgroundColor: "fg.danger",
+          opacity: 0.2,
+          left: "50%",
+          top: "50%",
+          transform: "translate(-50%, -50%)",
+          zIndex: -1
+        },
+        "&[data-focus-visible]": {
+          outline: "solid",
+          outlineWidth: "lg",
+          outlineColor: "border.danger",
+          outlineOffset: "2"
+        }
+      },
+      neutral: {
+        ".group:hover &::before": {
+          content: '""',
+          position: "absolute",
+          width: "26px",
+          height: "26px",
+          borderRadius: "8",
+          backgroundColor: "fg.neutral.hover",
+          opacity: 0.2,
+          left: "50%",
+          top: "50%",
+          transform: "translate(-50%, -50%)",
+          zIndex: -1
+        },
+        ".group:active &::before": {
+          content: '""',
+          position: "absolute",
+          width: "26px",
+          height: "26px",
+          borderRadius: "8",
+          backgroundColor: "fg.neutral.active",
+          opacity: 0.2,
+          left: "50%",
+          top: "50%",
+          transform: "translate(-50%, -50%)",
+          zIndex: -1
+        },
+        "&[data-focus-visible]": {
+          outline: "solid",
+          outlineWidth: "lg",
+          outlineColor: "border.neutral.active",
+          outlineOffset: "2"
+        }
+      }
+    },
+    disabled: {
+      true: {
+        cursor: "not-allowed",
+        borderColor: "fg.neutral.disabled",
+        backgroundColor: "bg.neutral.disabled!",
+        ".group:hover &::before": {
+          display: "none"
+        },
+        '&[data-state="checked"]': {
+          color: "fg.neutral.disabled!"
+        }
+      }
+    },
+    invalid: {
+      true: {
+        borderColor: "fg.danger",
+        ".group:hover &::before": {
+          content: '""',
+          position: "absolute",
+          width: "26px",
+          height: "26px",
+          borderRadius: "8",
+          backgroundColor: "fg.danger",
+          opacity: 0.2,
+          left: "50%",
+          top: "50%",
+          transform: "translate(-50%, -50%)",
+          zIndex: -1
+        },
+        "&[data-focus-visible]": {
+          outline: "solid",
+          outlineWidth: "lg",
+          outlineColor: "border.danger",
+          outlineOffset: "2"
+        },
+        '&[data-state="checked"]': {
+          color: "fg.danger"
+        }
+      }
+    }
+  }
+}), xe = P({
+  base: {
+    width: "100%",
+    height: "100%",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center"
+  }
+}), ye = P({
+  base: {
+    fontSize: "md",
+    fontWeight: "semibold",
+    lineHeight: "1.2",
+    color: "fg.neutral",
+    userSelect: "none"
+  },
+  variants: {
+    disabled: {
+      true: {
+        color: "fg.neutral.disabled"
+      }
+    },
+    invalid: {
+      true: {
+        color: "fg.danger"
+      }
+    }
+  }
+});
+export {
+  Ve as Checkbox
+};