@pitchfork-ui/react 0.2.0 → 0.7.0

package/dist/components/Notification/Notification2.js

@@ -1,3 +1,4 @@
+import { useExitAnimation } from "../../hooks/useExitAnimation.js";
 import { cx } from "../../utils/cx.js";
 import { Icon } from "../Icon/Icon2.js";
 import './Notification.css';/* empty css             */
@@ -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/Pagination/Pagination.css

@@ -1,6 +1,7 @@
 .pf-pagination {
   align-items: center;
-  display: inline-flex;
+  display: flex;
+  flex-wrap: wrap;
   gap: var(--space-2);
 }
 
@@ -16,7 +17,9 @@
 
 .pf-pagination__list {
   align-items: center;
-  display: inline-flex;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
   gap: var(--space-2);
   list-style: none;
   margin: 0;

package/dist/components/PieChart/PieChart.css

@@ -21,6 +21,38 @@
   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);
 }
@@ -35,6 +67,8 @@
   font-weight: var(--font-weight-semibold);
   justify-content: center;
   line-height: 1.2;
+  position: relative;
+  z-index: 1;
   text-align: center;
 }
 

package/dist/components/PieChart/PieChart2.js

@@ -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

@@ -18,8 +18,16 @@
   background: var(--pf-progress-accent);
   border-radius: inherit;
   height: 100%;
-  transition: width 200ms ease;
   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 {
@@ -56,7 +64,16 @@
 .pf-progress-circle__fill {
   stroke: var(--pf-progress-accent);
   stroke-linecap: round;
-  transition: stroke-dashoffset 200ms ease;
+  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 {
@@ -73,5 +90,6 @@
   .pf-progress-bar__fill,
   .pf-progress-circle__fill {
     transition: none;
+    animation: none;
   }
 }

package/dist/components/ProgressIndicators/ProgressIndicators2.js

@@ -63,7 +63,10 @@ var ProgressCircle = forwardRef(function ProgressCircle({ value, max = 100, size
 				r: radius,
 				strokeWidth,
 				strokeDasharray: circumference,
-				strokeDashoffset: dashOffset
+				style: {
+					"--pf-progress-dashoffset": dashOffset,
+					"--pf-progress-circ": circumference
+				}
 			})]
 		}), showValue ? /* @__PURE__ */ jsxs("span", {
 			className: "pf-progress-circle__value",

package/dist/components/ProgressSteps/ProgressSteps.css

@@ -62,13 +62,21 @@
   width: 28px;
   position: relative;
   z-index: 1;
+  /* Animate marker as its status changes when the current step advances */
+  transition:
+    background-color var(--pf-transition-medium),
+    border-color var(--pf-transition-medium),
+    color var(--pf-transition-medium),
+    box-shadow var(--pf-transition-medium);
 }
 
 .pf-progress-steps__connector {
   background: var(--pf-progress-steps-border);
   display: block;
   flex: 1;
-  margin-left: var(--space-2);
+  margin-inline-start: var(--space-2);
+  /* Connector "activates" with a smooth fill as the step completes */
+  transition: background-color var(--pf-transition-slow);
 }
 
 .pf-progress-steps--horizontal .pf-progress-steps__connector {
@@ -80,7 +88,7 @@
     display: block;
     height: 1px;
     left: 50%;
-    margin-left: 0;
+    margin-inline-start: 0;
     position: absolute;
     top: 50%;
     transform: translateY(-50%);
@@ -111,7 +119,7 @@
 
 .pf-progress-steps--vertical .pf-progress-steps__connector {
   bottom: calc(var(--space-3) * -1);
-  left: 14px;
+  inset-inline-start: 14px;
   margin: 0;
   position: absolute;
   top: 28px;
@@ -127,6 +135,7 @@
   font-size: var(--font-size-sm);
   font-weight: var(--font-weight-semibold);
   margin: var(--space-1) 0 0;
+  transition: color var(--pf-transition-medium);
 }
 
 .pf-progress-steps__description {
@@ -156,3 +165,11 @@
 .pf-progress-steps__item--current .pf-progress-steps__title {
   color: var(--pf-progress-steps-current-title);
 }
+
+@media (prefers-reduced-motion: reduce) {
+  .pf-progress-steps__marker,
+  .pf-progress-steps__connector,
+  .pf-progress-steps__title {
+    transition: none;
+  }
+}

package/dist/components/RadarChart/RadarChart.css

@@ -95,3 +95,25 @@
   padding: var(--space-4);
   text-align: center;
 }
+
+/* Grow the value polygon out from the center on mount */
+.pf-radar-chart__value {
+  animation: pf-radar-grow var(--duration-slow) var(--easing-decelerate);
+}
+
+@keyframes pf-radar-grow {
+  from {
+    opacity: 0;
+    transform: scale(0);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .pf-radar-chart__value {
+    animation: none;
+  }
+}

package/dist/components/RadarChart/RadarChart2.js

@@ -69,21 +69,27 @@ var RadarChart = forwardRef(function RadarChart({ className, data, size = 280, m
 					x2: axis.end.x,
 					y2: axis.end.y
 				}, `axis-${index}`)) : null,
-				/* @__PURE__ */ jsx("polygon", {
-					className: "pf-radar-chart__area",
-					points: valuePolygon,
+				/* @__PURE__ */ jsxs("g", {
+					className: "pf-radar-chart__value",
 					style: {
-						fill: fillColor,
-						stroke: strokeColor
-					}
+						transformBox: "view-box",
+						transformOrigin: `${center}px ${center}px`
+					},
+					children: [/* @__PURE__ */ jsx("polygon", {
+						className: "pf-radar-chart__area",
+						points: valuePolygon,
+						style: {
+							fill: fillColor,
+							stroke: strokeColor
+						}
+					}), valuePoints.map((point, index) => /* @__PURE__ */ jsx("circle", {
+						className: "pf-radar-chart__point",
+						cx: point.x,
+						cy: point.y,
+						r: 3,
+						style: { fill: strokeColor }
+					}, `point-${index}`))]
 				}),
-				valuePoints.map((point, index) => /* @__PURE__ */ jsx("circle", {
-					className: "pf-radar-chart__point",
-					cx: point.x,
-					cy: point.y,
-					r: 3,
-					style: { fill: strokeColor }
-				}, `point-${index}`)),
 				axes.map((axis, index) => {
 					const labelPoint = polarToCartesian(center, center, outerRadius + 18, axis.angle);
 					return /* @__PURE__ */ jsx("text", {

package/dist/components/RichTextEditor/RichTextEditor.css

@@ -90,5 +90,5 @@
   color: var(--pf-rte-text-muted);
   font-size: var(--font-size-sm);
   margin: var(--space-2) 0 0;
-  text-align: right;
+  text-align: end;
 }

package/dist/components/Select/Select.css

@@ -15,7 +15,7 @@
   justify-content: space-between;
   min-height: 40px;
   padding: 0 var(--space-3);
-  text-align: left;
+  text-align: start;
   width: 100%;
   transition:
     background 0.2s,
@@ -69,7 +69,7 @@
   justify-content: center;
   width: 20px;
   transform-origin: center;
-  transition: transform 140ms ease;
+  transition: transform var(--pf-transition-fast);
 }
 
 .pf-select__icon svg {
@@ -94,6 +94,25 @@
   padding: var(--space-1);
   position: fixed;
   z-index: 1000;
+  transform-origin: top center;
+  animation: pf-select-menu-in var(--duration-fast) var(--easing-decelerate);
+}
+
+@keyframes pf-select-menu-in {
+  from {
+    opacity: 0;
+    transform: translateY(-4px) scaleY(0.96);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scaleY(1);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .pf-select__menu {
+    animation: none;
+  }
 }
 
 .pf-select__option {

package/dist/components/Select/Select2.js

@@ -1,13 +1,13 @@
 import { Keys, composeDescribedBy, isActivationKey } from "../../a11y/index.js";
-import { cx } from "../../utils/cx.js";
-import { Icon } from "../Icon/Icon2.js";
-import { FieldWrapper } from "../../utils/FieldWrapper.js";
 import { useAnchoredPosition } from "../../hooks/useAnchoredPosition.js";
 import { useComposedRefs } from "../../hooks/useComposedRefs.js";
 import { useControllableState } from "../../hooks/useControllableState.js";
 import { useDisclosure } from "../../hooks/useDisclosure.js";
 import { useListNavigation } from "../../hooks/useListNavigation.js";
 import { useOutsideInteraction } from "../../hooks/useOutsideInteraction.js";
+import { cx } from "../../utils/cx.js";
+import { Icon } from "../Icon/Icon2.js";
+import { FieldWrapper } from "../../utils/FieldWrapper.js";
 import './Select.css';/* empty css       */
 import { forwardRef, useEffect, useId, useMemo, useRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -119,7 +119,6 @@ var Select = forwardRef(({ id, options, value, defaultValue, onValueChange, plac
 					disabled,
 					"aria-haspopup": "listbox",
 					"aria-expanded": isOpen,
-					"aria-controls": isOpen ? listboxId : void 0,
 					"aria-required": required || void 0,
 					"aria-describedby": describedBy,
 					onClick: () => {

package/dist/components/SidebarNavigation/SidebarNavigation.css

@@ -76,7 +76,7 @@
   grid-template-columns: auto 1fr auto;
   min-height: 36px;
   padding: 0 var(--space-2);
-  text-align: left;
+  text-align: start;
   text-decoration: none;
   width: 100%;
 }

package/dist/components/SlideoutMenu/SlideoutMenu.css

@@ -9,7 +9,7 @@
   opacity: 1;
   inset: 0;
   position: absolute;
-  transition: opacity 220ms ease;
+  transition: opacity var(--pf-transition-slow);
 }
 
 .pf-slideout__viewport {
@@ -38,7 +38,7 @@
   height: 100%;
   max-width: 100%;
   pointer-events: auto;
-  transition: transform 220ms ease;
+  transition: transform var(--pf-transition-slow);
   will-change: transform;
 }
 

package/dist/components/Sparkline/Sparkline.css

@@ -15,3 +15,51 @@
 .pf-sparkline__dot {
   fill: var(--pf-sparkline-color-override, var(--pf-sparkline-color));
 }
+
+/* Opt-in mount animation: draw the line, fade in the area and end dot.
+   The line path sets pathLength="1" so dash math is length-independent. */
+.pf-sparkline--animated .pf-sparkline__line {
+  stroke-dasharray: 1;
+  animation: pf-sparkline-draw var(--duration-slow) var(--easing-standard) both;
+}
+
+@keyframes pf-sparkline-draw {
+  from {
+    stroke-dashoffset: 1;
+  }
+  to {
+    stroke-dashoffset: 0;
+  }
+}
+
+.pf-sparkline--animated .pf-sparkline__area {
+  animation: pf-sparkline-fade var(--duration-slow) var(--easing-standard) both;
+}
+
+@keyframes pf-sparkline-fade {
+  from {
+    opacity: 0;
+  }
+}
+
+.pf-sparkline--animated .pf-sparkline__dot {
+  animation: pf-sparkline-dot var(--duration-fast) var(--easing-decelerate) var(--duration-moderate)
+    both;
+}
+
+@keyframes pf-sparkline-dot {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .pf-sparkline--animated .pf-sparkline__line,
+  .pf-sparkline--animated .pf-sparkline__area,
+  .pf-sparkline--animated .pf-sparkline__dot {
+    animation: none;
+  }
+}

package/dist/components/Sparkline/Sparkline2.js

@@ -27,7 +27,7 @@ function normalizePoints(data, width, height, padding) {
 		return [padding + i / (data.length - 1) * innerW, padding + (1 - (value - min) / range) * innerH];
 	});
 }
-var Sparkline = forwardRef(function Sparkline({ className, data = [], width = 120, height = 36, variant = "line", strokeWidth = 1.5, color, endDot = false, label, style, ...props }, ref) {
+var Sparkline = forwardRef(function Sparkline({ className, data = [], width = 120, height = 36, variant = "line", strokeWidth = 1.5, color, endDot = false, animate = false, label, style, ...props }, ref) {
 	const padding = strokeWidth + 2;
 	const points = useMemo(() => normalizePoints(data, width, height, padding), [
 		data,
@@ -61,7 +61,7 @@ var Sparkline = forwardRef(function Sparkline({ className, data = [], width = 12
 		width,
 		height,
 		viewBox: `0 0 ${width} ${height}`,
-		className: cx("pf-sparkline", `pf-sparkline--${variant}`, className),
+		className: cx("pf-sparkline", `pf-sparkline--${variant}`, animate && "pf-sparkline--animated", className),
 		"aria-label": label,
 		role: label ? "img" : "presentation",
 		style: {
@@ -82,6 +82,7 @@ var Sparkline = forwardRef(function Sparkline({ className, data = [], width = 12
 				strokeWidth,
 				strokeLinecap: "round",
 				strokeLinejoin: "round",
+				pathLength: animate ? 1 : void 0,
 				className: "pf-sparkline__line"
 			}),
 			endDot && lastPoint && /* @__PURE__ */ jsx("circle", {

package/dist/components/Table/Table.css

@@ -20,9 +20,9 @@
   font-size: var(--font-size-sm);
   min-height: 56px;
   padding-top: var(--space-3);
-  padding-right: var(--space-4, 16px);
+  padding-inline-end: var(--space-4, 16px);
   padding-bottom: var(--space-3);
-  padding-left: var(--space-4, 16px);
+  padding-inline-start: var(--space-4, 16px);
 }
 
 .pf-table__head-cell,
@@ -103,7 +103,7 @@
 }
 
 .pf-table__cell--left {
-  text-align: left;
+  text-align: start;
 }
 
 .pf-table__cell--center {
@@ -111,7 +111,7 @@
 }
 
 .pf-table__cell--right {
-  text-align: right;
+  text-align: end;
 }
 
 .pf-table__empty {

package/dist/components/Tabs/Tabs.css

@@ -12,6 +12,31 @@
 .pf-tabs__list {
   display: flex;
   overflow-x: auto;
+  position: relative;
+}
+
+.pf-tabs__indicator {
+  position: absolute;
+  pointer-events: none;
+  transition:
+    left var(--pf-transition-medium),
+    width var(--pf-transition-medium),
+    top var(--pf-transition-medium),
+    height var(--pf-transition-medium);
+}
+
+.pf-tabs__indicator--underline {
+  bottom: 0;
+  height: var(--pf-tabs-underline-width);
+  background: var(--pf-tabs-text);
+  border-radius: var(--radius-full);
+}
+
+.pf-tabs__indicator--pills {
+  background: var(--pf-tabs-bg);
+  border-radius: var(--radius-sm);
+  box-shadow: var(--pf-tabs-elevation-tab-active-shadow, var(--pf-elevation-tab-active-shadow));
+  z-index: 0;
 }
 
 .pf-tabs__list--full-width {
@@ -40,7 +65,8 @@
   font-weight: var(--font-weight-medium);
   min-width: 0;
   position: relative;
-  transition: color 160ms ease;
+  z-index: 1;
+  transition: color var(--pf-transition-medium);
   white-space: nowrap;
 }
 
@@ -75,7 +101,7 @@
 }
 
 .pf-tabs__tab--underline.pf-tabs__tab--active {
-  border-bottom-color: var(--pf-tabs-text);
+  /* The sliding indicator draws the underline; keep the transparent border for spacing */
   color: var(--pf-tabs-text);
 }
 
@@ -89,8 +115,7 @@
 }
 
 .pf-tabs__tab--pills.pf-tabs__tab--active {
-  background: var(--pf-tabs-bg);
-  box-shadow: var(--pf-tabs-elevation-tab-active-shadow, var(--pf-elevation-tab-active-shadow));
+  /* The sliding indicator draws the pill background */
   color: var(--pf-tabs-text);
 }
 
@@ -106,7 +131,8 @@
 }
 
 @media (prefers-reduced-motion: reduce) {
-  .pf-tabs__tab {
+  .pf-tabs__tab,
+  .pf-tabs__indicator {
     transition: none;
   }
 }

package/dist/components/Tabs/Tabs2.js

@@ -1,8 +1,9 @@
 import { cx } from "../../utils/cx.js";
 import './Tabs.css';/* empty css     */
-import { forwardRef, useId, useMemo, useRef, useState } from "react";
+import { forwardRef, useEffect, useId, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/Tabs/Tabs.tsx
+var useIsomorphicLayoutEffect = typeof document !== "undefined" ? useLayoutEffect : useEffect;
 function getFirstEnabledValue(items) {
 	return items.find((item) => !item.disabled)?.value;
 }
@@ -13,6 +14,39 @@ var Tabs = forwardRef(function Tabs({ className, items, value, defaultValue, onV
 	const selectedValue = isControlled ? value : internalValue;
 	const selectedItem = useMemo(() => items.find((item) => item.value === selectedValue && !item.disabled) ?? items.find((item) => !item.disabled), [items, selectedValue]);
 	const buttonRefs = useRef([]);
+	const listRef = useRef(null);
+	const [indicator, setIndicator] = useState(null);
+	useIsomorphicLayoutEffect(() => {
+		const list = listRef.current;
+		const activeIndex = items.findIndex((item) => item.value === selectedItem?.value);
+		const activeButton = buttonRefs.current[activeIndex];
+		if (!list || !activeButton) {
+			setIndicator(null);
+			return;
+		}
+		const measure = () => {
+			const listRect = list.getBoundingClientRect();
+			const tabRect = activeButton.getBoundingClientRect();
+			setIndicator({
+				left: tabRect.left - listRect.left + list.scrollLeft,
+				width: tabRect.width,
+				top: tabRect.top - listRect.top,
+				height: tabRect.height
+			});
+		};
+		measure();
+		if (typeof ResizeObserver === "undefined") return;
+		const observer = new ResizeObserver(measure);
+		observer.observe(list);
+		observer.observe(activeButton);
+		return () => observer.disconnect();
+	}, [
+		items,
+		selectedItem?.value,
+		variant,
+		size,
+		fullWidth
+	]);
 	const setSelectedValue = (nextValue) => {
 		if (!isControlled) setInternalValue(nextValue);
 		onValueChange?.(nextValue);
@@ -37,11 +71,24 @@ var Tabs = forwardRef(function Tabs({ className, items, value, defaultValue, onV
 		ref,
 		className: cx("pf-tabs", className),
 		...props,
-		children: [/* @__PURE__ */ jsx("div", {
+		children: [/* @__PURE__ */ jsxs("div", {
+			ref: listRef,
 			className: cx("pf-tabs__list", `pf-tabs__list--${variant}`, `pf-tabs__list--${size}`, fullWidth && "pf-tabs__list--full-width"),
 			role: "tablist",
 			"aria-orientation": "horizontal",
-			children: items.map((item, index) => {
+			children: [indicator ? /* @__PURE__ */ jsx("span", {
+				"aria-hidden": true,
+				className: cx("pf-tabs__indicator", `pf-tabs__indicator--${variant}`),
+				style: variant === "pills" ? {
+					left: indicator.left,
+					width: indicator.width,
+					top: indicator.top,
+					height: indicator.height
+				} : {
+					left: indicator.left,
+					width: indicator.width
+				}
+			}) : null, items.map((item, index) => {
 				const isSelected = item.value === selectedItem?.value;
 				const tabId = `${baseId}-tab-${item.value}`;
 				const panelId = `${baseId}-panel-${item.value}`;
@@ -80,7 +127,7 @@ var Tabs = forwardRef(function Tabs({ className, items, value, defaultValue, onV
 					},
 					children: item.label
 				}, item.value);
-			})
+			})]
 		}), selectedItem ? /* @__PURE__ */ jsx("div", {
 			id: `${baseId}-panel-${selectedItem.value}`,
 			className: "pf-tabs__panel",

package/dist/components/Tag/Tag.css

@@ -43,7 +43,7 @@
   display: inline-flex;
   height: 18px;
   justify-content: center;
-  margin-right: -2px;
+  margin-inline-end: -2px;
   padding: 0;
   width: 18px;
 }