@cfx-dev/ui-components 4.5.1 → 4.5.3

package/dist/components/Checkbox/Checkbox.d.ts

@@ -8,6 +8,7 @@ export interface CheckboxProps extends Omit<CheckboxUi.CheckboxProps, 'color'>,
     rootClassName?: string;
     indicatorClassName?: string;
     iconIndicator?: React.ComponentType;
+    name?: string;
 }
 declare function Checkbox(props: CheckboxProps): import("react/jsx-runtime").JSX.Element;
 declare const _default: React.MemoExoticComponent<typeof Checkbox>;

package/dist/components/Checkbox/Checkbox.js

@@ -1,5 +1,5 @@
-import { jsx as u, jsxs as w, Fragment as $ } from "react/jsx-runtime";
-import * as l from "react";
+import { jsx as a, jsxs as w, Fragment as $ } from "react/jsx-runtime";
+import * as u from "react";
 import G from "react";
 import { c as K, P as E, d as X, u as B, e as q, f as J } from "../../index-DCuJlMqr.js";
 import { u as Q } from "../../index-BZPx6jYI.js";
@@ -57,137 +57,137 @@ import "../Icons/cfx-icons-big/Warning.js";
 import "../Icons/cfx-icons-big/Confirm.js";
 import { clsx as g } from "../../utils/clsx.js";
 import { getColor as Z } from "../../utils/color.js";
-var R = "Checkbox", [ee, bo] = K(R), [oe, N] = ee(R);
+var y = "Checkbox", [ee, ko] = K(y), [oe, N] = ee(y);
 function te(o) {
   const {
-    __scopeCheckbox: n,
-    checked: r,
-    children: a,
+    __scopeCheckbox: i,
+    checked: c,
+    children: d,
     defaultChecked: t,
     disabled: e,
     form: f,
     name: _,
-    onCheckedChange: d,
-    required: m,
-    value: h = "on",
+    onCheckedChange: m,
+    required: h,
+    value: l = "on",
     // @ts-expect-error
-    internal_do_not_use_render: i
-  } = o, [p, C] = X({
-    prop: r,
+    internal_do_not_use_render: r
+  } = o, [p, v] = X({
+    prop: c,
     defaultProp: t ?? !1,
-    onChange: d,
-    caller: R
-  }), [x, v] = l.useState(null), [I, c] = l.useState(null), s = l.useRef(!1), y = x ? !!f || !!x.closest("form") : (
+    onChange: m,
+    caller: y
+  }), [k, b] = u.useState(null), [I, n] = u.useState(null), s = u.useRef(!1), R = k ? !!f || !!k.closest("form") : (
     // We set this to true by default so that events bubble to forms without JS (SSR)
     !0
   ), P = {
     checked: p,
     disabled: e,
-    setChecked: C,
-    control: x,
-    setControl: v,
+    setChecked: v,
+    control: k,
+    setControl: b,
     name: _,
     form: f,
-    value: h,
+    value: l,
     hasConsumerStoppedPropagationRef: s,
-    required: m,
-    defaultChecked: k(t) ? !1 : t,
-    isFormControl: y,
+    required: h,
+    defaultChecked: x(t) ? !1 : t,
+    isFormControl: R,
     bubbleInput: I,
-    setBubbleInput: c
+    setBubbleInput: n
   };
-  return /* @__PURE__ */ u(
+  return /* @__PURE__ */ a(
     oe,
     {
-      scope: n,
+      scope: i,
       ...P,
-      children: re(i) ? i(P) : a
+      children: re(r) ? r(P) : d
     }
   );
 }
-var T = "CheckboxTrigger", M = l.forwardRef(
-  ({ __scopeCheckbox: o, onKeyDown: n, onClick: r, ...a }, t) => {
+var T = "CheckboxTrigger", M = u.forwardRef(
+  ({ __scopeCheckbox: o, onKeyDown: i, onClick: c, ...d }, t) => {
     const {
       control: e,
       value: f,
       disabled: _,
-      checked: d,
-      required: m,
-      setControl: h,
-      setChecked: i,
+      checked: m,
+      required: h,
+      setControl: l,
+      setChecked: r,
       hasConsumerStoppedPropagationRef: p,
-      isFormControl: C,
-      bubbleInput: x
-    } = N(T, o), v = B(t, h), I = l.useRef(d);
-    return l.useEffect(() => {
-      const c = e == null ? void 0 : e.form;
-      if (c) {
-        const s = () => i(I.current);
-        return c.addEventListener("reset", s), () => c.removeEventListener("reset", s);
+      isFormControl: v,
+      bubbleInput: k
+    } = N(T, o), b = B(t, l), I = u.useRef(m);
+    return u.useEffect(() => {
+      const n = e == null ? void 0 : e.form;
+      if (n) {
+        const s = () => r(I.current);
+        return n.addEventListener("reset", s), () => n.removeEventListener("reset", s);
       }
-    }, [e, i]), /* @__PURE__ */ u(
+    }, [e, r]), /* @__PURE__ */ a(
       E.button,
       {
         type: "button",
         role: "checkbox",
-        "aria-checked": k(d) ? "mixed" : d,
-        "aria-required": m,
-        "data-state": O(d),
+        "aria-checked": x(m) ? "mixed" : m,
+        "aria-required": h,
+        "data-state": O(m),
         "data-disabled": _ ? "" : void 0,
         disabled: _,
         value: f,
-        ...a,
-        ref: v,
-        onKeyDown: q(n, (c) => {
-          c.key === "Enter" && c.preventDefault();
+        ...d,
+        ref: b,
+        onKeyDown: q(i, (n) => {
+          n.key === "Enter" && n.preventDefault();
         }),
-        onClick: q(r, (c) => {
-          i((s) => k(s) ? !0 : !s), x && C && (p.current = c.isPropagationStopped(), p.current || c.stopPropagation());
+        onClick: q(c, (n) => {
+          r((s) => x(s) ? !0 : !s), k && v && (p.current = n.isPropagationStopped(), p.current || n.stopPropagation());
         })
       }
     );
   }
 );
 M.displayName = T;
-var U = l.forwardRef(
-  (o, n) => {
+var U = u.forwardRef(
+  (o, i) => {
     const {
-      __scopeCheckbox: r,
-      name: a,
+      __scopeCheckbox: c,
+      name: d,
       checked: t,
       defaultChecked: e,
       required: f,
       disabled: _,
-      value: d,
-      onCheckedChange: m,
-      form: h,
-      ...i
+      value: m,
+      onCheckedChange: h,
+      form: l,
+      ...r
     } = o;
-    return /* @__PURE__ */ u(
+    return /* @__PURE__ */ a(
       te,
       {
-        __scopeCheckbox: r,
+        __scopeCheckbox: c,
         checked: t,
         defaultChecked: e,
         disabled: _,
         required: f,
-        onCheckedChange: m,
-        name: a,
-        form: h,
-        value: d,
+        onCheckedChange: h,
+        name: d,
+        form: l,
+        value: m,
         internal_do_not_use_render: ({ isFormControl: p }) => /* @__PURE__ */ w($, { children: [
-          /* @__PURE__ */ u(
+          /* @__PURE__ */ a(
             M,
             {
-              ...i,
-              ref: n,
-              __scopeCheckbox: r
+              ...r,
+              ref: i,
+              __scopeCheckbox: c
             }
           ),
-          p && /* @__PURE__ */ u(
+          p && /* @__PURE__ */ a(
             L,
             {
-              __scopeCheckbox: r
+              __scopeCheckbox: c
             }
           )
         ] })
@@ -195,21 +195,21 @@ var U = l.forwardRef(
     );
   }
 );
-U.displayName = R;
-var A = "CheckboxIndicator", D = l.forwardRef(
-  (o, n) => {
-    const { __scopeCheckbox: r, forceMount: a, ...t } = o, e = N(A, r);
-    return /* @__PURE__ */ u(
+U.displayName = y;
+var A = "CheckboxIndicator", D = u.forwardRef(
+  (o, i) => {
+    const { __scopeCheckbox: c, forceMount: d, ...t } = o, e = N(A, c);
+    return /* @__PURE__ */ a(
       V,
       {
-        present: a || k(e.checked) || e.checked === !0,
-        children: /* @__PURE__ */ u(
+        present: d || x(e.checked) || e.checked === !0,
+        children: /* @__PURE__ */ a(
           E.span,
           {
             "data-state": O(e.checked),
             "data-disabled": e.disabled ? "" : void 0,
             ...t,
-            ref: n,
+            ref: i,
             style: { pointerEvents: "none", ...o.style }
           }
         )
@@ -218,50 +218,50 @@ var A = "CheckboxIndicator", D = l.forwardRef(
   }
 );
 D.displayName = A;
-var F = "CheckboxBubbleInput", L = l.forwardRef(
-  ({ __scopeCheckbox: o, ...n }, r) => {
+var F = "CheckboxBubbleInput", L = u.forwardRef(
+  ({ __scopeCheckbox: o, ...i }, c) => {
     const {
-      control: a,
+      control: d,
       hasConsumerStoppedPropagationRef: t,
       checked: e,
       defaultChecked: f,
       required: _,
-      disabled: d,
-      name: m,
-      value: h,
-      form: i,
+      disabled: m,
+      name: h,
+      value: l,
+      form: r,
       bubbleInput: p,
-      setBubbleInput: C
-    } = N(F, o), x = B(r, C), v = Q(e), I = J(a);
-    l.useEffect(() => {
+      setBubbleInput: v
+    } = N(F, o), k = B(c, v), b = Q(e), I = J(d);
+    u.useEffect(() => {
       const s = p;
       if (!s) return;
-      const y = window.HTMLInputElement.prototype, S = Object.getOwnPropertyDescriptor(
-        y,
+      const R = window.HTMLInputElement.prototype, S = Object.getOwnPropertyDescriptor(
+        R,
         "checked"
       ).set, j = !t.current;
-      if (v !== e && S) {
+      if (b !== e && S) {
         const H = new Event("click", { bubbles: j });
-        s.indeterminate = k(e), S.call(s, k(e) ? !1 : e), s.dispatchEvent(H);
+        s.indeterminate = x(e), S.call(s, x(e) ? !1 : e), s.dispatchEvent(H);
       }
-    }, [p, v, e, t]);
-    const c = l.useRef(k(e) ? !1 : e);
-    return /* @__PURE__ */ u(
+    }, [p, b, e, t]);
+    const n = u.useRef(x(e) ? !1 : e);
+    return /* @__PURE__ */ a(
       E.input,
       {
         type: "checkbox",
         "aria-hidden": !0,
-        defaultChecked: f ?? c.current,
+        defaultChecked: f ?? n.current,
         required: _,
-        disabled: d,
-        name: m,
-        value: h,
-        form: i,
-        ...n,
+        disabled: m,
+        name: h,
+        value: l,
+        form: r,
+        ...i,
         tabIndex: -1,
-        ref: x,
+        ref: k,
         style: {
-          ...n.style,
+          ...i.style,
           ...I,
           position: "absolute",
           pointerEvents: "none",
@@ -280,13 +280,13 @@ L.displayName = F;
 function re(o) {
   return typeof o == "function";
 }
-function k(o) {
+function x(o) {
   return o === "indeterminate";
 }
 function O(o) {
-  return k(o) ? "indeterminate" : o ? "checked" : "unchecked";
+  return x(o) ? "indeterminate" : o ? "checked" : "unchecked";
 }
-const ce = "cfxui__Checkbox__rootUnset__cbb57", ne = "cfxui__Checkbox__root__865aa", ie = "cfxui__Checkbox__square__029aa", se = "cfxui__Checkbox__indicator__2afc0", ae = "cfxui__Checkbox__checked__b4081", de = "cfxui__Checkbox__radioIcon__719e7", me = "cfxui__Checkbox__tickIcon__a7f19", b = {
+const ce = "cfxui__Checkbox__rootUnset__cbb57", ne = "cfxui__Checkbox__root__865aa", ie = "cfxui__Checkbox__square__029aa", se = "cfxui__Checkbox__indicator__2afc0", ae = "cfxui__Checkbox__checked__b4081", de = "cfxui__Checkbox__radioIcon__719e7", me = "cfxui__Checkbox__tickIcon__a7f19", C = {
   rootUnset: ce,
   root: ne,
   square: ie,
@@ -300,41 +300,51 @@ const ce = "cfxui__Checkbox__rootUnset__cbb57", ne = "cfxui__Checkbox__root__865
 };
 function pe(o) {
   const {
-    id: n,
-    size: r = "normal",
-    rootClassName: a,
+    id: i,
+    size: c = "normal",
+    rootClassName: d,
     indicatorClassName: t,
     colorToken: e,
     color: f,
     opacity: _,
-    luminance: d,
-    iconIndicator: m = z,
-    ...h
-  } = o, i = g(
-    b.root,
-    b.rootUnset,
-    b[`size-${r}`],
-    a
-  ), p = Z(o), C = g(
-    b.checked,
-    m === Y && b.tickIcon,
-    m === z && b.radioIcon
+    luminance: m,
+    checked: h,
+    name: l,
+    iconIndicator: r = z,
+    ...p
+  } = o, v = g(
+    C.root,
+    C.rootUnset,
+    C[`size-${c}`],
+    d
+  ), k = Z(o), b = g(
+    C.checked,
+    r === Y && C.tickIcon,
+    r === z && C.radioIcon
   );
   return /* @__PURE__ */ w(
     U,
     {
-      ...h,
-      id: n,
-      style: { color: p },
-      className: i,
+      ...p,
+      id: i,
+      checked: h,
+      style: { color: k },
+      className: v,
       children: [
-        /* @__PURE__ */ u(W, { className: b.square }),
-        /* @__PURE__ */ u(D, { className: g(b.indicator, t), children: /* @__PURE__ */ u(m, { className: C }) })
+        l && /* @__PURE__ */ a(
+          "input",
+          {
+            type: "hidden",
+            name: l
+          }
+        ),
+        /* @__PURE__ */ a(W, { className: C.square }),
+        /* @__PURE__ */ a(D, { className: g(C.indicator, t), children: /* @__PURE__ */ a(r, { className: b }) })
       ]
     }
   );
 }
-const ko = G.memo(pe);
+const bo = G.memo(pe);
 export {
-  ko as default
+  bo as default
 };

package/dist/components/DropdownSelect/DropdownSelect.d.ts

@@ -12,9 +12,10 @@ export interface DropdownSelectProps<T = string> {
     placeholder?: React.ReactNode;
     size?: ResponsiveValueType<InputSize>;
     disabled?: boolean;
+    ref?: React.Ref<HTMLButtonElement>;
     fullWidth?: boolean;
     onlight?: boolean;
-    ref?: React.Ref<HTMLButtonElement>;
+    name?: string;
 }
 export declare function DropdownSelect(props: DropdownSelectProps): import("react/jsx-runtime").JSX.Element;
 export default DropdownSelect;

package/dist/components/DropdownSelect/DropdownSelect.js

@@ -1,75 +1,84 @@
-import { jsxs as d, jsx as s } from "react/jsx-runtime";
-import { g as D, R as W, T as N, D as R } from "../../DropdownContent-BertjH0y.js";
-import f, { useRef as v, useState as b, useEffect as z } from "react";
-import I from "../Flex/Flex.js";
-import { clsx as T } from "../../utils/clsx.js";
-import { Icon as j } from "../Icon/Icon.js";
+import { jsxs as f, jsx as l } from "react/jsx-runtime";
+import { g as W, R as N, T as R, D as v } from "../../DropdownContent-BertjH0y.js";
+import _, { useRef as b, useState as z, useEffect as I } from "react";
+import T from "../Flex/Flex.js";
+import { clsx as j } from "../../utils/clsx.js";
+import { Icon as y } from "../Icon/Icon.js";
 import { mergeRefs as E } from "../../utils/mergeRefs.js";
-const M = "cfxui__DropdownSelect__icon__d05b8", O = "cfxui__DropdownSelect__trigger__c03df", k = "cfxui__DropdownSelect__onlight__f0191", y = "cfxui__DropdownSelect__fullWidth__dce56", A = "cfxui__DropdownSelect__placeholder__e0d89", e = {
+const M = "cfxui__DropdownSelect__icon__d05b8", O = "cfxui__DropdownSelect__trigger__c03df", k = "cfxui__DropdownSelect__onlight__f0191", A = "cfxui__DropdownSelect__fullWidth__dce56", B = "cfxui__DropdownSelect__placeholder__e0d89", e = {
   icon: M,
   trigger: O,
   onlight: k,
-  fullWidth: y,
-  placeholder: A
-}, J = {
+  fullWidth: A,
+  placeholder: B
+}, K = {
   small: "xxsmall",
   normal: "xsmall",
   large: "normal"
 };
-function K(_) {
+function L(g) {
   const {
-    options: t,
-    value: l,
+    options: r,
+    value: t,
     onChange: c,
     size: i = "normal",
     fullWidth: o = !1,
-    onlight: g = !1,
-    disabled: m,
+    onlight: m = !1,
+    disabled: p,
     placeholder: u = "Select...",
-    ref: p
-  } = _, r = v(null), [h, x] = b(void 0), S = D(i, "trigger"), w = T(
-    S,
+    ref: h,
+    name: a
+  } = g, n = b(null), [x, S] = z(void 0), w = W(i, "trigger"), C = j(
+    w,
     e.trigger,
     {
-      [e.placeholder]: !l,
+      [e.placeholder]: !t,
       [e.fullWidth]: o,
-      [e.onlight]: g
+      [e.onlight]: m
     }
-  ), C = f.useCallback((n) => {
-    c(n);
-  }, [c]), a = f.useMemo(
-    () => t.find((n) => n.value === l),
-    [t, l]
+  ), D = _.useCallback((s) => {
+    c(s);
+  }, [c]), d = _.useMemo(
+    () => r.find((s) => s.value === t),
+    [r, t]
   );
-  return z(() => {
-    o && r.current && x(r.current.offsetWidth);
-  }, [o]), /* @__PURE__ */ d(W, { children: [
-    /* @__PURE__ */ s(
-      N,
+  return I(() => {
+    o && n.current && S(n.current.offsetWidth);
+  }, [o]), /* @__PURE__ */ f(N, { children: [
+    a && /* @__PURE__ */ l(
+      "input",
       {
-        ref: E(p, r),
-        className: w,
-        disabled: m,
-        children: /* @__PURE__ */ d(I, { gap: "small", centered: !0, spaceBetween: !0, children: [
-          a !== void 0 ? a.label : u,
-          /* @__PURE__ */ s(j, { className: e.icon, name: "DownChevron" })
-        ] })
+        type: "hidden",
+        name: a,
+        value: t
       }
     ),
-    /* @__PURE__ */ s(
+    /* @__PURE__ */ l(
       R,
       {
-        triggerWidth: h,
-        options: t,
+        ref: E(h, n),
+        className: C,
+        disabled: p,
+        children: /* @__PURE__ */ f(T, { gap: "small", centered: !0, spaceBetween: !0, children: [
+          d !== void 0 ? d.label : u,
+          /* @__PURE__ */ l(y, { className: e.icon, name: "DownChevron" })
+        ] })
+      }
+    ),
+    /* @__PURE__ */ l(
+      v,
+      {
+        triggerWidth: x,
+        options: r,
         size: i,
         fullWidth: o,
-        onSelect: C
+        onSelect: D
       }
     )
   ] });
 }
 export {
-  K as DropdownSelect,
-  J as ICON_SIZE_MAP,
-  K as default
+  L as DropdownSelect,
+  K as ICON_SIZE_MAP,
+  L as default
 };

package/dist/components/DropdownSelect/DropdownSelectShowcase.js

@@ -1,10 +1,10 @@
 import { jsxs as l, jsx as e } from "react/jsx-runtime";
 import r from "react";
 import t from "../Flex/Flex.js";
-import { Text as a } from "../Text/Text.js";
+import { Text as o } from "../Text/Text.js";
 import "../../utils/ui/ui.js";
-import { DropdownSelect as o } from "./DropdownSelect.js";
-const c = [
+import { DropdownSelect as a } from "./DropdownSelect.js";
+const n = [
   {
     value: "value_all",
     label: "all"
@@ -19,26 +19,27 @@ const c = [
   }
 ];
 function d() {
-  const [i, n] = r.useState(void 0), [u, s] = r.useState(void 0);
+  const [c, i] = r.useState(void 0), [u, s] = r.useState(void 0);
   return /* @__PURE__ */ l(t, { gap: "large", vertical: !0, pb: 20, children: [
     /* @__PURE__ */ l(t, { gap: "normal", vertical: !0, children: [
-      /* @__PURE__ */ e(a, { children: "Default Select Input" }),
+      /* @__PURE__ */ e(o, { children: "Default Select Input" }),
       /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(
-        o,
+        a,
         {
-          options: c,
-          onChange: n,
-          value: i
+          options: n,
+          onChange: i,
+          value: c,
+          name: "DropdownSelect"
         }
       ) })
     ] }),
     /* @__PURE__ */ l(t, { gap: "normal", vertical: !0, children: [
-      /* @__PURE__ */ e(a, { children: "Full Width Select Input" }),
+      /* @__PURE__ */ e(o, { children: "Full Width Select Input" }),
       /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(
-        o,
+        a,
         {
           size: "large",
-          options: c,
+          options: n,
           fullWidth: !0,
           value: u,
           onChange: s

package/dist/components/Input/Input.d.ts

@@ -1,18 +1,19 @@
 import { default as React } from 'react';
 import { IconName } from '../Icon';
 import { ResponsiveValueType } from '../../utils/ui';
+import { InputSize, InputTheme } from './Input.types';
 
-export type InputSize = 'small' | 'normal' | 'large';
-export type InputTheme = 'default' | 'onlight';
 type InputTypeSpecificProps = {
     type?: 'text' | 'password' | 'search';
     value?: string;
+    defaultValue?: string;
 } | {
     type: 'number';
     min?: number | string;
     max?: number | string;
     step?: number | string;
     value?: number | string;
+    defaultValue?: number | string;
 };
 export type InputProps = InputTypeSpecificProps & {
     name?: string;