@ankhorage/zora 15.0.0 → 17.0.0

package/src/features/layout/{containerMeta.ts → scrollViewMeta.ts}

@@ -2,10 +2,13 @@ import { CONTAINER_ALLOWED_CHILDREN } from '../../metadata/allowedChildren';
 import type { ZoraComponentMeta } from '../../metadata/types';
 import { LAYOUT_PROPS } from './constants';
 
-export const containerMeta = {
-  name: 'Container',
+export const scrollViewMeta = {
+  name: 'ScrollView',
   category: 'foundation',
   directManifestNode: true,
   allowedChildren: [...CONTAINER_ALLOWED_CHILDREN],
-  props: Object.fromEntries(Object.entries(LAYOUT_PROPS).filter(([key]) => key !== 'width')),
+  props: {
+    ...LAYOUT_PROPS,
+    horizontal: { type: 'boolean', category: 'Layout', default: false },
+  },
 } as const satisfies ZoraComponentMeta;

package/src/features/layout/{stackMeta.ts → viewMeta.ts}

@@ -2,8 +2,8 @@ import { CONTAINER_ALLOWED_CHILDREN } from '../../metadata/allowedChildren';
 import type { ZoraComponentMeta } from '../../metadata/types';
 import { LAYOUT_PROPS } from './constants';
 
-export const stackMeta = {
-  name: 'Stack',
+export const viewMeta = {
+  name: 'View',
   category: 'foundation',
   directManifestNode: true,
   allowedChildren: [...CONTAINER_ALLOWED_CHILDREN],
@@ -11,6 +11,8 @@ export const stackMeta = {
     ...LAYOUT_PROPS,
     direction: { type: 'enum', category: 'Layout', enum: ['row', 'column'] },
     gap: { type: 'spacing', category: 'Spacing' },
+    rowGap: { type: 'spacing', category: 'Spacing' },
+    columnGap: { type: 'spacing', category: 'Spacing' },
     align: {
       type: 'enum',
       category: 'Layout',
@@ -22,5 +24,8 @@ export const stackMeta = {
       enum: ['flex-start', 'center', 'flex-end', 'space-between', 'space-around', 'space-evenly'],
     },
     wrap: { type: 'enum', category: 'Layout', enum: ['nowrap', 'wrap'] },
+    bg: { type: 'color', category: 'Style' },
+    borderColor: { type: 'color', category: 'Style' },
+    borderWidth: { type: 'number', category: 'Style' },
   },
 } as const satisfies ZoraComponentMeta;

package/src/features/missing-element/adapters/inbound/MissingElement.tsx

@@ -5,7 +5,7 @@ import { useZoraTheme } from '../../../../theme/useZoraTheme';
 import { withZoraThemeScope } from '../../../../theme/withZoraThemeScope';
 import type { MissingElementProps } from '../../../../types/missing-element';
 import { Badge } from '../../../badge/public';
-import { Box, Stack } from '../../../layout/public';
+import { View } from '../../../layout/public';
 import { Text } from '../../../typography/public';
 
 /***
@@ -26,7 +26,7 @@ function MissingElementInner({
   const accessibilityLabel = `Missing element: ${requestedCapability}. ${reason}`;
 
   return (
-    <Box
+    <View
       accessibilityLabel={accessibilityLabel}
       accessibilityRole="text"
       accessible
@@ -40,7 +40,7 @@ function MissingElementInner({
       style={styles.root}
       testID={testID}
     >
-      <Stack gap="xs">
+      <View gap="xs">
         <Badge color="warning">Missing element</Badge>
         <Text variant="label" weight="semiBold">
           {requestedCapability}
@@ -53,8 +53,8 @@ function MissingElementInner({
             Evidence: {evidenceId}
           </Text>
         ) : null}
-      </Stack>
-    </Box>
+      </View>
+    </View>
   );
 }
 

package/src/features/pagination/adapters/inbound/Pagination.tsx

@@ -0,0 +1,116 @@
+import React from 'react';
+
+import { withZoraThemeScope } from '../../../../theme/withZoraThemeScope';
+import type { PaginationProps } from '../../../../types/pagination';
+import { Button } from '../../../button/public';
+import { View } from '../../../layout/public';
+import { Text } from '../../../typography/public';
+import { resolvePaginationPage } from '../../utils/resolvePaginationPage';
+import { resolvePaginationState } from '../../utils/resolvePaginationState';
+
+/*** Renders controls for navigating between pages of a finite result set. */
+export const Pagination = withZoraThemeScope(PaginationInner);
+
+/*** Connects normalized pagination state to visible page navigation controls. */
+function PaginationInner({
+  themeId: _themeId,
+  mode: _mode,
+  page,
+  pageCount,
+  onPageChange,
+  disabled = false,
+  siblingCount = 1,
+  boundaryCount = 1,
+  showFirstLast = false,
+  previousLabel = 'Previous',
+  nextLabel = 'Next',
+  firstLabel = 'First',
+  lastLabel = 'Last',
+  compact = false,
+  testID,
+  interactionPolicy,
+}: PaginationProps) {
+  const passive = interactionPolicy === 'passive';
+  const state = resolvePaginationState({ boundaryCount, compact, page, pageCount, siblingCount });
+  const canGoPrevious = state.currentPage > 1;
+  const canGoNext = state.currentPage < state.pageCount;
+  const navigationDisabled = disabled || state.pageCount <= 1;
+
+  const changePage = React.useCallback(
+    (nextPage: number) => {
+      const clampedPage = resolvePaginationPage(nextPage, state.pageCount);
+      if (passive || disabled || clampedPage === state.currentPage) return;
+      onPageChange?.(clampedPage);
+    },
+    [disabled, onPageChange, passive, state.currentPage, state.pageCount],
+  );
+
+  return (
+    <View align="center" direction="row" gap="xs" testID={testID}>
+      {showFirstLast ? (
+        <Button
+          disabled={navigationDisabled || state.currentPage === 1}
+          interactionPolicy={interactionPolicy}
+          onPress={() => changePage(1)}
+          size="s"
+          testID={testID ? `${testID}-first` : undefined}
+          variant="ghost"
+        >
+          {firstLabel}
+        </Button>
+      ) : null}
+      <Button
+        disabled={navigationDisabled || !canGoPrevious}
+        interactionPolicy={interactionPolicy}
+        onPress={() => changePage(state.currentPage - 1)}
+        size="s"
+        testID={testID ? `${testID}-previous` : undefined}
+        variant="ghost"
+      >
+        {previousLabel}
+      </Button>
+      {state.items.map((item, index) =>
+        item === 'ellipsis' ? (
+          <Text key={`ellipsis-${index}`} emphasis="muted" variant="bodySmall">
+            …
+          </Text>
+        ) : (
+          <Button
+            color={item === state.currentPage ? 'primary' : 'neutral'}
+            disabled={disabled}
+            interactionPolicy={interactionPolicy}
+            key={item}
+            onPress={() => changePage(item)}
+            size="s"
+            testID={testID ? `${testID}-page-${item}` : undefined}
+            variant={item === state.currentPage ? 'solid' : 'ghost'}
+          >
+            {item}
+          </Button>
+        ),
+      )}
+      <Button
+        disabled={navigationDisabled || !canGoNext}
+        interactionPolicy={interactionPolicy}
+        onPress={() => changePage(state.currentPage + 1)}
+        size="s"
+        testID={testID ? `${testID}-next` : undefined}
+        variant="ghost"
+      >
+        {nextLabel}
+      </Button>
+      {showFirstLast ? (
+        <Button
+          disabled={navigationDisabled || state.currentPage === state.pageCount}
+          interactionPolicy={interactionPolicy}
+          onPress={() => changePage(state.pageCount)}
+          size="s"
+          testID={testID ? `${testID}-last` : undefined}
+          variant="ghost"
+        >
+          {lastLabel}
+        </Button>
+      ) : null}
+    </View>
+  );
+}

package/src/features/pagination/paginationMeta.ts

@@ -0,0 +1,54 @@
+import type { ZoraComponentMeta } from '../../metadata/types';
+
+export const paginationMeta = {
+  name: 'Pagination',
+  category: 'component',
+  directManifestNode: true,
+  allowedChildren: [],
+  description: 'Navigates between pages of a finite result set without changing app routes.',
+  blueprint: {
+    label: 'Pagination',
+    defaultProps: { boundaryCount: 1, compact: false, page: 1, pageCount: 10, siblingCount: 1 },
+  },
+  bindings: {
+    props: {
+      page: {
+        label: 'Page',
+        description: 'Current one-based page.',
+        value: { type: 'number' },
+        acceptsFallback: true,
+        acceptsTransforms: true,
+      },
+    },
+    events: {
+      pageChange: {
+        label: 'Page change',
+        description: 'Runs when a new page is requested.',
+        payload: {
+          eventType: 'pagination.pageChange',
+          fields: [{ path: 'page', type: 'number', label: 'Page' }],
+        },
+      },
+    },
+  },
+  events: {
+    pageChange: {
+      label: 'Page change',
+      eventType: 'pagination.pageChange',
+      payloadFields: [{ path: 'page', type: 'number', label: 'Page' }],
+    },
+  },
+  props: {
+    page: { type: 'number', category: 'State', label: 'Page', default: 1 },
+    pageCount: { type: 'number', category: 'Data', label: 'Page count', default: 10 },
+    siblingCount: { type: 'number', category: 'Layout', label: 'Sibling count', default: 1 },
+    boundaryCount: { type: 'number', category: 'Layout', label: 'Boundary count', default: 1 },
+    showFirstLast: { type: 'boolean', category: 'Behavior', label: 'Show first/last' },
+    compact: { type: 'boolean', category: 'Layout', label: 'Compact', default: false },
+    disabled: { type: 'boolean', category: 'State', label: 'Disabled' },
+    previousLabel: { type: 'string', category: 'Content', label: 'Previous label' },
+    nextLabel: { type: 'string', category: 'Content', label: 'Next label' },
+    firstLabel: { type: 'string', category: 'Content', label: 'First label' },
+    lastLabel: { type: 'string', category: 'Content', label: 'Last label' },
+  },
+} as const satisfies ZoraComponentMeta;

package/src/features/pagination/public.ts

@@ -0,0 +1,2 @@
+export type { PaginationProps } from '../../types/pagination';
+export { Pagination } from './adapters/inbound/Pagination';

package/src/features/pagination/utils/resolvePaginationPage.ts

@@ -0,0 +1,6 @@
+/*** Clamps a requested pagination page to the valid one-based page range. */
+export function resolvePaginationPage(value: number, pageCount: number): number {
+  if (!Number.isFinite(value)) return 1;
+
+  return Math.min(Math.max(Math.trunc(value), 1), Math.max(pageCount, 1));
+}

package/src/features/pagination/utils/resolvePaginationState.test.ts

@@ -0,0 +1,29 @@
+import { describe, expect, it } from 'bun:test';
+
+import { resolvePaginationState } from './resolvePaginationState';
+
+describe('resolvePaginationState', () => {
+  it('inserts ellipses between boundaries and siblings', () => {
+    expect(
+      resolvePaginationState({
+        boundaryCount: 1,
+        compact: false,
+        page: 5,
+        pageCount: 10,
+        siblingCount: 1,
+      }).items,
+    ).toEqual([1, 'ellipsis', 4, 5, 6, 'ellipsis', 10]);
+  });
+
+  it('returns only the active page in compact mode', () => {
+    expect(
+      resolvePaginationState({
+        boundaryCount: 1,
+        compact: true,
+        page: 3,
+        pageCount: 8,
+        siblingCount: 1,
+      }).items,
+    ).toEqual([3]);
+  });
+});

package/src/features/pagination/utils/resolvePaginationState.ts

@@ -0,0 +1,70 @@
+import { resolvePaginationPage } from './resolvePaginationPage';
+
+/*** Normalizes pagination input and resolves visible page and ellipsis items. */
+export function resolvePaginationState({
+  page,
+  pageCount,
+  siblingCount,
+  boundaryCount,
+  compact,
+}: PaginationStateInput): PaginationState {
+  const normalizedPageCount = Math.max(0, Math.trunc(Number.isFinite(pageCount) ? pageCount : 0));
+  const currentPage = resolvePaginationPage(page, normalizedPageCount);
+  const safeSiblingCount = normalizeCount(siblingCount, 1);
+  const safeBoundaryCount = normalizeCount(boundaryCount, 1);
+
+  if (normalizedPageCount <= 0) {
+    return { currentPage, items: [], pageCount: normalizedPageCount };
+  }
+
+  if (compact) {
+    return { currentPage, items: [currentPage], pageCount: normalizedPageCount };
+  }
+
+  const boundaries = createRange(1, Math.min(safeBoundaryCount, normalizedPageCount));
+  const trailingBoundaries = createRange(
+    Math.max(normalizedPageCount - safeBoundaryCount + 1, 1),
+    normalizedPageCount,
+  );
+  const siblings = createRange(
+    Math.max(currentPage - safeSiblingCount, 1),
+    Math.min(currentPage + safeSiblingCount, normalizedPageCount),
+  );
+  const pages = [...new Set([...boundaries, ...siblings, ...trailingBoundaries])].sort(
+    (left, right) => left - right,
+  );
+  const items = pages.flatMap<PaginationItem>((nextPage, index) => {
+    const previousPage = index > 0 ? pages.at(index - 1) : undefined;
+    return previousPage !== undefined && nextPage - previousPage > 1
+      ? ['ellipsis', nextPage]
+      : [nextPage];
+  });
+
+  return { currentPage, items, pageCount: normalizedPageCount };
+}
+
+type PaginationItem = number | 'ellipsis';
+
+interface PaginationStateInput {
+  page: number;
+  pageCount: number;
+  siblingCount: number | undefined;
+  boundaryCount: number | undefined;
+  compact: boolean;
+}
+
+interface PaginationState {
+  currentPage: number;
+  pageCount: number;
+  items: readonly PaginationItem[];
+}
+
+/*** Creates an inclusive numeric range for pagination boundaries and siblings. */
+function createRange(start: number, end: number): number[] {
+  return end < start ? [] : Array.from({ length: end - start + 1 }, (_, index) => start + index);
+}
+
+/*** Normalizes optional pagination counts to finite non-negative integers. */
+function normalizeCount(value: number | undefined, fallback: number): number {
+  return value === undefined || !Number.isFinite(value) ? fallback : Math.max(0, Math.trunc(value));
+}

package/src/{patterns/tile-grid → features/palette-item/adapters/inbound}/PaletteItem.tsx

@@ -1,12 +1,12 @@
 import React from 'react';
 
-import { Card } from '../../features/card/public';
-import { Box } from '../../features/layout/public';
-import { Heading } from '../../features/typography/public';
-import { Text } from '../../features/typography/public';
-import { useZoraTheme } from '../../theme/useZoraTheme';
-import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
-import type { PaletteItemProps } from './types';
+import { useZoraTheme } from '../../../../theme/useZoraTheme';
+import { withZoraThemeScope } from '../../../../theme/withZoraThemeScope';
+import type { PaletteItemProps } from '../../../../types/palette-item';
+import { Card } from '../../../card/public';
+import { View } from '../../../layout/public';
+import { Heading } from '../../../typography/public';
+import { Text } from '../../../typography/public';
 
 function PaletteItemInner({
   themeId: _themeId,
@@ -38,8 +38,8 @@ function PaletteItemInner({
           : undefined
       }
     >
-      <Box p="xs" style={{ alignItems: 'center' }}>
-        {icon ? <Box pb="s">{/* Icon spec here */}</Box> : null}
+      <View p="xs" style={{ alignItems: 'center' }}>
+        {icon ? <View pb="s">{/* Icon spec here */}</View> : null}
         <Heading level={5} align="center">
           {title}
         </Heading>
@@ -48,8 +48,8 @@ function PaletteItemInner({
             {description}
           </Text>
         ) : null}
-        {badge ? <Box pt="xs">{badge}</Box> : null}
-      </Box>
+        {badge ? <View pt="xs">{badge}</View> : null}
+      </View>
     </Card>
   );
 }

package/src/{components/rating/meta.ts → features/palette-item/paletteItemMeta.ts}

@@ -1,10 +1,10 @@
 import type { ZoraComponentMeta } from '../../metadata';
 
-export const ratingMeta = {
-  name: 'Rating',
-  category: 'component',
+export const paletteItemMeta = {
+  name: 'PaletteItem',
+  category: 'pattern',
   directManifestNode: false,
   allowedChildren: [],
-  note: 'Feedback component; not represented as a manifest node in v1.',
+  note: 'Palette option pattern; not represented as a manifest node in v1.',
   props: {},
 } as const satisfies ZoraComponentMeta;

package/src/features/palette-item/public.ts

@@ -0,0 +1,2 @@
+export type { PaletteItemProps } from '../../types/palette-item';
+export { PaletteItem } from './adapters/inbound/PaletteItem';

package/src/features/popover-menu/adapters/inbound/PopoverMenu.tsx

@@ -9,7 +9,7 @@ import { useZoraTheme } from '../../../../theme/useZoraTheme';
 import { withZoraThemeScope } from '../../../../theme/withZoraThemeScope';
 import type { PopoverMenuAction, PopoverMenuProps } from '../../../../types/popover-menu';
 import { Icon } from '../../../icon/public';
-import { Box } from '../../../layout/public';
+import { View } from '../../../layout/public';
 
 /*** Presents a ZORA-styled action list through the Surface PopoverMenu capability. */
 export const PopoverMenu = withZoraThemeScope(PopoverMenuInner);
@@ -56,5 +56,5 @@ function renderActionLeading(action: PopoverMenuAction, iconColor: string): Reac
 
 /*** Wraps optional trailing action content in the ZORA layout boundary. */
 function renderActionTrailing(action: PopoverMenuAction): React.ReactNode {
-  return action.trailing === undefined ? undefined : <Box>{action.trailing}</Box>;
+  return action.trailing === undefined ? undefined : <View>{action.trailing}</View>;
 }

package/src/features/progress/adapters/inbound/Progress.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 import { useZoraTheme } from '../../../../theme/useZoraTheme';
 import { withZoraThemeScope } from '../../../../theme/withZoraThemeScope';
 import { type ProgressProps, resolveProgressRole } from '../../../../types/progress';
-import { Box } from '../../../layout/public';
+import { View } from '../../../layout/public';
 import { resolveProgressFraction } from '../../utils/resolveProgressFraction';
 
 function resolveProgressHeight(size: NonNullable<ProgressProps['size']>): number {
@@ -34,7 +34,7 @@ function ProgressInner({
   const role = resolveProgressRole(theme, color);
 
   return (
-    <Box
+    <View
       accessibilityRole="progressbar"
       bg={theme.semantics.neutral.surface}
       borderColor={theme.semantics.neutral.divider}
@@ -43,8 +43,8 @@ function ProgressInner({
       testID={testID}
       style={{ height, overflow: 'hidden' }}
     >
-      <Box bg={role.base} style={{ height: '100%', width: `${fraction * 100}%` }} />
-    </Box>
+      <View bg={role.base} style={{ height: '100%', width: `${fraction * 100}%` }} />
+    </View>
   );
 }
 

package/src/features/progress/adapters/inbound/ProgressRing.tsx

@@ -1,10 +1,10 @@
 import React from 'react';
-import { StyleSheet, View } from 'react-native';
+import { StyleSheet, View as ReactNativeView } from 'react-native';
 
 import { useZoraTheme } from '../../../../theme/useZoraTheme';
 import { withZoraThemeScope } from '../../../../theme/withZoraThemeScope';
 import { type ProgressRingProps, resolveProgressRole } from '../../../../types/progress';
-import { Stack } from '../../../layout/public';
+import { View } from '../../../layout/public';
 import { Text } from '../../../typography/public';
 import { resolveProgressFraction } from '../../utils/resolveProgressFraction';
 import { resolveProgressRingGeometry } from '../../utils/resolveProgressRingGeometry';
@@ -36,7 +36,7 @@ function ProgressRingInner({
   const segments = Array.from({ length: geometry.filledSegmentCount });
 
   return (
-    <View
+    <ReactNativeView
       accessibilityLabel={accessibilityLabel}
       accessibilityRole="progressbar"
       accessibilityValue={{
@@ -49,7 +49,7 @@ function ProgressRingInner({
       style={{ height: geometry.diameter, width: geometry.diameter }}
       testID={testID}
     >
-      <View
+      <ReactNativeView
         importantForAccessibility="no-hide-descendants"
         pointerEvents="none"
         style={styles.visual}
@@ -86,15 +86,15 @@ function ProgressRingInner({
             />
           </View>
         ))}
-      </View>
+      </ReactNativeView>
 
       {centerValue !== undefined || centerLabel !== undefined ? (
-        <View
+        <ReactNativeView
           importantForAccessibility="no-hide-descendants"
           pointerEvents="none"
           style={styles.center}
         >
-          <Stack align="center" gap="xxs" px="s">
+          <View align="center" gap="xxs" px="s">
             {centerValue !== undefined ? (
               <Text align="center" variant="lead" weight="bold">
                 {centerValue}
@@ -105,10 +105,10 @@ function ProgressRingInner({
                 {centerLabel}
               </Text>
             ) : null}
-          </Stack>
-        </View>
+          </View>
+        </ReactNativeView>
       ) : null}
-    </View>
+    </ReactNativeView>
   );
 }
 

package/src/features/rating/adapters/inbound/Rating.tsx

@@ -0,0 +1,70 @@
+import type { RoleSemantics, SurfaceTheme } from '@ankhorage/surface';
+
+import type { ZoraColor } from '../../../../internal/recipes';
+import { resolveIconSize } from '../../../../internal/recipes';
+import { useZoraTheme } from '../../../../theme/useZoraTheme';
+import { withZoraThemeScope } from '../../../../theme/withZoraThemeScope';
+import type { RatingProps } from '../../../../types/rating';
+import { Icon } from '../../../icon/public';
+import { View } from '../../../layout/public';
+import { resolveRatingSegments } from '../../utils/resolveRatingSegments';
+
+/*** Displays a read-only star rating with optional half steps. */
+export const Rating = withZoraThemeScope(RatingInner);
+
+/*** Resolves rating visuals from the active ZORA theme. */
+function RatingInner({
+  themeId: _themeId,
+  mode: _mode,
+  interactionPolicy: _interactionPolicy,
+  testID,
+  value,
+  max = 5,
+  color = 'warning',
+  size = 'm',
+}: RatingProps) {
+  const { theme } = useZoraTheme();
+  const role = resolveRatingRole(theme, color);
+  const segments = resolveRatingSegments({ value, max });
+  const iconSize = resolveIconSize(size);
+
+  return (
+    <View direction="row" align="center" gap="xxs" testID={testID} wrap="nowrap">
+      {segments.map((segment, index) => {
+        const name =
+          segment === 'full' ? 'star' : segment === 'half' ? 'star-half' : 'star-outline';
+        const segmentColor = segment === 'empty' ? theme.semantics.content.muted : role.base;
+        return (
+          <Icon key={`${index}-${segment}`} color={segmentColor} name={name} size={iconSize} />
+        );
+      })}
+    </View>
+  );
+}
+
+/*** Resolves the semantic theme role for a ZORA rating color. */
+function resolveRatingRole(theme: SurfaceTheme, color: ZoraColor): RoleSemantics {
+  switch (color) {
+    case 'secondary':
+      return theme.semantics.secondary;
+    case 'tertiary':
+      return theme.semantics.accent;
+    case 'quaternary':
+      return theme.semantics.highlight;
+    case 'error':
+      return theme.semantics.error;
+    case 'info':
+      return theme.semantics.info;
+    case 'primary':
+      return theme.semantics.action.primary;
+    case 'danger':
+      return theme.semantics.action.danger;
+    case 'success':
+      return theme.semantics.success;
+    case 'warning':
+      return theme.semantics.warning;
+    case 'neutral':
+    default:
+      return theme.semantics.action.neutral;
+  }
+}

package/src/features/rating/public.ts

@@ -0,0 +1,2 @@
+export type { RatingProps } from '../../types/rating';
+export { Rating } from './adapters/inbound/Rating';

package/src/features/rating/ratingMeta.ts

@@ -0,0 +1,44 @@
+import type { ZoraComponentMeta } from '../../metadata/types';
+
+export const ratingMeta = {
+  name: 'Rating',
+  category: 'component',
+  directManifestNode: true,
+  allowedChildren: [],
+  description: 'Displays a read-only star-based rating value.',
+  blueprint: { label: 'Rating', defaultProps: { color: 'warning', max: 5, size: 'm', value: 4.5 } },
+  bindings: {
+    props: {
+      value: {
+        label: 'Value',
+        description: 'Current rating value.',
+        value: { type: 'number' },
+        acceptsFallback: true,
+        acceptsTransforms: true,
+      },
+    },
+  },
+  props: {
+    value: { type: 'number', category: 'Data', label: 'Value' },
+    max: { type: 'number', category: 'Data', label: 'Maximum', default: 5 },
+    color: {
+      type: 'enum',
+      category: 'Style',
+      label: 'Color',
+      enum: [
+        'neutral',
+        'primary',
+        'secondary',
+        'tertiary',
+        'quaternary',
+        'success',
+        'warning',
+        'danger',
+        'error',
+        'info',
+      ],
+      default: 'warning',
+    },
+    size: { type: 'enum', category: 'Style', label: 'Size', enum: ['s', 'm', 'l'], default: 'm' },
+  },
+} as const satisfies ZoraComponentMeta;