@cfx-dev/ui-components 4.2.20 → 4.2.22

package/dist/components/Link/LinkShowcase.js

@@ -1,63 +1,68 @@
-import { jsxs as i, jsx as e } from "react/jsx-runtime";
+import { jsxs as r, 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";
+import { Flex as l } from "../Layout/Flex/Flex.js";
+import { Text as i } from "../Text/Text.js";
+import "../../utils/ui/ui.js";
+import t from "./ButtonLink.js";
+import n from "./Link.js";
 function c() {
-  return /* @__PURE__ */ i(n, { gap: "large", vertical: !0, children: [
-    /* @__PURE__ */ i(n, { gap: "normal", vertical: !0, children: [
-      /* @__PURE__ */ e(r, { children: "Theme Default" }),
-      /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(t, { href: "/", children: "Link active" }) }),
-      /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(t, { href: "/", disabled: !0, children: "Link disable" }) }),
-      /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(t, { href: "/", unstyled: !0, children: "Link unstyled" }) })
-    ] }),
-    /* @__PURE__ */ i(n, { gap: "normal", vertical: !0, children: [
-      /* @__PURE__ */ e(r, { children: "Theme secondary" }),
-      /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(t, { href: "/", theme: "secondary", children: "Link active" }) }),
-      /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(t, { href: "/", theme: "secondary", disabled: !0, children: "Link disable" }) })
-    ] }),
-    /* @__PURE__ */ i(n, { gap: "normal", vertical: !0, children: [
-      /* @__PURE__ */ e(r, { children: "ButtonLink - look like link but its button" }),
-      /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(l, { children: "Link active" }) }),
-      /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(l, { disabled: !0, children: "Link disable" }) })
-    ] }),
-    /* @__PURE__ */ i(n, { gap: "normal", vertical: !0, children: [
-      /* @__PURE__ */ e(r, { children: "Inside text" }),
-      /* @__PURE__ */ e("div", { children: /* @__PURE__ */ i(r, { size: "large", as: "h2", children: [
+  return /* @__PURE__ */ r(l, { gap: "large", vertical: !0, children: [
+    /* @__PURE__ */ r(l, { gap: "normal", vertical: !0, children: [
+      /* @__PURE__ */ e(i, { children: "Color Default" }),
+      /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(n, { href: "/", children: "Link active" }) }),
+      /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(n, { href: "/", disabled: !0, children: "Link disable" }) }),
+      /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(n, { href: "/", unstyled: !0, children: "Link unstyled" }) })
+    ] }),
+    /* @__PURE__ */ r(l, { gap: "normal", vertical: !0, children: [
+      /* @__PURE__ */ e(i, { children: "Color secondary" }),
+      /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(n, { href: "/", color: "secondary", children: "Link active" }) }),
+      /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(n, { href: "/", color: "secondary", disabled: !0, children: "Link disable" }) })
+    ] }),
+    /* @__PURE__ */ r(l, { gap: "normal", vertical: !0, children: [
+      /* @__PURE__ */ e(i, { children: "Color red" }),
+      /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(n, { href: "/", color: "red", children: "Link active" }) }),
+      /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(n, { href: "/", color: "red", disabled: !0, children: "Link disable" }) })
+    ] }),
+    /* @__PURE__ */ r(l, { gap: "normal", vertical: !0, children: [
+      /* @__PURE__ */ e(i, { children: "ButtonLink - look like link but its button" }),
+      /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(t, { children: "Link active" }) }),
+      /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(t, { disabled: !0, children: "Link disable" }) })
+    ] }),
+    /* @__PURE__ */ r(l, { gap: "normal", vertical: !0, children: [
+      /* @__PURE__ */ e(i, { children: "Inside text" }),
+      /* @__PURE__ */ e("div", { children: /* @__PURE__ */ r(i, { size: "large", as: "h2", children: [
         "Out of link text. ",
-        /* @__PURE__ */ e(t, { href: "/", children: "Link text" })
+        /* @__PURE__ */ e(n, { href: "/", children: "Link text" })
       ] }) })
     ] }),
-    /* @__PURE__ */ i(n, { gap: "normal", vertical: !0, children: [
-      /* @__PURE__ */ e(r, { children: "Inside typographic text" }),
-      /* @__PURE__ */ e("div", { children: /* @__PURE__ */ i(r, { size: "large", as: "h2", typographic: !0, children: [
+    /* @__PURE__ */ r(l, { gap: "normal", vertical: !0, children: [
+      /* @__PURE__ */ e(i, { children: "Inside typographic text" }),
+      /* @__PURE__ */ e("div", { children: /* @__PURE__ */ r(i, { size: "large", as: "h2", typographic: !0, children: [
         "Out of link text. ",
-        /* @__PURE__ */ e(t, { href: "/", children: "Link text" })
+        /* @__PURE__ */ e(n, { href: "/", children: "Link text" })
       ] }) })
     ] }),
-    /* @__PURE__ */ i(n, { gap: "normal", vertical: !0, children: [
-      /* @__PURE__ */ e(r, { children: "Row a tag" }),
+    /* @__PURE__ */ r(l, { gap: "normal", vertical: !0, children: [
+      /* @__PURE__ */ e(i, { children: "Row a tag" }),
       /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e("a", { href: "/", children: "Link text" }) })
     ] }),
-    /* @__PURE__ */ i(n, { gap: "normal", vertical: !0, children: [
-      /* @__PURE__ */ e(r, { children: "Row a in text" }),
-      /* @__PURE__ */ e("div", { children: /* @__PURE__ */ i(r, { size: "large", as: "h2", children: [
+    /* @__PURE__ */ r(l, { gap: "normal", vertical: !0, children: [
+      /* @__PURE__ */ e(i, { children: "Row a in text" }),
+      /* @__PURE__ */ e("div", { children: /* @__PURE__ */ r(i, { size: "large", as: "h2", children: [
         "Out of link text. ",
         /* @__PURE__ */ e("a", { href: "/", children: "Link text" })
       ] }) })
     ] }),
-    /* @__PURE__ */ i(n, { gap: "normal", vertical: !0, children: [
-      /* @__PURE__ */ e(r, { children: "Row a in typographic text" }),
-      /* @__PURE__ */ e("div", { children: /* @__PURE__ */ i(r, { size: "large", as: "h2", typographic: !0, children: [
+    /* @__PURE__ */ r(l, { gap: "normal", vertical: !0, children: [
+      /* @__PURE__ */ e(i, { children: "Row a in typographic text" }),
+      /* @__PURE__ */ e("div", { children: /* @__PURE__ */ r(i, { size: "large", as: "h2", typographic: !0, children: [
         "Out of link text. ",
         /* @__PURE__ */ e("a", { href: "/", children: "Link text" })
       ] }) })
     ] })
   ] });
 }
-const f = d.memo(c);
+const k = d.memo(c);
 export {
-  f as default
+  k as default
 };

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

@@ -1,3 +1,3 @@
-export { default as Link, getLinkClassName } from './Link';
+export { default as Link, getLinkClassName, getLinkStyles, } from './Link';
 export { default as ButtonLink } from './ButtonLink';
 export type { LinkBaseProps, LinkProps } from './Link';

package/dist/components/Link/index.js

@@ -1,7 +1,8 @@
-import { default as e, getLinkClassName as o } from "./Link.js";
-import { default as n } from "./ButtonLink.js";
+import { default as a, getLinkClassName as n, getLinkStyles as o } from "./Link.js";
+import { default as f } from "./ButtonLink.js";
 export {
-  n as ButtonLink,
-  e as Link,
-  o as getLinkClassName
+  f as ButtonLink,
+  a as Link,
+  n as getLinkClassName,
+  o as getLinkStyles
 };

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

@@ -0,0 +1,2 @@
+export { Loaf } from './Loaf';
+export type { LoafProps, LoafSize, LoafColor, } from './Loaf';

package/dist/components/Loaf/index.js

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

package/dist/components/Logos/LogosShowcase.js

@@ -4,7 +4,7 @@ import { Island as c } from "../Island/Island.js";
 import { Flex as m } from "../Layout/Flex/Flex.js";
 import { Pad as l } from "../Layout/Pad/Pad.js";
 import { Text as a } from "../Text/Text.js";
-import "../ui.js";
+import "../../utils/ui/ui.js";
 import { Logos as p } from "./index.js";
 function h() {
   const s = Object.entries(p).map(([r, i]) => ({

package/dist/components/Modal/Modal.js

@@ -6,7 +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 "../../utils/ui/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/NavList/index.d.ts

@@ -0,0 +1,2 @@
+export { NavList } from './NavList';
+export type { NavListProps, NavListItem } from './NavList';

package/dist/components/NavList/index.js

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

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

@@ -0,0 +1,2 @@
+export { Overlay, OVERLAY_OUTLET_ID } from './Overlay';
+export type { OverlayProps, OverlayBackdropProps, OverlayContentProps, } from './Overlay';

package/dist/components/Overlay/index.js

@@ -0,0 +1,5 @@
+import { OVERLAY_OUTLET_ID as e, Overlay as o } from "./Overlay.js";
+export {
+  e as OVERLAY_OUTLET_ID,
+  o as Overlay
+};

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

@@ -0,0 +1,2 @@
+export { PremiumBadge } from './PremiumBadge';
+export type { PremiumBadgeProps, PremiumBadgeLevel } from './PremiumBadge';

package/dist/components/PremiumBadge/index.js

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

package/dist/components/Prose/Prose.d.ts

@@ -1,6 +1,5 @@
 import { default as React } from 'react';
 
-export interface ProseProps {
-    children?: React.ReactNode;
+export interface ProseProps extends React.PropsWithChildren {
 }
 export declare function Prose({ children, }: ProseProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,2 @@
+export { Prose } from './Prose';
+export type { ProseProps } from './Prose';

package/dist/components/Prose/index.js

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

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

@@ -0,0 +1,2 @@
+export { Radio } from './Radio';
+export type { RadioProps, RadioSize } from './Radio';

package/dist/components/Radio/index.js

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

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

@@ -1,6 +1,6 @@
 import { default as React } from 'react';
 import { InputSize } from '../Input';
-import { ResponsiveValueType } from '../ui';
+import { ResponsiveValueType } from '../../utils/ui';
 
 export interface SelectOption<T> {
     value: T;

package/dist/components/Select/Select.js

@@ -6,13 +6,13 @@ import { c as Je } from "../../index-rKs9bXHr.js";
 import { S as ze, P as O, d as bn } from "../../index-BlbvKsmN.js";
 import { u as xn } from "../../index-ByaXH_ih.js";
 import { c as pe, a as _n, b as X, u as et } from "../../index-Cf5Yu9oD.js";
-import { u as En, a as Pn, b as Rn, o as Tn, s as Nn, f as In, c as An, d as On, h as Mn, l as Ln, g as Dn, e as kn, i as Ge } from "../../index-DBus3GoO.js";
+import { u as En, a as Pn, b as Rn, o as Tn, s as Nn, f as In, c as An, d as On, h as Mn, l as Ln, g as Dn, i as kn, e as Ge } from "../../index-Bz27DCHt.js";
 import { u as Bn } from "../../index-BZPx6jYI.js";
 import { f as ht, _ as ce, c as Fn } from "../../tslib.es6-CBKHJX9H.js";
 import { c as Wn, u as zn } from "../../medium-BA3EQDZW.js";
 import { Icon as Vn } from "../Icon/Icon.js";
-import { ui as Hn } from "../ui.js";
 import { clsx as Me } from "../../utils/clsx.js";
+import { ui as Hn } from "../../utils/ui/ui.js";
 var vt = function(e) {
   var t = e.sideCar, n = ht(e, ["sideCar"]);
   if (!t)

package/dist/components/Select/SelectShowcase.js

@@ -2,7 +2,7 @@ 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 "../ui.js";
+import "../../utils/ui/ui.js";
 import { Select as n } from "./Select.js";
 const t = [
   {

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

@@ -1,5 +1,5 @@
 import { default as React } from 'react';
-import { MPProps, OffsetType } from '../ui';
+import { MPProps, OffsetType } from '../../utils/ui';
 
 export interface SeparatorProps extends MPProps {
     thin?: boolean;

package/dist/components/Separator/Separator.js

@@ -1,7 +1,7 @@
 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";
+import { ui as s } from "../../utils/ui/ui.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",

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

@@ -0,0 +1,2 @@
+export { Separator } from './Separator';
+export type { SeparatorProps } from './Separator';

package/dist/components/Separator/index.js

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

package/dist/components/Shroud/Shroud.js

@@ -1,18 +1,18 @@
 import { jsx as t, jsxs as h } from "react/jsx-runtime";
 import r from "react";
 import { TITLE_OUTLET_ID as _ } from "../Title/Title.js";
-import { ui as p } from "../ui.js";
 import "../../utils/hooks/useGlobalKeyboardEvent.js";
 import "../../utils/hooks/useKeyboardClose.js";
-import { useWindowResize as b } from "../../utils/hooks/useWindowResize.js";
-import { useOutlet as x } from "../../utils/hooks/useOutlet.js";
+import { useWindowResize as p } from "../../utils/hooks/useWindowResize.js";
+import { useOutlet as b } from "../../utils/hooks/useOutlet.js";
+import { ui as x } from "../../utils/ui/ui.js";
 const g = "cfxui__Shroud__root__99944", v = "cfxui__Shroud__tile__db55f", e = {
   root: g,
   tile: v
 }, P = r.forwardRef(function(l, n) {
   const {
     forRef: s
-  } = l, [u, d] = r.useState({}), f = x(_, "before"), i = r.useCallback(() => {
+  } = l, [u, d] = r.useState({}), f = b(_, "before"), i = r.useCallback(() => {
     if (!s.current)
       return;
     const o = s.current.getBoundingClientRect(), m = {
@@ -26,13 +26,13 @@ const g = "cfxui__Shroud__root__99944", v = "cfxui__Shroud__tile__db55f", e = {
     d(
       Object.fromEntries(
         Object.entries(m).flatMap(([a, c]) => [
-          [`--${a}`, p.px(c)],
+          [`--${a}`, x.px(c)],
           [`--${a}-raw`, c]
         ])
       )
     );
   }, []);
-  return r.useEffect(i, []), b(i), /* @__PURE__ */ t(f, { children: /* @__PURE__ */ h("div", { ref: n, className: e.root, style: u, children: [
+  return r.useEffect(i, []), p(i), /* @__PURE__ */ t(f, { children: /* @__PURE__ */ h("div", { ref: n, className: e.root, style: u, children: [
     /* @__PURE__ */ t("div", { className: e.tile, "data-top": !0 }),
     /* @__PURE__ */ t("div", { className: e.tile, "data-left": !0 }),
     /* @__PURE__ */ t("div", { className: e.tile, "data-right": !0 }),

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

@@ -0,0 +1,2 @@
+export { Shroud } from './Shroud';
+export type { ShroudProps } from './Shroud';

package/dist/components/Shroud/index.js

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

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

@@ -1,9 +1,9 @@
 import { default as React } from 'react';
 import { BoxProps } from '../Layout/Box/Box';
 import { ResponsiveTextSize } from '../Text';
-import { BorderRadiusType, ResponsiveValueType } from '../ui';
+import { BorderRadiusType, ResponsiveValueType } from '../../utils/ui';
 
-interface SkeletonProps extends BoxProps {
+export interface SkeletonProps extends BoxProps {
     borderRadius?: BorderRadiusType;
     height?: ResponsiveValueType<ResponsiveTextSize>;
 }

package/dist/components/Skeleton/Skeleton.js

@@ -2,7 +2,7 @@ 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 { ui as s } from "../../utils/ui/ui.js";
 import { clsx as d } from "../../utils/clsx.js";
 const p = "cfxui__Skeleton__skeleton__d700e", h = "cfxui__Skeleton__shimmer__d72f5", k = {
   skeleton: p,

package/dist/components/Skeleton/SkeletonShowcase.js

@@ -5,7 +5,7 @@ import { Button as p } from "../Button/Button.js";
 import "../Button/LinkButton.js";
 import { Flex as m } from "../Layout/Flex/Flex.js";
 import { Text as r } from "../Text/Text.js";
-import "../ui.js";
+import "../../utils/ui/ui.js";
 import c from "./Skeleton.js";
 import { Table as x } from "../Table/Table.js";
 const g = [

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

@@ -1 +1,2 @@
 export { default as Skeleton } from './Skeleton';
+export type { SkeletonProps } from './Skeleton';