@borisj74/bv-ds 0.1.0

package/src/components/SectionFooter/SectionFooter.tsx

@@ -0,0 +1,40 @@
+import { type HTMLAttributes, type ReactNode } from "react";
+import clsx from "clsx";
+
+export type SectionFooterType = "section" | "card";
+
+export interface SectionFooterProps extends HTMLAttributes<HTMLDivElement> {
+  /** `section` = flush footer; `card` = inset with horizontal + bottom padding. */
+  type?: SectionFooterType;
+  /** Top divider line. */
+  divider?: boolean;
+  /** Left-aligned slot — button group, "Learn more" link, etc. */
+  leading?: ReactNode;
+  /** Right-aligned action buttons. */
+  actions?: ReactNode;
+}
+
+/**
+ * Footer row for a section or card: optional top `divider`, a left `leading`
+ * slot (button group / link) and right-aligned `actions`. Layout shell only —
+ * compose `Button`, `ButtonGroup`, etc. as slots, don't reimplement them.
+ */
+export function SectionFooter({
+  type = "section",
+  divider = true,
+  leading,
+  actions,
+  className,
+  ...rest
+}: SectionFooterProps) {
+  const card = type === "card";
+  return (
+    <div className={clsx("flex w-full flex-col", card ? "gap-xl pb-xl" : "gap-2xl", className)} {...rest}>
+      {divider && <span className="h-px w-full bg-border-secondary" />}
+      <div className={clsx("flex w-full items-center gap-xl", card && "px-3xl")}>
+        {leading}
+        <div className="ml-auto flex items-center gap-lg">{actions}</div>
+      </div>
+    </div>
+  );
+}

package/src/components/SectionFooter/index.ts

@@ -0,0 +1,2 @@
+export { SectionFooter } from "./SectionFooter";
+export type { SectionFooterProps, SectionFooterType } from "./SectionFooter";

package/src/components/SectionHeader/SectionHeader.tsx

@@ -0,0 +1,44 @@
+import { type HTMLAttributes, type ReactNode } from "react";
+import clsx from "clsx";
+
+export interface SectionHeaderProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
+  title?: ReactNode;
+  supportingText?: ReactNode;
+  /** Right-aligned slot — buttons, button group, or a search input. */
+  actions?: ReactNode;
+  /** Tabs row rendered below the title/actions, above the divider. */
+  tabs?: ReactNode;
+  /** Bottom divider line. */
+  divider?: boolean;
+}
+
+/**
+ * Section heading: title + supporting text on the left, an `actions` slot on the
+ * right (buttons / button group / search), an optional `tabs` row, and a bottom
+ * `divider`. Layout shell — pass controls as slots.
+ */
+export function SectionHeader({
+  title,
+  supportingText,
+  actions,
+  tabs,
+  divider = true,
+  className,
+  ...rest
+}: SectionHeaderProps) {
+  return (
+    <div className={clsx("flex w-full flex-col gap-xl", className)} {...rest}>
+      <div className="flex flex-col gap-xl">
+        <div className="flex items-start gap-xl">
+          <div className="flex min-w-0 flex-1 flex-col gap-xxs">
+            {title && <h2 className="text-lg font-semibold text-text-primary">{title}</h2>}
+            {supportingText && <p className="text-sm text-text-tertiary">{supportingText}</p>}
+          </div>
+          {actions && <div className="flex shrink-0 items-center gap-lg">{actions}</div>}
+        </div>
+        {tabs}
+      </div>
+      {divider && <span className="h-px w-full bg-border-secondary" />}
+    </div>
+  );
+}

package/src/components/SectionHeader/index.ts

@@ -0,0 +1,2 @@
+export { SectionHeader } from "./SectionHeader";
+export type { SectionHeaderProps } from "./SectionHeader";

package/src/components/SectionLabel/SectionLabel.tsx

@@ -0,0 +1,51 @@
+import { type HTMLAttributes, type ReactNode } from "react";
+import clsx from "clsx";
+
+export type SectionLabelSize = "sm" | "md";
+
+export interface SectionLabelProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
+  size?: SectionLabelSize;
+  title?: ReactNode;
+  /** Append a brand-colored `*` after the title. */
+  required?: boolean;
+  /** Trailing help-icon slot (e.g. a help-circle with tooltip). */
+  helpIcon?: ReactNode;
+  supportingText?: ReactNode;
+  /** Action buttons rendered below (used in wide form layouts). */
+  actions?: ReactNode;
+}
+
+/**
+ * Left-column label for a form section: title (+ optional `required` asterisk and
+ * `helpIcon`), supporting text, and optional `actions`. `md` bumps the title to
+ * `text-md`.
+ */
+export function SectionLabel({
+  size = "sm",
+  title,
+  required = false,
+  helpIcon,
+  supportingText,
+  actions,
+  className,
+  ...rest
+}: SectionLabelProps) {
+  const md = size === "md";
+  return (
+    <div className={clsx("flex flex-col items-start", actions && "gap-lg", className)} {...rest}>
+      <div className="flex flex-col gap-xxs">
+        <div className={clsx("flex items-center", md ? "gap-xs" : "gap-xxs")}>
+          {title && (
+            <p className={clsx("font-semibold text-text-secondary", md ? "text-md" : "text-sm")}>{title}</p>
+          )}
+          {required && <span className="text-sm font-semibold text-text-brand-tertiary">*</span>}
+          {helpIcon}
+        </div>
+        {supportingText && (
+          <p className={clsx("text-text-tertiary", md ? "text-md" : "text-sm")}>{supportingText}</p>
+        )}
+      </div>
+      {actions && <div className="flex items-start gap-md">{actions}</div>}
+    </div>
+  );
+}

package/src/components/SectionLabel/index.ts

@@ -0,0 +1,2 @@
+export { SectionLabel } from "./SectionLabel";
+export type { SectionLabelProps, SectionLabelSize } from "./SectionLabel";

package/src/components/Select/Select.tsx

@@ -0,0 +1,121 @@
+import { type HTMLAttributes, type ReactNode } from "react";
+import clsx from "clsx";
+
+export type SelectType =
+  | "default"
+  | "iconLeading"
+  | "search"
+  | "tags"
+  | "avatarLeading"
+  | "dotLeading";
+export type SelectSize = "sm" | "md" | "lg";
+
+export interface SelectProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
+  /** Cosmetic — documents the leading-slot intent; the leading element itself is the `leading` slot. */
+  type?: SelectType;
+  size?: SelectSize;
+  label?: ReactNode;
+  /** Append a brand `*` after the label. */
+  required?: boolean;
+  /** Trailing label help-icon slot. */
+  helpIcon?: ReactNode;
+  hintText?: ReactNode;
+  /** Leading visual inside the trigger — icon / avatar / dot / search icon. */
+  leading?: ReactNode;
+  /** Selected display value. Falls back to `placeholder` when empty. */
+  value?: ReactNode;
+  placeholder?: ReactNode;
+  open?: boolean;
+  disabled?: boolean;
+  invalid?: boolean;
+  onToggle?: () => void;
+  /** Dropdown panel content — a list of `SelectMenuItem`. */
+  children?: ReactNode;
+}
+
+const TRIGGER_PAD: Record<SelectSize, string> = {
+  sm: "px-lg py-md text-sm",
+  md: "px-lg py-md text-md",
+  lg: "px-lg py-2.5 text-md",
+};
+
+/**
+ * Select trigger + shared dropdown panel. The leading element is a `leading`
+ * slot (the `type` prop only documents intent); the panel is the same across all
+ * types — pass `SelectMenuItem`s as `children`. Controlled via `open`/`onToggle`;
+ * the panel renders only when `open`.
+ */
+export function Select({
+  type = "default",
+  size = "md",
+  label,
+  required = false,
+  helpIcon,
+  hintText,
+  leading,
+  value,
+  placeholder,
+  open = false,
+  disabled = false,
+  invalid = false,
+  onToggle,
+  children,
+  className,
+  ...rest
+}: SelectProps) {
+  const showPlaceholder = value == null || value === "";
+  return (
+    <div className={clsx("flex w-full flex-col gap-sm font-body", className)} {...rest}>
+      {label && (
+        <span className="flex items-center gap-xxs">
+          <span className="text-sm font-medium text-text-secondary">{label}</span>
+          {required && <span className="text-sm font-medium text-text-brand-tertiary">*</span>}
+          {helpIcon}
+        </span>
+      )}
+
+      <div className="relative">
+        <button
+          type="button"
+          aria-haspopup="listbox"
+          aria-expanded={open}
+          disabled={disabled}
+          onClick={onToggle}
+          className={clsx(
+            "flex w-full items-center gap-md rounded-md border bg-bg-primary text-left shadow-xs transition-colors",
+            TRIGGER_PAD[size],
+            invalid
+              ? "border-border-error"
+              : open
+                ? "border-border-brand ring-2 ring-utility-brand-500/40"
+                : "border-border-primary",
+            disabled && "cursor-not-allowed bg-bg-secondary opacity-60",
+          )}
+        >
+          {leading && <span className="flex shrink-0 items-center">{leading}</span>}
+          <span className="min-w-0 flex-1 truncate">
+            <span className={clsx("font-medium", showPlaceholder ? "text-text-placeholder" : "text-text-primary")}>
+              {showPlaceholder ? placeholder : value}
+            </span>
+          </span>
+          <svg
+            viewBox="0 0 16 16"
+            fill="none"
+            className={clsx("size-4 shrink-0 text-fg-quaternary transition-transform", open && "rotate-180")}
+            aria-hidden
+          >
+            <path d="M4 6l4 4 4-4" stroke="currentColor" strokeWidth="1.33" strokeLinecap="round" strokeLinejoin="round" />
+          </svg>
+        </button>
+
+        {open && (
+          <div className="absolute left-0 right-0 top-full z-50 mt-xs flex max-h-[320px] flex-col gap-px overflow-auto rounded-md border border-border-secondary-alt bg-bg-primary p-xs shadow-lg">
+            {children}
+          </div>
+        )}
+      </div>
+
+      {hintText && <p className="text-sm text-text-tertiary">{hintText}</p>}
+    </div>
+  );
+}

package/src/components/Select/index.ts

@@ -0,0 +1,2 @@
+export { Select } from "./Select";
+export type { SelectProps, SelectType, SelectSize } from "./Select";

package/src/components/SelectMenuItem/SelectMenuItem.tsx

@@ -0,0 +1,85 @@
+import { type ButtonHTMLAttributes, type ReactNode } from "react";
+import clsx from "clsx";
+
+export type SelectMenuItemSize = "sm" | "md" | "lg";
+
+export interface SelectMenuItemProps
+  extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "title"> {
+  label?: ReactNode;
+  /** Inline secondary text beside the label (e.g. "@olivia", "10 users"). */
+  supportingText?: ReactNode;
+  selected?: boolean;
+  size?: SelectMenuItemSize;
+  /** Leading visual — icon / avatar / dot. Ignored when `multi`. */
+  leading?: ReactNode;
+  /**
+   * Multi-select variant: render a leading checkbox (bound to `selected`)
+   * instead of the trailing selected-check.
+   */
+  multi?: boolean;
+}
+
+function CheckboxBox({ selected, big }: { selected: boolean; big: boolean }) {
+  return (
+    <span
+      className={clsx(
+        "flex shrink-0 items-center justify-center rounded-xs border",
+        big ? "size-5" : "size-4",
+        selected ? "border-transparent bg-bg-brand-solid" : "border-border-primary bg-bg-primary",
+      )}
+    >
+      {selected && (
+        <svg viewBox="0 0 16 16" fill="none" className="size-3 text-fg-white" aria-hidden>
+          <path d="M13.33 4 6 11.33 2.67 8" stroke="currentColor" strokeWidth="1.67" strokeLinecap="round" strokeLinejoin="round" />
+        </svg>
+      )}
+    </span>
+  );
+}
+
+/**
+ * List-item primitive for `Select` and Multi-select dropdowns. One component over
+ * both: `multi` swaps the trailing selected-check for a leading checkbox. The
+ * shared shell is a full-width row with hover `bg-primary-hover`; `label` is
+ * `text-primary`, `supportingText` sits inline in `text-tertiary`.
+ */
+export function SelectMenuItem({
+  label,
+  supportingText,
+  selected = false,
+  size = "sm",
+  leading,
+  multi = false,
+  disabled,
+  className,
+  ...rest
+}: SelectMenuItemProps) {
+  const big = size !== "sm";
+  return (
+    <button
+      type="button"
+      role="option"
+      aria-selected={selected}
+      disabled={disabled}
+      className={clsx(
+        "flex w-full items-center gap-md rounded-sm text-left transition-colors",
+        size === "lg" ? "py-2.5 pl-md pr-2.5" : "p-md",
+        disabled ? "opacity-50" : "hover:bg-bg-primary-hover",
+        className,
+      )}
+      {...rest}
+    >
+      {multi && <CheckboxBox selected={selected} big={big} />}
+      {!multi && leading && <span className="shrink-0">{leading}</span>}
+      <span className={clsx("flex min-w-0 flex-1 items-center gap-sm", big ? "text-md" : "text-sm")}>
+        <span className="truncate font-medium text-text-primary">{label}</span>
+        {supportingText && <span className="truncate font-normal text-text-tertiary">{supportingText}</span>}
+      </span>
+      {!multi && selected && (
+        <svg viewBox="0 0 20 20" fill="none" className="size-5 shrink-0 text-fg-brand-primary" aria-hidden>
+          <path d="M16.67 5 7.5 14.17 3.33 10" stroke="currentColor" strokeWidth="1.67" strokeLinecap="round" strokeLinejoin="round" />
+        </svg>
+      )}
+    </button>
+  );
+}

package/src/components/SelectMenuItem/index.ts

@@ -0,0 +1,2 @@
+export { SelectMenuItem } from "./SelectMenuItem";
+export type { SelectMenuItemProps, SelectMenuItemSize } from "./SelectMenuItem";

package/src/components/SidebarNavigation/SidebarNavigation.tsx

@@ -0,0 +1,100 @@
+import { useState, type HTMLAttributes, type ReactNode } from "react";
+import clsx from "clsx";
+import { NavMenuButton } from "../NavMenuButton";
+
+export type SidebarNavigationType =
+  | "simple"
+  | "dualTier"
+  | "sectionsDividers"
+  | "sectionsSubheadings"
+  | "slim";
+
+export interface SidebarNavigationProps extends Omit<HTMLAttributes<HTMLElement>, "title"> {
+  type?: SidebarNavigationType;
+  /** Brand logo / wordmark slot (top of the rail). */
+  logo?: ReactNode;
+  /** Optional header content under the logo (e.g. a search input). */
+  header?: ReactNode;
+  /** Nav items — compose `NavItemBase` / `NavItemDropdownBase` children. */
+  children?: ReactNode;
+  /** Footer slot — typically `NavFeaturedCard` + `NavAccountCard`. */
+  footer?: ReactNode;
+  /** Controlled mobile-drawer open state. Omit to use internal state. */
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+}
+
+const WIDTH: Record<SidebarNavigationType, string> = {
+  simple: "w-[280px]",
+  dualTier: "w-[280px]",
+  sectionsDividers: "w-[280px]",
+  sectionsSubheadings: "w-[280px]",
+  slim: "w-[68px]",
+};
+
+/**
+ * Application sidebar shell. Lays out logo → header → scrollable nav → footer in
+ * a fixed-width rail (`slim` collapses to 68px). Composes existing `Nav*`
+ * components via slots/children — it does not reimplement nav items. On mobile
+ * the rail is hidden behind a hamburger (`NavMenuButton`); opening it shows a
+ * `bg-overlay` + `backdrop-blur-md` scrim and slides the rail in as a drawer.
+ *
+ * NOTE: `dualTier`'s icon-rail + expanding-panel split is simplified to a single
+ * 280px column here — compose the icon rail separately if you need the two-tier
+ * layout. (flagged)
+ */
+export function SidebarNavigation({
+  type = "simple",
+  logo,
+  header,
+  children,
+  footer,
+  open,
+  onOpenChange,
+  className,
+  ...rest
+}: SidebarNavigationProps) {
+  const [internalOpen, setInternalOpen] = useState(false);
+  const isOpen = open ?? internalOpen;
+  const setOpen = (v: boolean) => (onOpenChange ? onOpenChange(v) : setInternalOpen(v));
+  const slim = type === "slim";
+
+  const rail = (
+    <nav
+      className={clsx(
+        "flex h-full flex-col gap-2xl border-r border-border-secondary bg-bg-primary",
+        slim ? "items-center px-md py-xl" : "px-lg py-xl",
+        WIDTH[type],
+        className,
+      )}
+      {...rest}
+    >
+      {logo && <div className={clsx("shrink-0", slim ? "" : "px-md")}>{logo}</div>}
+      {header && !slim && <div className="shrink-0">{header}</div>}
+      <div className="flex min-h-0 flex-1 flex-col gap-xxs overflow-y-auto">{children}</div>
+      {footer && <div className="flex shrink-0 flex-col gap-lg">{footer}</div>}
+    </nav>
+  );
+
+  return (
+    <>
+      {/* Desktop rail */}
+      <aside className="hidden h-full md:block">{rail}</aside>
+
+      {/* Mobile trigger + drawer */}
+      <div className="md:hidden">
+        <NavMenuButton opened={isOpen} onClick={() => setOpen(!isOpen)} />
+        {isOpen && (
+          <div className="fixed inset-0 z-50 flex">
+            <div
+              className="absolute inset-0 bg-bg-overlay/70 backdrop-blur-md"
+              onClick={() => setOpen(false)}
+              aria-hidden
+            />
+            <div className="relative h-full">{rail}</div>
+          </div>
+        )}
+      </div>
+    </>
+  );
+}

package/src/components/SidebarNavigation/index.ts

@@ -0,0 +1,2 @@
+export { SidebarNavigation } from "./SidebarNavigation";
+export type { SidebarNavigationProps, SidebarNavigationType } from "./SidebarNavigation";

package/src/components/SlideOutMenuHeader/SlideOutMenuHeader.tsx

@@ -0,0 +1,56 @@
+import { type HTMLAttributes, type ReactNode } from "react";
+import clsx from "clsx";
+
+export interface SlideOutMenuHeaderProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
+  /** Featured-icon slot (left of the heading). */
+  icon?: ReactNode;
+  title?: ReactNode;
+  supportingText?: ReactNode;
+  /** Tabs row rendered below the heading (adds a bottom divider). */
+  tabs?: ReactNode;
+  /** Close button callback — renders an X in the top-right when set. */
+  onClose?: () => void;
+}
+
+/**
+ * Header for a slide-out / drawer panel: optional featured `icon` + `title` +
+ * `supportingText`, a top-right close X, and an optional `tabs` row (which adds a
+ * bottom divider). Padding follows the Figma `p-3xl` desktop spec.
+ */
+export function SlideOutMenuHeader({
+  icon,
+  title,
+  supportingText,
+  tabs,
+  onClose,
+  className,
+  ...rest
+}: SlideOutMenuHeaderProps) {
+  return (
+    <div
+      className={clsx("relative flex flex-col gap-2xl bg-bg-primary p-3xl", tabs && "border-b border-border-secondary-alt", className)}
+      {...rest}
+    >
+      <div className="flex items-start gap-lg">
+        {icon && <span className="shrink-0">{icon}</span>}
+        <div className="flex min-w-0 flex-1 flex-col gap-xxs pr-2xl">
+          {title && <p className="text-lg font-semibold text-text-primary">{title}</p>}
+          {supportingText && <p className="text-sm text-text-tertiary">{supportingText}</p>}
+        </div>
+      </div>
+      {tabs}
+      {onClose && (
+        <button
+          type="button"
+          onClick={onClose}
+          aria-label="Close"
+          className="absolute right-3 top-3 flex size-9 items-center justify-center rounded-md text-fg-quaternary hover:bg-bg-primary-hover"
+        >
+          <svg viewBox="0 0 20 20" fill="none" className="size-5" aria-hidden>
+            <path d="M15 5 5 15M5 5l10 10" stroke="currentColor" strokeWidth="1.67" strokeLinecap="round" strokeLinejoin="round" />
+          </svg>
+        </button>
+      )}
+    </div>
+  );
+}

package/src/components/SlideOutMenuHeader/index.ts

@@ -0,0 +1,2 @@
+export { SlideOutMenuHeader } from "./SlideOutMenuHeader";
+export type { SlideOutMenuHeaderProps } from "./SlideOutMenuHeader";

package/src/components/Slider/Slider.tsx

@@ -0,0 +1,125 @@
+import { useRef, type PointerEvent as ReactPointerEvent } from "react";
+import clsx from "clsx";
+
+export type SliderLabel = "none" | "bottom" | "topFloating";
+
+export interface SliderProps {
+  min?: number;
+  max?: number;
+  step?: number;
+  /** Single-handle value. Ignored when `values` is set. */
+  value?: number;
+  onChange?: (value: number) => void;
+  /** Dual-handle range `[low, high]`. Takes precedence over `value`. */
+  values?: [number, number];
+  onRangeChange?: (values: [number, number]) => void;
+  /** Value-label placement. */
+  label?: SliderLabel;
+  /** Format the value shown in labels (default `${v}%`). */
+  formatLabel?: (v: number) => string;
+  disabled?: boolean;
+  className?: string;
+  "aria-label"?: string;
+}
+
+const clampStep = (v: number, min: number, max: number, step: number) => {
+  const snapped = Math.round((v - min) / step) * step + min;
+  return Math.min(max, Math.max(min, snapped));
+};
+
+/**
+ * Range slider — track + draggable thumb(s), pure pointer math (no library).
+ * Single-handle via `value`/`onChange`; dual-handle range via
+ * `values`/`onRangeChange`. The thumb is implemented inline (not a separate
+ * exported component). `label` shows the value below the thumb or in a floating
+ * tooltip above it.
+ */
+export function Slider({
+  min = 0,
+  max = 100,
+  step = 1,
+  value = 0,
+  onChange,
+  values,
+  onRangeChange,
+  label = "none",
+  formatLabel = (v) => `${v}%`,
+  disabled = false,
+  className,
+  "aria-label": ariaLabel,
+}: SliderProps) {
+  const trackRef = useRef<HTMLDivElement>(null);
+  const dual = values != null;
+  const lo = dual ? values![0] : min;
+  const hi = dual ? values![1] : value;
+  const pct = (v: number) => ((v - min) / (max - min)) * 100;
+
+  const valueFromClientX = (clientX: number) => {
+    const el = trackRef.current;
+    if (!el) return min;
+    const rect = el.getBoundingClientRect();
+    const ratio = Math.min(1, Math.max(0, (clientX - rect.left) / rect.width));
+    return clampStep(min + ratio * (max - min), min, max, step);
+  };
+
+  const startDrag = (which: "single" | "lo" | "hi") => (e: ReactPointerEvent) => {
+    if (disabled) return;
+    e.preventDefault();
+    (e.target as HTMLElement).setPointerCapture(e.pointerId);
+    const move = (ev: PointerEvent) => {
+      const next = valueFromClientX(ev.clientX);
+      if (which === "single") {
+        onChange?.(next);
+      } else if (which === "lo") {
+        onRangeChange?.([Math.min(next, hi), hi]);
+      } else {
+        onRangeChange?.([lo, Math.max(next, lo)]);
+      }
+    };
+    const up = () => {
+      window.removeEventListener("pointermove", move);
+      window.removeEventListener("pointerup", up);
+    };
+    window.addEventListener("pointermove", move);
+    window.addEventListener("pointerup", up);
+  };
+
+  const Handle = ({ at, onDown, role }: { at: number; onDown: (e: ReactPointerEvent) => void; role: string }) => (
+    <div
+      role="slider"
+      aria-label={role}
+      aria-valuemin={min}
+      aria-valuemax={max}
+      aria-valuenow={at}
+      aria-disabled={disabled || undefined}
+      tabIndex={disabled ? -1 : 0}
+      onPointerDown={onDown}
+      className="absolute top-1/2 size-6 -translate-x-1/2 -translate-y-1/2 cursor-grab touch-none rounded-full border-2 border-slider-handle-border bg-slider-handle-bg shadow-md active:cursor-grabbing"
+      style={{ left: `${pct(at)}%` }}
+    >
+      {label === "topFloating" && (
+        <span className="pointer-events-none absolute bottom-[calc(100%+8px)] left-1/2 -translate-x-1/2 whitespace-nowrap rounded-md border border-border-secondary-alt bg-bg-primary-alt px-md py-sm text-xs font-semibold text-text-secondary shadow-lg">
+          {formatLabel(at)}
+        </span>
+      )}
+      {label === "bottom" && (
+        <span className="pointer-events-none absolute left-1/2 top-[calc(100%+12px)] -translate-x-1/2 whitespace-nowrap text-md font-medium text-text-primary">
+          {formatLabel(at)}
+        </span>
+      )}
+    </div>
+  );
+
+  return (
+    <div className={clsx("relative w-full select-none", disabled && "opacity-60", className)} aria-label={ariaLabel}>
+      <div ref={trackRef} className="relative h-2 w-full rounded-full bg-bg-quaternary">
+        <div
+          className="absolute top-0 h-2 rounded-full bg-fg-brand-primary"
+          style={{ left: `${dual ? pct(lo) : 0}%`, right: `${100 - pct(hi)}%` }}
+        />
+        {dual && <Handle at={lo} onDown={startDrag("lo")} role="Minimum" />}
+        <Handle at={hi} onDown={startDrag(dual ? "hi" : "single")} role={dual ? "Maximum" : "Value"} />
+      </div>
+    </div>
+  );
+}

package/src/components/Slider/index.ts

@@ -0,0 +1,2 @@
+export { Slider } from "./Slider";
+export type { SliderProps, SliderLabel } from "./Slider";