@ankhorage/zora 0.10.0 → 0.11.0

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>[];

package/src/components/select/Select.tsx

@@ -1,10 +1,14 @@
-import { Box, useTheme } from '@ankhorage/surface';
+import { Box } from '@ankhorage/surface';
 import { Picker } from '@react-native-picker/picker';
 import React from 'react';
 
+import { useZoraTheme } from '../../theme/useZoraTheme';
+import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
 import type { SelectProps } from './types';
 
-export function Select<TValue extends string = string>({
+function SelectInner<TValue extends string = string>({
+  themeId: _themeId,
+  mode: _mode,
   value,
   options,
   onValueChange,
@@ -12,7 +16,7 @@ export function Select<TValue extends string = string>({
   invalid,
   testID,
 }: SelectProps<TValue>) {
-  const { theme } = useTheme();
+  const { theme } = useZoraTheme();
 
   return (
     <Box
@@ -47,3 +51,5 @@ export function Select<TValue extends string = string>({
     </Box>
   );
 }
+
+export const Select = withZoraThemeScope(SelectInner);

package/src/components/select/types.ts

@@ -1,14 +1,15 @@
+import type { ZoraBaseProps } from '../../theme/ZoraBaseProps';
+
 export interface SelectOption<TValue extends string = string> {
   value: TValue;
   label: string;
   disabled?: boolean;
 }
 
-export interface SelectProps<TValue extends string = string> {
+export interface SelectProps<TValue extends string = string> extends ZoraBaseProps {
   value: TValue;
   options: readonly SelectOption<TValue>[];
   onValueChange: (value: TValue) => void;
   disabled?: boolean;
   invalid?: boolean;
-  testID?: string;
 }

package/src/components/tabs/Tabs.tsx

@@ -1,11 +1,15 @@
-import { Box, Stack, useTheme } from '@ankhorage/surface';
+import { Box, Stack } from '@ankhorage/surface';
 import React from 'react';
 
+import { useZoraTheme } from '../../theme/useZoraTheme';
+import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
 import { Button } from '../button';
 import { Text } from '../text';
 import type { TabItem, TabsProps } from './types';
 
-export function Tabs<TValue extends string = string>({
+function TabsInner<TValue extends string = string>({
+  themeId: _themeId,
+  mode: _mode,
   value,
   items,
   onValueChange,
@@ -14,7 +18,7 @@ export function Tabs<TValue extends string = string>({
   disabled: tabsDisabled,
   testID,
 }: TabsProps<TValue>) {
-  const { theme } = useTheme();
+  const { theme } = useZoraTheme();
 
   const renderTab = (item: TabItem<TValue>) => {
     const isActive = item.value === value;
@@ -98,3 +102,5 @@ export function Tabs<TValue extends string = string>({
     </Stack>
   );
 }
+
+export const Tabs = withZoraThemeScope(TabsInner);

package/src/components/tabs/types.ts

@@ -2,6 +2,7 @@ import type { ButtonIconSpec } from '@ankhorage/surface';
 import type { ReactNode } from 'react';
 
 import type { ZoraControlSize } from '../../internal/recipes';
+import type { ZoraBaseProps } from '../../theme/ZoraBaseProps';
 
 export interface TabItem<TValue extends string = string> {
   value: TValue;
@@ -14,12 +15,11 @@ export interface TabItem<TValue extends string = string> {
 
 export type TabsVariant = 'underline' | 'pill' | 'segmented';
 
-export interface TabsProps<TValue extends string = string> {
+export interface TabsProps<TValue extends string = string> extends ZoraBaseProps {
   value: TValue;
   items: readonly TabItem<TValue>[];
   onValueChange: (value: TValue) => void;
   variant?: TabsVariant;
   size?: ZoraControlSize;
   disabled?: boolean;
-  testID?: string;
 }

package/src/components/textarea/Textarea.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 { TextareaProps } from './types';
 
-export function Textarea({ size = 'l', leadingIcon, trailingIcon, ...props }: TextareaProps) {
-  const { theme } = Surface.useTheme();
+function TextareaInner({
+  themeId: _themeId,
+  mode: _mode,
+  size = 'l',
+  leadingIcon,
+  trailingIcon,
+  ...props
+}: TextareaProps) {
+  const { theme } = useZoraTheme();
   const iconSize = resolveIconSize(size);
   const iconColor = theme.semantics.content.muted;
 
@@ -36,3 +45,5 @@ export function Textarea({ size = 'l', leadingIcon, trailingIcon, ...props }: Te
     />
   );
 }
+
+export const Textarea = withZoraThemeScope(TextareaInner);

package/src/components/textarea/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 TextareaProps extends Omit<
-  Surface.TextareaProps,
-  'leadingAccessory' | 'size' | 'trailingAccessory'
-> {
+export interface TextareaProps
+  extends
+    ZoraBaseProps,
+    Omit<
+      Surface.TextareaProps,
+      'leadingAccessory' | 'size' | 'trailingAccessory' | 'mode' | 'themeId'
+    > {
   size?: ZoraControlSize;
   leadingIcon?: Surface.ButtonIconSpec;
   trailingIcon?: Surface.ButtonIconSpec;

package/src/components/toolbar/Toolbar.tsx

@@ -1,10 +1,13 @@
 import { Stack } from '@ankhorage/surface';
 import React from 'react';
 
+import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
 import { Card } from '../card';
 import type { ToolbarProps } from './types';
 
-export function Toolbar({
+function ToolbarInner({
+  themeId: _themeId,
+  mode: _mode,
   children,
   position = 'inline',
   floating = false,
@@ -35,3 +38,5 @@ export function Toolbar({
     </Card>
   );
 }
+
+export const Toolbar = withZoraThemeScope(ToolbarInner);

package/src/components/toolbar/ToolbarAction.tsx

@@ -1,9 +1,15 @@
 import React from 'react';
 
+import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
 import { IconButton } from '../icon-button';
 import type { ToolbarActionProps } from './types';
 
-export function ToolbarAction({ active, ...props }: ToolbarActionProps) {
+function ToolbarActionInner({
+  themeId: _themeId,
+  mode: _mode,
+  active,
+  ...props
+}: ToolbarActionProps) {
   return (
     <IconButton
       {...props}
@@ -13,3 +19,5 @@ export function ToolbarAction({ active, ...props }: ToolbarActionProps) {
     />
   );
 }
+
+export const ToolbarAction = withZoraThemeScope(ToolbarActionInner);

package/src/components/toolbar/types.ts

@@ -3,19 +3,19 @@ import type React from 'react';
 
 export type ToolbarPosition = 'top' | 'bottom' | 'inline';
 
-export interface ToolbarProps {
+import type { ZoraBaseProps } from '../../theme/ZoraBaseProps';
+
+export interface ToolbarProps extends ZoraBaseProps {
   children?: React.ReactNode;
   position?: ToolbarPosition;
   floating?: boolean;
   compact?: boolean;
-  testID?: string;
 }
 
-export interface ToolbarActionProps {
+export interface ToolbarActionProps extends ZoraBaseProps {
   label: string;
   icon: ButtonIconSpec;
   active?: boolean;
   disabled?: boolean;
   onPress?: () => void;
-  testID?: string;
 }

package/src/foundation/Box.tsx

@@ -0,0 +1,13 @@
+import { Box as SurfaceBox, type BoxProps as SurfaceBoxProps } from '@ankhorage/surface';
+import React from 'react';
+
+import { withZoraThemeScope } from '../theme/withZoraThemeScope';
+import type { ZoraBaseProps } from '../theme/ZoraBaseProps';
+
+export interface BoxProps extends ZoraBaseProps, Omit<SurfaceBoxProps, 'mode' | 'themeId'> {}
+
+function BoxInner({ themeId: _themeId, mode: _mode, ...props }: BoxProps) {
+  return <SurfaceBox {...props} />;
+}
+
+export const Box = withZoraThemeScope(BoxInner);

package/src/foundation/Center.tsx

@@ -0,0 +1,16 @@
+import {
+  Center as SurfaceCenter,
+  type CenterProps as SurfaceCenterProps,
+} from '@ankhorage/surface';
+import React from 'react';
+
+import { withZoraThemeScope } from '../theme/withZoraThemeScope';
+import type { ZoraBaseProps } from '../theme/ZoraBaseProps';
+
+export interface CenterProps extends ZoraBaseProps, Omit<SurfaceCenterProps, 'mode' | 'themeId'> {}
+
+function CenterInner({ themeId: _themeId, mode: _mode, ...props }: CenterProps) {
+  return <SurfaceCenter {...props} />;
+}
+
+export const Center = withZoraThemeScope(CenterInner);