@shohojdhara/atomix 0.2.1 → 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>
   );