@shohojdhara/atomix 0.2.1 → 0.2.3

package/src/lib/types/components.ts

@@ -1,4 +1,47 @@
 import { ReactNode } from 'react';
+import { AtomixGlass } from '../../components/AtomixGlass/AtomixGlass';
+
+/**
+ * AtomixGlass component props interface
+ */
+export interface AtomixGlassProps {
+  children: React.ReactNode;
+  displacementScale?: number;
+  blurAmount?: number;
+  saturation?: number;
+  aberrationIntensity?: number;
+  elasticity?: number;
+  cornerRadius?: number;
+  globalMousePos?: { x: number; y: number };
+  mouseOffset?: { x: number; y: number };
+  mouseContainer?: React.RefObject<HTMLElement | null> | null;
+  className?: string;
+  padding?: string;
+  style?: React.CSSProperties;
+  overLight?: boolean;
+  mode?: 'standard' | 'polar' | 'prominent' | 'shader';
+  onClick?: () => void;
+
+  /**
+   * Accessibility props
+   */
+  'aria-label'?: string;
+  'aria-describedby'?: string;
+  role?: string;
+  tabIndex?: number;
+
+  /**
+   * Performance and accessibility options
+   */
+  reducedMotion?: boolean;
+  highContrast?: boolean;
+  disableEffects?: boolean;
+
+  /**
+   * Performance monitoring
+   */
+  enablePerformanceMonitoring?: boolean;
+}
 
 /**
  * Common component size options
@@ -58,6 +101,11 @@ export interface BaseComponentProps {
    * Component disabled state
    */
   disabled?: boolean;
+
+  /**
+   * Component children
+   */
+  children?: ReactNode;
 }
 
 /**
@@ -168,6 +216,12 @@ export interface ButtonProps extends BaseComponentProps {
    * Make button fully rounded (pill shape)
    */
   rounded?: boolean;
+
+  /**
+   * Glass morphism effect for the button
+   * Can be a boolean to enable with default settings, or an object with AtomixGlassProps to customize the effect
+   */
+  glass?: AtomixGlassProps | boolean;
 }
 
 /**
@@ -193,6 +247,12 @@ export interface BadgeProps extends BaseComponentProps {
    * Optional icon
    */
   icon?: ReactNode;
+
+  /**
+   * Glass morphism effect for the badge
+   * Can be a boolean to enable with default settings, or an object with AtomixGlassProps to customize the effect
+   */
+  glass?: AtomixGlassProps | boolean;
 }
 
 /**
@@ -238,8 +298,15 @@ export interface CalloutProps extends BaseComponentProps {
    * Display as toast notification
    */
   toast?: boolean;
+
+  /**
+   * Glass morphism effect for the callout
+   * Can be a boolean to enable with default settings, or an object with AtomixGlassProps to customize the effect
+   */
+  glass?: AtomixGlassProps | boolean;
 }
 
+
 /**
  * Accordion component properties
  */
@@ -268,6 +335,12 @@ export interface AccordionProps extends BaseComponentProps {
    * Custom icon for the accordion
    */
   icon?: ReactNode;
+
+  /**
+   * 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;
 }
 
 /**
@@ -383,6 +456,11 @@ export interface HeroProps extends BaseComponentProps {
    */
   videoBackground?: string;
 
+  /**
+   * Glass effect properties for content container
+   */
+  glass?: AtomixGlassProps | boolean;
+
   /**
    * Video background options
    */
@@ -407,6 +485,11 @@ export interface HeroProps extends BaseComponentProps {
      */
     posterUrl?: string;
   };
+
+  /**
+   * Component children
+   */
+  children?: ReactNode;
 }
 
 /**
@@ -1022,6 +1105,12 @@ export interface PaginationProps extends BaseComponentProps {
    * Accessible label for the navigation element
    */
   ariaLabel?: string;
+
+  /**
+   * Glass morphism effect for the pagination component
+   * Can be a boolean to enable with default settings, or an object with AtomixGlassProps to customize the effect
+   */
+  glass?: AtomixGlassProps | boolean;
 }
 
 /**
@@ -1302,6 +1391,11 @@ export interface InputProps extends BaseComponentProps {
    * ID of element that describes this input
    */
   ariaDescribedBy?: string;
+
+  /**
+   * Glass morphism effect
+   */
+  glass?: boolean | Omit<React.ComponentProps<typeof AtomixGlass>, 'children'>;
 }
 
 /**
@@ -1402,6 +1496,12 @@ export interface SelectProps extends BaseComponentProps {
    * ID of element that describes this select
    */
   ariaDescribedBy?: string;
+
+  /**
+   * Glass morphism effect for the select
+   * Can be a boolean to enable with default settings, or an object with AtomixGlassProps to customize the effect
+   */
+  glass?: AtomixGlassProps | boolean;
 }
 
 /**
@@ -1467,6 +1567,12 @@ export interface CheckboxProps extends BaseComponentProps {
    * ID of element that describes this checkbox
    */
   ariaDescribedBy?: string;
+
+  /**
+   * Glass morphism effect for the checkbox
+   * Can be a boolean to enable with default settings, or an object with AtomixGlassProps to customize the effect
+   */
+  glass?: AtomixGlassProps | boolean;
 }
 
 /**
@@ -1527,6 +1633,12 @@ export interface RadioProps extends BaseComponentProps {
    * ID of element that describes this radio
    */
   ariaDescribedBy?: string;
+
+  /**
+   * Glass morphism effect for the radio button
+   * Can be a boolean to enable with default settings, or an object with AtomixGlassProps to customize the effect
+   */
+  glass?: AtomixGlassProps | boolean;
 }
 
 /**
@@ -1632,6 +1744,11 @@ export interface TextareaProps extends BaseComponentProps {
    * ID of element that describes this textarea
    */
   ariaDescribedBy?: string;
+
+  /**
+   * Glass morphism effect
+   */
+  glass?: boolean | Omit<React.ComponentProps<typeof AtomixGlass>, 'children'>;
 }
 
 /**
@@ -1762,6 +1879,12 @@ export interface ModalProps extends Omit<React.HTMLAttributes<HTMLDivElement>, '
    * Content for the modal footer
    */
   footer?: React.ReactNode;
+
+  /**
+   * Glass morphism effect for the modal
+   * Can be a boolean to enable with default settings, or an object with AtomixGlassProps to customize the effect
+   */
+  glass?: AtomixGlassProps | boolean;
 }
 
 /**
@@ -2014,6 +2137,12 @@ export interface PopoverProps {
    * Children content (removed in favor of using PopoverTrigger)
    */
   children?: ReactNode;
+
+  /**
+   * Glass morphism effect for the popover
+   * Can be a boolean to enable with default settings, or an object with AtomixGlassProps to customize the effect
+   */
+  glass?: AtomixGlassProps | boolean;
 }
 
 /**
@@ -2107,6 +2236,12 @@ export interface DropdownProps extends BaseComponentProps {
    * Optional ID for the dropdown
    */
   id?: string;
+
+  /**
+   * Glass morphism effect for the dropdown menu
+   * Can be a boolean to enable with default settings, or an object with AtomixGlassProps to customize the effect
+   */
+  glass?: AtomixGlassProps | boolean;
 }
 
 /**
@@ -2257,6 +2392,12 @@ export interface RatingProps extends BaseComponentProps {
    * Whether to use the vanilla JS implementation
    */
   useVanillaJS?: boolean;
+
+  /**
+   * Glass morphism effect for the rating component
+   * Can be a boolean to enable with default settings, or an object with AtomixGlassProps to customize the effect
+   */
+  glass?: AtomixGlassProps | boolean;
 }
 
 /**
@@ -2387,6 +2528,36 @@ export interface VideoPlayerProps extends BaseComponentProps {
    */
   ambientMode?: boolean;
 
+  /**
+   * Glass morphism variant configuration
+   * - true: Enable with default settings
+   * - false/undefined: Disable glass effect
+   * - object: Custom glass configuration
+   */
+  glass?:
+    | boolean
+    | {
+        displacementScale?: number;
+        blurAmount?: number;
+        saturation?: number;
+        aberrationIntensity?: number;
+        elasticity?: number;
+        cornerRadius?: number;
+        mode?: 'standard' | 'polar' | 'prominent' | 'shader';
+        overLight?: boolean;
+      };
+
+  /**
+   * Glass overlay opacity (0-1) when glass variant is enabled
+   * @default 0.3
+   */
+  glassOpacity?: number;
+
+  /**
+   * Custom content to display over the glass layer
+   */
+  glassContent?: React.ReactNode;
+
   /**
    * Play event handler
    */
@@ -2548,11 +2719,28 @@ export interface CardProps extends BaseComponentProps {
    */
   active?: boolean;
 
+  /**
+   * Applies a glass morphism effect to the card.
+   * Can be a boolean to enable with default settings, or an object with `AtomixGlassProps` to customize the effect.
+   */
+  glass?: boolean | Omit<React.ComponentProps<typeof AtomixGlass>, 'children'>;
+
+  cardAppearance?: boolean;
   /**
    * Card content (body)
    */
   children?: ReactNode;
 
+  /**
+   * Card styles
+   */
+  styles?: React.CSSProperties;
+
+  /**
+   * Card className
+   */
+  className?: string;
+
   /**
    * Optional click handler
    */
@@ -4748,3 +4936,437 @@ export interface CodeBlockProps extends BaseComponentProps {
    */
   showToolbar?: boolean;
 }
+
+// ============================================================================
+// FOOTER COMPONENT TYPES
+// ============================================================================
+
+/**
+ * Footer layout options
+ */
+export type FooterLayout = 'columns' | 'centered' | 'minimal' | 'stacked';
+
+/**
+ * Social media platform types
+ */
+export type SocialPlatform =
+  | 'facebook'
+  | 'twitter'
+  | 'instagram'
+  | 'linkedin'
+  | 'youtube'
+  | 'github'
+  | 'discord'
+  | 'tiktok'
+  | 'pinterest'
+  | 'snapchat'
+  | 'whatsapp'
+  | 'telegram'
+  | 'reddit'
+  | 'twitch'
+  | 'spotify'
+  | 'dribbble'
+  | 'behance'
+  | 'medium'
+  | 'dev'
+  | 'codepen'
+  | 'custom';
+
+/**
+ * Social link configuration
+ */
+export interface SocialLink {
+  /**
+   * Social media platform
+   */
+  platform: SocialPlatform;
+
+  /**
+   * URL to the social media profile
+   */
+  url: string;
+
+  /**
+   * Custom icon (for custom platform or override)
+   */
+  icon?: ReactNode;
+
+  /**
+   * Custom label for accessibility
+   */
+  label?: string;
+}
+
+/**
+ * Footer component properties
+ */
+export interface FooterProps extends BaseComponentProps {
+  /**
+   * Brand name or logo
+   */
+  brand?: ReactNode;
+
+  /**
+   * Brand logo (image URL or React element)
+   */
+  brandLogo?: string | ReactNode;
+
+  /**
+   * Brand description text
+   */
+  brandDescription?: ReactNode;
+
+  /**
+   * Copyright text
+   */
+  copyright?: ReactNode;
+
+  /**
+   * Footer layout variant
+   */
+  layout?: FooterLayout;
+
+  /**
+   * Color variant
+   */
+  variant?: ThemeColor;
+
+  /**
+   * Size variant
+   */
+  size?: Size;
+
+  /**
+   * Whether to show newsletter signup
+   */
+  showNewsletter?: boolean;
+
+  /**
+   * Newsletter section title
+   */
+  newsletterTitle?: string;
+
+  /**
+   * Newsletter section description
+   */
+  newsletterDescription?: string;
+
+  /**
+   * Newsletter input placeholder
+   */
+  newsletterPlaceholder?: string;
+
+  /**
+   * Newsletter submit button text
+   */
+  newsletterButtonText?: string;
+
+  /**
+   * Newsletter submit handler
+   */
+  onNewsletterSubmit?: (email: string) => void | Promise<void>;
+
+  /**
+   * Social media links
+   */
+  socialLinks?: SocialLink[];
+
+  /**
+   * Whether to show back to top button
+   */
+  showBackToTop?: boolean;
+
+  /**
+   * Back to top button text
+   */
+  backToTopText?: string;
+
+  /**
+   * Back to top click handler
+   */
+  onBackToTop?: () => void;
+
+  /**
+   * Whether to show divider above bottom section
+   */
+  showDivider?: boolean;
+
+  /**
+   * Whether footer should be sticky
+   */
+  sticky?: boolean;
+
+  /**
+   * Footer sections content
+   */
+  children?: ReactNode;
+}
+
+/**
+ * Footer section component properties
+ */
+export interface FooterSectionProps extends BaseComponentProps {
+  /**
+   * Section title
+   */
+  title?: ReactNode;
+
+  /**
+   * Section icon
+   */
+  icon?: ReactNode;
+
+  /**
+   * Whether section is collapsible on mobile
+   */
+  collapsible?: boolean;
+
+  /**
+   * Whether section is collapsed by default
+   */
+  defaultCollapsed?: boolean;
+
+  /**
+   * Section content
+   */
+  children: ReactNode;
+}
+
+/**
+ * Footer link component properties
+ */
+export interface FooterLinkProps extends BaseComponentProps {
+  /**
+   * Link URL
+   */
+  href?: string;
+
+  /**
+   * Link icon
+   */
+  icon?: ReactNode;
+
+  /**
+   * Whether link opens in new tab
+   */
+  external?: boolean;
+
+  /**
+   * Whether link is active
+   */
+  active?: boolean;
+
+  /**
+   * Link click handler
+   */
+  onClick?: (event: React.MouseEvent<HTMLAnchorElement>) => void;
+
+  /**
+   * Link content
+   */
+  children: ReactNode;
+
+  /**
+   * Custom link component (e.g., React Router Link)
+   */
+  LinkComponent?: React.ElementType;
+}
+
+/**
+ * Footer social link component properties
+ */
+export interface FooterSocialLinkProps extends BaseComponentProps {
+  /**
+   * Social media platform
+   */
+  platform: SocialPlatform;
+
+  /**
+   * Social media profile URL
+   */
+  url: string;
+
+  /**
+   * Custom icon
+   */
+  icon?: ReactNode;
+
+  /**
+   * Custom label for accessibility
+   */
+  label?: string;
+
+  /**
+   * Size variant
+   */
+  size?: Size;
+
+  /**
+   * Visual variant
+   */
+  variant?: 'default' | 'filled' | 'outlined';
+}
+
+// ============================================================================
+// GLASS CONTAINER COMPONENT TYPES
+// ============================================================================
+
+/**
+ * Glass container displacement modes
+ */
+export type GlassMode = 'standard' | 'polar' | 'prominent' | 'shader';
+
+/**
+ * Glass container size configuration
+ */
+export interface GlassSize {
+  /**
+   * Width of the glass container
+   */
+  width: number;
+
+  /**
+   * Height of the glass container
+   */
+  height: number;
+}
+
+/**
+ * Mouse position coordinates
+ */
+export interface MousePosition {
+  /**
+   * X coordinate
+   */
+  x: number;
+
+  /**
+   * Y coordinate
+   */
+  y: number;
+}
+
+/**
+ * Glass container component properties
+ */
+export interface GlassContainerProps extends BaseComponentProps {
+  /**
+   * Content to display inside the glass container
+   */
+  children: ReactNode;
+
+  /**
+   * Scale of the displacement effect (0-100)
+   * @default 25
+   */
+  displacementScale?: number;
+
+  /**
+   * Amount of blur applied to the backdrop (0-50)
+   * @default 12
+   */
+  blurAmount?: number;
+
+  /**
+   * Saturation level of the backdrop filter (0-300%)
+   * @default 180
+   */
+  saturation?: number;
+
+  /**
+   * Intensity of chromatic aberration effect (0-10)
+   * @default 2
+   */
+  aberrationIntensity?: number;
+
+  /**
+   * Elasticity of mouse interaction effects (0-1)
+   * @default 0.15
+   */
+  elasticity?: number;
+
+  /**
+   * Border radius of the glass container
+   * @default 999
+   */
+  cornerRadius?: number;
+
+  /**
+   * Padding inside the glass container
+   * @default '24px 32px'
+   */
+  padding?: string;
+
+  /**
+   * Size configuration for the glass container
+   * @default { width: 270, height: 69 }
+   */
+  glassSize?: GlassSize;
+
+  /**
+   * Displacement map mode
+   * @default 'standard'
+   */
+  mode?: GlassMode;
+
+  /**
+   * Whether the container is over a light background
+   * @default false
+   */
+  overLight?: boolean;
+
+  /**
+   * Active state of the container
+   * @default false
+   */
+  active?: boolean;
+
+  /**
+   * Click handler for the glass container
+   */
+  onClick?: () => void;
+
+  /**
+   * Mouse enter handler
+   */
+  onMouseEnter?: () => void;
+
+  /**
+   * Mouse leave handler
+   */
+  onMouseLeave?: () => void;
+
+  /**
+   * Mouse down handler
+   */
+  onMouseDown?: () => void;
+
+  /**
+   * Mouse up handler
+   */
+  onMouseUp?: () => void;
+
+  /**
+   * External mouse container reference for tracking
+   */
+  mouseContainer?: React.RefObject<HTMLElement | null>;
+
+  /**
+   * External global mouse position
+   */
+  globalMousePos?: MousePosition;
+
+  /**
+   * External mouse offset from container center
+   */
+  mouseOffset?: MousePosition;
+
+  /**
+   * Custom CSS styles
+   */
+  style?: React.CSSProperties;
+}
+
+/**
+ * AtomixGlass component properties
+ */