atomicuilibrary 0.0.1

package/dist/types/components/smart-menu/menu-item.interface.d.ts

@@ -0,0 +1,10 @@
+export interface MenuItem {
+    label: string;
+    value?: string | number;
+    description?: string;
+    icon?: string;
+    action?: () => void;
+    disabled?: boolean;
+    divider?: boolean;
+    submenu?: MenuItem[];
+}

package/dist/types/components/smart-menu/smart-menu.d.ts

@@ -0,0 +1,64 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import { MenuItem } from './menu-item.interface';
+export declare class SmartMenu {
+    /**
+     * Menu items, can be JSON string or array of MenuItem
+     */
+    items: MenuItem[] | string;
+    target?: string;
+    /**
+     * Event emitted when a menu item is clicked
+     */
+    menuItemClick: EventEmitter<{
+        label: string;
+        item: MenuItem;
+    }>;
+    visible: boolean;
+    position: {
+        x: number;
+        y: number;
+    };
+    activeSubmenus: {
+        [key: string]: boolean;
+    };
+    submenuPositions: {
+        [key: string]: {
+            x: number;
+            y: number;
+            direction: 'right' | 'left';
+            vertical: 'down' | 'up';
+        };
+    };
+    parsedItems: MenuItem[];
+    private submenuOpenTimeouts;
+    private submenuCloseTimeouts;
+    private menuRef;
+    private targetElement;
+    private contextMenuHandler;
+    private targetRetryCount;
+    private readonly maxTargetRetries;
+    private readonly targetRetryDelay;
+    handleItemsChange(newValue: MenuItem[] | string): void;
+    componentWillLoad(): void;
+    componentDidLoad(): void;
+    private parseItems;
+    private attachContextMenuHandler;
+    disconnectedCallback(): void;
+    handleClickOutside(): void;
+    handleResize(): void;
+    show(x: number, y: number): Promise<void>;
+    hide(): Promise<void>;
+    calculatePosition(x: number, y: number, element: HTMLElement): {
+        x: number;
+        y: number;
+    };
+    handleItemClick(item: MenuItem, event: MouseEvent): void;
+    handleItemHover(item: MenuItem, index: number, event: MouseEvent, path?: string): void;
+    handleSubmenuClick(item: MenuItem, event: MouseEvent): void;
+    iconLibrary: 'se' | 'fontawesome' | 'icons8' | 'iconoir' | 'ionicons' | 'lucide' | 'bootstrap' | 'default';
+    renderMenuItem(item: MenuItem, index: number): any;
+    renderSubmenu(items: MenuItem[], path: string, level?: number): any;
+    getItemsByPath(path: string): MenuItem[] | null;
+    hostElement: HTMLElement;
+    render(): any;
+}

package/dist/types/components/smart-stepper/smart-step.d.ts

@@ -0,0 +1,29 @@
+export declare class SmartStep {
+    host: HTMLElement;
+    /**
+     * The label to display for the step
+     */
+    label: string;
+    /**
+     * Whether the step is valid/finished (optional status indicator)
+     */
+    status: 'default' | 'error' | 'success';
+    /**
+     * Optional description/subtitle for the step
+     */
+    description: string;
+    /**
+     * Optional icon/number to display.
+     * If not provided, parent SmartStepper can provide an index.
+     */
+    icon: string;
+    /**
+     * Library for the icon (e.g., 'se', 'fontawesome', 'lucide', etc.)
+     */
+    iconLibrary: 'se' | 'fontawesome' | 'icons8' | 'iconoir' | 'ionicons' | 'lucide' | 'bootstrap' | 'default';
+    /**
+     * Whether this step is disabled (not clickable)
+     */
+    disabled: boolean;
+    render(): any;
+}

package/dist/types/components/smart-stepper/smart-stepper.d.ts

@@ -0,0 +1,53 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+export declare class SmartStepper {
+    /**
+     * Orientation of the stepper (horizontal or vertical)
+     */
+    orientation: 'horizontal' | 'vertical';
+    /**
+     * Size of the stepper
+     */
+    size: 'sm' | 'md' | 'lg';
+    /**
+     * Current active step index (0-based)
+     */
+    activeStep: number;
+    /**
+     * Reference to the host element
+     */
+    host: HTMLElement;
+    /**
+     * Event emitted when active step changes
+     */
+    stepperChange: EventEmitter<{
+        index: number;
+        step: HTMLElement;
+    }>;
+    /**
+     * Programmatic API: Go to next step
+     */
+    next(): Promise<boolean>;
+    /**
+     * Programmatic API: Go to previous step
+     */
+    prev(): Promise<boolean>;
+    /**
+     * Programmatic API: Go to specific step
+     */
+    goTo(stepIndex: number): Promise<boolean>;
+    /**
+     * Get current step element
+     */
+    getCurrentStep(): Promise<HTMLElement | null>;
+    /**
+     * Get all step elements
+     */
+    getSteps(): Promise<HTMLElement[]>;
+    private getStepsSync;
+    private updateStepVisibility;
+    private handleStepClick;
+    componentDidLoad(): void;
+    componentDidUpdate(): void;
+    handleStepClickEvent(event: CustomEvent): void;
+    render(): any;
+}

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

@@ -0,0 +1,223 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import { SnackbarItem, SnackbarPosition, SnackbarStackMode, SnackbarOpenMode, SnackbarType } from './types';
+import { BasicSize, ComponentVariant, IconLibrary, Theme, TextDirection } from '../../types';
+export declare class Snackbar {
+    element: HTMLElement;
+    /**
+     * Position of the snackbar container
+     */
+    position: SnackbarPosition;
+    /**
+     * Maximum number of visible snackbars
+     */
+    maxVisible: number;
+    /**
+     * Stack mode for snackbars (only applies when maxVisible > 1)
+     */
+    stackMode: SnackbarStackMode;
+    /**
+     * Open animation mode for snackbars
+     */
+    openMode: SnackbarOpenMode;
+    /**
+     * Default variant for snackbars
+     */
+    variant: ComponentVariant;
+    /**
+     * Default size for snackbars
+     */
+    size: BasicSize;
+    /**
+     * Default theme for notifications
+     */
+    theme: Theme;
+    /**
+     * Enable card stacking mode - notifications stack like cards and expand on hover
+     */
+    cardStack: boolean;
+    /**
+     * Default group threshold (ms) - identical messages within this window are coalesced
+     */
+    groupThreshold: number;
+    /**
+     * Global default duration (ms) for notifications. 0 is infinite.
+     */
+    duration: number;
+    /**
+     * Enable smart grouping (coalescing) of identical messages
+     */
+    coalesce: boolean;
+    /**
+     * Maximum duration cap (ms). Any item duration above this value is clamped. 0 = no cap.
+     */
+    maxDuration: number;
+    /**
+     * Show a live countdown chip (e.g. "3s") inside the notification before it closes.
+     * Only visible when duration > 0 and progress is set to 'bar' or 'ring'.
+     */
+    showCountdown: boolean;
+    /**
+     * Explicit text direction for this notification instance only.
+     * 'auto' reads the CSS computed direction of the element.
+     * 'rtl' / 'ltr' override immediately without touching the page layout.
+     */
+    textDirection: TextDirection;
+    onTextDirectionChange(): void;
+    /**
+     * Default library for icons
+     */
+    iconLibrary: IconLibrary;
+    /**
+     * Move snackbar to the bottom of the body automatically on load
+     */
+    portal: boolean;
+    /**
+     * Pause timers when the cursor hovers over the snackbar
+     */
+    pauseOnHover: boolean;
+    /**
+     * Pause timers when the window loses focus (e.g. tab switch)
+     */
+    pauseOnFocusLoss: boolean;
+    /**
+     * Sound mode: 'none' | 'synth' | 'custom'
+     */
+    soundMode: 'none' | 'synth' | 'custom';
+    /**
+     * Enable CSS particle burst on 'sovereign' type notifications.
+     * Set to false to disable all particle effects.
+     */
+    particles: boolean;
+    /**
+     * Enable slot support for custom notification layouts
+     */
+    enableSlots: boolean;
+    /**
+     * Event emitted when a snackbar is closed
+     */
+    snackbarClosed: EventEmitter<{
+        id: string;
+        item: SnackbarItem;
+    }>;
+    /**
+     * Event emitted when a snackbar is added
+     */
+    snackbarAdded: EventEmitter<{
+        id: string;
+        item: SnackbarItem;
+    }>;
+    /**
+     * Event emitted when a snackbar is updated
+     */
+    snackbarUpdated: EventEmitter<{
+        id: string;
+        item: SnackbarItem;
+    }>;
+    /**
+     * Event emitted when a snackbar link is clicked
+     */
+    snackbarLinkClicked: EventEmitter<{
+        id: string;
+        item: SnackbarItem;
+        link: {
+            text: string;
+            url: string;
+        };
+    }>;
+    /**
+     * Event emitted when a snackbar action button is clicked
+     */
+    snackbarActionClicked: EventEmitter<{
+        id: string;
+        item: SnackbarItem;
+    }>;
+    snackbars: SnackbarItem[];
+    visibleSnackbars: SnackbarItem[];
+    animatedItems: Set<string>;
+    isHovered: boolean;
+    expandedSnackbars: Set<string>;
+    dragX: {
+        [key: string]: number;
+    };
+    isDragging: string | null;
+    dir: TextDirection;
+    /** Per-notification remaining seconds for the countdown chip (reactive) */
+    countdownSeconds: {
+        [id: string]: number;
+    };
+    private timers;
+    private startX;
+    componentWillLoad(): void;
+    private updateDir;
+    disconnectedCallback(): void;
+    private handleGlobalKeyDown;
+    positionChanged(): void;
+    maxVisibleChanged(): void;
+    stackModeChanged(): void;
+    private handleWindowBlur;
+    private handleWindowFocus;
+    private updateVisibleSnackbars;
+    add(item: Omit<SnackbarItem, 'id'>): Promise<string>;
+    private clampDuration;
+    close(id: string): Promise<void>;
+    closeAll(): Promise<void>;
+    closeNext(): Promise<void>;
+    /**
+     * Returns all current notifications
+     */
+    getAll(): Promise<SnackbarItem[]>;
+    /**
+     * Pause timer for a specific notification
+     */
+    pause(id: string): Promise<void>;
+    /**
+     * Resume timer for a specific notification
+     */
+    resume(id: string): Promise<void>;
+    /**
+     * Replace an existing notification completely
+     */
+    replace(id: string, newItem: Omit<SnackbarItem, 'id'>): Promise<void>;
+    promise<T>(promise: Promise<T> | (() => Promise<T>), data: {
+        loading: string;
+        success: string | ((res: T) => string);
+        error: string | ((err: any) => string);
+        duration?: number;
+    }): Promise<T>;
+    undoable(data: {
+        message: string;
+        title?: string;
+        type?: SnackbarType;
+        onUndo: () => void;
+        onDismiss?: () => void;
+        duration?: number;
+        action?: SnackbarItem['action'];
+        link?: SnackbarItem['link'];
+    }): Promise<string>;
+    update(id: string, updates: Partial<SnackbarItem>): Promise<void>;
+    private generateId;
+    private startTimer;
+    private getProgressBarElement;
+    private getProgressRingElement;
+    private handleCloseClick;
+    private handleLinkClick;
+    private playSynthSound;
+    private toggleExpand;
+    private triggerBadgePulse;
+    private spawnParticles;
+    private handleKeyDown;
+    private handleActionClick;
+    private handleMouseDown;
+    private handleMouseMove;
+    private handleMouseUp;
+    private handleMouseEnter;
+    private handleTouchStart;
+    private handleTouchMove;
+    private handleTouchEnd;
+    private handleMouseLeave;
+    private handleInputSubmit;
+    private renderIcon;
+    private getAriaLive;
+    render(): any;
+    componentDidRender(): void;
+}

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

@@ -0,0 +1,104 @@
+import { BasicSize, ComponentVariant, StatusColor, Theme } from '../../types/common.type';
+export { SnackbarPosition, SnackbarStackMode, SnackbarOpenMode } from '../../types/common.type';
+export type SnackbarType = StatusColor;
+export interface SnackbarItem {
+    id: string;
+    type: StatusColor;
+    title?: string;
+    message: string;
+    html?: boolean;
+    avatar?: string;
+    icon?: string;
+    iconLibrary?: string;
+    link?: {
+        text: string;
+        url: string;
+    };
+    action?: {
+        label: string;
+        icon?: string;
+        onClick?: () => void;
+    };
+    actions?: {
+        label: string;
+        icon?: string;
+        onClick?: () => void;
+        variant?: StatusColor;
+    }[];
+    /** Auto-dismiss duration in ms. 0 = infinite (requires manual close). */
+    duration?: number;
+    variant?: ComponentVariant;
+    size?: BasicSize;
+    customClass?: string;
+    closable?: boolean;
+    theme?: Theme;
+    input?: {
+        placeholder?: string;
+        label?: string;
+        type?: 'text' | 'password' | 'email' | 'number';
+        onSubmit: (value: string) => void;
+    };
+    /** Count displayed on the grouping badge for coalesced notifications */
+    count?: number;
+    /** Trigger the device vibration API on show */
+    haptic?: boolean;
+    /** Optional audio URL to play on show (when soundMode = 'custom') */
+    sound?: string;
+    /** Progress indicator style. 'bar' shows a bottom time-bar; 'ring' shows a ring around the icon */
+    progress?: 'bar' | 'ring';
+    /** Controls ARIA live urgency and sort order */
+    priority?: 'low' | 'normal' | 'high' | 'urgent';
+    /** Prevent auto-dismiss entirely; user must manually close */
+    sticky?: boolean;
+    /** Callback invoked when this specific item is closed */
+    onClose?: () => void;
+    /** Named slot to use for notification content */
+    slot?: string;
+    /** History of coalesced messages */
+    history?: {
+        message: string;
+        title?: string;
+        timestamp: number;
+    }[];
+}
+/**
+ * CSS Custom Properties exposed by ui-snackbar for consumer theming.
+ *
+ * Override these on the element or a parent:
+ *
+ * ```css
+ * ui-snackbar {
+ *   --snackbar-bg:          #1e293b;
+ *   --snackbar-color:       #f8fafc;
+ *   --snackbar-radius:      8px;
+ *   --snackbar-info-bg:     #0ea5e9;
+ *   --snackbar-success-bg:  #10b981;
+ *   --snackbar-error-bg:    #ef4444;
+ *   --snackbar-warning-bg:  #f59e0b;
+ *   --snackbar-neutral-bg:  #475569;
+ *   --snackbar-shadow:      0 8px 24px rgba(0,0,0,0.4);
+ *   --snackbar-border:      rgba(255,255,255,0.1);
+ *   --snackbar-min-width:   300px;
+ *   --snackbar-max-width:   480px;
+ *   --snackbar-z-index:     9999;
+ * }
+ * ```
+ */
+export interface SnackbarCSSTokens {
+    '--snackbar-radius': string;
+    '--snackbar-font': string;
+    '--snackbar-min-width': string;
+    '--snackbar-max-width': string;
+    '--snackbar-z-index': string;
+    '--snackbar-bg': string;
+    '--snackbar-color': string;
+    '--snackbar-border': string;
+    '--snackbar-shadow': string;
+    '--snackbar-success-bg': string;
+    '--snackbar-error-bg': string;
+    '--snackbar-warning-bg': string;
+    '--snackbar-info-bg': string;
+    '--snackbar-neutral-bg': string;
+    '--snackbar-badge-bg': string;
+    '--snackbar-badge-color': string;
+}

package/dist/types/components/speed-dial/speed-dial.d.ts

@@ -0,0 +1,171 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import { SpeedDialAction, SpeedDialPosition, SpeedDialStrategy, SpeedDialLayout } from './types';
+import { BasicSize, ComponentVariant, FourSidePosition, IconLibrary, Shape } from '../../types/common.type';
+export declare class SpeedDial {
+    el: HTMLElement;
+    /**
+     * Position of the speed dial button
+     */
+    position: SpeedDialPosition;
+    /**
+     * Speed dial actions
+     */
+    actions: SpeedDialAction[] | string;
+    /**
+     * Positioning strategy: 'fixed' (screen) or 'absolute' (container)
+     */
+    strategy: SpeedDialStrategy;
+    /**
+     * Icon for the main button
+     */
+    icon: string;
+    /**
+     * Library for the main button icon
+     */
+    iconLibrary: IconLibrary;
+    /**
+     * Icon to show when open (e.g., 'close' or 'x')
+     */
+    toggleIcon?: string;
+    /**
+     * Default library for actions
+     */
+    actionLibrary: IconLibrary;
+    /**
+     * Color scheme
+     */
+    color: 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info';
+    /**
+     * Size of the button
+     */
+    size: BasicSize;
+    /**
+     * Button variant
+     */
+    variant: ComponentVariant;
+    /**
+     * Direction of dial opening
+     */
+    direction?: FourSidePosition | 'auto';
+    /**
+     * Button shape
+     */
+    shape: Shape;
+    /**
+     * Tooltip position
+     */
+    tooltipPosition?: FourSidePosition | 'auto';
+    /**
+     * Show tooltips/labels
+     */
+    showTooltips: boolean;
+    /**
+     * Position of the label/tooltip
+     */
+    labelPosition?: FourSidePosition | 'auto';
+    /**
+     * Hide the label text but keep it for screen readers
+     */
+    labelHide: boolean;
+    /**
+     * Trigger mode: 'click' (default) or 'hover'
+     */
+    trigger: 'click' | 'hover';
+    /**
+     * Opening layout style: 'linear', 'radial', or 'arc'
+     */
+    layout: SpeedDialLayout;
+    /**
+     * Close dial when window scrolls
+     */
+    closeOnScroll: boolean;
+    /**
+     * Use glassmorphism effect
+     */
+    glassy: boolean;
+    /**
+     * Use magnetic pull effect
+     */
+    magnetic: boolean;
+    /**
+     * Strength of magnetic pull (0 to 1)
+     */
+    magneticStrength: number;
+    /**
+     * Radius of magnetic pull in pixels
+     */
+    magneticRadius: number;
+    /**
+     * Unique ID to persist the draggable position in localStorage
+     */
+    persistenceId?: string;
+    /**
+     * Allow dragging the speed dial to reposition it
+     */
+    isDraggable: boolean;
+    /**
+     * Open state
+     */
+    isOpen: boolean;
+    /**
+     * Magnetic translation
+     */
+    magneticTransform: {
+        x: number;
+        y: number;
+    };
+    /**
+     * Action item angles (for radial/arc)
+     */
+    itemAngles: number[];
+    /**
+     * Current drag offset
+     */
+    dragOffset: {
+        x: number;
+        y: number;
+    };
+    /**
+     * Is currently being dragged
+     */
+    isDragging: boolean;
+    /**
+     * Animation state for elasticity
+     */
+    isElastic: boolean;
+    /**
+     * Emitted when an action is clicked
+     */
+    actionClick: EventEmitter<string>;
+    /**
+     * Emitted when speed dial opens/closes
+     */
+    speedDialToggle: EventEmitter<boolean>;
+    private mainButton;
+    private closeTimer;
+    private dragStartPos;
+    private initialOffset;
+    componentWillLoad(): void;
+    private loadPersistedPosition;
+    private savePersistedPosition;
+    private getActions;
+    private getDialDirection;
+    private getTooltipPosition;
+    private toggleDial;
+    private triggerElastic;
+    handleOpenChange(open: boolean): void;
+    private calculateSafeAngles;
+    private setOpen;
+    private handleActionClick;
+    private handleBackdropClick;
+    handleWindowScroll(): void;
+    handleGlobalKeyDown(ev: KeyboardEvent): void;
+    handleMouseMove(ev: MouseEvent): void;
+    onMouseDown(ev: MouseEvent): void;
+    private onMouseMove;
+    private onMouseUp;
+    private onMouseEnter;
+    private onMouseLeave;
+    handleLocalKeyDown(ev: KeyboardEvent): void;
+    render(): any;
+}

package/dist/types/components/speed-dial/types.d.ts

@@ -0,0 +1,11 @@
+import { CommonActionItem, ComponentVariant, Shape, StatusColor } from '../../types/common.type';
+export { SpeedDialPosition, SpeedDialLayout, PositionStrategy as SpeedDialStrategy } from '../../types/common.type';
+export interface SpeedDialAction extends CommonActionItem {
+    icon: string;
+    badge?: string | number;
+    badgeColor?: string;
+    shortcut?: string;
+    variant?: ComponentVariant;
+    shape?: Shape;
+    color?: StatusColor;
+}