@ankhorage/zora 0.13.2 → 0.15.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # Changelog
 
+## 0.15.0
+
+### Minor Changes
+
+- 43ebda3: Add ThemeComposer showcase page for visual recipe testing
+
+## 0.14.0
+
+### Minor Changes
+
+- 86c4fdd: Add `ThemeComposer` pattern for live theme seed editing. Exposes a controlled component that lets users edit `primaryColor`, `harmony`, `colorTone`, and `mode`, emitting an updated `ZoraTheme` through `onChange`. Includes a built-in preview area showing Button, Badge, and Card controls reflecting the active theme.
+
 ## 0.13.2
 
 ### Patch Changes

package/README.md

@@ -1365,6 +1365,45 @@ ZORA props:
 
 </details>
 
+### `ThemeComposer`
+
+Interactive pattern for editing a `ZoraTheme` seed and previewing the result live.
+Pass your current theme as `value` and handle updates through `onChange`. Wrap both
+in a `ZoraProvider` so the preview area reflects every change immediately.
+
+```tsx
+const [theme, setTheme] = React.useState<ZoraTheme>(zoraDefaultTheme);
+const [mode, setMode] = React.useState<ZoraThemeMode>('light');
+
+return (
+  <ZoraProvider theme={theme} initialMode={mode}>
+    <ThemeComposer
+      value={theme}
+      onChange={setTheme}
+      mode={mode}
+      onModeChange={setMode}
+      onSubmit={(t) => saveTheme(t)}
+    />
+  </ZoraProvider>
+);
+```
+
+<details>
+<summary>Props</summary>
+
+ZORA props:
+
+| Prop           | Type                            | Default | Notes                                                |
+| -------------- | ------------------------------- | ------- | ---------------------------------------------------- |
+| `value`        | `ZoraTheme`                     | -       | Required controlled theme seed.                      |
+| `onChange`     | `(theme: ZoraTheme) => void`    | -       | Required. Fires on every valid change.               |
+| `mode`         | `ZoraThemeMode`                 | -       | Current light/dark mode shown in the mode toggle.    |
+| `onModeChange` | `(mode: ZoraThemeMode) => void` | -       | Called when the user switches the mode toggle.       |
+| `onSubmit`     | `(theme: ZoraTheme) => void`    | -       | Optional. Renders an "Apply theme" button if set.    |
+| `testID`       | `string`                        | -       | Forwarded to the root element and child test points. |
+
+</details>
+
 ## Theme
 
 ### `ZoraProvider`

package/dist/index.d.ts

@@ -74,6 +74,8 @@ export type { SettingsRowProps } from './patterns/settings-row';
 export { SettingsRow } from './patterns/settings-row';
 export type { SwitchFieldProps } from './patterns/switch-field';
 export { SwitchField } from './patterns/switch-field';
+export type { ThemeComposerProps } from './patterns/theme-composer';
+export { ThemeComposer } from './patterns/theme-composer';
 export type { PaletteItemProps, TileGridProps } from './patterns/tile-grid';
 export { PaletteItem, TileGrid } from './patterns/tile-grid';
 export type { TreeItemNode, TreeItemRenderProps, TreeViewProps } from './patterns/tree-view';

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}

package/dist/index.js

@@ -36,6 +36,7 @@ export { ResponsivePanel } from './patterns/responsive-panel';
 export { SectionHeader } from './patterns/section-header';
 export { SettingsRow } from './patterns/settings-row';
 export { SwitchField } from './patterns/switch-field';
+export { ThemeComposer } from './patterns/theme-composer';
 export { PaletteItem, TileGrid } from './patterns/tile-grid';
 export { TreeItem, TreeView } from './patterns/tree-view';
 export * from './theme';

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAE3C,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAE7C,OAAO,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AAEzC,OAAO,EAAE,QAAQ,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAEhE,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAmB7C,OAAO,EACL,IAAI,EACJ,WAAW,EACX,SAAS,EACT,SAAS,EACT,eAAe,EACf,iBAAiB,EACjB,aAAa,EACb,cAAc,EACd,aAAa,GACd,MAAM,mBAAmB,CAAC;AAS3B,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAE/C,OAAO,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AAEzC,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AAEtD,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAE3C,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAE3C,OAAO,EAAE,KAAK,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAEvD,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAE7C,OAAO,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AAEzC,OAAO,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AAEzC,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAEjD,OAAO,EAAE,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAc9D,OAAO,EACL,GAAG,EACH,MAAM,EACN,SAAS,EACT,OAAO,EACP,IAAI,EACJ,MAAM,EACN,IAAI,EACJ,MAAM,EACN,KAAK,EACL,OAAO,GACR,MAAM,cAAc,CAAC;AAEtB,OAAO,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AAE9C,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAElD,OAAO,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAErC,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAElD,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AAEpD,OAAO,EAAE,cAAc,EAAE,MAAM,0BAA0B,CAAC;AAE1D,OAAO,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAExD,OAAO,EAAE,YAAY,EAAE,MAAM,wBAAwB,CAAC;AActD,OAAO,EAAE,kBAAkB,EAAE,OAAO,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAKtF,OAAO,EAAE,gBAAgB,EAAE,MAAM,8BAA8B,CAAC;AAEhE,OAAO,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAE1D,OAAO,EAAE,iBAAiB,EAAE,MAAM,+BAA+B,CAAC;AAElE,OAAO,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AAEpD,OAAO,EAAE,cAAc,EAAE,MAAM,4BAA4B,CAAC;AAE5D,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAE3C,OAAO,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAEzC,OAAO,EAAE,eAAe,EAAE,MAAM,6BAA6B,CAAC;AAE9D,OAAO,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAE1D,OAAO,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAEtD,OAAO,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAEtD,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAE7D,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAC1D,cAAc,SAAS,CAAC","sourcesContent":["export type { BadgeProps } from './components/badge';\nexport { Badge } from './components/badge';\nexport type { ButtonProps } from './components/button';\nexport { Button } from './components/button';\nexport type { CardProps } from './components/card';\nexport { Card } from './components/card';\nexport type { CheckboxGroupOption, CheckboxGroupProps, CheckboxProps } from './components/checkbox';\nexport { Checkbox, CheckboxGroup } from './components/checkbox';\nexport type { DrawerProps } from './components/drawer';\nexport { Drawer } from './components/drawer';\nexport type {\n  FormActionsProps,\n  FormErrorProps,\n  FormErrors,\n  FormFieldConfig,\n  FormFieldControlProps,\n  FormFieldInputType,\n  FormFieldProps,\n  FormFieldValue,\n  FormFieldWrapperProps,\n  FormProps,\n  FormValidationErrors,\n  FormValidationResult,\n  FormValues,\n  UseFormControllerOptions,\n  UseFormControllerResult,\n  ValidationRule,\n} from './components/form';\nexport {\n  Form,\n  FormActions,\n  FormError,\n  FormField,\n  hasRequiredRule,\n  useFormController,\n  validateField,\n  validateFields,\n  validateValue,\n} from './components/form';\nexport type {\n  HeadingAlign,\n  HeadingLevel,\n  HeadingProps,\n  HeadingSize,\n  HeadingTone,\n  HeadingWeight,\n} from './components/heading';\nexport { Heading } from './components/heading';\nexport type { IconProps } from './components/icon';\nexport { Icon } from './components/icon';\nexport type { IconButtonProps } from './components/icon-button';\nexport { IconButton } from './components/icon-button';\nexport type { InputProps } from './components/input';\nexport { Input } from './components/input';\nexport type { ModalProps } from './components/modal';\nexport { Modal } from './components/modal';\nexport type { RadioGroupOption, RadioGroupProps, RadioProps } from './components/radio';\nexport { Radio, RadioGroup } from './components/radio';\nexport type { SelectOption, SelectProps } from './components/select';\nexport { Select } from './components/select';\nexport type { TabItem, TabsProps } from './components/tabs';\nexport { Tabs } from './components/tabs';\nexport type { TextAlign, TextProps, TextTone, TextVariant, TextWeight } from './components/text';\nexport { Text } from './components/text';\nexport type { TextareaProps } from './components/textarea';\nexport { Textarea } from './components/textarea';\nexport type { ToolbarActionProps, ToolbarProps } from './components/toolbar';\nexport { Toolbar, ToolbarAction } from './components/toolbar';\nexport type {\n  BoxProps,\n  CenterProps,\n  ContainerProps,\n  DividerProps,\n  GridProps,\n  InlineProps,\n  ShowProps,\n  SpacerProps,\n  StackProps,\n  SurfaceProps,\n  SurfaceVariant,\n} from './foundation';\nexport {\n  Box,\n  Center,\n  Container,\n  Divider,\n  Grid,\n  Inline,\n  Show,\n  Spacer,\n  Stack,\n  Surface,\n} from './foundation';\nexport type { AppShellProps } from './layout/app-shell';\nexport { AppShell } from './layout/app-shell';\nexport type { AuthLayoutProps } from './layout/auth-layout';\nexport { AuthLayout } from './layout/auth-layout';\nexport type { PageProps } from './layout/page';\nexport { Page } from './layout/page';\nexport type { PageHeaderProps } from './layout/page-header';\nexport { PageHeader } from './layout/page-header';\nexport type { PageSectionProps } from './layout/page-section';\nexport { PageSection } from './layout/page-section';\nexport type { SettingsLayoutProps } from './layout/settings-layout';\nexport { SettingsLayout } from './layout/settings-layout';\nexport type { SidebarLayoutProps } from './layout/sidebar-layout';\nexport { SidebarLayout } from './layout/sidebar-layout';\nexport type { TopbarLayoutProps } from './layout/topbar-layout';\nexport { TopbarLayout } from './layout/topbar-layout';\nexport type {\n  AuthFormBaseProps,\n  AuthIdentifierKind,\n  ForgotPasswordFormProps,\n  ForgotPasswordFormValues,\n  OtpFormProps,\n  OtpFormValues,\n  SignInFormProps,\n  SignInFormValues,\n  SignUpFormField,\n  SignUpFormProps,\n  SignUpFormValues,\n} from './patterns/auth';\nexport { ForgotPasswordForm, OtpForm, SignInForm, SignUpForm } from './patterns/auth';\nexport type {\n  CollectionEditorProps,\n  CollectionEditorRenderItemProps,\n} from './patterns/collection-editor';\nexport { CollectionEditor } from './patterns/collection-editor';\nexport type { ConfirmDialogProps } from './patterns/confirm-dialog';\nexport { ConfirmDialog } from './patterns/confirm-dialog';\nexport type { DisclosureSectionProps } from './patterns/disclosure-section';\nexport { DisclosureSection } from './patterns/disclosure-section';\nexport type { EmptyStateAction, EmptyStateProps } from './patterns/empty-state';\nexport { EmptyState } from './patterns/empty-state';\nexport type { InspectorFieldProps } from './patterns/inspector-field';\nexport { InspectorField } from './patterns/inspector-field';\nexport type { NoticeProps } from './patterns/notice';\nexport { Notice } from './patterns/notice';\nexport type { PanelProps } from './patterns/panel';\nexport { Panel } from './patterns/panel';\nexport type { ResponsivePanelProps } from './patterns/responsive-panel';\nexport { ResponsivePanel } from './patterns/responsive-panel';\nexport type { SectionHeaderProps } from './patterns/section-header';\nexport { SectionHeader } from './patterns/section-header';\nexport type { SettingsRowProps } from './patterns/settings-row';\nexport { SettingsRow } from './patterns/settings-row';\nexport type { SwitchFieldProps } from './patterns/switch-field';\nexport { SwitchField } from './patterns/switch-field';\nexport type { PaletteItemProps, TileGridProps } from './patterns/tile-grid';\nexport { PaletteItem, TileGrid } from './patterns/tile-grid';\nexport type { TreeItemNode, TreeItemRenderProps, TreeViewProps } from './patterns/tree-view';\nexport { TreeItem, TreeView } from './patterns/tree-view';\nexport * from './theme';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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","sourcesContent":["export type { BadgeProps } from './components/badge';\nexport { Badge } from './components/badge';\nexport type { ButtonProps } from './components/button';\nexport { Button } from './components/button';\nexport type { CardProps } from './components/card';\nexport { Card } from './components/card';\nexport type { CheckboxGroupOption, CheckboxGroupProps, CheckboxProps } from './components/checkbox';\nexport { Checkbox, CheckboxGroup } from './components/checkbox';\nexport type { DrawerProps } from './components/drawer';\nexport { Drawer } from './components/drawer';\nexport type {\n  FormActionsProps,\n  FormErrorProps,\n  FormErrors,\n  FormFieldConfig,\n  FormFieldControlProps,\n  FormFieldInputType,\n  FormFieldProps,\n  FormFieldValue,\n  FormFieldWrapperProps,\n  FormProps,\n  FormValidationErrors,\n  FormValidationResult,\n  FormValues,\n  UseFormControllerOptions,\n  UseFormControllerResult,\n  ValidationRule,\n} from './components/form';\nexport {\n  Form,\n  FormActions,\n  FormError,\n  FormField,\n  hasRequiredRule,\n  useFormController,\n  validateField,\n  validateFields,\n  validateValue,\n} from './components/form';\nexport type {\n  HeadingAlign,\n  HeadingLevel,\n  HeadingProps,\n  HeadingSize,\n  HeadingTone,\n  HeadingWeight,\n} from './components/heading';\nexport { Heading } from './components/heading';\nexport type { IconProps } from './components/icon';\nexport { Icon } from './components/icon';\nexport type { IconButtonProps } from './components/icon-button';\nexport { IconButton } from './components/icon-button';\nexport type { InputProps } from './components/input';\nexport { Input } from './components/input';\nexport type { ModalProps } from './components/modal';\nexport { Modal } from './components/modal';\nexport type { RadioGroupOption, RadioGroupProps, RadioProps } from './components/radio';\nexport { Radio, RadioGroup } from './components/radio';\nexport type { SelectOption, SelectProps } from './components/select';\nexport { Select } from './components/select';\nexport type { TabItem, TabsProps } from './components/tabs';\nexport { Tabs } from './components/tabs';\nexport type { TextAlign, TextProps, TextTone, TextVariant, TextWeight } from './components/text';\nexport { Text } from './components/text';\nexport type { TextareaProps } from './components/textarea';\nexport { Textarea } from './components/textarea';\nexport type { ToolbarActionProps, ToolbarProps } from './components/toolbar';\nexport { Toolbar, ToolbarAction } from './components/toolbar';\nexport type {\n  BoxProps,\n  CenterProps,\n  ContainerProps,\n  DividerProps,\n  GridProps,\n  InlineProps,\n  ShowProps,\n  SpacerProps,\n  StackProps,\n  SurfaceProps,\n  SurfaceVariant,\n} from './foundation';\nexport {\n  Box,\n  Center,\n  Container,\n  Divider,\n  Grid,\n  Inline,\n  Show,\n  Spacer,\n  Stack,\n  Surface,\n} from './foundation';\nexport type { AppShellProps } from './layout/app-shell';\nexport { AppShell } from './layout/app-shell';\nexport type { AuthLayoutProps } from './layout/auth-layout';\nexport { AuthLayout } from './layout/auth-layout';\nexport type { PageProps } from './layout/page';\nexport { Page } from './layout/page';\nexport type { PageHeaderProps } from './layout/page-header';\nexport { PageHeader } from './layout/page-header';\nexport type { PageSectionProps } from './layout/page-section';\nexport { PageSection } from './layout/page-section';\nexport type { SettingsLayoutProps } from './layout/settings-layout';\nexport { SettingsLayout } from './layout/settings-layout';\nexport type { SidebarLayoutProps } from './layout/sidebar-layout';\nexport { SidebarLayout } from './layout/sidebar-layout';\nexport type { TopbarLayoutProps } from './layout/topbar-layout';\nexport { TopbarLayout } from './layout/topbar-layout';\nexport type {\n  AuthFormBaseProps,\n  AuthIdentifierKind,\n  ForgotPasswordFormProps,\n  ForgotPasswordFormValues,\n  OtpFormProps,\n  OtpFormValues,\n  SignInFormProps,\n  SignInFormValues,\n  SignUpFormField,\n  SignUpFormProps,\n  SignUpFormValues,\n} from './patterns/auth';\nexport { ForgotPasswordForm, OtpForm, SignInForm, SignUpForm } from './patterns/auth';\nexport type {\n  CollectionEditorProps,\n  CollectionEditorRenderItemProps,\n} from './patterns/collection-editor';\nexport { CollectionEditor } from './patterns/collection-editor';\nexport type { ConfirmDialogProps } from './patterns/confirm-dialog';\nexport { ConfirmDialog } from './patterns/confirm-dialog';\nexport type { DisclosureSectionProps } from './patterns/disclosure-section';\nexport { DisclosureSection } from './patterns/disclosure-section';\nexport type { EmptyStateAction, EmptyStateProps } from './patterns/empty-state';\nexport { EmptyState } from './patterns/empty-state';\nexport type { InspectorFieldProps } from './patterns/inspector-field';\nexport { InspectorField } from './patterns/inspector-field';\nexport type { NoticeProps } from './patterns/notice';\nexport { Notice } from './patterns/notice';\nexport type { PanelProps } from './patterns/panel';\nexport { Panel } from './patterns/panel';\nexport type { ResponsivePanelProps } from './patterns/responsive-panel';\nexport { ResponsivePanel } from './patterns/responsive-panel';\nexport type { SectionHeaderProps } from './patterns/section-header';\nexport { SectionHeader } from './patterns/section-header';\nexport type { SettingsRowProps } from './patterns/settings-row';\nexport { SettingsRow } from './patterns/settings-row';\nexport type { SwitchFieldProps } from './patterns/switch-field';\nexport { SwitchField } from './patterns/switch-field';\nexport type { ThemeComposerProps } from './patterns/theme-composer';\nexport { ThemeComposer } from './patterns/theme-composer';\nexport type { PaletteItemProps, TileGridProps } from './patterns/tile-grid';\nexport { PaletteItem, TileGrid } from './patterns/tile-grid';\nexport type { TreeItemNode, TreeItemRenderProps, TreeViewProps } from './patterns/tree-view';\nexport { TreeItem, TreeView } from './patterns/tree-view';\nexport * from './theme';\n"]}

package/dist/patterns/theme-composer/ThemeComposer.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import type { ThemeComposerProps } from './types';
+export declare const ThemeComposer: (props: ThemeComposerProps) => React.ReactElement | null;
+//# sourceMappingURL=ThemeComposer.d.ts.map

package/dist/patterns/theme-composer/ThemeComposer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThemeComposer.d.ts","sourceRoot":"","sources":["../../../src/patterns/theme-composer/ThemeComposer.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAmB1B,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAgOlD,eAAO,MAAM,aAAa,0DAAyC,CAAC"}

package/dist/patterns/theme-composer/ThemeComposer.js

@@ -0,0 +1,164 @@
+import { Box, Stack } from '@ankhorage/surface';
+import React from 'react';
+import { Badge } from '../../components/badge';
+import { Button } from '../../components/button';
+import { Card } from '../../components/card';
+import { Heading } from '../../components/heading';
+import { Input } from '../../components/input';
+import { Select } from '../../components/select';
+import { Tabs } from '../../components/tabs';
+import { Text } from '../../components/text';
+import { ZORA_COLOR_HARMONIES, ZORA_COLOR_TONES, } from '../../theme/types';
+import { useZoraTheme } from '../../theme/useZoraTheme';
+import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
+const HEX_RE = /^#[0-9A-Fa-f]{6}$/;
+function isValidHex(value) {
+    return HEX_RE.test(value);
+}
+const HARMONY_OPTIONS = ZORA_COLOR_HARMONIES.map((h) => ({ value: h, label: h }));
+const TONE_OPTIONS = ZORA_COLOR_TONES.map((t) => ({ value: t, label: t }));
+const MODE_TABS = [
+    { value: 'light', label: 'Light' },
+    { value: 'dark', label: 'Dark' },
+];
+const COLOR_TONE_BACKGROUND_TONE = {
+    neutral: 'Neutral',
+    pastel: 'Pastel',
+    earth: 'Earth',
+    mineral: 'Mineral',
+    muted: 'Muted',
+    jewel: 'Neutral',
+    fluorescent: 'Obsidian',
+    obsidian: 'Obsidian',
+    vaporwave: 'Pastel',
+    monochromeAccent: 'Neutral',
+};
+const COLOR_TONE_FOREGROUND_TONE = {
+    neutral: 'Jewel',
+    pastel: 'Jewel',
+    earth: 'Mineral',
+    mineral: 'Jewel',
+    muted: 'Jewel',
+    jewel: 'Jewel',
+    fluorescent: 'Fluorescent',
+    obsidian: 'Fluorescent',
+    vaporwave: 'Fluorescent',
+    monochromeAccent: 'Jewel',
+};
+function ThemeComposerInner({ themeId: _themeId, value, onChange, mode, onModeChange, onSubmit, testID, }) {
+    const { theme } = useZoraTheme();
+    const [hexInput, setHexInput] = React.useState(value.primaryColor);
+    const [hexError, setHexError] = React.useState(undefined);
+    // Keep local hex input in sync when value.primaryColor changes externally
+    React.useEffect(() => {
+        setHexInput(value.primaryColor);
+        setHexError(undefined);
+    }, [value.primaryColor]);
+    function handleHexChange(text) {
+        // Ensure leading hash
+        const normalized = text.startsWith('#') ? text : `#${text}`;
+        setHexInput(normalized);
+        if (isValidHex(normalized)) {
+            setHexError(undefined);
+            onChange({ ...value, primaryColor: normalized });
+        }
+        else {
+            setHexError('Enter a valid 6-digit hex color (e.g. #0f766e).');
+        }
+    }
+    const activeMode = mode ?? 'light';
+    return (<Stack gap="l" testID={testID}>
+      {/* Section: Primary Color */}
+      <Card title="Primary color" description="Set the seed color for your theme palette.">
+        <Stack gap="m">
+          <Stack direction="row" gap="m" align="center">
+            <Box flex={1}>
+              <Input value={hexInput} onChangeText={handleHexChange} placeholder="#0f766e" autoCapitalize="none" autoCorrect={false} maxLength={7} invalid={hexError !== undefined} testID={testID ? `${testID}-hex-input` : undefined}/>
+            </Box>
+            {/* Color preview chip */}
+            <Box width={36} height={36} radius="m" style={{
+            backgroundColor: isValidHex(hexInput) ? hexInput : theme.colors.border,
+            borderWidth: 1,
+            borderColor: theme.colors.border,
+        }}/>
+          </Stack>
+          {hexError ? (<Text tone="danger" variant="bodySmall">
+              {hexError}
+            </Text>) : null}
+        </Stack>
+      </Card>
+
+      {/* Section: Harmony */}
+      <Card title="Harmony" description="Choose how accent hues are generated from your primary color.">
+        <Select value={value.harmony} options={HARMONY_OPTIONS} onValueChange={(h) => onChange({ ...value, harmony: h })} testID={testID ? `${testID}-harmony-select` : undefined}/>
+      </Card>
+
+      {/* Section: Color tone */}
+      <Card title="Color tone" description="Controls the vibrancy and saturation style of the palette.">
+        <Stack gap="s">
+          <Select value={value.colorTone} options={TONE_OPTIONS} onValueChange={(t) => onChange({ ...value, colorTone: t })} testID={testID ? `${testID}-tone-select` : undefined}/>
+          <Stack direction="row" gap="s" align="center">
+            <Text tone="muted" variant="caption">
+              Background:
+            </Text>
+            <Badge tone="neutral" emphasis="soft">
+              {COLOR_TONE_BACKGROUND_TONE[value.colorTone]}
+            </Badge>
+            <Text tone="muted" variant="caption">
+              Foreground:
+            </Text>
+            <Badge tone="neutral" emphasis="soft">
+              {COLOR_TONE_FOREGROUND_TONE[value.colorTone]}
+            </Badge>
+          </Stack>
+        </Stack>
+      </Card>
+
+      {/* Section: Mode */}
+      <Card title="Mode" description="Switch between light and dark presentation.">
+        <Tabs value={activeMode} items={MODE_TABS} onValueChange={(m) => onModeChange?.(m)} variant="segmented" testID={testID ? `${testID}-mode-tabs` : undefined}/>
+      </Card>
+
+      {/* Section: Preview */}
+      <Card title="Preview" description="A quick look at how your theme renders common controls.">
+        <Stack gap="m">
+          <Heading level={4}>Heading</Heading>
+          <Text>Body text — this shows default text color and weight.</Text>
+          <Text tone="muted" variant="bodySmall">
+            Muted caption text.
+          </Text>
+          <Stack direction="row" gap="s" align="center">
+            <Button tone="primary" emphasis="solid" size="m">
+              Primary
+            </Button>
+            <Button tone="neutral" emphasis="soft" size="m">
+              Neutral
+            </Button>
+            <Button tone="danger" emphasis="ghost" size="m">
+              Danger
+            </Button>
+          </Stack>
+          <Stack direction="row" gap="s" align="center">
+            <Badge tone="primary">Primary</Badge>
+            <Badge tone="success" emphasis="soft">
+              Success
+            </Badge>
+            <Badge tone="warning" emphasis="soft">
+              Warning
+            </Badge>
+            <Badge tone="danger" emphasis="soft">
+              Danger
+            </Badge>
+          </Stack>
+          <Card tone="subtle" title="Nested card" description="Subtle tone inside the preview." compact/>
+        </Stack>
+      </Card>
+
+      {/* Submit */}
+      {onSubmit ? (<Button tone="primary" emphasis="solid" onPress={() => onSubmit(value)} testID={testID ? `${testID}-submit` : undefined}>
+          Apply theme
+        </Button>) : null}
+    </Stack>);
+}
+export const ThemeComposer = withZoraThemeScope(ThemeComposerInner);
+//# sourceMappingURL=ThemeComposer.js.map

package/dist/patterns/theme-composer/ThemeComposer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThemeComposer.js","sourceRoot":"","sources":["../../../src/patterns/theme-composer/ThemeComposer.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Box, Stack } from '@ankhorage/surface';\nimport React from 'react';\n\nimport { Badge } from '../../components/badge';\nimport { Button } from '../../components/button';\nimport { Card } from '../../components/card';\nimport { Heading } from '../../components/heading';\nimport { Input } from '../../components/input';\nimport { Select } from '../../components/select';\nimport { Tabs } from '../../components/tabs';\nimport { Text } from '../../components/text';\nimport {\n  ZORA_COLOR_HARMONIES,\n  ZORA_COLOR_TONES,\n  type ZoraColorTone,\n  type ZoraTheme,\n  type ZoraThemeMode,\n} from '../../theme/types';\nimport { useZoraTheme } from '../../theme/useZoraTheme';\nimport { withZoraThemeScope } from '../../theme/withZoraThemeScope';\nimport type { ThemeComposerProps } from './types';\n\nconst HEX_RE = /^#[0-9A-Fa-f]{6}$/;\n\nfunction isValidHex(value: string): boolean {\n  return HEX_RE.test(value);\n}\n\nconst HARMONY_OPTIONS = ZORA_COLOR_HARMONIES.map((h) => ({ value: h, label: h }));\n\nconst TONE_OPTIONS = ZORA_COLOR_TONES.map((t) => ({ value: t, label: t }));\n\nconst MODE_TABS = [\n  { value: 'light' as ZoraThemeMode, label: 'Light' },\n  { value: 'dark' as ZoraThemeMode, label: 'Dark' },\n];\n\nconst COLOR_TONE_BACKGROUND_TONE: Record<ZoraColorTone, string> = {\n  neutral: 'Neutral',\n  pastel: 'Pastel',\n  earth: 'Earth',\n  mineral: 'Mineral',\n  muted: 'Muted',\n  jewel: 'Neutral',\n  fluorescent: 'Obsidian',\n  obsidian: 'Obsidian',\n  vaporwave: 'Pastel',\n  monochromeAccent: 'Neutral',\n};\n\nconst COLOR_TONE_FOREGROUND_TONE: Record<ZoraColorTone, string> = {\n  neutral: 'Jewel',\n  pastel: 'Jewel',\n  earth: 'Mineral',\n  mineral: 'Jewel',\n  muted: 'Jewel',\n  jewel: 'Jewel',\n  fluorescent: 'Fluorescent',\n  obsidian: 'Fluorescent',\n  vaporwave: 'Fluorescent',\n  monochromeAccent: 'Jewel',\n};\n\nfunction ThemeComposerInner({\n  themeId: _themeId,\n  value,\n  onChange,\n  mode,\n  onModeChange,\n  onSubmit,\n  testID,\n}: ThemeComposerProps) {\n  const { theme } = useZoraTheme();\n\n  const [hexInput, setHexInput] = React.useState<string>(value.primaryColor);\n  const [hexError, setHexError] = React.useState<string | undefined>(undefined);\n\n  // Keep local hex input in sync when value.primaryColor changes externally\n  React.useEffect(() => {\n    setHexInput(value.primaryColor);\n    setHexError(undefined);\n  }, [value.primaryColor]);\n\n  function handleHexChange(text: string) {\n    // Ensure leading hash\n    const normalized = text.startsWith('#') ? text : `#${text}`;\n    setHexInput(normalized);\n\n    if (isValidHex(normalized)) {\n      setHexError(undefined);\n      onChange({ ...value, primaryColor: normalized as ZoraTheme['primaryColor'] });\n    } else {\n      setHexError('Enter a valid 6-digit hex color (e.g. #0f766e).');\n    }\n  }\n\n  const activeMode = mode ?? 'light';\n\n  return (\n    <Stack gap=\"l\" testID={testID}>\n      {/* Section: Primary Color */}\n      <Card title=\"Primary color\" description=\"Set the seed color for your theme palette.\">\n        <Stack gap=\"m\">\n          <Stack direction=\"row\" gap=\"m\" align=\"center\">\n            <Box flex={1}>\n              <Input\n                value={hexInput}\n                onChangeText={handleHexChange}\n                placeholder=\"#0f766e\"\n                autoCapitalize=\"none\"\n                autoCorrect={false}\n                maxLength={7}\n                invalid={hexError !== undefined}\n                testID={testID ? `${testID}-hex-input` : undefined}\n              />\n            </Box>\n            {/* Color preview chip */}\n            <Box\n              width={36}\n              height={36}\n              radius=\"m\"\n              style={{\n                backgroundColor: isValidHex(hexInput) ? hexInput : theme.colors.border,\n                borderWidth: 1,\n                borderColor: theme.colors.border,\n              }}\n            />\n          </Stack>\n          {hexError ? (\n            <Text tone=\"danger\" variant=\"bodySmall\">\n              {hexError}\n            </Text>\n          ) : null}\n        </Stack>\n      </Card>\n\n      {/* Section: Harmony */}\n      <Card\n        title=\"Harmony\"\n        description=\"Choose how accent hues are generated from your primary color.\"\n      >\n        <Select\n          value={value.harmony}\n          options={HARMONY_OPTIONS}\n          onValueChange={(h) => onChange({ ...value, harmony: h })}\n          testID={testID ? `${testID}-harmony-select` : undefined}\n        />\n      </Card>\n\n      {/* Section: Color tone */}\n      <Card\n        title=\"Color tone\"\n        description=\"Controls the vibrancy and saturation style of the palette.\"\n      >\n        <Stack gap=\"s\">\n          <Select\n            value={value.colorTone}\n            options={TONE_OPTIONS}\n            onValueChange={(t) => onChange({ ...value, colorTone: t })}\n            testID={testID ? `${testID}-tone-select` : undefined}\n          />\n          <Stack direction=\"row\" gap=\"s\" align=\"center\">\n            <Text tone=\"muted\" variant=\"caption\">\n              Background:\n            </Text>\n            <Badge tone=\"neutral\" emphasis=\"soft\">\n              {COLOR_TONE_BACKGROUND_TONE[value.colorTone]}\n            </Badge>\n            <Text tone=\"muted\" variant=\"caption\">\n              Foreground:\n            </Text>\n            <Badge tone=\"neutral\" emphasis=\"soft\">\n              {COLOR_TONE_FOREGROUND_TONE[value.colorTone]}\n            </Badge>\n          </Stack>\n        </Stack>\n      </Card>\n\n      {/* Section: Mode */}\n      <Card title=\"Mode\" description=\"Switch between light and dark presentation.\">\n        <Tabs\n          value={activeMode}\n          items={MODE_TABS}\n          onValueChange={(m) => onModeChange?.(m)}\n          variant=\"segmented\"\n          testID={testID ? `${testID}-mode-tabs` : undefined}\n        />\n      </Card>\n\n      {/* Section: Preview */}\n      <Card title=\"Preview\" description=\"A quick look at how your theme renders common controls.\">\n        <Stack gap=\"m\">\n          <Heading level={4}>Heading</Heading>\n          <Text>Body text — this shows default text color and weight.</Text>\n          <Text tone=\"muted\" variant=\"bodySmall\">\n            Muted caption text.\n          </Text>\n          <Stack direction=\"row\" gap=\"s\" align=\"center\">\n            <Button tone=\"primary\" emphasis=\"solid\" size=\"m\">\n              Primary\n            </Button>\n            <Button tone=\"neutral\" emphasis=\"soft\" size=\"m\">\n              Neutral\n            </Button>\n            <Button tone=\"danger\" emphasis=\"ghost\" size=\"m\">\n              Danger\n            </Button>\n          </Stack>\n          <Stack direction=\"row\" gap=\"s\" align=\"center\">\n            <Badge tone=\"primary\">Primary</Badge>\n            <Badge tone=\"success\" emphasis=\"soft\">\n              Success\n            </Badge>\n            <Badge tone=\"warning\" emphasis=\"soft\">\n              Warning\n            </Badge>\n            <Badge tone=\"danger\" emphasis=\"soft\">\n              Danger\n            </Badge>\n          </Stack>\n          <Card\n            tone=\"subtle\"\n            title=\"Nested card\"\n            description=\"Subtle tone inside the preview.\"\n            compact\n          />\n        </Stack>\n      </Card>\n\n      {/* Submit */}\n      {onSubmit ? (\n        <Button\n          tone=\"primary\"\n          emphasis=\"solid\"\n          onPress={() => onSubmit(value)}\n          testID={testID ? `${testID}-submit` : undefined}\n        >\n          Apply theme\n        </Button>\n      ) : null}\n    </Stack>\n  );\n}\n\nexport const ThemeComposer = withZoraThemeScope(ThemeComposerInner);\n"]}

package/dist/patterns/theme-composer/index.d.ts

@@ -0,0 +1,3 @@
+export { ThemeComposer } from './ThemeComposer';
+export type { ThemeComposerProps } from './types';
+//# sourceMappingURL=index.d.ts.map

package/dist/patterns/theme-composer/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/patterns/theme-composer/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,YAAY,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC"}

package/dist/patterns/theme-composer/index.js

@@ -0,0 +1,2 @@
+export { ThemeComposer } from './ThemeComposer';
+//# sourceMappingURL=index.js.map

package/dist/patterns/theme-composer/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/patterns/theme-composer/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC","sourcesContent":["export { ThemeComposer } from './ThemeComposer';\nexport type { ThemeComposerProps } from './types';\n"]}

package/dist/patterns/theme-composer/types.d.ts

@@ -0,0 +1,10 @@
+import type { ZoraTheme, ZoraThemeMode } from '../../theme/types';
+import type { ZoraBaseProps } from '../../theme/ZoraBaseProps';
+export interface ThemeComposerProps extends ZoraBaseProps {
+    value: ZoraTheme;
+    onChange: (theme: ZoraTheme) => void;
+    mode?: ZoraThemeMode;
+    onModeChange?: (mode: ZoraThemeMode) => void;
+    onSubmit?: (theme: ZoraTheme) => void;
+}
+//# sourceMappingURL=types.d.ts.map

package/dist/patterns/theme-composer/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/patterns/theme-composer/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAClE,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAE/D,MAAM,WAAW,kBAAmB,SAAQ,aAAa;IACvD,KAAK,EAAE,SAAS,CAAC;IACjB,QAAQ,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,IAAI,CAAC;IACrC,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,aAAa,KAAK,IAAI,CAAC;IAC7C,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,IAAI,CAAC;CACvC"}

package/dist/patterns/theme-composer/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/dist/patterns/theme-composer/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/patterns/theme-composer/types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ZoraTheme, ZoraThemeMode } from '../../theme/types';\nimport type { ZoraBaseProps } from '../../theme/ZoraBaseProps';\n\nexport interface ThemeComposerProps extends ZoraBaseProps {\n  value: ZoraTheme;\n  onChange: (theme: ZoraTheme) => void;\n  mode?: ZoraThemeMode;\n  onModeChange?: (mode: ZoraThemeMode) => void;\n  onSubmit?: (theme: ZoraTheme) => void;\n}\n"]}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ankhorage/zora",
   "type": "module",
-  "version": "0.13.2",
+  "version": "0.15.0",
   "description": "Opinionated React Native and React Native Web UI kit built on @ankhorage/surface.",
   "homepage": "https://github.com/ankhorage/zora#readme",
   "bugs": {

package/src/index.ts

@@ -146,6 +146,8 @@ export type { SettingsRowProps } from './patterns/settings-row';
 export { SettingsRow } from './patterns/settings-row';
 export type { SwitchFieldProps } from './patterns/switch-field';
 export { SwitchField } from './patterns/switch-field';
+export type { ThemeComposerProps } from './patterns/theme-composer';
+export { ThemeComposer } from './patterns/theme-composer';
 export type { PaletteItemProps, TileGridProps } from './patterns/tile-grid';
 export { PaletteItem, TileGrid } from './patterns/tile-grid';
 export type { TreeItemNode, TreeItemRenderProps, TreeViewProps } from './patterns/tree-view';

package/src/patterns/theme-composer/ThemeComposer.test.ts

@@ -0,0 +1,97 @@
+import { describe, expect, test } from 'bun:test';
+
+import { ZORA_COLOR_HARMONIES, ZORA_COLOR_TONES } from '../../theme/types';
+import { zoraDefaultTheme } from '../../theme/zoraDefaultTheme';
+import type { ThemeComposerProps } from './types';
+
+// Validate the exported types compile correctly by asserting shape
+describe('ThemeComposerProps', () => {
+  test('accepts a valid ZoraTheme as value', () => {
+    const props: ThemeComposerProps = {
+      value: zoraDefaultTheme,
+      onChange: () => undefined,
+    };
+    expect(props.value.primaryColor).toBe('#0f766e');
+    expect(props.value.harmony).toBe('analogous');
+    expect(props.value.colorTone).toBe('jewel');
+  });
+
+  test('accepts optional mode and onModeChange', () => {
+    const props: ThemeComposerProps = {
+      value: zoraDefaultTheme,
+      onChange: () => undefined,
+      mode: 'dark',
+      onModeChange: (_mode) => undefined,
+    };
+    expect(props.mode).toBe('dark');
+  });
+
+  test('accepts optional onSubmit', () => {
+    let submitted = false;
+    const props: ThemeComposerProps = {
+      value: zoraDefaultTheme,
+      onChange: () => undefined,
+      onSubmit: () => {
+        submitted = true;
+      },
+    };
+    props.onSubmit?.(zoraDefaultTheme);
+    expect(submitted).toBe(true);
+  });
+});
+
+describe('ZORA_COLOR_HARMONIES coverage for ThemeComposer', () => {
+  test('all harmony values are present for the Select options', () => {
+    const expected = [
+      'monochromatic',
+      'analogous',
+      'complementary',
+      'splitComplementary',
+      'triadic',
+      'tetradic',
+    ] as const;
+    expect(ZORA_COLOR_HARMONIES).toEqual(expected);
+  });
+});
+
+describe('ZORA_COLOR_TONES coverage for ThemeComposer', () => {
+  test('all color tones are present for the Select options', () => {
+    const expected = [
+      'neutral',
+      'pastel',
+      'earth',
+      'mineral',
+      'muted',
+      'jewel',
+      'fluorescent',
+      'obsidian',
+      'vaporwave',
+      'monochromeAccent',
+    ] as const;
+    expect(ZORA_COLOR_TONES).toEqual(expected);
+  });
+});
+
+describe('onChange propagation contract', () => {
+  test('onChange receives updated theme with new harmony', () => {
+    const received: unknown[] = [];
+    const props: ThemeComposerProps = {
+      value: zoraDefaultTheme,
+      onChange: (t) => received.push(t),
+    };
+    // Simulate what the component does internally
+    props.onChange({ ...zoraDefaultTheme, harmony: 'triadic' });
+    expect(received).toHaveLength(1);
+    expect((received[0] as typeof zoraDefaultTheme).harmony).toBe('triadic');
+  });
+
+  test('onChange receives updated theme with new colorTone', () => {
+    const received: unknown[] = [];
+    const props: ThemeComposerProps = {
+      value: zoraDefaultTheme,
+      onChange: (t) => received.push(t),
+    };
+    props.onChange({ ...zoraDefaultTheme, colorTone: 'obsidian' });
+    expect((received[0] as typeof zoraDefaultTheme).colorTone).toBe('obsidian');
+  });
+});

package/src/patterns/theme-composer/ThemeComposer.tsx

@@ -0,0 +1,245 @@
+import { Box, Stack } from '@ankhorage/surface';
+import React from 'react';
+
+import { Badge } from '../../components/badge';
+import { Button } from '../../components/button';
+import { Card } from '../../components/card';
+import { Heading } from '../../components/heading';
+import { Input } from '../../components/input';
+import { Select } from '../../components/select';
+import { Tabs } from '../../components/tabs';
+import { Text } from '../../components/text';
+import {
+  ZORA_COLOR_HARMONIES,
+  ZORA_COLOR_TONES,
+  type ZoraColorTone,
+  type ZoraTheme,
+  type ZoraThemeMode,
+} from '../../theme/types';
+import { useZoraTheme } from '../../theme/useZoraTheme';
+import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
+import type { ThemeComposerProps } from './types';
+
+const HEX_RE = /^#[0-9A-Fa-f]{6}$/;
+
+function isValidHex(value: string): boolean {
+  return HEX_RE.test(value);
+}
+
+const HARMONY_OPTIONS = ZORA_COLOR_HARMONIES.map((h) => ({ value: h, label: h }));
+
+const TONE_OPTIONS = ZORA_COLOR_TONES.map((t) => ({ value: t, label: t }));
+
+const MODE_TABS = [
+  { value: 'light' as ZoraThemeMode, label: 'Light' },
+  { value: 'dark' as ZoraThemeMode, label: 'Dark' },
+];
+
+const COLOR_TONE_BACKGROUND_TONE: Record<ZoraColorTone, string> = {
+  neutral: 'Neutral',
+  pastel: 'Pastel',
+  earth: 'Earth',
+  mineral: 'Mineral',
+  muted: 'Muted',
+  jewel: 'Neutral',
+  fluorescent: 'Obsidian',
+  obsidian: 'Obsidian',
+  vaporwave: 'Pastel',
+  monochromeAccent: 'Neutral',
+};
+
+const COLOR_TONE_FOREGROUND_TONE: Record<ZoraColorTone, string> = {
+  neutral: 'Jewel',
+  pastel: 'Jewel',
+  earth: 'Mineral',
+  mineral: 'Jewel',
+  muted: 'Jewel',
+  jewel: 'Jewel',
+  fluorescent: 'Fluorescent',
+  obsidian: 'Fluorescent',
+  vaporwave: 'Fluorescent',
+  monochromeAccent: 'Jewel',
+};
+
+function ThemeComposerInner({
+  themeId: _themeId,
+  value,
+  onChange,
+  mode,
+  onModeChange,
+  onSubmit,
+  testID,
+}: ThemeComposerProps) {
+  const { theme } = useZoraTheme();
+
+  const [hexInput, setHexInput] = React.useState<string>(value.primaryColor);
+  const [hexError, setHexError] = React.useState<string | undefined>(undefined);
+
+  // Keep local hex input in sync when value.primaryColor changes externally
+  React.useEffect(() => {
+    setHexInput(value.primaryColor);
+    setHexError(undefined);
+  }, [value.primaryColor]);
+
+  function handleHexChange(text: string) {
+    // Ensure leading hash
+    const normalized = text.startsWith('#') ? text : `#${text}`;
+    setHexInput(normalized);
+
+    if (isValidHex(normalized)) {
+      setHexError(undefined);
+      onChange({ ...value, primaryColor: normalized as ZoraTheme['primaryColor'] });
+    } else {
+      setHexError('Enter a valid 6-digit hex color (e.g. #0f766e).');
+    }
+  }
+
+  const activeMode = mode ?? 'light';
+
+  return (
+    <Stack gap="l" testID={testID}>
+      {/* Section: Primary Color */}
+      <Card title="Primary color" description="Set the seed color for your theme palette.">
+        <Stack gap="m">
+          <Stack direction="row" gap="m" align="center">
+            <Box flex={1}>
+              <Input
+                value={hexInput}
+                onChangeText={handleHexChange}
+                placeholder="#0f766e"
+                autoCapitalize="none"
+                autoCorrect={false}
+                maxLength={7}
+                invalid={hexError !== undefined}
+                testID={testID ? `${testID}-hex-input` : undefined}
+              />
+            </Box>
+            {/* Color preview chip */}
+            <Box
+              width={36}
+              height={36}
+              radius="m"
+              style={{
+                backgroundColor: isValidHex(hexInput) ? hexInput : theme.colors.border,
+                borderWidth: 1,
+                borderColor: theme.colors.border,
+              }}
+            />
+          </Stack>
+          {hexError ? (
+            <Text tone="danger" variant="bodySmall">
+              {hexError}
+            </Text>
+          ) : null}
+        </Stack>
+      </Card>
+
+      {/* Section: Harmony */}
+      <Card
+        title="Harmony"
+        description="Choose how accent hues are generated from your primary color."
+      >
+        <Select
+          value={value.harmony}
+          options={HARMONY_OPTIONS}
+          onValueChange={(h) => onChange({ ...value, harmony: h })}
+          testID={testID ? `${testID}-harmony-select` : undefined}
+        />
+      </Card>
+
+      {/* Section: Color tone */}
+      <Card
+        title="Color tone"
+        description="Controls the vibrancy and saturation style of the palette."
+      >
+        <Stack gap="s">
+          <Select
+            value={value.colorTone}
+            options={TONE_OPTIONS}
+            onValueChange={(t) => onChange({ ...value, colorTone: t })}
+            testID={testID ? `${testID}-tone-select` : undefined}
+          />
+          <Stack direction="row" gap="s" align="center">
+            <Text tone="muted" variant="caption">
+              Background:
+            </Text>
+            <Badge tone="neutral" emphasis="soft">
+              {COLOR_TONE_BACKGROUND_TONE[value.colorTone]}
+            </Badge>
+            <Text tone="muted" variant="caption">
+              Foreground:
+            </Text>
+            <Badge tone="neutral" emphasis="soft">
+              {COLOR_TONE_FOREGROUND_TONE[value.colorTone]}
+            </Badge>
+          </Stack>
+        </Stack>
+      </Card>
+
+      {/* Section: Mode */}
+      <Card title="Mode" description="Switch between light and dark presentation.">
+        <Tabs
+          value={activeMode}
+          items={MODE_TABS}
+          onValueChange={(m) => onModeChange?.(m)}
+          variant="segmented"
+          testID={testID ? `${testID}-mode-tabs` : undefined}
+        />
+      </Card>
+
+      {/* Section: Preview */}
+      <Card title="Preview" description="A quick look at how your theme renders common controls.">
+        <Stack gap="m">
+          <Heading level={4}>Heading</Heading>
+          <Text>Body text — this shows default text color and weight.</Text>
+          <Text tone="muted" variant="bodySmall">
+            Muted caption text.
+          </Text>
+          <Stack direction="row" gap="s" align="center">
+            <Button tone="primary" emphasis="solid" size="m">
+              Primary
+            </Button>
+            <Button tone="neutral" emphasis="soft" size="m">
+              Neutral
+            </Button>
+            <Button tone="danger" emphasis="ghost" size="m">
+              Danger
+            </Button>
+          </Stack>
+          <Stack direction="row" gap="s" align="center">
+            <Badge tone="primary">Primary</Badge>
+            <Badge tone="success" emphasis="soft">
+              Success
+            </Badge>
+            <Badge tone="warning" emphasis="soft">
+              Warning
+            </Badge>
+            <Badge tone="danger" emphasis="soft">
+              Danger
+            </Badge>
+          </Stack>
+          <Card
+            tone="subtle"
+            title="Nested card"
+            description="Subtle tone inside the preview."
+            compact
+          />
+        </Stack>
+      </Card>
+
+      {/* Submit */}
+      {onSubmit ? (
+        <Button
+          tone="primary"
+          emphasis="solid"
+          onPress={() => onSubmit(value)}
+          testID={testID ? `${testID}-submit` : undefined}
+        >
+          Apply theme
+        </Button>
+      ) : null}
+    </Stack>
+  );
+}
+
+export const ThemeComposer = withZoraThemeScope(ThemeComposerInner);

package/src/patterns/theme-composer/index.ts

@@ -0,0 +1,2 @@
+export { ThemeComposer } from './ThemeComposer';
+export type { ThemeComposerProps } from './types';

package/src/patterns/theme-composer/types.ts

@@ -0,0 +1,10 @@
+import type { ZoraTheme, ZoraThemeMode } from '../../theme/types';
+import type { ZoraBaseProps } from '../../theme/ZoraBaseProps';
+
+export interface ThemeComposerProps extends ZoraBaseProps {
+  value: ZoraTheme;
+  onChange: (theme: ZoraTheme) => void;
+  mode?: ZoraThemeMode;
+  onModeChange?: (mode: ZoraThemeMode) => void;
+  onSubmit?: (theme: ZoraTheme) => void;
+}