@xlabs-store/core 0.0.1

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

@@ -0,0 +1,83 @@
+/**
+ * @file Checkbox Component Types
+ * @description Type definitions for x-checkbox component following Ant Design specification
+ */
+/**
+ * Checkbox placement relative to the label
+ */
+export type CheckboxPlacement = 'start' | 'end' | 'fixed' | 'stacked';
+/**
+ * Checkbox alignment
+ */
+export type CheckboxAlignment = 'start' | 'center' | 'end';
+/**
+ * Checkbox change event detail
+ */
+export interface CheckboxChangeEventDetail {
+    /** The value of the checkbox */
+    value: any;
+    /** Whether the checkbox is checked */
+    checked: boolean;
+    /** Native event */
+    nativeEvent?: Event;
+}
+/**
+ * Custom class names for checkbox parts
+ */
+export interface CheckboxClassNames {
+    /** Root wrapper class */
+    root?: string;
+    /** Checkbox input class */
+    checkbox?: string;
+    /** Checkbox inner box class */
+    inner?: string;
+    /** Label class */
+    label?: string;
+}
+/**
+ * Custom styles for checkbox parts
+ */
+export interface CheckboxStyles {
+    /** Root wrapper styles */
+    root?: {
+        [key: string]: string;
+    };
+    /** Checkbox input styles */
+    checkbox?: {
+        [key: string]: string;
+    };
+    /** Checkbox inner box styles */
+    inner?: {
+        [key: string]: string;
+    };
+    /** Label styles */
+    label?: {
+        [key: string]: string;
+    };
+}
+/**
+ * Checkbox option for checkbox group
+ */
+export interface CheckboxOption {
+    /** 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;
+    };
+}
+/**
+ * Checkbox group change event detail
+ */
+export interface CheckboxGroupChangeEventDetail {
+    /** Array of checked values */
+    value: any[];
+    /** Native event */
+    nativeEvent?: Event;
+}

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

@@ -0,0 +1,156 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import { CheckboxChangeEventDetail, CheckboxClassNames, CheckboxStyles, CheckboxPlacement, CheckboxAlignment } from './types';
+/**
+ * @component x-checkbox
+ * @description Checkbox component following Ant Design specification.
+ *
+ * @slot - The label content
+ *
+ * @example
+ * <x-checkbox value="apple">Apple</x-checkbox>
+ * <x-checkbox value="pear" checked>Pear</x-checkbox>
+ * <x-checkbox value="orange" disabled>Orange</x-checkbox>
+ * <x-checkbox indeterminate>Select All</x-checkbox>
+ */
+export declare class XCheckbox {
+    el: HTMLElement;
+    private inputEl?;
+    /**
+     * Whether the checkbox is automatically focused on mount.
+     * @default false
+     * @example
+     * <x-checkbox autoFocus>Auto focus</x-checkbox>
+     */
+    autoFocus: boolean;
+    /**
+     * Whether the checkbox is checked (controlled mode).
+     * @example
+     * <x-checkbox checked>Checked</x-checkbox>
+     */
+    checked: boolean;
+    /**
+     * Whether the checkbox is checked by default (uncontrolled mode).
+     * @default false
+     * @example
+     * <x-checkbox defaultChecked>Default</x-checkbox>
+     */
+    defaultChecked: boolean;
+    /**
+     * Whether the checkbox is disabled.
+     * @default false
+     * @example
+     * <x-checkbox disabled>Disabled</x-checkbox>
+     */
+    disabled: boolean;
+    /**
+     * The indeterminate state of checkbox.
+     * Used when only some child checkboxes are checked.
+     * @default false
+     * @example
+     * <x-checkbox indeterminate>Select all</x-checkbox>
+     */
+    indeterminate: boolean;
+    /**
+     * The name attribute of the checkbox input.
+     * @example
+     * <x-checkbox name="fruits">Apple</x-checkbox>
+     */
+    name?: string;
+    /**
+     * The value of the checkbox.
+     * @example
+     * <x-checkbox value="apple">Apple</x-checkbox>
+     */
+    value?: any;
+    /**
+     * Custom class names for checkbox parts.
+     * @example
+     * <x-checkbox classNames={{ root: 'my-checkbox' }}>Custom</x-checkbox>
+     */
+    classNames?: CheckboxClassNames;
+    /**
+     * Custom styles for checkbox parts.
+     * @example
+     * <x-checkbox styles={{ root: { marginRight: '8px' } }}>Styled</x-checkbox>
+     */
+    styles?: CheckboxStyles;
+    /**
+     * Unique identifier for the checkbox.
+     * @example
+     * <x-checkbox checkboxId="agree">Agree</x-checkbox>
+     */
+    checkboxId?: string;
+    /**
+     * The placement of the label relative to the checkbox.
+     * @default 'start'
+     */
+    placement: CheckboxPlacement;
+    /**
+     * The alignment of the label relative to the checkbox.
+     * @default 'center'
+     */
+    alignment: CheckboxAlignment;
+    /**
+     * Callback fired when the checkbox state changes.
+     * @example
+     * <x-checkbox onXChange={(ev) => console.log(ev.detail)}>Change</x-checkbox>
+     */
+    xChange: EventEmitter<CheckboxChangeEventDetail>;
+    /**
+     * Callback fired when the checkbox is focused.
+     * @example
+     * <x-checkbox onXFocus={() => {}}>Focus</x-checkbox>
+     */
+    xFocus: EventEmitter<void>;
+    /**
+     * Callback fired when the checkbox loses focus.
+     * @example
+     * <x-checkbox onXBlur={() => {}}>Blur</x-checkbox>
+     */
+    xBlur: EventEmitter<void>;
+    componentWillLoad(): void;
+    componentDidLoad(): void;
+    handleCheckedChange(): void;
+    handleIndeterminateChange(newValue: boolean): void;
+    /**
+     * Focus the checkbox input.
+     * @example
+     * await el.setFocus()
+     */
+    setFocus(): Promise<void>;
+    /**
+     * Remove focus from the checkbox input.
+     * @example
+     * await el.removeFocus()
+     */
+    removeFocus(): Promise<void>;
+    /**
+     * Handle mouse click event on the checkbox host.
+     *
+     * Flow:
+     * 1. Checks if checkbox is disabled.
+     * 2. If enabled:
+     *    - Toggles `checked` state.
+     *    - Emits `xChange` event with new value and native event.
+     *
+     * @param e - Mouse event.
+     */
+    private handleClick;
+    private handleFocus;
+    private handleBlur;
+    /**
+     * Handle keydown event for accessibility (Space/Enter).
+     *
+     * Flow:
+     * 1. Checks if checkbox is disabled.
+     * 2. Checks if key is 'Space' or 'Enter'.
+     * 3. If match:
+     *    - Prevents default scrolling/submission.
+     *    - Toggles `checked` state.
+     *    - Emits `xChange` event.
+     *
+     * @param e - Keyboard event.
+     */
+    private handleKeyDown;
+    render(): any;
+}

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

@@ -0,0 +1,89 @@
+export type ColSpanType = number | string;
+export type FlexType = number | 'none' | 'auto' | string;
+export declare class XCol {
+    /**
+     * Raster number of cells to occupy, 0 corresponds to display: none
+     * @example
+     * <x-col span={12}></x-col>
+     */
+    span: ColSpanType;
+    /**
+     * The number of cells to offset Col from the left
+     * @example
+     * <x-col span={8} offset={4}></x-col>
+     */
+    offset: ColSpanType;
+    /**
+     * Raster order
+     * @example
+     * <x-col order={2}></x-col>
+     */
+    order: ColSpanType;
+    /**
+     * The number of cells that raster is moved to the left
+     * @example
+     * <x-col pull={2}></x-col>
+     */
+    pull: ColSpanType;
+    /**
+     * The number of cells that raster is moved to the right
+     * @example
+     * <x-col push={2}></x-col>
+     */
+    push: ColSpanType;
+    /**
+     * Flex layout style
+     * @example
+     * <x-col flex="1 1 200px"></x-col>
+     */
+    flex: FlexType;
+    /**
+     * screen < 576px
+     * @example
+     * <x-col xs={24}></x-col>
+     */
+    xs: ColSpanType;
+    /**
+     * screen ≥ 576px
+     * @example
+     * <x-col sm={12}></x-col>
+     */
+    sm: ColSpanType;
+    /**
+     * screen ≥ 768px
+     * @example
+     * <x-col md={8}></x-col>
+     */
+    md: ColSpanType;
+    /**
+     * screen ≥ 992px
+     * @example
+     * <x-col lg={6}></x-col>
+     */
+    lg: ColSpanType;
+    /**
+     * screen ≥ 1200px
+     * @example
+     * <x-col xl={6}></x-col>
+     */
+    xl: ColSpanType;
+    /**
+     * screen ≥ 1600px
+     * @example
+     * <x-col xxl={4}></x-col>
+     */
+    xxl: ColSpanType;
+    /**
+     * Renders the Column component.
+     *
+     * Flow:
+     * 1. Destructures all layout props.
+     * 2. Handles `flex` prop to set flex-basis and flex-grow/shrink.
+     * 3. Sets CSS variables for base layout properties (`span`, `offset`, `order`, `pull`, `push`).
+     * 4. Generates a class map for responsive breakpoints (`xs`, `sm`, `md`, `lg`, `xl`, `xxl`) and base layout classes.
+     * 5. These classes correspond to CSS rules that apply styles within specific media queries.
+     *
+     * @returns JSX.Element - The host element with calculated classes and styles.
+     */
+    render(): any;
+}

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

@@ -0,0 +1,55 @@
+/**
+ * X-Collapse Component Types
+ */
+/**
+ * Size variants for collapse
+ */
+export type CollapseSize = 'small' | 'middle' | 'large';
+/**
+ * Collapsible trigger mode
+ * - header: Click header to collapse
+ * - icon: Click icon to collapse
+ * - disabled: Cannot collapse
+ */
+export type CollapseCollapsible = 'header' | 'icon' | 'disabled';
+/**
+ * Expand icon placement
+ */
+export type CollapseExpandIconPosition = 'start' | 'end';
+/**
+ * Active key type
+ */
+export type CollapseActiveKey = string | string[] | number | number[];
+/**
+ * Collapse item interface (for items prop)
+ */
+export interface CollapseItem {
+    /** Unique key identifying the panel */
+    key: string;
+    /** Title of the panel */
+    label: string;
+    /** Children content (ignored in web component, use slot) */
+    children?: string;
+    /** Whether to show arrow icon */
+    showArrow?: boolean;
+    /** Force render content even when collapsed */
+    forceRender?: boolean;
+    /** Collapsible mode for this specific item */
+    collapsible?: CollapseCollapsible;
+    /** Extra element content */
+    extra?: string;
+}
+/**
+ * Collapse change event detail
+ */
+export interface CollapseChangeEventDetail {
+    /** Currently active key(s) */
+    key: CollapseActiveKey;
+}
+/**
+ * Collapse panel click event detail
+ */
+export interface CollapsePanelClickEventDetail {
+    /** Panel key */
+    key: string;
+}

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

@@ -0,0 +1,157 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import type { CollapseSize, CollapseCollapsible, CollapseExpandIconPosition, CollapseActiveKey, CollapseChangeEventDetail } from './types';
+export declare class XCollapse {
+    el: HTMLElement;
+    /**
+     * Key(s) of the active panel(s)
+     * @example
+     * <x-collapse activeKey="panel-1"></x-collapse>
+     */
+    activeKey: CollapseActiveKey;
+    /**
+     * Key(s) of the initial active panel(s)
+     * @example
+     * <x-collapse defaultActiveKey={["panel-1","panel-2"]}></x-collapse>
+     */
+    defaultActiveKey: CollapseActiveKey;
+    /**
+     * If true, only one panel can be expanded at a time (accordion mode)
+     * @example
+     * <x-collapse accordion></x-collapse>
+     */
+    accordion: boolean;
+    /**
+     * Toggles rendering of the border around the collapse block
+     * @example
+     * <x-collapse bordered={false}></x-collapse>
+     */
+    bordered: boolean;
+    /**
+     * Specify whether the panel be collapsible or the trigger area of collapsible
+     * - header: Click header to collapse
+     * - icon: Click icon to collapse
+     * - disabled: Cannot collapse
+     * @example
+     * <x-collapse collapsible="icon"></x-collapse>
+     */
+    collapsible: CollapseCollapsible;
+    /**
+     * Destroy inactive panel content
+     * @example
+     * <x-collapse destroyInactivePanel></x-collapse>
+     */
+    destroyInactivePanel: boolean;
+    /**
+     * Set expand icon placement
+     * @example
+     * <x-collapse expandIconPosition="end"></x-collapse>
+     */
+    expandIconPosition: CollapseExpandIconPosition;
+    /**
+     * Make the collapse borderless and its background transparent
+     * @example
+     * <x-collapse ghost></x-collapse>
+     */
+    ghost: boolean;
+    /**
+     * Set the size of collapse
+     * @example
+     * <x-collapse size="small"></x-collapse>
+     */
+    size: CollapseSize;
+    internalActiveKey: CollapseActiveKey;
+    /**
+     * Callback function executed when active panel is changed
+     * @example
+     * <x-collapse onXChange={(ev) => console.log(ev.detail)}></x-collapse>
+     */
+    xChange: EventEmitter<CollapseChangeEventDetail>;
+    handleActiveKeyChange(newValue: CollapseActiveKey): void;
+    /**
+     * Stencil lifecycle: Component is about to load.
+     * Initializes the internal active key state from props or default values.
+     *
+     * Flow:
+     * 1. Priority 1: Use `activeKey` if provided (controlled mode).
+     * 2. Priority 2: Use `defaultActiveKey` if provided (uncontrolled mode).
+     * 3. Default: Fallback to an empty list.
+     * 4. Normalizes the value into a string array.
+     *
+     * @returns {void}
+     */
+    componentWillLoad(): void;
+    /**
+     * Stencil lifecycle: Component has loaded.
+     * Triggers child panel synchronization.
+     * @returns {void}
+     */
+    componentDidLoad(): void;
+    /**
+     * Stencil lifecycle: Component has finished rendering.
+     * Ensures child panels are updated with the latest collapse state.
+     * @returns {void}
+     */
+    componentDidRender(): void;
+    /**
+     * Handle click event from a child panel.
+     *
+     * Flow:
+     * 1. Stops event propagation.
+     * 2. Retrieves the clicked panel's key.
+     * 3. Determines new active keys based on `accordion` mode:
+     *    - Accordion: Toggles single key (closes if same, opens if different).
+     *    - Standard: Toggles key presence in the active array.
+     * 4. Updates `internalActiveKey` state.
+     * 5. Emits `xChange` event.
+     * 6. Calls `updatePanels` to sync children.
+     *
+     * @param event - Custom event containing panel key.
+     */
+    handlePanelClick(event: CustomEvent<string>): void;
+    /**
+     * Normalizes the active key(s) into a consistent string array format.
+     * Handles various input formats like single string/number or arrays.
+     *
+     * @param {CollapseActiveKey} key - The key or array of keys to normalize.
+     * @returns {string[]} An array of strings representing active keys.
+     */
+    private normalizeActiveKey;
+    /**
+     * Helper method to retrieve the current active keys as a string array.
+     * @returns {string[]} Current active keys.
+     */
+    private getActiveKeysArray;
+    /**
+     * Update child panels with current state.
+     *
+     * Flow:
+     * 1. Queries assigned elements in the default slot.
+     * 2. Filters for `x-collapse-panel` elements.
+     * 3. Iterates through panels:
+     *    - Determines if panel should be active based on its key.
+     *    - Sets `active` prop on the panel.
+     *    - Propagates global settings (`collapsible`, `expandIconPosition`, etc.) to the panel.
+     */
+    private updatePanels;
+    /**
+     * Callback fired when the slotted content changes.
+     * Re-synchronizes panels when they are added or removed dynamically.
+     * @returns {void}
+     */
+    private handleSlotChange;
+    /**
+     * Computes the CSS classes applied to the root host element.
+     * Maps props like `bordered`, `ghost`, `size`, and `expandIconPosition` to CSS classes.
+     * @returns {Object} Class mapping object.
+     */
+    private getHostClasses;
+    /**
+     * Render collapse container and panels.
+     * @returns JSX.Element
+     * @example
+     * <x-collapse>
+     *   <x-collapse-panel panelKey="panel-1" header="Header"></x-collapse-panel>
+     * </x-collapse>
+     */
+    render(): any;
+}

package/dist/types/components/x-collapse-panel/x-collapse-panel.d.ts

@@ -0,0 +1,143 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import type { CollapseSize, CollapseCollapsible, CollapseExpandIconPosition } from '../x-collapse/types';
+export declare class XCollapsePanel {
+    /**
+     * Unique key identifying the panel from among its siblings
+     * @example
+     * <x-collapse-panel panelKey="panel-1"></x-collapse-panel>
+     */
+    panelKey: string;
+    /**
+     * Title of the panel
+     * @example
+     * <x-collapse-panel header="Title"></x-collapse-panel>
+     */
+    header: string;
+    /**
+     * If false, panel will not show arrow icon
+     * @example
+     * <x-collapse-panel showArrow={false}></x-collapse-panel>
+     */
+    showArrow: boolean;
+    /**
+     * Forced render of content on panel
+     * @example
+     * <x-collapse-panel forceRender></x-collapse-panel>
+     */
+    forceRender: boolean;
+    /**
+     * Collapsible mode for this specific item
+     * - header: Click header to collapse
+     * - icon: Click icon to collapse
+     * - disabled: Cannot collapse
+     * @example
+     * <x-collapse-panel collapsible="disabled"></x-collapse-panel>
+     */
+    collapsible: CollapseCollapsible;
+    /**
+     * Whether the panel is currently active (expanded)
+     * Controlled by parent x-collapse
+     * @example
+     * <x-collapse-panel active></x-collapse-panel>
+     */
+    active: boolean;
+    /**
+     * Expand icon position (passed from parent)
+     * @example
+     * <x-collapse-panel expandIconPosition="end"></x-collapse-panel>
+     */
+    expandIconPosition: CollapseExpandIconPosition;
+    /**
+     * Destroy inactive panel content (passed from parent)
+     * @example
+     * <x-collapse-panel destroyInactivePanel></x-collapse-panel>
+     */
+    destroyInactivePanel: boolean;
+    /**
+     * Size variant (passed from parent)
+     * @example
+     * <x-collapse-panel collapseSize="small"></x-collapse-panel>
+     */
+    collapseSize: CollapseSize;
+    contentRendered: boolean;
+    /**
+     * Emitted when panel header is clicked
+     * @example
+     * <x-collapse-panel onXItemClick={(ev) => console.log(ev.detail)}></x-collapse-panel>
+     */
+    xItemClick: EventEmitter<string>;
+    /**
+     * WATCHER: Responds to changes in the `active` state.
+     * Handles conditional rendering of the panel content based on activity and cleanup settings.
+     *
+     * @param {boolean} newValue - The new active state.
+     * @returns {void}
+     */
+    handleActiveChange(newValue: boolean): void;
+    /**
+     * Stencil lifecycle: Component is about to load.
+     * Initializes the rendering state of the panel content.
+     *
+     * @returns {void}
+     */
+    componentWillLoad(): void;
+    /**
+     * Retrieves the effective key for this panel.
+     * Falls back to the `header` text if no explicit `panelKey` is provided.
+     * @returns {string} The identified key.
+     */
+    private getPanelKey;
+    /**
+     * Handle header click.
+     *
+     * Flow:
+     * 1. Checks if `collapsible` is set to 'disabled'.
+     * 2. If allowed, emits `xItemClick` with the panel's key.
+     *    - Parent `x-collapse` listens to this to toggle state.
+     */
+    private handleHeaderClick;
+    /**
+     * Handles the click event on the collapse icon.
+     * Only triggers if `collapsible` mode is set to 'icon'.
+     *
+     * @param {MouseEvent} event - The native click event.
+     * @returns {void}
+     */
+    private handleIconClick;
+    /**
+     * Determines if clicking the header area should trigger a collapse/expand.
+     * Header is NOT clickable if mode is 'icon' (only arrow works) or 'disabled'.
+     * @returns {boolean} True if clickable.
+     */
+    private isHeaderClickable;
+    /**
+     * Renders the expansion arrow icon.
+     * Handles rotation state and visibility based on `showArrow` prop.
+     * @returns {JSX.Element | null} The arrow icon or null.
+     */
+    private renderArrowIcon;
+    /**
+     * Renders the panel header area.
+     * Includes the arrow icon (at start or end), header text, and extra content.
+     * @returns {JSX.Element} The rendered header.
+     */
+    private renderHeader;
+    /**
+     * Renders the panel's content area.
+     * Handles smooth height transitions and lazy rendering logic.
+     * @returns {JSX.Element | null} The content region.
+     */
+    private renderContent;
+    /**
+     * Computes the CSS classes applied to the root host element.
+     * @returns {Object} Class mapping object.
+     */
+    private getHostClasses;
+    /**
+     * Render panel header and content region.
+     * @returns JSX.Element
+     * @example
+     * <x-collapse-panel header="Header">Content</x-collapse-panel>
+     */
+    render(): any;
+}