@jirawatpyk/aura-react 4.14.0 → 4.16.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 (13) hide show
  1. package/README.md +22 -3
  2. package/dist/aura.bundle.js +126 -27
  3. package/dist/cjs/index.cjs +126 -27
  4. package/dist/esm/AppShell.js +12 -9
  5. package/dist/esm/Button.js +12 -3
  6. package/dist/esm/DataTable.js +16 -5
  7. package/dist/esm/Icon.js +1 -1
  8. package/dist/esm/SideNav.js +72 -4
  9. package/dist/esm/Skeleton.js +4 -1
  10. package/dist/esm/locale.js +6 -0
  11. package/dist/index.d.ts +513 -494
  12. package/dist/styles.css +75 -1
  13. package/package.json +4 -3
package/dist/styles.css CHANGED
@@ -49,6 +49,16 @@ a.aura-btn { text-decoration: none; }
49
49
  .aura-btn--secondary { border: 1px solid var(--aura-button-secondary-border); color: var(--aura-fg-primary); }
50
50
  .aura-btn--secondary:hover { background: var(--aura-bg-surface-hover); }
51
51
  /* Destructive: filled for the confirm step, outline beside other actions. Loading keeps the colour (busy, not unavailable). */
52
+ .aura-btn--ghost { color: var(--aura-fg-primary); }
53
+ .aura-btn--ghost:hover { background: var(--aura-bg-surface-hover); }
54
+ /* size="sm" (4.16): 32px for toolbars, table rows and card footers. On touch the pill stays 32px and a transparent
55
+ * ::after grows the hit area to 44px, as IconButton does. */
56
+ .aura-btn--sm { height: var(--aura-button-height-sm); padding: 0 var(--aura-space-3); gap: 6px; }
57
+ .aura-btn--sm.aura-btn--full { height: auto; min-height: var(--aura-button-height-sm); padding-block: var(--aura-space-1); }
58
+ @media (pointer: coarse) {
59
+ .aura-btn--sm { position: relative; }
60
+ .aura-btn--sm::after { content: ''; position: absolute; top: 50%; left: 50%; width: max(100%, var(--aura-touch-target)); height: max(100%, var(--aura-touch-target)); transform: translate(-50%, -50%); }
61
+ }
52
62
  .aura-btn--danger { background: var(--aura-button-danger-bg); color: var(--aura-button-danger-fg); }
53
63
  .aura-btn--danger:hover { background: var(--aura-button-danger-bg-hover); }
54
64
  .aura-btn--danger-secondary { border: 1px solid var(--aura-border-danger); color: var(--aura-fg-danger); background: transparent; }
@@ -596,6 +606,30 @@ a.aura-btn { text-decoration: none; }
596
606
  .aura-nav__sub { margin-top: 2px; }
597
607
  .aura-nav__sub[hidden] { display: none; }
598
608
  .aura-nav__footer { padding: var(--aura-space-3); border-top: 1px solid var(--aura-border-default); }
609
+ /* Collapse toggle and the icon-only rail (4.15). */
610
+ .aura-nav { transition: width var(--aura-duration-base) var(--aura-ease); }
611
+ .aura-nav__toggle { display: flex; padding: var(--aura-space-2) var(--aura-space-3); border-top: 1px solid var(--aura-border-default); }
612
+ .aura-nav--collapsed { width: var(--aura-sidenav-rail-width); }
613
+ .aura-nav--collapsed .aura-nav__toggle { justify-content: center; }
614
+ .aura-nav--collapsed .aura-nav__header, .aura-nav--collapsed .aura-nav__footer { padding-left: var(--aura-space-2); padding-right: var(--aura-space-2); overflow: hidden; }
615
+ .aura-nav--collapsed .aura-nav__item { position: relative; justify-content: center; gap: 0; padding: 0; }
616
+ .aura-nav--collapsed .aura-nav__label, .aura-nav--collapsed .aura-nav__count, .aura-nav--collapsed .aura-nav__badge, .aura-nav--collapsed .aura-nav__title {
617
+ position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
618
+ }
619
+ .aura-nav--collapsed .aura-nav__chevron { display: none; }
620
+ .aura-nav--collapsed .aura-nav__section + .aura-nav__section { margin-top: var(--aura-space-3); padding-top: var(--aura-space-3); border-top: 1px solid var(--aura-border-default); }
621
+ .aura-nav--collapsed .aura-nav__item--group.has-active { background: var(--aura-bg-selected); }
622
+ .aura-nav--collapsed .aura-nav__item--group.has-active .aura-icon { color: var(--aura-fg-accent); }
623
+ .aura-nav__initial {
624
+ display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: var(--aura-radius-sm);
625
+ background: var(--aura-status-neutral-bg); color: var(--aura-status-neutral-fg); font-size: 12px; font-weight: 600; text-transform: uppercase;
626
+ }
627
+ .aura-nav__dot {
628
+ position: absolute; top: 6px; left: calc(50% + 5px); width: 8px; height: 8px; border-radius: var(--aura-radius-full);
629
+ background: var(--aura-fg-accent); box-shadow: 0 0 0 2px var(--aura-bg-canvas);
630
+ }
631
+ .aura-tooltip--right { transform: translateY(-50%); white-space: nowrap; }
632
+ @media (prefers-reduced-motion: reduce) { .aura-nav { transition: none; } }
599
633
 
600
634
  /* ---------- Breadcrumb ---------- */
601
635
  .aura-crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: var(--aura-space-1) var(--aura-space-2); list-style: none; margin: 0; padding: 0; font-family: var(--font-sans); font-size: 13px; }
@@ -785,7 +819,17 @@ a.aura-btn { text-decoration: none; }
785
819
  position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: var(--aura-space-2);
786
820
  min-height: 56px; padding: 0 var(--aura-space-6); background: var(--aura-bg-surface); border-bottom: 1px solid var(--aura-border-default);
787
821
  }
788
- .aura-shell.is-compact .aura-shell__bar { padding: 0 var(--aura-space-2) 0 var(--aura-space-2); }
822
+ /* Responsive in CSS (4.16), so the server's HTML is already right on a phone: below lg the sidebar is hidden and the
823
+ * menu button shows; from lg up the reverse. JavaScript only opens and closes the drawer. */
824
+ .aura-shell__menu { display: inline-flex; }
825
+ @media (max-width: 1023.98px) {
826
+ .aura-shell__nav { display: none; }
827
+ .aura-shell__bar { padding: 0 var(--aura-space-2) 0 var(--aura-space-2); }
828
+ }
829
+ @media (min-width: 1024px) {
830
+ .aura-shell__menu { display: none; }
831
+ .aura-shell__bar--menu-only { display: none; }
832
+ }
789
833
  .aura-shell__bar-content { flex: 1; min-width: 0; display: flex; align-items: center; gap: var(--aura-space-3); }
790
834
  .aura-shell__content { flex: 1; min-width: 0; padding: var(--aura-space-6) var(--aura-space-4); }
791
835
  @media (min-width: 640px) { .aura-shell__content { padding: var(--aura-space-6); } }
@@ -1257,3 +1301,33 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
1257
1301
  }
1258
1302
  .aura-density { display: contents; }
1259
1303
 
1304
+
1305
+ /* DataTable: cards before hydration (4.16). While a stackBelow table hasn't measured itself yet (server HTML, first
1306
+ * client render) it holds both layouts; these container queries show one, so a phone never sees the grid first. */
1307
+ .aura-table-dual { container-type: inline-size; }
1308
+ @container (min-width: 360px) { .aura-table-dual[data-stack-below='360'] > .aura-table--stacked { display: none; } }
1309
+ @container (max-width: 359.98px) { .aura-table-dual[data-stack-below='360'] > .aura-table:not(.aura-table--stacked) { display: none; } }
1310
+ @container (min-width: 400px) { .aura-table-dual[data-stack-below='400'] > .aura-table--stacked { display: none; } }
1311
+ @container (max-width: 399.98px) { .aura-table-dual[data-stack-below='400'] > .aura-table:not(.aura-table--stacked) { display: none; } }
1312
+ @container (min-width: 480px) { .aura-table-dual[data-stack-below='480'] > .aura-table--stacked { display: none; } }
1313
+ @container (max-width: 479.98px) { .aura-table-dual[data-stack-below='480'] > .aura-table:not(.aura-table--stacked) { display: none; } }
1314
+ @container (min-width: 520px) { .aura-table-dual[data-stack-below='520'] > .aura-table--stacked { display: none; } }
1315
+ @container (max-width: 519.98px) { .aura-table-dual[data-stack-below='520'] > .aura-table:not(.aura-table--stacked) { display: none; } }
1316
+ @container (min-width: 560px) { .aura-table-dual[data-stack-below='560'] > .aura-table--stacked { display: none; } }
1317
+ @container (max-width: 559.98px) { .aura-table-dual[data-stack-below='560'] > .aura-table:not(.aura-table--stacked) { display: none; } }
1318
+ @container (min-width: 600px) { .aura-table-dual[data-stack-below='600'] > .aura-table--stacked { display: none; } }
1319
+ @container (max-width: 599.98px) { .aura-table-dual[data-stack-below='600'] > .aura-table:not(.aura-table--stacked) { display: none; } }
1320
+ @container (min-width: 640px) { .aura-table-dual[data-stack-below='640'] > .aura-table--stacked { display: none; } }
1321
+ @container (max-width: 639.98px) { .aura-table-dual[data-stack-below='640'] > .aura-table:not(.aura-table--stacked) { display: none; } }
1322
+ @container (min-width: 720px) { .aura-table-dual[data-stack-below='720'] > .aura-table--stacked { display: none; } }
1323
+ @container (max-width: 719.98px) { .aura-table-dual[data-stack-below='720'] > .aura-table:not(.aura-table--stacked) { display: none; } }
1324
+ @container (min-width: 768px) { .aura-table-dual[data-stack-below='768'] > .aura-table--stacked { display: none; } }
1325
+ @container (max-width: 767.98px) { .aura-table-dual[data-stack-below='768'] > .aura-table:not(.aura-table--stacked) { display: none; } }
1326
+ @container (min-width: 800px) { .aura-table-dual[data-stack-below='800'] > .aura-table--stacked { display: none; } }
1327
+ @container (max-width: 799.98px) { .aura-table-dual[data-stack-below='800'] > .aura-table:not(.aura-table--stacked) { display: none; } }
1328
+ @container (min-width: 900px) { .aura-table-dual[data-stack-below='900'] > .aura-table--stacked { display: none; } }
1329
+ @container (max-width: 899.98px) { .aura-table-dual[data-stack-below='900'] > .aura-table:not(.aura-table--stacked) { display: none; } }
1330
+ @container (min-width: 960px) { .aura-table-dual[data-stack-below='960'] > .aura-table--stacked { display: none; } }
1331
+ @container (max-width: 959.98px) { .aura-table-dual[data-stack-below='960'] > .aura-table:not(.aura-table--stacked) { display: none; } }
1332
+ @container (min-width: 1024px) { .aura-table-dual[data-stack-below='1024'] > .aura-table--stacked { display: none; } }
1333
+ @container (max-width: 1023.98px) { .aura-table-dual[data-stack-below='1024'] > .aura-table:not(.aura-table--stacked) { display: none; } }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@jirawatpyk/aura-react",
3
- "version": "4.14.0",
3
+ "version": "4.16.0",
4
4
  "description": "AURA Design System — React components (Enterprise Standard, Human Creative). Thai-first: Buddhist-era dates, Thai collation.",
5
5
  "license": "MIT",
6
6
  "type": "module",
@@ -29,7 +29,7 @@
29
29
  "scripts": {
30
30
  "build": "node scripts/build.mjs && node scripts/sync-bundle.mjs",
31
31
  "test:ssr": "node scripts/ssr-test.mjs",
32
- "typecheck": "tsc -p tsconfig.src.json && tsc -p tsconfig.json",
32
+ "typecheck": "tsc -p tsconfig.src.json && tsc -p tsconfig.json && tsc -p tsconfig.exact.json",
33
33
  "examples": "node examples/build.mjs",
34
34
  "themes": "node scripts/test-themes.mjs",
35
35
  "test:pilots": "npm run examples && npm run themes && python3 tests/pilot_test.py && python3 tests/pilots_test.py",
@@ -39,7 +39,8 @@
39
39
  "prethemes": "node scripts/build.mjs",
40
40
  "test:hydrate": "node scripts/hydrate-test.mjs",
41
41
  "size": "node scripts/size-check.mjs",
42
- "preexamples": "node scripts/build.mjs"
42
+ "preexamples": "node scripts/build.mjs",
43
+ "test:layout": "node scripts/layout-test.mjs"
43
44
  },
44
45
  "peerDependencies": {
45
46
  "react": ">=18",