@ankhorage/zora 2.5.1 → 2.5.3

package/src/components/textarea/Textarea.tsx

@@ -46,4 +46,9 @@ function TextareaInner({
   );
 }
 
+/***
+ * Multi-line text input with consistent ZORA field styling.
+ *
+ * @readme
+ */
 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.
+ *
+ * @readme
+ */
 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.
+ *
+ * @readme
+ */
 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`.
+ *
+ * @readme
+ */
 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.
+ *
+ * @readme
+ */
 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.
+ *
+ * @readme
+ */
 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.
+ *
+ * @readme
+ */
 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.
+ *
+ * @readme
+ */
 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.
+ *
+ * @readme
+ */
 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.
+ *
+ * @readme
+ */
 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.
+ *
+ * @readme
+ */
 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.
+ *
+ * @readme
+ */
 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.
+ *
+ * @readme
+ */
 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.
+ *
+ * @readme
+ */
 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.
+ *
+ * @readme
+ */
 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.
+ *
+ * @readme
+ */
 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

@@ -33,6 +33,18 @@ function AppShellInner({
   );
 }
 
+/***
+ * Root application shell with stable header, content, footer, and overlay slots.
+ *
+ * `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>
+ * ```
+ */
 export const AppShell = withZoraThemeScope(AppShellInner);
 
 const styles = StyleSheet.create({

package/src/layout/screen/Screen.tsx

@@ -39,4 +39,9 @@ function ScreenInner({
   );
 }
 
+/***
+ * Page-level container with standard background and optional scroll behavior.
+ *
+ * @readme
+ */
 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.
+ *
+ * @readme
+ */
 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.
+ *
+ * @readme
+ */
 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).
+ *
+ * @readme
+ */
 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.
+ *
+ * @readme
+ */
 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.
+ *
+ * @readme
+ */
 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.
+ *
+ * @readme
+ */
 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.
+ *
+ * @readme
+ */
 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.
+ *
+ * @readme
+ */
 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.
+ *
+ * @readme
+ */
 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.
+ *
+ * @readme
+ */
 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.
+ *
+ * @readme
+ */
 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.
+ *
+ * @readme
+ */
 export const DisclosureSection = withZoraThemeScope(DisclosureSectionInner);

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

@@ -55,4 +55,16 @@ function EmptyStateInner({
   );
 }
 
+/***
+ * Reusable fallback state for empty lists, missing data, or first-run experiences.
+ *
+ * `EmptyState` combines concise copy with optional primary and secondary actions
+ * so apps can guide users without custom card and button wiring.
+ *
+ * @readme
+ * @example Empty project list
+ * ```tsx
+ * <EmptyState title="No projects yet" primaryAction={{ label: 'Create project', onPress }} />
+ * ```
+ */
 export const EmptyState = withZoraThemeScope(EmptyStateInner);

package/src/patterns/filter-bar/FilterBar.tsx

@@ -22,4 +22,9 @@ function FilterBarInner({
   );
 }
 
+/***
+ * Horizontal filter/action bar layout with leading/trailing slots.
+ *
+ * @readme
+ */
 export const FilterBar = withZoraThemeScope(FilterBarInner);

package/src/patterns/hero/Hero.tsx

@@ -113,4 +113,9 @@ function resolveContentAlign(align: HeroAlign) {
   return align === 'center' ? 'center' : 'flex-start';
 }
 
+/***
+ * Hero section pattern for prominent page introductions with actions.
+ *
+ * @readme
+ */
 export const Hero = withZoraThemeScope(HeroInner);

package/src/patterns/image-preview/ImagePreview.tsx

@@ -73,4 +73,9 @@ function ImagePreviewInner({
   );
 }
 
+/***
+ * Preview pattern for showing an image with optional metadata and actions.
+ *
+ * @readme
+ */
 export const ImagePreview = withZoraThemeScope(ImagePreviewInner);

package/src/patterns/image-upload-field/ImageUploadField.tsx

@@ -290,4 +290,9 @@ function ImageUploadFieldInner({
   );
 }
 
+/***
+ * Form field pattern for picking, previewing, and uploading an image.
+ *
+ * @readme
+ */
 export const ImageUploadField = withZoraThemeScope(ImageUploadFieldInner);

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

@@ -23,4 +23,9 @@ function InspectorFieldInner({
   );
 }
 
+/***
+ * Inspector row pattern with label, description, and control slot.
+ *
+ * @readme
+ */
 export const InspectorField = withZoraThemeScope(InspectorFieldInner);

package/src/patterns/list/List.tsx

@@ -69,4 +69,9 @@ function ListInner(props: ListProps) {
   );
 }
 
+/***
+ * List container pattern for composing `ListRow` and `ListSection`.
+ *
+ * @readme
+ */
 export const List = withZoraThemeScope(ListInner);

package/src/patterns/list/ListRow.tsx

@@ -190,4 +190,9 @@ function ListRowInner({
   );
 }
 
+/***
+ * Row pattern for lists with leading/trailing slots and optional press behavior.
+ *
+ * @readme
+ */
 export const ListRow = withZoraThemeScope(ListRowInner);

package/src/patterns/list/ListSection.tsx

@@ -33,4 +33,9 @@ function ListSectionInner({
   );
 }
 
+/***
+ * Section wrapper for lists with optional title and description.
+ *
+ * @readme
+ */
 export const ListSection = withZoraThemeScope(ListSectionInner);

package/src/patterns/message-bubble/MessageBubble.tsx

@@ -262,4 +262,9 @@ function MessageBubbleInner({
   );
 }
 
+/***
+ * Message bubble pattern for chat UIs with direction and status styling.
+ *
+ * @readme
+ */
 export const MessageBubble = withZoraThemeScope(MessageBubbleInner);

package/src/patterns/notice/Notice.tsx

@@ -32,4 +32,9 @@ function NoticeInner({
   );
 }
 
+/***
+ * Notice pattern for inline feedback with tone, title, and actions.
+ *
+ * @readme
+ */
 export const Notice = withZoraThemeScope(NoticeInner);

package/src/patterns/panel/Panel.tsx

@@ -8,4 +8,9 @@ function PanelInner({ themeId: _themeId, mode: _mode, ...props }: PanelProps) {
   return <Card {...props} />;
 }
 
+/***
+ * Semantic wrapper around `Card` for panel-style page sections.
+ *
+ * @readme
+ */
 export const Panel = withZoraThemeScope(PanelInner);

package/src/patterns/post-card/PostCard.tsx

@@ -231,4 +231,9 @@ function PostCardInner({
   );
 }
 
+/***
+ * Social-style post card pattern with author, content, media, and actions.
+ *
+ * @readme
+ */
 export const PostCard = withZoraThemeScope(PostCardInner);

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

@@ -144,4 +144,16 @@ const styles = StyleSheet.create({
   },
 });
 
+/***
+ * Adaptive secondary surface that can render as an inline panel, drawer, or modal.
+ *
+ * Use `ResponsivePanel` for tool panes and admin/detail flows that need the same
+ * content to work across compact mobile screens and wider desktop layouts.
+ *
+ * @readme
+ * @example Scrollable wide panel
+ * ```tsx
+ * <ResponsivePanel open title="APIs" size="wide" scroll="content">...</ResponsivePanel>
+ * ```
+ */
 export const ResponsivePanel = withZoraThemeScope(ResponsivePanelInner);

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

@@ -43,4 +43,9 @@ function SectionHeaderInner({
   );
 }
 
+/***
+ * Section heading pattern with optional description and action slot.
+ *
+ * @readme
+ */
 export const SectionHeader = withZoraThemeScope(SectionHeaderInner);

package/src/patterns/selection/SelectableItem.tsx

@@ -15,6 +15,11 @@ function isRenderProp(
   return typeof children === 'function';
 }
 
+/***
+ * Adds selection behavior to arbitrary child content via render props.
+ *
+ * @readme
+ */
 export function SelectableItem({ id, trigger, disabled = false, children }: SelectableItemProps) {
   const selection = useSelection();
   const resolvedTrigger = resolveTrigger(trigger);

package/src/patterns/selection/SelectionProvider.tsx

@@ -18,6 +18,11 @@ function resolveDisabled(disabled: boolean | undefined): boolean {
   return disabled ?? false;
 }
 
+/***
+ * Accesses selection state provided by `SelectionProvider`.
+ *
+ * @readme
+ */
 export function useSelection(): UseSelectionResult {
   const value = React.useContext(SelectionContext);
   if (!value) {
@@ -27,6 +32,11 @@ export function useSelection(): UseSelectionResult {
   return value;
 }
 
+/***
+ * Provides selection state for building selectable lists and grids.
+ *
+ * @readme
+ */
 export function SelectionProvider({
   children,
   selectedIds,

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

@@ -43,4 +43,9 @@ function SettingsRowInner({
   );
 }
 
+/***
+ * Settings row pattern with title, description/meta, and optional trailing content.
+ *
+ * @readme
+ */
 export const SettingsRow = withZoraThemeScope(SettingsRowInner);

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

@@ -26,4 +26,9 @@ function SwitchFieldInner({
   );
 }
 
+/***
+ * Labeled switch field pattern built on `SettingsRow`.
+ *
+ * @readme
+ */
 export const SwitchField = withZoraThemeScope(SwitchFieldInner);

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

@@ -307,4 +307,9 @@ function ThemeComposerInner({
   );
 }
 
+/***
+ * UI for composing and applying a theme via structured controls.
+ *
+ * @readme
+ */
 export const ThemeComposer = withZoraThemeScope(ThemeComposerInner);

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

@@ -54,4 +54,9 @@ function PaletteItemInner({
   );
 }
 
+/***
+ * Tile item pattern for palettes and option grids.
+ *
+ * @readme
+ */
 export const PaletteItem = withZoraThemeScope(PaletteItemInner);

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

@@ -46,4 +46,9 @@ function TileGridInner({
   );
 }
 
+/***
+ * Responsive grid layout for arranging tile content.
+ *
+ * @readme
+ */
 export const TileGrid = withZoraThemeScope(TileGridInner);

package/src/patterns/timeline/Timeline.tsx

@@ -112,4 +112,9 @@ function TimelineInner({
   );
 }
 
+/***
+ * Timeline pattern for displaying a sequence of events.
+ *
+ * @readme
+ */
 export const Timeline = withZoraThemeScope(TimelineInner);

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

@@ -90,4 +90,9 @@ function TreeItemInner<TId extends string = string>({
   );
 }
 
+/***
+ * Single tree node row used within `TreeView`.
+ *
+ * @readme
+ */
 export const TreeItem = withZoraThemeScope(TreeItemInner);

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

@@ -52,4 +52,9 @@ function TreeViewInner<TId extends string = string>({
   );
 }
 
+/***
+ * Tree view pattern for hierarchical navigation and expandable lists.
+ *
+ * @readme
+ */
 export const TreeView = withZoraThemeScope(TreeViewInner);