@ankhorage/zora-tabletop 0.0.1 → 0.0.3

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @ankhorage/zora-tabletop
 
+## 0.0.3
+
+### Patch Changes
+
+- 25a2245: Add Paradox README and usage documentation comments for tabletop UI exports.
+
+## 0.0.2
+
+### Patch Changes
+
+- 3b3651b: Improve tabletop label readability by deriving contrast-aware text colors for table and seat surfaces.
+
 ## 0.0.1
 
 ### Patch Changes

package/README.md

@@ -3,10 +3,92 @@
 
 # @ankhorage/zora-tabletop
 
-![license: MIT](././paradox/badges/license.svg) ![npm: v0.0.0](././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)
+![license: MIT](././paradox/badges/license.svg) ![npm: v0.0.2](././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)
 
 Reusable tabletop, playing-card, seat, token, and card-game presentation components for React Native and React Native Web.
 
+## Usage
+
+### Minimal tabletop app root.
+
+Use `TabletopTable` inside a ZORA app shell to render generic seats, visible
+cards, face-down cards, and center-table labels without adding game rules.
+
+Source: `examples/basic-tabletop/App.tsx`
+
+```tsx
+import {
+  AppBar,
+  AppShell,
+  Screen,
+  ScreenSection,
+  ZoraProvider,
+  type ZoraTheme,
+} from '@ankhorage/zora';
+import { type TabletopSeatState, TabletopTable } from '@ankhorage/zora-tabletop';
+
+const tabletopTheme: ZoraTheme = {
+  id: 'basic-tabletop',
+  name: 'Basic tabletop',
+  appCategory: 'games',
+  primaryColor: '#0f766e',
+  harmony: 'analogous',
+};
+
+const seats: readonly TabletopSeatState[] = [
+  {
+    id: 'seat-a',
+    label: 'Seat A',
+    sublabel: 'Ready',
+    cards: [
+      { rank: 'A', suit: 'spades' },
+      { rank: 'K', suit: 'hearts' },
+    ],
+    selected: true,
+    tokenLabel: 'Active',
+  },
+  {
+    id: 'seat-b',
+    label: 'Seat B',
+    sublabel: 'Hidden cards',
+    faceDownCards: 2,
+  },
+  {
+    id: 'seat-c',
+    label: 'Seat C',
+    sublabel: 'Paused',
+    faceDownCards: 2,
+    muted: true,
+  },
+];
+
+export default function BasicTabletopApp() {
+  return (
+    <ZoraProvider initialMode="light" theme={tabletopTheme}>
+      <AppShell header={<AppBar title="Tabletop" subtitle="Reusable card-game UI" />}>
+        <Screen>
+          <ScreenSection
+            title="Table state"
+            description="Map app data into generic seats and cards."
+          >
+            <TabletopTable
+              seats={seats}
+              centerCards={[
+                { rank: 'Q', suit: 'diamonds' },
+                { rank: 'J', suit: 'clubs' },
+                { rank: '10', suit: 'spades' },
+              ]}
+              centerLabel="Round 1"
+              centerSublabel="Shared cards"
+            />
+          </ScreenSection>
+        </Screen>
+      </AppShell>
+    </ZoraProvider>
+  );
+}
+```
+
 ## Generated documentation
 
 - [Interactive documentation app](././paradox/index.html)
@@ -20,79 +102,219 @@ Reusable tabletop, playing-card, seat, token, and card-game presentation compone
 - [PlayingCard sequence](././paradox/diagrams/sequences/playing-card.mmd)
 - [TabletopTable sequence](././paradox/diagrams/sequences/tabletop-table.mmd)
 
-## Architecture preview
+## Public API
+
+### Components
+
+<details>
+<summary>CardBack</summary>
+
+```ts
+CardBack({
+  size = 'medium',
+  muted = false,
+  accessibilityLabel,
+  colorScheme,
+  testID,
+}: CardBackProps) => React.JSX.Element
+```
+
+Face-down playing-card primitive for hidden cards and decks.
+
+Use `CardBack` when a card should be represented visually without exposing its
+rank or suit. The component keeps a generic accessible label for hidden cards.
+
+#### Hidden cards
+
+```tsx
+<CardBack size="small" />
+```
+
+Related types: `CardBackProps`
+
+<details>
+<summary>Props</summary>
+
+| Prop               | Type                                  | Required | Default    | Description |
+| ------------------ | ------------------------------------- | -------- | ---------- | ----------- |
+| accessibilityLabel | `string \| undefined`                 | no       | —          |             |
+| colorScheme        | `TabletopColorOverrides \| undefined` | no       | —          |             |
+| muted              | `boolean \| undefined`                | no       | `false`    |             |
+| size               | `TabletopCardSize \| undefined`       | no       | `'medium'` |             |
+| testID             | `string \| undefined`                 | no       | —          |             |
+
+</details>
+
+</details>
+
+<details>
+<summary>CardHand</summary>
+
+```ts
+CardHand({
+  cards = [],
+  faceDownCards = 0,
+  size = 'medium',
+  muted = false,
+  colorScheme,
+  accessibilityLabel,
+  testID,
+}: CardHandProps) => React.JSX.Element
+```
+
+Compact row of visible and face-down playing cards.
+
+Use `CardHand` when a seat, pile, or custom layout needs to show multiple cards
+with consistent spacing, sizing, and muted state handling.
+
+#### Mixed hand
+
+```tsx
+<CardHand cards={[{ rank: 'Q', suit: 'hearts' }]} faceDownCards={1} />
+```
+
+Related types: `CardHandProps`
+
+<details>
+<summary>Props</summary>
+
+| Prop               | Type                                       | Required | Default    | Description |
+| ------------------ | ------------------------------------------ | -------- | ---------- | ----------- |
+| accessibilityLabel | `string \| undefined`                      | no       | —          |             |
+| cards              | `readonly PlayingCardValue[] \| undefined` | no       | `[]`       |             |
+| colorScheme        | `TabletopColorOverrides \| undefined`      | no       | —          |             |
+| faceDownCards      | `number \| undefined`                      | no       | `0`        |             |
+| muted              | `boolean \| undefined`                     | no       | `false`    |             |
+| size               | `TabletopCardSize \| undefined`            | no       | `'medium'` |             |
+| testID             | `string \| undefined`                      | no       | —          |             |
+
+</details>
+
+</details>
+
+<details>
+<summary>PlayingCard</summary>
+
+```ts
+PlayingCard({
+  card,
+  size = 'medium',
+  selected = false,
+  muted = false,
+  accessibilityLabel,
+  colorScheme,
+  testID,
+}: PlayingCardProps) => React.JSX.Element
+```
+
+Theme-aware face-up playing card primitive.
+
+Use `PlayingCard` for visible card values in hands, shared table cards, piles,
+or custom tabletop layouts. The component renders rank and suit text and exposes
+an accessible card label by default.
+
+#### Face-up card
+
+```tsx
+<PlayingCard card={{ rank: 'A', suit: 'spades' }} selected />
+```
+
+Related types: `PlayingCardProps`
 
 <details>
-<summary>Architecture overview</summary>
-
-```mermaid
-graph TD
-  package__ankhorage_zora_tabletop["@ankhorage/zora-tabletop"]
-  entrypoint_src_index_ts["src/index.ts"]
-  package__ankhorage_zora_tabletop --> entrypoint_src_index_ts
-  module_src_cardLabel_ts["src/cardLabel.ts"]
-  package__ankhorage_zora_tabletop -.-> module_src_cardLabel_ts
-  module_src_cardLabel_ts --> module_src_types_ts
-  module_src_cardSizing_ts["src/cardSizing.ts"]
-  package__ankhorage_zora_tabletop -.-> module_src_cardSizing_ts
-  module_src_cardSizing_ts --> module_src_types_ts
-  module_src_colors_ts["src/colors.ts"]
-  package__ankhorage_zora_tabletop -.-> module_src_colors_ts
-  module_src_components_card_back_CardBack_tsx["src/components/card-back/CardBack.tsx"]
-  package__ankhorage_zora_tabletop -.-> module_src_components_card_back_CardBack_tsx
-  module_src_components_card_back_CardBack_tsx --> module_src_cardLabel_ts
-  module_src_components_card_back_CardBack_tsx --> module_src_cardSizing_ts
-  module_src_components_card_back_CardBack_tsx --> module_src_colors_ts
-  module_src_components_card_back_CardBack_tsx --> module_src_components_card_back_types_ts
-  module_src_components_card_back_index_ts["src/components/card-back/index.ts"]
-  package__ankhorage_zora_tabletop -.-> module_src_components_card_back_index_ts
-  module_src_components_card_back_types_ts["src/components/card-back/types.ts"]
-  package__ankhorage_zora_tabletop -.-> module_src_components_card_back_types_ts
-  module_src_components_card_back_types_ts --> module_src_colors_ts
-  module_src_components_card_back_types_ts --> module_src_types_ts
-  module_src_components_card_hand_CardHand_tsx["src/components/card-hand/CardHand.tsx"]
-  package__ankhorage_zora_tabletop -.-> module_src_components_card_hand_CardHand_tsx
-  module_src_components_card_hand_CardHand_tsx --> module_src_components_card_back_index_ts
-  module_src_components_card_hand_CardHand_tsx --> module_src_components_card_hand_types_ts
-  module_src_components_card_hand_CardHand_tsx --> module_src_components_playing_card_index_ts
-  module_src_components_card_hand_index_ts["src/components/card-hand/index.ts"]
-  package__ankhorage_zora_tabletop -.-> module_src_components_card_hand_index_ts
-  module_src_components_card_hand_types_ts["src/components/card-hand/types.ts"]
-  package__ankhorage_zora_tabletop -.-> module_src_components_card_hand_types_ts
-  module_src_components_card_hand_types_ts --> module_src_colors_ts
-  module_src_components_card_hand_types_ts --> module_src_types_ts
-  module_src_components_playing_card_index_ts["src/components/playing-card/index.ts"]
-  package__ankhorage_zora_tabletop -.-> module_src_components_playing_card_index_ts
-  module_src_components_playing_card_PlayingCard_tsx["src/components/playing-card/PlayingCard.tsx"]
-  package__ankhorage_zora_tabletop -.-> module_src_components_playing_card_PlayingCard_tsx
-  module_src_components_playing_card_PlayingCard_tsx --> module_src_cardLabel_ts
-  module_src_components_playing_card_PlayingCard_tsx --> module_src_cardSizing_ts
-  module_src_components_playing_card_PlayingCard_tsx --> module_src_colors_ts
-  module_src_components_playing_card_PlayingCard_tsx --> module_src_components_playing_card_types_ts
-  module_src_components_playing_card_PlayingCard_tsx --> module_src_types_ts
-  module_src_components_playing_card_types_ts["src/components/playing-card/types.ts"]
-  package__ankhorage_zora_tabletop -.-> module_src_components_playing_card_types_ts
-  module_src_components_playing_card_types_ts --> module_src_colors_ts
-  module_src_components_playing_card_types_ts --> module_src_types_ts
-  module_src_components_tabletop_table_index_ts["src/components/tabletop-table/index.ts"]
-  package__ankhorage_zora_tabletop -.-> module_src_components_tabletop_table_index_ts
-  module_src_components_tabletop_table_TabletopTable_tsx["src/components/tabletop-table/TabletopTable.tsx"]
-  package__ankhorage_zora_tabletop -.-> module_src_components_tabletop_table_TabletopTable_tsx
-  module_src_components_tabletop_table_TabletopTable_tsx --> module_src_colors_ts
-  module_src_components_tabletop_table_TabletopTable_tsx --> module_src_components_card_hand_index_ts
-  module_src_components_tabletop_table_TabletopTable_tsx --> module_src_components_tabletop_table_types_ts
-  module_src_components_tabletop_table_TabletopTable_tsx --> module_src_tablePositions_ts
-  module_src_components_tabletop_table_TabletopTable_tsx --> module_src_types_ts
-  module_src_components_tabletop_table_types_ts["src/components/tabletop-table/types.ts"]
-  package__ankhorage_zora_tabletop -.-> module_src_components_tabletop_table_types_ts
-  module_src_components_tabletop_table_types_ts --> module_src_colors_ts
-  module_src_components_tabletop_table_types_ts --> module_src_types_ts
-  module_src_index_ts["src/index.ts"]
-  module_src_tablePositions_ts["src/tablePositions.ts"]
-  package__ankhorage_zora_tabletop -.-> module_src_tablePositions_ts
-  module_src_tablePositions_ts --> module_src_types_ts
-  module_src_types_ts["src/types.ts"]
-  package__ankhorage_zora_tabletop -.-> module_src_types_ts
+<summary>Props</summary>
+
+| Prop               | Type                                  | Required | Default    | Description |
+| ------------------ | ------------------------------------- | -------- | ---------- | ----------- |
+| accessibilityLabel | `string \| undefined`                 | no       | —          |             |
+| card               | `PlayingCardValue`                    | yes      | —          |             |
+| colorScheme        | `TabletopColorOverrides \| undefined` | no       | —          |             |
+| muted              | `boolean \| undefined`                | no       | `false`    |             |
+| selected           | `boolean \| undefined`                | no       | `false`    |             |
+| size               | `TabletopCardSize \| undefined`       | no       | `'medium'` |             |
+| testID             | `string \| undefined`                 | no       | —          |             |
+
+</details>
+
+</details>
+
+<details>
+<summary>TabletopTable</summary>
+
+```ts
+TabletopTable({
+  seats,
+  centerCards = [],
+  centerLabel,
+  centerSublabel,
+  shape = 'oval',
+  seatCount,
+  cardSize = 'small',
+  disabled = false,
+  colorScheme,
+  accessibilityLabel,
+  testID,
+}: TabletopTableProps) => React.JSX.Element
 ```
 
+Responsive tabletop surface for generic card-game and board-game scenes.
+
+Use `TabletopTable` to arrange seats around a themed table surface, display
+shared center cards, and show neutral seat labels/tokens without embedding game
+rules into the component.
+
+#### Basic table
+
+```tsx
+<TabletopTable seats={seats} centerCards={[{ rank: 'A', suit: 'spades' }]} centerLabel="Round 1" />
+```
+
+Related types: `TabletopTableProps`
+
+<details>
+<summary>Props</summary>
+
+| Prop               | Type                                       | Required | Default   | Description |
+| ------------------ | ------------------------------------------ | -------- | --------- | ----------- |
+| accessibilityLabel | `string \| undefined`                      | no       | —         |             |
+| cardSize           | `TabletopCardSize \| undefined`            | no       | `'small'` |             |
+| centerCards        | `readonly PlayingCardValue[] \| undefined` | no       | `[]`      |             |
+| centerLabel        | `React.ReactNode \| undefined`             | no       | —         |             |
+| centerSublabel     | `React.ReactNode \| undefined`             | no       | —         |             |
+| colorScheme        | `TabletopColorOverrides \| undefined`      | no       | —         |             |
+| disabled           | `boolean \| undefined`                     | no       | `false`   |             |
+| seatCount          | `TabletopSeatCount \| undefined`           | no       | —         |             |
+| seats              | `readonly TabletopSeatState[]`             | yes      | —         |             |
+| shape              | `TabletopShape \| undefined`               | no       | `'oval'`  |             |
+| testID             | `string \| undefined`                      | no       | —         |             |
+
+</details>
+
+</details>
+
+### Utilities
+
+<details>
+<summary>createTabletopColorScheme</summary>
+
+```ts
+createTabletopColorScheme(theme: TabletopColorThemeShape, overrides?: Partial<TabletopColorScheme>) => TabletopColorScheme
+```
+
+Creates the theme-derived color palette used by tabletop primitives.
+
+Use `createTabletopColorScheme` when custom components need to align with the
+same card, table, seat, token, and contrast-aware foreground colors as the
+built-in tabletop components.
+
+#### Custom color scheme
+
+```ts
+const colors = createTabletopColorScheme(theme, { tableFelt: '#065f46' });
+```
+
+Module: `src/colors.ts`
+Source: `src/colors.ts:73:1`
+Related symbols: `TabletopColorScheme`
+
 </details>

package/dist/colors.d.ts

@@ -7,11 +7,15 @@ export interface TabletopColorScheme {
     readonly mutedText: string;
     readonly redSuitText: string;
     readonly seatBorder: string;
+    readonly seatMutedText: string;
     readonly seatSelectedBorder: string;
     readonly seatSurface: string;
+    readonly seatText: string;
     readonly tableBorder: string;
     readonly tableFelt: string;
     readonly tableInnerBorder: string;
+    readonly tableMutedText: string;
+    readonly tableText: string;
     readonly tokenSurface: string;
     readonly tokenText: string;
 }
@@ -40,5 +44,18 @@ export interface TabletopColorThemeShape {
         };
     };
 }
+/***
+ * Creates the theme-derived color palette used by tabletop primitives.
+ *
+ * Use `createTabletopColorScheme` when custom components need to align with the
+ * same card, table, seat, token, and contrast-aware foreground colors as the
+ * built-in tabletop components.
+ *
+ * @readme
+ * @example Custom color scheme
+ * ```ts
+ * const colors = createTabletopColorScheme(theme, { tableFelt: '#065f46' });
+ * ```
+ */
 export declare function createTabletopColorScheme(theme: TabletopColorThemeShape, overrides?: TabletopColorOverrides): TabletopColorScheme;
 //# sourceMappingURL=colors.d.ts.map

package/dist/colors.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"colors.d.ts","sourceRoot":"","sources":["../src/colors.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,mBAAmB;IAClC,QAAQ,CAAC,QAAQ,EAAE,MAAM,CAAC;IAC1B,QAAQ,CAAC,cAAc,EAAE,MAAM,CAAC;IAChC,QAAQ,CAAC,UAAU,EAAE,MAAM,CAAC;IAC5B,QAAQ,CAAC,WAAW,EAAE,MAAM,CAAC;IAC7B,QAAQ,CAAC,QAAQ,EAAE,MAAM,CAAC;IAC1B,QAAQ,CAAC,SAAS,EAAE,MAAM,CAAC;IAC3B,QAAQ,CAAC,WAAW,EAAE,MAAM,CAAC;IAC7B,QAAQ,CAAC,UAAU,EAAE,MAAM,CAAC;IAC5B,QAAQ,CAAC,kBAAkB,EAAE,MAAM,CAAC;IACpC,QAAQ,CAAC,WAAW,EAAE,MAAM,CAAC;IAC7B,QAAQ,CAAC,WAAW,EAAE,MAAM,CAAC;IAC7B,QAAQ,CAAC,SAAS,EAAE,MAAM,CAAC;IAC3B,QAAQ,CAAC,gBAAgB,EAAE,MAAM,CAAC;IAClC,QAAQ,CAAC,YAAY,EAAE,MAAM,CAAC;IAC9B,QAAQ,CAAC,SAAS,EAAE,MAAM,CAAC;CAC5B;AAED,MAAM,MAAM,sBAAsB,GAAG,OAAO,CAAC,mBAAmB,CAAC,CAAC;AAElE,MAAM,WAAW,uBAAuB;IACtC,SAAS,EAAE;QACT,MAAM,EAAE;YACN,OAAO,EAAE;gBACP,IAAI,EAAE,MAAM,CAAC;gBACb,MAAM,EAAE,MAAM,CAAC;aAChB,CAAC;SACH,CAAC;QACF,OAAO,EAAE;YACP,OAAO,EAAE,MAAM,CAAC;YAChB,KAAK,EAAE,MAAM,CAAC;SACf,CAAC;QACF,OAAO,EAAE;YACP,MAAM,EAAE,MAAM,CAAC;YACf,OAAO,EAAE,MAAM,CAAC;YAChB,OAAO,EAAE,MAAM,CAAC;YAChB,YAAY,EAAE,MAAM,CAAC;SACtB,CAAC;QACF,OAAO,EAAE;YACP,IAAI,EAAE,MAAM,CAAC;YACb,MAAM,EAAE,MAAM,CAAC;SAChB,CAAC;KACH,CAAC;CACH;AAED,wBAAgB,yBAAyB,CACvC,KAAK,EAAE,uBAAuB,EAC9B,SAAS,GAAE,sBAA2B,GACrC,mBAAmB,CAkBrB"}
+{"version":3,"file":"colors.d.ts","sourceRoot":"","sources":["../src/colors.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,mBAAmB;IAClC,QAAQ,CAAC,QAAQ,EAAE,MAAM,CAAC;IAC1B,QAAQ,CAAC,cAAc,EAAE,MAAM,CAAC;IAChC,QAAQ,CAAC,UAAU,EAAE,MAAM,CAAC;IAC5B,QAAQ,CAAC,WAAW,EAAE,MAAM,CAAC;IAC7B,QAAQ,CAAC,QAAQ,EAAE,MAAM,CAAC;IAC1B,QAAQ,CAAC,SAAS,EAAE,MAAM,CAAC;IAC3B,QAAQ,CAAC,WAAW,EAAE,MAAM,CAAC;IAC7B,QAAQ,CAAC,UAAU,EAAE,MAAM,CAAC;IAC5B,QAAQ,CAAC,aAAa,EAAE,MAAM,CAAC;IAC/B,QAAQ,CAAC,kBAAkB,EAAE,MAAM,CAAC;IACpC,QAAQ,CAAC,WAAW,EAAE,MAAM,CAAC;IAC7B,QAAQ,CAAC,QAAQ,EAAE,MAAM,CAAC;IAC1B,QAAQ,CAAC,WAAW,EAAE,MAAM,CAAC;IAC7B,QAAQ,CAAC,SAAS,EAAE,MAAM,CAAC;IAC3B,QAAQ,CAAC,gBAAgB,EAAE,MAAM,CAAC;IAClC,QAAQ,CAAC,cAAc,EAAE,MAAM,CAAC;IAChC,QAAQ,CAAC,SAAS,EAAE,MAAM,CAAC;IAC3B,QAAQ,CAAC,YAAY,EAAE,MAAM,CAAC;IAC9B,QAAQ,CAAC,SAAS,EAAE,MAAM,CAAC;CAC5B;AAED,MAAM,MAAM,sBAAsB,GAAG,OAAO,CAAC,mBAAmB,CAAC,CAAC;AAElE,MAAM,WAAW,uBAAuB;IACtC,SAAS,EAAE;QACT,MAAM,EAAE;YACN,OAAO,EAAE;gBACP,IAAI,EAAE,MAAM,CAAC;gBACb,MAAM,EAAE,MAAM,CAAC;aAChB,CAAC;SACH,CAAC;QACF,OAAO,EAAE;YACP,OAAO,EAAE,MAAM,CAAC;YAChB,KAAK,EAAE,MAAM,CAAC;SACf,CAAC;QACF,OAAO,EAAE;YACP,MAAM,EAAE,MAAM,CAAC;YACf,OAAO,EAAE,MAAM,CAAC;YAChB,OAAO,EAAE,MAAM,CAAC;YAChB,YAAY,EAAE,MAAM,CAAC;SACtB,CAAC;QACF,OAAO,EAAE;YACP,IAAI,EAAE,MAAM,CAAC;YACb,MAAM,EAAE,MAAM,CAAC;SAChB,CAAC;KACH,CAAC;CACH;AAYD;;;;;;;;;;;;GAYG;AACH,wBAAgB,yBAAyB,CACvC,KAAK,EAAE,uBAAuB,EAC9B,SAAS,GAAE,sBAA2B,GACrC,mBAAmB,CAgDrB"}

package/dist/colors.js

@@ -1,20 +1,128 @@
+const DARK_TEXT_FALLBACK = '#111827';
+const LIGHT_TEXT_FALLBACK = '#ffffff';
+const MINIMUM_READABLE_CONTRAST = 4.5;
+/***
+ * Creates the theme-derived color palette used by tabletop primitives.
+ *
+ * Use `createTabletopColorScheme` when custom components need to align with the
+ * same card, table, seat, token, and contrast-aware foreground colors as the
+ * built-in tabletop components.
+ *
+ * @readme
+ * @example Custom color scheme
+ * ```ts
+ * const colors = createTabletopColorScheme(theme, { tableFelt: '#065f46' });
+ * ```
+ */
 export function createTabletopColorScheme(theme, overrides = {}) {
+    const cardSurface = overrides.cardSurface ?? theme.semantics.neutral.surface;
+    const seatSurface = overrides.seatSurface ?? theme.semantics.neutral.surface;
+    const tableFelt = overrides.tableFelt ?? theme.semantics.action.primary.softBg;
+    const tokenSurface = overrides.tokenSurface ?? theme.semantics.warning.softBg;
+    const cardText = overrides.cardText ??
+        resolveReadableTextColor(cardSurface, theme.semantics.content.default, LIGHT_TEXT_FALLBACK);
+    const seatText = overrides.seatText ??
+        resolveReadableTextColor(seatSurface, theme.semantics.content.default, LIGHT_TEXT_FALLBACK);
+    const tableText = overrides.tableText ??
+        resolveReadableTextColor(tableFelt, theme.semantics.content.default, LIGHT_TEXT_FALLBACK);
+    const tokenText = overrides.tokenText ??
+        resolveReadableTextColor(tokenSurface, theme.semantics.content.default, LIGHT_TEXT_FALLBACK);
     return {
         cardBack: overrides.cardBack ?? theme.semantics.warning.base,
         cardBackBorder: overrides.cardBackBorder ?? theme.semantics.neutral.border,
         cardBorder: overrides.cardBorder ?? theme.semantics.neutral.border,
-        cardSurface: overrides.cardSurface ?? theme.semantics.neutral.surface,
-        cardText: overrides.cardText ?? theme.semantics.content.default,
-        mutedText: overrides.mutedText ?? theme.semantics.content.muted,
-        redSuitText: overrides.redSuitText ?? theme.semantics.warning.base,
+        cardSurface,
+        cardText,
+        mutedText: overrides.mutedText ??
+            resolveReadableTextColor(cardSurface, theme.semantics.content.muted, cardText),
+        redSuitText: overrides.redSuitText ??
+            resolveReadableTextColor(cardSurface, theme.semantics.warning.base, cardText),
         seatBorder: overrides.seatBorder ?? theme.semantics.neutral.divider,
+        seatMutedText: overrides.seatMutedText ??
+            resolveReadableTextColor(seatSurface, theme.semantics.content.muted, seatText),
         seatSelectedBorder: overrides.seatSelectedBorder ?? theme.semantics.action.primary.base,
-        seatSurface: overrides.seatSurface ?? theme.semantics.neutral.surface,
+        seatSurface,
+        seatText,
         tableBorder: overrides.tableBorder ?? theme.semantics.warning.base,
-        tableFelt: overrides.tableFelt ?? theme.semantics.action.primary.softBg,
+        tableFelt,
         tableInnerBorder: overrides.tableInnerBorder ?? theme.semantics.neutral.divider,
-        tokenSurface: overrides.tokenSurface ?? theme.semantics.warning.softBg,
-        tokenText: overrides.tokenText ?? theme.semantics.content.default,
+        tableMutedText: overrides.tableMutedText ??
+            resolveReadableTextColor(tableFelt, theme.semantics.content.muted, tableText),
+        tableText,
+        tokenSurface,
+        tokenText,
     };
 }
+function resolveReadableTextColor(background, preferred, fallback) {
+    const preferredContrast = getContrastRatio(background, preferred);
+    if (preferredContrast !== null && preferredContrast >= MINIMUM_READABLE_CONTRAST) {
+        return preferred;
+    }
+    const candidates = uniqueColors([preferred, fallback, LIGHT_TEXT_FALLBACK, DARK_TEXT_FALLBACK]);
+    const [readableCandidate] = candidates
+        .map((candidate) => ({ candidate, contrast: getContrastRatio(background, candidate) }))
+        .filter((entry) => entry.contrast !== null)
+        .sort((left, right) => right.contrast - left.contrast);
+    return readableCandidate?.candidate ?? preferred;
+}
+function uniqueColors(colors) {
+    return [...new Set(colors)];
+}
+function getContrastRatio(background, foreground) {
+    const backgroundColor = parseHexColor(background);
+    const foregroundColor = parseHexColor(foreground);
+    if (backgroundColor === null || foregroundColor === null)
+        return null;
+    const backgroundLuminance = getRelativeLuminance(backgroundColor);
+    const foregroundLuminance = getRelativeLuminance(foregroundColor);
+    const lighter = Math.max(backgroundLuminance, foregroundLuminance);
+    const darker = Math.min(backgroundLuminance, foregroundLuminance);
+    return (lighter + 0.05) / (darker + 0.05);
+}
+function parseHexColor(color) {
+    const value = color.trim();
+    const hex = value.startsWith('#') ? value.slice(1) : '';
+    if (!isSupportedHexLength(hex) || !isHexColorValue(hex))
+        return null;
+    if (hex.length === 3) {
+        const red = hex.slice(0, 1);
+        const green = hex.slice(1, 2);
+        const blue = hex.slice(2, 3);
+        return {
+            red: parseInt(red + red, 16),
+            green: parseInt(green + green, 16),
+            blue: parseInt(blue + blue, 16),
+        };
+    }
+    return {
+        red: parseInt(hex.slice(0, 2), 16),
+        green: parseInt(hex.slice(2, 4), 16),
+        blue: parseInt(hex.slice(4, 6), 16),
+    };
+}
+function isSupportedHexLength(hex) {
+    return hex.length === 3 || hex.length === 6 || hex.length === 8;
+}
+function isHexColorValue(hex) {
+    return [...hex].every((character) => isHexCharacter(character));
+}
+function isHexCharacter(character) {
+    const code = character.charCodeAt(0);
+    const isDigit = code >= 48 && code <= 57;
+    const isUpperHex = code >= 65 && code <= 70;
+    const isLowerHex = code >= 97 && code <= 102;
+    return isDigit || isUpperHex || isLowerHex;
+}
+function getRelativeLuminance(color) {
+    const red = normalizeColorChannel(color.red);
+    const green = normalizeColorChannel(color.green);
+    const blue = normalizeColorChannel(color.blue);
+    return 0.2126 * red + 0.7152 * green + 0.0722 * blue;
+}
+function normalizeColorChannel(value) {
+    const normalized = value / 255;
+    if (normalized <= 0.03928)
+        return normalized / 12.92;
+    return ((normalized + 0.055) / 1.055) ** 2.4;
+}
 //# sourceMappingURL=colors.js.map

package/dist/colors.js.map

@@ -1 +1 @@
-{"version":3,"file":"colors.js","sourceRoot":"","sources":["../src/colors.ts"],"names":[],"mappings":"AA6CA,MAAM,UAAU,yBAAyB,CACvC,KAA8B,EAC9B,YAAoC,EAAE;IAEtC,OAAO;QACL,QAAQ,EAAE,SAAS,CAAC,QAAQ,IAAI,KAAK,CAAC,SAAS,CAAC,OAAO,CAAC,IAAI;QAC5D,cAAc,EAAE,SAAS,CAAC,cAAc,IAAI,KAAK,CAAC,SAAS,CAAC,OAAO,CAAC,MAAM;QAC1E,UAAU,EAAE,SAAS,CAAC,UAAU,IAAI,KAAK,CAAC,SAAS,CAAC,OAAO,CAAC,MAAM;QAClE,WAAW,EAAE,SAAS,CAAC,WAAW,IAAI,KAAK,CAAC,SAAS,CAAC,OAAO,CAAC,OAAO;QACrE,QAAQ,EAAE,SAAS,CAAC,QAAQ,IAAI,KAAK,CAAC,SAAS,CAAC,OAAO,CAAC,OAAO;QAC/D,SAAS,EAAE,SAAS,CAAC,SAAS,IAAI,KAAK,CAAC,SAAS,CAAC,OAAO,CAAC,KAAK;QAC/D,WAAW,EAAE,SAAS,CAAC,WAAW,IAAI,KAAK,CAAC,SAAS,CAAC,OAAO,CAAC,IAAI;QAClE,UAAU,EAAE,SAAS,CAAC,UAAU,IAAI,KAAK,CAAC,SAAS,CAAC,OAAO,CAAC,OAAO;QACnE,kBAAkB,EAAE,SAAS,CAAC,kBAAkB,IAAI,KAAK,CAAC,SAAS,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI;QACvF,WAAW,EAAE,SAAS,CAAC,WAAW,IAAI,KAAK,CAAC,SAAS,CAAC,OAAO,CAAC,OAAO;QACrE,WAAW,EAAE,SAAS,CAAC,WAAW,IAAI,KAAK,CAAC,SAAS,CAAC,OAAO,CAAC,IAAI;QAClE,SAAS,EAAE,SAAS,CAAC,SAAS,IAAI,KAAK,CAAC,SAAS,CAAC,MAAM,CAAC,OAAO,CAAC,MAAM;QACvE,gBAAgB,EAAE,SAAS,CAAC,gBAAgB,IAAI,KAAK,CAAC,SAAS,CAAC,OAAO,CAAC,OAAO;QAC/E,YAAY,EAAE,SAAS,CAAC,YAAY,IAAI,KAAK,CAAC,SAAS,CAAC,OAAO,CAAC,MAAM;QACtE,SAAS,EAAE,SAAS,CAAC,SAAS,IAAI,KAAK,CAAC,SAAS,CAAC,OAAO,CAAC,OAAO;KAClE,CAAC;AACJ,CAAC","sourcesContent":["export interface TabletopColorScheme {\n  readonly cardBack: string;\n  readonly cardBackBorder: string;\n  readonly cardBorder: string;\n  readonly cardSurface: string;\n  readonly cardText: string;\n  readonly mutedText: string;\n  readonly redSuitText: string;\n  readonly seatBorder: string;\n  readonly seatSelectedBorder: string;\n  readonly seatSurface: string;\n  readonly tableBorder: string;\n  readonly tableFelt: string;\n  readonly tableInnerBorder: string;\n  readonly tokenSurface: string;\n  readonly tokenText: string;\n}\n\nexport type TabletopColorOverrides = Partial<TabletopColorScheme>;\n\nexport interface TabletopColorThemeShape {\n  semantics: {\n    action: {\n      primary: {\n        base: string;\n        softBg: string;\n      };\n    };\n    content: {\n      default: string;\n      muted: string;\n    };\n    neutral: {\n      border: string;\n      divider: string;\n      surface: string;\n      surfaceHover: string;\n    };\n    warning: {\n      base: string;\n      softBg: string;\n    };\n  };\n}\n\nexport function createTabletopColorScheme(\n  theme: TabletopColorThemeShape,\n  overrides: TabletopColorOverrides = {},\n): TabletopColorScheme {\n  return {\n    cardBack: overrides.cardBack ?? theme.semantics.warning.base,\n    cardBackBorder: overrides.cardBackBorder ?? theme.semantics.neutral.border,\n    cardBorder: overrides.cardBorder ?? theme.semantics.neutral.border,\n    cardSurface: overrides.cardSurface ?? theme.semantics.neutral.surface,\n    cardText: overrides.cardText ?? theme.semantics.content.default,\n    mutedText: overrides.mutedText ?? theme.semantics.content.muted,\n    redSuitText: overrides.redSuitText ?? theme.semantics.warning.base,\n    seatBorder: overrides.seatBorder ?? theme.semantics.neutral.divider,\n    seatSelectedBorder: overrides.seatSelectedBorder ?? theme.semantics.action.primary.base,\n    seatSurface: overrides.seatSurface ?? theme.semantics.neutral.surface,\n    tableBorder: overrides.tableBorder ?? theme.semantics.warning.base,\n    tableFelt: overrides.tableFelt ?? theme.semantics.action.primary.softBg,\n    tableInnerBorder: overrides.tableInnerBorder ?? theme.semantics.neutral.divider,\n    tokenSurface: overrides.tokenSurface ?? theme.semantics.warning.softBg,\n    tokenText: overrides.tokenText ?? theme.semantics.content.default,\n  };\n}\n"]}
+{"version":3,"file":"colors.js","sourceRoot":"","sources":["../src/colors.ts"],"names":[],"mappings":"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","sourcesContent":["export interface TabletopColorScheme {\n  readonly cardBack: string;\n  readonly cardBackBorder: string;\n  readonly cardBorder: string;\n  readonly cardSurface: string;\n  readonly cardText: string;\n  readonly mutedText: string;\n  readonly redSuitText: string;\n  readonly seatBorder: string;\n  readonly seatMutedText: string;\n  readonly seatSelectedBorder: string;\n  readonly seatSurface: string;\n  readonly seatText: string;\n  readonly tableBorder: string;\n  readonly tableFelt: string;\n  readonly tableInnerBorder: string;\n  readonly tableMutedText: string;\n  readonly tableText: string;\n  readonly tokenSurface: string;\n  readonly tokenText: string;\n}\n\nexport type TabletopColorOverrides = Partial<TabletopColorScheme>;\n\nexport interface TabletopColorThemeShape {\n  semantics: {\n    action: {\n      primary: {\n        base: string;\n        softBg: string;\n      };\n    };\n    content: {\n      default: string;\n      muted: string;\n    };\n    neutral: {\n      border: string;\n      divider: string;\n      surface: string;\n      surfaceHover: string;\n    };\n    warning: {\n      base: string;\n      softBg: string;\n    };\n  };\n}\n\ninterface RgbColor {\n  readonly red: number;\n  readonly green: number;\n  readonly blue: number;\n}\n\nconst DARK_TEXT_FALLBACK = '#111827';\nconst LIGHT_TEXT_FALLBACK = '#ffffff';\nconst MINIMUM_READABLE_CONTRAST = 4.5;\n\n/***\n * Creates the theme-derived color palette used by tabletop primitives.\n *\n * Use `createTabletopColorScheme` when custom components need to align with the\n * same card, table, seat, token, and contrast-aware foreground colors as the\n * built-in tabletop components.\n *\n * @readme\n * @example Custom color scheme\n * ```ts\n * const colors = createTabletopColorScheme(theme, { tableFelt: '#065f46' });\n * ```\n */\nexport function createTabletopColorScheme(\n  theme: TabletopColorThemeShape,\n  overrides: TabletopColorOverrides = {},\n): TabletopColorScheme {\n  const cardSurface = overrides.cardSurface ?? theme.semantics.neutral.surface;\n  const seatSurface = overrides.seatSurface ?? theme.semantics.neutral.surface;\n  const tableFelt = overrides.tableFelt ?? theme.semantics.action.primary.softBg;\n  const tokenSurface = overrides.tokenSurface ?? theme.semantics.warning.softBg;\n\n  const cardText =\n    overrides.cardText ??\n    resolveReadableTextColor(cardSurface, theme.semantics.content.default, LIGHT_TEXT_FALLBACK);\n  const seatText =\n    overrides.seatText ??\n    resolveReadableTextColor(seatSurface, theme.semantics.content.default, LIGHT_TEXT_FALLBACK);\n  const tableText =\n    overrides.tableText ??\n    resolveReadableTextColor(tableFelt, theme.semantics.content.default, LIGHT_TEXT_FALLBACK);\n  const tokenText =\n    overrides.tokenText ??\n    resolveReadableTextColor(tokenSurface, theme.semantics.content.default, LIGHT_TEXT_FALLBACK);\n\n  return {\n    cardBack: overrides.cardBack ?? theme.semantics.warning.base,\n    cardBackBorder: overrides.cardBackBorder ?? theme.semantics.neutral.border,\n    cardBorder: overrides.cardBorder ?? theme.semantics.neutral.border,\n    cardSurface,\n    cardText,\n    mutedText:\n      overrides.mutedText ??\n      resolveReadableTextColor(cardSurface, theme.semantics.content.muted, cardText),\n    redSuitText:\n      overrides.redSuitText ??\n      resolveReadableTextColor(cardSurface, theme.semantics.warning.base, cardText),\n    seatBorder: overrides.seatBorder ?? theme.semantics.neutral.divider,\n    seatMutedText:\n      overrides.seatMutedText ??\n      resolveReadableTextColor(seatSurface, theme.semantics.content.muted, seatText),\n    seatSelectedBorder: overrides.seatSelectedBorder ?? theme.semantics.action.primary.base,\n    seatSurface,\n    seatText,\n    tableBorder: overrides.tableBorder ?? theme.semantics.warning.base,\n    tableFelt,\n    tableInnerBorder: overrides.tableInnerBorder ?? theme.semantics.neutral.divider,\n    tableMutedText:\n      overrides.tableMutedText ??\n      resolveReadableTextColor(tableFelt, theme.semantics.content.muted, tableText),\n    tableText,\n    tokenSurface,\n    tokenText,\n  };\n}\n\nfunction resolveReadableTextColor(background: string, preferred: string, fallback: string): string {\n  const preferredContrast = getContrastRatio(background, preferred);\n  if (preferredContrast !== null && preferredContrast >= MINIMUM_READABLE_CONTRAST) {\n    return preferred;\n  }\n\n  const candidates = uniqueColors([preferred, fallback, LIGHT_TEXT_FALLBACK, DARK_TEXT_FALLBACK]);\n  const [readableCandidate] = candidates\n    .map((candidate) => ({ candidate, contrast: getContrastRatio(background, candidate) }))\n    .filter(\n      (entry): entry is { readonly candidate: string; readonly contrast: number } =>\n        entry.contrast !== null,\n    )\n    .sort((left, right) => right.contrast - left.contrast);\n\n  return readableCandidate?.candidate ?? preferred;\n}\n\nfunction uniqueColors(colors: readonly string[]): string[] {\n  return [...new Set(colors)];\n}\n\nfunction getContrastRatio(background: string, foreground: string): number | null {\n  const backgroundColor = parseHexColor(background);\n  const foregroundColor = parseHexColor(foreground);\n\n  if (backgroundColor === null || foregroundColor === null) return null;\n\n  const backgroundLuminance = getRelativeLuminance(backgroundColor);\n  const foregroundLuminance = getRelativeLuminance(foregroundColor);\n  const lighter = Math.max(backgroundLuminance, foregroundLuminance);\n  const darker = Math.min(backgroundLuminance, foregroundLuminance);\n\n  return (lighter + 0.05) / (darker + 0.05);\n}\n\nfunction parseHexColor(color: string): RgbColor | null {\n  const value = color.trim();\n  const hex = value.startsWith('#') ? value.slice(1) : '';\n  if (!isSupportedHexLength(hex) || !isHexColorValue(hex)) return null;\n\n  if (hex.length === 3) {\n    const red = hex.slice(0, 1);\n    const green = hex.slice(1, 2);\n    const blue = hex.slice(2, 3);\n\n    return {\n      red: parseInt(red + red, 16),\n      green: parseInt(green + green, 16),\n      blue: parseInt(blue + blue, 16),\n    };\n  }\n\n  return {\n    red: parseInt(hex.slice(0, 2), 16),\n    green: parseInt(hex.slice(2, 4), 16),\n    blue: parseInt(hex.slice(4, 6), 16),\n  };\n}\n\nfunction isSupportedHexLength(hex: string): boolean {\n  return hex.length === 3 || hex.length === 6 || hex.length === 8;\n}\n\nfunction isHexColorValue(hex: string): boolean {\n  return [...hex].every((character) => isHexCharacter(character));\n}\n\nfunction isHexCharacter(character: string): boolean {\n  const code = character.charCodeAt(0);\n  const isDigit = code >= 48 && code <= 57;\n  const isUpperHex = code >= 65 && code <= 70;\n  const isLowerHex = code >= 97 && code <= 102;\n\n  return isDigit || isUpperHex || isLowerHex;\n}\n\nfunction getRelativeLuminance(color: RgbColor): number {\n  const red = normalizeColorChannel(color.red);\n  const green = normalizeColorChannel(color.green);\n  const blue = normalizeColorChannel(color.blue);\n\n  return 0.2126 * red + 0.7152 * green + 0.0722 * blue;\n}\n\nfunction normalizeColorChannel(value: number): number {\n  const normalized = value / 255;\n  if (normalized <= 0.03928) return normalized / 12.92;\n  return ((normalized + 0.055) / 1.055) ** 2.4;\n}\n"]}

package/dist/components/card-back/CardBack.d.ts

@@ -1,4 +1,16 @@
 import React from 'react';
 import type { CardBackProps } from './types';
+/***
+ * Face-down playing-card primitive for hidden cards and decks.
+ *
+ * Use `CardBack` when a card should be represented visually without exposing its
+ * rank or suit. The component keeps a generic accessible label for hidden cards.
+ *
+ * @readme
+ * @example Hidden cards
+ * ```tsx
+ * <CardBack size="small" />
+ * ```
+ */
 export declare function CardBack({ size, muted, accessibilityLabel, colorScheme, testID, }: CardBackProps): React.JSX.Element;
 //# sourceMappingURL=CardBack.d.ts.map

package/dist/components/card-back/CardBack.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CardBack.d.ts","sourceRoot":"","sources":["../../../src/components/card-back/CardBack.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAE7C,wBAAgB,QAAQ,CAAC,EACvB,IAAe,EACf,KAAa,EACb,kBAAkB,EAClB,WAAW,EACX,MAAM,GACP,EAAE,aAAa,qBAoCf"}
+{"version":3,"file":"CardBack.d.ts","sourceRoot":"","sources":["../../../src/components/card-back/CardBack.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAE7C;;;;;;;;;;;GAWG;AACH,wBAAgB,QAAQ,CAAC,EACvB,IAAe,EACf,KAAa,EACb,kBAAkB,EAClB,WAAW,EACX,MAAM,GACP,EAAE,aAAa,qBAoCf"}

package/dist/components/card-back/CardBack.js

@@ -4,6 +4,18 @@ import { StyleSheet, View } from 'react-native';
 import { createHiddenCardLabel } from '../../cardLabel';
 import { getTabletopCardDimensions } from '../../cardSizing';
 import { createTabletopColorScheme } from '../../colors';
+/***
+ * Face-down playing-card primitive for hidden cards and decks.
+ *
+ * Use `CardBack` when a card should be represented visually without exposing its
+ * rank or suit. The component keeps a generic accessible label for hidden cards.
+ *
+ * @readme
+ * @example Hidden cards
+ * ```tsx
+ * <CardBack size="small" />
+ * ```
+ */
 export function CardBack({ size = 'medium', muted = false, accessibilityLabel, colorScheme, testID, }) {
     const { theme } = useZoraTheme();
     const colors = React.useMemo(() => createTabletopColorScheme(theme, colorScheme), [colorScheme, theme]);