@esuiss/ui 0.7.0 → 0.8.0

package/README.md

@@ -64,9 +64,10 @@ 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/`, 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).
+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
 
@@ -74,7 +75,7 @@ Components are written to `components/ui/`, patterns to `components/patterns/` a
 | --- | --- |
 | `-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, or every pattern with `add patterns` |
+| `-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 |
@@ -159,9 +160,9 @@ 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, wheel-picker
+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
 
@@ -174,6 +175,17 @@ 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
 
 - **"Tailwind CSS 4.2 or later is required"**: upgrade with `npm install tailwindcss@latest` and run `init` again.

package/index.mjs

@@ -15,12 +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-time-picker
+  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, or every pattern after "patterns"
+  -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
@@ -28,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(),
@@ -80,9 +87,11 @@ async function main() {
       await init(parseArgs(args).options)
       break
     case "add": {
-      const patterns = args[0] === "patterns"
-      const { options, names } = parseArgs(patterns ? args.slice(1) : args)
-      await add(names, { ...options, patterns })
+      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

@@ -7,8 +7,9 @@ import { detectProject, findAliasRoot, install } from "./project.mjs"
 import {
   fetchRegistry,
   fetchText,
-  isPattern,
   resolveItems,
+  SCOPES,
+  scopeOf,
 } from "./registry.mjs"
 
 async function fetchFiles(items) {
@@ -98,11 +99,10 @@ 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
+function selectNames(registry, names, { all, scope = "ui" }) {
+  const inScope = (item) => scopeOf(item) === scope
   const scoped = registry.items.filter(inScope)
-  const kind = patterns ? "pattern" : "component"
-  const command = patterns ? "add patterns" : "add"
+  const { kind, command, example } = SCOPES[scope]
 
   if (all) {
     if (!scoped.length) throw new CliError(`No ${kind}s are available yet.`)
@@ -111,7 +111,7 @@ function selectNames(registry, names, { all, patterns }) {
 
   if (!names.length) {
     throw new CliError(
-      `Name at least one ${kind}, e.g. npx @esuiss/ui ${command} ${patterns ? "<name>" : "button"}`
+      `Name at least one ${kind}, e.g. npx @esuiss/ui ${command} ${example}`
     )
   }
 
@@ -120,9 +120,9 @@ function selectNames(registry, names, { all, patterns }) {
     const item = byName.get(name)
     if (item && inScope(item)) continue
     if (item) {
-      const other = patterns ? "add" : "add patterns"
+      const other = SCOPES[scopeOf(item)]
       throw new CliError(
-        `"${name}" is ${patterns ? "a component" : "a pattern"}. Run npx @esuiss/ui ${other} ${name}`
+        `"${name}" is ${other.kind === "interaction" ? "an" : "a"} ${other.kind}. Run npx @esuiss/ui ${other.command} ${name}`
       )
     }
     throw new CliError(

package/lib/registry.mjs

@@ -20,8 +20,18 @@ export async function fetchRegistry() {
   return JSON.parse(await fetchText("registry.json"))
 }
 
-export function isPattern(item) {
-  return item.type === "pattern"
+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) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@esuiss/ui",
-  "version": "0.7.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",