// AUTO-GENERATED from src/ by scripts/build.mjs — do not edit by hand.
// Components bundle for browser-global usage with Babel Standalone.
// Paperline — Component Library
// All components use the --pl-* tokens from paperline.css
// Components are intentionally headless-ish: small, composable, no deps beyond React.
const { useState, useEffect, useRef, useId, useCallback } = React;
const clamp = (n, lo, hi) => Math.max(lo, Math.min(hi, n));
/* ============================================================
Buttons
============================================================ */
const PLButton = ({
kind = "primary",
size = "md",
icon: IconComp,
iconRight,
children,
disabled,
fullWidth,
type = "button",
className = "",
"aria-label": ariaLabel,
...rest
}) => {
const sizes = {
sm: { p: "5px 10px", fs: 12, ic: 13, gap: 5, h: 28 },
md: { p: "8px 14px", fs: 12.5, ic: 14, gap: 6, h: 34 },
lg: { p: "10px 18px", fs: 13.5, ic: 15, gap: 7, h: 40 },
};
const kinds = {
primary: { bg: "var(--pl-accent-500)", color: "var(--pl-accent-ink)", border: "var(--pl-accent-600)", shadow: "var(--pl-shadow-sm)" },
secondary: { bg: "var(--pl-paper-card)", color: "var(--pl-ink-2)", border: "var(--pl-hairline-strong)", shadow: "var(--pl-shadow-xs)" },
ghost: { bg: "transparent", color: "var(--pl-ink-2)", border: "transparent", shadow: "none" },
danger: { bg: "var(--pl-paper-card)", color: "var(--pl-danger-500)",border: "var(--pl-hairline-strong)", shadow: "var(--pl-shadow-xs)" },
accentSoft:{ bg: "var(--pl-accent-50)", color: "var(--pl-accent-700)",border: "var(--pl-accent-100)", shadow: "none" },
};
const s = sizes[size]; const k = kinds[kind];
const iconOnly = !children && (IconComp || iconRight);
return (
);
};
/* ============================================================
Inputs
============================================================ */
const PLInput = ({ icon: IconComp, suffix, placeholder, value, onChange, type = "text", error, id, disabled, ...rest }) => (
);
const PLTextarea = ({ placeholder, value, onChange, rows = 3, error, id, disabled, ...rest }) => (
);
const PLSelect = ({ value, onChange, options = [], placeholder, id, disabled, error, ...rest }) => (
);
/* ============================================================
Toggle / Checkbox / Radio (real , visually hidden)
============================================================ */
const PLToggle = ({ checked, onChange, label, disabled, id, name }) => {
const auto = useId();
const inputId = id || auto;
return (
);
};
const PLCheckbox = ({ checked, onChange, label, indeterminate, disabled, id, name, value }) => {
const auto = useId();
const inputId = id || auto;
const ref = useRef(null);
useEffect(() => {
if (ref.current) ref.current.indeterminate = !!indeterminate;
}, [indeterminate]);
return (
);
};
const PLRadio = ({ checked, onChange, label, disabled, id, name, value }) => {
const auto = useId();
const inputId = id || auto;
return (
);
};
/* ============================================================
Field wrapper — label + helper + error
============================================================ */
const PLField = ({ label, helper, error, required, children, id }) => {
const auto = useId();
const inputId = id || auto;
const helperId = `${inputId}-helper`;
const errorId = `${inputId}-error`;
const child = React.Children.only(children);
const cloned = React.cloneElement(child, {
id: inputId,
"aria-describedby": [helper && helperId, error && errorId].filter(Boolean).join(" ") || undefined,
"aria-required": required || undefined,
error: error ? true : child.props.error,
});
return (
{label && (
)}
{cloned}
{helper && !error &&
{helper}
}
{error &&
{error}
}
{children}
);
const PLDivider = ({ orientation = "horizontal", label }) => {
if (orientation === "vertical") {
return (
);
}
if (label) {
return (
{label}
);
}
return
;
};
/* ============================================================
Avatar / AvatarGroup
============================================================ */
const initials = (name) => (name || "").trim().split(/\s+/).slice(0, 2).map((s) => s[0]?.toUpperCase() || "").join("");
const PLAvatar = ({ name, size = 32, src, color = "var(--pl-cat-plum)", alt }) => (
{src
? 
: {initials(name)}}
);
const PLAvatarGroup = ({ people, max = 3 }) => {
const shown = people.slice(0, max);
const extra = people.length - max;
return (
{shown.map((p, i) => (
))}
{extra > 0 && (
+{extra}
)}
{label && (
{label}
{v}%
)}
{title &&
{title}
}
{children}
);
};
const PLEmptyState = ({ icon: IconComp = I.Inbox, title, description, action }) => (
{title &&
{title}
}
{description &&
{description}
}
{action &&
{action}
}
);
/* ============================================================
Tabs (real ARIA tabs + arrow-key nav)
============================================================ */
const PLTabs = ({ items, value, onChange, label = "Tabs" }) => {
const onKey = (e, idx) => {
if (e.key !== "ArrowRight" && e.key !== "ArrowLeft" && e.key !== "Home" && e.key !== "End") return;
e.preventDefault();
let next = idx;
if (e.key === "ArrowRight") next = (idx + 1) % items.length;
else if (e.key === "ArrowLeft") next = (idx - 1 + items.length) % items.length;
else if (e.key === "Home") next = 0;
else if (e.key === "End") next = items.length - 1;
onChange(items[next].value);
e.currentTarget.parentElement.querySelectorAll("[role='tab']")[next]?.focus();
};
return (
{items.map((it, i) => {
const active = value === it.value;
return (
);
})}
);
};
/* ============================================================
Stat tile
============================================================ */
const PLStat = ({ label, value, delta, tone = "neutral" }) => {
const tones = {
neutral: "var(--pl-ink-2)",
ok: "var(--pl-ok-500)", warn: "var(--pl-warn-500)",
danger: "var(--pl-danger-500)", info: "var(--pl-info-500)",
accent: "var(--pl-accent-500)",
};
return (
{label}
{value}
{delta && (
{delta}
)}
);
};
/* ============================================================
Table
============================================================ */
const PLTable = ({ columns, rows, caption }) => (
{caption && {caption}}
{columns.map(c => (
| {c.label} |
))}
{rows.map((r, i) => (
{columns.map(c => (
|
{c.render ? c.render(r) : r[c.key]}
|
))}
))}
);
/* ============================================================
Toast / Snackbar (with auto-dismiss)
============================================================ */
const PLToast = ({ tone = "neutral", icon: IconComp, title, action, duration = 0, onDismiss }) => {
const [visible, setVisible] = useState(true);
useEffect(() => {
if (!duration) return;
const t = setTimeout(() => {
setVisible(false);
onDismiss?.();
}, duration);
return () => clearTimeout(t);
}, [duration, onDismiss]);
if (!visible) return null;
const tones = {
neutral: { fg: "var(--pl-ink-2)", d: "var(--pl-ink-4)" },
ok: { fg: "var(--pl-ok-700)", d: "var(--pl-ok-500)" },
danger: { fg: "var(--pl-danger-700)", d: "var(--pl-danger-500)" },
};
const t = tones[tone];
const role = tone === "danger" ? "alert" : "status";
return (
{IconComp && }
{title}
{action && (
)}
);
};
/* ============================================================
Layout primitives
============================================================ */
const PLStack = ({ gap = 12, align = "stretch", as: Tag = "div", children, style, ...rest }) => (
{children}
);
const PLCluster = ({ gap = 8, align = "center", justify = "flex-start", wrap = true, as: Tag = "div", children, style, ...rest }) => (
{children}
);
const PLGrid = ({ cols = 3, gap = 16, minCol, as: Tag = "div", children, style, ...rest }) => (
{children}
);
/* ============================================================
Breadcrumbs
============================================================ */
const PLBreadcrumbs = ({ items }) => (
);
/* ============================================================
Pagination
============================================================ */
const PLPagination = ({ page = 1, total, onChange }) => {
const go = (p) => onChange(clamp(p, 1, total));
const buttons = [];
const pushBtn = (p, key = p) => buttons.push(
);
const window = 1;
const pages = new Set([1, total, page - window, page, page + window].filter((p) => p >= 1 && p <= total));
const sorted = [...pages].sort((a, b) => a - b);
let prev = 0;
for (const p of sorted) {
if (p - prev > 1) buttons.push(…);
pushBtn(p);
prev = p;
}
return (
);
};
/* ============================================================
Tooltip (CSS-only on hover/focus, no portal)
============================================================ */
const PLTooltip = ({ label, side = "top", children }) => {
const id = useId();
const offsets = {
top: { bottom: "calc(100% + 6px)", left: "50%", transform: "translateX(-50%)" },
bottom: { top: "calc(100% + 6px)", left: "50%", transform: "translateX(-50%)" },
left: { right: "calc(100% + 6px)", top: "50%", transform: "translateY(-50%)" },
right: { left: "calc(100% + 6px)", top: "50%", transform: "translateY(-50%)" },
};
const child = React.Children.only(children);
const cloned = React.cloneElement(child, { "aria-describedby": id });
return (
{cloned}
{label}
);
};
/* ============================================================
Dropdown / Menu (controlled, click-outside, Esc to close)
============================================================ */
const PLMenu = ({ trigger, items, align = "left", onSelect }) => {
const [open, setOpen] = useState(false);
const ref = useRef(null);
const triggerWrapRef = useRef(null);
const focusTrigger = () => triggerWrapRef.current?.querySelector("button, [href], [tabindex]")?.focus();
useEffect(() => {
if (!open) return;
const onDoc = (e) => {
if (ref.current && !ref.current.contains(e.target) && !triggerWrapRef.current?.contains(e.target)) setOpen(false);
};
const onKey = (e) => { if (e.key === "Escape") { setOpen(false); focusTrigger(); } };
document.addEventListener("mousedown", onDoc);
document.addEventListener("keydown", onKey);
return () => { document.removeEventListener("mousedown", onDoc); document.removeEventListener("keydown", onKey); };
}, [open]);
const triggerEl = React.cloneElement(trigger, {
onClick: (e) => { trigger.props.onClick?.(e); setOpen((o) => !o); },
"aria-haspopup": "menu",
"aria-expanded": open,
});
return (
{triggerEl}
{open && (
{items.map((it, i) => (
it.divider
?
: (
)
))}
{ if (closeOnOverlay && e.target === e.currentTarget) onClose?.(); }}
style={{
position: "fixed", inset: 0,
background: "rgba(28,26,23,0.42)",
display: "flex", alignItems: "center", justifyContent: "center",
padding: 20, zIndex: "var(--pl-z-modal)",
}}
>
{(title || onClose) && (
{title &&
{title}
}
{description &&
{description}
}
{onClose && (
)}
)}
{children}
{footer && (
{footer}
)}