@ankhorage/zora 0.10.0 → 0.11.0

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

package/src/layout/auth-layout/AuthLayout.tsx

@@ -2,9 +2,12 @@ import { Center, Stack } from '@ankhorage/surface';
 import React from 'react';
 
 import { Card } from '../../components/card';
+import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
 import type { AuthLayoutProps } from './types';
 
-export function AuthLayout({
+function AuthLayoutInner({
+  themeId: _themeId,
+  mode: _mode,
   title,
   description,
   eyebrow,
@@ -27,3 +30,5 @@ export function AuthLayout({
     </Center>
   );
 }
+
+export const AuthLayout = withZoraThemeScope(AuthLayoutInner);

package/src/layout/auth-layout/types.ts

@@ -1,10 +1,11 @@
 import type React from 'react';
 
-export interface AuthLayoutProps {
+import type { ZoraBaseProps } from '../../theme/ZoraBaseProps';
+
+export interface AuthLayoutProps extends ZoraBaseProps {
   title?: React.ReactNode;
   description?: React.ReactNode;
   eyebrow?: React.ReactNode;
   children?: React.ReactNode;
   footer?: React.ReactNode;
-  testID?: string;
 }

package/src/layout/page/Page.tsx

@@ -2,9 +2,18 @@ import { Container, Stack } from '@ankhorage/surface';
 import React from 'react';
 
 import { resolvePageMaxWidth } from '../../internal/recipes';
+import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
 import type { PageProps } from './types';
 
-export function Page({ children, header, footer, width = 'default', testID }: PageProps) {
+function PageInner({
+  themeId: _themeId,
+  mode: _mode,
+  children,
+  header,
+  footer,
+  width = 'default',
+  testID,
+}: PageProps) {
   return (
     <Container maxWidth={resolvePageMaxWidth(width)} py="xl" testID={testID}>
       <Stack gap="l">
@@ -15,3 +24,5 @@ export function Page({ children, header, footer, width = 'default', testID }: Pa
     </Container>
   );
 }
+
+export const Page = withZoraThemeScope(PageInner);

package/src/layout/page/types.ts

@@ -1,11 +1,11 @@
 import type React from 'react';
 
 import type { ZoraContentWidth } from '../../internal/recipes';
+import type { ZoraBaseProps } from '../../theme/ZoraBaseProps';
 
-export interface PageProps {
+export interface PageProps extends ZoraBaseProps {
   children?: React.ReactNode;
   header?: React.ReactNode;
   footer?: React.ReactNode;
   width?: ZoraContentWidth;
-  testID?: string;
 }

package/src/layout/page-header/PageHeader.tsx

@@ -3,9 +3,12 @@ import React from 'react';
 
 import { Heading } from '../../components/heading';
 import { Text } from '../../components/text';
+import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
 import type { PageHeaderProps } from './types';
 
-export function PageHeader({
+function PageHeaderInner({
+  themeId: _themeId,
+  mode: _mode,
   title,
   description,
   eyebrow,
@@ -41,3 +44,5 @@ export function PageHeader({
     </Stack>
   );
 }
+
+export const PageHeader = withZoraThemeScope(PageHeaderInner);

package/src/layout/page-header/types.ts

@@ -1,10 +1,11 @@
 import type React from 'react';
 
-export interface PageHeaderProps {
+import type { ZoraBaseProps } from '../../theme/ZoraBaseProps';
+
+export interface PageHeaderProps extends ZoraBaseProps {
   title: React.ReactNode;
   description?: React.ReactNode;
   eyebrow?: React.ReactNode;
   actions?: React.ReactNode;
   meta?: React.ReactNode;
-  testID?: string;
 }

package/src/layout/page-section/PageSection.tsx

@@ -2,9 +2,18 @@ import { Stack } from '@ankhorage/surface';
 import React from 'react';
 
 import { SectionHeader } from '../../patterns/section-header';
+import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
 import type { PageSectionProps } from './types';
 
-export function PageSection({ title, description, actions, children, testID }: PageSectionProps) {
+function PageSectionInner({
+  themeId: _themeId,
+  mode: _mode,
+  title,
+  description,
+  actions,
+  children,
+  testID,
+}: PageSectionProps) {
   return (
     <Stack gap="m" testID={testID}>
       {title ? <SectionHeader actions={actions} description={description} title={title} /> : null}
@@ -12,3 +21,5 @@ export function PageSection({ title, description, actions, children, testID }: P
     </Stack>
   );
 }
+
+export const PageSection = withZoraThemeScope(PageSectionInner);

package/src/layout/page-section/types.ts

@@ -1,9 +1,10 @@
 import type React from 'react';
 
-export interface PageSectionProps {
+import type { ZoraBaseProps } from '../../theme/ZoraBaseProps';
+
+export interface PageSectionProps extends ZoraBaseProps {
   title?: React.ReactNode;
   description?: React.ReactNode;
   actions?: React.ReactNode;
   children?: React.ReactNode;
-  testID?: string;
 }

package/src/layout/settings-layout/SettingsLayout.tsx

@@ -1,11 +1,14 @@
 import React from 'react';
 
+import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
 import { Page } from '../page';
 import { PageHeader } from '../page-header';
 import { SidebarLayout } from '../sidebar-layout';
 import type { SettingsLayoutProps } from './types';
 
-export function SettingsLayout({
+function SettingsLayoutInner({
+  themeId: _themeId,
+  mode: _mode,
   title,
   description,
   sidebar,
@@ -24,3 +27,5 @@ export function SettingsLayout({
     </Page>
   );
 }
+
+export const SettingsLayout = withZoraThemeScope(SettingsLayoutInner);

package/src/layout/settings-layout/types.ts

@@ -1,10 +1,11 @@
 import type React from 'react';
 
-export interface SettingsLayoutProps {
+import type { ZoraBaseProps } from '../../theme/ZoraBaseProps';
+
+export interface SettingsLayoutProps extends ZoraBaseProps {
   title?: React.ReactNode;
   description?: React.ReactNode;
   sidebar: React.ReactNode;
   children?: React.ReactNode;
   actions?: React.ReactNode;
-  testID?: string;
 }

package/src/layout/sidebar-layout/SidebarLayout.tsx

@@ -1,9 +1,12 @@
 import { Box, Stack } from '@ankhorage/surface';
 import React from 'react';
 
+import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
 import type { SidebarLayoutProps } from './types';
 
-export function SidebarLayout({
+function SidebarLayoutInner({
+  themeId: _themeId,
+  mode: _mode,
   sidebar,
   children,
   aside,
@@ -21,3 +24,5 @@ export function SidebarLayout({
     </Stack>
   );
 }
+
+export const SidebarLayout = withZoraThemeScope(SidebarLayoutInner);

package/src/layout/sidebar-layout/types.ts

@@ -1,10 +1,11 @@
 import type React from 'react';
 
-export interface SidebarLayoutProps {
+import type { ZoraBaseProps } from '../../theme/ZoraBaseProps';
+
+export interface SidebarLayoutProps extends ZoraBaseProps {
   sidebar: React.ReactNode;
   children?: React.ReactNode;
   aside?: React.ReactNode;
   sidebarWidth?: number;
   asideWidth?: number;
-  testID?: string;
 }

package/src/layout/topbar-layout/TopbarLayout.tsx

@@ -1,10 +1,18 @@
 import { Box, Stack } from '@ankhorage/surface';
 import React from 'react';
 
+import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
 import { SidebarLayout } from '../sidebar-layout';
 import type { TopbarLayoutProps } from './types';
 
-export function TopbarLayout({ topbar, children, sidebar, testID }: TopbarLayoutProps) {
+function TopbarLayoutInner({
+  themeId: _themeId,
+  mode: _mode,
+  topbar,
+  children,
+  sidebar,
+  testID,
+}: TopbarLayoutProps) {
   return (
     <Stack gap="l" testID={testID}>
       <Box>{topbar}</Box>
@@ -12,3 +20,5 @@ export function TopbarLayout({ topbar, children, sidebar, testID }: TopbarLayout
     </Stack>
   );
 }
+
+export const TopbarLayout = withZoraThemeScope(TopbarLayoutInner);

package/src/layout/topbar-layout/types.ts

@@ -1,8 +1,9 @@
 import type React from 'react';
 
-export interface TopbarLayoutProps {
+import type { ZoraBaseProps } from '../../theme/ZoraBaseProps';
+
+export interface TopbarLayoutProps extends ZoraBaseProps {
   topbar: React.ReactNode;
   children?: React.ReactNode;
   sidebar?: React.ReactNode;
-  testID?: string;
 }

package/src/patterns/auth/ForgotPasswordForm.tsx

@@ -3,6 +3,7 @@ import React from 'react';
 
 import { Button } from '../../components/button';
 import { Form, type FormFieldConfig, type FormValues } from '../../components/form';
+import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
 import type { ForgotPasswordFormProps } from './types';
 import {
   defaultIdentifiers,
@@ -14,7 +15,9 @@ import {
 
 type ForgotPasswordFieldName = 'identifier';
 
-export function ForgotPasswordForm({
+function ForgotPasswordFormInner({
+  themeId: _themeId,
+  mode: _mode,
   identifiers = defaultIdentifiers,
   identifierLabel,
   signInLabel = 'Sign in',
@@ -82,3 +85,5 @@ export function ForgotPasswordForm({
     />
   );
 }
+
+export const ForgotPasswordForm = withZoraThemeScope(ForgotPasswordFormInner);

package/src/patterns/auth/OtpForm.tsx

@@ -3,11 +3,14 @@ import React from 'react';
 
 import { Button } from '../../components/button';
 import { Form, type FormFieldConfig, type FormValues } from '../../components/form';
+import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
 import type { OtpFormProps } from './types';
 
 type OtpFieldName = 'otp';
 
-export function OtpForm({
+function OtpFormInner({
+  themeId: _themeId,
+  mode: _mode,
   length = 6,
   otpLabel = 'Code',
   resendLabel = 'Resend code',
@@ -78,3 +81,5 @@ export function OtpForm({
     />
   );
 }
+
+export const OtpForm = withZoraThemeScope(OtpFormInner);

package/src/patterns/auth/SignInForm.tsx

@@ -3,6 +3,7 @@ import React from 'react';
 
 import { Button } from '../../components/button';
 import { Form, type FormFieldConfig, type FormValues } from '../../components/form';
+import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
 import type { SignInFormProps } from './types';
 import {
   defaultIdentifiers,
@@ -14,7 +15,9 @@ import {
 
 type SignInFieldName = 'identifier' | 'secret';
 
-export function SignInForm({
+function SignInFormInner({
+  themeId: _themeId,
+  mode: _mode,
   identifiers = defaultIdentifiers,
   identifierLabel,
   secretLabel = 'Password',
@@ -109,3 +112,5 @@ export function SignInForm({
     />
   );
 }
+
+export const SignInForm = withZoraThemeScope(SignInFormInner);

package/src/patterns/auth/SignUpForm.tsx

@@ -3,6 +3,7 @@ import React from 'react';
 
 import { Button } from '../../components/button';
 import { Form, type FormFieldConfig, type FormValues } from '../../components/form';
+import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
 import type { SignUpFormProps } from './types';
 
 const defaultSignUpFields = [
@@ -30,7 +31,9 @@ function createValues(fields: readonly FormFieldConfig[]): FormValues {
   return values;
 }
 
-export function SignUpForm({
+function SignUpFormInner({
+  themeId: _themeId,
+  mode: _mode,
   fields = defaultSignUpFields,
   signInLabel = 'Sign in',
   loading = false,
@@ -74,3 +77,5 @@ export function SignUpForm({
     />
   );
 }
+
+export const SignUpForm = withZoraThemeScope(SignUpFormInner);

package/src/patterns/auth/types.ts

@@ -1,15 +1,15 @@
 import type React from 'react';
 
 import type { FormFieldConfig, FormValues } from '../../components/form';
+import type { ZoraBaseProps } from '../../theme/ZoraBaseProps';
 
 export type AuthIdentifierKind = 'email' | 'phone' | 'username';
 
-export interface AuthFormBaseProps {
+export interface AuthFormBaseProps extends ZoraBaseProps {
   loading?: boolean;
   disabled?: boolean;
   error?: React.ReactNode;
   submitLabel?: React.ReactNode;
-  testID?: string;
 }
 
 export interface SignInFormValues {

package/src/patterns/collection-editor/CollectionEditor.tsx

@@ -4,10 +4,13 @@ import React from 'react';
 import { Button } from '../../components/button';
 import { IconButton } from '../../components/icon-button';
 import { Text } from '../../components/text';
+import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
 import { Panel } from '../panel';
 import type { CollectionEditorProps } from './types';
 
-export function CollectionEditor<TItem>({
+function CollectionEditorInner<TItem>({
+  themeId: _themeId,
+  mode: _mode,
   title,
   description,
   items,
@@ -99,3 +102,5 @@ export function CollectionEditor<TItem>({
     </Panel>
   );
 }
+
+export const CollectionEditor = withZoraThemeScope(CollectionEditorInner);