@ankhorage/zora 1.0.0 → 1.0.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.
Files changed (157) hide show
  1. package/CHANGELOG.md +34 -0
  2. package/README.md +16 -9
  3. package/dist/components/card/Card.d.ts.map +1 -1
  4. package/dist/components/card/Card.js +2 -1
  5. package/dist/components/card/Card.js.map +1 -1
  6. package/dist/components/checkbox/CheckboxGroup.d.ts.map +1 -1
  7. package/dist/components/checkbox/CheckboxGroup.js +2 -1
  8. package/dist/components/checkbox/CheckboxGroup.js.map +1 -1
  9. package/dist/components/drawer/Drawer.d.ts.map +1 -1
  10. package/dist/components/drawer/Drawer.js +2 -1
  11. package/dist/components/drawer/Drawer.js.map +1 -1
  12. package/dist/components/form/Form.d.ts.map +1 -1
  13. package/dist/components/form/Form.js +1 -1
  14. package/dist/components/form/Form.js.map +1 -1
  15. package/dist/components/form/FormActions.d.ts.map +1 -1
  16. package/dist/components/form/FormActions.js +1 -1
  17. package/dist/components/form/FormActions.js.map +1 -1
  18. package/dist/components/form/FormError.d.ts.map +1 -1
  19. package/dist/components/form/FormError.js +1 -1
  20. package/dist/components/form/FormError.js.map +1 -1
  21. package/dist/components/form/FormField.d.ts.map +1 -1
  22. package/dist/components/form/FormField.js +2 -1
  23. package/dist/components/form/FormField.js.map +1 -1
  24. package/dist/components/modal/Modal.d.ts.map +1 -1
  25. package/dist/components/modal/Modal.js +2 -1
  26. package/dist/components/modal/Modal.js.map +1 -1
  27. package/dist/components/radio/RadioGroup.d.ts.map +1 -1
  28. package/dist/components/radio/RadioGroup.js +2 -1
  29. package/dist/components/radio/RadioGroup.js.map +1 -1
  30. package/dist/components/select/Select.d.ts.map +1 -1
  31. package/dist/components/select/Select.js +1 -1
  32. package/dist/components/select/Select.js.map +1 -1
  33. package/dist/components/tabs/Tabs.d.ts.map +1 -1
  34. package/dist/components/tabs/Tabs.js +1 -1
  35. package/dist/components/tabs/Tabs.js.map +1 -1
  36. package/dist/components/toolbar/Toolbar.d.ts.map +1 -1
  37. package/dist/components/toolbar/Toolbar.js +1 -1
  38. package/dist/components/toolbar/Toolbar.js.map +1 -1
  39. package/dist/layout/app-shell/AppShell.d.ts.map +1 -1
  40. package/dist/layout/app-shell/AppShell.js +1 -1
  41. package/dist/layout/app-shell/AppShell.js.map +1 -1
  42. package/dist/layout/auth-layout/AuthLayout.d.ts.map +1 -1
  43. package/dist/layout/auth-layout/AuthLayout.js +1 -1
  44. package/dist/layout/auth-layout/AuthLayout.js.map +1 -1
  45. package/dist/layout/page/Page.d.ts.map +1 -1
  46. package/dist/layout/page/Page.js +1 -1
  47. package/dist/layout/page/Page.js.map +1 -1
  48. package/dist/layout/page-header/PageHeader.d.ts.map +1 -1
  49. package/dist/layout/page-header/PageHeader.js +1 -1
  50. package/dist/layout/page-header/PageHeader.js.map +1 -1
  51. package/dist/layout/page-section/PageSection.d.ts.map +1 -1
  52. package/dist/layout/page-section/PageSection.js +1 -1
  53. package/dist/layout/page-section/PageSection.js.map +1 -1
  54. package/dist/layout/sidebar-layout/SidebarLayout.d.ts.map +1 -1
  55. package/dist/layout/sidebar-layout/SidebarLayout.js +1 -1
  56. package/dist/layout/sidebar-layout/SidebarLayout.js.map +1 -1
  57. package/dist/layout/topbar-layout/TopbarLayout.d.ts.map +1 -1
  58. package/dist/layout/topbar-layout/TopbarLayout.js +1 -1
  59. package/dist/layout/topbar-layout/TopbarLayout.js.map +1 -1
  60. package/dist/patterns/auth/ForgotPasswordForm.d.ts.map +1 -1
  61. package/dist/patterns/auth/ForgotPasswordForm.js +1 -1
  62. package/dist/patterns/auth/ForgotPasswordForm.js.map +1 -1
  63. package/dist/patterns/auth/OtpForm.d.ts.map +1 -1
  64. package/dist/patterns/auth/OtpForm.js +1 -1
  65. package/dist/patterns/auth/OtpForm.js.map +1 -1
  66. package/dist/patterns/auth/SignInForm.d.ts.map +1 -1
  67. package/dist/patterns/auth/SignInForm.js +1 -1
  68. package/dist/patterns/auth/SignInForm.js.map +1 -1
  69. package/dist/patterns/auth/SignUpForm.d.ts.map +1 -1
  70. package/dist/patterns/auth/SignUpForm.js +1 -1
  71. package/dist/patterns/auth/SignUpForm.js.map +1 -1
  72. package/dist/patterns/collection-editor/CollectionEditor.d.ts.map +1 -1
  73. package/dist/patterns/collection-editor/CollectionEditor.js +1 -1
  74. package/dist/patterns/collection-editor/CollectionEditor.js.map +1 -1
  75. package/dist/patterns/confirm-dialog/ConfirmDialog.d.ts.map +1 -1
  76. package/dist/patterns/confirm-dialog/ConfirmDialog.js +1 -1
  77. package/dist/patterns/confirm-dialog/ConfirmDialog.js.map +1 -1
  78. package/dist/patterns/disclosure-section/DisclosureSection.d.ts.map +1 -1
  79. package/dist/patterns/disclosure-section/DisclosureSection.js +1 -1
  80. package/dist/patterns/disclosure-section/DisclosureSection.js.map +1 -1
  81. package/dist/patterns/empty-state/EmptyState.d.ts.map +1 -1
  82. package/dist/patterns/empty-state/EmptyState.js +1 -1
  83. package/dist/patterns/empty-state/EmptyState.js.map +1 -1
  84. package/dist/patterns/form-field/FormField.d.ts.map +1 -1
  85. package/dist/patterns/form-field/FormField.js +2 -1
  86. package/dist/patterns/form-field/FormField.js.map +1 -1
  87. package/dist/patterns/inspector-field/InspectorField.d.ts.map +1 -1
  88. package/dist/patterns/inspector-field/InspectorField.js +1 -1
  89. package/dist/patterns/inspector-field/InspectorField.js.map +1 -1
  90. package/dist/patterns/notice/Notice.d.ts.map +1 -1
  91. package/dist/patterns/notice/Notice.js +1 -1
  92. package/dist/patterns/notice/Notice.js.map +1 -1
  93. package/dist/patterns/section-header/SectionHeader.d.ts.map +1 -1
  94. package/dist/patterns/section-header/SectionHeader.js +1 -1
  95. package/dist/patterns/section-header/SectionHeader.js.map +1 -1
  96. package/dist/patterns/settings-row/SettingsRow.d.ts.map +1 -1
  97. package/dist/patterns/settings-row/SettingsRow.js +1 -1
  98. package/dist/patterns/settings-row/SettingsRow.js.map +1 -1
  99. package/dist/patterns/theme-composer/ThemeComposer.d.ts.map +1 -1
  100. package/dist/patterns/theme-composer/ThemeComposer.js +98 -6
  101. package/dist/patterns/theme-composer/ThemeComposer.js.map +1 -1
  102. package/dist/patterns/theme-composer/types.d.ts +2 -0
  103. package/dist/patterns/theme-composer/types.d.ts.map +1 -1
  104. package/dist/patterns/theme-composer/types.js.map +1 -1
  105. package/dist/patterns/tile-grid/PaletteItem.d.ts.map +1 -1
  106. package/dist/patterns/tile-grid/PaletteItem.js +1 -1
  107. package/dist/patterns/tile-grid/PaletteItem.js.map +1 -1
  108. package/dist/patterns/tile-grid/TileGrid.d.ts.map +1 -1
  109. package/dist/patterns/tile-grid/TileGrid.js +1 -1
  110. package/dist/patterns/tile-grid/TileGrid.js.map +1 -1
  111. package/dist/patterns/tree-view/TreeItem.d.ts.map +1 -1
  112. package/dist/patterns/tree-view/TreeItem.js +1 -1
  113. package/dist/patterns/tree-view/TreeItem.js.map +1 -1
  114. package/dist/patterns/tree-view/TreeView.d.ts.map +1 -1
  115. package/dist/patterns/tree-view/TreeView.js +1 -1
  116. package/dist/patterns/tree-view/TreeView.js.map +1 -1
  117. package/package.json +1 -1
  118. package/src/audit.test.ts +242 -0
  119. package/src/components/card/Card.tsx +2 -1
  120. package/src/components/checkbox/CheckboxGroup.tsx +2 -1
  121. package/src/components/drawer/Drawer.tsx +2 -1
  122. package/src/components/form/Form.tsx +1 -1
  123. package/src/components/form/FormActions.tsx +1 -1
  124. package/src/components/form/FormError.tsx +1 -1
  125. package/src/components/form/FormField.tsx +2 -1
  126. package/src/components/modal/Modal.tsx +2 -1
  127. package/src/components/radio/RadioGroup.tsx +2 -1
  128. package/src/components/select/Select.tsx +1 -1
  129. package/src/components/tabs/Tabs.tsx +1 -1
  130. package/src/components/toolbar/Toolbar.tsx +1 -1
  131. package/src/layout/app-shell/AppShell.tsx +1 -1
  132. package/src/layout/auth-layout/AuthLayout.tsx +1 -1
  133. package/src/layout/page/Page.tsx +1 -1
  134. package/src/layout/page-header/PageHeader.tsx +1 -1
  135. package/src/layout/page-section/PageSection.tsx +1 -1
  136. package/src/layout/sidebar-layout/SidebarLayout.tsx +1 -1
  137. package/src/layout/topbar-layout/TopbarLayout.tsx +1 -1
  138. package/src/patterns/auth/ForgotPasswordForm.tsx +1 -1
  139. package/src/patterns/auth/OtpForm.tsx +1 -1
  140. package/src/patterns/auth/SignInForm.tsx +1 -1
  141. package/src/patterns/auth/SignUpForm.tsx +1 -1
  142. package/src/patterns/collection-editor/CollectionEditor.tsx +1 -1
  143. package/src/patterns/confirm-dialog/ConfirmDialog.tsx +1 -1
  144. package/src/patterns/disclosure-section/DisclosureSection.tsx +1 -1
  145. package/src/patterns/empty-state/EmptyState.tsx +1 -1
  146. package/src/patterns/form-field/FormField.tsx +2 -1
  147. package/src/patterns/inspector-field/InspectorField.tsx +1 -1
  148. package/src/patterns/notice/Notice.tsx +1 -1
  149. package/src/patterns/section-header/SectionHeader.tsx +1 -1
  150. package/src/patterns/settings-row/SettingsRow.tsx +1 -1
  151. package/src/patterns/theme-composer/ThemeComposer.test.ts +148 -2
  152. package/src/patterns/theme-composer/ThemeComposer.tsx +129 -5
  153. package/src/patterns/theme-composer/types.ts +3 -0
  154. package/src/patterns/tile-grid/PaletteItem.tsx +1 -1
  155. package/src/patterns/tile-grid/TileGrid.tsx +1 -1
  156. package/src/patterns/tree-view/TreeItem.tsx +1 -1
  157. package/src/patterns/tree-view/TreeView.tsx +1 -1
@@ -1,7 +1,7 @@
1
- import { Box, Stack } from '@ankhorage/surface';
2
1
  import React from 'react';
3
2
  import { Badge } from '../../components/badge';
4
3
  import { Card } from '../../components/card';
4
+ import { Box, Stack } from '../../foundation';
5
5
  import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
6
6
  function NoticeInner({ themeId: _themeId, mode: _mode, title, description, children, actions, tone = 'primary', testID, }) {
7
7
  return (<Card description={description} eyebrow={<Badge tone={tone}>{String(tone).toUpperCase()}</Badge>} testID={testID} title={title} tone="subtle">
@@ -1 +1 @@
1
- {"version":3,"file":"Notice.js","sourceRoot":"","sources":["../../../src/patterns/notice/Notice.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAChD,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,KAAK,EAAE,MAAM,wBAAwB,CAAC;AAC/C,OAAO,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAC;AAC7C,OAAO,EAAE,kBAAkB,EAAE,MAAM,gCAAgC,CAAC;AAGpE,SAAS,WAAW,CAAC,EACnB,OAAO,EAAE,QAAQ,EACjB,IAAI,EAAE,KAAK,EACX,KAAK,EACL,WAAW,EACX,QAAQ,EACR,OAAO,EACP,IAAI,GAAG,SAAS,EAChB,MAAM,GACM;IACZ,OAAO,CACL,CAAC,IAAI,CACH,WAAW,CAAC,CAAC,WAAW,CAAC,CACzB,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,WAAW,EAAE,CAAC,EAAE,KAAK,CAAC,CAAC,CACjE,MAAM,CAAC,CAAC,MAAM,CAAC,CACf,KAAK,CAAC,CAAC,KAAK,CAAC,CACb,IAAI,CAAC,QAAQ,CAEb;MAAA,CAAC,KAAK,CAAC,GAAG,CAAC,GAAG,CACZ;QAAA,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,QAAQ,CAAC,EAAE,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,CACxC;QAAA,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,OAAO,CAAC,EAAE,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,CACxC;MAAA,EAAE,KAAK,CACT;IAAA,EAAE,IAAI,CAAC,CACR,CAAC;AACJ,CAAC;AAED,MAAM,CAAC,MAAM,MAAM,GAAG,kBAAkB,CAAC,WAAW,CAAC,CAAC","sourcesContent":["import { Box, Stack } from '@ankhorage/surface';\nimport React from 'react';\n\nimport { Badge } from '../../components/badge';\nimport { Card } from '../../components/card';\nimport { withZoraThemeScope } from '../../theme/withZoraThemeScope';\nimport type { NoticeProps } from './types';\n\nfunction NoticeInner({\n themeId: _themeId,\n mode: _mode,\n title,\n description,\n children,\n actions,\n tone = 'primary',\n testID,\n}: NoticeProps) {\n return (\n <Card\n description={description}\n eyebrow={<Badge tone={tone}>{String(tone).toUpperCase()}</Badge>}\n testID={testID}\n title={title}\n tone=\"subtle\"\n >\n <Stack gap=\"m\">\n {children ? <Box>{children}</Box> : null}\n {actions ? <Box>{actions}</Box> : null}\n </Stack>\n </Card>\n );\n}\n\nexport const Notice = withZoraThemeScope(NoticeInner);\n"]}
1
+ {"version":3,"file":"Notice.js","sourceRoot":"","sources":["../../../src/patterns/notice/Notice.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,KAAK,EAAE,MAAM,wBAAwB,CAAC;AAC/C,OAAO,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAC;AAC7C,OAAO,EAAE,GAAG,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAC9C,OAAO,EAAE,kBAAkB,EAAE,MAAM,gCAAgC,CAAC;AAGpE,SAAS,WAAW,CAAC,EACnB,OAAO,EAAE,QAAQ,EACjB,IAAI,EAAE,KAAK,EACX,KAAK,EACL,WAAW,EACX,QAAQ,EACR,OAAO,EACP,IAAI,GAAG,SAAS,EAChB,MAAM,GACM;IACZ,OAAO,CACL,CAAC,IAAI,CACH,WAAW,CAAC,CAAC,WAAW,CAAC,CACzB,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,WAAW,EAAE,CAAC,EAAE,KAAK,CAAC,CAAC,CACjE,MAAM,CAAC,CAAC,MAAM,CAAC,CACf,KAAK,CAAC,CAAC,KAAK,CAAC,CACb,IAAI,CAAC,QAAQ,CAEb;MAAA,CAAC,KAAK,CAAC,GAAG,CAAC,GAAG,CACZ;QAAA,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,QAAQ,CAAC,EAAE,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,CACxC;QAAA,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,OAAO,CAAC,EAAE,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,CACxC;MAAA,EAAE,KAAK,CACT;IAAA,EAAE,IAAI,CAAC,CACR,CAAC;AACJ,CAAC;AAED,MAAM,CAAC,MAAM,MAAM,GAAG,kBAAkB,CAAC,WAAW,CAAC,CAAC","sourcesContent":["import React from 'react';\n\nimport { Badge } from '../../components/badge';\nimport { Card } from '../../components/card';\nimport { Box, Stack } from '../../foundation';\nimport { withZoraThemeScope } from '../../theme/withZoraThemeScope';\nimport type { NoticeProps } from './types';\n\nfunction NoticeInner({\n themeId: _themeId,\n mode: _mode,\n title,\n description,\n children,\n actions,\n tone = 'primary',\n testID,\n}: NoticeProps) {\n return (\n <Card\n description={description}\n eyebrow={<Badge tone={tone}>{String(tone).toUpperCase()}</Badge>}\n testID={testID}\n title={title}\n tone=\"subtle\"\n >\n <Stack gap=\"m\">\n {children ? <Box>{children}</Box> : null}\n {actions ? <Box>{actions}</Box> : null}\n </Stack>\n </Card>\n );\n}\n\nexport const Notice = withZoraThemeScope(NoticeInner);\n"]}
@@ -1 +1 @@
1
- {"version":3,"file":"SectionHeader.d.ts","sourceRoot":"","sources":["../../../src/patterns/section-header/SectionHeader.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAuClD,eAAO,MAAM,aAAa,0DAAyC,CAAC"}
1
+ {"version":3,"file":"SectionHeader.d.ts","sourceRoot":"","sources":["../../../src/patterns/section-header/SectionHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAuClD,eAAO,MAAM,aAAa,0DAAyC,CAAC"}
@@ -1,7 +1,7 @@
1
- import { Box, Stack } from '@ankhorage/surface';
2
1
  import React from 'react';
3
2
  import { Heading } from '../../components/heading';
4
3
  import { Text } from '../../components/text';
4
+ import { Box, Stack } from '../../foundation';
5
5
  import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
6
6
  function SectionHeaderInner({ themeId: _themeId, mode: _mode, title, description, eyebrow, actions, testID, }) {
7
7
  return (<Stack align={{ base: 'flex-start', md: 'center' }} direction={{ base: 'column', md: 'row' }} gap="m" justify="space-between" testID={testID}>
@@ -1 +1 @@
1
- {"version":3,"file":"SectionHeader.js","sourceRoot":"","sources":["../../../src/patterns/section-header/SectionHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAChD,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,OAAO,EAAE,MAAM,0BAA0B,CAAC;AACnD,OAAO,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAC;AAC7C,OAAO,EAAE,kBAAkB,EAAE,MAAM,gCAAgC,CAAC;AAGpE,SAAS,kBAAkB,CAAC,EAC1B,OAAO,EAAE,QAAQ,EACjB,IAAI,EAAE,KAAK,EACX,KAAK,EACL,WAAW,EACX,OAAO,EACP,OAAO,EACP,MAAM,GACa;IACnB,OAAO,CACL,CAAC,KAAK,CACJ,KAAK,CAAC,CAAC,EAAE,IAAI,EAAE,YAAY,EAAE,EAAE,EAAE,QAAQ,EAAE,CAAC,CAC5C,SAAS,CAAC,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE,EAAE,KAAK,EAAE,CAAC,CACzC,GAAG,CAAC,GAAG,CACP,OAAO,CAAC,eAAe,CACvB,MAAM,CAAC,CAAC,MAAM,CAAC,CAEf;MAAA,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CACX;QAAA,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,CACb;UAAA,CAAC,OAAO,CAAC,CAAC,CAAC,CACT,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,SAAS,CAAC,MAAM,CAAC,UAAU,CACpD;cAAA,CAAC,OAAO,CACV;YAAA,EAAE,IAAI,CAAC,CACR,CAAC,CAAC,CAAC,IAAI,CACR;UAAA,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,EAAE,OAAO,CACnC;UAAA,CAAC,WAAW,CAAC,CAAC,CAAC,CACb,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,WAAW,CACpC;cAAA,CAAC,WAAW,CACd;YAAA,EAAE,IAAI,CAAC,CACR,CAAC,CAAC,CAAC,IAAI,CACV;QAAA,EAAE,KAAK,CACT;MAAA,EAAE,GAAG,CACL;MAAA,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,OAAO,CAAC,EAAE,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,CACxC;IAAA,EAAE,KAAK,CAAC,CACT,CAAC;AACJ,CAAC;AAED,MAAM,CAAC,MAAM,aAAa,GAAG,kBAAkB,CAAC,kBAAkB,CAAC,CAAC","sourcesContent":["import { Box, Stack } from '@ankhorage/surface';\nimport React from 'react';\n\nimport { Heading } from '../../components/heading';\nimport { Text } from '../../components/text';\nimport { withZoraThemeScope } from '../../theme/withZoraThemeScope';\nimport type { SectionHeaderProps } from './types';\n\nfunction SectionHeaderInner({\n themeId: _themeId,\n mode: _mode,\n title,\n description,\n eyebrow,\n actions,\n testID,\n}: SectionHeaderProps) {\n return (\n <Stack\n align={{ base: 'flex-start', md: 'center' }}\n direction={{ base: 'column', md: 'row' }}\n gap=\"m\"\n justify=\"space-between\"\n testID={testID}\n >\n <Box flex={1}>\n <Stack gap=\"xs\">\n {eyebrow ? (\n <Text tone=\"muted\" variant=\"caption\" weight=\"semiBold\">\n {eyebrow}\n </Text>\n ) : null}\n <Heading level={3}>{title}</Heading>\n {description ? (\n <Text tone=\"muted\" variant=\"bodySmall\">\n {description}\n </Text>\n ) : null}\n </Stack>\n </Box>\n {actions ? <Box>{actions}</Box> : null}\n </Stack>\n );\n}\n\nexport const SectionHeader = withZoraThemeScope(SectionHeaderInner);\n"]}
1
+ {"version":3,"file":"SectionHeader.js","sourceRoot":"","sources":["../../../src/patterns/section-header/SectionHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,OAAO,EAAE,MAAM,0BAA0B,CAAC;AACnD,OAAO,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAC;AAC7C,OAAO,EAAE,GAAG,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAC9C,OAAO,EAAE,kBAAkB,EAAE,MAAM,gCAAgC,CAAC;AAGpE,SAAS,kBAAkB,CAAC,EAC1B,OAAO,EAAE,QAAQ,EACjB,IAAI,EAAE,KAAK,EACX,KAAK,EACL,WAAW,EACX,OAAO,EACP,OAAO,EACP,MAAM,GACa;IACnB,OAAO,CACL,CAAC,KAAK,CACJ,KAAK,CAAC,CAAC,EAAE,IAAI,EAAE,YAAY,EAAE,EAAE,EAAE,QAAQ,EAAE,CAAC,CAC5C,SAAS,CAAC,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE,EAAE,KAAK,EAAE,CAAC,CACzC,GAAG,CAAC,GAAG,CACP,OAAO,CAAC,eAAe,CACvB,MAAM,CAAC,CAAC,MAAM,CAAC,CAEf;MAAA,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CACX;QAAA,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,CACb;UAAA,CAAC,OAAO,CAAC,CAAC,CAAC,CACT,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,SAAS,CAAC,MAAM,CAAC,UAAU,CACpD;cAAA,CAAC,OAAO,CACV;YAAA,EAAE,IAAI,CAAC,CACR,CAAC,CAAC,CAAC,IAAI,CACR;UAAA,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,EAAE,OAAO,CACnC;UAAA,CAAC,WAAW,CAAC,CAAC,CAAC,CACb,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,WAAW,CACpC;cAAA,CAAC,WAAW,CACd;YAAA,EAAE,IAAI,CAAC,CACR,CAAC,CAAC,CAAC,IAAI,CACV;QAAA,EAAE,KAAK,CACT;MAAA,EAAE,GAAG,CACL;MAAA,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,OAAO,CAAC,EAAE,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,CACxC;IAAA,EAAE,KAAK,CAAC,CACT,CAAC;AACJ,CAAC;AAED,MAAM,CAAC,MAAM,aAAa,GAAG,kBAAkB,CAAC,kBAAkB,CAAC,CAAC","sourcesContent":["import React from 'react';\n\nimport { Heading } from '../../components/heading';\nimport { Text } from '../../components/text';\nimport { Box, Stack } from '../../foundation';\nimport { withZoraThemeScope } from '../../theme/withZoraThemeScope';\nimport type { SectionHeaderProps } from './types';\n\nfunction SectionHeaderInner({\n themeId: _themeId,\n mode: _mode,\n title,\n description,\n eyebrow,\n actions,\n testID,\n}: SectionHeaderProps) {\n return (\n <Stack\n align={{ base: 'flex-start', md: 'center' }}\n direction={{ base: 'column', md: 'row' }}\n gap=\"m\"\n justify=\"space-between\"\n testID={testID}\n >\n <Box flex={1}>\n <Stack gap=\"xs\">\n {eyebrow ? (\n <Text tone=\"muted\" variant=\"caption\" weight=\"semiBold\">\n {eyebrow}\n </Text>\n ) : null}\n <Heading level={3}>{title}</Heading>\n {description ? (\n <Text tone=\"muted\" variant=\"bodySmall\">\n {description}\n </Text>\n ) : null}\n </Stack>\n </Box>\n {actions ? <Box>{actions}</Box> : null}\n </Stack>\n );\n}\n\nexport const SectionHeader = withZoraThemeScope(SectionHeaderInner);\n"]}
@@ -1 +1 @@
1
- {"version":3,"file":"SettingsRow.d.ts","sourceRoot":"","sources":["../../../src/patterns/settings-row/SettingsRow.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAuChD,eAAO,MAAM,WAAW,wDAAuC,CAAC"}
1
+ {"version":3,"file":"SettingsRow.d.ts","sourceRoot":"","sources":["../../../src/patterns/settings-row/SettingsRow.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAuChD,eAAO,MAAM,WAAW,wDAAuC,CAAC"}
@@ -1,7 +1,7 @@
1
- import { Box } from '@ankhorage/surface';
2
1
  import React from 'react';
3
2
  import { Card } from '../../components/card';
4
3
  import { Text } from '../../components/text';
4
+ import { Box } from '../../foundation';
5
5
  import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
6
6
  function SettingsRowInner({ themeId: _themeId, mode: _mode, title, description, meta, control, onPress, disabled = false, testID, }) {
7
7
  // Prevent nested interactive elements:
@@ -1 +1 @@
1
- {"version":3,"file":"SettingsRow.js","sourceRoot":"","sources":["../../../src/patterns/settings-row/SettingsRow.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,oBAAoB,CAAC;AACzC,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAC;AAC7C,OAAO,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAC;AAC7C,OAAO,EAAE,kBAAkB,EAAE,MAAM,gCAAgC,CAAC;AAGpE,SAAS,gBAAgB,CAAC,EACxB,OAAO,EAAE,QAAQ,EACjB,IAAI,EAAE,KAAK,EACX,KAAK,EACL,WAAW,EACX,IAAI,EACJ,OAAO,EACP,OAAO,EACP,QAAQ,GAAG,KAAK,EAChB,MAAM,GACW;IACjB,uCAAuC;IACvC,0FAA0F;IAC1F,MAAM,aAAa,GAAG,OAAO,CAAC,OAAO,CAAC,IAAI,CAAC,OAAO,CAAC;IAEnD,OAAO,CACL,CAAC,IAAI,CACH,OAAO,CACP,OAAO,CAAC,CAAC,OAAO,CAAC,CACjB,WAAW,CAAC,CAAC,WAAW,CAAC,CACzB,QAAQ,CAAC,CAAC,QAAQ,CAAC,CACnB,OAAO,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAC7C,MAAM,CAAC,CAAC,MAAM,CAAC,CACf,KAAK,CAAC,CAAC,KAAK,CAAC,CACb,IAAI,CAAC,QAAQ,CAEb;MAAA,CAAC,IAAI,CAAC,CAAC,CAAC,CACN,CAAC,GAAG,CAAC,EAAE,CAAC,IAAI,CACV;UAAA,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,SAAS,CAClC;YAAA,CAAC,IAAI,CACP;UAAA,EAAE,IAAI,CACR;QAAA,EAAE,GAAG,CAAC,CACP,CAAC,CAAC,CAAC,IAAI,CACV;IAAA,EAAE,IAAI,CAAC,CACR,CAAC;AACJ,CAAC;AAED,MAAM,CAAC,MAAM,WAAW,GAAG,kBAAkB,CAAC,gBAAgB,CAAC,CAAC","sourcesContent":["import { Box } from '@ankhorage/surface';\nimport React from 'react';\n\nimport { Card } from '../../components/card';\nimport { Text } from '../../components/text';\nimport { withZoraThemeScope } from '../../theme/withZoraThemeScope';\nimport type { SettingsRowProps } from './types';\n\nfunction SettingsRowInner({\n themeId: _themeId,\n mode: _mode,\n title,\n description,\n meta,\n control,\n onPress,\n disabled = false,\n testID,\n}: SettingsRowProps) {\n // Prevent nested interactive elements:\n // If a control is present (likely contains buttons), the row itself must not be clickable\n const isInteractive = Boolean(onPress) && !control;\n\n return (\n <Card\n compact\n actions={control}\n description={description}\n disabled={disabled}\n onPress={isInteractive ? onPress : undefined}\n testID={testID}\n title={title}\n tone=\"subtle\"\n >\n {meta ? (\n <Box pt=\"xs\">\n <Text tone=\"muted\" variant=\"caption\">\n {meta}\n </Text>\n </Box>\n ) : null}\n </Card>\n );\n}\n\nexport const SettingsRow = withZoraThemeScope(SettingsRowInner);\n"]}
1
+ {"version":3,"file":"SettingsRow.js","sourceRoot":"","sources":["../../../src/patterns/settings-row/SettingsRow.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAC;AAC7C,OAAO,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAC;AAC7C,OAAO,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAC;AACvC,OAAO,EAAE,kBAAkB,EAAE,MAAM,gCAAgC,CAAC;AAGpE,SAAS,gBAAgB,CAAC,EACxB,OAAO,EAAE,QAAQ,EACjB,IAAI,EAAE,KAAK,EACX,KAAK,EACL,WAAW,EACX,IAAI,EACJ,OAAO,EACP,OAAO,EACP,QAAQ,GAAG,KAAK,EAChB,MAAM,GACW;IACjB,uCAAuC;IACvC,0FAA0F;IAC1F,MAAM,aAAa,GAAG,OAAO,CAAC,OAAO,CAAC,IAAI,CAAC,OAAO,CAAC;IAEnD,OAAO,CACL,CAAC,IAAI,CACH,OAAO,CACP,OAAO,CAAC,CAAC,OAAO,CAAC,CACjB,WAAW,CAAC,CAAC,WAAW,CAAC,CACzB,QAAQ,CAAC,CAAC,QAAQ,CAAC,CACnB,OAAO,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAC7C,MAAM,CAAC,CAAC,MAAM,CAAC,CACf,KAAK,CAAC,CAAC,KAAK,CAAC,CACb,IAAI,CAAC,QAAQ,CAEb;MAAA,CAAC,IAAI,CAAC,CAAC,CAAC,CACN,CAAC,GAAG,CAAC,EAAE,CAAC,IAAI,CACV;UAAA,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,SAAS,CAClC;YAAA,CAAC,IAAI,CACP;UAAA,EAAE,IAAI,CACR;QAAA,EAAE,GAAG,CAAC,CACP,CAAC,CAAC,CAAC,IAAI,CACV;IAAA,EAAE,IAAI,CAAC,CACR,CAAC;AACJ,CAAC;AAED,MAAM,CAAC,MAAM,WAAW,GAAG,kBAAkB,CAAC,gBAAgB,CAAC,CAAC","sourcesContent":["import React from 'react';\n\nimport { Card } from '../../components/card';\nimport { Text } from '../../components/text';\nimport { Box } from '../../foundation';\nimport { withZoraThemeScope } from '../../theme/withZoraThemeScope';\nimport type { SettingsRowProps } from './types';\n\nfunction SettingsRowInner({\n themeId: _themeId,\n mode: _mode,\n title,\n description,\n meta,\n control,\n onPress,\n disabled = false,\n testID,\n}: SettingsRowProps) {\n // Prevent nested interactive elements:\n // If a control is present (likely contains buttons), the row itself must not be clickable\n const isInteractive = Boolean(onPress) && !control;\n\n return (\n <Card\n compact\n actions={control}\n description={description}\n disabled={disabled}\n onPress={isInteractive ? onPress : undefined}\n testID={testID}\n title={title}\n tone=\"subtle\"\n >\n {meta ? (\n <Box pt=\"xs\">\n <Text tone=\"muted\" variant=\"caption\">\n {meta}\n </Text>\n </Box>\n ) : null}\n </Card>\n );\n}\n\nexport const SettingsRow = withZoraThemeScope(SettingsRowInner);\n"]}
@@ -1 +1 @@
1
- {"version":3,"file":"ThemeComposer.d.ts","sourceRoot":"","sources":["../../../src/patterns/theme-composer/ThemeComposer.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAa1B,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AA0KlD,eAAO,MAAM,aAAa,0DAAyC,CAAC"}
1
+ {"version":3,"file":"ThemeComposer.d.ts","sourceRoot":"","sources":["../../../src/patterns/theme-composer/ThemeComposer.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAC;AAc1B,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAoSlD,eAAO,MAAM,aAAa,0DAAyC,CAAC"}
@@ -1,5 +1,5 @@
1
1
  import { COLOR_HARMONIES, parseHexColorOrThrow } from '@ankhorage/color-theory';
2
- import { Box, Stack } from '@ankhorage/surface';
2
+ import { APP_CATEGORIES } from '@ankhorage/contracts';
3
3
  import React from 'react';
4
4
  import { Badge } from '../../components/badge';
5
5
  import { Button } from '../../components/button';
@@ -9,8 +9,12 @@ import { Input } from '../../components/input';
9
9
  import { Select } from '../../components/select';
10
10
  import { Tabs } from '../../components/tabs';
11
11
  import { Text } from '../../components/text';
12
+ import { Box, Stack } from '../../foundation';
12
13
  import { useZoraTheme } from '../../theme/useZoraTheme';
13
14
  import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
15
+ const HEX_ERROR_MESSAGE = 'Enter a valid 6-digit hex color.';
16
+ const HEX_INPUT_PLACEHOLDER = 'Enter hex color';
17
+ const NAME_ERROR_MESSAGE = 'Theme name cannot be empty.';
14
18
  function isValidHex(value) {
15
19
  try {
16
20
  parseHexColorOrThrow(value);
@@ -20,20 +24,42 @@ function isValidHex(value) {
20
24
  return false;
21
25
  }
22
26
  }
27
+ function formatAppCategoryLabel(category) {
28
+ return category
29
+ .split('_')
30
+ .map((part) => part.charAt(0).toUpperCase() + part.slice(1))
31
+ .join(' ');
32
+ }
23
33
  const HARMONY_OPTIONS = COLOR_HARMONIES.map((h) => ({ value: h, label: h }));
24
34
  const MODE_TABS = [
25
35
  { value: 'light', label: 'Light' },
26
36
  { value: 'dark', label: 'Dark' },
27
37
  ];
28
- function ThemeComposerInner({ themeId: _themeId, value, onChange, mode, onModeChange, onSubmit, testID, }) {
38
+ function ThemeComposerInner({ themeId: _themeId, value, onChange, mode, onModeChange, onSubmit, appCategories, testID, }) {
29
39
  const { theme } = useZoraTheme();
30
40
  const [hexInput, setHexInput] = React.useState(value.primaryColor);
31
41
  const [hexError, setHexError] = React.useState(undefined);
32
- // Keep local hex input in sync when value.primaryColor changes externally
42
+ const [nameInput, setNameInput] = React.useState(value.name);
43
+ const [nameError, setNameError] = React.useState(undefined);
44
+ // Keep local inputs in sync when value changes externally
33
45
  React.useEffect(() => {
34
46
  setHexInput(value.primaryColor);
35
47
  setHexError(undefined);
36
48
  }, [value.primaryColor]);
49
+ React.useEffect(() => {
50
+ setNameInput(value.name);
51
+ setNameError(undefined);
52
+ }, [value.name]);
53
+ function handleNameChange(text) {
54
+ setNameInput(text);
55
+ if (text.trim().length === 0) {
56
+ setNameError(NAME_ERROR_MESSAGE);
57
+ }
58
+ else {
59
+ setNameError(undefined);
60
+ onChange({ ...value, name: text });
61
+ }
62
+ }
37
63
  function handleHexChange(text) {
38
64
  // Ensure leading hash
39
65
  const normalized = text.startsWith('#') ? text : `#${text}`;
@@ -43,17 +69,63 @@ function ThemeComposerInner({ themeId: _themeId, value, onChange, mode, onModeCh
43
69
  onChange({ ...value, primaryColor: normalized });
44
70
  }
45
71
  else {
46
- setHexError('Enter a valid 6-digit hex color (e.g. #0f766e).');
72
+ setHexError(HEX_ERROR_MESSAGE);
47
73
  }
48
74
  }
75
+ function handleSubmit() {
76
+ const hasValidName = nameInput.trim().length > 0;
77
+ const hasValidHex = isValidHex(hexInput);
78
+ if (!hasValidName) {
79
+ setNameError(NAME_ERROR_MESSAGE);
80
+ }
81
+ if (!hasValidHex) {
82
+ setHexError(HEX_ERROR_MESSAGE);
83
+ }
84
+ if (!hasValidName || !hasValidHex) {
85
+ return;
86
+ }
87
+ onSubmit?.({
88
+ ...value,
89
+ name: nameInput,
90
+ primaryColor: hexInput,
91
+ });
92
+ }
49
93
  const activeMode = mode ?? 'light';
94
+ const categoryOptions = (appCategories ?? APP_CATEGORIES).map((c) => ({
95
+ value: c,
96
+ label: formatAppCategoryLabel(c),
97
+ }));
50
98
  return (<Stack gap="l" testID={testID}>
99
+ {/* Section: Theme identity */}
100
+ <Card title="Theme identity" description="Name your theme. The ID is assigned automatically and shown for reference.">
101
+ <Stack gap="m">
102
+ <Stack gap="xs">
103
+ <Text variant="label">Name</Text>
104
+ <Input value={nameInput} onChangeText={handleNameChange} placeholder="My theme" autoCorrect={false} invalid={nameError !== undefined} testID={testID ? `${testID}-name-input` : undefined}/>
105
+ {nameError ? (<Text tone="danger" variant="bodySmall">
106
+ {nameError}
107
+ </Text>) : null}
108
+ </Stack>
109
+ <Stack gap="xs">
110
+ <Text variant="label">ID</Text>
111
+ <Text tone="muted" variant="bodySmall" testID={testID ? `${testID}-id-display` : undefined}>
112
+ {value.id}
113
+ </Text>
114
+ </Stack>
115
+ </Stack>
116
+ </Card>
117
+
118
+ {/* Section: App category */}
119
+ <Card title="App category" description="Choose the category that best describes this app.">
120
+ <Select value={value.appCategory} options={categoryOptions} onValueChange={(c) => onChange({ ...value, appCategory: c })} testID={testID ? `${testID}-category-select` : undefined}/>
121
+ </Card>
122
+
51
123
  {/* Section: Primary Color */}
52
124
  <Card title="Primary color" description="Set the seed color for your theme palette.">
53
125
  <Stack gap="m">
54
126
  <Stack direction="row" gap="m" align="center">
55
127
  <Box flex={1}>
56
- <Input value={hexInput} onChangeText={handleHexChange} placeholder="#0f766e" autoCapitalize="none" autoCorrect={false} maxLength={7} invalid={hexError !== undefined} testID={testID ? `${testID}-hex-input` : undefined}/>
128
+ <Input value={hexInput} onChangeText={handleHexChange} placeholder={HEX_INPUT_PLACEHOLDER} autoCapitalize="none" autoCorrect={false} maxLength={7} invalid={hexError !== undefined} testID={testID ? `${testID}-hex-input` : undefined}/>
57
129
  </Box>
58
130
  {/* Color preview chip */}
59
131
  <Box width={36} height={36} radius="m" style={{
@@ -81,6 +153,26 @@ function ThemeComposerInner({ themeId: _themeId, value, onChange, mode, onModeCh
81
153
  {/* Section: Preview */}
82
154
  <Card title="Preview" description="A quick look at how your theme renders common controls.">
83
155
  <Stack gap="m">
156
+ <Stack gap="xs">
157
+ <Text variant="label">Name</Text>
158
+ <Text>{value.name}</Text>
159
+ </Stack>
160
+ <Stack gap="xs">
161
+ <Text variant="label">Category</Text>
162
+ <Text>{formatAppCategoryLabel(value.appCategory)}</Text>
163
+ </Stack>
164
+ <Stack gap="xs">
165
+ <Text variant="label">Primary color</Text>
166
+ <Text tone="muted" variant="bodySmall">
167
+ {value.primaryColor}
168
+ </Text>
169
+ </Stack>
170
+ <Stack gap="xs">
171
+ <Text variant="label">Harmony</Text>
172
+ <Text tone="muted" variant="bodySmall">
173
+ {value.harmony}
174
+ </Text>
175
+ </Stack>
84
176
  <Heading level={4}>Heading</Heading>
85
177
  <Text>Body text — this shows default text color and weight.</Text>
86
178
  <Text tone="muted" variant="bodySmall">
@@ -114,7 +206,7 @@ function ThemeComposerInner({ themeId: _themeId, value, onChange, mode, onModeCh
114
206
  </Card>
115
207
 
116
208
  {/* Submit */}
117
- {onSubmit ? (<Button tone="primary" emphasis="solid" onPress={() => onSubmit(value)} testID={testID ? `${testID}-submit` : undefined}>
209
+ {onSubmit ? (<Button tone="primary" emphasis="solid" onPress={handleSubmit} testID={testID ? `${testID}-submit` : undefined}>
118
210
  Apply theme
119
211
  </Button>) : null}
120
212
  </Stack>);
@@ -1 +1 @@
1
- {"version":3,"file":"ThemeComposer.js","sourceRoot":"","sources":["../../../src/patterns/theme-composer/ThemeComposer.tsx"],"names":[],"mappings":"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","sourcesContent":["import { COLOR_HARMONIES, parseHexColorOrThrow } from '@ankhorage/color-theory';\nimport { Box, Stack } from '@ankhorage/surface';\nimport React from 'react';\n\nimport { Badge } from '../../components/badge';\nimport { Button } from '../../components/button';\nimport { Card } from '../../components/card';\nimport { Heading } from '../../components/heading';\nimport { Input } from '../../components/input';\nimport { Select } from '../../components/select';\nimport { Tabs } from '../../components/tabs';\nimport { Text } from '../../components/text';\nimport type { ZoraThemeMode } from '../../theme/types';\nimport { useZoraTheme } from '../../theme/useZoraTheme';\nimport { withZoraThemeScope } from '../../theme/withZoraThemeScope';\nimport type { ThemeComposerProps } from './types';\n\nfunction isValidHex(value: string): boolean {\n try {\n parseHexColorOrThrow(value);\n return true;\n } catch {\n return false;\n }\n}\n\nconst HARMONY_OPTIONS = COLOR_HARMONIES.map((h) => ({ value: h, label: h }));\n\nconst MODE_TABS = [\n { value: 'light' as ZoraThemeMode, label: 'Light' },\n { value: 'dark' as ZoraThemeMode, label: 'Dark' },\n];\n\nfunction ThemeComposerInner({\n themeId: _themeId,\n value,\n onChange,\n mode,\n onModeChange,\n onSubmit,\n testID,\n}: ThemeComposerProps) {\n const { theme } = useZoraTheme();\n\n const [hexInput, setHexInput] = React.useState<string>(value.primaryColor);\n const [hexError, setHexError] = React.useState<string | undefined>(undefined);\n\n // Keep local hex input in sync when value.primaryColor changes externally\n React.useEffect(() => {\n setHexInput(value.primaryColor);\n setHexError(undefined);\n }, [value.primaryColor]);\n\n function handleHexChange(text: string) {\n // Ensure leading hash\n const normalized = text.startsWith('#') ? text : `#${text}`;\n setHexInput(normalized);\n\n if (isValidHex(normalized)) {\n setHexError(undefined);\n onChange({ ...value, primaryColor: normalized });\n } else {\n setHexError('Enter a valid 6-digit hex color (e.g. #0f766e).');\n }\n }\n\n const activeMode = mode ?? 'light';\n\n return (\n <Stack gap=\"l\" testID={testID}>\n {/* Section: Primary Color */}\n <Card title=\"Primary color\" description=\"Set the seed color for your theme palette.\">\n <Stack gap=\"m\">\n <Stack direction=\"row\" gap=\"m\" align=\"center\">\n <Box flex={1}>\n <Input\n value={hexInput}\n onChangeText={handleHexChange}\n placeholder=\"#0f766e\"\n autoCapitalize=\"none\"\n autoCorrect={false}\n maxLength={7}\n invalid={hexError !== undefined}\n testID={testID ? `${testID}-hex-input` : undefined}\n />\n </Box>\n {/* Color preview chip */}\n <Box\n width={36}\n height={36}\n radius=\"m\"\n style={{\n backgroundColor: isValidHex(hexInput) ? hexInput : theme.colors.border,\n borderWidth: 1,\n borderColor: theme.colors.border,\n }}\n />\n </Stack>\n {hexError ? (\n <Text tone=\"danger\" variant=\"bodySmall\">\n {hexError}\n </Text>\n ) : null}\n </Stack>\n </Card>\n\n {/* Section: Harmony */}\n <Card\n title=\"Harmony\"\n description=\"Choose how accent hues are generated from your primary color.\"\n >\n <Select\n value={value.harmony}\n options={HARMONY_OPTIONS}\n onValueChange={(h) => onChange({ ...value, harmony: h })}\n testID={testID ? `${testID}-harmony-select` : undefined}\n />\n </Card>\n\n {/* Section: Mode */}\n <Card title=\"Mode\" description=\"Switch between light and dark presentation.\">\n <Tabs\n value={activeMode}\n items={MODE_TABS}\n onValueChange={(m) => onModeChange?.(m)}\n variant=\"segmented\"\n testID={testID ? `${testID}-mode-tabs` : undefined}\n />\n </Card>\n\n {/* Section: Preview */}\n <Card title=\"Preview\" description=\"A quick look at how your theme renders common controls.\">\n <Stack gap=\"m\">\n <Heading level={4}>Heading</Heading>\n <Text>Body text — this shows default text color and weight.</Text>\n <Text tone=\"muted\" variant=\"bodySmall\">\n Muted caption text.\n </Text>\n <Stack direction=\"row\" gap=\"s\" align=\"center\">\n <Button tone=\"primary\" emphasis=\"solid\" size=\"m\">\n Primary\n </Button>\n <Button tone=\"neutral\" emphasis=\"soft\" size=\"m\">\n Neutral\n </Button>\n <Button tone=\"danger\" emphasis=\"ghost\" size=\"m\">\n Danger\n </Button>\n </Stack>\n <Stack direction=\"row\" gap=\"s\" align=\"center\">\n <Badge tone=\"primary\">Primary</Badge>\n <Badge tone=\"success\" emphasis=\"soft\">\n Success\n </Badge>\n <Badge tone=\"warning\" emphasis=\"soft\">\n Warning\n </Badge>\n <Badge tone=\"danger\" emphasis=\"soft\">\n Danger\n </Badge>\n </Stack>\n <Card\n tone=\"subtle\"\n title=\"Nested card\"\n description=\"Subtle tone inside the preview.\"\n compact\n />\n </Stack>\n </Card>\n\n {/* Submit */}\n {onSubmit ? (\n <Button\n tone=\"primary\"\n emphasis=\"solid\"\n onPress={() => onSubmit(value)}\n testID={testID ? `${testID}-submit` : undefined}\n >\n Apply theme\n </Button>\n ) : null}\n </Stack>\n );\n}\n\nexport const ThemeComposer = withZoraThemeScope(ThemeComposerInner);\n"]}
1
+ {"version":3,"file":"ThemeComposer.js","sourceRoot":"","sources":["../../../src/patterns/theme-composer/ThemeComposer.tsx"],"names":[],"mappings":"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","sourcesContent":["import { COLOR_HARMONIES, parseHexColorOrThrow } from '@ankhorage/color-theory';\nimport type { AppCategory } from '@ankhorage/contracts';\nimport { APP_CATEGORIES } from '@ankhorage/contracts';\nimport React from 'react';\n\nimport { Badge } from '../../components/badge';\nimport { Button } from '../../components/button';\nimport { Card } from '../../components/card';\nimport { Heading } from '../../components/heading';\nimport { Input } from '../../components/input';\nimport { Select } from '../../components/select';\nimport { Tabs } from '../../components/tabs';\nimport { Text } from '../../components/text';\nimport { Box, Stack } from '../../foundation';\nimport type { ZoraThemeMode } from '../../theme/types';\nimport { useZoraTheme } from '../../theme/useZoraTheme';\nimport { withZoraThemeScope } from '../../theme/withZoraThemeScope';\nimport type { ThemeComposerProps } from './types';\n\nconst HEX_ERROR_MESSAGE = 'Enter a valid 6-digit hex color.';\nconst HEX_INPUT_PLACEHOLDER = 'Enter hex color';\nconst NAME_ERROR_MESSAGE = 'Theme name cannot be empty.';\n\nfunction isValidHex(value: string): boolean {\n try {\n parseHexColorOrThrow(value);\n return true;\n } catch {\n return false;\n }\n}\n\nfunction formatAppCategoryLabel(category: AppCategory): string {\n return category\n .split('_')\n .map((part) => part.charAt(0).toUpperCase() + part.slice(1))\n .join(' ');\n}\n\nconst HARMONY_OPTIONS = COLOR_HARMONIES.map((h) => ({ value: h, label: h }));\n\nconst MODE_TABS = [\n { value: 'light' as ZoraThemeMode, label: 'Light' },\n { value: 'dark' as ZoraThemeMode, label: 'Dark' },\n];\n\nfunction ThemeComposerInner({\n themeId: _themeId,\n value,\n onChange,\n mode,\n onModeChange,\n onSubmit,\n appCategories,\n testID,\n}: ThemeComposerProps) {\n const { theme } = useZoraTheme();\n\n const [hexInput, setHexInput] = React.useState<string>(value.primaryColor);\n const [hexError, setHexError] = React.useState<string | undefined>(undefined);\n\n const [nameInput, setNameInput] = React.useState<string>(value.name);\n const [nameError, setNameError] = React.useState<string | undefined>(undefined);\n\n // Keep local inputs in sync when value changes externally\n React.useEffect(() => {\n setHexInput(value.primaryColor);\n setHexError(undefined);\n }, [value.primaryColor]);\n\n React.useEffect(() => {\n setNameInput(value.name);\n setNameError(undefined);\n }, [value.name]);\n\n function handleNameChange(text: string) {\n setNameInput(text);\n if (text.trim().length === 0) {\n setNameError(NAME_ERROR_MESSAGE);\n } else {\n setNameError(undefined);\n onChange({ ...value, name: text });\n }\n }\n\n function handleHexChange(text: string) {\n // Ensure leading hash\n const normalized = text.startsWith('#') ? text : `#${text}`;\n setHexInput(normalized);\n\n if (isValidHex(normalized)) {\n setHexError(undefined);\n onChange({ ...value, primaryColor: normalized });\n } else {\n setHexError(HEX_ERROR_MESSAGE);\n }\n }\n\n function handleSubmit() {\n const hasValidName = nameInput.trim().length > 0;\n const hasValidHex = isValidHex(hexInput);\n\n if (!hasValidName) {\n setNameError(NAME_ERROR_MESSAGE);\n }\n\n if (!hasValidHex) {\n setHexError(HEX_ERROR_MESSAGE);\n }\n\n if (!hasValidName || !hasValidHex) {\n return;\n }\n\n onSubmit?.({\n ...value,\n name: nameInput,\n primaryColor: hexInput,\n });\n }\n\n const activeMode = mode ?? 'light';\n const categoryOptions = (appCategories ?? APP_CATEGORIES).map((c) => ({\n value: c,\n label: formatAppCategoryLabel(c),\n }));\n\n return (\n <Stack gap=\"l\" testID={testID}>\n {/* Section: Theme identity */}\n <Card\n title=\"Theme identity\"\n description=\"Name your theme. The ID is assigned automatically and shown for reference.\"\n >\n <Stack gap=\"m\">\n <Stack gap=\"xs\">\n <Text variant=\"label\">Name</Text>\n <Input\n value={nameInput}\n onChangeText={handleNameChange}\n placeholder=\"My theme\"\n autoCorrect={false}\n invalid={nameError !== undefined}\n testID={testID ? `${testID}-name-input` : undefined}\n />\n {nameError ? (\n <Text tone=\"danger\" variant=\"bodySmall\">\n {nameError}\n </Text>\n ) : null}\n </Stack>\n <Stack gap=\"xs\">\n <Text variant=\"label\">ID</Text>\n <Text\n tone=\"muted\"\n variant=\"bodySmall\"\n testID={testID ? `${testID}-id-display` : undefined}\n >\n {value.id}\n </Text>\n </Stack>\n </Stack>\n </Card>\n\n {/* Section: App category */}\n <Card title=\"App category\" description=\"Choose the category that best describes this app.\">\n <Select\n value={value.appCategory}\n options={categoryOptions}\n onValueChange={(c) => onChange({ ...value, appCategory: c })}\n testID={testID ? `${testID}-category-select` : undefined}\n />\n </Card>\n\n {/* Section: Primary Color */}\n <Card title=\"Primary color\" description=\"Set the seed color for your theme palette.\">\n <Stack gap=\"m\">\n <Stack direction=\"row\" gap=\"m\" align=\"center\">\n <Box flex={1}>\n <Input\n value={hexInput}\n onChangeText={handleHexChange}\n placeholder={HEX_INPUT_PLACEHOLDER}\n autoCapitalize=\"none\"\n autoCorrect={false}\n maxLength={7}\n invalid={hexError !== undefined}\n testID={testID ? `${testID}-hex-input` : undefined}\n />\n </Box>\n {/* Color preview chip */}\n <Box\n width={36}\n height={36}\n radius=\"m\"\n style={{\n backgroundColor: isValidHex(hexInput) ? hexInput : theme.colors.border,\n borderWidth: 1,\n borderColor: theme.colors.border,\n }}\n />\n </Stack>\n {hexError ? (\n <Text tone=\"danger\" variant=\"bodySmall\">\n {hexError}\n </Text>\n ) : null}\n </Stack>\n </Card>\n\n {/* Section: Harmony */}\n <Card\n title=\"Harmony\"\n description=\"Choose how accent hues are generated from your primary color.\"\n >\n <Select\n value={value.harmony}\n options={HARMONY_OPTIONS}\n onValueChange={(h) => onChange({ ...value, harmony: h })}\n testID={testID ? `${testID}-harmony-select` : undefined}\n />\n </Card>\n\n {/* Section: Mode */}\n <Card title=\"Mode\" description=\"Switch between light and dark presentation.\">\n <Tabs\n value={activeMode}\n items={MODE_TABS}\n onValueChange={(m) => onModeChange?.(m)}\n variant=\"segmented\"\n testID={testID ? `${testID}-mode-tabs` : undefined}\n />\n </Card>\n\n {/* Section: Preview */}\n <Card title=\"Preview\" description=\"A quick look at how your theme renders common controls.\">\n <Stack gap=\"m\">\n <Stack gap=\"xs\">\n <Text variant=\"label\">Name</Text>\n <Text>{value.name}</Text>\n </Stack>\n <Stack gap=\"xs\">\n <Text variant=\"label\">Category</Text>\n <Text>{formatAppCategoryLabel(value.appCategory)}</Text>\n </Stack>\n <Stack gap=\"xs\">\n <Text variant=\"label\">Primary color</Text>\n <Text tone=\"muted\" variant=\"bodySmall\">\n {value.primaryColor}\n </Text>\n </Stack>\n <Stack gap=\"xs\">\n <Text variant=\"label\">Harmony</Text>\n <Text tone=\"muted\" variant=\"bodySmall\">\n {value.harmony}\n </Text>\n </Stack>\n <Heading level={4}>Heading</Heading>\n <Text>Body text — this shows default text color and weight.</Text>\n <Text tone=\"muted\" variant=\"bodySmall\">\n Muted caption text.\n </Text>\n <Stack direction=\"row\" gap=\"s\" align=\"center\">\n <Button tone=\"primary\" emphasis=\"solid\" size=\"m\">\n Primary\n </Button>\n <Button tone=\"neutral\" emphasis=\"soft\" size=\"m\">\n Neutral\n </Button>\n <Button tone=\"danger\" emphasis=\"ghost\" size=\"m\">\n Danger\n </Button>\n </Stack>\n <Stack direction=\"row\" gap=\"s\" align=\"center\">\n <Badge tone=\"primary\">Primary</Badge>\n <Badge tone=\"success\" emphasis=\"soft\">\n Success\n </Badge>\n <Badge tone=\"warning\" emphasis=\"soft\">\n Warning\n </Badge>\n <Badge tone=\"danger\" emphasis=\"soft\">\n Danger\n </Badge>\n </Stack>\n <Card\n tone=\"subtle\"\n title=\"Nested card\"\n description=\"Subtle tone inside the preview.\"\n compact\n />\n </Stack>\n </Card>\n\n {/* Submit */}\n {onSubmit ? (\n <Button\n tone=\"primary\"\n emphasis=\"solid\"\n onPress={handleSubmit}\n testID={testID ? `${testID}-submit` : undefined}\n >\n Apply theme\n </Button>\n ) : null}\n </Stack>\n );\n}\n\nexport const ThemeComposer = withZoraThemeScope(ThemeComposerInner);\n"]}
@@ -1,3 +1,4 @@
1
+ import type { AppCategory } from '@ankhorage/contracts';
1
2
  import type { ZoraTheme, ZoraThemeMode } from '../../theme/types';
2
3
  import type { ZoraBaseProps } from '../../theme/ZoraBaseProps';
3
4
  export interface ThemeComposerProps extends ZoraBaseProps {
@@ -6,5 +7,6 @@ export interface ThemeComposerProps extends ZoraBaseProps {
6
7
  mode?: ZoraThemeMode;
7
8
  onModeChange?: (mode: ZoraThemeMode) => void;
8
9
  onSubmit?: (theme: ZoraTheme) => void;
10
+ appCategories?: readonly AppCategory[];
9
11
  }
10
12
  //# sourceMappingURL=types.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/patterns/theme-composer/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAClE,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAE/D,MAAM,WAAW,kBAAmB,SAAQ,aAAa;IACvD,KAAK,EAAE,SAAS,CAAC;IACjB,QAAQ,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,IAAI,CAAC;IACrC,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,aAAa,KAAK,IAAI,CAAC;IAC7C,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,IAAI,CAAC;CACvC"}
1
+ {"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/patterns/theme-composer/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAExD,OAAO,KAAK,EAAE,SAAS,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAClE,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAE/D,MAAM,WAAW,kBAAmB,SAAQ,aAAa;IACvD,KAAK,EAAE,SAAS,CAAC;IACjB,QAAQ,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,IAAI,CAAC;IACrC,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,aAAa,KAAK,IAAI,CAAC;IAC7C,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,IAAI,CAAC;IACtC,aAAa,CAAC,EAAE,SAAS,WAAW,EAAE,CAAC;CACxC"}
@@ -1 +1 @@
1
- {"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/patterns/theme-composer/types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ZoraTheme, ZoraThemeMode } from '../../theme/types';\nimport type { ZoraBaseProps } from '../../theme/ZoraBaseProps';\n\nexport interface ThemeComposerProps extends ZoraBaseProps {\n value: ZoraTheme;\n onChange: (theme: ZoraTheme) => void;\n mode?: ZoraThemeMode;\n onModeChange?: (mode: ZoraThemeMode) => void;\n onSubmit?: (theme: ZoraTheme) => void;\n}\n"]}
1
+ {"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/patterns/theme-composer/types.ts"],"names":[],"mappings":"","sourcesContent":["import type { AppCategory } from '@ankhorage/contracts';\n\nimport type { ZoraTheme, ZoraThemeMode } from '../../theme/types';\nimport type { ZoraBaseProps } from '../../theme/ZoraBaseProps';\n\nexport interface ThemeComposerProps extends ZoraBaseProps {\n value: ZoraTheme;\n onChange: (theme: ZoraTheme) => void;\n mode?: ZoraThemeMode;\n onModeChange?: (mode: ZoraThemeMode) => void;\n onSubmit?: (theme: ZoraTheme) => void;\n appCategories?: readonly AppCategory[];\n}\n"]}
@@ -1 +1 @@
1
- {"version":3,"file":"PaletteItem.d.ts","sourceRoot":"","sources":["../../../src/patterns/tile-grid/PaletteItem.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAgDhD,eAAO,MAAM,WAAW,wDAAuC,CAAC"}
1
+ {"version":3,"file":"PaletteItem.d.ts","sourceRoot":"","sources":["../../../src/patterns/tile-grid/PaletteItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAQ1B,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAgDhD,eAAO,MAAM,WAAW,wDAAuC,CAAC"}
@@ -1,8 +1,8 @@
1
- import { Box } from '@ankhorage/surface';
2
1
  import React from 'react';
3
2
  import { Card } from '../../components/card';
4
3
  import { Heading } from '../../components/heading';
5
4
  import { Text } from '../../components/text';
5
+ import { Box } from '../../foundation';
6
6
  import { useZoraTheme } from '../../theme/useZoraTheme';
7
7
  import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
8
8
  function PaletteItemInner({ themeId: _themeId, mode: _mode, title, description, icon, badge, selected, disabled, onPress, testID, }) {
@@ -1 +1 @@
1
- {"version":3,"file":"PaletteItem.js","sourceRoot":"","sources":["../../../src/patterns/tile-grid/PaletteItem.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,oBAAoB,CAAC;AACzC,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAC;AAC7C,OAAO,EAAE,OAAO,EAAE,MAAM,0BAA0B,CAAC;AACnD,OAAO,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAC;AAC7C,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AACxD,OAAO,EAAE,kBAAkB,EAAE,MAAM,gCAAgC,CAAC;AAGpE,SAAS,gBAAgB,CAAC,EACxB,OAAO,EAAE,QAAQ,EACjB,IAAI,EAAE,KAAK,EACX,KAAK,EACL,WAAW,EACX,IAAI,EACJ,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,OAAO,EACP,MAAM,GACW;IACjB,MAAM,EAAE,KAAK,EAAE,GAAG,YAAY,EAAE,CAAC;IAEjC,OAAO,CACL,CAAC,IAAI,CACH,OAAO,CACP,QAAQ,CAAC,CAAC,QAAQ,CAAC,CACnB,OAAO,CAAC,CAAC,OAAO,CAAC,CACjB,MAAM,CAAC,CAAC,MAAM,CAAC,CACf,IAAI,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,QAAQ,CAAC,CACtC,KAAK,CAAC,CACJ,QAAQ;YACN,CAAC,CAAC;gBACE,WAAW,EAAE,KAAK,CAAC,MAAM,CAAC,OAAO;gBACjC,WAAW,EAAE,CAAC;aACf;YACH,CAAC,CAAC,SACN,CAAC,CAED;MAAA,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,EAAE,UAAU,EAAE,QAAQ,EAAE,CAAC,CAC1C;QAAA,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC,oBAAoB,CAAC,EAAE,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,CACvD;QAAA,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,QAAQ,CAC/B;UAAA,CAAC,KAAK,CACR;QAAA,EAAE,OAAO,CACT;QAAA,CAAC,WAAW,CAAC,CAAC,CAAC,CACb,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,SAAS,CACjD;YAAA,CAAC,WAAW,CACd;UAAA,EAAE,IAAI,CAAC,CACR,CAAC,CAAC,CAAC,IAAI,CACR;QAAA,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,KAAK,CAAC,EAAE,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,CAC5C;MAAA,EAAE,GAAG,CACP;IAAA,EAAE,IAAI,CAAC,CACR,CAAC;AACJ,CAAC;AAED,MAAM,CAAC,MAAM,WAAW,GAAG,kBAAkB,CAAC,gBAAgB,CAAC,CAAC","sourcesContent":["import { Box } from '@ankhorage/surface';\nimport React from 'react';\n\nimport { Card } from '../../components/card';\nimport { Heading } from '../../components/heading';\nimport { Text } from '../../components/text';\nimport { useZoraTheme } from '../../theme/useZoraTheme';\nimport { withZoraThemeScope } from '../../theme/withZoraThemeScope';\nimport type { PaletteItemProps } from './types';\n\nfunction PaletteItemInner({\n themeId: _themeId,\n mode: _mode,\n title,\n description,\n icon,\n badge,\n selected,\n disabled,\n onPress,\n testID,\n}: PaletteItemProps) {\n const { theme } = useZoraTheme();\n\n return (\n <Card\n compact\n disabled={disabled}\n onPress={onPress}\n testID={testID}\n tone={selected ? 'default' : 'subtle'}\n style={\n selected\n ? {\n borderColor: theme.colors.primary,\n borderWidth: 2,\n }\n : undefined\n }\n >\n <Box p=\"xs\" style={{ alignItems: 'center' }}>\n {icon ? <Box pb=\"s\">{/* Icon spec here */}</Box> : null}\n <Heading level={5} align=\"center\">\n {title}\n </Heading>\n {description ? (\n <Text align=\"center\" tone=\"muted\" variant=\"caption\">\n {description}\n </Text>\n ) : null}\n {badge ? <Box pt=\"xs\">{badge}</Box> : null}\n </Box>\n </Card>\n );\n}\n\nexport const PaletteItem = withZoraThemeScope(PaletteItemInner);\n"]}
1
+ {"version":3,"file":"PaletteItem.js","sourceRoot":"","sources":["../../../src/patterns/tile-grid/PaletteItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAC;AAC7C,OAAO,EAAE,OAAO,EAAE,MAAM,0BAA0B,CAAC;AACnD,OAAO,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAC;AAC7C,OAAO,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAC;AACvC,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AACxD,OAAO,EAAE,kBAAkB,EAAE,MAAM,gCAAgC,CAAC;AAGpE,SAAS,gBAAgB,CAAC,EACxB,OAAO,EAAE,QAAQ,EACjB,IAAI,EAAE,KAAK,EACX,KAAK,EACL,WAAW,EACX,IAAI,EACJ,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,OAAO,EACP,MAAM,GACW;IACjB,MAAM,EAAE,KAAK,EAAE,GAAG,YAAY,EAAE,CAAC;IAEjC,OAAO,CACL,CAAC,IAAI,CACH,OAAO,CACP,QAAQ,CAAC,CAAC,QAAQ,CAAC,CACnB,OAAO,CAAC,CAAC,OAAO,CAAC,CACjB,MAAM,CAAC,CAAC,MAAM,CAAC,CACf,IAAI,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,QAAQ,CAAC,CACtC,KAAK,CAAC,CACJ,QAAQ;YACN,CAAC,CAAC;gBACE,WAAW,EAAE,KAAK,CAAC,MAAM,CAAC,OAAO;gBACjC,WAAW,EAAE,CAAC;aACf;YACH,CAAC,CAAC,SACN,CAAC,CAED;MAAA,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,EAAE,UAAU,EAAE,QAAQ,EAAE,CAAC,CAC1C;QAAA,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC,oBAAoB,CAAC,EAAE,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,CACvD;QAAA,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,QAAQ,CAC/B;UAAA,CAAC,KAAK,CACR;QAAA,EAAE,OAAO,CACT;QAAA,CAAC,WAAW,CAAC,CAAC,CAAC,CACb,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,SAAS,CACjD;YAAA,CAAC,WAAW,CACd;UAAA,EAAE,IAAI,CAAC,CACR,CAAC,CAAC,CAAC,IAAI,CACR;QAAA,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,KAAK,CAAC,EAAE,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,CAC5C;MAAA,EAAE,GAAG,CACP;IAAA,EAAE,IAAI,CAAC,CACR,CAAC;AACJ,CAAC;AAED,MAAM,CAAC,MAAM,WAAW,GAAG,kBAAkB,CAAC,gBAAgB,CAAC,CAAC","sourcesContent":["import React from 'react';\n\nimport { Card } from '../../components/card';\nimport { Heading } from '../../components/heading';\nimport { Text } from '../../components/text';\nimport { Box } from '../../foundation';\nimport { useZoraTheme } from '../../theme/useZoraTheme';\nimport { withZoraThemeScope } from '../../theme/withZoraThemeScope';\nimport type { PaletteItemProps } from './types';\n\nfunction PaletteItemInner({\n themeId: _themeId,\n mode: _mode,\n title,\n description,\n icon,\n badge,\n selected,\n disabled,\n onPress,\n testID,\n}: PaletteItemProps) {\n const { theme } = useZoraTheme();\n\n return (\n <Card\n compact\n disabled={disabled}\n onPress={onPress}\n testID={testID}\n tone={selected ? 'default' : 'subtle'}\n style={\n selected\n ? {\n borderColor: theme.colors.primary,\n borderWidth: 2,\n }\n : undefined\n }\n >\n <Box p=\"xs\" style={{ alignItems: 'center' }}>\n {icon ? <Box pb=\"s\">{/* Icon spec here */}</Box> : null}\n <Heading level={5} align=\"center\">\n {title}\n </Heading>\n {description ? (\n <Text align=\"center\" tone=\"muted\" variant=\"caption\">\n {description}\n </Text>\n ) : null}\n {badge ? <Box pt=\"xs\">{badge}</Box> : null}\n </Box>\n </Card>\n );\n}\n\nexport const PaletteItem = withZoraThemeScope(PaletteItemInner);\n"]}
@@ -1 +1 @@
1
- {"version":3,"file":"TileGrid.d.ts","sourceRoot":"","sources":["../../../src/patterns/tile-grid/TileGrid.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AA4C7C,eAAO,MAAM,QAAQ,qDAAoC,CAAC"}
1
+ {"version":3,"file":"TileGrid.d.ts","sourceRoot":"","sources":["../../../src/patterns/tile-grid/TileGrid.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AA4C7C,eAAO,MAAM,QAAQ,qDAAoC,CAAC"}
@@ -1,5 +1,5 @@
1
- import { Box } from '@ankhorage/surface';
2
1
  import React from 'react';
2
+ import { Box } from '../../foundation';
3
3
  import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
4
4
  function TileGridInner({ themeId: _themeId, mode: _mode, children, columns = 'responsive', compact = false, testID, }) {
5
5
  return (<Box testID={testID} style={{
@@ -1 +1 @@
1
- {"version":3,"file":"TileGrid.js","sourceRoot":"","sources":["../../../src/patterns/tile-grid/TileGrid.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,oBAAoB,CAAC;AACzC,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,kBAAkB,EAAE,MAAM,gCAAgC,CAAC;AAGpE,SAAS,aAAa,CAAC,EACrB,OAAO,EAAE,QAAQ,EACjB,IAAI,EAAE,KAAK,EACX,QAAQ,EACR,OAAO,GAAG,YAAY,EACtB,OAAO,GAAG,KAAK,EACf,MAAM,GACQ;IACd,OAAO,CACL,CAAC,GAAG,CACF,MAAM,CAAC,CAAC,MAAM,CAAC,CACf,KAAK,CAAC,CAAC;YACL,aAAa,EAAE,KAAK;YACpB,QAAQ,EAAE,MAAM;YAChB,GAAG,EAAE,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE;SACtB,CAAC,CAEF;MAAA,CAAC,KAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE;YACtC,IAAI,CAAC,KAAK;gBAAE,OAAO,IAAI,CAAC;YAExB,OAAO,CACL,CAAC,GAAG,CACF,KAAK,CAAC,CACJ,OAAO,KAAK,YAAY;oBACtB,CAAC,CAAC;wBACE,SAAS,EAAE,KAAK;wBAChB,QAAQ,EAAE,CAAC;wBACX,QAAQ,EAAE,GAAG;qBACd;oBACH,CAAC,CAAC;wBACE,KAAK,EAAE,GAAG,GAAG,GAAG,OAAO,GAAG;qBAElC,CAAC,CAED;YAAA,CAAC,KAAK,CACR;UAAA,EAAE,GAAG,CAAC,CACP,CAAC;QACJ,CAAC,CAAC,CACJ;IAAA,EAAE,GAAG,CAAC,CACP,CAAC;AACJ,CAAC;AAED,MAAM,CAAC,MAAM,QAAQ,GAAG,kBAAkB,CAAC,aAAa,CAAC,CAAC","sourcesContent":["import { Box } from '@ankhorage/surface';\nimport React from 'react';\n\nimport { withZoraThemeScope } from '../../theme/withZoraThemeScope';\nimport type { TileGridProps } from './types';\n\nfunction TileGridInner({\n themeId: _themeId,\n mode: _mode,\n children,\n columns = 'responsive',\n compact = false,\n testID,\n}: TileGridProps) {\n return (\n <Box\n testID={testID}\n style={{\n flexDirection: 'row',\n flexWrap: 'wrap',\n gap: compact ? 8 : 16,\n }}\n >\n {React.Children.map(children, (child) => {\n if (!child) return null;\n\n return (\n <Box\n style={\n columns === 'responsive'\n ? {\n flexBasis: '30%',\n flexGrow: 1,\n minWidth: 120,\n }\n : {\n width: `${100 / columns}%`,\n }\n }\n >\n {child}\n </Box>\n );\n })}\n </Box>\n );\n}\n\nexport const TileGrid = withZoraThemeScope(TileGridInner);\n"]}
1
+ {"version":3,"file":"TileGrid.js","sourceRoot":"","sources":["../../../src/patterns/tile-grid/TileGrid.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAC;AACvC,OAAO,EAAE,kBAAkB,EAAE,MAAM,gCAAgC,CAAC;AAGpE,SAAS,aAAa,CAAC,EACrB,OAAO,EAAE,QAAQ,EACjB,IAAI,EAAE,KAAK,EACX,QAAQ,EACR,OAAO,GAAG,YAAY,EACtB,OAAO,GAAG,KAAK,EACf,MAAM,GACQ;IACd,OAAO,CACL,CAAC,GAAG,CACF,MAAM,CAAC,CAAC,MAAM,CAAC,CACf,KAAK,CAAC,CAAC;YACL,aAAa,EAAE,KAAK;YACpB,QAAQ,EAAE,MAAM;YAChB,GAAG,EAAE,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE;SACtB,CAAC,CAEF;MAAA,CAAC,KAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE;YACtC,IAAI,CAAC,KAAK;gBAAE,OAAO,IAAI,CAAC;YAExB,OAAO,CACL,CAAC,GAAG,CACF,KAAK,CAAC,CACJ,OAAO,KAAK,YAAY;oBACtB,CAAC,CAAC;wBACE,SAAS,EAAE,KAAK;wBAChB,QAAQ,EAAE,CAAC;wBACX,QAAQ,EAAE,GAAG;qBACd;oBACH,CAAC,CAAC;wBACE,KAAK,EAAE,GAAG,GAAG,GAAG,OAAO,GAAG;qBAElC,CAAC,CAED;YAAA,CAAC,KAAK,CACR;UAAA,EAAE,GAAG,CAAC,CACP,CAAC;QACJ,CAAC,CAAC,CACJ;IAAA,EAAE,GAAG,CAAC,CACP,CAAC;AACJ,CAAC;AAED,MAAM,CAAC,MAAM,QAAQ,GAAG,kBAAkB,CAAC,aAAa,CAAC,CAAC","sourcesContent":["import React from 'react';\n\nimport { Box } from '../../foundation';\nimport { withZoraThemeScope } from '../../theme/withZoraThemeScope';\nimport type { TileGridProps } from './types';\n\nfunction TileGridInner({\n themeId: _themeId,\n mode: _mode,\n children,\n columns = 'responsive',\n compact = false,\n testID,\n}: TileGridProps) {\n return (\n <Box\n testID={testID}\n style={{\n flexDirection: 'row',\n flexWrap: 'wrap',\n gap: compact ? 8 : 16,\n }}\n >\n {React.Children.map(children, (child) => {\n if (!child) return null;\n\n return (\n <Box\n style={\n columns === 'responsive'\n ? {\n flexBasis: '30%',\n flexGrow: 1,\n minWidth: 120,\n }\n : {\n width: `${100 / columns}%`,\n }\n }\n >\n {child}\n </Box>\n );\n })}\n </Box>\n );\n}\n\nexport const TileGrid = withZoraThemeScope(TileGridInner);\n"]}
@@ -1 +1 @@
1
- {"version":3,"file":"TreeItem.d.ts","sourceRoot":"","sources":["../../../src/patterns/tree-view/TreeItem.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAE/D,OAAO,KAAK,EAAE,YAAY,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAC;AAEjE,UAAU,aAAa,CAAC,GAAG,SAAS,MAAM,GAAG,MAAM,CAAE,SAAQ,aAAa;IACxE,IAAI,EAAE,YAAY,CAAC,GAAG,CAAC,CAAC;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,GAAG,CAAC;IACjB,WAAW,EAAE,SAAS,GAAG,EAAE,CAAC;IAC5B,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,GAAG,KAAK,IAAI,CAAC;IAC7B,cAAc,EAAE,CAAC,EAAE,EAAE,GAAG,KAAK,IAAI,CAAC;IAClC,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,mBAAmB,CAAC,GAAG,CAAC,KAAK,KAAK,CAAC,SAAS,CAAC;CACnE;AA2ED,eAAO,MAAM,QAAQ,GAzEE,GAAG,SAAS,MAAM,kEAyEgB,CAAC"}
1
+ {"version":3,"file":"TreeItem.d.ts","sourceRoot":"","sources":["../../../src/patterns/tree-view/TreeItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAE/D,OAAO,KAAK,EAAE,YAAY,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAC;AAEjE,UAAU,aAAa,CAAC,GAAG,SAAS,MAAM,GAAG,MAAM,CAAE,SAAQ,aAAa;IACxE,IAAI,EAAE,YAAY,CAAC,GAAG,CAAC,CAAC;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,GAAG,CAAC;IACjB,WAAW,EAAE,SAAS,GAAG,EAAE,CAAC;IAC5B,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,GAAG,KAAK,IAAI,CAAC;IAC7B,cAAc,EAAE,CAAC,EAAE,EAAE,GAAG,KAAK,IAAI,CAAC;IAClC,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,mBAAmB,CAAC,GAAG,CAAC,KAAK,KAAK,CAAC,SAAS,CAAC;CACnE;AA2ED,eAAO,MAAM,QAAQ,GAzEE,GAAG,SAAS,MAAM,kEAyEgB,CAAC"}
@@ -1,6 +1,6 @@
1
- import { Box, Stack } from '@ankhorage/surface';
2
1
  import React from 'react';
3
2
  import { IconButton } from '../../components/icon-button';
3
+ import { Box, Stack } from '../../foundation';
4
4
  import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
5
5
  import { SettingsRow } from '../settings-row';
6
6
  function TreeItemInner({ themeId: _themeId, mode: _mode, node, depth, selectedId, expandedIds, onSelect, onToggleExpand, renderItem, testID, }) {
@@ -1 +1 @@
1
- {"version":3,"file":"TreeItem.js","sourceRoot":"","sources":["../../../src/patterns/tree-view/TreeItem.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Box, Stack } from '@ankhorage/surface';\nimport React from 'react';\n\nimport { IconButton } from '../../components/icon-button';\nimport { withZoraThemeScope } from '../../theme/withZoraThemeScope';\nimport type { ZoraBaseProps } from '../../theme/ZoraBaseProps';\nimport { SettingsRow } from '../settings-row';\nimport type { TreeItemNode, TreeItemRenderProps } from './types';\n\ninterface TreeItemProps<TId extends string = string> extends ZoraBaseProps {\n node: TreeItemNode<TId>;\n depth: number;\n selectedId?: TId;\n expandedIds: readonly TId[];\n onSelect?: (id: TId) => void;\n onToggleExpand: (id: TId) => void;\n renderItem?: (props: TreeItemRenderProps<TId>) => React.ReactNode;\n}\n\nfunction TreeItemInner<TId extends string = string>({\n themeId: _themeId,\n mode: _mode,\n node,\n depth,\n selectedId,\n expandedIds,\n onSelect,\n onToggleExpand,\n renderItem,\n testID,\n}: TreeItemProps<TId>) {\n const hasChildren = node.children !== undefined && node.children.length > 0;\n const isExpanded = expandedIds.includes(node.id);\n const isSelected = selectedId === node.id;\n\n const renderContent = () => {\n if (renderItem) {\n return renderItem({\n node,\n depth,\n selected: isSelected,\n expanded: isExpanded,\n hasChildren,\n });\n }\n\n return (\n <SettingsRow\n title={node.label}\n control={\n <Stack direction=\"row\" gap=\"xs\" align=\"center\">\n {node.actions}\n {hasChildren ? (\n <IconButton\n icon={{ name: isExpanded ? 'chevron-down-outline' : 'chevron-forward-outline' }}\n label={isExpanded ? 'Collapse' : 'Expand'}\n onPress={() => onToggleExpand(node.id)}\n size=\"s\"\n emphasis=\"ghost\"\n />\n ) : null}\n </Stack>\n }\n meta={node.meta}\n disabled={node.disabled}\n />\n );\n };\n\n return (\n <Box testID={testID}>\n <Box style={{ paddingLeft: depth * 16 }}>{renderContent()}</Box>\n {hasChildren && isExpanded ? (\n <Box>\n {node.children?.map((child) => (\n <TreeItem\n key={child.id}\n depth={depth + 1}\n expandedIds={expandedIds}\n node={child}\n onSelect={onSelect}\n onToggleExpand={onToggleExpand}\n renderItem={renderItem}\n selectedId={selectedId}\n />\n ))}\n </Box>\n ) : null}\n </Box>\n );\n}\n\nexport const TreeItem = withZoraThemeScope(TreeItemInner);\n"]}
1
+ {"version":3,"file":"TreeItem.js","sourceRoot":"","sources":["../../../src/patterns/tree-view/TreeItem.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from 'react';\n\nimport { IconButton } from '../../components/icon-button';\nimport { Box, Stack } from '../../foundation';\nimport { withZoraThemeScope } from '../../theme/withZoraThemeScope';\nimport type { ZoraBaseProps } from '../../theme/ZoraBaseProps';\nimport { SettingsRow } from '../settings-row';\nimport type { TreeItemNode, TreeItemRenderProps } from './types';\n\ninterface TreeItemProps<TId extends string = string> extends ZoraBaseProps {\n node: TreeItemNode<TId>;\n depth: number;\n selectedId?: TId;\n expandedIds: readonly TId[];\n onSelect?: (id: TId) => void;\n onToggleExpand: (id: TId) => void;\n renderItem?: (props: TreeItemRenderProps<TId>) => React.ReactNode;\n}\n\nfunction TreeItemInner<TId extends string = string>({\n themeId: _themeId,\n mode: _mode,\n node,\n depth,\n selectedId,\n expandedIds,\n onSelect,\n onToggleExpand,\n renderItem,\n testID,\n}: TreeItemProps<TId>) {\n const hasChildren = node.children !== undefined && node.children.length > 0;\n const isExpanded = expandedIds.includes(node.id);\n const isSelected = selectedId === node.id;\n\n const renderContent = () => {\n if (renderItem) {\n return renderItem({\n node,\n depth,\n selected: isSelected,\n expanded: isExpanded,\n hasChildren,\n });\n }\n\n return (\n <SettingsRow\n title={node.label}\n control={\n <Stack direction=\"row\" gap=\"xs\" align=\"center\">\n {node.actions}\n {hasChildren ? (\n <IconButton\n icon={{ name: isExpanded ? 'chevron-down-outline' : 'chevron-forward-outline' }}\n label={isExpanded ? 'Collapse' : 'Expand'}\n onPress={() => onToggleExpand(node.id)}\n size=\"s\"\n emphasis=\"ghost\"\n />\n ) : null}\n </Stack>\n }\n meta={node.meta}\n disabled={node.disabled}\n />\n );\n };\n\n return (\n <Box testID={testID}>\n <Box style={{ paddingLeft: depth * 16 }}>{renderContent()}</Box>\n {hasChildren && isExpanded ? (\n <Box>\n {node.children?.map((child) => (\n <TreeItem\n key={child.id}\n depth={depth + 1}\n expandedIds={expandedIds}\n node={child}\n onSelect={onSelect}\n onToggleExpand={onToggleExpand}\n renderItem={renderItem}\n selectedId={selectedId}\n />\n ))}\n </Box>\n ) : null}\n </Box>\n );\n}\n\nexport const TreeItem = withZoraThemeScope(TreeItemInner);\n"]}
@@ -1 +1 @@
1
- {"version":3,"file":"TreeView.d.ts","sourceRoot":"","sources":["../../../src/patterns/tree-view/TreeView.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAiD7C,eAAO,MAAM,QAAQ,GA/CE,GAAG,SAAS,MAAM,kEA+CgB,CAAC"}
1
+ {"version":3,"file":"TreeView.d.ts","sourceRoot":"","sources":["../../../src/patterns/tree-view/TreeView.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAiD7C,eAAO,MAAM,QAAQ,GA/CE,GAAG,SAAS,MAAM,kEA+CgB,CAAC"}
@@ -1,5 +1,5 @@
1
- import { Stack } from '@ankhorage/surface';
2
1
  import React from 'react';
2
+ import { Stack } from '../../foundation';
3
3
  import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
4
4
  import { TreeItem } from './TreeItem';
5
5
  function TreeViewInner({ themeId: _themeId, mode: _mode, nodes, selectedId, expandedIds: controlledExpandedIds, defaultExpandedIds, onSelect, onExpandedChange, renderItem, testID, }) {
@@ -1 +1 @@
1
- {"version":3,"file":"TreeView.js","sourceRoot":"","sources":["../../../src/patterns/tree-view/TreeView.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAC3C,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,kBAAkB,EAAE,MAAM,gCAAgC,CAAC;AACpE,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAGtC,SAAS,aAAa,CAA8B,EAClD,OAAO,EAAE,QAAQ,EACjB,IAAI,EAAE,KAAK,EACX,KAAK,EACL,UAAU,EACV,WAAW,EAAE,qBAAqB,EAClC,kBAAkB,EAClB,QAAQ,EACR,gBAAgB,EAChB,UAAU,EACV,MAAM,GACa;IACnB,MAAM,CAAC,mBAAmB,EAAE,sBAAsB,CAAC,GAAG,KAAK,CAAC,QAAQ,CAClE,kBAAkB,IAAI,EAAE,CACzB,CAAC;IAEF,MAAM,YAAY,GAAG,qBAAqB,KAAK,SAAS,CAAC;IACzD,MAAM,WAAW,GAAG,YAAY,CAAC,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC,mBAAmB,CAAC;IAE/E,MAAM,kBAAkB,GAAG,CAAC,EAAO,EAAE,EAAE;QACrC,MAAM,UAAU,GAAG,WAAW,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC;QAC5C,MAAM,MAAM,GAAG,UAAU,CAAC,CAAC,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,GAAG,KAAK,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,WAAW,EAAE,EAAE,CAAC,CAAC;QAE3F,IAAI,CAAC,YAAY,EAAE,CAAC;YAClB,sBAAsB,CAAC,MAAM,CAAC,CAAC;QACjC,CAAC;QACD,gBAAgB,EAAE,CAAC,MAAM,CAAC,CAAC;IAC7B,CAAC,CAAC;IAEF,OAAO,CACL,CAAC,KAAK,CAAC,GAAG,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,MAAM,CAAC,CAC/B;MAAA,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CACnB,CAAC,QAAQ,CACP,GAAG,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,CACb,KAAK,CAAC,CAAC,CAAC,CAAC,CACT,WAAW,CAAC,CAAC,WAAW,CAAC,CACzB,IAAI,CAAC,CAAC,IAAI,CAAC,CACX,QAAQ,CAAC,CAAC,QAAQ,CAAC,CACnB,cAAc,CAAC,CAAC,kBAAkB,CAAC,CACnC,UAAU,CAAC,CAAC,UAAU,CAAC,CACvB,UAAU,CAAC,CAAC,UAAU,CAAC,EACvB,CACH,CAAC,CACJ;IAAA,EAAE,KAAK,CAAC,CACT,CAAC;AACJ,CAAC;AAED,MAAM,CAAC,MAAM,QAAQ,GAAG,kBAAkB,CAAC,aAAa,CAAC,CAAC","sourcesContent":["import { Stack } from '@ankhorage/surface';\nimport React from 'react';\n\nimport { withZoraThemeScope } from '../../theme/withZoraThemeScope';\nimport { TreeItem } from './TreeItem';\nimport type { TreeViewProps } from './types';\n\nfunction TreeViewInner<TId extends string = string>({\n themeId: _themeId,\n mode: _mode,\n nodes,\n selectedId,\n expandedIds: controlledExpandedIds,\n defaultExpandedIds,\n onSelect,\n onExpandedChange,\n renderItem,\n testID,\n}: TreeViewProps<TId>) {\n const [internalExpandedIds, setInternalExpandedIds] = React.useState<readonly TId[]>(\n defaultExpandedIds ?? [],\n );\n\n const isControlled = controlledExpandedIds !== undefined;\n const expandedIds = isControlled ? controlledExpandedIds : internalExpandedIds;\n\n const handleToggleExpand = (id: TId) => {\n const isExpanded = expandedIds.includes(id);\n const newIds = isExpanded ? expandedIds.filter((eid) => eid !== id) : [...expandedIds, id];\n\n if (!isControlled) {\n setInternalExpandedIds(newIds);\n }\n onExpandedChange?.(newIds);\n };\n\n return (\n <Stack gap=\"none\" testID={testID}>\n {nodes.map((node) => (\n <TreeItem\n key={node.id}\n depth={0}\n expandedIds={expandedIds}\n node={node}\n onSelect={onSelect}\n onToggleExpand={handleToggleExpand}\n renderItem={renderItem}\n selectedId={selectedId}\n />\n ))}\n </Stack>\n );\n}\n\nexport const TreeView = withZoraThemeScope(TreeViewInner);\n"]}
1
+ {"version":3,"file":"TreeView.js","sourceRoot":"","sources":["../../../src/patterns/tree-view/TreeView.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AACzC,OAAO,EAAE,kBAAkB,EAAE,MAAM,gCAAgC,CAAC;AACpE,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAGtC,SAAS,aAAa,CAA8B,EAClD,OAAO,EAAE,QAAQ,EACjB,IAAI,EAAE,KAAK,EACX,KAAK,EACL,UAAU,EACV,WAAW,EAAE,qBAAqB,EAClC,kBAAkB,EAClB,QAAQ,EACR,gBAAgB,EAChB,UAAU,EACV,MAAM,GACa;IACnB,MAAM,CAAC,mBAAmB,EAAE,sBAAsB,CAAC,GAAG,KAAK,CAAC,QAAQ,CAClE,kBAAkB,IAAI,EAAE,CACzB,CAAC;IAEF,MAAM,YAAY,GAAG,qBAAqB,KAAK,SAAS,CAAC;IACzD,MAAM,WAAW,GAAG,YAAY,CAAC,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC,mBAAmB,CAAC;IAE/E,MAAM,kBAAkB,GAAG,CAAC,EAAO,EAAE,EAAE;QACrC,MAAM,UAAU,GAAG,WAAW,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC;QAC5C,MAAM,MAAM,GAAG,UAAU,CAAC,CAAC,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,GAAG,KAAK,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,WAAW,EAAE,EAAE,CAAC,CAAC;QAE3F,IAAI,CAAC,YAAY,EAAE,CAAC;YAClB,sBAAsB,CAAC,MAAM,CAAC,CAAC;QACjC,CAAC;QACD,gBAAgB,EAAE,CAAC,MAAM,CAAC,CAAC;IAC7B,CAAC,CAAC;IAEF,OAAO,CACL,CAAC,KAAK,CAAC,GAAG,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,MAAM,CAAC,CAC/B;MAAA,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CACnB,CAAC,QAAQ,CACP,GAAG,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,CACb,KAAK,CAAC,CAAC,CAAC,CAAC,CACT,WAAW,CAAC,CAAC,WAAW,CAAC,CACzB,IAAI,CAAC,CAAC,IAAI,CAAC,CACX,QAAQ,CAAC,CAAC,QAAQ,CAAC,CACnB,cAAc,CAAC,CAAC,kBAAkB,CAAC,CACnC,UAAU,CAAC,CAAC,UAAU,CAAC,CACvB,UAAU,CAAC,CAAC,UAAU,CAAC,EACvB,CACH,CAAC,CACJ;IAAA,EAAE,KAAK,CAAC,CACT,CAAC;AACJ,CAAC;AAED,MAAM,CAAC,MAAM,QAAQ,GAAG,kBAAkB,CAAC,aAAa,CAAC,CAAC","sourcesContent":["import React from 'react';\n\nimport { Stack } from '../../foundation';\nimport { withZoraThemeScope } from '../../theme/withZoraThemeScope';\nimport { TreeItem } from './TreeItem';\nimport type { TreeViewProps } from './types';\n\nfunction TreeViewInner<TId extends string = string>({\n themeId: _themeId,\n mode: _mode,\n nodes,\n selectedId,\n expandedIds: controlledExpandedIds,\n defaultExpandedIds,\n onSelect,\n onExpandedChange,\n renderItem,\n testID,\n}: TreeViewProps<TId>) {\n const [internalExpandedIds, setInternalExpandedIds] = React.useState<readonly TId[]>(\n defaultExpandedIds ?? [],\n );\n\n const isControlled = controlledExpandedIds !== undefined;\n const expandedIds = isControlled ? controlledExpandedIds : internalExpandedIds;\n\n const handleToggleExpand = (id: TId) => {\n const isExpanded = expandedIds.includes(id);\n const newIds = isExpanded ? expandedIds.filter((eid) => eid !== id) : [...expandedIds, id];\n\n if (!isControlled) {\n setInternalExpandedIds(newIds);\n }\n onExpandedChange?.(newIds);\n };\n\n return (\n <Stack gap=\"none\" testID={testID}>\n {nodes.map((node) => (\n <TreeItem\n key={node.id}\n depth={0}\n expandedIds={expandedIds}\n node={node}\n onSelect={onSelect}\n onToggleExpand={handleToggleExpand}\n renderItem={renderItem}\n selectedId={selectedId}\n />\n ))}\n </Stack>\n );\n}\n\nexport const TreeView = withZoraThemeScope(TreeViewInner);\n"]}
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@ankhorage/zora",
3
3
  "type": "module",
4
- "version": "1.0.0",
4
+ "version": "1.0.2",
5
5
  "description": "Opinionated React Native and React Native Web UI kit built on @ankhorage/surface.",
6
6
  "homepage": "https://github.com/ankhorage/zora#readme",
7
7
  "bugs": {