@cosmicdrift/kumiko-renderer 0.389.0 → 0.390.0

package/dist/web/primitives/form-footer-parts.d.ts

@@ -0,0 +1,25 @@
+import type { CSSProperties, ReactNode } from "react";
+import type { useTranslation } from "../../index.ts";
+type Translate = ReturnType<typeof useTranslation>;
+export type FormFooterModel = {
+    readonly t: Translate;
+    readonly testId: string | undefined;
+    readonly chromeless: boolean;
+    readonly stickyActions: boolean | undefined;
+    readonly fillHeight: boolean | undefined;
+    readonly unsavedCount: number | undefined;
+    readonly railed: boolean;
+    readonly pinned: boolean;
+    readonly secondaryActions: ReactNode;
+    readonly renderedSecondary: ReactNode;
+    readonly renderedActions: ReactNode;
+    readonly hasNonPrimaryOverflow: boolean;
+    readonly fixedFooterStyle: CSSProperties | undefined;
+};
+export declare function unsavedStatusText(t: Translate, unsavedCount: number): string;
+export declare function renderNarrowPinnedFooter(model: Pick<FormFooterModel, "t" | "testId" | "unsavedCount">, nodes: readonly ReactNode[], keyboardInset: number): ReactNode;
+export declare function footerRowClassName(model: FormFooterModel): string;
+export declare function renderUnsavedStatus(model: FormFooterModel, unsavedCount: number): ReactNode;
+export declare function renderSecondaryActionsGroup(model: FormFooterModel): ReactNode;
+export declare function renderPrimaryActionsGroup(model: FormFooterModel): ReactNode;
+export {};

package/dist/web/primitives/form-footer-parts.js

@@ -0,0 +1,55 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../lib/cn.js";
+import { cardFooterBorder } from "./card-styles.js";
+import { NarrowPinnedFooter } from "./narrow-pinned-footer.js";
+import { STICKY_FOOTER_SAFE_AREA_CLASS } from "./sticky-action-bar.js";
+export function unsavedStatusText(t, unsavedCount) {
+    if (unsavedCount === 0)
+        return t("kumiko.form.noUnsavedChanges");
+    if (unsavedCount === 1)
+        return t("kumiko.form.unsaved.one");
+    return t("kumiko.form.unsaved.other", { count: unsavedCount });
+}
+export function renderNarrowPinnedFooter(model, nodes, keyboardInset) {
+    const { t, testId, unsavedCount } = model;
+    return (_jsx(NarrowPinnedFooter, { nodes: nodes, overflowLabel: unsavedCount !== undefined && unsavedCount > 0
+            ? `${t("kumiko.list.row-actions.more")}, ${unsavedStatusText(t, unsavedCount)}`
+            : t("kumiko.list.row-actions.more"), unsavedCount: unsavedCount, unsavedStatus: unsavedCount !== undefined && unsavedCount > 0
+            ? unsavedStatusText(t, unsavedCount)
+            : undefined, testId: testId, keyboardInset: keyboardInset }));
+}
+export function footerRowClassName(model) {
+    const { pinned, chromeless, fillHeight, railed } = model;
+    return cn(pinned
+        ? cn("flex h-14 shrink-0 items-center justify-end gap-2 border-t border-border bg-card px-6", !railed && "md:pl-10")
+        : "flex flex-col-reverse gap-3 py-3 sm:flex-row sm:items-center sm:justify-between sm:py-4", !pinned && !chromeless && "px-[var(--card-padding)]", !pinned && !chromeless && cardFooterBorder, !pinned && fillHeight === true && "shrink-0");
+}
+export function renderUnsavedStatus(model, unsavedCount) {
+    const { t, testId, pinned } = model;
+    return (_jsxs("div", { "data-testid": testId !== undefined ? `${testId}-unsaved` : undefined, className: cn("mr-auto flex min-w-0 items-center gap-2 text-[13px]", 
+        // Only the stacked (flex-col-reverse) footer moves the status above the
+        // actions; the pinned single-row footer keeps it on the left.
+        !pinned && "max-sm:order-last", unsavedCount > 0 ? "text-foreground-secondary" : "text-muted-foreground"), children: [unsavedCount > 0 && (_jsx("span", { className: "size-1.5 shrink-0 rounded-full bg-status-active", "aria-hidden": "true" })), _jsx("span", { className: "truncate", children: unsavedStatusText(t, unsavedCount) })] }));
+}
+export function renderSecondaryActionsGroup(model) {
+    const { testId, pinned, hasNonPrimaryOverflow, renderedSecondary } = model;
+    return (_jsx("div", { "data-testid": testId !== undefined ? `${testId}-actions-secondary` : undefined, className: cn(
+        // min-h-11: link-variant buttons (Copy link) are h-auto and would fall
+        // below the 24px touch-target minimum on narrow viewports.
+        "flex flex-wrap items-center gap-2 max-sm:[&_button]:min-h-11 max-sm:[&_button]:px-2 max-sm:[&_button]:text-xs", pinned && hasNonPrimaryOverflow && "mr-auto"), children: renderedSecondary }));
+}
+export function renderPrimaryActionsGroup(model) {
+    const { testId, pinned, stickyActions, fixedFooterStyle, renderedActions } = model;
+    return (_jsx("div", { "data-testid": testId !== undefined ? `${testId}-actions` : undefined, style: fixedFooterStyle, className: cn("flex items-center gap-2", pinned
+            ? "shrink-0 max-md:[&>button]:min-h-11"
+            : "flex-wrap max-sm:w-full max-sm:[&>button]:flex-1 max-sm:[&>button]:min-h-11 sm:ml-auto", 
+        // Below sm (640px): pin only the primary action to the viewport
+        // bottom instead of normal flow, so a virtual keyboard shrinking
+        // the viewport can't push it out of reach. `fixed`
+        // escapes the card's `overflow-hidden` (only transform/filter/
+        // contain ancestors trap it, confirmed against
+        // AppLayout/SidebarInset — neither sets those).
+        stickyActions === true &&
+            !pinned &&
+            cn("max-sm:fixed max-sm:inset-x-0 max-sm:bottom-0 max-sm:z-20 max-sm:bg-background max-sm:p-4 max-sm:shadow-[0_-4px_12px_-4px_rgb(0_0_0_/_0.15)]", STICKY_FOOTER_SAFE_AREA_CLASS)), children: renderedActions }));
+}

package/dist/web/primitives/form.js

@@ -2,13 +2,13 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
 import { Children, Fragment, isValidElement, useContext, useEffect, useRef, useState, } from "react";
 import { STICKY_PRIMARY_ACTION_PROP, useTranslation, } from "../../index.js";
 import { cn } from "../lib/cn.js";
+import { footerRowClassName, renderNarrowPinnedFooter, renderPrimaryActionsGroup, renderSecondaryActionsGroup, renderUnsavedStatus, } from "./form-footer-parts.js";
 import { screenPaddingClassName, screenWidthClassName } from "./layout.js";
-import { NarrowPinnedFooter } from "./narrow-pinned-footer.js";
-import { STICKY_FOOTER_SAFE_AREA_CLASS, STICKY_FOOTER_SPACER_CLASS } from "./sticky-action-bar.js";
+import { STICKY_FOOTER_SPACER_CLASS } from "./sticky-action-bar.js";
 import { useKeyboardInset } from "./use-keyboard-inset.js";
 import { useIsBelowSmViewport } from "./use-narrow-viewport.js";
 import "../react-css-custom-properties.js";
-import { cardFooterBorder, cardHeaderBorder } from "./card-styles.js";
+import { cardHeaderBorder } from "./card-styles.js";
 import { InsideFormContext, ScreenFormContext, ScreenWidthContext } from "./contexts.js";
 // Extension sections that render their own <form> via BareFormProvider
 // (legacy custom-form pattern, e.g. ChangeEmailSection) land
@@ -138,21 +138,7 @@ function flattenActionNodes(node) {
     }
     return Children.toArray(node);
 }
-function unsavedStatusText(t, unsavedCount) {
-    if (unsavedCount === 0)
-        return t("kumiko.form.noUnsavedChanges");
-    if (unsavedCount === 1)
-        return t("kumiko.form.unsaved.one");
-    return t("kumiko.form.unsaved.other", { count: unsavedCount });
-}
-// Footer wrapper for DefaultForm's card and chromeless layouts alike — only
-// the card-derived horizontal padding/border differs between them.
-export function FormFooter({ actions, secondaryActions, testId, chromeless, stickyActions, fillHeight, unsavedCount, railed = false, }) {
-    const t = useTranslation();
-    const isBelowSm = useIsBelowSmViewport();
-    const keyboardInset = useKeyboardInset();
-    if (actions === undefined && secondaryActions === undefined)
-        return null;
+function splitStickyActions(stickyActions, actions, secondaryActions) {
     // Only split when sticky: the non-sticky (regular, non-wizard) footer must
     // reproduce the previous DOM exactly (form-action-bar.test.tsx pins
     // `-actions`/`-actions-secondary` content 1:1 to the `actions`/
@@ -170,6 +156,17 @@ export function FormFooter({ actions, secondaryActions, testId, chromeless, stic
     const renderedActions = stickyActions === true ? (hasPrimaryAction ? primaryActionNodes : actions) : actions;
     const hasNonPrimaryOverflow = nonPrimaryActionNodes !== undefined && nonPrimaryActionNodes.length > 0;
     const renderedSecondary = stickyActions === true && hasPrimaryAction ? (_jsxs(_Fragment, { children: [secondaryActions, nonPrimaryActionNodes] })) : (secondaryActions);
+    return { renderedActions, renderedSecondary, hasNonPrimaryOverflow };
+}
+// Footer wrapper for DefaultForm's card and chromeless layouts alike — only
+// the card-derived horizontal padding/border differs between them.
+export function FormFooter({ actions, secondaryActions, testId, chromeless, stickyActions, fillHeight, unsavedCount, railed = false, }) {
+    const t = useTranslation();
+    const isBelowSm = useIsBelowSmViewport();
+    const keyboardInset = useKeyboardInset();
+    if (actions === undefined && secondaryActions === undefined)
+        return null;
+    const { renderedActions, renderedSecondary, hasNonPrimaryOverflow } = splitStickyActions(stickyActions, actions, secondaryActions);
     const pinned = isPinnedFooter(stickyActions, fillHeight);
     const fixedFooterStyle = stickyActions === true && !pinned && isBelowSm && keyboardInset > 0
         ? { bottom: keyboardInset }
@@ -177,32 +174,25 @@ export function FormFooter({ actions, secondaryActions, testId, chromeless, stic
     // Below sm the pinned footer swaps to NarrowPinnedFooter; the subtree remounts, so a
     // confirm dialog owned by an action button closes on a breakpoint change (rotate, resize).
     if (pinned && isBelowSm) {
-        return (_jsx(NarrowPinnedFooter, { nodes: [...flattenActionNodes(secondaryActions), ...flattenActionNodes(actions)], overflowLabel: unsavedCount !== undefined && unsavedCount > 0
-                ? `${t("kumiko.list.row-actions.more")}, ${unsavedStatusText(t, unsavedCount)}`
-                : t("kumiko.list.row-actions.more"), unsavedCount: unsavedCount, unsavedStatus: unsavedCount !== undefined && unsavedCount > 0
-                ? unsavedStatusText(t, unsavedCount)
-                : undefined, testId: testId, keyboardInset: keyboardInset }));
+        return renderNarrowPinnedFooter({ t, testId, unsavedCount }, [...flattenActionNodes(secondaryActions), ...flattenActionNodes(actions)], keyboardInset);
     }
-    return (_jsxs("div", { className: cn(pinned
-            ? cn("flex h-14 shrink-0 items-center justify-end gap-2 border-t border-border bg-card px-6", !railed && "md:pl-10")
-            : "flex flex-col-reverse gap-3 py-3 sm:flex-row sm:items-center sm:justify-between sm:py-4", !pinned && !chromeless && "px-[var(--card-padding)]", !pinned && !chromeless && cardFooterBorder, !pinned && fillHeight === true && "shrink-0"), children: [unsavedCount !== undefined && (_jsxs("div", { "data-testid": testId !== undefined ? `${testId}-unsaved` : undefined, className: cn("mr-auto flex min-w-0 items-center gap-2 text-[13px]", 
-                // Only the stacked (flex-col-reverse) footer moves the status above the
-                // actions; the pinned single-row footer keeps it on the left.
-                !pinned && "max-sm:order-last", unsavedCount > 0 ? "text-foreground-secondary" : "text-muted-foreground"), children: [unsavedCount > 0 && (_jsx("span", { className: "size-1.5 shrink-0 rounded-full bg-status-active", "aria-hidden": "true" })), _jsx("span", { className: "truncate", children: unsavedStatusText(t, unsavedCount) })] })), (secondaryActions !== undefined || hasNonPrimaryOverflow) && (_jsx("div", { "data-testid": testId !== undefined ? `${testId}-actions-secondary` : undefined, className: cn(
-                // min-h-11: link-variant buttons (Copy link) are h-auto and would fall
-                // below the 24px touch-target minimum on narrow viewports.
-                "flex flex-wrap items-center gap-2 max-sm:[&_button]:min-h-11 max-sm:[&_button]:px-2 max-sm:[&_button]:text-xs", pinned && hasNonPrimaryOverflow && "mr-auto"), children: renderedSecondary })), renderedActions !== undefined && (_jsx("div", { "data-testid": testId !== undefined ? `${testId}-actions` : undefined, style: fixedFooterStyle, className: cn("flex items-center gap-2", pinned
-                    ? "shrink-0 max-md:[&>button]:min-h-11"
-                    : "flex-wrap max-sm:w-full max-sm:[&>button]:flex-1 max-sm:[&>button]:min-h-11 sm:ml-auto", 
-                // Below sm (640px): pin only the primary action to the viewport
-                // bottom instead of normal flow, so a virtual keyboard shrinking
-                // the viewport can't push it out of reach. `fixed`
-                // escapes the card's `overflow-hidden` (only transform/filter/
-                // contain ancestors trap it, confirmed against
-                // AppLayout/SidebarInset — neither sets those).
-                stickyActions === true &&
-                    !pinned &&
-                    cn("max-sm:fixed max-sm:inset-x-0 max-sm:bottom-0 max-sm:z-20 max-sm:bg-background max-sm:p-4 max-sm:shadow-[0_-4px_12px_-4px_rgb(0_0_0_/_0.15)]", STICKY_FOOTER_SAFE_AREA_CLASS)), children: renderedActions }))] }));
+    const model = {
+        t,
+        testId,
+        chromeless,
+        stickyActions,
+        fillHeight,
+        unsavedCount,
+        railed,
+        pinned,
+        secondaryActions,
+        renderedSecondary,
+        renderedActions,
+        hasNonPrimaryOverflow,
+        fixedFooterStyle,
+    };
+    return (_jsxs("div", { className: footerRowClassName(model), children: [unsavedCount !== undefined && renderUnsavedStatus(model, unsavedCount), (secondaryActions !== undefined || hasNonPrimaryOverflow) &&
+                renderSecondaryActionsGroup(model), renderedActions !== undefined && renderPrimaryActionsGroup(model)] }));
 }
 export const SECTION_NAV_MIN_ITEMS = 3;
 // "On this page" navigation next to a screen form. The active entry follows

package/dist/web/primitives/input-choice-kinds.d.ts

@@ -0,0 +1,4 @@
+import type { KindRenderer } from "./input-shared.ts";
+export declare const renderBooleanKind: KindRenderer<"boolean">;
+export declare const renderSelectKind: KindRenderer<"select">;
+export declare const renderComboboxKind: KindRenderer<"combobox">;

package/dist/web/primitives/input-choice-kinds.js

@@ -0,0 +1,67 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Checkbox } from "../ui/checkbox.js";
+import { Switch } from "../ui/switch.js";
+import { ComboboxInput } from "./combobox.js";
+import { RadioListSelect, SegmentedSelect, withInlineDisabledHint, withoutSegmentedSelectPlaceholder, } from "./field.js";
+import { stateProps } from "./input-optional-props.js";
+import { resolveSelectPresentation } from "./input-select-presentation.js";
+// layout="inline" (checkbox lists like MultiSelectCheckboxes, the
+// BooleanField widget) keeps the checkbox optics; the standard form
+// field (render-field.tsx, layout="stacked") gets the switch.
+export const renderBooleanKind = (props, { booleanLayout }) => booleanLayout === "inline" ? (_jsx(Checkbox, { id: props.id, name: props.name, disabled: props.disabled, "aria-required": props.required, "aria-invalid": props.hasError === true ? true : undefined, checked: props.value, onCheckedChange: (checked) => props.onChange(checked === true) })) : (_jsx(Switch, { id: props.id, name: props.name, disabled: props.disabled, "aria-required": props.required, "aria-invalid": props.hasError === true ? true : undefined, checked: props.value, onCheckedChange: (checked) => props.onChange(checked === true), className: "aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40" }));
+function normalizeSelectOptions(options) {
+    return options.map((o) => (typeof o === "string" ? { value: o, label: o } : o));
+}
+// Visual consolidation: all selects go through ComboboxInput
+// (cmdk + Radix popover). Before, there were two paths: Radix
+// Select for `kind:"select"` and cmdk for `kind:"combobox"`. Three
+// visually different variants (single select, combobox single, combobox
+// multi) became unmanageable. With the merge the combobox is the only
+// implementation: the search input is present even for 4-item status
+// selects, a deliberately accepted UX consequence for style consistency.
+export const renderSelectKind = (props) => {
+    const comboOptions = normalizeSelectOptions(props.options);
+    // The radio group can't render the unselected placeholder as its own
+    // segment, so it counts and renders on the real options only — the
+    // dropdown below keeps comboOptions (placeholder included) since it
+    // has a genuine "nothing selected" row.
+    // An author who asks for `display: "radio"` explicitly declared the ""
+    // option as a real choice (e.g. "Any"), so it stays a segment.
+    const radioGroupOptions = props.display === "radio" ? comboOptions : withoutSegmentedSelectPlaceholder(comboOptions);
+    const presentation = resolveSelectPresentation(props, radioGroupOptions);
+    if (presentation === "radioList" && radioGroupOptions.length > 0) {
+        return (_jsx(RadioListSelect, { id: props.id, name: props.name, value: props.value, onChange: props.onChange, options: radioGroupOptions, ...(props.radioVariant !== undefined && { variant: props.radioVariant }), ...stateProps(props) }));
+    }
+    if (presentation === "segmented" && radioGroupOptions.length > 0) {
+        return (_jsx(SegmentedSelect, { id: props.id, name: props.name, value: props.value, onChange: props.onChange, options: radioGroupOptions, ...stateProps(props) }));
+    }
+    // The dropdown shows a disabled option's hint inline, so it stays readable in the trigger and search.
+    return (_jsx(ComboboxInput, { id: props.id, name: props.name, value: props.value, onChange: props.onChange, options: comboOptions.map(withInlineDisabledHint), ...stateProps(props) }));
+};
+function comboboxBaseProps(props) {
+    return {
+        id: props.id,
+        name: props.name,
+        options: props.options,
+        ...stateProps(props),
+        ...(props.placeholder !== undefined && { placeholder: props.placeholder }),
+        ...(props.searchPlaceholder !== undefined && {
+            searchPlaceholder: props.searchPlaceholder,
+        }),
+        ...(props.emptyText !== undefined && { emptyText: props.emptyText }),
+        ...(props.onSearchChange !== undefined && { onSearchChange: props.onSearchChange }),
+        ...(props.loading !== undefined && { loading: props.loading }),
+        ...(props.onCreate !== undefined && { onCreate: props.onCreate }),
+        ...(props.createLabel !== undefined && { createLabel: props.createLabel }),
+    };
+}
+// Discriminated union per `multiple`; we split
+// TS-side into two branches so ComboboxInput's single/multi variants
+// render with the right types.
+export const renderComboboxKind = (props) => {
+    const baseProps = comboboxBaseProps(props);
+    if (props.multiple === true) {
+        return _jsx(ComboboxInput, { ...baseProps, multiple: true, value: props.value, onChange: props.onChange });
+    }
+    return _jsx(ComboboxInput, { ...baseProps, value: props.value, onChange: props.onChange });
+};

package/dist/web/primitives/input-file-kinds.d.ts

@@ -0,0 +1,3 @@
+import type { KindRenderer } from "./input-shared.ts";
+export declare const renderFileKind: KindRenderer<"file" | "image">;
+export declare const renderFilesDropzoneKind: KindRenderer<"files-dropzone">;

package/dist/web/primitives/input-file-kinds.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { FileUploadInput } from "./file-upload.js";
+import { FilesDropzoneInput } from "./files-dropzone.js";
+import { uploadTargetProps } from "./input-optional-props.js";
+export const renderFileKind = (props) => (_jsx(FileUploadInput, { kind: props.kind, id: props.id, value: props.value, onChange: props.onChange, ...(props.accept !== undefined && { accept: props.accept }), ...(props.disabled !== undefined && { disabled: props.disabled }), ...uploadTargetProps(props), ...(props.imageVariant !== undefined && { imageVariant: props.imageVariant }), ...(props.capture !== undefined && { capture: props.capture }), ...(props.directory !== undefined && { directory: props.directory }), ...(props.onFilesPicked !== undefined && { onFilesPicked: props.onFilesPicked }), ...(props.pickLabel !== undefined && { pickLabel: props.pickLabel }), ...(props.testId !== undefined && { testId: props.testId }) }));
+export const renderFilesDropzoneKind = (props) => (_jsx(FilesDropzoneInput, { id: props.id, value: props.value, onChange: props.onChange, ...(props.accept !== undefined && { accept: props.accept }), ...(props.maxSize !== undefined && { maxSize: props.maxSize }), ...(props.maxCount !== undefined && { maxCount: props.maxCount }), ...(props.disabled !== undefined && { disabled: props.disabled }), ...uploadTargetProps(props), ...(props.testId !== undefined && { testId: props.testId }) }));

package/dist/web/primitives/input-number-kinds.d.ts

@@ -0,0 +1,4 @@
+import type { KindRenderer } from "./input-shared.ts";
+export declare const renderNumberKind: KindRenderer<"number">;
+export declare const renderRangeKind: KindRenderer<"range">;
+export declare const renderMoneyKind: KindRenderer<"money">;

package/dist/web/primitives/input-number-kinds.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../lib/cn.js";
+import { FIELD_ICON_CLASS, fieldIconFor, unitSuffixId, withInputAddons } from "./field.js";
+import { stateProps } from "./input-optional-props.js";
+import { MoneyInput } from "./money-input.js";
+import { NumberInput } from "./number-input.js";
+export const renderNumberKind = (props) => {
+    const NumberIcon = fieldIconFor(props.icon);
+    // Icon, input and unit share this one box, and the grid cell sizes the
+    // box rather than the bare input: anchored to a wider wrapper, the unit
+    // would sit next to a narrower input instead of inside it.
+    const numberField = (_jsxs("div", { "data-slot": "number-field", className: "relative", children: [NumberIcon !== undefined && _jsx(NumberIcon, { "aria-hidden": "true", className: FIELD_ICON_CLASS }), _jsx(NumberInput, { id: props.id, name: props.name, value: props.value, onChange: props.onChange, disabled: props.disabled, required: props.required, hasError: props.hasError, testId: props.testId, ...(props.unit !== undefined && { ariaDescribedBy: unitSuffixId(props.id) }), ...(props.locale !== undefined && { locale: props.locale }), ...(props.grouping !== undefined && { grouping: props.grouping }), ...(props.integer !== undefined && { integer: props.integer }), ...(props.placeholder !== undefined && { placeholder: props.placeholder }), className: cn(NumberIcon !== undefined ? "pl-8" : undefined, props.unit !== undefined ? "pr-8" : undefined) }), props.unit !== undefined && (_jsx("span", { id: unitSuffixId(props.id), className: "pointer-events-none absolute right-2.5 top-1/2 max-w-[40%] -translate-y-1/2 truncate text-sm text-muted-foreground", children: props.unit }))] }));
+    return withInputAddons(props, numberField);
+};
+export const renderRangeKind = (props, { common }) => (_jsx("input", { type: "range", ...common, min: props.min, max: props.max, step: props.step ?? 1, value: props.value, onChange: (e) => props.onChange(Number(e.target.value)), className: "w-full accent-primary" }));
+export const renderMoneyKind = (props) => (_jsx(MoneyInput, { id: props.id, name: props.name, value: props.value, onChange: props.onChange, currency: props.currency ?? "EUR", ...(props.locale !== undefined && { locale: props.locale }), ...stateProps(props) }));

package/dist/web/primitives/input-optional-props.d.ts

@@ -0,0 +1,20 @@
+type StateInput = {
+    readonly disabled?: boolean;
+    readonly required?: boolean;
+    readonly hasError?: boolean;
+};
+type LocaleBoundsInput = {
+    readonly locale?: string;
+    readonly min?: string;
+    readonly max?: string;
+};
+type UploadTargetInput = {
+    readonly entityType?: string;
+    readonly uploadActionForm?: string;
+    readonly entityId?: string;
+    readonly fieldName?: string;
+};
+export declare function stateProps({ disabled, required, hasError }: StateInput): StateInput;
+export declare function localeBoundsProps({ locale, min, max }: LocaleBoundsInput): LocaleBoundsInput;
+export declare function uploadTargetProps({ entityType, uploadActionForm, entityId, fieldName, }: UploadTargetInput): UploadTargetInput;
+export {};

package/dist/web/primitives/input-optional-props.js

@@ -0,0 +1,24 @@
+// The inputs below take optional props that must be absent, not `undefined`,
+// so a primitive's own defaults still apply.
+export function stateProps({ disabled, required, hasError }) {
+    return {
+        ...(disabled !== undefined && { disabled }),
+        ...(required !== undefined && { required }),
+        ...(hasError !== undefined && { hasError }),
+    };
+}
+export function localeBoundsProps({ locale, min, max }) {
+    return {
+        ...(locale !== undefined && { locale }),
+        ...(min !== undefined && { min }),
+        ...(max !== undefined && { max }),
+    };
+}
+export function uploadTargetProps({ entityType, uploadActionForm, entityId, fieldName, }) {
+    return {
+        ...(entityType !== undefined && { entityType }),
+        ...(uploadActionForm !== undefined && { uploadActionForm }),
+        ...(entityId !== undefined && { entityId }),
+        ...(fieldName !== undefined && { fieldName }),
+    };
+}

package/dist/web/primitives/input-select-presentation.d.ts

@@ -0,0 +1,13 @@
+import { defaultSelectPresentation } from "./field.tsx";
+type SelectPresentation = ReturnType<typeof defaultSelectPresentation>;
+type PresentationOption = {
+    readonly label: string;
+    readonly description?: string;
+    readonly group?: string;
+};
+type PresentationRequest = {
+    readonly radioVariant?: "list" | "card";
+    readonly display?: "radio" | "dropdown";
+};
+export declare function resolveSelectPresentation(request: PresentationRequest, options: readonly PresentationOption[]): SelectPresentation;
+export {};

package/dist/web/primitives/input-select-presentation.js

@@ -0,0 +1,19 @@
+import { defaultSelectPresentation } from "./field.js";
+import { hasDescriptionOrGroup } from "./option-groups.js";
+// An explicit `display` is an author decision and outranks the heuristic in
+// both directions — a requested radio group renders as one even when the
+// options outnumber the heuristic's threshold.
+function requestedSelectPresentation({ radioVariant, display }, options) {
+    if (radioVariant === "card")
+        return "radioList";
+    if (display === "radio")
+        return "segmented";
+    if (display === "dropdown")
+        return "dropdown";
+    return defaultSelectPresentation(options);
+}
+// A segmented control has no room for a description line or group headings.
+export function resolveSelectPresentation(request, options) {
+    const requested = requestedSelectPresentation(request, options);
+    return requested === "segmented" && hasDescriptionOrGroup(options) ? "radioList" : requested;
+}

package/dist/web/primitives/input-shared.d.ts

@@ -0,0 +1,22 @@
+import type { ContextType, ReactNode } from "react";
+import type { InputProps } from "../../index.ts";
+import type { FieldDescriptionContext, FieldLayoutContext } from "./contexts.tsx";
+import type { useFocusOnMount } from "./use-focus-on-mount.ts";
+export type InputKind = InputProps["kind"];
+export type PropsOfKind<K extends InputKind> = InputProps extends infer P ? P extends {
+    readonly kind: infer PK;
+} ? K extends PK ? P : never : never : never;
+export declare function commonInputAttrs(props: InputProps, describedBy: ContextType<typeof FieldDescriptionContext>): {
+    readonly id: string;
+    readonly name: string;
+    readonly disabled: boolean | undefined;
+    readonly "aria-describedby": string | undefined;
+    readonly "aria-required": boolean | undefined;
+    readonly "aria-invalid": true | undefined;
+};
+export type DefaultInputShared = {
+    readonly common: ReturnType<typeof commonInputAttrs>;
+    readonly textInputRef: ReturnType<typeof useFocusOnMount>;
+    readonly booleanLayout: ContextType<typeof FieldLayoutContext>;
+};
+export type KindRenderer<K extends InputKind> = (props: PropsOfKind<K>, shared: DefaultInputShared) => ReactNode;

package/dist/web/primitives/input-shared.js

@@ -0,0 +1,10 @@
+export function commonInputAttrs(props, describedBy) {
+    return {
+        id: props.id,
+        name: props.name,
+        disabled: props.disabled,
+        "aria-describedby": describedBy,
+        "aria-required": props.required,
+        "aria-invalid": props.hasError === true ? true : undefined,
+    };
+}

package/dist/web/primitives/input-temporal-kinds.d.ts

@@ -0,0 +1,5 @@
+import type { KindRenderer } from "./input-shared.ts";
+export declare const renderDateKind: KindRenderer<"date">;
+export declare const renderTimestampKind: KindRenderer<"timestamp">;
+export declare const renderLocatedTimestampKind: KindRenderer<"locatedTimestamp">;
+export declare const renderTzKind: KindRenderer<"tz">;

package/dist/web/primitives/input-temporal-kinds.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { DateInput } from "./date-input.js";
+import { localeBoundsProps, stateProps } from "./input-optional-props.js";
+import { LocatedTimestampInput } from "./located-timestamp-input.js";
+import { TimestampInput } from "./timestamp-input.js";
+import { TzInput } from "./tz-input.js";
+export const renderDateKind = (props) => (_jsx(DateInput, { id: props.id, name: props.name, value: props.value, onChange: props.onChange, ...localeBoundsProps(props), ...stateProps(props) }));
+export const renderTimestampKind = (props) => (_jsx(TimestampInput, { id: props.id, name: props.name, value: props.value, onChange: props.onChange, ...(props.wallClock !== undefined && { wallClock: props.wallClock }), ...localeBoundsProps(props), ...stateProps(props) }));
+export const renderLocatedTimestampKind = (props) => (_jsx(LocatedTimestampInput, { id: props.id, name: props.name, value: props.value, onChange: props.onChange, ...localeBoundsProps(props), ...stateProps(props) }));
+export const renderTzKind = (props) => (_jsx(TzInput, { id: props.id, name: props.name, value: props.value, onChange: props.onChange, ...stateProps(props) }));

package/dist/web/primitives/input-text-kinds.d.ts

@@ -0,0 +1,7 @@
+import type { KindRenderer } from "./input-shared.ts";
+export declare const renderTextKind: KindRenderer<"text">;
+export declare const renderCodeKind: KindRenderer<"code">;
+export declare const renderEmailKind: KindRenderer<"email">;
+export declare const renderMonthKind: KindRenderer<"month">;
+export declare const renderPasswordKind: KindRenderer<"password">;
+export declare const renderTextareaKind: KindRenderer<"textarea">;

package/dist/web/primitives/input-text-kinds.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from "../lib/cn.js";
+import { Input as UiInput } from "../ui/input.js";
+import { Textarea } from "../ui/textarea.js";
+import { CodeInput } from "./code-input.js";
+import { fieldIconFor, textareaMinHeight, withFieldIcon, withInputAddons, withTrailingAction, } from "./field.js";
+export const renderTextKind = (props, { common, textInputRef }) => withInputAddons(props, withFieldIcon(props.icon, _jsx(UiInput, { type: "text", ref: textInputRef, ...common, ...props.dataAttributes, "data-testid": props.testId, readOnly: props.readOnly, value: props.value, onChange: (e) => props.onChange(e.target.value), onKeyDown: props.onKeyDown, ...(props.placeholder !== undefined && { placeholder: props.placeholder }), ...(props.autoComplete !== undefined && { autoComplete: props.autoComplete }), className: cn(fieldIconFor(props.icon) !== undefined ? "pl-8" : undefined) })));
+export const renderCodeKind = (props) => _jsx(CodeInput, { ...props });
+export const renderEmailKind = (props, { common }) => (_jsx(UiInput, { type: "email", ...common, "data-testid": props.testId, value: props.value, onChange: (e) => props.onChange(e.target.value), ...(props.placeholder !== undefined && { placeholder: props.placeholder }), autoComplete: props.autoComplete ?? "email" }));
+export const renderMonthKind = (props, { common }) => (_jsx(UiInput, { type: "month", ...common, "data-testid": props.testId, value: props.value, onChange: (e) => props.onChange(e.target.value) }));
+export const renderPasswordKind = (props, { common }) => withTrailingAction(props.trailingAction, _jsx(UiInput, { type: "password", ...common, "data-testid": props.testId, value: props.value, onChange: (e) => props.onChange(e.target.value), ...(props.placeholder !== undefined && { placeholder: props.placeholder }), autoComplete: props.autoComplete ?? "current-password", className: props.trailingAction !== undefined ? "pr-9" : undefined }), true);
+function textareaShortcutProps({ onKeyDown, onSubmitShortcut }) {
+    if (onSubmitShortcut === undefined && onKeyDown === undefined)
+        return {};
+    return {
+        ...(onSubmitShortcut !== undefined && {
+            "aria-keyshortcuts": "Control+Enter Meta+Enter",
+        }),
+        onKeyDown: (e) => {
+            onKeyDown?.(e);
+            // Lets a caller that already handles Ctrl/Cmd+Enter (e.g. an
+            // "Enter sends" handler that ignores only Shift) opt out of the
+            // shortcut instead of submitting twice.
+            if (e.defaultPrevented)
+                return;
+            if (onSubmitShortcut === undefined || e.key !== "Enter" || !(e.metaKey || e.ctrlKey))
+                return;
+            e.preventDefault();
+            onSubmitShortcut();
+        },
+    };
+}
+export const renderTextareaKind = (props, { common }) => (_jsx(Textarea, { ...common, ...props.dataAttributes, readOnly: props.readOnly, value: props.value, onChange: (e) => props.onChange(e.target.value), rows: props.rows ?? 4, className: "resize-y", ...(props.placeholder !== undefined && { placeholder: props.placeholder }), ...(props.rows !== undefined && { style: textareaMinHeight(props.rows) }), ...textareaShortcutProps(props) }));