@shohojdhara/atomix 0.2.3 → 0.2.5

package/src/lib/types/components.ts

@@ -1,5 +1,179 @@
 import { ReactNode } from 'react';
-import { AtomixGlass } from '../../components/AtomixGlass/AtomixGlass';
+
+// ============================================================================
+// AtomixGlass Types
+// ============================================================================
+
+/**
+ * Displacement mode for glass effect
+ */
+export type DisplacementMode = 'standard' | 'polar' | 'prominent' | 'shader';
+
+/**
+ * Mouse position coordinates
+ */
+export interface MousePosition {
+  x: number;
+  y: number;
+}
+
+/**
+ * Glass component size dimensions
+ */
+export interface GlassSize {
+  width: number;
+  height: number;
+}
+
+/**
+ * OverLight configuration - can be boolean, 'auto', or object with settings
+ * 
+ * @example
+ * // Boolean - explicit control
+ * overLight={true}
+ * 
+ * @example
+ * // Auto-detection - automatically detects background brightness
+ * overLight="auto"
+ * 
+ * @example
+ * // Object config - auto-detection with custom settings
+ * overLight={{
+ *   threshold: 0.8,
+ *   opacity: 0.6,
+ *   contrast: 1.8,
+ *   brightness: 1.0,
+ *   saturationBoost: 1.5
+ * }}
+ */
+export type OverLightConfig =
+  | boolean
+  | 'auto'
+  | OverLightObjectConfig;
+
+/**
+ * OverLight object configuration
+ * 
+ * When using object mode, the component will auto-detect background brightness
+ * and apply the custom settings. All properties are optional and will use
+ * sensible defaults if not provided.
+ * 
+ * @example
+ * // Minimal config - only threshold
+ * overLight={{ threshold: 0.8 }}
+ * 
+ * @example
+ * // Full config with all properties
+ * overLight={{
+ *   threshold: 0.75,
+ *   opacity: 0.6,
+ *   contrast: 1.8,
+ *   brightness: 1.1,
+ *   saturationBoost: 1.5
+ * }}
+ */
+export interface OverLightObjectConfig {
+  /**
+   * Luminance threshold for auto-detection (0.1 - 1.0)
+   * 
+   * Backgrounds with average luminance above this threshold will be
+   * considered "light" and trigger overLight mode.
+   * 
+   * @default 0.7
+   * @minimum 0.1
+   * @maximum 1.0
+   * 
+   * @example
+   * // More sensitive detection (triggers on lighter backgrounds)
+   * threshold: 0.6
+   * 
+   * @example
+   * // Less sensitive detection (only very light backgrounds)
+   * threshold: 0.85
+   */
+  threshold?: number;
+  
+  /**
+   * Base opacity for overLight layers (0.1 - 1.0)
+   * 
+   * Controls the opacity of the base and overlay layers when overLight
+   * mode is active. This value is multiplied by hover/active intensity
+   * multipliers for dynamic effects.
+   * 
+   * @default 0.5 (dynamic, depends on hover/active state)
+   * @minimum 0.1
+   * @maximum 1.0
+   * 
+   * @example
+   * // Subtle overlay
+   * opacity: 0.3
+   * 
+   * @example
+   * // Strong overlay
+   * opacity: 0.7
+   */
+  opacity?: number;
+  
+  /**
+   * Contrast enhancement multiplier (0.5 - 2.5)
+   * 
+   * Increases the contrast of the glass effect for better visibility
+   * on light backgrounds. Higher values create more dramatic effects.
+   * 
+   * @default 1.4 (dynamic, includes mouse influence)
+   * @minimum 0.5
+   * @maximum 2.5
+   * 
+   * @example
+   * // Subtle contrast boost
+   * contrast: 1.2
+   * 
+   * @example
+   * // High contrast for maximum visibility
+   * contrast: 2.0
+   */
+  contrast?: number;
+  
+  /**
+   * Brightness adjustment multiplier (0.5 - 2.0)
+   * 
+   * Adjusts the overall brightness of the glass effect. Values above 1.0
+   * brighten the effect, while values below 1.0 darken it.
+   * 
+   * @default 0.85 (dynamic, includes mouse influence)
+   * @minimum 0.5
+   * @maximum 2.0
+   * 
+   * @example
+   * // Neutral brightness
+   * brightness: 1.0
+   * 
+   * @example
+   * // Brighter effect
+   * brightness: 1.2
+   */
+  brightness?: number;
+  
+  /**
+   * Saturation boost multiplier (0.5 - 3.0)
+   * 
+   * Enhances color saturation for more vibrant glass effects on light
+   * backgrounds. This works in conjunction with the base saturation prop.
+   * 
+   * @default 1.3 (dynamic, includes mouse influence)
+   * @minimum 0.5
+   * @maximum 3.0
+   * 
+   * @example
+   * // Moderate saturation boost
+   * saturationBoost: 1.2
+   * 
+   * @example
+   * // High saturation for vivid effects
+   * saturationBoost: 2.0
+   */
+  saturationBoost?: number;
+}
 
 /**
  * AtomixGlass component props interface
@@ -12,16 +186,21 @@ export interface AtomixGlassProps {
   aberrationIntensity?: number;
   elasticity?: number;
   cornerRadius?: number;
-  globalMousePos?: { x: number; y: number };
-  mouseOffset?: { x: number; y: number };
+  globalMousePosition?: MousePosition;
+  mouseOffset?: MousePosition;
   mouseContainer?: React.RefObject<HTMLElement | null> | null;
   className?: string;
   padding?: string;
   style?: React.CSSProperties;
-  overLight?: boolean;
-  mode?: 'standard' | 'polar' | 'prominent' | 'shader';
+  overLight?: OverLightConfig;
+  mode?: DisplacementMode;
   onClick?: () => void;
 
+  /**
+   * Shader variant for shader mode
+   */
+  shaderVariant?: 'liquidGlass' | 'premiumGlass';
+
   /**
    * Accessibility props
    */
@@ -36,11 +215,38 @@ export interface AtomixGlassProps {
   reducedMotion?: boolean;
   highContrast?: boolean;
   disableEffects?: boolean;
+  enableLiquidBlur?: boolean;
+  enableBorderEffect?: boolean;
+  enableOverLightLayers?: boolean;
 
   /**
    * Performance monitoring
    */
   enablePerformanceMonitoring?: boolean;
+
+  /**
+   * Debug mode for cornerRadius extraction
+   */
+  debugCornerRadius?: boolean;
+
+  /**
+   * Debug mode for overLight detection and configuration
+   * 
+   * When enabled, logs detailed information about:
+   * - Auto-detection results (luminance values, threshold comparison)
+   * - Final overLight configuration values
+   * - Detection timing and performance
+   * 
+   * Useful for debugging auto-detection issues and fine-tuning thresholds.
+   * 
+   * @default false
+   * 
+   * @example
+   * <AtomixGlass overLight="auto" debugOverLight={true}>
+   *   Content
+   * </AtomixGlass>
+   */
+  debugOverLight?: boolean;
 }
 
 /**
@@ -106,6 +312,11 @@ export interface BaseComponentProps {
    * Component children
    */
   children?: ReactNode;
+
+  /**
+   * Inline style for the component root element
+   */
+  style?: React.CSSProperties;
 }
 
 /**
@@ -222,6 +433,11 @@ export interface ButtonProps extends BaseComponentProps {
    * Can be a boolean to enable with default settings, or an object with AtomixGlassProps to customize the effect
    */
   glass?: AtomixGlassProps | boolean;
+
+  /**
+   * Custom style for the button
+   */
+  style?: React.CSSProperties;
 }
 
 /**
@@ -253,6 +469,11 @@ export interface BadgeProps extends BaseComponentProps {
    * Can be a boolean to enable with default settings, or an object with AtomixGlassProps to customize the effect
    */
   glass?: AtomixGlassProps | boolean;
+
+  /**
+   * Custom style for the badge
+   */
+  style?: React.CSSProperties;
 }
 
 /**
@@ -304,8 +525,12 @@ export interface CalloutProps extends BaseComponentProps {
    * Can be a boolean to enable with default settings, or an object with AtomixGlassProps to customize the effect
    */
   glass?: AtomixGlassProps | boolean;
-}
 
+  /**
+   * Custom style for the callout
+   */
+  style?: React.CSSProperties;
+}
 
 /**
  * Accordion component properties
@@ -510,6 +735,12 @@ export interface SpinnerProps extends BaseComponentProps {
    * Whether the spinner should be displayed fullscreen
    */
   fullscreen?: boolean;
+
+  /**
+   * Glass morphism effect for the spinner
+   * Can be a boolean to enable with default settings, or an object with AtomixGlassProps to customize the effect
+   */
+  glass?: AtomixGlassProps | boolean;
 }
 
 /**
@@ -595,6 +826,12 @@ export interface NavbarProps extends BaseComponentProps {
    * ID for the navbar (used for accessibility)
    */
   id?: string;
+
+  /**
+   * Enable glass morphism effect.
+   * Can be a boolean to enable with default settings, or an object with AtomixGlassProps to customize the effect
+   */
+  glass?: boolean | Omit<AtomixGlassProps, 'children'>;
 }
 
 /**
@@ -615,6 +852,12 @@ export interface NavProps extends BaseComponentProps {
    * Nav variant (including float variants)
    */
   variant?: NavVariant;
+
+  /**
+   * Enable glass morphism effect.
+   * Can be a boolean to enable with default settings, or an object with AtomixGlassProps to customize the effect
+   */
+  glass?: boolean | Omit<AtomixGlassProps, 'children'>;
 }
 
 /**
@@ -820,6 +1063,12 @@ export interface SideMenuProps extends BaseComponentProps {
    * ID for the menu (used for accessibility)
    */
   id?: string;
+
+  /**
+   * Glass morphism effect for the side menu
+   * Can be a boolean to enable with default settings, or an object with AtomixGlassProps to customize the effect
+   */
+  glass?: boolean | Omit<AtomixGlassProps, 'children'>;
 }
 
 /**
@@ -892,49 +1141,61 @@ export type EdgePanelMode = 'slide' | 'push' | 'none';
  */
 export interface EdgePanelProps extends BaseComponentProps {
   /**
-   * Panel title
+   * Title of the panel
    */
-  title?: ReactNode;
-
-  /**
-   * Panel content
-   */
-  children: ReactNode;
+  title?: React.ReactNode;
 
   /**
-   * Panel position
+   * Position of the panel
+   * @default 'start'
    */
-  position?: EdgePanelPosition;
+  position?: 'start' | 'end' | 'top' | 'bottom';
 
   /**
    * Animation mode
+   * @default 'slide'
    */
-  mode?: EdgePanelMode;
+  mode?: 'slide' | 'push' | 'none';
 
   /**
    * Whether the panel is open
+   * @default false
    */
   isOpen?: boolean;
 
   /**
-   * Open/close callback
+   * Callback when panel open state changes
    */
   onOpenChange?: (open: boolean) => void;
 
   /**
-   * Show backdrop
+   * Whether to show backdrop
+   * @default true
    */
   backdrop?: boolean;
 
   /**
-   * Close when clicking backdrop
+   * Whether to close panel when clicking backdrop
+   * @default true
    */
   closeOnBackdropClick?: boolean;
 
   /**
-   * Close when pressing escape key
+   * Whether to close panel when pressing Escape key
+   * @default true
    */
   closeOnEscape?: boolean;
+
+  /**
+   * Glass effect configuration
+   * @default undefined
+   */
+  glass?: boolean | AtomixGlassProps;
+
+  /**
+   * Children elements
+   */
+  children: React.ReactNode;
 }
 
 /**
@@ -1055,6 +1316,12 @@ export interface DataTableProps extends BaseComponentProps {
    * Callback when sorting changes
    */
   onSort?: (sortConfig: SortConfig) => void;
+
+  /**
+   * Glass morphism effect for the data table
+   * Can be a boolean to enable with default settings, or an object with AtomixGlassProps to customize the effect
+   */
+  glass?: AtomixGlassProps | boolean;
 }
 
 /**
@@ -1176,6 +1443,12 @@ export interface TodoProps extends BaseComponentProps {
    * Whether to show the completed todos
    */
   showCompleted?: boolean;
+
+  /**
+   * Glass morphism effect for the todo component
+   * Can be a boolean to enable with default settings, or an object with AtomixGlassProps to customize the effect
+   */
+  glass?: AtomixGlassProps | boolean;
 }
 
 /**
@@ -1395,7 +1668,7 @@ export interface InputProps extends BaseComponentProps {
   /**
    * Glass morphism effect
    */
-  glass?: boolean | Omit<React.ComponentProps<typeof AtomixGlass>, 'children'>;
+  glass?: boolean | Omit<AtomixGlassProps, 'children'>;
 }
 
 /**
@@ -1748,7 +2021,7 @@ export interface TextareaProps extends BaseComponentProps {
   /**
    * Glass morphism effect
    */
-  glass?: boolean | Omit<React.ComponentProps<typeof AtomixGlass>, 'children'>;
+  glass?: boolean | Omit<AtomixGlassProps, 'children'>;
 }
 
 /**
@@ -1794,6 +2067,17 @@ export interface AvatarProps extends BaseComponentProps {
    * Optional click handler
    */
   onClick?: (event: React.MouseEvent<HTMLDivElement>) => void;
+
+  /**
+   * Glass morphism effect for the avatar
+   * Can be a boolean to enable with default settings, or an object with AtomixGlassProps to customize the effect
+   */
+  glass?: AtomixGlassProps | boolean;
+
+  /**
+   * Custom style for the avatar
+   */
+  style?: React.CSSProperties;
 }
 
 /**
@@ -1819,6 +2103,12 @@ export interface AvatarGroupProps extends BaseComponentProps {
    * Custom text for the "more" indicator
    */
   moreText?: string;
+
+  /**
+   * Glass morphism effect for the avatar group
+   * Can be a boolean to enable with default settings, or an object with AtomixGlassProps to customize the effect
+   */
+  glass?: AtomixGlassProps | boolean;
 }
 
 /**
@@ -1940,6 +2230,12 @@ export interface BreadcrumbOptions {
    * Accessible label for the breadcrumb navigation
    */
   ariaLabel?: string;
+
+  /**
+   * Glass morphism effect for the breadcrumb
+   * Can be a boolean to enable with default settings, or an object with AtomixGlassProps to customize the effect
+   */
+  glass?: AtomixGlassProps | boolean;
 }
 
 /**
@@ -2050,6 +2346,12 @@ export interface MessagesProps extends BaseComponentProps {
    * Unique identifier for the messages component
    */
   id?: string;
+
+  /**
+   * Glass morphism effect for the messages component
+   * Can be a boolean to enable with default settings, or an object with AtomixGlassProps to customize the effect
+   */
+  glass?: boolean | Omit<AtomixGlassProps, 'children'>;
 }
 
 /**
@@ -2093,6 +2395,11 @@ export interface PopoverProps {
    */
   className?: string;
 
+  /**
+   * Inline style for the popover
+   */
+  style?: React.CSSProperties;
+
   /**
    * Delay before showing the popover (in milliseconds)
    */
@@ -2332,6 +2639,12 @@ export interface ProgressProps extends BaseComponentProps {
    * Accessible label for screen readers
    */
   ariaLabel?: string;
+
+  /**
+   * Glass morphism effect for the progress bar
+   * Can be a boolean to enable with default settings, or an object with AtomixGlassProps to customize the effect
+   */
+  glass?: AtomixGlassProps | boolean;
 }
 
 /**
@@ -2723,7 +3036,7 @@ export interface CardProps extends BaseComponentProps {
    * 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'>;
+  glass?: boolean | Omit<AtomixGlassProps, 'children'>;
 
   cardAppearance?: boolean;
   /**
@@ -2734,7 +3047,7 @@ export interface CardProps extends BaseComponentProps {
   /**
    * Card styles
    */
-  styles?: React.CSSProperties;
+  style?: React.CSSProperties;
 
   /**
    * Card className
@@ -4944,7 +5257,14 @@ export interface CodeBlockProps extends BaseComponentProps {
 /**
  * Footer layout options
  */
-export type FooterLayout = 'columns' | 'centered' | 'minimal' | 'stacked';
+export type FooterLayout =
+  | 'columns'
+  | 'centered'
+  | 'minimal'
+  | 'stacked'
+  | 'flexible'
+  | 'sidebar'
+  | 'wide';
 
 /**
  * Social media platform types
@@ -5100,6 +5420,11 @@ export interface FooterProps extends BaseComponentProps {
    * Footer sections content
    */
   children?: ReactNode;
+
+  /**
+   * Whether footer should be glass
+   */
+  glass?: boolean;
 }
 
 /**
@@ -5126,6 +5451,11 @@ export interface FooterSectionProps extends BaseComponentProps {
    */
   defaultCollapsed?: boolean;
 
+  /**
+   * Whether newsletter is shown in the footer
+   */
+  showNewsletter?: boolean;
+
   /**
    * Section content
    */