@pitchfork-ui/react 0.9.0 → 0.11.0

package/dist/components/Timeline/Timeline.css

@@ -0,0 +1,128 @@
+.pf-timeline {
+  display: grid;
+  gap: 0;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.pf-timeline__item {
+  /* Shared line height for the title; markers center themselves on it. */
+  --pf-timeline-line: 1.375rem;
+  --pf-timeline-marker-size: 16px;
+  column-gap: var(--space-3);
+  display: grid;
+  grid-template-columns: auto 1fr;
+}
+
+/* ── Rail (marker + connector) ────────────────────────────────────────────── */
+
+.pf-timeline__rail {
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+}
+
+.pf-timeline__marker {
+  align-items: center;
+  background: var(--pf-timeline-marker-bg);
+  border: 2px solid var(--pf-timeline-marker-border);
+  border-radius: var(--radius-full);
+  color: var(--pf-timeline-marker-icon);
+  display: inline-flex;
+  flex-shrink: 0;
+  height: var(--pf-timeline-marker-size);
+  justify-content: center;
+  /* Vertically center the marker on the title's first line. */
+  margin-top: calc((var(--pf-timeline-line) - var(--pf-timeline-marker-size)) / 2);
+  width: var(--pf-timeline-marker-size);
+}
+
+/* Markers carrying an icon are larger to fit it. */
+.pf-timeline__marker:has(.pf-timeline__marker-icon) {
+  --pf-timeline-marker-size: 28px;
+}
+
+.pf-timeline__marker-icon {
+  align-items: center;
+  display: inline-flex;
+  font-size: 0.8rem;
+  justify-content: center;
+}
+
+.pf-timeline__marker-icon svg {
+  display: block;
+  height: 14px;
+  width: 14px;
+}
+
+.pf-timeline__marker--default {
+  background: var(--pf-timeline-default-bg);
+  border-color: var(--pf-timeline-default-border);
+  color: var(--pf-timeline-default-icon);
+}
+
+.pf-timeline__marker--success {
+  background: var(--pf-timeline-success-bg);
+  border-color: var(--pf-timeline-success-border);
+  color: var(--pf-timeline-success-icon);
+}
+
+.pf-timeline__marker--warning {
+  background: var(--pf-timeline-warning-bg);
+  border-color: var(--pf-timeline-warning-border);
+  color: var(--pf-timeline-warning-icon);
+}
+
+.pf-timeline__marker--danger {
+  background: var(--pf-timeline-danger-bg);
+  border-color: var(--pf-timeline-danger-border);
+  color: var(--pf-timeline-danger-icon);
+}
+
+.pf-timeline__connector {
+  background: var(--pf-timeline-connector);
+  flex: 1;
+  margin: var(--space-1) 0;
+  min-height: var(--space-4);
+  width: 2px;
+}
+
+/* ── Content ──────────────────────────────────────────────────────────────── */
+
+.pf-timeline__content {
+  padding-bottom: var(--space-5);
+}
+
+.pf-timeline__item--last .pf-timeline__content {
+  padding-bottom: 0;
+}
+
+.pf-timeline__header {
+  align-items: baseline;
+  column-gap: var(--space-2);
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+}
+
+.pf-timeline__title {
+  color: var(--pf-timeline-title);
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-medium);
+  line-height: var(--pf-timeline-line);
+  margin: 0;
+}
+
+.pf-timeline__timestamp {
+  color: var(--pf-timeline-timestamp);
+  font-size: var(--font-size-xs);
+  flex-shrink: 0;
+  white-space: nowrap;
+}
+
+.pf-timeline__description {
+  color: var(--pf-timeline-description);
+  font-size: var(--font-size-sm);
+  margin-top: var(--space-1);
+}

package/dist/components/Timeline/Timeline2.js

@@ -0,0 +1,49 @@
+"use client";
+import { cx } from "../../utils/cx.js";
+import './Timeline.css';/* empty css         */
+import { forwardRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/Timeline/Timeline.tsx
+var Timeline = forwardRef(function Timeline({ className, items, ...props }, ref) {
+	return /* @__PURE__ */ jsx("ol", {
+		ref,
+		className: cx("pf-timeline", className),
+		...props,
+		children: items.map((item, index) => {
+			const tone = item.tone ?? "default";
+			const isLast = index === items.length - 1;
+			return /* @__PURE__ */ jsxs("li", {
+				className: cx("pf-timeline__item", isLast && "pf-timeline__item--last"),
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: "pf-timeline__rail",
+					"aria-hidden": true,
+					children: [/* @__PURE__ */ jsx("span", {
+						className: cx("pf-timeline__marker", `pf-timeline__marker--${tone}`),
+						children: item.icon ? /* @__PURE__ */ jsx("span", {
+							className: "pf-timeline__marker-icon",
+							children: item.icon
+						}) : null
+					}), !isLast ? /* @__PURE__ */ jsx("span", { className: "pf-timeline__connector" }) : null]
+				}), /* @__PURE__ */ jsxs("div", {
+					className: "pf-timeline__content",
+					children: [/* @__PURE__ */ jsxs("div", {
+						className: "pf-timeline__header",
+						children: [/* @__PURE__ */ jsx("p", {
+							className: "pf-timeline__title",
+							children: item.title
+						}), item.timestamp ? /* @__PURE__ */ jsx("span", {
+							className: "pf-timeline__timestamp",
+							children: item.timestamp
+						}) : null]
+					}), item.description ? /* @__PURE__ */ jsx("div", {
+						className: "pf-timeline__description",
+						children: item.description
+					}) : null]
+				})]
+			}, item.id ?? index);
+		})
+	});
+});
+Timeline.displayName = "Timeline";
+//#endregion
+export { Timeline };

package/dist/components/Toolbar/Toolbar.css

@@ -0,0 +1,37 @@
+.pf-toolbar {
+  align-items: center;
+  background: var(--pf-toolbar-bg);
+  border: 1px solid var(--pf-toolbar-border);
+  border-radius: var(--radius-md);
+  display: flex;
+  gap: var(--space-1);
+  padding: var(--space-1);
+}
+
+.pf-toolbar--horizontal {
+  flex-direction: row;
+}
+
+.pf-toolbar--vertical {
+  align-items: stretch;
+  flex-direction: column;
+  width: fit-content;
+}
+
+/* ── Separator ────────────────────────────────────────────────────────────── */
+
+.pf-toolbar__separator {
+  background: var(--pf-toolbar-separator);
+  flex-shrink: 0;
+}
+
+.pf-toolbar--horizontal .pf-toolbar__separator {
+  align-self: stretch;
+  margin: var(--space-1) var(--space-1);
+  width: 1px;
+}
+
+.pf-toolbar--vertical .pf-toolbar__separator {
+  height: 1px;
+  margin: var(--space-1) var(--space-1);
+}

package/dist/components/Toolbar/Toolbar2.js

@@ -0,0 +1,71 @@
+"use client";
+import { Keys } from "../../a11y/index.js";
+import { useComposedRefs } from "../../hooks/useComposedRefs.js";
+import { cx } from "../../utils/cx.js";
+import './Toolbar.css';/* empty css        */
+import { forwardRef, useEffect, useRef } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/Toolbar/Toolbar.tsx
+var ITEM_SELECTOR = "button:not(:disabled), a[href], input:not(:disabled), select:not(:disabled), textarea:not(:disabled), [data-toolbar-item]:not([aria-disabled=\"true\"])";
+var Toolbar = forwardRef(function Toolbar({ className, orientation = "horizontal", onKeyDown, onFocus, children, ...props }, ref) {
+	const rootRef = useRef(null);
+	const refs = useComposedRefs(rootRef, ref);
+	const getItems = () => rootRef.current ? Array.from(rootRef.current.querySelectorAll(ITEM_SELECTOR)) : [];
+	useEffect(() => {
+		const items = getItems();
+		if (items.length === 0) return;
+		const current = items.find((el) => el.getAttribute("tabindex") === "0");
+		items.forEach((el, i) => {
+			el.tabIndex = (current ? el === current : i === 0) ? 0 : -1;
+		});
+	});
+	const handleFocus = (event) => {
+		const items = getItems();
+		const target = event.target;
+		if (items.includes(target)) items.forEach((el) => {
+			el.tabIndex = el === target ? 0 : -1;
+		});
+		onFocus?.(event);
+	};
+	const handleKeyDown = (event) => {
+		onKeyDown?.(event);
+		if (event.defaultPrevented) return;
+		const nextKey = orientation === "vertical" ? Keys.ArrowDown : Keys.ArrowRight;
+		const prevKey = orientation === "vertical" ? Keys.ArrowUp : Keys.ArrowLeft;
+		const items = getItems();
+		if (items.length === 0) return;
+		const currentIndex = items.indexOf(document.activeElement);
+		if (currentIndex === -1) return;
+		let nextIndex = -1;
+		if (event.key === nextKey) nextIndex = (currentIndex + 1) % items.length;
+		else if (event.key === prevKey) nextIndex = (currentIndex - 1 + items.length) % items.length;
+		else if (event.key === Keys.Home) nextIndex = 0;
+		else if (event.key === Keys.End) nextIndex = items.length - 1;
+		if (nextIndex >= 0) {
+			event.preventDefault();
+			items[nextIndex].focus();
+		}
+	};
+	return /* @__PURE__ */ jsx("div", {
+		ref: refs,
+		role: "toolbar",
+		"aria-orientation": orientation,
+		className: cx("pf-toolbar", `pf-toolbar--${orientation}`, className),
+		onKeyDown: handleKeyDown,
+		onFocus: handleFocus,
+		...props,
+		children
+	});
+});
+Toolbar.displayName = "Toolbar";
+var ToolbarSeparator = forwardRef(function ToolbarSeparator({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx("span", {
+		ref,
+		role: "separator",
+		className: cx("pf-toolbar__separator", className),
+		...props
+	});
+});
+ToolbarSeparator.displayName = "ToolbarSeparator";
+//#endregion
+export { Toolbar, ToolbarSeparator };

package/dist/components/UtilityButton/UtilityButton.css

@@ -59,14 +59,14 @@
   background: var(--pf-utility-btn-brand-bg-hover);
 }
 
-.pf-utility-button--danger {
-  background: var(--pf-utility-btn-danger-bg);
-  border-color: var(--pf-utility-btn-danger-border);
-  color: var(--pf-utility-btn-danger-text);
+.pf-utility-button--destructive {
+  background: var(--pf-utility-btn-destructive-bg);
+  border-color: var(--pf-utility-btn-destructive-border);
+  color: var(--pf-utility-btn-destructive-text);
 }
 
-.pf-utility-button--danger:hover:not(:disabled) {
-  background: var(--pf-utility-btn-danger-bg-hover);
+.pf-utility-button--destructive:hover:not(:disabled) {
+  background: var(--pf-utility-btn-destructive-bg-hover);
 }
 
 .pf-utility-button__icon {

package/dist/components/VisuallyHidden/VisuallyHidden.css

@@ -0,0 +1,26 @@
+.pf-visually-hidden {
+  border: 0;
+  clip: rect(0 0 0 0);
+  clip-path: inset(50%);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+}
+
+/* Reveal on keyboard focus (skip-link pattern). */
+.pf-visually-hidden--focusable:focus,
+.pf-visually-hidden--focusable:focus-within {
+  clip: auto;
+  clip-path: none;
+  height: auto;
+  margin: 0;
+  overflow: visible;
+  /* Flow back into layout so the revealed content doesn't overlap siblings. */
+  position: static;
+  white-space: normal;
+  width: auto;
+}

package/dist/components/VisuallyHidden/VisuallyHidden2.js

@@ -0,0 +1,21 @@
+"use client";
+import { cx } from "../../utils/cx.js";
+import './VisuallyHidden.css';/* empty css               */
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/VisuallyHidden/VisuallyHidden.tsx
+/**
+* Hides content visually while keeping it available to screen readers and other
+* assistive technology. Use for labels, instructions, and status text that are
+* implied visually but need to be announced.
+*/
+var VisuallyHidden = forwardRef(function VisuallyHidden({ as = "span", focusable = false, className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(as, {
+		ref,
+		className: cx("pf-visually-hidden", focusable && "pf-visually-hidden--focusable", className),
+		...props
+	});
+});
+VisuallyHidden.displayName = "VisuallyHidden";
+//#endregion
+export { VisuallyHidden };