@crisp-ui-kit/crisp 0.9.1 → 0.10.0

package/dist/cjs/components/slider/index.js

@@ -0,0 +1,18 @@
+"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 __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 });
+__exportStar(require("./slider"), exports);
+__exportStar(require("./slider.recipe"), exports);

package/dist/cjs/components/slider/slider.js

@@ -0,0 +1,22 @@
+"use strict";
+"use client";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Slider = Slider;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_slider_1 = require("@seed-design/react-slider");
+const slider_recipe_1 = require("./slider.recipe");
+/** Reads the thumb count from the engine rather than re-deriving it from props. */
+function Thumbs() {
+    const { values } = (0, react_slider_1.useSliderContext)();
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: values.map((_, i) => ((0, jsx_runtime_1.jsx)(react_slider_1.SliderThumb
+        // biome-ignore lint/suspicious/noArrayIndexKey: thumbs are positional — the index IS the identity the engine addresses them by
+        , { thumbIndex: i, className: "slider-thumb" }, i))) }));
+}
+/**
+ * A range input, driven by seed-design's headless engine so the keyboard model,
+ * the pointer maths and multi-thumb constraints are theirs by construction.
+ * Pass one value for a simple slider, two for a range.
+ */
+function Slider({ className, ...props }) {
+    return ((0, jsx_runtime_1.jsx)(react_slider_1.SliderRoot, { ...props, className: (0, slider_recipe_1.sliderRecipe)({ className }), children: (0, jsx_runtime_1.jsxs)("span", { className: "slider-control", children: [(0, jsx_runtime_1.jsx)("span", { className: "slider-track", children: (0, jsx_runtime_1.jsx)(react_slider_1.SliderRange, { className: "slider-range" }) }), (0, jsx_runtime_1.jsx)(Thumbs, {})] }) }));
+}

package/dist/cjs/components/slider/slider.recipe.js

@@ -0,0 +1,70 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.sliderRecipe = void 0;
+const core_1 = require("../../core");
+const tokens_1 = require("../../tokens");
+// seed-design's slider, shape for shape, in crisp's colours.
+//
+// Attio ships no slider anywhere — Records, Reports, Settings and the record
+// pages contain no `input[type=range]` or `[role=slider]` — so there is nothing
+// of Attio's to measure. The GEOMETRY is therefore seed's own, read from
+// `@seed-design/css/recipes/slider.css`: a 26px control row, a 4px track on
+// `radius.full`, a 20px thumb whose visible disc is an `::after` that scales to
+// 1.2 while dragging, and a 2px focus ring offset 2px.
+//
+// Only the COLOUR roles are re-pointed at crisp's tokens:
+//   seed gray-400 track        -> bgNeutralWeak   (crisp's weak neutral fill)
+//   seed fg-neutral range      -> bgBrandSolid    (crisp fills with brand, as Progress does)
+//   seed bg-neutral-inverted   -> #fff + elevation.field (crisp's control disc, as Switch does)
+//
+// Position comes from the engine's own `--range-start`/`--range-end` and
+// `--thumb-position`/`--thumb-offset`, switched on the `data-dir` it stamps —
+// the same mechanism seed uses, rather than CSS direction inheritance.
+const config = (0, core_1.defineRecipe)({
+    name: "slider",
+    base: `
+    display: flex; flex-direction: column; align-items: stretch;
+    width: 100%; min-width: 0; gap: ${tokens_1.contract.space["0.5"]};
+    font-family: ${tokens_1.contract.font.sans}; user-select: none; touch-action: none;
+
+    & .slider-control { position: relative; height: 26px; display: flex; align-items: center; }
+
+    & .slider-track {
+      position: relative; flex-grow: 1; height: ${tokens_1.contract.space["1"]};
+      border-radius: ${tokens_1.contract.radius.full}; background: ${tokens_1.contract.bgNeutralWeak};
+      overflow: hidden;
+    }
+
+    & .slider-range { position: absolute; height: 100%; background: ${tokens_1.contract.bgBrandSolid}; }
+    & .slider-range[data-dir="ltr"] { left: var(--range-start); right: var(--range-end); }
+    & .slider-range[data-dir="rtl"] { right: var(--range-start); left: var(--range-end); }
+
+    & .slider-thumb {
+      position: absolute; top: 50%;
+      width: ${tokens_1.contract.space["5"]}; height: ${tokens_1.contract.space["5"]};
+      transform: translate(-50%, -50%);
+      border: none; background: none; padding: 0;
+    }
+    & .slider-thumb[data-dir="ltr"] { left: calc(var(--thumb-position) * 1% + var(--thumb-offset)); }
+    & .slider-thumb[data-dir="rtl"] { right: calc(var(--thumb-position) * 1% + var(--thumb-offset)); }
+    & .slider-thumb::after {
+      content: ""; position: absolute; inset: 0;
+      border-radius: ${tokens_1.contract.radius.full}; background: #fff; box-shadow: ${tokens_1.elevation.field};
+      outline: 2px solid transparent; outline-offset: 2px;
+      transition: transform .2s ease, outline-color .2s ease;
+      cursor: grab;
+    }
+    & .slider-thumb[data-thumb-dragging]::after { transform: scale(1.2); cursor: grabbing; }
+    & .slider-thumb:focus { outline: none; }
+    & .slider-thumb:focus-visible::after { outline-color: ${tokens_1.contract.strokeFocusRing}; }
+
+    &[data-disabled] { cursor: not-allowed; }
+    &[data-disabled] .slider-range { background: ${tokens_1.contract.fgDisabled}; }
+    &[data-disabled] .slider-thumb::after { cursor: not-allowed; }
+  `,
+    variants: {},
+    defaultVariants: {},
+    compoundVariants: [],
+});
+exports.sliderRecipe = Object.assign((0, core_1.resolveRecipe)(config), { config });
+exports.default = config;

package/dist/cjs/index.js

@@ -53,6 +53,7 @@ __exportStar(require("./components/resizablepanel"), exports);
 __exportStar(require("./components/segmented"), exports);
 __exportStar(require("./components/select"), exports);
 __exportStar(require("./components/skeleton"), exports);
+__exportStar(require("./components/slider"), exports);
 __exportStar(require("./components/spinner"), exports);
 __exportStar(require("./components/stagebar"), exports);
 __exportStar(require("./components/statcard"), exports);

package/dist/esm/components/slider/index.js

@@ -0,0 +1,2 @@
+export * from "./slider.js";
+export * from "./slider.recipe.js";

package/dist/esm/components/slider/slider.js

@@ -0,0 +1,19 @@
+"use client";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { SliderRange, SliderRoot, SliderThumb, useSliderContext, } from "@seed-design/react-slider";
+import { sliderRecipe } from "./slider.recipe.js";
+/** Reads the thumb count from the engine rather than re-deriving it from props. */
+function Thumbs() {
+    const { values } = useSliderContext();
+    return (_jsx(_Fragment, { children: values.map((_, i) => (_jsx(SliderThumb
+        // biome-ignore lint/suspicious/noArrayIndexKey: thumbs are positional — the index IS the identity the engine addresses them by
+        , { thumbIndex: i, className: "slider-thumb" }, i))) }));
+}
+/**
+ * A range input, driven by seed-design's headless engine so the keyboard model,
+ * the pointer maths and multi-thumb constraints are theirs by construction.
+ * Pass one value for a simple slider, two for a range.
+ */
+export function Slider({ className, ...props }) {
+    return (_jsx(SliderRoot, { ...props, className: sliderRecipe({ className }), children: _jsxs("span", { className: "slider-control", children: [_jsx("span", { className: "slider-track", children: _jsx(SliderRange, { className: "slider-range" }) }), _jsx(Thumbs, {})] }) }));
+}

package/dist/esm/components/slider/slider.recipe.js

@@ -0,0 +1,67 @@
+import { defineRecipe, resolveRecipe } from "../../core/index.js";
+import { contract as c, elevation as e } from "../../tokens/index.js";
+// seed-design's slider, shape for shape, in crisp's colours.
+//
+// Attio ships no slider anywhere — Records, Reports, Settings and the record
+// pages contain no `input[type=range]` or `[role=slider]` — so there is nothing
+// of Attio's to measure. The GEOMETRY is therefore seed's own, read from
+// `@seed-design/css/recipes/slider.css`: a 26px control row, a 4px track on
+// `radius.full`, a 20px thumb whose visible disc is an `::after` that scales to
+// 1.2 while dragging, and a 2px focus ring offset 2px.
+//
+// Only the COLOUR roles are re-pointed at crisp's tokens:
+//   seed gray-400 track        -> bgNeutralWeak   (crisp's weak neutral fill)
+//   seed fg-neutral range      -> bgBrandSolid    (crisp fills with brand, as Progress does)
+//   seed bg-neutral-inverted   -> #fff + elevation.field (crisp's control disc, as Switch does)
+//
+// Position comes from the engine's own `--range-start`/`--range-end` and
+// `--thumb-position`/`--thumb-offset`, switched on the `data-dir` it stamps —
+// the same mechanism seed uses, rather than CSS direction inheritance.
+const config = defineRecipe({
+    name: "slider",
+    base: `
+    display: flex; flex-direction: column; align-items: stretch;
+    width: 100%; min-width: 0; gap: ${c.space["0.5"]};
+    font-family: ${c.font.sans}; user-select: none; touch-action: none;
+
+    & .slider-control { position: relative; height: 26px; display: flex; align-items: center; }
+
+    & .slider-track {
+      position: relative; flex-grow: 1; height: ${c.space["1"]};
+      border-radius: ${c.radius.full}; background: ${c.bgNeutralWeak};
+      overflow: hidden;
+    }
+
+    & .slider-range { position: absolute; height: 100%; background: ${c.bgBrandSolid}; }
+    & .slider-range[data-dir="ltr"] { left: var(--range-start); right: var(--range-end); }
+    & .slider-range[data-dir="rtl"] { right: var(--range-start); left: var(--range-end); }
+
+    & .slider-thumb {
+      position: absolute; top: 50%;
+      width: ${c.space["5"]}; height: ${c.space["5"]};
+      transform: translate(-50%, -50%);
+      border: none; background: none; padding: 0;
+    }
+    & .slider-thumb[data-dir="ltr"] { left: calc(var(--thumb-position) * 1% + var(--thumb-offset)); }
+    & .slider-thumb[data-dir="rtl"] { right: calc(var(--thumb-position) * 1% + var(--thumb-offset)); }
+    & .slider-thumb::after {
+      content: ""; position: absolute; inset: 0;
+      border-radius: ${c.radius.full}; background: #fff; box-shadow: ${e.field};
+      outline: 2px solid transparent; outline-offset: 2px;
+      transition: transform .2s ease, outline-color .2s ease;
+      cursor: grab;
+    }
+    & .slider-thumb[data-thumb-dragging]::after { transform: scale(1.2); cursor: grabbing; }
+    & .slider-thumb:focus { outline: none; }
+    & .slider-thumb:focus-visible::after { outline-color: ${c.strokeFocusRing}; }
+
+    &[data-disabled] { cursor: not-allowed; }
+    &[data-disabled] .slider-range { background: ${c.fgDisabled}; }
+    &[data-disabled] .slider-thumb::after { cursor: not-allowed; }
+  `,
+    variants: {},
+    defaultVariants: {},
+    compoundVariants: [],
+});
+export const sliderRecipe = Object.assign(resolveRecipe(config), { config });
+export default config;

package/dist/esm/index.js

@@ -37,6 +37,7 @@ export * from "./components/resizablepanel/index.js";
 export * from "./components/segmented/index.js";
 export * from "./components/select/index.js";
 export * from "./components/skeleton/index.js";
+export * from "./components/slider/index.js";
 export * from "./components/spinner/index.js";
 export * from "./components/stagebar/index.js";
 export * from "./components/statcard/index.js";

package/dist/slider.css

@@ -0,0 +1,50 @@
+.slider {
+  
+    display: flex; flex-direction: column; align-items: stretch;
+    width: 100%; min-width: 0; gap: var(--space-0-5);
+    font-family: var(--font-sans); user-select: none; touch-action: none;
+
+    & .slider-control { position: relative; height: 26px; display: flex; align-items: center; }
+
+    & .slider-track {
+      position: relative; flex-grow: 1; height: var(--space-1);
+      border-radius: var(--radius-full); background: var(--bg-neutral-weak);
+      overflow: hidden;
+    }
+
+    & .slider-range { position: absolute; height: 100%; background: var(--bg-brand-solid); }
+    & .slider-range[data-dir="ltr"] { left: var(--range-start); right: var(--range-end); }
+    & .slider-range[data-dir="rtl"] { right: var(--range-start); left: var(--range-end); }
+
+    & .slider-thumb {
+      position: absolute; top: 50%;
+      width: var(--space-5); height: var(--space-5);
+      transform: translate(-50%, -50%);
+      border: none; background: none; padding: 0;
+    }
+    & .slider-thumb[data-dir="ltr"] { left: calc(var(--thumb-position) * 1% + var(--thumb-offset)); }
+    & .slider-thumb[data-dir="rtl"] { right: calc(var(--thumb-position) * 1% + var(--thumb-offset)); }
+    & .slider-thumb::after {
+      content: ""; position: absolute; inset: 0;
+      border-radius: var(--radius-full); background: #fff; box-shadow: inset 0 0 0 1px var(--ring-neutral), 0 0 2px rgba(28,40,64,0.18), 0 1px 3px rgba(0,0,0,0.04);
+      outline: 2px solid transparent; outline-offset: 2px;
+      transition: transform .2s ease, outline-color .2s ease;
+      cursor: grab;
+    }
+    & .slider-thumb[data-thumb-dragging]::after { transform: scale(1.2); cursor: grabbing; }
+    & .slider-thumb:focus { outline: none; }
+    & .slider-thumb:focus-visible::after { outline-color: var(--stroke-focus-ring); }
+
+    &[data-disabled] { cursor: not-allowed; }
+    &[data-disabled] .slider-range { background: var(--fg-disabled); }
+    &[data-disabled] .slider-thumb::after { cursor: not-allowed; }
+  
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .slider, .slider * {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}

package/dist/slider.d.ts

@@ -0,0 +1,7 @@
+import type { RecipeFn } from "../core/types";
+
+export interface SliderVariants {
+
+}
+
+export declare const sliderRecipe: RecipeFn<{  }>;

package/dist/styles.css

@@ -1365,6 +1365,57 @@
   }
 }
 
+.slider {
+  
+    display: flex; flex-direction: column; align-items: stretch;
+    width: 100%; min-width: 0; gap: var(--space-0-5);
+    font-family: var(--font-sans); user-select: none; touch-action: none;
+
+    & .slider-control { position: relative; height: 26px; display: flex; align-items: center; }
+
+    & .slider-track {
+      position: relative; flex-grow: 1; height: var(--space-1);
+      border-radius: var(--radius-full); background: var(--bg-neutral-weak);
+      overflow: hidden;
+    }
+
+    & .slider-range { position: absolute; height: 100%; background: var(--bg-brand-solid); }
+    & .slider-range[data-dir="ltr"] { left: var(--range-start); right: var(--range-end); }
+    & .slider-range[data-dir="rtl"] { right: var(--range-start); left: var(--range-end); }
+
+    & .slider-thumb {
+      position: absolute; top: 50%;
+      width: var(--space-5); height: var(--space-5);
+      transform: translate(-50%, -50%);
+      border: none; background: none; padding: 0;
+    }
+    & .slider-thumb[data-dir="ltr"] { left: calc(var(--thumb-position) * 1% + var(--thumb-offset)); }
+    & .slider-thumb[data-dir="rtl"] { right: calc(var(--thumb-position) * 1% + var(--thumb-offset)); }
+    & .slider-thumb::after {
+      content: ""; position: absolute; inset: 0;
+      border-radius: var(--radius-full); background: #fff; box-shadow: inset 0 0 0 1px var(--ring-neutral), 0 0 2px rgba(28,40,64,0.18), 0 1px 3px rgba(0,0,0,0.04);
+      outline: 2px solid transparent; outline-offset: 2px;
+      transition: transform .2s ease, outline-color .2s ease;
+      cursor: grab;
+    }
+    & .slider-thumb[data-thumb-dragging]::after { transform: scale(1.2); cursor: grabbing; }
+    & .slider-thumb:focus { outline: none; }
+    & .slider-thumb:focus-visible::after { outline-color: var(--stroke-focus-ring); }
+
+    &[data-disabled] { cursor: not-allowed; }
+    &[data-disabled] .slider-range { background: var(--fg-disabled); }
+    &[data-disabled] .slider-thumb::after { cursor: not-allowed; }
+  
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .slider, .slider * {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}
+
 @keyframes crisp-spin { to { transform: rotate(360deg); } }
 .spinner {
   display: inline-block; box-sizing: border-box; width: 16px; height: 16px; border-radius: var(--radius-full); border: 2px solid color-mix(in srgb, var(--fg-primary) 15%, transparent); border-top-color: var(--fg-muted); animation: crisp-spin 0.6s linear infinite;

package/dist/types/components/slider/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./slider";
+export * from "./slider.recipe";

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

@@ -0,0 +1,8 @@
+import { type SliderRootProps } from "@seed-design/react-slider";
+export type SliderProps = SliderRootProps;
+/**
+ * A range input, driven by seed-design's headless engine so the keyboard model,
+ * the pointer maths and multi-thumb constraints are theirs by construction.
+ * Pass one value for a simple slider, two for a range.
+ */
+export declare function Slider({ className, ...props }: SliderProps): import("react").JSX.Element;

package/dist/types/components/slider/slider.recipe.d.ts

@@ -0,0 +1,5 @@
+declare const config: import("../..").RecipeConfig<{}>;
+export declare const sliderRecipe: import("../..").RecipeFn<{}> & {
+    config: import("../..").RecipeConfig<{}>;
+};
+export default config;

package/dist/types/index.d.ts

@@ -33,6 +33,7 @@ export * from "./components/resizablepanel";
 export * from "./components/segmented";
 export * from "./components/select";
 export * from "./components/skeleton";
+export * from "./components/slider";
 export * from "./components/spinner";
 export * from "./components/stagebar";
 export * from "./components/statcard";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crisp-ui-kit/crisp",
-  "version": "0.9.1",
+  "version": "0.10.0",
   "description": "A lean React design system, measured pixel-for-pixel from Attio.",
   "license": "MIT",
   "type": "module",
@@ -207,6 +207,11 @@
       "import": "./dist/esm/components/skeleton/index.js",
       "require": "./dist/cjs/components/skeleton/index.js"
     },
+    "./slider": {
+      "types": "./dist/types/components/slider/index.d.ts",
+      "import": "./dist/esm/components/slider/index.js",
+      "require": "./dist/cjs/components/slider/index.js"
+    },
     "./spinner": {
       "types": "./dist/types/components/spinner/index.d.ts",
       "import": "./dist/esm/components/spinner/index.js",
@@ -418,6 +423,7 @@
     "@seed-design/dom-utils": "^2.1.0",
     "@seed-design/react-date-picker": "1.2.0",
     "@seed-design/react-file-upload": "1.0.1",
+    "@seed-design/react-slider": "2.0.1",
     "@seed-design/react-time-picker": "1.0.0",
     "@zag-js/combobox": "^1.43.3",
     "@zag-js/dialog": "^1.43.3",