atomicuilibrary 0.0.1

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

@@ -0,0 +1,133 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import { ButtonType, ComponentSize, FourCornerPosition, FourSidePosition, IconLibrary, Shape, StatusColor, StatusIndicator } from '../../types';
+import { ButtonVariant } from './types';
+export declare class Button {
+    el: HTMLElement;
+    private internals;
+    private nativeButton?;
+    setFocus(): Promise<void>;
+    constructor();
+    /** Image source for image button */
+    imgSrc?: string;
+    /** Alt text for image button */
+    imgAlt?: string;
+    /** Button type: 'button', 'submit', 'reset', 'image' */
+    type: ButtonType;
+    /** Avatar source for avatar button */
+    avatarSrc?: string;
+    /** Alt text for avatar-btn */
+    avatarAlt?: string;
+    /** Status dot for avatar: 'online', 'offline', 'busy', 'away' */
+    avatarStatus?: StatusIndicator;
+    /** Values associated with the button (for use in groups) */
+    value?: string;
+    /** Button label text */
+    label?: string;
+    /** Optional subtitle text (shown above/below main label) */
+    subtitle?: string;
+    /** Description text (alias for subtitle, common in toggle contexts) */
+    description?: string;
+    /** Position of the description/subtitle: 'above' | 'below' | 'left' | 'right' */
+    descriptionPosition: 'above' | 'below' | 'left' | 'right';
+    /** Optional icon content (can be name, SVG path, URL, or emoji) */
+    icon?: string;
+    /** Library for the icon (e.g., 'se', 'fontawesome', 'lucide', etc.) */
+    iconLibrary: IconLibrary;
+    /** Render icon only (no label) */
+    iconOnly: boolean;
+    /** Icon position relative to label */
+    iconPosition: FourSidePosition | 'none';
+    /** Content alignment within button: 'start' | 'center' | 'end' */
+    align: 'start' | 'center' | 'end';
+    /** Content justification: 'start' | 'center' | 'end' | 'between' | 'around' */
+    justify: 'start' | 'center' | 'end' | 'between' | 'around';
+    /** Optional override for icon size */
+    iconSize?: string | number;
+    /** Optional override for icon color */
+    iconColor: string;
+    /** Visual variant */
+    variant: ButtonVariant;
+    /** Button color */
+    color: StatusColor;
+    /** Size */
+    size: ComponentSize;
+    /** Disabled state */
+    disabled: boolean;
+    /** Loading state (shows spinner) */
+    loading: boolean;
+    /** Loading spinner position */
+    loadingPosition: FourSidePosition | 'none' | 'icon' | 'center';
+    /** Full width button (shorthand for width="100%") */
+    fullWidth: boolean;
+    /** Custom width (e.g., '100%', '200px', 'auto') */
+    width?: string;
+    /** Custom min-width */
+    minWidth?: string;
+    /** Button shape */
+    shape: Shape;
+    /** Rounded corner style (legacy override) */
+    rounded: boolean;
+    /** Pill-shaped (legacy override) */
+    pill: boolean;
+    /** Circle-shaped (shorthand for shape="circle") */
+    circle: boolean;
+    /** Link URL. If set, renders as an anchor tag. */
+    href?: string;
+    /** Link target */
+    target?: string;
+    /** Link relationships */
+    rel?: string;
+    /** If true, the button will grow to fill available space in a flex container */
+    grow: boolean;
+    /** Badge content */
+    badge?: string | number;
+    /** Badge color variant (primary, success, danger, etc.) */
+    badgeColor: StatusColor;
+    /** Custom background color for the badge */
+    badgeCustomColor?: string;
+    /** Custom text color for the badge */
+    badgeCustomTextColor?: string;
+    /** Badge position */
+    badgePosition: FourCornerPosition | 'inline-left' | 'inline-right';
+    /** RTL support */
+    rtl: boolean;
+    /** Selected state (for toggle groups) */
+    selected: boolean;
+    /** Elevation level (0-5) */
+    elevation?: number;
+    /** Reveal animation type */
+    reveal: 'none' | 'fade-in' | 'slide-up' | 'zoom';
+    /** Reveal delay in ms */
+    revealDelay: number;
+    /** Disable ripple effect */
+    noRipple: boolean;
+    /** Accessible label override (especially useful for icon-only buttons) */
+    ariaLabel?: string;
+    /** Text to copy to clipboard when clicked. Shows feedback icon. */
+    copyValue?: string;
+    /** Progress fill (0–100). Shows a background fill bar. */
+    progress?: number;
+    copied: boolean;
+    /** Click event */
+    buttonClick: EventEmitter<MouseEvent>;
+    private handleClick;
+    private createRipple;
+    /**
+     * Positions the icon relative to the label according to `iconPosition`.
+     *
+     * Layout model:
+     *
+     *   'left'   →  [icon] [badges + label]          — horizontal, icon before
+     *   'right'  →  [badges + label] [icon]          — horizontal, icon after
+     *   'top'    →  [icon]                           — vertical, icon above
+     *               [badges + label]
+     *   'bottom' →  [badges + label]                 — vertical, icon below
+     *               [icon]
+     *
+     * The btn-label-group wrapper handles inline badges and the text label.
+     * Top/bottom icons sit outside that wrapper so flex-direction changes
+     * are not needed — the DOM order itself drives the visual order.
+     */
+    private renderButtonContent;
+    render(): any;
+}

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

@@ -0,0 +1 @@
+export type ButtonVariant = 'primary' | 'secondary' | 'outline' | 'ghost' | 'link' | 'glass' | 'soft' | 'accordion' | 'none';

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

@@ -0,0 +1,64 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import { DescriptionPosition, FourSidePosition, IconLibrary } from '../../types/common.type';
+export declare class ButtonToggle {
+    el: HTMLElement;
+    /** The value associated with this toggle */
+    value: string;
+    /** Display label */
+    label?: string;
+    /** Icon name */
+    icon?: string;
+    /** Icon on the left side (overrides icon when display-mode is both-sides) */
+    iconLeft?: string;
+    /** Icon on the right side */
+    iconRight?: string;
+    /** Icon position relative to label */
+    iconPosition: FourSidePosition;
+    /** Show icon only (hide label) */
+    iconOnly: boolean;
+    /** Form field name */
+    name: string;
+    /** Whether this toggle is selected */
+    selected: boolean;
+    /** Disabled state */
+    disabled: boolean;
+    /** Read-only state */
+    readonly: boolean;
+    /** Loading state */
+    loading: boolean;
+    /** Size */
+    size: string;
+    /** Color */
+    color: string | {
+        from?: string;
+        to?: string;
+    };
+    /** Visual variant */
+    variant: string;
+    /** Description text */
+    description?: string;
+    /** Description position */
+    descriptionPosition: DescriptionPosition;
+    /** Full width */
+    fullWidth: boolean;
+    /** Reveal animation */
+    reveal: 'none' | 'fade-in' | 'slide-up' | 'zoom';
+    /** Reveal delay in ms */
+    revealDelay: number;
+    /** Shape */
+    shape: string;
+    /** Icon library */
+    library: IconLibrary;
+    /** Avatar source */
+    avatarSrc?: string;
+    /** Avatar alt text */
+    avatarAlt?: string;
+    /** Status indicator */
+    status?: string;
+    /** Emitted when toggle is clicked */
+    buttonToggleChange: EventEmitter<{
+        value: string;
+    }>;
+    private handleClick;
+    render(): any;
+}

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

@@ -0,0 +1,141 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import { FourSidePosition, IconLibrary, Orientation } from '../../types';
+export declare class ButtonToggleGroup {
+    el: HTMLElement;
+    private internals;
+    private focusFrameId;
+    constructor();
+    value: string | string[];
+    name: string;
+    disabled: boolean;
+    readonly: boolean;
+    required: boolean;
+    invalid: boolean;
+    label: string;
+    helperText: string;
+    errorMessage: string;
+    orientation: Orientation;
+    /** Size category (xxxs to xxxl) */
+    size: any;
+    /** Visual color (string or {from: string, to: string}) */
+    color: string | {
+        from?: string;
+        to?: string;
+    };
+    /** Visual variant (glass, raised, etc) */
+    variant: any;
+    options: Array<{
+        value: string;
+        label?: string;
+        icon?: string;
+        iconLeft?: string;
+        iconRight?: string;
+        disabled?: boolean;
+        description?: string;
+        descriptionPosition?: any;
+        avatarSrc?: string;
+        avatarAlt?: string;
+        avatarStatus?: any;
+        status?: any;
+        iconLibrary?: any;
+    }> | string;
+    fullWidth: boolean;
+    iconPosition: FourSidePosition;
+    iconLibrary: IconLibrary;
+    library?: IconLibrary;
+    iconOnly: boolean;
+    mode: 'segmented' | 'dropdown';
+    buttonAction?: () => void;
+    buttonActionLabel: string;
+    keepButtonLabel: boolean;
+    customContent: boolean;
+    loading: boolean;
+    /** Button shape (rounded, pill, chip, etc) */
+    shape: any;
+    multiSelect: boolean;
+    batchActions: boolean;
+    searchEnabled: boolean;
+    exportEnabled: boolean;
+    importEnabled: boolean;
+    analyticsEnabled: boolean;
+    advancedTheme: string;
+    /** Entrance animation */
+    reveal: 'none' | 'fade-in' | 'slide-up' | 'zoom';
+    /** Base delay for group reveal */
+    revealDelay: number;
+    /** Stagger delay between items */
+    revealStagger: number;
+    /** High-Fidelity: Indicator follows cursor slightly when near selection */
+    magneticIndicator: boolean;
+    /** RTL support */
+    rtl: boolean;
+    /** Allow buttons to wrap to new lines */
+    wrap: boolean;
+    width: string;
+    /** localStorage key for persisting selected value across reloads. Empty string disables persistence. */
+    persistKey: string;
+    buttons: Array<any>;
+    isDropdownOpen: boolean;
+    searchQuery: string;
+    selectedValues: string[];
+    analytics: any;
+    focusIndex: number;
+    ariaLive: string;
+    private selectionIndicatorRef;
+    private resizeObserver;
+    private mutationObserver;
+    buttonToggleGroupChange: EventEmitter<{
+        value: string | string[];
+    }>;
+    buttonToggleGroupAction: EventEmitter<{
+        value: string | string[];
+    }>;
+    buttonToggleGroupBatch: EventEmitter<{
+        values: string[];
+    }>;
+    buttonToggleGroupSearch: EventEmitter<{
+        query: string;
+    }>;
+    buttonToggleGroupExport: EventEmitter<{
+        values: string[];
+    }>;
+    buttonToggleGroupImport: EventEmitter<{
+        values: string[];
+    }>;
+    buttonToggleGroupAnalytics: EventEmitter<any>;
+    componentWillLoad(): void;
+    componentDidLoad(): void;
+    disconnectedCallback(): void;
+    private handleMouseMove;
+    private updateIndicator;
+    private handleClickOutside;
+    componentDidUpdate(): void;
+    watchValue(): void;
+    handleColorChange(): void;
+    handleOptionsChange(): void;
+    private normalizeProps;
+    updateOptions(): void;
+    private updateOptionsFromChildren;
+    handleButtonToggleChange(event: CustomEvent): void;
+    private handleDropdownToggle;
+    private handleButtonAction;
+    private handleOptionSelect;
+    private _persistValue;
+    private syncButtons;
+    private renderLabel;
+    private renderHelperText;
+    private getFilteredButtons;
+    private renderDropdownButton;
+    render(): any;
+    handleKeyDown: (e: KeyboardEvent) => void;
+    focusButton(idx: number): void;
+    private scheduleFocusIndexUpdate;
+    handleFocus(idx: number): void;
+    handleBlur: () => void;
+    handleSearch(query: string): void;
+    selectAll: () => void;
+    clearAll: () => void;
+    exportSelection: () => void;
+    importSelection: () => void;
+    trackAnalytics(event: string, value: any): void;
+}

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

@@ -0,0 +1,7 @@
+import { IconItem } from '../../types/common.type';
+export type ButtonToggleOption = IconItem & {
+    value: string;
+    iconLeft?: string;
+    iconRight?: string;
+};
+export { ButtonToggleMode } from '../../types/common.type';

package/dist/types/components/callout-banner/callout-banner.d.ts

@@ -0,0 +1,115 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import { BasicSize, FourSidePosition, IconLibrary, StatusColor } from '../../types';
+export declare class UiCalloutBanner {
+    /** Custom ARIA role override (default: alert/status) */
+    ariaRole?: string;
+    /** Test ID for automated testing selectors */
+    testId?: string;
+    /** Auto-focus the close button or banner when shown */
+    focusOnShow: boolean;
+    /** Progress value (0-100) for banners that show progress */
+    progress?: number;
+    /** i18n/localization: override all labels/messages */
+    i18n?: {
+        dismissLabel?: string;
+        showMoreLabel?: string;
+        showLessLabel?: string;
+        loadingLabel?: string;
+        [key: string]: string | undefined;
+    };
+    private _id;
+    /** Visual variant that drives accent colors and icon */
+    variant: StatusColor;
+    /** Optional heading text when no `slot="title"` is provided */
+    heading?: string;
+    /** Optional message text when default slot is empty */
+    message?: string;
+    /** Optional icon glyph name; falls back to slot content if provided */
+    icon?: string;
+    /** Icon library used when the `icon` prop is set */
+    iconLibrary: IconLibrary;
+    /** Show the close button and allow dismissal */
+    closable: boolean;
+    /** Accessible label for the dismiss action */
+    dismissLabel: string;
+    /** Outline style instead of full background */
+    outlined: boolean;
+    /** Compact single-line layout */
+    compact: boolean;
+    /** Full-width top-of-page banner mode (removes border-radius, adds bottom border) */
+    banner: boolean;
+    /** Auto-dismiss after this many milliseconds (0 = disabled) */
+    autoClose: number;
+    /** Show a loading spinner in place of the icon and set aria-busy on the host */
+    loading: boolean;
+    /** Animate the callout with a pulsing ring to draw attention */
+    pulse: boolean;
+    /** Hide the icon column entirely */
+    noIcon: boolean;
+    /** Bold, fully-saturated background for high-emphasis notices */
+    solid: boolean;
+    /** Add a coloured left-border accent bar (VS Code–style) */
+    accentBar: boolean;
+    /** Pause the auto-close timer while the user hovers over the banner */
+    pauseOnHover: boolean;
+    /** Stick the banner to the top of its scroll container */
+    sticky: boolean;
+    /** Clamp the message to N lines with a Show more/less toggle (0 = off) */
+    truncate: number;
+    /** Size scale: sm, md, lg */
+    size: BasicSize;
+    /** Persistence key to remember dismissal via localStorage */
+    persistKey?: string;
+    /** Scroll the message in an infinite marquee/ticker loop */
+    marquee: boolean;
+    /** Duration (seconds) for one full marquee loop. Lower = faster. Default 18. */
+    marqueeSpeed: number;
+    visible: boolean;
+    closing: boolean;
+    paused: boolean;
+    expanded: boolean;
+    closeReady: boolean;
+    slottedHTML: string;
+    el: HTMLElement;
+    /** Fired when the banner is dismissed */
+    calloutDismiss: EventEmitter<void>;
+    /** Fired when the banner is shown via the show() method */
+    calloutShow: EventEmitter<void>;
+    /** Fired when an action in the slot is clicked */
+    calloutAction: EventEmitter<void>;
+    private autoCloseTimer?;
+    private closeBtnTimer?;
+    private dismissTimer?;
+    private remainingTime;
+    private timerStart;
+    handlePersistKeyChange(): void;
+    componentWillLoad(): void;
+    private checkPersistence;
+    connectedCallback(): void;
+    private readSlottedContent;
+    disconnectedCallback(): void;
+    /** Slide/fade-in direction for entrance animation */
+    enterFrom: FourSidePosition | 'fade';
+    /** Make the callout clickable as a link */
+    href?: string;
+    /** Target for the link (if href is set) */
+    target?: string;
+    /** Delay before close button appears (ms) */
+    closableAfter: number;
+    /** Programmatically update props at runtime */
+    update(props: Partial<UiCalloutBanner>): Promise<void>;
+    private handleActionClick;
+    onAutoCloseChange(): void;
+    private scheduleAutoClose;
+    private dismiss;
+    /** Programmatically dismiss the banner */
+    hide(): Promise<void>;
+    show(): Promise<void>;
+    private handleDismiss;
+    private handleMouseEnter;
+    private handleMouseLeave;
+    private toggleExpand;
+    private defaultIcon;
+    private getIcon;
+    render(): any;
+}

package/dist/types/components/callout-banner/types.d.ts

@@ -0,0 +1,7 @@
+export interface CalloutI18n {
+    dismissLabel?: string;
+    showMoreLabel?: string;
+    showLessLabel?: string;
+    loadingLabel?: string;
+    [key: string]: string | undefined;
+}

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

@@ -0,0 +1,160 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import { CardMenuItem, CardMenuEvent } from './types';
+import { BasicSize, CardDisplayMode, ComponentVariant, FourCornerPosition, IconLibrary, Orientation, Shape, StatusColor } from '../../types/common.type';
+export declare class Card {
+    element: HTMLElement;
+    /** Unique identifier for the card */
+    cardId: string;
+    /** Card title string */
+    cardTitle: string;
+    /** Card variant */
+    variant: ComponentVariant;
+    /** Card size */
+    size: BasicSize;
+    /** Card layout orientation */
+    layout: Orientation;
+    /** Card color theme */
+    color: StatusColor;
+    /** Card display mode */
+    displayMode: CardDisplayMode;
+    /** Card shape */
+    shape: Shape;
+    /** Enable glassmorphism effect (premium visual) */
+    glass: boolean;
+    /** Whether to show standard border */
+    bordered: boolean;
+    /** Custom border string (e.g., '2px solid red') */
+    border: string;
+    /** Custom border radius */
+    borderRadius: string;
+    /** Card importance level */
+    importance: 'standard' | 'emphasized';
+    /** Card pattern/style preset */
+    pattern: 'default' | 'product' | 'shortcut';
+    /** Custom head section style */
+    headStyle: {
+        [key: string]: string;
+    };
+    /** Custom body section style */
+    bodyStyle: {
+        [key: string]: string;
+    };
+    /** Type variant: 'inner' | 'default' */
+    type: 'inner' | 'default';
+    /** Width of the card */
+    width: string;
+    /** Height of the card */
+    height: string;
+    /** Aspect ratio for cover image container */
+    aspectRatio: string;
+    /** Enable hover elevation/shadow effect */
+    hoverable: boolean;
+    /** Enable flip animation */
+    flippable: boolean;
+    /** Flip trigger mechanism: 'click' | 'hover' */
+    flipTrigger: 'click' | 'hover';
+    /** Initially flipped or controlled flipped state */
+    flipped: boolean;
+    /** Enable card expansion/collapse */
+    collapsible: boolean;
+    /** Initially collapsed or controlled collapsed state */
+    collapsed: boolean;
+    /** Show close button in header */
+    closable: boolean;
+    /** Enable selection mode */
+    selectable: boolean;
+    /** Selection state */
+    selected: boolean;
+    /** Make entire card clickable (if flippable is false) */
+    clickable: boolean;
+    /** URL to navigate to when clicked */
+    href: string;
+    /** Link target (e.g., '_blank') */
+    target: string;
+    /** Enable 3D tilt effect */
+    tilt: boolean;
+    /** Enable magnetic attraction effect */
+    magnetic: boolean;
+    /** Cover image URL */
+    cover: string;
+    /** Alt text for cover image */
+    coverAlt: string;
+    /** Content to show in the extra section of the header */
+    extra: string;
+    /** Avatar image URL */
+    avatar: string;
+    /** Avatar icon class (e.g. 'fas fa-user') */
+    avatarIcon: string;
+    /** Ribbon text to display on a corner */
+    ribbon: string;
+    /** Ribbon position */
+    ribbonPosition: FourCornerPosition;
+    /** Ribbon custom color */
+    ribbonColor: string;
+    /** Description text (pattern: shortcut) */
+    description: string;
+    /** Tag text (pattern: product/shortcut) */
+    tag: string;
+    /** Primary button text in footer */
+    buttonText: string;
+    /** Quick actions (comma-separated list for bottom footer) */
+    actions: string;
+    /** Show menu button (3 dots) */
+    showMenu: boolean;
+    /** Menu items (as JSON string array of CardMenuItem) */
+    menuItems: string;
+    /** Menu actions (comma-separated list, alternative to menuItems) */
+    menuActions: string;
+    /** Icon library for menu items */
+    iconLibrary: IconLibrary;
+    /** Show loading skeleton */
+    loading: boolean;
+    /** Automatically scroll the card into view when it is expanded if it's partially off-screen */
+    autoScroll: boolean;
+    /** Scrolling behavior when autoScroll is enabled */
+    scrollBehavior: ScrollBehavior;
+    isFlipped: boolean;
+    isMenuOpen: boolean;
+    isCollapsed: boolean;
+    parsedMenuItems: CardMenuItem[];
+    magneticTransform: string;
+    tiltTransform: string;
+    cardFlip: EventEmitter<boolean>;
+    menuItemClick: EventEmitter<CardMenuEvent>;
+    expandToggle: EventEmitter<{
+        expanded: boolean;
+    }>;
+    cardToggle: EventEmitter<boolean>;
+    cardClick: EventEmitter<void>;
+    cardSelect: EventEmitter<boolean>;
+    cardClose: EventEmitter<void>;
+    /** Emitted when a menu action is clicked (alias for menuItemClick matching ui-card) */
+    menuActionClick: EventEmitter<string>;
+    private menuRef;
+    handleMenuPropsChange(): void;
+    handleFlippedChange(newValue: boolean): void;
+    handleCollapsedChange(newValue: boolean): void;
+    componentWillLoad(): void;
+    handleClickOutside(event: MouseEvent): void;
+    private parseMenuItems;
+    private toggleFlip;
+    private toggleCollapse;
+    /** Programmatically scroll this card into view */
+    scrollToCard(): Promise<void>;
+    private toggleMenu;
+    private handleMenuItemClick;
+    private handleCardClick;
+    private handleMouseEnter;
+    private handleMouseLeave;
+    private handleMouseMove;
+    private handleClose;
+    private renderMenu;
+    private renderSkeleton;
+    private renderSelectionIndicator;
+    private renderHeader;
+    private renderCover;
+    private renderFooter;
+    private renderFrontCard;
+    private renderBackCard;
+    render(): any;
+}

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

@@ -0,0 +1,13 @@
+import { IconItem } from '../../types/common.type';
+export interface CardMenuItem extends IconItem {
+    id: string;
+    onClick?: (event: MouseEvent) => void;
+    separator?: boolean;
+    active?: boolean;
+    color?: string;
+    badge?: string | number;
+}
+export interface CardMenuEvent {
+    itemId: string;
+    cardId?: string;
+}