@commercetools/nimbus-mcp 0.1.0 → 2.10.0

package/data/docs/routes/patterns-fields-money-input-field.json

@@ -0,0 +1,415 @@
+{
+  "meta": {
+    "id": "Patterns-MoneyInputField",
+    "title": "Money input field",
+    "exportName": "MoneyInputField",
+    "description": "This pattern component integrates the MoneyInput within a FormField using a simple, consistent, and opinionated API.",
+    "order": 999,
+    "repoPath": "packages/nimbus/src/patterns/fields/money-input-field/money-input-field.mdx",
+    "menu": [
+      "Patterns",
+      "Fields",
+      "Money input field"
+    ],
+    "route": "patterns/fields/money-input-field",
+    "tags": [
+      "component",
+      "pattern",
+      "field",
+      "MoneyInput",
+      "MoneyInputField"
+    ],
+    "toc": [
+      {
+        "value": "Overview",
+        "href": "#overview",
+        "depth": 2,
+        "numbering": [
+          1,
+          1
+        ],
+        "parent": "root"
+      },
+      {
+        "value": "Resources",
+        "href": "#resources",
+        "depth": 3,
+        "numbering": [
+          1,
+          1,
+          1
+        ],
+        "parent": "root"
+      }
+    ],
+    "layout": "app-frame",
+    "tabs": [
+      {
+        "key": "overview",
+        "title": "Overview",
+        "order": 0
+      },
+      {
+        "key": "dev",
+        "title": "Implementation",
+        "order": 3
+      }
+    ]
+  },
+  "mdx": "\n## Overview\n\nMoneyInputField is a pattern component that combines the FormField wrapper with the MoneyInput component. This integration provides a complete form field experience including accessible labels, helper text descriptions, info popovers for supplementary information, and comprehensive validation and error handling, all through a simplified, opinionated API.\n\nThe component contains two focusable inputs: a currency selector and an amount input field, providing an intuitive interface for monetary value entry with automatic formatting based on the selected currency.\n\n### Resources\n\nFor detailed guidance on the individual components that make up this pattern, consult the component guidelines:\n\n- [MoneyInput Guidelines](/components/inputs/moneyinput) - Monetary input patterns, currency handling, and interaction guidelines\n- [FormField Guidelines](/components/inputs/formfield) - Label options, helper text, validation patterns, and form field accessibility\n- [Storybook](https://nimbus-storybook.vercel.app/?path=/docs/patterns-fields-moneyinputfield--docs)\n",
+  "views": {
+    "overview": {
+      "mdx": "\n## Overview\n\nMoneyInputField is a pattern component that combines the FormField wrapper with the MoneyInput component. This integration provides a complete form field experience including accessible labels, helper text descriptions, info popovers for supplementary information, and comprehensive validation and error handling, all through a simplified, opinionated API.\n\nThe component contains two focusable inputs: a currency selector and an amount input field, providing an intuitive interface for monetary value entry with automatic formatting based on the selected currency.\n\n### Resources\n\nFor detailed guidance on the individual components that make up this pattern, consult the component guidelines:\n\n- [MoneyInput Guidelines](/components/inputs/moneyinput) - Monetary input patterns, currency handling, and interaction guidelines\n- [FormField Guidelines](/components/inputs/formfield) - Label options, helper text, validation patterns, and form field accessibility\n- [Storybook](https://nimbus-storybook.vercel.app/?path=/docs/patterns-fields-moneyinputfield--docs)\n",
+      "toc": [
+        {
+          "value": "Overview",
+          "href": "#overview",
+          "depth": 2,
+          "numbering": [
+            1,
+            1
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Resources",
+          "href": "#resources",
+          "depth": 3,
+          "numbering": [
+            1,
+            1,
+            1
+          ],
+          "parent": "root"
+        }
+      ]
+    },
+    "dev": {
+      "mdx": "\n## Comparison: field pattern vs manual composition\n\n**With MoneyInputField:**\n```tsx\n<MoneyInputField\n  label=\"Product Price\"\n  description=\"Enter price with currency\"\n  currencies={[\"USD\", \"EUR\", \"GBP\"]}\n  value={{ amount: \"99.99\", currencyCode: \"USD\" }}\n  onValueChange={setValue}\n  errors={errors}\n  touched={touched}\n  isRequired\n/>\n```\n\n**Manual composition:**\n```tsx\n<FormField.Root isInvalid={!!(errors && touched)} isRequired>\n  <FormField.Label>Product Price</FormField.Label>\n  <FormField.Input>\n    <MoneyInput\n      currencies={[\"USD\", \"EUR\", \"GBP\"]}\n      value={{ amount: \"99.99\", currencyCode: \"USD\" }}\n      onValueChange={setValue}\n    />\n  </FormField.Input>\n  <FormField.Description>\n    Enter price with currency\n  </FormField.Description>\n  {touched && errors && (\n    <FormField.Error>\n      <FieldErrors errors={errors} />\n    </FormField.Error>\n  )}\n</FormField.Root>\n```\n\n### When to use which\n\n**Use MoneyInputField when:**\n- Building standard forms with typical field layouts\n- You want consistent field patterns across your app\n- You need built-in error handling with FieldErrors\n- You want to minimize boilerplate code\n\n**Use MoneyInput with manual FormField composition when:**\n- You need custom field layouts\n- You're building complex, non-standard forms\n- You need granular control over FormField sub-components\n- You require a different error handling implementation\n\n## Getting started\n\n### Import\n\n```tsx\nimport { MoneyInputField, type MoneyInputFieldProps, type MoneyInputValue } from '@commercetools/nimbus';\n```\n\n### Basic usage\n\nThe simplest implementation with a label and controlled state:\n\n```jsx live-dev\nconst App = () => {\n  const [value, setValue] = useState<MoneyInputValue>({\n    amount: \"\",\n    currencyCode: \"USD\"\n  });\n\n  return (\n    <MoneyInputField\n      label=\"Product Price\"\n      currencies={[\"USD\", \"EUR\", \"GBP\"]}\n      value={value}\n      onValueChange={setValue}\n    />\n  );\n}\n```\n\n## Usage examples\n\n### Size options\n\nThe `sm` and `md` size variants are available to match your interface density:\n\n```jsx live-dev\nconst App = () => {\n  const [valueSmall, setValueSmall] = useState<MoneyInputValue>({\n    amount: \"\",\n    currencyCode: \"USD\"\n  });\n  const [valueMedium, setValueMedium] = useState<MoneyInputValue>({\n    amount: \"\",\n    currencyCode: \"USD\"\n  });\n\n  return (\n    <Stack direction=\"column\" gap=\"400\">\n      <MoneyInputField\n        size=\"sm\"\n        label=\"Small input\"\n        currencies={[\"USD\", \"EUR\", \"GBP\"]}\n        value={valueSmall}\n        onValueChange={setValueSmall}\n        placeholder=\"0.00\"\n      />\n      <MoneyInputField\n        size=\"md\"\n        label=\"Medium input (default)\"\n        currencies={[\"USD\", \"EUR\", \"GBP\"]}\n        value={valueMedium}\n        onValueChange={setValueMedium}\n        placeholder=\"0.00\"\n      />\n    </Stack>\n  );\n}\n```\n\n### With description\n\nAdd helper text below the input to provide context:\n\n```jsx live-dev\nconst App = () => {\n  const [value, setValue] = useState<MoneyInputValue>({\n    amount: \"\",\n    currencyCode: \"USD\"\n  });\n\n  return (\n    <MoneyInputField\n      label=\"Product Price\"\n      description=\"Enter the price including the appropriate currency\"\n      currencies={[\"USD\", \"EUR\", \"GBP\", \"JPY\"]}\n      value={value}\n      onValueChange={setValue}\n      placeholder=\"0.00\"\n    />\n  );\n}\n```\n\n### With validation errors\n\nShow error messages when the field is touched and has validation errors:\n\n```jsx live-dev\nconst App = () => {\n  const [value, setValue] = useState<MoneyInputValue>({\n    amount: \"\",\n    currencyCode: \"USD\"\n  });\n  const [touched, setTouched] = useState<boolean>(false);\n\n  // Simulate validation: require amount\n  const errors = touched && !value.amount ? { missing: true } : undefined;\n\n  return (\n    <MoneyInputField\n      label=\"Product Price\"\n      description=\"Enter a valid price\"\n      currencies={[\"USD\", \"EUR\", \"GBP\"]}\n      value={value}\n      onValueChange={setValue}\n      onBlur={() => setTouched(true)}\n      errors={errors}\n      touched={touched}\n      isRequired\n      placeholder=\"0.00\"\n    />\n  );\n}\n```\n\n**Note**: Errors only display when both `touched={true}` and `errors` exist. This prevents showing errors before the user interacts with the field.\n\n### With info popover\n\nProvide additional context through an info button and popover:\n\n```jsx live-dev\nconst App = () => {\n  const [value, setValue] = useState<MoneyInputValue>({\n    amount: \"\",\n    currencyCode: \"USD\"\n  });\n\n  return (\n    <MoneyInputField\n      label=\"Product Price\"\n      description=\"Enter the retail price\"\n      info=\"Prices should be competitive and reflect current market rates. Consider including any applicable taxes.\"\n      currencies={[\"USD\", \"EUR\", \"GBP\"]}\n      value={value}\n      onValueChange={setValue}\n      placeholder=\"0.00\"\n    />\n  );\n}\n```\n\n### Required field\n\nMark fields as required with the `isRequired` prop:\n\n```jsx live-dev\nconst App = () => {\n  const [value, setValue] = useState<MoneyInputValue>({\n    amount: \"\",\n    currencyCode: \"USD\"\n  });\n\n  return (\n    <MoneyInputField\n      label=\"Product Price\"\n      description=\"This field is required\"\n      currencies={[\"USD\", \"EUR\", \"GBP\"]}\n      value={value}\n      onValueChange={setValue}\n      isRequired\n      placeholder=\"0.00\"\n    />\n  );\n}\n```\n\n### Disabled state\n\nPrevent user interaction with the `isDisabled` prop:\n\n```jsx live-dev\nconst App = () => {\n  const [value, setValue] = useState<MoneyInputValue>({\n    amount: \"99.99\",\n    currencyCode: \"USD\"\n  });\n\n  return (\n    <MoneyInputField\n      label=\"Default Price\"\n      description=\"This field cannot be modified\"\n      currencies={[\"USD\", \"EUR\", \"GBP\"]}\n      value={value}\n      onValueChange={setValue}\n      isDisabled\n    />\n  );\n}\n```\n\n### Read-only state\n\nDisplay a non-editable value with the `isReadOnly` prop:\n\n```jsx live-dev\nconst App = () => {\n  const [value, setValue] = useState<MoneyInputValue>({\n    amount: \"199.99\",\n    currencyCode: \"EUR\"\n  });\n\n  return (\n    <MoneyInputField\n      label=\"System Price\"\n      description=\"This value is automatically calculated\"\n      currencies={[\"USD\", \"EUR\", \"GBP\"]}\n      value={value}\n      onValueChange={setValue}\n      isReadOnly\n    />\n  );\n}\n```\n\n### With high precision amounts\n\nMoneyInput automatically detects when an amount has more decimal places than the currency standard and displays a badge. The badge is shown by default but can be disabled:\n\n```jsx live-dev\nconst App = () => {\n  const [value, setValue] = useState<MoneyInputValue>({\n    amount: \"99.99999\",\n    currencyCode: \"USD\"\n  });\n\n  return (\n    <MoneyInputField\n      label=\"Wholesale Price\"\n      description=\"High precision price with 5 decimal places\"\n      currencies={[\"USD\", \"EUR\", \"GBP\"]}\n      value={value}\n      onValueChange={setValue}\n    />\n  );\n}\n```\n\nThe high precision badge appears automatically when the amount has more decimal places than the currency standard (e.g., USD typically uses 2 decimals, so \"99.999\" triggers the badge). Use `hasHighPrecisionBadge={false}` to disable the badge if needed.\n\n### With currency selector disabled\n\nKeep the currency fixed while allowing amount changes:\n\n```jsx live-dev\nconst App = () => {\n  const [value, setValue] = useState<MoneyInputValue>({\n    amount: \"\",\n    currencyCode: \"USD\"\n  });\n\n  return (\n    <MoneyInputField\n      label=\"Price (USD only)\"\n      description=\"Currency is fixed to USD\"\n      currencies={[\"USD\", \"EUR\", \"GBP\"]}\n      value={value}\n      onValueChange={setValue}\n      isCurrencyInputDisabled\n      placeholder=\"0.00\"\n    />\n  );\n}\n```\n\n### Different currency standards\n\nMoneyInput automatically formats amounts based on the selected currency:\n\n```jsx live-dev\nconst App = () => {\n  const [usd, setUsd] = useState<MoneyInputValue>({\n    amount: \"99.99\",\n    currencyCode: \"USD\"\n  });\n  const [jpy, setJpy] = useState<MoneyInputValue>({\n    amount: \"9999\",\n    currencyCode: \"JPY\"\n  });\n  const [kwd, setKwd] = useState<MoneyInputValue>({\n    amount: \"99.999\",\n    currencyCode: \"KWD\"\n  });\n\n  return (\n    <Stack direction=\"column\" gap=\"400\">\n      <MoneyInputField\n        label=\"US Dollars (2 decimals)\"\n        description=\"Standard 2 decimal places\"\n        currencies={[\"USD\"]}\n        value={usd}\n        onValueChange={setUsd}\n      />\n      <MoneyInputField\n        label=\"Japanese Yen (0 decimals)\"\n        description=\"Whole numbers only\"\n        currencies={[\"JPY\"]}\n        value={jpy}\n        onValueChange={setJpy}\n      />\n      <MoneyInputField\n        label=\"Kuwaiti Dinar (3 decimals)\"\n        description=\"High precision with 3 decimal places\"\n        currencies={[\"KWD\"]}\n        value={kwd}\n        onValueChange={setKwd}\n      />\n    </Stack>\n  );\n}\n```\n\n## Component requirements\n\n### Value type\n\nMoneyInputField uses the `MoneyInputValue` type:\n\n```tsx\ntype MoneyInputValue = {\n  amount: string;           // String representation with decimal (e.g., \"123.45\")\n  currencyCode: CurrencyCode | \"\";  // ISO currency code or empty string\n}\n\n// CurrencyCode supports 221 ISO 4217 currency codes including:\n// \"USD\", \"EUR\", \"GBP\", \"JPY\", \"CNY\", \"INR\", \"AUD\", \"CAD\", \"CHF\", \"KWD\", etc.\ntype CurrencyCode = keyof typeof currencies;\n```\n\n**Important**:\n- The `amount` is always a string, not a number\n- Use a dot (`.`) as the decimal separator\n- Empty amount should be `\"\"` (empty string)\n- The component handles currency-specific formatting automatically\n- Supported currencies are defined in `@commercetools/nimbus/src/components/money-input/utils/currencies.ts`\n\n### Dual input nature\n\nMoneyInputField contains **two focusable inputs**:\n1. **Currency selector** (combobox) - For choosing the currency\n2. **Amount input** (spinbutton) - For entering the monetary value\n\nBoth inputs receive separate IDs based on the field's `id` or `name` prop:\n- Amount: `${id}.amount` or `${name}.amount`\n- Currency: `${id}.currencyCode` or `${name}.currencyCode`\n\n### Error handling\n\nMoneyInputField uses the `FieldErrors` component to display validation errors with built-in localized messages. For custom error messages, use the `renderError` prop (see [Custom error rendering](#custom-error-rendering) below).\n\n**Error object format** (`FieldErrorsData`):\n```tsx\ntype FieldErrorsData = {\n  [key: string]: boolean | string | ReactNode;\n};\n\n// Examples:\nconst errors = {\n  missing: true,              // Built-in message: \"This field is required\"\n  invalidFormat: true,        // Built-in message: \"Please enter a valid format\"\n  custom: \"Custom error text\" // Custom message\n};\n```\n\n## Accessibility\n\nMoneyInputField provides comprehensive accessibility through [FormField](components/inputs/formfield):\n\n**Automatic ARIA relationships:**\n- Labels connected via `aria-labelledby`\n- Descriptions connected via `aria-describedby`\n- Error messages connected via `aria-describedby`\n- Required fields indicated with `aria-required`\n- Invalid state indicated with `aria-invalid`\n\nIf your use case requires tracking and analytics for this component, add a **persistent**, **unique** id:\n\n```tsx\nconst PERSISTENT_ID = \"product-price-input\";\n\nexport const Example = () => (\n  <MoneyInputField\n    id={PERSISTENT_ID}\n    label=\"Product Price\"\n    currencies={[\"USD\", \"EUR\", \"GBP\"]}\n    value={value}\n    onValueChange={setValue}\n  />\n);\n```\n\n#### Keyboard navigation\n\nThe component supports keyboard interaction for both inputs:\n- `Tab` / `Shift+Tab`: Move focus between currency selector and amount input\n- **Currency selector**: Arrow keys navigate options, Enter/Space to select\n- **Amount input**: Arrow up/down to increment/decrement, number keys to type\n- `Home` / `End`: Move to start/end of amount\n- `Escape`: Close currency dropdown\n\n## Form integration\n\nMoneyInputField integrates seamlessly with Formik:\n\n```tsx\nimport { useFormik } from 'formik';\nimport { MoneyInputField, Button, Stack } from '@commercetools/nimbus';\nimport type { MoneyInputValue } from '@commercetools/nimbus';\n\nconst MyForm = () => {\n  const formik = useFormik({\n    initialValues: {\n      price: { amount: \"\", currencyCode: \"USD\" } as MoneyInputValue,\n    },\n    validate: (values) => {\n      const errors: Record<string, any> = {};\n\n      if (!values.price.amount) {\n        errors.price = { missing: true };\n      } else {\n        const amount = parseFloat(values.price.amount);\n        if (isNaN(amount) || amount <= 0) {\n          errors.price = { invalidAmount: true };\n        }\n      }\n\n      return errors;\n    },\n    onSubmit: (values) => {\n      console.log('Submitted:', values);\n    },\n  });\n\n  return (\n    <form onSubmit={formik.handleSubmit}>\n      <Stack direction=\"column\" gap=\"400\">\n        <MoneyInputField\n          name=\"price\"\n          label=\"Product Price\"\n          description=\"Enter the product price with currency\"\n          currencies={[\"USD\", \"EUR\", \"GBP\", \"JPY\"]}\n          value={formik.values.price}\n          onValueChange={(value) => formik.setFieldValue('price', value)}\n          onBlur={() => formik.setFieldTouched('price', true)}\n          errors={formik.errors.price}\n          touched={formik.touched.price}\n          isRequired\n          placeholder=\"0.00\"\n        />\n        <Button type=\"submit\">Submit</Button>\n      </Stack>\n    </form>\n  );\n};\n```\n\n**Key integration points:**\n- **Value/OnChange**: Connect Formik values with `value` and `setFieldValue`\n- **OnBlur**: Mark field as touched on blur\n- **Errors**: Pass `errors.fieldName` (supports `FieldErrorsData` format or strings)\n- **Touched**: Pass `touched.fieldName` to control error visibility\n\n## API reference\n\n<PropsTable id=\"MoneyInputField\" />\n\n### Custom error rendering\n\nUse the `renderError` prop to customize how specific error keys are displayed:\n\n```tsx\n<MoneyInputField\n  label=\"Product Price\"\n  currencies={[\"USD\", \"EUR\", \"GBP\"]}\n  value={value}\n  onValueChange={setValue}\n  errors={{ tooLow: true, invalidAmount: true }}\n  touched={true}\n  renderError={(key) => {\n    switch (key) {\n      case 'tooLow':\n        return 'Price must be at least $10.00';\n      case 'invalidAmount':\n        return 'Please enter a valid monetary amount';\n      default:\n        return null; // Fall back to FieldErrors built-in messages\n    }\n  }}\n/>\n```\n\n## Testing your implementation\n\nThese examples demonstrate how to test your implementation when using MoneyInputField within your application. As the component's internal functionality is already tested by Nimbus, these patterns help you verify your integration and application-specific logic.\n\n### Basic rendering tests\n\nVerify the component renders with expected elements:\n\n```tsx\nimport { render, screen } from '@testing-library/react';\nimport { MoneyInputField } from '@commercetools/nimbus';\n\ndescribe('MoneyInputField', () => {\n  it('renders label and both inputs', () => {\n    render(\n      <MoneyInputField\n        label=\"Product Price\"\n        currencies={[\"USD\", \"EUR\", \"GBP\"]}\n        value={{ amount: \"\", currencyCode: \"USD\" }}\n        onValueChange={() => {}}\n      />\n    );\n\n    // Verify label is rendered\n    expect(screen.getByText('Product Price')).toBeInTheDocument();\n\n    // Verify currency selector is rendered\n    expect(screen.getByRole('combobox')).toBeInTheDocument();\n\n    // Verify amount input is rendered\n    expect(screen.getByRole('spinbutton')).toBeInTheDocument();\n  });\n\n  it('renders description text', () => {\n    render(\n      <MoneyInputField\n        label=\"Price\"\n        description=\"Enter product price\"\n        currencies={[\"USD\"]}\n        value={{ amount: \"\", currencyCode: \"USD\" }}\n        onValueChange={() => {}}\n      />\n    );\n\n    expect(screen.getByText('Enter product price')).toBeInTheDocument();\n  });\n\n  it('shows required indicator', () => {\n    render(\n      <MoneyInputField\n        label=\"Required price\"\n        currencies={[\"USD\"]}\n        value={{ amount: \"\", currencyCode: \"USD\" }}\n        onValueChange={() => {}}\n        isRequired\n      />\n    );\n\n    const amountInput = screen.getByRole('spinbutton');\n    expect(amountInput).toHaveAttribute('aria-required', 'true');\n  });\n});\n```\n\n### Interaction tests\n\nTest user interactions with both inputs:\n\n```tsx\nimport { render, screen, waitFor } from '@testing-library/react';\nimport userEvent from '@testing-library/user-event';\nimport { MoneyInputField } from '@commercetools/nimbus';\n\ndescribe('MoneyInputField interactions', () => {\n  it('calls onValueChange when user types amount', async () => {\n    const user = userEvent.setup();\n    const handleChange = jest.fn();\n\n    render(\n      <MoneyInputField\n        label=\"Price\"\n        currencies={[\"USD\", \"EUR\"]}\n        value={{ amount: \"\", currencyCode: \"USD\" }}\n        onValueChange={handleChange}\n      />\n    );\n\n    const amountInput = screen.getByRole('spinbutton');\n    await user.type(amountInput, '99.99');\n\n    expect(handleChange).toHaveBeenCalled();\n    expect(handleChange).toHaveBeenLastCalledWith(\n      expect.objectContaining({ amount: expect.stringContaining('99.99') })\n    );\n  });\n\n  it('calls onValueChange when user changes currency', async () => {\n    const user = userEvent.setup();\n    const handleChange = jest.fn();\n\n    render(\n      <MoneyInputField\n        label=\"Price\"\n        currencies={[\"USD\", \"EUR\", \"GBP\"]}\n        value={{ amount: \"99.99\", currencyCode: \"USD\" }}\n        onValueChange={handleChange}\n      />\n    );\n\n    const currencySelect = screen.getByRole('combobox');\n    await user.click(currencySelect);\n\n    // Wait for listbox and select EUR\n    await waitFor(() => {\n      expect(screen.getByRole('listbox')).toBeInTheDocument();\n    });\n\n    const eurOption = screen.getByRole('option', { name: /EUR/ });\n    await user.click(eurOption);\n\n    expect(handleChange).toHaveBeenCalledWith(\n      expect.objectContaining({ currencyCode: 'EUR' })\n    );\n  });\n\n  it('does not call onValueChange when disabled', async () => {\n    const user = userEvent.setup();\n    const handleChange = jest.fn();\n\n    render(\n      <MoneyInputField\n        label=\"Price\"\n        currencies={[\"USD\"]}\n        value={{ amount: \"\", currencyCode: \"USD\" }}\n        onValueChange={handleChange}\n        isDisabled\n      />\n    );\n\n    const amountInput = screen.getByRole('spinbutton');\n    expect(amountInput).toBeDisabled();\n\n    await user.type(amountInput, '99.99');\n    expect(handleChange).not.toHaveBeenCalled();\n  });\n});\n```\n\n### Testing validation and errors\n\nTest error handling and validation behavior:\n\n```tsx\nimport { render, screen } from '@testing-library/react';\nimport { MoneyInputField } from '@commercetools/nimbus';\n\ndescribe('MoneyInputField validation', () => {\n  it('does not show errors when untouched', () => {\n    render(\n      <MoneyInputField\n        label=\"Price\"\n        currencies={[\"USD\"]}\n        value={{ amount: \"\", currencyCode: \"USD\" }}\n        onValueChange={() => {}}\n        errors={{ missing: true }}\n        touched={false}\n      />\n    );\n\n    expect(screen.queryByText(/required/i)).not.toBeInTheDocument();\n  });\n\n  it('shows errors when touched', () => {\n    render(\n      <MoneyInputField\n        label=\"Price\"\n        currencies={[\"USD\"]}\n        value={{ amount: \"\", currencyCode: \"USD\" }}\n        onValueChange={() => {}}\n        errors={{ missing: true }}\n        touched={true}\n      />\n    );\n\n    expect(screen.getByText(/required/i)).toBeInTheDocument();\n  });\n\n  it('applies invalid styling when isInvalid is true', () => {\n    render(\n      <MoneyInputField\n        label=\"Price\"\n        currencies={[\"USD\"]}\n        value={{ amount: \"\", currencyCode: \"USD\" }}\n        onValueChange={() => {}}\n        isInvalid\n      />\n    );\n\n    const amountInput = screen.getByRole('spinbutton');\n    expect(amountInput).toHaveAttribute('data-invalid', 'true');\n  });\n});\n```\n\n## Resources\n\n- [Storybook](https://nimbus-storybook.vercel.app/?path=/docs/patterns-fields-moneyinputfield--docs)\n- [MoneyInput Component](/components/inputs/moneyinput)\n- [FormField Component](/components/inputs/formfield)\n- [FieldErrors Component](/components/forms/fielderrors)\n- [React Aria NumberField](https://react-spectrum.adobe.com/react-aria/NumberField.html)\n",
+      "toc": [
+        {
+          "value": "Comparison: field pattern vs manual composition",
+          "href": "#comparison-field-pattern-vs-manual-composition",
+          "depth": 2,
+          "numbering": [
+            1,
+            1
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "When to use which",
+          "href": "#when-to-use-which",
+          "depth": 3,
+          "numbering": [
+            1,
+            1,
+            1
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Getting started",
+          "href": "#getting-started",
+          "depth": 2,
+          "numbering": [
+            1,
+            2
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Import",
+          "href": "#import",
+          "depth": 3,
+          "numbering": [
+            1,
+            2,
+            1
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Basic usage",
+          "href": "#basic-usage",
+          "depth": 3,
+          "numbering": [
+            1,
+            2,
+            2
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Usage examples",
+          "href": "#usage-examples",
+          "depth": 2,
+          "numbering": [
+            1,
+            3
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Size options",
+          "href": "#size-options",
+          "depth": 3,
+          "numbering": [
+            1,
+            3,
+            1
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "With description",
+          "href": "#with-description",
+          "depth": 3,
+          "numbering": [
+            1,
+            3,
+            2
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "With validation errors",
+          "href": "#with-validation-errors",
+          "depth": 3,
+          "numbering": [
+            1,
+            3,
+            3
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "With info popover",
+          "href": "#with-info-popover",
+          "depth": 3,
+          "numbering": [
+            1,
+            3,
+            4
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Required field",
+          "href": "#required-field",
+          "depth": 3,
+          "numbering": [
+            1,
+            3,
+            5
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Disabled state",
+          "href": "#disabled-state",
+          "depth": 3,
+          "numbering": [
+            1,
+            3,
+            6
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Read-only state",
+          "href": "#read-only-state",
+          "depth": 3,
+          "numbering": [
+            1,
+            3,
+            7
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "With high precision amounts",
+          "href": "#with-high-precision-amounts",
+          "depth": 3,
+          "numbering": [
+            1,
+            3,
+            8
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "With currency selector disabled",
+          "href": "#with-currency-selector-disabled",
+          "depth": 3,
+          "numbering": [
+            1,
+            3,
+            9
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Different currency standards",
+          "href": "#different-currency-standards",
+          "depth": 3,
+          "numbering": [
+            1,
+            3,
+            10
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Component requirements",
+          "href": "#component-requirements",
+          "depth": 2,
+          "numbering": [
+            1,
+            4
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Value type",
+          "href": "#value-type",
+          "depth": 3,
+          "numbering": [
+            1,
+            4,
+            1
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Dual input nature",
+          "href": "#dual-input-nature",
+          "depth": 3,
+          "numbering": [
+            1,
+            4,
+            2
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Error handling",
+          "href": "#error-handling",
+          "depth": 3,
+          "numbering": [
+            1,
+            4,
+            3
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Accessibility",
+          "href": "#accessibility",
+          "depth": 2,
+          "numbering": [
+            1,
+            5
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Keyboard navigation",
+          "href": "#keyboard-navigation",
+          "depth": 4,
+          "numbering": [
+            1,
+            5,
+            1,
+            1
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Form integration",
+          "href": "#form-integration",
+          "depth": 2,
+          "numbering": [
+            1,
+            6
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "API reference",
+          "href": "#api-reference",
+          "depth": 2,
+          "numbering": [
+            1,
+            7
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Custom error rendering",
+          "href": "#custom-error-rendering",
+          "depth": 3,
+          "numbering": [
+            1,
+            7,
+            1
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Testing your implementation",
+          "href": "#testing-your-implementation",
+          "depth": 2,
+          "numbering": [
+            1,
+            8
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Basic rendering tests",
+          "href": "#basic-rendering-tests",
+          "depth": 3,
+          "numbering": [
+            1,
+            8,
+            1
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Interaction tests",
+          "href": "#interaction-tests",
+          "depth": 3,
+          "numbering": [
+            1,
+            8,
+            2
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Testing validation and errors",
+          "href": "#testing-validation-and-errors",
+          "depth": 3,
+          "numbering": [
+            1,
+            8,
+            3
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Resources",
+          "href": "#resources",
+          "depth": 2,
+          "numbering": [
+            1,
+            9
+          ],
+          "parent": "root"
+        }
+      ]
+    }
+  }
+}