@als-tp/als-react-ts-ui 0.4.0 → 0.5.1

package/dist/als-react-ts-ui250.js

@@ -1,97 +1,83 @@
-import * as p from "react";
-import { useStableCallback as x } from "./als-react-ts-ui160.js";
-import { useControlled as L } from "./als-react-ts-ui159.js";
-import { useIsoLayoutEffect as k } from "./als-react-ts-ui161.js";
-import { useFieldRootContext as b } from "./als-react-ts-ui254.js";
-import { useLabelableContext as B } from "./als-react-ts-ui255.js";
-import { useLabelableId as S } from "./als-react-ts-ui256.js";
-import { fieldValidityMapping as U } from "./als-react-ts-ui269.js";
-import { useRenderElement as A } from "./als-react-ts-ui166.js";
-import { useField as K } from "./als-react-ts-ui259.js";
-import { createChangeEventDetails as O } from "./als-react-ts-ui167.js";
-import { none as _ } from "./als-react-ts-ui168.js";
-const j = /* @__PURE__ */ p.forwardRef(function(n, C) {
+import * as r from "react";
+import { usePreviewCardRootContext as A } from "./als-react-ts-ui528.js";
+import { PreviewCardPositionerContext as E } from "./als-react-ts-ui532.js";
+import { useAnchorPositioning as N } from "./als-react-ts-ui391.js";
+import { popupStateMapping as b } from "./als-react-ts-ui227.js";
+import { usePreviewCardPortalContext as U } from "./als-react-ts-ui531.js";
+import { POPUP_COLLISION_AVOIDANCE as k } from "./als-react-ts-ui243.js";
+import { useRenderElement as H } from "./als-react-ts-ui226.js";
+import { jsx as I } from "react/jsx-runtime";
+const V = /* @__PURE__ */ r.forwardRef(function(i, s) {
   const {
-    render: z,
-    className: G,
-    id: g,
-    name: v,
-    value: o,
-    disabled: R = !1,
-    onValueChange: V,
-    defaultValue: i,
-    ...F
-  } = n, {
-    state: s,
-    name: y,
-    disabled: E
-  } = b(), l = E || R, u = y ?? v, N = p.useMemo(() => ({
-    ...s,
-    disabled: l
-  }), [s, l]), {
-    setTouched: d,
-    setDirty: P,
-    validityData: T,
-    setFocused: m,
-    setFilled: r,
-    validationMode: h,
-    validation: t
-  } = b(), {
-    labelId: D
-  } = B(), f = S({
-    id: g
-  });
-  k(() => {
-    const e = o != null;
-    t.inputRef.current?.value || e && o !== "" ? r(!0) : e && o === "" && r(!1);
-  }, [t.inputRef, r, o]);
-  const [c, I] = L({
-    controlled: o,
-    default: i,
-    name: "FieldControl",
-    state: "value"
-  }), M = o !== void 0, w = x((e, a) => {
-    V?.(e, a), !a.isCanceled && I(e);
-  });
-  return K({
-    id: f,
-    name: u,
-    commit: t.commit,
-    value: c,
-    getValue: () => t.inputRef.current?.value,
-    controlRef: t.inputRef
-  }), A("input", n, {
-    ref: C,
-    state: N,
-    props: [{
-      id: f,
-      disabled: l,
-      name: u,
-      ref: t.inputRef,
-      "aria-labelledby": D,
-      ...M ? {
-        value: c
-      } : {
-        defaultValue: i
-      },
-      onChange(e) {
-        const a = e.currentTarget.value;
-        w(a, O(_, e.nativeEvent)), P(a !== T.initialValue), r(a !== "");
-      },
-      onFocus() {
-        m(!0);
-      },
-      onBlur(e) {
-        d(!0), m(!1), h === "onBlur" && t.commit(e.currentTarget.value);
-      },
-      onKeyDown(e) {
-        e.currentTarget.tagName === "INPUT" && e.key === "Enter" && (d(!0), t.commit(e.currentTarget.value));
+    render: D,
+    className: L,
+    anchor: a,
+    positionMethod: d = "absolute",
+    side: l = "bottom",
+    align: c = "center",
+    sideOffset: p = 0,
+    alignOffset: m = 0,
+    collisionBoundary: f = "clipping-ancestors",
+    collisionPadding: u = 5,
+    arrowPadding: P = 5,
+    sticky: g = !1,
+    disableAnchorTracking: w = !1,
+    collisionAvoidance: v = k,
+    ...C
+  } = i, {
+    open: o,
+    mounted: t,
+    floatingRootContext: h,
+    setPositionerElement: y
+  } = A(), R = U(), e = N({
+    anchor: a,
+    floatingRootContext: h,
+    positionMethod: d,
+    mounted: t,
+    side: l,
+    sideOffset: p,
+    align: c,
+    alignOffset: m,
+    arrowPadding: P,
+    collisionBoundary: f,
+    collisionPadding: u,
+    sticky: g,
+    disableAnchorTracking: w,
+    keepMounted: R,
+    collisionAvoidance: v
+  }), S = r.useMemo(() => {
+    const n = {};
+    return o || (n.pointerEvents = "none"), {
+      role: "presentation",
+      hidden: !t,
+      style: {
+        ...e.positionerStyles,
+        ...n
       }
-    }, t.getInputValidationProps(), F],
-    stateAttributesMapping: U
+    };
+  }, [o, t, e.positionerStyles]), x = r.useMemo(() => ({
+    open: o,
+    side: e.side,
+    align: e.align,
+    anchorHidden: e.anchorHidden
+  }), [o, e.side, e.align, e.anchorHidden]), M = r.useMemo(() => ({
+    side: e.side,
+    align: e.align,
+    arrowRef: e.arrowRef,
+    arrowUncentered: e.arrowUncentered,
+    arrowStyles: e.arrowStyles
+  }), [e.side, e.align, e.arrowRef, e.arrowUncentered, e.arrowStyles]), O = H("div", i, {
+    state: x,
+    ref: [y, s],
+    props: [S, C],
+    stateAttributesMapping: b
+  });
+  return /* @__PURE__ */ I(E.Provider, {
+    value: M,
+    children: O
   });
 });
-process.env.NODE_ENV !== "production" && (j.displayName = "FieldControl");
+process.env.NODE_ENV !== "production" && (V.displayName = "PreviewCardPositioner");
 export {
-  j as FieldControl
+  V as PreviewCardPositioner
 };

package/dist/als-react-ts-ui251.js

@@ -1,16 +1,50 @@
-const i = {
-  clip: "rect(0 0 0 0)",
-  overflow: "hidden",
-  whiteSpace: "nowrap",
-  position: "fixed",
-  top: 0,
-  left: 0,
-  border: 0,
-  padding: 0,
-  width: 1,
-  height: 1,
-  margin: -1
-};
+import * as i from "react";
+import { usePreviewCardRootContext as d } from "./als-react-ts-ui528.js";
+import { usePreviewCardPositionerContext as l } from "./als-react-ts-ui532.js";
+import { popupStateMapping as C } from "./als-react-ts-ui227.js";
+import { transitionStatusMapping as c } from "./als-react-ts-ui228.js";
+import { useOpenChangeComplete as P } from "./als-react-ts-ui236.js";
+import { useRenderElement as g } from "./als-react-ts-ui226.js";
+import { getDisabledMountTransitionStyles as v } from "./als-react-ts-ui393.js";
+const w = {
+  ...C,
+  ...c
+}, M = /* @__PURE__ */ i.forwardRef(function(o, s) {
+  const {
+    className: N,
+    render: S,
+    ...a
+  } = o, {
+    open: e,
+    transitionStatus: t,
+    popupRef: r,
+    onOpenChangeComplete: m,
+    popupProps: u
+  } = d(), {
+    side: p,
+    align: n
+  } = l();
+  P({
+    open: e,
+    ref: r,
+    onComplete() {
+      e && m?.(!0);
+    }
+  });
+  const f = i.useMemo(() => ({
+    open: e,
+    side: p,
+    align: n,
+    transitionStatus: t
+  }), [e, p, n, t]);
+  return g("div", o, {
+    ref: [r, s],
+    state: f,
+    props: [u, v(t), a],
+    stateAttributesMapping: w
+  });
+});
+process.env.NODE_ENV !== "production" && (M.displayName = "PreviewCardPopup");
 export {
-  i as visuallyHidden
+  M as PreviewCardPopup
 };

package/dist/als-react-ts-ui252.js

@@ -1,8 +1,38 @@
-import * as t from "react";
-function n(r) {
-  const e = t.useRef(!0);
-  e.current && (e.current = !1, r());
-}
+import * as i from "react";
+import { usePreviewCardPositionerContext as c } from "./als-react-ts-ui532.js";
+import { usePreviewCardRootContext as w } from "./als-react-ts-ui528.js";
+import { popupStateMapping as f } from "./als-react-ts-ui227.js";
+import { useRenderElement as u } from "./als-react-ts-ui226.js";
+const l = /* @__PURE__ */ i.forwardRef(function(e, s) {
+  const {
+    render: C,
+    className: P,
+    ...a
+  } = e, {
+    open: r
+  } = w(), {
+    arrowRef: p,
+    side: t,
+    align: o,
+    arrowUncentered: n,
+    arrowStyles: d
+  } = c(), m = i.useMemo(() => ({
+    open: r,
+    side: t,
+    align: o,
+    uncentered: n
+  }), [r, t, o, n]);
+  return u("div", e, {
+    state: m,
+    ref: [p, s],
+    props: [{
+      style: d,
+      "aria-hidden": !0
+    }, a],
+    stateAttributesMapping: f
+  });
+});
+process.env.NODE_ENV !== "production" && (l.displayName = "PreviewCardArrow");
 export {
-  n as useOnFirstRender
+  l as PreviewCardArrow
 };

package/dist/als-react-ts-ui253.js

@@ -1,24 +1,24 @@
-import o from "./als-react-ts-ui197.js";
-import * as e from "react";
-const n = /* @__PURE__ */ e.createContext(null);
-process.env.NODE_ENV !== "production" && (n.displayName = "SelectRootContext");
-const c = /* @__PURE__ */ e.createContext(null);
-process.env.NODE_ENV !== "production" && (c.displayName = "SelectFloatingContext");
-function s() {
-  const t = e.useContext(n);
-  if (t === null)
-    throw new Error(process.env.NODE_ENV !== "production" ? "Base UI: SelectRootContext is missing. Select parts must be placed within <Select.Root>." : o(60));
-  return t;
-}
-function i() {
-  const t = e.useContext(c);
-  if (t === null)
-    throw new Error(process.env.NODE_ENV !== "production" ? "Base UI: SelectFloatingContext is missing. Select parts must be placed within <Select.Root>." : o(61));
-  return t;
-}
+import * as n from "react";
+import { usePreviewCardRootContext as d } from "./als-react-ts-ui528.js";
+import { PreviewCardPortalContext as l } from "./als-react-ts-ui531.js";
+import { FloatingPortalLite as s } from "./als-react-ts-ui432.js";
+import { jsx as o } from "react/jsx-runtime";
+const f = /* @__PURE__ */ n.forwardRef(function(e, t) {
+  const {
+    keepMounted: r = !1,
+    ...a
+  } = e, {
+    mounted: i
+  } = d();
+  return i || r ? /* @__PURE__ */ o(l.Provider, {
+    value: r,
+    children: /* @__PURE__ */ o(s, {
+      ref: t,
+      ...a
+    })
+  }) : null;
+});
+process.env.NODE_ENV !== "production" && (f.displayName = "PreviewCardPortal");
 export {
-  c as SelectFloatingContext,
-  n as SelectRootContext,
-  i as useSelectFloatingContext,
-  s as useSelectRootContext
+  f as PreviewCardPortal
 };

package/dist/als-react-ts-ui254.js

@@ -1,60 +1,100 @@
-import s from "./als-react-ts-ui197.js";
-import * as a from "react";
-import { DEFAULT_VALIDITY_STATE as d } from "./als-react-ts-ui269.js";
-import { NOOP as e, EMPTY_OBJECT as o } from "./als-react-ts-ui212.js";
-const l = /* @__PURE__ */ a.createContext({
-  invalid: void 0,
-  name: void 0,
-  validityData: {
-    state: d,
-    errors: [],
-    error: "",
-    value: "",
-    initialValue: null
-  },
-  setValidityData: e,
-  disabled: void 0,
-  touched: !1,
-  setTouched: e,
-  dirty: !1,
-  setDirty: e,
-  filled: !1,
-  setFilled: e,
-  focused: !1,
-  setFocused: e,
-  validate: () => null,
-  validationMode: "onSubmit",
-  validationDebounceTime: 0,
-  shouldValidateOnChange: () => !1,
-  state: {
-    disabled: !1,
-    valid: null,
-    touched: !1,
-    dirty: !1,
-    filled: !1,
-    focused: !1
-  },
-  markedDirtyRef: {
-    current: !1
-  },
-  validation: {
-    getValidationProps: (t = o) => t,
-    getInputValidationProps: (t = o) => t,
-    inputRef: {
-      current: null
-    },
-    commit: async () => {
+import * as e from "react";
+import * as q from "react-dom";
+import { useControlled as z } from "./als-react-ts-ui265.js";
+import { useStableCallback as r } from "./als-react-ts-ui266.js";
+import { PreviewCardRootContext as B } from "./als-react-ts-ui528.js";
+import { OPEN_DELAY as x, CLOSE_DELAY as D } from "./als-react-ts-ui529.js";
+import { useFocusWithDelay as G } from "./als-react-ts-ui530.js";
+import { useOpenChangeComplete as J } from "./als-react-ts-ui236.js";
+import { useTransitionStatus as Q } from "./als-react-ts-ui342.js";
+import { jsx as X } from "react/jsx-runtime";
+import { useFloatingRootContext as Z } from "./als-react-ts-ui372.js";
+import { useHover as $ } from "./als-react-ts-ui378.js";
+import { safePolygon as ee } from "./als-react-ts-ui383.js";
+import { useDismiss as oe } from "./als-react-ts-ui311.js";
+import { useInteractions as te } from "./als-react-ts-ui246.js";
+import { triggerHover as F, triggerFocus as ne, triggerPress as se, escapeKey as re } from "./als-react-ts-ui231.js";
+function Pe(u) {
+  const {
+    open: T,
+    defaultOpen: H,
+    onOpenChange: M,
+    onOpenChangeComplete: a,
+    actionsRef: p
+  } = u, f = e.useRef(x), g = e.useRef(D), d = r((o) => {
+    f.current = o.delay ?? x, g.current = o.closeDelay ?? D;
+  }), [b, I] = e.useState(null), [i, L] = e.useState(null), [V, C] = e.useState(), y = e.useRef(null), [n, A] = z({
+    controlled: T,
+    default: H,
+    name: "PreviewCard",
+    state: "open"
+  }), U = r(M), {
+    mounted: R,
+    setMounted: l,
+    transitionStatus: h
+  } = Q(n), c = r(() => {
+    l(!1), a?.(!1);
+  });
+  J({
+    enabled: !p,
+    open: n,
+    ref: y,
+    onComplete() {
+      n || c();
+    }
+  }), e.useImperativeHandle(p, () => ({
+    unmount: c
+  }), [c]);
+  const m = r((o, t) => {
+    const N = t.reason === F, v = o && t.reason === ne, W = !o && (t.reason === se || t.reason === re);
+    if (U(o, t), t.isCanceled)
+      return;
+    function w() {
+      A(o);
     }
-  }
-});
-process.env.NODE_ENV !== "production" && (l.displayName = "FieldRootContext");
-function f(t = !0) {
-  const i = a.useContext(l);
-  if (i.setValidityData === e && !t)
-    throw new Error(process.env.NODE_ENV !== "production" ? "Base UI: FieldRootContext is missing. Field parts must be placed within <Field.Root>." : s(28));
-  return i;
+    N ? q.flushSync(w) : w(), v || W ? C(v ? "focus" : "dismiss") : t.reason === F && C(void 0);
+  }), s = Z({
+    elements: {
+      reference: b,
+      floating: i
+    },
+    open: n,
+    onOpenChange: m
+  }), P = V, O = () => f.current, Y = () => g.current, _ = $(s, {
+    mouseOnly: !0,
+    move: !1,
+    handleClose: ee(),
+    restMs: O,
+    delay: () => ({
+      close: Y()
+    })
+  }), j = G(s, {
+    delay: O
+  }), k = oe(s), {
+    getReferenceProps: S,
+    getFloatingProps: E
+  } = te([_, j, k]), K = e.useMemo(() => ({
+    open: n,
+    setOpen: m,
+    mounted: R,
+    setMounted: l,
+    setTriggerElement: I,
+    positionerElement: i,
+    setPositionerElement: L,
+    popupRef: y,
+    triggerProps: S(),
+    popupProps: E(),
+    floatingRootContext: s,
+    instantType: P,
+    transitionStatus: h,
+    onOpenChangeComplete: a,
+    writeDelayRefs: d
+  }), [n, m, R, l, i, S, E, s, P, h, a, d]);
+  return /* @__PURE__ */ X(B.Provider, {
+    value: K,
+    children: u.children
+  });
 }
 export {
-  l as FieldRootContext,
-  f as useFieldRootContext
+  Pe as PreviewCardRoot
 };

package/dist/als-react-ts-ui255.js

@@ -1,19 +1,24 @@
-import * as t from "react";
-import { NOOP as e } from "./als-react-ts-ui212.js";
-const o = /* @__PURE__ */ t.createContext({
-  controlId: void 0,
-  setControlId: e,
-  labelId: void 0,
-  setLabelId: e,
-  messageIds: [],
-  setMessageIds: e,
-  getDescriptionProps: (n) => n
-});
-process.env.NODE_ENV !== "production" && (o.displayName = "LabelableContext");
-function a() {
-  return t.useContext(o);
-}
+const _ = "_root_1m4y4_2", a = "_track_1m4y4_10", r = "_indicator_1m4y4_19", t = "_label_1m4y4_27", i = "_value_1m4y4_34", e = "_indeterminate_1m4y4_1", n = {
+  root: _,
+  track: a,
+  indicator: r,
+  label: t,
+  value: i,
+  "size-sm": "_size-sm_1m4y4_42",
+  "size-md": "_size-md_1m4y4_46",
+  "size-lg": "_size-lg_1m4y4_50",
+  "variant-primary": "_variant-primary_1m4y4_55",
+  "variant-success": "_variant-success_1m4y4_60",
+  "variant-warning": "_variant-warning_1m4y4_65",
+  "variant-error": "_variant-error_1m4y4_70",
+  indeterminate: e
+};
 export {
-  o as LabelableContext,
-  a as useLabelableContext
+  n as default,
+  e as indeterminate,
+  r as indicator,
+  t as label,
+  _ as root,
+  a as track,
+  i as value
 };

package/dist/als-react-ts-ui256.js

@@ -1,29 +1,61 @@
-import { useIsoLayoutEffect as s } from "./als-react-ts-ui161.js";
-import { isElement as u } from "./als-react-ts-ui221.js";
-import { useBaseUiId as m } from "./als-react-ts-ui170.js";
-import { useLabelableContext as c } from "./als-react-ts-ui255.js";
-import { NOOP as d } from "./als-react-ts-ui212.js";
-function x(f = {}) {
-  const {
-    id: e,
-    implicit: o = !1,
-    controlRef: n
-  } = f, {
-    controlId: r,
-    setControlId: t
-  } = c(), l = m(e);
-  return s(() => {
-    if (!(!o && !e || t === d)) {
-      if (o) {
-        const i = n?.current;
-        u(i) && i.closest("label") != null ? t(e ?? null) : t(r ?? l);
-      } else e && t(e);
-      return () => {
-        e && t(void 0);
-      };
-    }
-  }, [e, n, r, t, o, l]), r ?? l;
+import * as n from "react";
+import { useValueAsRef as N } from "./als-react-ts-ui318.js";
+import { formatNumber as f } from "./als-react-ts-ui484.js";
+import { useRenderElement as P } from "./als-react-ts-ui226.js";
+import { ProgressRootContext as A } from "./als-react-ts-ui525.js";
+import { progressStateAttributesMapping as M } from "./als-react-ts-ui526.js";
+import { jsx as y } from "react/jsx-runtime";
+function E(r, e, s) {
+  return r == null ? "" : s ? f(r, e, s) : f(r / 100, e, {
+    style: "percent"
+  });
+}
+function w(r, e) {
+  return e == null ? "indeterminate progress" : r || `${e}%`;
 }
+const D = /* @__PURE__ */ n.forwardRef(function(e, s) {
+  const {
+    format: p,
+    getAriaValueText: c = w,
+    locale: d,
+    max: a = 100,
+    min: i = 0,
+    value: t,
+    render: I,
+    className: O,
+    ...g
+  } = e, [b, l] = n.useState(), x = N(p);
+  let o = "indeterminate";
+  Number.isFinite(t) && (o = t === a ? "complete" : "progressing");
+  const u = E(t, d, x.current), m = n.useMemo(() => ({
+    status: o
+  }), [o]), R = {
+    "aria-labelledby": b,
+    "aria-valuemax": a,
+    "aria-valuemin": i,
+    "aria-valuenow": t ?? void 0,
+    "aria-valuetext": c(u, t),
+    role: "progressbar"
+  }, V = n.useMemo(() => ({
+    formattedValue: u,
+    max: a,
+    min: i,
+    setLabelId: l,
+    state: m,
+    status: o,
+    value: t
+  }), [u, a, i, l, m, o, t]), v = P("div", e, {
+    state: m,
+    ref: s,
+    props: [R, g],
+    stateAttributesMapping: M
+  });
+  return /* @__PURE__ */ y(A.Provider, {
+    value: V,
+    children: v
+  });
+});
+process.env.NODE_ENV !== "production" && (D.displayName = "ProgressRoot");
 export {
-  x as useLabelableId
+  D as ProgressRoot
 };