@jirawatpyk/aura-react 4.5.0 → 4.6.0

package/dist/esm/overlay.js

@@ -2,22 +2,25 @@
 import * as React from "react";
 import { FOCUSABLE, useMounted } from "./internal.js";
 function useModal(open, ref, opts) {
-  var mounted = useMounted();
-  var prev = React.useRef(null);
-  var o = opts || {};
-  React.useEffect(function() {
-    if (!open || !mounted) return;
-    prev.current = document.activeElement;
-    var body = document.body, overflow = body.style.overflow;
-    body.style.overflow = "hidden";
-    var el = ref.current;
-    var target = el && (el.querySelector("[data-autofocus]") || el.querySelector(o.bodySelector + " " + FOCUSABLE) || el.querySelector(o.footSelector + " " + FOCUSABLE) || el);
-    if (target && o.autoFocus !== false) target.focus();
-    return function() {
-      body.style.overflow = overflow;
-      if (prev.current && prev.current.focus) prev.current.focus();
-    };
-  }, [open, mounted]);
+  const mounted = useMounted();
+  const prev = React.useRef(null);
+  const o = opts || {};
+  React.useEffect(
+    function() {
+      if (!open || !mounted) return;
+      prev.current = document.activeElement;
+      const body = document.body, overflow = body.style.overflow;
+      body.style.overflow = "hidden";
+      const el = ref.current;
+      const target = el && (el.querySelector("[data-autofocus]") || el.querySelector(o.bodySelector + " " + FOCUSABLE) || el.querySelector(o.footSelector + " " + FOCUSABLE) || el);
+      if (target && o.autoFocus !== false) target.focus();
+      return function() {
+        body.style.overflow = overflow;
+        if (prev.current && prev.current.focus) prev.current.focus();
+      };
+    },
+    [open, mounted]
+  );
   function onKeyDown(e) {
     if (e.key === "Escape") {
       e.stopPropagation();
@@ -25,12 +28,12 @@ function useModal(open, ref, opts) {
       return;
     }
     if (e.key !== "Tab" || !ref.current) return;
-    var list = Array.prototype.slice.call(ref.current.querySelectorAll(FOCUSABLE));
+    const list = Array.prototype.slice.call(ref.current.querySelectorAll(FOCUSABLE));
     if (!list.length) {
       e.preventDefault();
       return;
     }
-    var first = list[0], last = list[list.length - 1];
+    const first = list[0], last = list[list.length - 1];
     if (e.shiftKey && (document.activeElement === first || document.activeElement === ref.current)) {
       e.preventDefault();
       last.focus();

package/dist/esm/theme.js

@@ -1,9 +1,10 @@
 'use client';
 function hexToRgb(hex) {
-  var h = String(hex).trim().replace("#", "");
-  if (h.length === 3) h = h.split("").map(function(c) {
-    return c + c;
-  }).join("");
+  let h = String(hex).trim().replace("#", "");
+  if (h.length === 3)
+    h = h.split("").map(function(c) {
+      return c + c;
+    }).join("");
   if (!/^[0-9a-f]{6}$/i.test(h)) throw new Error('createTheme: "' + hex + '" is not a #rgb or #rrggbb colour');
   return [0, 2, 4].map(function(i) {
     return parseInt(h.slice(i, i + 2), 16) / 255;
@@ -11,7 +12,7 @@ function hexToRgb(hex) {
 }
 function rgbToHex(rgb) {
   return "#" + rgb.map(function(v) {
-    var n = Math.round(Math.min(1, Math.max(0, v)) * 255);
+    const n = Math.round(Math.min(1, Math.max(0, v)) * 255);
     return (n < 16 ? "0" : "") + n.toString(16);
   }).join("");
 }
@@ -22,20 +23,20 @@ function delin(c) {
   return c <= 31308e-7 ? 12.92 * c : 1.055 * Math.pow(c, 1 / 2.4) - 0.055;
 }
 function rgbToOklch(rgb) {
-  var r = lin(rgb[0]), g = lin(rgb[1]), b = lin(rgb[2]);
-  var l = Math.cbrt(0.4122214708 * r + 0.5363325363 * g + 0.0514459929 * b);
-  var m = Math.cbrt(0.2119034982 * r + 0.6806995451 * g + 0.1073969566 * b);
-  var s = Math.cbrt(0.0883024619 * r + 0.2817188376 * g + 0.6299787005 * b);
-  var L = 0.2104542553 * l + 0.793617785 * m - 0.0040720468 * s;
-  var A = 1.9779984951 * l - 2.428592205 * m + 0.4505937099 * s;
-  var B = 0.0259040371 * l + 0.7827717662 * m - 0.808675766 * s;
+  const r = lin(rgb[0]), g = lin(rgb[1]), b = lin(rgb[2]);
+  const l = Math.cbrt(0.4122214708 * r + 0.5363325363 * g + 0.0514459929 * b);
+  const m = Math.cbrt(0.2119034982 * r + 0.6806995451 * g + 0.1073969566 * b);
+  const s = Math.cbrt(0.0883024619 * r + 0.2817188376 * g + 0.6299787005 * b);
+  const L = 0.2104542553 * l + 0.793617785 * m - 0.0040720468 * s;
+  const A = 1.9779984951 * l - 2.428592205 * m + 0.4505937099 * s;
+  const B = 0.0259040371 * l + 0.7827717662 * m - 0.808675766 * s;
   return [L, Math.sqrt(A * A + B * B), (Math.atan2(B, A) * 180 / Math.PI + 360) % 360];
 }
 function oklchToRgbRaw(L, C, H) {
-  var a = C * Math.cos(H * Math.PI / 180), b = C * Math.sin(H * Math.PI / 180);
-  var l = Math.pow(L + 0.3963377774 * a + 0.2158037573 * b, 3);
-  var m = Math.pow(L - 0.1055613458 * a - 0.0638541728 * b, 3);
-  var s = Math.pow(L - 0.0894841775 * a - 1.291485548 * b, 3);
+  const a = C * Math.cos(H * Math.PI / 180), b = C * Math.sin(H * Math.PI / 180);
+  const l = Math.pow(L + 0.3963377774 * a + 0.2158037573 * b, 3);
+  const m = Math.pow(L - 0.1055613458 * a - 0.0638541728 * b, 3);
+  const s = Math.pow(L - 0.0894841775 * a - 1.291485548 * b, 3);
   return [
     4.0767416621 * l - 3.3077115913 * m + 0.2309699292 * s,
     -1.2684380046 * l + 2.6097574011 * m - 0.3413193965 * s,
@@ -48,56 +49,70 @@ function inGamut(rgb) {
   });
 }
 function oklchToHex(L, C, H) {
-  var lo = 0, hi = C, rgb = oklchToRgbRaw(L, C, H);
+  let lo = 0, hi = C, rgb = oklchToRgbRaw(L, C, H);
   if (inGamut(rgb)) return rgbToHex(rgb);
-  for (var i = 0; i < 24; i++) {
-    var mid = (lo + hi) / 2;
+  for (let i = 0; i < 24; i++) {
+    const mid = (lo + hi) / 2;
     if (inGamut(oklchToRgbRaw(L, mid, H))) lo = mid;
     else hi = mid;
   }
   return rgbToHex(oklchToRgbRaw(L, lo, H));
 }
 function luminance(hex) {
-  var c = hexToRgb(hex).map(lin);
+  const c = hexToRgb(hex).map(lin);
   return 0.2126 * c[0] + 0.7152 * c[1] + 0.0722 * c[2];
 }
 function contrast(a, b) {
-  var x = luminance(a), y = luminance(b);
+  const x = luminance(a), y = luminance(b);
   return (Math.max(x, y) + 0.05) / (Math.min(x, y) + 0.05);
 }
 function mix(a, b, t) {
-  var x = hexToRgb(a), y = hexToRgb(b);
-  return rgbToHex(x.map(function(v, i) {
-    return v + (y[i] - v) * t;
-  }));
+  const x = hexToRgb(a), y = hexToRgb(b);
+  return rgbToHex(
+    x.map(function(v, i) {
+      return v + (y[i] - v) * t;
+    })
+  );
 }
-var STEPS = { 50: [0.975, 0.18], 100: [0.945, 0.3], 200: [0.895, 0.5], 300: [0.81, 0.72], 400: [0.715, 0.9], 500: [0.635, 1], 600: [0.555, 1], 700: [0.49, 0.95], 800: [0.43, 0.85], 900: [0.38, 0.72] };
+const STEPS = {
+  50: [0.975, 0.18],
+  100: [0.945, 0.3],
+  200: [0.895, 0.5],
+  300: [0.81, 0.72],
+  400: [0.715, 0.9],
+  500: [0.635, 1],
+  600: [0.555, 1],
+  700: [0.49, 0.95],
+  800: [0.43, 0.85],
+  900: [0.38, 0.72]
+};
 function scale(hex) {
-  var o = rgbToOklch(hexToRgb(hex)), C = Math.max(o[1], 0.02), out = {};
+  const o = rgbToOklch(hexToRgb(hex)), C = Math.max(o[1], 0.02), out = {};
   Object.keys(STEPS).forEach(function(k) {
     out[k] = oklchToHex(STEPS[k][0], C * STEPS[k][1] / 0.95 * (o[1] < 0.03 ? 0.4 : 1), o[2]);
   });
   return out;
 }
 function fit(hex, grounds, target, dir) {
-  var o = rgbToOklch(hexToRgb(hex)), L = o[0], c = hex;
-  for (var i = 0; i < 80; i++) {
+  let o = rgbToOklch(hexToRgb(hex)), L = o[0], c = hex;
+  for (let i = 0; i < 80; i++) {
     if (grounds.every(function(g) {
       return contrast(c, g) >= target;
-    })) return c;
+    }))
+      return c;
     L = Math.min(1, Math.max(0, L + dir * 0.01));
     c = oklchToHex(L, o[1], o[2]);
   }
   return c;
 }
-var ZINC = { 0: "#ffffff", 50: "#fafafa", 100: "#f4f4f5", 800: "#27272a", 900: "#18181b", 950: "#09090b" };
-var INK = "#18181b";
+const ZINC = { 0: "#ffffff", 50: "#fafafa", 100: "#f4f4f5", 800: "#27272a", 900: "#18181b", 950: "#09090b" };
+const INK = "#18181b";
 function createTheme(opts) {
-  var o = opts || {};
+  const o = opts || {};
   if (!o.brand) throw new Error('createTheme: pass { brand: "#rrggbb" }');
-  var b = scale(o.brand), s = o.signal ? scale(o.signal) : null;
-  var lightGrounds = [ZINC[0], ZINC[50]], darkGrounds = [ZINC[900], ZINC[950]];
-  var L = {}, D = {};
+  const b = scale(o.brand), s = o.signal ? scale(o.signal) : null;
+  const lightGrounds = [ZINC[0], ZINC[50]], darkGrounds = [ZINC[900], ZINC[950]];
+  const L = {}, D = {};
   L["fg-accent"] = fit(b[700], lightGrounds, 4.5, -1);
   L["accent-violet"] = L["fg-accent"];
   L["focus-ring"] = fit(b[700], lightGrounds.concat([b[50]]), 3, -1);
@@ -125,7 +140,7 @@ function createTheme(opts) {
     D["accent-lime"] = s[200];
     D["mesh-to"] = s[200];
   }
-  var shadowLight = INK, shadowDark = D["accent-violet"];
+  const shadowLight = INK, shadowDark = D["accent-violet"];
   if (o.primary === "brand") {
     L["button-primary-bg"] = fit(b[600], [ZINC[0]], 4.5, -1);
     L["button-primary-fg"] = ZINC[0];
@@ -140,16 +155,30 @@ function createTheme(opts) {
   D["shadow-creative"] = "4px 4px 0px " + shadowDark;
   D["shadow-creative-hover"] = "6px 6px 0px " + shadowDark;
   D["card-shadow-creative"] = "8px 8px 0px " + shadowDark;
-  var checks = [];
+  const checks = [];
   function check(theme, fg, bg, target, fgHex, bgHex) {
-    var r = contrast(fgHex, bgHex);
-    checks.push({ theme, pair: fg + " on " + bg, ratio: Math.round(r * 100) / 100, target, pass: r >= target - 5e-3 });
+    const r = contrast(fgHex, bgHex);
+    checks.push({
+      theme,
+      pair: fg + " on " + bg,
+      ratio: Math.round(r * 100) / 100,
+      target,
+      pass: r >= target - 5e-3
+    });
   }
-  [["bg-surface", ZINC[0]], ["bg-canvas", ZINC[50]], ["bg-selected", L["bg-selected"]]].forEach(function(g) {
+  [
+    ["bg-surface", ZINC[0]],
+    ["bg-canvas", ZINC[50]],
+    ["bg-selected", L["bg-selected"]]
+  ].forEach(function(g) {
     check("light", "fg-accent", g[0], 4.5, L["fg-accent"], g[1]);
     check("light", "focus-ring", g[0], 3, L["focus-ring"], g[1]);
   });
-  [["bg-surface", ZINC[900]], ["bg-canvas", ZINC[950]], ["bg-selected", D["bg-selected"]]].forEach(function(g) {
+  [
+    ["bg-surface", ZINC[900]],
+    ["bg-canvas", ZINC[950]],
+    ["bg-selected", D["bg-selected"]]
+  ].forEach(function(g) {
     check("dark", "fg-accent", g[0], 4.5, D["fg-accent"], g[1]);
     check("dark", "focus-ring", g[0], 3, D["focus-ring"], g[1]);
   });
@@ -160,24 +189,48 @@ function createTheme(opts) {
   check("dark", "alert-info-fg", "alert-info-bg", 4.5, D["alert-info-fg"], D["alert-info-bg"]);
   if (o.primary === "brand") {
     check("light", "button-primary-fg", "button-primary-bg", 4.5, L["button-primary-fg"], L["button-primary-bg"]);
-    check("light", "button-primary-fg", "button-primary-bg-hover", 4.5, L["button-primary-fg"], L["button-primary-bg-hover"]);
+    check(
+      "light",
+      "button-primary-fg",
+      "button-primary-bg-hover",
+      4.5,
+      L["button-primary-fg"],
+      L["button-primary-bg-hover"]
+    );
     check("dark", "button-primary-fg", "button-primary-bg", 4.5, D["button-primary-fg"], D["button-primary-bg"]);
-    check("dark", "button-primary-fg", "button-primary-bg-hover", 4.5, D["button-primary-fg"], D["button-primary-bg-hover"]);
+    check(
+      "dark",
+      "button-primary-fg",
+      "button-primary-bg-hover",
+      4.5,
+      D["button-primary-fg"],
+      D["button-primary-bg-hover"]
+    );
   }
   if (s) check("light", "ink", "accent-lime (signal)", 4.5, INK, s[200]);
   function css(selector) {
-    var light = selector ? selector : ':root, [data-theme="light"]';
-    var dark = selector ? selector + ".dark, .dark " + selector + ", " + selector + '[data-theme="dark"], [data-theme="dark"] ' + selector : '.dark, [data-theme="dark"]';
+    const light = selector ? selector : ':root, [data-theme="light"]';
+    const dark = selector ? selector + ".dark, .dark " + selector + ", " + selector + '[data-theme="dark"], [data-theme="dark"] ' + selector : '.dark, [data-theme="dark"]';
+    const system = selector ? '[data-theme="system"] ' + selector + ", " + selector + '[data-theme="system"]' : '[data-theme="system"]';
     function block(sel, m) {
       return sel + " {\n" + Object.keys(m).map(function(k) {
         return "  --aura-" + k + ": " + m[k] + ";";
       }).join("\n") + "\n}";
     }
-    return "/* AURA theme" + (o.name ? ' "' + o.name + '"' : "") + ": brand " + o.brand + (o.signal ? ", signal " + o.signal : "") + (o.primary === "brand" ? ", brand primary buttons" : "") + ". Load after aura.css. Generated by createTheme. */\n" + block(light, L) + "\n" + block(dark, D) + "\n";
+    return "/* AURA theme" + (o.name ? ' "' + o.name + '"' : "") + ": brand " + o.brand + (o.signal ? ", signal " + o.signal : "") + (o.primary === "brand" ? ", brand primary buttons" : "") + ". Load after aura.css. Generated by createTheme. */\n" + block(light, L) + "\n" + block(dark, D) + "\n@media (prefers-color-scheme: dark) {\n" + block(system, D) + "\n}\n";
   }
-  return { name: o.name || null, brand: b, signal: s, light: L, dark: D, checks, ok: checks.every(function(c) {
-    return c.pass;
-  }), css };
+  return {
+    name: o.name || null,
+    brand: b,
+    signal: s,
+    light: L,
+    dark: D,
+    checks,
+    ok: checks.every(function(c) {
+      return c.pass;
+    }),
+    css
+  };
 }
 export {
   contrast,

package/dist/index.d.ts

@@ -117,7 +117,7 @@ export interface DataTableProps {
 	stackBelow?: number;
 	className?: string;
 }
-export type IconName = "check" | "x" | "plus" | "minus" | "search" | "chevron-down" | "chevron-up" | "chevron-left" | "chevron-right" | "arrow-right" | "arrow-up-right" | "arrow-up-down" | "loader-circle" | "circle-alert" | "circle-check" | "info" | "triangle-alert" | "settings" | "user" | "users" | "filter" | "ellipsis" | "external-link" | "copy" | "trash-2" | "pencil" | "download" | "upload" | "calendar" | "bell" | "menu" | "eye" | "log-out" | "circle" | "circle-dot-dashed" | "ban" | "arrow-up" | "arrow-down" | "inbox" | "pin" | "pin-off" | "eye-off" | "columns-3" | "arrow-left" | "rotate-ccw" | "house" | "layout-dashboard" | "folder" | "chart-column" | "file-text" | "mail" | "lock" | "clock" | "trending-up" | "trending-down" | "image" | "paperclip" | "cloud-upload" | "file";
+export type IconName = "check" | "x" | "plus" | "minus" | "search" | "chevron-down" | "chevron-up" | "chevron-left" | "chevron-right" | "arrow-right" | "arrow-up-right" | "arrow-up-down" | "loader-circle" | "circle-alert" | "circle-check" | "info" | "triangle-alert" | "settings" | "user" | "users" | "filter" | "ellipsis" | "external-link" | "copy" | "trash-2" | "pencil" | "download" | "upload" | "calendar" | "bell" | "menu" | "eye" | "log-out" | "circle" | "circle-dot-dashed" | "ban" | "arrow-up" | "arrow-down" | "inbox" | "pin" | "pin-off" | "eye-off" | "columns-3" | "arrow-left" | "rotate-ccw" | "house" | "layout-dashboard" | "folder" | "chart-column" | "file-text" | "mail" | "lock" | "clock" | "trending-up" | "trending-down" | "image" | "paperclip" | "cloud-upload" | "file" | "sun" | "moon" | "monitor";
 /** Lucide stroke icon drawn inline in currentColor. */
 export interface IconProps {
 	name: IconName;
@@ -554,7 +554,7 @@ export interface AppShellProps {
 	children?: React$1.ReactNode;
 	navLabel?: string;
 	menuLabel?: string;
-	/** id of <main>, for a skip link. Default `main`. */
+	/** id of `<main>`, for a skip link. Default `main`. */
 	mainId?: string;
 	className?: string;
 }
@@ -624,7 +624,7 @@ export interface FileUploadProps extends FieldProps {
 	defaultValue?: UploadItem[];
 	onChange?: (items: UploadItem[]) => void;
 	onRemove?: (item: UploadItem) => void;
-	/** Same syntax as <input accept>: "image/*,.pdf". Checked on drop too. */
+	/** Same syntax as `<input accept>`: "image/*,.pdf". Checked on drop too. */
 	accept?: string;
 	multiple?: boolean;
 	/** Bytes per file. */
@@ -775,7 +775,7 @@ export type IconShape = [
 	string,
 	Record<string, string>
 ];
-export declare var ICONS: Record<IconName, IconShape[]>;
+export declare const ICONS: Record<IconName, IconShape[]>;
 export declare const Icon: React$1.ForwardRefExoticComponent<IconProps & React$1.RefAttributes<SVGSVGElement>>;
 /** Every icon name the bundle carries. */
 export declare const iconNames: IconName[];
@@ -826,7 +826,7 @@ export declare const Calendar: React$1.ForwardRefExoticComponent<CalendarProps &
 export declare const DatePicker: React$1.ForwardRefExoticComponent<DatePickerProps & React$1.RefAttributes<HTMLInputElement>>;
 export declare const DateRangePicker: React$1.ForwardRefExoticComponent<DateRangePickerProps & React$1.RefAttributes<HTMLInputElement>>;
 export declare const Alert: React$1.ForwardRefExoticComponent<AlertProps & React$1.RefAttributes<HTMLDivElement>>;
-/** Show a toast; returns its id. Needs <Toaster /> mounted once. */
+/** Show a toast; returns its id. Needs `<Toaster />` mounted once. */
 export declare function toast(opts: ToastOptions | string): string;
 export declare namespace toast {
 	var dismiss: (id: string) => void;
@@ -857,7 +857,7 @@ export interface ContainerProps {
 	children?: React$1.ReactNode;
 }
 /** Min-width breakpoints in px, mirroring the aura-bp-* tokens. */
-export declare var breakpoints: {
+export declare const breakpoints: {
 	sm: 640;
 	md: 768;
 	lg: 1024;
@@ -929,13 +929,17 @@ export interface AuraStrings {
 	fileTooBig: (max?: number | string) => string;
 	fileWrongType: string;
 	tooManyFiles: (n: number | string) => string;
+	colorScheme: string;
+	schemeLight: string;
+	schemeDark: string;
+	schemeSystem: string;
 	uploading: string;
 	images: string;
 	pagination: string;
 	pageN: (p: number) => string;
 	accepts: (list?: string, max?: number | string) => string;
 }
-export declare var STRINGS: {
+export declare const STRINGS: {
 	en: AuraStrings;
 	th: AuraStrings;
 };
@@ -970,6 +974,32 @@ export interface ThemeStyleProps extends ThemeOptions {
 	selector?: string;
 }
 export declare function ThemeStyle(props: ThemeStyleProps): React$1.ReactElement;
+/** `system` follows the operating system and changes with it. */
+export type ColorScheme = "light" | "dark" | "system";
+export interface ColorSchemeOptions {
+	/** localStorage key for the choice. Default `aura-color-scheme`. */
+	storageKey?: string;
+	/** Used when nothing is saved. Default `system`. */
+	defaultScheme?: ColorScheme;
+}
+/** The script ColorSchemeScript renders, as a string — for frameworks that want it in a raw <head> template. */
+export declare function colorSchemeScript(options?: ColorSchemeOptions): string;
+/** Put in <head>: applies the saved colour scheme before the page paints. Server-rendering safe. */
+export declare function ColorSchemeScript(props: ColorSchemeOptions): React$1.ReactElement;
+/** Current colour scheme and a setter. `resolved` is what is on screen (system resolved to light or dark). */
+export interface ColorSchemeState {
+	scheme: ColorScheme;
+	resolved: "light" | "dark";
+	setScheme: (scheme: ColorScheme) => void;
+}
+/** Read and change the colour scheme. Every component using it stays in sync, and `system` follows OS changes. */
+export declare function useColorScheme(options?: ColorSchemeOptions): ColorSchemeState;
+export interface ColorSchemeToggleProps extends ColorSchemeOptions {
+	/** Accessible name of the button. Default: the built-in "Colour scheme" label. */
+	label?: string;
+}
+/** Icon button with a menu: Light, Dark, System. Shows a sun or a moon for what is on screen. */
+export declare function ColorSchemeToggle(props: ColorSchemeToggleProps): React$1.ReactElement;
 export declare const Badge: React$1.ForwardRefExoticComponent<BadgeProps & React$1.RefAttributes<HTMLSpanElement>>;
 export declare const Tag: React$1.ForwardRefExoticComponent<TagProps & React$1.RefAttributes<HTMLElement>>;
 export declare const Progress: React$1.ForwardRefExoticComponent<ProgressProps & React$1.RefAttributes<HTMLDivElement>>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jirawatpyk/aura-react",
-  "version": "4.5.0",
+  "version": "4.6.0",
   "description": "AURA Design System — React components (Enterprise Standard, Human Creative). Thai-first: Buddhist-era dates, Thai collation.",
   "license": "MIT",
   "type": "module",
@@ -36,7 +36,9 @@
     "theme": "node scripts/aura-theme.mjs",
     "prepack": "npm run build",
     "pretest:ssr": "node scripts/build.mjs",
-    "prethemes": "node scripts/build.mjs"
+    "prethemes": "node scripts/build.mjs",
+    "test:hydrate": "node scripts/hydrate-test.mjs",
+    "size": "node scripts/size-check.mjs"
   },
   "peerDependencies": {
     "react": ">=18",
@@ -51,7 +53,8 @@
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-hook-form": "^7.53.0",
-    "typescript": "^5.6.0"
+    "typescript": "^5.6.0",
+    "@playwright/test": "^1.45.0"
   },
   "bin": {
     "aura-theme": "scripts/aura-theme.mjs"