ciderui 0.1.0

package/js/sheet.js

@@ -0,0 +1,17 @@
+// Sheet — ciderui
+// Uses native <dialog> element. Adds backdrop-click-to-close.
+function init() {
+  document.querySelectorAll("dialog.sheet").forEach((sheet) => {
+    sheet.addEventListener("click", (e) => {
+      if (e.target === sheet) {
+        sheet.close();
+      }
+    });
+  });
+}
+
+if (document.readyState === "loading") {
+  document.addEventListener("DOMContentLoaded", init);
+} else {
+  init();
+}

package/js/tabs.js

@@ -0,0 +1,34 @@
+// Tabs — ciderui
+function init() {
+  document.querySelectorAll("[data-tabs]").forEach((tabGroup) => {
+    const buttons = tabGroup.querySelectorAll("[data-tab]");
+    const panels = tabGroup.querySelectorAll("[data-tab-panel]");
+
+    buttons.forEach((btn) => {
+      btn.addEventListener("click", () => {
+        const target = btn.getAttribute("data-tab");
+
+        // Deactivate all
+        buttons.forEach((b) => b.removeAttribute("data-active"));
+
+        // Activate clicked
+        btn.setAttribute("data-active", "");
+
+        // Show/hide panels
+        panels.forEach((p) => {
+          if (p.getAttribute("data-tab-panel") === target) {
+            p.setAttribute("data-active", "");
+          } else {
+            p.removeAttribute("data-active");
+          }
+        });
+      });
+    });
+  });
+}
+
+if (document.readyState === "loading") {
+  document.addEventListener("DOMContentLoaded", init);
+} else {
+  init();
+}

package/js/toast.js

@@ -0,0 +1,60 @@
+// Toast — ciderui
+function showToast(title, message, type = "success") {
+  const container =
+    document.getElementById("toast-container") || createToastContainer();
+
+  const iconsSVG = {
+    success:
+      '<svg class="mt-0.5 size-5 shrink-0 text-success" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>',
+    error:
+      '<svg class="mt-0.5 size-5 shrink-0 text-destructive" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>',
+    info: '<svg class="mt-0.5 size-5 shrink-0 text-primary" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>',
+  };
+
+  const toast = document.createElement("div");
+  toast.className = "toast";
+  toast.setAttribute("role", "status");
+  toast.setAttribute("aria-live", "polite");
+
+  // Icon
+  const iconWrapper = document.createElement("template");
+  iconWrapper.innerHTML = iconsSVG[type] || iconsSVG.success;
+  toast.appendChild(iconWrapper.content);
+
+  // Content
+  const content = document.createElement("div");
+  content.className = "flex-1";
+  const titleEl = document.createElement("p");
+  titleEl.className = "toast-title";
+  titleEl.textContent = title;
+  const messageEl = document.createElement("p");
+  messageEl.className = "toast-message";
+  messageEl.textContent = message;
+  content.appendChild(titleEl);
+  content.appendChild(messageEl);
+  toast.appendChild(content);
+
+  // Close button
+  const closeBtn = document.createElement("button");
+  closeBtn.className = "toast-close";
+  closeBtn.setAttribute("aria-label", "Close");
+  closeBtn.innerHTML = '<svg class="size-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/></svg>';
+  closeBtn.addEventListener("click", () => toast.remove());
+  toast.appendChild(closeBtn);
+
+  container.appendChild(toast);
+
+  // Auto-remove after 4 seconds
+  setTimeout(() => {
+    toast.style.animation = "slideDown 0.2s ease-in forwards";
+    setTimeout(() => toast.remove(), 200);
+  }, 4000);
+}
+
+function createToastContainer() {
+  const container = document.createElement("div");
+  container.id = "toast-container";
+  container.className = "toast-container";
+  document.body.appendChild(container);
+  return container;
+}

package/js/toggle.js

@@ -0,0 +1,26 @@
+// Toggle — ciderui
+document.addEventListener("click", (e) => {
+  const toggle = e.target.closest(".toggle");
+  if (!toggle || toggle.disabled) return;
+
+  // If inside a toggle-group, handle single-select
+  const group = toggle.closest(".toggle-group");
+  if (group && !group.hasAttribute("data-multiple")) {
+    group.querySelectorAll(".toggle").forEach((t) => {
+      t.removeAttribute("data-active");
+      t.setAttribute("aria-pressed", "false");
+    });
+    toggle.setAttribute("data-active", "");
+    toggle.setAttribute("aria-pressed", "true");
+  } else {
+    // Standalone toggle or multi-select group
+    const isActive = toggle.hasAttribute("data-active");
+    if (isActive) {
+      toggle.removeAttribute("data-active");
+      toggle.setAttribute("aria-pressed", "false");
+    } else {
+      toggle.setAttribute("data-active", "");
+      toggle.setAttribute("aria-pressed", "true");
+    }
+  }
+});

package/package.json

@@ -0,0 +1,53 @@
+{
+  "name": "ciderui",
+  "version": "0.1.0",
+  "description": "Apple-aesthetic UI components as a Tailwind CSS plugin",
+  "license": "MIT",
+  "author": "newlix",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/newlix/ciderui"
+  },
+  "keywords": [
+    "tailwindcss",
+    "tailwind",
+    "css",
+    "components",
+    "apple",
+    "cider",
+    "ui"
+  ],
+  "type": "module",
+  "exports": {
+    ".": "./src/css/ciderui.css",
+    "./cdn": "./src/css/ciderui.cdn.css",
+    "./carousel.js": "./js/carousel.js",
+    "./combobox.js": "./js/combobox.js",
+    "./command.js": "./js/command.js",
+    "./context-menu.js": "./js/context-menu.js",
+    "./dialog.js": "./js/dialog.js",
+    "./dropdown-menu.js": "./js/dropdown-menu.js",
+    "./otp.js": "./js/otp.js",
+    "./popover.js": "./js/popover.js",
+    "./select.js": "./js/select.js",
+    "./sheet.js": "./js/sheet.js",
+    "./tabs.js": "./js/tabs.js",
+    "./toast.js": "./js/toast.js",
+    "./toggle.js": "./js/toggle.js"
+  },
+  "files": [
+    "src/css/",
+    "js/"
+  ],
+  "scripts": {
+    "build": "tailwindcss -i src/css/ciderui.cdn.css -o dist/ciderui.cdn.css && tailwindcss -i src/css/ciderui.cdn.css -o dist/ciderui.cdn.min.css --minify",
+    "dev": "concurrently \"tailwindcss -i docs/docs.css -o docs/docs.built.css --watch\" \"npx serve -l tcp://0.0.0.0:3000\"",
+    "test": "npx playwright test",
+    "test:ui": "npx playwright test --ui"
+  },
+  "devDependencies": {
+    "@playwright/test": "latest",
+    "@tailwindcss/cli": "^4.2.1",
+    "concurrently": "latest"
+  }
+}

package/src/css/ciderui.cdn.css

@@ -0,0 +1,11 @@
+/*
+ * ciderui — CDN variant (includes Tailwind CSS)
+ *
+ * Usage:
+ *   <link rel="stylesheet" href="path/to/ciderui.cdn.css" />
+ *
+ * This file includes Tailwind CSS + ciderui in one bundle.
+ * source(none) ensures Tailwind only generates classes used in ciderui.css.
+ */
+@import "tailwindcss" source(none);
+@import "./ciderui.css";

package/src/css/ciderui.css

@@ -0,0 +1,324 @@
+/*
+ * ciderui — Apple-aesthetic UI components as a Tailwind CSS plugin
+ * https://github.com/newlix/ciderui
+ *
+ * Usage:
+ *   @import "tailwindcss";
+ *   @import "ciderui";
+ */
+
+/* ─── Dark mode variant ─── */
+@custom-variant dark (&:is(.dark *));
+
+/* ─── CSS Variables ─── */
+:root {
+  --primary: oklch(0.563 0.193 256.16);        /* Apple Blue #0071E3 rgb(0,113,227) */
+  --primary-hover: oklch(0.522 0.177 255.84);   /* #0066CC rgb(0,102,204) */
+  --primary-active: oklch(0.480 0.165 256.16);  /* darker press state */
+  --primary-foreground: #fff;
+
+  --background: #fff;
+  --foreground: oklch(0.232 0.004 285.99);      /* #1D1D1F Apple body text */
+
+  --card: #fff;
+  --card-foreground: oklch(0.232 0.004 285.99);
+
+  --secondary: oklch(0.971 0.003 285.66);       /* #F5F5F7 Apple secondary bg */
+  --secondary-hover: oklch(0.930 0.005 286.02);
+  --secondary-foreground: oklch(0.232 0.004 285.99);
+
+  --muted: oklch(0.971 0.003 285.66);
+  --muted-foreground: oklch(0.540 0.008 286.01); /* #6E6E73 Apple muted text */
+
+  --accent: oklch(0.971 0.003 285.66);
+  --accent-foreground: oklch(0.232 0.004 285.99);
+
+  --border: oklch(0.862 0.007 286.02 / 0.6);   /* #D1D1D6 Apple border */
+  --border-solid: oklch(0.862 0.007 286.02 / 0.8);
+  --input: oklch(0.862 0.007 286.02 / 0.8);
+
+  --ring: oklch(0.563 0.193 256.16 / 0.1);
+
+  --destructive: oklch(0.577 0.245 27.33);      /* red-500 */
+  --destructive-hover: oklch(0.535 0.241 27.33); /* red-600 */
+  --destructive-active: oklch(0.494 0.226 27.33);/* red-700 */
+  --destructive-foreground: #fff;
+
+  --success: oklch(0.596 0.172 145.18);          /* green-500 */
+  --success-bg: oklch(0.962 0.044 156.74);       /* green-50 */
+  --success-text: oklch(0.408 0.132 145.18);     /* green-700 */
+  --success-border: oklch(0.905 0.093 156.74 / 0.6); /* green-200/60 */
+
+  --warning: oklch(0.666 0.179 58.32);           /* amber-600 */
+  --warning-bg: oklch(0.987 0.046 85.80);        /* amber-50 */
+  --warning-text: oklch(0.461 0.147 58.32);      /* amber-700 */
+  --warning-border: oklch(0.924 0.112 85.80 / 0.6); /* amber-200/60 */
+
+  --info: oklch(0.563 0.193 256.16);             /* same as primary */
+  --info-bg: oklch(0.563 0.193 256.16 / 0.05);
+  --info-text: oklch(0.563 0.193 256.16);
+  --info-border: oklch(0.563 0.193 256.16 / 0.2);
+
+  --input-border: oklch(0.800 0.007 286.02);       /* Apple input border */
+  --input-border-hover: oklch(0.580 0.010 286.01); /* Darker on hover */
+
+  --apple-press-scale: 0.98;
+  --apple-spring: cubic-bezier(0.2, 0.8, 0.2, 1);
+  --apple-ease: cubic-bezier(0.25, 0.1, 0.25, 1);
+
+  /* Surface overlays — auto-switch in dark mode */
+  --surface-1: oklch(0 0 0 / 0.02);    /* table header, zebra stripe */
+  --surface-2: oklch(0 0 0 / 0.03);    /* hover backgrounds */
+  --surface-3: oklch(0 0 0 / 0.04);    /* icon bg, kbd bg, toggle group */
+  --surface-4: oklch(0 0 0 / 0.06);    /* active state, segmented control bg */
+  --surface-5: oklch(0 0 0 / 0.1);     /* slider track */
+  --surface-6: oklch(0 0 0 / 0.12);    /* scrollbar */
+  --surface-7: oklch(0 0 0 / 0.2);     /* scrollbar hover, handle */
+  --panel-border: oklch(0 0 0 / 0.06); /* section dividers in panels */
+  --panel-ring: 0 0 0 1px oklch(0 0 0 / 0.04); /* card/table shadow outline */
+  --float-ring: 0 0 0 1px oklch(0 0 0 / 0.06); /* dropdown/popover/toast outline */
+  --glass-blur: blur(20px) saturate(1.5);
+  --glass-bg: oklch(from var(--card) l c h / 0.85);
+  --glass-bg-opaque: oklch(from var(--card) l c h / 0.9);
+  --backdrop-bg: oklch(0 0 0 / 0.35);
+
+  --radius: 0.75rem;                             /* 12px */
+  --radius-sm: 0.5rem;                           /* 8px */
+  --radius-lg: 1rem;                             /* 16px */
+  --radius-xl: 1.375rem;                         /* 22px */
+
+  --shadow-sm: 0 1px 2px oklch(0 0 0 / 0.04), 0 1px 3px oklch(0 0 0 / 0.03);
+  --shadow: 0 2px 8px oklch(0 0 0 / 0.06), 0 1px 2px oklch(0 0 0 / 0.04);
+  --shadow-md: 0 4px 16px oklch(0 0 0 / 0.08), 0 2px 4px oklch(0 0 0 / 0.04);
+  --shadow-lg: 0 8px 32px oklch(0 0 0 / 0.1), 0 2px 8px oklch(0 0 0 / 0.05);
+  --shadow-xl: 0 16px 48px oklch(0 0 0 / 0.12), 0 4px 16px oklch(0 0 0 / 0.06);
+}
+
+.dark {
+  --primary: oklch(0.669 0.181 251.85);          /* #2997FF Apple blue on dark bg */
+  --primary-hover: oklch(0.620 0.185 253.00);
+  --primary-active: oklch(0.570 0.188 254.00);
+
+  --background: oklch(0.000 0 0);                /* #000 Apple dark bg */
+  --foreground: oklch(0.971 0.003 285.66);       /* #F5F5F7 Apple dark text */
+
+  --card: oklch(0.160 0.004 285.99);             /* #1C1C1E Apple dark card */
+  --card-foreground: oklch(0.971 0.003 285.66);
+
+  --secondary: oklch(0.232 0.004 285.99);        /* #2C2C2E Apple dark secondary */
+  --secondary-hover: oklch(0.320 0.004 285.99);
+  --secondary-foreground: oklch(0.971 0.003 285.66);
+
+  --muted: oklch(0.232 0.004 285.99);
+  --muted-foreground: oklch(0.630 0.006 286.01); /* #98989D Apple dark muted */
+
+  --accent: oklch(0.232 0.004 285.99);
+  --accent-foreground: oklch(0.971 0.003 285.66);
+
+  --border: oklch(0.290 0.004 285.99);           /* #3A3A3C Apple dark border */
+  --border-solid: oklch(0.350 0.004 285.99);     /* #48484A */
+  --input: oklch(0.350 0.004 285.99);
+
+  --input-border: oklch(0.350 0.004 285.99);       /* #48484A */
+  --input-border-hover: oklch(0.420 0.004 285.99); /* Lighter on hover */
+
+  --ring: oklch(0.669 0.181 251.85 / 0.2);
+
+  --info: oklch(0.669 0.181 251.85);
+  --info-bg: oklch(0.669 0.181 251.85 / 0.05);
+  --info-text: oklch(0.669 0.181 251.85);
+  --info-border: oklch(0.669 0.181 251.85 / 0.2);
+
+  --success-bg: oklch(0.596 0.172 145.18 / 0.05);
+  --success-text: oklch(0.792 0.155 145.18);    /* green-400 */
+  --success-border: oklch(0.596 0.172 145.18 / 0.2);
+
+  --warning-bg: oklch(0.666 0.179 58.32 / 0.05);
+  --warning-text: oklch(0.828 0.143 58.32);     /* amber-400 */
+  --warning-border: oklch(0.666 0.179 58.32 / 0.2);
+
+  --shadow-sm: 0 1px 3px oklch(1 0 0 / 0.08), 0 1px 2px oklch(1 0 0 / 0.04);
+  --shadow: 0 2px 8px oklch(0 0 0 / 0.2), 0 1px 3px oklch(0 0 0 / 0.15);
+  --shadow-md: 0 4px 16px oklch(0 0 0 / 0.25), 0 2px 4px oklch(0 0 0 / 0.15);
+  --shadow-lg: 0 8px 32px oklch(0 0 0 / 0.3), 0 2px 8px oklch(0 0 0 / 0.2);
+  --shadow-xl: 0 16px 48px oklch(0 0 0 / 0.35), 0 4px 16px oklch(0 0 0 / 0.2);
+
+  --surface-1: oklch(1 0 0 / 0.03);
+  --surface-2: oklch(1 0 0 / 0.05);
+  --surface-3: oklch(1 0 0 / 0.06);
+  --surface-4: oklch(1 0 0 / 0.08);
+  --surface-5: oklch(1 0 0 / 0.12);
+  --surface-6: oklch(1 0 0 / 0.12);
+  --surface-7: oklch(1 0 0 / 0.2);
+  --panel-border: oklch(1 0 0 / 0.08);
+  --panel-ring: 0 0 0 1px oklch(1 0 0 / 0.06);
+  --float-ring: 0 0 0 1px oklch(1 0 0 / 0.08);
+  --glass-bg: oklch(from var(--card) l c h / 0.8);
+  --glass-bg-opaque: oklch(from var(--card) l c h / 0.85);
+}
+
+/* ─── Theme tokens (make vars available to Tailwind) ─── */
+@theme {
+  --color-primary: var(--primary);
+  --color-primary-hover: var(--primary-hover);
+  --color-primary-active: var(--primary-active);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-hover: var(--secondary-hover);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-destructive: var(--destructive);
+  --color-destructive-hover: var(--destructive-hover);
+  --color-destructive-active: var(--destructive-active);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-success: var(--success);
+  --color-success-bg: var(--success-bg);
+  --color-success-text: var(--success-text);
+  --color-success-border: var(--success-border);
+  --color-warning: var(--warning);
+  --color-warning-bg: var(--warning-bg);
+  --color-warning-text: var(--warning-text);
+  --color-warning-border: var(--warning-border);
+  --color-info: var(--info);
+  --color-info-bg: var(--info-bg);
+  --color-info-text: var(--info-text);
+  --color-info-border: var(--info-border);
+  --radius: var(--radius);
+  --radius-sm: var(--radius-sm);
+  --radius-lg: var(--radius-lg);
+  --radius-xl: var(--radius-xl);
+  --shadow-sm: var(--shadow-sm);
+  --shadow: var(--shadow);
+  --shadow-md: var(--shadow-md);
+  --shadow-lg: var(--shadow-lg);
+  --shadow-xl: var(--shadow-xl);
+}
+
+/* ─── Base ─── */
+@layer base {
+  body {
+    @apply bg-background text-foreground antialiased;
+    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", system-ui, sans-serif;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    letter-spacing: -0.01em;
+  }
+
+  *,
+  *::before,
+  *::after {
+    @apply border-border;
+  }
+
+  @keyframes slideUp {
+    from { opacity: 0; transform: translateY(8px); }
+    to   { opacity: 1; transform: translateY(0); }
+  }
+
+  @keyframes slideDown {
+    from { opacity: 1; transform: translateY(0); }
+    to   { opacity: 0; transform: translateY(8px); }
+  }
+
+  @keyframes dialogShow {
+    from { opacity: 0; transform: scale(0.95); }
+    to   { opacity: 1; transform: scale(1); }
+  }
+
+  @keyframes indeterminate {
+    0%   { transform: translateX(-100%); }
+    100% { transform: translateX(400%); }
+  }
+
+  @keyframes sheetSlideInRight {
+    from { transform: translateX(100%); }
+    to   { transform: translateX(0); }
+  }
+
+  @keyframes sheetSlideInLeft {
+    from { transform: translateX(-100%); }
+    to   { transform: translateX(0); }
+  }
+
+  @keyframes sheetSlideInBottom {
+    from { transform: translateY(100%); }
+    to   { transform: translateY(0); }
+  }
+
+  @keyframes sheetSlideInTop {
+    from { transform: translateY(-100%); }
+    to   { transform: translateY(0); }
+  }
+
+  /* Reduced motion — disable animations/transitions for users who prefer it */
+  @media (prefers-reduced-motion: reduce) {
+    *, *::before, *::after {
+      animation-duration: 0.01ms !important;
+      animation-iteration-count: 1 !important;
+      transition-duration: 0.01ms !important;
+      scroll-behavior: auto !important;
+    }
+  }
+}
+
+/* ─── Components ─── */
+@layer components {
+  @import "./components/button.css";
+  @import "./components/badge.css";
+  @import "./components/card.css";
+  @import "./components/alert.css";
+  @import "./components/form-controls.css";
+  @import "./components/checkbox.css";
+  @import "./components/radio.css";
+  @import "./components/switch.css";
+  @import "./components/label.css";
+  @import "./components/field.css";
+  @import "./components/dialog.css";
+  @import "./components/dropdown-menu.css";
+  @import "./components/tabs.css";
+  @import "./components/table.css";
+  @import "./components/accordion.css";
+  @import "./components/avatar.css";
+  @import "./components/breadcrumb.css";
+  @import "./components/button-group.css";
+  @import "./components/kbd.css";
+  @import "./components/pagination.css";
+  @import "./components/progress.css";
+  @import "./components/skeleton.css";
+  @import "./components/slider.css";
+  @import "./components/spinner.css";
+  @import "./components/toast.css";
+  @import "./components/tooltip.css";
+  @import "./components/separator.css";
+  @import "./components/input-group.css";
+  @import "./components/item.css";
+  @import "./components/form.css";
+  @import "./components/sidebar.css";
+  @import "./components/theme-switcher.css";
+  @import "./components/command.css";
+  @import "./components/combobox.css";
+  @import "./components/empty.css";
+  @import "./components/collapsible.css";
+  @import "./components/file-tree.css";
+  @import "./components/sheet.css";
+  @import "./components/popover.css";
+  @import "./components/toggle.css";
+  @import "./components/aspect-ratio.css";
+  @import "./components/typography.css";
+  @import "./components/scroll-area.css";
+  @import "./components/hover-card.css";
+  @import "./components/drawer.css";
+  @import "./components/input-otp.css";
+  @import "./components/context-menu.css";
+  @import "./components/carousel.css";
+}

package/src/css/components/accordion.css

@@ -0,0 +1,31 @@
+/* ========== ACCORDION ========== */
+.accordion {
+  @apply rounded-2xl bg-card;
+  box-shadow: var(--shadow-sm), var(--panel-ring);
+  & details + details {
+    border-top: 1px solid var(--panel-border);
+  }
+  & summary {
+    @apply flex cursor-pointer items-center justify-between px-5 py-4 text-[13px] font-medium text-foreground;
+    transition: background-color 0.15s var(--apple-ease);
+    &:hover { background: var(--surface-1); }
+    &:focus-visible { outline: 3px solid oklch(from var(--primary) l c h / 0.3); outline-offset: -3px; }
+    &::-webkit-details-marker { display: none; }
+    & svg:last-child {
+      @apply size-4 shrink-0 text-muted-foreground;
+      transition: transform 0.25s var(--apple-spring);
+    }
+  }
+  & details:first-child > summary {
+    @apply rounded-t-2xl;
+  }
+  & details:last-child:not([open]) > summary {
+    @apply rounded-b-2xl;
+  }
+  & details[open] > summary svg:last-child {
+    transform: rotate(180deg);
+  }
+  & details > div, & details > p {
+    @apply px-5 pb-4 text-[13px] text-muted-foreground;
+  }
+}

package/src/css/components/alert.css

@@ -0,0 +1,18 @@
+/* ========== ALERT ========== */
+.alert,
+.alert-info,
+.alert-success,
+.alert-warning,
+.alert-destructive {
+  @apply flex gap-3 rounded-xl p-4;
+  background: var(--card);
+  box-shadow: var(--shadow-sm), var(--panel-ring);
+  & svg:first-child { @apply mt-0.5 size-5 shrink-0; color: var(--muted-foreground); }
+  & p:first-child, & p:first-of-type { @apply text-[13px] font-medium text-foreground; }
+  & p:last-child:not(:first-child) { @apply mt-0.5 text-[13px] text-muted-foreground; }
+}
+/* Only the icon carries semantic color */
+.alert-info    { & svg:first-child { color: var(--primary); } }
+.alert-success { & svg:first-child { color: var(--success); } }
+.alert-warning { & svg:first-child { color: var(--warning); } }
+.alert-destructive { & svg:first-child { color: var(--destructive); } }

package/src/css/components/aspect-ratio.css

@@ -0,0 +1,7 @@
+/* ========== ASPECT RATIO ========== */
+.aspect-ratio {
+  @apply relative overflow-hidden rounded-xl;
+  & > img, & > video {
+    @apply absolute inset-0 h-full w-full object-cover;
+  }
+}

package/src/css/components/avatar.css

@@ -0,0 +1,17 @@
+/* ========== AVATAR ========== */
+.avatar {
+  @apply inline-flex size-10 items-center justify-center rounded-full text-[13px] font-semibold;
+  /* Default fallback styling */
+  @apply bg-secondary text-muted-foreground;
+  & img {
+    @apply size-full rounded-full object-cover;
+  }
+}
+.avatar-sm { @apply size-8 text-xs; }
+.avatar-lg { @apply size-14 text-[17px]; }
+.avatar-group {
+  @apply flex -space-x-2;
+  & .avatar {
+    @apply ring-2 ring-background;
+  }
+}

package/src/css/components/badge.css

@@ -0,0 +1,20 @@
+/* ========== BADGE ========== */
+.badge,
+.badge-primary,
+.badge-secondary,
+.badge-success,
+.badge-warning,
+.badge-destructive,
+.badge-outline {
+  @apply inline-flex items-center gap-1 rounded-full px-2 py-[2px] text-[11px] font-medium bg-secondary text-secondary-foreground;
+  letter-spacing: 0;
+}
+/* Only text carries semantic color */
+.badge-primary    { @apply text-primary; }
+.badge-success    { color: var(--success); }
+.badge-warning    { color: var(--warning); }
+.badge-destructive { @apply text-destructive; }
+.badge-outline {
+  @apply bg-transparent;
+  box-shadow: inset 0 0 0 1px var(--border-solid);
+}

package/src/css/components/breadcrumb.css

@@ -0,0 +1,16 @@
+/* ========== BREADCRUMB ========== */
+.breadcrumb {
+  @apply flex items-center gap-1.5 text-[13px];
+  & a {
+    @apply text-muted-foreground transition-colors;
+    &:hover { @apply text-foreground; }
+    &:focus-visible { outline: 3px solid oklch(from var(--primary) l c h / 0.3); outline-offset: 2px; border-radius: 4px; }
+  }
+  & svg { @apply size-3.5 text-muted-foreground; opacity: 0.6; }
+  & span:last-child, & [aria-current] {
+    @apply font-medium text-foreground;
+  }
+  & .breadcrumb-separator {
+    @apply text-muted-foreground; opacity: 0.6;
+  }
+}

package/src/css/components/button-group.css

@@ -0,0 +1,20 @@
+/* ========== BUTTON GROUP ========== */
+.button-group {
+  @apply inline-flex rounded-[12px] bg-card;
+  box-shadow: 0 0 0 1px var(--panel-border), var(--shadow-sm);
+  & button, & a {
+    @apply inline-flex items-center justify-center bg-transparent px-4 py-2.5 text-[13px] font-medium text-foreground;
+    transition: all 0.15s var(--apple-ease);
+    &:hover { background: var(--surface-2); }
+    &:focus-visible { outline: 3px solid oklch(from var(--primary) l c h / 0.3); outline-offset: -3px; }
+    &:first-child { @apply rounded-l-[12px]; }
+    &:last-child { @apply rounded-r-[12px]; }
+    &:not(:first-child) {
+      border-left: 1px solid var(--panel-border);
+    }
+    &[data-active] {
+      @apply bg-primary text-primary-foreground;
+      &:hover { @apply bg-primary-hover; }
+    }
+  }
+}