@jirawatpyk/aura-react 4.5.1 → 4.6.0

package/dist/esm/colorScheme.js

@@ -0,0 +1,106 @@
+'use client';
+import * as React from "react";
+import { useStrings } from "./locale.js";
+import { IconButton } from "./IconButton.js";
+import { DropdownMenu } from "./DropdownMenu.js";
+const DEFAULT_KEY = "aura-color-scheme";
+const SCHEMES = ["light", "dark", "system"];
+const EVENT = "aura-color-scheme";
+function valid(v) {
+  return typeof v === "string" && SCHEMES.indexOf(v) >= 0;
+}
+function colorSchemeScript(options) {
+  const key = JSON.stringify(options && options.storageKey || DEFAULT_KEY);
+  const fallback = JSON.stringify(options && options.defaultScheme || "system");
+  return "(function(){try{var s=localStorage.getItem(" + key + ");if(s!=='light'&&s!=='dark'&&s!=='system')s=" + fallback + `;var d=document.documentElement;d.setAttribute("data-theme",s);var dark=s==='dark'||(s==='system'&&window.matchMedia('(prefers-color-scheme: dark)').matches);d.classList.toggle("dark",dark);}catch(e){}})();`;
+}
+function ColorSchemeScript(props) {
+  return /* @__PURE__ */ React.createElement("script", { "data-aura-color-scheme": "", dangerouslySetInnerHTML: { __html: colorSchemeScript(props) } });
+}
+function systemDark() {
+  return typeof window !== "undefined" && !!window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches;
+}
+function readScheme(fallback) {
+  if (typeof document === "undefined") return fallback;
+  const attr = document.documentElement.getAttribute("data-theme");
+  return valid(attr) ? attr : fallback;
+}
+function apply(scheme) {
+  const d = document.documentElement;
+  d.setAttribute("data-theme", scheme);
+  d.classList.toggle("dark", scheme === "dark" || scheme === "system" && systemDark());
+}
+function useColorScheme(options) {
+  const key = options && options.storageKey || DEFAULT_KEY;
+  const fallback = options && options.defaultScheme || "system";
+  const subscribe = React.useCallback(
+    function(cb) {
+      const mq = window.matchMedia ? window.matchMedia("(prefers-color-scheme: dark)") : null;
+      function onSystem() {
+        if (readScheme(fallback) === "system") apply("system");
+        cb();
+      }
+      if (mq) mq.addEventListener("change", onSystem);
+      window.addEventListener(EVENT, cb);
+      window.addEventListener("storage", cb);
+      return function() {
+        if (mq) mq.removeEventListener("change", onSystem);
+        window.removeEventListener(EVENT, cb);
+        window.removeEventListener("storage", cb);
+      };
+    },
+    [fallback]
+  );
+  const snapshot = React.useSyncExternalStore(
+    subscribe,
+    function() {
+      const s = readScheme(fallback);
+      return s + "|" + (s === "dark" || s === "system" && systemDark() ? "dark" : "light");
+    },
+    function() {
+      return fallback + "|light";
+    }
+  );
+  const parts = snapshot.split("|");
+  const setScheme = React.useCallback(
+    function(next) {
+      if (!valid(next)) return;
+      try {
+        localStorage.setItem(key, next);
+      } catch (e) {
+      }
+      apply(next);
+      window.dispatchEvent(new Event(EVENT));
+    },
+    [key]
+  );
+  return { scheme: parts[0], resolved: parts[1], setScheme };
+}
+function ColorSchemeToggle(props) {
+  const t = useStrings();
+  const cs = useColorScheme(props);
+  const names = { light: t.schemeLight, dark: t.schemeDark, system: t.schemeSystem };
+  const label = props.label || t.colorScheme;
+  return /* @__PURE__ */ React.createElement(
+    DropdownMenu,
+    {
+      label,
+      trigger: /* @__PURE__ */ React.createElement(IconButton, { icon: cs.resolved === "dark" ? "moon" : "sun", label: label + ": " + names[cs.scheme] }),
+      items: SCHEMES.map(function(s) {
+        return {
+          label: names[s],
+          checked: cs.scheme === s,
+          onSelect: function() {
+            cs.setScheme(s);
+          }
+        };
+      })
+    }
+  );
+}
+export {
+  ColorSchemeScript,
+  ColorSchemeToggle,
+  colorSchemeScript,
+  useColorScheme
+};

package/dist/esm/index.js

@@ -21,6 +21,7 @@ import { TimePicker, parseTime } from "./TimePicker.js";
 import { FileUpload, formatBytes } from "./FileUpload.js";
 import { createTheme, contrast, scale } from "./theme.js";
 import { ThemeStyle } from "./ThemeStyle.js";
+import { ColorSchemeScript, ColorSchemeToggle, colorSchemeScript, useColorScheme } from "./colorScheme.js";
 import { Badge, Tag, Progress, Skeleton, EmptyState, Pagination, Accordion, Popover } from "./extra.js";
 export {
   Accordion,
@@ -34,6 +35,8 @@ export {
   Calendar,
   Card,
   Checkbox,
+  ColorSchemeScript,
+  ColorSchemeToggle,
   Combobox,
   Container,
   DataTable,
@@ -73,6 +76,7 @@ export {
   Tooltip,
   scale as brandScale,
   breakpoints,
+  colorSchemeScript,
   defaultFilter as comboboxFilter,
   contrast,
   createTheme,
@@ -85,5 +89,6 @@ export {
   toast,
   useAuraLocale,
   useBreakpoint,
+  useColorScheme,
   useResponsive
 };

package/dist/esm/locale.js

@@ -82,6 +82,10 @@ const STRINGS = {
     tooManyFiles: function(n2) {
       return "Up to " + n2 + " files";
     },
+    colorScheme: "Colour scheme",
+    schemeLight: "Light",
+    schemeDark: "Dark",
+    schemeSystem: "System",
     uploading: "Uploading\u2026",
     images: "Images",
     pagination: "Pagination",
@@ -170,6 +174,10 @@ const STRINGS = {
     tooManyFiles: function(n2) {
       return "\u0E41\u0E19\u0E1A\u0E44\u0E14\u0E49\u0E44\u0E21\u0E48\u0E40\u0E01\u0E34\u0E19 " + n2 + " \u0E44\u0E1F\u0E25\u0E4C";
     },
+    colorScheme: "\u0E42\u0E2B\u0E21\u0E14\u0E2A\u0E35",
+    schemeLight: "\u0E2A\u0E27\u0E48\u0E32\u0E07",
+    schemeDark: "\u0E21\u0E37\u0E14",
+    schemeSystem: "\u0E15\u0E32\u0E21\u0E23\u0E30\u0E1A\u0E1A",
     uploading: "\u0E01\u0E33\u0E25\u0E31\u0E07\u0E2D\u0E31\u0E1B\u0E42\u0E2B\u0E25\u0E14\u2026",
     images: "\u0E23\u0E39\u0E1B\u0E20\u0E32\u0E1E",
     pagination: "\u0E40\u0E25\u0E02\u0E2B\u0E19\u0E49\u0E32",

package/dist/esm/theme.js

@@ -211,12 +211,13 @@ function createTheme(opts) {
   function css(selector) {
     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,

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;
@@ -929,6 +929,10 @@ 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;
@@ -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.1",
+  "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",
@@ -37,7 +37,8 @@
     "prepack": "npm run build",
     "pretest:ssr": "node scripts/build.mjs",
     "prethemes": "node scripts/build.mjs",
-    "test:hydrate": "node scripts/hydrate-test.mjs"
+    "test:hydrate": "node scripts/hydrate-test.mjs",
+    "size": "node scripts/size-check.mjs"
   },
   "peerDependencies": {
     "react": ">=18",