@jirawatpyk/aura-react 4.12.0 → 4.14.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 (16) hide show
  1. package/README.md +48 -16
  2. package/dist/aura.bundle.js +966 -437
  3. package/dist/cjs/index.cjs +965 -436
  4. package/dist/esm/Command.js +215 -0
  5. package/dist/esm/DataTable.js +11 -1
  6. package/dist/esm/Dialog.js +5 -3
  7. package/dist/esm/FilterBar.js +112 -0
  8. package/dist/esm/FormErrorSummary.js +76 -0
  9. package/dist/esm/PasswordField.js +38 -0
  10. package/dist/esm/Popover.js +3 -1
  11. package/dist/esm/Toaster.js +60 -14
  12. package/dist/esm/index.js +10 -1
  13. package/dist/esm/locale.js +50 -3
  14. package/dist/index.d.ts +119 -1
  15. package/dist/styles.css +124 -8
  16. package/package.json +1 -1
package/README.md CHANGED
@@ -9,8 +9,8 @@ AURA Design System components as a real React package — ES modules, TypeScript
9
9
  One HTML file, no install — the packages are on npmjs, so jsDelivr serves them:
10
10
 
11
11
  ```html
12
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@jirawatpyk/aura-tokens@4/aura.css">
13
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@jirawatpyk/aura-react@4/dist/styles.css">
12
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@jirawatpyk/aura-tokens@4/aura.css" />
13
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@jirawatpyk/aura-react@4/dist/styles.css" />
14
14
  <script src="https://cdn.jsdelivr.net/npm/react@18/umd/react.production.min.js"></script>
15
15
  <script src="https://cdn.jsdelivr.net/npm/react-dom@18/umd/react-dom.production.min.js"></script>
16
16
  <script src="https://cdn.jsdelivr.net/npm/@jirawatpyk/aura-react@4/dist/aura.bundle.js"></script>
@@ -19,10 +19,17 @@ One HTML file, no install — the packages are on npmjs, so jsDelivr serves them
19
19
  <script>
20
20
  const h = React.createElement;
21
21
  ReactDOM.createRoot(document.getElementById('root')).render(
22
- h(Aura.AuraProvider, { locale: 'th' },
23
- h(Aura.Stack, { gap: 4 },
22
+ h(
23
+ Aura.AuraProvider,
24
+ { locale: 'th' },
25
+ h(
26
+ Aura.Stack,
27
+ { gap: 4 },
24
28
  h(Aura.Button, { icon: 'plus' }, 'New order'),
25
- h(Aura.DatePicker, { label: 'Delivery date' }))));
29
+ h(Aura.DatePicker, { label: 'Delivery date' }),
30
+ ),
31
+ ),
32
+ );
26
33
  </script>
27
34
  ```
28
35
 
@@ -38,15 +45,17 @@ Public on npmjs; internal projects can use GitHub Packages instead ([repository
38
45
 
39
46
  ```tsx
40
47
  // app root (once)
41
- import '@aura/tokens/aura.css'; // tokens (light + dark)
42
- import '@aura/react/styles.css'; // component styles
48
+ import '@aura/tokens/aura.css'; // tokens (light + dark)
49
+ import '@aura/react/styles.css'; // component styles
43
50
  // fonts: Google Fonts <link> tags in <head>, or '@aura/tokens/aura-fonts.css'
44
51
 
45
52
  import { AuraProvider, AppShell, SideNav, DataTable, DatePicker } from '@aura/react';
46
53
 
47
54
  export default function Root() {
48
55
  return (
49
- <AuraProvider locale="th"> {/* Thai built-in labels; dates are พ.ศ. by default */}
56
+ <AuraProvider locale="th">
57
+ {' '}
58
+ {/* Thai built-in labels; dates are พ.ศ. by default */}
50
59
  <App />
51
60
  </AuraProvider>
52
61
  );
@@ -55,17 +64,17 @@ export default function Root() {
55
64
 
56
65
  ## What's inside
57
66
 
58
- | Output | For |
59
- |---|---|
60
- | `dist/esm/*.js` | Bundlers (Vite, Next.js, webpack). One file per module with `'use client'`, so Next.js App Router can import it from Server Components. `sideEffects` is limited to CSS, so unused components are dropped. |
61
- | `dist/cjs/index.cjs` | `require()` / Jest. |
62
- | `dist/aura.bundle.js` | A classic `<script>` that sets `window.Aura` (needs `window.React` / `window.ReactDOM`). The design-system artifact uses this file. |
63
- | `dist/styles.css` | Component CSS (no font import). |
64
- | `dist/index.d.ts` | Types for every component and helper, generated from the TypeScript sources (one file). |
67
+ | Output | For |
68
+ | --------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
69
+ | `dist/esm/*.js` | Bundlers (Vite, Next.js, webpack). One file per module with `'use client'`, so Next.js App Router can import it from Server Components. `sideEffects` is limited to CSS, so unused components are dropped. |
70
+ | `dist/cjs/index.cjs` | `require()` / Jest. |
71
+ | `dist/aura.bundle.js` | A classic `<script>` that sets `window.Aura` (needs `window.React` / `window.ReactDOM`). The design-system artifact uses this file. |
72
+ | `dist/styles.css` | Component CSS (no font import). |
73
+ | `dist/index.d.ts` | Types for every component and helper, generated from the TypeScript sources (one file). |
65
74
 
66
75
  ## Components (49)
67
76
 
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 (+ `useFormatDate`, `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`.
77
+ Actions: Button, IconButton, Menu, DropdownMenu, Tag · Forms: TextField, PasswordField, Textarea, NumberField, Select, RadioGroup, Checkbox, Switch, SegmentedControl, Combobox (one value, or `multiple`), FileUpload (+ `formatBytes`) · Dates & times: DatePicker, DateRangePicker, Calendar, TimePicker (+ `useFormatDate`, `formatDate`, `parseDate`, `parseTime`) · Feedback: Alert, FormErrorSummary, Toaster/`toast()` (+ `.success/.error/.warning/.info/.loading`), Tooltip, StatusPill, Badge, Progress, Skeleton, EmptyState · Overlays: Dialog, Drawer, Popover · Data: DataTable, FilterBar, Stat · Navigation: Command (⌘K palette) · 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`, `useDensity`.
69
78
 
70
79
  ## Router links, Swedish, motion
71
80
 
@@ -76,8 +85,31 @@ import Link from 'next/link';
76
85
 
77
86
  `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">`. For dates in your own components use `useFormatDate()` — it follows the provider (`const fmt = useFormatDate(); fmt(iso, { format: 'long' })`). Plain `formatDate()` has no provider to read and stays Thai unless you pass `locale`. Values are always Gregorian ISO dates.
78
87
 
88
+ ## Compact density
89
+
90
+ ```tsx
91
+ <AuraProvider density="compact">…</AuraProvider> {/* whole app or one section */}
92
+ <DataTable density="compact" … /> {/* just one table */}
93
+ ```
94
+
95
+ Compact makes fields and buttons 36px (from 44px), table rows 40px (from 48px) and tightens button padding. Dialogs, drawers, popovers and the ⌘K palette opened inside the provider follow it. On touch screens (`pointer: coarse`) compact keeps 44px targets and 48px rows. Read it with `useDensity()`. Without CSS-in-JS you can set `data-density="compact"` on any element — the CSS variables `--aura-input-height`, `--aura-button-height`, `--aura-table-row-height` and `--aura-button-padding-x` do the rest; virtual DataTables read the row height from CSS.
96
+
79
97
  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
98
 
99
+ ## Toasts, forms, filters, rich text, ⌘K
100
+
101
+ ```tsx
102
+ const id = toast.loading('Saving'); // spinner, stays
103
+ toast.success('Saved', { id }); // same id: replaced in place, never stacked
104
+ toast.error('Could not save'); // danger = role="alert"; the rest role="status"
105
+
106
+ <FormErrorSummary errors={formState.errors} focusKey={formState.submitCount} onSelect={setFocus} />
107
+ <PasswordField label="Password" {...register('password')} />
108
+ <FilterBar search={q} onSearchChange={setQ} filters={chips} onClearAll={clear} resultCount={total}>…</FilterBar>
109
+ <div className="aura-prose" dangerouslySetInnerHTML={{ __html: sanitised }} /> {/* p, h1–h4, lists, blockquote, hr, a, strong, em, u */}
110
+ <Command open={open} onOpenChange={setOpen} items={commands} /> {/* ⌘K / Ctrl+K toggles it */}
111
+ ```
112
+
81
113
  ## Phones and touch
82
114
 
83
115
  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.