@smicolon/fasla-ui 0.5.0 → 0.6.0

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 (4) hide show
  1. package/README.md +32 -19
  2. package/dist/cli/index.js +3 -2
  3. package/package.json +7 -3
  4. package/registry.json +1 -1
package/README.md CHANGED
@@ -4,29 +4,40 @@
4
4
  [![npm downloads](https://img.shields.io/npm/dm/@smicolon/fasla-ui.svg)](https://www.npmjs.com/package/@smicolon/fasla-ui)
5
5
  [![license](https://img.shields.io/npm/l/@smicolon/fasla-ui.svg)](https://github.com/smicolon/fasla-ui/blob/main/LICENSE)
6
6
 
7
- A professional React UI component library built on **shadcn/ui** primitives. Provides animated effects components (like Magic UI), app building blocks, and design tokens - all distributed via a shadcn-compatible registry.
7
+ Arabic-first React components and blocks, built on shadcn/ui. RTL by default, bilingual by design.
8
+
9
+ Fasla (فاصلة) is a design system for React. Layouts use logical properties, so
10
+ a component mirrors under `dir="rtl"` with no extra classes, and the theme
11
+ brings a type scale with Arabic line heights and the Cairo font. Components are
12
+ distributed through a shadcn-compatible registry and copied into your project,
13
+ so the code is yours to change.
8
14
 
9
15
  ## Features
10
16
 
11
- - **30+ Components** - UI primitives, app blocks, and animated effects
17
+ - **Arabic-first, RTL by default** - Logical properties throughout, so layouts mirror under `dir="rtl"`
18
+ - **29 Components** - 14 UI primitives, 8 app blocks and 7 animated effects
19
+ - **Themes** - Fasla's palette, or keep your brand's colours and add only the base layer
12
20
  - **shadcn Compatible** - Works seamlessly with existing shadcn/ui projects
13
21
  - **Tailwind CSS** - Utility-first styling with full customization
14
- - **Framer Motion** - Smooth animations with `prefers-reduced-motion` support
22
+ - **Framer Motion** - Animated effects that respect `prefers-reduced-motion`
15
23
  - **TypeScript** - Full type safety and IntelliSense
16
24
  - **Design Tokens** - Consistent spacing, colors, and density profiles
17
- - **Accessible** - WCAG compliant with keyboard navigation support
18
- - **Tree Shakeable** - Import only what you need
25
+ - **Accessible** - Keyboard navigation and visible focus styles on form controls
26
+ - **Own the Code** - The CLI copies each component's source into your project, so you ship only what you add
19
27
 
20
28
  ## Installation
21
29
 
22
30
  Components are copied into your project with the CLI, as with shadcn/ui:
23
31
 
24
32
  ```bash
25
- npx @smicolon/cli init # once per project: writes components.json and lib/utils.ts,
26
- # and installs clsx and tailwind-merge, which lib/utils.ts imports
27
- npx @smicolon/cli add button card shimmer-button
33
+ npx @smicolon/fasla-ui@latest init # once per project: writes components.json and lib/utils.ts,
34
+ # and installs clsx and tailwind-merge, which lib/utils.ts imports
35
+ npx @smicolon/fasla-ui@latest add button card shimmer-button
28
36
  ```
29
37
 
38
+ Keep `@latest`: without it, npx runs the copy of this package a project already
39
+ has installed, and 0.4 or older has no CLI.
40
+
30
41
  `add` ends by printing the install command for the packages the components
31
42
  need, in your project's package manager. For `button card shimmer-button` with npm it is:
32
43
 
@@ -34,8 +45,9 @@ need, in your project's package manager. For `button card shimmer-button` with n
34
45
  npm install @radix-ui/react-slot class-variance-authority lucide-react framer-motion
35
46
  ```
36
47
 
37
- This package holds the design tokens, the Tailwind preset and the motion
38
- presets, not the components. Install it when you want those:
48
+ The CLI runs from this package without installing it. The package also holds
49
+ the design tokens, the Tailwind preset and the motion presets, not the
50
+ components. Install it when you want those:
39
51
 
40
52
  ```bash
41
53
  npm install @smicolon/fasla-ui
@@ -57,6 +69,7 @@ Core building blocks with CVA variants for consistent styling:
57
69
  | **Textarea** | Multi-line text input with auto-resize |
58
70
  | **Select** | Dropdown selection with search |
59
71
  | **Checkbox** | Checkbox with label and description |
72
+ | **Radio** | Single choice from a set, as a plain control or a bordered card |
60
73
  | **Switch** | Toggle switch with multiple sizes |
61
74
  | **Tabs** | Tabbed navigation with animations |
62
75
  | **Badge** | Status indicators and labels |
@@ -133,20 +146,21 @@ you want and installs it; both include the base layer. The shadcn commands below
133
146
  install one too, or switch a project to the other one later.
134
147
 
135
148
  They need a project that is already set up, with a `components.json`: in a new
136
- project, run `npx @smicolon/cli init` first, or `npx shadcn@latest init`. Without
137
- one, the shadcn CLI sets the project up itself, and its preset's colours replace
138
- Fasla's. On Next.js 14, use `npx @smicolon/cli init`: `shadcn init` writes
139
- Tailwind 4 styles and loads Geist from `next/font`, which Next.js 14 has neither of.
149
+ project, run `npx @smicolon/fasla-ui@latest init` first, or
150
+ `npx shadcn@latest init`. Without one, the shadcn CLI sets the project up
151
+ itself, and its preset's colours replace Fasla's. On Next.js 14, use
152
+ `npx @smicolon/fasla-ui@latest init`: `shadcn init` writes Tailwind 4 styles and
153
+ loads Geist from `next/font`, which Next.js 14 has neither of.
140
154
 
141
155
  ```bash
142
156
  # Starting from scratch: use Fasla's colours (palette, radius, Geist).
143
- npx shadcn@latest add https://ui.smicolon.com/r/theme.json https://ui.smicolon.com/r/font-geist.json
157
+ npx shadcn@latest add https://fasla.smicolon.com/r/theme.json https://fasla.smicolon.com/r/font-geist.json
144
158
 
145
159
  # The same on Next.js 14, without Geist: its template already loads it.
146
- npx shadcn@latest add https://ui.smicolon.com/r/theme.json
160
+ npx shadcn@latest add https://fasla.smicolon.com/r/theme.json
147
161
 
148
162
  # I have a brand: keep my colours (base layer only)
149
- npx shadcn@latest add https://ui.smicolon.com/r/theme-base.json
163
+ npx shadcn@latest add https://fasla.smicolon.com/r/theme-base.json
150
164
  ```
151
165
 
152
166
  The base layer adds only what shadcn doesn't have: the success, warning and
@@ -160,11 +174,10 @@ install to `components/blocks`.
160
174
 
161
175
  ## Documentation
162
176
 
163
- Visit [ui.smicolon.com](https://ui.smicolon.com) for full documentation, examples, and API reference.
177
+ Visit [fasla.smicolon.com](https://fasla.smicolon.com) for full documentation, examples, and API reference.
164
178
 
165
179
  ## Related
166
180
 
167
- - [@smicolon/cli](https://www.npmjs.com/package/@smicolon/cli) - CLI for adding components
168
181
  - [shadcn/ui](https://ui.shadcn.com) - The foundation this library builds on
169
182
  - [Tailwind CSS](https://tailwindcss.com) - Utility-first CSS framework
170
183
  - [Framer Motion](https://www.framer.com/motion/) - Animation library for React
package/dist/cli/index.js CHANGED
@@ -13256,7 +13256,8 @@ import path10 from "path";
13256
13256
 
13257
13257
  // src/cli/registry.ts
13258
13258
  init_esm_shims();
13259
- var DEFAULT_REGISTRY_URL = "https://ui.smicolon.com/r";
13259
+ var DEFAULT_REGISTRY_URL = "https://fasla.smicolon.com/r";
13260
+ var LEGACY_REGISTRY_URL = "https://ui.smicolon.com/r";
13260
13261
  var REGISTRY_URL = (process.env.FASLA_UI_REGISTRY_URL || DEFAULT_REGISTRY_URL).replace(/\/+$/, "");
13261
13262
  var NAMESPACE = "@fasla";
13262
13263
  function namespaceUrl(base = REGISTRY_URL) {
@@ -15677,7 +15678,7 @@ function addCommand() {
15677
15678
  const allDependencies = /* @__PURE__ */ new Set();
15678
15679
  const baseDir = path10.join(cwd, componentsDir);
15679
15680
  const known = new Set(registry.items.map((item) => item.name));
15680
- const nameOf = (dep) => registryItemName(dep, known, [REGISTRY_URL, DEFAULT_REGISTRY_URL]);
15681
+ const nameOf = (dep) => registryItemName(dep, known, [REGISTRY_URL, DEFAULT_REGISTRY_URL, LEGACY_REGISTRY_URL]);
15681
15682
  let resolved;
15682
15683
  try {
15683
15684
  resolved = await resolveWithDependencies(validComponents, nameOf, fetchComponent);
package/package.json CHANGED
@@ -1,21 +1,25 @@
1
1
  {
2
2
  "name": "@smicolon/fasla-ui",
3
- "version": "0.5.0",
4
- "description": "Professional UI components with animations and app building blocks",
3
+ "version": "0.6.0",
4
+ "description": "Arabic-first React components and blocks, built on shadcn/ui. RTL by default, bilingual by design.",
5
5
  "license": "MIT",
6
6
  "author": "Smicolon",
7
7
  "repository": {
8
8
  "type": "git",
9
9
  "url": "https://github.com/smicolon/fasla-ui"
10
10
  },
11
- "homepage": "https://ui.smicolon.com",
11
+ "homepage": "https://fasla.smicolon.com",
12
12
  "keywords": [
13
+ "arabic",
14
+ "rtl",
15
+ "right-to-left",
13
16
  "react",
14
17
  "components",
15
18
  "ui",
16
19
  "tailwindcss",
17
20
  "framer-motion",
18
21
  "shadcn",
22
+ "shadcn-ui",
19
23
  "design-system",
20
24
  "animations"
21
25
  ],
package/registry.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "$schema": "https://ui.shadcn.com/schema/registry.json",
3
3
  "name": "smicolon",
4
- "homepage": "https://ui.smicolon.com",
4
+ "homepage": "https://fasla.smicolon.com",
5
5
  "items": [
6
6
  {
7
7
  "name": "animated-gradient",