@cfx-dev/ui-components 4.0.1 → 4.1.1

package/dist/components/Layout/Box/Box.d.ts

@@ -1,5 +1,5 @@
 import { default as React } from 'react';
-import { MPProps } from '../../ui';
+import { MPProps, ResponsiveValueType } from '../../ui';
 
 export interface BoxProps extends MPProps {
     noOverflow?: boolean;
@@ -8,16 +8,9 @@ export interface BoxProps extends MPProps {
     fullWidth?: boolean;
     fullHeight?: boolean;
     fitContentWidth?: boolean;
-    /**
-     * Number values is treated like quant multiplier
-     * String value used as is
-     */
-    width?: number | string;
-    /**
-     * Number values is treated like quant multiplier
-     * String value used as is
-     */
-    height?: number | string;
+    width?: ResponsiveValueType;
+    height?: ResponsiveValueType;
+    flex?: ResponsiveValueType<string>;
     children?: React.ReactNode;
     className?: string;
     style?: React.CSSProperties;

package/dist/components/Layout/Box/Box.js

@@ -1,107 +1,69 @@
-import { jsx as W } from "react/jsx-runtime";
-import x from "react";
-import { useContextualStyle as j } from "../../Style/Style.js";
-import { ui as g } from "../../ui.js";
-import { clsx as H } from "../../../utils/clsx.js";
-const z = "cfxui__Box__root__299ae", D = "cfxui__Box__grow__7ee8d", t = {
-  root: z,
+import { jsx as R } from "react/jsx-runtime";
+import c from "react";
+import { useContextualStyle as S } from "../../Style/Style.js";
+import { ui as o } from "../../ui.js";
+import { clsx as C } from "../../../utils/clsx.js";
+const k = "cfxui__Box__root__299ae", M = "cfxui__Box__grow__7ee8d", t = {
+  root: k,
   "full-width": "cfxui__Box__full-width__2b253",
   "fit-content-width": "cfxui__Box__fit-content-width__eff85",
   "full-height": "cfxui__Box__full-height__1d61f",
   "no-overflow": "cfxui__Box__no-overflow__68f14",
   "no-shrink": "cfxui__Box__no-shrink__fbd72",
-  grow: D,
+  grow: M,
   "no-grow": "cfxui__Box__no-grow__7c039"
-};
-function y(e) {
-  return typeof e == "string" ? e : g.q(e);
-}
-const K = x.forwardRef(function(S, M) {
+}, N = (r) => r, F = c.forwardRef(function(x, u) {
   const {
-    noOverflow: b = !1,
-    noShrink: k = !1,
-    grow: r = void 0,
-    width: m,
-    height: d,
-    children: v,
-    className: A,
-    fullWidth: C,
-    fullHeight: N,
-    fitContentWidth: R,
-    style: a,
-    // --- MPProps
-    m: f,
-    mt: i,
-    mr: _,
-    mb: n,
-    ml: l,
-    p: s,
-    pt: c,
-    pr: u,
-    pb: h,
-    pl: w
-  } = S, p = j(), q = H(t.root, A, {
-    [t["full-width"]]: C,
-    [t["full-height"]]: N,
-    [t["fit-content-width"]]: R,
-    [t["no-overflow"]]: b,
-    [t["no-shrink"]]: k,
-    [t["no-grow"]]: r === !1,
-    [t.grow]: r === !0
-  }), O = x.useMemo(() => g.getAllMPAttrs({
-    m: f,
-    mt: i,
-    mr: _,
-    mb: n,
-    ml: l,
-    p: s,
-    pt: c,
-    pr: u,
-    pb: h,
-    pl: w
-  }), [
-    f,
-    i,
-    _,
-    n,
-    l,
-    s,
-    c,
-    u,
-    h,
-    w
-  ]), B = x.useMemo(() => g.getAllMPStyles({
-    m: f,
-    mt: i,
-    mr: _,
-    mb: n,
-    ml: l,
-    p: s,
-    pt: c,
-    pr: u,
-    pb: h,
-    pl: w
-  }), [
-    f,
-    i,
-    _,
-    n,
-    l,
-    s,
-    c,
-    u,
-    h,
-    w
-  ]), P = x.useMemo(() => {
-    const o = {
-      ...B,
-      ...p,
-      ...a || {}
+    noOverflow: a = !1,
+    noShrink: w = !1,
+    grow: e = void 0,
+    width: s,
+    height: i,
+    children: g,
+    className: d,
+    fullWidth: m,
+    fullHeight: p,
+    fitContentWidth: v,
+    flex: l,
+    style: f,
+    ...n
+  } = x, h = S(), B = C(
+    t.root,
+    d,
+    o.getResponsiveClassnames("width", s),
+    o.getResponsiveClassnames("height", i),
+    o.getResponsiveClassnames("flex", l),
+    o.getAllMPClassnames(n),
+    {
+      [t["full-width"]]: m,
+      [t["full-height"]]: p,
+      [t["fit-content-width"]]: v,
+      [t["no-overflow"]]: a,
+      [t["no-shrink"]]: w,
+      [t["no-grow"]]: e === !1,
+      [t.grow]: e === !0
+    }
+  ), y = c.useMemo(() => {
+    const _ = {
+      ...o.getResponsiveStyles("width", s),
+      ...o.getResponsiveStyles("height", i),
+      ...o.getResponsiveStyles("flex", l, N),
+      ...o.getAllMPStyles(n),
+      ...h,
+      ...f || {}
     };
-    return m && (o.width = y(m)), d && (o.height = y(d)), !o.width && r === !0 && (o.width = "1px"), o;
-  }, [r, d, B, a, m, p]);
-  return /* @__PURE__ */ W("div", { ...O, ref: M, className: q, style: P, children: v });
+    return !_.width && e === !0 && (_.width = "1px"), _;
+  }, [s, i, n, h, f, e, l]);
+  return /* @__PURE__ */ R(
+    "div",
+    {
+      ref: u,
+      className: B,
+      style: y,
+      children: g
+    }
+  );
 });
 export {
-  K as Box
+  F as Box
 };

package/dist/components/Layout/Flex/Flex.d.ts

@@ -1,17 +1,21 @@
 import { default as React } from 'react';
 import { BoxProps } from '../Box/Box';
-import { OffesetType } from '../../ui';
+import { ResponsiveOffsetType, ResponsiveValueType } from '../../ui';
+import { FlexAlignItemsType, FlexDirectionType, FlexJustifyContentType, FlexWrapType } from './Flex.types';
 
 export interface FlexProps extends BoxProps {
     centered?: boolean | 'axis' | 'cross-axis' | 'baseline-axis' | 'baseline-cross-axis';
     vertical?: boolean;
     reverseOrder?: boolean;
     stretch?: boolean;
-    wrap?: boolean;
     spaceBetween?: boolean;
     alignToEnd?: boolean;
     alignToEndAxis?: boolean;
-    gap?: OffesetType;
+    gap?: ResponsiveOffsetType;
+    direction?: ResponsiveValueType<FlexDirectionType>;
+    alignItems?: ResponsiveValueType<FlexAlignItemsType>;
+    justifyContent?: ResponsiveValueType<FlexJustifyContentType>;
+    wrap?: ResponsiveValueType<FlexWrapType>;
     children?: React.ReactNode;
     className?: string;
 }

package/dist/components/Layout/Flex/Flex.js

@@ -1,10 +1,11 @@
-import { jsx as l } from "react/jsx-runtime";
-import m from "react";
-import { Box as h } from "../Box/Box.js";
-import { clsx as b } from "../../../utils/clsx.js";
-import { FlexRestricter as w } from "./FlexRestricter.js";
-const v = "cfxui__Flex__root__d860a", z = "cfxui__Flex__centered__e911c", R = "cfxui__Flex__vertical__552db", C = "cfxui__Flex__repell__6ea3f", N = "cfxui__Flex__wrap__9d0d6", B = "cfxui__Flex__stretch__5c1ce", E = "cfxui__Flex__horizontal__d64f7", e = {
-  root: v,
+import { jsx as o } from "react/jsx-runtime";
+import d from "react";
+import { Box as y } from "../Box/Box.js";
+import { ui as s } from "../../ui.js";
+import { clsx as C } from "../../../utils/clsx.js";
+import { FlexRestricter as S } from "./FlexRestricter.js";
+const j = "cfxui__Flex__root__d860a", z = "cfxui__Flex__centered__e911c", N = "cfxui__Flex__vertical__552db", B = "cfxui__Flex__repell__6ea3f", E = "cfxui__Flex__wrap__9d0d6", O = "cfxui__Flex__stretch__5c1ce", T = "cfxui__Flex__horizontal__d64f7", e = {
+  root: j,
   "full-width": "cfxui__Flex__full-width__b7146",
   "full-height": "cfxui__Flex__full-height__d3475",
   centered: z,
@@ -13,71 +14,78 @@ const v = "cfxui__Flex__root__d860a", z = "cfxui__Flex__centered__e911c", R = "c
   "baseline-axis": "cfxui__Flex__baseline-axis__9ac0d",
   "baseline-cross-axis": "cfxui__Flex__baseline-cross-axis__b4492",
   "reverse-order": "cfxui__Flex__reverse-order__65a69",
-  vertical: R,
-  repell: C,
-  wrap: N,
+  vertical: N,
+  repell: B,
+  wrap: E,
   "align-to-end": "cfxui__Flex__align-to-end__4b5ea",
   "align-to-end-axis": "cfxui__Flex__align-to-end-axis__db8aa",
   "space-between": "cfxui__Flex__space-between__98493",
-  stretch: B,
-  horizontal: E,
-  "gap-none": "cfxui__Flex__gap-none__deb35",
-  "gap-hairthin": "cfxui__Flex__gap-hairthin__5e46a",
-  "gap-thin": "cfxui__Flex__gap-thin__090a7",
-  "gap-xxsmall": "cfxui__Flex__gap-xxsmall__601de",
-  "gap-xsmall": "cfxui__Flex__gap-xsmall__17eb1",
-  "gap-small": "cfxui__Flex__gap-small__7c57e",
-  "gap-normal": "cfxui__Flex__gap-normal__56a4e",
-  "gap-medium": "cfxui__Flex__gap-medium__50167",
-  "gap-large": "cfxui__Flex__gap-large__91d92",
-  "gap-xlarge": "cfxui__Flex__gap-xlarge__ec431",
-  "gap-safezone": "cfxui__Flex__gap-safezone__4e3d1"
+  stretch: O,
+  horizontal: T
 };
-function T(s, a) {
+function A(c, _) {
   const {
-    centered: _ = !1,
-    vertical: i = !1,
-    reverseOrder: x = !1,
-    stretch: c = !1,
-    wrap: t = !1,
-    spaceBetween: n = !1,
-    alignToEnd: o = !1,
-    alignToEndAxis: f = !1,
-    gap: d = "normal",
-    children: p,
-    className: u,
-    ...g
-  } = s, F = b(e.root, u, e[`gap-${d}`], {
-    [e.centered]: _ === !0,
-    [e["centered-axis"]]: _ === "axis",
-    [e["centered-cross-axis"]]: _ === "cross-axis",
-    [e["baseline-axis"]]: _ === "baseline-axis",
-    [e["baseline-cross-axis"]]: _ === "baseline-cross-axis",
-    [e.vertical]: i,
-    [e.horizontal]: !i,
-    [e.stretch]: c,
-    [e.wrap]: t,
-    [e["align-to-end"]]: o,
-    [e["align-to-end-axis"]]: f,
-    [e["space-between"]]: n,
-    [e["reverse-order"]]: x
-  });
-  return /* @__PURE__ */ l(
-    h,
+    centered: t = !1,
+    vertical: x = !1,
+    reverseOrder: p = !1,
+    stretch: u = !1,
+    spaceBetween: g = !1,
+    alignToEnd: m = !1,
+    alignToEndAxis: F = !1,
+    children: v,
+    className: b,
+    gap: i,
+    direction: n,
+    alignItems: r,
+    justifyContent: a,
+    wrap: l,
+    ...h
+  } = c, R = C(
+    e.root,
+    b,
+    s.getResponsiveClassnames("gap", i),
+    s.getResponsiveClassnames("flex-direction", n),
+    s.getResponsiveClassnames("align-items", r),
+    s.getResponsiveClassnames("justify-content", a),
+    s.getResponsiveClassnames("flex-wrap", l),
     {
-      ref: a,
-      className: F,
-      ...g,
-      children: p
+      [e.centered]: t === !0,
+      [e["centered-axis"]]: t === "axis",
+      [e["centered-cross-axis"]]: t === "cross-axis",
+      [e["baseline-axis"]]: t === "baseline-axis",
+      [e["baseline-cross-axis"]]: t === "baseline-cross-axis",
+      [e.vertical]: x,
+      [e.horizontal]: !x,
+      [e.stretch]: u,
+      [e["align-to-end"]]: m,
+      [e["align-to-end-axis"]]: F,
+      [e["space-between"]]: g,
+      [e["reverse-order"]]: p
+    }
+  ), w = d.useMemo(() => ({
+    ...s.getOffsetStyles("gap", i),
+    ...s.getResponsiveStyles("flex-direction", n),
+    ...s.getResponsiveStyles("align-items", r),
+    ...s.getResponsiveStyles("justify-content", a),
+    ...s.getResponsiveStyles("flex-wrap", l)
+  }), [i, n, r, a, l]);
+  return /* @__PURE__ */ o(
+    y,
+    {
+      ref: _,
+      className: R,
+      style: w,
+      ...h,
+      children: v
     }
   );
 }
-const j = m.forwardRef(T), r = j;
-r.Restricted = function({
-  children: a
+const I = d.forwardRef(A), f = I;
+f.Restricted = function({
+  children: _
 }) {
-  return /* @__PURE__ */ l(r, { children: /* @__PURE__ */ l(w, { children: a }) });
+  return /* @__PURE__ */ o(f, { children: /* @__PURE__ */ o(S, { children: _ }) });
 };
 export {
-  r as Flex
+  f as Flex
 };

package/dist/components/Layout/Flex/Flex.types.d.ts

@@ -0,0 +1,42 @@
+export declare enum FlexDirectionEnum {
+    row = "row",
+    column = "column",
+    'row-reverse' = "row-reverse",
+    'column-reverse' = "column-reverse"
+}
+export type FlexDirectionType = keyof typeof FlexDirectionEnum;
+export declare enum FlexAlignItemsEnum {
+    stretch = "stretch",
+    center = "center",
+    start = "start",
+    end = "end",
+    baseline = "baseline",
+    unset = "unset",
+    'flex-start' = "flex-start",
+    'flex-end' = "flex-end",
+    'self-start' = "self-start",
+    'self-end' = "self-end",
+    'anchor-center' = "anchor-center"
+}
+export type FlexAlignItemsType = keyof typeof FlexAlignItemsEnum;
+export declare enum FlexJustifyContentEnum {
+    stretch = "stretch",
+    center = "center",
+    start = "start",
+    end = "end",
+    left = "left",
+    right = "right",
+    unset = "unset",
+    'flex-start' = "flex-start",
+    'flex-end' = "flex-end",
+    'space-between' = "space-between",
+    'space-around' = "space-around"
+}
+export type FlexJustifyContentType = keyof typeof FlexJustifyContentEnum;
+export declare enum FlexWrapEnum {
+    nowrap = "nowrap",
+    wrap = "wrap",
+    unset = "unset",
+    'wrap-reverse' = "wrap-reverse"
+}
+export type FlexWrapType = keyof typeof FlexWrapEnum;

package/dist/components/Layout/Flex/Flex.types.js

@@ -0,0 +1,7 @@
+var e = /* @__PURE__ */ ((r) => (r.row = "row", r.column = "column", r["row-reverse"] = "row-reverse", r["column-reverse"] = "column-reverse", r))(e || {}), a = /* @__PURE__ */ ((r) => (r.stretch = "stretch", r.center = "center", r.start = "start", r.end = "end", r.baseline = "baseline", r.unset = "unset", r["flex-start"] = "flex-start", r["flex-end"] = "flex-end", r["self-start"] = "self-start", r["self-end"] = "self-end", r["anchor-center"] = "anchor-center", r))(a || {}), c = /* @__PURE__ */ ((r) => (r.stretch = "stretch", r.center = "center", r.start = "start", r.end = "end", r.left = "left", r.right = "right", r.unset = "unset", r["flex-start"] = "flex-start", r["flex-end"] = "flex-end", r["space-between"] = "space-between", r["space-around"] = "space-around", r))(c || {}), s = /* @__PURE__ */ ((r) => (r.nowrap = "nowrap", r.wrap = "wrap", r.unset = "unset", r["wrap-reverse"] = "wrap-reverse", r))(s || {});
+export {
+  a as FlexAlignItemsEnum,
+  e as FlexDirectionEnum,
+  c as FlexJustifyContentEnum,
+  s as FlexWrapEnum
+};

package/dist/components/Layout/Scrollable/ScrollableShowcase.js

@@ -2,6 +2,7 @@ import { jsxs as l, jsx as r } from "react/jsx-runtime";
 import d from "react";
 import { Flex as i } from "../Flex/Flex.js";
 import { Text as t } from "../../Text/Text.js";
+import "../../ui.js";
 import { LOREM_IPSUM as e } from "../../../utils/loremipsum.js";
 import { Scrollable as o } from "./Scrollable.js";
 function c() {

package/dist/components/Link/LinkShowcase.js

@@ -2,6 +2,7 @@ import { jsxs as i, jsx as e } from "react/jsx-runtime";
 import d from "react";
 import { Flex as n } from "../Layout/Flex/Flex.js";
 import { Text as r } from "../Text/Text.js";
+import "../ui.js";
 import l from "./ButtonLink.js";
 import t from "./Link.js";
 function c() {

package/dist/components/Logos/LogosShowcase.js

@@ -2,6 +2,7 @@ import { jsxs as l, jsx as e } from "react/jsx-runtime";
 import t from "react";
 import { Flex as r } from "../Layout/Flex/Flex.js";
 import { Text as i } from "../Text/Text.js";
+import "../ui.js";
 import { Logos as c } from "./index.js";
 function d() {
   return /* @__PURE__ */ l(r, { gap: "xlarge", vertical: !0, children: [
@@ -424,7 +425,7 @@ function d() {
     ] })
   ] });
 }
-const g = t.memo(d);
+const x = t.memo(d);
 export {
-  g as default
+  x as default
 };

package/dist/components/Modal/Modal.js

@@ -6,6 +6,7 @@ import "../Button/LinkButton.js";
 import x from "../IconButton/IconButton.js";
 import { Overlay as t } from "../Overlay/Overlay.js";
 import { Text as m } from "../Text/Text.js";
+import "../ui.js";
 import { clsx as s } from "../../utils/clsx.js";
 import "../../utils/hooks/useGlobalKeyboardEvent.js";
 import { useKeyboardClose as y } from "../../utils/hooks/useKeyboardClose.js";

package/dist/components/Overlay/Overlay.js

@@ -1,6 +1,6 @@
 import { jsx as r } from "react/jsx-runtime";
 import l from "react";
-import { F as _ } from "../../Combination-BRUj3CHE.js";
+import { F as _ } from "../../Combination-Cbiw1XRb.js";
 import { Interactive as d } from "../Interactive/Interactive.js";
 import { clsx as a } from "../../utils/clsx.js";
 import "../../utils/hooks/useGlobalKeyboardEvent.js";

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

@@ -1,6 +1,6 @@
 import { default as React } from 'react';
-import { IconSize } from '../Icon';
 import { InputSize } from '../Input';
+import { ResponsiveValueType } from '../ui';
 
 export interface SelectOption<T> {
     value: T;
@@ -13,8 +13,7 @@ export interface SelectProps<T = string> {
     className?: string;
     placeholder?: React.ReactNode;
     disabled?: boolean;
-    size?: InputSize;
+    size?: ResponsiveValueType<InputSize>;
     fullWidth?: boolean;
 }
-export declare const ICON_SIZE_MAP: Record<InputSize, IconSize>;
 export declare const Select: React.ForwardRefExoticComponent<SelectProps<string> & React.RefAttributes<unknown>>;