@spunto/design-system 0.3.0 → 0.4.0

package/README.md

@@ -38,16 +38,31 @@ const nextConfig = { transpilePackages: ["@spunto/design-system"] }
   radius base is `0.25rem`; `Build`/`Ship`/`Run` are semantic (`bg-build`, `text-run`…).
 - **`cn`** — `clsx` + `tailwind-merge`.
 - **`./colors`** — `cssVar`, `chartColors`, `chartRamp`, `segColors` for JS/chart contexts.
-- **Primitives** — `Button` (+`buttonVariants`), `Card` (+parts), `Input`, `Textarea`,
-  `Label`, `Badge` (+`badgeVariants`), `Switch`. Dependency-light (cva + clsx +
-  tailwind-merge), no component framework required.
-- **`SpuntoProvider` + `toast()`** — the imperative toast system (see below).
+- **Primitives** — form + layout building blocks styled on `@base-ui/react`:
+  - _Basics_ — `Button` (+`buttonVariants`), `Card` (+parts), `Badge` (+`badgeVariants`),
+    `Separator`, `Spinner`, `Skeleton`, `Avatar` (+`AvatarImage`/`AvatarFallback`).
+  - _Forms_ — `Input`, `Textarea`, `Label`, `Switch`, `Checkbox`,
+    `RadioGroup` (+`RadioGroupItem`), `Select` (+`SelectTrigger`/`SelectValue`/
+    `SelectContent`/`SelectItem`/`SelectGroup`/`SelectGroupLabel`/`SelectSeparator`).
+  - _Navigation & feedback_ — `Tabs` (+`TabsList`/`TabsIndicator`/`TabsTab`/`TabsPanel`),
+    `Alert` (+`AlertTitle`/`AlertDescription`, +`alertVariants`) — an **inline, persistent,
+    declarative** status banner, the counterpart to the ephemeral imperative `toast()`.
+  - _Overlays_ (plug into the `SpuntoProvider` umbrella) — `Dialog`, `AlertDialog`
+    (a confirmation variant, non-dismissible), `Tooltip`. Their portals render into
+    the provider's overlay container; `Tooltip`'s shared delay group is mounted by the
+    provider too.
+- **`SpuntoProvider` + `toast()`** — the imperative toast system (see below). The
+  provider is also the umbrella that mounts the tooltip delay group and the overlay
+  portal container the dialogs/selects render into.
 
 ## Toasts — `SpuntoProvider` + `toast()`
 
 `SpuntoProvider` is the design system's client umbrella provider. Mount it once
-around your app; today it renders the toast viewport, and it's the extension
-point future overlay features plug into. `toast()` is a sonner-style imperative
+around your app; it renders the toast viewport, mounts the shared `Tooltip`
+delay group, and hosts the overlay portal container that `Dialog`/`AlertDialog`/
+`Select` render into — the single seam every overlay feature plugs into. It also
+takes `tooltipDelay` (default `600`) and `tooltipCloseDelay` (default `0`).
+`toast()` is a sonner-style imperative
 API callable from **anywhere** — event handlers, async code, even outside the
 React tree (it's backed by Base UI's `createToastManager`).
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spunto/design-system",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "description": "Spunto's shared design system — warm/flame tokens, color constants, and UI primitives.",
   "type": "module",
   "license": "MIT",

package/src/components/alert-dialog.tsx

@@ -0,0 +1,93 @@
+"use client"
+
+import type { ComponentProps } from "react"
+import { AlertDialog as AlertDialogPrimitive } from "@base-ui/react/alert-dialog"
+
+import { cn } from "../utils"
+import { useOverlayContainer } from "./spunto-provider"
+
+/**
+ * Confirmation dialog. Like `Dialog` but modal-by-default and *not* dismissible
+ * by an outside press or Escape — the user must pick an explicit action, so wire
+ * a cancel and a confirm `AlertDialogClose` in the footer.
+ */
+function AlertDialog(props: AlertDialogPrimitive.Root.Props) {
+  return <AlertDialogPrimitive.Root data-slot="alert-dialog" {...props} />
+}
+
+function AlertDialogTrigger(props: AlertDialogPrimitive.Trigger.Props) {
+  return <AlertDialogPrimitive.Trigger data-slot="alert-dialog-trigger" {...props} />
+}
+
+/** Closes the alert dialog. Wrap a `Button` via `render` for cancel/confirm. */
+function AlertDialogClose(props: AlertDialogPrimitive.Close.Props) {
+  return <AlertDialogPrimitive.Close data-slot="alert-dialog-close" {...props} />
+}
+
+function AlertDialogContent({ className, children, ...props }: AlertDialogPrimitive.Popup.Props) {
+  const container = useOverlayContainer()
+  return (
+    <AlertDialogPrimitive.Portal container={container ?? undefined}>
+      <AlertDialogPrimitive.Backdrop
+        data-slot="alert-dialog-backdrop"
+        className="fixed inset-0 z-50 bg-black/40 backdrop-blur-[2px] transition-opacity duration-200 data-ending-style:opacity-0 data-starting-style:opacity-0 dark:bg-black/60"
+      />
+      <AlertDialogPrimitive.Popup
+        data-slot="alert-dialog-content"
+        className={cn(
+          "fixed top-1/2 left-1/2 z-50 grid w-[calc(100vw-2rem)] max-w-md -translate-x-1/2 -translate-y-1/2 gap-4 rounded-xl border border-border bg-popover p-6 text-popover-foreground shadow-xl shadow-black/[0.08] outline-none",
+          "transition-all duration-200 data-ending-style:scale-95 data-ending-style:opacity-0 data-starting-style:scale-95 data-starting-style:opacity-0",
+          className
+        )}
+        {...props}
+      >
+        {children}
+      </AlertDialogPrimitive.Popup>
+    </AlertDialogPrimitive.Portal>
+  )
+}
+
+function AlertDialogHeader({ className, ...props }: ComponentProps<"div">) {
+  return <div data-slot="alert-dialog-header" className={cn("flex flex-col gap-1.5", className)} {...props} />
+}
+
+function AlertDialogFooter({ className, ...props }: ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-dialog-footer"
+      className={cn("flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", className)}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogTitle({ className, ...props }: AlertDialogPrimitive.Title.Props) {
+  return (
+    <AlertDialogPrimitive.Title
+      data-slot="alert-dialog-title"
+      className={cn("text-base leading-none font-semibold text-foreground", className)}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogDescription({ className, ...props }: AlertDialogPrimitive.Description.Props) {
+  return (
+    <AlertDialogPrimitive.Description
+      data-slot="alert-dialog-description"
+      className={cn("text-sm text-muted-foreground", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  AlertDialog,
+  AlertDialogTrigger,
+  AlertDialogClose,
+  AlertDialogContent,
+  AlertDialogHeader,
+  AlertDialogFooter,
+  AlertDialogTitle,
+  AlertDialogDescription,
+}

package/src/components/alert.tsx

@@ -0,0 +1,104 @@
+import type { ComponentProps, ReactNode } from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "../utils"
+
+// Persistent, declarative status banner — the counterpart to the ephemeral,
+// imperative `toast()`. Same four semantic variants and status tokens for a
+// coherent visual language, but this one lives in the page flow and stays put.
+const alertVariants = cva(
+  "relative grid w-full grid-cols-[auto_1fr] items-start gap-x-3 gap-y-1 rounded-lg border border-l-4 px-4 py-3 text-sm [&>svg]:mt-0.5 [&>svg]:size-[18px] [&>svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        success: "border-border border-l-success bg-success/8 text-foreground [&>svg]:text-success",
+        error: "border-border border-l-destructive bg-destructive/8 text-foreground [&>svg]:text-destructive",
+        warning: "border-border border-l-warning bg-warning/10 text-foreground [&>svg]:text-warning",
+        info: "border-border border-l-info bg-info/8 text-foreground [&>svg]:text-info",
+      },
+    },
+    defaultVariants: {
+      variant: "info",
+    },
+  }
+)
+
+export type AlertVariant = NonNullable<VariantProps<typeof alertVariants>["variant"]>
+
+function AlertIcon({ variant }: { variant: AlertVariant }) {
+  const common = { width: 18, height: 18, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": true } as const
+  switch (variant) {
+    case "success":
+      return (
+        <svg {...common}>
+          <circle cx="12" cy="12" r="9" />
+          <path d="m8.5 12 2.5 2.5 4.5-5" />
+        </svg>
+      )
+    case "error":
+      return (
+        <svg {...common}>
+          <circle cx="12" cy="12" r="9" />
+          <path d="M15 9l-6 6M9 9l6 6" />
+        </svg>
+      )
+    case "warning":
+      return (
+        <svg {...common}>
+          <path d="M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0Z" />
+          <path d="M12 9v4M12 17h.01" />
+        </svg>
+      )
+    case "info":
+      return (
+        <svg {...common}>
+          <circle cx="12" cy="12" r="9" />
+          <path d="M12 11v5M12 8h.01" />
+        </svg>
+      )
+  }
+}
+
+/**
+ * Inline status banner rendered in the page flow — persistent and declarative,
+ * unlike the transient `toast()`. Four semantic variants sharing the status
+ * tokens. Pass `icon={false}` to drop the leading icon, or a node to override it.
+ *
+ * ```tsx
+ * <Alert variant="warning">
+ *   <AlertTitle>Quota bientôt atteint</AlertTitle>
+ *   <AlertDescription>80 % du CPU alloué est utilisé.</AlertDescription>
+ * </Alert>
+ * ```
+ */
+function Alert({
+  className,
+  variant = "info",
+  icon,
+  children,
+  ...props
+}: ComponentProps<"div"> & VariantProps<typeof alertVariants> & { icon?: ReactNode | false }) {
+  const resolved = variant ?? "info"
+  return (
+    <div data-slot="alert" role="alert" className={cn(alertVariants({ variant: resolved }), className)} {...props}>
+      {icon === false ? null : icon ?? <AlertIcon variant={resolved} />}
+      <div className={cn("grid gap-1", icon === false && "col-span-2")}>{children}</div>
+    </div>
+  )
+}
+
+function AlertTitle({ className, ...props }: ComponentProps<"div">) {
+  return <div data-slot="alert-title" className={cn("font-semibold text-foreground", className)} {...props} />
+}
+
+function AlertDescription({ className, ...props }: ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-description"
+      className={cn("text-sm text-muted-foreground [&_p]:leading-relaxed", className)}
+      {...props}
+    />
+  )
+}
+
+export { Alert, AlertTitle, AlertDescription, alertVariants }

package/src/components/avatar.tsx

@@ -0,0 +1,40 @@
+"use client"
+
+import { Avatar as AvatarPrimitive } from "@base-ui/react/avatar"
+
+import { cn } from "../utils"
+
+/** Circular avatar container. Compose `AvatarImage` + `AvatarFallback` inside. */
+function Avatar({ className, ...props }: AvatarPrimitive.Root.Props) {
+  return (
+    <AvatarPrimitive.Root
+      data-slot="avatar"
+      className={cn(
+        "relative flex size-9 shrink-0 overflow-hidden rounded-full bg-muted select-none",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+/** The avatar image. Hides itself while loading or on error (fallback shows). */
+function AvatarImage({ className, ...props }: AvatarPrimitive.Image.Props) {
+  return <AvatarPrimitive.Image data-slot="avatar-image" className={cn("size-full object-cover", className)} {...props} />
+}
+
+/** Shown when the image is missing or still loading — usually initials. */
+function AvatarFallback({ className, ...props }: AvatarPrimitive.Fallback.Props) {
+  return (
+    <AvatarPrimitive.Fallback
+      data-slot="avatar-fallback"
+      className={cn(
+        "flex size-full items-center justify-center bg-muted text-sm font-medium text-muted-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Avatar, AvatarImage, AvatarFallback }

package/src/components/checkbox.tsx

@@ -0,0 +1,36 @@
+"use client"
+
+import { Checkbox as CheckboxPrimitive } from "@base-ui/react/checkbox"
+
+import { cn } from "../utils"
+
+/**
+ * A checkbox, styled to match `Switch`. Controlled via `checked`/`onCheckedChange`
+ * or uncontrolled via `defaultChecked`; supports `indeterminate`.
+ */
+function Checkbox({ className, ...props }: CheckboxPrimitive.Root.Props) {
+  return (
+    <CheckboxPrimitive.Root
+      data-slot="checkbox"
+      className={cn(
+        "peer flex size-4 shrink-0 items-center justify-center rounded-[min(var(--radius-md),5px)] border border-input bg-transparent text-primary-foreground shadow-sm transition-colors outline-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-checked:border-primary data-checked:bg-primary data-indeterminate:border-primary data-indeterminate:bg-primary dark:bg-input/30 dark:data-checked:bg-primary",
+        className
+      )}
+      {...props}
+    >
+      <CheckboxPrimitive.Indicator className="flex items-center justify-center text-current transition-none data-unchecked:hidden">
+        {props.indeterminate ? (
+          <svg width={12} height={12} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={3} strokeLinecap="round" aria-hidden>
+            <path d="M5 12h14" />
+          </svg>
+        ) : (
+          <svg width={12} height={12} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={3} strokeLinecap="round" strokeLinejoin="round" aria-hidden>
+            <path d="M20 6 9 17l-5-5" />
+          </svg>
+        )}
+      </CheckboxPrimitive.Indicator>
+    </CheckboxPrimitive.Root>
+  )
+}
+
+export { Checkbox }

package/src/components/dialog.tsx

@@ -0,0 +1,112 @@
+"use client"
+
+import type { ComponentProps } from "react"
+import { Dialog as DialogPrimitive } from "@base-ui/react/dialog"
+
+import { cn } from "../utils"
+import { useOverlayContainer } from "./spunto-provider"
+
+/** Groups the dialog parts. Controlled via `open`/`onOpenChange`, or uncontrolled. */
+function Dialog(props: DialogPrimitive.Root.Props) {
+  return <DialogPrimitive.Root data-slot="dialog" {...props} />
+}
+
+/** Element that opens the dialog. Pass `render` to reuse an existing button. */
+function DialogTrigger(props: DialogPrimitive.Trigger.Props) {
+  return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />
+}
+
+/** Imperatively closes the dialog. Wrap a `Button` via `render` for a footer action. */
+function DialogClose(props: DialogPrimitive.Close.Props) {
+  return <DialogPrimitive.Close data-slot="dialog-close" {...props} />
+}
+
+/**
+ * Portal + dimmed backdrop + centered popup, in one styled wrapper. Renders into
+ * the `SpuntoProvider` overlay container (falls back to `document.body`). Compose
+ * `DialogHeader`/`DialogFooter`/`DialogTitle`/`DialogDescription` inside it.
+ */
+function DialogContent({
+  className,
+  children,
+  showClose = true,
+  ...props
+}: DialogPrimitive.Popup.Props & { showClose?: boolean }) {
+  const container = useOverlayContainer()
+  return (
+    <DialogPrimitive.Portal container={container ?? undefined}>
+      <DialogPrimitive.Backdrop
+        data-slot="dialog-backdrop"
+        className="fixed inset-0 z-50 bg-black/40 backdrop-blur-[2px] transition-opacity duration-200 data-ending-style:opacity-0 data-starting-style:opacity-0 dark:bg-black/60"
+      />
+      <DialogPrimitive.Popup
+        data-slot="dialog-content"
+        className={cn(
+          "fixed top-1/2 left-1/2 z-50 grid w-[calc(100vw-2rem)] max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 rounded-xl border border-border bg-popover p-6 text-popover-foreground shadow-xl shadow-black/[0.08] outline-none",
+          "transition-all duration-200 data-ending-style:scale-95 data-ending-style:opacity-0 data-starting-style:scale-95 data-starting-style:opacity-0",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        {showClose && (
+          <DialogPrimitive.Close
+            aria-label="Fermer"
+            className="absolute top-4 right-4 flex size-7 items-center justify-center rounded-md text-muted-foreground/70 transition-colors hover:bg-muted hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring/50 outline-none"
+          >
+            <svg width={16} height={16} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" aria-hidden>
+              <path d="M18 6 6 18M6 6l12 12" />
+            </svg>
+          </DialogPrimitive.Close>
+        )}
+      </DialogPrimitive.Popup>
+    </DialogPrimitive.Portal>
+  )
+}
+
+/** Title + description stack at the top of the dialog. */
+function DialogHeader({ className, ...props }: ComponentProps<"div">) {
+  return <div data-slot="dialog-header" className={cn("flex flex-col gap-1.5 pr-6", className)} {...props} />
+}
+
+/** Right-aligned action row (buttons) at the bottom of the dialog. */
+function DialogFooter({ className, ...props }: ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="dialog-footer"
+      className={cn("flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", className)}
+      {...props}
+    />
+  )
+}
+
+function DialogTitle({ className, ...props }: DialogPrimitive.Title.Props) {
+  return (
+    <DialogPrimitive.Title
+      data-slot="dialog-title"
+      className={cn("text-base leading-none font-semibold text-foreground", className)}
+      {...props}
+    />
+  )
+}
+
+function DialogDescription({ className, ...props }: DialogPrimitive.Description.Props) {
+  return (
+    <DialogPrimitive.Description
+      data-slot="dialog-description"
+      className={cn("text-sm text-muted-foreground", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Dialog,
+  DialogTrigger,
+  DialogClose,
+  DialogContent,
+  DialogHeader,
+  DialogFooter,
+  DialogTitle,
+  DialogDescription,
+}

package/src/components/radio-group.tsx

@@ -0,0 +1,34 @@
+"use client"
+
+import { Radio as RadioPrimitive } from "@base-ui/react/radio"
+import { RadioGroup as RadioGroupPrimitive } from "@base-ui/react/radio-group"
+
+import { cn } from "../utils"
+
+/**
+ * A set of mutually-exclusive radio buttons. Controlled via `value`/`onValueChange`
+ * or uncontrolled via `defaultValue`. Compose `RadioGroupItem`s inside it.
+ */
+function RadioGroup({ className, ...props }: RadioGroupPrimitive.Props) {
+  return <RadioGroupPrimitive data-slot="radio-group" className={cn("grid gap-2.5", className)} {...props} />
+}
+
+/** A single radio button. `value` is what the group commits when selected. */
+function RadioGroupItem({ className, ...props }: RadioPrimitive.Root.Props) {
+  return (
+    <RadioPrimitive.Root
+      data-slot="radio-group-item"
+      className={cn(
+        "flex size-4 shrink-0 items-center justify-center rounded-full border border-input bg-transparent shadow-sm transition-colors outline-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-checked:border-primary data-checked:bg-primary dark:bg-input/30 dark:data-checked:bg-primary",
+        className
+      )}
+      {...props}
+    >
+      <RadioPrimitive.Indicator className="flex items-center justify-center data-unchecked:hidden">
+        <span className="size-1.5 rounded-full bg-primary-foreground" />
+      </RadioPrimitive.Indicator>
+    </RadioPrimitive.Root>
+  )
+}
+
+export { RadioGroup, RadioGroupItem }

package/src/components/select.tsx

@@ -0,0 +1,120 @@
+"use client"
+
+import type { ComponentProps } from "react"
+import { Select as SelectPrimitive } from "@base-ui/react/select"
+
+import { cn } from "../utils"
+import { useOverlayContainer } from "./spunto-provider"
+
+/** Groups the select parts. Controlled via `value`/`onValueChange`, or uncontrolled. */
+function Select<Value>(props: SelectPrimitive.Root.Props<Value>) {
+  return <SelectPrimitive.Root data-slot="select" {...props} />
+}
+
+/** The button that opens the listbox. Put a `SelectValue` inside it. */
+function SelectTrigger({ className, children, ...props }: SelectPrimitive.Trigger.Props) {
+  return (
+    <SelectPrimitive.Trigger
+      data-slot="select-trigger"
+      className={cn(
+        "flex h-8 w-full items-center justify-between gap-2 rounded-lg border border-input bg-transparent px-2.5 py-1 text-sm whitespace-nowrap transition-colors outline-none select-none data-[popup-open]:border-ring focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-[placeholder]:text-muted-foreground dark:bg-input/30 [&>span]:truncate",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <SelectPrimitive.Icon className="text-muted-foreground">
+        <svg width={14} height={14} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" aria-hidden>
+          <path d="m6 9 6 6 6-6" />
+        </svg>
+      </SelectPrimitive.Icon>
+    </SelectPrimitive.Trigger>
+  )
+}
+
+/** Displays the selected item's label (or `placeholder` when empty). */
+function SelectValue(props: SelectPrimitive.Value.Props) {
+  return <SelectPrimitive.Value data-slot="select-value" {...props} />
+}
+
+/** Portal + positioned listbox popup. Wraps `SelectItem`/`SelectGroup` children. */
+function SelectContent({ className, children, ...props }: SelectPrimitive.Popup.Props) {
+  const container = useOverlayContainer()
+  return (
+    <SelectPrimitive.Portal container={container ?? undefined}>
+      <SelectPrimitive.Positioner
+        data-slot="select-positioner"
+        className="z-50 outline-none"
+        side="bottom"
+        align="start"
+        sideOffset={4}
+      >
+        <SelectPrimitive.Popup
+          data-slot="select-content"
+          className={cn(
+            "max-h-[var(--available-height)] min-w-[max(8rem,var(--anchor-width))] overflow-y-auto overscroll-contain rounded-lg border border-border bg-popover p-1 text-popover-foreground shadow-lg shadow-black/[0.06] outline-none",
+            "origin-[var(--transform-origin)] transition-[transform,opacity] duration-150 data-ending-style:scale-95 data-ending-style:opacity-0 data-starting-style:scale-95 data-starting-style:opacity-0",
+            className
+          )}
+          {...props}
+        >
+          {children}
+        </SelectPrimitive.Popup>
+      </SelectPrimitive.Positioner>
+    </SelectPrimitive.Portal>
+  )
+}
+
+/** A selectable option. `value` is what gets committed; children is the label. */
+function SelectItem({ className, children, ...props }: SelectPrimitive.Item.Props) {
+  return (
+    <SelectPrimitive.Item
+      data-slot="select-item"
+      className={cn(
+        "relative flex cursor-default items-center gap-2 rounded-md py-1.5 pr-2 pl-7 text-sm outline-none select-none data-highlighted:bg-accent data-highlighted:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50",
+        className
+      )}
+      {...props}
+    >
+      <span className="absolute left-2 flex size-3.5 items-center justify-center">
+        <SelectPrimitive.ItemIndicator>
+          <svg width={14} height={14} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2.5} strokeLinecap="round" strokeLinejoin="round" aria-hidden>
+            <path d="M20 6 9 17l-5-5" />
+          </svg>
+        </SelectPrimitive.ItemIndicator>
+      </span>
+      <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+    </SelectPrimitive.Item>
+  )
+}
+
+/** Groups related items under a `SelectGroupLabel`. */
+function SelectGroup(props: SelectPrimitive.Group.Props) {
+  return <SelectPrimitive.Group data-slot="select-group" {...props} />
+}
+
+function SelectGroupLabel({ className, ...props }: SelectPrimitive.GroupLabel.Props) {
+  return (
+    <SelectPrimitive.GroupLabel
+      data-slot="select-group-label"
+      className={cn("px-2 py-1.5 text-xs font-medium text-muted-foreground", className)}
+      {...props}
+    />
+  )
+}
+
+/** A thin rule between item groups. */
+function SelectSeparator({ className, ...props }: ComponentProps<"div">) {
+  return <div data-slot="select-separator" role="separator" className={cn("-mx-1 my-1 h-px bg-border", className)} {...props} />
+}
+
+export {
+  Select,
+  SelectTrigger,
+  SelectValue,
+  SelectContent,
+  SelectItem,
+  SelectGroup,
+  SelectGroupLabel,
+  SelectSeparator,
+}

package/src/components/separator.tsx

@@ -0,0 +1,23 @@
+"use client"
+
+import { Separator as SeparatorPrimitive } from "@base-ui/react/separator"
+
+import { cn } from "../utils"
+
+/** A thin rule that separates content, horizontal or vertical. */
+function Separator({ className, orientation = "horizontal", ...props }: SeparatorPrimitive.Props) {
+  return (
+    <SeparatorPrimitive
+      data-slot="separator"
+      orientation={orientation}
+      className={cn(
+        "shrink-0 bg-border",
+        orientation === "vertical" ? "h-full w-px" : "h-px w-full",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Separator }

package/src/components/skeleton.tsx

@@ -0,0 +1,13 @@
+import type { ComponentProps } from "react"
+
+import { cn } from "../utils"
+
+/**
+ * A pulsing placeholder for content that hasn't loaded yet. Size it with
+ * utilities (`className="h-4 w-32"`); use `rounded-full` for circular avatars.
+ */
+function Skeleton({ className, ...props }: ComponentProps<"div">) {
+  return <div data-slot="skeleton" className={cn("animate-pulse rounded-md bg-muted", className)} {...props} />
+}
+
+export { Skeleton }

package/src/components/spinner.tsx

@@ -0,0 +1,45 @@
+import type { ComponentProps } from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "../utils"
+
+const spinnerVariants = cva("animate-spin text-current", {
+  variants: {
+    size: {
+      xs: "size-3",
+      sm: "size-4",
+      default: "size-5",
+      lg: "size-6",
+    },
+  },
+  defaultVariants: {
+    size: "default",
+  },
+})
+
+/**
+ * An indeterminate loading spinner. Inherits the current text color, so drop it
+ * inside a `Button` or set `text-*` to tint it.
+ */
+function Spinner({
+  className,
+  size,
+  ...props
+}: ComponentProps<"svg"> & VariantProps<typeof spinnerVariants>) {
+  return (
+    <svg
+      data-slot="spinner"
+      role="status"
+      aria-label="Chargement"
+      viewBox="0 0 24 24"
+      fill="none"
+      className={cn(spinnerVariants({ size }), className)}
+      {...props}
+    >
+      <circle cx="12" cy="12" r="9" stroke="currentColor" strokeWidth={2.5} className="opacity-20" />
+      <path d="M21 12a9 9 0 0 0-9-9" stroke="currentColor" strokeWidth={2.5} strokeLinecap="round" />
+    </svg>
+  )
+}
+
+export { Spinner, spinnerVariants }

package/src/components/spunto-provider.tsx

@@ -1,7 +1,8 @@
 "use client"
 
-import type { ReactNode } from "react"
+import { createContext, useContext, useState, type ReactNode } from "react"
 import { Toast as ToastPrimitive } from "@base-ui/react/toast"
+import { Tooltip as TooltipPrimitive } from "@base-ui/react/tooltip"
 
 import { ToastList, toastManager, type ToastSwipeDirection } from "./toast"
 
@@ -33,6 +34,17 @@ export interface SpuntoProviderProps {
    * @default 3
    */
   toastLimit?: number
+  /**
+   * Delay (ms) before a hovered `Tooltip` opens. Shared across every tooltip via
+   * Base UI's delay group, so once one is showing its neighbours open instantly.
+   * @default 600
+   */
+  tooltipDelay?: number
+  /**
+   * Delay (ms) before a tooltip closes once the pointer leaves.
+   * @default 0
+   */
+  tooltipCloseDelay?: number
 }
 
 // Toasts swipe toward the nearest screen edge for the current position.
@@ -45,12 +57,33 @@ const SWIPE_DIRECTIONS: Record<ToastPosition, ToastSwipeDirection[]> = {
   "bottom-right": ["down", "right"],
 }
 
+/**
+ * Shared DOM node the overlay components (`Dialog`, `AlertDialog`, `Select`,
+ * `Tooltip`) portal into. `SpuntoProvider` renders it as the last child of its
+ * subtree so every popup lands *inside* the themed tree — the `.dark` class and
+ * the token CSS vars cascade to portalled content for free. When no provider is
+ * mounted the value is `null`, and the primitives fall back to Base UI's default
+ * (`document.body`), so the components keep working standalone.
+ * @internal
+ */
+const OverlayContainerContext = createContext<HTMLElement | null>(null)
+
+/**
+ * Container element the design-system overlays portal into, provided by the
+ * nearest `SpuntoProvider` (or `null` → Base UI's `document.body` default).
+ * @internal
+ */
+export function useOverlayContainer(): HTMLElement | null {
+  return useContext(OverlayContainerContext)
+}
+
 /**
  * Client-side umbrella provider for the Spunto design system. Wrap your app once
  * (in a Next.js `app/layout.tsx`, it's a client component — render it around
  * `{children}` inside the server layout, no `"use client"` needed on the layout
- * itself). Today it mounts the toast viewport; it's the seam future overlay
- * features (dialogs, tooltips, theme config) plug into without a breaking change.
+ * itself). It mounts the toast viewport, the shared tooltip delay group, and the
+ * overlay portal container that dialogs/selects render into — the single seam
+ * every overlay feature plugs into without a breaking change.
  *
  * ```tsx
  * <SpuntoProvider toastPosition="bottom-right">
@@ -63,15 +96,26 @@ export function SpuntoProvider({
   toastPosition = "top-right",
   toastDuration = 5000,
   toastLimit = 3,
+  tooltipDelay = 600,
+  tooltipCloseDelay = 0,
 }: SpuntoProviderProps) {
+  const [overlayContainer, setOverlayContainer] = useState<HTMLElement | null>(null)
+
   return (
     <ToastPrimitive.Provider toastManager={toastManager} timeout={toastDuration} limit={toastLimit}>
-      {children}
-      <ToastPrimitive.Portal>
-        <ToastPrimitive.Viewport data-slot="toast-viewport" data-position={toastPosition}>
-          <ToastList swipeDirection={SWIPE_DIRECTIONS[toastPosition]} />
-        </ToastPrimitive.Viewport>
-      </ToastPrimitive.Portal>
+      <TooltipPrimitive.Provider delay={tooltipDelay} closeDelay={tooltipCloseDelay}>
+        <OverlayContainerContext.Provider value={overlayContainer}>
+          {children}
+          <ToastPrimitive.Portal>
+            <ToastPrimitive.Viewport data-slot="toast-viewport" data-position={toastPosition}>
+              <ToastList swipeDirection={SWIPE_DIRECTIONS[toastPosition]} />
+            </ToastPrimitive.Viewport>
+          </ToastPrimitive.Portal>
+          {/* Overlays (Dialog/Select/Tooltip) portal into this node — kept last so
+              popups stack above the app, and inside the provider so tokens cascade. */}
+          <div ref={setOverlayContainer} data-slot="spunto-overlay-root" />
+        </OverlayContainerContext.Provider>
+      </TooltipPrimitive.Provider>
     </ToastPrimitive.Provider>
   )
 }

package/src/components/tabs.tsx

@@ -0,0 +1,68 @@
+"use client"
+
+import { Tabs as TabsPrimitive } from "@base-ui/react/tabs"
+
+import { cn } from "../utils"
+
+/** Groups the tab parts. Controlled via `value`/`onValueChange`, or uncontrolled. */
+function Tabs({ className, ...props }: TabsPrimitive.Root.Props) {
+  return <TabsPrimitive.Root data-slot="tabs" className={cn("flex flex-col gap-3", className)} {...props} />
+}
+
+/**
+ * The row of tabs. Contains `TabsTab`s and an optional `TabsIndicator`. Styled as
+ * a segmented control with a muted track.
+ */
+function TabsList({ className, ...props }: TabsPrimitive.List.Props) {
+  return (
+    <TabsPrimitive.List
+      data-slot="tabs-list"
+      className={cn(
+        "relative isolate flex h-9 w-fit items-center gap-1 rounded-lg bg-muted p-1 text-muted-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+/** The sliding highlight behind the active tab. Optional; place inside `TabsList`. */
+function TabsIndicator({ className, ...props }: TabsPrimitive.Indicator.Props) {
+  return (
+    <TabsPrimitive.Indicator
+      data-slot="tabs-indicator"
+      className={cn(
+        "absolute top-1/2 left-0 z-[-1] h-[calc(100%-0.5rem)] w-[var(--active-tab-width)] -translate-y-1/2 translate-x-[var(--active-tab-left)] rounded-md bg-background shadow-sm transition-[width,transform] duration-200 ease-out",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+/** A single tab button. `value` ties it to the matching `TabsPanel`. */
+function TabsTab({ className, ...props }: TabsPrimitive.Tab.Props) {
+  return (
+    <TabsPrimitive.Tab
+      data-slot="tabs-tab"
+      className={cn(
+        "inline-flex h-full cursor-default items-center justify-center rounded-md px-3 text-sm font-medium whitespace-nowrap transition-colors outline-none select-none hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring/50 data-disabled:pointer-events-none data-disabled:opacity-50 data-selected:text-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+/** The content shown for the tab with the matching `value`. */
+function TabsPanel({ className, ...props }: TabsPrimitive.Panel.Props) {
+  return (
+    <TabsPrimitive.Panel
+      data-slot="tabs-panel"
+      className={cn("outline-none focus-visible:ring-2 focus-visible:ring-ring/50", className)}
+      {...props}
+    />
+  )
+}
+
+export { Tabs, TabsList, TabsIndicator, TabsTab, TabsPanel }

package/src/components/tooltip.tsx

@@ -0,0 +1,90 @@
+"use client"
+
+import type { ReactElement, ReactNode } from "react"
+import { Tooltip as TooltipPrimitive } from "@base-ui/react/tooltip"
+
+import { cn } from "../utils"
+import { useOverlayContainer } from "./spunto-provider"
+
+export interface TooltipProps {
+  /** The tooltip bubble content. When omitted, the child renders with no tooltip. */
+  content?: ReactNode
+  /** The element the tooltip is anchored to (used as the trigger). */
+  children: ReactElement<Record<string, unknown>>
+  /**
+   * Preferred side of the trigger to place the bubble.
+   * @default "top"
+   */
+  side?: TooltipPrimitive.Positioner.Props["side"]
+  /**
+   * Alignment along the chosen side.
+   * @default "center"
+   */
+  align?: TooltipPrimitive.Positioner.Props["align"]
+  /** Gap (px) between the trigger and the bubble. @default 6 */
+  sideOffset?: number
+  /** Show the little pointer triangle. @default true */
+  arrow?: boolean
+  /** Controlled open state. */
+  open?: boolean
+  /** Open-state change handler (controlled mode). */
+  onOpenChange?: TooltipPrimitive.Root.Props["onOpenChange"]
+}
+
+/**
+ * Hover/focus tooltip built on Base UI. Wrap any focusable element:
+ *
+ * ```tsx
+ * <Tooltip content="Copier l'ID">
+ *   <Button size="icon" variant="ghost"><CopyIcon /></Button>
+ * </Tooltip>
+ * ```
+ *
+ * The shared open delay + "instant on neighbour" grouping comes from the
+ * `Tooltip.Provider` that `SpuntoProvider` mounts; it also works standalone.
+ */
+function Tooltip({
+  content,
+  children,
+  side = "top",
+  align = "center",
+  sideOffset = 6,
+  arrow = true,
+  open,
+  onOpenChange,
+}: TooltipProps) {
+  const container = useOverlayContainer()
+
+  if (content == null || content === false) return children
+
+  return (
+    <TooltipPrimitive.Root open={open} onOpenChange={onOpenChange}>
+      <TooltipPrimitive.Trigger data-slot="tooltip-trigger" render={children} />
+      <TooltipPrimitive.Portal container={container ?? undefined}>
+        <TooltipPrimitive.Positioner data-slot="tooltip-positioner" side={side} align={align} sideOffset={sideOffset}>
+          <TooltipPrimitive.Popup
+            data-slot="tooltip"
+            className={cn(
+              "z-50 max-w-xs rounded-md bg-foreground px-2 py-1 text-xs font-medium text-background shadow-md shadow-black/10",
+              "origin-[var(--transform-origin)] transition-[transform,opacity] duration-150 data-ending-style:scale-95 data-ending-style:opacity-0 data-starting-style:scale-95 data-starting-style:opacity-0"
+            )}
+          >
+            {arrow && (
+              <TooltipPrimitive.Arrow
+                data-slot="tooltip-arrow"
+                className="data-[side=bottom]:top-[-6px] data-[side=left]:right-[-6px] data-[side=right]:left-[-6px] data-[side=top]:bottom-[-6px] data-[side=left]:rotate-90 data-[side=right]:-rotate-90 data-[side=bottom]:rotate-180"
+              >
+                <svg width={12} height={6} viewBox="0 0 12 6" fill="none" aria-hidden>
+                  <path d="M0 0L6 6L12 0" className="fill-foreground" />
+                </svg>
+              </TooltipPrimitive.Arrow>
+            )}
+            {content}
+          </TooltipPrimitive.Popup>
+        </TooltipPrimitive.Positioner>
+      </TooltipPrimitive.Portal>
+    </TooltipPrimitive.Root>
+  )
+}
+
+export { Tooltip }

package/src/index.ts

@@ -14,9 +14,61 @@ export { Textarea } from "./components/textarea"
 export { Label } from "./components/label"
 export { Badge, badgeVariants } from "./components/badge"
 export { Switch } from "./components/switch"
+export { Checkbox } from "./components/checkbox"
+export { RadioGroup, RadioGroupItem } from "./components/radio-group"
+export { Separator } from "./components/separator"
+export { Skeleton } from "./components/skeleton"
+export { Spinner, spinnerVariants } from "./components/spinner"
+export { Avatar, AvatarImage, AvatarFallback } from "./components/avatar"
+
+// Inline, declarative status banner (persistent) — the counterpart to `toast()`.
+// `alertVariants` ships from this directive-free module so it stays RSC-callable.
+export { Alert, AlertTitle, AlertDescription, alertVariants } from "./components/alert"
+export type { AlertVariant } from "./components/alert"
+
+// Tabs — list + sliding indicator + tab + panel, on Base UI.
+export { Tabs, TabsList, TabsIndicator, TabsTab, TabsPanel } from "./components/tabs"
+
+// Select — dropdown listbox with items, groups, and separators, on Base UI.
+export {
+  Select,
+  SelectTrigger,
+  SelectValue,
+  SelectContent,
+  SelectItem,
+  SelectGroup,
+  SelectGroupLabel,
+  SelectSeparator,
+} from "./components/select"
+
+// Overlays that plug into the `SpuntoProvider` umbrella (portal container +
+// tooltip delay group).
+export { Tooltip } from "./components/tooltip"
+export type { TooltipProps } from "./components/tooltip"
+export {
+  Dialog,
+  DialogTrigger,
+  DialogClose,
+  DialogContent,
+  DialogHeader,
+  DialogFooter,
+  DialogTitle,
+  DialogDescription,
+} from "./components/dialog"
+export {
+  AlertDialog,
+  AlertDialogTrigger,
+  AlertDialogClose,
+  AlertDialogContent,
+  AlertDialogHeader,
+  AlertDialogFooter,
+  AlertDialogTitle,
+  AlertDialogDescription,
+} from "./components/alert-dialog"
 
 // Toasts — imperative `toast()` API + the umbrella client provider that renders
-// them. `SpuntoProvider` is the extension point for future overlay features.
+// them. `SpuntoProvider` mounts the toast viewport, the tooltip delay group, and
+// the overlay portal container that dialogs/selects render into.
 export { SpuntoProvider } from "./components/spunto-provider"
 export type { SpuntoProviderProps, ToastPosition } from "./components/spunto-provider"
 export { toast } from "./components/toast"