@ankhorage/zora 2.4.5 → 2.4.6

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

@@ -0,0 +1,152 @@
+import { Field } from '@ankhorage/surface';
+import React from 'react';
+import { ScrollView } from 'react-native';
+
+import { Stack } from '../../foundation';
+import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
+import { ActionSheet, ActionSheetItem } from '../action-sheet';
+import { Button } from '../button';
+import { Text } from '../text';
+import type { TimePickerProps } from './types';
+
+const MINUTES_PER_DAY = 24 * 60;
+const DEFAULT_STEP_MINUTES = 30;
+
+function renderLabel(label: React.ReactNode, description: React.ReactNode | undefined) {
+  return (
+    <Stack gap="xs">
+      <Text variant="label" weight="semiBold">
+        {label}
+      </Text>
+      {description ? (
+        <Text emphasis="muted" variant="bodySmall">
+          {description}
+        </Text>
+      ) : null}
+    </Stack>
+  );
+}
+
+function parseTimeToMinutes(value: string | undefined): number | undefined {
+  if (!value) {
+    return undefined;
+  }
+
+  const match = /^(\d{2}):(\d{2})$/.exec(value);
+  if (!match) {
+    return undefined;
+  }
+
+  const hours = Number(match[1]);
+  const minutes = Number(match[2]);
+  if (hours < 0 || hours > 23 || minutes < 0 || minutes > 59) {
+    return undefined;
+  }
+
+  return hours * 60 + minutes;
+}
+
+function formatMinutes(value: number): string {
+  const hours = Math.floor(value / 60);
+  const minutes = value % 60;
+  return `${String(hours).padStart(2, '0')}:${String(minutes).padStart(2, '0')}`;
+}
+
+function resolveStepMinutes(stepMinutes: number | undefined): number {
+  if (stepMinutes === undefined || !Number.isFinite(stepMinutes) || stepMinutes <= 0) {
+    return DEFAULT_STEP_MINUTES;
+  }
+
+  return Math.max(1, Math.floor(stepMinutes));
+}
+
+function generateTimeOptions({
+  minTime,
+  maxTime,
+  stepMinutes,
+}: Pick<TimePickerProps, 'maxTime' | 'minTime' | 'stepMinutes'>): string[] {
+  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;
+}
+
+function TimePickerInner({
+  themeId: _themeId,
+  mode: _mode,
+  value,
+  onValueChange,
+  label,
+  description,
+  error,
+  placeholder = 'Choose time',
+  minTime,
+  maxTime,
+  stepMinutes,
+  disabled = false,
+  required = false,
+  formatTime,
+  testID,
+}: TimePickerProps) {
+  const [visible, setVisible] = React.useState(false);
+  const options = React.useMemo(
+    () => generateTimeOptions({ maxTime, minTime, stepMinutes }),
+    [maxTime, minTime, stepMinutes],
+  );
+  const displayValue = value ? (formatTime ? formatTime(value) : value) : placeholder;
+
+  return (
+    <Field
+      disabled={disabled}
+      errorText={error}
+      invalid={Boolean(error)}
+      label={label ? renderLabel(label, description) : undefined}
+      required={required}
+      testID={testID}
+    >
+      <Button
+        disabled={disabled}
+        onPress={() => setVisible(true)}
+        testID={testID ? `${testID}-trigger` : undefined}
+        trailingIcon={{ name: 'chevron-down-outline' }}
+        variant="outline"
+      >
+        {displayValue}
+      </Button>
+      <ActionSheet
+        description={description}
+        onDismiss={() => setVisible(false)}
+        testID={testID ? `${testID}-sheet` : undefined}
+        title={label ?? 'Choose time'}
+        visible={visible}
+      >
+        <ScrollView style={{ maxHeight: 360 }}>
+          <Stack gap="xxs">
+            {options.map((option) => (
+              <ActionSheetItem
+                key={option}
+                label={formatTime ? formatTime(option) : option}
+                onPress={() => {
+                  onValueChange?.(option);
+                  setVisible(false);
+                }}
+                selected={option === value}
+                testID={testID ? `${testID}-option-${option}` : undefined}
+              />
+            ))}
+          </Stack>
+        </ScrollView>
+      </ActionSheet>
+    </Field>
+  );
+}
+
+export const TimePicker = withZoraThemeScope(TimePickerInner);

package/src/components/time-picker/index.ts

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

package/src/components/time-picker/meta.ts

@@ -0,0 +1,10 @@
+import type { ZoraComponentMeta } from '../../metadata';
+
+export const timePickerMeta = {
+  name: 'TimePicker',
+  category: 'component',
+  directManifestNode: false,
+  allowedChildren: [],
+  note: 'Code-facing ActionSheet-backed time picker; not represented as a manifest node in v1.',
+  props: {},
+} as const satisfies ZoraComponentMeta;

package/src/components/time-picker/types.ts

@@ -0,0 +1,21 @@
+import type React from 'react';
+
+import type { ZoraBaseProps } from '../../theme/ZoraBaseProps';
+
+export type TimePickerValue = string | null;
+
+export interface TimePickerProps extends ZoraBaseProps {
+  value: TimePickerValue;
+  onValueChange?: (value: TimePickerValue) => void;
+  label?: React.ReactNode;
+  description?: React.ReactNode;
+  error?: React.ReactNode;
+  placeholder?: React.ReactNode;
+  minTime?: string;
+  maxTime?: string;
+  stepMinutes?: number;
+  disabled?: boolean;
+  required?: boolean;
+  formatTime?: (value: string) => React.ReactNode;
+  testID?: string;
+}

package/src/index.ts

@@ -35,6 +35,8 @@ export type {
   DataTableSortState,
 } from './components/data-table';
 export { DataTable } from './components/data-table';
+export type { DatePickerProps, DatePickerValue } from './components/date-picker';
+export { DatePicker } from './components/date-picker';
 export type { DrawerProps } from './components/drawer';
 export { Drawer } from './components/drawer';
 export type {
@@ -132,6 +134,8 @@ export type {
 export { Text } from './components/text';
 export type { TextareaProps } from './components/textarea';
 export { Textarea } from './components/textarea';
+export type { TimePickerProps, TimePickerValue } from './components/time-picker';
+export { TimePicker } from './components/time-picker';
 export type { ToastOptions, ToastProps, ToastProviderProps, ToastStatus } from './components/toast';
 export { Toast, ToastProvider, useToast } from './components/toast';
 export type { ToolbarActionProps, ToolbarPosition, ToolbarProps } from './components/toolbar';

package/src/metadata/componentMeta.ts

@@ -10,6 +10,7 @@ import { checkboxGroupMeta, checkboxMeta } from '../components/checkbox/meta';
 import { chipMeta } from '../components/chip/meta';
 import { chipGroupMeta } from '../components/chip-group/meta';
 import { dataTableMeta } from '../components/data-table/meta';
+import { datePickerMeta } from '../components/date-picker/meta';
 import { drawerMeta } from '../components/drawer/meta';
 import { formActionsMeta, formErrorMeta, formFieldMeta, formMeta } from '../components/form/meta';
 import { headingMeta } from '../components/heading/meta';
@@ -37,6 +38,7 @@ import {
 import { tabsMeta } from '../components/tabs/meta';
 import { textMeta } from '../components/text/meta';
 import { textareaMeta } from '../components/textarea/meta';
+import { timePickerMeta } from '../components/time-picker/meta';
 import { toastMeta, toastProviderMeta } from '../components/toast/meta';
 import { toolbarActionMeta, toolbarMeta } from '../components/toolbar/meta';
 import { foundationMetas } from '../foundation/meta';
@@ -96,6 +98,7 @@ export const ZORA_COMPONENT_META: ZoraComponentMetaRegistry = {
   Chip: chipMeta,
   ChipGroup: chipGroupMeta,
   DataTable: dataTableMeta,
+  DatePicker: datePickerMeta,
   Drawer: drawerMeta,
   DropdownMenu: dropdownMenuMeta,
   Form: formMeta,
@@ -126,6 +129,7 @@ export const ZORA_COMPONENT_META: ZoraComponentMetaRegistry = {
   Tabs: tabsMeta,
   Text: textMeta,
   Textarea: textareaMeta,
+  TimePicker: timePickerMeta,
   Toast: toastMeta,
   ToastProvider: toastProviderMeta,
   Toolbar: toolbarMeta,