@spunto/design-system 0.16.0 → 0.18.0

package/src/components/command-palette.tsx

@@ -15,6 +15,7 @@ import { Dialog } from "@base-ui/react/dialog"
 import { SearchIcon } from "lucide-react"
 
 import { cn } from "../utils"
+import { highlightMatch, type CommandFilter, type CommandFilterItem } from "./command-shared"
 import { Kbd } from "./kbd"
 import { Skeleton } from "./skeleton"
 import { Spinner } from "./spinner"
@@ -41,17 +42,13 @@ import { useOverlayContainer } from "./spunto-provider"
 // already-filtered items in.
 // ---------------------------------------------------------------------------
 
-/** What the filter gets to look at for one item. */
-export interface CommandPaletteFilterItem {
-  /** `label` prop, or the item's children when they're a plain string. */
-  label: string
-  /** Extra terms that match but are never displayed. */
-  keywords: string[]
-  /** The item's `value`, when it has one. */
-  value?: string
-}
+/**
+ * What the filter gets to look at for one item. Shared with `CommandMenu` — the
+ * two components filter identically, only their shell differs.
+ */
+export type CommandPaletteFilterItem = CommandFilterItem
 
-export type CommandPaletteFilter = (item: CommandPaletteFilterItem, query: string) => boolean
+export type CommandPaletteFilter = CommandFilter
 
 interface PaletteContextValue {
   query: string
@@ -107,46 +104,6 @@ function comboMatches(event: KeyboardEvent, combo: Combo): boolean {
   return true
 }
 
-// --- match highlighting -----------------------------------------------------
-
-/**
- * Folds a string to a comparable form (lowercase, no diacritics) while keeping,
- * for every folded character, the index it came from — so a match found on the
- * folded text can be highlighted on the original one ("déploiement" matched by
- * "deploi" highlights the right six characters, accent included).
- */
-function fold(text: string): { folded: string; map: number[] } {
-  let folded = ""
-  const map: number[] = []
-  for (let i = 0; i < text.length; i++) {
-    const chunk = text[i].normalize("NFD").replace(/\p{Diacritic}/gu, "").toLowerCase()
-    for (const char of chunk) {
-      folded += char
-      map.push(i)
-    }
-  }
-  return { folded, map }
-}
-
-/** Wraps the matched slice of `text` in a `<mark>`. Returns the plain text when there's no match. */
-function highlightMatch(text: string, query: string): ReactNode {
-  if (!query.trim()) return text
-  const haystack = fold(text)
-  const needle = fold(query.trim()).folded
-  if (!needle) return text
-  const at = haystack.folded.indexOf(needle)
-  if (at === -1) return text
-  const start = haystack.map[at]
-  const end = haystack.map[at + needle.length - 1] + 1
-  return (
-    <>
-      {text.slice(0, start)}
-      <mark className="rounded-xs bg-primary/15 text-inherit">{text.slice(start, end)}</mark>
-      {text.slice(end)}
-    </>
-  )
-}
-
 // --- root -------------------------------------------------------------------
 
 export interface CommandPaletteProps {

package/src/components/command-shared.tsx

@@ -0,0 +1,59 @@
+import type { ReactNode } from "react"
+
+// ---------------------------------------------------------------------------
+// What `CommandPalette` (modal, ⌘K) and `CommandMenu` (inline, anchored) share:
+// how an item describes itself to the filter, and how a match is highlighted.
+// The two components differ in their shell — a focus-trapping Dialog vs. a
+// Popover that never takes focus — not in what "matching" means, so a filter
+// written for one works verbatim on the other.
+// ---------------------------------------------------------------------------
+
+/** What the filter gets to look at for one item. */
+export interface CommandFilterItem {
+  /** `label` prop, or the item's children when they're a plain string. */
+  label: string
+  /** Extra terms that match but are never displayed. */
+  keywords: string[]
+  /** The item's `value`, when it has one. */
+  value?: string
+}
+
+export type CommandFilter = (item: CommandFilterItem, query: string) => boolean
+
+/**
+ * Folds a string to a comparable form (lowercase, no diacritics) while keeping,
+ * for every folded character, the index it came from — so a match found on the
+ * folded text can be highlighted on the original one ("déploiement" matched by
+ * "deploi" highlights the right six characters, accent included).
+ */
+export function fold(text: string): { folded: string; map: number[] } {
+  let folded = ""
+  const map: number[] = []
+  for (let i = 0; i < text.length; i++) {
+    const chunk = text[i].normalize("NFD").replace(/\p{Diacritic}/gu, "").toLowerCase()
+    for (const char of chunk) {
+      folded += char
+      map.push(i)
+    }
+  }
+  return { folded, map }
+}
+
+/** Wraps the matched slice of `text` in a `<mark>`. Returns the plain text when there's no match. */
+export function highlightMatch(text: string, query: string): ReactNode {
+  if (!query.trim()) return text
+  const haystack = fold(text)
+  const needle = fold(query.trim()).folded
+  if (!needle) return text
+  const at = haystack.folded.indexOf(needle)
+  if (at === -1) return text
+  const start = haystack.map[at]
+  const end = haystack.map[at + needle.length - 1] + 1
+  return (
+    <>
+      {text.slice(0, start)}
+      <mark className="rounded-xs bg-primary/15 text-inherit">{text.slice(start, end)}</mark>
+      {text.slice(end)}
+    </>
+  )
+}

package/src/components/sheet.tsx

@@ -0,0 +1,173 @@
+"use client"
+
+import type { ComponentProps } from "react"
+import { Dialog as SheetPrimitive } from "@base-ui/react/dialog"
+
+import { cn } from "../utils"
+import { useOverlayContainer } from "./spunto-provider"
+
+// ---------------------------------------------------------------------------
+// A sheet is a Dialog that enters from an edge. Same primitive (`@base-ui/react/
+// dialog` — focus trap, Escape, backdrop, focus restore), same portal target as
+// every other overlay here (the `SpuntoProvider` container), only the geometry
+// changes.
+//
+// Position and size are two separate props on purpose. `side` decides which edge
+// the panel is glued to; `size` decides how far it comes in. Both resolve to
+// plain, unprefixed utilities computed in JS — *not* `data-[side=right]:`-style
+// selectors — so a `className` on `SheetContent` still wins on specificity, and
+// an app can go from a 32rem panel to full-bleed with `size="full"` or with its
+// own `sm:max-w-*` without reaching for `!important`.
+// ---------------------------------------------------------------------------
+
+export type SheetSide = "right" | "left" | "top" | "bottom"
+
+/** How far the panel comes in. Widths for left/right, heights for top/bottom. */
+export type SheetSize = "sm" | "md" | "lg" | "xl" | "full"
+
+const SIDE_CLASSES: Record<SheetSide, string> = {
+  right:
+    "inset-y-0 right-0 h-full w-full border-l data-ending-style:translate-x-full data-starting-style:translate-x-full",
+  left:
+    "inset-y-0 left-0 h-full w-full border-r data-ending-style:-translate-x-full data-starting-style:-translate-x-full",
+  top:
+    "inset-x-0 top-0 w-full border-b data-ending-style:-translate-y-full data-starting-style:-translate-y-full",
+  bottom:
+    "inset-x-0 bottom-0 w-full border-t data-ending-style:translate-y-full data-starting-style:translate-y-full",
+}
+
+// Below `sm` a side panel always takes the full width — a 24rem panel on a phone
+// is a modal with a useless 3rem gutter.
+const HORIZONTAL_SIZE_CLASSES: Record<SheetSize, string> = {
+  sm: "sm:max-w-sm",
+  md: "sm:max-w-lg",
+  lg: "sm:max-w-3xl",
+  xl: "sm:max-w-5xl",
+  full: "sm:max-w-none",
+}
+
+const VERTICAL_SIZE_CLASSES: Record<SheetSize, string> = {
+  sm: "h-auto max-h-[16rem]",
+  md: "h-auto max-h-[24rem]",
+  lg: "h-auto max-h-[32rem]",
+  xl: "h-auto max-h-[80dvh]",
+  full: "h-dvh",
+}
+
+/** Groups the sheet parts. Controlled via `open`/`onOpenChange`, or uncontrolled. */
+function Sheet(props: SheetPrimitive.Root.Props) {
+  return <SheetPrimitive.Root data-slot="sheet" {...props} />
+}
+
+/** Element that opens the sheet. Pass `render` to reuse an existing button. */
+function SheetTrigger(props: SheetPrimitive.Trigger.Props) {
+  return <SheetPrimitive.Trigger data-slot="sheet-trigger" {...props} />
+}
+
+/** Imperatively closes the sheet. Wrap a `Button` via `render` for a footer action. */
+function SheetClose(props: SheetPrimitive.Close.Props) {
+  return <SheetPrimitive.Close data-slot="sheet-close" {...props} />
+}
+
+export interface SheetContentProps extends SheetPrimitive.Popup.Props {
+  /** Which edge the panel slides in from. @default "right" */
+  side?: SheetSide
+  /** Width (left/right) or height (top/bottom) of the panel. @default "md" */
+  size?: SheetSize
+  /** Draws the ✕ in the top corner. @default true */
+  showClose?: boolean
+}
+
+/**
+ * Portal + backdrop + the sliding panel, in one styled wrapper. Renders into the
+ * `SpuntoProvider` overlay container (falls back to `document.body`).
+ *
+ * The panel is a `flex flex-col` by default; `className` is the layout escape
+ * hatch and is merged last — pass `p-0` to lay out your own padding, `grid
+ * grid-cols-2` to split it in two columns, `overflow-y-auto` to scroll the whole
+ * panel rather than an inner region.
+ */
+function SheetContent({
+  className,
+  children,
+  side = "right",
+  size = "md",
+  showClose = true,
+  ...props
+}: SheetContentProps) {
+  const container = useOverlayContainer()
+  const horizontal = side === "left" || side === "right"
+  return (
+    <SheetPrimitive.Portal container={container ?? undefined}>
+      <SheetPrimitive.Backdrop
+        data-slot="sheet-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"
+      />
+      <SheetPrimitive.Popup
+        data-slot="sheet-content"
+        data-side={side}
+        className={cn(
+          "fixed z-50 flex flex-col gap-4 border-border bg-background bg-clip-padding text-sm text-foreground shadow-xl shadow-black/[0.08] outline-none",
+          "transition-transform duration-200 ease-out",
+          SIDE_CLASSES[side],
+          horizontal ? HORIZONTAL_SIZE_CLASSES[size] : VERTICAL_SIZE_CLASSES[size],
+          className
+        )}
+        {...props}
+      >
+        {children}
+        {showClose && (
+          <SheetPrimitive.Close
+            aria-label="Fermer"
+            className="absolute top-3.5 right-3.5 flex size-7 items-center justify-center rounded-md text-muted-foreground/70 transition-colors outline-none hover:bg-muted hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring/50"
+          >
+            <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>
+          </SheetPrimitive.Close>
+        )}
+      </SheetPrimitive.Popup>
+    </SheetPrimitive.Portal>
+  )
+}
+
+/** Title + description stack at the top of the panel. */
+function SheetHeader({ className, ...props }: ComponentProps<"div">) {
+  return <div data-slot="sheet-header" className={cn("flex flex-col gap-0.5 p-4", className)} {...props} />
+}
+
+/** Action row pinned to the bottom of the panel. */
+function SheetFooter({ className, ...props }: ComponentProps<"div">) {
+  return <div data-slot="sheet-footer" className={cn("mt-auto flex flex-col gap-2 p-4", className)} {...props} />
+}
+
+function SheetTitle({ className, ...props }: SheetPrimitive.Title.Props) {
+  return (
+    <SheetPrimitive.Title
+      data-slot="sheet-title"
+      className={cn("text-base leading-none font-semibold text-foreground", className)}
+      {...props}
+    />
+  )
+}
+
+function SheetDescription({ className, ...props }: SheetPrimitive.Description.Props) {
+  return (
+    <SheetPrimitive.Description
+      data-slot="sheet-description"
+      className={cn("text-sm text-muted-foreground", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Sheet,
+  SheetTrigger,
+  SheetClose,
+  SheetContent,
+  SheetHeader,
+  SheetFooter,
+  SheetTitle,
+  SheetDescription,
+}

package/src/components/table.tsx

@@ -0,0 +1,98 @@
+"use client"
+
+import type { ComponentProps } from "react"
+
+import { cn } from "../utils"
+
+// ---------------------------------------------------------------------------
+// Presentational only, on purpose: no sorting, no pagination, no column model.
+// Apps that show tables already own that logic (and disagree on it) — what they
+// were re-writing every time is the markup and the token choices, so that's all
+// this ships. Every part is the plain HTML element with a `data-slot` and a
+// class string, `className` merged last.
+// ---------------------------------------------------------------------------
+
+export interface TableProps extends ComponentProps<"table"> {
+  /**
+   * Class for the scroll container wrapping the `<table>` — the only place a
+   * `max-height`, a sticky-header context or a border/rounding can live, since
+   * it's the element that scrolls.
+   */
+  containerClassName?: string
+}
+
+/** The `<table>` plus its horizontal scroll container. */
+function Table({ className, containerClassName, ...props }: TableProps) {
+  return (
+    <div data-slot="table-container" className={cn("relative w-full overflow-x-auto", containerClassName)}>
+      <table data-slot="table" className={cn("w-full caption-bottom text-sm", className)} {...props} />
+    </div>
+  )
+}
+
+function TableHeader({ className, ...props }: ComponentProps<"thead">) {
+  return <thead data-slot="table-header" className={cn("[&_tr]:border-b [&_tr]:border-border", className)} {...props} />
+}
+
+function TableBody({ className, ...props }: ComponentProps<"tbody">) {
+  return <tbody data-slot="table-body" className={cn("[&_tr:last-child]:border-0", className)} {...props} />
+}
+
+/** Totals row. Sits under the body with its own tinted background. */
+function TableFooter({ className, ...props }: ComponentProps<"tfoot">) {
+  return (
+    <tfoot
+      data-slot="table-footer"
+      className={cn("border-t border-border bg-muted/50 font-medium [&>tr]:last:border-b-0", className)}
+      {...props}
+    />
+  )
+}
+
+/** A row. Hover tint by default; `data-[state=selected]` keeps it tinted. */
+function TableRow({ className, ...props }: ComponentProps<"tr">) {
+  return (
+    <tr
+      data-slot="table-row"
+      className={cn(
+        "border-b border-border transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+/** A header cell (`<th>`). */
+function TableHead({ className, ...props }: ComponentProps<"th">) {
+  return (
+    <th
+      data-slot="table-head"
+      className={cn(
+        "h-10 px-2 text-left align-middle font-medium whitespace-nowrap text-foreground [&:has([role=checkbox])]:pr-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+/** A body cell (`<td>`). */
+function TableCell({ className, ...props }: ComponentProps<"td">) {
+  return (
+    <td
+      data-slot="table-cell"
+      className={cn("p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0", className)}
+      {...props}
+    />
+  )
+}
+
+/** Caption under the table — its accessible description. */
+function TableCaption({ className, ...props }: ComponentProps<"caption">) {
+  return (
+    <caption data-slot="table-caption" className={cn("mt-4 text-sm text-muted-foreground", className)} {...props} />
+  )
+}
+
+export { Table, TableHeader, TableBody, TableFooter, TableRow, TableHead, TableCell, TableCaption }

package/src/index.ts

@@ -91,6 +91,35 @@ export {
   AlertDialogDescription,
 } from "./components/alert-dialog"
 
+// Sheet — the same Base UI dialog, entering from an edge. `side` picks the edge,
+// `size` how far it comes in; both resolve to plain utilities so `className`
+// stays the layout escape hatch (no `!important` needed to widen a panel).
+export {
+  Sheet,
+  SheetTrigger,
+  SheetClose,
+  SheetContent,
+  SheetHeader,
+  SheetFooter,
+  SheetTitle,
+  SheetDescription,
+} from "./components/sheet"
+export type { SheetContentProps, SheetSide, SheetSize } from "./components/sheet"
+
+// Table — presentational only (no sorting, no pagination): apps own that logic,
+// what they were duplicating is the markup and the tokens.
+export {
+  Table,
+  TableHeader,
+  TableBody,
+  TableFooter,
+  TableRow,
+  TableHead,
+  TableCell,
+  TableCaption,
+} from "./components/table"
+export type { TableProps } from "./components/table"
+
 // CommandPalette — the ⌘K palette, domain-free: an input, groups, items, and a
 // jump. Base UI `Autocomplete` (roles + ↑↓ navigation) rendered inline inside a
 // Base UI `Dialog` (focus trap + Escape), portalled into the provider's overlay
@@ -121,6 +150,64 @@ export type {
   CommandPaletteLinkRender,
 } from "./components/command-palette"
 
+// CommandMenu — the same parts, inline: a Base UI `Popover` anchored to whatever
+// the caller points at (an element or a caret rect), which **never moves focus**
+// (`initialFocus`/`finalFocus` off, no backdrop, non-modal) and takes ↑ ↓ ↵ esc on
+// `document` in the capture phase. That's what a "/" menu inside an editor needs
+// and what the dialog-based palette can't do without losing the caret.
+export {
+  CommandMenu,
+  CommandMenuInput,
+  CommandMenuList,
+  CommandMenuGroup,
+  CommandMenuSeparator,
+  CommandMenuItem,
+  CommandMenuEmpty,
+  CommandMenuLoading,
+} from "./components/command-menu"
+export type {
+  CommandMenuProps,
+  CommandMenuInputProps,
+  CommandMenuGroupProps,
+  CommandMenuItemProps,
+  CommandMenuLoadingProps,
+  CommandMenuFilter,
+  CommandMenuFilterItem,
+  CommandMenuLinkProps,
+  CommandMenuLinkRender,
+} from "./components/command-menu"
+
+// Auth — the login/signup screen in bricks (layout, brand panel, form, OAuth
+// button, separator). Domain-free like the palette, hence its place in the root:
+// every word of it is a prop, and it neither fetches nor redirects. Assembling
+// them: the showcase's "Créer sa page de login" guide.
+export {
+  AuthLayout,
+  AuthBrandPanel,
+  AuthBrandMark,
+  AuthForm,
+  authFormCopy,
+  OAuthButton,
+  AuthSeparator,
+  GoogleIcon,
+  GitHubIcon,
+} from "./components/auth"
+export type {
+  AuthLayoutProps,
+  AuthBrandPanelProps,
+  AuthBrandMarkProps,
+  AuthFormProps,
+  AuthFormCopy,
+  AuthModeCopy,
+  AuthFieldCopy,
+  AuthMode,
+  AuthSubmitValues,
+  AuthLinkProps,
+  AuthLinkRender,
+  OAuthButtonProps,
+  OAuthProvider,
+} from "./components/auth"
+
 // Kbd — one keyboard cap, or a whole shortcut (`keys="mod+k"` → ⌘ K). Used by the
 // palette, exported on its own for anywhere else a shortcut needs drawing.
 export { Kbd } from "./components/kbd"