@spunto/design-system 0.2.1 → 0.4.0

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

@@ -0,0 +1,121 @@
+"use client"
+
+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"
+
+export type ToastPosition =
+  | "top-left"
+  | "top-center"
+  | "top-right"
+  | "bottom-left"
+  | "bottom-center"
+  | "bottom-right"
+
+export interface SpuntoProviderProps {
+  /** App tree. */
+  children?: ReactNode
+  /**
+   * Where the toast stack docks.
+   * @default "top-right"
+   */
+  toastPosition?: ToastPosition
+  /**
+   * Default auto-dismiss delay (ms) for toasts that don't set their own.
+   * `0` keeps toasts until dismissed.
+   * @default 5000
+   */
+  toastDuration?: number
+  /**
+   * Maximum number of toasts stacked at once. Older toasts collapse behind the
+   * newest and animate out past this count.
+   * @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.
+const SWIPE_DIRECTIONS: Record<ToastPosition, ToastSwipeDirection[]> = {
+  "top-left": ["up", "left"],
+  "top-center": ["up"],
+  "top-right": ["up", "right"],
+  "bottom-left": ["down", "left"],
+  "bottom-center": ["down"],
+  "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). 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">
+ *   {children}
+ * </SpuntoProvider>
+ * ```
+ */
+export function SpuntoProvider({
+  children,
+  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}>
+      <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/toast.tsx

@@ -0,0 +1,199 @@
+"use client"
+
+import type { ReactNode } from "react"
+import { Toast as ToastPrimitive } from "@base-ui/react/toast"
+
+import { cn } from "../utils"
+
+export type ToastVariant = "success" | "error" | "warning" | "info"
+
+/** Optional call-to-action rendered as a button inside the toast. */
+export interface ToastAction {
+  label: string
+  onClick: () => void
+}
+
+export interface ToastOptions {
+  /** Overrides the first positional argument as the toast's heading. */
+  title?: ReactNode
+  /** Secondary line under the title. */
+  description?: ReactNode
+  /** Colour + icon. Defaults to a neutral toast when omitted. */
+  variant?: ToastVariant
+  /**
+   * Auto-dismiss delay in ms. `0` keeps the toast until dismissed.
+   * Falls back to the `SpuntoProvider` `toastDuration` when omitted.
+   */
+  duration?: number
+  /** Optional action button. Clicking it also dismisses the toast. */
+  action?: ToastAction
+}
+
+/** Payload we stash on each Base UI toast so the renderer can style it. */
+export interface SpuntoToastData {
+  variant?: ToastVariant
+  action?: ToastAction
+}
+
+/**
+ * Singleton manager shared by the imperative `toast()` API and the
+ * `SpuntoProvider` that renders it. Created with Base UI's `createToastManager`
+ * so `toast()` is callable from anywhere — event handlers, async code, even
+ * outside the React tree.
+ */
+export const toastManager = ToastPrimitive.createToastManager<SpuntoToastData>()
+
+function emit(message: ReactNode, options: ToastOptions = {}, variant?: ToastVariant): string {
+  const resolved = variant ?? options.variant
+  return toastManager.add({
+    title: options.title ?? message,
+    description: options.description,
+    // `undefined` lets the provider's default timeout apply.
+    timeout: options.duration,
+    type: resolved,
+    data: { variant: resolved, action: options.action },
+  })
+}
+
+export interface ToastFn {
+  (message: ReactNode, options?: ToastOptions): string
+  success: (message: ReactNode, options?: ToastOptions) => string
+  error: (message: ReactNode, options?: ToastOptions) => string
+  warning: (message: ReactNode, options?: ToastOptions) => string
+  info: (message: ReactNode, options?: ToastOptions) => string
+  /** Dismiss a specific toast by id, or all toasts when called without one. */
+  dismiss: (id?: string) => void
+}
+
+/**
+ * Imperative, sonner-style toast API. Import and call from anywhere.
+ *
+ * ```ts
+ * toast.success("Worker ready", { description: "spunto-abc is up" })
+ * const id = toast("Deploying…", { duration: 0 })
+ * toast.dismiss(id)
+ * ```
+ */
+export const toast: ToastFn = Object.assign(
+  (message: ReactNode, options?: ToastOptions) => emit(message, options),
+  {
+    success: (message: ReactNode, options?: ToastOptions) => emit(message, options, "success"),
+    error: (message: ReactNode, options?: ToastOptions) => emit(message, options, "error"),
+    warning: (message: ReactNode, options?: ToastOptions) => emit(message, options, "warning"),
+    info: (message: ReactNode, options?: ToastOptions) => emit(message, options, "info"),
+    dismiss: (id?: string) => toastManager.close(id),
+  }
+)
+
+/** Per-variant accent (icon + left border). Derived from the status tokens. */
+const VARIANT_ACCENT: Record<ToastVariant, string> = {
+  success: "text-success border-l-success",
+  error: "text-destructive border-l-destructive",
+  warning: "text-warning border-l-warning",
+  info: "text-info border-l-info",
+}
+
+function VariantIcon({ variant }: { variant?: ToastVariant }) {
+  const common = { width: 18, height: 18, viewBox: "0 0 24 24", fill: "none", "aria-hidden": true } as const
+  switch (variant) {
+    case "success":
+      return (
+        <svg {...common} stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round">
+          <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} stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round">
+          <circle cx="12" cy="12" r="9" />
+          <path d="M15 9l-6 6M9 9l6 6" />
+        </svg>
+      )
+    case "warning":
+      return (
+        <svg {...common} stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round">
+          <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} stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round">
+          <circle cx="12" cy="12" r="9" />
+          <path d="M12 11v5M12 8h.01" />
+        </svg>
+      )
+    default:
+      return (
+        <svg {...common} stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round">
+          <path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9" />
+          <path d="M10.3 21a1.94 1.94 0 0 0 3.4 0" />
+        </svg>
+      )
+  }
+}
+
+function CloseIcon() {
+  return (
+    <svg width={14} height={14} 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>
+  )
+}
+
+/**
+ * Renders the live toast stack. Consumes the manager via `useToastManager`, so
+ * it must live inside a `Toast.Provider` — `SpuntoProvider` handles that.
+ * @internal
+ */
+export type ToastSwipeDirection = "up" | "down" | "left" | "right"
+
+export function ToastList({ swipeDirection }: { swipeDirection?: ToastSwipeDirection[] }) {
+  const { toasts } = ToastPrimitive.useToastManager<SpuntoToastData>()
+
+  return toasts.map((item) => {
+    const variant = item.data?.variant
+    const action = item.data?.action
+    return (
+      <ToastPrimitive.Root
+        key={item.id}
+        toast={item}
+        swipeDirection={swipeDirection}
+        data-slot="toast"
+        className={cn(
+          "pointer-events-auto rounded-lg border border-border border-l-4 bg-popover text-popover-foreground shadow-lg shadow-black/[0.06] outline-none",
+          "focus-visible:ring-2 focus-visible:ring-ring/50",
+          variant ? VARIANT_ACCENT[variant] : "border-l-muted-foreground/40"
+        )}
+      >
+        <ToastPrimitive.Content className="flex h-full items-start gap-3 p-3.5 transition-opacity duration-200 data-behind:opacity-0 data-expanded:opacity-100">
+          <span className={cn("mt-px shrink-0", variant ? VARIANT_ACCENT[variant] : "text-muted-foreground")}>
+            <VariantIcon variant={variant} />
+          </span>
+          <div className="flex min-w-0 flex-1 flex-col gap-1">
+            <ToastPrimitive.Title className="text-sm leading-snug font-semibold text-foreground" />
+            <ToastPrimitive.Description className="text-sm leading-snug text-muted-foreground" />
+            {action && (
+              <ToastPrimitive.Action
+                className="mt-1.5 inline-flex h-7 w-fit items-center rounded-md border border-border bg-background px-2.5 text-xs font-medium text-foreground transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:ring-2 focus-visible:ring-ring/50 outline-none"
+                onClick={() => {
+                  action.onClick()
+                  toastManager.close(item.id)
+                }}
+              >
+                {action.label}
+              </ToastPrimitive.Action>
+            )}
+          </div>
+          <ToastPrimitive.Close
+            aria-label="Fermer"
+            className="-mt-1 -mr-1 flex size-6 shrink-0 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"
+          >
+            <CloseIcon />
+          </ToastPrimitive.Close>
+        </ToastPrimitive.Content>
+      </ToastPrimitive.Root>
+    )
+  })
+}

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,3 +14,62 @@ 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` 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"
+export type { ToastFn, ToastOptions, ToastVariant, ToastAction } from "./components/toast"