@pitchfork-ui/react 0.1.9 → 0.6.0

package/dist/components/Button/Button.css

@@ -0,0 +1,93 @@
+.pf-button {
+  align-items: center;
+  border: 1px solid transparent;
+  border-radius: var(--radius-md);
+  cursor: pointer;
+  display: inline-flex;
+  font-family: inherit;
+  font-weight: var(--font-weight-semibold);
+  gap: var(--space-2);
+  justify-content: center;
+  line-height: 1;
+  min-height: 40px;
+  text-decoration: none;
+  transition:
+    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 {
+  box-shadow: var(--pf-button-focus-ring, var(--pf-focus-ring));
+  outline: none;
+}
+
+.pf-button:disabled {
+  cursor: not-allowed;
+  opacity: 0.55;
+}
+
+.pf-button--sm {
+  font-size: var(--font-size-sm);
+  min-height: 36px;
+  padding: 0 var(--space-3);
+}
+.pf-button--md {
+  font-size: var(--font-size-md);
+  min-height: 40px;
+  padding: 0 var(--space-4);
+}
+.pf-button--lg {
+  font-size: var(--font-size-lg);
+  min-height: 48px;
+  padding: 0 var(--space-5);
+}
+.pf-button--full {
+  width: 100%;
+}
+
+.pf-button--primary {
+  background: var(--pf-button-primary-bg);
+  color: var(--pf-button-primary-text);
+}
+.pf-button--primary:hover:not(:disabled) {
+  background: var(--pf-button-primary-bg-hover);
+}
+.pf-button--secondary {
+  background: var(--pf-button-secondary-bg);
+  border-color: var(--pf-button-secondary-border);
+  color: var(--pf-button-secondary-text);
+}
+.pf-button--secondary:hover:not(:disabled) {
+  background: var(--pf-button-secondary-bg-hover);
+  border-color: var(--pf-button-secondary-border-hover);
+}
+.pf-button--ghost {
+  background: transparent;
+  color: var(--pf-button-ghost-text);
+}
+.pf-button--ghost:hover:not(:disabled) {
+  background: var(--pf-button-ghost-bg-hover);
+}
+
+.pf-button--loading:disabled {
+  cursor: wait;
+  opacity: 1;
+}
+
+.pf-button__spinner {
+  animation: pf-spin 0.65s linear infinite;
+  flex-shrink: 0;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .pf-button {
+    transition: none;
+  }
+
+  .pf-button__spinner {
+    animation-duration: 0.01ms;
+    animation-iteration-count: 1;
+  }
+}

package/dist/{index12.js → components/Button/Button2.js}

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

package/dist/components/ButtonGroup/ButtonGroup.css

@@ -0,0 +1,107 @@
+.pf-button-group {
+  display: inline-flex;
+  flex-wrap: wrap;
+  align-items: stretch;
+}
+
+.pf-button-group__button {
+  align-items: center;
+  background: var(--pf-buttongroup-bg);
+  border: 1px solid var(--pf-buttongroup-border);
+  color: var(--pf-buttongroup-text);
+  cursor: pointer;
+  display: inline-flex;
+  gap: var(--space-2);
+  justify-content: center;
+  line-height: 1;
+  margin-inline-start: -1px;
+  min-height: 40px;
+  padding: 0 var(--space-4);
+  position: relative;
+  transition:
+    background-color 120ms ease,
+    border-color 120ms ease,
+    color 120ms ease,
+    box-shadow 120ms ease;
+}
+
+.pf-button-group__button:first-child {
+  border-bottom-left-radius: var(--radius-md);
+  border-top-left-radius: var(--radius-md);
+  margin-inline-start: 0;
+}
+
+.pf-button-group__button:last-child {
+  border-bottom-right-radius: var(--radius-md);
+  border-top-right-radius: var(--radius-md);
+}
+
+.pf-button-group__button:focus-visible {
+  box-shadow: var(--pf-buttongroup-focus-ring, var(--pf-focus-ring));
+  outline: none;
+  z-index: 2;
+}
+
+.pf-button-group__button:hover:not(:disabled):not(.pf-button-group__button--selected) {
+  background: var(--pf-buttongroup-bg-subtle);
+}
+
+.pf-button-group__button--selected {
+  background: var(--pf-buttongroup-action-primary);
+  border-color: var(--pf-buttongroup-action-primary);
+  color: var(--pf-buttongroup-action-primary-text);
+  z-index: 1;
+}
+
+.pf-button-group__button--selected:hover:not(:disabled) {
+  background: var(--pf-buttongroup-action-primary-hover);
+  border-color: var(--pf-buttongroup-action-primary-hover);
+}
+
+.pf-button-group__button:disabled {
+  cursor: not-allowed;
+  opacity: 0.55;
+}
+
+.pf-button-group__button:disabled:hover {
+  background: var(--pf-buttongroup-bg);
+}
+
+.pf-button-group__button--selected:disabled:hover {
+  background: var(--pf-buttongroup-action-primary);
+  border-color: var(--pf-buttongroup-action-primary);
+}
+
+.pf-button-group__icon {
+  display: inline-flex;
+  flex-shrink: 0;
+}
+
+.pf-button-group__icon svg {
+  display: block;
+  height: 16px;
+  width: 16px;
+}
+
+.pf-button-group__dot {
+  background: var(--pf-buttongroup-action-primary);
+  border-radius: 999px;
+  flex-shrink: 0;
+  height: 8px;
+  width: 8px;
+}
+
+.pf-button-group__button--selected .pf-button-group__dot {
+  background: var(--pf-buttongroup-dot-selected);
+}
+
+.pf-button-group__label {
+  font: inherit;
+  font-weight: var(--font-weight-semibold);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .pf-button-group__button {
+    transition: none;
+  }
+}

package/dist/{index16.js → components/ButtonGroup/ButtonGroup2.js}

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

package/dist/components/Calendar/Calendar.css

@@ -0,0 +1,144 @@
+.pf-calendar {
+  background: var(--pf-calendar-bg);
+  border: 1px solid var(--pf-calendar-border);
+  color: var(--pf-calendar-text);
+  display: grid;
+  gap: var(--space-2);
+  max-width: 320px;
+  padding: var(--space-3);
+}
+
+.pf-calendar--invalid {
+  border-color: var(--pf-calendar-invalid-border);
+}
+
+.pf-calendar__header {
+  align-items: center;
+  display: grid;
+  gap: var(--space-2);
+  grid-template-columns: 28px 1fr 28px;
+}
+
+.pf-calendar__month-controls {
+  align-items: center;
+  display: grid;
+  gap: var(--space-1);
+  grid-template-columns: minmax(0, 1fr) auto;
+}
+
+.pf-calendar__control-label {
+  border: 0;
+  clip: rect(0 0 0 0);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+}
+
+.pf-calendar__control {
+  appearance: none;
+  background: var(--pf-calendar-bg);
+  border: 1px solid var(--pf-calendar-border);
+  border-radius: var(--radius-sm);
+  color: var(--pf-calendar-text);
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-medium);
+  height: 28px;
+  min-width: 0;
+  padding: 0 var(--space-2);
+}
+
+.pf-calendar__control:focus-visible {
+  box-shadow: var(--pf-calendar-focus-ring, var(--pf-focus-ring));
+  outline: none;
+}
+
+.pf-calendar__nav {
+  align-items: center;
+  background: transparent;
+  border: 0;
+  border-radius: var(--radius-sm);
+  color: var(--pf-calendar-text-muted);
+  cursor: pointer;
+  display: inline-flex;
+  font-size: var(--font-size-sm);
+  height: 28px;
+  justify-content: center;
+  padding: 0;
+  width: 28px;
+}
+
+.pf-calendar__nav:hover {
+  background: var(--pf-calendar-bg-subtle);
+  color: var(--pf-calendar-text);
+}
+
+.pf-calendar__nav:focus-visible {
+  box-shadow: var(--pf-calendar-focus-ring, var(--pf-focus-ring));
+  outline: none;
+}
+
+.pf-calendar__weekday {
+  color: var(--pf-calendar-text-muted);
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-medium);
+  text-align: center;
+}
+
+.pf-calendar__grid {
+  display: grid;
+  gap: var(--space-1);
+  grid-template-columns: repeat(7, minmax(0, 1fr));
+}
+
+.pf-calendar__day,
+.pf-calendar__day-empty {
+  align-items: center;
+  aspect-ratio: 1 / 1;
+  border-radius: var(--radius-sm);
+  display: inline-flex;
+  font-size: var(--font-size-xs);
+  justify-content: center;
+}
+
+.pf-calendar__day {
+  background: transparent;
+  border: 0;
+  color: var(--pf-calendar-text);
+  cursor: pointer;
+}
+
+.pf-calendar__day:hover:not(:disabled) {
+  background: var(--pf-calendar-bg-subtle);
+}
+
+.pf-calendar__day--outside {
+  color: var(--pf-calendar-text-muted);
+  opacity: 0.55;
+}
+
+.pf-calendar__day--today {
+  background: var(--pf-calendar-today-bg);
+  border: 1.5px solid var(--pf-calendar-today-border);
+  box-shadow: none;
+}
+
+.pf-calendar__day--selected {
+  background: var(--pf-calendar-selected-bg);
+  color: var(--pf-calendar-selected-text);
+  font-weight: var(--font-weight-semibold);
+}
+
+.pf-calendar__day--selected:hover:not(:disabled) {
+  background: var(--pf-calendar-selected-bg-hover);
+  color: var(--pf-calendar-selected-text);
+}
+
+.pf-calendar__day:disabled {
+  color: var(--pf-calendar-text-muted);
+  cursor: not-allowed;
+  opacity: 0.45;
+}

package/dist/{index40.js → components/Calendar/Calendar2.js}

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

package/dist/components/Card/Card.css

@@ -0,0 +1,23 @@
+.pf-card {
+  background: var(--pf-card-background);
+  border: 1px solid var(--pf-card-border);
+  border-radius: var(--pf-card-radius, var(--radius-lg));
+  box-shadow: var(--pf-card-shadow, var(--shadow-sm));
+  overflow: hidden;
+}
+
+.pf-card__header,
+.pf-card__content,
+.pf-card__footer {
+  padding: var(--pf-card-section-padding, var(--space-4));
+}
+
+.pf-card__header {
+  border-bottom: 1px solid var(--pf-card-border);
+}
+
+.pf-card__footer {
+  display: flex;
+  gap: var(--pf-card-footer-gap);
+  border-top: 1px solid var(--pf-card-border);
+}

package/dist/{index25.js → components/Card/Card2.js}

@@ -1,5 +1,5 @@
-import { cx } from "./index4.js";
-/* empty css        */
+import { cx } from "../../utils/cx.js";
+import './Card.css';/* empty css     */
 import { jsx } from "react/jsx-runtime";
 //#region src/components/Card/Card.tsx
 function Card({ className, ref, ...props }) {

package/dist/components/Carousel/Carousel.css

@@ -0,0 +1,124 @@
+.pf-carousel {
+  background: var(--pf-carousel-bg);
+  border: 1px solid var(--pf-carousel-border);
+  border-radius: var(--pf-carousel-radius, var(--radius-md));
+  display: grid;
+  gap: var(--pf-carousel-gap, var(--space-3));
+  overflow: hidden;
+  padding: var(--pf-carousel-padding, var(--space-3));
+  width: 100%;
+}
+
+.pf-carousel__viewport {
+  background: var(--pf-carousel-viewport-bg);
+  border-radius: var(--pf-carousel-viewport-radius, var(--radius-sm));
+  overflow: hidden;
+  width: 100%;
+}
+
+.pf-carousel__track {
+  display: flex;
+  transition: transform var(--pf-carousel-transition-duration, var(--duration-moderate))
+    var(--easing-decelerate);
+  width: 100%;
+}
+
+.pf-carousel__slide {
+  background: var(--pf-carousel-slide-background, transparent);
+  color: var(--pf-carousel-slide-text);
+  flex: 0 0 100%;
+  min-width: 0;
+  padding: var(--pf-carousel-slide-padding, 0);
+}
+
+.pf-carousel__empty {
+  align-items: center;
+  color: var(--pf-carousel-empty-text);
+  display: flex;
+  font-size: var(--pf-carousel-empty-font-size, var(--font-size-sm));
+  justify-content: center;
+  min-height: var(--pf-carousel-empty-min-height, 180px);
+  padding: var(--pf-carousel-empty-padding, var(--space-4));
+  text-align: center;
+}
+
+.pf-carousel__controls {
+  align-items: center;
+  display: grid;
+  gap: var(--pf-carousel-controls-gap, var(--space-2));
+  grid-template-columns:
+    var(--pf-carousel-nav-size, 28px) 1fr
+    var(--pf-carousel-nav-size, 28px);
+}
+
+.pf-carousel__nav {
+  align-items: center;
+  background: transparent;
+  border: 0;
+  border-radius: var(--pf-carousel-nav-radius, var(--radius-sm));
+  color: var(--pf-carousel-nav-text);
+  cursor: pointer;
+  display: inline-flex;
+  font-size: var(--pf-carousel-nav-font-size, var(--font-size-sm));
+  height: var(--pf-carousel-nav-size, 28px);
+  justify-content: center;
+  padding: 0;
+  width: var(--pf-carousel-nav-size, 28px);
+}
+
+.pf-carousel__nav:hover:not(:disabled) {
+  background: var(--pf-carousel-nav-hover-bg);
+  color: var(--pf-carousel-nav-hover-text);
+}
+
+.pf-carousel__nav:focus-visible {
+  box-shadow: var(--pf-carousel-focus-ring, var(--pf-focus-ring));
+  outline: none;
+}
+
+.pf-carousel__nav:disabled {
+  color: var(--pf-carousel-nav-text);
+  cursor: not-allowed;
+  opacity: var(--pf-carousel-disabled-opacity, 0.45);
+}
+
+.pf-carousel__indicators {
+  align-items: center;
+  display: inline-flex;
+  gap: var(--pf-carousel-indicator-gap, var(--space-1));
+  justify-content: center;
+}
+
+.pf-carousel__indicator {
+  background: var(--pf-carousel-indicator-bg);
+  border: 0;
+  border-radius: var(--pf-carousel-indicator-radius, 999px);
+  cursor: pointer;
+  height: var(--pf-carousel-indicator-size, 8px);
+  padding: 0;
+  transition: all var(--pf-carousel-indicator-transition-duration, var(--duration-fast))
+    var(--easing-decelerate);
+  width: var(--pf-carousel-indicator-size, 8px);
+}
+
+.pf-carousel__indicator--active {
+  background: var(--pf-carousel-indicator-active-bg);
+  width: var(--pf-carousel-indicator-active-width, 20px);
+}
+
+.pf-carousel__indicator:focus-visible {
+  box-shadow: var(--pf-carousel-focus-ring, var(--pf-focus-ring));
+  outline: none;
+}
+
+.pf-carousel__indicator-spacer {
+  display: block;
+  min-height: var(--pf-carousel-indicator-size, 8px);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .pf-carousel__track,
+  .pf-carousel__indicator {
+    transition: none;
+  }
+}

package/dist/components/Carousel/Carousel2.js

@@ -0,0 +1,147 @@
+import { cx } from "../../utils/cx.js";
+import { Icon } from "../Icon/Icon2.js";
+import './Carousel.css';/* empty css         */
+import { forwardRef, useEffect, useMemo, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/Carousel/Carousel.tsx
+var clamp = (value, min, max) => {
+	return Math.min(Math.max(value, min), max);
+};
+var Carousel = forwardRef(function Carousel({ className, slides, initialIndex = 0, loop = true, showIndicators = true, autoPlay = false, autoPlayInterval = 5e3, onIndexChange, "aria-label": ariaLabel = "Carousel", ...props }, ref) {
+	const totalSlides = slides.length;
+	const [activeIndex, setActiveIndex] = useState(clamp(initialIndex, 0, Math.max(totalSlides - 1, 0)));
+	const resolvedActiveIndex = clamp(activeIndex, 0, Math.max(totalSlides - 1, 0));
+	const goToIndex = (nextIndex) => {
+		if (totalSlides === 0) return;
+		const resolvedIndex = loop ? (nextIndex % totalSlides + totalSlides) % totalSlides : clamp(nextIndex, 0, totalSlides - 1);
+		setActiveIndex(resolvedIndex);
+		onIndexChange?.(resolvedIndex);
+	};
+	useEffect(() => {
+		if (!autoPlay || totalSlides < 2) return;
+		const interval = window.setInterval(() => {
+			setActiveIndex((current) => {
+				const next = loop ? (current + 1) % totalSlides : Math.min(current + 1, totalSlides - 1);
+				onIndexChange?.(next);
+				return next;
+			});
+		}, autoPlayInterval);
+		return () => {
+			window.clearInterval(interval);
+		};
+	}, [
+		autoPlay,
+		autoPlayInterval,
+		loop,
+		onIndexChange,
+		totalSlides
+	]);
+	const isPrevDisabled = !loop && resolvedActiveIndex <= 0;
+	const isNextDisabled = !loop && resolvedActiveIndex >= totalSlides - 1;
+	const slideLabel = useMemo(() => {
+		if (totalSlides === 0) return "No slides";
+		return `Slide ${resolvedActiveIndex + 1} of ${totalSlides}`;
+	}, [resolvedActiveIndex, totalSlides]);
+	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",
+				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("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("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";
+//#endregion
+export { Carousel };