TableGlyph

An SVG table with its chairs placed from seats and shape: radial for round, one per side (then spread) for square, ends plus long sides for rect, a row of stools for bar. It draws with currentColor and the surface token, so it follows the text colour and the theme. Decorative (aria-hidden) unless an aria-label is given.

Import

import { TableGlyph } from "@jcsoftdev/ui/atoms";

Single-component entry points tree-shake to just this component: @jcsoftdev/ui/atoms/table-glyph.

Usage

<TableGlyph shape="round" seats={4} occupied={0} size="md" />

Props

Prop	Type	Default	Description
shape *	"rect" | "square" | "round" | "bar"
seats *	number		Chairs drawn around the table.
occupied	number	0	How many chairs are filled, in drawing order. Clamped to seats.
size	"sm" | "md" | "lg" | "fill"	"md"	Height of a one-unit box from the control-height tokens, so it follows density; wider shapes grow from it. fill takes the size of the parent instead.
width	number		Box in grid units (1 unit is one square cell). Defaults to 1x1, rect 2x1 and bar 3x1.
height	number
pattern	"strong" | "solid" | "dashed" | "soft"	"solid"	Table surface: dashed outline, solid outline on the surface, soft or strong tint. Defaults to solid.
classNames	Partial<Record<TableGlyphPart, string>>		Per-part classes merged with cn; consumer classes win. className still targets the root and is merged last.

* marks a required prop.

It also accepts the native props of the element or primitive it renders (for example className, id, aria-* and event handlers).

Storybook stories

• Default
• Labelled
• Shapes
• Occupied
• Patterns
• Sizes
• Many Seats
• Dark

Source

packages/ui/src/atoms/table-glyph/table-glyph.tsx