arekui 1.0.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 (56) hide show
  1. package/LICENSE +21 -0
  2. package/README.md +198 -0
  3. package/arekui.css +3279 -0
  4. package/arekui.d.ts +328 -0
  5. package/arekui.js +450 -0
  6. package/dist/arekui.min.css +1 -0
  7. package/dist/arekui.min.js +2 -0
  8. package/package.json +57 -0
  9. package/scripts/build-custom.js +318 -0
  10. package/src/arekui.css +56 -0
  11. package/src/base/neo-overrides.css +317 -0
  12. package/src/base/reset.css +67 -0
  13. package/src/base/tokens.css +304 -0
  14. package/src/components/accordion.css +34 -0
  15. package/src/components/alert.css +26 -0
  16. package/src/components/badge.css +33 -0
  17. package/src/components/breadcrumb.css +33 -0
  18. package/src/components/button.css +103 -0
  19. package/src/components/card.css +24 -0
  20. package/src/components/carousel.css +14 -0
  21. package/src/components/chat.css +78 -0
  22. package/src/components/drawer.css +53 -0
  23. package/src/components/file-upload.css +51 -0
  24. package/src/components/footer.css +26 -0
  25. package/src/components/forms.css +69 -0
  26. package/src/components/hero.css +22 -0
  27. package/src/components/join.css +14 -0
  28. package/src/components/link.css +24 -0
  29. package/src/components/menu.css +56 -0
  30. package/src/components/misc.css +57 -0
  31. package/src/components/modal.css +32 -0
  32. package/src/components/navbar.css +37 -0
  33. package/src/components/pagination.css +46 -0
  34. package/src/components/popover.css +70 -0
  35. package/src/components/progress.css +19 -0
  36. package/src/components/prose.css +80 -0
  37. package/src/components/rating.css +37 -0
  38. package/src/components/scroll-top.css +36 -0
  39. package/src/components/skeleton.css +54 -0
  40. package/src/components/swap.css +45 -0
  41. package/src/components/table.css +22 -0
  42. package/src/components/tabs.css +24 -0
  43. package/src/components/tag.css +101 -0
  44. package/src/components/textured.css +34 -0
  45. package/src/components/timeline.css +34 -0
  46. package/src/components/toast.css +134 -0
  47. package/src/components/tooltip.css +24 -0
  48. package/src/utilities/borders.css +152 -0
  49. package/src/utilities/colors.css +73 -0
  50. package/src/utilities/hover.css +33 -0
  51. package/src/utilities/layout.css +100 -0
  52. package/src/utilities/neo-utilities.css +95 -0
  53. package/src/utilities/responsive.css +128 -0
  54. package/src/utilities/sizing.css +91 -0
  55. package/src/utilities/spacing.css +130 -0
  56. package/src/utilities/typography.css +94 -0
@@ -0,0 +1,318 @@
1
+ #!/usr/bin/env node
2
+
3
+ /**
4
+ * Arekui Build — scans your source and outputs only what you use.
5
+ *
6
+ * Usage:
7
+ * npx arekui-build # reads arekui.config.js
8
+ * npx arekui-build -i ./src -o ./assets # overrides with flags
9
+ * npx arekui-build --sourcemap
10
+ * npx arekui-build --full # include everything
11
+ *
12
+ * Config file (arekui.config.js or arekui.config.json):
13
+ * module.exports = {
14
+ * input: "./src", // directory to scan
15
+ * output: "./assets", // output directory
16
+ * name: "arekui", // output filename (without .min.css)
17
+ * sourcemap: false,
18
+ * full: false, // true = ignore scan, include all
19
+ * };
20
+ *
21
+ * CLI flags override config file values.
22
+ */
23
+
24
+ const fs = require("fs");
25
+ const path = require("path");
26
+ const { bundle } = require("lightningcss");
27
+
28
+ // ── Load config file ───────────────────────────────────────────────────────
29
+ function loadConfig() {
30
+ const candidates = ["arekui.config.js", "arekui.config.json"];
31
+ for (const file of candidates) {
32
+ const full = path.resolve(file);
33
+ if (fs.existsSync(full)) {
34
+ try {
35
+ console.log(`\x1b[90m config: ${file}\x1b[0m`);
36
+ return file.endsWith(".json")
37
+ ? JSON.parse(fs.readFileSync(full, "utf-8"))
38
+ : require(full);
39
+ } catch (e) {
40
+ console.error(`\x1b[31m✗\x1b[0m Failed to load ${file}: ${e.message}`);
41
+ process.exit(1);
42
+ }
43
+ }
44
+ }
45
+ return {};
46
+ }
47
+
48
+ // ── CLI args (override config) ─────────────────────────────────────────────
49
+ function getArg(flags) {
50
+ const idx = process.argv.findIndex((a) => flags.includes(a));
51
+ return idx === -1 ? null : process.argv[idx + 1];
52
+ }
53
+
54
+ const config = loadConfig();
55
+
56
+ const input = getArg(["-i", "--input"]) || config.input || ".";
57
+ const output = getArg(["-o", "--output"]) || config.output || "assets";
58
+ const name = getArg(["-n", "--name"]) || config.name || "arekui";
59
+ const sourcemap =
60
+ process.argv.includes("--sourcemap") || config.sourcemap === true;
61
+ const full = process.argv.includes("--full") || config.full === true;
62
+
63
+ const srcDir = path.resolve(input);
64
+ const outDir = path.resolve(output);
65
+
66
+ // ── Component → CSS class mapping ──────────────────────────────────────────
67
+ const COMPONENT_CLASSES = {
68
+ accordion: ["ar-accordion", "ar-collapse"],
69
+ alert: ["ar-alert"],
70
+ badge: ["ar-badge"],
71
+ breadcrumb: ["ar-breadcrumb"],
72
+ button: ["ar-btn"],
73
+ card: ["ar-card", "ar-card-body", "ar-card-title", "ar-card-figure"],
74
+ carousel: ["ar-carousel", "ar-carousel-item"],
75
+ chat: ["ar-chat", "ar-chat-bubble"],
76
+ drawer: ["ar-drawer"],
77
+ "file-upload": ["ar-file-upload"],
78
+ footer: ["ar-footer"],
79
+ forms: [
80
+ "ar-input",
81
+ "ar-textarea",
82
+ "ar-select",
83
+ "ar-checkbox",
84
+ "ar-radio",
85
+ "ar-toggle",
86
+ "ar-range",
87
+ "ar-label",
88
+ "ar-fieldset",
89
+ ],
90
+ hero: ["ar-hero"],
91
+ join: ["ar-join"],
92
+ link: ["ar-link"],
93
+ menu: ["ar-menu", "ar-dropdown"],
94
+ misc: ["ar-divider", "ar-stepper", "ar-step", "ar-avatar"],
95
+ modal: ["ar-modal"],
96
+ navbar: ["ar-navbar"],
97
+ pagination: ["ar-pagination"],
98
+ popover: ["ar-popover"],
99
+ progress: ["ar-progress"],
100
+ prose: ["ar-prose"],
101
+ rating: ["ar-rating"],
102
+ "scroll-top": ["ar-scroll-top"],
103
+ skeleton: ["ar-skeleton"],
104
+ swap: ["ar-swap"],
105
+ table: ["ar-table"],
106
+ tabs: ["ar-tabs", "ar-tab"],
107
+ tag: ["ar-tag"],
108
+ textured: ["ar-bg-img"],
109
+ timeline: ["ar-timeline"],
110
+ toast: ["ar-toast"],
111
+ tooltip: ["ar-tooltip"],
112
+ };
113
+
114
+ const UTILITY_PATTERNS = {
115
+ spacing: [
116
+ /^ar-p/,
117
+ /^ar-px/,
118
+ /^ar-py/,
119
+ /^ar-m/,
120
+ /^ar-mt/,
121
+ /^ar-mb/,
122
+ /^ar-my/,
123
+ /^ar-mx/,
124
+ /^ar-gap/,
125
+ ],
126
+ layout: [
127
+ /^ar-flex/,
128
+ /^ar-inline-flex/,
129
+ /^ar-flex-col/,
130
+ /^ar-flex-wrap/,
131
+ /^ar-items-/,
132
+ /^ar-justify-/,
133
+ /^ar-grid/,
134
+ /^ar-block/,
135
+ /^ar-hidden/,
136
+ ],
137
+ typography: [/^ar-text-/, /^ar-font-/, /^ar-leading-/, /^ar-tracking-/],
138
+ sizing: [
139
+ /^ar-w-/,
140
+ /^ar-h-/,
141
+ /^ar-min-h-/,
142
+ /^ar-max-w-/,
143
+ /^ar-aspect-video/,
144
+ /^ar-object-cover/,
145
+ ],
146
+ colors: [
147
+ /^ar-bg-base/,
148
+ /^ar-bg-neutral/,
149
+ /^ar-bg-primary/,
150
+ /^ar-bg-secondary/,
151
+ /^ar-bg-accent/,
152
+ /^ar-text-base/,
153
+ /^ar-text-gray/,
154
+ ],
155
+ borders: [/^ar-border/, /^ar-rounded/, /^ar-shadow-/],
156
+ hover: [/^ar-hover-/],
157
+ responsive: [/^ar-md:/, /^ar-lg:/],
158
+ "neo-utilities": [/^ar-neo-/],
159
+ };
160
+
161
+ // ── Scan source files ──────────────────────────────────────────────────────
162
+ function findSourceFiles(dir) {
163
+ const exts = [".html", ".jsx", ".vue", ".svelte", ".tsx", ".ts", ".js"];
164
+ const files = [];
165
+
166
+ function walk(d) {
167
+ for (const entry of fs.readdirSync(d, { withFileTypes: true })) {
168
+ const full = path.join(d, entry.name);
169
+ if (
170
+ entry.isDirectory() &&
171
+ !entry.name.startsWith(".") &&
172
+ entry.name !== "node_modules"
173
+ ) {
174
+ walk(full);
175
+ } else if (entry.isFile() && exts.includes(path.extname(entry.name))) {
176
+ files.push(full);
177
+ }
178
+ }
179
+ }
180
+ walk(dir);
181
+ return files;
182
+ }
183
+
184
+ function scan(dir) {
185
+ const files = findSourceFiles(dir);
186
+ const content = files.map((f) => fs.readFileSync(f, "utf-8")).join("\n");
187
+ const tokens = new Set();
188
+ let m;
189
+ const re = /ar-[\w-]+/g;
190
+ while ((m = re.exec(content)) !== null) tokens.add(m[0]);
191
+ return tokens;
192
+ }
193
+
194
+ function detectComponents(classes) {
195
+ const found = new Set();
196
+ for (const [comp, patterns] of Object.entries(COMPONENT_CLASSES)) {
197
+ for (const cls of classes) {
198
+ if (patterns.some((p) => cls === p || cls.startsWith(p + "-"))) {
199
+ found.add(comp);
200
+ break;
201
+ }
202
+ }
203
+ }
204
+ return [...found];
205
+ }
206
+
207
+ function detectUtilities(classes) {
208
+ const found = new Set();
209
+ for (const [util, regexes] of Object.entries(UTILITY_PATTERNS)) {
210
+ for (const cls of classes) {
211
+ if (regexes.some((r) => r.test(cls))) {
212
+ found.add(util);
213
+ break;
214
+ }
215
+ }
216
+ }
217
+ return [...found];
218
+ }
219
+
220
+ // ── Build CSS ──────────────────────────────────────────────────────────────
221
+ const COMPONENT_FILES = {
222
+ accordion: "accordion",
223
+ alert: "alert",
224
+ badge: "badge",
225
+ breadcrumb: "breadcrumb",
226
+ button: "button",
227
+ card: "card",
228
+ carousel: "carousel",
229
+ chat: "chat",
230
+ drawer: "drawer",
231
+ "file-upload": "file-upload",
232
+ footer: "footer",
233
+ forms: "forms",
234
+ hero: "hero",
235
+ join: "join",
236
+ link: "link",
237
+ menu: "menu",
238
+ misc: "misc",
239
+ modal: "modal",
240
+ navbar: "navbar",
241
+ pagination: "pagination",
242
+ popover: "popover",
243
+ progress: "progress",
244
+ prose: "prose",
245
+ rating: "rating",
246
+ "scroll-top": "scroll-top",
247
+ skeleton: "skeleton",
248
+ swap: "swap",
249
+ table: "table",
250
+ tabs: "tabs",
251
+ tag: "tag",
252
+ textured: "textured",
253
+ timeline: "timeline",
254
+ toast: "toast",
255
+ tooltip: "tooltip",
256
+ };
257
+
258
+ function buildCSS(components, utilities) {
259
+ const imports = [
260
+ `@import "./base/tokens.css" layer(base);`,
261
+ `@import "./base/reset.css" layer(base);`,
262
+ `@import "./base/neo-overrides.css" layer(base);`,
263
+ ];
264
+
265
+ for (const c of components) {
266
+ imports.push(
267
+ `@import "./components/${COMPONENT_FILES[c] || c}.css" layer(components);`,
268
+ );
269
+ }
270
+ for (const u of utilities) {
271
+ imports.push(`@import "./utilities/${u}.css" layer(utilities);`);
272
+ }
273
+
274
+ return `@layer base, components, utilities;\n\n${imports.join("\n")}\n`;
275
+ }
276
+
277
+ // ── Main ───────────────────────────────────────────────────────────────────
278
+ const orchestrator = path.join(__dirname, "..", "src", "arekui.css");
279
+ const tmpFile = path.join(path.dirname(orchestrator), "__build.css");
280
+
281
+ try {
282
+ let components, utilities;
283
+
284
+ if (full) {
285
+ components = Object.keys(COMPONENT_FILES);
286
+ utilities = Object.keys(UTILITY_PATTERNS);
287
+ console.log(`\x1b[36m📦\x1b[0m Including all components`);
288
+ } else {
289
+ console.log(`\x1b[36m⏳\x1b[0m Scanning ${srcDir}...`);
290
+ const classes = scan(srcDir);
291
+ components = detectComponents(classes);
292
+ utilities = detectUtilities(classes);
293
+ console.log(` Found ${classes.size} ar-* tokens`);
294
+ console.log(` Components: ${components.join(", ") || "(none)"}`);
295
+ console.log(` Utilities: ${utilities.join(", ") || "(none)"}`);
296
+ }
297
+
298
+ fs.writeFileSync(tmpFile, buildCSS(components, utilities), "utf-8");
299
+ fs.mkdirSync(outDir, { recursive: true });
300
+
301
+ const result = bundle({
302
+ filename: tmpFile,
303
+ minify: true,
304
+ sourceMap: sourcemap,
305
+ });
306
+
307
+ const outFile = path.join(outDir, `${name}.min.css`);
308
+ fs.writeFileSync(outFile, result.code);
309
+ if (sourcemap && result.map) fs.writeFileSync(outFile + ".map", result.map);
310
+
311
+ console.log(`\n\x1b[32m✓\x1b[0m Built → ${outFile}`);
312
+ console.log(
313
+ ` ${components.length} components, ${utilities.length} utilities`,
314
+ );
315
+ console.log(` ${(result.code.length / 1024).toFixed(1)}KB`);
316
+ } finally {
317
+ if (fs.existsSync(tmpFile)) fs.unlinkSync(tmpFile);
318
+ }
package/src/arekui.css ADDED
@@ -0,0 +1,56 @@
1
+ /* Arekui v1.0.0 - CSS Framework */
2
+ /* https://github.com/andikarekatias/arekui */
3
+
4
+ @layer base, components, utilities;
5
+
6
+ /* Base layer */
7
+ @import "./base/tokens.css" layer(base);
8
+ @import "./base/reset.css" layer(base);
9
+ @import "./base/neo-overrides.css" layer(base);
10
+
11
+ /* Components */
12
+ @import "./components/button.css" layer(components);
13
+ @import "./components/navbar.css" layer(components);
14
+ @import "./components/menu.css" layer(components);
15
+ @import "./components/swap.css" layer(components);
16
+ @import "./components/card.css" layer(components);
17
+ @import "./components/badge.css" layer(components);
18
+ @import "./components/modal.css" layer(components);
19
+ @import "./components/carousel.css" layer(components);
20
+ @import "./components/drawer.css" layer(components);
21
+ @import "./components/footer.css" layer(components);
22
+ @import "./components/hero.css" layer(components);
23
+ @import "./components/tooltip.css" layer(components);
24
+ @import "./components/link.css" layer(components);
25
+ @import "./components/join.css" layer(components);
26
+ @import "./components/prose.css" layer(components);
27
+ @import "./components/textured.css" layer(components);
28
+ @import "./components/forms.css" layer(components);
29
+ @import "./components/table.css" layer(components);
30
+ @import "./components/alert.css" layer(components);
31
+ @import "./components/tabs.css" layer(components);
32
+ @import "./components/accordion.css" layer(components);
33
+ @import "./components/progress.css" layer(components);
34
+ @import "./components/timeline.css" layer(components);
35
+ @import "./components/misc.css" layer(components);
36
+ @import "./components/toast.css" layer(components);
37
+ @import "./components/skeleton.css" layer(components);
38
+ @import "./components/breadcrumb.css" layer(components);
39
+ @import "./components/pagination.css" layer(components);
40
+ @import "./components/rating.css" layer(components);
41
+ @import "./components/chat.css" layer(components);
42
+ @import "./components/tag.css" layer(components);
43
+ @import "./components/popover.css" layer(components);
44
+ @import "./components/file-upload.css" layer(components);
45
+ @import "./components/scroll-top.css" layer(components);
46
+
47
+ /* Utilities */
48
+ @import "./utilities/spacing.css" layer(utilities);
49
+ @import "./utilities/layout.css" layer(utilities);
50
+ @import "./utilities/typography.css" layer(utilities);
51
+ @import "./utilities/sizing.css" layer(utilities);
52
+ @import "./utilities/colors.css" layer(utilities);
53
+ @import "./utilities/borders.css" layer(utilities);
54
+ @import "./utilities/hover.css" layer(utilities);
55
+ @import "./utilities/responsive.css" layer(utilities);
56
+ @import "./utilities/neo-utilities.css" layer(utilities);
@@ -0,0 +1,317 @@
1
+ /* NEOBRUTALISM OVERRIDES */
2
+ html[data-theme="neo"] body {
3
+ font-family: var(--ar-font-sans);
4
+ }
5
+
6
+ /* --- Buttons (neo) --- */
7
+ html[data-theme="neo"] .ar-btn {
8
+ border: var(--ar-neo-border-width) solid var(--ar-neo-border-color);
9
+ border-radius: 0.75rem;
10
+ box-shadow: var(--ar-neo-shadow-md);
11
+ font-family: var(--ar-font-sans);
12
+ font-weight: 700;
13
+ transition:
14
+ box-shadow 0.15s ease-out,
15
+ transform 0.15s ease-out;
16
+ }
17
+ html[data-theme="neo"] .ar-btn:hover {
18
+ box-shadow: var(--ar-neo-shadow-sm);
19
+ transform: translate(2px, 2px);
20
+ }
21
+ html[data-theme="neo"] .ar-btn:active {
22
+ box-shadow: none;
23
+ transform: translate(4px, 4px);
24
+ }
25
+ html[data-theme="neo"] .ar-btn-primary {
26
+ background: var(--ar-neo-primary);
27
+ color: var(--ar-neo-primary-content);
28
+ }
29
+ html[data-theme="neo"] .ar-btn-primary:hover {
30
+ background: var(--ar-neo-primary);
31
+ }
32
+ html[data-theme="neo"] .ar-btn-outline {
33
+ background: var(--ar-neo-base-100);
34
+ border-color: var(--ar-neo-border-color);
35
+ color: var(--ar-neo-base-content);
36
+ }
37
+ html[data-theme="neo"] .ar-btn-outline:hover {
38
+ background: var(--ar-neo-base-content);
39
+ color: var(--ar-neo-base-100);
40
+ }
41
+ html[data-theme="neo"] .ar-btn-ghost {
42
+ background: transparent;
43
+ border-color: transparent;
44
+ box-shadow: none;
45
+ }
46
+ html[data-theme="neo"] .ar-btn-ghost:hover {
47
+ background: var(--ar-neo-base-200);
48
+ box-shadow: var(--ar-neo-shadow-sm);
49
+ }
50
+ html[data-theme="neo"] .ar-btn-neutral {
51
+ background: var(--ar-neo-neutral);
52
+ color: var(--ar-neo-neutral-content);
53
+ }
54
+ html[data-theme="neo"] .ar-btn-circle {
55
+ border-radius: var(--ar-radius-pill);
56
+ }
57
+
58
+ /* --- Card (neo) --- */
59
+ html[data-theme="neo"] .ar-card {
60
+ border: var(--ar-neo-border-width) solid var(--ar-neo-border-color);
61
+ border-radius: 1rem;
62
+ box-shadow: var(--ar-neo-shadow-lg);
63
+ overflow: hidden;
64
+ }
65
+
66
+ /* --- Badge (neo) --- */
67
+ html[data-theme="neo"] .ar-badge {
68
+ border: 2px solid var(--ar-neo-border-color);
69
+ border-radius: var(--ar-radius-pill);
70
+ box-shadow: 2px 2px 0px 0px var(--ar-neo-border-color);
71
+ font-weight: 700;
72
+ }
73
+
74
+ /* --- Modal (neo) --- */
75
+ html[data-theme="neo"] .ar-modal-box {
76
+ border: var(--ar-neo-border-width) solid var(--ar-neo-border-color);
77
+ border-radius: 1rem;
78
+ box-shadow: var(--ar-neo-shadow-xl);
79
+ }
80
+
81
+ /* --- Alert (neo) --- */
82
+ html[data-theme="neo"] .ar-alert {
83
+ border: var(--ar-neo-border-width) solid var(--ar-neo-border-color);
84
+ border-radius: 0.75rem;
85
+ box-shadow: var(--ar-neo-shadow-md);
86
+ font-weight: 600;
87
+ }
88
+
89
+ /* --- Table (neo) --- */
90
+ html[data-theme="neo"] .ar-table th,
91
+ html[data-theme="neo"] .ar-table td {
92
+ border: 2px solid var(--ar-neo-border-color);
93
+ }
94
+ html[data-theme="neo"] .ar-table th {
95
+ background: var(--ar-neo-base-200);
96
+ font-weight: 700;
97
+ }
98
+
99
+ /* --- Tabs (neo) --- */
100
+ html[data-theme="neo"] .ar-tabs {
101
+ border-bottom: var(--ar-neo-border-width) solid var(--ar-neo-border-color);
102
+ }
103
+ html[data-theme="neo"] .ar-tab {
104
+ border: 2px solid transparent;
105
+ border-bottom: 0;
106
+ border-radius: 0.5rem 0.5rem 0 0;
107
+ font-weight: 700;
108
+ font-family: var(--ar-font-sans);
109
+ }
110
+ html[data-theme="neo"] .ar-tab-active {
111
+ border-color: var(--ar-neo-border-color);
112
+ background: var(--ar-neo-base-100);
113
+ color: var(--ar-neo-primary);
114
+ }
115
+
116
+ /* --- Accordion (neo) --- */
117
+ html[data-theme="neo"] .ar-accordion {
118
+ border: var(--ar-neo-border-width) solid var(--ar-neo-border-color);
119
+ border-radius: 0.75rem;
120
+ box-shadow: var(--ar-neo-shadow-md);
121
+ }
122
+ html[data-theme="neo"] .ar-accordion details {
123
+ border-top: 2px solid var(--ar-neo-border-color);
124
+ }
125
+ html[data-theme="neo"] .ar-accordion details:first-child {
126
+ border-top: 0;
127
+ }
128
+
129
+ /* --- Progress (neo) --- */
130
+ html[data-theme="neo"] .ar-progress {
131
+ border: 2px solid var(--ar-neo-border-color);
132
+ border-radius: var(--ar-radius-pill);
133
+ overflow: hidden;
134
+ }
135
+ html[data-theme="neo"] .ar-progress::-webkit-progress-value {
136
+ background: var(--ar-neo-primary);
137
+ }
138
+
139
+ /* --- Toast (neo) --- */
140
+ html[data-theme="neo"] .ar-toast {
141
+ border: var(--ar-neo-border-width) solid var(--ar-neo-border-color);
142
+ border-radius: 0.75rem;
143
+ box-shadow: var(--ar-neo-shadow-lg);
144
+ font-weight: 600;
145
+ }
146
+
147
+ /* --- Tag (neo) --- */
148
+ html[data-theme="neo"] .ar-tag {
149
+ border: 2px solid var(--ar-neo-border-color);
150
+ border-radius: var(--ar-radius-pill);
151
+ box-shadow: 2px 2px 0px 0px var(--ar-neo-border-color);
152
+ font-weight: 600;
153
+ }
154
+
155
+ /* --- Chat bubble (neo) --- */
156
+ html[data-theme="neo"] .ar-chat-bubble {
157
+ border: var(--ar-neo-border-width) solid var(--ar-neo-border-color);
158
+ border-radius: 1rem;
159
+ box-shadow: var(--ar-neo-shadow-sm);
160
+ }
161
+ html[data-theme="neo"] .ar-chat-end .ar-chat-bubble {
162
+ background: var(--ar-neo-primary);
163
+ color: var(--ar-neo-primary-content);
164
+ border-color: var(--ar-neo-border-color);
165
+ }
166
+
167
+ /* --- Dropdown (neo) --- */
168
+ html[data-theme="neo"] .ar-dropdown-content {
169
+ border: var(--ar-neo-border-width) solid var(--ar-neo-border-color);
170
+ border-radius: 0.75rem;
171
+ box-shadow: var(--ar-neo-shadow-lg);
172
+ }
173
+
174
+ /* --- Popover (neo) --- */
175
+ html[data-theme="neo"] .ar-popover-content {
176
+ border: var(--ar-neo-border-width) solid var(--ar-neo-border-color);
177
+ border-radius: 0.75rem;
178
+ box-shadow: var(--ar-neo-shadow-lg);
179
+ }
180
+
181
+ /* --- Tooltip (neo) --- */
182
+ html[data-theme="neo"] .ar-tooltip[data-tip]::after {
183
+ border: 2px solid var(--ar-neo-border-color);
184
+ border-radius: 0.5rem;
185
+ box-shadow: 2px 2px 0px 0px var(--ar-neo-border-color);
186
+ font-weight: 600;
187
+ }
188
+
189
+ /* --- Forms (neo) --- */
190
+ html[data-theme="neo"] .ar-input,
191
+ html[data-theme="neo"] .ar-select,
192
+ html[data-theme="neo"] .ar-textarea {
193
+ border: var(--ar-neo-border-width) solid var(--ar-neo-border-color);
194
+ border-radius: 0.5rem;
195
+ box-shadow: var(--ar-neo-shadow-sm);
196
+ font-family: var(--ar-font-sans);
197
+ transition:
198
+ box-shadow 0.15s ease-out,
199
+ border-color 0.15s ease-out;
200
+ }
201
+ html[data-theme="neo"] .ar-input:focus,
202
+ html[data-theme="neo"] .ar-select:focus,
203
+ html[data-theme="neo"] .ar-textarea:focus {
204
+ border-color: var(--ar-neo-primary);
205
+ box-shadow: var(--ar-neo-shadow-md);
206
+ outline: 0;
207
+ }
208
+
209
+ /* --- Toggle (neo) --- */
210
+ html[data-theme="neo"] .ar-toggle {
211
+ border: 2px solid var(--ar-neo-border-color);
212
+ border-radius: var(--ar-radius-pill);
213
+ }
214
+
215
+ /* --- Pagination (neo) --- */
216
+ html[data-theme="neo"] .ar-page-item {
217
+ border: 2px solid var(--ar-neo-border-color);
218
+ border-radius: 0.5rem;
219
+ font-weight: 700;
220
+ box-shadow: 2px 2px 0px 0px var(--ar-neo-border-color);
221
+ transition:
222
+ box-shadow 0.15s ease-out,
223
+ transform 0.15s ease-out;
224
+ }
225
+ html[data-theme="neo"] .ar-page-item:hover {
226
+ box-shadow: 1px 1px 0px 0px var(--ar-neo-border-color);
227
+ transform: translate(1px, 1px);
228
+ }
229
+ html[data-theme="neo"] .ar-page-active {
230
+ background: var(--ar-neo-primary);
231
+ color: var(--ar-neo-primary-content);
232
+ border-color: var(--ar-neo-border-color);
233
+ }
234
+
235
+ /* --- Stepper (neo) --- */
236
+ html[data-theme="neo"] .ar-step::before {
237
+ border: 2px solid var(--ar-neo-border-color);
238
+ box-shadow: 2px 2px 0px 0px var(--ar-neo-border-color);
239
+ }
240
+
241
+ /* --- Navbar (neo) --- */
242
+ html[data-theme="neo"] .ar-navbar {
243
+ border-bottom: var(--ar-neo-border-width) solid var(--ar-neo-border-color);
244
+ background: var(--ar-neo-base-100);
245
+ }
246
+
247
+ /* --- Footer (neo) --- */
248
+ html[data-theme="neo"] .ar-footer {
249
+ border-top: var(--ar-neo-border-width) solid var(--ar-neo-border-color);
250
+ }
251
+
252
+ /* --- Hero (neo) --- */
253
+ html[data-theme="neo"] .ar-hero {
254
+ background: var(--ar-neo-base-200);
255
+ }
256
+
257
+ /* --- Scroll to top (neo) --- */
258
+ html[data-theme="neo"] .ar-scroll-top {
259
+ border: var(--ar-neo-border-width) solid var(--ar-neo-border-color);
260
+ border-radius: var(--ar-radius-pill);
261
+ box-shadow: var(--ar-neo-shadow-md);
262
+ }
263
+ html[data-theme="neo"] .ar-scroll-top:hover {
264
+ box-shadow: var(--ar-neo-shadow-sm);
265
+ transform: translate(2px, 2px);
266
+ }
267
+
268
+ /* --- Drawer (neo) --- */
269
+ html[data-theme="neo"] .ar-drawer-side .ar-menu {
270
+ border-right: var(--ar-neo-border-width) solid var(--ar-neo-border-color);
271
+ }
272
+
273
+ /* --- Skeleton (neo) --- */
274
+ html[data-theme="neo"] .ar-skeleton {
275
+ border: 2px solid var(--ar-neo-border-color);
276
+ }
277
+
278
+ /* --- Breadcrumb (neo) --- */
279
+ html[data-theme="neo"] .ar-breadcrumb-item:not(:last-child)::after {
280
+ color: var(--ar-neo-gray-400);
281
+ }
282
+
283
+ /* --- File upload (neo) --- */
284
+ html[data-theme="neo"] .ar-file-upload {
285
+ border: 3px dashed var(--ar-neo-border-color);
286
+ border-radius: 0.75rem;
287
+ transition: all 0.2s ease;
288
+ }
289
+ html[data-theme="neo"] .ar-file-upload:hover {
290
+ border-color: var(--ar-neo-primary);
291
+ background: rgba(0, 174, 239, 0.05);
292
+ transform: scale(1.02) rotate(-1deg);
293
+ }
294
+ html[data-theme="neo"] .ar-file-upload.ar-file-upload-dragover {
295
+ border-color: var(--ar-neo-primary);
296
+ background: rgba(0, 174, 239, 0.05);
297
+ transform: scale(1.02);
298
+ }
299
+
300
+ /* --- Prose (neo) --- */
301
+ html[data-theme="neo"] .ar-prose pre {
302
+ border: 2px solid var(--ar-neo-border-color);
303
+ border-radius: 0.75rem;
304
+ box-shadow: var(--ar-neo-shadow-sm);
305
+ }
306
+ html[data-theme="neo"] .ar-prose code {
307
+ border: 1px solid var(--ar-neo-border-color);
308
+ }
309
+ html[data-theme="neo"] .ar-prose th {
310
+ border: 2px solid var(--ar-neo-border-color);
311
+ }
312
+ html[data-theme="neo"] .ar-prose td {
313
+ border: 2px solid var(--ar-neo-border-color);
314
+ }
315
+ html[data-theme="neo"] .ar-prose blockquote {
316
+ border-left: 4px solid var(--ar-neo-primary);
317
+ }