@shohojdhara/atomix 0.2.4 → 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}>

package/src/components/DatePicker/DatePicker.stories.tsx

@@ -211,7 +211,6 @@ export const GlassModeStandard: Story = {
       blurAmount: 3,
       saturation: 160,
       aberrationIntensity: 0,
-      cornerRadius: 12,
       overLight: false,
       elasticity: 0,
     } as any,
@@ -261,7 +260,6 @@ export const GlassModePolar: Story = {
       blurAmount: 2.5,
       saturation: 180,
       aberrationIntensity: 2,
-      cornerRadius: 12,
     } as any,
   },
   render: args => {
@@ -307,7 +305,6 @@ export const GlassModeProminent: Story = {
       blurAmount: 3.5,
       saturation: 200,
       aberrationIntensity: 3,
-      cornerRadius: 12,
     } as any,
   },
   render: args => {
@@ -355,7 +352,6 @@ export const GlassModeShader: Story = {
       displacementScale: 55,
       blurAmount: 2.8,
       saturation: 170,
-      cornerRadius: 12,
     } as any,
   },
   render: args => {
@@ -1067,7 +1063,6 @@ export const GlassEffectCustomized: Story = {
       blurAmount: 0,
       saturation: 180,
       aberrationIntensity: 2,
-      cornerRadius: 16,
       overLight: false,
       mode: 'polar' as const,
     } as any,
@@ -1137,12 +1132,6 @@ export const GlassEffectRangeSelection: Story = {
     selectionMode: 'range',
     placeholder: 'Select date...',
     glass: {
-      displacementScale: 100,
-      blurAmount: 0,
-      saturation: 200,
-      aberrationIntensity: 4,
-      cornerRadius: 16,
-      overLight: false,
       mode: 'prominent' as const,
     } as any,
   },

package/src/components/DatePicker/DatePicker.tsx

@@ -34,6 +34,7 @@ export const DatePicker = forwardRef<DatePickerRef, DatePickerProps>(
       placement = 'bottom-start',
       inputClassName = '',
       size = 'md',
+      style,
       glass,
       ...props
     },
@@ -464,7 +465,7 @@ export const DatePicker = forwardRef<DatePickerRef, DatePickerProps>(
     );
 
     return (
-      <div className={datepickerClassName} ref={datePickerRef} {...props}>
+      <div className={datepickerClassName} ref={datePickerRef} style={style} {...props}>
         {!inline && (
           <div className="c-datepicker__input-wrapper">
             <input
@@ -512,14 +513,7 @@ export const DatePicker = forwardRef<DatePickerRef, DatePickerProps>(
                 <AtomixGlass
                   {...(glass === true
                     ? {
-                        displacementScale: 50,
-                        blurAmount: 3,
-                        saturation: 160,
-                        aberrationIntensity: 0,
-                        cornerRadius: 12,
-                        overLight: false,
-                        elasticity: 0,
-                        mode: 'standard' as const,
+                        displacementScale: 20,
                       }
                     : glass)}
                 >

package/src/components/DatePicker/types.ts

@@ -150,6 +150,11 @@ export interface DatePickerProps {
    * @default false
    */
   glass?: boolean | AtomixGlassProps;
+
+  /**
+   * Custom style for the datepicker component
+   */
+  style?: React.CSSProperties;
 }
 
 export interface DatePickerRef {

package/src/components/Dropdown/Dropdown.stories.tsx

@@ -371,12 +371,14 @@ export const GlassDropdown: Story = {
   },
   render: args => <InteractiveDropdown {...args} />,
   decorators: [
-    (Story) => (
-      <div style={{ 
-        background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)', 
-        minHeight: '100vh',
-        padding: '2rem'
-      }}>
+    Story => (
+      <div
+        style={{
+          background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
+          minHeight: '100vh',
+          padding: '2rem',
+        }}
+      >
         <Story />
       </div>
     ),
@@ -400,12 +402,14 @@ export const GlassDropdownCustom: Story = {
   },
   render: args => <InteractiveDropdown {...args} />,
   decorators: [
-    (Story) => (
-      <div style={{ 
-        background: 'linear-gradient(45deg, #f093fb 0%, #f5576c 100%)', 
-        minHeight: '100vh',
-        padding: '2rem'
-      }}>
+    Story => (
+      <div
+        style={{
+          background: 'linear-gradient(45deg, #f093fb 0%, #f5576c 100%)',
+          minHeight: '100vh',
+          padding: '2rem',
+        }}
+      >
         <Story />
       </div>
     ),
@@ -422,12 +426,14 @@ export const GlassDropdownWithIcons: Story = {
   },
   render: args => <InteractiveDropdown {...args} />,
   decorators: [
-    (Story) => (
-      <div style={{ 
-        background: 'linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)', 
-        minHeight: '100vh',
-        padding: '2rem'
-      }}>
+    Story => (
+      <div
+        style={{
+          background: 'linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)',
+          minHeight: '100vh',
+          padding: '2rem',
+        }}
+      >
         <Story />
       </div>
     ),
@@ -441,8 +447,7 @@ export const GlassAllVariants: Story = {
   parameters: {
     docs: {
       description: {
-        story:
-          'Glass morphism effect applied to dropdowns with all color variants.',
+        story: 'Glass morphism effect applied to dropdowns with all color variants.',
       },
     },
   },
@@ -458,11 +463,13 @@ export const GlassAllVariants: Story = {
     };
 
     return (
-      <div style={{ 
-        background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)', 
-        minHeight: '100vh',
-        padding: '2rem'
-      }}>
+      <div
+        style={{
+          background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
+          minHeight: '100vh',
+          padding: '2rem',
+        }}
+      >
         <div className="u-d-flex u-flex-wrap u-gap-3">
           {[
             'primary',

package/src/components/Dropdown/Dropdown.tsx

@@ -76,10 +76,15 @@ export const DropdownItem: React.FC<DropdownItemProps> = ({
     return (
       <li>
         {LinkComponent ? (
-          <LinkComponent {...linkProps}>
-            {icon && <span className="c-dropdown__menu-item-icon">{icon}</span>}
-            {children}
-          </LinkComponent>
+          (() => {
+            const Component = LinkComponent as React.ComponentType<any>;
+            return (
+              <Component {...linkProps}>
+                {icon && <span className="c-dropdown__menu-item-icon">{icon}</span>}
+                {children}
+              </Component>
+            );
+          })()
         ) : (
           <a {...linkProps}>
             {icon && <span className="c-dropdown__menu-item-icon">{icon}</span>}
@@ -139,6 +144,7 @@ export const Dropdown: React.FC<DropdownProps> = ({
   minWidth = DROPDOWN.DEFAULTS.MIN_WIDTH,
   variant,
   className = '',
+  style,
   glass,
   ...props
 }) => {
@@ -321,6 +327,7 @@ export const Dropdown: React.FC<DropdownProps> = ({
     <div
       ref={dropdownRef}
       className={dropdownClasses}
+      style={style}
       onMouseEnter={trigger === 'hover' ? handleHoverOpen : undefined}
       {...props}
     >
@@ -340,35 +347,26 @@ export const Dropdown: React.FC<DropdownProps> = ({
       <div
         ref={menuRef}
         id={dropdownId}
-        className={`c-dropdown__menu-wrapper c-dropdown__menu-wrapper--${placement} ${isOpen ? 'is-open' : ''}`}
+        className={`c-dropdown__menu-wrapper c-dropdown__menu-wrapper--${placement} ${isOpen ? 'is-open' : ''} ${glass ? 'is-glass' : ''}`}
         role="menu"
         aria-orientation="vertical"
         aria-hidden={!isOpen}
         onKeyDown={handleKeyDown}
       >
-        {glass ? (
-          // Default glass settings for dropdowns
-          (() => {
-            const defaultGlassProps = {
-              displacementScale: 60,
-              blurAmount: 1,
-              saturation: 160,
-              aberrationIntensity: 0.5,
-              cornerRadius: 12,
-              mode: 'shader' as const,
-            };
-
-            const glassProps = glass === true ? defaultGlassProps : { ...defaultGlassProps, ...glass };
-
-            return (
-              <AtomixGlass {...glassProps} style={{position: 'absolute', width: '100%', height: '100%'}}>
-                {menuContent}
-              </AtomixGlass>
-            );
-          })()
-        ) : (
-          menuContent
-        )}
+        {glass
+          ? // Default glass settings for dropdowns
+            (() => {
+              const defaultGlassProps = {
+                displacementScale: 20,
+                elasticity: 0,
+              };
+
+              const glassProps =
+                glass === true ? defaultGlassProps : { ...defaultGlassProps, ...glass };
+
+              return <AtomixGlass {...glassProps}>{menuContent}</AtomixGlass>;
+            })()
+          : menuContent}
       </div>
     </div>
   );

package/src/components/EdgePanel/EdgePanel.stories.tsx

@@ -55,7 +55,8 @@ const meta = {
         style={{
           minHeight: '100vh',
           width: '100%',
-          backgroundImage: 'url(https://images.unsplash.com/photo-1605440704530-cd6f40ecf5a9?ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&q=80&w=2670)',
+          backgroundImage:
+            'url(https://images.unsplash.com/photo-1605440704530-cd6f40ecf5a9?ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&q=80&w=2670)',
           backgroundSize: 'cover',
           backgroundPosition: 'center',
           display: 'flex',
@@ -148,9 +149,7 @@ const EdgePanelController = ({
   }, []);
 
   return (
-    <div
-     
-    >
+    <div>
       <Button label={`Open ${position} panel`} variant="primary" onClick={() => setOpen(true)} />
 
       <EdgePanel
@@ -316,12 +315,14 @@ export const GlassStart: Story = {
           isOpen={open}
           onOpenChange={setOpen}
           title="Glass Panel"
-          glass={{
-            mode: 'standard',
-            displacementScale: 50,
-            blurAmount: 2,
-            saturation: 150,
-          } as any}
+          glass={
+            {
+              mode: 'standard',
+              displacementScale: 50,
+              blurAmount: 2,
+              saturation: 150,
+            } as any
+          }
         >
           <DemoPanelContent
             position="start"
@@ -407,8 +408,7 @@ export const GlassCustom: Story = {
     }, []);
 
     return (
-      <div
-      >
+      <div>
         <Button label="Open Custom Glass Panel" variant="primary" onClick={() => setOpen(true)} />
 
         <EdgePanel
@@ -474,9 +474,7 @@ export const GlassPremium: Story = {
     }, []);
 
     return (
-      <div
-      
-      >
+      <div>
         <Button label="Open Premium Glass Panel" variant="primary" onClick={() => setOpen(true)} />
 
         <EdgePanel