@pitchfork-ui/react 0.1.9 → 0.6.0

package/dist/components/Dropdown/Dropdown.css

@@ -0,0 +1,149 @@
+.pf-dropdown {
+  display: inline-flex;
+}
+
+.pf-dropdown__trigger {
+  align-items: center;
+  background: var(--pf-dropdown-button-secondary-bg, var(--pf-button-secondary-bg));
+  border: 1px solid var(--pf-dropdown-button-secondary-border, var(--pf-button-secondary-border));
+  border-radius: var(--radius-md);
+  color: var(--pf-dropdown-button-secondary-text, var(--pf-button-secondary-text));
+  cursor: pointer;
+  display: inline-flex;
+  gap: var(--space-2);
+  min-height: 36px;
+  padding: 0 var(--space-3);
+}
+
+.pf-dropdown__trigger:hover:not(:disabled) {
+  background: var(--pf-dropdown-button-secondary-bg-hover, var(--pf-button-secondary-bg-hover));
+  border-color: var(
+    --pf-dropdown-button-secondary-border-hover,
+    var(--pf-button-secondary-border-hover)
+  );
+}
+
+.pf-dropdown__trigger:focus-visible {
+  box-shadow: var(--pf-dropdown-focus-ring, var(--pf-focus-ring));
+  outline: none;
+}
+
+.pf-dropdown__trigger:disabled,
+.pf-dropdown__trigger[aria-disabled='true'] {
+  background: var(--pf-dropdown-button-secondary-bg-disabled, #f5f5f5);
+  border-color: var(--pf-dropdown-button-secondary-border-disabled, #e0e0e0);
+  color: var(--pf-dropdown-button-secondary-text-disabled, #b0b0b0);
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+
+.pf-dropdown__chevron {
+  color: var(--pf-dropdown-text-muted);
+  display: inline-flex;
+  height: var(--pf-dropdown-icon-size);
+  transition: transform var(--pf-transition-fast);
+  width: var(--pf-dropdown-icon-size);
+}
+
+.pf-dropdown__chevron svg {
+  height: var(--pf-dropdown-icon-size);
+  width: var(--pf-dropdown-icon-size);
+}
+
+.pf-dropdown__chevron--open {
+  transform: rotate(180deg);
+}
+
+.pf-dropdown__menu {
+  background: var(--pf-dropdown-surface-bg, var(--pf-surface-bg));
+  border: 1px solid var(--pf-dropdown-surface-border, var(--pf-surface-border));
+  border-radius: var(--radius-md);
+  box-shadow: var(--shadow-md);
+  display: flex;
+  flex-direction: column;
+  gap: var(--pf-dropdown-menu-gap);
+  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 {
+  align-items: center;
+  background: transparent;
+  border: 0;
+  border-radius: var(--radius-sm);
+  color: var(--pf-dropdown-text);
+  cursor: pointer;
+  display: inline-flex;
+  font: inherit;
+  justify-content: space-between;
+  min-height: 34px;
+  padding: 0 var(--space-2);
+  text-align: start;
+  width: 100%;
+}
+
+.pf-dropdown__item-left {
+  align-items: center;
+  display: inline-flex;
+  gap: var(--space-2);
+}
+
+.pf-dropdown__item-icon {
+  color: var(--pf-dropdown-text-muted);
+  display: inline-flex;
+  height: var(--pf-dropdown-icon-size);
+  width: var(--pf-dropdown-icon-size);
+}
+
+.pf-dropdown__item-icon svg {
+  height: var(--pf-dropdown-icon-size);
+  width: var(--pf-dropdown-icon-size);
+}
+
+.pf-dropdown__item-shortcut {
+  color: var(--pf-dropdown-text-muted);
+  font-size: var(--font-size-xs);
+}
+
+.pf-dropdown__item:hover:not(:disabled),
+.pf-dropdown__item--active {
+  background: var(--pf-dropdown-surface-subtle, var(--pf-surface-subtle));
+}
+
+.pf-dropdown__item--destructive {
+  color: var(--pf-dropdown-text-danger);
+}
+
+.pf-dropdown__item--destructive .pf-dropdown__item-icon {
+  color: var(--pf-dropdown-icon-danger);
+}
+
+.pf-dropdown__item:disabled {
+  color: var(--pf-dropdown-text-muted);
+  cursor: not-allowed;
+  opacity: 0.7;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .pf-dropdown__chevron {
+    transition: none;
+  }
+
+  .pf-dropdown__menu {
+    animation: none;
+  }
+}

package/dist/{index38.js → components/Dropdown/Dropdown2.js}

@@ -1,11 +1,11 @@
-import { Keys, isActivationKey } from "./index3.js";
-import { cx } from "./index4.js";
-import { Icon } from "./index6.js";
-import { useAnchoredPosition } from "./index30.js";
-import { useDisclosure } from "./index33.js";
-import { useListNavigation } from "./index35.js";
-import { useOutsideInteraction } from "./index36.js";
-/* empty css        */
+import { Keys, isActivationKey } from "../../a11y/index.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";
 import { createPortal } from "react-dom";
@@ -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/EmptyState/EmptyState.css

@@ -0,0 +1,72 @@
+.pf-empty-state {
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-3);
+  padding: var(--space-8);
+  text-align: center;
+}
+
+.pf-empty-state--sm {
+  gap: var(--space-2);
+  padding: var(--space-4);
+}
+
+.pf-empty-state--lg {
+  gap: var(--space-4);
+  padding: var(--space-10);
+}
+
+.pf-empty-state__icon {
+  color: var(--pf-empty-state-icon);
+  display: inline-flex;
+  font-size: var(--font-size-3xl);
+  line-height: 1;
+  margin-bottom: var(--space-1);
+}
+
+.pf-empty-state--sm .pf-empty-state__icon {
+  font-size: var(--font-size-xl);
+  margin-bottom: 0;
+}
+
+.pf-empty-state--lg .pf-empty-state__icon {
+  font-size: var(--font-size-5xl);
+  margin-bottom: var(--space-2);
+}
+
+.pf-empty-state__heading {
+  color: var(--pf-empty-state-text);
+  font-size: var(--font-size-md);
+  font-weight: var(--font-weight-semibold);
+  line-height: 1.3;
+  margin: 0;
+}
+
+.pf-empty-state--sm .pf-empty-state__heading {
+  font-size: var(--font-size-sm);
+}
+
+.pf-empty-state--lg .pf-empty-state__heading {
+  font-size: var(--font-size-xl);
+}
+
+.pf-empty-state__description {
+  color: var(--pf-empty-state-text-muted);
+  font-size: var(--font-size-sm);
+  line-height: 1.5;
+  margin: 0;
+  max-width: 40ch;
+}
+
+.pf-empty-state--lg .pf-empty-state__description {
+  font-size: var(--font-size-md);
+  max-width: 48ch;
+}
+
+.pf-empty-state__action {
+  align-items: center;
+  display: inline-flex;
+  gap: var(--space-2);
+  margin-top: var(--space-1);
+}

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

package/dist/components/FileUploader/FileUploader.css

@@ -0,0 +1,135 @@
+.pf-file-uploader {
+  display: grid;
+  gap: var(--space-3);
+}
+
+.pf-file-uploader__input {
+  display: none;
+}
+
+.pf-file-uploader__dropzone {
+  align-items: center;
+  background: var(--pf-file-uploader-bg);
+  border: 1px dashed var(--pf-file-uploader-border);
+  border-radius: var(--radius-md);
+  color: var(--pf-file-uploader-text);
+  cursor: pointer;
+  display: grid;
+  gap: var(--space-1);
+  justify-items: center;
+  padding: var(--space-4);
+  text-align: center;
+  width: 100%;
+}
+
+.pf-file-uploader__dropzone:hover:not(:disabled) {
+  border-color: var(--pf-file-uploader-border-strong);
+  background: var(--pf-file-uploader-bg-subtle);
+}
+
+.pf-file-uploader__dropzone:focus-visible {
+  box-shadow: var(--pf-fileuploader-focus-ring, var(--pf-focus-ring));
+  outline: none;
+}
+
+.pf-file-uploader__dropzone--active {
+  border-color: var(--pf-file-uploader-active-border);
+  box-shadow: inset 0 0 0 1px var(--pf-file-uploader-active-border);
+}
+
+.pf-file-uploader__dropzone--invalid {
+  border-color: var(--pf-file-uploader-invalid-border);
+}
+
+.pf-file-uploader__dropzone:disabled {
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+
+.pf-file-uploader__icon {
+  align-items: center;
+  background: var(--pf-file-uploader-bg-subtle);
+  border: 1px solid var(--pf-file-uploader-border);
+  border-radius: 999px;
+  color: var(--pf-file-uploader-text-muted);
+  display: inline-flex;
+  height: 36px;
+  justify-content: center;
+  width: 36px;
+}
+
+.pf-file-uploader__title {
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-semibold);
+}
+
+.pf-file-uploader__subtitle,
+.pf-file-uploader__hint {
+  color: var(--pf-file-uploader-text-muted);
+  font-size: var(--font-size-xs);
+}
+
+.pf-file-uploader__list {
+  display: grid;
+  gap: var(--space-2);
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.pf-file-uploader__list-item {
+  align-items: center;
+  background: var(--pf-file-uploader-bg);
+  border: 1px solid var(--pf-file-uploader-border);
+  border-radius: var(--radius-sm);
+  display: flex;
+  justify-content: space-between;
+  padding: var(--space-2) var(--space-3);
+}
+
+.pf-file-uploader__file-meta {
+  display: grid;
+  gap: 2px;
+  min-width: 0;
+}
+
+.pf-file-uploader__file-name {
+  color: var(--pf-file-uploader-text);
+  font-size: var(--font-size-sm);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.pf-file-uploader__file-size {
+  color: var(--pf-file-uploader-text-muted);
+  font-size: var(--font-size-xs);
+}
+
+.pf-file-uploader__remove {
+  align-items: center;
+  background: transparent;
+  border: 0;
+  border-radius: var(--radius-sm);
+  color: var(--pf-file-uploader-text-muted);
+  cursor: pointer;
+  display: inline-flex;
+  height: 24px;
+  justify-content: center;
+  width: 24px;
+}
+
+.pf-file-uploader__remove:hover:not(:disabled) {
+  background: var(--pf-file-uploader-bg-subtle);
+  color: var(--pf-file-uploader-text);
+}
+
+.pf-file-uploader__remove:focus-visible {
+  box-shadow: var(--pf-fileuploader-focus-ring, var(--pf-focus-ring));
+  outline: none;
+}
+
+.pf-file-uploader__remove:disabled {
+  cursor: not-allowed;
+  opacity: 0.55;
+}

package/dist/{index54.js → components/FileUploader/FileUploader2.js}

@@ -1,7 +1,7 @@
-import { cx } from "./index4.js";
-import { Icon } from "./index6.js";
-import { FieldWrapper } from "./index19.js";
-/* empty css        */
+import { cx } from "../../utils/cx.js";
+import { Icon } from "../Icon/Icon2.js";
+import { FieldWrapper } from "../../utils/FieldWrapper.js";
+import './FileUploader.css';/* empty css             */
 import { forwardRef, useId, useMemo, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/FileUploader/FileUploader.tsx

package/dist/components/GaugeChart/GaugeChart.css

@@ -0,0 +1,63 @@
+.pf-gauge {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.pf-gauge__svg {
+  position: absolute;
+  inset: 0;
+}
+
+.pf-gauge__track {
+  stroke: var(--pf-gauge-track-color);
+}
+
+.pf-gauge__fill {
+  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 {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--space-1);
+  position: relative;
+  z-index: 1;
+  padding: var(--space-2);
+  border-radius: var(--radius-full);
+  background: var(--pf-gauge-center-bg);
+  text-align: center;
+}
+
+.pf-gauge__label {
+  color: var(--pf-gauge-label-color);
+  font-size: var(--pf-gauge-label-size);
+  font-weight: var(--font-weight-semibold);
+  line-height: 1;
+}
+
+.pf-gauge__sub-label {
+  color: var(--pf-gauge-sub-label-color);
+  font-size: var(--font-size-sm);
+  line-height: 1;
+}

package/dist/components/GaugeChart/GaugeChart2.js

@@ -0,0 +1,74 @@
+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 offset = circumference - progress * circumference;
+	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: circumference,
+				style: {
+					transform: "rotate(-90deg)",
+					transformOrigin: `${center}px ${center}px`,
+					"--pf-gauge-circumference": circumference,
+					"--pf-gauge-offset": offset
+				},
+				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