@esuiss/ui 0.6.0 → 0.8.0

package/README.md

@@ -47,7 +47,7 @@ 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. Sets up the Inter font: with `next/font/google` in the root layout (Next.js), or with `@fontsource-variable/inter` imported from the stylesheet (Vite).
+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.
 
@@ -63,9 +63,11 @@ npx @esuiss/ui@latest init [options]
 
 ```bash
 npx @esuiss/ui@latest add <component...> [options]
+npx @esuiss/ui@latest add patterns <pattern...> [options]
+npx @esuiss/ui@latest add interactions <interaction...> [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/`, interactions to `components/interactions/` 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
 
@@ -73,7 +75,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 or interaction with `add patterns` / `add interactions` |
 | `-y, --yes` | Skip confirmation prompts |
 | `-c, --cwd <dir>` | Run in another project directory |
 | `-h, --help` | Show help |
@@ -113,7 +115,7 @@ Your stylesheet holds the whole theme:
 }
 
 @theme inline {
-  --font-sans: "Inter Variable", sans-serif;
+  --font-sans: -apple-system, BlinkMacSystemFont, "Inter Variable", sans-serif;
   --color-surface: var(--surface);
   --color-label: var(--label);
   --color-accent: var(--accent);
@@ -126,13 +128,14 @@ Colors are named by role, not by component:
 - **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`. Inter is loaded by default.
+- **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
@@ -157,9 +160,31 @@ 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, alert-sheet, 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, fullscreen-menu, 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, tab-bar, table, tabs, textarea, toast, toggle, toggle-group, tooltip, wheel-picker
 
-Hooks: use-message-scroller, use-mobile, use-questionnaire
+Hooks: use-message-scroller, use-mobile, use-platform, 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.
+
+## Interactions
+
+Interactions add a behavior to something you already have, such as swiping a row to reveal actions. They are optional extras, so they are not added by `init` or `add --all`; add them by name, or all at once:
+
+```bash
+npx @esuiss/ui add interactions swipe-actions
+npx @esuiss/ui add interactions --all
+```
+
+The components an interaction uses are added with it.
 
 ## Troubleshooting
 

package/index.mjs

@@ -15,11 +15,14 @@ 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-picker
+  npx ${name} add interactions <name...>   add interactions, e.g. add interactions swipe-actions
 
 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 or interaction
+                   after "patterns" or "interactions"
   -y, --yes        skip confirmation prompts
   -c, --cwd <dir>  project directory (defaults to the current directory)
   -h, --help       show this help
@@ -27,6 +30,11 @@ Options:
 
 Supports Next.js and React (Vite) projects with TypeScript and Tailwind CSS v4.`
 
+const SUBCOMMANDS = {
+  patterns: "pattern",
+  interactions: "interaction",
+}
+
 function parseArgs(args) {
   const options = {
     cwd: process.cwd(),
@@ -79,8 +87,11 @@ async function main() {
       await init(parseArgs(args).options)
       break
     case "add": {
-      const { options, names } = parseArgs(args)
-      await add(names, options)
+      const scope = SUBCOMMANDS[args[0]] ?? "ui"
+      const { options, names } = parseArgs(
+        scope === "ui" ? args : args.slice(1)
+      )
+      await add(names, { ...options, scope })
       break
     }
     case "-v":

package/lib/add.mjs

@@ -4,7 +4,13 @@ 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,
+  resolveItems,
+  SCOPES,
+  scopeOf,
+} from "./registry.mjs"
 
 async function fetchFiles(items) {
   return Promise.all(
@@ -93,6 +99,39 @@ async function showDiff(project, root, registry, names) {
   if (!changes) step("No differences from the registry.")
 }
 
+function selectNames(registry, names, { all, scope = "ui" }) {
+  const inScope = (item) => scopeOf(item) === scope
+  const scoped = registry.items.filter(inScope)
+  const { kind, command, example } = SCOPES[scope]
+
+  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} ${example}`
+    )
+  }
+
+  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 = SCOPES[scopeOf(item)]
+      throw new CliError(
+        `"${name}" is ${other.kind === "interaction" ? "an" : "a"} ${other.kind}. Run npx @esuiss/ui ${other.command} ${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

@@ -40,8 +40,10 @@ const TOOLING = {
 }
 const MINIMUM_TAILWIND = [4, 2]
 const FONT_IMPORT = '@import "@fontsource-variable/inter";\n'
-const FONT_FAMILY = '--font-sans: "Inter Variable", sans-serif;'
-const NEXT_FONT_FAMILY = "--font-sans: var(--font-sans);"
+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",
@@ -49,7 +51,7 @@ const NEXT_LAYOUTS = [
   "app/layout.jsx",
 ]
 const NEXT_FONT_NOTE =
-  'Load Inter in your root layout with next/font/google: Inter({ subsets: ["latin", "latin-ext"], variable: "--font-sans" }), and add its .variable to the <html> className.'
+  '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)
@@ -207,7 +209,7 @@ function configureNextFont(project) {
   if (!file) return [NEXT_FONT_NOTE]
 
   let text = readFileSync(file, "utf8")
-  if (/variable:\s*["']--font-sans["']/.test(text)) return []
+  if (/variable:\s*["']--font-inter["']/.test(text)) return []
 
   const html = text.match(/<html\b[^>]*>/)
   if (!html) return [NEXT_FONT_NOTE]
@@ -216,10 +218,10 @@ function configureNextFont(project) {
   if (literal) {
     tag = tag.replace(
       literal[0],
-      `className={\`\${fontSans.variable} ${literal[1]}\`}`
+      `className={\`\${fontInter.variable} ${literal[1]}\`}`
     )
   } else if (!/className=/.test(tag)) {
-    tag = tag.replace(/<html\b/, "<html className={fontSans.variable}")
+    tag = tag.replace(/<html\b/, "<html className={fontInter.variable}")
   } else {
     return [NEXT_FONT_NOTE]
   }
@@ -243,7 +245,7 @@ function configureNextFont(project) {
   ]
   const last = imports.at(-1)
   const at = last ? last.index + last[0].length : 0
-  const declaration = `\nconst fontSans = Inter({\n  subsets: ["latin", "latin-ext"],\n  variable: "--font-sans",\n})${semi}\n`
+  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)

package/lib/registry.mjs

@@ -20,14 +20,22 @@ export async function fetchRegistry() {
   return JSON.parse(await fetchText("registry.json"))
 }
 
+export const SCOPES = {
+  ui: { kind: "component", command: "add", example: "button" },
+  pattern: { kind: "pattern", command: "add patterns", example: "<name>" },
+  interaction: {
+    kind: "interaction",
+    command: "add interactions",
+    example: "<name>",
+  },
+}
+
+export function scopeOf(item) {
+  return item.type in SCOPES ? item.type : "ui"
+}
+
 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.6.0",
+  "version": "0.8.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",