daleui 0.0.2 → 0.0.5

package/dist/components/RadioGroup/RadioGroup.js

@@ -0,0 +1,713 @@
+import { jsx as l, jsxs as k } from "react/jsx-runtime";
+import { forwardRef as f, useId as M, createContext as K, useContext as z } from "react";
+import { c as T } from "../../css-QiVVeZaw.js";
+import { c as I } from "../../cva-BrKodHDH.js";
+import { f as J } from "../../hstack-cCrHxysi.js";
+import { c as P, m, a as g, q as D, r as R, d as c, b as Q, v as X, i as Y, w as Z, x as ee, e as O, f as te, h as ae, j as oe, y as ie, k as re, t as de, z as ne, u as se, n as le, o as ue, p as ce } from "../../use-locale-context-DYXE7B4r.js";
+const [Be, ve] = P({
+  name: "FieldsetContext",
+  hookName: "useFieldsetContext",
+  providerName: "<FieldsetProvider />",
+  strict: !1
+}), [pe, h] = P({
+  name: "RadioGroupContext",
+  hookName: "useRadioGroupContext",
+  providerName: "<RadioGroupProvider />"
+}), A = f((e, t) => {
+  const a = h(), i = m(a.getIndicatorProps(), e);
+  return /* @__PURE__ */ l(g.div, { ...i, ref: t });
+});
+A.displayName = "RadioGroupIndicator";
+const [fe] = P({
+  name: "RadioGroupItemContext",
+  hookName: "useRadioGroupItemContext",
+  providerName: "<RadioGroupItemProvider />"
+}), [me, x] = P({
+  name: "RadioGroupItemPropsContext",
+  hookName: "useRadioGroupItemPropsContext",
+  providerName: "<RadioGroupItemPropsProvider />"
+}), ge = D(), H = f((e, t) => {
+  const [a, i] = ge(e, ["value", "disabled", "invalid"]), d = h(), r = m(d.getItemProps(a), i), n = d.getItemState(a);
+  return /* @__PURE__ */ l(fe, { value: n, children: /* @__PURE__ */ l(me, { value: a, children: /* @__PURE__ */ l(g.label, { ...r, ref: t }) }) });
+});
+H.displayName = "RadioGroupItem";
+const L = f((e, t) => {
+  const a = h(), i = x(), d = m(a.getItemControlProps(i), e);
+  return /* @__PURE__ */ l(g.div, { ...d, ref: t });
+});
+L.displayName = "RadioGroupItemControl";
+const _ = f((e, t) => {
+  const a = h(), i = x(), d = m(a.getItemHiddenInputProps(i), e);
+  return /* @__PURE__ */ l(g.input, { ...d, ref: t });
+});
+_.displayName = "RadioGroupItemHiddenInput";
+const q = f((e, t) => {
+  const a = h(), i = x(), d = m(a.getItemTextProps(i), e);
+  return /* @__PURE__ */ l(g.span, { ...d, ref: t });
+});
+q.displayName = "RadioGroupItemText";
+const $ = f((e, t) => {
+  const a = h(), i = m(a.getLabelProps(), e);
+  return /* @__PURE__ */ l(g.label, { ...i, ref: t });
+});
+$.displayName = "RadioGroupLabel";
+var be = Q("radio-group").parts(
+  "root",
+  "label",
+  "item",
+  "itemText",
+  "itemControl",
+  "indicator"
+), b = be.build(), V = (e) => e.ids?.root ?? `radio-group:${e.id}`, N = (e) => e.ids?.label ?? `radio-group:${e.id}:label`, U = (e, t) => e.ids?.item?.(t) ?? `radio-group:${e.id}:radio:${t}`, G = (e, t) => e.ids?.itemHiddenInput?.(t) ?? `radio-group:${e.id}:radio:input:${t}`, he = (e, t) => e.ids?.itemControl?.(t) ?? `radio-group:${e.id}:radio:control:${t}`, ye = (e, t) => e.ids?.itemLabel?.(t) ?? `radio-group:${e.id}:radio:label:${t}`, W = (e) => e.ids?.indicator ?? `radio-group:${e.id}:indicator`, E = (e) => e.getById(V(e)), Ce = (e, t) => e.getById(G(e, t)), Ie = (e) => e.getById(W(e)), Re = (e) => E(e)?.querySelector("input:not(:disabled)"), Ve = (e) => E(e)?.querySelector("input:not(:disabled):checked"), F = (e) => {
+  const a = `input[type=radio][data-ownedby='${CSS.escape(V(e))}']:not([disabled])`;
+  return ne(E(e), a);
+}, Pe = (e, t) => {
+  if (t)
+    return e.getById(U(e, t));
+}, Ee = (e) => ({
+  x: e?.offsetLeft ?? 0,
+  y: e?.offsetTop ?? 0,
+  width: e?.offsetWidth ?? 0,
+  height: e?.offsetHeight ?? 0
+});
+function Se(e, t) {
+  const { context: a, send: i, computed: d, prop: r, scope: n } = e, u = d("isDisabled"), y = r("invalid"), p = r("readOnly");
+  function C(o) {
+    return {
+      value: o.value,
+      invalid: !!o.invalid || !!y,
+      disabled: !!o.disabled || u,
+      checked: a.get("value") === o.value,
+      focused: a.get("focusedValue") === o.value,
+      focusVisible: a.get("focusVisibleValue") === o.value,
+      hovered: a.get("hoveredValue") === o.value,
+      active: a.get("activeValue") === o.value
+    };
+  }
+  function S(o) {
+    const s = C(o);
+    return {
+      "data-focus": c(s.focused),
+      "data-focus-visible": c(s.focusVisible),
+      "data-disabled": c(s.disabled),
+      "data-readonly": c(p),
+      "data-state": s.checked ? "checked" : "unchecked",
+      "data-hover": c(s.hovered),
+      "data-invalid": c(s.invalid),
+      "data-orientation": r("orientation"),
+      "data-ssr": c(a.get("ssr"))
+    };
+  }
+  const w = () => {
+    (Ve(n) ?? Re(n))?.focus();
+  };
+  return {
+    focus: w,
+    value: a.get("value"),
+    setValue(o) {
+      i({ type: "SET_VALUE", value: o, isTrusted: !1 });
+    },
+    clearValue() {
+      i({ type: "SET_VALUE", value: null, isTrusted: !1 });
+    },
+    getRootProps() {
+      return t.element({
+        ...b.root.attrs,
+        role: "radiogroup",
+        id: V(n),
+        "aria-labelledby": N(n),
+        "aria-required": r("required") || void 0,
+        "aria-disabled": u || void 0,
+        "aria-readonly": p || void 0,
+        "data-orientation": r("orientation"),
+        "data-disabled": c(u),
+        "data-invalid": c(y),
+        "data-required": c(r("required")),
+        "aria-orientation": r("orientation"),
+        dir: r("dir"),
+        style: {
+          position: "relative"
+        }
+      });
+    },
+    getLabelProps() {
+      return t.element({
+        ...b.label.attrs,
+        dir: r("dir"),
+        "data-orientation": r("orientation"),
+        "data-disabled": c(u),
+        "data-invalid": c(y),
+        "data-required": c(r("required")),
+        id: N(n),
+        onClick: w
+      });
+    },
+    getItemState: C,
+    getItemProps(o) {
+      const s = C(o);
+      return t.label({
+        ...b.item.attrs,
+        dir: r("dir"),
+        id: U(n, o.value),
+        htmlFor: G(n, o.value),
+        ...S(o),
+        onPointerMove() {
+          s.disabled || s.hovered || i({ type: "SET_HOVERED", value: o.value, hovered: !0 });
+        },
+        onPointerLeave() {
+          s.disabled || i({ type: "SET_HOVERED", value: null });
+        },
+        onPointerDown(v) {
+          s.disabled || ee(v) && (s.focused && v.pointerType === "mouse" && v.preventDefault(), i({ type: "SET_ACTIVE", value: o.value, active: !0 }));
+        },
+        onPointerUp() {
+          s.disabled || i({ type: "SET_ACTIVE", value: null });
+        },
+        onClick() {
+          !s.disabled && Z() && Ce(n, o.value)?.focus();
+        }
+      });
+    },
+    getItemTextProps(o) {
+      return t.element({
+        ...b.itemText.attrs,
+        dir: r("dir"),
+        id: ye(n, o.value),
+        ...S(o)
+      });
+    },
+    getItemControlProps(o) {
+      const s = C(o);
+      return t.element({
+        ...b.itemControl.attrs,
+        dir: r("dir"),
+        id: he(n, o.value),
+        "data-active": c(s.active),
+        "aria-hidden": !0,
+        ...S(o)
+      });
+    },
+    getItemHiddenInputProps(o) {
+      const s = C(o);
+      return t.input({
+        "data-ownedby": V(n),
+        id: G(n, o.value),
+        type: "radio",
+        name: r("name") || r("id"),
+        form: r("form"),
+        value: o.value,
+        required: r("required"),
+        "aria-invalid": s.invalid || void 0,
+        onClick(v) {
+          if (p) {
+            v.preventDefault();
+            return;
+          }
+          v.currentTarget.checked && i({ type: "SET_VALUE", value: o.value, isTrusted: !0 });
+        },
+        onBlur() {
+          i({ type: "SET_FOCUSED", value: null, focused: !1, focusVisible: !1 });
+        },
+        onFocus() {
+          const v = Y();
+          i({ type: "SET_FOCUSED", value: o.value, focused: !0, focusVisible: v });
+        },
+        onKeyDown(v) {
+          v.defaultPrevented || v.key === " " && i({ type: "SET_ACTIVE", value: o.value, active: !0 });
+        },
+        onKeyUp(v) {
+          v.defaultPrevented || v.key === " " && i({ type: "SET_ACTIVE", value: null });
+        },
+        disabled: s.disabled || p,
+        defaultChecked: s.checked,
+        style: X
+      });
+    },
+    getIndicatorProps() {
+      const o = a.get("indicatorRect"), s = o == null || o.width === 0 && o.height === 0 && o.x === 0 && o.y === 0;
+      return t.element({
+        id: W(n),
+        ...b.indicator.attrs,
+        dir: r("dir"),
+        hidden: a.get("value") == null || s,
+        "data-disabled": c(u),
+        "data-orientation": r("orientation"),
+        style: {
+          "--transition-property": "left, top, width, height",
+          "--left": R(o?.x),
+          "--top": R(o?.y),
+          "--width": R(o?.width),
+          "--height": R(o?.height),
+          position: "absolute",
+          willChange: "var(--transition-property)",
+          transitionProperty: "var(--transition-property)",
+          transitionDuration: "var(--transition-duration, 150ms)",
+          transitionTimingFunction: "var(--transition-timing-function)",
+          [r("orientation") === "horizontal" ? "left" : "top"]: r("orientation") === "horizontal" ? "var(--left)" : "var(--top)"
+        }
+      });
+    }
+  };
+}
+var { not: ke } = ae(), Ge = te({
+  props({ props: e }) {
+    return {
+      orientation: "vertical",
+      ...e
+    };
+  },
+  initialState() {
+    return "idle";
+  },
+  context({ prop: e, bindable: t }) {
+    return {
+      value: t(() => ({
+        defaultValue: e("defaultValue"),
+        value: e("value"),
+        onChange(a) {
+          e("onValueChange")?.({ value: a });
+        }
+      })),
+      activeValue: t(() => ({
+        defaultValue: null
+      })),
+      focusedValue: t(() => ({
+        defaultValue: null
+      })),
+      focusVisibleValue: t(() => ({
+        defaultValue: null
+      })),
+      hoveredValue: t(() => ({
+        defaultValue: null
+      })),
+      indicatorRect: t(() => ({
+        defaultValue: null
+      })),
+      fieldsetDisabled: t(() => ({
+        defaultValue: !1
+      })),
+      ssr: t(() => ({
+        defaultValue: !0
+      }))
+    };
+  },
+  refs() {
+    return {
+      indicatorCleanup: null,
+      focusVisibleValue: null
+    };
+  },
+  computed: {
+    isDisabled: ({ prop: e, context: t }) => !!e("disabled") || t.get("fieldsetDisabled")
+  },
+  entry: ["syncIndicatorRect", "syncSsr"],
+  exit: ["cleanupObserver"],
+  effects: ["trackFormControlState", "trackFocusVisible"],
+  watch({ track: e, action: t, context: a }) {
+    e([() => a.get("value")], () => {
+      t(["syncIndicatorRect", "syncInputElements"]);
+    });
+  },
+  on: {
+    SET_VALUE: [
+      {
+        guard: ke("isTrusted"),
+        actions: ["setValue", "dispatchChangeEvent"]
+      },
+      {
+        actions: ["setValue"]
+      }
+    ],
+    SET_HOVERED: {
+      actions: ["setHovered"]
+    },
+    SET_ACTIVE: {
+      actions: ["setActive"]
+    },
+    SET_FOCUSED: {
+      actions: ["setFocused"]
+    }
+  },
+  states: {
+    idle: {}
+  },
+  implementations: {
+    guards: {
+      isTrusted: ({ event: e }) => !!e.isTrusted
+    },
+    effects: {
+      trackFormControlState({ context: e, scope: t }) {
+        return de(E(t), {
+          onFieldsetDisabledChange(a) {
+            e.set("fieldsetDisabled", a);
+          },
+          onFormReset() {
+            e.set("value", e.initial("value"));
+          }
+        });
+      },
+      trackFocusVisible({ scope: e }) {
+        return re({ root: e.getRootNode?.() });
+      }
+    },
+    actions: {
+      setValue({ context: e, event: t }) {
+        e.set("value", t.value);
+      },
+      setHovered({ context: e, event: t }) {
+        e.set("hoveredValue", t.value);
+      },
+      setActive({ context: e, event: t }) {
+        e.set("activeValue", t.value);
+      },
+      setFocused({ context: e, event: t }) {
+        e.set("focusedValue", t.value);
+        const a = t.value != null && t.focusVisible ? t.value : null;
+        e.set("focusVisibleValue", a);
+      },
+      syncInputElements({ context: e, scope: t }) {
+        F(t).forEach((i) => {
+          i.checked = i.value === e.get("value");
+        });
+      },
+      cleanupObserver({ refs: e }) {
+        e.get("indicatorCleanup")?.();
+      },
+      syncSsr({ context: e }) {
+        e.set("ssr", !1);
+      },
+      syncIndicatorRect({ context: e, scope: t, refs: a }) {
+        if (a.get("indicatorCleanup")?.(), !Ie(t)) return;
+        const i = e.get("value"), d = Pe(t, i);
+        if (i == null || !d) {
+          e.set("indicatorRect", null);
+          return;
+        }
+        const r = () => {
+          e.set("indicatorRect", Ee(d));
+        };
+        r();
+        const n = ie.observe(d, r);
+        a.set("indicatorCleanup", n);
+      },
+      dispatchChangeEvent({ context: e, scope: t }) {
+        F(t).forEach((i) => {
+          const d = i.value === e.get("value");
+          d !== i.checked && oe(i, { checked: d });
+        });
+      }
+    }
+  }
+});
+O()([
+  "dir",
+  "disabled",
+  "form",
+  "getRootNode",
+  "id",
+  "ids",
+  "invalid",
+  "name",
+  "onValueChange",
+  "orientation",
+  "readOnly",
+  "required",
+  "value",
+  "defaultValue"
+]);
+O()(["value", "disabled", "invalid"]);
+const Te = (e) => {
+  const t = ve(), a = M(), { getRootNode: i } = se(), { dir: d } = le(), r = {
+    id: a,
+    ids: {
+      label: t?.ids?.legend
+    },
+    dir: d,
+    disabled: t?.disabled,
+    invalid: t?.invalid,
+    getRootNode: i,
+    ...e
+  }, n = ue(Ge, r);
+  return Se(n, ce);
+}, xe = D(), B = f((e, t) => {
+  const [a, i] = xe(e, [
+    "defaultValue",
+    "disabled",
+    "form",
+    "id",
+    "ids",
+    "invalid",
+    "name",
+    "onValueChange",
+    "orientation",
+    "readOnly",
+    "required",
+    "value"
+  ]), d = Te(a), r = m(d.getRootProps(), i);
+  return /* @__PURE__ */ l(pe, { value: d, children: /* @__PURE__ */ l(g.div, { ...r, ref: t }) });
+});
+B.displayName = "RadioGroupRoot";
+const j = K(null);
+function je({
+  children: e,
+  name: t,
+  label: a,
+  defaultValue: i,
+  value: d,
+  onChange: r,
+  disabled: n,
+  orientation: u,
+  tone: y = "neutral"
+}) {
+  return /* @__PURE__ */ l(j.Provider, { value: { tone: y, disabled: n }, children: /* @__PURE__ */ k(
+    B,
+    {
+      name: t,
+      defaultValue: i,
+      value: d,
+      onValueChange: (p) => {
+        p.value && r?.(p.value);
+      },
+      disabled: n,
+      orientation: u,
+      className: we,
+      children: [
+        /* @__PURE__ */ l(
+          $,
+          {
+            className: T({
+              textStyle: "body.lg",
+              marginBottom: "8"
+            }),
+            children: a
+          }
+        ),
+        /* @__PURE__ */ l("div", { className: Ne({ orientation: u }), children: e })
+      ]
+    }
+  ) });
+}
+const we = T({
+  display: "flex",
+  flexDirection: "column"
+}), Ne = I({
+  base: {
+    display: "flex",
+    gap: "8"
+  },
+  variants: {
+    orientation: {
+      horizontal: {
+        flexDirection: "row"
+      },
+      vertical: {
+        flexDirection: "column"
+      }
+    }
+  },
+  defaultVariants: {
+    orientation: "vertical"
+  }
+});
+function Me({ value: e, children: t, disabled: a, ref: i }) {
+  const d = z(j);
+  if (!d)
+    throw new Error("Radio 컴포넌트는 RadioGroup 내부에서만 사용해야 합니다.");
+  const { tone: r, disabled: n } = d, u = a || n;
+  return /* @__PURE__ */ k(
+    H,
+    {
+      value: e,
+      disabled: u,
+      className: J({
+        alignItems: "center",
+        gap: "8",
+        cursor: u ? "not-allowed" : "pointer"
+      }),
+      children: [
+        /* @__PURE__ */ k(L, { className: Fe, children: [
+          /* @__PURE__ */ l(
+            "div",
+            {
+              className: De({ tone: r, disabled: u }),
+              role: "presentation"
+            }
+          ),
+          /* @__PURE__ */ l(
+            A,
+            {
+              className: He({ tone: r, disabled: u })
+            }
+          ),
+          /* @__PURE__ */ l("div", { className: Oe({ tone: r, disabled: u }) }),
+          /* @__PURE__ */ l(_, { ref: i })
+        ] }),
+        t && /* @__PURE__ */ l(
+          q,
+          {
+            className: Ae({ disabled: u }),
+            children: t
+          }
+        )
+      ]
+    }
+  );
+}
+const Fe = T({
+  position: "relative",
+  width: "4",
+  height: "4",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center"
+}), De = I({
+  base: {
+    backgroundColor: "bg.neutral",
+    width: "4",
+    height: "4",
+    border: "neutral",
+    borderWidth: "md",
+    borderRadius: "full",
+    position: "absolute",
+    pointerEvents: "none",
+    borderColor: "slate.9",
+    "[data-state='checked'] &": {
+      borderColor: "slate.9"
+    }
+  },
+  variants: {
+    tone: {
+      neutral: {
+        "[data-focus-visible] &, [data-active] &": {
+          outline: "solid",
+          outlineWidth: "md",
+          outlineColor: "slate.9",
+          outlineOffset: "2"
+        }
+      },
+      brand: {
+        "[data-focus-visible] &, [data-active] &": {
+          outline: "solid",
+          outlineWidth: "md",
+          outlineColor: "border.brand.focus",
+          outlineOffset: "2"
+        }
+      },
+      danger: {
+        "[data-focus-visible] &, [data-active] &": {
+          outline: "solid",
+          outlineWidth: "md",
+          outlineColor: "border.danger",
+          outlineOffset: "2"
+        }
+      },
+      warning: {
+        "[data-focus-visible] &, [data-active] &": {
+          outline: "solid",
+          outlineWidth: "md",
+          outlineColor: "border.warning",
+          outlineOffset: "2"
+        }
+      },
+      success: {
+        "[data-focus-visible] &, [data-active] &": {
+          outline: "solid",
+          outlineWidth: "md",
+          outlineColor: "border.success",
+          outlineOffset: "2"
+        }
+      },
+      info: {
+        "[data-focus-visible] &, [data-active] &": {
+          outline: "solid",
+          outlineWidth: "md",
+          outlineColor: "border.info",
+          outlineOffset: "2"
+        }
+      }
+    },
+    disabled: {
+      true: {
+        borderColor: "fg.neutral.disabled!",
+        backgroundColor: "bg.neutral.disabled!",
+        "[data-state='checked'] &": {
+          borderColor: "fg.neutral.disabled!",
+          backgroundColor: "bg.neutral.disabled!"
+        }
+      }
+    }
+  }
+}), Oe = I({
+  base: {
+    position: "absolute",
+    width: "6",
+    height: "6",
+    borderRadius: "full",
+    pointerEvents: "none",
+    opacity: 0,
+    "[data-hover] &": {
+      opacity: 0.1
+    }
+  },
+  variants: {
+    tone: {
+      neutral: { backgroundColor: "fg.neutral" },
+      brand: { backgroundColor: "fg.brand" },
+      danger: { backgroundColor: "fg.danger" },
+      warning: { backgroundColor: "fg.warning" },
+      success: { backgroundColor: "fg.success" },
+      info: { backgroundColor: "fg.info" }
+    },
+    disabled: {
+      true: {
+        display: "none"
+      }
+    }
+  }
+}), Ae = I({
+  base: {
+    textStyle: "label.md"
+  },
+  variants: {
+    disabled: {
+      true: {
+        color: "fg.neutral.disabled"
+      }
+    }
+  }
+}), He = I({
+  base: {
+    position: "absolute",
+    top: "50%!",
+    left: "50%!",
+    transform: "translate(-50%, -50%)!",
+    width: "2",
+    height: "2",
+    borderRadius: "full",
+    pointerEvents: "none",
+    opacity: 0,
+    backgroundColor: "slate.9",
+    "[data-scope='radio-group'][data-part='item'][data-state='checked'] &": {
+      opacity: 1
+    }
+  },
+  variants: {
+    tone: {
+      neutral: {},
+      brand: {},
+      danger: {},
+      warning: {},
+      success: {},
+      info: {}
+    },
+    disabled: {
+      true: {
+        backgroundColor: "fg.neutral.disabled!"
+      }
+    }
+  }
+});
+export {
+  Me as Radio,
+  je as RadioGroup
+};