@ankhorage/zora 0.9.0 → 0.11.0

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

package/src/patterns/collection-editor/types.ts

@@ -10,7 +10,9 @@ export interface CollectionEditorRenderItemProps<TItem> {
   canMoveDown: boolean;
 }
 
-export interface CollectionEditorProps<TItem> {
+import type { ZoraBaseProps } from '../../theme/ZoraBaseProps';
+
+export interface CollectionEditorProps<TItem> extends ZoraBaseProps {
   title?: React.ReactNode;
   description?: React.ReactNode;
   items: readonly TItem[];
@@ -21,5 +23,4 @@ export interface CollectionEditorProps<TItem> {
   addLabel?: React.ReactNode;
   emptyLabel?: React.ReactNode;
   disabled?: boolean;
-  testID?: string;
 }

package/src/patterns/confirm-dialog/ConfirmDialog.tsx

@@ -3,9 +3,12 @@ import React from 'react';
 
 import { Button } from '../../components/button';
 import { Modal } from '../../components/modal';
+import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
 import type { ConfirmDialogProps } from './types';
 
-export function ConfirmDialog({
+function ConfirmDialogInner({
+  themeId: _themeId,
+  mode: _mode,
   visible,
   title,
   description,
@@ -44,3 +47,5 @@ export function ConfirmDialog({
     </Modal>
   );
 }
+
+export const ConfirmDialog = withZoraThemeScope(ConfirmDialogInner);

package/src/patterns/confirm-dialog/types.ts

@@ -1,8 +1,9 @@
 import type React from 'react';
 
 import type { ZoraEmphasis, ZoraTone } from '../../internal/recipes';
+import type { ZoraBaseProps } from '../../theme/ZoraBaseProps';
 
-export interface ConfirmDialogProps {
+export interface ConfirmDialogProps extends ZoraBaseProps {
   visible: boolean;
   title: React.ReactNode;
   description?: React.ReactNode;
@@ -15,5 +16,4 @@ export interface ConfirmDialogProps {
   closeOnBackdrop?: boolean;
   onConfirm?: () => void;
   onCancel?: () => void;
-  testID?: string;
 }

package/src/patterns/disclosure-section/DisclosureSection.tsx

@@ -2,10 +2,13 @@ import { Box, Stack } from '@ankhorage/surface';
 import React from 'react';
 
 import { IconButton } from '../../components/icon-button';
+import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
 import { Panel } from '../panel';
 import type { DisclosureSectionProps } from './types';
 
-export function DisclosureSection({
+function DisclosureSectionInner({
+  themeId: _themeId,
+  mode: _mode,
   title,
   description,
   icon,
@@ -59,3 +62,5 @@ export function DisclosureSection({
     </Panel>
   );
 }
+
+export const DisclosureSection = withZoraThemeScope(DisclosureSectionInner);

package/src/patterns/disclosure-section/types.ts

@@ -1,7 +1,9 @@
 import type { ButtonIconSpec } from '@ankhorage/surface';
 import type { ReactNode } from 'react';
 
-export interface DisclosureSectionProps {
+import type { ZoraBaseProps } from '../../theme/ZoraBaseProps';
+
+export interface DisclosureSectionProps extends ZoraBaseProps {
   title: ReactNode;
   description?: ReactNode;
   icon?: ButtonIconSpec;
@@ -11,5 +13,4 @@ export interface DisclosureSectionProps {
   actions?: ReactNode;
   children?: ReactNode;
   disabled?: boolean;
-  testID?: string;
 }

package/src/patterns/empty-state/EmptyState.tsx

@@ -3,9 +3,12 @@ import React from 'react';
 
 import { Button } from '../../components/button';
 import { Card } from '../../components/card';
+import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
 import type { EmptyStateProps } from './types';
 
-export function EmptyState({
+function EmptyStateInner({
+  themeId: _themeId,
+  mode: _mode,
   title,
   description,
   eyebrow,
@@ -51,3 +54,5 @@ export function EmptyState({
     </Card>
   );
 }
+
+export const EmptyState = withZoraThemeScope(EmptyStateInner);

package/src/patterns/empty-state/types.ts

@@ -1,6 +1,7 @@
 import type React from 'react';
 
 import type { ZoraEmphasis, ZoraTone } from '../../internal/recipes';
+import type { ZoraBaseProps } from '../../theme/ZoraBaseProps';
 
 export interface EmptyStateAction {
   label: React.ReactNode;
@@ -9,12 +10,11 @@ export interface EmptyStateAction {
   emphasis?: ZoraEmphasis;
 }
 
-export interface EmptyStateProps {
+export interface EmptyStateProps extends ZoraBaseProps {
   title: React.ReactNode;
   description?: React.ReactNode;
   eyebrow?: React.ReactNode;
   primaryAction?: EmptyStateAction;
   secondaryAction?: EmptyStateAction;
   footer?: React.ReactNode;
-  testID?: string;
 }

package/src/patterns/form-field/FormField.tsx

@@ -2,9 +2,18 @@ import { Field, Stack } from '@ankhorage/surface';
 import React from 'react';
 
 import { Text } from '../../components/text';
+import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
 import type { FormFieldProps } from './types';
 
-export function FormField({ label, description, helperText, children, ...props }: FormFieldProps) {
+function FormFieldInner({
+  themeId: _themeId,
+  mode: _mode,
+  label,
+  description,
+  helperText,
+  children,
+  ...props
+}: FormFieldProps) {
   return (
     <Field
       {...props}
@@ -26,3 +35,5 @@ export function FormField({ label, description, helperText, children, ...props }
     </Field>
   );
 }
+
+export const FormField = withZoraThemeScope(FormFieldInner);

package/src/patterns/form-field/types.ts

@@ -1,10 +1,15 @@
 import type { FieldProps as SurfaceFieldProps } from '@ankhorage/surface';
 import type React from 'react';
 
-export interface FormFieldProps extends Pick<
-  SurfaceFieldProps,
-  'children' | 'disabled' | 'errorText' | 'invalid' | 'readOnly' | 'required' | 'testID'
-> {
+import type { ZoraBaseProps } from '../../theme/ZoraBaseProps';
+
+export interface FormFieldProps
+  extends
+    ZoraBaseProps,
+    Pick<
+      Omit<SurfaceFieldProps, 'mode' | 'themeId'>,
+      'children' | 'disabled' | 'errorText' | 'invalid' | 'readOnly' | 'required'
+    > {
   label: React.ReactNode;
   description?: React.ReactNode;
   helperText?: React.ReactNode;

package/src/patterns/inspector-field/InspectorField.tsx

@@ -1,10 +1,18 @@
 import { Box, Stack } from '@ankhorage/surface';
 import React from 'react';
 
+import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
 import { FormField } from '../form-field';
 import type { InspectorFieldProps } from './types';
 
-export function InspectorField({ label, control, children, ...props }: InspectorFieldProps) {
+function InspectorFieldInner({
+  themeId: _themeId,
+  mode: _mode,
+  label,
+  control,
+  children,
+  ...props
+}: InspectorFieldProps) {
   return (
     <FormField {...props} label={label}>
       <Stack direction="row" gap="s" align="center">
@@ -14,3 +22,5 @@ export function InspectorField({ label, control, children, ...props }: Inspector
     </FormField>
   );
 }
+
+export const InspectorField = withZoraThemeScope(InspectorFieldInner);

package/src/patterns/inspector-field/types.ts

@@ -1,6 +1,8 @@
 import type { ReactNode } from 'react';
 
-export interface InspectorFieldProps {
+import type { ZoraBaseProps } from '../../theme/ZoraBaseProps';
+
+export interface InspectorFieldProps extends ZoraBaseProps {
   label: ReactNode;
   description?: ReactNode;
   helperText?: ReactNode;
@@ -11,5 +13,4 @@ export interface InspectorFieldProps {
   readOnly?: boolean;
   control?: ReactNode;
   children?: ReactNode;
-  testID?: string;
 }

package/src/patterns/notice/Notice.tsx

@@ -3,9 +3,12 @@ import React from 'react';
 
 import { Badge } from '../../components/badge';
 import { Card } from '../../components/card';
+import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
 import type { NoticeProps } from './types';
 
-export function Notice({
+function NoticeInner({
+  themeId: _themeId,
+  mode: _mode,
   title,
   description,
   children,
@@ -28,3 +31,5 @@ export function Notice({
     </Card>
   );
 }
+
+export const Notice = withZoraThemeScope(NoticeInner);

package/src/patterns/notice/types.ts

@@ -1,12 +1,12 @@
 import type React from 'react';
 
 import type { ZoraTone } from '../../internal/recipes';
+import type { ZoraBaseProps } from '../../theme/ZoraBaseProps';
 
-export interface NoticeProps {
+export interface NoticeProps extends ZoraBaseProps {
   title: React.ReactNode;
   description?: React.ReactNode;
   children?: React.ReactNode;
   actions?: React.ReactNode;
   tone?: ZoraTone;
-  testID?: string;
 }