@ankhorage/zora 2.5.1 → 2.5.3

package/dist/theme/ZoraProvider.d.ts

@@ -5,5 +5,17 @@ export interface ZoraProviderProps {
     theme?: ZoraTheme;
     initialMode?: ZoraThemeMode;
 }
+/***
+ * Installs the ZORA theme runtime and underlying Surface theme provider.
+ *
+ * Wrap an app with `ZoraProvider` once near the root so components, patterns,
+ * layouts, and theme hooks resolve the same design tokens and color mode.
+ *
+ * @readme
+ * @example App provider
+ * ```tsx
+ * <ZoraProvider initialMode="light"><App /></ZoraProvider>
+ * ```
+ */
 export declare function ZoraProvider({ children, theme, initialMode, }: ZoraProviderProps): React.JSX.Element;
 //# sourceMappingURL=ZoraProvider.d.ts.map

package/dist/theme/ZoraProvider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ZoraProvider.d.ts","sourceRoot":"","sources":["../../src/theme/ZoraProvider.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,KAAK,EAAE,SAAS,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAIxD,MAAM,WAAW,iBAAiB;IAChC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,WAAW,CAAC,EAAE,aAAa,CAAC;CAC7B;AAED,wBAAgB,YAAY,CAAC,EAC3B,QAAQ,EACR,KAAwB,EACxB,WAAqB,GACtB,EAAE,iBAAiB,qBAUnB"}
+{"version":3,"file":"ZoraProvider.d.ts","sourceRoot":"","sources":["../../src/theme/ZoraProvider.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,KAAK,EAAE,SAAS,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAIxD,MAAM,WAAW,iBAAiB;IAChC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,WAAW,CAAC,EAAE,aAAa,CAAC;CAC7B;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,YAAY,CAAC,EAC3B,QAAQ,EACR,KAAwB,EACxB,WAAqB,GACtB,EAAE,iBAAiB,qBAUnB"}

package/dist/theme/ZoraProvider.js

@@ -3,6 +3,18 @@ import React from 'react';
 import { createZoraThemeConfig } from './createZoraThemeConfig';
 import { zoraDefaultTheme } from './zoraDefaultTheme';
 import { ZoraThemeRuntimeContext } from './ZoraThemeRuntimeContext';
+/***
+ * Installs the ZORA theme runtime and underlying Surface theme provider.
+ *
+ * Wrap an app with `ZoraProvider` once near the root so components, patterns,
+ * layouts, and theme hooks resolve the same design tokens and color mode.
+ *
+ * @readme
+ * @example App provider
+ * ```tsx
+ * <ZoraProvider initialMode="light"><App /></ZoraProvider>
+ * ```
+ */
 export function ZoraProvider({ children, theme = zoraDefaultTheme, initialMode = 'light', }) {
     const runtimeValue = React.useMemo(() => ({ sourceTheme: theme, themeId: theme.id }), [theme]);
     return (<ZoraThemeRuntimeContext.Provider value={runtimeValue}>

package/dist/theme/ZoraProvider.js.map

@@ -1 +1 @@
-{"version":3,"file":"ZoraProvider.js","sourceRoot":"","sources":["../../src/theme/ZoraProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AACnD,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAEhE,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,OAAO,EAAE,uBAAuB,EAAE,MAAM,2BAA2B,CAAC;AAQpE,MAAM,UAAU,YAAY,CAAC,EAC3B,QAAQ,EACR,KAAK,GAAG,gBAAgB,EACxB,WAAW,GAAG,OAAO,GACH;IAClB,MAAM,YAAY,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE,CAAC,CAAC,EAAE,WAAW,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,CAAC,EAAE,EAAE,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAE/F,OAAO,CACL,CAAC,uBAAuB,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,YAAY,CAAC,CACpD;MAAA,CAAC,aAAa,CAAC,aAAa,CAAC,CAAC,qBAAqB,CAAC,KAAK,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,WAAW,CAAC,CACnF;QAAA,CAAC,QAAQ,CACX;MAAA,EAAE,aAAa,CACjB;IAAA,EAAE,uBAAuB,CAAC,QAAQ,CAAC,CACpC,CAAC;AACJ,CAAC","sourcesContent":["import { ThemeProvider } from '@ankhorage/surface';\nimport React from 'react';\n\nimport { createZoraThemeConfig } from './createZoraThemeConfig';\nimport type { ZoraTheme, ZoraThemeMode } from './types';\nimport { zoraDefaultTheme } from './zoraDefaultTheme';\nimport { ZoraThemeRuntimeContext } from './ZoraThemeRuntimeContext';\n\nexport interface ZoraProviderProps {\n  children: React.ReactNode;\n  theme?: ZoraTheme;\n  initialMode?: ZoraThemeMode;\n}\n\nexport function ZoraProvider({\n  children,\n  theme = zoraDefaultTheme,\n  initialMode = 'light',\n}: ZoraProviderProps) {\n  const runtimeValue = React.useMemo(() => ({ sourceTheme: theme, themeId: theme.id }), [theme]);\n\n  return (\n    <ZoraThemeRuntimeContext.Provider value={runtimeValue}>\n      <ThemeProvider initialConfig={createZoraThemeConfig(theme)} initialMode={initialMode}>\n        {children}\n      </ThemeProvider>\n    </ZoraThemeRuntimeContext.Provider>\n  );\n}\n"]}
+{"version":3,"file":"ZoraProvider.js","sourceRoot":"","sources":["../../src/theme/ZoraProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AACnD,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAEhE,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,OAAO,EAAE,uBAAuB,EAAE,MAAM,2BAA2B,CAAC;AAQpE;;;;;;;;;;;GAWG;AACH,MAAM,UAAU,YAAY,CAAC,EAC3B,QAAQ,EACR,KAAK,GAAG,gBAAgB,EACxB,WAAW,GAAG,OAAO,GACH;IAClB,MAAM,YAAY,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE,CAAC,CAAC,EAAE,WAAW,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,CAAC,EAAE,EAAE,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAE/F,OAAO,CACL,CAAC,uBAAuB,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,YAAY,CAAC,CACpD;MAAA,CAAC,aAAa,CAAC,aAAa,CAAC,CAAC,qBAAqB,CAAC,KAAK,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,WAAW,CAAC,CACnF;QAAA,CAAC,QAAQ,CACX;MAAA,EAAE,aAAa,CACjB;IAAA,EAAE,uBAAuB,CAAC,QAAQ,CAAC,CACpC,CAAC;AACJ,CAAC","sourcesContent":["import { ThemeProvider } from '@ankhorage/surface';\nimport React from 'react';\n\nimport { createZoraThemeConfig } from './createZoraThemeConfig';\nimport type { ZoraTheme, ZoraThemeMode } from './types';\nimport { zoraDefaultTheme } from './zoraDefaultTheme';\nimport { ZoraThemeRuntimeContext } from './ZoraThemeRuntimeContext';\n\nexport interface ZoraProviderProps {\n  children: React.ReactNode;\n  theme?: ZoraTheme;\n  initialMode?: ZoraThemeMode;\n}\n\n/***\n * Installs the ZORA theme runtime and underlying Surface theme provider.\n *\n * Wrap an app with `ZoraProvider` once near the root so components, patterns,\n * layouts, and theme hooks resolve the same design tokens and color mode.\n *\n * @readme\n * @example App provider\n * ```tsx\n * <ZoraProvider initialMode=\"light\"><App /></ZoraProvider>\n * ```\n */\nexport function ZoraProvider({\n  children,\n  theme = zoraDefaultTheme,\n  initialMode = 'light',\n}: ZoraProviderProps) {\n  const runtimeValue = React.useMemo(() => ({ sourceTheme: theme, themeId: theme.id }), [theme]);\n\n  return (\n    <ZoraThemeRuntimeContext.Provider value={runtimeValue}>\n      <ThemeProvider initialConfig={createZoraThemeConfig(theme)} initialMode={initialMode}>\n        {children}\n      </ThemeProvider>\n    </ZoraThemeRuntimeContext.Provider>\n  );\n}\n"]}

package/package.json

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

package/src/components/action-sheet/ActionSheet.tsx

@@ -8,4 +8,9 @@ function ActionSheetInner({ mode: _mode, themeId: _themeId, ...props }: ActionSh
   return <SurfaceActionSheet {...props} />;
 }
 
+/***
+ * Presents a modal bottom sheet with a list of actions.
+ *
+ * @readme
+ */
 export const ActionSheet = withZoraThemeScope(ActionSheetInner);

package/src/components/action-sheet/ActionSheetItem.tsx

@@ -29,4 +29,9 @@ function ActionSheetItemInner({
   return <SurfaceActionSheetItem {...props} leading={resolvedLeading} />;
 }
 
+/***
+ * Renders a single selectable action row within an `ActionSheet`.
+ *
+ * @readme
+ */
 export const ActionSheetItem = withZoraThemeScope(ActionSheetItemInner);

package/src/components/app-bar/AppBar.tsx

@@ -130,4 +130,9 @@ function AppBarInner({
   );
 }
 
+/***
+ * Renders a top app bar with title/subtitle and optional leading/trailing actions.
+ *
+ * @readme
+ */
 export const AppBar = withZoraThemeScope(AppBarInner);

package/src/components/avatar/Avatar.tsx

@@ -140,4 +140,9 @@ function AvatarInner({
   );
 }
 
+/***
+ * Displays a user or entity avatar with image support and initials fallback.
+ *
+ * @readme
+ */
 export const Avatar = withZoraThemeScope(AvatarInner);

package/src/components/avatar-group/AvatarGroup.tsx

@@ -71,4 +71,9 @@ function AvatarGroupInner({
   );
 }
 
+/***
+ * Renders a compact group of avatars with optional overflow handling.
+ *
+ * @readme
+ */
 export const AvatarGroup = withZoraThemeScope(AvatarGroupInner);

package/src/components/badge/Badge.tsx

@@ -27,4 +27,9 @@ function BadgeInner({
   );
 }
 
+/***
+ * Shows a small status, label, or count indicator.
+ *
+ * @readme
+ */
 export const Badge = withZoraThemeScope(BadgeInner);

package/src/components/breadcrumbs/Breadcrumbs.tsx

@@ -140,4 +140,9 @@ function BreadcrumbsInner({
   );
 }
 
+/***
+ * Renders a breadcrumb trail for hierarchical navigation.
+ *
+ * @readme
+ */
 export const Breadcrumbs = withZoraThemeScope(BreadcrumbsInner);

package/src/components/button/Button.tsx

@@ -20,4 +20,16 @@ function ButtonInner({
   );
 }
 
+/***
+ * Theme-aware action control for primary, secondary, destructive, and neutral actions.
+ *
+ * Use `Button` for explicit user actions that should follow ZORA's semantic color,
+ * variant, and size recipes across React Native and React Native Web.
+ *
+ * @readme
+ * @example Basic action
+ * ```tsx
+ * <Button color="primary" variant="solid" onPress={save}>Save</Button>
+ * ```
+ */
 export const Button = withZoraThemeScope(ButtonInner);

package/src/components/button-group/ButtonGroup.tsx

@@ -102,4 +102,9 @@ function ButtonGroupInner({
   );
 }
 
+/***
+ * Groups multiple `Button` elements with consistent spacing and alignment.
+ *
+ * @readme
+ */
 export const ButtonGroup = withZoraThemeScope(ButtonGroupInner);

package/src/components/card/Card.tsx

@@ -70,4 +70,16 @@ function CardInner({
   );
 }
 
+/***
+ * Structured content container with built-in heading, description, actions, and footer slots.
+ *
+ * Use `Card` for reusable content blocks that should inherit ZORA spacing,
+ * radius, tone, and responsive header layout without hand-assembling primitives.
+ *
+ * @readme
+ * @example Content card
+ * ```tsx
+ * <Card title="Project" description="Latest activity">...</Card>
+ * ```
+ */
 export const Card = withZoraThemeScope(CardInner);

package/src/components/checkbox/Checkbox.tsx

@@ -8,4 +8,9 @@ function CheckboxInner({ themeId: _themeId, mode: _mode, ...props }: CheckboxPro
   return <SurfaceCheckbox {...props} />;
 }
 
+/***
+ * Binary selection control for toggling a value on or off.
+ *
+ * @readme
+ */
 export const Checkbox = withZoraThemeScope(CheckboxInner);

package/src/components/checkbox/CheckboxGroup.tsx

@@ -57,6 +57,11 @@ function CheckboxGroupInner<TValue extends string>({
   );
 }
 
+/***
+ * Renders a group of checkboxes for multi-select values.
+ *
+ * @readme
+ */
 export const CheckboxGroup = withZoraThemeScope(CheckboxGroupInner);
 
 function CheckboxGroupItem<TValue extends string>({

package/src/components/chip/Chip.tsx

@@ -91,4 +91,9 @@ function ChipInner({
   );
 }
 
+/***
+ * Compact pill-like control for filters, tags, and quick selections.
+ *
+ * @readme
+ */
 export const Chip = withZoraThemeScope(ChipInner);

package/src/components/chip-group/ChipGroup.tsx

@@ -63,4 +63,9 @@ function ChipGroupInner<TValue extends string = string>({
   );
 }
 
+/***
+ * Renders a row or wrap layout of `Chip` items.
+ *
+ * @readme
+ */
 export const ChipGroup = withZoraThemeScope(ChipGroupInner);

package/src/components/data-table/DataTable.tsx

@@ -385,4 +385,9 @@ function DataTableInner<TRow extends object>({
   );
 }
 
+/***
+ * Displays structured tabular data with responsive desktop/mobile layouts.
+ *
+ * @readme
+ */
 export const DataTable = withZoraThemeScope(DataTableInner);

package/src/components/date-picker/DatePicker.tsx

@@ -239,4 +239,9 @@ function DatePickerInner({
   );
 }
 
+/***
+ * Date input control with calendar selection and formatted display value.
+ *
+ * @readme
+ */
 export const DatePicker = withZoraThemeScope(DatePickerInner);

package/src/components/drawer/Drawer.tsx

@@ -52,4 +52,9 @@ function DrawerInner({
   );
 }
 
+/***
+ * Side panel overlay for navigation, settings, and secondary content.
+ *
+ * @readme
+ */
 export const Drawer = withZoraThemeScope(DrawerInner);

package/src/components/form/Form.tsx

@@ -63,4 +63,9 @@ function FormInner<TName extends string = string>({
   );
 }
 
+/***
+ * Composes fields and actions into a validated form layout.
+ *
+ * @readme
+ */
 export const Form = withZoraThemeScope(FormInner);

package/src/components/form/FormActions.tsx

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

package/src/components/form/FormError.tsx

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

package/src/components/form/FormField.tsx

@@ -148,4 +148,9 @@ function FormFieldInner<TName extends string = string>(props: FormFieldProps<TNa
   );
 }
 
+/***
+ * Connects a controlled form value to a labeled input field with error handling.
+ *
+ * @readme
+ */
 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

@@ -91,4 +91,16 @@ function HeadingInner({
   );
 }
 
+/***
+ * Structured title primitive for accessible page, section, and card headings.
+ *
+ * `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>
+ * ```
+ */
 export const Heading = withZoraThemeScope(HeadingInner);

package/src/components/icon/Icon.tsx

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

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

@@ -29,4 +29,9 @@ function IconButtonInner({
   );
 }
 
+/***
+ * Icon-only button for compact actions; requires an accessible `label`.
+ *
+ * @readme
+ */
 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.
+ *
+ * @readme
+ */
 export const Image = withZoraThemeScope(ImageInner);

package/src/components/input/Input.tsx

@@ -62,4 +62,16 @@ function InputInner({
   );
 }
 
+/***
+ * Theme-aware text input with semantic sizing and optional leading/trailing icon slots.
+ *
+ * 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' }} />
+ * ```
+ */
 export const Input = withZoraThemeScope(InputInner);

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

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

package/src/components/menu/DropdownMenu.tsx

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

package/src/components/menu/Menu.tsx

@@ -60,4 +60,9 @@ 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.
+ *
+ * @readme
+ */
 export const Menu = withZoraThemeScope(MenuInner);

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

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

package/src/components/modal/Modal.tsx

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

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

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

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

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

package/src/components/pagination/Pagination.tsx

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

package/src/components/progress/Progress.tsx

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

package/src/components/radio/Radio.tsx

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

package/src/components/radio/RadioGroup.tsx

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

package/src/components/rating/Rating.tsx

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

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

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

package/src/components/select/Select.tsx

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

package/src/components/skeleton/Skeleton.tsx

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

package/src/components/skeleton/SkeletonCard.tsx

@@ -36,4 +36,9 @@ function SkeletonCardInner({
   );
 }
 
+/***
+ * Skeleton placeholder that matches the structure of a `Card`.
+ *
+ * @readme
+ */
 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.
+ *
+ * @readme
+ */
 export const SkeletonList = withZoraThemeScope(SkeletonListInner);

package/src/components/skeleton/SkeletonText.tsx

@@ -42,4 +42,9 @@ function SkeletonTextInner({
   );
 }
 
+/***
+ * Multi-line skeleton placeholder for text content.
+ *
+ * @readme
+ */
 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.
+ *
+ * @readme
+ */
 export const Tabs = withZoraThemeScope(TabsInner);

package/src/components/text/Text.tsx

@@ -88,4 +88,16 @@ function TextInner({
   );
 }
 
+/***
+ * Structured copy primitive for theme-aware app text.
+ *
+ * `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>
+ * ```
+ */
 export const Text = withZoraThemeScope(TextInner);