@cfx-dev/ui-components 4.5.1 → 4.5.4

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>;

package/dist/components/ToggleGroup/ToggleGroup.js

@@ -1,77 +1,87 @@
 import { jsxs as m, jsx as d } from "react/jsx-runtime";
-import g from "react";
-import { clsx as f } from "../../utils/clsx.js";
-const b = "cfxui__ToggleGroup__unsetAll__6911e", x = "cfxui__ToggleGroup__root__fb460", v = "cfxui__ToggleGroup__disabled__75462", h = "cfxui__ToggleGroup__fullWidth__0c589", G = "cfxui__ToggleGroup__large__ad624", T = "cfxui__ToggleGroup__options__7bc0c", C = "cfxui__ToggleGroup__option__8436c", W = "cfxui__ToggleGroup__active__84da0", k = "cfxui__ToggleGroup__multiline__6b784", o = {
-  unsetAll: b,
-  root: x,
+import p from "react";
+import { clsx as g } from "../../utils/clsx.js";
+const x = "cfxui__ToggleGroup__unsetAll__6911e", h = "cfxui__ToggleGroup__root__fb460", v = "cfxui__ToggleGroup__disabled__75462", G = "cfxui__ToggleGroup__fullWidth__0c589", T = "cfxui__ToggleGroup__large__ad624", C = "cfxui__ToggleGroup__options__7bc0c", W = "cfxui__ToggleGroup__option__8436c", k = "cfxui__ToggleGroup__active__84da0", N = "cfxui__ToggleGroup__multiline__6b784", o = {
+  unsetAll: x,
+  root: h,
   disabled: v,
-  fullWidth: h,
-  large: G,
-  options: T,
-  option: C,
-  active: W,
-  multiline: k
+  fullWidth: G,
+  large: T,
+  options: C,
+  option: W,
+  active: k,
+  multiline: N
 };
-var N = /* @__PURE__ */ ((t) => (t.normal = "normal", t.large = "large", t))(N || {});
-const A = g.memo(function(_) {
+var A = /* @__PURE__ */ ((t) => (t.normal = "normal", t.large = "large", t))(A || {});
+const y = p.memo(function(s) {
   const {
-    option: s,
-    onClick: e,
+    option: e,
+    onClick: i,
     active: c = !1,
-    disabled: i = !1
-  } = _, {
+    disabled: n = !1
+  } = s, {
     value: l,
     label: a,
-    icon: n
-  } = s, u = g.useCallback(() => {
-    e(l);
-  }, [e, l]);
+    icon: _
+  } = e, u = p.useCallback(() => {
+    i(l);
+  }, [i, l]);
   return /* @__PURE__ */ m(
     "button",
     {
       type: "button",
-      className: f(o.unsetAll, o.option, {
+      className: g(o.unsetAll, o.option, {
         [o.active]: c
       }),
-      tabIndex: i ? 0 : 1,
+      tabIndex: n ? 0 : 1,
       onClick: u,
-      disabled: i,
+      disabled: n,
       children: [
-        n || null,
+        _ || null,
         a
       ]
     },
     l
   );
-}), w = g.memo(function(_) {
+}), I = p.memo(function(s) {
   const {
-    value: s,
-    options: e,
+    value: e,
+    options: i,
     onChange: c,
-    className: i = "",
+    className: n = "",
     disabled: l = !1,
     multiline: a = !1,
-    fullWidth: n = !1,
-    size: u = "normal"
-    /* normal */
-  } = _, p = f(o.root, o[u], i, {
+    fullWidth: _ = !1,
+    size: u = "normal",
+    name: f
+  } = s, b = g(o.root, o[u], n, {
     [o.disabled]: l,
     [o.multiline]: a,
-    [o.fullWidth]: n
+    [o.fullWidth]: _
   });
-  return /* @__PURE__ */ d("div", { className: p, children: /* @__PURE__ */ d("div", { className: f(o.options, { [o.fullWidth]: n }), children: e.map((r) => /* @__PURE__ */ d(
-    A,
-    {
-      option: r,
-      onClick: c,
-      active: r.value === s,
-      disabled: l
-    },
-    r.value
-  )) }) });
+  return /* @__PURE__ */ m("div", { className: b, children: [
+    f && /* @__PURE__ */ d(
+      "input",
+      {
+        type: "hidden",
+        name: f,
+        value: e
+      }
+    ),
+    /* @__PURE__ */ d("div", { className: g(o.options, { [o.fullWidth]: _ }), children: i.map((r) => /* @__PURE__ */ d(
+      y,
+      {
+        option: r,
+        onClick: c,
+        active: r.value === e,
+        disabled: l
+      },
+      r.value
+    )) })
+  ] });
 });
 export {
-  w as ToggleGroup,
-  A as ToggleGroupOption,
-  N as ToggleGroupSizeEnum
+  I as ToggleGroup,
+  y as ToggleGroupOption,
+  A as ToggleGroupSizeEnum
 };

package/dist/main.d.ts

@@ -63,6 +63,8 @@ export { InfoPanel } from './components/InfoPanel';
 export type { InfoPanelProps, InfoPanelSize, InfoPanelType, } from './components/InfoPanel';
 export { Input, RichInput } from './components/Input';
 export type { InputSize, InputProps, InputTheme, RichInputProps, } from './components/Input';
+export { StyledInput } from './components/StyledInput';
+export type { StyledInputProps } from './components/StyledInput';
 export { Interactive } from './components/Interactive';
 export type { InteractiveProps } from './components/Interactive';
 export { Island, IslandCorner } from './components/Island';
@@ -118,7 +120,7 @@ export type { SwitchProps } from './components/Switch';
 export { ToggleGroup } from './components/ToggleGroup';
 export type { ToggleGroupOption, ToggleGroupProps } from './components/ToggleGroup';
 export { Tabular } from './components/Tabular';
-export type { TabularProps, TabularItem, TabularRootProps, } from './components/Tabular';
+export type { TabularProps, TabularItem, TabularRootProps, TabularItemComponentProps, } from './components/Tabular';
 export { DataTable, DataTableHeaderItem, DataTableRow, } from './components/DataTable';
 export type { DataTableHeaderType, DataTableProps, DataTableRowType, DataTableContainerType, DataTableHeaderItemProps, DataTableRowProps, } from './components/DataTable';
 export { Table, TableIconButton, } from './components/Table';
@@ -131,6 +133,8 @@ export { Label } from './components/Label';
 export type { LabelProps } from './components/Label';
 export { Textarea } from './components/Textarea';
 export type { TextareaProps } from './components/Textarea';
+export { StyledTextarea } from './components/StyledTextarea';
+export type { StyledTextareaProps, TextareaResizeType } from './components/StyledTextarea';
 export { TITLE_OUTLET_ID, titleGetCssStyle, titleGetCoords, Title, } from './components/Title';
 export type { TitleProps, TitleFixedOn, TitleChildren, } from './components/Title';
 export { InputDropzone, DropzoneItemPreview, } from './components/InputDropzone';