@pitchfork-ui/react 0.1.9

package/dist/index.js

@@ -0,0 +1,63 @@
+/* empty css       */
+import { Keys, composeDescribedBy, getFocusableElements, isActivationKey } from "./index3.js";
+import { Icon, getAvailableIconNames, getCustomIconNames } from "./index6.js";
+import { Alert } from "./index8.js";
+import { Avatar } from "./index10.js";
+import { Button } from "./index12.js";
+import { BadgeGroup } from "./index14.js";
+import { ButtonGroup } from "./index16.js";
+import { Breadcrumbs } from "./index18.js";
+import { Input } from "./index21.js";
+import { Badge } from "./index23.js";
+import { Card, CardContent, CardFooter, CardHeader } from "./index25.js";
+import { CreditCard } from "./index27.js";
+import { Checkbox } from "./index29.js";
+import { useAnchoredPosition } from "./index30.js";
+import { useComposedRefs } from "./index31.js";
+import { useControllableState } from "./index32.js";
+import { useDisclosure } from "./index33.js";
+import { useFocusTrap } from "./index34.js";
+import { useListNavigation } from "./index35.js";
+import { useOutsideInteraction } from "./index36.js";
+import { Dropdown } from "./index38.js";
+import { Calendar } from "./index40.js";
+import { Carousel } from "./index42.js";
+import { CodeSnippet } from "./index46.js";
+import { ContentDivider } from "./index48.js";
+import { DatePicker } from "./index50.js";
+import { EmptyState } from "./index52.js";
+import { FileUploader } from "./index54.js";
+import { HeaderNavigation } from "./index56.js";
+import { InlineCTA } from "./index58.js";
+import { BarChart, LineChart } from "./index60.js";
+import { LoadingDots, LoadingSkeleton, LoadingSpinner } from "./index62.js";
+import { MetricCard, MetricGrid } from "./index64.js";
+import { Modal, ModalBody, ModalFooter, ModalHeader } from "./index66.js";
+import { MultiSelect } from "./index68.js";
+import { Notification, NotificationStack } from "./index70.js";
+import { PageHeader, PageHeaderMeta } from "./index72.js";
+import { Pagination } from "./index74.js";
+import { PieChart } from "./index76.js";
+import { ProgressBar, ProgressCircle } from "./index78.js";
+import { ProgressSteps } from "./index80.js";
+import { RadarChart } from "./index82.js";
+import { RadioButton } from "./index84.js";
+import { RadioGroup } from "./index86.js";
+import { RatingBadge, RatingStars } from "./index88.js";
+import { RichTextEditor } from "./index90.js";
+import { SectionFooter } from "./index92.js";
+import { SectionHeader } from "./index94.js";
+import { SidebarNavigation } from "./index96.js";
+import { SlideoutMenu } from "./index98.js";
+import { Switch } from "./index100.js";
+import { Select } from "./index102.js";
+import { Slider } from "./index104.js";
+import { Tag } from "./index106.js";
+import { Table } from "./index108.js";
+import { Tabs } from "./index110.js";
+import { Textarea } from "./index112.js";
+import { Tooltip } from "./index114.js";
+import { TreeView } from "./index116.js";
+import { UtilityButton } from "./index118.js";
+import { VideoPlayer } from "./index120.js";
+export { Alert, Avatar, Badge, BadgeGroup, BarChart, Breadcrumbs, Button, ButtonGroup, Calendar, Card, CardContent, CardFooter, CardHeader, Carousel, Checkbox, CodeSnippet, ContentDivider, CreditCard, DatePicker, Dropdown, EmptyState, FileUploader, HeaderNavigation, Icon, InlineCTA, Input, Keys, LineChart, LoadingDots, LoadingSkeleton, LoadingSpinner, MetricCard, MetricGrid, Modal, ModalBody, ModalFooter, ModalHeader, MultiSelect, Notification, NotificationStack, PageHeader, PageHeaderMeta, Pagination, PieChart, ProgressBar, ProgressCircle, ProgressSteps, RadarChart, RadioButton, RadioGroup, RatingBadge, RatingStars, RichTextEditor, SectionFooter, SectionHeader, Select, SidebarNavigation, SlideoutMenu, Slider, Switch, Table, Tabs, Tag, Textarea, Tooltip, TreeView, UtilityButton, VideoPlayer, composeDescribedBy, getAvailableIconNames, getCustomIconNames, getFocusableElements, isActivationKey, useAnchoredPosition, useComposedRefs, useControllableState, useDisclosure, useFocusTrap, useListNavigation, useOutsideInteraction };

package/dist/index10.js

@@ -0,0 +1,36 @@
+import { cx } from "./index4.js";
+/* empty css       */
+import { forwardRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/Avatar/Avatar.tsx
+var getInitials = (name) => {
+	if (!name) return "?";
+	const parts = name.trim().split(/\s+/).filter(Boolean).slice(0, 2);
+	if (parts.length === 0) return "?";
+	return parts.map((part) => part.charAt(0).toUpperCase()).join("");
+};
+var Avatar = forwardRef(({ src, alt, name, size = "md", status, className, children, ...props }, ref) => {
+	const initials = children ?? getInitials(name);
+	return /* @__PURE__ */ jsxs("span", {
+		ref,
+		className: cx("pf-avatar", `pf-avatar--${size}`, className),
+		role: name ? "img" : void 0,
+		"aria-label": name,
+		...props,
+		children: [src ? /* @__PURE__ */ jsx("img", {
+			className: "pf-avatar__image",
+			src,
+			alt: alt ?? (name ? "" : "Avatar")
+		}) : /* @__PURE__ */ jsx("span", {
+			className: "pf-avatar__fallback",
+			"aria-hidden": true,
+			children: initials
+		}), status ? /* @__PURE__ */ jsx("span", {
+			className: cx("pf-avatar__status", `pf-avatar__status--${status}`),
+			"aria-hidden": true
+		}) : null]
+	});
+});
+Avatar.displayName = "Avatar";
+//#endregion
+export { Avatar };

package/dist/index100.js

@@ -0,0 +1,26 @@
+import { cx } from "./index4.js";
+/* empty css        */
+import { forwardRef, useId } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/Switch/Switch.tsx
+var Switch = forwardRef(({ id, label, className, ...props }, ref) => {
+	const generatedId = useId();
+	const switchId = id ?? generatedId;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "pf-switch-field",
+		children: [/* @__PURE__ */ jsx("input", {
+			ref,
+			id: switchId,
+			type: "checkbox",
+			role: "switch",
+			className: cx("pf-switch", className),
+			...props
+		}), label ? /* @__PURE__ */ jsx("label", {
+			htmlFor: switchId,
+			children: label
+		}) : null]
+	});
+});
+Switch.displayName = "Switch";
+//#endregion
+export { Switch };

package/dist/index102.js

@@ -0,0 +1,190 @@
+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 { forwardRef, useEffect, useId, useMemo, useRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { createPortal } from "react-dom";
+//#region src/components/Select/Select.tsx
+var Select = forwardRef(({ id, options, value, defaultValue, onValueChange, placeholder = "Select an option", name, label, description, error, className, disabled, required, "aria-describedby": ariaDescribedBy, maxVisibleOptions, ...props }, ref) => {
+	const generatedId = useId();
+	const selectId = id ?? generatedId;
+	const descriptionId = description ? `${selectId}-description` : void 0;
+	const errorId = error ? `${selectId}-error` : void 0;
+	const listboxId = `${selectId}-listbox`;
+	const describedBy = composeDescribedBy(ariaDescribedBy, descriptionId, errorId);
+	const [selectedValue, setSelectedValue] = useControllableState({
+		value,
+		defaultValue,
+		onChange: onValueChange
+	});
+	const selectedIndex = useMemo(() => options.findIndex((option) => option.value === selectedValue), [options, selectedValue]);
+	const selectedOption = selectedIndex >= 0 ? options[selectedIndex] : void 0;
+	const disclosure = useDisclosure({ disabled });
+	const { activeIndex, firstEnabledIndex, lastEnabledIndex, move, setActiveIndex } = useListNavigation({
+		items: options,
+		isDisabled: (option) => Boolean(option.disabled),
+		initialIndex: selectedIndex >= 0 && !options[selectedIndex]?.disabled ? selectedIndex : void 0
+	});
+	const { isOpen } = disclosure;
+	const rootRef = useRef(null);
+	const triggerRef = useRef(null);
+	const menuRef = useRef(null);
+	const triggerRefs = useComposedRefs(triggerRef, ref);
+	const menuStyle = useAnchoredPosition({
+		anchorRef: triggerRef,
+		enabled: isOpen,
+		matchAnchorWidth: true
+	});
+	useOutsideInteraction({
+		refs: [rootRef, menuRef],
+		enabled: isOpen,
+		onInteractOutside: disclosure.close
+	});
+	useEffect(() => {
+		if (!isOpen) return;
+		setActiveIndex(selectedIndex >= 0 && !options[selectedIndex]?.disabled ? selectedIndex : firstEnabledIndex);
+	}, [
+		firstEnabledIndex,
+		isOpen,
+		options,
+		selectedIndex,
+		setActiveIndex
+	]);
+	const selectValue = (nextValue) => {
+		setSelectedValue(nextValue);
+	};
+	const onTriggerKeyDown = (event) => {
+		if (disabled) return;
+		if (event.key === Keys.ArrowDown || event.key === Keys.ArrowUp) {
+			event.preventDefault();
+			if (!isOpen) {
+				disclosure.open();
+				return;
+			}
+			const startIndex = activeIndex >= 0 ? activeIndex : selectedIndex;
+			move(event.key === Keys.ArrowDown ? "next" : "previous", startIndex);
+			return;
+		}
+		if (event.key === Keys.Home) {
+			event.preventDefault();
+			if (firstEnabledIndex >= 0) setActiveIndex(firstEnabledIndex);
+			return;
+		}
+		if (event.key === Keys.End) {
+			event.preventDefault();
+			if (lastEnabledIndex >= 0) setActiveIndex(lastEnabledIndex);
+			return;
+		}
+		if (isActivationKey(event.key)) {
+			event.preventDefault();
+			if (!isOpen) {
+				disclosure.open();
+				return;
+			}
+			const activeOption = options[activeIndex];
+			if (activeOption && !activeOption.disabled) {
+				selectValue(activeOption.value);
+				disclosure.close();
+			}
+			return;
+		}
+		if (event.key === Keys.Escape) disclosure.close();
+	};
+	return /* @__PURE__ */ jsx(FieldWrapper, {
+		labelFor: selectId,
+		label,
+		description,
+		descriptionId,
+		error,
+		errorId,
+		required,
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "pf-select",
+			ref: rootRef,
+			children: [
+				/* @__PURE__ */ jsxs("button", {
+					...props,
+					id: selectId,
+					ref: triggerRefs,
+					type: "button",
+					className: cx("pf-select__trigger", isOpen && "pf-select__trigger--open", error && "pf-select__trigger--invalid", className),
+					disabled,
+					"aria-haspopup": "listbox",
+					"aria-expanded": isOpen,
+					"aria-controls": isOpen ? listboxId : void 0,
+					"aria-required": required || void 0,
+					"aria-describedby": describedBy,
+					onClick: () => {
+						disclosure.toggle();
+					},
+					onKeyDown: onTriggerKeyDown,
+					children: [/* @__PURE__ */ jsx("span", {
+						className: cx("pf-select__value", !selectedOption && "pf-select__placeholder"),
+						children: selectedOption?.label ?? placeholder
+					}), /* @__PURE__ */ jsx("span", {
+						"aria-hidden": true,
+						className: cx("pf-select__icon", isOpen && "pf-select__icon--open"),
+						children: /* @__PURE__ */ jsx(Icon, {
+							name: "chevron-down",
+							"aria-hidden": true
+						})
+					})]
+				}),
+				name ? /* @__PURE__ */ jsx("input", {
+					type: "hidden",
+					name,
+					value: selectedOption?.value ?? ""
+				}) : null,
+				isOpen && typeof document !== "undefined" ? createPortal(/* @__PURE__ */ jsx("ul", {
+					id: listboxId,
+					ref: menuRef,
+					className: "pf-select__menu",
+					style: {
+						...menuStyle,
+						...maxVisibleOptions && options.length > 0 ? {
+							maxHeight: `calc(${maxVisibleOptions} * 36px)`,
+							overflowY: "auto"
+						} : {}
+					},
+					role: "listbox",
+					"aria-labelledby": label ? selectId : void 0,
+					children: options.map((option, index) => {
+						const isSelected = option.value === selectedOption?.value;
+						const isActive = index === activeIndex;
+						return /* @__PURE__ */ jsx("li", {
+							id: `${listboxId}-option-${index}`,
+							role: "option",
+							"aria-selected": isSelected,
+							"aria-disabled": option.disabled ? true : void 0,
+							className: cx("pf-select__option", isSelected && "pf-select__option--selected", isActive && "pf-select__option--active", option.disabled && "pf-select__option--disabled"),
+							onMouseEnter: () => {
+								if (!option.disabled) setActiveIndex(index);
+							},
+							onMouseDown: (event) => {
+								event.preventDefault();
+							},
+							onClick: () => {
+								if (option.disabled) return;
+								selectValue(option.value);
+								disclosure.close();
+								triggerRef.current?.focus();
+							},
+							children: option.label
+						}, option.value);
+					})
+				}), document.body) : null
+			]
+		})
+	});
+});
+Select.displayName = "Select";
+//#endregion
+export { Select };

package/dist/index104.js

@@ -0,0 +1,93 @@
+import { cx } from "./index4.js";
+/* empty css         */
+import { forwardRef, useId, useMemo, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/Slider/Slider.tsx
+var clamp = (value, min, max) => {
+	return Math.min(Math.max(value, min), max);
+};
+var Slider = forwardRef(({ id, value, defaultValue, onValueChange, min = 0, max = 100, step = 1, label, description, error, showValue = true, className, disabled, "aria-describedby": ariaDescribedBy, ...props }, ref) => {
+	const generatedId = useId();
+	const sliderId = id ?? generatedId;
+	const descriptionId = description ? `${sliderId}-description` : void 0;
+	const errorId = error ? `${sliderId}-error` : void 0;
+	const describedBy = [
+		ariaDescribedBy,
+		descriptionId,
+		errorId
+	].filter(Boolean).join(" ") || void 0;
+	const minNumber = Number(min);
+	const maxNumber = Number(max);
+	const stepNumber = Number(step);
+	const safeMin = Number.isFinite(minNumber) ? minNumber : 0;
+	const safeMax = Number.isFinite(maxNumber) ? maxNumber : safeMin + 100;
+	const normalizedMax = safeMax >= safeMin ? safeMax : safeMin;
+	const normalizedStep = Number.isFinite(stepNumber) && stepNumber > 0 ? stepNumber : 1;
+	const isControlled = value !== void 0;
+	const [internalValue, setInternalValue] = useState(clamp(defaultValue ?? safeMin, safeMin, normalizedMax));
+	const currentValue = clamp(isControlled ? value ?? safeMin : internalValue, safeMin, normalizedMax);
+	const progressPercent = useMemo(() => {
+		const range = normalizedMax - safeMin;
+		if (range <= 0) return 0;
+		return (currentValue - safeMin) / range * 100;
+	}, [
+		currentValue,
+		normalizedMax,
+		safeMin
+	]);
+	const handleChange = (event) => {
+		const nextValue = Number(event.target.value);
+		if (!isControlled) setInternalValue(nextValue);
+		onValueChange?.(nextValue);
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className: "pf-field",
+		children: [
+			label || showValue ? /* @__PURE__ */ jsxs("div", {
+				className: "pf-slider__header",
+				children: [label ? /* @__PURE__ */ jsxs("label", {
+					className: "pf-field__label",
+					htmlFor: sliderId,
+					children: [label, props.required && /* @__PURE__ */ jsx("span", {
+						className: "pf-field__required",
+						"aria-hidden": "true",
+						children: "*"
+					})]
+				}) : /* @__PURE__ */ jsx("span", {}), showValue ? /* @__PURE__ */ jsx("span", {
+					className: "pf-slider__value",
+					"aria-hidden": true,
+					children: Math.round(currentValue)
+				}) : null]
+			}) : null,
+			/* @__PURE__ */ jsx("input", {
+				...props,
+				ref,
+				id: sliderId,
+				type: "range",
+				value: currentValue,
+				min: safeMin,
+				max: normalizedMax,
+				step: normalizedStep,
+				disabled,
+				className: cx("pf-slider", error && "pf-slider--invalid", className),
+				"aria-invalid": error ? true : void 0,
+				"aria-describedby": describedBy,
+				onChange: handleChange,
+				style: { "--pf-slider-progress": `${progressPercent}%` }
+			}),
+			description ? /* @__PURE__ */ jsx("p", {
+				className: "pf-field__description",
+				id: descriptionId,
+				children: description
+			}) : null,
+			error ? /* @__PURE__ */ jsx("p", {
+				className: "pf-field__error",
+				id: errorId,
+				children: error
+			}) : null
+		]
+	});
+});
+Slider.displayName = "Slider";
+//#endregion
+export { Slider };

package/dist/index106.js

@@ -0,0 +1,27 @@
+import { cx } from "./index4.js";
+import { Icon } from "./index6.js";
+/* empty css         */
+import { forwardRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/Tag/Tag.tsx
+var Tag = forwardRef(({ className, variant = "neutral", dismissible = false, onDismiss, children, ...props }, ref) => /* @__PURE__ */ jsxs("span", {
+	ref,
+	className: cx("pf-tag", `pf-tag--${variant}`, className),
+	...props,
+	children: [/* @__PURE__ */ jsx("span", {
+		className: "pf-tag__label",
+		children
+	}), dismissible ? /* @__PURE__ */ jsx("button", {
+		type: "button",
+		className: "pf-tag__dismiss",
+		"aria-label": "Remove tag",
+		onClick: () => onDismiss?.(),
+		children: /* @__PURE__ */ jsx(Icon, {
+			name: "circle-xmark",
+			"aria-hidden": true
+		})
+	}) : null]
+}));
+Tag.displayName = "Tag";
+//#endregion
+export { Tag };

package/dist/index108.js

@@ -0,0 +1,88 @@
+import { cx } from "./index4.js";
+/* empty css         */
+import { useMemo, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/Table/Table.tsx
+function Table({ className, columns, rows, caption, dense = false, striped = false, hoverable = true, stickyHeader = false, emptyState = "No data available.", defaultSortState, sortState, onSortStateChange, getRowKey, ...props }) {
+	const [internalSortState, setInternalSortState] = useState(defaultSortState);
+	const resolvedSortState = sortState ?? internalSortState;
+	const sortedRows = useMemo(() => {
+		if (!resolvedSortState) return rows;
+		const sortColumn = columns.find((column) => column.key === resolvedSortState.key);
+		if (!sortColumn || !sortColumn.sortable) return rows;
+		const getValue = (row) => {
+			const value = sortColumn.sortValue ? sortColumn.sortValue(row) : row[sortColumn.key];
+			if (value instanceof Date) return value.getTime();
+			if (typeof value === "number") return value;
+			return value == null ? "" : String(value);
+		};
+		const directionFactor = resolvedSortState.direction === "asc" ? 1 : -1;
+		return [...rows].sort((leftRow, rightRow) => {
+			const leftValue = getValue(leftRow);
+			const rightValue = getValue(rightRow);
+			if (typeof leftValue === "number" && typeof rightValue === "number") return (leftValue - rightValue) * directionFactor;
+			return String(leftValue).localeCompare(String(rightValue), void 0, {
+				numeric: true,
+				sensitivity: "base"
+			}) * directionFactor;
+		});
+	}, [
+		columns,
+		resolvedSortState,
+		rows
+	]);
+	const setSort = (nextState) => {
+		if (!sortState) setInternalSortState(nextState);
+		onSortStateChange?.(nextState);
+	};
+	const toggleSort = (column) => {
+		if (!column.sortable) return;
+		if (resolvedSortState?.key !== column.key) {
+			setSort({
+				key: column.key,
+				direction: "asc"
+			});
+			return;
+		}
+		setSort({
+			key: column.key,
+			direction: resolvedSortState.direction === "asc" ? "desc" : "asc"
+		});
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className: cx("pf-table", dense && "pf-table--dense", striped && "pf-table--striped", hoverable && "pf-table--hoverable", stickyHeader && "pf-table--sticky-header", className),
+		...props,
+		children: [caption ? /* @__PURE__ */ jsx("div", {
+			className: "pf-table__caption",
+			children: caption
+		}) : null, /* @__PURE__ */ jsxs("table", {
+			className: "pf-table__native",
+			children: [/* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsx("tr", { children: columns.map((column) => /* @__PURE__ */ jsx("th", {
+				className: cx("pf-table__head-cell", `pf-table__cell--${column.align ?? "left"}`, column.className),
+				scope: "col",
+				"aria-sort": resolvedSortState?.key === column.key ? resolvedSortState.direction === "asc" ? "ascending" : "descending" : "none",
+				style: column.width !== void 0 ? { "--pf-col-width": typeof column.width === "number" ? `${column.width}px` : column.width } : void 0,
+				children: column.sortable ? /* @__PURE__ */ jsxs("button", {
+					type: "button",
+					className: "pf-table__sort-button",
+					onClick: () => toggleSort(column),
+					children: [/* @__PURE__ */ jsx("span", { children: column.header }), /* @__PURE__ */ jsx("span", {
+						className: "pf-table__sort-indicator",
+						"aria-hidden": true,
+						children: resolvedSortState?.key === column.key ? resolvedSortState.direction === "asc" ? "^" : "v" : "-"
+					})]
+				}) : column.header
+			}, column.key)) }) }), /* @__PURE__ */ jsx("tbody", { children: sortedRows.length === 0 ? /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx("td", {
+				className: "pf-table__empty",
+				colSpan: Math.max(columns.length, 1),
+				children: emptyState
+			}) }) : sortedRows.map((row, rowIndex) => /* @__PURE__ */ jsx("tr", { children: columns.map((column) => /* @__PURE__ */ jsx("td", {
+				className: cx("pf-table__body-cell", `pf-table__cell--${column.align ?? "left"}`, column.className),
+				children: row[column.key] ?? "—"
+			}, column.key)) }, getRowKey?.(row, rowIndex) ?? rowIndex)) })]
+		})]
+	});
+}
+Table.displayName = "Table";
+//#endregion
+export { Table };

package/dist/index110.js

@@ -0,0 +1,96 @@
+import { cx } from "./index4.js";
+/* empty css         */
+import { forwardRef, useId, useMemo, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/Tabs/Tabs.tsx
+function getFirstEnabledValue(items) {
+	return items.find((item) => !item.disabled)?.value;
+}
+var Tabs = forwardRef(function Tabs({ className, items, value, defaultValue, onValueChange, variant = "underline", size = "md", fullWidth = false, ...props }, ref) {
+	const baseId = useId();
+	const isControlled = value !== void 0;
+	const [internalValue, setInternalValue] = useState(defaultValue ?? getFirstEnabledValue(items));
+	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 setSelectedValue = (nextValue) => {
+		if (!isControlled) setInternalValue(nextValue);
+		onValueChange?.(nextValue);
+	};
+	const enabledIndexes = items.map((item, index) => ({
+		item,
+		index
+	})).filter(({ item }) => !item.disabled).map(({ index }) => index);
+	const moveSelection = (currentIndex, direction) => {
+		if (enabledIndexes.length === 0) return;
+		const targetIndex = direction === "first" ? enabledIndexes[0] ?? currentIndex : direction === "last" ? enabledIndexes[enabledIndexes.length - 1] ?? currentIndex : (() => {
+			const currentEnabledPosition = enabledIndexes.indexOf(currentIndex);
+			const fallbackPosition = direction === "next" ? 0 : enabledIndexes.length - 1;
+			return enabledIndexes[((currentEnabledPosition === -1 ? fallbackPosition : currentEnabledPosition) + (direction === "next" ? 1 : -1) + enabledIndexes.length) % enabledIndexes.length] ?? currentIndex;
+		})();
+		const nextItem = items[targetIndex];
+		if (!nextItem || nextItem.disabled) return;
+		setSelectedValue(nextItem.value);
+		buttonRefs.current[targetIndex]?.focus();
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		className: cx("pf-tabs", className),
+		...props,
+		children: [/* @__PURE__ */ jsx("div", {
+			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) => {
+				const isSelected = item.value === selectedItem?.value;
+				const tabId = `${baseId}-tab-${item.value}`;
+				const panelId = `${baseId}-panel-${item.value}`;
+				return /* @__PURE__ */ jsx("button", {
+					ref: (element) => {
+						buttonRefs.current[index] = element;
+					},
+					id: tabId,
+					type: "button",
+					role: "tab",
+					className: cx("pf-tabs__tab", `pf-tabs__tab--${variant}`, `pf-tabs__tab--${size}`, isSelected && "pf-tabs__tab--active"),
+					"aria-controls": panelId,
+					"aria-selected": isSelected,
+					tabIndex: item.disabled ? -1 : 0,
+					disabled: item.disabled,
+					onClick: () => {
+						if (!item.disabled) setSelectedValue(item.value);
+					},
+					onKeyDown: (event) => {
+						if (event.key === "ArrowRight") {
+							event.preventDefault();
+							moveSelection(index, "next");
+						} else if (event.key === "ArrowLeft") {
+							event.preventDefault();
+							moveSelection(index, "previous");
+						} else if (event.key === "Home") {
+							event.preventDefault();
+							moveSelection(index, "first");
+						} else if (event.key === "End") {
+							event.preventDefault();
+							moveSelection(index, "last");
+						} else if (event.key === "Enter" || event.key === " ") {
+							event.preventDefault();
+							if (!item.disabled) setSelectedValue(item.value);
+						}
+					},
+					children: item.label
+				}, item.value);
+			})
+		}), selectedItem ? /* @__PURE__ */ jsx("div", {
+			id: `${baseId}-panel-${selectedItem.value}`,
+			className: "pf-tabs__panel",
+			role: "tabpanel",
+			"aria-labelledby": `${baseId}-tab-${selectedItem.value}`,
+			tabIndex: 0,
+			children: selectedItem.content
+		}) : null]
+	});
+});
+Tabs.displayName = "Tabs";
+//#endregion
+export { Tabs };

package/dist/index112.js

@@ -0,0 +1,38 @@
+import { cx } from "./index4.js";
+import { FieldWrapper } from "./index19.js";
+/* empty css         */
+import { forwardRef, useId } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/Textarea/Textarea.tsx
+var Textarea = forwardRef(({ id, label, description, error, className, "aria-describedby": ariaDescribedBy, rows = 4, ...props }, ref) => {
+	const generatedId = useId();
+	const textareaId = id ?? generatedId;
+	const descriptionId = description ? `${textareaId}-description` : void 0;
+	const errorId = error ? `${textareaId}-error` : void 0;
+	const describedBy = [
+		ariaDescribedBy,
+		descriptionId,
+		errorId
+	].filter(Boolean).join(" ") || void 0;
+	return /* @__PURE__ */ jsx(FieldWrapper, {
+		labelFor: textareaId,
+		label,
+		description,
+		descriptionId,
+		error,
+		errorId,
+		required: props.required,
+		children: /* @__PURE__ */ jsx("textarea", {
+			ref,
+			id: textareaId,
+			rows,
+			className: cx("pf-textarea", error && "pf-textarea--invalid", className),
+			"aria-invalid": error ? true : void 0,
+			"aria-describedby": describedBy,
+			...props
+		})
+	});
+});
+Textarea.displayName = "Textarea";
+//#endregion
+export { Textarea };