@cfx-dev/ui-components 4.0.1 → 4.1.1

package/dist/components/Text/Text.js

@@ -1,73 +1,82 @@
-import { jsx as s } from "react/jsx-runtime";
+import { jsx as f } from "react/jsx-runtime";
 import l from "react";
-import { ui as C } from "../ui.js";
-import { clsx as w } from "../../utils/clsx.js";
-import { getColor as A } from "../../utils/color.js";
-const O = "cfxui__Text__root__2fe11", R = "cfxui__Text__centered__4d7bd", S = "cfxui__Text__underlined__5860e", $ = "cfxui__Text__truncated__417f4", E = "cfxui__Text__typographic__d8155", N = "cfxui__Text__block__cb1b6", o = {
-  root: O,
-  centered: R,
-  underlined: S,
-  truncated: $,
-  typographic: E,
-  block: N
-}, z = {
+import { ui as t, TextSizeEnum as _ } from "../ui.js";
+import { clsx as v } from "../../utils/clsx.js";
+import { getColor as z } from "../../utils/color.js";
+const w = "cfxui__Text__root__2fe11", A = "cfxui__Text__centered__4d7bd", E = "cfxui__Text__underlined__5860e", O = "cfxui__Text__truncated__417f4", F = "cfxui__Text__typographic__d8155", H = "cfxui__Text__block__cb1b6", r = {
+  root: w,
+  centered: A,
+  underlined: E,
+  truncated: O,
+  typographic: F,
+  block: H
+}, N = (e) => e in _ ? t.fontSize(e) : typeof e == "number" ? t.q(e) : e, $ = (e) => e in _ ? t.lineHeight(e) : typeof e == "number" ? t.q(e) : e, B = {
   0: 0,
   25: "var(--text-opacity-25)",
   50: "var(--text-opacity-50)",
   75: "var(--text-opacity-75)",
   100: 1
-}, B = {
+}, P = {
   h1: "h1",
   h2: "h2",
   h3: "h3",
   h4: "h4",
   h5: "h5",
   h6: "h6"
-}, P = (r, t = 1) => {
-  const e = typeof r == "string" && z[r];
-  return typeof e == "string" || typeof e == "number" ? e : t;
-}, D = "primary", F = l.forwardRef(function(t, e) {
+}, q = (e, n = 1) => {
+  const o = typeof e == "string" && B[e];
+  return typeof o == "string" || typeof o == "number" ? o : n;
+}, D = "primary", I = l.forwardRef(function(n, o) {
   const {
-    family: n,
-    size: a = "normal",
-    weight: _ = "normal",
-    letterSpacing: f = "normal",
+    family: s,
+    size: i = "normal",
+    weight: p = "normal",
+    letterSpacing: u = "normal",
     as: c = "span",
-    centered: p = !1,
+    centered: m = !1,
     truncated: d = !1,
-    typographic: u = !1,
-    uppercase: m = !1,
-    userSelectable: x = !1,
-    underlined: h = !1,
-    children: y,
-    className: T
-  } = t, g = c === "div", b = w(o.root, T, {
-    [o.block]: g,
-    [o.centered]: p,
-    [o.truncated]: d,
-    [o.underlined]: h,
-    [o.typographic]: u,
-    [C.cls.userSelectableText]: x
-  }), v = A({
-    ...t,
-    color: t.color || D,
-    opacity: P(t.opacity)
-  }), k = typeof n == "string" ? n : B[c] || "primary", i = {
-    color: v,
+    typographic: h = !1,
+    uppercase: x = !1,
+    userSelectable: y = !1,
+    underlined: g = !1,
+    children: T,
+    className: b
+  } = n, R = c === "div", S = v(
+    r.root,
+    b,
+    t.getResponsiveClassnames("font-size", i),
+    t.getResponsiveClassnames("line-height", i),
+    {
+      [r.block]: R,
+      [r.centered]: m,
+      [r.truncated]: d,
+      [r.underlined]: g,
+      [r.typographic]: h,
+      [t.cls.userSelectableText]: y
+    }
+  ), C = z({
+    ...n,
+    color: n.color || D,
+    opacity: q(n.opacity)
+  }), k = typeof s == "string" ? s : P[c] || "primary", a = {
+    color: C,
     fontFamily: `var(--font-family-${k})`,
-    fontSize: `var(--font-size-${a})`,
-    lineHeight: `var(--line-height-${a})`,
-    letterSpacing: `var(--letter-spacing-${f})`,
-    fontWeight: `var(--font-weight-${_})`
+    lineHeight: `var(--line-height-${i})`,
+    letterSpacing: `var(--letter-spacing-${u})`,
+    fontWeight: `var(--font-weight-${p})`,
+    ...t.getResponsiveStyles("font-size", i, N),
+    ...t.getResponsiveStyles("line-height", i, $)
   };
-  return m && (i.textTransform = "uppercase"), /* @__PURE__ */ s(c, { ref: e, dir: "auto", className: b, style: i, children: y });
-}), G = l.forwardRef(function(t, e) {
-  return /* @__PURE__ */ s(F, { ref: e, ...t, as: "div" });
+  return x && (a.textTransform = "uppercase"), /* @__PURE__ */ f(c, { ref: o, dir: "auto", className: S, style: a, children: T });
+}), U = l.forwardRef(function(n, o) {
+  return /* @__PURE__ */ f(I, { ref: o, ...n, as: "div" });
 });
 export {
   D as DEFAULT_TEXT_COLOR,
-  z as TEXT_OPACITY_MAP,
-  F as Text,
-  G as TextBlock,
-  P as getTextOpacity
+  B as TEXT_OPACITY_MAP,
+  I as Text,
+  U as TextBlock,
+  q as getTextOpacity,
+  $ as lineHeightResponsiveValueFormatter,
+  N as textSizeResponsiveValueFormatter
 };

package/dist/components/Text/Text.types.d.ts

@@ -1,17 +1,8 @@
+import { ResponsiveValueType, TextSize as RawTextSize } from '../ui';
 import { GetColorProps } from '../../utils/color';
 
-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 type TextSize = RawTextSize;
+export type ResponsiveTextSize = TextSize | string | number;
 export type TextWeight = 'thin' | 'normal' | 'bold' | 'bolder';
 export type TextOpacity = '0' | '25' | '50' | '75' | '100';
 export type TextAs = 'span' | 'div' | 'p' | 'label' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
@@ -30,7 +21,7 @@ interface TextPropsBase {
     userSelectable?: boolean;
     uppercase?: boolean;
     underlined?: boolean;
-    size?: TextSize;
+    size?: ResponsiveValueType<ResponsiveTextSize>;
     weight?: TextWeight;
     letterSpacing?: TextLetterSpacing;
     family?: 'primary' | 'secondary';

package/dist/components/Text/Text.types.js

@@ -1,4 +1 @@
-var a = /* @__PURE__ */ ((l) => (l.xxsmall = "xxsmall", l.xsmall = "xsmall", l.small = "small", l.normal = "normal", l.medium = "medium", l.large = "large", l.xlarge = "xlarge", l.xxlarge = "xxlarge", l.xxxlarge = "xxxlarge", l))(a || {});
-export {
-  a as TextSizeEnum
-};
+

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

@@ -1,2 +1,3 @@
-export { Text, TextBlock, TEXT_OPACITY_MAP, DEFAULT_TEXT_COLOR, getTextOpacity, } from './Text';
-export type { TextSize, TextWeight, TextOpacity, TextAs, TextLetterSpacing, TextProps, TextColorProps, } from './Text.types';
+export { Text, TextBlock, TEXT_OPACITY_MAP, DEFAULT_TEXT_COLOR, getTextOpacity, textSizeResponsiveValueFormatter, } from './Text';
+export { TextSizeEnum } from '../ui';
+export type { TextSize, TextWeight, TextOpacity, TextAs, TextLetterSpacing, TextProps, TextColorProps, ResponsiveTextSize, } from './Text.types';

package/dist/components/Text/index.js

@@ -1,8 +1,11 @@
-import { DEFAULT_TEXT_COLOR as e, TEXT_OPACITY_MAP as x, Text as O, TextBlock as _, getTextOpacity as o } from "./Text.js";
+import { DEFAULT_TEXT_COLOR as T, TEXT_OPACITY_MAP as o, Text as x, TextBlock as r, getTextOpacity as i, textSizeResponsiveValueFormatter as m } from "./Text.js";
+import { TextSizeEnum as E } from "../ui.js";
 export {
-  e as DEFAULT_TEXT_COLOR,
-  x as TEXT_OPACITY_MAP,
-  O as Text,
-  _ as TextBlock,
-  o as getTextOpacity
+  T as DEFAULT_TEXT_COLOR,
+  o as TEXT_OPACITY_MAP,
+  x as Text,
+  r as TextBlock,
+  E as TextSizeEnum,
+  i as getTextOpacity,
+  m as textSizeResponsiveValueFormatter
 };

package/dist/components/Title/TitleShowcase.js

@@ -2,8 +2,9 @@ import { jsx as e, jsxs as t } from "react/jsx-runtime";
 import i from "react";
 import { Flex as r } from "../Layout/Flex/Flex.js";
 import { Text as o } from "../Text/Text.js";
+import "../ui.js";
 import { Title as l } from "./Title.js";
-function a() {
+function m() {
   return /* @__PURE__ */ e(r, { gap: "large", vertical: !0, children: /* @__PURE__ */ t(r, { gap: "normal", vertical: !0, children: [
     /* @__PURE__ */ e(o, { children: "Hover case" }),
     /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(
@@ -16,7 +17,7 @@ function a() {
     ) })
   ] }) });
 }
-const d = i.memo(a);
+const f = i.memo(m);
 export {
-  d as default
+  f as default
 };

package/dist/components/ui.d.ts

@@ -1,5 +1,31 @@
-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",
+    second = "second",
+    max = "max"
+}
+export type ZIndexType = keyof typeof ZIndexEnum;
 export declare enum OffsetEnum {
     none = "none",
     hairthin = "hairthin",
@@ -13,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",
@@ -24,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;
@@ -44,9 +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 borderRadius(size?: 'xsmall' | 'small' | 'normal'): string;
+    export function offset(size: OffsetType): string;
+    export function fontSize(size?: TextSize): string;
+    export function zindex(name?: ZIndexType): 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";
@@ -64,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,64 +1,73 @@
-var z = /* @__PURE__ */ ((t) => (t.none = "none", t.hairthin = "hairthin", t.thin = "thin", t.xxsmall = "xxsmall", t.xsmall = "xsmall", t.small = "small", t.normal = "normal", t.medium = "medium", t.large = "large", t.xlarge = "xlarge", t.safezone = "safezone", t))(z || {}), A = /* @__PURE__ */ ((t) => (t.initial = "initial", t.small = "small", t["small-medium"] = "small-medium", t.medium = "medium", t["medium-large"] = "medium-large", t.large = "large", t.xlarge = "xlarge", t))(A || {}), d;
-((t) => {
-  function i(r = 1) {
-    return `calc(var(--quant) * ${r})`;
+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 s(e = 1) {
+    return `calc(var(--quant) * ${e})`;
   }
-  t.q = i;
-  function m(r) {
-    return `var(--offset-${r})`;
+  r.q = s;
+  function f(e) {
+    return `var(--offset-${e})`;
   }
-  t.offset = m;
-  function u(r = "normal") {
-    return `var(--font-size-${r})`;
+  r.offset = f;
+  function h(e = "normal") {
+    return `var(--font-size-${e})`;
   }
-  t.fontSize = u;
-  function S(r = "normal") {
-    return `var(--border-radius-${r})`;
+  r.fontSize = h;
+  function b(e = "first") {
+    return `var(--zindex-${e})`;
   }
-  t.borderRadius = S;
-  function b(r, l, n = 1) {
-    let e = l;
-    return e === "pure" && (e = ""), typeof e == "number" && (e = `${e}`), `rgba(var(--color-${r}${e ? `-${e}` : ""}), ${n})`;
+  r.zindex = b;
+  function d(e = "normal") {
+    return `var(--line-height-${e})`;
   }
-  t.color = b, ((r) => {
-    r.fullWidth = "util-full-width", r.fullHeight = "util-full-height", r.flexGrow = "util-flex-grow", r.flexNoShrink = "util-flex-no-shrink", r.userSelectableText = "util-text-selectable", r.zIndex9000 = "util-z-index-9000";
-  })(t.cls || (t.cls = {})), t.pc = (r) => `${r}%`, t.px = (r) => `${r}px`, t.ch = (r) => `${r}ch`, t.em = (r) => `${r}em`, t.rem = (r) => `${r}rem`, t.vh = (r) => `${r}vh`, t.vw = (r) => `${r}vw`, t.url = (r) => `url(${r})`, t.getOffsetAttrs = (r, l) => typeof l == "string" || typeof l == "number" ? {
-    [`data-${r}-initial`]: l.toString()
-  } : Object.entries(l).reduce((n, [e, o]) => (n[`data-${r}-${e}`] = o.toString(), n), {}), t.getOffsetStyles = (r, l) => typeof l == "string" ? {
-    [`--${r}-initial`]: m(l)
-  } : typeof l == "number" ? {
-    [`--${r}-initial`]: i(l)
-  } : Object.entries(l).reduce((n, [e, o]) => (n[`--${r}-${e}`] = typeof o == "number" ? i(o) : m(o), n), {});
-  function s(r, l) {
-    const {
-      m: n,
-      mt: e,
-      mr: o,
-      mb: f,
-      ml: g,
-      p: $,
-      pt: p,
-      pr: x,
-      pb: a,
-      pl: h
-    } = r;
-    return {
-      ...n ? l("m", n) : null,
-      ...e ? l("mt", e) : null,
-      ...o ? l("mr", o) : null,
-      ...f ? l("mb", f) : null,
-      ...g ? l("ml", g) : null,
-      ...$ ? l("p", $) : null,
-      ...p ? l("pt", p) : null,
-      ...x ? l("pr", x) : null,
-      ...a ? l("pb", a) : null,
-      ...h ? l("pl", h) : null
+  r.lineHeight = d;
+  function v(e = "normal") {
+    return `var(--border-radius-${e})`;
+  }
+  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)
     };
   }
-  t.callAllMPProps = s, t.getAllMPStyles = (r) => s(r, t.getOffsetStyles), t.getAllMPAttrs = (r) => s(r, t.getOffsetAttrs);
-})(d || (d = {}));
+  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 {
-  A as MediaQueryEnum,
-  z as OffsetEnum,
-  d as ui
+  R as BorderRadiusEnum,
+  P as MediaQueryEnum,
+  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
+};