@ankhorage/zora 0.9.0 → 0.11.0

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/text/Text.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 { resolveTextStyle } from './resolveTextRecipe';
 import type { TextProps } from './types';
 
@@ -30,7 +31,9 @@ function resolveTextContent({
   return i18nKey;
 }
 
-export function Text({
+function TextInner({
+  themeId: _themeId,
+  mode: _mode,
   children,
   text,
   i18nKey,
@@ -82,3 +85,5 @@ export function Text({
     </ReactNativeText>
   );
 }
+
+export const Text = withZoraThemeScope(TextInner);

package/src/components/text/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 TextVariant = 'body' | 'lead' | 'bodySmall' | 'caption' | 'label' | 'eyebrow' | 'code';
 
 export type TextTone =
@@ -18,7 +20,7 @@ export type TextWeight = 'regular' | 'medium' | 'semiBold' | 'bold';
 
 export type TextAlign = NonNullable<TextStyle['textAlign']>;
 
-export interface TextProps {
+export interface TextProps extends ZoraBaseProps {
   children?: React.ReactNode;
   text?: string;
   i18nKey?: string;
@@ -34,5 +36,4 @@ export interface TextProps {
   accessibilityHint?: string;
   accessibilityRole?: AccessibilityRole;
   nativeID?: string;
-  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);

package/src/foundation/Container.tsx

@@ -0,0 +1,17 @@
+import {
+  Container as SurfaceContainer,
+  type ContainerProps as SurfaceContainerProps,
+} from '@ankhorage/surface';
+import React from 'react';
+
+import { withZoraThemeScope } from '../theme/withZoraThemeScope';
+import type { ZoraBaseProps } from '../theme/ZoraBaseProps';
+
+export interface ContainerProps
+  extends ZoraBaseProps, Omit<SurfaceContainerProps, 'mode' | 'themeId'> {}
+
+function ContainerInner({ themeId: _themeId, mode: _mode, ...props }: ContainerProps) {
+  return <SurfaceContainer {...props} />;
+}
+
+export const Container = withZoraThemeScope(ContainerInner);

package/src/foundation/Divider.tsx

@@ -0,0 +1,17 @@
+import {
+  Divider as SurfaceDivider,
+  type DividerProps as SurfaceDividerProps,
+} from '@ankhorage/surface';
+import React from 'react';
+
+import { withZoraThemeScope } from '../theme/withZoraThemeScope';
+import type { ZoraBaseProps } from '../theme/ZoraBaseProps';
+
+export interface DividerProps
+  extends ZoraBaseProps, Omit<SurfaceDividerProps, 'mode' | 'themeId'> {}
+
+function DividerInner({ themeId: _themeId, mode: _mode, ...props }: DividerProps) {
+  return <SurfaceDivider {...props} />;
+}
+
+export const Divider = withZoraThemeScope(DividerInner);

package/src/foundation/Grid.tsx

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

package/src/foundation/Inline.tsx

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

package/src/foundation/Show.tsx

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

package/src/foundation/Spacer.tsx

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

package/src/foundation/Stack.tsx

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

package/src/foundation/Surface.tsx

@@ -0,0 +1,20 @@
+import {
+  Surface as SurfaceSurface,
+  type SurfaceProps as SurfaceSurfaceProps,
+  type SurfaceVariant,
+} from '@ankhorage/surface';
+import React from 'react';
+
+import { withZoraThemeScope } from '../theme/withZoraThemeScope';
+import type { ZoraBaseProps } from '../theme/ZoraBaseProps';
+
+export type { SurfaceVariant };
+
+export interface SurfaceProps
+  extends ZoraBaseProps, Omit<SurfaceSurfaceProps, 'mode' | 'themeId'> {}
+
+function SurfaceInner({ themeId: _themeId, mode: _mode, ...props }: SurfaceProps) {
+  return <SurfaceSurface {...props} />;
+}
+
+export const Surface = withZoraThemeScope(SurfaceInner);

package/src/foundation/index.test.ts

@@ -7,19 +7,19 @@ const foundationIndex = readFileSync(join(import.meta.dir, 'index.ts'), 'utf8');
 const rootIndex = readFileSync(join(import.meta.dir, '..', 'index.ts'), 'utf8');
 
 describe('foundation exports', () => {
-  it('defines a narrow Surface foundation export layer', () => {
+  it('defines a narrow ZORA foundation export layer', () => {
     expect(foundationIndex).toMatch(/export type \{/);
     expect(foundationIndex).toMatch(/BoxProps/);
     expect(foundationIndex).toMatch(/ContainerProps/);
     expect(foundationIndex).toMatch(/GridProps/);
     expect(foundationIndex).toMatch(/StackProps/);
     expect(foundationIndex).toMatch(/SurfaceProps/);
-    expect(foundationIndex).toMatch(/export \{/);
     expect(foundationIndex).toMatch(/Box/);
     expect(foundationIndex).toMatch(/Container/);
     expect(foundationIndex).toMatch(/Grid/);
     expect(foundationIndex).toMatch(/Stack/);
     expect(foundationIndex).toMatch(/Surface/);
+    expect(foundationIndex).not.toMatch(/@ankhorage\/surface/);
     expect(foundationIndex).not.toMatch(/Heading/);
     expect(foundationIndex).not.toMatch(/Text/);
     expect(foundationIndex).not.toMatch(/ThemeProvider/);

package/src/foundation/index.ts

@@ -1,25 +1,20 @@
-export type {
-  BoxProps,
-  CenterProps,
-  ContainerProps,
-  DividerProps,
-  GridProps,
-  InlineProps,
-  ShowProps,
-  SpacerProps,
-  StackProps,
-  SurfaceProps,
-  SurfaceVariant,
-} from '@ankhorage/surface';
-export {
-  Box,
-  Center,
-  Container,
-  Divider,
-  Grid,
-  Inline,
-  Show,
-  Spacer,
-  Stack,
-  Surface,
-} from '@ankhorage/surface';
+export type { BoxProps } from './Box';
+export { Box } from './Box';
+export type { CenterProps } from './Center';
+export { Center } from './Center';
+export type { ContainerProps } from './Container';
+export { Container } from './Container';
+export type { DividerProps } from './Divider';
+export { Divider } from './Divider';
+export type { GridProps } from './Grid';
+export { Grid } from './Grid';
+export type { InlineProps } from './Inline';
+export { Inline } from './Inline';
+export type { ShowProps } from './Show';
+export { Show } from './Show';
+export type { SpacerProps } from './Spacer';
+export { Spacer } from './Spacer';
+export type { StackProps } from './Stack';
+export { Stack } from './Stack';
+export type { SurfaceProps, SurfaceVariant } from './Surface';
+export { Surface } from './Surface';

package/src/layout/app-shell/AppShell.tsx

@@ -2,9 +2,12 @@ import { Box } from '@ankhorage/surface';
 import React from 'react';
 import { StyleSheet, View } from 'react-native';
 
+import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
 import type { AppShellProps } from './types';
 
-export function AppShell({
+function AppShellInner({
+  themeId: _themeId,
+  mode: _mode,
   children,
   header,
   footer,
@@ -32,6 +35,8 @@ export function AppShell({
   );
 }
 
+export const AppShell = withZoraThemeScope(AppShellInner);
+
 const styles = StyleSheet.create({
   root: {
     flex: 1,

package/src/layout/app-shell/types.ts

@@ -1,12 +1,13 @@
 import type React from 'react';
 import type { StyleProp, ViewStyle } from 'react-native';
 
-export interface AppShellProps {
+import type { ZoraBaseProps } from '../../theme/ZoraBaseProps';
+
+export interface AppShellProps extends ZoraBaseProps {
   children?: React.ReactNode;
   header?: React.ReactNode;
   footer?: React.ReactNode;
   overlay?: React.ReactNode;
   style?: StyleProp<ViewStyle>;
   bodyStyle?: StyleProp<ViewStyle>;
-  testID?: string;
 }