@shohojdhara/atomix 0.2.3 → 0.2.5

package/src/components/DatePicker/DatePicker.tsx

@@ -34,6 +34,7 @@ export const DatePicker = forwardRef<DatePickerRef, DatePickerProps>(
       placement = 'bottom-start',
       inputClassName = '',
       size = 'md',
+      style,
       glass,
       ...props
     },
@@ -464,7 +465,7 @@ export const DatePicker = forwardRef<DatePickerRef, DatePickerProps>(
     );
 
     return (
-      <div className={datepickerClassName} ref={datePickerRef} {...props}>
+      <div className={datepickerClassName} ref={datePickerRef} style={style} {...props}>
         {!inline && (
           <div className="c-datepicker__input-wrapper">
             <input
@@ -512,14 +513,7 @@ export const DatePicker = forwardRef<DatePickerRef, DatePickerProps>(
                 <AtomixGlass
                   {...(glass === true
                     ? {
-                        displacementScale: 50,
-                        blurAmount: 3,
-                        saturation: 160,
-                        aberrationIntensity: 0,
-                        cornerRadius: 12,
-                        overLight: false,
-                        elasticity: 0,
-                        mode: 'standard' as const,
+                        displacementScale: 20,
                       }
                     : glass)}
                 >

package/src/components/DatePicker/types.ts

@@ -150,6 +150,11 @@ export interface DatePickerProps {
    * @default false
    */
   glass?: boolean | AtomixGlassProps;
+
+  /**
+   * Custom style for the datepicker component
+   */
+  style?: React.CSSProperties;
 }
 
 export interface DatePickerRef {

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

@@ -371,12 +371,14 @@ export const GlassDropdown: Story = {
   },
   render: args => <InteractiveDropdown {...args} />,
   decorators: [
-    (Story) => (
-      <div style={{ 
-        background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)', 
-        minHeight: '100vh',
-        padding: '2rem'
-      }}>
+    Story => (
+      <div
+        style={{
+          background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
+          minHeight: '100vh',
+          padding: '2rem',
+        }}
+      >
         <Story />
       </div>
     ),
@@ -400,12 +402,14 @@ export const GlassDropdownCustom: Story = {
   },
   render: args => <InteractiveDropdown {...args} />,
   decorators: [
-    (Story) => (
-      <div style={{ 
-        background: 'linear-gradient(45deg, #f093fb 0%, #f5576c 100%)', 
-        minHeight: '100vh',
-        padding: '2rem'
-      }}>
+    Story => (
+      <div
+        style={{
+          background: 'linear-gradient(45deg, #f093fb 0%, #f5576c 100%)',
+          minHeight: '100vh',
+          padding: '2rem',
+        }}
+      >
         <Story />
       </div>
     ),
@@ -422,12 +426,14 @@ export const GlassDropdownWithIcons: Story = {
   },
   render: args => <InteractiveDropdown {...args} />,
   decorators: [
-    (Story) => (
-      <div style={{ 
-        background: 'linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)', 
-        minHeight: '100vh',
-        padding: '2rem'
-      }}>
+    Story => (
+      <div
+        style={{
+          background: 'linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)',
+          minHeight: '100vh',
+          padding: '2rem',
+        }}
+      >
         <Story />
       </div>
     ),
@@ -441,8 +447,7 @@ export const GlassAllVariants: Story = {
   parameters: {
     docs: {
       description: {
-        story:
-          'Glass morphism effect applied to dropdowns with all color variants.',
+        story: 'Glass morphism effect applied to dropdowns with all color variants.',
       },
     },
   },
@@ -458,11 +463,13 @@ export const GlassAllVariants: Story = {
     };
 
     return (
-      <div style={{ 
-        background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)', 
-        minHeight: '100vh',
-        padding: '2rem'
-      }}>
+      <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',

package/src/components/Dropdown/Dropdown.tsx

@@ -76,10 +76,15 @@ export const DropdownItem: React.FC<DropdownItemProps> = ({
     return (
       <li>
         {LinkComponent ? (
-          <LinkComponent {...linkProps}>
-            {icon && <span className="c-dropdown__menu-item-icon">{icon}</span>}
-            {children}
-          </LinkComponent>
+          (() => {
+            const Component = LinkComponent as React.ComponentType<any>;
+            return (
+              <Component {...linkProps}>
+                {icon && <span className="c-dropdown__menu-item-icon">{icon}</span>}
+                {children}
+              </Component>
+            );
+          })()
         ) : (
           <a {...linkProps}>
             {icon && <span className="c-dropdown__menu-item-icon">{icon}</span>}
@@ -139,6 +144,7 @@ export const Dropdown: React.FC<DropdownProps> = ({
   minWidth = DROPDOWN.DEFAULTS.MIN_WIDTH,
   variant,
   className = '',
+  style,
   glass,
   ...props
 }) => {
@@ -321,6 +327,7 @@ export const Dropdown: React.FC<DropdownProps> = ({
     <div
       ref={dropdownRef}
       className={dropdownClasses}
+      style={style}
       onMouseEnter={trigger === 'hover' ? handleHoverOpen : undefined}
       {...props}
     >
@@ -340,35 +347,26 @@ export const Dropdown: React.FC<DropdownProps> = ({
       <div
         ref={menuRef}
         id={dropdownId}
-        className={`c-dropdown__menu-wrapper c-dropdown__menu-wrapper--${placement} ${isOpen ? 'is-open' : ''}`}
+        className={`c-dropdown__menu-wrapper c-dropdown__menu-wrapper--${placement} ${isOpen ? 'is-open' : ''} ${glass ? 'is-glass' : ''}`}
         role="menu"
         aria-orientation="vertical"
         aria-hidden={!isOpen}
         onKeyDown={handleKeyDown}
       >
-        {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
-        )}
+        {glass
+          ? // Default glass settings for dropdowns
+            (() => {
+              const defaultGlassProps = {
+                displacementScale: 20,
+                elasticity: 0,
+              };
+
+              const glassProps =
+                glass === true ? defaultGlassProps : { ...defaultGlassProps, ...glass };
+
+              return <AtomixGlass {...glassProps}>{menuContent}</AtomixGlass>;
+            })()
+          : menuContent}
       </div>
     </div>
   );