@pitchfork-ui/react 0.1.9 → 0.2.0

package/dist/components/PageHeader/PageHeader.css

@@ -0,0 +1,85 @@
+.pf-page-header {
+  display: grid;
+  gap: var(--space-4);
+}
+
+.pf-page-header__breadcrumbs {
+  min-width: 0;
+}
+
+.pf-page-header__row {
+  align-items: start;
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-4);
+  justify-content: space-between;
+}
+
+@media (min-width: 768px) {
+  .pf-page-header__row {
+    flex-direction: row;
+  }
+}
+
+.pf-page-header__content {
+  display: grid;
+  gap: var(--space-2);
+  min-width: 0;
+}
+
+.pf-page-header__eyebrow {
+  color: var(--pf-page-header-eyebrow);
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-semibold);
+  letter-spacing: 0.08em;
+  margin: 0;
+  text-transform: uppercase;
+}
+
+.pf-page-header__heading {
+  color: var(--pf-page-header-text);
+  font-size: clamp(var(--font-size-3xl), 3vw, var(--font-size-5xl));
+  font-weight: var(--font-weight-semibold);
+  letter-spacing: -0.03em;
+  line-height: 1.05;
+  margin: 0;
+}
+
+.pf-page-header__description {
+  color: var(--pf-page-header-text-muted);
+  font-size: var(--font-size-sm);
+  line-height: 1.5;
+  margin: 0;
+  max-width: 68ch;
+}
+
+@media (min-width: 768px) {
+  .pf-page-header__description {
+    font-size: var(--font-size-md);
+  }
+}
+
+.pf-page-header__meta {
+  align-items: center;
+  color: var(--pf-page-header-text-muted);
+  display: inline-flex;
+  flex-wrap: wrap;
+  gap: var(--space-2);
+}
+
+.pf-page-header__actions {
+  align-items: center;
+  display: inline-flex;
+  flex: 0 0 auto;
+  flex-wrap: wrap;
+  gap: var(--space-2);
+  justify-content: flex-start;
+  width: 100%;
+}
+
+@media (min-width: 768px) {
+  .pf-page-header__actions {
+    justify-content: flex-end;
+    width: auto;
+  }
+}

package/dist/{index72.js → components/PageHeader/PageHeader2.js}

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

package/dist/components/Pagination/Pagination.css

@@ -0,0 +1,101 @@
+.pf-pagination {
+  align-items: center;
+  display: inline-flex;
+  gap: var(--space-2);
+}
+
+@media (min-width: 640px) {
+  .pf-pagination {
+    gap: var(--space-3);
+  }
+}
+
+.pf-pagination--disabled {
+  opacity: 0.65;
+}
+
+.pf-pagination__list {
+  align-items: center;
+  display: inline-flex;
+  gap: var(--space-2);
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.pf-pagination__page,
+.pf-pagination__nav {
+  align-items: center;
+  background: var(--pf-pagination-bg);
+  border: 1px solid var(--pf-pagination-border);
+  border-radius: var(--radius-md);
+  color: var(--pf-pagination-text);
+  cursor: pointer;
+  display: inline-flex;
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-medium);
+  justify-content: center;
+  line-height: 1;
+  transition: box-shadow 140ms ease;
+}
+
+.pf-pagination__page {
+  height: var(--pf-pagination-page-size);
+  min-width: var(--pf-pagination-page-size);
+  padding: 0 var(--space-2);
+  transition: none;
+}
+
+.pf-pagination__nav {
+  height: var(--pf-control-height-sm);
+  min-width: var(--pf-control-height-sm);
+  padding: 0 var(--space-2);
+}
+
+@media (min-width: 640px) {
+  .pf-pagination__nav {
+    padding: 0 var(--space-3);
+  }
+}
+
+.pf-pagination__page:hover,
+.pf-pagination__nav:hover {
+  border-color: var(--pf-pagination-active-border);
+}
+
+.pf-pagination__page:focus-visible,
+.pf-pagination__nav:focus-visible {
+  box-shadow: var(--pf-focus-ring);
+  outline: none;
+}
+
+.pf-pagination__page--active {
+  background: var(--pf-pagination-active-bg);
+  border-color: var(--pf-pagination-active-border);
+  color: var(--pf-pagination-active-text);
+}
+
+.pf-pagination__page--active:hover {
+  background: var(--pf-pagination-active-hover-bg);
+}
+
+.pf-pagination__page:disabled,
+.pf-pagination__nav:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+.pf-pagination__ellipsis {
+  color: var(--pf-pagination-text-muted);
+  display: inline-flex;
+  font-size: var(--font-size-sm);
+  justify-content: center;
+  min-width: 20px;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .pf-pagination__page,
+  .pf-pagination__nav {
+    transition: none;
+  }
+}

package/dist/{index74.js → components/Pagination/Pagination2.js}

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

package/dist/components/PieChart/PieChart.css

@@ -0,0 +1,81 @@
+.pf-pie-chart {
+  align-items: flex-start;
+  display: inline-flex;
+  flex-direction: column;
+  gap: var(--space-4);
+}
+
+@media (min-width: 640px) {
+  .pf-pie-chart {
+    align-items: center;
+    flex-direction: row;
+    gap: var(--space-6);
+  }
+}
+
+.pf-pie-chart__visual {
+  align-items: center;
+  border-radius: 999px;
+  display: inline-flex;
+  justify-content: center;
+  position: relative;
+}
+
+.pf-pie-chart__visual--empty {
+  outline: 1px solid var(--pf-piechart-border-muted);
+}
+
+.pf-pie-chart__center {
+  align-items: center;
+  background: var(--pf-piechart-bg);
+  border-radius: 999px;
+  color: var(--pf-piechart-text);
+  display: inline-flex;
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-semibold);
+  justify-content: center;
+  line-height: 1.2;
+  text-align: center;
+}
+
+.pf-pie-chart__legend {
+  display: grid;
+  gap: var(--space-2);
+  list-style: none;
+  margin: 0;
+  min-width: 0;
+  padding: 0;
+  width: 100%;
+}
+
+@media (min-width: 640px) {
+  .pf-pie-chart__legend {
+    min-width: 180px;
+    width: auto;
+  }
+}
+
+.pf-pie-chart__legend-item {
+  align-items: center;
+  display: grid;
+  gap: var(--space-2);
+  grid-template-columns: 10px 1fr auto;
+}
+
+.pf-pie-chart__legend-dot {
+  border-radius: 999px;
+  display: inline-block;
+  height: 10px;
+  width: 10px;
+}
+
+.pf-pie-chart__legend-label {
+  color: var(--pf-piechart-text);
+  font-size: var(--font-size-sm);
+}
+
+.pf-pie-chart__legend-value {
+  color: var(--pf-piechart-text-muted);
+  font-size: var(--font-size-sm);
+  font-variant-numeric: tabular-nums;
+}

package/dist/{index76.js → components/PieChart/PieChart2.js}

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

package/dist/components/ProgressIndicators/ProgressIndicators.css

@@ -0,0 +1,77 @@
+.pf-progress-bar {
+  align-items: center;
+  display: inline-flex;
+  gap: var(--space-2);
+  min-width: 220px;
+}
+
+.pf-progress-bar__track {
+  background: var(--pf-progress-track-bg);
+  border-radius: var(--radius-full);
+  flex: 1;
+  height: 8px;
+  overflow: hidden;
+  pointer-events: none;
+}
+
+.pf-progress-bar__fill {
+  background: var(--pf-progress-accent);
+  border-radius: inherit;
+  height: 100%;
+  transition: width 200ms ease;
+  width: var(--pf-progress-fill, 0%);
+}
+
+.pf-progress-bar__value {
+  color: var(--pf-progress-text-muted);
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-medium);
+}
+
+.pf-progress-circle {
+  align-items: center;
+  display: inline-flex;
+  height: var(--pf-progress-circle-size, 64px);
+  justify-content: center;
+  position: relative;
+  width: var(--pf-progress-circle-size, 64px);
+}
+
+.pf-progress-circle__svg {
+  display: block;
+  height: 100%;
+  transform: rotate(-90deg);
+  width: 100%;
+}
+
+.pf-progress-circle__track,
+.pf-progress-circle__fill {
+  fill: none;
+}
+
+.pf-progress-circle__track {
+  stroke: var(--pf-progress-track-bg);
+}
+
+.pf-progress-circle__fill {
+  stroke: var(--pf-progress-accent);
+  stroke-linecap: round;
+  transition: stroke-dashoffset 200ms ease;
+}
+
+.pf-progress-circle__value {
+  color: var(--pf-progress-text);
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-semibold);
+  left: 50%;
+  position: absolute;
+  top: 50%;
+  transform: translate(-50%, -50%);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .pf-progress-bar__fill,
+  .pf-progress-circle__fill {
+    transition: none;
+  }
+}

package/dist/{index78.js → components/ProgressIndicators/ProgressIndicators2.js}

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

package/dist/components/ProgressSteps/ProgressSteps.css

@@ -0,0 +1,158 @@
+.pf-progress-steps {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.pf-progress-steps--horizontal {
+  --pf-progress-step-gap: var(--space-3);
+  display: grid;
+  gap: var(--pf-progresssteps-progress-step-gap, var(--pf-progress-step-gap));
+  grid-template-columns: 1fr;
+}
+
+@media (min-width: 640px) {
+  .pf-progress-steps--horizontal {
+    --pf-progress-step-gap: var(--space-4);
+    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
+  }
+}
+
+.pf-progress-steps--vertical {
+  display: grid;
+  gap: var(--space-3);
+}
+
+.pf-progress-steps__item {
+  display: flex;
+  gap: var(--space-3);
+}
+
+.pf-progress-steps__marker-wrap {
+  align-items: center;
+  display: flex;
+  flex: 0 0 auto;
+}
+
+.pf-progress-steps--horizontal .pf-progress-steps__marker-wrap {
+  flex: 0 0 auto;
+  justify-content: center;
+}
+
+@media (min-width: 640px) {
+  .pf-progress-steps--horizontal .pf-progress-steps__marker-wrap {
+    flex: 1;
+    position: relative;
+    width: 100%;
+  }
+}
+
+.pf-progress-steps__marker {
+  align-items: center;
+  background: var(--pf-progress-steps-bg);
+  border: 1px solid var(--pf-progress-steps-border);
+  border-radius: 999px;
+  color: var(--pf-progress-steps-text-muted);
+  display: inline-flex;
+  flex: 0 0 auto;
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-semibold);
+  height: 28px;
+  justify-content: center;
+  width: 28px;
+  position: relative;
+  z-index: 1;
+}
+
+.pf-progress-steps__connector {
+  background: var(--pf-progress-steps-border);
+  display: block;
+  flex: 1;
+  margin-left: var(--space-2);
+}
+
+.pf-progress-steps--horizontal .pf-progress-steps__connector {
+  display: none;
+}
+
+@media (min-width: 640px) {
+  .pf-progress-steps--horizontal .pf-progress-steps__connector {
+    display: block;
+    height: 1px;
+    left: 50%;
+    margin-left: 0;
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    width: calc(100% + var(--pf-progresssteps-progress-step-gap, var(--pf-progress-step-gap)));
+    z-index: 0;
+  }
+}
+
+.pf-progress-steps--horizontal .pf-progress-steps__item {
+  align-items: center;
+  flex-direction: column;
+  gap: var(--space-2);
+}
+
+.pf-progress-steps--horizontal .pf-progress-steps__content {
+  text-align: center;
+}
+
+.pf-progress-steps--vertical .pf-progress-steps__item {
+  align-items: flex-start;
+  position: relative;
+}
+
+.pf-progress-steps--vertical .pf-progress-steps__marker-wrap {
+  align-items: center;
+  flex-direction: column;
+}
+
+.pf-progress-steps--vertical .pf-progress-steps__connector {
+  bottom: calc(var(--space-3) * -1);
+  left: 14px;
+  margin: 0;
+  position: absolute;
+  top: 28px;
+  width: 1px;
+}
+
+.pf-progress-steps__content {
+  min-width: 0;
+}
+
+.pf-progress-steps__title {
+  color: var(--pf-progress-steps-text);
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-semibold);
+  margin: var(--space-1) 0 0;
+}
+
+.pf-progress-steps__description {
+  color: var(--pf-progress-steps-text-muted);
+  font-size: var(--font-size-sm);
+  line-height: 1.4;
+  margin: var(--space-1) 0 0;
+}
+
+.pf-progress-steps__item--complete .pf-progress-steps__marker {
+  background: var(--pf-progress-steps-complete-bg);
+  border-color: var(--pf-progress-steps-complete-border);
+  color: var(--pf-progress-steps-complete-text);
+}
+
+.pf-progress-steps__item--current .pf-progress-steps__marker {
+  background: var(--pf-progress-steps-current-bg);
+  border-color: var(--pf-progress-steps-current-border);
+  box-shadow: var(--focus-ring-shadow);
+  color: var(--pf-progress-steps-current-text);
+}
+
+.pf-progress-steps__item--complete .pf-progress-steps__connector {
+  background: var(--pf-progress-steps-complete-border);
+}
+
+.pf-progress-steps__item--current .pf-progress-steps__title {
+  color: var(--pf-progress-steps-current-title);
+}

package/dist/{index80.js → components/ProgressSteps/ProgressSteps2.js}

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

package/dist/components/RadarChart/RadarChart.css

@@ -0,0 +1,97 @@
+.pf-radar-chart {
+  align-items: stretch;
+  display: inline-flex;
+  flex-direction: column;
+  gap: var(--space-4);
+}
+
+@media (min-width: 640px) {
+  .pf-radar-chart {
+    align-items: center;
+    flex-direction: row;
+    gap: var(--space-6);
+  }
+}
+
+.pf-radar-chart__svg {
+  display: block;
+  height: auto;
+  overflow: visible;
+  width: min(100%, 320px);
+}
+
+.pf-radar-chart__grid {
+  fill: none;
+  stroke: var(--pf-radar-grid-stroke);
+  stroke-width: 1;
+}
+
+.pf-radar-chart__axis {
+  stroke: var(--pf-radar-axis-stroke);
+  stroke-width: 1;
+}
+
+.pf-radar-chart__area {
+  fill-opacity: 1;
+  stroke-width: 2;
+}
+
+.pf-radar-chart__point {
+  stroke: var(--pf-radar-point-stroke);
+  stroke-width: 1.5;
+}
+
+.pf-radar-chart__label {
+  fill: var(--pf-radar-label);
+  font-size: var(--font-size-2xs);
+  font-weight: var(--font-weight-medium);
+}
+
+.pf-radar-chart__legend {
+  display: grid;
+  gap: var(--space-2);
+  list-style: none;
+  margin: 0;
+  min-width: 0;
+  padding: 0;
+  width: 100%;
+}
+
+@media (min-width: 640px) {
+  .pf-radar-chart__legend {
+    min-width: 140px;
+    width: auto;
+  }
+}
+
+.pf-radar-chart__legend-item {
+  align-items: center;
+  display: flex;
+  gap: var(--space-2);
+  justify-content: space-between;
+}
+
+.pf-radar-chart__legend-label {
+  color: var(--pf-radar-legend-text);
+  font-size: var(--font-size-sm);
+}
+
+.pf-radar-chart__legend-value {
+  color: var(--pf-radar-legend-value);
+  font-size: var(--font-size-sm);
+  font-variant-numeric: tabular-nums;
+}
+
+.pf-radar-chart__empty {
+  align-items: center;
+  border: 1px dashed var(--pf-radar-empty-border);
+  border-radius: var(--radius-md);
+  color: var(--pf-radar-empty-text);
+  display: inline-flex;
+  font-size: var(--font-size-sm);
+  justify-content: center;
+  min-height: 180px;
+  min-width: 260px;
+  padding: var(--space-4);
+  text-align: center;
+}

package/dist/{index82.js → components/RadarChart/RadarChart2.js}

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

package/dist/components/RadioButton/RadioButton.css

@@ -0,0 +1,21 @@
+.pf-radio-field {
+  align-items: center;
+  display: inline-flex;
+  gap: var(--space-2);
+}
+
+.pf-radio {
+  accent-color: var(--pf-radio-checked-color);
+  height: 18px;
+  width: 18px;
+}
+
+.pf-radio:focus-visible {
+  box-shadow: var(--pf-radio-focus-ring, var(--pf-focus-ring));
+  outline: none;
+}
+
+.pf-radio-field label {
+  color: var(--pf-radio-label-text);
+  font-size: var(--font-size-md);
+}

package/dist/{index84.js → components/RadioButton/RadioButton2.js}

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