astro-component-kit 0.3.1 → 0.4.1

package/src/components/lib/app/RoomRack.astro

@@ -0,0 +1,207 @@
+---
+/**
+ * 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.
+ */
+interface Booking { room: string; guest: string; start: number; nights: number; status: 'confirmed' | 'checked-in' | 'pending' | 'blocked'; ref?: string; channel?: string }
+interface Props {
+  days?: string[];
+  today?: number;
+  rooms?: Array<{ id: string; name: string; type?: string }>;
+  bookings?: Booking[];
+  title?: string;
+  dayWidth?: number;
+  variant?: 'card' | 'plain';
+  className?: string;
+}
+
+const {
+  days = ['Mon 3', 'Tue 4', 'Wed 5', 'Thu 6', 'Fri 7', 'Sat 8', 'Sun 9', 'Mon 10', 'Tue 11', 'Wed 12'],
+  today = 1,
+  rooms = [
+    { id: '101', name: '101', type: 'Standard' },
+    { id: '102', name: '102', type: 'Standard' },
+    { id: '201', name: '201', type: 'Deluxe' },
+    { id: '202', name: '202', type: 'Deluxe' },
+    { id: '301', name: '301', type: 'Suite' },
+  ],
+  bookings = [
+    { room: '101', guest: 'Elena Duarte', start: 0, nights: 3, status: 'checked-in', ref: 'MR-2830', channel: 'Booking.com' },
+    { room: '101', guest: 'Tom Becker', start: 4, nights: 2, status: 'confirmed', ref: 'MR-2852' },
+    { room: '102', guest: 'Aiko Tanaka', start: 1, nights: 5, status: 'confirmed', ref: 'MR-2839', channel: 'Expedia' },
+    { room: '201', guest: 'Maintenance', start: 2, nights: 2, status: 'blocked' },
+    { room: '202', guest: 'James Whitfield', start: 0, nights: 2, status: 'checked-in', ref: 'MR-2840' },
+    { room: '202', guest: 'Sofía Ramos', start: 3, nights: 4, status: 'pending', ref: 'MR-2861' },
+    { room: '301', guest: 'The Okafor family', start: 1, nights: 6, status: 'confirmed', ref: 'MR-2844', channel: 'Direct' },
+  ],
+  title = 'Room rack',
+  dayWidth = 64,
+  variant = 'card',
+  className = '',
+} = Astro.props;
+
+const labels: Record<Booking['status'], string> = { confirmed: 'Confirmed', 'checked-in': 'Checked in', pending: 'Pending', blocked: 'Blocked' };
+const groups = Array.from(new Set(rooms.map((r) => r.type ?? ''))).map((type) => ({ type, rooms: rooms.filter((r) => (r.type ?? '') === type) }));
+const occupied = days.map((_, d) => bookings.filter((b) => b.status !== 'blocked' && d >= b.start && d < b.start + b.nights).length);
+---
+
+<section class:list={['rack', `rack--${variant}`, className]} style={`--day-w: ${dayWidth}px; --days: ${days.length}`} data-rack aria-labelledby="rack-title">
+  <header class="rack__head">
+    <h2 class="rack__title" id="rack-title">{title}</h2>
+    <ul class="rack__legend" aria-label="Legend">
+      {(Object.keys(labels) as Booking['status'][]).map((s) => <li><i class={`rack__swatch rack__swatch--${s}`} aria-hidden="true"></i>{labels[s]}</li>)}
+    </ul>
+  </header>
+
+  <div class="rack__scroll" tabindex="0" role="region" aria-label={`${title}, scroll horizontally`}>
+    <div class="rack__grid">
+      <div class="rack__corner">Room</div>
+      {days.map((d, i) => (
+        <div class:list={['rack__day', { 'is-today': i === today, 'is-weekend': /^(Sat|Sun|Sáb|Dom)/i.test(d) }]}>
+          <span>{d}</span>
+          <small>{Math.round((occupied[i] / Math.max(1, rooms.length)) * 100)}%</small>
+        </div>
+      ))}
+
+      {groups.map((g) => (
+        <>
+          {g.type && <div class="rack__group" style={`grid-column: 1 / span ${days.length + 1}`}>{g.type} <span>{g.rooms.length}</span></div>}
+          {g.rooms.map((room) => (
+            <>
+              <div class="rack__room">{room.name}</div>
+              <div class="rack__lane" style={`grid-column: 2 / span ${days.length}`}>
+                {today >= 0 && <span class="rack__now" style={`left: calc(${today} * var(--day-w) + var(--day-w) / 2)`} aria-hidden="true"></span>}
+                {bookings.filter((b) => b.room === room.id).map((b) => (
+                  <button
+                    type="button"
+                    class:list={['rack__bar', `rack__bar--${b.status}`]}
+                    style={`left: calc(${b.start} * var(--day-w) + 3px); width: calc(${Math.min(b.nights, days.length - b.start)} * var(--day-w) - 6px)`}
+                    aria-label={`${b.guest}, room ${room.name}, ${days[b.start]} for ${b.nights} ${b.nights === 1 ? 'night' : 'nights'}, ${labels[b.status]}`}
+                    data-detail={JSON.stringify({ guest: b.guest, room: room.name, type: room.type, from: days[b.start], nights: b.nights, status: labels[b.status], ref: b.ref, channel: b.channel })}
+                  >
+                    <span>{b.guest}</span>
+                  </button>
+                ))}
+              </div>
+            </>
+          ))}
+        </>
+      ))}
+    </div>
+  </div>
+
+  <div class="rack__detail" aria-live="polite" data-detail-out>
+    <p class="rack__hint">Select a booking to see its details.</p>
+  </div>
+</section>
+
+<script>
+  document.querySelectorAll<HTMLElement>('[data-rack]:not([data-bound])').forEach((rack) => {
+    rack.dataset.bound = '';
+    const out = rack.querySelector<HTMLElement>('[data-detail-out]')!;
+    const bars = Array.from(rack.querySelectorAll<HTMLButtonElement>('.rack__bar'));
+    bars.forEach((bar) => bar.addEventListener('click', () => {
+      bars.forEach((b) => b.removeAttribute('aria-pressed'));
+      bar.setAttribute('aria-pressed', 'true');
+      const d = JSON.parse(bar.dataset.detail || '{}');
+      const dl = document.createElement('dl');
+      dl.className = 'rack__dl';
+      const rows: Array<[string, string | undefined]> = [
+        ['Guest', d.guest], ['Room', `${d.room}${d.type ? ` · ${d.type}` : ''}`], ['Arrival', d.from],
+        ['Nights', String(d.nights)], ['Status', d.status], ['Booking', d.ref], ['Channel', d.channel],
+      ];
+      rows.filter(([, v]) => v).forEach(([k, v]) => {
+        const wrap = document.createElement('div');
+        const dt = document.createElement('dt'); dt.textContent = k;
+        const dd = document.createElement('dd'); dd.textContent = v!;
+        wrap.append(dt, dd);
+        dl.append(wrap);
+      });
+      out.replaceChildren(dl);
+    }));
+  });
+</script>
+
+<style>
+  .rack { container-type: inline-size; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-3, 0.75rem); min-width: 0; }
+  .rack--card { padding: var(--sp-5, 1.25rem); border-radius: var(--r-lg, 16px); border: 1px solid var(--c-border, rgba(255, 255, 255, 0.08)); background: var(--c-bg-1, #0a0a0a); }
+  .rack__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-3, 0.75rem); }
+  .rack__title { margin: 0; font-size: 1rem; font-weight: 700; color: var(--c-text-1, #fff); }
+  .rack__legend { display: flex; flex-wrap: wrap; gap: var(--sp-3, 0.75rem); margin: 0; padding: 0; list-style: none; font-size: 0.75rem; color: var(--c-text-2, #a3a3a3); }
+  .rack__legend li { display: inline-flex; align-items: center; gap: 6px; }
+  .rack__swatch { width: 10px; height: 10px; border-radius: 3px; }
+
+  .rack__scroll { overflow-x: auto; border-radius: 10px; border: 1px solid var(--c-border, rgba(255, 255, 255, 0.08)); }
+  .rack__grid { display: grid; grid-template-columns: 80px repeat(var(--days), var(--day-w)); min-width: max-content; }
+  .rack__corner, .rack__day { position: sticky; top: 0; z-index: 2; display: grid; align-content: center; height: 48px; padding: 0 8px; background: var(--c-bg-1, #0a0a0a); border-bottom: 1px solid var(--c-border, rgba(255, 255, 255, 0.08)); font-size: 0.72rem; color: var(--c-text-3, #737373); }
+  .rack__corner { left: 0; z-index: 3; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; }
+  .rack__day { text-align: center; border-left: 1px solid var(--c-border, rgba(255, 255, 255, 0.05)); }
+  .rack__day span { font-weight: 700; color: var(--c-text-2, #a3a3a3); }
+  .rack__day small { font-size: 0.66rem; }
+  .rack__day.is-weekend { background: color-mix(in srgb, var(--c-bg-1, #0a0a0a) 92%, var(--c-text-1, #fff)); }
+  .rack__day.is-today span { color: var(--app-accent, var(--c-primary-light, #d4a017)); }
+  .rack__group { padding: 6px 10px; background: rgb(var(--ink-rgb, 255 255 255) / 0.03); border-bottom: 1px solid var(--c-border, rgba(255, 255, 255, 0.06)); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--c-text-2, #a3a3a3); }
+  .rack__group span { color: var(--c-text-3, #737373); }
+  .rack__room { position: sticky; left: 0; z-index: 1; display: flex; align-items: center; height: 48px; padding: 0 12px; background: var(--c-bg-1, #0a0a0a); border-bottom: 1px solid var(--c-border, rgba(255, 255, 255, 0.06)); border-right: 1px solid var(--c-border, rgba(255, 255, 255, 0.08)); font-size: 0.85rem; font-weight: 700; color: var(--c-text-1, #fff); font-variant-numeric: tabular-nums; }
+  .rack__lane {
+    position: relative;
+    height: 48px;
+    border-bottom: 1px solid var(--c-border, rgba(255, 255, 255, 0.06));
+    background-image: linear-gradient(to right, var(--c-border, rgba(255, 255, 255, 0.05)) 1px, transparent 1px);
+    background-size: var(--day-w) 100%;
+  }
+  .rack__now { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: var(--app-accent, var(--c-primary-light, #d4a017)); opacity: 0.6; z-index: 1; }
+
+  .rack__bar {
+    --tone: var(--app-accent, var(--c-primary-light, #d4a017));
+    position: absolute;
+    top: 8px;
+    bottom: 8px;
+    z-index: 2;
+    display: flex;
+    align-items: center;
+    padding: 0 10px;
+    border: 0;
+    border-left: 3px solid var(--tone);
+    border-radius: 7px;
+    background: color-mix(in srgb, var(--tone) 22%, var(--c-bg-1, #0a0a0a));
+    color: var(--c-text-1, #fff);
+    font: inherit;
+    font-size: 0.75rem;
+    font-weight: 600;
+    text-align: left;
+    overflow: hidden;
+    cursor: pointer;
+    transition: transform 0.15s ease, box-shadow 0.15s ease;
+  }
+  .rack__bar span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  .rack__bar:hover, .rack__bar[aria-pressed='true'] { transform: translateY(-1px); box-shadow: 0 6px 16px -6px color-mix(in srgb, var(--tone) 60%, transparent); }
+  .rack__bar[aria-pressed='true'] { outline: 2px solid var(--tone); outline-offset: 1px; }
+  .rack__bar:focus-visible { outline: 2px solid var(--c-text-1, #fff); outline-offset: 2px; }
+  .rack__bar--checked-in, .rack__swatch--checked-in { --tone: var(--c-success, #34d399); }
+  .rack__bar--pending, .rack__swatch--pending { --tone: var(--c-warning, #fbbf24); }
+  .rack__bar--blocked, .rack__swatch--blocked { --tone: var(--c-text-3, #737373); }
+  .rack__bar--blocked { background: repeating-linear-gradient(135deg, rgb(var(--ink-rgb, 255 255 255) / 0.06) 0 6px, transparent 6px 12px); color: var(--c-text-2, #a3a3a3); }
+  .rack__swatch { background: var(--tone, var(--app-accent, var(--c-primary-light, #d4a017))); }
+  .rack__swatch--confirmed { --tone: var(--app-accent, var(--c-primary-light, #d4a017)); }
+  .rack__scroll:focus-visible { outline: 2px solid var(--app-accent, var(--c-primary-light, #d4a017)); outline-offset: 2px; }
+
+  .rack__detail { min-height: 44px; padding: var(--sp-3, 0.75rem) var(--sp-4, 1rem); border-radius: 10px; background: rgb(var(--ink-rgb, 255 255 255) / 0.03); }
+  .rack__hint { margin: 0; font-size: 0.82rem; color: var(--c-text-3, #737373); }
+  .rack__detail :global(.rack__dl) { display: flex; flex-wrap: wrap; gap: var(--sp-2, 0.5rem) var(--sp-6, 1.5rem); margin: 0; }
+  .rack__detail :global(.rack__dl dt) { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--c-text-3, #737373); }
+  .rack__detail :global(.rack__dl dd) { margin: 0; font-size: 0.88rem; font-weight: 600; color: var(--c-text-1, #fff); }
+  @media (prefers-reduced-motion: reduce) { .rack__bar { transition: none; } }
+</style>

package/src/components/lib/app/SettingsSection.astro

@@ -0,0 +1,96 @@
+---
+/**
+ * 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.
+ */
+interface Props {
+  title?: string;
+  description?: string;
+  form?: boolean;
+  saveLabel?: string;
+  savedText?: string;
+  id?: string;
+  variant?: 'split' | 'stacked';
+  className?: string;
+}
+
+const {
+  title = 'Profile',
+  description = 'This information is visible to your team.',
+  form = true,
+  saveLabel = 'Save changes',
+  savedText = 'Changes saved',
+  id = 'settings-section',
+  variant = 'split',
+  className = '',
+} = Astro.props;
+
+const Body = form ? 'form' : 'div';
+---
+
+<section class:list={['set', `set--${variant}`, className]} aria-labelledby={`${id}-title`}>
+  <div class="set__intro">
+    <h2 class="set__title" id={`${id}-title`}>{title}</h2>
+    {description && <p class="set__desc">{description}</p>}
+  </div>
+  <Body class="set__card" data-settings-form={form ? '' : undefined} novalidate={form ? true : undefined}>
+    <div class="set__fields"><slot /></div>
+    {form && (
+      <div class="set__foot">
+        <slot name="footer-start" />
+        <p class="set__saved" aria-live="polite" data-saved data-text={savedText}></p>
+        <button type="reset" class="set__btn">Cancel</button>
+        <button type="submit" class="set__btn set__btn--primary">{saveLabel}</button>
+      </div>
+    )}
+  </Body>
+</section>
+
+<script>
+  document.querySelectorAll<HTMLFormElement>('form[data-settings-form]:not([data-bound])').forEach((f) => {
+    f.dataset.bound = '';
+    const saved = f.querySelector<HTMLElement>('[data-saved]');
+    f.addEventListener('submit', (e) => {
+      e.preventDefault();
+      if (!f.checkValidity()) {
+        f.querySelector<HTMLElement>(':invalid')?.focus();
+        return;
+      }
+      if (saved) {
+        saved.textContent = `✓ ${saved.dataset.text}`;
+        window.setTimeout(() => { saved.textContent = ''; }, 2600);
+      }
+      f.dispatchEvent(new CustomEvent('app:settings-save', { bubbles: true, detail: new FormData(f) }));
+    });
+  });
+</script>
+
+<style>
+  .set { container-type: inline-size; display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 2fr); gap: var(--sp-6, 1.5rem); padding-block: var(--sp-6, 1.5rem); border-bottom: 1px solid var(--c-border, rgba(255, 255, 255, 0.08)); }
+  .set--stacked { grid-template-columns: 1fr; }
+  .set__title { margin: 0; font-size: 1rem; font-weight: 700; color: var(--c-text-1, #fff); }
+  .set__desc { margin: 4px 0 0; font-size: 0.85rem; line-height: 1.55; color: var(--c-text-2, #a3a3a3); }
+  .set__card { border-radius: var(--r-lg, 16px); border: 1px solid var(--c-border, rgba(255, 255, 255, 0.08)); background: var(--c-bg-1, #0a0a0a); overflow: hidden; }
+  .set__fields { display: grid; gap: var(--sp-4, 1rem); padding: var(--sp-5, 1.25rem); }
+  .set__foot { display: flex; align-items: center; justify-content: flex-end; gap: var(--sp-2, 0.5rem); padding: var(--sp-3, 0.75rem) var(--sp-5, 1.25rem); border-top: 1px solid var(--c-border, rgba(255, 255, 255, 0.08)); background: rgb(var(--ink-rgb, 255 255 255) / 0.02); }
+  .set__saved { margin: 0 auto 0 0; font-size: 0.8rem; font-weight: 600; color: var(--c-success, #34d399); }
+  .set__btn { min-height: 38px; padding: 0 0.9rem; border-radius: 10px; border: 1px solid var(--c-border, rgba(255, 255, 255, 0.12)); background: transparent; color: var(--c-text-1, #fff); font: inherit; font-size: 0.82rem; font-weight: 600; cursor: pointer; }
+  .set__btn--primary { border-color: transparent; background: var(--app-accent, var(--c-primary-light, #d4a017)); color: var(--c-on-primary, #050505); }
+  .set__btn:focus-visible { outline: 2px solid var(--app-accent, var(--c-primary-light, #d4a017)); outline-offset: 2px; }
+  .set :global(.anim-input), .set :global(.custom-select) { background: var(--c-bg, #050505); }
+  @container (max-width: 640px) { .set__intro, .set__card { grid-column: 1 / -1; } }
+</style>

package/src/components/lib/app/SwitchRow.astro

@@ -0,0 +1,71 @@
+---
+/**
+ * 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.
+ */
+interface Props {
+  label?: string;
+  description?: string;
+  name?: string;
+  checked?: boolean;
+  disabled?: boolean;
+  id?: string;
+  size?: 'sm' | 'md';
+  className?: string;
+}
+
+const {
+  label = 'Email notifications',
+  description = 'Get an email for new bookings and cancellations.',
+  name = 'setting',
+  checked = true,
+  disabled = false,
+  id,
+  size = 'md',
+  className = '',
+} = Astro.props;
+
+const inputId = id ?? `sw-${name}`;
+---
+
+<div class:list={['sw-row', `sw-row--${size}`, { 'is-disabled': disabled }, className]}>
+  <div class="sw-row__text">
+    <label class="sw-row__label" for={inputId}>{label}</label>
+    {description && <p class="sw-row__desc" id={`${inputId}-desc`}>{description}</p>}
+  </div>
+  <span class="sw-row__switch">
+    <input type="checkbox" role="switch" id={inputId} name={name} checked={checked} disabled={disabled} aria-describedby={description ? `${inputId}-desc` : undefined} />
+    <span class="sw-row__track" aria-hidden="true"></span>
+  </span>
+</div>
+
+<style>
+  .sw-row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4, 1rem); min-height: 44px; }
+  .sw-row + :global(.sw-row) { padding-top: var(--sp-4, 1rem); border-top: 1px solid var(--c-border, rgba(255, 255, 255, 0.06)); }
+  .sw-row__label { font-size: 0.9rem; font-weight: 600; color: var(--c-text-1, #fff); cursor: pointer; }
+  .sw-row__desc { margin: 2px 0 0; font-size: 0.8rem; line-height: 1.5; color: var(--c-text-2, #a3a3a3); }
+  .sw-row__switch { position: relative; flex-shrink: 0; width: 44px; height: 26px; }
+  .sw-row--sm .sw-row__switch { width: 36px; height: 22px; }
+  .sw-row__switch input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; z-index: 1; }
+  .sw-row__track { position: absolute; inset: 0; border-radius: 999px; background: rgb(var(--ink-rgb, 255 255 255) / 0.16); transition: background 0.2s ease; }
+  .sw-row__track::after { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); transition: transform 0.2s cubic-bezier(0.34, 1.4, 0.64, 1); }
+  .sw-row--sm .sw-row__track::after { width: 16px; height: 16px; }
+  .sw-row__switch input:checked + .sw-row__track { background: var(--app-accent, var(--c-primary-light, #d4a017)); }
+  .sw-row__switch input:checked + .sw-row__track::after { transform: translateX(18px); }
+  .sw-row--sm .sw-row__switch input:checked + .sw-row__track::after { transform: translateX(14px); }
+  .sw-row__switch input:focus-visible + .sw-row__track { outline: 2px solid var(--app-accent, var(--c-primary-light, #d4a017)); outline-offset: 2px; }
+  .sw-row.is-disabled { opacity: 0.5; }
+  .sw-row.is-disabled input { cursor: not-allowed; }
+  @media (prefers-reduced-motion: reduce) { .sw-row__track, .sw-row__track::after { transition: none; } }
+</style>

package/src/components/lib/app/TeamMembers.astro

@@ -0,0 +1,190 @@
+---
+/**
+ * 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 }`.
+ */
+import { initials, hueFrom } from './app-icons';
+
+interface Member { name: string; email: string; role: string; status?: 'active' | 'invited' | 'suspended'; you?: boolean }
+interface Props {
+  title?: string;
+  members?: Member[];
+  roles?: string[];
+  seats?: number;
+  variant?: 'card' | 'plain';
+  className?: string;
+}
+
+const {
+  title = 'Team',
+  members = [
+    { name: 'Lucía Ortega', email: 'lucia@mirador.com', role: 'Owner', status: 'active', you: true },
+    { name: 'Daniel Kim', email: 'daniel@mirador.com', role: 'Manager', status: 'active' },
+    { name: 'Rosa Jiménez', email: 'rosa@mirador.com', role: 'Housekeeping', status: 'active' },
+    { name: 'Omar Haddad', email: 'omar@mirador.com', role: 'Front desk', status: 'invited' },
+  ],
+  roles = ['Owner', 'Manager', 'Front desk', 'Housekeeping', 'Viewer'],
+  seats = 10,
+  variant = 'card',
+  className = '',
+} = Astro.props;
+---
+
+<section class:list={['team', `team--${variant}`, className]} data-team aria-labelledby="team-title">
+  <header class="team__head">
+    <div>
+      <h2 class="team__title" id="team-title">{title}</h2>
+      {seats && <p class="team__seats"><span data-used>{members.length}</span> of {seats} seats used</p>}
+    </div>
+  </header>
+
+  <form class="team__invite" novalidate data-invite>
+    <label class="sr-only" for="team-email">Email to invite</label>
+    <input id="team-email" type="email" name="email" placeholder="name@company.com" required autocomplete="email" />
+    <label class="sr-only" for="team-role">Role</label>
+    <select id="team-role" name="role">{roles.filter((r) => r !== 'Owner').map((r) => <option>{r}</option>)}</select>
+    <button type="submit">Send invite</button>
+  </form>
+  <p class="team__msg" aria-live="polite" data-msg></p>
+
+  <ul class="team__list" data-list>
+    {members.map((m) => (
+      <li class="team__row" data-email={m.email}>
+        <span class="team__avatar" style={`--h: ${hueFrom(m.name)}`} aria-hidden="true">{initials(m.name)}</span>
+        <span class="team__who">
+          <strong>{m.name}{m.you && <em> (you)</em>}</strong>
+          <small>{m.email}</small>
+        </span>
+        <span class:list={['team__status', `team__status--${m.status ?? 'active'}`]}>{m.status === 'invited' ? 'Invited' : m.status === 'suspended' ? 'Suspended' : 'Active'}</span>
+        <label class="sr-only" for={`role-${m.email}`}>Role for {m.name}</label>
+        <select id={`role-${m.email}`} class="team__role" disabled={m.role === 'Owner'}>
+          {roles.map((r) => <option selected={r === m.role}>{r}</option>)}
+        </select>
+        <button type="button" class="team__remove" aria-label={`Remove ${m.name}`} disabled={m.you} data-remove>
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true"><path d="M18 6 6 18M6 6l12 12"/></svg>
+        </button>
+      </li>
+    ))}
+  </ul>
+</section>
+
+<script>
+  import { initials, hueFrom } from './app-icons';
+
+  document.querySelectorAll<HTMLElement>('[data-team]:not([data-bound])').forEach((team) => {
+    team.dataset.bound = '';
+    const list = team.querySelector<HTMLUListElement>('[data-list]')!;
+    const msg = team.querySelector<HTMLElement>('[data-msg]')!;
+    const used = team.querySelector<HTMLElement>('[data-used]');
+    const form = team.querySelector<HTMLFormElement>('[data-invite]')!;
+    const recount = () => { if (used) used.textContent = String(list.children.length); };
+
+    const bindRemove = (btn: HTMLButtonElement) => {
+      let armed = false;
+      btn.addEventListener('click', () => {
+        const row = btn.closest<HTMLElement>('.team__row')!;
+        const name = row.querySelector('strong')?.textContent?.replace(' (you)', '') ?? '';
+        if (!armed) {
+          armed = true;
+          btn.classList.add('is-armed');
+          btn.setAttribute('aria-label', `Confirm removing ${name}`);
+          msg.textContent = `Click again to remove ${name}.`;
+          window.setTimeout(() => { armed = false; btn.classList.remove('is-armed'); btn.setAttribute('aria-label', `Remove ${name}`); }, 3000);
+          return;
+        }
+        team.dispatchEvent(new CustomEvent('app:team-remove', { bubbles: true, detail: { email: row.dataset.email } }));
+        const next = (row.nextElementSibling ?? row.previousElementSibling)?.querySelector<HTMLElement>('select, button');
+        row.remove();
+        msg.textContent = `${name} was removed from the team.`;
+        recount();
+        next?.focus();
+      });
+    };
+    team.querySelectorAll<HTMLButtonElement>('[data-remove]').forEach(bindRemove);
+
+    form.addEventListener('submit', (e) => {
+      e.preventDefault();
+      const input = form.elements.namedItem('email') as HTMLInputElement;
+      const role = (form.elements.namedItem('role') as HTMLSelectElement).value;
+      if (!input.checkValidity()) { msg.textContent = 'Enter a valid email address.'; input.focus(); return; }
+      const email = input.value.trim();
+      const name = email.split('@')[0].replace(/[._-]+/g, ' ').replace(/\b\w/g, (c) => c.toUpperCase());
+      const li = document.createElement('li');
+      li.className = 'team__row is-new';
+      li.dataset.email = email;
+      li.innerHTML = `<span class="team__avatar" style="--h:${hueFrom(name)}" aria-hidden="true">${initials(name)}</span>
+        <span class="team__who"><strong></strong><small></small></span>
+        <span class="team__status team__status--invited">Invited</span>
+        <span class="team__role-static"></span>
+        <button type="button" class="team__remove" data-remove><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true"><path d="M18 6 6 18M6 6l12 12"/></svg></button>`;
+      li.querySelector('strong')!.textContent = name;
+      li.querySelector('small')!.textContent = email;
+      li.querySelector('.team__role-static')!.textContent = role;
+      li.querySelector('button')!.setAttribute('aria-label', `Remove ${name}`);
+      list.append(li);
+      bindRemove(li.querySelector<HTMLButtonElement>('[data-remove]')!);
+      msg.textContent = `Invitation sent to ${email} as ${role}.`;
+      team.dispatchEvent(new CustomEvent('app:team-invite', { bubbles: true, detail: { email, role } }));
+      form.reset();
+      recount();
+    });
+  });
+</script>
+
+<style>
+  .team { container-type: inline-size; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-3, 0.75rem); min-width: 0; }
+  .team--card { padding: var(--sp-5, 1.25rem); border-radius: var(--r-lg, 16px); border: 1px solid var(--c-border, rgba(255, 255, 255, 0.08)); background: var(--c-bg-1, #0a0a0a); }
+  .team__title { margin: 0; font-size: 1rem; font-weight: 700; color: var(--c-text-1, #fff); }
+  .team__seats { margin: 2px 0 0; font-size: 0.8rem; color: var(--c-text-3, #737373); }
+  .team__invite { display: flex; gap: var(--sp-2, 0.5rem); }
+  .team__invite input, .team__invite select, .team__role {
+    min-height: 40px;
+    padding: 0 0.75rem;
+    border-radius: 10px;
+    border: 1px solid var(--c-border, rgba(255, 255, 255, 0.12));
+    background: var(--c-bg, #050505);
+    color: var(--c-text-1, #fff);
+    font: inherit;
+    font-size: 0.85rem;
+  }
+  .team__invite input { flex: 1; min-width: 0; }
+  .team__invite button { min-height: 40px; padding: 0 1rem; border: 0; border-radius: 10px; background: var(--app-accent, var(--c-primary-light, #d4a017)); color: var(--c-on-primary, #050505); font: inherit; font-size: 0.85rem; font-weight: 700; cursor: pointer; white-space: nowrap; }
+  .team__msg { min-height: 1.2em; margin: 0; font-size: 0.8rem; color: var(--c-text-2, #a3a3a3); }
+  .team__list { display: grid; margin: 0; padding: 0; list-style: none; }
+  .team__list :global(.team__row) { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto 150px 40px; align-items: center; gap: var(--sp-3, 0.75rem); padding: var(--sp-3, 0.75rem) 0; border-top: 1px solid var(--c-border, rgba(255, 255, 255, 0.06)); }
+  .team__list :global(.team__row.is-new) { animation: team-in 0.3s ease-out; }
+  @keyframes team-in { from { opacity: 0; transform: translateY(-4px); } }
+  .team__list :global(.team__avatar) { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: hsl(var(--h) 50% 45%); color: #fff; font-size: 0.72rem; font-weight: 700; }
+  .team__list :global(.team__who) { display: grid; min-width: 0; }
+  .team__list :global(.team__who strong) { font-size: 0.88rem; color: var(--c-text-1, #fff); }
+  .team__list :global(.team__who em) { font-style: normal; font-weight: 500; color: var(--c-text-3, #737373); }
+  .team__list :global(.team__who small) { font-size: 0.76rem; color: var(--c-text-3, #737373); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  .team__list :global(.team__status) { padding: 2px 8px; border-radius: 999px; font-size: 0.72rem; font-weight: 700; background: color-mix(in srgb, var(--c-success, #34d399) 14%, transparent); color: var(--c-success, #34d399); }
+  .team__list :global(.team__status--invited) { background: color-mix(in srgb, var(--c-warning, #fbbf24) 14%, transparent); color: var(--c-warning, #fbbf24); }
+  .team__list :global(.team__status--suspended) { background: color-mix(in srgb, var(--c-danger, #f87171) 14%, transparent); color: var(--c-danger, #f87171); }
+  .team__list :global(.team__role-static) { font-size: 0.85rem; color: var(--c-text-2, #a3a3a3); padding-left: 0.75rem; }
+  .team__role:disabled { opacity: 0.6; }
+  .team__list :global(.team__remove) { display: grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: 8px; background: transparent; color: var(--c-text-3, #737373); cursor: pointer; }
+  .team__list :global(.team__remove:hover) { background: color-mix(in srgb, var(--c-danger, #f87171) 12%, transparent); color: var(--c-danger, #f87171); }
+  .team__list :global(.team__remove.is-armed) { background: var(--c-danger, #f87171); color: #fff; }
+  .team__list :global(.team__remove:disabled) { visibility: hidden; }
+  .team :is(input, select, button):focus-visible, .team__list :global(button:focus-visible) { outline: 2px solid var(--app-accent, var(--c-primary-light, #d4a017)); outline-offset: 2px; }
+  .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
+  @container (max-width: 620px) {
+    .team__invite { flex-wrap: wrap; }
+    .team__list :global(.team__row) { grid-template-columns: 36px minmax(0, 1fr) 40px; }
+    .team__list :global(.team__status) { display: none; }
+    .team__role, .team__list :global(.team__role-static) { grid-column: 2; }
+  }
+</style>

package/src/components/lib/app/app-icons.ts

@@ -0,0 +1,52 @@
+// src/components/lib/app/app-icons.ts
+// Stroke icons (24×24, stroke = currentColor) shared by the App & Dashboard components.
+
+export const appIcons = {
+  dashboard: '<rect x="3" y="3" width="7" height="9" rx="1.5"/><rect x="14" y="3" width="7" height="5" rx="1.5"/><rect x="14" y="12" width="7" height="9" rx="1.5"/><rect x="3" y="16" width="7" height="5" rx="1.5"/>',
+  calendar: '<rect x="3" y="5" width="18" height="16" rx="2"/><path d="M3 10h18M8 3v4M16 3v4"/>',
+  bed: '<path d="M3 18V8M21 18v-5a3 3 0 0 0-3-3h-7v8M3 14h18"/><circle cx="7" cy="11" r="1.6"/>',
+  users: '<path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M22 21v-2a4 4 0 0 0-3-3.9M16 3.1a4 4 0 0 1 0 7.8"/>',
+  chart: '<path d="M3 3v18h18"/><path d="m7 15 4-4 3 3 5-6"/>',
+  sparkle: '<path d="M12 3l1.9 5.8L20 10l-6.1 1.2L12 17l-1.9-5.8L4 10l6.1-1.2z"/>',
+  settings: '<circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.7 1.7 0 0 0 .3 1.8l.1.1a2 2 0 1 1-2.8 2.8l-.1-.1a1.7 1.7 0 0 0-1.8-.3 1.7 1.7 0 0 0-1 1.5V21a2 2 0 1 1-4 0v-.1a1.7 1.7 0 0 0-1.1-1.5 1.7 1.7 0 0 0-1.8.3l-.1.1a2 2 0 1 1-2.8-2.8l.1-.1a1.7 1.7 0 0 0 .3-1.8 1.7 1.7 0 0 0-1.5-1H3a2 2 0 1 1 0-4h.1a1.7 1.7 0 0 0 1.5-1.1 1.7 1.7 0 0 0-.3-1.8l-.1-.1a2 2 0 1 1 2.8-2.8l.1.1a1.7 1.7 0 0 0 1.8.3H9a1.7 1.7 0 0 0 1-1.5V3a2 2 0 1 1 4 0v.1a1.7 1.7 0 0 0 1 1.5 1.7 1.7 0 0 0 1.8-.3l.1-.1a2 2 0 1 1 2.8 2.8l-.1.1a1.7 1.7 0 0 0-.3 1.8V9a1.7 1.7 0 0 0 1.5 1H21a2 2 0 1 1 0 4h-.1a1.7 1.7 0 0 0-1.5 1z"/>',
+  bell: '<path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9"/><path d="M10.3 21a1.9 1.9 0 0 0 3.4 0"/>',
+  search: '<circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/>',
+  wallet: '<rect x="2" y="6" width="20" height="14" rx="2"/><path d="M2 10h20M16 15h2"/>',
+  broom: '<path d="M14 4 20 10M9 9l6 6M4 20l5-5M9 15l-2 5 5-2"/><path d="m11 13 7-7"/>',
+  door: '<path d="M14 3H6v18h8"/><path d="M14 3l5 2v14l-5 2z"/><path d="M11 12h.01"/>',
+  plane: '<path d="M2 16l20-7-20-7 4 7z"/><path d="M6 9h8"/>',
+  logout: '<path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4M16 17l5-5-5-5M21 12H9"/>',
+  plus: '<path d="M12 5v14M5 12h14"/>',
+  download: '<path d="M12 3v12M7 10l5 5 5-5M5 21h14"/>',
+  filter: '<path d="M3 5h18l-7 8v6l-4 2v-8z"/>',
+  more: '<circle cx="5" cy="12" r="1"/><circle cx="12" cy="12" r="1"/><circle cx="19" cy="12" r="1"/>',
+  check: '<path d="M20 6 9 17l-5-5"/>',
+  x: '<path d="M18 6 6 18M6 6l12 12"/>',
+  star: '<path d="M12 3l2.7 5.6 6.1.9-4.4 4.3 1 6.1L12 17l-5.4 2.9 1-6.1L3.2 9.5l6.1-.9z"/>',
+  mail: '<rect x="3" y="5" width="18" height="14" rx="2"/><path d="m3 7 9 6 9-6"/>',
+  phone: '<path d="M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1.9.4 1.8.7 2.7a2 2 0 0 1-.5 2.1L8 9.8a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.5c.9.3 1.8.6 2.7.7a2 2 0 0 1 1.7 2z"/>',
+  key: '<circle cx="7.5" cy="15.5" r="4.5"/><path d="m21 2-9.6 9.6M15.5 7.5l3 3L22 7l-3-3"/>',
+  menu: '<path d="M4 6h16M4 12h16M4 18h16"/>',
+  chevron: '<path d="m9 18 6-6-6-6"/>',
+  sun: '<circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4"/>',
+  moon: '<path d="M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8z"/>',
+  building: '<rect x="4" y="2" width="16" height="20" rx="2"/><path d="M9 22v-4h6v4M8 6h.01M12 6h.01M16 6h.01M8 10h.01M12 10h.01M16 10h.01M8 14h.01M12 14h.01M16 14h.01"/>',
+} as const;
+
+export type AppIcon = keyof typeof appIcons;
+
+export function appIcon(name?: string): string {
+  return appIcons[(name as AppIcon) ?? 'dashboard'] ?? appIcons.dashboard;
+}
+
+/** Initials for avatar fallbacks: "Lucía Ortega" → "LO". */
+export function initials(name: string): string {
+  return name.split(/\s+/).filter(Boolean).slice(0, 2).map((p) => p[0]!.toUpperCase()).join('');
+}
+
+/** Stable hue (0–360) from a string, for avatar backgrounds. */
+export function hueFrom(text: string): number {
+  let h = 0;
+  for (let i = 0; i < text.length; i++) h = (h * 31 + text.charCodeAt(i)) % 360;
+  return h;
+}

package/src/components/lib/app/index.ts

@@ -0,0 +1,19 @@
+// src/components/lib/app/index.ts
+// Barrel export for App & Dashboard components (SaaS shells, tables, boards, settings).
+
+export { default as AppSidebar } from './AppSidebar.astro';
+export { default as AppTopbar } from './AppTopbar.astro';
+export { default as PageHeader } from './PageHeader.astro';
+export { default as DataTable } from './DataTable.astro';
+export { default as RoomRack } from './RoomRack.astro';
+export { default as HousekeepingBoard } from './HousekeepingBoard.astro';
+export { default as ArrivalsBoard } from './ArrivalsBoard.astro';
+export { default as GuestProfileCard } from './GuestProfileCard.astro';
+export { default as SettingsSection } from './SettingsSection.astro';
+export { default as SwitchRow } from './SwitchRow.astro';
+export { default as TeamMembers } from './TeamMembers.astro';
+export { default as PlanUsageCard } from './PlanUsageCard.astro';
+export { default as AuthCard } from './AuthCard.astro';
+
+export { appIcons, appIcon, initials, hueFrom } from './app-icons';
+export type { AppIcon } from './app-icons';