dasar-ui 0.0.0-stage → 1.3.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 (6) hide show
  1. package/README.md +64 -3
  2. package/fesm2022/dasar-ui.mjs +9664 -0
  3. package/fesm2022/dasar-ui.mjs.map +1 -0
  4. package/package.json +36 -3
  5. package/styles/theme.scss +239 -0
  6. package/types/dasar-ui.d.ts +2114 -0
package/package.json CHANGED
@@ -1,6 +1,39 @@
1
1
  {
2
2
  "name": "dasar-ui",
3
- "version": "0.0.0-stage",
4
- "stub": true,
5
- "description": "Temporary package placeholder for staged publishing"
3
+ "version": "1.3.0",
4
+ "description": "UI component library for Angular",
5
+ "author": "dxxta",
6
+ "license": "MIT",
7
+ "repository": {
8
+ "type": "git",
9
+ "url": "https://github.com/pis2co/dasar-ui.git"
10
+ },
11
+ "keywords": [
12
+ "angular",
13
+ "ui",
14
+ "components"
15
+ ],
16
+ "peerDependencies": {
17
+ "@angular/platform-browser": "^22.1.0",
18
+ "@angular/common": "^22.1.0",
19
+ "@angular/core": "^22.1.0",
20
+ "@angular/forms": "^22.1.0",
21
+ "rxjs": "^7.8.0"
22
+ },
23
+ "dependencies": {
24
+ "tslib": "^2.3.0"
25
+ },
26
+ "sideEffects": false,
27
+ "module": "fesm2022/dasar-ui.mjs",
28
+ "typings": "types/dasar-ui.d.ts",
29
+ "exports": {
30
+ "./package.json": {
31
+ "default": "./package.json"
32
+ },
33
+ ".": {
34
+ "types": "./types/dasar-ui.d.ts",
35
+ "default": "./fesm2022/dasar-ui.mjs"
36
+ }
37
+ },
38
+ "type": "module"
6
39
  }
package/styles/theme.scss ADDED
@@ -0,0 +1,239 @@
1
+ // Fonts
2
+ $dasar-font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
3
+ $dasar-font-hero: 'Space Grotesk', sans-serif;
4
+ // Font Weight
5
+ $dasar-font-weight-thin: 300;
6
+ $dasar-font-weight-regular: 400;
7
+ $dasar-font-weight-medium: 500;
8
+ $dasar-font-weight-semibold: 600;
9
+ $dasar-font-weight-bold: 700;
10
+ // Text
11
+ $dasar-text-xss: 0.5rem; // 8px
12
+ $dasar-text-xs: 0.625rem; // 10px
13
+ $dasar-text-sm: 0.75rem; // 12px
14
+ $dasar-text-base: 0.875rem; // 14px
15
+ $dasar-text-lg: 1rem; // 16px
16
+ $dasar-text-xl: 1.125rem; // 18px
17
+ $dasar-line-height-normal: 1.5;
18
+ $dasar-line-height-tight: 1.25;
19
+ // Breakpoints
20
+ $breakpoint-sm: 40em; // 640px
21
+ $breakpoint-md: 48em; // 768px
22
+ $breakpoint-lg: 64em; // 1024px
23
+ $breakpoint-xl: 75em; // 1200px
24
+ // Border Radius (Using em to scale with component font-size)
25
+ $dasar-radius-none: 0;
26
+ $dasar-radius-xxs: 0.125em; // 2px
27
+ $dasar-radius-xs: 0.25em; // 4px
28
+ $dasar-radius-sm: 0.375em; // 6px
29
+ $dasar-radius-md: 0.5em; // 8px
30
+ $dasar-radius-lg: 0.625em; // 10px
31
+ $dasar-radius-xl: 0.75em; // 12px
32
+ $dasar-radius-2xl: 1em; // 16px
33
+ $dasar-radius-3xl: 1.25em; // 20px
34
+ $dasar-radius-4xl: 1.5em; // 24px
35
+ $dasar-radius-full: 9999px; // Pill shape
36
+ // Spacing (Using em to scale with component font-size)
37
+ $dasar-space-0: 0;
38
+ $dasar-space-0-5: 0.125em; // 2px
39
+ $dasar-space-1: 0.25em; // 4px
40
+ $dasar-space-base: 0.5em; // 8px
41
+ $dasar-space-3: 0.75em; // 12px
42
+ $dasar-space-4: 1em; // 16px
43
+ $dasar-space-5: 1.25em; // 20px
44
+ $dasar-space-6: 1.5em; // 24px
45
+ $dasar-space-8: 2em; // 32px
46
+ $dasar-space-10: 2.5em; // 40px
47
+ $dasar-space-12: 3em; // 48px
48
+ $dasar-space-16: 4em; // 64px
49
+ $dasar-space-18: 5em; // 80px
50
+ $dasar-space-24: 6em; // 96px
51
+ $dasar-space-32: 8em; // 128px
52
+ $dasar-space-40: 10em; // 160px
53
+ $dasar-space-48: 12em; // 192px
54
+ $dasar-space-56: 14em; // 224px
55
+ $dasar-space-64: 16em; // 256px
56
+ $dasar-space-80: 20em; // 320px
57
+ $dasar-space-96: 24em; // 384px
58
+ $dasar-space-120: 30em; // 480px
59
+ // Colors
60
+ $dasar-primary-900: #071727;
61
+ $dasar-primary-800: #0d253f;
62
+ $dasar-primary-700: #12345a;
63
+ $dasar-primary-base: #1b4d8e;
64
+ $dasar-primary-500: #2563eb;
65
+ $dasar-primary-300: #60a5fa;
66
+ $dasar-primary-200: #a2cafa;
67
+ $dasar-primary-100: #bfdbfe;
68
+ $dasar-primary-50: #eff6ff;
69
+ $dasar-neutral-900: #111827;
70
+ $dasar-neutral-800: #1f2937;
71
+ $dasar-neutral-700: #374151;
72
+ $dasar-neutral-base: #4b5563;
73
+ $dasar-neutral-500: #6b7280;
74
+ $dasar-neutral-400: #9ca3af;
75
+ $dasar-neutral-300: #d1d5db;
76
+ $dasar-neutral-200: #eaecf0;
77
+ $dasar-neutral-100: #f3f4f6;
78
+ $dasar-neutral-50: #ffffff;
79
+ $dasar-success-50: #ecfdf5;
80
+ $dasar-success-200: #a7f3d0;
81
+ $dasar-success-500: #10b981;
82
+ $dasar-success-base: #059669;
83
+ $dasar-success-800: #065f46;
84
+ $dasar-danger-50: #fef2f2;
85
+ $dasar-danger-200: #fecaca;
86
+ $dasar-danger-500: #ef4444;
87
+ $dasar-danger-base: #dc2626;
88
+ $dasar-danger-800: #991b1b;
89
+ $dasar-warning-50: #fffbeb;
90
+ $dasar-warning-200: #fde68a;
91
+ $dasar-warning-500: #f59e0b;
92
+ $dasar-warning-base: #d97706;
93
+ $dasar-warning-800: #92400e;
94
+ :root {
95
+ --dasar-primary-900: #{$dasar-primary-900};
96
+ --dasar-primary-800: #{$dasar-primary-800};
97
+ --dasar-primary-700: #{$dasar-primary-700};
98
+ --dasar-primary-base: #{$dasar-primary-base};
99
+ --dasar-primary-500: #{$dasar-primary-500};
100
+ --dasar-primary-300: #{$dasar-primary-300};
101
+ --dasar-primary-200: #{$dasar-primary-200};
102
+ --dasar-primary-100: #{$dasar-primary-100};
103
+ --dasar-primary-50: #{$dasar-primary-50};
104
+ --dasar-neutral-900: #{$dasar-neutral-900};
105
+ --dasar-neutral-800: #{$dasar-neutral-800};
106
+ --dasar-neutral-700: #{$dasar-neutral-700};
107
+ --dasar-neutral-base: #{$dasar-neutral-base};
108
+ --dasar-neutral-500: #{$dasar-neutral-500};
109
+ --dasar-neutral-400: #{$dasar-neutral-400};
110
+ --dasar-neutral-300: #{$dasar-neutral-300};
111
+ --dasar-neutral-200: #{$dasar-neutral-200};
112
+ --dasar-neutral-100: #{$dasar-neutral-100};
113
+ --dasar-neutral-50: #{$dasar-neutral-50};
114
+ --dasar-success-50: #{$dasar-success-50};
115
+ --dasar-success-200: #{$dasar-success-200};
116
+ --dasar-success-500: #{$dasar-success-500};
117
+ --dasar-success-base: #{$dasar-success-base};
118
+ --dasar-success-800: #{$dasar-success-800};
119
+ --dasar-danger-50: #{$dasar-danger-50};
120
+ --dasar-danger-200: #{$dasar-danger-200};
121
+ --dasar-danger-500: #{$dasar-danger-500};
122
+ --dasar-danger-base: #{$dasar-danger-base};
123
+ --dasar-danger-800: #{$dasar-danger-800};
124
+ --dasar-warning-50: #{$dasar-warning-50};
125
+ --dasar-warning-200: #{$dasar-warning-200};
126
+ --dasar-warning-500: #{$dasar-warning-500};
127
+ --dasar-warning-base: #{$dasar-warning-base};
128
+ --dasar-warning-800: #{$dasar-warning-800};
129
+
130
+ --font-sans: #{$dasar-font-sans};
131
+ --font-hero: #{$dasar-font-hero};
132
+
133
+ --font-weight-regular: #{$dasar-font-weight-regular};
134
+ --font-weight-medium: #{$dasar-font-weight-medium};
135
+ --font-weight-semibold: #{$dasar-font-weight-semibold};
136
+ --font-weight-bold: #{$dasar-font-weight-bold};
137
+
138
+ --font-size-xss: #{$dasar-text-xss};
139
+ --font-size-xs: #{$dasar-text-xs};
140
+ --font-size-sm: #{$dasar-text-sm};
141
+ --font-size-base: #{$dasar-text-base};
142
+ --font-size-lg: #{$dasar-text-lg};
143
+ --font-size-xl: #{$dasar-text-xl};
144
+
145
+ --line-height-normal: #{$dasar-line-height-normal};
146
+ --line-height-tight: #{$dasar-line-height-tight};
147
+
148
+ --radius-none: #{$dasar-radius-none};
149
+ --radius-xxs: #{$dasar-radius-xxs};
150
+ --radius-xs: #{$dasar-radius-xs};
151
+ --radius-sm: #{$dasar-radius-sm};
152
+ --radius-md: #{$dasar-radius-md};
153
+ --radius-lg: #{$dasar-radius-lg};
154
+ --radius-xl: #{$dasar-radius-xl};
155
+ --radius-2xl: #{$dasar-radius-2xl};
156
+ --radius-3xl: #{$dasar-radius-3xl};
157
+ --radius-4xl: #{$dasar-radius-4xl};
158
+ --radius-full: #{$dasar-radius-full};
159
+
160
+ --space-0: #{$dasar-space-0};
161
+ --space-0-5: #{$dasar-space-0-5};
162
+ --space-1: #{$dasar-space-1};
163
+ --space-base: #{$dasar-space-base};
164
+ --space-3: #{$dasar-space-3};
165
+ --space-4: #{$dasar-space-4};
166
+ --space-5: #{$dasar-space-5};
167
+ --space-6: #{$dasar-space-6};
168
+ --space-8: #{$dasar-space-8};
169
+ --space-10: #{$dasar-space-10};
170
+ --space-12: #{$dasar-space-12};
171
+ --space-16: #{$dasar-space-16};
172
+ --space-18: #{$dasar-space-18};
173
+ --space-24: #{$dasar-space-24};
174
+ --space-32: #{$dasar-space-32};
175
+ --space-40: #{$dasar-space-40};
176
+ --space-48: #{$dasar-space-48};
177
+ --space-56: #{$dasar-space-56};
178
+ --space-64: #{$dasar-space-64};
179
+ --space-80: #{$dasar-space-80};
180
+ --space-96: #{$dasar-space-96};
181
+ --space-120: #{$dasar-space-120};
182
+
183
+ --text-white-color: #{$dasar-neutral-50};
184
+ --text-black-color: #{$dasar-neutral-900};
185
+
186
+ --theme-bg-window-color: #{$dasar-neutral-50};
187
+ --theme-bg-default-color: #{$dasar-neutral-50};
188
+ --theme-bg-surface-color: #{$dasar-neutral-50};
189
+ --theme-bg-hover-color: #{$dasar-neutral-100};
190
+
191
+ --theme-text-color: #{$dasar-neutral-900};
192
+ --theme-text-primary-color: #{$dasar-neutral-900};
193
+ --theme-text-secondary-color: #{$dasar-neutral-500};
194
+ --theme-text-disabled-color: #{$dasar-neutral-400};
195
+ --theme-text-inverse-color: #{$dasar-neutral-50};
196
+
197
+ --theme-border-subtle-color: #{$dasar-neutral-200};
198
+ --theme-border-strong-color: #{$dasar-neutral-300};
199
+
200
+ --theme-primary-color: #{$dasar-primary-base};
201
+ --theme-primary-hover-color: #{$dasar-primary-700};
202
+ --theme-primary-active-color: #{$dasar-primary-800};
203
+ --theme-primary-surface-color: #{$dasar-primary-50};
204
+
205
+ --theme-success-color: #{$dasar-success-base};
206
+ --theme-success-surface-color: #{$dasar-success-50};
207
+ --theme-danger-color: #{$dasar-danger-base};
208
+ --theme-danger-surface-color: #{$dasar-danger-50};
209
+ --theme-warning-color: #{$dasar-warning-base};
210
+ --theme-warning-surface-color: #{$dasar-warning-50};
211
+ }
212
+
213
+ [data-theme='dark'] {
214
+ --theme-bg-window-color: #{$dasar-neutral-900};
215
+ --theme-bg-default-color: #{$dasar-neutral-900};
216
+ --theme-bg-surface-color: #{$dasar-neutral-800};
217
+ --theme-bg-hover-color: #{$dasar-neutral-700};
218
+
219
+ --theme-text-color: #{$dasar-neutral-50};
220
+ --theme-text-primary-color: #{$dasar-neutral-50};
221
+ --theme-text-secondary-color: #{$dasar-neutral-300};
222
+ --theme-text-disabled-color: #{$dasar-neutral-500};
223
+ --theme-text-inverse-color: #{$dasar-neutral-900};
224
+
225
+ --theme-border-subtle-color: #{$dasar-neutral-700};
226
+ --theme-border-strong-color: #{$dasar-neutral-700};
227
+
228
+ --theme-primary-color: #{$dasar-primary-300};
229
+ --theme-primary-hover-color: #{$dasar-primary-200};
230
+ --theme-primary-active-color: #{$dasar-primary-100};
231
+ --theme-primary-surface-color: rgba(96, 165, 250, 0.1);
232
+
233
+ --theme-success-color: #{$dasar-success-base};
234
+ --theme-success-surface-color: rgba(52, 211, 153, 0.1);
235
+ --theme-danger-color: #{$dasar-danger-base};
236
+ --theme-danger-surface-color: rgba(248, 113, 113, 0.1);
237
+ --theme-warning-color: #{$dasar-warning-base};
238
+ --theme-warning-surface-color: rgba(251, 191, 36, 0.1);
239
+ }