@caqophony/ui 0.3.0 → 0.4.0

package/dist/material.js

@@ -0,0 +1,711 @@
+'use client';
+import {
+  IntentBadge
+} from "./chunk-Y6LCXEXZ.js";
+import {
+  Icon,
+  ScrollHintXMark
+} from "./chunk-BAW3RIMF.js";
+import {
+  cn
+} from "./chunk-DP5WQAPO.js";
+
+// src/material/tones.ts
+var FILL = {
+  "night-0": "fill-night-0",
+  "night-1": "fill-night-1",
+  "night-2": "fill-night-2",
+  "sky-0": "fill-sky-0",
+  "sky-1": "fill-sky-1",
+  "sky-2": "fill-sky-2",
+  "sky-3": "fill-sky-3",
+  "sky-4": "fill-sky-4",
+  glow: "fill-glow",
+  "glow-soft": "fill-glow-soft",
+  "glow-pale": "fill-glow-pale",
+  canvas: "fill-canvas",
+  "mist-1": "fill-mist-1",
+  "mist-2": "fill-mist-2",
+  "mist-3": "fill-mist-3",
+  paper: "fill-paper",
+  ink: "fill-ink",
+  page: "fill-background"
+};
+var STROKE = {
+  "night-0": "stroke-night-0",
+  "night-1": "stroke-night-1",
+  "night-2": "stroke-night-2",
+  "sky-0": "stroke-sky-0",
+  "sky-1": "stroke-sky-1",
+  "sky-2": "stroke-sky-2",
+  "sky-3": "stroke-sky-3",
+  "sky-4": "stroke-sky-4",
+  glow: "stroke-glow",
+  "glow-soft": "stroke-glow-soft",
+  "glow-pale": "stroke-glow-pale",
+  canvas: "stroke-canvas",
+  "mist-1": "stroke-mist-1",
+  "mist-2": "stroke-mist-2",
+  "mist-3": "stroke-mist-3",
+  paper: "stroke-paper",
+  ink: "stroke-ink",
+  page: "stroke-background"
+};
+var BG = {
+  "night-0": "bg-night-0",
+  "night-1": "bg-night-1",
+  "night-2": "bg-night-2",
+  "sky-0": "bg-sky-0",
+  "sky-1": "bg-sky-1",
+  "sky-2": "bg-sky-2",
+  "sky-3": "bg-sky-3",
+  "sky-4": "bg-sky-4",
+  glow: "bg-glow",
+  "glow-soft": "bg-glow-soft",
+  "glow-pale": "bg-glow-pale",
+  canvas: "bg-canvas",
+  "mist-1": "bg-mist-1",
+  "mist-2": "bg-mist-2",
+  "mist-3": "bg-mist-3",
+  paper: "bg-paper",
+  ink: "bg-ink",
+  page: "bg-background"
+};
+
+// src/material/sky.tsx
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function finite(piece, facts) {
+  for (const [name, value] of Object.entries(facts))
+    if (!Number.isFinite(value))
+      throw new Error(
+        `${piece}: \`${name}\` must be a finite number (got ${value})`
+      );
+}
+function aboveZero(piece, facts) {
+  for (const [name, value] of Object.entries(facts))
+    if (!Number.isFinite(value) || value <= 0)
+      throw new Error(
+        `${piece}: \`${name}\` must be a finite number above 0 (got ${value})`
+      );
+}
+function wholeWithin(piece, name, value, [low, high]) {
+  if (!Number.isInteger(value) || value < low || value > high)
+    throw new Error(
+      `${piece}: \`${name}\` must be a whole number from ${low} to ${high} (got ${value})`
+    );
+}
+var MIN_BUMP_RADIUS = 0.1;
+var MAX_BUMPS = 2e3;
+var MAX_SWELLS = 512;
+var MAX_STARS = 5e3;
+var ANCHOR = {
+  top: "xMidYMin slice",
+  center: "xMidYMid slice",
+  bottom: "xMidYMax slice",
+  right: "xMaxYMid slice"
+};
+function SkyField({
+  width,
+  height,
+  anchor,
+  only,
+  ground,
+  children
+}) {
+  aboveZero("SkyField", { width, height });
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      viewBox: `0 0 ${width} ${height}`,
+      preserveAspectRatio: ANCHOR[anchor],
+      "aria-hidden": "true",
+      className: cn(
+        "absolute inset-0 size-full",
+        only === "phone" && "md:hidden",
+        only === "desktop" && "hidden md:block"
+      ),
+      children: [
+        /* @__PURE__ */ jsx("rect", { width, height, className: FILL[ground] }),
+        children
+      ]
+    }
+  );
+}
+function Halo({ cx, cy, rings }) {
+  finite("Halo", { cx, cy });
+  rings.forEach((ring, i) => aboveZero("Halo", { [`rings[${i}].r`]: ring.r }));
+  return /* @__PURE__ */ jsx(Fragment, { children: rings.map((ring, i) => /* @__PURE__ */ jsx(
+    "circle",
+    {
+      cx,
+      cy,
+      r: ring.r,
+      className: FILL[ring.tone]
+    },
+    i
+  )) });
+}
+var RNG_MODULUS = 2147483647;
+function rng(seed) {
+  let s = (Math.trunc(seed) % (RNG_MODULUS - 1) + RNG_MODULUS - 1) % (RNG_MODULUS - 1);
+  s += 1;
+  return () => {
+    s = s * 16807 % RNG_MODULUS;
+    return (s - 1) / (RNG_MODULUS - 1);
+  };
+}
+function CloudBank({
+  width,
+  height,
+  y,
+  min,
+  max,
+  climb = 0,
+  level = false,
+  seed,
+  tone
+}) {
+  aboveZero("CloudBank", { width, height });
+  finite("CloudBank", { y, min, max, climb, seed });
+  if (min <= 0 || max < min)
+    throw new Error(
+      `CloudBank: the bump radius range must have min > 0 and max >= min (got min ${min}, max ${max}); a zero radius never reaches the field's edge`
+    );
+  if (min < MIN_BUMP_RADIUS)
+    throw new Error(
+      `CloudBank: \`min\` must be at least ${MIN_BUMP_RADIUS} (got ${min}); a smaller radius rounds to nothing in the path`
+    );
+  const bumps = Math.ceil((width + 2 * max) / (2 * min));
+  if (bumps > MAX_BUMPS)
+    throw new Error(
+      `CloudBank: ${width} wide at min ${min} and max ${max} can take ${bumps} bumps; a bank draws at most ${MAX_BUMPS} bumps`
+    );
+  const next = rng(seed);
+  let x = -max;
+  let drift = 0;
+  let d = `M${x} ${height}L${x} ${y}`;
+  while (x < width + max) {
+    const r = min + next() * (max - min);
+    const step = (next() - 0.5) * r * 0.5 - climb * r * 2 / width;
+    const lift = level ? step - drift : step;
+    drift += lift;
+    d += `a${r.toFixed(1)} ${r.toFixed(1)} 0 0 1 ${(r * 2).toFixed(1)} ${lift.toFixed(1)}`;
+    x += r * 2;
+  }
+  return /* @__PURE__ */ jsx("path", { d: `${d}L${x} ${height}Z`, className: FILL[tone] });
+}
+function Ridge({
+  width,
+  height,
+  y,
+  rise,
+  swells,
+  seed,
+  tone
+}) {
+  aboveZero("Ridge", { width, height });
+  finite("Ridge", { y, rise, seed });
+  wholeWithin("Ridge", "swells", swells, [1, MAX_SWELLS]);
+  const next = rng(seed);
+  const step = width / swells;
+  let d = `M0 ${height}L0 ${y}`;
+  for (let i = 0; i < swells; i++) {
+    const cy = y - next() * rise;
+    d += `Q${(i + 0.5) * step} ${cy.toFixed(1)} ${(i + 1) * step} ${(y - next() * rise * 0.3).toFixed(1)}`;
+  }
+  return /* @__PURE__ */ jsx("path", { d: `${d}L${width} ${height}Z`, className: FILL[tone] });
+}
+function Stars({ width, height, count, seed, tone }) {
+  aboveZero("Stars", { width, height });
+  finite("Stars", { seed });
+  wholeWithin("Stars", "count", count, [0, MAX_STARS]);
+  const next = rng(seed);
+  return /* @__PURE__ */ jsx("g", { className: FILL[tone], children: Array.from({ length: count }, (_, i) => /* @__PURE__ */ jsx(
+    "circle",
+    {
+      cx: (next() * width).toFixed(1),
+      cy: (next() * height).toFixed(1),
+      r: (0.8 + next() * 1.4).toFixed(2)
+    },
+    i
+  )) });
+}
+function RouteLine({
+  points,
+  tone,
+  markTone,
+  labelSize
+}) {
+  aboveZero("RouteLine", { labelSize });
+  points.forEach(
+    (p, i) => finite("RouteLine", { [`points[${i}].x`]: p.x, [`points[${i}].y`]: p.y })
+  );
+  const at = (i) => points[Math.max(0, Math.min(points.length - 1, i))];
+  let d = `M${points[0].x} ${points[0].y}`;
+  for (let i = 0; i < points.length - 1; i++) {
+    const [p0, p1, p2, p3] = [at(i - 1), at(i), at(i + 1), at(i + 2)];
+    d += `C${(p1.x + (p2.x - p0.x) / 6).toFixed(1)} ${(p1.y + (p2.y - p0.y) / 6).toFixed(1)} ${(p2.x - (p3.x - p1.x) / 6).toFixed(1)} ${(p2.y - (p3.y - p1.y) / 6).toFixed(1)} ${p2.x} ${p2.y}`;
+  }
+  const gap = labelSize * 1.1;
+  return /* @__PURE__ */ jsxs("g", { children: [
+    /* @__PURE__ */ jsx(
+      "path",
+      {
+        d,
+        fill: "none",
+        strokeWidth: labelSize * 0.16,
+        strokeDasharray: `${labelSize * 0.1} ${labelSize * 0.55}`,
+        strokeLinecap: "round",
+        className: STROKE[tone]
+      }
+    ),
+    points.map((p, i) => {
+      const side = p.side ?? "above";
+      const lx = side === "left" ? p.x - gap : side === "right" ? p.x + gap : p.x;
+      const ly = side === "above" ? p.y - gap : side === "below" ? p.y + gap * 1.5 : p.y + labelSize * 0.35;
+      const anchor = side === "left" ? "end" : side === "right" ? "start" : "middle";
+      return /* @__PURE__ */ jsxs("g", { children: [
+        p.state === "here" && /* @__PURE__ */ jsx(
+          "circle",
+          {
+            cx: p.x,
+            cy: p.y,
+            r: labelSize * 0.85,
+            className: cn(FILL[markTone], "opacity-30")
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "circle",
+          {
+            cx: p.x,
+            cy: p.y,
+            r: labelSize * 0.34,
+            strokeWidth: labelSize * 0.14,
+            className: cn(
+              STROKE[tone],
+              p.state === "ahead" ? FILL[markTone] : FILL[tone]
+            )
+          }
+        ),
+        p.label && /* @__PURE__ */ jsx(
+          "text",
+          {
+            x: lx,
+            y: ly,
+            textAnchor: anchor,
+            fontSize: labelSize,
+            fontWeight: 600,
+            className: FILL[tone],
+            children: p.label
+          }
+        )
+      ] }, i);
+    })
+  ] });
+}
+
+// src/material/band.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var PAD = {
+  none: "",
+  tight: "pb-16 md:pb-24",
+  section: "py-20 md:py-28",
+  open: "py-24 md:py-40"
+};
+var EDGE_FIELD = { width: 3840, height: 240, seam: 120 };
+function BandEdge({ via, tone, seed }) {
+  const { width, height, seam } = EDGE_FIELD;
+  const overlap = 8;
+  return /* @__PURE__ */ jsxs2(
+    "svg",
+    {
+      "aria-hidden": "true",
+      viewBox: `0 0 ${width} ${height}`,
+      preserveAspectRatio: "xMidYMid slice",
+      className: "pointer-events-none absolute inset-x-0 -top-16 h-32 w-full md:-top-[120px] md:h-[240px]",
+      children: [
+        via && /* @__PURE__ */ jsx2(
+          CloudBank,
+          {
+            width,
+            height: seam,
+            y: 82,
+            min: 24,
+            max: 56,
+            level: true,
+            seed: seed + 3,
+            tone: via
+          }
+        ),
+        /* @__PURE__ */ jsx2(
+          CloudBank,
+          {
+            width,
+            height: seam + overlap,
+            y: 100,
+            min: 22,
+            max: 58,
+            level: true,
+            seed,
+            tone
+          }
+        ),
+        /* @__PURE__ */ jsx2("g", { transform: `matrix(1 0 0 -1 0 ${height})`, children: /* @__PURE__ */ jsx2(
+          CloudBank,
+          {
+            width,
+            height: seam + overlap,
+            y: 72,
+            min: 22,
+            max: 58,
+            level: true,
+            seed: seed + 7,
+            tone
+          }
+        ) })
+      ]
+    }
+  );
+}
+function Band({
+  tone,
+  surface = "day",
+  pad = "section",
+  under = "none",
+  edge,
+  backdrop,
+  raised,
+  id,
+  children
+}) {
+  return /* @__PURE__ */ jsxs2(
+    "section",
+    {
+      id,
+      "data-surface": surface,
+      className: cn(
+        "relative isolate scroll-mt-4",
+        BG[tone],
+        PAD[pad],
+        under === "overhang" && "pt-44 md:pt-[23rem]",
+        edge && "pt-28 md:pt-48",
+        raised && "z-10"
+      ),
+      children: [
+        backdrop && /* @__PURE__ */ jsx2(
+          "div",
+          {
+            "aria-hidden": "true",
+            className: "absolute inset-0 -z-10 overflow-hidden",
+            children: backdrop
+          }
+        ),
+        edge && /* @__PURE__ */ jsx2(BandEdge, { ...edge, tone }),
+        children
+      ]
+    }
+  );
+}
+
+// src/material/figure.tsx
+import { jsx as jsx3 } from "react/jsx-runtime";
+var ASPECT = {
+  "16:9": "aspect-video",
+  "8:5": "aspect-[8/5]",
+  "4:3": "aspect-[4/3]",
+  "3:2": "aspect-[3/2]",
+  "1:1": "aspect-square",
+  "4:5": "aspect-[4/5]",
+  "full-bleed": "h-full"
+};
+function recordable(spec) {
+  const blank = [
+    !spec.role.trim() && "`role`",
+    !spec.prompt.trim() && "`prompt`",
+    spec.palette.length === 0 && "`palette`"
+  ].filter(Boolean);
+  if (blank.length > 0)
+    throw new Error(
+      `Figure: ${blank.join(", ")} of the spec for "${spec.role}" must not be empty; the image step reads them`
+    );
+}
+function Figure({ spec, alt, children, fit = "aspect" }) {
+  recordable(spec);
+  return /* @__PURE__ */ jsx3(
+    "figure",
+    {
+      role: alt ? "img" : void 0,
+      "aria-label": alt || void 0,
+      "aria-hidden": alt ? void 0 : "true",
+      "data-figure-role": spec.role,
+      "data-figure-aspect": spec.aspect,
+      "data-figure-palette": spec.palette.join(" "),
+      "data-figure-prompt": spec.prompt,
+      className: cn(
+        "relative m-0 overflow-hidden [&>svg]:absolute [&>svg]:inset-0 [&>svg]:size-full",
+        fit === "fill" ? "h-full w-full" : ASPECT[spec.aspect]
+      ),
+      children
+    }
+  );
+}
+
+// src/material/layout.tsx
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+var GAP = {
+  1: "gap-1",
+  2: "gap-2",
+  3: "gap-3",
+  4: "gap-4",
+  6: "gap-6",
+  8: "gap-8",
+  10: "gap-10",
+  12: "gap-12",
+  16: "gap-16"
+};
+function Stack({ gap, align = "stretch", children }) {
+  return /* @__PURE__ */ jsx4(
+    "div",
+    {
+      className: cn(
+        "flex min-w-0 flex-col",
+        GAP[gap],
+        align === "center" && "items-center",
+        align === "start" && "items-start"
+      ),
+      children
+    }
+  );
+}
+function Inline({
+  gap,
+  justify = "start",
+  align = "center",
+  fillOnPhone,
+  children
+}) {
+  return /* @__PURE__ */ jsx4(
+    "div",
+    {
+      className: cn(
+        "flex min-w-0 flex-wrap",
+        GAP[gap],
+        align === "center" ? "items-center" : "items-start",
+        justify === "between" && "justify-between",
+        justify === "center" && "justify-center",
+        fillOnPhone && "max-sm:w-full max-sm:flex-col max-sm:items-stretch max-sm:[&>*]:w-full"
+      ),
+      children
+    }
+  );
+}
+var COUNT = {
+  2: "md:grid-cols-2",
+  3: "md:grid-cols-3",
+  4: "md:grid-cols-4"
+};
+var CONNECT = "md:[&>*]:relative md:[&>*:not(:last-child,:has(+[data-scroll-hint]))]:after:absolute md:[&>*:not(:last-child,:has(+[data-scroll-hint]))]:after:left-[calc(50%+2.5rem)] md:[&>*:not(:last-child,:has(+[data-scroll-hint]))]:after:top-6 md:[&>*:not(:last-child,:has(+[data-scroll-hint]))]:after:h-0 md:[&>*:not(:last-child,:has(+[data-scroll-hint]))]:after:w-[calc(100%-3rem)] md:[&>*:not(:last-child,:has(+[data-scroll-hint]))]:after:border-t-2 md:[&>*:not(:last-child,:has(+[data-scroll-hint]))]:after:border-dashed md:[&>*:not(:last-child,:has(+[data-scroll-hint]))]:after:border-mist-3 md:[&>*:not(:last-child,:has(+[data-scroll-hint]))]:after:content-['']";
+function Columns({
+  count,
+  gap,
+  phone,
+  connect,
+  children
+}) {
+  return /* @__PURE__ */ jsxs3(
+    "div",
+    {
+      className: cn(
+        GAP[gap],
+        connect && CONNECT,
+        phone === "stack" ? cn("grid grid-cols-1", COUNT[count]) : cn(
+          "flex overflow-x-auto md:grid md:overflow-visible md:[&>[data-scroll-hint]]:hidden",
+          "[&>:not([data-scroll-hint])]:w-64 [&>:not([data-scroll-hint])]:shrink-0 md:[&>:not([data-scroll-hint])]:w-auto",
+          COUNT[count]
+        )
+      ),
+      children: [
+        children,
+        phone === "scroll" && /* @__PURE__ */ jsx4(ScrollHintXMark, {})
+      ]
+    }
+  );
+}
+function Split({ ratio, reverse, gap, children }) {
+  return /* @__PURE__ */ jsxs3(
+    "div",
+    {
+      className: cn(
+        "grid grid-cols-1 items-center",
+        GAP[gap],
+        ratio === "even" ? "md:grid-cols-2" : "md:grid-cols-[5fr_7fr]",
+        reverse && (ratio === "even" ? "md:[&>:first-child]:order-2" : "md:grid-cols-[7fr_5fr] md:[&>:first-child]:order-2")
+      ),
+      children: [
+        /* @__PURE__ */ jsx4("div", { className: "min-w-0", children: children[0] }),
+        /* @__PURE__ */ jsx4("div", { className: "min-w-0", children: children[1] })
+      ]
+    }
+  );
+}
+var SPACER = {
+  hero: "h-10 md:h-14",
+  section: "h-16 md:h-24",
+  "phone-sky": "h-40 md:hidden"
+};
+function Spacer({ size }) {
+  return /* @__PURE__ */ jsx4("div", { "aria-hidden": "true", className: SPACER[size] });
+}
+var INSET = { 3: "p-3", 4: "p-4", 6: "p-6" };
+function Inset({ pad, children }) {
+  return /* @__PURE__ */ jsx4("div", { className: INSET[pad], children });
+}
+
+// src/material/type.tsx
+import { jsx as jsx5 } from "react/jsx-runtime";
+var LEVEL = {
+  poster: "text-display-poster",
+  headline: "text-display-headline",
+  title: "text-display-title"
+};
+var MEASURE = {
+  narrow: "max-w-[14ch]",
+  wide: "max-w-[22ch]",
+  none: ""
+};
+function Display({
+  level,
+  as: Tag,
+  align = "start",
+  measure = "none",
+  children
+}) {
+  return /* @__PURE__ */ jsx5(
+    Tag,
+    {
+      className: cn(
+        "text-foreground",
+        LEVEL[level],
+        MEASURE[measure],
+        align === "center" && "mx-auto text-center"
+      ),
+      children
+    }
+  );
+}
+var SIZE = {
+  lede: "text-lede",
+  body: "text-base leading-relaxed",
+  small: "text-sm leading-snug",
+  micro: "text-xs leading-snug"
+};
+var TONE = {
+  default: "text-foreground",
+  muted: "text-muted-foreground",
+  accent: "text-primary-text"
+};
+var WEIGHT = {
+  normal: "font-normal",
+  medium: "font-medium",
+  bold: "font-semibold"
+};
+function Text({
+  size = "body",
+  tone = "default",
+  weight = "normal",
+  align = "start",
+  measure,
+  as: Tag = "p",
+  children
+}) {
+  return /* @__PURE__ */ jsx5(
+    Tag,
+    {
+      className: cn(
+        SIZE[size],
+        TONE[tone],
+        WEIGHT[weight],
+        align === "center" && "mx-auto text-center",
+        measure && "max-w-[58ch]"
+      ),
+      children
+    }
+  );
+}
+
+// src/material/vignette.tsx
+import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
+function Vignette({
+  title,
+  icon,
+  sampleLabel,
+  surface = "day",
+  placement = "inline",
+  crop = "none",
+  children
+}) {
+  return /* @__PURE__ */ jsxs4(
+    "div",
+    {
+      "data-surface": surface,
+      className: cn(
+        "relative overflow-hidden rounded-2xl border border-border bg-background shadow-[0_2px_4px_-2px_hsl(var(--night-1)),0_30px_70px_-30px_hsl(var(--night-1))]",
+        placement === "hang" && "z-10 -mb-32 md:-mb-52"
+      ),
+      children: [
+        /* @__PURE__ */ jsxs4("div", { className: "flex items-center gap-2 border-b border-border bg-card px-4 py-2.5", children: [
+          /* @__PURE__ */ jsx6("span", { className: "text-muted-foreground", children: /* @__PURE__ */ jsx6(Icon, { name: icon, size: "sm" }) }),
+          /* @__PURE__ */ jsx6("span", { className: "min-w-0 flex-1 truncate text-sm font-semibold text-foreground", children: title }),
+          /* @__PURE__ */ jsx6(IntentBadge, { intent: "neutral", children: sampleLabel })
+        ] }),
+        /* @__PURE__ */ jsx6(
+          "div",
+          {
+            className: cn(
+              "bg-muted/50 p-3 md:p-4",
+              // a mask reads alpha only, so any opaque token draws the same crop
+              crop === "bottom" && "relative max-h-[24rem] overflow-hidden [mask-image:linear-gradient(to_bottom,hsl(var(--foreground))_70%,transparent)]"
+            ),
+            children
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/material/wordmark.tsx
+import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
+function Wordmark({ name, mark, href }) {
+  return /* @__PURE__ */ jsxs5(
+    "a",
+    {
+      href,
+      className: "flex items-center gap-2 text-lg font-bold tracking-tight text-foreground [font-family:var(--font-heading,inherit)]",
+      children: [
+        /* @__PURE__ */ jsx7("span", { className: "text-primary-text size-6 shrink-0", children: mark }),
+        name
+      ]
+    }
+  );
+}
+export {
+  Band,
+  CloudBank,
+  Columns,
+  Display,
+  Figure,
+  Halo,
+  Inline,
+  Inset,
+  Ridge,
+  RouteLine,
+  SkyField,
+  Spacer,
+  Split,
+  Stack,
+  Stars,
+  Text,
+  Vignette,
+  Wordmark
+};