@cfx-dev/ui-components 4.0.2 → 4.2.0

package/dist/components/Accordion/Accordion.js

@@ -1,9 +1,10 @@
 import { jsx as e, jsxs as g } from "react/jsx-runtime";
-import A, { createContext as v, useState as f, useContext as w, useEffect as D } from "react";
+import A, { createContext as v, useState as p, useContext as w, useEffect as D } from "react";
 import { Icon as x } from "../Icon/Icon.js";
 import { Flex as C } from "../Layout/Flex/Flex.js";
 import { Text as b } from "../Text/Text.js";
-import { clsx as p } from "../../utils/clsx.js";
+import "../ui.js";
+import { clsx as f } from "../../utils/clsx.js";
 const y = "cfxui__Accordion__root__23c5d", F = "cfxui__Accordion__item__88b4c", N = "cfxui__Accordion__header__cbd69", U = "cfxui__Accordion__triggerContainer__b92c1", T = "cfxui__Accordion__iconFlip__367de", R = "cfxui__Accordion__iconUp__28d27", $ = "cfxui__Accordion__iconDown__b9e95", k = "cfxui__Accordion__iconLeft__e348b", E = "cfxui__Accordion__iconRight__bbf0c", L = "cfxui__Accordion__content__5ecaf", O = "cfxui__Accordion__open__ed604", n = {
   root: y,
   item: F,
@@ -16,11 +17,11 @@ const y = "cfxui__Accordion__root__23c5d", F = "cfxui__Accordion__item__88b4c",
   iconRight: E,
   content: L,
   open: O
-}, h = v(void 0), P = function({
+}, h = v(void 0), V = function({
   children: c,
   className: o
 }) {
-  const [t, s] = f(/* @__PURE__ */ new Set()), _ = A.useCallback((r) => {
+  const [t, s] = p(/* @__PURE__ */ new Set()), _ = A.useCallback((r) => {
     s((u) => {
       const i = new Set(u);
       return i.has(r) ? i.delete(r) : i.add(r), i;
@@ -29,17 +30,17 @@ const y = "cfxui__Accordion__root__23c5d", F = "cfxui__Accordion__item__88b4c",
     openItems: t,
     toggleItem: _
   }), [t, _]);
-  return /* @__PURE__ */ e(h.Provider, { value: l, children: /* @__PURE__ */ e("div", { className: p(n.root, o), role: "presentation", children: c }) });
-}, V = function({
+  return /* @__PURE__ */ e(h.Provider, { value: l, children: /* @__PURE__ */ e("div", { className: f(n.root, o), role: "presentation", children: c }) });
+}, q = function({
   children: c,
   id: o
 }) {
   return /* @__PURE__ */ e("div", { className: n.item, id: o, role: "region", "aria-labelledby": `${o}-header`, children: c });
-}, q = function({
+}, B = function({
   children: c
 }) {
   return /* @__PURE__ */ e("div", { className: n.header, children: c });
-}, B = function({
+}, G = function({
   text: c,
   id: o,
   iconLeft: t
@@ -50,7 +51,7 @@ const y = "cfxui__Accordion__root__23c5d", F = "cfxui__Accordion__item__88b4c",
   const {
     toggleItem: _,
     openItems: l
-  } = s, r = l.has(o), [u, i] = f(!1), [m, I] = f(r ? "UpChevron" : "DownChevron");
+  } = s, r = l.has(o), [u, i] = p(!1), [m, I] = p(r ? "UpChevron" : "DownChevron");
   return D(() => {
     const d = setTimeout(() => {
       I(r ? "UpChevron" : "DownChevron"), i(!1);
@@ -77,7 +78,7 @@ const y = "cfxui__Accordion__root__23c5d", F = "cfxui__Accordion__item__88b4c",
         /* @__PURE__ */ e(C, { centered: !0, children: /* @__PURE__ */ e(
           x,
           {
-            className: p(n.iconRight, {
+            className: f(n.iconRight, {
               [n.iconFlip]: u,
               [n.iconUp]: m === "UpChevron",
               [n.iconDown]: m === "DownChevron"
@@ -88,7 +89,7 @@ const y = "cfxui__Accordion__root__23c5d", F = "cfxui__Accordion__item__88b4c",
       ]
     }
   );
-}, G = function({
+}, J = function({
   children: c,
   id: o
 }) {
@@ -101,7 +102,7 @@ const y = "cfxui__Accordion__root__23c5d", F = "cfxui__Accordion__item__88b4c",
   return /* @__PURE__ */ e(
     "div",
     {
-      className: p(n.content, { [n.open]: s.has(o) }),
+      className: f(n.content, { [n.open]: s.has(o) }),
       id: `${o}-content`,
       role: "region",
       "aria-labelledby": `${o}-header`,
@@ -110,9 +111,9 @@ const y = "cfxui__Accordion__root__23c5d", F = "cfxui__Accordion__item__88b4c",
   );
 };
 export {
-  P as Accordion,
-  G as AccordionContent,
-  q as AccordionHeader,
-  V as AccordionItem,
-  B as AccordionTrigger
+  V as Accordion,
+  J as AccordionContent,
+  B as AccordionHeader,
+  q as AccordionItem,
+  G as AccordionTrigger
 };

package/dist/components/Accordion/AccordionShowcase.js

@@ -2,6 +2,7 @@ import { jsx as e, jsxs as t } from "react/jsx-runtime";
 import a from "react";
 import { Flex as c } from "../Layout/Flex/Flex.js";
 import { Text as d } from "../Text/Text.js";
+import "../ui.js";
 import { Accordion as h, AccordionItem as i, AccordionHeader as o, AccordionTrigger as n, AccordionContent as r } from "./Accordion.js";
 function l() {
   return /* @__PURE__ */ e(c, { fullWidth: !0, vertical: !0, children: /* @__PURE__ */ t(c, { fullWidth: !0, vertical: !0, children: [
@@ -58,7 +59,7 @@ function l() {
     ] })
   ] }) });
 }
-const b = a.memo(l);
+const g = a.memo(l);
 export {
-  b as default
+  g as default
 };

package/dist/components/Avatar/AvatarShowcase.js

@@ -2,6 +2,7 @@ import { jsxs as r, jsx as e } from "react/jsx-runtime";
 import a from "react";
 import { Flex as l } from "../Layout/Flex/Flex.js";
 import { Text as t } from "../Text/Text.js";
+import "../ui.js";
 import { Avatar as i } from "./Avatar.js";
 function u() {
   return /* @__PURE__ */ r(l, { fullWidth: !0, vertical: !0, children: [
@@ -27,7 +28,7 @@ function u() {
     ] })
   ] });
 }
-const s = a.memo(u);
+const m = a.memo(u);
 export {
-  s as default
+  m as default
 };

package/dist/components/Badge/BadgeShowcase.js

@@ -1,9 +1,10 @@
 import { jsxs as e, jsx as r } from "react/jsx-runtime";
-import n from "react";
+import o from "react";
 import { Flex as l } from "../Layout/Flex/Flex.js";
 import { Text as i } from "../Text/Text.js";
+import "../ui.js";
 import { Badge as c } from "./Badge.js";
-function o() {
+function n() {
   return /* @__PURE__ */ e(l, { gap: "large", vertical: !0, children: [
     /* @__PURE__ */ e(l, { gap: "normal", vertical: !0, children: [
       /* @__PURE__ */ r(i, { children: "Success" }),
@@ -72,7 +73,7 @@ function o() {
     ] })
   ] });
 }
-const s = n.memo(o);
+const u = o.memo(n);
 export {
-  s as default
+  u as default
 };

package/dist/components/Button/ButtonShowcase.js

@@ -2,6 +2,7 @@ import { jsxs as t, jsx as e } from "react/jsx-runtime";
 import l from "react";
 import { Flex as n } from "../Layout/Flex/Flex.js";
 import { Text as i } from "../Text/Text.js";
+import "../ui.js";
 import { Button as r } from "./Button.js";
 import { ButtonBar as o } from "./ButtonBar.js";
 import { LinkButton as c } from "./LinkButton.js";
@@ -140,7 +141,7 @@ function a() {
     ] })
   ] });
 }
-const x = l.memo(a);
+const v = l.memo(a);
 export {
-  x as default
+  v as default
 };

package/dist/components/Checkbox/Checkbox.js

@@ -1,7 +1,8 @@
 import { jsx as _, jsxs as D } from "react/jsx-runtime";
 import * as c from "react";
 import $ from "react";
-import { c as y, u as z, a as L, b as j } from "../../index-BCnz73Lm.js";
+import { b as y, u as z, a as L } from "../../index-Cf5Yu9oD.js";
+import { u as j } from "../../index-BZPx6jYI.js";
 import { r as B } from "../../index-2hJuj4UN.js";
 import { P as E } from "../../index-BlbvKsmN.js";
 import "../Icons/cfx-icons/Close.js";
@@ -186,7 +187,7 @@ function ee(e) {
   let t = (n = Object.getOwnPropertyDescriptor(e.props, "ref")) == null ? void 0 : n.get, o = t && "isReactWarning" in t && t.isReactWarning;
   return o ? e.ref : (t = (r = Object.getOwnPropertyDescriptor(e, "ref")) == null ? void 0 : r.get, o = t && "isReactWarning" in t && t.isReactWarning, o ? e.props.ref : e.props.ref || e.ref);
 }
-var S = "Checkbox", [te, lt] = G(S), [oe, ne] = te(S), M = c.forwardRef(
+var S = "Checkbox", [te, ht] = G(S), [oe, ne] = te(S), M = c.forwardRef(
   (e, t) => {
     const {
       __scopeCheckbox: o,
@@ -265,7 +266,7 @@ var I = "CheckboxIndicator", T = c.forwardRef(
 );
 T.displayName = I;
 var re = (e) => {
-  const { control: t, checked: o, bubbles: n = !0, ...r } = e, u = c.useRef(null), p = L(o), m = j(t);
+  const { control: t, checked: o, bubbles: n = !0, ...r } = e, u = c.useRef(null), p = j(o), m = L(t);
   return c.useEffect(() => {
     const s = u.current, i = window.HTMLInputElement.prototype, a = Object.getOwnPropertyDescriptor(i, "checked").set;
     if (p !== o && a) {
@@ -326,7 +327,7 @@ function me(e) {
   ), a = K(e);
   return /* @__PURE__ */ _(ie, { ...i, id: t, style: { color: a }, className: d, children: /* @__PURE__ */ _(ce, { className: g(P.indicator, r), children: /* @__PURE__ */ _(W, {}) }) });
 }
-const ht = $.memo(me);
+const Ct = $.memo(me);
 export {
-  ht as default
+  Ct as default
 };

package/dist/components/DropdownSelect/DropdownSelect.d.ts

@@ -1,13 +1,16 @@
 import { default as React } from 'react';
+import { IconSize } from '../Icon';
 import { InputSize } from '../Input';
 import { SelectOption } from '../Select';
+import { ResponsiveValueType } from '../ui';
 
+export declare const ICON_SIZE_MAP: Record<InputSize, IconSize>;
 export interface DropdownSelectProps<T = string> {
     options: SelectOption<T>[];
     value?: T;
     onChange: (value: T) => void;
     placeholder?: React.ReactNode;
-    size?: InputSize;
+    size?: ResponsiveValueType<InputSize>;
     disabled?: boolean;
     fullWidth?: boolean;
     onlight?: boolean;