@terreno/mcp 0.21.0 → 0.22.1

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

@@ -0,0 +1,26 @@
+---
+title: "Field"
+description: "A higher level component that wraps all input fields, allowing you to pass type and get the correct field."
+sidebar_label: "Field"
+slug: /reference/components/field
+---
+
+import ComponentDemo from '@site/src/components/ComponentDemo';
+
+# Field
+
+A higher level component that wraps all input fields, allowing you to pass type and get the correct field.
+
+**Package:** `@terreno/ui`  
+**Categories:** Pattern  
+**Props interface:** `FieldProps`  
+**Story source:** [`demo/stories/Field.stories.tsx`](https://github.com/flourishhealth/terreno/blob/master/demo/stories/Field.stories.tsx)
+
+## Live demo
+
+<ComponentDemo name="Field" />
+
+## Props
+
+_No documented props were extracted from TypeDoc._
+

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

@@ -0,0 +1,44 @@
+---
+title: "Height field"
+description: "Use the Height field to allow users to input their height. The field stores the value as total inches and displays it as feet and inches. On web, two text inputs accept feet and inches separately. On iOS, tapping the field opens an action sheet for selection. On Android, two dropdowns allow selection of feet and inches. Supports optional min/max props to constrain the allowed height range."
+sidebar_label: "Height field"
+slug: /reference/components/height-field
+---
+
+import ComponentDemo from '@site/src/components/ComponentDemo';
+
+# Height field
+
+Use the Height field to allow users to input their height. The field stores the value as total inches and displays it as feet and inches. On web, two text inputs accept feet and inches separately. On iOS, tapping the field opens an action sheet for selection. On Android, two dropdowns allow selection of feet and inches. Supports optional min/max props to constrain the allowed height range.
+
+**Package:** `@terreno/ui`  
+**Categories:** Component  
+**Props interface:** `HeightFieldProps`  
+**Story source:** [`demo/stories/Heightfield.stories.tsx`](https://github.com/flourishhealth/terreno/blob/master/demo/stories/Heightfield.stories.tsx)
+
+## Live demo
+
+<ComponentDemo name="Height field" />
+
+## Props
+
+| Prop | Type | Required | Description |
+| --- | --- | --- | --- |
+| `onChange` | `OnChangeCallback` | Yes |  |
+| `blurOnSubmit` | `boolean` |  |  |
+| `disabled` | `boolean` |  |  |
+| `errorText` | `string` |  |  |
+| `helperText` | `string` |  |  |
+| `iconName` | `IconName` |  |  |
+| `id` | `string` |  |  |
+| `max` | `number` |  | Maximum height in total inches |
+| `min` | `number` |  | Minimum height in total inches |
+| `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/icon.mdx

@@ -0,0 +1,31 @@
+---
+title: "Icon"
+description: "Icons are used to visually communicate core actions or information to the user. They are used to represent a particular action or category of information."
+sidebar_label: "Icon"
+slug: /reference/components/icon
+---
+
+import ComponentDemo from '@site/src/components/ComponentDemo';
+
+# Icon
+
+Icons are used to visually communicate core actions or information to the user. They are used to represent a particular action or category of information.
+
+**Package:** `@terreno/ui`  
+**Categories:** Foundation  
+**Props interface:** `IconProps`  
+**Story source:** [`demo/stories/Icon.stories.tsx`](https://github.com/flourishhealth/terreno/blob/master/demo/stories/Icon.stories.tsx)
+
+## Live demo
+
+<ComponentDemo name="Icon" />
+
+## Props
+
+| Prop | Type | Required | Description |
+| --- | --- | --- | --- |
+| `iconName` | `IconName` | Yes |  |
+| `color` | `keyof TextTheme` |  |  |
+| `size` | `IconSize` |  |  |
+| `testID` | `string` |  |  |
+| `type` | `union` |  |  |

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

@@ -0,0 +1,42 @@
+---
+title: "IconButton"
+description: "Icon buttons allow users to take actions and make choices with a single tap."
+sidebar_label: "IconButton"
+slug: /reference/components/iconbutton
+---
+
+import ComponentDemo from '@site/src/components/ComponentDemo';
+
+# IconButton
+
+Icon buttons allow users to take actions and make choices with a single tap.
+
+**Package:** `@terreno/ui`  
+**Categories:** Component  
+**Props interface:** `IconButtonProps`  
+**Story source:** [`demo/stories/IconButton.stories.tsx`](https://github.com/flourishhealth/terreno/blob/master/demo/stories/IconButton.stories.tsx)
+
+## Live demo
+
+<ComponentDemo name="IconButton" />
+
+## Props
+
+| Prop | Type | Required | Description |
+| --- | --- | --- | --- |
+| `accessibilityLabel` | `string` | Yes | The accessibility label attribute identifies the user interface element. It should be a very brief description of the element, such as "Add", "Play", "Deleted", etc. |
+| `iconName` | `IconName` | Yes | The name of the icon to display in the button. |
+| `onClick` | `reflection` | Yes | The function to call when the button is clicked. |
+| `accessibilityHint` | `string` |  | The accessibility hint describes the results of performing an action on a control or view. It should be a very brief description of the result of interacting with the button. |
+| `confirmationHeading` | `string` |  | The heading of the confirmation modal. |
+| `confirmationText` | `string` |  | The text content of the confirmation modal. |
+| `disabled` | `boolean` |  | If true, the button will be disabled. |
+| `indicator` | `union` |  | Show a small indicator icon in the lower right corner of the button. |
+| `indicatorText` | `union` |  | The text or number to display in the indicator. If not provided, the indicator will be a solid circle. |
+| `loading` | `boolean` |  | If true, a loading spinner will be shown in the button. |
+| `testID` | `string` |  | The test ID for the button, used for testing purposes. |
+| `tooltipIdealPosition` | `TooltipPosition` |  | The ideal 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 variant 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/inner-modal-content.mdx

@@ -0,0 +1,39 @@
+---
+title: "Inner modal content"
+description: "A Modal displays content that requires user interaction. Modals appear on a layer above the page and therefore block the content underneath"
+sidebar_label: "Inner modal content"
+slug: /reference/components/inner-modal-content
+---
+
+import ComponentDemo from '@site/src/components/ComponentDemo';
+
+# Inner modal content
+
+A Modal displays content that requires user interaction. Modals appear on a layer above the page and therefore block the content underneath, preventing users from interacting with anything else besides the Modal. Modal should be used to gather short bits of information from the user. Also known as dialog or prompt.
+
+**Package:** `@terreno/ui`  
+**Categories:** Layout, Utility  
+**Props interface:** `ModalProps`  
+**Story source:** [`demo/stories/Innermodalcontent.stories.tsx`](https://github.com/flourishhealth/terreno/blob/master/demo/stories/Innermodalcontent.stories.tsx)
+
+## Live demo
+
+<ComponentDemo name="Inner modal content" />
+
+## Props
+
+| Prop | Type | Required | Description |
+| --- | --- | --- | --- |
+| `onDismiss` | `reflection` | Yes |  |
+| `visible` | `boolean` | Yes | If true, the modal will be visible. |
+| `children` | `ReactElement` |  | The content of the modal. |
+| `persistOnBackgroundClick` | `boolean` |  | If true, the modal will be closed when the background is clicked. |
+| `primaryButtonDisabled` | `boolean` |  | If true, the primary button will be disabled. |
+| `primaryButtonOnClick` | `reflection` |  | The function to call when the primary button is clicked. |
+| `primaryButtonText` | `string` |  | The text content of the primary button. |
+| `secondaryButtonOnClick` | `reflection` |  | The function to call when the secondary button is clicked. |
+| `secondaryButtonText` | `string` |  | The text content of the secondary button. |
+| `size` | `union` |  | The size of the modal. |
+| `subtitle` | `string` |  | The subtitle of the modal. |
+| `text` | `string` |  | The text content of the modal. |
+| `title` | `string` |  | The title of the modal. |

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

@@ -0,0 +1,49 @@
+---
+title: "Markdown editor field"
+description: "A side-by-side markdown editor with a text input on the left and a live preview on the right. Useful for editing rich text content in admin panels and forms."
+sidebar_label: "Markdown editor field"
+slug: /reference/components/markdown-editor-field
+---
+
+import ComponentDemo from '@site/src/components/ComponentDemo';
+
+# Markdown editor field
+
+A side-by-side markdown editor with a text input on the left and a live preview on the right. Useful for editing rich text content in admin panels and forms.
+
+**Package:** `@terreno/ui`  
+**Categories:** Data Entry  
+**Props interface:** `TextAreaProps`  
+**Story source:** [`demo/stories/Markdowneditorfield.stories.tsx`](https://github.com/flourishhealth/terreno/blob/master/demo/stories/Markdowneditorfield.stories.tsx)
+
+## Live demo
+
+<ComponentDemo name="Markdown editor field" />
+
+## Props
+
+| Prop | Type | Required | Description |
+| --- | --- | --- | --- |
+| `onChange` | `OnChangeCallback` | Yes |  |
+| `aiSuggestion` | `AiSuggestionProps` |  |  |
+| `autoComplete` | `union` |  |  |
+| `blurOnSubmit` | `boolean` |  |  |
+| `disabled` | `boolean` |  |  |
+| `errorText` | `string` |  |  |
+| `grow` | `boolean` |  |  |
+| `helperText` | `string` |  |  |
+| `iconName` | `IconName` |  |  |
+| `id` | `string` |  |  |
+| `inputRef` | `reflection` |  |  |
+| `onBlur` | `OnChangeCallback` |  |  |
+| `onEnter` | `reflection` |  |  |
+| `onFocus` | `reflection` |  |  |
+| `onIconClick` | `reflection` |  |  |
+| `onSubmitEditing` | `reflection` |  |  |
+| `placeholder` | `string` |  |  |
+| `returnKeyType` | `union` |  |  |
+| `rows` | `number` |  |  |
+| `testID` | `string` |  |  |
+| `title` | `string` |  |  |
+| `trimOnBlur` | `boolean` |  |  |
+| `value` | `string` |  |  |

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

@@ -0,0 +1,37 @@
+---
+title: "MarkdownView"
+description: "Render markdown using the design system fonts and colors. Headings map to theme sizes (h1→xl, h2→lg, h3→md, h4→sm)."
+sidebar_label: "MarkdownView"
+slug: /reference/components/markdownview
+---
+
+import ComponentDemo from '@site/src/components/ComponentDemo';
+
+# MarkdownView
+
+Render markdown using the design system fonts and colors. Headings map to theme sizes (h1→xl, h2→lg, h3→md, h4→sm).
+
+**Package:** `@terreno/ui`  
+**Categories:** Component  
+**Props interface:** `TextProps`  
+**Story source:** [`demo/stories/MarkdownView.stories.tsx`](https://github.com/flourishhealth/terreno/blob/master/demo/stories/MarkdownView.stories.tsx)
+
+## Live demo
+
+<ComponentDemo name="MarkdownView" />
+
+## Props
+
+| Prop | Type | Required | Description |
+| --- | --- | --- | --- |
+| `align` | `union` |  |  |
+| `bold` | `boolean` |  |  |
+| `children` | `ReactNode` |  |  |
+| `color` | `keyof TextTheme` |  |  |
+| `italic` | `boolean` |  |  |
+| `numberOfLines` | `number` |  |  |
+| `size` | `TextSize` |  |  |
+| `skipLinking` | `boolean` |  |  |
+| `testID` | `string` |  |  |
+| `truncate` | `boolean` |  |  |
+| `underline` | `boolean` |  |  |

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

@@ -0,0 +1,34 @@
+---
+title: "Multiselect Field"
+description: "Also called 'checkbox field'. This component is a list of checkable items. In this case, a user can choose one, many, all, or no options."
+sidebar_label: "Multiselect Field"
+slug: /reference/components/multiselect-field
+---
+
+import ComponentDemo from '@site/src/components/ComponentDemo';
+
+# Multiselect Field
+
+Also called 'checkbox field'. This component is a list of checkable items. In this case, a user can choose one, many, all, or no options.
+
+**Package:** `@terreno/ui`  
+**Categories:** Component  
+**Props interface:** `MultiselectFieldProps`  
+**Story source:** [`demo/stories/MultiselectField.stories.tsx`](https://github.com/flourishhealth/terreno/blob/master/demo/stories/MultiselectField.stories.tsx)
+
+## Live demo
+
+<ComponentDemo name="Multiselect Field" />
+
+## Props
+
+| Prop | Type | Required | Description |
+| --- | --- | --- | --- |
+| `onChange` | `reflection` | Yes | The function to call when the selected values change. |
+| `options` | `array` | Yes | The available options for the multiselect field. |
+| `title` | `string` | Yes | The title of the multiselect field. |
+| `value` | `array` | Yes | The selected values of the multiselect field. |
+| `disabled` | `boolean` |  | The disabled state of multiselect. Removes checkboxes and only shows the values. |
+| `errorText` | `string` |  |  |
+| `helperText` | `string` |  |  |
+| `variant` | `union` |  | The variant of the multiselect field, which determines the position of the text. |

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

@@ -0,0 +1,45 @@
+---
+title: "Number field"
+description: "Use the number field to allow a user to input numerical values."
+sidebar_label: "Number field"
+slug: /reference/components/number-field
+---
+
+import ComponentDemo from '@site/src/components/ComponentDemo';
+
+# Number field
+
+Use the number field to allow a user to input numerical values.
+
+**Package:** `@terreno/ui`  
+**Categories:** Component  
+**Props interface:** `NumberFieldProps`  
+**Story source:** [`demo/stories/Numberfield.stories.tsx`](https://github.com/flourishhealth/terreno/blob/master/demo/stories/Numberfield.stories.tsx)
+
+## Live demo
+
+<ComponentDemo name="Number field" />
+
+## Props
+
+| Prop | Type | Required | Description |
+| --- | --- | --- | --- |
+| `onChange` | `OnChangeCallback` | Yes |  |
+| `type` | `union` | Yes |  |
+| `blurOnSubmit` | `boolean` |  |  |
+| `disabled` | `boolean` |  |  |
+| `errorText` | `string` |  |  |
+| `helperText` | `string` |  |  |
+| `iconName` | `IconName` |  |  |
+| `id` | `string` |  |  |
+| `max` | `number` |  |  |
+| `min` | `number` |  |  |
+| `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/page.mdx

@@ -0,0 +1,45 @@
+---
+title: "Page"
+description: "Page is a full-screen layout container with an optional header, footer, back/close buttons, and loading state. It handles scrolling, keyboard avoidance, and max-width centering."
+sidebar_label: "Page"
+slug: /reference/components/page
+---
+
+import ComponentDemo from '@site/src/components/ComponentDemo';
+
+# Page
+
+Page is a full-screen layout container with an optional header, footer, back/close buttons, and loading state. It handles scrolling, keyboard avoidance, and max-width centering.
+
+**Package:** `@terreno/ui`  
+**Categories:** Component  
+**Props interface:** `PageProps`  
+**Story source:** [`demo/stories/Page.stories.tsx`](https://github.com/flourishhealth/terreno/blob/master/demo/stories/Page.stories.tsx)
+
+## Live demo
+
+<ComponentDemo name="Page" />
+
+## Props
+
+| Prop | Type | Required | Description |
+| --- | --- | --- | --- |
+| `backButton` | `boolean` |  |  |
+| `children` | `ReactNode` |  |  |
+| `closeButton` | `boolean` |  |  |
+| `color` | `BoxColor` |  | Page body surface; use  |
+| `direction` | `union` |  |  |
+| `display` | `union` |  |  |
+| `footer` | `ReactNode` |  |  |
+| `keyboardOffset` | `number` |  |  |
+| `loading` | `boolean` |  |  |
+| `loadingText` | `string` |  |  |
+| `maxWidth` | `union` |  |  |
+| `navigation` | `any` |  |  |
+| `onError` | `reflection` |  |  |
+| `padding` | `UnsignedUpTo12` |  |  |
+| `rightButton` | `string` |  |  |
+| `rightButtonOnClick` | `reflection` |  |  |
+| `safeArea` | `boolean` |  | When true, wraps content in SafeAreaView so it respects top/bottom device insets (camera notches, home indicator, status bar). Opt-in to avoid regressing existing screens that handle insets at the navigation level. |
+| `scroll` | `boolean` |  |  |
+| `title` | `string` |  |  |

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

@@ -0,0 +1,29 @@
+---
+title: "Pagination"
+description: "Break large sets of content into smaller, manageable pages. Used primarily in the staff portal to parse large tables."
+sidebar_label: "Pagination"
+slug: /reference/components/pagination
+---
+
+import ComponentDemo from '@site/src/components/ComponentDemo';
+
+# Pagination
+
+Break large sets of content into smaller, manageable pages. Used primarily in the staff portal to parse large tables.
+
+**Package:** `@terreno/ui`  
+**Categories:** Component  
+**Props interface:** `PaginationProps`  
+**Story source:** [`demo/stories/Pagination.stories.tsx`](https://github.com/flourishhealth/terreno/blob/master/demo/stories/Pagination.stories.tsx)
+
+## Live demo
+
+<ComponentDemo name="Pagination" />
+
+## Props
+
+| Prop | Type | Required | Description |
+| --- | --- | --- | --- |
+| `page` | `number` | Yes |  |
+| `setPage` | `reflection` | Yes |  |
+| `totalPages` | `number` | Yes |  |

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

@@ -0,0 +1,26 @@
+---
+title: "Password field"
+description: "A form field that allows the user to enter a protected password."
+sidebar_label: "Password field"
+slug: /reference/components/password-field
+---
+
+import ComponentDemo from '@site/src/components/ComponentDemo';
+
+# Password field
+
+A form field that allows the user to enter a protected password.
+
+**Package:** `@terreno/ui`  
+**Categories:** Component  
+**Props interface:** `PasswordFieldProps`  
+**Story source:** [`demo/stories/Passwordfield.stories.tsx`](https://github.com/flourishhealth/terreno/blob/master/demo/stories/Passwordfield.stories.tsx)
+
+## Live demo
+
+<ComponentDemo name="Password field" />
+
+## Props
+
+_No documented props were extracted from TypeDoc._
+

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

@@ -0,0 +1,43 @@
+---
+title: "Phone number field"
+description: "Use the phone number field to allow a user to input a valid phone number."
+sidebar_label: "Phone number field"
+slug: /reference/components/phone-number-field
+---
+
+import ComponentDemo from '@site/src/components/ComponentDemo';
+
+# Phone number field
+
+Use the phone number field to allow a user to input a valid phone number.
+
+**Package:** `@terreno/ui`  
+**Categories:** Component  
+**Props interface:** `PhoneNumberFieldProps`  
+**Story source:** [`demo/stories/Phonenumberfield.stories.tsx`](https://github.com/flourishhealth/terreno/blob/master/demo/stories/Phonenumberfield.stories.tsx)
+
+## Live demo
+
+<ComponentDemo name="Phone number field" />
+
+## Props
+
+| Prop | Type | Required | Description |
+| --- | --- | --- | --- |
+| `onChange` | `OnChangeCallback` | Yes |  |
+| `blurOnSubmit` | `boolean` |  |  |
+| `defaultCountryCode` | `CountryCode` |  | Defaults to "US" |
+| `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/radio-field.mdx

@@ -0,0 +1,31 @@
+---
+title: "Radio field"
+description: "Radio fields are used for selecting only 1 item from a list of 2 or more items. If you have a binary choice, consider using checkboxes or toggles instead."
+sidebar_label: "Radio field"
+slug: /reference/components/radio-field
+---
+
+import ComponentDemo from '@site/src/components/ComponentDemo';
+
+# Radio field
+
+Radio fields are used for selecting only 1 item from a list of 2 or more items. If you have a binary choice, consider using checkboxes or toggles instead.
+
+**Package:** `@terreno/ui`  
+**Categories:** Component  
+**Props interface:** `RadioFieldProps`  
+**Story source:** [`demo/stories/Radiofield.stories.tsx`](https://github.com/flourishhealth/terreno/blob/master/demo/stories/Radiofield.stories.tsx)
+
+## Live demo
+
+<ComponentDemo name="Radio field" />
+
+## Props
+
+| Prop | Type | Required | Description |
+| --- | --- | --- | --- |
+| `onChange` | `reflection` | Yes |  |
+| `options` | `array` | Yes |  |
+| `title` | `string` | Yes |  |
+| `value` | `string` | Yes |  |
+| `variant` | `union` |  |  |

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

@@ -0,0 +1,26 @@
+---
+title: "SectionDivider"
+description: "A horizontal divider used to separate content sections. Provides visual separation between different groups of content within a container."
+sidebar_label: "SectionDivider"
+slug: /reference/components/sectiondivider
+---
+
+import ComponentDemo from '@site/src/components/ComponentDemo';
+
+# SectionDivider
+
+A horizontal divider used to separate content sections. Provides visual separation between different groups of content within a container.
+
+**Package:** `@terreno/ui`  
+**Categories:** Component  
+**Props interface:** `SectionDividerProps`  
+**Story source:** [`demo/stories/SectionDivider.stories.tsx`](https://github.com/flourishhealth/terreno/blob/master/demo/stories/SectionDivider.stories.tsx)
+
+## Live demo
+
+<ComponentDemo name="SectionDivider" />
+
+## Props
+
+_No documented props were extracted from TypeDoc._
+

package/dist/docs/versioned/0.21.0/reference/components/segmented-control.mdx

@@ -0,0 +1,32 @@
+---
+title: "Segmented control"
+description: "SegmentedControl may be used to group multiple selections. The controls display the current state and related state."
+sidebar_label: "Segmented control"
+slug: /reference/components/segmented-control
+---
+
+import ComponentDemo from '@site/src/components/ComponentDemo';
+
+# Segmented control
+
+SegmentedControl may be used to group multiple selections. The controls display the current state and related state. Create layout to convey a clear sense of information hierarchy. When a control is engaged, information below the control should also be updated. Also known as 'Toggle group'.
+
+**Package:** `@terreno/ui`  
+**Categories:** Component  
+**Props interface:** `SegmentedControlProps`  
+**Story source:** [`demo/stories/Segmentedcontrol.stories.tsx`](https://github.com/flourishhealth/terreno/blob/master/demo/stories/Segmentedcontrol.stories.tsx)
+
+## Live demo
+
+<ComponentDemo name="Segmented control" />
+
+## Props
+
+| Prop | Type | Required | Description |
+| --- | --- | --- | --- |
+| `items` | `array` | Yes |  |
+| `onChange` | `reflection` | Yes |  |
+| `badges` | `array` |  |  |
+| `maxItems` | `number` |  |  |
+| `selectedIndex` | `number` |  |  |
+| `size` | `union` |  |  |

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

@@ -0,0 +1,26 @@
+---
+title: "Select field"
+description: "Displays a list of actions or options using the browser’s native select."
+sidebar_label: "Select field"
+slug: /reference/components/select-field
+---
+
+import ComponentDemo from '@site/src/components/ComponentDemo';
+
+# Select field
+
+Displays a list of actions or options using the browser’s native select.
+
+**Package:** `@terreno/ui`  
+**Categories:** Component  
+**Props interface:** `SelectFieldProps`  
+**Story source:** [`demo/stories/Selectfield.stories.tsx`](https://github.com/flourishhealth/terreno/blob/master/demo/stories/Selectfield.stories.tsx)
+
+## Live demo
+
+<ComponentDemo name="Select field" />
+
+## Props
+
+_No documented props were extracted from TypeDoc._
+

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

@@ -0,0 +1,35 @@
+---
+title: "SelectBadge"
+description: "SelectBadge is an interactive badge that can open a dropdown with selectable options."
+sidebar_label: "SelectBadge"
+slug: /reference/components/selectbadge
+---
+
+import ComponentDemo from '@site/src/components/ComponentDemo';
+
+# SelectBadge
+
+SelectBadge is an interactive badge that can open a dropdown with selectable options.
+
+**Package:** `@terreno/ui`  
+**Categories:** Component  
+**Props interface:** `SelectBadgeProps`  
+**Story source:** [`demo/stories/SelectBadge.stories.tsx`](https://github.com/flourishhealth/terreno/blob/master/demo/stories/SelectBadge.stories.tsx)
+
+## Live demo
+
+<ComponentDemo name="SelectBadge" />
+
+## Props
+
+| Prop | Type | Required | Description |
+| --- | --- | --- | --- |
+| `onChange` | `reflection` | Yes | The function to call when the selected value changes. |
+| `options` | `array` | Yes | The options available for the dropdown badge. Each option should have a label and a value. |
+| `customBackgroundColor` | `string` |  | When status is "custom", determines the badge's background color. |
+| `customBorderColor` | `string` |  | When status is "custom", determines the badge's border color. |
+| `customTextColor` | `string` |  | When status is "custom", determines the badge's text color. |
+| `disabled` | `boolean` |  | If true, the badge will be disabled and not interactive. |
+| `secondary` | `boolean` |  | If true, the badge will have a secondary style. |
+| `status` | `union` |  | The status of the badge. Determines its color and appearance. |
+| `value` | `string` |  | The current value of the select field. |