@ankhorage/zora 1.0.5 → 1.0.7

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # Changelog
 
+## 1.0.7
+
+### Patch Changes
+
+- 8795a20: Add common product-facing primitives: `MediaCard`, `MetricCard`, `Progress` (linear v1), `Rating` (readonly v1), and the `Timeline` pattern (vertical-only v1).
+
+## 1.0.6
+
+### Patch Changes
+
+- 9d9f997: Add common UI primitives: `Avatar`, `AvatarGroup`, `Chip`, `ChipGroup`, `SearchBar`, and `FilterBar`. Add list building blocks: `List`, `ListRow`, and `ListSection`. Also add `InputTrailingAction` / `trailingAction` support to `Input`.
+
 ## 1.0.5
 
 ### Patch Changes

package/README.md

@@ -442,6 +442,145 @@ Inherits all Surface `CardProps` except `children`, `p`, `radius`, `variant`, an
 
 </details>
 
+### `MediaCard`
+
+Media-first card surface for listings, content previews, and catalog items.
+
+```tsx
+<MediaCard
+  imageSource={require('./cover.png')}
+  imageLabel="Cover image"
+  title="MediaCard"
+  description="Composes an image slot, header content, badges, actions, and footer metadata."
+  badges={<Badge tone="primary">Featured</Badge>}
+  footer={<Rating value={4.5} />}
+  onPress={() => undefined}
+/>
+```
+
+<details>
+<summary>Props</summary>
+
+ZORA props:
+
+| Prop               | Type                  | Default     | Notes                                                      |
+| ------------------ | --------------------- | ----------- | ---------------------------------------------------------- |
+| `imageSource`      | `ImageSourcePropType` | -           | Image source (mutually exclusive with `image`).            |
+| `imageLabel`       | `string`              | -           | Accessibility label for `imageSource`.                     |
+| `image`            | `React.ReactNode`     | -           | Custom image slot (mutually exclusive with `imageSource`). |
+| `imageAspectRatio` | `number`              | `16 / 9`    | Aspect ratio used when rendering `imageSource`.            |
+| `title`            | `React.ReactNode`     | -           | Required title.                                            |
+| `description`      | `React.ReactNode`     | -           | Optional description under the title.                      |
+| `eyebrow`          | `React.ReactNode`     | -           | Optional caption above the title.                          |
+| `badges`           | `React.ReactNode`     | -           | Optional badge/tags region near the title.                 |
+| `actions`          | `React.ReactNode`     | -           | Optional trailing action area; disables `onPress`.         |
+| `footer`           | `React.ReactNode`     | -           | Optional footer content under the body.                    |
+| `children`         | `React.ReactNode`     | -           | Optional body content.                                     |
+| `tone`             | `ZoraCardTone`        | `'default'` | Passed to the underlying `Card`.                           |
+| `compact`          | `boolean`             | `false`     | Uses tighter spacing.                                      |
+| `onPress`          | `() => void`          | -           | Makes the card pressable when no `actions` are present.    |
+| `testID`           | `string`              | -           | Forwarded to the underlying `Card`.                        |
+
+Inherited props:
+
+No inherited props. `MediaCardProps` is declared directly by ZORA.
+
+</details>
+
+### `MetricCard`
+
+Compact metric surface for dashboards, stats, and summary cards.
+
+```tsx
+<MetricCard
+  label="Monthly active users"
+  value="14.2k"
+  delta="+4.1%"
+  deltaTone="success"
+  description="Last 30 days"
+/>
+```
+
+<details>
+<summary>Props</summary>
+
+ZORA props:
+
+| Prop          | Type              | Default     | Notes                                                   |
+| ------------- | ----------------- | ----------- | ------------------------------------------------------- |
+| `label`       | `React.ReactNode` | -           | Required label above the value.                         |
+| `value`       | `React.ReactNode` | -           | Required metric value.                                  |
+| `description` | `React.ReactNode` | -           | Optional supporting copy.                               |
+| `icon`        | `ButtonIconSpec`  | -           | Optional icon shown next to the label.                  |
+| `delta`       | `React.ReactNode` | -           | Optional delta badge content.                           |
+| `deltaTone`   | `ZoraTone`        | `'neutral'` | Tone used for the delta `Badge`.                        |
+| `actions`     | `React.ReactNode` | -           | Optional trailing action area; disables `onPress`.      |
+| `tone`        | `ZoraCardTone`    | `'default'` | Passed to the underlying `Card`.                        |
+| `compact`     | `boolean`         | `false`     | Uses tighter spacing.                                   |
+| `onPress`     | `() => void`      | -           | Makes the card pressable when no `actions` are present. |
+| `testID`      | `string`          | -           | Forwarded to the underlying `Card`.                     |
+
+Inherited props:
+
+No inherited props. `MetricCardProps` is declared directly by ZORA.
+
+</details>
+
+### `Progress`
+
+Linear progress bar with semantic tone.
+
+```tsx
+<Progress value={72} />
+<Progress tone="success" value={38} />
+```
+
+<details>
+<summary>Props</summary>
+
+ZORA props:
+
+| Prop     | Type              | Default     | Notes                         |
+| -------- | ----------------- | ----------- | ----------------------------- |
+| `value`  | `number`          | -           | Current progress value.       |
+| `max`    | `number`          | `100`       | Maximum value for completion. |
+| `tone`   | `ZoraTone`        | `'primary'` | Fill tone.                    |
+| `size`   | `ZoraControlSize` | `'m'`       | Controls bar height.          |
+| `testID` | `string`          | -           | Test id.                      |
+
+Inherited props:
+
+No inherited props. `ProgressProps` is declared directly by ZORA.
+
+</details>
+
+### `Rating`
+
+Readonly rating display rendered as star icons.
+
+```tsx
+<Rating value={4.5} />
+```
+
+<details>
+<summary>Props</summary>
+
+ZORA props:
+
+| Prop     | Type              | Default     | Notes                  |
+| -------- | ----------------- | ----------- | ---------------------- |
+| `value`  | `number`          | -           | Current rating value.  |
+| `max`    | `number`          | `5`         | Maximum rating value.  |
+| `tone`   | `ZoraTone`        | `'warning'` | Tone for filled icons. |
+| `size`   | `ZoraControlSize` | `'m'`       | Icon sizing preset.    |
+| `testID` | `string`          | -           | Test id.               |
+
+Inherited props:
+
+No inherited props. `RatingProps` is declared directly by ZORA.
+
+</details>
+
 ### `Input`
 
 Text input wrapper with ZORA sizing and optional Surface icon specs.
@@ -1273,6 +1412,151 @@ No inherited props. `FilterBarProps` is declared directly by ZORA.
 
 </details>
 
+### `List`
+
+List wrapper that renders `ListRow` items with dividers or spacing, or accepts custom children.
+
+```tsx
+<List
+  items={[
+    { title: 'Account', description: 'Profile and security', onPress: () => undefined },
+    { title: 'Notifications', trailing: <Badge>On</Badge> },
+  ]}
+/>
+```
+
+<details>
+<summary>Props</summary>
+
+ZORA props:
+
+| Prop         | Type              | Default     | Notes                                                 |
+| ------------ | ----------------- | ----------- | ----------------------------------------------------- |
+| `items`      | `ListRowProps[]`  | -           | Items mode. Mutually exclusive with `children`.       |
+| `children`   | `React.ReactNode` | -           | Custom children mode.                                 |
+| `rowVariant` | `ListRowVariant`  | `'divider'` | Default variant applied when an item omits `variant`. |
+| `compact`    | `boolean`         | `false`     | Default compact value applied to rows.                |
+| `testID`     | `string`          | -           | Test id.                                              |
+
+Behavior notes:
+
+- In items mode, ZORA inserts `Divider` between `variant="divider"` rows and `Spacer` between `variant="card"` rows.
+
+Inherited props:
+
+No inherited props. `ListProps` is declared directly by ZORA.
+
+</details>
+
+### `ListRow`
+
+Single list row with leading/trailing slots, optional metadata, and a structured action model.
+
+```tsx
+<ListRow title="Profile" description="Update your details" onPress={() => undefined} />
+```
+
+<details>
+<summary>Props</summary>
+
+ZORA props:
+
+| Prop          | Type              | Default     | Notes                                                            |
+| ------------- | ----------------- | ----------- | ---------------------------------------------------------------- |
+| `title`       | `React.ReactNode` | -           | Required row title.                                              |
+| `description` | `React.ReactNode` | -           | Supporting description.                                          |
+| `meta`        | `React.ReactNode` | -           | Small secondary metadata below description.                      |
+| `leading`     | `React.ReactNode` | -           | Leading slot (icon/avatar/media).                                |
+| `trailing`    | `React.ReactNode` | -           | Trailing slot (badges/meta).                                     |
+| `variant`     | `ListRowVariant`  | `'divider'` | `divider` or `card`.                                             |
+| `compact`     | `boolean`         | `false`     | Uses tighter padding and typography spacing.                     |
+| `selected`    | `boolean`         | `false`     | Selected styling state.                                          |
+| `disabled`    | `boolean`         | `false`     | Disables interaction and mutes presentation.                     |
+| `onPress`     | `() => void`      | -           | Makes the row pressable. Mutually exclusive with `action`.       |
+| `action`      | `React.ReactNode` | -           | Trailing interactive content. Mutually exclusive with `onPress`. |
+| `testID`      | `string`          | -           | Test id.                                                         |
+
+Inherited props:
+
+No inherited props. `ListRowProps` is declared directly by ZORA.
+
+</details>
+
+### `ListSection`
+
+Section wrapper for list content with an optional `SectionHeader`.
+
+```tsx
+<ListSection title="Settings" items={[{ title: 'Account' }]} />
+```
+
+<details>
+<summary>Props</summary>
+
+ZORA props:
+
+| Prop          | Type              | Default     | Notes                                                 |
+| ------------- | ----------------- | ----------- | ----------------------------------------------------- |
+| `title`       | `React.ReactNode` | -           | Optional section title (renders `SectionHeader`).     |
+| `description` | `React.ReactNode` | -           | Optional section description.                         |
+| `eyebrow`     | `React.ReactNode` | -           | Optional eyebrow above the title.                     |
+| `actions`     | `React.ReactNode` | -           | Optional trailing header actions.                     |
+| `items`       | `ListRowProps[]`  | -           | Items mode list content.                              |
+| `children`    | `React.ReactNode` | -           | Custom children mode list content.                    |
+| `rowVariant`  | `ListRowVariant`  | `'divider'` | Default variant applied when an item omits `variant`. |
+| `compact`     | `boolean`         | `false`     | Default compact value applied to rows.                |
+| `testID`      | `string`          | -           | Test id.                                              |
+
+Inherited props:
+
+No inherited props. `ListSectionProps` is declared directly by ZORA.
+
+</details>
+
+### `Timeline`
+
+Vertical-only timeline pattern for onboarding steps, order tracking, and activity sequences.
+
+```tsx
+<Timeline
+  items={[
+    { id: '1', title: 'Order placed', meta: '09:15', status: 'success' },
+    { id: '2', title: 'In transit', meta: '11:42', status: 'primary' },
+    { id: '3', title: 'Requires attention', meta: 'Today', status: 'warning' },
+  ]}
+/>
+```
+
+<details>
+<summary>Props</summary>
+
+ZORA props:
+
+| Prop      | Type             | Default | Notes                                         |
+| --------- | ---------------- | ------- | --------------------------------------------- |
+| `items`   | `TimelineItem[]` | -       | Ordered timeline items (vertical-only in v1). |
+| `compact` | `boolean`        | `false` | Uses tighter spacing between items.           |
+| `testID`  | `string`         | -       | Test id.                                      |
+
+Item shape:
+
+```ts
+type TimelineItem = {
+  id: string;
+  title: React.ReactNode;
+  description?: React.ReactNode;
+  meta?: React.ReactNode;
+  status?: ZoraTone;
+  icon?: ButtonIconSpec;
+};
+```
+
+Inherited props:
+
+No inherited props. `TimelineProps` is declared directly by ZORA.
+
+</details>
+
 ### `SettingsRow`
 
 Compact settings row with optional metadata, control, and press handling.

package/dist/components/media-card/MediaCard.d.ts

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

package/dist/components/media-card/MediaCard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MediaCard.d.ts","sourceRoot":"","sources":["../../../src/components/media-card/MediaCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAS1B,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AA8G9C,eAAO,MAAM,SAAS,sDAAqC,CAAC"}

package/dist/components/media-card/MediaCard.js

@@ -0,0 +1,64 @@
+import React from 'react';
+import { Image } from 'react-native';
+import { Box, Stack } from '../../foundation';
+import { useZoraTheme } from '../../theme/useZoraTheme';
+import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
+import { Card } from '../card';
+import { Heading } from '../heading';
+import { Text } from '../text';
+function resolveImageAspectRatio(imageAspectRatio) {
+    if (!Number.isFinite(imageAspectRatio) || imageAspectRatio <= 0) {
+        return 16 / 9;
+    }
+    return imageAspectRatio;
+}
+function MediaCardInner({ themeId: _themeId, mode: _mode, testID, imageSource, imageLabel, image, imageAspectRatio = 16 / 9, title, description, eyebrow, badges, actions, footer, children, tone = 'default', compact = false, onPress, }) {
+    const { theme } = useZoraTheme();
+    const gap = compact ? 's' : 'm';
+    const isInteractive = Boolean(onPress) && !actions;
+    const resolvedAspectRatio = resolveImageAspectRatio(imageAspectRatio);
+    const renderImage = () => {
+        if (image) {
+            return (<Box radius="m" style={{ overflow: 'hidden' }}>
+          {image}
+        </Box>);
+        }
+        if (!imageSource) {
+            return null;
+        }
+        return (<Box bg={theme.semantics.neutral.surface} radius="m" style={{ overflow: 'hidden' }}>
+        <Box style={{ aspectRatio: resolvedAspectRatio, width: '100%' }}>
+          <Image accessibilityLabel={imageLabel} source={imageSource} style={{ height: '100%', width: '100%' }}/>
+        </Box>
+      </Box>);
+    };
+    const hasHeader = [eyebrow, title, description, badges, actions].some((item) => item != null);
+    return (<Card compact={compact} onPress={isInteractive ? onPress : undefined} testID={testID} tone={tone}>
+      <Stack gap={gap}>
+        {renderImage()}
+
+        {hasHeader ? (<Stack align={{ base: 'flex-start', md: 'center' }} direction={{ base: 'column', md: 'row' }} gap="m" justify="space-between">
+            <Box flex={1}>
+              <Stack gap="xs">
+                {eyebrow ? (<Text tone="muted" variant="caption" weight="semiBold">
+                    {eyebrow}
+                  </Text>) : null}
+                <Stack gap="xs">
+                  <Heading level={compact ? 4 : 3}>{title}</Heading>
+                  {badges ? <Box>{badges}</Box> : null}
+                </Stack>
+                {description ? (<Text tone="muted" variant="bodySmall">
+                    {description}
+                  </Text>) : null}
+              </Stack>
+            </Box>
+            {actions ? <Box>{actions}</Box> : null}
+          </Stack>) : null}
+
+        {children ? <Box>{children}</Box> : null}
+        {footer ? <Box pt="xs">{footer}</Box> : null}
+      </Stack>
+    </Card>);
+}
+export const MediaCard = withZoraThemeScope(MediaCardInner);
+//# sourceMappingURL=MediaCard.js.map

package/dist/components/media-card/MediaCard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MediaCard.js","sourceRoot":"","sources":["../../../src/components/media-card/MediaCard.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from 'react';\nimport { Image } from 'react-native';\n\nimport { Box, Stack } from '../../foundation';\nimport { useZoraTheme } from '../../theme/useZoraTheme';\nimport { withZoraThemeScope } from '../../theme/withZoraThemeScope';\nimport { Card } from '../card';\nimport { Heading } from '../heading';\nimport { Text } from '../text';\nimport type { MediaCardProps } from './types';\n\nfunction resolveImageAspectRatio(\n  imageAspectRatio: NonNullable<MediaCardProps['imageAspectRatio']>,\n) {\n  if (!Number.isFinite(imageAspectRatio) || imageAspectRatio <= 0) {\n    return 16 / 9;\n  }\n\n  return imageAspectRatio;\n}\n\nfunction MediaCardInner({\n  themeId: _themeId,\n  mode: _mode,\n  testID,\n  imageSource,\n  imageLabel,\n  image,\n  imageAspectRatio = 16 / 9,\n  title,\n  description,\n  eyebrow,\n  badges,\n  actions,\n  footer,\n  children,\n  tone = 'default',\n  compact = false,\n  onPress,\n}: MediaCardProps) {\n  const { theme } = useZoraTheme();\n  const gap = compact ? 's' : 'm';\n  const isInteractive = Boolean(onPress) && !actions;\n  const resolvedAspectRatio = resolveImageAspectRatio(imageAspectRatio);\n\n  const renderImage = () => {\n    if (image) {\n      return (\n        <Box radius=\"m\" style={{ overflow: 'hidden' }}>\n          {image}\n        </Box>\n      );\n    }\n\n    if (!imageSource) {\n      return null;\n    }\n\n    return (\n      <Box bg={theme.semantics.neutral.surface} radius=\"m\" style={{ overflow: 'hidden' }}>\n        <Box style={{ aspectRatio: resolvedAspectRatio, width: '100%' }}>\n          <Image\n            accessibilityLabel={imageLabel}\n            source={imageSource}\n            style={{ height: '100%', width: '100%' }}\n          />\n        </Box>\n      </Box>\n    );\n  };\n\n  const hasHeader = [eyebrow, title, description, badges, actions].some((item) => item != null);\n\n  return (\n    <Card\n      compact={compact}\n      onPress={isInteractive ? onPress : undefined}\n      testID={testID}\n      tone={tone}\n    >\n      <Stack gap={gap}>\n        {renderImage()}\n\n        {hasHeader ? (\n          <Stack\n            align={{ base: 'flex-start', md: 'center' }}\n            direction={{ base: 'column', md: 'row' }}\n            gap=\"m\"\n            justify=\"space-between\"\n          >\n            <Box flex={1}>\n              <Stack gap=\"xs\">\n                {eyebrow ? (\n                  <Text tone=\"muted\" variant=\"caption\" weight=\"semiBold\">\n                    {eyebrow}\n                  </Text>\n                ) : null}\n                <Stack gap=\"xs\">\n                  <Heading level={compact ? 4 : 3}>{title}</Heading>\n                  {badges ? <Box>{badges}</Box> : null}\n                </Stack>\n                {description ? (\n                  <Text tone=\"muted\" variant=\"bodySmall\">\n                    {description}\n                  </Text>\n                ) : null}\n              </Stack>\n            </Box>\n            {actions ? <Box>{actions}</Box> : null}\n          </Stack>\n        ) : null}\n\n        {children ? <Box>{children}</Box> : null}\n        {footer ? <Box pt=\"xs\">{footer}</Box> : null}\n      </Stack>\n    </Card>\n  );\n}\n\nexport const MediaCard = withZoraThemeScope(MediaCardInner);\n"]}

package/dist/components/media-card/index.d.ts

@@ -0,0 +1,3 @@
+export { MediaCard } from './MediaCard';
+export type { MediaCardImageProps, MediaCardProps } from './types';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/media-card/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/media-card/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,YAAY,EAAE,mBAAmB,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC"}

package/dist/components/media-card/index.js

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

package/dist/components/media-card/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/media-card/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC","sourcesContent":["export { MediaCard } from './MediaCard';\nexport type { MediaCardImageProps, MediaCardProps } from './types';\n"]}

package/dist/components/media-card/types.d.ts

@@ -0,0 +1,36 @@
+import type React from 'react';
+import type { ImageSourcePropType } from 'react-native';
+import type { ZoraCardTone } from '../../internal/recipes';
+import type { ZoraBaseProps } from '../../theme/ZoraBaseProps';
+interface MediaCardWithImageSource {
+    imageSource: ImageSourcePropType;
+    imageLabel?: string;
+    image?: never;
+}
+interface MediaCardWithImageSlot {
+    image: React.ReactNode;
+    imageSource?: never;
+    imageLabel?: never;
+}
+interface MediaCardWithoutImage {
+    image?: never;
+    imageSource?: never;
+    imageLabel?: never;
+}
+export type MediaCardImageProps = MediaCardWithImageSource | MediaCardWithImageSlot | MediaCardWithoutImage;
+interface MediaCardBaseProps extends ZoraBaseProps {
+    title: React.ReactNode;
+    description?: React.ReactNode;
+    eyebrow?: React.ReactNode;
+    badges?: React.ReactNode;
+    actions?: React.ReactNode;
+    footer?: React.ReactNode;
+    children?: React.ReactNode;
+    tone?: ZoraCardTone;
+    compact?: boolean;
+    onPress?: () => void;
+    imageAspectRatio?: number;
+}
+export type MediaCardProps = MediaCardBaseProps & MediaCardImageProps;
+export {};
+//# sourceMappingURL=types.d.ts.map

package/dist/components/media-card/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/media-card/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,cAAc,CAAC;AAExD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,wBAAwB,CAAC;AAC3D,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAE/D,UAAU,wBAAwB;IAChC,WAAW,EAAE,mBAAmB,CAAC;IACjC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,KAAK,CAAC;CACf;AAED,UAAU,sBAAsB;IAC9B,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,WAAW,CAAC,EAAE,KAAK,CAAC;IACpB,UAAU,CAAC,EAAE,KAAK,CAAC;CACpB;AAED,UAAU,qBAAqB;IAC7B,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,WAAW,CAAC,EAAE,KAAK,CAAC;IACpB,UAAU,CAAC,EAAE,KAAK,CAAC;CACpB;AAED,MAAM,MAAM,mBAAmB,GAC3B,wBAAwB,GACxB,sBAAsB,GACtB,qBAAqB,CAAC;AAE1B,UAAU,kBAAmB,SAAQ,aAAa;IAChD,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B;AAED,MAAM,MAAM,cAAc,GAAG,kBAAkB,GAAG,mBAAmB,CAAC"}

package/dist/components/media-card/types.js

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

package/dist/components/media-card/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/components/media-card/types.ts"],"names":[],"mappings":"","sourcesContent":["import type React from 'react';\nimport type { ImageSourcePropType } from 'react-native';\n\nimport type { ZoraCardTone } from '../../internal/recipes';\nimport type { ZoraBaseProps } from '../../theme/ZoraBaseProps';\n\ninterface MediaCardWithImageSource {\n  imageSource: ImageSourcePropType;\n  imageLabel?: string;\n  image?: never;\n}\n\ninterface MediaCardWithImageSlot {\n  image: React.ReactNode;\n  imageSource?: never;\n  imageLabel?: never;\n}\n\ninterface MediaCardWithoutImage {\n  image?: never;\n  imageSource?: never;\n  imageLabel?: never;\n}\n\nexport type MediaCardImageProps =\n  | MediaCardWithImageSource\n  | MediaCardWithImageSlot\n  | MediaCardWithoutImage;\n\ninterface MediaCardBaseProps extends ZoraBaseProps {\n  title: React.ReactNode;\n  description?: React.ReactNode;\n  eyebrow?: React.ReactNode;\n  badges?: React.ReactNode;\n  actions?: React.ReactNode;\n  footer?: React.ReactNode;\n  children?: React.ReactNode;\n  tone?: ZoraCardTone;\n  compact?: boolean;\n  onPress?: () => void;\n  imageAspectRatio?: number;\n}\n\nexport type MediaCardProps = MediaCardBaseProps & MediaCardImageProps;\n"]}

package/dist/components/metric-card/MetricCard.d.ts

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

package/dist/components/metric-card/MetricCard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MetricCard.d.ts","sourceRoot":"","sources":["../../../src/components/metric-card/MetricCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAW1B,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAwE/C,eAAO,MAAM,UAAU,uDAAsC,CAAC"}

package/dist/components/metric-card/MetricCard.js

@@ -0,0 +1,43 @@
+import React from 'react';
+import { Box, Inline, Stack } from '../../foundation';
+import { resolveBadgeRecipe, resolveIconSize } from '../../internal/recipes';
+import { useZoraTheme } from '../../theme/useZoraTheme';
+import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
+import { Badge } from '../badge';
+import { Card } from '../card';
+import { Heading } from '../heading';
+import { Icon } from '../icon';
+import { Text } from '../text';
+function MetricCardInner({ themeId: _themeId, mode: _mode, testID, label, value, description, icon, delta, deltaTone = 'neutral', actions, tone = 'default', compact = false, onPress, }) {
+    const { theme } = useZoraTheme();
+    const isInteractive = Boolean(onPress) && !actions;
+    const badgeRecipe = resolveBadgeRecipe({ tone: deltaTone, emphasis: 'soft', size: 's' });
+    const iconColor = theme.semantics.content.muted;
+    return (<Card compact={compact} onPress={isInteractive ? onPress : undefined} testID={testID} tone={tone}>
+      <Stack gap={compact ? 's' : 'm'}>
+        <Inline align="flex-start" gap="m" justify="space-between">
+          <Stack flex={1} gap="xs">
+            <Inline align="center" gap="xs" wrap="wrap">
+              {icon ? (<Icon color={iconColor} name={icon.name} provider={icon.provider} size={resolveIconSize('s')}/>) : null}
+              <Text tone="muted" variant="caption" weight="semiBold">
+                {label}
+              </Text>
+              {delta != null ? (<Badge emphasis={badgeRecipe.variant} size={badgeRecipe.size} tone={badgeRecipe.tone}>
+                  {delta}
+                </Badge>) : null}
+            </Inline>
+
+            <Heading level={compact ? 3 : 2}>{value}</Heading>
+
+            {description ? (<Text tone="muted" variant="bodySmall">
+                {description}
+              </Text>) : null}
+          </Stack>
+
+          {actions ? <Box>{actions}</Box> : null}
+        </Inline>
+      </Stack>
+    </Card>);
+}
+export const MetricCard = withZoraThemeScope(MetricCardInner);
+//# sourceMappingURL=MetricCard.js.map

package/dist/components/metric-card/MetricCard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MetricCard.js","sourceRoot":"","sources":["../../../src/components/metric-card/MetricCard.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from 'react';\n\nimport { Box, Inline, Stack } from '../../foundation';\nimport { resolveBadgeRecipe, resolveIconSize } from '../../internal/recipes';\nimport { useZoraTheme } from '../../theme/useZoraTheme';\nimport { withZoraThemeScope } from '../../theme/withZoraThemeScope';\nimport { Badge } from '../badge';\nimport { Card } from '../card';\nimport { Heading } from '../heading';\nimport { Icon } from '../icon';\nimport { Text } from '../text';\nimport type { MetricCardProps } from './types';\n\nfunction MetricCardInner({\n  themeId: _themeId,\n  mode: _mode,\n  testID,\n  label,\n  value,\n  description,\n  icon,\n  delta,\n  deltaTone = 'neutral',\n  actions,\n  tone = 'default',\n  compact = false,\n  onPress,\n}: MetricCardProps) {\n  const { theme } = useZoraTheme();\n  const isInteractive = Boolean(onPress) && !actions;\n\n  const badgeRecipe = resolveBadgeRecipe({ tone: deltaTone, emphasis: 'soft', size: 's' });\n  const iconColor = theme.semantics.content.muted;\n\n  return (\n    <Card\n      compact={compact}\n      onPress={isInteractive ? onPress : undefined}\n      testID={testID}\n      tone={tone}\n    >\n      <Stack gap={compact ? 's' : 'm'}>\n        <Inline align=\"flex-start\" gap=\"m\" justify=\"space-between\">\n          <Stack flex={1} gap=\"xs\">\n            <Inline align=\"center\" gap=\"xs\" wrap=\"wrap\">\n              {icon ? (\n                <Icon\n                  color={iconColor}\n                  name={icon.name}\n                  provider={icon.provider}\n                  size={resolveIconSize('s')}\n                />\n              ) : null}\n              <Text tone=\"muted\" variant=\"caption\" weight=\"semiBold\">\n                {label}\n              </Text>\n              {delta != null ? (\n                <Badge\n                  emphasis={badgeRecipe.variant}\n                  size={badgeRecipe.size}\n                  tone={badgeRecipe.tone}\n                >\n                  {delta}\n                </Badge>\n              ) : null}\n            </Inline>\n\n            <Heading level={compact ? 3 : 2}>{value}</Heading>\n\n            {description ? (\n              <Text tone=\"muted\" variant=\"bodySmall\">\n                {description}\n              </Text>\n            ) : null}\n          </Stack>\n\n          {actions ? <Box>{actions}</Box> : null}\n        </Inline>\n      </Stack>\n    </Card>\n  );\n}\n\nexport const MetricCard = withZoraThemeScope(MetricCardInner);\n"]}

package/dist/components/metric-card/index.d.ts

@@ -0,0 +1,3 @@
+export { MetricCard } from './MetricCard';
+export type { MetricCardProps } from './types';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/metric-card/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/metric-card/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,YAAY,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC"}

package/dist/components/metric-card/index.js

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

package/dist/components/metric-card/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/metric-card/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC","sourcesContent":["export { MetricCard } from './MetricCard';\nexport type { MetricCardProps } from './types';\n"]}

package/dist/components/metric-card/types.d.ts

@@ -0,0 +1,17 @@
+import type { ButtonIconSpec } from '@ankhorage/surface';
+import type React from 'react';
+import type { ZoraCardTone, ZoraTone } from '../../internal/recipes';
+import type { ZoraBaseProps } from '../../theme/ZoraBaseProps';
+export interface MetricCardProps extends ZoraBaseProps {
+    label: React.ReactNode;
+    value: React.ReactNode;
+    description?: React.ReactNode;
+    icon?: ButtonIconSpec;
+    delta?: React.ReactNode;
+    deltaTone?: ZoraTone;
+    actions?: React.ReactNode;
+    tone?: ZoraCardTone;
+    compact?: boolean;
+    onPress?: () => void;
+}
+//# sourceMappingURL=types.d.ts.map

package/dist/components/metric-card/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/metric-card/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,YAAY,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AACrE,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAE/D,MAAM,WAAW,eAAgB,SAAQ,aAAa;IACpD,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,IAAI,CAAC,EAAE,cAAc,CAAC;IACtB,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,SAAS,CAAC,EAAE,QAAQ,CAAC;IACrB,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB"}

package/dist/components/metric-card/types.js

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

package/dist/components/metric-card/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/components/metric-card/types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ButtonIconSpec } from '@ankhorage/surface';\nimport type React from 'react';\n\nimport type { ZoraCardTone, ZoraTone } from '../../internal/recipes';\nimport type { ZoraBaseProps } from '../../theme/ZoraBaseProps';\n\nexport interface MetricCardProps extends ZoraBaseProps {\n  label: React.ReactNode;\n  value: React.ReactNode;\n  description?: React.ReactNode;\n  icon?: ButtonIconSpec;\n  delta?: React.ReactNode;\n  deltaTone?: ZoraTone;\n  actions?: React.ReactNode;\n  tone?: ZoraCardTone;\n  compact?: boolean;\n  onPress?: () => void;\n}\n"]}

package/dist/components/progress/Progress.d.ts

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

package/dist/components/progress/Progress.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Progress.d.ts","sourceRoot":"","sources":["../../../src/components/progress/Progress.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,OAAO,EAAE,KAAK,aAAa,EAAuB,MAAM,SAAS,CAAC;AA2ClE,eAAO,MAAM,QAAQ,qDAAoC,CAAC"}

package/dist/components/progress/Progress.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import { Box } from '../../foundation';
+import { useZoraTheme } from '../../theme/useZoraTheme';
+import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
+import { resolveProgressFraction } from './resolveProgressFraction';
+import { resolveProgressRole } from './types';
+function resolveProgressHeight(size) {
+    switch (size) {
+        case 's':
+            return 4;
+        case 'm':
+            return 6;
+        case 'l':
+        default:
+            return 8;
+    }
+}
+function ProgressInner({ themeId: _themeId, mode: _mode, testID, value, max = 100, tone = 'primary', size = 'm', }) {
+    const { theme } = useZoraTheme();
+    const fraction = resolveProgressFraction({ value, max });
+    const height = resolveProgressHeight(size);
+    const role = resolveProgressRole(theme, tone);
+    return (<Box accessibilityRole="progressbar" bg={theme.semantics.neutral.surface} borderColor={theme.semantics.neutral.divider} borderWidth={1} radius="full" testID={testID} style={{ height, overflow: 'hidden' }}>
+      <Box bg={role.base} style={{ height: '100%', width: `${fraction * 100}%` }}/>
+    </Box>);
+}
+export const Progress = withZoraThemeScope(ProgressInner);
+//# sourceMappingURL=Progress.js.map

package/dist/components/progress/Progress.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Progress.js","sourceRoot":"","sources":["../../../src/components/progress/Progress.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAC;AACvC,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AACxD,OAAO,EAAE,kBAAkB,EAAE,MAAM,gCAAgC,CAAC;AACpE,OAAO,EAAE,uBAAuB,EAAE,MAAM,2BAA2B,CAAC;AACpE,OAAO,EAAsB,mBAAmB,EAAE,MAAM,SAAS,CAAC;AAElE,SAAS,qBAAqB,CAAC,IAAwC;IACrE,QAAQ,IAAI,EAAE,CAAC;QACb,KAAK,GAAG;YACN,OAAO,CAAC,CAAC;QACX,KAAK,GAAG;YACN,OAAO,CAAC,CAAC;QACX,KAAK,GAAG,CAAC;QACT;YACE,OAAO,CAAC,CAAC;IACb,CAAC;AACH,CAAC;AAED,SAAS,aAAa,CAAC,EACrB,OAAO,EAAE,QAAQ,EACjB,IAAI,EAAE,KAAK,EACX,MAAM,EACN,KAAK,EACL,GAAG,GAAG,GAAG,EACT,IAAI,GAAG,SAAS,EAChB,IAAI,GAAG,GAAG,GACI;IACd,MAAM,EAAE,KAAK,EAAE,GAAG,YAAY,EAAE,CAAC;IACjC,MAAM,QAAQ,GAAG,uBAAuB,CAAC,EAAE,KAAK,EAAE,GAAG,EAAE,CAAC,CAAC;IACzD,MAAM,MAAM,GAAG,qBAAqB,CAAC,IAAI,CAAC,CAAC;IAC3C,MAAM,IAAI,GAAG,mBAAmB,CAAC,KAAK,EAAE,IAAI,CAAC,CAAC;IAE9C,OAAO,CACL,CAAC,GAAG,CACF,iBAAiB,CAAC,aAAa,CAC/B,EAAE,CAAC,CAAC,KAAK,CAAC,SAAS,CAAC,OAAO,CAAC,OAAO,CAAC,CACpC,WAAW,CAAC,CAAC,KAAK,CAAC,SAAS,CAAC,OAAO,CAAC,OAAO,CAAC,CAC7C,WAAW,CAAC,CAAC,CAAC,CAAC,CACf,MAAM,CAAC,MAAM,CACb,MAAM,CAAC,CAAC,MAAM,CAAC,CACf,KAAK,CAAC,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAE,CAAC,CAEtC;MAAA,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,KAAK,CAAC,CAAC,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,QAAQ,GAAG,GAAG,GAAG,EAAE,CAAC,EAC7E;IAAA,EAAE,GAAG,CAAC,CACP,CAAC;AACJ,CAAC;AAED,MAAM,CAAC,MAAM,QAAQ,GAAG,kBAAkB,CAAC,aAAa,CAAC,CAAC","sourcesContent":["import React from 'react';\n\nimport { Box } from '../../foundation';\nimport { useZoraTheme } from '../../theme/useZoraTheme';\nimport { withZoraThemeScope } from '../../theme/withZoraThemeScope';\nimport { resolveProgressFraction } from './resolveProgressFraction';\nimport { type ProgressProps, resolveProgressRole } from './types';\n\nfunction resolveProgressHeight(size: NonNullable<ProgressProps['size']>): number {\n  switch (size) {\n    case 's':\n      return 4;\n    case 'm':\n      return 6;\n    case 'l':\n    default:\n      return 8;\n  }\n}\n\nfunction ProgressInner({\n  themeId: _themeId,\n  mode: _mode,\n  testID,\n  value,\n  max = 100,\n  tone = 'primary',\n  size = 'm',\n}: ProgressProps) {\n  const { theme } = useZoraTheme();\n  const fraction = resolveProgressFraction({ value, max });\n  const height = resolveProgressHeight(size);\n  const role = resolveProgressRole(theme, tone);\n\n  return (\n    <Box\n      accessibilityRole=\"progressbar\"\n      bg={theme.semantics.neutral.surface}\n      borderColor={theme.semantics.neutral.divider}\n      borderWidth={1}\n      radius=\"full\"\n      testID={testID}\n      style={{ height, overflow: 'hidden' }}\n    >\n      <Box bg={role.base} style={{ height: '100%', width: `${fraction * 100}%` }} />\n    </Box>\n  );\n}\n\nexport const Progress = withZoraThemeScope(ProgressInner);\n"]}