@cfx-dev/ui-components 4.5.1 → 4.5.3

package/dist/components/StyledInput/StyledInput.d.ts

@@ -0,0 +1,12 @@
+import { default as React } from 'react';
+import { InputSize, InputTheme } from '../Input/Input.types';
+import { ResponsiveValueType } from '../../utils/ui';
+
+export interface StyledInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'> {
+    className?: string;
+    size?: ResponsiveValueType<InputSize>;
+    theme?: InputTheme;
+    ref?: React.Ref<HTMLInputElement>;
+}
+declare function StyledInput(props: StyledInputProps): import("react/jsx-runtime").JSX.Element;
+export default StyledInput;

package/dist/components/StyledInput/StyledInput.js

@@ -0,0 +1,46 @@
+import { jsx as n } from "react/jsx-runtime";
+import { clsx as m } from "../../utils/clsx.js";
+import { ui as p } from "../../utils/ui/ui.js";
+const s = "cfxui__StyledInput__root__37064", S = "cfxui__StyledInput__small__0f240", r = "cfxui__StyledInput__large__a3ad2", d = "cfxui__StyledInput__onlight__dcd8f", l = {
+  root: s,
+  small: S,
+  large: r,
+  onlight: d,
+  "inputSizeinitial-large": "cfxui__StyledInput__inputSizeinitial-large__a31e6",
+  "inputSizeinitial-small": "cfxui__StyledInput__inputSizeinitial-small__77433",
+  "inputSizesmall-large": "cfxui__StyledInput__inputSizesmall-large__eb62a",
+  "inputSizesmall-small": "cfxui__StyledInput__inputSizesmall-small__d5e87",
+  "inputSizesmall-medium-large": "cfxui__StyledInput__inputSizesmall-medium-large__b13be",
+  "inputSizesmall-medium-small": "cfxui__StyledInput__inputSizesmall-medium-small__a9d00",
+  "inputSizemedium-large": "cfxui__StyledInput__inputSizemedium-large__75764",
+  "inputSizemedium-small": "cfxui__StyledInput__inputSizemedium-small__43151",
+  "inputSizemedium-large-large": "cfxui__StyledInput__inputSizemedium-large-large__3f450",
+  "inputSizemedium-large-small": "cfxui__StyledInput__inputSizemedium-large-small__eba0f",
+  "inputSizelarge-large": "cfxui__StyledInput__inputSizelarge-large__19572",
+  "inputSizelarge-small": "cfxui__StyledInput__inputSizelarge-small__3ecc3",
+  "inputSizexlarge-large": "cfxui__StyledInput__inputSizexlarge-large__06e9b",
+  "inputSizexlarge-small": "cfxui__StyledInput__inputSizexlarge-small__b318f"
+};
+function f(e) {
+  const {
+    className: i,
+    size: _ = "normal",
+    theme: t = "default",
+    ...u
+  } = e;
+  return /* @__PURE__ */ n(
+    "input",
+    {
+      className: m(
+        i,
+        l.root,
+        l[t],
+        p.getResponsiveFlatClassnames("input-size", _).map((a) => l[a])
+      ),
+      ...u
+    }
+  );
+}
+export {
+  f as default
+};

package/dist/components/StyledInput/index.d.ts

@@ -0,0 +1,2 @@
+export { default as StyledInput } from './StyledInput';
+export type { StyledInputProps } from './StyledInput';

package/dist/components/StyledInput/index.js

@@ -0,0 +1,4 @@
+import { default as a } from "./StyledInput.js";
+export {
+  a as StyledInput
+};

package/dist/components/StyledTextarea/StyledTextarea.d.ts

@@ -0,0 +1,10 @@
+import { default as React } from 'react';
+
+export type TextareaResizeType = 'none' | 'vertical' | 'horizontal' | 'both';
+export interface StyledTextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
+    className?: string;
+    resize?: TextareaResizeType;
+    ref?: React.Ref<HTMLTextAreaElement>;
+}
+declare function StyledTextarea(props: StyledTextareaProps): import("react/jsx-runtime").JSX.Element;
+export default StyledTextarea;

package/dist/components/StyledTextarea/StyledTextarea.js

@@ -0,0 +1,32 @@
+import { jsx as s } from "react/jsx-runtime";
+import { clsx as i } from "../../utils/clsx.js";
+const c = "cfxui__StyledTextarea__root__8c3b9", e = {
+  root: c,
+  "resize-none": "cfxui__StyledTextarea__resize-none__e5b55",
+  "resize-vertical": "cfxui__StyledTextarea__resize-vertical__717ec",
+  "resize-horizontal": "cfxui__StyledTextarea__resize-horizontal__4f44b",
+  "resize-both": "cfxui__StyledTextarea__resize-both__c451f"
+};
+function n(r) {
+  const {
+    className: t,
+    resize: _ = "none",
+    ref: o,
+    ...a
+  } = r;
+  return /* @__PURE__ */ s(
+    "textarea",
+    {
+      className: i(
+        e.root,
+        t,
+        e[`resize-${_}`]
+      ),
+      ref: o,
+      ...a
+    }
+  );
+}
+export {
+  n as default
+};

package/dist/components/StyledTextarea/index.d.ts

@@ -0,0 +1,2 @@
+export { default as StyledTextarea } from './StyledTextarea';
+export type { StyledTextareaProps, TextareaResizeType } from './StyledTextarea';

package/dist/components/StyledTextarea/index.js

@@ -0,0 +1,4 @@
+import { default as t } from "./StyledTextarea.js";
+export {
+  t as StyledTextarea
+};

package/dist/components/Switch/Switch.js

@@ -1,72 +1,72 @@
-import { jsxs as I, jsx as i } from "react/jsx-runtime";
+import { jsxs as P, jsx as i } from "react/jsx-runtime";
 import * as r from "react";
 import M from "react";
-import { u as k, d as H, c as j, P as x, e as A, f as q } from "../../index-DCuJlMqr.js";
+import { u as x, d as H, c as j, P as y, e as A, f as q } from "../../index-DCuJlMqr.js";
 import { u as z } from "../../index-BZPx6jYI.js";
-import { clsx as P } from "../../utils/clsx.js";
-var m = "Switch", [L, et] = j(m), [O, $] = L(m), y = r.forwardRef(
+import { clsx as k } from "../../utils/clsx.js";
+var w = "Switch", [L, et] = j(w), [O, $] = L(w), T = r.forwardRef(
   (e, s) => {
     const {
       __scopeSwitch: t,
       name: o,
       checked: c,
-      defaultChecked: w,
-      required: u,
-      disabled: a,
-      value: h = "on",
+      defaultChecked: u,
+      required: h,
+      disabled: n,
+      value: d = "on",
       onCheckedChange: _,
-      form: n,
+      form: a,
       ...S
-    } = e, [d, l] = r.useState(null), b = k(s, (f) => l(f)), v = r.useRef(!1), R = d ? n || !!d.closest("form") : !0, [p, B] = H({
+    } = e, [p, l] = r.useState(null), b = x(s, (m) => l(m)), v = r.useRef(!1), R = p ? a || !!p.closest("form") : !0, [f, U] = H({
       prop: c,
-      defaultProp: w ?? !1,
+      defaultProp: u ?? !1,
       onChange: _,
-      caller: m
+      caller: w
     });
-    return /* @__PURE__ */ I(O, { scope: t, checked: p, disabled: a, children: [
+    return /* @__PURE__ */ P(O, { scope: t, checked: f, disabled: n, children: [
       /* @__PURE__ */ i(
-        x.button,
+        y.button,
         {
           type: "button",
           role: "switch",
-          "aria-checked": p,
-          "aria-required": u,
-          "data-state": g(p),
-          "data-disabled": a ? "" : void 0,
-          disabled: a,
-          value: h,
+          "aria-checked": f,
+          "aria-required": h,
+          "data-state": B(f),
+          "data-disabled": n ? "" : void 0,
+          disabled: n,
+          value: d,
           ...S,
           ref: b,
-          onClick: A(e.onClick, (f) => {
-            B((U) => !U), R && (v.current = f.isPropagationStopped(), v.current || f.stopPropagation());
+          onClick: A(e.onClick, (m) => {
+            U((I) => !I), R && (v.current = m.isPropagationStopped(), v.current || m.stopPropagation());
           })
         }
       ),
       R && /* @__PURE__ */ i(
-        E,
+        g,
         {
-          control: d,
+          control: p,
           bubbles: !v.current,
           name: o,
-          value: h,
-          checked: p,
-          required: u,
-          disabled: a,
-          form: n,
+          value: d,
+          checked: f,
+          required: h,
+          disabled: n,
+          form: a,
           style: { transform: "translateX(-100%)" }
         }
       )
     ] });
   }
 );
-y.displayName = m;
-var T = "SwitchThumb", N = r.forwardRef(
+T.displayName = w;
+var N = "SwitchThumb", E = r.forwardRef(
   (e, s) => {
-    const { __scopeSwitch: t, ...o } = e, c = $(T, t);
+    const { __scopeSwitch: t, ...o } = e, c = $(N, t);
     return /* @__PURE__ */ i(
-      x.span,
+      y.span,
       {
-        "data-state": g(c.checked),
+        "data-state": B(c.checked),
         "data-disabled": c.disabled ? "" : void 0,
         ...o,
         ref: s
@@ -74,28 +74,28 @@ var T = "SwitchThumb", N = r.forwardRef(
     );
   }
 );
-N.displayName = T;
-var D = "SwitchBubbleInput", E = r.forwardRef(
+E.displayName = N;
+var D = "SwitchBubbleInput", g = r.forwardRef(
   ({
     __scopeSwitch: e,
     control: s,
     checked: t,
     bubbles: o = !0,
     ...c
-  }, w) => {
-    const u = r.useRef(null), a = k(u, w), h = z(t), _ = q(s);
+  }, u) => {
+    const h = r.useRef(null), n = x(h, u), d = z(t), _ = q(s);
     return r.useEffect(() => {
-      const n = u.current;
-      if (!n) return;
+      const a = h.current;
+      if (!a) return;
       const S = window.HTMLInputElement.prototype, l = Object.getOwnPropertyDescriptor(
         S,
         "checked"
       ).set;
-      if (h !== t && l) {
+      if (d !== t && l) {
         const b = new Event("click", { bubbles: o });
-        l.call(n, t), n.dispatchEvent(b);
+        l.call(a, t), a.dispatchEvent(b);
       }
-    }, [h, t, o]), /* @__PURE__ */ i(
+    }, [d, t, o]), /* @__PURE__ */ i(
       "input",
       {
         type: "checkbox",
@@ -103,7 +103,7 @@ var D = "SwitchBubbleInput", E = r.forwardRef(
         defaultChecked: t,
         ...c,
         tabIndex: -1,
-        ref: a,
+        ref: n,
         style: {
           ...c.style,
           ..._,
@@ -116,11 +116,11 @@ var D = "SwitchBubbleInput", E = r.forwardRef(
     );
   }
 );
-E.displayName = D;
-function g(e) {
+g.displayName = D;
+function B(e) {
   return e ? "checked" : "unchecked";
 }
-var F = y, W = N;
+var F = T, W = E;
 const X = "cfxui__Switch__switchUnset__c8b03", G = "cfxui__Switch__switchRoot__f2911", J = "cfxui__Switch__switchThumb__9cbf5", C = {
   switchUnset: X,
   switchRoot: G,
@@ -130,9 +130,21 @@ function K(e) {
   const {
     classNameRoot: s,
     classNameThumb: t,
-    ...o
+    name: o,
+    checked: c,
+    ...u
   } = e;
-  return /* @__PURE__ */ i(F, { ...o, className: P(C.switchRoot, C.switchUnset, s), children: /* @__PURE__ */ i(W, { className: P(C.switchThumb, t) }) });
+  return /* @__PURE__ */ P(F, { ...u, className: k(C.switchRoot, C.switchUnset, s), children: [
+    o && /* @__PURE__ */ i(
+      "input",
+      {
+        type: "hidden",
+        name: o,
+        value: c ? "on" : ""
+      }
+    ),
+    /* @__PURE__ */ i(W, { className: k(C.switchThumb, t) })
+  ] });
 }
 const ot = M.memo(K);
 export {

package/dist/components/Tabular/Tabular.d.ts

@@ -32,9 +32,21 @@ export declare namespace Tabular {
 export interface TabularRootProps extends React.PropsWithChildren, Pick<TabularProps, 'className' | 'ariaLabel' | 'tabIndex' | 'theme' | 'role' | 'size'> {
     style?: React.CSSProperties;
 }
+export interface TabularItemComponentProps {
+    disabled?: boolean;
+    type: HTMLButtonElement['type'];
+    role: HTMLButtonElement['role'];
+    className?: string;
+    onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+    'aria-label'?: string;
+    'aria-controls'?: string;
+    'data-text'?: React.ReactNode;
+    'aria-selected'?: boolean;
+}
 export interface TabularItemProps extends TabularItem {
     active: boolean;
     onClick: (id: string) => void;
     className?: string;
     size?: ResponsiveValueType<TabularSize>;
+    Component?: React.ElementType<TabularItemComponentProps>;
 }

package/dist/components/Tabular/Tabular.js

@@ -1,12 +1,12 @@
-import { jsx as m, jsxs as h } from "react/jsx-runtime";
-import d, { createElement as N } from "react";
-import { Dot as p } from "../Dot/Dot.js";
+import { jsx as m, jsxs as N } from "react/jsx-runtime";
+import d, { createElement as p } from "react";
+import { Dot as C } from "../Dot/Dot.js";
 import { clsx as n } from "../../utils/clsx.js";
-import { ui as C } from "../../utils/ui/ui.js";
-const v = "cfxui__Tabular__reset__b1dbc", k = "cfxui__Tabular__item__98cc3", I = "cfxui__Tabular__root__0ff05", R = "cfxui__Tabular__active__1ae95", y = "cfxui__Tabular__hasNotification__c372f", j = "cfxui__Tabular__content__3a95a", l = {
-  reset: v,
+import { ui as v } from "../../utils/ui/ui.js";
+const k = "cfxui__Tabular__reset__b1dbc", R = "cfxui__Tabular__item__98cc3", I = "cfxui__Tabular__root__0ff05", y = "cfxui__Tabular__active__1ae95", j = "cfxui__Tabular__hasNotification__c372f", A = "cfxui__Tabular__content__3a95a", e = {
+  reset: k,
   "tabular-size-initial-large": "cfxui__Tabular__tabular-size-initial-large__9451f",
-  item: k,
+  item: R,
   "tabular-size-initial-small": "cfxui__Tabular__tabular-size-initial-small__4dad8",
   "tabular-size-small-large": "cfxui__Tabular__tabular-size-small-large__1390c",
   "tabular-size-small-small": "cfxui__Tabular__tabular-size-small-small__cc6e3",
@@ -23,25 +23,25 @@ const v = "cfxui__Tabular__reset__b1dbc", k = "cfxui__Tabular__item__98cc3", I =
   root: I,
   "theme-dark": "cfxui__Tabular__theme-dark__80b8c",
   "theme-light": "cfxui__Tabular__theme-light__c05b9",
-  active: R,
-  hasNotification: y,
-  content: j
+  active: y,
+  hasNotification: j,
+  content: A
 };
 function o(b) {
   const {
     items: s,
     activeItem: t,
-    onActivate: e,
+    onActivate: l,
     itemClassName: i,
     size: u = "medium",
     ..._
   } = b, c = d.useCallback((a) => {
-    e && e(a);
-  }, [e]), r = n(
-    l.root,
+    l && l(a);
+  }, [l]), r = n(
+    e.root,
     _.className
   );
-  return /* @__PURE__ */ m(o.Root, { ..._, className: r, children: s.map((a) => /* @__PURE__ */ N(
+  return /* @__PURE__ */ m(o.Root, { ..._, className: r, children: s.map((a) => /* @__PURE__ */ p(
     o.Item,
     {
       ...a,
@@ -56,13 +56,13 @@ function o(b) {
 o.Root = function(s) {
   const {
     children: t,
-    className: e,
+    className: l,
     ariaLabel: i,
     tabIndex: u,
     theme: _ = "dark",
     role: c = "tablist",
     style: r
-  } = s, a = n(l.root, l[`theme-${_}`], e);
+  } = s, a = n(e.root, e[`theme-${_}`], l);
   return /* @__PURE__ */ m(
     "div",
     {
@@ -78,7 +78,7 @@ o.Root = function(s) {
 o.Item = function(s) {
   const {
     id: t,
-    label: e,
+    label: l,
     onClick: i,
     ariaLabel: u,
     ariaControls: _,
@@ -86,34 +86,35 @@ o.Item = function(s) {
     active: r = !1,
     disabled: a = !1,
     hasNotification: f = !1,
-    size: x
-  } = s, z = d.useCallback(() => {
+    size: x,
+    Component: z
+  } = s, g = d.useCallback(() => {
     a || i(t);
-  }, [a, i, t]), g = n(
-    l.reset,
-    l.item,
+  }, [a, i, t]), T = n(
+    e.reset,
+    e.item,
     c,
-    C.getResponsiveFlatClassnames("tabular-size", x).map((T) => l[T]),
+    v.getResponsiveFlatClassnames("tabular-size", x).map((h) => e[h]),
     {
-      [l.active]: r,
-      [l.hasNotification]: f
+      [e.active]: r,
+      [e.hasNotification]: f
     }
   );
   return /* @__PURE__ */ m(
-    "button",
+    z || "button",
     {
       disabled: a,
       type: "button",
       role: "tab",
-      className: g,
-      onClick: z,
+      className: T,
+      onClick: g,
       "aria-label": u,
       "aria-controls": _,
-      "data-text": e,
+      "data-text": l,
       "aria-selected": r,
-      children: /* @__PURE__ */ h("span", { className: l.content, children: [
-        e,
-        f && /* @__PURE__ */ m(p, { color: "green", className: l.notification })
+      children: /* @__PURE__ */ N("span", { className: e.content, children: [
+        l,
+        f && /* @__PURE__ */ m(C, { color: "green", className: e.notification })
       ] })
     }
   );

package/dist/components/Tabular/index.d.ts

@@ -1,2 +1,2 @@
 export { Tabular } from './Tabular';
-export type { TabularProps, TabularItem, TabularRootProps, } from './Tabular';
+export type { TabularProps, TabularItem, TabularRootProps, TabularItemComponentProps, } from './Tabular';

package/dist/components/Textarea/Textarea.d.ts

@@ -1,15 +1,19 @@
 import { default as React } from 'react';
+import { TextareaResizeType } from '../StyledTextarea';
 
 export interface TextareaProps {
-    value: string;
-    onChange: (value: string) => void;
+    value?: string;
+    defaultValue?: string;
+    onChange?: (value: string) => void;
     label?: React.ReactNode;
     placeholder?: string;
     rows?: number;
     disabled?: boolean;
-    resize?: 'none' | 'vertical' | 'horizontal' | 'both';
+    resize?: TextareaResizeType;
     autofocus?: boolean;
     className?: string;
     backdropBlur?: boolean;
+    name?: string;
+    ref?: React.Ref<HTMLTextAreaElement>;
 }
 export declare function Textarea(props: TextareaProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Textarea/Textarea.js

@@ -1,55 +1,58 @@
-import { jsx as s, jsxs as p } from "react/jsx-runtime";
-import l from "react";
-import { clsx as T } from "../../utils/clsx.js";
-const k = "cfxui__Textarea__root__688b1", v = "cfxui__Textarea__fullWidth__2e853", B = "cfxui__Textarea__disabled__5d783", C = "cfxui__Textarea__error__932cb", N = "cfxui__Textarea__backdropBlur__15cb2", e = {
-  root: k,
-  fullWidth: v,
-  "resize-none": "cfxui__Textarea__resize-none__1130d",
-  "resize-vertical": "cfxui__Textarea__resize-vertical__f856e",
-  "resize-horizontal": "cfxui__Textarea__resize-horizontal__b4b8f",
-  "resize-both": "cfxui__Textarea__resize-both__004b8",
-  disabled: B,
-  error: C,
-  backdropBlur: N
+import { jsx as s, jsxs as C } from "react/jsx-runtime";
+import c from "react";
+import N from "../StyledTextarea/StyledTextarea.js";
+import { clsx as g } from "../../utils/clsx.js";
+const v = "cfxui__Textarea__root__688b1", j = "cfxui__Textarea__textarea__8ab29", F = "cfxui__Textarea__disabled__5d783", I = "cfxui__Textarea__backdropBlur__15cb2", a = {
+  root: v,
+  textarea: j,
+  disabled: F,
+  backdropBlur: I
 };
-function F(c) {
+function S(d) {
   const {
-    value: i,
-    onChange: r,
-    label: a,
-    placeholder: n,
-    rows: d,
-    resize: u = "none",
+    value: n,
+    defaultValue: _,
+    onChange: e,
+    label: t,
+    placeholder: u,
+    rows: i,
+    resize: x = "none",
     disabled: o = !1,
-    autofocus: x,
+    autofocus: b,
     className: f,
-    backdropBlur: b = !1
-  } = c, h = l.useCallback(
-    (m) => {
-      r(m.target.value);
+    backdropBlur: m = !1,
+    name: p,
+    ref: h
+  } = d, k = c.useCallback(
+    (B) => {
+      e && e(B.target.value);
     },
-    [r]
-  ), _ = l.useId(), t = /* @__PURE__ */ s(
-    "textarea",
+    [e]
+  ), r = c.useId(), l = /* @__PURE__ */ s(
+    N,
     {
-      autoFocus: x,
-      id: _,
-      className: e[`resize-${u}`],
-      rows: d,
-      value: i,
+      id: r,
+      className: a.textarea,
+      rows: i,
+      value: n,
+      defaultValue: _,
       disabled: o,
-      onChange: h,
-      placeholder: n
+      onChange: k,
+      placeholder: u,
+      name: p,
+      ref: h,
+      resize: x,
+      autoFocus: b
     }
-  ), z = T(e.root, f, {
-    [e.disabled]: o,
-    [e.backdropBlur]: b
+  ), T = g(a.root, f, {
+    [a.disabled]: o,
+    [a.backdropBlur]: m
   });
-  return /* @__PURE__ */ s("div", { className: z, children: a ? /* @__PURE__ */ p("label", { htmlFor: _, children: [
-    a,
-    t
-  ] }) : t });
+  return /* @__PURE__ */ s("div", { className: T, children: t ? /* @__PURE__ */ C("label", { htmlFor: r, children: [
+    t,
+    l
+  ] }) : l });
 }
 export {
-  F as Textarea
+  S as Textarea
 };

package/dist/components/ToggleGroup/ToggleGroup.d.ts

@@ -26,5 +26,6 @@ export interface ToggleGroupProps {
     multiline?: boolean;
     fullWidth?: boolean;
     size?: ToggleGroupSizeType;
+    name?: string;
 }
 export declare const ToggleGroup: React.NamedExoticComponent<ToggleGroupProps>;