@emara/ui 1.1.0 → 1.1.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/README.md +127 -0
  2. package/package.json +1 -1
package/README.md ADDED
@@ -0,0 +1,127 @@
1
+ # @emara/ui
2
+
3
+ A React 19 + Tailwind CSS v4 component library with first-class RTL, multi-theme support (5 base palettes × 17 primaries × warm/dense density), and 35 components covering Foundations · Forms · Overlays · Data · Layout.
4
+
5
+ > **⚠️ Read this first — how you install matters**
6
+ >
7
+ > Emara UI is a **shadcn-style copy-paste library**, not a typical React component package. The canonical install path is the CLI: it copies component source files **into your repo** at `components/ui/<name>.tsx` so you fully own and edit them — no `node_modules` runtime dependency for the components themselves.
8
+ >
9
+ > ```bash
10
+ > npx @emara/cli init
11
+ > npx @emara/cli add button input form
12
+ > ```
13
+ >
14
+ > Direct `npm install @emara/ui` is supported but only ships:
15
+ > - `styles/globals.css` — the theme token CSS (auto-included if you used the CLI)
16
+ > - `lib/utils.ts` — the `cn()` class-name merge helper
17
+ >
18
+ > The 35 components are **NOT** importable from `node_modules` — they live in your project after `npx @emara/cli add <name>`.
19
+
20
+ ---
21
+
22
+ ## Quick start
23
+
24
+ ### Brand-new Next.js app
25
+
26
+ ```bash
27
+ npx @emara/cli create my-app
28
+ cd my-app
29
+ pnpm dev
30
+ ```
31
+
32
+ Scaffolds a Next.js 15 app (TypeScript + Tailwind v4 + App Router) fully wired with Emara UI, including an Emara-branded landing page. Theme is chosen interactively.
33
+
34
+ ### Add to an existing project
35
+
36
+ ```bash
37
+ cd your-existing-project
38
+ npx @emara/cli init # writes components.json + globals.css + lib/utils.ts
39
+ npx @emara/cli add button # copies button.tsx into components/ui/
40
+ ```
41
+
42
+ ---
43
+
44
+ ## CLI cheat sheet
45
+
46
+ ```bash
47
+ npx @emara/cli init # one-time setup
48
+ npx @emara/cli add <name> [<name>…] # copy component sources into your repo
49
+ npx @emara/cli update <name> # bring a previously-added component up to the latest
50
+ npx @emara/cli diff [<name>…] # show your edits vs the registry version
51
+ npx @emara/cli list # show all components (or `--installed`)
52
+ npx @emara/cli theme set <axis> <v> # base | primary | density | colorScheme | direction
53
+ npx @emara/cli doctor # health check (or `--strict`)
54
+ ```
55
+
56
+ ---
57
+
58
+ ## Components (35)
59
+
60
+ **Foundations** — Button · Input · Textarea · Label · Card · Badge · Avatar · Divider · Skeleton · Popover · Tooltip
61
+
62
+ **Forms** — Checkbox · Switch · RadioGroup · Select · FieldGroup · Combobox · DatePicker · Form
63
+
64
+ **Overlays** — Dialog · Drawer · DropdownMenu · ContextMenu · Toast
65
+
66
+ **Data** — Tabs · Accordion · EmptyState · Pagination · Table · DataTable
67
+
68
+ **Layout** — Breadcrumb · PageHeader · TopBar · Sidebar · AppShell
69
+
70
+ Combobox ships single + **multiple + creatable + loadOptions (async) + groupBy** modes. DatePicker ships single + **range + multiple + inline + numberingSystem + presets** modes.
71
+
72
+ ---
73
+
74
+ ## Guarantees
75
+
76
+ - React 19, TypeScript 6 strict, Tailwind CSS v4.
77
+ - Every component forwards refs and sets `displayName`.
78
+ - Semantic tokens only (`bg-primary`, `text-muted-foreground`) — no raw shades.
79
+ - Logical Tailwind classes (`ps-*`, `pe-*`, `start-*`) — RTL-safe by default.
80
+ - Light + dark via `class="dark"` on `<html>`.
81
+ - LTR + RTL via `dir="rtl"` on `<html>`.
82
+ - Built on Radix primitives where one exists; Radix Slot for `asChild` elsewhere.
83
+ - WCAG 2.2 AA contrast minimums.
84
+ - 428 unit tests passing, 291 visual regression baselines locked.
85
+
86
+ ---
87
+
88
+ ## Theme
89
+
90
+ Default: **Slate base · Indigo primary · warm density · Mona Sans (Latin) + Noto Kufi Arabic (ar)**.
91
+
92
+ Theme axes (chosen at `init`, regenerated by `theme set`):
93
+ - **5 base palettes** — slate, gray, zinc, neutral, stone
94
+ - **17 primary palettes** — red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, **indigo (default)**, violet, purple, fuchsia, pink, rose
95
+ - **2 density modes** — warm (consumer-facing), dense (data-heavy)
96
+ - **2 color schemes** — light, dark (toggle at runtime via `<html class="dark">`)
97
+ - **2 directions** — ltr, rtl (toggle at runtime via `<html dir="rtl">`)
98
+
99
+ That's `5 × 17 × 2 × 2 × 2 = 680` theme combinations from one CLI install.
100
+
101
+ ---
102
+
103
+ ## Peer dependencies
104
+
105
+ The CLI installs these for you when you scaffold or `add` a component that needs them:
106
+
107
+ ```
108
+ react >= 19.0.0
109
+ react-dom >= 19.0.0
110
+ react-hook-form >= 7.50.0 (optional — only if you use Form's RHF mode)
111
+ ```
112
+
113
+ Plus the Radix primitives + `cmdk` + `date-fns` + `react-day-picker` + `@tanstack/react-table` + `sonner` — pulled in transitively per-component.
114
+
115
+ ---
116
+
117
+ ## Links
118
+
119
+ - **Repository:** https://github.com/abdelkader-zaglou/emara-ui
120
+ - **Issues:** https://github.com/abdelkader-zaglou/emara-ui/issues
121
+ - **CLI:** https://www.npmjs.com/package/@emara/cli
122
+
123
+ ---
124
+
125
+ ## License
126
+
127
+ MIT © Abdelkader Zaglou
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@emara/ui",
3
- "version": "1.1.0",
3
+ "version": "1.1.1",
4
4
  "description": "Emara UI — React component library. Canonical install path is `npx @emara/cli add <name>` (shadcn-style copy-paste); direct package install is supported as an alternate path.",
5
5
  "keywords": [
6
6
  "emara",