impact-nova 2.1.0-alpha.7 → 2.1.0-alpha.8

package/dist/components/forms/choice-card/choice-card.js

@@ -1,278 +1,268 @@
 import { jsx as a } from "react/jsx-runtime";
-import * as c from "react";
-import * as v from "@radix-ui/react-radio-group";
-import { useControllableState as x } from "@radix-ui/react-use-controllable-state";
-import { Check as G } from "impact-nova-icons";
-import { cn as p } from "../../../lib/utils.js";
-const g = c.createContext(null), b = c.createContext({
+import * as i from "react";
+import * as x from "@radix-ui/react-radio-group";
+import { useControllableState as y } from "@radix-ui/react-use-controllable-state";
+import { Check as M } from "impact-nova-icons";
+import { createComponent as p } from "../../../lib/primitives/create-component.js";
+import { cn as h } from "../../../lib/utils.js";
+const v = i.createContext(null), g = i.createContext({
   selected: !1,
   type: "single"
-}), y = () => {
-  const e = c.useContext(g);
+}), k = () => {
+  const e = i.useContext(v);
   if (!e)
     throw new Error("ChoiceCard components must be used within ChoiceCardGroup");
   return e;
 };
-function F() {
-  const { value: e, type: t, setValue: o, isSelected: r } = y();
-  return c.useMemo(
+function T() {
+  const { value: e, type: o, setValue: t, isSelected: r } = k();
+  return i.useMemo(
     () => ({
       value: e,
-      type: t,
-      setValue: o,
+      type: o,
+      setValue: t,
       isSelected: r
     }),
-    [e, t, o, r]
+    [e, o, t, r]
   );
 }
-const w = (e, t, o) => p(
+const w = (e, o, t) => h(
   "relative flex flex-col items-start gap-3 p-3 rounded-xl",
   "border-t border-r border-b-2 border-l-4",
   "cursor-pointer select-none transition-[border-color,background-color] duration-150",
   "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-focus-ring",
   e ? "border-brand bg-brand-tint hover:bg-brand-tint-hover" : "border-stroke-subtle bg-canvas-elevated hover:border-brand hover:bg-canvas-muted",
-  t && "cursor-not-allowed opacity-60",
-  o
-), M = ({
+  o && "cursor-not-allowed opacity-60",
+  t
+), S = ({
   value: e,
-  defaultValue: t = "",
-  onValueChange: o,
+  defaultValue: o = "",
+  onValueChange: t,
   disabled: r,
-  orientation: h = "horizontal",
+  orientation: m = "horizontal",
   wrap: u = !1,
   className: s,
   children: l
 }) => {
-  const [n, i] = x({
+  const [c, n] = y({
     prop: e,
-    defaultProp: t,
-    onChange: o
-  }), d = c.useCallback(
-    (C) => n === C,
-    [n]
-  ), f = c.useMemo(
+    defaultProp: o,
+    onChange: t
+  }), d = i.useCallback(
+    (C) => c === C,
+    [c]
+  ), f = i.useMemo(
     () => ({
       type: "single",
       disabled: r,
-      value: n,
-      setValue: (C) => i(C),
+      value: c,
+      setValue: (C) => n(C),
       isSelected: d,
-      toggle: (C) => i(C)
+      toggle: (C) => n(C)
     }),
-    [r, n, i, d]
+    [r, c, n, d]
   );
-  return /* @__PURE__ */ a(g.Provider, { value: f, children: /* @__PURE__ */ a(
-    v.Root,
+  return /* @__PURE__ */ a(v.Provider, { value: f, children: /* @__PURE__ */ a(
+    x.Root,
     {
-      value: n,
-      onValueChange: i,
+      value: c,
+      onValueChange: n,
       disabled: r,
       className: s,
       "data-component": "choice-card-group",
       "data-type": "single",
-      "data-layout": u ? "wrap" : h === "vertical" ? "column" : "row",
+      "data-layout": u ? "wrap" : m === "vertical" ? "column" : "row",
       children: l
     }
   ) });
-}, S = ({
+}, P = ({
   value: e,
-  defaultValue: t = [],
-  onValueChange: o,
+  defaultValue: o = [],
+  onValueChange: t,
   disabled: r,
-  orientation: h = "horizontal",
+  orientation: m = "horizontal",
   wrap: u = !1,
   className: s,
   children: l
 }) => {
-  const [n, i] = x({
+  const [c, n] = y({
     prop: e,
-    defaultProp: t,
-    onChange: o
-  }), d = c.useMemo(() => n ?? [], [n]), f = c.useCallback(
-    (m) => d.includes(m),
+    defaultProp: o,
+    onChange: t
+  }), d = i.useMemo(() => c ?? [], [c]), f = i.useCallback(
+    (b) => d.includes(b),
     [d]
-  ), C = c.useCallback(
-    (m) => {
-      if (d.includes(m)) {
-        i(d.filter((R) => R !== m));
+  ), C = i.useCallback(
+    (b) => {
+      if (d.includes(b)) {
+        n(d.filter((N) => N !== b));
         return;
       }
-      i([...d, m]);
+      n([...d, b]);
     },
-    [d, i]
-  ), k = c.useMemo(
+    [d, n]
+  ), G = i.useMemo(
     () => ({
       type: "multiple",
       disabled: r,
       value: d,
-      setValue: (m) => i(m),
+      setValue: (b) => n(b),
       isSelected: f,
       toggle: C
     }),
-    [r, d, i, f, C]
+    [r, d, n, f, C]
   );
-  return /* @__PURE__ */ a(g.Provider, { value: k, children: /* @__PURE__ */ a(
+  return /* @__PURE__ */ a(v.Provider, { value: G, children: /* @__PURE__ */ a(
     "div",
     {
       role: "group",
       className: s,
       "data-component": "choice-card-group",
       "data-type": "multiple",
-      "data-layout": u ? "wrap" : h === "vertical" ? "column" : "row",
+      "data-layout": u ? "wrap" : m === "vertical" ? "column" : "row",
       children: l
     }
   ) });
-}, P = (e) => e.type === "multiple" ? /* @__PURE__ */ a(S, { ...e }) : /* @__PURE__ */ a(M, { ...e });
-P.displayName = "ChoiceCardGroup";
-const N = c.forwardRef(({ className: e, selected: t, disabled: o, children: r, ...h }, u) => /* @__PURE__ */ a(
+}, V = (e) => e.type === "multiple" ? /* @__PURE__ */ a(P, { ...e }) : /* @__PURE__ */ a(S, { ...e });
+V.displayName = "ChoiceCardGroup";
+const j = p("ChoiceCardSurface", ({ className: e, selected: o, disabled: t, children: r, ...m }, u) => /* @__PURE__ */ a(
   "div",
   {
     ref: u,
-    className: w(t, o, e),
+    className: w(o, t, e),
     "data-component": "choice-card",
-    "data-selected": t || void 0,
-    ...h,
+    "data-selected": o || void 0,
+    ...m,
     children: r
   }
-));
-N.displayName = "ChoiceCardSurface";
-const V = c.forwardRef(
-  ({ value: e, className: t, children: o, disabled: r, ...h }, u) => {
-    const s = y(), l = r || s.disabled, n = s.isSelected(e), i = c.useMemo(
+)), E = p(
+  "ChoiceCard",
+  ({ value: e, className: o, children: t, disabled: r, ...m }, u) => {
+    const s = k(), l = r || s.disabled, c = s.isSelected(e), n = i.useMemo(
       () => ({
-        selected: n,
+        selected: c,
         disabled: l,
         type: s.type
       }),
-      [n, l, s.type]
+      [c, l, s.type]
     );
-    return s.type === "single" ? /* @__PURE__ */ a(b.Provider, { value: i, children: /* @__PURE__ */ a(v.Item, { value: e, asChild: !0, disabled: l, children: /* @__PURE__ */ a(
-      N,
+    return s.type === "single" ? /* @__PURE__ */ a(g.Provider, { value: n, children: /* @__PURE__ */ a(x.Item, { value: e, asChild: !0, disabled: l, children: /* @__PURE__ */ a(
+      j,
       {
         ref: u,
-        selected: n,
+        selected: c,
         disabled: l,
-        className: t,
-        ...h,
-        children: o
+        className: o,
+        ...m,
+        children: t
       }
-    ) }) }) : /* @__PURE__ */ a(b.Provider, { value: i, children: /* @__PURE__ */ a(
+    ) }) }) : /* @__PURE__ */ a(g.Provider, { value: n, children: /* @__PURE__ */ a(
       "button",
       {
         ref: u,
         type: "button",
         role: "checkbox",
-        "aria-checked": n,
+        "aria-checked": c,
         disabled: l,
-        className: w(n, l, t),
+        className: w(c, l, o),
         "data-component": "choice-card",
-        "data-selected": n || void 0,
+        "data-selected": c || void 0,
         onClick: () => s.toggle(e),
-        children: o
+        children: t
       }
     ) });
   }
-);
-V.displayName = "ChoiceCard";
-const j = ({ className: e }) => {
-  const { selected: t, type: o } = c.useContext(b);
-  return o === "multiple" ? /* @__PURE__ */ a(
-    "div",
-    {
-      className: p(
-        "w-5 h-5 rounded border-2 flex items-center justify-center shrink-0 transition-colors",
-        t ? "border-brand bg-brand text-brand-foreground" : "border-stroke-field bg-transparent",
-        e
-      ),
-      "aria-hidden": "true",
-      children: t && /* @__PURE__ */ a(G, { size: 12 })
-    }
-  ) : /* @__PURE__ */ a(
-    "div",
-    {
-      className: p(
-        "w-5 h-5 rounded-full border-2 flex items-center justify-center shrink-0 transition-colors",
-        t ? "border-brand" : "border-stroke-field",
-        e
-      ),
-      "aria-hidden": "true",
-      children: t && /* @__PURE__ */ a("div", { className: "w-2.5 h-2.5 rounded-full bg-brand" })
-    }
-  );
-};
-j.displayName = "ChoiceCardIndicator";
-const z = c.forwardRef(
-  ({ className: e, children: t, ...o }, r) => /* @__PURE__ */ a(
+), q = p(
+  "ChoiceCardIndicator",
+  ({ className: e }, o) => {
+    const { selected: t, type: r } = i.useContext(g);
+    return r === "multiple" ? /* @__PURE__ */ a(
+      "div",
+      {
+        ref: o,
+        className: h(
+          "w-5 h-5 rounded border-2 flex items-center justify-center shrink-0 transition-colors",
+          t ? "border-brand bg-brand text-brand-foreground" : "border-stroke-field bg-transparent",
+          e
+        ),
+        "aria-hidden": "true",
+        children: t && /* @__PURE__ */ a(M, { size: 12 })
+      }
+    ) : /* @__PURE__ */ a(
+      "div",
+      {
+        ref: o,
+        className: h(
+          "w-5 h-5 rounded-full border-2 flex items-center justify-center shrink-0 transition-colors",
+          t ? "border-brand" : "border-stroke-field",
+          e
+        ),
+        "aria-hidden": "true",
+        children: t && /* @__PURE__ */ a("div", { className: "w-2.5 h-2.5 rounded-full bg-brand" })
+      }
+    );
+  }
+), A = p(
+  "ChoiceCardContent",
+  ({ className: e, children: o, ...t }, r) => /* @__PURE__ */ a(
     "div",
     {
       ref: r,
-      className: p("flex flex-col items-start gap-2 w-full", e),
+      className: h("flex flex-col items-start gap-2 w-full", e),
       "data-slot": "choice-card-content",
-      ...o,
-      children: t
+      ...t,
+      children: o
     }
   )
-);
-z.displayName = "ChoiceCardContent";
-const I = c.forwardRef(
-  ({ className: e, children: t, ...o }, r) => /* @__PURE__ */ a(
-    "div",
-    {
-      ref: r,
-      className: p("flex items-center justify-center shrink-0", e),
-      "data-slot": "choice-card-media",
-      ...o,
-      children: t
-    }
-  )
-);
-I.displayName = "ChoiceCardMedia";
-const D = c.forwardRef(
-  ({ className: e, children: t, ...o }, r) => /* @__PURE__ */ a(
-    "h3",
-    {
-      ref: r,
-      className: p(
-        "text-base font-medium leading-tight text-content capitalize",
-        e
-      ),
-      ...o,
-      children: t
-    }
-  )
-);
-D.displayName = "ChoiceCardTitle";
-const H = c.forwardRef(
-  ({ className: e, children: t, ...o }, r) => /* @__PURE__ */ a(
+), B = p("ChoiceCardMedia", ({ className: e, children: o, ...t }, r) => /* @__PURE__ */ a(
+  "div",
+  {
+    ref: r,
+    className: h("flex items-center justify-center shrink-0", e),
+    "data-slot": "choice-card-media",
+    ...t,
+    children: o
+  }
+)), F = p("ChoiceCardTitle", ({ className: e, children: o, ...t }, r) => /* @__PURE__ */ a(
+  "h3",
+  {
+    ref: r,
+    className: h(
+      "text-base font-medium leading-tight text-content capitalize",
+      e
+    ),
+    ...t,
+    children: o
+  }
+)), J = p(
+  "ChoiceCardHeader",
+  ({ className: e, children: o, ...t }, r) => /* @__PURE__ */ a(
     "div",
     {
       ref: r,
-      className: p("flex items-center gap-1 w-full", e),
+      className: h("flex items-center gap-1 w-full", e),
       "data-slot": "choice-card-header",
-      ...o,
-      children: t
+      ...t,
+      children: o
     }
   )
-);
-H.displayName = "ChoiceCardHeader";
-const T = c.forwardRef(({ className: e, children: t, ...o }, r) => /* @__PURE__ */ a(
+), K = p("ChoiceCardDescription", ({ className: e, children: o, ...t }, r) => /* @__PURE__ */ a(
   "p",
   {
     ref: r,
-    className: p("text-xs font-medium leading-4 text-content-secondary", e),
-    ...o,
-    children: t
+    className: h("text-xs font-medium leading-4 text-content-secondary", e),
+    ...t,
+    children: o
   }
 ));
-T.displayName = "ChoiceCardDescription";
 export {
-  V as ChoiceCard,
-  z as ChoiceCardContent,
-  T as ChoiceCardDescription,
-  P as ChoiceCardGroup,
-  H as ChoiceCardHeader,
-  j as ChoiceCardIndicator,
-  I as ChoiceCardMedia,
-  D as ChoiceCardTitle,
-  F as useChoiceCardGroup
+  E as ChoiceCard,
+  A as ChoiceCardContent,
+  K as ChoiceCardDescription,
+  V as ChoiceCardGroup,
+  J as ChoiceCardHeader,
+  q as ChoiceCardIndicator,
+  B as ChoiceCardMedia,
+  F as ChoiceCardTitle,
+  T as useChoiceCardGroup
 };