@pitchfork-ui/react 0.1.9 → 0.2.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/Alert/Alert.css

@@ -0,0 +1,83 @@
+.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-left: auto;
+  padding: 0;
+}
+
+.pf-alert__dismiss:focus-visible {
+  box-shadow: var(--pf-alert-focus-ring, var(--pf-focus-ring));
+  outline: none;
+}

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

@@ -1,6 +1,6 @@
-import { cx } from "./index4.js";
-import { Icon } from "./index6.js";
-/* empty css       */
+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

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;
+  right: 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-left: -1px;
+  padding-left: calc(var(--space-2) + 2px);
+}
+
+.pf-badge-group--trailing .pf-badge-group__text {
+  margin-right: -1px;
+  padding-right: 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

package/dist/components/Button/Button.css

@@ -0,0 +1,93 @@
+.pf-button {
+  align-items: center;
+  border: 1px solid transparent;
+  border-radius: var(--radius-md);
+  cursor: pointer;
+  display: inline-flex;
+  font-family: inherit;
+  font-weight: var(--font-weight-semibold);
+  gap: var(--space-2);
+  justify-content: center;
+  line-height: 1;
+  min-height: 40px;
+  text-decoration: none;
+  transition:
+    background-color 120ms ease,
+    border-color 120ms ease,
+    color 120ms ease,
+    box-shadow 120ms ease;
+}
+
+.pf-button:focus-visible {
+  box-shadow: var(--pf-button-focus-ring, var(--pf-focus-ring));
+  outline: none;
+}
+
+.pf-button:disabled {
+  cursor: not-allowed;
+  opacity: 0.55;
+}
+
+.pf-button--sm {
+  font-size: var(--font-size-sm);
+  min-height: 36px;
+  padding: 0 var(--space-3);
+}
+.pf-button--md {
+  font-size: var(--font-size-md);
+  min-height: 40px;
+  padding: 0 var(--space-4);
+}
+.pf-button--lg {
+  font-size: var(--font-size-lg);
+  min-height: 48px;
+  padding: 0 var(--space-5);
+}
+.pf-button--full {
+  width: 100%;
+}
+
+.pf-button--primary {
+  background: var(--pf-button-primary-bg);
+  color: var(--pf-button-primary-text);
+}
+.pf-button--primary:hover:not(:disabled) {
+  background: var(--pf-button-primary-bg-hover);
+}
+.pf-button--secondary {
+  background: var(--pf-button-secondary-bg);
+  border-color: var(--pf-button-secondary-border);
+  color: var(--pf-button-secondary-text);
+}
+.pf-button--secondary:hover:not(:disabled) {
+  background: var(--pf-button-secondary-bg-hover);
+  border-color: var(--pf-button-secondary-border-hover);
+}
+.pf-button--ghost {
+  background: transparent;
+  color: var(--pf-button-ghost-text);
+}
+.pf-button--ghost:hover:not(:disabled) {
+  background: var(--pf-button-ghost-bg-hover);
+}
+
+.pf-button--loading:disabled {
+  cursor: wait;
+  opacity: 1;
+}
+
+.pf-button__spinner {
+  animation: pf-spin 0.65s linear infinite;
+  flex-shrink: 0;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .pf-button {
+    transition: none;
+  }
+
+  .pf-button__spinner {
+    animation-duration: 0.01ms;
+    animation-iteration-count: 1;
+  }
+}

package/dist/{index12.js → components/Button/Button2.js}

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

package/dist/components/ButtonGroup/ButtonGroup.css

@@ -0,0 +1,107 @@
+.pf-button-group {
+  display: inline-flex;
+  flex-wrap: wrap;
+  align-items: stretch;
+}
+
+.pf-button-group__button {
+  align-items: center;
+  background: var(--pf-buttongroup-bg);
+  border: 1px solid var(--pf-buttongroup-border);
+  color: var(--pf-buttongroup-text);
+  cursor: pointer;
+  display: inline-flex;
+  gap: var(--space-2);
+  justify-content: center;
+  line-height: 1;
+  margin-left: -1px;
+  min-height: 40px;
+  padding: 0 var(--space-4);
+  position: relative;
+  transition:
+    background-color 120ms ease,
+    border-color 120ms ease,
+    color 120ms ease,
+    box-shadow 120ms ease;
+}
+
+.pf-button-group__button:first-child {
+  border-bottom-left-radius: var(--radius-md);
+  border-top-left-radius: var(--radius-md);
+  margin-left: 0;
+}
+
+.pf-button-group__button:last-child {
+  border-bottom-right-radius: var(--radius-md);
+  border-top-right-radius: var(--radius-md);
+}
+
+.pf-button-group__button:focus-visible {
+  box-shadow: var(--pf-buttongroup-focus-ring, var(--pf-focus-ring));
+  outline: none;
+  z-index: 2;
+}
+
+.pf-button-group__button:hover:not(:disabled):not(.pf-button-group__button--selected) {
+  background: var(--pf-buttongroup-bg-subtle);
+}
+
+.pf-button-group__button--selected {
+  background: var(--pf-buttongroup-action-primary);
+  border-color: var(--pf-buttongroup-action-primary);
+  color: var(--pf-buttongroup-action-primary-text);
+  z-index: 1;
+}
+
+.pf-button-group__button--selected:hover:not(:disabled) {
+  background: var(--pf-buttongroup-action-primary-hover);
+  border-color: var(--pf-buttongroup-action-primary-hover);
+}
+
+.pf-button-group__button:disabled {
+  cursor: not-allowed;
+  opacity: 0.55;
+}
+
+.pf-button-group__button:disabled:hover {
+  background: var(--pf-buttongroup-bg);
+}
+
+.pf-button-group__button--selected:disabled:hover {
+  background: var(--pf-buttongroup-action-primary);
+  border-color: var(--pf-buttongroup-action-primary);
+}
+
+.pf-button-group__icon {
+  display: inline-flex;
+  flex-shrink: 0;
+}
+
+.pf-button-group__icon svg {
+  display: block;
+  height: 16px;
+  width: 16px;
+}
+
+.pf-button-group__dot {
+  background: var(--pf-buttongroup-action-primary);
+  border-radius: 999px;
+  flex-shrink: 0;
+  height: 8px;
+  width: 8px;
+}
+
+.pf-button-group__button--selected .pf-button-group__dot {
+  background: var(--pf-buttongroup-dot-selected);
+}
+
+.pf-button-group__label {
+  font: inherit;
+  font-weight: var(--font-weight-semibold);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .pf-button-group__button {
+    transition: none;
+  }
+}

package/dist/{index16.js → components/ButtonGroup/ButtonGroup2.js}

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