@ankhorage/zora 11.0.0 → 12.1.0

package/src/features/date-picker/datePickerMeta.ts

@@ -0,0 +1,58 @@
+import type { ZoraComponentMeta } from '../../metadata';
+
+export const datePickerMeta = {
+  name: 'DatePicker',
+  category: 'component',
+  description: 'Captures a local calendar date through the shared BottomSheet picker host.',
+  directManifestNode: true,
+  allowedChildren: [],
+  blueprint: {
+    label: 'Date picker',
+    defaultProps: {
+      value: null,
+      placeholder: 'Choose date',
+      disabled: false,
+      required: false,
+    },
+  },
+  events: {
+    valueChange: {
+      label: 'Value change',
+      eventType: 'datePicker.valueChange',
+      description: 'Emitted when a local calendar date is selected.',
+      payloadFields: [{ path: 'value', type: 'string', label: 'Value' }],
+    },
+  },
+  props: {
+    value: {
+      type: 'string',
+      category: 'State',
+      label: 'Value',
+      default: null,
+      authoring: { authority: 'instance' },
+    },
+    label: { type: 'string', category: 'Content', label: 'Label' },
+    description: { type: 'string', category: 'Content', label: 'Description' },
+    error: { type: 'string', category: 'Validation', label: 'Error' },
+    placeholder: {
+      type: 'string',
+      category: 'Content',
+      label: 'Placeholder',
+      default: 'Choose date',
+    },
+    minDate: { type: 'string', category: 'Validation', label: 'Minimum date' },
+    maxDate: { type: 'string', category: 'Validation', label: 'Maximum date' },
+    disabled: {
+      type: 'boolean',
+      category: 'State',
+      label: 'Disabled',
+      default: false,
+    },
+    required: {
+      type: 'boolean',
+      category: 'Validation',
+      label: 'Required',
+      default: false,
+    },
+  },
+} as const satisfies ZoraComponentMeta;

package/src/features/date-picker/public.test.ts

@@ -0,0 +1,15 @@
+import { expect, test } from 'bun:test';
+
+import { ZORA_COMPONENT_META } from '../../metadata/componentMeta';
+
+test('DatePicker exposes a serializable manifest contract through the shared BottomSheet', async () => {
+  const source = await Bun.file('src/features/date-picker/adapters/inbound/DatePicker.tsx').text();
+  const meta = ZORA_COMPONENT_META.DatePicker;
+
+  expect(meta.directManifestNode).toBe(true);
+  expect(meta.props.value?.type).toBe('string');
+  expect(meta.events?.valueChange?.eventType).toBe('datePicker.valueChange');
+  expect(meta.bindings?.props?.value?.value.type).toBe('string');
+  expect(source).toContain('useBottomSheet()');
+  expect(source).toContain('formatLocalDate(date)');
+});

package/src/features/date-picker/public.ts

@@ -0,0 +1,2 @@
+export type { DatePickerProps, DatePickerValue } from '../../types/date-picker';
+export { DatePicker } from './adapters/inbound/DatePicker';

package/src/features/date-picker/utils/localDate.test.ts

@@ -0,0 +1,18 @@
+import { describe, expect, test } from 'bun:test';
+
+import { formatLocalDate, parseLocalDate } from './localDate';
+
+describe('local date serialization', () => {
+  test('round-trips a valid YYYY-MM-DD value without a UTC conversion', () => {
+    const parsed = parseLocalDate('2026-09-13');
+
+    expect(parsed).toBeDefined();
+    expect(parsed ? formatLocalDate(parsed) : undefined).toBe('2026-09-13');
+  });
+
+  test('rejects malformed and impossible calendar dates', () => {
+    expect(parseLocalDate('2026-2-03')).toBeUndefined();
+    expect(parseLocalDate('2026-02-30')).toBeUndefined();
+    expect(parseLocalDate(null)).toBeUndefined();
+  });
+});

package/src/features/date-picker/utils/localDate.ts

@@ -0,0 +1,29 @@
+const LOCAL_DATE_PATTERN = /^(\d{4})-(\d{2})-(\d{2})$/u;
+
+/*** Parse a calendar date without applying a UTC offset. */
+export function parseLocalDate(value: string | null | undefined): Date | undefined {
+  if (!value) return undefined;
+
+  const match = LOCAL_DATE_PATTERN.exec(value);
+  if (!match) return undefined;
+
+  const year = Number(match[1]);
+  const month = Number(match[2]);
+  const day = Number(match[3]);
+  const parsed = new Date(year, month - 1, day);
+  parsed.setFullYear(year);
+
+  return parsed.getFullYear() === year &&
+    parsed.getMonth() === month - 1 &&
+    parsed.getDate() === day
+    ? parsed
+    : undefined;
+}
+
+/*** Serialize a Date as a local calendar date suitable for manifest state. */
+export function formatLocalDate(value: Date): string {
+  const year = String(value.getFullYear()).padStart(4, '0');
+  const month = String(value.getMonth() + 1).padStart(2, '0');
+  const day = String(value.getDate()).padStart(2, '0');
+  return `${year}-${month}-${day}`;
+}

package/src/{components/gradient → features/gradient/adapters/inbound}/Gradient.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
 
-import { Box } from '../../features/layout/public';
-import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
+import { withZoraThemeScope } from '../../../../theme/withZoraThemeScope';
+import type { GradientProps } from '../../../../types/gradient';
+import { Box } from '../../../layout/public';
 import { useGradientRenderer } from './GradientRendererContext';
-import type { GradientProps } from './types';
 
 function GradientInner({
   themeId: _themeId,

package/src/{components/gradient → features/gradient/adapters/inbound}/GradientRendererContext.tsx

@@ -1,10 +1,10 @@
 import React, { createContext, use } from 'react';
 
-import type { GradientRenderer, GradientRendererProviderProps } from './types';
+import type { GradientRenderer, GradientRendererProviderProps } from '../../../../types/gradient';
 
 const GradientRendererContext = createContext<GradientRenderer | null>(null);
 
-/**
+/***
  * Supplies the host-owned renderer used by `Gradient`.
  *
  * Expo apps can adapt `expo-linear-gradient` here, while standalone React
@@ -14,6 +14,7 @@ export function GradientRendererProvider({ children, renderer }: GradientRendere
   return <GradientRendererContext value={renderer}>{children}</GradientRendererContext>;
 }
 
+/*** Resolves the host-owned gradient renderer for a Gradient instance. */
 export function useGradientRenderer(): GradientRenderer {
   const renderer = use(GradientRendererContext);
 

package/src/features/gradient/gradientMeta.ts

@@ -0,0 +1,26 @@
+import type { ZoraComponentMeta } from '../../metadata';
+import { CONTAINER_ALLOWED_CHILDREN } from '../../metadata/allowedChildren';
+
+export const gradientMeta = {
+  name: 'Gradient',
+  category: 'component',
+  description: 'Renders a host-backed gradient container for nested manifest content.',
+  directManifestNode: true,
+  allowedChildren: [...CONTAINER_ALLOWED_CHILDREN],
+  blueprint: {
+    label: 'Gradient',
+  },
+  props: {
+    colors: {
+      type: 'array',
+      category: 'Style',
+      label: 'Colors',
+    },
+    locations: { type: 'array', category: 'Style', label: 'Locations' },
+    width: { type: 'number', category: 'Layout', label: 'Width' },
+    height: { type: 'number', category: 'Layout', label: 'Height' },
+    minHeight: { type: 'number', category: 'Layout', label: 'Minimum height' },
+    radius: { type: 'radius', category: 'Style', label: 'Corner radius' },
+    p: { type: 'spacing', category: 'Layout', label: 'Padding' },
+  },
+} as const satisfies ZoraComponentMeta;

package/src/features/gradient/public.test.ts

@@ -0,0 +1,15 @@
+import { expect, test } from 'bun:test';
+
+import { ZORA_COMPONENT_META } from '../../metadata/componentMeta';
+
+test('Gradient is a direct manifest container with serializable colors', () => {
+  const meta = ZORA_COMPONENT_META.Gradient;
+
+  expect(meta?.directManifestNode).toBe(true);
+  expect(meta?.allowedChildren.length).toBeGreaterThan(0);
+  expect(meta?.props.colors).toEqual({
+    type: 'array',
+    category: 'Style',
+    label: 'Colors',
+  });
+});

package/src/{components/gradient/index.ts → features/gradient/public.ts}

@@ -1,5 +1,3 @@
-export { Gradient } from './Gradient';
-export { GradientRendererProvider } from './GradientRendererContext';
 export type {
   GradientColor,
   GradientColors,
@@ -9,4 +7,6 @@ export type {
   GradientRenderer,
   GradientRendererProps,
   GradientRendererProviderProps,
-} from './types';
+} from '../../types/gradient';
+export { Gradient } from './adapters/inbound/Gradient';
+export { GradientRendererProvider } from './adapters/inbound/GradientRendererContext';

package/src/{patterns/hero → features/hero/adapters/inbound}/Hero.tsx

@@ -1,12 +1,11 @@
 import React from 'react';
 
-import { Button } from '../../features/button/public';
-import { Card } from '../../features/card/public';
-import { Box, Grid, Stack } from '../../features/layout/public';
-import { Heading } from '../../features/typography/public';
-import { Text } from '../../features/typography/public';
-import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
-import type { HeroAction, HeroAlign, HeroProps } from './types';
+import { withZoraThemeScope } from '../../../../theme/withZoraThemeScope';
+import type { HeroAction, HeroAlign, HeroProps } from '../../../../types/hero';
+import { Button } from '../../../button/public';
+import { Card } from '../../../card/public';
+import { Box, Grid, Stack } from '../../../layout/public';
+import { Heading, Text } from '../../../typography/public';
 
 function HeroInner({
   themeId: _themeId,

package/src/features/hero/public.ts

@@ -0,0 +1,2 @@
+export type { HeroAction, HeroAlign, HeroLayout, HeroProps, HeroTone } from '../../types/hero';
+export { Hero } from './adapters/inbound/Hero';

package/src/{patterns → features}/missing-element/MissingElement.test.ts

@@ -1,7 +1,7 @@
 import { describe, expect, test } from 'bun:test';
 
 import { ZORA_BINDABLE_COMPONENT_META, ZORA_COMPONENT_META } from '../../metadata';
-import { missingElementMeta } from './meta';
+import { missingElementMeta } from './missingElementMeta';
 
 describe('MissingElement draft contract', () => {
   test('is a release-blocking manifest leaf distinct from completed states', () => {
@@ -41,7 +41,9 @@ describe('MissingElement draft contract', () => {
   });
 
   test('visibly and accessibly identifies the gap while preserving its minimum dimensions', async () => {
-    const source = await Bun.file('src/patterns/missing-element/MissingElement.tsx').text();
+    const source = await Bun.file(
+      'src/features/missing-element/adapters/inbound/MissingElement.tsx',
+    ).text();
 
     expect(source).toContain('accessibilityLabel={accessibilityLabel}');
     expect(source).toContain('accessibilityRole="text"');
@@ -54,8 +56,8 @@ describe('MissingElement draft contract', () => {
 
   test('accepts the canonical interaction policy without owning interactive behavior', async () => {
     const [source, types] = await Promise.all([
-      Bun.file('src/patterns/missing-element/MissingElement.tsx').text(),
-      Bun.file('src/patterns/missing-element/types.ts').text(),
+      Bun.file('src/features/missing-element/adapters/inbound/MissingElement.tsx').text(),
+      Bun.file('src/types/missing-element.ts').text(),
     ]);
 
     expect(types).toContain('MissingElementProps extends ZoraBaseProps');

package/src/{patterns/missing-element → features/missing-element/adapters/inbound}/MissingElement.tsx

@@ -1,12 +1,12 @@
 import React from 'react';
 import { StyleSheet } from 'react-native';
 
-import { Badge } from '../../features/badge/public';
-import { Box, Stack } from '../../features/layout/public';
-import { Text } from '../../features/typography/public';
-import { useZoraTheme } from '../../theme/useZoraTheme';
-import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
-import type { MissingElementProps } from './types';
+import { useZoraTheme } from '../../../../theme/useZoraTheme';
+import { withZoraThemeScope } from '../../../../theme/withZoraThemeScope';
+import type { MissingElementProps } from '../../../../types/missing-element';
+import { Badge } from '../../../badge/public';
+import { Box, Stack } from '../../../layout/public';
+import { Text } from '../../../typography/public';
 
 /***
  * Renders the visible, non-interactive body of a draft missing-element marker.

package/src/features/missing-element/public.ts

@@ -0,0 +1,2 @@
+export type { MissingElementProps } from '../../types/missing-element';
+export { MissingElement } from './adapters/inbound/MissingElement';

package/src/{components/skeleton → features/skeleton/adapters/inbound}/Skeleton.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
 
-import { Box } from '../../features/layout/public';
-import { useZoraTheme } from '../../theme/useZoraTheme';
-import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
-import type { SkeletonProps } from './types';
+import { useZoraTheme } from '../../../../theme/useZoraTheme';
+import { withZoraThemeScope } from '../../../../theme/withZoraThemeScope';
+import type { SkeletonProps } from '../../../../types/skeleton';
+import { Box } from '../../../layout/public';
 
 function SkeletonInner({
   themeId: _themeId,

package/src/{components/skeleton → features/skeleton/adapters/inbound}/SkeletonCard.tsx

@@ -1,12 +1,12 @@
 import React from 'react';
 
-import { ButtonGroup } from '../../features/button/public';
-import { Card } from '../../features/card/public';
-import { Stack } from '../../features/layout/public';
-import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
+import { withZoraThemeScope } from '../../../../theme/withZoraThemeScope';
+import type { SkeletonCardProps } from '../../../../types/skeleton';
+import { ButtonGroup } from '../../../button/public';
+import { Card } from '../../../card/public';
+import { Stack } from '../../../layout/public';
 import { Skeleton } from './Skeleton';
 import { SkeletonText } from './SkeletonText';
-import type { SkeletonCardProps } from './types';
 
 function SkeletonCardInner({
   themeId: _themeId,

package/src/{components/skeleton → features/skeleton/adapters/inbound}/SkeletonList.tsx

@@ -1,10 +1,10 @@
 import React from 'react';
 
-import { List, type ListRowProps } from '../../patterns/list';
-import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
+import { List, type ListRowProps } from '../../../../patterns/list';
+import { withZoraThemeScope } from '../../../../theme/withZoraThemeScope';
+import type { SkeletonListProps } from '../../../../types/skeleton';
 import { Skeleton } from './Skeleton';
 import { SkeletonText } from './SkeletonText';
-import type { SkeletonListProps } from './types';
 
 function clampRows(rows: number): number {
   if (!Number.isFinite(rows)) {

package/src/{components/skeleton → features/skeleton/adapters/inbound}/SkeletonText.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
 
-import { Stack } from '../../features/layout/public';
-import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
+import { withZoraThemeScope } from '../../../../theme/withZoraThemeScope';
+import type { SkeletonTextProps } from '../../../../types/skeleton';
+import { Stack } from '../../../layout/public';
 import { Skeleton } from './Skeleton';
-import type { SkeletonTextProps } from './types';
 
 function clampLines(lines: number): number {
   if (!Number.isFinite(lines)) {

package/src/features/skeleton/public.test.ts

@@ -0,0 +1,24 @@
+import { expect, test } from 'bun:test';
+
+import { ZORA_COMPONENT_META } from '../../metadata/componentMeta';
+
+test('skeletons support direct authoring and automatic feature loading states', async () => {
+  const [dataTableSource, publicSource] = await Promise.all([
+    Bun.file('src/features/data-table/adapters/inbound/DataTable.tsx').text(),
+    Bun.file('src/features/skeleton/public.ts').text(),
+  ]);
+
+  expect(ZORA_COMPONENT_META.Skeleton.directManifestNode).toBe(true);
+  expect(ZORA_COMPONENT_META.SkeletonCard.directManifestNode).toBe(true);
+  expect(ZORA_COMPONENT_META.SkeletonList.directManifestNode).toBe(true);
+  expect(ZORA_COMPONENT_META.SkeletonText.directManifestNode).toBe(true);
+  expect(publicSource).toContain('Skeleton');
+  expect(publicSource).toContain('SkeletonCard');
+  expect(publicSource).toContain('SkeletonList');
+  expect(publicSource).toContain('SkeletonText');
+  expect(ZORA_COMPONENT_META.SkeletonList.bindings?.props?.rows?.value.type).toBe('number');
+
+  expect(dataTableSource).toContain("from '../../../skeleton/public'");
+  expect(dataTableSource).toContain('if (loading)');
+  expect(dataTableSource).toContain('<SkeletonList rows={loadingRows}');
+});

package/src/features/skeleton/public.ts

@@ -0,0 +1,13 @@
+export type {
+  SkeletonCardProps,
+  SkeletonDimension,
+  SkeletonListProps,
+  SkeletonListVariant,
+  SkeletonProps,
+  SkeletonRadius,
+  SkeletonTextProps,
+} from '../../types/skeleton';
+export { Skeleton } from './adapters/inbound/Skeleton';
+export { SkeletonCard } from './adapters/inbound/SkeletonCard';
+export { SkeletonList } from './adapters/inbound/SkeletonList';
+export { SkeletonText } from './adapters/inbound/SkeletonText';

package/src/features/skeleton/skeletonMeta.ts

@@ -0,0 +1,88 @@
+import type { ZoraComponentMeta } from '../../metadata';
+
+export const skeletonMeta = {
+  name: 'Skeleton',
+  category: 'component',
+  description: 'Generic visual placeholder for a loading content region.',
+  directManifestNode: true,
+  allowedChildren: [],
+  blueprint: {
+    label: 'Skeleton',
+    defaultProps: { height: 16, radius: 'm' },
+  },
+  props: {
+    width: { type: 'number', category: 'Layout', label: 'Width' },
+    height: { type: 'number', category: 'Layout', label: 'Height', default: 16 },
+    radius: { type: 'radius', category: 'Appearance', label: 'Radius', default: 'm' },
+  },
+} as const satisfies ZoraComponentMeta;
+
+export const skeletonTextMeta = {
+  name: 'SkeletonText',
+  category: 'component',
+  description: 'Multi-line placeholder for loading text content.',
+  directManifestNode: true,
+  allowedChildren: [],
+  blueprint: {
+    label: 'Skeleton text',
+    defaultProps: { lines: 3, lineHeight: 12, gap: 'xs' },
+  },
+  props: {
+    lines: { type: 'number', category: 'Content', label: 'Lines', default: 3 },
+    lineHeight: { type: 'number', category: 'Layout', label: 'Line height', default: 12 },
+    gap: { type: 'spacing', category: 'Spacing', label: 'Gap', default: 'xs' },
+    width: { type: 'number', category: 'Layout', label: 'Width' },
+    lastLineWidth: { type: 'number', category: 'Layout', label: 'Last line width' },
+  },
+} as const satisfies ZoraComponentMeta;
+
+export const skeletonCardMeta = {
+  name: 'SkeletonCard',
+  category: 'component',
+  description: 'Card-shaped placeholder for loading media, copy, and actions.',
+  directManifestNode: true,
+  allowedChildren: [],
+  blueprint: {
+    label: 'Skeleton card',
+    defaultProps: { media: false, actions: false, lines: 3, compact: false },
+  },
+  props: {
+    media: { type: 'boolean', category: 'Content', label: 'Media', default: false },
+    actions: { type: 'boolean', category: 'Content', label: 'Actions', default: false },
+    lines: { type: 'number', category: 'Content', label: 'Lines', default: 3 },
+    compact: { type: 'boolean', category: 'Layout', label: 'Compact', default: false },
+  },
+} as const satisfies ZoraComponentMeta;
+
+export const skeletonListMeta = {
+  name: 'SkeletonList',
+  category: 'component',
+  description: 'List-shaped placeholder for loading rows with optional leading content.',
+  directManifestNode: true,
+  allowedChildren: [],
+  blueprint: {
+    label: 'Skeleton list',
+    defaultProps: {
+      rows: 5,
+      avatar: false,
+      media: false,
+      lines: 2,
+      variant: 'divider',
+      compact: false,
+    },
+  },
+  props: {
+    rows: { type: 'number', category: 'Content', label: 'Rows', default: 5 },
+    avatar: { type: 'boolean', category: 'Content', label: 'Avatar', default: false },
+    media: { type: 'boolean', category: 'Content', label: 'Media', default: false },
+    lines: { type: 'number', category: 'Content', label: 'Lines', default: 2 },
+    variant: {
+      type: 'enum',
+      category: 'Appearance',
+      label: 'Variant',
+      enum: ['divider', 'card'],
+      default: 'divider',
+    },
+    compact: { type: 'boolean', category: 'Layout', label: 'Compact', default: false },
+  },
+} as const satisfies ZoraComponentMeta;

package/src/{components/time-picker → features/time-picker/adapters/inbound}/TimePicker.tsx

@@ -2,12 +2,12 @@ import { Field } from '@ankhorage/surface';
 import React from 'react';
 import { ScrollView, StyleSheet } from 'react-native';
 
-import { useBottomSheet } from '../../features/bottom-sheet/public';
-import { Button } from '../../features/button/public';
-import { Stack } from '../../features/layout/public';
-import { Text } from '../../features/typography/public';
-import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
-import type { TimePickerProps } from './types';
+import { withZoraThemeScope } from '../../../../theme/withZoraThemeScope';
+import type { TimePickerProps } from '../../../../types/time-picker';
+import { useBottomSheet } from '../../../bottom-sheet/public';
+import { Button } from '../../../button/public';
+import { Stack } from '../../../layout/public';
+import { Text } from '../../../typography/public';
 
 const MINUTES_PER_DAY = 24 * 60;
 const DEFAULT_STEP_MINUTES = 30;
@@ -64,12 +64,9 @@ function generateTimeOptions({
   const step = resolveStepMinutes(stepMinutes);
   const min = parseTimeToMinutes(minTime) ?? 0;
   const max = parseTimeToMinutes(maxTime) ?? MINUTES_PER_DAY - 1;
-  const options: string[] = [];
-
-  for (let minute = 0; minute < MINUTES_PER_DAY; minute += step) {
-    if (minute >= min && minute <= max) options.push(formatMinutes(minute));
-  }
-  return options;
+  return Array.from({ length: Math.ceil(MINUTES_PER_DAY / step) }, (_, index) => index * step)
+    .filter((minute) => minute >= min && minute <= max)
+    .map(formatMinutes);
 }
 
 function TimePickerInner({

package/src/features/time-picker/public.test.ts

@@ -0,0 +1,14 @@
+import { expect, test } from 'bun:test';
+
+import { ZORA_COMPONENT_META } from '../../metadata/componentMeta';
+
+test('TimePicker exposes a serializable manifest contract through the shared BottomSheet', async () => {
+  const source = await Bun.file('src/features/time-picker/adapters/inbound/TimePicker.tsx').text();
+  const meta = ZORA_COMPONENT_META.TimePicker;
+
+  expect(meta.directManifestNode).toBe(true);
+  expect(meta.props.value?.type).toBe('string');
+  expect(meta.events?.valueChange?.eventType).toBe('timePicker.valueChange');
+  expect(meta.bindings?.props?.value?.value.type).toBe('string');
+  expect(source).toContain('useBottomSheet()');
+});

package/src/features/time-picker/public.ts

@@ -0,0 +1,2 @@
+export type { TimePickerProps, TimePickerValue } from '../../types/time-picker';
+export { TimePicker } from './adapters/inbound/TimePicker';

package/src/features/time-picker/timePickerMeta.ts

@@ -0,0 +1,65 @@
+import type { ZoraComponentMeta } from '../../metadata';
+
+export const timePickerMeta = {
+  name: 'TimePicker',
+  category: 'component',
+  description: 'Captures a local HH:mm time through the shared BottomSheet picker host.',
+  directManifestNode: true,
+  allowedChildren: [],
+  blueprint: {
+    label: 'Time picker',
+    defaultProps: {
+      value: null,
+      placeholder: 'Choose time',
+      stepMinutes: 30,
+      disabled: false,
+      required: false,
+    },
+  },
+  events: {
+    valueChange: {
+      label: 'Value change',
+      eventType: 'timePicker.valueChange',
+      description: 'Emitted when an HH:mm time value is selected.',
+      payloadFields: [{ path: 'value', type: 'string', label: 'Value' }],
+    },
+  },
+  props: {
+    value: {
+      type: 'string',
+      category: 'State',
+      label: 'Value',
+      default: null,
+      authoring: { authority: 'instance' },
+    },
+    label: { type: 'string', category: 'Content', label: 'Label' },
+    description: { type: 'string', category: 'Content', label: 'Description' },
+    error: { type: 'string', category: 'Validation', label: 'Error' },
+    placeholder: {
+      type: 'string',
+      category: 'Content',
+      label: 'Placeholder',
+      default: 'Choose time',
+    },
+    minTime: { type: 'string', category: 'Validation', label: 'Minimum time' },
+    maxTime: { type: 'string', category: 'Validation', label: 'Maximum time' },
+    stepMinutes: {
+      type: 'number',
+      category: 'Behavior',
+      label: 'Step in minutes',
+      default: 30,
+    },
+    disabled: {
+      type: 'boolean',
+      category: 'State',
+      label: 'Disabled',
+      default: false,
+    },
+    required: {
+      type: 'boolean',
+      category: 'Validation',
+      label: 'Required',
+      default: false,
+    },
+  },
+} as const satisfies ZoraComponentMeta;