@pitchfork-ui/react 0.7.0 → 0.9.0

package/dist/components/CommandPalette/CommandPalette.css

@@ -0,0 +1,225 @@
+/* ── Backdrop ─────────────────────────────────────────────────────────────── */
+
+.pf-command__backdrop {
+  animation: pf-command-backdrop-in var(--pf-transition-fast);
+  background: var(--pf-overlay-backdrop);
+  inset: 0;
+  position: fixed;
+  z-index: 1100;
+}
+
+.pf-command__backdrop--exiting {
+  animation: pf-command-backdrop-out var(--pf-transition-fast) forwards;
+}
+
+@keyframes pf-command-backdrop-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes pf-command-backdrop-out {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+
+/* ── Dialog ───────────────────────────────────────────────────────────────── */
+
+.pf-command {
+  animation: pf-command-in var(--pf-transition-fast) var(--easing-decelerate);
+  background: var(--pf-command-bg);
+  border: 1px solid var(--pf-command-border);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--pf-elevation-overlay-shadow);
+  display: flex;
+  flex-direction: column;
+  left: 50%;
+  max-height: min(560px, 80vh);
+  max-width: 560px;
+  overflow: hidden;
+  position: fixed;
+  top: 12%;
+  transform: translateX(-50%);
+  width: calc(100vw - var(--space-8));
+  z-index: 1101;
+}
+
+.pf-command--exiting {
+  animation: pf-command-out var(--pf-transition-fast) var(--easing-accelerate) forwards;
+}
+
+@keyframes pf-command-in {
+  from {
+    opacity: 0;
+    transform: translateX(-50%) translateY(-8px) scale(0.97);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(-50%) translateY(0) scale(1);
+  }
+}
+
+@keyframes pf-command-out {
+  from {
+    opacity: 1;
+    transform: translateX(-50%) translateY(0) scale(1);
+  }
+  to {
+    opacity: 0;
+    transform: translateX(-50%) translateY(-8px) scale(0.97);
+  }
+}
+
+/* ── Search bar ───────────────────────────────────────────────────────────── */
+
+.pf-command__search {
+  align-items: center;
+  border-block-end: 1px solid var(--pf-command-border);
+  display: flex;
+  flex-shrink: 0;
+  gap: var(--space-2);
+  padding: var(--space-3) var(--space-4);
+}
+
+.pf-command__search-icon {
+  color: var(--pf-command-text-muted);
+  flex-shrink: 0;
+  font-size: 1.1rem;
+}
+
+.pf-command__input {
+  background: transparent;
+  border: none;
+  color: var(--pf-command-text);
+  flex: 1;
+  font-size: var(--font-size-md);
+  min-width: 0;
+  outline: none;
+}
+
+.pf-command__input::placeholder {
+  color: var(--pf-command-text-muted);
+}
+
+.pf-command__esc-hint {
+  background: var(--pf-command-shortcut-bg);
+  border: 1px solid var(--pf-command-border);
+  border-bottom-width: 2px;
+  border-radius: var(--radius-sm);
+  color: var(--pf-command-text-muted);
+  flex-shrink: 0;
+  font-family: var(--font-family-mono);
+  font-size: var(--font-size-xs);
+  padding: 1px 6px;
+}
+
+/* ── Results list ─────────────────────────────────────────────────────────── */
+
+.pf-command__list {
+  overflow-y: auto;
+  padding: var(--space-2);
+}
+
+.pf-command__empty {
+  color: var(--pf-command-text-muted);
+  font-size: var(--font-size-sm);
+  margin: 0;
+  padding: var(--space-6) var(--space-4);
+  text-align: center;
+}
+
+.pf-command__group-label {
+  color: var(--pf-command-text-muted);
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-semibold);
+  letter-spacing: 0.04em;
+  margin: 0;
+  padding: var(--space-2) var(--space-2) var(--space-1);
+  text-transform: uppercase;
+}
+
+/* ── Items ────────────────────────────────────────────────────────────────── */
+
+.pf-command__item {
+  align-items: center;
+  border-radius: var(--radius-md);
+  cursor: pointer;
+  display: flex;
+  gap: var(--space-3);
+  padding: var(--space-2) var(--space-3);
+  transition: background 0.1s;
+}
+
+.pf-command__item--active {
+  background: var(--pf-command-item-active-bg);
+}
+
+.pf-command__item--disabled {
+  cursor: not-allowed;
+  opacity: 0.45;
+}
+
+.pf-command__item-icon {
+  align-items: center;
+  color: var(--pf-command-text-muted);
+  display: inline-flex;
+  flex-shrink: 0;
+  font-size: 1rem;
+  height: 20px;
+  justify-content: center;
+  width: 20px;
+}
+
+.pf-command__item--active .pf-command__item-icon {
+  color: var(--pf-command-item-active-text);
+}
+
+.pf-command__item-content {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  gap: 1px;
+  min-width: 0;
+}
+
+.pf-command__item-label {
+  color: var(--pf-command-text);
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-medium);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.pf-command__item--active .pf-command__item-label {
+  color: var(--pf-command-item-active-text);
+}
+
+.pf-command__item-description {
+  color: var(--pf-command-text-muted);
+  font-size: var(--font-size-xs);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.pf-command__item--active .pf-command__item-description {
+  color: var(--pf-command-item-active-text);
+  opacity: 0.85;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .pf-command__backdrop,
+  .pf-command__backdrop--exiting,
+  .pf-command,
+  .pf-command--exiting {
+    animation: none;
+  }
+}

package/dist/components/CommandPalette/CommandPalette2.js

@@ -0,0 +1,196 @@
+"use client";
+import { Keys } from "../../a11y/index.js";
+import { useFocusTrap } from "../../hooks/useFocusTrap.js";
+import { useListNavigation } from "../../hooks/useListNavigation.js";
+import { usePresence } from "../../hooks/usePresence.js";
+import { cx } from "../../utils/cx.js";
+import { Icon } from "../Icon/Icon2.js";
+import './CommandPalette.css';/* empty css               */
+import { useEffect, useId, useMemo, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { createPortal } from "react-dom";
+//#region src/components/CommandPalette/CommandPalette.tsx
+function CommandPalette({ open, onOpenChange, items, placeholder = "Search commands…", emptyMessage = "No results found." }) {
+	const inputId = useId();
+	const listId = useId();
+	const [query, setQuery] = useState("");
+	const dialogRef = useRef(null);
+	const inputRef = useRef(null);
+	const { isMounted, isExiting } = usePresence(open, 180);
+	useEffect(() => {
+		if (!open) return;
+		const frame = requestAnimationFrame(() => {
+			setQuery("");
+			inputRef.current?.focus();
+		});
+		return () => cancelAnimationFrame(frame);
+	}, [open]);
+	useEffect(() => {
+		if (!isMounted || typeof document === "undefined") return;
+		const prev = document.body.style.overflow;
+		document.body.style.overflow = "hidden";
+		return () => {
+			document.body.style.overflow = prev;
+		};
+	}, [isMounted]);
+	useFocusTrap({
+		containerRef: dialogRef,
+		enabled: open,
+		onEscape: () => onOpenChange(false)
+	});
+	const filtered = useMemo(() => {
+		const q = query.trim().toLowerCase();
+		if (!q) return items;
+		return items.filter((item) => item.label.toLowerCase().includes(q) || item.description?.toLowerCase().includes(q) || item.group?.toLowerCase().includes(q));
+	}, [items, query]);
+	const { activeIndex, move, setActiveIndex } = useListNavigation({
+		items: filtered,
+		isDisabled: (item) => !!item.disabled
+	});
+	useEffect(() => {
+		setActiveIndex(0);
+	}, [query, setActiveIndex]);
+	const selectActive = () => {
+		const item = filtered[activeIndex];
+		if (item && !item.disabled) {
+			item.onSelect();
+			onOpenChange(false);
+		}
+	};
+	const onKeyDown = (e) => {
+		if (e.key === Keys.ArrowDown) {
+			e.preventDefault();
+			move("next");
+		} else if (e.key === Keys.ArrowUp) {
+			e.preventDefault();
+			move("previous");
+		} else if (e.key === Keys.Home) {
+			e.preventDefault();
+			move("first");
+		} else if (e.key === Keys.End) {
+			e.preventDefault();
+			move("last");
+		} else if (e.key === Keys.Enter) {
+			e.preventDefault();
+			selectActive();
+		}
+	};
+	const groupedItems = useMemo(() => {
+		const groups = [];
+		const seen = /* @__PURE__ */ new Map();
+		filtered.forEach((item, index) => {
+			const g = item.group;
+			if (!seen.has(g)) {
+				seen.set(g, groups.length);
+				groups.push({
+					group: g,
+					items: []
+				});
+			}
+			groups[seen.get(g)].items.push({
+				item,
+				index
+			});
+		});
+		return groups;
+	}, [filtered]);
+	const activeOptionId = filtered[activeIndex] ? `${listId}-option-${activeIndex}` : void 0;
+	if (!isMounted || typeof document === "undefined") return null;
+	return createPortal(/* @__PURE__ */ jsx("div", {
+		className: cx("pf-command__backdrop", isExiting && "pf-command__backdrop--exiting"),
+		onClick: () => onOpenChange(false),
+		children: /* @__PURE__ */ jsxs("div", {
+			ref: dialogRef,
+			className: cx("pf-command", isExiting && "pf-command--exiting"),
+			role: "dialog",
+			"aria-modal": "true",
+			"aria-label": "Command palette",
+			tabIndex: -1,
+			onClick: (e) => e.stopPropagation(),
+			onKeyDown,
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: "pf-command__search",
+				children: [
+					/* @__PURE__ */ jsx(Icon, {
+						name: "magnifying-glass",
+						"aria-hidden": true,
+						className: "pf-command__search-icon"
+					}),
+					/* @__PURE__ */ jsx("input", {
+						ref: inputRef,
+						id: inputId,
+						type: "text",
+						className: "pf-command__input",
+						value: query,
+						placeholder,
+						autoComplete: "off",
+						spellCheck: false,
+						role: "combobox",
+						"aria-autocomplete": "list",
+						"aria-expanded": true,
+						"aria-controls": listId,
+						"aria-activedescendant": activeOptionId,
+						onChange: (e) => setQuery(e.target.value)
+					}),
+					/* @__PURE__ */ jsx("kbd", {
+						className: "pf-command__esc-hint",
+						"aria-hidden": true,
+						children: "esc"
+					})
+				]
+			}), /* @__PURE__ */ jsx("div", {
+				id: listId,
+				role: "listbox",
+				"aria-label": "Commands",
+				className: "pf-command__list",
+				children: filtered.length === 0 ? /* @__PURE__ */ jsx("p", {
+					className: "pf-command__empty",
+					role: "presentation",
+					children: emptyMessage
+				}) : groupedItems.map(({ group, items: groupItems }) => /* @__PURE__ */ jsxs("div", {
+					role: "presentation",
+					children: [group ? /* @__PURE__ */ jsx("p", {
+						className: "pf-command__group-label",
+						role: "presentation",
+						children: group
+					}) : null, groupItems.map(({ item, index }) => {
+						const isActive = index === activeIndex;
+						return /* @__PURE__ */ jsxs("div", {
+							id: `${listId}-option-${index}`,
+							role: "option",
+							"aria-selected": isActive,
+							"aria-disabled": item.disabled ? true : void 0,
+							className: cx("pf-command__item", isActive && "pf-command__item--active", item.disabled && "pf-command__item--disabled"),
+							onMouseEnter: () => {
+								if (!item.disabled) setActiveIndex(index);
+							},
+							onMouseDown: (e) => e.preventDefault(),
+							onClick: () => {
+								if (!item.disabled) {
+									item.onSelect();
+									onOpenChange(false);
+								}
+							},
+							children: [item.icon ? /* @__PURE__ */ jsx("span", {
+								className: "pf-command__item-icon",
+								"aria-hidden": true,
+								children: item.icon
+							}) : null, /* @__PURE__ */ jsxs("span", {
+								className: "pf-command__item-content",
+								children: [/* @__PURE__ */ jsx("span", {
+									className: "pf-command__item-label",
+									children: item.label
+								}), item.description ? /* @__PURE__ */ jsx("span", {
+									className: "pf-command__item-description",
+									children: item.description
+								}) : null]
+							})]
+						}, item.id);
+					})]
+				}, group ?? "__ungrouped"))
+			})]
+		})
+	}), document.body);
+}
+//#endregion
+export { CommandPalette };

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/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/DateRangePicker.css

@@ -0,0 +1,258 @@
+.pf-daterange {
+  position: relative;
+}
+
+.pf-daterange__control-row {
+  align-items: center;
+  display: flex;
+  gap: var(--space-1);
+}
+
+/* ── Trigger button ───────────────────────────────────────────────────────── */
+
+.pf-daterange__trigger {
+  align-items: center;
+  background: var(--pf-daterange-bg);
+  border: 1px solid var(--pf-daterange-border);
+  border-radius: var(--radius-md);
+  color: var(--pf-daterange-text);
+  cursor: pointer;
+  display: inline-flex;
+  flex: 1;
+  font-size: var(--font-size-sm);
+  gap: var(--space-2);
+  justify-content: space-between;
+  min-height: 40px;
+  min-width: 0;
+  padding: 0 var(--space-3);
+  text-align: start;
+  transition: border 0.2s;
+}
+
+.pf-daterange__trigger:hover:not(:disabled) {
+  border-color: var(--pf-daterange-border-strong);
+}
+
+.pf-daterange__trigger:focus-visible {
+  box-shadow: var(--pf-daterange-focus-ring, var(--pf-focus-ring));
+  outline: none;
+}
+
+.pf-daterange__trigger:disabled {
+  background: var(--pf-daterange-bg-subtle);
+  color: var(--pf-daterange-text-muted);
+  cursor: not-allowed;
+}
+
+.pf-daterange__trigger--invalid {
+  border-color: var(--pf-daterange-invalid-border);
+}
+
+.pf-daterange__value {
+  align-items: center;
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-1);
+  min-width: 0;
+  overflow: hidden;
+}
+
+.pf-daterange__value--placeholder {
+  color: var(--pf-daterange-text-muted);
+}
+
+.pf-daterange__separator {
+  color: var(--pf-daterange-text-muted);
+}
+
+/* ── Popover ──────────────────────────────────────────────────────────────── */
+
+.pf-daterange__popover {
+  background: var(--pf-daterange-menu-bg);
+  border: 1px solid var(--pf-daterange-menu-border);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--pf-elevation-popover-shadow);
+  color: var(--pf-calendar-text);
+  padding: var(--space-4);
+  position: fixed;
+  z-index: 999;
+}
+
+.pf-daterange__hint {
+  color: var(--pf-daterange-text-muted);
+  font-size: var(--font-size-xs);
+  margin: 0 0 var(--space-3);
+}
+
+/* ── Two-month layout ─────────────────────────────────────────────────────── */
+
+.pf-daterange__months {
+  display: grid;
+  gap: var(--space-4);
+  grid-template-columns: 1fr;
+}
+
+@media (min-width: 640px) {
+  .pf-daterange__months {
+    grid-template-columns: 1fr 1fr;
+  }
+}
+
+/* ── Individual calendar panel ────────────────────────────────────────────── */
+
+.pf-daterange__calendar {
+  background: var(--pf-calendar-bg);
+  color: var(--pf-calendar-text);
+  display: grid;
+  gap: var(--space-2);
+  min-width: 0;
+}
+
+.pf-daterange__cal-header {
+  align-items: center;
+  display: grid;
+  grid-template-columns: 28px 1fr 28px;
+}
+
+.pf-daterange__cal-title {
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-semibold);
+  text-align: center;
+}
+
+/* Nav buttons — desktop right-panel hides its own nav (left panel drives both) */
+.pf-daterange__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-daterange__nav:hover:not(:disabled) {
+  background: var(--pf-calendar-bg-subtle);
+  color: var(--pf-calendar-text);
+}
+
+.pf-daterange__nav:focus-visible {
+  box-shadow: var(--pf-calendar-focus-ring, var(--pf-focus-ring));
+  outline: none;
+}
+
+.pf-daterange__nav svg {
+  display: block;
+  height: 14px;
+  width: 14px;
+}
+
+@media (min-width: 640px) {
+  .pf-daterange__cal-header--hide-nav-desktop .pf-daterange__nav {
+    pointer-events: none;
+    visibility: hidden;
+  }
+}
+
+/* ── Grid & weekday labels ────────────────────────────────────────────────── */
+
+.pf-daterange__grid {
+  display: grid;
+  gap: var(--space-1);
+  grid-template-columns: repeat(7, minmax(0, 1fr));
+}
+
+.pf-daterange__weekday {
+  color: var(--pf-calendar-text-muted);
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-medium);
+  text-align: center;
+}
+
+/* ── Day cells ────────────────────────────────────────────────────────────── */
+
+.pf-daterange__day,
+.pf-daterange__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-daterange__day {
+  background: transparent;
+  border: 0;
+  color: var(--pf-calendar-text);
+  cursor: pointer;
+}
+
+.pf-daterange__day:hover:not(:disabled):not(.pf-daterange__day--selected):not(
+    .pf-daterange__day--in-range
+  ) {
+  background: var(--pf-calendar-bg-subtle);
+}
+
+.pf-daterange__day--outside {
+  color: var(--pf-calendar-text-muted);
+}
+
+.pf-daterange__day--today {
+  background: var(--pf-calendar-today-bg);
+  border: 1.5px solid var(--pf-calendar-today-border);
+}
+
+.pf-daterange__day--selected {
+  background: var(--pf-calendar-selected-bg);
+  color: var(--pf-calendar-selected-text);
+  font-weight: var(--font-weight-semibold);
+}
+
+.pf-daterange__day--selected:hover:not(:disabled) {
+  background: var(--pf-calendar-selected-bg-hover);
+  color: var(--pf-calendar-selected-text);
+}
+
+.pf-daterange__day:disabled {
+  color: var(--pf-calendar-text-muted);
+  cursor: not-allowed;
+  opacity: 0.45;
+}
+
+/* ── Range highlight ──────────────────────────────────────────────────────── */
+
+.pf-daterange__day--in-range {
+  background: var(--pf-daterange-range-bg);
+  border-radius: 0;
+  color: var(--pf-daterange-range-text);
+}
+
+/* In-range overrides today indicator bg (today border still shows through) */
+.pf-daterange__day--today.pf-daterange__day--in-range {
+  background: var(--pf-daterange-range-bg);
+  color: var(--pf-daterange-range-text);
+}
+
+/* Selected caps already have the right bg/color from --selected;
+   just shape the radius to connect flush with the range band. */
+.pf-daterange__day--range-start:not(.pf-daterange__day--range-end) {
+  border-end-end-radius: 0;
+  border-start-end-radius: 0;
+}
+
+.pf-daterange__day--range-end:not(.pf-daterange__day--range-start) {
+  border-end-start-radius: 0;
+  border-start-start-radius: 0;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .pf-daterange__trigger {
+    transition: none;
+  }
+}