@jirawatpyk/aura-react 4.5.0 → 4.6.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 (32) hide show
  1. package/README.md +19 -4
  2. package/dist/aura.bundle.js +2644 -2043
  3. package/dist/cjs/index.cjs +2642 -2043
  4. package/dist/esm/Button.js +9 -9
  5. package/dist/esm/Checkbox.js +41 -33
  6. package/dist/esm/Combobox.js +143 -125
  7. package/dist/esm/DataTable.js +629 -495
  8. package/dist/esm/DatePicker.js +378 -305
  9. package/dist/esm/Dialog.js +48 -59
  10. package/dist/esm/DropdownMenu.js +9 -12
  11. package/dist/esm/FileUpload.js +91 -73
  12. package/dist/esm/Icon.js +27 -22
  13. package/dist/esm/IconButton.js +13 -9
  14. package/dist/esm/Menu.js +78 -66
  15. package/dist/esm/Stat.js +9 -26
  16. package/dist/esm/StatusPill.js +12 -13
  17. package/dist/esm/Surface.js +17 -13
  18. package/dist/esm/ThemeStyle.js +9 -5
  19. package/dist/esm/TimePicker.js +155 -127
  20. package/dist/esm/colorScheme.js +106 -0
  21. package/dist/esm/extra.js +270 -186
  22. package/dist/esm/feedback.js +112 -84
  23. package/dist/esm/forms.js +144 -113
  24. package/dist/esm/index.js +5 -0
  25. package/dist/esm/internal.js +33 -23
  26. package/dist/esm/layout.js +113 -128
  27. package/dist/esm/layout2.js +67 -45
  28. package/dist/esm/locale.js +23 -9
  29. package/dist/esm/overlay.js +21 -18
  30. package/dist/esm/theme.js +103 -50
  31. package/dist/index.d.ts +37 -7
  32. package/package.json +6 -3
package/README.md CHANGED
@@ -29,7 +29,7 @@ One HTML file, no install — the packages are on npmjs, so jsDelivr serves them
29
29
  ## Install
30
30
 
31
31
  ```bash
32
- npm i @jirawatpyk/aura-react @jirawatpyk/aura-tokens # react >= 18 is a peer; import from "@jirawatpyk/aura-react"
32
+ npm i @jirawatpyk/aura-react @jirawatpyk/aura-tokens # React 18 or 19; import from "@jirawatpyk/aura-react"
33
33
  # or under the short names the docs use (imports stay `@aura/...`):
34
34
  npm i @aura/react@npm:@jirawatpyk/aura-react @aura/tokens@npm:@jirawatpyk/aura-tokens
35
35
  ```
@@ -65,7 +65,21 @@ export default function Root() {
65
65
 
66
66
  ## Components (43)
67
67
 
68
- Actions: Button, IconButton, Menu, DropdownMenu, Tag · Forms: TextField, Textarea, Select, RadioGroup, Checkbox, Switch, Combobox, FileUpload (+ `formatBytes`) · Dates & times: DatePicker, DateRangePicker, Calendar, TimePicker (+ `formatDate`, `parseDate`, `parseTime`) · Feedback: Alert, Toaster/`toast()`, Tooltip, StatusPill, Badge, Progress, Skeleton, EmptyState · Overlays: Dialog, Drawer, Popover · Data: DataTable, Stat · Layout: AppShell, Container, Stack, Grid, Accordion, Pagination, Card, Tabs, SideNav, Breadcrumb, Avatar, Surface, Icon · Hooks: `useBreakpoint`, `useResponsive`, `breakpoints`, `useAuraLocale`.
68
+ Actions: Button, IconButton, Menu, DropdownMenu, Tag · Forms: TextField, Textarea, Select, RadioGroup, Checkbox, Switch, Combobox, FileUpload (+ `formatBytes`) · Dates & times: DatePicker, DateRangePicker, Calendar, TimePicker (+ `formatDate`, `parseDate`, `parseTime`) · Feedback: Alert, Toaster/`toast()`, Tooltip, StatusPill, Badge, Progress, Skeleton, EmptyState · Overlays: Dialog, Drawer, Popover · Data: DataTable, Stat · Layout: AppShell, Container, Stack, Grid, Accordion, Pagination, Card, Tabs, SideNav, Breadcrumb, Avatar, Surface, Icon · Theme: ColorSchemeToggle, ColorSchemeScript, `useColorScheme`, ThemeStyle/`createTheme` · Hooks: `useBreakpoint`, `useResponsive`, `breakpoints`, `useAuraLocale`.
69
+
70
+ ## Light and dark
71
+
72
+ The tokens carry both schemes; `<html data-theme="light|dark|system">` picks one (`system` follows the OS in pure CSS).
73
+
74
+ ```tsx
75
+ <html lang="th" data-theme="system" suppressHydrationWarning>
76
+ <head><ColorSchemeScript /></head> {/* applies the saved choice before first paint — no flash */}
77
+ ...
78
+ <ColorSchemeToggle /> {/* Light / Dark / System menu; saved in localStorage */}
79
+ const { scheme, resolved, setScheme } = useColorScheme();
80
+ ```
81
+
82
+ Tailwind's `dark:` variant keeps working: the `.dark` class on `<html>` is kept in step.
69
83
 
70
84
  ## Refs and forms
71
85
 
@@ -89,12 +103,13 @@ Portals (Dialog, Drawer, menus, pickers, toasts) wait until after hydration; `us
89
103
  npm run build # dist/ (ESM, CJS, IIFE, CSS, types)
90
104
  npm run test:ssr # server-render every component
91
105
  npm run typecheck # tsc --strict over src/, then types-test/usage.tsx against the public API
92
- npm run test:pilots # builds the pilots + 4 brand themes, then 37 behaviour/axe checks at 1440/820/390px (Playwright for Python, axe-core)
106
+ npm run size # gzip size of what projects import, against size-budgets.json
107
+ npm run test:pilots # builds the pilots + 4 brand themes, then 37 behaviour/axe checks at 1440/820/390px (Playwright for Python, axe-core)
93
108
  ```
94
109
 
95
110
  ## Source
96
111
 
97
- `src/` is TypeScript (strict). Public prop types live in `src/types.ts` with their docs; each component imports its props from there and `forwardRef`s with them, so the published `dist/index.d.ts` is generated from the code and can't drift from it. Components still use `React.createElement` (`h`) — moving them to JSX is the next step.
112
+ `src/` is TypeScript (strict) and JSX, formatted with Prettier (`npm run format`). Public prop types live in `src/types.ts` with their docs; each component imports its props from there and `forwardRef`s with them, so the published `dist/index.d.ts` is generated from the code and can't drift from it. The build compiles JSX to `React.createElement` (classic runtime), so the `window.Aura` script needs only `window.React`.
98
113
 
99
114
  ## Pilots
100
115