@pitchfork-ui/react 0.1.9 → 0.2.0

package/dist/styles.css

@@ -361,6 +361,17 @@
   --pf-utility-btn-danger-text: var(--color-semantic-status-danger-foreground);
   --pf-utility-btn-danger-bg-hover: var(--color-danger-100);
 
+  /* GaugeChart aliases */
+  --pf-gauge-color: var(--color-semantic-action-primary);
+  --pf-gauge-track-color: var(--color-semantic-background-subtle);
+  --pf-gauge-center-bg: var(--color-semantic-background-default);
+  --pf-gauge-label-color: var(--color-semantic-text-default);
+  --pf-gauge-label-size: var(--font-size-2xl);
+  --pf-gauge-sub-label-color: var(--color-semantic-text-muted);
+
+  /* Sparkline aliases */
+  --pf-sparkline-color: var(--color-semantic-action-primary);
+
   /* TreeView aliases */
   --pf-treeview-bg: var(--color-semantic-background-default);
   --pf-treeview-border: var(--color-semantic-border-default);
@@ -662,9 +673,11 @@
   --color-semantic-border-default: var(--color-gray-700);
   --color-semantic-border-strong: var(--color-gray-500);
   --color-semantic-border-focus: var(--color-brand-400);
-  --color-semantic-action-primary: var(--color-brand-500);
-  --color-semantic-action-primary-hover: var(--color-brand-600);
-  --color-semantic-action-primary-active: var(--color-brand-700);
+
+  /* brand-600 (#2563eb) on white = ~5:1 — passes WCAG AA for normal text */
+  --color-semantic-action-primary: var(--color-brand-600);
+  --color-semantic-action-primary-hover: var(--color-brand-700);
+  --color-semantic-action-primary-active: var(--color-brand-800);
   --color-semantic-action-primary-text: var(--color-base-white);
   --color-semantic-action-secondary: var(--color-gray-800);
   --color-semantic-action-secondary-hover: var(--color-gray-700);
@@ -678,10 +691,54 @@
   --color-semantic-status-warning-foreground: var(--color-warning-300);
   --color-semantic-status-warning-bright: var(--color-warning-400);
   --color-semantic-status-danger-background: var(--color-danger-900);
-  --color-semantic-status-danger-border: var(--color-danger-700);
+  /* danger-600 (#d92d20) on gray-900 = 3.71:1 — danger-700 only gives 2.72:1 */
+  --color-semantic-status-danger-border: var(--color-danger-600);
   --color-semantic-status-danger-foreground: var(--color-danger-300);
   --color-semantic-status-danger-bright: var(--color-danger-400);
 
+  /* Info state overrides — light brand colors (brand-50/100/300) are invisible on dark surfaces */
+  --pf-notification-info-bg: var(--color-brand-900);
+  --pf-notification-info-border: var(--color-brand-700);
+  --pf-notification-info-icon: var(--color-brand-300);
+  --pf-notification-info-title: var(--color-brand-200);
+  --pf-notification-info-hover-bg: var(--color-brand-800);
+  --pf-notification-info-hover-icon: var(--color-brand-200);
+
+  --pf-alert-info-background: var(--color-brand-900);
+  --pf-alert-info-border: var(--color-brand-700);
+  --pf-alert-info-foreground: var(--color-brand-200);
+
+  --pf-inline-cta-info-bg: var(--color-brand-900);
+  --pf-inline-cta-info-border: var(--color-brand-700);
+  --pf-inline-cta-info-icon: var(--color-brand-300);
+  --pf-inline-cta-info-heading: var(--color-brand-200);
+  --pf-inline-cta-info-description: var(--color-brand-300);
+
+  --pf-badge-brand-background: var(--color-brand-900);
+  --pf-badge-brand-foreground: var(--color-brand-300);
+
+  --pf-badgegroup-brand-100: var(--color-brand-900);
+  --pf-badgegroup-brand-300: var(--color-brand-700);
+  --pf-badgegroup-brand-700: var(--color-brand-300);
+
+  --pf-tag-brand-bg: var(--color-brand-900);
+  --pf-tag-brand-text: var(--color-brand-300);
+
+  --pf-utility-btn-brand-bg: var(--color-brand-900);
+  --pf-utility-btn-brand-border: var(--color-brand-700);
+  --pf-utility-btn-brand-text: var(--color-brand-300);
+  --pf-utility-btn-brand-bg-hover: var(--color-brand-800);
+
+  /* Calendar — same border-default contrast issue as TreeView */
+  --pf-calendar-border: var(--color-semantic-border-strong);
+
+  /* GaugeChart — track uses background-subtle (gray-700) which is 1.72:1 against gray-900 */
+  --pf-gauge-track-color: var(--color-semantic-border-strong);
+
+  /* TreeView — border-default (gray-700) is 1.73:1 against gray-900, fails WCAG non-text contrast.
+     border-strong (gray-500) gives 3.75:1. */
+  --pf-treeview-border: var(--color-semantic-border-strong);
+
   --pf-focus-ring: 0 0 0 var(--pf-focus-ring-width)
     color-mix(in srgb, var(--pf-focus-ring-color) 45%, transparent);
 }
@@ -2653,6 +2710,52 @@ body {
   background: color-mix(in srgb, var(--pf-inline-cta-warning-bg) 60%, var(--color-base-white));
   border-color: var(--pf-inline-cta-warning-border);
 }
+.pf-gauge {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.pf-gauge__svg {
+  position: absolute;
+  inset: 0;
+}
+
+.pf-gauge__track {
+  stroke: var(--pf-gauge-track-color);
+}
+
+.pf-gauge__fill {
+  transition: stroke-dasharray var(--pf-transition-medium, 180ms ease);
+}
+
+.pf-gauge__center {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--space-1);
+  position: relative;
+  z-index: 1;
+  padding: var(--space-2);
+  border-radius: var(--radius-full);
+  background: var(--pf-gauge-center-bg);
+  text-align: center;
+}
+
+.pf-gauge__label {
+  color: var(--pf-gauge-label-color);
+  font-size: var(--pf-gauge-label-size);
+  font-weight: var(--font-weight-semibold);
+  line-height: 1;
+}
+
+.pf-gauge__sub-label {
+  color: var(--pf-gauge-sub-label-color);
+  font-size: var(--font-size-sm);
+  line-height: 1;
+}
 /* ─── Chart color palette ─────────────────────────────────────────────── */
 :root {
   --pf-chart-color-1: var(--color-brand-600);
@@ -4590,6 +4693,23 @@ body {
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+.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));
+}
 .pf-slideout__portal {
   inset: 0;
   position: fixed;
@@ -5673,4 +5793,3 @@ body {
   padding: var(--space-4);
   text-align: center;
 }
-/*$vite$:1*/

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.2.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,57 @@
+/**
+ * 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 ──────────────────────────────────────────────────────────
+     The library defaults to system-ui. Import your font, then override.   */
+
+  --font-family-sans: system-ui, -apple-system, sans-serif;
+  --font-family-mono: ui-monospace, 'Cascadia Code', monospace;
+
+  /* ── 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/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 };