@pitchfork-ui/react 0.1.9 → 0.6.0

package/README.md

@@ -12,21 +12,36 @@ Accessible, token-driven React components for [lelandrangel.com](https://lelandr
 npm install @pitchfork-ui/react
 ```
 
-> **Peer dependencies** — install these if not already in your project:
+> **Required peer dependencies** — install these if not already in your project:
 >
 > ```bash
 > npm install @fortawesome/fontawesome-svg-core @fortawesome/free-regular-svg-icons @fortawesome/react-fontawesome
 > ```
+>
+> **Optional peer dependencies** — only needed if you use specific components:
+>
+> | Package                | Component     |
+> | ---------------------- | ------------- |
+> | `prism-react-renderer` | `CodeSnippet` |
+>
+> ```bash
+> npm install prism-react-renderer
+> ```
 
 ## Setup
 
-Import the stylesheet once at your app's entry point:
+No stylesheet import needed. Component CSS and design token variables are injected automatically when components are imported.
 
-```ts
-import '@pitchfork-ui/react/styles.css';
+```tsx
+// CSS loads automatically — nothing else required
+import { Button } from '@pitchfork-ui/react';
 ```
 
-This single file includes all component styles and design token variables. No separate token package required.
+> **CJS / SSR environments** — if your bundler does not support CSS-in-JS injection, import the full stylesheet manually:
+>
+> ```ts
+> import '@pitchfork-ui/react/styles.css';
+> ```
 
 ## Usage
 

package/dist/components/Accordion/Accordion.css

@@ -0,0 +1,85 @@
+.pf-accordion {
+  border: 1px solid var(--pf-accordion-border);
+  border-radius: var(--radius-md);
+  overflow: hidden;
+}
+
+.pf-accordion__item + .pf-accordion__item {
+  border-top: 1px solid var(--pf-accordion-border);
+}
+
+.pf-accordion__heading {
+  margin: 0;
+  font-size: inherit;
+  font-weight: inherit;
+}
+
+.pf-accordion__trigger {
+  align-items: center;
+  background: transparent;
+  border: 0;
+  color: var(--pf-accordion-trigger-text);
+  cursor: pointer;
+  display: flex;
+  font: inherit;
+  font-weight: var(--font-weight-medium);
+  gap: var(--space-3);
+  justify-content: space-between;
+  padding: var(--space-3) var(--space-4);
+  text-align: start;
+  width: 100%;
+}
+
+.pf-accordion__trigger:hover:not(:disabled) {
+  background: var(--pf-accordion-trigger-bg-hover);
+}
+
+.pf-accordion__trigger:focus-visible {
+  box-shadow: var(--pf-focus-ring);
+  outline: none;
+}
+
+.pf-accordion__trigger:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+.pf-accordion__icon {
+  align-items: center;
+  color: var(--pf-accordion-icon);
+  display: inline-flex;
+  flex-shrink: 0;
+  transition: transform var(--pf-transition-fast);
+}
+
+.pf-accordion__item--open .pf-accordion__icon {
+  transform: rotate(180deg);
+}
+
+/* Animate open/close height with the grid-template-rows 0fr → 1fr technique */
+.pf-accordion__panel {
+  display: grid;
+  grid-template-rows: 0fr;
+  transition: grid-template-rows var(--pf-transition-medium);
+}
+
+.pf-accordion__panel--open {
+  grid-template-rows: 1fr;
+}
+
+.pf-accordion__content {
+  min-height: 0;
+  overflow: hidden;
+  color: var(--pf-accordion-content-text);
+}
+
+.pf-accordion__content-inner {
+  padding: 0 var(--space-4) var(--space-4);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .pf-accordion__panel,
+  .pf-accordion__icon {
+    transition: none;
+  }
+}

package/dist/components/Accordion/Accordion2.js

@@ -0,0 +1,96 @@
+import { Keys } from "../../a11y/index.js";
+import { useControllableState } from "../../hooks/useControllableState.js";
+import { cx } from "../../utils/cx.js";
+import { Icon } from "../Icon/Icon2.js";
+import './Accordion.css';/* empty css          */
+import { forwardRef, useId, useRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/Accordion/Accordion.tsx
+var Accordion = forwardRef(function Accordion({ className, items, type = "single", value, defaultValue, onValueChange, headingLevel = 3, ...props }, ref) {
+	const baseId = useId();
+	const [expanded = [], setExpanded] = useControllableState({
+		value,
+		defaultValue: defaultValue ?? [],
+		onChange: onValueChange
+	});
+	const triggerRefs = useRef([]);
+	const toggle = (itemValue) => {
+		const isOpen = expanded.includes(itemValue);
+		if (type === "single") setExpanded(isOpen ? [] : [itemValue]);
+		else setExpanded(isOpen ? expanded.filter((v) => v !== itemValue) : [...expanded, itemValue]);
+	};
+	const enabledIndexes = items.map((item, index) => ({
+		item,
+		index
+	})).filter(({ item }) => !item.disabled).map(({ index }) => index);
+	const onTriggerKeyDown = (event, index) => {
+		if (enabledIndexes.length === 0) return;
+		const position = enabledIndexes.indexOf(index);
+		let target;
+		if (event.key === Keys.ArrowDown) target = enabledIndexes[(position + 1) % enabledIndexes.length];
+		else if (event.key === Keys.ArrowUp) target = enabledIndexes[(position - 1 + enabledIndexes.length) % enabledIndexes.length];
+		else if (event.key === Keys.Home) target = enabledIndexes[0];
+		else if (event.key === Keys.End) target = enabledIndexes[enabledIndexes.length - 1];
+		if (target !== void 0) {
+			event.preventDefault();
+			triggerRefs.current[target]?.focus();
+		}
+	};
+	const Heading = `h${headingLevel}`;
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		className: cx("pf-accordion", className),
+		...props,
+		children: items.map((item, index) => {
+			const isOpen = expanded.includes(item.value);
+			const triggerId = `${baseId}-trigger-${item.value}`;
+			const panelId = `${baseId}-panel-${item.value}`;
+			return /* @__PURE__ */ jsxs("div", {
+				className: cx("pf-accordion__item", isOpen && "pf-accordion__item--open"),
+				children: [/* @__PURE__ */ jsx(Heading, {
+					className: "pf-accordion__heading",
+					children: /* @__PURE__ */ jsxs("button", {
+						ref: (element) => {
+							triggerRefs.current[index] = element;
+						},
+						type: "button",
+						id: triggerId,
+						className: "pf-accordion__trigger",
+						"aria-expanded": isOpen,
+						"aria-controls": panelId,
+						disabled: item.disabled,
+						onClick: () => toggle(item.value),
+						onKeyDown: (event) => onTriggerKeyDown(event, index),
+						children: [/* @__PURE__ */ jsx("span", {
+							className: "pf-accordion__title",
+							children: item.title
+						}), /* @__PURE__ */ jsx("span", {
+							className: "pf-accordion__icon",
+							"aria-hidden": true,
+							children: /* @__PURE__ */ jsx(Icon, {
+								name: "chevron-down",
+								"aria-hidden": true
+							})
+						})]
+					})
+				}), /* @__PURE__ */ jsx("div", {
+					className: cx("pf-accordion__panel", isOpen && "pf-accordion__panel--open"),
+					children: /* @__PURE__ */ jsx("div", {
+						id: panelId,
+						role: "region",
+						"aria-labelledby": triggerId,
+						className: "pf-accordion__content",
+						...isOpen ? {} : { inert: true },
+						children: /* @__PURE__ */ jsx("div", {
+							className: "pf-accordion__content-inner",
+							children: item.content
+						})
+					})
+				})]
+			}, item.value);
+		})
+	});
+});
+Accordion.displayName = "Accordion";
+//#endregion
+export { Accordion };

package/dist/components/Alert/Alert.css

@@ -0,0 +1,111 @@
+.pf-alert {
+  align-items: flex-start;
+  border: 1px solid var(--pf-alert-border);
+  border-radius: var(--radius-md);
+  display: flex;
+  gap: var(--space-3);
+  padding: var(--space-3);
+}
+
+.pf-alert--info {
+  background: var(--pf-alert-info-background);
+  border-color: var(--pf-alert-info-border);
+  color: var(--pf-alert-info-foreground);
+}
+
+.pf-alert--success {
+  background: var(--pf-alert-success-background);
+  border-color: var(--pf-alert-success-border);
+  color: var(--pf-alert-success-foreground);
+}
+
+.pf-alert--warning {
+  background: var(--pf-alert-warning-background);
+  border-color: var(--pf-alert-warning-border);
+  color: var(--pf-alert-warning-foreground);
+}
+
+.pf-alert--danger {
+  background: var(--pf-alert-danger-background);
+  border-color: var(--pf-alert-danger-border);
+  color: var(--pf-alert-danger-foreground);
+}
+
+.pf-alert__icon {
+  align-items: center;
+  display: inline-flex;
+  font-size: var(--font-size-lg);
+  height: 1em;
+  justify-content: center;
+  line-height: 1;
+  margin-top: 1px;
+  width: 1em;
+}
+
+.pf-alert__content {
+  display: grid;
+  gap: var(--space-1);
+}
+
+.pf-alert__title {
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-semibold);
+  line-height: 1.3;
+  margin: 0;
+}
+
+.pf-alert__description {
+  font-size: var(--font-size-sm);
+  line-height: 1.4;
+}
+
+.pf-alert__description p {
+  margin: 0;
+}
+
+.pf-alert__dismiss {
+  align-items: center;
+  background: transparent;
+  border: 0;
+  border-radius: var(--radius-sm);
+  color: currentColor;
+  cursor: pointer;
+  display: inline-flex;
+  font-size: var(--font-size-md);
+  justify-content: center;
+  margin-inline-start: auto;
+  padding: 0;
+}
+
+.pf-alert__dismiss:focus-visible {
+  box-shadow: var(--pf-alert-focus-ring, var(--pf-focus-ring));
+  outline: none;
+}
+
+/* Exit: fade and collapse so surrounding content reflows when dismissed. */
+.pf-alert--exiting {
+  animation: pf-alert-out var(--duration-moderate) var(--easing-accelerate) forwards;
+  overflow: hidden;
+  pointer-events: none;
+}
+
+@keyframes pf-alert-out {
+  from {
+    opacity: 1;
+    max-height: 480px;
+  }
+  to {
+    opacity: 0;
+    max-height: 0;
+    margin-top: 0;
+    margin-bottom: 0;
+    padding-top: 0;
+    padding-bottom: 0;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .pf-alert--exiting {
+    animation: none;
+  }
+}

package/dist/{index8.js → components/Alert/Alert2.js}

@@ -1,6 +1,7 @@
-import { cx } from "./index4.js";
-import { Icon } from "./index6.js";
-/* empty css       */
+import { useExitAnimation } from "../../hooks/useExitAnimation.js";
+import { cx } from "../../utils/cx.js";
+import { Icon } from "../Icon/Icon2.js";
+import './Alert.css';/* empty css      */
 import { forwardRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/Alert/Alert.tsx
@@ -22,9 +23,10 @@ var Alert = forwardRef(({ className, variant = "info", heading, description, dis
 		"aria-hidden": true
 	});
 	const body = children ?? description;
+	const { isExiting, startExit } = useExitAnimation({ onExited: onDismiss });
 	return /* @__PURE__ */ jsxs("div", {
 		ref,
-		className: cx("pf-alert", `pf-alert--${variant}`, className),
+		className: cx("pf-alert", `pf-alert--${variant}`, isExiting && "pf-alert--exiting", className),
 		role: variantRole[variant],
 		...props,
 		children: [
@@ -47,7 +49,7 @@ var Alert = forwardRef(({ className, variant = "info", heading, description, dis
 				type: "button",
 				className: "pf-alert__dismiss",
 				"aria-label": "Dismiss alert",
-				onClick: () => onDismiss?.(),
+				onClick: startExit,
 				children: /* @__PURE__ */ jsx(Icon, {
 					name: "circle-xmark",
 					"aria-hidden": true

package/dist/components/Avatar/Avatar.css

@@ -0,0 +1,97 @@
+.pf-avatar {
+  --pf-avatar-status-size: 10px;
+  --pf-avatar-status-offset: -2px;
+
+  background: var(--pf-avatar-bg, var(--pf-surface-subtle));
+  border: 1px solid var(--pf-avatar-border, var(--pf-surface-border));
+  border-radius: var(--radius-full);
+  color: var(--pf-avatar-text);
+  display: inline-flex;
+  font-weight: var(--font-weight-semibold);
+  justify-content: center;
+  overflow: visible;
+  position: relative;
+  text-transform: uppercase;
+  user-select: none;
+}
+
+.pf-avatar--sm {
+  --pf-avatar-status-size: 9px;
+  --pf-avatar-status-offset: -2px;
+
+  font-size: var(--font-size-2xs);
+  height: 24px;
+  width: 24px;
+}
+
+.pf-avatar--md {
+  --pf-avatar-status-size: 10px;
+  --pf-avatar-status-offset: -2px;
+
+  font-size: var(--font-size-xs);
+  height: 32px;
+  width: 32px;
+}
+
+.pf-avatar--lg {
+  --pf-avatar-status-size: 12px;
+  --pf-avatar-status-offset: -2px;
+
+  font-size: var(--font-size-sm);
+  height: 40px;
+  width: 40px;
+}
+
+.pf-avatar--xl {
+  --pf-avatar-status-size: 14px;
+  --pf-avatar-status-offset: -1px;
+
+  font-size: var(--font-size-md);
+  height: 56px;
+  width: 56px;
+}
+
+.pf-avatar__image {
+  border-radius: inherit;
+  display: block;
+  height: 100%;
+  object-fit: cover;
+  width: 100%;
+}
+
+.pf-avatar__fallback {
+  align-items: center;
+  border-radius: inherit;
+  display: inline-flex;
+  height: 100%;
+  justify-content: center;
+  line-height: 1;
+  width: 100%;
+}
+
+.pf-avatar__status {
+  border: 2px solid var(--pf-avatar-status-border);
+  border-radius: var(--radius-full);
+  top: var(--pf-avatar-status-offset);
+  height: var(--pf-avatar-status-size, 10px);
+  position: absolute;
+  inset-inline-end: var(--pf-avatar-status-offset);
+  width: var(--pf-avatar-status-size, 10px);
+  z-index: 1;
+}
+
+.pf-avatar__status--online {
+  background: var(--pf-avatar-status-online);
+}
+
+.pf-avatar__status--away {
+  background: var(--pf-avatar-status-away);
+}
+
+.pf-avatar__status--busy {
+  background: var(--pf-avatar-status-busy);
+}
+
+.pf-avatar__status--offline {
+  background: var(--pf-avatar-status-offline);
+}

package/dist/{index10.js → components/Avatar/Avatar2.js}

@@ -1,5 +1,5 @@
-import { cx } from "./index4.js";
-/* empty css       */
+import { cx } from "../../utils/cx.js";
+import './Avatar.css';/* empty css       */
 import { forwardRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/Avatar/Avatar.tsx

package/dist/components/Badge/Badge.css

@@ -0,0 +1,26 @@
+.pf-badge {
+  align-items: center;
+  border-radius: var(--radius-full);
+  display: inline-flex;
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-medium);
+  line-height: 1;
+  min-height: 22px;
+  padding: 0 var(--space-2);
+}
+.pf-badge--neutral {
+  background: var(--pf-badge-neutral-background, var(--color-gray-100));
+  color: var(--pf-badge-neutral-foreground, var(--color-gray-700));
+}
+.pf-badge--brand {
+  background: var(--pf-badge-brand-background, var(--color-brand-100));
+  color: var(--pf-badge-brand-foreground, var(--color-brand-700));
+}
+.pf-badge--success {
+  background: var(--pf-badge-success-background, var(--color-semantic-status-success-background));
+  color: var(--pf-badge-success-foreground, var(--color-semantic-status-success-foreground));
+}
+.pf-badge--warning {
+  background: var(--pf-badge-warning-background, var(--color-semantic-status-warning-background));
+  color: var(--pf-badge-warning-foreground, var(--color-semantic-status-warning-foreground));
+}

package/dist/{index23.js → components/Badge/Badge2.js}

@@ -1,5 +1,5 @@
-import { cx } from "./index4.js";
-/* empty css        */
+import { cx } from "../../utils/cx.js";
+import './Badge.css';/* empty css      */
 import { forwardRef } from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/Badge/Badge.tsx

package/dist/components/BadgeGroup/BadgeGroup.css

@@ -0,0 +1,115 @@
+.pf-badge-group {
+  align-items: center;
+  display: inline-flex;
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-medium);
+  line-height: 1;
+}
+
+.pf-badge-group__badge,
+.pf-badge-group__text {
+  border: 1px solid;
+  display: inline-flex;
+  min-height: 24px;
+  padding: 0 var(--space-2);
+  white-space: nowrap;
+}
+
+.pf-badge-group__badge {
+  align-items: center;
+  border-radius: var(--radius-full);
+  z-index: 1;
+}
+
+.pf-badge-group__text {
+  align-items: center;
+}
+
+.pf-badge-group--leading .pf-badge-group__text {
+  margin-inline-start: -1px;
+  padding-inline-start: calc(var(--space-2) + 2px);
+}
+
+.pf-badge-group--trailing .pf-badge-group__text {
+  margin-inline-end: -1px;
+  padding-inline-end: calc(var(--space-2) + 2px);
+}
+
+.pf-badge-group--leading .pf-badge-group__badge {
+  border-radius: var(--radius-full) 0 0 var(--radius-full);
+}
+
+.pf-badge-group--leading .pf-badge-group__text {
+  border-radius: 0 var(--radius-full) var(--radius-full) 0;
+}
+
+.pf-badge-group--trailing .pf-badge-group__text {
+  border-radius: var(--radius-full) 0 0 var(--radius-full);
+}
+
+.pf-badge-group--trailing .pf-badge-group__badge {
+  border-radius: 0 var(--radius-full) var(--radius-full) 0;
+}
+
+.pf-badge-group__badge--gray {
+  background: var(--pf-badgegroup-gray-100);
+  border-color: var(--pf-badgegroup-gray-200);
+  color: var(--pf-badgegroup-gray-700);
+}
+
+.pf-badge-group__badge--brand {
+  background: var(--pf-badgegroup-brand-100);
+  border-color: var(--pf-badgegroup-brand-300);
+  color: var(--pf-badgegroup-brand-700);
+}
+
+.pf-badge-group__badge--error {
+  background: var(--pf-badgegroup-danger-bg);
+  border-color: var(--pf-badgegroup-danger-border);
+  color: var(--pf-badgegroup-danger-text);
+}
+
+.pf-badge-group__badge--warning {
+  background: var(--pf-badgegroup-warning-bg);
+  border-color: var(--pf-badgegroup-warning-border);
+  color: var(--pf-badgegroup-warning-text);
+}
+
+.pf-badge-group__badge--success {
+  background: var(--pf-badgegroup-success-bg);
+  border-color: var(--pf-badgegroup-success-border);
+  color: var(--pf-badgegroup-success-text);
+}
+
+.pf-badge-group__text--pill {
+  background: var(--pf-badgegroup-surface-bg, var(--pf-surface-bg));
+}
+
+.pf-badge-group__text--modern {
+  background: var(--pf-badgegroup-surface-subtle, var(--pf-surface-subtle));
+}
+
+.pf-badge-group__text--gray {
+  border-color: var(--pf-badgegroup-gray-200);
+  color: var(--pf-badgegroup-gray-700);
+}
+
+.pf-badge-group__text--brand {
+  border-color: var(--pf-badgegroup-brand-300);
+  color: var(--pf-badgegroup-brand-700);
+}
+
+.pf-badge-group__text--error {
+  border-color: var(--pf-badgegroup-danger-border);
+  color: var(--pf-badgegroup-danger-text);
+}
+
+.pf-badge-group__text--warning {
+  border-color: var(--pf-badgegroup-warning-border);
+  color: var(--pf-badgegroup-warning-text);
+}
+
+.pf-badge-group__text--success {
+  border-color: var(--pf-badgegroup-success-border);
+  color: var(--pf-badgegroup-success-text);
+}

package/dist/{index14.js → components/BadgeGroup/BadgeGroup2.js}

@@ -1,5 +1,5 @@
-import { cx } from "./index4.js";
-/* empty css        */
+import { cx } from "../../utils/cx.js";
+import './BadgeGroup.css';/* empty css           */
 import { forwardRef } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/BadgeGroup/BadgeGroup.tsx

package/dist/components/Breadcrumbs/Breadcrumbs.css

@@ -0,0 +1,45 @@
+.pf-breadcrumbs {
+  width: 100%;
+}
+
+.pf-breadcrumbs__list {
+  align-items: center;
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-2);
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.pf-breadcrumbs__item {
+  align-items: center;
+  display: inline-flex;
+  gap: var(--space-2);
+}
+
+.pf-breadcrumbs__link {
+  color: var(--pf-breadcrumbs-link-color);
+  font-size: var(--font-size-sm);
+  line-height: 1.4;
+  text-decoration: none;
+}
+
+.pf-breadcrumbs__link:hover {
+  color: var(--pf-breadcrumbs-link-hover-color);
+  text-decoration: underline;
+}
+
+.pf-breadcrumbs__link--current,
+.pf-breadcrumbs__link[aria-current='page'] {
+  color: var(--pf-breadcrumbs-link-current-color);
+  font-weight: var(--font-weight-medium);
+  text-decoration: none;
+}
+
+.pf-breadcrumbs__separator {
+  color: var(--pf-breadcrumbs-separator-color);
+  display: inline-flex;
+  font-size: var(--font-size-xs);
+  line-height: 1;
+}

package/dist/{index18.js → components/Breadcrumbs/Breadcrumbs2.js}

@@ -1,5 +1,5 @@
-import { cx } from "./index4.js";
-/* empty css        */
+import { cx } from "../../utils/cx.js";
+import './Breadcrumbs.css';/* empty css            */
 import { forwardRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/Breadcrumbs/Breadcrumbs.tsx