@hjmds/react 0.8.2

package/dist/forms.d.ts

@@ -0,0 +1,160 @@
+import { type FieldShape, type FieldVariant } from "@hjmds/design-contracts/recipes/base";
+import { type SearchFieldSize } from "@hjmds/design-contracts/recipes";
+import { type PasswordFieldAutofillHint, type PasswordFieldSize } from "@hjmds/design-contracts/components/password-field";
+import { type OtpFieldSize } from "@hjmds/design-contracts/components/otp-field";
+import { type HTMLAttributes, type InputHTMLAttributes, type ReactNode, type TextareaHTMLAttributes } from "react";
+type FieldCopyProps = Readonly<{
+    label?: ReactNode;
+    description?: ReactNode;
+    error?: ReactNode;
+    required?: boolean;
+}>;
+type FieldFrameProps = HTMLAttributes<HTMLDivElement> & FieldCopyProps & Readonly<{
+    controlId: string;
+    descriptionId?: string;
+    errorId?: string;
+    disabled?: boolean;
+    focused?: boolean;
+    variant?: FieldVariant;
+    shape?: FieldShape;
+    children: ReactNode;
+}>;
+export type FieldControlProps = Readonly<{
+    id: string;
+    required: boolean;
+    disabled: boolean;
+    "aria-invalid"?: true;
+    "aria-describedby"?: string;
+}>;
+export type FieldProps = Omit<FieldFrameProps, "children" | "descriptionId" | "errorId"> & Readonly<{
+    label: ReactNode;
+    children: ReactNode | ((props: FieldControlProps) => ReactNode);
+}>;
+/** Generic frame for custom native controls; `controlId` keeps the label explicit. */
+export declare function Field({ controlId, description, error, required, disabled, children, ...props }: FieldProps): import("react").JSX.Element;
+type SharedInputProps = FieldCopyProps & Readonly<{
+    variant?: FieldVariant;
+    shape?: FieldShape;
+    leading?: ReactNode;
+    trailing?: ReactNode;
+    fieldClassName?: string;
+}>;
+export type TextFieldProps = Omit<InputHTMLAttributes<HTMLInputElement>, "size"> & SharedInputProps;
+export declare const TextField: import("react").ForwardRefExoticComponent<Omit<InputHTMLAttributes<HTMLInputElement>, "size"> & Readonly<{
+    label?: ReactNode;
+    description?: ReactNode;
+    error?: ReactNode;
+    required?: boolean;
+}> & Readonly<{
+    variant?: FieldVariant;
+    shape?: FieldShape;
+    leading?: ReactNode;
+    trailing?: ReactNode;
+    fieldClassName?: string;
+}> & import("react").RefAttributes<HTMLInputElement>>;
+export type TextAreaProps = TextareaHTMLAttributes<HTMLTextAreaElement> & Omit<SharedInputProps, "leading" | "trailing">;
+export declare const TextArea: import("react").ForwardRefExoticComponent<TextareaHTMLAttributes<HTMLTextAreaElement> & Omit<SharedInputProps, "leading" | "trailing"> & import("react").RefAttributes<HTMLTextAreaElement>>;
+export type SearchFieldProps = Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "size" | "value" | "defaultValue"> & SharedInputProps & Readonly<{
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+    size?: SearchFieldSize;
+    /** Localized accessible name for the clear action. */
+    clearLabel: string;
+    onClear?: () => void;
+    /** Keeps the input mounted and named while replacing trailing actions with progress. */
+    loading?: boolean;
+    /** Product icon adapter; the renderer owns size and inherited color. */
+    renderSearchIcon?: (props: SearchFieldIconRenderProps) => ReactNode;
+    /** Product icon adapter for the clear action. */
+    renderClearIcon?: (props: SearchFieldIconRenderProps) => ReactNode;
+    /** Optional progress adapter. The default is the canonical CSS spinner. */
+    renderLoadingIndicator?: (props: SearchFieldIconRenderProps) => ReactNode;
+}>;
+export type SearchFieldIconRenderProps = Readonly<{
+    color: "currentColor";
+    size: number;
+}>;
+export declare const SearchField: import("react").ForwardRefExoticComponent<Omit<InputHTMLAttributes<HTMLInputElement>, "value" | "defaultValue" | "type" | "size"> & Readonly<{
+    label?: ReactNode;
+    description?: ReactNode;
+    error?: ReactNode;
+    required?: boolean;
+}> & Readonly<{
+    variant?: FieldVariant;
+    shape?: FieldShape;
+    leading?: ReactNode;
+    trailing?: ReactNode;
+    fieldClassName?: string;
+}> & Readonly<{
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+    size?: SearchFieldSize;
+    /** Localized accessible name for the clear action. */
+    clearLabel: string;
+    onClear?: () => void;
+    /** Keeps the input mounted and named while replacing trailing actions with progress. */
+    loading?: boolean;
+    /** Product icon adapter; the renderer owns size and inherited color. */
+    renderSearchIcon?: (props: SearchFieldIconRenderProps) => ReactNode;
+    /** Product icon adapter for the clear action. */
+    renderClearIcon?: (props: SearchFieldIconRenderProps) => ReactNode;
+    /** Optional progress adapter. The default is the canonical CSS spinner. */
+    renderLoadingIndicator?: (props: SearchFieldIconRenderProps) => ReactNode;
+}> & import("react").RefAttributes<HTMLInputElement>>;
+export type PasswordFieldToggleRenderProps = Readonly<{
+    name: "visibility" | "visibilityOff";
+    color: "currentColor";
+    size: number;
+    revealed: boolean;
+    disabled: boolean;
+}>;
+export type PasswordFieldProps = Omit<TextFieldProps, "autoComplete" | "defaultValue" | "size" | "trailing" | "type" | "value"> & Readonly<{
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+    revealed?: boolean;
+    defaultRevealed?: boolean;
+    onRevealedChange?: (revealed: boolean) => void;
+    autofillHint: PasswordFieldAutofillHint;
+    revealLabel: string;
+    concealLabel: string;
+    size?: PasswordFieldSize;
+    renderToggleIcon?: (props: PasswordFieldToggleRenderProps) => ReactNode;
+}>;
+/** Password input with an independently controlled, selection-safe reveal action. */
+export declare const PasswordField: import("react").ForwardRefExoticComponent<Omit<TextFieldProps, "value" | "defaultValue" | "type" | "size" | "trailing" | "autoComplete"> & Readonly<{
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+    revealed?: boolean;
+    defaultRevealed?: boolean;
+    onRevealedChange?: (revealed: boolean) => void;
+    autofillHint: PasswordFieldAutofillHint;
+    revealLabel: string;
+    concealLabel: string;
+    size?: PasswordFieldSize;
+    renderToggleIcon?: (props: PasswordFieldToggleRenderProps) => ReactNode;
+}> & import("react").RefAttributes<HTMLInputElement>>;
+export type OtpFieldProps = Omit<TextFieldProps, "autoComplete" | "defaultValue" | "leading" | "maxLength" | "shape" | "size" | "trailing" | "type" | "value" | "variant"> & Readonly<{
+    length: number;
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+    onComplete?: (value: string) => void;
+    size?: OtpFieldSize;
+    busy?: boolean;
+}>;
+/** One accessible numeric input rendered as decorative OTP slots. */
+export declare const OtpField: import("react").ForwardRefExoticComponent<Omit<TextFieldProps, "value" | "defaultValue" | "type" | "variant" | "size" | "leading" | "trailing" | "shape" | "autoComplete" | "maxLength"> & Readonly<{
+    length: number;
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+    onComplete?: (value: string) => void;
+    size?: OtpFieldSize;
+    busy?: boolean;
+}> & import("react").RefAttributes<HTMLInputElement>>;
+export {};
+//# sourceMappingURL=forms.d.ts.map

package/dist/forms.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"forms.d.ts","sourceRoot":"","sources":["../src/forms.tsx"],"names":[],"mappings":"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"}

package/dist/forms.js

@@ -0,0 +1,178 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { fieldRecipe, } from "@hjmds/design-contracts/recipes/base";
+import { iconRecipe, searchFieldRecipe, } from "@hjmds/design-contracts/recipes";
+import { passwordFieldRecipe, resolvePasswordFieldDescriptor, } from "@hjmds/design-contracts/components/password-field";
+import { getOtpFieldSlotValues, otpFieldRecipe, resolveOtpFieldValue, } from "@hjmds/design-contracts/components/otp-field";
+import { forwardRef, useEffect, useId, useLayoutEffect, useRef, useState, } from "react";
+import { composeRefs, classNames, useControllableState } from "./internal.js";
+function FieldFrame({ controlId, label, description, error, descriptionId, errorId, required = false, disabled = false, focused = false, variant = fieldRecipe.defaults.variant, shape = fieldRecipe.defaults.shape, className, children, ...props }) {
+    const state = disabled ? "disabled" : error ? "invalid" : focused ? "focused" : "idle";
+    return (_jsxs("div", { ...props, className: classNames("hjm-field", className), "data-state": state, "data-variant": variant, "data-shape": shape, children: [label !== undefined && label !== null ? (_jsxs("label", { className: "hjm-field__label", htmlFor: controlId, children: [label, required ? _jsx("span", { "aria-hidden": "true", children: " *" }) : null] })) : null, children, description && !error ? (_jsx("div", { id: descriptionId, className: "hjm-field__description", children: description })) : null, error ? (_jsx("div", { id: errorId, className: "hjm-field__error", children: error })) : null] }));
+}
+/** Generic frame for custom native controls; `controlId` keeps the label explicit. */
+export function Field({ controlId, description, error, required = false, disabled = false, children, ...props }) {
+    const descriptionId = `${controlId}-description`;
+    const errorId = `${controlId}-error`;
+    const controlProps = {
+        id: controlId,
+        required,
+        disabled,
+        ...(error ? { "aria-invalid": true } : {}),
+        ...(error
+            ? { "aria-describedby": errorId }
+            : description
+                ? { "aria-describedby": descriptionId }
+                : {}),
+    };
+    return (_jsx(FieldFrame, { ...props, controlId: controlId, description: description, error: error, required: required, disabled: disabled, ...(description ? { descriptionId } : {}), ...(error ? { errorId } : {}), children: typeof children === "function" ? children(controlProps) : children }));
+}
+function useFieldIds(id) {
+    const generatedId = useId();
+    const controlId = id ?? `hjm-${generatedId.replaceAll(":", "")}`;
+    return {
+        controlId,
+        descriptionId: `${controlId}-description`,
+        errorId: `${controlId}-error`,
+    };
+}
+function describedBy(own, description, error, descriptionId, errorId) {
+    return [own, error ? errorId : description ? descriptionId : undefined]
+        .filter(Boolean)
+        .join(" ") || undefined;
+}
+function requireFieldAccessibleName(label, ariaLabel) {
+    if ((label === undefined || label === null) && !ariaLabel?.trim()) {
+        throw new TypeError("Field controls require either label or aria-label");
+    }
+}
+export const TextField = forwardRef(function TextField({ id, label, description, error, required, disabled, variant, shape, leading, trailing, fieldClassName, className, onFocus, onBlur, "aria-describedby": ariaDescribedBy, "aria-invalid": ariaInvalid, "aria-label": ariaLabel, ...props }, ref) {
+    const ids = useFieldIds(id);
+    const [focused, setFocused] = useState(false);
+    requireFieldAccessibleName(label, ariaLabel);
+    const handleFocus = (event) => {
+        setFocused(true);
+        onFocus?.(event);
+    };
+    const handleBlur = (event) => {
+        setFocused(false);
+        onBlur?.(event);
+    };
+    return (_jsx(FieldFrame, { controlId: ids.controlId, label: label, description: description, error: error, required: required ?? false, disabled: disabled ?? false, focused: focused, variant: variant ?? fieldRecipe.defaults.variant, shape: shape ?? fieldRecipe.defaults.shape, className: fieldClassName, ...(description ? { descriptionId: ids.descriptionId } : {}), ...(error ? { errorId: ids.errorId } : {}), children: _jsxs("div", { className: "hjm-field__control", children: [leading ? _jsx("span", { className: "hjm-field__affix", children: leading }) : null, _jsx("input", { ...props, ref: ref, id: ids.controlId, className: classNames("hjm-field__input", className), required: required, disabled: disabled, "aria-invalid": error ? true : ariaInvalid, "aria-label": ariaLabel, "aria-describedby": describedBy(ariaDescribedBy, description, error, ids.descriptionId, ids.errorId), onFocus: handleFocus, onBlur: handleBlur }), trailing ? _jsx("span", { className: "hjm-field__affix", children: trailing }) : null] }) }));
+});
+export const TextArea = forwardRef(function TextArea({ id, label, description, error, required, disabled, variant, shape, fieldClassName, className, onFocus, onBlur, "aria-describedby": ariaDescribedBy, "aria-invalid": ariaInvalid, "aria-label": ariaLabel, ...props }, ref) {
+    const ids = useFieldIds(id);
+    const [focused, setFocused] = useState(false);
+    requireFieldAccessibleName(label, ariaLabel);
+    return (_jsx(FieldFrame, { controlId: ids.controlId, label: label, description: description, error: error, required: required ?? false, disabled: disabled ?? false, focused: focused, variant: variant ?? fieldRecipe.defaults.variant, shape: shape ?? fieldRecipe.defaults.shape, className: fieldClassName, ...(description ? { descriptionId: ids.descriptionId } : {}), ...(error ? { errorId: ids.errorId } : {}), children: _jsx("div", { className: "hjm-field__control hjm-field__control--multiline", children: _jsx("textarea", { ...props, ref: ref, id: ids.controlId, className: classNames("hjm-field__input", className), required: required, disabled: disabled, "aria-invalid": error ? true : ariaInvalid, "aria-label": ariaLabel, "aria-describedby": describedBy(ariaDescribedBy, description, error, ids.descriptionId, ids.errorId), onFocus: (event) => {
+                    setFocused(true);
+                    onFocus?.(event);
+                }, onBlur: (event) => {
+                    setFocused(false);
+                    onBlur?.(event);
+                } }) }) }));
+});
+export const SearchField = forwardRef(function SearchField({ value: valueProp, defaultValue = "", onValueChange, onChange, size = searchFieldRecipe.defaults.size, clearLabel, onClear, loading = false, renderSearchIcon, renderClearIcon, renderLoadingIndicator, leading, trailing, fieldClassName, disabled, "aria-busy": ariaBusy, ...props }, forwardedRef) {
+    const [value, setValue] = useControllableState({
+        ...(valueProp === undefined ? {} : { value: valueProp }),
+        defaultValue,
+        ...(onValueChange === undefined ? {} : { onChange: onValueChange }),
+    });
+    const inputRef = useRef(null);
+    const iconAppearance = {
+        color: "currentColor",
+        size: iconRecipe.sizes[searchFieldRecipe.sizes[size].glyph],
+    };
+    const canClear = value.length > 0 && !disabled;
+    return (_jsx(TextField, { ...props, ref: composeRefs(inputRef, forwardedRef), type: "search", value: value, "data-size": size, "data-loading": loading || undefined, disabled: disabled, "aria-busy": loading || ariaBusy || undefined, fieldClassName: classNames("hjm-search-field", fieldClassName), leading: leading ?? (renderSearchIcon ? renderSearchIcon(iconAppearance) : undefined), onChange: (event) => {
+            setValue(event.currentTarget.value);
+            onChange?.(event);
+        }, trailing: loading ? (_jsx("span", { className: "hjm-search-field__spinner", "aria-hidden": "true", children: renderLoadingIndicator?.(iconAppearance) })) : canClear ? (_jsx("button", { type: "button", className: "hjm-search-field__clear", "aria-label": clearLabel, onMouseDown: (event) => event.preventDefault(), onClick: () => {
+                setValue("");
+                onClear?.();
+                inputRef.current?.focus();
+            }, children: renderClearIcon?.(iconAppearance) ?? "×" })) : trailing }));
+});
+/** Password input with an independently controlled, selection-safe reveal action. */
+export const PasswordField = forwardRef(function PasswordField({ value: valueProp, defaultValue = "", onValueChange, onChange, revealed: revealedProp, defaultRevealed = false, onRevealedChange, autofillHint, revealLabel, concealLabel, size = passwordFieldRecipe.defaults.size, renderToggleIcon, fieldClassName, className, disabled, readOnly, ...props }, forwardedRef) {
+    const [value, setValue] = useControllableState({
+        ...(valueProp === undefined ? {} : { value: valueProp }),
+        defaultValue,
+        ...(onValueChange === undefined ? {} : { onChange: onValueChange }),
+    });
+    const [revealed, setRevealed] = useControllableState({
+        ...(revealedProp === undefined ? {} : { value: revealedProp }),
+        defaultValue: defaultRevealed,
+        ...(onRevealedChange === undefined ? {} : { onChange: onRevealedChange }),
+    });
+    const resolved = resolvePasswordFieldDescriptor({ revealed, autofillHint }, {
+        composeToggleAccessibleName: ({ willReveal }) => willReveal ? revealLabel : concealLabel,
+    });
+    const inputRef = useRef(null);
+    const selectionRef = useRef(null);
+    useLayoutEffect(() => {
+        const selection = selectionRef.current;
+        if (!selection || !inputRef.current)
+            return;
+        inputRef.current.setSelectionRange(selection.start, selection.end);
+        selectionRef.current = null;
+    }, [revealed]);
+    const toggleAppearance = {
+        name: revealed
+            ? passwordFieldRecipe.toggle.icons.revealed
+            : passwordFieldRecipe.toggle.icons.concealed,
+        color: "currentColor",
+        size: iconRecipe.sizes.sm,
+        revealed,
+        disabled: disabled ?? false,
+    };
+    return (_jsx(TextField, { ...props, ref: composeRefs(inputRef, forwardedRef), autoComplete: autofillHint === "current" ? "current-password" : "new-password", className: classNames("hjm-password-field__input", className), disabled: disabled, fieldClassName: classNames("hjm-password-field", `hjm-password-field--${size}`, fieldClassName), onChange: (event) => {
+            setValue(event.currentTarget.value);
+            onChange?.(event);
+        }, readOnly: readOnly, trailing: (_jsx("button", { "aria-label": resolved.toggleAccessibleName, "aria-pressed": revealed, className: "hjm-password-field__toggle", "data-revealed": revealed || undefined, disabled: disabled, onClick: () => {
+                const input = inputRef.current;
+                if (input && input.selectionStart !== null && input.selectionEnd !== null) {
+                    selectionRef.current = {
+                        start: input.selectionStart,
+                        end: input.selectionEnd,
+                    };
+                }
+                setRevealed(!revealed);
+            }, type: "button", children: renderToggleIcon?.(toggleAppearance) ?? _jsx("span", { "aria-hidden": "true" }) })), type: resolved.webInputType, value: value }));
+});
+/** One accessible numeric input rendered as decorative OTP slots. */
+export const OtpField = forwardRef(function OtpField({ id, label, description, error, required, disabled, readOnly, busy = false, length, value: valueProp, defaultValue = "", onValueChange, onComplete, onChange, size = otpFieldRecipe.defaults.size, fieldClassName, className, onFocus, onBlur, "aria-describedby": ariaDescribedBy, "aria-invalid": ariaInvalid, "aria-label": ariaLabel, ...props }, ref) {
+    const ids = useFieldIds(id);
+    const [focused, setFocused] = useState(false);
+    requireFieldAccessibleName(label, ariaLabel);
+    const [value, setValue] = useControllableState({
+        ...(valueProp === undefined ? {} : { value: valueProp }),
+        defaultValue: resolveOtpFieldValue(length, defaultValue),
+        ...(onValueChange === undefined ? {} : { onChange: onValueChange }),
+    });
+    const slots = getOtpFieldSlotValues({ length, value });
+    const complete = value.length === length;
+    const wasCompleteRef = useRef(complete);
+    useEffect(() => {
+        if (complete && !wasCompleteRef.current)
+            onComplete?.(value);
+        wasCompleteRef.current = complete;
+    }, [complete, onComplete, value]);
+    const activeIndex = Math.min(value.length, length - 1);
+    return (_jsx(FieldFrame, { className: classNames("hjm-otp-field", fieldClassName), controlId: ids.controlId, description: description, disabled: (disabled ?? false) || busy, error: error, focused: focused, label: label, required: required ?? false, ...(description ? { descriptionId: ids.descriptionId } : {}), ...(error ? { errorId: ids.errorId } : {}), children: _jsxs("div", { className: "hjm-otp-field__control", "data-complete": complete || undefined, "data-size": size, style: { "--hjm-otp-length": length }, children: [_jsx("input", { ...props, ref: ref, "aria-busy": busy || undefined, "aria-describedby": describedBy(ariaDescribedBy, description, error, ids.descriptionId, ids.errorId), "aria-invalid": error ? true : ariaInvalid, "aria-label": ariaLabel, autoComplete: "one-time-code", className: classNames("hjm-otp-field__input", className), disabled: disabled || busy, id: ids.controlId, inputMode: "numeric", maxLength: length, onBlur: (event) => {
+                        setFocused(false);
+                        onBlur?.(event);
+                    }, onChange: (event) => {
+                        setValue(resolveOtpFieldValue(length, event.currentTarget.value));
+                        onChange?.(event);
+                    }, onFocus: (event) => {
+                        setFocused(true);
+                        onFocus?.(event);
+                    }, pattern: "[0-9]*", readOnly: readOnly, required: required, type: "text", value: value }), _jsx("div", { "aria-hidden": "true", className: "hjm-otp-field__slots", children: slots.map((digit, index) => (_jsx("span", { className: "hjm-otp-field__slot", "data-state": error
+                            ? "invalid"
+                            : focused && index === activeIndex
+                                ? "focused"
+                                : digit
+                                    ? "filled"
+                                    : "idle", children: digit }, index))) })] }) }));
+});
+//# sourceMappingURL=forms.js.map

package/dist/forms.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"forms.js","sourceRoot":"","sources":["../src/forms.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  fieldRecipe,\n  type FieldShape,\n  type FieldVariant,\n} from \"@hjmds/design-contracts/recipes/base\";\nimport {\n  iconRecipe,\n  searchFieldRecipe,\n  type SearchFieldSize,\n} from \"@hjmds/design-contracts/recipes\";\nimport {\n  passwordFieldRecipe,\n  resolvePasswordFieldDescriptor,\n  type PasswordFieldAutofillHint,\n  type PasswordFieldSize,\n} from \"@hjmds/design-contracts/components/password-field\";\nimport {\n  getOtpFieldSlotValues,\n  otpFieldRecipe,\n  resolveOtpFieldValue,\n  type OtpFieldSize,\n} from \"@hjmds/design-contracts/components/otp-field\";\nimport {\n  forwardRef,\n  useEffect,\n  useId,\n  useLayoutEffect,\n  useRef,\n  useState,\n  type CSSProperties,\n  type FocusEvent,\n  type HTMLAttributes,\n  type InputHTMLAttributes,\n  type ReactNode,\n  type TextareaHTMLAttributes,\n} from \"react\";\nimport { composeRefs, classNames, useControllableState } from \"./internal.js\";\n\ntype FieldCopyProps = Readonly<{\n  label?: ReactNode;\n  description?: ReactNode;\n  error?: ReactNode;\n  required?: boolean;\n}>;\n\ntype FieldFrameProps = HTMLAttributes<HTMLDivElement> &\n  FieldCopyProps &\n  Readonly<{\n    controlId: string;\n    descriptionId?: string;\n    errorId?: string;\n    disabled?: boolean;\n    focused?: boolean;\n    variant?: FieldVariant;\n    shape?: FieldShape;\n    children: ReactNode;\n  }>;\n\nfunction FieldFrame({\n  controlId,\n  label,\n  description,\n  error,\n  descriptionId,\n  errorId,\n  required = false,\n  disabled = false,\n  focused = false,\n  variant = fieldRecipe.defaults.variant,\n  shape = fieldRecipe.defaults.shape,\n  className,\n  children,\n  ...props\n}: FieldFrameProps) {\n  const state = disabled ? \"disabled\" : error ? \"invalid\" : focused ? \"focused\" : \"idle\";\n  return (\n    <div\n      {...props}\n      className={classNames(\"hjm-field\", className)}\n      data-state={state}\n      data-variant={variant}\n      data-shape={shape}\n    >\n      {label !== undefined && label !== null ? (\n        <label className=\"hjm-field__label\" htmlFor={controlId}>\n          {label}\n          {required ? <span aria-hidden=\"true\"> *</span> : null}\n        </label>\n      ) : null}\n      {children}\n      {description && !error ? (\n        <div id={descriptionId} className=\"hjm-field__description\">\n          {description}\n        </div>\n      ) : null}\n      {error ? (\n        <div id={errorId} className=\"hjm-field__error\">\n          {error}\n        </div>\n      ) : null}\n    </div>\n  );\n}\n\nexport type FieldControlProps = Readonly<{\n  id: string;\n  required: boolean;\n  disabled: boolean;\n  \"aria-invalid\"?: true;\n  \"aria-describedby\"?: string;\n}>;\n\nexport type FieldProps = Omit<\n  FieldFrameProps,\n  \"children\" | \"descriptionId\" | \"errorId\"\n> &\n  Readonly<{\n    label: ReactNode;\n    children: ReactNode | ((props: FieldControlProps) => ReactNode);\n  }>;\n\n/** Generic frame for custom native controls; `controlId` keeps the label explicit. */\nexport function Field({\n  controlId,\n  description,\n  error,\n  required = false,\n  disabled = false,\n  children,\n  ...props\n}: FieldProps) {\n  const descriptionId = `${controlId}-description`;\n  const errorId = `${controlId}-error`;\n  const controlProps: FieldControlProps = {\n    id: controlId,\n    required,\n    disabled,\n    ...(error ? { \"aria-invalid\": true as const } : {}),\n    ...(error\n      ? { \"aria-describedby\": errorId }\n      : description\n        ? { \"aria-describedby\": descriptionId }\n        : {}),\n  };\n  return (\n    <FieldFrame\n      {...props}\n      controlId={controlId}\n      description={description}\n      error={error}\n      required={required}\n      disabled={disabled}\n      {...(description ? { descriptionId } : {})}\n      {...(error ? { errorId } : {})}\n    >\n      {typeof children === \"function\" ? children(controlProps) : children}\n    </FieldFrame>\n  );\n}\n\nfunction useFieldIds(id: string | undefined) {\n  const generatedId = useId();\n  const controlId = id ?? `hjm-${generatedId.replaceAll(\":\", \"\")}`;\n  return {\n    controlId,\n    descriptionId: `${controlId}-description`,\n    errorId: `${controlId}-error`,\n  } as const;\n}\n\nfunction describedBy(\n  own: string | undefined,\n  description: ReactNode | undefined,\n  error: ReactNode | undefined,\n  descriptionId: string,\n  errorId: string,\n): string | undefined {\n  return [own, error ? errorId : description ? descriptionId : undefined]\n    .filter(Boolean)\n    .join(\" \") || undefined;\n}\n\nfunction requireFieldAccessibleName(label: ReactNode | undefined, ariaLabel: string | undefined) {\n  if ((label === undefined || label === null) && !ariaLabel?.trim()) {\n    throw new TypeError(\"Field controls require either label or aria-label\");\n  }\n}\n\ntype SharedInputProps = FieldCopyProps &\n  Readonly<{\n    variant?: FieldVariant;\n    shape?: FieldShape;\n    leading?: ReactNode;\n    trailing?: ReactNode;\n    fieldClassName?: string;\n  }>;\n\nexport type TextFieldProps = Omit<InputHTMLAttributes<HTMLInputElement>, \"size\"> &\n  SharedInputProps;\n\nexport const TextField = forwardRef<HTMLInputElement, TextFieldProps>(\n  function TextField(\n    {\n      id,\n      label,\n      description,\n      error,\n      required,\n      disabled,\n      variant,\n      shape,\n      leading,\n      trailing,\n      fieldClassName,\n      className,\n      onFocus,\n      onBlur,\n      \"aria-describedby\": ariaDescribedBy,\n      \"aria-invalid\": ariaInvalid,\n      \"aria-label\": ariaLabel,\n      ...props\n    },\n    ref,\n  ) {\n    const ids = useFieldIds(id);\n    const [focused, setFocused] = useState(false);\n    requireFieldAccessibleName(label, ariaLabel);\n    const handleFocus = (event: FocusEvent<HTMLInputElement>) => {\n      setFocused(true);\n      onFocus?.(event);\n    };\n    const handleBlur = (event: FocusEvent<HTMLInputElement>) => {\n      setFocused(false);\n      onBlur?.(event);\n    };\n    return (\n      <FieldFrame\n        controlId={ids.controlId}\n        label={label}\n        description={description}\n        error={error}\n        required={required ?? false}\n        disabled={disabled ?? false}\n        focused={focused}\n        variant={variant ?? fieldRecipe.defaults.variant}\n        shape={shape ?? fieldRecipe.defaults.shape}\n        className={fieldClassName}\n        {...(description ? { descriptionId: ids.descriptionId } : {})}\n        {...(error ? { errorId: ids.errorId } : {})}\n      >\n        <div className=\"hjm-field__control\">\n          {leading ? <span className=\"hjm-field__affix\">{leading}</span> : null}\n          <input\n            {...props}\n            ref={ref}\n            id={ids.controlId}\n            className={classNames(\"hjm-field__input\", className)}\n            required={required}\n            disabled={disabled}\n            aria-invalid={error ? true : ariaInvalid}\n            aria-label={ariaLabel}\n            aria-describedby={describedBy(\n              ariaDescribedBy,\n              description,\n              error,\n              ids.descriptionId,\n              ids.errorId,\n            )}\n            onFocus={handleFocus}\n            onBlur={handleBlur}\n          />\n          {trailing ? <span className=\"hjm-field__affix\">{trailing}</span> : null}\n        </div>\n      </FieldFrame>\n    );\n  },\n);\n\nexport type TextAreaProps = TextareaHTMLAttributes<HTMLTextAreaElement> &\n  Omit<SharedInputProps, \"leading\" | \"trailing\">;\n\nexport const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(\n  function TextArea(\n    {\n      id,\n      label,\n      description,\n      error,\n      required,\n      disabled,\n      variant,\n      shape,\n      fieldClassName,\n      className,\n      onFocus,\n      onBlur,\n      \"aria-describedby\": ariaDescribedBy,\n      \"aria-invalid\": ariaInvalid,\n      \"aria-label\": ariaLabel,\n      ...props\n    },\n    ref,\n  ) {\n    const ids = useFieldIds(id);\n    const [focused, setFocused] = useState(false);\n    requireFieldAccessibleName(label, ariaLabel);\n    return (\n      <FieldFrame\n        controlId={ids.controlId}\n        label={label}\n        description={description}\n        error={error}\n        required={required ?? false}\n        disabled={disabled ?? false}\n        focused={focused}\n        variant={variant ?? fieldRecipe.defaults.variant}\n        shape={shape ?? fieldRecipe.defaults.shape}\n        className={fieldClassName}\n        {...(description ? { descriptionId: ids.descriptionId } : {})}\n        {...(error ? { errorId: ids.errorId } : {})}\n      >\n        <div className=\"hjm-field__control hjm-field__control--multiline\">\n          <textarea\n            {...props}\n            ref={ref}\n            id={ids.controlId}\n            className={classNames(\"hjm-field__input\", className)}\n            required={required}\n            disabled={disabled}\n            aria-invalid={error ? true : ariaInvalid}\n            aria-label={ariaLabel}\n            aria-describedby={describedBy(\n              ariaDescribedBy,\n              description,\n              error,\n              ids.descriptionId,\n              ids.errorId,\n            )}\n            onFocus={(event) => {\n              setFocused(true);\n              onFocus?.(event);\n            }}\n            onBlur={(event) => {\n              setFocused(false);\n              onBlur?.(event);\n            }}\n          />\n        </div>\n      </FieldFrame>\n    );\n  },\n);\n\nexport type SearchFieldProps = Omit<\n  InputHTMLAttributes<HTMLInputElement>,\n  \"type\" | \"size\" | \"value\" | \"defaultValue\"\n> &\n  SharedInputProps &\n  Readonly<{\n    value?: string;\n    defaultValue?: string;\n    onValueChange?: (value: string) => void;\n    size?: SearchFieldSize;\n    /** Localized accessible name for the clear action. */\n    clearLabel: string;\n    onClear?: () => void;\n    /** Keeps the input mounted and named while replacing trailing actions with progress. */\n    loading?: boolean;\n    /** Product icon adapter; the renderer owns size and inherited color. */\n    renderSearchIcon?: (props: SearchFieldIconRenderProps) => ReactNode;\n    /** Product icon adapter for the clear action. */\n    renderClearIcon?: (props: SearchFieldIconRenderProps) => ReactNode;\n    /** Optional progress adapter. The default is the canonical CSS spinner. */\n    renderLoadingIndicator?: (props: SearchFieldIconRenderProps) => ReactNode;\n  }>;\n\nexport type SearchFieldIconRenderProps = Readonly<{\n  color: \"currentColor\";\n  size: number;\n}>;\n\nexport const SearchField = forwardRef<HTMLInputElement, SearchFieldProps>(\n  function SearchField(\n    {\n      value: valueProp,\n      defaultValue = \"\",\n      onValueChange,\n      onChange,\n      size = searchFieldRecipe.defaults.size,\n      clearLabel,\n      onClear,\n      loading = false,\n      renderSearchIcon,\n      renderClearIcon,\n      renderLoadingIndicator,\n      leading,\n      trailing,\n      fieldClassName,\n      disabled,\n      \"aria-busy\": ariaBusy,\n      ...props\n    },\n    forwardedRef,\n  ) {\n    const [value, setValue] = useControllableState({\n      ...(valueProp === undefined ? {} : { value: valueProp }),\n      defaultValue,\n      ...(onValueChange === undefined ? {} : { onChange: onValueChange }),\n    });\n    const inputRef = useRef<HTMLInputElement>(null);\n    const iconAppearance: SearchFieldIconRenderProps = {\n      color: \"currentColor\",\n      size: iconRecipe.sizes[searchFieldRecipe.sizes[size].glyph],\n    };\n    const canClear = value.length > 0 && !disabled;\n    return (\n      <TextField\n        {...props}\n        ref={composeRefs(inputRef, forwardedRef)}\n        type=\"search\"\n        value={value}\n        data-size={size}\n        data-loading={loading || undefined}\n        disabled={disabled}\n        aria-busy={loading || ariaBusy || undefined}\n        fieldClassName={classNames(\"hjm-search-field\", fieldClassName)!}\n        leading={\n          leading ?? (renderSearchIcon ? renderSearchIcon(iconAppearance) : undefined)\n        }\n        onChange={(event) => {\n          setValue(event.currentTarget.value);\n          onChange?.(event);\n        }}\n        trailing={\n          loading ? (\n            <span className=\"hjm-search-field__spinner\" aria-hidden=\"true\">\n              {renderLoadingIndicator?.(iconAppearance)}\n            </span>\n          ) : canClear ? (\n            <button\n              type=\"button\"\n              className=\"hjm-search-field__clear\"\n              aria-label={clearLabel}\n              onMouseDown={(event) => event.preventDefault()}\n              onClick={() => {\n                setValue(\"\");\n                onClear?.();\n                inputRef.current?.focus();\n              }}\n            >\n              {renderClearIcon?.(iconAppearance) ?? \"×\"}\n            </button>\n          ) : trailing\n        }\n      />\n    );\n  },\n);\n\nexport type PasswordFieldToggleRenderProps = Readonly<{\n  name: \"visibility\" | \"visibilityOff\";\n  color: \"currentColor\";\n  size: number;\n  revealed: boolean;\n  disabled: boolean;\n}>;\n\nexport type PasswordFieldProps = Omit<\n  TextFieldProps,\n  \"autoComplete\" | \"defaultValue\" | \"size\" | \"trailing\" | \"type\" | \"value\"\n> &\n  Readonly<{\n    value?: string;\n    defaultValue?: string;\n    onValueChange?: (value: string) => void;\n    revealed?: boolean;\n    defaultRevealed?: boolean;\n    onRevealedChange?: (revealed: boolean) => void;\n    autofillHint: PasswordFieldAutofillHint;\n    revealLabel: string;\n    concealLabel: string;\n    size?: PasswordFieldSize;\n    renderToggleIcon?: (props: PasswordFieldToggleRenderProps) => ReactNode;\n  }>;\n\n/** Password input with an independently controlled, selection-safe reveal action. */\nexport const PasswordField = forwardRef<HTMLInputElement, PasswordFieldProps>(\n  function PasswordField(\n    {\n      value: valueProp,\n      defaultValue = \"\",\n      onValueChange,\n      onChange,\n      revealed: revealedProp,\n      defaultRevealed = false,\n      onRevealedChange,\n      autofillHint,\n      revealLabel,\n      concealLabel,\n      size = passwordFieldRecipe.defaults.size,\n      renderToggleIcon,\n      fieldClassName,\n      className,\n      disabled,\n      readOnly,\n      ...props\n    },\n    forwardedRef,\n  ) {\n    const [value, setValue] = useControllableState({\n      ...(valueProp === undefined ? {} : { value: valueProp }),\n      defaultValue,\n      ...(onValueChange === undefined ? {} : { onChange: onValueChange }),\n    });\n    const [revealed, setRevealed] = useControllableState({\n      ...(revealedProp === undefined ? {} : { value: revealedProp }),\n      defaultValue: defaultRevealed,\n      ...(onRevealedChange === undefined ? {} : { onChange: onRevealedChange }),\n    });\n    const resolved = resolvePasswordFieldDescriptor(\n      { revealed, autofillHint },\n      {\n        composeToggleAccessibleName: ({ willReveal }) =>\n          willReveal ? revealLabel : concealLabel,\n      },\n    );\n    const inputRef = useRef<HTMLInputElement>(null);\n    const selectionRef = useRef<Readonly<{ start: number; end: number }> | null>(null);\n\n    useLayoutEffect(() => {\n      const selection = selectionRef.current;\n      if (!selection || !inputRef.current) return;\n      inputRef.current.setSelectionRange(selection.start, selection.end);\n      selectionRef.current = null;\n    }, [revealed]);\n\n    const toggleAppearance: PasswordFieldToggleRenderProps = {\n      name: revealed\n        ? passwordFieldRecipe.toggle.icons.revealed\n        : passwordFieldRecipe.toggle.icons.concealed,\n      color: \"currentColor\",\n      size: iconRecipe.sizes.sm,\n      revealed,\n      disabled: disabled ?? false,\n    };\n\n    return (\n      <TextField\n        {...props}\n        ref={composeRefs(inputRef, forwardedRef)}\n        autoComplete={autofillHint === \"current\" ? \"current-password\" : \"new-password\"}\n        className={classNames(\"hjm-password-field__input\", className)}\n        disabled={disabled}\n        fieldClassName={classNames(\n          \"hjm-password-field\",\n          `hjm-password-field--${size}`,\n          fieldClassName,\n        )!}\n        onChange={(event) => {\n          setValue(event.currentTarget.value);\n          onChange?.(event);\n        }}\n        readOnly={readOnly}\n        trailing={(\n          <button\n            aria-label={resolved.toggleAccessibleName}\n            aria-pressed={revealed}\n            className=\"hjm-password-field__toggle\"\n            data-revealed={revealed || undefined}\n            disabled={disabled}\n            onClick={() => {\n              const input = inputRef.current;\n              if (input && input.selectionStart !== null && input.selectionEnd !== null) {\n                selectionRef.current = {\n                  start: input.selectionStart,\n                  end: input.selectionEnd,\n                };\n              }\n              setRevealed(!revealed);\n            }}\n            type=\"button\"\n          >\n            {renderToggleIcon?.(toggleAppearance) ?? <span aria-hidden=\"true\" />}\n          </button>\n        )}\n        type={resolved.webInputType}\n        value={value}\n      />\n    );\n  },\n);\n\nexport type OtpFieldProps = Omit<\n  TextFieldProps,\n  | \"autoComplete\"\n  | \"defaultValue\"\n  | \"leading\"\n  | \"maxLength\"\n  | \"shape\"\n  | \"size\"\n  | \"trailing\"\n  | \"type\"\n  | \"value\"\n  | \"variant\"\n> &\n  Readonly<{\n    length: number;\n    value?: string;\n    defaultValue?: string;\n    onValueChange?: (value: string) => void;\n    onComplete?: (value: string) => void;\n    size?: OtpFieldSize;\n    busy?: boolean;\n  }>;\n\n/** One accessible numeric input rendered as decorative OTP slots. */\nexport const OtpField = forwardRef<HTMLInputElement, OtpFieldProps>(\n  function OtpField(\n    {\n      id,\n      label,\n      description,\n      error,\n      required,\n      disabled,\n      readOnly,\n      busy = false,\n      length,\n      value: valueProp,\n      defaultValue = \"\",\n      onValueChange,\n      onComplete,\n      onChange,\n      size = otpFieldRecipe.defaults.size,\n      fieldClassName,\n      className,\n      onFocus,\n      onBlur,\n      \"aria-describedby\": ariaDescribedBy,\n      \"aria-invalid\": ariaInvalid,\n      \"aria-label\": ariaLabel,\n      ...props\n    },\n    ref,\n  ) {\n    const ids = useFieldIds(id);\n    const [focused, setFocused] = useState(false);\n    requireFieldAccessibleName(label, ariaLabel);\n    const [value, setValue] = useControllableState({\n      ...(valueProp === undefined ? {} : { value: valueProp }),\n      defaultValue: resolveOtpFieldValue(length, defaultValue),\n      ...(onValueChange === undefined ? {} : { onChange: onValueChange }),\n    });\n    const slots = getOtpFieldSlotValues({ length, value });\n    const complete = value.length === length;\n    const wasCompleteRef = useRef(complete);\n    useEffect(() => {\n      if (complete && !wasCompleteRef.current) onComplete?.(value);\n      wasCompleteRef.current = complete;\n    }, [complete, onComplete, value]);\n    const activeIndex = Math.min(value.length, length - 1);\n\n    return (\n      <FieldFrame\n        className={classNames(\"hjm-otp-field\", fieldClassName)}\n        controlId={ids.controlId}\n        description={description}\n        disabled={(disabled ?? false) || busy}\n        error={error}\n        focused={focused}\n        label={label}\n        required={required ?? false}\n        {...(description ? { descriptionId: ids.descriptionId } : {})}\n        {...(error ? { errorId: ids.errorId } : {})}\n      >\n        <div\n          className=\"hjm-otp-field__control\"\n          data-complete={complete || undefined}\n          data-size={size}\n          style={{ \"--hjm-otp-length\": length } as CSSProperties}\n        >\n          <input\n            {...props}\n            ref={ref}\n            aria-busy={busy || undefined}\n            aria-describedby={describedBy(\n              ariaDescribedBy,\n              description,\n              error,\n              ids.descriptionId,\n              ids.errorId,\n            )}\n            aria-invalid={error ? true : ariaInvalid}\n            aria-label={ariaLabel}\n            autoComplete=\"one-time-code\"\n            className={classNames(\"hjm-otp-field__input\", className)}\n            disabled={disabled || busy}\n            id={ids.controlId}\n            inputMode=\"numeric\"\n            maxLength={length}\n            onBlur={(event) => {\n              setFocused(false);\n              onBlur?.(event);\n            }}\n            onChange={(event) => {\n              setValue(resolveOtpFieldValue(length, event.currentTarget.value));\n              onChange?.(event);\n            }}\n            onFocus={(event) => {\n              setFocused(true);\n              onFocus?.(event);\n            }}\n            pattern=\"[0-9]*\"\n            readOnly={readOnly}\n            required={required}\n            type=\"text\"\n            value={value}\n          />\n          <div aria-hidden=\"true\" className=\"hjm-otp-field__slots\">\n            {slots.map((digit, index) => (\n              <span\n                className=\"hjm-otp-field__slot\"\n                data-state={error\n                  ? \"invalid\"\n                  : focused && index === activeIndex\n                    ? \"focused\"\n                    : digit\n                      ? \"filled\"\n                      : \"idle\"}\n                key={index}\n              >\n                {digit}\n              </span>\n            ))}\n          </div>\n        </div>\n      </FieldFrame>\n    );\n  },\n);\n"]}

package/dist/index.d.ts

@@ -0,0 +1,24 @@
+export { HjmProvider, useHjmTheme, type HjmProviderProps, } from "./provider.js";
+export { Grid, Layout, Section, Stack, Surface, Text, type GridGap, type GridProps, type LayoutProps, type LayoutSidebar, type SectionProps, type StackAlign, type StackAxis, type StackGap, type StackJustify, type StackProps, type SurfacePadding, type SurfaceProps, type SurfaceRadius, type SurfaceTone, type TextEmphasis, type TextProps, type TextTone, } from "./layout.js";
+export { Button, IconButton, Link, type ButtonProps, type ButtonSize, type ButtonTone, type IconButtonProps, type IconButtonShape, type IconButtonSize, type IconButtonTone, type LinkRenderProps, type LinkProps, } from "./actions.js";
+export { Field, OtpField, PasswordField, SearchField, TextArea, TextField, type FieldControlProps, type FieldProps, type OtpFieldProps, type PasswordFieldProps, type PasswordFieldToggleRenderProps, type SearchFieldProps, type SearchFieldIconRenderProps, type TextAreaProps, type TextFieldProps, } from "./forms.js";
+export { Combobox, Form, type ComboboxItem, type ComboboxOpenChangeReason, type ComboboxProps, type FormProps, type FormSubmitHandler, NativeSelect, type NativeSelectProps, type SelectOption, } from "./advanced-forms.js";
+export { Select, type SelectItem, type SelectLeadingRenderProps, type SelectOptionLeadingRenderProps, type SelectProps, type SelectSection, } from "./select.js";
+export { NumberField, type NumberFieldProps, } from "./number-field.js";
+export { Slider, type SliderProps, } from "./slider.js";
+export { DatePicker, type DatePickerMonthAction, type DatePickerProps, } from "./date-picker.js";
+export { FilePicker, type FilePickerProps, } from "./file-picker.js";
+export { Checkbox, CheckboxGroup, Chip, Radio, RadioGroup, SegmentedControl, Switch, type CheckboxProps, type CheckboxGroupItem, type CheckboxGroupProps, type ChipProps, type ChoiceLeadingRenderProps, type RadioProps, type RadioGroupItem, type RadioGroupProps, type SegmentedControlItem, type SegmentedControlProps, type SwitchProps, } from "./selection.js";
+export { TabPanel, Tabs, getDynamicTabPanelId, getTabId, getTabPanelId, type TabLeadingRenderProps, type TabItem, type TabPanelProps, type TabsProps, } from "./navigation.js";
+export { Breadcrumb, Pagination, type BreadcrumbProps, type PaginationProps, } from "./advanced-navigation.js";
+export { LoadMore, type LoadMoreProps, } from "./supplemental-navigation.js";
+export { Steps, type StepsProps, } from "./steps.js";
+export { BottomNavigation, getBottomNavigationGridColumn, isUnmodifiedPrimaryBottomNavigationClick, shouldHideBottomNavigationForKeyboard, type BottomNavigationIconRenderProps, type BottomNavigationLinkRenderProps, type BottomNavigationProps, } from "./bottom-navigation.js";
+export { Badge, Card, ListRow, Tag, type BadgeProps, type BadgeVariant, type CardHeadingLevel, type CardProps, type ListRowProps, type TagProps, type TagTone, } from "./display.js";
+export { CounterBadge, Icon, Image, type CounterBadgeProps, type IconProps, type ImageAdapterProps, type ImageProps, } from "./supplemental-display.js";
+export { Accordion, Avatar, DescriptionList, Divider, List, Statistic, StatisticGroup, Table, Timeline, type AccordionItem, type AccordionProps, type AvatarProps, type DescriptionListProps, type DividerInset, type DividerOrientation, type DividerProps, type ListAppearance, type ListProps, type StatisticProps, type StatisticGroupProps, type StatisticTrendMarkRenderProps, type ComposeStatisticAccessibilityLabel, type TableColumn, type TableProps, type TableSortDirection, type TimelineProps, } from "./advanced-display.js";
+export { UploadItem, type UploadItemProps, } from "./upload-item.js";
+export { EmptyState, Notice, Progress, Result, Skeleton, Spinner, type EmptyStateProps, type NoticeProps, type ProgressProps, type ResultProps, type SkeletonProps, type SpinnerProps, } from "./feedback.js";
+export { Toast, ToastProvider, useToast, type ToastApi, type ToastProps, type ToastProviderProps, } from "./toast.js";
+export { AlertDialog, Dialog, Menu, Sheet, Tooltip, type AlertDialogProps, type DialogOpenChangeReason, type DialogProps, type MenuItem, type MenuAsyncState, type MenuOpenChangeReason, type MenuProps, type MenuSection, type OverlayTrigger, type SheetPlacement, type SheetProps, type TooltipProps, } from "./overlays.js";
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}

package/dist/index.js

@@ -0,0 +1,24 @@
+export { HjmProvider, useHjmTheme, } from "./provider.js";
+export { Grid, Layout, Section, Stack, Surface, Text, } from "./layout.js";
+export { Button, IconButton, Link, } from "./actions.js";
+export { Field, OtpField, PasswordField, SearchField, TextArea, TextField, } from "./forms.js";
+export { Combobox, Form, NativeSelect, } from "./advanced-forms.js";
+export { Select, } from "./select.js";
+export { NumberField, } from "./number-field.js";
+export { Slider, } from "./slider.js";
+export { DatePicker, } from "./date-picker.js";
+export { FilePicker, } from "./file-picker.js";
+export { Checkbox, CheckboxGroup, Chip, Radio, RadioGroup, SegmentedControl, Switch, } from "./selection.js";
+export { TabPanel, Tabs, getDynamicTabPanelId, getTabId, getTabPanelId, } from "./navigation.js";
+export { Breadcrumb, Pagination, } from "./advanced-navigation.js";
+export { LoadMore, } from "./supplemental-navigation.js";
+export { Steps, } from "./steps.js";
+export { BottomNavigation, getBottomNavigationGridColumn, isUnmodifiedPrimaryBottomNavigationClick, shouldHideBottomNavigationForKeyboard, } from "./bottom-navigation.js";
+export { Badge, Card, ListRow, Tag, } from "./display.js";
+export { CounterBadge, Icon, Image, } from "./supplemental-display.js";
+export { Accordion, Avatar, DescriptionList, Divider, List, Statistic, StatisticGroup, Table, Timeline, } from "./advanced-display.js";
+export { UploadItem, } from "./upload-item.js";
+export { EmptyState, Notice, Progress, Result, Skeleton, Spinner, } from "./feedback.js";
+export { Toast, ToastProvider, useToast, } from "./toast.js";
+export { AlertDialog, Dialog, Menu, Sheet, Tooltip, } from "./overlays.js";
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,WAAW,EACX,WAAW,GAEZ,MAAM,eAAe,CAAC;AAEvB,OAAO,EACL,IAAI,EACJ,MAAM,EACN,OAAO,EACP,KAAK,EACL,OAAO,EACP,IAAI,GAkBL,MAAM,aAAa,CAAC;AAErB,OAAO,EACL,MAAM,EACN,UAAU,EACV,IAAI,GAUL,MAAM,cAAc,CAAC;AAEtB,OAAO,EACL,KAAK,EACL,QAAQ,EACR,aAAa,EACb,WAAW,EACX,QAAQ,EACR,SAAS,GAUV,MAAM,YAAY,CAAC;AAEpB,OAAO,EACL,QAAQ,EACR,IAAI,EAMJ,YAAY,GAGb,MAAM,qBAAqB,CAAC;AAE7B,OAAO,EACL,MAAM,GAMP,MAAM,aAAa,CAAC;AAErB,OAAO,EACL,WAAW,GAEZ,MAAM,mBAAmB,CAAC;AAE3B,OAAO,EACL,MAAM,GAEP,MAAM,aAAa,CAAC;AAErB,OAAO,EACL,UAAU,GAGX,MAAM,kBAAkB,CAAC;AAE1B,OAAO,EACL,UAAU,GAEX,MAAM,kBAAkB,CAAC;AAE1B,OAAO,EACL,QAAQ,EACR,aAAa,EACb,IAAI,EACJ,KAAK,EACL,UAAU,EACV,gBAAgB,EAChB,MAAM,GAYP,MAAM,gBAAgB,CAAC;AAExB,OAAO,EACL,QAAQ,EACR,IAAI,EACJ,oBAAoB,EACpB,QAAQ,EACR,aAAa,GAKd,MAAM,iBAAiB,CAAC;AAEzB,OAAO,EACL,UAAU,EACV,UAAU,GAGX,MAAM,0BAA0B,CAAC;AAElC,OAAO,EACL,QAAQ,GAET,MAAM,8BAA8B,CAAC;AAEtC,OAAO,EACL,KAAK,GAEN,MAAM,YAAY,CAAC;AAEpB,OAAO,EACL,gBAAgB,EAChB,6BAA6B,EAC7B,wCAAwC,EACxC,qCAAqC,GAItC,MAAM,wBAAwB,CAAC;AAEhC,OAAO,EACL,KAAK,EACL,IAAI,EACJ,OAAO,EACP,GAAG,GAQJ,MAAM,cAAc,CAAC;AAEtB,OAAO,EACL,YAAY,EACZ,IAAI,EACJ,KAAK,GAKN,MAAM,2BAA2B,CAAC;AAEnC,OAAO,EACL,SAAS,EACT,MAAM,EACN,eAAe,EACf,OAAO,EACP,IAAI,EACJ,SAAS,EACT,cAAc,EACd,KAAK,EACL,QAAQ,GAkBT,MAAM,uBAAuB,CAAC;AAE/B,OAAO,EACL,UAAU,GAEX,MAAM,kBAAkB,CAAC;AAE1B,OAAO,EACL,UAAU,EACV,MAAM,EACN,QAAQ,EACR,MAAM,EACN,QAAQ,EACR,OAAO,GAOR,MAAM,eAAe,CAAC;AAEvB,OAAO,EACL,KAAK,EACL,aAAa,EACb,QAAQ,GAIT,MAAM,YAAY,CAAC;AAEpB,OAAO,EACL,WAAW,EACX,MAAM,EACN,IAAI,EACJ,KAAK,EACL,OAAO,GAaR,MAAM,eAAe,CAAC","sourcesContent":["export {\n  HjmProvider,\n  useHjmTheme,\n  type HjmProviderProps,\n} from \"./provider.js\";\n\nexport {\n  Grid,\n  Layout,\n  Section,\n  Stack,\n  Surface,\n  Text,\n  type GridGap,\n  type GridProps,\n  type LayoutProps,\n  type LayoutSidebar,\n  type SectionProps,\n  type StackAlign,\n  type StackAxis,\n  type StackGap,\n  type StackJustify,\n  type StackProps,\n  type SurfacePadding,\n  type SurfaceProps,\n  type SurfaceRadius,\n  type SurfaceTone,\n  type TextEmphasis,\n  type TextProps,\n  type TextTone,\n} from \"./layout.js\";\n\nexport {\n  Button,\n  IconButton,\n  Link,\n  type ButtonProps,\n  type ButtonSize,\n  type ButtonTone,\n  type IconButtonProps,\n  type IconButtonShape,\n  type IconButtonSize,\n  type IconButtonTone,\n  type LinkRenderProps,\n  type LinkProps,\n} from \"./actions.js\";\n\nexport {\n  Field,\n  OtpField,\n  PasswordField,\n  SearchField,\n  TextArea,\n  TextField,\n  type FieldControlProps,\n  type FieldProps,\n  type OtpFieldProps,\n  type PasswordFieldProps,\n  type PasswordFieldToggleRenderProps,\n  type SearchFieldProps,\n  type SearchFieldIconRenderProps,\n  type TextAreaProps,\n  type TextFieldProps,\n} from \"./forms.js\";\n\nexport {\n  Combobox,\n  Form,\n  type ComboboxItem,\n  type ComboboxOpenChangeReason,\n  type ComboboxProps,\n  type FormProps,\n  type FormSubmitHandler,\n  NativeSelect,\n  type NativeSelectProps,\n  type SelectOption,\n} from \"./advanced-forms.js\";\n\nexport {\n  Select,\n  type SelectItem,\n  type SelectLeadingRenderProps,\n  type SelectOptionLeadingRenderProps,\n  type SelectProps,\n  type SelectSection,\n} from \"./select.js\";\n\nexport {\n  NumberField,\n  type NumberFieldProps,\n} from \"./number-field.js\";\n\nexport {\n  Slider,\n  type SliderProps,\n} from \"./slider.js\";\n\nexport {\n  DatePicker,\n  type DatePickerMonthAction,\n  type DatePickerProps,\n} from \"./date-picker.js\";\n\nexport {\n  FilePicker,\n  type FilePickerProps,\n} from \"./file-picker.js\";\n\nexport {\n  Checkbox,\n  CheckboxGroup,\n  Chip,\n  Radio,\n  RadioGroup,\n  SegmentedControl,\n  Switch,\n  type CheckboxProps,\n  type CheckboxGroupItem,\n  type CheckboxGroupProps,\n  type ChipProps,\n  type ChoiceLeadingRenderProps,\n  type RadioProps,\n  type RadioGroupItem,\n  type RadioGroupProps,\n  type SegmentedControlItem,\n  type SegmentedControlProps,\n  type SwitchProps,\n} from \"./selection.js\";\n\nexport {\n  TabPanel,\n  Tabs,\n  getDynamicTabPanelId,\n  getTabId,\n  getTabPanelId,\n  type TabLeadingRenderProps,\n  type TabItem,\n  type TabPanelProps,\n  type TabsProps,\n} from \"./navigation.js\";\n\nexport {\n  Breadcrumb,\n  Pagination,\n  type BreadcrumbProps,\n  type PaginationProps,\n} from \"./advanced-navigation.js\";\n\nexport {\n  LoadMore,\n  type LoadMoreProps,\n} from \"./supplemental-navigation.js\";\n\nexport {\n  Steps,\n  type StepsProps,\n} from \"./steps.js\";\n\nexport {\n  BottomNavigation,\n  getBottomNavigationGridColumn,\n  isUnmodifiedPrimaryBottomNavigationClick,\n  shouldHideBottomNavigationForKeyboard,\n  type BottomNavigationIconRenderProps,\n  type BottomNavigationLinkRenderProps,\n  type BottomNavigationProps,\n} from \"./bottom-navigation.js\";\n\nexport {\n  Badge,\n  Card,\n  ListRow,\n  Tag,\n  type BadgeProps,\n  type BadgeVariant,\n  type CardHeadingLevel,\n  type CardProps,\n  type ListRowProps,\n  type TagProps,\n  type TagTone,\n} from \"./display.js\";\n\nexport {\n  CounterBadge,\n  Icon,\n  Image,\n  type CounterBadgeProps,\n  type IconProps,\n  type ImageAdapterProps,\n  type ImageProps,\n} from \"./supplemental-display.js\";\n\nexport {\n  Accordion,\n  Avatar,\n  DescriptionList,\n  Divider,\n  List,\n  Statistic,\n  StatisticGroup,\n  Table,\n  Timeline,\n  type AccordionItem,\n  type AccordionProps,\n  type AvatarProps,\n  type DescriptionListProps,\n  type DividerInset,\n  type DividerOrientation,\n  type DividerProps,\n  type ListAppearance,\n  type ListProps,\n  type StatisticProps,\n  type StatisticGroupProps,\n  type StatisticTrendMarkRenderProps,\n  type ComposeStatisticAccessibilityLabel,\n  type TableColumn,\n  type TableProps,\n  type TableSortDirection,\n  type TimelineProps,\n} from \"./advanced-display.js\";\n\nexport {\n  UploadItem,\n  type UploadItemProps,\n} from \"./upload-item.js\";\n\nexport {\n  EmptyState,\n  Notice,\n  Progress,\n  Result,\n  Skeleton,\n  Spinner,\n  type EmptyStateProps,\n  type NoticeProps,\n  type ProgressProps,\n  type ResultProps,\n  type SkeletonProps,\n  type SpinnerProps,\n} from \"./feedback.js\";\n\nexport {\n  Toast,\n  ToastProvider,\n  useToast,\n  type ToastApi,\n  type ToastProps,\n  type ToastProviderProps,\n} from \"./toast.js\";\n\nexport {\n  AlertDialog,\n  Dialog,\n  Menu,\n  Sheet,\n  Tooltip,\n  type AlertDialogProps,\n  type DialogOpenChangeReason,\n  type DialogProps,\n  type MenuItem,\n  type MenuAsyncState,\n  type MenuOpenChangeReason,\n  type MenuProps,\n  type MenuSection,\n  type OverlayTrigger,\n  type SheetPlacement,\n  type SheetProps,\n  type TooltipProps,\n} from \"./overlays.js\";\n"]}

package/dist/internal.d.ts

@@ -0,0 +1,17 @@
+import { type Dispatch, type Ref, type SetStateAction } from "react";
+export declare function classNames(...values: readonly (string | false | null | undefined)[]): string | undefined;
+export declare function assignRef<Element>(ref: Ref<Element> | undefined, value: Element | null): void;
+export declare function composeRefs<Element>(...refs: readonly (Ref<Element> | undefined)[]): (value: Element | null) => void;
+type ControllableStateOptions<Value> = Readonly<{
+    value?: Value;
+    defaultValue: Value;
+    onChange?: (value: Value) => void;
+}>;
+export declare function useControllableState<Value>({ value, defaultValue, onChange, }: ControllableStateOptions<Value>): readonly [
+    Value,
+    Dispatch<SetStateAction<Value>>
+];
+export declare function useWindowWidth(): number;
+export declare function useElementWidth<Element extends HTMLElement>(externalRef?: Ref<Element>): readonly [number | undefined, (node: Element | null) => void];
+export {};
+//# sourceMappingURL=internal.d.ts.map

package/dist/internal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../src/internal.ts"],"names":[],"mappings":"AAAA,OAAO,EAKL,KAAK,QAAQ,EACb,KAAK,GAAG,EACR,KAAK,cAAc,EACpB,MAAM,OAAO,CAAC;AAEf,wBAAgB,UAAU,CACxB,GAAG,MAAM,EAAE,SAAS,CAAC,MAAM,GAAG,KAAK,GAAG,IAAI,GAAG,SAAS,CAAC,EAAE,GACxD,MAAM,GAAG,SAAS,CAGpB;AAED,wBAAgB,SAAS,CAAC,OAAO,EAAE,GAAG,EAAE,GAAG,CAAC,OAAO,CAAC,GAAG,SAAS,EAAE,KAAK,EAAE,OAAO,GAAG,IAAI,GAAG,IAAI,CAG7F;AAED,wBAAgB,WAAW,CAAC,OAAO,EACjC,GAAG,IAAI,EAAE,SAAS,CAAC,GAAG,CAAC,OAAO,CAAC,GAAG,SAAS,CAAC,EAAE,GAC7C,CAAC,KAAK,EAAE,OAAO,GAAG,IAAI,KAAK,IAAI,CAIjC;AAED,KAAK,wBAAwB,CAAC,KAAK,IAAI,QAAQ,CAAC;IAC9C,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,YAAY,EAAE,KAAK,CAAC;IACpB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;CACnC,CAAC,CAAC;AAEH,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,EAC1C,KAAK,EACL,YAAY,EACZ,QAAQ,GACT,EAAE,wBAAwB,CAAC,KAAK,CAAC,GAAG,SAAS;IAC5C,KAAK;IACL,QAAQ,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC;CAChC,CAiBA;AAeD,wBAAgB,cAAc,IAAI,MAAM,CAMvC;AAED,wBAAgB,eAAe,CAAC,OAAO,SAAS,WAAW,EACzD,WAAW,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC,GACzB,SAAS,CAAC,MAAM,GAAG,SAAS,EAAE,CAAC,IAAI,EAAE,OAAO,GAAG,IAAI,KAAK,IAAI,CAAC,CAyB/D"}

package/dist/internal.js

@@ -0,0 +1,68 @@
+import { useCallback, useEffect, useState, useSyncExternalStore, } from "react";
+export function classNames(...values) {
+    const result = values.filter(Boolean).join(" ");
+    return result.length > 0 ? result : undefined;
+}
+export function assignRef(ref, value) {
+    if (typeof ref === "function")
+        ref(value);
+    else if (ref)
+        ref.current = value;
+}
+export function composeRefs(...refs) {
+    return (value) => {
+        for (const ref of refs)
+            assignRef(ref, value);
+    };
+}
+export function useControllableState({ value, defaultValue, onChange, }) {
+    const [internalValue, setInternalValue] = useState(defaultValue);
+    const controlled = value !== undefined;
+    const currentValue = controlled ? value : internalValue;
+    const setValue = useCallback((next) => {
+        const resolved = typeof next === "function"
+            ? next(currentValue)
+            : next;
+        if (!controlled)
+            setInternalValue(resolved);
+        if (!Object.is(resolved, currentValue))
+            onChange?.(resolved);
+    }, [controlled, currentValue, onChange]);
+    return [currentValue, setValue];
+}
+function subscribeWindowResize(callback) {
+    window.addEventListener("resize", callback);
+    return () => window.removeEventListener("resize", callback);
+}
+function getWindowWidth() {
+    return window.innerWidth;
+}
+function getServerWindowWidth() {
+    return 0;
+}
+export function useWindowWidth() {
+    return useSyncExternalStore(subscribeWindowResize, getWindowWidth, getServerWindowWidth);
+}
+export function useElementWidth(externalRef) {
+    const [node, setNode] = useState(null);
+    const [width, setWidth] = useState();
+    const ref = useCallback((nextNode) => {
+        setNode(nextNode);
+        assignRef(externalRef, nextNode);
+    }, [externalRef]);
+    useEffect(() => {
+        if (!node)
+            return;
+        const update = () => setWidth(node.getBoundingClientRect().width);
+        update();
+        if (typeof ResizeObserver === "undefined") {
+            window.addEventListener("resize", update);
+            return () => window.removeEventListener("resize", update);
+        }
+        const observer = new ResizeObserver(update);
+        observer.observe(node);
+        return () => observer.disconnect();
+    }, [node]);
+    return [width, ref];
+}
+//# sourceMappingURL=internal.js.map