@orioncactuscorp/ui 1.6.0 → 1.7.0

package/dist/index.js

@@ -4,40 +4,41 @@ import { default as n, ActionAreaButton as d } from "./components/ActionArea/Act
 import { default as i, ActionAreaLayoutActionArea as u, ActionAreaLayoutBody as p, ActionAreaLayoutFooter as c, ActionAreaLayout as x } from "./components/ActionArea/ActionAreaLayout.js";
 import { default as s } from "./components/Badge/Badge.js";
 import { default as g } from "./components/Background/Background.js";
-import { default as M } from "./components/Divider/Divider.js";
+import { default as C } from "./components/Divider/Divider.js";
 import { default as T } from "./components/Loading/Loading.js";
-import { default as y, CellItem as I } from "./components/Cell/Cell.js";
-import { default as S } from "./components/TextButton/TextButton.js";
-import { default as R } from "./components/IconButton/IconButton.js";
-import { default as h } from "./components/BackgroundIconButton/BackgroundIconButton.js";
-import { default as H } from "./components/Interaction/Interaction.js";
-import { Field as w, FieldControl as E, FieldErrorMessage as G, FieldLabel as P, FieldMessage as j } from "./components/Field/Field.js";
-import { FieldGroup as z, FieldLegend as J, Fieldset as K, FieldsetContent as N } from "./components/Fieldset/Fieldset.js";
-import { default as Q } from "./components/Checkbox/Checkbox.js";
-import { default as V } from "./components/CheckMark/CheckMark.js";
-import { default as X } from "./components/Radio/Radio.js";
-import { default as Z } from "./components/Switch/Switch.js";
-import { default as $ } from "./components/TextInput/TextInput.js";
-import { default as eo } from "./components/TextInput/TextInputContent.js";
-import { default as ro } from "./components/TextArea/TextArea.js";
-import { default as lo } from "./components/TextArea/TextAreaContent.js";
-import { default as fo } from "./components/Select/Select.js";
-import { default as uo } from "./components/Select/SelectContent.js";
-import { MenuContent as co, MenuItem as xo, MenuRoot as mo, MenuSeparator as so, MenuTrigger as Ao } from "./components/Menu/Menu.js";
-import { default as Co, AlertAction as Mo, AlertActionArea as Bo, AlertContent as To, AlertDescription as Fo, AlertHeading as yo, AlertRoot as Io } from "./components/Alert/Alert.js";
-import { default as So, AccordionContent as ko, AccordionDescription as Ro, AccordionDetails as Do, AccordionItem as ho, AccordionSummary as vo } from "./components/Accordion/Accordion.js";
-import { default as bo, ModalBody as wo, ModalClose as Eo, ModalContent as Go, ModalFooter as Po, ModalHeader as jo, ModalRoot as qo, ModalTrigger as zo } from "./components/Modal/Modal.js";
-import { TooltipContent as Ko, TooltipProvider as No, TooltipRoot as Oo, TooltipTrigger as Qo } from "./components/Tooltip/Tooltip.js";
-import { ScrollArea as Vo, ScrollAreaContainer as Wo } from "./components/ScrollArea/ScrollArea.js";
-import { getBreakpoint as Yo, getBreakpoints as Zo } from "./utils/breakpoints.js";
-import { SvgIcon as $o } from "@orioncactuscorp/icons";
+import { default as S } from "./components/Skeleton/Skeleton.js";
+import { default as I, CellItem as L } from "./components/Cell/Cell.js";
+import { default as R } from "./components/TextButton/TextButton.js";
+import { default as D } from "./components/IconButton/IconButton.js";
+import { default as H } from "./components/BackgroundIconButton/BackgroundIconButton.js";
+import { default as w } from "./components/Interaction/Interaction.js";
+import { Field as G, FieldControl as N, FieldErrorMessage as P, FieldLabel as j, FieldMessage as q } from "./components/Field/Field.js";
+import { FieldGroup as J, FieldLegend as K, Fieldset as O, FieldsetContent as Q } from "./components/Fieldset/Fieldset.js";
+import { default as V } from "./components/Checkbox/Checkbox.js";
+import { default as X } from "./components/CheckMark/CheckMark.js";
+import { default as Z } from "./components/Radio/Radio.js";
+import { default as $ } from "./components/Switch/Switch.js";
+import { default as eo } from "./components/TextInput/TextInput.js";
+import { default as ro } from "./components/TextInput/TextInputContent.js";
+import { default as lo } from "./components/TextArea/TextArea.js";
+import { default as fo } from "./components/TextArea/TextAreaContent.js";
+import { default as uo } from "./components/Select/Select.js";
+import { default as co } from "./components/Select/SelectContent.js";
+import { MenuContent as mo, MenuItem as so, MenuRoot as Ao, MenuSeparator as go, MenuTrigger as Mo } from "./components/Menu/Menu.js";
+import { default as Bo, AlertAction as To, AlertActionArea as Fo, AlertContent as So, AlertDescription as yo, AlertHeading as Io, AlertRoot as Lo } from "./components/Alert/Alert.js";
+import { default as Ro, AccordionContent as vo, AccordionDescription as Do, AccordionDetails as ho, AccordionItem as Ho, AccordionSummary as bo } from "./components/Accordion/Accordion.js";
+import { default as Eo, ModalBody as Go, ModalClose as No, ModalContent as Po, ModalFooter as jo, ModalHeader as qo, ModalNavigationSection as zo, ModalRoot as Jo, ModalTrigger as Ko } from "./components/Modal/Modal.js";
+import { TooltipContent as Qo, TooltipProvider as Uo, TooltipRoot as Vo, TooltipTrigger as Wo } from "./components/Tooltip/Tooltip.js";
+import { ScrollArea as Yo, ScrollAreaContainer as Zo } from "./components/ScrollArea/ScrollArea.js";
+import { getBreakpoint as $o, getBreakpoints as oe } from "./utils/breakpoints.js";
+import { SvgIcon as te } from "@orioncactuscorp/icons";
 export {
-  So as Accordion,
-  ko as AccordionContent,
-  Ro as AccordionDescription,
-  Do as AccordionDetails,
-  ho as AccordionItem,
-  vo as AccordionSummary,
+  Ro as Accordion,
+  vo as AccordionContent,
+  Do as AccordionDescription,
+  ho as AccordionDetails,
+  Ho as AccordionItem,
+  bo as AccordionSummary,
   n as ActionArea,
   d as ActionAreaButton,
   i as ActionAreaLayout,
@@ -45,64 +46,66 @@ export {
   p as ActionAreaLayoutBody,
   c as ActionAreaLayoutFooter,
   x as ActionAreaLayoutRoot,
-  Co as Alert,
-  Mo as AlertAction,
-  Bo as AlertActionArea,
-  To as AlertContent,
-  Fo as AlertDescription,
-  yo as AlertHeading,
-  Io as AlertRoot,
+  Bo as Alert,
+  To as AlertAction,
+  Fo as AlertActionArea,
+  So as AlertContent,
+  yo as AlertDescription,
+  Io as AlertHeading,
+  Lo as AlertRoot,
   g as Background,
-  h as BackgroundIconButton,
+  H as BackgroundIconButton,
   s as Badge,
   a as Button,
-  y as Cell,
-  I as CellItem,
-  V as CheckMark,
-  Q as Checkbox,
-  M as Divider,
-  w as Field,
-  E as FieldControl,
-  G as FieldErrorMessage,
-  z as FieldGroup,
-  P as FieldLabel,
-  J as FieldLegend,
-  j as FieldMessage,
-  K as Fieldset,
-  N as FieldsetContent,
-  R as IconButton,
-  H as Interaction,
+  I as Cell,
+  L as CellItem,
+  X as CheckMark,
+  V as Checkbox,
+  C as Divider,
+  G as Field,
+  N as FieldControl,
+  P as FieldErrorMessage,
+  J as FieldGroup,
+  j as FieldLabel,
+  K as FieldLegend,
+  q as FieldMessage,
+  O as Fieldset,
+  Q as FieldsetContent,
+  D as IconButton,
+  w as Interaction,
   T as Loading,
-  co as MenuContent,
-  xo as MenuItem,
-  mo as MenuRoot,
-  so as MenuSeparator,
-  Ao as MenuTrigger,
-  bo as Modal,
-  wo as ModalBody,
-  Eo as ModalClose,
-  Go as ModalContent,
-  Po as ModalFooter,
-  jo as ModalHeader,
-  qo as ModalRoot,
-  zo as ModalTrigger,
-  X as Radio,
-  Vo as ScrollArea,
-  Wo as ScrollAreaContainer,
+  mo as MenuContent,
+  so as MenuItem,
+  Ao as MenuRoot,
+  go as MenuSeparator,
+  Mo as MenuTrigger,
+  Eo as Modal,
+  Go as ModalBody,
+  No as ModalClose,
+  Po as ModalContent,
+  jo as ModalFooter,
+  qo as ModalHeader,
+  zo as ModalNavigationSection,
+  Jo as ModalRoot,
+  Ko as ModalTrigger,
+  Z as Radio,
+  Yo as ScrollArea,
+  Zo as ScrollAreaContainer,
   t as SectionHeader,
-  fo as Select,
-  uo as SelectContent,
-  $o as SvgIcon,
-  Z as Switch,
-  ro as TextArea,
-  lo as TextAreaContent,
-  S as TextButton,
-  $ as TextInput,
-  eo as TextInputContent,
-  Ko as TooltipContent,
-  No as TooltipProvider,
-  Oo as TooltipRoot,
-  Qo as TooltipTrigger,
-  Yo as getBreakpoint,
-  Zo as getBreakpoints
+  uo as Select,
+  co as SelectContent,
+  S as Skeleton,
+  te as SvgIcon,
+  $ as Switch,
+  lo as TextArea,
+  fo as TextAreaContent,
+  R as TextButton,
+  eo as TextInput,
+  ro as TextInputContent,
+  Qo as TooltipContent,
+  Uo as TooltipProvider,
+  Vo as TooltipRoot,
+  Wo as TooltipTrigger,
+  $o as getBreakpoint,
+  oe as getBreakpoints
 };

package/dist/react/motion.js

@@ -1,19 +1,19 @@
 'use client';
 import { jsx as H } from "react/jsx-runtime";
-import { useRef as s, useState as C, useCallback as j, useEffect as y, useLayoutEffect as ct } from "react";
-import { createSpringAnimator as st } from "../utils/spring/animator.js";
-import { resolveOcMotion as it } from "../utils/motion.js";
-const T = "block-size";
-function at(t, n) {
+import { useRef as i, useState as C, useCallback as q, useEffect as y, useLayoutEffect as st } from "react";
+import { createSpringAnimator as at } from "../utils/spring/animator.js";
+import { resolveOcMotion as ut } from "../utils/motion.js";
+const V = "block-size";
+function lt(t, n) {
   typeof t == "function" ? t(n) : t && (t.current = n);
 }
-function q(t) {
-  const n = s(t);
+function A(t) {
+  const n = i(t);
   return y(() => {
     n.current = t;
   }, [t]), n;
 }
-function ut() {
+function dt() {
   const [t, n] = C(() => typeof window > "u" || !window.matchMedia ? !1 : window.matchMedia("(prefers-reduced-motion: reduce)").matches);
   return y(() => {
     if (typeof window > "u" || !window.matchMedia) return;
@@ -21,27 +21,30 @@ function ut() {
     return c(), r.addEventListener("change", c), () => r.removeEventListener("change", c);
   }, []), t;
 }
-function lt(t) {
+function ft(t) {
   if (!t) return 0;
   const n = t.getBoundingClientRect().height;
   return Math.max(0, n || t.scrollHeight);
 }
-function dt(t) {
+function U(t) {
   return t ? Math.max(0, t.getBoundingClientRect().height) : 0;
 }
-function V(t) {
+function mt(t, n) {
+  return n === "rendered" ? U(t) : ft(t);
+}
+function j(t) {
   return `${Math.max(0, t).toFixed(3)}px`;
 }
-function ft(t, n) {
-  const r = q(n), [c, d] = C(t), u = s(t), f = j(
-    (i) => {
-      u.current !== i && (u.current = i, d(i), r.current?.(i));
+function ht(t, n) {
+  const r = A(n), [c, d] = C(t), u = i(t), f = q(
+    (s) => {
+      u.current !== s && (u.current = s, d(s), r.current?.(s));
     },
     [r]
   );
   return { motionState: c, setMotionState: f };
 }
-function St({
+function Mt({
   children: t,
   className: n = "",
   contentProps: r,
@@ -49,35 +52,36 @@ function St({
   durationFactor: d = 1,
   extraBounce: u,
   enterPhase: f = "enter",
-  exitPhase: i = "exit",
+  exitPhase: s = "exit",
   forceMount: l = !1,
   intent: R = "expand",
-  onExitComplete: A,
-  onMotionStateChange: U,
+  measureBlockSize: z = "content",
+  onExitComplete: W,
+  onMotionStateChange: Y,
   open: o,
-  pace: z = "normal",
-  reduced: b = "auto",
-  ref: W,
-  scheduler: x,
-  style: Y,
-  "data-oc-component": _ = "motion-expand",
-  ...$
+  pace: b = "normal",
+  reduced: x = "auto",
+  ref: _,
+  scheduler: L,
+  style: $,
+  "data-oc-component": D = "motion-expand",
+  ...F
 }) {
-  const L = s(null), E = s(null), a = s(null), D = s(o || l), B = s(!1), g = ut(), [m, F] = C(() => o || l), S = s(m), I = q(A), { motionState: G, setMotionState: h } = ft(
+  const E = i(null), B = i(null), a = i(null), G = i(o || l), I = i(!1), g = dt(), [m, J] = C(() => o || l), S = i(m), O = A(W), { motionState: K, setMotionState: h } = ht(
     o ? "open" : "closed",
-    U
+    Y
   ), {
-    className: J = "",
-    style: K,
-    "data-oc-part": Q = "content",
-    ...X
-  } = r ?? {}, w = o || m || l, Z = {
-    ...Y,
+    className: Q = "",
+    style: X,
+    "data-oc-part": Z = "content",
+    ...tt
+  } = r ?? {}, w = o || m || l, et = {
+    ...$,
     overflow: "hidden"
-  }, p = j((e) => {
-    S.current = e, F(e);
-  }, []), tt = (e) => {
-    L.current = e, at(W, e);
+  }, p = q((e) => {
+    S.current = e, J(e);
+  }, []), nt = (e) => {
+    E.current = e, lt(_, e);
   };
   return y(() => {
     S.current = m;
@@ -86,45 +90,45 @@ function St({
       a.current?.destroy(), a.current = null;
     },
     []
-  ), ct(() => {
+  ), st(() => {
     if (!w) return;
-    const e = L.current, O = E.current;
-    if (!e || !O) return;
-    const et = S.current, P = o ? lt(O) : 0, N = it({
+    const e = E.current, P = B.current;
+    if (!e || !P) return;
+    const ot = S.current, N = o ? mt(P, z) : 0, T = ut({
       element: e,
       intent: R,
-      phase: o ? f : i,
-      pace: z,
+      phase: o ? f : s,
+      pace: b,
       durationFactor: d,
       extraBounce: u,
-      reduced: b,
+      reduced: x,
       reducedMotion: g,
-      property: T
-    }), nt = !B.current && D.current, ot = !c && !nt && N.animate, M = () => {
+      property: V
+    }), rt = !I.current && G.current, ct = !c && !rt && T.animate, M = () => {
       if (e.style.willChange = "", o) {
         e.style.blockSize = "auto", h("open"), p(!0);
         return;
       }
-      e.style.blockSize = "0px", h("closed"), l || p(!1), I.current?.();
+      e.style.blockSize = "0px", h("closed"), l || p(!1), O.current?.();
     };
-    if (a.current?.destroy(), a.current = null, o && !et && (e.style.blockSize = "0px", p(!0)), B.current = !0, !ot) {
+    if (a.current?.destroy(), a.current = null, o && !ot && (e.style.blockSize = "0px", p(!0)), I.current = !0, !ct) {
       M();
       return;
     }
-    const v = dt(e);
-    if (Math.abs(v - P) < 0.5) {
+    const v = U(e);
+    if (Math.abs(v - N) < 0.5) {
       M();
       return;
     }
-    e.style.blockSize = V(v), e.style.willChange = T, h(o ? "opening" : "closing");
-    const k = st({
+    e.style.blockSize = j(v), e.style.willChange = V, h(o ? "opening" : "closing");
+    const k = at({
       value: v,
-      target: P,
-      spring: N.spring,
-      scheduler: x,
+      target: N,
+      spring: T.spring,
+      scheduler: L,
       stabilityWindow: 0.02,
-      onUpdate: (rt) => {
-        e.style.blockSize = V(rt);
+      onUpdate: (it) => {
+        e.style.blockSize = j(it);
       },
       onComplete: M
     });
@@ -136,38 +140,39 @@ function St({
     d,
     u,
     f,
-    i,
+    s,
     l,
     R,
-    I,
-    o,
     z,
+    O,
+    o,
     b,
-    g,
     x,
+    g,
+    L,
     p,
     h,
     w
   ]), w ? /* @__PURE__ */ H(
     "div",
     {
-      ...$,
-      ref: tt,
+      ...F,
+      ref: nt,
       className: n,
-      style: Z,
-      "data-oc-component": _,
+      style: et,
+      "data-oc-component": D,
       "data-oc-motion-intent": R,
-      "data-oc-motion-state": G,
+      "data-oc-motion-state": K,
       "data-oc-reduced-motion": g ? "true" : void 0,
       "data-oc-state": o ? "open" : "closed",
       children: /* @__PURE__ */ H(
         "div",
         {
-          ...X,
-          ref: E,
-          className: J,
-          style: K,
-          "data-oc-part": Q,
+          ...tt,
+          ref: B,
+          className: Q,
+          style: X,
+          "data-oc-part": Z,
           children: t
         }
       )
@@ -175,6 +180,6 @@ function St({
   ) : null;
 }
 export {
-  St as MotionExpand,
-  St as default
+  Mt as MotionExpand,
+  Mt as default
 };