@cfx-dev/ui-components 4.0.2 → 4.2.0

package/dist/components/ToggleGroup/ToggleGroupShowcase.js

@@ -0,0 +1,60 @@
+import { jsxs as l, jsx as e } from "react/jsx-runtime";
+import u from "react";
+import { Flex as r } from "../Layout/Flex/Flex.js";
+import { Text as a } from "../Text/Text.js";
+import "../ui.js";
+import { ToggleGroup as i } from "./ToggleGroup.js";
+const n = [
+  {
+    value: "weekly",
+    label: "Weekly"
+  },
+  {
+    value: "monthly",
+    label: "Monthly"
+  }
+];
+function c() {
+  const [o, t] = u.useState("weekly");
+  return /* @__PURE__ */ l(r, { gap: "large", vertical: !0, children: [
+    /* @__PURE__ */ l(r, { gap: "normal", vertical: !0, children: [
+      /* @__PURE__ */ e(a, { children: "Default ToggleGroup" }),
+      /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(
+        i,
+        {
+          value: o,
+          onChange: t,
+          options: n
+        }
+      ) })
+    ] }),
+    /* @__PURE__ */ l(r, { gap: "normal", vertical: !0, children: [
+      /* @__PURE__ */ e(a, { children: "Full Width ToggleGroup" }),
+      /* @__PURE__ */ e("div", { style: { width: "100%" }, children: /* @__PURE__ */ e(
+        i,
+        {
+          value: o,
+          onChange: t,
+          options: n,
+          fullWidth: !0
+        }
+      ) })
+    ] }),
+    /* @__PURE__ */ l(r, { gap: "normal", vertical: !0, children: [
+      /* @__PURE__ */ e(a, { children: "Disabled ToggleGroup" }),
+      /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(
+        i,
+        {
+          value: o,
+          onChange: t,
+          options: n,
+          disabled: !0
+        }
+      ) })
+    ] })
+  ] });
+}
+const f = u.memo(c);
+export {
+  f as default
+};

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

@@ -0,0 +1,2 @@
+export { ToggleGroup } from './ToggleGroup';
+export type { ToggleGroupOption, ToggleGroupProps } from './ToggleGroup';

package/dist/components/ToggleGroup/index.js

@@ -0,0 +1,4 @@
+import { ToggleGroup as e } from "./ToggleGroup.js";
+export {
+  e as ToggleGroup
+};

package/dist/components/ui.d.ts

@@ -1,5 +1,24 @@
-import { TextProps } from './Text/Text.types';
-
+export declare enum TextSizeEnum {
+    xxsmall = "xxsmall",
+    xsmall = "xsmall",
+    small = "small",
+    normal = "normal",
+    medium = "medium",
+    large = "large",
+    xlarge = "xlarge",
+    xxlarge = "xxlarge",
+    xxxlarge = "xxxlarge"
+}
+export type TextSize = keyof typeof TextSizeEnum;
+export declare enum BorderRadiusEnum {
+    none = "none",
+    xxsmall = "xxsmall",
+    xsmall = "xsmall",
+    small = "small",
+    normal = "normal",
+    pill = "pill"
+}
+export type BorderRadiusType = keyof typeof BorderRadiusEnum;
 export declare enum ZIndexEnum {
     zero = "zero",
     first = "first",
@@ -20,7 +39,7 @@ export declare enum OffsetEnum {
     xlarge = "xlarge",
     safezone = "safezone"
 }
-export type OffesetType = keyof typeof OffsetEnum;
+export type OffsetType = keyof typeof OffsetEnum;
 export declare enum MediaQueryEnum {
     initial = "initial",
     small = "small",
@@ -31,9 +50,10 @@ export declare enum MediaQueryEnum {
     xlarge = "xlarge"
 }
 export type MediaQueryType = keyof typeof MediaQueryEnum;
-export type ResponsiveOffsetType = OffesetType | number | {
-    [key in MediaQueryType]?: OffesetType | number;
+export type ResponsiveValueType<T = string | number> = T | {
+    [key in MediaQueryType]?: T;
 };
+export type ResponsiveOffsetType = ResponsiveValueType<OffsetType | number>;
 export interface MPProps {
     m?: ResponsiveOffsetType;
     mt?: ResponsiveOffsetType;
@@ -51,10 +71,11 @@ export declare namespace ui {
      * Returns CSS value of quant value with applied multiplier
      */
     export function q(multiplier?: number): string;
-    export function offset(size: OffesetType): string;
-    export function fontSize(size?: TextProps['size']): string;
+    export function offset(size: OffsetType): string;
+    export function fontSize(size?: TextSize): string;
     export function zindex(name?: ZIndexType): string;
-    export function borderRadius(size?: 'xsmall' | 'small' | 'normal'): string;
+    export function lineHeight(size?: TextSize): string;
+    export function borderRadius(size?: BorderRadiusType): string;
     export function color(name: string, variantRaw?: string | number, alpha?: number): string;
     export namespace cls {
         const fullWidth = "util-full-width";
@@ -72,11 +93,15 @@ export declare namespace ui {
     export const vh: (x: number | string) => string;
     export const vw: (x: number | string) => string;
     export const url: (u: unknown) => string;
-    export const getOffsetAttrs: (name: string, value: ResponsiveOffsetType) => Record<string, string>;
-    export const getOffsetStyles: (name: string, value: ResponsiveOffsetType) => Record<string, string>;
+    export function defaultResponsiveValueFormatter<A>(val: A): string;
+    export function getResponsiveStyles<T = string | number>(name: string, value?: ResponsiveValueType<T>, formatter?: (val: T) => string): React.CSSProperties;
+    export function getResponsiveClassnames<T = string | number>(name: string, value?: ResponsiveValueType<T>): string;
+    export function getResponsiveFlatClassnames<T = string | number>(name: string, value?: ResponsiveValueType<T>, formatter?: (val: T) => string): string[];
+    export function offsetResponsiveValueFormatter(value: OffsetType | number): string;
+    export const getOffsetStyles: (name: string, value?: ResponsiveValueType<OffsetType | number>) => import("react").CSSProperties;
     type CallbackType<T> = (name: string, value: ResponsiveOffsetType) => T;
-    export function callAllMPProps<T>(props: Partial<MPProps>, callback: CallbackType<T>): {};
+    export function callAllMPProps<T extends object>(props: Partial<MPProps>, callback: CallbackType<T>): T;
     export const getAllMPStyles: (props: Partial<MPProps>) => React.CSSProperties;
-    export const getAllMPAttrs: (props: Partial<MPProps>) => Record<string, string>;
+    export const getAllMPClassnames: (props: Partial<MPProps>) => string;
     export {};
 }

package/dist/components/ui.js

@@ -1,69 +1,73 @@
-var A = /* @__PURE__ */ ((r) => (r.zero = "zero", r.first = "first", r.second = "second", r.max = "max", r))(A || {}), v = /* @__PURE__ */ ((r) => (r.none = "none", r.hairthin = "hairthin", r.thin = "thin", r.xxsmall = "xxsmall", r.xsmall = "xsmall", r.small = "small", r.normal = "normal", r.medium = "medium", r.large = "large", r.xlarge = "xlarge", r.safezone = "safezone", r))(v || {}), P = /* @__PURE__ */ ((r) => (r.initial = "initial", r.small = "small", r["small-medium"] = "small-medium", r.medium = "medium", r["medium-large"] = "medium-large", r.large = "large", r.xlarge = "xlarge", r))(P || {}), h;
+import { clsx as $ } from "../utils/clsx.js";
+var j = /* @__PURE__ */ ((r) => (r.xxsmall = "xxsmall", r.xsmall = "xsmall", r.small = "small", r.normal = "normal", r.medium = "medium", r.large = "large", r.xlarge = "xlarge", r.xxlarge = "xxlarge", r.xxxlarge = "xxxlarge", r))(j || {}), R = /* @__PURE__ */ ((r) => (r.none = "none", r.xxsmall = "xxsmall", r.xsmall = "xsmall", r.small = "small", r.normal = "normal", r.pill = "pill", r))(R || {}), u = /* @__PURE__ */ ((r) => (r.zero = "zero", r.first = "first", r.second = "second", r.max = "max", r))(u || {}), F = /* @__PURE__ */ ((r) => (r.none = "none", r.hairthin = "hairthin", r.thin = "thin", r.xxsmall = "xxsmall", r.xsmall = "xsmall", r.small = "small", r.normal = "normal", r.medium = "medium", r.large = "large", r.xlarge = "xlarge", r.safezone = "safezone", r))(F || {}), P = /* @__PURE__ */ ((r) => (r.initial = "initial", r.small = "small", r["small-medium"] = "small-medium", r.medium = "medium", r["medium-large"] = "medium-large", r.large = "large", r.xlarge = "xlarge", r))(P || {}), p;
 ((r) => {
-  function i(t = 1) {
-    return `calc(var(--quant) * ${t})`;
+  function s(e = 1) {
+    return `calc(var(--quant) * ${e})`;
   }
-  r.q = i;
-  function s(t) {
-    return `var(--offset-${t})`;
+  r.q = s;
+  function f(e) {
+    return `var(--offset-${e})`;
   }
-  r.offset = s;
-  function u(t = "normal") {
-    return `var(--font-size-${t})`;
+  r.offset = f;
+  function h(e = "normal") {
+    return `var(--font-size-${e})`;
   }
-  r.fontSize = u;
-  function z(t = "first") {
-    return `var(--zindex-${t})`;
+  r.fontSize = h;
+  function b(e = "first") {
+    return `var(--zindex-${e})`;
   }
-  r.zindex = z;
-  function S(t = "normal") {
-    return `var(--border-radius-${t})`;
+  r.zindex = b;
+  function d(e = "normal") {
+    return `var(--line-height-${e})`;
   }
-  r.borderRadius = S;
-  function b(t, e, n = 1) {
-    let l = e;
-    return l === "pure" && (l = ""), typeof l == "number" && (l = `${l}`), `rgba(var(--color-${t}${l ? `-${l}` : ""}), ${n})`;
+  r.lineHeight = d;
+  function v(e = "normal") {
+    return `var(--border-radius-${e})`;
   }
-  r.color = b, ((t) => {
-    t.fullWidth = "util-full-width", t.fullHeight = "util-full-height", t.flexGrow = "util-flex-grow", t.flexNoShrink = "util-flex-no-shrink", t.userSelectableText = "util-text-selectable", t.zIndex9000 = "util-z-index-9000";
-  })(r.cls || (r.cls = {})), r.pc = (t) => `${t}%`, r.px = (t) => `${t}px`, r.ch = (t) => `${t}ch`, r.em = (t) => `${t}em`, r.rem = (t) => `${t}rem`, r.vh = (t) => `${t}vh`, r.vw = (t) => `${t}vw`, r.url = (t) => `url(${t})`, r.getOffsetAttrs = (t, e) => typeof e == "string" || typeof e == "number" ? {
-    [`data-${t}-initial`]: e.toString()
-  } : Object.entries(e).reduce((n, [l, o]) => (n[`data-${t}-${l}`] = o.toString(), n), {}), r.getOffsetStyles = (t, e) => typeof e == "string" ? {
-    [`--${t}-initial`]: s(e)
-  } : typeof e == "number" ? {
-    [`--${t}-initial`]: i(e)
-  } : Object.entries(e).reduce((n, [l, o]) => (n[`--${t}-${l}`] = typeof o == "number" ? i(o) : s(o), n), {});
-  function f(t, e) {
-    const {
-      m: n,
-      mt: l,
-      mr: o,
-      mb: m,
-      ml: $,
-      p: g,
-      pt: a,
-      pr: p,
-      pb: x,
-      pl: d
-    } = t;
-    return {
-      ...n ? e("m", n) : null,
-      ...l ? e("mt", l) : null,
-      ...o ? e("mr", o) : null,
-      ...m ? e("mb", m) : null,
-      ...$ ? e("ml", $) : null,
-      ...g ? e("p", g) : null,
-      ...a ? e("pt", a) : null,
-      ...p ? e("pr", p) : null,
-      ...x ? e("pb", x) : null,
-      ...d ? e("pl", d) : null
+  r.borderRadius = v;
+  function y(e, l, n = 1) {
+    let t = l;
+    return t === "pure" && (t = ""), typeof t == "number" && (t = `${t}`), `rgba(var(--color-${e}${t ? `-${t}` : ""}), ${n})`;
+  }
+  r.color = y, ((e) => {
+    e.fullWidth = "util-full-width", e.fullHeight = "util-full-height", e.flexGrow = "util-flex-grow", e.flexNoShrink = "util-flex-no-shrink", e.userSelectableText = "util-text-selectable", e.zIndex9000 = "util-z-index-9000";
+  })(r.cls || (r.cls = {})), r.pc = (e) => `${e}%`, r.px = (e) => `${e}px`, r.ch = (e) => `${e}ch`, r.em = (e) => `${e}em`, r.rem = (e) => `${e}rem`, r.vh = (e) => `${e}vh`, r.vw = (e) => `${e}vw`, r.url = (e) => `url(${e})`;
+  function a(e) {
+    return e == null ? "" : typeof e == "number" ? s(e) : e.toString();
+  }
+  r.defaultResponsiveValueFormatter = a;
+  function x(e, l, n = a) {
+    return l == null ? {} : typeof l == "object" && !Array.isArray(l) ? Object.entries(l).reduce((t, [o, i]) => (t[`--${e}-${o}`] = n(i), t), {}) : {
+      [`--${e}-initial`]: n(l)
     };
   }
-  r.callAllMPProps = f, r.getAllMPStyles = (t) => f(t, r.getOffsetStyles), r.getAllMPAttrs = (t) => f(t, r.getOffsetAttrs);
-})(h || (h = {}));
+  r.getResponsiveStyles = x;
+  function g(e, l) {
+    return l == null ? "" : typeof l == "object" && !Array.isArray(l) ? $(Object.keys(l).map((n) => `ui-${e}-${n}`)) : `ui-${e}-initial`;
+  }
+  r.getResponsiveClassnames = g;
+  function A(e, l, n = a) {
+    return l == null ? [] : typeof l == "object" && !Array.isArray(l) ? Object.entries(l).reduce((t, [o, i]) => (t.push(`${e}-${o}-${n(i)}`), t), []) : [`${e}-initial-${n(l)}`];
+  }
+  r.getResponsiveFlatClassnames = A;
+  function m(e) {
+    return typeof e == "number" ? s(e) : f(e);
+  }
+  r.offsetResponsiveValueFormatter = m, r.getOffsetStyles = (e, l) => x(e, l, m);
+  function c(e, l) {
+    return Object.entries(e).reduce((n, [t, o]) => (Object.assign(n, l(t, o)), n), {});
+  }
+  r.callAllMPProps = c, r.getAllMPStyles = (e) => c(e, r.getOffsetStyles), r.getAllMPClassnames = (e) => $(
+    Object.entries(e).map(
+      ([l, n]) => g(l, n)
+    )
+  );
+})(p || (p = {}));
 export {
+  R as BorderRadiusEnum,
   P as MediaQueryEnum,
-  v as OffsetEnum,
-  A as ZIndexEnum,
-  h as ui
+  F as OffsetEnum,
+  j as TextSizeEnum,
+  u as ZIndexEnum,
+  p as ui
 };

package/dist/index-BZPx6jYI.js

@@ -0,0 +1,8 @@
+import * as u from "react";
+function t(r) {
+  const e = u.useRef({ value: r, previous: r });
+  return u.useMemo(() => (e.current.value !== r && (e.current.previous = e.current.value, e.current.value = r), e.current.previous), [r]);
+}
+export {
+  t as u
+};

package/dist/index-ByaXH_ih.js

@@ -0,0 +1,10 @@
+import * as t from "react";
+import "react/jsx-runtime";
+var r = t.createContext(void 0);
+function n(o) {
+  const e = t.useContext(r);
+  return o || e || "ltr";
+}
+export {
+  n as u
+};

package/dist/index-Cf5Yu9oD.js

@@ -0,0 +1,67 @@
+import * as i from "react";
+function d(e) {
+  const r = i.useRef(e);
+  return i.useEffect(() => {
+    r.current = e;
+  }), i.useMemo(() => (...o) => {
+    var t;
+    return (t = r.current) == null ? void 0 : t.call(r, ...o);
+  }, []);
+}
+function v({
+  prop: e,
+  defaultProp: r,
+  onChange: o = () => {
+  }
+}) {
+  const [t, s] = b({ defaultProp: r, onChange: o }), n = e !== void 0, f = n ? e : t, c = d(o), a = i.useCallback(
+    (u) => {
+      if (n) {
+        const l = typeof u == "function" ? u(e) : u;
+        l !== e && c(l);
+      } else
+        s(u);
+    },
+    [n, e, s, c]
+  );
+  return [f, a];
+}
+function b({
+  defaultProp: e,
+  onChange: r
+}) {
+  const o = i.useState(e), [t] = o, s = i.useRef(t), n = d(r);
+  return i.useEffect(() => {
+    s.current !== t && (n(t), s.current = t);
+  }, [t, s, n]), o;
+}
+var h = globalThis != null && globalThis.document ? i.useLayoutEffect : () => {
+};
+function z(e) {
+  const [r, o] = i.useState(void 0);
+  return h(() => {
+    if (e) {
+      o({ width: e.offsetWidth, height: e.offsetHeight });
+      const t = new ResizeObserver((s) => {
+        if (!Array.isArray(s) || !s.length)
+          return;
+        const n = s[0];
+        let f, c;
+        if ("borderBoxSize" in n) {
+          const a = n.borderBoxSize, u = Array.isArray(a) ? a[0] : a;
+          f = u.inlineSize, c = u.blockSize;
+        } else
+          f = e.offsetWidth, c = e.offsetHeight;
+        o({ width: f, height: c });
+      });
+      return t.observe(e, { box: "border-box" }), () => t.unobserve(e);
+    } else
+      o(void 0);
+  }, [e]), r;
+}
+export {
+  z as a,
+  h as b,
+  d as c,
+  v as u
+};