@pitchfork-ui/react 0.2.0 → 0.6.0

package/dist/components/Accordion/Accordion.css

@@ -0,0 +1,85 @@
+.pf-accordion {
+  border: 1px solid var(--pf-accordion-border);
+  border-radius: var(--radius-md);
+  overflow: hidden;
+}
+
+.pf-accordion__item + .pf-accordion__item {
+  border-top: 1px solid var(--pf-accordion-border);
+}
+
+.pf-accordion__heading {
+  margin: 0;
+  font-size: inherit;
+  font-weight: inherit;
+}
+
+.pf-accordion__trigger {
+  align-items: center;
+  background: transparent;
+  border: 0;
+  color: var(--pf-accordion-trigger-text);
+  cursor: pointer;
+  display: flex;
+  font: inherit;
+  font-weight: var(--font-weight-medium);
+  gap: var(--space-3);
+  justify-content: space-between;
+  padding: var(--space-3) var(--space-4);
+  text-align: start;
+  width: 100%;
+}
+
+.pf-accordion__trigger:hover:not(:disabled) {
+  background: var(--pf-accordion-trigger-bg-hover);
+}
+
+.pf-accordion__trigger:focus-visible {
+  box-shadow: var(--pf-focus-ring);
+  outline: none;
+}
+
+.pf-accordion__trigger:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+.pf-accordion__icon {
+  align-items: center;
+  color: var(--pf-accordion-icon);
+  display: inline-flex;
+  flex-shrink: 0;
+  transition: transform var(--pf-transition-fast);
+}
+
+.pf-accordion__item--open .pf-accordion__icon {
+  transform: rotate(180deg);
+}
+
+/* Animate open/close height with the grid-template-rows 0fr → 1fr technique */
+.pf-accordion__panel {
+  display: grid;
+  grid-template-rows: 0fr;
+  transition: grid-template-rows var(--pf-transition-medium);
+}
+
+.pf-accordion__panel--open {
+  grid-template-rows: 1fr;
+}
+
+.pf-accordion__content {
+  min-height: 0;
+  overflow: hidden;
+  color: var(--pf-accordion-content-text);
+}
+
+.pf-accordion__content-inner {
+  padding: 0 var(--space-4) var(--space-4);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .pf-accordion__panel,
+  .pf-accordion__icon {
+    transition: none;
+  }
+}

package/dist/components/Accordion/Accordion2.js

@@ -0,0 +1,96 @@
+import { Keys } from "../../a11y/index.js";
+import { useControllableState } from "../../hooks/useControllableState.js";
+import { cx } from "../../utils/cx.js";
+import { Icon } from "../Icon/Icon2.js";
+import './Accordion.css';/* empty css          */
+import { forwardRef, useId, useRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/Accordion/Accordion.tsx
+var Accordion = forwardRef(function Accordion({ className, items, type = "single", value, defaultValue, onValueChange, headingLevel = 3, ...props }, ref) {
+	const baseId = useId();
+	const [expanded = [], setExpanded] = useControllableState({
+		value,
+		defaultValue: defaultValue ?? [],
+		onChange: onValueChange
+	});
+	const triggerRefs = useRef([]);
+	const toggle = (itemValue) => {
+		const isOpen = expanded.includes(itemValue);
+		if (type === "single") setExpanded(isOpen ? [] : [itemValue]);
+		else setExpanded(isOpen ? expanded.filter((v) => v !== itemValue) : [...expanded, itemValue]);
+	};
+	const enabledIndexes = items.map((item, index) => ({
+		item,
+		index
+	})).filter(({ item }) => !item.disabled).map(({ index }) => index);
+	const onTriggerKeyDown = (event, index) => {
+		if (enabledIndexes.length === 0) return;
+		const position = enabledIndexes.indexOf(index);
+		let target;
+		if (event.key === Keys.ArrowDown) target = enabledIndexes[(position + 1) % enabledIndexes.length];
+		else if (event.key === Keys.ArrowUp) target = enabledIndexes[(position - 1 + enabledIndexes.length) % enabledIndexes.length];
+		else if (event.key === Keys.Home) target = enabledIndexes[0];
+		else if (event.key === Keys.End) target = enabledIndexes[enabledIndexes.length - 1];
+		if (target !== void 0) {
+			event.preventDefault();
+			triggerRefs.current[target]?.focus();
+		}
+	};
+	const Heading = `h${headingLevel}`;
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		className: cx("pf-accordion", className),
+		...props,
+		children: items.map((item, index) => {
+			const isOpen = expanded.includes(item.value);
+			const triggerId = `${baseId}-trigger-${item.value}`;
+			const panelId = `${baseId}-panel-${item.value}`;
+			return /* @__PURE__ */ jsxs("div", {
+				className: cx("pf-accordion__item", isOpen && "pf-accordion__item--open"),
+				children: [/* @__PURE__ */ jsx(Heading, {
+					className: "pf-accordion__heading",
+					children: /* @__PURE__ */ jsxs("button", {
+						ref: (element) => {
+							triggerRefs.current[index] = element;
+						},
+						type: "button",
+						id: triggerId,
+						className: "pf-accordion__trigger",
+						"aria-expanded": isOpen,
+						"aria-controls": panelId,
+						disabled: item.disabled,
+						onClick: () => toggle(item.value),
+						onKeyDown: (event) => onTriggerKeyDown(event, index),
+						children: [/* @__PURE__ */ jsx("span", {
+							className: "pf-accordion__title",
+							children: item.title
+						}), /* @__PURE__ */ jsx("span", {
+							className: "pf-accordion__icon",
+							"aria-hidden": true,
+							children: /* @__PURE__ */ jsx(Icon, {
+								name: "chevron-down",
+								"aria-hidden": true
+							})
+						})]
+					})
+				}), /* @__PURE__ */ jsx("div", {
+					className: cx("pf-accordion__panel", isOpen && "pf-accordion__panel--open"),
+					children: /* @__PURE__ */ jsx("div", {
+						id: panelId,
+						role: "region",
+						"aria-labelledby": triggerId,
+						className: "pf-accordion__content",
+						...isOpen ? {} : { inert: true },
+						children: /* @__PURE__ */ jsx("div", {
+							className: "pf-accordion__content-inner",
+							children: item.content
+						})
+					})
+				})]
+			}, item.value);
+		})
+	});
+});
+Accordion.displayName = "Accordion";
+//#endregion
+export { Accordion };

package/dist/components/Alert/Alert.css

@@ -73,7 +73,7 @@
   display: inline-flex;
   font-size: var(--font-size-md);
   justify-content: center;
-  margin-left: auto;
+  margin-inline-start: auto;
   padding: 0;
 }
 
@@ -81,3 +81,31 @@
   box-shadow: var(--pf-alert-focus-ring, var(--pf-focus-ring));
   outline: none;
 }
+
+/* Exit: fade and collapse so surrounding content reflows when dismissed. */
+.pf-alert--exiting {
+  animation: pf-alert-out var(--duration-moderate) var(--easing-accelerate) forwards;
+  overflow: hidden;
+  pointer-events: none;
+}
+
+@keyframes pf-alert-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-alert--exiting {
+    animation: none;
+  }
+}

package/dist/components/Alert/Alert2.js

@@ -1,3 +1,4 @@
+import { useExitAnimation } from "../../hooks/useExitAnimation.js";
 import { cx } from "../../utils/cx.js";
 import { Icon } from "../Icon/Icon2.js";
 import './Alert.css';/* empty css      */
@@ -22,9 +23,10 @@ var Alert = forwardRef(({ className, variant = "info", heading, description, dis
 		"aria-hidden": true
 	});
 	const body = children ?? description;
+	const { isExiting, startExit } = useExitAnimation({ onExited: onDismiss });
 	return /* @__PURE__ */ jsxs("div", {
 		ref,
-		className: cx("pf-alert", `pf-alert--${variant}`, className),
+		className: cx("pf-alert", `pf-alert--${variant}`, isExiting && "pf-alert--exiting", className),
 		role: variantRole[variant],
 		...props,
 		children: [
@@ -47,7 +49,7 @@ var Alert = forwardRef(({ className, variant = "info", heading, description, dis
 				type: "button",
 				className: "pf-alert__dismiss",
 				"aria-label": "Dismiss alert",
-				onClick: () => onDismiss?.(),
+				onClick: startExit,
 				children: /* @__PURE__ */ jsx(Icon, {
 					name: "circle-xmark",
 					"aria-hidden": true

package/dist/components/Avatar/Avatar.css

@@ -75,7 +75,7 @@
   top: var(--pf-avatar-status-offset);
   height: var(--pf-avatar-status-size, 10px);
   position: absolute;
-  right: var(--pf-avatar-status-offset);
+  inset-inline-end: var(--pf-avatar-status-offset);
   width: var(--pf-avatar-status-size, 10px);
   z-index: 1;
 }

package/dist/components/BadgeGroup/BadgeGroup.css

@@ -26,13 +26,13 @@
 }
 
 .pf-badge-group--leading .pf-badge-group__text {
-  margin-left: -1px;
-  padding-left: calc(var(--space-2) + 2px);
+  margin-inline-start: -1px;
+  padding-inline-start: calc(var(--space-2) + 2px);
 }
 
 .pf-badge-group--trailing .pf-badge-group__text {
-  margin-right: -1px;
-  padding-right: calc(var(--space-2) + 2px);
+  margin-inline-end: -1px;
+  padding-inline-end: calc(var(--space-2) + 2px);
 }
 
 .pf-badge-group--leading .pf-badge-group__badge {

package/dist/components/Button/Button.css

@@ -12,10 +12,10 @@
   min-height: 40px;
   text-decoration: none;
   transition:
-    background-color 120ms ease,
-    border-color 120ms ease,
-    color 120ms ease,
-    box-shadow 120ms ease;
+    background-color var(--pf-transition-fast),
+    border-color var(--pf-transition-fast),
+    color var(--pf-transition-fast),
+    box-shadow var(--pf-transition-fast);
 }
 
 .pf-button:focus-visible {

package/dist/components/ButtonGroup/ButtonGroup.css

@@ -14,7 +14,7 @@
   gap: var(--space-2);
   justify-content: center;
   line-height: 1;
-  margin-left: -1px;
+  margin-inline-start: -1px;
   min-height: 40px;
   padding: 0 var(--space-4);
   position: relative;
@@ -28,7 +28,7 @@
 .pf-button-group__button:first-child {
   border-bottom-left-radius: var(--radius-md);
   border-top-left-radius: var(--radius-md);
-  margin-left: 0;
+  margin-inline-start: 0;
 }
 
 .pf-button-group__button:last-child {

package/dist/components/Carousel/Carousel.css

@@ -18,7 +18,8 @@
 
 .pf-carousel__track {
   display: flex;
-  transition: transform var(--pf-carousel-transition-duration, 180ms) ease-out;
+  transition: transform var(--pf-carousel-transition-duration, var(--duration-moderate))
+    var(--easing-decelerate);
   width: 100%;
 }
 
@@ -95,7 +96,8 @@
   cursor: pointer;
   height: var(--pf-carousel-indicator-size, 8px);
   padding: 0;
-  transition: all var(--pf-carousel-indicator-transition-duration, 120ms) ease-out;
+  transition: all var(--pf-carousel-indicator-transition-duration, var(--duration-fast))
+    var(--easing-decelerate);
   width: var(--pf-carousel-indicator-size, 8px);
 }
 

package/dist/components/Carousel/Carousel2.js

@@ -45,88 +45,101 @@ var Carousel = forwardRef(function Carousel({ className, slides, initialIndex =
 	return /* @__PURE__ */ jsxs("div", {
 		ref,
 		className: cx("pf-carousel", className),
+		role: "region",
+		"aria-roledescription": "carousel",
 		"aria-label": ariaLabel,
 		...props,
-		children: [/* @__PURE__ */ jsx("div", {
-			className: "pf-carousel__viewport",
-			role: "region",
-			"aria-roledescription": "carousel",
-			"aria-label": slideLabel,
-			children: totalSlides === 0 ? /* @__PURE__ */ jsx("div", {
-				className: "pf-carousel__empty",
-				role: "status",
-				children: "Add at least one slide."
-			}) : /* @__PURE__ */ jsx("div", {
-				className: "pf-carousel__track",
-				style: { transform: `translateX(-${resolvedActiveIndex * 100}%)` },
-				children: slides.map((slide, index) => /* @__PURE__ */ jsx("div", {
-					className: "pf-carousel__slide",
-					role: "group",
-					"aria-roledescription": "slide",
-					"aria-label": `Slide ${index + 1} of ${totalSlides}`,
-					"aria-hidden": index !== resolvedActiveIndex,
-					children: slide
-				}, `slide-${index}`))
-			})
-		}), /* @__PURE__ */ jsxs("div", {
-			className: "pf-carousel__controls",
-			onKeyDown: (event) => {
-				if (event.key === "ArrowLeft") {
-					event.preventDefault();
-					goToIndex(resolvedActiveIndex - 1);
-				} else if (event.key === "ArrowRight") {
-					event.preventDefault();
-					goToIndex(resolvedActiveIndex + 1);
-				}
-			},
-			children: [
-				/* @__PURE__ */ jsx("button", {
-					type: "button",
-					className: "pf-carousel__nav",
-					"aria-label": "Previous slide",
-					disabled: isPrevDisabled || totalSlides < 2,
-					onClick: () => {
-						goToIndex(resolvedActiveIndex - 1);
-					},
-					children: /* @__PURE__ */ jsx(Icon, {
-						name: "square-caret-left",
-						"aria-hidden": true
-					})
-				}),
-				showIndicators && totalSlides > 1 ? /* @__PURE__ */ jsx("div", {
-					className: "pf-carousel__indicators",
-					"aria-label": "Slide indicators",
-					children: slides.map((_, index) => {
-						const isActive = index === resolvedActiveIndex;
-						return /* @__PURE__ */ jsx("button", {
-							type: "button",
-							className: cx("pf-carousel__indicator", isActive && "pf-carousel__indicator--active"),
-							"aria-label": `Go to slide ${index + 1}`,
-							"aria-current": isActive ? "true" : void 0,
-							onClick: () => {
-								goToIndex(index);
-							}
-						}, `indicator-${index}`);
+		children: [
+			/* @__PURE__ */ jsx("div", {
+				className: "pf-carousel__viewport",
+				children: totalSlides === 0 ? /* @__PURE__ */ jsx("div", {
+					className: "pf-carousel__empty",
+					role: "status",
+					children: "Add at least one slide."
+				}) : /* @__PURE__ */ jsx("div", {
+					className: "pf-carousel__track",
+					style: { transform: `translateX(-${resolvedActiveIndex * 100}%)` },
+					children: slides.map((slide, index) => {
+						const isInactive = index !== resolvedActiveIndex;
+						return /* @__PURE__ */ jsx("div", {
+							className: "pf-carousel__slide",
+							role: "group",
+							"aria-roledescription": "slide",
+							"aria-label": `Slide ${index + 1} of ${totalSlides}`,
+							"aria-hidden": isInactive,
+							...isInactive ? { inert: true } : {},
+							children: slide
+						}, `slide-${index}`);
 					})
-				}) : /* @__PURE__ */ jsx("span", {
-					className: "pf-carousel__indicator-spacer",
-					"aria-hidden": true
-				}),
-				/* @__PURE__ */ jsx("button", {
-					type: "button",
-					className: "pf-carousel__nav",
-					"aria-label": "Next slide",
-					disabled: isNextDisabled || totalSlides < 2,
-					onClick: () => {
+				})
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "pf-sr-only",
+				"aria-live": "polite",
+				"aria-atomic": "true",
+				children: totalSlides > 0 ? slideLabel : ""
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "pf-carousel__controls",
+				onKeyDown: (event) => {
+					if (event.key === "ArrowLeft") {
+						event.preventDefault();
+						goToIndex(resolvedActiveIndex - 1);
+					} else if (event.key === "ArrowRight") {
+						event.preventDefault();
 						goToIndex(resolvedActiveIndex + 1);
-					},
-					children: /* @__PURE__ */ jsx(Icon, {
-						name: "square-caret-right",
+					}
+				},
+				children: [
+					/* @__PURE__ */ jsx("button", {
+						type: "button",
+						className: "pf-carousel__nav",
+						"aria-label": "Previous slide",
+						disabled: isPrevDisabled || totalSlides < 2,
+						onClick: () => {
+							goToIndex(resolvedActiveIndex - 1);
+						},
+						children: /* @__PURE__ */ jsx(Icon, {
+							name: "square-caret-left",
+							"aria-hidden": true
+						})
+					}),
+					showIndicators && totalSlides > 1 ? /* @__PURE__ */ jsx("div", {
+						className: "pf-carousel__indicators",
+						role: "group",
+						"aria-label": "Slide indicators",
+						children: slides.map((_, index) => {
+							const isActive = index === resolvedActiveIndex;
+							return /* @__PURE__ */ jsx("button", {
+								type: "button",
+								className: cx("pf-carousel__indicator", isActive && "pf-carousel__indicator--active"),
+								"aria-label": `Go to slide ${index + 1}`,
+								"aria-current": isActive ? "true" : void 0,
+								onClick: () => {
+									goToIndex(index);
+								}
+							}, `indicator-${index}`);
+						})
+					}) : /* @__PURE__ */ jsx("span", {
+						className: "pf-carousel__indicator-spacer",
 						"aria-hidden": true
+					}),
+					/* @__PURE__ */ jsx("button", {
+						type: "button",
+						className: "pf-carousel__nav",
+						"aria-label": "Next slide",
+						disabled: isNextDisabled || totalSlides < 2,
+						onClick: () => {
+							goToIndex(resolvedActiveIndex + 1);
+						},
+						children: /* @__PURE__ */ jsx(Icon, {
+							name: "square-caret-right",
+							"aria-hidden": true
+						})
 					})
-				})
-			]
-		})]
+				]
+			})
+		]
 	});
 });
 Carousel.displayName = "Carousel";

package/dist/components/CodeSnippet/CodeSnippet.css

@@ -132,8 +132,8 @@
 .pf-code-snippet__line-number {
   color: var(--pf-code-snippet-line-number, var(--color-gray-400));
   min-width: 2.5ch;
-  padding-right: var(--space-3);
-  text-align: right;
+  padding-inline-end: var(--space-3);
+  text-align: end;
   user-select: none;
   vertical-align: top;
 }

package/dist/components/ContentDivider/ContentDivider.css

@@ -7,8 +7,8 @@
 }
 
 .pf-content-divider--inset {
-  padding-left: var(--space-2);
-  padding-right: var(--space-2);
+  padding-inline-start: var(--space-2);
+  padding-inline-end: var(--space-2);
 }
 
 .pf-content-divider__line {

package/dist/components/DatePicker/DatePicker.css

@@ -17,7 +17,7 @@
   min-height: 40px;
   min-width: 0;
   padding: 0 var(--space-3);
-  text-align: left;
+  text-align: start;
 }
 
 .pf-date-picker__trigger:hover:not(:disabled) {

package/dist/components/DatePicker/DatePicker2.js

@@ -1,10 +1,10 @@
 import { Keys, composeDescribedBy } 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 { useDisclosure } from "../../hooks/useDisclosure.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 { Calendar } from "../Calendar/Calendar2.js";
 import './DatePicker.css';/* empty css           */
 import { forwardRef, useId, useMemo, useRef, useState } from "react";

package/dist/components/Dropdown/Dropdown.css

@@ -41,7 +41,7 @@
   color: var(--pf-dropdown-text-muted);
   display: inline-flex;
   height: var(--pf-dropdown-icon-size);
-  transition: transform 140ms ease;
+  transition: transform var(--pf-transition-fast);
   width: var(--pf-dropdown-icon-size);
 }
 
@@ -65,6 +65,19 @@
   padding: var(--space-1);
   position: fixed;
   z-index: 1000;
+  transform-origin: top center;
+  animation: pf-dropdown-menu-in var(--duration-fast) var(--easing-decelerate);
+}
+
+@keyframes pf-dropdown-menu-in {
+  from {
+    opacity: 0;
+    transform: translateY(-4px) scale(0.97);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
 }
 
 .pf-dropdown__item {
@@ -79,7 +92,7 @@
   justify-content: space-between;
   min-height: 34px;
   padding: 0 var(--space-2);
-  text-align: left;
+  text-align: start;
   width: 100%;
 }
 
@@ -129,4 +142,8 @@
   .pf-dropdown__chevron {
     transition: none;
   }
+
+  .pf-dropdown__menu {
+    animation: none;
+  }
 }

package/dist/components/Dropdown/Dropdown2.js

@@ -1,10 +1,10 @@
 import { Keys, isActivationKey } from "../../a11y/index.js";
-import { cx } from "../../utils/cx.js";
-import { Icon } from "../Icon/Icon2.js";
 import { useAnchoredPosition } from "../../hooks/useAnchoredPosition.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 './Dropdown.css';/* empty css         */
 import { forwardRef, useEffect, useId, useRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -85,7 +85,6 @@ var Dropdown = forwardRef(({ label = "Actions", items, align = "start", disabled
 			className: "pf-dropdown__trigger",
 			"aria-haspopup": "menu",
 			"aria-expanded": isOpen,
-			"aria-controls": isOpen ? menuId : void 0,
 			onClick: () => {
 				disclosure.toggle();
 			},

package/dist/components/GaugeChart/GaugeChart.css

@@ -15,7 +15,24 @@
 }
 
 .pf-gauge__fill {
-  transition: stroke-dasharray var(--pf-transition-medium, 180ms ease);
+  stroke-dashoffset: var(--pf-gauge-offset);
+  /* Animate the arc filling from empty to its value on mount, and smoothly
+     when the value changes afterward. */
+  animation: pf-gauge-fill var(--duration-slow) var(--easing-decelerate);
+  transition: stroke-dashoffset var(--pf-transition-medium);
+}
+
+@keyframes pf-gauge-fill {
+  from {
+    stroke-dashoffset: var(--pf-gauge-circumference);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .pf-gauge__fill {
+    animation: none;
+    transition: none;
+  }
 }
 
 .pf-gauge__center {