@flusys/ng-ui 1.2.0-rc.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 +1300 -0
- package/fesm2022/flusys-ng-ui.mjs +25078 -0
- package/fesm2022/flusys-ng-ui.mjs.map +1 -0
- package/package.json +29 -0
- package/themes/tailwind.scss +83 -0
- package/types/flusys-ng-ui.d.ts +4384 -0
package/package.json
ADDED
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@flusys/ng-ui",
|
|
3
|
+
"version": "1.2.0-rc.1",
|
|
4
|
+
"description": "FLUSYS native UI component library ",
|
|
5
|
+
"license": "MIT",
|
|
6
|
+
"peerDependencies": {
|
|
7
|
+
"@angular/common": ">=21.0.0",
|
|
8
|
+
"@angular/core": ">=21.0.0",
|
|
9
|
+
"@angular/forms": ">=21.0.0",
|
|
10
|
+
"@angular/router": ">=21.0.0"
|
|
11
|
+
},
|
|
12
|
+
"dependencies": {
|
|
13
|
+
"@lucide/angular": "^1.23.0",
|
|
14
|
+
"tslib": "^2.3.0"
|
|
15
|
+
},
|
|
16
|
+
"sideEffects": false,
|
|
17
|
+
"module": "fesm2022/flusys-ng-ui.mjs",
|
|
18
|
+
"typings": "types/flusys-ng-ui.d.ts",
|
|
19
|
+
"exports": {
|
|
20
|
+
"./package.json": {
|
|
21
|
+
"default": "./package.json"
|
|
22
|
+
},
|
|
23
|
+
".": {
|
|
24
|
+
"types": "./types/flusys-ng-ui.d.ts",
|
|
25
|
+
"default": "./fesm2022/flusys-ng-ui.mjs"
|
|
26
|
+
}
|
|
27
|
+
},
|
|
28
|
+
"type": "module"
|
|
29
|
+
}
|
|
@@ -0,0 +1,83 @@
|
|
|
1
|
+
@theme inline {
|
|
2
|
+
/* ─── Border radius (preset-driven) ─────────────────────── */
|
|
3
|
+
--radius-border: var(--content-border-radius);
|
|
4
|
+
--radius-sm: var(--f-border-radius-sm);
|
|
5
|
+
--radius-md: var(--f-border-radius-sm);
|
|
6
|
+
--radius-lg: var(--f-border-radius-md);
|
|
7
|
+
--radius-xl: var(--f-border-radius-lg);
|
|
8
|
+
--radius-2xl: var(--f-border-radius-xl);
|
|
9
|
+
|
|
10
|
+
/* ─── Shadows (preset-driven) ───────────────────────────── */
|
|
11
|
+
--shadow-sm: var(--f-shadow-sm);
|
|
12
|
+
--shadow-md: var(--f-shadow);
|
|
13
|
+
--shadow-lg: var(--f-shadow-lg);
|
|
14
|
+
--shadow-xl: var(--f-shadow-xl);
|
|
15
|
+
--shadow-2xl: var(--f-shadow-2xl);
|
|
16
|
+
|
|
17
|
+
/* ─── Primary palette ───────────────────────────────────── */
|
|
18
|
+
--color-primary: var(--f-primary-color);
|
|
19
|
+
--color-primary-50: var(--f-primary-50);
|
|
20
|
+
--color-primary-100: var(--f-primary-100);
|
|
21
|
+
--color-primary-200: var(--f-primary-200);
|
|
22
|
+
--color-primary-300: var(--f-primary-300);
|
|
23
|
+
--color-primary-400: var(--f-primary-400);
|
|
24
|
+
--color-primary-500: var(--f-primary-500);
|
|
25
|
+
--color-primary-600: var(--f-primary-600);
|
|
26
|
+
--color-primary-700: var(--f-primary-700);
|
|
27
|
+
--color-primary-800: var(--f-primary-800);
|
|
28
|
+
--color-primary-900: var(--f-primary-900);
|
|
29
|
+
--color-primary-950: var(--f-primary-950);
|
|
30
|
+
--color-primary-contrast: var(--f-primary-contrast-color);
|
|
31
|
+
--color-primary-emphasis: var(--f-primary-active-color);
|
|
32
|
+
|
|
33
|
+
/* ─── Surface palette ───────────────────────────────────── */
|
|
34
|
+
--color-surface-0: var(--f-surface-0);
|
|
35
|
+
--color-surface-50: var(--f-surface-50);
|
|
36
|
+
--color-surface-100: var(--f-surface-100);
|
|
37
|
+
--color-surface-200: var(--f-surface-200);
|
|
38
|
+
--color-surface-300: var(--f-surface-300);
|
|
39
|
+
--color-surface-400: var(--f-surface-400);
|
|
40
|
+
--color-surface-500: var(--f-surface-500);
|
|
41
|
+
--color-surface-600: var(--f-surface-600);
|
|
42
|
+
--color-surface-700: var(--f-surface-700);
|
|
43
|
+
--color-surface-800: var(--f-surface-800);
|
|
44
|
+
--color-surface-900: var(--f-surface-900);
|
|
45
|
+
--color-surface-950: var(--f-surface-950);
|
|
46
|
+
|
|
47
|
+
/* ─── Surface semantic ──────────────────────────────────── */
|
|
48
|
+
--color-surface-ground: var(--surface-ground, var(--f-surface-100));
|
|
49
|
+
--color-surface-card: var(--f-content-background);
|
|
50
|
+
--color-surface-hover: var(--f-content-hover-background);
|
|
51
|
+
--color-surface-border: var(--f-content-border-color);
|
|
52
|
+
|
|
53
|
+
/* ─── Text semantic ─────────────────────────────────────── */
|
|
54
|
+
--color-muted-color: var(--f-text-muted-color);
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
/* ── Status color palettes (static; referenced as var(--f-<color>-<shade>)) ── */
|
|
58
|
+
:root {
|
|
59
|
+
--f-red-50: #fef2f2; --f-red-100: #fee2e2; --f-red-400: #f87171; --f-red-500: #ef4444; --f-red-700: #b91c1c;
|
|
60
|
+
--f-orange-50: #fff7ed; --f-orange-100: #ffedd5; --f-orange-400: #fb923c; --f-orange-500: #f97316; --f-orange-700: #c2410c;
|
|
61
|
+
--f-yellow-50: #fefce8; --f-yellow-100: #fef9c3; --f-yellow-400: #facc15; --f-yellow-500: #eab308; --f-yellow-700: #a16207;
|
|
62
|
+
--f-green-50: #f0fdf4; --f-green-100: #dcfce7; --f-green-400: #4ade80; --f-green-500: #22c55e; --f-green-700: #15803d;
|
|
63
|
+
--f-blue-50: #eff6ff; --f-blue-100: #dbeafe; --f-blue-400: #60a5fa; --f-blue-500: #3b82f6; --f-blue-700: #1d4ed8;
|
|
64
|
+
--f-indigo-50: #eef2ff; --f-indigo-100: #e0e7ff; --f-indigo-400: #818cf8; --f-indigo-500: #6366f1; --f-indigo-700: #4338ca;
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
/* ── Legacy PrimeUI utility aliases (recreated without the plugin) ── */
|
|
68
|
+
@utility text-color { color: var(--text-color); }
|
|
69
|
+
@utility border-surface { border-color: var(--surface-border); }
|
|
70
|
+
@utility surface-card { background-color: var(--surface-card); }
|
|
71
|
+
@utility surface-ground { background-color: var(--surface-ground); }
|
|
72
|
+
@utility surface-overlay { background-color: var(--surface-overlay); }
|
|
73
|
+
@utility surface-section { background-color: var(--surface-card); }
|
|
74
|
+
@utility bg-emphasis { background-color: var(--surface-hover); }
|
|
75
|
+
@utility outline-primary { outline-width: 2px; outline-style: solid; outline-color: var(--primary-color); }
|
|
76
|
+
|
|
77
|
+
/* Preset-driven focus ring: Aura = 1px solid, Lara = none, Nora = 2px inset. */
|
|
78
|
+
@utility ring-focus {
|
|
79
|
+
outline-width: var(--f-focus-ring-width);
|
|
80
|
+
outline-style: var(--f-focus-ring-style);
|
|
81
|
+
outline-offset: var(--f-focus-ring-offset);
|
|
82
|
+
outline-color: var(--f-focus-ring-color);
|
|
83
|
+
}
|