@shohojdhara/atomix 0.2.1 → 0.2.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shohojdhara/atomix",
-  "version": "0.2.1",
+  "version": "0.2.3",
   "description": "Atomix Design System - A modern component library for web applications",
   "type": "module",
   "sideEffects": false,
@@ -13,24 +13,75 @@
     ".": {
       "types": "./dist/index.d.ts",
       "import": "./dist/index.esm.js",
-      "require": "./dist/index.js"
+      "require": "./dist/index.js",
+      "default": "./dist/index.esm.js"
     },
     "./styles": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/atomix.css",
+      "require": "./dist/atomix.css",
+      "default": "./dist/atomix.css"
+    },
+    "./css": {
       "import": "./dist/atomix.css",
-      "require": "./dist/atomix.min.css"
+      "require": "./dist/atomix.css",
+      "default": "./dist/atomix.css"
+    },
+    "./css/min": {
+      "import": "./dist/atomix.min.css",
+      "require": "./dist/atomix.min.css",
+      "default": "./dist/atomix.min.css"
+    },
+    "./scss": {
+      "import": "./src/styles/index.scss",
+      "require": "./src/styles/index.scss",
+      "default": "./src/styles/index.scss"
+    },
+    "./scss/settings": {
+      "import": "./src/styles/01-settings/_index.scss",
+      "require": "./src/styles/01-settings/_index.scss",
+      "default": "./src/styles/01-settings/_index.scss"
+    },
+    "./scss/tools": {
+      "import": "./src/styles/02-tools/_index.scss",
+      "require": "./src/styles/02-tools/_index.scss",
+      "default": "./src/styles/02-tools/_index.scss"
+    },
+    "./scss/generic": {
+      "import": "./src/styles/03-generic/_index.scss",
+      "require": "./src/styles/03-generic/_index.scss",
+      "default": "./src/styles/03-generic/_index.scss"
+    },
+    "./scss/elements": {
+      "import": "./src/styles/04-elements/_index.scss",
+      "require": "./src/styles/04-elements/_index.scss",
+      "default": "./src/styles/04-elements/_index.scss"
+    },
+    "./scss/objects": {
+      "import": "./src/styles/05-objects/_index.scss",
+      "require": "./src/styles/05-objects/_index.scss",
+      "default": "./src/styles/05-objects/_index.scss"
+    },
+    "./scss/components": {
+      "import": "./src/styles/06-components/_index.scss",
+      "require": "./src/styles/06-components/_index.scss",
+      "default": "./src/styles/06-components/_index.scss"
+    },
+    "./scss/utilities": {
+      "import": "./src/styles/99-utilities/_index.scss",
+      "require": "./src/styles/99-utilities/_index.scss",
+      "default": "./src/styles/99-utilities/_index.scss"
+    },
+    "./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"
     },
-    "./css": "./dist/atomix.css",
-    "./css/min": "./dist/atomix.min.css",
-    "./scss": "./src/styles/index.scss",
-    "./scss/settings": "./src/styles/01-settings/_index.scss",
-    "./scss/tools": "./src/styles/02-tools/_index.scss",
-    "./scss/generic": "./src/styles/03-generic/_index.scss",
-    "./scss/elements": "./src/styles/04-elements/_index.scss",
-    "./scss/objects": "./src/styles/05-objects/_index.scss",
-    "./scss/components": "./src/styles/06-components/_index.scss",
-    "./scss/utilities": "./src/styles/99-utilities/_index.scss",
-    "./themes/*": "./dist/themes/*.css",
-    "./themes/*.min": "./dist/themes/*.min.css",
     "./package.json": "./package.json"
   },
   "dependencies": {

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

@@ -45,6 +45,10 @@ const meta = {
       control: 'text',
       description: 'Content inside the accordion',
     },
+    glass: {
+      control: 'boolean',
+      description: 'Enable glass morphism effect',
+    },
   },
 } satisfies Meta<typeof Accordion>;
 
@@ -269,3 +273,136 @@ export const Controlled: Story = {
     },
   },
 };
+
+// Glass Variant
+export const Glass: Story = {
+  args: {
+    title: 'Glass Accordion',
+    children: <p>This accordion has a glass morphism effect applied.</p>,
+    glass: true,
+  },
+  render: (args) => (
+    <div
+      style={{
+        background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
+        padding: '2rem',
+        borderRadius: '12px',
+        minHeight: '300px',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+      }}
+    >
+      <div style={{ width: '100%', maxWidth: '500px' }}>
+        <Accordion {...args} />
+      </div>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: 'This story demonstrates an Accordion with glass morphism effect enabled against a gradient background.',
+      },
+    },
+  },
+};
+
+// Glass with Custom Settings
+export const GlassCustom: Story = {
+  args: {
+    title: 'Custom Glass Accordion',
+    children: <p>This accordion has custom glass morphism settings.</p>,
+    glass: {
+      displacementScale: 80,
+      blurAmount: 2,
+      saturation: 200,
+      aberrationIntensity: 0.8,
+      cornerRadius: 12,
+    },
+  },
+  render: (args) => (
+    <div
+      style={{
+        background: 'url(https://images.unsplash.com/photo-1660478481785-cb609142d9ab?q=80&w=2670&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D)',
+        backgroundSize: 'cover',
+        backgroundPosition: 'center',
+        padding: '2rem',
+        borderRadius: '12px',
+        minHeight: '400px',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+      }}
+    >
+      <div style={{ width: '100%', maxWidth: '500px' }}>
+        <Accordion {...args} />
+      </div>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: 'This story demonstrates an Accordion with custom glass morphism settings against a scenic background image.',
+      },
+    },
+  },
+};
+
+// Glass Accordion Group
+export const GlassGroup: Story = {
+  args: {
+    title: 'Glass Accordion Group',
+    children: <p>Group example with glass effect - see render function</p>,
+  },
+  render: () => (
+    <div
+      style={{
+        background: 'url(https://images.unsplash.com/photo-1587289087865-396fc357ef9e?q=80&w=2670&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D)',
+        backgroundSize: '200% 200%',
+        animation: 'gradient 15s ease infinite',
+        padding: '2rem',
+        borderRadius: '12px',
+        minHeight: '500px',
+      }}
+    >
+      <style>
+        {`
+          @keyframes gradient {
+            0% { background-position: 0% 50%; }
+            50% { background-position: 100% 50%; }
+            100% { background-position: 0% 50%; }
+          }
+        `}
+      </style>
+      <h2 style={{ color: 'white', textAlign: 'center', marginBottom: '2rem', textShadow: '0 2px 4px rgba(0,0,0,0.3)' }}>
+        Glass Accordion Group
+      </h2>
+      <div className="u-d-flex u-flex-column u-gap-3" style={{ width: '100%', maxWidth: '600px', margin: '0 auto' }}>
+        <Accordion title="First Glass Accordion" defaultOpen={true} glass>
+          <p>Content of the first glass accordion with beautiful glass morphism effect.</p>
+        </Accordion>
+
+        <Accordion title="Second Glass Accordion" glass>
+          <p>Content of the second glass accordion showcasing the glass effect.</p>
+        </Accordion>
+
+        <Accordion title="Third Glass Accordion" glass>
+          <p>Content of the third glass accordion with more content.</p>
+          <p>Additional paragraph to demonstrate scrolling and glass effects.</p>
+          <ul>
+            <li>Glass effect item 1</li>
+            <li>Glass effect item 2</li>
+            <li>Glass effect item 3</li>
+          </ul>
+        </Accordion>
+      </div>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: 'This story demonstrates multiple Accordions with glass morphism effects against an animated gradient background.',
+      },
+    },
+  },
+};

package/src/components/Accordion/Accordion.tsx

@@ -1,7 +1,8 @@
 import React, { ReactNode, useId } from 'react';
 import { ACCORDION } from '../../lib/constants/components';
 import { useAccordion } from '../../lib/composables/useAccordion';
-import { BaseComponentProps, IconPosition } from '../../lib/types/components';
+import { BaseComponentProps, IconPosition, AtomixGlassProps } from '../../lib/types/components';
+import { AtomixGlass } from '../AtomixGlass/AtomixGlass';
 
 /**
  * Accordion component for showing/hiding content panels
@@ -41,6 +42,12 @@ export interface AccordionProps extends BaseComponentProps {
    * Callback when open state changes (for controlled mode)
    */
   onOpenChange?: (open: boolean) => void;
+
+  /**
+   * Glass morphism effect for the accordion
+   * Can be a boolean to enable with default settings, or an object with AtomixGlassProps to customize the effect
+   */
+  glass?: AtomixGlassProps | boolean;
 }
 
 export const Accordion: React.FC<AccordionProps> = ({
@@ -53,6 +60,7 @@ export const Accordion: React.FC<AccordionProps> = ({
   iconPosition = 'right',
   icon,
   className = '',
+  glass,
 }) => {
   // Generate unique IDs for accessibility
   const instanceId = useId();
@@ -95,8 +103,8 @@ export const Accordion: React.FC<AccordionProps> = ({
     </i>
   );
 
-  return (
-    <div className={generateClassNames(className)}>
+  const accordionContent = (
+    <div className={generateClassNames(className) + (glass ? ' c-accordion--glass' : '')}>
       <button
         id={buttonId}
         className={generateHeaderClassNames()}
@@ -122,6 +130,28 @@ export const Accordion: React.FC<AccordionProps> = ({
       </div>
     </div>
   );
+
+  if (glass) {
+    // Default glass settings for accordions
+    const defaultGlassProps = {
+      displacementScale: 20,
+      blurAmount: 10,
+      saturation: 140,
+      aberrationIntensity: 0.5,
+      cornerRadius: 8,
+      mode: 'shader' as const,
+    };
+
+    const glassProps = glass === true ? defaultGlassProps : { ...defaultGlassProps, ...glass };
+
+    return (
+      <AtomixGlass {...glassProps}>
+        {accordionContent}
+      </AtomixGlass>
+    );
+  }
+
+  return accordionContent;
 };
 
 // Set display name for debugging