@ankhorage/zora 0.10.0 → 0.12.0

package/dist/theme/createZoraThemeConfig.js

@@ -1,9 +1,5 @@
+import { resolveModePrimaryColor } from '../internal/color';
 import { zoraDefaultTheme } from './zoraDefaultTheme';
-function resolveModePrimaryColor(primaryColor, _mode) {
-    // Intentionally conservative in Plan 1: mode-specific primary derivation
-    // (OKLCH/lightness scale, etc.) comes in later theme-engine work.
-    return primaryColor;
-}
 export function createZoraThemeConfig(theme = zoraDefaultTheme) {
     return {
         id: theme.id,

package/dist/theme/createZoraThemeConfig.js.map

@@ -1 +1 @@
-{"version":3,"file":"createZoraThemeConfig.js","sourceRoot":"","sources":["../../src/theme/createZoraThemeConfig.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAEtD,SAAS,uBAAuB,CAAC,YAA0B,EAAE,KAAoB;IAC/E,yEAAyE;IACzE,kEAAkE;IAClE,OAAO,YAAY,CAAC;AACtB,CAAC;AAED,MAAM,UAAU,qBAAqB,CAAC,QAAmB,gBAAgB;IACvE,OAAO;QACL,EAAE,EAAE,KAAK,CAAC,EAAE;QACZ,IAAI,EAAE,KAAK,CAAC,IAAI,IAAI,KAAK,CAAC,EAAE;QAC5B,KAAK,EAAE;YACL,YAAY,EAAE,uBAAuB,CAAC,KAAK,CAAC,YAAY,EAAE,OAAO,CAAC;YAClE,OAAO,EAAE,KAAK,CAAC,OAAO;YACtB,UAAU,EAAE,KAAK,CAAC,IAAI;SACvB;QACD,IAAI,EAAE;YACJ,YAAY,EAAE,uBAAuB,CAAC,KAAK,CAAC,YAAY,EAAE,MAAM,CAAC;YACjE,OAAO,EAAE,KAAK,CAAC,OAAO;YACtB,UAAU,EAAE,KAAK,CAAC,IAAI;SACvB;KACF,CAAC;AACJ,CAAC","sourcesContent":["import type { ThemeConfig } from '@ankhorage/surface';\n\nimport type { ZoraHexColor, ZoraTheme, ZoraThemeMode } from './types';\nimport { zoraDefaultTheme } from './zoraDefaultTheme';\n\nfunction resolveModePrimaryColor(primaryColor: ZoraHexColor, _mode: ZoraThemeMode): ZoraHexColor {\n  // Intentionally conservative in Plan 1: mode-specific primary derivation\n  // (OKLCH/lightness scale, etc.) comes in later theme-engine work.\n  return primaryColor;\n}\n\nexport function createZoraThemeConfig(theme: ZoraTheme = zoraDefaultTheme): ThemeConfig {\n  return {\n    id: theme.id,\n    name: theme.name ?? theme.id,\n    light: {\n      primaryColor: resolveModePrimaryColor(theme.primaryColor, 'light'),\n      harmony: theme.harmony,\n      systemTone: theme.tone,\n    },\n    dark: {\n      primaryColor: resolveModePrimaryColor(theme.primaryColor, 'dark'),\n      harmony: theme.harmony,\n      systemTone: theme.tone,\n    },\n  };\n}\n"]}
+{"version":3,"file":"createZoraThemeConfig.js","sourceRoot":"","sources":["../../src/theme/createZoraThemeConfig.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,uBAAuB,EAAE,MAAM,mBAAmB,CAAC;AAE5D,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAEtD,MAAM,UAAU,qBAAqB,CAAC,QAAmB,gBAAgB;IACvE,OAAO;QACL,EAAE,EAAE,KAAK,CAAC,EAAE;QACZ,IAAI,EAAE,KAAK,CAAC,IAAI,IAAI,KAAK,CAAC,EAAE;QAC5B,KAAK,EAAE;YACL,YAAY,EAAE,uBAAuB,CAAC,KAAK,CAAC,YAAY,EAAE,OAAO,CAAC;YAClE,OAAO,EAAE,KAAK,CAAC,OAAO;YACtB,UAAU,EAAE,KAAK,CAAC,IAAI;SACvB;QACD,IAAI,EAAE;YACJ,YAAY,EAAE,uBAAuB,CAAC,KAAK,CAAC,YAAY,EAAE,MAAM,CAAC;YACjE,OAAO,EAAE,KAAK,CAAC,OAAO;YACtB,UAAU,EAAE,KAAK,CAAC,IAAI;SACvB;KACF,CAAC;AACJ,CAAC","sourcesContent":["import type { ThemeConfig } from '@ankhorage/surface';\n\nimport { resolveModePrimaryColor } from '../internal/color';\nimport type { ZoraTheme } from './types';\nimport { zoraDefaultTheme } from './zoraDefaultTheme';\n\nexport function createZoraThemeConfig(theme: ZoraTheme = zoraDefaultTheme): ThemeConfig {\n  return {\n    id: theme.id,\n    name: theme.name ?? theme.id,\n    light: {\n      primaryColor: resolveModePrimaryColor(theme.primaryColor, 'light'),\n      harmony: theme.harmony,\n      systemTone: theme.tone,\n    },\n    dark: {\n      primaryColor: resolveModePrimaryColor(theme.primaryColor, 'dark'),\n      harmony: theme.harmony,\n      systemTone: theme.tone,\n    },\n  };\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.12.0",
   "description": "Opinionated React Native and React Native Web UI kit built on @ankhorage/surface.",
   "homepage": "https://github.com/ankhorage/zora#readme",
   "bugs": {
@@ -43,7 +43,8 @@
     }
   },
   "dependencies": {
-    "@ankhorage/surface": "^0.1.12"
+    "@ankhorage/surface": "^0.1.12",
+    "culori": "^4.0.2"
   },
   "files": [
     "dist",
@@ -84,6 +85,7 @@
     "@changesets/cli": "^2.31.0",
     "@expo/vector-icons": "^15.1.1",
     "@react-native-picker/picker": "^2.11.4",
+    "@types/culori": "^4.0.1",
     "@types/bun": "^1.3.13",
     "@types/node": "^25.6.0",
     "@types/react": "^19.2.14",

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);

package/src/components/drawer/types.ts

@@ -1,10 +1,15 @@
 import type { DrawerProps as SurfaceDrawerProps } from '@ankhorage/surface';
 import type React from 'react';
 
-export interface DrawerProps extends Pick<
-  SurfaceDrawerProps,
-  'closeOnBackdrop' | 'onDismiss' | 'position' | 'testID' | 'visible'
-> {
+import type { ZoraBaseProps } from '../../theme/ZoraBaseProps';
+
+export interface DrawerProps
+  extends
+    ZoraBaseProps,
+    Pick<
+      Omit<SurfaceDrawerProps, 'mode' | 'themeId'>,
+      'closeOnBackdrop' | 'onDismiss' | 'position' | 'visible'
+    > {
   children?: React.ReactNode;
   title?: React.ReactNode;
   description?: React.ReactNode;

package/src/components/form/Form.tsx

@@ -1,13 +1,16 @@
 import { Box, Stack } from '@ankhorage/surface';
 import React from 'react';
 
+import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
 import { FormActions } from './FormActions';
 import { FormError } from './FormError';
 import { FormField } from './FormField';
 import type { FormProps } from './types';
 import { useFormController } from './useFormController';
 
-export function Form<TName extends string = string>({
+function FormInner<TName extends string = string>({
+  themeId: _themeId,
+  mode: _mode,
   fields,
   values,
   onChange,
@@ -59,3 +62,5 @@ export function Form<TName extends string = string>({
     </Stack>
   );
 }
+
+export const Form = withZoraThemeScope(FormInner);

package/src/components/form/FormActions.tsx

@@ -1,10 +1,13 @@
 import { Box, Stack } from '@ankhorage/surface';
 import React from 'react';
 
+import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
 import { Button } from '../button';
 import type { FormActionsProps } from './types';
 
-export function FormActions({
+function FormActionsInner({
+  themeId: _themeId,
+  mode: _mode,
   submitLabel = 'Submit',
   loading = false,
   disabled = false,
@@ -21,3 +24,5 @@ export function FormActions({
     </Stack>
   );
 }
+
+export const FormActions = withZoraThemeScope(FormActionsInner);

package/src/components/form/FormError.tsx

@@ -1,11 +1,13 @@
-import { Box, useTheme } from '@ankhorage/surface';
+import { Box } from '@ankhorage/surface';
 import React from 'react';
 
+import { useZoraTheme } from '../../theme/useZoraTheme';
+import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
 import { Text } from '../text';
 import type { FormErrorProps } from './types';
 
-export function FormError({ error, testID }: FormErrorProps) {
-  const { theme } = useTheme();
+function FormErrorInner({ themeId: _themeId, mode: _mode, error, testID }: FormErrorProps) {
+  const { theme } = useZoraTheme();
 
   if (!error) {
     return null;
@@ -19,3 +21,5 @@ export function FormError({ error, testID }: FormErrorProps) {
     </Box>
   );
 }
+
+export const FormError = withZoraThemeScope(FormErrorInner);

package/src/components/form/FormField.tsx

@@ -1,6 +1,7 @@
 import { Field, Stack } from '@ankhorage/surface';
 import React from 'react';
 
+import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
 import { Input } from '../input';
 import { Text } from '../text';
 import type { FormFieldConfig, FormFieldControlProps, FormFieldProps } from './types';
@@ -83,9 +84,17 @@ function renderLabel(label: React.ReactNode, description: React.ReactNode | unde
   );
 }
 
-export function FormField<TName extends string = string>(props: FormFieldProps<TName>) {
+function FormFieldInner<TName extends string = string>(props: FormFieldProps<TName>) {
   if (!isControlFieldProps(props)) {
-    const { label, description, helperText, children, ...fieldProps } = props;
+    const {
+      themeId: _themeId,
+      mode: _mode,
+      label,
+      description,
+      helperText,
+      children,
+      ...fieldProps
+    } = props;
 
     return (
       <Field {...fieldProps} helperText={helperText} label={renderLabel(label, description)}>
@@ -94,7 +103,17 @@ export function FormField<TName extends string = string>(props: FormFieldProps<T
     );
   }
 
-  const { field, value, error, disabled = false, loading = false, onChange, testID } = props;
+  const {
+    themeId: _themeId,
+    mode: _mode,
+    field,
+    value,
+    error,
+    disabled = false,
+    loading = false,
+    onChange,
+    testID,
+  } = props;
   const fieldDisabled = disabled || loading || field.disabled;
   const required = field.required ?? hasRequiredRule(field.rules);
 
@@ -127,3 +146,5 @@ export function FormField<TName extends string = string>(props: FormFieldProps<T
     </Field>
   );
 }
+
+export const FormField = withZoraThemeScope(FormFieldInner);

package/src/components/form/types.ts

@@ -1,6 +1,7 @@
 import type { FieldProps as SurfaceFieldProps } from '@ankhorage/surface';
 import type React from 'react';
 
+import type { ZoraBaseProps } from '../../theme/ZoraBaseProps';
 import type { InputProps } from '../input';
 
 export type ValidationRule =
@@ -36,44 +37,44 @@ export interface FormFieldConfig<TName extends string = string> {
   testID?: string;
 }
 
-export interface FormFieldWrapperProps extends Pick<
-  SurfaceFieldProps,
-  'children' | 'disabled' | 'errorText' | 'invalid' | 'readOnly' | 'required' | 'testID'
-> {
+export interface FormFieldWrapperProps
+  extends
+    ZoraBaseProps,
+    Pick<
+      Omit<SurfaceFieldProps, 'mode' | 'themeId'>,
+      'children' | 'disabled' | 'errorText' | 'invalid' | 'readOnly' | 'required'
+    > {
   label: React.ReactNode;
   description?: React.ReactNode;
   helperText?: React.ReactNode;
 }
 
-export interface FormFieldControlProps<TName extends string = string> {
+export interface FormFieldControlProps<TName extends string = string> extends ZoraBaseProps {
   field: FormFieldConfig<TName>;
   value: FormFieldValue;
   onChange: (name: TName, value: FormFieldValue) => void;
   error?: React.ReactNode;
   disabled?: boolean;
   loading?: boolean;
-  testID?: string;
 }
 
 export type FormFieldProps<TName extends string = string> =
   | FormFieldControlProps<TName>
   | FormFieldWrapperProps;
 
-export interface FormActionsProps {
+export interface FormActionsProps extends ZoraBaseProps {
   submitLabel?: React.ReactNode;
   loading?: boolean;
   disabled?: boolean;
   onSubmit?: () => void;
   children?: React.ReactNode;
-  testID?: string;
 }
 
-export interface FormErrorProps {
+export interface FormErrorProps extends ZoraBaseProps {
   error?: React.ReactNode;
-  testID?: string;
 }
 
-export interface FormProps<TName extends string = string> {
+export interface FormProps<TName extends string = string> extends ZoraBaseProps {
   fields: readonly FormFieldConfig<TName>[];
   values: FormValues<TName>;
   onChange: (values: FormValues<TName>) => void;
@@ -86,7 +87,6 @@ export interface FormProps<TName extends string = string> {
   actions?: React.ReactNode;
   footer?: React.ReactNode;
   validateOnChange?: boolean;
-  testID?: string;
 }
 
 export interface FormValidationResult<TName extends string = string> {

package/src/components/icon/Icon.tsx

@@ -4,7 +4,7 @@ import React from 'react';
 import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
 import type { ZoraBaseProps } from '../../theme/ZoraBaseProps';
 
-export interface IconProps extends ZoraBaseProps, SurfaceIconProps {}
+export interface IconProps extends ZoraBaseProps, Omit<SurfaceIconProps, 'mode' | 'themeId'> {}
 
 function IconInner({ themeId: _themeId, mode: _mode, ...props }: IconProps) {
   return <SurfaceIcon {...props} />;

package/src/components/input/Input.tsx

@@ -2,10 +2,19 @@ import * as Surface from '@ankhorage/surface';
 import React from 'react';
 
 import { resolveIconSize } from '../../internal/recipes';
+import { useZoraTheme } from '../../theme/useZoraTheme';
+import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
 import type { InputProps } from './types';
 
-export function Input({ size = 'l', leadingIcon, trailingIcon, ...props }: InputProps) {
-  const { theme } = Surface.useTheme();
+function InputInner({
+  themeId: _themeId,
+  mode: _mode,
+  size = 'l',
+  leadingIcon,
+  trailingIcon,
+  ...props
+}: InputProps) {
+  const { theme } = useZoraTheme();
   const iconSize = resolveIconSize(size);
   const iconColor = theme.semantics.content.muted;
 
@@ -36,3 +45,5 @@ export function Input({ size = 'l', leadingIcon, trailingIcon, ...props }: Input
     />
   );
 }
+
+export const Input = withZoraThemeScope(InputInner);

package/src/components/input/types.ts

@@ -1,11 +1,15 @@
 import type * as Surface from '@ankhorage/surface';
 
 import type { ZoraControlSize } from '../../internal/recipes';
+import type { ZoraBaseProps } from '../../theme/ZoraBaseProps';
 
-export interface InputProps extends Omit<
-  Surface.TextInputProps,
-  'leadingAccessory' | 'size' | 'trailingAccessory'
-> {
+export interface InputProps
+  extends
+    ZoraBaseProps,
+    Omit<
+      Surface.TextInputProps,
+      'leadingAccessory' | 'size' | 'trailingAccessory' | 'mode' | 'themeId'
+    > {
   size?: ZoraControlSize;
   leadingIcon?: Surface.ButtonIconSpec;
   trailingIcon?: Surface.ButtonIconSpec;

package/src/components/modal/Modal.tsx

@@ -2,6 +2,7 @@ import { Box, Modal as SurfaceModal, Stack } from '@ankhorage/surface';
 import React, { useCallback, useEffect, useRef } from 'react';
 
 import { resolveDialogWidth } from '../../internal/recipes';
+import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
 import { Heading } from '../heading';
 import { Text } from '../text';
 import type { ModalProps } from './types';
@@ -18,7 +19,9 @@ function useStableCallback(callback: (() => void) | undefined): (() => void) | u
   }, []);
 }
 
-export function Modal({
+function ModalInner({
+  themeId: _themeId,
+  mode: _mode,
   children,
   title,
   description,
@@ -51,3 +54,5 @@ export function Modal({
     </SurfaceModal>
   );
 }
+
+export const Modal = withZoraThemeScope(ModalInner);

package/src/components/modal/types.ts

@@ -2,11 +2,12 @@ import type { ModalProps as SurfaceModalProps } from '@ankhorage/surface';
 import type React from 'react';
 
 import type { ZoraContentWidth } from '../../internal/recipes';
+import type { ZoraBaseProps } from '../../theme/ZoraBaseProps';
 
-export interface ModalProps extends Pick<
-  SurfaceModalProps,
-  'closeOnBackdrop' | 'onDismiss' | 'testID' | 'visible'
-> {
+export interface ModalProps
+  extends
+    ZoraBaseProps,
+    Pick<Omit<SurfaceModalProps, 'mode' | 'themeId'>, 'closeOnBackdrop' | 'onDismiss' | 'visible'> {
   children?: React.ReactNode;
   title?: React.ReactNode;
   description?: React.ReactNode;

package/src/components/radio/Radio.tsx

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

package/src/components/radio/RadioGroup.tsx

@@ -2,10 +2,13 @@ import { Radio, Stack } from '@ankhorage/surface';
 import React from 'react';
 import { View } from 'react-native';
 
+import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
 import { Text } from '../text';
 import type { RadioGroupOption, RadioGroupProps } from './types';
 
-export function RadioGroup<TValue extends string>({
+function RadioGroupInner<TValue extends string>({
+  themeId: _themeId,
+  mode: _mode,
   value,
   onValueChange,
   options,
@@ -52,6 +55,8 @@ export function RadioGroup<TValue extends string>({
   );
 }
 
+export const RadioGroup = withZoraThemeScope(RadioGroupInner);
+
 function RadioGroupItem<TValue extends string>({
   option,
   checked,

package/src/components/radio/index.ts

@@ -1,4 +1,3 @@
+export { Radio } from './Radio';
 export { RadioGroup } from './RadioGroup';
-export type { RadioGroupOption, RadioGroupProps } from './types';
-export type { RadioProps } from '@ankhorage/surface';
-export { Radio } from '@ankhorage/surface';
+export type { RadioGroupOption, RadioGroupProps, RadioProps } from './types';

package/src/components/radio/types.ts

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