@shohojdhara/atomix 0.2.1 → 0.2.3

package/src/components/Button/Button.stories.tsx

@@ -52,6 +52,10 @@ const meta = {
       control: 'boolean',
       description: 'Whether the button should have a fully rounded (pill) shape',
     },
+    glass: {
+      control: { type: 'boolean' },
+      description: 'Apply glass morphism effect to the button',
+    },
   },
 } satisfies Meta<typeof Button>;
 
@@ -310,3 +314,344 @@ export const RoundedVariants: Story = {
     </div>
   ),
 };
+
+// Glass Effect Buttons
+export const GlassEffect: Story = {
+  args: {
+    label: 'Glass Button',
+    variant: 'primary',
+    glass: true,
+  },
+  decorators: [
+    Story => (
+      <div
+        style={{
+          background: 'url(https://cdn.pixabay.com/photo/2022/10/02/17/23/mushroom-7494046_1280.jpg)',
+          backgroundSize: 'cover',
+          backgroundPosition: 'center',
+          padding: '10rem 25rem',
+          borderRadius: '12px',
+        }}
+      >
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export const GlassEffectCustomized: Story = {
+  args: {
+    label: 'Customized Glass',
+    variant: 'secondary',
+    glass: {
+      displacementScale: 60,
+      blurAmount: 2,
+      saturation: 180,
+      aberrationIntensity: 2,
+      cornerRadius: 12,
+      overLight: false,
+      mode: 'polar' as const,
+    },
+  },
+  decorators: [
+    Story => (
+      <div
+        style={{
+          background:
+            'url(https://cdn.pixabay.com/photo/2022/10/02/17/23/mushroom-7494046_1280.jpg)',
+          backgroundSize: 'cover',
+          backgroundPosition: 'center',
+          padding: '25rem',
+          borderRadius: '12px',
+        }}
+      >
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export const GlassVariants: Story = {
+  args: {
+    label: 'Glass Button',
+    variant: 'primary',
+    glass: true,
+  },
+  render: () => (
+    <div
+      style={{
+        background:
+          'url(https://cdn.pixabay.com/photo/2021/06/14/22/46/milky-way-6337038_1280.jpg)',
+        backgroundSize: 'cover',
+        backgroundPosition: 'center',
+        padding: '25rem',
+        borderRadius: '12px',
+      }}
+    >
+      <div className="u-d-flex u-flex-wrap u-gap-2">
+        <Button label="Primary" variant="primary" glass />
+        <Button label="Secondary" variant="secondary" glass />
+        <Button label="Success" variant="success" glass />
+        <Button label="Info" variant="info" glass />
+        <Button label="Warning" variant="warning" glass />
+        <Button label="Error" variant="error" glass />
+        <Button label="Light" variant="light" glass />
+        <Button label="Dark" variant="dark" glass />
+      </div>
+    </div>
+  ),
+};
+
+export const GlassOutlineVariants: Story = {
+  args: {
+    label: 'Glass Button',
+    variant: 'outline-primary',
+    glass: true,
+  },
+  render: () => (
+    <div
+      style={{
+        background:
+          'url(https://cdn.pixabay.com/photo/2018/08/15/13/10/new-year-background-3608029_1280.jpg)',
+        backgroundSize: 'cover',
+        backgroundPosition: 'center',
+        padding: '20rem 10rem',
+        borderRadius: '12px',
+      }}
+    >
+      <div className="u-d-flex u-flex-wrap u-gap-2">
+        <Button label="Outline Primary" variant="outline-primary" glass />
+        <Button label="Outline Secondary" variant="outline-secondary" glass />
+        <Button label="Outline Success" variant="outline-success" glass />
+        <Button label="Outline Info" variant="outline-info" glass />
+        <Button label="Outline Warning" variant="outline-warning" glass />
+        <Button label="Outline Error" variant="outline-error" glass />
+        <Button label="Outline Light" variant="outline-light" glass />
+        <Button label="Outline Dark" variant="outline-dark" glass />
+      </div>
+    </div>
+  ),
+};
+
+export const GlassSizes: Story = {
+  args: {
+    label: 'Glass Button',
+    variant: 'primary',
+    glass: true,
+  },
+  render: () => (
+    <div
+      style={{
+        background:
+          'url(https://cdn.pixabay.com/photo/2020/12/15/01/43/street-5832394_1280.jpg)',
+        backgroundSize: 'cover',
+        backgroundPosition: 'center',
+        padding: '10rem 20rem',
+        borderRadius: '12px',
+      }}
+    >
+      <div className="u-d-flex u-align-items-center u-gap-2">
+        <Button label="Small Glass" variant="primary" size="sm" glass={{cornerRadius: 8}} />
+        <Button label="Medium Glass" variant="primary" size="md" glass />
+        <Button label="Large Glass" variant="primary" size="lg" glass />
+      </div>
+    </div>
+  ),
+};
+
+export const GlassWithIcons: Story = {
+  args: {
+    label: 'Glass Button',
+    variant: 'primary',
+    glass: true,
+    icon: <Icon />,
+  },
+  render: () => (
+    <div
+      style={{
+        background:
+          'url(https://cdn.pixabay.com/photo/2020/12/15/01/43/street-5832394_1280.jpg)',
+        backgroundSize: 'cover',
+        backgroundPosition: 'center',
+        padding: '25rem',
+        borderRadius: '12px',
+      }}
+    >
+      <div className="u-d-flex u-flex-wrap u-gap-2">
+        <Button label="With Icon" variant="primary" icon={<Icon />} glass={{cornerRadius: 12}} />
+        <Button label="Icon Only" variant="error" icon={<Icon />} iconOnly glass={{cornerRadius: 12}} />
+        <Button label="Rounded Glass" variant="success" icon={<Icon />} rounded glass={{cornerRadius: 24}} />
+        <Button label="Rounded Icon" variant="info" icon={<Icon />} iconOnly rounded glass={{cornerRadius: 50}} />
+      </div>
+    </div>
+  ),
+};
+
+export const GlassRounded: Story = {
+  args: {
+    label: 'Rounded Glass',
+    variant: 'primary',
+    glass: {
+      cornerRadius: 22,
+    },
+    rounded: true,
+  },
+  decorators: [
+    Story => (
+      <div
+        style={{
+          background:
+            'url(https://cdn.pixabay.com/photo/2020/12/15/01/43/street-5832394_1280.jpg)',
+          backgroundSize: 'cover',
+          backgroundPosition: 'center',
+          padding: '25rem',
+          borderRadius: '12px',
+        }}
+      >
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+// Comprehensive Glass Showcase
+export const GlassShowcase: Story = {
+  args: {
+    label: 'Glass Button',
+    variant: 'primary',
+    glass: true,
+  },
+  render: () => (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: '2rem' }}>
+      {/* Primary Glass Variants */}
+      <div
+        style={{
+          background:
+            'url(https://cdn.pixabay.com/photo/2021/11/13/08/50/athens-6790780_1280.jpg)',
+          backgroundSize: 'cover',
+          backgroundPosition: 'center',
+          padding: '2rem',
+          borderRadius: '12px',
+        }}
+      >
+        <h3 style={{ color: 'white', marginBottom: '1rem', fontSize: '1.2rem' }}>
+          Primary Glass Variants
+        </h3>
+        <div className="u-d-flex u-flex-wrap u-gap-2 u-align-items-center">
+          <Button label="Small Glass" variant="primary" size="sm" glass={{cornerRadius: 8}} />
+          <Button label="Medium Glass" variant="primary" size="md" glass />
+          <Button label="Large Glass" variant="primary" size="lg" glass />
+          <Button label="With Icon" variant="primary" icon={<Icon />} glass />
+          <Button label="Icon Only" variant="primary" icon={<Icon />} iconOnly glass />
+          <Button label="Rounded" variant="primary" rounded glass={{cornerRadius: 24}} />
+        </div>
+      </div>
+
+      {/* Outline Glass Variants */}
+      <div
+        style={{
+          background:
+            'url(https://cdn.pixabay.com/photo/2025/09/18/23/32/pattern-9842070_1280.png)',
+          backgroundSize: 'cover',
+          backgroundPosition: 'center',
+          padding: '2rem',
+          borderRadius: '12px',
+        }}
+      >
+        <h3 style={{ color: 'white', marginBottom: '1rem', fontSize: '1.2rem' }}>
+          Outline Glass Variants
+        </h3>
+        <div className="u-d-flex u-flex-wrap u-gap-2">
+          <Button label="Outline Primary" variant="outline-primary" glass />
+          <Button label="Outline Success" variant="outline-success" glass />
+          <Button label="Outline Warning" variant="outline-warning" glass />
+          <Button label="Outline Error" variant="outline-error" glass />
+        </div>
+      </div>
+
+      {/* Custom Glass Configuration */}
+      <div
+        style={{
+          background:
+            'url(https://cdn.pixabay.com/photo/2019/09/29/17/21/greece-4513857_1280.jpg)',
+          backgroundSize: 'cover',
+          backgroundPosition: 'center',
+          padding: '2rem',
+          borderRadius: '12px',
+        }}
+      >
+        <h3 style={{ color: 'white', marginBottom: '1rem', fontSize: '1.2rem' }}>
+          Custom Glass Effects
+        </h3>
+        <div className="u-d-flex u-flex-wrap u-gap-2">
+          <Button
+            label="Polar Mode"
+            variant="secondary"
+            glass={{
+              displacementScale: 60,
+              blurAmount: 2,
+              saturation: 180,
+              aberrationIntensity: 2,
+              cornerRadius: 12,
+              mode: 'polar' as const,
+            }}
+          />
+          <Button
+            label="Prominent Mode"
+            variant="info"
+            glass={{
+              displacementScale: 80,
+              blurAmount: 1,
+              saturation: 200,
+              aberrationIntensity: 3,
+              cornerRadius: 12,
+              mode: 'prominent' as const,
+            }}
+          />
+          <Button
+            label="Shader Mode"
+            variant="success"
+            glass={{
+              displacementScale: 50,
+              blurAmount: 0,
+              saturation: 140,
+              aberrationIntensity: 1,
+              cornerRadius: 12,
+              mode: 'shader' as const,
+            }}
+          />
+        </div>
+      </div>
+
+      {/* Light Background */}
+      <div
+        style={{
+          background:
+            'url(https://cdn.pixabay.com/photo/2019/09/29/17/21/greece-4513852_1280.jpg)',
+          backgroundSize: 'cover',
+          backgroundPosition: 'center',
+          padding: '2rem',
+          borderRadius: '12px',
+        }}
+      >
+        <h3 style={{ color: '#333', marginBottom: '1rem', fontSize: '1.2rem' }}>
+          Light Background
+        </h3>
+        <div className="u-d-flex u-flex-wrap u-gap-2">
+          <Button label="Light Variant" variant="light" glass />
+          <Button label="Outline Light" variant="outline-light" glass />
+          <Button label="Dark on Light" variant="dark" glass />
+          <Button
+            label="Over Light"
+            variant="primary"
+            glass={{
+              overLight: true,
+              displacementScale: 45,
+              saturation: 120,
+            }}
+          />
+        </div>
+      </div>
+    </div>
+  ),
+};

package/src/components/Button/Button.tsx

@@ -1,6 +1,7 @@
 import { ElementType, forwardRef } from 'react';
 import { useButton } from '../../lib/composables/useButton';
 import { ButtonProps } from '../../lib/types/components';
+import { AtomixGlass } from '../AtomixGlass/AtomixGlass';
 
 export type ButtonAsProp = {
   as?: ElementType;
@@ -23,6 +24,7 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps & ButtonAsProp>(
       rounded = false,
       className = '',
       as: Component = 'button',
+      glass,
       ...props
     },
     ref
@@ -32,6 +34,7 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps & ButtonAsProp>(
       size,
       disabled,
       rounded,
+      glass,
     });
 
     const buttonClass = generateButtonClass({
@@ -40,9 +43,13 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps & ButtonAsProp>(
       disabled,
       rounded,
       iconOnly,
+      glass,
       className,
     });
 
+    // Custom styles for glass effect
+    const glassStyles = glass ? {} : {};
+
     // Handle the case when the button is rendered as a link or another component
     const buttonProps = {
       ref,
@@ -50,15 +57,40 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps & ButtonAsProp>(
       onClick: handleClick(onClick),
       disabled,
       'aria-disabled': disabled,
+      style: glass ? glassStyles : undefined,
       ...props,
     };
 
-    return (
-      <Component {...buttonProps}>
+    const buttonContent = (
+      <>
         {icon && <span className="c-btn__icon">{icon}</span>}
         {!iconOnly && <span className="c-btn__label">{label || children}</span>}
-      </Component>
+      </>
     );
+
+    if (glass) {
+      // Default glass settings for buttons
+      const defaultGlassProps = {
+        displacementScale: 80,
+        blurAmount: 1,
+        saturation: 200,
+        aberrationIntensity: 1,
+        cornerRadius: 12,
+        mode: 'shader' as const,
+        mouseContainer: ref,
+        onclick: ()=>{}
+      };
+
+      const glassProps = glass === true ? defaultGlassProps : { ...defaultGlassProps, ...glass };
+
+      return (
+        <AtomixGlass {...glassProps}>
+          <Component {...buttonProps}>{buttonContent}</Component>
+        </AtomixGlass>
+      );
+    }
+
+    return <Component {...buttonProps}>{buttonContent}</Component>;
   }
 );
 

package/src/components/Button/README.md

@@ -0,0 +1,216 @@
+# Button Component
+
+A versatile button component that supports various styles, sizes, states, and a modern glass morphism effect.
+
+## Features
+
+- Multiple variants (primary, secondary, success, info, warning, error, light, dark)
+- Outline variants for all theme colors
+- Three sizes (small, medium, large)
+- Icon support with icon-only mode
+- Rounded (pill) shape option
+- Glass morphism effect
+- Disabled state support
+- Customizable as different HTML elements
+
+## Basic Usage
+
+```tsx
+import { Button } from '@shohojdhara/atomix';
+
+// Basic button
+<Button label="Click me" variant="primary" />
+
+// Button with icon
+<Button label="Save" variant="success" icon={<SaveIcon />} />
+
+// Icon-only button
+<Button label="Delete" variant="error" icon={<TrashIcon />} iconOnly />
+```
+
+## Glass Morphism Effect
+
+The Button component supports glass morphism effects through the `glass` prop, which creates a modern, translucent appearance perfect for overlaying on backgrounds.
+
+### Basic Glass Effect
+
+```tsx
+const GlassExample = () => (
+  <div style={{ background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)', padding: '2rem' }}>
+    <Button 
+      label="Glass Button" 
+      variant="primary" 
+      glass={true}
+    />
+  </div>
+);
+```
+
+### Custom Glass Configuration
+
+```tsx
+const CustomGlassExample = () => (
+  <div style={{ background: 'linear-gradient(45deg, #f093fb 0%, #f5576c 100%)', padding: '2rem' }}>
+    <Button
+      label="Customized Glass"
+      variant="secondary"
+      glass={{
+        displacementScale: 60,
+        blurAmount: 2,
+        saturation: 180,
+        aberrationIntensity: 2,
+        cornerRadius: 16,
+        overLight: false,
+        mode: 'polar'
+      }}
+    />
+  </div>
+);
+```
+
+### Glass with Different Variants
+
+```tsx
+const GlassVariantsExample = () => (
+  <div style={{ background: 'linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)', padding: '2rem' }}>
+    <Button label="Primary Glass" variant="primary" glass />
+    <Button label="Outline Glass" variant="outline-primary" glass />
+    <Button label="Glass with Icon" variant="success" icon={<Icon />} glass />
+    <Button label="Rounded Glass" variant="info" rounded glass />
+  </div>
+);
+```
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `label` | `string` | - | Button text content |
+| `children` | `ReactNode` | - | Alternative to label for complex content |
+| `variant` | `Variant` | `'primary'` | Button visual style |
+| `size` | `'sm' \| 'md' \| 'lg'` | `'md'` | Button size |
+| `disabled` | `boolean` | `false` | Whether button is disabled |
+| `icon` | `ReactNode` | - | Icon element to display |
+| `iconOnly` | `boolean` | `false` | Show only icon, hide label |
+| `rounded` | `boolean` | `false` | Make button fully rounded (pill shape) |
+| `onClick` | `() => void` | - | Click event handler |
+| `className` | `string` | - | Additional CSS classes |
+| `as` | `ElementType` | `'button'` | HTML element or component to render as |
+| `glass` | `boolean \| AtomixGlassProps` | `false` | Glass morphism effect |
+
+### Glass Props
+
+When `glass` is an object, it accepts the same props as the `AtomixGlass` component:
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `displacementScale` | `number` | `40` | Displacement scale for the glass effect |
+| `blurAmount` | `number` | `0` | Blur amount for the backdrop |
+| `saturation` | `number` | `160` | Saturation percentage for the backdrop |
+| `aberrationIntensity` | `number` | `1` | Chromatic aberration intensity |
+| `cornerRadius` | `number` | `8` | Corner radius in pixels |
+| `overLight` | `boolean` | `false` | Whether the glass is over a light background |
+| `mode` | `'standard' \| 'polar' \| 'prominent' \| 'shader'` | `'standard'` | Glass effect mode |
+
+## Variants
+
+### Standard Variants
+- `primary` - Main call-to-action buttons
+- `secondary` - Secondary actions
+- `success` - Positive actions (save, confirm)
+- `info` - Informational actions
+- `warning` - Caution actions
+- `error` - Destructive actions (delete, cancel)
+- `light` - Light theme variant
+- `dark` - Dark theme variant
+
+### Outline Variants
+- `outline-primary`
+- `outline-secondary`
+- `outline-success`
+- `outline-info`
+- `outline-warning`
+- `outline-error`
+- `outline-light`
+- `outline-dark`
+
+### Special Variants
+- `link` - Styled as an underlined link
+
+## Sizes
+
+- `sm` - Small button (compact spacing)
+- `md` - Medium button (default size)
+- `lg` - Large button (generous spacing)
+
+## Advanced Usage
+
+### As Different Elements
+
+```tsx
+// Render as link
+<Button 
+  as="a" 
+  href="/dashboard" 
+  label="Go to Dashboard" 
+  variant="primary" 
+/>
+
+// Render as custom component (e.g., React Router Link)
+<Button 
+  as={Link} 
+  to="/profile" 
+  label="View Profile" 
+  variant="secondary" 
+/>
+```
+
+### Complex Content
+
+```tsx
+<Button variant="primary" glass>
+  <span>Custom Content</span>
+  <BadgeIcon />
+</Button>
+```
+
+## Best Practices
+
+### Glass Effect Usage
+1. **Use with backgrounds**: Glass effect works best when placed over background images or colorful backgrounds
+2. **Consider contrast**: Ensure text remains readable over the background
+3. **Performance**: Use glass effect sparingly on pages with many interactive elements
+4. **Accessibility**: Test with screen readers and keyboard navigation
+
+### General Usage
+1. Use `primary` variant for main actions
+2. Use `outline` variants when you need a subtler appearance
+3. Consider using `iconOnly` buttons for repetitive actions in toolbars
+4. Use `rounded` variant for modern, friendly interfaces
+5. Always provide meaningful `label` text for accessibility, even with `iconOnly` buttons
+
+## Accessibility
+
+- Buttons include proper ARIA attributes
+- Disabled state is communicated to screen readers
+- Icon-only buttons should have descriptive labels
+- Keyboard navigation is fully supported
+- Glass effects don't interfere with accessibility features
+
+## Styling
+
+The Button component uses CSS custom properties for theming:
+
+```css
+.c-btn {
+  --atomix-btn-padding-x: /* horizontal padding */
+  --atomix-btn-padding-y: /* vertical padding */
+  --atomix-btn-font-size: /* font size */
+  --atomix-btn-color: /* text color */
+  --atomix-btn-bg: /* background color */
+  --atomix-btn-border-color: /* border color */
+  --atomix-btn-border-radius: /* corner radius */
+}
+```
+
+Glass buttons automatically adjust these properties for optimal appearance with the glass effect.