@xlabs-store/core 0.0.1

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

@@ -0,0 +1,120 @@
+import type { ResultStatus, ResultClassNames, ResultStyles } from './types';
+export declare class XResult {
+    /**
+     * Host element reference for slot detection.
+     */
+    el: HTMLElement;
+    /**
+     * Result status, decides icons and colors.
+     * @example
+     * <x-result status="success"></x-result>
+     */
+    status: ResultStatus;
+    /**
+     * The title of the result.
+     * @example
+     * <x-result resultTitle="Success"></x-result>
+     */
+    resultTitle?: string;
+    /**
+     * The subTitle of the result.
+     * @example
+     * <x-result subTitle="All done"></x-result>
+     */
+    subTitle?: string;
+    /**
+     * Customize class for each semantic structure.
+     * @example
+     * <x-result classNames={{ title: 'my-title' }}></x-result>
+     */
+    classNames?: ResultClassNames;
+    /**
+     * Customize inline style for each semantic structure.
+     * @example
+     * <x-result styles={{ title: 'color: red;' }}></x-result>
+     */
+    styles?: ResultStyles;
+    /**
+     * Customize the icon size.
+     * @example
+     * <x-result iconSize={100}></x-result>
+     */
+    iconSize: number;
+    /**
+     * Renders the success icon (check-circle).
+     * @returns JSX.Element - The SVG element for success status.
+     */
+    private renderSuccessIcon;
+    /**
+     * Renders the error icon (close-circle).
+     * @returns JSX.Element - The SVG element for error status.
+     */
+    private renderErrorIcon;
+    /**
+     * Renders the info icon (exclamation-circle).
+     * @returns JSX.Element - The SVG element for info status.
+     */
+    private renderInfoIcon;
+    /**
+     * Renders the warning icon (warning triangle).
+     * @returns JSX.Element - The SVG element for warning status.
+     */
+    private renderWarningIcon;
+    /**
+     * Renders the 403 status illustration.
+     * @returns JSX.Element - The SVG illustration for 403 Forbidden.
+     */
+    private render403Icon;
+    /**
+     * Renders the 404 status illustration.
+     * @returns JSX.Element - The SVG illustration for 404 Not Found.
+     */
+    private render404Icon;
+    /**
+     * Renders the 500 status illustration.
+     * @returns JSX.Element - The SVG illustration for 500 Server Error.
+     */
+    private render500Icon;
+    /**
+     * Selects and renders the appropriate icon based on the `status` prop.
+     *
+     * Flow:
+     * 1. Constructs class and style maps for the icon container.
+     * 2. Switches on `this.status` to determine which SVG/Illustration to render.
+     *    - Supports 'success', 'error', 'warning', 'info', '403', '404', '500'.
+     * 3. Wraps the icon in a div with proper classes.
+     *
+     * @returns JSX.Element - The rendered icon container.
+     */
+    private renderIcon;
+    /**
+     * Checks if a specific slot has content assigned to it.
+     *
+     * @param slotName - The name of the slot to check.
+     * @returns boolean - True if an element with slot="slotName" exists in children.
+     */
+    private hasSlotContent;
+    /**
+     * Generates the class map for the host element.
+     * Includes base class, status modifier, and custom root class.
+     *
+     * @returns Record<string, boolean> - The class map object.
+     */
+    private getHostClasses;
+    /**
+     * Main render method for the Result component.
+     *
+     * Flow:
+     * 1. Checks for presence of title, subtitle, extra content, and main content via props or slots.
+     * 2. Renders the host element with appropriate classes and styles.
+     * 3. Renders sections in order:
+     *    - Icon/Image
+     *    - Title
+     *    - Subtitle
+     *    - Extra (Action buttons)
+     *    - Content (Main body)
+     *
+     * @returns JSX.Element
+     */
+    render(): any;
+}

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

@@ -0,0 +1,44 @@
+export type RowAlign = 'top' | 'middle' | 'bottom' | 'stretch';
+export type RowJustify = 'start' | 'end' | 'center' | 'space-around' | 'space-between' | 'space-evenly';
+export declare class XRow {
+    /**
+     * Vertical alignment.
+     * @example
+     * <x-row align="middle"></x-row>
+     */
+    align: RowAlign;
+    /**
+     * Spacing between grids, could be a number or a object like { xs: 8, sm: 16, md: 24}
+     * For simplicity in this version, we accept number or [number, number]
+     * @example
+     * <x-row gutter={[16, 8]}></x-row>
+     */
+    gutter: number | [number, number];
+    /**
+     * Horizontal arrangement.
+     * @example
+     * <x-row justify="space-between"></x-row>
+     */
+    justify: RowJustify;
+    /**
+     * Auto wrap line.
+     * @example
+     * <x-row wrap={false}></x-row>
+     */
+    wrap: boolean;
+    /**
+     * Renders the Row component.
+     *
+     * Flow:
+     * 1. Destructures props: `align`, `justify`, `wrap`, `gutter`.
+     * 2. Maps `align` values to flexbox equivalents (e.g., 'middle' -> 'center').
+     * 3. Sets CSS variables for alignment and wrapping.
+     * 4. Processes `gutter`:
+     *    - If a number, applies equal spacing horizontally and vertically.
+     *    - If an array, applies distinct horizontal and vertical spacing.
+     * 5. Calculates and sets CSS variables for gutters and negative margins to offset column padding.
+     *
+     * @returns JSX.Element - The host element with computed styles.
+     */
+    render(): any;
+}

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

@@ -0,0 +1,10 @@
+export type SegmentedValue = string | number;
+export interface SegmentedOption {
+    label?: string | number;
+    value: SegmentedValue;
+    icon?: string;
+    disabled?: boolean;
+    className?: string;
+    title?: string;
+}
+export type SegmentedSize = 'small' | 'middle' | 'large';

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

@@ -0,0 +1,128 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import { SegmentedValue, SegmentedOption, SegmentedSize } from './types';
+export declare class XSegmented {
+    el: HTMLElement;
+    /**
+     * Options to show
+     * @example
+     * <x-segmented options={['Daily', 'Weekly', 'Monthly']} />
+     * <x-segmented options={[{ label: 'Daily', value: 'Daily', icon: 'bars' }]} />
+     */
+    options: (string | number | SegmentedOption)[];
+    /**
+     * Currently selected value
+     * @example
+     * <x-segmented value="Weekly" />
+     */
+    value: SegmentedValue;
+    /**
+     * Default selected value
+     * @example
+     * <x-segmented defaultValue="Daily" />
+     */
+    defaultValue: SegmentedValue;
+    /**
+     * Size of segmented
+     * @example
+     * <x-segmented size="large" />
+     */
+    size: SegmentedSize;
+    /**
+     * Whether to fit to container width
+     * @example
+     * <x-segmented block />
+     */
+    block: boolean;
+    /**
+     * Whether the whole component is disabled
+     * @example
+     * <x-segmented disabled />
+     */
+    disabled: boolean;
+    /**
+     * Event emitted when selection changes
+     * @example
+     * <x-segmented onXChange={(e) => console.log(e.detail)} />
+     */
+    xChange: EventEmitter<SegmentedValue>;
+    innerValue: SegmentedValue;
+    thumbStyle: {
+        transform: string;
+        width: string;
+    };
+    /**
+     * Watches for changes in the 'value' prop.
+     * Updates the internal state and the thumb position.
+     *
+     * @param newValue - The new selected value.
+     */
+    handleValueChange(newValue: SegmentedValue): void;
+    /**
+     * Watches for changes in the 'options' prop.
+     * Triggers a thumb position update to align with new options.
+     */
+    handleOptionsChange(): void;
+    /**
+     * Component lifecycle method called before loading.
+     * Initializes the internal value state based on priority:
+     *
+     * Flow:
+     * 1. Checks if `value` prop is provided (controlled mode).
+     * 2. If not, checks if `defaultValue` prop is provided (uncontrolled mode).
+     * 3. If neither, defaults to the first option in the list.
+     * 4. Sets `innerValue` state accordingly.
+     */
+    componentWillLoad(): void;
+    /**
+     * Component lifecycle method called after loading.
+     * Initial calculation of the thumb position.
+     * Uses a timeout to ensure the DOM layout is fully settled.
+     */
+    componentDidLoad(): void;
+    /**
+     * Updates the position and width of the selection thumb (the sliding background).
+     *
+     * Flow:
+     * 1. Finds all item elements in the shadow DOM.
+     * 2. Identifies the index of the currently selected option.
+     * 3. If found, calculates the `offsetLeft` and `offsetWidth` of the selected item.
+     * 4. Updates `thumbStyle` state to animate the thumb to the new position.
+     */
+    private updateThumb;
+    /**
+     * Normalizes the options array into a standard object format.
+     * Handles both primitive values (string/number) and object options.
+     *
+     * @returns SegmentedOption[] - Array of standardized option objects.
+     */
+    private normalizeOptions;
+    /**
+     * Handles click events on segmented items.
+     *
+     * Flow:
+     * 1. Checks if component or item is disabled, or if value hasn't changed.
+     * 2. Updates internal state and prop value.
+     * 3. Emits `xChange` event.
+     * 4. Triggers thumb position update.
+     *
+     * @param value - The value of the clicked item.
+     * @param disabled - Whether the clicked item is disabled.
+     */
+    private handleItemClick;
+    /**
+     * Renders the Segmented component.
+     *
+     * Flow:
+     * 1. Normalizes the options array.
+     * 2. Renders the Host element with block/disabled classes.
+     * 3. Renders the main wrapper and group container.
+     * 4. Renders the "thumb" (active background) using `thumbStyle`.
+     * 5. Maps over normalized options to render item elements:
+     *    - Applies selected/disabled classes.
+     *    - Attaches click handler.
+     *    - Renders icon (if present) and label.
+     *
+     * @returns {JSX.Element} The component tree.
+     */
+    render(): any;
+}

package/dist/types/components/x-select/select-dropdown-content/index.d.ts

@@ -0,0 +1,2 @@
+export { XSelectDropdownContent } from './select-dropdown-content';
+export type { SelectDropdownClassMap, SelectDropdownStyleMap, SelectDropdownRefCallback, } from './types';

package/dist/types/components/x-select/select-dropdown-content/select-dropdown-content.d.ts

@@ -0,0 +1,52 @@
+import type { SelectDropdownClassMap, SelectDropdownStyleMap, SelectDropdownRefCallback } from './types';
+export declare class XSelectDropdownContent {
+    /**
+     * Host element reference.
+     */
+    el: HTMLElement;
+    /**
+     * Class map for dropdown wrapper.
+     * @example
+     * <x-select-dropdown-content dropdownClasses={{ 'x-select-dropdown': true }}></x-select-dropdown-content>
+     */
+    dropdownClasses: SelectDropdownClassMap;
+    /**
+     * Inline style map for dropdown wrapper.
+     * @example
+     * <x-select-dropdown-content dropdownStyle={{ width: '240px' }}></x-select-dropdown-content>
+     */
+    dropdownStyle: SelectDropdownStyleMap;
+    /**
+     * Callback to pass dropdown element ref.
+     * @example
+     * <x-select-dropdown-content setDropdownRef={(el) => console.log(el)}></x-select-dropdown-content>
+     */
+    setDropdownRef?: SelectDropdownRefCallback;
+    /**
+     * Dropdown element reference.
+     */
+    private dropdownEl;
+    /**
+     * Provide dropdown ref after initial render.
+     * @returns void
+     */
+    componentDidLoad(): void;
+    /**
+     * Cleanup dropdown ref on disconnect.
+     * @returns void
+     */
+    disconnectedCallback(): void;
+    /**
+     * Capture dropdown ref and forward to callback.
+     * @param el - Dropdown element.
+     * @returns void
+     */
+    private setRef;
+    /**
+     * Render dropdown wrapper and slots.
+     * @returns JSX.Element
+     * @example
+     * <x-select-dropdown-content dropdownStyle={{ width: '240px' }}></x-select-dropdown-content>
+     */
+    render(): any;
+}

package/dist/types/components/x-select/select-dropdown-content/types.d.ts

@@ -0,0 +1,14 @@
+/**
+ * @file Select dropdown content types
+ * @description Shared prop/type definitions for x-select-dropdown-content component
+ */
+/** Class map for dropdown wrapper */
+export type SelectDropdownClassMap = {
+    [key: string]: boolean;
+};
+/** Inline style map for dropdown wrapper */
+export type SelectDropdownStyleMap = {
+    [key: string]: string;
+};
+/** Callback to expose dropdown element reference */
+export type SelectDropdownRefCallback = (el: HTMLDivElement | null) => void;

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

@@ -0,0 +1,41 @@
+/**
+ * X-Select Types
+ *
+ * Export all types and interfaces for x-select component
+ */
+export interface SelectOption {
+    value: string | number;
+    label: string;
+    disabled?: boolean;
+    title?: string;
+}
+export interface LabeledValue {
+    value: string | number;
+    label: string;
+    key?: string;
+}
+export interface OptionGroup {
+    label: string;
+    options: SelectOption[];
+}
+/** Union type for options - can be SelectOption or OptionGroup */
+export type SelectOptionType = SelectOption | OptionGroup;
+/** Type guard to check if an option is an OptionGroup */
+export declare function isOptionGroup(option: SelectOptionType): option is OptionGroup;
+export type SelectValue = string | number | (string | number)[] | LabeledValue | LabeledValue[];
+export type SelectMode = 'multiple' | 'tags';
+export type SelectSize = 'large' | 'middle' | 'small';
+export type SelectStatus = 'error' | 'warning';
+export type SelectPlacement = 'bottomLeft' | 'bottomRight' | 'topLeft' | 'topRight';
+export type SelectShowAction = 'focus' | 'click';
+export interface SelectChangeEventDetail {
+    value: SelectValue;
+    option: SelectOption | SelectOption[];
+}
+export interface XSelectOptionElement extends HTMLElement {
+    value: string | number;
+    label: string;
+    selected: boolean;
+    disabled: boolean;
+    hidden: boolean;
+}