@shohojdhara/atomix 0.2.2 → 0.2.3

package/src/components/DatePicker/readme.md

@@ -84,6 +84,7 @@ const RangeExample = () => {
 | `placement` | `string` | `'bottom-start'` | Placement of the dropdown calendar |
 | `inputClassName` | `string` | - | Additional class for the input |
 | `size` | `'sm' \| 'md' \| 'lg'` | `'md'` | Size of the input field |
+| `glass` | `boolean \| AtomixGlassProps` | `false` | Applies glass morphism effect to calendar dropdown |
 
 ## Ref API
 
@@ -103,4 +104,112 @@ datePickerRef.current.clear();
 
 // Focus the input
 datePickerRef.current.focus();
-``` 
+```
+
+## Glass Morphism Effect
+
+The DatePicker component supports glass morphism effects through the `glass` prop, which can be applied to the calendar dropdown for a modern, translucent appearance.
+
+### Basic Glass Effect
+
+```jsx
+import React, { useState } from 'react';
+import DatePicker from '../components/DatePicker';
+
+const GlassExample = () => {
+  const [selectedDate, setSelectedDate] = useState(null);
+  
+  return (
+    <div style={{ background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)', padding: '2rem' }}>
+      <DatePicker
+        value={selectedDate}
+        onChange={setSelectedDate}
+        placeholder="Select a date..."
+        glass={true}
+      />
+    </div>
+  );
+};
+```
+
+### Custom Glass Configuration
+
+```jsx
+import React, { useState } from 'react';
+import DatePicker from '../components/DatePicker';
+
+const CustomGlassExample = () => {
+  const [selectedDate, setSelectedDate] = useState(null);
+  
+  return (
+    <div style={{ background: 'linear-gradient(45deg, #f093fb 0%, #f5576c 100%)', padding: '2rem' }}>
+      <DatePicker
+        value={selectedDate}
+        onChange={setSelectedDate}
+        placeholder="Select a date..."
+        glass={{
+          displacementScale: 60,
+          blurAmount: 0,
+          saturation: 180,
+          aberrationIntensity: 2,
+          cornerRadius: 16,
+          overLight: false,
+          mode: 'polar',
+        }}
+      />
+    </div>
+  );
+};
+```
+
+### Glass with Date Range Selection
+
+```jsx
+import React, { useState } from 'react';
+import DatePicker from '../components/DatePicker';
+
+const GlassRangeExample = () => {
+  const [dateRange, setDateRange] = useState({ startDate: null, endDate: null });
+  
+  return (
+    <div style={{ background: 'linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)', padding: '2rem' }}>
+      <DatePicker
+        selectionMode="range"
+        startDate={dateRange.startDate}
+        endDate={dateRange.endDate}
+        onRangeChange={setDateRange}
+        placeholder="Select date range..."
+        glass={{
+          displacementScale: 45,
+          blurAmount: 0,
+          saturation: 160,
+          aberrationIntensity: 1.5,
+          cornerRadius: 14,
+          mode: 'prominent',
+        }}
+      />
+    </div>
+  );
+};
+```
+
+### 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.5` | Chromatic aberration intensity |
+| `cornerRadius` | `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 |
+
+### Best Practices for Glass DatePicker
+
+- Use glass effects with colorful or gradient backgrounds for best visual impact
+- Consider the `overLight` prop when using light backgrounds
+- The `polar` and `prominent` modes work well for date pickers with larger calendar dropdowns
+- Ensure sufficient contrast between the glass effect and background for accessibility

package/src/components/DatePicker/types.ts

@@ -1,4 +1,5 @@
 import React from 'react';
+import { AtomixGlassProps } from '../../lib/types/components';
 
 export type DatePickerViewMode = 'days' | 'months' | 'years';
 
@@ -142,6 +143,13 @@ export interface DatePickerProps {
    * @default "md"
    */
   size?: DatePickerSize;
+
+  /**
+   * Applies a glass morphism effect to the calendar dropdown.
+   * Can be a boolean to enable with default settings, or an object with AtomixGlassProps to customize the effect.
+   * @default false
+   */
+  glass?: boolean | AtomixGlassProps;
 }
 
 export interface DatePickerRef {

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

@@ -67,6 +67,10 @@ const meta: Meta<typeof Dropdown> = {
       control: 'boolean',
       description: 'Whether to close the dropdown when pressing the Escape key',
     },
+    glass: {
+      control: 'boolean',
+      description: 'Enable glass morphism effect',
+    },
   },
 };
 
@@ -356,3 +360,144 @@ export const AllVariants: Story = {
     );
   },
 };
+
+/**
+ * Glass morphism dropdown example.
+ */
+export const GlassDropdown: Story = {
+  args: {
+    ...Default.args,
+    glass: true,
+  },
+  render: args => <InteractiveDropdown {...args} />,
+  decorators: [
+    (Story) => (
+      <div style={{ 
+        background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)', 
+        minHeight: '100vh',
+        padding: '2rem'
+      }}>
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+/**
+ * Glass dropdown with custom settings.
+ */
+export const GlassDropdownCustom: Story = {
+  args: {
+    ...Default.args,
+    glass: {
+      displacementScale: 80,
+      blurAmount: 2,
+      saturation: 200,
+      aberrationIntensity: 1,
+      cornerRadius: 16,
+      mode: 'polar',
+    },
+  },
+  render: args => <InteractiveDropdown {...args} />,
+  decorators: [
+    (Story) => (
+      <div style={{ 
+        background: 'linear-gradient(45deg, #f093fb 0%, #f5576c 100%)', 
+        minHeight: '100vh',
+        padding: '2rem'
+      }}>
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+/**
+ * Glass dropdown with icons.
+ */
+export const GlassDropdownWithIcons: Story = {
+  args: {
+    ...WithIcons.args,
+    glass: true,
+  },
+  render: args => <InteractiveDropdown {...args} />,
+  decorators: [
+    (Story) => (
+      <div style={{ 
+        background: 'linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)', 
+        minHeight: '100vh',
+        padding: '2rem'
+      }}>
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+/**
+ * Glass dropdown with all variants.
+ */
+export const GlassAllVariants: Story = {
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Glass morphism effect applied to dropdowns with all color variants.',
+      },
+    },
+  },
+  render: () => {
+    const [openDropdown, setOpenDropdown] = useState<string | null>(null);
+
+    const handleOpenChange = (variant: string, isOpen: boolean) => {
+      if (isOpen) {
+        setOpenDropdown(variant);
+      } else if (openDropdown === variant) {
+        setOpenDropdown(null);
+      }
+    };
+
+    return (
+      <div style={{ 
+        background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)', 
+        minHeight: '100vh',
+        padding: '2rem'
+      }}>
+        <div className="u-d-flex u-flex-wrap u-gap-3">
+          {[
+            'primary',
+            'secondary',
+            'tertiary',
+            'success',
+            'info',
+            'warning',
+            'error',
+            'light',
+            'dark',
+          ].map(color => (
+            <Dropdown
+              key={color}
+              variant={color as ThemeColor}
+              trigger="click"
+              isOpen={openDropdown === color}
+              onOpenChange={isOpen => handleOpenChange(color, isOpen)}
+              glass={true}
+              children={
+                <button className={`c-btn c-btn--${color}`}>
+                  {color} <Icon name="CaretDown" className="c-dropdown__toggle-icon" size="sm" />
+                </button>
+              }
+              menu={
+                <>
+                  <DropdownItem>Menu item 1</DropdownItem>
+                  <DropdownItem>Menu item 2</DropdownItem>
+                  <DropdownItem>Menu item 3</DropdownItem>
+                </>
+              }
+            />
+          ))}
+        </div>
+      </div>
+    );
+  },
+};

package/src/components/Dropdown/Dropdown.tsx

@@ -1,5 +1,6 @@
 import React, { useRef, useState, useCallback, createContext, useContext, useEffect } from 'react';
 import { DROPDOWN } from '../../lib/constants/components';
+import { AtomixGlass } from '../AtomixGlass/AtomixGlass';
 import type {
   DropdownProps,
   DropdownItemProps,
@@ -138,6 +139,7 @@ export const Dropdown: React.FC<DropdownProps> = ({
   minWidth = DROPDOWN.DEFAULTS.MIN_WIDTH,
   variant,
   className = '',
+  glass,
   ...props
 }) => {
   // Set up controlled vs uncontrolled state
@@ -294,6 +296,7 @@ export const Dropdown: React.FC<DropdownProps> = ({
     trigger === 'click' ? 'c-dropdown--onclick' : '',
     variant ? `c-dropdown--${variant}` : '',
     isOpen ? 'is-open' : '',
+    glass ? 'c-dropdown--glass' : '',
     className,
   ]
     .filter(Boolean)
@@ -306,6 +309,14 @@ export const Dropdown: React.FC<DropdownProps> = ({
     menuStyleProps.minWidth = typeof minWidth === 'number' ? `${minWidth}px` : minWidth;
   }
 
+  const menuContent = (
+    <div className="c-dropdown__menu-inner" style={menuStyleProps}>
+      <DropdownContext.Provider value={{ isOpen, close, id: dropdownId, trigger }}>
+        <ul className={`c-dropdown__menu ${glass ? 'c-dropdown__menu--glass' : ''}`}>{menu}</ul>
+      </DropdownContext.Provider>
+    </div>
+  );
+
   return (
     <div
       ref={dropdownRef}
@@ -335,11 +346,29 @@ export const Dropdown: React.FC<DropdownProps> = ({
         aria-hidden={!isOpen}
         onKeyDown={handleKeyDown}
       >
-        <div className="c-dropdown__menu-inner" style={menuStyleProps}>
-          <DropdownContext.Provider value={{ isOpen, close, id: dropdownId, trigger }}>
-            <ul className="c-dropdown__menu">{menu}</ul>
-          </DropdownContext.Provider>
-        </div>
+        {glass ? (
+          // Default glass settings for dropdowns
+          (() => {
+            const defaultGlassProps = {
+              displacementScale: 60,
+              blurAmount: 1,
+              saturation: 160,
+              aberrationIntensity: 0.5,
+              cornerRadius: 12,
+              mode: 'shader' as const,
+            };
+
+            const glassProps = glass === true ? defaultGlassProps : { ...defaultGlassProps, ...glass };
+
+            return (
+              <AtomixGlass {...glassProps} style={{position: 'absolute', width: '100%', height: '100%'}}>
+                {menuContent}
+              </AtomixGlass>
+            );
+          })()
+        ) : (
+          menuContent
+        )}
       </div>
     </div>
   );

package/src/components/Form/Checkbox.stories.tsx

@@ -32,6 +32,10 @@ const meta = {
       control: 'boolean',
       description: 'Whether the checkbox is in indeterminate state',
     },
+    glass: {
+      control: 'boolean',
+      description: 'Enable glass morphism effect',
+    },
   },
 } satisfies Meta<typeof Checkbox>;
 
@@ -74,3 +78,100 @@ export const WithoutLabel: Story = {
     ariaLabel: 'Checkbox without visible label',
   },
 };
+
+// Glass variant
+export const Glass: Story = {
+  args: {
+    label: 'Glass Checkbox',
+    glass: true,
+  },
+  render: (args) => (
+    <div
+      style={{
+        background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
+        padding: '2rem',
+        borderRadius: '12px',
+        minHeight: '200px',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+      }}
+    >
+      <Checkbox {...args} />
+    </div>
+  ),
+};
+
+// Glass with custom settings
+export const GlassCustom: Story = {
+  args: {
+    label: 'Custom Glass Checkbox',
+    glass: {
+      displacementScale: 80,
+      blurAmount: 2,
+      saturation: 200,
+      aberrationIntensity: 0.8,
+      cornerRadius: 12,
+    },
+  },
+  render: (args) => (
+    <div
+      style={{
+        background: 'url(https://images.unsplash.com/photo-1506905925346-21bda4d32df4?ixlib=rb-4.0.3&auto=format&fit=crop&w=1000&q=80)',
+        backgroundSize: 'cover',
+        backgroundPosition: 'center',
+        padding: '2rem',
+        borderRadius: '12px',
+        minHeight: '200px',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+      }}
+    >
+      <Checkbox {...args} />
+    </div>
+  ),
+};
+
+// Glass states
+export const GlassStates: Story = {
+  render: () => (
+    <div
+      style={{
+        background: 'linear-gradient(45deg, #ff6b6b, #4ecdc4, #45b7d1, #96ceb4, #feca57)',
+        backgroundSize: '400% 400%',
+        animation: 'gradient 15s ease infinite',
+        padding: '2rem',
+        borderRadius: '12px',
+        minHeight: '400px',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+      }}
+    >
+      <style>
+        {`
+          @keyframes gradient {
+            0% { background-position: 0% 50%; }
+            50% { background-position: 100% 50%; }
+            100% { background-position: 0% 50%; }
+          }
+        `}
+      </style>
+      <div>
+        <h3 style={{ color: 'white', marginBottom: '2rem', textAlign: 'center', textShadow: '0 2px 4px rgba(0,0,0,0.5)' }}>
+          Glass Checkbox States
+        </h3>
+        <div className="u-d-flex u-flex-column u-gap-3">
+          <Checkbox label="Glass Checkbox" glass />
+          <Checkbox label="Glass Checked" checked glass />
+          <Checkbox label="Glass Disabled" disabled glass />
+          <Checkbox label="Glass Disabled and Checked" disabled checked glass />
+          <Checkbox label="Glass Valid" valid checked glass />
+          <Checkbox label="Glass Invalid" invalid glass />
+          <Checkbox label="Glass Indeterminate" indeterminate glass />
+        </div>
+      </div>
+    </div>
+  ),
+};

package/src/components/Form/Checkbox.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { CheckboxProps } from '../../lib/types/components';
 import { useCheckbox } from '../../lib/composables/useCheckbox';
+import { AtomixGlass } from '../AtomixGlass/AtomixGlass';
 
 /**
  * Checkbox - A component for checkbox inputs
@@ -20,6 +21,7 @@ export const Checkbox: React.FC<CheckboxProps> = ({
   indeterminate = false,
   ariaLabel,
   ariaDescribedBy,
+  glass,
 }) => {
   const { generateCheckboxClass, checkboxRef } = useCheckbox({
     indeterminate,
@@ -29,14 +31,14 @@ export const Checkbox: React.FC<CheckboxProps> = ({
   });
 
   const checkboxClass = generateCheckboxClass({
-    className,
+    className: `${className} ${glass ? 'c-checkbox--glass' : ''}`.trim(),
     disabled,
     invalid,
     valid,
     indeterminate,
   });
 
-  return (
+  const checkboxContent = (
     <div className={checkboxClass}>
       <input
         ref={checkboxRef}
@@ -60,6 +62,28 @@ export const Checkbox: React.FC<CheckboxProps> = ({
       )}
     </div>
   );
+
+  if (glass) {
+    // Default glass settings for checkboxes
+    const defaultGlassProps = {
+      displacementScale: 40,
+      blurAmount: 1,
+      saturation: 160,
+      aberrationIntensity: 0.3,
+      cornerRadius: 6,
+      mode: 'shader' as const,
+    };
+
+    const glassProps = glass === true ? defaultGlassProps : { ...defaultGlassProps, ...glass };
+
+    return (
+      <AtomixGlass {...glassProps}>
+        {checkboxContent}
+      </AtomixGlass>
+    );
+  }
+
+  return checkboxContent;
 };
 
 export type { CheckboxProps };

package/src/components/Form/Input.stories.tsx

@@ -39,6 +39,10 @@ const meta = {
       control: 'text',
       description: 'Placeholder text',
     },
+    glass: {
+      control: 'boolean',
+      description: 'Enable glass morphism effect',
+    },
   },
 } satisfies Meta<typeof Input>;
 
@@ -104,3 +108,123 @@ export const States: Story = {
     </div>
   ),
 };
+
+// Glass Effect
+export const Glass: Story = {
+  args: {
+    placeholder: 'Glass Input',
+    glass: true,
+  },
+  render: (args) => (
+    <div
+      style={{
+        background: 'url(https://cdn.pixabay.com/photo/2021/11/13/08/50/athens-6790780_1280.jpg)',
+        padding: '2rem',
+        borderRadius: '12px',
+        backgroundSize: 'cover',
+        backgroundPosition: 'center',
+        minHeight: '200px',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+      }}
+    >
+      <Input {...args} />
+    </div>
+  ),
+};
+
+// Glass Variants
+export const GlassVariants: Story = {
+  render: () => (
+    <div
+      style={{
+        background: 'url(https://cdn.pixabay.com/photo/2021/11/13/08/50/athens-6790780_1280.jpg)',
+        padding: '2rem',
+        borderRadius: '12px',
+        backgroundSize: 'cover',
+        backgroundPosition: 'center',
+        minHeight: '200px',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+      }}
+    >
+      <h3 style={{ color: 'white', marginBottom: '1rem', fontSize: '1.2rem' }}>
+        Glass Input Variants
+      </h3>
+      <div className="u-d-flex u-flex-column u-gap-3" style={{ width: '300px' }}>
+        <Input placeholder="Small Glass" size="sm" glass />
+        <Input placeholder="Medium Glass" size="md" glass />
+        <Input placeholder="Large Glass" size="lg" glass />
+        <Input placeholder="Primary Glass" variant="primary" glass />
+        <Input placeholder="Success Glass" variant="success" glass />
+        <Input placeholder="Custom Glass" glass={{
+          displacementScale: 80,
+          blurAmount: 2,
+          saturation: 200,
+          aberrationIntensity: 2,
+          cornerRadius: 12,
+        }} />
+      </div>
+    </div>
+  ),
+};
+
+// Glass Showcase
+export const GlassShowcase: Story = {
+  render: () => (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: '2rem' }}>
+      {/* Basic Glass */}
+      <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',
+          backgroundSize: 'cover',
+          backgroundPosition: 'center',
+          minHeight: '200px',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+        }}
+      >
+        <h3 style={{ color: 'white', marginBottom: '1rem', fontSize: '1.2rem' }}>
+          Glass Input on Background
+        </h3>
+        <div className="u-d-flex u-flex-column u-gap-3" style={{ width: '300px' }}>
+          <Input placeholder="Enter your name" glass />
+          <Input type="email" placeholder="Enter your email" glass />
+          <Input type="password" placeholder="Enter password" glass />
+        </div>
+      </div>
+
+      {/* Different Glass Modes */}
+      <div
+        style={{
+          background: 'url(https://cdn.pixabay.com/photo/2021/11/13/08/50/athens-6790780_1280.jpg)',
+          padding: '2rem',
+          borderRadius: '12px',
+          backgroundSize: 'cover',
+          backgroundPosition: 'center',
+          minHeight: '200px',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+        }}
+      >
+        <h3 style={{ color: 'white', marginBottom: '1rem', fontSize: '1.2rem' }}>
+          Glass Modes
+        </h3>
+        <div className="u-d-flex u-flex-column u-gap-3" style={{ width: '300px' }}>
+          <Input placeholder="Standard Mode" glass={{ mode: 'standard' }} />
+          <Input placeholder="Polar Mode" glass={{ mode: 'polar' }} />
+          <Input placeholder="Prominent Mode" glass={{ mode: 'prominent' }} />
+          <Input placeholder="Shader Mode" glass={{ mode: 'shader' }} />
+        </div>
+      </div>
+    </div>
+  ),
+};