@ankhorage/zora 2.5.1 → 2.5.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +6 -0
- package/README.md +593 -1
- package/dist/components/button/Button.d.ts +12 -0
- package/dist/components/button/Button.d.ts.map +1 -1
- package/dist/components/button/Button.js +12 -0
- package/dist/components/button/Button.js.map +1 -1
- package/dist/components/card/Card.d.ts +12 -0
- package/dist/components/card/Card.d.ts.map +1 -1
- package/dist/components/card/Card.js +12 -0
- package/dist/components/card/Card.js.map +1 -1
- package/dist/components/heading/Heading.d.ts +12 -0
- package/dist/components/heading/Heading.d.ts.map +1 -1
- package/dist/components/heading/Heading.js +12 -0
- package/dist/components/heading/Heading.js.map +1 -1
- package/dist/components/input/Input.d.ts +12 -0
- package/dist/components/input/Input.d.ts.map +1 -1
- package/dist/components/input/Input.js +12 -0
- package/dist/components/input/Input.js.map +1 -1
- package/dist/components/text/Text.d.ts +12 -0
- package/dist/components/text/Text.d.ts.map +1 -1
- package/dist/components/text/Text.js +12 -0
- package/dist/components/text/Text.js.map +1 -1
- package/dist/layout/app-shell/AppShell.d.ts +12 -0
- package/dist/layout/app-shell/AppShell.d.ts.map +1 -1
- package/dist/layout/app-shell/AppShell.js +12 -0
- package/dist/layout/app-shell/AppShell.js.map +1 -1
- package/dist/patterns/empty-state/EmptyState.d.ts +12 -0
- package/dist/patterns/empty-state/EmptyState.d.ts.map +1 -1
- package/dist/patterns/empty-state/EmptyState.js +12 -0
- package/dist/patterns/empty-state/EmptyState.js.map +1 -1
- package/dist/patterns/responsive-panel/ResponsivePanel.d.ts +12 -0
- package/dist/patterns/responsive-panel/ResponsivePanel.d.ts.map +1 -1
- package/dist/patterns/responsive-panel/ResponsivePanel.js +12 -0
- package/dist/patterns/responsive-panel/ResponsivePanel.js.map +1 -1
- package/dist/theme/ZoraProvider.d.ts +12 -0
- package/dist/theme/ZoraProvider.d.ts.map +1 -1
- package/dist/theme/ZoraProvider.js +12 -0
- package/dist/theme/ZoraProvider.js.map +1 -1
- package/package.json +1 -1
- package/src/components/button/Button.tsx +12 -0
- package/src/components/card/Card.tsx +12 -0
- package/src/components/heading/Heading.tsx +12 -0
- package/src/components/input/Input.tsx +12 -0
- package/src/components/text/Text.tsx +12 -0
- package/src/layout/app-shell/AppShell.tsx +12 -0
- package/src/patterns/empty-state/EmptyState.tsx +12 -0
- package/src/patterns/responsive-panel/ResponsivePanel.tsx +12 -0
- package/src/theme/ZoraProvider.tsx +12 -0
package/README.md
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
|
|
4
4
|
# @ankhorage/zora
|
|
5
5
|
|
|
6
|
-
         
|
|
7
7
|
|
|
8
8
|
ZORA — an opinionated UI kit for React Native + Web built on top of @ankhorage/surface.
|
|
9
9
|
|
|
@@ -1315,6 +1315,7 @@ graph TD
|
|
|
1315
1315
|
package__ankhorage_zora -.-> module_src_patterns_responsive_panel_ResponsivePanel_tsx
|
|
1316
1316
|
module_src_patterns_responsive_panel_ResponsivePanel_tsx --> module_src_components_drawer_index_ts
|
|
1317
1317
|
module_src_patterns_responsive_panel_ResponsivePanel_tsx --> module_src_components_modal_index_ts
|
|
1318
|
+
module_src_patterns_responsive_panel_ResponsivePanel_tsx --> module_src_internal_recipes_ts
|
|
1318
1319
|
module_src_patterns_responsive_panel_ResponsivePanel_tsx --> module_src_patterns_panel_index_ts
|
|
1319
1320
|
module_src_patterns_responsive_panel_ResponsivePanel_tsx --> module_src_patterns_responsive_panel_types_ts
|
|
1320
1321
|
module_src_patterns_responsive_panel_ResponsivePanel_tsx --> module_src_theme_withZoraThemeScope_tsx
|
|
@@ -1544,3 +1545,594 @@ graph TD
|
|
|
1544
1545
|
```
|
|
1545
1546
|
|
|
1546
1547
|
</details>
|
|
1548
|
+
|
|
1549
|
+
## Public API
|
|
1550
|
+
|
|
1551
|
+
### Components
|
|
1552
|
+
|
|
1553
|
+
<details>
|
|
1554
|
+
<summary>Button</summary>
|
|
1555
|
+
|
|
1556
|
+
Theme-aware action control for primary, secondary, destructive, and neutral actions.
|
|
1557
|
+
|
|
1558
|
+
Use `Button` for explicit user actions that should follow ZORA's semantic color,
|
|
1559
|
+
variant, and size recipes across React Native and React Native Web.
|
|
1560
|
+
|
|
1561
|
+
#### Basic action
|
|
1562
|
+
|
|
1563
|
+
```tsx
|
|
1564
|
+
<Button color="primary" variant="solid" onPress={save}>
|
|
1565
|
+
Save
|
|
1566
|
+
</Button>
|
|
1567
|
+
```
|
|
1568
|
+
|
|
1569
|
+
<details>
|
|
1570
|
+
<summary>Props</summary>
|
|
1571
|
+
|
|
1572
|
+
| Prop | Type | Required | Default | Description |
|
|
1573
|
+
| ------------------ | --------------------------------------------------------------------------------------------------------------------------------------------- | -------- | ------- | ----------- |
|
|
1574
|
+
| accessibilityRole | `AccessibilityRole \| undefined` | no | — | |
|
|
1575
|
+
| accessibilityState | `AccessibilityState \| undefined` | no | — | |
|
|
1576
|
+
| accessible | `boolean \| undefined` | no | — | |
|
|
1577
|
+
| alignSelf | `Responsive<"auto" \| import("/Users/a_rtiphishl_e/git/zora/node_modules/react-native/types/index").FlexAlignType \| undefined>` | no | — | |
|
|
1578
|
+
| bg | `Responsive<ColorValue> \| undefined` | no | — | |
|
|
1579
|
+
| borderColor | `Responsive<ColorValue> \| undefined` | no | — | |
|
|
1580
|
+
| borderWidth | `Responsive<number> \| undefined` | no | — | |
|
|
1581
|
+
| bottom | `Responsive<number> \| undefined` | no | — | |
|
|
1582
|
+
| children | `React.ReactNode` | no | — | |
|
|
1583
|
+
| color | `"primary" \| "secondary" \| "tertiary" \| "quaternary" \| "neutral" \| "success" \| "warning" \| "error" \| "info" \| "danger" \| undefined` | no | — | |
|
|
1584
|
+
| disabled | `boolean \| undefined` | no | — | |
|
|
1585
|
+
| flex | `Responsive<number> \| undefined` | no | — | |
|
|
1586
|
+
| flexBasis | `Responsive<string \| number> \| undefined` | no | — | |
|
|
1587
|
+
| flexGrow | `Responsive<number> \| undefined` | no | — | |
|
|
1588
|
+
| flexShrink | `Responsive<number> \| undefined` | no | — | |
|
|
1589
|
+
| fullWidth | `boolean \| undefined` | no | — | |
|
|
1590
|
+
| height | `Responsive<string \| number> \| undefined` | no | — | |
|
|
1591
|
+
| leadingIcon | `ButtonIconSpec \| undefined` | no | — | |
|
|
1592
|
+
| left | `Responsive<number> \| undefined` | no | — | |
|
|
1593
|
+
| loading | `boolean \| undefined` | no | — | |
|
|
1594
|
+
| m | `Responsive<SpaceValue> \| undefined` | no | — | |
|
|
1595
|
+
| maxHeight | `Responsive<string \| number> \| undefined` | no | — | |
|
|
1596
|
+
| maxWidth | `Responsive<string \| number> \| undefined` | no | — | |
|
|
1597
|
+
| mb | `Responsive<SpaceValue> \| undefined` | no | — | |
|
|
1598
|
+
| minHeight | `Responsive<string \| number> \| undefined` | no | — | |
|
|
1599
|
+
| minWidth | `Responsive<string \| number> \| undefined` | no | — | |
|
|
1600
|
+
| ml | `Responsive<SpaceValue> \| undefined` | no | — | |
|
|
1601
|
+
| mode | `ZoraThemeMode \| undefined` | no | — | |
|
|
1602
|
+
| mr | `Responsive<SpaceValue> \| undefined` | no | — | |
|
|
1603
|
+
| mt | `Responsive<SpaceValue> \| undefined` | no | — | |
|
|
1604
|
+
| mx | `Responsive<SpaceValue> \| undefined` | no | — | |
|
|
1605
|
+
| my | `Responsive<SpaceValue> \| undefined` | no | — | |
|
|
1606
|
+
| onLongPress | `((event: GestureResponderEvent) => void) \| undefined` | no | — | |
|
|
1607
|
+
| onPress | `((event: GestureResponderEvent) => void) \| undefined` | no | — | |
|
|
1608
|
+
| opacity | `Responsive<number> \| undefined` | no | — | |
|
|
1609
|
+
| overflow | `Responsive<"visible" \| "hidden" \| "scroll" \| undefined>` | no | — | |
|
|
1610
|
+
| p | `Responsive<SpaceValue> \| undefined` | no | — | |
|
|
1611
|
+
| pb | `Responsive<SpaceValue> \| undefined` | no | — | |
|
|
1612
|
+
| pl | `Responsive<SpaceValue> \| undefined` | no | — | |
|
|
1613
|
+
| position | `Responsive<"absolute" \| "relative" \| "static" \| undefined>` | no | — | |
|
|
1614
|
+
| pr | `Responsive<SpaceValue> \| undefined` | no | — | |
|
|
1615
|
+
| pt | `Responsive<SpaceValue> \| undefined` | no | — | |
|
|
1616
|
+
| px | `Responsive<SpaceValue> \| undefined` | no | — | |
|
|
1617
|
+
| py | `Responsive<SpaceValue> \| undefined` | no | — | |
|
|
1618
|
+
| radius | `Responsive<RadiusValue> \| undefined` | no | — | |
|
|
1619
|
+
| right | `Responsive<number> \| undefined` | no | — | |
|
|
1620
|
+
| size | `ZoraControlSize \| undefined` | no | — | |
|
|
1621
|
+
| testID | `string \| undefined` | no | — | |
|
|
1622
|
+
| themeId | `string \| undefined` | no | — | |
|
|
1623
|
+
| top | `Responsive<number> \| undefined` | no | — | |
|
|
1624
|
+
| trailingIcon | `ButtonIconSpec \| undefined` | no | — | |
|
|
1625
|
+
| variant | `ZoraButtonVariant \| undefined` | no | — | |
|
|
1626
|
+
| width | `Responsive<string \| number> \| undefined` | no | — | |
|
|
1627
|
+
| zIndex | `Responsive<number> \| undefined` | no | — | |
|
|
1628
|
+
|
|
1629
|
+
</details>
|
|
1630
|
+
|
|
1631
|
+
</details>
|
|
1632
|
+
|
|
1633
|
+
<details>
|
|
1634
|
+
<summary>Card</summary>
|
|
1635
|
+
|
|
1636
|
+
Structured content container with built-in heading, description, actions, and footer slots.
|
|
1637
|
+
|
|
1638
|
+
Use `Card` for reusable content blocks that should inherit ZORA spacing,
|
|
1639
|
+
radius, tone, and responsive header layout without hand-assembling primitives.
|
|
1640
|
+
|
|
1641
|
+
#### Content card
|
|
1642
|
+
|
|
1643
|
+
```tsx
|
|
1644
|
+
<Card title="Project" description="Latest activity">
|
|
1645
|
+
...
|
|
1646
|
+
</Card>
|
|
1647
|
+
```
|
|
1648
|
+
|
|
1649
|
+
<details>
|
|
1650
|
+
<summary>Props</summary>
|
|
1651
|
+
|
|
1652
|
+
| Prop | Type | Required | Default | Description |
|
|
1653
|
+
| ------------------ | -------------------------------------------------------------------------------------------------------------------------------- | -------- | ------- | ----------- |
|
|
1654
|
+
| accessibilityLabel | `string \| undefined` | no | — | |
|
|
1655
|
+
| accessibilityRole | `import("/Users/a_rtiphishl_e/git/zora/node_modules/react-native/types/index").AccessibilityRole \| undefined` | no | — | |
|
|
1656
|
+
| accessibilityState | `import("/Users/a_rtiphishl_e/git/zora/node_modules/react-native/types/index").AccessibilityState \| undefined` | no | — | |
|
|
1657
|
+
| accessible | `boolean \| undefined` | no | — | |
|
|
1658
|
+
| actions | `React.ReactNode` | no | — | |
|
|
1659
|
+
| alignSelf | `Responsive<"auto" \| import("/Users/a_rtiphishl_e/git/zora/node_modules/react-native/types/index").FlexAlignType \| undefined>` | no | — | |
|
|
1660
|
+
| bottom | `Responsive<number> \| undefined` | no | — | |
|
|
1661
|
+
| children | `React.ReactNode` | no | — | |
|
|
1662
|
+
| compact | `boolean \| undefined` | no | — | |
|
|
1663
|
+
| description | `React.ReactNode` | no | — | |
|
|
1664
|
+
| disabled | `boolean \| undefined` | no | — | |
|
|
1665
|
+
| eyebrow | `React.ReactNode` | no | — | |
|
|
1666
|
+
| flex | `Responsive<number> \| undefined` | no | — | |
|
|
1667
|
+
| flexBasis | `Responsive<string \| number> \| undefined` | no | — | |
|
|
1668
|
+
| flexGrow | `Responsive<number> \| undefined` | no | — | |
|
|
1669
|
+
| flexShrink | `Responsive<number> \| undefined` | no | — | |
|
|
1670
|
+
| footer | `React.ReactNode` | no | — | |
|
|
1671
|
+
| height | `Responsive<string \| number> \| undefined` | no | — | |
|
|
1672
|
+
| left | `Responsive<number> \| undefined` | no | — | |
|
|
1673
|
+
| m | `Responsive<SpaceValue> \| undefined` | no | — | |
|
|
1674
|
+
| maxHeight | `Responsive<string \| number> \| undefined` | no | — | |
|
|
1675
|
+
| maxWidth | `Responsive<string \| number> \| undefined` | no | — | |
|
|
1676
|
+
| mb | `Responsive<SpaceValue> \| undefined` | no | — | |
|
|
1677
|
+
| minHeight | `Responsive<string \| number> \| undefined` | no | — | |
|
|
1678
|
+
| minWidth | `Responsive<string \| number> \| undefined` | no | — | |
|
|
1679
|
+
| ml | `Responsive<SpaceValue> \| undefined` | no | — | |
|
|
1680
|
+
| mode | `ZoraThemeMode \| undefined` | no | — | |
|
|
1681
|
+
| mr | `Responsive<SpaceValue> \| undefined` | no | — | |
|
|
1682
|
+
| mt | `Responsive<SpaceValue> \| undefined` | no | — | |
|
|
1683
|
+
| mx | `Responsive<SpaceValue> \| undefined` | no | — | |
|
|
1684
|
+
| my | `Responsive<SpaceValue> \| undefined` | no | — | |
|
|
1685
|
+
| onPress | `(() => void) \| undefined` | no | — | |
|
|
1686
|
+
| opacity | `Responsive<number> \| undefined` | no | — | |
|
|
1687
|
+
| overflow | `Responsive<"visible" \| "hidden" \| "scroll" \| undefined>` | no | — | |
|
|
1688
|
+
| pb | `Responsive<SpaceValue> \| undefined` | no | — | |
|
|
1689
|
+
| pl | `Responsive<SpaceValue> \| undefined` | no | — | |
|
|
1690
|
+
| pointerEvents | `"none" \| "auto" \| "box-none" \| "box-only" \| undefined` | no | — | |
|
|
1691
|
+
| position | `Responsive<"absolute" \| "relative" \| "static" \| undefined>` | no | — | |
|
|
1692
|
+
| pr | `Responsive<SpaceValue> \| undefined` | no | — | |
|
|
1693
|
+
| pt | `Responsive<SpaceValue> \| undefined` | no | — | |
|
|
1694
|
+
| px | `Responsive<SpaceValue> \| undefined` | no | — | |
|
|
1695
|
+
| py | `Responsive<SpaceValue> \| undefined` | no | — | |
|
|
1696
|
+
| right | `Responsive<number> \| undefined` | no | — | |
|
|
1697
|
+
| style | `StyleProp<ViewStyle>` | no | — | |
|
|
1698
|
+
| testID | `string \| undefined` | no | — | |
|
|
1699
|
+
| themeId | `string \| undefined` | no | — | |
|
|
1700
|
+
| title | `React.ReactNode` | no | — | |
|
|
1701
|
+
| tone | `ZoraCardTone \| undefined` | no | — | |
|
|
1702
|
+
| top | `Responsive<number> \| undefined` | no | — | |
|
|
1703
|
+
| width | `Responsive<string \| number> \| undefined` | no | — | |
|
|
1704
|
+
| zIndex | `Responsive<number> \| undefined` | no | — | |
|
|
1705
|
+
|
|
1706
|
+
</details>
|
|
1707
|
+
|
|
1708
|
+
</details>
|
|
1709
|
+
|
|
1710
|
+
<details>
|
|
1711
|
+
<summary>Heading</summary>
|
|
1712
|
+
|
|
1713
|
+
Structured title primitive for accessible page, section, and card headings.
|
|
1714
|
+
|
|
1715
|
+
`Heading` gives consumers a ZORA-owned title API with semantic levels,
|
|
1716
|
+
responsive sizes, and theme-aware emphasis while preserving header semantics.
|
|
1717
|
+
|
|
1718
|
+
#### Section title
|
|
1719
|
+
|
|
1720
|
+
```tsx
|
|
1721
|
+
<Heading level={2} size="xl">
|
|
1722
|
+
Account settings
|
|
1723
|
+
</Heading>
|
|
1724
|
+
```
|
|
1725
|
+
|
|
1726
|
+
<details>
|
|
1727
|
+
<summary>Props</summary>
|
|
1728
|
+
|
|
1729
|
+
| Prop | Type | Required | Default | Description |
|
|
1730
|
+
| ------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | ------- | ----------- |
|
|
1731
|
+
| accessibilityHint | `string \| undefined` | no | — | |
|
|
1732
|
+
| accessibilityLabel | `string \| undefined` | no | — | |
|
|
1733
|
+
| accessibilityRole | `AccessibilityRole \| undefined` | no | — | |
|
|
1734
|
+
| align | `Responsive<HeadingAlign> \| undefined` | no | — | |
|
|
1735
|
+
| children | `React.ReactNode` | no | — | |
|
|
1736
|
+
| color | `Responsive<"primary" \| "secondary" \| "tertiary" \| "quaternary" \| "neutral" \| "success" \| "warning" \| "error" \| "info" \| "danger"> \| undefined` | no | — | |
|
|
1737
|
+
| ellipsizeMode | `"head" \| "middle" \| "tail" \| "clip" \| undefined` | no | — | |
|
|
1738
|
+
| emphasis | `Responsive<"default" \| "subtle" \| "muted" \| "inverse"> \| undefined` | no | — | |
|
|
1739
|
+
| i18nKey | `string \| undefined` | no | — | |
|
|
1740
|
+
| italic | `boolean \| undefined` | no | — | |
|
|
1741
|
+
| level | `HeadingLevel \| undefined` | no | — | |
|
|
1742
|
+
| mode | `ZoraThemeMode \| undefined` | no | — | |
|
|
1743
|
+
| nativeID | `string \| undefined` | no | — | |
|
|
1744
|
+
| numberOfLines | `number \| undefined` | no | — | |
|
|
1745
|
+
| selectable | `boolean \| undefined` | no | — | |
|
|
1746
|
+
| size | `Responsive<HeadingSize> \| undefined` | no | — | |
|
|
1747
|
+
| testID | `string \| undefined` | no | — | |
|
|
1748
|
+
| text | `string \| undefined` | no | — | |
|
|
1749
|
+
| themeId | `string \| undefined` | no | — | |
|
|
1750
|
+
| weight | `Responsive<HeadingWeight> \| undefined` | no | — | |
|
|
1751
|
+
|
|
1752
|
+
</details>
|
|
1753
|
+
|
|
1754
|
+
</details>
|
|
1755
|
+
|
|
1756
|
+
<details>
|
|
1757
|
+
<summary>Input</summary>
|
|
1758
|
+
|
|
1759
|
+
Theme-aware text input with semantic sizing and optional leading/trailing icon slots.
|
|
1760
|
+
|
|
1761
|
+
Use `Input` for single-line form controls that need ZORA styling, disabled/read-only
|
|
1762
|
+
handling, and accessible trailing actions without dropping into Surface directly.
|
|
1763
|
+
|
|
1764
|
+
#### Search input
|
|
1765
|
+
|
|
1766
|
+
```tsx
|
|
1767
|
+
<Input placeholder="Search" leadingIcon={{ name: 'search-outline' }} />
|
|
1768
|
+
```
|
|
1769
|
+
|
|
1770
|
+
<details>
|
|
1771
|
+
<summary>Props</summary>
|
|
1772
|
+
|
|
1773
|
+
| Prop | Type | Required | Default | Description |
|
|
1774
|
+
| -------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | ------- | ----------- |
|
|
1775
|
+
| accessibilityActions | `readonly Readonly<{ name: AccessibilityActionName \| string; label?: string \| undefined; }>[] \| undefined` | no | — | |
|
|
1776
|
+
| accessibilityElementsHidden | `boolean \| undefined` | no | — | |
|
|
1777
|
+
| accessibilityHint | `string \| undefined` | no | — | |
|
|
1778
|
+
| accessibilityIgnoresInvertColors | `boolean \| undefined` | no | — | |
|
|
1779
|
+
| accessibilityLabel | `string \| undefined` | no | — | |
|
|
1780
|
+
| accessibilityLabelledBy | `string \| string[] \| undefined` | no | — | |
|
|
1781
|
+
| accessibilityLanguage | `string \| undefined` | no | — | |
|
|
1782
|
+
| accessibilityLargeContentTitle | `string \| undefined` | no | — | |
|
|
1783
|
+
| accessibilityLiveRegion | `"none" \| "polite" \| "assertive" \| undefined` | no | — | |
|
|
1784
|
+
| accessibilityRespondsToUserInteraction | `boolean \| undefined` | no | — | |
|
|
1785
|
+
| accessibilityRole | `AccessibilityRole \| undefined` | no | — | |
|
|
1786
|
+
| accessibilityShowsLargeContentViewer | `boolean \| undefined` | no | — | |
|
|
1787
|
+
| accessibilityState | `AccessibilityState \| undefined` | no | — | |
|
|
1788
|
+
| accessibilityValue | `AccessibilityValue \| undefined` | no | — | |
|
|
1789
|
+
| accessibilityViewIsModal | `boolean \| undefined` | no | — | |
|
|
1790
|
+
| accessible | `boolean \| undefined` | no | — | |
|
|
1791
|
+
| allowFontScaling | `boolean \| undefined` | no | — | |
|
|
1792
|
+
| aria-busy | `boolean \| undefined` | no | — | |
|
|
1793
|
+
| aria-checked | `boolean \| "mixed" \| undefined` | no | — | |
|
|
1794
|
+
| aria-disabled | `boolean \| undefined` | no | — | |
|
|
1795
|
+
| aria-expanded | `boolean \| undefined` | no | — | |
|
|
1796
|
+
| aria-hidden | `boolean \| undefined` | no | — | |
|
|
1797
|
+
| aria-label | `string \| undefined` | no | — | |
|
|
1798
|
+
| aria-labelledby | `string \| undefined` | no | — | |
|
|
1799
|
+
| aria-live | `"off" \| "polite" \| "assertive" \| undefined` | no | — | |
|
|
1800
|
+
| aria-modal | `boolean \| undefined` | no | — | |
|
|
1801
|
+
| aria-selected | `boolean \| undefined` | no | — | |
|
|
1802
|
+
| aria-valuemax | `number \| undefined` | no | — | |
|
|
1803
|
+
| aria-valuemin | `number \| undefined` | no | — | |
|
|
1804
|
+
| aria-valuenow | `number \| undefined` | no | — | |
|
|
1805
|
+
| aria-valuetext | `string \| undefined` | no | — | |
|
|
1806
|
+
| autoCapitalize | `"none" \| "sentences" \| "words" \| "characters" \| undefined` | no | — | |
|
|
1807
|
+
| autoComplete | `"email" \| "password" \| "tel" \| "url" \| "additional-name" \| "address-line1" \| "address-line2" \| "birthdate-day" \| "birthdate-full" \| "birthdate-month" \| "birthdate-year" \| "cc-csc" \| "cc-exp" \| "cc-exp-day" \| "cc-exp-month" \| "cc-exp-year" \| "cc-number" \| "cc-name" \| "cc-given-name" \| "cc-middle-name" \| "cc-family-name" \| "cc-type" \| "country" \| "current-password" \| "family-name" \| "gender" \| "given-name" \| "honorific-prefix" \| "honorific-suffix" \| "name" \| "name-family" \| "name-given" \| "name-middle" \| "name-middle-initial" \| "name-prefix" \| "name-suffix" \| "new-password" \| "nickname" \| "one-time-code" \| "organization" \| "organization-title" \| "password-new" \| "postal-address" \| "postal-address-country" \| "postal-address-extended" \| "postal-address-extended-postal-code" \| "postal-address-locality" \| "postal-address-region" \| "postal-code" \| "street-address" \| "sms-otp" \| "tel-country-code" \| "tel-national" \| "tel-device" \| "username" \| "username-new" \| "off" \| undefined` | no | — | |
|
|
1808
|
+
| autoCorrect | `boolean \| undefined` | no | — | |
|
|
1809
|
+
| autoFocus | `boolean \| undefined` | no | — | |
|
|
1810
|
+
| blurOnSubmit | `boolean \| undefined` | no | — | |
|
|
1811
|
+
| caretHidden | `boolean \| undefined` | no | — | |
|
|
1812
|
+
| children | `React.ReactNode` | no | — | |
|
|
1813
|
+
| clearButtonMode | `"never" \| "while-editing" \| "unless-editing" \| "always" \| undefined` | no | — | |
|
|
1814
|
+
| clearTextOnFocus | `boolean \| undefined` | no | — | |
|
|
1815
|
+
| collapsable | `boolean \| undefined` | no | — | |
|
|
1816
|
+
| collapsableChildren | `boolean \| undefined` | no | — | |
|
|
1817
|
+
| contextMenuHidden | `boolean \| undefined` | no | — | |
|
|
1818
|
+
| cursorColor | `ColorValue \| null \| undefined` | no | — | |
|
|
1819
|
+
| dataDetectorTypes | `DataDetectorTypes \| DataDetectorTypes[] \| undefined` | no | — | |
|
|
1820
|
+
| defaultValue | `string \| undefined` | no | — | |
|
|
1821
|
+
| disabled | `boolean \| undefined` | no | — | |
|
|
1822
|
+
| disableFullscreenUI | `boolean \| undefined` | no | — | |
|
|
1823
|
+
| disableKeyboardShortcuts | `boolean \| undefined` | no | — | |
|
|
1824
|
+
| enablesReturnKeyAutomatically | `boolean \| undefined` | no | — | |
|
|
1825
|
+
| enterKeyHint | `EnterKeyHintTypeOptions \| undefined` | no | — | |
|
|
1826
|
+
| focusable | `boolean \| undefined` | no | — | |
|
|
1827
|
+
| hasTVPreferredFocus | `boolean \| undefined` | no | — | |
|
|
1828
|
+
| hitSlop | `number \| Insets \| null \| undefined` | no | — | |
|
|
1829
|
+
| id | `string \| undefined` | no | — | |
|
|
1830
|
+
| importantForAccessibility | `"auto" \| "yes" \| "no" \| "no-hide-descendants" \| undefined` | no | — | |
|
|
1831
|
+
| importantForAutofill | `"auto" \| "yes" \| "no" \| "noExcludeDescendants" \| "yesExcludeDescendants" \| undefined` | no | — | |
|
|
1832
|
+
| inlineImageLeft | `string \| undefined` | no | — | |
|
|
1833
|
+
| inlineImagePadding | `number \| undefined` | no | — | |
|
|
1834
|
+
| inputAccessoryViewButtonLabel | `string \| undefined` | no | — | |
|
|
1835
|
+
| inputAccessoryViewID | `string \| undefined` | no | — | |
|
|
1836
|
+
| inputMode | `InputModeOptions \| undefined` | no | — | |
|
|
1837
|
+
| invalid | `boolean \| undefined` | no | — | |
|
|
1838
|
+
| isTVSelectable | `boolean \| undefined` | no | — | |
|
|
1839
|
+
| keyboardAppearance | `"light" \| "dark" \| "default" \| undefined` | no | — | |
|
|
1840
|
+
| keyboardType | `KeyboardTypeOptions \| undefined` | no | — | |
|
|
1841
|
+
| leadingIcon | `Surface.ButtonIconSpec \| undefined` | no | — | |
|
|
1842
|
+
| lineBreakModeIOS | `"head" \| "middle" \| "tail" \| "clip" \| "wordWrapping" \| "char" \| undefined` | no | — | |
|
|
1843
|
+
| lineBreakStrategyIOS | `"none" \| "standard" \| "hangul-word" \| "push-out" \| undefined` | no | — | |
|
|
1844
|
+
| maxFontSizeMultiplier | `number \| null \| undefined` | no | — | |
|
|
1845
|
+
| maxLength | `number \| undefined` | no | — | |
|
|
1846
|
+
| mode | `ZoraThemeMode \| undefined` | no | — | |
|
|
1847
|
+
| multiline | `boolean \| undefined` | no | — | |
|
|
1848
|
+
| nativeID | `string \| undefined` | no | — | |
|
|
1849
|
+
| needsOffscreenAlphaCompositing | `boolean \| undefined` | no | — | |
|
|
1850
|
+
| numberOfLines | `number \| undefined` | no | — | |
|
|
1851
|
+
| onAccessibilityAction | `((event: AccessibilityActionEvent) => void) \| undefined` | no | — | |
|
|
1852
|
+
| onAccessibilityEscape | `(() => void) \| undefined` | no | — | |
|
|
1853
|
+
| onAccessibilityTap | `(() => void) \| undefined` | no | — | |
|
|
1854
|
+
| onBlur | `((e: BlurEvent) => void) \| undefined` | no | — | |
|
|
1855
|
+
| onChange | `((e: TextInputChangeEvent) => void) \| undefined` | no | — | |
|
|
1856
|
+
| onChangeText | `((text: string) => void) \| undefined` | no | — | |
|
|
1857
|
+
| onContentSizeChange | `((e: TextInputContentSizeChangeEvent) => void) \| undefined` | no | — | |
|
|
1858
|
+
| onEndEditing | `((e: TextInputEndEditingEvent) => void) \| undefined` | no | — | |
|
|
1859
|
+
| onFocus | `((e: FocusEvent) => void) \| undefined` | no | — | |
|
|
1860
|
+
| onKeyPress | `((e: TextInputKeyPressEvent) => void) \| undefined` | no | — | |
|
|
1861
|
+
| onLayout | `((event: LayoutChangeEvent) => void) \| undefined` | no | — | |
|
|
1862
|
+
| onMagicTap | `(() => void) \| undefined` | no | — | |
|
|
1863
|
+
| onMoveShouldSetResponder | `((event: GestureResponderEvent) => boolean) \| undefined` | no | — | |
|
|
1864
|
+
| onMoveShouldSetResponderCapture | `((event: GestureResponderEvent) => boolean) \| undefined` | no | — | |
|
|
1865
|
+
| onPointerCancel | `((event: PointerEvent) => void) \| undefined` | no | — | |
|
|
1866
|
+
| onPointerCancelCapture | `((event: PointerEvent) => void) \| undefined` | no | — | |
|
|
1867
|
+
| onPointerDown | `((event: PointerEvent) => void) \| undefined` | no | — | |
|
|
1868
|
+
| onPointerDownCapture | `((event: PointerEvent) => void) \| undefined` | no | — | |
|
|
1869
|
+
| onPointerEnter | `((event: PointerEvent) => void) \| undefined` | no | — | |
|
|
1870
|
+
| onPointerEnterCapture | `((event: PointerEvent) => void) \| undefined` | no | — | |
|
|
1871
|
+
| onPointerLeave | `((event: PointerEvent) => void) \| undefined` | no | — | |
|
|
1872
|
+
| onPointerLeaveCapture | `((event: PointerEvent) => void) \| undefined` | no | — | |
|
|
1873
|
+
| onPointerMove | `((event: PointerEvent) => void) \| undefined` | no | — | |
|
|
1874
|
+
| onPointerMoveCapture | `((event: PointerEvent) => void) \| undefined` | no | — | |
|
|
1875
|
+
| onPointerUp | `((event: PointerEvent) => void) \| undefined` | no | — | |
|
|
1876
|
+
| onPointerUpCapture | `((event: PointerEvent) => void) \| undefined` | no | — | |
|
|
1877
|
+
| onPress | `((e: NativeSyntheticEvent<NativeTouchEvent>) => void) \| undefined` | no | — | |
|
|
1878
|
+
| onPressIn | `((e: NativeSyntheticEvent<NativeTouchEvent>) => void) \| undefined` | no | — | |
|
|
1879
|
+
| onPressOut | `((e: NativeSyntheticEvent<NativeTouchEvent>) => void) \| undefined` | no | — | |
|
|
1880
|
+
| onResponderEnd | `((event: GestureResponderEvent) => void) \| undefined` | no | — | |
|
|
1881
|
+
| onResponderGrant | `((event: GestureResponderEvent) => void) \| undefined` | no | — | |
|
|
1882
|
+
| onResponderMove | `((event: GestureResponderEvent) => void) \| undefined` | no | — | |
|
|
1883
|
+
| onResponderReject | `((event: GestureResponderEvent) => void) \| undefined` | no | — | |
|
|
1884
|
+
| onResponderRelease | `((event: GestureResponderEvent) => void) \| undefined` | no | — | |
|
|
1885
|
+
| onResponderStart | `((event: GestureResponderEvent) => void) \| undefined` | no | — | |
|
|
1886
|
+
| onResponderTerminate | `((event: GestureResponderEvent) => void) \| undefined` | no | — | |
|
|
1887
|
+
| onResponderTerminationRequest | `((event: GestureResponderEvent) => boolean) \| undefined` | no | — | |
|
|
1888
|
+
| onScroll | `((e: TextInputScrollEvent) => void) \| undefined` | no | — | |
|
|
1889
|
+
| onSelectionChange | `((e: TextInputSelectionChangeEvent) => void) \| undefined` | no | — | |
|
|
1890
|
+
| onStartShouldSetResponder | `((event: GestureResponderEvent) => boolean) \| undefined` | no | — | |
|
|
1891
|
+
| onStartShouldSetResponderCapture | `((event: GestureResponderEvent) => boolean) \| undefined` | no | — | |
|
|
1892
|
+
| onSubmitEditing | `((e: TextInputSubmitEditingEvent) => void) \| undefined` | no | — | |
|
|
1893
|
+
| onTouchCancel | `((event: GestureResponderEvent) => void) \| undefined` | no | — | |
|
|
1894
|
+
| onTouchEnd | `((event: GestureResponderEvent) => void) \| undefined` | no | — | |
|
|
1895
|
+
| onTouchEndCapture | `((event: GestureResponderEvent) => void) \| undefined` | no | — | |
|
|
1896
|
+
| onTouchMove | `((event: GestureResponderEvent) => void) \| undefined` | no | — | |
|
|
1897
|
+
| onTouchStart | `((event: GestureResponderEvent) => void) \| undefined` | no | — | |
|
|
1898
|
+
| passwordRules | `string \| null \| undefined` | no | — | |
|
|
1899
|
+
| placeholder | `string \| undefined` | no | — | |
|
|
1900
|
+
| pointerEvents | `"none" \| "auto" \| "box-none" \| "box-only" \| undefined` | no | — | |
|
|
1901
|
+
| readOnly | `boolean \| undefined` | no | — | |
|
|
1902
|
+
| rejectResponderTermination | `boolean \| null \| undefined` | no | — | |
|
|
1903
|
+
| removeClippedSubviews | `boolean \| undefined` | no | — | |
|
|
1904
|
+
| renderToHardwareTextureAndroid | `boolean \| undefined` | no | — | |
|
|
1905
|
+
| returnKeyLabel | `string \| undefined` | no | — | |
|
|
1906
|
+
| returnKeyType | `ReturnKeyTypeOptions \| undefined` | no | — | |
|
|
1907
|
+
| role | `Role \| undefined` | no | — | |
|
|
1908
|
+
| screenReaderFocusable | `boolean \| undefined` | no | — | |
|
|
1909
|
+
| scrollEnabled | `boolean \| undefined` | no | — | |
|
|
1910
|
+
| secureTextEntry | `boolean \| undefined` | no | — | |
|
|
1911
|
+
| selection | `{ start: number; end?: number \| undefined; } \| undefined` | no | — | |
|
|
1912
|
+
| selectionColor | `ColorValue \| undefined` | no | — | |
|
|
1913
|
+
| selectionHandleColor | `ColorValue \| null \| undefined` | no | — | |
|
|
1914
|
+
| selectionState | `DocumentSelectionState \| undefined` | no | — | |
|
|
1915
|
+
| selectTextOnFocus | `boolean \| undefined` | no | — | |
|
|
1916
|
+
| shouldRasterizeIOS | `boolean \| undefined` | no | — | |
|
|
1917
|
+
| showSoftInputOnFocus | `boolean \| undefined` | no | — | |
|
|
1918
|
+
| size | `ZoraControlSize \| undefined` | no | — | |
|
|
1919
|
+
| smartInsertDelete | `boolean \| undefined` | no | — | |
|
|
1920
|
+
| spellCheck | `boolean \| undefined` | no | — | |
|
|
1921
|
+
| style | `StyleProp<TextStyle>` | no | — | |
|
|
1922
|
+
| submitBehavior | `SubmitBehavior \| undefined` | no | — | |
|
|
1923
|
+
| tabIndex | `0 \| -1 \| undefined` | no | — | |
|
|
1924
|
+
| testID | `string \| undefined` | no | — | |
|
|
1925
|
+
| textAlign | `"left" \| "right" \| "center" \| undefined` | no | — | |
|
|
1926
|
+
| textAlignVertical | `"top" \| "bottom" \| "auto" \| "center" \| undefined` | no | — | |
|
|
1927
|
+
| textBreakStrategy | `"simple" \| "highQuality" \| "balanced" \| undefined` | no | — | |
|
|
1928
|
+
| textContentType | `"none" \| "password" \| "name" \| "nickname" \| "username" \| "URL" \| "addressCity" \| "addressCityAndState" \| "addressState" \| "countryName" \| "creditCardNumber" \| "creditCardExpiration" \| "creditCardExpirationMonth" \| "creditCardExpirationYear" \| "creditCardSecurityCode" \| "creditCardType" \| "creditCardName" \| "creditCardGivenName" \| "creditCardMiddleName" \| "creditCardFamilyName" \| "emailAddress" \| "familyName" \| "fullStreetAddress" \| "givenName" \| "jobTitle" \| "location" \| "middleName" \| "namePrefix" \| "nameSuffix" \| "organizationName" \| "postalCode" \| "streetAddressLine1" \| "streetAddressLine2" \| "sublocality" \| "telephoneNumber" \| "newPassword" \| "oneTimeCode" \| "birthdate" \| "birthdateDay" \| "birthdateMonth" \| "birthdateYear" \| "cellularEID" \| "cellularIMEI" \| "dateTime" \| "flightNumber" \| "shipmentTrackingNumber" \| undefined` | no | — | |
|
|
1929
|
+
| themeId | `string \| undefined` | no | — | |
|
|
1930
|
+
| trailingAction | `InputTrailingAction \| undefined` | no | — | |
|
|
1931
|
+
| trailingIcon | `Surface.ButtonIconSpec \| undefined` | no | — | |
|
|
1932
|
+
| tvParallaxMagnification | `number \| undefined` | no | — | |
|
|
1933
|
+
| tvParallaxShiftDistanceX | `number \| undefined` | no | — | |
|
|
1934
|
+
| tvParallaxShiftDistanceY | `number \| undefined` | no | — | |
|
|
1935
|
+
| tvParallaxTiltAngle | `number \| undefined` | no | — | |
|
|
1936
|
+
| underlineColorAndroid | `ColorValue \| undefined` | no | — | |
|
|
1937
|
+
| value | `string \| undefined` | no | — | |
|
|
1938
|
+
| verticalAlign | `"top" \| "bottom" \| "auto" \| "middle" \| undefined` | no | — | |
|
|
1939
|
+
|
|
1940
|
+
</details>
|
|
1941
|
+
|
|
1942
|
+
</details>
|
|
1943
|
+
|
|
1944
|
+
<details>
|
|
1945
|
+
<summary>Text</summary>
|
|
1946
|
+
|
|
1947
|
+
Structured copy primitive for theme-aware app text.
|
|
1948
|
+
|
|
1949
|
+
`Text` owns normal body, caption, label, code, and supporting-copy variants so
|
|
1950
|
+
consumers do not need to import lower-level Surface typography directly.
|
|
1951
|
+
|
|
1952
|
+
#### Muted supporting copy
|
|
1953
|
+
|
|
1954
|
+
```tsx
|
|
1955
|
+
<Text variant="bodySmall" emphasis="muted">
|
|
1956
|
+
Updated just now
|
|
1957
|
+
</Text>
|
|
1958
|
+
```
|
|
1959
|
+
|
|
1960
|
+
<details>
|
|
1961
|
+
<summary>Props</summary>
|
|
1962
|
+
|
|
1963
|
+
| Prop | Type | Required | Default | Description |
|
|
1964
|
+
| ------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | ------- | ----------- |
|
|
1965
|
+
| accessibilityHint | `string \| undefined` | no | — | |
|
|
1966
|
+
| accessibilityLabel | `string \| undefined` | no | — | |
|
|
1967
|
+
| accessibilityRole | `AccessibilityRole \| undefined` | no | — | |
|
|
1968
|
+
| align | `Responsive<TextAlign> \| undefined` | no | — | |
|
|
1969
|
+
| children | `React.ReactNode` | no | — | |
|
|
1970
|
+
| color | `Responsive<"primary" \| "secondary" \| "tertiary" \| "quaternary" \| "neutral" \| "success" \| "warning" \| "error" \| "info" \| "danger"> \| undefined` | no | — | |
|
|
1971
|
+
| ellipsizeMode | `"head" \| "middle" \| "tail" \| "clip" \| undefined` | no | — | |
|
|
1972
|
+
| emphasis | `Responsive<"default" \| "subtle" \| "muted" \| "inverse"> \| undefined` | no | — | |
|
|
1973
|
+
| i18nKey | `string \| undefined` | no | — | |
|
|
1974
|
+
| italic | `boolean \| undefined` | no | — | |
|
|
1975
|
+
| mode | `ZoraThemeMode \| undefined` | no | — | |
|
|
1976
|
+
| nativeID | `string \| undefined` | no | — | |
|
|
1977
|
+
| numberOfLines | `number \| undefined` | no | — | |
|
|
1978
|
+
| selectable | `boolean \| undefined` | no | — | |
|
|
1979
|
+
| testID | `string \| undefined` | no | — | |
|
|
1980
|
+
| text | `string \| undefined` | no | — | |
|
|
1981
|
+
| themeId | `string \| undefined` | no | — | |
|
|
1982
|
+
| variant | `Responsive<TextVariant> \| undefined` | no | — | |
|
|
1983
|
+
| weight | `Responsive<TextWeight> \| undefined` | no | — | |
|
|
1984
|
+
|
|
1985
|
+
</details>
|
|
1986
|
+
|
|
1987
|
+
</details>
|
|
1988
|
+
|
|
1989
|
+
### Patterns
|
|
1990
|
+
|
|
1991
|
+
<details>
|
|
1992
|
+
<summary>EmptyState</summary>
|
|
1993
|
+
|
|
1994
|
+
Reusable fallback state for empty lists, missing data, or first-run experiences.
|
|
1995
|
+
|
|
1996
|
+
`EmptyState` combines concise copy with optional primary and secondary actions
|
|
1997
|
+
so apps can guide users without custom card and button wiring.
|
|
1998
|
+
|
|
1999
|
+
#### Empty project list
|
|
2000
|
+
|
|
2001
|
+
```tsx
|
|
2002
|
+
<EmptyState title="No projects yet" primaryAction={{ label: 'Create project', onPress }} />
|
|
2003
|
+
```
|
|
2004
|
+
|
|
2005
|
+
<details>
|
|
2006
|
+
<summary>Props</summary>
|
|
2007
|
+
|
|
2008
|
+
| Prop | Type | Required | Default | Description |
|
|
2009
|
+
| --------------- | ------------------------------- | -------- | ------- | ----------- |
|
|
2010
|
+
| description | `React.ReactNode` | no | — | |
|
|
2011
|
+
| eyebrow | `React.ReactNode` | no | — | |
|
|
2012
|
+
| footer | `React.ReactNode` | no | — | |
|
|
2013
|
+
| mode | `ZoraThemeMode \| undefined` | no | — | |
|
|
2014
|
+
| primaryAction | `EmptyStateAction \| undefined` | no | — | |
|
|
2015
|
+
| secondaryAction | `EmptyStateAction \| undefined` | no | — | |
|
|
2016
|
+
| testID | `string \| undefined` | no | — | |
|
|
2017
|
+
| themeId | `string \| undefined` | no | — | |
|
|
2018
|
+
| title | `React.ReactNode` | yes | — | |
|
|
2019
|
+
|
|
2020
|
+
</details>
|
|
2021
|
+
|
|
2022
|
+
</details>
|
|
2023
|
+
|
|
2024
|
+
<details>
|
|
2025
|
+
<summary>ResponsivePanel</summary>
|
|
2026
|
+
|
|
2027
|
+
Adaptive secondary surface that can render as an inline panel, drawer, or modal.
|
|
2028
|
+
|
|
2029
|
+
Use `ResponsivePanel` for tool panes and admin/detail flows that need the same
|
|
2030
|
+
content to work across compact mobile screens and wider desktop layouts.
|
|
2031
|
+
|
|
2032
|
+
#### Scrollable wide panel
|
|
2033
|
+
|
|
2034
|
+
```tsx
|
|
2035
|
+
<ResponsivePanel open title="APIs" size="wide" scroll="content">
|
|
2036
|
+
...
|
|
2037
|
+
</ResponsivePanel>
|
|
2038
|
+
```
|
|
2039
|
+
|
|
2040
|
+
<details>
|
|
2041
|
+
<summary>Props</summary>
|
|
2042
|
+
|
|
2043
|
+
| Prop | Type | Required | Default | Description |
|
|
2044
|
+
| ------------ | ----------------------------------------- | -------- | ------- | ----------- |
|
|
2045
|
+
| actions | `React.ReactNode` | no | — | |
|
|
2046
|
+
| children | `React.ReactNode` | no | — | |
|
|
2047
|
+
| compact | `boolean \| undefined` | no | — | |
|
|
2048
|
+
| description | `React.ReactNode` | no | — | |
|
|
2049
|
+
| desktopMode | `ResponsivePanelDesktopMode \| undefined` | no | — | |
|
|
2050
|
+
| footer | `React.ReactNode` | no | — | |
|
|
2051
|
+
| mobileMode | `ResponsivePanelMobileMode \| undefined` | no | — | |
|
|
2052
|
+
| mode | `ZoraThemeMode \| undefined` | no | — | |
|
|
2053
|
+
| onOpenChange | `(open: boolean) => void` | yes | — | |
|
|
2054
|
+
| open | `boolean` | yes | — | |
|
|
2055
|
+
| scroll | `ResponsivePanelScroll \| undefined` | no | — | |
|
|
2056
|
+
| side | `ResponsivePanelSide \| undefined` | no | — | |
|
|
2057
|
+
| size | `ResponsivePanelSize \| undefined` | no | — | |
|
|
2058
|
+
| testID | `string \| undefined` | no | — | |
|
|
2059
|
+
| themeId | `string \| undefined` | no | — | |
|
|
2060
|
+
| title | `React.ReactNode` | no | — | |
|
|
2061
|
+
|
|
2062
|
+
</details>
|
|
2063
|
+
|
|
2064
|
+
</details>
|
|
2065
|
+
|
|
2066
|
+
### Layout
|
|
2067
|
+
|
|
2068
|
+
<details>
|
|
2069
|
+
<summary>AppShell</summary>
|
|
2070
|
+
|
|
2071
|
+
Root application shell with stable header, content, footer, and overlay slots.
|
|
2072
|
+
|
|
2073
|
+
`AppShell` provides the top-level layout frame for cross-platform apps while
|
|
2074
|
+
leaving navigation, toolbars, and overlays composable through explicit slots.
|
|
2075
|
+
|
|
2076
|
+
#### App frame
|
|
2077
|
+
|
|
2078
|
+
```tsx
|
|
2079
|
+
<AppShell header={<AppBar title="Dashboard" />}>...</AppShell>
|
|
2080
|
+
```
|
|
2081
|
+
|
|
2082
|
+
<details>
|
|
2083
|
+
<summary>Props</summary>
|
|
2084
|
+
|
|
2085
|
+
| Prop | Type | Required | Default | Description |
|
|
2086
|
+
| -------- | ---------------------------- | -------- | ------- | ----------- |
|
|
2087
|
+
| children | `React.ReactNode` | no | — | |
|
|
2088
|
+
| footer | `React.ReactNode` | no | — | |
|
|
2089
|
+
| header | `React.ReactNode` | no | — | |
|
|
2090
|
+
| mode | `ZoraThemeMode \| undefined` | no | — | |
|
|
2091
|
+
| overlay | `React.ReactNode` | no | — | |
|
|
2092
|
+
| testID | `string \| undefined` | no | — | |
|
|
2093
|
+
| themeId | `string \| undefined` | no | — | |
|
|
2094
|
+
|
|
2095
|
+
</details>
|
|
2096
|
+
|
|
2097
|
+
</details>
|
|
2098
|
+
|
|
2099
|
+
### Utilities
|
|
2100
|
+
|
|
2101
|
+
<details>
|
|
2102
|
+
<summary>ZoraProvider</summary>
|
|
2103
|
+
|
|
2104
|
+
```ts
|
|
2105
|
+
ZoraProvider({
|
|
2106
|
+
children,
|
|
2107
|
+
theme = zoraDefaultTheme,
|
|
2108
|
+
initialMode = 'light',
|
|
2109
|
+
}: ZoraProviderProps) => React.JSX.Element
|
|
2110
|
+
```
|
|
2111
|
+
|
|
2112
|
+
Installs the ZORA theme runtime and underlying Surface theme provider.
|
|
2113
|
+
|
|
2114
|
+
Wrap an app with `ZoraProvider` once near the root so components, patterns,
|
|
2115
|
+
layouts, and theme hooks resolve the same design tokens and color mode.
|
|
2116
|
+
|
|
2117
|
+
#### App provider
|
|
2118
|
+
|
|
2119
|
+
```tsx
|
|
2120
|
+
<ZoraProvider initialMode="light">
|
|
2121
|
+
<App />
|
|
2122
|
+
</ZoraProvider>
|
|
2123
|
+
```
|
|
2124
|
+
|
|
2125
|
+
Related types: `ZoraProviderProps`
|
|
2126
|
+
|
|
2127
|
+
<details>
|
|
2128
|
+
<summary>Props</summary>
|
|
2129
|
+
|
|
2130
|
+
| Prop | Type | Required | Default | Description |
|
|
2131
|
+
| ----------- | ------------------------------ | -------- | ------------------ | ----------- |
|
|
2132
|
+
| children | `React.ReactNode \| undefined` | no | — | |
|
|
2133
|
+
| initialMode | `ZoraThemeMode \| undefined` | no | `'light'` | |
|
|
2134
|
+
| theme | `ZoraTheme \| undefined` | no | `zoraDefaultTheme` | |
|
|
2135
|
+
|
|
2136
|
+
</details>
|
|
2137
|
+
|
|
2138
|
+
</details>
|