@jirawatpyk/aura-react 5.29.0 → 5.31.0

package/dist/esm/Textarea.js

@@ -1,7 +1,7 @@
 'use client';
 import * as React from "react";
-import { FIELD_KEYS, Field, describedBy } from "./Field.js";
-import { omit, uid } from "./internal.js";
+import { FIELD_KEYS, Field, joinDescribedBy } from "./Field.js";
+import { cx, omit, touchClass, uid } from "./internal.js";
 const Textarea = React.forwardRef(function Textarea2(props, ref) {
   const auto = uid(), id = props.id || auto;
   const rest = omit(props, FIELD_KEYS);
@@ -14,8 +14,9 @@ const Textarea = React.forwardRef(function Textarea2(props, ref) {
       error: props.error,
       required: props.required,
       optional: props.optional,
+      labelAddon: props.labelAddon,
       disabled: props.disabled,
-      className: props.className
+      className: cx(touchClass(props.touchHeight), props.className)
     },
     /* @__PURE__ */ React.createElement(
       "textarea",
@@ -28,7 +29,7 @@ const Textarea = React.forwardRef(function Textarea2(props, ref) {
         placeholder: props.placeholder,
         required: props.required,
         "aria-invalid": props.error ? true : rest["aria-invalid"],
-        "aria-describedby": [describedBy(id, props), rest["aria-describedby"]].filter(Boolean).join(" ") || void 0
+        "aria-describedby": joinDescribedBy(id, props, rest["aria-describedby"])
       }
     )
   );

package/dist/esm/classes.js

@@ -8,6 +8,9 @@ function omit(src, keys) {
       out[k] = src[k];
   return out;
 }
+function touchClass(t) {
+  return t === "always" ? "is-touch-always" : !!t && "is-touch";
+}
 const TONES = ["neutral", "accent", "success", "warning", "danger"];
 function tone(t) {
   return TONES.indexOf(t) >= 0 ? t : "neutral";
@@ -29,5 +32,6 @@ export {
   cx,
   devWarnOnce,
   omit,
-  tone
+  tone,
+  touchClass
 };

package/dist/esm/internal.js

@@ -1,6 +1,6 @@
 'use client';
 import * as React from "react";
-import { cx, omit, tone, devWarnOnce } from "./classes.js";
+import { cx, omit, tone, devWarnOnce, touchClass } from "./classes.js";
 function useMaybeControlled(value, initial, onChange) {
   const s = React.useState(initial);
   const wasSet = React.useState(value !== void 0);
@@ -89,6 +89,7 @@ export {
   omit,
   plainClick,
   tone,
+  touchClass,
   trapTab,
   uid,
   useIsoLayoutEffect,

package/dist/esm/theme.js

@@ -162,6 +162,13 @@ function createTheme(opts) {
     D["accent-lime"] = s[200];
     D["mesh-to"] = s[200];
   }
+  function onFill(bg) {
+    return contrast(ZINC[0], bg) >= contrast(INK, bg) ? ZINC[0] : INK;
+  }
+  L["control-checked-bg"] = L["accent-violet"];
+  L["control-checked-fg"] = onFill(L["control-checked-bg"]);
+  D["control-checked-bg"] = fit(b[300], darkGrounds, 3, 1);
+  D["control-checked-fg"] = onFill(D["control-checked-bg"]);
   const shadowLight = INK, shadowDark = D["accent-violet"];
   if (o.primary === "brand") {
     L["button-primary-bg"] = fit(b[600], [ZINC[0]], 4.5, -1);
@@ -244,6 +251,30 @@ function createTheme(opts) {
     );
   }
   if (s) check("light", "ink", "accent-lime (signal)", 4.5, INK, s[200]);
+  [
+    [
+      "light",
+      L,
+      [
+        ["bg-surface", ZINC[0]],
+        ["bg-canvas", ZINC[50]]
+      ]
+    ],
+    [
+      "dark",
+      D,
+      [
+        ["bg-surface", ZINC[900]],
+        ["bg-canvas", ZINC[950]]
+      ]
+    ]
+  ].forEach(function(g) {
+    const t = g[0], m = g[1];
+    g[2].forEach(function(gr) {
+      check(t, "control-checked-bg", gr[0], 3, m["control-checked-bg"], gr[1]);
+    });
+    check(t, "control-checked-fg", "control-checked-bg", 4.5, m["control-checked-fg"], m["control-checked-bg"]);
+  });
   function css(selector) {
     if (selector !== void 0 && /[<{};@\r\n]|\/\*|\*\//.test(selector))
       throw new Error('createTheme: "' + selector + '" is not a plain CSS selector');

package/dist/index.d.cts

@@ -335,6 +335,9 @@ export interface CheckboxProps extends Omit<React$1.InputHTMLAttributes<HTMLInpu
 		x: number;
 		y: number;
 	} | undefined;
+	/** A labelled checkbox's row is 44px (5.30, Chamber-OS 135), the one-line label centred: `true` below 640px or on a
+	 * coarse pointer, `'always'` at every width. A bare box (no visible label) uses `hitArea` instead. */
+	touchHeight?: TouchHeight | undefined;
 }
 /** 32px round button holding one icon. */
 export interface IconButtonProps extends React$1.ButtonHTMLAttributes<HTMLButtonElement> {
@@ -393,6 +396,8 @@ export interface MenuProps {
 	 * accessible description, read once when the menu opens. */
 	header?: React$1.ReactNode | undefined;
 }
+/** `true`: 44px below 640px or on a coarse pointer; `'always'`: 44px at every width (5.30). */
+export type TouchHeight = boolean | "always";
 export interface FieldProps {
 	/** Visible label; also the accessible name. */
 	label: string;
@@ -410,6 +415,17 @@ export interface TextFieldProps extends FieldProps, Omit<React$1.InputHTMLAttrib
 	icon?: IconInput | undefined;
 	/** Trailing unit, e.g. "THB". */
 	suffix?: React$1.ReactNode | undefined;
+	/** 5.31 (Chamber-OS addendum 41): a node between the label and the box — e.g. the phrase to type, with a copy
+	 * button, on a typed confirmation. The hint and error stay below. Its box's id (`{id}-addon`) comes first in the
+	 * input's `aria-describedby`, so its text is read after the label; keep any button names in it short. */
+	labelAddon?: React$1.ReactNode | undefined;
+	/** `false` keeps the addon out of `aria-describedby` — for one that isn't a description (a "Forgot password?"
+	 * link), or to name only part of it: give that part an id and pass it in `aria-describedby`. Default `true`. */
+	labelAddonDescribes?: boolean | undefined;
+	/** 44px box (5.30, Chamber-OS 135): `true` below 640px or on a coarse pointer, as Button's `touchHeight`; `'always'`
+	 * at every width, also with a mouse in compact density — for a form whose spec asks for 44px targets everywhere.
+	 * Default: the density's input height. */
+	touchHeight?: TouchHeight | undefined;
 }
 /** A password input with a show/hide button. All TextField props; `ref` reaches the input (react-hook-form `register`). */
 export interface PasswordFieldProps extends Omit<TextFieldProps, "type" | "suffix"> {
@@ -531,6 +547,16 @@ export interface CommandProps {
 	className?: string | undefined;
 }
 export interface TextareaProps extends FieldProps, Omit<React$1.TextareaHTMLAttributes<HTMLTextAreaElement>, "required"> {
+	/** 5.31 (Chamber-OS addendum 41): a node between the label and the box — e.g. the phrase to type, with a copy
+	 * button, on a typed confirmation. The hint and error stay below. Its box's id (`{id}-addon`) comes first in the
+	 * input's `aria-describedby`, so its text is read after the label; keep any button names in it short. */
+	labelAddon?: React$1.ReactNode | undefined;
+	/** `false` keeps the addon out of `aria-describedby` — for one that isn't a description (a "Forgot password?"
+	 * link), or to name only part of it: give that part an id and pass it in `aria-describedby`. Default `true`. */
+	labelAddonDescribes?: boolean | undefined;
+	/** Accepted like the other fields' (5.30, Chamber-OS 135), so a form can pass it to every field. A Textarea is
+	 * always at least 96px tall, well over the 44px target, so it changes nothing you can see. */
+	touchHeight?: TouchHeight | undefined;
 }
 export type SelectOption = string | {
 	value: string;
@@ -552,6 +578,10 @@ export interface SelectProps extends Omit<FieldProps, "label">, Omit<React$1.Sel
 	 * option on the read-only ground, with no chevron; no click or key opens the list. The value is still submitted
 	 * with the form (unlike `disabled`). Before JavaScript runs, the other options from `options` are disabled. */
 	readOnly?: boolean | undefined;
+	/** 44px box (5.30, Chamber-OS 135): `true` below 640px or on a coarse pointer, as Button's `touchHeight`; `'always'`
+	 * at every width, also with a mouse in compact density — for a form whose spec asks for 44px targets everywhere.
+	 * Default: the density's input height. */
+	touchHeight?: TouchHeight | undefined;
 }
 /** A compact filter for FilterBar (5.12): "Status All ▾", as wide as its words. */
 export interface FilterSelectProps extends Omit<React$1.SelectHTMLAttributes<HTMLSelectElement>, "onChange" | "value" | "defaultValue" | "multiple" | "size" | "placeholder" | "required" | "children"> {
@@ -586,6 +616,9 @@ export interface RadioGroupProps extends FieldProps {
 	disabled?: boolean | undefined;
 	id?: string | undefined;
 	className?: string | undefined;
+	/** 44px rows (5.30, Chamber-OS 135), the one-line label centred: `true` below 640px or on a coarse pointer (touch
+	 * screens already get it), `'always'` at every width, also with a mouse. Default: as tall as the control and label. */
+	touchHeight?: TouchHeight | undefined;
 }
 export interface SwitchProps {
 	label?: string | undefined;
@@ -1615,6 +1648,9 @@ export interface FieldComponentProps extends Omit<FieldPropsPublic, "label"> {
 	/** The control's id: the label points at it, and the hint/error ids derive from it. */
 	id?: string | undefined;
 	children?: React$1.ReactNode | undefined;
+	/** 5.31 (Chamber-OS addendum 41): a node between the label and the control, in a `.aura-field__addon` box with the
+	 * id `{id}-addon`. TextField and Textarea add that id to the input's `aria-describedby`; a custom control should too. */
+	labelAddon?: React$1.ReactNode | undefined;
 	/** Render the label as another element (e.g. `span` for a group of controls) with this id. */
 	labelAs?: string | undefined;
 	labelId?: string | undefined;

package/dist/index.d.ts

@@ -335,6 +335,9 @@ export interface CheckboxProps extends Omit<React$1.InputHTMLAttributes<HTMLInpu
 		x: number;
 		y: number;
 	} | undefined;
+	/** A labelled checkbox's row is 44px (5.30, Chamber-OS 135), the one-line label centred: `true` below 640px or on a
+	 * coarse pointer, `'always'` at every width. A bare box (no visible label) uses `hitArea` instead. */
+	touchHeight?: TouchHeight | undefined;
 }
 /** 32px round button holding one icon. */
 export interface IconButtonProps extends React$1.ButtonHTMLAttributes<HTMLButtonElement> {
@@ -393,6 +396,8 @@ export interface MenuProps {
 	 * accessible description, read once when the menu opens. */
 	header?: React$1.ReactNode | undefined;
 }
+/** `true`: 44px below 640px or on a coarse pointer; `'always'`: 44px at every width (5.30). */
+export type TouchHeight = boolean | "always";
 export interface FieldProps {
 	/** Visible label; also the accessible name. */
 	label: string;
@@ -410,6 +415,17 @@ export interface TextFieldProps extends FieldProps, Omit<React$1.InputHTMLAttrib
 	icon?: IconInput | undefined;
 	/** Trailing unit, e.g. "THB". */
 	suffix?: React$1.ReactNode | undefined;
+	/** 5.31 (Chamber-OS addendum 41): a node between the label and the box — e.g. the phrase to type, with a copy
+	 * button, on a typed confirmation. The hint and error stay below. Its box's id (`{id}-addon`) comes first in the
+	 * input's `aria-describedby`, so its text is read after the label; keep any button names in it short. */
+	labelAddon?: React$1.ReactNode | undefined;
+	/** `false` keeps the addon out of `aria-describedby` — for one that isn't a description (a "Forgot password?"
+	 * link), or to name only part of it: give that part an id and pass it in `aria-describedby`. Default `true`. */
+	labelAddonDescribes?: boolean | undefined;
+	/** 44px box (5.30, Chamber-OS 135): `true` below 640px or on a coarse pointer, as Button's `touchHeight`; `'always'`
+	 * at every width, also with a mouse in compact density — for a form whose spec asks for 44px targets everywhere.
+	 * Default: the density's input height. */
+	touchHeight?: TouchHeight | undefined;
 }
 /** A password input with a show/hide button. All TextField props; `ref` reaches the input (react-hook-form `register`). */
 export interface PasswordFieldProps extends Omit<TextFieldProps, "type" | "suffix"> {
@@ -531,6 +547,16 @@ export interface CommandProps {
 	className?: string | undefined;
 }
 export interface TextareaProps extends FieldProps, Omit<React$1.TextareaHTMLAttributes<HTMLTextAreaElement>, "required"> {
+	/** 5.31 (Chamber-OS addendum 41): a node between the label and the box — e.g. the phrase to type, with a copy
+	 * button, on a typed confirmation. The hint and error stay below. Its box's id (`{id}-addon`) comes first in the
+	 * input's `aria-describedby`, so its text is read after the label; keep any button names in it short. */
+	labelAddon?: React$1.ReactNode | undefined;
+	/** `false` keeps the addon out of `aria-describedby` — for one that isn't a description (a "Forgot password?"
+	 * link), or to name only part of it: give that part an id and pass it in `aria-describedby`. Default `true`. */
+	labelAddonDescribes?: boolean | undefined;
+	/** Accepted like the other fields' (5.30, Chamber-OS 135), so a form can pass it to every field. A Textarea is
+	 * always at least 96px tall, well over the 44px target, so it changes nothing you can see. */
+	touchHeight?: TouchHeight | undefined;
 }
 export type SelectOption = string | {
 	value: string;
@@ -552,6 +578,10 @@ export interface SelectProps extends Omit<FieldProps, "label">, Omit<React$1.Sel
 	 * option on the read-only ground, with no chevron; no click or key opens the list. The value is still submitted
 	 * with the form (unlike `disabled`). Before JavaScript runs, the other options from `options` are disabled. */
 	readOnly?: boolean | undefined;
+	/** 44px box (5.30, Chamber-OS 135): `true` below 640px or on a coarse pointer, as Button's `touchHeight`; `'always'`
+	 * at every width, also with a mouse in compact density — for a form whose spec asks for 44px targets everywhere.
+	 * Default: the density's input height. */
+	touchHeight?: TouchHeight | undefined;
 }
 /** A compact filter for FilterBar (5.12): "Status All ▾", as wide as its words. */
 export interface FilterSelectProps extends Omit<React$1.SelectHTMLAttributes<HTMLSelectElement>, "onChange" | "value" | "defaultValue" | "multiple" | "size" | "placeholder" | "required" | "children"> {
@@ -586,6 +616,9 @@ export interface RadioGroupProps extends FieldProps {
 	disabled?: boolean | undefined;
 	id?: string | undefined;
 	className?: string | undefined;
+	/** 44px rows (5.30, Chamber-OS 135), the one-line label centred: `true` below 640px or on a coarse pointer (touch
+	 * screens already get it), `'always'` at every width, also with a mouse. Default: as tall as the control and label. */
+	touchHeight?: TouchHeight | undefined;
 }
 export interface SwitchProps {
 	label?: string | undefined;
@@ -1615,6 +1648,9 @@ export interface FieldComponentProps extends Omit<FieldPropsPublic, "label"> {
 	/** The control's id: the label points at it, and the hint/error ids derive from it. */
 	id?: string | undefined;
 	children?: React$1.ReactNode | undefined;
+	/** 5.31 (Chamber-OS addendum 41): a node between the label and the control, in a `.aura-field__addon` box with the
+	 * id `{id}-addon`. TextField and Textarea add that id to the input's `aria-describedby`; a custom control should too. */
+	labelAddon?: React$1.ReactNode | undefined;
 	/** Render the label as another element (e.g. `span` for a group of controls) with this id. */
 	labelAs?: string | undefined;
 	labelId?: string | undefined;

package/dist/server/index.cjs

@@ -768,6 +768,13 @@ function createTheme(opts) {
     D["accent-lime"] = s[200];
     D["mesh-to"] = s[200];
   }
+  function onFill(bg) {
+    return contrast(ZINC[0], bg) >= contrast(INK, bg) ? ZINC[0] : INK;
+  }
+  L["control-checked-bg"] = L["accent-violet"];
+  L["control-checked-fg"] = onFill(L["control-checked-bg"]);
+  D["control-checked-bg"] = fit(b[300], darkGrounds, 3, 1);
+  D["control-checked-fg"] = onFill(D["control-checked-bg"]);
   const shadowLight = INK, shadowDark = D["accent-violet"];
   if (o.primary === "brand") {
     L["button-primary-bg"] = fit(b[600], [ZINC[0]], 4.5, -1);
@@ -850,6 +857,30 @@ function createTheme(opts) {
     );
   }
   if (s) check("light", "ink", "accent-lime (signal)", 4.5, INK, s[200]);
+  [
+    [
+      "light",
+      L,
+      [
+        ["bg-surface", ZINC[0]],
+        ["bg-canvas", ZINC[50]]
+      ]
+    ],
+    [
+      "dark",
+      D,
+      [
+        ["bg-surface", ZINC[900]],
+        ["bg-canvas", ZINC[950]]
+      ]
+    ]
+  ].forEach(function(g) {
+    const t = g[0], m = g[1];
+    g[2].forEach(function(gr) {
+      check(t, "control-checked-bg", gr[0], 3, m["control-checked-bg"], gr[1]);
+    });
+    check(t, "control-checked-fg", "control-checked-bg", 4.5, m["control-checked-fg"], m["control-checked-bg"]);
+  });
   function css(selector) {
     if (selector !== void 0 && /[<{};@\r\n]|\/\*|\*\//.test(selector))
       throw new Error('createTheme: "' + selector + '" is not a plain CSS selector');

package/dist/server/index.js

@@ -708,6 +708,13 @@ function createTheme(opts) {
     D["accent-lime"] = s[200];
     D["mesh-to"] = s[200];
   }
+  function onFill(bg) {
+    return contrast(ZINC[0], bg) >= contrast(INK, bg) ? ZINC[0] : INK;
+  }
+  L["control-checked-bg"] = L["accent-violet"];
+  L["control-checked-fg"] = onFill(L["control-checked-bg"]);
+  D["control-checked-bg"] = fit(b[300], darkGrounds, 3, 1);
+  D["control-checked-fg"] = onFill(D["control-checked-bg"]);
   const shadowLight = INK, shadowDark = D["accent-violet"];
   if (o.primary === "brand") {
     L["button-primary-bg"] = fit(b[600], [ZINC[0]], 4.5, -1);
@@ -790,6 +797,30 @@ function createTheme(opts) {
     );
   }
   if (s) check("light", "ink", "accent-lime (signal)", 4.5, INK, s[200]);
+  [
+    [
+      "light",
+      L,
+      [
+        ["bg-surface", ZINC[0]],
+        ["bg-canvas", ZINC[50]]
+      ]
+    ],
+    [
+      "dark",
+      D,
+      [
+        ["bg-surface", ZINC[900]],
+        ["bg-canvas", ZINC[950]]
+      ]
+    ]
+  ].forEach(function(g) {
+    const t = g[0], m = g[1];
+    g[2].forEach(function(gr) {
+      check(t, "control-checked-bg", gr[0], 3, m["control-checked-bg"], gr[1]);
+    });
+    check(t, "control-checked-fg", "control-checked-bg", 4.5, m["control-checked-fg"], m["control-checked-bg"]);
+  });
   function css(selector) {
     if (selector !== void 0 && /[<{};@\r\n]|\/\*|\*\//.test(selector))
       throw new Error('createTheme: "' + selector + '" is not a plain CSS selector');