@xlabs-store/core 0.0.1

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

@@ -0,0 +1,97 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+export declare class XPopconfirm {
+    /**
+     * Host element reference.
+     */
+    el: HTMLElement;
+    /**
+     * Title of the confirmation.
+     * @example
+     * <x-popconfirm confirmTitle="Delete?"></x-popconfirm>
+     */
+    confirmTitle: string;
+    /**
+     * OK button text.
+     * @example
+     * <x-popconfirm okText="OK"></x-popconfirm>
+     */
+    okText: string;
+    /**
+     * Cancel button text.
+     * @example
+     * <x-popconfirm cancelText="Cancel"></x-popconfirm>
+     */
+    cancelText: string;
+    /**
+     * Placement of the popconfirm.
+     * @example
+     * <x-popconfirm placement="bottom"></x-popconfirm>
+     */
+    placement: 'top' | 'topLeft' | 'topRight' | 'bottom' | 'bottomLeft' | 'bottomRight' | 'left' | 'leftTop' | 'leftBottom' | 'right' | 'rightTop' | 'rightBottom';
+    /**
+     * Disable popconfirm trigger.
+     * @example
+     * <x-popconfirm disabled></x-popconfirm>
+     */
+    disabled: boolean;
+    /**
+     * Visible state of popconfirm.
+     */
+    visible: boolean;
+    /**
+     * Emitted when confirm button is clicked.
+     * @example
+     * <x-popconfirm onXConfirm={() => {}}></x-popconfirm>
+     */
+    xConfirm: EventEmitter;
+    /**
+     * Emitted when cancel button is clicked.
+     * @example
+     * <x-popconfirm onXCancel={() => {}}></x-popconfirm>
+     */
+    xCancel: EventEmitter;
+    private portalInstance;
+    private triggerEl;
+    handleWindowClick(ev: Event): void;
+    private isClickInPortal;
+    /**
+     * Toggle popconfirm visibility.
+     * @returns void
+     * @example
+     * <x-popconfirm></x-popconfirm>
+     */
+    toggle(): void;
+    /**
+     * Emit confirm and close.
+     *
+     * Flow:
+     * 1. Emits `xConfirm` event.
+     * 2. Sets `visible` to false.
+     * 3. Updates portal (closes it).
+     *
+     * @returns void
+     * @example
+     * <x-popconfirm onXConfirm={() => {}}></x-popconfirm>
+     */
+    handleConfirm(): void;
+    /**
+     * Emit cancel and close.
+     * @returns void
+     * @example
+     * <x-popconfirm onXCancel={() => {}}></x-popconfirm>
+     */
+    handleCancel(): void;
+    private getTriggerEl;
+    private buildPopconfirmContent;
+    private updatePortal;
+    disconnectedCallback(): void;
+    /**
+     * Render trigger wrapper for popconfirm.
+     * @returns JSX.Element
+     * @example
+     * <x-popconfirm confirmTitle="Confirm?">
+     *   <x-button>Delete</x-button>
+     * </x-popconfirm>
+     */
+    render(): any;
+}

package/dist/types/components/x-popover/popover-content/popover-content.d.ts

@@ -0,0 +1,71 @@
+/**
+ * @component x-popover-content
+ * @description Internal component for popover content rendered via portal.
+ * This component has shadow: false to allow global styling.
+ *
+ * @internal
+ */
+export declare class XPopoverContent {
+    /**
+     * Host element reference.
+     */
+    el: HTMLElement;
+    /**
+     * Title of the popover.
+     * @example
+     * <x-popover-content popoverTitle="Title"></x-popover-content>
+     */
+    popoverTitle?: string;
+    /**
+     * Content text.
+     * @example
+     * <x-popover-content content="Details"></x-popover-content>
+     */
+    content?: string;
+    /**
+     * Placement of the popover.
+     * @example
+     * <x-popover-content placement="right"></x-popover-content>
+     */
+    placement: string;
+    /**
+     * Whether the popover is hidden.
+     * @example
+     * <x-popover-content hidden></x-popover-content>
+     */
+    hidden: boolean;
+    /**
+     * Custom class for the content.
+     * @example
+     * <x-popover-content contentClass="my-popover"></x-popover-content>
+     */
+    contentClass?: string;
+    /**
+     * Mouse enter handler.
+     * @example
+     * <x-popover-content mouseEnterPopover={(ev) => console.log(ev)}></x-popover-content>
+     */
+    mouseEnterPopover?: (ev: MouseEvent) => void;
+    /**
+     * Mouse leave handler.
+     * @example
+     * <x-popover-content mouseLeavePopover={(ev) => console.log(ev)}></x-popover-content>
+     */
+    mouseLeavePopover?: (ev: MouseEvent) => void;
+    /**
+     * Render popover content, arrow, and slots.
+     *
+     * Flow:
+     * 1. Constructs dynamic class map based on placement and hidden state.
+     * 2. Renders Host element with mouse enter/leave listeners (for hover trigger support).
+     * 3. Renders the arrow indicator.
+     * 4. Renders the inner content wrapper:
+     *    - Title (if provided).
+     *    - Content body (text prop + named slot "content").
+     *
+     * @returns {JSX.Element} The rendered content.
+     * @example
+     * <x-popover-content content="Hello"></x-popover-content>
+     */
+    render(): any;
+}

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

@@ -0,0 +1,99 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+export declare class XPopover {
+    el: HTMLElement;
+    /**
+     * Title of the popover
+     * @example
+     * <x-popover popoverTitle="Notification" />
+     */
+    popoverTitle: string;
+    /**
+     * Content of the popover
+     * @example
+     * <x-popover content="You have 3 new messages." />
+     */
+    content: string;
+    /**
+     * The position of the popover relative to the target
+     * @example
+     * <x-popover placement="bottomRight" />
+     */
+    placement: 'top' | 'topLeft' | 'topRight' | 'bottom' | 'bottomLeft' | 'bottomRight' | 'left' | 'leftTop' | 'leftBottom' | 'right' | 'rightTop' | 'rightBottom';
+    /**
+     * Trigger mode
+     * @example
+     * <x-popover trigger="hover" />
+     */
+    trigger: 'hover' | 'focus' | 'click';
+    /**
+     * Whether the popover is visible (controlled)
+     * @example
+     * <x-popover open={true} />
+     */
+    open?: boolean;
+    /**
+     * Callback when open state changes
+     * @example
+     * <x-popover onXOpenChange={(e) => console.log(e.detail)} />
+     */
+    xOpenChange: EventEmitter<boolean>;
+    visible: boolean;
+    private timer;
+    private portalInstance;
+    private triggerEl;
+    watchOpen(newValue: boolean): void;
+    componentWillLoad(): void;
+    handleClick(ev: MouseEvent): void;
+    handleMouseEnter(): void;
+    handleMouseLeave(): void;
+    private isClickInPortal;
+    /**
+     * Toggles the visibility state.
+     *
+     * Flow:
+     * 1. Checks if `open` prop is controlled (not undefined).
+     * 2. If controlled: Emits `xOpenChange` event with the new state.
+     * 3. If uncontrolled:
+     *    - Updates internal `visible` state.
+     *    - Calls `updatePortal` to reflect the change in the UI.
+     *
+     * @param visible - The desired visibility state.
+     */
+    toggle(visible: boolean): void;
+    /**
+     * Shows the popover.
+     * Clears any pending hide timer and calls `toggle(true)`.
+     */
+    show(): void;
+    /**
+     * Hides the popover with a small delay.
+     * The delay prevents flickering when moving mouse quickly between trigger and content.
+     */
+    hide(): void;
+    private getTriggerEl;
+    /**
+     * Build popover content element.
+     *
+     * Flow:
+     * 1. Creates `x-popover-content` element.
+     * 2. Assigns props (title, content, placement).
+     * 3. If trigger is hover, attaches mouse enter/leave handlers to content (to prevent closing when moving mouse to popover).
+     * 4. Clones `slot="content"` nodes and appends to popover content if present.
+     *
+     * @returns HTMLElement
+     */
+    private buildPopoverContent;
+    private updatePortal;
+    disconnectedCallback(): void;
+    /**
+     * Renders the trigger element wrapper.
+     *
+     * Flow:
+     * 1. Renders a Host element with `x-popover-wrapper` class.
+     * 2. Renders a `div` acting as the trigger container.
+     * 3. Projects the default slot content (the trigger element).
+     *
+     * @returns {JSX.Element} The component tree.
+     */
+    render(): any;
+}

package/dist/types/components/x-portal/debug.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Debug utility for positioning
+ * Add this temporarily to check positioning calculations
+ */
+export declare function debugPositioning(reference: HTMLElement, floating: HTMLElement, placement?: string): void;

package/dist/types/components/x-portal/index.d.ts

@@ -0,0 +1,2 @@
+export { PortalController } from './portal-controller';
+export type { PortalConfig, PortalInstance, PortalPlacement } from './types';

package/dist/types/components/x-portal/portal-controller.d.ts

@@ -0,0 +1,20 @@
+import type { PortalConfig, PortalInstance } from './types';
+/**
+ * PortalController: Manages portal rendering to document.body
+ * Replaces <x-portal> component with imperative API
+ */
+export declare class PortalController implements PortalInstance {
+    private config;
+    private portalEl;
+    private portalContentEl;
+    private positioningInstance;
+    private constructor();
+    static create(config: PortalConfig): PortalInstance;
+    update(config: Partial<PortalConfig>): void;
+    destroy(): void;
+    getElement(): HTMLDivElement | null;
+    private render;
+    private initializePositioning;
+    private updatePosition;
+    private updateContent;
+}

package/dist/types/components/x-portal/positioning.d.ts

@@ -0,0 +1,102 @@
+/**
+ * Positioning utility inspired by Popper.js
+ * Handles positioning, collision detection, and auto-updates
+ */
+/**
+ * Các vị trí hiển thị khả thi của phần tử nổi (floating element) so với phần tử tham chiếu (reference element).
+ */
+export type Placement = 'top' | 'topLeft' | 'topRight' | 'bottom' | 'bottomLeft' | 'bottomRight' | 'left' | 'leftTop' | 'leftBottom' | 'right' | 'rightTop' | 'rightBottom';
+/**
+ * Chiến lược định vị: 'absolute' hoặc 'fixed'.
+ */
+export type Strategy = 'absolute' | 'fixed';
+/**
+ * Cấu hình khoảng cách dịch chuyển (offset) của phần tử nổi.
+ */
+export interface Offset {
+    /** Khoảng cách theo trục chính (trục vuông góc với cạnh tiếp xúc) */
+    mainAxis?: number;
+    /** Khoảng cách theo trục phụ (trục song song với cạnh tiếp xúc) */
+    crossAxis?: number;
+}
+/**
+ * Định nghĩa ranh giới vùng hiển thị.
+ */
+export interface Boundary {
+    top: number;
+    right: number;
+    bottom: number;
+    left: number;
+}
+/**
+ * Kết quả tính toán vị trí cuối cùng để áp dụng vào style.
+ */
+export interface ComputedPosition {
+    /** Tọa độ X */
+    x: number;
+    /** Tọa độ Y */
+    y: number;
+    /** Vị trí hiển thị thực tế (có thể đã thay đổi do flip) */
+    placement: Placement;
+    /** Chiến lược định vị đang sử dụng */
+    strategy: Strategy;
+}
+/**
+ * Các tùy chọn cấu hình cho PositioningEngine.
+ */
+export interface PositioningOptions {
+    /** Vị trí mong muốn hiển thị */
+    placement?: Placement;
+    /** Chiến lược định vị: 'absolute' hoặc 'fixed' */
+    strategy?: Strategy;
+    /** Cấu hình khoảng cách */
+    offset?: Offset;
+    /** Tự động lật vị trí nếu không đủ không gian (ví dụ: đang ở dưới nhưng bị khuất thì lật lên trên) */
+    flip?: boolean;
+    /** Tự động dịch chuyển để giữ phần tử trong vùng hiển thị (không cho trôi ra ngoài viewport) */
+    shift?: boolean;
+    /** Giới hạn vùng hiển thị (mặc định là toàn bộ viewport) */
+    boundary?: Partial<Boundary>;
+    /** Tự động cập nhật vị trí khi scroll hoặc resize window */
+    autoUpdate?: boolean;
+    /** Callback được gọi khi vị trí hiển thị (placement) thay đổi */
+    onPlacementChange?: (placement: Placement) => void;
+}
+/**
+ * Interface công khai của một instance định vị.
+ */
+export interface PositioningInstance {
+    /** Buộc cập nhật lại vị trí ngay lập tức */
+    update(): void;
+    /** Cập nhật các tùy chọn cấu hình */
+    setOptions(options: Partial<PositioningOptions>): void;
+    /** Hủy bỏ instance và dọn dẹp các event listener */
+    destroy(): void;
+}
+export declare class PositioningEngine {
+    private reference;
+    private floating;
+    private options;
+    private cleanupFns;
+    private scrollParents;
+    constructor(reference: HTMLElement, floating: HTMLElement, options?: PositioningOptions);
+    private resolveOptions;
+    setOptions(options: Partial<PositioningOptions>): void;
+    private getScrollParents;
+    update(): void;
+    private isReferenceVisible;
+    private hideFloating;
+    private showFloating;
+    private computePosition;
+    private getCoordinates;
+    private getOffsetForPlacement;
+    private getCollisionOverflow;
+    private calculateSeverity;
+    private getFlippedPlacement;
+    private shiftWithinBoundary;
+    private applyPosition;
+    private setupAutoUpdate;
+    private destroyEventListeners;
+    destroy(): void;
+}
+export declare function createPositioning(reference: HTMLElement, floating: HTMLElement, options?: PositioningOptions): PositioningInstance;

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

@@ -0,0 +1,43 @@
+/**
+ * Portal placement options
+ */
+export type PortalPlacement = 'top' | 'topLeft' | 'topRight' | 'bottom' | 'bottomLeft' | 'bottomRight' | 'left' | 'leftTop' | 'leftBottom' | 'right' | 'rightTop' | 'rightBottom';
+/**
+ * Portal configuration
+ */
+export interface PortalConfig {
+    /** Whether portal is open */
+    open: boolean;
+    /** Target element to align to */
+    target?: HTMLElement;
+    /** Placement relative to target */
+    placement?: PortalPlacement;
+    /** Custom z-index */
+    zIndex?: number;
+    /** Custom width */
+    width?: string;
+    /** Offset distance from target. Can be a number (mainAxis) or an object with mainAxis and crossAxis. */
+    offset?: number | {
+        mainAxis?: number;
+        crossAxis?: number;
+    };
+    /** Whether to flip when overflowing. Default: true */
+    flip?: boolean;
+    /** Whether to shift when overflowing. Default: true */
+    shift?: boolean;
+    /** Portal content (HTMLElement or HTMLElement[]) */
+    content?: HTMLElement | HTMLElement[];
+    /** Callback when placement changes (e.g. on flip) */
+    onPlacementChange?: (placement: PortalPlacement) => void;
+}
+/**
+ * Portal instance methods
+ */
+export interface PortalInstance {
+    /** Update portal configuration */
+    update(config: Partial<PortalConfig>): void;
+    /** Destroy portal and remove from DOM */
+    destroy(): void;
+    /** Get portal wrapper element */
+    getElement(): HTMLDivElement | null;
+}

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

@@ -0,0 +1,19 @@
+/**
+ * @deprecated x-portal component is now replaced by PortalController
+ * Use PortalController.create() instead of <x-portal> component
+ *
+ * Migration example:
+ * // Before:
+ * <x-portal open={open} target={triggerEl} placement="bottomLeft">
+ *   ...content...
+ * </x-portal>
+ *
+ * // After:
+ * import { PortalController } from '../x-portal';
+ * const portal = PortalController.create({
+ *   open: true,
+ *   target: triggerEl,
+ *   placement: 'bottomLeft',
+ *   content: overlayElement
+ * });
+ */

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

@@ -0,0 +1,85 @@
+export declare class XProgress {
+    /**
+     * Percent value from 0 to 100.
+     * @example
+     * <x-progress percent={60}></x-progress>
+     */
+    percent: number;
+    /**
+     * Visual type of progress.
+     * @example
+     * <x-progress type="circle" percent={40}></x-progress>
+     */
+    type: 'line' | 'circle' | 'dashboard';
+    /**
+     * Status style of progress.
+     * @example
+     * <x-progress status="success" percent={100}></x-progress>
+     */
+    status: 'success' | 'exception' | 'normal' | 'active';
+    /**
+     * Whether to display text info.
+     * @example
+     * <x-progress showInfo={false} percent={20}></x-progress>
+     */
+    showInfo: boolean;
+    /**
+     * Custom stroke color for progress bar/arc.
+     * @example
+     * <x-progress strokeColor="#1890ff" percent={30}></x-progress>
+     */
+    strokeColor: string;
+    /**
+     * Custom trail color for background track.
+     * @example
+     * <x-progress trailColor="#f0f0f0" percent={30}></x-progress>
+     */
+    trailColor: string;
+    /**
+     * Width/height of circle progress.
+     * @example
+     * <x-progress type="circle" width={160} percent={45}></x-progress>
+     */
+    width: number;
+    /**
+     * Stroke width for line or circle.
+     * @example
+     * <x-progress strokeWidth={8} percent={50}></x-progress>
+     */
+    strokeWidth: number;
+    /**
+     * Render line progress bar.
+     *
+     * Flow:
+     * 1. Calculates `percentStyle` (width, height, color).
+     * 2. Calculates `trailStyle` (height, background color).
+     * 3. Renders outer container, inner trail, and background fill.
+     *
+     * @returns JSX.Element
+     * @example
+     * <x-progress type="line" percent={70}></x-progress>
+     */
+    renderLine(): any;
+    /**
+     * Render circle/dashboard progress.
+     *
+     * Flow:
+     * 1. Calculates radius based on width and stroke width.
+     * 2. Calculates circumference and stroke-dashoffset for percentage.
+     * 3. Prepares styles for trail path and stroke path (color, transition).
+     * 4. Renders SVG with two paths (trail and progress).
+     * 5. Renders central text info.
+     *
+     * @returns JSX.Element
+     * @example
+     * <x-progress type="circle" percent={75}></x-progress>
+     */
+    renderCircle(): any;
+    /**
+     * Render progress container and info text.
+     * @returns JSX.Element
+     * @example
+     * <x-progress percent={55}></x-progress>
+     */
+    render(): any;
+}

package/dist/types/components/x-qr-code/x-qr-code.d.ts

@@ -0,0 +1,26 @@
+import { EC } from '../../utils/qr-code/engine/qr.version';
+export declare class XQRCode {
+    el: HTMLElement;
+    /** The value to encode in the QR code */
+    value: string;
+    /** Size of the QR code in pixels */
+    size: number;
+    /** Error correction level */
+    ec: EC;
+    /** Rendering type: 'svg' or 'canvas' */
+    type: 'svg' | 'canvas';
+    /** Show gradient effect (SVG only) */
+    gradient: boolean;
+    /** Optional logo URL to display in the center */
+    logo?: string;
+    color: string;
+    /** Background color */
+    bgColor: string;
+    svgContent: string;
+    private matrix;
+    private canvas?;
+    componentDidLoad(): void;
+    generate(): Promise<void>;
+    renderQR(): void;
+    render(): any;
+}

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

@@ -0,0 +1,94 @@
+/**
+ * @file Radio Component Types
+ * @description Type definitions for x-radio component following Ant Design specification
+ */
+/**
+ * Radio change event detail
+ */
+export interface RadioChangeEventDetail {
+    /** The value of the radio */
+    value: any;
+    /** Whether the radio is checked */
+    checked: boolean;
+    /** Native event */
+    nativeEvent?: Event;
+}
+/**
+ * Custom class names for radio parts
+ */
+export interface RadioClassNames {
+    /** Root wrapper class */
+    root?: string;
+    /** Radio input class */
+    radio?: string;
+    /** Radio inner circle class */
+    inner?: string;
+    /** Label class */
+    label?: string;
+}
+/**
+ * Custom styles for radio parts
+ */
+export interface RadioStyles {
+    /** Root wrapper styles */
+    root?: {
+        [key: string]: string;
+    };
+    /** Radio input styles */
+    radio?: {
+        [key: string]: string;
+    };
+    /** Radio inner circle styles */
+    inner?: {
+        [key: string]: string;
+    };
+    /** Label styles */
+    label?: {
+        [key: string]: string;
+    };
+}
+/**
+ * Radio size options (for button style)
+ */
+export type RadioSize = 'large' | 'middle' | 'small';
+/**
+ * Radio button style (for radio group)
+ */
+export type RadioButtonStyle = 'outline' | 'solid';
+/**
+ * Radio option type (for radio group)
+ */
+export type RadioOptionType = 'default' | 'button';
+/**
+ * Radio position
+ */
+export type RadioPlacement = 'start' | 'end' | 'fixed' | 'stacked';
+/**
+ * Radio alignment
+ */
+export type RadioAlignment = 'start' | 'center' | 'end';
+/**
+ * Radio group orientation
+ */
+export type RadioOrientation = 'horizontal' | 'vertical';
+/**
+ * Radio option for radio group
+ */
+export interface RadioOption {
+    /** Option label */
+    label: string;
+    /** Option value */
+    value: any;
+    /** Whether option is disabled */
+    disabled?: boolean;
+    /** Custom class name */
+    className?: string;
+    /** Custom styles */
+    style?: {
+        [key: string]: string;
+    };
+    /** Radio position */
+    placement?: RadioPlacement;
+    /** Radio alignment */
+    alignment?: RadioAlignment;
+}