@pitchfork-ui/react 0.1.9 → 0.6.0

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
@@ -63,7 +63,10 @@ var ProgressCircle = forwardRef(function ProgressCircle({ value, max = 100, size
 				r: radius,
 				strokeWidth,
 				strokeDasharray: circumference,
-				strokeDashoffset: dashOffset
+				style: {
+					"--pf-progress-dashoffset": dashOffset,
+					"--pf-progress-circ": circumference
+				}
 			})]
 		}), showValue ? /* @__PURE__ */ jsxs("span", {
 			className: "pf-progress-circle__value",

package/dist/components/ProgressSteps/ProgressSteps.css

@@ -0,0 +1,175 @@
+.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;
+  /* Animate marker as its status changes when the current step advances */
+  transition:
+    background-color var(--pf-transition-medium),
+    border-color var(--pf-transition-medium),
+    color var(--pf-transition-medium),
+    box-shadow var(--pf-transition-medium);
+}
+
+.pf-progress-steps__connector {
+  background: var(--pf-progress-steps-border);
+  display: block;
+  flex: 1;
+  margin-inline-start: var(--space-2);
+  /* Connector "activates" with a smooth fill as the step completes */
+  transition: background-color var(--pf-transition-slow);
+}
+
+.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-inline-start: 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);
+  inset-inline-start: 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;
+  transition: color var(--pf-transition-medium);
+}
+
+.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);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .pf-progress-steps__marker,
+  .pf-progress-steps__connector,
+  .pf-progress-steps__title {
+    transition: none;
+  }
+}

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,119 @@
+.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;
+}
+
+/* Grow the value polygon out from the center on mount */
+.pf-radar-chart__value {
+  animation: pf-radar-grow var(--duration-slow) var(--easing-decelerate);
+}
+
+@keyframes pf-radar-grow {
+  from {
+    opacity: 0;
+    transform: scale(0);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .pf-radar-chart__value {
+    animation: none;
+  }
+}

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
@@ -69,21 +69,27 @@ var RadarChart = forwardRef(function RadarChart({ className, data, size = 280, m
 					x2: axis.end.x,
 					y2: axis.end.y
 				}, `axis-${index}`)) : null,
-				/* @__PURE__ */ jsx("polygon", {
-					className: "pf-radar-chart__area",
-					points: valuePolygon,
+				/* @__PURE__ */ jsxs("g", {
+					className: "pf-radar-chart__value",
 					style: {
-						fill: fillColor,
-						stroke: strokeColor
-					}
+						transformBox: "view-box",
+						transformOrigin: `${center}px ${center}px`
+					},
+					children: [/* @__PURE__ */ jsx("polygon", {
+						className: "pf-radar-chart__area",
+						points: valuePolygon,
+						style: {
+							fill: fillColor,
+							stroke: strokeColor
+						}
+					}), valuePoints.map((point, index) => /* @__PURE__ */ jsx("circle", {
+						className: "pf-radar-chart__point",
+						cx: point.x,
+						cy: point.y,
+						r: 3,
+						style: { fill: strokeColor }
+					}, `point-${index}`))]
 				}),
-				valuePoints.map((point, index) => /* @__PURE__ */ jsx("circle", {
-					className: "pf-radar-chart__point",
-					cx: point.x,
-					cy: point.y,
-					r: 3,
-					style: { fill: strokeColor }
-				}, `point-${index}`)),
 				axes.map((axis, index) => {
 					const labelPoint = polarToCartesian(center, center, outerRadius + 18, axis.angle);
 					return /* @__PURE__ */ jsx("text", {

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

package/dist/components/RadioGroup/RadioGroup.css

@@ -0,0 +1,64 @@
+.pf-radio-group {
+  border: 0;
+  display: grid;
+  gap: var(--space-3);
+  margin: 0;
+  min-inline-size: 0;
+  padding: 0;
+}
+
+.pf-radio-group--horizontal {
+  column-gap: var(--space-6);
+  grid-auto-flow: column;
+  justify-content: flex-start;
+}
+
+.pf-radio-group__legend {
+  color: var(--pf-radiogroup-text);
+  font-size: var(--font-size-md);
+  font-weight: var(--font-weight-semibold);
+  margin-bottom: var(--space-1);
+  padding: 0;
+}
+
+.pf-radio-group__item {
+  align-items: flex-start;
+  display: inline-flex;
+  gap: var(--space-2);
+}
+
+.pf-radio-group__input {
+  accent-color: var(--pf-radiogroup-accent);
+  height: 18px;
+  margin-top: 2px;
+  width: 18px;
+}
+
+.pf-radio-group__input:focus-visible {
+  box-shadow: var(--pf-radiogroup-focus-ring, var(--pf-focus-ring));
+  outline: none;
+}
+
+.pf-radio-group__label {
+  color: var(--pf-radiogroup-text);
+  cursor: pointer;
+  display: grid;
+  gap: 2px;
+}
+
+.pf-radio-group__label-text {
+  font-size: var(--font-size-md);
+  line-height: 1.3;
+}
+
+.pf-radio-group__description {
+  color: var(--pf-radiogroup-text-muted);
+  font-size: var(--font-size-sm);
+  line-height: 1.35;
+}
+
+.pf-radio-group:disabled .pf-radio-group__label,
+.pf-radio-group__input:disabled + .pf-radio-group__label {
+  cursor: not-allowed;
+  opacity: 0.6;
+}

package/dist/{index86.js → components/RadioGroup/RadioGroup2.js}

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

package/dist/components/Rating/Rating.css

@@ -0,0 +1,91 @@
+.pf-rating-stars {
+  align-items: center;
+  color: var(--pf-rating-text);
+  display: inline-flex;
+  gap: var(--space-2);
+}
+
+.pf-rating-stars__track {
+  display: inline-flex;
+  gap: 2px;
+}
+
+.pf-rating-stars__star {
+  display: inline-flex;
+  position: relative;
+  height: var(--pf-rating-size, var(--font-size-lg));
+  width: var(--pf-rating-size, var(--font-size-lg));
+}
+
+.pf-rating-stars__star-icon {
+  font-size: var(--pf-rating-size, var(--font-size-lg));
+  height: 1em;
+  width: 1em;
+}
+
+.pf-rating-stars__star-icon--base {
+  color: var(--pf-rating-star-empty);
+}
+
+.pf-rating-stars__star-fill {
+  display: inline-flex;
+  inset: 0;
+  overflow: hidden;
+  position: absolute;
+  width: var(--pf-rating-fill, 0%);
+}
+
+.pf-rating-stars__star-icon--fill {
+  color: var(--pf-rating-star-fill);
+}
+
+.pf-rating-stars__value {
+  color: var(--pf-rating-text-muted);
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-medium);
+}
+
+.pf-rating-badge {
+  align-items: center;
+  background: var(--pf-rating-badge-bg);
+  border: 1px solid var(--pf-rating-badge-border);
+  border-radius: var(--radius-full);
+  color: var(--pf-rating-badge-text);
+  display: inline-flex;
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-semibold);
+  gap: var(--space-2);
+  line-height: 1;
+}
+
+.pf-rating-badge--sm {
+  min-height: 24px;
+  padding: 0 var(--space-2);
+}
+
+.pf-rating-badge--md {
+  min-height: 28px;
+  padding: 0 var(--space-3);
+}
+
+.pf-rating-badge__icon {
+  display: block;
+  fill: currentColor;
+  height: 14px;
+  width: 14px;
+}
+
+.pf-rating-badge__value {
+  align-items: center;
+  display: inline-flex;
+  gap: var(--space-1);
+}
+
+.pf-rating-badge__separator {
+  opacity: 0.65;
+}
+
+.pf-rating-badge__reviews {
+  color: var(--pf-rating-badge-reviews);
+  font-weight: var(--font-weight-medium);
+}

package/dist/{index88.js → components/Rating/Rating2.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 './Rating.css';/* empty css       */
 import { forwardRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/Rating/Rating.tsx

package/dist/components/RichTextEditor/RichTextEditor.css

@@ -0,0 +1,94 @@
+.pf-rte {
+  background: var(--pf-rte-bg);
+  border: 1px solid var(--pf-rte-border);
+  border-radius: var(--radius-md);
+  overflow: hidden;
+}
+
+.pf-rte:focus-within {
+  border-color: var(--pf-rte-focus-border);
+  box-shadow: var(--pf-richtexteditor-focus-ring, var(--pf-focus-ring));
+}
+
+.pf-rte--invalid {
+  border-color: var(--pf-rte-invalid-border);
+}
+
+.pf-rte--disabled {
+  opacity: 0.75;
+}
+
+.pf-rte__toolbar {
+  align-items: center;
+  background: var(--pf-rte-bg-subtle);
+  border-bottom: 1px solid var(--pf-rte-border);
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-1);
+  padding: var(--space-2);
+}
+
+.pf-rte__tool {
+  background: transparent;
+  border: 1px solid transparent;
+  border-radius: var(--radius-sm);
+  color: var(--pf-rte-text);
+  cursor: pointer;
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-medium);
+  min-height: 28px;
+  padding: 0 var(--space-2);
+}
+
+.pf-rte__tool:hover:not(:disabled) {
+  background: var(--pf-rte-bg);
+  border-color: var(--pf-rte-border);
+}
+
+.pf-rte__tool:focus-visible {
+  box-shadow: var(--pf-richtexteditor-focus-ring, var(--pf-focus-ring));
+  outline: none;
+}
+
+.pf-rte__tool:disabled {
+  cursor: not-allowed;
+  opacity: 0.55;
+}
+
+.pf-rte__divider {
+  background: var(--pf-rte-border);
+  height: 18px;
+  margin: 0 var(--space-1);
+  width: 1px;
+}
+
+.pf-rte__editor {
+  color: var(--pf-rte-text);
+  font: inherit;
+  line-height: 1.5;
+  min-height: var(--pf-rte-min-height, 140px);
+  outline: none;
+  overflow-wrap: anywhere;
+  padding: var(--space-3);
+}
+
+.pf-rte__editor p {
+  margin: 0 0 0.75em;
+}
+
+.pf-rte__editor p:last-child {
+  margin-bottom: 0;
+}
+
+.pf-rte__editor:empty::before {
+  color: var(--pf-rte-text-muted);
+  content: attr(data-placeholder);
+  pointer-events: none;
+}
+
+.pf-rte__count {
+  color: var(--pf-rte-text-muted);
+  font-size: var(--font-size-sm);
+  margin: var(--space-2) 0 0;
+  text-align: end;
+}

package/dist/{index90.js → components/RichTextEditor/RichTextEditor2.js}

@@ -1,7 +1,7 @@
-import { composeDescribedBy } from "./index3.js";
-import { cx } from "./index4.js";
-import { FieldWrapper } from "./index19.js";
-/* empty css        */
+import { composeDescribedBy } from "../../a11y/index.js";
+import { cx } from "../../utils/cx.js";
+import { FieldWrapper } from "../../utils/FieldWrapper.js";
+import './RichTextEditor.css';/* empty css               */
 import { forwardRef, useEffect, useId, useImperativeHandle, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/RichTextEditor/RichTextEditor.tsx