@pathscale/ui 1.1.78 → 1.1.80

package/dist/components/password-field/PasswordField.d.ts

@@ -1,20 +1,70 @@
 import { type Component, type JSX } from "solid-js";
 import type { IComponentBaseProps } from "../types";
 export type PasswordFieldProps = IComponentBaseProps & {
+    id?: string;
     name?: string;
     label?: JSX.Element;
     placeholder?: string;
     disabled?: boolean;
     invalid?: boolean;
+    required?: boolean;
+    autofocus?: boolean;
     autocomplete?: "current-password" | "new-password" | "off";
+    "aria-describedby"?: string;
     startIcon?: JSX.Element;
     showLabel: string;
     hideLabel: string;
     value?: string;
+    inputRef?: (el: HTMLInputElement) => void;
     onInput?: (value: string) => void;
     onBlur?: () => void;
+    visibleIcon?: JSX.Element;
+    hiddenIcon?: JSX.Element;
+    onVisibilityChange?: (visible: boolean) => void;
     class?: string;
     inputClass?: string;
 };
+export type PasswordToggleSnapshot = {
+    hadFocus: boolean;
+    selectionStart: number | null;
+    selectionEnd: number | null;
+    selectionDirection: "forward" | "backward" | "none" | null;
+    valueBeforeToggle: string | null;
+};
+type PasswordFieldInputContractParams = Pick<PasswordFieldProps, "id" | "name" | "label" | "placeholder" | "required" | "autofocus" | "autocomplete" | "aria-describedby" | "value" | "disabled" | "invalid" | "startIcon" | "inputClass"> & {
+    isVisible: boolean;
+};
+export declare const createPasswordFieldInputContract: (params: PasswordFieldInputContractParams) => {
+    id: string | undefined;
+    name: string | undefined;
+    label: JSX.Element;
+    type: string;
+    placeholder: string | undefined;
+    required: boolean | undefined;
+    autofocus: boolean | undefined;
+    autocomplete: "off" | "current-password" | "new-password" | undefined;
+    "aria-describedby": string | undefined;
+    value: string | undefined;
+    isDisabled: boolean;
+    isInvalid: boolean;
+    startIcon: JSX.Element;
+    class: string;
+};
+type PasswordFieldLike = {
+    value: string;
+    selectionStart: number | null;
+    selectionEnd: number | null;
+    selectionDirection: "forward" | "backward" | "none" | null;
+    focus: (options?: {
+        preventScroll?: boolean;
+    }) => void;
+    setSelectionRange: (selectionStart: number, selectionEnd: number, selectionDirection?: "forward" | "backward" | "none") => void;
+    dispatchEvent: (event: Event) => boolean;
+};
+export declare const getPasswordInputType: (isVisible: boolean) => "text" | "password";
+export declare const selectPasswordToggleIcon: (isVisible: boolean, visibleIcon: JSX.Element | undefined, hiddenIcon: JSX.Element | undefined, fallback: JSX.Element) => JSX.Element;
+export declare const capturePasswordToggleSnapshot: (field: PasswordFieldLike | undefined, activeElement: EventTarget | null) => PasswordToggleSnapshot;
+export declare const restorePasswordFieldAfterToggle: (field: PasswordFieldLike | undefined, snapshot: PasswordToggleSnapshot) => void;
+export declare const preventPasswordTogglePointerDown: (event: Pick<PointerEvent, "preventDefault">) => void;
 declare const PasswordField: Component<PasswordFieldProps>;
 export default PasswordField;

package/dist/components/password-field/PasswordField.js

@@ -5,27 +5,100 @@ import * as __WEBPACK_EXTERNAL_MODULE__button_index_js_557db1f7__ from "../butto
 import * as __WEBPACK_EXTERNAL_MODULE__icon_index_js_1f7a158c__ from "../icon/index.js";
 import * as __WEBPACK_EXTERNAL_MODULE__input_index_js_00da0e74__ from "../input/index.js";
 var _tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div>");
-const PasswordField_PasswordField = (props)=>{
+const createPasswordFieldInputContract = (params)=>({
+        id: params.id,
+        name: params.name,
+        label: params.label,
+        type: getPasswordInputType(params.isVisible),
+        placeholder: params.placeholder,
+        required: params.required,
+        autofocus: params.autofocus,
+        autocomplete: params.autocomplete,
+        "aria-describedby": params["aria-describedby"],
+        value: params.value,
+        isDisabled: Boolean(params.disabled),
+        isInvalid: Boolean(params.invalid),
+        startIcon: params.startIcon,
+        class: (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("w-full", params.inputClass)
+    });
+const getPasswordInputType = (isVisible)=>isVisible ? "text" : "password";
+const selectPasswordToggleIcon = (isVisible, visibleIcon, hiddenIcon, fallback)=>(isVisible ? visibleIcon : hiddenIcon) ?? fallback;
+const capturePasswordToggleSnapshot = (field, activeElement)=>({
+        hadFocus: activeElement === field,
+        selectionStart: field?.selectionStart ?? null,
+        selectionEnd: field?.selectionEnd ?? null,
+        selectionDirection: field?.selectionDirection ?? null,
+        valueBeforeToggle: field?.value ?? null
+    });
+const restorePasswordFieldAfterToggle = (field, snapshot)=>{
+    if (!field) return;
+    if (null !== snapshot.valueBeforeToggle && field.value !== snapshot.valueBeforeToggle) {
+        field.value = snapshot.valueBeforeToggle;
+        field.dispatchEvent(new Event("input", {
+            bubbles: true
+        }));
+    }
+    if (!snapshot.hadFocus) return;
+    field.focus({
+        preventScroll: true
+    });
+    if (null === snapshot.selectionStart || null === snapshot.selectionEnd) return;
+    try {
+        field.setSelectionRange(snapshot.selectionStart, snapshot.selectionEnd, snapshot.selectionDirection ?? void 0);
+    } catch  {}
+};
+const preventPasswordTogglePointerDown = (event)=>event.preventDefault();
+const PasswordField = (props)=>{
     const [local] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
+        "id",
         "name",
         "label",
         "placeholder",
         "disabled",
         "invalid",
+        "required",
+        "autofocus",
         "autocomplete",
+        "aria-describedby",
         "startIcon",
         "showLabel",
         "hideLabel",
         "value",
+        "inputRef",
         "onInput",
         "onBlur",
+        "visibleIcon",
+        "hiddenIcon",
+        "onVisibilityChange",
         "inputClass",
         "class",
         "className",
         "dataTheme"
     ]);
     const [isVisible, setIsVisible] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createSignal)(false);
+    let fieldRef;
     const toggleLabel = ()=>isVisible() ? local.hideLabel : local.showLabel;
+    const toggleIcon = ()=>selectPasswordToggleIcon(isVisible(), local.visibleIcon, local.hiddenIcon, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE__icon_index_js_1f7a158c__["default"], {
+            width: 16,
+            height: 16,
+            get name () {
+                return isVisible() ? "icon-[lucide--eye-off]" : "icon-[lucide--eye]";
+            },
+            class: "h-4 w-4"
+        }));
+    const setFieldRef = (el)=>{
+        fieldRef = el;
+        local.inputRef?.(el);
+    };
+    const toggleVisibility = ()=>{
+        const snapshot = capturePasswordToggleSnapshot(fieldRef, "undefined" != typeof document ? document.activeElement : null);
+        const nextVisible = !isVisible();
+        setIsVisible(nextVisible);
+        local.onVisibilityChange?.(nextVisible);
+        queueMicrotask(()=>{
+            restorePasswordFieldAfterToggle(fieldRef, snapshot);
+        });
+    };
     return (()=>{
         var _el$ = _tmpl$();
         (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(()=>({
@@ -39,41 +112,27 @@ const PasswordField_PasswordField = (props)=>{
                 return isVisible() ? "true" : "false";
             }
         }), false, true);
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE__input_index_js_00da0e74__["default"], (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)({
-            get name () {
-                return local.name;
-            },
-            get label () {
-                return local.label;
-            },
-            get type () {
-                return isVisible() ? "text" : "password";
-            },
-            get placeholder () {
-                return local.placeholder;
-            },
-            get autocomplete () {
-                return local.autocomplete;
-            },
-            get value () {
-                return local.value;
-            },
-            get isDisabled () {
-                return Boolean(local.disabled);
-            },
-            get isInvalid () {
-                return Boolean(local.invalid);
-            },
-            get startIcon () {
-                return local.startIcon;
-            },
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE__input_index_js_00da0e74__["default"], (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(()=>createPasswordFieldInputContract({
+                id: local.id,
+                name: local.name,
+                label: local.label,
+                isVisible: isVisible(),
+                placeholder: local.placeholder,
+                required: local.required,
+                autofocus: local.autofocus,
+                autocomplete: local.autocomplete,
+                "aria-describedby": local["aria-describedby"],
+                value: local.value,
+                disabled: local.disabled,
+                invalid: local.invalid,
+                startIcon: local.startIcon,
+                inputClass: local.inputClass
+            }), {
+            ref: setFieldRef,
             onInput: (event)=>{
                 local.onInput?.(event.currentTarget.value);
             },
-            onBlur: ()=>local.onBlur?.()
-        }, ()=>({
-                class: (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("w-full", local.inputClass)
-            }), {
+            onBlur: ()=>local.onBlur?.(),
             get endIcon () {
                 return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE__button_index_js_557db1f7__["default"], {
                     type: "button",
@@ -81,7 +140,11 @@ const PasswordField_PasswordField = (props)=>{
                     size: "sm",
                     isIconOnly: true,
                     class: "h-7 min-h-7 w-7 min-w-7",
-                    onClick: ()=>setIsVisible((value)=>!value),
+                    get isDisabled () {
+                        return Boolean(local.disabled);
+                    },
+                    onPointerDown: preventPasswordTogglePointerDown,
+                    onClick: toggleVisibility,
                     get ["aria-label"] () {
                         return toggleLabel();
                     },
@@ -92,14 +155,7 @@ const PasswordField_PasswordField = (props)=>{
                         return toggleLabel();
                     },
                     get children () {
-                        return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE__icon_index_js_1f7a158c__["default"], {
-                            width: 16,
-                            height: 16,
-                            get name () {
-                                return isVisible() ? "icon-[lucide--eye-off]" : "icon-[lucide--eye]";
-                            },
-                            class: "h-4 w-4"
-                        });
+                        return toggleIcon();
                     }
                 });
             }
@@ -107,5 +163,5 @@ const PasswordField_PasswordField = (props)=>{
         return _el$;
     })();
 };
-const PasswordField = PasswordField_PasswordField;
-export { PasswordField as default };
+const password_field_PasswordField = PasswordField;
+export { capturePasswordToggleSnapshot, createPasswordFieldInputContract, password_field_PasswordField as default, getPasswordInputType, preventPasswordTogglePointerDown, restorePasswordFieldAfterToggle, selectPasswordToggleIcon };

package/dist/motion/index.d.ts

@@ -6,6 +6,8 @@ export { prefersReducedMotion } from "./reduced-motion";
 export { defaultMotionTokens, mergeMotionTokens, motionDurations, motionDistances, motionEasings, } from "./tokens";
 export { getPreset, createMotionPresets, motionPresets, noMotion, registerPreset, resolvePreset, routeTransition, } from "./presets";
 export { MotionDiv, type MotionDivProps } from "./solid";
+export { Presence, nextPresenceState, type PresenceProps, type PresenceRenderProp, } from "./solid";
+export { AnimatedCollapse, nextCollapsePhase, computeCollapseStyle, type AnimatedCollapseProps, } from "./solid";
 export { createPopmotionDriver, enablePopmotion, type PopmotionAnimate, } from "./popmotion";
 export { createMotionSystem, type MotionSystemConfig } from "./system";
 export { createRouteTransitionResolver, type RouteTransitionRule, type RouteTransitionRuleResult, type RouteTransitionResolverOptions, } from "./route";

package/dist/motion/index.js

@@ -8,7 +8,10 @@ import * as __WEBPACK_EXTERNAL_MODULE__solid_index_js_0e5c9791__ from "./solid/i
 import * as __WEBPACK_EXTERNAL_MODULE__popmotion_js_a3c50ca9__ from "./popmotion.js";
 import * as __WEBPACK_EXTERNAL_MODULE__system_js_50c29608__ from "./system.js";
 import * as __WEBPACK_EXTERNAL_MODULE__route_js_d0361f8a__ from "./route.js";
+var __webpack_exports__AnimatedCollapse = __WEBPACK_EXTERNAL_MODULE__solid_index_js_0e5c9791__.AnimatedCollapse;
 var __webpack_exports__MotionDiv = __WEBPACK_EXTERNAL_MODULE__solid_index_js_0e5c9791__.MotionDiv;
+var __webpack_exports__Presence = __WEBPACK_EXTERNAL_MODULE__solid_index_js_0e5c9791__.Presence;
+var __webpack_exports__computeCollapseStyle = __WEBPACK_EXTERNAL_MODULE__solid_index_js_0e5c9791__.computeCollapseStyle;
 var __webpack_exports__createMotionPresets = __WEBPACK_EXTERNAL_MODULE__presets_js_17a1eb8d__.createMotionPresets;
 var __webpack_exports__createMotionSystem = __WEBPACK_EXTERNAL_MODULE__system_js_50c29608__.createMotionSystem;
 var __webpack_exports__createPopmotionDriver = __WEBPACK_EXTERNAL_MODULE__popmotion_js_a3c50ca9__.createPopmotionDriver;
@@ -23,6 +26,8 @@ var __webpack_exports__motionDistances = __WEBPACK_EXTERNAL_MODULE__tokens_js_af
 var __webpack_exports__motionDurations = __WEBPACK_EXTERNAL_MODULE__tokens_js_afbe9ddb__.motionDurations;
 var __webpack_exports__motionEasings = __WEBPACK_EXTERNAL_MODULE__tokens_js_afbe9ddb__.motionEasings;
 var __webpack_exports__motionPresets = __WEBPACK_EXTERNAL_MODULE__presets_js_17a1eb8d__.motionPresets;
+var __webpack_exports__nextCollapsePhase = __WEBPACK_EXTERNAL_MODULE__solid_index_js_0e5c9791__.nextCollapsePhase;
+var __webpack_exports__nextPresenceState = __WEBPACK_EXTERNAL_MODULE__solid_index_js_0e5c9791__.nextPresenceState;
 var __webpack_exports__noMotion = __WEBPACK_EXTERNAL_MODULE__presets_js_17a1eb8d__.noMotion;
 var __webpack_exports__prefersReducedMotion = __WEBPACK_EXTERNAL_MODULE__reduced_motion_js_6b898224__.prefersReducedMotion;
 var __webpack_exports__registerPreset = __WEBPACK_EXTERNAL_MODULE__presets_js_17a1eb8d__.registerPreset;
@@ -31,4 +36,4 @@ var __webpack_exports__resolvePreset = __WEBPACK_EXTERNAL_MODULE__presets_js_17a
 var __webpack_exports__routeTransition = __WEBPACK_EXTERNAL_MODULE__presets_js_17a1eb8d__.routeTransition;
 var __webpack_exports__runMotion = __WEBPACK_EXTERNAL_MODULE__engine_js_45c545c3__.runMotion;
 var __webpack_exports__setMotionDriver = __WEBPACK_EXTERNAL_MODULE__driver_js_09718513__.setMotionDriver;
-export { __webpack_exports__MotionDiv as MotionDiv, __webpack_exports__createMotionPresets as createMotionPresets, __webpack_exports__createMotionSystem as createMotionSystem, __webpack_exports__createPopmotionDriver as createPopmotionDriver, __webpack_exports__createRouteTransitionResolver as createRouteTransitionResolver, __webpack_exports__defaultMotionTokens as defaultMotionTokens, __webpack_exports__enablePopmotion as enablePopmotion, __webpack_exports__getMotionDriver as getMotionDriver, __webpack_exports__getPreset as getPreset, __webpack_exports__immediateDriver as immediateDriver, __webpack_exports__mergeMotionTokens as mergeMotionTokens, __webpack_exports__motionDistances as motionDistances, __webpack_exports__motionDurations as motionDurations, __webpack_exports__motionEasings as motionEasings, __webpack_exports__motionPresets as motionPresets, __webpack_exports__noMotion as noMotion, __webpack_exports__prefersReducedMotion as prefersReducedMotion, __webpack_exports__registerPreset as registerPreset, __webpack_exports__resolveEase as resolveEase, __webpack_exports__resolvePreset as resolvePreset, __webpack_exports__routeTransition as routeTransition, __webpack_exports__runMotion as runMotion, __webpack_exports__setMotionDriver as setMotionDriver };
+export { __webpack_exports__AnimatedCollapse as AnimatedCollapse, __webpack_exports__MotionDiv as MotionDiv, __webpack_exports__Presence as Presence, __webpack_exports__computeCollapseStyle as computeCollapseStyle, __webpack_exports__createMotionPresets as createMotionPresets, __webpack_exports__createMotionSystem as createMotionSystem, __webpack_exports__createPopmotionDriver as createPopmotionDriver, __webpack_exports__createRouteTransitionResolver as createRouteTransitionResolver, __webpack_exports__defaultMotionTokens as defaultMotionTokens, __webpack_exports__enablePopmotion as enablePopmotion, __webpack_exports__getMotionDriver as getMotionDriver, __webpack_exports__getPreset as getPreset, __webpack_exports__immediateDriver as immediateDriver, __webpack_exports__mergeMotionTokens as mergeMotionTokens, __webpack_exports__motionDistances as motionDistances, __webpack_exports__motionDurations as motionDurations, __webpack_exports__motionEasings as motionEasings, __webpack_exports__motionPresets as motionPresets, __webpack_exports__nextCollapsePhase as nextCollapsePhase, __webpack_exports__nextPresenceState as nextPresenceState, __webpack_exports__noMotion as noMotion, __webpack_exports__prefersReducedMotion as prefersReducedMotion, __webpack_exports__registerPreset as registerPreset, __webpack_exports__resolveEase as resolveEase, __webpack_exports__resolvePreset as resolvePreset, __webpack_exports__routeTransition as routeTransition, __webpack_exports__runMotion as runMotion, __webpack_exports__setMotionDriver as setMotionDriver };

package/dist/motion/solid/AnimatedCollapse.d.ts

@@ -0,0 +1,35 @@
+import { type JSX } from "solid-js";
+export interface AnimatedCollapseProps {
+    /** Whether the panel is expanded. */
+    open: boolean;
+    children: JSX.Element;
+    /** Animation duration in seconds. Default 0.24. */
+    duration?: number;
+    /** Wrapper class (applied to the height-animated container). */
+    class?: string;
+    /** Inner content class (applied to the measured content wrapper). */
+    contentClass?: string;
+    /** Cross-fade content during open/close. Default true. */
+    animateOpacity?: boolean;
+    /** Remove content from the tree when fully closed. Default false. */
+    unmountOnExit?: boolean;
+    /** Forwarded to the wrapper element. */
+    id?: string;
+    /** Override for prefers-reduced-motion detection. */
+    reduceMotion?: boolean;
+}
+type CollapsePhase = "closed" | "opening" | "open" | "closing";
+/**
+ * Pure: returns the next collapse phase given the previous phase and target
+ * `open`. Exposed for unit testing.
+ */
+export declare const nextCollapsePhase: (prev: CollapsePhase, open: boolean) => CollapsePhase;
+/**
+ * Pure: computes the inline style for the collapse wrapper based on phase,
+ * measured height (px), and opacity preference. `null` means "no inline
+ * height — let layout flow" (used while fully open with dynamic content).
+ * Exposed for unit testing.
+ */
+export declare const computeCollapseStyle: (phase: CollapsePhase, heightPx: number | null, animateOpacity: boolean) => JSX.CSSProperties;
+export declare const AnimatedCollapse: (props: AnimatedCollapseProps) => JSX.Element;
+export default AnimatedCollapse;

package/dist/motion/solid/AnimatedCollapse.js

@@ -0,0 +1,166 @@
+import * as __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__ from "solid-js/web";
+import * as __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__ from "solid-js";
+import * as __WEBPACK_EXTERNAL_MODULE__driver_js_6225697c__ from "../driver.js";
+import * as __WEBPACK_EXTERNAL_MODULE__easing_js_1a315be3__ from "../easing.js";
+import * as __WEBPACK_EXTERNAL_MODULE__reduced_motion_js_a60363ae__ from "../reduced-motion.js";
+var _tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div><div>");
+const nextCollapsePhase = (prev, open)=>{
+    if (open) return "open" === prev || "opening" === prev ? prev : "opening";
+    return "closed" === prev || "closing" === prev ? prev : "closing";
+};
+const computeCollapseStyle = (phase, heightPx, animateOpacity)=>{
+    const style = {
+        overflow: "hidden"
+    };
+    if ("closed" === phase) {
+        style.height = "0px";
+        if (animateOpacity) style.opacity = 0;
+        return style;
+    }
+    if ("open" === phase) {
+        if (animateOpacity) style.opacity = 1;
+        style.overflow = "visible";
+        return style;
+    }
+    if (null !== heightPx) style.height = `${heightPx}px`;
+    return style;
+};
+const DEFAULT_DURATION = 0.24;
+const AnimatedCollapse = (props)=>{
+    const [phase, setPhase] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createSignal)(props.open ? "open" : "closed");
+    const [heightPx, setHeightPx] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createSignal)(props.open ? null : 0);
+    const [opacity, setOpacity] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createSignal)(props.open ? 1 : 0);
+    let contentEl;
+    let activeControl = null;
+    let resizeObserver = null;
+    const stopActive = ()=>{
+        activeControl?.stop();
+        activeControl = null;
+    };
+    const measure = ()=>{
+        if (!contentEl) return 0;
+        return contentEl.scrollHeight;
+    };
+    const animateOpacity = ()=>false !== props.animateOpacity;
+    const setupObserver = ()=>{
+        if ("undefined" == typeof ResizeObserver) return;
+        if (!contentEl || resizeObserver) return;
+        resizeObserver = new ResizeObserver(()=>{});
+        resizeObserver.observe(contentEl);
+    };
+    const teardownObserver = ()=>{
+        resizeObserver?.disconnect();
+        resizeObserver = null;
+    };
+    const runAnimation = (target, fromHeight, toHeight)=>{
+        stopActive();
+        const reduce = props.reduceMotion ?? (0, __WEBPACK_EXTERNAL_MODULE__reduced_motion_js_a60363ae__.prefersReducedMotion)();
+        if (reduce) {
+            setHeightPx(toHeight);
+            if (animateOpacity()) setOpacity("opening" === target ? 1 : 0);
+            finish(target);
+            return;
+        }
+        const duration = (props.duration ?? DEFAULT_DURATION) * 1000;
+        const ease = (0, __WEBPACK_EXTERNAL_MODULE__easing_js_1a315be3__.resolveEase)("ease-out");
+        const driver = (0, __WEBPACK_EXTERNAL_MODULE__driver_js_6225697c__.getMotionDriver)();
+        const heightControl = driver({
+            from: fromHeight,
+            to: toHeight,
+            duration,
+            ease,
+            onUpdate: (value)=>setHeightPx(value),
+            onComplete: ()=>finish(target)
+        });
+        if (animateOpacity()) {
+            const fromOpacity = "opening" === target ? 0 : 1;
+            const toOpacity = "opening" === target ? 1 : 0;
+            const opacityControl = driver({
+                from: fromOpacity,
+                to: toOpacity,
+                duration,
+                ease,
+                onUpdate: (value)=>setOpacity(value)
+            });
+            activeControl = {
+                stop: ()=>{
+                    heightControl.stop();
+                    opacityControl.stop();
+                }
+            };
+        } else {
+            setOpacity(1);
+            activeControl = heightControl;
+        }
+    };
+    const finish = (target)=>{
+        if ("opening" === target) {
+            setPhase("open");
+            setHeightPx(null);
+            if (animateOpacity()) setOpacity(1);
+        } else if ("closing" === target) {
+            setPhase("closed");
+            setHeightPx(0);
+            if (animateOpacity()) setOpacity(0);
+            teardownObserver();
+        }
+    };
+    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createEffect)(()=>{
+        const open = props.open;
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.untrack)(()=>{
+            const target = nextCollapsePhase(phase(), open);
+            if (target === phase()) return;
+            setPhase(target);
+            if ("opening" === target) requestAnimationFrame(()=>{
+                const to = measure();
+                setupObserver();
+                runAnimation("opening", 0, to);
+            });
+            else if ("closing" === target) {
+                const from = measure();
+                setHeightPx(from);
+                requestAnimationFrame(()=>runAnimation("closing", from, 0));
+            }
+        });
+    });
+    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.onCleanup)(()=>{
+        stopActive();
+        teardownObserver();
+    });
+    const shouldRender = ()=>props.unmountOnExit ? "closed" !== phase() : true;
+    const wrapperStyle = ()=>computeCollapseStyle(phase(), heightPx(), animateOpacity());
+    return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.Show, {
+        get when () {
+            return shouldRender();
+        },
+        get children () {
+            var _el$ = _tmpl$(), _el$2 = _el$.firstChild;
+            var _ref$ = contentEl;
+            "function" == typeof _ref$ ? (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.use)(_ref$, _el$2) : contentEl = _el$2;
+            (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$2, ()=>props.children);
+            (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.effect)((_p$)=>{
+                var _v$ = props.id, _v$2 = props.class, _v$3 = {
+                    ...wrapperStyle(),
+                    ...animateOpacity() && "open" !== phase() ? {
+                        opacity: opacity()
+                    } : {}
+                }, _v$4 = "closed" === phase() ? true : void 0, _v$5 = props.contentClass;
+                _v$ !== _p$.e && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$, "id", _p$.e = _v$);
+                _v$2 !== _p$.t && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.className)(_el$, _p$.t = _v$2);
+                _p$.a = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.style)(_el$, _v$3, _p$.a);
+                _v$4 !== _p$.o && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$, "aria-hidden", _p$.o = _v$4);
+                _v$5 !== _p$.i && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.className)(_el$2, _p$.i = _v$5);
+                return _p$;
+            }, {
+                e: void 0,
+                t: void 0,
+                a: void 0,
+                o: void 0,
+                i: void 0
+            });
+            return _el$;
+        }
+    });
+};
+const solid_AnimatedCollapse = AnimatedCollapse;
+export { AnimatedCollapse, computeCollapseStyle, solid_AnimatedCollapse as default, nextCollapsePhase };

package/dist/motion/solid/Presence.d.ts

@@ -0,0 +1,30 @@
+import { type JSX } from "solid-js";
+export type PresenceRenderProp = (isExiting: () => boolean, onExitComplete: () => void) => JSX.Element;
+export interface PresenceProps {
+    /** Controls whether the child should be mounted/visible. */
+    when: boolean;
+    /**
+     * Render function. Receives an `isExiting` accessor (pass through to
+     * MotionDiv's `isExiting`) and an `onExitComplete` callback that must be
+     * wired to MotionDiv (or invoked manually when the exit animation ends).
+     */
+    children: PresenceRenderProp;
+    /**
+     * Fallback timeout (ms) after which Presence force-unmounts the child if
+     * `onExitComplete` was never called. Prevents stuck-exit states. Default 800.
+     */
+    exitTimeout?: number;
+    /** Override for prefers-reduced-motion detection. */
+    reduceMotion?: boolean;
+}
+interface PresenceState {
+    mounted: boolean;
+    isExiting: boolean;
+}
+/**
+ * Pure state transition for Presence. Given the previous state and the next
+ * `when` value, returns the next state. Exposed for unit testing.
+ */
+export declare const nextPresenceState: (prev: PresenceState, when: boolean) => PresenceState;
+export declare const Presence: (props: PresenceProps) => JSX.Element;
+export default Presence;

package/dist/motion/solid/Presence.js

@@ -0,0 +1,65 @@
+import * as __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__ from "solid-js/web";
+import * as __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__ from "solid-js";
+import * as __WEBPACK_EXTERNAL_MODULE__reduced_motion_js_a60363ae__ from "../reduced-motion.js";
+const nextPresenceState = (prev, when)=>{
+    if (when) return {
+        mounted: true,
+        isExiting: false
+    };
+    if (prev.mounted && !prev.isExiting) return {
+        mounted: true,
+        isExiting: true
+    };
+    return prev.mounted ? prev : {
+        mounted: false,
+        isExiting: false
+    };
+};
+const DEFAULT_EXIT_TIMEOUT = 800;
+const Presence_Presence = (props)=>{
+    const [state, setState] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createSignal)({
+        mounted: props.when,
+        isExiting: false
+    });
+    let exitTimer = null;
+    const clearTimer = ()=>{
+        if (null !== exitTimer) {
+            clearTimeout(exitTimer);
+            exitTimer = null;
+        }
+    };
+    const finishExit = ()=>{
+        clearTimer();
+        setState((prev)=>prev.isExiting ? {
+                mounted: false,
+                isExiting: false
+            } : prev);
+    };
+    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createEffect)(()=>{
+        const when = props.when;
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.untrack)(()=>{
+            const next = nextPresenceState(state(), when);
+            if (next === state()) return;
+            setState(next);
+            if (next.isExiting) {
+                const reduce = props.reduceMotion ?? (0, __WEBPACK_EXTERNAL_MODULE__reduced_motion_js_a60363ae__.prefersReducedMotion)();
+                if (reduce) return void queueMicrotask(finishExit);
+                clearTimer();
+                const ms = props.exitTimeout ?? DEFAULT_EXIT_TIMEOUT;
+                exitTimer = setTimeout(finishExit, ms);
+            } else clearTimer();
+        });
+    });
+    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.onCleanup)(clearTimer);
+    const isExiting = ()=>state().isExiting;
+    return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.Show, {
+        get when () {
+            return state().mounted;
+        },
+        get children () {
+            return props.children(isExiting, finishExit);
+        }
+    });
+};
+const Presence = Presence_Presence;
+export { Presence_Presence as Presence, Presence as default, nextPresenceState };

package/dist/motion/solid/index.d.ts

@@ -1,2 +1,6 @@
 export { default as MotionDiv } from "./MotionDiv";
 export type { MotionDivProps } from "./MotionDiv";
+export { default as Presence, nextPresenceState } from "./Presence";
+export type { PresenceProps, PresenceRenderProp } from "./Presence";
+export { default as AnimatedCollapse, nextCollapsePhase, computeCollapseStyle, } from "./AnimatedCollapse";
+export type { AnimatedCollapseProps } from "./AnimatedCollapse";

package/dist/motion/solid/index.js

@@ -1,3 +1,10 @@
 import * as __WEBPACK_EXTERNAL_MODULE__MotionDiv_js_142518a8__ from "./MotionDiv.js";
+import * as __WEBPACK_EXTERNAL_MODULE__Presence_js_c85f5127__ from "./Presence.js";
+import * as __WEBPACK_EXTERNAL_MODULE__AnimatedCollapse_js_e9eaa465__ from "./AnimatedCollapse.js";
+var __webpack_exports__AnimatedCollapse = __WEBPACK_EXTERNAL_MODULE__AnimatedCollapse_js_e9eaa465__["default"];
 var __webpack_exports__MotionDiv = __WEBPACK_EXTERNAL_MODULE__MotionDiv_js_142518a8__["default"];
-export { __webpack_exports__MotionDiv as MotionDiv };
+var __webpack_exports__Presence = __WEBPACK_EXTERNAL_MODULE__Presence_js_c85f5127__["default"];
+var __webpack_exports__computeCollapseStyle = __WEBPACK_EXTERNAL_MODULE__AnimatedCollapse_js_e9eaa465__.computeCollapseStyle;
+var __webpack_exports__nextCollapsePhase = __WEBPACK_EXTERNAL_MODULE__AnimatedCollapse_js_e9eaa465__.nextCollapsePhase;
+var __webpack_exports__nextPresenceState = __WEBPACK_EXTERNAL_MODULE__Presence_js_c85f5127__.nextPresenceState;
+export { __webpack_exports__AnimatedCollapse as AnimatedCollapse, __webpack_exports__MotionDiv as MotionDiv, __webpack_exports__Presence as Presence, __webpack_exports__computeCollapseStyle as computeCollapseStyle, __webpack_exports__nextCollapsePhase as nextCollapsePhase, __webpack_exports__nextPresenceState as nextPresenceState };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pathscale/ui",
-  "version": "1.1.78",
+  "version": "1.1.80",
   "author": "pathscale",
   "repository": {
     "type": "git",