@shohojdhara/atomix 0.2.3 → 0.2.5

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.tsx

@@ -2,9 +2,10 @@ import React, { useEffect, useState } from 'react';
 
 export interface ColorModeToggleProps {
   className?: string;
+  style?: React.CSSProperties;
 }
 
-export const ColorModeToggle: React.FC<ColorModeToggleProps> = ({ className = '' }) => {
+export const ColorModeToggle: React.FC<ColorModeToggleProps> = ({ className = '', style }) => {
   const [colorMode, setColorMode] = useState<'light' | 'dark'>('light');
 
   // Initialize color mode from localStorage or system preference
@@ -22,8 +23,9 @@ export const ColorModeToggle: React.FC<ColorModeToggleProps> = ({ className = ''
 
   // Update the document theme attribute when colorMode changes
   useEffect(() => {
-    document.body.setAttribute('data-atomix-color-mode', colorMode);
-    localStorage.setItem('atomix-color-mode', colorMode);
+    const validColorMode = colorMode === 'dark' ? 'dark' : 'light';
+    document.body.setAttribute('data-atomix-color-mode', validColorMode);
+    localStorage.setItem('atomix-color-mode', validColorMode);
   }, [colorMode]);
 
   // Listen for system color scheme changes
@@ -66,6 +68,7 @@ export const ColorModeToggle: React.FC<ColorModeToggleProps> = ({ className = ''
       onClick={toggleColorMode}
       aria-label={`Switch to ${colorMode === 'light' ? 'dark' : 'light'} mode`}
       title={`Switch to ${colorMode === 'light' ? 'dark' : 'light'} mode`}
+      style={style}
     >
       {colorMode === 'light' ? (
         <svg viewBox="0 0 24 24" width="24" height="24" fill="currentColor">

package/src/components/Countdown/Countdown.tsx

@@ -11,6 +11,8 @@ export interface CountdownProps {
   focused?: boolean;
   /** Custom className */
   className?: string;
+  /** Custom style */
+  style?: React.CSSProperties;
   /** Optional callback when countdown reaches zero */
   onComplete?: () => void;
 }
@@ -32,6 +34,7 @@ export const Countdown: React.FC<CountdownProps> = forwardRef<HTMLDivElement, Co
       separator = ':',
       focused = false,
       className = '',
+      style,
       onComplete,
     },
     ref
@@ -68,6 +71,7 @@ export const Countdown: React.FC<CountdownProps> = forwardRef<HTMLDivElement, Co
       <div
         ref={ref}
         className={`c-countdown${focused ? ' c-countdown--focused' : ''} ${className}`.trim()}
+        style={style}
       >
         {timeParts.map((part, idx) => (
           <React.Fragment key={part.label}>

package/src/components/DataTable/DataTable.tsx

@@ -23,6 +23,7 @@ export const DataTable: React.FC<DataTableProps> = ({
   data,
   columns,
   className,
+  style,
   sortable = false,
   filterable = false,
   paginated = false,
@@ -193,7 +194,7 @@ export const DataTable: React.FC<DataTableProps> = ({
   };
 
   return (
-    <div className={DATA_TABLE_CLASSES.container} {...props}>
+    <div className={DATA_TABLE_CLASSES.container} style={style} {...props}>
       {renderToolbar()}
       <div className={DATA_TABLE_CLASSES.tableWrapper}>
         <table ref={tableRef} className={tableClass}>