@shohojdhara/atomix 0.2.4 → 0.2.6

package/src/components/Chart/index.ts

@@ -1,7 +1,7 @@
-import AdvancedChart from './AdvancedChart';
 import AnimatedChart from './AnimatedChart';
 import AreaChart from './AreaChart';
 import BarChart from './BarChart';
+import BaseChart from './BaseChart';
 import BubbleChart from './BubbleChart';
 import CandlestickChart from './CandlestickChart';
 import Chart from './Chart';
@@ -16,18 +16,18 @@ import LineChart from './LineChart';
 import MultiAxisChart from './MultiAxisChart';
 import PieChart from './PieChart';
 import RadarChart from './RadarChart';
-import RealTimeChart from './RealTimeChart';
 import ScatterChart from './ScatterChart';
 
 import TreemapChart from './TreemapChart';
 import WaterfallChart from './WaterfallChart';
+import * as ChartUtils from './utils';
 
 // Export all chart components
 export {
-  AdvancedChart,
   AnimatedChart,
   AreaChart,
   BarChart,
+  BaseChart,
   BubbleChart,
   CandlestickChart,
   Chart,
@@ -42,12 +42,15 @@ export {
   MultiAxisChart,
   PieChart,
   RadarChart,
-  RealTimeChart,
   ScatterChart,
   TreemapChart,
   WaterfallChart,
+  ChartUtils,
 };
 
+// Export chart context
+export { ChartContext, useChartContext } from './Chart';
+
 // Export chart hooks
 export { useBarChart } from '../../lib/composables/useBarChart';
 export {
@@ -63,10 +66,9 @@ export { useLineChart } from '../../lib/composables/useLineChart';
 export { usePieChart } from '../../lib/composables/usePieChart';
 
 // Export chart component types
-export type { AdvancedChartProps } from './AdvancedChart';
-export type { AnimatedChartProps } from './AnimatedChart';
 export type { AreaChartProps } from './AreaChart';
 export type { BarChartProps } from './BarChart';
+export type { BaseChartProps } from './BaseChart';
 export type { BubbleChartProps, BubbleDataPoint } from './BubbleChart';
 export type { CandlestickChartProps, CandlestickDataPoint } from './CandlestickChart';
 export type { ChartToolbarAction, ChartToolbarGroup, ChartToolbarProps } from './ChartToolbar';
@@ -76,11 +78,10 @@ export type { FunnelChartProps, FunnelDataPoint } from './FunnelChart';
 export type { GaugeChartProps } from './GaugeChart';
 export type { HeatmapChartProps, HeatmapDataPoint } from './HeatmapChart';
 export type { LineChartProps } from './LineChart';
-export type { AxisConfig, MultiAxisChartProps, MultiAxisDataset } from './MultiAxisChart';
+export type { MultiAxisChartProps } from './MultiAxisChart';
 export type { PieChartProps } from './PieChart';
 export type { RadarChartProps } from './RadarChart';
-export type { RealTimeChartProps } from './RealTimeChart';
-export type { ScatterChartProps, ScatterDataPoint } from './ScatterChart';
+export type { ScatterChartProps } from './ScatterChart';
 
 export type { TreemapChartProps, TreemapDataPoint, TreemapNode } from './TreemapChart';
 export type {
@@ -90,6 +91,7 @@ export type {
   ChartProps,
   ChartToolbarConfig,
   ChartType,
+  ScatterDataPoint,
 } from './types';
 export type { WaterfallChartProps, WaterfallDataPoint } from './WaterfallChart';
 

package/src/components/Chart/types.ts

@@ -1,5 +1,5 @@
-import { ReactNode } from 'react';
-import { BaseComponentProps, Size, Variant } from '../../lib/types/components';
+import React, { ReactNode } from 'react';
+import { BaseComponentProps, Size, Variant, AtomixGlassProps } from '../../lib/types/components';
 
 /**
  * Chart types - comprehensive list
@@ -35,6 +35,15 @@ export interface ChartDataPoint {
   metadata?: Record<string, any>;
 }
 
+/**
+ * Scatter chart data point interface
+ */
+export interface ScatterDataPoint extends ChartDataPoint {
+  x: number;
+  y: number;
+  size?: number;
+}
+
 /**
  * Chart dataset interface
  */
@@ -109,6 +118,12 @@ export interface ChartProps extends BaseComponentProps {
    */
   variant?: Variant;
 
+  /**
+   * Glass morphism effect
+   * When true, applies default glass effect. When an object, allows custom glass configuration.
+   */
+  glass?: boolean | AtomixGlassProps;
+
   /**
    * Chart title
    */
@@ -274,14 +289,9 @@ export interface ChartProps extends BaseComponentProps {
 
 /**
  * Chart scales interface
+ * Imported from useChart for consistency
  */
-export interface ChartScales {
-  xScale: (index: number) => number;
-  yScale: (value: number) => number;
-  width: number;
-  height: number;
-  padding: { top: number; right: number; bottom: number; left: number };
-}
+export type { ChartScales } from '../../lib/composables/useChart';
 
 /**
  * Chart interaction state
@@ -291,6 +301,72 @@ export interface ChartInteraction {
   selectedIndex: number | null;
 }
 
+/**
+ * Chart hovered point state
+ */
+export interface ChartHoveredPoint {
+  datasetIndex: number;
+  pointIndex: number;
+  x: number;
+  y: number;
+  clientX: number;
+  clientY: number;
+}
+
+/**
+ * Chart event handlers interface
+ */
+export interface ChartHandlers {
+  onDataPointClick?: (dataPoint: ChartDataPoint, datasetIndex: number, pointIndex: number) => void;
+  onPointHover: (
+    datasetIndex: number,
+    pointIndex: number,
+    x: number,
+    y: number,
+    clientX: number,
+    clientY: number
+  ) => void;
+  onPointLeave: () => void;
+  onMouseMove: (event: React.MouseEvent<SVGSVGElement>) => void;
+  onMouseDown: (event: React.MouseEvent<SVGSVGElement>) => void;
+  onMouseUp: () => void;
+  onWheel: (event: React.WheelEvent<SVGSVGElement>) => void;
+}
+
+/**
+ * Chart accessibility interface
+ */
+export interface ChartAccessibility {
+  announcement: string;
+  focusedPoint: { datasetIndex: number; pointIndex: number };
+  getAccessibleDescription: () => string;
+}
+
+/**
+ * Chart toolbar state
+ */
+export interface ChartToolbarState {
+  showTooltips?: boolean;
+  showLegend?: boolean;
+  animationsEnabled?: boolean;
+  showGrid?: boolean;
+}
+
+/**
+ * Chart render content parameters
+ */
+export interface ChartRenderContentParams {
+  scales: ChartScales;
+  colors: string[];
+  datasets: ChartDataset[];
+  interactionState?: ChartInteraction;
+  handlers: ChartHandlers;
+  accessibility: ChartAccessibility;
+  hoveredPoint: ChartHoveredPoint | null;
+  toolbarState?: ChartToolbarState;
+  config?: ChartConfig;
+}
+
 /**
  * Chart toolbar configuration interface
  */

package/src/components/Chart/utils.ts

@@ -0,0 +1,66 @@
+/**
+ * Generate a color from a color scheme based on an index
+ * @param colorScheme - Array of colors to choose from
+ * @param index - Index to select color from
+ * @returns Color string
+ */
+export const getColorFromScheme = (colorScheme: string[], index: number): string => {
+  return colorScheme[index % colorScheme.length];
+};
+
+/**
+ * Generate a color based on a value within a range
+ * @param value - The value to map to a color
+ * @param minValue - The minimum value in the range
+ * @param maxValue - The maximum value in the range
+ * @param colorScheme - Array of colors to interpolate between
+ * @returns Color string
+ */
+export const getColorFromValue = (
+  value: number,
+  minValue: number,
+  maxValue: number,
+  colorScheme: string[]
+): string => {
+  if (minValue === maxValue) {
+    return colorScheme[0];
+  }
+
+  const normalized = (value - minValue) / (maxValue - minValue);
+  const index = Math.floor(normalized * (colorScheme.length - 1));
+  return colorScheme[index];
+};
+
+/**
+ * Default color schemes for charts
+ */
+export const DEFAULT_COLOR_SCHEMES = {
+  primary: [
+    'var(--atomix-primary)',
+    'var(--atomix-secondary)',
+    'var(--atomix-success)',
+    'var(--atomix-warning)',
+    'var(--atomix-error)',
+    'var(--atomix-info)',
+  ],
+  rainbow: [
+    'var(--atomix-error)',
+    'var(--atomix-info)',
+    'var(--atomix-primary)',
+    'var(--atomix-warning)',
+    'var(--atomix-success)',
+    'var(--atomix-primary-5)',
+    'var(--atomix-primary-7)',
+    'var(--atomix-warning-5)',
+  ],
+  monochrome: [
+    'var(--atomix-gray-10)',
+    'var(--atomix-gray-9)',
+    'var(--atomix-gray-8)',
+    'var(--atomix-gray-7)',
+    'var(--atomix-gray-6)',
+    'var(--atomix-gray-5)',
+    'var(--atomix-gray-4)',
+    'var(--atomix-gray-3)',
+  ],
+};

package/src/components/ColorModeToggle/ColorModeToggle.stories.tsx

@@ -1,5 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import { ColorModeToggle } from './ColorModeToggle';
+import { useState } from 'react';
+import { ColorModeToggle, type ColorMode } from './ColorModeToggle';
+import { Moon, Sun } from '@phosphor-icons/react';
 
 const meta = {
   title: 'Components/ColorModeToggle',
@@ -8,9 +10,26 @@ const meta = {
     layout: 'centered',
   },
   argTypes: {
-    className: {
-      control: 'text',
-      description: 'Additional CSS class names',
+    size: {
+      control: 'select',
+      options: ['sm', 'md', 'lg'],
+      description: 'Size variant',
+    },
+    disabled: {
+      control: 'boolean',
+      description: 'Disable the toggle',
+    },
+    showTooltip: {
+      control: 'boolean',
+      description: 'Show tooltip on hover',
+    },
+    disableStorage: {
+      control: 'boolean',
+      description: 'Disable localStorage persistence',
+    },
+    disableSystemPreference: {
+      control: 'boolean',
+      description: 'Disable system preference detection',
     },
   },
 } satisfies Meta<typeof ColorModeToggle>;
@@ -23,22 +42,113 @@ export const Default: Story = {
   args: {},
 };
 
-// With Custom Class
-export const WithCustomClass: Story = {
+// Size Variants
+export const Sizes: Story = {
+  render: () => (
+    <div style={{ display: 'flex', gap: '1rem', alignItems: 'center' }}>
+      <ColorModeToggle size="sm" />
+      <ColorModeToggle size="md" />
+      <ColorModeToggle size="lg" />
+    </div>
+  ),
+};
+
+// Disabled State
+export const Disabled: Story = {
+  args: {
+    disabled: true,
+  },
+};
+
+// Controlled Mode
+export const Controlled: Story = {
+  render: () => {
+    const [mode, setMode] = useState<ColorMode>('light');
+    return (
+      <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem', alignItems: 'center' }}>
+        <ColorModeToggle value={mode} onChange={setMode} />
+        <p>Current mode: {mode}</p>
+        <button onClick={() => setMode(mode === 'light' ? 'dark' : 'light')}>
+          Toggle from outside
+        </button>
+      </div>
+    );
+  },
+};
+
+// Custom Icons
+export const CustomIcons: Story = {
+  render: () => (
+    <ColorModeToggle
+      lightIcon={<Moon size={24} weight="fill" />}
+      darkIcon={<Sun size={24} weight="fill" />}
+    />
+  ),
+};
+
+// With Callback
+export const WithCallback: Story = {
+  render: () => {
+    const [lastChanged, setLastChanged] = useState<string>('');
+    return (
+      <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem', alignItems: 'center' }}>
+        <ColorModeToggle
+          onChange={(mode) => setLastChanged(`Changed to ${mode} at ${new Date().toLocaleTimeString()}`)}
+        />
+        {lastChanged && <p style={{ fontSize: '0.875rem' }}>{lastChanged}</p>}
+      </div>
+    );
+  },
+};
+
+// Custom Storage Key
+export const CustomStorageKey: Story = {
+  args: {
+    storageKey: 'my-app-theme',
+    dataAttribute: 'data-theme',
+  },
+};
+
+// Without Storage
+export const WithoutStorage: Story = {
   args: {
-    className: 'custom-class',
+    disableStorage: true,
   },
 };
 
-// Example Usage
-export const ExampleUsage: Story = {
+// Example Usage in Header
+export const InHeader: Story = {
   render: () => (
     <div
       className="u-p-5 u-shadow u-d-flex u-justify-content-between u-align-items-center"
-      style={{ width: '300px', borderRadius: '8px' }}
+      style={{ width: '400px', borderRadius: '8px' }}
     >
-      <span>Toggle Theme</span>
+      <span style={{ fontWeight: 600 }}>Toggle Theme</span>
       <ColorModeToggle />
     </div>
   ),
 };
+
+// Multiple Toggles
+export const MultipleToggles: Story = {
+  render: () => (
+    <div style={{ display: 'flex', gap: '2rem' }}>
+      <div style={{ display: 'flex', flexDirection: 'column', gap: '0.5rem', alignItems: 'center' }}>
+        <ColorModeToggle size="sm" />
+        <span style={{ fontSize: '0.75rem' }}>Small</span>
+      </div>
+      <div style={{ display: 'flex', flexDirection: 'column', gap: '0.5rem', alignItems: 'center' }}>
+        <ColorModeToggle size="md" />
+        <span style={{ fontSize: '0.75rem' }}>Medium</span>
+      </div>
+      <div style={{ display: 'flex', flexDirection: 'column', gap: '0.5rem', alignItems: 'center' }}>
+        <ColorModeToggle size="lg" />
+        <span style={{ fontSize: '0.75rem' }}>Large</span>
+      </div>
+      <div style={{ display: 'flex', flexDirection: 'column', gap: '0.5rem', alignItems: 'center' }}>
+        <ColorModeToggle disabled />
+        <span style={{ fontSize: '0.75rem' }}>Disabled</span>
+      </div>
+    </div>
+  ),
+};

package/src/components/ColorModeToggle/ColorModeToggle.tsx

@@ -1,81 +1,185 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useState, useCallback } from 'react';
+
+export type ColorMode = 'light' | 'dark';
 
 export interface ColorModeToggleProps {
+  /** Additional CSS class names */
   className?: string;
+  /** Inline styles */
+  style?: React.CSSProperties;
+  /** Controlled mode value */
+  value?: ColorMode;
+  /** Default mode (uncontrolled) */
+  defaultValue?: ColorMode;
+  /** Callback when mode changes */
+  onChange?: (mode: ColorMode) => void;
+  /** Custom light mode icon */
+  lightIcon?: React.ReactNode;
+  /** Custom dark mode icon */
+  darkIcon?: React.ReactNode;
+  /** Size variant */
+  size?: 'sm' | 'md' | 'lg';
+  /** Disable the toggle */
+  disabled?: boolean;
+  /** localStorage key for persistence */
+  storageKey?: string;
+  /** data attribute name for body element */
+  dataAttribute?: string;
+  /** Disable localStorage persistence */
+  disableStorage?: boolean;
+  /** Disable system preference detection */
+  disableSystemPreference?: boolean;
+  /** Custom aria-label */
+  'aria-label'?: string;
+  /** Show tooltip */
+  showTooltip?: boolean;
 }
 
-export const ColorModeToggle: React.FC<ColorModeToggleProps> = ({ className = '' }) => {
-  const [colorMode, setColorMode] = useState<'light' | 'dark'>('light');
+const DEFAULT_STORAGE_KEY = 'atomix-color-mode';
+const DEFAULT_DATA_ATTRIBUTE = 'data-atomix-color-mode';
+
+const SIZE_MAP = {
+  sm: 16,
+  md: 24,
+  lg: 32,
+};
+
+export const ColorModeToggle: React.FC<ColorModeToggleProps> = ({
+  className = '',
+  style,
+  value: controlledValue,
+  defaultValue = 'light',
+  onChange,
+  lightIcon,
+  darkIcon,
+  size = 'md',
+  disabled = false,
+  storageKey = DEFAULT_STORAGE_KEY,
+  dataAttribute = DEFAULT_DATA_ATTRIBUTE,
+  disableStorage = false,
+  disableSystemPreference = false,
+  'aria-label': ariaLabel,
+  showTooltip = true,
+}) => {
+  const isControlled = controlledValue !== undefined;
+  const [internalMode, setInternalMode] = useState<ColorMode>(defaultValue);
+  const colorMode = isControlled ? controlledValue : internalMode;
 
   // Initialize color mode from localStorage or system preference
   useEffect(() => {
+    if (isControlled) return;
+
+    // SSR check
+    if (typeof window === 'undefined') return;
+
     // Check if color mode is already set in localStorage
-    const storedColorMode = localStorage.getItem('atomix-color-mode');
+    if (!disableStorage) {
+      try {
+        const storedColorMode = localStorage.getItem(storageKey);
+        if (storedColorMode === 'light' || storedColorMode === 'dark') {
+          setInternalMode(storedColorMode);
+          return;
+        }
+      } catch (error) {
+        console.warn('ColorModeToggle: Failed to read from localStorage', error);
+      }
+    }
 
-    if (storedColorMode === 'light' || storedColorMode === 'dark') {
-      setColorMode(storedColorMode);
-    } else if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
-      // Use system preference if no stored preference
-      setColorMode('dark');
+    // Use system preference if no stored preference
+    if (!disableSystemPreference && window.matchMedia) {
+      const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+      if (prefersDark) {
+        setInternalMode('dark');
+      }
     }
-  }, []);
+  }, [isControlled, disableStorage, disableSystemPreference, storageKey]);
 
   // Update the document theme attribute when colorMode changes
   useEffect(() => {
-    document.body.setAttribute('data-atomix-color-mode', colorMode);
-    localStorage.setItem('atomix-color-mode', colorMode);
-  }, [colorMode]);
+    if (typeof window === 'undefined') return;
+
+    const validColorMode = colorMode === 'dark' ? 'dark' : 'light';
+    document.body.setAttribute(dataAttribute, validColorMode);
+
+    if (!disableStorage) {
+      try {
+        localStorage.setItem(storageKey, validColorMode);
+      } catch (error) {
+        console.warn('ColorModeToggle: Failed to write to localStorage', error);
+      }
+    }
+  }, [colorMode, dataAttribute, disableStorage, storageKey]);
 
   // Listen for system color scheme changes
   useEffect(() => {
+    if (isControlled || disableSystemPreference || typeof window === 'undefined') return;
+
     const darkModeMediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
 
     const handleSystemThemeChange = (event: MediaQueryListEvent) => {
       // Only update if user hasn't explicitly set a preference
-      if (!localStorage.getItem('atomix-color-mode')) {
-        setColorMode(event.matches ? 'dark' : 'light');
+      if (disableStorage) {
+        setInternalMode(event.matches ? 'dark' : 'light');
+      } else {
+        try {
+          const hasStoredPreference = localStorage.getItem(storageKey);
+          if (!hasStoredPreference) {
+            setInternalMode(event.matches ? 'dark' : 'light');
+          }
+        } catch (error) {
+          console.warn('ColorModeToggle: Failed to check localStorage', error);
+        }
       }
     };
 
-    // Add event listener for system theme changes
-    if (darkModeMediaQuery.addEventListener) {
-      darkModeMediaQuery.addEventListener('change', handleSystemThemeChange);
-    } else {
-      // Fallback for older browsers
-      darkModeMediaQuery.addListener(handleSystemThemeChange);
-    }
+    darkModeMediaQuery.addEventListener('change', handleSystemThemeChange);
 
-    // Clean up event listener
     return () => {
-      if (darkModeMediaQuery.removeEventListener) {
-        darkModeMediaQuery.removeEventListener('change', handleSystemThemeChange);
-      } else {
-        // Fallback for older browsers
-        darkModeMediaQuery.removeListener(handleSystemThemeChange);
-      }
+      darkModeMediaQuery.removeEventListener('change', handleSystemThemeChange);
     };
-  }, []);
+  }, [isControlled, disableSystemPreference, disableStorage, storageKey]);
 
-  const toggleColorMode = () => {
-    setColorMode(prevMode => (prevMode === 'light' ? 'dark' : 'light'));
-  };
+  const toggleColorMode = useCallback(() => {
+    if (disabled) return;
+
+    const newMode: ColorMode = colorMode === 'light' ? 'dark' : 'light';
+
+    if (!isControlled) {
+      setInternalMode(newMode);
+    }
+
+    onChange?.(newMode);
+  }, [disabled, colorMode, isControlled, onChange]);
+
+  const iconSize = SIZE_MAP[size];
+  const nextMode = colorMode === 'light' ? 'dark' : 'light';
+  const label = ariaLabel || `Switch to ${nextMode} mode`;
+  const title = showTooltip ? `Switch to ${nextMode} mode` : undefined;
+
+  const defaultLightIcon = (
+    <svg viewBox="0 0 24 24" width={iconSize} height={iconSize} fill="currentColor" aria-hidden="true">
+      <path d="M9.37 5.51c-.18.64-.27 1.31-.27 1.99 0 4.08 3.32 7.4 7.4 7.4.68 0 1.35-.09 1.99-.27C17.45 17.19 14.93 19 12 19c-3.86 0-7-3.14-7-7 0-2.93 1.81-5.45 4.37-6.49zM12 3c-4.97 0-9 4.03-9 9s4.03 9 9 9 9-4.03 9-9c0-.46-.04-.92-.1-1.36-.98 1.37-2.58 2.26-4.4 2.26-2.98 0-5.4-2.42-5.4-5.4 0-1.81.89-3.42 2.26-4.4-.44-.06-.9-.1-1.36-.1z" />
+    </svg>
+  );
+
+  const defaultDarkIcon = (
+    <svg viewBox="0 0 24 24" width={iconSize} height={iconSize} fill="currentColor" aria-hidden="true">
+      <path d="M12 7c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5zM2 13h2c.55 0 1-.45 1-1s-.45-1-1-1H2c-.55 0-1 .45-1 1s.45 1 1 1zm18 0h2c.55 0 1-.45 1-1s-.45-1-1-1h-2c-.55 0-1 .45-1 1s.45 1 1 1zM11 2v2c0 .55.45 1 1 1s1-.45 1-1V2c0-.55-.45-1-1-1s-1 .45-1 1zm0 18v2c0 .55.45 1 1 1s1-.45 1-1v-2c0-.55-.45-1-1-1s-1 .45-1 1zM5.99 4.58c-.39-.39-1.03-.39-1.41 0-.39.39-.39 1.03 0 1.41l1.06 1.06c.39.39 1.03.39 1.41 0 .39-.39.39-1.03 0-1.41L5.99 4.58zm12.37 12.37c-.39-.39-1.03-.39-1.41 0-.39.39-.39 1.03 0 1.41l1.06 1.06c.39.39 1.03.39 1.41 0 .39-.39.39-1.03 0-1.41l-1.06-1.06zm1.06-10.96c.39-.39.39-1.03 0-1.41-.39-.39-1.03-.39-1.41 0l-1.06 1.06c-.39.39-.39 1.03 0 1.41.39.39 1.03.39 1.41 0l1.06-1.06zM7.05 18.36c.39-.39.39-1.03 0-1.41-.39-.39-1.03-.39-1.41 0l-1.06 1.06c-.39.39-.39 1.03 0 1.41.39.39 1.03.39 1.41 0l1.06-1.06z" />
+    </svg>
+  );
 
   return (
     <button
-      className={`c-color-mode-toggle ${className}`}
+      type="button"
+      className={`c-color-mode-toggle c-color-mode-toggle--${size} ${disabled ? 'c-color-mode-toggle--disabled' : ''} ${className}`}
       onClick={toggleColorMode}
-      aria-label={`Switch to ${colorMode === 'light' ? 'dark' : 'light'} mode`}
-      title={`Switch to ${colorMode === 'light' ? 'dark' : 'light'} mode`}
+      disabled={disabled}
+      aria-label={label}
+      aria-pressed={colorMode === 'dark'}
+      title={title}
+      style={style}
     >
-      {colorMode === 'light' ? (
-        <svg viewBox="0 0 24 24" width="24" height="24" fill="currentColor">
-          <path d="M9.37 5.51c-.18.64-.27 1.31-.27 1.99 0 4.08 3.32 7.4 7.4 7.4.68 0 1.35-.09 1.99-.27C17.45 17.19 14.93 19 12 19c-3.86 0-7-3.14-7-7 0-2.93 1.81-5.45 4.37-6.49zM12 3c-4.97 0-9 4.03-9 9s4.03 9 9 9 9-4.03 9-9c0-.46-.04-.92-.1-1.36-.98 1.37-2.58 2.26-4.4 2.26-2.98 0-5.4-2.42-5.4-5.4 0-1.81.89-3.42 2.26-4.4-.44-.06-.9-.1-1.36-.1z" />
-        </svg>
-      ) : (
-        <svg viewBox="0 0 24 24" width="24" height="24" fill="currentColor">
-          <path d="M12 7c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5zM2 13h2c.55 0 1-.45 1-1s-.45-1-1-1H2c-.55 0-1 .45-1 1s.45 1 1 1zm18 0h2c.55 0 1-.45 1-1s-.45-1-1-1h-2c-.55 0-1 .45-1 1s.45 1 1 1zM11 2v2c0 .55.45 1 1 1s1-.45 1-1V2c0-.55-.45-1-1-1s-1 .45-1 1zm0 18v2c0 .55.45 1 1 1s1-.45 1-1v-2c0-.55-.45-1-1-1s-1 .45-1 1zM5.99 4.58c-.39-.39-1.03-.39-1.41 0-.39.39-.39 1.03 0 1.41l1.06 1.06c.39.39 1.03.39 1.41 0 .39-.39.39-1.03 0-1.41L5.99 4.58zm12.37 12.37c-.39-.39-1.03-.39-1.41 0-.39.39-.39 1.03 0 1.41l1.06 1.06c.39.39 1.03.39 1.41 0 .39-.39.39-1.03 0-1.41l-1.06-1.06zm1.06-10.96c.39-.39.39-1.03 0-1.41-.39-.39-1.03-.39-1.41 0l-1.06 1.06c-.39.39-.39 1.03 0 1.41.39.39 1.03.39 1.41 0l1.06-1.06zM7.05 18.36c.39-.39.39-1.03 0-1.41-.39-.39-1.03-.39-1.41 0l-1.06 1.06c-.39.39-.39 1.03 0 1.41.39.39 1.03.39 1.41 0l1.06-1.06z" />
-        </svg>
-      )}
+      {colorMode === 'light' ? (lightIcon || defaultLightIcon) : (darkIcon || defaultDarkIcon)}
     </button>
   );
 };

package/src/components/ColorModeToggle/index.ts

@@ -1,2 +1,2 @@
 export { default as ColorModeToggle } from './ColorModeToggle';
-export type { ColorModeToggleProps } from './ColorModeToggle';
+export type { ColorModeToggleProps, ColorMode } from './ColorModeToggle';