@pitchfork-ui/react 0.1.9 → 0.6.0

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

package/dist/components/Metrics/Metrics.css

@@ -0,0 +1,106 @@
+.pf-metric-grid {
+  display: grid;
+  gap: var(--space-4);
+  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+}
+
+.pf-metric-card {
+  background: var(--pf-metric-bg);
+  border: 1px solid var(--pf-metric-border);
+  border-radius: var(--radius-md);
+  display: grid;
+  gap: var(--space-3);
+  padding: var(--space-3);
+}
+
+@media (min-width: 768px) {
+  .pf-metric-card {
+    padding: var(--space-4);
+  }
+}
+
+.pf-metric-card__header {
+  align-items: start;
+  display: flex;
+  gap: var(--space-3);
+  justify-content: space-between;
+}
+
+.pf-metric-card__heading-wrap {
+  align-items: center;
+  display: inline-flex;
+  gap: var(--space-2);
+  min-width: 0;
+}
+
+.pf-metric-card__heading {
+  color: var(--pf-metric-text-muted);
+  font-size: var(--font-size-sm);
+  margin: 0;
+}
+
+.pf-metric-card__icon {
+  align-items: center;
+  color: var(--pf-metric-text-muted);
+  display: inline-flex;
+  font-size: var(--font-size-sm);
+  justify-content: center;
+}
+
+.pf-metric-card__action {
+  align-items: center;
+  display: inline-flex;
+  gap: var(--space-2);
+}
+
+.pf-metric-card__body {
+  align-items: baseline;
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-2);
+}
+
+.pf-metric-card__value {
+  color: var(--pf-metric-text);
+  font-size: clamp(var(--font-size-3xl), 3vw, var(--font-size-4xl));
+  font-weight: var(--font-weight-semibold);
+  letter-spacing: -0.02em;
+  line-height: 1.05;
+  margin: 0;
+}
+
+.pf-metric-card__trend {
+  align-items: center;
+  border-radius: var(--radius-full);
+  display: inline-flex;
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-medium);
+  gap: var(--space-1);
+  padding: var(--space-1) var(--space-2);
+}
+
+.pf-metric-card__trend-symbol {
+  font-size: var(--font-size-2xs);
+  line-height: 1;
+}
+
+.pf-metric-card__trend--positive {
+  background: color-mix(in srgb, var(--pf-metric-success-bg) 55%, var(--color-base-white));
+  color: var(--pf-metric-success-text);
+}
+
+.pf-metric-card__trend--negative {
+  background: color-mix(in srgb, var(--pf-metric-danger-bg) 55%, var(--color-base-white));
+  color: var(--pf-metric-danger-text);
+}
+
+.pf-metric-card__trend--neutral {
+  background: var(--pf-metric-bg-subtle);
+  color: var(--pf-metric-text-muted);
+}
+
+.pf-metric-card__description {
+  color: var(--pf-metric-text-muted);
+  font-size: var(--font-size-sm);
+  margin: 0;
+}

package/dist/{index64.js → components/Metrics/Metrics2.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 './Metrics.css';/* empty css        */
 import { forwardRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/Metrics/Metrics.tsx

package/dist/components/Modal/Modal.css

@@ -0,0 +1,198 @@
+.pf-modal__portal {
+  inset: 0;
+  position: fixed;
+  z-index: 1000;
+}
+
+.pf-modal__overlay {
+  background: var(--pf-modal-overlay-backdrop, var(--pf-overlay-backdrop));
+  inset: 0;
+  position: absolute;
+}
+
+.pf-modal__viewport {
+  align-items: end;
+  display: flex;
+  inset: 0;
+  justify-content: center;
+  overflow-y: auto;
+  padding: var(--space-2);
+  position: relative;
+}
+
+@media (min-width: 768px) {
+  .pf-modal__viewport {
+    align-items: center;
+    padding: var(--space-4);
+  }
+}
+
+.pf-modal {
+  background: var(--pf-modal-bg);
+  border: 1px solid color-mix(in srgb, var(--pf-modal-border) 85%, transparent);
+  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
+  box-shadow: var(--pf-modal-elevation-overlay-shadow, var(--pf-elevation-overlay-shadow));
+  color: var(--pf-modal-text);
+  display: grid;
+  max-height: 92vh;
+  overflow: hidden;
+  width: 100%;
+}
+
+@media (min-width: 768px) {
+  .pf-modal {
+    border-radius: var(--radius-lg);
+    max-height: min(90vh, 720px);
+  }
+}
+
+.pf-modal:focus-visible {
+  outline: none;
+}
+
+.pf-modal--sm {
+  max-width: 420px;
+}
+
+.pf-modal--md {
+  max-width: 560px;
+}
+
+.pf-modal--lg {
+  max-width: 720px;
+}
+
+.pf-modal__header,
+.pf-modal__footer {
+  align-items: start;
+  display: flex;
+  gap: var(--space-3);
+  justify-content: space-between;
+  padding: var(--space-3);
+}
+
+@media (min-width: 768px) {
+  .pf-modal__header,
+  .pf-modal__body,
+  .pf-modal__footer {
+    padding: var(--space-4);
+  }
+}
+
+.pf-modal__header {
+  border-bottom: 1px solid var(--pf-modal-border);
+}
+
+.pf-modal__footer {
+  border-top: 1px solid var(--pf-modal-border);
+  justify-content: flex-end;
+}
+
+.pf-modal__body {
+  display: grid;
+  gap: var(--space-4);
+  overflow-y: auto;
+  padding: var(--space-3);
+}
+
+.pf-modal__heading-group {
+  display: grid;
+  gap: var(--space-1);
+  min-width: 0;
+}
+
+.pf-modal__title {
+  font-size: var(--font-size-lg);
+  font-weight: var(--font-weight-semibold);
+  line-height: 1.2;
+  margin: 0;
+}
+
+.pf-modal__description {
+  color: var(--pf-modal-text-muted);
+  font-size: var(--font-size-sm);
+  line-height: 1.45;
+  margin: 0;
+}
+
+.pf-modal__close {
+  align-items: center;
+  background: transparent;
+  border: 0;
+  border-radius: var(--radius-sm);
+  color: var(--pf-modal-text-muted);
+  cursor: pointer;
+  display: inline-flex;
+  flex: 0 0 auto;
+  font-size: var(--font-size-lg);
+  height: var(--space-8);
+  justify-content: center;
+  width: var(--space-8);
+}
+
+.pf-modal__close:hover,
+.pf-modal__close:focus-visible {
+  background: var(--pf-modal-bg-subtle);
+  color: var(--pf-modal-text);
+  outline: none;
+}
+
+/* Entrance animation — uses motion tokens via theme aliases */
+@keyframes pf-modal-overlay-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes pf-modal-in {
+  from {
+    opacity: 0;
+    transform: translateY(8px) scale(0.98);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+
+.pf-modal__overlay {
+  animation: pf-modal-overlay-in var(--pf-transition-fast);
+}
+
+.pf-modal {
+  animation: pf-modal-in var(--pf-transition-enter);
+}
+
+/* Exit animation — plays while the dialog is being dismissed (presence handling) */
+@keyframes pf-modal-overlay-out {
+  to {
+    opacity: 0;
+  }
+}
+
+@keyframes pf-modal-out {
+  to {
+    opacity: 0;
+    transform: translateY(8px) scale(0.98);
+  }
+}
+
+.pf-modal__overlay--exiting {
+  animation: pf-modal-overlay-out var(--pf-transition-fast) forwards;
+}
+
+.pf-modal--exiting {
+  animation: pf-modal-out var(--pf-transition-fast) forwards;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .pf-modal__overlay,
+  .pf-modal,
+  .pf-modal__overlay--exiting,
+  .pf-modal--exiting {
+    animation: none;
+  }
+}

package/dist/{index66.js → components/Modal/Modal2.js}

@@ -1,7 +1,8 @@
-import { cx } from "./index4.js";
-import { Icon } from "./index6.js";
-import { useFocusTrap } from "./index34.js";
-/* empty css        */
+import { useFocusTrap } from "../../hooks/useFocusTrap.js";
+import { usePresence } from "../../hooks/usePresence.js";
+import { cx } from "../../utils/cx.js";
+import { Icon } from "../Icon/Icon2.js";
+import './Modal.css';/* empty css      */
 import { forwardRef, useEffect, useId, useImperativeHandle, useRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { createPortal } from "react-dom";
@@ -28,25 +29,26 @@ var Modal = forwardRef(function Modal({ className, open, onOpenChange, title, de
 	const titleId = useId();
 	const descriptionId = useId();
 	const dialogRef = useRef(null);
+	const { isMounted, isExiting } = usePresence(open);
 	useImperativeHandle(ref, () => dialogRef.current, []);
 	useEffect(() => {
-		if (!open || typeof document === "undefined") return;
+		if (!isMounted || typeof document === "undefined") return;
 		const originalOverflow = document.body.style.overflow;
 		document.body.style.overflow = "hidden";
 		return () => {
 			document.body.style.overflow = originalOverflow;
 		};
-	}, [open]);
+	}, [isMounted]);
 	useFocusTrap({
 		containerRef: dialogRef,
 		enabled: open,
 		onEscape: () => onOpenChange?.(false)
 	});
-	if (!open || typeof document === "undefined") return null;
+	if (!isMounted || typeof document === "undefined") return null;
 	return createPortal(/* @__PURE__ */ jsxs("div", {
 		className: "pf-modal__portal",
 		children: [/* @__PURE__ */ jsx("div", {
-			className: "pf-modal__overlay",
+			className: cx("pf-modal__overlay", isExiting && "pf-modal__overlay--exiting"),
 			onClick: () => {
 				if (closeOnOverlayClick) onOpenChange?.(false);
 			}
@@ -54,7 +56,7 @@ var Modal = forwardRef(function Modal({ className, open, onOpenChange, title, de
 			className: "pf-modal__viewport",
 			children: /* @__PURE__ */ jsxs("div", {
 				ref: dialogRef,
-				className: cx("pf-modal", `pf-modal--${size}`, className),
+				className: cx("pf-modal", `pf-modal--${size}`, isExiting && "pf-modal--exiting", className),
 				role: "dialog",
 				"aria-modal": "true",
 				"aria-labelledby": title ? titleId : void 0,

package/dist/components/MultiSelect/MultiSelect.css

@@ -0,0 +1,174 @@
+.pf-multi-select {
+  position: relative;
+}
+
+.pf-multi-select__trigger {
+  align-items: center;
+  background: var(--pf-multiselect-bg);
+  border: 1px solid var(--pf-multiselect-border);
+  border-radius: var(--radius-md);
+  color: var(--pf-multiselect-text);
+  cursor: pointer;
+  display: flex;
+  font: inherit;
+  gap: var(--space-2);
+  justify-content: space-between;
+  min-height: 40px;
+  padding: var(--space-1) var(--space-2) var(--space-1) var(--space-2);
+  text-align: start;
+  width: 100%;
+  transition:
+    background 0.2s,
+    border 0.2s,
+    color 0.2s,
+    opacity 0.2s;
+}
+
+.pf-multi-select__trigger:disabled,
+.pf-multi-select__trigger[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-multi-select__trigger:focus {
+  outline: none;
+}
+
+.pf-multi-select__trigger:focus-visible {
+  border-color: var(--pf-multiselect-focus-border);
+  box-shadow: var(--pf-multiselect-focus-ring, var(--pf-focus-ring));
+}
+
+.pf-multi-select__trigger--open {
+  border-color: var(--pf-multiselect-focus-border);
+}
+
+.pf-multi-select__trigger--invalid {
+  border-color: var(--pf-multiselect-invalid-border);
+}
+
+.pf-multi-select__placeholder {
+  color: var(--pf-multiselect-text-muted);
+}
+
+.pf-multi-select__chips {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-1);
+}
+
+.pf-multi-select__chip {
+  background: var(--pf-multiselect-bg-subtle);
+  border-radius: var(--radius-full);
+  color: var(--pf-multiselect-text);
+  font-size: var(--font-size-sm);
+  line-height: 1;
+  padding: 7px var(--space-2);
+}
+
+.pf-multi-select__icon {
+  align-items: center;
+  color: var(--pf-multiselect-text);
+  display: inline-flex;
+  flex-shrink: 0;
+  height: 20px;
+  justify-content: center;
+  width: 20px;
+  transform-origin: center;
+  transition: transform var(--pf-transition-fast);
+}
+
+.pf-multi-select__icon svg {
+  display: block;
+  height: 16px;
+  width: 16px;
+}
+
+.pf-multi-select__icon--open {
+  transform: rotate(180deg);
+}
+
+.pf-multi-select__menu {
+  background: var(--pf-multiselect-bg);
+  border: 1px solid var(--pf-multiselect-border);
+  border-radius: var(--radius-md);
+  box-shadow: var(--pf-multiselect-elevation-popover-shadow, var(--pf-elevation-popover-shadow));
+  list-style: none;
+  margin: 0;
+  max-height: 240px;
+  overflow: auto;
+  padding: var(--space-1);
+  position: fixed;
+  z-index: 1000;
+  transform-origin: top center;
+  animation: pf-multi-select-menu-in var(--duration-fast) var(--easing-decelerate);
+}
+
+@keyframes pf-multi-select-menu-in {
+  from {
+    opacity: 0;
+    transform: translateY(-4px) scaleY(0.96);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scaleY(1);
+  }
+}
+
+.pf-multi-select__option {
+  align-items: center;
+  border-radius: var(--radius-sm);
+  color: var(--pf-multiselect-text);
+  cursor: pointer;
+  display: flex;
+  justify-content: space-between;
+  gap: var(--space-2);
+  padding: var(--space-2) var(--space-3);
+}
+
+.pf-multi-select__option:hover,
+.pf-multi-select__option--active {
+  background: var(--pf-multiselect-active-bg);
+  color: var(--pf-multiselect-active-text);
+}
+
+.pf-multi-select__option--selected {
+  font-weight: var(--font-weight-medium);
+}
+
+.pf-multi-select__option--disabled {
+  background: transparent;
+  color: var(--pf-multiselect-text-muted);
+  cursor: not-allowed;
+}
+
+.pf-multi-select__option--disabled:hover {
+  background: transparent;
+  color: var(--pf-multiselect-text-muted);
+}
+
+.pf-multi-select__check {
+  display: inline-flex;
+  height: 16px;
+  width: 16px;
+}
+
+.pf-multi-select__check svg {
+  display: block;
+  height: 16px;
+  width: 16px;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .pf-multi-select__trigger,
+  .pf-multi-select__icon {
+    transition: none;
+  }
+
+  .pf-multi-select__menu {
+    animation: none;
+  }
+}

package/dist/{index68.js → components/MultiSelect/MultiSelect2.js}

@@ -1,14 +1,14 @@
-import { Keys, composeDescribedBy, isActivationKey } from "./index3.js";
-import { cx } from "./index4.js";
-import { Icon } from "./index6.js";
-import { FieldWrapper } from "./index19.js";
-import { useAnchoredPosition } from "./index30.js";
-import { useComposedRefs } from "./index31.js";
-import { useControllableState } from "./index32.js";
-import { useDisclosure } from "./index33.js";
-import { useListNavigation } from "./index35.js";
-import { useOutsideInteraction } from "./index36.js";
-/* empty css        */
+import { Keys, composeDescribedBy, isActivationKey } from "../../a11y/index.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 './MultiSelect.css';/* empty css            */
 import { forwardRef, useEffect, useId, useMemo, useRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { createPortal } from "react-dom";
@@ -125,7 +125,6 @@ var MultiSelect = forwardRef(({ id, options, value, defaultValue, onValueChange,
 					"aria-haspopup": "listbox",
 					"aria-expanded": isOpen,
 					"aria-required": required || void 0,
-					"aria-controls": isOpen ? listboxId : void 0,
 					"aria-describedby": describedBy,
 					onClick: () => {
 						disclosure.toggle();