@pitchfork-ui/react 0.1.9 → 0.6.0

package/dist/components/Heatmap/Heatmap.css

@@ -0,0 +1,100 @@
+.pf-heatmap {
+  display: inline-block;
+  font-family: var(--font-family-sans);
+}
+
+.pf-heatmap__empty {
+  color: var(--color-semantic-text-muted);
+  font-size: var(--font-size-sm);
+  padding: var(--space-4);
+  text-align: center;
+}
+
+.pf-heatmap__body {
+  display: flex;
+  gap: var(--pf-heatmap-cell-gap);
+}
+
+.pf-heatmap__weekdays {
+  display: flex;
+  flex-direction: column;
+}
+
+.pf-heatmap__weekday-spacer {
+  display: block;
+  height: calc(var(--font-size-xs) + var(--space-1));
+}
+
+.pf-heatmap__weekday-grid {
+  display: grid;
+  grid-template-rows: repeat(7, var(--pf-heatmap-cell-size));
+  gap: var(--pf-heatmap-cell-gap);
+}
+
+.pf-heatmap__weekday {
+  align-items: center;
+  color: var(--pf-heatmap-label-color);
+  display: flex;
+  font-size: var(--font-size-xs);
+  line-height: 1;
+  padding-inline-end: var(--space-1);
+}
+
+.pf-heatmap__main {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-1);
+}
+
+.pf-heatmap__months {
+  display: grid;
+  gap: var(--pf-heatmap-cell-gap);
+  height: var(--font-size-xs);
+}
+
+.pf-heatmap__month {
+  color: var(--pf-heatmap-label-color);
+  font-size: var(--font-size-xs);
+  line-height: 1;
+}
+
+.pf-heatmap__grid {
+  display: grid;
+  grid-template-rows: repeat(7, var(--pf-heatmap-cell-size));
+  grid-auto-flow: column;
+  grid-auto-columns: var(--pf-heatmap-cell-size);
+  gap: var(--pf-heatmap-cell-gap);
+}
+
+.pf-heatmap__cell {
+  border-radius: var(--pf-heatmap-cell-radius);
+  height: var(--pf-heatmap-cell-size);
+  width: var(--pf-heatmap-cell-size);
+}
+
+.pf-heatmap__cell--empty {
+  background: transparent;
+}
+
+/* Staggered fade-in on mount — per-column animation-delay is set inline so
+   the grid wipes in left-to-right (oldest week → newest). */
+.pf-heatmap__cell {
+  animation: pf-heatmap-cell-in var(--duration-moderate) var(--easing-decelerate) both;
+}
+
+@keyframes pf-heatmap-cell-in {
+  from {
+    opacity: 0;
+    transform: scale(0.6);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .pf-heatmap__cell {
+    animation: none;
+  }
+}

package/dist/components/Heatmap/Heatmap2.js

@@ -0,0 +1,160 @@
+import { cx } from "../../utils/cx.js";
+import './Heatmap.css';/* empty css        */
+import { forwardRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/Heatmap/Heatmap.tsx
+var MONTHS = [
+	"Jan",
+	"Feb",
+	"Mar",
+	"Apr",
+	"May",
+	"Jun",
+	"Jul",
+	"Aug",
+	"Sep",
+	"Oct",
+	"Nov",
+	"Dec"
+];
+var WEEKDAYS = [
+	"Sun",
+	"Mon",
+	"Tue",
+	"Wed",
+	"Thu",
+	"Fri",
+	"Sat"
+];
+function parseISO(s) {
+	const [y, m, d] = s.split("-").map(Number);
+	return new Date(y, m - 1, d);
+}
+function toISO(d) {
+	return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, "0")}-${String(d.getDate()).padStart(2, "0")}`;
+}
+function addDays(d, n) {
+	const r = new Date(d);
+	r.setDate(r.getDate() + n);
+	return r;
+}
+var Heatmap = forwardRef(function Heatmap({ className, data, startDate, endDate, levels = 5, weekStartsOn = 0, cellSize = 12, cellGap = 3, showWeekdayLabels = true, showMonthLabels = true, valueFormatter, label, emptyLabel = "No data", style, ...props }, ref) {
+	const sortedDates = data.map((d) => d.date).sort();
+	if (!Boolean(startDate || endDate || data.length)) return /* @__PURE__ */ jsx("div", {
+		ref,
+		className: cx("pf-heatmap", className),
+		...props,
+		children: /* @__PURE__ */ jsx("div", {
+			className: "pf-heatmap__empty",
+			children: emptyLabel
+		})
+	});
+	const valueByDate = new Map(data.map((d) => [d.date, d.value]));
+	const maxValue = data.reduce((max, d) => Math.max(max, d.value), 0);
+	const total = data.reduce((sum, d) => sum + d.value, 0);
+	const levelCount = Math.max(2, levels);
+	const start = parseISO(startDate ?? sortedDates[0]);
+	const end = parseISO(endDate ?? sortedDates[sortedDates.length - 1]);
+	const gridStart = addDays(start, -((start.getDay() - weekStartsOn + 7) % 7));
+	const weeks = [];
+	let cursor = gridStart;
+	while (cursor <= end) {
+		const week = [];
+		for (let i = 0; i < 7; i++) {
+			week.push({
+				iso: toISO(cursor),
+				date: new Date(cursor),
+				inRange: cursor >= start && cursor <= end
+			});
+			cursor = addDays(cursor, 1);
+		}
+		weeks.push(week);
+	}
+	function levelFor(value) {
+		if (value <= 0 || maxValue <= 0) return 0;
+		return Math.min(levelCount - 1, Math.max(1, Math.ceil(value / maxValue * (levelCount - 1))));
+	}
+	function cellColor(level) {
+		if (level === 0) return "var(--pf-heatmap-empty)";
+		return `color-mix(in srgb, var(--pf-heatmap-color) ${Math.round(level / (levelCount - 1) * 100)}%, var(--pf-heatmap-empty))`;
+	}
+	const monthLabels = [];
+	let lastMonth = -1;
+	weeks.forEach((week, col) => {
+		const firstInRange = week.find((c) => c.inRange);
+		if (!firstInRange) return;
+		const month = firstInRange.date.getMonth();
+		if (month !== lastMonth) {
+			monthLabels.push({
+				col: col + 1,
+				label: MONTHS[month]
+			});
+			lastMonth = month;
+		}
+	});
+	const styleVars = {
+		"--pf-heatmap-cell-size": `${cellSize}px`,
+		"--pf-heatmap-cell-gap": `${cellGap}px`,
+		...style
+	};
+	const ariaLabel = label ?? `Activity heatmap from ${toISO(start)} to ${toISO(end)}, ${total} total`;
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		className: cx("pf-heatmap", className),
+		style: styleVars,
+		role: "img",
+		"aria-label": ariaLabel,
+		...props,
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "pf-heatmap__body",
+			children: [showWeekdayLabels ? /* @__PURE__ */ jsxs("div", {
+				className: "pf-heatmap__weekdays",
+				children: [showMonthLabels ? /* @__PURE__ */ jsx("span", {
+					className: "pf-heatmap__weekday-spacer",
+					"aria-hidden": "true"
+				}) : null, /* @__PURE__ */ jsx("div", {
+					className: "pf-heatmap__weekday-grid",
+					children: Array.from({ length: 7 }, (_, i) => {
+						const dow = (weekStartsOn + i) % 7;
+						return /* @__PURE__ */ jsx("span", {
+							className: "pf-heatmap__weekday",
+							children: i % 2 === 1 ? WEEKDAYS[dow] : ""
+						}, i);
+					})
+				})]
+			}) : null, /* @__PURE__ */ jsxs("div", {
+				className: "pf-heatmap__main",
+				children: [showMonthLabels ? /* @__PURE__ */ jsx("div", {
+					className: "pf-heatmap__months",
+					style: { gridTemplateColumns: `repeat(${weeks.length}, var(--pf-heatmap-cell-size))` },
+					"aria-hidden": "true",
+					children: monthLabels.map((m) => /* @__PURE__ */ jsx("span", {
+						className: "pf-heatmap__month",
+						style: { gridColumnStart: m.col },
+						children: m.label
+					}, `${m.label}-${m.col}`))
+				}) : null, /* @__PURE__ */ jsx("div", {
+					className: "pf-heatmap__grid",
+					children: weeks.flatMap((week, wi) => week.map((cell, di) => {
+						if (!cell.inRange) return /* @__PURE__ */ jsx("span", { className: "pf-heatmap__cell pf-heatmap__cell--empty" }, `${wi}-${di}`);
+						const value = valueByDate.get(cell.iso) ?? 0;
+						const level = levelFor(value);
+						const title = valueFormatter ? valueFormatter(value, cell.iso) : `${cell.iso}: ${value}`;
+						return /* @__PURE__ */ jsx("span", {
+							className: "pf-heatmap__cell",
+							style: {
+								background: cellColor(level),
+								animationDelay: `${wi * 8}ms`
+							},
+							title,
+							"data-level": level
+						}, `${wi}-${di}`);
+					}))
+				})]
+			})]
+		})
+	});
+});
+Heatmap.displayName = "Heatmap";
+//#endregion
+export { Heatmap };

package/dist/components/Icon/Icon.css

@@ -0,0 +1,6 @@
+.pf-icon {
+  display: inline-block;
+  line-height: var(--pf-icon-line-height, 1);
+  vertical-align: var(--pf-icon-vertical-align, middle);
+  color: var(--pf-icon-color, currentColor);
+}

package/dist/{index6.js → components/Icon/Icon2.js}

@@ -1,5 +1,5 @@
-import { cx } from "./index4.js";
-/* empty css       */
+import { cx } from "../../utils/cx.js";
+import './Icon.css';/* empty css     */
 import { faBarChart, faCalendar, faCircleCheck, faCircleQuestion, faCircleXmark, faCopy, faCreditCard, faSquareCaretLeft, faSquareCaretRight, faSquareCheck, faStar, faUser } from "@fortawesome/free-regular-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { jsx, jsxs } from "react/jsx-runtime";

package/dist/components/InlineCTA/InlineCTA.css

@@ -0,0 +1,144 @@
+.pf-inline-cta {
+  align-items: start;
+  background: var(--pf-inline-cta-bg);
+  border: 1px solid var(--pf-inline-cta-border);
+  border-radius: var(--radius-md);
+  display: grid;
+  gap: var(--space-3);
+  grid-template-columns: auto 1fr;
+  padding: var(--space-3);
+  position: relative;
+}
+
+/* Leave room for the centered dismiss button so content/action don't crowd it */
+.pf-inline-cta--dismissible {
+  padding-inline-end: var(--space-12);
+}
+
+.pf-inline-cta__dismiss {
+  align-items: center;
+  background: transparent;
+  border: 0;
+  border-radius: var(--radius-sm);
+  color: var(--color-semantic-text-muted);
+  cursor: pointer;
+  display: inline-flex;
+  height: 28px;
+  justify-content: center;
+  position: absolute;
+  inset-inline-end: var(--space-3);
+  top: 50%;
+  transform: translateY(-50%);
+  width: 28px;
+}
+
+.pf-inline-cta__dismiss:hover,
+.pf-inline-cta__dismiss:focus-visible {
+  background: var(--color-semantic-background-subtle);
+  color: var(--color-semantic-text-default);
+  outline: none;
+}
+
+/* Exit: fade and collapse so surrounding content reflows when dismissed. */
+.pf-inline-cta--exiting {
+  animation: pf-inline-cta-out var(--duration-moderate) var(--easing-accelerate) forwards;
+  overflow: hidden;
+  pointer-events: none;
+}
+
+@keyframes pf-inline-cta-out {
+  from {
+    opacity: 1;
+    max-height: 480px;
+  }
+  to {
+    opacity: 0;
+    max-height: 0;
+    margin-top: 0;
+    margin-bottom: 0;
+    padding-top: 0;
+    padding-bottom: 0;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .pf-inline-cta--exiting {
+    animation: none;
+  }
+}
+
+@media (min-width: 768px) {
+  .pf-inline-cta {
+    align-items: center;
+    grid-template-columns: auto 1fr auto;
+  }
+}
+
+.pf-inline-cta__icon {
+  align-items: center;
+  color: var(--pf-inline-cta-text-muted);
+  display: inline-flex;
+  font-size: var(--font-size-md);
+  justify-content: center;
+}
+
+.pf-inline-cta__content {
+  display: grid;
+  gap: 2px;
+  min-width: 0;
+}
+
+.pf-inline-cta__heading {
+  color: var(--pf-inline-cta-text);
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-semibold);
+  margin: 0;
+}
+
+.pf-inline-cta__description {
+  color: var(--pf-inline-cta-text-muted);
+  font-size: var(--font-size-sm);
+  margin: 0;
+}
+
+.pf-inline-cta__action {
+  align-items: center;
+  display: inline-flex;
+  gap: var(--space-2);
+  grid-column: 1 / -1;
+  justify-content: flex-start;
+}
+
+@media (min-width: 768px) {
+  .pf-inline-cta__action {
+    grid-column: auto;
+    justify-content: initial;
+  }
+}
+
+.pf-inline-cta--info {
+  background: color-mix(in srgb, var(--pf-inline-cta-info-bg) 70%, var(--color-base-white));
+  border-color: var(--pf-inline-cta-info-border);
+}
+
+.pf-inline-cta--info .pf-inline-cta__icon {
+  color: var(--pf-inline-cta-info-icon);
+}
+
+.pf-inline-cta--info .pf-inline-cta__heading {
+  color: var(--pf-inline-cta-info-heading);
+}
+
+.pf-inline-cta--info .pf-inline-cta__description {
+  color: var(--pf-inline-cta-info-description);
+}
+
+.pf-inline-cta--success {
+  background: color-mix(in srgb, var(--pf-inline-cta-success-bg) 55%, var(--color-base-white));
+  border-color: var(--pf-inline-cta-success-border);
+}
+
+.pf-inline-cta--warning {
+  background: color-mix(in srgb, var(--pf-inline-cta-warning-bg) 60%, var(--color-base-white));
+  border-color: var(--pf-inline-cta-warning-border);
+}

package/dist/{index58.js → components/InlineCTA/InlineCTA2.js}

@@ -1,17 +1,19 @@
-import { cx } from "./index4.js";
-import { Icon } from "./index6.js";
-/* empty css        */
+import { useExitAnimation } from "../../hooks/useExitAnimation.js";
+import { cx } from "../../utils/cx.js";
+import { Icon } from "../Icon/Icon2.js";
+import './InlineCTA.css';/* empty css          */
 import { forwardRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/InlineCTA/InlineCTA.tsx
-var InlineCTA = forwardRef(function InlineCTA({ className, heading, description, action, icon, iconName = "circle-question", tone = "default", children, ...props }, ref) {
+var InlineCTA = forwardRef(function InlineCTA({ className, heading, description, action, icon, iconName = "circle-question", tone = "default", dismissible = false, onDismiss, children, ...props }, ref) {
 	const resolvedIcon = icon ?? /* @__PURE__ */ jsx(Icon, {
 		name: iconName,
 		"aria-hidden": true
 	});
+	const { isExiting, startExit } = useExitAnimation({ onExited: onDismiss });
 	return /* @__PURE__ */ jsxs("div", {
 		ref,
-		className: cx("pf-inline-cta", `pf-inline-cta--${tone}`, className),
+		className: cx("pf-inline-cta", `pf-inline-cta--${tone}`, dismissible && "pf-inline-cta--dismissible", isExiting && "pf-inline-cta--exiting", className),
 		...props,
 		children: [
 			/* @__PURE__ */ jsx("span", {
@@ -36,6 +38,16 @@ var InlineCTA = forwardRef(function InlineCTA({ className, heading, description,
 			action ? /* @__PURE__ */ jsx("div", {
 				className: "pf-inline-cta__action",
 				children: action
+			}) : null,
+			dismissible ? /* @__PURE__ */ jsx("button", {
+				type: "button",
+				className: "pf-inline-cta__dismiss",
+				"aria-label": "Dismiss",
+				onClick: startExit,
+				children: /* @__PURE__ */ jsx(Icon, {
+					name: "circle-xmark",
+					"aria-hidden": true
+				})
 			}) : null
 		]
 	});

package/dist/components/Input/Input.css

@@ -0,0 +1,75 @@
+.pf-field {
+  display: grid;
+  gap: var(--space-2);
+}
+
+.pf-field__label {
+  color: var(--pf-input-field-label, var(--pf-field-label));
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-medium);
+}
+
+.pf-field__required {
+  color: var(--pf-field-required);
+  margin-inline-start: var(--space-1);
+}
+
+.pf-field__description {
+  color: var(--pf-input-field-description, var(--pf-field-description));
+  font-size: var(--font-size-sm);
+  margin: 0;
+}
+
+.pf-field__error {
+  color: var(--pf-input-field-error, var(--pf-field-error));
+  font-size: var(--font-size-sm);
+  margin: 0;
+}
+
+.pf-input {
+  background: var(--pf-input-bg);
+  border: 1px solid var(--pf-input-border);
+  border-radius: var(--radius-md);
+  color: var(--pf-input-text);
+  font: inherit;
+  min-height: 40px;
+  padding: 0 var(--space-3);
+  width: 100%;
+  transition:
+    background 0.2s,
+    border 0.2s,
+    color 0.2s,
+    opacity 0.2s;
+}
+
+.pf-input:disabled,
+.pf-input[aria-disabled='true'] {
+  background: var(--pf-control-bg-disabled);
+  border-color: var(--pf-control-border-disabled);
+  color: var(--pf-control-text-disabled);
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+
+.pf-input:focus {
+  outline: none;
+}
+
+.pf-input:focus-visible {
+  border-color: var(--pf-input-focus-border);
+  box-shadow: var(--pf-input-focus-ring, var(--pf-focus-ring));
+}
+
+.pf-input::placeholder {
+  color: var(--pf-input-placeholder);
+}
+
+.pf-input--invalid {
+  border-color: var(--pf-input-invalid-border);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .pf-input {
+    transition: none;
+  }
+}

package/dist/{index21.js → components/Input/Input2.js}

@@ -1,6 +1,6 @@
-import { cx } from "./index4.js";
-import { FieldWrapper } from "./index19.js";
-/* empty css        */
+import { cx } from "../../utils/cx.js";
+import { FieldWrapper } from "../../utils/FieldWrapper.js";
+import './Input.css';/* empty css      */
 import { forwardRef, useId } from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/Input/Input.tsx

package/dist/components/LineBarCharts/LineBarChart.css

@@ -0,0 +1,122 @@
+/* ─── Chart color palette ─────────────────────────────────────────────── */
+:root {
+  --pf-chart-color-1: var(--color-brand-600);
+  --pf-chart-color-2: var(--color-brand-400);
+  --pf-chart-color-3: var(--color-gray-500);
+  --pf-chart-color-4: var(--color-gray-400);
+  --pf-chart-color-5: #0ea5e9;
+  --pf-chart-color-6: #22c55e;
+  --pf-chart-grid: var(--color-semantic-border-default);
+  --pf-chart-text-muted: var(--color-semantic-text-muted);
+}
+
+[data-theme='dark'] {
+  --pf-chart-color-1: var(--color-brand-400);
+  --pf-chart-color-2: var(--color-brand-300);
+  --pf-chart-color-3: var(--color-gray-400);
+  --pf-chart-color-4: var(--color-gray-500);
+}
+
+/* ─── Container ──────────────────────────────────────────────────────── */
+.pf-chart {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-3);
+  width: 100%;
+}
+
+.pf-chart__svg {
+  display: block;
+  height: auto;
+  overflow: visible;
+  width: 100%;
+}
+
+.pf-chart__empty {
+  align-items: center;
+  color: var(--pf-chart-text-muted);
+  display: flex;
+  font-size: var(--font-size-sm);
+  height: 120px;
+  justify-content: center;
+}
+
+/* ─── Grid & axes ────────────────────────────────────────────────────── */
+.pf-chart__grid {
+  stroke: var(--pf-chart-grid);
+  stroke-width: 1;
+}
+
+.pf-chart__tick {
+  fill: var(--pf-chart-text-muted);
+  font-family: inherit;
+  font-size: var(--font-size-2xs);
+}
+
+.pf-chart__tick--y {
+  dominant-baseline: middle;
+  text-anchor: end;
+}
+
+.pf-chart__tick--x {
+  dominant-baseline: hanging;
+  text-anchor: middle;
+}
+
+.pf-chart__axis-label {
+  fill: var(--pf-chart-text-muted);
+  font-family: inherit;
+  font-size: var(--font-size-2xs);
+  text-anchor: middle;
+}
+
+/* ─── Line dots ──────────────────────────────────────────────────────── */
+.pf-chart__dot {
+  opacity: 0;
+  transition: opacity 80ms ease;
+}
+
+.pf-chart__svg:hover .pf-chart__dot {
+  opacity: 1;
+}
+
+/* ─── Bars ───────────────────────────────────────────────────────────── */
+.pf-chart__bar {
+  transition: opacity 80ms ease;
+}
+
+.pf-chart__bar:hover {
+  opacity: 0.75;
+}
+
+/* ─── Legend ─────────────────────────────────────────────────────────── */
+.pf-chart-legend {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-2) var(--space-4);
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.pf-chart-legend__item {
+  align-items: center;
+  color: var(--pf-chart-text-muted);
+  display: flex;
+  font-size: var(--font-size-sm);
+  gap: var(--space-2);
+}
+
+.pf-chart-legend__swatch {
+  border-radius: 50%;
+  flex-shrink: 0;
+  height: 8px;
+  width: 8px;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .pf-chart__dot,
+  .pf-chart__bar {
+    transition: none;
+  }
+}

package/dist/{index60.js → components/LineBarCharts/LineBarChart2.js}

@@ -1,5 +1,5 @@
-import { cx } from "./index4.js";
-/* empty css        */
+import { cx } from "../../utils/cx.js";
+import './LineBarChart.css';/* empty css             */
 import { forwardRef } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/LineBarCharts/LineBarChart.tsx
@@ -195,6 +195,14 @@ var LineChart = forwardRef(function LineChart({ className, data, series, yAxisLa
 	});
 });
 LineChart.displayName = "LineChart";
+var AreaChart = forwardRef(function AreaChart(props, ref) {
+	return /* @__PURE__ */ jsx(LineChart, {
+		...props,
+		area: true,
+		ref
+	});
+});
+AreaChart.displayName = "AreaChart";
 var BarChart = forwardRef(function BarChart({ className, data, series, yAxisLabel, showLegend = true, stacked = false, valueFormatter, ...props }, ref) {
 	if (!data.length || !series.length) return /* @__PURE__ */ jsx("div", {
 		ref,
@@ -261,4 +269,4 @@ var BarChart = forwardRef(function BarChart({ className, data, series, yAxisLabe
 });
 BarChart.displayName = "BarChart";
 //#endregion
-export { BarChart, LineChart };
+export { AreaChart, BarChart, LineChart };