@shohojdhara/atomix 0.3.5 → 0.3.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shohojdhara/atomix",
-  "version": "0.3.5",
+  "version": "0.3.6",
   "description": "Atomix Design System - A modern component library for web applications",
   "type": "module",
   "sideEffects": [
@@ -86,16 +86,6 @@
       "import": "./dist/theme.js",
       "default": "./dist/theme.js"
     },
-    "./themes/*": {
-      "import": "./dist/themes/*.css",
-      "require": "./dist/themes/*.css",
-      "default": "./dist/themes/*.css"
-    },
-    "./themes/*.min": {
-      "import": "./dist/themes/*.min.css",
-      "require": "./dist/themes/*.min.css",
-      "default": "./dist/themes/*.min.css"
-    },
     "./charts": {
       "types": "./dist/charts.d.ts",
       "import": "./dist/charts.js",
@@ -233,11 +223,10 @@
     "changeset": "changeset",
     "typecheck": "tsc --noEmit",
     "attw": "attw --pack",
-    "sync:config": "npx tsx scripts/sync-theme-config-ts.ts",
     "sync:tokens": "npx tsx scripts/generate-tokens.ts",
     "validate:config": "npx tsx scripts/validate-config-sync.ts",
-    "prebuild": "npm run sync:config && npm run validate:config",
-    "prebuild:with-tokens": "npm run sync:config && npm run sync:tokens && npm run validate:config",
+    "prebuild": "npm run validate:config",
+    "prebuild:with-tokens": "npm run sync:tokens && npm run validate:config",
     "verify:build": "node scripts/verify-build.js",
     "test:build": "node scripts/test-build.js",
     "prepublishOnly": "npm run clean && npm run build && npm run attw",
@@ -245,16 +234,13 @@
   },
   "files": [
     "dist/**/*",
-    "dist/themes/**/*",
     "src/styles/**/*",
     "src/components/**/*",
     "src/lib/**/*",
     "src/layouts/**/*",
-    "src/themes/**/*",
     "scripts/atomix-cli.js",
-    "scripts/sync-theme-config.js",
     "scripts/cli/**/*",
-    "theme.config.ts",
+    "atomix.config.ts",
     "README.md",
     "LICENSE",
     "CHANGELOG.md"
@@ -296,9 +282,9 @@
   },
   "engines": {
     "node": ">=18.0.0",
-    "npm": ">=8.0.0"
+    "npm": ">=8.0.0 <11.0.0 || >=11.7.0"
   },
   "publishConfig": {
     "access": "public"
   }
-}
+}

package/src/components/Accordion/Accordion.stories.tsx

@@ -4,6 +4,9 @@ import { Accordion } from './Accordion';
 import { ACCORDION } from '../../lib/constants/components';
 import type { AtomixGlassProps } from '../../lib/types/components';
 
+// Helper type for glass props in stories (without children requirement)
+type GlassProps = boolean | Omit<AtomixGlassProps, 'children'>;
+
 // Extract class names without the leading dots
 const ACCORDION_CLASS = ACCORDION.SELECTORS.ACCORDION.replace('.', '');
 const HEADER_CLASS = ACCORDION.SELECTORS.HEADER.replace('.', '');
@@ -24,15 +27,18 @@ const meta = {
       },
     },
   },
+  tags: ['autodocs'],
   argTypes: {
     iconPosition: {
       control: { type: 'radio' },
       options: ['right', 'left'],
       description: 'Position of the icon',
+      defaultValue: 'right',
     },
     defaultOpen: {
       control: 'boolean',
       description: 'Whether the accordion is initially open',
+      defaultValue: false,
     },
     disabled: {
       control: 'boolean',
@@ -56,7 +62,9 @@ const meta = {
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-// Default Accordion (Closed)
+/**
+ * Default accordion in closed state.
+ */
 export const Default: Story = {
   args: {
     title: 'Accordion Title',
@@ -64,7 +72,9 @@ export const Default: Story = {
   },
 };
 
-// Open Accordion
+/**
+ * Accordion in open state by default.
+ */
 export const Open: Story = {
   args: {
     title: 'Open Accordion',
@@ -73,7 +83,9 @@ export const Open: Story = {
   },
 };
 
-// Disabled Accordion
+/**
+ * Disabled accordion - non-interactive state.
+ */
 export const Disabled: Story = {
   args: {
     title: 'Disabled Accordion',
@@ -82,7 +94,9 @@ export const Disabled: Story = {
   },
 };
 
-// Icon on Left
+/**
+ * Accordion with icon positioned on the left side.
+ */
 export const IconLeft: Story = {
   args: {
     title: 'Icon on Left',
@@ -91,7 +105,9 @@ export const IconLeft: Story = {
   },
 };
 
-// Custom Icon
+/**
+ * Accordion with custom icon instead of default chevron.
+ */
 export const CustomIcon: Story = {
   args: {
     title: 'Custom Icon',
@@ -118,7 +134,9 @@ export const CustomIcon: Story = {
   },
 };
 
-// Accordion Group
+/**
+ * Multiple accordions grouped together.
+ */
 export const AccordionGroup: Story = {
   args: {
     title: 'Accordion Group',
@@ -150,12 +168,21 @@ export const AccordionGroup: Story = {
   ),
 };
 
-// All Variants
+/**
+ * Showcase of all accordion variants and states.
+ */
 export const AllVariants: Story = {
   args: {
     title: 'All Variants',
     children: <p>See render function for all variants</p>,
   },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Comprehensive showcase of all accordion variants including default, open, disabled, icon positions, and custom icons.',
+      },
+    },
+  },
   render: () => (
     <div>
       <h2>All Accordion Variants</h2>
@@ -246,7 +273,9 @@ export const AllVariants: Story = {
   ),
 };
 
-// Controlled Accordion
+/**
+ * Controlled accordion using external state management.
+ */
 export const Controlled: Story = {
   args: {
     title: 'Controlled Accordion',
@@ -275,7 +304,9 @@ export const Controlled: Story = {
   },
 };
 
-// Glass Variant
+/**
+ * Accordion with glass morphism effect enabled.
+ */
 export const Glass: Story = {
   args: {
     title: 'Glass Accordion',
@@ -312,7 +343,9 @@ export const Glass: Story = {
   },
 };
 
-// Glass with Custom Settings
+/**
+ * Accordion with custom glass morphism settings.
+ */
 export const GlassCustom: Story = {
   args: {
     title: 'Custom Glass Accordion',
@@ -322,7 +355,7 @@ export const GlassCustom: Story = {
       blurAmount: 3,
       saturation: 60,
       mode: 'polar',
-    } as AtomixGlassProps as any,
+    } as GlassProps,
   },
   render: args => (
     <div
@@ -505,7 +538,7 @@ export const GlassModePolar: Story = {
       blurAmount: 1.5,
       saturation: 180,
       aberrationIntensity: 3,
-    } as any,
+    } as GlassProps,
   },
   render: args => (
     <div
@@ -550,7 +583,7 @@ export const GlassModeProminent: Story = {
       blurAmount: 2.5,
       saturation: 200,
       aberrationIntensity: 4,
-    } as any,
+    } as GlassProps,
   },
   render: args => (
     <div
@@ -595,7 +628,7 @@ export const GlassModeShader: Story = {
       displacementScale: 70,
       blurAmount: 1.8,
       saturation: 170,
-    } as any,
+    } as GlassProps,
   },
   render: args => (
     <div
@@ -700,7 +733,7 @@ export const AllGlassModesComparison: Story = {
                   blurAmount: 1.5,
                   saturation: 180,
                   aberrationIntensity: 3,
-                } as any
+                } as GlassProps
               }
             >
               <p>Radial distortion effects emanating from the center point.</p>
@@ -728,7 +761,7 @@ export const AllGlassModesComparison: Story = {
                   blurAmount: 2.5,
                   saturation: 200,
                   aberrationIntensity: 4,
-                } as any
+                } as GlassProps
               }
             >
               <p>Enhanced distortion with maximum depth and visual impact.</p>
@@ -756,7 +789,7 @@ export const AllGlassModesComparison: Story = {
                   displacementScale: 70,
                   blurAmount: 1.8,
                   saturation: 170,
-                } as any
+                } as GlassProps
               }
             >
               <p>GPU-accelerated liquid glass with smooth animations.</p>

package/src/components/AtomixGlass/AtomixGlass.tsx

@@ -118,6 +118,12 @@ export function AtomixGlass({
     opacity0: number;
   } | null>(null);
 
+  // Cache RGB color values from design tokens
+  const rgbCacheRef = useRef<{
+    whiteRgb: string;
+    blackRgb: string;
+  } | null>(null);
+
   // Use composable hook for all state and logic
   const {
     isHovered,
@@ -161,35 +167,63 @@ export function AtomixGlass({
 
   // Read CSS custom properties once on mount and cache them
   useEffect(() => {
-    if (typeof window !== 'undefined' && glassRef.current && !opacityCacheRef.current) {
+    if (typeof window !== 'undefined' && glassRef.current) {
       try {
         const computedStyle = window.getComputedStyle(glassRef.current);
-        const opacity50Value = computedStyle.getPropertyValue('--atomix-opacity-50').trim();
-        const opacity40Value = computedStyle.getPropertyValue('--atomix-opacity-40').trim();
-        const opacity80Value = computedStyle.getPropertyValue('--atomix-opacity-80').trim();
-        const opacity0Value = computedStyle.getPropertyValue('--atomix-opacity-0').trim();
-
-        // Parse opacity values, handling 0 correctly (use NaN check instead of falsy check)
-        const parseOpacity = (value: string, defaultValue: number): number => {
-          if (!value) return defaultValue;
-          const parsed = parseFloat(value);
-          return isNaN(parsed) ? defaultValue : parsed;
-        };
-
-        opacityCacheRef.current = {
-          opacity50: parseOpacity(opacity50Value, 0.5),
-          opacity40: parseOpacity(opacity40Value, 0.4),
-          opacity80: parseOpacity(opacity80Value, 0.8),
-          opacity0: parseOpacity(opacity0Value, 0),
-        };
+        
+        // Cache opacity values
+        if (!opacityCacheRef.current) {
+          const opacity50Value = computedStyle.getPropertyValue('--atomix-opacity-50').trim();
+          const opacity40Value = computedStyle.getPropertyValue('--atomix-opacity-40').trim();
+          const opacity80Value = computedStyle.getPropertyValue('--atomix-opacity-80').trim();
+          const opacity0Value = computedStyle.getPropertyValue('--atomix-opacity-0').trim();
+
+          // Parse opacity values, handling 0 correctly (use NaN check instead of falsy check)
+          const parseOpacity = (value: string, defaultValue: number): number => {
+            if (!value) return defaultValue;
+            const parsed = parseFloat(value);
+            return isNaN(parsed) ? defaultValue : parsed;
+          };
+
+          opacityCacheRef.current = {
+            opacity50: parseOpacity(opacity50Value, 0.5),
+            opacity40: parseOpacity(opacity40Value, 0.4),
+            opacity80: parseOpacity(opacity80Value, 0.8),
+            opacity0: parseOpacity(opacity0Value, 0),
+          };
+        }
+
+        // Cache RGB color values from design tokens
+        if (!rgbCacheRef.current) {
+          // Try to read from design tokens, fallback to defaults
+          const whiteRgbValue = computedStyle.getPropertyValue('--atomix-light-rgb').trim() ||
+                                computedStyle.getPropertyValue('--atomix-white-rgb').trim() ||
+                                '';
+          const blackRgbValue = computedStyle.getPropertyValue('--atomix-dark-rgb').trim() ||
+                               computedStyle.getPropertyValue('--atomix-black-rgb').trim() ||
+                               '';
+
+          rgbCacheRef.current = {
+            whiteRgb: whiteRgbValue || '255, 255, 255', // Fallback to white RGB
+            blackRgb: blackRgbValue || '0, 0, 0', // Fallback to black RGB
+          };
+        }
       } catch (error) {
         // Fallback to defaults if reading fails
-        opacityCacheRef.current = {
-          opacity50: 0.5,
-          opacity40: 0.4,
-          opacity80: 0.8,
-          opacity0: 0,
-        };
+        if (!opacityCacheRef.current) {
+          opacityCacheRef.current = {
+            opacity50: 0.5,
+            opacity40: 0.4,
+            opacity80: 0.8,
+            opacity0: 0,
+          };
+        }
+        if (!rgbCacheRef.current) {
+          rgbCacheRef.current = {
+            whiteRgb: '255, 255, 255',
+            blackRgb: '0, 0, 0',
+          };
+        }
       }
     }
   }, []);
@@ -393,12 +427,12 @@ export function AtomixGlass({
 
   const glassVars = useMemo(() => {
     // RGB color values for rgba() functions
-    // Note: CSS doesn't support rgba(var(--rgb), opacity) syntax, so we use direct values
-    // These values align with design tokens: --atomix-white-rgb and --atomix-black-rgb
-    // The actual RGB values are defined in SCSS and should match these fallbacks
-    // TODO: Consider reading from CSS custom properties if browser support improves
-    const whiteColor = '255, 255, 255'; // Matches --atomix-white-rgb design token
-    const blackColor = '0, 0, 0'; // Matches --atomix-black-rgb design token
+    // Note: CSS doesn't support rgba(var(--rgb), opacity) syntax - this is a CSS specification
+    // limitation, not a browser support issue. We read RGB values from design tokens at mount
+    // and cache them for performance. Falls back to defaults if tokens are not available.
+    // Uses design tokens: --atomix-light-rgb / --atomix-white-rgb and --atomix-dark-rgb / --atomix-black-rgb
+    const whiteColor = rgbCacheRef.current?.whiteRgb || '255, 255, 255';
+    const blackColor = rgbCacheRef.current?.blackRgb || '0, 0, 0';
 
     return {
       // Standard CSS custom properties for dynamic values

package/src/components/AtomixGlass/AtomixGlassContainer.tsx

@@ -130,10 +130,17 @@ export const AtomixGlassContainer = forwardRef<HTMLDivElement, AtomixGlassContai
     },
     ref
   ) => {
-    // Use React's useId() for SSR compatibility
-    // Note: In Next.js, IDs may differ between server and client
-    // We'll suppress hydration warnings on elements that use this ID
-    const filterId = useId();
+    // Generate a stable, deterministic ID for SSR compatibility
+    // React's useId() should produce the same ID on server and client for the same
+    // component position in the tree. We use useState to ensure the ID is only
+    // generated once and remains stable across renders.
+    const baseId = useId();
+    const [filterId] = useState(() => {
+      // Normalize the ID to ensure it's valid and consistent
+      // Remove colons (which useId() uses) and ensure it starts with a letter
+      const normalizedId = baseId.replace(/:/g, '-').replace(/^[^a-z]/i, 'atomix-');
+      return `atomix-glass-filter-${normalizedId}`;
+    });
     
     const [shaderMapUrl, setShaderMapUrl] = useState<string>('');
     const shaderGeneratorRef = useRef<any>(null);

package/src/components/AtomixGlass/stories/AtomixGlass.stories.tsx

@@ -124,7 +124,7 @@ See documentation for detailed examples of each mode.`,
       },
     },
     mode: {
-      control: 'select',
+      control: { type: 'select' },
       options: ['standard', 'polar', 'prominent', 'shader'],
       description: 'Glass effect mode (default: "standard")',
       table: { defaultValue: { summary: '"standard"' } },
@@ -446,37 +446,6 @@ const backgroundImages = [
   'https://images.unsplash.com/photo-1521587760476-6c12a4b040da?q=80&w=2940&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
 ];
 
-/**
- * Legacy backgrounds object for backward compatibility
- * @deprecated Use backgroundImages array instead
- */
-const backgrounds = {
-  // Office and workspace environments
-  blueGradient: backgroundImages[0], // Modern office interior
-  purpleGradient: backgroundImages[1], // Mountain landscape
-  greenGradient: backgroundImages[3], // Forest path
-
-  // Apple-inspired natural scenes
-  macosWallpaper: backgroundImages[1], // Mountain landscape
-  iosWallpaper: backgroundImages[4], // Ocean waves
-
-  // Nature scenes
-  mountains: backgroundImages[1], // Mountain landscape
-  ocean: backgroundImages[4], // Ocean waves
-
-  // Urban environments
-  cityNight: backgroundImages[2], // Urban cityscape
-  cityDay: backgroundImages[5], // Modern architecture
-
-  // Interior spaces
-  abstract1: backgroundImages[6], // Cozy café interior
-  abstract2: backgroundImages[9], // Modern library
-
-  // Video backgrounds
-  videoBackground:
-    'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4',
-};
-
 /**
  * Default showcase of the AtomixGlass component
  *

package/src/components/AtomixGlass/stories/Examples.stories.tsx

@@ -11,7 +11,7 @@ import React from 'react';
 import { useState, useEffect } from 'react';
 import { Meta, StoryObj } from '@storybook/react';
 import AtomixGlass from '../AtomixGlass';
-import { BackgroundWrapper, backgrounds, backgroundImages } from './shared-components';
+import { BackgroundWrapper, backgroundImages } from './shared-components';
 
 import { Button } from '../../Button';
 import { Badge } from '../../Badge';
@@ -181,7 +181,7 @@ export const VideoBackground: Story = {
             zIndex: -1,
           }}
         >
-          <source src={backgrounds.videoBackground} type="video/mp4" />
+          <source src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4" />
         </video>
 
         <div

package/src/components/AtomixGlass/stories/shared-components.tsx

@@ -106,37 +106,6 @@ export const backgroundImages = [
   'https://images.unsplash.com/photo-1521587760476-6c12a4b040da?q=80&w=2940&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
 ];
 
-/**
- * Legacy backgrounds object for backward compatibility
- * @deprecated Use backgroundImages array instead
- */
-export const backgrounds = {
-  // Office and workspace environments
-  blueGradient: backgroundImages[0], // Modern office interior
-  purpleGradient: backgroundImages[1], // Mountain landscape
-  greenGradient: backgroundImages[3], // Forest path
-
-  // Apple-inspired natural scenes
-  macosWallpaper: backgroundImages[1], // Mountain landscape
-  iosWallpaper: backgroundImages[4], // Ocean waves
-
-  // Nature scenes
-  mountains: backgroundImages[1], // Mountain landscape
-  ocean: backgroundImages[4], // Ocean waves
-
-  // Urban environments
-  cityNight: backgroundImages[2], // Urban cityscape
-  cityDay: backgroundImages[5], // Modern architecture
-
-  // Interior spaces
-  abstract1: backgroundImages[6], // Cozy café interior
-  abstract2: backgroundImages[9], // Modern library
-
-  // Video backgrounds
-  videoBackground:
-    'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4',
-};
-
 /**
  * BackgroundWrapper Component Implementation
  *

package/src/components/Avatar/Avatar.stories.tsx

@@ -8,7 +8,14 @@ const meta = {
   component: Avatar,
   parameters: {
     layout: 'centered',
+    docs: {
+      description: {
+        component:
+          'The Avatar component displays user profile images, initials, or icons. It provides a consistent way to represent users throughout the application. Avatars support various sizes, can be circular or square, and gracefully handle missing images by showing initials or icons.',
+      },
+    },
   },
+  tags: ['autodocs'],
   argTypes: {
     src: {
       control: 'text',