@spunto/design-system 0.15.1 → 0.17.0

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,33 @@ 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"
+
 // 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"

package/styles.css

@@ -199,6 +199,9 @@
   --color-ship: var(--ship);
   --color-run: var(--run);
   --color-flame: var(--flame);
+  /* Marketing surfaces — the two fixed dark values (see `--night` below) */
+  --color-night: var(--night);
+  --color-code-surface: var(--code-surface);
   /* Square-leaning radius scale — driven by --radius (4px base) */
   --radius-sm: calc(var(--radius) * 0.5);
   --radius-md: calc(var(--radius) * 0.75);
@@ -311,6 +314,26 @@
   --sidebar-ring: oklch(0.70 0.20 43);
 }
 
+/* ─── Marketing night surfaces — deliberately NOT themed ─────────────────────
+ *
+ * Two dark values that stay the same in light and dark mode, because they are
+ * the *dark moment* of a page rather than a surface that follows the theme:
+ *
+ *   --night        the contrast band a marketing page opens on (`NightBand`).
+ *                  Deeper than the dark theme's own background (0.155) so the
+ *                  band still reads as a band when the whole site is dark.
+ *   --code-surface the warm dark behind a snippet or a copyable command
+ *                  (`CodeBlock`, `CopyCommand`) — the same one every
+ *                  terminal-ish panel of the site uses.
+ *
+ * They live here, as tokens (`bg-night`, `bg-code-surface`), precisely because
+ * they used to be two near-identical `oklch(…)` literals copy-pasted into two
+ * component files — which is how a design system ends up with two blacks. */
+:root {
+  --night: oklch(0.14 0.013 50);
+  --code-surface: oklch(0.16 0.012 52);
+}
+
 /* ─── Base layer ─────────────────────────────────────────────────────────── */
 @layer base {
   * {
@@ -367,6 +390,50 @@
     linear-gradient(to bottom, oklch(0.92 0.04 70 / 0.04) 1px, transparent 1px);
 }
 
+/* ─── Night band utilities (@spunto/design-system/marketing) ─────────────────
+ * The blueprint grid, the drifting light sources and the scrollbar of a `<pre>`
+ * sitting on a dark surface. Never themed — like `--night` itself, these paint
+ * on a fixed dark band, so there is no `.dark` variant. */
+.night-grid {
+  background-image:
+    linear-gradient(to right, oklch(0.92 0.04 70 / 0.05) 1px, transparent 1px),
+    linear-gradient(to bottom, oklch(0.92 0.04 70 / 0.05) 1px, transparent 1px);
+  background-size: 56px 56px;
+}
+
+/* The light source on a night band drifts, slowly enough that you notice it
+   only if you stay. Pure CSS on purpose — this is usually the most-viewed
+   element of a page and it has no business holding a rAF loop open. */
+@keyframes night-drift-a {
+  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
+  50%      { transform: translate3d(6%, 4%, 0) scale(1.12); }
+}
+@keyframes night-drift-b {
+  0%, 100% { transform: translate3d(0, 0, 0) scale(1.06); }
+  50%      { transform: translate3d(-7%, -5%, 0) scale(1); }
+}
+.night-glow-a { animation: night-drift-a 26s ease-in-out infinite; }
+.night-glow-b { animation: night-drift-b 34s ease-in-out infinite; }
+
+@media (prefers-reduced-motion: reduce) {
+  .night-glow-a,
+  .night-glow-b {
+    animation: none;
+  }
+}
+
+/* Scrollable code on a night surface: the global thumb is `--border`, which is
+   cream in the light theme and lands as a bright bar under a dark <pre>. */
+.night-scroll::-webkit-scrollbar-thumb {
+  background: oklch(1 0 0 / 0.18);
+}
+.night-scroll::-webkit-scrollbar-thumb:hover {
+  background: oklch(1 0 0 / 0.3);
+}
+.night-scroll {
+  scrollbar-color: oklch(1 0 0 / 0.18) transparent;
+}
+
 /* ─── Toast — stacking + enter/exit motion (mounted by SpuntoProvider) ─────
  *
  * The look (colors, spacing, typography) lives on the components as Tailwind