@sia-ui/cli 0.1.0

package/dist/registry/package/components/Select/styles.css

@@ -0,0 +1,58 @@
+.sia-select { position:relative; width:100%; min-width:0; }
+.sia-select--disabled { opacity:.6; }
+.sia-select__trigger { display:flex; align-items:center; justify-content:space-between; gap:.75rem; width:100%; min-height:2.5rem; padding:.55rem .7rem .55rem .75rem; border:1px solid var(--sia-border); border-radius:var(--sia-radius); color:var(--sia-foreground); background:var(--sia-background); font:inherit; text-align:left; cursor:pointer; }
+.sia-select__trigger:hover:not(:disabled) { border-color:color-mix(in srgb,var(--sia-primary) 55%,var(--sia-border)); }
+.sia-select__trigger:focus-visible { outline:3px solid color-mix(in srgb,var(--sia-primary) 30%,transparent); outline-offset:2px; }
+.sia-select__trigger--invalid { border-color:var(--sia-danger); }
+.sia-select__trigger:disabled { cursor:not-allowed; }
+.sia-select__value { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
+.sia-select__placeholder { color:var(--sia-muted); }
+.sia-select__actions { display:inline-flex; align-items:center; gap:.35rem; flex:none; color:var(--sia-muted); }
+.sia-select__clear { display:inline-grid; place-items:center; width:1.35rem; height:1.35rem; border-radius:50%; font-size:1.05rem; line-height:1; }
+.sia-select__clear:hover { color:var(--sia-foreground); background:var(--sia-surface); }
+.sia-select__chevron { transform:translateY(-.5rem); font-size:1.1rem; }
+.sia-select__overlay { overflow:hidden; border:1px solid var(--sia-border); border-radius:var(--sia-radius); color:var(--sia-foreground); background:var(--sia-background); box-shadow:0 14px 36px rgb(15 23 42 / .16); }
+.sia-select__panel { display:grid; min-width:12rem; max-height:min(22rem,calc(100vh - 1rem)); }
+.sia-select__search-wrap { display:flex; align-items:center; gap:.5rem; padding:.55rem .65rem; color:var(--sia-muted); border-bottom:1px solid var(--sia-border); }
+.sia-select__search { min-width:0; width:100%; padding:.2rem 0; border:0; outline:0; color:var(--sia-foreground); background:transparent; font:inherit; }
+.sia-select__options { overflow-y:auto; padding:.35rem; }
+.sia-select__option { display:flex; align-items:center; justify-content:space-between; gap:.75rem; width:100%; padding:.55rem .65rem; border:0; border-radius:calc(var(--sia-radius) * .7); color:inherit; background:transparent; font:inherit; text-align:left; cursor:pointer; }
+.sia-select__option:hover:not(:disabled),.sia-select__option--active:not(:disabled) { background:var(--sia-surface); }
+.sia-select__option[aria-selected="true"] { color:var(--sia-primary); background:color-mix(in srgb,var(--sia-primary) 10%,transparent); }
+.sia-select__option:disabled { opacity:.5; cursor:not-allowed; }
+.sia-select__option-content { display:grid; gap:.15rem; min-width:0; }
+.sia-select__option-content small { color:var(--sia-muted); font-size:.78rem; line-height:1.35; }
+.sia-select__status { padding:1rem; color:var(--sia-muted); font-size:.875rem; text-align:center; }
+.sia-select__status--error { color:var(--sia-danger); }
+.sia-select__chevron { display:block; line-height:1; transform:none; }
+
+/* Le chevron tourne à l'ouverture — l'affordance standard d'un déclencheur de
+   menu. Impossible avec l'ancien caractère : son décalage de ligne de base
+   dépendait de la police, donc le centre de rotation aussi. */
+.sia-select__chevron {
+  width: 1.05em;
+  height: 1.05em;
+  flex: none;
+  color: var(--sia-muted);
+  transition:
+    transform var(--sia-duration-base) var(--sia-easing-standard),
+    color var(--sia-duration-fast) var(--sia-easing-standard);
+}
+
+[aria-expanded="true"] > .sia-select__chevron {
+  transform: rotate(180deg);
+  color: var(--sia-primary);
+}
+
+.sia-select__trigger:hover:not(:disabled) .sia-select__chevron {
+  color: var(--sia-foreground);
+}
+
+/* Le panneau entre au lieu d'apparaître d'un coup. */
+.sia-select__menu,
+.sia-select__panel,
+.sia-select__list {
+  animation: sia-scale-in var(--sia-duration-base) var(--sia-easing-entrance);
+  transform-origin: top center;
+  box-shadow: var(--sia-elevation-overlay);
+}

package/dist/registry/package/components/Sidebar/index.tsx

@@ -0,0 +1,232 @@
+import { useState, type ReactNode } from "react";
+import { cn } from "@sia-ui/utils";
+import { useAccordionState } from "@sia-ui/headless";
+import { ChevronDownIcon } from "../Icons";
+import "./styles.css";
+
+export interface SidebarItem {
+  key: string;
+  label: ReactNode;
+  icon?: ReactNode;
+  /** Rend l'entrée comme un lien. Sans lui, c'est un bouton. */
+  href?: string;
+  badge?: ReactNode;
+  disabled?: boolean;
+  /** Sous-entrées. Une seule profondeur : au-delà, c'est un menu, pas une barre. */
+  items?: Array<Omit<SidebarItem, "items">>;
+  onClick?: () => void;
+}
+
+export interface SidebarSection {
+  key: string;
+  /** Le titre du groupe. Masqué en mode réduit. */
+  title: ReactNode;
+  items: SidebarItem[];
+}
+
+export type SidebarEntry = SidebarItem | SidebarSection;
+
+function isSection(entry: SidebarEntry): entry is SidebarSection {
+  return "title" in entry && Array.isArray(entry.items);
+}
+
+export interface SidebarProps {
+  items: SidebarEntry[];
+  /** La clé de l'entrée courante. Un parent s'ouvre si un enfant l'est. */
+  activeKey?: string;
+  collapsed?: boolean;
+  header?: ReactNode;
+  footer?: ReactNode;
+  onNavigate?: (item: SidebarItem) => void;
+  ariaLabel?: string;
+  className?: string;
+}
+
+/**
+ * La navigation principale.
+ *
+ * Elle se pose dans le `navigation` d'`AppShell`, qui gère déjà la largeur et
+ * le repli. Ici, seulement les entrées : ce qui est actif, ce qui est ouvert,
+ * ce qui se replie en icônes.
+ */
+export function Sidebar({
+  items,
+  activeKey,
+  collapsed = false,
+  header,
+  footer,
+  onNavigate,
+  ariaLabel,
+  className,
+}: SidebarProps) {
+  return (
+    <nav
+      className={cn("sia-sidebar", collapsed && "sia-sidebar--collapsed", className)}
+      {...(ariaLabel ? { "aria-label": ariaLabel } : {})}
+    >
+      {header && <div className="sia-sidebar__header">{header}</div>}
+
+      <div className="sia-sidebar__body">
+        {items.map((entry) =>
+          isSection(entry) ? (
+            <div key={entry.key} className="sia-sidebar__section">
+              <div className="sia-sidebar__section-title">{entry.title}</div>
+              {entry.items.map((item) => (
+                <SidebarNode
+                  key={item.key}
+                  item={item}
+                  {...(activeKey !== undefined ? { activeKey } : {})}
+                  collapsed={collapsed}
+                  {...(onNavigate ? { onNavigate } : {})}
+                />
+              ))}
+            </div>
+          ) : (
+            <SidebarNode
+              key={entry.key}
+              item={entry}
+              {...(activeKey !== undefined ? { activeKey } : {})}
+              collapsed={collapsed}
+              {...(onNavigate ? { onNavigate } : {})}
+            />
+          ),
+        )}
+      </div>
+
+      {footer && <div className="sia-sidebar__footer">{footer}</div>}
+    </nav>
+  );
+}
+
+interface SidebarNodeProps {
+  item: SidebarItem;
+  activeKey?: string;
+  collapsed: boolean;
+  onNavigate?: (item: SidebarItem) => void;
+}
+
+function SidebarNode({
+  item,
+  activeKey,
+  collapsed,
+  onNavigate,
+}: SidebarNodeProps) {
+  const children = item.items ?? [];
+  const hasChildren = children.length > 0;
+  const holdsActive = children.some((child) => child.key === activeKey);
+  const active = item.key === activeKey;
+
+  // Le groupe qui contient la page courante s'ouvre de lui-même : arriver sur
+  // une page par un lien direct doit montrer où l'on est dans l'arbre.
+  const disclosure = useAccordionState({
+    type: "multiple",
+    defaultValue: holdsActive ? [item.key] : [],
+  });
+  const [everToggled, setEverToggled] = useState(false);
+  const open = everToggled ? disclosure.isOpen(item.key) : holdsActive;
+
+  const content = (
+    <>
+      {item.icon && <span className="sia-sidebar__icon" aria-hidden="true">{item.icon}</span>}
+      <span className="sia-sidebar__label">{item.label}</span>
+      {item.badge !== undefined && (
+        <span className="sia-sidebar__badge">{item.badge}</span>
+      )}
+      {hasChildren && (
+        <span className="sia-sidebar__chevron" aria-hidden="true">
+          <ChevronDownIcon />
+        </span>
+      )}
+    </>
+  );
+
+  // Le titre natif suffit en mode réduit : un vrai tooltip demanderait un
+  // portail et un moteur de placement pour afficher trois mots.
+  const tooltip =
+    collapsed && typeof item.label === "string" ? item.label : undefined;
+
+  return (
+    <div className="sia-sidebar__node" data-open={open || undefined}>
+      {item.href && !hasChildren ? (
+        <a
+          href={item.href}
+          className={cn("sia-sidebar__item", active && "sia-sidebar__item--active")}
+          aria-current={active ? "page" : undefined}
+          {...(tooltip ? { title: tooltip } : {})}
+          onClick={() => onNavigate?.(item)}
+        >
+          {content}
+        </a>
+      ) : (
+        <button
+          type="button"
+          className={cn(
+            "sia-sidebar__item",
+            (active || (holdsActive && collapsed)) && "sia-sidebar__item--active",
+          )}
+          disabled={item.disabled}
+          {...(hasChildren ? { "aria-expanded": open } : {})}
+          {...(active ? { "aria-current": "page" as const } : {})}
+          {...(tooltip ? { title: tooltip } : {})}
+          onClick={() => {
+            if (hasChildren) {
+              setEverToggled(true);
+              disclosure.toggle(item.key);
+              return;
+            }
+            item.onClick?.();
+            onNavigate?.(item);
+          }}
+        >
+          {content}
+        </button>
+      )}
+
+      {hasChildren && (
+        <div className="sia-sidebar__panel">
+          <div className="sia-sidebar__sub" inert={open ? undefined : true}>
+            {children.map((child) => {
+              const childActive = child.key === activeKey;
+              const childClass = cn(
+                "sia-sidebar__item",
+                "sia-sidebar__item--child",
+                childActive && "sia-sidebar__item--active",
+              );
+              return child.href ? (
+                <a
+                  key={child.key}
+                  href={child.href}
+                  className={childClass}
+                  aria-current={childActive ? "page" : undefined}
+                  onClick={() => onNavigate?.(child)}
+                >
+                  <span className="sia-sidebar__label">{child.label}</span>
+                  {child.badge !== undefined && (
+                    <span className="sia-sidebar__badge">{child.badge}</span>
+                  )}
+                </a>
+              ) : (
+                <button
+                  key={child.key}
+                  type="button"
+                  className={childClass}
+                  disabled={child.disabled}
+                  {...(childActive ? { "aria-current": "page" as const } : {})}
+                  onClick={() => {
+                    child.onClick?.();
+                    onNavigate?.(child);
+                  }}
+                >
+                  <span className="sia-sidebar__label">{child.label}</span>
+                  {child.badge !== undefined && (
+                    <span className="sia-sidebar__badge">{child.badge}</span>
+                  )}
+                </button>
+              );
+            })}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

package/dist/registry/package/components/Sidebar/styles.css

@@ -0,0 +1,140 @@
+.sia-sidebar {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  min-height: 0;
+  padding: .5rem;
+  gap: .5rem;
+  font-size: .875rem;
+}
+
+.sia-sidebar__body { flex: 1; min-height: 0; overflow-y: auto; display: grid; gap: .125rem; align-content: start; }
+.sia-sidebar__header,
+.sia-sidebar__footer { flex: none; padding: .25rem; }
+
+.sia-sidebar__section { display: grid; gap: .125rem; }
+.sia-sidebar__section + .sia-sidebar__section { margin-top: .75rem; }
+.sia-sidebar__section-title {
+  padding: .5rem .625rem .25rem;
+  color: var(--sia-muted);
+  font-size: .7rem;
+  font-weight: 600;
+  letter-spacing: .05em;
+  text-transform: uppercase;
+  /* En mode réduit le titre disparaît sans laisser de trou. */
+  transition:
+    opacity var(--sia-duration-fast) var(--sia-easing-standard),
+    height var(--sia-duration-base) var(--sia-easing-standard);
+}
+
+.sia-sidebar__item {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: .625rem;
+  width: 100%;
+  padding: .5rem .625rem;
+  border: 0;
+  border-radius: var(--sia-radius);
+  background: transparent;
+  color: var(--sia-muted);
+  font: inherit;
+  text-align: left;
+  text-decoration: none;
+  cursor: pointer;
+  transition:
+    background-color var(--sia-duration-fast) var(--sia-easing-standard),
+    color var(--sia-duration-fast) var(--sia-easing-standard);
+}
+.sia-sidebar__item:hover:not(:disabled) { background: var(--sia-surface); color: var(--sia-foreground); }
+.sia-sidebar__item:disabled { opacity: .45; cursor: not-allowed; }
+
+.sia-sidebar__item--active {
+  background: color-mix(in srgb, var(--sia-primary) 10%, transparent);
+  color: var(--sia-primary);
+  font-weight: 600;
+}
+
+/* Le repère de l'entrée courante : il grandit depuis le centre plutôt que
+   d'apparaître d'un coup. */
+.sia-sidebar__item--active::before {
+  content: "";
+  position: absolute;
+  left: 0;
+  top: 50%;
+  width: 3px;
+  height: 1.125rem;
+  border-radius: 0 3px 3px 0;
+  background: var(--sia-primary);
+  transform: translateY(-50%) scaleY(0);
+  animation: sia-sidebar-mark var(--sia-duration-base) var(--sia-easing-spring) forwards;
+}
+@keyframes sia-sidebar-mark {
+  to { transform: translateY(-50%) scaleY(1); }
+}
+
+.sia-sidebar__icon { display: grid; place-items: center; flex: none; width: 1.125rem; font-size: 1.05rem; }
+.sia-sidebar__label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+
+.sia-sidebar__badge {
+  flex: none;
+  min-width: 1.25rem;
+  padding: 0 .35rem;
+  border-radius: 999px;
+  background: var(--sia-surface);
+  color: var(--sia-muted);
+  font-size: .7rem;
+  font-variant-numeric: tabular-nums;
+  line-height: 1.25rem;
+  text-align: center;
+}
+.sia-sidebar__item--active .sia-sidebar__badge {
+  background: color-mix(in srgb, var(--sia-primary) 16%, transparent);
+  color: var(--sia-primary);
+}
+
+.sia-sidebar__chevron {
+  display: grid;
+  place-items: center;
+  flex: none;
+  color: var(--sia-muted);
+  font-size: .8rem;
+  transition: transform var(--sia-duration-base) var(--sia-easing-standard);
+}
+.sia-sidebar__node[data-open] .sia-sidebar__chevron { transform: rotate(180deg); }
+
+/* Même technique que l'accordéon : la hauteur s'interpole sans être mesurée. */
+.sia-sidebar__panel {
+  display: grid;
+  grid-template-rows: 0fr;
+  transition: grid-template-rows var(--sia-duration-base) var(--sia-easing-standard);
+}
+.sia-sidebar__node[data-open] .sia-sidebar__panel { grid-template-rows: 1fr; }
+.sia-sidebar__sub { overflow: hidden; min-height: 0; display: grid; gap: .125rem; }
+
+.sia-sidebar__item--child {
+  margin-left: 1.5rem;
+  padding-block: .375rem;
+  font-size: .825rem;
+}
+/* Le filet qui relie les sous-entrées à leur parent. */
+.sia-sidebar__sub { position: relative; }
+.sia-sidebar__sub::before {
+  content: "";
+  position: absolute;
+  top: .375rem;
+  bottom: .375rem;
+  left: 1.25rem;
+  width: 1px;
+  background: var(--sia-border);
+}
+
+/* ── Mode réduit ───────────────────────────────────────────────────────── */
+
+.sia-sidebar--collapsed .sia-sidebar__item { justify-content: center; padding-inline: .5rem; }
+.sia-sidebar--collapsed .sia-sidebar__label,
+.sia-sidebar--collapsed .sia-sidebar__badge,
+.sia-sidebar--collapsed .sia-sidebar__chevron { display: none; }
+.sia-sidebar--collapsed .sia-sidebar__section-title { height: 0; padding: 0; opacity: 0; overflow: hidden; }
+/* Replier ferme les sous-entrées : elles n'auraient plus de libellé. */
+.sia-sidebar--collapsed .sia-sidebar__panel { grid-template-rows: 0fr; }

package/dist/registry/package/components/Skeleton/index.tsx

@@ -0,0 +1,21 @@
+import { type CSSProperties, type HTMLAttributes } from "react";
+import { cn } from "@sia-ui/utils";
+import "./styles.css";
+
+export interface SkeletonProps extends HTMLAttributes<HTMLDivElement> {
+  width?: CSSProperties["width"];
+  height?: CSSProperties["height"];
+  radius?: CSSProperties["borderRadius"];
+  circle?: boolean;
+}
+
+export function Skeleton({ className, width = "100%", height = "1rem", radius, circle, style, ...props }: SkeletonProps) {
+  return (
+    <div
+      className={cn("sia-skeleton", circle && "sia-skeleton--circle", className)}
+      aria-hidden="true"
+      style={{ width, height, borderRadius: circle ? "9999px" : radius, ...style }}
+      {...props}
+    />
+  );
+}

package/dist/registry/package/components/Skeleton/styles.css

@@ -0,0 +1,2 @@
+.sia-skeleton { display:block; max-width:100%; border-radius:var(--sia-radius); background:linear-gradient(90deg,var(--sia-border),color-mix(in srgb,var(--sia-border) 45%,var(--sia-background)),var(--sia-border)); background-size:200% 100%; animation:sia-skeleton 1.4s ease-in-out infinite; }
+.sia-skeleton--circle { aspect-ratio:1; }

package/dist/registry/package/components/Slider/index.tsx

@@ -0,0 +1,193 @@
+import { useEffect, useRef, useState } from "react";
+import { cn } from "@sia-ui/utils";
+import { useSliderState, type SliderValue } from "@sia-ui/headless";
+
+export type { SliderValue };
+export type SliderRangeValue = [number, number];
+
+export interface SliderProps {
+  /** Nom du champ, quand le slider est posé dans un formulaire. */
+  name?: string | undefined;
+  /** Mode contrôlé. Laisser vide pour un slider non contrôlé. */
+  value?: SliderValue | undefined;
+  /** Valeur de départ en mode non contrôlé. */
+  defaultValue?: SliderValue | undefined;
+  min?: number | undefined;
+  max?: number | undefined;
+  step?: number | undefined;
+  range?: boolean | undefined;
+  onChange?: ((value: SliderValue) => void) | undefined;
+  /**
+   * Alias de `onChange`, tel que l'attendaient les composants du registre.
+   * Les deux sont appelés.
+   */
+  onValueChange?: ((value: SliderValue) => void) | undefined;
+  /** Écart minimal entre les deux poignées, en mode plage. */
+  minDistance?: number | undefined;
+  /** Affiche la valeur courante à côté de la piste. */
+  showValue?: boolean | undefined;
+  /** Rendu de la valeur affichée — devise, unité, arrondi. */
+  formatValue?: ((value: number) => string) | undefined;
+  /** Libellé de la poignée basse, annoncé aux lecteurs d'écran. */
+  startLabel?: string | undefined;
+  /** Libellé de la poignée haute, en mode plage. */
+  endLabel?: string | undefined;
+  disabled?: boolean | undefined;
+  className?: string | undefined;
+}
+import { Tooltip } from "../Tooltip";
+import "./styles.css";
+
+/**
+ * Rendu DOM du slider.
+ *
+ * Tout le calcul — pas, bornes, pourcentages, poignée la plus proche,
+ * non-croisement — vit dans `useSliderState`. Ce fichier ne garde que ce qui
+ * est propre au web : la mesure de la piste, les événements souris et le JSX.
+ */
+export function Slider({
+  name,
+  value,
+  defaultValue,
+  min = 0,
+  max = 100,
+  step = 1,
+  range = false,
+  minDistance = 0,
+  showValue = false,
+  formatValue,
+  startLabel,
+  endLabel,
+  onChange,
+  onValueChange,
+  disabled,
+  className,
+}: SliderProps) {
+  const trackRef = useRef<HTMLDivElement>(null);
+  const [activeThumb, setActiveThumb] = useState<number | null>(null);
+
+  // `onValueChange` est le nom qu'employaient les composants du registre.
+  // Les deux sont notifiés plutôt que d'imposer un renommage à l'appelant.
+  const notify = (next: SliderValue) => {
+    onChange?.(next);
+    onValueChange?.(next);
+  };
+
+  const slider = useSliderState({
+    value,
+    defaultValue,
+    min,
+    max,
+    step,
+    range,
+    minDistance,
+    onChange: notify,
+  });
+
+  /** Le seul pont entre le pointeur et la logique : un ratio de 0 à 1. */
+  const valueFromClientX = (clientX: number) => {
+    const rect = trackRef.current?.getBoundingClientRect();
+    if (!rect || rect.width === 0) return slider.values[0] ?? min;
+    return slider.valueAt((clientX - rect.left) / rect.width);
+  };
+
+  useEffect(() => {
+    if (activeThumb === null) return undefined;
+
+    const onMove = (event: MouseEvent) => {
+      slider.moveThumb(activeThumb, valueFromClientX(event.clientX));
+    };
+    const onUp = () => setActiveThumb(null);
+
+    window.addEventListener("mousemove", onMove);
+    window.addEventListener("mouseup", onUp);
+
+    return () => {
+      window.removeEventListener("mousemove", onMove);
+      window.removeEventListener("mouseup", onUp);
+    };
+  });
+
+  const onTrackDown = (event: React.MouseEvent) => {
+    if (disabled) return;
+
+    const next = valueFromClientX(event.clientX);
+    const thumb = slider.nearestThumb(next);
+
+    setActiveThumb(thumb);
+    slider.moveThumb(thumb, next);
+  };
+
+  const [first = 0, second = 0] = slider.percents;
+
+  return (
+    <div
+      className={cn("sia-slider", className, disabled && "is-disabled")}
+      data-name={name}
+    >
+      <div ref={trackRef} className="sia-slider-track" onMouseDown={onTrackDown}>
+        <div
+          className="sia-slider-range"
+          style={
+            range
+              ? { left: `${first}%`, width: `${second - first}%` }
+              : { width: `${first}%` }
+          }
+        />
+      </div>
+
+      {showValue && (
+        <span className="sia-slider-value">
+          {slider.values
+            .map((one) => (formatValue ? formatValue(one) : String(one)))
+            .join(" – ")}
+        </span>
+      )}
+
+      {slider.values.map((one, index) => (
+        <Thumb
+          key={index}
+          percent={slider.percents[index] ?? 0}
+          value={one}
+          label={formatValue ? formatValue(one) : String(one)}
+          name={(index === 0 ? startLabel : endLabel) ?? `Valeur ${index + 1}`}
+          disabled={disabled}
+          onGrab={() => {
+            if (!disabled) setActiveThumb(index);
+          }}
+        />
+      ))}
+    </div>
+  );
+}
+
+function Thumb({
+  percent,
+  value,
+  label,
+  name,
+  disabled,
+  onGrab,
+}: {
+  percent: number;
+  value: number;
+  label: string;
+  name: string;
+  disabled?: boolean | undefined;
+  onGrab: () => void;
+}) {
+  return (
+    <Tooltip content={label} placement="top">
+      <span
+        role="slider"
+        aria-valuenow={value}
+        aria-label={name}
+        aria-disabled={disabled || undefined}
+        tabIndex={disabled ? -1 : 0}
+        className="sia-slider-thumb"
+        style={{ left: `${percent}%` }}
+        onMouseDown={onGrab}
+      />
+    </Tooltip>
+  );
+}

package/dist/registry/package/components/Slider/styles.css

@@ -0,0 +1,53 @@
+.sia-slider {
+  position: relative;
+  width: 100%;
+  height: 32px;
+  user-select: none;
+}
+
+/* Track */
+.sia-slider-track {
+  position: absolute;
+  top: 50%;
+  width: 100%;
+  height: 4px;
+  background: var(--sia-color-neutral-200);
+  border-radius: 999px;
+  transform: translateY(-50%);
+  cursor: pointer;
+}
+
+.sia-slider-range {
+  position: absolute;
+  height: 100%;
+  background: var(--sia-color-primary-500);
+  border-radius: inherit;
+}
+
+/* Thumb */
+.sia-slider-thumb {
+  position: absolute;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  background: var(--sia-color-primary-500);
+  border: 2px solid white;
+  cursor: grab;
+}
+
+.sia-slider-thumb:active {
+  cursor: grabbing;
+}
+
+.sia-slider-thumb-trigger {
+  position: absolute;
+  inset: 0;
+}
+
+/* Disabled */
+.sia-slider.is-disabled {
+  opacity: 0.5;
+  pointer-events: none;
+}