@pitchfork-ui/react 0.1.9 → 0.6.0

package/dist/components/Slider/Slider.css

@@ -0,0 +1,106 @@
+.pf-field {
+  display: grid;
+  gap: var(--space-2);
+}
+
+.pf-field__label {
+  color: var(--pf-slider-text);
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-medium);
+}
+
+.pf-field__description {
+  color: var(--pf-slider-text-muted);
+  font-size: var(--font-size-sm);
+  margin: 0;
+}
+
+.pf-field__error {
+  color: var(--pf-slider-error-text);
+  font-size: var(--font-size-sm);
+  margin: 0;
+}
+
+.pf-slider__header {
+  align-items: center;
+  display: flex;
+  justify-content: space-between;
+}
+
+.pf-slider__value {
+  color: var(--pf-slider-text-muted);
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-medium);
+}
+
+.pf-slider {
+  appearance: none;
+  background: linear-gradient(
+    to right,
+    var(--pf-slider-action) 0,
+    var(--pf-slider-action) var(--pf-slider-progress, 0%),
+    var(--pf-slider-border) var(--pf-slider-progress, 0%),
+    var(--pf-slider-border) 100%
+  );
+  border-radius: var(--radius-full);
+  cursor: pointer;
+  height: var(--pf-slider-track-height);
+  width: 100%;
+}
+
+.pf-slider:focus {
+  outline: none;
+}
+
+.pf-slider:focus-visible {
+  box-shadow: var(--pf-slider-focus-ring, var(--pf-focus-ring));
+}
+
+.pf-slider::-webkit-slider-thumb {
+  appearance: none;
+  background: var(--pf-slider-bg);
+  border: 2px solid var(--pf-slider-action);
+  border-radius: 50%;
+  box-shadow: var(--pf-slider-control-thumb-outline-shadow, var(--pf-control-thumb-outline-shadow));
+  height: var(--pf-slider-thumb-size);
+  margin-top: calc((var(--pf-slider-track-height) - var(--pf-slider-thumb-size)) / 2);
+  width: var(--pf-slider-thumb-size);
+}
+
+.pf-slider::-moz-range-thumb {
+  background: var(--pf-slider-bg);
+  border: 2px solid var(--pf-slider-action);
+  border-radius: 50%;
+  box-shadow: var(--pf-slider-control-thumb-outline-shadow, var(--pf-control-thumb-outline-shadow));
+  height: var(--pf-slider-thumb-size);
+  width: var(--pf-slider-thumb-size);
+}
+
+.pf-slider::-moz-range-track {
+  background: transparent;
+  border-radius: var(--radius-full);
+  height: var(--pf-slider-track-height);
+}
+
+.pf-slider:disabled {
+  cursor: not-allowed;
+  opacity: 0.55;
+}
+
+.pf-slider--invalid {
+  background: linear-gradient(
+    to right,
+    var(--pf-slider-danger-fill) 0,
+    var(--pf-slider-danger-fill) var(--pf-slider-progress, 0%),
+    var(--pf-slider-border) var(--pf-slider-progress, 0%),
+    var(--pf-slider-border) 100%
+  );
+}
+
+.pf-slider--invalid::-webkit-slider-thumb {
+  border-color: var(--pf-slider-danger-fill);
+}
+
+.pf-slider--invalid::-moz-range-thumb {
+  border-color: var(--pf-slider-danger-fill);
+}

package/dist/{index104.js → components/Slider/Slider2.js}

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

package/dist/components/Sparkline/Sparkline.css

@@ -0,0 +1,65 @@
+.pf-sparkline {
+  display: block;
+  overflow: visible;
+}
+
+.pf-sparkline__line {
+  stroke: var(--pf-sparkline-color-override, var(--pf-sparkline-color));
+}
+
+.pf-sparkline__area {
+  fill: var(--pf-sparkline-color-override, var(--pf-sparkline-color));
+  opacity: var(--pf-sparkline-area-opacity, 0.15);
+}
+
+.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

@@ -0,0 +1,100 @@
+import { cx } from "../../utils/cx.js";
+import './Sparkline.css';/* empty css          */
+import { forwardRef, useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/Sparkline/Sparkline.tsx
+function buildPath(points, close = false) {
+	if (points.length < 2) return "";
+	const [first, ...rest] = points;
+	const d = [`M ${first[0]} ${first[1]}`];
+	for (const [x, y] of rest) d.push(`L ${x} ${y}`);
+	if (close) {
+		const lastX = points[points.length - 1][0];
+		points[points.length - 1][1];
+		d.push(`L ${lastX} ${close}`);
+		d.push(`L ${first[0]} ${close}`);
+		d.push("Z");
+	}
+	return d.join(" ");
+}
+function normalizePoints(data, width, height, padding) {
+	if (data.length === 0) return [];
+	const min = Math.min(...data);
+	const range = Math.max(...data) - min || 1;
+	const innerW = width - padding * 2;
+	const innerH = height - padding * 2;
+	return data.map((value, i) => {
+		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, animate = false, label, style, ...props }, ref) {
+	const padding = strokeWidth + 2;
+	const points = useMemo(() => normalizePoints(data, width, height, padding), [
+		data,
+		width,
+		height,
+		padding
+	]);
+	const linePath = useMemo(() => buildPath(points), [points]);
+	const areaPath = useMemo(() => {
+		if (variant !== "area" || points.length < 2) return "";
+		const [first, ...rest] = points;
+		const d = [`M ${first[0]} ${first[1]}`];
+		for (const [x, y] of rest) d.push(`L ${x} ${y}`);
+		const lastX = points[points.length - 1][0];
+		const bottom = height - padding + strokeWidth;
+		d.push(`L ${lastX} ${bottom}`);
+		d.push(`L ${first[0]} ${bottom}`);
+		d.push("Z");
+		return d.join(" ");
+	}, [
+		points,
+		variant,
+		height,
+		padding,
+		strokeWidth
+	]);
+	const lastPoint = points[points.length - 1];
+	const colorVar = color ?? "var(--pf-sparkline-color)";
+	return /* @__PURE__ */ jsxs("svg", {
+		ref,
+		width,
+		height,
+		viewBox: `0 0 ${width} ${height}`,
+		className: cx("pf-sparkline", `pf-sparkline--${variant}`, animate && "pf-sparkline--animated", className),
+		"aria-label": label,
+		role: label ? "img" : "presentation",
+		style: {
+			"--pf-sparkline-color-override": color,
+			...style
+		},
+		...props,
+		children: [
+			variant === "area" && areaPath && /* @__PURE__ */ jsx("path", {
+				d: areaPath,
+				fill: colorVar,
+				className: "pf-sparkline__area"
+			}),
+			linePath && /* @__PURE__ */ jsx("path", {
+				d: linePath,
+				fill: "none",
+				stroke: colorVar,
+				strokeWidth,
+				strokeLinecap: "round",
+				strokeLinejoin: "round",
+				pathLength: animate ? 1 : void 0,
+				className: "pf-sparkline__line"
+			}),
+			endDot && lastPoint && /* @__PURE__ */ jsx("circle", {
+				cx: lastPoint[0],
+				cy: lastPoint[1],
+				r: strokeWidth + 1.5,
+				fill: colorVar,
+				className: "pf-sparkline__dot"
+			})
+		]
+	});
+});
+Sparkline.displayName = "Sparkline";
+//#endregion
+export { Sparkline };

package/dist/components/Switch/Switch.css

@@ -0,0 +1,59 @@
+.pf-switch-field {
+  align-items: center;
+  display: inline-flex;
+  gap: var(--space-2);
+}
+
+.pf-switch {
+  appearance: none;
+  background: var(--pf-switch-track-bg);
+  border-radius: var(--radius-full);
+  cursor: pointer;
+  height: 24px;
+  margin: 0;
+  position: relative;
+  transition: background-color 120ms ease;
+  width: 44px;
+}
+
+.pf-switch::after {
+  background: var(--pf-switch-thumb-bg);
+  border-radius: 50%;
+  content: '';
+  height: 20px;
+  left: 2px;
+  position: absolute;
+  top: 2px;
+  transition: transform 120ms ease;
+  width: 20px;
+}
+
+.pf-switch:checked {
+  background: var(--pf-switch-track-checked-bg);
+}
+
+.pf-switch:checked::after {
+  transform: translateX(20px);
+}
+
+.pf-switch:focus-visible {
+  box-shadow: var(--pf-switch-focus-ring, var(--pf-focus-ring));
+  outline: none;
+}
+
+.pf-switch:disabled {
+  cursor: not-allowed;
+  opacity: 0.55;
+}
+
+.pf-switch-field label {
+  color: var(--pf-switch-label-text);
+  font-size: var(--font-size-md);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .pf-switch,
+  .pf-switch::after {
+    transition: none;
+  }
+}

package/dist/{index100.js → components/Switch/Switch2.js}

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

package/dist/components/Table/Table.css

@@ -0,0 +1,126 @@
+.pf-table {
+  background: var(--pf-table-bg);
+  border: 1px solid var(--pf-table-border);
+  border-radius: var(--radius-md);
+  overflow: auto;
+}
+
+.pf-table__native {
+  border-collapse: separate;
+  border-spacing: 0;
+  min-width: 620px;
+  width: 100%;
+}
+
+.pf-table__caption {
+  align-items: center;
+  border-bottom: 1px solid var(--pf-table-border);
+  color: var(--pf-table-text-muted);
+  display: flex;
+  font-size: var(--font-size-sm);
+  min-height: 56px;
+  padding-top: var(--space-3);
+  padding-inline-end: var(--space-4, 16px);
+  padding-bottom: var(--space-3);
+  padding-inline-start: var(--space-4, 16px);
+}
+
+.pf-table__head-cell,
+.pf-table__body-cell,
+.pf-table__empty {
+  border-bottom: 1px solid var(--pf-table-border);
+  font-size: var(--font-size-sm);
+  line-height: 1.4;
+  padding: 14px var(--space-3);
+  vertical-align: middle;
+}
+
+@media (min-width: 768px) {
+  .pf-table__head-cell,
+  .pf-table__body-cell,
+  .pf-table__empty {
+    padding-inline: var(--space-4);
+  }
+}
+
+.pf-table__head-cell {
+  background: var(--pf-table-bg-subtle);
+  color: var(--pf-table-text-muted);
+  font-weight: var(--font-weight-semibold);
+  position: relative;
+  text-transform: none;
+  width: var(--pf-col-width, auto);
+}
+
+.pf-table__sort-button {
+  align-items: center;
+  background: transparent;
+  border: 0;
+  color: inherit;
+  cursor: pointer;
+  display: inline-flex;
+  font: inherit;
+  gap: var(--space-2);
+  justify-content: inherit;
+  padding: 0;
+  width: 100%;
+}
+
+.pf-table__sort-button:hover,
+.pf-table__sort-button:focus-visible {
+  color: var(--pf-table-text);
+  outline: none;
+}
+
+.pf-table__sort-indicator {
+  display: inline-flex;
+  font-size: var(--font-size-2xs);
+  line-height: 1;
+  opacity: 0.7;
+}
+
+.pf-table__body-cell {
+  color: var(--pf-table-text);
+}
+
+.pf-table__native tbody tr:last-child .pf-table__body-cell,
+.pf-table__native tbody tr:last-child .pf-table__empty {
+  border-bottom: 0;
+}
+
+.pf-table--striped .pf-table__native tbody tr:nth-child(even) .pf-table__body-cell {
+  background: color-mix(in srgb, var(--pf-table-bg-subtle) 55%, transparent);
+}
+
+.pf-table--hoverable .pf-table__native tbody tr:hover .pf-table__body-cell {
+  background: color-mix(in srgb, var(--pf-table-bg-subtle) 70%, transparent);
+}
+
+.pf-table--sticky-header .pf-table__head-cell {
+  position: sticky;
+  top: 0;
+  z-index: 1;
+}
+
+.pf-table__cell--left {
+  text-align: start;
+}
+
+.pf-table__cell--center {
+  text-align: center;
+}
+
+.pf-table__cell--right {
+  text-align: end;
+}
+
+.pf-table__empty {
+  color: var(--pf-table-text-muted);
+  text-align: center;
+}
+
+.pf-table--dense .pf-table__head-cell,
+.pf-table--dense .pf-table__body-cell,
+.pf-table--dense .pf-table__empty {
+  padding-block: var(--space-3);
+}

package/dist/{index108.js → components/Table/Table2.js}

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

package/dist/components/Tabs/Tabs.css

@@ -0,0 +1,138 @@
+.pf-tabs {
+  display: grid;
+  gap: var(--space-3);
+}
+
+@media (min-width: 768px) {
+  .pf-tabs {
+    gap: var(--space-4);
+  }
+}
+
+.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 {
+  width: 100%;
+}
+
+.pf-tabs__list--underline {
+  border-bottom: 1px solid var(--pf-tabs-border);
+  gap: var(--space-1);
+}
+
+.pf-tabs__list--pills {
+  background: var(--pf-tabs-bg-subtle);
+  border-radius: var(--radius-md);
+  gap: var(--space-1);
+  padding: var(--space-1);
+}
+
+.pf-tabs__tab {
+  appearance: none;
+  background: transparent;
+  border: 0;
+  color: var(--pf-tabs-text-muted);
+  cursor: pointer;
+  font-family: inherit;
+  font-weight: var(--font-weight-medium);
+  min-width: 0;
+  position: relative;
+  z-index: 1;
+  transition: color var(--pf-transition-medium);
+  white-space: nowrap;
+}
+
+.pf-tabs__tab:disabled {
+  cursor: not-allowed;
+  opacity: 0.45;
+}
+
+.pf-tabs__tab--sm {
+  font-size: var(--font-size-sm);
+  padding: var(--space-2) var(--space-3);
+}
+
+.pf-tabs__tab--md {
+  font-size: var(--font-size-sm);
+  padding: var(--pf-tabs-tab-padding-y-md) var(--pf-tabs-tab-padding-x-md);
+}
+
+.pf-tabs__list--full-width .pf-tabs__tab {
+  flex: 1;
+  justify-content: center;
+}
+
+.pf-tabs__tab--underline {
+  border-bottom: var(--pf-tabs-underline-width) solid transparent;
+  margin-bottom: -1px;
+}
+
+.pf-tabs__tab--underline:hover:not(:disabled),
+.pf-tabs__tab--underline:focus-visible {
+  color: var(--pf-tabs-text);
+}
+
+.pf-tabs__tab--underline.pf-tabs__tab--active {
+  /* The sliding indicator draws the underline; keep the transparent border for spacing */
+  color: var(--pf-tabs-text);
+}
+
+.pf-tabs__tab--pills {
+  border-radius: var(--radius-sm);
+}
+
+.pf-tabs__tab--pills:hover:not(:disabled),
+.pf-tabs__tab--pills:focus-visible {
+  color: var(--pf-tabs-text);
+}
+
+.pf-tabs__tab--pills.pf-tabs__tab--active {
+  /* The sliding indicator draws the pill background */
+  color: var(--pf-tabs-text);
+}
+
+.pf-tabs__tab:focus-visible {
+  outline: 2px solid color-mix(in srgb, var(--pf-tabs-text) 32%, transparent);
+  outline-offset: 2px;
+}
+
+.pf-tabs__panel {
+  color: var(--pf-tabs-text);
+  line-height: 1.5;
+  min-width: 0;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .pf-tabs__tab,
+  .pf-tabs__indicator {
+    transition: none;
+  }
+}

package/dist/{index110.js → components/Tabs/Tabs2.js}

@@ -1,8 +1,9 @@
-import { cx } from "./index4.js";
-/* empty css         */
-import { forwardRef, useId, useMemo, useRef, useState } from "react";
+import { cx } from "../../utils/cx.js";
+import './Tabs.css';/* empty css     */
+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",