@shohojdhara/atomix 0.2.3 → 0.2.4

package/dist/index.d.ts

@@ -3,6 +3,29 @@ import react__default, { ReactNode, ElementType, HTMLAttributes } from 'react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as PhosphorIcons from '@phosphor-icons/react';
 
+interface Vec2 {
+    x: number;
+    y: number;
+}
+declare const fragmentShaders: {
+    liquidGlass: (uv: Vec2, mousePosition?: Vec2) => Vec2;
+    appleFluid: (uv: Vec2, mousePosition?: Vec2) => Vec2;
+    premiumGlass: (uv: Vec2, mousePosition?: Vec2) => Vec2;
+    liquidMetal: (uv: Vec2, mousePosition?: Vec2) => Vec2;
+    basiBasi: (uv: Vec2, mousePosition?: Vec2) => Vec2;
+};
+type FragmentShaderType = keyof typeof fragmentShaders;
+
+type DisplacementMode = 'standard' | 'polar' | 'prominent' | 'shader';
+type MousePosition$1 = {
+    x: number;
+    y: number;
+};
+type OverLightConfig = boolean | 'auto' | {
+    threshold?: number;
+    opacity?: number;
+    contrast?: number;
+};
 interface AtomixGlassProps$1 {
     children: React.ReactNode;
     displacementScale?: number;
@@ -11,40 +34,39 @@ interface AtomixGlassProps$1 {
     aberrationIntensity?: number;
     elasticity?: number;
     cornerRadius?: number;
-    globalMousePos?: {
-        x: number;
-        y: number;
-    };
-    mouseOffset?: {
-        x: number;
-        y: number;
-    };
+    globalMousePosition?: MousePosition$1;
+    mouseOffset?: MousePosition$1;
     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;
-    /**
-     * Accessibility props
-     */
+    shaderVariant?: FragmentShaderType;
     'aria-label'?: string;
     'aria-describedby'?: string;
     role?: string;
     tabIndex?: number;
-    /**
-     * Performance and accessibility options
-     */
     reducedMotion?: boolean;
     highContrast?: boolean;
     disableEffects?: boolean;
-    /**
-     * Performance monitoring
-     */
+    enableLiquidBlur?: boolean;
+    enableBorderEffect?: boolean;
+    enableOverLightLayers?: boolean;
     enablePerformanceMonitoring?: boolean;
 }
-declare function AtomixGlass({ children, displacementScale, blurAmount, saturation, aberrationIntensity, elasticity, cornerRadius, globalMousePos: externalGlobalMousePos, mouseOffset: externalMouseOffset, mouseContainer, className, padding, overLight, style, mode, onClick, 'aria-label': ariaLabel, 'aria-describedby': ariaDescribedBy, role, tabIndex, reducedMotion, highContrast, disableEffects, enablePerformanceMonitoring, }: AtomixGlassProps$1): react_jsx_runtime.JSX.Element;
+/**
+ * AtomixGlass - A high-performance glass morphism component with liquid distortion effects
+ *
+ * Features:
+ * - Hardware-accelerated glass effects with SVG filters
+ * - Mouse-responsive liquid distortion
+ * - Automatic light/dark theme detection
+ * - Accessibility and performance optimizations
+ * - Multiple displacement modes (standard, polar, prominent, shader)
+ */
+declare function AtomixGlass({ children, displacementScale, blurAmount, saturation, aberrationIntensity, elasticity, cornerRadius, globalMousePosition: externalGlobalMousePosition, mouseOffset: externalMouseOffset, mouseContainer, className, padding, overLight, style, mode, onClick, shaderVariant, 'aria-label': ariaLabel, 'aria-describedby': ariaDescribedBy, role, tabIndex, reducedMotion, highContrast, disableEffects, enableLiquidBlur, enableBorderEffect, enableOverLightLayers, enablePerformanceMonitoring, }: AtomixGlassProps$1): react_jsx_runtime.JSX.Element;
 
 /**
  * AtomixGlass component props interface
@@ -72,6 +94,10 @@ interface AtomixGlassProps {
     overLight?: boolean;
     mode?: 'standard' | 'polar' | 'prominent' | 'shader';
     onClick?: () => void;
+    /**
+     * Shader variant for shader mode
+     */
+    shaderVariant?: 'liquidGlass' | 'premiumGlass';
     /**
      * Accessibility props
      */
@@ -450,6 +476,11 @@ 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;
 }
 /**
  * Navbar position options
@@ -519,6 +550,11 @@ 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'>;
 }
 /**
  * Nav component properties
@@ -536,6 +572,11 @@ 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'>;
 }
 /**
  * Nav item properties
@@ -708,6 +749,11 @@ 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'>;
 }
 /**
  * SideMenuList component properties
@@ -768,41 +814,52 @@ type EdgePanelMode = 'slide' | 'push' | 'none';
  */
 interface EdgePanelProps extends BaseComponentProps {
     /**
-     * Panel title
-     */
-    title?: ReactNode;
-    /**
-     * Panel content
+     * Title of the panel
      */
-    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;
 }
 /**
  * DataTable column definition
@@ -902,6 +959,11 @@ 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;
 }
 /**
  * Pagination component properties
@@ -1002,6 +1064,11 @@ 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;
 }
 /**
  * Form component properties
@@ -1506,6 +1573,11 @@ 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;
 }
 /**
  * Avatar Group component properties
@@ -1527,6 +1599,11 @@ 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;
 }
 /**
  * Modal component props
@@ -1627,6 +1704,11 @@ interface BreadcrumbOptions$1 {
      * 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;
 }
 /**
  * Breadcrumb instance interface
@@ -1719,6 +1801,11 @@ 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'>;
 }
 /**
  * Popover component properties
@@ -1945,6 +2032,11 @@ 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;
 }
 /**
  * Rating component properties
@@ -5882,6 +5974,7 @@ declare const CHART: {
     EXPORT_GROUP_CLASS: string;
     EXPORT_DROPDOWN_CLASS: string;
     EXPORT_OPTION_CLASS: string;
+    SETTINGS_MENU_CLASS: string;
     TOOLBAR_GROUP_CLASS: string;
     TOOLBAR_SEPARATOR_CLASS: string;
     TOOLBAR_LABEL_CLASS: string;
@@ -6746,8 +6839,8 @@ declare function useEdgePanel(initialProps?: Partial<EdgePanelProps>): {
     containerRef: react.MutableRefObject<HTMLDivElement>;
     backdropRef: react.MutableRefObject<HTMLDivElement>;
     generateEdgePanelClass: (props: Partial<EdgePanelProps>) => string;
-    openPanel: () => void;
-    closePanel: () => void;
+    openPanel: (useFadeAnimation?: boolean) => void;
+    closePanel: (useFadeAnimation?: boolean) => void;
     handleBackdropClick: (event: React.MouseEvent<HTMLDivElement>) => void;
 };
 
@@ -7476,12 +7569,14 @@ declare function useLineChart(datasets: ChartDataset$1[], options?: LineChartOpt
         pointIndex: number;
         x: number;
         y: number;
+        clientX?: number;
+        clientY?: number;
     };
     processedDatasets: any[];
     handleZoom: (delta: number, centerX: number, centerY: number) => void;
     handlePan: (deltaX: number, deltaY: number) => void;
     resetView: () => void;
-    handlePointHover: (datasetIndex: number, pointIndex: number, x: number, y: number) => void;
+    handlePointHover: (datasetIndex: number, pointIndex: number, x: number, y: number, clientX: number, clientY: number) => void;
     handlePointLeave: () => void;
     calculateMovingAverage: (data: ChartDataPoint$1[], period: number) => ChartDataPoint$1[];
     calculateTrendLine: (data: ChartDataPoint$1[]) => (ChartDataPoint$1 | null)[];
@@ -7499,6 +7594,8 @@ declare function useLineChart(datasets: ChartDataset$1[], options?: LineChartOpt
         pointIndex: number;
         x: number;
         y: number;
+        clientX?: number;
+        clientY?: number;
     }>>;
 };
 
@@ -7586,8 +7683,10 @@ declare function useBarChart(datasets: ChartDataset$1[], options?: BarChartOptio
     hoveredBar: {
         datasetIndex: number;
         pointIndex: number;
-        x: number;
-        y: number;
+        chartX: number;
+        chartY: number;
+        clientX: number;
+        clientY: number;
     };
     animationProgress: number;
     isAnimating: boolean;
@@ -7609,15 +7708,17 @@ declare function useBarChart(datasets: ChartDataset$1[], options?: BarChartOptio
         x: number;
         y: number;
     };
-    handleBarHover: (datasetIndex: number, pointIndex: number, x: number, y: number) => void;
+    handleBarHover: (datasetIndex: number, pointIndex: number, chartX: number, chartY: number, clientX: number, clientY: number) => void;
     handleBarLeave: () => void;
     startAnimation: () => void;
     formatValue: (value: number) => string;
     setHoveredBar: react.Dispatch<react.SetStateAction<{
         datasetIndex: number;
         pointIndex: number;
-        x: number;
-        y: number;
+        chartX: number;
+        chartY: number;
+        clientX: number;
+        clientY: number;
     }>>;
     setAnimationProgress: react.Dispatch<react.SetStateAction<number>>;
     setIsAnimating: react.Dispatch<react.SetStateAction<boolean>>;
@@ -7712,7 +7813,7 @@ declare function usePieChart(data: ChartDataPoint$1[], options?: PieChartOptions
     selectedSlices: Set<number>;
     animationProgress: number;
     isAnimating: boolean;
-    handleSliceHover: (index: number, clientX?: number, clientY?: number) => void;
+    handleSliceHover: (index: number, clientX: number, clientY: number) => void;
     handleSliceLeave: () => void;
     handleSliceClick: (index: number) => void;
     startAnimation: () => void;
@@ -9124,6 +9225,51 @@ declare const DatePicker: react__default.ForwardRefExoticComponent<DatePickerPro
  */
 declare const Dropdown: react__default.FC<DropdownProps>;
 
+/**
+ * EdgePanel - A sliding panel component that appears from any screen edge
+ *
+ * @component
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <EdgePanel
+ *   title="My Panel"
+ *   isOpen={isOpen}
+ *   onOpenChange={setIsOpen}
+ *   position="start"
+ * >
+ *   <p>Panel content</p>
+ * </EdgePanel>
+ *
+ * // With glass effect
+ * <EdgePanel
+ *   title="Glass Panel"
+ *   isOpen={isOpen}
+ *   onOpenChange={setIsOpen}
+ *   position="end"
+ *   glass={true}
+ * >
+ *   <p>Panel with glass morphism</p>
+ * </EdgePanel>
+ *
+ * // With custom glass configuration
+ * <EdgePanel
+ *   title="Custom Glass"
+ *   isOpen={isOpen}
+ *   onOpenChange={setIsOpen}
+ *   position="start"
+ *   glass={{
+ *     mode: 'shader',
+ *     shaderVariant: 'liquidGlass',
+ *     displacementScale: 70,
+ *     blurAmount: 1.8,
+ *     saturation: 170,
+ *   }}
+ * >
+ *   <p>Panel with custom glass effect</p>
+ * </EdgePanel>
+ * ```
+ */
 declare const EdgePanel: react__default.FC<EdgePanelProps>;
 
 /**