@crisp-ui-kit/crisp 0.19.0 → 0.20.0

package/dist/cjs/components/menu/menu.js

@@ -41,6 +41,7 @@ exports.MenuLabel = MenuLabel;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const lucide_react_1 = require("lucide-react");
 const React = __importStar(require("react"));
+const core_1 = require("../../core");
 const menu_recipe_1 = require("./menu.recipe");
 const menu_keyboard_1 = require("./menu-keyboard");
 const MenuContext = React.createContext(null);
@@ -71,15 +72,13 @@ function Menu({ trigger, children, align = "start", open: openProp, defaultOpen,
         const rect = triggerRef.current?.getBoundingClientRect();
         if (!rect)
             return;
-        const gap = 4;
-        const flipUp = window.innerHeight - rect.bottom < 280;
-        const style = flipUp
-            ? { bottom: window.innerHeight - rect.top + gap }
-            : { top: rect.bottom + gap };
-        if (align === "end")
-            style.right = window.innerWidth - rect.right;
-        else
-            style.left = rect.left;
+        const { style, up: flipUp } = (0, core_1.placeFloating)({
+            rect,
+            align,
+            gap: 4,
+            flipBelow: 280,
+            anchor: triggerRef.current,
+        });
         setUp(flipUp);
         setPos(style);
     };

package/dist/cjs/components/multiselect/multiselect.js

@@ -37,6 +37,7 @@ exports.MultiSelect = MultiSelect;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const lucide_react_1 = require("lucide-react");
 const React = __importStar(require("react"));
+const core_1 = require("../../core");
 const select_1 = require("../select");
 const multiselect_recipe_1 = require("./multiselect.recipe");
 const TONES = [
@@ -92,15 +93,17 @@ function MultiSelect({ options, value: valueProp, defaultValue, onValueChange, p
             return;
         const rect = triggerRef.current?.getBoundingClientRect();
         if (rect) {
-            const flipUp = window.innerHeight - rect.bottom < 300;
-            setUp(flipUp);
-            setPos({
-                left: rect.left,
-                minWidth: rect.width,
-                ...(flipUp
-                    ? { bottom: window.innerHeight - rect.top + 4 }
-                    : { top: rect.bottom + 4 }),
+            // the popup can grow past the trigger (minWidth, not width), so which
+            // edge it is pinned to decides which way it grows — start, in whichever
+            // direction that is (#210)
+            const { style, up: flipUp } = (0, core_1.placeFloating)({
+                rect,
+                gap: 4,
+                flipBelow: 300,
+                anchor: triggerRef.current,
             });
+            setUp(flipUp);
+            setPos({ ...style, minWidth: rect.width });
         }
         setQuery("");
         setHighlight(0);

package/dist/cjs/components/popover/popover.js

@@ -36,6 +36,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Popover = Popover;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const React = __importStar(require("react"));
+const core_1 = require("../../core");
 const popover_recipe_1 = require("./popover.recipe");
 /**
  * A generic anchored popover — the Menu/Select surface holding arbitrary
@@ -58,16 +59,13 @@ function Popover({ trigger, children, align = "start", open: openProp, defaultOp
         const el = triggerRef.current;
         if (!el)
             return;
-        const rect = el.getBoundingClientRect();
-        const gap = 6;
-        const flipUp = window.innerHeight - rect.bottom < 280;
-        const style = flipUp
-            ? { bottom: window.innerHeight - rect.top + gap }
-            : { top: rect.bottom + gap };
-        if (align === "end")
-            style.right = window.innerWidth - rect.right;
-        else
-            style.left = rect.left;
+        const { style, up: flipUp } = (0, core_1.placeFloating)({
+            rect: el.getBoundingClientRect(),
+            align,
+            gap: 6,
+            flipBelow: 280,
+            anchor: el,
+        });
         setUp(flipUp);
         setPos(style);
     };

package/dist/cjs/components/select/select.js

@@ -37,6 +37,7 @@ exports.Select = Select;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const lucide_react_1 = require("lucide-react");
 const React = __importStar(require("react"));
+const core_1 = require("../../core");
 const listbox_keyboard_1 = require("./listbox-keyboard");
 const select_recipe_1 = require("./select.recipe");
 function optionText(o) {
@@ -87,15 +88,17 @@ function Select({ options, value, defaultValue, onValueChange, placeholder = "Se
             return;
         const rect = triggerRef.current?.getBoundingClientRect();
         if (rect) {
-            const flipUp = window.innerHeight - rect.bottom < 260;
-            setUp(flipUp);
-            setPos({
-                left: rect.left,
-                minWidth: rect.width,
-                ...(flipUp
-                    ? { bottom: window.innerHeight - rect.top + 4 }
-                    : { top: rect.bottom + 4 }),
+            // the popup can grow past the trigger (minWidth, not width), so which
+            // edge it is pinned to decides which way it grows — start, in whichever
+            // direction that is (#210)
+            const { style, up: flipUp } = (0, core_1.placeFloating)({
+                rect,
+                gap: 4,
+                flipBelow: 260,
+                anchor: triggerRef.current,
             });
+            setUp(flipUp);
+            setPos({ ...style, minWidth: rect.width });
         }
         setQuery("");
         const sel = options.findIndex((o) => o.value === selected);

package/dist/cjs/components/wheelpicker/wheelpicker.js

@@ -36,6 +36,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.WheelPicker = WheelPicker;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const React = __importStar(require("react"));
+const core_1 = require("../../core");
 const wheelpicker_recipe_1 = require("./wheelpicker.recipe");
 const ITEM_HEIGHT = { small: 36, medium: 44 };
 /**
@@ -70,6 +71,11 @@ function WheelPicker({ columns, value: valueProp, defaultValue, onValueChange, s
             setInternal(merged);
         onValueChange?.(merged);
     };
+    // CSS cannot reach this: `scroll-behavior` in a stylesheet does not override
+    // an explicit `behavior` passed to scrollTo, so the preference is read here
+    // and the two "smooth" call sites go through `glide` (#208).
+    const reduceMotion = (0, core_1.usePrefersReducedMotion)();
+    const glide = reduceMotion ? "auto" : "smooth";
     const scrollTo = React.useCallback((key, index, behavior) => {
         const el = refs.current.get(key);
         if (!el || index < 0)
@@ -107,7 +113,7 @@ function WheelPicker({ columns, value: valueProp, defaultValue, onValueChange, s
             if (!opt)
                 return;
             commit(col.key, opt.value);
-            scrollTo(col.key, clamped, "smooth");
+            scrollTo(col.key, clamped, glide);
         };
         if (e.key === "ArrowDown")
             go(i + 1);
@@ -127,7 +133,7 @@ function WheelPicker({ columns, value: valueProp, defaultValue, onValueChange, s
                             const selected = opt.value === value[col.key];
                             return ((0, jsx_runtime_1.jsx)("div", { id: optionId(col.key, opt.value), role: "option", "aria-selected": selected, "data-selected": selected ? "" : undefined, className: "wheelpicker-item", onClick: () => {
                                     commit(col.key, opt.value);
-                                    scrollTo(col.key, col.options.indexOf(opt), "smooth");
+                                    scrollTo(col.key, col.options.indexOf(opt), glide);
                                 }, children: opt.label }, opt.value));
                         }) }, col.key))) }) })] }));
 }

package/dist/cjs/core/index.js

@@ -14,13 +14,17 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.resolveRecipe = exports.Primitive = exports.defineRecipe = exports.cx = void 0;
+exports.usePrefersReducedMotion = exports.resolveRecipe = exports.Primitive = exports.placeFloating = exports.defineRecipe = exports.cx = void 0;
 var cx_1 = require("./cx");
 Object.defineProperty(exports, "cx", { enumerable: true, get: function () { return cx_1.cx; } });
 var define_1 = require("./define");
 Object.defineProperty(exports, "defineRecipe", { enumerable: true, get: function () { return define_1.defineRecipe; } });
+var place_floating_1 = require("./place-floating");
+Object.defineProperty(exports, "placeFloating", { enumerable: true, get: function () { return place_floating_1.placeFloating; } });
 var primitive_1 = require("./primitive");
 Object.defineProperty(exports, "Primitive", { enumerable: true, get: function () { return primitive_1.Primitive; } });
 var resolve_1 = require("./resolve");
 Object.defineProperty(exports, "resolveRecipe", { enumerable: true, get: function () { return resolve_1.resolveRecipe; } });
 __exportStar(require("./rtl"), exports);
+var use_prefers_reduced_motion_1 = require("./use-prefers-reduced-motion");
+Object.defineProperty(exports, "usePrefersReducedMotion", { enumerable: true, get: function () { return use_prefers_reduced_motion_1.usePrefersReducedMotion; } });

package/dist/cjs/core/place-floating.js

@@ -0,0 +1,55 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.placeFloating = placeFloating;
+/**
+ * Where a floating layer goes, in logical terms.
+ *
+ * `start` and `end` are inline edges, not left and right. `Menu` and `Popover`
+ * both took an `align` prop named that way and then wrote
+ * `align === "end" ? right : left` with no direction anywhere, so in an RTL
+ * document both were backwards and a layer near the viewport edge overflowed on
+ * the wrong side (#210).
+ *
+ * The direction is read from the anchor's computed style rather than from a
+ * prop, so an inherited `dir` on any ancestor is honoured without every call
+ * site having to thread it down.
+ *
+ * Physical `left`/`right` are deliberate in the OUTPUT: this positions a
+ * `position: fixed` layer against viewport coordinates, which are physical in
+ * both directions. What must be direction-aware is the CHOICE of edge, and
+ * that happens here, once. Converting the output to `inset-inline-start` would
+ * be the half-conversion #146 exists to prevent — the rect it is measured
+ * against would still be physical.
+ */
+/**
+ * The nearest declared direction. The `dir` attribute is checked first because
+ * it is how a document says this in practice and it is readable without a
+ * layout, then computed style for a direction set purely in CSS.
+ */
+function isRtl(anchor) {
+    if (!anchor || typeof window === "undefined")
+        return false;
+    const declared = anchor.closest("[dir]")?.getAttribute("dir");
+    if (declared)
+        return declared.toLowerCase() === "rtl";
+    try {
+        return window.getComputedStyle(anchor).direction === "rtl";
+    }
+    catch {
+        return false;
+    }
+}
+function placeFloating({ rect, align = "start", gap, flipBelow, anchor, }) {
+    const rtl = isRtl(anchor);
+    const up = window.innerHeight - rect.bottom < flipBelow;
+    const style = up
+        ? { bottom: window.innerHeight - rect.top + gap }
+        : { top: rect.bottom + gap };
+    // start is the left edge in LTR and the right edge in RTL; end is the other
+    const toRight = align === "end" ? !rtl : rtl;
+    if (toRight)
+        style.right = window.innerWidth - rect.right;
+    else
+        style.left = rect.left;
+    return { style, up };
+}

package/dist/cjs/core/use-prefers-reduced-motion.js

@@ -0,0 +1,67 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.usePrefersReducedMotion = usePrefersReducedMotion;
+const React = __importStar(require("react"));
+const QUERY = "(prefers-reduced-motion: reduce)";
+const subscribe = (onChange) => {
+    if (typeof window === "undefined" || !window.matchMedia)
+        return () => { };
+    const mq = window.matchMedia(QUERY);
+    mq.addEventListener("change", onChange);
+    return () => mq.removeEventListener("change", onChange);
+};
+const getSnapshot = () => typeof window !== "undefined" && window.matchMedia
+    ? window.matchMedia(QUERY).matches
+    : false;
+/**
+ * Whether the user has asked for reduced motion, live.
+ *
+ * crisp's CSS carries a `@media (prefers-reduced-motion: reduce)` override in
+ * every animating recipe, and `bun run spec` checks it. That covers CSS.
+ * Motion driven from JavaScript — `scrollTo({ behavior: "smooth" })`,
+ * `element.animate()` — is invisible to a stylesheet: `scroll-behavior` in CSS
+ * does NOT override an explicit `behavior` argument. Those call sites have to
+ * read the preference here (#208).
+ *
+ * The server snapshot is `false` rather than "unknown" on purpose. It is the
+ * only value that keeps the markup identical on both sides, and a component
+ * using this must not put the result in its output for the same reason — the
+ * preference belongs in a handler or an effect, where it changes behaviour
+ * rather than HTML.
+ */
+function usePrefersReducedMotion() {
+    return React.useSyncExternalStore(subscribe, getSnapshot, () => false);
+}

package/dist/esm/components/menu/menu.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Check } from "lucide-react";
 import * as React from "react";
+import { placeFloating } from "../../core/index.js";
 import { menuRecipe } from "./menu.recipe.js";
 import { useMenuKeyboard } from "./menu-keyboard.js";
 const MenuContext = React.createContext(null);
@@ -31,15 +32,13 @@ export function Menu({ trigger, children, align = "start", open: openProp, defau
         const rect = triggerRef.current?.getBoundingClientRect();
         if (!rect)
             return;
-        const gap = 4;
-        const flipUp = window.innerHeight - rect.bottom < 280;
-        const style = flipUp
-            ? { bottom: window.innerHeight - rect.top + gap }
-            : { top: rect.bottom + gap };
-        if (align === "end")
-            style.right = window.innerWidth - rect.right;
-        else
-            style.left = rect.left;
+        const { style, up: flipUp } = placeFloating({
+            rect,
+            align,
+            gap: 4,
+            flipBelow: 280,
+            anchor: triggerRef.current,
+        });
         setUp(flipUp);
         setPos(style);
     };

package/dist/esm/components/multiselect/multiselect.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Check, ChevronDown, Search } from "lucide-react";
 import * as React from "react";
+import { placeFloating } from "../../core/index.js";
 import { useListboxKeyboard } from "../select/index.js";
 import { multiselectRecipe } from "./multiselect.recipe.js";
 const TONES = [
@@ -56,15 +57,17 @@ export function MultiSelect({ options, value: valueProp, defaultValue, onValueCh
             return;
         const rect = triggerRef.current?.getBoundingClientRect();
         if (rect) {
-            const flipUp = window.innerHeight - rect.bottom < 300;
-            setUp(flipUp);
-            setPos({
-                left: rect.left,
-                minWidth: rect.width,
-                ...(flipUp
-                    ? { bottom: window.innerHeight - rect.top + 4 }
-                    : { top: rect.bottom + 4 }),
+            // the popup can grow past the trigger (minWidth, not width), so which
+            // edge it is pinned to decides which way it grows — start, in whichever
+            // direction that is (#210)
+            const { style, up: flipUp } = placeFloating({
+                rect,
+                gap: 4,
+                flipBelow: 300,
+                anchor: triggerRef.current,
             });
+            setUp(flipUp);
+            setPos({ ...style, minWidth: rect.width });
         }
         setQuery("");
         setHighlight(0);

package/dist/esm/components/popover/popover.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
+import { placeFloating } from "../../core/index.js";
 import { popoverRecipe } from "./popover.recipe.js";
 /**
  * A generic anchored popover — the Menu/Select surface holding arbitrary
@@ -22,16 +23,13 @@ export function Popover({ trigger, children, align = "start", open: openProp, de
         const el = triggerRef.current;
         if (!el)
             return;
-        const rect = el.getBoundingClientRect();
-        const gap = 6;
-        const flipUp = window.innerHeight - rect.bottom < 280;
-        const style = flipUp
-            ? { bottom: window.innerHeight - rect.top + gap }
-            : { top: rect.bottom + gap };
-        if (align === "end")
-            style.right = window.innerWidth - rect.right;
-        else
-            style.left = rect.left;
+        const { style, up: flipUp } = placeFloating({
+            rect: el.getBoundingClientRect(),
+            align,
+            gap: 6,
+            flipBelow: 280,
+            anchor: el,
+        });
         setUp(flipUp);
         setPos(style);
     };

package/dist/esm/components/select/select.js

@@ -1,6 +1,7 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Check, ChevronDown, Search } from "lucide-react";
 import * as React from "react";
+import { placeFloating } from "../../core/index.js";
 import { useListboxKeyboard } from "./listbox-keyboard.js";
 import { selectRecipe } from "./select.recipe.js";
 function optionText(o) {
@@ -51,15 +52,17 @@ export function Select({ options, value, defaultValue, onValueChange, placeholde
             return;
         const rect = triggerRef.current?.getBoundingClientRect();
         if (rect) {
-            const flipUp = window.innerHeight - rect.bottom < 260;
-            setUp(flipUp);
-            setPos({
-                left: rect.left,
-                minWidth: rect.width,
-                ...(flipUp
-                    ? { bottom: window.innerHeight - rect.top + 4 }
-                    : { top: rect.bottom + 4 }),
+            // the popup can grow past the trigger (minWidth, not width), so which
+            // edge it is pinned to decides which way it grows — start, in whichever
+            // direction that is (#210)
+            const { style, up: flipUp } = placeFloating({
+                rect,
+                gap: 4,
+                flipBelow: 260,
+                anchor: triggerRef.current,
             });
+            setUp(flipUp);
+            setPos({ ...style, minWidth: rect.width });
         }
         setQuery("");
         const sel = options.findIndex((o) => o.value === selected);

package/dist/esm/components/wheelpicker/wheelpicker.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
+import { usePrefersReducedMotion } from "../../core/index.js";
 import { wheelpickerRecipe } from "./wheelpicker.recipe.js";
 const ITEM_HEIGHT = { small: 36, medium: 44 };
 /**
@@ -34,6 +35,11 @@ export function WheelPicker({ columns, value: valueProp, defaultValue, onValueCh
             setInternal(merged);
         onValueChange?.(merged);
     };
+    // CSS cannot reach this: `scroll-behavior` in a stylesheet does not override
+    // an explicit `behavior` passed to scrollTo, so the preference is read here
+    // and the two "smooth" call sites go through `glide` (#208).
+    const reduceMotion = usePrefersReducedMotion();
+    const glide = reduceMotion ? "auto" : "smooth";
     const scrollTo = React.useCallback((key, index, behavior) => {
         const el = refs.current.get(key);
         if (!el || index < 0)
@@ -71,7 +77,7 @@ export function WheelPicker({ columns, value: valueProp, defaultValue, onValueCh
             if (!opt)
                 return;
             commit(col.key, opt.value);
-            scrollTo(col.key, clamped, "smooth");
+            scrollTo(col.key, clamped, glide);
         };
         if (e.key === "ArrowDown")
             go(i + 1);
@@ -91,7 +97,7 @@ export function WheelPicker({ columns, value: valueProp, defaultValue, onValueCh
                             const selected = opt.value === value[col.key];
                             return (_jsx("div", { id: optionId(col.key, opt.value), role: "option", "aria-selected": selected, "data-selected": selected ? "" : undefined, className: "wheelpicker-item", onClick: () => {
                                     commit(col.key, opt.value);
-                                    scrollTo(col.key, col.options.indexOf(opt), "smooth");
+                                    scrollTo(col.key, col.options.indexOf(opt), glide);
                                 }, children: opt.label }, opt.value));
                         }) }, col.key))) }) })] }));
 }

package/dist/esm/core/index.js

@@ -1,5 +1,7 @@
 export { cx } from "./cx.js";
 export { defineRecipe } from "./define.js";
+export { placeFloating, } from "./place-floating.js";
 export { Primitive } from "./primitive.js";
 export { resolveRecipe } from "./resolve.js";
 export * from "./rtl.js";
+export { usePrefersReducedMotion } from "./use-prefers-reduced-motion.js";

package/dist/esm/core/place-floating.js

@@ -0,0 +1,52 @@
+/**
+ * Where a floating layer goes, in logical terms.
+ *
+ * `start` and `end` are inline edges, not left and right. `Menu` and `Popover`
+ * both took an `align` prop named that way and then wrote
+ * `align === "end" ? right : left` with no direction anywhere, so in an RTL
+ * document both were backwards and a layer near the viewport edge overflowed on
+ * the wrong side (#210).
+ *
+ * The direction is read from the anchor's computed style rather than from a
+ * prop, so an inherited `dir` on any ancestor is honoured without every call
+ * site having to thread it down.
+ *
+ * Physical `left`/`right` are deliberate in the OUTPUT: this positions a
+ * `position: fixed` layer against viewport coordinates, which are physical in
+ * both directions. What must be direction-aware is the CHOICE of edge, and
+ * that happens here, once. Converting the output to `inset-inline-start` would
+ * be the half-conversion #146 exists to prevent — the rect it is measured
+ * against would still be physical.
+ */
+/**
+ * The nearest declared direction. The `dir` attribute is checked first because
+ * it is how a document says this in practice and it is readable without a
+ * layout, then computed style for a direction set purely in CSS.
+ */
+function isRtl(anchor) {
+    if (!anchor || typeof window === "undefined")
+        return false;
+    const declared = anchor.closest("[dir]")?.getAttribute("dir");
+    if (declared)
+        return declared.toLowerCase() === "rtl";
+    try {
+        return window.getComputedStyle(anchor).direction === "rtl";
+    }
+    catch {
+        return false;
+    }
+}
+export function placeFloating({ rect, align = "start", gap, flipBelow, anchor, }) {
+    const rtl = isRtl(anchor);
+    const up = window.innerHeight - rect.bottom < flipBelow;
+    const style = up
+        ? { bottom: window.innerHeight - rect.top + gap }
+        : { top: rect.bottom + gap };
+    // start is the left edge in LTR and the right edge in RTL; end is the other
+    const toRight = align === "end" ? !rtl : rtl;
+    if (toRight)
+        style.right = window.innerWidth - rect.right;
+    else
+        style.left = rect.left;
+    return { style, up };
+}

package/dist/esm/core/use-prefers-reduced-motion.js

@@ -0,0 +1,31 @@
+import * as React from "react";
+const QUERY = "(prefers-reduced-motion: reduce)";
+const subscribe = (onChange) => {
+    if (typeof window === "undefined" || !window.matchMedia)
+        return () => { };
+    const mq = window.matchMedia(QUERY);
+    mq.addEventListener("change", onChange);
+    return () => mq.removeEventListener("change", onChange);
+};
+const getSnapshot = () => typeof window !== "undefined" && window.matchMedia
+    ? window.matchMedia(QUERY).matches
+    : false;
+/**
+ * Whether the user has asked for reduced motion, live.
+ *
+ * crisp's CSS carries a `@media (prefers-reduced-motion: reduce)` override in
+ * every animating recipe, and `bun run spec` checks it. That covers CSS.
+ * Motion driven from JavaScript — `scrollTo({ behavior: "smooth" })`,
+ * `element.animate()` — is invisible to a stylesheet: `scroll-behavior` in CSS
+ * does NOT override an explicit `behavior` argument. Those call sites have to
+ * read the preference here (#208).
+ *
+ * The server snapshot is `false` rather than "unknown" on purpose. It is the
+ * only value that keeps the markup identical on both sides, and a component
+ * using this must not put the result in its output for the same reason — the
+ * preference belongs in a handler or an effect, where it changes behaviour
+ * rather than HTML.
+ */
+export function usePrefersReducedMotion() {
+    return React.useSyncExternalStore(subscribe, getSnapshot, () => false);
+}

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

@@ -3,7 +3,8 @@ export type MenuProps = {
     /** The element that opens the menu (an icon button, etc.). */
     trigger: React.ReactElement;
     children: React.ReactNode;
-    /** Align the menu to the start (left) or end (right) of the trigger. */
+    /** Align the menu to the trigger's inline `start` or `end` edge — the left
+     *  edge in an LTR document, the right one in RTL. */
     align?: "start" | "end";
     /** Controlled open state. Omit to let Menu manage it (see defaultOpen). */
     open?: boolean;

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

@@ -4,7 +4,8 @@ export type PopoverProps = {
     trigger: React.ReactElement;
     /** Popover body. */
     children: React.ReactNode;
-    /** Align the popover to the trigger's left (`start`) or right (`end`) edge. */
+    /** Align the popover to the trigger's inline `start` or `end` edge — the
+     *  left edge in an LTR document, the right one in RTL. */
     align?: "start" | "end";
     /** Controlled open state. Omit to let the popover manage it. */
     /** Controlled open state. Omit to let Popover manage it (see defaultOpen). */

package/dist/types/core/index.d.ts

@@ -1,6 +1,8 @@
 export { cx } from "./cx";
 export { defineRecipe } from "./define";
+export { type FloatingAlign, type PlaceFloatingOptions, placeFloating, } from "./place-floating";
 export { Primitive } from "./primitive";
 export { resolveRecipe } from "./resolve";
 export * from "./rtl";
 export type * from "./types";
+export { usePrefersReducedMotion } from "./use-prefers-reduced-motion";

package/dist/types/core/place-floating.d.ts

@@ -0,0 +1,20 @@
+import type * as React from "react";
+export type FloatingAlign = "start" | "end";
+export type PlaceFloatingOptions = {
+    /** The trigger's box, from `getBoundingClientRect()`. */
+    rect: DOMRect;
+    /** Which of the trigger's INLINE edges the layer lines up with. */
+    align?: FloatingAlign;
+    /** Distance between the trigger and the layer. */
+    gap: number;
+    /** Flip above the trigger when there is less room below than this. */
+    flipBelow: number;
+    /** The element the layer belongs to; its computed direction decides sides. */
+    anchor?: Element | null;
+};
+export type PlacedFloating = {
+    style: React.CSSProperties;
+    /** True when the layer was flipped above the trigger. */
+    up: boolean;
+};
+export declare function placeFloating({ rect, align, gap, flipBelow, anchor, }: PlaceFloatingOptions): PlacedFloating;

package/dist/types/core/use-prefers-reduced-motion.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Whether the user has asked for reduced motion, live.
+ *
+ * crisp's CSS carries a `@media (prefers-reduced-motion: reduce)` override in
+ * every animating recipe, and `bun run spec` checks it. That covers CSS.
+ * Motion driven from JavaScript — `scrollTo({ behavior: "smooth" })`,
+ * `element.animate()` — is invisible to a stylesheet: `scroll-behavior` in CSS
+ * does NOT override an explicit `behavior` argument. Those call sites have to
+ * read the preference here (#208).
+ *
+ * The server snapshot is `false` rather than "unknown" on purpose. It is the
+ * only value that keeps the markup identical on both sides, and a component
+ * using this must not put the result in its output for the same reason — the
+ * preference belongs in a handler or an effect, where it changes behaviour
+ * rather than HTML.
+ */
+export declare function usePrefersReducedMotion(): boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crisp-ui-kit/crisp",
-  "version": "0.19.0",
+  "version": "0.20.0",
   "description": "A lean React design system, measured pixel-for-pixel from Attio.",
   "license": "MIT",
   "type": "module",