@shohojdhara/atomix 0.2.4 → 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,14 +186,14 @@ 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;
 
   /**
@@ -41,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;
 }
 
 /**
@@ -111,6 +312,11 @@ export interface BaseComponentProps {
    * Component children
    */
   children?: ReactNode;
+
+  /**
+   * Inline style for the component root element
+   */
+  style?: React.CSSProperties;
 }
 
 /**
@@ -227,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;
 }
 
 /**
@@ -258,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;
 }
 
 /**
@@ -309,6 +525,11 @@ 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;
 }
 
 /**
@@ -1447,7 +1668,7 @@ export interface InputProps extends BaseComponentProps {
   /**
    * Glass morphism effect
    */
-  glass?: boolean | Omit<React.ComponentProps<typeof AtomixGlass>, 'children'>;
+  glass?: boolean | Omit<AtomixGlassProps, 'children'>;
 }
 
 /**
@@ -1800,7 +2021,7 @@ export interface TextareaProps extends BaseComponentProps {
   /**
    * Glass morphism effect
    */
-  glass?: boolean | Omit<React.ComponentProps<typeof AtomixGlass>, 'children'>;
+  glass?: boolean | Omit<AtomixGlassProps, 'children'>;
 }
 
 /**
@@ -1852,6 +2073,11 @@ export interface AvatarProps 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 avatar
+   */
+  style?: React.CSSProperties;
 }
 
 /**
@@ -2169,6 +2395,11 @@ export interface PopoverProps {
    */
   className?: string;
 
+  /**
+   * Inline style for the popover
+   */
+  style?: React.CSSProperties;
+
   /**
    * Delay before showing the popover (in milliseconds)
    */
@@ -2805,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;
   /**
@@ -2816,7 +3047,7 @@ export interface CardProps extends BaseComponentProps {
   /**
    * Card styles
    */
-  styles?: React.CSSProperties;
+  style?: React.CSSProperties;
 
   /**
    * Card className
@@ -5026,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
@@ -5182,6 +5420,11 @@ export interface FooterProps extends BaseComponentProps {
    * Footer sections content
    */
   children?: ReactNode;
+
+  /**
+   * Whether footer should be glass
+   */
+  glass?: boolean;
 }
 
 /**
@@ -5208,6 +5451,11 @@ export interface FooterSectionProps extends BaseComponentProps {
    */
   defaultCollapsed?: boolean;
 
+  /**
+   * Whether newsletter is shown in the footer
+   */
+  showNewsletter?: boolean;
+
   /**
    * Section content
    */

package/src/lib/utils/displacement-generator.ts

@@ -1,86 +1,92 @@
 export interface Vec2 {
-  x: number
-  y: number
+  x: number;
+  y: number;
 }
 
 export interface ShaderOptions {
-  width: number
-  height: number
-  fragment: (uv: Vec2) => Vec2
+  width: number;
+  height: number;
+  fragment: (uv: Vec2) => Vec2;
 }
 
 function smoothStep(a: number, b: number, t: number): number {
-  t = Math.max(0, Math.min(1, (t - a) / (b - a)))
-  return t * t * (3 - 2 * t)
+  t = Math.max(0, Math.min(1, (t - a) / (b - a)));
+  return t * t * (3 - 2 * t);
 }
 
 function length(x: number, y: number): number {
-  return Math.sqrt(x * x + y * y)
+  return Math.sqrt(x * x + y * y);
 }
 
-function roundedRectSDF(x: number, y: number, width: number, height: number, radius: number): number {
-  const qx = Math.abs(x) - width + radius
-  const qy = Math.abs(y) - height + radius
-  return Math.min(Math.max(qx, qy), 0) + length(Math.max(qx, 0), Math.max(qy, 0)) - radius
+function roundedRectSDF(
+  x: number,
+  y: number,
+  width: number,
+  height: number,
+  radius: number
+): number {
+  const qx = Math.abs(x) - width + radius;
+  const qy = Math.abs(y) - height + radius;
+  return Math.min(Math.max(qx, qy), 0) + length(Math.max(qx, 0), Math.max(qy, 0)) - radius;
 }
 
 export const fragmentShaders = {
   liquidGlass: (uv: Vec2): Vec2 => {
-    const ix = uv.x - 0.5
-    const iy = uv.y - 0.5
-    const distanceToEdge = roundedRectSDF(ix, iy, 0.3, 0.2, 0.6)
-    const displacement = smoothStep(0.8, 0, distanceToEdge - 0.15)
-    const scaled = smoothStep(0, 1, displacement)
-    return { x: ix * scaled + 0.5, y: iy * scaled + 0.5 }
+    const ix = uv.x - 0.5;
+    const iy = uv.y - 0.5;
+    const distanceToEdge = roundedRectSDF(ix, iy, 0.3, 0.2, 0.6);
+    const displacement = smoothStep(0.8, 0, distanceToEdge - 0.15);
+    const scaled = smoothStep(0, 1, displacement);
+    return { x: ix * scaled + 0.5, y: iy * scaled + 0.5 };
   },
-}
+};
 
 export class ShaderDisplacementGenerator {
-  private canvas: HTMLCanvasElement
-  private context: CanvasRenderingContext2D
+  private canvas: HTMLCanvasElement;
+  private context: CanvasRenderingContext2D;
 
   constructor(private options: ShaderOptions) {
-    this.canvas = document.createElement("canvas")
-    this.canvas.width = options.width
-    this.canvas.height = options.height
-    this.canvas.style.display = "none"
+    this.canvas = document.createElement('canvas');
+    this.canvas.width = options.width;
+    this.canvas.height = options.height;
+    this.canvas.style.display = 'none';
 
-    const context = this.canvas.getContext("2d")
+    const context = this.canvas.getContext('2d');
     if (!context) {
-      throw new Error("Could not get 2D context")
+      throw new Error('Could not get 2D context');
     }
-    this.context = context
+    this.context = context;
   }
 
   updateShader(): string {
-    const { width, height } = this.options
-    const imageData = this.context.createImageData(width, height)
-    const data = imageData.data
+    const { width, height } = this.options;
+    const imageData = this.context.createImageData(width, height);
+    const data = imageData.data;
 
     for (let y = 0; y < height; y++) {
       for (let x = 0; x < width; x++) {
-        const uv: Vec2 = { x: x / width, y: y / height }
-        const pos = this.options.fragment(uv)
-        
-        const dx = pos.x * width - x
-        const dy = pos.y * height - y
-        
-        const r = (dx / 10) + 0.5
-        const g = (dy / 10) + 0.5
-        
-        const pixelIndex = (y * width + x) * 4
-        data[pixelIndex] = Math.max(0, Math.min(255, r * 255))
-        data[pixelIndex + 1] = Math.max(0, Math.min(255, g * 255))
-        data[pixelIndex + 2] = Math.max(0, Math.min(255, g * 255))
-        data[pixelIndex + 3] = 255
+        const uv: Vec2 = { x: x / width, y: y / height };
+        const pos = this.options.fragment(uv);
+
+        const dx = pos.x * width - x;
+        const dy = pos.y * height - y;
+
+        const r = dx / 10 + 0.5;
+        const g = dy / 10 + 0.5;
+
+        const pixelIndex = (y * width + x) * 4;
+        data[pixelIndex] = Math.max(0, Math.min(255, r * 255));
+        data[pixelIndex + 1] = Math.max(0, Math.min(255, g * 255));
+        data[pixelIndex + 2] = Math.max(0, Math.min(255, g * 255));
+        data[pixelIndex + 3] = 255;
       }
     }
 
-    this.context.putImageData(imageData, 0, 0)
-    return this.canvas.toDataURL()
+    this.context.putImageData(imageData, 0, 0);
+    return this.canvas.toDataURL();
   }
 
   destroy(): void {
-    this.canvas.remove()
+    this.canvas.remove();
   }
-}
+}

package/src/lib/utils/icons.ts

@@ -35,7 +35,7 @@ export function createPhosphorIcon(name: string, size: number = 16): string {
   const path = ICON_PATHS[name] || '';
 
   if (!path) {
-    console.warn(`Icon "${name}" not found in icon library`);
+    console.warn('Icon not found in icon library:', typeof name === 'string' ? name.replace(/[^a-zA-Z0-9_-]/g, '_') : 'invalid_name');
   }
 
   return `<svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" fill="currentColor" viewBox="0 0 256 256">

package/src/lib/utils/index.ts

@@ -6,18 +6,24 @@ export * from './dom';
 // Export icon utilities
 export * from './icons';
 
+import classNames from 'classnames';
+
 /**
- * Class name utility function to conditionally join classNames together
- * @param {...any} args - Class names or conditional class names
- * @returns {string} - Joined class names
+ * Class name utility function to conditionally join classNames together.
+ * This is a wrapper around the 'classnames' library and supports all its features:
+ * - Strings and numbers
+ * - Arrays (including nested arrays)
+ * - Objects (keys are class names, values are truthy/falsy conditions)
+ * - Mixed types
+ *
+ * @example
+ * cn('foo', 'bar'); // 'foo bar'
+ * cn('foo', { bar: true }); // 'foo bar'
+ * cn({ 'foo-bar': true }); // 'foo-bar'
+ * cn(['foo', { bar: true }]); // 'foo bar'
  */
 export function cn(...args: any[]): string {
-  return args
-    .filter(Boolean)
-    .flat()
-    .map(arg => String(arg).trim())
-    .filter(Boolean)
-    .join(' ');
+  return classNames(...args);
 }
 
 /**
@@ -26,7 +32,7 @@ export function cn(...args: any[]): string {
  * @returns A UUID v4 compatible string
  */
 export function generateUUID(): string {
-  return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
+  return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, (c) => {
     const r = (Math.random() * 16) | 0;
     const v = c === 'x' ? r : (r & 0x3) | 0x8;
     return v.toString(16);

package/src/styles/01-settings/_settings.accordion.scss

@@ -4,29 +4,29 @@
 @use './settings.spacing' as *;
 @use './settings.colors' as *;
 
-$accordion-width:                           100% !default;
-$accordion-padding-x:                       map.get($spacing-sizes, 5) !default;
-$accordion-padding-y:                       map.get($spacing-sizes, 4) !default;
+$accordion-width: 100% !default;
+$accordion-padding-x: map.get($spacing-sizes, 5) !default;
+$accordion-padding-y: map.get($spacing-sizes, 4) !default;
 
-$accordion-border-width:                    calc(var(--#{config.$prefix}border-width) * 2) !default;
-$accordion-border-color:                    transparent !default;
-$accordion-border-radius:                   radius.$border-radius-sm !default;
+$accordion-border-width: calc(var(--#{config.$prefix}border-width) * 2) !default;
+$accordion-border-color: transparent !default;
+$accordion-border-radius: radius.$border-radius-sm !default;
 
-$accordion-body-padding-x:                  $accordion-padding-x !default;
-$accordion-body-padding-y:                  map.get($spacing-sizes, 2) !default;
-$accordion-body-color:                      var(--#{config.$prefix}body-color) !default;
-$accordion-body-bg:                         var(--#{config.$prefix}body-bg) !default;
+$accordion-body-padding-x: $accordion-padding-x !default;
+$accordion-body-padding-y: map.get($spacing-sizes, 2) !default;
+$accordion-body-color: var(--#{config.$prefix}body-color) !default;
+$accordion-body-bg: var(--#{config.$prefix}body-bg) !default;
 
-$accordion-header-padding-x:                $accordion-padding-x !default;
-$accordion-header-padding-y:                $accordion-padding-y !default;
-$accordion-header-color:                    var(--#{config.$prefix}body-color) !default;
-$accordion-header-bg:                       var(--#{config.$prefix}body-bg)!default;
+$accordion-header-padding-x: $accordion-padding-x !default;
+$accordion-header-padding-y: $accordion-padding-y !default;
+$accordion-header-color: var(--#{config.$prefix}body-color) !default;
+$accordion-header-bg: var(--#{config.$prefix}body-bg) !default;
 
-$accordion-header-bg-hover:                 var(--#{config.$prefix}body-bg) !default;
+$accordion-header-bg-hover: var(--#{config.$prefix}body-bg) !default;
 
-$accordion-icon-size:                       map.get($spacing-sizes, 5) !default;
-$accordion-icon-color:                      var(--#{config.$prefix}body-color) !default;
+$accordion-icon-size: map.get($spacing-sizes, 5) !default;
+$accordion-icon-color: var(--#{config.$prefix}body-color) !default;
 
-$accordion-icon-transform:                  180deg !default;
+$accordion-icon-transform: 180deg !default;
 
-$accordion-disable-color:                   var(--#{config.$prefix}tertiary-text-emphasis) !default;
+$accordion-disable-color: var(--#{config.$prefix}tertiary-text-emphasis) !default;

package/src/styles/01-settings/_settings.animations.scss

@@ -1,7 +1,7 @@
-$transition-duration:               0.3s !default;
-$easing:                            cubic-bezier(0.23, 1, 0.32, 1) !default;
+$transition-duration: 0.3s !default;
+$easing: cubic-bezier(0.23, 1, 0.32, 1) !default;
 
 // Transition variables
-$transition-base:                   all $transition-duration $easing !default;
-$transition-fast:                   all 0.15s $easing !default;
-$transition-slow:                   all 0.5s $easing !default;
+$transition-base: all $transition-duration $easing !default;
+$transition-fast: all 0.15s $easing !default;
+$transition-slow: all 0.5s $easing !default;

package/src/styles/01-settings/_settings.avatar-group.scss

@@ -20,4 +20,4 @@ $avatar-group-more-border-color: var(--#{config.$prefix}primary-border-subtle) !
 
 // Avatar group transitions
 $avatar-group-transition-duration: 0.2s !default;
-$avatar-group-transition-timing: ease-in-out !default;
+$avatar-group-transition-timing: ease-in-out !default;