@sableui/react 0.15.0 → 0.17.0

package/dist/components/meter/meter.js

@@ -1,22 +1,30 @@
 // src/components/meter/meter.tsx
 import { Meter as Base } from "@base-ui/react/meter";
-import { createContext, useContext } from "react";
+import { createContext, useContext, useState } from "react";
 import { cn } from "../../lib/cn.js";
 import {
   meterIndicatorVariants,
   meterRingValueVariants,
   meterRingVariants,
+  meterSegmentedTrackVariants,
+  meterTickVariants,
   meterTrackVariants
 } from "./meter.variants.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 var ToneContext = createContext("primary");
 var SizeContext = createContext(void 0);
+var SegmentsContext = createContext(null);
+function filledTicks({ count, value, min, max }) {
+  if (value == null || value <= min) return 0;
+  const ratio = max === min ? 1 : Math.min(1, (value - min) / (max - min));
+  return Math.min(count, Math.max(1, Math.round(ratio * count)));
+}
 var RING_TONE_STROKE = {
   primary: "var(--primary)",
-  "3": "var(--tone-3)",
-  success: "var(--success)",
-  warning: "var(--tone-warning)",
-  destructive: "var(--destructive)"
+  "3": "var(--tone-3-mark)",
+  success: "var(--success-mark)",
+  warning: "var(--tone-warning-mark)",
+  destructive: "var(--destructive-mark)"
 };
 function MeterRing({
   value,
@@ -53,15 +61,30 @@ function MeterRing({
     showValue ? /* @__PURE__ */ jsx(MeterValue, { className: meterRingValueVariants({ size }) }) : null
   ] });
 }
-function Meter({ className, children, tone = "primary", shape = "bar", size, strokeWidth = 6, showValue, ...props }) {
+function Meter({ className, children, tone = "primary", shape = "bar", size, strokeWidth = 6, showValue, segments, ...props }) {
   if (shape === "ring") {
     return /* @__PURE__ */ jsx(ToneContext.Provider, { value: tone, children: /* @__PURE__ */ jsx(Base.Root, { className: cn(meterRingVariants({ size }), className), ...props, children: children ?? /* @__PURE__ */ jsx(MeterRing, { value: props.value ?? null, min: props.min, max: props.max, strokeWidth, showValue, tone, size }) }) });
   }
-  return /* @__PURE__ */ jsx(ToneContext.Provider, { value: tone, children: /* @__PURE__ */ jsx(SizeContext.Provider, { value: size, children: /* @__PURE__ */ jsx(Base.Root, { className: cn("w-full", className), ...props, children: children ?? /* @__PURE__ */ jsx(MeterTrack, {}) }) }) });
+  const count = segments != null && Number.isFinite(segments) && segments >= 1 ? Math.floor(segments) : 0;
+  const segmented = count ? { count, value: props.value ?? null, min: props.min ?? 0, max: props.max ?? 100 } : null;
+  return /* @__PURE__ */ jsx(ToneContext.Provider, { value: tone, children: /* @__PURE__ */ jsx(SizeContext.Provider, { value: size, children: /* @__PURE__ */ jsx(SegmentsContext.Provider, { value: segmented, children: /* @__PURE__ */ jsx(Base.Root, { className: cn("w-full", className), ...props, children: children ?? /* @__PURE__ */ jsx(MeterTrack, {}) }) }) }) });
 }
 Meter.displayName = "Meter";
 function MeterTrack({ className, children, size, ...props }) {
   const inherited = useContext(SizeContext);
+  const tone = useContext(ToneContext);
+  const segments = useContext(SegmentsContext);
+  if (segments) {
+    return /* @__PURE__ */ jsx(
+      Base.Track,
+      {
+        "data-segmented": "",
+        className: cn(meterSegmentedTrackVariants({ size: size ?? inherited }), className),
+        ...props,
+        children: /* @__PURE__ */ jsx(MeterTicks, { count: segments.count, filled: filledTicks(segments), tone })
+      }
+    );
+  }
   return /* @__PURE__ */ jsx(
     Base.Track,
     {
@@ -72,6 +95,29 @@ function MeterTrack({ className, children, size, ...props }) {
   );
 }
 MeterTrack.displayName = "MeterTrack";
+function MeterTicks({ count, filled, tone }) {
+  const [shown, setShown] = useState(filled);
+  const [from, setFrom] = useState(filled);
+  if (filled !== shown) {
+    setFrom(shown);
+    setShown(filled);
+  }
+  return Array.from({ length: count }, (_, i) => {
+    const isFilled = i < filled;
+    const step = filled > from && i >= from && i < filled ? i - from : filled < from && i >= filled && i < from ? from - 1 - i : 0;
+    return /* @__PURE__ */ jsx(
+      "span",
+      {
+        "aria-hidden": "true",
+        "data-slot": "meter-tick",
+        "data-filled": isFilled ? "" : void 0,
+        className: meterTickVariants({ tone, filled: isFilled }),
+        style: step ? { transitionDelay: `calc(var(--motion-duration-slow) * ${Number((step / count).toFixed(4))} * var(--motion-expressive, 1))` } : void 0
+      },
+      i
+    );
+  });
+}
 function MeterIndicator({ className, tone, ...props }) {
   const inherited = useContext(ToneContext);
   return /* @__PURE__ */ jsx(

package/dist/components/meter/meter.meta.js

@@ -11,7 +11,12 @@ var meterMeta = {
     "capacity",
     "limit",
     "password strength",
-    "level"
+    "level",
+    "segmented",
+    "tick bar",
+    "score",
+    "credits",
+    "spend limit"
   ],
   usage: {
     description: "Use Meter to show a static measurement against a known maximum \u2014 storage used, seats taken, API quota, password strength. It is announced as a meter, not a progress bar, so a screen-reader user hears a level rather than a task underway.",
@@ -36,6 +41,15 @@ var meterMeta = {
       {
         guidance: "do",
         description: 'Use shape="ring" when the reading is a score that belongs in a small, glanceable spot on a card. It is the same measurement drawn as a circular gauge, not a different component.'
+      },
+      {
+        guidance: "do",
+        description: "Use `segments` (a tick bar, \u25AE\u25AE\u25AE\u25AE\u25AE\u25AE\u25AF\u25AF\u25AF\u25AF) for a discrete budget, score or quota read at a glance \u2014 a spend limit, credits left, an ICP lead score, months of data coverage. Pick a count that matches the unit when there is one (10 for a score out of 10, 12 for months) and otherwise size it to the track: a tick reads as a tick when it is taller than it is wide, about one per 8px of track (40 across a card row, 20 in a narrow table cell). Any reading above min shows at least one tick."
+      },
+      {
+        guidance: "dont",
+        description: "Do not segment a fine-grained continuous value where the exact proportion matters (disk at 73.4%) \u2014 ticks round it to the nearest mark; use the continuous bar. And do not use a tick bar for a task in flight or steps completed: that is Progress, or a Stepper for named steps.",
+        instead: ["Progress"]
       }
     ],
     anatomy: [
@@ -47,7 +61,7 @@ var meterMeta = {
       {
         name: "MeterIndicator",
         required: true,
-        description: "The fill, sized from value and coloured by tone."
+        description: "The fill, sized from value and coloured by tone. Not used with `segments`: the track draws its ticks instead."
       },
       {
         name: "MeterLabel",
@@ -105,6 +119,11 @@ var meterMeta = {
       type: "boolean",
       description: "Print the value in the ring's centre (formatted like MeterValue)."
     },
+    {
+      name: "segments",
+      type: "number",
+      description: 'Draw the bar as this many separate ticks instead of a continuous fill (a quota, score or spend limit). Filled ticks = round(share \xD7 N), at least one for any reading above min, none at min. Ticks take the tone; empty ones sit on the rail colour. The segmented track has its own, taller sm / md / lg ladder. Bar only: ignored for shape="ring".'
+    },
     {
       name: "strokeWidth",
       type: "number",
@@ -131,7 +150,7 @@ var meterMeta = {
     {
       name: "MeterTrack",
       type: "Base UI Track props + className + size",
-      description: "The rail. Rendered automatically when Meter has no children; renders a MeterIndicator by default."
+      description: "The rail. Rendered automatically when Meter has no children; renders a MeterIndicator by default \u2014 or, when the Meter has `segments`, its row of ticks (children are not rendered then)."
     },
     {
       name: "MeterIndicator",
@@ -157,11 +176,16 @@ var meterMeta = {
   tokensUsed: [
     "secondary",
     "primary",
+    "tone-3",
     "success",
     "tone-warning",
     "destructive",
     "foreground",
-    "muted-foreground"
+    "muted-foreground",
+    "destructive-mark",
+    "success-mark",
+    "tone-warning-mark",
+    "tone-3-mark"
   ],
   motion: [
     {
@@ -182,6 +206,12 @@ var meterMeta = {
       part: "MeterIndicator",
       why: "Width and colour ease on the motion tokens (no recipe animates width) when the reading changes \u2014 freeing space after a delete visibly shrinks the bar, so the user sees the cause and effect rather than a different bar."
     },
+    {
+      slot: "transition",
+      recipe: "custom",
+      part: "MeterTrack (segments)",
+      why: "With segments, the fill runs through the ticks from the edge it is leaving \u2014 left to right as it grows, right to left as it shrinks \u2014 each tick easing its colour on the fast token after a stagger that is a share of the slow token (a full sweep is one slow duration) \xD7 --motion-expressive. Every tick switching at once would read as a different bar, not the same budget moving; `subtle` lands them together and off is instant."
+    },
     {
       slot: "activity",
       recipe: "none",
@@ -212,6 +242,23 @@ var meterMeta = {
 	</div>
 	<MeterTrack />
 </Meter>`
+    },
+    {
+      label: "Segmented spend limit",
+      code: `<Meter value={1240} max={2000} segments={40} getAriaValueText={() => "\u20AC1,240 of \u20AC2,000 spent this month"}>
+	<div className="mb-2 flex flex-wrap items-center justify-between gap-x-3 gap-y-1">
+		<MeterLabel>Monthly spend limit</MeterLabel>
+		<MeterValue>{() => "\u20AC1,240 / \u20AC2,000"}</MeterValue>
+	</div>
+	<MeterTrack />
+</Meter>`
+    },
+    {
+      label: "Segmented score cell",
+      code: `<div className="flex items-center gap-3">
+	<Meter value={8} max={10} segments={10} size="sm" tone="success" className="w-24" aria-label="ICP score" getAriaValueText={(_, v) => \`\${v} out of 10\`} />
+	<span className="text-mono-sm text-foreground">8/10</span>
+</div>`
     },
     {
       label: "Tones",

package/dist/components/meter/meter.variants.js

@@ -1,16 +1,17 @@
 // src/components/meter/meter.variants.ts
 import { cva } from "class-variance-authority";
+var meterToneFill = {
+  primary: "bg-primary",
+  "3": "bg-tone-3-mark",
+  success: "bg-success-mark",
+  warning: "bg-tone-warning-mark",
+  destructive: "bg-destructive-mark"
+};
 var meterIndicatorVariants = cva(
   "h-full rounded-full transition-[width,background-color] duration-(--motion-duration-slow) ease-decelerate",
   {
     variants: {
-      tone: {
-        primary: "bg-primary",
-        "3": "bg-tone-3",
-        success: "bg-success",
-        warning: "bg-tone-warning",
-        destructive: "bg-destructive"
-      }
+      tone: meterToneFill
     },
     defaultVariants: {
       tone: "primary"
@@ -29,6 +30,39 @@ var meterTrackVariants = cva("relative w-full overflow-hidden rounded-full bg-se
     size: "md"
   }
 });
+var meterSegmentedTrackVariants = cva("flex w-full gap-0.5", {
+  variants: {
+    size: {
+      sm: "h-3",
+      md: "h-4",
+      lg: "h-5"
+    }
+  },
+  defaultVariants: {
+    size: "md"
+  }
+});
+var meterTickVariants = cva(
+  // The corner follows the theme's smallest radius but stops at half a spacing
+  // step: a tick is a few px wide, and at the full radius-xs (4px in most
+  // themes) it rounded into a pill and the row read as a string of beads.
+  "h-full min-w-0 flex-1 rounded-[min(var(--radius-xs),--spacing(0.5))] transition-[background-color] duration-(--motion-duration-fast) ease-standard",
+  {
+    variants: {
+      tone: { primary: "", "3": "", success: "", warning: "", destructive: "" },
+      filled: { true: "", false: "bg-secondary" }
+    },
+    compoundVariants: Object.keys(meterToneFill).map((tone) => ({
+      tone,
+      filled: true,
+      class: meterToneFill[tone]
+    })),
+    defaultVariants: {
+      tone: "primary",
+      filled: false
+    }
+  }
+);
 var meterRingValueVariants = cva("absolute inset-0 flex items-center justify-center text-foreground", {
   variants: {
     size: {
@@ -57,5 +91,7 @@ export {
   meterIndicatorVariants,
   meterRingValueVariants,
   meterRingVariants,
+  meterSegmentedTrackVariants,
+  meterTickVariants,
   meterTrackVariants
 };

package/dist/components/note/note.meta.js

@@ -83,7 +83,11 @@ var noteMeta = {
     "tone-info",
     "tone-warning",
     "success",
-    "destructive"
+    "destructive",
+    "destructive-mark",
+    "success-mark",
+    "tone-warning-mark",
+    "tone-info-mark"
   ],
   motion: [
     {

package/dist/components/note/note.variants.js

@@ -5,10 +5,10 @@ var noteVariants = cva(
   {
     variants: {
       tone: {
-        info: "border-tone-info/30 bg-tone-info/10",
-        warning: "border-tone-warning/30 bg-tone-warning/10",
-        success: "border-success/30 bg-success/10",
-        destructive: "border-destructive/30 bg-destructive/10",
+        info: "border-tone-info-mark/30 bg-tone-info-mark/10",
+        warning: "border-tone-warning-mark/30 bg-tone-warning-mark/10",
+        success: "border-success-mark/30 bg-success-mark/10",
+        destructive: "border-destructive-mark/30 bg-destructive-mark/10",
         neutral: "border-border bg-muted/40"
       }
     },

package/dist/components/number-field/number-field.meta.js

@@ -80,8 +80,8 @@ var numberFieldMeta = {
     }
   ],
   tokensUsed: [
-    "input",
-    "card",
+    "field-border",
+    "field",
     "foreground",
     "muted-foreground",
     "accent",

package/dist/components/otp-field/otp-field.meta.js

@@ -142,8 +142,8 @@ var otpFieldMeta = {
     }
   ],
   tokensUsed: [
-    "input",
-    "card",
+    "field-border",
+    "field",
     "foreground",
     "muted-foreground",
     "border-strong",

package/dist/components/panel-group/panel-group.js

@@ -107,14 +107,11 @@ function PanelResizer({
       const delta = side === "left" ? ev.clientX - startX : startX - ev.clientX;
       onWidthChange(startWidth + delta);
     }
-    function onUp() {
-      window.removeEventListener("pointermove", onMove);
-      window.removeEventListener("pointerup", onUp);
-      window.removeEventListener("pointercancel", onUp);
-    }
-    window.addEventListener("pointermove", onMove);
-    window.addEventListener("pointerup", onUp);
-    window.addEventListener("pointercancel", onUp);
+    const drag = new AbortController();
+    const { signal } = drag;
+    window.addEventListener("pointermove", onMove, { signal });
+    window.addEventListener("pointerup", () => drag.abort(), { signal });
+    window.addEventListener("pointercancel", () => drag.abort(), { signal });
   }
   function onKeyDown(e) {
     const grow = side === "left" ? "ArrowRight" : "ArrowLeft";

package/dist/components/pie-chart/pie-chart.meta.js

@@ -168,7 +168,12 @@ var pieChartMeta = {
     "popover",
     "popover-foreground",
     "foreground",
-    "background"
+    "background",
+    "tone-warning-mark",
+    "tone-info-mark",
+    "tone-1-mark",
+    "tone-2-mark",
+    "tone-3-mark"
   ],
   motion: [
     {

package/dist/components/radar-chart/radar-chart.meta.js

@@ -162,7 +162,12 @@ var radarChartMeta = {
     "popover",
     "popover-foreground",
     "foreground",
-    "background"
+    "background",
+    "tone-warning-mark",
+    "tone-info-mark",
+    "tone-1-mark",
+    "tone-2-mark",
+    "tone-3-mark"
   ],
   motion: [
     {

package/dist/components/radial-chart/radial-chart.meta.js

@@ -174,7 +174,12 @@ var radialChartMeta = {
     "popover",
     "popover-foreground",
     "foreground",
-    "background"
+    "background",
+    "tone-warning-mark",
+    "tone-info-mark",
+    "tone-1-mark",
+    "tone-2-mark",
+    "tone-3-mark"
   ],
   motion: [
     {

package/dist/components/search-input/search-input.meta.js

@@ -1,7 +1,7 @@
 // src/components/search-input/search-input.meta.ts
 var searchInputMeta = {
   name: "SearchInput",
-  summary: "Styled search field with a leading magnifier and a clearable X. Soft-square (rounded-sm), card surface, 2px focus ring; the clear button appears only when there is a value.",
+  summary: "Styled search field with a leading magnifier and a clearable X. Soft-square (rounded-sm), the theme's field surface, 2px focus ring; the clear button appears only when there is a value.",
   status: "stable",
   keywords: [
     "search",
@@ -24,6 +24,10 @@ var searchInputMeta = {
         guidance: "do",
         description: "When a button stands in for search (a header trigger that opens CommandMenu with \u2318K), use CommandMenuTrigger. It wears this field's shell from the same source, so the two cannot drift; a hand-styled button already did once, into a borderless chip that matched neither the field nor a button."
       },
+      {
+        guidance: "do",
+        description: "Light the query in the results it filters with `useMatchHighlight(query)` \u2014 a callback ref for the results container, with `selector` to keep it to titles. It paints on the `highlight` pair without wrapping matches in `<mark>`, the same paint Combobox and CommandMenu use for their rows."
+      },
       {
         guidance: "dont",
         description: "Do not use SearchInput as a command palette; use CommandMenu for global commands, opened from the header by CommandMenuTrigger. A SearchInput that opens a dialog on focus is a text box you cannot type in."
@@ -91,8 +95,8 @@ var searchInputMeta = {
     }
   ],
   tokensUsed: [
-    "input",
-    "card",
+    "field-border",
+    "field",
     "foreground",
     "muted-foreground",
     "ring",
@@ -144,6 +148,10 @@ var searchInputMeta = {
       label: "Uncontrolled, sized as a whole",
       code: '<Field label="Search posts"><SearchInput defaultValue="roadmap" className="max-w-80" /></Field>'
     },
+    {
+      label: "Highlighting matches in the results",
+      code: 'const [q, setQ] = useState("")\nconst results = useMatchHighlight<HTMLUListElement>(q, { selector: "[data-title]" })\nconst shown = posts.filter((post) => post.title.toLowerCase().includes(q.trim().toLowerCase()))\n\n<SearchInput value={q} onValueChange={setQ} placeholder="Search posts" />\n<ul ref={results}>\n	{shown.map((post) => (\n		<li key={post.id}><span data-title>{post.title}</span></li>\n	))}\n</ul>'
+    },
     {
       label: "Disabled",
       code: '<SearchInput disabled placeholder="Search" />'

package/dist/components/section-rail/index.js

@@ -0,0 +1,7 @@
+// src/components/section-rail/index.ts
+import { SectionRail } from "./section-rail.js";
+import { sectionRailMeta } from "./section-rail.meta.js";
+export {
+  SectionRail,
+  sectionRailMeta
+};

package/dist/components/section-rail/section-rail.js

@@ -0,0 +1,153 @@
+"use client";
+
+// src/components/section-rail/section-rail.tsx
+import {
+  useCallback,
+  useEffect,
+  useRef,
+  useState
+} from "react";
+import { cn } from "../../lib/cn.js";
+import { HighlightGlide } from "../../lib/highlight-glide.js";
+import { setRef } from "../../lib/refs.js";
+import { useActiveSection } from "../../lib/use-active-section.js";
+import { useMotionLevel } from "../../motion/MotionProvider.js";
+import { SimpleTooltip, TooltipGroup } from "../tooltip/index.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+var SCROLL_KEYS = /* @__PURE__ */ new Set(["ArrowUp", "ArrowDown", "PageUp", "PageDown", "Home", "End", " "]);
+var GLIDE_HANDOFF = "[&[data-glide]_[data-active]>[data-section-rail-mark]]:opacity-0";
+var GLIDE_MARK = "flex items-center justify-center motion-glide after:h-5 after:w-1 after:rounded-full after:bg-primary";
+function SectionRail({
+  sections,
+  value,
+  onValueChange,
+  offset,
+  root,
+  side = "left",
+  motion,
+  className,
+  "aria-label": ariaLabel = "Sections",
+  ref,
+  ...props
+}) {
+  const rail = useRef(null);
+  const setRail = useCallback(
+    (node) => {
+      rail.current = node;
+      setRef(ref, node);
+    },
+    [ref]
+  );
+  const { enabled, attribute } = useMotionLevel(motion);
+  const spied = useActiveSection(
+    sections.map((section) => section.id),
+    { offset, root }
+  );
+  const [picked, setPicked] = useState(null);
+  const internal = picked ?? spied;
+  const active = value ?? internal;
+  const report = useRef(onValueChange);
+  report.current = onValueChange;
+  const reported = useRef(internal);
+  useEffect(() => {
+    if (internal === null || internal === reported.current) return;
+    reported.current = internal;
+    report.current?.(internal);
+  }, [internal]);
+  useEffect(() => {
+    if (picked === null) return;
+    const release = () => setPicked(null);
+    const releaseOnKey = (event) => {
+      if (SCROLL_KEYS.has(event.key)) release();
+    };
+    const listeners = new AbortController();
+    const options = { passive: true, signal: listeners.signal };
+    window.addEventListener("wheel", release, options);
+    window.addEventListener("touchstart", release, options);
+    window.addEventListener("keydown", releaseOnKey, options);
+    window.addEventListener(
+      "pointerdown",
+      (event) => {
+        if (!(event.target instanceof Node && rail.current?.contains(event.target))) release();
+      },
+      options
+    );
+    return () => listeners.abort();
+  }, [picked]);
+  const jump = (event, id) => {
+    if (event.defaultPrevented || event.button !== 0) return;
+    if (event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) return;
+    const section = document.getElementById(id);
+    if (!section) return;
+    event.preventDefault();
+    setPicked(id);
+    const behavior = enabled ? "auto" : "instant";
+    const scroller = root?.current;
+    if (scroller) {
+      const margin = Number.parseFloat(getComputedStyle(section).scrollMarginTop) || 0;
+      const top = section.getBoundingClientRect().top - scroller.getBoundingClientRect().top - scroller.clientTop;
+      scroller.scrollTo({ top: scroller.scrollTop + top - margin, behavior });
+    } else {
+      section.scrollIntoView({ behavior, block: "start" });
+      window.history.replaceState(window.history.state, "", `#${id}`);
+    }
+    if (event.detail === 0) {
+      if (!section.hasAttribute("tabindex")) {
+        section.setAttribute("tabindex", "-1");
+        section.addEventListener("blur", () => section.removeAttribute("tabindex"), { once: true });
+      }
+      section.focus({ preventScroll: true });
+    }
+  };
+  return /* @__PURE__ */ jsxs(
+    "nav",
+    {
+      ref: setRail,
+      "aria-label": ariaLabel,
+      "data-motion": attribute,
+      className: cn(
+        "relative flex w-fit flex-col rounded-full bg-muted py-2",
+        GLIDE_HANDOFF,
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(HighlightGlide, { follow: "data-active", timing: "selection", className: GLIDE_MARK }),
+        /* @__PURE__ */ jsx(TooltipGroup, { motion, children: sections.map((section) => {
+          const current = section.id === active;
+          return /* @__PURE__ */ jsx(
+            SimpleTooltip,
+            {
+              content: section.label,
+              side: side === "left" ? "right" : "left",
+              children: /* @__PURE__ */ jsx(
+                "a",
+                {
+                  href: `#${section.id}`,
+                  "aria-label": section.label,
+                  "aria-current": current ? "location" : void 0,
+                  "data-active": current ? "" : void 0,
+                  onClick: (event) => jump(event, section.id),
+                  className: "group/rail-link relative flex h-(--control-sm) w-11 items-center justify-center rounded-full text-muted-foreground outline-none motion-interactive hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring",
+                  children: /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      "aria-hidden": true,
+                      "data-section-rail-mark": "",
+                      className: "size-1 rounded-full bg-current motion-interactive group-hover/rail-link:scale-150 group-focus-visible/rail-link:scale-150 group-data-[active]/rail-link:h-5 group-data-[active]/rail-link:bg-primary"
+                    }
+                  )
+                }
+              )
+            },
+            section.id
+          );
+        }) })
+      ]
+    }
+  );
+}
+SectionRail.displayName = "SectionRail";
+export {
+  SectionRail
+};