@esuiss/ui 0.5.9 → 0.7.0

package/README.md

@@ -47,8 +47,9 @@ export function Example() {
 2. Adds the `@/*` import alias to `tsconfig.json` if it is missing.
 3. Installs and wires up Tailwind CSS if needed (`postcss.config.mjs` for Next.js, `vite.config.ts` for Vite).
 4. Writes the theme stylesheet to `app/globals.css` (Next.js) or `src/index.css` (Vite). It asks before replacing a stylesheet that already has content.
-5. Installs [`@esuiss/tailwind`](https://www.npmjs.com/package/@esuiss/tailwind), which provides the variants, animations, and utilities the components rely on.
-6. Adds the `button` component.
+5. Sets up the font: the system font on macOS and iOS, Inter everywhere else. Inter is loaded with `next/font/google` in the root layout (Next.js), or with `@fontsource-variable/inter` imported from the stylesheet (Vite).
+6. Installs [`@esuiss/tailwind`](https://www.npmjs.com/package/@esuiss/tailwind), which provides the variants, animations, and utilities the components rely on.
+7. Adds the `button` component.
 
 ## Commands
 
@@ -62,9 +63,10 @@ npx @esuiss/ui@latest init [options]
 
 ```bash
 npx @esuiss/ui@latest add <component...> [options]
+npx @esuiss/ui@latest add patterns <pattern...> [options]
 ```
 
-Components are written to `components/ui/` (and hooks to `hooks/`) under your `@/*` alias root. Components they depend on are added too, and missing npm packages are installed with your package manager (npm, pnpm, yarn, or bun).
+Components are written to `components/ui/`, patterns to `components/patterns/` and hooks to `hooks/` under your `@/*` alias root. Components they depend on are added too, and missing npm packages are installed with your package manager (npm, pnpm, yarn, or bun).
 
 ### Options
 
@@ -72,7 +74,7 @@ Components are written to `components/ui/` (and hooks to `hooks/`) under your `@
 | --- | --- |
 | `-o, --overwrite` | Replace local files that differ from the registry |
 | `--diff` | Show how your local files differ from the registry |
-| `-a, --all` | Add every component |
+| `-a, --all` | Add every component, or every pattern with `add patterns` |
 | `-y, --yes` | Skip confirmation prompts |
 | `-c, --cwd <dir>` | Run in another project directory |
 | `-h, --help` | Show help |
@@ -96,28 +98,43 @@ Your stylesheet holds the whole theme:
 ```css
 @import "tailwindcss";
 @import "@esuiss/tailwind";
+@import "@fontsource-variable/inter";
 
 :root {
-  --background: oklch(1 0 0);
-  --primary: oklch(0.6321 0.2018 254.09);
-  --radius: 0.75rem;
+  --surface: oklch(1 0 0);
+  --label: oklch(0.2316 0.0038 286.09);
+  --accent: oklch(0.5629 0.1933 256.16);
+  --radius: 0.625rem;
 }
 
 .dark {
-  --background: oklch(0 0 0);
-  --primary: oklch(0.651471 0.191972 251.4696);
+  --surface: oklch(0 0 0);
+  --label: oklch(0.9707 0.0026 286.29);
+  --accent: oklch(0.5629 0.1933 256.16);
 }
 
 @theme inline {
-  --font-sans: system-ui, sans-serif;
-  --color-background: var(--background);
-  --color-primary: var(--primary);
+  --font-sans: -apple-system, BlinkMacSystemFont, "Inter Variable", sans-serif;
+  --color-surface: var(--surface);
+  --color-label: var(--label);
+  --color-accent: var(--accent);
 }
 ```
 
+Colors are named by role, not by component:
+
+- **Surfaces:** `surface`, `surface-secondary`, `surface-tertiary`, `surface-raised` (menus, dialogs, cards).
+- **Text:** `label`, `label-secondary`, `label-tertiary`, `label-quaternary`.
+- **Control fills:** `fill`, `fill-secondary`, `fill-tertiary`.
+- **Lines:** `separator`, `separator-strong`.
+- **Scrim:** `scrim`, the dimmed layer behind dialogs, sheets and drawers.
+- **Accent:** `accent`, `accent-hover`, `accent-pressed`, `on-accent` (text on the accent).
+- **Links, focus and states:** `link`, `focus`, `danger`, `success`, `warning` and their `-surface` tints.
+- **Palette:** `blue`, `green`, `orange`, `red`, `yellow`, `purple`, `pink`, `indigo`, `teal`, `mint`, `cyan`, `brown`, `gray`, used by charts.
+
 - **Change a color:** edit its value under `:root` (light) and `.dark` (dark).
 - **Add a color:** define it under `:root` and `.dark`, then map it in `@theme inline`, for example `--color-brand: var(--brand);`. Classes such as `bg-brand` and `text-brand` become available.
-- **Change the font:** set `--font-sans` in `@theme inline`. By default each device's own system font is used, so nothing has to be downloaded.
+- **Change the font:** set `--font-sans` in `@theme inline`. By default it uses the system font on macOS and iOS and Inter elsewhere.
 - **Corner radius:** `--radius` scales every rounded component.
 
 ## Dark mode
@@ -142,10 +159,21 @@ export default function RootLayout({ children }: { children: React.ReactNode })
 
 ## Components
 
-accordion, alert, alert-dialog, aspect-ratio, attachment, avatar, badge, breadcrumb, bubble, button, button-group, calendar, card, carousel, chart, checkbox, collapsible, combobox, command, context-menu, dialog, direction, drawer, dropdown-menu, empty, field, hover-card, input, input-group, input-otp, item, kbd, label, marker, menubar, message, message-scroller, native-select, navigation-menu, pagination, popover, progress, questionnaire, radio-group, resizable, scroll-area, select, separator, sheet, sidebar, skeleton, slider, spinner, switch, table, tabs, textarea, toast, toggle, toggle-group, tooltip
+accordion, alert, alert-dialog, aspect-ratio, attachment, avatar, badge, breadcrumb, bubble, button, button-group, calendar, card, carousel, chart, checkbox, collapsible, combobox, command, context-menu, dialog, direction, drawer, dropdown-menu, empty, field, hover-card, input, input-group, input-otp, item, kbd, label, marker, menubar, message, message-scroller, native-select, navigation-menu, pagination, popover, progress, questionnaire, radio-group, resizable, scroll-area, select, separator, sheet, sidebar, skeleton, slider, spinner, switch, table, tabs, textarea, toast, toggle, toggle-group, tooltip, wheel-picker
 
 Hooks: use-message-scroller, use-mobile, use-questionnaire
 
+## Patterns
+
+Patterns combine several components into one ready-made piece, such as a date and time picker. They are not added by `init` or `add --all`; add them by name, or all at once:
+
+```bash
+npx @esuiss/ui add patterns date-time-picker
+npx @esuiss/ui add patterns --all
+```
+
+The components a pattern uses are added with it.
+
 ## Troubleshooting
 
 - **"Tailwind CSS 4.2 or later is required"**: upgrade with `npm install tailwindcss@latest` and run `init` again.

package/index.mjs

@@ -15,11 +15,12 @@ const usage = `${name} ${version}
 Usage:
   npx ${name} init [options]              set up Tailwind, the theme, and the button
   npx ${name} add <component...> [options] add components, e.g. add button sidebar
+  npx ${name} add patterns <pattern...>    add patterns, e.g. add patterns date-time-picker
 
 Options:
   -o, --overwrite  replace local files that differ from the registry
   --diff           show how local files differ from the registry
-  -a, --all        add every component
+  -a, --all        add every component, or every pattern after "patterns"
   -y, --yes        skip confirmation prompts
   -c, --cwd <dir>  project directory (defaults to the current directory)
   -h, --help       show this help
@@ -79,8 +80,9 @@ async function main() {
       await init(parseArgs(args).options)
       break
     case "add": {
-      const { options, names } = parseArgs(args)
-      await add(names, options)
+      const patterns = args[0] === "patterns"
+      const { options, names } = parseArgs(patterns ? args.slice(1) : args)
+      await add(names, { ...options, patterns })
       break
     }
     case "-v":

package/lib/add.mjs

@@ -4,7 +4,12 @@ import path from "node:path"
 import { formatDiff } from "./diff.mjs"
 import { CliError, color, list, note, step } from "./output.mjs"
 import { detectProject, findAliasRoot, install } from "./project.mjs"
-import { fetchRegistry, fetchText, resolveItems } from "./registry.mjs"
+import {
+  fetchRegistry,
+  fetchText,
+  isPattern,
+  resolveItems,
+} from "./registry.mjs"
 
 async function fetchFiles(items) {
   return Promise.all(
@@ -93,6 +98,40 @@ async function showDiff(project, root, registry, names) {
   if (!changes) step("No differences from the registry.")
 }
 
+function selectNames(registry, names, { all, patterns }) {
+  const inScope = (item) => isPattern(item) === patterns
+  const scoped = registry.items.filter(inScope)
+  const kind = patterns ? "pattern" : "component"
+  const command = patterns ? "add patterns" : "add"
+
+  if (all) {
+    if (!scoped.length) throw new CliError(`No ${kind}s are available yet.`)
+    return scoped.map((item) => item.name)
+  }
+
+  if (!names.length) {
+    throw new CliError(
+      `Name at least one ${kind}, e.g. npx @esuiss/ui ${command} ${patterns ? "<name>" : "button"}`
+    )
+  }
+
+  const byName = new Map(registry.items.map((item) => [item.name, item]))
+  for (const name of names) {
+    const item = byName.get(name)
+    if (item && inScope(item)) continue
+    if (item) {
+      const other = patterns ? "add" : "add patterns"
+      throw new CliError(
+        `"${name}" is ${patterns ? "a component" : "a pattern"}. Run npx @esuiss/ui ${other} ${name}`
+      )
+    }
+    throw new CliError(
+      `Unknown ${kind}: ${name}.\nAvailable: ${scoped.map((entry) => entry.name).join(", ") || "none yet"}`
+    )
+  }
+  return names
+}
+
 export async function add(names, options) {
   const project = detectProject(options.cwd)
   const root = findAliasRoot(project.cwd)
@@ -103,12 +142,7 @@ export async function add(names, options) {
   }
 
   const registry = await fetchRegistry()
-  const selected = options.all ? registry.items.map((item) => item.name) : names
-  if (!selected.length) {
-    throw new CliError(
-      "Name at least one component, e.g. npx @esuiss/ui add button"
-    )
-  }
+  const selected = selectNames(registry, names, options)
 
   if (options.diff) await showDiff(project, root, registry, selected)
   else await installItems(project, root, registry, selected, options)

package/lib/init.mjs

@@ -39,6 +39,19 @@ const TOOLING = {
   vite: ["tailwindcss", "@tailwindcss/vite", "@types/node"],
 }
 const MINIMUM_TAILWIND = [4, 2]
+const FONT_IMPORT = '@import "@fontsource-variable/inter";\n'
+const FONT_FAMILY =
+  '--font-sans: -apple-system, BlinkMacSystemFont, "Inter Variable", sans-serif;'
+const NEXT_FONT_FAMILY =
+  "--font-sans: -apple-system, BlinkMacSystemFont, var(--font-inter), sans-serif;"
+const NEXT_LAYOUTS = [
+  "src/app/layout.tsx",
+  "app/layout.tsx",
+  "src/app/layout.jsx",
+  "app/layout.jsx",
+]
+const NEXT_FONT_NOTE =
+  'Load Inter in your root layout with next/font/google: Inter({ subsets: ["latin", "latin-ext"], variable: "--font-inter" }), and add its .variable to the <html> className.'
 
 function relative(project, file) {
   return path.relative(project.cwd, file)
@@ -184,6 +197,62 @@ function configureVite(project) {
   return manual
 }
 
+function stylesheetFor(project, css) {
+  if (project.framework !== "next") return css
+  return css.replace(FONT_IMPORT, "").replace(FONT_FAMILY, NEXT_FONT_FAMILY)
+}
+
+function configureNextFont(project) {
+  const file = NEXT_LAYOUTS.map((name) => path.join(project.cwd, name)).find(
+    existsSync
+  )
+  if (!file) return [NEXT_FONT_NOTE]
+
+  let text = readFileSync(file, "utf8")
+  if (/variable:\s*["']--font-inter["']/.test(text)) return []
+
+  const html = text.match(/<html\b[^>]*>/)
+  if (!html) return [NEXT_FONT_NOTE]
+  let tag = html[0]
+  const literal = tag.match(/className="([^"]*)"/)
+  if (literal) {
+    tag = tag.replace(
+      literal[0],
+      `className={\`\${fontInter.variable} ${literal[1]}\`}`
+    )
+  } else if (!/className=/.test(tag)) {
+    tag = tag.replace(/<html\b/, "<html className={fontInter.variable}")
+  } else {
+    return [NEXT_FONT_NOTE]
+  }
+  text = text.replace(html[0], tag)
+
+  const semi = /from\s+["'][^"']+["'];/.test(text) ? ";" : ""
+  const fontImport = text.match(
+    /import\s*\{([^}]*)\}\s*from\s*["']next\/font\/google["']/
+  )
+  if (fontImport) {
+    text = text.replace(
+      fontImport[0],
+      fontImport[0].replace(fontImport[1], `${fontImport[1].trimEnd()}, Inter `)
+    )
+  } else {
+    text = `import { Inter } from "next/font/google"${semi}\n${text}`
+  }
+
+  const imports = [
+    ...text.matchAll(/^import\s[\s\S]*?["'][^"']+["'];?[ \t]*\n/gm),
+  ]
+  const last = imports.at(-1)
+  const at = last ? last.index + last[0].length : 0
+  const declaration = `\nconst fontInter = Inter({\n  subsets: ["latin", "latin-ext"],\n  variable: "--font-inter",\n})${semi}\n`
+  text = text.slice(0, at) + declaration + text.slice(at)
+
+  writeFileSync(file, text)
+  step(`Loaded Inter in ${relative(project, file)}`)
+  return []
+}
+
 function configureNext(project) {
   const existing = POSTCSS_CONFIGS.map((name) =>
     path.join(project.cwd, name)
@@ -230,7 +299,7 @@ export async function init(options) {
   }
 
   const registry = await fetchRegistry()
-  const css = await fetchStylesheet(registry)
+  const css = stylesheetFor(project, await fetchStylesheet(registry))
 
   if (ensureAlias(project, sourceRoot))
     step("Added the @/* import alias to tsconfig")
@@ -241,7 +310,7 @@ export async function init(options) {
   const manual =
     project.framework === "vite"
       ? configureVite(project)
-      : configureNext(project)
+      : [...configureNext(project), ...configureNextFont(project)]
 
   writeFileSync(stylesheet, css)
   step(`Wrote ${relative(project, stylesheet)}`)

package/lib/registry.mjs

@@ -20,14 +20,12 @@ export async function fetchRegistry() {
   return JSON.parse(await fetchText("registry.json"))
 }
 
+export function isPattern(item) {
+  return item.type === "pattern"
+}
+
 export function resolveItems(registry, names) {
   const byName = new Map(registry.items.map((item) => [item.name, item]))
-  const unknown = names.filter((name) => !byName.has(name))
-  if (unknown.length) {
-    throw new CliError(
-      `Unknown component: ${unknown.join(", ")}.\nAvailable: ${[...byName.keys()].join(", ")}`
-    )
-  }
 
   const ordered = []
   const seen = new Set()

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@esuiss/ui",
-  "version": "0.5.9",
+  "version": "0.7.0",
   "description": "Copy-paste React components with a clean, minimal design, built on Base UI and Tailwind CSS v4. CLI for Next.js and React (Vite).",
   "keywords": [
     "react",