npm - flikkui - Versions diffs - 0.2.0-beta.2 → 0.2.0-beta.5 - Mend

flikkui 0.2.0-beta.2 → 0.2.0-beta.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (269) hide show

package/README.md CHANGED Viewed

@@ -26,6 +26,98 @@ function App() {
 }
 ```
+## Customizing the Theme
+Flikkui uses CSS variables for all theming. Override any variable in your own CSS to customize colors, spacing, border radius, and more.
+### Colors
+Override semantic color palettes by redefining the CSS variables after importing the library styles:
+```css
+:root {
+  /* Change the primary color to green */
+  --color-primary-50: oklch(0.982 0.018 155.826);
+  --color-primary-100: oklch(0.962 0.044 156.743);
+  --color-primary-200: oklch(0.925 0.084 155.995);
+  --color-primary-300: oklch(0.871 0.15 154.449);
+  --color-primary-400: oklch(0.792 0.209 151.711);
+  --color-primary-500: oklch(0.723 0.219 149.579);
+  --color-primary-600: oklch(0.627 0.194 149.214);
+  --color-primary-700: oklch(0.527 0.154 150.069);
+  --color-primary-800: oklch(0.448 0.119 151.328);
+  --color-primary-900: oklch(0.393 0.095 152.535);
+  --color-primary-950: oklch(0.266 0.065 152.934);
+  --color-primary: var(--color-primary-600);
+}
+```
+Available color palettes: `primary`, `danger`, `success`, `warning`. Each has shades from `50` to `950`.
+### Backgrounds & Borders
+```css
+:root {
+  --color-background: oklch(98.5% 0.002 247.839);
+  --color-background-secondary: oklch(95% 0.002 247.839);
+  --color-background-tertiary: oklch(90% 0.002 247.839);
+  --color-border: oklch(92.2% 0 0);
+}
+```
+### Form Elements
+Control sizing, padding, and border radius for all form components:
+```css
+:root {
+  /* Border radius */
+  --form-rounded: 0.5rem;
+  /* Heights */
+  --form-min-h-sm: 2rem;
+  --form-min-h-md: 2.5rem;
+  --form-min-h-lg: 3rem;
+  /* Horizontal padding */
+  --form-px-sm: 0.75rem;
+  --form-px-md: 0.875rem;
+  --form-px-lg: 1rem;
+  /* Font sizes */
+  --form-text-sm: 0.75rem;
+  --form-text-md: 0.875rem;
+  --form-text-lg: 1rem;
+}
+```
+Button, badge, segmented, and other component variables inherit from these form defaults but can be overridden individually (e.g. `--button-rounded`, `--badge-rounded`).
+### Dark Mode
+Add the `dark` class to your `<html>` or any parent container. All components adapt automatically:
+```html
+<html class="dark">
+  <!-- dark mode active -->
+</html>
+```
+The library ships with sensible dark mode defaults. To customize dark mode colors, override variables inside `.dark`:
+```css
+.dark {
+  --color-background: oklch(14.5% 0 0);
+  --color-border: oklch(30% 0 0);
+  --color-primary: var(--color-primary-400);
+}
+```
+### Full Variable Reference
+See [`src/styles/theme.css`](src/styles/theme.css) for the complete list of available CSS variables.
 ## Documentation
 This package is currently in beta. Full documentation coming soon.

package/dist/components/ai/PromptInput/PromptInput.js CHANGED Viewed

@@ -13,21 +13,6 @@ import '../../forms/DatePicker/DatePicker.theme.js';
 import '../../forms/FileUpload/FileUpload.js';
 import '../../forms/TimePicker/TimePicker.js';
 import 'react-dom';
-import '../../forms/TimePicker/TimePicker.theme.js';
-import '../../forms/Slider/Slider.js';
-import '../../forms/Slider/Slider.theme.js';
-import '../../forms/Signature/Signature.js';
-import '../../forms/Signature/Signature.theme.js';
-import '../../forms/RichTextEditor/RichTextEditor.js';
-import '../../forms/RichTextEditor/RichTextEditor.theme.js';
-import '../../forms/InputOTP/InputOTP.js';
-import '../../forms/InputOTP/InputOTP.theme.js';
-import '../../forms/InputCreditCard/InputCreditCard.theme.js';
-import '../../forms/InputAddress/InputAddress.theme.js';
-import '../../forms/InputDate/InputDate.js';
-import '../../forms/InputCounter/InputCounter.js';
-import '../../forms/StepperForm/StepperForm.js';
-import '../../forms/StepperForm/StepperForm.types.js';
 import '../../core/Accordion/Accordion.js';
 import '../../core/AlertDialog/AlertDialog.js';
 import '../../core/Avatar/Avatar.js';
@@ -59,6 +44,7 @@ import '../../core/Modal/Modal.js';
 import '../../core/Pagination/Pagination.js';
 import '../../core/Popover/Popover.js';
 import '../../core/Popover/PopoverContext.js';
+import '../../core/Progress/Progress.js';
 import '../../core/ProgressiveBlur/ProgressiveBlur.js';
 import '../../core/Segmented/Segmented.js';
 import '../../core/Skeleton/Skeleton.js';
@@ -72,6 +58,7 @@ import '../../core/Tabs/TabsContext.js';
 import '../../core/Tooltip/Tooltip.js';
 import '../../core/Tooltip/Tooltip.animations.js';
 import '../../core/Tree/Tree.js';
+import '../../core/Tag/Tag.js';
 import '../../core/Alert/Alert.js';
 import '../../core/Toast/Toast.js';
 import '../../core/Toast/ToastProvider.js';
@@ -92,6 +79,27 @@ import '../../core/Sidebar/SidebarNav.js';
 import '../../core/Sidebar/SidebarNavGroup.js';
 import '../../core/Sidebar/SidebarToggle.js';
 import '../../core/Sidebar/SidebarContext.js';
+import '../../forms/TimePicker/WheelColumn.js';
+import '../../forms/TimePicker/TimePicker.theme.js';
+import '../../forms/Slider/Slider.js';
+import '../../forms/Slider/Slider.theme.js';
+import '../../forms/Signature/Signature.js';
+import '../../forms/Signature/Signature.theme.js';
+import '../../forms/RichTextEditor/RichTextEditor.js';
+import '../../forms/RichTextEditor/RichTextEditor.theme.js';
+import '../../forms/InputOTP/InputOTP.js';
+import '../../forms/InputOTP/InputOTP.theme.js';
+import '../../forms/InputCreditCard/InputCreditCard.theme.js';
+import '../../forms/InputAddress/InputAddress.theme.js';
+import '../../forms/InputDate/InputDate.js';
+import '../../forms/InputCounter/InputCounter.js';
+import '../../forms/StepperForm/StepperForm.js';
+import '../../forms/StepperForm/StepperForm.types.js';
+import '../../forms/SelectExpand/SelectExpand.theme.js';
+import '../../forms/InputTag/InputTag.js';
+import '../../forms/InputTag/InputTag.theme.js';
+import '../../forms/Combobox/Combobox.js';
+import '../../forms/Combobox/Combobox.theme.js';
 import { promptInputTheme } from './PromptInput.theme.js';
 /**

package/dist/components/ai/PromptSuggestions/PromptSuggestion.d.ts ADDED Viewed

@@ -0,0 +1,27 @@
+import React from "react";
+import { PromptSuggestionProps } from "./PromptSuggestion.types";
+/**
+ * PromptSuggestion - Individual clickable suggestion chip
+ *
+ * Simple, focused component for AI prompt interfaces.
+ * White background with border styling, fully customizable via className.
+ *
+ * @example Basic usage
+ * ```tsx
+ * <div className="flex gap-2">
+ *   <PromptSuggestion onSelect={handleSelect}>Write a poem</PromptSuggestion>
+ *   <PromptSuggestion onSelect={handleSelect}>Summarize document</PromptSuggestion>
+ * </div>
+ * ```
+ *
+ * @example With icons
+ * ```tsx
+ * <PromptSuggestion
+ *   icon={<CodeBracketIcon className="size-4" />}
+ *   onSelect={handleSelect}
+ * >
+ *   Explain code
+ * </PromptSuggestion>
+ * ```
+ */
+export declare const PromptSuggestion: React.ForwardRefExoticComponent<PromptSuggestionProps & React.RefAttributes<HTMLSpanElement>>;

package/dist/components/ai/PromptSuggestions/PromptSuggestion.js ADDED Viewed

@@ -0,0 +1,62 @@
+import React__default, { useCallback } from 'react';
+import { promptSuggestionTheme } from './PromptSuggestion.theme.js';
+import { cn } from '../../../utils/cn.js';
+/**
+ * PromptSuggestion - Individual clickable suggestion chip
+ *
+ * Simple, focused component for AI prompt interfaces.
+ * White background with border styling, fully customizable via className.
+ *
+ * @example Basic usage
+ * ```tsx
+ * <div className="flex gap-2">
+ *   <PromptSuggestion onSelect={handleSelect}>Write a poem</PromptSuggestion>
+ *   <PromptSuggestion onSelect={handleSelect}>Summarize document</PromptSuggestion>
+ * </div>
+ * ```
+ *
+ * @example With icons
+ * ```tsx
+ * <PromptSuggestion
+ *   icon={<CodeBracketIcon className="size-4" />}
+ *   onSelect={handleSelect}
+ * >
+ *   Explain code
+ * </PromptSuggestion>
+ * ```
+ */
+const PromptSuggestion = React__default.forwardRef(({ children, onSelect, icon, className, onClick, ...props }, ref) => {
+    const theme = promptSuggestionTheme;
+    // Extract text content from children for onSelect callback
+    const getTextContent = useCallback(() => {
+        if (typeof children === "string") {
+            return children;
+        }
+        if (typeof children === "number") {
+            return String(children);
+        }
+        return "";
+    }, [children]);
+    // Handle click with onSelect callback
+    const handleClick = useCallback((event) => {
+        onClick === null || onClick === void 0 ? void 0 : onClick(event);
+        if (onSelect) {
+            const text = getTextContent();
+            if (text) {
+                onSelect(text);
+            }
+        }
+    }, [onClick, onSelect, getTextContent]);
+    return (React__default.createElement("span", { ref: ref, role: "button", tabIndex: 0, onClick: handleClick, onKeyDown: (e) => {
+            if (e.key === "Enter" || e.key === " ") {
+                e.preventDefault();
+                handleClick(e);
+            }
+        }, className: cn(theme.baseStyle, className), "aria-label": typeof children === "string" ? `Use suggestion: ${children}` : undefined, ...props },
+        icon && React__default.createElement("span", { className: theme.iconStyle }, icon),
+        children));
+});
+PromptSuggestion.displayName = "PromptSuggestion";
+export { PromptSuggestion };

package/dist/components/ai/PromptSuggestions/PromptSuggestion.theme.d.ts ADDED Viewed

@@ -0,0 +1,10 @@
+/**
+ * PromptSuggestion theme configuration
+ */
+export interface PromptSuggestionTheme {
+    /** Base styles for the suggestion chip */
+    baseStyle: string;
+    /** Icon container styles */
+    iconStyle: string;
+}
+export declare const promptSuggestionTheme: PromptSuggestionTheme;

package/dist/components/ai/PromptSuggestions/PromptSuggestion.theme.js ADDED Viewed

@@ -0,0 +1,12 @@
+const promptSuggestionTheme = {
+    baseStyle: "inline-flex items-center gap-2 py-2 px-3.5 rounded-full " +
+        "bg-white dark:bg-[var(--color-background)] " +
+        "border border-[var(--color-border)] " +
+        "text-sm font-medium text-[var(--color-text-primary)] " +
+        "cursor-pointer transition-all duration-300 " +
+        "hover:bg-[var(--color-background-secondary)] dark:hover:bg-[var(--color-background-secondary)] " +
+        "focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-primary)]",
+    iconStyle: "size-4 flex-shrink-0",
+};
+export { promptSuggestionTheme };

package/dist/components/ai/PromptSuggestions/PromptSuggestion.types.d.ts ADDED Viewed

@@ -0,0 +1,53 @@
+import React from "react";
+/**
+ * PromptSuggestion component props
+ *
+ * Individual clickable suggestion chip for AI prompt interfaces.
+ * Simple, focused component with white background and border styling.
+ *
+ * @example Basic usage
+ * ```tsx
+ * <PromptSuggestion onSelect={handleSelect}>
+ *   Write a poem
+ * </PromptSuggestion>
+ * ```
+ *
+ * @example With icon
+ * ```tsx
+ * <PromptSuggestion
+ *   icon={<CodeBracketIcon className="size-4" />}
+ *   onSelect={handleSelect}
+ * >
+ *   Explain this code
+ * </PromptSuggestion>
+ * ```
+ *
+ * @example Custom styling (shadcn approach)
+ * ```tsx
+ * <PromptSuggestion
+ *   className="bg-purple-100 border-purple-300"
+ *   onSelect={handleSelect}
+ * >
+ *   Custom styled
+ * </PromptSuggestion>
+ * ```
+ */
+export interface PromptSuggestionProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, "onSelect"> {
+    /**
+     * Suggestion text content
+     */
+    children: React.ReactNode;
+    /**
+     * Callback when suggestion is clicked
+     * Receives the text content as a string
+     */
+    onSelect?: (text: string) => void;
+    /**
+     * Optional icon displayed before the text
+     */
+    icon?: React.ReactNode;
+    /**
+     * Additional className for full customization (highest priority)
+     */
+    className?: string;
+}

package/dist/components/ai/PromptSuggestions/index.d.ts CHANGED Viewed

@@ -1,2 +1,4 @@
-export { PromptSuggestions } from "./PromptSuggestions";
-export type { PromptSuggestionsProps, PromptSuggestion, PillVariant, PillColor, } from "./PromptSuggestions.types";
+export { PromptSuggestion } from "./PromptSuggestion";
+export { promptSuggestionTheme } from "./PromptSuggestion.theme";
+export type { PromptSuggestionProps } from "./PromptSuggestion.types";
+export type { PromptSuggestionTheme } from "./PromptSuggestion.theme";

package/dist/components/ai/index.d.ts CHANGED Viewed

@@ -10,8 +10,8 @@ export { ThinkingIndicator, thinkingIndicatorTheme } from "./ThinkingIndicator";
 export type { ThinkingIndicatorProps, ThinkingIndicatorSize, ThinkingIndicatorTheme, ThinkingIndicatorThemeOverrides, } from "./ThinkingIndicator";
 export { TokenCounter, tokenCounterTheme, estimateTokens, calculateCost, formatCost, formatTokenCount, MODEL_CONFIGS, } from "./TokenCounter";
 export type { TokenCounterProps, TokenCounterModel, TokenCounterSize, TokenCounterTheme, TokenCounterThemeOverrides, ModelConfig, } from "./TokenCounter";
-export { PromptSuggestions } from "./PromptSuggestions";
-export type { PromptSuggestionsProps, PromptSuggestion, } from "./PromptSuggestions";
+export { PromptSuggestion, promptSuggestionTheme } from "./PromptSuggestions";
+export type { PromptSuggestionProps, PromptSuggestionTheme, } from "./PromptSuggestions";
 export { StreamingResponse, ErrorDisplay, MarkdownRenderer, streamingResponseTheme, } from "./StreamingResponse";
 export type { StreamingResponseProps, StreamingResponseTheme, MarkdownOptions, } from "./StreamingResponse";
 export { CodeBlock, codeBlockTheme } from "./CodeBlock";
@@ -19,15 +19,5 @@ export type { CodeBlockProps, CodeBlockLanguage, CodeBlockTheme, CodeBlockThemeO
 export { ApprovalCard } from "./ApprovalCard";
 export type { ApprovalCardProps, ApprovalRiskLevel, ApprovalMode, } from "./ApprovalCard";
 export { approvalCardTheme } from "./ApprovalCard/ApprovalCard.theme";
-export { EditingIndicator, editingIndicatorTheme } from "./EditingIndicator";
-export type { EditingIndicatorProps, EditingIndicatorTheme, } from "./EditingIndicator";
-export { PresenceIndicator, presenceIndicatorTheme } from "./PresenceIndicator";
-export type { PresenceIndicatorProps, PresenceIndicatorTheme, PresenceSort, } from "./PresenceIndicator";
-export { PresenceProvider, usePresenceContext, PresenceContext, MockPresenceAdapter, } from "./PresenceProvider";
-export type { PresenceProviderProps, PresenceUser, TypingUser, ConnectionStatus, PresenceEvent, PresenceAdapter, PresenceAdapterConfig, PresenceContextValue, PresenceProviderTheme, } from "./PresenceProvider";
 export { ArtifactContainer, artifactContainerTheme, handleSizes, } from "./ArtifactContainer";
 export type { ArtifactContainerProps, ArtifactContainerChatProps, ArtifactContainerCanvasProps, ArtifactContainerTheme, SplitDirection, } from "./ArtifactContainer";
-export { GenerativeRenderer, generativeRendererTheme, } from "./GenerativeRenderer";
-export type { GenerativeRendererProps, GenerativeRendererTheme, RendererType, } from "./GenerativeRenderer";
-export { VersionSlider, versionSliderTheme } from "./VersionSlider";
-export type { VersionSliderProps, VersionSliderTheme, Version, } from "./VersionSlider";

package/dist/components/charts/ActivityRings/ActivityRings.js CHANGED Viewed

@@ -14,8 +14,8 @@ import { getSpringAnimation, CIRCULAR_CHART_ANIMATIONS, getStaggerDelay } from '
  * Multiple concentric circular progress rings, inspired by Apple Activity.
  * Features smooth animations, accessibility support, and production-ready CSS variables.
  */
-const ActivityRings = ({ rings, centerLabel, centerSuffix, size = ACTIVITY_RINGS_DEFAULTS.size, strokeWidth: propStrokeWidth, gap: propGap, showAnimation = ACTIVITY_RINGS_DEFAULTS.showAnimation, theme: themeOverrides, className, title, description, showValidationWarnings = process.env.NODE_ENV === "development", ...props }) => {
-    var _a, _b, _c, _d, _e, _f, _g;
+const ActivityRings = ({ rings, centerLabel, centerSuffix, size = ACTIVITY_RINGS_DEFAULTS.size, strokeWidth: propStrokeWidth, gap: propGap, showAnimation = ACTIVITY_RINGS_DEFAULTS.showAnimation, colors, theme: themeOverrides, className, title, description, darkMode = false, showValidationWarnings = process.env.NODE_ENV === "development", ...props }) => {
+    var _a, _b, _c, _d, _e, _f;
     const theme = { ...activityRingsTheme, ...(themeOverrides || {}) };
     const shouldReduceMotion = useReducedMotion();
     const containerRef = useRef(null);
@@ -81,8 +81,25 @@ const ActivityRings = ({ rings, centerLabel, centerSuffix, size = ACTIVITY_RINGS
             return maxRadius - index * (strokeWidth + gap);
         });
     }, [normalizedRings.length, strokeWidth, gap, center]);
-    // Get default colors from theme
-    const defaultColors = ((_e = theme.ringDefaults) === null || _e === void 0 ? void 0 : _e.colors) || [];
+    // Get color for a ring by index
+    // Priority: ring.color > colors prop > theme colors > fallback
+    const getRingColor = (ring, index) => {
+        var _a;
+        // 1. Individual ring color override (highest priority)
+        if (ring.color)
+            return ring.color;
+        // 2. Component-level colors prop (overrides theme defaults)
+        if (colors && colors.length > 0) {
+            return colors[index % colors.length];
+        }
+        // 3. Theme colors
+        const themeColors = ((_a = theme.ringDefaults) === null || _a === void 0 ? void 0 : _a.colors) || [];
+        if (themeColors.length > 0) {
+            return themeColors[index % themeColors.length];
+        }
+        // 4. Fallback
+        return "var(--color-primary)";
+    };
     // Container size
     const containerSize = typeof size === "number" ? `${size}px` : size;
     // Calculate average progress for ARIA
@@ -90,72 +107,67 @@ const ActivityRings = ({ rings, centerLabel, centerSuffix, size = ACTIVITY_RINGS
         const sum = normalizedRings.reduce((acc, ring) => acc + ring.value, 0);
         return Math.round(sum / normalizedRings.length);
     }, [normalizedRings]);
-    return (React__default.createElement("div", { ref: containerRef, className: cn(theme.baseStyle, className), style: { width: containerSize, height: containerSize }, role: "progressbar", "aria-valuenow": averageProgress, "aria-valuemin": 0, "aria-valuemax": 100, "aria-label": title ||
+    return (React__default.createElement("div", { ref: containerRef, className: cn(theme.baseStyle, darkMode && "dark", className), style: { width: containerSize, height: containerSize }, role: "progressbar", "aria-valuenow": averageProgress, "aria-valuemin": 0, "aria-valuemax": 100, "aria-label": title ||
             `Activity rings: ${normalizedRings
                 .map((r, i) => `${r.label || `Ring ${i + 1}`} ${r.value}%`)
                 .join(", ")}`, "aria-describedby": description ? "rings-description" : undefined, tabIndex: 0, ...props },
         description && (React__default.createElement("span", { id: "rings-description", className: "sr-only" }, description)),
-        React__default.createElement("svg", { className: cn(theme.svgStyle), viewBox: `0 0 ${svgSize} ${svgSize}`, width: containerSize, height: containerSize, preserveAspectRatio: "xMidYMid meet", role: "presentation", "aria-hidden": "true" },
-            React__default.createElement("title", null, title || "Activity Rings Chart"),
-            description && React__default.createElement("desc", null, description),
-            normalizedRings.map((ring, index) => {
-                const radius = ringRadii[index];
-                const circumference = 2 * Math.PI * radius;
-                const offset = circumference - (ring.value / 100) * circumference;
-                const ringColor = ring.color ||
-                    defaultColors[index % defaultColors.length] ||
-                    "var(--color-primary)";
-                const animationDelay = getStaggerDelay(index, CIRCULAR_CHART_ANIMATIONS.activityRings.staggerDelay);
-                // Check if radius is valid (prevent negative or zero radius)
-                if (radius <= 0) {
-                    if (process.env.NODE_ENV !== "production") {
-                        console.warn(`[ActivityRings]: Ring ${index} has invalid radius (${radius}). Too many rings or strokeWidth/gap too large.`);
-                    }
-                    return null;
+        React__default.createElement("svg", { className: cn(theme.svgStyle), viewBox: `0 0 ${svgSize} ${svgSize}`, width: containerSize, height: containerSize, preserveAspectRatio: "xMidYMid meet", role: "presentation", "aria-hidden": "true" }, normalizedRings.map((ring, index) => {
+            const radius = ringRadii[index];
+            const circumference = 2 * Math.PI * radius;
+            const offset = circumference - (ring.value / 100) * circumference;
+            const ringColor = getRingColor(ring, index);
+            const animationDelay = getStaggerDelay(index, CIRCULAR_CHART_ANIMATIONS.activityRings.staggerDelay);
+            // Check if radius is valid (prevent negative or zero radius)
+            if (radius <= 0) {
+                if (process.env.NODE_ENV !== "production") {
+                    console.warn(`[ActivityRings]: Ring ${index} has invalid radius (${radius}). Too many rings or strokeWidth/gap too large.`);
                 }
-                // Create shared hover handlers
-                const createHoverHandlers = () => ({
-                    onMouseEnter: (e) => {
-                        const content = {
-                            category: "", // Empty to avoid duplicate text in tooltip
-                            series: [
-                                {
-                                    key: `ring-${index}`,
-                                    label: ring.label || `Ring ${index + 1}`,
-                                    value: ring.value,
-                                    color: ringColor,
-                                },
-                            ],
-                        };
-                        const svgCoordinates = {
-                            x: center,
-                            y: center - radius,
-                            dimensions: {
-                                width: svgSize,
-                                height: svgSize,
-                                left: 0,
-                                top: 0,
+                return null;
+            }
+            // Create shared hover handlers
+            const createHoverHandlers = () => ({
+                onMouseEnter: (e) => {
+                    const content = {
+                        category: "", // Empty to avoid duplicate text in tooltip
+                        series: [
+                            {
+                                key: `ring-${index}`,
+                                label: ring.label || `Ring ${index + 1}`,
+                                value: ring.value,
+                                color: ringColor,
                             },
-                        };
-                        handleMouseEnter(e, content, svgCoordinates);
-                    },
-                    onMouseMove: (e) => handleMouseMove(e),
-                    onMouseLeave: () => handleMouseLeave(),
-                });
-                return (React__default.createElement("g", { key: index },
-                    React__default.createElement("circle", { cx: center, cy: center, r: radius, fill: "none", stroke: "#00000010", strokeWidth: strokeWidth, strokeLinecap: "round", className: "cursor-pointer", transform: `rotate(-90 ${center} ${center})`, ...createHoverHandlers() }),
-                    React__default.createElement(motion.circle, { cx: center, cy: center, r: radius, fill: "none", stroke: ringColor, strokeWidth: strokeWidth, strokeLinecap: "round", strokeDasharray: circumference, className: "cursor-pointer transition-opacity duration-200", initial: { strokeDashoffset: circumference }, animate: hasAnimated ? { strokeDashoffset: offset } : {}, transition: showAnimation && !shouldReduceMotion
-                            ? getSpringAnimation(CIRCULAR_CHART_ANIMATIONS.activityRings.preset, shouldReduceMotion, animationDelay)
-                            : { duration: 0 }, transform: `rotate(-90 ${center} ${center})`, ...createHoverHandlers() })));
-            })),
+                        ],
+                    };
+                    const svgCoordinates = {
+                        x: center,
+                        y: center - radius,
+                        dimensions: {
+                            width: svgSize,
+                            height: svgSize,
+                            left: 0,
+                            top: 0,
+                        },
+                    };
+                    handleMouseEnter(e, content, svgCoordinates);
+                },
+                onMouseMove: (e) => handleMouseMove(e),
+                onMouseLeave: () => handleMouseLeave(),
+            });
+            return (React__default.createElement("g", { key: index },
+                React__default.createElement("circle", { cx: center, cy: center, r: radius, fill: "none", stroke: "var(--color-chart-track)", strokeWidth: strokeWidth, strokeLinecap: "round", className: "cursor-pointer", transform: `rotate(-90 ${center} ${center})`, ...createHoverHandlers() }),
+                React__default.createElement(motion.circle, { cx: center, cy: center, r: radius, fill: "none", stroke: ringColor, strokeWidth: strokeWidth, strokeLinecap: "round", strokeDasharray: circumference, className: "cursor-pointer transition-opacity duration-200", initial: { strokeDashoffset: circumference }, animate: hasAnimated ? { strokeDashoffset: offset } : {}, transition: showAnimation && !shouldReduceMotion
+                        ? getSpringAnimation(CIRCULAR_CHART_ANIMATIONS.activityRings.preset, shouldReduceMotion, animationDelay)
+                        : { duration: 0 }, transform: `rotate(-90 ${center} ${center})`, ...createHoverHandlers() })));
+        })),
         (centerLabel || centerSuffix) && (React__default.createElement(motion.div, { className: "absolute inset-0 flex flex-col items-center justify-center pointer-events-none", initial: { opacity: 0, scale: 0.8 }, animate: hasAnimated ? { opacity: 1, scale: 1 } : {}, transition: showAnimation && !shouldReduceMotion
                 ? {
                     delay: CIRCULAR_CHART_ANIMATIONS.activityRings.centerLabelDelay,
                     duration: 0.4,
                 }
-                : { duration: 0 } }, centerLabel && (React__default.createElement("div", { className: cn((_f = theme.centerText) === null || _f === void 0 ? void 0 : _f.label, "flex  flex-col items-center") },
+                : { duration: 0 } }, centerLabel && (React__default.createElement("div", { className: cn((_e = theme.centerText) === null || _e === void 0 ? void 0 : _e.label, "flex  flex-col items-center") },
             React__default.createElement("span", null, centerLabel),
-            centerSuffix && (React__default.createElement("span", { className: (_g = theme.centerText) === null || _g === void 0 ? void 0 : _g.suffix }, centerSuffix)))))),
+            centerSuffix && (React__default.createElement("span", { className: (_f = theme.centerText) === null || _f === void 0 ? void 0 : _f.suffix }, centerSuffix)))))),
         React__default.createElement(ChartTooltip, { tooltipRef: tooltipRef, content: tooltipData === null || tooltipData === void 0 ? void 0 : tooltipData.content, active: !!tooltipData, position: tooltipData ? { x: tooltipData.x, y: tooltipData.y } : { x: 0, y: 0 } })));
 };
 ActivityRings.displayName = "ActivityRings";

package/dist/components/charts/ActivityRings/ActivityRings.theme.js CHANGED Viewed

@@ -9,7 +9,6 @@ const activityRingsTheme = {
     ringDefaults: {
         strokeWidth: 8,
         gap: 1,
-        // Default colors using primary family gradient (dark to light)
         colors: [
             "var(--color-primary-600)", // Outer: Darkest
             "var(--color-primary-400)", // Middle-outer

package/dist/components/charts/ActivityRings/ActivityRings.types.d.ts CHANGED Viewed

@@ -22,6 +22,7 @@ export interface ActivityRingsThemeOverrides {
     ringDefaults?: {
         strokeWidth?: number;
         gap?: number;
+        /** Default colors */
         colors?: string[];
     };
     /** Center text styles */
@@ -48,8 +49,24 @@ export interface ActivityRingsProps extends Pick<BaseChartProps, 'className' | '
     gap?: number;
     /** Whether to show animations (default: true) */
     showAnimation?: boolean;
+    /**
+     * Custom color palette for rings. Colors are applied in order from outer to inner ring.
+     * If fewer colors than rings, colors will cycle. Individual ring.color takes precedence.
+     * When provided, overrides both light and dark theme defaults - choose colors appropriate
+     * for your background.
+     * @example ['#3b82f6', '#10b981', '#f59e0b']
+     * @example ['var(--color-primary)', 'var(--color-success)', 'var(--color-warning)']
+     */
+    colors?: string[];
     /** Theme overrides */
     theme?: ActivityRingsThemeOverrides;
+    /**
+     * Force dark mode styling for the chart. Use when placing the chart on a dark background
+     * while the page is in light mode. This applies the 'dark' class to the chart container,
+     * making text, borders, and other elements use light colors for visibility.
+     * @default false
+     */
+    darkMode?: boolean;
     /** Development and debugging props */
     showValidationWarnings?: boolean;
 }

package/dist/components/charts/BarChart/BarChart.js CHANGED Viewed

@@ -24,8 +24,10 @@ orientation = BAR_CHART_DEFAULTS.orientation,
 showAnimation = BAR_CHART_DEFAULTS.showAnimation,
 // Placeholder bar props
 showPlaceholderBars = BAR_CHART_DEFAULTS.showPlaceholderBars, placeholderData,
+// Color customization
+colors,
 // Base props
-className, title, description, enableKeyboardNavigation = BAR_CHART_DEFAULTS.enableKeyboardNavigation, showValidationWarnings = process.env.NODE_ENV === "development", children, ...props }) => {
+className, title, description, enableKeyboardNavigation = BAR_CHART_DEFAULTS.enableKeyboardNavigation, showValidationWarnings = process.env.NODE_ENV === "development", darkMode = false, children, ...props }) => {
     var _a, _b;
     // Resolve barRadius with backward compatibility
     const resolvedBarRadius = (_a = barRadius !== null && barRadius !== void 0 ? barRadius : radius) !== null && _a !== void 0 ? _a : BAR_CHART_DEFAULTS.barRadius;
@@ -75,13 +77,15 @@ className, title, description, enableKeyboardNavigation = BAR_CHART_DEFAULTS.ena
     }
     // Simple color functions based on direct CSS variables (following guidelines)
     const getSeriesFillColor = (index) => {
-        const colorVars = [
+        const defaultColors = [
             "var(--color-primary)",
             "var(--color-warning)",
             "var(--color-success)",
             "var(--color-danger)",
         ];
-        return colorVars[index % colorVars.length];
+        // Use custom colors if provided, otherwise fall back to defaults
+        const palette = colors && colors.length > 0 ? colors : defaultColors;
+        return palette[index % palette.length];
     };
     const containerRef = useRef(null);
     const [dimensions, setDimensions] = useState({ width: 600, height: 400 });
@@ -408,7 +412,7 @@ className, title, description, enableKeyboardNavigation = BAR_CHART_DEFAULTS.ena
                 : undefined }));
     };
     return (React__default.createElement(ChartErrorBoundary, { className: className, showErrorDetails: process.env.NODE_ENV === "development" },
-        React__default.createElement("div", { ref: containerRef, className: cn("chart-container w-full h-full", className), ...chartAccessibilityProps, onMouseEnter: handleMouseInteraction, onMouseMove: handleMouseInteraction, ...props },
+        React__default.createElement("div", { ref: containerRef, className: cn("chart-container w-full h-full", darkMode && "dark", className), ...chartAccessibilityProps, onMouseEnter: handleMouseInteraction, onMouseMove: handleMouseInteraction, ...props },
             descriptionProps && React__default.createElement("div", { ...descriptionProps }),
             showValidationWarnings && hasWarnings && (React__default.createElement("div", { className: "absolute top-2 left-2 right-2 z-10 p-2 bg-[var(--color-warning-50)] border border-[var(--color-warning-200)] rounded text-xs text-[var(--color-warning)] shadow-sm" },
                 React__default.createElement("strong", null, "Chart Warnings:"),

package/dist/components/charts/BarChart/BarChart.types.d.ts CHANGED Viewed

@@ -4,10 +4,24 @@ export interface BarChartProps extends BaseChartProps, StandardChartDisplayProps
     radius?: number;
     gap?: number;
     categoryGap?: number;
+    /**
+     * Custom color palette for bar series. Colors are applied in order to each data series.
+     * If fewer colors than series, colors will cycle. Supports any valid CSS color value
+     * including hex, rgb, hsl, and CSS variables like `var(--color-primary)`.
+     * @example ['#3b82f6', '#10b981', '#f59e0b']
+     * @example ['var(--color-primary)', 'var(--color-success)']
+     */
+    colors?: string[];
     showAnimation?: boolean;
     showPlaceholderBars?: boolean;
     placeholderData?: BaseChartProps["data"];
     showValidationWarnings?: boolean;
+    /**
+     * Force dark mode styling for the chart. Use when placing the chart on a dark background
+     * while the page is in light mode. This applies the 'dark' class to the chart container,
+     * making axis labels, grid lines, and text use light colors for visibility.
+     */
+    darkMode?: boolean;
 }
 export declare const BAR_CHART_DEFAULTS: {
     readonly barRadius: 32;