{"id":50156593,"url":"https://github.com/ankhorage/zora-tabletop","last_synced_at":"2026-05-27T16:00:56.988Z","repository":{"id":359560740,"uuid":"1246635839","full_name":"ankhorage/zora-tabletop","owner":"ankhorage","description":"Reusable tabletop, playing-card, seat, token, and card-game presentation components for React Native and React Native Web.","archived":false,"fork":false,"pushed_at":"2026-05-22T12:33:22.000Z","size":178,"stargazers_count":1,"open_issues_count":1,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-05-22T17:44:03.089Z","etag":null,"topics":["card-game","cards","expo","react-native","react-native-web","tabletop","ui-kit","zora"],"latest_commit_sha":null,"homepage":null,"language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ankhorage.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":"AGENTS.md","dco":null,"cla":null}},"created_at":"2026-05-22T11:49:42.000Z","updated_at":"2026-05-22T12:33:30.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/ankhorage/zora-tabletop","commit_stats":null,"previous_names":["ankhorage/zora-tabletop"],"tags_count":4,"template":false,"template_full_name":null,"purl":"pkg:github/ankhorage/zora-tabletop","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ankhorage%2Fzora-tabletop","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ankhorage%2Fzora-tabletop/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ankhorage%2Fzora-tabletop/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ankhorage%2Fzora-tabletop/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ankhorage","download_url":"https://codeload.github.com/ankhorage/zora-tabletop/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ankhorage%2Fzora-tabletop/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":33573255,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-05-27T02:00:06.184Z","response_time":53,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["card-game","cards","expo","react-native","react-native-web","tabletop","ui-kit","zora"],"created_at":"2026-05-24T12:01:42.611Z","updated_at":"2026-05-27T16:00:56.982Z","avatar_url":"https://github.com/ankhorage.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003c!-- markdownlint-disable MD013 MD033 --\u003e\n\u003c!-- This file is generated by Paradox. Do not edit manually. --\u003e\n\n# @ankhorage/zora-tabletop\n\n![license: MIT](././paradox/badges/license.svg) ![npm: v0.0.4](././paradox/badges/npm.svg) ![runtime: bun](././paradox/badges/runtime.svg) ![typescript: strict](././paradox/badges/typescript.svg) ![eslint: checked](././paradox/badges/eslint.svg) ![prettier: checked](././paradox/badges/prettier.svg) ![build: checked](././paradox/badges/build.svg) ![tests: checked](././paradox/badges/tests.svg) ![docs: paradox](././paradox/badges/docs.svg)\n\nReusable tabletop, playing-card, seat, token, and card-game presentation components for React Native and React Native Web.\n\n## Usage\n\n### Minimal tabletop app root.\n\nUse `TabletopTable` inside a ZORA app shell to render generic seats, visible\ncards, face-down cards, and center-table labels without adding game rules.\n\nSource: `examples/basic-tabletop/App.tsx`\n\n```tsx\nimport {\n  AppBar,\n  AppShell,\n  Screen,\n  ScreenSection,\n  ZoraProvider,\n  type ZoraTheme,\n} from '@ankhorage/zora';\nimport { type TabletopSeatState, TabletopTable } from '@ankhorage/zora-tabletop';\n\nconst tabletopTheme: ZoraTheme = {\n  id: 'basic-tabletop',\n  name: 'Basic tabletop',\n  appCategory: 'games',\n  primaryColor: '#0f766e',\n  harmony: 'analogous',\n};\n\nconst seats: readonly TabletopSeatState[] = [\n  {\n    id: 'seat-a',\n    label: 'Seat A',\n    sublabel: 'Ready',\n    cards: [\n      { rank: 'A', suit: 'spades' },\n      { rank: 'K', suit: 'hearts' },\n    ],\n    selected: true,\n    tokenLabel: 'Active',\n  },\n  {\n    id: 'seat-b',\n    label: 'Seat B',\n    sublabel: 'Hidden cards',\n    faceDownCards: 2,\n  },\n  {\n    id: 'seat-c',\n    label: 'Seat C',\n    sublabel: 'Paused',\n    faceDownCards: 2,\n    muted: true,\n  },\n];\n\nexport default function BasicTabletopApp() {\n  return (\n    \u003cZoraProvider initialMode=\"light\" theme={tabletopTheme}\u003e\n      \u003cAppShell header={\u003cAppBar title=\"Tabletop\" subtitle=\"Reusable card-game UI\" /\u003e}\u003e\n        \u003cScreen\u003e\n          \u003cScreenSection\n            title=\"Table state\"\n            description=\"Map app data into generic seats and cards.\"\n          \u003e\n            \u003cTabletopTable\n              seats={seats}\n              centerCards={[\n                { rank: 'Q', suit: 'diamonds' },\n                { rank: 'J', suit: 'clubs' },\n                { rank: '10', suit: 'spades' },\n              ]}\n              centerLabel=\"Round 1\"\n              centerSublabel=\"Shared cards\"\n            /\u003e\n          \u003c/ScreenSection\u003e\n        \u003c/Screen\u003e\n      \u003c/AppShell\u003e\n    \u003c/ZoraProvider\u003e\n  );\n}\n```\n\n## Generated documentation\n\n- [Interactive documentation app](././paradox/index.html)\n- [Public API reference](././paradox/exports.md)\n- [Component registry](././paradox/components.md)\n- [Architecture overview](././paradox/diagrams/architecture-overview.mmd)\n- [Module relationships](././paradox/diagrams/module-relationships.mmd)\n- [Export graph](././paradox/diagrams/export-graph.mmd)\n- [CardBack sequence](././paradox/diagrams/sequences/card-back.mmd)\n- [CardHand sequence](././paradox/diagrams/sequences/card-hand.mmd)\n- [PlayingCard sequence](././paradox/diagrams/sequences/playing-card.mmd)\n- [TabletopTable sequence](././paradox/diagrams/sequences/tabletop-table.mmd)\n\n## Public API\n\n### Components\n\n\u003cdetails\u003e\n\u003csummary\u003eCardBack\u003c/summary\u003e\n\n```ts\nCardBack({\n  size = 'medium',\n  muted = false,\n  accessibilityLabel,\n  colorScheme,\n  testID,\n}: CardBackProps) =\u003e React.JSX.Element\n```\n\nFace-down playing-card primitive for hidden cards and decks.\n\nUse `CardBack` when a card should be represented visually without exposing its\nrank or suit. The component keeps a generic accessible label for hidden cards.\n\n#### Hidden cards\n\n```tsx\n\u003cCardBack size=\"small\" /\u003e\n```\n\nRelated types: `CardBackProps`\n\n\u003cdetails\u003e\n\u003csummary\u003eProps\u003c/summary\u003e\n\n| Prop               | Type                                  | Required | Default    | Description |\n| ------------------ | ------------------------------------- | -------- | ---------- | ----------- |\n| accessibilityLabel | `string \\| undefined`                 | no       | —          |             |\n| colorScheme        | `TabletopColorOverrides \\| undefined` | no       | —          |             |\n| muted              | `boolean \\| undefined`                | no       | `false`    |             |\n| size               | `TabletopCardSize \\| undefined`       | no       | `'medium'` |             |\n| testID             | `string \\| undefined`                 | no       | —          |             |\n\n\u003c/details\u003e\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003eCardHand\u003c/summary\u003e\n\n```ts\nCardHand({\n  cards = [],\n  faceDownCards = 0,\n  size = 'medium',\n  muted = false,\n  colorScheme,\n  accessibilityLabel,\n  testID,\n}: CardHandProps) =\u003e React.JSX.Element\n```\n\nCompact row of visible and face-down playing cards.\n\nUse `CardHand` when a seat, pile, or custom layout needs to show multiple cards\nwith consistent spacing, sizing, and muted state handling.\n\n#### Mixed hand\n\n```tsx\n\u003cCardHand cards={[{ rank: 'Q', suit: 'hearts' }]} faceDownCards={1} /\u003e\n```\n\nRelated types: `CardHandProps`\n\n\u003cdetails\u003e\n\u003csummary\u003eProps\u003c/summary\u003e\n\n| Prop               | Type                                       | Required | Default    | Description |\n| ------------------ | ------------------------------------------ | -------- | ---------- | ----------- |\n| accessibilityLabel | `string \\| undefined`                      | no       | —          |             |\n| cards              | `readonly PlayingCardValue[] \\| undefined` | no       | `[]`       |             |\n| colorScheme        | `TabletopColorOverrides \\| undefined`      | no       | —          |             |\n| faceDownCards      | `number \\| undefined`                      | no       | `0`        |             |\n| muted              | `boolean \\| undefined`                     | no       | `false`    |             |\n| size               | `TabletopCardSize \\| undefined`            | no       | `'medium'` |             |\n| testID             | `string \\| undefined`                      | no       | —          |             |\n\n\u003c/details\u003e\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003ePlayingCard\u003c/summary\u003e\n\n```ts\nPlayingCard({\n  card,\n  size = 'medium',\n  selected = false,\n  muted = false,\n  accessibilityLabel,\n  colorScheme,\n  testID,\n}: PlayingCardProps) =\u003e React.JSX.Element\n```\n\nTheme-aware face-up playing card primitive.\n\nUse `PlayingCard` for visible card values in hands, shared table cards, piles,\nor custom tabletop layouts. The component renders rank and suit glyphs and\nexposes an accessible card label by default.\n\n#### Face-up card\n\n```tsx\n\u003cPlayingCard card={{ rank: 'A', suit: 'spades' }} selected /\u003e\n```\n\nRelated types: `PlayingCardProps`\n\n\u003cdetails\u003e\n\u003csummary\u003eProps\u003c/summary\u003e\n\n| Prop               | Type                                  | Required | Default    | Description |\n| ------------------ | ------------------------------------- | -------- | ---------- | ----------- |\n| accessibilityLabel | `string \\| undefined`                 | no       | —          |             |\n| card               | `PlayingCardValue`                    | yes      | —          |             |\n| colorScheme        | `TabletopColorOverrides \\| undefined` | no       | —          |             |\n| muted              | `boolean \\| undefined`                | no       | `false`    |             |\n| selected           | `boolean \\| undefined`                | no       | `false`    |             |\n| size               | `TabletopCardSize \\| undefined`       | no       | `'medium'` |             |\n| testID             | `string \\| undefined`                 | no       | —          |             |\n\n\u003c/details\u003e\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003eTabletopTable\u003c/summary\u003e\n\n```ts\nTabletopTable({\n  seats,\n  centerCards = [],\n  centerLabel,\n  centerSublabel,\n  shape = 'oval',\n  seatCount,\n  cardSize = 'small',\n  disabled = false,\n  colorScheme,\n  accessibilityLabel,\n  testID,\n}: TabletopTableProps) =\u003e React.JSX.Element\n```\n\nResponsive tabletop surface for generic card-game and board-game scenes.\n\nUse `TabletopTable` to arrange seats around a themed table surface, display\nshared center cards, and show neutral seat labels/tokens without embedding game\nrules into the component.\n\n#### Basic table\n\n```tsx\n\u003cTabletopTable seats={seats} centerCards={[{ rank: 'A', suit: 'spades' }]} centerLabel=\"Round 1\" /\u003e\n```\n\nRelated types: `TabletopTableProps`\n\n\u003cdetails\u003e\n\u003csummary\u003eProps\u003c/summary\u003e\n\n| Prop               | Type                                       | Required | Default   | Description |\n| ------------------ | ------------------------------------------ | -------- | --------- | ----------- |\n| accessibilityLabel | `string \\| undefined`                      | no       | —         |             |\n| cardSize           | `TabletopCardSize \\| undefined`            | no       | `'small'` |             |\n| centerCards        | `readonly PlayingCardValue[] \\| undefined` | no       | `[]`      |             |\n| centerLabel        | `React.ReactNode \\| undefined`             | no       | —         |             |\n| centerSublabel     | `React.ReactNode \\| undefined`             | no       | —         |             |\n| colorScheme        | `TabletopColorOverrides \\| undefined`      | no       | —         |             |\n| disabled           | `boolean \\| undefined`                     | no       | `false`   |             |\n| seatCount          | `TabletopSeatCount \\| undefined`           | no       | —         |             |\n| seats              | `readonly TabletopSeatState[]`             | yes      | —         |             |\n| shape              | `TabletopShape \\| undefined`               | no       | `'oval'`  |             |\n| testID             | `string \\| undefined`                      | no       | —         |             |\n\n\u003c/details\u003e\n\n\u003c/details\u003e\n\n### Utilities\n\n\u003cdetails\u003e\n\u003csummary\u003ecreateTabletopColorScheme\u003c/summary\u003e\n\n```ts\ncreateTabletopColorScheme(theme: TabletopColorThemeShape, overrides?: Partial\u003cTabletopColorScheme\u003e) =\u003e TabletopColorScheme\n```\n\nCreates the theme-derived color palette used by tabletop primitives.\n\nUse `createTabletopColorScheme` when custom components need to align with the\nsame card, table, seat, token, and contrast-aware foreground colors as the\nbuilt-in tabletop components.\n\n#### Custom color scheme\n\n```ts\nconst colors = createTabletopColorScheme(theme, { tableFelt: '#065f46' });\n```\n\nModule: `src/colors.ts`\nSource: `src/colors.ts:73:1`\nRelated symbols: `TabletopColorScheme`\n\n\u003c/details\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fankhorage%2Fzora-tabletop","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fankhorage%2Fzora-tabletop","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fankhorage%2Fzora-tabletop/lists"}