atomicuilibrary 0.0.1

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

@@ -0,0 +1,66 @@
+import { IconLibrary } from '../../types';
+export declare class Icon {
+    /**
+     * The name of the icon
+     */
+    name?: string;
+    /**
+     * The library to use for the icon.
+     * Options: 'se' (Schneider Electric), 'fontawesome', 'icons8', 'iconoir', 'ionicons', 'lucide', 'bootstrap', 'google' (Material Symbols), 'remixicon', 'emoji' (renders the name as a native emoji), or 'default' (URL/SVG/Text)
+     */
+    library: IconLibrary;
+    /**
+     * Optional source URL for an image icon
+     */
+    src?: string;
+    /**
+     * The size of the icon (e.g., '16px', '2rem', or a number)
+     * For 'se', 'ionicons', and 'lucide', this maps to specific library behavior.
+     */
+    size?: string | number;
+    /**
+     * Optional fill color for the icon (works with 'lucide' and 'google')
+     */
+    fill?: string;
+    /**
+     * The color of the icon
+     */
+    /**
+     * The color of the icon
+     */
+    color: string;
+    /**
+     * Whether the icon should spin
+     */
+    spin: boolean;
+    /**
+     * Accessible label for the icon. If provided, the icon will have role="img" and an aria-label.
+     * If not provided, the icon is considered decorative (aria-hidden="true").
+     */
+    label?: string;
+    /**
+     * Whether the icon is in a loading state. Shows a small loader.
+     */
+    loading: boolean;
+    private fetchedSvg;
+    private isFetching;
+    el: HTMLElement;
+    private lucideContainer?;
+    private static lucideLoadingPromise;
+    private static svgCache;
+    handleIconChange(): void;
+    componentWillLoad(): void;
+    componentDidLoad(): void;
+    componentDidUpdate(): void;
+    private loadRemoteSvg;
+    private initLucide;
+    private renderLucideIcon;
+    private isSvgPath;
+    private isUrl;
+    private isEmoji;
+    private getParsedSize;
+    private getEffectiveLibrary;
+    private ensureLibraryStyles;
+    render(): any;
+    private renderIconContent;
+}

package/dist/types/components/image-button/image-button.d.ts

@@ -0,0 +1,31 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+export declare class ImageButton {
+    /** Image source URL */
+    src: string;
+    /** Image alt text */
+    alt: string;
+    /** Button label (overlay) */
+    label: string;
+    /** Subtitle or secondary text */
+    description: string;
+    /** Hover effect: 'zoom' | 'lift' | 'brighten' | 'none' */
+    effect: 'zoom' | 'lift' | 'brighten' | 'none';
+    /** Aspect ratio: 'square' | 'video' | 'portrait' | 'auto' */
+    ratio: 'square' | 'video' | 'portrait' | 'auto';
+    /** Whether the label is always visible or only on hover */
+    labelMode: 'always' | 'hover';
+    /** Size variant */
+    size: 'sm' | 'md' | 'lg' | 'xl';
+    /** Disabled state */
+    disabled: boolean;
+    /** Loading state */
+    loading: boolean;
+    /** Accessibility label */
+    a11yLabel: string;
+    /** Focus state for keyboard accessibility */
+    isFocused: boolean;
+    uiClick: EventEmitter<void>;
+    private handleClick;
+    private handleKeyDown;
+    render(): any;
+}

package/dist/types/components/image-button/types.d.ts

@@ -0,0 +1 @@
+export { ImageButtonEffect, ImageButtonRatio, ImageButtonLabelMode } from '../../types/common.type';

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

@@ -0,0 +1,217 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import { InputType, InputSize, InputVariant, ValidationState, InputMask, StatusColor } from './types';
+import { Orientation } from '../../types/common.type';
+export declare class Input {
+    element: HTMLElement;
+    badge?: string;
+    color: StatusColor;
+    prefixColor: StatusColor;
+    suffixColor: StatusColor;
+    gradientDecorators: boolean;
+    rippleEffect: boolean;
+    linearLoading: boolean;
+    hintTooltip: string;
+    successPulse: boolean;
+    alwaysFloated: boolean;
+    shakeOnError: boolean;
+    maxRows: number;
+    autocompleteSuggestions: Array<{
+        text: string;
+        subtitle?: string;
+        icon?: string;
+        value?: any;
+    }>;
+    voiceInput: boolean;
+    shortcutHint: string;
+    textTransform: 'none' | 'uppercase' | 'lowercase' | 'capitalize' | 'pascal' | 'words' | 'sentences';
+    relativeTime: boolean;
+    highlightMatches: boolean;
+    dropZone: boolean;
+    ghostText: string;
+    revealOnHold: boolean;
+    noSpaces: boolean;
+    alphaOnly: boolean;
+    numericOnly: boolean;
+    showPasswordStrength: boolean;
+    showProgressCircle: boolean;
+    dirtyTracking: boolean;
+    defaultValue: string;
+    otpLength: number;
+    voiceEnabled: boolean;
+    statusIndicator: 'none' | 'online' | 'offline' | 'typing' | 'away' | 'listening';
+    validationTrigger: 'onInput' | 'onBlur' | 'manual';
+    gradientBorder: boolean;
+    backdropSheen: boolean;
+    isPasswordHeld: boolean;
+    currentGhost: string;
+    isDirty: boolean;
+    isRecording: boolean;
+    isDragging: boolean;
+    rippleX: number;
+    rippleY: number;
+    showRipple: boolean;
+    showClearButton: boolean;
+    customClass?: string;
+    analyticsEvent: EventEmitter<{
+        value: string;
+    }>;
+    private inputElement?;
+    private colorPickerElement?;
+    private filePickerElement?;
+    private debounceTimer?;
+    internals: ElementInternals;
+    type: InputType;
+    variant: InputVariant;
+    size: InputSize;
+    width?: string;
+    value: string;
+    placeholder: string;
+    label: string;
+    helperText: string;
+    errorText: string;
+    successText: string;
+    warningText: string;
+    infoText: string;
+    validationState: ValidationState;
+    disabled: boolean;
+    readonly: boolean;
+    required: boolean;
+    multiline: boolean;
+    rows: number;
+    autoResize: boolean;
+    minRows?: number;
+    cols?: number;
+    maxLength?: number;
+    minLength?: number;
+    showCounter: boolean;
+    showClear: boolean;
+    showPasswordToggle: boolean;
+    prefixIcon: string;
+    suffixIcon: string;
+    prefixText: string;
+    suffixText: string;
+    floatingLabel: boolean;
+    autocomplete: string;
+    min?: string | number;
+    max?: string | number;
+    step?: string | number;
+    pattern?: string;
+    name?: string;
+    inputId?: string;
+    debounce: number;
+    loading: boolean;
+    fullWidth: boolean;
+    autofocus: boolean;
+    customTabIndex?: number;
+    showCopy: boolean;
+    density: 'standard' | 'cozy' | 'compact';
+    showDividers: boolean;
+    mask: InputMask;
+    currency: string;
+    accept?: string;
+    multiple: boolean;
+    minLengthIndicator?: number;
+    maxLengthIndicator?: number;
+    tooltip?: string;
+    suggestions: string[];
+    inputmode?: 'none' | 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url';
+    clearIcon: string;
+    showSteppers: boolean;
+    showTypeIcon: boolean;
+    formatter?: (value: string) => string;
+    parser?: (value: string) => string;
+    autoSelect: boolean;
+    autoTrim: boolean;
+    rtl: boolean;
+    passwordStrengthCalculator?: (password: string) => number;
+    resize: 'none' | Orientation | 'both';
+    enterkeyhint?: 'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send';
+    passwordIcon: string;
+    passwordVisibleIcon: string;
+    skeleton: boolean;
+    prefixClickable: boolean;
+    suffixClickable: boolean;
+    allowedChars: string;
+    blockInvalidPaste: boolean;
+    customMask: string;
+    selectOnClick: boolean;
+    clearOnEscape: boolean;
+    autoCapitalize: 'none' | 'sentences' | 'words' | 'characters';
+    setFocus(): Promise<void>;
+    openFilePicker(): Promise<void>;
+    openColorPicker(): Promise<void>;
+    isFocused: boolean;
+    isPasswordVisible: boolean;
+    currentLength: number;
+    showSuggestions: boolean;
+    selectedSuggestionIndex: number;
+    rangeValue: number;
+    shake: boolean;
+    passwordStrength: number;
+    capsLockOn: boolean;
+    selectedFileNames: string;
+    internalErrorText: string;
+    private validate;
+    private updateFormValue;
+    inputChange: EventEmitter<string>;
+    inputFocus: EventEmitter<FocusEvent>;
+    inputBlur: EventEmitter<FocusEvent>;
+    inputClear: EventEmitter<void>;
+    inputKeydown: EventEmitter<KeyboardEvent>;
+    inputKeyup: EventEmitter<KeyboardEvent>;
+    inputCopy: EventEmitter<string>;
+    fileSelected: EventEmitter<FileList>;
+    suggestionSelected: EventEmitter<string>;
+    prefixClick: EventEmitter<void>;
+    suffixClick: EventEmitter<void>;
+    search: EventEmitter<string>;
+    inputInput: EventEmitter<string>;
+    focusInternal: EventEmitter<FocusEvent>;
+    pasteInternal: EventEmitter<ClipboardEvent>;
+    wheelInternal: EventEmitter<WheelEvent>;
+    valueChanged(newValue: string): void;
+    handleValidationStateChange(newValue: ValidationState): void;
+    handleShakeChange(newValue: boolean): void;
+    componentWillLoad(): void;
+    private resizeObserver?;
+    componentDidLoad(): void;
+    disconnectedCallback(): void;
+    private updateClearButtonVisibility;
+    private getRangePercentage;
+    private resizeTextarea;
+    private getMaskPlaceholder;
+    private applyMask;
+    private calculatePasswordStrength;
+    private applyTextTransform;
+    private recognition;
+    private voiceStatusTimer;
+    private setVoiceStatus;
+    private startVoiceRecognition;
+    private handleMouseDown;
+    private handleDragOver;
+    private handleDragLeave;
+    private handleDrop;
+    private highlightTextMatches;
+    private getRelativeTimeString;
+    private applyZenithFiltering;
+    private handleInput;
+    private handleFocus;
+    private handleBlur;
+    private handleRangeManualInput;
+    private stepValue;
+    private renderSteppers;
+    private handleClear;
+    private handleKeydown;
+    private handleKeyup;
+    private handleCopy;
+    private selectSuggestion;
+    private getFilteredSuggestions;
+    private getCurrencyIcon;
+    private renderCurrencyText;
+    private getValidationMessage;
+    private renderPrefixIcon;
+    private renderSuffixContent;
+    private renderLengthIndicator;
+    private renderAutocomplete;
+    render(): any;
+}

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

@@ -0,0 +1,6 @@
+import { ComponentSize, ComponentVariant } from '../../types/common.type';
+export { StatusColor, InputType, ValidationState, InputMask } from '../../types/common.type';
+export type InputSize = ComponentSize;
+export type InputVariant = ComponentVariant;
+/** Input-specific activity indicator (distinct from the user-presence StatusIndicator in common). */
+export type StatusIndicator = 'none' | 'typing' | 'online' | 'offline' | 'away' | 'listening';

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

@@ -0,0 +1,28 @@
+import { InputType, InputVariant, InputSize } from '../input/types';
+export declare class InputPair {
+    /** Left input label */
+    labelLeft: string;
+    /** Right input label */
+    labelRight: string;
+    /** Shared main label (optional) */
+    label?: string;
+    /** Left input value */
+    valueLeft: string;
+    /** Right input value */
+    valueRight: string;
+    /** Left input placeholder */
+    placeholderLeft: string;
+    /** Right input placeholder */
+    placeholderRight: string;
+    /** Shared type for both inputs */
+    type: InputType;
+    /** Shared variant */
+    variant: InputVariant;
+    /** Shared size */
+    size: InputSize;
+    /** Gap between inputs (set to 0 for connected) */
+    gap: string;
+    /** Full width behavior */
+    fullWidth: boolean;
+    render(): any;
+}

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

@@ -0,0 +1,147 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+export declare class Knob {
+    el: HTMLElement;
+    internals: ElementInternals;
+    /**
+     * Name of the form control
+     */
+    name: string;
+    /**
+     * Current value
+     */
+    value: number;
+    /**
+     * Minimum value
+     */
+    min: number;
+    /**
+     * Maximum value
+     */
+    max: number;
+    /**
+     * Step increment
+     */
+    step: number;
+    /**
+     * Size of the knob
+     */
+    size: number;
+    /**
+     * Stroke width
+     */
+    strokeWidth: number;
+    /**
+     * Color of the active arc (string or {from: string, to: string})
+     */
+    color: string | {
+        from?: string;
+        to?: string;
+    };
+    /**
+     * Color of the track
+     */
+    trackColor: string;
+    /**
+     * Enable gradient for the active arc
+     */
+    gradient: boolean;
+    /**
+     * Show value label
+     */
+    showValue: boolean;
+    /**
+     * Custom value suffix (e.g., '%', '°', 'dB')
+     */
+    valueSuffix: string;
+    /**
+     * Show min/max labels
+     */
+    showMinMax: boolean;
+    /**
+     * Disabled state
+     */
+    disabled: boolean;
+    /**
+     * Read-only state
+     */
+    readonly: boolean;
+    /**
+     * Start angle in degrees (0 = top, 90 = right)
+     */
+    startAngle: number;
+    /**
+     * End angle in degrees
+     */
+    endAngle: number;
+    /**
+     * Enable mouse wheel rotation control
+     */
+    enableWheel: boolean;
+    /**
+     * Show tick marks along the arc (useful for speedometer-like gauges)
+     */
+    showTicks: boolean;
+    /**
+     * Number of tick marks to render along the arc
+     */
+    tickCount: number;
+    /**
+     * Tick color
+     */
+    tickColor: string;
+    /**
+     * Tick length factor relative to radius (0-1)
+     */
+    tickLength: number;
+    /**
+     * Show numeric labels around the knob
+     */
+    showLabels: boolean;
+    /**
+     * Snap to step intervals
+     */
+    snap: boolean;
+    /**
+     * Allow double-click to edit value manually
+     */
+    allowInput: boolean;
+    /**
+     * Event emitted when value changes
+     */
+    knobChange: EventEmitter<number>;
+    /**
+     * Event emitted while dragging
+     */
+    knobInput: EventEmitter<number>;
+    isDragging: boolean;
+    angle: number;
+    isEditing: boolean;
+    gradientId: string;
+    private knobRef?;
+    valueChanged(newValue: number): void;
+    colorChanged(): void;
+    propsChanged(): void;
+    componentWillLoad(): void;
+    private normalizeProps;
+    private updateAngle;
+    private handleMouseDown;
+    private handleMouseMove;
+    private handleMouseUp;
+    private handleTouchStart;
+    private handleTouchMove;
+    private handleTouchEnd;
+    private handleWheel;
+    private handleKeyDown;
+    private updateValueFromEvent;
+    private updateValueFromTouch;
+    private calculateValueFromAngle;
+    private polarToCartesian;
+    private describeArc;
+    componentDidLoad(): void;
+    disconnectedCallback(): void;
+    private startEditing;
+    private handleInputBlur;
+    private handleInputChange;
+    private handleInputKeyDown;
+    render(): any;
+}

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

@@ -0,0 +1,4 @@
+export interface KnobGradient {
+    from?: string;
+    to?: string;
+}

package/dist/types/components/layout-manager/layout-manager.d.ts

@@ -0,0 +1,32 @@
+import { LayoutState, PanelConfig } from '../../types';
+import { StateEngine } from '../../service/state-engine';
+import { Orientation } from '../../types/common.type';
+export declare class LayoutManager {
+    el: HTMLElement;
+    initialLayout?: string;
+    layout: LayoutState;
+    engine: StateEngine;
+    isDragging: boolean;
+    draggedPanelId: string | null;
+    dropIndicator: {
+        rect: DOMRect;
+        zone: string;
+        index?: number;
+    } | null;
+    private currentDropTargetId;
+    private currentDropIndex;
+    componentWillLoad(): void;
+    private resizeObserver;
+    componentDidLoad(): void;
+    disconnectedCallback(): void;
+    private checkAutoCollapse;
+    addPanel(cfg: PanelConfig): Promise<string>;
+    removePanel(id: string): Promise<boolean>;
+    saveLayout(): Promise<string>;
+    loadLayout(json: string): Promise<boolean>;
+    splitPanel(targetPanelId: string, direction: Orientation, newPanel: PanelConfig): Promise<string>;
+    private getIndicatorStyle;
+    onGlobalMouseMove: (e: MouseEvent) => void;
+    onGlobalMouseUp: () => void;
+    render(): any;
+}

package/dist/types/components/layout-manager/lm-container/lm-container.d.ts

@@ -0,0 +1,7 @@
+import { ContainerState } from '../../../types';
+export declare class LmContainer {
+    node: ContainerState;
+    activeTabId: string;
+    renderChild(child: any, index: number): any;
+    render(): any;
+}

package/dist/types/components/layout-manager/lm-floating-window/lm-floating-window.d.ts

@@ -0,0 +1,6 @@
+export declare class LmFloatingWindow {
+    panelId: string;
+    x: number;
+    y: number;
+    render(): any;
+}

package/dist/types/components/layout-manager/lm-panel/lm-panel.d.ts

@@ -0,0 +1,7 @@
+import { PanelState } from '../../../types';
+export declare class LmPanel {
+    panel: PanelState;
+    closePanel(): void;
+    onHeaderMouseDown: (e: MouseEvent) => void;
+    render(): any;
+}

package/dist/types/components/layout-manager/lm-splitter/lm-splitter.d.ts

@@ -0,0 +1,12 @@
+import { Orientation } from '../../../types/common.type';
+export declare class LmSplitter {
+    containerId: string;
+    index: number;
+    private startX;
+    private startY;
+    onDown(e: MouseEvent): void;
+    onMove: (e: MouseEvent) => void;
+    onUp: () => void;
+    direction: Orientation;
+    render(): any;
+}

package/dist/types/components/layout-manager/lm-tabs/lm-tabs.d.ts

@@ -0,0 +1,12 @@
+import { PanelState } from '../../../types';
+import { Orientation } from '../../../types/common.type';
+export declare class LmTabs {
+    panels: PanelState[];
+    activeTabId: string;
+    containerId: string;
+    mode: Orientation;
+    switchTab(id: string): void;
+    closePanel(e: MouseEvent, id: string): void;
+    onTabMouseDown(e: MouseEvent, id: string): void;
+    render(): any;
+}

package/dist/types/components/layout-manager/types.d.ts

@@ -0,0 +1 @@
+/** Re-exports all layout-manager shared types */

package/dist/types/components/library/category-section.d.ts

@@ -0,0 +1,15 @@
+import { ComponentData } from './data';
+export declare class CategorySection {
+    /** Category name */
+    categoryName: string;
+    /** Category icon */
+    categoryIcon: string;
+    /** Components in this category */
+    components: ComponentData[];
+    /** Whether the section is expanded */
+    expanded: boolean;
+    /** Mode: 'demo' or 'doc' */
+    mode: 'demo' | 'doc';
+    private toggleExpanded;
+    render(): any;
+}

package/dist/types/components/library/data.d.ts

@@ -0,0 +1,11 @@
+export interface ComponentData {
+    id: string;
+    name: string;
+    description: string;
+    icon: string;
+    category: 'Foundation & Layout' | 'Navigation' | 'Inputs & Forms' | 'Data Display' | 'Feedback & Overlays';
+    badge?: string;
+    docs?: string;
+}
+export declare const componentsData: ComponentData[];
+export declare const categories: readonly ["Foundation & Layout", "Navigation", "Inputs & Forms", "Data Display", "Feedback & Overlays"];

package/dist/types/components/library/library-card.d.ts

@@ -0,0 +1,19 @@
+export declare class LibraryCard {
+    /** Component ID (used for linking) */
+    componentId: string;
+    /** Title of the component */
+    cardTitle: string;
+    /** Short description */
+    description: string;
+    /** Icon emoji */
+    icon: string;
+    /** Optional badge text */
+    badge: string;
+    /** Optional documentation URL */
+    docs: string;
+    /** Mode: 'demo' or 'doc' */
+    mode: 'demo' | 'doc';
+    private handleViewDemo;
+    private handleViewDocs;
+    render(): any;
+}

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

@@ -0,0 +1,9 @@
+export declare class Library {
+    searchQuery: string;
+    selectedCategory: string | null;
+    mode: 'demo' | 'doc';
+    private getCategoryIcon;
+    private getFilteredComponents;
+    private handleCategoryClick;
+    render(): any;
+}