@jcsoftdev/ui 0.0.0-stage → 0.1.0

package/dist/brand/logo-forge.js

@@ -0,0 +1,441 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useId, useMemo, useState } from "react";
+import { Button } from "../atoms/button/button.js";
+import { Input } from "../forms/input/input.js";
+import { cn } from "../utils/cn.js";
+import { copyText, downloadBlob, fileSlug, svgBlob, svgToPngBlob } from "./export.js";
+import {
+  generateMark,
+  generateVariations,
+  MARK_SHAPES,
+  serializeMark
+} from "./generate.js";
+import { GLYPHS } from "./glyphs.js";
+import { LogoMark } from "./logo-mark.js";
+import { BRAND_PALETTES } from "./palettes.js";
+const DEFAULT_FORGE_VALUE = {
+  name: "Barber\xEDa Don Lucho",
+  tagline: "Corte y navaja desde 1998",
+  shape: "shield",
+  monogram: "glyph",
+  glyph: "scissors",
+  initialsCount: 2,
+  layout: "horizontal",
+  fill: "solid",
+  paletteId: "navaja",
+  custom: { primary: "#2f6f5e", secondary: "#e3b04b", ink: "#10211c" },
+  ring: false,
+  seed: 0,
+  weight: 700,
+  tracking: 0.06,
+  uppercase: true,
+  background: "none"
+};
+const SHAPE_LABELS = {
+  circle: "C\xEDrculo",
+  squircle: "Squircle",
+  shield: "Escudo",
+  hexagon: "Hex\xE1gono",
+  badge: "Insignia",
+  ribbon: "Cinta",
+  none: "Sin forma"
+};
+const LAYOUT_LABELS = {
+  icon: "Solo \xEDcono",
+  horizontal: "Horizontal",
+  stacked: "Vertical"
+};
+const FILL_LABELS = {
+  solid: "S\xF3lido",
+  gradient: "Degradado",
+  outline: "Contorno"
+};
+const BACKGROUND_LABELS = {
+  none: "Transparente",
+  light: "Claro",
+  dark: "Oscuro"
+};
+const WEIGHTS = [
+  { value: 400, label: "Normal" },
+  { value: 600, label: "Medio" },
+  { value: 700, label: "Negrita" },
+  { value: 800, label: "Extra" }
+];
+function paletteOf(value) {
+  return value.paletteId === "custom" ? { id: "custom", label: "Personalizada", ...value.custom } : value.paletteId;
+}
+function forgeOptions(value) {
+  return {
+    name: value.name,
+    tagline: value.tagline,
+    shape: value.shape,
+    monogram: value.monogram,
+    glyph: value.glyph,
+    initialsCount: value.initialsCount,
+    layout: value.layout,
+    fill: value.fill,
+    palette: paletteOf(value),
+    seed: value.seed,
+    ring: value.ring,
+    wordmark: { weight: value.weight, tracking: value.tracking, uppercase: value.uppercase },
+    background: value.background === "light" ? "#ffffff" : value.background === "dark" ? "#16161b" : void 0,
+    wordmarkColor: value.background === "dark" ? "#f4f4f6" : void 0
+  };
+}
+function Field({
+  label,
+  group,
+  children
+}) {
+  if (group) {
+    return /* @__PURE__ */ jsxs("fieldset", { className: "m-0 flex min-w-0 flex-col gap-1.5 border-0 p-0", children: [
+      /* @__PURE__ */ jsx("legend", { className: "mb-1.5 p-0 font-semibold text-ink-2 text-meta", children: label }),
+      children
+    ] });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-col gap-1.5", children: [
+    /* @__PURE__ */ jsx("span", { className: "font-semibold text-ink-2 text-meta", children: label }),
+    children
+  ] });
+}
+const choiceBase = "inline-flex h-control-sm cursor-pointer items-center justify-center gap-1.5 whitespace-nowrap rounded-chip px-3 font-semibold text-[12.5px] pressable focus-visible:focus-ring";
+function choiceClass(on) {
+  return cn(
+    choiceBase,
+    on ? "bg-accent text-on-accent" : "bg-surface-control text-ink-2 shadow-control hover:text-ink"
+  );
+}
+function Choice({ label, value, options, onChange }) {
+  return /* @__PURE__ */ jsx(Field, { group: true, label, children: /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-1.5", children: options.map((option) => /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      "aria-pressed": option.value === value,
+      className: choiceClass(option.value === value),
+      onClick: () => onChange(option.value),
+      children: option.label
+    },
+    option.value
+  )) }) });
+}
+function LogoForge({ defaultValue, onChange, className }) {
+  const id = useId();
+  const [value, setValue] = useState({ ...DEFAULT_FORGE_VALUE, ...defaultValue });
+  const [page, setPage] = useState(0);
+  const [status, setStatus] = useState("");
+  const options = useMemo(() => forgeOptions(value), [value]);
+  const mark = useMemo(() => generateMark(options), [options]);
+  const svg = useMemo(() => serializeMark(mark), [mark]);
+  const variations = useMemo(() => generateVariations(options, 12, page), [options, page]);
+  const update = (patch) => {
+    const next = { ...value, ...patch };
+    setValue(next);
+    onChange?.(forgeOptions(next));
+  };
+  const pickVariation = (variant) => {
+    update({
+      shape: variant.shape ?? value.shape,
+      monogram: variant.monogram ?? value.monogram,
+      glyph: variant.glyph ?? value.glyph,
+      paletteId: typeof variant.palette === "string" ? variant.palette : value.paletteId,
+      fill: variant.fill ?? value.fill,
+      seed: variant.seed ?? 0,
+      ring: void 0
+    });
+  };
+  const filename = fileSlug(value.name);
+  const run = async (task) => {
+    try {
+      setStatus(await task());
+    } catch {
+      setStatus("No se pudo completar la acci\xF3n");
+    }
+  };
+  const customPalette = value.paletteId === "custom";
+  return /* @__PURE__ */ jsxs(
+    "section",
+    {
+      "aria-label": "Generador de logotipos",
+      className: cn("@container/forge flex w-full min-w-0 flex-col gap-density-lg", className),
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "grid min-w-0 gap-density-lg @3xl/forge:grid-cols-[minmax(0,5fr)_minmax(0,6fr)]", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-col gap-density rounded-card border-card bg-surface-card p-card shadow-card", children: [
+            /* @__PURE__ */ jsxs("div", { className: "grid gap-density @md/forge:grid-cols-2", children: [
+              /* @__PURE__ */ jsx(Field, { label: "Nombre", children: /* @__PURE__ */ jsx(
+                Input,
+                {
+                  id: `${id}-name`,
+                  "aria-label": "Nombre",
+                  value: value.name,
+                  maxLength: 60,
+                  onChange: (e) => update({ name: e.target.value })
+                }
+              ) }),
+              /* @__PURE__ */ jsx(Field, { label: "Eslogan", children: /* @__PURE__ */ jsx(
+                Input,
+                {
+                  id: `${id}-tagline`,
+                  "aria-label": "Eslogan",
+                  value: value.tagline,
+                  maxLength: 80,
+                  onChange: (e) => update({ tagline: e.target.value })
+                }
+              ) })
+            ] }),
+            /* @__PURE__ */ jsx(
+              Choice,
+              {
+                label: "Forma",
+                value: value.shape,
+                options: MARK_SHAPES.map((s) => ({ value: s, label: SHAPE_LABELS[s] })),
+                onChange: (shape) => update({ shape, seed: value.seed })
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Choice,
+              {
+                label: "Monograma",
+                value: value.monogram,
+                options: [
+                  { value: "initials", label: "Iniciales" },
+                  { value: "glyph", label: "S\xEDmbolo" }
+                ],
+                onChange: (monogram) => update({ monogram })
+              }
+            ),
+            value.monogram === "initials" ? /* @__PURE__ */ jsx(
+              Choice,
+              {
+                label: "Letras",
+                value: value.initialsCount,
+                options: [1, 2, 3].map((n) => ({ value: n, label: String(n) })),
+                onChange: (initialsCount) => update({ initialsCount })
+              }
+            ) : /* @__PURE__ */ jsx(Field, { group: true, label: "S\xEDmbolo", children: /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-1.5", children: GLYPHS.map((g) => /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                "aria-pressed": g.id === value.glyph,
+                "aria-label": g.label,
+                title: g.label,
+                className: cn(choiceClass(g.id === value.glyph), "w-10 px-0"),
+                onClick: () => update({ glyph: g.id }),
+                children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", width: 18, height: 18, "aria-hidden": "true", children: g.parts.map(
+                  (part) => part.kind === "fill" ? /* @__PURE__ */ jsx("path", { d: part.d, fill: "currentColor" }, part.d) : /* @__PURE__ */ jsx(
+                    "path",
+                    {
+                      d: part.d,
+                      fill: "none",
+                      stroke: "currentColor",
+                      strokeWidth: 2,
+                      strokeLinecap: "round",
+                      strokeLinejoin: "round"
+                    },
+                    part.d
+                  )
+                ) })
+              },
+              g.id
+            )) }) }),
+            /* @__PURE__ */ jsx(
+              Choice,
+              {
+                label: "Composici\xF3n",
+                value: value.layout,
+                options: Object.keys(LAYOUT_LABELS).map((l) => ({
+                  value: l,
+                  label: LAYOUT_LABELS[l]
+                })),
+                onChange: (layout) => update({ layout })
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Choice,
+              {
+                label: "Relleno",
+                value: value.fill,
+                options: Object.keys(FILL_LABELS).map((f) => ({
+                  value: f,
+                  label: FILL_LABELS[f]
+                })),
+                onChange: (fill) => update({ fill })
+              }
+            ),
+            /* @__PURE__ */ jsx(Field, { group: true, label: "Paleta", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap gap-1.5", children: [
+              BRAND_PALETTES.map((p) => /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  "aria-pressed": p.id === value.paletteId,
+                  "aria-label": p.label,
+                  title: p.label,
+                  onClick: () => update({ paletteId: p.id }),
+                  className: cn(
+                    "size-7 cursor-pointer rounded-full pressable focus-visible:focus-ring",
+                    p.id === value.paletteId ? "shadow-selected" : "shadow-control"
+                  ),
+                  style: {
+                    background: `linear-gradient(135deg, ${p.primary} 50%, ${p.secondary} 50%)`
+                  }
+                },
+                p.id
+              )),
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  "aria-pressed": customPalette,
+                  className: choiceClass(customPalette),
+                  onClick: () => update({ paletteId: "custom" }),
+                  children: "Personalizada"
+                }
+              )
+            ] }) }),
+            customPalette ? /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-density", children: ["primary", "secondary", "ink"].map((key) => /* @__PURE__ */ jsxs("label", { className: "flex items-center gap-2 text-ink-2 text-meta", children: [
+              /* @__PURE__ */ jsx(
+                "input",
+                {
+                  type: "color",
+                  value: value.custom[key],
+                  "aria-label": {
+                    primary: "Color principal",
+                    secondary: "Color secundario",
+                    ink: "Color de texto"
+                  }[key],
+                  onChange: (e) => update({ custom: { ...value.custom, [key]: e.target.value } }),
+                  className: "size-7 cursor-pointer rounded-badge border-control bg-transparent p-0"
+                }
+              ),
+              { primary: "Principal", secondary: "Secundario", ink: "Texto" }[key]
+            ] }, key)) }) : null,
+            /* @__PURE__ */ jsx(
+              Choice,
+              {
+                label: "Peso del nombre",
+                value: value.weight,
+                options: WEIGHTS,
+                onChange: (weight) => update({ weight })
+              }
+            ),
+            /* @__PURE__ */ jsxs("div", { className: "grid gap-density @md/forge:grid-cols-2", children: [
+              /* @__PURE__ */ jsx(Field, { label: `Espaciado (${value.tracking.toFixed(2)} em)`, children: /* @__PURE__ */ jsx(
+                "input",
+                {
+                  type: "range",
+                  min: 0,
+                  max: 0.3,
+                  step: 0.01,
+                  value: value.tracking,
+                  "aria-label": "Espaciado entre letras",
+                  onChange: (e) => update({ tracking: Number(e.target.value) }),
+                  className: "h-control-sm w-full accent-(--accent-ink)"
+                }
+              ) }),
+              /* @__PURE__ */ jsx(Field, { label: "Opciones", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap gap-1.5", children: [
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    "aria-pressed": value.uppercase,
+                    className: choiceClass(value.uppercase),
+                    onClick: () => update({ uppercase: !value.uppercase }),
+                    children: "May\xFAsculas"
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    "aria-pressed": value.ring === true,
+                    className: choiceClass(value.ring === true),
+                    onClick: () => update({ ring: value.ring !== true }),
+                    children: "Anillo"
+                  }
+                )
+              ] }) })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-col gap-density", children: [
+            /* @__PURE__ */ jsx("div", { className: "flex min-h-56 min-w-0 items-center justify-center rounded-card border-card bg-surface-sunken p-card shadow-card", children: /* @__PURE__ */ jsx(LogoMark, { ...options, size: "min(100%, 420px)" }) }),
+            /* @__PURE__ */ jsx(
+              Choice,
+              {
+                label: "Fondo de la vista previa",
+                value: value.background,
+                options: Object.keys(BACKGROUND_LABELS).map((b) => ({
+                  value: b,
+                  label: BACKGROUND_LABELS[b]
+                })),
+                onChange: (background) => update({ background })
+              }
+            ),
+            /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [
+              /* @__PURE__ */ jsx(
+                Button,
+                {
+                  variant: "primary",
+                  onClick: () => run(() => {
+                    downloadBlob(svgBlob(svg), `${filename}.svg`);
+                    return `${filename}.svg descargado`;
+                  }),
+                  children: "Descargar SVG"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Button,
+                {
+                  onClick: () => run(async () => {
+                    downloadBlob(
+                      await svgToPngBlob(svg, mark.width, mark.height, 4),
+                      `${filename}.png`
+                    );
+                    return `${filename}.png descargado`;
+                  }),
+                  children: "Descargar PNG"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Button,
+                {
+                  variant: "ghost",
+                  onClick: () => run(async () => {
+                    await copyText(svg);
+                    return "SVG copiado al portapapeles";
+                  }),
+                  children: "Copiar SVG"
+                }
+              ),
+              /* @__PURE__ */ jsx("span", { role: "status", "aria-live": "polite", className: "text-ink-3 text-meta", children: status })
+            ] })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-col gap-density rounded-card border-card bg-surface-card p-card shadow-card", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center justify-between gap-2", children: [
+            /* @__PURE__ */ jsx("h3", { className: "font-semibold text-card-title text-ink", children: "Variaciones" }),
+            /* @__PURE__ */ jsx(Button, { size: "sm", onClick: () => setPage((p) => p + 1), children: "Mezclar" })
+          ] }),
+          /* @__PURE__ */ jsx("ul", { className: "grid min-w-0 grid-cols-2 gap-density @md/forge:grid-cols-3 @2xl/forge:grid-cols-4 @4xl/forge:grid-cols-6", children: variations.map((variant) => /* @__PURE__ */ jsx("li", { className: "min-w-0", children: /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              "aria-label": `Usar variaci\xF3n ${variant.seed}`,
+              "aria-pressed": variant.seed === value.seed,
+              onClick: () => pickVariation(variant),
+              className: cn(
+                "flex aspect-square w-full min-w-0 cursor-pointer items-center justify-center overflow-hidden rounded-card bg-surface-sunken p-3 pressable focus-visible:focus-ring",
+                variant.seed === value.seed ? "shadow-selected" : "shadow-control"
+              ),
+              children: /* @__PURE__ */ jsx(LogoMark, { ...variant, layout: "icon", size: "82%" })
+            }
+          ) }, variant.seed)) })
+        ] })
+      ]
+    }
+  );
+}
+export {
+  DEFAULT_FORGE_VALUE,
+  LogoForge,
+  forgeOptions
+};

package/dist/brand/logo-mark.d.ts

@@ -0,0 +1,8 @@
+import { type MarkOptions } from "./generate.js";
+export interface LogoMarkProps extends MarkOptions {
+    /** CSS width of the mark; the height follows the aspect ratio. Defaults to the full container. */
+    size?: number | string;
+    className?: string;
+}
+/** Renders a generated brand mark as an inline `<svg role="img">`. */
+export declare function LogoMark({ size, className, ...options }: LogoMarkProps): import("react").JSX.Element;

package/dist/brand/logo-mark.js

@@ -0,0 +1,34 @@
+import { jsx } from "react/jsx-runtime";
+import { createElement } from "react";
+import { cn } from "../utils/cn.js";
+import { generateMark } from "./generate.js";
+const camel = (name) => name.replace(/-([a-z])/g, (_, c) => c.toUpperCase());
+function renderNode(node, key) {
+  const props = { key };
+  for (const [name, value] of Object.entries(node.attrs)) {
+    if (value !== void 0) props[camel(name)] = value;
+  }
+  const children = [
+    ...(node.children ?? []).map(renderNode),
+    ...node.text === void 0 ? [] : [node.text]
+  ];
+  return createElement(node.tag, props, ...children);
+}
+function LogoMark({ size = "100%", className, ...options }) {
+  const mark = generateMark(options);
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: mark.viewBox,
+      role: "img",
+      "aria-label": mark.label,
+      className: cn("block h-auto max-w-full", className),
+      style: { width: size },
+      children: mark.nodes.map(renderNode)
+    }
+  );
+}
+export {
+  LogoMark
+};

package/dist/brand/palettes.d.ts

@@ -0,0 +1,23 @@
+export interface BrandPalette {
+    id: string;
+    label: string;
+    /** Main fill of the shape. */
+    primary: string;
+    /** Second stop of gradients and decorations. */
+    secondary: string;
+    /** Wordmark color on a light background and glyph color over pale fills. */
+    ink: string;
+}
+/**
+ * The first seven mirror the library accent palettes (fill, second tone and deep ink);
+ * the rest are classic barbershop colorways. Marks keep their own colors, they never
+ * follow the surrounding `data-accent`.
+ */
+export declare const BRAND_PALETTES: readonly BrandPalette[];
+export declare function findPalette(id: string): BrandPalette;
+/** Accepts hex, rgb()/hsl() and plain color names only; anything else falls back. */
+export declare function safeColor(value: string | undefined, fallback: string): string;
+/** WCAG relative luminance of a hex color; other formats read as mid-dark. */
+export declare function luminance(color: string): number;
+/** The palette ink over pale fills, white over dark ones. */
+export declare function contentColor(fills: string[], ink: string): string;

package/dist/brand/palettes.js

@@ -0,0 +1,47 @@
+const BRAND_PALETTES = [
+  { id: "coral", label: "Coral", primary: "#faa2a2", secondary: "#fec79e", ink: "#3f191a" },
+  { id: "durazno", label: "Durazno", primary: "#efae75", secondary: "#e1d695", ink: "#3b1f02" },
+  { id: "menta", label: "Menta", primary: "#77d3ad", secondary: "#8ee5ed", ink: "#002f1f" },
+  { id: "cielo", label: "Cielo", primary: "#76c9f8", secondary: "#c6d2ff", ink: "#002a3e" },
+  { id: "lavanda", label: "Lavanda", primary: "#bab3fe", secondary: "#f2c1f3", ink: "#252142" },
+  { id: "orquidea", label: "Orqu\xEDdea", primary: "#eaa3d5", secondary: "#fec2c5", ink: "#391a31" },
+  { id: "grafito", label: "Grafito", primary: "#26262b", secondary: "#5a5a66", ink: "#1a1a1e" },
+  { id: "navaja", label: "Navaja", primary: "#1f2f57", secondary: "#c8372d", ink: "#14203d" },
+  { id: "bronce", label: "Bronce", primary: "#8a5a2b", secondary: "#d9a441", ink: "#2c1b0a" },
+  { id: "esmeralda", label: "Esmeralda", primary: "#14614a", secondary: "#9bd17f", ink: "#0a2e23" },
+  { id: "vino", label: "Vino", primary: "#6e1f3a", secondary: "#e08a6a", ink: "#2f0d19" }
+];
+function findPalette(id) {
+  return BRAND_PALETTES.find((p) => p.id === id) ?? BRAND_PALETTES[0];
+}
+const COLOR = /^(#[0-9a-f]{3,8}|(rgb|hsl)a?\([0-9a-z.,%\s/-]{1,48}\)|[a-z]{3,20})$/i;
+function safeColor(value, fallback) {
+  const trimmed = (value ?? "").trim();
+  return COLOR.test(trimmed) ? trimmed : fallback;
+}
+function channels(color) {
+  const hex = /^#([0-9a-f]{6}|[0-9a-f]{3})/i.exec(color)?.[1];
+  if (!hex) return null;
+  const full = hex.length === 3 ? [...hex].map((c) => c + c).join("") : hex;
+  return [0, 2, 4].map((i) => Number.parseInt(full.slice(i, i + 2), 16));
+}
+function luminance(color) {
+  const rgb = channels(color);
+  if (!rgb) return 0.2;
+  const [r, g, b] = rgb.map((v) => {
+    const s = v / 255;
+    return s <= 0.03928 ? s / 12.92 : ((s + 0.055) / 1.055) ** 2.4;
+  });
+  return 0.2126 * r + 0.7152 * g + 0.0722 * b;
+}
+function contentColor(fills, ink) {
+  const avg = fills.reduce((sum, c) => sum + luminance(c), 0) / fills.length;
+  return avg > 0.38 ? ink : "#ffffff";
+}
+export {
+  BRAND_PALETTES,
+  contentColor,
+  findPalette,
+  luminance,
+  safeColor
+};

package/dist/brand/rng.d.ts

@@ -0,0 +1,5 @@
+/** FNV-1a over UTF-16 code units; stable across runtimes. */
+export declare function hashString(input: string): number;
+/** Small deterministic PRNG (mulberry32): the same seed always yields the same sequence. */
+export declare function createRng(seed: number): () => number;
+export declare function pick<T>(rng: () => number, items: readonly T[]): T;

package/dist/brand/rng.js

@@ -0,0 +1,26 @@
+function hashString(input) {
+  let h = 2166136261;
+  for (let i = 0; i < input.length; i += 1) {
+    h ^= input.charCodeAt(i);
+    h = Math.imul(h, 16777619);
+  }
+  return h >>> 0;
+}
+function createRng(seed) {
+  let a = seed >>> 0;
+  return () => {
+    a = a + 1831565813 >>> 0;
+    let t = a;
+    t = Math.imul(t ^ t >>> 15, t | 1);
+    t ^= t + Math.imul(t ^ t >>> 7, t | 61);
+    return ((t ^ t >>> 14) >>> 0) / 4294967296;
+  };
+}
+function pick(rng, items) {
+  return items[Math.floor(rng() * items.length)];
+}
+export {
+  createRng,
+  hashString,
+  pick
+};

package/dist/calendar/day-chip/day-chip.d.ts

@@ -0,0 +1,8 @@
+import type { CalendarMarker } from "../internal/types.js";
+export interface DayChipProps {
+    marker: CalendarMarker;
+    onOpen?: (id: string) => void;
+    className?: string;
+}
+/** Compact single-line chip for a day marker. */
+export declare function DayChip({ marker, onOpen, className }: DayChipProps): import("react").JSX.Element;

package/dist/calendar/day-chip/day-chip.js

@@ -0,0 +1,34 @@
+import { jsxs } from "react/jsx-runtime";
+import { cn } from "../../utils/cn.js";
+const TONE = {
+  danger: "bg-danger text-on-accent",
+  accent: "bg-accent-soft text-accent-ink shadow-inset-accent"
+};
+function DayChip({ marker, onOpen, className }) {
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      onClick: onOpen ? () => onOpen(marker.id) : void 0,
+      className: cn(
+        "block w-full truncate rounded-xs px-1.5 py-0.5 text-left text-chip-text",
+        TONE[marker.tone ?? "accent"],
+        className
+      ),
+      children: [
+        marker.srLabel ? /* @__PURE__ */ jsxs("span", { className: "sr-only", children: [
+          marker.srLabel,
+          " "
+        ] }) : null,
+        marker.title,
+        marker.subtitle ? /* @__PURE__ */ jsxs("span", { className: "font-normal opacity-80", children: [
+          " \xB7 ",
+          marker.subtitle
+        ] }) : null
+      ]
+    }
+  );
+}
+export {
+  DayChip
+};

package/dist/calendar/day-chip/index.d.ts

@@ -0,0 +1,2 @@
+export type { CalendarMarker } from "../internal/types.js";
+export { DayChip, type DayChipProps } from "./day-chip.js";

package/dist/calendar/day-chip/index.js

@@ -0,0 +1,4 @@
+import { DayChip } from "./day-chip.js";
+export {
+  DayChip
+};

package/dist/calendar/event-block/event-block.d.ts

@@ -0,0 +1,9 @@
+import type { CalendarEvent } from "../internal/types.js";
+export interface EventBlockProps {
+    event: CalendarEvent;
+    /** "detailed": time range, title and subtitle. "compact": one "time title" line. */
+    variant?: "detailed" | "compact";
+    onOpen?: (id: string) => void;
+    className?: string;
+}
+export declare function EventBlock({ event, variant, onOpen, className }: EventBlockProps): import("react").JSX.Element;