@wizeworks/silicaui-mcp 0.40.0 → 0.42.0

package/dist/data/components.json

@@ -3981,14 +3981,22 @@
     "package": "@wizeworks/silicaui-react",
     "category": "Data input",
     "sourceFile": "silicaui-react/src/form.tsx",
-    "description": "Silica Form — a `<form>` that coordinates its Fields' validation. Behavior from Base UI: it runs each Field's validation on submit, focuses the first invalid control, and accepts server-returned `errors` keyed by field `name`. Presentational only otherwise — lay it out with `Field`s and utilities. <Form errors={serverErrors} onSubmit={…}> <Field name=\"email\">…</Field> <Button type=\"submit\">Save</Button> </Form>",
+    "description": "Silica Form — a `<form>` that coordinates its Fields' validation. Behavior from Base UI: it runs each Field's validation on submit, moves focus to the first invalid control, and accepts server-returned `errors` keyed by field `name`. Presentational only otherwise — lay it out with `Field`s and utilities. <Form errors={serverErrors} onSubmit={…}> <Field name=\"email\">…</Field> <Button type=\"submit\">Save</Button> </Form> Silica narrows the focus move, which is unconditional and un-opt-out-able upstream: it never selects the control's existing value, and never takes the caret from a text control the user is typing in when a late `errors` update arrives. Use `focusOnError` to soften it further: <Form focusOnError=\"scroll\" errors={serverErrors}>…</Form> // reveal, don't focus <Form focusOnError={false} errors={serverErrors}>…</Form> // leave focus alone",
     "props": [
       {
         "name": "FormProps",
-        "members": []
+        "extends": "extends React.ComponentPropsWithoutRef<typeof BaseForm>",
+        "members": [
+          {
+            "name": "focusOnError",
+            "optional": true,
+            "type": "FormFocusOnError",
+            "doc": "How an invalid submit (or a late `errors` update) treats focus. Defaults to `true`."
+          }
+        ]
       }
     ],
-    "usageExample": null
+    "usageExample": "import { useState } from \"react\";\nimport {\n    Button,\n    Field,\n    FieldControl,\n    FieldError,\n    FieldLabel,\n    Form,\n    PasswordInput,\n    ToggleGroup,\n    ToggleGroupItem,\n} from \"@wizeworks/silicaui-react\";\nimport type { FormFocusOnError } from \"@wizeworks/silicaui-react\";\nimport { Section, Stack } from \"../lib/Section\";\n\ntype Errors = Record<string, string>;\n\n/**\n * `Form` runs each Field's validation on submit and moves focus to the first\n * invalid control. `focusOnError` decides how far that goes — the sign-in shape\n * below is where it matters, because the rejection arrives from a server long\n * after the user has moved on to the next field.\n */\nexport function FormDemo() {\n    const [focusOnError, setFocusOnError] = useState<FormFocusOnError>(true);\n    const [errors, setErrors] = useState<Errors>({});\n    const [pending, setPending] = useState(false);\n\n    function onSubmit(event: React.FormEvent<HTMLFormElement>) {\n        event.preventDefault();\n        setErrors({});\n        setPending(true);\n        // Stands in for a sign-in round trip. Type into the password field while\n        // it runs: the caret has to stay put when the rejection lands.\n        window.setTimeout(() => {\n            setPending(false);\n            setErrors({ email: \"That address isn't registered.\" });\n        }, 1500);\n    }\n\n    return (\n        <>\n            <Section title=\"focusOnError\">\n                <Stack className=\"max-w-sm\">\n                    <ToggleGroup\n                        size=\"sm\"\n                        value={[String(focusOnError)]}\n                        onValueChange={(v) => {\n                            const next = v[0];\n                            if (next == null) return; // clicking the active item can't clear it\n                            setFocusOnError(\n                                next === \"false\" ? false : next === \"scroll\" ? \"scroll\" : true,\n                            );\n                        }}\n                    >\n                        <ToggleGroupItem value=\"true\">true</ToggleGroupItem>\n                        <ToggleGroupItem value=\"scroll\">scroll</ToggleGroupItem>\n                        <ToggleGroupItem value=\"false\">false</ToggleGroupItem>\n                    </ToggleGroup>\n                    <p className=\"text-sm\">\n                        Submit with an invalid email to see the client-side path. For the\n                        async path, submit a <em>valid</em> address and keep typing your\n                        password during the 1.5s round trip — the rejection must not take\n                        the caret.\n                    </p>\n                </Stack>\n            </Section>\n\n            <Section title=\"Sign in\">\n                <Form\n                    errors={errors}\n                    focusOnError={focusOnError}\n                    onSubmit={onSubmit}\n                    className=\"grid max-w-sm gap-4\"\n                >\n                    <Field name=\"email\">\n                        <FieldLabel required>Email</FieldLabel>\n                        <FieldControl\n                            type=\"email\"\n                            required\n                            placeholder=\"you@example.com\"\n                            data-testid=\"demo-email\"\n                        />\n                        <FieldError />\n                    </Field>\n                    <Field\n                        name=\"password\"\n                        validate={(v) =>\n                            String(v ?? \"\").length >= 8 ? null : \"Use at least 8 characters.\"\n                        }\n                    >\n                        <FieldLabel required>Password</FieldLabel>\n                        <FieldControl\n                            required\n                            render={<PasswordInput data-testid=\"demo-password\" />}\n                        />\n                        <FieldError />\n                    </Field>\n                    <Button type=\"submit\" color=\"primary\" loading={pending}>\n                        {pending ? \"Signing in…\" : \"Sign in\"}\n                    </Button>\n                </Form>\n            </Section>\n        </>\n    );\n}"
   },
   {
     "name": "Input",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wizeworks/silicaui-mcp",
-  "version": "0.40.0",
+  "version": "0.42.0",
   "description": "A local MCP server that lets AI coding assistants query the Silica UI design system — real class names, component props, blocks, and behaviors — instead of guessing.",
   "type": "module",
   "license": "MIT",