@ankhorage/zora 10.0.0 → 12.0.0

package/src/metadata/componentMeta.ts

@@ -1,7 +1,5 @@
 import { appBarMeta } from '../components/app-bar/meta';
 import { breadcrumbsMeta } from '../components/breadcrumbs/meta';
-import { datePickerMeta } from '../components/date-picker/meta';
-import { formActionsMeta, formErrorMeta, formFieldMeta, formMeta } from '../components/form/meta';
 import { gradientMeta } from '../components/gradient/meta';
 import { dropdownMenuMeta, menuMeta } from '../components/menu/meta';
 import { modalMeta } from '../components/modal/meta';
@@ -9,14 +7,7 @@ import { paginationMeta } from '../components/pagination/meta';
 import { ratingMeta } from '../components/rating/meta';
 import { searchBarMeta } from '../components/search-bar/meta';
 import { selectMeta } from '../components/select/meta';
-import {
-  skeletonCardMeta,
-  skeletonListMeta,
-  skeletonMeta,
-  skeletonTextMeta,
-} from '../components/skeleton/meta';
 import { tabsMeta } from '../components/tabs/meta';
-import { timePickerMeta } from '../components/time-picker/meta';
 import { toastMeta, toastProviderMeta } from '../components/toast/meta';
 import { toolbarActionMeta, toolbarMeta } from '../components/toolbar/meta';
 import { activityIndicatorMeta } from '../features/activity-indicator/activityIndicatorMeta';
@@ -35,10 +26,16 @@ import { productCardMeta } from '../features/card/productCardMeta';
 import { chipGroupMeta } from '../features/chip/chipGroupMeta';
 import { chipMeta } from '../features/chip/chipMeta';
 import { dataTableMeta } from '../features/data-table/dataTableMeta';
+import { datePickerMeta } from '../features/date-picker/datePickerMeta';
 import { emptyStateMeta } from '../features/empty-state/emptyStateMeta';
 import { checkboxGroupMeta, checkboxMeta } from '../features/form/checkbox/checkboxMeta';
+import { formActionsMeta } from '../features/form/formActionsMeta';
+import { formErrorMeta } from '../features/form/formErrorMeta';
+import { formFieldMeta } from '../features/form/formFieldMeta';
+import { formMeta } from '../features/form/formMeta';
 import { radioGroupMeta, radioMeta } from '../features/form/radio/radioMeta';
 import { textInputMeta } from '../features/form/text-input/textInputMeta';
+import { heroMeta } from '../features/hero/heroMeta';
 import { iconMeta } from '../features/icon/iconMeta';
 import { imageMeta } from '../features/image/imageMeta';
 import { keyboardAvoidingViewMeta } from '../features/keyboard-avoiding-view/keyboardAvoidingViewMeta';
@@ -50,8 +47,16 @@ import { gridMeta } from '../features/layout/gridMeta';
 import { stackMeta } from '../features/layout/stackMeta';
 import { flatListMeta } from '../features/list/flatListMeta';
 import { sectionListMeta } from '../features/list/sectionListMeta';
+import { missingElementMeta } from '../features/missing-element/missingElementMeta';
 import { progressMeta, progressRingMeta } from '../features/progress/progressMeta';
+import {
+  skeletonCardMeta,
+  skeletonListMeta,
+  skeletonMeta,
+  skeletonTextMeta,
+} from '../features/skeleton/skeletonMeta';
 import { surfaceMeta } from '../features/surface/surfaceMeta';
+import { timePickerMeta } from '../features/time-picker/timePickerMeta';
 import { headingMeta } from '../features/typography/headingMeta';
 import { textMeta } from '../features/typography/textMeta';
 import { uploaderMeta } from '../features/uploader/uploaderMeta';
@@ -75,11 +80,9 @@ import { collectionEditorMeta } from '../patterns/collection-editor/meta';
 import { confirmDialogMeta } from '../patterns/confirm-dialog/meta';
 import { disclosureSectionMeta } from '../patterns/disclosure-section/meta';
 import { filterBarMeta } from '../patterns/filter-bar/meta';
-import { heroMeta } from '../patterns/hero/meta';
 import { inspectorFieldMeta } from '../patterns/inspector-field/meta';
 import { listMeta, listRowMeta, listSectionMeta } from '../patterns/list/meta';
 import { messageBubbleMeta } from '../patterns/message-bubble/meta';
-import { missingElementMeta } from '../patterns/missing-element/meta';
 import { noticeMeta } from '../patterns/notice/meta';
 import { panelMeta } from '../patterns/panel/meta';
 import { readerSurfaceMeta } from '../patterns/reader/meta';

package/src/patterns/auth/AuthForm.tsx

@@ -0,0 +1,68 @@
+import React from 'react';
+
+import { FormActions, FormError, useFormController } from '../../features/form/public';
+import { Stack } from '../../features/layout/public';
+import type { ZoraBaseProps } from '../../theme/ZoraBaseProps';
+import type { FormErrors, FormFieldConfig, FormValues } from '../../types/form';
+import { AuthFormField } from './AuthFormField';
+
+interface AuthFormProps<TName extends string> {
+  fields: readonly FormFieldConfig<TName>[];
+  values: FormValues<TName>;
+  onChange: (values: FormValues<TName>) => void;
+  onSubmit: (values: FormValues<TName>) => void | Promise<void>;
+  errors?: FormErrors<TName>;
+  error?: React.ReactNode;
+  loading?: boolean;
+  disabled?: boolean;
+  submitLabel?: React.ReactNode;
+  actions?: React.ReactNode;
+  testID?: string;
+  interactionPolicy?: ZoraBaseProps['interactionPolicy'];
+}
+
+/*** Keeps config-driven field orchestration private to the auth patterns that own it. */
+export function AuthForm<TName extends string>({
+  fields,
+  values,
+  onChange,
+  onSubmit,
+  errors,
+  error,
+  loading = false,
+  disabled = false,
+  submitLabel = 'Submit',
+  actions,
+  testID,
+  interactionPolicy,
+}: AuthFormProps<TName>) {
+  const controller = useFormController({ fields, values, errors, onChange, onSubmit });
+  return (
+    <Stack gap="m" testID={testID}>
+      <FormError error={error} />
+      {fields.map((field) => (
+        <AuthFormField
+          key={field.name}
+          disabled={disabled}
+          error={controller.errors[field.name]}
+          field={field}
+          interactionPolicy={interactionPolicy}
+          loading={loading}
+          onChange={controller.setFieldValue}
+          value={values[field.name]}
+        />
+      ))}
+      <FormActions
+        disabled={disabled}
+        interactionPolicy={interactionPolicy}
+        loading={loading}
+        onSubmit={() => {
+          if (interactionPolicy !== 'passive') void controller.handleSubmit();
+        }}
+        submitLabel={submitLabel}
+      >
+        {actions}
+      </FormActions>
+    </Stack>
+  );
+}

package/src/patterns/auth/AuthFormField.tsx

@@ -0,0 +1,81 @@
+import React from 'react';
+
+import { FormField, hasRequiredRule } from '../../features/form/public';
+import { TextInput } from '../../features/form/text-input/public';
+import type { ZoraBaseProps } from '../../theme/ZoraBaseProps';
+import type { FormFieldConfig, FormFieldValue } from '../../types/form';
+
+interface AuthFormFieldProps<TName extends string> {
+  field: FormFieldConfig<TName>;
+  value: FormFieldValue;
+  onChange: (name: TName, value: FormFieldValue) => void;
+  error?: React.ReactNode;
+  disabled?: boolean;
+  loading?: boolean;
+  interactionPolicy?: ZoraBaseProps['interactionPolicy'];
+}
+
+/*** Adapts an auth field configuration to the public compositional form primitives. */
+export function AuthFormField<TName extends string>({
+  field,
+  value,
+  onChange,
+  error,
+  disabled = false,
+  loading = false,
+  interactionPolicy,
+}: AuthFormFieldProps<TName>) {
+  const fieldDisabled = disabled || loading || field.disabled;
+  return (
+    <FormField
+      description={field.description}
+      disabled={fieldDisabled}
+      errorText={error}
+      helperText={field.helperText}
+      invalid={Boolean(error)}
+      label={field.label}
+      readOnly={field.readOnly}
+      required={field.required ?? hasRequiredRule(field.rules)}
+      testID={field.testID}
+    >
+      <TextInput
+        accessibilityLabel={typeof field.label === 'string' ? field.label : undefined}
+        autoCapitalize={
+          field.autoCapitalize ??
+          (['email', 'password', 'url'].includes(field.type ?? 'text') ? 'none' : undefined)
+        }
+        autoComplete={field.autoComplete}
+        disabled={fieldDisabled}
+        interactionPolicy={interactionPolicy}
+        invalid={Boolean(error)}
+        keyboardType={resolveKeyboardType(field)}
+        maxLength={field.maxLength}
+        onChangeText={(nextValue) => onChange(field.name, nextValue)}
+        placeholder={field.placeholder}
+        readOnly={field.readOnly}
+        secureTextEntry={field.secureTextEntry ?? field.type === 'password'}
+        textContentType={resolveTextContentType(field)}
+        value={value}
+      />
+    </FormField>
+  );
+}
+
+/*** Resolves the native keyboard for an auth field configuration. */
+function resolveKeyboardType(field: FormFieldConfig) {
+  if (field.keyboardType) return field.keyboardType;
+  if (field.type === 'email') return 'email-address';
+  if (field.type === 'number' || field.type === 'otp') return 'number-pad';
+  if (field.type === 'tel') return 'phone-pad';
+  if (field.type === 'url') return 'url';
+  return undefined;
+}
+
+/*** Resolves platform text-content hints for an auth field configuration. */
+function resolveTextContentType(field: FormFieldConfig) {
+  if (field.textContentType) return field.textContentType;
+  if (field.type === 'email') return 'emailAddress';
+  if (field.type === 'password') return 'password';
+  if (field.type === 'otp') return 'oneTimeCode';
+  return undefined;
+}

package/src/patterns/auth/ForgotPasswordForm.tsx

@@ -1,9 +1,10 @@
 import React from 'react';
 
-import { Form, type FormFieldConfig, type FormValues } from '../../components/form';
 import { Button } from '../../features/button/public';
 import { Stack } from '../../features/layout/public';
 import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
+import type { FormFieldConfig, FormValues } from '../../types/form';
+import { AuthForm } from './AuthForm';
 import type { ForgotPasswordFormProps } from './types';
 import {
   defaultIdentifiers,
@@ -56,7 +57,7 @@ function ForgotPasswordFormInner({
   );
 
   return (
-    <Form
+    <AuthForm
       actions={
         onSignIn ? (
           <Stack direction="row" gap="s" wrap="wrap">

package/src/patterns/auth/OtpForm.tsx

@@ -1,9 +1,10 @@
 import React from 'react';
 
-import { Form, type FormFieldConfig, type FormValues } from '../../components/form';
 import { Button } from '../../features/button/public';
 import { Stack } from '../../features/layout/public';
 import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
+import type { FormFieldConfig, FormValues } from '../../types/form';
+import { AuthForm } from './AuthForm';
 import type { OtpFormProps } from './types';
 
 type OtpFieldName = 'otp';
@@ -51,7 +52,7 @@ function OtpFormInner({
   );
 
   return (
-    <Form
+    <AuthForm
       actions={
         onResend ? (
           <Stack direction="row" gap="s" wrap="wrap">

package/src/patterns/auth/SignInForm.tsx

@@ -1,9 +1,10 @@
 import React from 'react';
 
-import { Form, type FormFieldConfig, type FormValues } from '../../components/form';
 import { Button } from '../../features/button/public';
 import { Stack } from '../../features/layout/public';
 import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
+import type { FormFieldConfig, FormValues } from '../../types/form';
+import { AuthForm } from './AuthForm';
 import type { SignInFormProps } from './types';
 import {
   defaultIdentifiers,
@@ -68,7 +69,7 @@ function SignInFormInner({
   );
 
   return (
-    <Form
+    <AuthForm
       actions={
         hasActions ? (
           <Stack direction="row" gap="s" wrap="wrap">

package/src/patterns/auth/SignUpForm.tsx

@@ -1,9 +1,10 @@
 import React from 'react';
 
-import { Form, type FormFieldConfig, type FormValues } from '../../components/form';
 import { Button } from '../../features/button/public';
 import { Stack } from '../../features/layout/public';
 import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
+import type { FormFieldConfig, FormValues } from '../../types/form';
+import { AuthForm } from './AuthForm';
 import type { SignUpFormProps } from './types';
 
 const defaultSignUpFields = [
@@ -48,7 +49,7 @@ function SignUpFormInner({
   const [values, setValues] = React.useState<FormValues>(() => createValues(fields));
 
   return (
-    <Form
+    <AuthForm
       actions={
         onSignIn ? (
           <Stack direction="row" gap="s" wrap="wrap">

package/src/patterns/auth/types.ts

@@ -1,9 +1,9 @@
 import type { ButtonIconSpec } from '@ankhorage/surface';
 import type React from 'react';
 
-import type { FormFieldConfig, FormValues } from '../../components/form';
 import type { ButtonProps } from '../../features/button/public';
 import type { ZoraBaseProps } from '../../theme/ZoraBaseProps';
+import type { FormFieldConfig, FormValues } from '../../types/form';
 
 export type AuthIdentifierKind = 'email' | 'phone' | 'username';
 

package/src/patterns/auth/utils.ts

@@ -1,4 +1,4 @@
-import type { FormFieldConfig, ValidationRule } from '../../components/form';
+import type { FormFieldConfig, ValidationRule } from '../../types/form';
 import type { AuthIdentifierKind } from './types';
 
 export const defaultIdentifiers = ['email'] as const satisfies readonly AuthIdentifierKind[];

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

@@ -1,8 +1,8 @@
 import React from 'react';
 
+import { FormField } from '../../features/form/public';
 import { Box, Stack } from '../../features/layout/public';
 import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
-import { FormField } from '../form-field';
 import type { InspectorFieldProps } from './types';
 
 function InspectorFieldInner({

package/src/registry.ts

@@ -3,8 +3,6 @@ import type React from 'react';
 
 import { AppBar } from './components/app-bar';
 import { Breadcrumbs } from './components/breadcrumbs';
-import { DatePicker } from './components/date-picker';
-import { Form, FormActions, FormError, FormField } from './components/form';
 import { Gradient } from './components/gradient';
 import { DropdownMenu, Menu } from './components/menu';
 import { Modal } from './components/modal';
@@ -12,9 +10,7 @@ import { Pagination } from './components/pagination';
 import { Rating } from './components/rating';
 import { SearchBar } from './components/search-bar';
 import { Select } from './components/select';
-import { Skeleton, SkeletonCard, SkeletonList, SkeletonText } from './components/skeleton';
 import { Tabs } from './components/tabs';
-import { TimePicker } from './components/time-picker';
 import { Toast } from './components/toast';
 import { Toolbar, ToolbarAction } from './components/toolbar';
 import { ActivityIndicator } from './features/activity-indicator/public';
@@ -33,18 +29,24 @@ import { ProductCard } from './features/card/public';
 import { Chip } from './features/chip/public';
 import { ChipGroup } from './features/chip/public';
 import { DataTable } from './features/data-table/public';
+import { DatePicker } from './features/date-picker/public';
 import { EmptyState } from './features/empty-state/public';
 import { Checkbox, CheckboxGroup } from './features/form/checkbox/public';
+import { Form, FormActions, FormError, FormField } from './features/form/public';
 import { Radio, RadioGroup } from './features/form/radio/public';
 import { TextInput } from './features/form/text-input/public';
+import { Hero } from './features/hero/public';
 import { Icon } from './features/icon/public';
 import { Image } from './features/image/public';
 import { KeyboardAvoidingView } from './features/keyboard-avoiding-view/public';
 import { Box, Container, Divider, Grid, Stack } from './features/layout/public';
 import { ContentRail } from './features/layout/public';
 import { FlatList, SectionList } from './features/list/public';
+import { MissingElement } from './features/missing-element/public';
 import { Progress, ProgressRing } from './features/progress/public';
+import { Skeleton, SkeletonCard, SkeletonList, SkeletonText } from './features/skeleton/public';
 import { Surface } from './features/surface/public';
+import { TimePicker } from './features/time-picker/public';
 import { Heading } from './features/typography/public';
 import { Text } from './features/typography/public';
 import { Uploader } from './features/uploader/public';
@@ -68,11 +70,9 @@ import { CollectionEditor } from './patterns/collection-editor';
 import { ConfirmDialog } from './patterns/confirm-dialog';
 import { DisclosureSection } from './patterns/disclosure-section';
 import { FilterBar } from './patterns/filter-bar';
-import { Hero } from './patterns/hero';
 import { InspectorField } from './patterns/inspector-field';
 import { List, ListRow, ListSection } from './patterns/list';
 import { MessageBubble } from './patterns/message-bubble';
-import { MissingElement } from './patterns/missing-element';
 import { Notice } from './patterns/notice';
 import { Panel } from './patterns/panel';
 import { ReaderSurface } from './patterns/reader';

package/src/theme/themeScopeStructure.test.ts

@@ -65,10 +65,10 @@ const scopedComponentFiles = [
   join(srcDir, 'features', 'card', 'adapters', 'inbound', 'MetricCard.tsx'),
   join(srcDir, 'features', 'form', 'checkbox', 'adapters', 'inbound', 'Checkbox.tsx'),
   join(srcDir, 'features', 'form', 'checkbox', 'adapters', 'inbound', 'CheckboxGroup.tsx'),
-  join(srcDir, 'components', 'form', 'Form.tsx'),
-  join(srcDir, 'components', 'form', 'FormActions.tsx'),
-  join(srcDir, 'components', 'form', 'FormError.tsx'),
-  join(srcDir, 'components', 'form', 'FormField.tsx'),
+  join(srcDir, 'features', 'form', 'adapters', 'inbound', 'Form.tsx'),
+  join(srcDir, 'features', 'form', 'adapters', 'inbound', 'FormActions.tsx'),
+  join(srcDir, 'features', 'form', 'adapters', 'inbound', 'FormError.tsx'),
+  join(srcDir, 'features', 'form', 'adapters', 'inbound', 'FormField.tsx'),
   join(srcDir, 'features', 'typography', 'adapters', 'inbound', 'Heading.tsx'),
   join(srcDir, 'features', 'icon', 'adapters', 'inbound', 'Icon.tsx'),
   join(srcDir, 'features', 'button', 'adapters', 'inbound', 'IconButton.tsx'),
@@ -99,7 +99,6 @@ const scopedComponentFiles = [
   join(srcDir, 'patterns', 'confirm-dialog', 'ConfirmDialog.tsx'),
   join(srcDir, 'patterns', 'disclosure-section', 'DisclosureSection.tsx'),
   join(srcDir, 'features', 'empty-state', 'adapters', 'inbound', 'EmptyState.tsx'),
-  join(srcDir, 'patterns', 'form-field', 'FormField.tsx'),
   join(srcDir, 'patterns', 'inspector-field', 'InspectorField.tsx'),
   join(srcDir, 'patterns', 'list', 'List.tsx'),
   join(srcDir, 'patterns', 'list', 'ListRow.tsx'),
@@ -136,7 +135,7 @@ const scopedPropTypeFiles = [
   join(srcDir, 'types', 'media-card.ts'),
   join(srcDir, 'types', 'metric-card.ts'),
   join(srcDir, 'types', 'checkbox.ts'),
-  join(srcDir, 'components', 'form', 'types.ts'),
+  join(srcDir, 'types', 'form.ts'),
   join(srcDir, 'types', 'heading.ts'),
   join(srcDir, 'types', 'icon.ts'),
   join(srcDir, 'types', 'icon-button.ts'),
@@ -162,7 +161,6 @@ const scopedPropTypeFiles = [
   join(srcDir, 'patterns', 'confirm-dialog', 'types.ts'),
   join(srcDir, 'patterns', 'disclosure-section', 'types.ts'),
   join(srcDir, 'types', 'empty-state.ts'),
-  join(srcDir, 'patterns', 'form-field', 'types.ts'),
   join(srcDir, 'patterns', 'inspector-field', 'types.ts'),
   join(srcDir, 'patterns', 'list', 'types.ts'),
   join(srcDir, 'patterns', 'notice', 'types.ts'),

package/src/{components/date-picker/types.ts → types/date-picker.ts}

@@ -1,8 +1,8 @@
 import type React from 'react';
 
-import type { ZoraBaseProps } from '../../theme/ZoraBaseProps';
+import type { ZoraBaseProps } from '../theme/ZoraBaseProps';
 
-export type DatePickerValue = Date | null;
+export type DatePickerValue = string | null;
 
 export interface DatePickerProps extends ZoraBaseProps {
   value: DatePickerValue;
@@ -11,10 +11,10 @@ export interface DatePickerProps extends ZoraBaseProps {
   description?: React.ReactNode;
   error?: React.ReactNode;
   placeholder?: React.ReactNode;
-  minDate?: Date;
-  maxDate?: Date;
+  minDate?: string;
+  maxDate?: string;
   disabled?: boolean;
   required?: boolean;
-  formatDate?: (value: Date) => React.ReactNode;
+  formatDate?: (value: string) => React.ReactNode;
   testID?: string;
 }

package/src/{components/form/types.ts → types/form.ts}

@@ -1,20 +1,18 @@
 import type { FieldProps as SurfaceFieldProps } from '@ankhorage/surface';
 import type React from 'react';
 
-import type { ZoraBaseProps } from '../../theme/ZoraBaseProps';
-import type { TextInputProps } from '../../types/text-input';
+import type { ZoraBaseProps } from '../theme/ZoraBaseProps';
+import type { TextInputProps } from './text-input';
 
 export type ValidationRule =
   | { kind: 'required'; message?: string }
   | { kind: 'email'; message?: string }
   | { kind: 'minLength'; value: number; message?: string }
   | { kind: 'pattern'; value: string; message?: string };
-
 export type FormFieldValue = string;
 export type FormValues<TName extends string = string> = Record<TName, FormFieldValue>;
 export type FormErrors<TName extends string = string> = Partial<Record<TName, React.ReactNode>>;
 export type FormValidationErrors<TName extends string = string> = Partial<Record<TName, string>>;
-
 export type FormFieldInputType = 'email' | 'number' | 'otp' | 'password' | 'tel' | 'text' | 'url';
 
 export interface FormFieldConfig<TName extends string = string> {
@@ -37,7 +35,16 @@ export interface FormFieldConfig<TName extends string = string> {
   testID?: string;
 }
 
-interface FormFieldWrapperProps
+export interface FormProps extends ZoraBaseProps {
+  children?: React.ReactNode;
+  onSubmit?: () => void | Promise<void>;
+  loading?: boolean;
+  disabled?: boolean;
+  submitLabel?: React.ReactNode;
+  actions?: React.ReactNode;
+}
+
+export interface FormFieldProps
   extends
     ZoraBaseProps,
     Pick<
@@ -49,18 +56,6 @@ interface FormFieldWrapperProps
   helperText?: React.ReactNode;
 }
 
-export interface FormFieldControlProps<TName extends string = string> extends ZoraBaseProps {
-  field: FormFieldConfig<TName>;
-  value: FormFieldValue;
-  onChange: (name: TName, value: FormFieldValue) => void;
-  error?: React.ReactNode;
-  disabled?: boolean;
-  loading?: boolean;
-}
-
-export type FormFieldProps<TName extends string = string> =
-  FormFieldControlProps<TName> | FormFieldWrapperProps;
-
 export interface FormActionsProps extends ZoraBaseProps {
   submitLabel?: React.ReactNode;
   loading?: boolean;
@@ -68,31 +63,13 @@ export interface FormActionsProps extends ZoraBaseProps {
   onSubmit?: () => void;
   children?: React.ReactNode;
 }
-
 export interface FormErrorProps extends ZoraBaseProps {
   error?: React.ReactNode;
 }
-
-export interface FormProps<TName extends string = string> extends ZoraBaseProps {
-  fields: readonly FormFieldConfig<TName>[];
-  values: FormValues<TName>;
-  onChange: (values: FormValues<TName>) => void;
-  onSubmit: (values: FormValues<TName>) => void | Promise<void>;
-  errors?: FormErrors<TName>;
-  error?: React.ReactNode;
-  loading?: boolean;
-  disabled?: boolean;
-  submitLabel?: React.ReactNode;
-  actions?: React.ReactNode;
-  footer?: React.ReactNode;
-  validateOnChange?: boolean;
-}
-
 export interface FormValidationResult<TName extends string = string> {
   errors: FormValidationErrors<TName>;
   valid: boolean;
 }
-
 export interface UseFormControllerOptions<TName extends string = string> {
   fields: readonly FormFieldConfig<TName>[];
   initialValues?: Partial<FormValues<TName>>;
@@ -102,7 +79,6 @@ export interface UseFormControllerOptions<TName extends string = string> {
   onSubmit?: (values: FormValues<TName>) => void | Promise<void>;
   validateOnChange?: boolean;
 }
-
 export interface UseFormControllerResult<TName extends string = string> {
   values: FormValues<TName>;
   errors: FormErrors<TName>;

package/src/{patterns/hero/types.ts → types/hero.ts}

@@ -1,7 +1,7 @@
 import type React from 'react';
 
-import type { ZoraButtonVariant, ZoraColor } from '../../internal/recipes';
-import type { ZoraBaseProps } from '../../theme/ZoraBaseProps';
+import type { ZoraButtonVariant, ZoraColor } from '../internal/recipes';
+import type { ZoraBaseProps } from '../theme/ZoraBaseProps';
 
 export type HeroAlign = 'start' | 'center';
 export type HeroLayout = 'stack' | 'split' | 'mediaFirst';

package/src/{patterns/missing-element/types.ts → types/missing-element.ts}

@@ -1,4 +1,4 @@
-import type { ZoraBaseProps } from '../../theme/ZoraBaseProps';
+import type { ZoraBaseProps } from '../theme/ZoraBaseProps';
 
 export interface MissingElementProps extends ZoraBaseProps {
   requestedCapability: string;

package/src/{components/skeleton/types.ts → types/skeleton.ts}

@@ -1,5 +1,5 @@
-import type { BoxProps, StackProps } from '../../features/layout/public';
-import type { ZoraBaseProps } from '../../theme/ZoraBaseProps';
+import type { BoxProps, StackProps } from '../features/layout/public';
+import type { ZoraBaseProps } from '../theme/ZoraBaseProps';
 
 export type SkeletonRadius = BoxProps['radius'];
 export type SkeletonDimension = BoxProps['width'];

package/src/{components/time-picker/types.ts → types/time-picker.ts}

@@ -1,6 +1,6 @@
 import type React from 'react';
 
-import type { ZoraBaseProps } from '../../theme/ZoraBaseProps';
+import type { ZoraBaseProps } from '../theme/ZoraBaseProps';
 
 export type TimePickerValue = string | null;
 

package/dist/components/date-picker/DatePicker.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"DatePicker.d.ts","sourceRoot":"","sources":["../../../src/components/date-picker/DatePicker.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AA+U/C;;GAEG;AACH,eAAO,MAAM,UAAU,uDAAsC,CAAC"}

package/dist/components/date-picker/DatePicker.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"DatePicker.js","sourceRoot":"","sources":["../../../src/components/date-picker/DatePicker.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Field } from '@ankhorage/surface';\nimport React from 'react';\n\nimport { useBottomSheet } from '../../features/bottom-sheet/public';\nimport { Button } from '../../features/button/public';\nimport { Box, Stack } from '../../features/layout/public';\nimport { Text } from '../../features/typography/public';\nimport { withZoraThemeScope } from '../../theme/withZoraThemeScope';\nimport type { DatePickerProps } from './types';\n\nconst WEEKDAY_LABELS = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'] as const;\nconst DAY_CELL_WIDTH = 42;\n\n/*** Render the field label and optional supporting description. */\nfunction renderLabel(label: React.ReactNode, description: React.ReactNode | undefined) {\n  return (\n    <Stack gap=\"xs\">\n      <Text variant=\"label\" weight=\"semiBold\">\n        {label}\n      </Text>\n      {description ? (\n        <Text emphasis=\"muted\" variant=\"bodySmall\">\n          {description}\n        </Text>\n      ) : null}\n    </Stack>\n  );\n}\n\n/*** Normalize a date to the start of its local calendar day. */\nfunction startOfLocalDay(value: Date): Date {\n  return new Date(value.getFullYear(), value.getMonth(), value.getDate());\n}\n\n/*** Compare two values by local calendar day. */\nfunction isSameLocalDay(left: Date | null, right: Date): boolean {\n  if (!left) return false;\n  return startOfLocalDay(left).getTime() === startOfLocalDay(right).getTime();\n}\n\n/*** Report whether one local calendar day precedes another. */\nfunction isBeforeLocalDay(left: Date, right: Date): boolean {\n  return startOfLocalDay(left).getTime() < startOfLocalDay(right).getTime();\n}\n\n/*** Report whether one local calendar day follows another. */\nfunction isAfterLocalDay(left: Date, right: Date): boolean {\n  return startOfLocalDay(left).getTime() > startOfLocalDay(right).getTime();\n}\n\n/*** Resolve whether a date falls outside the configured picker range. */\nfunction isDateDisabled(\n  value: Date,\n  minDate: Date | undefined,\n  maxDate: Date | undefined,\n): boolean {\n  if (minDate && isBeforeLocalDay(value, minDate)) return true;\n  if (maxDate && isAfterLocalDay(value, maxDate)) return true;\n  return false;\n}\n\n/*** Format the current calendar month for the picker heading. */\nfunction formatMonthLabel(value: Date): string {\n  return value.toLocaleDateString(undefined, { month: 'long', year: 'numeric' });\n}\n\n/*** Format a selected date with the platform locale defaults. */\nfunction formatDefaultDate(value: Date): string {\n  return value.toLocaleDateString();\n}\n\n/*** Build the padded calendar grid for one month. */\nfunction createMonthDays(month: Date): (Date | null)[] {\n  const firstDay = new Date(month.getFullYear(), month.getMonth(), 1);\n  const dayCount = new Date(month.getFullYear(), month.getMonth() + 1, 0).getDate();\n  const days: (Date | null)[] = [];\n\n  for (let offset = 0; offset < firstDay.getDay(); offset += 1) days.push(null);\n  for (let day = 1; day <= dayCount; day += 1) {\n    days.push(new Date(month.getFullYear(), month.getMonth(), day));\n  }\n  while (days.length % 7 !== 0) days.push(null);\n\n  return days;\n}\n\n/*** Resolve the month initially shown by the calendar sheet. */\nfunction resolveInitialMonth(value: Date | null, minDate: Date | undefined): Date {\n  const base = value ?? minDate ?? new Date();\n  return new Date(base.getFullYear(), base.getMonth(), 1);\n}\n\n/*** Report whether the configured range intersects a candidate month. */\nfunction canNavigateToMonth(\n  month: Date,\n  minDate: Date | undefined,\n  maxDate: Date | undefined,\n): boolean {\n  const firstDay = new Date(month.getFullYear(), month.getMonth(), 1);\n  const lastDay = new Date(month.getFullYear(), month.getMonth() + 1, 0);\n\n  if (maxDate && isAfterLocalDay(firstDay, maxDate)) return false;\n  if (minDate && isBeforeLocalDay(lastDay, minDate)) return false;\n  return true;\n}\n\nfunction DatePickerInner({\n  themeId: _themeId,\n  mode: _mode,\n  value,\n  onValueChange,\n  label,\n  description,\n  error,\n  placeholder = 'Choose date',\n  minDate,\n  maxDate,\n  disabled = false,\n  required = false,\n  formatDate,\n  testID,\n  interactionPolicy,\n}: DatePickerProps) {\n  const { dismiss, present } = useBottomSheet();\n  const passive = interactionPolicy === 'passive';\n  const displayValue = value\n    ? formatDate\n      ? formatDate(value)\n      : formatDefaultDate(value)\n    : placeholder;\n\n  /*** Present the calendar content through the shared BottomSheet controller. */\n  function openPicker() {\n    if (passive) return;\n    present({\n      content: (\n        <DatePickerSheet\n          description={description}\n          interactionPolicy={interactionPolicy}\n          label={label}\n          maxDate={maxDate}\n          minDate={minDate}\n          onDismiss={dismiss}\n          onSelect={(date) => {\n            onValueChange?.(startOfLocalDay(date));\n            dismiss();\n          }}\n          testID={testID}\n          value={value}\n        />\n      ),\n    });\n  }\n\n  return (\n    <Field\n      disabled={disabled}\n      errorText={error}\n      invalid={Boolean(error)}\n      label={label ? renderLabel(label, description) : undefined}\n      required={required}\n      testID={testID}\n    >\n      <Button\n        disabled={disabled}\n        interactionPolicy={interactionPolicy}\n        onPress={openPicker}\n        testID={testID ? `${testID}-trigger` : undefined}\n        trailingIcon={{ name: 'calendar-outline' }}\n        variant=\"outline\"\n      >\n        {displayValue}\n      </Button>\n    </Field>\n  );\n}\n\ninterface DatePickerSheetProps extends Pick<\n  DatePickerProps,\n  'description' | 'interactionPolicy' | 'label' | 'maxDate' | 'minDate' | 'testID' | 'value'\n> {\n  onDismiss: () => void;\n  onSelect: (value: Date) => void;\n}\n\n/*** Render the calendar-specific content inside the shared BottomSheet host. */\nfunction DatePickerSheet({\n  description,\n  interactionPolicy,\n  label,\n  maxDate,\n  minDate,\n  onDismiss,\n  onSelect,\n  testID,\n  value,\n}: DatePickerSheetProps) {\n  const [displayMonth, setDisplayMonth] = React.useState(() => resolveInitialMonth(value, minDate));\n  const monthDays = React.useMemo(() => createMonthDays(displayMonth), [displayMonth]);\n\n  return (\n    <Stack gap=\"m\" p=\"m\" testID={testID ? `${testID}-sheet` : undefined}>\n      <PickerSheetHeader description={description} title={label ?? 'Choose date'} />\n      <DatePickerMonthNavigation\n        displayMonth={displayMonth}\n        interactionPolicy={interactionPolicy}\n        maxDate={maxDate}\n        minDate={minDate}\n        onMonthChange={setDisplayMonth}\n      />\n      <DatePickerWeekdays />\n      <DatePickerCalendar\n        interactionPolicy={interactionPolicy}\n        maxDate={maxDate}\n        minDate={minDate}\n        monthDays={monthDays}\n        onSelect={onSelect}\n        testID={testID}\n        value={value}\n      />\n      <Button fullWidth interactionPolicy={interactionPolicy} onPress={onDismiss} variant=\"ghost\">\n        Cancel\n      </Button>\n    </Stack>\n  );\n}\n\n/*** Render the shared title block used by the calendar sheet. */\nfunction PickerSheetHeader({\n  description,\n  title,\n}: {\n  description: React.ReactNode | undefined;\n  title: React.ReactNode;\n}) {\n  return (\n    <Stack gap=\"xxs\">\n      <Text align=\"center\" variant=\"label\" weight=\"semiBold\">\n        {title}\n      </Text>\n      {description ? (\n        <Text align=\"center\" emphasis=\"muted\" variant=\"bodySmall\">\n          {description}\n        </Text>\n      ) : null}\n    </Stack>\n  );\n}\n\n/*** Render previous/next month controls for the calendar sheet. */\nfunction DatePickerMonthNavigation({\n  displayMonth,\n  interactionPolicy,\n  maxDate,\n  minDate,\n  onMonthChange,\n}: Pick<DatePickerSheetProps, 'interactionPolicy' | 'maxDate' | 'minDate'> & {\n  displayMonth: Date;\n  onMonthChange: (month: Date) => void;\n}) {\n  const previousMonth = new Date(displayMonth.getFullYear(), displayMonth.getMonth() - 1, 1);\n  const nextMonth = new Date(displayMonth.getFullYear(), displayMonth.getMonth() + 1, 1);\n\n  return (\n    <Stack align=\"center\" direction=\"row\" justify=\"space-between\">\n      <Button\n        disabled={!canNavigateToMonth(previousMonth, minDate, maxDate)}\n        interactionPolicy={interactionPolicy}\n        onPress={() => onMonthChange(previousMonth)}\n        size=\"s\"\n        variant=\"ghost\"\n      >\n        Previous\n      </Button>\n      <Text align=\"center\" variant=\"label\" weight=\"semiBold\">\n        {formatMonthLabel(displayMonth)}\n      </Text>\n      <Button\n        disabled={!canNavigateToMonth(nextMonth, minDate, maxDate)}\n        interactionPolicy={interactionPolicy}\n        onPress={() => onMonthChange(nextMonth)}\n        size=\"s\"\n        variant=\"ghost\"\n      >\n        Next\n      </Button>\n    </Stack>\n  );\n}\n\n/*** Render weekday headings for the calendar grid. */\nfunction DatePickerWeekdays() {\n  return (\n    <Stack direction=\"row\" justify=\"space-between\">\n      {WEEKDAY_LABELS.map((weekday) => (\n        <Box key={weekday} width={DAY_CELL_WIDTH}>\n          <Text align=\"center\" emphasis=\"muted\" variant=\"caption\" weight=\"semiBold\">\n            {weekday}\n          </Text>\n        </Box>\n      ))}\n    </Stack>\n  );\n}\n\n/*** Render selectable day cells for the current calendar month. */\nfunction DatePickerCalendar({\n  interactionPolicy,\n  maxDate,\n  minDate,\n  monthDays,\n  onSelect,\n  testID,\n  value,\n}: Pick<DatePickerSheetProps, 'interactionPolicy' | 'maxDate' | 'minDate' | 'testID' | 'value'> & {\n  monthDays: readonly (Date | null)[];\n  onSelect: (value: Date) => void;\n}) {\n  return (\n    <Stack direction=\"row\" gap=\"xs\" wrap=\"wrap\">\n      {monthDays.map((day, index) => {\n        if (!day) return <Box key={`empty-${index}`} width={DAY_CELL_WIDTH} />;\n        const selected = isSameLocalDay(value, day);\n        return (\n          <Box key={day.toISOString()} width={DAY_CELL_WIDTH}>\n            <Button\n              color={selected ? 'primary' : 'neutral'}\n              disabled={isDateDisabled(day, minDate, maxDate)}\n              interactionPolicy={interactionPolicy}\n              onPress={() => onSelect(day)}\n              size=\"s\"\n              testID={testID ? `${testID}-day-${day.getDate()}` : undefined}\n              variant={selected ? 'solid' : 'ghost'}\n            >\n              {day.getDate()}\n            </Button>\n          </Box>\n        );\n      })}\n    </Stack>\n  );\n}\n\n/***\n * Date input control with calendar selection and formatted display value.\n */\nexport const DatePicker = withZoraThemeScope(DatePickerInner);\n"]}