@ankhorage/zora 1.0.1 → 1.0.3

package/src/components/drawer/Drawer.tsx

@@ -1,6 +1,7 @@
-import { Box, Drawer as SurfaceDrawer, Stack } from '@ankhorage/surface';
+import { Drawer as SurfaceDrawer } from '@ankhorage/surface';
 import React, { useCallback, useEffect, useRef } from 'react';
 
+import { Box, Stack } from '../../foundation';
 import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
 import { Heading } from '../heading';
 import { Text } from '../text';

package/src/components/form/Form.tsx

@@ -1,6 +1,6 @@
-import { Box, Stack } from '@ankhorage/surface';
 import React from 'react';
 
+import { Box, Stack } from '../../foundation';
 import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
 import { FormActions } from './FormActions';
 import { FormError } from './FormError';

package/src/components/form/FormActions.tsx

@@ -1,6 +1,6 @@
-import { Box, Stack } from '@ankhorage/surface';
 import React from 'react';
 
+import { Box, Stack } from '../../foundation';
 import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
 import { Button } from '../button';
 import type { FormActionsProps } from './types';

package/src/components/form/FormError.tsx

@@ -1,6 +1,6 @@
-import { Box } from '@ankhorage/surface';
 import React from 'react';
 
+import { Box } from '../../foundation';
 import { useZoraTheme } from '../../theme/useZoraTheme';
 import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
 import { Text } from '../text';

package/src/components/form/FormField.tsx

@@ -1,6 +1,7 @@
-import { Field, Stack } from '@ankhorage/surface';
+import { Field } from '@ankhorage/surface';
 import React from 'react';
 
+import { Stack } from '../../foundation';
 import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
 import { Input } from '../input';
 import { Text } from '../text';

package/src/components/modal/Modal.tsx

@@ -1,6 +1,7 @@
-import { Box, Modal as SurfaceModal, Stack } from '@ankhorage/surface';
+import { Modal as SurfaceModal } from '@ankhorage/surface';
 import React, { useCallback, useEffect, useRef } from 'react';
 
+import { Box, Stack } from '../../foundation';
 import { resolveDialogWidth } from '../../internal/recipes';
 import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
 import { Heading } from '../heading';

package/src/components/radio/RadioGroup.tsx

@@ -1,7 +1,8 @@
-import { Radio, Stack } from '@ankhorage/surface';
+import { Radio } from '@ankhorage/surface';
 import React from 'react';
 import { View } from 'react-native';
 
+import { Stack } from '../../foundation';
 import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
 import { Text } from '../text';
 import type { RadioGroupOption, RadioGroupProps } from './types';

package/src/components/select/Select.tsx

@@ -1,7 +1,7 @@
-import { Box } from '@ankhorage/surface';
 import { Picker } from '@react-native-picker/picker';
 import React from 'react';
 
+import { Box } from '../../foundation';
 import { useZoraTheme } from '../../theme/useZoraTheme';
 import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
 import type { SelectProps } from './types';

package/src/components/tabs/Tabs.tsx

@@ -1,6 +1,6 @@
-import { Box, Stack } from '@ankhorage/surface';
 import React from 'react';
 
+import { Box, Stack } from '../../foundation';
 import { useZoraTheme } from '../../theme/useZoraTheme';
 import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
 import { Button } from '../button';

package/src/components/toolbar/Toolbar.tsx

@@ -1,6 +1,6 @@
-import { Stack } from '@ankhorage/surface';
 import React from 'react';
 
+import { Stack } from '../../foundation';
 import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
 import { Card } from '../card';
 import type { ToolbarProps } from './types';

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

@@ -1,7 +1,7 @@
-import { Box } from '@ankhorage/surface';
 import React from 'react';
 import { StyleSheet, View } from 'react-native';
 
+import { Box } from '../../foundation';
 import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
 import type { AppShellProps } from './types';
 

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

@@ -1,7 +1,7 @@
-import { Center, Stack } from '@ankhorage/surface';
 import React from 'react';
 
 import { Card } from '../../components/card';
+import { Center, Stack } from '../../foundation';
 import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
 import type { AuthLayoutProps } from './types';
 

package/src/layout/page/Page.tsx

@@ -1,6 +1,6 @@
-import { Container, Stack } from '@ankhorage/surface';
 import React from 'react';
 
+import { Container, Stack } from '../../foundation';
 import { resolvePageMaxWidth } from '../../internal/recipes';
 import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
 import type { PageProps } from './types';

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

@@ -1,8 +1,8 @@
-import { Box, Stack } from '@ankhorage/surface';
 import React from 'react';
 
 import { Heading } from '../../components/heading';
 import { Text } from '../../components/text';
+import { Box, Stack } from '../../foundation';
 import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
 import type { PageHeaderProps } from './types';
 

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

@@ -1,6 +1,6 @@
-import { Stack } from '@ankhorage/surface';
 import React from 'react';
 
+import { Stack } from '../../foundation';
 import { SectionHeader } from '../../patterns/section-header';
 import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
 import type { PageSectionProps } from './types';

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

@@ -1,6 +1,6 @@
-import { Box, Stack } from '@ankhorage/surface';
 import React from 'react';
 
+import { Box, Stack } from '../../foundation';
 import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
 import type { SidebarLayoutProps } from './types';
 

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

@@ -1,6 +1,6 @@
-import { Box, Stack } from '@ankhorage/surface';
 import React from 'react';
 
+import { Box, Stack } from '../../foundation';
 import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
 import { SidebarLayout } from '../sidebar-layout';
 import type { TopbarLayoutProps } from './types';

package/src/patterns/auth/ForgotPasswordForm.tsx

@@ -1,8 +1,8 @@
-import { Stack } from '@ankhorage/surface';
 import React from 'react';
 
 import { Button } from '../../components/button';
 import { Form, type FormFieldConfig, type FormValues } from '../../components/form';
+import { Stack } from '../../foundation';
 import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
 import type { ForgotPasswordFormProps } from './types';
 import {

package/src/patterns/auth/OtpForm.tsx

@@ -1,8 +1,8 @@
-import { Stack } from '@ankhorage/surface';
 import React from 'react';
 
 import { Button } from '../../components/button';
 import { Form, type FormFieldConfig, type FormValues } from '../../components/form';
+import { Stack } from '../../foundation';
 import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
 import type { OtpFormProps } from './types';
 

package/src/patterns/auth/SignInForm.tsx

@@ -1,8 +1,8 @@
-import { Stack } from '@ankhorage/surface';
 import React from 'react';
 
 import { Button } from '../../components/button';
 import { Form, type FormFieldConfig, type FormValues } from '../../components/form';
+import { Stack } from '../../foundation';
 import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
 import type { SignInFormProps } from './types';
 import {

package/src/patterns/auth/SignUpForm.tsx

@@ -1,8 +1,8 @@
-import { Stack } from '@ankhorage/surface';
 import React from 'react';
 
 import { Button } from '../../components/button';
 import { Form, type FormFieldConfig, type FormValues } from '../../components/form';
+import { Stack } from '../../foundation';
 import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
 import type { SignUpFormProps } from './types';
 

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

@@ -1,9 +1,9 @@
-import { Box, Stack } from '@ankhorage/surface';
 import React from 'react';
 
 import { Button } from '../../components/button';
 import { IconButton } from '../../components/icon-button';
 import { Text } from '../../components/text';
+import { Box, Stack } from '../../foundation';
 import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
 import { Panel } from '../panel';
 import type { CollectionEditorProps } from './types';

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

@@ -1,8 +1,8 @@
-import { Stack } from '@ankhorage/surface';
 import React from 'react';
 
 import { Button } from '../../components/button';
 import { Modal } from '../../components/modal';
+import { Stack } from '../../foundation';
 import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
 import type { ConfirmDialogProps } from './types';
 

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

@@ -1,7 +1,7 @@
-import { Box, Stack } from '@ankhorage/surface';
 import React from 'react';
 
 import { IconButton } from '../../components/icon-button';
+import { Box, Stack } from '../../foundation';
 import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
 import { Panel } from '../panel';
 import type { DisclosureSectionProps } from './types';

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

@@ -1,8 +1,8 @@
-import { Stack } from '@ankhorage/surface';
 import React from 'react';
 
 import { Button } from '../../components/button';
 import { Card } from '../../components/card';
+import { Stack } from '../../foundation';
 import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
 import type { EmptyStateProps } from './types';
 

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

@@ -1,7 +1,8 @@
-import { Field, Stack } from '@ankhorage/surface';
+import { Field } from '@ankhorage/surface';
 import React from 'react';
 
 import { Text } from '../../components/text';
+import { Stack } from '../../foundation';
 import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
 import type { FormFieldProps } from './types';
 

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

@@ -1,6 +1,6 @@
-import { Box, Stack } from '@ankhorage/surface';
 import React from 'react';
 
+import { Box, Stack } from '../../foundation';
 import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
 import { FormField } from '../form-field';
 import type { InspectorFieldProps } from './types';

package/src/patterns/notice/Notice.tsx

@@ -1,8 +1,8 @@
-import { Box, Stack } from '@ankhorage/surface';
 import React from 'react';
 
 import { Badge } from '../../components/badge';
 import { Card } from '../../components/card';
+import { Box, Stack } from '../../foundation';
 import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
 import type { NoticeProps } from './types';
 

package/src/patterns/section-header/SectionHeader.tsx

@@ -1,8 +1,8 @@
-import { Box, Stack } from '@ankhorage/surface';
 import React from 'react';
 
 import { Heading } from '../../components/heading';
 import { Text } from '../../components/text';
+import { Box, Stack } from '../../foundation';
 import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
 import type { SectionHeaderProps } from './types';
 

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

@@ -1,8 +1,8 @@
-import { Box } from '@ankhorage/surface';
 import React from 'react';
 
 import { Card } from '../../components/card';
 import { Text } from '../../components/text';
+import { Box } from '../../foundation';
 import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
 import type { SettingsRowProps } from './types';
 

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

@@ -1,7 +1,6 @@
 import { COLOR_HARMONIES, parseHexColorOrThrow } from '@ankhorage/color-theory';
 import type { AppCategory } from '@ankhorage/contracts';
 import { APP_CATEGORIES } from '@ankhorage/contracts';
-import { Box, Stack } from '@ankhorage/surface';
 import React from 'react';
 
 import { Badge } from '../../components/badge';
@@ -12,12 +11,14 @@ import { Input } from '../../components/input';
 import { Select } from '../../components/select';
 import { Tabs } from '../../components/tabs';
 import { Text } from '../../components/text';
+import { Box, Stack } from '../../foundation';
 import type { ZoraThemeMode } from '../../theme/types';
 import { useZoraTheme } from '../../theme/useZoraTheme';
 import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
 import type { ThemeComposerProps } from './types';
 
-const HEX_ERROR_MESSAGE = 'Enter a valid 6-digit hex color (e.g. #0f766e).';
+const HEX_ERROR_MESSAGE = 'Enter a valid 6-digit hex color.';
+const HEX_INPUT_PLACEHOLDER = 'Enter hex color';
 const NAME_ERROR_MESSAGE = 'Theme name cannot be empty.';
 
 function isValidHex(value: string): boolean {
@@ -179,7 +180,7 @@ function ThemeComposerInner({
               <Input
                 value={hexInput}
                 onChangeText={handleHexChange}
-                placeholder="#0f766e"
+                placeholder={HEX_INPUT_PLACEHOLDER}
                 autoCapitalize="none"
                 autoCorrect={false}
                 maxLength={7}

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

@@ -1,9 +1,9 @@
-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 { Box } from '../../foundation';
 import { useZoraTheme } from '../../theme/useZoraTheme';
 import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
 import type { PaletteItemProps } from './types';

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

@@ -1,6 +1,6 @@
-import { Box } from '@ankhorage/surface';
 import React from 'react';
 
+import { Box } from '../../foundation';
 import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
 import type { TileGridProps } from './types';
 

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

@@ -1,7 +1,7 @@
-import { Box, Stack } from '@ankhorage/surface';
 import React from 'react';
 
 import { IconButton } from '../../components/icon-button';
+import { Box, Stack } from '../../foundation';
 import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
 import type { ZoraBaseProps } from '../../theme/ZoraBaseProps';
 import { SettingsRow } from '../settings-row';

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

@@ -1,6 +1,6 @@
-import { Stack } from '@ankhorage/surface';
 import React from 'react';
 
+import { Stack } from '../../foundation';
 import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
 import { TreeItem } from './TreeItem';
 import type { TreeViewProps } from './types';