atomicuilibrary 0.0.1

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

@@ -0,0 +1,275 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import { PanelSettingsEvent, PanelCloseEvent, PanelVariant, PanelTheme, PanelAnimation } from './types';
+import { FourSidePosition, FourCornerPosition } from '../../types/common.type';
+export declare class Panel {
+    element: HTMLElement;
+    /**
+     * Unique identifier for the panel
+     */
+    panelId: string;
+    /**
+     * Panel width
+     */
+    width: string;
+    /**
+     * Panel height
+     */
+    height: string;
+    /**
+     * Maximum width of the panel
+     */
+    maxWidth: string;
+    /**
+     * Maximum height of the panel
+     */
+    maxHeight: string;
+    /**
+     * Show close button
+     */
+    showClose: boolean;
+    /**
+     * Show settings button
+     */
+    showSettings: boolean;
+    /**
+     * Panel title text
+     */
+    panelTitle: string;
+    /**
+     * Panel subtitle text
+     */
+    panelSubtitle: string;
+    /**
+     * Visual variant
+      */
+    variant: PanelVariant;
+    /**
+     * Whether the panel is toggleable (collapsible)
+     */
+    toggleable: boolean;
+    /**
+     * Whether the panel is currently collapsed
+     */
+    collapsed: boolean;
+    /**
+     * Whether the panel is in loading state
+     */
+    loading: boolean;
+    /**
+     * Remove processing on content padding
+     */
+    noPadding: boolean;
+    /**
+     * Color theme for the panel
+     */
+    theme: PanelTheme;
+    /**
+     * Animation duration for collapse/expand
+     */
+    animationDuration: string;
+    /**
+     * Animation type for collapse/expand
+     */
+    animationType: PanelAnimation;
+    /**
+     * Badge content (number or text)
+     */
+    badge: string | number;
+    /**
+     * Badge variant style
+     */
+    badgeVariant: 'dot' | 'count' | 'text';
+    /**
+     * Panel icon to show in header
+     */
+    icon: string;
+    /**
+     * Enable keyboard navigation
+     */
+    keyboardNav: boolean;
+    /**
+     * Dynamic flowing glow effect (Aura)
+     */
+    aura: boolean;
+    /**
+     * Integrated search bar in header
+     */
+    enableSearch: boolean;
+    /**
+     * Search placeholder text
+     */
+    searchPlaceholder: string;
+    /**
+     * Elevation level (0-5) for shadow depth
+     */
+    elevation: number;
+    panelClose: EventEmitter<PanelCloseEvent>;
+    panelSettings: EventEmitter<PanelSettingsEvent>;
+    toggle: EventEmitter<{
+        collapsed: boolean;
+    }>;
+    /**
+     * Minimizable panel
+     */
+    minimizable: boolean;
+    /**
+     * Maximizable panel
+     */
+    maximizable: boolean;
+    /**
+     * Minimized state
+     */
+    minimized: boolean;
+    /**
+     * Maximized state
+     */
+    maximized: boolean;
+    /**
+     * Draggable panel
+     */
+    isDraggable: boolean;
+    /** Limit dragging within the viewport */
+    bounds: 'viewport' | 'none';
+    /** Snap to window edges when dragging close to them */
+    edgeSnapping: boolean;
+    /** Snap distance in pixels */
+    snapThreshold: number;
+    /** Snap to a grid while dragging */
+    snapToGrid: boolean;
+    /** Size of the grid for snapping */
+    gridSize: number;
+    /** Apply 3D tilt physics during drag */
+    dragPhysics: boolean;
+    /**
+     * Resizable panel
+     */
+    resizable: boolean;
+    /**
+     * Minimum width when resizing
+     */
+    minWidth: string;
+    /**
+     * Minimum height when resizing
+     */
+    minHeight: string;
+    /**
+     * Pinned panel (stays on top)
+     */
+    pinned: boolean;
+    /**
+     * Key to persist the panel's open state and size in localStorage
+     */
+    persistenceId?: string;
+    /**
+     * Overflow behavior
+     */
+    overflow: 'auto' | 'scroll' | 'hidden' | 'visible';
+    /**
+     * Position of the panel (docking)
+     */
+    position?: 'center' | FourSidePosition | FourCornerPosition;
+    /**
+     * Horizontal position (e.g., '100px', '20%'). Used if position is not set.
+     */
+    x?: string;
+    /**
+     * Vertical position (e.g., '100px', '20%'). Used if position is not set.
+     */
+    y?: string;
+    /**
+     * Show backdrop behind the panel (modal mode)
+     */
+    modal: boolean;
+    /**
+     * Close panel when clicking on backdrop
+     */
+    dismissible: boolean;
+    /**
+     * Glassmorphism effect
+     */
+    glass: boolean;
+    /**
+     * Background color of the panel
+     */
+    backgroundColor: string;
+    panelMinimize: EventEmitter<{
+        panelId: string;
+    }>;
+    panelMaximize: EventEmitter<{
+        panelId: string;
+    }>;
+    panelRestore: EventEmitter<{
+        panelId: string;
+    }>;
+    panelDragStart: EventEmitter<{
+        panelId: string;
+        x: number;
+        y: number;
+    }>;
+    panelDrag: EventEmitter<{
+        panelId: string;
+        x: number;
+        y: number;
+    }>;
+    panelDragEnd: EventEmitter<{
+        panelId: string;
+        x: number;
+        y: number;
+    }>;
+    panelResizeStart: EventEmitter<{
+        panelId: string;
+        width: number;
+        height: number;
+    }>;
+    panelResize: EventEmitter<{
+        panelId: string;
+        width: number;
+        height: number;
+    }>;
+    panelResizeEnd: EventEmitter<{
+        panelId: string;
+        width: number;
+        height: number;
+    }>;
+    panelSearch: EventEmitter<{
+        query: string;
+    }>;
+    private previousDimensions;
+    private isDragging;
+    private isResizing;
+    private currentWidth;
+    private currentHeight;
+    private isActive;
+    private searchQuery;
+    private dragStartX;
+    private dragStartY;
+    private dragPosition;
+    private resizeStartWidth;
+    private initialRect;
+    private lastMouseX;
+    private dragTilt;
+    private resizeStartHeight;
+    private resizeHandle;
+    componentWillLoad(): void;
+    private loadState;
+    private saveState;
+    private handleFocus;
+    private handleBlur;
+    private handleKeyDown;
+    private handleMinimize;
+    private handleMaximize;
+    private handleDragStart;
+    private handleDragMove;
+    private handleDragEnd;
+    private handleResizeStart;
+    private handleResizeMove;
+    private handleResizeEnd;
+    private handleClose;
+    private showActionList;
+    private handleSettings;
+    private closeActionList;
+    private handleSearchInput;
+    private handleToggle;
+    private handlePinToggle;
+    render(): any;
+}

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

@@ -0,0 +1,7 @@
+export { PanelVariant, PanelTheme, PanelAnimation } from '../../types/common.type';
+export interface PanelSettingsEvent {
+    panelId?: string;
+}
+export interface PanelCloseEvent {
+    panelId?: string;
+}

package/dist/types/components/pattern-input/pattern-input.d.ts

@@ -0,0 +1,88 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import { BasicSize } from '../../types/common.type';
+import { TextType } from '../../types/text.type';
+export declare class UIPatternInput {
+    private inputElement?;
+    private debounceTimer?;
+    /** Current input value */
+    value: string;
+    /** Input pattern for display (e.g., "(###) ###-####" for phone) */
+    pattern?: string;
+    /** Validation regex pattern */
+    validationRegex?: string;
+    /** Placeholder text */
+    placeholder?: string;
+    /** Label text */
+    label?: string;
+    /** Input name for forms */
+    name?: string;
+    /** Disabled state */
+    disabled: boolean;
+    /** Required field */
+    required: boolean;
+    /** Size variant */
+    size: BasicSize;
+    /** Show validation status */
+    showValidation: boolean;
+    /** Allowed characters regex (default: all) */
+    allowedChars?: string;
+    /** Auto-format as user types */
+    autoFormat: boolean;
+    /** Mask character for pattern (default: #) */
+    maskChar: string;
+    /** Show character counter */
+    showCounter: boolean;
+    /** Max length */
+    maxLength?: number;
+    /** Input type restriction */
+    inputType: TextType;
+    /** Helper text */
+    helperText?: string;
+    /** Error message */
+    errorMessage?: string;
+    /** Success message */
+    successMessage?: string;
+    /** RTL support */
+    rtl: boolean;
+    /** Whether the input is clearable */
+    clearable: boolean;
+    /** Validation state */
+    isValid: boolean;
+    isTouched: boolean;
+    isFocused: boolean;
+    /** Value change event */
+    patternInputChange: EventEmitter<{
+        value: string;
+        formatted: string;
+        isValid: boolean;
+    }>;
+    /** Input event */
+    patternInput: EventEmitter<{
+        value: string;
+        formatted: string;
+    }>;
+    /** Focus event */
+    patternInputFocus: EventEmitter<void>;
+    /** Blur event */
+    patternInputBlur: EventEmitter<void>;
+    /** Validation event */
+    patternInputValidate: EventEmitter<{
+        isValid: boolean;
+        value: string;
+    }>;
+    valueChanged(newValue: string): void;
+    componentDidLoad(): void;
+    private getInputTypeRegex;
+    private isCharAllowed;
+    private extractRawValue;
+    private formatValue;
+    private validateInput;
+    private handleInput;
+    private handleKeyPress;
+    private handlePaste;
+    private handleFocus;
+    private handleBlur;
+    private getValidationMessage;
+    private getCharCount;
+    render(): any;
+}

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

@@ -0,0 +1,161 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import { FourCornerPosition, FourSidePosition, StatusColor, TriggerType } from '../../types/common.type';
+export declare class Popover {
+    element: HTMLElement;
+    /** Popover heading text */
+    heading: string;
+    /**
+     * The target element to anchor the popover to.
+     * Can be a CSS selector (string) or a direct HTMLElement reference.
+     * If not provided, it will use the element in the 'trigger' slot or its first child.
+     */
+    target: string | HTMLElement;
+    /** Popover content (HTML string). Use this for simple text or if you can't use the 'content' slot. */
+    content: string;
+    /** Controlled open state. */
+    open: boolean;
+    /** Disabled state. If true, popover will not show. */
+    disabled: boolean;
+    /**
+     * Trigger type: 'click' | 'hover' | 'focus' | 'manual'
+     * 'manual' = only show/hide via method calls
+     */
+    trigger: TriggerType;
+    /** Placement of popover */
+    placement: FourSidePosition | FourCornerPosition | 'left-start' | 'left-end' | 'right-start' | 'right-end';
+    /** Show arrow */
+    showArrow: boolean;
+    /** Popover width */
+    width: string;
+    /** Animation type */
+    animation: 'fade' | 'scale' | 'slide' | 'none';
+    /** Show close button */
+    showCloseButton: boolean;
+    /** Show backdrop */
+    backdrop: boolean;
+    /**
+     * Visual variant.
+     * 'light' | 'dark' | 'success' | 'warning' | 'error' | 'info'
+     */
+    variant: 'light' | 'dark' | StatusColor;
+    /**
+     * ARIA role for the popover panel.
+     * Use 'tooltip' for non-interactive hover hints, 'menu' for menus, 'dialog' for rich content.
+     */
+    popoverRole: 'dialog' | 'tooltip' | 'menu' | 'listbox';
+    /**
+     * Delay in ms before showing on hover (0 = immediate)
+     */
+    showDelay: number;
+    /**
+     * Delay in ms before hiding on hover
+     */
+    hideDelay: number;
+    /**
+     * Close popover when window is scrolled
+     */
+    closeOnScroll: boolean;
+    /**
+     * Allow Escape key to close the popover (default: true)
+     */
+    closeOnEsc: boolean;
+    /**
+     * Maximum height of the popover body. If content exceeds this, it scrolls.
+     */
+    maxHeight: string;
+    /**
+     * When hover trigger is used, allow cursor to move into the popover without closing it.
+     * Set to false for pure tooltip behaviour.
+     */
+    interactive: boolean;
+    /** Loading state */
+    loading: boolean;
+    /** Skeleton state */
+    skeleton: boolean;
+    /** Distance between popover and trigger (in pixels) */
+    offset: number;
+    /** Size of the arrow in pixels */
+    arrowSize: number;
+    /** Close popover when clicking outside */
+    closeOnOutsideClick: boolean;
+    /** Close popover when focus leaves it */
+    closeOnBlur: boolean;
+    /** Match the width of the trigger element */
+    matchTriggerWidth: boolean;
+    /** Enable auto-flipping when hitting screen boundaries */
+    flip: boolean;
+    /** Enable auto-shifting (clamping) to stay inside viewport */
+    shift: boolean;
+    /** Boundary element for collision detection */
+    boundary: 'viewport' | 'scrollParent' | HTMLElement;
+    /** Padding from boundary edges */
+    padding: number;
+    /** Fallback placements for flipping (e.g. "top, bottom") */
+    fallbackPlacements: any;
+    /** Automatically choose the best placement based on available space */
+    autoPlacement: boolean;
+    /** Positioning strategy */
+    strategy: 'absolute' | 'fixed';
+    /** Optional z-index for the popover panel */
+    zIndex: number;
+    /** Emitted before popover shows. Call event.preventDefault() to cancel. */
+    uiBeforeOpen: EventEmitter<void>;
+    /** Emitted when popover shows */
+    uiOpen: EventEmitter<void>;
+    /** Emitted before popover hides. Call event.preventDefault() to cancel. */
+    uiBeforeClose: EventEmitter<void>;
+    /** Emitted when popover hides */
+    uiClose: EventEmitter<void>;
+    /** Emitted when toggled */
+    uiToggle: EventEmitter<{
+        open: boolean;
+    }>;
+    currentPlacement: string;
+    popoverStyles: {
+        [key: string]: string;
+    };
+    arrowStyles: {
+        [key: string]: string;
+    };
+    private targetElement;
+    private popoverContent;
+    private arrowElement;
+    private hideTimeout;
+    private showTimeout;
+    private focusTrap;
+    private cleanupAutoUpdate;
+    private resizeObserver;
+    private latestSizeData;
+    private updateRetries;
+    componentWillLoad(): void;
+    componentDidLoad(): void;
+    componentDidUpdate(): void;
+    disconnectedCallback(): void;
+    visibilityChanged(newValue: boolean): void;
+    handleTriggerConfigChange(): void;
+    private handleOpen;
+    private handleClose;
+    private updateAriaAttributes;
+    private initFocusTrap;
+    private setupTrigger;
+    private handleTargetKeyDown;
+    private cleanup;
+    private handleTriggerClick;
+    private handleFocusIn;
+    private handleFocusOut;
+    private handleOutsideClick;
+    private handleMouseEnter;
+    private handleMouseLeave;
+    private handlePopoverMouseEnter;
+    private handlePopoverMouseLeave;
+    private handleGlobalKeyDown;
+    private startAutoUpdate;
+    updatePosition(): Promise<void>;
+    reposition(): Promise<void>;
+    computePlacement(): Promise<string>;
+    show(): Promise<void>;
+    hide(): Promise<void>;
+    toggle(): Promise<void>;
+    private getPopoverStyle;
+    render(): any;
+}

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

@@ -0,0 +1,3 @@
+import { TriggerType } from '../../types/common.type';
+export { PopoverAnimation, PopoverPlacement } from '../../types/common.type';
+export type PopoverTrigger = TriggerType;