@structuralists/scaffolding 0.10.1 → 0.11.0

package/src/forms/state/useFormState/useFieldBinding.test.tsx

@@ -0,0 +1,165 @@
+import { describe, test, expect } from 'bun:test';
+import { act, renderHook } from '@testing-library/react';
+import { useFieldBinding } from './useFieldBinding';
+import { useFormState } from './useFormState';
+import { notEmpty } from '../validators/validators';
+
+// Field binding exercised through useFormState — the composition consumers
+// see. Pins the three behaviors item 6 added: granular path writes (the
+// immutable mirror of read()), touched tracking fed by onBlur, and the
+// error-display policy living inside errorMessage.
+
+type Address = { city: string | undefined; zip: string | undefined };
+
+type ProfileForm = {
+  email: string | undefined;
+  homeAddress: Address;
+  mailingAddress: Address | undefined;
+  pets: Array<{ name: string | undefined }>;
+};
+
+const initialValues: ProfileForm = {
+  email: undefined,
+  homeAddress: { city: undefined, zip: undefined },
+  mailingAddress: undefined,
+  pets: [{ name: 'Rex' }, { name: 'Milou' }],
+};
+
+const setup = () =>
+  renderHook(() =>
+    useFormState({
+      initialValues,
+      constraints: { email: notEmpty('email') },
+    }),
+  );
+
+describe('getFormFieldPropsAt — value and writes', () => {
+  test('reads the value at a deep path', () => {
+    const { result } = setup();
+    expect(result.current.getFormFieldPropsAt(['pets', 0, 'name']).value).toBe(
+      'Rex',
+    );
+    expect(
+      result.current.getFormFieldPropsAt(['homeAddress', 'city']).value,
+    ).toBeUndefined();
+  });
+
+  test('a path through an absent section reads undefined and writes as a no-op', () => {
+    const { result } = setup();
+    const field = result.current.getFormFieldPropsAt(['mailingAddress', 'city']);
+    expect(field.value).toBeUndefined();
+
+    act(() => {
+      field.onChange('Paris');
+    });
+    // The write mirrored read()'s dead-step semantics: nothing changed.
+    expect(result.current.values).toBe(initialValues);
+  });
+
+  test('onChange writes at the path immutably, preserving sibling identity', () => {
+    const { result } = setup();
+
+    act(() => {
+      result.current.getFormFieldPropsAt(['homeAddress', 'city']).onChange('Paris');
+    });
+
+    expect(result.current.values.homeAddress.city).toBe('Paris');
+    // Untouched branches keep their identity — only the spine was cloned.
+    expect(result.current.values.pets).toBe(initialValues.pets);
+    expect(result.current.values).not.toBe(initialValues);
+    expect(initialValues.homeAddress.city).toBeUndefined();
+  });
+
+  test('onChange into a list element rewrites only that element', () => {
+    const { result } = setup();
+
+    act(() => {
+      result.current.getFormFieldPropsAt(['pets', 1, 'name']).onChange('Snowy');
+    });
+
+    expect(result.current.values.pets[1].name).toBe('Snowy');
+    expect(result.current.values.pets[0]).toBe(initialValues.pets[0]);
+  });
+});
+
+describe('getFormFieldPropsAt — error-display policy', () => {
+  test('an untouched field shows no error before a submit attempt', () => {
+    const { result } = setup();
+    // The error exists in the raw list …
+    expect(result.current.errors).toEqual([
+      { path: ['email'], error: "'email' cannot be empty" },
+    ]);
+    // … but the binding withholds it until touched or submit-attempted.
+    expect(
+      result.current.getFormFieldPropsAt(['email']).errorMessage,
+    ).toBeUndefined();
+  });
+
+  test('onBlur marks the field touched and unlocks its error — only its own', () => {
+    const { result } = setup();
+
+    act(() => {
+      result.current.getFormFieldPropsAt(['email']).onBlur();
+    });
+
+    expect(result.current.getFormFieldPropsAt(['email']).errorMessage).toBe(
+      "'email' cannot be empty",
+    );
+    // Another field stays untouched: same policy, independent state.
+    expect(
+      result.current.getFormFieldPropsAt(['homeAddress', 'city']).errorMessage,
+    ).toBeUndefined();
+  });
+
+  test('a submit attempt unlocks every field’s error', () => {
+    const { result } = setup();
+
+    act(() => {
+      result.current.submit();
+    });
+
+    expect(result.current.getFormFieldPropsAt(['email']).errorMessage).toBe(
+      "'email' cannot be empty",
+    );
+  });
+
+  test('a touched field’s error clears once the value is fixed', () => {
+    const { result } = setup();
+
+    act(() => {
+      result.current.getFormFieldPropsAt(['email']).onBlur();
+    });
+    act(() => {
+      result.current.getFormFieldPropsAt(['email']).onChange('a@b.co');
+    });
+
+    expect(
+      result.current.getFormFieldPropsAt(['email']).errorMessage,
+    ).toBeUndefined();
+  });
+
+  test('repeat blurs on the same path keep the touched list stable', () => {
+    // At the useFieldBinding boundary, where the touched list is returned.
+    const { result } = renderHook(() =>
+      useFieldBinding({
+        values: initialValues,
+        onValueChanges: () => {},
+        errors: [],
+        submitAttempted: false,
+      }),
+    );
+
+    act(() => {
+      result.current.getFormFieldPropsAt(['email']).onBlur();
+    });
+    const touchedAfterFirst = result.current.touched;
+    expect(touchedAfterFirst).toEqual([['email']]);
+
+    act(() => {
+      result.current.getFormFieldPropsAt(['email']).onBlur();
+    });
+    // Re-blurring an already-touched path is a state no-op — the setter
+    // returns the same array, so nothing downstream sees a change.
+    expect(result.current.touched).toBe(touchedAfterFirst);
+  });
+});

package/src/forms/state/useFormState/useFieldBinding.ts

@@ -0,0 +1,71 @@
+import { useState } from 'react';
+import { errorAt } from './errorAt';
+import type { FormErrors, FormFieldProps, FormValuesObject } from './types';
+import { pathsEqual, read, write } from '../path/path';
+import type { CursorStep, Path, PathStep, ValueAt } from '../path/types';
+
+export type UseFieldBindingArgs<T extends FormValuesObject> = {
+  values: T;
+  onValueChanges: (val: T | ((prev: T) => T)) => void;
+  errors: FormErrors<T>;
+  submitAttempted: boolean;
+};
+
+// Field binding: owns per-field touched state and builds
+// `getFormFieldPropsAt`, the one-expression wiring for a field (see
+// FormHelpers in ./types.ts).
+//
+// THE error-display policy lives here, in `errorMessage`, and nowhere else:
+// a field's error is shown once the field has been touched (blurred at
+// least once) OR a submit has been attempted. Elements render the message
+// they are given and stay policy-free; anything wanting a different policy
+// (e.g. always-live display) reads `errors`/`errorAt` directly instead.
+export const useFieldBinding = <T extends FormValuesObject>(
+  args: UseFieldBindingArgs<T>,
+) => {
+  const { values, onValueChanges, errors, submitAttempted } = args;
+
+  // Same representation as FormErrors: a plain list of typed paths compared
+  // structurally (pathsEqual). At form scale a linear scan is fine.
+  const [touched, setTouched] = useState<readonly Path<T>[]>([]);
+
+  const getFormFieldPropsAt = <P extends Path<T>>(
+    path: P,
+  ): FormFieldProps<ValueAt<T, P>> => {
+    // Path<T> is always a PathStep tuple; the conditional type just can't
+    // prove it for an unresolved T. Same honest widening as `Cursor.at`.
+    const steps = path as readonly PathStep[];
+    const keySteps: readonly CursorStep[] = steps.map((key) => ({
+      kind: 'key',
+      key,
+    }));
+
+    const isTouched = touched.some((candidate) =>
+      pathsEqual(candidate as readonly PathStep[], steps),
+    );
+
+    return {
+      // read() resolves exactly what ValueAt<T, P> promises — including the
+      // `| undefined` picked up through nullable ancestors — TS just can't
+      // correlate them for generic T. Honest cast, documented in the cast
+      // doctrine (src/forms/CLAUDE.md).
+      value: read(values, keySteps) as ValueAt<T, P>,
+      // write() replaces the value at the path and clones only the spine —
+      // the result is the same T shape. Same honest correlation as `value`.
+      onChange: (val) =>
+        onValueChanges((prev) => write(prev, steps, val) as T),
+      errorMessage:
+        submitAttempted || isTouched ? errorAt(errors, path) : undefined,
+      onBlur: () =>
+        setTouched((prev) =>
+          prev.some((candidate) =>
+            pathsEqual(candidate as readonly PathStep[], steps),
+          )
+            ? prev
+            : [...prev, path],
+        ),
+    };
+  };
+
+  return { touched, getFormFieldPropsAt };
+};

package/src/forms/{useFormState → state/useFormState}/useFormDebugger.test.tsx

@@ -21,6 +21,7 @@ const Host = () => {
       errors: [],
       isValid: true,
       submitAttempted: false,
+      touched: [],
     },
   });
 

package/src/forms/{useFormState → state/useFormState}/useFormState.stories.tsx

@@ -5,10 +5,13 @@ import { useFormState } from './useFormState';
 import { errorAt } from './errorAt';
 import type { FormErrors } from './types';
 import { matches, minLength, notEmpty } from '../validators/validators';
-import { Field } from '../../components/Forms/Field';
-import { Input } from '../../components/Forms/Input';
-import { Button } from '../../components/Forms/Button';
-import { SingleSelect } from '../../components/Forms/Select';
+import { Field } from '../../elements/Field';
+import { Input } from '../../elements/Input';
+import { Button } from '../../elements/Button';
+import { SingleSelect } from '../../elements/Select';
+import type { SelectOption } from '../../elements/Select';
+import { SingleSelectForForm } from '../bindings/SingleSelectForForm';
+import { TextInputForForm } from '../bindings/TextInputForForm';
 
 const meta: Meta = {
   title: 'Forms/useFormState',
@@ -43,6 +46,10 @@ const ROLE_OPTIONS = [
   { value: 'manager', label: 'Manager' },
 ];
 
+// Deliberately hand-wired — the contrast case for the FieldBinding story
+// below: every field spells out its own read, spread-update, error lookup,
+// and submit gating. `getFormFieldPropsAt` + the ForForm wrappers collapse
+// those four decisions into one expression per field.
 const SignupDemo = () => {
   const [submitted, setSubmitted] = useState<SubmittedValues | null>(null);
 
@@ -259,6 +266,162 @@ export const LiveValidity: Story = {
   },
 };
 
+type CoverageType = 'liability' | 'comprehensive';
+
+type QuoteFormValues = {
+  email: string | undefined;
+  coverageType: CoverageType | null;
+  homeAddress: {
+    city: string | undefined;
+    postalCode: string | undefined;
+  };
+};
+
+// What onSubmit receives: notEmpty strips undefined from email and null
+// from coverageType. The setSubmitted(vals) call below compiling is the
+// proof that refinement still flows end-to-end when fields are wired
+// through bindings.
+type SubmittedQuote = {
+  email: string;
+  coverageType: CoverageType;
+  homeAddress: QuoteFormValues['homeAddress'];
+};
+
+const COVERAGE_OPTIONS: SelectOption<CoverageType>[] = [
+  { value: 'liability', label: 'Liability' },
+  { value: 'comprehensive', label: 'Comprehensive' },
+];
+
+// The item-6 target: one expression wires a field. getFormFieldPropsAt
+// bundles value + typed onChange (an immutable write at the path) +
+// display-policy-aware errorMessage + onBlur, and the ForForm wrappers
+// take the bundle as a single prop. Note the deep paths into homeAddress —
+// no hand-spread updates anywhere.
+const FieldBindingDemo = () => {
+  const [submitted, setSubmitted] = useState<SubmittedQuote | null>(null);
+
+  const { getFormFieldPropsAt, submit } = useFormState({
+    initialValues: {
+      email: undefined,
+      coverageType: null,
+      homeAddress: { city: undefined, postalCode: undefined },
+    } as QuoteFormValues,
+    constraints: {
+      email: [notEmpty('email'), matches('email', /@/, 'a valid email')],
+      coverageType: notEmpty('coverageType'),
+    },
+    onSubmit: (vals) => setSubmitted(vals),
+  });
+
+  return (
+    <form
+      style={{ maxWidth: 420, display: 'grid', gap: 16 }}
+      onSubmit={(e) => {
+        e.preventDefault();
+        submit();
+      }}
+    >
+      <TextInputForForm
+        label="Email"
+        type="email"
+        placeholder="you@example.com"
+        hint="Blur the empty field to see touched-gated errors"
+        formFieldProps={getFormFieldPropsAt(['email'])}
+      />
+
+      <SingleSelectForForm
+        label="Coverage"
+        options={COVERAGE_OPTIONS}
+        placeholder="Pick a coverage"
+        formFieldProps={getFormFieldPropsAt(['coverageType'])}
+      />
+
+      <TextInputForForm
+        label="City"
+        formFieldProps={getFormFieldPropsAt(['homeAddress', 'city'])}
+      />
+
+      <TextInputForForm
+        label="Postal code"
+        formFieldProps={getFormFieldPropsAt(['homeAddress', 'postalCode'])}
+      />
+
+      <div>
+        <Button type="submit" variant="primary">
+          Get quote
+        </Button>
+      </div>
+
+      {submitted && (
+        <pre
+          style={{
+            background: 'var(--ui-surface-muted, #f4f4f4)',
+            padding: 12,
+            borderRadius: 6,
+            fontSize: 12,
+            margin: 0,
+          }}
+        >
+          {`onSubmit received (narrowed type):\n${JSON.stringify(submitted, null, 2)}`}
+        </pre>
+      )}
+    </form>
+  );
+};
+
+export const FieldBinding: Story = {
+  render: () => (
+    <div style={{ padding: 24, fontFamily: 'var(--ui-font)' }}>
+      <FieldBindingDemo />
+    </div>
+  ),
+  // Walks the binding flow: touched/blur gating of errorMessage (before any
+  // submit attempt), deep-path writes through the wrappers, submit-attempt
+  // gating for untouched fields, and the narrowed payload reaching onSubmit.
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const body = within(canvasElement.ownerDocument.body);
+
+    // Nothing shown initially: the email error exists in the raw list, but
+    // errorMessage withholds it until the field is touched.
+    await expect(
+      canvas.queryByText("'email' cannot be empty"),
+    ).not.toBeInTheDocument();
+
+    // Blurring the empty email field marks it touched — its error appears
+    // without any submit attempt, and only its own.
+    await userEvent.click(canvas.getByLabelText(/^Email/));
+    await userEvent.tab();
+    await expect(canvas.getByText("'email' cannot be empty")).toBeInTheDocument();
+    await expect(
+      canvas.queryByText("'coverageType' cannot be empty"),
+    ).not.toBeInTheDocument();
+
+    // Deep-path writes flow through the wrapper onChange.
+    await userEvent.type(canvas.getByLabelText(/^City/), 'Lyon');
+    await expect(canvas.getByLabelText(/^City/)).toHaveValue('Lyon');
+
+    // A submit attempt unlocks the untouched coverage field's error too.
+    await userEvent.click(canvas.getByRole('button', { name: 'Get quote' }));
+    await expect(
+      canvas.getByText("'coverageType' cannot be empty"),
+    ).toBeInTheDocument();
+
+    // Fix both fields; committing a select option counts as its touch.
+    await userEvent.type(canvas.getByLabelText(/^Email/), 'will@example.com');
+    await userEvent.click(canvas.getByRole('button', { name: 'Coverage' }));
+    // The option list is portaled — query the document, not the canvas.
+    await userEvent.click(await body.findByRole('option', { name: 'Liability' }));
+    await expect(
+      canvas.queryByText("'coverageType' cannot be empty"),
+    ).not.toBeInTheDocument();
+
+    // Valid submit delivers the narrowed payload.
+    await userEvent.click(canvas.getByRole('button', { name: 'Get quote' }));
+    await expect(canvas.getByText(/onSubmit received/)).toBeInTheDocument();
+  },
+};
+
 type DebuggerDemoValues = {
   email: string | undefined;
   nickname: string | undefined;

package/src/forms/{useFormState → state/useFormState}/useFormState.test-d.ts

@@ -2,9 +2,11 @@ import { describe, it, expectTypeOf } from 'vitest';
 import { useFormState } from './useFormState';
 import { errorAt } from './errorAt';
 import { allOf, matches, min, minLength, notEmpty } from '../validators/validators';
-import type { FormErrors } from './types';
+import type { FormErrors, FormFieldProps } from './types';
 import type { Refine, Validations } from '../validations/types';
 import type { Path, ValueAt } from '../path/types';
+import type { TextInputForFormProps } from '../bindings/TextInputForForm';
+import type { SingleSelectForFormProps } from '../bindings/SingleSelectForForm';
 
 // These tests exercise the headline feature end-to-end at the hook boundary:
 // the type `onSubmit` receives must be the *refined* form type. The two
@@ -425,6 +427,83 @@ describe('useFormState narrowing at realistic scale', () => {
     errorAt(errors, ['email', 'domain']);
   });
 
+  it('getFormFieldPropsAt infers FormFieldProps<ValueAt> at deep paths, inline at the call site', () => {
+    const form = useFormState({
+      initialValues: {} as InsuranceQuoteForm,
+      constraints: { email: notEmpty('email') },
+    });
+
+    // Flat and deep paths: value/onChange typed by ValueAt<T, P>.
+    expectTypeOf(form.getFormFieldPropsAt(['email'])).toEqualTypeOf<
+      FormFieldProps<string | undefined>
+    >();
+    expectTypeOf(
+      form.getFormFieldPropsAt(['homeAddress', 'city']),
+    ).toEqualTypeOf<FormFieldProps<string | undefined>>();
+    expectTypeOf(
+      form.getFormFieldPropsAt(['drivers', 0, 'incidents', 1, 'claimAmountUsd']),
+    ).toEqualTypeOf<FormFieldProps<number | null>>();
+    expectTypeOf(
+      form.getFormFieldPropsAt(['vehicles', 0, 'garagingAddress', 'postalCode']),
+    ).toEqualTypeOf<FormFieldProps<string | undefined>>();
+
+    // Nullable-object semantics (PR #17) flow through the binding: stepping
+    // through a dead ancestor adds `| undefined`, stopping AT a nullable
+    // field keeps its exact type.
+    expectTypeOf(
+      form.getFormFieldPropsAt(['coApplicant', 'sharesResidence']),
+    ).toEqualTypeOf<FormFieldProps<boolean | undefined>>();
+    expectTypeOf(
+      form.getFormFieldPropsAt(['pastPolicies', 0, 'activeUntil']),
+    ).toEqualTypeOf<FormFieldProps<string | null | undefined>>();
+    expectTypeOf(form.getFormFieldPropsAt(['employer'])).toEqualTypeOf<
+      FormFieldProps<string | null>
+    >();
+
+    // Only Path<T> is admitted.
+    // @ts-expect-error 'emial' is not a field of the form
+    form.getFormFieldPropsAt(['emial']);
+    // @ts-expect-error no paths exist below a scalar leaf
+    form.getFormFieldPropsAt(['email', 'domain']);
+  });
+
+  it('element wrappers accept only shape-compatible bindings', () => {
+    const form = useFormState({ initialValues: {} as InsuranceQuoteForm });
+
+    type TextBinding = TextInputForFormProps['formFieldProps'];
+
+    // Text-shaped fields bind: V must sit between the wrapper's emit type
+    // (string) and display type (string | null | undefined).
+    expectTypeOf(
+      form.getFormFieldPropsAt(['homeAddress', 'city']),
+    ).toMatchTypeOf<TextBinding>();
+    expectTypeOf(form.getFormFieldPropsAt(['employer'])).toMatchTypeOf<TextBinding>();
+    expectTypeOf(
+      form.getFormFieldPropsAt(['pastPolicies', 0, 'activeUntil']),
+    ).toMatchTypeOf<TextBinding>();
+
+    // Wrong-shaped bindings fail at the formFieldProps prop.
+    // @ts-expect-error a number-typed path cannot bind to a text element
+    const numberIntoText: TextBinding = form.getFormFieldPropsAt(['deductibleUsd']);
+    // @ts-expect-error a boolean-typed path cannot bind to a text element
+    const booleanIntoText: TextBinding = form.getFormFieldPropsAt(['agreedToTerms']);
+
+    // The select wrapper lines its options' literal union up with the field:
+    // emitting a wider type than the field holds is rejected.
+    type CoverageBinding = SingleSelectForFormProps<
+      'liability' | 'comprehensive'
+    >['formFieldProps'];
+    expectTypeOf<
+      FormFieldProps<'liability' | 'comprehensive' | undefined>
+    >().toMatchTypeOf<CoverageBinding>();
+    // @ts-expect-error a plain-string field would accept values outside the options
+    const stringIntoSelect: CoverageBinding = form.getFormFieldPropsAt(['coverageType']);
+
+    void numberIntoText;
+    void booleanIntoText;
+    void stringIntoSelect;
+  });
+
   it('paths through optional sections and nullable lists resolve, at scale', () => {
     // The latent hole this pins: Path admitted these paths all along, but
     // ValueAt resolved them to `never` because `keyof (Obj | undefined)` is

package/src/forms/{useFormState → state/useFormState}/useFormState.ts

@@ -5,6 +5,7 @@ import type {
   FormValuesObject,
   UnionPolicyCheck,
 } from './types';
+import { useFieldBinding } from './useFieldBinding';
 import { useFormDebugger } from './useFormDebugger';
 import { useFormSubmit } from './useFormSubmit';
 import type { Refine, Validations } from '../validations/types';
@@ -30,8 +31,8 @@ type Args<T extends FormValuesObject, V extends Validations<T>> = {
 // Plumbing only: each slice of form state lives in its own pure function or
 // focused hook, and this hook just links them up and recomposes their
 // outputs into the `FormHelpers<T>` surface. Values state is the one slice
-// kept inline — today it is a bare `useState`, and the granular setters that
-// would earn it a module of its own arrive with the path-based grammar.
+// kept inline — a bare `useState`; the granular path writes layer on top of
+// its setter (`useFieldBinding` funnels `write()` results through it).
 export const useFormState = <
   T extends FormValuesObject,
   const V extends Validations<T> = Validations<T>,
@@ -53,8 +54,15 @@ export const useFormState = <
     onSubmit,
   });
 
+  const { touched, getFormFieldPropsAt } = useFieldBinding({
+    values,
+    onValueChanges,
+    errors,
+    submitAttempted,
+  });
+
   const Debugger = useFormDebugger({
-    snapshot: { values, errors, isValid, submitAttempted },
+    snapshot: { values, errors, isValid, submitAttempted, touched },
   });
 
   return {
@@ -64,6 +72,7 @@ export const useFormState = <
     isValid,
     submitAttempted,
     submit,
+    getFormFieldPropsAt,
     Debugger,
   };
 };

package/src/index.ts

@@ -3,26 +3,26 @@ export { Heading, type HeadingProps } from './components/Content/Heading';
 export { Link, type LinkProps } from './components/Content/Link';
 export { Stack, type StackProps } from './components/Layout/Stack';
 export { Grid, type GridProps } from './components/Layout/Grid';
-export { Button, type ButtonProps } from './components/Forms/Button';
+export { Button, type ButtonProps } from './forms/elements/Button';
 export {
   IconButton,
   type IconButtonProps,
   type IconButtonVariant,
   type IconButtonSize,
-} from './components/Forms/IconButton';
+} from './forms/elements/IconButton';
 export {
   Tooltip,
   type TooltipProps,
   type TooltipPlacement,
 } from './components/Overlays/Tooltip';
-export { Input, type InputProps } from './components/Forms/Input';
-export { SearchInput, type SearchInputProps } from './components/Forms/SearchInput';
-export { ColorInput, type ColorInputProps } from './components/Forms/ColorInput';
-export { Textarea, type TextareaProps } from './components/Forms/Textarea';
-export { SingleSelect, type SingleSelectProps } from './components/Forms/Select';
-export { MultiSelect, type MultiSelectProps } from './components/Forms/Select';
-export type { SelectOption, SelectSize } from './components/Forms/Select';
-export { Field, type FieldProps } from './components/Forms/Field';
+export { Input, type InputProps } from './forms/elements/Input';
+export { SearchInput, type SearchInputProps } from './forms/elements/SearchInput';
+export { ColorInput, type ColorInputProps } from './forms/elements/ColorInput';
+export { Textarea, type TextareaProps } from './forms/elements/Textarea';
+export { SingleSelect, type SingleSelectProps } from './forms/elements/Select';
+export { MultiSelect, type MultiSelectProps } from './forms/elements/Select';
+export type { SelectOption, SelectSize } from './forms/elements/Select';
+export { Field, type FieldProps } from './forms/elements/Field';
 export { MediumModal, LargeModal, ConfirmModal } from './components/Modals';
 export type { MediumModalProps, LargeModalProps, ConfirmModalProps } from './components/Modals';
 export { Divider } from './components/Layout/Divider';

package/src/storybook/Composition.stories.tsx

@@ -1,12 +1,12 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
 import { useRef, useState } from 'react';
-import { Button } from '../components/Forms/Button';
-import { Field } from '../components/Forms/Field';
-import { Input } from '../components/Forms/Input';
+import { Button } from '../forms/elements/Button';
+import { Field } from '../forms/elements/Field';
+import { Input } from '../forms/elements/Input';
 import { MediumModal } from '../components/Modals/MediumModal';
 import { Menu } from '../components/Content/Menu';
 import { Popover } from '../components/Overlays/Popover';
-import { SingleSelect } from '../components/Forms/Select/SingleSelect';
+import { SingleSelect } from '../forms/elements/Select/SingleSelect';
 import { Stack } from '../components/Layout/Stack';
 import { Text } from '../components/Content/Text';
 import { Tooltip } from '../components/Overlays/Tooltip';

package/src/storybook/_StoryUtils.stories.tsx

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
 import { Lorem, Placeholder, Toggle, Repeat } from './index';
-import { Button } from '../components/Forms/Button';
+import { Button } from '../forms/elements/Button';
 import { Stack } from '../components/Layout/Stack';
 import { Text } from '../components/Content/Text';
 import { MediumModal } from '../components/Modals';