@ankhorage/zora-tabletop 0.0.1 → 0.0.3

package/src/components/tabletop-table/TabletopTable.tsx

@@ -21,6 +21,23 @@ function createSeatAccessibilityLabel(seat: TabletopSeatState): string | undefin
   return parts.join(', ');
 }
 
+/***
+ * 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.
+ *
+ * @readme
+ * @example Basic table
+ * ```tsx
+ * <TabletopTable
+ *   seats={seats}
+ *   centerCards={[{ rank: 'A', suit: 'spades' }]}
+ *   centerLabel="Round 1"
+ * />
+ * ```
+ */
 export function TabletopTable({
   seats,
   centerCards = [],
@@ -73,13 +90,13 @@ export function TabletopTable({
           ) : null}
           {centerLabel !== undefined ? (
             <View style={[styles.centerLabel, { backgroundColor: colors.seatSurface }]}>
-              <Text style={[styles.centerLabelText, { color: colors.cardText }]}>
+              <Text style={[styles.centerLabelText, { color: colors.seatText }]}>
                 {centerLabel}
               </Text>
             </View>
           ) : null}
           {centerSublabel !== undefined ? (
-            <Text style={[styles.centerSublabel, { color: colors.mutedText }]}>
+            <Text style={[styles.centerSublabel, { color: colors.tableMutedText }]}>
               {centerSublabel}
             </Text>
           ) : null}
@@ -114,9 +131,9 @@ export function TabletopTable({
                 size={cardSize}
               />
             ) : null}
-            <Text style={[styles.seatLabel, { color: colors.cardText }]}>{seat.label}</Text>
+            <Text style={[styles.seatLabel, { color: colors.seatText }]}>{seat.label}</Text>
             {seat.sublabel !== undefined ? (
-              <Text style={[styles.seatSublabel, { color: colors.mutedText }]}>
+              <Text style={[styles.seatSublabel, { color: colors.seatMutedText }]}>
                 {seat.sublabel}
               </Text>
             ) : null}
@@ -154,7 +171,7 @@ const styles = StyleSheet.create({
   },
   centerSublabel: {
     fontSize: 11,
-    fontWeight: '600',
+    fontWeight: '700',
   },
   circleSurface: {
     borderRadius: 999,
@@ -197,7 +214,7 @@ const styles = StyleSheet.create({
   },
   seatSublabel: {
     fontSize: 10,
-    fontWeight: '600',
+    fontWeight: '700',
   },
   surface: {
     borderWidth: 8,