@pitchfork-ui/react 0.8.0 → 0.10.0

package/dist/components/LineBarCharts/LineBarChart2.js

@@ -1,3 +1,4 @@
+"use client";
 import { cx } from "../../utils/cx.js";
 import './LineBarChart.css';/* empty css             */
 import { forwardRef } from "react";

package/dist/components/LoadingIndicators/LoadingIndicators2.js

@@ -1,3 +1,4 @@
+"use client";
 import { cx } from "../../utils/cx.js";
 import './LoadingIndicators.css';/* empty css                  */
 import { forwardRef } from "react";

package/dist/components/Metrics/Metrics2.js

@@ -1,3 +1,4 @@
+"use client";
 import { cx } from "../../utils/cx.js";
 import { Icon } from "../Icon/Icon2.js";
 import './Metrics.css';/* empty css        */

package/dist/components/Modal/Modal.css

@@ -30,10 +30,11 @@
 .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;
+  border-radius: var(--radius-lg);
   box-shadow: var(--pf-modal-elevation-overlay-shadow, var(--pf-elevation-overlay-shadow));
   color: var(--pf-modal-text);
-  display: grid;
+  display: flex;
+  flex-direction: column;
   max-height: 92vh;
   overflow: hidden;
   width: 100%;
@@ -41,7 +42,6 @@
 
 @media (min-width: 768px) {
   .pf-modal {
-    border-radius: var(--radius-lg);
     max-height: min(90vh, 720px);
   }
 }
@@ -66,6 +66,7 @@
 .pf-modal__footer {
   align-items: start;
   display: flex;
+  flex-shrink: 0;
   gap: var(--space-3);
   justify-content: space-between;
   padding: var(--space-3);
@@ -90,7 +91,9 @@
 
 .pf-modal__body {
   display: grid;
+  flex: 1 1 auto;
   gap: var(--space-4);
+  min-height: 0;
   overflow-y: auto;
   padding: var(--space-3);
 }

package/dist/components/Modal/Modal2.js

@@ -1,3 +1,4 @@
+"use client";
 import { useFocusTrap } from "../../hooks/useFocusTrap.js";
 import { usePresence } from "../../hooks/usePresence.js";
 import { cx } from "../../utils/cx.js";

package/dist/components/MultiSelect/MultiSelect2.js

@@ -1,3 +1,4 @@
+"use client";
 import { Keys, composeDescribedBy, isActivationKey } from "../../a11y/index.js";
 import { useAnchoredPosition } from "../../hooks/useAnchoredPosition.js";
 import { useComposedRefs } from "../../hooks/useComposedRefs.js";

package/dist/components/Notification/Notification2.js

@@ -1,3 +1,4 @@
+"use client";
 import { useExitAnimation } from "../../hooks/useExitAnimation.js";
 import { cx } from "../../utils/cx.js";
 import { Icon } from "../Icon/Icon2.js";

package/dist/components/NumberInput/NumberInput2.js

@@ -1,3 +1,4 @@
+"use client";
 import { Keys, composeDescribedBy } from "../../a11y/index.js";
 import { useComposedRefs } from "../../hooks/useComposedRefs.js";
 import { useControllableState } from "../../hooks/useControllableState.js";

package/dist/components/PageHeader/PageHeader2.js

@@ -1,3 +1,4 @@
+"use client";
 import { cx } from "../../utils/cx.js";
 import { Breadcrumbs } from "../Breadcrumbs/Breadcrumbs2.js";
 import './PageHeader.css';/* empty css           */

package/dist/components/Pagination/Pagination2.js

@@ -1,3 +1,4 @@
+"use client";
 import { cx } from "../../utils/cx.js";
 import './Pagination.css';/* empty css           */
 import * as React from "react";

package/dist/components/PieChart/PieChart2.js

@@ -1,3 +1,4 @@
+"use client";
 import { cx } from "../../utils/cx.js";
 import './PieChart.css';/* empty css         */
 import { forwardRef } from "react";

package/dist/components/Popover/Popover2.js

@@ -1,3 +1,4 @@
+"use client";
 import { Keys } from "../../a11y/index.js";
 import { useAnchoredPosition } from "../../hooks/useAnchoredPosition.js";
 import { useComposedRefs } from "../../hooks/useComposedRefs.js";

package/dist/components/ProgressIndicators/ProgressIndicators2.js

@@ -1,3 +1,4 @@
+"use client";
 import { cx } from "../../utils/cx.js";
 import './ProgressIndicators.css';/* empty css                   */
 import { forwardRef } from "react";

package/dist/components/ProgressSteps/ProgressSteps2.js

@@ -1,3 +1,4 @@
+"use client";
 import { cx } from "../../utils/cx.js";
 import './ProgressSteps.css';/* empty css              */
 import { forwardRef } from "react";

package/dist/components/RadarChart/RadarChart2.js

@@ -1,3 +1,4 @@
+"use client";
 import { cx } from "../../utils/cx.js";
 import './RadarChart.css';/* empty css           */
 import { forwardRef } from "react";

package/dist/components/RadioButton/RadioButton2.js

@@ -1,3 +1,4 @@
+"use client";
 import { cx } from "../../utils/cx.js";
 import './RadioButton.css';/* empty css            */
 import { forwardRef, useId } from "react";

package/dist/components/RadioGroup/RadioGroup2.js

@@ -1,3 +1,4 @@
+"use client";
 import { cx } from "../../utils/cx.js";
 import './RadioGroup.css';/* empty css           */
 import { forwardRef, useId, useState } from "react";

package/dist/components/Rating/Rating2.js

@@ -1,3 +1,4 @@
+"use client";
 import { cx } from "../../utils/cx.js";
 import { Icon } from "../Icon/Icon2.js";
 import './Rating.css';/* empty css       */

package/dist/components/Resizable/Resizable.css

@@ -0,0 +1,79 @@
+.pf-resizable {
+  display: flex;
+  overflow: hidden;
+}
+
+.pf-resizable--horizontal {
+  flex-direction: row;
+}
+
+.pf-resizable--vertical {
+  flex-direction: column;
+}
+
+.pf-resizable__panel {
+  flex-grow: 0;
+  flex-shrink: 0;
+  min-height: 0;
+  min-width: 0;
+  overflow: auto;
+}
+
+.pf-resizable__panel--fill {
+  flex: 1 1 0;
+}
+
+/* ── Handle ───────────────────────────────────────────────────────────────── */
+
+.pf-resizable__handle {
+  align-items: center;
+  background: var(--pf-resizable-handle-bg);
+  display: flex;
+  flex-shrink: 0;
+  justify-content: center;
+  position: relative;
+  touch-action: none;
+  transition: background var(--pf-transition-fast);
+}
+
+.pf-resizable__handle:hover,
+.pf-resizable__handle:focus-visible {
+  background: var(--pf-resizable-handle-active-bg);
+}
+
+.pf-resizable__handle:focus-visible {
+  outline: none;
+  box-shadow: var(--pf-resizable-focus-ring, var(--pf-focus-ring));
+}
+
+.pf-resizable--horizontal .pf-resizable__handle {
+  cursor: col-resize;
+  width: var(--pf-resizable-handle-size, 6px);
+}
+
+.pf-resizable--vertical .pf-resizable__handle {
+  cursor: row-resize;
+  height: var(--pf-resizable-handle-size, 6px);
+}
+
+/* Grip affordance (dots/line) centered in the handle. */
+.pf-resizable__grip {
+  background: var(--pf-resizable-grip);
+  border-radius: var(--radius-full);
+}
+
+.pf-resizable--horizontal .pf-resizable__grip {
+  height: 24px;
+  width: 2px;
+}
+
+.pf-resizable--vertical .pf-resizable__grip {
+  height: 2px;
+  width: 24px;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .pf-resizable__handle {
+    transition: none;
+  }
+}

package/dist/components/Resizable/Resizable2.js

@@ -0,0 +1,101 @@
+"use client";
+import { Keys } from "../../a11y/index.js";
+import { useComposedRefs } from "../../hooks/useComposedRefs.js";
+import { useControllableState } from "../../hooks/useControllableState.js";
+import { cx } from "../../utils/cx.js";
+import './Resizable.css';/* empty css          */
+import { Children, forwardRef, useId, useRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/Resizable/Resizable.tsx
+var clamp = (n, min, max) => Math.min(Math.max(n, min), max);
+var Resizable = forwardRef(function Resizable({ className, orientation = "horizontal", size, defaultSize = 50, onSizeChange, min = 10, max = 90, step = 2, handleLabel = "Resize panels", children, ...props }, ref) {
+	const handleId = useId();
+	const containerRef = useRef(null);
+	const containerRefs = useComposedRefs(containerRef, ref);
+	const draggingRef = useRef(false);
+	const [current, setCurrent] = useControllableState({
+		value: size,
+		defaultValue: defaultSize,
+		onChange: onSizeChange
+	});
+	const value = clamp(current ?? defaultSize, min, max);
+	const isHorizontal = orientation === "horizontal";
+	const panels = Children.toArray(children);
+	const first = panels[0] ?? null;
+	const second = panels[1] ?? null;
+	const setFromPointer = (clientX, clientY) => {
+		const el = containerRef.current;
+		if (!el) return;
+		const rect = el.getBoundingClientRect();
+		const pct = isHorizontal ? (clientX - rect.left) / rect.width * 100 : (clientY - rect.top) / rect.height * 100;
+		setCurrent(clamp(Math.round(pct), min, max));
+	};
+	const onPointerDown = (event) => {
+		event.preventDefault();
+		event.currentTarget.setPointerCapture(event.pointerId);
+		draggingRef.current = true;
+	};
+	const onPointerMove = (event) => {
+		if (!draggingRef.current) return;
+		setFromPointer(event.clientX, event.clientY);
+	};
+	const onPointerUp = (event) => {
+		draggingRef.current = false;
+		event.currentTarget.releasePointerCapture(event.pointerId);
+	};
+	const onKeyDown = (event) => {
+		const decKey = isHorizontal ? Keys.ArrowLeft : Keys.ArrowUp;
+		const incKey = isHorizontal ? Keys.ArrowRight : Keys.ArrowDown;
+		if (event.key === decKey) {
+			event.preventDefault();
+			setCurrent(clamp(value - step, min, max));
+		} else if (event.key === incKey) {
+			event.preventDefault();
+			setCurrent(clamp(value + step, min, max));
+		} else if (event.key === Keys.Home) {
+			event.preventDefault();
+			setCurrent(min);
+		} else if (event.key === Keys.End) {
+			event.preventDefault();
+			setCurrent(max);
+		}
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		ref: containerRefs,
+		className: cx("pf-resizable", `pf-resizable--${orientation}`, className),
+		...props,
+		children: [
+			/* @__PURE__ */ jsx("div", {
+				className: "pf-resizable__panel",
+				style: { flexBasis: `${value}%` },
+				children: first
+			}),
+			/* @__PURE__ */ jsx("div", {
+				id: handleId,
+				role: "separator",
+				tabIndex: 0,
+				"aria-orientation": isHorizontal ? "vertical" : "horizontal",
+				"aria-label": handleLabel,
+				"aria-valuenow": value,
+				"aria-valuemin": min,
+				"aria-valuemax": max,
+				className: "pf-resizable__handle",
+				onPointerDown,
+				onPointerMove,
+				onPointerUp,
+				onKeyDown,
+				children: /* @__PURE__ */ jsx("span", {
+					className: "pf-resizable__grip",
+					"aria-hidden": true
+				})
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "pf-resizable__panel pf-resizable__panel--fill",
+				children: second
+			})
+		]
+	});
+});
+Resizable.displayName = "Resizable";
+//#endregion
+export { Resizable };

package/dist/components/RichTextEditor/RichTextEditor2.js

@@ -1,3 +1,4 @@
+"use client";
 import { composeDescribedBy } from "../../a11y/index.js";
 import { cx } from "../../utils/cx.js";
 import { FieldWrapper } from "../../utils/FieldWrapper.js";

package/dist/components/ScrollArea/ScrollArea.css

@@ -0,0 +1,54 @@
+.pf-scroll-area {
+  /* Standard scrollbar styling (Firefox + modern browsers). */
+  scrollbar-color: var(--pf-scrollarea-thumb) transparent;
+  scrollbar-width: thin;
+  /* Reserve a gutter so the scrollbar never overlays (and obscures) content. */
+  scrollbar-gutter: stable;
+}
+
+.pf-scroll-area:focus-visible {
+  border-radius: var(--radius-sm);
+  box-shadow: var(--pf-scrollarea-focus-ring, var(--pf-focus-ring));
+  outline: none;
+}
+
+.pf-scroll-area--vertical {
+  overflow-x: hidden;
+  overflow-y: auto;
+}
+
+.pf-scroll-area--horizontal {
+  overflow-x: auto;
+  overflow-y: hidden;
+}
+
+.pf-scroll-area--both {
+  overflow: auto;
+}
+
+/* WebKit / Blink scrollbar styling. */
+.pf-scroll-area::-webkit-scrollbar {
+  height: 10px;
+  width: 10px;
+}
+
+.pf-scroll-area::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.pf-scroll-area::-webkit-scrollbar-thumb {
+  background: var(--pf-scrollarea-thumb);
+  /* Transparent border + padding-box clip insets the thumb so it reads slimmer. */
+  background-clip: padding-box;
+  border: 2px solid transparent;
+  border-radius: var(--radius-full);
+}
+
+.pf-scroll-area::-webkit-scrollbar-thumb:hover {
+  background: var(--pf-scrollarea-thumb-hover);
+  background-clip: padding-box;
+}
+
+.pf-scroll-area::-webkit-scrollbar-corner {
+  background: transparent;
+}

package/dist/components/ScrollArea/ScrollArea2.js

@@ -0,0 +1,18 @@
+"use client";
+import { cx } from "../../utils/cx.js";
+import './ScrollArea.css';/* empty css           */
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/ScrollArea/ScrollArea.tsx
+var ScrollArea = forwardRef(function ScrollArea({ className, orientation = "vertical", focusable = true, tabIndex, children, ...props }, ref) {
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		className: cx("pf-scroll-area", `pf-scroll-area--${orientation}`, className),
+		tabIndex: tabIndex ?? (focusable ? 0 : void 0),
+		...props,
+		children
+	});
+});
+ScrollArea.displayName = "ScrollArea";
+//#endregion
+export { ScrollArea };

package/dist/components/SectionFooter/SectionFooter2.js

@@ -1,3 +1,4 @@
+"use client";
 import { cx } from "../../utils/cx.js";
 import './SectionFooter.css';/* empty css              */
 import { forwardRef } from "react";

package/dist/components/SectionHeader/SectionHeader2.js

@@ -1,3 +1,4 @@
+"use client";
 import { cx } from "../../utils/cx.js";
 import './SectionHeader.css';/* empty css              */
 import { forwardRef } from "react";

package/dist/components/Select/Select2.js

@@ -1,3 +1,4 @@
+"use client";
 import { Keys, composeDescribedBy, isActivationKey } from "../../a11y/index.js";
 import { useAnchoredPosition } from "../../hooks/useAnchoredPosition.js";
 import { useComposedRefs } from "../../hooks/useComposedRefs.js";

package/dist/components/SidebarNavigation/SidebarNavigation2.js

@@ -1,3 +1,4 @@
+"use client";
 import { cx } from "../../utils/cx.js";
 import './SidebarNavigation.css';/* empty css                  */
 import { forwardRef } from "react";

package/dist/components/SlideoutMenu/SlideoutMenu2.js

@@ -1,3 +1,4 @@
+"use client";
 import { cx } from "../../utils/cx.js";
 import { Icon } from "../Icon/Icon2.js";
 import './SlideoutMenu.css';/* empty css             */

package/dist/components/Slider/Slider2.js

@@ -1,3 +1,4 @@
+"use client";
 import { cx } from "../../utils/cx.js";
 import './Slider.css';/* empty css       */
 import { forwardRef, useId, useMemo, useState } from "react";

package/dist/components/Sparkline/Sparkline2.js

@@ -1,3 +1,4 @@
+"use client";
 import { cx } from "../../utils/cx.js";
 import './Sparkline.css';/* empty css          */
 import { forwardRef, useMemo } from "react";

package/dist/components/Switch/Switch2.js

@@ -1,3 +1,4 @@
+"use client";
 import { cx } from "../../utils/cx.js";
 import './Switch.css';/* empty css       */
 import { forwardRef, useId } from "react";

package/dist/components/Table/Table2.js

@@ -1,3 +1,4 @@
+"use client";
 import { cx } from "../../utils/cx.js";
 import './Table.css';/* empty css      */
 import { useMemo, useState } from "react";

package/dist/components/Tabs/Tabs2.js

@@ -1,3 +1,4 @@
+"use client";
 import { cx } from "../../utils/cx.js";
 import './Tabs.css';/* empty css     */
 import { forwardRef, useEffect, useId, useLayoutEffect, useMemo, useRef, useState } from "react";

package/dist/components/Tag/Tag2.js

@@ -1,3 +1,4 @@
+"use client";
 import { cx } from "../../utils/cx.js";
 import { Icon } from "../Icon/Icon2.js";
 import './Tag.css';/* empty css    */

package/dist/components/TagInput/TagInput.css

@@ -0,0 +1,72 @@
+.pf-taginput {
+  background: var(--pf-taginput-bg);
+  border: 1px solid var(--pf-taginput-border);
+  border-radius: var(--radius-md);
+  cursor: text;
+  min-height: 40px;
+  padding: var(--space-1);
+  transition:
+    border 0.2s,
+    box-shadow 0.2s;
+}
+
+.pf-taginput:focus-within {
+  border-color: var(--pf-taginput-focus-border);
+  box-shadow: var(--pf-taginput-focus-ring, var(--pf-focus-ring));
+}
+
+.pf-taginput--invalid {
+  border-color: var(--pf-taginput-invalid-border);
+}
+
+.pf-taginput--disabled {
+  background: var(--pf-control-bg-disabled);
+  border-color: var(--pf-control-border-disabled);
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+
+.pf-taginput__tags {
+  align-items: center;
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-1);
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.pf-taginput__tag {
+  display: inline-flex;
+}
+
+.pf-taginput__field {
+  display: inline-flex;
+  flex: 1;
+  min-width: 8ch;
+}
+
+.pf-taginput__input {
+  background: transparent;
+  border: none;
+  color: var(--pf-taginput-text);
+  flex: 1;
+  font: inherit;
+  min-width: 0;
+  outline: none;
+  padding: var(--space-1) var(--space-2);
+}
+
+.pf-taginput__input::placeholder {
+  color: var(--pf-taginput-placeholder);
+}
+
+.pf-taginput__input:disabled {
+  cursor: not-allowed;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .pf-taginput {
+    transition: none;
+  }
+}

package/dist/components/TagInput/TagInput2.js

@@ -0,0 +1,116 @@
+"use client";
+import { Keys, composeDescribedBy } from "../../a11y/index.js";
+import { useComposedRefs } from "../../hooks/useComposedRefs.js";
+import { useControllableState } from "../../hooks/useControllableState.js";
+import { cx } from "../../utils/cx.js";
+import { FieldWrapper } from "../../utils/FieldWrapper.js";
+import { Tag } from "../Tag/Tag2.js";
+import './TagInput.css';/* empty css         */
+import { forwardRef, useId, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/TagInput/TagInput.tsx
+var TagInput = forwardRef(function TagInput({ id, value, defaultValue, onValueChange, label, description, error, placeholder = "Add a tag…", max, allowDuplicates = false, delimiters = [Keys.Enter, ","], validate, tagVariant = "neutral", name, required, disabled, className, "aria-describedby": ariaDescribedBy, ...props }, ref) {
+	const generatedId = useId();
+	const fieldId = id ?? generatedId;
+	const descriptionId = description ? `${fieldId}-description` : void 0;
+	const errorId = error ? `${fieldId}-error` : void 0;
+	const describedBy = composeDescribedBy(ariaDescribedBy, descriptionId, errorId);
+	const [tags, setTags] = useControllableState({
+		value,
+		defaultValue: defaultValue ?? [],
+		onChange: onValueChange
+	});
+	const currentTags = tags ?? [];
+	const [draft, setDraft] = useState("");
+	const inputRef = useRef(null);
+	const inputRefs = useComposedRefs(inputRef, ref);
+	const atMax = max !== void 0 && currentTags.length >= max;
+	const addTag = (raw) => {
+		const tag = raw.trim();
+		if (!tag) return;
+		if (atMax) return;
+		if (validate && !validate(tag)) return;
+		const exists = currentTags.some((t) => t.toLowerCase() === tag.toLowerCase());
+		if (!allowDuplicates && exists) {
+			setDraft("");
+			return;
+		}
+		setTags([...currentTags, tag]);
+		setDraft("");
+	};
+	const removeTag = (index) => {
+		setTags(currentTags.filter((_, i) => i !== index));
+	};
+	const onKeyDown = (event) => {
+		if (disabled) return;
+		if (delimiters.includes(event.key)) {
+			if (draft.trim()) {
+				event.preventDefault();
+				addTag(draft);
+			} else if (event.key !== Keys.Enter) event.preventDefault();
+			return;
+		}
+		if (event.key === "Backspace" && draft === "" && currentTags.length > 0) {
+			event.preventDefault();
+			removeTag(currentTags.length - 1);
+		}
+	};
+	const onPaste = (event) => {
+		const text = event.clipboardData.getData("text");
+		if (!/[,\n\t]/.test(text)) return;
+		event.preventDefault();
+		text.split(/[,\n\t]+/).map((t) => t.trim()).filter(Boolean).forEach((t) => addTag(t));
+	};
+	return /* @__PURE__ */ jsx(FieldWrapper, {
+		labelFor: fieldId,
+		label,
+		description,
+		descriptionId,
+		error,
+		errorId,
+		required,
+		children: /* @__PURE__ */ jsxs("div", {
+			className: cx("pf-taginput", error && "pf-taginput--invalid", disabled && "pf-taginput--disabled"),
+			onClick: () => inputRef.current?.focus(),
+			children: [/* @__PURE__ */ jsxs("ul", {
+				className: "pf-taginput__tags",
+				children: [currentTags.map((tag, index) => /* @__PURE__ */ jsx("li", {
+					className: "pf-taginput__tag",
+					children: /* @__PURE__ */ jsx(Tag, {
+						variant: tagVariant,
+						dismissible: !disabled,
+						onDismiss: () => removeTag(index),
+						children: tag
+					})
+				}, `${tag}-${index}`)), /* @__PURE__ */ jsx("li", {
+					className: "pf-taginput__field",
+					children: /* @__PURE__ */ jsx("input", {
+						...props,
+						id: fieldId,
+						ref: inputRefs,
+						type: "text",
+						className: cx("pf-taginput__input", className),
+						value: draft,
+						placeholder: currentTags.length === 0 ? placeholder : "",
+						disabled: disabled || atMax,
+						required: required && currentTags.length === 0,
+						autoComplete: "off",
+						"aria-invalid": error ? true : void 0,
+						"aria-describedby": describedBy,
+						onChange: (event) => setDraft(event.target.value),
+						onKeyDown,
+						onPaste,
+						onBlur: () => addTag(draft)
+					})
+				})]
+			}), name ? currentTags.map((tag, index) => /* @__PURE__ */ jsx("input", {
+				type: "hidden",
+				name,
+				value: tag
+			}, index)) : null]
+		})
+	});
+});
+TagInput.displayName = "TagInput";
+//#endregion
+export { TagInput };

package/dist/components/Textarea/Textarea2.js

@@ -1,3 +1,4 @@
+"use client";
 import { cx } from "../../utils/cx.js";
 import { FieldWrapper } from "../../utils/FieldWrapper.js";
 import './Textarea.css';/* empty css         */