@cfx-dev/ui-components 4.0.1 → 4.1.1

package/dist/components/Select/SelectShowcase.js

@@ -2,7 +2,8 @@ import { jsxs as l, jsx as e } from "react/jsx-runtime";
 import o from "react";
 import { Flex as a } from "../Layout/Flex/Flex.js";
 import { Text as i } from "../Text/Text.js";
-import { S as n } from "../../Select-Ds-fm4CN.js";
+import "../ui.js";
+import { Select as n } from "./Select.js";
 const t = [
   {
     value: "value",
@@ -115,7 +116,7 @@ function d() {
     ] })
   ] });
 }
-const g = o.memo(d);
+const b = o.memo(d);
 export {
-  g as default
+  b as default
 };

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

@@ -1,2 +1,2 @@
-export { Select, ICON_SIZE_MAP } from './Select';
+export { Select } from './Select';
 export type { SelectProps, SelectOption } from './Select';

package/dist/components/Select/index.js

@@ -1,5 +1,4 @@
-import { I as S, S as a } from "../../Select-Ds-fm4CN.js";
+import { Select as r } from "./Select.js";
 export {
-  S as ICON_SIZE_MAP,
-  a as Select
+  r as Select
 };

package/dist/components/Separator/Separator.d.ts

@@ -1,7 +1,7 @@
 import { default as React } from 'react';
-import { OffsetType } from '../../types/Offset';
+import { MPProps, OffsetType } from '../ui';
 
-export interface SeparatorProps {
+export interface SeparatorProps extends MPProps {
     thin?: boolean;
     vertical?: boolean;
     content?: React.ReactNode;

package/dist/components/Separator/Separator.js

@@ -1,7 +1,9 @@
-import { jsxs as p, jsx as r } from "react/jsx-runtime";
-import { clsx as c } from "../../utils/clsx.js";
-const i = "cfxui__Separator__root__3aea3", n = "cfxui__Separator__separator__5dbbd", l = "cfxui__Separator__content__7ade9", x = "cfxui__Separator__thin__628fd", m = "cfxui__Separator__vertical__8bd90", d = "cfxui__Separator__text__d02da", a = {
-  root: i,
+import { jsxs as n, jsx as t } from "react/jsx-runtime";
+import l from "react";
+import { ui as s } from "../ui.js";
+import { clsx as x } from "../../utils/clsx.js";
+const m = "cfxui__Separator__root__3aea3", u = "cfxui__Separator__separator__5dbbd", d = "cfxui__Separator__content__7ade9", S = "cfxui__Separator__thin__628fd", h = "cfxui__Separator__vertical__8bd90", v = "cfxui__Separator__text__d02da", a = {
+  root: m,
   "separator-offset-none": "cfxui__Separator__separator-offset-none__f2b70",
   "separator-offset-hairthin": "cfxui__Separator__separator-offset-hairthin__56e9d",
   "separator-offset-thin": "cfxui__Separator__separator-offset-thin__36d86",
@@ -13,29 +15,37 @@ const i = "cfxui__Separator__root__3aea3", n = "cfxui__Separator__separator__5db
   "separator-offset-large": "cfxui__Separator__separator-offset-large__918a2",
   "separator-offset-xlarge": "cfxui__Separator__separator-offset-xlarge__01c53",
   "separator-offset-safezone": "cfxui__Separator__separator-offset-safezone__d28af",
-  separator: n,
-  content: l,
-  thin: x,
-  vertical: m,
-  text: d
+  separator: u,
+  content: d,
+  thin: S,
+  vertical: h,
+  text: v
 };
-function h(o) {
+function M(f) {
   const {
-    content: t,
-    thin: _ = !1,
-    vertical: s = !1,
-    offset: f = "none"
-  } = o, e = c(a.root, a[`separator-offset-${f}`], {
-    [a.text]: !!t,
-    [a.thin]: _,
-    [a.vertical]: s
-  });
-  return t ? /* @__PURE__ */ p("div", { className: e, children: [
-    /* @__PURE__ */ r("div", { className: a.separator }),
-    /* @__PURE__ */ r("div", { className: a.content, children: t }),
-    /* @__PURE__ */ r("div", { className: a.separator })
-  ] }) : /* @__PURE__ */ r("div", { className: e, children: /* @__PURE__ */ r("div", { className: a.separator }) });
+    content: r,
+    thin: p = !1,
+    vertical: i = !1,
+    offset: c = "none",
+    ...e
+  } = f, o = x(
+    a.root,
+    a[`separator-offset-${c}`],
+    s.getAllMPClassnames(e),
+    {
+      [a.text]: !!r,
+      [a.thin]: p,
+      [a.vertical]: i
+    }
+  ), _ = l.useMemo(() => ({
+    ...s.getAllMPStyles(e)
+  }), [e]);
+  return r ? /* @__PURE__ */ n("div", { className: o, style: _, children: [
+    /* @__PURE__ */ t("div", { className: a.separator }),
+    /* @__PURE__ */ t("div", { className: a.content, children: r }),
+    /* @__PURE__ */ t("div", { className: a.separator })
+  ] }) : /* @__PURE__ */ t("div", { className: o, style: _, children: /* @__PURE__ */ t("div", { className: a.separator }) });
 }
 export {
-  h as Separator
+  M as Separator
 };

package/dist/components/Skeleton/Skeleton.d.ts

@@ -1,11 +1,12 @@
 import { default as React } from 'react';
-import { TextSize } from '../Text';
+import { BoxProps } from '../Layout/Box/Box';
+import { ResponsiveTextSize } from '../Text';
+import { BorderRadiusType, ResponsiveValueType } from '../ui';
 
-interface SkeletonProps {
-    width?: string;
-    height?: TextSize | string;
-    borderRadius?: string;
+interface SkeletonProps extends BoxProps {
+    borderRadius?: BorderRadiusType;
+    height?: ResponsiveValueType<ResponsiveTextSize>;
 }
-declare function Skeleton({ width, height, borderRadius, }: SkeletonProps): import("react/jsx-runtime").JSX.Element;
+declare function Skeleton(props: SkeletonProps): import("react/jsx-runtime").JSX.Element;
 declare const _default: React.MemoExoticComponent<typeof Skeleton>;
 export default _default;

package/dist/components/Skeleton/Skeleton.js

@@ -1,29 +1,42 @@
-import { jsx as n } from "react/jsx-runtime";
-import m from "react";
-import { TextSizeEnum as l } from "../Text/Text.types.js";
-const i = "cfxui__Skeleton__skeleton__d700e", _ = "cfxui__Skeleton__shimmer__d72f5", r = {
-  skeleton: i,
-  shimmer: _
+import { jsx as _ } from "react/jsx-runtime";
+import r from "react";
+import { Box as f } from "../Layout/Box/Box.js";
+import { textSizeResponsiveValueFormatter as u } from "../Text/Text.js";
+import { ui as s } from "../ui.js";
+import { clsx as d } from "../../utils/clsx.js";
+const p = "cfxui__Skeleton__skeleton__d700e", h = "cfxui__Skeleton__shimmer__d72f5", k = {
+  skeleton: p,
+  shimmer: h
 };
-function f({
-  width: o = "100%",
-  height: e = "20px",
-  borderRadius: s = "4px"
-}) {
-  let t = e;
-  return e in l && (t = `var(--font-size-${e})`), /* @__PURE__ */ n(
-    "div",
+function x(m) {
+  const {
+    width: l = "100%",
+    height: e = "small",
+    borderRadius: t = "xsmall",
+    className: i,
+    style: o,
+    ...n
+  } = m, a = d(
+    k.skeleton,
+    i,
+    s.getResponsiveClassnames("height", e)
+  ), c = r.useMemo(() => ({
+    borderRadius: s.borderRadius(t),
+    ...s.getResponsiveStyles("height", e, u),
+    ...o || {}
+  }), [t, e, o]);
+  return /* @__PURE__ */ _(
+    f,
     {
-      className: r.skeleton,
-      style: {
-        width: o,
-        height: t,
-        borderRadius: s
-      }
+      className: a,
+      height: e,
+      width: l,
+      style: c,
+      ...n
     }
   );
 }
-const u = m.memo(f);
+const N = r.memo(x);
 export {
-  u as default
+  N as default
 };

package/dist/components/Skeleton/SkeletonShowcase.js

@@ -1,12 +1,13 @@
 import { jsxs as i, jsx as e } from "react/jsx-runtime";
-import u, { useState as n, useEffect as f } from "react";
+import f, { useState as n, useEffect as u } from "react";
 import { Badge as t } from "../Badge/Badge.js";
-import { Button as x } from "../Button/Button.js";
+import { Button as p } from "../Button/Button.js";
 import "../Button/LinkButton.js";
-import { Flex as d } from "../Layout/Flex/Flex.js";
+import { Flex as m } from "../Layout/Flex/Flex.js";
 import { Text as r } from "../Text/Text.js";
+import "../ui.js";
 import c from "./Skeleton.js";
-import { Table as p } from "../Table/Table.js";
+import { Table as x } from "../Table/Table.js";
 const g = [
   { text: "Header 1" },
   { text: "Header 2" },
@@ -15,7 +16,7 @@ const g = [
   { text: "Item" }
 ];
 function S() {
-  const [l, a] = n(!0), [m, s] = n([]), o = () => {
+  const [l, a] = n(!0), [d, s] = n([]), o = () => {
     a(!0);
     const h = setTimeout(() => {
       s([
@@ -26,17 +27,17 @@ function S() {
     }, 5e3);
     return () => clearTimeout(h);
   };
-  return f(() => {
+  return u(() => {
     o();
-  }, []), /* @__PURE__ */ i(d, { gap: "large", vertical: !0, children: [
+  }, []), /* @__PURE__ */ i(m, { gap: "large", vertical: !0, children: [
     /* @__PURE__ */ e(r, { children: "Skeleton within Table" }),
-    /* @__PURE__ */ e(d, { gap: "normal", vertical: !0, children: /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(
-      p,
+    /* @__PURE__ */ e(m, { gap: "normal", vertical: !0, children: /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(
+      x,
       {
         loading: l,
         includeRadio: !0,
         headers: g,
-        data: l ? Array(3).fill(Array(5).fill(/* @__PURE__ */ e(c, { width: "100%", height: "normal", borderRadius: "4px" }))) : m
+        data: l ? Array(3).fill(Array(5).fill(/* @__PURE__ */ e(c, { width: "100%", height: "normal" }))) : d
       }
     ) }) }),
     /* @__PURE__ */ e(r, { children: "Skeleton in Text" }),
@@ -45,10 +46,10 @@ function S() {
       /* @__PURE__ */ e(c, { width: "200px", height: "normal" }),
       " in Text"
     ] }),
-    /* @__PURE__ */ e(x, { theme: "secondary", onClick: o, text: "Restart Timer" })
+    /* @__PURE__ */ e(p, { theme: "secondary", onClick: o, text: "Restart Timer" })
   ] });
 }
-const R = u.memo(S);
+const y = f.memo(S);
 export {
-  R as default
+  y as default
 };

package/dist/components/Slider/Slider.js

@@ -1,8 +1,10 @@
 import { jsx as f, Fragment as pe, jsxs as B } from "react/jsx-runtime";
 import * as c from "react";
 import z from "react";
-import { u as he, c as Z } from "../../index-BW3WdIgK.js";
-import { u as Se, b as ge, a as be } from "../../index-BCnz73Lm.js";
+import { c as Z } from "../../index-rKs9bXHr.js";
+import { u as he, a as Se } from "../../index-Cf5Yu9oD.js";
+import { u as ge } from "../../index-ByaXH_ih.js";
+import { u as be } from "../../index-BZPx6jYI.js";
 import "../../index-2hJuj4UN.js";
 import { c as _e } from "../../index-CjTSD6zB.js";
 import { clsx as ve } from "../../utils/clsx.js";
@@ -155,7 +157,7 @@ var De = [
   "from-right": ["Home", "PageDown", "ArrowDown", "ArrowRight"],
   "from-bottom": ["Home", "PageDown", "ArrowDown", "ArrowLeft"],
   "from-top": ["Home", "PageDown", "ArrowUp", "ArrowLeft"]
-}, M = "Slider", [H, Ee, Ve] = _e(M), [ne, at] = we(M, [
+}, M = "Slider", [H, Ee, Ve] = _e(M), [ne, lt] = we(M, [
   Ve
 ]), [Me, K] = ne(M), re = c.forwardRef(
   (e, t) => {
@@ -176,7 +178,7 @@ var De = [
       inverted: p = !1,
       form: _,
       ...S
-    } = e, g = c.useRef(/* @__PURE__ */ new Set()), h = c.useRef(0), w = i === "horizontal" ? Te : Ne, [v = [], T] = Se({
+    } = e, g = c.useRef(/* @__PURE__ */ new Set()), h = c.useRef(0), w = i === "horizontal" ? Te : Ne, [v = [], T] = he({
       prop: b,
       defaultProp: m,
       onChange: (x) => {
@@ -268,7 +270,7 @@ var [oe, ie] = ne(M, {
       onSlideEnd: u,
       onStepKeyDown: m,
       ...b
-    } = e, [l, d] = c.useState(null), p = k(t, (w) => d(w)), _ = c.useRef(void 0), S = he(o), g = S === "ltr", h = g && !s || !g && s;
+    } = e, [l, d] = c.useState(null), p = k(t, (w) => d(w)), _ = c.useRef(void 0), S = ge(o), g = S === "ltr", h = g && !s || !g && s;
     function C(w) {
       const v = _.current || l.getBoundingClientRect(), T = [0, v.width], L = U(T, h ? [n, r] : [r, n]);
       return _.current = v, L(w - v.left);
@@ -447,7 +449,7 @@ var W = "SliderThumb", ue = c.forwardRef(
   }
 ), Ae = c.forwardRef(
   (e, t) => {
-    const { __scopeSlider: n, index: r, name: o, ...s } = e, i = K(W, n), a = ie(W, n), [u, m] = c.useState(null), b = k(t, (C) => m(C)), l = u ? i.form || !!u.closest("form") : !0, d = ge(u), p = i.values[r], _ = p === void 0 ? 0 : de(p, i.min, i.max), S = Ie(r, i.values.length), g = d == null ? void 0 : d[a.size], h = g ? Oe(g, _, a.direction) : 0;
+    const { __scopeSlider: n, index: r, name: o, ...s } = e, i = K(W, n), a = ie(W, n), [u, m] = c.useState(null), b = k(t, (C) => m(C)), l = u ? i.form || !!u.closest("form") : !0, d = Se(u), p = i.values[r], _ = p === void 0 ? 0 : de(p, i.min, i.max), S = Ie(r, i.values.length), g = d == null ? void 0 : d[a.size], h = g ? Oe(g, _, a.direction) : 0;
     return c.useEffect(() => {
       if (u)
         return i.thumbs.add(u), () => {
@@ -560,7 +562,7 @@ const Ye = "cfxui__Slider__sliderContainer__fac82", Xe = "cfxui__Slider__sliderL
   sliderRange: qe,
   sliderThumb: Je,
   sliderValueBubble: Qe
-}, ct = function({
+}, ut = function({
   value: t,
   defaultValue: n,
   title: r,
@@ -602,6 +604,6 @@ const Ye = "cfxui__Slider__sliderContainer__fac82", Xe = "cfxui__Slider__sliderL
   ] });
 };
 export {
-  ct as Slider,
-  ct as default
+  ut as Slider,
+  ut as default
 };

package/dist/components/Slider/SliderShowcase.js

@@ -1,12 +1,13 @@
 import { jsxs as a, jsx as e } from "react/jsx-runtime";
 import i from "react";
-import { Flex as l } from "../Layout/Flex/Flex.js";
-import { Text as r } from "../Text/Text.js";
+import { Flex as r } from "../Layout/Flex/Flex.js";
+import { Text as l } from "../Text/Text.js";
+import "../ui.js";
 import { Slider as t } from "./Slider.js";
 function m() {
-  return /* @__PURE__ */ a(l, { gap: "large", vertical: !0, children: [
-    /* @__PURE__ */ a(l, { gap: "normal", vertical: !0, children: [
-      /* @__PURE__ */ e(r, { children: "Default Slider" }),
+  return /* @__PURE__ */ a(r, { gap: "large", vertical: !0, children: [
+    /* @__PURE__ */ a(r, { gap: "normal", vertical: !0, children: [
+      /* @__PURE__ */ e(l, { children: "Default Slider" }),
       /* @__PURE__ */ e(
         "div",
         {
@@ -30,8 +31,8 @@ function m() {
         }
       )
     ] }),
-    /* @__PURE__ */ a(l, { gap: "normal", vertical: !0, children: [
-      /* @__PURE__ */ e(r, { children: "Custom Slider" }),
+    /* @__PURE__ */ a(r, { gap: "normal", vertical: !0, children: [
+      /* @__PURE__ */ e(l, { children: "Custom Slider" }),
       /* @__PURE__ */ e(
         "div",
         {
@@ -57,7 +58,7 @@ function m() {
     ] })
   ] });
 }
-const p = i.memo(m);
+const u = i.memo(m);
 export {
-  p as default
+  u as default
 };

package/dist/components/Spacer/Spacer.d.ts

@@ -1,4 +1,4 @@
-import { OffsetType } from '../../types/Offset';
+import { OffsetType } from '../ui';
 
 export interface SpacerProps {
     size?: OffsetType;

package/dist/components/Switch/Switch.js

@@ -1,7 +1,8 @@
 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, b as j } from "../../index-BCnz73Lm.js";
+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 } = {}) {
@@ -66,7 +67,7 @@ function A(...t) {
   };
   return e.scopeName = o.scopeName, e;
 }
-var x = "Switch", [D, ot] = z(x), [F, L] = D(x), v = u.forwardRef(
+var x = "Switch", [D, ct] = z(x), [F, L] = D(x), v = u.forwardRef(
   (t, o) => {
     const {
       __scopeSwitch: e,
@@ -135,7 +136,7 @@ var R = "SwitchThumb", y = u.forwardRef(
 );
 y.displayName = R;
 var W = (t) => {
-  const { control: o, checked: e, bubbles: r = !0, ...c } = t, h = u.useRef(null), n = U(e), s = j(o);
+  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) {
@@ -179,7 +180,7 @@ function V(t) {
   } = t;
   return /* @__PURE__ */ l(X, { ...r, className: k(C.switchRoot, C.switchUnset, o), children: /* @__PURE__ */ l(G, { className: k(C.switchThumb, e) }) });
 }
-const ct = g.memo(V);
+const st = g.memo(V);
 export {
-  ct as default
+  st as default
 };

package/dist/components/Table/Table.js

@@ -3,6 +3,7 @@ import l, { useState as k } from "react";
 import I from "../Checkbox/Checkbox.js";
 import $ from "../IconButton/IconButton.js";
 import { Text as S } from "../Text/Text.js";
+import "../ui.js";
 import { clsx as u } from "../../utils/clsx.js";
 const j = "cfxui__Table__tableIcon__f8e96", z = "cfxui__Table__iconButton__ac6da", A = "cfxui__Table__root__591ed", E = "cfxui__Table__radio__70dd7", O = "cfxui__Table__radioContent__35cef", g = "cfxui__Table__pointer__7b6a4", F = "cfxui__Table__selectedRow__f7130", H = "cfxui__Table__headerText__02722", V = "cfxui__Table__headerContent__f0e66", q = "cfxui__Table__hidden__e4ac6", c = {
   tableIcon: j,
@@ -105,7 +106,7 @@ function J(i) {
     `row-${e}`
   );
 }
-function W({
+function X({
   headers: i = [],
   data: e = [],
   includeRadio: o = !1,
@@ -162,7 +163,7 @@ function W({
   ] }) });
 }
 export {
-  W as Table,
+  X as Table,
   G as TableHeaderItem,
   D as TableIconButton
 };

package/dist/components/Table/TableShowcase.js

@@ -6,8 +6,9 @@ import "../Interactive/Interactive.js";
 import { Scrollable as c } from "../Layout/Scrollable/Scrollable.js";
 import "../Layout/Scrollable/VirtualScrollable.js";
 import { Text as r } from "../Text/Text.js";
+import "../ui.js";
 import { Table as o } from "./Table.js";
-const n = [
+const i = [
   [
     "Cell 1",
     "Cell 2",
@@ -27,7 +28,7 @@ const n = [
   ["Cell 7", "Cell 8", "Cell 9", new Date(2023, 2, 1).toLocaleDateString(), /* @__PURE__ */ e(l, { children: "Badge" }, "3")],
   ["Cell 4", "Cell 5", "Cell 6", new Date(2023, 1, 1).toLocaleDateString(), /* @__PURE__ */ e(l, { children: "Badge" }, "2")],
   ["Cell 7", "Cell 8", "Cell 9", new Date(2023, 2, 1).toLocaleDateString(), /* @__PURE__ */ e(l, { children: "Badge" }, "3")]
-], i = [
+], n = [
   { text: "Header 1" },
   { text: "Header 2" },
   { text: "Header 3" },
@@ -38,7 +39,7 @@ function C() {
   return /* @__PURE__ */ t(a, { gap: "large", vertical: !0, children: [
     /* @__PURE__ */ t(a, { gap: "normal", vertical: !0, children: [
       /* @__PURE__ */ e(r, { children: "Table" }),
-      /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(o, { headers: i, data: n }) })
+      /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(o, { headers: n, data: i }) })
     ] }),
     /* @__PURE__ */ t(a, { fullWidth: !0, vertical: !0, children: [
       /* @__PURE__ */ e(r, { children: "Table with scroll" }),
@@ -49,13 +50,13 @@ function C() {
             height: "400px",
             overflow: "hidden"
           },
-          children: /* @__PURE__ */ e(c, { children: /* @__PURE__ */ e(o, { includeRadio: !0, headers: i, data: n }) })
+          children: /* @__PURE__ */ e(c, { children: /* @__PURE__ */ e(o, { includeRadio: !0, headers: n, data: i }) })
         }
       )
     ] })
   ] });
 }
-const L = d.memo(C);
+const f = d.memo(C);
 export {
-  L as default
+  f as default
 };

package/dist/components/Tabular/TabularShowcase.js

@@ -2,6 +2,7 @@ import { jsxs as e, jsx as t } from "react/jsx-runtime";
 import a from "react";
 import { Flex as i } from "../Layout/Flex/Flex.js";
 import { Text as m } from "../Text/Text.js";
+import "../ui.js";
 import { Tabular as r } from "./Tabular.js";
 const l = [
   {
@@ -59,7 +60,7 @@ function d() {
     ] })
   ] });
 }
-const b = a.memo(d);
+const p = a.memo(d);
 export {
-  b as default
+  p as default
 };

package/dist/components/Text/Text.d.ts

@@ -1,6 +1,8 @@
 import { default as React } from 'react';
-import { TextOpacity, TextProps } from './Text.types';
+import { TextOpacity, TextProps, ResponsiveTextSize } from './Text.types';
 
+export declare const textSizeResponsiveValueFormatter: (val: ResponsiveTextSize) => string;
+export declare const lineHeightResponsiveValueFormatter: (val: ResponsiveTextSize) => string;
 export declare const TEXT_OPACITY_MAP: Record<TextOpacity, number | string>;
 export declare const getTextOpacity: (opacity?: TextOpacity, otherwise?: string | number) => string | number;
 export declare const DEFAULT_TEXT_COLOR = "primary";