atomicuilibrary 0.0.1

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

@@ -0,0 +1,182 @@
+import { TabItem, TabChangeEvent } from './types';
+import { EventEmitter } from '../../stencil-public-runtime';
+import { ComponentSize, IconLibrary, LeftRight, Orientation, TopBottom } from '../../types/common.type';
+export declare class Tabs {
+    element: HTMLElement;
+    /**
+     * Array of tab items
+     */
+    items: TabItem[] | string;
+    /**
+     * ID of the tab that should be active by default
+     */
+    defaultActive: string;
+    /**
+     * Animation duration in milliseconds
+     */
+    animationDuration: number;
+    /**
+     * Orientation of tabs: 'horizontal' or 'vertical'
+     */
+    orientation: Orientation;
+    /**
+     * Position of the indicator for line variant: TopBottom
+     */
+    indicatorPosition: TopBottom;
+    /**
+     * Show close all button
+     */
+    showCloseAll: boolean;
+    /**
+     * Show tab list dropdown button
+     */
+    showTabList: boolean;
+    /**
+     * Maximum width for tab titles (in pixels)
+     */
+    maxTabWidth: number;
+    /**
+     * Maximum visible length for tab titles (characters). If exceeded, title is ellipsized via CSS and full text is available in tooltip.
+     */
+    maxTitleLength: number;
+    /**
+     * Enable text wrapping in tabs
+     */
+    wrapText: boolean;
+    /**
+     * Position of tabs header: 'left', 'center', 'right', 'full-width'
+     */
+    position: LeftRight | 'center' | 'full-width';
+    /**
+     * Scroll mode: 'auto' (auto-scroll to active), 'manual' (user controls), 'none' (no scroll)
+     */
+    scrollMode: 'auto' | 'manual' | 'none';
+    /**
+     * Animation on tab selection
+     */
+    selectionAnimation: 'slide' | 'fade' | 'scale' | 'none';
+    /**
+     * Icon position: 'start', 'end', 'top', 'bottom'
+     */
+    iconPosition: LeftRight | TopBottom;
+    /**
+     * Show only icons (hide titles)
+     */
+    iconOnly: boolean;
+    /**
+     * Scroll button placement: 'split' (ends), 'start' (both left/top), 'end' (both right/bottom)
+     */
+    scrollButtonPlacement: 'split' | 'start' | 'end';
+    /**
+     * Tab variant style
+     */
+    variant: 'line' | 'card' | 'pill' | 'subtle' | 'glass' | 'folder' | 'enclosed' | 'slanted' | 'minimal' | 'elastic' | 'sidebar';
+    /**
+     * Custom active/indicator color (sets --tab-active-color). Accepts any CSS color value.
+     */
+    activeColor: string;
+    /**
+     * Selection indicator shape — applies to variants that use a sliding bar (line, minimal).
+     * - line    — default 4px bar
+     * - capsule — pill-rounded fat bar
+     * - dot     — centred dot
+     * - glow    — soft blur glow bar
+     * - bold    — extra-thick bar
+     * - none    — no indicator
+     */
+    indicatorStyle: 'line' | 'capsule' | 'dot' | 'glow' | 'bold' | 'none';
+    /**
+     * Optional gradient for the indicator bar.
+     * Accepts any CSS gradient string, e.g. "linear-gradient(90deg,#ec4899,#8b5cf6)".
+     * When set, overrides activeColor on the indicator (activeColor still affects text & active bg).
+     * Leave empty to use the solid activeColor.
+     */
+    indicatorGradient: string;
+    /**
+     * Tab size: xs | sm | md | lg | xl
+     */
+    size: ComponentSize;
+    /**
+     * Default library for icons
+     */
+    iconLibrary: IconLibrary;
+    /**
+     * When true, non-active tab panels are not mounted until first activated (content-based tabs only)
+     */
+    lazy: boolean;
+    /**
+     * Enable drag-and-drop to reorder tabs
+     */
+    isDraggable: boolean;
+    activeTab: string;
+    parsedItems: TabItem[];
+    activeMenuTab: string | null;
+    showScrollButtons: boolean;
+    isTabListOpen: boolean;
+    tabListPosition: {
+        x: number;
+        y: number;
+        width: number;
+        maxHeight: number;
+    } | null;
+    tabListSearch: string;
+    activeMenuPosition: {
+        x: number;
+        y: number;
+    } | null;
+    editingTab: string | null;
+    draggingTabId: string | null;
+    private tabListTrigger?;
+    private activeMenuTrigger?;
+    private _mountedTabs;
+    tabChange: EventEmitter<TabChangeEvent>;
+    tabClose: EventEmitter<string>;
+    closeAll: EventEmitter<void>;
+    tabEdit: EventEmitter<string>;
+    tabDelete: EventEmitter<string>;
+    tabOpenPanel: EventEmitter<string>;
+    tabsReordered: EventEmitter<TabItem[]>;
+    tabUpdate: EventEmitter<{
+        id: string;
+        title: string;
+    }>;
+    private tabsHeaderRef?;
+    private indicatorRef?;
+    private resizeObserver?;
+    parseItems(newValue: TabItem[] | string): void;
+    onDefaultActiveChange(newValue: string): void;
+    onActiveTabChange(): void;
+    componentWillLoad(): void;
+    componentDidLoad(): void;
+    disconnectedCallback(): void;
+    componentDidUpdate(): void;
+    handleKeyDown(event: KeyboardEvent): void;
+    handleScroll(): void;
+    private recalculateDropdownPositions;
+    handleWindowClick(event: MouseEvent): void;
+    private toggleMenu;
+    private toggleTabList;
+    private selectTab;
+    private handleCloseTab;
+    private focusNextTab;
+    private focusPreviousTab;
+    private focusFirstTab;
+    private focusLastTab;
+    private focusTab;
+    private handleDragStart;
+    private handleDragOver;
+    private handleDrop;
+    private startEditing;
+    private commitEdit;
+    private scrollToActiveTab;
+    private checkScrollButtons;
+    private scrollTabs;
+    private updateIndicator;
+    selectTabById(tabId: string): Promise<void>;
+    getActiveTab(): Promise<string>;
+    destroyComponent(): Promise<void>;
+    private handleCloseAll;
+    private renderTab;
+    private renderContent;
+    render(): any;
+}

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

@@ -0,0 +1,17 @@
+import { IconItem } from '../../types/common.type';
+export interface TabItem extends IconItem {
+    id: string;
+    title: string;
+    content?: string;
+    color?: string;
+    badge?: number | string;
+    badgeVariant?: 'default' | 'neutral' | 'primary' | 'success' | 'warning';
+    actions?: boolean;
+    closable?: boolean;
+    useSlot?: boolean;
+    slot?: string;
+}
+export interface TabChangeEvent {
+    tabId: string;
+    activeTab: string;
+}

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

@@ -0,0 +1,172 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import { IconLibrary } from '../../types';
+import { ComponentSize, LeftRight, Orientation, Shape, StatusColor } from '../../types/common.type';
+export declare class Tag {
+    element: HTMLElement;
+    /**
+     * Tag label text
+     */
+    label?: string;
+    /**
+     * Underlying value for the tag (useful for IDs)
+     */
+    value?: string;
+    /**
+     * Color variant
+     */
+    color: StatusColor;
+    /**
+     * Size of the tag
+     */
+    size: ComponentSize;
+    /**
+     * High-Fidelity: RTL support
+     */
+    rtl: boolean;
+    /**
+     * Tag variant
+     */
+    variant: 'filled' | 'outlined' | 'light' | 'dot';
+    /**
+     * Whether tag is removable
+     */
+    removable: boolean;
+    /**
+     * Icon to display
+     */
+    icon?: string;
+    /**
+     * Orientation of the tag: Orientation | 'vertical-text' | 'vertical-rotated'
+     */
+    orientation: Orientation | 'vertical-text' | 'vertical-rotated';
+    /**
+     * Shape of the tag: Shape | 'ribbon' | 'ticket' | 'coupon'
+     */
+    shape: Shape | 'ribbon' | 'ticket' | 'coupon';
+    /**
+     * Whether to make the icon spin (useful for loading/syncing)
+     */
+    iconSpin: boolean;
+    /**
+     * Custom close icon (replacing the default Ionicon 'close')
+     */
+    closeIcon?: string;
+    /**
+     * Custom background color hex string
+     */
+    customColor?: string;
+    /**
+     * Custom text color hex string
+     */
+    customTextColor?: string;
+    /**
+     * Tooltip text override for hover
+     */
+    tooltip?: string;
+    /**
+     * Whether the tag is disabled
+     */
+    disabled: boolean;
+    /**
+     * Explicit icon position (unifying names)
+     */
+    iconPosition: LeftRight;
+    /**
+     * Icon library (unifying with other components)
+     */
+    iconLibrary: IconLibrary;
+    /**
+     * Image source URL to display at the start
+     */
+    image?: string;
+    /**
+     * User avatar URL
+     */
+    userAvatar?: string;
+    /**
+     * Whether the tag is checkable (selectable)
+     */
+    checkable: boolean;
+    /**
+     * Whether the tag is checked (for checkable tags)
+     */
+    checked: boolean;
+    /**
+     * Animation type for opening/closing
+     */
+    animation: 'fade' | 'scale' | 'slide' | 'rotate' | 'none';
+    /**
+     * Animation duration in milliseconds
+     */
+    animationDuration: number;
+    /**
+     * Whether the tag is clickable (shows pointer and hover effect)
+     */
+    clickable: boolean;
+    /**
+     * Elevation level (0-3)
+     */
+    elevation: 0 | 1 | 2 | 3;
+    /**
+     * Whether the tag is in a loading state
+     */
+    loading: boolean;
+    /**
+     * Whether to show a pulse animation (for attention)
+     */
+    pulse: boolean;
+    /**
+     * Whether to generate color automatically based on label hash
+     */
+    autoColor: boolean;
+    /**
+     * Gradient variant (e.g., 'blue-purple', 'green-teal')
+     */
+    gradient?: string;
+    /**
+     * Maximum width with text truncation
+     */
+    maxWidth?: string;
+    /**
+     * Size of the icon (e.g., '14px', '1em')
+     */
+    iconSize: string;
+    /**
+     * Whether to show as a skeleton (placeholder)
+     */
+    skeleton: boolean;
+    /**
+     * Show tooltip on hover (useful with maxWidth)
+     */
+    showTooltip: boolean;
+    /**
+     * Badge content to display
+     */
+    badge?: string | number;
+    /**
+     * Badge color variant
+     */
+    badgeColor: StatusColor;
+    /**
+     * Counter value to display at the end of the tag
+     */
+    counter?: string | number;
+    isClosing: boolean;
+    isOpening: boolean;
+    visible: boolean;
+    /**
+     * Event emitted when tag is removed
+     */
+    tagRemove: EventEmitter<void>;
+    /**
+     * Event emitted when checked state changes
+     */
+    tagCheck: EventEmitter<boolean>;
+    private getColorFromHash;
+    private handleKeyDown;
+    private handleRemove;
+    private handleClick;
+    componentDidLoad(): void;
+    render(): any;
+    private renderMedia;
+}

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

@@ -0,0 +1,4 @@
+import { BasicSize, StatusColor } from '../../types/common.type';
+export { TagVariant, TagSelectionMode } from '../../types/common.type';
+export type TagColor = StatusColor;
+export type TagSize = BasicSize;

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

@@ -0,0 +1,107 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import { BasicSize, StatusColor, Shape } from '../../types/common.type';
+export declare class TagGroup {
+    el: HTMLElement;
+    /**
+     * Maximum number of tags to display before hiding and showing (+N)
+     */
+    max: number;
+    /**
+     * Spacing between tags
+     */
+    spacing: string;
+    /**
+     * Whether to overlap tags (avatar style)
+     */
+    overlap: boolean;
+    /**
+     * Selected values (for checkable tags)
+     */
+    value: string | string[];
+    /**
+     * Selection mode: 'none', 'single', or 'multiple'
+     */
+    selectionMode: 'none' | 'single' | 'multiple';
+    /**
+     * Bulk size for all tags in group
+     */
+    size?: BasicSize;
+    /**
+     * Bulk variant for all tags in group
+     */
+    variant?: 'filled' | 'outlined' | 'light' | 'dot';
+    /**
+     * Bulk color for all tags in group
+     */
+    color?: StatusColor;
+    /**
+     * Whether all tags in group should be rounded
+     */
+    rounded: boolean;
+    /**
+     * Whether all tags in group should be removable
+     */
+    removable: boolean;
+    /**
+     * Whether users can add new tags (Premium)
+     */
+    creatable: boolean;
+    /**
+     * Whether tags are filterable via search (Premium)
+     */
+    searchable: boolean;
+    /**
+     * Whether overflow tags can be toggled to show (Premium)
+     */
+    collapsible: boolean;
+    /**
+     * Case sensitivity for search and duplicates
+     */
+    caseSensitive: boolean;
+    /**
+     * Delimiters to trigger tag creation
+     */
+    delimiters: string[];
+    /**
+     * Whether all tags in group should show as skeletons
+     */
+    skeleton: boolean;
+    /**
+     * Bulk shape for all tags in group
+     */
+    shape?: Shape | 'ribbon' | 'ticket' | 'coupon';
+    /**
+     * Bulk animation for all tags in group
+     */
+    animation?: 'fade' | 'scale' | 'slide' | 'rotate' | 'none';
+    /**
+     * Whether the entire group is read-only (disables all selection/removal)
+     */
+    readOnly: boolean;
+    /**
+     * Placeholder text when group is empty (creatable mode)
+     */
+    placeholder: string;
+    /**
+     * Event emitted when a new tag is added
+     */
+    tagAdd: EventEmitter<string>;
+    searchQuery: string;
+    isExpanded: boolean;
+    isLastTagHighlighted: boolean;
+    tagGroupChange: EventEmitter<string | string[]>;
+    handleKeyDown(ev: KeyboardEvent): void;
+    handleGroupChange(): void;
+    handleTagRemove(ev: CustomEvent): void;
+    handleTagCheck(ev: CustomEvent<boolean>): void;
+    componentDidLoad(): void;
+    private updateChildren;
+    private syncSelection;
+    private handleSearch;
+    private addTags;
+    private removeLastTag;
+    private removeTagByValue;
+    private handleAddTag;
+    private toggleExpand;
+    render(): any;
+}

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

@@ -0,0 +1,2 @@
+export { TagVariant, TagSelectionMode } from '../../types/common.type';
+export type { TagColor, TagSize } from '../tag/types';

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

@@ -0,0 +1,73 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import { TimelineEvent, TimelineFlow, TimelineTheme, TimelineVariant, TimelineMarker } from './types';
+import { DateFormat, FourSidePosition, Orientation, TimelineIconPosition } from '../../types/common.type';
+export declare class Timeline {
+    /** Events definition */
+    events: TimelineEvent[] | string;
+    normalizedEvents: TimelineEvent[];
+    /** Flow type */
+    flow: TimelineFlow;
+    /** Layout mode */
+    mode: Orientation;
+    /** Alignment/Positioning */
+    align: 'center' | 'alternate' | FourSidePosition;
+    /** Theme variables */
+    theme?: TimelineTheme;
+    /** Multi-line wrapping */
+    multiline: boolean;
+    columns: number;
+    /** Visual Variant */
+    variant: TimelineVariant;
+    /** Marker Type */
+    marker: TimelineMarker;
+    /** Whether items are interactive/clickable (Premium) */
+    clickable: boolean;
+    /** Reverse the order of events */
+    reverse: boolean;
+    /** Display a pending state at the end (dashed line) */
+    pending: boolean;
+    /** Enable integrated search filtering (Premium) */
+    searchable: boolean;
+    lineColor: string;
+    lineWidth: number;
+    dotSize: number;
+    dotColor: string;
+    showLine: boolean;
+    showDots: boolean;
+    animateOnScroll: boolean;
+    compact: boolean;
+    wrap: boolean;
+    showDates: boolean;
+    dateFormat: DateFormat;
+    iconPosition: TimelineIconPosition;
+    activeItemId?: string;
+    visibleItems: Set<string>;
+    searchQuery: string;
+    /** Emitted when a timeline item becomes visible (for animation) */
+    itemVisible: EventEmitter<{
+        item: TimelineEvent;
+        index: number;
+    }>;
+    /** Emitted when an item is clicked */
+    itemClick: EventEmitter<TimelineEvent>;
+    el: HTMLElement;
+    /** Watch for events prop changes */
+    normalizeEvents(newEvents: TimelineEvent[] | string): void;
+    isRtl: boolean;
+    isMobile: boolean;
+    private observer?;
+    componentWillLoad(): void;
+    componentDidLoad(): void;
+    disconnectedCallback(): void;
+    private handleResize;
+    private checkMobile;
+    private checkRtl;
+    private setupIntersectionObserver;
+    private getProcessedEvents;
+    private handleSearch;
+    private handleItemClick;
+    render(): any;
+    private renderMultiline;
+    private renderPendingItem;
+    private renderEventItem;
+}

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

@@ -0,0 +1,28 @@
+import { ComponentValidator, FlowType, FourSidePosition, Orientation, TimelineEventStatus, WithChildren, WithMetadata } from '../../types/common.type';
+export type { TimelineEventStatus, TimelineVariant, TimelineMarker } from '../../types/common.type';
+export type TimelineFlow = FlowType;
+export type TimelineMode = Orientation;
+export type TimelineValidator = ComponentValidator<TimelineEvent>;
+export interface TimelineEvent extends WithMetadata, WithChildren<TimelineEvent> {
+    id?: string;
+    label: string;
+    description?: string;
+    status?: TimelineEventStatus;
+    validator?: TimelineValidator;
+    timestamp?: string;
+    date?: string;
+    time?: string;
+    opposite?: string;
+    icon?: string;
+    image?: string;
+    iconColor?: string;
+    iconBackground?: string;
+    dotColor?: string;
+    lineColor?: string;
+    position?: FourSidePosition;
+    customContent?: string;
+    badge?: string;
+}
+export interface TimelineTheme {
+    [key: string]: string | undefined;
+}

package/dist/types/components/timeline/ui-timeline.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/timeline-item/timeline-item.d.ts

@@ -0,0 +1,15 @@
+export declare class TimelineItem {
+    /**
+     * The title of the timeline item.
+     */
+    itemTitle: string;
+    /**
+     * The description of the timeline item.
+     */
+    itemDescription: string;
+    /**
+     * The date of the timeline item.
+     */
+    itemDate: string;
+    render(): any;
+}