@boxcustodia/library 2.0.0-alpha.21 → 2.0.0-alpha.22

package/dist/src/components/form/form.d.ts

@@ -1,5 +1,5 @@
 import { Form as FormPrimitive } from '@base-ui/react/form';
 import { default as React } from 'react';
-export type FormProps = FormPrimitive.Props;
-export declare function Form(props: FormProps): React.ReactElement;
+export type FormProps<TValues extends Record<string, any> = Record<string, any>> = FormPrimitive.Props<TValues>;
+export declare function Form<TValues extends Record<string, any> = Record<string, any>>(props: FormProps<TValues>): React.ReactElement;
 export { FormPrimitive };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@boxcustodia/library",
-  "version": "2.0.0-alpha.21",
+  "version": "2.0.0-alpha.22",
   "type": "module",
   "main": "dist/index.cjs.js",
   "module": "dist/index.es.js",
@@ -81,14 +81,14 @@
   },
   "devDependencies": {
     "@biomejs/biome": "^2.3.8",
-    "@chromatic-com/storybook": "^5.1.2",
+    "@chromatic-com/storybook": "^5.2.1",
     "@faker-js/faker": "^10.1.0",
     "@headless-tree/react": "^1.7.0",
-    "@storybook/addon-docs": "10.3.5",
-    "@storybook/addon-links": "10.3.5",
+    "@storybook/addon-docs": "10.4.3",
+    "@storybook/addon-links": "10.4.3",
     "@storybook/addon-mcp": "^0.6.0",
-    "@storybook/addon-onboarding": "10.3.5",
-    "@storybook/react-vite": "10.3.5",
+    "@storybook/addon-onboarding": "10.4.3",
+    "@storybook/react-vite": "10.4.3",
     "@tailwindcss/cli": "^4.1.18",
     "@tailwindcss/vite": "^4.1.18",
     "@testing-library/jest-dom": "^6.9.1",
@@ -109,7 +109,7 @@
     "react-markdown": "^10.1.0",
     "rollup-plugin-preserve-directives": "^0.4.0",
     "standard-version": "^9.5.0",
-    "storybook": "10.3.5",
+    "storybook": "10.4.3",
     "storybook-addon-tag-badges": "^3.1.0",
     "tailwindcss": "^4.1.18",
     "typescript": "^5.9.3",

package/src/components/form/form.stories.tsx

@@ -365,6 +365,39 @@ export const OnFormSubmit: Story = {
   },
 };
 
+/**
+ * Pass a type argument to `Form` to get a typed `onFormSubmit` callback.
+ * `data` is inferred as `{ email: string; username: string }` — no cast needed.
+ */
+export const TypedOnFormSubmit: Story = {
+  render: () => {
+    const [values, setValues] = useState<{
+      email: string;
+      username: string;
+    } | null>(null);
+
+    return (
+      <Form<{ email: string; username: string }>
+        className="flex w-80 flex-col gap-4"
+        onFormSubmit={(data) => setValues(data)}
+      >
+        <Field name="email" label="Email">
+          <Input type="email" required placeholder="you@example.com" />
+        </Field>
+        <Field name="username" label="Username">
+          <Input required placeholder="e.g. jane_doe" />
+        </Field>
+        <Button type="submit">Submit</Button>
+        {values && (
+          <pre className="rounded-md bg-muted p-3 text-xs">
+            {JSON.stringify(values, null, 2)}
+          </pre>
+        )}
+      </Form>
+    );
+  },
+};
+
 const ZodSchema = z.object({
   name: z.string().min(1, "Name is required."),
   age: z.coerce

package/src/components/form/form.tsx

@@ -3,9 +3,12 @@
 import { Form as FormPrimitive } from "@base-ui/react/form";
 import type React from "react";
 
-export type FormProps = FormPrimitive.Props;
+export type FormProps<TValues extends Record<string, any> = Record<string, any>> =
+  FormPrimitive.Props<TValues>;
 
-export function Form(props: FormProps): React.ReactElement {
+export function Form<TValues extends Record<string, any> = Record<string, any>>(
+  props: FormProps<TValues>,
+): React.ReactElement {
   return <FormPrimitive data-slot="form" {...props} />;
 }