@pitchfork-ui/react 0.1.9 → 0.2.0

package/dist/components/SidebarNavigation/SidebarNavigation.css

@@ -0,0 +1,116 @@
+.pf-sidebar-navigation {
+  background: var(--pf-sidebar-nav-bg);
+  border: 1px solid var(--pf-sidebar-nav-border);
+  border-radius: var(--radius-md);
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  width: 100%;
+}
+
+@media (min-width: 768px) {
+  .pf-sidebar-navigation {
+    min-height: 360px;
+    width: min(100%, 280px);
+  }
+}
+
+.pf-sidebar-navigation__header,
+.pf-sidebar-navigation__footer {
+  border-color: var(--pf-sidebar-nav-border);
+  padding: var(--space-3) var(--space-3);
+}
+
+.pf-sidebar-navigation__header {
+  border-bottom: 1px solid var(--pf-sidebar-nav-border);
+}
+
+.pf-sidebar-navigation__footer {
+  border-top: 1px solid var(--pf-sidebar-nav-border);
+  margin-top: auto;
+}
+
+.pf-sidebar-navigation__nav {
+  display: grid;
+  gap: var(--space-3);
+  padding: var(--space-3);
+}
+
+.pf-sidebar-navigation__section {
+  display: grid;
+  gap: var(--space-1);
+}
+
+.pf-sidebar-navigation__section-title {
+  color: var(--pf-sidebar-nav-text-muted);
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-semibold);
+  letter-spacing: 0.04em;
+  margin: 0;
+  padding: 0 var(--space-2);
+  text-transform: uppercase;
+}
+
+.pf-sidebar-navigation__list {
+  display: grid;
+  gap: 2px;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.pf-sidebar-navigation__item {
+  min-width: 0;
+}
+
+.pf-sidebar-navigation__link {
+  align-items: center;
+  background: transparent;
+  border: 0;
+  border-radius: var(--radius-sm);
+  color: var(--pf-sidebar-nav-text-muted);
+  cursor: pointer;
+  display: grid;
+  font: inherit;
+  gap: var(--space-2);
+  grid-template-columns: auto 1fr auto;
+  min-height: 36px;
+  padding: 0 var(--space-2);
+  text-align: left;
+  text-decoration: none;
+  width: 100%;
+}
+
+.pf-sidebar-navigation__link:hover {
+  background: var(--pf-sidebar-nav-bg-subtle);
+  color: var(--pf-sidebar-nav-text);
+}
+
+.pf-sidebar-navigation__link:focus-visible {
+  box-shadow: var(--pf-sidebarnavigation-focus-ring, var(--pf-focus-ring));
+  outline: none;
+}
+
+.pf-sidebar-navigation__link--active {
+  background: var(--pf-sidebar-nav-bg-subtle);
+  color: var(--pf-sidebar-nav-text);
+  font-weight: var(--font-weight-semibold);
+}
+
+.pf-sidebar-navigation__link--disabled {
+  cursor: not-allowed;
+  opacity: 0.45;
+}
+
+.pf-sidebar-navigation__icon,
+.pf-sidebar-navigation__badge {
+  align-items: center;
+  display: inline-flex;
+  justify-content: center;
+}
+
+.pf-sidebar-navigation__label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}

package/dist/{index96.js → components/SidebarNavigation/SidebarNavigation2.js}

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

package/dist/components/SlideoutMenu/SlideoutMenu.css

@@ -0,0 +1,161 @@
+.pf-slideout__portal {
+  inset: 0;
+  position: fixed;
+  z-index: 1000;
+}
+
+.pf-slideout__overlay {
+  background: var(--pf-slideoutmenu-overlay-backdrop, var(--pf-overlay-backdrop));
+  opacity: 1;
+  inset: 0;
+  position: absolute;
+  transition: opacity 220ms ease;
+}
+
+.pf-slideout__viewport {
+  display: flex;
+  inset: 0;
+  pointer-events: none;
+  position: absolute;
+}
+
+.pf-slideout__viewport--right {
+  justify-content: flex-end;
+}
+
+.pf-slideout__viewport--left {
+  justify-content: flex-start;
+}
+
+.pf-slideout {
+  background: var(--pf-slideout-bg);
+  border-color: var(--pf-slideout-border);
+  border-style: solid;
+  box-shadow: var(--pf-slideoutmenu-elevation-overlay-shadow, var(--pf-elevation-overlay-shadow));
+  color: var(--pf-slideout-text);
+  display: grid;
+  grid-template-rows: auto 1fr auto;
+  height: 100%;
+  max-width: 100%;
+  pointer-events: auto;
+  transition: transform 220ms ease;
+  will-change: transform;
+}
+
+.pf-slideout:focus-visible {
+  outline: none;
+}
+
+.pf-slideout__viewport--right .pf-slideout {
+  border-left-width: 1px;
+  transform: translateX(0);
+}
+
+.pf-slideout__viewport--left .pf-slideout {
+  border-right-width: 1px;
+  transform: translateX(0);
+}
+
+.pf-slideout__portal[data-state='closed'] .pf-slideout__overlay {
+  opacity: 0;
+}
+
+.pf-slideout__portal[data-state='closed'] .pf-slideout__viewport--right .pf-slideout {
+  transform: translateX(100%);
+}
+
+.pf-slideout__portal[data-state='closed'] .pf-slideout__viewport--left .pf-slideout {
+  transform: translateX(-100%);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .pf-slideout,
+  .pf-slideout__overlay {
+    transition: none;
+  }
+}
+
+.pf-slideout--sm {
+  width: min(420px, 100vw);
+}
+
+.pf-slideout--md {
+  width: min(520px, 100vw);
+}
+
+.pf-slideout--lg {
+  width: min(680px, 100vw);
+}
+
+.pf-slideout__header,
+.pf-slideout__footer {
+  align-items: start;
+  display: flex;
+  gap: var(--space-3);
+  justify-content: space-between;
+  padding: var(--space-3);
+}
+
+@media (min-width: 768px) {
+  .pf-slideout__header,
+  .pf-slideout__body,
+  .pf-slideout__footer {
+    padding: var(--space-4);
+  }
+}
+
+.pf-slideout__header {
+  border-bottom: 1px solid var(--pf-slideout-border);
+}
+
+.pf-slideout__footer {
+  border-top: 1px solid var(--pf-slideout-border);
+  justify-content: flex-end;
+}
+
+.pf-slideout__body {
+  overflow-y: auto;
+  padding: var(--space-3);
+}
+
+.pf-slideout__heading-group {
+  display: grid;
+  gap: var(--space-1);
+  min-width: 0;
+}
+
+.pf-slideout__title {
+  font-size: var(--font-size-lg);
+  font-weight: var(--font-weight-semibold);
+  line-height: 1.2;
+  margin: 0;
+}
+
+.pf-slideout__description {
+  color: var(--pf-slideout-text-muted);
+  font-size: var(--font-size-sm);
+  line-height: 1.45;
+  margin: 0;
+}
+
+.pf-slideout__close {
+  align-items: center;
+  background: transparent;
+  border: 0;
+  border-radius: var(--radius-sm);
+  color: var(--pf-slideout-text-muted);
+  cursor: pointer;
+  display: inline-flex;
+  flex: 0 0 auto;
+  font-size: var(--font-size-lg);
+  height: var(--space-8);
+  justify-content: center;
+  width: var(--space-8);
+}
+
+.pf-slideout__close:hover,
+.pf-slideout__close:focus-visible {
+  background: var(--pf-slideout-bg-subtle);
+  color: var(--pf-slideout-text);
+  outline: none;
+}

package/dist/{index98.js → components/SlideoutMenu/SlideoutMenu2.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 './SlideoutMenu.css';/* empty css             */
 import { useEffect, useId, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { createPortal } from "react-dom";

package/dist/components/Slider/Slider.css

@@ -0,0 +1,106 @@
+.pf-field {
+  display: grid;
+  gap: var(--space-2);
+}
+
+.pf-field__label {
+  color: var(--pf-slider-text);
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-medium);
+}
+
+.pf-field__description {
+  color: var(--pf-slider-text-muted);
+  font-size: var(--font-size-sm);
+  margin: 0;
+}
+
+.pf-field__error {
+  color: var(--pf-slider-error-text);
+  font-size: var(--font-size-sm);
+  margin: 0;
+}
+
+.pf-slider__header {
+  align-items: center;
+  display: flex;
+  justify-content: space-between;
+}
+
+.pf-slider__value {
+  color: var(--pf-slider-text-muted);
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-medium);
+}
+
+.pf-slider {
+  appearance: none;
+  background: linear-gradient(
+    to right,
+    var(--pf-slider-action) 0,
+    var(--pf-slider-action) var(--pf-slider-progress, 0%),
+    var(--pf-slider-border) var(--pf-slider-progress, 0%),
+    var(--pf-slider-border) 100%
+  );
+  border-radius: var(--radius-full);
+  cursor: pointer;
+  height: var(--pf-slider-track-height);
+  width: 100%;
+}
+
+.pf-slider:focus {
+  outline: none;
+}
+
+.pf-slider:focus-visible {
+  box-shadow: var(--pf-slider-focus-ring, var(--pf-focus-ring));
+}
+
+.pf-slider::-webkit-slider-thumb {
+  appearance: none;
+  background: var(--pf-slider-bg);
+  border: 2px solid var(--pf-slider-action);
+  border-radius: 50%;
+  box-shadow: var(--pf-slider-control-thumb-outline-shadow, var(--pf-control-thumb-outline-shadow));
+  height: var(--pf-slider-thumb-size);
+  margin-top: calc((var(--pf-slider-track-height) - var(--pf-slider-thumb-size)) / 2);
+  width: var(--pf-slider-thumb-size);
+}
+
+.pf-slider::-moz-range-thumb {
+  background: var(--pf-slider-bg);
+  border: 2px solid var(--pf-slider-action);
+  border-radius: 50%;
+  box-shadow: var(--pf-slider-control-thumb-outline-shadow, var(--pf-control-thumb-outline-shadow));
+  height: var(--pf-slider-thumb-size);
+  width: var(--pf-slider-thumb-size);
+}
+
+.pf-slider::-moz-range-track {
+  background: transparent;
+  border-radius: var(--radius-full);
+  height: var(--pf-slider-track-height);
+}
+
+.pf-slider:disabled {
+  cursor: not-allowed;
+  opacity: 0.55;
+}
+
+.pf-slider--invalid {
+  background: linear-gradient(
+    to right,
+    var(--pf-slider-danger-fill) 0,
+    var(--pf-slider-danger-fill) var(--pf-slider-progress, 0%),
+    var(--pf-slider-border) var(--pf-slider-progress, 0%),
+    var(--pf-slider-border) 100%
+  );
+}
+
+.pf-slider--invalid::-webkit-slider-thumb {
+  border-color: var(--pf-slider-danger-fill);
+}
+
+.pf-slider--invalid::-moz-range-thumb {
+  border-color: var(--pf-slider-danger-fill);
+}

package/dist/{index104.js → components/Slider/Slider2.js}

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

package/dist/components/Sparkline/Sparkline.css

@@ -0,0 +1,17 @@
+.pf-sparkline {
+  display: block;
+  overflow: visible;
+}
+
+.pf-sparkline__line {
+  stroke: var(--pf-sparkline-color-override, var(--pf-sparkline-color));
+}
+
+.pf-sparkline__area {
+  fill: var(--pf-sparkline-color-override, var(--pf-sparkline-color));
+  opacity: var(--pf-sparkline-area-opacity, 0.15);
+}
+
+.pf-sparkline__dot {
+  fill: var(--pf-sparkline-color-override, var(--pf-sparkline-color));
+}

package/dist/components/Sparkline/Sparkline2.js

@@ -0,0 +1,99 @@
+import { cx } from "../../utils/cx.js";
+import './Sparkline.css';/* empty css          */
+import { forwardRef, useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/Sparkline/Sparkline.tsx
+function buildPath(points, close = false) {
+	if (points.length < 2) return "";
+	const [first, ...rest] = points;
+	const d = [`M ${first[0]} ${first[1]}`];
+	for (const [x, y] of rest) d.push(`L ${x} ${y}`);
+	if (close) {
+		const lastX = points[points.length - 1][0];
+		points[points.length - 1][1];
+		d.push(`L ${lastX} ${close}`);
+		d.push(`L ${first[0]} ${close}`);
+		d.push("Z");
+	}
+	return d.join(" ");
+}
+function normalizePoints(data, width, height, padding) {
+	if (data.length === 0) return [];
+	const min = Math.min(...data);
+	const range = Math.max(...data) - min || 1;
+	const innerW = width - padding * 2;
+	const innerH = height - padding * 2;
+	return data.map((value, i) => {
+		return [padding + i / (data.length - 1) * innerW, padding + (1 - (value - min) / range) * innerH];
+	});
+}
+var Sparkline = forwardRef(function Sparkline({ className, data = [], width = 120, height = 36, variant = "line", strokeWidth = 1.5, color, endDot = false, label, style, ...props }, ref) {
+	const padding = strokeWidth + 2;
+	const points = useMemo(() => normalizePoints(data, width, height, padding), [
+		data,
+		width,
+		height,
+		padding
+	]);
+	const linePath = useMemo(() => buildPath(points), [points]);
+	const areaPath = useMemo(() => {
+		if (variant !== "area" || points.length < 2) return "";
+		const [first, ...rest] = points;
+		const d = [`M ${first[0]} ${first[1]}`];
+		for (const [x, y] of rest) d.push(`L ${x} ${y}`);
+		const lastX = points[points.length - 1][0];
+		const bottom = height - padding + strokeWidth;
+		d.push(`L ${lastX} ${bottom}`);
+		d.push(`L ${first[0]} ${bottom}`);
+		d.push("Z");
+		return d.join(" ");
+	}, [
+		points,
+		variant,
+		height,
+		padding,
+		strokeWidth
+	]);
+	const lastPoint = points[points.length - 1];
+	const colorVar = color ?? "var(--pf-sparkline-color)";
+	return /* @__PURE__ */ jsxs("svg", {
+		ref,
+		width,
+		height,
+		viewBox: `0 0 ${width} ${height}`,
+		className: cx("pf-sparkline", `pf-sparkline--${variant}`, className),
+		"aria-label": label,
+		role: label ? "img" : "presentation",
+		style: {
+			"--pf-sparkline-color-override": color,
+			...style
+		},
+		...props,
+		children: [
+			variant === "area" && areaPath && /* @__PURE__ */ jsx("path", {
+				d: areaPath,
+				fill: colorVar,
+				className: "pf-sparkline__area"
+			}),
+			linePath && /* @__PURE__ */ jsx("path", {
+				d: linePath,
+				fill: "none",
+				stroke: colorVar,
+				strokeWidth,
+				strokeLinecap: "round",
+				strokeLinejoin: "round",
+				className: "pf-sparkline__line"
+			}),
+			endDot && lastPoint && /* @__PURE__ */ jsx("circle", {
+				cx: lastPoint[0],
+				cy: lastPoint[1],
+				r: strokeWidth + 1.5,
+				fill: colorVar,
+				className: "pf-sparkline__dot"
+			})
+		]
+	});
+});
+Sparkline.displayName = "Sparkline";
+//#endregion
+export { Sparkline };

package/dist/components/Switch/Switch.css

@@ -0,0 +1,59 @@
+.pf-switch-field {
+  align-items: center;
+  display: inline-flex;
+  gap: var(--space-2);
+}
+
+.pf-switch {
+  appearance: none;
+  background: var(--pf-switch-track-bg);
+  border-radius: var(--radius-full);
+  cursor: pointer;
+  height: 24px;
+  margin: 0;
+  position: relative;
+  transition: background-color 120ms ease;
+  width: 44px;
+}
+
+.pf-switch::after {
+  background: var(--pf-switch-thumb-bg);
+  border-radius: 50%;
+  content: '';
+  height: 20px;
+  left: 2px;
+  position: absolute;
+  top: 2px;
+  transition: transform 120ms ease;
+  width: 20px;
+}
+
+.pf-switch:checked {
+  background: var(--pf-switch-track-checked-bg);
+}
+
+.pf-switch:checked::after {
+  transform: translateX(20px);
+}
+
+.pf-switch:focus-visible {
+  box-shadow: var(--pf-switch-focus-ring, var(--pf-focus-ring));
+  outline: none;
+}
+
+.pf-switch:disabled {
+  cursor: not-allowed;
+  opacity: 0.55;
+}
+
+.pf-switch-field label {
+  color: var(--pf-switch-label-text);
+  font-size: var(--font-size-md);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .pf-switch,
+  .pf-switch::after {
+    transition: none;
+  }
+}

package/dist/{index100.js → components/Switch/Switch2.js}

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