@pitchfork-ui/react 0.8.0 → 0.10.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Leland Rangel
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/a11y/index.js

@@ -1,3 +1,4 @@
+"use client";
 //#region src/a11y/index.ts
 var Keys = {
 	ArrowDown: "ArrowDown",

package/dist/components/Accordion/Accordion2.js

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

package/dist/components/Alert/Alert2.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/Avatar/Avatar2.js

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

package/dist/components/AvatarGroup/AvatarGroup2.js

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

package/dist/components/Badge/Badge2.js

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

package/dist/components/BadgeGroup/BadgeGroup2.js

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

package/dist/components/Breadcrumbs/Breadcrumbs2.js

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

package/dist/components/Button/Button2.js

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

package/dist/components/ButtonGroup/ButtonGroup2.js

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

package/dist/components/Calendar/Calendar2.js

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

package/dist/components/Card/Card2.js

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

package/dist/components/Carousel/Carousel2.js

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

package/dist/components/Checkbox/Checkbox2.js

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

package/dist/components/CodeSnippet/CodeSnippet2.js

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

package/dist/components/Collapsible/Collapsible.css

@@ -0,0 +1,86 @@
+.pf-collapsible {
+  border: 1px solid var(--pf-collapsible-border);
+  border-radius: var(--radius-md);
+}
+
+.pf-collapsible__trigger {
+  align-items: center;
+  background: transparent;
+  border: 0;
+  border-radius: var(--radius-md);
+  color: var(--pf-collapsible-trigger-text);
+  cursor: pointer;
+  display: flex;
+  font: inherit;
+  font-weight: var(--font-weight-medium);
+  gap: var(--space-2);
+  justify-content: space-between;
+  padding: var(--space-3);
+  text-align: start;
+  width: 100%;
+}
+
+.pf-collapsible__trigger:hover:not(:disabled) {
+  background: var(--pf-collapsible-trigger-hover-bg);
+}
+
+.pf-collapsible__trigger:focus-visible {
+  box-shadow: var(--pf-collapsible-focus-ring, var(--pf-focus-ring));
+  outline: none;
+}
+
+.pf-collapsible__trigger:disabled {
+  color: var(--pf-control-text-disabled);
+  cursor: not-allowed;
+}
+
+.pf-collapsible__label {
+  min-width: 0;
+}
+
+.pf-collapsible__icon {
+  align-items: center;
+  color: var(--pf-collapsible-icon);
+  display: inline-flex;
+  flex-shrink: 0;
+  transition: transform var(--pf-transition-fast);
+}
+
+.pf-collapsible__icon svg {
+  display: block;
+  height: 16px;
+  width: 16px;
+}
+
+.pf-collapsible--open .pf-collapsible__icon {
+  transform: rotate(180deg);
+}
+
+/* Height animation via the grid-template-rows 0fr → 1fr technique. */
+.pf-collapsible__panel {
+  display: grid;
+  grid-template-rows: 0fr;
+  transition: grid-template-rows var(--pf-transition-medium);
+}
+
+.pf-collapsible__panel--open {
+  grid-template-rows: 1fr;
+}
+
+.pf-collapsible__content {
+  min-height: 0;
+  overflow: hidden;
+}
+
+.pf-collapsible__content-inner {
+  border-top: 1px solid var(--pf-collapsible-border);
+  color: var(--pf-collapsible-content-text);
+  padding: var(--space-3);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .pf-collapsible__panel,
+  .pf-collapsible__icon {
+    transition: none;
+  }
+}

package/dist/components/Collapsible/Collapsible2.js

@@ -0,0 +1,65 @@
+"use client";
+import { Keys } from "../../a11y/index.js";
+import { useDisclosure } from "../../hooks/useDisclosure.js";
+import { cx } from "../../utils/cx.js";
+import { Icon } from "../Icon/Icon2.js";
+import './Collapsible.css';/* empty css            */
+import { forwardRef, useId } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/Collapsible/Collapsible.tsx
+var Collapsible = forwardRef(function Collapsible({ className, trigger, open, defaultOpen, onOpenChange, disabled = false, showChevron = true, children, ...props }, ref) {
+	const baseId = useId();
+	const triggerId = `${baseId}-trigger`;
+	const contentId = `${baseId}-content`;
+	const disclosure = useDisclosure({
+		open,
+		defaultOpen,
+		onOpenChange,
+		disabled
+	});
+	const isOpen = disclosure.isOpen ?? false;
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		className: cx("pf-collapsible", isOpen && "pf-collapsible--open", className),
+		...props,
+		children: [/* @__PURE__ */ jsxs("button", {
+			id: triggerId,
+			type: "button",
+			className: "pf-collapsible__trigger",
+			disabled,
+			"aria-expanded": isOpen,
+			"aria-controls": contentId,
+			onClick: () => disclosure.toggle(),
+			onKeyDown: (event) => {
+				if (event.key === Keys.Escape && isOpen) disclosure.close();
+			},
+			children: [/* @__PURE__ */ jsx("span", {
+				className: "pf-collapsible__label",
+				children: trigger
+			}), showChevron ? /* @__PURE__ */ jsx("span", {
+				className: "pf-collapsible__icon",
+				"aria-hidden": true,
+				children: /* @__PURE__ */ jsx(Icon, {
+					name: "chevron-down",
+					"aria-hidden": true
+				})
+			}) : null]
+		}), /* @__PURE__ */ jsx("div", {
+			id: contentId,
+			role: "region",
+			"aria-labelledby": triggerId,
+			className: cx("pf-collapsible__panel", isOpen && "pf-collapsible__panel--open"),
+			...!isOpen ? { inert: true } : {},
+			children: /* @__PURE__ */ jsx("div", {
+				className: "pf-collapsible__content",
+				children: /* @__PURE__ */ jsx("div", {
+					className: "pf-collapsible__content-inner",
+					children
+				})
+			})
+		})]
+	});
+});
+Collapsible.displayName = "Collapsible";
+//#endregion
+export { Collapsible };

package/dist/components/Combobox/Combobox2.js

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

package/dist/components/CommandPalette/CommandPalette2.js

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

package/dist/components/ContentDivider/ContentDivider2.js

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

package/dist/components/ContextMenu/ContextMenu.css

@@ -0,0 +1,122 @@
+.pf-context-menu {
+  display: contents;
+}
+
+.pf-context-menu__menu {
+  animation: pf-context-menu-in var(--duration-fast) var(--easing-decelerate);
+  background: var(--pf-contextmenu-bg);
+  border: 1px solid var(--pf-contextmenu-border);
+  border-radius: var(--radius-md);
+  box-shadow: var(--pf-elevation-popover-shadow);
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 180px;
+  outline: none;
+  padding: var(--space-1);
+  z-index: 1100;
+}
+
+.pf-context-menu__menu--exiting {
+  animation: pf-context-menu-out var(--duration-fast) var(--easing-accelerate) forwards;
+}
+
+@keyframes pf-context-menu-in {
+  from {
+    opacity: 0;
+    transform: scale(0.96);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+@keyframes pf-context-menu-out {
+  from {
+    opacity: 1;
+    transform: scale(1);
+  }
+  to {
+    opacity: 0;
+    transform: scale(0.96);
+  }
+}
+
+.pf-context-menu__item {
+  align-items: center;
+  background: var(--pf-contextmenu-bg);
+  border: 0;
+  border-radius: var(--radius-sm);
+  color: var(--pf-contextmenu-text);
+  cursor: pointer;
+  display: flex;
+  font: inherit;
+  gap: var(--space-2);
+  padding: var(--space-2) var(--space-3);
+  text-align: start;
+  width: 100%;
+}
+
+.pf-context-menu__item--active {
+  background: var(--pf-contextmenu-item-active-bg);
+  color: var(--pf-contextmenu-item-active-text);
+}
+
+.pf-context-menu__item:disabled {
+  color: var(--pf-contextmenu-text-muted);
+  cursor: not-allowed;
+}
+
+.pf-context-menu__item--destructive {
+  color: var(--pf-contextmenu-text-danger);
+}
+
+.pf-context-menu__item--destructive.pf-context-menu__item--active {
+  background: var(--pf-contextmenu-danger-active-bg);
+  color: var(--pf-contextmenu-danger-active-text);
+}
+
+.pf-context-menu__item-icon {
+  align-items: center;
+  display: inline-flex;
+  flex-shrink: 0;
+  height: 1rem;
+  justify-content: center;
+  width: 1rem;
+}
+
+.pf-context-menu__item-icon svg {
+  display: block;
+  height: 1rem;
+  width: 1rem;
+}
+
+.pf-context-menu__item-label {
+  flex: 1;
+  min-width: 0;
+}
+
+.pf-context-menu__item-shortcut {
+  color: var(--pf-contextmenu-text-muted);
+  flex-shrink: 0;
+  font-family: var(--font-family-mono, ui-monospace, monospace);
+  font-size: var(--font-size-xs);
+}
+
+.pf-context-menu__item--active .pf-context-menu__item-shortcut {
+  color: inherit;
+}
+
+.pf-context-menu__separator {
+  background: var(--pf-contextmenu-separator);
+  height: 1px;
+  margin: var(--space-1) 0;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .pf-context-menu__menu,
+  .pf-context-menu__menu--exiting {
+    animation: none;
+  }
+}

package/dist/components/ContextMenu/ContextMenu2.js

@@ -0,0 +1,155 @@
+"use client";
+import { Keys } from "../../a11y/index.js";
+import { useComposedRefs } from "../../hooks/useComposedRefs.js";
+import { useListNavigation } from "../../hooks/useListNavigation.js";
+import { useOutsideInteraction } from "../../hooks/useOutsideInteraction.js";
+import { usePresence } from "../../hooks/usePresence.js";
+import { cx } from "../../utils/cx.js";
+import './ContextMenu.css';/* empty css            */
+import { forwardRef, useId, useLayoutEffect, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { createPortal } from "react-dom";
+//#region src/components/ContextMenu/ContextMenu.tsx
+var isSeparator = (entry) => entry.separator === true;
+var VIEWPORT_PADDING = 8;
+var ContextMenu = forwardRef(function ContextMenu({ className, items, disabled = false, onOpenChange, children, onContextMenu, ...props }, ref) {
+	const menuId = useId();
+	const [isOpen, setIsOpen] = useState(false);
+	const [point, setPoint] = useState({
+		x: 0,
+		y: 0
+	});
+	const [coords, setCoords] = useState(null);
+	const rootRefs = useComposedRefs(useRef(null), ref);
+	const menuRef = useRef(null);
+	const { isMounted, isExiting } = usePresence(isOpen, 140);
+	const actionable = items.filter((e) => !isSeparator(e));
+	const { activeIndex, move, setActiveIndex } = useListNavigation({
+		items: actionable,
+		isDisabled: (item) => Boolean(item.disabled)
+	});
+	const setOpen = (open) => {
+		setIsOpen(open);
+		onOpenChange?.(open);
+	};
+	useOutsideInteraction({
+		refs: [menuRef],
+		enabled: isOpen,
+		onInteractOutside: () => setOpen(false)
+	});
+	useLayoutEffect(() => {
+		if (!isMounted || !menuRef.current) return;
+		const rect = menuRef.current.getBoundingClientRect();
+		const maxLeft = window.innerWidth - rect.width - VIEWPORT_PADDING;
+		const maxTop = window.innerHeight - rect.height - VIEWPORT_PADDING;
+		setCoords({
+			left: Math.max(VIEWPORT_PADDING, Math.min(point.x, maxLeft)),
+			top: Math.max(VIEWPORT_PADDING, Math.min(point.y, maxTop))
+		});
+	}, [
+		isMounted,
+		point.x,
+		point.y
+	]);
+	const handleContextMenu = (event) => {
+		onContextMenu?.(event);
+		if (disabled || event.defaultPrevented) return;
+		event.preventDefault();
+		setPoint({
+			x: event.clientX,
+			y: event.clientY
+		});
+		setCoords(null);
+		setActiveIndex(actionable.findIndex((item) => !item.disabled));
+		setOpen(true);
+	};
+	const select = (item) => {
+		if (item.disabled) return;
+		item.onSelect?.();
+		setOpen(false);
+	};
+	const onMenuKeyDown = (event) => {
+		if (event.key === Keys.Escape) {
+			event.preventDefault();
+			setOpen(false);
+		} else if (event.key === Keys.ArrowDown) {
+			event.preventDefault();
+			move("next");
+		} else if (event.key === Keys.ArrowUp) {
+			event.preventDefault();
+			move("previous");
+		} else if (event.key === Keys.Home) {
+			event.preventDefault();
+			move("first");
+		} else if (event.key === Keys.End) {
+			event.preventDefault();
+			move("last");
+		} else if (event.key === Keys.Enter || event.key === Keys.Space) {
+			event.preventDefault();
+			const item = actionable[activeIndex];
+			if (item) select(item);
+		}
+	};
+	useLayoutEffect(() => {
+		if (isMounted && coords) menuRef.current?.focus();
+	}, [isMounted, coords]);
+	let actionableIndex = -1;
+	return /* @__PURE__ */ jsxs("div", {
+		ref: rootRefs,
+		className: cx("pf-context-menu", className),
+		onContextMenu: handleContextMenu,
+		...props,
+		children: [children, isMounted && typeof document !== "undefined" ? createPortal(/* @__PURE__ */ jsx("div", {
+			id: menuId,
+			ref: menuRef,
+			role: "menu",
+			"aria-label": "Context menu",
+			tabIndex: -1,
+			className: cx("pf-context-menu__menu", isExiting && "pf-context-menu__menu--exiting"),
+			style: {
+				position: "fixed",
+				left: coords?.left ?? point.x,
+				top: coords?.top ?? point.y,
+				visibility: coords ? "visible" : "hidden"
+			},
+			onKeyDown: onMenuKeyDown,
+			children: items.map((entry, index) => {
+				if (isSeparator(entry)) return /* @__PURE__ */ jsx("div", {
+					role: "separator",
+					className: "pf-context-menu__separator"
+				}, `sep-${index}`);
+				actionableIndex += 1;
+				const itemIndex = actionableIndex;
+				const isActive = itemIndex === activeIndex;
+				return /* @__PURE__ */ jsxs("button", {
+					type: "button",
+					role: "menuitem",
+					disabled: entry.disabled,
+					className: cx("pf-context-menu__item", isActive && "pf-context-menu__item--active", entry.destructive && "pf-context-menu__item--destructive"),
+					onMouseEnter: () => {
+						if (!entry.disabled) setActiveIndex(itemIndex);
+					},
+					onClick: () => select(entry),
+					children: [
+						entry.icon ? /* @__PURE__ */ jsx("span", {
+							className: "pf-context-menu__item-icon",
+							"aria-hidden": true,
+							children: entry.icon
+						}) : null,
+						/* @__PURE__ */ jsx("span", {
+							className: "pf-context-menu__item-label",
+							children: entry.label
+						}),
+						entry.shortcut ? /* @__PURE__ */ jsx("kbd", {
+							className: "pf-context-menu__item-shortcut",
+							children: entry.shortcut
+						}) : null
+					]
+				}, entry.id ?? `${entry.label}-${index}`);
+			})
+		}), document.body) : null]
+	});
+});
+ContextMenu.displayName = "ContextMenu";
+//#endregion
+export { ContextMenu };

package/dist/components/CreditCard/CreditCard2.js

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

package/dist/components/DatePicker/DatePicker2.js

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

package/dist/components/DateRangePicker/DateRangePicker2.js

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

package/dist/components/Dropdown/Dropdown2.js

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

package/dist/components/EmptyState/EmptyState2.js

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

package/dist/components/FileUploader/FileUploader2.js

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

package/dist/components/GaugeChart/GaugeChart2.js

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

package/dist/components/HeaderNavigation/HeaderNavigation2.js

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

package/dist/components/Heatmap/Heatmap2.js

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

package/dist/components/Icon/Icon2.js

@@ -1,3 +1,4 @@
+"use client";
 import { cx } from "../../utils/cx.js";
 import './Icon.css';/* empty css     */
 import { faBarChart, faCalendar, faCircleCheck, faCircleQuestion, faCircleXmark, faCopy, faCreditCard, faSquareCaretLeft, faSquareCaretRight, faSquareCheck, faStar, faUser } from "@fortawesome/free-regular-svg-icons";
@@ -126,6 +127,23 @@ var customIcons = {
 		"aria-hidden": "true",
 		children: [/* @__PURE__ */ jsx("path", { d: "M12 5v14" }), /* @__PURE__ */ jsx("path", { d: "M5 12h14" })]
 	}),
+	clock: /* @__PURE__ */ jsxs("svg", {
+		width: "1em",
+		height: "1em",
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "2",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		focusable: "false",
+		"aria-hidden": "true",
+		children: [/* @__PURE__ */ jsx("circle", {
+			cx: "12",
+			cy: "12",
+			r: "9"
+		}), /* @__PURE__ */ jsx("path", { d: "M12 7v5l3 2" })]
+	}),
 	"magnifying-glass": /* @__PURE__ */ jsxs("svg", {
 		width: "1em",
 		height: "1em",

package/dist/components/InlineCTA/InlineCTA2.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/Input/Input2.js

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

package/dist/components/Kbd/Kbd2.js

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