@ankhorage/zora 2.4.3 → 2.4.5

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # Changelog
 
+## 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
+
+- 50c9679: Expose Surface-backed Menu, DropdownMenu, ActionSheet, and ActionSheetItem components.
+
 ## 2.4.3
 
 ### Patch Changes

package/README.md

@@ -288,6 +288,8 @@ Metadata model overview:
 <details>
 <summary>Components</summary>
 
+- `ActionSheet`
+- `ActionSheetItem`
 - `AppBar`
 - `Avatar`
 - `AvatarGroup`
@@ -299,6 +301,7 @@ Metadata model overview:
 - `CheckboxGroup`
 - `Chip`
 - `ChipGroup`
+- `DropdownMenu`
 - `Drawer`
 - `Form`
 - `FormActions`
@@ -1157,6 +1160,158 @@ Surface with the same Surface exclusions and re-exposed values listed for
 
 </details>
 
+### `Menu` / `DropdownMenu` / `ActionSheet`
+
+Action-surface components for overflow actions, row actions, card actions, toolbar
+menus, profile actions, destructive entry points, and mobile-friendly contextual
+action sheets.
+
+`Menu` and `DropdownMenu` expose app-facing action specs while delegating the
+low-level trigger, portal, focus, keyboard, and dismissal behavior to Surface.
+`ActionSheet` and `ActionSheetItem` expose a mobile-friendly contextual action
+surface backed by Surface.
+
+```tsx
+<Menu
+  trigger={<IconButton icon={{ name: 'ellipsis-horizontal' }} label="More actions" />}
+  actions={[
+    {
+      id: 'edit',
+      title: 'Edit',
+      icon: { name: 'create-outline' },
+      onPress: edit,
+    },
+    {
+      id: 'duplicate',
+      title: 'Duplicate',
+      icon: { name: 'copy-outline' },
+      onPress: duplicate,
+    },
+    {
+      id: 'delete',
+      title: 'Delete',
+      description: 'Remove this item permanently.',
+      icon: { name: 'trash-outline' },
+      intent: 'danger',
+      onPress: remove,
+    },
+  ]}
+/>
+```
+
+`DropdownMenu` is an app-facing alias for the same trigger/actions composition:
+
+```tsx
+<DropdownMenu
+  trigger={<Button variant="outline">Sort</Button>}
+  actions={[
+    { id: 'newest', title: 'Newest first', selected: true, onPress: sortNewest },
+    { id: 'oldest', title: 'Oldest first', onPress: sortOldest },
+  ]}
+/>
+```
+
+Use `ActionSheet` for a modal contextual action surface:
+
+```tsx
+<ActionSheet
+  visible={sheetVisible}
+  onDismiss={() => setSheetVisible(false)}
+  title="Project actions"
+  description="Choose what to do with this project."
+>
+  <ActionSheetItem label="Edit" icon={{ name: 'create-outline' }} onPress={edit} />
+  <ActionSheetItem label="Duplicate" icon={{ name: 'copy-outline' }} onPress={duplicate} />
+  <ActionSheetItem
+    color="danger"
+    label="Delete"
+    icon={{ name: 'trash-outline' }}
+    onPress={remove}
+  />
+</ActionSheet>
+```
+
+These components do not own command-palette behavior, nested menus, data-table
+row logic, or global shortcut handling.
+
+<details>
+<summary>Props</summary>
+
+`Menu` / `DropdownMenu` props:
+
+| Prop            | Type                    | Default | Notes                                      |
+| --------------- | ----------------------- | ------- | ------------------------------------------ |
+| `trigger`       | `React.ReactNode`       | -       | Element used to open/close the menu.       |
+| `actions`       | `readonly MenuAction[]` | -       | Structured action rows.                    |
+| `onDismiss`     | `() => void`            | -       | Called when the menu is dismissed.         |
+| `closeOnSelect` | `boolean`               | `true`  | Closes the menu after an action activates. |
+| `testID`        | `string`                | -       | Test id.                                   |
+| `mode`          | `ZoraThemeMode`         | -       | Optional scoped theme mode override.       |
+| `themeId`       | `ZoraThemeId`           | -       | Optional scoped theme id override.         |
+
+`MenuAction` fields:
+
+| Field         | Type               | Default | Notes                                        |
+| ------------- | ------------------ | ------- | -------------------------------------------- |
+| `id`          | `string`           | -       | Stable action id.                            |
+| `title`       | `React.ReactNode`  | -       | Main action label.                           |
+| `description` | `React.ReactNode`  | -       | Optional secondary text.                     |
+| `icon`        | `ButtonIconSpec`   | -       | Convenience icon shortcut.                   |
+| `leading`     | `React.ReactNode`  | -       | Custom leading content. Overrides `icon`.    |
+| `trailing`    | `React.ReactNode`  | -       | Custom trailing content.                     |
+| `intent`      | `MenuActionIntent` | -       | Action intent, currently `default`/`danger`. |
+| `disabled`    | `boolean`          | `false` | Disables the action.                         |
+| `selected`    | `boolean`          | `false` | Marks the action as selected.                |
+| `onPress`     | `() => void`       | -       | Called when the action is selected.          |
+
+`ActionSheet` props:
+
+| Prop              | Type              | Default    | Notes                                      |
+| ----------------- | ----------------- | ---------- | ------------------------------------------ |
+| `visible`         | `boolean`         | -          | Controls sheet visibility.                 |
+| `onDismiss`       | `() => void`      | -          | Called when the sheet is dismissed.        |
+| `title`           | `React.ReactNode` | -          | Optional sheet title.                      |
+| `description`     | `React.ReactNode` | -          | Optional sheet description.                |
+| `children`        | `React.ReactNode` | -          | Usually `ActionSheetItem` children.        |
+| `cancelLabel`     | `React.ReactNode` | `'Cancel'` | Label for the cancel action.               |
+| `closeOnBackdrop` | `boolean`         | `true`     | Dismisses the sheet when backdrop pressed. |
+| `testID`          | `string`          | -          | Test id.                                   |
+| `mode`            | `ZoraThemeMode`   | -          | Optional scoped theme mode override.       |
+| `themeId`         | `ZoraThemeId`     | -          | Optional scoped theme id override.         |
+
+`ActionSheetItem` props:
+
+| Prop          | Type              | Default | Notes                                     |
+| ------------- | ----------------- | ------- | ----------------------------------------- |
+| `label`       | `React.ReactNode` | -       | Main action label.                        |
+| `description` | `React.ReactNode` | -       | Optional secondary text.                  |
+| `icon`        | `ButtonIconSpec`  | -       | Convenience icon shortcut.                |
+| `leading`     | `React.ReactNode` | -       | Custom leading content. Overrides `icon`. |
+| `trailing`    | `React.ReactNode` | -       | Custom trailing content.                  |
+| `color`       | `ZoraColor`       | -       | Semantic action color.                    |
+| `disabled`    | `boolean`         | `false` | Disables the action.                      |
+| `selected`    | `boolean`         | `false` | Marks the action as selected.             |
+| `onPress`     | `() => void`      | -       | Called when the item is pressed.          |
+| `testID`      | `string`          | -       | Test id.                                  |
+| `mode`        | `ZoraThemeMode`   | -       | Optional scoped theme mode override.      |
+| `themeId`     | `ZoraThemeId`     | -       | Optional scoped theme id override.        |
+
+Type aliases:
+
+```ts
+type DropdownMenuProps = MenuProps;
+type MenuActionIntent = 'default' | 'danger';
+```
+
+Inherited behavior:
+
+- `Menu` / `DropdownMenu` are backed by Surface `Menu`.
+- `ActionSheet` / `ActionSheetItem` are backed by Surface `ActionSheet`.
+- ZORA adds app-facing naming, icon shortcuts, public exports, metadata, and
+  theme scoping.
+
+</details>
+
 ### `Tabs`
 
 Generic controlled tabs for navigation and filtering.

package/dist/components/action-sheet/ActionSheet.d.ts

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

package/dist/components/action-sheet/ActionSheet.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ActionSheet.d.ts","sourceRoot":"","sources":["../../../src/components/action-sheet/ActionSheet.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAMhD,eAAO,MAAM,WAAW,wDAAuC,CAAC"}

package/dist/components/action-sheet/ActionSheet.js

@@ -0,0 +1,8 @@
+import { ActionSheet as SurfaceActionSheet } from '@ankhorage/surface';
+import React from 'react';
+import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
+function ActionSheetInner({ mode: _mode, themeId: _themeId, ...props }) {
+    return <SurfaceActionSheet {...props}/>;
+}
+export const ActionSheet = withZoraThemeScope(ActionSheetInner);
+//# sourceMappingURL=ActionSheet.js.map

package/dist/components/action-sheet/ActionSheet.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ActionSheet.js","sourceRoot":"","sources":["../../../src/components/action-sheet/ActionSheet.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,IAAI,kBAAkB,EAAE,MAAM,oBAAoB,CAAC;AACvE,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,kBAAkB,EAAE,MAAM,gCAAgC,CAAC;AAGpE,SAAS,gBAAgB,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,OAAO,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAoB;IACtF,OAAO,CAAC,kBAAkB,CAAC,IAAI,KAAK,CAAC,EAAG,CAAC;AAC3C,CAAC;AAED,MAAM,CAAC,MAAM,WAAW,GAAG,kBAAkB,CAAC,gBAAgB,CAAC,CAAC","sourcesContent":["import { ActionSheet as SurfaceActionSheet } from '@ankhorage/surface';\nimport React from 'react';\n\nimport { withZoraThemeScope } from '../../theme/withZoraThemeScope';\nimport type { ActionSheetProps } from './types';\n\nfunction ActionSheetInner({ mode: _mode, themeId: _themeId, ...props }: ActionSheetProps) {\n  return <SurfaceActionSheet {...props} />;\n}\n\nexport const ActionSheet = withZoraThemeScope(ActionSheetInner);\n"]}

package/dist/components/action-sheet/ActionSheetItem.d.ts

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

package/dist/components/action-sheet/ActionSheetItem.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ActionSheetItem.d.ts","sourceRoot":"","sources":["../../../src/components/action-sheet/ActionSheetItem.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAC;AAwBpD,eAAO,MAAM,eAAe,4DAA2C,CAAC"}

package/dist/components/action-sheet/ActionSheetItem.js

@@ -0,0 +1,14 @@
+import { ActionSheetItem as SurfaceActionSheetItem } from '@ankhorage/surface';
+import React from 'react';
+import { resolveIconSize } from '../../internal/recipes';
+import { useZoraTheme } from '../../theme/useZoraTheme';
+import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
+import { Icon } from '../icon';
+function ActionSheetItemInner({ themeId: _themeId, mode: _mode, icon, leading, ...props }) {
+    const { theme } = useZoraTheme();
+    const resolvedLeading = leading ??
+        (icon ? (<Icon color={theme.semantics.content.muted} name={icon.name} provider={icon.provider} size={resolveIconSize('s')}/>) : undefined);
+    return <SurfaceActionSheetItem {...props} leading={resolvedLeading}/>;
+}
+export const ActionSheetItem = withZoraThemeScope(ActionSheetItemInner);
+//# sourceMappingURL=ActionSheetItem.js.map

package/dist/components/action-sheet/ActionSheetItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ActionSheetItem.js","sourceRoot":"","sources":["../../../src/components/action-sheet/ActionSheetItem.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,IAAI,sBAAsB,EAAE,MAAM,oBAAoB,CAAC;AAC/E,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AACzD,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AACxD,OAAO,EAAE,kBAAkB,EAAE,MAAM,gCAAgC,CAAC;AACpE,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAC;AAG/B,SAAS,oBAAoB,CAAC,EAC5B,OAAO,EAAE,QAAQ,EACjB,IAAI,EAAE,KAAK,EACX,IAAI,EACJ,OAAO,EACP,GAAG,KAAK,EACa;IACrB,MAAM,EAAE,KAAK,EAAE,GAAG,YAAY,EAAE,CAAC;IACjC,MAAM,eAAe,GACnB,OAAO;QACP,CAAC,IAAI,CAAC,CAAC,CAAC,CACN,CAAC,IAAI,CACH,KAAK,CAAC,CAAC,KAAK,CAAC,SAAS,CAAC,OAAO,CAAC,KAAK,CAAC,CACrC,IAAI,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAChB,QAAQ,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CACxB,IAAI,CAAC,CAAC,eAAe,CAAC,GAAG,CAAC,CAAC,EAC3B,CACH,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC;IAEjB,OAAO,CAAC,sBAAsB,CAAC,IAAI,KAAK,CAAC,CAAC,OAAO,CAAC,CAAC,eAAe,CAAC,EAAG,CAAC;AACzE,CAAC;AAED,MAAM,CAAC,MAAM,eAAe,GAAG,kBAAkB,CAAC,oBAAoB,CAAC,CAAC","sourcesContent":["import { ActionSheetItem as SurfaceActionSheetItem } from '@ankhorage/surface';\nimport React from 'react';\n\nimport { resolveIconSize } from '../../internal/recipes';\nimport { useZoraTheme } from '../../theme/useZoraTheme';\nimport { withZoraThemeScope } from '../../theme/withZoraThemeScope';\nimport { Icon } from '../icon';\nimport type { ActionSheetItemProps } from './types';\n\nfunction ActionSheetItemInner({\n  themeId: _themeId,\n  mode: _mode,\n  icon,\n  leading,\n  ...props\n}: ActionSheetItemProps) {\n  const { theme } = useZoraTheme();\n  const resolvedLeading =\n    leading ??\n    (icon ? (\n      <Icon\n        color={theme.semantics.content.muted}\n        name={icon.name}\n        provider={icon.provider}\n        size={resolveIconSize('s')}\n      />\n    ) : undefined);\n\n  return <SurfaceActionSheetItem {...props} leading={resolvedLeading} />;\n}\n\nexport const ActionSheetItem = withZoraThemeScope(ActionSheetItemInner);\n"]}

package/dist/components/action-sheet/index.d.ts

@@ -0,0 +1,4 @@
+export { ActionSheet } from './ActionSheet';
+export { ActionSheetItem } from './ActionSheetItem';
+export type { ActionSheetItemProps, ActionSheetProps } from './types';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/action-sheet/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/action-sheet/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,YAAY,EAAE,oBAAoB,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC"}

package/dist/components/action-sheet/index.js

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

package/dist/components/action-sheet/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/action-sheet/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC","sourcesContent":["export { ActionSheet } from './ActionSheet';\nexport { ActionSheetItem } from './ActionSheetItem';\nexport type { ActionSheetItemProps, ActionSheetProps } from './types';\n"]}

package/dist/components/action-sheet/meta.d.ts

@@ -0,0 +1,17 @@
+export declare const actionSheetMeta: {
+    readonly name: "ActionSheet";
+    readonly category: "component";
+    readonly directManifestNode: false;
+    readonly allowedChildren: readonly [];
+    readonly note: "Surface-backed contextual action sheet; not represented as a manifest node in v1.";
+    readonly props: {};
+};
+export declare const actionSheetItemMeta: {
+    readonly name: "ActionSheetItem";
+    readonly category: "component";
+    readonly directManifestNode: false;
+    readonly allowedChildren: readonly [];
+    readonly note: "Surface-backed contextual action sheet row; not represented as a manifest node in v1.";
+    readonly props: {};
+};
+//# sourceMappingURL=meta.d.ts.map

package/dist/components/action-sheet/meta.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"meta.d.ts","sourceRoot":"","sources":["../../../src/components/action-sheet/meta.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,eAAe;;;;;;;CAOU,CAAC;AAEvC,eAAO,MAAM,mBAAmB;;;;;;;CAOM,CAAC"}

package/dist/components/action-sheet/meta.js

@@ -0,0 +1,17 @@
+export const actionSheetMeta = {
+    name: 'ActionSheet',
+    category: 'component',
+    directManifestNode: false,
+    allowedChildren: [],
+    note: 'Surface-backed contextual action sheet; not represented as a manifest node in v1.',
+    props: {},
+};
+export const actionSheetItemMeta = {
+    name: 'ActionSheetItem',
+    category: 'component',
+    directManifestNode: false,
+    allowedChildren: [],
+    note: 'Surface-backed contextual action sheet row; not represented as a manifest node in v1.',
+    props: {},
+};
+//# sourceMappingURL=meta.js.map

package/dist/components/action-sheet/meta.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"meta.js","sourceRoot":"","sources":["../../../src/components/action-sheet/meta.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,eAAe,GAAG;IAC7B,IAAI,EAAE,aAAa;IACnB,QAAQ,EAAE,WAAW;IACrB,kBAAkB,EAAE,KAAK;IACzB,eAAe,EAAE,EAAE;IACnB,IAAI,EAAE,mFAAmF;IACzF,KAAK,EAAE,EAAE;CAC2B,CAAC;AAEvC,MAAM,CAAC,MAAM,mBAAmB,GAAG;IACjC,IAAI,EAAE,iBAAiB;IACvB,QAAQ,EAAE,WAAW;IACrB,kBAAkB,EAAE,KAAK;IACzB,eAAe,EAAE,EAAE;IACnB,IAAI,EAAE,uFAAuF;IAC7F,KAAK,EAAE,EAAE;CAC2B,CAAC","sourcesContent":["import type { ZoraComponentMeta } from '../../metadata';\n\nexport const actionSheetMeta = {\n  name: 'ActionSheet',\n  category: 'component',\n  directManifestNode: false,\n  allowedChildren: [],\n  note: 'Surface-backed contextual action sheet; not represented as a manifest node in v1.',\n  props: {},\n} as const satisfies ZoraComponentMeta;\n\nexport const actionSheetItemMeta = {\n  name: 'ActionSheetItem',\n  category: 'component',\n  directManifestNode: false,\n  allowedChildren: [],\n  note: 'Surface-backed contextual action sheet row; not represented as a manifest node in v1.',\n  props: {},\n} as const satisfies ZoraComponentMeta;\n"]}

package/dist/components/action-sheet/types.d.ts

@@ -0,0 +1,13 @@
+import type { ActionSheetItemProps as SurfaceActionSheetItemProps, ActionSheetProps as SurfaceActionSheetProps, ButtonIconSpec } from '@ankhorage/surface';
+import type React from 'react';
+import type { ZoraColor } from '../../internal/recipes';
+import type { ZoraBaseProps } from '../../theme/ZoraBaseProps';
+export interface ActionSheetProps extends ZoraBaseProps, Omit<SurfaceActionSheetProps, 'children' | 'mode' | 'themeId'> {
+    children?: React.ReactNode;
+}
+export interface ActionSheetItemProps extends ZoraBaseProps, Omit<SurfaceActionSheetItemProps, 'color' | 'leading' | 'mode' | 'themeId'> {
+    color?: ZoraColor;
+    icon?: ButtonIconSpec;
+    leading?: React.ReactNode;
+}
+//# sourceMappingURL=types.d.ts.map

package/dist/components/action-sheet/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/action-sheet/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,oBAAoB,IAAI,2BAA2B,EACnD,gBAAgB,IAAI,uBAAuB,EAC3C,cAAc,EACf,MAAM,oBAAoB,CAAC;AAC5B,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AACxD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAE/D,MAAM,WAAW,gBACf,SAAQ,aAAa,EAAE,IAAI,CAAC,uBAAuB,EAAE,UAAU,GAAG,MAAM,GAAG,SAAS,CAAC;IACrF,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,MAAM,WAAW,oBACf,SACE,aAAa,EACb,IAAI,CAAC,2BAA2B,EAAE,OAAO,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS,CAAC;IAC7E,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,IAAI,CAAC,EAAE,cAAc,CAAC;IACtB,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B"}

package/dist/components/action-sheet/types.js

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

package/dist/components/action-sheet/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/components/action-sheet/types.ts"],"names":[],"mappings":"","sourcesContent":["import type {\n  ActionSheetItemProps as SurfaceActionSheetItemProps,\n  ActionSheetProps as SurfaceActionSheetProps,\n  ButtonIconSpec,\n} from '@ankhorage/surface';\nimport type React from 'react';\n\nimport type { ZoraColor } from '../../internal/recipes';\nimport type { ZoraBaseProps } from '../../theme/ZoraBaseProps';\n\nexport interface ActionSheetProps\n  extends ZoraBaseProps, Omit<SurfaceActionSheetProps, 'children' | 'mode' | 'themeId'> {\n  children?: React.ReactNode;\n}\n\nexport interface ActionSheetItemProps\n  extends\n    ZoraBaseProps,\n    Omit<SurfaceActionSheetItemProps, 'color' | 'leading' | 'mode' | 'themeId'> {\n  color?: ZoraColor;\n  icon?: ButtonIconSpec;\n  leading?: React.ReactNode;\n}\n"]}

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