@abdelfattahqandil21/ryzen-ui 0.0.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.
- package/README.md +72 -0
- package/fesm2022/abdelfattahqandil21-ryzen-ui.mjs +2389 -0
- package/fesm2022/abdelfattahqandil21-ryzen-ui.mjs.map +1 -0
- package/index.d.ts +1008 -0
- package/package.json +39 -0
package/README.md
ADDED
|
@@ -0,0 +1,72 @@
|
|
|
1
|
+
# Ryzen UI
|
|
2
|
+
|
|
3
|
+
Standalone Angular component library built with signals, OnPush change detection, and pure Tailwind CSS v4 theming. Zero external dependencies beyond `@angular/core`.
|
|
4
|
+
|
|
5
|
+
## Installation
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
npm install rz-lib primeicons
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
## Setup
|
|
12
|
+
|
|
13
|
+
Import PrimeIcons and the theme variables in your `styles.css` or `angular.json` styles:
|
|
14
|
+
|
|
15
|
+
```css
|
|
16
|
+
@import "primeicons/primeicons.css";
|
|
17
|
+
|
|
18
|
+
/* Define CSS custom properties for light & dark themes */
|
|
19
|
+
:root {
|
|
20
|
+
--color-primary: oklch(0.32 0.09 258);
|
|
21
|
+
--color-surface: oklch(0.99 0 0);
|
|
22
|
+
--color-surface-alt: oklch(0.975 0.005 260);
|
|
23
|
+
--color-text: oklch(0.14 0.01 260);
|
|
24
|
+
--color-text-muted: oklch(0.48 0.01 260);
|
|
25
|
+
--color-border: oklch(0.83 0.015 260);
|
|
26
|
+
--color-border-light: oklch(0.91 0.01 260);
|
|
27
|
+
--color-accent: oklch(0.64 0.2 50);
|
|
28
|
+
--color-success: oklch(0.55 0.18 145);
|
|
29
|
+
--color-warning: oklch(0.68 0.18 75);
|
|
30
|
+
--color-danger: oklch(0.55 0.22 25);
|
|
31
|
+
--color-info: oklch(0.55 0.15 235);
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
.dark {
|
|
35
|
+
--color-surface: oklch(0.13 0.01 260);
|
|
36
|
+
--color-surface-alt: oklch(0.18 0.01 260);
|
|
37
|
+
--color-text: oklch(0.92 0.01 260);
|
|
38
|
+
--color-text-muted: oklch(0.62 0.01 260);
|
|
39
|
+
--color-border: oklch(0.28 0.01 260);
|
|
40
|
+
--color-border-light: oklch(0.22 0.01 260);
|
|
41
|
+
}
|
|
42
|
+
```
|
|
43
|
+
|
|
44
|
+
Activate dark mode by adding the `dark` class to `<html>`:
|
|
45
|
+
|
|
46
|
+
```typescript
|
|
47
|
+
document.documentElement.classList.add('dark');
|
|
48
|
+
```
|
|
49
|
+
|
|
50
|
+
## Components
|
|
51
|
+
|
|
52
|
+
| Category | Components |
|
|
53
|
+
|-----------------|-----------|
|
|
54
|
+
| **Form** | TextInput, PasswordInput, SearchInput, Toggle, DatePicker, DropDown, MultiSelect, Checkbox, FileUpload |
|
|
55
|
+
| **Data Display**| Badge, Skeleton, Table, TableSkeleton, EmptyState, Tooltip, Carousel, BannerSlider, ImageUpload |
|
|
56
|
+
| **Feedback** | Alert, Spinner (5 variants), Toast |
|
|
57
|
+
| **Navigation** | Accordion, Navbar, Sidebar |
|
|
58
|
+
| **Overlay** | Modal, ConfirmDialog |
|
|
59
|
+
|
|
60
|
+
All components are standalone — import directly:
|
|
61
|
+
|
|
62
|
+
```typescript
|
|
63
|
+
import { TextInputComponent } from 'rz-lib';
|
|
64
|
+
```
|
|
65
|
+
|
|
66
|
+
## Development
|
|
67
|
+
|
|
68
|
+
```bash
|
|
69
|
+
ng build rz-lib # build the library
|
|
70
|
+
ng build rz-lib --watch # watch mode
|
|
71
|
+
ng serve # demo app
|
|
72
|
+
```
|