@ankhorage/zora 0.9.0 → 0.11.0

package/dist/theme/withZoraThemeScope.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import type { ZoraBaseProps } from './ZoraBaseProps';
+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

@@ -0,0 +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,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

@@ -0,0 +1,16 @@
+import React from 'react';
+import { ZoraThemeScope } from './ZoraThemeScope';
+export function withZoraThemeScope(Component) {
+    const Wrapped = (props) => {
+        if (props.mode === undefined && props.themeId === undefined) {
+            return React.createElement(Component, props);
+        }
+        return (<ZoraThemeScope mode={props.mode} themeId={props.themeId}>
+        {React.createElement(Component, props)}
+      </ZoraThemeScope>);
+    };
+    const name = Component.displayName ?? (Component.name || 'Component');
+    Wrapped.displayName = `withZoraThemeScope(${name})`;
+    return Wrapped;
+}
+//# sourceMappingURL=withZoraThemeScope.js.map

package/dist/theme/withZoraThemeScope.js.map

@@ -0,0 +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,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.9.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/button/Button.tsx

@@ -2,12 +2,22 @@ import { Button as SurfaceButton } from '@ankhorage/surface';
 import React from 'react';
 
 import { resolveButtonRecipe } from '../../internal/recipes';
+import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
 import type { ButtonProps } from './types';
 
-export function Button({ tone, emphasis, size, ...props }: ButtonProps) {
+function ButtonInner({
+  themeId: _themeId,
+  mode: _mode,
+  tone,
+  emphasis,
+  size,
+  ...props
+}: ButtonProps) {
   const recipe = resolveButtonRecipe({ tone, emphasis, size });
 
   return (
     <SurfaceButton {...props} size={recipe.size} tone={recipe.tone} variant={recipe.variant} />
   );
 }
+
+export const Button = withZoraThemeScope(ButtonInner);

package/src/components/button/types.ts

@@ -2,11 +2,10 @@ import type { ButtonIconSpec, ButtonProps as SurfaceButtonProps } from '@ankhora
 import type React from 'react';
 
 import type { ZoraControlSize, ZoraEmphasis, ZoraTone } from '../../internal/recipes';
+import type { ZoraBaseProps } from '../../theme/ZoraBaseProps';
 
-export interface ButtonProps extends Omit<
-  SurfaceButtonProps,
-  'children' | 'size' | 'tone' | 'variant'
-> {
+export interface ButtonProps
+  extends ZoraBaseProps, Omit<SurfaceButtonProps, 'children' | 'size' | 'tone' | 'variant'> {
   children?: React.ReactNode;
   tone?: ZoraTone;
   emphasis?: ZoraEmphasis;

package/src/components/card/Card.tsx

@@ -2,11 +2,14 @@ import { Box, Card as SurfaceCard, Stack } from '@ankhorage/surface';
 import React from 'react';
 
 import { resolveCardVariant } from '../../internal/recipes';
+import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
 import { Heading } from '../heading';
 import { Text } from '../text';
 import type { CardProps } from './types';
 
-export function Card({
+function CardInner({
+  themeId: _themeId,
+  mode: _mode,
   children,
   title,
   description,
@@ -65,3 +68,5 @@ export function Card({
     </SurfaceCard>
   );
 }
+
+export const Card = withZoraThemeScope(CardInner);

package/src/components/card/types.ts

@@ -2,8 +2,10 @@ import type { CardProps as SurfaceCardProps } from '@ankhorage/surface';
 import type React from 'react';
 
 import type { ZoraCardTone } from '../../internal/recipes';
+import type { ZoraBaseProps } from '../../theme/ZoraBaseProps';
 
-export interface CardProps extends Omit<SurfaceCardProps, 'children' | 'p' | 'radius' | 'variant'> {
+export interface CardProps
+  extends ZoraBaseProps, Omit<SurfaceCardProps, 'children' | 'p' | 'radius' | 'variant'> {
   children?: React.ReactNode;
   title?: React.ReactNode;
   description?: React.ReactNode;

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/heading/Heading.tsx

@@ -3,6 +3,7 @@ import React from 'react';
 import { Text as ReactNativeText } from 'react-native';
 
 import { useZoraTheme } from '../../theme/useZoraTheme';
+import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
 import { resolveHeadingRecipe, resolveHeadingSizeFromLevel } from './resolveHeadingRecipe';
 import type { HeadingProps } from './types';
 
@@ -30,7 +31,9 @@ function resolveHeadingContent({
   return i18nKey;
 }
 
-export function Heading({
+function HeadingInner({
+  themeId: _themeId,
+  mode: _mode,
   children,
   text,
   i18nKey,
@@ -84,3 +87,5 @@ export function Heading({
     </ReactNativeText>
   );
 }
+
+export const Heading = withZoraThemeScope(HeadingInner);

package/src/components/heading/types.ts

@@ -2,6 +2,8 @@ import type { Responsive } from '@ankhorage/surface';
 import type React from 'react';
 import type { AccessibilityRole, TextStyle } from 'react-native';
 
+import type { ZoraBaseProps } from '../../theme/ZoraBaseProps';
+
 export type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;
 
 export type HeadingSize = 'display' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
@@ -20,7 +22,7 @@ export type HeadingAlign = NonNullable<TextStyle['textAlign']>;
 
 export type HeadingWeight = 'regular' | 'medium' | 'semiBold' | 'bold';
 
-export interface HeadingProps {
+export interface HeadingProps extends ZoraBaseProps {
   children?: React.ReactNode;
   text?: string;
   i18nKey?: string;
@@ -37,5 +39,4 @@ export interface HeadingProps {
   accessibilityHint?: string;
   accessibilityRole?: AccessibilityRole;
   nativeID?: string;
-  testID?: string;
 }

package/src/components/icon/Icon.tsx

@@ -1,8 +1,13 @@
 import { Icon as SurfaceIcon, type IconProps as SurfaceIconProps } from '@ankhorage/surface';
 import React from 'react';
 
-export type IconProps = SurfaceIconProps;
+import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
+import type { ZoraBaseProps } from '../../theme/ZoraBaseProps';
 
-export function Icon(props: IconProps) {
+export interface IconProps extends ZoraBaseProps, Omit<SurfaceIconProps, 'mode' | 'themeId'> {}
+
+function IconInner({ themeId: _themeId, mode: _mode, ...props }: IconProps) {
   return <SurfaceIcon {...props} />;
 }
+
+export const Icon = withZoraThemeScope(IconInner);

package/src/components/icon-button/IconButton.tsx

@@ -2,9 +2,12 @@ import { IconButton as SurfaceIconButton } from '@ankhorage/surface';
 import React from 'react';
 
 import { resolveButtonRecipe } from '../../internal/recipes';
+import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
 import type { IconButtonProps } from './types';
 
-export function IconButton({
+function IconButtonInner({
+  themeId: _themeId,
+  mode: _mode,
   icon,
   label,
   emphasis = 'ghost',
@@ -25,3 +28,5 @@ export function IconButton({
     />
   );
 }
+
+export const IconButton = withZoraThemeScope(IconButtonInner);

package/src/components/icon-button/types.ts

@@ -1,8 +1,9 @@
 import type { ButtonIconSpec } from '@ankhorage/surface';
 
 import type { ZoraControlSize, ZoraEmphasis, ZoraTone } from '../../internal/recipes';
+import type { ZoraBaseProps } from '../../theme/ZoraBaseProps';
 
-export interface IconButtonProps {
+export interface IconButtonProps extends ZoraBaseProps {
   icon: ButtonIconSpec;
   label: string;
   emphasis?: ZoraEmphasis;

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