@duro-app/ui 5.20.0 → 5.22.0

package/src/docs/Typography.mdx

@@ -55,12 +55,15 @@ Presets compose scale tokens + weight + tracking into named styles via `typePres
 
 ### Heading
 
-| Preset      | Size  | Weight   | Tracking |
-| ----------- | ----- | -------- | -------- |
-| `headingSm` | 20/28 | Semibold | Tight    |
-| `headingMd` | 24/32 | Semibold | Tight    |
-| `headingLg` | 30/36 | Bold     | Tight    |
-| `headingXl` | 36/44 | Bold     | Tight    |
+| Preset      | Size  | Weight   | Tracking                                                 |
+| ----------- | ----- | -------- | -------------------------------------------------------- |
+| `headingSm` | 20/28 | Semibold | Tight                                                    |
+| `headingMd` | 24/32 | Semibold | Tight                                                    |
+| `headingLg` | 30/36 | Bold     | Tight                                                    |
+| `headingXl` | 36/44 | Bold     | Tight                                                    |
+| `overline`  | 12/16 | Semibold | Wide, uppercase (`overlineMd` 14/20, `overlineLg` 16/24) |
+
+`Heading` picks a preset from two props: `variant` (`heading`, `display`, `overline`) and `size` (`sm`, `md`, `lg`, `xl`). `<Heading level={3} variant="overline" size="lg">` is a group title at 16/24. Without `size`, a heading takes its level's size, a display title `md` and an overline `sm`.
 
 ### Display (fluid)
 
@@ -82,12 +85,13 @@ See the **Fluid Display** story for a resizable demo.
 
 ## When to use which layer
 
-| Scenario                                       | Use                                       |
-| ---------------------------------------------- | ----------------------------------------- |
-| Body text in a page or card                    | `<Text variant="bodyMd">`                 |
-| Section heading                                | `<Heading level={2}>`                     |
-| Hero or landing page title                     | `<Heading level={1} variant="displayLg">` |
-| Form label                                     | `<Text variant="label">`                  |
-| Inline code                                    | `<Text variant="code">`                   |
-| Custom component needing raw font size         | `typeScale.fontSize4` token               |
-| Composing a one-off style with preset defaults | `typePresets.bodyMd` in `css.create()`    |
+| Scenario                                       | Use                                               |
+| ---------------------------------------------- | ------------------------------------------------- |
+| Body text in a page or card                    | `<Text variant="bodyMd">`                         |
+| Section heading                                | `<Heading level={2}>`                             |
+| Group title over a list of rows                | `<Heading level={3} variant="overline">`          |
+| Hero or landing page title                     | `<Heading level={1} variant="display" size="lg">` |
+| Form label                                     | `<Text variant="label">`                          |
+| Inline code                                    | `<Text variant="code">`                           |
+| Custom component needing raw font size         | `typeScale.fontSize4` token                       |
+| Composing a one-off style with preset defaults | `typePresets.bodyMd` in `css.create()`            |

package/src/index.native.ts

@@ -20,13 +20,18 @@ export {Badge, type BadgeVariant, type BadgeSize} from './components/Badge/Badge
 export {Button, type ButtonVariant, type ButtonSize} from './components/Button/Button'
 export {Card, type CardVariant, type CardSize} from './components/Card/Card'
 export {Checkbox} from './components/Checkbox/Checkbox'
-export {Heading, type HeadingVariant} from './components/Heading/Heading'
+export {Heading, type HeadingSize, type HeadingVariant} from './components/Heading/Heading'
 export {Input, type InputVariant} from './components/Input/Input'
 export {Switch} from './components/Switch/Switch'
 export {Text, type TextVariant, type TextColor} from './components/Text/Text'
 export {TextLink, type TextLinkVariant} from './components/TextLink/TextLink'
 export {Textarea, type TextareaVariant} from './components/Textarea/Textarea'
 
+// Text and layout
+export {CodeBlock, type CodeBlockProps} from './components/CodeBlock/CodeBlock'
+export {Prose} from './components/Prose/Prose'
+export {Toolbar, type ToolbarProps} from './components/Toolbar/Toolbar'
+
 // Form field wrappers (RN-safe — used by Input/Textarea/Checkbox)
 export {Field} from './components/Field/Field'
 export {InputGroup} from './components/InputGroup/InputGroup'
@@ -57,6 +62,8 @@ export {Tree} from './components/Tree/Tree'
 export {Select} from './components/Select/Select'
 export {Combobox} from './components/Combobox/Combobox'
 export {Listbox} from './components/Listbox/Listbox'
+// A FlatList with the web props; prepend keeps position.
+export {VirtualList, type VirtualListProps} from './components/VirtualList/VirtualList'
 // The platform's own scroll indicator: Scrollbar and Thumb draw nothing.
 export {ScrollArea} from './components/ScrollArea/ScrollArea'
 export type {ListboxAnchorProps, ListboxMaxHeight} from './components/Listbox/Listbox'

package/src/index.ts

@@ -56,7 +56,7 @@ export {
   type SnapPoint,
 } from './components/Drawer/Drawer'
 export {EmptyState} from './components/EmptyState/EmptyState'
-export {Heading, type HeadingVariant} from './components/Heading/Heading'
+export {Heading, type HeadingSize, type HeadingVariant} from './components/Heading/Heading'
 export {List, type ListSelectionMode} from './components/List/List'
 export {LiveRegion, type LiveRegionPoliteness} from './components/LiveRegion/LiveRegion'
 export {Field} from './components/Field/Field'