@smicolon/fasla-ui 0.5.1 → 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.
- package/README.md +18 -9
- package/dist/cli/index.js +3 -2
- package/package.json +7 -3
- package/registry.json +1 -1
package/README.md
CHANGED
|
@@ -4,18 +4,26 @@
|
|
|
4
4
|
[](https://www.npmjs.com/package/@smicolon/fasla-ui)
|
|
5
5
|
[](https://github.com/smicolon/fasla-ui/blob/main/LICENSE)
|
|
6
6
|
|
|
7
|
-
|
|
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
|
-
- **
|
|
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** -
|
|
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** -
|
|
18
|
-
- **
|
|
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
|
|
|
@@ -61,6 +69,7 @@ Core building blocks with CVA variants for consistent styling:
|
|
|
61
69
|
| **Textarea** | Multi-line text input with auto-resize |
|
|
62
70
|
| **Select** | Dropdown selection with search |
|
|
63
71
|
| **Checkbox** | Checkbox with label and description |
|
|
72
|
+
| **Radio** | Single choice from a set, as a plain control or a bordered card |
|
|
64
73
|
| **Switch** | Toggle switch with multiple sizes |
|
|
65
74
|
| **Tabs** | Tabbed navigation with animations |
|
|
66
75
|
| **Badge** | Status indicators and labels |
|
|
@@ -145,13 +154,13 @@ loads Geist from `next/font`, which Next.js 14 has neither of.
|
|
|
145
154
|
|
|
146
155
|
```bash
|
|
147
156
|
# Starting from scratch: use Fasla's colours (palette, radius, Geist).
|
|
148
|
-
npx shadcn@latest add https://
|
|
157
|
+
npx shadcn@latest add https://fasla.smicolon.com/r/theme.json https://fasla.smicolon.com/r/font-geist.json
|
|
149
158
|
|
|
150
159
|
# The same on Next.js 14, without Geist: its template already loads it.
|
|
151
|
-
npx shadcn@latest add https://
|
|
160
|
+
npx shadcn@latest add https://fasla.smicolon.com/r/theme.json
|
|
152
161
|
|
|
153
162
|
# I have a brand: keep my colours (base layer only)
|
|
154
|
-
npx shadcn@latest add https://
|
|
163
|
+
npx shadcn@latest add https://fasla.smicolon.com/r/theme-base.json
|
|
155
164
|
```
|
|
156
165
|
|
|
157
166
|
The base layer adds only what shadcn doesn't have: the success, warning and
|
|
@@ -165,7 +174,7 @@ install to `components/blocks`.
|
|
|
165
174
|
|
|
166
175
|
## Documentation
|
|
167
176
|
|
|
168
|
-
Visit [
|
|
177
|
+
Visit [fasla.smicolon.com](https://fasla.smicolon.com) for full documentation, examples, and API reference.
|
|
169
178
|
|
|
170
179
|
## Related
|
|
171
180
|
|
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://
|
|
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.
|
|
4
|
-
"description": "
|
|
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://
|
|
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
|
],
|