@crisp-ui-kit/crisp 0.9.0 → 0.10.0

package/dist/appshell.css

@@ -10,6 +10,8 @@
     & .appshell-expand { position: absolute; top: var(--space-2); inset-inline-start: var(--space-2); z-index: 6; display: inline-flex; align-items: center; justify-content: center; width: var(--size-row); height: var(--size-row); padding: 0; border: none; border-radius: var(--radius-md); box-shadow: inset 0 0 0 1px var(--border-subtle); background: var(--bg-surface); color: var(--fg-muted); font-family: inherit; cursor: pointer; transition: background-color .12s; }
     & .appshell-expand:hover { background: var(--bg-raised); color: var(--fg-primary); }
   
+    [dir="rtl"] & [data-rtl-flip] { transform: scaleX(-1); }
+  
 }
 
 @media (prefers-reduced-motion: reduce) {

package/dist/breadcrumb.css

@@ -6,4 +6,6 @@
     & button.breadcrumb-item { border: none; background: none; font: inherit; cursor: pointer; }
     & .breadcrumb-item[aria-current] { color: var(--fg-primary); font-weight: var(--weight-medium); }
     & .breadcrumb-sep { flex-shrink: 0; color: color-mix(in srgb, var(--fg-primary) 28%, transparent); }
+    [dir="rtl"] & [data-rtl-flip] { transform: scaleX(-1); }
+  
 }

package/dist/cjs/components/breadcrumb/breadcrumb.js

@@ -43,7 +43,7 @@ const breadcrumb_recipe_1 = require("./breadcrumb.recipe");
  * marked `aria-current="page"`; earlier items render as links or buttons.
  */
 function Breadcrumb({ items, separator, "aria-label": ariaLabel = "Breadcrumb", className, ...rest }) {
-    const sep = separator ?? ((0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { size: 14, strokeWidth: 1.75, "aria-hidden": "true" }));
+    const sep = separator ?? ((0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { "data-rtl-flip": "", size: 14, strokeWidth: 1.75, "aria-hidden": "true" }));
     return ((0, jsx_runtime_1.jsx)("nav", { "aria-label": ariaLabel, className: (0, breadcrumb_recipe_1.breadcrumbRecipe)({ className }), ...rest, children: items.map((item, i) => {
             const last = i === items.length - 1;
             const content = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [item.icon, item.label] }));

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

@@ -12,7 +12,9 @@ const config = (0, core_1.defineRecipe)({
     & a.breadcrumb-item:hover, & button.breadcrumb-item:hover { color: ${tokens_1.contract.fgPrimary}; background: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 5%, transparent); }
     & button.breadcrumb-item { border: none; background: none; font: inherit; cursor: pointer; }
     & .breadcrumb-item[aria-current] { color: ${tokens_1.contract.fgPrimary}; font-weight: ${tokens_1.contract.weight.medium}; }
-    & .breadcrumb-sep { flex-shrink: 0; color: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 28%, transparent); }`,
+    & .breadcrumb-sep { flex-shrink: 0; color: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 28%, transparent); }
+    ${core_1.rtlFlipCss}
+  `,
     variants: {},
     defaultVariants: {},
     compoundVariants: [],

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/core/index.js

@@ -1,4 +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 });
 exports.resolveRecipe = exports.Primitive = exports.defineRecipe = exports.cx = void 0;
 var cx_1 = require("./cx");
@@ -9,3 +23,4 @@ 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);

package/dist/cjs/core/rtl.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.rtlFlipCss = void 0;
+/**
+ * Mirroring for direction-bearing icons.
+ *
+ * A chevron or arrow that means "back", "next", "toward the start" or "open"
+ * points the wrong way under RTL, and unlike spacing or alignment it cannot be
+ * fixed with a logical property: these are `lucide-react` nodes, static SVG
+ * paths with no direction of their own.
+ *
+ * Mark the icons that carry a direction with `data-rtl-flip` and include this
+ * snippet in the recipe. Icons whose meaning is NOT directional — a downward
+ * disclosure chevron, a search glass, a check — must be left unmarked: flipping
+ * them is a regression, not a fix.
+ */
+exports.rtlFlipCss = `[dir="rtl"] & [data-rtl-flip] { transform: scaleX(-1); }`;

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/cjs/product/appshell/appshell.js

@@ -99,6 +99,6 @@ function AppShell({ sidebar, children, width: widthProp, defaultWidth = 275, onW
     return ((0, jsx_runtime_1.jsxs)("div", { className: (0, appshell_recipe_1.appshellRecipe)({ className }), ...rest, children: [(0, jsx_runtime_1.jsxs)("div", { className: "appshell-side", "data-collapsed": collapsed ? "" : undefined, style: {
                     width: collapsed ? 0 : width,
                     transition: dragging ? "none" : "width .14s ease",
-                }, children: [(0, jsx_runtime_1.jsx)("div", { className: "appshell-side-inner", style: { width }, children: sidebar(toggleCollapse) }), !collapsed && ((0, jsx_runtime_1.jsx)("div", { className: "appshell-resize", "data-dragging": dragging ? "" : undefined, "aria-hidden": "true", onPointerDown: startResize }))] }), (0, jsx_runtime_1.jsxs)("div", { className: "appshell-main", children: [collapsed && ((0, jsx_runtime_1.jsx)("button", { type: "button", className: "appshell-expand", "aria-label": expandLabel, onClick: () => setCollapsed(false), children: (0, jsx_runtime_1.jsx)(lucide_react_1.PanelLeft, { size: 15, strokeWidth: 1.75 }) })), children] })] }));
+                }, children: [(0, jsx_runtime_1.jsx)("div", { className: "appshell-side-inner", style: { width }, children: sidebar(toggleCollapse) }), !collapsed && ((0, jsx_runtime_1.jsx)("div", { className: "appshell-resize", "data-dragging": dragging ? "" : undefined, "aria-hidden": "true", onPointerDown: startResize }))] }), (0, jsx_runtime_1.jsxs)("div", { className: "appshell-main", children: [collapsed && ((0, jsx_runtime_1.jsx)("button", { type: "button", className: "appshell-expand", "aria-label": expandLabel, onClick: () => setCollapsed(false), children: (0, jsx_runtime_1.jsx)(lucide_react_1.PanelLeft, { "data-rtl-flip": "", size: 15, strokeWidth: 1.75 }) })), children] })] }));
 }
 AppShell.displayName = "AppShell";

package/dist/cjs/product/appshell/appshell.recipe.js

@@ -18,6 +18,8 @@ const config = (0, core_1.defineRecipe)({
     & .appshell-main { position: relative; flex: 1; min-width: 0; display: flex; flex-direction: column; overflow: hidden; }
     & .appshell-expand { position: absolute; top: ${tokens_1.contract.space["2"]}; inset-inline-start: ${tokens_1.contract.space["2"]}; z-index: 6; display: inline-flex; align-items: center; justify-content: center; width: ${tokens_1.contract.size.row}; height: ${tokens_1.contract.size.row}; padding: 0; border: none; border-radius: ${tokens_1.contract.radius.md}; box-shadow: inset 0 0 0 1px ${tokens_1.contract.borderSubtle}; background: ${tokens_1.contract.bgSurface}; color: ${tokens_1.contract.fgMuted}; font-family: inherit; cursor: pointer; transition: background-color .12s; }
     & .appshell-expand:hover { background: ${tokens_1.contract.bgRaised}; color: ${tokens_1.contract.fgPrimary}; }
+  
+    ${core_1.rtlFlipCss}
   `,
     variants: {},
     defaultVariants: {},

package/dist/cjs/product/recordstable/recordstable.js

@@ -984,7 +984,7 @@ function RecordsTable({ labels, columns: columnsProp = exports.defaultColumns, r
                                                             }
                                                             : undefined, onDragEnd: () => setDragCol(null), onClick: (e) => openColumnMenu(col.key, e.currentTarget), children: [Icon ? (0, jsx_runtime_1.jsx)(Icon, { size: 14, strokeWidth: 1.75 }) : null, (0, jsx_runtime_1.jsx)("span", { className: "recordstable-th-label", children: col.label }), (0, jsx_runtime_1.jsx)("span", { className: "recordstable-sort", children: (0, jsx_runtime_1.jsx)("svg", { width: "12", height: "12", viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "1.5", "aria-hidden": "true", children: (0, jsx_runtime_1.jsx)("path", { d: "m4 6 4 4 4-4" }) }) })] })), openMenu === `col:${col.key}` &&
                                                         rootRef.current &&
-                                                        (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsxs)("div", { ref: menuRef, className: "recordstable-menu recordstable-menu--fixed recordstable-menu--hdr", role: "menu", "aria-label": `${col.label} column`, style: menuPos ?? undefined, onKeyDown: onMenuKeyDown, children: [(0, jsx_runtime_1.jsxs)("button", { type: "button", className: "recordstable-menu-item", role: "menuitem", tabIndex: -1, onClick: () => sortBy(col.key, "asc"), children: [(0, jsx_runtime_1.jsx)(lucide_react_1.ArrowUp, { size: 15, strokeWidth: 1.75 }), t.sortAscending] }), (0, jsx_runtime_1.jsxs)("button", { type: "button", className: "recordstable-menu-item", role: "menuitem", tabIndex: -1, onClick: () => sortBy(col.key, "desc"), children: [(0, jsx_runtime_1.jsx)(lucide_react_1.ArrowDown, { size: 15, strokeWidth: 1.75 }), t.sortDescending] }), (0, jsx_runtime_1.jsxs)("button", { type: "button", className: "recordstable-menu-item", role: "menuitem", tabIndex: -1, disabled: i <= 1, onClick: () => moveColumn(col.key, -1), children: [(0, jsx_runtime_1.jsx)(lucide_react_1.ArrowLeft, { size: 15, strokeWidth: 1.75 }), t.moveLeft] }), (0, jsx_runtime_1.jsxs)("button", { type: "button", className: "recordstable-menu-item", role: "menuitem", tabIndex: -1, disabled: i === 0 || i >= cols.length - 1, onClick: () => moveColumn(col.key, 1), children: [(0, jsx_runtime_1.jsx)(lucide_react_1.ArrowRight, { size: 15, strokeWidth: 1.75 }), t.moveRight] }), (0, jsx_runtime_1.jsx)("div", { className: "recordstable-menu-sep" }), (0, jsx_runtime_1.jsxs)("button", { type: "button", className: "recordstable-menu-item", role: "menuitem", tabIndex: -1, onClick: () => {
+                                                        (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsxs)("div", { ref: menuRef, className: "recordstable-menu recordstable-menu--fixed recordstable-menu--hdr", role: "menu", "aria-label": `${col.label} column`, style: menuPos ?? undefined, onKeyDown: onMenuKeyDown, children: [(0, jsx_runtime_1.jsxs)("button", { type: "button", className: "recordstable-menu-item", role: "menuitem", tabIndex: -1, onClick: () => sortBy(col.key, "asc"), children: [(0, jsx_runtime_1.jsx)(lucide_react_1.ArrowUp, { size: 15, strokeWidth: 1.75 }), t.sortAscending] }), (0, jsx_runtime_1.jsxs)("button", { type: "button", className: "recordstable-menu-item", role: "menuitem", tabIndex: -1, onClick: () => sortBy(col.key, "desc"), children: [(0, jsx_runtime_1.jsx)(lucide_react_1.ArrowDown, { size: 15, strokeWidth: 1.75 }), t.sortDescending] }), (0, jsx_runtime_1.jsxs)("button", { type: "button", className: "recordstable-menu-item", role: "menuitem", tabIndex: -1, disabled: i <= 1, onClick: () => moveColumn(col.key, -1), children: [(0, jsx_runtime_1.jsx)(lucide_react_1.ArrowLeft, { "data-rtl-flip": "", size: 15, strokeWidth: 1.75 }), t.moveLeft] }), (0, jsx_runtime_1.jsxs)("button", { type: "button", className: "recordstable-menu-item", role: "menuitem", tabIndex: -1, disabled: i === 0 || i >= cols.length - 1, onClick: () => moveColumn(col.key, 1), children: [(0, jsx_runtime_1.jsx)(lucide_react_1.ArrowRight, { "data-rtl-flip": "", size: 15, strokeWidth: 1.75 }), t.moveRight] }), (0, jsx_runtime_1.jsx)("div", { className: "recordstable-menu-sep" }), (0, jsx_runtime_1.jsxs)("button", { type: "button", className: "recordstable-menu-item", role: "menuitem", tabIndex: -1, onClick: () => {
                                                                         setRenamingCol(col.key);
                                                                         setOpenMenu(null);
                                                                     }, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Pencil, { size: 15, strokeWidth: 1.75 }), t.editColumnLabel] }), cols.length > 1 && ((0, jsx_runtime_1.jsxs)("button", { type: "button", className: "recordstable-menu-item", role: "menuitem", tabIndex: -1, onClick: () => hideColumn(col.key), children: [(0, jsx_runtime_1.jsx)(lucide_react_1.EyeOff, { size: 15, strokeWidth: 1.75 }), t.hideFromView] }))] }), rootRef.current), (0, jsx_runtime_1.jsx)("span", { className: "recordstable-resize", "aria-hidden": "true", onPointerDown: (e) => {
@@ -1025,7 +1025,7 @@ function RecordsTable({ labels, columns: columnsProp = exports.defaultColumns, r
                                                             : undefined, avatarTone: avatarTone })), i === 0 && onOpenRecord && !isEditing && ((0, jsx_runtime_1.jsx)("button", { type: "button", className: "recordstable-open", "aria-label": `Open ${cellText(col, row)}`, onClick: (e) => {
                                                             e.stopPropagation();
                                                             onOpenRecord(row);
-                                                        }, children: (0, jsx_runtime_1.jsx)(lucide_react_1.ArrowUpRight, { size: 15, strokeWidth: 1.75 }) }))] }, col.key));
+                                                        }, children: (0, jsx_runtime_1.jsx)(lucide_react_1.ArrowUpRight, { "data-rtl-flip": "", size: 15, strokeWidth: 1.75 }) }))] }, col.key));
                                         }), (0, jsx_runtime_1.jsx)("td", { className: "recordstable-td recordstable-addcol" })] }, row.id))) }), (0, jsx_runtime_1.jsx)("tfoot", { children: (0, jsx_runtime_1.jsxs)("tr", { children: [(0, jsx_runtime_1.jsx)("td", { className: "recordstable-sum recordstable-col-check" }), cols.map((col, i) => {
                                             const a = agg[col.key] ?? "none";
                                             const res = summarize(col, a, visibleRows);

package/dist/cjs/product/recordstable/recordstable.recipe.js

@@ -145,6 +145,8 @@ ${(0, tabletoolbar_chrome_1.toolbarChromeBody)("recordstable")}
     & .recordstable-bulk-sep { width: 1px; height: 20px; margin: 0 ${tokens_1.contract.space["0.5"]}; background: ${tokens_1.contract.borderSubtle}; }
     & .recordstable-bulk-close { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border: none; border-radius: ${tokens_1.contract.radius.md}; background: transparent; color: ${tokens_1.contract.fgMuted}; cursor: pointer; }
     & .recordstable-bulk-close:hover { background: ${tokens_1.contract.bgRaised}; color: ${tokens_1.contract.fgPrimary}; }
+  
+    ${core_1.rtlFlipCss}
   `,
     variants: {},
     defaultVariants: {},

package/dist/cjs/product/settingsshell/settingsshell.js

@@ -54,6 +54,6 @@ function SettingsShell({ title = "Settings", onBack, groups, activeItem, onSelec
         }))
             .filter((g) => g.items.length > 0)
         : groups;
-    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, settingsshell_recipe_1.settingsshellRecipe)({ className }), ...rest, children: [(0, jsx_runtime_1.jsxs)("nav", { className: "settingsshell-nav", "aria-label": navLabel, children: [(0, jsx_runtime_1.jsxs)("button", { type: "button", className: "settingsshell-back", onClick: onBack, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.ChevronLeft, { size: 16, strokeWidth: 2 }), title] }), searchable && ((0, jsx_runtime_1.jsxs)("div", { className: "settingsshell-search", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Search, { size: 15, strokeWidth: 1.75 }), (0, jsx_runtime_1.jsx)("input", { type: "text", placeholder: searchPlaceholder, "aria-label": searchPlaceholder, value: query, onChange: (e) => setQuery(e.target.value) })] })), (0, jsx_runtime_1.jsx)("div", { className: "settingsshell-groups", children: filtered.length === 0 ? ((0, jsx_runtime_1.jsx)("div", { className: "settingsshell-empty", children: emptyLabel })) : (filtered.map((g, gi) => ((0, jsx_runtime_1.jsxs)("div", { className: "settingsshell-group", children: [g.label != null && ((0, jsx_runtime_1.jsx)("div", { className: "settingsshell-group-label", children: g.label })), g.items.map((it) => ((0, jsx_runtime_1.jsxs)("button", { type: "button", className: "settingsshell-item", "aria-current": it.id === activeItem ? "page" : undefined, "data-active": it.id === activeItem ? "" : undefined, onClick: () => onSelect(it.id), children: [it.icon, (0, jsx_runtime_1.jsx)("span", { className: "settingsshell-item-label", children: it.label })] }, it.id)))] }, gi)))) })] }), (0, jsx_runtime_1.jsx)("div", { className: "settingsshell-content", children: children })] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, settingsshell_recipe_1.settingsshellRecipe)({ className }), ...rest, children: [(0, jsx_runtime_1.jsxs)("nav", { className: "settingsshell-nav", "aria-label": navLabel, children: [(0, jsx_runtime_1.jsxs)("button", { type: "button", className: "settingsshell-back", onClick: onBack, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.ChevronLeft, { "data-rtl-flip": "", size: 16, strokeWidth: 2 }), title] }), searchable && ((0, jsx_runtime_1.jsxs)("div", { className: "settingsshell-search", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Search, { size: 15, strokeWidth: 1.75 }), (0, jsx_runtime_1.jsx)("input", { type: "text", placeholder: searchPlaceholder, "aria-label": searchPlaceholder, value: query, onChange: (e) => setQuery(e.target.value) })] })), (0, jsx_runtime_1.jsx)("div", { className: "settingsshell-groups", children: filtered.length === 0 ? ((0, jsx_runtime_1.jsx)("div", { className: "settingsshell-empty", children: emptyLabel })) : (filtered.map((g, gi) => ((0, jsx_runtime_1.jsxs)("div", { className: "settingsshell-group", children: [g.label != null && ((0, jsx_runtime_1.jsx)("div", { className: "settingsshell-group-label", children: g.label })), g.items.map((it) => ((0, jsx_runtime_1.jsxs)("button", { type: "button", className: "settingsshell-item", "aria-current": it.id === activeItem ? "page" : undefined, "data-active": it.id === activeItem ? "" : undefined, onClick: () => onSelect(it.id), children: [it.icon, (0, jsx_runtime_1.jsx)("span", { className: "settingsshell-item-label", children: it.label })] }, it.id)))] }, gi)))) })] }), (0, jsx_runtime_1.jsx)("div", { className: "settingsshell-content", children: children })] }));
 }
 SettingsShell.displayName = "SettingsShell";

package/dist/cjs/product/settingsshell/settingsshell.recipe.js

@@ -37,7 +37,9 @@ const config = (0, core_1.defineRecipe)({
     & .settingsshell-item[data-active] svg { color: ${tokens_1.contract.fgPrimary}; }
     & .settingsshell-empty { padding: ${tokens_1.contract.space["3"]} ${tokens_1.contract.space["2"]}; font-size: ${tokens_1.contract.text.md}; color: ${tokens_1.contract.fgMuted}; }
 
-    & .settingsshell-content { flex: 1; min-width: 0; min-height: 0; overflow-y: auto; padding: ${tokens_1.contract.space["6"]} ${tokens_1.contract.space["8"]}; }`,
+    & .settingsshell-content { flex: 1; min-width: 0; min-height: 0; overflow-y: auto; padding: ${tokens_1.contract.space["6"]} ${tokens_1.contract.space["8"]}; }
+    ${core_1.rtlFlipCss}
+  `,
     variants: {},
     defaultVariants: {},
     compoundVariants: [],

package/dist/esm/components/breadcrumb/breadcrumb.js

@@ -7,7 +7,7 @@ import { breadcrumbRecipe } from "./breadcrumb.recipe.js";
  * marked `aria-current="page"`; earlier items render as links or buttons.
  */
 export function Breadcrumb({ items, separator, "aria-label": ariaLabel = "Breadcrumb", className, ...rest }) {
-    const sep = separator ?? (_jsx(ChevronRight, { size: 14, strokeWidth: 1.75, "aria-hidden": "true" }));
+    const sep = separator ?? (_jsx(ChevronRight, { "data-rtl-flip": "", size: 14, strokeWidth: 1.75, "aria-hidden": "true" }));
     return (_jsx("nav", { "aria-label": ariaLabel, className: breadcrumbRecipe({ className }), ...rest, children: items.map((item, i) => {
             const last = i === items.length - 1;
             const content = (_jsxs(_Fragment, { children: [item.icon, item.label] }));

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

@@ -1,4 +1,4 @@
-import { defineRecipe, resolveRecipe } from "../../core/index.js";
+import { defineRecipe, resolveRecipe, rtlFlipCss } from "../../core/index.js";
 import { contract as c } from "../../tokens/index.js";
 // A breadcrumb trail — Attio's record-page nav ("Companies / Google").
 const config = defineRecipe({
@@ -9,7 +9,9 @@ const config = defineRecipe({
     & a.breadcrumb-item:hover, & button.breadcrumb-item:hover { color: ${c.fgPrimary}; background: color-mix(in srgb, ${c.fgPrimary} 5%, transparent); }
     & button.breadcrumb-item { border: none; background: none; font: inherit; cursor: pointer; }
     & .breadcrumb-item[aria-current] { color: ${c.fgPrimary}; font-weight: ${c.weight.medium}; }
-    & .breadcrumb-sep { flex-shrink: 0; color: color-mix(in srgb, ${c.fgPrimary} 28%, transparent); }`,
+    & .breadcrumb-sep { flex-shrink: 0; color: color-mix(in srgb, ${c.fgPrimary} 28%, transparent); }
+    ${rtlFlipCss}
+  `,
     variants: {},
     defaultVariants: {},
     compoundVariants: [],

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/core/index.js

@@ -2,3 +2,4 @@ export { cx } from "./cx.js";
 export { defineRecipe } from "./define.js";
 export { Primitive } from "./primitive.js";
 export { resolveRecipe } from "./resolve.js";
+export * from "./rtl.js";

package/dist/esm/core/rtl.js

@@ -0,0 +1,14 @@
+/**
+ * Mirroring for direction-bearing icons.
+ *
+ * A chevron or arrow that means "back", "next", "toward the start" or "open"
+ * points the wrong way under RTL, and unlike spacing or alignment it cannot be
+ * fixed with a logical property: these are `lucide-react` nodes, static SVG
+ * paths with no direction of their own.
+ *
+ * Mark the icons that carry a direction with `data-rtl-flip` and include this
+ * snippet in the recipe. Icons whose meaning is NOT directional — a downward
+ * disclosure chevron, a search glass, a check — must be left unmarked: flipping
+ * them is a regression, not a fix.
+ */
+export const rtlFlipCss = `[dir="rtl"] & [data-rtl-flip] { transform: scaleX(-1); }`;

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/esm/product/appshell/appshell.js

@@ -63,6 +63,6 @@ export function AppShell({ sidebar, children, width: widthProp, defaultWidth = 2
     return (_jsxs("div", { className: appshellRecipe({ className }), ...rest, children: [_jsxs("div", { className: "appshell-side", "data-collapsed": collapsed ? "" : undefined, style: {
                     width: collapsed ? 0 : width,
                     transition: dragging ? "none" : "width .14s ease",
-                }, children: [_jsx("div", { className: "appshell-side-inner", style: { width }, children: sidebar(toggleCollapse) }), !collapsed && (_jsx("div", { className: "appshell-resize", "data-dragging": dragging ? "" : undefined, "aria-hidden": "true", onPointerDown: startResize }))] }), _jsxs("div", { className: "appshell-main", children: [collapsed && (_jsx("button", { type: "button", className: "appshell-expand", "aria-label": expandLabel, onClick: () => setCollapsed(false), children: _jsx(PanelLeft, { size: 15, strokeWidth: 1.75 }) })), children] })] }));
+                }, children: [_jsx("div", { className: "appshell-side-inner", style: { width }, children: sidebar(toggleCollapse) }), !collapsed && (_jsx("div", { className: "appshell-resize", "data-dragging": dragging ? "" : undefined, "aria-hidden": "true", onPointerDown: startResize }))] }), _jsxs("div", { className: "appshell-main", children: [collapsed && (_jsx("button", { type: "button", className: "appshell-expand", "aria-label": expandLabel, onClick: () => setCollapsed(false), children: _jsx(PanelLeft, { "data-rtl-flip": "", size: 15, strokeWidth: 1.75 }) })), children] })] }));
 }
 AppShell.displayName = "AppShell";

package/dist/esm/product/appshell/appshell.recipe.js

@@ -1,4 +1,4 @@
-import { defineRecipe, resolveRecipe } from "../../core/index.js";
+import { defineRecipe, resolveRecipe, rtlFlipCss } from "../../core/index.js";
 import { contract as c } from "../../tokens/index.js";
 // App-shell layout: a collapsible + resizable sidebar pane next to a main pane,
 // mirroring how Attio's window works. The sidebar pane clips (never squishes)
@@ -15,6 +15,8 @@ const config = defineRecipe({
     & .appshell-main { position: relative; flex: 1; min-width: 0; display: flex; flex-direction: column; overflow: hidden; }
     & .appshell-expand { position: absolute; top: ${c.space["2"]}; inset-inline-start: ${c.space["2"]}; z-index: 6; display: inline-flex; align-items: center; justify-content: center; width: ${c.size.row}; height: ${c.size.row}; padding: 0; border: none; border-radius: ${c.radius.md}; box-shadow: inset 0 0 0 1px ${c.borderSubtle}; background: ${c.bgSurface}; color: ${c.fgMuted}; font-family: inherit; cursor: pointer; transition: background-color .12s; }
     & .appshell-expand:hover { background: ${c.bgRaised}; color: ${c.fgPrimary}; }
+  
+    ${rtlFlipCss}
   `,
     variants: {},
     defaultVariants: {},

package/dist/esm/product/recordstable/recordstable.js

@@ -946,7 +946,7 @@ export function RecordsTable({ labels, columns: columnsProp = defaultColumns, ro
                                                             }
                                                             : undefined, onDragEnd: () => setDragCol(null), onClick: (e) => openColumnMenu(col.key, e.currentTarget), children: [Icon ? _jsx(Icon, { size: 14, strokeWidth: 1.75 }) : null, _jsx("span", { className: "recordstable-th-label", children: col.label }), _jsx("span", { className: "recordstable-sort", children: _jsx("svg", { width: "12", height: "12", viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "1.5", "aria-hidden": "true", children: _jsx("path", { d: "m4 6 4 4 4-4" }) }) })] })), openMenu === `col:${col.key}` &&
                                                         rootRef.current &&
-                                                        createPortal(_jsxs("div", { ref: menuRef, className: "recordstable-menu recordstable-menu--fixed recordstable-menu--hdr", role: "menu", "aria-label": `${col.label} column`, style: menuPos ?? undefined, onKeyDown: onMenuKeyDown, children: [_jsxs("button", { type: "button", className: "recordstable-menu-item", role: "menuitem", tabIndex: -1, onClick: () => sortBy(col.key, "asc"), children: [_jsx(ArrowUp, { size: 15, strokeWidth: 1.75 }), t.sortAscending] }), _jsxs("button", { type: "button", className: "recordstable-menu-item", role: "menuitem", tabIndex: -1, onClick: () => sortBy(col.key, "desc"), children: [_jsx(ArrowDown, { size: 15, strokeWidth: 1.75 }), t.sortDescending] }), _jsxs("button", { type: "button", className: "recordstable-menu-item", role: "menuitem", tabIndex: -1, disabled: i <= 1, onClick: () => moveColumn(col.key, -1), children: [_jsx(ArrowLeft, { size: 15, strokeWidth: 1.75 }), t.moveLeft] }), _jsxs("button", { type: "button", className: "recordstable-menu-item", role: "menuitem", tabIndex: -1, disabled: i === 0 || i >= cols.length - 1, onClick: () => moveColumn(col.key, 1), children: [_jsx(ArrowRight, { size: 15, strokeWidth: 1.75 }), t.moveRight] }), _jsx("div", { className: "recordstable-menu-sep" }), _jsxs("button", { type: "button", className: "recordstable-menu-item", role: "menuitem", tabIndex: -1, onClick: () => {
+                                                        createPortal(_jsxs("div", { ref: menuRef, className: "recordstable-menu recordstable-menu--fixed recordstable-menu--hdr", role: "menu", "aria-label": `${col.label} column`, style: menuPos ?? undefined, onKeyDown: onMenuKeyDown, children: [_jsxs("button", { type: "button", className: "recordstable-menu-item", role: "menuitem", tabIndex: -1, onClick: () => sortBy(col.key, "asc"), children: [_jsx(ArrowUp, { size: 15, strokeWidth: 1.75 }), t.sortAscending] }), _jsxs("button", { type: "button", className: "recordstable-menu-item", role: "menuitem", tabIndex: -1, onClick: () => sortBy(col.key, "desc"), children: [_jsx(ArrowDown, { size: 15, strokeWidth: 1.75 }), t.sortDescending] }), _jsxs("button", { type: "button", className: "recordstable-menu-item", role: "menuitem", tabIndex: -1, disabled: i <= 1, onClick: () => moveColumn(col.key, -1), children: [_jsx(ArrowLeft, { "data-rtl-flip": "", size: 15, strokeWidth: 1.75 }), t.moveLeft] }), _jsxs("button", { type: "button", className: "recordstable-menu-item", role: "menuitem", tabIndex: -1, disabled: i === 0 || i >= cols.length - 1, onClick: () => moveColumn(col.key, 1), children: [_jsx(ArrowRight, { "data-rtl-flip": "", size: 15, strokeWidth: 1.75 }), t.moveRight] }), _jsx("div", { className: "recordstable-menu-sep" }), _jsxs("button", { type: "button", className: "recordstable-menu-item", role: "menuitem", tabIndex: -1, onClick: () => {
                                                                         setRenamingCol(col.key);
                                                                         setOpenMenu(null);
                                                                     }, children: [_jsx(Pencil, { size: 15, strokeWidth: 1.75 }), t.editColumnLabel] }), cols.length > 1 && (_jsxs("button", { type: "button", className: "recordstable-menu-item", role: "menuitem", tabIndex: -1, onClick: () => hideColumn(col.key), children: [_jsx(EyeOff, { size: 15, strokeWidth: 1.75 }), t.hideFromView] }))] }), rootRef.current), _jsx("span", { className: "recordstable-resize", "aria-hidden": "true", onPointerDown: (e) => {
@@ -987,7 +987,7 @@ export function RecordsTable({ labels, columns: columnsProp = defaultColumns, ro
                                                             : undefined, avatarTone: avatarTone })), i === 0 && onOpenRecord && !isEditing && (_jsx("button", { type: "button", className: "recordstable-open", "aria-label": `Open ${cellText(col, row)}`, onClick: (e) => {
                                                             e.stopPropagation();
                                                             onOpenRecord(row);
-                                                        }, children: _jsx(ArrowUpRight, { size: 15, strokeWidth: 1.75 }) }))] }, col.key));
+                                                        }, children: _jsx(ArrowUpRight, { "data-rtl-flip": "", size: 15, strokeWidth: 1.75 }) }))] }, col.key));
                                         }), _jsx("td", { className: "recordstable-td recordstable-addcol" })] }, row.id))) }), _jsx("tfoot", { children: _jsxs("tr", { children: [_jsx("td", { className: "recordstable-sum recordstable-col-check" }), cols.map((col, i) => {
                                             const a = agg[col.key] ?? "none";
                                             const res = summarize(col, a, visibleRows);

package/dist/esm/product/recordstable/recordstable.recipe.js

@@ -1,5 +1,5 @@
 import { toolbarChromeBody, toolbarChromeHead, } from "../../components/tabletoolbar/tabletoolbar.chrome.js";
-import { defineRecipe, resolveRecipe } from "../../core/index.js";
+import { defineRecipe, resolveRecipe, rtlFlipCss } from "../../core/index.js";
 import { contract as c } from "../../tokens/index.js";
 import { recordTagCss } from "./recordstable.tag.js";
 // Attio's record grid, measured: 36px rows, 1px borderSubtle (#eeeff1) grid
@@ -142,6 +142,8 @@ ${toolbarChromeBody("recordstable")}
     & .recordstable-bulk-sep { width: 1px; height: 20px; margin: 0 ${c.space["0.5"]}; background: ${c.borderSubtle}; }
     & .recordstable-bulk-close { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border: none; border-radius: ${c.radius.md}; background: transparent; color: ${c.fgMuted}; cursor: pointer; }
     & .recordstable-bulk-close:hover { background: ${c.bgRaised}; color: ${c.fgPrimary}; }
+  
+    ${rtlFlipCss}
   `,
     variants: {},
     defaultVariants: {},

package/dist/esm/product/settingsshell/settingsshell.js

@@ -18,6 +18,6 @@ export function SettingsShell({ title = "Settings", onBack, groups, activeItem,
         }))
             .filter((g) => g.items.length > 0)
         : groups;
-    return (_jsxs("div", { className: settingsshellRecipe({ className }), ...rest, children: [_jsxs("nav", { className: "settingsshell-nav", "aria-label": navLabel, children: [_jsxs("button", { type: "button", className: "settingsshell-back", onClick: onBack, children: [_jsx(ChevronLeft, { size: 16, strokeWidth: 2 }), title] }), searchable && (_jsxs("div", { className: "settingsshell-search", children: [_jsx(Search, { size: 15, strokeWidth: 1.75 }), _jsx("input", { type: "text", placeholder: searchPlaceholder, "aria-label": searchPlaceholder, value: query, onChange: (e) => setQuery(e.target.value) })] })), _jsx("div", { className: "settingsshell-groups", children: filtered.length === 0 ? (_jsx("div", { className: "settingsshell-empty", children: emptyLabel })) : (filtered.map((g, gi) => (_jsxs("div", { className: "settingsshell-group", children: [g.label != null && (_jsx("div", { className: "settingsshell-group-label", children: g.label })), g.items.map((it) => (_jsxs("button", { type: "button", className: "settingsshell-item", "aria-current": it.id === activeItem ? "page" : undefined, "data-active": it.id === activeItem ? "" : undefined, onClick: () => onSelect(it.id), children: [it.icon, _jsx("span", { className: "settingsshell-item-label", children: it.label })] }, it.id)))] }, gi)))) })] }), _jsx("div", { className: "settingsshell-content", children: children })] }));
+    return (_jsxs("div", { className: settingsshellRecipe({ className }), ...rest, children: [_jsxs("nav", { className: "settingsshell-nav", "aria-label": navLabel, children: [_jsxs("button", { type: "button", className: "settingsshell-back", onClick: onBack, children: [_jsx(ChevronLeft, { "data-rtl-flip": "", size: 16, strokeWidth: 2 }), title] }), searchable && (_jsxs("div", { className: "settingsshell-search", children: [_jsx(Search, { size: 15, strokeWidth: 1.75 }), _jsx("input", { type: "text", placeholder: searchPlaceholder, "aria-label": searchPlaceholder, value: query, onChange: (e) => setQuery(e.target.value) })] })), _jsx("div", { className: "settingsshell-groups", children: filtered.length === 0 ? (_jsx("div", { className: "settingsshell-empty", children: emptyLabel })) : (filtered.map((g, gi) => (_jsxs("div", { className: "settingsshell-group", children: [g.label != null && (_jsx("div", { className: "settingsshell-group-label", children: g.label })), g.items.map((it) => (_jsxs("button", { type: "button", className: "settingsshell-item", "aria-current": it.id === activeItem ? "page" : undefined, "data-active": it.id === activeItem ? "" : undefined, onClick: () => onSelect(it.id), children: [it.icon, _jsx("span", { className: "settingsshell-item-label", children: it.label })] }, it.id)))] }, gi)))) })] }), _jsx("div", { className: "settingsshell-content", children: children })] }));
 }
 SettingsShell.displayName = "SettingsShell";

package/dist/esm/product/settingsshell/settingsshell.recipe.js

@@ -1,4 +1,4 @@
-import { defineRecipe, resolveRecipe } from "../../core/index.js";
+import { defineRecipe, resolveRecipe, rtlFlipCss } from "../../core/index.js";
 import { contract as c } from "../../tokens/index.js";
 // The Settings layout — measured from Attio's Settings: a 256px left nav with a
 // back header, a search field, and grouped nav items (active row raised), beside
@@ -34,7 +34,9 @@ const config = defineRecipe({
     & .settingsshell-item[data-active] svg { color: ${c.fgPrimary}; }
     & .settingsshell-empty { padding: ${c.space["3"]} ${c.space["2"]}; font-size: ${c.text.md}; color: ${c.fgMuted}; }
 
-    & .settingsshell-content { flex: 1; min-width: 0; min-height: 0; overflow-y: auto; padding: ${c.space["6"]} ${c.space["8"]}; }`,
+    & .settingsshell-content { flex: 1; min-width: 0; min-height: 0; overflow-y: auto; padding: ${c.space["6"]} ${c.space["8"]}; }
+    ${rtlFlipCss}
+  `,
     variants: {},
     defaultVariants: {},
     compoundVariants: [],

package/dist/recordstable.css

@@ -198,6 +198,8 @@
     & .recordstable-bulk-close { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border: none; border-radius: var(--radius-md); background: transparent; color: var(--fg-muted); cursor: pointer; }
     & .recordstable-bulk-close:hover { background: var(--bg-raised); color: var(--fg-primary); }
   
+    [dir="rtl"] & [data-rtl-flip] { transform: scaleX(-1); }
+  
 }
 
 @media (prefers-reduced-motion: reduce) {

package/dist/settingsshell.css

@@ -29,6 +29,8 @@
     & .settingsshell-empty { padding: var(--space-3) var(--space-2); font-size: var(--text-md); color: var(--fg-muted); }
 
     & .settingsshell-content { flex: 1; min-width: 0; min-height: 0; overflow-y: auto; padding: var(--space-6) var(--space-8); }
+    [dir="rtl"] & [data-rtl-flip] { transform: scaleX(-1); }
+  
 }
 
 @media (prefers-reduced-motion: reduce) {

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

@@ -272,6 +272,8 @@
     & button.breadcrumb-item { border: none; background: none; font: inherit; cursor: pointer; }
     & .breadcrumb-item[aria-current] { color: var(--fg-primary); font-weight: var(--weight-medium); }
     & .breadcrumb-sep { flex-shrink: 0; color: color-mix(in srgb, var(--fg-primary) 28%, transparent); }
+    [dir="rtl"] & [data-rtl-flip] { transform: scaleX(-1); }
+  
 }
 
 .bulkbar {
@@ -1363,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;
@@ -1732,6 +1785,8 @@
     & .appshell-expand { position: absolute; top: var(--space-2); inset-inline-start: var(--space-2); z-index: 6; display: inline-flex; align-items: center; justify-content: center; width: var(--size-row); height: var(--size-row); padding: 0; border: none; border-radius: var(--radius-md); box-shadow: inset 0 0 0 1px var(--border-subtle); background: var(--bg-surface); color: var(--fg-muted); font-family: inherit; cursor: pointer; transition: background-color .12s; }
     & .appshell-expand:hover { background: var(--bg-raised); color: var(--fg-primary); }
   
+    [dir="rtl"] & [data-rtl-flip] { transform: scaleX(-1); }
+  
 }
 
 @media (prefers-reduced-motion: reduce) {
@@ -2449,6 +2504,8 @@
     & .recordstable-bulk-close { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border: none; border-radius: var(--radius-md); background: transparent; color: var(--fg-muted); cursor: pointer; }
     & .recordstable-bulk-close:hover { background: var(--bg-raised); color: var(--fg-primary); }
   
+    [dir="rtl"] & [data-rtl-flip] { transform: scaleX(-1); }
+  
 }
 
 @media (prefers-reduced-motion: reduce) {
@@ -2537,6 +2594,8 @@
     & .settingsshell-empty { padding: var(--space-3) var(--space-2); font-size: var(--text-md); color: var(--fg-muted); }
 
     & .settingsshell-content { flex: 1; min-width: 0; min-height: 0; overflow-y: auto; padding: var(--space-6) var(--space-8); }
+    [dir="rtl"] & [data-rtl-flip] { transform: scaleX(-1); }
+  
 }
 
 @media (prefers-reduced-motion: reduce) {

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/core/index.d.ts

@@ -2,4 +2,5 @@ export { cx } from "./cx";
 export { defineRecipe } from "./define";
 export { Primitive } from "./primitive";
 export { resolveRecipe } from "./resolve";
+export * from "./rtl";
 export type * from "./types";

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

@@ -0,0 +1,14 @@
+/**
+ * Mirroring for direction-bearing icons.
+ *
+ * A chevron or arrow that means "back", "next", "toward the start" or "open"
+ * points the wrong way under RTL, and unlike spacing or alignment it cannot be
+ * fixed with a logical property: these are `lucide-react` nodes, static SVG
+ * paths with no direction of their own.
+ *
+ * Mark the icons that carry a direction with `data-rtl-flip` and include this
+ * snippet in the recipe. Icons whose meaning is NOT directional — a downward
+ * disclosure chevron, a search glass, a check — must be left unmarked: flipping
+ * them is a regression, not a fix.
+ */
+export declare const rtlFlipCss = "[dir=\"rtl\"] & [data-rtl-flip] { transform: scaleX(-1); }";

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.0",
+  "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",