@shohojdhara/atomix 0.3.4 → 0.3.6

package/dist/core.d.ts

@@ -0,0 +1,1289 @@
+import React$1, { ReactNode, HTMLAttributes, ElementType } from 'react';
+import * as _phosphor_icons_react from '@phosphor-icons/react';
+
+/**
+ * Part-Based Styling Props
+ *
+ * Type definitions for styling individual component parts with className and style props.
+ * This enables granular customization of component internals.
+ */
+
+/**
+ * Style properties for a component part
+ */
+interface PartStyleProps {
+    /** Additional CSS class name for the part */
+    className?: string;
+    /** Inline styles for the part */
+    style?: React$1.CSSProperties;
+}
+/**
+ * Generic component parts type
+ * T is a union of part names as strings
+ */
+type ComponentParts<T extends string> = {
+    [K in T]?: PartStyleProps;
+};
+/**
+ * Button component parts
+ */
+type ButtonParts = ComponentParts<'root' | 'icon' | 'label' | 'spinner'> & {
+    /** Root button element */
+    root?: PartStyleProps;
+    /** Icon wrapper element */
+    icon?: PartStyleProps;
+    /** Label/text wrapper element */
+    label?: PartStyleProps;
+    /** Loading spinner element */
+    spinner?: PartStyleProps;
+};
+/**
+ * Card component parts
+ */
+type CardParts = ComponentParts<'root' | 'header' | 'body' | 'footer' | 'title' | 'text' | 'image' | 'actions' | 'icon'> & {
+    /** Root card element */
+    root?: PartStyleProps;
+    /** Header section */
+    header?: PartStyleProps;
+    /** Body/content section */
+    body?: PartStyleProps;
+    /** Footer section */
+    footer?: PartStyleProps;
+    /** Title element */
+    title?: PartStyleProps;
+    /** Text/description element */
+    text?: PartStyleProps;
+    /** Image element */
+    image?: PartStyleProps;
+    /** Actions container */
+    actions?: PartStyleProps;
+    /** Icon element */
+    icon?: PartStyleProps;
+};
+/**
+ * Badge component parts
+ */
+type BadgeParts = ComponentParts<'root' | 'icon' | 'label'> & {
+    /** Root badge element */
+    root?: PartStyleProps;
+    /** Icon element */
+    icon?: PartStyleProps;
+    /** Label/text element */
+    label?: PartStyleProps;
+};
+
+/**
+ * Slot configuration with multiple rendering options
+ */
+interface SlotProps<T = any> {
+    /** Static children to render */
+    children?: React$1.ReactNode;
+    /** Render function with access to slot props */
+    render?: (props: T) => React$1.ReactNode;
+    /** Custom component to render */
+    component?: React$1.ComponentType<T>;
+}
+/**
+ * Slot props for Button component
+ */
+interface ButtonRootSlotProps {
+    className: string;
+    style?: React$1.CSSProperties;
+    children: React$1.ReactNode;
+    disabled?: boolean;
+    loading?: boolean;
+    onClick?: React$1.MouseEventHandler<HTMLButtonElement>;
+    type?: 'button' | 'submit' | 'reset';
+    'aria-label'?: string;
+    'aria-disabled'?: boolean;
+    'aria-busy'?: boolean;
+}
+interface ButtonIconSlotProps {
+    className: string;
+    style?: React$1.CSSProperties;
+    children: React$1.ReactNode;
+    size?: 'sm' | 'md' | 'lg';
+}
+interface ButtonLabelSlotProps {
+    className: string;
+    style?: React$1.CSSProperties;
+    children: React$1.ReactNode;
+}
+interface ButtonSpinnerSlotProps {
+    className: string;
+    style?: React$1.CSSProperties;
+    size?: 'sm' | 'md' | 'lg';
+    variant?: string;
+}
+/**
+ * Slot props for Badge component
+ */
+interface BadgeRootSlotProps {
+    className: string;
+    style?: React$1.CSSProperties;
+    children: React$1.ReactNode;
+    onClick?: React$1.MouseEventHandler<HTMLSpanElement>;
+    role?: string;
+    'aria-label'?: string;
+}
+interface BadgeIconSlotProps {
+    className: string;
+    style?: React$1.CSSProperties;
+    children: React$1.ReactNode;
+}
+interface BadgeLabelSlotProps {
+    className: string;
+    style?: React$1.CSSProperties;
+    children: React$1.ReactNode;
+}
+
+/**
+ * CSS Variables Constants
+ *
+ * Comprehensive CSS custom property definitions for all components.
+ * These provide type-safe access to component styling variables.
+ */
+/**
+ * Button CSS Variables
+ */
+declare const BUTTON_CSS_VARS: {
+    readonly '--atomix-button-bg': "background-color";
+    readonly '--atomix-button-color': "text color";
+    readonly '--atomix-button-padding-x': "horizontal padding";
+    readonly '--atomix-button-padding-y': "vertical padding";
+    readonly '--atomix-button-border-radius': "border radius";
+    readonly '--atomix-button-border-width': "border width";
+    readonly '--atomix-button-border-color': "border color";
+    readonly '--atomix-button-font-size': "font size";
+    readonly '--atomix-button-font-weight': "font weight";
+    readonly '--atomix-button-font-family': "font family";
+    readonly '--atomix-button-line-height': "line height";
+    readonly '--atomix-button-min-width': "minimum width";
+    readonly '--atomix-button-min-height': "minimum height";
+    readonly '--atomix-button-transition': "transition";
+    readonly '--atomix-button-hover-bg': "hover background";
+    readonly '--atomix-button-hover-color': "hover text color";
+    readonly '--atomix-button-hover-border-color': "hover border color";
+    readonly '--atomix-button-active-bg': "active background";
+    readonly '--atomix-button-active-color': "active text color";
+    readonly '--atomix-button-focus-ring-color': "focus ring color";
+    readonly '--atomix-button-focus-ring-width': "focus ring width";
+    readonly '--atomix-button-disabled-opacity': "disabled opacity";
+    readonly '--atomix-button-disabled-bg': "disabled background";
+    readonly '--atomix-button-icon-size': "icon size";
+    readonly '--atomix-button-icon-gap': "icon spacing";
+    readonly '--atomix-button-spinner-size': "spinner size";
+    readonly '--atomix-button-label-font-weight': "label font weight";
+};
+/**
+ * Card CSS Variables
+ */
+declare const CARD_CSS_VARS: {
+    readonly '--atomix-card-bg': "background color";
+    readonly '--atomix-card-color': "text color";
+    readonly '--atomix-card-padding': "padding";
+    readonly '--atomix-card-border-radius': "border radius";
+    readonly '--atomix-card-border-width': "border width";
+    readonly '--atomix-card-border-color': "border color";
+    readonly '--atomix-card-box-shadow': "box shadow";
+    readonly '--atomix-card-width': "width";
+    readonly '--atomix-card-max-width': "maximum width";
+    readonly '--atomix-card-hover-bg': "hover background";
+    readonly '--atomix-card-hover-shadow': "hover shadow";
+    readonly '--atomix-card-hover-transform': "hover transform";
+    readonly '--atomix-card-header-padding': "header padding";
+    readonly '--atomix-card-header-bg': "header background";
+    readonly '--atomix-card-header-border-bottom': "header border bottom";
+    readonly '--atomix-card-body-padding': "body padding";
+    readonly '--atomix-card-body-font-size': "body font size";
+    readonly '--atomix-card-footer-padding': "footer padding";
+    readonly '--atomix-card-footer-bg': "footer background";
+    readonly '--atomix-card-footer-border-top': "footer border top";
+    readonly '--atomix-card-title-font-size': "title font size";
+    readonly '--atomix-card-title-font-weight': "title font weight";
+    readonly '--atomix-card-title-color': "title color";
+    readonly '--atomix-card-title-margin-bottom': "title margin bottom";
+    readonly '--atomix-card-image-border-radius': "image border radius";
+    readonly '--atomix-card-image-max-height': "image max height";
+};
+/**
+ * Badge CSS Variables
+ */
+declare const BADGE_CSS_VARS: {
+    readonly '--atomix-badge-bg': "background color";
+    readonly '--atomix-badge-color': "text color";
+    readonly '--atomix-badge-padding-x': "horizontal padding";
+    readonly '--atomix-badge-padding-y': "vertical padding";
+    readonly '--atomix-badge-border-radius': "border radius";
+    readonly '--atomix-badge-font-size': "font size";
+    readonly '--atomix-badge-font-weight': "font weight";
+    readonly '--atomix-badge-line-height': "line height";
+    readonly '--atomix-badge-icon-size': "icon size";
+    readonly '--atomix-badge-icon-gap': "icon spacing";
+};
+/**
+ * Type-safe CSS variable keys by component
+ */
+type ButtonCSSVariable = keyof typeof BUTTON_CSS_VARS;
+type CardCSSVariable = keyof typeof CARD_CSS_VARS;
+type BadgeCSSVariable = keyof typeof BADGE_CSS_VARS;
+
+/**
+ * Displacement mode for glass effect
+ */
+type DisplacementMode = 'standard' | 'polar' | 'prominent' | 'shader';
+/**
+ * Mouse position coordinates
+ */
+interface MousePosition {
+    x: number;
+    y: 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
+ * }}
+ */
+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
+ * }}
+ */
+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
+ */
+interface AtomixGlassProps {
+    children: React.ReactNode;
+    displacementScale?: number;
+    blurAmount?: number;
+    saturation?: number;
+    aberrationIntensity?: number;
+    elasticity?: number;
+    cornerRadius?: number;
+    globalMousePosition?: MousePosition;
+    mouseOffset?: MousePosition;
+    mouseContainer?: React.RefObject<HTMLElement | null> | null;
+    className?: string;
+    padding?: string;
+    style?: React.CSSProperties;
+    overLight?: OverLightConfig;
+    mode?: DisplacementMode;
+    onClick?: () => void;
+    /**
+     * Shader variant for shader mode
+     */
+    shaderVariant?: 'liquidGlass' | 'premiumGlass';
+    /**
+     * Accessibility props
+     */
+    'aria-label'?: string;
+    'aria-describedby'?: string;
+    role?: string;
+    tabIndex?: number;
+    /**
+     * Performance and accessibility options
+     */
+    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;
+}
+/**
+ * Common component size options
+ */
+type Size = 'sm' | 'md' | 'lg';
+/**
+ * Theme color variants
+ */
+type ThemeColor = 'primary' | 'secondary' | 'tertiary' | 'invert' | 'brand' | 'error' | 'success' | 'warning' | 'info' | 'light' | 'dark';
+/**
+ * Component variant including theme colors and outline variants
+ */
+type Variant = ThemeColor | `outline-${ThemeColor}` | 'link';
+/**
+ * Base component properties interface
+ */
+interface BaseComponentProps {
+    /**
+     * Additional CSS class names
+     */
+    className?: string;
+    /**
+     * Component disabled state
+     */
+    disabled?: boolean;
+    /**
+     * Component children
+     */
+    children?: ReactNode;
+    /**
+     * Inline style for the component root element
+     */
+    style?: React.CSSProperties;
+}
+/**
+ * Icon position options
+ */
+type IconPosition = 'left' | 'right';
+type listvariant = 'dash' | 'number' | 'text';
+/**;
+ * List component properties
+ */
+interface ListProps extends BaseComponentProps {
+    children?: ReactNode;
+    /**
+     * List items
+     */
+    items?: ReactNode[];
+    /**
+     * List variant
+     */
+    variant?: listvariant;
+    /**
+     * List size
+     */
+    size?: Size;
+    /**
+     * Whether the list is ordered
+     */
+    ordered?: boolean;
+    /**
+     * Whether to display list items inline
+     */
+    inline?: boolean;
+}
+/**
+ * List group component properties
+ */
+interface ListGroupProps$1 extends BaseComponentProps {
+    /**
+     * List group children
+     */
+    children?: ReactNode;
+    /**
+     * List group variant
+     */
+    variant?: Variant;
+    /**
+     * List group size
+     */
+    size?: Size;
+}
+/**
+ * Button component properties
+ */
+interface ButtonProps extends BaseComponentProps {
+    /**
+     * Button contents
+     */
+    label?: string;
+    /**
+     * Optional click handler
+     */
+    onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+    /**
+     * Button variant
+     */
+    variant?: Variant;
+    /**
+     * Button size
+     */
+    size?: Size;
+    /**
+     * Part-based styling (NEW)
+     * Allows styling individual button parts
+     */
+    parts?: ButtonParts;
+    /**
+     * CSS variable overrides (NEW)
+     * Runtime CSS custom property overrides
+     */
+    cssVars?: Partial<Record<ButtonCSSVariable, string | number>>;
+    /**
+     * Slot-based customization (NEW)
+     * Complete control over rendering
+     */
+    slots?: {
+        root?: SlotProps<ButtonRootSlotProps>;
+        icon?: SlotProps<ButtonIconSlotProps>;
+        label?: SlotProps<ButtonLabelSlotProps>;
+        spinner?: SlotProps<ButtonSpinnerSlotProps>;
+    };
+    /**
+     * Optional icon (ReactNode)
+     */
+    icon?: ReactNode;
+    /**
+     * Icon name from Phosphor Icons (simplified icon prop)
+     * When provided, automatically creates an Icon component
+     * @example iconName="Rocket" iconSize="sm"
+     */
+    iconName?: string;
+    /**
+     * Icon size (used with iconName prop)
+     */
+    iconSize?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    /**
+     * Icon position (start or end)
+     */
+    iconPosition?: 'start' | 'end';
+    /**
+     * Icon only button
+     */
+    iconOnly?: boolean;
+    /**
+     * Make button fully rounded (pill shape)
+     */
+    rounded?: boolean;
+    /**
+     * Full width button (takes 100% of container width)
+     */
+    fullWidth?: boolean;
+    /**
+     * Block-level button (full width with block display)
+     */
+    block?: boolean;
+    /**
+     * Loading state - shows spinner and disables button
+     */
+    loading?: boolean;
+    /**
+     * Custom loading text (replaces label when loading)
+     */
+    loadingText?: string;
+    /**
+     * Active state
+     */
+    active?: boolean;
+    /**
+     * Selected state
+     */
+    selected?: boolean;
+    /**
+     * Button type attribute
+     */
+    type?: 'button' | 'submit' | 'reset';
+    /**
+     * 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;
+    /**
+     * Optional hover handler
+     */
+    onHover?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+    /**
+     * Optional focus handler
+     */
+    onFocus?: (event: React.FocusEvent<HTMLButtonElement>) => void;
+    /**
+     * Optional blur handler
+     */
+    onBlur?: (event: React.FocusEvent<HTMLButtonElement>) => void;
+    /**
+     * ARIA label for accessibility
+     */
+    ariaLabel?: string;
+    /**
+     * ARIA described by reference
+     */
+    ariaDescribedBy?: string;
+    /**
+     * ARIA expanded state (for toggle buttons)
+     */
+    ariaExpanded?: boolean;
+    /**
+     * ARIA controls reference
+     */
+    ariaControls?: string;
+    /**
+     * Tab index for keyboard navigation
+     */
+    tabIndex?: number;
+    /**
+     * Link URL - when provided, button renders as Next.js Link or anchor element
+     * Automatically wraps with Next.js Link if available, otherwise uses anchor
+     */
+    href?: string;
+    /**
+     * Link target attribute (used with href)
+     */
+    target?: '_blank' | '_self' | '_parent' | '_top';
+    /**
+     * Custom style for the button
+     */
+    style?: React.CSSProperties;
+}
+/**
+ * Badge component properties
+ */
+interface BadgeProps extends BaseComponentProps {
+    /**
+     * Badge text content
+     */
+    label: string;
+    /**
+     * Badge color variant
+     */
+    variant?: ThemeColor;
+    /**
+     * Badge size
+     */
+    size?: Size;
+    /**
+     * 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;
+    /**
+     * Custom style for the badge
+     */
+    style?: React.CSSProperties;
+    /**
+     * Part-based styling for granular customization
+     * @example
+     * parts={{
+     *   root: { className: 'custom-badge', style: { boxShadow: '0 2px 8px rgba(0,0,0,0.1)' } },
+     *   icon: { style: { fontSize: '18px' } },
+     *   label: { className: 'badge-label' }
+     * }}
+     */
+    parts?: BadgeParts;
+    /**
+     * CSS variable overrides for runtime customization
+     * @example
+     * cssVars={{
+     *   '--atomix-badge-bg': '#FF0000',
+     *   '--atomix-badge-border-radius': '20px'
+     * }}
+     */
+    cssVars?: Partial<Record<BadgeCSSVariable, string | number>>;
+    /**
+     * Slot-based customization for complete control
+     * @example
+     * slots={{
+     *   root: { render: (props) => <motion.span {...props} /> },
+     *   icon: { component: CustomIcon }
+     * }}
+     */
+    slots?: {
+        root?: SlotProps<BadgeRootSlotProps>;
+        icon?: SlotProps<BadgeIconSlotProps>;
+        label?: SlotProps<BadgeLabelSlotProps>;
+    };
+}
+/**
+ * Callout component properties
+ */
+interface CalloutProps extends BaseComponentProps {
+    /**
+     * Callout title
+     */
+    title?: ReactNode;
+    /**
+     * Callout content
+     */
+    children?: ReactNode;
+    /**
+     * Optional icon
+     */
+    icon?: ReactNode;
+    /**
+     * Callout variant
+     */
+    variant?: ThemeColor;
+    /**
+     * Optional close handler
+     */
+    onClose?: () => void;
+    /**
+     * Optional action buttons
+     */
+    actions?: ReactNode;
+    /**
+     * Display in one line mode
+     */
+    oneLine?: boolean;
+    /**
+     * 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;
+    /**
+     * Custom style for the callout
+     */
+    style?: React.CSSProperties;
+}
+/**
+ * Accordion component properties
+ */
+interface AccordionProps$1 extends BaseComponentProps {
+    /**
+     * Title of the accordion
+     */
+    title: string;
+    /**
+     * Content to be shown when accordion is expanded
+     */
+    children: ReactNode;
+    /**
+     * Whether the accordion is initially open
+     */
+    defaultOpen?: boolean;
+    /**
+     * Position of the icon (right or left)
+     */
+    iconPosition?: IconPosition;
+    /**
+     * Custom icon for the accordion
+     */
+    icon?: ReactNode;
+    /**
+     * Whether the accordion is open
+     */
+    isOpen?: boolean;
+    /**
+     * Whether the accordion is disabled
+     */
+    disabled?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    /**
+     * Optional open handler
+     */
+    onOpen?: () => void;
+    /**
+     * Optional close handler
+     */
+    onClose?: () => void;
+    /**
+     * 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;
+}
+/**
+ * Spinner component properties
+ */
+interface SpinnerProps extends BaseComponentProps {
+    /**
+     * Spinner color variant
+     */
+    variant?: ThemeColor;
+    /**
+     * Spinner size
+     */
+    size?: Size;
+    /**
+     * 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;
+}
+/**
+ * Card component props
+ */
+interface CardProps extends BaseComponentProps {
+    /**
+     * Card header content
+     */
+    header?: ReactNode;
+    /**
+     * Card image source URL
+     */
+    image?: string;
+    /**
+     * Alternative text for the image
+     */
+    imageAlt?: string;
+    /**
+     * Card title
+     */
+    title?: ReactNode;
+    /**
+     * Card text content
+     */
+    text?: ReactNode;
+    /**
+     * Card actions (buttons, links, etc.)
+     */
+    actions?: ReactNode;
+    /**
+     * Card icon
+     */
+    icon?: ReactNode;
+    /**
+     * Card footer content
+     */
+    footer?: ReactNode;
+    /**
+     * Size variant of the card
+     */
+    size?: Size;
+    /**
+     * Color variant of the card
+     */
+    variant?: ThemeColor;
+    /**
+     * Appearance style of the card
+     */
+    appearance?: 'filled' | 'outlined' | 'ghost' | 'elevated';
+    /**
+     * Elevation level (shadow depth)
+     */
+    elevation?: 'none' | 'sm' | 'md' | 'lg' | 'xl';
+    /**
+     * Enable hover effects (adds hover elevation and transition)
+     */
+    hoverable?: boolean;
+    /**
+     * Elevation level on hover (only applies when hoverable is true)
+     */
+    hoverElevation?: 'none' | 'sm' | 'md' | 'lg' | 'xl';
+    /**
+     * Row layout (horizontal card)
+     */
+    row?: boolean;
+    /**
+     * Flat style (no padding on image container)
+     */
+    flat?: boolean;
+    /**
+     * Active state
+     */
+    active?: boolean;
+    /**
+     * Disabled state - prevents interactions and shows visual feedback
+     */
+    disabled?: boolean;
+    /**
+     * Loading state - shows loading indicator
+     */
+    loading?: boolean;
+    /**
+     * Selected state - indicates card is selected
+     */
+    selected?: boolean;
+    /**
+     * Interactive state - makes card clickable with proper ARIA attributes
+     */
+    interactive?: 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<AtomixGlassProps, 'children'>;
+    /**
+     * Link URL - when provided, card renders as an anchor element
+     */
+    href?: string;
+    /**
+     * Link target attribute
+     */
+    target?: '_blank' | '_self' | '_parent' | '_top';
+    /**
+     * Card content (body)
+     */
+    children?: ReactNode;
+    /**
+     * Card styles
+     */
+    style?: React.CSSProperties;
+    /**
+     * Card className
+     */
+    className?: string;
+    /**
+     * Optional click handler
+     */
+    onClick?: (event: React.MouseEvent<HTMLDivElement | HTMLAnchorElement>) => void;
+    /**
+     * Optional hover handler
+     */
+    onHover?: (event: React.MouseEvent<HTMLDivElement | HTMLAnchorElement>) => void;
+    /**
+     * Optional focus handler
+     */
+    onFocus?: (event: React.FocusEvent<HTMLDivElement | HTMLAnchorElement>) => void;
+    /**
+     * ARIA role for the card
+     */
+    role?: 'article' | 'button' | 'link' | 'region';
+    /**
+     * ARIA label for accessibility
+     */
+    ariaLabel?: string;
+    /**
+     * ARIA described by reference
+     */
+    ariaDescribedBy?: string;
+    /**
+     * Tab index for keyboard navigation
+     */
+    tabIndex?: number;
+    /**
+     * CSS variable overrides
+     * Runtime CSS custom property overrides
+     * @example
+     * cssVars={{
+     *   '--atomix-card-bg': 'rgba(255, 255, 255, 0.1)',
+     *   '--atomix-card-border-radius': '24px'
+     * }}
+     */
+    cssVars?: Partial<Record<CardCSSVariable, string | number>>;
+    /**
+     * Part-based styling
+     * Allows styling individual card parts
+     */
+    parts?: CardParts;
+    /**
+     * Slot-based customization
+     * Complete control over rendering
+     */
+    slots?: {
+        root?: (props: SlotProps) => ReactNode;
+        header?: (props: SlotProps) => ReactNode;
+        body?: (props: SlotProps) => ReactNode;
+        footer?: (props: SlotProps) => ReactNode;
+    };
+}
+/**
+ * Elevation Card component props
+ */
+interface ElevationCardProps extends CardProps {
+    /**
+     * CSS class for elevation effect
+     */
+    elevationClass?: string;
+}
+
+type AccordionProps = AccordionProps$1;
+declare const Accordion: React$1.FC<AccordionProps>;
+
+declare const Badge: React$1.FC<BadgeProps>;
+
+interface ContainerProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * The content to be rendered within the container
+     */
+    children: ReactNode;
+    /**
+     * Additional CSS class names
+     */
+    className?: string;
+    /**
+     * Container type:
+     * - undefined: responsive container with max-width at each breakpoint
+     * - 'fluid': full width container
+     * - 'sm', 'md', 'lg', 'xl', 'xxl': responsive container with max-width at specified breakpoint
+     */
+    type?: 'fluid' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
+}
+
+/**
+ * Block-specific constants
+ */
+declare const BLOCK: {
+    BASE_CLASS: string;
+    SPACING_PREFIX: string;
+    CLASSES: {
+        SPACING_XS: string;
+        SPACING_SM: string;
+        SPACING_MD: string;
+        SPACING_LG: string;
+        SPACING_XL: string;
+        SPACING_NONE: string;
+        FULL_WIDTH: string;
+        BG_PRIMARY: string;
+        BG_SECONDARY: string;
+        BG_TERTIARY: string;
+        BG_INVERT: string;
+        BG_BRAND: string;
+        BG_ERROR: string;
+        BG_SUCCESS: string;
+        BG_WARNING: string;
+        BG_INFO: string;
+        BG_LIGHT: string;
+        BG_DARK: string;
+    };
+    SPACING: {
+        SIZES: readonly ["xs", "sm", "md", "lg", "xl", "none"];
+        DEFAULT: "md";
+    };
+};
+
+interface BlockProps extends HTMLAttributes<HTMLElement> {
+    /**
+     * The content to be rendered within the block
+     */
+    children: ReactNode;
+    /**
+     * The HTML element to render as
+     * @default 'section'
+     */
+    as?: 'section' | 'div' | 'article' | 'aside' | 'main';
+    /**
+     * Spacing size for vertical padding
+     * @default 'md'
+     */
+    spacing?: (typeof BLOCK.SPACING.SIZES)[number];
+    /**
+     * Container configuration
+     */
+    container?: {
+        /**
+         * Container type for content width
+         * @default undefined
+         */
+        type?: ContainerProps['type'];
+        /**
+         * Additional container classes
+         */
+        className?: string;
+    };
+    /**
+     * Whether to enable full-width content
+     * @default false
+     */
+    fullWidth?: boolean;
+    /**
+     * Additional CSS class names
+     */
+    className?: string;
+    /**
+     * Custom styles object
+     */
+    style?: React$1.CSSProperties;
+    /**
+     * Background color variant
+     */
+    background?: 'primary' | 'secondary' | 'tertiary' | 'invert' | 'brand' | 'error' | 'success' | 'warning' | 'info' | 'light';
+}
+/**
+ * Block component for creating structured section layouts.
+ * Provides consistent spacing, backgrounds, and container behavior for content sections.
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <Block>
+ *   <h2>Section Title</h2>
+ *   <p>Section content goes here...</p>
+ * </Block>
+ *
+ * // With custom spacing and background
+ * <Block spacing="lg" background="subtle">
+ *   <h2>Featured Section</h2>
+ *   <p>This section has extra padding and a subtle background.</p>
+ * </Block>
+ *
+ * // Full-width with custom container
+ * <Block fullWidth background="primary">
+ *   <Container type="lg">
+ *     <h2>Hero Section</h2>
+ *     <p>Full-width section with centered content.</p>
+ *   </Container>
+ * </Block>
+ *
+ * // As article element
+ * <Block as="article" spacing="xl" background="accent">
+ *   <h1>Blog Post</h1>
+ *   <p>Article content...</p>
+ * </Block>
+ * ```
+ */
+declare const Block: React$1.ForwardRefExoticComponent<BlockProps & React$1.RefAttributes<HTMLDivElement>>;
+
+interface BreadcrumbItem {
+    /**
+     * Text to display
+     */
+    label: string;
+    /**
+     * URL for the breadcrumb item
+     */
+    href?: string;
+    /**
+     * Whether this item is active (current page)
+     */
+    active?: boolean;
+    /**
+     * Optional icon to display before the label
+     */
+    icon?: ReactNode;
+    /**
+     * Optional click handler
+     */
+    onClick?: (event: React$1.MouseEvent<HTMLAnchorElement>) => void;
+    /**
+     * Custom style for the breadcrumb item
+     */
+    style?: React$1.CSSProperties;
+    /**
+     * Additional className
+     */
+    className?: string;
+}
+interface BreadcrumbProps {
+    /**
+     * Array of breadcrumb items
+     */
+    items: BreadcrumbItem[];
+    /**
+     * Custom divider character or element
+     */
+    divider?: ReactNode;
+    /**
+     * Additional className
+     */
+    className?: string;
+    /**
+     * Aria label for the navigation
+     */
+    ariaLabel?: string;
+    /**
+     * Optional custom link component
+     */
+    LinkComponent?: React$1.ElementType;
+    /**
+     * Custom style for the breadcrumb
+     */
+    style?: React$1.CSSProperties;
+}
+declare const Breadcrumb: React$1.FC<BreadcrumbProps>;
+
+type ButtonAsProp = {
+    as?: ElementType;
+    to?: string;
+    href?: string;
+    LinkComponent?: React$1.ComponentType<any>;
+    [key: string]: any;
+};
+declare const Button: React$1.MemoExoticComponent<React$1.ForwardRefExoticComponent<Omit<ButtonProps & ButtonAsProp, "ref"> & React$1.RefAttributes<HTMLButtonElement | HTMLAnchorElement>>>;
+
+declare const Card: React$1.MemoExoticComponent<React$1.ForwardRefExoticComponent<CardProps & React$1.RefAttributes<HTMLAnchorElement | HTMLDivElement>>>;
+
+declare const ElevationCard: React$1.FC<ElevationCardProps>;
+
+/**
+ * Callout component for displaying important messages, notifications, or alerts
+ */
+declare const Callout: React$1.FC<CalloutProps>;
+
+type IconSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+type IconWeight = 'thin' | 'light' | 'regular' | 'bold' | 'fill' | 'duotone';
+type PhosphorIconsType = Exclude<keyof typeof _phosphor_icons_react, 'Icon' | 'IconContext' | 'IconBase' | 'IconProps' | 'createIcon' | 'default' | 'SSR'>;
+interface IconProps {
+    /**
+     * Icon name from Phosphor Icons
+     */
+    name: PhosphorIconsType;
+    /**
+     * Icon size
+     */
+    size?: IconSize | number;
+    /**
+     * Icon weight/style
+     */
+    weight?: IconWeight;
+    /**
+     * Icon color
+     */
+    color?: string;
+    /**
+     * Additional CSS class names
+     */
+    className?: string;
+    /**
+     * Custom style
+     */
+    style?: React$1.CSSProperties;
+    /**
+     * Alt text for accessibility
+     */
+    alt?: string;
+}
+/**
+ * Icon component that displays a Phosphor icon
+ */
+declare const Icon: React$1.FC<IconProps>;
+
+declare const List: React$1.FC<ListProps>;
+
+type ListGroupProps = ListGroupProps$1;
+declare const ListGroup: React$1.FC<ListGroupProps>;
+
+declare const Spinner: React$1.FC<SpinnerProps>;
+
+export { Accordion, Badge, Block, Breadcrumb, Button, Callout, Card, ElevationCard, Icon, List, ListGroup, Spinner };
+export type { AccordionProps, BadgeProps, BlockProps, BreadcrumbProps, ButtonProps, CalloutProps, CardProps, ElevationCardProps, IconProps, ListGroupProps, ListProps, SpinnerProps };