@mohasinac/appkit 4.61.0 → 4.62.0

package/dist/ui/components/Select.js

@@ -6,6 +6,14 @@ import { Label, Text } from "./Typography.js";
 export function Select({ options, value, onChange, onValueChange, placeholder, label, error, helperText, disabled = false, required, className = "", id, variant = "default", bare = false, wrapperClassName, ...props }) {
     const generatedId = React.useId();
     const inputId = id ?? generatedId;
+    /*
+     * A caller's own `aria-invalid` wins. `{...props}` is spread first, so
+     * re-specifying the attribute afterwards used to overwrite an incoming
+     * `"true"` with `undefined` — and `FieldSelect` sets it itself while
+     * withholding `error` (to avoid a double message). See the full writeup in
+     * `Input.tsx`; the same bug existed here.
+     */
+    const ariaInvalid = props["aria-invalid"] ?? (error ? "true" : undefined);
     const handleChange = (event) => {
         onChange?.(event);
         onValueChange?.(event.target.value);
@@ -28,7 +36,7 @@ export function Select({ options, value, onChange, onValueChange, placeholder, l
         .join(" ");
     const optionsMarkup = (_jsxs(_Fragment, { children: [placeholder ? (_jsx("option", { value: "", disabled: true, children: placeholder })) : null, options.map((option) => (_jsx("option", { value: option.value, disabled: option.disabled, children: option.label }, String(option.value))))] }));
     if (bare) {
-        return (_jsx("select", { ...props, id: inputId, value: value, onChange: handleChange, disabled: disabled, "aria-invalid": error ? "true" : undefined, className: selectClassName, children: optionsMarkup }));
+        return (_jsx("select", { ...props, id: inputId, value: value, onChange: handleChange, disabled: disabled, "aria-invalid": ariaInvalid, className: selectClassName, children: optionsMarkup }));
     }
-    return (_jsxs("div", { className: ["appkit-select", wrapperClassName].filter(Boolean).join(" "), "data-section": "select-div-592", children: [label && (_jsx(Label, { htmlFor: inputId, className: "appkit-select__label", required: required, children: label })), _jsxs("div", { className: "relative group", "data-section": "select-div-593", children: [_jsx("select", { ...props, id: inputId, value: value, onChange: handleChange, disabled: disabled, "aria-invalid": error ? "true" : undefined, className: selectClassName, children: optionsMarkup }), _jsx(Div, { className: "pointer-events-none absolute inset-y-0 right-3 flex items-center text-[var(--appkit-color-text-faint)]", "data-section": "select-div-594", children: _jsx("svg", { className: "h-4 w-4", viewBox: "0 0 20 20", fill: "currentColor", "aria-hidden": "true", children: _jsx("path", { fillRule: "evenodd", d: "M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z", clipRule: "evenodd" }) }) })] }), error ? (_jsx(Text, { size: "sm", variant: "error", className: "appkit-select__error", role: "alert", children: error })) : helperText ? (_jsx(Text, { size: "sm", variant: "secondary", className: "appkit-select__error", children: helperText })) : null] }));
+    return (_jsxs("div", { className: ["appkit-select", wrapperClassName].filter(Boolean).join(" "), "data-section": "select-div-592", children: [label && (_jsx(Label, { htmlFor: inputId, className: "appkit-select__label", required: required, children: label })), _jsxs("div", { className: "relative group", "data-section": "select-div-593", children: [_jsx("select", { ...props, id: inputId, value: value, onChange: handleChange, disabled: disabled, "aria-invalid": ariaInvalid, className: selectClassName, children: optionsMarkup }), _jsx(Div, { className: "pointer-events-none absolute inset-y-0 right-3 flex items-center text-[var(--appkit-color-text-faint)]", "data-section": "select-div-594", children: _jsx("svg", { className: "h-4 w-4", viewBox: "0 0 20 20", fill: "currentColor", "aria-hidden": "true", children: _jsx("path", { fillRule: "evenodd", d: "M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z", clipRule: "evenodd" }) }) })] }), error ? (_jsx(Text, { size: "sm", variant: "error", className: "appkit-select__error", role: "alert", children: error })) : helperText ? (_jsx(Text, { size: "sm", variant: "secondary", className: "appkit-select__error", children: helperText })) : null] }));
 }

package/dist/ui/components/TagInput.d.ts

@@ -7,5 +7,12 @@ export interface TagInputProps {
     placeholder?: string;
     className?: string;
     helperText?: string;
+    /**
+     * Validation message. This control had no error slot at all, so a schema
+     * failure on a tags field could only ever appear in the summary — the field
+     * itself showed nothing and was not announced as invalid. Mirrors the
+     * contract Input/Select/Textarea/Checkbox already have.
+     */
+    error?: React.ReactNode;
 }
-export declare function TagInput({ value, onChange, disabled, label, placeholder, className, helperText, }: TagInputProps): React.JSX.Element;
+export declare function TagInput({ value, onChange, disabled, label, placeholder, className, helperText, error, }: TagInputProps): React.JSX.Element;

package/dist/ui/components/TagInput.js

@@ -1,10 +1,11 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useRef, useState } from "react";
+import React, { useRef, useState } from "react";
 import { Label, Span } from "./Typography.js";
-export function TagInput({ value, onChange, disabled = false, label, placeholder = "Add a tag...", className = "", helperText = "Press Enter or comma to add a tag", }) {
+export function TagInput({ value, onChange, disabled = false, label, placeholder = "Add a tag...", className = "", helperText = "Press Enter or comma to add a tag", error, }) {
     const [draft, setDraft] = useState("");
     const inputRef = useRef(null);
+    const errorId = React.useId();
     const normalizeTag = (raw) => raw.trim().replace(/,+$/, "").trim();
     const addTag = (raw) => {
         const tag = normalizeTag(raw);
@@ -69,5 +70,5 @@ export function TagInput({ value, onChange, disabled = false, label, placeholder
                             disabled ? "appkit-tag-input__text--disabled" : "",
                         ]
                             .filter(Boolean)
-                            .join(" "), "aria-label": label ?? "Tag input" })] }), helperText && (_jsx(Span, { size: "xs", className: "appkit-tag-input__helper", children: helperText }))] }));
+                            .join(" "), "aria-label": label ?? "Tag input", "aria-invalid": error ? "true" : undefined, "aria-describedby": error ? errorId : undefined })] }), error ? (_jsx(Span, { id: errorId, size: "xs", className: "appkit-tag-input__helper appkit-form-field__error", role: "alert", children: error })) : helperText ? (_jsx(Span, { size: "xs", className: "appkit-tag-input__helper", children: helperText })) : null] }));
 }

package/dist/ui/components/Textarea.js

@@ -15,12 +15,20 @@ export const Textarea = React.forwardRef(function Textarea({ label, error, helpe
         : variant === "ghost"
             ? "border-transparent bg-transparent shadow-none"
             : "";
+    /*
+     * A caller's own `aria-invalid` wins. `{...props}` is spread first, so
+     * re-specifying the attribute afterwards used to overwrite an incoming
+     * `"true"` with `undefined` — and `FieldTextarea` sets it itself while
+     * withholding `error` (to avoid a double message). See the full writeup in
+     * `Input.tsx`; the same bug existed here.
+     */
+    const ariaInvalid = props["aria-invalid"] ?? (error ? "true" : undefined);
     const textareaClassName = ["appkit-textarea", variantClass, className]
         .filter(Boolean)
         .join(" ");
     if (bare) {
-        return (_jsx("textarea", { ...props, ref: ref, id: inputId, value: value, defaultValue: defaultValue, maxLength: maxLength, "aria-invalid": error ? "true" : undefined, className: textareaClassName }));
+        return (_jsx("textarea", { ...props, ref: ref, id: inputId, value: value, defaultValue: defaultValue, maxLength: maxLength, "aria-invalid": ariaInvalid, className: textareaClassName }));
     }
-    return (_jsxs("div", { className: "w-full", "data-section": "textarea-div-620", children: [label && (_jsx(Label, { htmlFor: inputId, required: required, children: label })), _jsx("textarea", { ...props, ref: ref, id: inputId, value: value, defaultValue: defaultValue, maxLength: maxLength, "aria-invalid": error ? "true" : undefined, className: textareaClassName }), (error || helperText || (showCharCount && maxLength)) && (_jsxs("div", { className: "mt-1.5 flex items-start justify-between gap-3", "data-section": "textarea-div-621", children: [_jsx("div", { className: "min-w-0 flex-1", "data-section": "textarea-div-622", children: error ? (_jsx(Text, { size: "sm", variant: "error", role: "alert", children: error })) : helperText ? (_jsx(Text, { size: "sm", variant: "secondary", children: helperText })) : null }), showCharCount && maxLength ? (_jsxs(Text, { size: "xs", variant: charCount >= maxLength ? "error" : "muted", className: "shrink-0 tabular-nums", children: [charCount, "/", maxLength] })) : null] }))] }));
+    return (_jsxs("div", { className: "w-full", "data-section": "textarea-div-620", children: [label && (_jsx(Label, { htmlFor: inputId, required: required, children: label })), _jsx("textarea", { ...props, ref: ref, id: inputId, value: value, defaultValue: defaultValue, maxLength: maxLength, "aria-invalid": ariaInvalid, className: textareaClassName }), (error || helperText || (showCharCount && maxLength)) && (_jsxs("div", { className: "mt-1.5 flex items-start justify-between gap-3", "data-section": "textarea-div-621", children: [_jsx("div", { className: "min-w-0 flex-1", "data-section": "textarea-div-622", children: error ? (_jsx(Text, { size: "sm", variant: "error", role: "alert", children: error })) : helperText ? (_jsx(Text, { size: "sm", variant: "secondary", children: helperText })) : null }), showCharCount && maxLength ? (_jsxs(Text, { size: "xs", variant: charCount >= maxLength ? "error" : "muted", className: "shrink-0 tabular-nums", children: [charCount, "/", maxLength] })) : null] }))] }));
 });
 Textarea.displayName = "Textarea";

package/dist/ui/forms/FieldCheckbox.js

@@ -34,5 +34,5 @@ export function FieldCheckbox({ name, label, hint, checked, onChange, onBlur, di
         ctx?.setFieldTouched(name);
         onBlur?.();
     }
-    return (_jsxs("div", { className: ["appkit-form-field", className].filter(Boolean).join(" "), children: [_jsx(Checkbox, { id: inputId, name: name, checked: checked, onChange: handleChange, onBlur: handleBlur, label: label, disabled: disabled, "aria-describedby": showError ? errorId : undefined }), !showError && hint && (_jsx(Text, { size: "sm", variant: "secondary", className: "appkit-form-field__hint", children: hint })), showError && (_jsx(Text, { id: errorId, size: "sm", variant: "error", className: "appkit-form-field__error", role: "alert", children: error }))] }));
+    return (_jsxs("div", { className: ["appkit-form-field", className].filter(Boolean).join(" "), children: [_jsx(Checkbox, { id: inputId, name: name, checked: checked, onChange: handleChange, onBlur: handleBlur, label: label, disabled: disabled, "aria-invalid": showError || undefined, "aria-describedby": showError ? errorId : undefined }), !showError && hint && (_jsx(Text, { size: "sm", variant: "secondary", className: "appkit-form-field__hint", children: hint })), showError && (_jsx(Text, { id: errorId, size: "sm", variant: "error", className: "appkit-form-field__error", role: "alert", children: error }))] }));
 }

package/dist/ui/forms/FormErrorList.d.ts

@@ -9,21 +9,5 @@ export interface FormErrorListProps {
     ctx?: FormShellContextValue;
     className?: string;
 }
-/**
- * The `<ul>` of current validation errors, with a jump link per entry when
- * the form declares sections.
- *
- * WHY it is its own file: two surfaces render this exact list — the inline
- * `<FormErrorSummary>` beside the submit button on desktop, and the mobile
- * "Fix N issues" sheet in the bottom-chrome tier. Writing it twice would mean
- * a jump-link fix, an empty-state fix or a wording fix landing in one and not
- * the other, which is the bug-fix multiplier the Duplication Framework calls
- * out. There are exactly two consumers and they are the same list, so this is
- * a consolidation, not speculative abstraction.
- *
- * Renders nothing when there are no errors. It does NOT gate on
- * `submitAttempted` — that is the *summary's* decision, not the list's, and
- * the sheet needs to keep rendering while open.
- */
 export declare function FormErrorList({ ctx: ctxProp, className }: FormErrorListProps): import("react").JSX.Element | null;
 export default FormErrorList;

package/dist/ui/forms/FormErrorList.js

@@ -19,6 +19,39 @@ import { Span } from "../components/Typography.js";
  * `submitAttempted` — that is the *summary's* decision, not the list's, and
  * the sheet needs to keep rendering while open.
  */
+/*
+ * 🛑 The two sides of this lookup use DIFFERENT key shapes, so an exact match
+ * silently loses every nested error.
+ *
+ * `errors` is keyed by the full dotted Zod path — `applyZodIssues` does
+ * `issue.path.map(String).join(".")`, giving `"address.line1"`. But
+ * `fieldToStepIndex` is built by `buildFieldToSectionIndex` from
+ * `SectionDef.fields`, which lists BARE field names — `"address"`. So
+ * `fieldToStepIndex["address.line1"]` was always `undefined`, the entry fell
+ * through to the plain `<Span>`, and the error that a section demonstrably
+ * owned rendered with no jump link.
+ *
+ * `SectionForm` already solved this for its own badge counts
+ * (`erroringSectionIds`, `errorCountFor`) with a prefix match. This is the same
+ * rule, so the list and the badges can no longer disagree about which section
+ * an error belongs to.
+ *
+ * Exact match is tried first: a field genuinely named `"address.line1"` must
+ * beat a prefix match on `"address"`.
+ */
+function resolveStepIndex(ctx, key) {
+    const map = ctx.fieldToStepIndex;
+    if (!map)
+        return undefined;
+    const exact = map[key];
+    if (exact != null)
+        return exact;
+    for (const [field, index] of Object.entries(map)) {
+        if (key.startsWith(`${field}.`))
+            return index;
+    }
+    return undefined;
+}
 export function FormErrorList({ ctx: ctxProp, className }) {
     const ambient = useContext(FormShellContext);
     const ctx = ctxProp ?? ambient;
@@ -28,7 +61,7 @@ export function FormErrorList({ ctx: ctxProp, className }) {
     if (entries.length === 0)
         return null;
     return (_jsx("ul", { className: ["appkit-formshell__error-summary__list", className].filter(Boolean).join(" "), children: entries.map(([key, message]) => {
-            const stepIndex = ctx.fieldToStepIndex?.[key];
+            const stepIndex = resolveStepIndex(ctx, key);
             const stepLabel = stepIndex != null ? ctx.steps[stepIndex]?.label : undefined;
             return (_jsx("li", { children: stepLabel ? (_jsxs("button", { type: "button", className: "appkit-formshell__error-summary__step-link", onClick: () => ctx.goToStep(stepIndex), children: [_jsxs(Span, { weight: "semibold", children: [stepLabel, ":"] }), " ", message] })) : (_jsx(Span, { children: message })) }, key));
         }) }));

package/dist/ui/forms/apply-zod-issues.d.ts

@@ -22,7 +22,16 @@
  *
  * Root-level `.refine()` issues (empty `path: []`, no owning field) are still
  * skipped — there is no field to attach them to, so the caller must surface
- * those some other way (they fall through to a toast in `surfaceError`).
+ * those some other way.
+ *
+ * 🛑 That last sentence used to end "(they fall through to a toast in
+ * `surfaceError`)", which was only true when EVERY issue was root-level.
+ * In the mixed case — one field error plus one cross-field `.refine()`, which
+ * is the common shape for "passwords must match" or "end date must be after
+ * start date" — `hasAttachableIssue` returned true, this function skipped the
+ * root issue, and `surfaceError` returned without a toast. The cross-field
+ * rule was enforced, the save was refused, and the user was told nothing
+ * about why. `rootLevelMessages` below is how a caller surfaces them.
  */
 export declare function applyZodIssues(issues: ReadonlyArray<{
     path?: ReadonlyArray<PropertyKey>;
@@ -32,3 +41,12 @@ export declare function applyZodIssues(issues: ReadonlyArray<{
 export declare function hasAttachableIssue(issues: ReadonlyArray<{
     path?: ReadonlyArray<PropertyKey>;
 }> | undefined): boolean;
+/**
+ * The messages `applyZodIssues` cannot attach — the root-level `.refine()`
+ * ones with no owning field. A caller that has just run `applyZodIssues`
+ * should surface these separately, or they are silently discarded.
+ */
+export declare function rootLevelMessages(issues: ReadonlyArray<{
+    path?: ReadonlyArray<PropertyKey>;
+    message: string;
+}> | undefined): string[];

package/dist/ui/forms/apply-zod-issues.js

@@ -22,7 +22,16 @@
  *
  * Root-level `.refine()` issues (empty `path: []`, no owning field) are still
  * skipped — there is no field to attach them to, so the caller must surface
- * those some other way (they fall through to a toast in `surfaceError`).
+ * those some other way.
+ *
+ * 🛑 That last sentence used to end "(they fall through to a toast in
+ * `surfaceError`)", which was only true when EVERY issue was root-level.
+ * In the mixed case — one field error plus one cross-field `.refine()`, which
+ * is the common shape for "passwords must match" or "end date must be after
+ * start date" — `hasAttachableIssue` returned true, this function skipped the
+ * root issue, and `surfaceError` returned without a toast. The cross-field
+ * rule was enforced, the save was refused, and the user was told nothing
+ * about why. `rootLevelMessages` below is how a caller surfaces them.
  */
 export function applyZodIssues(issues, setFieldError) {
     for (const issue of issues) {
@@ -36,3 +45,16 @@ export function applyZodIssues(issues, setFieldError) {
 export function hasAttachableIssue(issues) {
     return Boolean(issues?.some((i) => i.path && i.path.length > 0));
 }
+/**
+ * The messages `applyZodIssues` cannot attach — the root-level `.refine()`
+ * ones with no owning field. A caller that has just run `applyZodIssues`
+ * should surface these separately, or they are silently discarded.
+ */
+export function rootLevelMessages(issues) {
+    if (!issues)
+        return [];
+    return issues
+        .filter((i) => !i.path || i.path.length === 0)
+        .map((i) => i.message)
+        .filter((m) => typeof m === "string" && m.length > 0);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mohasinac/appkit",
-  "version": "4.61.0",
+  "version": "4.62.0",
   "license": "MIT",
   "publishConfig": {
     "access": "public"