@shohojdhara/atomix 0.3.5 → 0.3.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shohojdhara/atomix",
-  "version": "0.3.5",
+  "version": "0.3.7",
   "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>