@shohojdhara/atomix 0.3.15 → 0.4.0

package/src/components/Callout/Callout.stories.tsx

@@ -330,7 +330,16 @@ export const Light: Story = {
 // All Variants
 export const AllVariants: Story = {
   render: () => {
-    const variants = ['primary', 'secondary', 'success', 'info', 'warning', 'error', 'light', 'dark'];
+    const variants = [
+      'primary',
+      'secondary',
+      'success',
+      'info',
+      'warning',
+      'error',
+      'light',
+      'dark',
+    ];
 
     const getIcon = (variant: string) => {
       switch (variant) {
@@ -388,7 +397,13 @@ export const Glass: Story = {
   },
   decorators: [
     Story => (
-      <div className="u-bg-cover u-bg-center u-p-16" style={{backgroundImage: 'url("https://images.unsplash.com/photo-1506905925346-21bda4d32df4?ixlib=rb-4.0.3&auto=format&fit=crop&w=2070&q=80")'}}>
+      <div
+        className="u-bg-cover u-bg-center u-p-16"
+        style={{
+          backgroundImage:
+            'url("https://images.unsplash.com/photo-1506905925346-21bda4d32df4?ixlib=rb-4.0.3&auto=format&fit=crop&w=2070&q=80")',
+        }}
+      >
         <Story />
       </div>
     ),
@@ -412,7 +427,13 @@ export const GlassSuccess: Story = {
   },
   decorators: [
     Story => (
-      <div className="u-bg-cover u-bg-center u-p-16" style={{backgroundImage: 'url("https://images.unsplash.com/photo-1441974231531-c6227db76b6e?ixlib=rb-4.0.3&auto=format&fit=crop&w=2071&q=80")'}}>
+      <div
+        className="u-bg-cover u-bg-center u-p-16"
+        style={{
+          backgroundImage:
+            'url("https://images.unsplash.com/photo-1441974231531-c6227db76b6e?ixlib=rb-4.0.3&auto=format&fit=crop&w=2071&q=80")',
+        }}
+      >
         <Story />
       </div>
     ),
@@ -437,7 +458,13 @@ export const GlassWarning: Story = {
   },
   decorators: [
     Story => (
-      <div className="u-bg-cover u-bg-center u-p-16" style={{backgroundImage: 'https://images.unsplash.com/photo-1506905925346-21bda4d32df4?ixlib=rb-4.0.3&auto=format&fit=crop&w=2070&q=80'}}>
+      <div
+        className="u-bg-cover u-bg-center u-p-16"
+        style={{
+          backgroundImage:
+            'https://images.unsplash.com/photo-1506905925346-21bda4d32df4?ixlib=rb-4.0.3&auto=format&fit=crop&w=2070&q=80',
+        }}
+      >
         <Story />
       </div>
     ),
@@ -462,7 +489,13 @@ export const GlassError: Story = {
   },
   decorators: [
     Story => (
-      <div className="u-bg-cover u-bg-center u-p-16" style={{backgroundImage: 'https://images.unsplash.com/photo-1506905925346-21bda4d32df4?ixlib=rb-4.0.3&auto=format&fit=crop&w=2070&q=80'}}>
+      <div
+        className="u-bg-cover u-bg-center u-p-16"
+        style={{
+          backgroundImage:
+            'https://images.unsplash.com/photo-1506905925346-21bda4d32df4?ixlib=rb-4.0.3&auto=format&fit=crop&w=2070&q=80',
+        }}
+      >
         <Story />
       </div>
     ),
@@ -486,7 +519,13 @@ export const GlassDark: Story = {
   },
   decorators: [
     Story => (
-      <div className="u-bg-cover u-bg-center u-p-16" style={{backgroundImage: 'https://images.unsplash.com/photo-1506905925346-21bda4d32df4?ixlib=rb-4.0.3&auto=format&fit=crop&w=2070&q=80'}}>
+      <div
+        className="u-bg-cover u-bg-center u-p-16"
+        style={{
+          backgroundImage:
+            'https://images.unsplash.com/photo-1506905925346-21bda4d32df4?ixlib=rb-4.0.3&auto=format&fit=crop&w=2070&q=80',
+        }}
+      >
         <Story />
       </div>
     ),
@@ -517,7 +556,13 @@ export const GlassWithActions: Story = {
   },
   decorators: [
     Story => (
-      <div className="u-bg-cover u-bg-center u-p-16" style={{backgroundImage: 'https://images.unsplash.com/photo-1506905925346-21bda4d32df4?ixlib=rb-4.0.3&auto=format&fit=crop&w=2070&q=80'}}>
+      <div
+        className="u-bg-cover u-bg-center u-p-16"
+        style={{
+          backgroundImage:
+            'https://images.unsplash.com/photo-1506905925346-21bda4d32df4?ixlib=rb-4.0.3&auto=format&fit=crop&w=2070&q=80',
+        }}
+      >
         <Story />
       </div>
     ),
@@ -544,7 +589,13 @@ export const GlassDismissible: Story = {
   },
   decorators: [
     Story => (
-      <div className="u-bg-cover u-bg-center u-p-16" style={{backgroundImage: 'https://images.unsplash.com/photo-1506905925346-21bda4d32df4?ixlib=rb-4.0.3&auto=format&fit=crop&w=2070&q=80'}}>
+      <div
+        className="u-bg-cover u-bg-center u-p-16"
+        style={{
+          backgroundImage:
+            'https://images.unsplash.com/photo-1506905925346-21bda4d32df4?ixlib=rb-4.0.3&auto=format&fit=crop&w=2070&q=80',
+        }}
+      >
         <Story />
       </div>
     ),
@@ -572,7 +623,13 @@ export const GlassToast: Story = {
   },
   decorators: [
     Story => (
-      <div className="u-bg-cover u-bg-center u-p-16" style={{backgroundImage: 'https://images.unsplash.com/photo-1506905925346-21bda4d32df4?ixlib=rb-4.0.3&auto=format&fit=crop&w=2070&q=80'}}>
+      <div
+        className="u-bg-cover u-bg-center u-p-16"
+        style={{
+          backgroundImage:
+            'https://images.unsplash.com/photo-1506905925346-21bda4d32df4?ixlib=rb-4.0.3&auto=format&fit=crop&w=2070&q=80',
+        }}
+      >
         <Story />
       </div>
     ),
@@ -596,7 +653,13 @@ export const GlassOneLine: Story = {
   },
   decorators: [
     Story => (
-      <div className="u-bg-cover u-bg-center u-p-16" style={{backgroundImage: 'https://images.unsplash.com/photo-1506905925346-21bda4d32df4?ixlib=rb-4.0.3&auto=format&fit=crop&w=2070&q=80'}}>
+      <div
+        className="u-bg-cover u-bg-center u-p-16"
+        style={{
+          backgroundImage:
+            'https://images.unsplash.com/photo-1506905925346-21bda4d32df4?ixlib=rb-4.0.3&auto=format&fit=crop&w=2070&q=80',
+        }}
+      >
         <Story />
       </div>
     ),
@@ -663,7 +726,13 @@ const ToastDemoTemplate = () => {
   return (
     <div className="u-relative u-min-h-90vh u-p-8 u-bg-gradient-to-br u-from-red-500/[0.15] u-via-orange-500/[0.15] u-to-blue-500/[0.15] u-overflow-hidden">
       {/* Additional background layer for depth */}
-      <div className="u-absolute u-inset-0 u-bg-cover u-bg-center u-opacity-20" style={{backgroundImage: 'url("https://images.unsplash.com/photo-1506905925346-21bda4d32df4?ixlib=rb-4.0.3&auto=format&fit=crop&w=2070&q=80")'}} />
+      <div
+        className="u-absolute u-inset-0 u-bg-cover u-bg-center u-opacity-20"
+        style={{
+          backgroundImage:
+            'url("https://images.unsplash.com/photo-1506905925346-21bda4d32df4?ixlib=rb-4.0.3&auto=format&fit=crop&w=2070&q=80")',
+        }}
+      />
 
       <div className="u-relative u-z-10 u-flex u-flex-col u-gap-4">
         <div className="u-flex u-gap-2 u-flex-wrap">
@@ -767,7 +836,13 @@ const AutoDismissTemplate = () => {
   return (
     <div className="u-relative u-min-h-90 u-p-16 u-bg-gradient-to-br u-from-red-500/[0.2] u-via-orange-500/[0.2] u-to-blue-500/[0.2]">
       {/* Additional background layer for depth */}
-      <div className="u-absolute u-inset-0 u-bg-cover u-bg-center u-opacity-30" style={{backgroundImage: 'url("https://images.unsplash.com/photo-1441974231531-c6227db76b6e?ixlib=rb-4.0.3&auto=format&fit=crop&w=2071&q=80")'}} />
+      <div
+        className="u-absolute u-inset-0 u-bg-cover u-bg-center u-opacity-30"
+        style={{
+          backgroundImage:
+            'url("https://images.unsplash.com/photo-1441974231531-c6227db76b6e?ixlib=rb-4.0.3&auto=format&fit=crop&w=2071&q=80")',
+        }}
+      />
 
       <div className="u-relative u-z-10 u-flex u-flex-col u-gap-4">
         {visible ? (
@@ -857,15 +932,27 @@ const GlassVariantsTemplate = () => {
   return (
     <div className="u-relative u-min-h-screen u-p-16 u-bg-gradient-to-br u-from-red-500/[0.1] u-via-orange-500/[0.1] u-to-blue-500/[0.1]">
       {/* Multiple background layers for depth */}
-      <div className="u-absolute u-inset-0 u-bg-cover u-bg-center u-opacity-30" style={{backgroundImage: 'url("https://images.unsplash.com/photo-1506905925346-21bda4d32df4?ixlib=rb-4.0.3&auto=format&fit=crop&w=2070&q=80")'}} />
-      <div className="u-absolute u-inset-0 u-bg-cover u-bg-center u-opacity-20" style={{backgroundImage: 'url("https://images.unsplash.com/photo-1441974231531-c6227db76b6e?ixlib=rb-4.0.3&auto=format&fit=crop&w=2071&q=80")'}} />
+      <div
+        className="u-absolute u-inset-0 u-bg-cover u-bg-center u-opacity-30"
+        style={{
+          backgroundImage:
+            'url("https://images.unsplash.com/photo-1506905925346-21bda4d32df4?ixlib=rb-4.0.3&auto=format&fit=crop&w=2070&q=80")',
+        }}
+      />
+      <div
+        className="u-absolute u-inset-0 u-bg-cover u-bg-center u-opacity-20"
+        style={{
+          backgroundImage:
+            'url("https://images.unsplash.com/photo-1441974231531-c6227db76b6e?ixlib=rb-4.0.3&auto=format&fit=crop&w=2071&q=80")',
+        }}
+      />
 
       <div className="u-relative u-z-10 u-flex u-flex-col u-gap-8">
         {variants.map((variant, index) => (
           <div
             key={variant}
             className="u-bg-cover u-bg-center u-p-8 u-rounded-xl u-relative u-overflow-hidden"
-            style={{backgroundImage: `url("${backgrounds[index % backgrounds.length]}")`}}
+            style={{ backgroundImage: `url("${backgrounds[index % backgrounds.length]}")` }}
           >
             <div className="u-absolute u-inset-0 u-bg-black/[0.1] u-z-n1" />
             <Callout
@@ -954,7 +1041,13 @@ const GlassToastDemoTemplate = () => {
   return (
     <div className="u-relative u-min-h-screen u-p-8 u-bg-gradient-to-br u-from-red-500/[0.2] u-via-orange-500/[0.2] u-to-blue-500/[0.2]">
       {/* Additional background layers for depth */}
-      <div className="u-absolute u-inset-0 u-bg-cover u-bg-center u-opacity-30" style={{backgroundImage: 'url("https://images.unsplash.com/photo-1506905925346-21bda4d32df4?ixlib=rb-4.0.3&auto=format&fit=crop&w=2070&q=80")'}} />
+      <div
+        className="u-absolute u-inset-0 u-bg-cover u-bg-center u-opacity-30"
+        style={{
+          backgroundImage:
+            'url("https://images.unsplash.com/photo-1506905925346-21bda4d32df4?ixlib=rb-4.0.3&auto=format&fit=crop&w=2070&q=80")',
+        }}
+      />
 
       <div className="u-relative u-z-10 u-flex u-flex-col u-gap-4">
         <div className="u-flex u-gap-2 u-flex-wrap">

package/src/components/Card/Card.stories.tsx

@@ -130,64 +130,64 @@ Cards are flexible containers for displaying content with optional headers, imag
         defaultValue: { summary: 'none' },
       },
     },
-    row: { 
-      control: 'boolean', 
+    row: {
+      control: 'boolean',
       description: 'Whether to arrange content horizontally',
       table: {
         type: { summary: 'boolean' },
         defaultValue: { summary: false },
       },
     },
-    flat: { 
-      control: 'boolean', 
+    flat: {
+      control: 'boolean',
       description: 'Whether to remove border radius',
       table: {
         type: { summary: 'boolean' },
         defaultValue: { summary: false },
       },
     },
-    active: { 
-      control: 'boolean', 
+    active: {
+      control: 'boolean',
       description: 'Whether the card is in active state',
       table: {
         type: { summary: 'boolean' },
         defaultValue: { summary: false },
       },
     },
-    disabled: { 
-      control: 'boolean', 
+    disabled: {
+      control: 'boolean',
       description: 'Whether the card is disabled',
       table: {
         type: { summary: 'boolean' },
         defaultValue: { summary: false },
       },
     },
-    loading: { 
-      control: 'boolean', 
+    loading: {
+      control: 'boolean',
       description: 'Whether the card is in loading state',
       table: {
         type: { summary: 'boolean' },
         defaultValue: { summary: false },
       },
     },
-    selected: { 
-      control: 'boolean', 
+    selected: {
+      control: 'boolean',
       description: 'Whether the card is selected',
       table: {
         type: { summary: 'boolean' },
         defaultValue: { summary: false },
       },
     },
-    interactive: { 
-      control: 'boolean', 
+    interactive: {
+      control: 'boolean',
       description: 'Whether the card responds to interactions',
       table: {
         type: { summary: 'boolean' },
         defaultValue: { summary: false },
       },
     },
-    className: { 
-      control: 'text', 
+    className: {
+      control: 'text',
       description: 'Additional CSS class names',
       table: {
         type: { summary: 'string' },
@@ -381,12 +381,14 @@ export const WithGlassEffect: Story = {
   parameters: {
     docs: {
       description: {
-        story: 'Demonstrates a card with glass morphism effect applied, creating a translucent, frosted appearance that works well over colorful backgrounds.',
+        story:
+          'Demonstrates a card with glass morphism effect applied, creating a translucent, frosted appearance that works well over colorful backgrounds.',
       },
     },
   },
   render: args => (
-    <div className="u-bg-cover u-h-80vh u-w-90vw u-grid u-rounded-xl u-overflow-hidden"
+    <div
+      className="u-bg-cover u-h-80vh u-w-90vw u-grid u-rounded-xl u-overflow-hidden"
       style={{
         backgroundImage: `url(https://picsum.photos/id/128/1920/1024)`,
       }}
@@ -720,7 +722,8 @@ export const AllGlassModesComparison: Story = {
   parameters: {
     docs: {
       description: {
-        story: 'Side-by-side comparison of all available glass morphism modes (standard, polar, prominent, shader) to help you choose the right effect for your design.',
+        story:
+          'Side-by-side comparison of all available glass morphism modes (standard, polar, prominent, shader) to help you choose the right effect for your design.',
       },
     },
   },
@@ -966,7 +969,8 @@ export const GlassCardGallery: Story = {
 // Glass Card Layouts
 export const GlassCardLayouts: Story = {
   render: () => (
-    <div className="u-bg-cover u-bg-center u-p-12 u-rounded-xl u-min-h-95vh u-min-w-95vw u-overflow-auto"
+    <div
+      className="u-bg-cover u-bg-center u-p-12 u-rounded-xl u-min-h-95vh u-min-w-95vw u-overflow-auto"
       style={{
         backgroundImage: 'url(https://images.unsplash.com/photo-1464822759023-fed622ff2c3b?w=1920)',
       }}
@@ -979,9 +983,7 @@ export const GlassCardLayouts: Story = {
         <div className="u-flex u-gap-8">
           {/* Standard Layout */}
           <div className="u-w-50">
-            <h3 className="u-text-white u-mb-4 u-text-shadow">
-              Standard Layout
-            </h3>
+            <h3 className="u-text-white u-mb-4 u-text-shadow">Standard Layout</h3>
             <Card
               title="Standard Glass Card"
               text="This is a standard glass card with vertical layout."
@@ -999,9 +1001,7 @@ export const GlassCardLayouts: Story = {
 
           {/* Row Layout */}
           <div className="u-w-50">
-            <h3 className="u-text-white u-mb-4 u-text-shadow">
-              Row Layout
-            </h3>
+            <h3 className="u-text-white u-mb-4 u-text-shadow">Row Layout</h3>
             <Card
               title="Row Glass Card"
               text="This is a row glass card with horizontal layout."
@@ -1024,9 +1024,7 @@ export const GlassCardLayouts: Story = {
 
           {/* Flat Layout */}
           <div className="u-w-50">
-            <h3 className="u-text-white u-mb-4 u-text-shadow">
-              Flat Layout
-            </h3>
+            <h3 className="u-text-white u-mb-4 u-text-shadow">Flat Layout</h3>
             <Card
               title="Flat Glass Card"
               text="This is a flat glass card with edge-to-edge image."
@@ -1081,7 +1079,13 @@ export const SizeVariants: Story = {
 // Color Variants
 export const ColorVariants: Story = {
   render: () => (
-    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(250px, 1fr))', gap: '1rem' }}>
+    <div
+      style={{
+        display: 'grid',
+        gridTemplateColumns: 'repeat(auto-fit, minmax(250px, 1fr))',
+        gap: '1rem',
+      }}
+    >
       <Card variant="primary" title="Primary Card" text="Primary variant card." />
       <Card variant="secondary" title="Secondary Card" text="Secondary variant card." />
       <Card variant="success" title="Success Card" text="Success variant card." />
@@ -1097,11 +1101,37 @@ export const ColorVariants: Story = {
 // Appearance Variants
 export const AppearanceVariants: Story = {
   render: () => (
-    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(250px, 1fr))', gap: '1rem' }}>
-      <Card appearance="filled" variant="primary" title="Filled Card" text="Filled appearance with solid background." />
-      <Card appearance="outlined" variant="primary" title="Outlined Card" text="Outlined appearance with border only." />
-      <Card appearance="ghost" variant="primary" title="Ghost Card" text="Ghost appearance with minimal styling." />
-      <Card appearance="elevated" variant="primary" title="Elevated Card" text="Elevated appearance with shadow." />
+    <div
+      style={{
+        display: 'grid',
+        gridTemplateColumns: 'repeat(auto-fit, minmax(250px, 1fr))',
+        gap: '1rem',
+      }}
+    >
+      <Card
+        appearance="filled"
+        variant="primary"
+        title="Filled Card"
+        text="Filled appearance with solid background."
+      />
+      <Card
+        appearance="outlined"
+        variant="primary"
+        title="Outlined Card"
+        text="Outlined appearance with border only."
+      />
+      <Card
+        appearance="ghost"
+        variant="primary"
+        title="Ghost Card"
+        text="Ghost appearance with minimal styling."
+      />
+      <Card
+        appearance="elevated"
+        variant="primary"
+        title="Elevated Card"
+        text="Elevated appearance with shadow."
+      />
     </div>
   ),
 };
@@ -1188,7 +1218,8 @@ export const Comprehensive: Story = {
   parameters: {
     docs: {
       description: {
-        story: 'A comprehensive example demonstrating various card features including sizes, variants, appearances, elevations, and states in a grid layout.',
+        story:
+          'A comprehensive example demonstrating various card features including sizes, variants, appearances, elevations, and states in a grid layout.',
       },
     },
   },

package/src/components/Card/Card.tsx

@@ -96,7 +96,24 @@ export const Card = React.memo(
           ]
             .filter(Boolean)
             .join(' '),
-        [size, variant, appearance, elevation, hoverable, hoverElevation, row, flat, active, disabled, loading, selected, interactive, isClickable, glass, className]
+        [
+          size,
+          variant,
+          appearance,
+          elevation,
+          hoverable,
+          hoverElevation,
+          row,
+          flat,
+          active,
+          disabled,
+          loading,
+          selected,
+          interactive,
+          isClickable,
+          glass,
+          className,
+        ]
       );
 
       // Determine ARIA role
@@ -239,11 +256,7 @@ export const Card = React.memo(
 
         if (glass) {
           const glassProps = glass === true ? {} : glass;
-          return (
-            <AtomixGlass {...{ ...glassProps, elasticity: 0 }}>
-              {anchorElement}
-            </AtomixGlass>
-          );
+          return <AtomixGlass {...{ ...glassProps, elasticity: 0 }}>{anchorElement}</AtomixGlass>;
         }
 
         return anchorElement;
@@ -258,11 +271,7 @@ export const Card = React.memo(
 
       if (glass) {
         const glassProps = glass === true ? {} : glass;
-        return (
-          <AtomixGlass {...{ ...glassProps, elasticity: 0 }}>
-            {divElement}
-          </AtomixGlass>
-        );
+        return <AtomixGlass {...{ ...glassProps, elasticity: 0 }}>{divElement}</AtomixGlass>;
       }
 
       return divElement;
@@ -327,10 +336,16 @@ export interface CardBodyProps extends React.HTMLAttributes<HTMLDivElement> {
 
 export const CardBody = forwardRef<HTMLDivElement, CardBodyProps>(
   ({ scrollable = false, maxHeight, children, className = '', style, ...props }, ref) => {
-    const bodyClasses = `${CARD.SELECTORS.BODY.substring(1)} ${scrollable ? 'c-card__body--scrollable' : ''} ${className}`.trim();
+    const bodyClasses =
+      `${CARD.SELECTORS.BODY.substring(1)} ${scrollable ? 'c-card__body--scrollable' : ''} ${className}`.trim();
     const bodyStyle: React.CSSProperties = {
       ...style,
-      ...(scrollable && maxHeight ? { maxHeight: typeof maxHeight === 'number' ? `${maxHeight}px` : maxHeight, overflowY: 'auto' } : {}),
+      ...(scrollable && maxHeight
+        ? {
+            maxHeight: typeof maxHeight === 'number' ? `${maxHeight}px` : maxHeight,
+            overflowY: 'auto',
+          }
+        : {}),
     };
 
     return (
@@ -352,7 +367,8 @@ export interface CardFooterProps extends React.HTMLAttributes<HTMLDivElement> {
 
 export const CardFooter = forwardRef<HTMLDivElement, CardFooterProps>(
   ({ align, children, className = '', style, ...props }, ref) => {
-    const footerClasses = `${CARD.SELECTORS.FOOTER.substring(1)} ${align ? `c-card__footer--align-${align}` : ''} ${className}`.trim();
+    const footerClasses =
+      `${CARD.SELECTORS.FOOTER.substring(1)} ${align ? `c-card__footer--align-${align}` : ''} ${className}`.trim();
 
     return (
       <div ref={ref} className={footerClasses} style={style} {...props}>

package/src/components/Chart/AreaChart.tsx

@@ -49,7 +49,7 @@ const AreaChart = memo(
                 y: scales.yScale(point.value),
               }));
 
-              const areaPath = `M ${areaPoints.map((p) => `${p.x},${p.y}`).join(' L ')} L ${areaPoints[areaPoints.length - 1]?.x},${scales.height} L ${areaPoints[0]?.x},${scales.height} Z`;
+              const areaPath = `M ${areaPoints.map(p => `${p.x},${p.y}`).join(' L ')} L ${areaPoints[areaPoints.length - 1]?.x},${scales.height} L ${areaPoints[0]?.x},${scales.height} Z`;
 
               return (
                 <g key={`dataset-${datasetIndex}`}>

package/src/components/Chart/CandlestickChart.tsx

@@ -125,7 +125,10 @@ const CandlestickChart = memo(
         borderColor = 'var(--atomix-primary-border-subtle)',
         showMovingAverages = false,
         movingAveragePeriods = [7, 21],
-        movingAverageColors = ['var(--atomix-warning-bg-subtle)', 'var(--atomix-warning-border-subtle)'],
+        movingAverageColors = [
+          'var(--atomix-warning-bg-subtle)',
+          'var(--atomix-warning-border-subtle)',
+        ],
         dateFormat = 'short',
         dateFormatter,
         showGrid = true,
@@ -189,7 +192,11 @@ const CandlestickChart = memo(
       }: ChartRenderContentParams) => {
         if (!candlestickData.length) return null;
 
-        const showTooltips = toolbarState?.showTooltips ?? renderConfig?.showTooltips ?? candlestickOptions.showTooltips ?? true;
+        const showTooltips =
+          toolbarState?.showTooltips ??
+          renderConfig?.showTooltips ??
+          candlestickOptions.showTooltips ??
+          true;
 
         const padding = 40;
         const chartWidth = scales.width - padding * 2;
@@ -298,7 +305,9 @@ const CandlestickChart = memo(
                   );
                 }}
                 onMouseLeave={handlers.onPointLeave}
-                onClick={() => handlers.onDataPointClick?.(candle as unknown as ChartDataPoint, 0, index)}
+                onClick={() =>
+                  handlers.onDataPointClick?.(candle as unknown as ChartDataPoint, 0, index)
+                }
               />
             </g>
           );
@@ -372,19 +381,17 @@ const CandlestickChart = memo(
             {candles}
             {volumeBars}
             {movingAverages}
-            {showTooltips &&
-              hoveredPoint &&
-              candlestickData[hoveredPoint.pointIndex] && (
-                <ChartTooltip
-                  dataPoint={candlestickData[hoveredPoint.pointIndex] as unknown as ChartDataPoint}
-                  datasetLabel="Candlestick"
-                  position={{
-                    x: hoveredPoint.clientX,
-                    y: hoveredPoint.clientY,
-                  }}
-                  visible={true}
-                />
-              )}
+            {showTooltips && hoveredPoint && candlestickData[hoveredPoint.pointIndex] && (
+              <ChartTooltip
+                dataPoint={candlestickData[hoveredPoint.pointIndex] as unknown as ChartDataPoint}
+                datasetLabel="Candlestick"
+                position={{
+                  x: hoveredPoint.clientX,
+                  y: hoveredPoint.clientY,
+                }}
+                visible={true}
+              />
+            )}
           </>
         );
       };

package/src/components/Chart/Chart.stories.tsx

@@ -179,7 +179,7 @@ type Story = StoryObj<typeof meta>;
 
 // Glass Variant Story
 export const GlassVariant: Story = {
-  render: (args) => {
+  render: args => {
     const sampleData = [
       { label: 'Jan', value: 65 },
       { label: 'Feb', value: 78 },
@@ -240,12 +240,7 @@ export const GlassVariant: Story = {
               />
             </GridCol>
             <GridCol col={12} md={6}>
-              <PieChart
-                title="Market Share"
-                data={sampleData}
-                glass={true}
-                showToolbar={true}
-              />
+              <PieChart title="Market Share" data={sampleData} glass={true} showToolbar={true} />
             </GridCol>
             <GridCol col={12} md={6}>
               <AreaChart
@@ -356,7 +351,7 @@ const generateTreemapData = (count = 12) => {
     'Agriculture',
     'Construction',
   ];
-  
+
   return Array.from({ length: count }, (_, i) => ({
     id: `category-${i}`,
     label: categories[i % categories.length] || `Category ${i + 1}`,
@@ -377,7 +372,7 @@ const generateFunnelData = () => {
     { label: 'Evaluation', value: 600 },
     { label: 'Purchase', value: 300 },
   ];
-  
+
   return stages.map(stage => ({
     ...stage,
     percentage: ((stage.value / stages[0].value) * 100).toFixed(1),