@xlabs-store/core 0.0.1

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

@@ -0,0 +1,171 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import type { AvatarShape, AvatarSize, AvatarErrorEventDetail } from './types';
+export declare class XAvatar {
+    /**
+     * Host element reference for sizing.
+     */
+    el: HTMLElement;
+    /**
+     * The shape of avatar.
+     * @example
+     * <x-avatar shape="square"></x-avatar>
+     */
+    shape: AvatarShape;
+    /**
+     * The size of the avatar.
+     * @example
+     * <x-avatar size="large"></x-avatar>
+     */
+    size: AvatarSize;
+    /**
+     * The address of the image for an image avatar.
+     * @example
+     * <x-avatar src="/avatar.png"></x-avatar>
+     */
+    src: string;
+    /**
+     * A list of sources to use for different screen resolutions.
+     * @example
+     * <x-avatar srcSet="/avatar@2x.png 2x"></x-avatar>
+     */
+    srcSet: string;
+    /**
+     * This attribute defines the alternative text describing the image.
+     * @example
+     * <x-avatar src="/avatar.png" alt="User"></x-avatar>
+     */
+    alt: string;
+    /**
+     * Icon type (for icon avatar, use slot="icon" instead).
+     * @example
+     * <x-avatar icon="user"><x-icon slot="icon" name="user"></x-icon></x-avatar>
+     */
+    icon: string;
+    /**
+     * Letter type unit distance between left and right sides.
+     * @example
+     * <x-avatar gap={6}>AB</x-avatar>
+     */
+    gap: number;
+    /**
+     * Whether the picture is allowed to be dragged.
+     * @example
+     * <x-avatar src="/avatar.png" imgDraggable={false}></x-avatar>
+     */
+    imgDraggable: boolean;
+    /**
+     * CORS settings attributes.
+     * @example
+     * <x-avatar src="/avatar.png" crossOrigin="anonymous"></x-avatar>
+     */
+    crossOrigin: 'anonymous' | 'use-credentials' | '';
+    /**
+     * Track whether image loaded successfully.
+     */
+    isImgExist: boolean;
+    /**
+     * Scale factor for text content to fit avatar width.
+     */
+    scale: number;
+    /**
+     * Whether component is mounted to allow measurements.
+     */
+    mounted: boolean;
+    /**
+     * Text element reference used for measuring width.
+     */
+    private textRef;
+    /**
+     * Handler when img load error.
+     * @example
+     * <x-avatar onXError={(ev) => console.log(ev.detail)}></x-avatar>
+     */
+    xError: EventEmitter<AvatarErrorEventDetail>;
+    /**
+     * Mark mounted and compute initial text scale.
+     * @returns void
+     * @example
+     * <x-avatar>AB</x-avatar>
+     */
+    componentDidLoad(): void;
+    /**
+     * Recompute scale on updates.
+     * @returns void
+     * @example
+     * <x-avatar>AB</x-avatar>
+     */
+    componentDidUpdate(): void;
+    /**
+     * Handle image load error and fall back to text/icon.
+     * @param e - Image error event.
+     * @returns void
+     * @example
+     * <x-avatar src="/bad.png" onXError={(ev) => console.log(ev.detail)}></x-avatar>
+     */
+    private handleImgLoadError;
+    /**
+     * Compute scale for text content based on available width.
+     *
+     * Flow:
+     * 1. Checks if text element (`textRef`) and component are mounted.
+     * 2. Measures `offsetWidth` of the text content.
+     * 3. Measures `clientWidth` of the host element (defaulting to 32px).
+     * 4. Calculates `availableWidth` by subtracting gaps.
+     * 5. If text width exceeds available width:
+     *    - Sets `scale` to `availableWidth / textWidth`.
+     *    - This shrinks the text to fit within the avatar circle/square.
+     * 6. Otherwise, resets `scale` to 1.
+     *
+     * @returns void
+     * @example
+     * <x-avatar>AB</x-avatar>
+     */
+    private setScale;
+    /**
+     * Compute inline size style when size is numeric.
+     * @returns Record of CSS properties.
+     * @example
+     * <x-avatar size={48}></x-avatar>
+     */
+    private getSizeStyle;
+    /**
+     * Get size class when size is a string token.
+     * @returns string
+     * @example
+     * <x-avatar size="small"></x-avatar>
+     */
+    private getSizeClass;
+    /**
+     * Render avatar content based on src/icon/text.
+     *
+     * Flow:
+     * 1. Priority 1: Image.
+     *    - If `src` exists and `isImgExist` is true.
+     *    - Renders `<img>` with handlers for load errors.
+     * 2. Priority 2: Icon.
+     *    - If `icon` prop is present.
+     *    - Renders `slot[name="icon"]`.
+     * 3. Priority 3: Text/String.
+     *    - Applies calculated `scale` transform if needed to fit text.
+     *    - Renders default slot content inside a span.
+     *
+     * @returns JSX.Element
+     * @example
+     * <x-avatar src="/avatar.png"></x-avatar>
+     */
+    private renderContent;
+    /**
+     * Build host class map based on size, shape, and content type.
+     * @returns Record of class flags.
+     * @example
+     * <x-avatar shape="square"></x-avatar>
+     */
+    private getHostClasses;
+    /**
+     * Render avatar host with computed classes and size style.
+     * @returns JSX.Element
+     * @example
+     * <x-avatar size={40}>AB</x-avatar>
+     */
+    render(): any;
+}

package/dist/types/components/x-back-top/x-back-top.d.ts

@@ -0,0 +1,59 @@
+export declare class XBackTop {
+    /**
+     * Scroll distance before the button becomes visible.
+     * @example
+     * <x-back-top visibilityHeight={300}></x-back-top>
+     */
+    visibilityHeight: number;
+    /**
+     * Scroll animation duration (ms).
+     * @example
+     * <x-back-top duration={600}></x-back-top>
+     */
+    duration: number;
+    /**
+     * Visibility state based on scroll position.
+     */
+    visible: boolean;
+    /**
+     * Attach scroll listener and initialize visibility.
+     * @returns void
+     * @example
+     * <x-back-top></x-back-top>
+     */
+    componentDidLoad(): void;
+    /**
+     * Remove scroll listener on disconnect.
+     * @returns void
+     * @example
+     * <x-back-top></x-back-top>
+     */
+    disconnectedCallback(): void;
+    /**
+     * Update visibility based on current scroll position.
+     *
+     * Flow:
+     * 1. Retrieves `scrollTop` from `document.documentElement` or `document.body`.
+     * 2. Compares `scrollTop` against `visibilityHeight` prop.
+     * 3. Sets `visible` state to true if threshold is exceeded.
+     *
+     * @returns void
+     * @example
+     * <x-back-top></x-back-top>
+     */
+    handleScroll(): void;
+    /**
+     * Smoothly scroll the window to the top.
+     * @returns void
+     * @example
+     * <x-back-top></x-back-top>
+     */
+    scrollToTop(): void;
+    /**
+     * Render back-to-top button and slot content.
+     * @returns JSX.Element
+     * @example
+     * <x-back-top><span>Top</span></x-back-top>
+     */
+    render(): any;
+}

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

@@ -0,0 +1,23 @@
+/**
+ * X-Badge Component Types
+ */
+/**
+ * Badge status types
+ */
+export type BadgeStatus = 'success' | 'processing' | 'default' | 'error' | 'warning';
+/**
+ * Badge size types
+ */
+export type BadgeSize = 'default' | 'small';
+/**
+ * Preset color names for badge
+ */
+export type BadgePresetColor = 'pink' | 'red' | 'yellow' | 'orange' | 'cyan' | 'green' | 'blue' | 'purple' | 'geekblue' | 'magenta' | 'volcano' | 'gold' | 'lime';
+/**
+ * Badge offset type [left, top]
+ */
+export type BadgeOffset = [number | string, number | string];
+/**
+ * Ribbon placement
+ */
+export type RibbonPlacement = 'start' | 'end';

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

@@ -0,0 +1,184 @@
+import { BadgeStatus, BadgeSize, BadgePresetColor, BadgeOffset } from './types';
+export declare class XBadge {
+    /**
+     * Host element reference for slot inspection.
+     */
+    el: HTMLElement;
+    /**
+     * Number to show in badge.
+     * @example
+     * <x-badge count={3}></x-badge>
+     */
+    count?: number | string;
+    /**
+     * Whether to display a red dot instead of count.
+     * @example
+     * <x-badge dot></x-badge>
+     */
+    dot: boolean;
+    /**
+     * Max count to show.
+     * @example
+     * <x-badge count={120} overflowCount={99}></x-badge>
+     */
+    overflowCount: number;
+    /**
+     * Whether to show badge when count is 0.
+     * @example
+     * <x-badge count={0} showZero></x-badge>
+     */
+    showZero: boolean;
+    /**
+     * Set Badge as a status dot.
+     * @example
+     * <x-badge status="success" text="Done"></x-badge>
+     */
+    status?: BadgeStatus;
+    /**
+     * If status is set, text sets the display text of the status dot.
+     * @example
+     * <x-badge status="warning" text="Pending"></x-badge>
+     */
+    text?: string;
+    /**
+     * Customize Badge dot color (supports preset colors or custom hex/rgb).
+     * @example
+     * <x-badge color="#ff4d4f" count={1}></x-badge>
+     */
+    color?: string | BadgePresetColor;
+    /**
+     * Set offset of the badge dot [left, top].
+     * @example
+     * <x-badge offset={[10, -2]} count={5}></x-badge>
+     */
+    offset?: BadgeOffset;
+    /**
+     * Size of the badge.
+     * @example
+     * <x-badge size="small" count={2}></x-badge>
+     */
+    size: BadgeSize;
+    /**
+     * Text to show when hovering over the badge.
+     * @example
+     * <x-badge badgeTitle="Notifications" count={9}></x-badge>
+     */
+    badgeTitle?: string;
+    /**
+     * Used to display the classNames of the badge.
+     * @example
+     * <x-badge classNames={{ root: 'my-badge' }} count={1}></x-badge>
+     */
+    classNames?: {
+        root?: string;
+        indicator?: string;
+    };
+    /**
+     * Used to display the styles of the badge.
+     * @example
+     * <x-badge styles={{ indicator: 'background: red;' }} count={1}></x-badge>
+     */
+    styles?: {
+        root?: string;
+        indicator?: string;
+    };
+    /**
+     * Track whether component has child content.
+     */
+    hasChildren: boolean;
+    /**
+     * Initialize child detection before render.
+     * @returns void
+     * @example
+     * <x-badge count={1}><button>Inbox</button></x-badge>
+     */
+    componentWillLoad(): void;
+    countChanged(): void;
+    /**
+     * Detect whether default slot has child nodes.
+     *
+     * Flow:
+     * 1. Queries the default `<slot>`.
+     * 2. If slot exists:
+     *    - Gets `assignedNodes`.
+     *    - Checks if any node is an Element or non-empty Text.
+     * 3. If slot doesn't exist (yet):
+     *    - Checks `el.childNodes` length.
+     * 4. Updates `hasChildren` state, which toggles wrapper mode.
+     *
+     * @returns void
+     * @example
+     * <x-badge count={1}><span>Inbox</span></x-badge>
+     */
+    private checkChildren;
+    /**
+     * Check if color matches preset palette.
+     * @param color - Color to test.
+     * @returns boolean
+     * @example
+     * this.isPresetColor('red')
+     */
+    private isPresetColor;
+    /**
+     * Compute display count text based on dot/overflow rules.
+     *
+     * Flow:
+     * 1. If `dot` is true, returns null (no text).
+     * 2. If `count` is string, returns as-is.
+     * 3. If `count` is number:
+     *    - Checks against `overflowCount`.
+     *    - Returns `${overflowCount}+` if exceeded.
+     *    - Otherwise returns count.
+     *
+     * @returns string | number | null
+     * @example
+     * <x-badge count={120} overflowCount={99}></x-badge>
+     */
+    private getDisplayCount;
+    /**
+     * Compute inline offset styles for indicator.
+     * @returns Record<string, string>
+     * @example
+     * <x-badge offset={[8, -4]} count={1}></x-badge>
+     */
+    private getOffsetStyle;
+    /**
+     * Compute custom color styles for indicator.
+     * @returns Record<string, string>
+     * @example
+     * <x-badge color="#52c41a" count={1}></x-badge>
+     */
+    private getColorStyle;
+    /**
+     * Decide if the badge indicator should be hidden.
+     * @returns boolean
+     * @example
+     * <x-badge count={0} showZero={false}></x-badge>
+     */
+    private isHidden;
+    /**
+     * Render status-style badge with dot and optional text.
+     * @returns JSX.Element
+     * @example
+     * <x-badge status="success" text="Done"></x-badge>
+     */
+    private renderStatusBadge;
+    /**
+     * Render badge in count/dot mode or status mode.
+     *
+     * Flow:
+     * 1. If `status` prop is present, calls `renderStatusBadge` (standalone dot with text).
+     * 2. Otherwise (Count/Dot mode):
+     *    - Calculates `displayCount` and `isHidden` status.
+     *    - Renders host element with classes indicating wrapper mode (`hasChildren`).
+     *    - Projects slot content.
+     *    - If not hidden, renders `<sup>` element for the badge:
+     *      - Applies classes for dot, count, size, color.
+     *      - Applies offset styles.
+     *
+     * @returns JSX.Element
+     * @example
+     * <x-badge count={5}><button>Inbox</button></x-badge>
+     */
+    render(): any;
+}

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

@@ -0,0 +1,43 @@
+export declare class XBreadcrumb {
+    /**
+     * Host element reference for locating item children.
+     */
+    el: HTMLElement;
+    /**
+     * Custom separator.
+     * @example
+     * <x-breadcrumb separator=">">
+     *   <x-breadcrumb-item>Home</x-breadcrumb-item>
+     * </x-breadcrumb>
+     */
+    separator: string;
+    /**
+     * Update child breadcrumb items after initial render.
+     * @returns void
+     * @example
+     * <x-breadcrumb separator=">"></x-breadcrumb>
+     */
+    componentDidLoad(): void;
+    /**
+     * Propagate separator attribute to child breadcrumb items.
+     *
+     * Flow:
+     * 1. Selects all `x-breadcrumb-item` children within the host.
+     * 2. Iterates over each item.
+     * 3. Sets the `separator` attribute to match the parent's configuration.
+     *
+     * @returns void
+     * @example
+     * <x-breadcrumb separator="/"></x-breadcrumb>
+     */
+    private updateChildren;
+    /**
+     * Render breadcrumb list with slot for items.
+     * @returns JSX.Element
+     * @example
+     * <x-breadcrumb>
+     *   <x-breadcrumb-item>Home</x-breadcrumb-item>
+     * </x-breadcrumb>
+     */
+    render(): any;
+}

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

@@ -0,0 +1,43 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+export declare class XBreadcrumbItem {
+    /**
+     * Target of hyperlink.
+     * @example
+     * <x-breadcrumb-item href="/home">Home</x-breadcrumb-item>
+     */
+    href: string;
+    /**
+     * Separator (passed from parent).
+     * @example
+     * <x-breadcrumb-item separator=">">Home</x-breadcrumb-item>
+     */
+    separator: string;
+    /**
+     * Click event.
+     * @example
+     * <x-breadcrumb-item onXClick={(ev) => console.log(ev.detail)}>Home</x-breadcrumb-item>
+     */
+    xClick: EventEmitter<MouseEvent>;
+    /**
+     * Handle click: allow navigation when href exists, otherwise prevent default.
+     *
+     * Flow:
+     * 1. Checks if `href` prop is provided.
+     * 2. If no `href` (text-only item):
+     *    - Calls `e.preventDefault()` to stop any default action.
+     * 3. Emits `xClick` event with the original mouse event.
+     *
+     * @param e - Mouse click event.
+     * @returns void
+     * @example
+     * <x-breadcrumb-item>Home</x-breadcrumb-item>
+     */
+    private handleClick;
+    /**
+     * Render breadcrumb link and separator.
+     * @returns JSX.Element
+     * @example
+     * <x-breadcrumb-item href="/home">Home</x-breadcrumb-item>
+     */
+    render(): any;
+}

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

@@ -0,0 +1,121 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+export type ButtonType = 'primary' | 'dashed' | 'link' | 'text' | 'default';
+export type ButtonShape = 'default' | 'circle' | 'round';
+export type ButtonSize = 'large' | 'middle' | 'small';
+export type ButtonHTMLType = 'submit' | 'button' | 'reset';
+export declare class XButton {
+    el: HTMLElement;
+    /** Internal state to track if the button contains only an icon */
+    isIconOnly: boolean;
+    /**
+     * Lifecycle hook to detect if the button is "icon-only".
+     *
+     * Flow:
+     * 1. Converts child nodes to an array.
+     * 2. Checks for presence of an element with `slot="icon"`.
+     * 3. Checks for presence of any text nodes (non-empty) or other elements.
+     * 4. Sets `isIconOnly` state if icon slot exists AND no other content exists.
+     *    - This state is used to adjust padding/shape in CSS.
+     */
+    componentWillRender(): void;
+    /**
+     * Option to fit button width to its parent width.
+     * @example
+     * <x-button block>Full width</x-button>
+     */
+    block: boolean;
+    /**
+     * Set the danger status of button.
+     * @example
+     * <x-button danger>Delete</x-button>
+     */
+    danger: boolean;
+    /**
+     * Disabled state of button.
+     * @example
+     * <x-button disabled>Disabled</x-button>
+     */
+    disabled: boolean;
+    /**
+     * Make background transparent and invert text color.
+     * @example
+     * <x-button ghost type="primary">Ghost</x-button>
+     */
+    ghost: boolean;
+    /**
+     * Redirect url of link button.
+     * @example
+     * <x-button href="https://example.com" target="_blank">Go</x-button>
+     */
+    href: string;
+    /**
+     * Set the original html type of button.
+     * @example
+     * <x-button htmlType="submit">Submit</x-button>
+     */
+    htmlType: ButtonHTMLType;
+    /**
+     * Set the loading status of button.
+     * @example
+     * <x-button loading>Loading</x-button>
+     */
+    loading: boolean;
+    /**
+     * Can be set to circle, round or omitted.
+     * @example
+     * <x-button shape="circle" aria-label="Add">
+     *   <x-icon name="add"></x-icon>
+     * </x-button>
+     */
+    shape: ButtonShape;
+    /**
+     * Set the size of button.
+     * @example
+     * <x-button size="large">Large</x-button>
+     */
+    size: ButtonSize;
+    /**
+     * Same as target attribute of a, works when href is specified.
+     * @example
+     * <x-button href="https://example.com" target="_blank">Open</x-button>
+     */
+    target: string;
+    /**
+     * Set the type of button.
+     * @example
+     * <x-button type="primary">Primary</x-button>
+     */
+    type: ButtonType;
+    /**
+     * Set the handler to handle click event.
+     * @example
+     * <x-button onXClick={(ev) => console.log(ev.detail)}>Click</x-button>
+     */
+    xClick: EventEmitter<MouseEvent>;
+    /**
+     * Handles click interaction and emits xClick when allowed.
+     *
+     * Flow:
+     * 1. Checks if button is `disabled` or `loading`.
+     * 2. If so:
+     *    - Prevents default action.
+     *    - Stops propagation.
+     *    - Returns immediately.
+     * 3. If enabled:
+     *    - Emits `xClick` event.
+     *
+     * @param ev - Mouse click event from anchor or button element.
+     * @returns void
+     * @example
+     * // Emitted only when not disabled/loading
+     * <x-button onXClick={(ev) => console.log(ev)}></x-button>
+     */
+    private handleClick;
+    /**
+     * Renders anchor for link buttons or native button otherwise.
+     * @returns JSX.Element
+     * @example
+     * <x-button type="primary" size="small">Save</x-button>
+     */
+    render(): any;
+}