@jirawatpyk/aura-react 4.9.0 → 4.11.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.
- package/README.md +17 -2
- package/dist/aura.bundle.js +910 -463
- package/dist/cjs/index.cjs +910 -463
- package/dist/esm/Breadcrumb.js +3 -2
- package/dist/esm/Button.js +26 -7
- package/dist/esm/DataTable.js +176 -94
- package/dist/esm/DatePicker.js +88 -24
- package/dist/esm/Icon.js +12 -1
- package/dist/esm/IconButton.js +2 -2
- package/dist/esm/Pagination.js +3 -2
- package/dist/esm/SideNav.js +116 -10
- package/dist/esm/Stat.js +7 -3
- package/dist/esm/Switch.js +27 -15
- package/dist/esm/colorScheme.js +8 -1
- package/dist/esm/locale.js +109 -2
- package/dist/esm/theme.js +38 -2
- package/dist/index.d.ts +76 -34
- package/dist/styles.css +71 -5
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -67,13 +67,28 @@ export default function Root() {
|
|
|
67
67
|
|
|
68
68
|
Actions: Button, IconButton, Menu, DropdownMenu, Tag · Forms: TextField, Textarea, NumberField, Select, RadioGroup, Checkbox, Switch, SegmentedControl, Combobox (one value, or `multiple`), 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, Stepper, SideNav, Breadcrumb, Avatar, Surface, Icon · Theme: ColorSchemeToggle, ColorSchemeScript, `useColorScheme`, ThemeStyle/`createTheme` · Hooks: `useBreakpoint`, `useResponsive`, `breakpoints`, `useAuraLocale`.
|
|
69
69
|
|
|
70
|
+
## Router links, Swedish, motion
|
|
71
|
+
|
|
72
|
+
```tsx
|
|
73
|
+
import Link from 'next/link';
|
|
74
|
+
<AuraProvider locale="sv" linkComponent={Link}> {/* th | en | sv */}
|
|
75
|
+
```
|
|
76
|
+
|
|
77
|
+
`linkComponent` is used by Button `href`, Breadcrumb, Pagination `getHref`, Stat `href`, SideNav and DataTable row/pager links. Only `th` shows Buddhist-era years; `en` and `sv` are Gregorian (`sv` weeks start Monday). **Without a provider, components are English with Gregorian dates** — wrap Thai apps in `<AuraProvider locale="th">`. `formatDate()` has no provider to read, so it stays Thai unless you pass `locale`. Values are always Gregorian ISO dates.
|
|
78
|
+
|
|
79
|
+
Motion: skeleton pulses and indeterminate bars honour `prefers-reduced-motion: reduce` — skeletons stop (a static bar), spinners and progress bars slow to a third.
|
|
80
|
+
|
|
81
|
+
## Phones and touch
|
|
82
|
+
|
|
83
|
+
Under 640px every text control uses 16px text (iOS Safari doesn't zoom). On touch screens (`pointer: coarse`) IconButton keeps its 32px look with a 44px hit area, and Radio, Checkbox and Switch rows are at least 44px with the whole row as the target. `<Button fullWidth>` fills its row and wraps long Thai or Swedish labels.
|
|
84
|
+
|
|
70
85
|
## Light and dark
|
|
71
86
|
|
|
72
87
|
The tokens carry both schemes; `<html data-theme="light|dark|system">` picks one (`system` follows the OS in pure CSS).
|
|
73
88
|
|
|
74
89
|
```tsx
|
|
75
90
|
<html lang="th" data-theme="system" suppressHydrationWarning>
|
|
76
|
-
<head><ColorSchemeScript /></head> {/* applies the saved choice before first paint — no flash */}
|
|
91
|
+
<head><ColorSchemeScript /></head> {/* applies the saved choice before first paint — no flash; nonce={nonce} for a CSP */}
|
|
77
92
|
...
|
|
78
93
|
<ColorSchemeToggle /> {/* Light / Dark / System menu; saved in localStorage */}
|
|
79
94
|
const { scheme, resolved, setScheme } = useColorScheme();
|
|
@@ -95,7 +110,7 @@ Every component forwards `ref` to its real element — fields to the `<input>`/`
|
|
|
95
110
|
|
|
96
111
|
## Thai dates
|
|
97
112
|
|
|
98
|
-
Values are ISO strings (`2026-09-18`); display is Thai with Buddhist-era years (`18 ก.ย. 2569`). People can type `18/09/2569`, `18/09/2026`, `2026-09-18` or `18 ก.ย. 2569`. Store ISO, never พ.ศ. `formatDate(iso, { format: 'long' })` → `18 กันยายน 2569`.
|
|
113
|
+
Values are ISO strings (`2026-09-18`); with `locale="th"` display is Thai with Buddhist-era years (`18 ก.ย. 2569`). People can type `18/09/2569`, `18/09/2026`, `2026-09-18` or `18 ก.ย. 2569`. Store ISO, never พ.ศ. `formatDate(iso, { format: 'long' })` → `18 กันยายน 2569`.
|
|
99
114
|
|
|
100
115
|
## Server rendering
|
|
101
116
|
|