react-component-kit-ui 0.0.0-stage → 0.1.0

package/dist/types/components/apexcharts.d.ts

@@ -0,0 +1,3 @@
+export { AreaChart, type AreaChartProps } from './lib/charts/AreaChart';
+export { BarChart, type BarChartProps } from './lib/charts/BarChart';
+export { DonutChart, type DonutChartProps } from './lib/charts/DonutChart';

package/dist/types/components/index.d.ts

@@ -0,0 +1,15 @@
+export * from './lib/app';
+export * from './lib/buttons';
+export * from './lib/cards';
+export * from './lib/charts';
+export * from './lib/data';
+export * from './lib/ecommerce';
+export * from './lib/feedback';
+export * from './lib/forms';
+export * from './lib/layout';
+export * from './lib/navigation';
+export * from './lib/overlays';
+export * from './lib/sections';
+export * from './lib/typography';
+export { AnimatedGalaxy } from './lib/AnimatedGalaxy';
+export { LogoWithGalaxy } from './lib/LogoWithGalaxy';

package/dist/types/components/lib/AnimatedGalaxy.d.ts

@@ -0,0 +1,8 @@
+import type { CSSProperties } from 'react';
+/** AnimatedGalaxy */
+export interface AnimatedGalaxyProps {
+    className?: string;
+    style?: CSSProperties;
+}
+export declare function AnimatedGalaxy({ className, style }: AnimatedGalaxyProps): import("react").JSX.Element;
+export default AnimatedGalaxy;

package/dist/types/components/lib/Galaxy3D.d.ts

@@ -0,0 +1,15 @@
+import './Galaxy3D.css';
+/**
+ * Galaxy3D — Interactive 3D galaxy background with a fluid, mouse-reactive particle field.
+ *
+ * Renders a spiral galaxy with thousands of particles using Three.js (optional peer dependency,
+ * loaded lazily on the client). Motion runs on the GPU; rendering pauses off-screen or when the tab
+ * is hidden, and `prefers-reduced-motion` renders a static frame.
+ *
+ * @param className - Additional CSS class.
+ */
+export interface Galaxy3DProps {
+    className?: string;
+}
+export declare function Galaxy3D({ className }: Galaxy3DProps): import("react").JSX.Element;
+export default Galaxy3D;

package/dist/types/components/lib/LogoWithGalaxy.d.ts

@@ -0,0 +1,8 @@
+import './LogoWithGalaxy.css';
+/** LogoWithGalaxy */
+export interface LogoWithGalaxyProps {
+    size?: 'small' | 'medium' | 'large';
+    className?: string;
+}
+export declare function LogoWithGalaxy({ size, className }: LogoWithGalaxyProps): import("react").JSX.Element;
+export default LogoWithGalaxy;

package/dist/types/components/lib/app/AppSidebar.d.ts

@@ -0,0 +1,53 @@
+import './AppSidebar.css';
+interface Item {
+    label: string;
+    href: string;
+    icon?: string;
+    badge?: string | number;
+}
+interface Group {
+    label?: string;
+    items: Item[];
+}
+/**
+ * AppSidebar — SaaS app navigation: workspace switcher, grouped nav items with icons and
+ * count badges, collapsible to an icon rail, and an upgrade/plan card at the bottom.
+ *
+ * @param {{name: string, plan?: string, initials?: string}} workspace - Workspace shown at the top.
+ * @param {Array<{label?: string, items: {label: string, href: string, icon?: string, badge?: string|number}[]}>} groups - Nav groups.
+ * @param {string} currentHref - Marks the matching item with aria-current.
+ * @param {{title: string, text?: string, href: string, cta?: string, progress?: number}} promo - Card at the bottom (optional).
+ * @param {boolean} fullHeight - Full-viewport sticky sidebar (app shell). false renders it inline (docs, cards). Default true.
+ * @param {boolean} collapsible - Show the collapse toggle (remembered in localStorage). Default true.
+ * @param {string} variant - Style (surface|transparent|accent). Default 'surface'.
+ * @param {string} size - Width preset (sm|md|lg). Default 'md'.
+ * @param {string} id - Element id (AppTopbar's menu button opens it on mobile). Default 'app-sidebar'.
+ * @param {string} className - Extra class.
+ *
+ * Accessibility: a labelled nav landmark; the current page uses aria-current; when collapsed,
+ * labels stay available to screen readers and appear as tooltips on hover/focus.
+ */
+export interface AppSidebarProps {
+    workspace?: {
+        name: string;
+        plan?: string;
+        initials?: string;
+    };
+    groups?: Group[];
+    currentHref?: string;
+    promo?: {
+        title: string;
+        text?: string;
+        href: string;
+        cta?: string;
+        progress?: number;
+    };
+    fullHeight?: boolean;
+    collapsible?: boolean;
+    variant?: 'surface' | 'transparent' | 'accent';
+    size?: 'sm' | 'md' | 'lg';
+    id?: string;
+    className?: string;
+}
+export declare function AppSidebar({ workspace, groups, currentHref, promo, fullHeight, collapsible, variant, size, id, className, }: AppSidebarProps): import("react").JSX.Element;
+export default AppSidebar;

package/dist/types/components/lib/app/AppTopbar.d.ts

@@ -0,0 +1,52 @@
+import type { ReactNode } from 'react';
+import './AppTopbar.css';
+interface Notice {
+    title: string;
+    text?: string;
+    time: string;
+    unread?: boolean;
+    tone?: 'info' | 'success' | 'warning' | 'danger';
+}
+/**
+ * AppTopbar — SaaS app top bar: mobile menu button, search (⌘K / Ctrl+K), notifications dropdown
+ * with unread count and "mark all read", light/dark toggle and a user menu.
+ *
+ * @param {string} searchPlaceholder - Search placeholder. Default 'Search guests, bookings, rooms…'.
+ * @param {string} searchAction - Search form action. Default '#'.
+ * @param {Array<{title: string, text?: string, time: string, unread?: boolean, tone?: 'info'|'success'|'warning'|'danger'}>} notifications - Dropdown items.
+ * @param {{name: string, role?: string, email?: string}} user - Signed-in user.
+ * @param {Array<{label: string, href: string}>} userLinks - User menu links.
+ * @param {string} signOutHref - Sign-out link. Default '#'.
+ * @param {string} sidebarId - id of the AppSidebar the menu button opens on mobile. Default 'app-sidebar'.
+ * @param {boolean} themeToggle - Show the light/dark toggle. Default true.
+ * @param {string} variant - Style (blur|solid|transparent). Default 'blur'.
+ * @param {string} className - Extra class.
+ *
+ * Slots: `start` (e.g. page title or breadcrumb next to the menu button), `actions` (extra buttons).
+ *
+ * Accessibility: dropdowns are disclosure buttons closed with Escape or an outside click;
+ * the unread count is part of the bell's label; ⌘K moves focus to the search field.
+ */
+export interface AppTopbarProps {
+    searchPlaceholder?: string;
+    searchAction?: string;
+    notifications?: Notice[];
+    user?: {
+        name: string;
+        role?: string;
+        email?: string;
+    };
+    userLinks?: Array<{
+        label: string;
+        href: string;
+    }>;
+    signOutHref?: string;
+    sidebarId?: string;
+    themeToggle?: boolean;
+    variant?: 'blur' | 'solid' | 'transparent';
+    className?: string;
+    start?: ReactNode;
+    actions?: ReactNode;
+}
+export declare function AppTopbar({ searchPlaceholder, searchAction, notifications, user, userLinks, signOutHref, sidebarId, themeToggle, variant, className, start, actions }: AppTopbarProps): import("react").JSX.Element;
+export default AppTopbar;

package/dist/types/components/lib/app/ArrivalsBoard.d.ts

@@ -0,0 +1,45 @@
+import './ArrivalsBoard.css';
+interface Arrival {
+    guest: string;
+    room: string;
+    time: string;
+    nights?: number;
+    vip?: boolean;
+    note?: string;
+    done?: boolean;
+}
+interface Departure {
+    guest: string;
+    room: string;
+    time: string;
+    balance?: string;
+    done?: boolean;
+}
+/**
+ * ArrivalsBoard — Front-desk list with Arrivals / Departures / In-house tabs: guest, room, time,
+ * notes and a one-click check-in / check-out action with progress counter.
+ *
+ * @param {string} title - Card title. Default 'Today at the front desk'.
+ * @param {Array<{guest: string, room: string, time: string, nights?: number, vip?: boolean, note?: string, done?: boolean}>} arrivals - Expected arrivals.
+ * @param {Array<{guest: string, room: string, time: string, balance?: string, done?: boolean}>} departures - Expected departures.
+ * @param {Array<{guest: string, room: string, until: string}>} inHouse - Current guests.
+ * @param {string} variant - Style (card|plain). Default 'card'.
+ * @param {string} className - Extra class.
+ *
+ * Accessibility: tabs follow the ARIA tabs pattern (arrow keys); action buttons say which guest
+ * they act on and switch to a pressed "done" state; progress is announced politely.
+ */
+export interface ArrivalsBoardProps {
+    title?: string;
+    arrivals?: Arrival[];
+    departures?: Departure[];
+    inHouse?: Array<{
+        guest: string;
+        room: string;
+        until: string;
+    }>;
+    variant?: 'card' | 'plain';
+    className?: string;
+}
+export declare function ArrivalsBoard({ title, arrivals, departures, inHouse, variant, className, }: ArrivalsBoardProps): import("react").JSX.Element;
+export default ArrivalsBoard;

package/dist/types/components/lib/app/AuthCard.d.ts

@@ -0,0 +1,45 @@
+import './AuthCard.css';
+/**
+ * AuthCard — Sign-in / sign-up split screen: form card (email, password with show/hide, remember
+ * me, SSO buttons) next to a brand panel with a quote and key figures.
+ *
+ * @param {string} mode - 'signin' or 'signup'. Default 'signin'.
+ * @param {string} brand - Product name. Default 'Lobby'.
+ * @param {string} title - Heading. Defaults by mode.
+ * @param {string} subtitle - Supporting text.
+ * @param {string} action - Form action. With '#' it validates and redirects to `successHref`. Default '#'.
+ * @param {string} successHref - Where to go after a demo sign-in. Default '#'.
+ * @param {string[]} providers - SSO buttons. Default ['Google', 'Microsoft'].
+ * @param {string} switchHref - Link to the other mode. Default '#'.
+ * @param {{quote: string, author: string, role?: string}} testimonial - Brand panel quote (optional).
+ * @param {Array<{value: string, label: string}>} stats - Brand panel figures.
+ * @param {string} variant - Layout (split|centered). Default 'split'.
+ * @param {string} className - Extra class.
+ *
+ * Accessibility: one h1; labelled fields with autocomplete (email, current-password /
+ * new-password); errors are linked with aria-describedby and announced; the show-password
+ * button is a toggle with aria-pressed.
+ */
+export interface AuthCardProps {
+    mode?: 'signin' | 'signup';
+    brand?: string;
+    title?: string;
+    subtitle?: string;
+    action?: string;
+    successHref?: string;
+    providers?: string[];
+    switchHref?: string;
+    testimonial?: {
+        quote: string;
+        author: string;
+        role?: string;
+    };
+    stats?: Array<{
+        value: string;
+        label: string;
+    }>;
+    variant?: 'split' | 'centered';
+    className?: string;
+}
+export declare function AuthCard({ mode, brand, title, subtitle, action, successHref, providers, switchHref, testimonial, stats, variant, className, }: AuthCardProps): import("react").JSX.Element;
+export default AuthCard;

package/dist/types/components/lib/app/DataTable.d.ts

@@ -0,0 +1,54 @@
+import './DataTable.css';
+type CellType = 'text' | 'person' | 'status' | 'money' | 'date' | 'number' | 'tags';
+interface Column {
+    key: string;
+    label: string;
+    type?: CellType;
+    align?: 'left' | 'right';
+    sortable?: boolean;
+}
+/**
+ * DataTable — Client-side data table for SaaS apps: search, status filter chips, sortable
+ * columns, row selection with a bulk-action bar, pagination and typed cells
+ * (text, person, status, money, date, number, tags).
+ *
+ * @param {string} title - Card title (optional).
+ * @param {Array<{key: string, label: string, type?: 'text'|'person'|'status'|'money'|'date'|'number'|'tags', align?: 'left'|'right', sortable?: boolean}>} columns - Column definitions.
+ * @param {Array<Record<string, any>>} rows - Row data; `person` cells take `{ name, sub? }`, `status` cells take a string.
+ * @param {Record<string, 'success'|'warning'|'danger'|'info'|'default'>} statusTones - Status → tone map.
+ * @param {string} filterKey - Column used for the filter chips (optional).
+ * @param {boolean} selectable - Show row checkboxes and the bulk bar. Default true.
+ * @param {string[]} bulkActions - Bulk bar buttons. Default ['Export', 'Send email'].
+ * @param {number} pageSize - Rows per page. Default 8.
+ * @param {string} searchPlaceholder - Search placeholder. Default 'Search…'.
+ * @param {string} currency - ISO currency for money cells. Default 'EUR'.
+ * @param {string} locale - Number/date locale. Default 'en-GB'.
+ * @param {string} emptyText - Shown when nothing matches. Default 'No results match your filters.'
+ * @param {string} id - Table id (unique per page). Default 'data-table'.
+ * @param {string} variant - Style (card|plain). Default 'card'.
+ * @param {string} density - Row height (compact|comfortable). Default 'comfortable'.
+ * @param {string} className - Extra class.
+ *
+ * Accessibility: real <table> with a caption; sortable headers are buttons inside <th> with
+ * aria-sort; checkboxes have row labels; result counts and page changes are announced politely.
+ */
+export interface DataTableProps {
+    title?: string;
+    columns?: Column[];
+    rows?: Array<Record<string, any>>;
+    statusTones?: Record<string, 'success' | 'warning' | 'danger' | 'info' | 'default'>;
+    filterKey?: string;
+    selectable?: boolean;
+    bulkActions?: string[];
+    pageSize?: number;
+    searchPlaceholder?: string;
+    currency?: string;
+    locale?: string;
+    emptyText?: string;
+    id?: string;
+    variant?: 'card' | 'plain';
+    density?: 'compact' | 'comfortable';
+    className?: string;
+}
+export declare function DataTable({ title, columns, rows, statusTones, filterKey, selectable, bulkActions, pageSize, searchPlaceholder, currency, locale, emptyText, id, variant, density, className, }: DataTableProps): import("react").JSX.Element;
+export default DataTable;

package/dist/types/components/lib/app/GuestProfileCard.d.ts

@@ -0,0 +1,48 @@
+import './GuestProfileCard.css';
+/**
+ * GuestProfileCard — CRM profile for a guest or customer: avatar, loyalty tier, contact details,
+ * lifetime stats, preference tags, upcoming stay and internal notes.
+ *
+ * @param {{name: string, email?: string, phone?: string, country?: string, since?: string}} guest - Identity and contact.
+ * @param {string} tier - Loyalty tier label (optional). Default 'Gold'.
+ * @param {Array<{label: string, value: string}>} stats - Lifetime figures (stays, nights, spend…).
+ * @param {string[]} preferences - Preference tags.
+ * @param {{room: string, dates: string, status?: string}} upcoming - Next stay (optional).
+ * @param {string[]} notes - Staff notes (optional).
+ * @param {Array<{label: string, href?: string, primary?: boolean}>} actions - Buttons in the header.
+ * @param {string} variant - Style (card|plain). Default 'card'.
+ * @param {string} className - Extra class.
+ *
+ * Accessibility: h2 with the guest name; contact items are real mailto/tel links; stats are a
+ * description list; tags are a plain list.
+ */
+export interface GuestProfileCardProps {
+    guest?: {
+        name: string;
+        email?: string;
+        phone?: string;
+        country?: string;
+        since?: string;
+    };
+    tier?: string;
+    stats?: Array<{
+        label: string;
+        value: string;
+    }>;
+    preferences?: string[];
+    upcoming?: {
+        room: string;
+        dates: string;
+        status?: string;
+    };
+    notes?: string[];
+    actions?: Array<{
+        label: string;
+        href?: string;
+        primary?: boolean;
+    }>;
+    variant?: 'card' | 'plain';
+    className?: string;
+}
+export declare function GuestProfileCard({ guest, tier, stats, preferences, upcoming, notes, actions, variant, className, }: GuestProfileCardProps): import("react").JSX.Element;
+export default GuestProfileCard;

package/dist/types/components/lib/app/HousekeepingBoard.d.ts

@@ -0,0 +1,38 @@
+import './HousekeepingBoard.css';
+type Status = 'clean' | 'dirty' | 'inspecting' | 'occupied' | 'ooo';
+interface Room {
+    number: string;
+    floor: string;
+    type?: string;
+    status: Status;
+    guest?: string;
+    note?: string;
+    assignee?: string;
+}
+/**
+ * HousekeepingBoard — Room status board grouped by floor: clean, dirty, inspecting, occupied and
+ * out of order, with live counters, status filter and a quick "next status" action per room.
+ *
+ * @param {Array<{number: string, floor: string, type?: string, status: Status, guest?: string, note?: string, assignee?: string}>} rooms - Rooms to show.
+ * @param {string} title - Card title. Default 'Housekeeping'.
+ * @param {boolean} interactive - Clicking a tile advances dirty → inspecting → clean (demo/workflow). Default true.
+ * @param {string} variant - Style (card|plain). Default 'card'.
+ * @param {string} size - Tile size (sm|md). Default 'md'.
+ * @param {string} className - Extra class.
+ *
+ * Statuses: clean · dirty · inspecting · occupied · ooo (out of order).
+ * Emits `app:room-status` with `{ room, status }` on change.
+ *
+ * Accessibility: status is written in text on every tile (not colour only); tiles are buttons
+ * with full labels; counters live in a polite region; the filter is a set of toggle buttons.
+ */
+export interface HousekeepingBoardProps {
+    rooms?: Room[];
+    title?: string;
+    interactive?: boolean;
+    variant?: 'card' | 'plain';
+    size?: 'sm' | 'md';
+    className?: string;
+}
+export declare function HousekeepingBoard({ rooms, title, interactive, variant, size, className, }: HousekeepingBoardProps): import("react").JSX.Element;
+export default HousekeepingBoard;

package/dist/types/components/lib/app/PageHeader.d.ts

@@ -0,0 +1,45 @@
+import './PageHeader.css';
+/**
+ * PageHeader — App page heading: breadcrumb, title, description, period switcher and action
+ * buttons, with optional underline tabs below.
+ *
+ * @param {string} title - Page title. Default 'Dashboard'.
+ * @param {string} description - Supporting text.
+ * @param {Array<{label: string, href?: string}>} breadcrumb - Trail (optional).
+ * @param {Array<{label: string, href?: string, icon?: string, primary?: boolean}>} actions - Buttons on the right.
+ * @param {string[]} periods - Segmented period options (e.g. ['Today','7d','30d']); empty hides it.
+ * @param {number} activePeriod - Selected period index. Default 0.
+ * @param {Array<{label: string, href: string, count?: number}>} tabs - Underline tabs (optional).
+ * @param {string} currentTab - href of the active tab.
+ * @param {string} size - Title scale (sm|md|lg). Default 'md'.
+ * @param {string} className - Extra class.
+ *
+ * Accessibility: h1 title; the period switcher is a radio group (arrow keys) that dispatches
+ * `app:period` with `{ index, label }`; tabs are links with aria-current.
+ */
+export interface PageHeaderProps {
+    title?: string;
+    description?: string;
+    breadcrumb?: Array<{
+        label: string;
+        href?: string;
+    }>;
+    actions?: Array<{
+        label: string;
+        href?: string;
+        icon?: string;
+        primary?: boolean;
+    }>;
+    periods?: string[];
+    activePeriod?: number;
+    tabs?: Array<{
+        label: string;
+        href: string;
+        count?: number;
+    }>;
+    currentTab?: string;
+    size?: 'sm' | 'md' | 'lg';
+    className?: string;
+}
+export declare function PageHeader({ title, description, breadcrumb, actions, periods, activePeriod, tabs, currentTab, size, className, }: PageHeaderProps): import("react").JSX.Element;
+export default PageHeader;

package/dist/types/components/lib/app/PlanUsageCard.d.ts

@@ -0,0 +1,44 @@
+import './PlanUsageCard.css';
+/**
+ * PlanUsageCard — Billing summary: current plan and price, renewal date, usage meters with
+ * warning thresholds, payment method and upgrade / manage actions.
+ *
+ * @param {string} plan - Plan name. Default 'Pro'.
+ * @param {string} price - Price label. Default '€149 / month'.
+ * @param {string} renews - Renewal text. Default 'Renews on Dec 1, 2026'.
+ * @param {Array<{label: string, used: number, limit: number, unit?: string}>} usage - Meters.
+ * @param {string} card - Payment method label (optional). Default 'Visa •••• 4242'.
+ * @param {{label: string, href: string}} upgrade - Primary action. Default upgrade.
+ * @param {{label: string, href: string}} manage - Secondary action (optional).
+ * @param {number} warnAt - Percentage at which a meter turns amber. Default 80.
+ * @param {string} variant - Style (card|accent). Default 'card'.
+ * @param {string} className - Extra class.
+ *
+ * Accessibility: each meter is a role="meter" with aria-valuenow/min/max and a text value,
+ * so usage is never conveyed by colour alone.
+ */
+export interface PlanUsageCardProps {
+    plan?: string;
+    price?: string;
+    renews?: string;
+    usage?: Array<{
+        label: string;
+        used: number;
+        limit: number;
+        unit?: string;
+    }>;
+    card?: string;
+    upgrade?: {
+        label: string;
+        href: string;
+    };
+    manage?: {
+        label: string;
+        href: string;
+    };
+    warnAt?: number;
+    variant?: 'card' | 'accent';
+    className?: string;
+}
+export declare function PlanUsageCard({ plan, price, renews, usage, card, upgrade, manage, warnAt, variant, className, }: PlanUsageCardProps): import("react").JSX.Element;
+export default PlanUsageCard;

package/dist/types/components/lib/app/RoomRack.d.ts

@@ -0,0 +1,42 @@
+import './RoomRack.css';
+interface Booking {
+    room: string;
+    guest: string;
+    start: number;
+    nights: number;
+    status: 'confirmed' | 'checked-in' | 'pending' | 'blocked';
+    ref?: string;
+    channel?: string;
+}
+/**
+ * RoomRack — Booking timeline ("tape chart"): rooms as rows, days as columns and reservations as
+ * coloured bars by status, with a today marker, room-type groups and a detail panel on click.
+ *
+ * @param {string[]} days - Column labels, e.g. ['Mon 3', 'Tue 4', …].
+ * @param {number} today - Index of today's column (-1 hides the marker). Default 1.
+ * @param {Array<{id: string, name: string, type?: string}>} rooms - Rows.
+ * @param {Array<{room: string, guest: string, start: number, nights: number, status: 'confirmed'|'checked-in'|'pending'|'blocked', ref?: string, channel?: string}>} bookings - Bars; `start` is a day index.
+ * @param {string} title - Card title. Default 'Room rack'.
+ * @param {number} dayWidth - Column width in px. Default 64.
+ * @param {string} variant - Style (card|plain). Default 'card'.
+ * @param {string} className - Extra class.
+ *
+ * Accessibility: each booking is a button labelled with guest, room, dates and status; the detail
+ * panel is a polite live region; the grid scrolls horizontally with the keyboard.
+ */
+export interface RoomRackProps {
+    days?: string[];
+    today?: number;
+    rooms?: Array<{
+        id: string;
+        name: string;
+        type?: string;
+    }>;
+    bookings?: Booking[];
+    title?: string;
+    dayWidth?: number;
+    variant?: 'card' | 'plain';
+    className?: string;
+}
+export declare function RoomRack({ days, today, rooms, bookings, title, dayWidth, variant, className, }: RoomRackProps): import("react").JSX.Element;
+export default RoomRack;

package/dist/types/components/lib/app/SettingsSection.d.ts

@@ -0,0 +1,34 @@
+import type { ReactNode } from 'react';
+import './SettingsSection.css';
+/**
+ * SettingsSection — Settings page block: title and description on the left, fields in a card on
+ * the right, with an optional footer holding Save / Cancel and a "saved" confirmation.
+ *
+ * @param {string} title - Section title. Default 'Profile'.
+ * @param {string} description - Help text under the title.
+ * @param {boolean} form - Wrap the fields in a <form> with Save/Cancel. Default true.
+ * @param {string} saveLabel - Save button label. Default 'Save changes'.
+ * @param {string} savedText - Confirmation after saving. Default 'Changes saved'.
+ * @param {string} id - Base id. Default 'settings-section'.
+ * @param {string} variant - Layout (split|stacked). Default 'split'.
+ * @param {string} className - Extra class.
+ *
+ * Slots: default (fields — SwitchRow, AnimatedInput, ModernSelect…), `footer-start` (extra text).
+ *
+ * Accessibility: a labelled section; the form validates natively and announces the saved state
+ * in a polite live region. Emits `app:settings-save` with the FormData.
+ */
+export interface SettingsSectionProps {
+    title?: string;
+    description?: string;
+    form?: boolean;
+    saveLabel?: string;
+    savedText?: string;
+    id?: string;
+    variant?: 'split' | 'stacked';
+    className?: string;
+    children?: ReactNode;
+    footerStart?: ReactNode;
+}
+export declare function SettingsSection({ title, description, form, saveLabel, savedText, id, variant, className, children, footerStart }: SettingsSectionProps): import("react").JSX.Element;
+export default SettingsSection;

package/dist/types/components/lib/app/SwitchRow.d.ts

@@ -0,0 +1,28 @@
+import './SwitchRow.css';
+/**
+ * SwitchRow — Settings row with label, description and an accessible on/off switch.
+ *
+ * @param {string} label - Setting name. Default 'Email notifications'.
+ * @param {string} description - Help text.
+ * @param {string} name - Form field name (submitted as "on" when checked). Default 'setting'.
+ * @param {boolean} checked - Initial state. Default true.
+ * @param {boolean} disabled - Disable the switch. Default false.
+ * @param {string} id - Input id (unique). Defaults to `sw-${name}`.
+ * @param {string} size - Switch size (sm|md). Default 'md'.
+ * @param {string} className - Extra class.
+ *
+ * Accessibility: native checkbox with role="switch", associated label and description
+ * (aria-describedby), visible focus ring, 44px touch target.
+ */
+export interface SwitchRowProps {
+    label?: string;
+    description?: string;
+    name?: string;
+    checked?: boolean;
+    disabled?: boolean;
+    id?: string;
+    size?: 'sm' | 'md';
+    className?: string;
+}
+export declare function SwitchRow({ label, description, name, checked, disabled, id, size, className, }: SwitchRowProps): import("react").JSX.Element;
+export default SwitchRow;

package/dist/types/components/lib/app/TeamMembers.d.ts

@@ -0,0 +1,33 @@
+import './TeamMembers.css';
+interface Member {
+    name: string;
+    email: string;
+    role: string;
+    status?: 'active' | 'invited' | 'suspended';
+    you?: boolean;
+}
+/**
+ * TeamMembers — Team management list: members with avatar, email, role selector and status,
+ * an invite form, and remove with confirmation.
+ *
+ * @param {string} title - Card title. Default 'Team'.
+ * @param {Array<{name: string, email: string, role: string, status?: 'active'|'invited'|'suspended', you?: boolean}>} members - People.
+ * @param {string[]} roles - Role options. Default ['Owner', 'Manager', 'Front desk', 'Housekeeping', 'Viewer'].
+ * @param {number} seats - Seats in the plan (shows "4 of 10 seats"). Optional.
+ * @param {string} variant - Style (card|plain). Default 'card'.
+ * @param {string} className - Extra class.
+ *
+ * Accessibility: real list; role selects and remove buttons are labelled with the member's name;
+ * the invite email field validates natively; changes are announced politely.
+ * Emits `app:team-invite` `{ email, role }` and `app:team-remove` `{ email }`.
+ */
+export interface TeamMembersProps {
+    title?: string;
+    members?: Member[];
+    roles?: string[];
+    seats?: number;
+    variant?: 'card' | 'plain';
+    className?: string;
+}
+export declare function TeamMembers({ title, members, roles, seats, variant, className, }: TeamMembersProps): import("react").JSX.Element;
+export default TeamMembers;