@handamade/psi-react 0.4.1 → 0.6.0

package/README.md

@@ -1,6 +1,6 @@
 # @handamade/psi-react
 
-11 React 19 components consuming @handamade/psi-tokens. Zero runtime dependencies, CSS Modules, full TypeScript support.
+13 React 19 components consuming @handamade/psi-tokens. Zero runtime dependencies, CSS Modules, full TypeScript support.
 
 ## Installation
 

package/dist/Dialog/Dialog.d.ts

@@ -0,0 +1,24 @@
+import type { DialogHTMLAttributes, ReactNode, Ref } from "react";
+type Width = 400 | 560 | 720;
+export interface DialogProps extends Omit<DialogHTMLAttributes<HTMLDialogElement>, "title" | "onClose" | "open"> {
+    /** Controlled open state; syncs to showModal()/close(). */
+    open: boolean;
+    /** Called on every dismissal attempt with its source; the consumer flips `open`. */
+    onClose: (reason: "esc" | "backdrop" | "close-button") => void;
+    /** Heading; renders an <h2> wired to aria-labelledby. Without it, pass aria-label. */
+    title?: ReactNode;
+    /** Action row (Buttons — one accent per group, danger for destructive). */
+    footer?: ReactNode;
+    /** Panel width in px (400 | 560 | 720). @default 560 */
+    width?: Width;
+    /** false = no close button, Esc and backdrop swallowed — footer is the only exit. @default true */
+    dismissible?: boolean;
+    /** Forwarded ref to the underlying <dialog> element. */
+    ref?: Ref<HTMLDialogElement>;
+}
+/** Modal dialog on the native <dialog> top layer: focus trap, aria-modal and
+ * focus restore come from the platform; title/footer slots, Esc/backdrop/
+ * close-button dismissal via onClose(reason) (D50). */
+export declare function Dialog({ open, onClose, title, footer, width, dismissible, className, children, ref, ...rest }: DialogProps): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=Dialog.d.ts.map

package/dist/Dialog/Dialog.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dialog.d.ts","sourceRoot":"","sources":["../../src/Dialog/Dialog.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,oBAAoB,EAAc,SAAS,EAAE,GAAG,EAAkB,MAAM,OAAO,CAAC;AAK9F,KAAK,KAAK,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;AAE7B,MAAM,WAAW,WACf,SAAQ,IAAI,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,OAAO,GAAG,SAAS,GAAG,MAAM,CAAC;IACnF,2DAA2D;IAC3D,IAAI,EAAE,OAAO,CAAC;IACd,oFAAoF;IACpF,OAAO,EAAE,CAAC,MAAM,EAAE,KAAK,GAAG,UAAU,GAAG,cAAc,KAAK,IAAI,CAAC;IAC/D,sFAAsF;IACtF,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,2EAA2E;IAC3E,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,wDAAwD;IACxD,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,mGAAmG;IACnG,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,wDAAwD;IACxD,GAAG,CAAC,EAAE,GAAG,CAAC,iBAAiB,CAAC,CAAC;CAC9B;AAQD;;uDAEuD;AACvD,wBAAgB,MAAM,CAAC,EACrB,IAAI,EACJ,OAAO,EACP,KAAK,EACL,MAAM,EACN,KAAW,EACX,WAAkB,EAClB,SAAS,EACT,QAAQ,EACR,GAAG,EACH,GAAG,IAAI,EACR,EAAE,WAAW,+BAuEb"}

package/dist/Field/Field.d.ts

@@ -0,0 +1,36 @@
+import type { HTMLAttributes, ReactNode, Ref } from "react";
+/** Wiring a Field provides to its control (Input/Select consume it; D49). */
+export interface FieldContextValue {
+    /** Generated (or htmlFor-overridden) id the label points at. */
+    id: string;
+    /** id of the rendered message line, if any — joins aria-describedby. */
+    describedBy?: string;
+    /** True when the Field carries an error. */
+    invalid: boolean;
+    /** Mirrors Field's required prop into the control. */
+    required: boolean;
+}
+export declare const FieldContext: import("react").Context<FieldContextValue | null>;
+export interface FieldProps extends HTMLAttributes<HTMLElement> {
+    /** Label content; renders a <label> (or <legend> in group mode). */
+    label?: ReactNode;
+    /** Helper line under the control; replaced by error when error is set. */
+    description?: ReactNode;
+    /** Error content; when truthy it replaces the description and switches the
+     * field (and a wrapped Input/Select) into error state. */
+    error?: ReactNode;
+    /** Renders the required marker and flows `required` to the control. @default false */
+    required?: boolean;
+    /** Group mode: fieldset/legend wrapping several self-labeled controls
+     * (Checkbox/Switch); the message describes the whole group. @default false */
+    group?: boolean;
+    /** Override the generated control id (pair it with the same id on the control). */
+    htmlFor?: string;
+    /** Forwarded ref to the root element. */
+    ref?: Ref<HTMLDivElement | HTMLFieldSetElement>;
+}
+/** Labeled form-row wrapper: label above, control, one message line below —
+ * description normally, error when set (aria-live). Auto-wires
+ * id/aria-describedby/aria-invalid into Input and Select (D49). */
+export declare function Field({ label, description, error, required, group, htmlFor, className, children, ref, ...rest }: FieldProps): import("react").JSX.Element;
+//# sourceMappingURL=Field.d.ts.map

package/dist/Field/Field.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Field.d.ts","sourceRoot":"","sources":["../../src/Field/Field.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAG5D,6EAA6E;AAC7E,MAAM,WAAW,iBAAiB;IAChC,gEAAgE;IAChE,EAAE,EAAE,MAAM,CAAC;IACX,wEAAwE;IACxE,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,4CAA4C;IAC5C,OAAO,EAAE,OAAO,CAAC;IACjB,sDAAsD;IACtD,QAAQ,EAAE,OAAO,CAAC;CACnB;AAED,eAAO,MAAM,YAAY,mDAAgD,CAAC;AAE1E,MAAM,WAAW,UAAW,SAAQ,cAAc,CAAC,WAAW,CAAC;IAC7D,oEAAoE;IACpE,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,0EAA0E;IAC1E,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB;8DAC0D;IAC1D,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,sFAAsF;IACtF,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;kFAC8E;IAC9E,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,mFAAmF;IACnF,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,yCAAyC;IACzC,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,GAAG,mBAAmB,CAAC,CAAC;CACjD;AAED;;mEAEmE;AACnE,wBAAgB,KAAK,CAAC,EACpB,KAAK,EACL,WAAW,EACX,KAAK,EACL,QAAgB,EAChB,KAAa,EACb,OAAO,EACP,SAAS,EACT,QAAQ,EACR,GAAG,EACH,GAAG,IAAI,EACR,EAAE,UAAU,+BAwDZ"}

package/dist/Input/Input.d.ts

@@ -3,12 +3,14 @@ type Size = 24 | 32 | 40 | 48;
 export interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
     /** Height in px (24 | 32 | 40 | 48). @default 32 */
     size?: Size;
-    /** Show error styling. @default false */
+    /** Show error styling. Inside a Field, the Field's error also lights this. @default false */
     error?: boolean;
     /** Forwarded ref to the underlying `<input>` element. */
     ref?: Ref<HTMLInputElement>;
 }
-/** Single-line text input with pixel-true heights (24–48) and an error state. */
+/** Single-line text input with pixel-true heights (24–48) and an error state.
+ * Inside a Field, id/aria-describedby/aria-invalid/required are wired
+ * automatically (D49). */
 export declare function Input({ size, error, className, ref, ...rest }: InputProps): import("react").JSX.Element;
 export {};
 //# sourceMappingURL=Input.d.ts.map

package/dist/Input/Input.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Input.d.ts","sourceRoot":"","sources":["../../src/Input/Input.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,mBAAmB,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAGtD,KAAK,IAAI,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC;AAE9B,MAAM,WAAW,UAAW,SAAQ,mBAAmB,CAAC,gBAAgB,CAAC;IACvE,oDAAoD;IACpD,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,yCAAyC;IACzC,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,yDAAyD;IACzD,GAAG,CAAC,EAAE,GAAG,CAAC,gBAAgB,CAAC,CAAC;CAC7B;AASD,iFAAiF;AACjF,wBAAgB,KAAK,CAAC,EACpB,IAAS,EACT,KAAa,EACb,SAAS,EACT,GAAG,EACH,GAAG,IAAI,EACR,EAAE,UAAU,+BAWZ"}
+{"version":3,"file":"Input.d.ts","sourceRoot":"","sources":["../../src/Input/Input.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,mBAAmB,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAItD,KAAK,IAAI,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC;AAE9B,MAAM,WAAW,UAAW,SAAQ,mBAAmB,CAAC,gBAAgB,CAAC;IACvE,oDAAoD;IACpD,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,6FAA6F;IAC7F,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,yDAAyD;IACzD,GAAG,CAAC,EAAE,GAAG,CAAC,gBAAgB,CAAC,CAAC;CAC7B;AASD;;0BAE0B;AAC1B,wBAAgB,KAAK,CAAC,EAAE,IAAS,EAAE,KAAa,EAAE,SAAS,EAAE,GAAG,EAAE,GAAG,IAAI,EAAE,EAAE,UAAU,+BAqBtF"}

package/dist/Select/Select.d.ts

@@ -8,12 +8,14 @@ export interface SelectProps extends SelectHTMLAttributes<HTMLSelectElement> {
      * @default 32
      */
     size?: Size;
-    /** Show error styling. @default false */
+    /** Show error styling. Inside a Field, the Field's error also lights this. @default false */
     error?: boolean;
     /** Forwarded ref to the underlying `<select>` element. */
     ref?: Ref<HTMLSelectElement>;
 }
-/** Styled native `<select>` with pixel-true heights (24–48) and an error state. */
+/** Styled native `<select>` with pixel-true heights (24–48) and an error state.
+ * Inside a Field, id/aria-describedby/aria-invalid/required are wired
+ * automatically (D49). */
 export declare function Select({ size, error, className, ref, children, ...rest }: SelectProps): import("react").JSX.Element;
 export {};
 //# sourceMappingURL=Select.d.ts.map

package/dist/Select/Select.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../src/Select/Select.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,oBAAoB,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAGvD,KAAK,IAAI,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC;AAE9B,MAAM,WAAW,WAAY,SAAQ,oBAAoB,CAAC,iBAAiB,CAAC;IAC1E;;;;;OAKG;IACH,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,yCAAyC;IACzC,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,0DAA0D;IAC1D,GAAG,CAAC,EAAE,GAAG,CAAC,iBAAiB,CAAC,CAAC;CAC9B;AASD,mFAAmF;AACnF,wBAAgB,MAAM,CAAC,EACrB,IAAS,EACT,KAAa,EACb,SAAS,EACT,GAAG,EACH,QAAQ,EACR,GAAG,IAAI,EACR,EAAE,WAAW,+BAeb"}
+{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../src/Select/Select.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,oBAAoB,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAIvD,KAAK,IAAI,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC;AAE9B,MAAM,WAAW,WAAY,SAAQ,oBAAoB,CAAC,iBAAiB,CAAC;IAC1E;;;;;OAKG;IACH,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,6FAA6F;IAC7F,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,0DAA0D;IAC1D,GAAG,CAAC,EAAE,GAAG,CAAC,iBAAiB,CAAC,CAAC;CAC9B;AASD;;0BAE0B;AAC1B,wBAAgB,MAAM,CAAC,EACrB,IAAS,EACT,KAAa,EACb,SAAS,EACT,GAAG,EACH,QAAQ,EACR,GAAG,IAAI,EACR,EAAE,WAAW,+BA4Bb"}

package/dist/a11y-meta.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"a11y-meta.d.ts","sourceRoot":"","sources":["../src/a11y-meta.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,MAAM,WAAW,SAAS;IACxB,QAAQ,EAAE,KAAK,CAAC;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,QAAQ,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IACpD,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,eAAO,MAAM,QAAQ,EAAE,MAAM,CAAC,MAAM,EAAE,SAAS,CA2C9C,CAAC"}
+{"version":3,"file":"a11y-meta.d.ts","sourceRoot":"","sources":["../src/a11y-meta.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,MAAM,WAAW,SAAS;IACxB,QAAQ,EAAE,KAAK,CAAC;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,QAAQ,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IACpD,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,eAAO,MAAM,QAAQ,EAAE,MAAM,CAAC,MAAM,EAAE,SAAS,CA4D9C,CAAC"}

package/dist/index.d.ts

@@ -8,6 +8,10 @@ export { NavBar } from "./NavBar/NavBar.js";
 export type { NavBarProps } from "./NavBar/NavBar.js";
 export { AspectRatio } from "./AspectRatio/AspectRatio.js";
 export type { AspectRatioProps } from "./AspectRatio/AspectRatio.js";
+export { Field } from "./Field/Field.js";
+export type { FieldProps } from "./Field/Field.js";
+export { Dialog } from "./Dialog/Dialog.js";
+export type { DialogProps } from "./Dialog/Dialog.js";
 export { Input } from "./Input/Input.js";
 export type { InputProps } from "./Input/Input.js";
 export { Select } from "./Select/Select.js";

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,oBAAoB,CAAC;AAC5C,YAAY,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC;AACtD,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAC;AACxD,YAAY,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAClE,OAAO,EAAE,IAAI,EAAE,MAAM,gBAAgB,CAAC;AACtC,YAAY,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAChD,OAAO,EAAE,MAAM,EAAE,MAAM,oBAAoB,CAAC;AAC5C,YAAY,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC;AACtD,OAAO,EAAE,WAAW,EAAE,MAAM,8BAA8B,CAAC;AAC3D,YAAY,EAAE,gBAAgB,EAAE,MAAM,8BAA8B,CAAC;AACrE,OAAO,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AACzC,YAAY,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AACnD,OAAO,EAAE,MAAM,EAAE,MAAM,oBAAoB,CAAC;AAC5C,YAAY,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC;AACtD,OAAO,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AAClD,YAAY,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAC5D,OAAO,EAAE,MAAM,EAAE,MAAM,oBAAoB,CAAC;AAC5C,YAAY,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC;AACtD,OAAO,EAAE,GAAG,EAAE,MAAM,cAAc,CAAC;AACnC,YAAY,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAC7C,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAC/C,YAAY,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AACzD,OAAO,EACL,QAAQ,EACR,SAAS,EACT,SAAS,EACT,SAAS,EACT,eAAe,EACf,gBAAgB,EAChB,UAAU,EACV,YAAY,EACZ,QAAQ,EACR,QAAQ,EACR,SAAS,EACT,QAAQ,EACR,gBAAgB,EAChB,OAAO,EACP,UAAU,EACV,UAAU,EACV,aAAa,EACb,gBAAgB,EAChB,YAAY,EACZ,UAAU,EACV,KAAK,EACL,aAAa,GACd,MAAM,kBAAkB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,oBAAoB,CAAC;AAC5C,YAAY,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC;AACtD,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAC;AACxD,YAAY,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAClE,OAAO,EAAE,IAAI,EAAE,MAAM,gBAAgB,CAAC;AACtC,YAAY,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAChD,OAAO,EAAE,MAAM,EAAE,MAAM,oBAAoB,CAAC;AAC5C,YAAY,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC;AACtD,OAAO,EAAE,WAAW,EAAE,MAAM,8BAA8B,CAAC;AAC3D,YAAY,EAAE,gBAAgB,EAAE,MAAM,8BAA8B,CAAC;AACrE,OAAO,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AACzC,YAAY,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AACnD,OAAO,EAAE,MAAM,EAAE,MAAM,oBAAoB,CAAC;AAC5C,YAAY,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC;AACtD,OAAO,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AACzC,YAAY,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AACnD,OAAO,EAAE,MAAM,EAAE,MAAM,oBAAoB,CAAC;AAC5C,YAAY,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC;AACtD,OAAO,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AAClD,YAAY,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAC5D,OAAO,EAAE,MAAM,EAAE,MAAM,oBAAoB,CAAC;AAC5C,YAAY,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC;AACtD,OAAO,EAAE,GAAG,EAAE,MAAM,cAAc,CAAC;AACnC,YAAY,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAC7C,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAC/C,YAAY,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AACzD,OAAO,EACL,QAAQ,EACR,SAAS,EACT,SAAS,EACT,SAAS,EACT,eAAe,EACf,gBAAgB,EAChB,UAAU,EACV,YAAY,EACZ,QAAQ,EACR,QAAQ,EACR,SAAS,EACT,QAAQ,EACR,gBAAgB,EAChB,OAAO,EACP,UAAU,EACV,UAAU,EACV,aAAa,EACb,gBAAgB,EAChB,YAAY,EACZ,UAAU,EACV,KAAK,EACL,aAAa,GACd,MAAM,kBAAkB,CAAC"}