@sableui/react 0.6.2 → 0.7.1

package/dist/components/file-dropzone/index.js

@@ -0,0 +1,13 @@
+// src/components/file-dropzone/index.ts
+import {
+  FileDropzone,
+  formatFileSize
+} from "./file-dropzone.js";
+import { fileDropzoneVariants } from "./file-dropzone.variants.js";
+import { fileDropzoneMeta } from "./file-dropzone.meta.js";
+export {
+  FileDropzone,
+  fileDropzoneMeta,
+  fileDropzoneVariants,
+  formatFileSize
+};

package/dist/components/font-picker/font-picker.js

@@ -0,0 +1,77 @@
+"use client";
+
+// src/components/font-picker/font-picker.tsx
+import { useEffect, useMemo, useState } from "react";
+import {
+  DisclosurePicker,
+  DisclosurePickerEmpty,
+  DisclosurePickerList,
+  DisclosurePickerOption,
+  DisclosurePickerPanel,
+  DisclosurePickerTrigger
+} from "../disclosure-picker/disclosure-picker.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+var faceOf = (font) => font.stack ?? `"${font.family}"`;
+function FontPicker({
+  value,
+  onValueChange,
+  fonts,
+  options = [],
+  label,
+  listLabel = "Font",
+  searchable = true,
+  searchLabel = "Search fonts",
+  loadFont,
+  open: openProp,
+  defaultOpen = false,
+  onOpenChange,
+  ...props
+}) {
+  const [query, setQuery] = useState("");
+  const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen);
+  const open = openProp ?? uncontrolledOpen;
+  const setOpen = (next) => {
+    if (openProp === void 0) setUncontrolledOpen(next);
+    onOpenChange?.(next);
+  };
+  useEffect(() => {
+    if (open && loadFont) for (const font of fonts) loadFont(font, "preview");
+  }, [open, fonts, loadFont]);
+  const chosenFont = fonts.find((font) => font.family === value);
+  useEffect(() => {
+    if (chosenFont && loadFont) loadFont(chosenFont, "use");
+  }, [chosenFont, loadFont]);
+  const q = query.trim().toLowerCase();
+  const shownFonts = useMemo(
+    () => q ? fonts.filter((font) => font.family.toLowerCase().includes(q) || font.note?.toLowerCase().includes(q)) : fonts,
+    [fonts, q]
+  );
+  const shownOptions = q ? options.filter((option) => option.label.toLowerCase().includes(q)) : options;
+  const chosenOption = options.find((option) => option.value === value);
+  const current = chosenOption ? chosenOption.valueLabel ?? chosenOption.label : value;
+  const currentFace = chosenOption ? void 0 : chosenFont ? faceOf(chosenFont) : `"${value}"`;
+  return /* @__PURE__ */ jsxs(DisclosurePicker, { open, onOpenChange: setOpen, ...props, children: [
+    /* @__PURE__ */ jsx(DisclosurePickerTrigger, { label, children: /* @__PURE__ */ jsx("span", { style: { fontFamily: currentFace }, children: current }) }),
+    /* @__PURE__ */ jsxs(
+      DisclosurePickerPanel,
+      {
+        search: searchable ? { value: query, onValueChange: setQuery, placeholder: `Search ${fonts.length} fonts`, label: searchLabel } : void 0,
+        children: [
+          shownOptions.length + shownFonts.length > 0 ? /* @__PURE__ */ jsxs(DisclosurePickerList, { "aria-label": listLabel, value, onValueChange, children: [
+            shownOptions.map((option) => /* @__PURE__ */ jsx(DisclosurePickerOption, { value: option.value, children: option.label }, option.value)),
+            shownFonts.map((font) => /* @__PURE__ */ jsx(DisclosurePickerOption, { value: font.family, note: font.note, children: /* @__PURE__ */ jsx("span", { style: { fontFamily: faceOf(font) }, children: font.family }) }, font.family))
+          ] }) : null,
+          shownFonts.length === 0 && q ? /* @__PURE__ */ jsxs(DisclosurePickerEmpty, { children: [
+            "No fonts match \u201C",
+            query,
+            "\u201D."
+          ] }) : null
+        ]
+      }
+    )
+  ] });
+}
+FontPicker.displayName = "FontPicker";
+export {
+  FontPicker
+};

package/dist/components/font-picker/font-picker.meta.js

@@ -0,0 +1,119 @@
+// src/components/font-picker/font-picker.meta.ts
+var fontPickerMeta = {
+  name: "FontPicker",
+  summary: "A DisclosurePicker for a typeface: the row names the chosen family in its own face and opens in place into a searchable list of families, each drawn in itself. The app supplies the families and loads the faces; Sable bundles no catalog.",
+  status: "stable",
+  keywords: ["font picker", "typeface", "font family", "font selector", "typography", "google fonts", "inspector", "customizer"],
+  usage: {
+    description: "Use FontPicker wherever someone chooses a typeface for a role (body, headings, code) in a panel that shows the result: a theme editor, a document inspector, a brand customizer. It is a DisclosurePicker, so the list opens beneath the row rather than over the preview; arrow keys walk the families (each drawn in its own face) without applying or loading anything, and Enter, Space or a click picks one, loads it and closes the row.",
+    bestPractices: [
+      {
+        guidance: "do",
+        description: 'Pass `loadFont` and load faces lazily: `"preview"` fires for every family when the list opens (load just the glyphs of its name \u2014 Google Fonts\' `text=` parameter makes a 20-font list cost a few KB), `"use"` for the chosen one (load its real weights). Make it idempotent and define it once, outside render.'
+      },
+      {
+        guidance: "do",
+        description: 'Put non-font choices \u2014 "Preset (Figtree)", "Same as body" \u2014 in `options`, with a short `valueLabel` for the row. They list first and render in the app\'s face, so they never read as a family.'
+      },
+      {
+        guidance: "do",
+        description: 'Give each row a role `label` ("Body", "Headings", "Mono") and stack them; the caption column aligns. Control `open` from the parent so only one list is open at a time.'
+      },
+      {
+        guidance: "dont",
+        description: "Leave search on for a short curated list \u2014 under a dozen families, pass `searchable={false}`. Search is on by default because font lists are usually long."
+      },
+      {
+        guidance: "dont",
+        description: "Use a Select of family names for this. A popup covers the text it changes, and a family name set in the app's face says nothing about the face."
+      }
+    ]
+  },
+  related: { components: ["DisclosurePicker", "ThemeSelector", "Select", "Combobox"] },
+  props: [
+    { name: "value", type: "string", description: "The chosen family, or the value of one of `options`." },
+    {
+      name: "onValueChange",
+      type: "(value: string) => void",
+      description: "Called once a family (or option) is picked \u2014 Enter, Space or a click \u2014 and only when it differs from `value`; the row then closes. Arrow keys and type-ahead only move focus; Escape closes without a pick."
+    },
+    { name: "fonts", type: "readonly { family: string; note?: string; stack?: string }[]", description: 'The families to offer, in order. `note` is a muted annotation (searched too); `stack` the CSS font-family to draw it in (default `"<family>"`).' },
+    {
+      name: "options",
+      type: "readonly { value: string; label: string; valueLabel?: string }[]",
+      default: "[]",
+      description: "Non-font choices listed above the fonts, in the app's face. `valueLabel` is what the row shows while it is chosen."
+    },
+    { name: "label", type: "ReactNode", description: "The row's leading caption \u2014 the role the font plays." },
+    { name: "listLabel", type: "string", default: '"Font"', description: "Accessible name of the list." },
+    {
+      name: "searchable",
+      type: "boolean",
+      default: "true",
+      description: "A search field above the list, filtering by family and note. Pass false for a short curated list (under a dozen)."
+    },
+    { name: "searchLabel", type: "string", default: '"Search fonts"', description: "Accessible name of the search field." },
+    {
+      name: "loadFont",
+      type: '(font, purpose: "preview" | "use") => void',
+      description: 'Loads a face on demand: "preview" for every family when the list opens, "use" for the chosen one once it is picked (never while the list is only being walked). Receives your own font objects. Idempotent.'
+    },
+    { name: "open", type: "boolean", description: "Controlled open state, as DisclosurePicker. Control it to keep one of several rows open at a time." },
+    { name: "defaultOpen", type: "boolean", default: "false", description: "Uncontrolled initial open state." },
+    { name: "onOpenChange", type: "(open: boolean) => void", description: "Called with the next open state." },
+    { name: "size", type: '"md" | "xs"', default: '"md"', description: "md for a settings column; xs for the property-grid rung (see DisclosurePicker)." }
+  ],
+  tokensUsed: ["foreground", "muted-foreground", "popover", "hairline", "panel-field", "ring"],
+  a11y: [
+    "Inherits DisclosurePicker: a button trigger with aria-expanded/controls whose name is the caption plus the family; a listbox named by `listLabel`, aria-selected on the chosen family.",
+    "Keyboard open focuses the search field; ArrowDown steps from it into the list (ArrowUp from the first option steps back); arrows, Home/End and type-ahead move without applying; Enter or Space picks and closes; Escape clears the query, then closes without a pick and returns focus to the row.",
+    "Each family is set in its own face, but its name is still plain text, so a screen reader reads the name, not the glyphs."
+  ],
+  motion: [
+    { slot: "arrival", recipe: "none", part: "root", why: "A property row is present from first paint." },
+    { slot: "response", recipe: "motion-interactive", part: "Trigger", why: "Inherited from DisclosurePicker: the hover step says the value row opens." },
+    { slot: "transition", recipe: "motion-disclosure", part: "Panel", why: "Inherited from DisclosurePicker: the list grows in place, tying the panel's movement to this row." },
+    { slot: "activity", recipe: "none", part: "root", why: "Faces load in the background and swap in when ready; the names are legible in the fallback meanwhile, so there is nothing to wait on." }
+  ],
+  examples: [
+    {
+      label: "Body font with lazy loading",
+      code: `const FONTS = [
+  { family: "Inter", note: "Neutral, dense UI" },
+  { family: "Figtree", note: "Friendly geometric" },
+  { family: "Fraunces", note: "Soft, wonky serif", stack: '"Fraunces", serif' },
+]
+// Your loader; Sable never fetches fonts itself.
+const loadFont = (font: { family: string }, purpose: "preview" | "use") => {
+  const id = \`font-\${purpose}-\${font.family}\`
+  if (document.getElementById(id)) return
+  const link = Object.assign(document.createElement("link"), { id, rel: "stylesheet" })
+  const family = font.family.replace(/ /g, "+")
+  link.href = purpose === "preview"
+    ? \`https://fonts.googleapis.com/css2?family=\${family}&text=\${encodeURIComponent(font.family)}\`
+    : \`https://fonts.googleapis.com/css2?family=\${family}:wght@400..700&display=swap\`
+  document.head.appendChild(link)
+}
+const [family, setFamily] = useState("Inter")
+<FontPicker label="Body" listLabel="Body font" value={family} onValueChange={setFamily} fonts={FONTS} loadFont={loadFont} searchable={false} />`
+    },
+    {
+      label: "With a preset option, one row of several",
+      code: `const [open, setOpen] = useState<string | null>(null)
+const [body, setBody] = useState("theme")
+<FontPicker
+  label="Body"
+  listLabel="Body font"
+  value={body}
+  onValueChange={setBody}
+  options={[{ value: "theme", label: "Preset (Figtree)", valueLabel: "Figtree" }]}
+  fonts={[{ family: "Inter" }, { family: "Figtree" }, { family: "Geist" }]}
+  open={open === "body"}
+  onOpenChange={(next) => setOpen(next ? "body" : null)}
+/>`
+    }
+  ]
+};
+export {
+  fontPickerMeta
+};

package/dist/components/font-picker/index.js

@@ -0,0 +1,7 @@
+// src/components/font-picker/index.ts
+import { FontPicker } from "./font-picker.js";
+import { fontPickerMeta } from "./font-picker.meta.js";
+export {
+  FontPicker,
+  fontPickerMeta
+};

package/dist/components/form/form.js

@@ -0,0 +1,145 @@
+"use client";
+
+// src/components/form/form.tsx
+import { Field as BaseField } from "@base-ui/react/field";
+import { Form as BaseForm } from "@base-ui/react/form";
+import {
+  Children,
+  cloneElement,
+  useId,
+  useRef
+} from "react";
+import { cn } from "../../lib/cn.js";
+import { Label } from "../label/index.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function Form({
+  className,
+  onSubmit,
+  onFormSubmit,
+  noValidate,
+  ...props
+}) {
+  const blockedRef = useRef(false);
+  const handleSubmit = (event) => {
+    blockedRef.current = false;
+    const form = event.currentTarget;
+    if (!noValidate && !form.checkValidity()) {
+      event.preventDefault();
+      blockedRef.current = true;
+      form.reportValidity();
+      return;
+    }
+    onSubmit?.(event);
+  };
+  return /* @__PURE__ */ jsx(
+    BaseForm,
+    {
+      className: cn("flex flex-col gap-6", className),
+      onSubmit: handleSubmit,
+      onFormSubmit: onFormSubmit ? (values, details) => {
+        if (!blockedRef.current) onFormSubmit(values, details);
+      } : void 0,
+      ...props
+    }
+  );
+}
+Form.displayName = "Form";
+function Field({
+  label,
+  description,
+  error,
+  required,
+  disabled,
+  name,
+  validate,
+  validationMode,
+  validationDebounceTime,
+  orientation = "vertical",
+  className,
+  children
+}) {
+  const generatedId = useId();
+  const child = Children.only(children);
+  const controlId = child.props.id ?? generatedId;
+  const descId = description ? `${controlId}-description` : void 0;
+  const errId = `${controlId}-error`;
+  const hasError = error != null && error !== false && error !== "";
+  const labelNode = label ? /* @__PURE__ */ jsxs(
+    BaseField.Label,
+    {
+      htmlFor: controlId,
+      render: /* @__PURE__ */ jsx(Label, {}),
+      className: "data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50",
+      children: [
+        label,
+        required ? /* @__PURE__ */ jsxs("span", { "aria-hidden": "true", className: "text-destructive", children: [
+          " ",
+          "*"
+        ] }) : null
+      ]
+    }
+  ) : null;
+  const control = /* @__PURE__ */ jsx(BaseField.Validity, { children: ({ validity }) => {
+    const errorShown = hasError || validity.valid === false;
+    const describedBy = [child.props["aria-describedby"], descId, errorShown ? errId : null].filter(Boolean).join(" ") || void 0;
+    return cloneElement(child, {
+      id: controlId,
+      ...describedBy ? { "aria-describedby": describedBy } : null,
+      ...hasError ? { "aria-invalid": true } : null,
+      ...required != null ? { required } : null,
+      ...disabled ? { disabled: true } : null
+    });
+  } });
+  const descriptionNode = description ? /* @__PURE__ */ jsx(
+    BaseField.Description,
+    {
+      id: descId,
+      className: "text-body-sm text-muted-foreground",
+      children: description
+    }
+  ) : null;
+  const errorNode = /* @__PURE__ */ jsx(
+    BaseField.Error,
+    {
+      id: errId,
+      className: "text-body-sm text-destructive",
+      ...hasError ? { match: true, children: error } : null
+    }
+  );
+  return /* @__PURE__ */ jsx(
+    BaseField.Root,
+    {
+      className: cn("flex flex-col gap-1.5", className),
+      invalid: hasError || void 0,
+      disabled,
+      name,
+      validate,
+      validationMode,
+      validationDebounceTime,
+      children: orientation === "horizontal" ? (
+        // Control beside a text column. The control sits in a box one LABEL
+        // line tall (`h-[1lh]` in the label's own type step), so it centres
+        // on the first line and stays there when the label wraps. Helper and
+        // error text live in the label's column, not under the control.
+        /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-2", children: [
+          /* @__PURE__ */ jsx("div", { className: "flex h-[1lh] shrink-0 items-center text-label-lg", children: control }),
+          /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-col gap-1.5", children: [
+            labelNode,
+            descriptionNode,
+            errorNode
+          ] })
+        ] })
+      ) : /* @__PURE__ */ jsxs(Fragment, { children: [
+        labelNode,
+        control,
+        descriptionNode,
+        errorNode
+      ] })
+    }
+  );
+}
+Field.displayName = "Field";
+export {
+  Field,
+  Form
+};

package/dist/components/form/form.meta.js

@@ -0,0 +1,142 @@
+// src/components/form/form.meta.ts
+var formMeta = {
+  name: "Form",
+  summary: "A styled <form> plus Field \u2014 the form orchestration layer, built on Base UI Form and Field. Field wires a label, control, helper text, and error message together with correct a11y (htmlFor, aria-labelledby, aria-describedby, aria-invalid, required) automatically, around any Sable control. Validation-library-agnostic: pass each Field an error string, or let Form check native constraints and Field validate functions on submit.",
+  keywords: [
+    "form",
+    "field",
+    "label",
+    "validation",
+    "error",
+    "required",
+    "settings",
+    "input"
+  ],
+  usage: {
+    description: "Use Form and Field as the default wrapper for Sable form controls. Field owns the label, description, required state, and error wiring so agents do not hand-roll inconsistent label/input relationships.",
+    bestPractices: [
+      {
+        guidance: "do",
+        description: "Wrap each control in Field unless a specialized component already owns its label and error semantics."
+      },
+      {
+        guidance: "do",
+        description: "Use Field error for validation messages so aria-invalid and aria-describedby are wired together."
+      },
+      {
+        guidance: "do",
+        description: 'For built-in checks, put required / type="email" / minLength on the control (or a validate function on Field) inside a Form: on submit the message appears under the field and the first invalid control is focused. Pass server errors to Form errors, keyed by Field name.'
+      },
+      {
+        guidance: "do",
+        description: "Use horizontal Field orientation only for one-line boolean controls like Checkbox, Switch, or Radio."
+      },
+      {
+        guidance: "dont",
+        description: "Use placeholder text as the only label. A visible label should identify the field."
+      },
+      {
+        guidance: "dont",
+        description: "Wrap multiple controls in one Field. Field expects a single child control and wires that one control (an Input or Textarea nested in a wrapper is still found through context)."
+      }
+    ],
+    anatomy: [
+      {
+        name: "Form",
+        required: true,
+        description: "The native form element (Base UI Form) with vertical field spacing; validates its Fields on submit."
+      },
+      {
+        name: "Field",
+        required: true,
+        description: "The label/control/helper/error wrapper for one control."
+      },
+      {
+        name: "Control",
+        required: true,
+        description: "The single Sable control. Base UI-backed controls register with Field through context; the child is also cloned with the same wiring."
+      },
+      {
+        name: "Error",
+        required: false,
+        description: "Validation copy associated with the control: the error prop when set, otherwise the Base UI validation message (native constraint, validate function, or Form errors)."
+      }
+    ]
+  },
+  related: {
+    components: ["Input", "Textarea", "Select", "Checkbox", "Switch", "Button"],
+    patterns: ["SettingsPage", "AuthPage"]
+  },
+  status: "stable",
+  props: [
+    {
+      name: "Form",
+      type: '{ validationMode?: "onSubmit" | "onBlur" | "onChange"; errors?: Record<string, string | string[]>; onFormSubmit?: (values, details) => void; actionsRef?: RefObject<Form.Actions> } + ComponentPropsWithRef<"form">',
+      description: 'A <form> laid out as a vertical column with comfortable field spacing (override with className, e.g. gap-4). On submit it validates every Field (native constraints plus Field validate), shows each message under its field, focuses the first invalid control, and only then calls onSubmit. validationMode defaults to "onSubmit" (then live re-validation on change). errors shows external (e.g. server) messages keyed by Field name and clears one when its field is edited. onFormSubmit receives the named Field values and prevents the native submit. A control outside any Field is still checked by the browser before onSubmit runs; pass noValidate to skip that.'
+    },
+    {
+      name: "validationMode",
+      type: '"onSubmit" | "onBlur" | "onChange"',
+      default: '"onSubmit"',
+      description: "When Fields validate. After the first submit, fields re-check as the user edits. A Field's own validationMode wins."
+    },
+    {
+      name: "errors",
+      type: "Record<string, string | string[]>",
+      description: "External (e.g. server) messages keyed by Field name, shown under that field. Each clears when its field is edited."
+    },
+    {
+      name: "onFormSubmit",
+      type: "(values: Record<string, unknown>, details) => void",
+      description: "Called with the named Field values after validation passes; prevents the native submit."
+    },
+    {
+      name: "actionsRef",
+      type: "RefObject<{ validate(name?: string): void }>",
+      description: "Imperative handle to validate every field, or one by name."
+    }
+  ],
+  subcomponents: [
+    {
+      name: "Field",
+      type: '{ label?: ReactNode; description?: ReactNode; error?: ReactNode; required?: boolean; disabled?: boolean; name?: string; validate?: (value, formValues) => string | string[] | null | Promise<\u2026>; validationMode?: "onSubmit" | "onBlur" | "onChange"; validationDebounceTime?: number; orientation?: "vertical" | "horizontal"; className?: string; children: ReactElement }',
+      description: `Wraps a single control element (e.g. <Input />) on Base UI Field and wires label (htmlFor + aria-labelledby), helper text and error (aria-describedby), aria-invalid, and required onto it automatically. Base UI-backed controls (Input, Textarea, Select, Combobox, NumberField, Checkbox, Switch, Slider, OtpField\u2026) register through context; the child is also cloned so plain elements keep the same wiring. error renders a destructive message and takes precedence; without it the slot shows Base UI's validation message when the field fails (native constraint, validate, or Form errors). required adds the native attribute plus a visual asterisk (defaults to false). disabled disables the control and dims the label. name keys the field in Form errors / onFormSubmit. validationMode overrides the Form's. orientation defaults to "vertical" (label \u2192 control); "horizontal" places control then label inline for a single checkbox / switch / radio \u2014 the control centres on the label's first line (it stays there when the label wraps) and description/error sit in the label's column. The root, label, description, error and control carry data-invalid / data-valid, data-touched, data-dirty, data-filled, data-focused and data-disabled for state styling.`
+    }
+  ],
+  tokensUsed: ["muted-foreground", "destructive"],
+  a11y: [
+    "Field auto-wires label htmlFor \u2194 control id, aria-describedby (description + error), and aria-invalid \u2014 so the label, helper, and error are all announced for the control.",
+    "required adds the native `required` attribute (not just a visual asterisk); the asterisk is aria-hidden.",
+    "Error text is associated via aria-describedby and reinforced by the destructive color, not color alone.",
+    "Inside Form, a failed submit focuses the first invalid control and shows its message inline instead of a browser bubble."
+  ],
+  examples: [
+    {
+      label: "Text field",
+      code: `<Field label="Email" description="We'll never share it." required><Input type="email" /></Field>`
+    },
+    {
+      label: "Field with an error",
+      code: '<Field label="Password" error="Must be at least 8 characters."><Input type="password" /></Field>'
+    },
+    {
+      label: "Validated on submit",
+      code: '<Form onSubmit={handleSubmit}><Field label="Handle" required validate={(value) => String(value).length < 3 ? "At least 3 characters." : null}><Input name="handle" /></Field><Button type="submit">Claim</Button></Form>'
+    },
+    {
+      label: "Server errors",
+      code: '<Form errors={serverErrors}><Field label="Email" name="email"><Input type="email" /></Field></Form>'
+    },
+    {
+      label: "Form",
+      code: '<Form onSubmit={handleSubmit}><Field label="Name"><Input /></Field><Field label="Subscribe" orientation="horizontal"><Checkbox /></Field><Button type="submit">Save</Button></Form>'
+    },
+    {
+      label: "Settings form",
+      code: '<Form onSubmit={handleSubmit}><Field label="Display name" description="Shown on your profile."><Input defaultValue="Nova Reed" /></Field><Field label="Visibility"><Select defaultValue="public"><SelectTrigger /><SelectContent><SelectItem value="public">Public</SelectItem><SelectItem value="private">Private</SelectItem></SelectContent></Select></Field><Button type="submit">Save changes</Button></Form>'
+    }
+  ]
+};
+export {
+  formMeta
+};

package/dist/components/form/index.js

@@ -0,0 +1,11 @@
+// src/components/form/index.ts
+import {
+  Form,
+  Field
+} from "./form.js";
+import { formMeta } from "./form.meta.js";
+export {
+  Field,
+  Form,
+  formMeta
+};

package/dist/components/gliding-highlight/gliding-highlight.js

@@ -0,0 +1,50 @@
+"use client";
+
+// src/components/gliding-highlight/gliding-highlight.tsx
+import { useLayoutEffect, useRef } from "react";
+import { cn } from "../../lib/cn.js";
+import { HighlightGlide } from "../../lib/highlight-glide.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+function GlidingHighlight({
+  active,
+  orientation: _orientation,
+  children,
+  className,
+  highlightClassName,
+  ...props
+}) {
+  const ref = useRef(null);
+  useLayoutEffect(() => {
+    const root = ref.current;
+    if (!root) return;
+    const items = Array.from(root.children).filter((el) => !el.hasAttribute("data-highlight-glide"));
+    items.forEach((el, i) => {
+      if (i === active) el.setAttribute("data-highlighted", "");
+      else el.removeAttribute("data-highlighted");
+    });
+  });
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref,
+      className: cn("relative [&>*:not([data-highlight-glide])]:relative", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(
+          HighlightGlide,
+          {
+            className: cn(
+              "rounded-[var(--sable-frame-inner-radius,var(--radius-sm))] bg-accent",
+              highlightClassName
+            )
+          }
+        ),
+        children
+      ]
+    }
+  );
+}
+GlidingHighlight.displayName = "GlidingHighlight";
+export {
+  GlidingHighlight
+};