@shohojdhara/atomix 0.4.1 → 0.4.3

package/src/components/Card/Card.tsx

@@ -39,6 +39,8 @@ export const Card = React.memo(
         onFocus,
         href,
         target,
+        // Custom Link
+        LinkComponent,
         // Glass
         glass,
         // Accessibility
@@ -242,17 +244,35 @@ export const Card = React.memo(
 
       // Render as anchor if href is provided
       if (href && !isDisabled) {
-        const anchorElement = (
-          <a
-            {...commonProps}
-            ref={ref as React.Ref<HTMLAnchorElement>}
-            href={href}
-            target={target}
-            rel={target === '_blank' ? 'noopener noreferrer' : undefined}
-          >
-            {cardContent}
-          </a>
-        );
+        let anchorElement: React.ReactElement;
+
+        if (LinkComponent) {
+          const LinkComp = LinkComponent as React.ComponentType<any>;
+          anchorElement = (
+            <LinkComp
+              {...commonProps}
+              ref={ref as React.Ref<HTMLAnchorElement>}
+              href={href}
+              to={href}
+              target={target}
+              rel={target === '_blank' ? 'noopener noreferrer' : undefined}
+            >
+              {cardContent}
+            </LinkComp>
+          );
+        } else {
+          anchorElement = (
+            <a
+              {...commonProps}
+              ref={ref as React.Ref<HTMLAnchorElement>}
+              href={href}
+              target={target}
+              rel={target === '_blank' ? 'noopener noreferrer' : undefined}
+            >
+              {cardContent}
+            </a>
+          );
+        }
 
         if (glass) {
           const glassProps = glass === true ? {} : glass;

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

@@ -250,7 +250,7 @@ export const GlassVariant: Story = {
                 glass={{
                   blurAmount: 0,
                   saturation: 180,
-                  enableBorderEffect: true,
+                  withBorder: true,
                 }}
                 showToolbar={true}
               />

package/src/components/Chart/Chart.tsx

@@ -278,8 +278,8 @@ const Chart = memo(
           saturation: 180,
           aberrationIntensity: 1.5,
           elasticity: 0, // No elastic effect for charts
-          enableLiquidBlur: false, // Keep it simple
-          enableBorderEffect: true,
+          withLiquidBlur: false, // Keep it simple
+          withBorder: true,
           mode: 'standard' as const,
           mouseContainer: chartContainerRef,
           reducedMotion: false,
@@ -300,8 +300,8 @@ const Chart = memo(
       const chartBorderRadius = useMemo(() => {
         // Use chart border-radius design token (typically 12px from $border-radius-lg)
         // AtomixGlass will extract from children if not provided
-        return glassProps?.cornerRadius || undefined;
-      }, [glassProps?.cornerRadius]);
+        return glassProps?.borderRadius || undefined;
+      }, [glassProps?.borderRadius]);
 
       // Create context value
       const chartContextValue = useMemo<ChartContextValue>(
@@ -404,7 +404,7 @@ const Chart = memo(
       const wrappedChart = glassProps ? (
         <AtomixGlass
           {...glassProps}
-          cornerRadius={chartBorderRadius}
+          borderRadius={chartBorderRadius}
           style={{
             width: '100%',
             height: '100%',

package/src/components/Chart/TreemapChart.tsx

@@ -98,21 +98,25 @@ interface TreemapChartProps extends Omit<ChartProps, 'type' | 'datasets'> {
   };
 }
 
+const DEFAULT_COLOR_CONFIG: NonNullable<TreemapChartProps['colorConfig']> = { scheme: 'category' };
+const DEFAULT_LABEL_CONFIG = {
+  showLabels: true,
+  minSize: 1000,
+  fontSize: 12,
+  textColor: 'white',
+};
+const DEFAULT_CONFIG = {};
+
 const TreemapChart = memo(
   forwardRef<HTMLDivElement, TreemapChartProps>(
     (
       {
         data = [],
         algorithm = 'squarified',
-        colorConfig = { scheme: 'category' },
-        labelConfig = {
-          showLabels: true,
-          minSize: 1000,
-          fontSize: 12,
-          textColor: 'white',
-        },
+        colorConfig = DEFAULT_COLOR_CONFIG,
+        labelConfig = DEFAULT_LABEL_CONFIG,
         onDataPointClick,
-        config = {},
+        config = DEFAULT_CONFIG,
         ...props
       },
       ref
@@ -122,9 +126,7 @@ const TreemapChart = memo(
       const [tooltipPosition, setTooltipPosition] = useState({ x: 0, y: 0 });
 
       const treeData = useMemo(() => {
-        console.log('TreemapChart data:', data);
         if (!data.length) {
-          console.log('No data provided to TreemapChart');
           return null;
         }
 
@@ -357,16 +359,17 @@ const TreemapChart = memo(
         []
       );
 
-      const renderContent = ({
-        scales,
-        colors,
-        datasets: renderedDatasets,
-        handlers,
-        hoveredPoint,
-      }: ChartRenderContentParams) => {
-        if (!data.length) return null;
-
-        // Calculate available space with padding
+      const renderContent = useCallback(
+        ({
+          scales,
+          colors,
+          datasets: renderedDatasets,
+          handlers,
+          hoveredPoint,
+        }: ChartRenderContentParams) => {
+          if (!data.length) return null;
+
+          // Calculate available space with padding
         const padding = 20;
         const availableWidth = scales.width - padding * 2;
         const availableHeight = scales.height - padding * 2;
@@ -467,17 +470,22 @@ const TreemapChart = memo(
                 </g>
               );
             })}
-          </>
-        );
-      };
+            </>
+          );
+        },
+        [data, algorithm, generateColor, squarify, labelConfig, hoveredNode, selectedNode]
+      );
 
       // Convert data to datasets format for BaseChart
-      const datasets = [
-        {
-          label: 'Treemap Data',
-          data: data,
-        },
-      ];
+      const datasets = useMemo(
+        () => [
+          {
+            label: 'Treemap Data',
+            data: data,
+          },
+        ],
+        [data]
+      );
 
       return (
         <BaseChart

package/src/components/DatePicker/readme.md

@@ -152,7 +152,7 @@ const CustomGlassExample = () => {
           blurAmount: 0,
           saturation: 180,
           aberrationIntensity: 2,
-          cornerRadius: 16,
+          borderRadius: 16,
           overLight: false,
           mode: 'polar',
         }}
@@ -184,7 +184,7 @@ const GlassRangeExample = () => {
           blurAmount: 0,
           saturation: 160,
           aberrationIntensity: 1.5,
-          cornerRadius: 14,
+          borderRadius: 14,
           mode: 'prominent',
         }}
       />
@@ -203,7 +203,7 @@ When `glass` is an object, it accepts the same props as the `AtomixGlass` compon
 | `blurAmount` | `number` | `0` | Blur amount for the backdrop |
 | `saturation` | `number` | `160` | Saturation percentage for the backdrop |
 | `aberrationIntensity` | `number` | `1.5` | Chromatic aberration intensity |
-| `cornerRadius` | `number` | `12` | Corner radius in pixels |
+| `borderRadius` | `number` | `12` | Corner radius in pixels |
 | `overLight` | `boolean` | `false` | Whether the glass is over a light background |
 | `mode` | `'standard' \| 'polar' \| 'prominent' \| 'shader'` | `'standard'` | Glass effect mode |
 

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

@@ -505,7 +505,7 @@ export const GlassDropdownCustom: Story = {
       blurAmount: 2,
       saturation: 200,
       aberrationIntensity: 1,
-      cornerRadius: 16,
+      borderRadius: 16,
       mode: 'polar',
     },
   },