@cfx-dev/ui-components 4.2.24 → 4.3.0

package/dist/components/Select/SelectShowcase.js

@@ -1,6 +1,6 @@
 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 a from "../Layout/Flex/Flex.js";
 import { Text as i } from "../Text/Text.js";
 import "../../utils/ui/ui.js";
 import { Select as n } from "./Select.js";

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

@@ -2,5 +2,6 @@ import { default as React } from 'react';
 
 export interface ShroudProps {
     forRef: React.RefObject<HTMLElement>;
+    ref?: React.Ref<HTMLDivElement>;
 }
-export declare const Shroud: React.ForwardRefExoticComponent<ShroudProps & React.RefAttributes<HTMLDivElement>>;
+export declare function Shroud(props: ShroudProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Shroud/Shroud.js

@@ -1,6 +1,6 @@
-import { jsx as t, jsxs as h } from "react/jsx-runtime";
+import { jsx as t, jsxs as _ } from "react/jsx-runtime";
 import r from "react";
-import { TITLE_OUTLET_ID as _ } from "../Title/Title.js";
+import { TITLE_OUTLET_ID as h } from "../Title/Title.js";
 import "../../utils/hooks/useGlobalKeyboardEvent.js";
 import "../../utils/hooks/useKeyboardClose.js";
 import { useWindowResize as p } from "../../utils/hooks/useWindowResize.js";
@@ -9,13 +9,15 @@ 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) {
+};
+function R(c) {
   const {
-    forRef: s
-  } = l, [u, d] = r.useState({}), f = b(_, "before"), i = r.useCallback(() => {
-    if (!s.current)
+    forRef: i,
+    ref: n
+  } = c, [u, f] = r.useState({}), d = b(h, "before"), s = r.useCallback(() => {
+    if (!i.current)
       return;
-    const o = s.current.getBoundingClientRect(), m = {
+    const o = i.current.getBoundingClientRect(), m = {
       x: o.x,
       y: o.y,
       w: o.width,
@@ -23,22 +25,22 @@ const g = "cfxui__Shroud__root__99944", v = "cfxui__Shroud__tile__db55f", e = {
       sw: globalThis.screen.availWidth,
       sh: globalThis.screen.availHeight
     };
-    d(
+    f(
       Object.fromEntries(
-        Object.entries(m).flatMap(([a, c]) => [
-          [`--${a}`, x.px(c)],
-          [`--${a}-raw`, c]
+        Object.entries(m).flatMap(([l, a]) => [
+          [`--${l}`, x.px(a)],
+          [`--${l}-raw`, a]
         ])
       )
     );
   }, []);
-  return r.useEffect(i, []), p(i), /* @__PURE__ */ t(f, { children: /* @__PURE__ */ h("div", { ref: n, className: e.root, style: u, children: [
+  return r.useEffect(s, []), p(s), /* @__PURE__ */ t(d, { children: /* @__PURE__ */ _("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 }),
     /* @__PURE__ */ t("div", { className: e.tile, "data-bottom": !0 })
   ] }) });
-});
+}
 export {
-  P as Shroud
+  R as Shroud
 };

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

@@ -1,5 +1,5 @@
 import { default as React } from 'react';
-import { BoxProps } from '../Layout/Box/Box';
+import { BoxProps } from '../Layout/Box';
 import { ResponsiveTextSize } from '../Text';
 import { BorderRadiusType, ResponsiveValueType } from '../../utils/ui';
 

package/dist/components/Skeleton/Skeleton.js

@@ -1,42 +1,41 @@
-import { jsx as _ } from "react/jsx-runtime";
+import { jsx as p } 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 "../../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,
-  shimmer: h
+import u from "../Layout/Box/Box.js";
+import { textSizeResponsiveValueFormatter as d } from "../Text/Text.js";
+import { ui as t } from "../../utils/ui/ui.js";
+import { clsx as f } from "../../utils/clsx.js";
+const _ = "cfxui__Skeleton__skeleton__d700e", h = {
+  skeleton: _
 };
-function x(m) {
+function k(l) {
   const {
-    width: l = "100%",
+    width: m = "100%",
     height: e = "small",
-    borderRadius: t = "xsmall",
-    className: i,
+    borderRadius: s = "xsmall",
+    className: a,
     style: o,
-    ...n
-  } = m, a = d(
-    k.skeleton,
-    i,
-    s.getResponsiveClassnames("height", e)
+    ...i
+  } = l, n = f(
+    h.skeleton,
+    a,
+    t.getResponsiveClassnames("height", e)
   ), c = r.useMemo(() => ({
-    borderRadius: s.borderRadius(t),
-    ...s.getResponsiveStyles("height", e, u),
+    borderRadius: t.borderRadius(s),
+    ...t.getResponsiveStyles("height", e, d),
     ...o || {}
-  }), [t, e, o]);
-  return /* @__PURE__ */ _(
-    f,
+  }), [s, e, o]);
+  return /* @__PURE__ */ p(
+    u,
     {
-      className: a,
+      className: n,
       height: e,
-      width: l,
+      width: m,
       style: c,
-      ...n
+      ...i
     }
   );
 }
-const N = r.memo(x);
+const v = r.memo(k);
 export {
-  N as default
+  v as default
 };

package/dist/components/Skeleton/SkeletonShowcase.js

@@ -1,13 +1,13 @@
 import { jsxs as i, jsx as e } from "react/jsx-runtime";
 import f, { useState as n, useEffect as u } from "react";
 import { Badge as t } from "../Badge/Badge.js";
-import { Button as p } from "../Button/Button.js";
-import "../Button/LinkButton.js";
-import { Flex as m } from "../Layout/Flex/Flex.js";
+import p from "../Button/Button.js";
+import "../../utils/links.js";
+import { DataTable as x } from "../DataTable/DataTable.js";
+import m from "../Layout/Flex/Flex.js";
 import { Text as r } from "../Text/Text.js";
 import "../../utils/ui/ui.js";
 import c from "./Skeleton.js";
-import { Table as x } from "../Table/Table.js";
 const g = [
   { text: "Header 1" },
   { text: "Header 2" },

package/dist/components/Slider/Slider.d.ts

@@ -7,6 +7,7 @@ export interface SliderProps extends RadixSlider.SliderProps {
     minLabel?: string | number;
     maxLabel?: string | number;
     trackClassName?: string;
+    ref?: React.Ref<HTMLSpanElement>;
 }
-export declare const Slider: React.ForwardRefExoticComponent<SliderProps & React.RefAttributes<HTMLSpanElement>>;
+export declare function Slider(props: SliderProps): import("react/jsx-runtime").JSX.Element;
 export default Slider;