@pitchfork-ui/react 0.1.9 → 0.2.0

package/dist/components/GaugeChart/GaugeChart2.js

@@ -0,0 +1,73 @@
+import { cx } from "../../utils/cx.js";
+import './GaugeChart.css';/* empty css           */
+import { forwardRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/GaugeChart/GaugeChart.tsx
+var GaugeChart = forwardRef(function GaugeChart({ className, value, max = 100, centerLabel, subLabel, size = 200, strokeWidth = 16, color, style, ...props }, ref) {
+	const progress = max > 0 ? Math.min(Math.max(value, 0), max) / max : 0;
+	const radius = (size - strokeWidth) / 2;
+	const circumference = 2 * Math.PI * radius;
+	const filled = progress * circumference;
+	const gap = circumference - filled;
+	const center = size / 2;
+	const pct = Math.round(progress * 100);
+	const defaultLabel = `${pct}%`;
+	const colorVar = color ?? "var(--pf-gauge-color)";
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		className: cx("pf-gauge", className),
+		style: {
+			width: size,
+			height: size,
+			...style
+		},
+		role: "meter",
+		"aria-valuenow": value,
+		"aria-valuemin": 0,
+		"aria-valuemax": max,
+		"aria-label": `${pct}%`,
+		...props,
+		children: [/* @__PURE__ */ jsxs("svg", {
+			width: size,
+			height: size,
+			viewBox: `0 0 ${size} ${size}`,
+			"aria-hidden": "true",
+			className: "pf-gauge__svg",
+			children: [/* @__PURE__ */ jsx("circle", {
+				cx: center,
+				cy: center,
+				r: radius,
+				fill: "none",
+				strokeWidth,
+				className: "pf-gauge__track"
+			}), /* @__PURE__ */ jsx("circle", {
+				cx: center,
+				cy: center,
+				r: radius,
+				fill: "none",
+				stroke: colorVar,
+				strokeWidth,
+				strokeLinecap: "round",
+				strokeDasharray: `${filled} ${gap}`,
+				style: {
+					transform: "rotate(-90deg)",
+					transformOrigin: `${center}px ${center}px`
+				},
+				className: "pf-gauge__fill"
+			})]
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "pf-gauge__center",
+			"aria-hidden": "true",
+			children: [/* @__PURE__ */ jsx("span", {
+				className: "pf-gauge__label",
+				children: centerLabel ?? defaultLabel
+			}), subLabel ? /* @__PURE__ */ jsx("span", {
+				className: "pf-gauge__sub-label",
+				children: subLabel
+			}) : null]
+		})]
+	});
+});
+GaugeChart.displayName = "GaugeChart";
+//#endregion
+export { GaugeChart };

package/dist/components/HeaderNavigation/HeaderNavigation.css

@@ -0,0 +1,87 @@
+.pf-header-navigation {
+  background: var(--pf-header-nav-bg);
+  border: 1px solid var(--pf-header-nav-border);
+  border-radius: var(--radius-md);
+  width: 100%;
+}
+
+.pf-header-navigation__nav {
+  align-items: center;
+  display: grid;
+  gap: var(--space-3);
+  grid-template-columns: 1fr;
+  min-height: 56px;
+  padding: var(--space-3);
+}
+
+@media (min-width: 768px) {
+  .pf-header-navigation__nav {
+    grid-template-columns: auto 1fr auto;
+    padding: 0 var(--space-4);
+  }
+}
+
+.pf-header-navigation__brand {
+  color: var(--pf-header-nav-text);
+  font-size: var(--font-size-md);
+  font-weight: var(--font-weight-semibold);
+  white-space: nowrap;
+}
+
+.pf-header-navigation__list {
+  align-items: center;
+  display: flex;
+  gap: var(--space-1);
+  list-style: none;
+  margin: 0;
+  overflow-x: auto;
+  padding: 0;
+}
+
+.pf-header-navigation__item {
+  flex: 0 0 auto;
+}
+
+.pf-header-navigation__link {
+  align-items: center;
+  background: transparent;
+  border: 0;
+  border-radius: var(--radius-sm);
+  color: var(--pf-header-nav-text-muted);
+  cursor: pointer;
+  display: inline-flex;
+  font: inherit;
+  min-height: 32px;
+  padding: 0 var(--space-2);
+  text-decoration: none;
+  white-space: nowrap;
+}
+
+.pf-header-navigation__link:hover {
+  background: var(--pf-header-nav-bg-subtle);
+  color: var(--pf-header-nav-text);
+}
+
+.pf-header-navigation__link:focus-visible {
+  box-shadow: var(--pf-headernavigation-focus-ring, var(--pf-focus-ring));
+  outline: none;
+}
+
+.pf-header-navigation__link--active {
+  background: var(--pf-header-nav-bg-subtle);
+  color: var(--pf-header-nav-text);
+  font-weight: var(--font-weight-semibold);
+}
+
+.pf-header-navigation__actions {
+  align-items: center;
+  display: inline-flex;
+  gap: var(--space-2);
+  justify-content: flex-start;
+}
+
+@media (min-width: 768px) {
+  .pf-header-navigation__actions {
+    justify-content: initial;
+  }
+}

package/dist/{index56.js → components/HeaderNavigation/HeaderNavigation2.js}

@@ -1,5 +1,5 @@
-import { cx } from "./index4.js";
-/* empty css        */
+import { cx } from "../../utils/cx.js";
+import './HeaderNavigation.css';/* empty css                 */
 import { forwardRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/HeaderNavigation/HeaderNavigation.tsx

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,86 @@
+.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);
+}
+
+@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,6 +1,6 @@
-import { cx } from "./index4.js";
-import { Icon } from "./index6.js";
-/* empty css        */
+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

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 };

package/dist/components/LoadingIndicators/LoadingIndicators.css

@@ -0,0 +1,107 @@
+@keyframes pf-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes pf-pulse-dots {
+  0%,
+  80%,
+  100% {
+    opacity: 0.35;
+    transform: scale(0.9);
+  }
+
+  40% {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+@keyframes pf-skeleton-shimmer {
+  0% {
+    background-position: 200% 0;
+  }
+
+  100% {
+    background-position: -200% 0;
+  }
+}
+
+.pf-loading-spinner {
+  animation: pf-spin 0.8s linear infinite;
+  border: 3px solid color-mix(in srgb, var(--pf-loading-border) 75%, transparent);
+  border-radius: 50%;
+  border-top-color: var(--pf-loading-accent);
+  display: inline-block;
+  flex: 0 0 auto;
+  height: var(--pf-spinner-size, 24px);
+  min-height: 12px;
+  min-width: 12px;
+  width: var(--pf-spinner-size, 24px);
+}
+
+.pf-loading-dots {
+  align-items: center;
+  display: inline-flex;
+  gap: var(--space-2);
+}
+
+.pf-loading-dots__dot {
+  animation: pf-pulse-dots 1s ease-in-out infinite;
+  background: var(--pf-loading-accent);
+  border-radius: 50%;
+  display: inline-block;
+}
+
+.pf-loading-dots__dot:nth-child(2) {
+  animation-delay: 0.16s;
+}
+
+.pf-loading-dots__dot:nth-child(3) {
+  animation-delay: 0.32s;
+}
+
+.pf-loading-dots--sm .pf-loading-dots__dot {
+  height: 6px;
+  width: 6px;
+}
+
+.pf-loading-dots--md .pf-loading-dots__dot {
+  height: 8px;
+  width: 8px;
+}
+
+.pf-loading-dots--lg .pf-loading-dots__dot {
+  height: 10px;
+  width: 10px;
+}
+
+.pf-loading-skeleton {
+  animation: pf-skeleton-shimmer 1.4s linear infinite;
+  height: var(--pf-skeleton-height, 16px);
+  width: var(--pf-skeleton-width, 100%);
+  background: linear-gradient(
+    90deg,
+    color-mix(in srgb, var(--pf-loading-bg-subtle) 92%, var(--color-base-white) 8%) 25%,
+    color-mix(in srgb, var(--pf-loading-border) 72%, var(--color-base-white) 28%) 37%,
+    color-mix(in srgb, var(--pf-loading-bg-subtle) 92%, var(--color-base-white) 8%) 63%
+  );
+  background-size: 200% 100%;
+  border-radius: var(--radius-sm);
+  display: inline-block;
+  max-width: 100%;
+}
+
+.pf-loading-skeleton--rounded {
+  border-radius: var(--radius-full);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .pf-loading-spinner,
+  .pf-loading-dots__dot,
+  .pf-loading-skeleton {
+    animation-duration: 0.01ms;
+    animation-iteration-count: 1;
+  }
+}

package/dist/{index62.js → components/LoadingIndicators/LoadingIndicators2.js}

@@ -1,5 +1,5 @@
-import { cx } from "./index4.js";
-/* empty css        */
+import { cx } from "../../utils/cx.js";
+import './LoadingIndicators.css';/* empty css                  */
 import { forwardRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/LoadingIndicators/LoadingIndicators.tsx