@jirawatpyk/aura-tokens 4.5.1 → 4.6.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.
Files changed (7) hide show
  1. package/aura.css +52 -1
  2. package/components/aura.bundle.js +164 -53
  3. package/components/aura.components.css +5 -3
  4. package/components/index.d.ts +31 -1
  5. package/package.json +1 -1
  6. package/scripts/lint-tokens.js +11 -3
  7. package/tokens.json +2 -2
package/aura.css CHANGED
@@ -1,4 +1,4 @@
1
- /* AURA v4.5.1 — GENERATED by scripts/build-tokens.js from tokens.json. Do not edit by hand. */
1
+ /* AURA v4.6.1 — GENERATED by scripts/build-tokens.js from tokens.json. Do not edit by hand. */
2
2
  /* Fonts: load aura-fonts.css (or the <link> tags in README) separately, so a blocked Google Fonts never breaks this file. */
3
3
 
4
4
  :root, [data-theme="light"] {
@@ -106,6 +106,7 @@
106
106
  --aura-shadow-creative: 4px 4px 0px #18181b;
107
107
  --aura-shadow-creative-hover: 6px 6px 0px #18181b;
108
108
  --aura-card-shadow-creative: 8px 8px 0px #18181b;
109
+ color-scheme: light;
109
110
  }
110
111
 
111
112
  .dark, [data-theme="dark"] {
@@ -155,6 +156,56 @@
155
156
  color-scheme: dark;
156
157
  }
157
158
 
159
+ /* data-theme="system": light or dark from prefers-color-scheme. */
160
+ @media (prefers-color-scheme: dark) {
161
+ [data-theme="system"] {
162
+ --aura-bg-surface: var(--aura-zinc-900);
163
+ --aura-bg-surface-hover: var(--aura-zinc-800);
164
+ --aura-bg-surface-strong: var(--aura-zinc-0);
165
+ --aura-bg-canvas: var(--aura-zinc-950);
166
+ --aura-bg-inverted: var(--aura-zinc-0);
167
+ --aura-fg-primary: var(--aura-zinc-0);
168
+ --aura-fg-secondary: var(--aura-zinc-400);
169
+ --aura-fg-tertiary: var(--aura-zinc-450);
170
+ --aura-fg-inverted: var(--aura-zinc-900);
171
+ --aura-fg-accent: var(--aura-violet-300);
172
+ --aura-border-default: rgba(255,255,255,0.1);
173
+ --aura-border-strong: var(--aura-zinc-0);
174
+ --aura-border-subtle: rgba(255,255,255,0.06);
175
+ --aura-accent-violet: var(--aura-violet-400);
176
+ --aura-focus-ring: var(--aura-violet-400);
177
+ --aura-bg-selected: #2c283a;
178
+ --aura-border-control: var(--aura-zinc-400);
179
+ --aura-bg-skeleton: var(--aura-zinc-800);
180
+ --aura-fg-danger: var(--aura-red-400);
181
+ --aura-border-danger: var(--aura-red-400);
182
+ --aura-bg-input: var(--aura-zinc-900);
183
+ --aura-bg-input-disabled: var(--aura-zinc-950);
184
+ --aura-bg-scrim: rgba(0,0,0,0.64);
185
+ --aura-alert-info-bg: #2c283a;
186
+ --aura-alert-info-fg: var(--aura-violet-300);
187
+ --aura-alert-info-border: #514674;
188
+ --aura-alert-success-bg: #27311a;
189
+ --aura-alert-success-fg: var(--aura-lime-300);
190
+ --aura-alert-success-border: #436019;
191
+ --aura-alert-warning-bg: #372b19;
192
+ --aura-alert-warning-fg: var(--aura-amber-300);
193
+ --aura-alert-warning-border: #704e15;
194
+ --aura-alert-danger-bg: #361e21;
195
+ --aura-alert-danger-fg: var(--aura-red-300);
196
+ --aura-alert-danger-border: #6e2a2b;
197
+ --aura-fg-positive: var(--aura-lime-300);
198
+ --aura-button-primary-bg: var(--aura-zinc-0);
199
+ --aura-button-primary-fg: var(--aura-zinc-900);
200
+ --aura-button-primary-bg-hover: var(--aura-zinc-200);
201
+ --aura-shadow-overlay: 0 16px 48px rgba(0,0,0,0.56), 0 2px 8px rgba(0,0,0,0.32);
202
+ --aura-shadow-creative: 4px 4px 0px #a78bfa;
203
+ --aura-shadow-creative-hover: 6px 6px 0px #a78bfa;
204
+ --aura-card-shadow-creative: 8px 8px 0px #a78bfa;
205
+ color-scheme: dark;
206
+ }
207
+ }
208
+
158
209
  :root {
159
210
  --aura-space-0: 0px;
160
211
  --aura-space-1: 4px;
package/components/aura.bundle.js CHANGED
@@ -1,4 +1,4 @@
1
- /* @ds-bundle: {"format":4,"namespace":"Aura","components":[{"name":"Icon"},{"name":"Button"},{"name":"IconButton"},{"name":"Menu"},{"name":"DropdownMenu"},{"name":"Checkbox"},{"name":"StatusPill"},{"name":"TextField"},{"name":"Textarea"},{"name":"Select"},{"name":"RadioGroup"},{"name":"Switch"},{"name":"Combobox"},{"name":"DatePicker"},{"name":"DateRangePicker"},{"name":"Calendar"},{"name":"Alert"},{"name":"Toaster"},{"name":"Tooltip"},{"name":"Dialog"},{"name":"Drawer"},{"name":"DataTable"},{"name":"Card"},{"name":"Tabs"},{"name":"SideNav"},{"name":"Breadcrumb"},{"name":"Avatar"},{"name":"Stack"},{"name":"Grid"},{"name":"Container"},{"name":"AppShell"},{"name":"Surface"},{"name":"Stat"},{"name":"TimePicker"},{"name":"FileUpload"},{"name":"Badge"},{"name":"Tag"},{"name":"Progress"},{"name":"Skeleton"},{"name":"EmptyState"},{"name":"Pagination"},{"name":"Accordion"},{"name":"Popover"}]} */
1
+ /* @ds-bundle: {"format":4,"namespace":"Aura","components":[{"name":"Icon"},{"name":"Button"},{"name":"IconButton"},{"name":"Menu"},{"name":"DropdownMenu"},{"name":"Checkbox"},{"name":"StatusPill"},{"name":"TextField"},{"name":"Textarea"},{"name":"Select"},{"name":"RadioGroup"},{"name":"Switch"},{"name":"Combobox"},{"name":"DatePicker"},{"name":"DateRangePicker"},{"name":"Calendar"},{"name":"Alert"},{"name":"Toaster"},{"name":"Tooltip"},{"name":"Dialog"},{"name":"Drawer"},{"name":"DataTable"},{"name":"Card"},{"name":"Tabs"},{"name":"SideNav"},{"name":"Breadcrumb"},{"name":"Avatar"},{"name":"Stack"},{"name":"Grid"},{"name":"Container"},{"name":"AppShell"},{"name":"Surface"},{"name":"Stat"},{"name":"TimePicker"},{"name":"FileUpload"},{"name":"ColorSchemeScript"},{"name":"ColorSchemeToggle"},{"name":"Badge"},{"name":"Tag"},{"name":"Progress"},{"name":"Skeleton"},{"name":"EmptyState"},{"name":"Pagination"},{"name":"Accordion"},{"name":"Popover"}]} */
2
2
  window.Aura = (() => {
3
3
  var __create = Object.create;
4
4
  var __defProp = Object.defineProperty;
@@ -61,6 +61,8 @@ window.Aura = (() => {
61
61
  Calendar: () => Calendar,
62
62
  Card: () => Card,
63
63
  Checkbox: () => Checkbox,
64
+ ColorSchemeScript: () => ColorSchemeScript,
65
+ ColorSchemeToggle: () => ColorSchemeToggle,
64
66
  Combobox: () => Combobox,
65
67
  Container: () => Container,
66
68
  DataTable: () => DataTable,
@@ -100,6 +102,7 @@ window.Aura = (() => {
100
102
  Tooltip: () => Tooltip,
101
103
  brandScale: () => scale,
102
104
  breakpoints: () => breakpoints,
105
+ colorSchemeScript: () => colorSchemeScript,
103
106
  comboboxFilter: () => defaultFilter,
104
107
  contrast: () => contrast,
105
108
  createTheme: () => createTheme,
@@ -112,6 +115,7 @@ window.Aura = (() => {
112
115
  toast: () => toast,
113
116
  useAuraLocale: () => useAuraLocale,
114
117
  useBreakpoint: () => useBreakpoint,
118
+ useColorScheme: () => useColorScheme,
115
119
  useResponsive: () => useResponsive
116
120
  });
117
121
 
@@ -202,7 +206,7 @@ window.Aura = (() => {
202
206
 
203
207
  // src/Icon.tsx
204
208
  var h = React2.createElement;
205
- var ICONS = { "check": [["path", { "d": "M20 6 9 17l-5-5" }]], "x": [["path", { "d": "M18 6 6 18" }], ["path", { "d": "m6 6 12 12" }]], "plus": [["path", { "d": "M5 12h14" }], ["path", { "d": "M12 5v14" }]], "minus": [["path", { "d": "M5 12h14" }]], "search": [["path", { "d": "m21 21-4.34-4.34" }], ["circle", { "cx": "11", "cy": "11", "r": "8" }]], "chevron-down": [["path", { "d": "m6 9 6 6 6-6" }]], "chevron-up": [["path", { "d": "m18 15-6-6-6 6" }]], "chevron-left": [["path", { "d": "m15 18-6-6 6-6" }]], "chevron-right": [["path", { "d": "m9 18 6-6-6-6" }]], "arrow-right": [["path", { "d": "M5 12h14" }], ["path", { "d": "m12 5 7 7-7 7" }]], "arrow-up-right": [["path", { "d": "M7 7h10v10" }], ["path", { "d": "M7 17 17 7" }]], "arrow-up-down": [["path", { "d": "m21 16-4 4-4-4" }], ["path", { "d": "M17 20V4" }], ["path", { "d": "m3 8 4-4 4 4" }], ["path", { "d": "M7 4v16" }]], "loader-circle": [["path", { "d": "M21 12a9 9 0 1 1-6.219-8.56" }]], "circle-alert": [["circle", { "cx": "12", "cy": "12", "r": "10" }], ["line", { "x1": "12", "x2": "12", "y1": "8", "y2": "12" }], ["line", { "x1": "12", "x2": "12.01", "y1": "16", "y2": "16" }]], "circle-check": [["circle", { "cx": "12", "cy": "12", "r": "10" }], ["path", { "d": "m16 9-5.5 5.5L8 12" }]], "info": [["circle", { "cx": "12", "cy": "12", "r": "10" }], ["path", { "d": "M12 16v-4" }], ["path", { "d": "M12 8h.01" }]], "triangle-alert": [["path", { "d": "m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3" }], ["path", { "d": "M12 9v4" }], ["path", { "d": "M12 17h.01" }]], "settings": [["path", { "d": "M9.671 4.136a2.34 2.34 0 0 1 4.659 0 2.34 2.34 0 0 0 3.319 1.915 2.34 2.34 0 0 1 2.33 4.033 2.34 2.34 0 0 0 0 3.831 2.34 2.34 0 0 1-2.33 4.033 2.34 2.34 0 0 0-3.319 1.915 2.34 2.34 0 0 1-4.659 0 2.34 2.34 0 0 0-3.32-1.915 2.34 2.34 0 0 1-2.33-4.033 2.34 2.34 0 0 0 0-3.831A2.34 2.34 0 0 1 6.35 6.051a2.34 2.34 0 0 0 3.319-1.915" }], ["circle", { "cx": "12", "cy": "12", "r": "3" }]], "user": [["path", { "d": "M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2" }], ["circle", { "cx": "12", "cy": "7", "r": "4" }]], "users": [["path", { "d": "M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" }], ["path", { "d": "M16 3.128a4 4 0 0 1 0 7.744" }], ["path", { "d": "M22 21v-2a4 4 0 0 0-3-3.87" }], ["circle", { "cx": "9", "cy": "7", "r": "4" }]], "filter": [["path", { "d": "M10 20a1 1 0 0 0 .553.895l2 1A1 1 0 0 0 14 21v-7a2 2 0 0 1 .517-1.341L21.74 4.67A1 1 0 0 0 21 3H3a1 1 0 0 0-.742 1.67l7.225 7.989A2 2 0 0 1 10 14z" }]], "ellipsis": [["circle", { "cx": "12", "cy": "12", "r": "1" }], ["circle", { "cx": "19", "cy": "12", "r": "1" }], ["circle", { "cx": "5", "cy": "12", "r": "1" }]], "external-link": [["path", { "d": "M15 3h6v6" }], ["path", { "d": "M10 14 21 3" }], ["path", { "d": "M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" }]], "copy": [["rect", { "width": "14", "height": "14", "x": "8", "y": "8", "rx": "2", "ry": "2" }], ["path", { "d": "M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2" }]], "trash-2": [["path", { "d": "M10 11v6" }], ["path", { "d": "M14 11v6" }], ["path", { "d": "M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6" }], ["path", { "d": "M3 6h18" }], ["path", { "d": "M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" }]], "pencil": [["path", { "d": "M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z" }], ["path", { "d": "m15 5 4 4" }]], "download": [["path", { "d": "M12 15V3" }], ["path", { "d": "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" }], ["path", { "d": "m7 10 5 5 5-5" }]], "upload": [["path", { "d": "M12 3v12" }], ["path", { "d": "m17 8-5-5-5 5" }], ["path", { "d": "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" }]], "calendar": [["path", { "d": "M8 2v3" }], ["path", { "d": "M16 2v3" }], ["rect", { "x": "3", "y": "3", "width": "18", "height": "18", "rx": "2" }], ["path", { "d": "M3 9h18" }]], "bell": [["path", { "d": "M10.268 21a2 2 0 0 0 3.464 0" }], ["path", { "d": "M3.262 15.326A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673C19.41 13.956 18 12.499 18 8A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326" }]], "menu": [["path", { "d": "M4 5h16" }], ["path", { "d": "M4 12h16" }], ["path", { "d": "M4 19h16" }]], "eye": [["path", { "d": "M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0" }], ["circle", { "cx": "12", "cy": "12", "r": "3" }]], "log-out": [["path", { "d": "m16 17 5-5-5-5" }], ["path", { "d": "M21 12H9" }], ["path", { "d": "M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4" }]], "circle": [["circle", { "cx": "12", "cy": "12", "r": "10" }]], "circle-dot-dashed": [["path", { "d": "M10.1 2.18a9.93 9.93 0 0 1 3.8 0" }], ["path", { "d": "M17.6 3.71a9.95 9.95 0 0 1 2.69 2.7" }], ["path", { "d": "M21.82 10.1a9.93 9.93 0 0 1 0 3.8" }], ["path", { "d": "M20.29 17.6a9.95 9.95 0 0 1-2.7 2.69" }], ["path", { "d": "M13.9 21.82a9.94 9.94 0 0 1-3.8 0" }], ["path", { "d": "M6.4 20.29a9.95 9.95 0 0 1-2.69-2.7" }], ["path", { "d": "M2.18 13.9a9.93 9.93 0 0 1 0-3.8" }], ["path", { "d": "M3.71 6.4a9.95 9.95 0 0 1 2.7-2.69" }], ["circle", { "cx": "12", "cy": "12", "r": "1" }]], "ban": [["circle", { "cx": "12", "cy": "12", "r": "10" }], ["path", { "d": "M4.929 4.929 19.07 19.071" }]], "arrow-up": [["path", { "d": "m5 12 7-7 7 7" }], ["path", { "d": "M12 19V5" }]], "arrow-down": [["path", { "d": "M12 5v14" }], ["path", { "d": "m19 12-7 7-7-7" }]], "inbox": [["polyline", { "points": "22 12 16 12 14 15 10 15 8 12 2 12" }], ["path", { "d": "M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z" }]], "pin": [["path", { "d": "M12 17v5" }], ["path", { "d": "M9 10.76a2 2 0 0 1-1.11 1.79l-1.78.9A2 2 0 0 0 5 15.24V16a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-.76a2 2 0 0 0-1.11-1.79l-1.78-.9A2 2 0 0 1 15 10.76V7a1 1 0 0 1 1-1 2 2 0 0 0 0-4H8a2 2 0 0 0 0 4 1 1 0 0 1 1 1z" }]], "pin-off": [["path", { "d": "M12 17v5" }], ["path", { "d": "M15 9.34V7a1 1 0 0 1 1-1 2 2 0 0 0 0-4H7.89" }], ["path", { "d": "m2 2 20 20" }], ["path", { "d": "M9 9v1.76a2 2 0 0 1-1.11 1.79l-1.78.9A2 2 0 0 0 5 15.24V16a1 1 0 0 0 1 1h11" }]], "eye-off": [["path", { "d": "M10.733 5.076a10.744 10.744 0 0 1 11.205 6.575 1 1 0 0 1 0 .696 10.747 10.747 0 0 1-1.444 2.49" }], ["path", { "d": "M14.084 14.158a3 3 0 0 1-4.242-4.242" }], ["path", { "d": "M17.479 17.499a10.75 10.75 0 0 1-15.417-5.151 1 1 0 0 1 0-.696 10.75 10.75 0 0 1 4.446-5.143" }], ["path", { "d": "m2 2 20 20" }]], "columns-3": [["rect", { "width": "18", "height": "18", "x": "3", "y": "3", "rx": "2" }], ["path", { "d": "M9 3v18" }], ["path", { "d": "M15 3v18" }]], "arrow-left": [["path", { "d": "m12 19-7-7 7-7" }], ["path", { "d": "M19 12H5" }]], "rotate-ccw": [["path", { "d": "M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8" }], ["path", { "d": "M3 3v5h5" }]], "house": [["path", { "d": "M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8" }], ["path", { "d": "M3 10a2 2 0 0 1 .709-1.528l7-6a2 2 0 0 1 2.582 0l7 6A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" }]], "layout-dashboard": [["rect", { "width": "7", "height": "9", "x": "3", "y": "3", "rx": "1" }], ["rect", { "width": "7", "height": "5", "x": "14", "y": "3", "rx": "1" }], ["rect", { "width": "7", "height": "9", "x": "14", "y": "12", "rx": "1" }], ["rect", { "width": "7", "height": "5", "x": "3", "y": "16", "rx": "1" }]], "folder": [["path", { "d": "M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z" }]], "chart-column": [["path", { "d": "M3 3v16a2 2 0 0 0 2 2h16" }], ["path", { "d": "M18 17V9" }], ["path", { "d": "M13 17V5" }], ["path", { "d": "M8 17v-3" }]], "file-text": [["path", { "d": "M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z" }], ["path", { "d": "M14 2v5a1 1 0 0 0 1 1h5" }], ["path", { "d": "M10 9H8" }], ["path", { "d": "M16 13H8" }], ["path", { "d": "M16 17H8" }]], "mail": [["path", { "d": "m22 7-8.991 5.727a2 2 0 0 1-2.009 0L2 7" }], ["rect", { "x": "2", "y": "4", "width": "20", "height": "16", "rx": "2" }]], "lock": [["rect", { "width": "18", "height": "11", "x": "3", "y": "11", "rx": "2", "ry": "2" }], ["path", { "d": "M7 11V7a5 5 0 0 1 10 0v4" }]], "clock": [["circle", { "cx": "12", "cy": "12", "r": "10" }], ["path", { "d": "M12 6v6l4 2" }]], "trending-up": [["path", { "d": "M16 7h6v6" }], ["path", { "d": "m22 7-8.5 8.5-5-5L2 17" }]], "trending-down": [["path", { "d": "M16 17h6v-6" }], ["path", { "d": "m22 17-8.5-8.5-5 5L2 7" }]], "image": [["rect", { "width": "18", "height": "18", "x": "3", "y": "3", "rx": "2", "ry": "2" }], ["circle", { "cx": "9", "cy": "9", "r": "2" }], ["path", { "d": "m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21" }]], "paperclip": [["path", { "d": "m16 6-8.414 8.586a2 2 0 0 0 2.829 2.829l8.414-8.586a4 4 0 1 0-5.657-5.657l-8.379 8.551a6 6 0 1 0 8.485 8.485l8.379-8.551" }]], "cloud-upload": [["path", { "d": "M12 13v8" }], ["path", { "d": "M4 14.899A7 7 0 1 1 15.71 8h1.79a4.5 4.5 0 0 1 2.5 8.242" }], ["path", { "d": "m8 17 4-4 4 4" }]], "file": [["path", { "d": "M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z" }], ["path", { "d": "M14 2v5a1 1 0 0 0 1 1h5" }]] };
209
+ var ICONS = { "check": [["path", { "d": "M20 6 9 17l-5-5" }]], "x": [["path", { "d": "M18 6 6 18" }], ["path", { "d": "m6 6 12 12" }]], "plus": [["path", { "d": "M5 12h14" }], ["path", { "d": "M12 5v14" }]], "minus": [["path", { "d": "M5 12h14" }]], "search": [["path", { "d": "m21 21-4.34-4.34" }], ["circle", { "cx": "11", "cy": "11", "r": "8" }]], "chevron-down": [["path", { "d": "m6 9 6 6 6-6" }]], "chevron-up": [["path", { "d": "m18 15-6-6-6 6" }]], "chevron-left": [["path", { "d": "m15 18-6-6 6-6" }]], "chevron-right": [["path", { "d": "m9 18 6-6-6-6" }]], "arrow-right": [["path", { "d": "M5 12h14" }], ["path", { "d": "m12 5 7 7-7 7" }]], "arrow-up-right": [["path", { "d": "M7 7h10v10" }], ["path", { "d": "M7 17 17 7" }]], "arrow-up-down": [["path", { "d": "m21 16-4 4-4-4" }], ["path", { "d": "M17 20V4" }], ["path", { "d": "m3 8 4-4 4 4" }], ["path", { "d": "M7 4v16" }]], "loader-circle": [["path", { "d": "M21 12a9 9 0 1 1-6.219-8.56" }]], "circle-alert": [["circle", { "cx": "12", "cy": "12", "r": "10" }], ["line", { "x1": "12", "x2": "12", "y1": "8", "y2": "12" }], ["line", { "x1": "12", "x2": "12.01", "y1": "16", "y2": "16" }]], "circle-check": [["circle", { "cx": "12", "cy": "12", "r": "10" }], ["path", { "d": "m16 9-5.5 5.5L8 12" }]], "info": [["circle", { "cx": "12", "cy": "12", "r": "10" }], ["path", { "d": "M12 16v-4" }], ["path", { "d": "M12 8h.01" }]], "triangle-alert": [["path", { "d": "m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3" }], ["path", { "d": "M12 9v4" }], ["path", { "d": "M12 17h.01" }]], "settings": [["path", { "d": "M9.671 4.136a2.34 2.34 0 0 1 4.659 0 2.34 2.34 0 0 0 3.319 1.915 2.34 2.34 0 0 1 2.33 4.033 2.34 2.34 0 0 0 0 3.831 2.34 2.34 0 0 1-2.33 4.033 2.34 2.34 0 0 0-3.319 1.915 2.34 2.34 0 0 1-4.659 0 2.34 2.34 0 0 0-3.32-1.915 2.34 2.34 0 0 1-2.33-4.033 2.34 2.34 0 0 0 0-3.831A2.34 2.34 0 0 1 6.35 6.051a2.34 2.34 0 0 0 3.319-1.915" }], ["circle", { "cx": "12", "cy": "12", "r": "3" }]], "user": [["path", { "d": "M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2" }], ["circle", { "cx": "12", "cy": "7", "r": "4" }]], "users": [["path", { "d": "M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" }], ["path", { "d": "M16 3.128a4 4 0 0 1 0 7.744" }], ["path", { "d": "M22 21v-2a4 4 0 0 0-3-3.87" }], ["circle", { "cx": "9", "cy": "7", "r": "4" }]], "filter": [["path", { "d": "M10 20a1 1 0 0 0 .553.895l2 1A1 1 0 0 0 14 21v-7a2 2 0 0 1 .517-1.341L21.74 4.67A1 1 0 0 0 21 3H3a1 1 0 0 0-.742 1.67l7.225 7.989A2 2 0 0 1 10 14z" }]], "ellipsis": [["circle", { "cx": "12", "cy": "12", "r": "1" }], ["circle", { "cx": "19", "cy": "12", "r": "1" }], ["circle", { "cx": "5", "cy": "12", "r": "1" }]], "external-link": [["path", { "d": "M15 3h6v6" }], ["path", { "d": "M10 14 21 3" }], ["path", { "d": "M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" }]], "copy": [["rect", { "width": "14", "height": "14", "x": "8", "y": "8", "rx": "2", "ry": "2" }], ["path", { "d": "M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2" }]], "trash-2": [["path", { "d": "M10 11v6" }], ["path", { "d": "M14 11v6" }], ["path", { "d": "M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6" }], ["path", { "d": "M3 6h18" }], ["path", { "d": "M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" }]], "pencil": [["path", { "d": "M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z" }], ["path", { "d": "m15 5 4 4" }]], "download": [["path", { "d": "M12 15V3" }], ["path", { "d": "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" }], ["path", { "d": "m7 10 5 5 5-5" }]], "upload": [["path", { "d": "M12 3v12" }], ["path", { "d": "m17 8-5-5-5 5" }], ["path", { "d": "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" }]], "calendar": [["path", { "d": "M8 2v3" }], ["path", { "d": "M16 2v3" }], ["rect", { "x": "3", "y": "3", "width": "18", "height": "18", "rx": "2" }], ["path", { "d": "M3 9h18" }]], "bell": [["path", { "d": "M10.268 21a2 2 0 0 0 3.464 0" }], ["path", { "d": "M3.262 15.326A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673C19.41 13.956 18 12.499 18 8A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326" }]], "menu": [["path", { "d": "M4 5h16" }], ["path", { "d": "M4 12h16" }], ["path", { "d": "M4 19h16" }]], "eye": [["path", { "d": "M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0" }], ["circle", { "cx": "12", "cy": "12", "r": "3" }]], "log-out": [["path", { "d": "m16 17 5-5-5-5" }], ["path", { "d": "M21 12H9" }], ["path", { "d": "M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4" }]], "circle": [["circle", { "cx": "12", "cy": "12", "r": "10" }]], "circle-dot-dashed": [["path", { "d": "M10.1 2.18a9.93 9.93 0 0 1 3.8 0" }], ["path", { "d": "M17.6 3.71a9.95 9.95 0 0 1 2.69 2.7" }], ["path", { "d": "M21.82 10.1a9.93 9.93 0 0 1 0 3.8" }], ["path", { "d": "M20.29 17.6a9.95 9.95 0 0 1-2.7 2.69" }], ["path", { "d": "M13.9 21.82a9.94 9.94 0 0 1-3.8 0" }], ["path", { "d": "M6.4 20.29a9.95 9.95 0 0 1-2.69-2.7" }], ["path", { "d": "M2.18 13.9a9.93 9.93 0 0 1 0-3.8" }], ["path", { "d": "M3.71 6.4a9.95 9.95 0 0 1 2.7-2.69" }], ["circle", { "cx": "12", "cy": "12", "r": "1" }]], "ban": [["circle", { "cx": "12", "cy": "12", "r": "10" }], ["path", { "d": "M4.929 4.929 19.07 19.071" }]], "arrow-up": [["path", { "d": "m5 12 7-7 7 7" }], ["path", { "d": "M12 19V5" }]], "arrow-down": [["path", { "d": "M12 5v14" }], ["path", { "d": "m19 12-7 7-7-7" }]], "inbox": [["polyline", { "points": "22 12 16 12 14 15 10 15 8 12 2 12" }], ["path", { "d": "M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z" }]], "pin": [["path", { "d": "M12 17v5" }], ["path", { "d": "M9 10.76a2 2 0 0 1-1.11 1.79l-1.78.9A2 2 0 0 0 5 15.24V16a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-.76a2 2 0 0 0-1.11-1.79l-1.78-.9A2 2 0 0 1 15 10.76V7a1 1 0 0 1 1-1 2 2 0 0 0 0-4H8a2 2 0 0 0 0 4 1 1 0 0 1 1 1z" }]], "pin-off": [["path", { "d": "M12 17v5" }], ["path", { "d": "M15 9.34V7a1 1 0 0 1 1-1 2 2 0 0 0 0-4H7.89" }], ["path", { "d": "m2 2 20 20" }], ["path", { "d": "M9 9v1.76a2 2 0 0 1-1.11 1.79l-1.78.9A2 2 0 0 0 5 15.24V16a1 1 0 0 0 1 1h11" }]], "eye-off": [["path", { "d": "M10.733 5.076a10.744 10.744 0 0 1 11.205 6.575 1 1 0 0 1 0 .696 10.747 10.747 0 0 1-1.444 2.49" }], ["path", { "d": "M14.084 14.158a3 3 0 0 1-4.242-4.242" }], ["path", { "d": "M17.479 17.499a10.75 10.75 0 0 1-15.417-5.151 1 1 0 0 1 0-.696 10.75 10.75 0 0 1 4.446-5.143" }], ["path", { "d": "m2 2 20 20" }]], "columns-3": [["rect", { "width": "18", "height": "18", "x": "3", "y": "3", "rx": "2" }], ["path", { "d": "M9 3v18" }], ["path", { "d": "M15 3v18" }]], "arrow-left": [["path", { "d": "m12 19-7-7 7-7" }], ["path", { "d": "M19 12H5" }]], "rotate-ccw": [["path", { "d": "M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8" }], ["path", { "d": "M3 3v5h5" }]], "house": [["path", { "d": "M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8" }], ["path", { "d": "M3 10a2 2 0 0 1 .709-1.528l7-6a2 2 0 0 1 2.582 0l7 6A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" }]], "layout-dashboard": [["rect", { "width": "7", "height": "9", "x": "3", "y": "3", "rx": "1" }], ["rect", { "width": "7", "height": "5", "x": "14", "y": "3", "rx": "1" }], ["rect", { "width": "7", "height": "9", "x": "14", "y": "12", "rx": "1" }], ["rect", { "width": "7", "height": "5", "x": "3", "y": "16", "rx": "1" }]], "folder": [["path", { "d": "M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z" }]], "chart-column": [["path", { "d": "M3 3v16a2 2 0 0 0 2 2h16" }], ["path", { "d": "M18 17V9" }], ["path", { "d": "M13 17V5" }], ["path", { "d": "M8 17v-3" }]], "file-text": [["path", { "d": "M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z" }], ["path", { "d": "M14 2v5a1 1 0 0 0 1 1h5" }], ["path", { "d": "M10 9H8" }], ["path", { "d": "M16 13H8" }], ["path", { "d": "M16 17H8" }]], "mail": [["path", { "d": "m22 7-8.991 5.727a2 2 0 0 1-2.009 0L2 7" }], ["rect", { "x": "2", "y": "4", "width": "20", "height": "16", "rx": "2" }]], "lock": [["rect", { "width": "18", "height": "11", "x": "3", "y": "11", "rx": "2", "ry": "2" }], ["path", { "d": "M7 11V7a5 5 0 0 1 10 0v4" }]], "clock": [["circle", { "cx": "12", "cy": "12", "r": "10" }], ["path", { "d": "M12 6v6l4 2" }]], "trending-up": [["path", { "d": "M16 7h6v6" }], ["path", { "d": "m22 7-8.5 8.5-5-5L2 17" }]], "trending-down": [["path", { "d": "M16 17h6v-6" }], ["path", { "d": "m22 17-8.5-8.5-5 5L2 7" }]], "image": [["rect", { "width": "18", "height": "18", "x": "3", "y": "3", "rx": "2", "ry": "2" }], ["circle", { "cx": "9", "cy": "9", "r": "2" }], ["path", { "d": "m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21" }]], "paperclip": [["path", { "d": "m16 6-8.414 8.586a2 2 0 0 0 2.829 2.829l8.414-8.586a4 4 0 1 0-5.657-5.657l-8.379 8.551a6 6 0 1 0 8.485 8.485l8.379-8.551" }]], "cloud-upload": [["path", { "d": "M12 13v8" }], ["path", { "d": "M4 14.899A7 7 0 1 1 15.71 8h1.79a4.5 4.5 0 0 1 2.5 8.242" }], ["path", { "d": "m8 17 4-4 4 4" }]], "file": [["path", { "d": "M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z" }], ["path", { "d": "M14 2v5a1 1 0 0 0 1 1h5" }]], "sun": [["circle", { "cx": "12", "cy": "12", "r": "4" }], ["path", { "d": "M12 2v2" }], ["path", { "d": "M12 20v2" }], ["path", { "d": "m4.93 4.93 1.41 1.41" }], ["path", { "d": "m17.66 17.66 1.41 1.41" }], ["path", { "d": "M2 12h2" }], ["path", { "d": "M20 12h2" }], ["path", { "d": "m6.34 17.66-1.41 1.41" }], ["path", { "d": "m19.07 4.93-1.41 1.41" }]], "moon": [["path", { "d": "M20.985 12.486a9 9 0 1 1-9.473-9.472c.405-.022.617.46.402.803a6 6 0 0 0 8.268 8.268c.344-.215.825-.004.803.401" }]], "monitor": [["rect", { "width": "20", "height": "14", "x": "2", "y": "3", "rx": "2" }], ["line", { "x1": "8", "x2": "16", "y1": "21", "y2": "21" }], ["line", { "x1": "12", "x2": "12", "y1": "17", "y2": "21" }]] };
206
210
  var SIZES = { sm: 16, md: 20, lg: 24 };
207
211
  var Icon = React2.forwardRef(function Icon2(props, ref) {
208
212
  const shapes = ICONS[props.name];
@@ -578,6 +582,10 @@ window.Aura = (() => {
578
582
  tooManyFiles: function(n2) {
579
583
  return "Up to " + n2 + " files";
580
584
  },
585
+ colorScheme: "Colour scheme",
586
+ schemeLight: "Light",
587
+ schemeDark: "Dark",
588
+ schemeSystem: "System",
581
589
  uploading: "Uploading\u2026",
582
590
  images: "Images",
583
591
  pagination: "Pagination",
@@ -666,6 +674,10 @@ window.Aura = (() => {
666
674
  tooManyFiles: function(n2) {
667
675
  return "\u0E41\u0E19\u0E1A\u0E44\u0E14\u0E49\u0E44\u0E21\u0E48\u0E40\u0E01\u0E34\u0E19 " + n2 + " \u0E44\u0E1F\u0E25\u0E4C";
668
676
  },
677
+ colorScheme: "\u0E42\u0E2B\u0E21\u0E14\u0E2A\u0E35",
678
+ schemeLight: "\u0E2A\u0E27\u0E48\u0E32\u0E07",
679
+ schemeDark: "\u0E21\u0E37\u0E14",
680
+ schemeSystem: "\u0E15\u0E32\u0E21\u0E23\u0E30\u0E1A\u0E1A",
669
681
  uploading: "\u0E01\u0E33\u0E25\u0E31\u0E07\u0E2D\u0E31\u0E1B\u0E42\u0E2B\u0E25\u0E14\u2026",
670
682
  images: "\u0E23\u0E39\u0E1B\u0E20\u0E32\u0E1E",
671
683
  pagination: "\u0E40\u0E25\u0E02\u0E2B\u0E19\u0E49\u0E32",
@@ -4159,12 +4171,13 @@ window.Aura = (() => {
4159
4171
  function css(selector) {
4160
4172
  const light = selector ? selector : ':root, [data-theme="light"]';
4161
4173
  const dark = selector ? selector + ".dark, .dark " + selector + ", " + selector + '[data-theme="dark"], [data-theme="dark"] ' + selector : '.dark, [data-theme="dark"]';
4174
+ const system = selector ? '[data-theme="system"] ' + selector + ", " + selector + '[data-theme="system"]' : '[data-theme="system"]';
4162
4175
  function block(sel, m) {
4163
4176
  return sel + " {\n" + Object.keys(m).map(function(k) {
4164
4177
  return " --aura-" + k + ": " + m[k] + ";";
4165
4178
  }).join("\n") + "\n}";
4166
4179
  }
4167
- return "/* AURA theme" + (o.name ? ' "' + o.name + '"' : "") + ": brand " + o.brand + (o.signal ? ", signal " + o.signal : "") + (o.primary === "brand" ? ", brand primary buttons" : "") + ". Load after aura.css. Generated by createTheme. */\n" + block(light, L) + "\n" + block(dark, D) + "\n";
4180
+ return "/* AURA theme" + (o.name ? ' "' + o.name + '"' : "") + ": brand " + o.brand + (o.signal ? ", signal " + o.signal : "") + (o.primary === "brand" ? ", brand primary buttons" : "") + ". Load after aura.css. Generated by createTheme. */\n" + block(light, L) + "\n" + block(dark, D) + "\n@media (prefers-color-scheme: dark) {\n" + block(system, D) + "\n}\n";
4168
4181
  }
4169
4182
  return {
4170
4183
  name: o.name || null,
@@ -4194,16 +4207,114 @@ window.Aura = (() => {
4194
4207
  return /* @__PURE__ */ React23.createElement("style", { "data-aura-theme": props.name || props.brand, dangerouslySetInnerHTML: { __html: css } });
4195
4208
  }
4196
4209
 
4197
- // src/extra.tsx
4210
+ // src/colorScheme.tsx
4198
4211
  var React24 = __toESM(require_react(), 1);
4212
+ var DEFAULT_KEY = "aura-color-scheme";
4213
+ var SCHEMES = ["light", "dark", "system"];
4214
+ var EVENT = "aura-color-scheme";
4215
+ function valid(v) {
4216
+ return typeof v === "string" && SCHEMES.indexOf(v) >= 0;
4217
+ }
4218
+ function colorSchemeScript(options) {
4219
+ const key = JSON.stringify(options && options.storageKey || DEFAULT_KEY);
4220
+ const fallback = JSON.stringify(options && options.defaultScheme || "system");
4221
+ return "(function(){try{var s=localStorage.getItem(" + key + ");if(s!=='light'&&s!=='dark'&&s!=='system')s=" + fallback + `;var d=document.documentElement;d.setAttribute("data-theme",s);var dark=s==='dark'||(s==='system'&&window.matchMedia('(prefers-color-scheme: dark)').matches);d.classList.toggle("dark",dark);}catch(e){}})();`;
4222
+ }
4223
+ function ColorSchemeScript(props) {
4224
+ return /* @__PURE__ */ React24.createElement("script", { "data-aura-color-scheme": "", dangerouslySetInnerHTML: { __html: colorSchemeScript(props) } });
4225
+ }
4226
+ function systemDark() {
4227
+ return typeof window !== "undefined" && !!window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches;
4228
+ }
4229
+ function readScheme(fallback) {
4230
+ if (typeof document === "undefined") return fallback;
4231
+ const attr = document.documentElement.getAttribute("data-theme");
4232
+ return valid(attr) ? attr : fallback;
4233
+ }
4234
+ function apply(scheme) {
4235
+ const d = document.documentElement;
4236
+ d.setAttribute("data-theme", scheme);
4237
+ d.classList.toggle("dark", scheme === "dark" || scheme === "system" && systemDark());
4238
+ }
4239
+ function useColorScheme(options) {
4240
+ const key = options && options.storageKey || DEFAULT_KEY;
4241
+ const fallback = options && options.defaultScheme || "system";
4242
+ const subscribe2 = React24.useCallback(
4243
+ function(cb) {
4244
+ const mq = window.matchMedia ? window.matchMedia("(prefers-color-scheme: dark)") : null;
4245
+ function onSystem() {
4246
+ if (readScheme(fallback) === "system") apply("system");
4247
+ cb();
4248
+ }
4249
+ if (mq) mq.addEventListener("change", onSystem);
4250
+ window.addEventListener(EVENT, cb);
4251
+ window.addEventListener("storage", cb);
4252
+ return function() {
4253
+ if (mq) mq.removeEventListener("change", onSystem);
4254
+ window.removeEventListener(EVENT, cb);
4255
+ window.removeEventListener("storage", cb);
4256
+ };
4257
+ },
4258
+ [fallback]
4259
+ );
4260
+ const snapshot = React24.useSyncExternalStore(
4261
+ subscribe2,
4262
+ function() {
4263
+ const s = readScheme(fallback);
4264
+ return s + "|" + (s === "dark" || s === "system" && systemDark() ? "dark" : "light");
4265
+ },
4266
+ function() {
4267
+ return fallback + "|light";
4268
+ }
4269
+ );
4270
+ const parts = snapshot.split("|");
4271
+ const setScheme = React24.useCallback(
4272
+ function(next) {
4273
+ if (!valid(next)) return;
4274
+ try {
4275
+ localStorage.setItem(key, next);
4276
+ } catch (e) {
4277
+ }
4278
+ apply(next);
4279
+ window.dispatchEvent(new Event(EVENT));
4280
+ },
4281
+ [key]
4282
+ );
4283
+ return { scheme: parts[0], resolved: parts[1], setScheme };
4284
+ }
4285
+ function ColorSchemeToggle(props) {
4286
+ const t = useStrings();
4287
+ const cs = useColorScheme(props);
4288
+ const names = { light: t.schemeLight, dark: t.schemeDark, system: t.schemeSystem };
4289
+ const label = props.label || t.colorScheme;
4290
+ return /* @__PURE__ */ React24.createElement(
4291
+ DropdownMenu,
4292
+ {
4293
+ label,
4294
+ trigger: /* @__PURE__ */ React24.createElement(IconButton, { icon: cs.resolved === "dark" ? "moon" : "sun", label: label + ": " + names[cs.scheme] }),
4295
+ items: SCHEMES.map(function(s) {
4296
+ return {
4297
+ label: names[s],
4298
+ checked: cs.scheme === s,
4299
+ onSelect: function() {
4300
+ cs.setScheme(s);
4301
+ }
4302
+ };
4303
+ })
4304
+ }
4305
+ );
4306
+ }
4307
+
4308
+ // src/extra.tsx
4309
+ var React25 = __toESM(require_react(), 1);
4199
4310
  var import_react_dom7 = __toESM(require_react_dom(), 1);
4200
4311
  var TONES = ["neutral", "accent", "success", "warning", "danger"];
4201
4312
  function tone(t) {
4202
4313
  return TONES.indexOf(t) >= 0 ? t : "neutral";
4203
4314
  }
4204
- var Badge = React24.forwardRef(function Badge2(props, ref) {
4315
+ var Badge = React25.forwardRef(function Badge2(props, ref) {
4205
4316
  const rest = omit(props, ["tone", "variant", "icon", "className", "children"]);
4206
- return /* @__PURE__ */ React24.createElement(
4317
+ return /* @__PURE__ */ React25.createElement(
4207
4318
  "span",
4208
4319
  {
4209
4320
  ...rest,
@@ -4216,20 +4327,20 @@ window.Aura = (() => {
4216
4327
  props.className
4217
4328
  )
4218
4329
  },
4219
- props.icon ? /* @__PURE__ */ React24.createElement(Icon, { name: props.icon, size: 12 }) : null,
4330
+ props.icon ? /* @__PURE__ */ React25.createElement(Icon, { name: props.icon, size: 12 }) : null,
4220
4331
  props.children
4221
4332
  );
4222
4333
  });
4223
- var Tag = React24.forwardRef(function Tag2(props, ref) {
4334
+ var Tag = React25.forwardRef(function Tag2(props, ref) {
4224
4335
  const t = useStrings();
4225
4336
  const selectable = props.onClick != null || props.selected != null;
4226
4337
  const rest = omit(props, ["onRemove", "selected", "icon", "className", "children", "disabled", "removeLabel"]);
4227
4338
  const inner = [
4228
- props.icon ? /* @__PURE__ */ React24.createElement(Icon, { key: "i", name: props.icon, size: 14 }) : null,
4229
- /* @__PURE__ */ React24.createElement("span", { key: "t", className: "aura-tag__text" }, props.children)
4339
+ props.icon ? /* @__PURE__ */ React25.createElement(Icon, { key: "i", name: props.icon, size: 14 }) : null,
4340
+ /* @__PURE__ */ React25.createElement("span", { key: "t", className: "aura-tag__text" }, props.children)
4230
4341
  ];
4231
4342
  if (selectable) {
4232
- return /* @__PURE__ */ React24.createElement(
4343
+ return /* @__PURE__ */ React25.createElement(
4233
4344
  "button",
4234
4345
  {
4235
4346
  ...rest,
@@ -4239,11 +4350,11 @@ window.Aura = (() => {
4239
4350
  disabled: props.disabled,
4240
4351
  className: cx("aura-tag is-selectable", props.selected && "is-selected", props.className)
4241
4352
  },
4242
- props.selected ? /* @__PURE__ */ React24.createElement(Icon, { name: "check", size: 14 }) : inner[0],
4353
+ props.selected ? /* @__PURE__ */ React25.createElement(Icon, { name: "check", size: 14 }) : inner[0],
4243
4354
  inner[1]
4244
4355
  );
4245
4356
  }
4246
- return /* @__PURE__ */ React24.createElement("span", { ...rest, ref, className: cx("aura-tag", props.disabled && "is-disabled", props.className) }, inner, props.onRemove && !props.disabled ? /* @__PURE__ */ React24.createElement(
4357
+ return /* @__PURE__ */ React25.createElement("span", { ...rest, ref, className: cx("aura-tag", props.disabled && "is-disabled", props.className) }, inner, props.onRemove && !props.disabled ? /* @__PURE__ */ React25.createElement(
4247
4358
  "button",
4248
4359
  {
4249
4360
  type: "button",
@@ -4251,15 +4362,15 @@ window.Aura = (() => {
4251
4362
  "aria-label": props.removeLabel || t.remove(typeof props.children === "string" ? props.children : ""),
4252
4363
  onClick: props.onRemove
4253
4364
  },
4254
- /* @__PURE__ */ React24.createElement(Icon, { name: "x", size: 12 })
4365
+ /* @__PURE__ */ React25.createElement(Icon, { name: "x", size: 12 })
4255
4366
  ) : null);
4256
4367
  });
4257
- var Progress = React24.forwardRef(function Progress2(props, ref) {
4368
+ var Progress = React25.forwardRef(function Progress2(props, ref) {
4258
4369
  const auto = uid(), id = props.id || auto;
4259
4370
  const max = props.max || 100, det = props.value != null;
4260
4371
  const pct = det ? Math.max(0, Math.min(100, props.value / max * 100)) : 0;
4261
4372
  const shown = props.valueLabel != null ? props.valueLabel : det ? Math.round(pct) + "%" : null;
4262
- return /* @__PURE__ */ React24.createElement(
4373
+ return /* @__PURE__ */ React25.createElement(
4263
4374
  "div",
4264
4375
  {
4265
4376
  ref,
@@ -4270,8 +4381,8 @@ window.Aura = (() => {
4270
4381
  props.className
4271
4382
  )
4272
4383
  },
4273
- props.label || props.showValue && shown ? /* @__PURE__ */ React24.createElement("div", { className: "aura-progress__head" }, props.label ? /* @__PURE__ */ React24.createElement("span", { className: "aura-progress__label", id: id + "-label" }, props.label) : /* @__PURE__ */ React24.createElement("span", null), props.showValue && shown ? /* @__PURE__ */ React24.createElement("span", { className: "aura-progress__value" }, shown) : null) : null,
4274
- /* @__PURE__ */ React24.createElement(
4384
+ props.label || props.showValue && shown ? /* @__PURE__ */ React25.createElement("div", { className: "aura-progress__head" }, props.label ? /* @__PURE__ */ React25.createElement("span", { className: "aura-progress__label", id: id + "-label" }, props.label) : /* @__PURE__ */ React25.createElement("span", null), props.showValue && shown ? /* @__PURE__ */ React25.createElement("span", { className: "aura-progress__value" }, shown) : null) : null,
4385
+ /* @__PURE__ */ React25.createElement(
4275
4386
  "div",
4276
4387
  {
4277
4388
  className: cx("aura-progress__track", !det && "is-indeterminate"),
@@ -4283,18 +4394,18 @@ window.Aura = (() => {
4283
4394
  "aria-valuenow": det ? props.value : void 0,
4284
4395
  "aria-valuetext": det && props.valueLabel != null ? String(props.valueLabel) : void 0
4285
4396
  },
4286
- /* @__PURE__ */ React24.createElement("span", { className: "aura-progress__bar", style: det ? { width: pct + "%" } : void 0 })
4397
+ /* @__PURE__ */ React25.createElement("span", { className: "aura-progress__bar", style: det ? { width: pct + "%" } : void 0 })
4287
4398
  ),
4288
- props.hint ? /* @__PURE__ */ React24.createElement("p", { className: "aura-progress__hint" }, props.hint) : null
4399
+ props.hint ? /* @__PURE__ */ React25.createElement("p", { className: "aura-progress__hint" }, props.hint) : null
4289
4400
  );
4290
4401
  });
4291
- var Skeleton = React24.forwardRef(function Skeleton2(props, ref) {
4402
+ var Skeleton = React25.forwardRef(function Skeleton2(props, ref) {
4292
4403
  const v = props.variant || "text";
4293
4404
  if (v === "text" && (props.lines || 1) > 1) {
4294
4405
  const n2 = props.lines, rows = [];
4295
4406
  for (let i = 0; i < n2; i++)
4296
- rows.push(/* @__PURE__ */ React24.createElement("span", { key: i, className: "aura-skel aura-skel--text", style: { width: i === n2 - 1 ? "60%" : "100%" } }));
4297
- return /* @__PURE__ */ React24.createElement(
4407
+ rows.push(/* @__PURE__ */ React25.createElement("span", { key: i, className: "aura-skel aura-skel--text", style: { width: i === n2 - 1 ? "60%" : "100%" } }));
4408
+ return /* @__PURE__ */ React25.createElement(
4298
4409
  "span",
4299
4410
  {
4300
4411
  ref,
@@ -4309,20 +4420,20 @@ window.Aura = (() => {
4309
4420
  if (v === "circle") {
4310
4421
  style.width = style.height = props.size || props.width || 40;
4311
4422
  }
4312
- return /* @__PURE__ */ React24.createElement("span", { ref, "aria-hidden": true, className: cx("aura-skel", "aura-skel--" + v, props.className), style });
4423
+ return /* @__PURE__ */ React25.createElement("span", { ref, "aria-hidden": true, className: cx("aura-skel", "aura-skel--" + v, props.className), style });
4313
4424
  });
4314
- var EmptyState = React24.forwardRef(function EmptyState2(props, ref) {
4425
+ var EmptyState = React25.forwardRef(function EmptyState2(props, ref) {
4315
4426
  const HT = "h" + (props.headingLevel || 3);
4316
- return /* @__PURE__ */ React24.createElement(
4427
+ return /* @__PURE__ */ React25.createElement(
4317
4428
  "div",
4318
4429
  {
4319
4430
  ref,
4320
4431
  className: cx("aura-empty", props.size === "sm" && "is-sm", props.bordered && "is-bordered", props.className)
4321
4432
  },
4322
- /* @__PURE__ */ React24.createElement("span", { className: "aura-empty__icon", "aria-hidden": true }, /* @__PURE__ */ React24.createElement(Icon, { name: props.icon || "inbox", size: props.size === "sm" ? "md" : "lg" })),
4323
- /* @__PURE__ */ React24.createElement(HT, { className: "aura-empty__title" }, props.title),
4324
- props.description ? /* @__PURE__ */ React24.createElement("p", { className: "aura-empty__text" }, props.description) : null,
4325
- props.action ? /* @__PURE__ */ React24.createElement("div", { className: "aura-empty__action" }, props.action) : null
4433
+ /* @__PURE__ */ React25.createElement("span", { className: "aura-empty__icon", "aria-hidden": true }, /* @__PURE__ */ React25.createElement(Icon, { name: props.icon || "inbox", size: props.size === "sm" ? "md" : "lg" })),
4434
+ /* @__PURE__ */ React25.createElement(HT, { className: "aura-empty__title" }, props.title),
4435
+ props.description ? /* @__PURE__ */ React25.createElement("p", { className: "aura-empty__text" }, props.description) : null,
4436
+ props.action ? /* @__PURE__ */ React25.createElement("div", { className: "aura-empty__action" }, props.action) : null
4326
4437
  );
4327
4438
  });
4328
4439
  function pageList(page, count, sib) {
@@ -4344,7 +4455,7 @@ window.Aura = (() => {
4344
4455
  if (count > 1) out.push(count);
4345
4456
  return out;
4346
4457
  }
4347
- var Pagination = React24.forwardRef(function Pagination2(props, ref) {
4458
+ var Pagination = React25.forwardRef(function Pagination2(props, ref) {
4348
4459
  const t = useStrings();
4349
4460
  const count = Math.max(1, props.pageCount || 1);
4350
4461
  const st = useMaybeControlled(props.page, props.defaultPage || 1, props.onChange);
@@ -4362,7 +4473,7 @@ window.Aura = (() => {
4362
4473
  },
4363
4474
  extra
4364
4475
  );
4365
- return link ? /* @__PURE__ */ React24.createElement(
4476
+ return link ? /* @__PURE__ */ React25.createElement(
4366
4477
  "a",
4367
4478
  {
4368
4479
  href: link(p),
@@ -4375,7 +4486,7 @@ window.Aura = (() => {
4375
4486
  ...common
4376
4487
  },
4377
4488
  label
4378
- ) : /* @__PURE__ */ React24.createElement(
4489
+ ) : /* @__PURE__ */ React25.createElement(
4379
4490
  "button",
4380
4491
  {
4381
4492
  type: "button",
@@ -4387,7 +4498,7 @@ window.Aura = (() => {
4387
4498
  label
4388
4499
  );
4389
4500
  }
4390
- return /* @__PURE__ */ React24.createElement("nav", { ref, className: cx("aura-pagination", props.className), "aria-label": props.label || t.pagination }, /* @__PURE__ */ React24.createElement(
4501
+ return /* @__PURE__ */ React25.createElement("nav", { ref, className: cx("aura-pagination", props.className), "aria-label": props.label || t.pagination }, /* @__PURE__ */ React25.createElement(
4391
4502
  IconButton,
4392
4503
  {
4393
4504
  icon: "chevron-left",
@@ -4397,9 +4508,9 @@ window.Aura = (() => {
4397
4508
  go(page - 1);
4398
4509
  }
4399
4510
  }
4400
- ), /* @__PURE__ */ React24.createElement("ol", { className: "aura-pagination__list" }, pageList(page, count, props.siblingCount == null ? 1 : props.siblingCount).map(function(p) {
4401
- return typeof p === "number" ? /* @__PURE__ */ React24.createElement("li", { key: p }, item(p, p)) : /* @__PURE__ */ React24.createElement("li", { key: p, className: "aura-pagination__gap", "aria-hidden": true }, "\u2026");
4402
- })), /* @__PURE__ */ React24.createElement("span", { className: "aura-pagination__compact", "aria-hidden": true }, t.page(page, count)), /* @__PURE__ */ React24.createElement(
4511
+ ), /* @__PURE__ */ React25.createElement("ol", { className: "aura-pagination__list" }, pageList(page, count, props.siblingCount == null ? 1 : props.siblingCount).map(function(p) {
4512
+ return typeof p === "number" ? /* @__PURE__ */ React25.createElement("li", { key: p }, item(p, p)) : /* @__PURE__ */ React25.createElement("li", { key: p, className: "aura-pagination__gap", "aria-hidden": true }, "\u2026");
4513
+ })), /* @__PURE__ */ React25.createElement("span", { className: "aura-pagination__compact", "aria-hidden": true }, t.page(page, count)), /* @__PURE__ */ React25.createElement(
4403
4514
  IconButton,
4404
4515
  {
4405
4516
  icon: "chevron-right",
@@ -4411,7 +4522,7 @@ window.Aura = (() => {
4411
4522
  }
4412
4523
  ));
4413
4524
  });
4414
- var Accordion = React24.forwardRef(function Accordion2(props, ref) {
4525
+ var Accordion = React25.forwardRef(function Accordion2(props, ref) {
4415
4526
  const auto = uid(), base = props.id || auto;
4416
4527
  const multiple = props.type === "multiple";
4417
4528
  const st = useMaybeControlled(
@@ -4449,9 +4560,9 @@ window.Aura = (() => {
4449
4560
  n2.focus();
4450
4561
  }
4451
4562
  }
4452
- return /* @__PURE__ */ React24.createElement("div", { ref, className: cx("aura-accordion", props.className), onKeyDown: onKey }, items.map(function(it) {
4563
+ return /* @__PURE__ */ React25.createElement("div", { ref, className: cx("aura-accordion", props.className), onKeyDown: onKey }, items.map(function(it) {
4453
4564
  const on = open.indexOf(it.id) >= 0, bid = base + "-btn-" + it.id, pid = base + "-panel-" + it.id;
4454
- return /* @__PURE__ */ React24.createElement("div", { key: it.id, className: cx("aura-accordion__item", on && "is-open") }, /* @__PURE__ */ React24.createElement(HT, { className: "aura-accordion__heading" }, /* @__PURE__ */ React24.createElement(
4565
+ return /* @__PURE__ */ React25.createElement("div", { key: it.id, className: cx("aura-accordion__item", on && "is-open") }, /* @__PURE__ */ React25.createElement(HT, { className: "aura-accordion__heading" }, /* @__PURE__ */ React25.createElement(
4455
4566
  "button",
4456
4567
  {
4457
4568
  type: "button",
@@ -4463,10 +4574,10 @@ window.Aura = (() => {
4463
4574
  toggle(it.id);
4464
4575
  }
4465
4576
  },
4466
- it.icon ? /* @__PURE__ */ React24.createElement(Icon, { name: it.icon, className: "aura-accordion__lead" }) : null,
4467
- /* @__PURE__ */ React24.createElement("span", { className: "aura-accordion__title" }, it.title, it.description ? /* @__PURE__ */ React24.createElement("span", { className: "aura-accordion__desc" }, it.description) : null),
4468
- /* @__PURE__ */ React24.createElement(Icon, { name: "chevron-down", className: "aura-accordion__chevron" })
4469
- )), /* @__PURE__ */ React24.createElement("div", { id: pid, role: "region", "aria-labelledby": bid, className: "aura-accordion__panel", hidden: !on }, it.content));
4577
+ it.icon ? /* @__PURE__ */ React25.createElement(Icon, { name: it.icon, className: "aura-accordion__lead" }) : null,
4578
+ /* @__PURE__ */ React25.createElement("span", { className: "aura-accordion__title" }, it.title, it.description ? /* @__PURE__ */ React25.createElement("span", { className: "aura-accordion__desc" }, it.description) : null),
4579
+ /* @__PURE__ */ React25.createElement(Icon, { name: "chevron-down", className: "aura-accordion__chevron" })
4580
+ )), /* @__PURE__ */ React25.createElement("div", { id: pid, role: "region", "aria-labelledby": bid, className: "aura-accordion__panel", hidden: !on }, it.content));
4470
4581
  }));
4471
4582
  });
4472
4583
  function position(anchor, pop, placement) {
@@ -4478,13 +4589,13 @@ window.Aura = (() => {
4478
4589
  const left = align === "end" ? r.right - pw : align === "center" ? r.left + r.width / 2 - pw / 2 : r.left;
4479
4590
  return { top: Math.max(8, top), left: Math.max(8, Math.min(left, vw - pw - 8)), side };
4480
4591
  }
4481
- var Popover = React24.forwardRef(function Popover2(props, ref) {
4592
+ var Popover = React25.forwardRef(function Popover2(props, ref) {
4482
4593
  const t = useStrings();
4483
4594
  const auto = uid(), id = props.id || auto;
4484
4595
  const st = useMaybeControlled(props.open, !!props.defaultOpen, props.onOpenChange);
4485
4596
  const open = !!st[0];
4486
- const wrap = React24.useRef(null), pop = React24.useRef(null), popMerged = useMergedRef(ref, pop);
4487
- const pos = React24.useState(null), mounted = useMounted();
4597
+ const wrap = React25.useRef(null), pop = React25.useRef(null), popMerged = useMergedRef(ref, pop);
4598
+ const pos = React25.useState(null), mounted = useMounted();
4488
4599
  function trigger() {
4489
4600
  return wrap.current && (wrap.current.querySelector('button, [role="button"], a, input') || wrap.current.firstElementChild);
4490
4601
  }
@@ -4511,7 +4622,7 @@ window.Aura = (() => {
4511
4622
  },
4512
4623
  [open, mounted, props.placement]
4513
4624
  );
4514
- React24.useEffect(
4625
+ React25.useEffect(
4515
4626
  function() {
4516
4627
  if (!open || !mounted) return;
4517
4628
  if (props.autoFocus !== false && pop.current) {
@@ -4530,9 +4641,9 @@ window.Aura = (() => {
4530
4641
  },
4531
4642
  [open, mounted]
4532
4643
  );
4533
- const child = React24.Children.only(props.trigger);
4644
+ const child = React25.Children.only(props.trigger);
4534
4645
  const panel = open && mounted ? (0, import_react_dom7.createPortal)(
4535
- /* @__PURE__ */ React24.createElement(
4646
+ /* @__PURE__ */ React25.createElement(
4536
4647
  "div",
4537
4648
  {
4538
4649
  ref: popMerged,
@@ -4554,7 +4665,7 @@ window.Aura = (() => {
4554
4665
  } else trapTab(e, pop.current);
4555
4666
  }
4556
4667
  },
4557
- props.title ? /* @__PURE__ */ React24.createElement("div", { className: "aura-popover__head" }, /* @__PURE__ */ React24.createElement("p", { className: "aura-popover__title", id: id + "-title" }, props.title), /* @__PURE__ */ React24.createElement(
4668
+ props.title ? /* @__PURE__ */ React25.createElement("div", { className: "aura-popover__head" }, /* @__PURE__ */ React25.createElement("p", { className: "aura-popover__title", id: id + "-title" }, props.title), /* @__PURE__ */ React25.createElement(
4558
4669
  IconButton,
4559
4670
  {
4560
4671
  icon: "x",
@@ -4564,7 +4675,7 @@ window.Aura = (() => {
4564
4675
  }
4565
4676
  }
4566
4677
  )) : null,
4567
- /* @__PURE__ */ React24.createElement("div", { className: "aura-popover__body" }, typeof props.children === "function" ? props.children({
4678
+ /* @__PURE__ */ React25.createElement("div", { className: "aura-popover__body" }, typeof props.children === "function" ? props.children({
4568
4679
  close: function() {
4569
4680
  close(true);
4570
4681
  }
@@ -4572,7 +4683,7 @@ window.Aura = (() => {
4572
4683
  ),
4573
4684
  document.body
4574
4685
  ) : null;
4575
- return /* @__PURE__ */ React24.createElement("span", { ref: wrap, className: "aura-popover-anchor" }, React24.cloneElement(child, {
4686
+ return /* @__PURE__ */ React25.createElement("span", { ref: wrap, className: "aura-popover-anchor" }, React25.cloneElement(child, {
4576
4687
  onClick: function(e) {
4577
4688
  if (child.props.onClick) child.props.onClick(e);
4578
4689
  st[1](!open);
package/components/aura.components.css CHANGED
@@ -21,7 +21,9 @@
21
21
  justify-content: center;
22
22
  gap: var(--aura-space-2);
23
23
  cursor: pointer;
24
- transition: all var(--aura-duration-fast) cubic-bezier(0.4, 0, 0.2, 1);
24
+ transition-property: background-color, color, border-color, box-shadow, transform, opacity;
25
+ transition-duration: var(--aura-duration-fast);
26
+ transition-timing-function: var(--aura-ease);
25
27
  }
26
28
  .aura-btn:active { transform: scale(0.98); }
27
29
  .aura-btn:disabled { opacity: var(--aura-disabled-opacity); pointer-events: none; }
@@ -871,9 +873,9 @@ button.aura-stat { font: inherit; width: 100%; cursor: pointer; }
871
873
  .aura-progress--warning .aura-progress__bar { background: var(--aura-alert-warning-fg); }
872
874
  .aura-progress--danger .aura-progress__bar { background: var(--aura-fg-danger); }
873
875
  .aura-progress--neutral .aura-progress__bar { background: var(--aura-fg-secondary); }
874
- .aura-progress__track.is-indeterminate .aura-progress__bar { width: 35%; animation: aura-progress-slide 1.4s var(--aura-ease) infinite; }
876
+ .aura-progress__track.is-indeterminate .aura-progress__bar { width: 35%; animation: aura-progress-slide var(--aura-duration-pulse) var(--aura-ease) infinite; }
875
877
  @keyframes aura-progress-slide { from { left: -35%; } to { left: 100%; } }
876
- @media (prefers-reduced-motion: reduce) { .aura-progress__track.is-indeterminate .aura-progress__bar { animation-duration: 4.2s; } }
878
+ @media (prefers-reduced-motion: reduce) { .aura-progress__track.is-indeterminate .aura-progress__bar { animation-duration: calc(var(--aura-duration-pulse) * 3); } }
877
879
  .aura-progress__hint { margin: 0; font-size: 12px; color: var(--aura-fg-secondary); }
878
880
 
879
881
  /* ---------- Skeleton ---------- */
package/components/index.d.ts CHANGED
@@ -117,7 +117,7 @@ export interface DataTableProps {
117
117
  stackBelow?: number;
118
118
  className?: string;
119
119
  }
120
- export type IconName = "check" | "x" | "plus" | "minus" | "search" | "chevron-down" | "chevron-up" | "chevron-left" | "chevron-right" | "arrow-right" | "arrow-up-right" | "arrow-up-down" | "loader-circle" | "circle-alert" | "circle-check" | "info" | "triangle-alert" | "settings" | "user" | "users" | "filter" | "ellipsis" | "external-link" | "copy" | "trash-2" | "pencil" | "download" | "upload" | "calendar" | "bell" | "menu" | "eye" | "log-out" | "circle" | "circle-dot-dashed" | "ban" | "arrow-up" | "arrow-down" | "inbox" | "pin" | "pin-off" | "eye-off" | "columns-3" | "arrow-left" | "rotate-ccw" | "house" | "layout-dashboard" | "folder" | "chart-column" | "file-text" | "mail" | "lock" | "clock" | "trending-up" | "trending-down" | "image" | "paperclip" | "cloud-upload" | "file";
120
+ export type IconName = "check" | "x" | "plus" | "minus" | "search" | "chevron-down" | "chevron-up" | "chevron-left" | "chevron-right" | "arrow-right" | "arrow-up-right" | "arrow-up-down" | "loader-circle" | "circle-alert" | "circle-check" | "info" | "triangle-alert" | "settings" | "user" | "users" | "filter" | "ellipsis" | "external-link" | "copy" | "trash-2" | "pencil" | "download" | "upload" | "calendar" | "bell" | "menu" | "eye" | "log-out" | "circle" | "circle-dot-dashed" | "ban" | "arrow-up" | "arrow-down" | "inbox" | "pin" | "pin-off" | "eye-off" | "columns-3" | "arrow-left" | "rotate-ccw" | "house" | "layout-dashboard" | "folder" | "chart-column" | "file-text" | "mail" | "lock" | "clock" | "trending-up" | "trending-down" | "image" | "paperclip" | "cloud-upload" | "file" | "sun" | "moon" | "monitor";
121
121
  /** Lucide stroke icon drawn inline in currentColor. */
122
122
  export interface IconProps {
123
123
  name: IconName;
@@ -929,6 +929,10 @@ export interface AuraStrings {
929
929
  fileTooBig: (max?: number | string) => string;
930
930
  fileWrongType: string;
931
931
  tooManyFiles: (n: number | string) => string;
932
+ colorScheme: string;
933
+ schemeLight: string;
934
+ schemeDark: string;
935
+ schemeSystem: string;
932
936
  uploading: string;
933
937
  images: string;
934
938
  pagination: string;
@@ -970,6 +974,32 @@ export interface ThemeStyleProps extends ThemeOptions {
970
974
  selector?: string;
971
975
  }
972
976
  export declare function ThemeStyle(props: ThemeStyleProps): React$1.ReactElement;
977
+ /** `system` follows the operating system and changes with it. */
978
+ export type ColorScheme = "light" | "dark" | "system";
979
+ export interface ColorSchemeOptions {
980
+ /** localStorage key for the choice. Default `aura-color-scheme`. */
981
+ storageKey?: string;
982
+ /** Used when nothing is saved. Default `system`. */
983
+ defaultScheme?: ColorScheme;
984
+ }
985
+ /** The script ColorSchemeScript renders, as a string — for frameworks that want it in a raw <head> template. */
986
+ export declare function colorSchemeScript(options?: ColorSchemeOptions): string;
987
+ /** Put in <head>: applies the saved colour scheme before the page paints. Server-rendering safe. */
988
+ export declare function ColorSchemeScript(props: ColorSchemeOptions): React$1.ReactElement;
989
+ /** Current colour scheme and a setter. `resolved` is what is on screen (system resolved to light or dark). */
990
+ export interface ColorSchemeState {
991
+ scheme: ColorScheme;
992
+ resolved: "light" | "dark";
993
+ setScheme: (scheme: ColorScheme) => void;
994
+ }
995
+ /** Read and change the colour scheme. Every component using it stays in sync, and `system` follows OS changes. */
996
+ export declare function useColorScheme(options?: ColorSchemeOptions): ColorSchemeState;
997
+ export interface ColorSchemeToggleProps extends ColorSchemeOptions {
998
+ /** Accessible name of the button. Default: the built-in "Colour scheme" label. */
999
+ label?: string;
1000
+ }
1001
+ /** Icon button with a menu: Light, Dark, System. Shows a sun or a moon for what is on screen. */
1002
+ export declare function ColorSchemeToggle(props: ColorSchemeToggleProps): React$1.ReactElement;
973
1003
  export declare const Badge: React$1.ForwardRefExoticComponent<BadgeProps & React$1.RefAttributes<HTMLSpanElement>>;
974
1004
  export declare const Tag: React$1.ForwardRefExoticComponent<TagProps & React$1.RefAttributes<HTMLElement>>;
975
1005
  export declare const Progress: React$1.ForwardRefExoticComponent<ProgressProps & React$1.RefAttributes<HTMLDivElement>>;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@jirawatpyk/aura-tokens",
3
- "version": "4.5.1",
3
+ "version": "4.6.1",
4
4
  "description": "AURA Design System — tokens (CSS variables, Tailwind preset, Figma variables), theme contrast checks and token lint.",
5
5
  "main": "tailwind.tokens.cjs",
6
6
  "types": "components/index.d.ts",
package/scripts/lint-tokens.js CHANGED
@@ -1,5 +1,7 @@
1
1
  #!/usr/bin/env node
2
- /* Token lint — fails when source files hard-code colours instead of AURA tokens.
2
+ /* Token lint — fails when source files hard-code colours instead of AURA tokens, or (CSS) motion:
3
+ * a transition/animation must take its duration and easing from --aura-duration-* / --aura-ease / --aura-spring
4
+ * (`linear` is allowed: it's for spinners and progress, not a feel).
3
5
  * Usage: node scripts/lint-tokens.js [dir] (default: ./src) */
4
6
  const fs = require('fs');
5
7
  const path = require('path');
@@ -7,6 +9,8 @@ const dir = path.resolve(process.argv[2] || path.join(process.cwd(), 'src'));
7
9
  const ALLOW = /(aura\.css|aura\.components\.css|aura\.bundle\.js|tokens\.json|tailwind\.tokens\.cjs|figma-variables\.csv)$/;
8
10
  const EXT = /\.(tsx?|jsx?|css|scss|mdx)$/;
9
11
  const COLOUR = /#(?:[0-9a-f]{8}|[0-9a-f]{6}|[0-9a-f]{3,4})\b|\b(?:rgba?|hsla?)\(\s*\d|\b(?:bg|text|border|ring|fill|stroke)-\[(?:#|rgb|hsl)/gi;
12
+ const MOTION_PROP = /\b(?:transition|animation)(?:-duration|-timing-function|-delay)?\s*:/i;
13
+ const MOTION_RAW = /(?:^|[\s,:(])(?:\d*\.?\d+m?s)\b|cubic-bezier\(|\bease(?:-in-out|-in|-out)?\b/gi;
10
14
  const violations = [];
11
15
  function scan(d) {
12
16
  if (!fs.existsSync(d)) return;
@@ -21,12 +25,16 @@ function scan(d) {
21
25
  text.split('\n').forEach((line, i) => {
22
26
  const m = line.match(COLOUR);
23
27
  if (m) violations.push(`${path.relative(process.cwd(), full)}:${i + 1} ${m.join(', ')}`);
28
+ if (/\.s?css$/.test(f) && MOTION_PROP.test(line)) {
29
+ const raw = line.replace(/var\([^)]*\)/g, '').match(MOTION_RAW);
30
+ if (raw) violations.push(`${path.relative(process.cwd(), full)}:${i + 1} motion ${raw.map((s) => s.trim()).join(', ')} — use --aura-duration-* / --aura-ease`);
31
+ }
24
32
  });
25
33
  }
26
34
  }
27
35
  scan(dir);
28
36
  if (violations.length) {
29
- console.error(`Token lint FAIL: ${violations.length} hard-coded colour(s) — use semantic tokens\n ` + violations.join('\n '));
37
+ console.error(`Token lint FAIL: ${violations.length} hard-coded colour(s) or motion value(s) — use tokens\n ` + violations.join('\n '));
30
38
  process.exit(1);
31
39
  }
32
- console.log(`Token lint OK — no hard-coded colours in ${path.relative(process.cwd(), dir) || '.'}`);
40
+ console.log(`Token lint OK — no hard-coded colours or motion in ${path.relative(process.cwd(), dir) || '.'}`);
package/tokens.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
- "version": "4.5.1",
2
+ "version": "4.6.1",
3
3
  "meta": {
4
4
  "name": "AURA Design System",
5
5
  "tier": "3-tier",
@@ -481,4 +481,4 @@
481
481
  "popover-max-height": "Max height of Combobox listbox and DatePicker popover lists. ADDED 4.2.",
482
482
  "fg-positive": "Rising-and-good numbers (Stat change, positive deltas) on aura-bg-surface / -canvas. Never on lime fills. ADDED 4.3."
483
483
  }
484
- }
484
+ }