@pitchfork-ui/react 0.1.9 → 0.6.0

package/dist/{index19.js → utils/FieldWrapper.js}

@@ -1,4 +1,4 @@
-import { cx } from "./index4.js";
+import { cx } from "./cx.js";
 import { forwardRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/utils/FieldWrapper.tsx

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pitchfork-ui/react",
-  "version": "0.1.9",
+  "version": "0.6.0",
   "type": "module",
   "main": "dist/index.cjs",
   "module": "dist/index.js",
@@ -10,7 +10,8 @@
     "src/**/*.css"
   ],
   "files": [
-    "dist"
+    "dist",
+    "theme.starter.css"
   ],
   "scripts": {
     "build": "vite build",
@@ -21,13 +22,15 @@
     "@fortawesome/fontawesome-svg-core": "^7.2.0",
     "@fortawesome/free-regular-svg-icons": "^7.2.0",
     "@fortawesome/react-fontawesome": "^3.3.1",
+    "prism-react-renderer": "^2.0.0",
     "react": ">=18.2.0 || >=19.0.0",
     "react-dom": ">=18.2.0 || >=19.0.0"
   },
   "devDependencies": {
     "@pitchfork-ui/tokens": "^0.1.0",
     "@vitejs/plugin-react": "latest",
-    "vite-plugin-dts": "latest"
+    "vite-plugin-dts": "latest",
+    "vite-plugin-lib-inject-css": "^2.2.2"
   },
   "publishConfig": {
     "access": "public"
@@ -38,6 +41,7 @@
       "import": "./dist/index.js",
       "require": "./dist/index.cjs"
     },
-    "./styles.css": "./dist/styles.css"
+    "./styles.css": "./dist/styles.css",
+    "./theme.starter.css": "./theme.starter.css"
   }
 }

package/theme.starter.css

@@ -0,0 +1,58 @@
+/**
+ * PitchforkUI — theme starter
+ *
+ * Copy this file into your project and override only the variables you need.
+ * Import it AFTER @pitchfork-ui/react/styles.css.
+ *
+ *   import '@pitchfork-ui/react/styles.css';
+ *   import './my-theme.css';
+ *
+ * WCAG note: when choosing a primary color, ensure --color-semantic-action-primary-text
+ * achieves at least 4.5:1 contrast against --color-semantic-action-primary.
+ */
+
+:root {
+  /* ── Brand / primary action ──────────────────────────────────────────────
+     Drives buttons, calendar selections, checkboxes, sliders, pagination,
+     progress steps, focus rings, and all other primary interactive states.  */
+
+  --color-semantic-action-primary: #2563eb; /* your brand-600 equivalent */
+  --color-semantic-action-primary-hover: #1d4ed8; /* your brand-700 */
+  --color-semantic-action-primary-active: #1e40af; /* your brand-800 */
+  --color-semantic-action-primary-text: #ffffff; /* text ON the primary color */
+
+  /* ── Border radius ───────────────────────────────────────────────────────
+     Presets:
+       sharp  → 0 / 2px / 4px / 4px
+       default → 0.375rem / 0.5rem / 0.75rem / 9999px
+       soft   → 0.5rem / 0.75rem / 1rem / 9999px               */
+
+  --radius-sm: 0.375rem;
+  --radius-md: 0.5rem;
+  --radius-lg: 0.75rem;
+  --radius-full: 9999px;
+
+  /* ── Typography ──────────────────────────────────────────────────────────
+     Defaults to Geist (load it, or it falls back to Inter / system-ui).
+     Override to use your own typeface.
+     @import url('https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&display=swap'); */
+
+  --font-family-sans: Geist, Inter, system-ui, -apple-system, sans-serif;
+
+  /* ── Focus ring ──────────────────────────────────────────────────────────
+     Defaults to a semi-transparent version of the primary color.
+     Override to match your brand or accessibility requirements.            */
+
+  /* --pf-focus-ring-color: var(--color-semantic-action-primary); */
+  /* --pf-focus-ring-width: 3px; */
+}
+
+/* ── Dark mode overrides ─────────────────────────────────────────────────────
+   If you change the brand color, add dark-mode variants here.
+   Use a lighter shade so white text keeps a 4.5:1 contrast ratio.           */
+
+[data-theme='dark'] {
+  --color-semantic-action-primary: #3b82f6; /* brand-500 equivalent */
+  --color-semantic-action-primary-hover: #2563eb; /* brand-600 */
+  --color-semantic-action-primary-active: #1d4ed8; /* brand-700 */
+}

package/dist/index42.js

@@ -1,134 +0,0 @@
-import { cx } from "./index4.js";
-import { Icon } from "./index6.js";
-/* empty css        */
-import { forwardRef, useEffect, useMemo, useState } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
-//#region src/components/Carousel/Carousel.tsx
-var clamp = (value, min, max) => {
-	return Math.min(Math.max(value, min), max);
-};
-var Carousel = forwardRef(function Carousel({ className, slides, initialIndex = 0, loop = true, showIndicators = true, autoPlay = false, autoPlayInterval = 5e3, onIndexChange, "aria-label": ariaLabel = "Carousel", ...props }, ref) {
-	const totalSlides = slides.length;
-	const [activeIndex, setActiveIndex] = useState(clamp(initialIndex, 0, Math.max(totalSlides - 1, 0)));
-	const resolvedActiveIndex = clamp(activeIndex, 0, Math.max(totalSlides - 1, 0));
-	const goToIndex = (nextIndex) => {
-		if (totalSlides === 0) return;
-		const resolvedIndex = loop ? (nextIndex % totalSlides + totalSlides) % totalSlides : clamp(nextIndex, 0, totalSlides - 1);
-		setActiveIndex(resolvedIndex);
-		onIndexChange?.(resolvedIndex);
-	};
-	useEffect(() => {
-		if (!autoPlay || totalSlides < 2) return;
-		const interval = window.setInterval(() => {
-			setActiveIndex((current) => {
-				const next = loop ? (current + 1) % totalSlides : Math.min(current + 1, totalSlides - 1);
-				onIndexChange?.(next);
-				return next;
-			});
-		}, autoPlayInterval);
-		return () => {
-			window.clearInterval(interval);
-		};
-	}, [
-		autoPlay,
-		autoPlayInterval,
-		loop,
-		onIndexChange,
-		totalSlides
-	]);
-	const isPrevDisabled = !loop && resolvedActiveIndex <= 0;
-	const isNextDisabled = !loop && resolvedActiveIndex >= totalSlides - 1;
-	const slideLabel = useMemo(() => {
-		if (totalSlides === 0) return "No slides";
-		return `Slide ${resolvedActiveIndex + 1} of ${totalSlides}`;
-	}, [resolvedActiveIndex, totalSlides]);
-	return /* @__PURE__ */ jsxs("div", {
-		ref,
-		className: cx("pf-carousel", className),
-		"aria-label": ariaLabel,
-		...props,
-		children: [/* @__PURE__ */ jsx("div", {
-			className: "pf-carousel__viewport",
-			role: "region",
-			"aria-roledescription": "carousel",
-			"aria-label": slideLabel,
-			children: totalSlides === 0 ? /* @__PURE__ */ jsx("div", {
-				className: "pf-carousel__empty",
-				role: "status",
-				children: "Add at least one slide."
-			}) : /* @__PURE__ */ jsx("div", {
-				className: "pf-carousel__track",
-				style: { transform: `translateX(-${resolvedActiveIndex * 100}%)` },
-				children: slides.map((slide, index) => /* @__PURE__ */ jsx("div", {
-					className: "pf-carousel__slide",
-					role: "group",
-					"aria-roledescription": "slide",
-					"aria-label": `Slide ${index + 1} of ${totalSlides}`,
-					"aria-hidden": index !== resolvedActiveIndex,
-					children: slide
-				}, `slide-${index}`))
-			})
-		}), /* @__PURE__ */ jsxs("div", {
-			className: "pf-carousel__controls",
-			onKeyDown: (event) => {
-				if (event.key === "ArrowLeft") {
-					event.preventDefault();
-					goToIndex(resolvedActiveIndex - 1);
-				} else if (event.key === "ArrowRight") {
-					event.preventDefault();
-					goToIndex(resolvedActiveIndex + 1);
-				}
-			},
-			children: [
-				/* @__PURE__ */ jsx("button", {
-					type: "button",
-					className: "pf-carousel__nav",
-					"aria-label": "Previous slide",
-					disabled: isPrevDisabled || totalSlides < 2,
-					onClick: () => {
-						goToIndex(resolvedActiveIndex - 1);
-					},
-					children: /* @__PURE__ */ jsx(Icon, {
-						name: "square-caret-left",
-						"aria-hidden": true
-					})
-				}),
-				showIndicators && totalSlides > 1 ? /* @__PURE__ */ jsx("div", {
-					className: "pf-carousel__indicators",
-					"aria-label": "Slide indicators",
-					children: slides.map((_, index) => {
-						const isActive = index === resolvedActiveIndex;
-						return /* @__PURE__ */ jsx("button", {
-							type: "button",
-							className: cx("pf-carousel__indicator", isActive && "pf-carousel__indicator--active"),
-							"aria-label": `Go to slide ${index + 1}`,
-							"aria-current": isActive ? "true" : void 0,
-							onClick: () => {
-								goToIndex(index);
-							}
-						}, `indicator-${index}`);
-					})
-				}) : /* @__PURE__ */ jsx("span", {
-					className: "pf-carousel__indicator-spacer",
-					"aria-hidden": true
-				}),
-				/* @__PURE__ */ jsx("button", {
-					type: "button",
-					className: "pf-carousel__nav",
-					"aria-label": "Next slide",
-					disabled: isNextDisabled || totalSlides < 2,
-					onClick: () => {
-						goToIndex(resolvedActiveIndex + 1);
-					},
-					children: /* @__PURE__ */ jsx(Icon, {
-						name: "square-caret-right",
-						"aria-hidden": true
-					})
-				})
-			]
-		})]
-	});
-});
-Carousel.displayName = "Carousel";
-//#endregion
-export { Carousel };

package/dist/index43.js

@@ -1,16 +0,0 @@
-//#region ../../node_modules/clsx/dist/clsx.mjs
-function r(e) {
-	var t, f, n = "";
-	if ("string" == typeof e || "number" == typeof e) n += e;
-	else if ("object" == typeof e) if (Array.isArray(e)) {
-		var o = e.length;
-		for (t = 0; t < o; t++) e[t] && (f = r(e[t])) && (n && (n += " "), n += f);
-	} else for (f in e) e[f] && (n && (n += " "), n += f);
-	return n;
-}
-function clsx() {
-	for (var e, t, f = 0, n = "", o = arguments.length; f < o; f++) (e = arguments[f]) && (t = r(e)) && (n && (n += " "), n += t);
-	return n;
-}
-//#endregion
-export { clsx as default };