@pitchfork-ui/react 0.1.9 → 0.6.0

package/dist/components/Notification/Notification.css

@@ -0,0 +1,242 @@
+.pf-notification-stack {
+  display: grid;
+  gap: var(--space-3);
+  left: var(--space-2);
+  position: fixed;
+  right: var(--space-2);
+  width: auto;
+  z-index: 1000;
+}
+
+.pf-notification-stack--top-right,
+.pf-notification-stack--top-left {
+  top: var(--space-2);
+}
+
+.pf-notification-stack--bottom-right,
+.pf-notification-stack--bottom-left {
+  bottom: var(--space-2);
+}
+
+@media (min-width: 768px) {
+  .pf-notification-stack {
+    left: auto;
+    right: auto;
+    width: min(420px, calc(100vw - (var(--space-4) * 2)));
+  }
+
+  .pf-notification-stack--top-right,
+  .pf-notification-stack--top-left {
+    top: var(--space-4);
+  }
+
+  .pf-notification-stack--bottom-right,
+  .pf-notification-stack--bottom-left {
+    bottom: var(--space-4);
+  }
+
+  .pf-notification-stack--top-right,
+  .pf-notification-stack--bottom-right {
+    justify-items: end;
+    right: var(--space-4);
+  }
+
+  .pf-notification-stack--top-left,
+  .pf-notification-stack--bottom-left {
+    left: var(--space-4);
+  }
+}
+
+.pf-notification {
+  align-items: flex-start;
+  background: var(--pf-notification-bg);
+  border: 1px solid var(--pf-notification-border);
+  border-radius: var(--radius-md);
+  box-shadow: var(--pf-notification-elevation-floating-shadow, var(--pf-elevation-floating-shadow));
+  display: grid;
+  gap: var(--space-3);
+  grid-template-columns: auto minmax(0, 1fr) auto;
+  max-width: none;
+  padding: var(--space-3);
+  width: 100%;
+  animation: pf-notification-in var(--duration-moderate) var(--easing-decelerate);
+}
+
+@keyframes pf-notification-in {
+  from {
+    opacity: 0;
+    transform: translateX(12px);
+  }
+}
+
+/* Exit: slide off to the right and collapse so stacked siblings reflow. */
+.pf-notification--exiting {
+  animation: pf-notification-out var(--duration-moderate) var(--easing-accelerate) forwards;
+  overflow: hidden;
+  pointer-events: none;
+}
+
+@keyframes pf-notification-out {
+  from {
+    opacity: 1;
+    transform: translateX(0);
+    max-height: 480px;
+  }
+  to {
+    opacity: 0;
+    transform: translateX(100%);
+    max-height: 0;
+    margin-top: 0;
+    margin-bottom: 0;
+    padding-top: 0;
+    padding-bottom: 0;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .pf-notification,
+  .pf-notification--exiting {
+    animation: none;
+  }
+}
+
+@media (min-width: 768px) {
+  .pf-notification {
+    max-width: 420px;
+    padding: var(--space-4);
+  }
+}
+
+.pf-notification--info {
+  background: color-mix(
+    in srgb,
+    var(--pf-notification-info-bg) 45%,
+    var(--pf-notification-mix-base)
+  );
+  border-color: var(--pf-notification-info-border);
+}
+
+.pf-notification--success {
+  background: color-mix(
+    in srgb,
+    var(--pf-notification-success-bg) 45%,
+    var(--pf-notification-mix-base)
+  );
+  border-color: var(--pf-notification-success-border);
+}
+
+.pf-notification--warning {
+  background: color-mix(
+    in srgb,
+    var(--pf-notification-warning-bg) 45%,
+    var(--pf-notification-mix-base)
+  );
+  border-color: var(--pf-notification-warning-border);
+}
+
+.pf-notification--danger {
+  background: color-mix(
+    in srgb,
+    var(--pf-notification-danger-bg) 45%,
+    var(--pf-notification-mix-base)
+  );
+  border-color: var(--pf-notification-danger-border);
+}
+
+.pf-notification__icon {
+  align-items: center;
+  display: inline-flex;
+  font-size: var(--font-size-lg);
+  height: 1em;
+  justify-content: center;
+  line-height: 1;
+  margin-top: 2px;
+  width: 1em;
+}
+
+.pf-notification--info .pf-notification__icon {
+  color: var(--pf-notification-info-icon);
+}
+
+.pf-notification--info .pf-notification__title {
+  color: var(--pf-notification-info-title);
+}
+
+.pf-notification--info .pf-notification__description {
+  color: var(--pf-notification-info-icon);
+}
+
+.pf-notification--info .pf-notification__dismiss {
+  color: var(--pf-notification-info-icon);
+}
+
+.pf-notification--info .pf-notification__dismiss:hover,
+.pf-notification--info .pf-notification__dismiss:focus-visible {
+  background: var(--pf-notification-info-hover-bg);
+  color: var(--pf-notification-info-hover-icon);
+}
+
+.pf-notification--success .pf-notification__icon {
+  color: var(--pf-notification-success-icon);
+}
+
+.pf-notification--warning .pf-notification__icon {
+  color: var(--pf-notification-warning-icon);
+}
+
+.pf-notification--danger .pf-notification__icon {
+  color: var(--pf-notification-danger-icon);
+}
+
+.pf-notification__content {
+  display: grid;
+  gap: var(--space-1);
+  min-width: 0;
+}
+
+.pf-notification__title {
+  color: var(--pf-notification-text);
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-semibold);
+  line-height: 1.35;
+  margin: 0;
+}
+
+.pf-notification__description {
+  color: var(--pf-notification-text-muted);
+  font-size: var(--font-size-sm);
+  line-height: 1.45;
+}
+
+.pf-notification__description p {
+  margin: 0;
+}
+
+.pf-notification__action {
+  align-items: center;
+  display: inline-flex;
+  gap: var(--space-2);
+  margin-top: var(--space-2);
+}
+
+.pf-notification__dismiss {
+  align-items: center;
+  align-self: start;
+  background: transparent;
+  border: 0;
+  border-radius: var(--radius-sm);
+  color: var(--pf-notification-text-muted);
+  cursor: pointer;
+  display: inline-flex;
+  font-size: var(--font-size-md);
+  height: 28px;
+  justify-content: center;
+  width: 28px;
+}
+
+.pf-notification__dismiss:hover,
+.pf-notification__dismiss:focus-visible {
+  background: var(--pf-notification-bg-subtle);
+  color: var(--pf-notification-text);
+  outline: none;
+}

package/dist/{index70.js → components/Notification/Notification2.js}

@@ -1,6 +1,7 @@
-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 './Notification.css';/* empty css             */
 import { forwardRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/Notification/Notification.tsx
@@ -22,9 +23,10 @@ var Notification = forwardRef(({ className, variant = "info", heading, descripti
 		"aria-hidden": true
 	});
 	const body = children ?? description;
+	const { isExiting, startExit } = useExitAnimation({ onExited: onDismiss });
 	return /* @__PURE__ */ jsxs("div", {
 		ref,
-		className: cx("pf-notification", `pf-notification--${variant}`, className),
+		className: cx("pf-notification", `pf-notification--${variant}`, isExiting && "pf-notification--exiting", className),
 		role: "status",
 		...props,
 		children: [
@@ -54,7 +56,7 @@ var Notification = forwardRef(({ className, variant = "info", heading, descripti
 				type: "button",
 				className: "pf-notification__dismiss",
 				"aria-label": "Dismiss notification",
-				onClick: () => onDismiss?.(),
+				onClick: startExit,
 				children: /* @__PURE__ */ jsx(Icon, {
 					name: "circle-xmark",
 					"aria-hidden": true

package/dist/components/PageHeader/PageHeader.css

@@ -0,0 +1,85 @@
+.pf-page-header {
+  display: grid;
+  gap: var(--space-4);
+}
+
+.pf-page-header__breadcrumbs {
+  min-width: 0;
+}
+
+.pf-page-header__row {
+  align-items: start;
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-4);
+  justify-content: space-between;
+}
+
+@media (min-width: 768px) {
+  .pf-page-header__row {
+    flex-direction: row;
+  }
+}
+
+.pf-page-header__content {
+  display: grid;
+  gap: var(--space-2);
+  min-width: 0;
+}
+
+.pf-page-header__eyebrow {
+  color: var(--pf-page-header-eyebrow);
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-semibold);
+  letter-spacing: 0.08em;
+  margin: 0;
+  text-transform: uppercase;
+}
+
+.pf-page-header__heading {
+  color: var(--pf-page-header-text);
+  font-size: clamp(var(--font-size-3xl), 3vw, var(--font-size-5xl));
+  font-weight: var(--font-weight-semibold);
+  letter-spacing: -0.03em;
+  line-height: 1.05;
+  margin: 0;
+}
+
+.pf-page-header__description {
+  color: var(--pf-page-header-text-muted);
+  font-size: var(--font-size-sm);
+  line-height: 1.5;
+  margin: 0;
+  max-width: 68ch;
+}
+
+@media (min-width: 768px) {
+  .pf-page-header__description {
+    font-size: var(--font-size-md);
+  }
+}
+
+.pf-page-header__meta {
+  align-items: center;
+  color: var(--pf-page-header-text-muted);
+  display: inline-flex;
+  flex-wrap: wrap;
+  gap: var(--space-2);
+}
+
+.pf-page-header__actions {
+  align-items: center;
+  display: inline-flex;
+  flex: 0 0 auto;
+  flex-wrap: wrap;
+  gap: var(--space-2);
+  justify-content: flex-start;
+  width: 100%;
+}
+
+@media (min-width: 768px) {
+  .pf-page-header__actions {
+    justify-content: flex-end;
+    width: auto;
+  }
+}

package/dist/{index72.js → components/PageHeader/PageHeader2.js}

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

package/dist/components/Pagination/Pagination.css

@@ -0,0 +1,101 @@
+.pf-pagination {
+  align-items: center;
+  display: inline-flex;
+  gap: var(--space-2);
+}
+
+@media (min-width: 640px) {
+  .pf-pagination {
+    gap: var(--space-3);
+  }
+}
+
+.pf-pagination--disabled {
+  opacity: 0.65;
+}
+
+.pf-pagination__list {
+  align-items: center;
+  display: inline-flex;
+  gap: var(--space-2);
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.pf-pagination__page,
+.pf-pagination__nav {
+  align-items: center;
+  background: var(--pf-pagination-bg);
+  border: 1px solid var(--pf-pagination-border);
+  border-radius: var(--radius-md);
+  color: var(--pf-pagination-text);
+  cursor: pointer;
+  display: inline-flex;
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-medium);
+  justify-content: center;
+  line-height: 1;
+  transition: box-shadow 140ms ease;
+}
+
+.pf-pagination__page {
+  height: var(--pf-pagination-page-size);
+  min-width: var(--pf-pagination-page-size);
+  padding: 0 var(--space-2);
+  transition: none;
+}
+
+.pf-pagination__nav {
+  height: var(--pf-control-height-sm);
+  min-width: var(--pf-control-height-sm);
+  padding: 0 var(--space-2);
+}
+
+@media (min-width: 640px) {
+  .pf-pagination__nav {
+    padding: 0 var(--space-3);
+  }
+}
+
+.pf-pagination__page:hover,
+.pf-pagination__nav:hover {
+  border-color: var(--pf-pagination-active-border);
+}
+
+.pf-pagination__page:focus-visible,
+.pf-pagination__nav:focus-visible {
+  box-shadow: var(--pf-focus-ring);
+  outline: none;
+}
+
+.pf-pagination__page--active {
+  background: var(--pf-pagination-active-bg);
+  border-color: var(--pf-pagination-active-border);
+  color: var(--pf-pagination-active-text);
+}
+
+.pf-pagination__page--active:hover {
+  background: var(--pf-pagination-active-hover-bg);
+}
+
+.pf-pagination__page:disabled,
+.pf-pagination__nav:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+.pf-pagination__ellipsis {
+  color: var(--pf-pagination-text-muted);
+  display: inline-flex;
+  font-size: var(--font-size-sm);
+  justify-content: center;
+  min-width: 20px;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .pf-pagination__page,
+  .pf-pagination__nav {
+    transition: none;
+  }
+}

package/dist/{index74.js → components/Pagination/Pagination2.js}

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

package/dist/components/PieChart/PieChart.css

@@ -0,0 +1,115 @@
+.pf-pie-chart {
+  align-items: flex-start;
+  display: inline-flex;
+  flex-direction: column;
+  gap: var(--space-4);
+}
+
+@media (min-width: 640px) {
+  .pf-pie-chart {
+    align-items: center;
+    flex-direction: row;
+    gap: var(--space-6);
+  }
+}
+
+.pf-pie-chart__visual {
+  align-items: center;
+  border-radius: 999px;
+  display: inline-flex;
+  justify-content: center;
+  position: relative;
+}
+
+/* The conic-gradient lives on a masked layer so it can sweep ("build out")
+   clockwise on mount without clipping the center label. */
+@property --pf-pie-sweep {
+  syntax: '<percentage>';
+  inherits: false;
+  initial-value: 0%;
+}
+
+.pf-pie-chart__visual::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  background-image: var(--pf-pie-gradient);
+  --pf-pie-sweep: 100%;
+  -webkit-mask: conic-gradient(#000 var(--pf-pie-sweep), #0000 0);
+  mask: conic-gradient(#000 var(--pf-pie-sweep), #0000 0);
+  animation: pf-pie-sweep var(--duration-slow) var(--easing-decelerate);
+}
+
+@keyframes pf-pie-sweep {
+  from {
+    --pf-pie-sweep: 0%;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .pf-pie-chart__visual::before {
+    animation: none;
+  }
+}
+
+.pf-pie-chart__visual--empty {
+  outline: 1px solid var(--pf-piechart-border-muted);
+}
+
+.pf-pie-chart__center {
+  align-items: center;
+  background: var(--pf-piechart-bg);
+  border-radius: 999px;
+  color: var(--pf-piechart-text);
+  display: inline-flex;
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-semibold);
+  justify-content: center;
+  line-height: 1.2;
+  position: relative;
+  z-index: 1;
+  text-align: center;
+}
+
+.pf-pie-chart__legend {
+  display: grid;
+  gap: var(--space-2);
+  list-style: none;
+  margin: 0;
+  min-width: 0;
+  padding: 0;
+  width: 100%;
+}
+
+@media (min-width: 640px) {
+  .pf-pie-chart__legend {
+    min-width: 180px;
+    width: auto;
+  }
+}
+
+.pf-pie-chart__legend-item {
+  align-items: center;
+  display: grid;
+  gap: var(--space-2);
+  grid-template-columns: 10px 1fr auto;
+}
+
+.pf-pie-chart__legend-dot {
+  border-radius: 999px;
+  display: inline-block;
+  height: 10px;
+  width: 10px;
+}
+
+.pf-pie-chart__legend-label {
+  color: var(--pf-piechart-text);
+  font-size: var(--font-size-sm);
+}
+
+.pf-pie-chart__legend-value {
+  color: var(--pf-piechart-text-muted);
+  font-size: var(--font-size-sm);
+  font-variant-numeric: tabular-nums;
+}

package/dist/{index76.js → components/PieChart/PieChart2.js}

@@ -1,5 +1,5 @@
-import { cx } from "./index4.js";
-/* empty css        */
+import { cx } from "../../utils/cx.js";
+import './PieChart.css';/* empty css         */
 import { forwardRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/PieChart/PieChart.tsx
@@ -52,7 +52,7 @@ var PieChart = forwardRef(function PieChart({ className, data, size = 192, cutou
 			style: {
 				width: chartSize,
 				height: chartSize,
-				backgroundImage: conicGradient
+				"--pf-pie-gradient": conicGradient
 			},
 			role: "img",
 			"aria-label": "Pie chart",

package/dist/components/ProgressIndicators/ProgressIndicators.css

@@ -0,0 +1,95 @@
+.pf-progress-bar {
+  align-items: center;
+  display: inline-flex;
+  gap: var(--space-2);
+  min-width: 220px;
+}
+
+.pf-progress-bar__track {
+  background: var(--pf-progress-track-bg);
+  border-radius: var(--radius-full);
+  flex: 1;
+  height: 8px;
+  overflow: hidden;
+  pointer-events: none;
+}
+
+.pf-progress-bar__fill {
+  background: var(--pf-progress-accent);
+  border-radius: inherit;
+  height: 100%;
+  width: var(--pf-progress-fill, 0%);
+  /* Animate fill in from 0 on mount, and smoothly between values on change */
+  transition: width var(--pf-transition-slow);
+  animation: pf-progress-bar-in var(--duration-slow) var(--easing-decelerate);
+}
+
+@keyframes pf-progress-bar-in {
+  from {
+    width: 0;
+  }
+}
+
+.pf-progress-bar__value {
+  color: var(--pf-progress-text-muted);
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-medium);
+}
+
+.pf-progress-circle {
+  align-items: center;
+  display: inline-flex;
+  height: var(--pf-progress-circle-size, 64px);
+  justify-content: center;
+  position: relative;
+  width: var(--pf-progress-circle-size, 64px);
+}
+
+.pf-progress-circle__svg {
+  display: block;
+  height: 100%;
+  transform: rotate(-90deg);
+  width: 100%;
+}
+
+.pf-progress-circle__track,
+.pf-progress-circle__fill {
+  fill: none;
+}
+
+.pf-progress-circle__track {
+  stroke: var(--pf-progress-track-bg);
+}
+
+.pf-progress-circle__fill {
+  stroke: var(--pf-progress-accent);
+  stroke-linecap: round;
+  stroke-dashoffset: var(--pf-progress-dashoffset);
+  /* Animate fill in from empty on mount, and smoothly between values on change */
+  transition: stroke-dashoffset var(--pf-transition-slow);
+  animation: pf-progress-circle-in var(--duration-slow) var(--easing-decelerate);
+}
+
+@keyframes pf-progress-circle-in {
+  from {
+    stroke-dashoffset: var(--pf-progress-circ);
+  }
+}
+
+.pf-progress-circle__value {
+  color: var(--pf-progress-text);
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-semibold);
+  left: 50%;
+  position: absolute;
+  top: 50%;
+  transform: translate(-50%, -50%);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .pf-progress-bar__fill,
+  .pf-progress-circle__fill {
+    transition: none;
+    animation: none;
+  }
+}