@terreno/mcp 0.21.0 → 0.22.0

package/dist/docs/versioned/0.21.0/reference/components/README.mdx

@@ -0,0 +1,65 @@
+---
+title: UI components
+description: Generated reference pages for @terreno/ui components with live demo embeds.
+slug: /reference/components
+---
+
+# UI components
+
+These pages are generated from `demo/ui-types-documentation.json` and `demo/story-config/*.config.tsx` at site build time. Each page embeds the live component demo.
+
+- [Accordion](./accordion)
+- [AddressField](./addressfield)
+- [AI Suggestion Box](./ai-suggestion-box)
+- [Avatar](./avatar)
+- [Badge](./badge)
+- [Banner](./banner)
+- [Boolean field](./boolean-field)
+- [Box](./box)
+- [Button](./button)
+- [Card](./card)
+- [CheckBox](./checkbox)
+- [ConsentFormScreen](./consentformscreen)
+- [Custom Select Field](./custom-select-field)
+- [DataTable](./datatable)
+- [Date & Time field](./date-time-field)
+- [Email field](./email-field)
+- [Emoji selector](./emoji-selector)
+- [Field](./field)
+- [Height field](./height-field)
+- [Icon](./icon)
+- [IconButton](./iconbutton)
+- [Inner modal content](./inner-modal-content)
+- [Markdown editor field](./markdown-editor-field)
+- [MarkdownView](./markdownview)
+- [Multiselect Field](./multiselect-field)
+- [Number field](./number-field)
+- [Page](./page)
+- [Pagination](./pagination)
+- [Password field](./password-field)
+- [Phone number field](./phone-number-field)
+- [Radio field](./radio-field)
+- [SectionDivider](./sectiondivider)
+- [Segmented control](./segmented-control)
+- [Select field](./select-field)
+- [SelectBadge](./selectbadge)
+- [Side drawer](./side-drawer)
+- [Sidebar navigation (non-expo)](./sidebar-navigation-non-expo)
+- [Signature field](./signature-field)
+- [Slider](./slider)
+- [Spinner](./spinner)
+- [Table](./table)
+- [Table badge](./table-badge)
+- [Table boolean](./table-boolean)
+- [Table date](./table-date)
+- [Table icon button](./table-icon-button)
+- [Table number](./table-number)
+- [Table Text](./table-text)
+- [Table title](./table-title)
+- [Tap to edit](./tap-to-edit)
+- [Text area](./text-area)
+- [Text field](./text-field)
+- [Theme](./theme)
+- [Toast](./toast)
+- [Tooltip](./tooltip)
+- [UserInactivity](./userinactivity)

package/dist/docs/versioned/0.21.0/reference/components/accordion.mdx

@@ -0,0 +1,36 @@
+---
+title: "Accordion"
+description: "Accordion is a container that can be expanded and collapsed to show content about a single subject. Its contents can be visible at all items, or expand and collapse as an individual item or a group of items. Also called “drawer”, “collapsed section”, “expandable section”, or “dropdown section”."
+sidebar_label: "Accordion"
+slug: /reference/components/accordion
+---
+
+import ComponentDemo from '@site/src/components/ComponentDemo';
+
+# Accordion
+
+Accordion is a container that can be expanded and collapsed to show content about a single subject. Its contents can be visible at all items, or expand and collapse as an individual item or a group of items. Also called “drawer”, “collapsed section”, “expandable section”, or “dropdown section”.
+
+**Package:** `@terreno/ui`  
+**Categories:** Component  
+**Props interface:** `AccordionProps`  
+**Story source:** [`demo/stories/Accordion.stories.tsx`](https://github.com/flourishhealth/terreno/blob/master/demo/stories/Accordion.stories.tsx)
+
+## Live demo
+
+<ComponentDemo name="Accordion" />
+
+## Props
+
+| Prop | Type | Required | Description |
+| --- | --- | --- | --- |
+| `children` | `ReactNode` | Yes | The content to be displayed inside the accordion. |
+| `title` | `string` | Yes | The title of the accordion. |
+| `includeInfoModal` | `boolean` |  | If true, an information modal will be included. |
+| `infoModalChildren` | `ReactElement` |  | The content of the information modal. |
+| `infoModalSubtitle` | `string` |  | The subtitle of the information modal. |
+| `infoModalText` | `string` |  | The text content of the information modal. |
+| `infoModalTitle` | `string` |  | The title of the information modal. |
+| `isCollapsed` | `boolean` |  | If true, the accordion will be collapsed. |
+| `onToggle` | `reflection` |  | * Callback fired when the accordion is toggled. |
+| `subtitle` | `string` |  |  |

package/dist/docs/versioned/0.21.0/reference/components/addressfield.mdx

@@ -0,0 +1,26 @@
+---
+title: "AddressField"
+description: "Set/Display a user's address"
+sidebar_label: "AddressField"
+slug: /reference/components/addressfield
+---
+
+import ComponentDemo from '@site/src/components/ComponentDemo';
+
+# AddressField
+
+Set/Display a user's address
+
+**Package:** `@terreno/ui`  
+**Categories:** Pattern  
+**Props interface:** `FieldProps`  
+**Story source:** [`demo/stories/AddressField.stories.tsx`](https://github.com/flourishhealth/terreno/blob/master/demo/stories/AddressField.stories.tsx)
+
+## Live demo
+
+<ComponentDemo name="AddressField" />
+
+## Props
+
+_No documented props were extracted from TypeDoc._
+

package/dist/docs/versioned/0.21.0/reference/components/ai-suggestion-box.mdx

@@ -0,0 +1,26 @@
+---
+title: "AI Suggestion Box"
+description: "An AI suggestion block that renders inside TextField or TextArea. Shows AI-generated content with feedback controls and add-to-note actions. Supports multiple states: not-started, generating, ready, and added."
+sidebar_label: "AI Suggestion Box"
+slug: /reference/components/ai-suggestion-box
+---
+
+import ComponentDemo from '@site/src/components/ComponentDemo';
+
+# AI Suggestion Box
+
+An AI suggestion block that renders inside TextField or TextArea. Shows AI-generated content with feedback controls and add-to-note actions. Supports multiple states: not-started, generating, ready, and added.
+
+**Package:** `@terreno/ui`  
+**Categories:** Component  
+**Props interface:** `AiSuggestionBoxProps`  
+**Story source:** [`demo/stories/AISuggestionBox.stories.tsx`](https://github.com/flourishhealth/terreno/blob/master/demo/stories/AISuggestionBox.stories.tsx)
+
+## Live demo
+
+<ComponentDemo name="AI Suggestion Box" />
+
+## Props
+
+_No documented props were extracted from TypeDoc._
+

package/dist/docs/versioned/0.21.0/reference/components/avatar.mdx

@@ -0,0 +1,35 @@
+---
+title: "Avatar"
+description: "Used to represent a single user."
+sidebar_label: "Avatar"
+slug: /reference/components/avatar
+---
+
+import ComponentDemo from '@site/src/components/ComponentDemo';
+
+# Avatar
+
+Used to represent a single user.
+
+**Package:** `@terreno/ui`  
+**Categories:** Component  
+**Props interface:** `AvatarProps`  
+**Story source:** [`demo/stories/Avatar.stories.tsx`](https://github.com/flourishhealth/terreno/blob/master/demo/stories/Avatar.stories.tsx)
+
+## Live demo
+
+<ComponentDemo name="Avatar" />
+
+## Props
+
+| Prop | Type | Required | Description |
+| --- | --- | --- | --- |
+| `name` | `string` | Yes | The name of the user. This is used for the placeholder treatment if an image is not available. |
+| `accessibilityLabel` | `string` |  | Accessibility label for the avatar image. |
+| `doNotDisturb` | `boolean` |  | If true, the status will have a "Z" to indicate the user has snoozed notifications. |
+| `hasBorder` | `boolean` |  | Adds a white border around Avatar so it's visible when displayed on other images. |
+| `onChange` | `reflection` |  | Function to handle the avatar image edit |
+| `size` | `union` |  | xs: 24px, sm: 32px, md: 48px, lg: 64px, xl: 120px. |
+| `src` | `string` |  | The URL of the user's image. |
+| `status` | `AvatarStatus` |  | The status of the user to display with the avatar. |
+| `testID` | `string` |  | Test ID for unit testing |

package/dist/docs/versioned/0.21.0/reference/components/badge.mdx

@@ -0,0 +1,38 @@
+---
+title: "Badge"
+description: "Badge is a label that indicates status or importance. Badges should provide quick recognition.\\n"
+sidebar_label: "Badge"
+slug: /reference/components/badge
+---
+
+import ComponentDemo from '@site/src/components/ComponentDemo';
+
+# Badge
+
+Badge is a label that indicates status or importance. Badges should provide quick recognition.\n
+
+**Package:** `@terreno/ui`  
+**Categories:** Component  
+**Props interface:** `BadgeProps`  
+**Story source:** [`demo/stories/Badge.stories.tsx`](https://github.com/flourishhealth/terreno/blob/master/demo/stories/Badge.stories.tsx)
+
+## Live demo
+
+<ComponentDemo name="Badge" />
+
+## Props
+
+| Prop | Type | Required | Description |
+| --- | --- | --- | --- |
+| `customBackgroundColor` | `string` |  | When status is "custom", determines the badge's background color. |
+| `customBorderColor` | `string` |  | When status is "custom", determines the badge's border color. |
+| `customIconColor` | `keyof TextTheme` |  | When status is "custom", determines the badge's icon color |
+| `customIconName` | `IconName` |  | When status is "custom", determines the badge's icon |
+| `customTextColor` | `string` |  | When status is "custom", determines the badge's text color. |
+| `iconName` | `IconName` |  | The name of the icon to display in the badge. |
+| `maxValue` | `number` |  | The maximum value to display. Used for "numberOnly" variant to display "$\{maxValue\}+" when value is greater than max. |
+| `secondary` | `boolean` |  | If true, the badge will have a secondary style. |
+| `status` | `union` |  | The status of the badge. Determines its color and appearance. |
+| `testID` | `string` |  | Test ID for unit testing |
+| `value` | `union` |  | The text or number to display inside the badge. |
+| `variant` | `union` |  | The variant of the badge. Determines if it displays an icon or number only. |

package/dist/docs/versioned/0.21.0/reference/components/banner.mdx

@@ -0,0 +1,26 @@
+---
+title: "Banner"
+description: "Banners convey brief information related to a specific section of a page."
+sidebar_label: "Banner"
+slug: /reference/components/banner
+---
+
+import ComponentDemo from '@site/src/components/ComponentDemo';
+
+# Banner
+
+Banners convey brief information related to a specific section of a page. The message can relay success, warning, error, or general information. The color and placement of the banner indicate the urgency of the message.
+
+**Package:** `@terreno/ui`  
+**Categories:** Component  
+**Props interface:** `BannerProps`  
+**Story source:** [`demo/stories/Banner.stories.tsx`](https://github.com/flourishhealth/terreno/blob/master/demo/stories/Banner.stories.tsx)
+
+## Live demo
+
+<ComponentDemo name="Banner" />
+
+## Props
+
+_No documented props were extracted from TypeDoc._
+

package/dist/docs/versioned/0.21.0/reference/components/boolean-field.mdx

@@ -0,0 +1,34 @@
+---
+title: "Boolean field"
+description: "Use the Boolean field for single cell options that can be turned on and off only. Also called 'toggle fields' and 'switch fields'."
+sidebar_label: "Boolean field"
+slug: /reference/components/boolean-field
+---
+
+import ComponentDemo from '@site/src/components/ComponentDemo';
+
+# Boolean field
+
+Use the Boolean field for single cell options that can be turned on and off only. Also called 'toggle fields' and 'switch fields'.
+
+**Package:** `@terreno/ui`  
+**Categories:** Component  
+**Props interface:** `BooleanFieldProps`  
+**Story source:** [`demo/stories/Booleanfield.stories.tsx`](https://github.com/flourishhealth/terreno/blob/master/demo/stories/Booleanfield.stories.tsx)
+
+## Live demo
+
+<ComponentDemo name="Boolean field" />
+
+## Props
+
+| Prop | Type | Required | Description |
+| --- | --- | --- | --- |
+| `onChange` | `reflection` | Yes |  |
+| `value` | `boolean` | Yes |  |
+| `disabled` | `boolean` |  |  |
+| `disabledHelperText` | `string` |  |  |
+| `errorText` | `string` |  |  |
+| `helperText` | `string` |  |  |
+| `title` | `string` |  |  |
+| `variant` | `union` |  |  |

package/dist/docs/versioned/0.21.0/reference/components/box.mdx

@@ -0,0 +1,26 @@
+---
+title: "Box"
+description: "Box is a component primitive that can be used to build the foundation of pretty much any other component."
+sidebar_label: "Box"
+slug: /reference/components/box
+---
+
+import ComponentDemo from '@site/src/components/ComponentDemo';
+
+# Box
+
+Box is a component primitive that can be used to build the foundation of pretty much any other component. It keeps details like spacing, borders and colors consistent with the rest of Gestalt, while allowing the developer to focus on the content. Also known as “div” or “view”.
+
+**Package:** `@terreno/ui`  
+**Categories:** Foundation  
+**Props interface:** `BoxProps`  
+**Story source:** [`demo/stories/Box.stories.tsx`](https://github.com/flourishhealth/terreno/blob/master/demo/stories/Box.stories.tsx)
+
+## Live demo
+
+<ComponentDemo name="Box" />
+
+## Props
+
+_No documented props were extracted from TypeDoc._
+

package/dist/docs/versioned/0.21.0/reference/components/button.mdx

@@ -0,0 +1,43 @@
+---
+title: "Button"
+description: "Buttons allow users to perform actions within a surface. They can be used alone for immediate action. Also known as CTA (call to action)."
+sidebar_label: "Button"
+slug: /reference/components/button
+---
+
+import ComponentDemo from '@site/src/components/ComponentDemo';
+
+# Button
+
+Buttons allow users to perform actions within a surface. They can be used alone for immediate action. Also known as CTA (call to action).
+
+**Package:** `@terreno/ui`  
+**Categories:** Component  
+**Props interface:** `ButtonProps`  
+**Story source:** [`demo/stories/Button.stories.tsx`](https://github.com/flourishhealth/terreno/blob/master/demo/stories/Button.stories.tsx)
+
+## Live demo
+
+<ComponentDemo name="Button" />
+
+## Props
+
+| Prop | Type | Required | Description |
+| --- | --- | --- | --- |
+| `onClick` | `reflection` | Yes | The function to call when the button is clicked. |
+| `text` | `string` | Yes | The text content of the button. |
+| `confirmationText` | `string` |  | The text content of the confirmation modal. |
+| `disabled` | `boolean` |  | If true, the button will be disabled. |
+| `fullWidth` | `boolean` |  | If true, the button will take the full width of its container. |
+| `iconName` | `IconName` |  | The name of the icon to display in the button. |
+| `iconPosition` | `union` |  | The position of the icon within the button. |
+| `loading` | `boolean` |  | If true, a loading spinner will be shown in the button. |
+| `modalSubTitle` | `string` |  | The subtitle of the confirmation modal. |
+| `modalTitle` | `string` |  | The title of the confirmation modal. |
+| `pressAnimation` | `ButtonPressAnimation` |  | The press animation to use when the button is touched. |
+| `testID` | `string` |  | The test ID for the button, used for testing purposes. |
+| `tooltipIdealPosition` | `TooltipPosition` |  | The position of the tooltip. |
+| `tooltipIncludeArrow` | `boolean` |  | Include an arrow in the tooltip. Pointing to the button. |
+| `tooltipText` | `string` |  | The text content of the tooltip. |
+| `variant` | `union` |  | The type of the button, which determines its style. |
+| `withConfirmation` | `boolean` |  | If true, a confirmation modal will be shown before the onClick action. |

package/dist/docs/versioned/0.21.0/reference/components/card.mdx

@@ -0,0 +1,26 @@
+---
+title: "Card"
+description: "A card serves as a surface for information. It helps organize and highlight information while providing visual hierarchy."
+sidebar_label: "Card"
+slug: /reference/components/card
+---
+
+import ComponentDemo from '@site/src/components/ComponentDemo';
+
+# Card
+
+A card serves as a surface for information. It helps organize and highlight information while providing visual hierarchy. This design system has two kinds of cards: Display and Container.
+
+**Package:** `@terreno/ui`  
+**Categories:** Component  
+**Props interface:** `CardProps`  
+**Story source:** [`demo/stories/Card.stories.tsx`](https://github.com/flourishhealth/terreno/blob/master/demo/stories/Card.stories.tsx)
+
+## Live demo
+
+<ComponentDemo name="Card" />
+
+## Props
+
+_No documented props were extracted from TypeDoc._
+

package/dist/docs/versioned/0.21.0/reference/components/checkbox.mdx

@@ -0,0 +1,29 @@
+---
+title: "CheckBox"
+description: "CheckBox is used for multiple choice selection."
+sidebar_label: "CheckBox"
+slug: /reference/components/checkbox
+---
+
+import ComponentDemo from '@site/src/components/ComponentDemo';
+
+# CheckBox
+
+CheckBox is used for multiple choice selection. They are independent of each other in a list, and therefore, different from RadioButton, one selection does not affect other checkboxes in the same list.
+
+**Package:** `@terreno/ui`  
+**Categories:** Component  
+**Props interface:** `CheckBoxProps`  
+**Story source:** [`demo/stories/CheckBox.stories.tsx`](https://github.com/flourishhealth/terreno/blob/master/demo/stories/CheckBox.stories.tsx)
+
+## Live demo
+
+<ComponentDemo name="CheckBox" />
+
+## Props
+
+| Prop | Type | Required | Description |
+| --- | --- | --- | --- |
+| `selected` | `boolean` | Yes | If true, the checkbox is selected. |
+| `bgColor` | `union` |  | The background color of the checkbox. |
+| `size` | `union` |  | The size of the checkbox. |

package/dist/docs/versioned/0.21.0/reference/components/consentformscreen.mdx

@@ -0,0 +1,26 @@
+---
+title: "ConsentFormScreen"
+description: "The consent form screen renders consent content, required acknowledgements, signatures, and actions."
+sidebar_label: "ConsentFormScreen"
+slug: /reference/components/consentformscreen
+---
+
+import ComponentDemo from '@site/src/components/ComponentDemo';
+
+# ConsentFormScreen
+
+The consent form screen renders consent content, required acknowledgements, signatures, and actions.
+
+**Package:** `@terreno/ui`  
+**Categories:** Pattern  
+**Props interface:** `ConsentFormScreenProps`  
+**Story source:** [`demo/stories/ConsentFormScreen.stories.tsx`](https://github.com/flourishhealth/terreno/blob/master/demo/stories/ConsentFormScreen.stories.tsx)
+
+## Live demo
+
+<ComponentDemo name="ConsentFormScreen" />
+
+## Props
+
+_No documented props were extracted from TypeDoc._
+

package/dist/docs/versioned/0.21.0/reference/components/custom-select-field.mdx

@@ -0,0 +1,34 @@
+---
+title: "Custom Select Field"
+description: "Displays a list of options using the browser’s native select and includes a custom option that renders a text field when selected and allows user to input value not included in predefined options."
+sidebar_label: "Custom Select Field"
+slug: /reference/components/custom-select-field
+---
+
+import ComponentDemo from '@site/src/components/ComponentDemo';
+
+# Custom Select Field
+
+Displays a list of options using the browser’s native select and includes a custom option that renders a text field when selected and allows user to input value not included in predefined options.
+
+**Package:** `@terreno/ui`  
+**Categories:** Component  
+**Props interface:** `CustomSelectFieldProps`  
+**Story source:** [`demo/stories/CustomSelectField.stories.tsx`](https://github.com/flourishhealth/terreno/blob/master/demo/stories/CustomSelectField.stories.tsx)
+
+## Live demo
+
+<ComponentDemo name="Custom Select Field" />
+
+## Props
+
+| Prop | Type | Required | Description |
+| --- | --- | --- | --- |
+| `onChange` | `reflection` | Yes | The function to call when the custom select field value changes. |
+| `options` | `array` | Yes | The options available for selection in the select field. Each option should have a label and a value. |
+| `value` | `union` | Yes | The current value of the custom select field. |
+| `disabled` | `boolean` |  | If true, the select field will be disabled. |
+| `errorText` | `string` |  | The error text to display if there is an error. |
+| `helperText` | `string` |  | The helper text to display below the select field. |
+| `placeholder` | `string` |  | The placeholder text to display when no option is selected. |
+| `title` | `string` |  | The title of the custom select field. |

package/dist/docs/versioned/0.21.0/reference/components/datatable.mdx

@@ -0,0 +1,41 @@
+---
+title: "DataTable"
+description: "DataTable takes arrays of arrays of data and handles them correctly to build a table. It supports pinnable columns unlike Table, but is less flexible."
+sidebar_label: "DataTable"
+slug: /reference/components/datatable
+---
+
+import ComponentDemo from '@site/src/components/ComponentDemo';
+
+# DataTable
+
+DataTable takes arrays of arrays of data and handles them correctly to build a table. It supports pinnable columns unlike Table, but is less flexible.
+
+**Package:** `@terreno/ui`  
+**Categories:** Pattern  
+**Props interface:** `DataTableProps`  
+**Story source:** [`demo/stories/DataTable.stories.tsx`](https://github.com/flourishhealth/terreno/blob/master/demo/stories/DataTable.stories.tsx)
+
+## Live demo
+
+<ComponentDemo name="DataTable" />
+
+## Props
+
+| Prop | Type | Required | Description |
+| --- | --- | --- | --- |
+| `columns` | `array` | Yes |  |
+| `data` | `array` | Yes |  |
+| `alternateRowBackground` | `boolean` |  |  |
+| `customColumnComponentMap` | `DataTableCustomComponentMap` |  |  |
+| `defaultTextSize` | `union` |  |  |
+| `headerHeight` | `number` |  |  |
+| `moreContentComponent` | `ComponentType` |  | When tapping the eye icon, a modal is shown with more info about the row. |
+| `moreContentExtraData` | `array` |  |  |
+| `page` | `number` |  |  |
+| `pinnedColumns` | `number` |  |  |
+| `rowHeight` | `number` |  |  |
+| `setPage` | `reflection` |  |  |
+| `setSortColumn` | `reflection` |  |  |
+| `sortColumn` | `ColumnSortInterface` |  |  |
+| `totalPages` | `number` |  |  |

package/dist/docs/versioned/0.21.0/reference/components/date-time-field.mdx

@@ -0,0 +1,48 @@
+---
+title: "Date & Time field"
+description: "This form field allows the user to select a date and a time. Used in conjunction with the date & time modal in this pattern."
+sidebar_label: "Date & Time field"
+slug: /reference/components/date-time-field
+---
+
+import ComponentDemo from '@site/src/components/ComponentDemo';
+
+# Date & Time field
+
+This form field allows the user to select a date and a time. Used in conjunction with the date & time modal in this pattern.
+
+**Package:** `@terreno/ui`  
+**Categories:** Component  
+**Props interface:** `DateTimeFieldProps`  
+**Story source:** [`demo/stories/Date&Timefield.stories.tsx`](https://github.com/flourishhealth/terreno/blob/master/demo/stories/Date&Timefield.stories.tsx)
+
+## Live demo
+
+<ComponentDemo name="Date & Time field" />
+
+## Props
+
+| Prop | Type | Required | Description |
+| --- | --- | --- | --- |
+| `onChange` | `reflection` | Yes |  |
+| `type` | `union` | Yes |  |
+| `blurOnSubmit` | `boolean` |  |  |
+| `dateFormat` | `string` |  |  |
+| `disabled` | `boolean` |  |  |
+| `errorText` | `string` |  |  |
+| `helperText` | `string` |  |  |
+| `iconName` | `IconName` |  |  |
+| `id` | `string` |  |  |
+| `onBlur` | `OnChangeCallback` |  |  |
+| `onEnter` | `reflection` |  |  |
+| `onFocus` | `reflection` |  |  |
+| `onIconClick` | `reflection` |  |  |
+| `onSubmitEditing` | `reflection` |  |  |
+| `onTimezoneChange` | `reflection` |  |  |
+| `pickerType` | `union` |  |  |
+| `placeholder` | `string` |  |  |
+| `showTimezone` | `boolean` |  |  |
+| `testID` | `string` |  |  |
+| `timezone` | `string` |  |  |
+| `title` | `string` |  |  |
+| `value` | `string` |  |  |

package/dist/docs/versioned/0.21.0/reference/components/email-field.mdx

@@ -0,0 +1,42 @@
+---
+title: "Email field"
+description: "Use the email field to allow a user to input a valid email."
+sidebar_label: "Email field"
+slug: /reference/components/email-field
+---
+
+import ComponentDemo from '@site/src/components/ComponentDemo';
+
+# Email field
+
+Use the email field to allow a user to input a valid email.
+
+**Package:** `@terreno/ui`  
+**Categories:** Component  
+**Props interface:** `EmailFieldProps`  
+**Story source:** [`demo/stories/Emailfield.stories.tsx`](https://github.com/flourishhealth/terreno/blob/master/demo/stories/Emailfield.stories.tsx)
+
+## Live demo
+
+<ComponentDemo name="Email field" />
+
+## Props
+
+| Prop | Type | Required | Description |
+| --- | --- | --- | --- |
+| `onChange` | `OnChangeCallback` | Yes |  |
+| `blurOnSubmit` | `boolean` |  |  |
+| `disabled` | `boolean` |  |  |
+| `errorText` | `string` |  |  |
+| `helperText` | `string` |  |  |
+| `iconName` | `IconName` |  |  |
+| `id` | `string` |  |  |
+| `onBlur` | `OnChangeCallback` |  |  |
+| `onEnter` | `reflection` |  |  |
+| `onFocus` | `reflection` |  |  |
+| `onIconClick` | `reflection` |  |  |
+| `onSubmitEditing` | `reflection` |  |  |
+| `placeholder` | `string` |  |  |
+| `testID` | `string` |  |  |
+| `title` | `string` |  |  |
+| `value` | `string` |  |  |

package/dist/docs/versioned/0.21.0/reference/components/emoji-selector.mdx

@@ -0,0 +1,26 @@
+---
+title: "Emoji selector"
+description: "A grid-based emoji picker with categories, search, and recent history."
+sidebar_label: "Emoji selector"
+slug: /reference/components/emoji-selector
+---
+
+import ComponentDemo from '@site/src/components/ComponentDemo';
+
+# Emoji selector
+
+A grid-based emoji picker with categories, search, and recent history.
+
+**Package:** `@terreno/ui`  
+**Categories:** Component  
+**Props interface:** `EmojiSelectorProps`  
+**Story source:** [`demo/stories/Emojiselector.stories.tsx`](https://github.com/flourishhealth/terreno/blob/master/demo/stories/Emojiselector.stories.tsx)
+
+## Live demo
+
+<ComponentDemo name="Emoji selector" />
+
+## Props
+
+_No documented props were extracted from TypeDoc._
+