@ankhorage/zora 0.10.0 → 0.11.0

package/dist/patterns/settings-row/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/patterns/settings-row/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,UAAU,oBAAoB;IAC5B,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,UAAU,yBAAyB;IACjC,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,OAAO,CAAC,EAAE,KAAK,CAAC;CACjB;AAED,UAAU,0BAA0B;IAClC,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,OAAO,CAAC,EAAE,KAAK,CAAC;CACjB;AAED,UAAU,sBAAsB;IAC9B,OAAO,CAAC,EAAE,KAAK,CAAC;IAChB,OAAO,CAAC,EAAE,KAAK,CAAC;CACjB;AAED,MAAM,MAAM,gBAAgB,GAAG,oBAAoB,GACjD,CAAC,yBAAyB,GAAG,0BAA0B,GAAG,sBAAsB,CAAC,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/patterns/settings-row/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAE/D,UAAU,oBAAqB,SAAQ,aAAa;IAClD,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,UAAU,yBAAyB;IACjC,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,OAAO,CAAC,EAAE,KAAK,CAAC;CACjB;AAED,UAAU,0BAA0B;IAClC,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,OAAO,CAAC,EAAE,KAAK,CAAC;CACjB;AAED,UAAU,sBAAsB;IAC9B,OAAO,CAAC,EAAE,KAAK,CAAC;IAChB,OAAO,CAAC,EAAE,KAAK,CAAC;CACjB;AAED,MAAM,MAAM,gBAAgB,GAAG,oBAAoB,GACjD,CAAC,yBAAyB,GAAG,0BAA0B,GAAG,sBAAsB,CAAC,CAAC"}

package/dist/patterns/settings-row/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/patterns/settings-row/types.ts"],"names":[],"mappings":"","sourcesContent":["import type React from 'react';\n\ninterface SettingsRowBaseProps {\n  title: React.ReactNode;\n  description?: React.ReactNode;\n  meta?: React.ReactNode;\n  disabled?: boolean;\n  testID?: string;\n}\n\ninterface SettingsRowPressableProps {\n  onPress: () => void;\n  control?: never;\n}\n\ninterface SettingsRowControlledProps {\n  control: React.ReactNode;\n  onPress?: never;\n}\n\ninterface SettingsRowStaticProps {\n  control?: never;\n  onPress?: never;\n}\n\nexport type SettingsRowProps = SettingsRowBaseProps &\n  (SettingsRowPressableProps | SettingsRowControlledProps | SettingsRowStaticProps);\n"]}
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/patterns/settings-row/types.ts"],"names":[],"mappings":"","sourcesContent":["import type React from 'react';\n\nimport type { ZoraBaseProps } from '../../theme/ZoraBaseProps';\n\ninterface SettingsRowBaseProps extends ZoraBaseProps {\n  title: React.ReactNode;\n  description?: React.ReactNode;\n  meta?: React.ReactNode;\n  disabled?: boolean;\n}\n\ninterface SettingsRowPressableProps {\n  onPress: () => void;\n  control?: never;\n}\n\ninterface SettingsRowControlledProps {\n  control: React.ReactNode;\n  onPress?: never;\n}\n\ninterface SettingsRowStaticProps {\n  control?: never;\n  onPress?: never;\n}\n\nexport type SettingsRowProps = SettingsRowBaseProps &\n  (SettingsRowPressableProps | SettingsRowControlledProps | SettingsRowStaticProps);\n"]}

package/dist/patterns/switch-field/SwitchField.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
 import type { SwitchFieldProps } from './types';
-export declare function SwitchField({ label, description, value, onValueChange, disabled, testID, }: SwitchFieldProps): React.JSX.Element;
+export declare const SwitchField: (props: SwitchFieldProps) => React.ReactElement | null;
 //# sourceMappingURL=SwitchField.d.ts.map

package/dist/patterns/switch-field/SwitchField.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SwitchField.d.ts","sourceRoot":"","sources":["../../../src/patterns/switch-field/SwitchField.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAEhD,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,WAAW,EACX,KAAK,EACL,aAAa,EACb,QAAQ,EACR,MAAM,GACP,EAAE,gBAAgB,qBAUlB"}
+{"version":3,"file":"SwitchField.d.ts","sourceRoot":"","sources":["../../../src/patterns/switch-field/SwitchField.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAuBhD,eAAO,MAAM,WAAW,wDAAuC,CAAC"}

package/dist/patterns/switch-field/SwitchField.js

@@ -1,7 +1,9 @@
 import { Switch } from '@ankhorage/surface';
 import React from 'react';
+import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
 import { SettingsRow } from '../settings-row';
-export function SwitchField({ label, description, value, onValueChange, disabled, testID, }) {
+function SwitchFieldInner({ themeId: _themeId, mode: _mode, label, description, value, onValueChange, disabled, testID, }) {
     return (<SettingsRow title={label} description={description} disabled={disabled} testID={testID} control={<Switch checked={value} onCheckedChange={onValueChange} disabled={disabled}/>}/>);
 }
+export const SwitchField = withZoraThemeScope(SwitchFieldInner);
 //# sourceMappingURL=SwitchField.js.map

package/dist/patterns/switch-field/SwitchField.js.map

@@ -1 +1 @@
-{"version":3,"file":"SwitchField.js","sourceRoot":"","sources":["../../../src/patterns/switch-field/SwitchField.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,oBAAoB,CAAC;AAC5C,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAG9C,MAAM,UAAU,WAAW,CAAC,EAC1B,KAAK,EACL,WAAW,EACX,KAAK,EACL,aAAa,EACb,QAAQ,EACR,MAAM,GACW;IACjB,OAAO,CACL,CAAC,WAAW,CACV,KAAK,CAAC,CAAC,KAAK,CAAC,CACb,WAAW,CAAC,CAAC,WAAW,CAAC,CACzB,QAAQ,CAAC,CAAC,QAAQ,CAAC,CACnB,MAAM,CAAC,CAAC,MAAM,CAAC,CACf,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,KAAK,CAAC,CAAC,eAAe,CAAC,CAAC,aAAa,CAAC,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,EAAG,CAAC,EACxF,CACH,CAAC;AACJ,CAAC","sourcesContent":["import { Switch } from '@ankhorage/surface';\nimport React from 'react';\n\nimport { SettingsRow } from '../settings-row';\nimport type { SwitchFieldProps } from './types';\n\nexport function SwitchField({\n  label,\n  description,\n  value,\n  onValueChange,\n  disabled,\n  testID,\n}: SwitchFieldProps) {\n  return (\n    <SettingsRow\n      title={label}\n      description={description}\n      disabled={disabled}\n      testID={testID}\n      control={<Switch checked={value} onCheckedChange={onValueChange} disabled={disabled} />}\n    />\n  );\n}\n"]}
+{"version":3,"file":"SwitchField.js","sourceRoot":"","sources":["../../../src/patterns/switch-field/SwitchField.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,oBAAoB,CAAC;AAC5C,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,kBAAkB,EAAE,MAAM,gCAAgC,CAAC;AACpE,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAG9C,SAAS,gBAAgB,CAAC,EACxB,OAAO,EAAE,QAAQ,EACjB,IAAI,EAAE,KAAK,EACX,KAAK,EACL,WAAW,EACX,KAAK,EACL,aAAa,EACb,QAAQ,EACR,MAAM,GACW;IACjB,OAAO,CACL,CAAC,WAAW,CACV,KAAK,CAAC,CAAC,KAAK,CAAC,CACb,WAAW,CAAC,CAAC,WAAW,CAAC,CACzB,QAAQ,CAAC,CAAC,QAAQ,CAAC,CACnB,MAAM,CAAC,CAAC,MAAM,CAAC,CACf,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,KAAK,CAAC,CAAC,eAAe,CAAC,CAAC,aAAa,CAAC,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,EAAG,CAAC,EACxF,CACH,CAAC;AACJ,CAAC;AAED,MAAM,CAAC,MAAM,WAAW,GAAG,kBAAkB,CAAC,gBAAgB,CAAC,CAAC","sourcesContent":["import { Switch } from '@ankhorage/surface';\nimport React from 'react';\n\nimport { withZoraThemeScope } from '../../theme/withZoraThemeScope';\nimport { SettingsRow } from '../settings-row';\nimport type { SwitchFieldProps } from './types';\n\nfunction SwitchFieldInner({\n  themeId: _themeId,\n  mode: _mode,\n  label,\n  description,\n  value,\n  onValueChange,\n  disabled,\n  testID,\n}: SwitchFieldProps) {\n  return (\n    <SettingsRow\n      title={label}\n      description={description}\n      disabled={disabled}\n      testID={testID}\n      control={<Switch checked={value} onCheckedChange={onValueChange} disabled={disabled} />}\n    />\n  );\n}\n\nexport const SwitchField = withZoraThemeScope(SwitchFieldInner);\n"]}

package/dist/patterns/switch-field/types.d.ts

@@ -1,10 +1,10 @@
 import type { ReactNode } from 'react';
-export interface SwitchFieldProps {
+import type { ZoraBaseProps } from '../../theme/ZoraBaseProps';
+export interface SwitchFieldProps extends ZoraBaseProps {
     label: ReactNode;
     description?: ReactNode;
     value: boolean;
     onValueChange: (value: boolean) => void;
     disabled?: boolean;
-    testID?: string;
 }
 //# sourceMappingURL=types.d.ts.map

package/dist/patterns/switch-field/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/patterns/switch-field/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,SAAS,CAAC;IACjB,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,KAAK,EAAE,OAAO,CAAC;IACf,aAAa,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;IACxC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/patterns/switch-field/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAE/D,MAAM,WAAW,gBAAiB,SAAQ,aAAa;IACrD,KAAK,EAAE,SAAS,CAAC;IACjB,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,KAAK,EAAE,OAAO,CAAC;IACf,aAAa,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;IACxC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB"}

package/dist/patterns/switch-field/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/patterns/switch-field/types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ReactNode } from 'react';\n\nexport interface SwitchFieldProps {\n  label: ReactNode;\n  description?: ReactNode;\n  value: boolean;\n  onValueChange: (value: boolean) => void;\n  disabled?: boolean;\n  testID?: string;\n}\n"]}
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/patterns/switch-field/types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ReactNode } from 'react';\n\nimport type { ZoraBaseProps } from '../../theme/ZoraBaseProps';\n\nexport interface SwitchFieldProps extends ZoraBaseProps {\n  label: ReactNode;\n  description?: ReactNode;\n  value: boolean;\n  onValueChange: (value: boolean) => void;\n  disabled?: boolean;\n}\n"]}

package/dist/patterns/tile-grid/PaletteItem.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
 import type { PaletteItemProps } from './types';
-export declare function PaletteItem({ title, description, icon, badge, selected, disabled, onPress, testID, }: PaletteItemProps): React.JSX.Element;
+export declare const PaletteItem: (props: PaletteItemProps) => React.ReactElement | null;
 //# sourceMappingURL=PaletteItem.d.ts.map

package/dist/patterns/tile-grid/PaletteItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PaletteItem.d.ts","sourceRoot":"","sources":["../../../src/patterns/tile-grid/PaletteItem.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAEhD,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,WAAW,EACX,IAAI,EACJ,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,OAAO,EACP,MAAM,GACP,EAAE,gBAAgB,qBAiClB"}
+{"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"}

package/dist/patterns/tile-grid/PaletteItem.js

@@ -1,10 +1,12 @@
-import { Box, useTheme } from '@ankhorage/surface';
+import { Box } from '@ankhorage/surface';
 import React from 'react';
 import { Card } from '../../components/card';
 import { Heading } from '../../components/heading';
 import { Text } from '../../components/text';
-export function PaletteItem({ title, description, icon, badge, selected, disabled, onPress, testID, }) {
-    const { theme } = useTheme();
+import { useZoraTheme } from '../../theme/useZoraTheme';
+import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
+function PaletteItemInner({ themeId: _themeId, mode: _mode, title, description, icon, badge, selected, disabled, onPress, testID, }) {
+    const { theme } = useZoraTheme();
     return (<Card compact disabled={disabled} onPress={onPress} testID={testID} tone={selected ? 'default' : 'subtle'} style={selected
             ? {
                 borderColor: theme.colors.primary,
@@ -23,4 +25,5 @@ export function PaletteItem({ title, description, icon, badge, selected, disable
       </Box>
     </Card>);
 }
+export const PaletteItem = withZoraThemeScope(PaletteItemInner);
 //# sourceMappingURL=PaletteItem.js.map

package/dist/patterns/tile-grid/PaletteItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"PaletteItem.js","sourceRoot":"","sources":["../../../src/patterns/tile-grid/PaletteItem.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AACnD,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;AAG7C,MAAM,UAAU,WAAW,CAAC,EAC1B,KAAK,EACL,WAAW,EACX,IAAI,EACJ,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,OAAO,EACP,MAAM,GACW;IACjB,MAAM,EAAE,KAAK,EAAE,GAAG,QAAQ,EAAE,CAAC;IAE7B,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","sourcesContent":["import { Box, useTheme } from '@ankhorage/surface';\nimport React from 'react';\n\nimport { Card } from '../../components/card';\nimport { Heading } from '../../components/heading';\nimport { Text } from '../../components/text';\nimport type { PaletteItemProps } from './types';\n\nexport function PaletteItem({\n  title,\n  description,\n  icon,\n  badge,\n  selected,\n  disabled,\n  onPress,\n  testID,\n}: PaletteItemProps) {\n  const { theme } = useTheme();\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"]}
+{"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"]}

package/dist/patterns/tile-grid/TileGrid.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
 import type { TileGridProps } from './types';
-export declare function TileGrid({ children, columns, compact, testID, }: TileGridProps): React.JSX.Element;
+export declare const TileGrid: (props: TileGridProps) => React.ReactElement | null;
 //# sourceMappingURL=TileGrid.d.ts.map

package/dist/patterns/tile-grid/TileGrid.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TileGrid.d.ts","sourceRoot":"","sources":["../../../src/patterns/tile-grid/TileGrid.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAE7C,wBAAgB,QAAQ,CAAC,EACvB,QAAQ,EACR,OAAsB,EACtB,OAAe,EACf,MAAM,GACP,EAAE,aAAa,qBAiCf"}
+{"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"}

package/dist/patterns/tile-grid/TileGrid.js

@@ -1,6 +1,7 @@
 import { Box } from '@ankhorage/surface';
 import React from 'react';
-export function TileGrid({ children, columns = 'responsive', compact = false, testID, }) {
+import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
+function TileGridInner({ themeId: _themeId, mode: _mode, children, columns = 'responsive', compact = false, testID, }) {
     return (<Box testID={testID} style={{
             flexDirection: 'row',
             flexWrap: 'wrap',
@@ -23,4 +24,5 @@ export function TileGrid({ children, columns = 'responsive', compact = false, te
         })}
     </Box>);
 }
+export const TileGrid = withZoraThemeScope(TileGridInner);
 //# sourceMappingURL=TileGrid.js.map

package/dist/patterns/tile-grid/TileGrid.js.map

@@ -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;AAI1B,MAAM,UAAU,QAAQ,CAAC,EACvB,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","sourcesContent":["import { Box } from '@ankhorage/surface';\nimport React from 'react';\n\nimport type { TileGridProps } from './types';\n\nexport function TileGrid({\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"]}
+{"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"]}

package/dist/patterns/tile-grid/types.d.ts

@@ -1,12 +1,12 @@
 import type { ButtonIconSpec } from '@ankhorage/surface';
 import type { ReactNode } from 'react';
-export interface TileGridProps {
+import type { ZoraBaseProps } from '../../theme/ZoraBaseProps';
+export interface TileGridProps extends ZoraBaseProps {
     children?: ReactNode;
     columns?: number | 'responsive';
     compact?: boolean;
-    testID?: string;
 }
-export interface PaletteItemProps {
+export interface PaletteItemProps extends ZoraBaseProps {
     title: ReactNode;
     description?: ReactNode;
     icon?: ButtonIconSpec;
@@ -14,6 +14,5 @@ export interface PaletteItemProps {
     selected?: boolean;
     disabled?: boolean;
     onPress?: () => void;
-    testID?: string;
 }
 //# sourceMappingURL=types.d.ts.map

package/dist/patterns/tile-grid/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/patterns/tile-grid/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AACzD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,MAAM,WAAW,aAAa;IAC5B,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,OAAO,CAAC,EAAE,MAAM,GAAG,YAAY,CAAC;IAChC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,SAAS,CAAC;IACjB,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,IAAI,CAAC,EAAE,cAAc,CAAC;IACtB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/patterns/tile-grid/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AACzD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAE/D,MAAM,WAAW,aAAc,SAAQ,aAAa;IAClD,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,OAAO,CAAC,EAAE,MAAM,GAAG,YAAY,CAAC;IAChC,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,MAAM,WAAW,gBAAiB,SAAQ,aAAa;IACrD,KAAK,EAAE,SAAS,CAAC;IACjB,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,IAAI,CAAC,EAAE,cAAc,CAAC;IACtB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB"}

package/dist/patterns/tile-grid/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/patterns/tile-grid/types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ButtonIconSpec } from '@ankhorage/surface';\nimport type { ReactNode } from 'react';\n\nexport interface TileGridProps {\n  children?: ReactNode;\n  columns?: number | 'responsive';\n  compact?: boolean;\n  testID?: string;\n}\n\nexport interface PaletteItemProps {\n  title: ReactNode;\n  description?: ReactNode;\n  icon?: ButtonIconSpec;\n  badge?: ReactNode;\n  selected?: boolean;\n  disabled?: boolean;\n  onPress?: () => void;\n  testID?: string;\n}\n"]}
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/patterns/tile-grid/types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ButtonIconSpec } from '@ankhorage/surface';\nimport type { ReactNode } from 'react';\n\nimport type { ZoraBaseProps } from '../../theme/ZoraBaseProps';\n\nexport interface TileGridProps extends ZoraBaseProps {\n  children?: ReactNode;\n  columns?: number | 'responsive';\n  compact?: boolean;\n}\n\nexport interface PaletteItemProps extends ZoraBaseProps {\n  title: ReactNode;\n  description?: ReactNode;\n  icon?: ButtonIconSpec;\n  badge?: ReactNode;\n  selected?: boolean;\n  disabled?: boolean;\n  onPress?: () => void;\n}\n"]}

package/dist/patterns/tree-view/TreeItem.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
+import type { ZoraBaseProps } from '../../theme/ZoraBaseProps';
 import type { TreeItemNode, TreeItemRenderProps } from './types';
-interface TreeItemProps<TId extends string = string> {
+interface TreeItemProps<TId extends string = string> extends ZoraBaseProps {
     node: TreeItemNode<TId>;
     depth: number;
     selectedId?: TId;
@@ -9,6 +10,6 @@ interface TreeItemProps<TId extends string = string> {
     onToggleExpand: (id: TId) => void;
     renderItem?: (props: TreeItemRenderProps<TId>) => React.ReactNode;
 }
-export declare function TreeItem<TId extends string = string>({ node, depth, selectedId, expandedIds, onSelect, onToggleExpand, renderItem, }: TreeItemProps<TId>): React.JSX.Element;
+export declare const TreeItem: <TId extends string = string>(props: TreeItemProps<TId>) => React.ReactElement | null;
 export {};
 //# sourceMappingURL=TreeItem.d.ts.map

package/dist/patterns/tree-view/TreeItem.d.ts.map

@@ -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,YAAY,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAC;AAEjE,UAAU,aAAa,CAAC,GAAG,SAAS,MAAM,GAAG,MAAM;IACjD,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;AAED,wBAAgB,QAAQ,CAAC,GAAG,SAAS,MAAM,GAAG,MAAM,EAAE,EACpD,IAAI,EACJ,KAAK,EACL,UAAU,EACV,WAAW,EACX,QAAQ,EACR,cAAc,EACd,UAAU,GACX,EAAE,aAAa,CAAC,GAAG,CAAC,qBA4DpB"}
+{"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"}

package/dist/patterns/tree-view/TreeItem.js

@@ -1,8 +1,9 @@
 import { Box, Stack } from '@ankhorage/surface';
 import React from 'react';
 import { IconButton } from '../../components/icon-button';
+import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
 import { SettingsRow } from '../settings-row';
-export function TreeItem({ node, depth, selectedId, expandedIds, onSelect, onToggleExpand, renderItem, }) {
+function TreeItemInner({ themeId: _themeId, mode: _mode, node, depth, selectedId, expandedIds, onSelect, onToggleExpand, renderItem, testID, }) {
     const hasChildren = node.children !== undefined && node.children.length > 0;
     const isExpanded = expandedIds.includes(node.id);
     const isSelected = selectedId === node.id;
@@ -21,11 +22,12 @@ export function TreeItem({ node, depth, selectedId, expandedIds, onSelect, onTog
             {hasChildren ? (<IconButton icon={{ name: isExpanded ? 'chevron-down-outline' : 'chevron-forward-outline' }} label={isExpanded ? 'Collapse' : 'Expand'} onPress={() => onToggleExpand(node.id)} size="s" emphasis="ghost"/>) : null}
           </Stack>} meta={node.meta} disabled={node.disabled}/>);
     };
-    return (<Box>
+    return (<Box testID={testID}>
       <Box style={{ paddingLeft: depth * 16 }}>{renderContent()}</Box>
       {hasChildren && isExpanded ? (<Box>
           {node.children?.map((child) => (<TreeItem key={child.id} depth={depth + 1} expandedIds={expandedIds} node={child} onSelect={onSelect} onToggleExpand={onToggleExpand} renderItem={renderItem} selectedId={selectedId}/>))}
         </Box>) : null}
     </Box>);
 }
+export const TreeItem = withZoraThemeScope(TreeItemInner);
 //# sourceMappingURL=TreeItem.js.map

package/dist/patterns/tree-view/TreeItem.js.map

@@ -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 { SettingsRow } from '../settings-row';\nimport type { TreeItemNode, TreeItemRenderProps } from './types';\n\ninterface TreeItemProps<TId extends string = string> {\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\nexport function TreeItem<TId extends string = string>({\n  node,\n  depth,\n  selectedId,\n  expandedIds,\n  onSelect,\n  onToggleExpand,\n  renderItem,\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>\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"]}
+{"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"]}

package/dist/patterns/tree-view/TreeView.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
 import type { TreeViewProps } from './types';
-export declare function TreeView<TId extends string = string>({ nodes, selectedId, expandedIds: controlledExpandedIds, defaultExpandedIds, onSelect, onExpandedChange, renderItem, testID, }: TreeViewProps<TId>): React.JSX.Element;
+export declare const TreeView: <TId extends string = string>(props: TreeViewProps<TId>) => React.ReactElement | null;
 //# sourceMappingURL=TreeView.d.ts.map

package/dist/patterns/tree-view/TreeView.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TreeView.d.ts","sourceRoot":"","sources":["../../../src/patterns/tree-view/TreeView.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAE7C,wBAAgB,QAAQ,CAAC,GAAG,SAAS,MAAM,GAAG,MAAM,EAAE,EACpD,KAAK,EACL,UAAU,EACV,WAAW,EAAE,qBAAqB,EAClC,kBAAkB,EAClB,QAAQ,EACR,gBAAgB,EAChB,UAAU,EACV,MAAM,GACP,EAAE,aAAa,CAAC,GAAG,CAAC,qBAkCpB"}
+{"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"}

package/dist/patterns/tree-view/TreeView.js

@@ -1,7 +1,8 @@
 import { Stack } from '@ankhorage/surface';
 import React from 'react';
+import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
 import { TreeItem } from './TreeItem';
-export function TreeView({ nodes, selectedId, expandedIds: controlledExpandedIds, defaultExpandedIds, onSelect, onExpandedChange, renderItem, testID, }) {
+function TreeViewInner({ themeId: _themeId, mode: _mode, nodes, selectedId, expandedIds: controlledExpandedIds, defaultExpandedIds, onSelect, onExpandedChange, renderItem, testID, }) {
     const [internalExpandedIds, setInternalExpandedIds] = React.useState(defaultExpandedIds ?? []);
     const isControlled = controlledExpandedIds !== undefined;
     const expandedIds = isControlled ? controlledExpandedIds : internalExpandedIds;
@@ -17,4 +18,5 @@ export function TreeView({ nodes, selectedId, expandedIds: controlledExpandedIds
       {nodes.map((node) => (<TreeItem key={node.id} depth={0} expandedIds={expandedIds} node={node} onSelect={onSelect} onToggleExpand={handleToggleExpand} renderItem={renderItem} selectedId={selectedId}/>))}
     </Stack>);
 }
+export const TreeView = withZoraThemeScope(TreeViewInner);
 //# sourceMappingURL=TreeView.js.map

package/dist/patterns/tree-view/TreeView.js.map

@@ -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,QAAQ,EAAE,MAAM,YAAY,CAAC;AAGtC,MAAM,UAAU,QAAQ,CAA8B,EACpD,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","sourcesContent":["import { Stack } from '@ankhorage/surface';\nimport React from 'react';\n\nimport { TreeItem } from './TreeItem';\nimport type { TreeViewProps } from './types';\n\nexport function TreeView<TId extends string = string>({\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"]}
+{"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"]}

package/dist/patterns/tree-view/types.d.ts

@@ -1,5 +1,6 @@
 import type { ButtonIconSpec } from '@ankhorage/surface';
 import type { ReactNode } from 'react';
+import type { ZoraBaseProps } from '../../theme/ZoraBaseProps';
 export interface TreeItemNode<TId extends string = string> {
     id: TId;
     label: ReactNode;
@@ -16,7 +17,7 @@ export interface TreeItemRenderProps<TId extends string = string> {
     expanded: boolean;
     hasChildren: boolean;
 }
-export interface TreeViewProps<TId extends string = string> {
+export interface TreeViewProps<TId extends string = string> extends ZoraBaseProps {
     nodes: readonly TreeItemNode<TId>[];
     selectedId?: TId;
     expandedIds?: readonly TId[];
@@ -24,6 +25,5 @@ export interface TreeViewProps<TId extends string = string> {
     onSelect?: (id: TId) => void;
     onExpandedChange?: (ids: readonly TId[]) => void;
     renderItem?: (props: TreeItemRenderProps<TId>) => ReactNode;
-    testID?: string;
 }
 //# sourceMappingURL=types.d.ts.map

package/dist/patterns/tree-view/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/patterns/tree-view/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AACzD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,MAAM,WAAW,YAAY,CAAC,GAAG,SAAS,MAAM,GAAG,MAAM;IACvD,EAAE,EAAE,GAAG,CAAC;IACR,KAAK,EAAE,SAAS,CAAC;IACjB,IAAI,CAAC,EAAE,cAAc,CAAC;IACtB,QAAQ,CAAC,EAAE,SAAS,YAAY,CAAC,GAAG,CAAC,EAAE,CAAC;IACxC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,OAAO,CAAC,EAAE,SAAS,CAAC;CACrB;AAED,MAAM,WAAW,mBAAmB,CAAC,GAAG,SAAS,MAAM,GAAG,MAAM;IAC9D,IAAI,EAAE,YAAY,CAAC,GAAG,CAAC,CAAC;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,OAAO,CAAC;IAClB,WAAW,EAAE,OAAO,CAAC;CACtB;AAED,MAAM,WAAW,aAAa,CAAC,GAAG,SAAS,MAAM,GAAG,MAAM;IACxD,KAAK,EAAE,SAAS,YAAY,CAAC,GAAG,CAAC,EAAE,CAAC;IACpC,UAAU,CAAC,EAAE,GAAG,CAAC;IACjB,WAAW,CAAC,EAAE,SAAS,GAAG,EAAE,CAAC;IAC7B,kBAAkB,CAAC,EAAE,SAAS,GAAG,EAAE,CAAC;IACpC,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,GAAG,KAAK,IAAI,CAAC;IAC7B,gBAAgB,CAAC,EAAE,CAAC,GAAG,EAAE,SAAS,GAAG,EAAE,KAAK,IAAI,CAAC;IACjD,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,mBAAmB,CAAC,GAAG,CAAC,KAAK,SAAS,CAAC;IAC5D,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/patterns/tree-view/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AACzD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAE/D,MAAM,WAAW,YAAY,CAAC,GAAG,SAAS,MAAM,GAAG,MAAM;IACvD,EAAE,EAAE,GAAG,CAAC;IACR,KAAK,EAAE,SAAS,CAAC;IACjB,IAAI,CAAC,EAAE,cAAc,CAAC;IACtB,QAAQ,CAAC,EAAE,SAAS,YAAY,CAAC,GAAG,CAAC,EAAE,CAAC;IACxC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,OAAO,CAAC,EAAE,SAAS,CAAC;CACrB;AAED,MAAM,WAAW,mBAAmB,CAAC,GAAG,SAAS,MAAM,GAAG,MAAM;IAC9D,IAAI,EAAE,YAAY,CAAC,GAAG,CAAC,CAAC;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,OAAO,CAAC;IAClB,WAAW,EAAE,OAAO,CAAC;CACtB;AAED,MAAM,WAAW,aAAa,CAAC,GAAG,SAAS,MAAM,GAAG,MAAM,CAAE,SAAQ,aAAa;IAC/E,KAAK,EAAE,SAAS,YAAY,CAAC,GAAG,CAAC,EAAE,CAAC;IACpC,UAAU,CAAC,EAAE,GAAG,CAAC;IACjB,WAAW,CAAC,EAAE,SAAS,GAAG,EAAE,CAAC;IAC7B,kBAAkB,CAAC,EAAE,SAAS,GAAG,EAAE,CAAC;IACpC,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,GAAG,KAAK,IAAI,CAAC;IAC7B,gBAAgB,CAAC,EAAE,CAAC,GAAG,EAAE,SAAS,GAAG,EAAE,KAAK,IAAI,CAAC;IACjD,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,mBAAmB,CAAC,GAAG,CAAC,KAAK,SAAS,CAAC;CAC7D"}

package/dist/patterns/tree-view/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/patterns/tree-view/types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ButtonIconSpec } from '@ankhorage/surface';\nimport type { ReactNode } from 'react';\n\nexport interface TreeItemNode<TId extends string = string> {\n  id: TId;\n  label: ReactNode;\n  icon?: ButtonIconSpec;\n  children?: readonly TreeItemNode<TId>[];\n  disabled?: boolean;\n  meta?: ReactNode;\n  actions?: ReactNode;\n}\n\nexport interface TreeItemRenderProps<TId extends string = string> {\n  node: TreeItemNode<TId>;\n  depth: number;\n  selected: boolean;\n  expanded: boolean;\n  hasChildren: boolean;\n}\n\nexport interface TreeViewProps<TId extends string = string> {\n  nodes: readonly TreeItemNode<TId>[];\n  selectedId?: TId;\n  expandedIds?: readonly TId[];\n  defaultExpandedIds?: readonly TId[];\n  onSelect?: (id: TId) => void;\n  onExpandedChange?: (ids: readonly TId[]) => void;\n  renderItem?: (props: TreeItemRenderProps<TId>) => ReactNode;\n  testID?: string;\n}\n"]}
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/patterns/tree-view/types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ButtonIconSpec } from '@ankhorage/surface';\nimport type { ReactNode } from 'react';\n\nimport type { ZoraBaseProps } from '../../theme/ZoraBaseProps';\n\nexport interface TreeItemNode<TId extends string = string> {\n  id: TId;\n  label: ReactNode;\n  icon?: ButtonIconSpec;\n  children?: readonly TreeItemNode<TId>[];\n  disabled?: boolean;\n  meta?: ReactNode;\n  actions?: ReactNode;\n}\n\nexport interface TreeItemRenderProps<TId extends string = string> {\n  node: TreeItemNode<TId>;\n  depth: number;\n  selected: boolean;\n  expanded: boolean;\n  hasChildren: boolean;\n}\n\nexport interface TreeViewProps<TId extends string = string> extends ZoraBaseProps {\n  nodes: readonly TreeItemNode<TId>[];\n  selectedId?: TId;\n  expandedIds?: readonly TId[];\n  defaultExpandedIds?: readonly TId[];\n  onSelect?: (id: TId) => void;\n  onExpandedChange?: (ids: readonly TId[]) => void;\n  renderItem?: (props: TreeItemRenderProps<TId>) => ReactNode;\n}\n"]}

package/dist/theme/withZoraThemeScope.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
 import type { ZoraBaseProps } from './ZoraBaseProps';
-export declare function withZoraThemeScope<P extends ZoraBaseProps>(Component: React.ComponentType<P>): React.FC<P>;
+export declare function withZoraThemeScope<P extends ZoraBaseProps>(Component: (props: P) => React.ReactElement | null): (props: P) => React.ReactElement | null;
 //# sourceMappingURL=withZoraThemeScope.d.ts.map

package/dist/theme/withZoraThemeScope.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"withZoraThemeScope.d.ts","sourceRoot":"","sources":["../../src/theme/withZoraThemeScope.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAGrD,wBAAgB,kBAAkB,CAAC,CAAC,SAAS,aAAa,EACxD,SAAS,EAAE,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC,GAChC,KAAK,CAAC,EAAE,CAAC,CAAC,CAAC,CAiBb"}
+{"version":3,"file":"withZoraThemeScope.d.ts","sourceRoot":"","sources":["../../src/theme/withZoraThemeScope.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAGrD,wBAAgB,kBAAkB,CAAC,CAAC,SAAS,aAAa,EACxD,SAAS,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,KAAK,CAAC,YAAY,GAAG,IAAI,GACjD,CAAC,KAAK,EAAE,CAAC,KAAK,KAAK,CAAC,YAAY,GAAG,IAAI,CAkBzC"}

package/dist/theme/withZoraThemeScope.js

@@ -3,10 +3,10 @@ import { ZoraThemeScope } from './ZoraThemeScope';
 export function withZoraThemeScope(Component) {
     const Wrapped = (props) => {
         if (props.mode === undefined && props.themeId === undefined) {
-            return <Component {...props}/>;
+            return React.createElement(Component, props);
         }
         return (<ZoraThemeScope mode={props.mode} themeId={props.themeId}>
-        <Component {...props}/>
+        {React.createElement(Component, props)}
       </ZoraThemeScope>);
     };
     const name = Component.displayName ?? (Component.name || 'Component');

package/dist/theme/withZoraThemeScope.js.map

@@ -1 +1 @@
-{"version":3,"file":"withZoraThemeScope.js","sourceRoot":"","sources":["../../src/theme/withZoraThemeScope.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAElD,MAAM,UAAU,kBAAkB,CAChC,SAAiC;IAEjC,MAAM,OAAO,GAAgB,CAAC,KAAK,EAAE,EAAE;QACrC,IAAI,KAAK,CAAC,IAAI,KAAK,SAAS,IAAI,KAAK,CAAC,OAAO,KAAK,SAAS,EAAE,CAAC;YAC5D,OAAO,CAAC,SAAS,CAAC,IAAI,KAAK,CAAC,EAAG,CAAC;QAClC,CAAC;QAED,OAAO,CACL,CAAC,cAAc,CAAC,IAAI,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,OAAO,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,CACvD;QAAA,CAAC,SAAS,CAAC,IAAI,KAAK,CAAC,EACvB;MAAA,EAAE,cAAc,CAAC,CAClB,CAAC;IACJ,CAAC,CAAC;IAEF,MAAM,IAAI,GAAG,SAAS,CAAC,WAAW,IAAI,CAAC,SAAS,CAAC,IAAI,IAAI,WAAW,CAAC,CAAC;IACtE,OAAO,CAAC,WAAW,GAAG,sBAAsB,IAAI,GAAG,CAAC;IAEpD,OAAO,OAAO,CAAC;AACjB,CAAC","sourcesContent":["import React from 'react';\n\nimport type { ZoraBaseProps } from './ZoraBaseProps';\nimport { ZoraThemeScope } from './ZoraThemeScope';\n\nexport function withZoraThemeScope<P extends ZoraBaseProps>(\n  Component: React.ComponentType<P>,\n): React.FC<P> {\n  const Wrapped: React.FC<P> = (props) => {\n    if (props.mode === undefined && props.themeId === undefined) {\n      return <Component {...props} />;\n    }\n\n    return (\n      <ZoraThemeScope mode={props.mode} themeId={props.themeId}>\n        <Component {...props} />\n      </ZoraThemeScope>\n    );\n  };\n\n  const name = Component.displayName ?? (Component.name || 'Component');\n  Wrapped.displayName = `withZoraThemeScope(${name})`;\n\n  return Wrapped;\n}\n"]}
+{"version":3,"file":"withZoraThemeScope.js","sourceRoot":"","sources":["../../src/theme/withZoraThemeScope.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAElD,MAAM,UAAU,kBAAkB,CAChC,SAAkD;IAElD,MAAM,OAAO,GAAG,CAAC,KAAQ,EAAE,EAAE;QAC3B,IAAI,KAAK,CAAC,IAAI,KAAK,SAAS,IAAI,KAAK,CAAC,OAAO,KAAK,SAAS,EAAE,CAAC;YAC5D,OAAO,KAAK,CAAC,aAAa,CAAC,SAAS,EAAE,KAAK,CAAC,CAAC;QAC/C,CAAC;QAED,OAAO,CACL,CAAC,cAAc,CAAC,IAAI,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,OAAO,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,CACvD;QAAA,CAAC,KAAK,CAAC,aAAa,CAAC,SAAS,EAAE,KAAK,CAAC,CACxC;MAAA,EAAE,cAAc,CAAC,CAClB,CAAC;IACJ,CAAC,CAAC;IAEF,MAAM,IAAI,GACP,SAAsC,CAAC,WAAW,IAAI,CAAC,SAAS,CAAC,IAAI,IAAI,WAAW,CAAC,CAAC;IACxF,OAAoC,CAAC,WAAW,GAAG,sBAAsB,IAAI,GAAG,CAAC;IAElF,OAAO,OAAO,CAAC;AACjB,CAAC","sourcesContent":["import React from 'react';\n\nimport type { ZoraBaseProps } from './ZoraBaseProps';\nimport { ZoraThemeScope } from './ZoraThemeScope';\n\nexport function withZoraThemeScope<P extends ZoraBaseProps>(\n  Component: (props: P) => React.ReactElement | null,\n): (props: P) => React.ReactElement | null {\n  const Wrapped = (props: P) => {\n    if (props.mode === undefined && props.themeId === undefined) {\n      return React.createElement(Component, props);\n    }\n\n    return (\n      <ZoraThemeScope mode={props.mode} themeId={props.themeId}>\n        {React.createElement(Component, props)}\n      </ZoraThemeScope>\n    );\n  };\n\n  const name =\n    (Component as { displayName?: string }).displayName ?? (Component.name || 'Component');\n  (Wrapped as { displayName?: string }).displayName = `withZoraThemeScope(${name})`;\n\n  return Wrapped;\n}\n"]}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ankhorage/zora",
   "type": "module",
-  "version": "0.10.0",
+  "version": "0.11.0",
   "description": "Opinionated React Native and React Native Web UI kit built on @ankhorage/surface.",
   "homepage": "https://github.com/ankhorage/zora#readme",
   "bugs": {

package/src/components/badge/Badge.tsx

@@ -2,9 +2,18 @@ import { Badge as SurfaceBadge } from '@ankhorage/surface';
 import React from 'react';
 
 import { resolveBadgeRecipe } from '../../internal/recipes';
+import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
 import type { BadgeProps } from './types';
 
-export function Badge({ children, tone, emphasis, size, ...props }: BadgeProps) {
+function BadgeInner({
+  themeId: _themeId,
+  mode: _mode,
+  children,
+  tone,
+  emphasis,
+  size,
+  ...props
+}: BadgeProps) {
   const recipe = resolveBadgeRecipe({ tone, emphasis, size });
 
   return (
@@ -17,3 +26,5 @@ export function Badge({ children, tone, emphasis, size, ...props }: BadgeProps)
     />
   );
 }
+
+export const Badge = withZoraThemeScope(BadgeInner);

package/src/components/badge/types.ts

@@ -2,11 +2,12 @@ import type { BadgeProps as SurfaceBadgeProps } from '@ankhorage/surface';
 import type React from 'react';
 
 import type { ZoraBadgeEmphasis, ZoraControlSize, ZoraTone } from '../../internal/recipes';
+import type { ZoraBaseProps } from '../../theme/ZoraBaseProps';
 
-export interface BadgeProps extends Omit<
-  SurfaceBadgeProps,
-  'content' | 'size' | 'tone' | 'variant'
-> {
+export interface BadgeProps
+  extends
+    ZoraBaseProps,
+    Omit<SurfaceBadgeProps, 'content' | 'size' | 'tone' | 'variant' | 'mode' | 'themeId'> {
   children?: React.ReactNode;
   tone?: ZoraTone;
   emphasis?: ZoraBadgeEmphasis;

package/src/components/checkbox/Checkbox.tsx

@@ -0,0 +1,11 @@
+import { Checkbox as SurfaceCheckbox } from '@ankhorage/surface';
+import React from 'react';
+
+import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
+import type { CheckboxProps } from './types';
+
+function CheckboxInner({ themeId: _themeId, mode: _mode, ...props }: CheckboxProps) {
+  return <SurfaceCheckbox {...props} />;
+}
+
+export const Checkbox = withZoraThemeScope(CheckboxInner);

package/src/components/checkbox/CheckboxGroup.tsx

@@ -2,10 +2,13 @@ import { Checkbox, Stack } from '@ankhorage/surface';
 import React from 'react';
 import { View } from 'react-native';
 
+import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
 import { Text } from '../text';
 import type { CheckboxGroupOption, CheckboxGroupProps } from './types';
 
-export function CheckboxGroup<TValue extends string>({
+function CheckboxGroupInner<TValue extends string>({
+  themeId: _themeId,
+  mode: _mode,
   value,
   onValueChange,
   options,
@@ -53,6 +56,8 @@ export function CheckboxGroup<TValue extends string>({
   );
 }
 
+export const CheckboxGroup = withZoraThemeScope(CheckboxGroupInner);
+
 function CheckboxGroupItem<TValue extends string>({
   option,
   checked,

package/src/components/checkbox/index.ts

@@ -1,4 +1,3 @@
+export { Checkbox } from './Checkbox';
 export { CheckboxGroup } from './CheckboxGroup';
-export type { CheckboxGroupOption, CheckboxGroupProps } from './types';
-export type { CheckboxProps } from '@ankhorage/surface';
-export { Checkbox } from '@ankhorage/surface';
+export type { CheckboxGroupOption, CheckboxGroupProps, CheckboxProps } from './types';

package/src/components/checkbox/types.ts

@@ -1,6 +1,11 @@
-import type { CheckboxProps } from '@ankhorage/surface';
+import type { CheckboxProps as SurfaceCheckboxProps } from '@ankhorage/surface';
 import type React from 'react';
 
+import type { ZoraBaseProps } from '../../theme/ZoraBaseProps';
+
+export interface CheckboxProps
+  extends ZoraBaseProps, Omit<SurfaceCheckboxProps, 'mode' | 'themeId'> {}
+
 export interface CheckboxGroupOption<TValue extends string> {
   value: TValue;
   label: React.ReactNode;
@@ -9,10 +14,13 @@ export interface CheckboxGroupOption<TValue extends string> {
   testID?: string;
 }
 
-export interface CheckboxGroupProps<TValue extends string> extends Pick<
-  CheckboxProps,
-  'tone' | 'size' | 'invalid' | 'readOnly' | 'disabled' | 'testID'
-> {
+export interface CheckboxGroupProps<TValue extends string>
+  extends
+    ZoraBaseProps,
+    Pick<
+      Omit<SurfaceCheckboxProps, 'mode' | 'themeId'>,
+      'tone' | 'size' | 'invalid' | 'readOnly' | 'disabled'
+    > {
   value: readonly TValue[];
   onValueChange: (value: TValue[]) => void;
   options: readonly CheckboxGroupOption<TValue>[];

package/src/components/drawer/Drawer.tsx

@@ -1,6 +1,7 @@
 import { Box, Drawer as SurfaceDrawer, Stack } from '@ankhorage/surface';
 import React, { useCallback, useEffect, useRef } from 'react';
 
+import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
 import { Heading } from '../heading';
 import { Text } from '../text';
 import type { DrawerProps } from './types';
@@ -17,7 +18,16 @@ function useStableCallback(callback: (() => void) | undefined): (() => void) | u
   }, []);
 }
 
-export function Drawer({ children, title, description, footer, onDismiss, ...props }: DrawerProps) {
+function DrawerInner({
+  themeId: _themeId,
+  mode: _mode,
+  children,
+  title,
+  description,
+  footer,
+  onDismiss,
+  ...props
+}: DrawerProps) {
   const hasHeader = title != null || description != null;
   const stableOnDismiss = useStableCallback(onDismiss);
 
@@ -40,3 +50,5 @@ export function Drawer({ children, title, description, footer, onDismiss, ...pro
     </SurfaceDrawer>
   );
 }
+
+export const Drawer = withZoraThemeScope(DrawerInner);