@ankhorage/zora 2.4.4 → 2.4.6

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # Changelog
 
+## 2.4.6
+
+### Patch Changes
+
+- 884095d: Add DatePicker and TimePicker components backed by existing ZORA ActionSheet primitives.
+
+## 2.4.5
+
+### Patch Changes
+
+- 9db4949: Add DataTable for typed app-facing tabular data with row actions, sorting state, loading, empty, and responsive layouts.
+
 ## 2.4.4
 
 ### Patch Changes

package/README.md

@@ -301,6 +301,7 @@ Metadata model overview:
 - `CheckboxGroup`
 - `Chip`
 - `ChipGroup`
+- `DataTable`
 - `DropdownMenu`
 - `Drawer`
 - `Form`
@@ -1131,6 +1132,193 @@ No inherited props. `ChipGroupProps` is declared directly by ZORA.
 
 </details>
 
+### `DataTable`
+
+Typed, app-facing tabular data display for admin lists, dashboards, commerce
+orders, transactions, inventory, reports, moderation queues, bookings, and other
+structured app screens.
+
+`DataTable` is intentionally a ZORA component, not a Surface primitive. Surface
+provides the render foundation. ZORA owns the app-facing table behavior:
+columns, rows, sorting UI, row actions, loading/empty states, and responsive
+mobile fallback.
+
+```tsx
+type Order = {
+  id: string;
+  customer: string;
+  status: 'paid' | 'pending' | 'failed';
+  total: string;
+};
+
+const orders: Order[] = [
+  { id: 'ord-1001', customer: 'Nora Frei', status: 'paid', total: 'CHF 128' },
+  { id: 'ord-1002', customer: 'Mika Baumann', status: 'pending', total: 'CHF 64' },
+];
+
+<DataTable
+  columns={[
+    { id: 'customer', header: 'Customer', accessor: 'customer', sortable: true },
+    {
+      id: 'status',
+      header: 'Status',
+      renderCell: ({ row }) => (
+        <Badge color={row.status === 'paid' ? 'success' : 'warning'}>{row.status}</Badge>
+      ),
+    },
+    { id: 'total', header: 'Total', accessor: 'total', align: 'end' },
+  ]}
+  rows={orders}
+  rowId={(row) => row.id}
+/>;
+```
+
+Use `rowActions` to attach contextual actions. Row actions are rendered through
+ZORA `DropdownMenu`, so `DataTable` does not invent its own overflow behavior.
+
+```tsx
+<DataTable
+  columns={[
+    { id: 'customer', header: 'Customer', accessor: 'customer' },
+    { id: 'total', header: 'Total', accessor: 'total', align: 'end' },
+  ]}
+  rows={orders}
+  rowId={(row) => row.id}
+  rowActions={(row) => [
+    {
+      id: 'view',
+      title: 'View',
+      icon: { name: 'eye-outline' },
+      onPress: () => viewOrder(row),
+    },
+    {
+      id: 'refund',
+      title: 'Refund',
+      description: 'Start a refund workflow.',
+      icon: { name: 'return-down-back-outline' },
+      intent: 'danger',
+      onPress: () => refundOrder(row),
+    },
+  ]}
+/>
+```
+
+Use controlled sort state when a screen owns sorting:
+
+```tsx
+const [sort, setSort] = React.useState<DataTableSortState>({
+  columnId: 'customer',
+  direction: 'asc',
+});
+
+<DataTable
+  columns={[
+    { id: 'customer', header: 'Customer', accessor: 'customer', sortable: true },
+    { id: 'total', header: 'Total', accessor: 'total', align: 'end', sortable: true },
+  ]}
+  rows={orders}
+  rowId={(row) => row.id}
+  sort={sort}
+  onSortChange={setSort}
+/>;
+```
+
+`DataTable` renders a table-like layout on wider screens and a card/list fallback
+on narrow screens. It supports loading and empty states out of the box:
+
+```tsx
+<DataTable
+  columns={columns}
+  rows={orders}
+  rowId={(row) => row.id}
+  loading={isLoading}
+  loadingRows={6}
+  emptyTitle="No orders"
+  emptyDescription="Orders will appear here when customers check out."
+/>
+```
+
+V1 is intentionally not a spreadsheet or data grid. It does not include
+virtualization, column resizing, column pinning, inline editing, grouped rows,
+nested rows, server-side pagination controllers, or export features.
+
+<details>
+<summary>Props</summary>
+
+`DataTable` props:
+
+| Prop               | Type                                   | Default                           | Notes                                       |
+| ------------------ | -------------------------------------- | --------------------------------- | ------------------------------------------- |
+| `columns`          | `readonly DataTableColumn<TRow>[]`     | -                                 | Column definitions.                         |
+| `rows`             | `readonly TRow[]`                      | -                                 | Row data.                                   |
+| `rowId`            | `(row: TRow, index: number) => string` | -                                 | Stable row id resolver.                     |
+| `rowActions`       | `(row, index) => DataTableRowAction[]` | -                                 | Optional contextual row actions.            |
+| `sort`             | `DataTableSortState`                   | -                                 | Controlled sort state.                      |
+| `onSortChange`     | `(sort: DataTableSortState) => void`   | -                                 | Called when a sortable header is activated. |
+| `loading`          | `boolean`                              | `false`                           | Shows loading placeholders.                 |
+| `loadingRows`      | `number`                               | `5`                               | Placeholder row count while loading.        |
+| `emptyTitle`       | `React.ReactNode`                      | `'No data'`                       | Empty-state title.                          |
+| `emptyDescription` | `React.ReactNode`                      | `'There are no rows to display.'` | Empty-state description.                    |
+| `density`          | `DataTableDensity`                     | `'comfortable'`                   | Row density: `comfortable` or `compact`.    |
+| `testID`           | `string`                               | -                                 | Test id.                                    |
+| `mode`             | `ZoraThemeMode`                        | -                                 | Optional scoped theme mode override.        |
+| `themeId`          | `ZoraThemeId`                          | -                                 | Optional scoped theme id override.          |
+
+`DataTableColumn<TRow>` fields:
+
+| Field        | Type                                                       | Default | Notes                                      |
+| ------------ | ---------------------------------------------------------- | ------- | ------------------------------------------ |
+| `id`         | `string`                                                   | -       | Stable column id.                          |
+| `header`     | `React.ReactNode`                                          | -       | Header label.                              |
+| `accessor`   | `keyof TRow`                                               | -       | Reads a primitive/date value from the row. |
+| `align`      | `DataTableColumnAlign`                                     | `start` | Cell alignment.                            |
+| `width`      | `number`                                                   | -       | Fixed column width.                        |
+| `minWidth`   | `number`                                                   | `140`   | Minimum column width.                      |
+| `sortable`   | `boolean`                                                  | `false` | Enables sort header behavior.              |
+| `renderCell` | `(context: DataTableCellContext<TRow>) => React.ReactNode` | -       | Custom cell rendering.                     |
+
+`DataTableCellContext<TRow>` fields:
+
+| Field      | Type                    | Notes                         |
+| ---------- | ----------------------- | ----------------------------- |
+| `row`      | `TRow`                  | Current row.                  |
+| `rowIndex` | `number`                | Current row index.            |
+| `column`   | `DataTableColumn<TRow>` | Current column.               |
+| `value`    | `unknown`               | Accessor value, when present. |
+
+`DataTableRowAction<TRow>` fields:
+
+| Field         | Type                  | Default | Notes                                        |
+| ------------- | --------------------- | ------- | -------------------------------------------- |
+| `id`          | `string`              | -       | Stable action id.                            |
+| `title`       | `React.ReactNode`     | -       | Action label.                                |
+| `description` | `React.ReactNode`     | -       | Optional secondary text.                     |
+| `icon`        | `ButtonIconSpec`      | -       | Optional action icon.                        |
+| `intent`      | `MenuActionIntent`    | -       | Action intent, currently `default`/`danger`. |
+| `disabled`    | `boolean`             | `false` | Disables the action.                         |
+| `onPress`     | `(row: TRow) => void` | -       | Called with the row when selected.           |
+
+Type aliases:
+
+```ts
+type DataTableColumnAlign = 'start' | 'center' | 'end';
+type DataTableDensity = 'comfortable' | 'compact';
+type DataTableSortDirection = 'asc' | 'desc';
+
+interface DataTableSortState {
+  columnId: string;
+  direction: DataTableSortDirection;
+}
+```
+
+Default cell rendering:
+
+- `string`, `number`, `boolean`, `bigint`, and `Date` values render automatically.
+- `null` / `undefined` render as `—`.
+- Structured values render as `—` unless `renderCell` is provided.
+
+</details>
+
 ### `Textarea`
 
 Multiline text input wrapper with ZORA sizing and optional Surface icon specs.

package/dist/components/data-table/DataTable.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import type { DataTableProps } from './types';
+export declare const DataTable: <TRow extends object>(props: DataTableProps<TRow>) => React.ReactElement | null;
+//# sourceMappingURL=DataTable.d.ts.map

package/dist/components/data-table/DataTable.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataTable.d.ts","sourceRoot":"","sources":["../../../src/components/data-table/DataTable.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAY1B,OAAO,KAAK,EAKV,cAAc,EAGf,MAAM,SAAS,CAAC;AA+WjB,eAAO,MAAM,SAAS,GAxCE,IAAI,SAAS,MAAM,2DAwCgB,CAAC"}

package/dist/components/data-table/DataTable.js

@@ -0,0 +1,207 @@
+import React from 'react';
+import { ScrollView } from 'react-native';
+import { Box, Show, Stack } from '../../foundation';
+import { EmptyState } from '../../patterns/empty-state';
+import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
+import { Button } from '../button';
+import { Card } from '../card';
+import { IconButton } from '../icon-button';
+import { DropdownMenu } from '../menu';
+import { SkeletonList } from '../skeleton';
+import { Text } from '../text';
+function resolveTextAlign(align) {
+    switch (align) {
+        case 'center':
+            return 'center';
+        case 'end':
+            return 'right';
+        case 'start':
+        default:
+            return 'left';
+    }
+}
+function resolveCellJustify(align) {
+    switch (align) {
+        case 'center':
+            return 'center';
+        case 'end':
+            return 'flex-end';
+        case 'start':
+        default:
+            return 'flex-start';
+    }
+}
+function resolveCellStyle(column) {
+    return {
+        alignItems: resolveCellJustify(column.align),
+        flexGrow: column.width === undefined ? 1 : 0,
+        flexShrink: 0,
+        minWidth: column.minWidth ?? 140,
+        width: column.width,
+    };
+}
+function resolveRowPadding(density) {
+    return density === 'compact'
+        ? { px: 'm', py: 's' }
+        : { px: 'm', py: 'm' };
+}
+function resolveAccessorValue(row, column) {
+    if (column.accessor === undefined) {
+        return undefined;
+    }
+    return row[column.accessor];
+}
+function renderDefaultCell(value) {
+    if (value === null || value === undefined) {
+        return '—';
+    }
+    if (typeof value === 'string' || typeof value === 'number' || typeof value === 'boolean') {
+        return String(value);
+    }
+    if (typeof value === 'bigint') {
+        return value.toString();
+    }
+    if (value instanceof Date) {
+        return value.toLocaleDateString();
+    }
+    return '—';
+}
+function createCellContext(column, row, rowIndex) {
+    return {
+        column,
+        row,
+        rowIndex,
+        value: resolveAccessorValue(row, column),
+    };
+}
+function renderCell(column, row, rowIndex) {
+    const context = createCellContext(column, row, rowIndex);
+    return column.renderCell ? column.renderCell(context) : renderDefaultCell(context.value);
+}
+function renderTableCell(column, row, rowIndex) {
+    if (column.renderCell) {
+        return column.renderCell(createCellContext(column, row, rowIndex));
+    }
+    return (<Text align={resolveTextAlign(column.align)} variant="bodySmall">
+      {renderDefaultCell(resolveAccessorValue(row, column))}
+    </Text>);
+}
+function resolveNextSortDirection(current) {
+    return current === 'asc' ? 'desc' : 'asc';
+}
+function mapRowActions(row, actions) {
+    return actions.map((action) => ({
+        description: action.description,
+        disabled: action.disabled,
+        icon: action.icon,
+        id: action.id,
+        intent: action.intent,
+        onPress: action.onPress ? () => action.onPress?.(row) : undefined,
+        title: action.title,
+    }));
+}
+function renderRowActions({ row, rowIndex, rowActions, testID, }) {
+    const actions = rowActions?.(row, rowIndex) ?? [];
+    if (actions.length === 0) {
+        return null;
+    }
+    return (<DropdownMenu actions={mapRowActions(row, actions)} trigger={<IconButton icon={{ name: 'ellipsis-horizontal' }} label="Row actions" size="s" variant="ghost"/>} testID={testID ? `${testID}-row-actions-${rowIndex}` : undefined}/>);
+}
+function DataTableHeader({ columns, sort, onSortChange, density, }) {
+    const padding = resolveRowPadding(density ?? 'comfortable');
+    return (<Box bg="subtle" borderColor="border" borderWidth={1} radius="m">
+      <Stack direction="row" align="center">
+        {columns.map((column) => {
+            const currentDirection = sort?.columnId === column.id ? sort.direction : undefined;
+            const sortable = Boolean(column.sortable && onSortChange);
+            const directionLabel = currentDirection === undefined ? '' : currentDirection === 'asc' ? ' ↑' : ' ↓';
+            return (<Box key={column.id} px={padding.px} py={padding.py} style={resolveCellStyle(column)}>
+              {sortable ? (<Button color="primary" onPress={() => onSortChange?.({
+                        columnId: column.id,
+                        direction: resolveNextSortDirection(currentDirection),
+                    })} size="s" variant="ghost">
+                  {column.header}
+                  {directionLabel}
+                </Button>) : (<Text align={resolveTextAlign(column.align)} emphasis="muted" variant="caption" weight="semiBold">
+                  {column.header}
+                </Text>)}
+            </Box>);
+        })}
+        <Box px={padding.px} py={padding.py} style={{ minWidth: 56, width: 56 }}>
+          <Text align="right" emphasis="muted" variant="caption" weight="semiBold">
+            Actions
+          </Text>
+        </Box>
+      </Stack>
+    </Box>);
+}
+function DataTableDesktop({ columns, rows, rowActions, rowId, sort, onSortChange, density, testID, }) {
+    const padding = resolveRowPadding(density ?? 'comfortable');
+    return (<ScrollView horizontal showsHorizontalScrollIndicator={false}>
+      <Box minWidth={720} style={{ width: '100%' }}>
+        <Stack gap="xs">
+          <DataTableHeader columns={columns} density={density} onSortChange={onSortChange} sort={sort}/>
+          <Stack gap="xs">
+            {rows.map((row, rowIndex) => (<Box bg="surface" borderColor="border" borderWidth={1} key={rowId(row, rowIndex)} radius="m" testID={testID ? `${testID}-row-${rowIndex}` : undefined}>
+                <Stack direction="row" align="center">
+                  {columns.map((column) => (<Box key={column.id} px={padding.px} py={padding.py} style={resolveCellStyle(column)}>
+                      {renderTableCell(column, row, rowIndex)}
+                    </Box>))}
+                  <Box px={padding.px} py={padding.py} style={{ alignItems: 'flex-end', minWidth: 56, width: 56 }}>
+                    {renderRowActions({ row, rowActions, rowIndex, testID })}
+                  </Box>
+                </Stack>
+              </Box>))}
+          </Stack>
+        </Stack>
+      </Box>
+    </ScrollView>);
+}
+function DataTableMobile({ columns, rows, rowActions, rowId, testID, }) {
+    const [primaryColumn, ...detailColumns] = columns;
+    return (<Stack gap="s">
+      {rows.map((row, rowIndex) => {
+            const title = primaryColumn
+                ? renderCell(primaryColumn, row, rowIndex)
+                : `Row ${rowIndex + 1}`;
+            const actions = renderRowActions({ row, rowActions, rowIndex, testID });
+            return (<Card actions={actions} compact key={rowId(row, rowIndex)} testID={testID ? `${testID}-card-${rowIndex}` : undefined} title={title}>
+            <Stack gap="s">
+              {detailColumns.map((column) => (<Stack gap="xxs" key={column.id}>
+                  <Text emphasis="muted" variant="caption" weight="semiBold">
+                    {column.header}
+                  </Text>
+                  {column.renderCell ? (renderCell(column, row, rowIndex)) : (<Text variant="bodySmall">
+                      {renderDefaultCell(resolveAccessorValue(row, column))}
+                    </Text>)}
+                </Stack>))}
+            </Stack>
+          </Card>);
+        })}
+    </Stack>);
+}
+function DataTableInner({ themeId: _themeId, mode: _mode, rows, loading = false, loadingRows = 5, emptyTitle = 'No data', emptyDescription = 'There are no rows to display.', testID, density = 'comfortable', ...props }) {
+    if (loading) {
+        return <SkeletonList rows={loadingRows} variant="card" testID={testID}/>;
+    }
+    if (rows.length === 0) {
+        return <EmptyState title={emptyTitle} description={emptyDescription}/>;
+    }
+    const tableProps = {
+        ...props,
+        density,
+        emptyDescription,
+        emptyTitle,
+        loading,
+        loadingRows,
+        rows,
+        testID,
+    };
+    return (<Box testID={testID}>
+      <Show when={{ base: false, md: true }} fallback={<DataTableMobile {...tableProps}/>}>
+        <DataTableDesktop {...tableProps}/>
+      </Show>
+    </Box>);
+}
+export const DataTable = withZoraThemeScope(DataTableInner);
+//# sourceMappingURL=DataTable.js.map

package/dist/components/data-table/DataTable.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataTable.js","sourceRoot":"","sources":["../../../src/components/data-table/DataTable.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from 'react';\nimport { ScrollView, type ViewStyle } from 'react-native';\n\nimport { Box, Show, Stack } from '../../foundation';\nimport { EmptyState } from '../../patterns/empty-state';\nimport { withZoraThemeScope } from '../../theme/withZoraThemeScope';\nimport { Button } from '../button';\nimport { Card } from '../card';\nimport { IconButton } from '../icon-button';\nimport { DropdownMenu, type MenuAction } from '../menu';\nimport { SkeletonList } from '../skeleton';\nimport { Text, type TextAlign } from '../text';\nimport type {\n  DataTableCellContext,\n  DataTableColumn,\n  DataTableColumnAlign,\n  DataTableDensity,\n  DataTableProps,\n  DataTableRowAction,\n  DataTableSortDirection,\n} from './types';\n\nfunction resolveTextAlign(align: DataTableColumnAlign | undefined): TextAlign {\n  switch (align) {\n    case 'center':\n      return 'center';\n    case 'end':\n      return 'right';\n    case 'start':\n    default:\n      return 'left';\n  }\n}\n\nfunction resolveCellJustify(align: DataTableColumnAlign | undefined): ViewStyle['alignItems'] {\n  switch (align) {\n    case 'center':\n      return 'center';\n    case 'end':\n      return 'flex-end';\n    case 'start':\n    default:\n      return 'flex-start';\n  }\n}\n\nfunction resolveCellStyle<TRow extends object>(column: DataTableColumn<TRow>): ViewStyle {\n  return {\n    alignItems: resolveCellJustify(column.align),\n    flexGrow: column.width === undefined ? 1 : 0,\n    flexShrink: 0,\n    minWidth: column.minWidth ?? 140,\n    width: column.width,\n  };\n}\n\nfunction resolveRowPadding(density: DataTableDensity) {\n  return density === 'compact'\n    ? { px: 'm' as const, py: 's' as const }\n    : { px: 'm' as const, py: 'm' as const };\n}\n\nfunction resolveAccessorValue<TRow extends object>(row: TRow, column: DataTableColumn<TRow>) {\n  if (column.accessor === undefined) {\n    return undefined;\n  }\n\n  return row[column.accessor];\n}\n\nfunction renderDefaultCell(value: unknown): React.ReactNode {\n  if (value === null || value === undefined) {\n    return '—';\n  }\n\n  if (typeof value === 'string' || typeof value === 'number' || typeof value === 'boolean') {\n    return String(value);\n  }\n\n  if (typeof value === 'bigint') {\n    return value.toString();\n  }\n\n  if (value instanceof Date) {\n    return value.toLocaleDateString();\n  }\n\n  return '—';\n}\n\nfunction createCellContext<TRow extends object>(\n  column: DataTableColumn<TRow>,\n  row: TRow,\n  rowIndex: number,\n): DataTableCellContext<TRow> {\n  return {\n    column,\n    row,\n    rowIndex,\n    value: resolveAccessorValue(row, column),\n  };\n}\n\nfunction renderCell<TRow extends object>(\n  column: DataTableColumn<TRow>,\n  row: TRow,\n  rowIndex: number,\n) {\n  const context = createCellContext(column, row, rowIndex);\n  return column.renderCell ? column.renderCell(context) : renderDefaultCell(context.value);\n}\n\nfunction renderTableCell<TRow extends object>(\n  column: DataTableColumn<TRow>,\n  row: TRow,\n  rowIndex: number,\n) {\n  if (column.renderCell) {\n    return column.renderCell(createCellContext(column, row, rowIndex));\n  }\n\n  return (\n    <Text align={resolveTextAlign(column.align)} variant=\"bodySmall\">\n      {renderDefaultCell(resolveAccessorValue(row, column))}\n    </Text>\n  );\n}\n\nfunction resolveNextSortDirection(\n  current: DataTableSortDirection | undefined,\n): DataTableSortDirection {\n  return current === 'asc' ? 'desc' : 'asc';\n}\n\nfunction mapRowActions<TRow extends object>(\n  row: TRow,\n  actions: readonly DataTableRowAction<TRow>[],\n): readonly MenuAction[] {\n  return actions.map((action) => ({\n    description: action.description,\n    disabled: action.disabled,\n    icon: action.icon,\n    id: action.id,\n    intent: action.intent,\n    onPress: action.onPress ? () => action.onPress?.(row) : undefined,\n    title: action.title,\n  }));\n}\n\nfunction renderRowActions<TRow extends object>({\n  row,\n  rowIndex,\n  rowActions,\n  testID,\n}: {\n  row: TRow;\n  rowIndex: number;\n  rowActions: DataTableProps<TRow>['rowActions'];\n  testID?: string;\n}) {\n  const actions = rowActions?.(row, rowIndex) ?? [];\n\n  if (actions.length === 0) {\n    return null;\n  }\n\n  return (\n    <DropdownMenu\n      actions={mapRowActions(row, actions)}\n      trigger={\n        <IconButton\n          icon={{ name: 'ellipsis-horizontal' }}\n          label=\"Row actions\"\n          size=\"s\"\n          variant=\"ghost\"\n        />\n      }\n      testID={testID ? `${testID}-row-actions-${rowIndex}` : undefined}\n    />\n  );\n}\n\nfunction DataTableHeader<TRow extends object>({\n  columns,\n  sort,\n  onSortChange,\n  density,\n}: Pick<DataTableProps<TRow>, 'columns' | 'density' | 'onSortChange' | 'sort'>) {\n  const padding = resolveRowPadding(density ?? 'comfortable');\n\n  return (\n    <Box bg=\"subtle\" borderColor=\"border\" borderWidth={1} radius=\"m\">\n      <Stack direction=\"row\" align=\"center\">\n        {columns.map((column) => {\n          const currentDirection = sort?.columnId === column.id ? sort.direction : undefined;\n          const sortable = Boolean(column.sortable && onSortChange);\n          const directionLabel =\n            currentDirection === undefined ? '' : currentDirection === 'asc' ? ' ↑' : ' ↓';\n\n          return (\n            <Box key={column.id} px={padding.px} py={padding.py} style={resolveCellStyle(column)}>\n              {sortable ? (\n                <Button\n                  color=\"primary\"\n                  onPress={() =>\n                    onSortChange?.({\n                      columnId: column.id,\n                      direction: resolveNextSortDirection(currentDirection),\n                    })\n                  }\n                  size=\"s\"\n                  variant=\"ghost\"\n                >\n                  {column.header}\n                  {directionLabel}\n                </Button>\n              ) : (\n                <Text\n                  align={resolveTextAlign(column.align)}\n                  emphasis=\"muted\"\n                  variant=\"caption\"\n                  weight=\"semiBold\"\n                >\n                  {column.header}\n                </Text>\n              )}\n            </Box>\n          );\n        })}\n        <Box px={padding.px} py={padding.py} style={{ minWidth: 56, width: 56 }}>\n          <Text align=\"right\" emphasis=\"muted\" variant=\"caption\" weight=\"semiBold\">\n            Actions\n          </Text>\n        </Box>\n      </Stack>\n    </Box>\n  );\n}\n\nfunction DataTableDesktop<TRow extends object>({\n  columns,\n  rows,\n  rowActions,\n  rowId,\n  sort,\n  onSortChange,\n  density,\n  testID,\n}: DataTableProps<TRow>) {\n  const padding = resolveRowPadding(density ?? 'comfortable');\n\n  return (\n    <ScrollView horizontal showsHorizontalScrollIndicator={false}>\n      <Box minWidth={720} style={{ width: '100%' }}>\n        <Stack gap=\"xs\">\n          <DataTableHeader\n            columns={columns}\n            density={density}\n            onSortChange={onSortChange}\n            sort={sort}\n          />\n          <Stack gap=\"xs\">\n            {rows.map((row, rowIndex) => (\n              <Box\n                bg=\"surface\"\n                borderColor=\"border\"\n                borderWidth={1}\n                key={rowId(row, rowIndex)}\n                radius=\"m\"\n                testID={testID ? `${testID}-row-${rowIndex}` : undefined}\n              >\n                <Stack direction=\"row\" align=\"center\">\n                  {columns.map((column) => (\n                    <Box\n                      key={column.id}\n                      px={padding.px}\n                      py={padding.py}\n                      style={resolveCellStyle(column)}\n                    >\n                      {renderTableCell(column, row, rowIndex)}\n                    </Box>\n                  ))}\n                  <Box\n                    px={padding.px}\n                    py={padding.py}\n                    style={{ alignItems: 'flex-end', minWidth: 56, width: 56 }}\n                  >\n                    {renderRowActions({ row, rowActions, rowIndex, testID })}\n                  </Box>\n                </Stack>\n              </Box>\n            ))}\n          </Stack>\n        </Stack>\n      </Box>\n    </ScrollView>\n  );\n}\n\nfunction DataTableMobile<TRow extends object>({\n  columns,\n  rows,\n  rowActions,\n  rowId,\n  testID,\n}: DataTableProps<TRow>) {\n  const [primaryColumn, ...detailColumns] = columns;\n\n  return (\n    <Stack gap=\"s\">\n      {rows.map((row, rowIndex) => {\n        const title = primaryColumn\n          ? renderCell(primaryColumn, row, rowIndex)\n          : `Row ${rowIndex + 1}`;\n        const actions = renderRowActions({ row, rowActions, rowIndex, testID });\n\n        return (\n          <Card\n            actions={actions}\n            compact\n            key={rowId(row, rowIndex)}\n            testID={testID ? `${testID}-card-${rowIndex}` : undefined}\n            title={title}\n          >\n            <Stack gap=\"s\">\n              {detailColumns.map((column) => (\n                <Stack gap=\"xxs\" key={column.id}>\n                  <Text emphasis=\"muted\" variant=\"caption\" weight=\"semiBold\">\n                    {column.header}\n                  </Text>\n                  {column.renderCell ? (\n                    renderCell(column, row, rowIndex)\n                  ) : (\n                    <Text variant=\"bodySmall\">\n                      {renderDefaultCell(resolveAccessorValue(row, column))}\n                    </Text>\n                  )}\n                </Stack>\n              ))}\n            </Stack>\n          </Card>\n        );\n      })}\n    </Stack>\n  );\n}\n\nfunction DataTableInner<TRow extends object>({\n  themeId: _themeId,\n  mode: _mode,\n  rows,\n  loading = false,\n  loadingRows = 5,\n  emptyTitle = 'No data',\n  emptyDescription = 'There are no rows to display.',\n  testID,\n  density = 'comfortable',\n  ...props\n}: DataTableProps<TRow>) {\n  if (loading) {\n    return <SkeletonList rows={loadingRows} variant=\"card\" testID={testID} />;\n  }\n\n  if (rows.length === 0) {\n    return <EmptyState title={emptyTitle} description={emptyDescription} />;\n  }\n\n  const tableProps: DataTableProps<TRow> = {\n    ...props,\n    density,\n    emptyDescription,\n    emptyTitle,\n    loading,\n    loadingRows,\n    rows,\n    testID,\n  };\n\n  return (\n    <Box testID={testID}>\n      <Show when={{ base: false, md: true }} fallback={<DataTableMobile {...tableProps} />}>\n        <DataTableDesktop {...tableProps} />\n      </Show>\n    </Box>\n  );\n}\n\nexport const DataTable = withZoraThemeScope(DataTableInner);\n"]}

package/dist/components/data-table/index.d.ts

@@ -0,0 +1,3 @@
+export { DataTable } from './DataTable';
+export type { DataTableCellContext, DataTableColumn, DataTableColumnAlign, DataTableDensity, DataTableProps, DataTableRowAction, DataTableSortDirection, DataTableSortState, } from './types';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/data-table/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/data-table/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,YAAY,EACV,oBAAoB,EACpB,eAAe,EACf,oBAAoB,EACpB,gBAAgB,EAChB,cAAc,EACd,kBAAkB,EAClB,sBAAsB,EACtB,kBAAkB,GACnB,MAAM,SAAS,CAAC"}

package/dist/components/data-table/index.js

@@ -0,0 +1,2 @@
+export { DataTable } from './DataTable';
+//# sourceMappingURL=index.js.map

package/dist/components/data-table/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/data-table/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC","sourcesContent":["export { DataTable } from './DataTable';\nexport type {\n  DataTableCellContext,\n  DataTableColumn,\n  DataTableColumnAlign,\n  DataTableDensity,\n  DataTableProps,\n  DataTableRowAction,\n  DataTableSortDirection,\n  DataTableSortState,\n} from './types';\n"]}

package/dist/components/data-table/meta.d.ts

@@ -0,0 +1,9 @@
+export declare const dataTableMeta: {
+    readonly name: "DataTable";
+    readonly category: "component";
+    readonly directManifestNode: false;
+    readonly allowedChildren: readonly [];
+    readonly note: "Code-facing typed data table component; not represented as a manifest node in v1.";
+    readonly props: {};
+};
+//# sourceMappingURL=meta.d.ts.map

package/dist/components/data-table/meta.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"meta.d.ts","sourceRoot":"","sources":["../../../src/components/data-table/meta.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,aAAa;;;;;;;CAOY,CAAC"}

package/dist/components/data-table/meta.js

@@ -0,0 +1,9 @@
+export const dataTableMeta = {
+    name: 'DataTable',
+    category: 'component',
+    directManifestNode: false,
+    allowedChildren: [],
+    note: 'Code-facing typed data table component; not represented as a manifest node in v1.',
+    props: {},
+};
+//# sourceMappingURL=meta.js.map

package/dist/components/data-table/meta.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"meta.js","sourceRoot":"","sources":["../../../src/components/data-table/meta.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,aAAa,GAAG;IAC3B,IAAI,EAAE,WAAW;IACjB,QAAQ,EAAE,WAAW;IACrB,kBAAkB,EAAE,KAAK;IACzB,eAAe,EAAE,EAAE;IACnB,IAAI,EAAE,mFAAmF;IACzF,KAAK,EAAE,EAAE;CAC2B,CAAC","sourcesContent":["import type { ZoraComponentMeta } from '../../metadata';\n\nexport const dataTableMeta = {\n  name: 'DataTable',\n  category: 'component',\n  directManifestNode: false,\n  allowedChildren: [],\n  note: 'Code-facing typed data table component; not represented as a manifest node in v1.',\n  props: {},\n} as const satisfies ZoraComponentMeta;\n"]}

package/dist/components/data-table/types.d.ts

@@ -0,0 +1,51 @@
+import type { ButtonIconSpec } from '@ankhorage/surface';
+import type React from 'react';
+import type { ZoraBaseProps } from '../../theme/ZoraBaseProps';
+import type { MenuActionIntent } from '../menu';
+export type DataTableColumnAlign = 'start' | 'center' | 'end';
+export type DataTableDensity = 'comfortable' | 'compact';
+export type DataTableSortDirection = 'asc' | 'desc';
+export interface DataTableSortState {
+    columnId: string;
+    direction: DataTableSortDirection;
+}
+export interface DataTableCellContext<TRow extends object> {
+    row: TRow;
+    rowIndex: number;
+    column: DataTableColumn<TRow>;
+    value: unknown;
+}
+export interface DataTableColumn<TRow extends object> {
+    id: string;
+    header: React.ReactNode;
+    accessor?: keyof TRow;
+    align?: DataTableColumnAlign;
+    width?: number;
+    minWidth?: number;
+    sortable?: boolean;
+    renderCell?: (context: DataTableCellContext<TRow>) => React.ReactNode;
+}
+export interface DataTableRowAction<TRow extends object> {
+    id: string;
+    title: React.ReactNode;
+    description?: React.ReactNode;
+    icon?: ButtonIconSpec;
+    intent?: MenuActionIntent;
+    disabled?: boolean;
+    onPress?: (row: TRow) => void;
+}
+export interface DataTableProps<TRow extends object> extends ZoraBaseProps {
+    columns: readonly DataTableColumn<TRow>[];
+    rows: readonly TRow[];
+    rowId: (row: TRow, index: number) => string;
+    rowActions?: (row: TRow, index: number) => readonly DataTableRowAction<TRow>[];
+    sort?: DataTableSortState;
+    onSortChange?: (sort: DataTableSortState) => void;
+    loading?: boolean;
+    loadingRows?: number;
+    emptyTitle?: React.ReactNode;
+    emptyDescription?: React.ReactNode;
+    density?: DataTableDensity;
+    testID?: string;
+}
+//# sourceMappingURL=types.d.ts.map

package/dist/components/data-table/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/data-table/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AACzD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAC/D,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAEhD,MAAM,MAAM,oBAAoB,GAAG,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC;AAC9D,MAAM,MAAM,gBAAgB,GAAG,aAAa,GAAG,SAAS,CAAC;AACzD,MAAM,MAAM,sBAAsB,GAAG,KAAK,GAAG,MAAM,CAAC;AAEpD,MAAM,WAAW,kBAAkB;IACjC,QAAQ,EAAE,MAAM,CAAC;IACjB,SAAS,EAAE,sBAAsB,CAAC;CACnC;AAED,MAAM,WAAW,oBAAoB,CAAC,IAAI,SAAS,MAAM;IACvD,GAAG,EAAE,IAAI,CAAC;IACV,QAAQ,EAAE,MAAM,CAAC;IACjB,MAAM,EAAE,eAAe,CAAC,IAAI,CAAC,CAAC;IAC9B,KAAK,EAAE,OAAO,CAAC;CAChB;AAED,MAAM,WAAW,eAAe,CAAC,IAAI,SAAS,MAAM;IAClD,EAAE,EAAE,MAAM,CAAC;IACX,MAAM,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,KAAK,CAAC,EAAE,oBAAoB,CAAC;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,CAAC,OAAO,EAAE,oBAAoB,CAAC,IAAI,CAAC,KAAK,KAAK,CAAC,SAAS,CAAC;CACvE;AAED,MAAM,WAAW,kBAAkB,CAAC,IAAI,SAAS,MAAM;IACrD,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,IAAI,CAAC,EAAE,cAAc,CAAC;IACtB,MAAM,CAAC,EAAE,gBAAgB,CAAC;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,CAAC,GAAG,EAAE,IAAI,KAAK,IAAI,CAAC;CAC/B;AAED,MAAM,WAAW,cAAc,CAAC,IAAI,SAAS,MAAM,CAAE,SAAQ,aAAa;IACxE,OAAO,EAAE,SAAS,eAAe,CAAC,IAAI,CAAC,EAAE,CAAC;IAC1C,IAAI,EAAE,SAAS,IAAI,EAAE,CAAC;IACtB,KAAK,EAAE,CAAC,GAAG,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IAC5C,UAAU,CAAC,EAAE,CAAC,GAAG,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,KAAK,SAAS,kBAAkB,CAAC,IAAI,CAAC,EAAE,CAAC;IAC/E,IAAI,CAAC,EAAE,kBAAkB,CAAC;IAC1B,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,kBAAkB,KAAK,IAAI,CAAC;IAClD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B,gBAAgB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACnC,OAAO,CAAC,EAAE,gBAAgB,CAAC;IAC3B,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB"}

package/dist/components/data-table/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/dist/components/data-table/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/components/data-table/types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ButtonIconSpec } from '@ankhorage/surface';\nimport type React from 'react';\n\nimport type { ZoraBaseProps } from '../../theme/ZoraBaseProps';\nimport type { MenuActionIntent } from '../menu';\n\nexport type DataTableColumnAlign = 'start' | 'center' | 'end';\nexport type DataTableDensity = 'comfortable' | 'compact';\nexport type DataTableSortDirection = 'asc' | 'desc';\n\nexport interface DataTableSortState {\n  columnId: string;\n  direction: DataTableSortDirection;\n}\n\nexport interface DataTableCellContext<TRow extends object> {\n  row: TRow;\n  rowIndex: number;\n  column: DataTableColumn<TRow>;\n  value: unknown;\n}\n\nexport interface DataTableColumn<TRow extends object> {\n  id: string;\n  header: React.ReactNode;\n  accessor?: keyof TRow;\n  align?: DataTableColumnAlign;\n  width?: number;\n  minWidth?: number;\n  sortable?: boolean;\n  renderCell?: (context: DataTableCellContext<TRow>) => React.ReactNode;\n}\n\nexport interface DataTableRowAction<TRow extends object> {\n  id: string;\n  title: React.ReactNode;\n  description?: React.ReactNode;\n  icon?: ButtonIconSpec;\n  intent?: MenuActionIntent;\n  disabled?: boolean;\n  onPress?: (row: TRow) => void;\n}\n\nexport interface DataTableProps<TRow extends object> extends ZoraBaseProps {\n  columns: readonly DataTableColumn<TRow>[];\n  rows: readonly TRow[];\n  rowId: (row: TRow, index: number) => string;\n  rowActions?: (row: TRow, index: number) => readonly DataTableRowAction<TRow>[];\n  sort?: DataTableSortState;\n  onSortChange?: (sort: DataTableSortState) => void;\n  loading?: boolean;\n  loadingRows?: number;\n  emptyTitle?: React.ReactNode;\n  emptyDescription?: React.ReactNode;\n  density?: DataTableDensity;\n  testID?: string;\n}\n"]}

package/dist/components/date-picker/DatePicker.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import type { DatePickerProps } from './types';
+export declare const DatePicker: (props: DatePickerProps) => React.ReactElement | null;
+//# sourceMappingURL=DatePicker.d.ts.map

package/dist/components/date-picker/DatePicker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DatePicker.d.ts","sourceRoot":"","sources":["../../../src/components/date-picker/DatePicker.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAyO/C,eAAO,MAAM,UAAU,uDAAsC,CAAC"}