atomicuilibrary 0.0.1

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

@@ -0,0 +1,123 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import { TimerStep, TimerFlow, TimerTheme, TimerMode, TimerPrecision, TimerVariant, TimerProgressType, TimerFormat } from './types';
+export declare class Timer {
+    el: HTMLElement;
+    /** Steps definition */
+    steps: TimerStep[] | string;
+    normalizedSteps: TimerStep[];
+    isNarrow: boolean;
+    /** Flow type */
+    flow: TimerFlow;
+    /** Timer mode */
+    mode: TimerMode;
+    /** Current active step index */
+    activeStep: number;
+    /** Theme variables */
+    theme?: TimerTheme;
+    /** Whether to auto-start the timer */
+    autoStart: boolean;
+    /** Loop back to start on completion */
+    loop: boolean;
+    /** Precision mode */
+    precision: TimerPrecision;
+    /** Display variant */
+    variant: TimerVariant;
+    /** Percentage threshold for alert (countdown only) */
+    alertThreshold: number;
+    /** Target date for countdown (ISO string or date string) */
+    targetDate?: string;
+    /** Whether to persist the timer state in local storage */
+    persist?: string;
+    /** Progress visualization type */
+    progressType: TimerProgressType;
+    /** Time formatting style */
+    format: TimerFormat;
+    /** Toggle the outer drop-shadow effect (true by default) */
+    useShadow: boolean;
+    /** Automatically switch to the compact layout when the container becomes narrow */
+    collapse: boolean;
+    /** Whether to enable browser notifications */
+    enableNotifications: boolean;
+    /** Whether to enable sound alerts */
+    enableSound: boolean;
+    /** Template for notification title when a phase completes. Use {{label}} placeholder. */
+    notificationTitle: string;
+    /** Template for notification body when a phase completes. Use {{label}} placeholder. */
+    notificationBody: string;
+    /** Duration in seconds for simple countdown/stopwatch */
+    duration: number;
+    /** State */
+    currentTime: number;
+    isRunning: boolean;
+    totalDuration: number;
+    laps: number[];
+    isAlerting: boolean;
+    activeStepColor?: string;
+    normalizedTheme: any;
+    private timerInterval;
+    private collapseBreakpoint;
+    /** Events */
+    timerTick: EventEmitter<{
+        remaining: number;
+        stepIndex: number;
+        mode: TimerMode;
+    }>;
+    timerStart: EventEmitter<{
+        stepIndex: number;
+    }>;
+    timerPause: EventEmitter<{
+        stepIndex: number;
+    }>;
+    timerComplete: EventEmitter<{
+        stepIndex: number;
+    }>;
+    timerAllComplete: EventEmitter<void>;
+    timerLap: EventEmitter<{
+        time: number;
+        lapIndex: number;
+    }>;
+    timerNext: EventEmitter<{
+        index: number;
+        step: TimerStep;
+    }>;
+    timerPrev: EventEmitter<{
+        index: number;
+        step: TimerStep;
+    }>;
+    timerGoTo: EventEmitter<{
+        index: number;
+        step: TimerStep;
+    }>;
+    normalizeSteps(newSteps: TimerStep[] | string): void;
+    watchDuration(newVal: number): void;
+    normalizeTheme(newTheme: TimerTheme | string): void;
+    componentWillLoad(): void;
+    handleWindowResize(): void;
+    private updateResponsiveState;
+    private initNotifications;
+    private initTargetDate;
+    private loadPersistedState;
+    private savePersistedState;
+    componentDidLoad(): void;
+    disconnectedCallback(): void;
+    private initStep;
+    private playSound;
+    private notify;
+    private stopInterval;
+    private emitStepEvent;
+    start(): Promise<void>;
+    pause(): Promise<void>;
+    reset(): Promise<void>;
+    next(): Promise<void>;
+    prev(): Promise<void>;
+    goTo(index: number): Promise<void>;
+    lap(): Promise<void>;
+    handleKeyDown(ev: KeyboardEvent): void;
+    private checkAlert;
+    private handleStepComplete;
+    private calculateOffset;
+    private formatTime;
+    render(): any;
+    private renderFull;
+    private renderCompact;
+}

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

@@ -0,0 +1,18 @@
+import { ComponentValidator, FlowType, TimerStepStatus } from '../../types/common.type';
+export type { TimerMode, TimerPrecision, TimerVariant, TimerProgressType, TimerFormat, TimerStepStatus } from '../../types/common.type';
+export type TimerFlow = FlowType;
+/** @deprecated Use ComponentValidator<TimerStep> instead */
+export type TimerValidatorType = 'required' | 'custom';
+export type TimerValidator = ComponentValidator<TimerStep>;
+export interface TimerStep {
+    label: string;
+    description?: string;
+    status?: TimerStepStatus;
+    children?: TimerStep[];
+    validator?: TimerValidator;
+    duration?: number;
+    color?: string;
+}
+export interface TimerTheme {
+    [key: string]: string | undefined;
+}

package/dist/types/components/timer/ui-timer.stories.d.ts

@@ -0,0 +1,9 @@
+declare const _default: {
+    title: string;
+    component: string;
+};
+export default _default;
+export declare const Basic: () => any;
+export declare const NonLinear: () => any;
+export declare const Themed: () => any;
+export declare const Nested: () => any;

package/dist/types/components/toggle-group/toggle-group.d.ts

@@ -0,0 +1,136 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import { ComponentSize, Orientation, StatusColor, SelectionMode, Shape, ToggleVariant, LeftRight } from '../../types/common.type';
+export declare class UIToggleGroup {
+    el: HTMLElement;
+    /** Current selected value or array of values */
+    value: string | string[];
+    /** Group name for forms */
+    name: string;
+    /** Disabled state for the entire group */
+    disabled: boolean;
+    /** Readonly state */
+    readonly: boolean;
+    /** Required field indicator */
+    required: boolean;
+    /** Invalid state */
+    invalid: boolean;
+    /** Group label */
+    label: string;
+    /** Helper text below group */
+    helperText: string;
+    /** Error message when invalid */
+    errorMessage: string;
+    /** Layout orientation */
+    layout: Orientation | 'grid';
+    /** Grid columns count */
+    columns: number;
+    /** Selection mode */
+    selectionMode: SelectionMode;
+    /** Size passed to children */
+    size: ComponentSize;
+    /** Semantic color passed to children */
+    color: StatusColor;
+    /** Material archetype passed to children */
+    variant: ToggleVariant;
+    /** Shape passed to children */
+    shape: Shape;
+    /** Options array (label, value, icon, disabled) */
+    options: Array<{
+        value: string;
+        label: string;
+        icon?: string;
+        disabled?: boolean;
+    }> | string;
+    /** Label position for children */
+    labelPosition: LeftRight;
+    /** Show icons in children */
+    showIcons: boolean;
+    /** Enable animations */
+    enableAnimation: boolean;
+    /** Enable keyboard navigation */
+    keyboardNavigation: boolean;
+    /** Show select all/none controls (multiple mode only) */
+    showSelectAll: boolean;
+    /** Enable search/filter */
+    searchable: boolean;
+    /** Search placeholder text */
+    searchPlaceholder: string;
+    /** Enable drag to reorder */
+    isDraggable: boolean;
+    /** Enable expand/collapse */
+    collapsible: boolean;
+    /** Initially collapsed */
+    collapsed: boolean;
+    /** Loading state */
+    loading: boolean;
+    /** Loading text */
+    loadingText: string;
+    /** Maximum selections (multiple mode) */
+    maxSelections: number;
+    /** Show skeleton loading state */
+    showSkeleton: boolean;
+    /** Number of skeletons to show */
+    skeletonCount: number;
+    /** Compact mode for tighter spacing */
+    compact: boolean;
+    items: Array<any>;
+    searchQuery: string;
+    focusedIndex: number;
+    isCollapsed: boolean;
+    draggedIndex: number;
+    dragOverIndex: number;
+    /** Position and dimensions of the sliding indicator (segmented mode only) */
+    indicatorRect: {
+        left: number;
+        top: number;
+        width: number;
+        height: number;
+        opacity: number;
+    };
+    private listEl?;
+    private resizeObserver?;
+    private internals;
+    toggleGroupChange: EventEmitter<{
+        value: string | string[];
+    }>;
+    toggleGroupSearch: EventEmitter<{
+        query: string;
+        results: any[];
+    }>;
+    toggleGroupReorder: EventEmitter<{
+        oldIndex: number;
+        newIndex: number;
+        items: any[];
+    }>;
+    toggleGroupCollapse: EventEmitter<{
+        collapsed: boolean;
+    }>;
+    handleOptionsChange(): void;
+    handleValueChange(): void;
+    componentWillLoad(): void;
+    private updateFormValue;
+    componentDidRender(): void;
+    disconnectedCallback(): void;
+    /**
+     * Recalculates the position of the sliding background indicator.
+     * Only active in 'segmented' variant for single-selection groups.
+     */
+    updateIndicator(): Promise<void>;
+    private parseOptions;
+    handleSwitchChange(event: CustomEvent): void;
+    private syncToggles;
+    private handleSearch;
+    private getFilteredItems;
+    private handleSelectAll;
+    private toggleCollapse;
+    private onDragStart;
+    private onDragOver;
+    private onDrop;
+    private handleKeyDown;
+    private toggleItemValue;
+    private renderLabel;
+    private renderSearch;
+    private renderControls;
+    private renderLoading;
+    render(): any;
+}

package/dist/types/components/toggle-group/types.d.ts

@@ -0,0 +1,5 @@
+import { IconItem } from '../../types/common.type';
+export { ToggleGroupLayout, ToggleSelectionMode, ToggleVariant, ToggleShape, ToggleColor } from '../../types/common.type';
+export type ToggleOption = IconItem & {
+    value: string;
+};

package/dist/types/components/toolbar/toolbar-types.d.ts

@@ -0,0 +1,189 @@
+import { StatusColor, IconLibrary, BasicSize } from '../../types';
+export type ToolbarItemType = 'button' | 'icon-button' | 'dropdown' | 'input' | 'search' | 'toggle' | 'switch' | 'toggle-group' | 'avatar' | 'separator' | 'spacer' | 'text' | 'badge' | 'custom' | 'group';
+export type ToolbarOrientation = 'horizontal' | 'vertical';
+export type ToolbarVariant = 'default' | 'primary' | 'secondary' | 'minimal' | 'glass' | 'elevated' | 'outlined' | 'dark' | 'inline';
+export type ToolbarPosition = 'static' | 'sticky' | 'fixed' | 'absolute';
+export type ToolbarStickyEdge = 'top' | 'bottom' | 'left' | 'right';
+export type ToolbarAlignment = 'start' | 'center' | 'end' | 'space-between' | 'space-around' | 'space-evenly';
+export type ToolbarSize = BasicSize | 'xl';
+export type ToolbarOverflowStrategy = 'scroll' | 'dropdown' | 'wrap' | 'hidden';
+export interface ToolbarItemBase {
+    /** Unique item identifier */
+    id: string;
+    /** Item type */
+    type: ToolbarItemType;
+    /** Priority for overflow: higher = stays visible longer (default: 0) */
+    priority?: number;
+    /** Show in overflow menu even when visible (pin to both) */
+    pinToOverflow?: boolean;
+    /** Whether item is disabled */
+    disabled?: boolean;
+    /** Tooltip text */
+    tooltip?: string;
+    /** Aria label override */
+    ariaLabel?: string;
+    /** Hide on given screen size breakpoint */
+    hideBelow?: number;
+    /** Additional CSS classes */
+    className?: string;
+    /** Inline style overrides */
+    style?: Record<string, string>;
+}
+export interface ToolbarButtonItem extends ToolbarItemBase {
+    type: 'button' | 'icon-button';
+    label?: string;
+    icon?: string;
+    iconLibrary?: IconLibrary;
+    iconPosition?: 'left' | 'right';
+    iconOnly?: boolean;
+    variant?: StatusColor | 'ghost' | 'outline';
+    loading?: boolean;
+    badge?: string | number;
+    badgeColor?: StatusColor;
+    /** If true, button acts as a toggle */
+    toggleable?: boolean;
+    /** Active state for toggle buttons */
+    active?: boolean;
+    href?: string;
+    target?: string;
+}
+export interface ToolbarDropdownItem extends ToolbarItemBase {
+    type: 'dropdown';
+    label?: string;
+    icon?: string;
+    iconLibrary?: IconLibrary;
+    placeholder?: string;
+    options: Array<{
+        value: string;
+        label: string;
+        icon?: string;
+        disabled?: boolean;
+    }>;
+    value?: string;
+    multiSelect?: boolean;
+    searchable?: boolean;
+    clearable?: boolean;
+    /** Icon name for the selected marker (default: 'check') */
+    selectedMarkerIcon?: string;
+    /** Label text shown after the selected marker tick */
+    selectedMarkerLabel?: string;
+    /** Whether to show the selected marker at all */
+    showSelectedMarker?: boolean;
+}
+export interface ToolbarInputItem extends ToolbarItemBase {
+    type: 'input' | 'search';
+    placeholder?: string;
+    value?: string;
+    maxWidth?: string;
+    minWidth?: string;
+    debounce?: number;
+    clearable?: boolean;
+    icon?: string;
+}
+export interface ToolbarToggleItem extends ToolbarItemBase {
+    type: 'toggle' | 'switch';
+    label?: string;
+    checked?: boolean;
+    labelPosition?: 'left' | 'right';
+}
+export interface ToolbarToggleGroupItem extends ToolbarItemBase {
+    type: 'toggle-group';
+    options: Array<{
+        value: string;
+        label: string;
+        icon?: string;
+        iconLibrary?: string;
+        disabled?: boolean;
+    }>;
+    value?: string | string[];
+    selectionMode?: 'single' | 'multiple';
+    size?: string;
+    color?: string;
+    variant?: string;
+    shape?: string;
+}
+export interface ToolbarAvatarItem extends ToolbarItemBase {
+    type: 'avatar';
+    src?: string;
+    name?: string;
+    status?: 'online' | 'offline' | 'busy' | 'away';
+    size?: string;
+    badge?: string | number;
+    clickable?: boolean;
+}
+export interface ToolbarSeparatorItem extends ToolbarItemBase {
+    type: 'separator';
+    vertical?: boolean;
+    margin?: string;
+}
+export interface ToolbarSpacerItem extends ToolbarItemBase {
+    type: 'spacer';
+    flex?: number | string;
+}
+export interface ToolbarTextItem extends ToolbarItemBase {
+    type: 'text';
+    content: string;
+    bold?: boolean;
+    muted?: boolean;
+}
+export interface ToolbarBadgeItem extends ToolbarItemBase {
+    type: 'badge';
+    label: string;
+    color?: StatusColor;
+    dot?: boolean;
+}
+export interface ToolbarCustomItem extends ToolbarItemBase {
+    type: 'custom';
+    /** Raw HTML string to render */
+    html?: string;
+    /** Component tag to instantiate */
+    component?: string;
+    /** Props to pass to the component */
+    componentProps?: Record<string, unknown>;
+}
+export interface ToolbarGroupItem extends ToolbarItemBase {
+    type: 'group';
+    items: ToolbarItem[];
+    label?: string;
+    collapsible?: boolean;
+    collapsed?: boolean;
+    divider?: boolean;
+}
+export type ToolbarItem = ToolbarButtonItem | ToolbarDropdownItem | ToolbarInputItem | ToolbarToggleItem | ToolbarToggleGroupItem | ToolbarAvatarItem | ToolbarSeparatorItem | ToolbarSpacerItem | ToolbarTextItem | ToolbarBadgeItem | ToolbarCustomItem | ToolbarGroupItem;
+export interface ToolbarSchema {
+    /** Items for the left zone */
+    left?: ToolbarItem[];
+    /** Items for the center zone */
+    center?: ToolbarItem[];
+    /** Items for the right zone */
+    right?: ToolbarItem[];
+    /** Items that always appear in the overflow menu */
+    overflow?: ToolbarItem[];
+}
+export interface ToolbarItemClickEvent {
+    item: ToolbarItem;
+    originalEvent: MouseEvent | KeyboardEvent;
+}
+export interface ToolbarItemChangeEvent {
+    item: ToolbarItem;
+    value: unknown;
+    previousValue?: unknown;
+}
+export interface ToolbarOverflowChangeEvent {
+    overflowIds: string[];
+    visibleIds: string[];
+}
+export interface ToolbarStateSnapshot {
+    activeItems: string[];
+    itemStates: Record<string, ToolbarItemState>;
+    timestamp: number;
+}
+export interface ToolbarItemState {
+    id: string;
+    value?: unknown;
+    active?: boolean;
+    loading?: boolean;
+    disabled?: boolean;
+    hidden?: boolean;
+    overflowed?: boolean;
+}

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

@@ -0,0 +1,150 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import { ToolbarAlignment, ToolbarItem, ToolbarItemChangeEvent, ToolbarItemClickEvent, ToolbarOrientation, ToolbarOverflowChangeEvent, ToolbarOverflowStrategy, ToolbarPosition, ToolbarSchema, ToolbarSize, ToolbarStickyEdge, ToolbarStateSnapshot, ToolbarVariant } from './toolbar-types';
+import { IconLibrary } from '../../types';
+export declare class Toolbar {
+    el: HTMLElement;
+    /**
+     * JSON string or object describing the full toolbar layout.
+     * Schema: { left?: ToolbarItem[], center?: ToolbarItem[], right?: ToolbarItem[] }
+     */
+    schema: string | ToolbarSchema;
+    /** Flat list of items (all rendered in the main content zone). */
+    items: string | ToolbarItem[];
+    /** Visual variant of the toolbar. */
+    variant: ToolbarVariant;
+    /** Size of toolbar items. */
+    size: ToolbarSize;
+    /** Orientation: horizontal or vertical. */
+    orientation: ToolbarOrientation;
+    /** Positioning strategy. */
+    position: ToolbarPosition;
+    /** Which edge to stick to when position is sticky or fixed. */
+    stickyEdge: ToolbarStickyEdge;
+    /** Alignment of items along the main axis. */
+    alignment: ToolbarAlignment;
+    /** Gap between items (CSS value). */
+    gap: string;
+    /** Padding inside the toolbar (CSS value). */
+    padding: string;
+    /** Maximum height (horizontal) or width (vertical) (CSS value). */
+    maxSize: string;
+    /** Overflow handling strategy. */
+    overflowStrategy: ToolbarOverflowStrategy;
+    /** Label for the overflow "More" button. */
+    overflowLabel: string;
+    /** Icon for the overflow more button. */
+    overflowIcon: string;
+    /** Default icon library for items that don't specify one. */
+    iconLibrary: IconLibrary;
+    /** Whether the toolbar is in a disabled state. */
+    disabled: boolean;
+    /** Whether the toolbar is in a loading state. */
+    loading: boolean;
+    /** Show dividers between zones (left/center/right). */
+    zoneDividers: boolean;
+    /** Rounded corners for the whole bar. */
+    rounded: boolean;
+    /** Elevation shadow level (0–4). */
+    elevation: 0 | 1 | 2 | 3 | 4;
+    /** Enable drag-and-drop reordering of toolbar items. */
+    reorderable: boolean;
+    /** Enable keyboard navigation across items. */
+    keyboardNav: boolean;
+    /** Accessible label for the toolbar element. */
+    toolbarAriaLabel: string;
+    /** Show a border around the toolbar. */
+    bordered: boolean;
+    /** Make label hidden (icon-only) for button items by default. */
+    iconOnly: boolean;
+    /** Debounce time in ms for input/search items. */
+    inputDebounce: number;
+    private overflowedIds;
+    private isOverflowOpen;
+    private itemStates;
+    private dragSourceId;
+    private parsedSchema;
+    private parsedItems;
+    private isMobile;
+    private isCollapsed;
+    private openChildDropdowns;
+    /** Fired when a button or clickable item is activated. */
+    toolbarItemClick: EventEmitter<ToolbarItemClickEvent>;
+    /** Fired when an input, dropdown, toggle, or switch value changes. */
+    toolbarItemChange: EventEmitter<ToolbarItemChangeEvent>;
+    /** Fired when the visible/overflowed item set changes. */
+    toolbarOverflowChange: EventEmitter<ToolbarOverflowChangeEvent>;
+    /** Fired after a drag-and-drop reorder. */
+    toolbarReorder: EventEmitter<ToolbarItem[]>;
+    private resizeObserver;
+    private toolbarBodyRef;
+    private inputDebounceTimers;
+    private undoStack;
+    private redoStack;
+    private focusableRefs;
+    private mobileBreakpoint;
+    componentWillLoad(): void;
+    componentDidLoad(): void;
+    disconnectedCallback(): void;
+    onItemsChange(): void;
+    onSchemaChange(): void;
+    onDocumentClick(e: MouseEvent): void;
+    onKeyDown(e: KeyboardEvent): void;
+    onChildDropdownOpen(e: Event): void;
+    onChildDropdownClose(e: Event): void;
+    /** Programmatically set the value of any item by id. */
+    setItemValue(id: string, value: unknown): Promise<void>;
+    /** Get the current value of an item by id. */
+    getItemValue(id: string): Promise<unknown>;
+    /** Disable or enable an item by id. */
+    setItemDisabled(id: string, disabled: boolean): Promise<void>;
+    /** Toggle visibility of an item. */
+    setItemHidden(id: string, hidden: boolean): Promise<void>;
+    /** Set loading state on a specific button item. */
+    setItemLoading(id: string, loading: boolean): Promise<void>;
+    /** Toggle active state of a toggleable button. */
+    toggleItem(id: string): Promise<void>;
+    /** Collapse / expand the toolbar (mobile). */
+    setCollapsed(collapsed: boolean): Promise<void>;
+    /** Open or close the overflow menu. */
+    setOverflowOpen(open: boolean): Promise<void>;
+    /** Get a snapshot of current toolbar state. */
+    getStateSnapshot(): Promise<ToolbarStateSnapshot>;
+    restoreStateSnapshot(snapshot: ToolbarStateSnapshot): Promise<void>;
+    /** Undo last value change. */
+    undo(): Promise<void>;
+    /** Redo last undone change. */
+    redo(): Promise<void>;
+    /** Focus a specific toolbar item by id. */
+    focusItem(id: string): Promise<void>;
+    private parseItems;
+    private parseSchema;
+    private initItemStates;
+    private getAllItems;
+    private findItem;
+    private recalcOverflow;
+    private pushUndoSnapshot;
+    private handleItemClick;
+    private handleValueChange;
+    private isItemDisabled;
+    private isItemHidden;
+    private isItemLoading;
+    private isItemActive;
+    private computeItemValue;
+    private handleDragStart;
+    private handleDrop;
+    private renderItem;
+    private renderButton;
+    private renderDropdown;
+    private renderInput;
+    private renderToggle;
+    private renderToggleGroup;
+    private renderAvatar;
+    private renderSeparator;
+    private renderText;
+    private renderBadge;
+    private renderCustom;
+    private renderGroup;
+    private renderOverflowMenu;
+    private renderZone;
+    render(): any;
+}