@xlabs-store/core 0.0.1

package/dist/types/components/x-mentions/x-mentions.d.ts

@@ -0,0 +1,159 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import { MentionOption } from './types';
+export declare class XMentions {
+    /**
+     * Host element reference.
+     */
+    el: HTMLElement;
+    /**
+     * Current input value.
+     * @example
+     * <x-mentions value="@alice"></x-mentions>
+     */
+    value: string;
+    /**
+     * Available mention options.
+     * @example
+     * <x-mentions options={[{ value: 'alice', label: 'Alice' }]}></x-mentions>
+     */
+    options: MentionOption[];
+    /**
+     * Trigger prefix for mentions.
+     * @example
+     * <x-mentions triggerPrefix={['@', '#']}></x-mentions>
+     */
+    triggerPrefix: string | string[];
+    /**
+     * Placeholder text.
+     * @example
+     * <x-mentions placeholder="Type @ to mention"></x-mentions>
+     */
+    placeholder: string;
+    /**
+     * Loading state for dropdown.
+     * @example
+     * <x-mentions loading></x-mentions>
+     */
+    loading: boolean;
+    /**
+     * Disable input.
+     * @example
+     * <x-mentions disabled></x-mentions>
+     */
+    disabled: boolean;
+    /**
+     * Number of textarea rows.
+     * @example
+     * <x-mentions rows={4}></x-mentions>
+     */
+    rows: number;
+    /**
+     * Dropdown open state.
+     */
+    open: boolean;
+    /**
+     * Filtered options based on query.
+     */
+    filterOptions: MentionOption[];
+    /**
+     * Active option index.
+     */
+    activeIndex: number;
+    /**
+     * Inline style for dropdown position.
+     */
+    popupStyle: {
+        top: string;
+        left: string;
+    };
+    /**
+     * Emits when value changes.
+     * @example
+     * <x-mentions onXChange={(ev) => console.log(ev.detail)}></x-mentions>
+     */
+    xChange: EventEmitter<string>;
+    /**
+     * Emits when an option is selected.
+     * @example
+     * <x-mentions onXSelect={(ev) => console.log(ev.detail)}></x-mentions>
+     */
+    xSelect: EventEmitter<MentionOption>;
+    /**
+     * Emits when search query changes.
+     * @example
+     * <x-mentions onXSearch={(ev) => console.log(ev.detail)}></x-mentions>
+     */
+    xSearch: EventEmitter<string>;
+    textarea: HTMLTextAreaElement;
+    measureDiv: HTMLDivElement;
+    /**
+     * Initialize measurement helper after load.
+     * @returns void
+     * @example
+     * <x-mentions></x-mentions>
+     */
+    componentDidLoad(): void;
+    handleWindowClick(ev: Event): void;
+    /**
+     * Handle input change and trigger search.
+     *
+     * Flow:
+     * 1. Updates internal `value` and emits change.
+     * 2. Detects cursor position.
+     * 3. Scans backwards from cursor for trigger prefix (e.g., '@').
+     * 4. If prefix found:
+     *    - Extracts query string between prefix and cursor.
+     *    - Validates query (no spaces).
+     *    - Emits `xSearch`.
+     *    - Filters `options` based on query.
+     *    - If matches found, opens dropdown and positions it.
+     * 5. Else, closes dropdown.
+     *
+     * @param e - Input event from textarea.
+     * @returns void
+     * @example
+     * <x-mentions></x-mentions>
+     */
+    handleInput(e: InputEvent): void;
+    /**
+     * Update dropdown position relative to textarea.
+     * @param textarea - Textarea element.
+     * @param index - Trigger index in value.
+     * @returns void
+     * @example
+     * <x-mentions></x-mentions>
+     */
+    updatePopupPosition(textarea: HTMLTextAreaElement, index: number): void;
+    /**
+     * Handle keyboard navigation in dropdown.
+     * @param e - Keyboard event.
+     * @returns void
+     * @example
+     * <x-mentions></x-mentions>
+     */
+    handleKeyDown(e: KeyboardEvent): void;
+    /**
+     * Select an option and insert into value.
+     *
+     * Flow:
+     * 1. Identifies the trigger prefix position before cursor.
+     * 2. Constructs new value:
+     *    - Text before prefix + prefix + option value + space + text after cursor.
+     * 3. Updates `value` and emits change/select events.
+     * 4. Closes dropdown.
+     * 5. Restores focus and moves cursor to end of inserted mention.
+     *
+     * @param option - Mention option to insert.
+     * @returns void
+     * @example
+     * <x-mentions></x-mentions>
+     */
+    selectOption(option: MentionOption): void;
+    /**
+     * Render textarea and dropdown list.
+     * @returns JSX.Element
+     * @example
+     * <x-mentions options={[{ value: 'alice', label: 'Alice' }]}></x-mentions>
+     */
+    render(): any;
+}

package/dist/types/components/x-menu/types.d.ts

@@ -0,0 +1,83 @@
+/**
+ * Menu mode type
+ */
+export type MenuMode = 'vertical' | 'horizontal' | 'inline';
+/**
+ * Menu theme type
+ */
+export type MenuTheme = 'light' | 'dark';
+/**
+ * Menu trigger submenu action type
+ */
+export type TriggerSubMenuAction = 'hover' | 'click';
+/**
+ * Menu select event detail
+ */
+export interface MenuSelectDetail {
+    key: string;
+    keyPath: string[];
+    selectedKeys: string[];
+    domEvent: Event;
+}
+/**
+ * Menu deselect event detail (for multiple mode)
+ */
+export interface MenuDeselectDetail {
+    key: string;
+    keyPath: string[];
+    selectedKeys: string[];
+    domEvent: Event;
+}
+/**
+ * Menu click event detail
+ */
+export interface MenuClickDetail {
+    key: string;
+    keyPath: string[];
+    domEvent: Event;
+}
+/**
+ * Menu open change event detail
+ */
+export interface MenuOpenChangeDetail {
+    openKeys: string[];
+}
+/**
+ * Submenu title click event detail
+ */
+export interface SubmenuTitleClickDetail {
+    key: string;
+    domEvent: Event;
+}
+/**
+ * Internal menu item click event detail
+ */
+export interface MenuItemClickDetail {
+    key: string;
+    keyPath: string[];
+    domEvent: Event;
+}
+/**
+ * Internal submenu open/close event detail
+ */
+export interface SubmenuToggleDetail {
+    key: string;
+    open: boolean;
+    keyPath: string[];
+}
+/**
+ * Menu context passed to children
+ */
+export interface MenuContext {
+    mode: MenuMode;
+    theme: MenuTheme;
+    inlineCollapsed: boolean;
+    inlineIndent: number;
+    selectedKeys: string[];
+    openKeys: string[];
+    multiple: boolean;
+    selectable: boolean;
+    triggerSubMenuAction: TriggerSubMenuAction;
+    subMenuOpenDelay: number;
+    subMenuCloseDelay: number;
+}

package/dist/types/components/x-menu/x-menu.d.ts

@@ -0,0 +1,153 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import type { MenuMode, MenuTheme, TriggerSubMenuAction, MenuSelectDetail, MenuDeselectDetail, MenuClickDetail, MenuOpenChangeDetail, MenuItemClickDetail, SubmenuToggleDetail } from './types';
+export declare class XMenu {
+    /**
+     * Host element reference.
+     */
+    el: HTMLElement;
+    /**
+     * Type of menu: vertical, horizontal, or inline
+     * @example
+     * <x-menu mode="horizontal"></x-menu>
+     */
+    mode: MenuMode;
+    /**
+     * Color theme of the menu
+     * @example
+     * <x-menu theme="dark"></x-menu>
+     */
+    theme: MenuTheme;
+    /**
+     * Specifies the collapsed status when menu is inline mode
+     * @example
+     * <x-menu inlineCollapsed></x-menu>
+     */
+    inlineCollapsed: boolean;
+    /**
+     * Indent (in pixels) of inline menu items on each level
+     * @example
+     * <x-menu inlineIndent={32}></x-menu>
+     */
+    inlineIndent: number;
+    /**
+     * Array with the keys of default selected menu items
+     * @example
+     * <x-menu defaultSelectedKeys={['home']}></x-menu>
+     */
+    defaultSelectedKeys: string[];
+    /**
+     * Array with the keys of currently selected menu items (controlled)
+     * @example
+     * <x-menu selectedKeys={['settings']}></x-menu>
+     */
+    selectedKeys?: string[];
+    /**
+     * Array with the keys of default opened sub-menus
+     * @example
+     * <x-menu defaultOpenKeys={['sub-1']}></x-menu>
+     */
+    defaultOpenKeys: string[];
+    /**
+     * Array with the keys of currently opened sub-menus (controlled)
+     * @example
+     * <x-menu openKeys={['sub-1']}></x-menu>
+     */
+    openKeys?: string[];
+    /**
+     * Allows selection of multiple items
+     * @example
+     * <x-menu multiple></x-menu>
+     */
+    multiple: boolean;
+    /**
+     * Allows selecting menu items
+     * @example
+     * <x-menu selectable={false}></x-menu>
+     */
+    selectable: boolean;
+    /**
+     * Which action can trigger submenu open/close
+     * @example
+     * <x-menu triggerSubMenuAction="click"></x-menu>
+     */
+    triggerSubMenuAction: TriggerSubMenuAction;
+    /**
+     * Delay time to show submenu when mouse enters (in seconds)
+     * @example
+     * <x-menu subMenuOpenDelay={0.2}></x-menu>
+     */
+    subMenuOpenDelay: number;
+    /**
+     * Delay time to hide submenu when mouse leaves (in seconds)
+     * @example
+     * <x-menu subMenuCloseDelay={0.2}></x-menu>
+     */
+    subMenuCloseDelay: number;
+    internalSelectedKeys: string[];
+    internalOpenKeys: string[];
+    /**
+     * Called when a menu item is selected
+     * @example
+     * <x-menu onXSelect={(ev) => console.log(ev.detail)}></x-menu>
+     */
+    xSelect: EventEmitter<MenuSelectDetail>;
+    /**
+     * Called when a menu item is deselected (multiple mode only)
+     * @example
+     * <x-menu onXDeselect={(ev) => console.log(ev.detail)}></x-menu>
+     */
+    xDeselect: EventEmitter<MenuDeselectDetail>;
+    /**
+     * Called when a menu item is clicked
+     * @example
+     * <x-menu onXClick={(ev) => console.log(ev.detail)}></x-menu>
+     */
+    xClick: EventEmitter<MenuClickDetail>;
+    /**
+     * Called when sub-menus are opened or closed
+     * @example
+     * <x-menu onXOpenChange={(ev) => console.log(ev.detail)}></x-menu>
+     */
+    xOpenChange: EventEmitter<MenuOpenChangeDetail>;
+    componentWillLoad(): void;
+    componentDidLoad(): void;
+    componentDidUpdate(): void;
+    handleSelectedKeysChange(newValue: string[] | undefined): void;
+    handleOpenKeysChange(newValue: string[] | undefined): void;
+    handlePropsChange(): void;
+    handleItemClick(ev: CustomEvent<MenuItemClickDetail>): void;
+    /**
+     * Listens for submenu toggle events.
+     * Updates the open keys state and emits change event.
+     *
+     * Flow:
+     * 1. Stops event propagation.
+     * 2. Retrieves the key and target open state from the event detail.
+     * 3. Updates the list of open keys:
+     *    - If opening: Appends the key to the list.
+     *    - If closing: Filters the key out of the list.
+     * 4. Updates internal state and emits `xOpenChange`.
+     *
+     * @param {CustomEvent<SubmenuToggleDetail>} ev - The toggle event.
+     */
+    handleSubmenuToggle(ev: CustomEvent<SubmenuToggleDetail>): void;
+    private getSelectedKeys;
+    private getOpenKeys;
+    private updateSelectedKeys;
+    private updateOpenKeys;
+    private syncChildrenProps;
+    /**
+     * Main render method for the menu component.
+     *
+     * Flow:
+     * 1. Determines the effective mode (handles inline collapsed state becoming vertical).
+     * 2. Constructs the class map for the host element based on mode and theme.
+     * 3. Renders the Host element with role="menu".
+     * 4. Renders a `<ul>` list container.
+     * 5. Renders the default slot for menu items and submenus.
+     * 6. Listens to `slotchange` to sync props to new children.
+     *
+     * @returns {JSX.Element} The component tree.
+     */
+    render(): any;
+}

package/dist/types/components/x-menu-divider/types.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Menu divider types
+ */
+export interface MenuDividerProps {
+    dashed?: boolean;
+}

package/dist/types/components/x-menu-divider/x-menu-divider.d.ts

@@ -0,0 +1,19 @@
+export declare class XMenuDivider {
+    /**
+     * Whether line is dashed.
+     * @example
+     * <x-menu-divider dashed></x-menu-divider>
+     */
+    dashed: boolean;
+    /** @internal */
+    _menuTheme: 'light' | 'dark';
+    /** @internal */
+    _inlineCollapsed: boolean;
+    /**
+     * Render menu divider with theme/collapse classes.
+     * @returns JSX.Element
+     * @example
+     * <x-menu-divider></x-menu-divider>
+     */
+    render(): any;
+}

package/dist/types/components/x-menu-item/types.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Menu item click event detail (internal)
+ */
+export interface MenuItemClickDetail {
+    key: string;
+    keyPath: string[];
+    domEvent: Event;
+}

package/dist/types/components/x-menu-item/x-menu-item.d.ts

@@ -0,0 +1,80 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import type { MenuItemClickDetail } from './types';
+export declare class XMenuItem {
+    el: HTMLElement;
+    /**
+     * Unique ID of the menu item
+     * @example
+     * <x-menu-item itemKey="home">Home</x-menu-item>
+     */
+    itemKey: string;
+    /**
+     * Display the danger style
+     * @example
+     * <x-menu-item danger>Delete</x-menu-item>
+     */
+    danger: boolean;
+    /**
+     * Whether menu item is disabled
+     * @example
+     * <x-menu-item disabled>Disabled</x-menu-item>
+     */
+    disabled: boolean;
+    /**
+     * Set display title for collapsed item
+     * @example
+     * <x-menu-item itemTitle="Dashboard">Dashboard</x-menu-item>
+     */
+    itemTitle?: string;
+    /** @internal */
+    _menuMode: 'vertical' | 'horizontal' | 'inline';
+    /** @internal */
+    _menuTheme: 'light' | 'dark';
+    /** @internal */
+    _inlineCollapsed: boolean;
+    /** @internal */
+    _level: number;
+    /** @internal */
+    _inlineIndent: number;
+    /** @internal */
+    _selected: boolean;
+    /** @internal */
+    _keyPath: string[];
+    isHovered: boolean;
+    /**
+     * Emitted when the menu item is clicked (internal)
+     * @example
+     * <x-menu-item onXMenuItemClick={(ev) => console.log(ev.detail)}>Item</x-menu-item>
+     */
+    xMenuItemClick: EventEmitter<MenuItemClickDetail>;
+    handleSelectedChange(): void;
+    /**
+     * Handle click event.
+     *
+     * Flow:
+     * 1. Checks if disabled.
+     * 2. Constructs key path including self.
+     * 3. Emits `xMenuItemClick` event with key, keyPath, and original event.
+     *
+     * @param e - Mouse event.
+     */
+    private handleClick;
+    private handleMouseEnter;
+    private handleMouseLeave;
+    private getInlinePadding;
+    /**
+     * Render menu item content.
+     *
+     * Flow:
+     * 1. Calculates inline padding based on level and indent (for inline mode).
+     * 2. Determines collapsed state logic (level 0 vs nested).
+     * 3. Constructs CSS classes for state (selected, disabled, danger, hover, mode, theme).
+     * 4. Renders host element with accessibility attributes.
+     * 5. Renders inner content with icon, default slot, and extra slot.
+     *
+     * @returns JSX.Element
+     * @example
+     * <x-menu-item itemKey="settings">Settings</x-menu-item>
+     */
+    render(): any;
+}

package/dist/types/components/x-menu-item-group/types.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Menu item group types (currently empty, reserved for future use)
+ */
+export interface MenuItemGroupProps {
+    title?: string;
+}

package/dist/types/components/x-menu-item-group/x-menu-item-group.d.ts

@@ -0,0 +1,60 @@
+export declare class XMenuItemGroup {
+    /**
+     * Host element reference used for slot access.
+     */
+    el: HTMLElement;
+    /**
+     * The title of the group.
+     * @example
+     * <x-menu-item-group groupTitle="Group"></x-menu-item-group>
+     */
+    groupTitle?: string;
+    /** @internal */
+    _menuMode: 'vertical' | 'horizontal' | 'inline';
+    /** @internal */
+    _menuTheme: 'light' | 'dark';
+    /** @internal */
+    _inlineCollapsed: boolean;
+    /** @internal */
+    _level: number;
+    /** @internal */
+    _inlineIndent: number;
+    /**
+     * Sync child props after initial render.
+     * @returns void
+     * @example
+     * <x-menu-item-group></x-menu-item-group>
+     */
+    componentDidLoad(): void;
+    /**
+     * Sync child props after updates.
+     * @returns void
+     * @example
+     * <x-menu-item-group></x-menu-item-group>
+     */
+    componentDidUpdate(): void;
+    handlePropsChange(): void;
+    /**
+     * Propagate internal menu props to child items and submenus.
+     * @returns void
+     * @example
+     * <x-menu-item-group></x-menu-item-group>
+     */
+    private syncChildrenProps;
+    /**
+     * Calculate inline padding based on nesting level and indent.
+     * @returns string
+     * @example
+     * <x-menu-item-group></x-menu-item-group>
+     */
+    private getInlinePadding;
+    /**
+     * Render group title and list slots.
+     * @returns JSX.Element
+     * @example
+     * <x-menu-item-group groupTitle="Group">
+     *   <x-menu-item>Item</x-menu-item>
+     * </x-menu-item-group>
+     */
+    render(): any;
+}

package/dist/types/components/x-menu-submenu/types.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Submenu toggle event detail (internal)
+ */
+export interface SubmenuToggleDetail {
+    key: string;
+    open: boolean;
+    keyPath: string[];
+}
+/**
+ * Submenu title click event detail
+ */
+export interface SubmenuTitleClickDetail {
+    key: string;
+    domEvent: Event;
+}