@cfx-dev/ui-components 4.2.24 → 4.3.0

package/dist/components/Slider/SliderShowcase.js

@@ -1,6 +1,6 @@
 import { jsxs as r, jsx as e } from "react/jsx-runtime";
 import i from "react";
-import { Flex as a } from "../Layout/Flex/Flex.js";
+import a from "../Layout/Flex/Flex.js";
 import { Text as t } from "../Text/Text.js";
 import "../../utils/ui/ui.js";
 import { Slider as l } from "./Slider.js";

package/dist/components/Switch/Switch.js

@@ -1,186 +1,140 @@
-import { jsx as l, jsxs as $ } from "react/jsx-runtime";
-import * as u from "react";
-import g from "react";
-import { u as B, a as U } from "../../index-Cf5Yu9oD.js";
-import { u as j } from "../../index-BZPx6jYI.js";
-import { P } from "../../index-BlbvKsmN.js";
-import { clsx as k } from "../../utils/clsx.js";
-function I(t, o, { checkForDefaultPrevented: e = !0 } = {}) {
-  return function(c) {
-    if (t == null || t(c), e === !1 || !c.defaultPrevented)
-      return o == null ? void 0 : o(c);
-  };
-}
-function E(t, o) {
-  typeof t == "function" ? t(o) : t != null && (t.current = o);
-}
-function O(...t) {
-  return (o) => t.forEach((e) => E(e, o));
-}
-function q(...t) {
-  return u.useCallback(O(...t), t);
-}
-function z(t, o = []) {
-  let e = [];
-  function r(h, n) {
-    const s = u.createContext(n), i = e.length;
-    e = [...e, n];
-    function f(a) {
-      const { scope: p, children: b, ...d } = a, S = (p == null ? void 0 : p[t][i]) || s, m = u.useMemo(() => d, Object.values(d));
-      return /* @__PURE__ */ l(S.Provider, { value: m, children: b });
-    }
-    function w(a, p) {
-      const b = (p == null ? void 0 : p[t][i]) || s, d = u.useContext(b);
-      if (d) return d;
-      if (n !== void 0) return n;
-      throw new Error(`\`${a}\` must be used within \`${h}\``);
-    }
-    return f.displayName = h + "Provider", [f, w];
-  }
-  const c = () => {
-    const h = e.map((n) => u.createContext(n));
-    return function(s) {
-      const i = (s == null ? void 0 : s[t]) || h;
-      return u.useMemo(
-        () => ({ [`__scope${t}`]: { ...s, [t]: i } }),
-        [s, i]
-      );
-    };
-  };
-  return c.scopeName = t, [r, A(c, ...o)];
-}
-function A(...t) {
-  const o = t[0];
-  if (t.length === 1) return o;
-  const e = () => {
-    const r = t.map((c) => ({
-      useScope: c(),
-      scopeName: c.scopeName
-    }));
-    return function(h) {
-      const n = r.reduce((s, { useScope: i, scopeName: f }) => {
-        const a = i(h)[`__scope${f}`];
-        return { ...s, ...a };
-      }, {});
-      return u.useMemo(() => ({ [`__scope${o.scopeName}`]: n }), [n]);
-    };
-  };
-  return e.scopeName = o.scopeName, e;
-}
-var x = "Switch", [D, ct] = z(x), [F, L] = D(x), v = u.forwardRef(
-  (t, o) => {
+import { jsxs as I, 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-BHuChyf5.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(
+  (e, s) => {
     const {
-      __scopeSwitch: e,
-      name: r,
+      __scopeSwitch: t,
+      name: o,
       checked: c,
-      defaultChecked: h,
-      required: n,
-      disabled: s,
-      value: i = "on",
-      onCheckedChange: f,
-      ...w
-    } = t, [a, p] = u.useState(null), b = q(o, (_) => p(_)), d = u.useRef(!1), S = a ? !!a.closest("form") : !0, [m = !1, N] = B({
+      defaultChecked: w,
+      required: u,
+      disabled: a,
+      value: h = "on",
+      onCheckedChange: _,
+      form: n,
+      ...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({
       prop: c,
-      defaultProp: h,
-      onChange: f
+      defaultProp: w ?? !1,
+      onChange: _,
+      caller: m
     });
-    return /* @__PURE__ */ $(F, { scope: e, checked: m, disabled: s, children: [
-      /* @__PURE__ */ l(
-        P.button,
+    return /* @__PURE__ */ I(O, { scope: t, checked: p, disabled: a, children: [
+      /* @__PURE__ */ i(
+        x.button,
         {
           type: "button",
           role: "switch",
-          "aria-checked": m,
-          "aria-required": n,
-          "data-state": T(m),
-          "data-disabled": s ? "" : void 0,
-          disabled: s,
-          value: i,
-          ...w,
+          "aria-checked": p,
+          "aria-required": u,
+          "data-state": g(p),
+          "data-disabled": a ? "" : void 0,
+          disabled: a,
+          value: h,
+          ...S,
           ref: b,
-          onClick: I(t.onClick, (_) => {
-            N((M) => !M), S && (d.current = _.isPropagationStopped(), d.current || _.stopPropagation());
+          onClick: A(e.onClick, (f) => {
+            B((U) => !U), R && (v.current = f.isPropagationStopped(), v.current || f.stopPropagation());
           })
         }
       ),
-      S && /* @__PURE__ */ l(
-        W,
+      R && /* @__PURE__ */ i(
+        E,
         {
-          control: a,
-          bubbles: !d.current,
-          name: r,
-          value: i,
-          checked: m,
-          required: n,
-          disabled: s,
+          control: d,
+          bubbles: !v.current,
+          name: o,
+          value: h,
+          checked: p,
+          required: u,
+          disabled: a,
+          form: n,
           style: { transform: "translateX(-100%)" }
         }
       )
     ] });
   }
 );
-v.displayName = x;
-var R = "SwitchThumb", y = u.forwardRef(
-  (t, o) => {
-    const { __scopeSwitch: e, ...r } = t, c = L(R, e);
-    return /* @__PURE__ */ l(
-      P.span,
+y.displayName = m;
+var T = "SwitchThumb", N = r.forwardRef(
+  (e, s) => {
+    const { __scopeSwitch: t, ...o } = e, c = $(T, t);
+    return /* @__PURE__ */ i(
+      x.span,
       {
-        "data-state": T(c.checked),
+        "data-state": g(c.checked),
         "data-disabled": c.disabled ? "" : void 0,
-        ...r,
-        ref: o
+        ...o,
+        ref: s
       }
     );
   }
 );
-y.displayName = R;
-var W = (t) => {
-  const { control: o, checked: e, bubbles: r = !0, ...c } = t, h = u.useRef(null), n = j(e), s = U(o);
-  return u.useEffect(() => {
-    const i = h.current, f = window.HTMLInputElement.prototype, a = Object.getOwnPropertyDescriptor(f, "checked").set;
-    if (n !== e && a) {
-      const p = new Event("click", { bubbles: r });
-      a.call(i, e), i.dispatchEvent(p);
-    }
-  }, [n, e, r]), /* @__PURE__ */ l(
-    "input",
-    {
-      type: "checkbox",
-      "aria-hidden": !0,
-      defaultChecked: e,
-      ...c,
-      tabIndex: -1,
-      ref: h,
-      style: {
-        ...t.style,
-        ...s,
-        position: "absolute",
-        pointerEvents: "none",
-        opacity: 0,
-        margin: 0
+N.displayName = T;
+var D = "SwitchBubbleInput", E = 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);
+    return r.useEffect(() => {
+      const n = u.current;
+      if (!n) return;
+      const S = window.HTMLInputElement.prototype, l = Object.getOwnPropertyDescriptor(
+        S,
+        "checked"
+      ).set;
+      if (h !== t && l) {
+        const b = new Event("click", { bubbles: o });
+        l.call(n, t), n.dispatchEvent(b);
       }
-    }
-  );
-};
-function T(t) {
-  return t ? "checked" : "unchecked";
+    }, [h, t, o]), /* @__PURE__ */ i(
+      "input",
+      {
+        type: "checkbox",
+        "aria-hidden": !0,
+        defaultChecked: t,
+        ...c,
+        tabIndex: -1,
+        ref: a,
+        style: {
+          ...c.style,
+          ..._,
+          position: "absolute",
+          pointerEvents: "none",
+          opacity: 0,
+          margin: 0
+        }
+      }
+    );
+  }
+);
+E.displayName = D;
+function g(e) {
+  return e ? "checked" : "unchecked";
 }
-var X = v, G = y;
-const J = "cfxui__Switch__switchUnset__c8b03", K = "cfxui__Switch__switchRoot__f2911", Q = "cfxui__Switch__switchThumb__9cbf5", C = {
-  switchUnset: J,
-  switchRoot: K,
-  switchThumb: Q
+var F = y, W = N;
+const X = "cfxui__Switch__switchUnset__c8b03", G = "cfxui__Switch__switchRoot__f2911", J = "cfxui__Switch__switchThumb__9cbf5", C = {
+  switchUnset: X,
+  switchRoot: G,
+  switchThumb: J
 };
-function V(t) {
+function K(e) {
   const {
-    classNameRoot: o,
-    classNameThumb: e,
-    ...r
-  } = t;
-  return /* @__PURE__ */ l(X, { ...r, className: k(C.switchRoot, C.switchUnset, o), children: /* @__PURE__ */ l(G, { className: k(C.switchThumb, e) }) });
+    classNameRoot: s,
+    classNameThumb: t,
+    ...o
+  } = e;
+  return /* @__PURE__ */ i(F, { ...o, className: P(C.switchRoot, C.switchUnset, s), children: /* @__PURE__ */ i(W, { className: P(C.switchThumb, t) }) });
 }
-const st = g.memo(V);
+const ot = M.memo(K);
 export {
-  st as default
+  ot as default
 };

package/dist/components/Table/TableBody.d.ts

@@ -0,0 +1,8 @@
+import { default as React } from 'react';
+
+export interface TableBodyProps extends React.PropsWithChildren {
+    className?: string;
+    ref?: React.Ref<HTMLTableSectionElement>;
+}
+declare function TableBody(props: TableBodyProps): import("react/jsx-runtime").JSX.Element;
+export default TableBody;

package/dist/components/Table/TableBody.js

@@ -0,0 +1,14 @@
+import { jsx as e } from "react/jsx-runtime";
+import { clsx as a } from "../../utils/clsx.js";
+import { s as l } from "../../Table.module-DHI1mXN2.js";
+function d(o) {
+  const {
+    className: s,
+    children: r,
+    ref: t
+  } = o;
+  return /* @__PURE__ */ e("tbody", { ref: t, className: a(l.tableBody, s), children: r });
+}
+export {
+  d as default
+};

package/dist/components/Table/TableCell.d.ts

@@ -0,0 +1,11 @@
+import { default as React } from 'react';
+import { FlexProps } from '../Layout/Flex';
+
+export interface TableCellProps extends React.PropsWithChildren, FlexProps {
+    onClick?: (event: React.MouseEvent<HTMLTableCellElement>) => void;
+    as?: 'td' | 'th';
+    className?: string;
+    ref?: React.Ref<HTMLTableCellElement>;
+}
+declare function TableCell(props: TableCellProps): import("react/jsx-runtime").JSX.Element;
+export default TableCell;

package/dist/components/Table/TableCell.js

@@ -0,0 +1,54 @@
+import { jsx as a } from "react/jsx-runtime";
+import { stringPropFormater as c } from "../Layout/Box/Box.js";
+import h from "../Layout/Flex/Flex.js";
+import { clsx as y } from "../../utils/clsx.js";
+import { ui as t } from "../../utils/ui/ui.js";
+import { s } from "../../Table.module-DHI1mXN2.js";
+function R(p) {
+  const {
+    onClick: i,
+    className: m,
+    children: d,
+    ref: f,
+    width: o,
+    display: r,
+    as: l = "td",
+    ...e
+  } = p, n = l === "th";
+  return typeof e.px > "u" && (e.px = 4), typeof e.py > "u" && (e.py = l === "th" ? void 0 : 1.5), /* @__PURE__ */ a(
+    l,
+    {
+      ref: f,
+      tabIndex: -1,
+      role: n ? "columnheader" : "cell",
+      onClick: i,
+      className: y(
+        s.tableCell,
+        m,
+        t.getResponsiveClassnames("width", o),
+        t.getResponsiveClassnames("display", r),
+        {
+          [s.header]: n,
+          [s.interactive]: !!i
+        }
+      ),
+      style: {
+        ...t.getResponsiveStyles("width", o),
+        ...t.getResponsiveStyles("display", r, c)
+      },
+      children: /* @__PURE__ */ a(
+        h,
+        {
+          height: "100%",
+          alignItems: "center",
+          className: s.tableCellContent,
+          ...e,
+          children: d
+        }
+      )
+    }
+  );
+}
+export {
+  R as default
+};

package/dist/components/Table/TableCellCheckbox.d.ts

@@ -0,0 +1,11 @@
+import { default as React } from 'react';
+import { TableCellProps } from './TableCell';
+
+export interface TableCellCheckboxProps extends TableCellProps {
+    checked?: boolean;
+    isPlaceholder?: boolean;
+    disabled?: boolean;
+}
+declare function TableCellCheckbox(props: TableCellCheckboxProps): import("react/jsx-runtime").JSX.Element;
+declare const _default: React.MemoExoticComponent<typeof TableCellCheckbox>;
+export default _default;

package/dist/components/Table/TableCellCheckbox.js

@@ -0,0 +1,20 @@
+import { jsx as e } from "react/jsx-runtime";
+import m from "react";
+import c from "../Checkbox/Checkbox.js";
+import { clsx as i } from "../../utils/clsx.js";
+import f from "./TableCell.js";
+import { s as p } from "../../Table.module-DHI1mXN2.js";
+function b(l) {
+  const {
+    checked: o = !1,
+    isPlaceholder: s,
+    disabled: r = !1,
+    className: a,
+    ...t
+  } = l;
+  return /* @__PURE__ */ e(f, { width: 2, px: 0, pl: 4, className: i(p.tableCellCheckbox, a), ...t, children: !s && /* @__PURE__ */ e(c, { disabled: r, size: "small", checked: o }) });
+}
+const u = m.memo(b);
+export {
+  u as default
+};

package/dist/components/Table/TableHeader.d.ts

@@ -0,0 +1,9 @@
+import { default as React } from 'react';
+
+export interface TableHeaderProps extends React.PropsWithChildren {
+    sticky?: boolean;
+    className?: string;
+    ref?: React.Ref<HTMLTableSectionElement>;
+}
+declare function TableHeader(props: TableHeaderProps): import("react/jsx-runtime").JSX.Element;
+export default TableHeader;

package/dist/components/Table/TableHeader.js

@@ -0,0 +1,24 @@
+import { jsx as o } from "react/jsx-runtime";
+import { clsx as c } from "../../utils/clsx.js";
+import { s as e } from "../../Table.module-DHI1mXN2.js";
+function d(s) {
+  const {
+    sticky: a = !1,
+    className: r,
+    children: t,
+    ref: l
+  } = s;
+  return /* @__PURE__ */ o(
+    "thead",
+    {
+      ref: l,
+      className: c(e.tableHeader, r, {
+        [e.sticky]: a
+      }),
+      children: t
+    }
+  );
+}
+export {
+  d as default
+};

package/dist/components/Table/TableIconButton.d.ts

@@ -0,0 +1,6 @@
+import { default as React } from 'react';
+import { IconButtonProps } from '../IconButton';
+
+declare function TableIconButton(props: IconButtonProps): import("react/jsx-runtime").JSX.Element;
+declare const _default: React.MemoExoticComponent<typeof TableIconButton>;
+export default _default;

package/dist/components/Table/TableIconButton.js

@@ -0,0 +1,16 @@
+import { jsx as m } from "react/jsx-runtime";
+import a from "react";
+import e from "../IconButton/IconButton.js";
+import { clsx as r } from "../../utils/clsx.js";
+import { s as t } from "../../Table.module-DHI1mXN2.js";
+function l(o) {
+  const {
+    className: n,
+    color: s = "inherit"
+  } = o, c = r(t.tableIcon, t.iconButton, n);
+  return /* @__PURE__ */ m(e, { ...o, className: c, color: s });
+}
+const I = a.memo(l);
+export {
+  I as default
+};

package/dist/components/Table/TableRoot.d.ts

@@ -0,0 +1,8 @@
+import { default as React } from 'react';
+
+export interface TableRootProps extends React.PropsWithChildren {
+    className?: string;
+    ref?: React.Ref<HTMLTableElement>;
+}
+declare function TableRoot(props: TableRootProps): import("react/jsx-runtime").JSX.Element;
+export default TableRoot;

package/dist/components/Table/TableRoot.js

@@ -0,0 +1,23 @@
+import { jsx as a } from "react/jsx-runtime";
+import { clsx as s } from "../../utils/clsx.js";
+import { s as l } from "../../Table.module-DHI1mXN2.js";
+function f(r) {
+  const {
+    className: o,
+    children: e,
+    ref: t
+  } = r;
+  return /* @__PURE__ */ a(
+    "table",
+    {
+      "aria-readonly": "true",
+      role: "grid",
+      ref: t,
+      className: s(l.tableRoot, o),
+      children: e
+    }
+  );
+}
+export {
+  f as default
+};

package/dist/components/Table/TableRow.d.ts

@@ -0,0 +1,13 @@
+import { default as React } from 'react';
+import { ColorType } from '../../utils/ui';
+
+export interface TableRowProps extends React.PropsWithChildren {
+    size?: 'small' | 'normal' | 'large';
+    selected?: boolean;
+    color?: ColorType;
+    onClick?: (event: React.MouseEvent<HTMLTableRowElement>) => void;
+    className?: string;
+    ref?: React.Ref<HTMLTableRowElement>;
+}
+declare function TableRow(props: TableRowProps): import("react/jsx-runtime").JSX.Element;
+export default TableRow;

package/dist/components/Table/TableRow.js

@@ -0,0 +1,46 @@
+import { jsx as p } from "react/jsx-runtime";
+import { clsx as d } from "../../utils/clsx.js";
+import { getColor as r } from "../../utils/color.js";
+import { s as o } from "../../Table.module-DHI1mXN2.js";
+function u(l) {
+  const {
+    size: s = "normal",
+    selected: a,
+    color: t,
+    onClick: c,
+    className: i,
+    children: n,
+    ref: m
+  } = l, b = t ? 0.2 : 0, e = t || "secondary";
+  return /* @__PURE__ */ p(
+    "tr",
+    {
+      tabIndex: -1,
+      role: "row",
+      ref: m,
+      onClick: c,
+      className: d(o.tableRow, o[s], i, {
+        [o.interactive]: !!c,
+        [o.selected]: !!a
+      }),
+      style: {
+        "--base-bg-color": r({
+          color: e,
+          opacity: b
+        }),
+        "--hover-bg-color": r({
+          color: e,
+          opacity: 0.3
+        }),
+        "--selected-bg-color": r({
+          color: e,
+          opacity: 0.4
+        })
+      },
+      children: n
+    }
+  );
+}
+export {
+  u as default
+};