# @whyhotel/ui-core-components

> Placemakr product design-system React component library — accessible, token-driven UI components that render against the Placemakr theme in @whyhotel/ui-core-theme.

Generated from component TS types and zod schemas (source: `src/components`). Code is the source of truth; this file is a build artifact — do not edit by hand.

## Components

- [Accordion](./docs/Accordion.mdx): Accordion — a set of stacked sections that each expand or collapse in place to reveal their content.
- [Alert](./docs/Alert.mdx): Alert — a static, inline status message that stays on the page to explain a condition or outcome (a warning, a confirmation, an error to resolve).
- [Avatar](./docs/Avatar.mdx): Avatar — a small square or circular chip that stands in for a person or entity with a photo or their initials (a guest, a teammate, a property).
- [Badge](./docs/Badge.mdx): Badge — a small inline label that tags an element with a short status or count (e.g.
- [Breadcrumbs](./docs/Breadcrumbs.mdx): Breadcrumbs — a compact trail showing where a page sits in the hierarchy and a one-tap way back up it.
- [Button](./docs/Button.mdx): Button — the primary way a person triggers an action: submit a form, confirm a choice, or move to the next step.
- [Card](./docs/Card.mdx): Card — a container that groups related content and actions into a single surface, optionally with a header and footer.
- [Carousel](./docs/Carousel.mdx): Carousel — a horizontally (or vertically) scrolling track of equal-status slides that snap into place as a person swipes or scrolls.
- [Chat](./docs/Chat.mdx): Chat — a single message in a conversation: an optional avatar, a header line, the message bubble, and a footer line.
- [Checkbox](./docs/Checkbox.mdx): Checkbox — a single on/off control for an independent boolean choice, such as opting into an email or accepting a policy.
- [Countdown](./docs/Countdown.mdx): Countdown — an animated number whose digits slide when the value changes, for live counters like the seconds left on a hold, minutes until check-in, or a rooms-remaining tally.
- [DataTable](./docs/DataTable.mdx): DataTable — a typed, configuration-driven table for presenting rows of structured data (reservations, folios, arrivals) in aligned columns.
- [Dialog](./docs/Dialog.mdx): Dialog — a modal panel that overlays the page to focus the user on a single task or decision (confirm a checkout, complete a short form) and blocks the rest of the UI until it is resolved.
- [Diff](./docs/Diff.mdx): Diff — a side-by-side comparison slider that stacks two panes and reveals one over the other as a person drags the handle between them.
- [Divider](./docs/Divider.mdx): Divider — a thin rule that separates two blocks of content, optionally with a short label sitting in the gap.
- [Dock](./docs/Dock.mdx): Dock — a fixed bar of destinations pinned to the bottom of the viewport, the primary way to move between the top-level areas of a mobile-first app (stays, calendar, keys, account).
- [Drawer](./docs/Drawer.mdx): Drawer — a panel that slides in from the edge of the screen over the current view, dimming the main content behind an overlay.
- [Dropdown](./docs/Dropdown.mdx): Dropdown — a button that reveals a small floating panel of actions or links beneath (or beside) it.
- [Fab](./docs/Fab.mdx): Fab — a floating action button that pins the single most important action to the bottom-right of a view, then fans out into a speed-dial of related actions on focus or hover.
- [Fieldset](./docs/Fieldset.mdx): Fieldset — a labelled wrapper that groups related fields into one section of a form, such as guest details or payment.
- [FileInput](./docs/FileInput.mdx): FileInput — a field for picking one or more files from the device, such as a folio PDF, an ID scan, or a room photo.
- [Filter](./docs/Filter.mdx): Filter — a compact row of buttons for narrowing a list to one facet at a time: a room type, a rate plan, a reservation status.
- [Footer](./docs/Footer.mdx): Footer — the page's closing landmark, holding link columns, contact details, or a copyright line at the bottom of a view.
- [Header](./docs/Header.mdx): Header — a section or page heading rendered in the theme's display type roles.
- [Hero](./docs/Hero.mdx): Hero — a full-width banner that opens a page with a headline, a line of copy, and a call to action, centered over a background.
- [Indicator](./docs/Indicator.mdx): Indicator — a wrapper that pins a small badge or dot to a corner of whatever it wraps, so a count or status floats over an avatar, button, or card without shifting the layout.
- [Input](./docs/Input.mdx): Input — a single-line text field bound to `value`/`onChange` for capturing short free-form entries such as a name, email, or phone number.
- [Join](./docs/Join.mdx): Join — groups a set of controls into a single segmented unit, squaring the inner corners and collapsing the shared borders so a button cluster or an input + button reads as one control (think a search field with a "go" button, or a paginator).
- [Kbd](./docs/Kbd.mdx): Kbd — an inline key cap that shows a single keyboard input inside body copy (e.g.
- [Label](./docs/Label.mdx): Label — a short inline text accent rendered in the theme's small type roles.
- [Link](./docs/Link.mdx): Link — an inline text anchor for navigating somewhere else, whether that's another view, an external page, or an anchor further down the page.
- [List](./docs/List.mdx): List — a vertical stack of rows that each pair optional media with a title, an optional subtitle, and optional trailing actions.
- [Loading](./docs/Loading.mdx): Loading — an inline, self-animating indicator that signals a short, indefinite wait (fetching a folio, confirming a reservation).
- [Mask](./docs/Mask.mdx): Mask — clips its content to a decorative shape (squircle, circle, hexagon, star, heart, and more).
- [Menu](./docs/Menu.mdx): Menu — a vertical (or horizontal) list of navigation rows: links, section titles, and parents that reveal a nested submenu.
- [MockupBrowser](./docs/MockupBrowser.mdx): MockupBrowser — a decorative browser frame that wraps a screenshot or live preview in familiar window chrome, complete with a toolbar and address field.
- [MockupCode](./docs/MockupCode.mdx): MockupCode — a terminal-style frame that shows a short block of commands or code, complete with the window chrome and a gutter for per-line prefixes.
- [MockupPhone](./docs/MockupPhone.mdx): MockupPhone — a phone-shaped device frame that wraps a preview so a screen looks like it is running on a handset.
- [MockupWindow](./docs/MockupWindow.mdx): MockupWindow — a browser/app window frame for showing a screenshot or a live UI preview in context, complete with the title-bar dots.
- [Navbar](./docs/Navbar.mdx): Navbar — the horizontal bar across the top of a view that holds the brand, the primary navigation, and account or page actions.
- [Pagination](./docs/Pagination.mdx): Pagination — lets a person move through a long, paged list (search results, a reservations table, an activity log) one page at a time.
- [Progress](./docs/Progress.mdx): Progress — a slim horizontal bar that shows how far along a task is, from an upload to a multi-step check-in flow.
- [RadialProgress](./docs/RadialProgress.mdx): RadialProgress — a circular gauge that shows how far along a value is, from 0 to 100 (e.g.
- [Radio](./docs/Radio.mdx): Radio — a single control for a one-of-many choice, such as picking a rate plan or a room type.
- [Range](./docs/Range.mdx): Range — a slider for picking a single number from a continuous span, such as a price ceiling, a party size, or a number of nights.
- [Rating](./docs/Rating.mdx): Rating — a row of stars for capturing or showing a score, such as how a guest rated their stay.
- [Select](./docs/Select.mdx): Select — a dropdown for choosing one value from a fixed set of options (an arrival window, a room type, a status).
- [Skeleton](./docs/Skeleton.mdx): Skeleton — a shimmering placeholder that stands in for content while it loads, so the layout holds its shape instead of jumping when data arrives.
- [Stack](./docs/Stack.mdx): Stack — a layout container that lays its children in one cell so they overlap, front to back, with the ones behind peeking out.
- [Stat](./docs/Stat.mdx): Stat — a compact group of headline metrics, each a title, a big value, and an optional supporting line.
- [Status](./docs/Status.mdx): Status — a tiny inline dot that signals the live state of a nearby thing (e.g.
- [Steps](./docs/Steps.mdx): Steps — an ordered tracker that shows where someone is in a multi-part flow and how much is left, laid out as numbered nodes joined by connectors.
- [Swap](./docs/Swap.mdx): Swap — a single control that flips between two faces in place, such as play/pause, menu/close, or a lights-on/lights-off setting.
- [Tabs](./docs/Tabs.mdx): Tabs — a horizontal set of views that share a region, where selecting a tab swaps the panel below it.
- [Textarea](./docs/Textarea.mdx): Textarea — a multi-line text field bound to `value`/`onChange` for capturing longer free-form entries such as a guest note, special request, or feedback.
- [TextBlock](./docs/TextBlock.mdx): TextBlock — a paragraph of body copy rendered in the theme's body type roles.
- [Timeline](./docs/Timeline.mdx): Timeline — an ordered track of events connected by a running line, each with an icon on the line and detail to one or both sides.
- [Toast](./docs/Toast.mdx): Toast — a brief, self-dismissing notification that confirms the result of an action ("request sent", "changes saved") without interrupting what the user is doing.
- [Toggle](./docs/Toggle.mdx): Toggle — a switch for a setting that takes effect immediately, such as turning on housekeeping alerts or opting into text updates.
- [Tooltip](./docs/Tooltip.mdx): Tooltip — a small hover/focus hint that explains the trigger it wraps (e.g.

## Full reference

- [llms-full.txt](./llms-full.txt): complete props, variants, slots, and examples for every component in one file.
- [manifest.json](./manifest.json): the structured machine-readable manifest.