atomicuilibrary 0.0.1

package/dist/types/components/advanced-data-table/types.d.ts

@@ -0,0 +1,120 @@
+export interface TableColumn {
+    id: string;
+    label: string;
+    field?: string;
+    sortable?: boolean;
+    filterable?: boolean;
+    editable?: boolean;
+    width?: string;
+    minWidth?: string;
+    align?: 'left' | 'center' | 'right';
+    visible?: boolean;
+    sticky?: boolean;
+    render?: (value: any, row: any, rowIndex: number) => string | HTMLElement;
+    children?: TableColumn[];
+    type?: 'text' | 'number' | 'date' | 'boolean' | 'select' | 'custom' | 'radio' | 'checkbox' | 'rating' | 'image' | 'password' | 'datetime' | 'time' | 'switch' | 'email' | 'url' | 'tel';
+    selectOptions?: {
+        label: string;
+        value: any;
+    }[];
+    radioOptions?: {
+        label: string;
+        value: any;
+    }[];
+    format?: (value: any) => string;
+    groupBy?: boolean;
+    groupable?: boolean;
+    maxRating?: number;
+    imageStyle?: {
+        width?: string;
+        height?: string;
+        borderRadius?: string;
+    };
+    aggregation?: ('sum' | 'avg' | 'min' | 'max' | 'count' | 'custom')[];
+    validator?: (value: any, row: any) => string | null | boolean;
+}
+export interface TableConfig {
+    columns: TableColumn[];
+    data: TableRow[];
+    selectable?: boolean;
+    multiSelect?: boolean;
+    editable?: boolean;
+    stickyHeader?: boolean;
+    pagination?: boolean;
+    pageSize?: number;
+    pageSizeOptions?: number[];
+    searchable?: boolean;
+    sortable?: boolean;
+    filterable?: boolean;
+    columnReorder?: boolean;
+    columnVisibility?: boolean;
+    rowHeight?: 'compact' | 'normal' | 'comfortable';
+    striped?: boolean;
+    hoverable?: boolean;
+    bordered?: boolean;
+    loading?: boolean;
+    emptyMessage?: string;
+    serverSide?: boolean;
+    totalRows?: number;
+    exportable?: boolean;
+    responsive?: boolean;
+    grouping?: GroupConfig;
+    treeData?: boolean;
+}
+export interface TableRow {
+    id: string | number;
+    children?: TableRow[];
+    _depth?: number;
+    _hasChildren?: boolean;
+    [key: string]: any;
+}
+export interface SortConfig {
+    field: string;
+    direction: 'asc' | 'desc' | null;
+}
+export interface FilterConfig {
+    [field: string]: string | number | boolean | null;
+}
+export interface GroupConfig {
+    field: string;
+    expandByDefault?: boolean;
+    showCount?: boolean;
+    customLabel?: (value: any, count: number) => string;
+}
+export interface PaginationState {
+    currentPage: number;
+    pageSize: number;
+    totalPages: number;
+    totalRows: number;
+}
+export interface TableState {
+    selectedRows: Set<string | number>;
+    sortConfig: SortConfig;
+    filterConfig: FilterConfig;
+    searchQuery: string;
+    pagination: PaginationState;
+    editingCell: {
+        rowId: string | number;
+        field: string;
+    } | null;
+    columnOrder: string[];
+    visibleColumns: Set<string>;
+    columnWidths: Map<string, number>;
+    expandedGroups: Set<string>;
+    groupBy: string | null;
+    expandedRows: Set<string | number>;
+    virtualVisibleRange: {
+        start: number;
+        end: number;
+    };
+    focusedCell: {
+        rowId: string | number;
+        field: string;
+    } | null;
+}
+export interface ExportOptions {
+    format: 'csv' | 'excel' | 'json';
+    fileName?: string;
+    selectedOnly?: boolean;
+    visibleColumnsOnly?: boolean;
+}

package/dist/types/components/anchor/anchor.d.ts

@@ -0,0 +1,133 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import { AnchorItem } from './types';
+import { BasicSize, FourSidePosition, Indicator, LeftRight, NumberStyle, Orientation, Theme } from '../../types/common.type';
+export declare class Anchor {
+    el: HTMLElement;
+    /** Array of anchor items or JSON string. Replaces old `links` prop. */
+    items: AnchorItem[] | string;
+    /** Backward-compatible JSON string prop (same as items) */
+    links: string;
+    /** Orientation / mode: Orientation */
+    mode: Orientation;
+    /** Alias for mode */
+    orientation: Orientation;
+    /** Position when sticky */
+    position: FourSidePosition;
+    /** Currently active item id */
+    activeItem: string;
+    /** Alias for activeItem (backward-compat) */
+    activeLink: string;
+    /** Offset from top when scrolling to section */
+    scrollOffset: number;
+    /** Emit navigate event instead of browser navigation */
+    routerNavigate: boolean;
+    /** Auto-load FontAwesome icons */
+    loadIcons: boolean;
+    /** Stick the component using CSS position:sticky */
+    sticky: boolean;
+    /** CSS selector of scrollable container. Defaults to window. */
+    scrollContainer: string;
+    /** Enable smooth scrolling behavior */
+    smoothScroll: boolean;
+    /** Show tooltip on hover */
+    showTooltip: boolean;
+    /** Show active indicator line/dot */
+    showIndicator: boolean;
+    /** Custom IntersectionObserver rootMargin */
+    observerRootMargin: string;
+    /** Use named slot per item instead of inline rendering */
+    useSlot: boolean;
+    /** Show numeric/alpha/roman numbering */
+    showNumbers: boolean;
+    /** Style of numbers shown */
+    numberStyle: NumberStyle;
+    /** Size variant */
+    size: BasicSize;
+    /** Theme variant */
+    theme: Theme;
+    /** Color of the active indicator */
+    activeColor: string;
+    /** Text alignment inside items */
+    alignment: LeftRight | 'center';
+    /** Update URL hash on navigation */
+    updateHash: boolean;
+    /** Enable affix/sticky behavior on scroll */
+    affix: boolean;
+    /** Scroll threshold (px) before affix kicks in */
+    affixOffset: number;
+    /** Indicator type: 'line' or 'dot' */
+    indicator: Indicator;
+    /** CSS selector of container to auto-generate links from h1-h4 */
+    autoGenContainer: string;
+    /** Show scroll progress bar */
+    showProgress: boolean;
+    /** Enable keyboard arrow navigation between items */
+    arrowNavigation: boolean;
+    /** Allow items with children to be collapsed */
+    collapsible: boolean;
+    /** Expand all collapsible items by default */
+    defaultExpanded: boolean;
+    derivedItems: AnchorItem[];
+    currentActive: string;
+    isAffixed: boolean;
+    scrollProgress: number;
+    expandedItems: Set<string>;
+    indicatorStyle: {
+        [key: string]: string;
+    };
+    private _observer;
+    private _onWindowScroll;
+    private _onContainerScroll;
+    private _onHashChange;
+    private linkElements;
+    private scrollTimeout;
+    anchorClick: EventEmitter<{
+        linkId: string;
+        targetId: string;
+    }>;
+    anchorItemClick: EventEmitter<{
+        id: string;
+        label: string;
+    }>;
+    activeItemChange: EventEmitter<{
+        id: string;
+        label: string;
+    }>;
+    navigate: EventEmitter<{
+        href: string;
+        target?: string;
+        rel?: string;
+    }>;
+    affixChange: EventEmitter<boolean>;
+    progressChange: EventEmitter<number>;
+    expandChange: EventEmitter<{
+        id: string;
+        expanded: boolean;
+    }>;
+    componentWillLoad(): void;
+    itemsChanged(): void;
+    handleAutoGenContainerChange(): void;
+    private parseItems;
+    private generateLinksFromContainer;
+    componentDidLoad(): void;
+    disconnectedCallback(): void;
+    private getParsedItems;
+    private flattenItems;
+    private expandAll;
+    private setupAffix;
+    private setupProgress;
+    private setupHashNavigation;
+    private setupScrollSpy;
+    private setActiveState;
+    private ensureVisible;
+    private scrollToSection;
+    private updateIndicatorPosition;
+    private handleItemClick;
+    private toggleExpand;
+    private handleKeyDown;
+    protected watchActiveItem(newVal: string): void;
+    setActive(id: string): Promise<void>;
+    private getNumberPrefix;
+    private renderItem;
+    render(): any;
+}

package/dist/types/components/anchor/types.d.ts

@@ -0,0 +1,17 @@
+import { IconItem, WithBadge } from '../../types/common.type';
+export interface AnchorItem extends IconItem, WithBadge {
+    /** Required id — used for navigation targeting and active tracking */
+    id: string;
+    /** Target attribute for the anchor link */
+    target?: string;
+    /** Tooltip to show on hover */
+    tooltip?: string;
+    /** href URL */
+    href?: string;
+    /** rel attribute */
+    rel?: string;
+    /** Nested child items */
+    children?: AnchorItem[];
+    /** Whether this item is disabled */
+    disabled?: boolean;
+}

package/dist/types/components/animate-on-scroll/animate-on-scroll.d.ts

@@ -0,0 +1,101 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import { AnimationEffect } from '../../types/common.type';
+export declare class AnimateOnScroll {
+    el: HTMLElement;
+    /**
+     * CSS classes to apply when element enters viewport
+     */
+    enterClass: AnimationEffect;
+    /**
+     * CSS classes to apply when element leaves viewport
+     */
+    leaveClass: string;
+    /**
+     * Threshold for intersection observer (0-1)
+     */
+    threshold: number;
+    /**
+     * Root margin for intersection observer
+     */
+    rootMargin: string;
+    /**
+     * Whether to animate only once or every time element enters viewport
+     */
+    once: boolean;
+    /**
+     * Animation duration in milliseconds
+     */
+    duration: number;
+    /**
+     * Animation delay in milliseconds
+     */
+    delay: number;
+    /**
+     * Animation easing function
+     */
+    easing: string;
+    /**
+     * CSS class or ID of the element to use as the scroll anchor
+     */
+    anchor: string;
+    /**
+     * Selector for the root element (scroll container)
+     */
+    root: string;
+    /**
+     * Blur amount for starting state (e.g. '5px')
+     * Renamed from 'blur' to avoid conflict with HTMLElement.blur()
+     */
+    blurAmount: string;
+    /**
+     * 3D Perspective value (e.g. '1000px')
+     */
+    perspective: string;
+    /**
+     * Stagger delay per child in ms (if children exist)
+     */
+    stagger: number;
+    /**
+     * The transform origin for rotation/flip animations (e.g. 'top' or 'center')
+     */
+    transformOrigin: string;
+    /**
+     * Distance for slide animations (e.g. '100px')
+     */
+    distance: string;
+    /**
+     * Whether to reset the animation when the element leaves the viewport in reverse (scrolling up)
+     */
+    mirror: boolean;
+    /**
+     * Whether to disable animations for users who prefer reduced motion
+     */
+    respectReducedMotion: boolean;
+    /**
+     * Whether to scrub the animation based on scroll position (parallax effect)
+     */
+    scrub: boolean;
+    /**
+      * Emitted when the animation starts (element enters/interacts)
+      */
+    scrollAnimationStart: EventEmitter<void>;
+    /**
+      * Emitted when the animation ends
+      */
+    scrollAnimationEnd: EventEmitter<void>;
+    isVisible: boolean;
+    hasAnimated: boolean;
+    private observer;
+    private contentEl;
+    private rafId;
+    private animationTimer;
+    componentDidLoad(): void;
+    disconnectedCallback(): void;
+    headerScrubChange(newValue: boolean): void;
+    private startScrubLoop;
+    private currentProgress;
+    private targetProgress;
+    private calculateScrollProgress;
+    private setupObserver;
+    render(): any;
+}

package/dist/types/components/aside-panel/aside-panel.d.ts

@@ -0,0 +1,249 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import { ContextMenuItem } from '../context-menu/types';
+import { AlignmentType, AsidePanelTheme, AsidePanelVariant, FourSidePosition } from '../../types/common.type';
+import { AnimationEffect } from '../../types/animation.type';
+export declare class AsidePanel {
+    /**
+     * Whether the aside panel is open
+     */
+    open: boolean;
+    /**
+     * Direction from which the panel slides in: 'left', 'right', 'top', 'bottom'
+     */
+    direction: FourSidePosition;
+    /**
+     * Width of the panel (for left/right) or height (for top/bottom)
+     */
+    size: string;
+    /**
+     * Enable 'Mini' mode (collapsed into a thin icon-bar)
+     */
+    mini: boolean;
+    /**
+     * Width/Height of the panel in its 'Mini' state
+     */
+    miniSize: string;
+    /**
+     * Prevent closing via overlay or escape (Locked state)
+     */
+    pinned: boolean;
+    /**
+     * Legacy variant support (maps to theme if set)
+     */
+    variant: AsidePanelVariant;
+    /**
+     * Visual theme: 'default' | 'glass' | 'radiant' | 'zenith'
+     */
+    theme: AsidePanelTheme;
+    /**
+     * Enable auditory haptics (Industrial click sounds)
+     */
+    haptic: boolean;
+    /**
+     * Enable 3D Parallax tilt effect on content
+     */
+    enableParallax: boolean;
+    /**
+     * Voice-Activated navigation (Hands-Free)
+     */
+    enableVoiceControl: boolean;
+    /**
+     * Sync group ID for broadcasting state across instances
+     */
+    syncGroup: string;
+    /**
+     * Scope to a specific container ID (teleports if necessary)
+     */
+    /**
+     * Whether the panel is in 'Maximized' (Full Screen) mode
+     */
+    maximized: boolean;
+    /**
+     * Whether the panel should automatically enter 'Mini' mode on sm screens
+     */
+    autoMini: boolean;
+    /**
+     * Global shortcut key to toggle the panel (requires Ctrl key, e.g. 'B')
+     */
+    toggleShortcut: string;
+    /**
+     * Whether to show the 3-dot action menu button in the toolbar
+     */
+    showActions: boolean;
+    /**
+     * Array of items for the action menu (3-dot)
+     */
+    actionItems: ContextMenuItem[] | string;
+    /**
+     * Stagger offset for multi-instance layouts (pixels)
+     */
+    stackOffset: number;
+    scope: string;
+    /**
+     * Whether to show the close button
+     */
+    closeable: boolean;
+    /**
+     * Whether clicking the overlay closes the panel
+     */
+    closeOnOverlayClick: boolean;
+    /**
+     * Whether to show the background overlay
+     */
+    showOverlay: boolean;
+    /**
+     * Whether the panel can be closed by pressing Escape key
+     */
+    closeOnEscape: boolean;
+    /**
+     * Whether the panel is resizable
+     */
+    resizable: boolean;
+    /**
+     * Color of the resize handle (e.g. '#3bf673')
+     */
+    resizeHandleColor: string;
+    /**
+     * Whether to show a visual indicator on the resize handle
+     */
+    showResizeIndicator: boolean;
+    /**
+     * Minimum size (width or height) in pixels
+     */
+    minSize: number;
+    /**
+     * Whether to enable Right-to-Left (RTL) mode
+     */
+    rtl: boolean;
+    /**
+     * Maximum size (width or height) in pixels
+     */
+    maxSize: number;
+    /**
+     * Backdrop blur amount (e.g., '8px')
+     */
+    backdropBlur: string;
+    /**
+     * Animation transition duration (e.g. '0.3s' or '500ms')
+     */
+    transitionDuration: string;
+    /**
+     * Animation style for opening and closing
+     * @default 'slide-in-out'
+     */
+    animationType: AnimationEffect;
+    /**
+     * Whether the panel is in a loading state
+     */
+    loading: boolean;
+    /**
+     * Diagnostic progress bar percentage (0-100, -1 to hide)
+     */
+    progress: number;
+    /**
+     * Status badge label for the header
+     */
+    badge: string;
+    /**
+     * Key to persist the panel's open state and size in localStorage
+     */
+    persistKey?: string;
+    /**
+     * Offset from the screen edge for 'floating' variant (e.g., '20px')
+     */
+    floatingOffset: string;
+    /**
+     * Secondary dimension size for 'floating' variant (height if left/right, width if top/bottom)
+     * If 'auto', it stretches to the full viewport minus offsets.
+     */
+    secondarySize: string;
+    /**
+     * Alignment along the secondary axis for 'floating' variant
+     */
+    floatingAlign: AlignmentType;
+    /**
+     * Background color of the panel
+     */
+    backgroundColor: string;
+    /**
+     * Event emitted when the panel is closed
+     */
+    asideClosed: EventEmitter<void>;
+    /**
+     * Event emitted when the panel is opened
+     */
+    asideOpened: EventEmitter<void>;
+    /**
+     * Event emitted when the panel is resized
+     */
+    asideResized: EventEmitter<{
+        size: number;
+    }>;
+    /**
+     * Event emitted when the 3-dot action menu is clicked
+     */
+    asideActionClick: EventEmitter<void>;
+    /**
+     * Event emitted when the state (open/mini) changes
+     */
+    asideStateChange: EventEmitter<{
+        open: boolean;
+        mini: boolean;
+    }>;
+    currentSize: number;
+    isResizing: boolean;
+    isListening: boolean;
+    mouseRotation: {
+        x: number;
+        y: number;
+    };
+    hostElement: HTMLElement;
+    private startPos;
+    private startSize;
+    private firstFocusableEl;
+    private lastFocusableEl;
+    watchOpenHandler(newValue: boolean): void;
+    watchMiniHandler(): void;
+    handleWindowResize(): void;
+    componentWillLoad(): void;
+    handleRemoteSync(ev: CustomEvent): void;
+    private broadcastState;
+    private playHaptic;
+    disconnectedCallback(): void;
+    watchSizeHandler(newValue: string): void;
+    componentDidLoad(): void;
+    private loadState;
+    private saveState;
+    private handleFocusTrap;
+    handleKeyDown(event: KeyboardEvent): void;
+    /**
+     * Toggle Maximized state
+     */
+    toggleMaximize(): Promise<void>;
+    /**
+     * Toggle the panel open/closed
+     */
+    toggle(): Promise<void>;
+    /**
+     * Toggle Mini state
+     */
+    toggleMini(): Promise<void>;
+    /**
+     * Open the panel
+     */
+    show(): Promise<void>;
+    /**
+     * Close the panel
+     */
+    hide(): Promise<void>;
+    initVoice(): Promise<void>;
+    private handleResizeStart;
+    private handleResizeMove;
+    private handleResizeEnd;
+    private handleClose;
+    private handleOverlayClick;
+    private handleParallax;
+    private resetParallax;
+    private hostStyle;
+    render(): any;
+}