@djangocfg/ui-core 2.1.157 → 2.1.159

package/README.md

@@ -1,6 +1,6 @@
 # @djangocfg/ui-core
 
-Pure React UI library with 61 components built on Radix UI + Tailwind CSS v4.
+Pure React UI library with 60+ components built on Radix UI + Tailwind CSS v4.
 
 **No Next.js dependencies** — works with Electron, Vite, CRA, and any React environment.
 
@@ -19,9 +19,10 @@ pnpm add @djangocfg/ui-core
 | Package | Use Case |
 |---------|----------|
 | `@djangocfg/ui-core` | Electron, Vite, CRA, any React app |
+| `@djangocfg/ui-tools` | Heavy tools with lazy loading |
 | `@djangocfg/ui-nextjs` | Next.js apps (extends ui-core) |
 
-## Components (60)
+## Components (60+)
 
 ### Forms (17)
 `Label` `Button` `ButtonLink` `Input` `Checkbox` `RadioGroup` `Select` `Textarea` `Switch` `Slider` `Combobox` `MultiSelect` `CountrySelect` `InputOTP` `PhoneInput` `Form` `Field`
@@ -62,6 +63,46 @@ pnpm add @djangocfg/ui-core
 | `useBrowserDetect` | Browser detection (Chrome, Safari, in-app browsers, etc.) |
 | `useDeviceDetect` | Device detection (mobile, tablet, desktop, OS, etc.) |
 
+## Theme Palette Hooks
+
+Hooks for accessing theme colors from CSS variables (useful for charts, diagrams, etc.):
+
+| Hook | Description |
+|------|-------------|
+| `useThemePalette()` | Full color palette from CSS variables |
+| `useStylePresets()` | Pre-built style configs for diagrams |
+| `useBoxColors()` | Colors for boxes/containers |
+
+```tsx
+import { useStylePresets, useBoxColors } from '@djangocfg/ui-core/styles/palette';
+
+function MyChart() {
+  const presets = useStylePresets();
+  // presets.success = { fill: '#22c55e', stroke: '#16a34a', color: '#ffffff' }
+  // presets.warning = { fill: '#f59e0b', stroke: '#d97706', color: '#000000' }
+  // presets.danger = { fill: '#ef4444', stroke: '#dc2626', color: '#ffffff' }
+  // presets.info = { fill: '#3b82f6', stroke: '#2563eb', color: '#ffffff' }
+  // presets.primary = { fill: '#...', stroke: '#...', color: '#...' }
+
+  const boxes = useBoxColors();
+  // boxes.primary = 'rgba(59, 130, 246, 0.2)'
+  // boxes.success = 'rgba(34, 197, 94, 0.2)'
+  // etc.
+
+  return <Chart colors={[presets.success.fill, presets.warning.fill]} />;
+}
+```
+
+### Color Utilities
+
+```tsx
+import { hslToHex, hslToRgbString, hslToRgba } from '@djangocfg/ui-core/styles/palette';
+
+hslToHex('217 91% 60%');        // '#3b82f6'
+hslToRgbString('217 91% 60%'); // 'rgb(59, 130, 246)'
+hslToRgba('217 91% 60%', 0.5); // 'rgba(59, 130, 246, 0.5)'
+```
+
 ## Dialog Service
 
 Universal dialog service to replace native `window.alert`, `window.confirm`, `window.prompt` with beautiful shadcn dialogs.
@@ -153,6 +194,7 @@ import '@djangocfg/ui-core/styles/globals';
 | `@djangocfg/ui-core/lib` | Utilities (cn, etc.) |
 | `@djangocfg/ui-core/lib/dialog-service` | Dialog service |
 | `@djangocfg/ui-core/styles` | CSS |
+| `@djangocfg/ui-core/styles/palette` | Theme palette hooks & utilities |
 
 ## What's NOT included (use ui-nextjs)
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@djangocfg/ui-core",
-  "version": "2.1.157",
+  "version": "2.1.159",
   "description": "Pure React UI component library without Next.js dependencies - for Electron, Vite, CRA apps",
   "keywords": [
     "ui-components",
@@ -57,7 +57,12 @@
     "./styles/globals": "./src/styles/globals.css",
     "./styles/theme": "./src/styles/theme.css",
     "./styles/base": "./src/styles/base.css",
-    "./styles/utilities": "./src/styles/utilities.css"
+    "./styles/utilities": "./src/styles/utilities.css",
+    "./styles/palette": {
+      "types": "./src/styles/palette/index.ts",
+      "import": "./src/styles/palette/index.ts",
+      "require": "./src/styles/palette/index.ts"
+    }
   },
   "files": [
     "dist",
@@ -71,7 +76,7 @@
     "playground": "playground dev"
   },
   "peerDependencies": {
-    "@djangocfg/i18n": "^2.1.157",
+    "@djangocfg/i18n": "^2.1.159",
     "react-device-detect": "^2.2.3",
     "consola": "^3.4.2",
     "lucide-react": "^0.545.0",
@@ -133,9 +138,9 @@
     "vaul": "1.1.2"
   },
   "devDependencies": {
-    "@djangocfg/i18n": "^2.1.157",
+    "@djangocfg/i18n": "^2.1.159",
     "@djangocfg/playground": "workspace:*",
-    "@djangocfg/typescript-config": "^2.1.157",
+    "@djangocfg/typescript-config": "^2.1.159",
     "@types/node": "^24.7.2",
     "@types/react": "^19.1.0",
     "@types/react-dom": "^19.1.0",

package/src/styles/palette/index.ts

@@ -0,0 +1,55 @@
+/**
+ * Theme Palette
+ *
+ * Hooks and utilities for accessing theme colors programmatically.
+ * Colors are read directly from CSS variables, ensuring consistency
+ * with the theme system.
+ *
+ * @example
+ * ```tsx
+ * import {
+ *   useThemePalette,
+ *   useStylePresets,
+ *   useBoxColors
+ * } from '@djangocfg/ui-core/styles/palette';
+ *
+ * function MyComponent() {
+ *   const palette = useThemePalette();
+ *   const presets = useStylePresets();
+ *   const boxes = useBoxColors();
+ *
+ *   // Use in canvas
+ *   ctx.fillStyle = palette.primary;
+ *
+ *   // Use in Mermaid FlowDiagram
+ *   flow.style.define('success', presets.success);
+ *
+ *   // Use in Mermaid SequenceDiagram rect
+ *   rect(boxes.primary, () => { ... });
+ * }
+ * ```
+ *
+ * @module ui-core/styles/palette
+ */
+
+// Types
+export type {
+  ThemePalette,
+  StyleColors,
+  StylePresets,
+  BoxColors,
+} from './types';
+
+// Hooks
+export {
+  useThemePalette,
+  useStylePresets,
+  useBoxColors,
+} from './useThemePalette';
+
+// Utils (for advanced use)
+export {
+  hslToHex,
+  hslToRgbString,
+  hslToRgba,
+} from './utils';

package/src/styles/palette/types.ts

@@ -0,0 +1,90 @@
+/**
+ * Theme Palette Types
+ * @module ui-core/styles/palette/types
+ */
+
+/**
+ * Complete semantic color palette for programmatic use
+ * (Canvas, SVG, Mermaid diagrams, etc.)
+ */
+export interface ThemePalette {
+  // Base Colors
+  background: string;
+  foreground: string;
+  card: string;
+  cardForeground: string;
+  popover: string;
+  popoverForeground: string;
+  muted: string;
+  mutedForeground: string;
+  border: string;
+  input: string;
+  ring: string;
+
+  // Semantic Colors
+  primary: string;
+  primaryForeground: string;
+  secondary: string;
+  secondaryForeground: string;
+  accent: string;
+  accentForeground: string;
+  destructive: string;
+  destructiveForeground: string;
+
+  // Status Colors
+  success: string;
+  successForeground: string;
+  warning: string;
+  warningForeground: string;
+  info: string;
+  infoForeground: string;
+
+  // Chart Colors
+  chart1: string;
+  chart2: string;
+  chart3: string;
+  chart4: string;
+  chart5: string;
+}
+
+/**
+ * Style colors for elements (fill, stroke, text)
+ */
+export interface StyleColors {
+  fill: string;
+  stroke: string;
+  color: string;
+}
+
+/**
+ * Style presets for common UI patterns
+ */
+export interface StylePresets {
+  primary: StyleColors;
+  secondary: StyleColors;
+  success: StyleColors;
+  danger: StyleColors;
+  warning: StyleColors;
+  info: StyleColors;
+  muted: StyleColors;
+  card: StyleColors;
+  accent: StyleColors;
+  chart1: StyleColors;
+  chart2: StyleColors;
+  chart3: StyleColors;
+  chart4: StyleColors;
+  chart5: StyleColors;
+}
+
+/**
+ * Background colors for boxes/regions
+ * (e.g., Mermaid rect blocks, highlighted sections)
+ */
+export interface BoxColors {
+  primary: string;
+  success: string;
+  warning: string;
+  danger: string;
+  info: string;
+  muted: string;
+}

package/src/styles/palette/useThemePalette.ts

@@ -0,0 +1,233 @@
+'use client';
+
+/**
+ * Hook to get theme colors from CSS variables
+ *
+ * Reads colors directly from document, converting HSL to hex for compatibility
+ * with Canvas, SVG, Mermaid, and other tools that don't support CSS variables.
+ *
+ * @module ui-core/styles/palette/useThemePalette
+ */
+
+import { useMemo } from 'react';
+import { useResolvedTheme } from '../../hooks/useResolvedTheme';
+import { hslToHex, hslToRgba } from './utils';
+import type { ThemePalette, StylePresets, BoxColors } from './types';
+
+/**
+ * Read a CSS variable from document and convert to hex
+ */
+function getCssColorAsHex(varName: string): string {
+  if (typeof document === 'undefined') return '#000000';
+
+  const style = getComputedStyle(document.documentElement);
+  const value = style.getPropertyValue(`--${varName}`).trim();
+
+  if (!value) return '#000000';
+
+  // If already hex, return as-is
+  if (value.startsWith('#')) return value;
+
+  // Convert HSL to hex
+  return hslToHex(value);
+}
+
+/**
+ * Read a CSS variable from document and convert to rgba with opacity
+ */
+function getCssColorAsRgba(varName: string, alpha: number): string {
+  if (typeof document === 'undefined') return `rgba(0, 0, 0, ${alpha})`;
+
+  const style = getComputedStyle(document.documentElement);
+  const value = style.getPropertyValue(`--${varName}`).trim();
+
+  if (!value) return `rgba(0, 0, 0, ${alpha})`;
+
+  return hslToRgba(value, alpha);
+}
+
+/**
+ * Hook to get the full theme palette from CSS variables
+ *
+ * @example
+ * ```tsx
+ * function MyComponent() {
+ *   const palette = useThemePalette();
+ *
+ *   // Use in canvas
+ *   ctx.fillStyle = palette.primary;
+ *
+ *   // Use in inline styles
+ *   <div style={{ backgroundColor: palette.success }} />
+ * }
+ * ```
+ */
+export function useThemePalette(): ThemePalette {
+  const theme = useResolvedTheme();
+
+  return useMemo(() => {
+    return {
+      // Base colors
+      background: getCssColorAsHex('background'),
+      foreground: getCssColorAsHex('foreground'),
+      card: getCssColorAsHex('card'),
+      cardForeground: getCssColorAsHex('card-foreground'),
+      popover: getCssColorAsHex('popover'),
+      popoverForeground: getCssColorAsHex('popover-foreground'),
+      muted: getCssColorAsHex('muted'),
+      mutedForeground: getCssColorAsHex('muted-foreground'),
+      border: getCssColorAsHex('border'),
+      input: getCssColorAsHex('input'),
+      ring: getCssColorAsHex('ring'),
+
+      // Semantic colors
+      primary: getCssColorAsHex('primary'),
+      primaryForeground: getCssColorAsHex('primary-foreground'),
+      secondary: getCssColorAsHex('secondary'),
+      secondaryForeground: getCssColorAsHex('secondary-foreground'),
+      accent: getCssColorAsHex('accent'),
+      accentForeground: getCssColorAsHex('accent-foreground'),
+      destructive: getCssColorAsHex('destructive'),
+      destructiveForeground: getCssColorAsHex('destructive-foreground'),
+
+      // Status colors (mapped from chart colors)
+      success: getCssColorAsHex('chart-2'), // Green
+      successForeground: '#ffffff',
+      warning: getCssColorAsHex('chart-4'), // Orange
+      warningForeground: '#ffffff',
+      info: getCssColorAsHex('chart-1'), // Blue (same as primary)
+      infoForeground: '#ffffff',
+
+      // Chart colors
+      chart1: getCssColorAsHex('chart-1'),
+      chart2: getCssColorAsHex('chart-2'),
+      chart3: getCssColorAsHex('chart-3'),
+      chart4: getCssColorAsHex('chart-4'),
+      chart5: getCssColorAsHex('chart-5'),
+    };
+  }, [theme]);
+}
+
+/**
+ * Hook to get style presets for elements (nodes, boxes, etc.)
+ *
+ * @example
+ * ```tsx
+ * function MyDiagram() {
+ *   const presets = useStylePresets();
+ *
+ *   // Use in Mermaid FlowDiagram
+ *   flow.style.define('success', presets.success);
+ *   flow.style.define('primary', presets.primary);
+ * }
+ * ```
+ */
+export function useStylePresets(): StylePresets {
+  const palette = useThemePalette();
+
+  return useMemo(() => ({
+    primary: {
+      fill: palette.primary,
+      stroke: palette.primary,
+      color: palette.primaryForeground,
+    },
+    secondary: {
+      fill: palette.secondary,
+      stroke: palette.secondary,
+      color: palette.secondaryForeground,
+    },
+    success: {
+      fill: palette.success,
+      stroke: palette.success,
+      color: palette.successForeground,
+    },
+    danger: {
+      fill: palette.destructive,
+      stroke: palette.destructive,
+      color: palette.destructiveForeground,
+    },
+    warning: {
+      fill: palette.warning,
+      stroke: palette.warning,
+      color: palette.warningForeground,
+    },
+    info: {
+      fill: palette.info,
+      stroke: palette.info,
+      color: palette.infoForeground,
+    },
+    muted: {
+      fill: palette.muted,
+      stroke: palette.border,
+      color: palette.mutedForeground,
+    },
+    card: {
+      fill: palette.card,
+      stroke: palette.border,
+      color: palette.cardForeground,
+    },
+    accent: {
+      fill: palette.accent,
+      stroke: palette.border,
+      color: palette.accentForeground,
+    },
+    chart1: {
+      fill: palette.chart1,
+      stroke: palette.chart1,
+      color: palette.primaryForeground,
+    },
+    chart2: {
+      fill: palette.chart2,
+      stroke: palette.chart2,
+      color: palette.primaryForeground,
+    },
+    chart3: {
+      fill: palette.chart3,
+      stroke: palette.chart3,
+      color: palette.primaryForeground,
+    },
+    chart4: {
+      fill: palette.chart4,
+      stroke: palette.chart4,
+      color: palette.primaryForeground,
+    },
+    chart5: {
+      fill: palette.chart5,
+      stroke: palette.chart5,
+      color: palette.primaryForeground,
+    },
+  }), [palette]);
+}
+
+/**
+ * Hook to get box/region colors (e.g., for Mermaid rect blocks)
+ *
+ * @example
+ * ```tsx
+ * function MySequenceDiagram() {
+ *   const boxes = useBoxColors();
+ *
+ *   // Use in Mermaid SequenceDiagram
+ *   rect(boxes.primary, () => {
+ *     d.Alice.sync.Bob.msg('Hello');
+ *   });
+ * }
+ * ```
+ */
+export function useBoxColors(): BoxColors {
+  const theme = useResolvedTheme();
+
+  return useMemo(() => {
+    // Semi-transparent backgrounds for boxes
+    const alpha = theme === 'dark' ? 0.3 : 0.15;
+
+    return {
+      primary: getCssColorAsRgba('primary', alpha),
+      success: getCssColorAsRgba('chart-2', alpha),
+      warning: getCssColorAsRgba('chart-4', alpha),
+      danger: getCssColorAsRgba('destructive', alpha),
+      info: getCssColorAsRgba('chart-3', alpha),
+      muted: getCssColorAsRgba('muted', alpha),
+    };
+  }, [theme]);
+}

package/src/styles/palette/utils.ts

@@ -0,0 +1,91 @@
+/**
+ * Color conversion utilities
+ * @module ui-core/styles/palette/utils
+ */
+
+/**
+ * Parse HSL string from CSS variable (e.g., "217 91% 60%") to components
+ */
+function parseHslString(hsl: string): { h: number; s: number; l: number } | null {
+  const match = hsl.trim().match(/^(\d+)\s+(\d+)%\s+(\d+)%$/);
+  if (!match) return null;
+  return {
+    h: parseInt(match[1], 10),
+    s: parseInt(match[2], 10),
+    l: parseInt(match[3], 10),
+  };
+}
+
+/**
+ * Convert HSL to RGB
+ */
+function hslToRgb(h: number, s: number, l: number): { r: number; g: number; b: number } {
+  s /= 100;
+  l /= 100;
+
+  const c = (1 - Math.abs(2 * l - 1)) * s;
+  const x = c * (1 - Math.abs(((h / 60) % 2) - 1));
+  const m = l - c / 2;
+
+  let r = 0, g = 0, b = 0;
+
+  if (h >= 0 && h < 60) { r = c; g = x; b = 0; }
+  else if (h >= 60 && h < 120) { r = x; g = c; b = 0; }
+  else if (h >= 120 && h < 180) { r = 0; g = c; b = x; }
+  else if (h >= 180 && h < 240) { r = 0; g = x; b = c; }
+  else if (h >= 240 && h < 300) { r = x; g = 0; b = c; }
+  else { r = c; g = 0; b = x; }
+
+  return {
+    r: Math.round((r + m) * 255),
+    g: Math.round((g + m) * 255),
+    b: Math.round((b + m) * 255),
+  };
+}
+
+/**
+ * Convert RGB to hex string
+ */
+function rgbToHex(r: number, g: number, b: number): string {
+  const toHex = (n: number) => n.toString(16).padStart(2, '0');
+  return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
+}
+
+/**
+ * Convert CSS HSL variable value to hex
+ * Input: "217 91% 60%" (from CSS --primary: 217 91% 60%)
+ * Output: "#3b82f6"
+ */
+export function hslToHex(hslString: string): string {
+  const parsed = parseHslString(hslString);
+  if (!parsed) return '#000000';
+
+  const { r, g, b } = hslToRgb(parsed.h, parsed.s, parsed.l);
+  return rgbToHex(r, g, b);
+}
+
+/**
+ * Convert CSS HSL variable value to rgb() string
+ * Input: "217 91% 60%"
+ * Output: "rgb(59, 130, 246)"
+ */
+export function hslToRgbString(hslString: string): string {
+  const parsed = parseHslString(hslString);
+  if (!parsed) return 'rgb(0, 0, 0)';
+
+  const { r, g, b } = hslToRgb(parsed.h, parsed.s, parsed.l);
+  return `rgb(${r}, ${g}, ${b})`;
+}
+
+/**
+ * Convert CSS HSL variable value to rgba() string with opacity
+ * Input: "217 91% 60%", 0.2
+ * Output: "rgba(59, 130, 246, 0.2)"
+ */
+export function hslToRgba(hslString: string, alpha: number): string {
+  const parsed = parseHslString(hslString);
+  if (!parsed) return `rgba(0, 0, 0, ${alpha})`;
+
+  const { r, g, b } = hslToRgb(parsed.h, parsed.s, parsed.l);
+  return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+}