@xlabs-store/core 0.0.1 → 0.0.2

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

@@ -0,0 +1,113 @@
+/**
+ * X-Login Component Types
+ *
+ * Type definitions for the x-login component variants, configuration, and events.
+ */
+/**
+ * Available login page layout variants.
+ * - `simple`: A centered login card with email + password
+ * - `split-image`: Two-column layout with cover image on the right
+ * - `muted-bg`: Centered card on a muted background with brand logo
+ * - `card-image`: Wide card with image on the left, form on the right
+ * - `email-only`: Minimal layout with email input only
+ */
+export type LoginVariant = 'simple' | 'split-image' | 'muted-bg' | 'card-image' | 'email-only';
+/**
+ * Social login layout modes:
+ * - `bottom`: Social buttons displayed below the form (default)
+ * - `side`: Social buttons in a column to the right of the form (good for labeled buttons)
+ * - `icon-grid`: Compact icon-only buttons in a grid below the form (good for icon-only providers)
+ */
+export type LoginSocialLayout = 'bottom' | 'side' | 'icon-grid';
+/**
+ * Social login provider configuration.
+ */
+export interface LoginSocialProvider {
+    /** Provider identifier, e.g. "google", "github", "apple" */
+    name: string;
+    /** Display label, e.g. "Login with Google". Falls back to capitalized name. */
+    label?: string;
+    /** Optional icon name for x-icon component */
+    icon?: string;
+}
+/**
+ * Position of the "Forgot password?" link.
+ */
+export type LoginForgotPasswordPosition = 'top-right' | 'bottom-right';
+/**
+ * Configuration object for customizing the login component.
+ */
+export interface LoginConfig {
+    /** Brand / company name displayed in the header. @default 'Acme Inc.' */
+    brandName?: string;
+    /** URL to a brand logo image */
+    brandLogo?: string;
+    /** URL to a cover image (used by split-image and card-image variants) */
+    coverImage?: string;
+    /** Main heading text. @default 'Login to your account' */
+    title?: string;
+    /** Subtitle / description text. @default 'Enter your email below to login to your account' */
+    description?: string;
+    /** Show "Remember me" checkbox. @default false */
+    showRememberMe?: boolean;
+    /** Show "Forgot password?" link. @default true */
+    showForgotPassword?: boolean;
+    /** Position of the "Forgot password?" link. @default 'top-right' */
+    forgotPasswordPosition?: LoginForgotPasswordPosition;
+    /** Show "Don't have an account? Sign up" link. @default true */
+    showSignUpLink?: boolean;
+    /** Text to display in the divider separating form and social buttons. Pass an empty string to hide the text. @default 'Or continue with' */
+    socialDividerText?: string;
+    /** Show social login buttons. @default false */
+    showSocialLogin?: boolean;
+    /** Social provider configs. @default [{ name: 'google' }, { name: 'github' }] */
+    socialProviders?: LoginSocialProvider[];
+    /** Social login layout mode. @default 'bottom' */
+    socialLayout?: LoginSocialLayout;
+    /** Header text for the social side panel (used when socialLayout='side'). @default 'Sign in with Your Social Account' */
+    socialSideTitle?: string;
+    /** Show terms & privacy links at the bottom. @default false */
+    showTerms?: boolean;
+    /** URL for Terms of Service link */
+    termsUrl?: string;
+    /** URL for Privacy Policy link */
+    privacyUrl?: string;
+    /** URL for Sign Up link (if using <a> instead of event) */
+    signUpUrl?: string;
+    /** URL for Forgot Password link (if using <a> instead of event) */
+    forgotPasswordUrl?: string;
+    /** Placeholder for email input. @default 'name@example.com' */
+    emailPlaceholder?: string;
+    /** Placeholder for password input. @default 'Enter your password' */
+    passwordPlaceholder?: string;
+    /** Label for submit button. @default 'Login' */
+    submitLabel?: string;
+    /** Label for email field. @default 'Email' */
+    emailLabel?: string;
+    /** Label for password field. @default 'Password' */
+    passwordLabel?: string;
+    /** Error message when email is empty. @default 'Email is required' */
+    emailRequiredError?: string;
+    /** Error message when email format is invalid. @default 'Please enter a valid email address' */
+    emailFormatError?: string;
+    /** Error message when password is empty. @default 'Password is required' */
+    passwordRequiredError?: string;
+}
+/**
+ * Event detail emitted on form submission.
+ */
+export interface LoginSubmitEventDetail {
+    /** The email value */
+    email: string;
+    /** The password value (undefined for email-only variant) */
+    password?: string;
+    /** Whether "Remember me" was checked */
+    rememberMe?: boolean;
+}
+/**
+ * Event detail emitted when a social login button is clicked.
+ */
+export interface LoginSocialEventDetail {
+    /** The social provider name, e.g. "google" */
+    provider: string;
+}

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

@@ -0,0 +1,126 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import type { LoginVariant, LoginConfig, LoginSubmitEventDetail, LoginSocialEventDetail } from './types';
+import type { Schema } from '../x-form-builder/types';
+export declare class XLogin {
+    el: HTMLElement;
+    /**
+     * Login page layout variant.
+     * @example
+     * <x-login variant="split-image"></x-login>
+     */
+    variant: LoginVariant;
+    /**
+     * Configuration object for customizing labels, links, and features.
+     * @example
+     * <x-login config={{ brandName: 'My App', showSocialLogin: true }}></x-login>
+     */
+    config: LoginConfig;
+    /**
+     * Show loading state on the submit button.
+     * @example
+     * <x-login loading></x-login>
+     */
+    loading: boolean;
+    /**
+     * Disable the entire form.
+     * @example
+     * <x-login disabled></x-login>
+     */
+    disabled: boolean;
+    /**
+     * Error message to display (e.g., "Invalid credentials").
+     * @example
+     * <x-login error="Invalid email or password"></x-login>
+     */
+    error: string;
+    /**
+     * Optional custom form schema for x-form-builder.
+     * If not provided, a default login schema is generated from the config.
+     * @example
+     * <x-login formSchema={myCustomSchema}></x-login>
+     */
+    formSchema: Schema;
+    email: string;
+    password: string;
+    rememberMe: boolean;
+    /**
+     * Emitted when the login form is submitted.
+     * @example
+     * <x-login onXSubmit={(ev) => console.log(ev.detail)}></x-login>
+     */
+    xSubmit: EventEmitter<LoginSubmitEventDetail>;
+    /**
+     * Emitted when a social login button is clicked.
+     * @example
+     * <x-login onXSocialLogin={(ev) => console.log(ev.detail.provider)}></x-login>
+     */
+    xSocialLogin: EventEmitter<LoginSocialEventDetail>;
+    /**
+     * Emitted when "Forgot password?" is clicked (if no forgotPasswordUrl is set).
+     * @example
+     * <x-login onXForgotPassword={() => navigateTo('/forgot')}></x-login>
+     */
+    xForgotPassword: EventEmitter<void>;
+    /**
+     * Emitted when "Sign up" link is clicked (if no signUpUrl is set).
+     * @example
+     * <x-login onXSignUp={() => navigateTo('/register')}></x-login>
+     */
+    xSignUp: EventEmitter<void>;
+    private get cfg();
+    private get socialProviders();
+    private get socialLayout();
+    private capitalize;
+    private get forgotPasswordPos();
+    private isIconUrl;
+    /**
+     * Build the default login form schema from config props.
+     * Used when no custom `formSchema` is provided.
+     */
+    private buildDefaultLoginSchema;
+    private handleFormSubmit;
+    private handleSocialClick;
+    private handleSignUp;
+    private renderBrand;
+    private renderHeader;
+    private renderError;
+    private renderForgotPassword;
+    private renderFormOptions;
+    /**
+     * Render the login form using x-form-builder.
+     * If a custom `formSchema` prop is provided, it takes priority.
+     * Otherwise, a default schema is generated from the login config.
+     */
+    private renderFormBuilder;
+    private renderDivider;
+    private renderSocialButtons;
+    /**
+     * Render social buttons as compact icon-only grid.
+     */
+    private renderSocialIconGrid;
+    /**
+     * Render the social side panel (used when socialLayout='side').
+     */
+    private renderSocialSidePanel;
+    /**
+     * Wraps form content in a card, optionally with a social side panel.
+     */
+    private renderWrappedCard;
+    private renderSignUpLink;
+    private renderTerms;
+    /**
+     * Variant 1: Simple centered login card
+     */
+    private renderSimple;
+    private renderSplitImage;
+    /**
+     * Variant 3: Card on muted background with brand above
+     */
+    private renderMutedBg;
+    private renderCardImage;
+    /**
+     * Variant 5: Email-only minimal login
+     */
+    private renderEmailOnly;
+    render(): any;
+}

package/dist/types/components/x-message/message-service.d.ts

@@ -6,7 +6,7 @@
  *
  * Usage:
  * ```ts
- * import { message } from '@xlabs/core';
+ * import { message } from '@xlabs-store/core';
  *
  * // Basic usage
  * message.info('This is an info message');

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

@@ -20,6 +20,12 @@ export declare class XModal {
      * <x-modal modalTitle="Confirm"></x-modal>
      */
     modalTitle: string;
+    /**
+     * Help text displayed as a tooltip icon next to the modal title.
+     * @example
+     * <x-modal helpText="More information here"></x-modal>
+     */
+    helpText: string;
     /**
      * Width of the modal.
      * @example
@@ -86,6 +92,12 @@ export declare class XModal {
      * <x-modal okType="primary"></x-modal>
      */
     okType: 'primary' | 'default' | 'dashed' | 'text' | 'link';
+    /**
+     * Whether OK button is disabled.
+     * @example
+     * <x-modal okDisabled></x-modal>
+     */
+    okDisabled: boolean;
     /**
      * Modal type (info, success, error, warning, confirm).
      * @example
@@ -108,6 +120,10 @@ export declare class XModal {
      * Portal instance for modal content.
      */
     private portalInstance;
+    /**
+     * Modal element reference.
+     */
+    private modalElement;
     /**
      * Create portal on initial visible state.
      * @returns void
@@ -121,15 +137,20 @@ export declare class XModal {
     handleVisibleChange(): void;
     handlePropsChange(): void;
     /**
-     * Get body content from slot.
-     * @returns string
+     * Get body nodes from slot.
+     * @returns Node[]
+     */
+    private getBodyNodes;
+    /**
+     * Get footer nodes from slot.
+     * @returns Node[]
      */
-    private getBodyContent;
+    private getFooterNodes;
     /**
-     * Get footer content from slot.
-     * @returns string
+     * Apply properties to modal element.
+     * @param modalEl The modal element to update.
      */
-    private getFooterContent;
+    private applyPropsToModalElement;
     /**
      * Build modal content element for portal.
      *
@@ -142,6 +163,10 @@ export declare class XModal {
      * @returns HTMLElement
      */
     private buildModalElement;
+    /**
+     * Return nodes from modal element back to host light DOM.
+     */
+    private returnNodesToHost;
     /**
      * Update portal with modal content.
      * @returns void

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

@@ -15,6 +15,12 @@ export declare class XModalContent {
      * <x-modal-content modalTitle="Confirm"></x-modal-content>
      */
     modalTitle: string;
+    /**
+     * Help text displayed as a tooltip next to the modal title.
+     * @example
+     * <x-modal-content helpText="This is help info"></x-modal-content>
+     */
+    helpText: string;
     /**
      * Whether to show the header.
      */
@@ -89,6 +95,10 @@ export declare class XModalContent {
      * Whether OK button is danger style.
      */
     okDanger: boolean;
+    /**
+     * Whether OK button is disabled.
+     */
+    okDisabled: boolean;
     /**
      * Modal type (info, success, error, warning, confirm).
      */
@@ -105,6 +115,14 @@ export declare class XModalContent {
      * <x-modal-content footerContent="<b>Footer</b>"></x-modal-content>
      */
     footerContent: string;
+    /**
+     * Body content - Array of DOM nodes or single Node.
+     */
+    bodyNodes?: Node[] | Node;
+    /**
+     * Footer content - Array of DOM nodes or single Node.
+     */
+    footerNodes?: Node[] | Node;
     /**
      * Body style.
      */
@@ -155,6 +173,12 @@ export declare class XModalContent {
      * @returns void
      */
     private handleCancel;
+    /**
+     * Sync nodes to their respective containers.
+     */
+    private syncNodes;
+    componentDidLoad(): void;
+    componentDidUpdate(): void;
     /**
      * Render modal markup with header, body, and footer.
      *

package/dist/types/components/x-notification/notification-service.d.ts

@@ -6,7 +6,7 @@
  *
  * Usage:
  * ```ts
- * import { notification } from '@xlabs/core';
+ * import { notification } from '@xlabs-store/core';
  *
  * // Basic usage
  * notification.info({

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

@@ -7,6 +7,8 @@ export declare class XQRCode {
     size: number;
     /** Error correction level */
     ec: EC;
+    /** Whether to use a Web Worker for generation (Experimental) */
+    useWorker: boolean;
     /** Rendering type: 'svg' or 'canvas' */
     type: 'svg' | 'canvas';
     /** Show gradient effect (SVG only) */

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

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

package/dist/types/components/x-tab-pane/x-tab-pane.d.ts

@@ -9,6 +9,17 @@ export declare class XTabPane {
      * <x-tab-pane tab="Profile"></x-tab-pane>
      */
     tab: string;
+    /**
+     * Whether tab is disabled.
+     * @default false
+     */
+    disabled: boolean;
+    /**
+     * TabPane's key. Alias for tabKey.
+     * @example
+     * <x-tab-pane paneKey="profile"></x-tab-pane>
+     */
+    paneKey: string;
     /**
      * TabPane's key.
      * @example

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

@@ -76,6 +76,7 @@ export interface TableColumn<T = Record<string, unknown>> {
     /** Ellipsis cell content */
     ellipsis?: boolean | {
         showTitle?: boolean;
+        rows?: number;
     };
     /** Custom render function */
     render?: (value: unknown, record: T, index: number) => JSX.Element;
@@ -119,6 +120,8 @@ export interface TableColumn<T = Record<string, unknown>> {
     hidden?: boolean;
     /** Resizeable */
     resize?: boolean;
+    /** Searchable */
+    searchable?: boolean;
 }
 /**
  * Column Sort event detail

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

@@ -159,6 +159,12 @@ export declare class XTable {
         onMouseEnter?: (e: Event) => void;
         onMouseLeave?: (e: Event) => void;
     };
+    /**
+     * Whether the row is clickable.
+     * Can be a boolean or a function returning a boolean.
+     * @default false
+     */
+    clickable: boolean | ((record: Record<string, unknown>, index: number) => boolean);
     /**
      * Enable column resizing.
      * @default false
@@ -272,10 +278,6 @@ export declare class XTable {
      * Expanded row keys.
      */
     private expandedRowKeys;
-    /**
-     * Hovered row key.
-     */
-    private hoveredRowKey;
     /**
      * Internal columns state for resizing and reordering.
      */
@@ -298,6 +300,7 @@ export declare class XTable {
     private draggedRowKey;
     private dragOverRowKey;
     private dragOverRowSide;
+    private searchState;
     /**
      * @returns void
      */
@@ -389,8 +392,13 @@ export declare class XTable {
     private handleSelectAll;
     private emitChange;
     private renderSortIcon;
+    private shouldShowExpandColumn;
     private renderSelectionColumn;
     private renderExpandColumn;
+    private hasSearchableColumns;
+    private handleSearchChange;
+    private renderSearchCell;
+    private renderSearchRow;
     activeFilterColumn: string | null;
     private handleFilterDropdownOpenChange;
     private handleFilterChange;
@@ -404,10 +412,12 @@ export declare class XTable {
     private handleColumnDragStart;
     private handleColumnDragOver;
     private handleColumnDragLeave;
+    private handleColumnDragEnd;
     private handleColumnDrop;
     private handleRowDragStart;
     private handleRowDragOver;
     private handleRowDragLeave;
+    private handleRowDragEnd;
     private handleRowDrop;
     private getStickyOffsets;
     /**
@@ -458,6 +468,7 @@ export declare class XTable {
      * @param record - The data record for the row.
      * @returns JSX.Element - The td element.
      */
+    private renderSelectionCell;
     /**
      * Renders the expand icon cell for a row.
      *

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

@@ -110,6 +110,15 @@ export interface TabsScrollEventDetail {
     /** Scroll direction */
     direction: 'left' | 'right' | 'top' | 'bottom';
 }
+/**
+ * Tabs rename event detail
+ */
+export interface TabsRenameEventDetail {
+    /** Target key being renamed */
+    key: string;
+    /** New label value */
+    label: string;
+}
 /**
  * More dropdown configuration
  */

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

@@ -1,5 +1,5 @@
 import { EventEmitter } from '../../stencil-public-runtime';
-import { TabsPlacement, TabsType, TabsSize, TabItem, TabsIndicator, TabBarExtraContent, TabsChangeEventDetail, TabsEditEventDetail, TabsClickEventDetail, TabsScrollEventDetail, TabsClassNames, TabsStyles } from './types';
+import { TabsPlacement, TabsType, TabsSize, TabItem, TabsIndicator, TabBarExtraContent, TabsChangeEventDetail, TabsEditEventDetail, TabsClickEventDetail, TabsScrollEventDetail, TabsClassNames, TabsStyles, TabsRenameEventDetail } from './types';
 /**
  * @component x-tabs
  * @description Tabs make it easy to explore and switch between different views.
@@ -146,6 +146,11 @@ export declare class XTabs {
      * <x-tabs styles={{ header: { background: '#fff' } }}></x-tabs>
      */
     styles?: TabsStyles;
+    /**
+     * Whether tab labels can be renamed (via double click).
+     * @default false
+     */
+    editable: boolean;
     /**
      * Callback when active tab changes.
      * @example
@@ -170,6 +175,12 @@ export declare class XTabs {
      * <x-tabs onXTabScroll={(ev) => console.log(ev.detail)}></x-tabs>
      */
     xTabScroll: EventEmitter<TabsScrollEventDetail>;
+    /**
+     * Callback when tab label is renamed.
+     * @example
+     * <x-tabs onXTabRename={(ev) => console.log(ev.detail)}></x-tabs>
+     */
+    xTabRename: EventEmitter<TabsRenameEventDetail>;
     /**
      * Internal tab metadata list.
      */
@@ -178,6 +189,14 @@ export declare class XTabs {
      * Ink bar inline style.
      */
     private inkBarStyle;
+    /**
+     * Key of the tab currently being renamed.
+     */
+    private editingKey;
+    /**
+     * Current value of the renaming input.
+     */
+    private editingLabel;
     componentWillLoad(): void;
     componentDidLoad(): void;
     componentDidUpdate(): void;
@@ -257,6 +276,26 @@ export declare class XTabs {
      * @returns void
      */
     private handleTabClick;
+    /**
+     * Handle double click on a tab to start renaming.
+     * @param key - Tab key.
+     * @param label - Current tab label.
+     * @param e - Mouse event.
+     */
+    private handleTabDoubleClick;
+    /**
+     * Handle renaming input changes.
+     * @param e - Change event.
+     */
+    private handleLabelChange;
+    /**
+     * Handle renaming input blur or Enter key.
+     */
+    private handleLabelSubmit;
+    /**
+     * Handle keydown in renaming input.
+     */
+    private handleLabelKeyDown;
     /**
      * Emit add action for editable-card tabs.
      * @param e - Mouse event.

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

@@ -1,2 +1,2 @@
 export { XTimePickerDropdownContent } from './time-picker-dropdown-content';
-export type { TimePickerDropdownClassMap, TimePickerDropdownStyleMap, TimePickerDropdownRefCallback, TimeChangeDetail, DisabledTimeConfig, } from './types';
+export type { TimePickerDropdownClassMap, TimePickerDropdownStyleMap, TimePickerDropdownRefCallback, TimeChangeDetail, DisabledTimeConfig } from './types';

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

@@ -40,7 +40,9 @@ export interface TransferPagination {
  * Transfer change event detail
  */
 export interface TransferChangeEvent {
-    /** Keys in target list after change */
+    /** Keys in target list after change. Required for Form Builder value extraction. */
+    value: string[];
+    /** Keys in target list after change (Original property) */
     targetKeys: string[];
     /** Direction of move: 'left' or 'right' */
     direction: TransferDirection;

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

@@ -125,6 +125,20 @@ export interface UploadDropEventDetail {
     /** Original drag event */
     event: DragEvent;
 }
+/**
+ * Error event detail
+ */
+export type UploadErrorType = 'maxCount' | 'maxFileSize' | 'beforeUpload' | 'accept';
+export interface UploadErrorEventDetail {
+    /** The file that triggered the error (if applicable) */
+    file?: File;
+    /** Error category */
+    type: UploadErrorType;
+    /** Human readable error message */
+    message: string;
+    /** Original error object (for beforeUpload) */
+    error?: any;
+}
 /**
  * Upload list display options
  */