atomicuilibrary 0.0.1

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

@@ -0,0 +1,125 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+export declare class Speedometer {
+    hostElement: HTMLElement;
+    /**
+     * Current value to display
+     */
+    value: number;
+    /**
+     * Secondary value (optional) for comparison, displays as a ghost needle
+     */
+    secondaryValue?: number;
+    /**
+     * Minimum value
+     */
+    minValue: number;
+    /**
+     * Maximum value
+     */
+    maxValue: number;
+    /**
+     * Size of the speedometer in pixels
+     */
+    size: number;
+    /**
+     * Label text displayed below the value
+     */
+    label: string;
+    /**
+     * Unit text (e.g., 'km/h', 'mph', '%')
+     */
+    unit: string;
+    /**
+     * Show percentage instead of actual value
+     */
+    showPercentage: boolean;
+    /**
+     * Color ranges as JSON string: [{ min, max, color }]
+     */
+    ranges: string;
+    /**
+     * Needle color
+     */
+    needleColor: string;
+    /**
+     * Show tick marks
+     */
+    showTicks: boolean;
+    /**
+     * Number of major ticks
+     */
+    tickCount: number;
+    /**
+     * Animation duration in milliseconds
+     */
+    animationDuration: number;
+    /**
+     * Start angle in degrees (default -135 for 270° arc)
+     */
+    startAngle: number;
+    /**
+     * End angle in degrees (default 135 for 270° arc)
+     */
+    endAngle: number;
+    /**
+     * Needle shape: 'triangle', 'arrow', 'line'
+     */
+    needleShape: 'triangle' | 'arrow' | 'line';
+    /**
+     * Custom text labels mapping (value -> label). JSON string.
+     * Example: "{0: 'Low', 50: 'Med', 100: 'High'}"
+     */
+    customLabels: string;
+    /**
+     * Gradient colors for the arc
+     */
+    gradientColors: string;
+    /**
+     * Enable interactive mode (drag needle to set value)
+     */
+    interactive: boolean;
+    /**
+     * Emitted when the value changes in interactive mode
+     */
+    valueChange: EventEmitter<number>;
+    parsedLabels: Record<number, string>;
+    animatedValue: number;
+    parsedRanges: Array<{
+        min: number;
+        max: number;
+        color: string;
+    }>;
+    parsedGradients: string[];
+    private gradientId;
+    private animationFrame;
+    private animationStartTime;
+    private animationStartValue;
+    private isDragging;
+    private rect;
+    handleValueChange(newValue: number): void;
+    handleRangesChange(newValue: string): void;
+    handleLabelsChange(newValue: string): void;
+    handleGradientChange(newValue: string): void;
+    private parseLabels;
+    componentWillLoad(): void;
+    componentDidLoad(): void;
+    disconnectedCallback(): void;
+    private parseRanges;
+    private parseGradients;
+    private animateToValue;
+    exportImage(filename?: string, format?: 'png' | 'svg'): Promise<void>;
+    private downloadFile;
+    private handleMouseDown;
+    private handleMouseMove;
+    private handleMouseUp;
+    private updateValueFromEvent;
+    private getColorForValue;
+    private valueToAngle;
+    private polarToCartesian;
+    private createArc;
+    private renderArc;
+    private renderTicks;
+    private renderNeedle;
+    private renderValue;
+    render(): any;
+}

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

@@ -0,0 +1,8 @@
+import { SpeedometerZoneColor } from '../../types/common.type';
+export type { SpeedometerZoneColor };
+export interface SpeedometerZone {
+    from: number;
+    to: number;
+    color: SpeedometerZoneColor;
+    label?: string;
+}

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

@@ -0,0 +1,63 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import { SplitterPanel } from './types';
+import { Orientation, Theme } from '../../types/common.type';
+export declare class AppSplitter {
+    el: HTMLElement;
+    direction: Orientation;
+    gutterSize: number;
+    gutterColor: string;
+    gutterHoverColor: string;
+    panels: SplitterPanel[];
+    sizes: number[];
+    snapThreshold: number;
+    animated: boolean;
+    persistState: boolean;
+    storageKey: string;
+    showGutterIcon: boolean;
+    doubleClickCollapse: boolean;
+    keyboardNavigation: boolean;
+    rtl: boolean;
+    theme: Theme;
+    rounded: boolean;
+    elevated: boolean;
+    private isDragging;
+    private activeGutterIndex;
+    private hoveredGutterIndex;
+    private collapsedPanels;
+    sizeChange: EventEmitter<{
+        sizes: number[];
+        index: number;
+    }>;
+    panelCollapse: EventEmitter<{
+        index: number;
+        collapsed: boolean;
+    }>;
+    splitterDragStart: EventEmitter<{
+        index: number;
+    }>;
+    splitterDragEnd: EventEmitter<{
+        index: number;
+        sizes: number[];
+    }>;
+    private startPos;
+    private startSizes;
+    private panelRefs;
+    componentWillLoad(): void;
+    componentDidLoad(): void;
+    disconnectedCallback(): void;
+    handlePanelsChange(): void;
+    private initializeSizes;
+    private getPanelCount;
+    private loadState;
+    private saveState;
+    private handleMouseDown;
+    private handleMouseMove;
+    private handleMouseUp;
+    private handleGutterDoubleClick;
+    private toggleCollapse;
+    private handleKeyDown;
+    private adjustSize;
+    private renderGutter;
+    private renderPanel;
+    render(): any;
+}

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

@@ -0,0 +1,9 @@
+export interface SplitterPanel {
+    /** Size in percentage or pixels */
+    size?: number;
+    minSize?: number;
+    maxSize?: number;
+    collapsible?: boolean;
+    collapsed?: boolean;
+    resizable?: boolean;
+}

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

@@ -0,0 +1,34 @@
+import { Orientation } from '../../types/common.type';
+export declare class Stack {
+    el: HTMLElement;
+    /** Stacking direction */
+    direction: Orientation;
+    /** Flex wrap behavior */
+    wrap: 'nowrap' | 'wrap' | 'wrap-reverse';
+    /** Spacing between items (negative for overlap) */
+    spacing: string;
+    /** Align items */
+    align: 'start' | 'center' | 'end' | 'stretch';
+    /** Justify content */
+    justify: 'start' | 'center' | 'end' | 'space-between';
+    /** Maximum items to show before '+N' */
+    max: number;
+    /** Whether to overlap items */
+    overlap: boolean;
+    /** Whether to show dividers between items */
+    showDividers: boolean;
+    /** Type of divider to show */
+    dividerType: 'solid' | 'dashed' | 'dotted' | 'none';
+    childrenCount: number;
+    isRosterOpen: boolean;
+    private mutationObserver;
+    componentWillLoad(): void;
+    componentDidLoad(): void;
+    disconnectedCallback(): void;
+    private toggleRoster;
+    private closeRoster;
+    private updateChildrenVisibility;
+    private updateChildrenCount;
+    private renderRoster;
+    render(): any;
+}

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

@@ -0,0 +1,3 @@
+import { Orientation } from '../../types/common.type';
+export { StackWrap, StackAlign, StackJustify, StackDividerType } from '../../types/common.type';
+export type StackDirection = Orientation;

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

@@ -0,0 +1,16 @@
+export declare class Step {
+    /** parent will set index */
+    index: number;
+    stepTitle: string;
+    subtitle: string | null;
+    icon: string | null;
+    badge: string | null;
+    tooltip: string | null;
+    status: 'upcoming' | 'active' | 'complete' | 'error' | 'disabled' | 'custom';
+    disabled: boolean;
+    /** A developer can provide a validation function on the DOM element before proceeding */
+    validate?: () => boolean | Promise<boolean>;
+    /** optional custom renderer - parent will call if present */
+    renderContent?: () => any;
+    render(): any;
+}

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

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

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

@@ -0,0 +1,218 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import { StepperStep, StepperStepStatus, StepperFlow, StepperNavigationOptions, StepperTheme } from './types';
+import { BasicSize, FourSidePosition, IconLibrary, Orientation, StatusColor } from '../../types/common.type';
+export declare class Stepper {
+    /**
+     * Array of steps to display
+     */
+    /**
+     * Steps can be provided as an array or a JSON string in the attribute
+     */
+    steps: StepperStep[] | string;
+    /**
+     * Internal normalized steps
+     */
+    normalizedSteps: StepperStep[];
+    /**
+     * Orientation of the stepper (horizontal or vertical)
+     */
+    orientation: Orientation;
+    /**
+     * Size of the stepper
+     */
+    size: BasicSize;
+    /**
+     * Current active step index (0-based)
+     */
+    activeStep: number;
+    /**
+     * Whether to show step numbers
+     */
+    showNumbers: boolean;
+    /**
+     * Whether to show step descriptions
+     */
+    showDescriptions: boolean;
+    /**
+     * Show optional control buttons (Next/Previous/Finish/Failed)
+     */
+    showControls: boolean;
+    /**
+     * Customize control button labels
+     */
+    labelPrev: string;
+    labelNext: string;
+    labelFinish: string;
+    labelFail: string;
+    /**
+     * Events emitted when control buttons are clicked
+     */
+    stepperPrevious: EventEmitter<{
+        index: number;
+        step: StepperStep;
+    }>;
+    stepperNext: EventEmitter<{
+        index: number;
+        step: StepperStep;
+    }>;
+    stepperFinish: EventEmitter<{
+        index: number;
+        step: StepperStep;
+    }>;
+    stepperFail: EventEmitter<{
+        index: number;
+        step: StepperStep;
+    }>;
+    /**
+     * Custom icon for each status (optional)
+     */
+    customIcons?: {
+        [key in StepperStepStatus]?: string;
+    };
+    /**
+     * Flow type: linear or non-linear
+     */
+    flow: StepperFlow;
+    /**
+     * Whether to use Shadow DOM
+     */
+    shadow: boolean;
+    /**
+     * Theme configuration with CSS variables
+     */
+    theme?: StepperTheme;
+    /**
+     * Enable keyboard navigation
+     */
+    keyboardNavigation: boolean;
+    /**
+     * Enable responsive collapse/overflow
+     */
+    responsive: boolean;
+    /**
+     * Maximum number of steps to show before collapsing
+     */
+    maxVisibleSteps: number;
+    progressDot: boolean;
+    /**
+     * Default library for icons
+     */
+    iconLibrary: IconLibrary;
+    /**
+     * Label placement (horizontal or vertical) - DEPRECATED: use labelPosition instead
+     */
+    labelPlacement: Orientation;
+    /**
+     * Label position relative to step indicator
+     */
+    labelPosition: FourSidePosition;
+    /**
+     * Stepper variant style
+     */
+    variant: 'default' | 'navigation' | 'panel' | 'inline' | 'outlined' | 'filled' | 'minimal' | 'snack';
+    colorScheme: StatusColor;
+    animated: boolean;
+    showProgress: boolean;
+    validateBeforeNext?: (stepIndex: number) => Promise<boolean> | boolean;
+    mobileBreakpoint: number;
+    allowStepClick: boolean;
+    showTooltips: boolean;
+    compact: boolean;
+    stepsPerPage: number;
+    scrollable: boolean;
+    clickable: boolean;
+    iconLineWidth?: string;
+    iconLineHeight?: string;
+    iconLineFlex?: number;
+    /**
+     * Shape of the step indicator (circle, square, or square-active)
+     */
+    stepShape: 'circle' | 'square' | 'square-active';
+    /**
+     * Validation errors map
+     */
+    validationErrors: Map<string, string>;
+    isMobile: boolean;
+    isLoading: boolean;
+    /**
+     * Reference to the host element
+     */
+    host: HTMLElement;
+    /**
+     * Event emitted when active step changes
+     */
+    stepperChange: EventEmitter<{
+        index: number;
+        step: StepperStep;
+        previousIndex: number;
+    }>;
+    /**
+     * Event emitted when validation fails
+     */
+    stepperValidationError: EventEmitter<{
+        index: number;
+        step: StepperStep;
+        error: string;
+    }>;
+    progressUpdate: EventEmitter<number>;
+    stepValidation: EventEmitter<{
+        step: number;
+        valid: boolean;
+    }>;
+    stepLoading: EventEmitter<boolean>;
+    /**
+     * Programmatic API: Go to next step
+     */
+    next(options?: StepperNavigationOptions): Promise<boolean>;
+    /**
+     * Programmatic API: Go to previous step
+     */
+    prev(options?: StepperNavigationOptions): Promise<boolean>;
+    /**
+     * Programmatic API: Go to specific step
+     */
+    goTo(stepIndex: number, options?: StepperNavigationOptions): Promise<boolean>;
+    /**
+     * Programmatic API: Mark step as completed
+     */
+    complete(stepIndex?: number): Promise<void>;
+    /**
+     * Programmatic API: Mark step as failed
+     */
+    fail(stepIndex?: number, errorMessage?: string): Promise<void>;
+    /**
+     * Get current step
+     */
+    getCurrentStep(): Promise<StepperStep | null>;
+    /**
+     * Get all steps
+     */
+    getSteps(): Promise<StepperStep[]>;
+    /**
+     * Validate current step
+     */
+    validateCurrentStep(): Promise<boolean>;
+    private navigateToStep;
+    handleActiveStepChange(): void;
+    private canNavigateTo;
+    private validateStep;
+    private updateStepStatuses;
+    private updateStepStatus;
+    private getStepIcon;
+    private renderProgressCircle;
+    private renderStepIcon;
+    private getStepClasses;
+    private parseSteps;
+    stepsChanged(newVal: StepperStep[] | string): void;
+    componentWillLoad(): void;
+    private scanStepsFromChildren;
+    private onPrevClick;
+    private onNextClick;
+    private onFinishClick;
+    private onFailClick;
+    private handleKeyDown;
+    private handleStepClick;
+    private getProgress;
+    private renderSnakeLayout;
+    render(): any;
+}

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

@@ -0,0 +1,39 @@
+import { ComponentValidator, FlowType, IconItem, StepStatus, WithChildren } from '../../types/common.type';
+export type StepperStepStatus = StepStatus;
+export type StepperFlow = FlowType;
+/** @deprecated Use ComponentValidator<StepperStep> instead */
+export type StepperValidator = ComponentValidator<StepperStep> & {
+    errorMessage?: string;
+};
+export interface StepperStep extends IconItem, WithChildren<StepperStep> {
+    label: string;
+    description?: string;
+    iconUrl?: string;
+    svgIcon?: string;
+    status?: StepperStepStatus;
+    validator?: StepperValidator;
+    data?: any;
+    lazy?: boolean;
+    percent?: number;
+    optional?: boolean;
+    validationMessage?: string;
+    node?: any;
+}
+export interface StepperNavigationOptions {
+    skipValidation?: boolean;
+    force?: boolean;
+}
+export interface StepperTheme {
+    [key: string]: string | undefined;
+    primaryColor?: string;
+    secondaryColor?: string;
+    successColor?: string;
+    errorColor?: string;
+    warningColor?: string;
+    infoColor?: string;
+    textColor?: string;
+    backgroundColor?: string;
+    borderColor?: string;
+    fontSize?: string;
+    fontFamily?: string;
+}

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

@@ -0,0 +1,162 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import { ComponentSize, ComponentVariant, IconLibrary, LeftRight, Orientation, Shape, StatusColor } from '../../types/common.type';
+export declare class UISwitch {
+    el: HTMLElement;
+    /** Checked state */
+    checked: boolean;
+    /** Disabled state */
+    disabled: boolean;
+    /** Readonly state */
+    readonly: boolean;
+    /** Invalid state */
+    invalid: boolean;
+    /** Loading state (shows spinner) */
+    loading: boolean;
+    /** Size variant */
+    size: ComponentSize;
+    /** Semantic color variant */
+    color: StatusColor;
+    /** Material archetype variant */
+    variant: ComponentVariant;
+    /** Shape style */
+    shape: Shape;
+    /** Custom width for the switch track (e.g., '100px', 'auto') */
+    width: string;
+    /**
+     * Label for the switch
+     */
+    label: string;
+    /** Label position */
+    labelPosition: LeftRight;
+    /** Elevation level (0-5) */
+    elevation: number;
+    /** Shape of the thumb */
+    thumbShape: 'circle' | 'square';
+    /** Icon when unchecked */
+    iconOff?: string;
+    /** Icon when checked */
+    iconOn?: string;
+    /** Show icons */
+    showIcons: boolean;
+    /** Performance/Animation toggle */
+    enableAnimation: boolean;
+    /** Orientation */
+    orientation: Orientation;
+    /** Helper text below switch */
+    helperText: string;
+    /** Error message when invalid */
+    errorMessage: string;
+    /** Custom text on track when checked */
+    checkedText: string;
+    /** Custom text on track when unchecked */
+    uncheckedText: string;
+    /** Show text symbols on track */
+    showTrackText: boolean;
+    /** RTL support */
+    rtl: boolean;
+    /** Associated form ID */
+    formId: string;
+    /** Form field name */
+    name: string;
+    /** Form field value */
+    value: string;
+    /** Animation physics preset */
+    physics: 'liquid' | 'stiff' | 'bouncy' | 'linear';
+    /** Glow effect when active */
+    glow: boolean;
+    /** Require confirmation before toggle */
+    requireConfirmation: boolean;
+    /** Confirmation message */
+    confirmationMessage: string;
+    /** Indeterminate state */
+    indeterminate: boolean;
+    /** Show success feedback after change */
+    showSuccessFeedback: boolean;
+    /** Tab index */
+    switchTabIndex: number;
+    /** Aria label override */
+    ariaLabel: string;
+    /** Use gradient colors */
+    gradient: boolean;
+    /** Gradient colors (JSON array of strings) */
+    gradientColors: string;
+    /** Auto-submit nearest form on change */
+    autoSubmit: boolean;
+    /** Show check/cross icons by default */
+    showDefaultIcons: boolean;
+    /** Required field indicator */
+    required: boolean;
+    /** Sensory vibration feedback */
+    haptic: boolean;
+    /** Tactical side/bottom description */
+    description?: string;
+    descriptionPosition: 'side' | 'bottom';
+    /** High-Fidelity: Image URL for checked state */
+    checkedImage?: string;
+    /** High-Fidelity: Image URL for unchecked state */
+    uncheckedImage?: string;
+    /** Enable async toggle mode (waits for external confirmation) */
+    async: boolean;
+    /** Internal processing state for async operations */
+    internalLoading: boolean;
+    /** Visual shake feedback for validation failures or vetoed changes */
+    isShaking: boolean;
+    /**
+     * Triggers a visual 'Shake' effect and haptic vibration pattern
+     * to indicate a rejected action or validation failure.
+     */
+    shake(): Promise<void>;
+    /** Show tooltip on hover */
+    showTooltip: boolean;
+    /** Tooltip text */
+    tooltipText: string;
+    /** Icon library to use */
+    iconLibrary: IconLibrary;
+    isFocused: boolean;
+    isHovered: boolean;
+    showingSuccess: boolean;
+    showConfirmDialog: boolean;
+    pendingValue: boolean;
+    showRipple: boolean;
+    /** Change event */
+    switchChange: EventEmitter<{
+        checked: boolean;
+        value?: string;
+    }>;
+    /** Focus event */
+    switchFocus: EventEmitter<void>;
+    /** Blur event */
+    switchBlur: EventEmitter<void>;
+    /** Confirmation event */
+    switchConfirm: EventEmitter<{
+        confirmed: boolean;
+        value: boolean;
+    }>;
+    /** Success feedback event */
+    switchSuccess: EventEmitter<void>;
+    handleCheckedChange(newValue: boolean): void;
+    private triggerFormSubmit;
+    private handleChange;
+    /**
+     * Public method to clear the internal loading state
+     * (Used after an async operation completes)
+     */
+    stopAsyncLoading(): Promise<void>;
+    private applyToggle;
+    private triggerRipple;
+    private triggerSuccessFeedback;
+    private handleConfirm;
+    private handleCancel;
+    private handleFocus;
+    private handleBlur;
+    private handleMouseEnter;
+    private handleMouseLeave;
+    private handleKeyDown;
+    private getIcon;
+    private renderTrackText;
+    private renderHelperText;
+    private renderTooltip;
+    private renderSuccessFeedback;
+    private renderConfirmDialog;
+    render(): any;
+}