@muten/shadcn 0.0.5 → 0.1.0

package/themes/bloom.css

@@ -0,0 +1,53 @@
+/* @muten/shadcn/themes/bloom.css — "Bloom": soft, friendly, rounded. A rounded display (Quicksand) + Inter, gentle
+   pastel tints (lavender paper, violet accent), large radius, airy soft shadows. Import AFTER globals.css.
+   @import "@muten/shadcn/globals.css";  @import "@muten/shadcn/themes/bloom.css"; */
+
+@import url("https://fonts.googleapis.com/css2?family=Quicksand:wght@500;600;700&family=Inter:wght@400;500;600&display=swap");
+@theme {
+  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
+  --font-serif: "Quicksand", ui-rounded, ui-sans-serif, system-ui, sans-serif; /* `font-serif` on headings → rounded display */
+}
+
+:root {
+  --radius: 1rem;                               /* pillowy */
+  --background: oklch(0.99 0.008 310);
+  --foreground: oklch(0.30 0.04 300);
+  --card: oklch(1 0.004 310);
+  --card-foreground: oklch(0.30 0.04 300);
+  --popover: oklch(1 0.004 310);
+  --popover-foreground: oklch(0.30 0.04 300);
+  --primary: oklch(0.62 0.19 300);             /* soft violet */
+  --primary-foreground: oklch(0.99 0.008 310);
+  --secondary: oklch(0.95 0.03 310);
+  --secondary-foreground: oklch(0.40 0.06 300);
+  --muted: oklch(0.955 0.022 315);
+  --muted-foreground: oklch(0.55 0.05 300);
+  --accent: oklch(0.93 0.04 340);              /* rose tint */
+  --accent-foreground: oklch(0.40 0.08 340);
+  --destructive: oklch(0.60 0.20 20);
+  --border: oklch(0.91 0.025 315);
+  --input: oklch(0.91 0.025 315);
+  --ring: oklch(0.62 0.19 300);
+}
+/* bridge both selectors: muten sets `data-theme="dark"`, shadcn keys off the `.dark` class (globals.css does the same). */
+.dark, [data-theme="dark"] {
+  --background: oklch(0.21 0.03 300);
+  --foreground: oklch(0.95 0.02 315);
+  --card: oklch(0.25 0.035 300);
+  --card-foreground: oklch(0.95 0.02 315);
+  --popover: oklch(0.25 0.035 300);
+  --popover-foreground: oklch(0.95 0.02 315);
+  --primary: oklch(0.72 0.17 300);
+  --primary-foreground: oklch(0.20 0.03 300);
+  --secondary: oklch(0.30 0.035 300);
+  --secondary-foreground: oklch(0.95 0.02 315);
+  --muted: oklch(0.30 0.035 300);
+  --muted-foreground: oklch(0.75 0.03 310);
+  --accent: oklch(0.34 0.05 340);
+  --accent-foreground: oklch(0.95 0.02 315);
+  --destructive: oklch(0.68 0.18 20);
+  --border: oklch(0.33 0.035 300);
+  --input: oklch(0.35 0.035 300);
+  --ring: oklch(0.72 0.17 300);
+}
+@theme { --shadow-soft: 0 2px 8px oklch(0.5 0.1 300 / 0.06), 0 16px 40px -16px oklch(0.5 0.15 300 / 0.20); }

package/themes/editorial.css

@@ -0,0 +1,65 @@
+/* @muten/shadcn/themes/editorial.css — "Editorial": a warm, quiet, luxury look. A display serif (Fraunces) + a
+   clean sans (Inter), sand/stone neutrals with a terracotta accent, generous radius, soft warm shadows.
+   Import AFTER globals.css:  @import "@muten/shadcn/globals.css";  @import "@muten/shadcn/themes/editorial.css";
+   Works in light (default) and dark. `font-serif` now renders Fraunces, so headings feel editorial for free. */
+
+@import url("https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=Inter:wght@400;500;600&display=swap");
+
+/* Tailwind picks these up: `font-sans` → Inter, `font-serif` → Fraunces (use it on headings). */
+@theme {
+  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
+  --font-serif: "Fraunces", ui-serif, Georgia, "Times New Roman", serif;
+}
+
+/* LIGHT — warm sand paper, deep-ink text, terracotta as the single accent (primary = buttons + `text-primary`). */
+:root {
+  --radius: 0.625rem;
+  --background: oklch(0.985 0.007 83);
+  --foreground: oklch(0.24 0.017 55);
+  --card: oklch(0.997 0.004 83);
+  --card-foreground: oklch(0.24 0.017 55);
+  --popover: oklch(0.997 0.004 83);
+  --popover-foreground: oklch(0.24 0.017 55);
+  --primary: oklch(0.62 0.115 46);              /* terracotta */
+  --primary-foreground: oklch(0.99 0.006 83);
+  --secondary: oklch(0.955 0.011 80);
+  --secondary-foreground: oklch(0.30 0.02 50);
+  --muted: oklch(0.955 0.011 80);
+  --muted-foreground: oklch(0.52 0.018 60);
+  --accent: oklch(0.94 0.016 74);               /* subtle warm hover bg (stays neutral, per shadcn) */
+  --accent-foreground: oklch(0.30 0.02 50);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.905 0.012 76);
+  --input: oklch(0.905 0.012 76);
+  --ring: oklch(0.62 0.115 46);
+}
+
+/* DARK — warm near-black, cream text, terracotta glows. */
+/* bridge both selectors: muten sets `data-theme="dark"`, shadcn keys off the `.dark` class (globals.css does the same). */
+.dark, [data-theme="dark"] {
+  --background: oklch(0.195 0.012 58);
+  --foreground: oklch(0.955 0.008 83);
+  --card: oklch(0.235 0.014 58);
+  --card-foreground: oklch(0.955 0.008 83);
+  --popover: oklch(0.235 0.014 58);
+  --popover-foreground: oklch(0.955 0.008 83);
+  --primary: oklch(0.70 0.128 47);              /* terracotta, brighter for dark */
+  --primary-foreground: oklch(0.20 0.012 58);
+  --secondary: oklch(0.28 0.014 58);
+  --secondary-foreground: oklch(0.955 0.008 83);
+  --muted: oklch(0.28 0.014 58);
+  --muted-foreground: oklch(0.72 0.013 72);
+  --accent: oklch(0.30 0.015 58);
+  --accent-foreground: oklch(0.955 0.008 83);
+  --destructive: oklch(0.65 0.19 25);
+  --border: oklch(0.31 0.014 58);
+  --input: oklch(0.33 0.014 58);
+  --ring: oklch(0.70 0.128 47);
+}
+
+/* Editorial polish that the token vars alone can't express. */
+body { font-feature-settings: "liga" 1, "calt" 1; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
+/* Fraunces headings: a touch of optical weight + tight tracking reads as "designed", not default-serif. */
+h1, h2, h3, .font-serif { letter-spacing: -0.01em; }
+/* soft, warm-tinted elevation (shadcn ships flat) — reach for it on cards/hero via `shadow-soft`. */
+@theme { --shadow-soft: 0 1px 2px oklch(0.4 0.03 60 / 0.04), 0 8px 24px -12px oklch(0.4 0.05 60 / 0.14); }

package/themes/noir.css

@@ -0,0 +1,54 @@
+/* @muten/shadcn/themes/noir.css — "Noir": crisp, high-contrast, mono-minimal. A grotesk display (Space Grotesk) +
+   Inter, near-monochrome cool neutrals, sharp corners, one stark ink accent. Import AFTER globals.css.
+   @import "@muten/shadcn/globals.css";  @import "@muten/shadcn/themes/noir.css"; */
+
+@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@400;500;600&display=swap");
+@theme {
+  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
+  --font-serif: "Space Grotesk", ui-sans-serif, system-ui, sans-serif; /* `font-serif` on headings → grotesk display */
+}
+
+:root {
+  --radius: 0.25rem;                            /* sharp */
+  --background: oklch(0.995 0 0);
+  --foreground: oklch(0.16 0.004 260);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.16 0.004 260);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.16 0.004 260);
+  --primary: oklch(0.16 0.004 260);            /* ink */
+  --primary-foreground: oklch(0.99 0 0);
+  --secondary: oklch(0.965 0.002 260);
+  --secondary-foreground: oklch(0.16 0.004 260);
+  --muted: oklch(0.965 0.002 260);
+  --muted-foreground: oklch(0.48 0.006 260);
+  --accent: oklch(0.95 0.003 260);
+  --accent-foreground: oklch(0.16 0.004 260);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.90 0.004 260);
+  --input: oklch(0.90 0.004 260);
+  --ring: oklch(0.16 0.004 260);
+}
+/* bridge both selectors: muten sets `data-theme="dark"`, shadcn keys off the `.dark` class (globals.css does the same). */
+.dark, [data-theme="dark"] {
+  --background: oklch(0.145 0.004 260);
+  --foreground: oklch(0.98 0 0);
+  --card: oklch(0.185 0.005 260);
+  --card-foreground: oklch(0.98 0 0);
+  --popover: oklch(0.185 0.005 260);
+  --popover-foreground: oklch(0.98 0 0);
+  --primary: oklch(0.98 0 0);                  /* stark white on black */
+  --primary-foreground: oklch(0.16 0.004 260);
+  --secondary: oklch(0.24 0.006 260);
+  --secondary-foreground: oklch(0.98 0 0);
+  --muted: oklch(0.24 0.006 260);
+  --muted-foreground: oklch(0.68 0.006 260);
+  --accent: oklch(0.26 0.006 260);
+  --accent-foreground: oklch(0.98 0 0);
+  --destructive: oklch(0.65 0.19 25);
+  --border: oklch(0.27 0.006 260);
+  --input: oklch(0.30 0.006 260);
+  --ring: oklch(0.98 0 0);
+}
+.font-serif, h1, h2, h3 { letter-spacing: -0.02em; }
+@theme { --shadow-soft: 0 1px 2px oklch(0 0 0 / 0.05), 0 12px 28px -14px oklch(0 0 0 / 0.18); }

package/registry/chart.js

@@ -1,34 +0,0 @@
-// Chart host component (muten Custom). inputs: { data } (a list of { label, value }). Renders an SVG bar chart.
-// Edit this file for line/area/pie variants; this default is a clean bar chart driven by the page's data.
-export function mount(el, inputs, handlers) {
-  const NS = 'http://www.w3.org/2000/svg';
-  const render = (data) => {
-    el.innerHTML = '';
-    const items = Array.isArray(data) ? data : [];
-    const W = 480, H = 200, pad = 24, gap = 10;
-    const max = Math.max(1, ...items.map((d) => Number(d.value) || 0));
-    const bw = items.length ? (W - pad * 2 - gap * (items.length - 1)) / items.length : 0;
-    const svg = document.createElementNS(NS, 'svg');
-    svg.setAttribute('viewBox', '0 0 ' + W + ' ' + H);
-    svg.setAttribute('class', 'chart-svg');
-    items.forEach((d, i) => {
-      const v = Number(d.value) || 0;
-      const bh = (v / max) * (H - pad * 2);
-      const x = pad + i * (bw + gap);
-      const y = H - pad - bh;
-      const rect = document.createElementNS(NS, 'rect');
-      rect.setAttribute('x', x); rect.setAttribute('y', y);
-      rect.setAttribute('width', bw); rect.setAttribute('height', bh);
-      rect.setAttribute('rx', 4); rect.setAttribute('class', 'chart-bar');
-      svg.appendChild(rect);
-      const t = document.createElementNS(NS, 'text');
-      t.setAttribute('x', x + bw / 2); t.setAttribute('y', H - pad + 14);
-      t.setAttribute('text-anchor', 'middle'); t.setAttribute('class', 'chart-label');
-      t.textContent = d.label == null ? '' : String(d.label);
-      svg.appendChild(t);
-    });
-    el.appendChild(svg);
-  };
-  render(inputs.data);
-  return (n) => render(n.data);
-}

package/registry/chart.muten

@@ -1,7 +0,0 @@
-# Chart - an SVG bar chart over a list of { label, value }. The PAGE owns the data:
-#   entity Metric { label text  value number }   state { data = query data : list<Metric> }   mock { data: [ … ] }
-#   Chart(data: data)
-# shadcn-for-muten · Custom · host JS is src/components/Chart.js (edit it for line/area/pie variants).
-part Chart(data: list) {
-  Custom Chart inputs(data: $data) class("chart")
-}

package/registry/checkbox.muten

@@ -1,8 +0,0 @@
-# Checkbox - the PAGE owns the bool + the action that flips it (container/presentational):
-#   state { agree = false : bool }   action toggle mutates agree { agree.toggle() }   Checkbox(checked: agree, onToggle: toggle)
-# shadcn-for-muten · part · no deps · the check always renders and scales/fades in via .checkbox-icon-on.
-part Checkbox(checked: bool, onToggle: action) {
-  Button -> $onToggle aria(checked: $checked) class("checkbox", "checkbox-checked" when $checked) {
-    Icon "lucide:check" class("checkbox-icon", "checkbox-icon-on" when $checked)
-  }
-}

package/registry/context-menu.js

@@ -1,34 +0,0 @@
-// Context Menu host component (muten Custom). inputs: { label, items }. handlers: { select(label) }.
-// Right-clicking the area opens a menu of items at the cursor; choosing one emits its label.
-export function mount(el, inputs, handlers) {
-  const area = document.createElement('div'); area.className = 'context-area';
-  area.textContent = inputs.label == null ? 'Right-click here' : String(inputs.label);
-  el.appendChild(area);
-  const menu = document.createElement('div'); menu.className = 'context-menu';
-  el.appendChild(menu);
-
-  let open = false;
-  const hide = () => { menu.classList.remove('context-menu-open'); open = false; };
-  const build = (items) => {
-    menu.innerHTML = '';
-    (Array.isArray(items) ? items : []).forEach((it) => {
-      const label = (it && typeof it === 'object') ? (it.label == null ? '' : String(it.label)) : String(it);
-      const b = document.createElement('button'); b.type = 'button'; b.className = 'context-item'; b.textContent = label;
-      b.addEventListener('click', () => { hide(); if (handlers.select) handlers.select(label); });
-      menu.appendChild(b);
-    });
-  };
-
-  area.addEventListener('contextmenu', (e) => {
-    e.preventDefault();
-    const r = el.getBoundingClientRect();
-    menu.style.left = (e.clientX - r.left) + 'px';
-    menu.style.top = (e.clientY - r.top) + 'px';
-    menu.classList.add('context-menu-open');
-    open = true;
-  });
-  document.addEventListener('click', () => { if (open) hide(); });
-
-  build(inputs.items);
-  return (n) => { area.textContent = n.label == null ? 'Right-click here' : String(n.label); build(n.items); };
-}

package/registry/select.muten

@@ -1,21 +0,0 @@
-# Select - a dropdown that shows the chosen value. The PAGE owns the value (text) + the open bool + actions:
-#   state { fruit = "Apple" : text  open = false : bool }   action setFruit(v: text) mutates fruit { fruit.set(v) … }
-#   Select(value: fruit, open: open, onToggle: t) { SelectItem(value: "Apple", current: fruit, label: "Apple", onSelect: setFruit) … }
-# Each SelectItem's action should set the value AND close. The backdrop catches outside clicks.
-# shadcn-for-muten · part · no deps · styles via the semantic .select* classes in globals.css.
-part Select(value: text, open: bool, onToggle: action) {
-  Stack class("select-wrap") {
-    Button -> $onToggle aria(expanded: $open) class("select-trigger") {
-      Span "{$value}"
-      Icon "lucide:chevrons-up-down" class("size-4 opacity-50")
-    }
-    when $open { Button -> $onToggle class("select-backdrop") }
-    Stack class("select-content", "select-content-open" when $open) { slot }
-  }
-}
-part SelectItem(value: text, current: text, label: text, onSelect: action) {
-  Button -> $onSelect($value) class("select-item") {
-    Span "{$label}"
-    when $value == $current { Icon "lucide:check" class("size-4") }
-  }
-}