@crisp-ui-kit/crisp 0.19.0 → 0.19.1

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,7 +14,7 @@ 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.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");
@@ -24,3 +24,5 @@ Object.defineProperty(exports, "Primitive", { enumerable: true, get: function ()
 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/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/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

@@ -3,3 +3,4 @@ export { defineRecipe } from "./define.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/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/core/index.d.ts

@@ -4,3 +4,4 @@ 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/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.19.1",
   "description": "A lean React design system, measured pixel-for-pixel from Attio.",
   "license": "MIT",
   "type": "module",