@fairgarden/design 0.1.0-alpha.0

package/components/Separator/Separator.js

@@ -0,0 +1,62 @@
+'use client';
+import * as React from 'react';
+import { Separator as BaseSeparator } from '@base-ui/react/separator';
+import { cva } from 'class-variance-authority';
+import { resolveClassName } from '../../utils/className';
+import { primaryScaleVariants, secondaryScaleVariants } from '../../utils/scales';
+import { useScopeAttributes } from '../../utils/scope';
+import styles from './separator.module.css';
+/**
+ * Separator (§9.12). `variant` names the line by role and style, within what
+ * §4.2 allows a separator: solid `rule` (default, `--role-rule`) and
+ * `hairline` (`--role-hairline`), `dotted` (relation subdivisions only),
+ * `doubleHair` (totals, running headers) and `ruleDot` (the rule–dot–rule
+ * thematic break). No dashed value: dashes never divide [D35]. Orientation is
+ * Base UI's own prop. Color axes inherit the host's scope [D133].
+ */
+export const separator = cva(styles.base, {
+    variants: {
+        variant: {
+            rule: styles.rule,
+            hairline: styles.hairline,
+            dotted: styles.dotted,
+            doubleHair: styles.doubleHair,
+            ruleDot: styles.ruleDot,
+        },
+        primary: primaryScaleVariants,
+        secondary: secondaryScaleVariants,
+    },
+    defaultVariants: {
+        variant: 'rule',
+    },
+});
+/** The `dotted` run: true round dots as zero-length round-capped dashes (§4.8.3). */
+function DotRun({ orientation }) {
+    const vertical = orientation === 'vertical';
+    return (React.createElement("svg", { className: styles.dots, "aria-hidden": "true", focusable: "false" },
+        React.createElement("line", { x1: vertical ? '50%' : '0', y1: vertical ? '0' : '50%', x2: vertical ? '50%' : '100%', y2: vertical ? '100%' : '50%' })));
+}
+/** `ornament-rule-dot` (§4.8.2): hairline, solid dot, hairline. */
+function RuleDot() {
+    return (React.createElement(React.Fragment, null,
+        React.createElement("span", { className: styles.segment }),
+        React.createElement("svg", { className: styles.dot, viewBox: "0 0 2 2", "aria-hidden": "true", focusable: "false" },
+            React.createElement("circle", { cx: "1", cy: "1", r: "1" })),
+        React.createElement("span", { className: styles.segment })));
+}
+/**
+ * A separator announced to assistive technology (Base UI). Use it where the
+ * grouping would otherwise be unclear; typographic separators (· • | ›) are
+ * text, composed from this module's `glyph` / `glyphInk` parts by the host.
+ * `ruleDot` is horizontal only.
+ */
+export function Separator(props) {
+    const { variant, primary, secondary, className, orientation = 'horizontal', ...rest } = props;
+    const scope = useScopeAttributes();
+    const resolvedVariant = variant ?? 'rule';
+    const classes = resolveClassName(className, (extra) => separator({ variant, primary, secondary, className: extra }));
+    return (React.createElement(BaseSeparator, { ...scope, ...rest, orientation: orientation, className: classes },
+        resolvedVariant === 'dotted' ? React.createElement(DotRun, { orientation: orientation }) : null,
+        resolvedVariant === 'ruleDot' ? React.createElement(RuleDot, null) : null));
+}
+//# sourceMappingURL=Separator.js.map

package/components/Separator/Separator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Separator.js","sourceRoot":"","sources":["../../src/components/Separator/Separator.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;AAEZ,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,SAAS,IAAI,aAAa,EAAE,MAAM,0BAA0B,CAAA;AACrE,OAAO,EAAE,GAAG,EAAqB,MAAM,0BAA0B,CAAA;AAEjE,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAA;AACxD,OAAO,EAAE,oBAAoB,EAAE,sBAAsB,EAAE,MAAM,oBAAoB,CAAA;AACjF,OAAO,EAAE,kBAAkB,EAAE,MAAM,mBAAmB,CAAA;AACtD,OAAO,MAAM,MAAM,wBAAwB,CAAA;AAE3C;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,SAAS,GAAG,GAAG,CAAC,MAAM,CAAC,IAAI,EAAE;IACxC,QAAQ,EAAE;QACR,OAAO,EAAE;YACP,IAAI,EAAE,MAAM,CAAC,IAAI;YACjB,QAAQ,EAAE,MAAM,CAAC,QAAQ;YACzB,MAAM,EAAE,MAAM,CAAC,MAAM;YACrB,UAAU,EAAE,MAAM,CAAC,UAAU;YAC7B,OAAO,EAAE,MAAM,CAAC,OAAO;SACxB;QACD,OAAO,EAAE,oBAAoB;QAC7B,SAAS,EAAE,sBAAsB;KAClC;IACD,eAAe,EAAE;QACf,OAAO,EAAE,MAAM;KAChB;CACF,CAAC,CAAA;AA4BF,qFAAqF;AACrF,SAAS,MAAM,CAAC,EAAE,WAAW,EAAgC;IAC3D,MAAM,QAAQ,GAAG,WAAW,KAAK,UAAU,CAAA;IAC3C,OAAO,CACL,6BAAK,SAAS,EAAE,MAAM,CAAC,IAAI,iBAAc,MAAM,EAAC,SAAS,EAAC,OAAO;QAC/D,8BACE,EAAE,EAAE,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,EAC1B,EAAE,EAAE,QAAQ,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,KAAK,EAC1B,EAAE,EAAE,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,EAC7B,EAAE,EAAE,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,GAC7B,CACE,CACP,CAAA;AACH,CAAC;AAED,mEAAmE;AACnE,SAAS,OAAO;IACd,OAAO,CACL;QACE,8BAAM,SAAS,EAAE,MAAM,CAAC,OAAO,GAAI;QACnC,6BAAK,SAAS,EAAE,MAAM,CAAC,GAAG,EAAE,OAAO,EAAC,SAAS,iBAAa,MAAM,EAAC,SAAS,EAAC,OAAO;YAChF,gCAAQ,EAAE,EAAC,GAAG,EAAC,EAAE,EAAC,GAAG,EAAC,CAAC,EAAC,GAAG,GAAG,CAC1B;QACN,8BAAM,SAAS,EAAE,MAAM,CAAC,OAAO,GAAI,CAClC,CACJ,CAAA;AACH,CAAC;AAED;;;;;GAKG;AACH,MAAM,UAAU,SAAS,CAAC,KAAqB;IAC7C,MAAM,EAAE,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,WAAW,GAAG,YAAY,EAAE,GAAG,IAAI,EAAE,GAAG,KAAK,CAAA;IAC7F,MAAM,KAAK,GAAG,kBAAkB,EAAE,CAAA;IAClC,MAAM,eAAe,GAAqB,OAAO,IAAI,MAAM,CAAA;IAE3D,MAAM,OAAO,GAAG,gBAAgB,CAAC,SAAS,EAAE,CAAC,KAAK,EAAE,EAAE,CACpD,SAAS,CAAC,EAAE,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC,CAC7D,CAAA;IAED,OAAO,CACL,oBAAC,aAAa,OAAK,KAAK,KAAM,IAAI,EAAE,WAAW,EAAE,WAAW,EAAE,SAAS,EAAE,OAAO;QAC7E,eAAe,KAAK,QAAQ,CAAC,CAAC,CAAC,oBAAC,MAAM,IAAC,WAAW,EAAE,WAAW,GAAI,CAAC,CAAC,CAAC,IAAI;QAC1E,eAAe,KAAK,SAAS,CAAC,CAAC,CAAC,oBAAC,OAAO,OAAG,CAAC,CAAC,CAAC,IAAI,CACrC,CACjB,CAAA;AACH,CAAC"}

package/components/Separator/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Separator';
+//# sourceMappingURL=index.d.ts.map

package/components/Separator/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/Separator/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAA"}

package/components/Separator/index.js

@@ -0,0 +1,2 @@
+export * from './Separator';
+//# sourceMappingURL=index.js.map

package/components/Separator/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/components/Separator/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAA"}

package/components/Separator/separator.module.css

@@ -0,0 +1,174 @@
+/*
+ * Separator (§9.12; geometry and meaning §4). CVA function `separator` in
+ * Separator.tsx. Parts: base (the line), dots (the SVG dot run of `dotted`),
+ * segment and dot (the rule–dot–rule ornament), glyph / glyphInk (typographic
+ * separators, composed by host modules). Every separator is --border-size-1;
+ * solid = boundary, dotted = relation, double = total; never dashed [D35, D66].
+ *
+ * Variant classes compose one line style and publish local dimensions; the
+ * data-orientation rules (states layer) consume them for the edge and axis.
+ */
+
+/* Composition sits in top-level rules, outside the layers: Lightning CSS
+ * (Next.js with Turbopack) rejects `composes` inside @layer or any nesting.
+ * The composed classes keep their own layers. */
+.segment {
+  composes: lineSolid from '../../utils/line.module.css';
+}
+
+@layer base {
+  .base {
+    --separator-thickness: 0;
+    --separator-edge-start: var(--border-size-1);
+    --separator-edge-end: 0;
+    position: relative;
+    flex: none;
+    margin: 0;
+    border-color: currentColor;
+    color: var(--role-rule);
+  }
+
+  /*
+   * True round dots in inline SVG (foreground, so they print) [D36, D68]:
+   * zero-length dashes with round caps, geometry inherited from lineDottedFine.
+   * The offset puts the first dot's centre half a dot in, and the run is sized
+   * below to a whole number of pitches, so it starts and ends on a dot (§4.8.3).
+   */
+  .dots {
+    position: absolute;
+    inset: 0;
+    display: block;
+    overflow: visible;
+    fill: none;
+    stroke: currentColor;
+    stroke-dashoffset: calc(var(--ds-dot-fine) / -2);
+  }
+
+  /* Rule–dot–rule (ornament-rule-dot, §4.8.2): two hairlines and a solid dot. */
+  .segment {
+    flex: 1 1 0;
+    border-color: currentColor;
+    border-width: 0;
+    border-block-start-width: var(--border-size-1);
+  }
+
+  .dot {
+    flex: none;
+    inline-size: var(--ds-ornament-dot);
+    block-size: var(--ds-ornament-dot);
+    margin-inline: var(--ds-ornament-dot-gap);
+    fill: currentColor;
+  }
+
+  /* Typographic separators (· › and • |), composed by host modules. */
+  .glyph {
+    color: var(--role-muted);
+  }
+
+  .glyphInk {
+    color: var(--primary12);
+  }
+}
+
+.rule {
+  composes: lineSolid from '../../utils/line.module.css';
+}
+
+.hairline {
+  composes: lineSolid from '../../utils/line.module.css';
+}
+
+.dotted {
+  composes: lineDottedFine from '../../utils/line.module.css';
+}
+
+.doubleHair {
+  composes: lineDoubleHair from '../../utils/line.module.css';
+}
+
+@layer variants {
+  /* Solid, where the division must be found (default). */
+  .rule {
+    color: var(--role-rule);
+  }
+
+  /* Solid, with whitespace support only [D17]. */
+  .hairline {
+    color: var(--role-hairline);
+  }
+
+  /* Relation only: subdivisions inside solid-bounded groups, never the only
+     boundary [D66]. The SVG draws it; the box carries no border. */
+  .dotted {
+    --separator-thickness: var(--ds-dot-fine);
+    --separator-edge-start: 0;
+    color: var(--role-rule);
+  }
+
+  /* Totals and running-header bands: 1 + 1 px, --ds-double-hair-gap apart. */
+  .doubleHair {
+    --separator-thickness: var(--ds-double-hair-gap);
+    --separator-edge-end: var(--border-size-1);
+    color: var(--role-rule);
+  }
+
+  /* Thematic break: 35% of the text column, max --size-px-13, centred.
+     Ornaments in reading bands take --primary12 (§4.8.2). Horizontal only. */
+  .ruleDot {
+    --separator-thickness: var(--ds-ornament-dot);
+    --separator-edge-start: 0;
+    display: flex;
+    align-items: center;
+    inline-size: min(35%, var(--size-px-13));
+    margin-inline: auto;
+    color: var(--primary12);
+  }
+}
+
+@layer states {
+  /* data-orientation picks the axis and the edge that draws the line. */
+  .base[data-orientation='horizontal'] {
+    box-sizing: content-box;
+    block-size: var(--separator-thickness);
+    border-width: 0;
+    border-block-width: var(--separator-edge-start) var(--separator-edge-end);
+  }
+
+  .base[data-orientation='vertical'] {
+    box-sizing: content-box;
+    align-self: stretch;
+    inline-size: var(--separator-thickness);
+    border-width: 0;
+    border-inline-width: var(--separator-edge-start) var(--separator-edge-end);
+  }
+
+  /* Whole pitches plus one dot, centred; 100% where round() is unsupported. */
+  .base[data-orientation='horizontal'] .dots {
+    inline-size: 100%;
+    inline-size: calc(
+      round(down, 100% - var(--ds-dot-fine), var(--ds-dot-fine-pitch)) + var(--ds-dot-fine)
+    );
+    block-size: 100%;
+    margin-inline: auto;
+  }
+
+  .base[data-orientation='vertical'] .dots {
+    inline-size: 100%;
+    block-size: 100%;
+    block-size: calc(
+      round(down, 100% - var(--ds-dot-fine), var(--ds-dot-fine-pitch)) + var(--ds-dot-fine)
+    );
+    margin-block: auto;
+  }
+}
+
+@layer print {
+  @media print {
+    /* A rule is never stranded at the top or foot of a page; lines print
+       black at 0.75 pt through the global remap (§9.12, §4.12). */
+    .base[data-orientation='horizontal'] {
+      break-before: avoid;
+      break-after: avoid;
+    }
+  }
+}

package/components/Slider/Slider.d.ts

@@ -0,0 +1,54 @@
+import * as React from 'react';
+import { Slider as BaseSlider } from '@base-ui/react/slider';
+import { type VariantProps } from 'class-variance-authority';
+export declare const slider: (props?: ({
+    stepped?: boolean | null | undefined;
+    primary?: "ruby" | "brown" | "crimson" | "gold" | "gray" | "indigo" | "olive" | "pink" | "plum" | "purple" | "red" | "tomato" | "violet" | "bronze" | "iris" | "mauve" | "sage" | "sand" | "slate" | null | undefined;
+    secondary?: "ruby" | "blue" | "brown" | "crimson" | "cyan" | "gold" | "gray" | "green" | "indigo" | "lime" | "olive" | "orange" | "pink" | "plum" | "purple" | "red" | "teal" | "tomato" | "violet" | "yellow" | "amber" | "bronze" | "grass" | "iris" | "jade" | "mauve" | "mint" | "sage" | "sand" | "sky" | "slate" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+type SliderVariants = VariantProps<typeof slider>;
+/** A major tick on a stepped slider: its value and optional label. */
+export interface SliderMark {
+    /** The value the tick marks, between `min` and `max`. */
+    value: number;
+    /** The label under the tick; defaults to the formatted value. */
+    label?: React.ReactNode;
+}
+/**
+ * Props for Slider: Base UI Slider.Root props plus the stepped and color
+ * axes, the label, the value readout and the tick scale.
+ */
+export type SliderProps<Value extends number | readonly number[] = number | readonly number[]> = Omit<BaseSlider.Root.Props<Value>, 'children'> & {
+    /** Shows the tick scale under the track: minor and major ticks, major labels. Default `false`. */
+    stepped?: SliderVariants['stepped'];
+    /**
+     * Primary Radix scale: every part (track edge, indicator, thumb edge,
+     * ticks, value). Never defaulted; omitted, it inherits the scope [D133].
+     */
+    primary?: SliderVariants['primary'];
+    /** Secondary Radix scale: unused by the slider itself. Never defaulted. */
+    secondary?: SliderVariants['secondary'];
+    /** The field label, above the track; title case up to about four words [D160]. */
+    label?: React.ReactNode;
+    /**
+     * Formats the value readout at the right end of the label row, e.g. a
+     * unit or a derived rate in parentheses ("1M (≈24 WPM)"). Default: the
+     * formatted values joined by " – ".
+     */
+    formatValue?: (formattedValues: readonly string[], values: readonly number[]) => React.ReactNode;
+    /** `stepped` only: the major ticks. Default: `min`, the midpoint and `max`. */
+    marks?: readonly SliderMark[];
+    /** `stepped` only: the minor tick spacing. Default `step`. */
+    minorStep?: number;
+    /** Accessible names per thumb, needed for a range ("Minimum price", "Maximum price"). */
+    thumbLabels?: readonly string[];
+};
+/**
+ * A Base UI Slider for approximate values where relative position
+ * matters: an outlined track, a --primary12 indicator and a tall
+ * --role-halo thumb, with the value always shown in text. Exact values use
+ * a Number Field. A range passes an array `value` / `defaultValue`.
+ */
+export declare function Slider<Value extends number | readonly number[]>(props: SliderProps<Value>): React.JSX.Element;
+export {};
+//# sourceMappingURL=Slider.d.ts.map

package/components/Slider/Slider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Slider.d.ts","sourceRoot":"","sources":["../../src/components/Slider/Slider.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,MAAM,IAAI,UAAU,EAAE,MAAM,uBAAuB,CAAA;AAC5D,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAyCjE,eAAO,MAAM,MAAM;;;;8EAYjB,CAAA;AAEF,KAAK,cAAc,GAAG,YAAY,CAAC,OAAO,MAAM,CAAC,CAAA;AAEjD,sEAAsE;AACtE,MAAM,WAAW,UAAU;IACzB,yDAAyD;IACzD,KAAK,EAAE,MAAM,CAAA;IACb,iEAAiE;IACjE,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CACxB;AAKD;;;GAGG;AACH,MAAM,MAAM,WAAW,CAAC,KAAK,SAAS,MAAM,GAAG,SAAS,MAAM,EAAE,GAAG,MAAM,GAAG,SAAS,MAAM,EAAE,IAC3F,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC,GAAG;IAC/C,kGAAkG;IAClG,OAAO,CAAC,EAAE,cAAc,CAAC,SAAS,CAAC,CAAA;IACnC;;;OAGG;IACH,OAAO,CAAC,EAAE,cAAc,CAAC,SAAS,CAAC,CAAA;IACnC,2EAA2E;IAC3E,SAAS,CAAC,EAAE,cAAc,CAAC,WAAW,CAAC,CAAA;IACvC,kFAAkF;IAClF,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACvB;;;;OAIG;IACH,WAAW,CAAC,EAAE,CAAC,eAAe,EAAE,SAAS,MAAM,EAAE,EAAE,MAAM,EAAE,SAAS,MAAM,EAAE,KAAK,KAAK,CAAC,SAAS,CAAA;IAChG,+EAA+E;IAC/E,KAAK,CAAC,EAAE,SAAS,UAAU,EAAE,CAAA;IAC7B,8DAA8D;IAC9D,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,yFAAyF;IACzF,WAAW,CAAC,EAAE,SAAS,MAAM,EAAE,CAAA;CAChC,CAAA;AAcH;;;;;GAKG;AACH,wBAAgB,MAAM,CAAC,KAAK,SAAS,MAAM,GAAG,SAAS,MAAM,EAAE,EAAE,KAAK,EAAE,WAAW,CAAC,KAAK,CAAC,qBAoIzF"}

package/components/Slider/Slider.js

@@ -0,0 +1,118 @@
+'use client';
+import * as React from 'react';
+import { Slider as BaseSlider } from '@base-ui/react/slider';
+import { cva } from 'class-variance-authority';
+import { Ground } from '../Ground';
+import { resolveClassName } from '../../utils/className';
+import { primaryScaleVariants, secondaryScaleVariants, } from '../../utils/scales';
+import { overlayScope, useScopeAttributes } from '../../utils/scope';
+import styles from './slider.module.css';
+/*
+ * Slider (§10.10).
+ *
+ * Implementation (CSS Modules + CVA)
+ * - Module: slider.module.css; CVA function `slider`.
+ * - Axes: `stepped` → `stepped` (the tick scale: minor ticks half the
+ *   --ds-space-12 major ticks, with major labels); `primary`, `secondary`
+ *   → scales module classes.
+ * - Compound variants: none.
+ * - Defaults: stepped false; color axes none [D133]. The range form is
+ *   Base UI's two-thumb value, not an axis.
+ * - Color fallback: inherits the scope (secondary unused: the indicator is
+ *   structure, not a selection).
+ * - States: :hover (not disabled) → thumb face --role-soft-hover-face
+ *   (--primary3 where soft fills apply, unchanged where they drop), edge
+ *   unchanged [D181];
+ *   data-dragging → thumb edge --ds-stroke-3 and the `chip`; :focus-visible on
+ *   each thumb's input → ring on the thumb; data-orientation → track
+ *   direction; data-disabled → dotted track and thumb edges, indicator
+ *   removed, value kept.
+ * - Parts: base, label, value, control, track, indicator, thumb, ticks,
+ *   tick (tickMajor; tickStart, tickEnd and tickMid anchor the end labels
+ *   and mark the labels that survive narrow widths), tickLabel, chip, and
+ *   edge / edgeLine (the disabled dotted edges).
+ * - Scope: `chip` is a nested overlay-face (`white`) Ground; otherwise none.
+ * - Container: none; inherits its context. Tick labels thin by viewport:
+ *   ends and midpoint at base, ends only at --xs-n-below, all from
+ *   --md-n-above.
+ */
+export const slider = cva(styles.base, {
+    variants: {
+        stepped: {
+            true: styles.stepped,
+        },
+        // Color axes: never defaulted, so an omitted prop inherits the scope [D133].
+        primary: primaryScaleVariants,
+        secondary: secondaryScaleVariants,
+    },
+    defaultVariants: {
+        stepped: false,
+    },
+});
+/** Above this many minor ticks, the minor scale is dropped. */
+const MAX_MINOR_TICKS = 100;
+function DisabledEdge() {
+    return (React.createElement("svg", { className: styles.edge, "aria-hidden": "true", focusable: "false" },
+        React.createElement("rect", { className: styles.edgeLine, width: "100%", height: "100%" })));
+}
+function percentOf(value, min, max) {
+    return ((value - min) / (max - min)) * 100;
+}
+/**
+ * A Base UI Slider for approximate values where relative position
+ * matters: an outlined track, a --primary12 indicator and a tall
+ * --role-halo thumb, with the value always shown in text. Exact values use
+ * a Number Field. A range passes an array `value` / `defaultValue`.
+ */
+export function Slider(props) {
+    const { stepped, primary, secondary, label, formatValue, marks, minorStep, thumbLabels, className, min = 0, max = 100, step = 1, format, locale, orientation, ...rest } = props;
+    const scope = useScopeAttributes();
+    const initial = rest.value ?? rest.defaultValue;
+    const thumbCount = Array.isArray(initial) ? initial.length : 1;
+    const thumbs = Array.from({ length: thumbCount }, (_, index) => index);
+    const variants = { stepped, primary, secondary };
+    const resolvedClassName = resolveClassName(className, (extra) => slider({ ...variants, className: extra }));
+    let ticks = null;
+    if (stepped && orientation !== 'vertical' && max > min) {
+        const formatter = new Intl.NumberFormat(locale, format);
+        const midpoint = (min + max) / 2;
+        const majors = marks ?? [
+            { value: min },
+            { value: midpoint },
+            { value: max },
+        ];
+        const majorValues = new Set(majors.map((mark) => mark.value));
+        const spacing = minorStep ?? step;
+        const minorCount = spacing > 0 ? Math.floor((max - min) / spacing) : 0;
+        const minors = minorCount > 0 && minorCount <= MAX_MINOR_TICKS
+            ? Array.from({ length: minorCount + 1 }, (_, index) => 
+            // Rounded, so decimal steps don't drift past the majors.
+            Number((min + index * spacing).toFixed(10))).filter((value) => !majorValues.has(value))
+            : [];
+        ticks = (React.createElement("div", { className: styles.ticks, "aria-hidden": "true" },
+            minors.map((value) => (React.createElement("span", { key: `minor-${value}`, className: styles.tick, style: { '--slider-tick-position': `${percentOf(value, min, max)}%` } }))),
+            majors.map((mark) => {
+                const position = mark.value <= min ? styles.tickStart : mark.value >= max ? styles.tickEnd : '';
+                const middle = mark.value === midpoint ? styles.tickMid : '';
+                return (React.createElement("span", { key: `major-${mark.value}`, className: [styles.tick, styles.tickMajor, position, middle]
+                        .filter(Boolean)
+                        .join(' '), style: {
+                        '--slider-tick-position': `${percentOf(mark.value, min, max)}%`,
+                    } },
+                    React.createElement("span", { className: styles.tickLabel }, mark.label ?? formatter.format(mark.value))));
+            })));
+    }
+    return (React.createElement(BaseSlider.Root, { ...rest, ...scope, min: min, max: max, step: step, format: format, locale: locale, orientation: orientation, className: resolvedClassName },
+        label == null ? null : (React.createElement(BaseSlider.Label, { className: styles.label }, label)),
+        React.createElement(BaseSlider.Value, { className: styles.value }, formatValue ?? null),
+        React.createElement(BaseSlider.Control, { className: styles.control },
+            React.createElement(BaseSlider.Track, { className: styles.track },
+                React.createElement(BaseSlider.Indicator, { className: styles.indicator }),
+                thumbs.map((index) => (React.createElement(BaseSlider.Thumb, { key: index, index: thumbCount > 1 ? index : undefined, "aria-label": thumbLabels?.[index], className: styles.thumb },
+                    React.createElement(Ground, { kind: "face", preset: overlayScope.ground, render: React.createElement("span", null), className: styles.chip, "aria-hidden": "true" },
+                        React.createElement(BaseSlider.Value, { render: React.createElement("span", null) }, (formatted) => formatted[index])),
+                    React.createElement(DisabledEdge, null)))),
+                React.createElement(DisabledEdge, null))),
+        ticks));
+}
+//# sourceMappingURL=Slider.js.map

package/components/Slider/Slider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Slider.js","sourceRoot":"","sources":["../../src/components/Slider/Slider.tsx"],"names":[],"mappings":"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"}

package/components/Slider/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Slider';
+//# sourceMappingURL=index.d.ts.map

package/components/Slider/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/Slider/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAA"}

package/components/Slider/index.js

@@ -0,0 +1,2 @@
+export * from './Slider';
+//# sourceMappingURL=index.js.map

package/components/Slider/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/components/Slider/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAA"}