@ankhorage/zora 0.10.0 → 0.11.0

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

package/src/patterns/responsive-panel/ResponsivePanel.tsx

@@ -2,10 +2,13 @@ import React from 'react';
 
 import { Drawer } from '../../components/drawer';
 import { Modal } from '../../components/modal';
+import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
 import { Panel } from '../panel';
 import type { ResponsivePanelProps } from './types';
 
-export function ResponsivePanel({
+function ResponsivePanelInner({
+  themeId: _themeId,
+  mode: _mode,
   title,
   description,
   actions,
@@ -68,3 +71,5 @@ export function ResponsivePanel({
     </Panel>
   );
 }
+
+export const ResponsivePanel = withZoraThemeScope(ResponsivePanelInner);

package/src/patterns/responsive-panel/types.ts

@@ -4,7 +4,9 @@ export type ResponsivePanelSide = 'left' | 'right';
 export type ResponsivePanelDesktopMode = 'inline' | 'floating';
 export type ResponsivePanelMobileMode = 'drawer' | 'modal';
 
-export interface ResponsivePanelProps {
+import type { ZoraBaseProps } from '../../theme/ZoraBaseProps';
+
+export interface ResponsivePanelProps extends ZoraBaseProps {
   title?: React.ReactNode;
   description?: React.ReactNode;
   actions?: React.ReactNode;
@@ -16,5 +18,4 @@ export interface ResponsivePanelProps {
   desktopMode?: ResponsivePanelDesktopMode;
   mobileMode?: ResponsivePanelMobileMode;
   compact?: boolean;
-  testID?: string;
 }

package/src/patterns/section-header/SectionHeader.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 { SectionHeaderProps } from './types';
 
-export function SectionHeader({
+function SectionHeaderInner({
+  themeId: _themeId,
+  mode: _mode,
   title,
   description,
   eyebrow,
@@ -39,3 +42,5 @@ export function SectionHeader({
     </Stack>
   );
 }
+
+export const SectionHeader = withZoraThemeScope(SectionHeaderInner);

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

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

package/src/patterns/settings-row/SettingsRow.tsx

@@ -3,9 +3,12 @@ import React from 'react';
 
 import { Card } from '../../components/card';
 import { Text } from '../../components/text';
+import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
 import type { SettingsRowProps } from './types';
 
-export function SettingsRow({
+function SettingsRowInner({
+  themeId: _themeId,
+  mode: _mode,
   title,
   description,
   meta,
@@ -39,3 +42,5 @@ export function SettingsRow({
     </Card>
   );
 }
+
+export const SettingsRow = withZoraThemeScope(SettingsRowInner);

package/src/patterns/settings-row/types.ts

@@ -1,11 +1,12 @@
 import type React from 'react';
 
-interface SettingsRowBaseProps {
+import type { ZoraBaseProps } from '../../theme/ZoraBaseProps';
+
+interface SettingsRowBaseProps extends ZoraBaseProps {
   title: React.ReactNode;
   description?: React.ReactNode;
   meta?: React.ReactNode;
   disabled?: boolean;
-  testID?: string;
 }
 
 interface SettingsRowPressableProps {

package/src/patterns/switch-field/SwitchField.tsx

@@ -1,10 +1,13 @@
 import { Switch } from '@ankhorage/surface';
 import React from 'react';
 
+import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
 import { SettingsRow } from '../settings-row';
 import type { SwitchFieldProps } from './types';
 
-export function SwitchField({
+function SwitchFieldInner({
+  themeId: _themeId,
+  mode: _mode,
   label,
   description,
   value,
@@ -22,3 +25,5 @@ export function SwitchField({
     />
   );
 }
+
+export const SwitchField = withZoraThemeScope(SwitchFieldInner);

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

@@ -1,10 +1,11 @@
 import type { ReactNode } from 'react';
 
-export interface SwitchFieldProps {
+import type { ZoraBaseProps } from '../../theme/ZoraBaseProps';
+
+export interface SwitchFieldProps extends ZoraBaseProps {
   label: ReactNode;
   description?: ReactNode;
   value: boolean;
   onValueChange: (value: boolean) => void;
   disabled?: boolean;
-  testID?: string;
 }

package/src/patterns/tile-grid/PaletteItem.tsx

@@ -1,12 +1,16 @@
-import { Box, useTheme } from '@ankhorage/surface';
+import { Box } from '@ankhorage/surface';
 import React from 'react';
 
 import { Card } from '../../components/card';
 import { Heading } from '../../components/heading';
 import { Text } from '../../components/text';
+import { useZoraTheme } from '../../theme/useZoraTheme';
+import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
 import type { PaletteItemProps } from './types';
 
-export function PaletteItem({
+function PaletteItemInner({
+  themeId: _themeId,
+  mode: _mode,
   title,
   description,
   icon,
@@ -16,7 +20,7 @@ export function PaletteItem({
   onPress,
   testID,
 }: PaletteItemProps) {
-  const { theme } = useTheme();
+  const { theme } = useZoraTheme();
 
   return (
     <Card
@@ -49,3 +53,5 @@ export function PaletteItem({
     </Card>
   );
 }
+
+export const PaletteItem = withZoraThemeScope(PaletteItemInner);

package/src/patterns/tile-grid/TileGrid.tsx

@@ -1,9 +1,12 @@
 import { Box } from '@ankhorage/surface';
 import React from 'react';
 
+import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
 import type { TileGridProps } from './types';
 
-export function TileGrid({
+function TileGridInner({
+  themeId: _themeId,
+  mode: _mode,
   children,
   columns = 'responsive',
   compact = false,
@@ -42,3 +45,5 @@ export function TileGrid({
     </Box>
   );
 }
+
+export const TileGrid = withZoraThemeScope(TileGridInner);

package/src/patterns/tile-grid/types.ts

@@ -1,14 +1,15 @@
 import type { ButtonIconSpec } from '@ankhorage/surface';
 import type { ReactNode } from 'react';
 
-export interface TileGridProps {
+import type { ZoraBaseProps } from '../../theme/ZoraBaseProps';
+
+export interface TileGridProps extends ZoraBaseProps {
   children?: ReactNode;
   columns?: number | 'responsive';
   compact?: boolean;
-  testID?: string;
 }
 
-export interface PaletteItemProps {
+export interface PaletteItemProps extends ZoraBaseProps {
   title: ReactNode;
   description?: ReactNode;
   icon?: ButtonIconSpec;
@@ -16,5 +17,4 @@ export interface PaletteItemProps {
   selected?: boolean;
   disabled?: boolean;
   onPress?: () => void;
-  testID?: string;
 }

package/src/patterns/tree-view/TreeItem.tsx

@@ -2,10 +2,12 @@ import { Box, Stack } from '@ankhorage/surface';
 import React from 'react';
 
 import { IconButton } from '../../components/icon-button';
+import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
+import type { ZoraBaseProps } from '../../theme/ZoraBaseProps';
 import { SettingsRow } from '../settings-row';
 import type { TreeItemNode, TreeItemRenderProps } from './types';
 
-interface TreeItemProps<TId extends string = string> {
+interface TreeItemProps<TId extends string = string> extends ZoraBaseProps {
   node: TreeItemNode<TId>;
   depth: number;
   selectedId?: TId;
@@ -15,7 +17,9 @@ interface TreeItemProps<TId extends string = string> {
   renderItem?: (props: TreeItemRenderProps<TId>) => React.ReactNode;
 }
 
-export function TreeItem<TId extends string = string>({
+function TreeItemInner<TId extends string = string>({
+  themeId: _themeId,
+  mode: _mode,
   node,
   depth,
   selectedId,
@@ -23,6 +27,7 @@ export function TreeItem<TId extends string = string>({
   onSelect,
   onToggleExpand,
   renderItem,
+  testID,
 }: TreeItemProps<TId>) {
   const hasChildren = node.children !== undefined && node.children.length > 0;
   const isExpanded = expandedIds.includes(node.id);
@@ -63,7 +68,7 @@ export function TreeItem<TId extends string = string>({
   };
 
   return (
-    <Box>
+    <Box testID={testID}>
       <Box style={{ paddingLeft: depth * 16 }}>{renderContent()}</Box>
       {hasChildren && isExpanded ? (
         <Box>
@@ -84,3 +89,5 @@ export function TreeItem<TId extends string = string>({
     </Box>
   );
 }
+
+export const TreeItem = withZoraThemeScope(TreeItemInner);

package/src/patterns/tree-view/TreeView.tsx

@@ -1,10 +1,13 @@
 import { Stack } from '@ankhorage/surface';
 import React from 'react';
 
+import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
 import { TreeItem } from './TreeItem';
 import type { TreeViewProps } from './types';
 
-export function TreeView<TId extends string = string>({
+function TreeViewInner<TId extends string = string>({
+  themeId: _themeId,
+  mode: _mode,
   nodes,
   selectedId,
   expandedIds: controlledExpandedIds,
@@ -48,3 +51,5 @@ export function TreeView<TId extends string = string>({
     </Stack>
   );
 }
+
+export const TreeView = withZoraThemeScope(TreeViewInner);

package/src/patterns/tree-view/types.ts

@@ -1,6 +1,8 @@
 import type { ButtonIconSpec } from '@ankhorage/surface';
 import type { ReactNode } from 'react';
 
+import type { ZoraBaseProps } from '../../theme/ZoraBaseProps';
+
 export interface TreeItemNode<TId extends string = string> {
   id: TId;
   label: ReactNode;
@@ -19,7 +21,7 @@ export interface TreeItemRenderProps<TId extends string = string> {
   hasChildren: boolean;
 }
 
-export interface TreeViewProps<TId extends string = string> {
+export interface TreeViewProps<TId extends string = string> extends ZoraBaseProps {
   nodes: readonly TreeItemNode<TId>[];
   selectedId?: TId;
   expandedIds?: readonly TId[];
@@ -27,5 +29,4 @@ export interface TreeViewProps<TId extends string = string> {
   onSelect?: (id: TId) => void;
   onExpandedChange?: (ids: readonly TId[]) => void;
   renderItem?: (props: TreeItemRenderProps<TId>) => ReactNode;
-  testID?: string;
 }