@jirawatpyk/aura-react 4.15.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 (10) hide show
  1. package/README.md +11 -3
  2. package/dist/aura.bundle.js +41 -18
  3. package/dist/cjs/index.cjs +41 -18
  4. package/dist/esm/AppShell.js +9 -9
  5. package/dist/esm/Button.js +12 -3
  6. package/dist/esm/DataTable.js +16 -5
  7. package/dist/esm/Skeleton.js +4 -1
  8. package/dist/index.d.ts +505 -497
  9. package/dist/styles.css +51 -1
  10. 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; }
@@ -809,7 +819,17 @@ a.aura-btn { text-decoration: none; }
809
819
  position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: var(--aura-space-2);
810
820
  min-height: 56px; padding: 0 var(--aura-space-6); background: var(--aura-bg-surface); border-bottom: 1px solid var(--aura-border-default);
811
821
  }
812
- .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
+ }
813
833
  .aura-shell__bar-content { flex: 1; min-width: 0; display: flex; align-items: center; gap: var(--aura-space-3); }
814
834
  .aura-shell__content { flex: 1; min-width: 0; padding: var(--aura-space-6) var(--aura-space-4); }
815
835
  @media (min-width: 640px) { .aura-shell__content { padding: var(--aura-space-6); } }
@@ -1281,3 +1301,33 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
1281
1301
  }
1282
1302
  .aura-density { display: contents; }
1283
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.15.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",