@orioncactuscorp/ui 1.0.0

package/dist/index.js

@@ -0,0 +1,102 @@
+import { default as t } from "./components/SectionHeader/SectionHeader.js";
+import { default as a } from "./components/Button/Button.js";
+import { default as d, ActionAreaButton as n } from "./components/ActionArea/ActionArea.js";
+import { default as p } from "./components/Badge/Badge.js";
+import { default as u } from "./components/Background/Background.js";
+import { default as m } from "./components/Divider/Divider.js";
+import { default as c } from "./components/Loading/Loading.js";
+import { default as g, CellItem as C } from "./components/Cell/Cell.js";
+import { default as T } from "./components/TextButton/TextButton.js";
+import { default as F } from "./components/IconButton/IconButton.js";
+import { default as S } from "./components/BackgroundIconButton/BackgroundIconButton.js";
+import { default as R } from "./components/Interaction/Interaction.js";
+import { Field as h, FieldControl as v, FieldErrorMessage as H, FieldLabel as L, FieldMessage as b } from "./components/Field/Field.js";
+import { FieldGroup as w, FieldLegend as E, Fieldset as G, FieldsetContent as P } from "./components/Fieldset/Fieldset.js";
+import { default as q } from "./components/Checkbox/Checkbox.js";
+import { default as J } from "./components/CheckMark/CheckMark.js";
+import { default as N } from "./components/Radio/Radio.js";
+import { default as Q } from "./components/Switch/Switch.js";
+import { default as V } from "./components/TextInput/TextInput.js";
+import { default as X } from "./components/TextInput/TextInputContent.js";
+import { default as Z } from "./components/TextArea/TextArea.js";
+import { default as $ } from "./components/TextArea/TextAreaContent.js";
+import { default as eo } from "./components/Select/Select.js";
+import { default as ro } from "./components/Select/SelectContent.js";
+import { MenuContent as lo, MenuItem as no, MenuRoot as fo, MenuSeparator as po, MenuTrigger as io } from "./components/Menu/Menu.js";
+import { default as xo, AlertAction as mo, AlertActionArea as so, AlertContent as co, AlertDescription as Ao, AlertHeading as go, AlertRoot as Co } from "./components/Alert/Alert.js";
+import { default as To, AccordionContent as Bo, AccordionDescription as Fo, AccordionDetails as Io, AccordionItem as So, AccordionSummary as ko } from "./components/Accordion/Accordion.js";
+import { default as Do, ModalBody as ho, ModalClose as vo, ModalContent as Ho, ModalFooter as Lo, ModalHeader as bo, ModalRoot as yo, ModalTrigger as wo } from "./components/Modal/Modal.js";
+import { TooltipContent as Go, TooltipProvider as Po, TooltipRoot as jo, TooltipTrigger as qo } from "./components/Tooltip/Tooltip.js";
+import { ScrollArea as Jo, ScrollAreaContainer as Ko } from "./components/ScrollArea/ScrollArea.js";
+import { getBreakpoint as Oo, getBreakpoints as Qo } from "./utils/breakpoints.js";
+import { SvgIcon as Vo } from "@orioncactuscorp/icons";
+export {
+  To as Accordion,
+  Bo as AccordionContent,
+  Fo as AccordionDescription,
+  Io as AccordionDetails,
+  So as AccordionItem,
+  ko as AccordionSummary,
+  d as ActionArea,
+  n as ActionAreaButton,
+  xo as Alert,
+  mo as AlertAction,
+  so as AlertActionArea,
+  co as AlertContent,
+  Ao as AlertDescription,
+  go as AlertHeading,
+  Co as AlertRoot,
+  u as Background,
+  S as BackgroundIconButton,
+  p as Badge,
+  a as Button,
+  g as Cell,
+  C as CellItem,
+  J as CheckMark,
+  q as Checkbox,
+  m as Divider,
+  h as Field,
+  v as FieldControl,
+  H as FieldErrorMessage,
+  w as FieldGroup,
+  L as FieldLabel,
+  E as FieldLegend,
+  b as FieldMessage,
+  G as Fieldset,
+  P as FieldsetContent,
+  F as IconButton,
+  R as Interaction,
+  c as Loading,
+  lo as MenuContent,
+  no as MenuItem,
+  fo as MenuRoot,
+  po as MenuSeparator,
+  io as MenuTrigger,
+  Do as Modal,
+  ho as ModalBody,
+  vo as ModalClose,
+  Ho as ModalContent,
+  Lo as ModalFooter,
+  bo as ModalHeader,
+  yo as ModalRoot,
+  wo as ModalTrigger,
+  N as Radio,
+  Jo as ScrollArea,
+  Ko as ScrollAreaContainer,
+  t as SectionHeader,
+  eo as Select,
+  ro as SelectContent,
+  Vo as SvgIcon,
+  Q as Switch,
+  Z as TextArea,
+  $ as TextAreaContent,
+  T as TextButton,
+  V as TextInput,
+  X as TextInputContent,
+  Go as TooltipContent,
+  Po as TooltipProvider,
+  jo as TooltipRoot,
+  qo as TooltipTrigger,
+  Oo as getBreakpoint,
+  Qo as getBreakpoints
+};

package/dist/react/motion.d.ts

@@ -0,0 +1,6 @@
+export * from '../ui/src/react/motion/index'
+export {}
+import _default from '../ui/src/react/motion/index'
+export default _default
+export * from '../ui/src/react/motion/index'
+export {}

package/dist/react/motion.js

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

package/dist/react/spring.d.ts

@@ -0,0 +1,2 @@
+export * from '../ui/src/react/spring/index'
+export {}

package/dist/react/spring.js

@@ -0,0 +1,87 @@
+import { useRef as S, useEffect as f, useState as l, useCallback as u } from "react";
+import { createSpringAnimator as d } from "../utils/spring/animator.js";
+const A = (e) => typeof e == "number" ? 0 : Array.isArray(e) ? e.map(() => 0) : Object.keys(e).reduce(
+  (n, t) => (n[t] = 0, n),
+  {}
+), T = ({
+  value: e,
+  target: s,
+  velocity: n
+}) => ({
+  value: e,
+  velocity: n ?? A(e),
+  target: s ?? e,
+  time: 0,
+  settled: !1
+}), g = (e, s) => {
+  const { onUpdate: n, onComplete: t, ...c } = e, [a] = l(() => e.autoplay !== !1), [r] = l(
+    () => d({
+      ...c,
+      autoplay: !1,
+      onUpdate: (m, p) => {
+        s?.(p), n?.(m, p);
+      },
+      onComplete: (m, p) => {
+        t?.(m, p);
+      }
+    })
+  );
+  return f(() => (a && r.start(), () => {
+    r.destroy();
+  }), [r, a]), r;
+}, b = (e) => g(e), V = (e) => {
+  const [s, n] = l(() => T(e)), t = g(e, n), c = u(
+    (i) => {
+      const o = t.sample(i);
+      return n(o), o;
+    },
+    [t]
+  ), a = u(
+    (i, o) => {
+      t.setTarget(i, o), n(t.sample());
+    },
+    [t]
+  ), r = u(
+    (i, o) => {
+      t.setSpring(i, o), n(t.sample());
+    },
+    [t]
+  ), m = u(
+    (i, o) => {
+      t.jumpTo(i, o), n(t.sample());
+    },
+    [t]
+  ), p = u(() => {
+    t.start(), n(t.sample());
+  }, [t]), y = u(() => {
+    t.stop(), n(t.sample());
+  }, [t]);
+  return {
+    ...s,
+    animator: t,
+    isRunning: t.isRunning,
+    setTarget: a,
+    setSpring: r,
+    jumpTo: m,
+    start: p,
+    stop: y,
+    sample: c
+  };
+}, j = (e, s) => {
+  const { targetOptions: n, ...t } = s, c = S(!1), a = V({
+    ...t,
+    target: e
+  }), { setTarget: r } = a;
+  return f(() => {
+    if (!c.current) {
+      c.current = !0;
+      return;
+    }
+    r(e, n);
+  }, [r, e, n]), a;
+};
+export {
+  b as useSpringAnimator,
+  j as useSpringTarget,
+  V as useSpringValue
+};

package/dist/reset.css

@@ -0,0 +1,2 @@
+@layer oc-reset{*,*::before,*::after{box-sizing:border-box}html{-moz-text-size-adjust:none;-webkit-text-size-adjust:none;text-size-adjust:none}body{min-height:100dvh}body,h1,h2,h3,h4,h5,h6,p,ul,figure,blockquote,dl,dd,input{margin:0}h1,h2,h3,h4,h5,h6,input,button,textarea,select,label{font:inherit}h1,h2,h3,h4,h5,h6{text-wrap:balance}ul,ol{list-style:none;padding:0}a:not([class]){text-decoration-skip-ink:auto;color:currentColor}a:visited{color:currentColor}img,picture{max-width:100%;display:block;object-fit:cover}textarea:not([rows]){min-height:10em}:target{scroll-margin-block:5ex}svg{fill:currentColor;stroke:rgba(0,0,0,0)}textarea,button{padding:0;appearance:none}button:focus-visible{outline:none}textarea,input[type=text]{color:currentColor;background-color:rgba(0,0,0,0)}input:not(input:-webkit-autofill)::-webkit-contacts-auto-fill-button{background-color:currentColor}iframe,textarea,button{border:none}
+}