@ankhorage/zora 2.5.2 → 2.5.4

package/src/components/form/FormActions.tsx

@@ -25,4 +25,7 @@ function FormActionsInner({
   );
 }
 
+/***
+ * Standard submit/action area for forms.
+ */
 export const FormActions = withZoraThemeScope(FormActionsInner);

package/src/components/form/FormError.tsx

@@ -22,4 +22,7 @@ function FormErrorInner({ themeId: _themeId, mode: _mode, error, testID }: FormE
   );
 }
 
+/***
+ * Displays a form-level validation or submission error message.
+ */
 export const FormError = withZoraThemeScope(FormErrorInner);

package/src/components/form/FormField.tsx

@@ -148,4 +148,7 @@ function FormFieldInner<TName extends string = string>(props: FormFieldProps<TNa
   );
 }
 
+/***
+ * Connects a controlled form value to a labeled input field with error handling.
+ */
 export const FormField = withZoraThemeScope(FormFieldInner);

package/src/components/form/index.ts

@@ -10,7 +10,6 @@ export type {
   FormFieldControlProps,
   FormFieldInputType,
   FormFieldProps,
-  FormFieldValue,
   FormProps,
   FormValidationErrors,
   FormValidationResult,

package/src/components/form/useFormController.ts

@@ -2,6 +2,7 @@ import React from 'react';
 
 import type {
   FormErrors,
+  FormFieldValue,
   FormValues,
   UseFormControllerOptions,
   UseFormControllerResult,
@@ -12,7 +13,7 @@ function createInitialValues<TName extends string>(
   fields: readonly { name: TName }[],
   initialValues: Partial<FormValues<TName>> | undefined,
 ): FormValues<TName> {
-  const values = fields.reduce<Record<string, string>>((nextValues, field) => {
+  const values = fields.reduce<Record<string, FormFieldValue>>((nextValues, field) => {
     nextValues[field.name] = initialValues?.[field.name] ?? '';
     return nextValues;
   }, {});
@@ -62,7 +63,7 @@ export function useFormController<TName extends string = string>({
   }, [fields, values]);
 
   const setFieldValue = React.useCallback(
-    (name: TName, value: string) => {
+    (name: TName, value: FormFieldValue) => {
       const nextValues = {
         ...values,
         [name]: value,

package/src/components/heading/Heading.tsx

@@ -97,7 +97,6 @@ function HeadingInner({
  * `Heading` gives consumers a ZORA-owned title API with semantic levels,
  * responsive sizes, and theme-aware emphasis while preserving header semantics.
  *
- * @readme
  * @example Section title
  * ```tsx
  * <Heading level={2} size="xl">Account settings</Heading>

package/src/components/icon/Icon.tsx

@@ -10,4 +10,7 @@ function IconInner({ themeId: _themeId, mode: _mode, ...props }: IconProps) {
   return <SurfaceIcon {...props} />;
 }
 
+/***
+ * Renders an icon from a configured icon provider with theme-aware defaults.
+ */
 export const Icon = withZoraThemeScope(IconInner);

package/src/components/icon-button/IconButton.tsx

@@ -29,4 +29,7 @@ function IconButtonInner({
   );
 }
 
+/***
+ * Icon-only button for compact actions; requires an accessible `label`.
+ */
 export const IconButton = withZoraThemeScope(IconButtonInner);

package/src/components/image/Image.tsx

@@ -8,4 +8,9 @@ function ImageInner({ themeId: _themeId, mode: _mode, ...props }: ImageProps) {
   return <SurfaceImage {...props} />;
 }
 
+/***
+ * Displays an image with cross-platform source and fit handling.
+ *
+ 
+ */
 export const Image = withZoraThemeScope(ImageInner);

package/src/components/input/Input.tsx

@@ -68,7 +68,6 @@ function InputInner({
  * Use `Input` for single-line form controls that need ZORA styling, disabled/read-only
  * handling, and accessible trailing actions without dropping into Surface directly.
  *
- * @readme
  * @example Search input
  * ```tsx
  * <Input placeholder="Search" leadingIcon={{ name: 'search-outline' }} />

package/src/components/media-card/MediaCard.tsx

@@ -117,4 +117,7 @@ function MediaCardInner({
   );
 }
 
+/***
+ * Card layout with an optional media/header region and structured content slots.
+ */
 export const MediaCard = withZoraThemeScope(MediaCardInner);

package/src/components/menu/DropdownMenu.tsx

@@ -3,6 +3,9 @@ import React from 'react';
 import { Menu } from './Menu';
 import type { DropdownMenuProps } from './types';
 
+/***
+ * Convenience wrapper for rendering a `Menu` as a dropdown.
+ */
 export function DropdownMenu(props: DropdownMenuProps) {
   return <Menu {...props} />;
 }

package/src/components/menu/Menu.tsx

@@ -60,4 +60,7 @@ function MenuInner({ themeId: _themeId, mode: _mode, actions, onDismiss, ...prop
   return <SurfaceMenu {...props} actions={surfaceActions} dismiss={onDismiss} />;
 }
 
+/***
+ * Presents a list of actions as a menu with optional icons and intent styling.
+ */
 export const Menu = withZoraThemeScope(MenuInner);

package/src/components/metric-card/MetricCard.tsx

@@ -81,4 +81,7 @@ function MetricCardInner({
   );
 }
 
+/***
+ * Highlights a key metric with label, value, and optional trend/actions.
+ */
 export const MetricCard = withZoraThemeScope(MetricCardInner);

package/src/components/modal/Modal.tsx

@@ -56,4 +56,7 @@ function ModalInner({
   );
 }
 
+/***
+ * Modal dialog surface with header/content/footer slots.
+ */
 export const Modal = withZoraThemeScope(ModalInner);

package/src/components/navigation-item/NavigationItem.tsx

@@ -33,4 +33,7 @@ function NavigationItemInner({
   );
 }
 
+/***
+ * Renders a single navigation entry with active/disabled state support.
+ */
 export const NavigationItem = withZoraThemeScope(NavigationItemInner);

package/src/components/navigation-list/NavigationList.tsx

@@ -59,4 +59,7 @@ function NavigationListInner({
   );
 }
 
+/***
+ * Renders a navigation list from route metadata with active state mapping.
+ */
 export const NavigationList = withZoraThemeScope(NavigationListInner);

package/src/components/pagination/Pagination.tsx

@@ -186,4 +186,7 @@ function PaginationInner({
   );
 }
 
+/***
+ * Pagination control for navigating between pages of results.
+ */
 export const Pagination = withZoraThemeScope(PaginationInner);

package/src/components/progress/Progress.tsx

@@ -47,4 +47,7 @@ function ProgressInner({
   );
 }
 
+/***
+ * Progress indicator for determinate and indeterminate loading states.
+ */
 export const Progress = withZoraThemeScope(ProgressInner);

package/src/components/radio/Radio.tsx

@@ -8,4 +8,7 @@ function RadioInner({ themeId: _themeId, mode: _mode, ...props }: RadioProps) {
   return <SurfaceRadio {...props} />;
 }
 
+/***
+ * Single-choice selection control used within a radio group.
+ */
 export const Radio = withZoraThemeScope(RadioInner);

package/src/components/radio/RadioGroup.tsx

@@ -56,6 +56,9 @@ function RadioGroupInner<TValue extends string>({
   );
 }
 
+/***
+ * Renders a group of radio options for selecting a single value.
+ */
 export const RadioGroup = withZoraThemeScope(RadioGroupInner);
 
 function RadioGroupItem<TValue extends string>({

package/src/components/rating/Rating.tsx

@@ -35,4 +35,7 @@ function RatingInner({
   );
 }
 
+/***
+ * Displays a star-based rating value with optional half steps.
+ */
 export const Rating = withZoraThemeScope(RatingInner);

package/src/components/search-bar/SearchBar.tsx

@@ -47,4 +47,7 @@ function SearchBarInner({
   );
 }
 
+/***
+ * Search input with leading icon and optional trailing action.
+ */
 export const SearchBar = withZoraThemeScope(SearchBarInner);

package/src/components/select/Select.tsx

@@ -52,4 +52,7 @@ function SelectInner<TValue extends string = string>({
   );
 }
 
+/***
+ * Select control for choosing a value from a list of options.
+ */
 export const Select = withZoraThemeScope(SelectInner);

package/src/components/skeleton/Skeleton.tsx

@@ -29,4 +29,7 @@ function SkeletonInner({
   );
 }
 
+/***
+ * Generic skeleton placeholder for loading states.
+ */
 export const Skeleton = withZoraThemeScope(SkeletonInner);

package/src/components/skeleton/SkeletonCard.tsx

@@ -36,4 +36,7 @@ function SkeletonCardInner({
   );
 }
 
+/***
+ * Skeleton placeholder that matches the structure of a `Card`.
+ */
 export const SkeletonCard = withZoraThemeScope(SkeletonCardInner);

package/src/components/skeleton/SkeletonList.tsx

@@ -49,4 +49,9 @@ function SkeletonListInner({
   return <List compact={compact} items={items} rowVariant={variant} testID={testID} />;
 }
 
+/***
+ * Skeleton placeholder list for loading states in list views.
+ *
+ 
+ */
 export const SkeletonList = withZoraThemeScope(SkeletonListInner);

package/src/components/skeleton/SkeletonText.tsx

@@ -42,4 +42,9 @@ function SkeletonTextInner({
   );
 }
 
+/***
+ * Multi-line skeleton placeholder for text content.
+ *
+ 
+ */
 export const SkeletonText = withZoraThemeScope(SkeletonTextInner);

package/src/components/tabs/Tabs.tsx

@@ -107,4 +107,9 @@ function TabsInner<TValue extends string = string>({
   );
 }
 
+/***
+ * Tab navigation for switching between views or content sections.
+ *
+ 
+ */
 export const Tabs = withZoraThemeScope(TabsInner);

package/src/components/text/Text.tsx

@@ -94,7 +94,7 @@ function TextInner({
  * `Text` owns normal body, caption, label, code, and supporting-copy variants so
  * consumers do not need to import lower-level Surface typography directly.
  *
- * @readme
+ 
  * @example Muted supporting copy
  * ```tsx
  * <Text variant="bodySmall" emphasis="muted">Updated just now</Text>

package/src/components/textarea/Textarea.tsx

@@ -46,4 +46,9 @@ function TextareaInner({
   );
 }
 
+/***
+ * Multi-line text input with consistent ZORA field styling.
+ *
+ 
+ */
 export const Textarea = withZoraThemeScope(TextareaInner);

package/src/components/time-picker/TimePicker.tsx

@@ -149,4 +149,9 @@ function TimePickerInner({
   );
 }
 
+/***
+ * Time input control with wheel selection and formatted display value.
+ *
+ 
+ */
 export const TimePicker = withZoraThemeScope(TimePickerInner);

package/src/components/toast/Toast.tsx

@@ -8,4 +8,9 @@ function ToastInner({ mode: _mode, themeId: _themeId, ...props }: ToastProps) {
   return <SurfaceToast {...props} />;
 }
 
+/***
+ * Renders a toast notification message.
+ *
+ 
+ */
 export const Toast = withZoraThemeScope(ToastInner);

package/src/components/toast/ToastProvider.tsx

@@ -3,6 +3,11 @@ import React from 'react';
 
 import type { ToastProviderProps } from './types';
 
+/***
+ * Provides toast state and rendering context for `useToast` and `Toast`.
+ *
+ 
+ */
 export function ToastProvider({ children, defaultDuration }: ToastProviderProps) {
   if (defaultDuration === undefined) {
     return <SurfaceToastProvider>{children}</SurfaceToastProvider>;

package/src/components/toolbar/Toolbar.tsx

@@ -39,4 +39,9 @@ function ToolbarInner({
   );
 }
 
+/***
+ * Horizontal toolbar surface for grouping actions and controls.
+ *
+ 
+ */
 export const Toolbar = withZoraThemeScope(ToolbarInner);

package/src/components/toolbar/ToolbarAction.tsx

@@ -20,4 +20,9 @@ function ToolbarActionInner({
   );
 }
 
+/***
+ * Convenience icon action for toolbars with active state styling.
+ *
+ 
+ */
 export const ToolbarAction = withZoraThemeScope(ToolbarActionInner);

package/src/foundation/Box.tsx

@@ -10,4 +10,9 @@ function BoxInner({ themeId: _themeId, mode: _mode, ...props }: BoxProps) {
   return <SurfaceBox {...props} />;
 }
 
+/***
+ * Base layout primitive for themed spacing, color, border, flex, and responsive props.
+ *
+ 
+ */
 export const Box = withZoraThemeScope(BoxInner);

package/src/foundation/Center.tsx

@@ -13,4 +13,9 @@ function CenterInner({ themeId: _themeId, mode: _mode, ...props }: CenterProps)
   return <SurfaceCenter {...props} />;
 }
 
+/***
+ * Centers children horizontally and vertically within the available space.
+ *
+ 
+ */
 export const Center = withZoraThemeScope(CenterInner);

package/src/foundation/Container.tsx

@@ -14,4 +14,9 @@ function ContainerInner({ themeId: _themeId, mode: _mode, ...props }: ContainerP
   return <SurfaceContainer {...props} />;
 }
 
+/***
+ * Constrains page content to semantic widths with responsive padding.
+ *
+ 
+ */
 export const Container = withZoraThemeScope(ContainerInner);

package/src/foundation/Divider.tsx

@@ -14,4 +14,9 @@ function DividerInner({ themeId: _themeId, mode: _mode, ...props }: DividerProps
   return <SurfaceDivider {...props} />;
 }
 
+/***
+ * Renders a themed visual separator between content sections.
+ *
+ 
+ */
 export const Divider = withZoraThemeScope(DividerInner);

package/src/foundation/Grid.tsx

@@ -10,4 +10,9 @@ function GridInner({ themeId: _themeId, mode: _mode, ...props }: GridProps) {
   return <SurfaceGrid {...props} />;
 }
 
+/***
+ * Creates responsive grid layouts for cards, tiles, and dashboard content.
+ *
+ 
+ */
 export const Grid = withZoraThemeScope(GridInner);

package/src/foundation/Inline.tsx

@@ -13,4 +13,9 @@ function InlineInner({ themeId: _themeId, mode: _mode, ...props }: InlineProps)
   return <SurfaceInline {...props} />;
 }
 
+/***
+ * Arranges children inline with spacing and wrapping behavior.
+ *
+ 
+ */
 export const Inline = withZoraThemeScope(InlineInner);

package/src/foundation/Show.tsx

@@ -10,4 +10,9 @@ function ShowInner({ themeId: _themeId, mode: _mode, ...props }: ShowProps) {
   return <SurfaceShow {...props} />;
 }
 
+/***
+ * Conditionally renders children for responsive display and breakpoint-based visibility.
+ *
+ 
+ */
 export const Show = withZoraThemeScope(ShowInner);

package/src/foundation/Spacer.tsx

@@ -13,4 +13,9 @@ function SpacerInner({ themeId: _themeId, mode: _mode, ...props }: SpacerProps)
   return <SurfaceSpacer {...props} />;
 }
 
+/***
+ * Adds flexible or fixed empty space in layout compositions.
+ *
+ 
+ */
 export const Spacer = withZoraThemeScope(SpacerInner);

package/src/foundation/Stack.tsx

@@ -10,4 +10,9 @@ function StackInner({ themeId: _themeId, mode: _mode, ...props }: StackProps) {
   return <SurfaceStack {...props} />;
 }
 
+/***
+ * Arranges layout items in one direction with theme spacing.
+ *
+ 
+ */
 export const Stack = withZoraThemeScope(StackInner);

package/src/foundation/Surface.tsx

@@ -17,4 +17,9 @@ function SurfaceInner({ themeId: _themeId, mode: _mode, ...props }: SurfaceProps
   return <SurfaceSurface {...props} />;
 }
 
+/***
+ * Provides a semantic themed region for elevated, subtle, or bordered content.
+ *
+ 
+ */
 export const Surface = withZoraThemeScope(SurfaceInner);

package/src/index.ts

@@ -49,7 +49,6 @@ export type {
   FormFieldControlProps,
   FormFieldInputType,
   FormFieldProps,
-  FormFieldValue,
   FormProps,
   FormValidationErrors,
   FormValidationResult,

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

@@ -39,7 +39,7 @@ function AppShellInner({
  * `AppShell` provides the top-level layout frame for cross-platform apps while
  * leaving navigation, toolbars, and overlays composable through explicit slots.
  *
- * @readme
+ 
  * @example App frame
  * ```tsx
  * <AppShell header={<AppBar title="Dashboard" />}>...</AppShell>

package/src/layout/screen/Screen.tsx

@@ -39,4 +39,9 @@ function ScreenInner({
   );
 }
 
+/***
+ * Page-level container with standard background and optional scroll behavior.
+ *
+ 
+ */
 export const Screen = withZoraThemeScope(ScreenInner);

package/src/layout/screen-section/ScreenSection.tsx

@@ -22,4 +22,9 @@ function ScreenSectionInner({
   );
 }
 
+/***
+ * Screen section layout with optional title, description, and actions.
+ *
+ 
+ */
 export const ScreenSection = withZoraThemeScope(ScreenSectionInner);

package/src/layout/settings-layout/SettingsLayout.tsx

@@ -26,4 +26,9 @@ function SettingsLayoutInner({
   );
 }
 
+/***
+ * Settings page layout with app bar, sidebar, and scrollable content area.
+ *
+ 
+ */
 export const SettingsLayout = withZoraThemeScope(SettingsLayoutInner);

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

@@ -25,4 +25,9 @@ function SidebarLayoutInner({
   );
 }
 
+/***
+ * Responsive layout with a sidebar and main content area (and optional aside).
+ *
+ 
+ */
 export const SidebarLayout = withZoraThemeScope(SidebarLayoutInner);

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

@@ -21,4 +21,9 @@ function TopbarLayoutInner({
   );
 }
 
+/***
+ * Layout that composes a top bar with optional sidebar and content.
+ *
+ 
+ */
 export const TopbarLayout = withZoraThemeScope(TopbarLayoutInner);

package/src/patterns/auth/ForgotPasswordForm.tsx

@@ -86,4 +86,9 @@ function ForgotPasswordFormInner({
   );
 }
 
+/***
+ * Password reset form pattern with validation and submit actions.
+ *
+ 
+ */
 export const ForgotPasswordForm = withZoraThemeScope(ForgotPasswordFormInner);

package/src/patterns/auth/OtpForm.tsx

@@ -82,4 +82,9 @@ function OtpFormInner({
   );
 }
 
+/***
+ * One-time passcode form pattern with digit input and submit actions.
+ *
+ 
+ */
 export const OtpForm = withZoraThemeScope(OtpFormInner);

package/src/patterns/auth/SignInForm.tsx

@@ -113,4 +113,9 @@ function SignInFormInner({
   );
 }
 
+/***
+ * Sign-in form pattern with identifier and password fields.
+ *
+ 
+ */
 export const SignInForm = withZoraThemeScope(SignInFormInner);

package/src/patterns/auth/SignUpForm.tsx

@@ -78,4 +78,9 @@ function SignUpFormInner({
   );
 }
 
+/***
+ * Sign-up form pattern with structured fields and validation.
+ *
+ 
+ */
 export const SignUpForm = withZoraThemeScope(SignUpFormInner);

package/src/patterns/chat-list-item/ChatListItem.tsx

@@ -217,4 +217,9 @@ function ChatListItemInner({
   );
 }
 
+/***
+ * Chat-style list row with avatar, title, preview text, and unread indicators.
+ *
+ 
+ */
 export const ChatListItem = withZoraThemeScope(ChatListItemInner);

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

@@ -103,4 +103,9 @@ function CollectionEditorInner<TItem>({
   );
 }
 
+/***
+ * Editor pattern for adding, removing, and reordering a collection of items.
+ *
+ 
+ */
 export const CollectionEditor = withZoraThemeScope(CollectionEditorInner);

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

@@ -48,4 +48,9 @@ function ConfirmDialogInner({
   );
 }
 
+/***
+ * Confirmation dialog pattern with cancel/confirm actions.
+ *
+ 
+ */
 export const ConfirmDialog = withZoraThemeScope(ConfirmDialogInner);

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

@@ -63,4 +63,9 @@ function DisclosureSectionInner({
   );
 }
 
+/***
+ * Expandable section pattern with a summary header and collapsible content.
+ *
+ 
+ */
 export const DisclosureSection = withZoraThemeScope(DisclosureSectionInner);