@xlabs-store/core 0.0.1

package/dist/esm/x-skeleton.entry.js

@@ -0,0 +1,73 @@
+import { r as registerInstance, h, H as Host } from './index-ig_mFsVk.js';
+
+const xSkeletonCss = () => `@charset "UTF-8";:root{--x-color-primary:#1677ff;--x-color-primary-rgb:22, 119, 255;--x-color-primary-contrast:#ffffff;--x-color-primary-contrast-rgb:255, 255, 255;--x-color-primary-shade:#0958d9;--x-color-primary-tint:#4096ff;--x-color-primary-bg:#e6f4ff;--x-color-primary-bg-hover:#bae0ff;--x-color-primary-border:#91caff;--x-color-primary-border-hover:#69b1ff;--x-color-primary-hover:#4096ff;--x-color-primary-active:#0958d9;--x-color-primary-text:#1677ff;--x-color-primary-text-hover:#4096ff;--x-color-primary-text-active:#0958d9;--x-color-secondary:#3dc2ff;--x-color-secondary-rgb:61, 194, 255;--x-color-secondary-contrast:#ffffff;--x-color-secondary-contrast-rgb:255, 255, 255;--x-color-secondary-shade:#36abe0;--x-color-secondary-tint:#50c8ff;--x-color-success:#52c41a;--x-color-success-rgb:82, 196, 26;--x-color-success-contrast:#ffffff;--x-color-success-contrast-rgb:255, 255, 255;--x-color-success-shade:#389e0d;--x-color-success-tint:#73d13d;--x-color-success-bg:#f6ffed;--x-color-success-bg-hover:#d9f7be;--x-color-success-border:#b7eb8f;--x-color-success-border-hover:#95de64;--x-color-success-hover:#73d13d;--x-color-success-active:#389e0d;--x-color-success-text:#52c41a;--x-color-success-text-hover:#73d13d;--x-color-success-text-active:#389e0d;--x-color-warning:#faad14;--x-color-warning-rgb:250, 173, 20;--x-color-warning-contrast:#000000;--x-color-warning-contrast-rgb:0, 0, 0;--x-color-warning-shade:#d48806;--x-color-warning-tint:#ffc53d;--x-color-warning-bg:#fffbe6;--x-color-warning-bg-hover:#fff1b8;--x-color-warning-border:#ffe58f;--x-color-warning-border-hover:#ffd666;--x-color-warning-hover:#ffc53d;--x-color-warning-active:#d48806;--x-color-warning-text:#faad14;--x-color-warning-text-hover:#ffc53d;--x-color-warning-text-active:#d48806;--x-color-danger:#ff4d4f;--x-color-danger-rgb:255, 77, 79;--x-color-danger-contrast:#ffffff;--x-color-danger-contrast-rgb:255, 255, 255;--x-color-danger-shade:#cf1322;--x-color-danger-tint:#ff7875;--x-color-error:#ff4d4f;--x-color-error-rgb:255, 77, 79;--x-color-error-bg:#fff2f0;--x-color-error-bg-hover:#ffccc7;--x-color-error-border:#ffa39e;--x-color-error-border-hover:#ff7875;--x-color-error-hover:#ff7875;--x-color-error-active:#d9363e;--x-color-error-text:#ff4d4f;--x-color-error-text-hover:#ff7875;--x-color-error-text-active:#d9363e;--x-color-info:#1677ff;--x-color-info-rgb:22, 119, 255;--x-color-info-bg:#e6f4ff;--x-color-info-bg-hover:#bae0ff;--x-color-info-border:#91caff;--x-color-info-border-hover:#69b1ff;--x-color-info-hover:#69b1ff;--x-color-info-active:#0958d9;--x-color-info-text:#1677ff;--x-color-info-text-hover:#69b1ff;--x-color-info-text-active:#0958d9;--x-color-text:rgba(0, 0, 0, 0.88);--x-color-text-secondary:rgba(0, 0, 0, 0.65);--x-color-text-tertiary:rgba(0, 0, 0, 0.45);--x-color-text-quaternary:rgba(0, 0, 0, 0.25);--x-color-text-disabled:rgba(0, 0, 0, 0.25);--x-color-text-placeholder:rgba(0, 0, 0, 0.25);--x-color-text-heading:rgba(0, 0, 0, 0.88);--x-color-text-label:rgba(0, 0, 0, 0.65);--x-color-text-description:rgba(0, 0, 0, 0.45);--x-color-text-light-solid:#ffffff;--x-color-bg-container:#ffffff;--x-color-bg-elevated:#ffffff;--x-color-bg-layout:#f5f5f5;--x-color-bg-spotlight:rgba(0, 0, 0, 0.85);--x-color-bg-mask:rgba(0, 0, 0, 0.45);--x-color-bg-base:#ffffff;--x-color-bg-container-disabled:#f5f5f5;--x-color-bg-container-loading:rgba(255, 255, 255, 0.65);--x-color-white:#ffffff;--x-color-fill:rgba(0, 0, 0, 0.15);--x-color-fill-secondary:rgba(0, 0, 0, 0.06);--x-color-fill-tertiary:rgba(0, 0, 0, 0.04);--x-color-fill-quaternary:rgba(0, 0, 0, 0.02);--x-color-border:#d9d9d9;--x-color-border-secondary:#f0f0f0;--x-color-border-bg:#ffffff;--x-color-split:rgba(5, 5, 5, 0.06);--x-color-dark:#222428;--x-color-dark-rgb:34, 36, 40;--x-color-dark-contrast:#ffffff;--x-color-dark-contrast-rgb:255, 255, 255;--x-color-dark-shade:#1e2023;--x-color-dark-tint:#383a3e;--x-color-medium:#92949c;--x-color-medium-rgb:146, 148, 156;--x-color-medium-contrast:#ffffff;--x-color-medium-contrast-rgb:255, 255, 255;--x-color-medium-shade:#808289;--x-color-medium-tint:#9d9fa6;--x-color-light:#f4f5f8;--x-color-light-rgb:244, 245, 248;--x-color-light-contrast:#000000;--x-color-light-contrast-rgb:0, 0, 0;--x-color-light-shade:#d7d8da;--x-color-light-tint:#f5f6f9;--x-font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--x-font-family-code:"SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;--x-font-size:14px;--x-font-size-sm:12px;--x-font-size-lg:16px;--x-font-size-xl:20px;--x-font-size-heading-1:38px;--x-font-size-heading-2:30px;--x-font-size-heading-3:24px;--x-font-size-heading-4:20px;--x-font-size-heading-5:16px;--x-line-height:1.5714285714285714;--x-line-height-lg:1.5;--x-line-height-sm:1.6666666666666667;--x-line-height-heading-1:1.2105263157894737;--x-line-height-heading-2:1.2666666666666666;--x-line-height-heading-3:1.3333333333333333;--x-line-height-heading-4:1.4;--x-line-height-heading-5:1.5;--x-font-weight-normal:400;--x-font-weight-medium:500;--x-font-weight-semibold:600;--x-font-weight-strong:600;--x-font-size-base:14px;--x-font-size-xxl:24px;--x-line-height-base:1.5714285714285714;--x-spacing-xxs:4px;--x-spacing-xs:8px;--x-spacing-sm:12px;--x-spacing-md:16px;--x-spacing-lg:20px;--x-spacing-xl:24px;--x-spacing-xxl:32px;--x-spacing-xxxl:48px;--x-margin-xxs:4px;--x-margin-xs:8px;--x-margin-sm:12px;--x-margin-md:16px;--x-margin-lg:24px;--x-margin-xl:32px;--x-margin-xxl:48px;--x-padding-xxs:4px;--x-padding-xs:8px;--x-padding-sm:12px;--x-padding-md:16px;--x-padding-lg:24px;--x-padding-content-horizontal-lg:24px;--x-padding-content-vertical-lg:12px;--x-padding-content-horizontal:16px;--x-padding-content-vertical:12px;--x-padding-content-horizontal-sm:16px;--x-padding-content-vertical-sm:8px;--x-border-radius:6px;--x-border-radius-xs:2px;--x-border-radius-sm:4px;--x-border-radius-lg:8px;--x-border-radius-xl:12px;--x-border-radius-outer:4px;--x-border-radius-base:6px;--x-border-width:1px;--x-border-width-base:1px;--x-shadow:0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);--x-shadow-secondary:0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);--x-shadow-tertiary:0 1px 2px 0 rgba(0, 0, 0, 0.03), 0 1px 6px -1px rgba(0, 0, 0, 0.02), 0 2px 4px 0 rgba(0, 0, 0, 0.02);--x-shadow-lg:0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);--x-box-shadow:0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);--x-box-shadow-secondary:0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);--x-box-shadow-tertiary:0 1px 2px 0 rgba(0, 0, 0, 0.03), 0 1px 6px -1px rgba(0, 0, 0, 0.02), 0 2px 4px 0 rgba(0, 0, 0, 0.02);--x-box-shadow-popover-arrow:2px 2px 5px rgba(0, 0, 0, 0.05);--x-box-shadow-card:0 1px 2px -2px rgba(0, 0, 0, 0.16), 0 3px 6px 0 rgba(0, 0, 0, 0.12), 0 5px 12px 4px rgba(0, 0, 0, 0.09);--x-box-shadow-drawer-right:-6px 0 16px 0 rgba(0, 0, 0, 0.08), -3px 0 6px -4px rgba(0, 0, 0, 0.12), -9px 0 28px 8px rgba(0, 0, 0, 0.05);--x-box-shadow-drawer-left:6px 0 16px 0 rgba(0, 0, 0, 0.08), 3px 0 6px -4px rgba(0, 0, 0, 0.12), 9px 0 28px 8px rgba(0, 0, 0, 0.05);--x-box-shadow-drawer-up:0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);--x-box-shadow-drawer-down:0 -6px 16px 0 rgba(0, 0, 0, 0.08), 0 -3px 6px -4px rgba(0, 0, 0, 0.12), 0 -9px 28px 8px rgba(0, 0, 0, 0.05);--x-box-shadow-tabs-overflow-left:inset 10px 0 8px -8px rgba(0, 0, 0, 0.08);--x-box-shadow-tabs-overflow-right:inset -10px 0 8px -8px rgba(0, 0, 0, 0.08);--x-box-shadow-tabs-overflow-top:inset 0 10px 8px -8px rgba(0, 0, 0, 0.08);--x-box-shadow-tabs-overflow-bottom:inset 0 -10px 8px -8px rgba(0, 0, 0, 0.08);--x-motion-duration-fast:0.1s;--x-motion-duration-mid:0.2s;--x-motion-duration-slow:0.3s;--x-motion-ease-in-out:cubic-bezier(0.645, 0.045, 0.355, 1);--x-motion-ease-out:cubic-bezier(0.215, 0.61, 0.355, 1);--x-motion-ease-in:cubic-bezier(0.55, 0.055, 0.675, 0.19);--x-motion-ease-out-back:cubic-bezier(0.12, 0.4, 0.29, 1.46);--x-motion-ease-in-back:cubic-bezier(0.71, -0.46, 0.88, 0.6);--x-motion-ease-in-out-circle:cubic-bezier(0.78, 0.14, 0.15, 0.86);--x-motion-ease-out-circle:cubic-bezier(0.08, 0.82, 0.17, 1);--x-motion-ease-in-circle:cubic-bezier(0.6, 0.04, 0.98, 0.34);--x-motion-ease-in-quint:cubic-bezier(0.755, 0.05, 0.855, 0.06);--x-motion-ease-out-quint:cubic-bezier(0.23, 1, 0.32, 1);--x-z-index-base:0;--x-z-index-popup-base:1000;--x-z-index-popup:1030;--x-z-index-affix:10;--x-z-index-modal:1000;--x-z-index-modal-mask:1000;--x-z-index-drawer:1000;--x-z-index-popover:1030;--x-z-index-dropdown:1050;--x-z-index-tooltip:1070;--x-z-index-notification:1080;--x-z-index-message:1090;--x-z-index-popconfirm:1060;--x-z-index-table-fixed:10;--x-opacity-loading:0.65;--x-opacity-image:1;--x-opacity-disabled:0.5;--x-control-height:32px;--x-control-height-xs:24px;--x-control-height-sm:24px;--x-control-height-lg:40px;--x-control-radio-size:16px;--x-control-checkbox-size:16px;--x-control-padding-horizontal:12px;--x-control-padding-horizontal-sm:8px;--x-control-outline-width:2px;--x-control-outline:rgba(5, 145, 255, 0.1);--x-control-item-bg-hover:rgba(0, 0, 0, 0.04);--x-control-item-bg-active:#e6f4ff;--x-control-item-bg-active-hover:#bae0ff;--x-control-item-bg-active-disabled:rgba(0, 0, 0, 0.15);--x-control-tmp-outline:rgba(0, 0, 0, 0.02);--x-color-yellow:#fadb14;--x-color-yellow-rgb:250, 219, 20;--x-font-family-base:var(--x-font-family);--x-color-link:#1677ff;--x-color-link-hover:#69b1ff;--x-color-link-active:#0958d9;--x-color-icon:rgba(0, 0, 0, 0.45);--x-color-icon-hover:rgba(0, 0, 0, 0.88);--x-color-highlight:#ff4d4f;--x-color-bg-text-hover:rgba(0, 0, 0, 0.06);--x-color-bg-text-active:rgba(0, 0, 0, 0.15);--x-screen-xs:480px;--x-screen-xs-min:480px;--x-screen-xs-max:575px;--x-screen-sm:576px;--x-screen-sm-min:576px;--x-screen-sm-max:767px;--x-screen-md:768px;--x-screen-md-min:768px;--x-screen-md-max:991px;--x-screen-lg:992px;--x-screen-lg-min:992px;--x-screen-lg-max:1199px;--x-screen-xl:1200px;--x-screen-xl-min:1200px;--x-screen-xl-max:1599px;--x-screen-xxl:1600px;--x-screen-xxl-min:1600px;--x-color-fill-content:rgba(0, 0, 0, 0.06);--x-color-fill-content-hover:rgba(0, 0, 0, 0.15);--x-color-fill-alter:rgba(0, 0, 0, 0.02);--x-scrollbar-width:12px;--x-scrollbar-track-bg:rgba(0, 0, 0, 0.04);--x-scrollbar-thumb-bg:rgba(0, 0, 0, 0.25);--x-scrollbar-thumb-bg-hover:rgba(0, 0, 0, 0.35);--x-menu-dark-bg:#001529;--x-menu-dark-item-bg:#001529;--x-menu-dark-popup-bg:#001529;--x-menu-dark-submenu-item-bg:#000c17}:host{display:table;width:100%}.x-skeleton-header{display:table-cell;padding-right:var(--x-skeleton-header-padding-right, var(--x-spacing-md, 16px));vertical-align:top}.x-skeleton-avatar{display:inline-block;vertical-align:top;background:var(--x-skeleton-bg, var(--x-color-fill-content, rgba(0, 0, 0, 0.06)));width:var(--x-skeleton-avatar-size, var(--x-control-height, 32px));height:var(--x-skeleton-avatar-size, var(--x-control-height, 32px));border-radius:var(--x-skeleton-avatar-border-radius, 50%);line-height:var(--x-skeleton-avatar-size, var(--x-control-height, 32px))}.x-skeleton-content{display:table-cell;width:100%;vertical-align:top}.x-skeleton-title{width:var(--x-skeleton-title-width, 38%);height:var(--x-skeleton-title-height, var(--x-spacing-md, 16px));margin-top:var(--x-skeleton-title-margin, var(--x-spacing-md, 16px));background:var(--x-skeleton-bg, var(--x-color-fill-content, rgba(0, 0, 0, 0.06)));border-radius:var(--x-skeleton-title-border-radius, var(--x-border-radius-xs, 2px));margin-bottom:var(--x-skeleton-title-margin, var(--x-spacing-md, 16px))}.x-skeleton-paragraph{padding:0;margin:0;list-style:none}.x-skeleton-paragraph li{width:100%;height:var(--x-skeleton-paragraph-height, var(--x-spacing-md, 16px));list-style:none;background:var(--x-skeleton-bg, var(--x-color-fill-content, rgba(0, 0, 0, 0.06)));border-radius:var(--x-skeleton-paragraph-border-radius, var(--x-border-radius-xs, 2px));margin-top:var(--x-skeleton-paragraph-margin-top, var(--x-spacing-md, 16px))}.x-skeleton-paragraph li:first-child{margin-top:0}:host(.x-skeleton-with-avatar) .x-skeleton-content .x-skeleton-title{margin-top:var(--x-skeleton-title-margin, var(--x-spacing-md, 16px));width:50%}:host(.x-skeleton-active) .x-skeleton-avatar,:host(.x-skeleton-active) .x-skeleton-title,:host(.x-skeleton-active) .x-skeleton-paragraph li{background:-webkit-gradient(linear, left top, right top, color-stop(25%, var(--x-skeleton-bg, var(--x-color-fill-content, rgba(0, 0, 0, 0.06)))), color-stop(37%, var(--x-skeleton-bg-gradient, var(--x-color-fill-secondary, rgba(0, 0, 0, 0.04)))), color-stop(63%, var(--x-skeleton-bg, var(--x-color-fill-content, rgba(0, 0, 0, 0.06)))));background:linear-gradient(90deg, var(--x-skeleton-bg, var(--x-color-fill-content, rgba(0, 0, 0, 0.06))) 25%, var(--x-skeleton-bg-gradient, var(--x-color-fill-secondary, rgba(0, 0, 0, 0.04))) 37%, var(--x-skeleton-bg, var(--x-color-fill-content, rgba(0, 0, 0, 0.06))) 63%);background-size:400% 100%;-webkit-animation:x-skeleton-loading var(--x-skeleton-animation-duration, 1.4s) ease infinite;animation:x-skeleton-loading var(--x-skeleton-animation-duration, 1.4s) ease infinite}@-webkit-keyframes x-skeleton-loading{0%{background-position:100% 50%}100%{background-position:0 50%}}@keyframes x-skeleton-loading{0%{background-position:100% 50%}100%{background-position:0 50%}}`;
+
+const XSkeleton = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    /**
+     * Enable animation.
+     * @example
+     * <x-skeleton active></x-skeleton>
+     */
+    active = false;
+    /**
+     * Show avatar placeholder.
+     * @example
+     * <x-skeleton avatar></x-skeleton>
+     */
+    avatar = false;
+    /**
+     * Paragraph rows configuration.
+     * @example
+     * <x-skeleton paragraph={{ rows: 4 }}></x-skeleton>
+     */
+    paragraph = true;
+    /**
+     * Show title placeholder.
+     * @example
+     * <x-skeleton showTitle={false}></x-skeleton>
+     */
+    showTitle = true;
+    /**
+     * Use round corners.
+     * @example
+     * <x-skeleton round></x-skeleton>
+     */
+    round = false;
+    /**
+     * Whether to display skeleton or render children.
+     * @example
+     * <x-skeleton loading={false}><div>Loaded</div></x-skeleton>
+     */
+    loading = true;
+    /**
+     * Renders the Skeleton component.
+     *
+     * Flow:
+     * 1. Checks `loading` prop. If false, renders children (slot) immediately.
+     * 2. Calculates paragraph rows based on `paragraph` prop (default 3, or customized).
+     * 3. Renders host with state classes (active, avatar, round).
+     * 4. Renders avatar placeholder if enabled.
+     * 5. Renders content section with title and paragraph lines.
+     *    - The last line of the paragraph is typically shorter (61% width) for a natural look.
+     *
+     * @returns JSX.Element - The skeleton structure or content.
+     */
+    render() {
+        if (!this.loading) {
+            return h("slot", null);
+        }
+        const rows = typeof this.paragraph === 'object' ? this.paragraph.rows : (this.paragraph ? 3 : 0);
+        return (h(Host, { class: {
+                'x-skeleton': true,
+                'x-skeleton-active': this.active,
+                'x-skeleton-with-avatar': this.avatar,
+                'x-skeleton-round': this.round
+            } }, this.avatar && (h("div", { class: "x-skeleton-header" }, h("span", { class: "x-skeleton-avatar" }))), h("div", { class: "x-skeleton-content" }, this.showTitle && (h("h3", { class: "x-skeleton-title" })), rows > 0 && (h("ul", { class: "x-skeleton-paragraph" }, Array.from({ length: rows }).map((_, i) => (h("li", { style: { width: i === rows - 1 ? '61%' : undefined } }))))))));
+    }
+};
+XSkeleton.style = xSkeletonCss();
+
+export { XSkeleton as x_skeleton };

package/dist/esm/x-spin.entry.js

@@ -0,0 +1,60 @@
+import { r as registerInstance, a as getElement, h, H as Host } from './index-ig_mFsVk.js';
+
+const xSpinCss = () => `@charset "UTF-8";:root{--x-color-primary:#1677ff;--x-color-primary-rgb:22, 119, 255;--x-color-primary-contrast:#ffffff;--x-color-primary-contrast-rgb:255, 255, 255;--x-color-primary-shade:#0958d9;--x-color-primary-tint:#4096ff;--x-color-primary-bg:#e6f4ff;--x-color-primary-bg-hover:#bae0ff;--x-color-primary-border:#91caff;--x-color-primary-border-hover:#69b1ff;--x-color-primary-hover:#4096ff;--x-color-primary-active:#0958d9;--x-color-primary-text:#1677ff;--x-color-primary-text-hover:#4096ff;--x-color-primary-text-active:#0958d9;--x-color-secondary:#3dc2ff;--x-color-secondary-rgb:61, 194, 255;--x-color-secondary-contrast:#ffffff;--x-color-secondary-contrast-rgb:255, 255, 255;--x-color-secondary-shade:#36abe0;--x-color-secondary-tint:#50c8ff;--x-color-success:#52c41a;--x-color-success-rgb:82, 196, 26;--x-color-success-contrast:#ffffff;--x-color-success-contrast-rgb:255, 255, 255;--x-color-success-shade:#389e0d;--x-color-success-tint:#73d13d;--x-color-success-bg:#f6ffed;--x-color-success-bg-hover:#d9f7be;--x-color-success-border:#b7eb8f;--x-color-success-border-hover:#95de64;--x-color-success-hover:#73d13d;--x-color-success-active:#389e0d;--x-color-success-text:#52c41a;--x-color-success-text-hover:#73d13d;--x-color-success-text-active:#389e0d;--x-color-warning:#faad14;--x-color-warning-rgb:250, 173, 20;--x-color-warning-contrast:#000000;--x-color-warning-contrast-rgb:0, 0, 0;--x-color-warning-shade:#d48806;--x-color-warning-tint:#ffc53d;--x-color-warning-bg:#fffbe6;--x-color-warning-bg-hover:#fff1b8;--x-color-warning-border:#ffe58f;--x-color-warning-border-hover:#ffd666;--x-color-warning-hover:#ffc53d;--x-color-warning-active:#d48806;--x-color-warning-text:#faad14;--x-color-warning-text-hover:#ffc53d;--x-color-warning-text-active:#d48806;--x-color-danger:#ff4d4f;--x-color-danger-rgb:255, 77, 79;--x-color-danger-contrast:#ffffff;--x-color-danger-contrast-rgb:255, 255, 255;--x-color-danger-shade:#cf1322;--x-color-danger-tint:#ff7875;--x-color-error:#ff4d4f;--x-color-error-rgb:255, 77, 79;--x-color-error-bg:#fff2f0;--x-color-error-bg-hover:#ffccc7;--x-color-error-border:#ffa39e;--x-color-error-border-hover:#ff7875;--x-color-error-hover:#ff7875;--x-color-error-active:#d9363e;--x-color-error-text:#ff4d4f;--x-color-error-text-hover:#ff7875;--x-color-error-text-active:#d9363e;--x-color-info:#1677ff;--x-color-info-rgb:22, 119, 255;--x-color-info-bg:#e6f4ff;--x-color-info-bg-hover:#bae0ff;--x-color-info-border:#91caff;--x-color-info-border-hover:#69b1ff;--x-color-info-hover:#69b1ff;--x-color-info-active:#0958d9;--x-color-info-text:#1677ff;--x-color-info-text-hover:#69b1ff;--x-color-info-text-active:#0958d9;--x-color-text:rgba(0, 0, 0, 0.88);--x-color-text-secondary:rgba(0, 0, 0, 0.65);--x-color-text-tertiary:rgba(0, 0, 0, 0.45);--x-color-text-quaternary:rgba(0, 0, 0, 0.25);--x-color-text-disabled:rgba(0, 0, 0, 0.25);--x-color-text-placeholder:rgba(0, 0, 0, 0.25);--x-color-text-heading:rgba(0, 0, 0, 0.88);--x-color-text-label:rgba(0, 0, 0, 0.65);--x-color-text-description:rgba(0, 0, 0, 0.45);--x-color-text-light-solid:#ffffff;--x-color-bg-container:#ffffff;--x-color-bg-elevated:#ffffff;--x-color-bg-layout:#f5f5f5;--x-color-bg-spotlight:rgba(0, 0, 0, 0.85);--x-color-bg-mask:rgba(0, 0, 0, 0.45);--x-color-bg-base:#ffffff;--x-color-bg-container-disabled:#f5f5f5;--x-color-bg-container-loading:rgba(255, 255, 255, 0.65);--x-color-white:#ffffff;--x-color-fill:rgba(0, 0, 0, 0.15);--x-color-fill-secondary:rgba(0, 0, 0, 0.06);--x-color-fill-tertiary:rgba(0, 0, 0, 0.04);--x-color-fill-quaternary:rgba(0, 0, 0, 0.02);--x-color-border:#d9d9d9;--x-color-border-secondary:#f0f0f0;--x-color-border-bg:#ffffff;--x-color-split:rgba(5, 5, 5, 0.06);--x-color-dark:#222428;--x-color-dark-rgb:34, 36, 40;--x-color-dark-contrast:#ffffff;--x-color-dark-contrast-rgb:255, 255, 255;--x-color-dark-shade:#1e2023;--x-color-dark-tint:#383a3e;--x-color-medium:#92949c;--x-color-medium-rgb:146, 148, 156;--x-color-medium-contrast:#ffffff;--x-color-medium-contrast-rgb:255, 255, 255;--x-color-medium-shade:#808289;--x-color-medium-tint:#9d9fa6;--x-color-light:#f4f5f8;--x-color-light-rgb:244, 245, 248;--x-color-light-contrast:#000000;--x-color-light-contrast-rgb:0, 0, 0;--x-color-light-shade:#d7d8da;--x-color-light-tint:#f5f6f9;--x-font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--x-font-family-code:"SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;--x-font-size:14px;--x-font-size-sm:12px;--x-font-size-lg:16px;--x-font-size-xl:20px;--x-font-size-heading-1:38px;--x-font-size-heading-2:30px;--x-font-size-heading-3:24px;--x-font-size-heading-4:20px;--x-font-size-heading-5:16px;--x-line-height:1.5714285714285714;--x-line-height-lg:1.5;--x-line-height-sm:1.6666666666666667;--x-line-height-heading-1:1.2105263157894737;--x-line-height-heading-2:1.2666666666666666;--x-line-height-heading-3:1.3333333333333333;--x-line-height-heading-4:1.4;--x-line-height-heading-5:1.5;--x-font-weight-normal:400;--x-font-weight-medium:500;--x-font-weight-semibold:600;--x-font-weight-strong:600;--x-font-size-base:14px;--x-font-size-xxl:24px;--x-line-height-base:1.5714285714285714;--x-spacing-xxs:4px;--x-spacing-xs:8px;--x-spacing-sm:12px;--x-spacing-md:16px;--x-spacing-lg:20px;--x-spacing-xl:24px;--x-spacing-xxl:32px;--x-spacing-xxxl:48px;--x-margin-xxs:4px;--x-margin-xs:8px;--x-margin-sm:12px;--x-margin-md:16px;--x-margin-lg:24px;--x-margin-xl:32px;--x-margin-xxl:48px;--x-padding-xxs:4px;--x-padding-xs:8px;--x-padding-sm:12px;--x-padding-md:16px;--x-padding-lg:24px;--x-padding-content-horizontal-lg:24px;--x-padding-content-vertical-lg:12px;--x-padding-content-horizontal:16px;--x-padding-content-vertical:12px;--x-padding-content-horizontal-sm:16px;--x-padding-content-vertical-sm:8px;--x-border-radius:6px;--x-border-radius-xs:2px;--x-border-radius-sm:4px;--x-border-radius-lg:8px;--x-border-radius-xl:12px;--x-border-radius-outer:4px;--x-border-radius-base:6px;--x-border-width:1px;--x-border-width-base:1px;--x-shadow:0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);--x-shadow-secondary:0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);--x-shadow-tertiary:0 1px 2px 0 rgba(0, 0, 0, 0.03), 0 1px 6px -1px rgba(0, 0, 0, 0.02), 0 2px 4px 0 rgba(0, 0, 0, 0.02);--x-shadow-lg:0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);--x-box-shadow:0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);--x-box-shadow-secondary:0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);--x-box-shadow-tertiary:0 1px 2px 0 rgba(0, 0, 0, 0.03), 0 1px 6px -1px rgba(0, 0, 0, 0.02), 0 2px 4px 0 rgba(0, 0, 0, 0.02);--x-box-shadow-popover-arrow:2px 2px 5px rgba(0, 0, 0, 0.05);--x-box-shadow-card:0 1px 2px -2px rgba(0, 0, 0, 0.16), 0 3px 6px 0 rgba(0, 0, 0, 0.12), 0 5px 12px 4px rgba(0, 0, 0, 0.09);--x-box-shadow-drawer-right:-6px 0 16px 0 rgba(0, 0, 0, 0.08), -3px 0 6px -4px rgba(0, 0, 0, 0.12), -9px 0 28px 8px rgba(0, 0, 0, 0.05);--x-box-shadow-drawer-left:6px 0 16px 0 rgba(0, 0, 0, 0.08), 3px 0 6px -4px rgba(0, 0, 0, 0.12), 9px 0 28px 8px rgba(0, 0, 0, 0.05);--x-box-shadow-drawer-up:0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);--x-box-shadow-drawer-down:0 -6px 16px 0 rgba(0, 0, 0, 0.08), 0 -3px 6px -4px rgba(0, 0, 0, 0.12), 0 -9px 28px 8px rgba(0, 0, 0, 0.05);--x-box-shadow-tabs-overflow-left:inset 10px 0 8px -8px rgba(0, 0, 0, 0.08);--x-box-shadow-tabs-overflow-right:inset -10px 0 8px -8px rgba(0, 0, 0, 0.08);--x-box-shadow-tabs-overflow-top:inset 0 10px 8px -8px rgba(0, 0, 0, 0.08);--x-box-shadow-tabs-overflow-bottom:inset 0 -10px 8px -8px rgba(0, 0, 0, 0.08);--x-motion-duration-fast:0.1s;--x-motion-duration-mid:0.2s;--x-motion-duration-slow:0.3s;--x-motion-ease-in-out:cubic-bezier(0.645, 0.045, 0.355, 1);--x-motion-ease-out:cubic-bezier(0.215, 0.61, 0.355, 1);--x-motion-ease-in:cubic-bezier(0.55, 0.055, 0.675, 0.19);--x-motion-ease-out-back:cubic-bezier(0.12, 0.4, 0.29, 1.46);--x-motion-ease-in-back:cubic-bezier(0.71, -0.46, 0.88, 0.6);--x-motion-ease-in-out-circle:cubic-bezier(0.78, 0.14, 0.15, 0.86);--x-motion-ease-out-circle:cubic-bezier(0.08, 0.82, 0.17, 1);--x-motion-ease-in-circle:cubic-bezier(0.6, 0.04, 0.98, 0.34);--x-motion-ease-in-quint:cubic-bezier(0.755, 0.05, 0.855, 0.06);--x-motion-ease-out-quint:cubic-bezier(0.23, 1, 0.32, 1);--x-z-index-base:0;--x-z-index-popup-base:1000;--x-z-index-popup:1030;--x-z-index-affix:10;--x-z-index-modal:1000;--x-z-index-modal-mask:1000;--x-z-index-drawer:1000;--x-z-index-popover:1030;--x-z-index-dropdown:1050;--x-z-index-tooltip:1070;--x-z-index-notification:1080;--x-z-index-message:1090;--x-z-index-popconfirm:1060;--x-z-index-table-fixed:10;--x-opacity-loading:0.65;--x-opacity-image:1;--x-opacity-disabled:0.5;--x-control-height:32px;--x-control-height-xs:24px;--x-control-height-sm:24px;--x-control-height-lg:40px;--x-control-radio-size:16px;--x-control-checkbox-size:16px;--x-control-padding-horizontal:12px;--x-control-padding-horizontal-sm:8px;--x-control-outline-width:2px;--x-control-outline:rgba(5, 145, 255, 0.1);--x-control-item-bg-hover:rgba(0, 0, 0, 0.04);--x-control-item-bg-active:#e6f4ff;--x-control-item-bg-active-hover:#bae0ff;--x-control-item-bg-active-disabled:rgba(0, 0, 0, 0.15);--x-control-tmp-outline:rgba(0, 0, 0, 0.02);--x-color-yellow:#fadb14;--x-color-yellow-rgb:250, 219, 20;--x-font-family-base:var(--x-font-family);--x-color-link:#1677ff;--x-color-link-hover:#69b1ff;--x-color-link-active:#0958d9;--x-color-icon:rgba(0, 0, 0, 0.45);--x-color-icon-hover:rgba(0, 0, 0, 0.88);--x-color-highlight:#ff4d4f;--x-color-bg-text-hover:rgba(0, 0, 0, 0.06);--x-color-bg-text-active:rgba(0, 0, 0, 0.15);--x-screen-xs:480px;--x-screen-xs-min:480px;--x-screen-xs-max:575px;--x-screen-sm:576px;--x-screen-sm-min:576px;--x-screen-sm-max:767px;--x-screen-md:768px;--x-screen-md-min:768px;--x-screen-md-max:991px;--x-screen-lg:992px;--x-screen-lg-min:992px;--x-screen-lg-max:1199px;--x-screen-xl:1200px;--x-screen-xl-min:1200px;--x-screen-xl-max:1599px;--x-screen-xxl:1600px;--x-screen-xxl-min:1600px;--x-color-fill-content:rgba(0, 0, 0, 0.06);--x-color-fill-content-hover:rgba(0, 0, 0, 0.15);--x-color-fill-alter:rgba(0, 0, 0, 0.02);--x-scrollbar-width:12px;--x-scrollbar-track-bg:rgba(0, 0, 0, 0.04);--x-scrollbar-thumb-bg:rgba(0, 0, 0, 0.25);--x-scrollbar-thumb-bg-hover:rgba(0, 0, 0, 0.35);--x-menu-dark-bg:#001529;--x-menu-dark-item-bg:#001529;--x-menu-dark-popup-bg:#001529;--x-menu-dark-submenu-item-bg:#000c17}:host{display:inline-block;color:var(--x-spin-color, var(--x-color-primary, #1677ff));vertical-align:middle;text-align:center;font-size:var(--x-spin-font-size, var(--x-font-size-base, 14px))}.x-spin{-webkit-box-sizing:border-box;box-sizing:border-box;margin:0;padding:0;color:var(--x-spin-color, var(--x-color-primary, #1677ff));font-size:var(--x-spin-font-size, var(--x-font-size-base, 14px));font-variant:tabular-nums;line-height:var(--x-spin-line-height, var(--x-line-height-base, 1.5714));list-style:none;-webkit-font-feature-settings:"tnum";font-feature-settings:"tnum";position:relative;display:inline-block;vertical-align:middle;text-align:center;opacity:1;-webkit-transition:-webkit-transform var(--x-spin-motion-duration, var(--x-motion-duration-mid, 0.2s)) cubic-bezier(0.78, 0.14, 0.15, 0.86);transition:-webkit-transform var(--x-spin-motion-duration, var(--x-motion-duration-mid, 0.2s)) cubic-bezier(0.78, 0.14, 0.15, 0.86);transition:transform var(--x-spin-motion-duration, var(--x-motion-duration-mid, 0.2s)) cubic-bezier(0.78, 0.14, 0.15, 0.86);transition:transform var(--x-spin-motion-duration, var(--x-motion-duration-mid, 0.2s)) cubic-bezier(0.78, 0.14, 0.15, 0.86), -webkit-transform var(--x-spin-motion-duration, var(--x-motion-duration-mid, 0.2s)) cubic-bezier(0.78, 0.14, 0.15, 0.86)}.x-spin.x-spin-nested-loading{display:block;position:relative}.x-spin-container{position:relative;-webkit-transition:opacity var(--x-spin-motion-duration, var(--x-motion-duration-mid, 0.2s));transition:opacity var(--x-spin-motion-duration, var(--x-motion-duration-mid, 0.2s))}.x-spin-blur{clear:both;overflow:hidden;opacity:var(--x-spin-blur-opacity, var(--x-opacity-disabled, 0.25));-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;pointer-events:none}.x-spin-nested-loading-spin{position:absolute;top:0;left:0;z-index:4;display:block;width:100%;height:100%;max-height:400px;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}.x-spin-dot{position:relative;display:inline-block;font-size:var(--x-spin-dot-size, var(--x-font-size-xl, 20px));width:1em;height:1em}.x-spin-dot-item{position:absolute;display:block;width:var(--x-spin-dot-item-size, 9px);height:var(--x-spin-dot-item-size, 9px);background-color:var(--x-spin-color, var(--x-color-primary, #1677ff));border-radius:100%;-webkit-transform:scale(0.75);transform:scale(0.75);-webkit-transform-origin:50% 50%;transform-origin:50% 50%;opacity:0.3;-webkit-animation:antSpinMove 1s infinite linear alternate;animation:antSpinMove 1s infinite linear alternate}.x-spin-dot-item:nth-child(1){top:0;left:0}.x-spin-dot-item:nth-child(2){top:0;right:0;-webkit-animation-delay:0.4s;animation-delay:0.4s}.x-spin-dot-item:nth-child(3){right:0;bottom:0;-webkit-animation-delay:0.8s;animation-delay:0.8s}.x-spin-dot-item:nth-child(4){bottom:0;left:0;-webkit-animation-delay:1.2s;animation-delay:1.2s}.x-spin-dot-spin{-webkit-transform:rotate(45deg);transform:rotate(45deg);-webkit-animation:antRotate 1.2s infinite linear;animation:antRotate 1.2s infinite linear}.x-spin-text{margin-top:var(--x-spin-text-margin-top, var(--x-spacing-xs, 8px));color:var(--x-spin-color, var(--x-color-primary, #1677ff));text-shadow:0 1px 2px var(--x-spin-text-shadow-color, var(--x-color-white, #ffffff))}.x-spin-small .x-spin-dot{font-size:var(--x-spin-dot-size-sm, 14px)}.x-spin-small .x-spin-dot .x-spin-dot-item{width:var(--x-spin-dot-item-size-sm, 6px);height:var(--x-spin-dot-item-size-sm, 6px)}.x-spin-large .x-spin-dot{font-size:var(--x-spin-dot-size-lg, 32px)}.x-spin-large .x-spin-dot .x-spin-dot-item{width:var(--x-spin-dot-item-size-lg, 14px);height:var(--x-spin-dot-item-size-lg, 14px)}@-webkit-keyframes antSpinMove{to{opacity:1}}@keyframes antSpinMove{to{opacity:1}}@-webkit-keyframes antRotate{to{-webkit-transform:rotate(405deg);transform:rotate(405deg)}}@keyframes antRotate{to{-webkit-transform:rotate(405deg);transform:rotate(405deg)}}`;
+
+const XSpin = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    get el() { return getElement(this); }
+    /**
+     * Whether to spin.
+     * @example
+     * <x-spin spinning></x-spin>
+     */
+    spinning = true;
+    /**
+     * The size of spin.
+     * @example
+     * <x-spin size="large"></x-spin>
+     */
+    size = 'default';
+    /**
+     * Customize description content when Spin has children.
+     * @example
+     * <x-spin tip="Loading..."><div>Content</div></x-spin>
+     */
+    tip;
+    /**
+     * Renders the Spin component.
+     *
+     * Flow:
+     * 1. Detects if the component has children (nested mode) or is standalone.
+     * 2. If Nested Mode:
+     *    - Wraps children in a container.
+     *    - Applies a blur effect to children if `spinning` is true.
+     *    - Overlays the spinner and optional tip text on top of the blurred content.
+     * 3. If Standalone Mode:
+     *    - Renders the spinner and tip text directly if `spinning` is true.
+     *
+     * The spinner animation uses 4 dot items rotated to create a spinning effect.
+     *
+     * @returns JSX.Element
+     */
+    render() {
+        // Detect whether the component has child content or text.
+        const hasChildren = this.el.children.length > 0 || this.el.textContent.trim().length > 0;
+        return (h(Host, { key: '372b35a20ebf809d62950e45838f85457aabf165', class: {
+                'x-spin': true,
+                'x-spin-nested-loading': hasChildren,
+                [`x-spin-${this.size}`]: true,
+                // Standalone spinner only when no children are present.
+                'x-spin-spinning': this.spinning && !hasChildren, // Standalone spinning
+            } }, hasChildren ? (h("div", { class: "x-spin-container" }, h("div", { class: { 'x-spin-blur': this.spinning } }, h("slot", null)), this.spinning && (h("div", { class: "x-spin-nested-loading-spin" }, h("span", { class: "x-spin-dot x-spin-dot-spin" }, h("i", { class: "x-spin-dot-item" }), h("i", { class: "x-spin-dot-item" }), h("i", { class: "x-spin-dot-item" }), h("i", { class: "x-spin-dot-item" })), this.tip && h("div", { class: "x-spin-text" }, this.tip))))) : (
+        // Standalone mode: render spinner only if spinning is true.
+        this.spinning && (h("div", { class: "x-spin-spinning-content" }, h("span", { class: "x-spin-dot x-spin-dot-spin" }, h("i", { class: "x-spin-dot-item" }), h("i", { class: "x-spin-dot-item" }), h("i", { class: "x-spin-dot-item" }), h("i", { class: "x-spin-dot-item" })), this.tip && h("div", { class: "x-spin-text" }, this.tip))))));
+    }
+};
+XSpin.style = xSpinCss();
+
+export { XSpin as x_spin };

package/dist/esm/x-splitter-panel.entry.js

@@ -0,0 +1,89 @@
+import { r as registerInstance, c as createEvent, a as getElement, h, H as Host } from './index-ig_mFsVk.js';
+
+const xSplitterPanelCss = () => `:host{display:block;position:relative;-ms-flex-negative:0;flex-shrink:0;-ms-flex-positive:0;flex-grow:0;overflow:auto}.x-splitter-panel{width:100%;height:100%}.x-splitter-panel-content{width:100%;height:100%;overflow:auto}:host([data-collapsed=true]){overflow:hidden}:host([data-collapsed=true]) .x-splitter-panel-content{visibility:hidden}`;
+
+const XSplitterPanel = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.xPanelResizeStart = createEvent(this, "xPanelResizeStart", 7);
+        this.xPanelCollapse = createEvent(this, "xPanelCollapse", 7);
+    }
+    get el() { return getElement(this); }
+    // ========================================
+    // PROPS
+    // ========================================
+    /**
+     * Controlled panel size, support number for px or 'percent%' usage
+     * @example
+     * <x-splitter-panel size="30%"></x-splitter-panel>
+     */
+    size;
+    /**
+     * Initial panel size, support number for px or 'percent%' usage
+     * @example
+     * <x-splitter-panel defaultSize={240}></x-splitter-panel>
+     */
+    defaultSize;
+    /**
+     * Minimum threshold, support number for px or 'percent%' usage
+     * @example
+     * <x-splitter-panel min={100}></x-splitter-panel>
+     */
+    min;
+    /**
+     * Maximum threshold, support number for px or 'percent%' usage
+     * @example
+     * <x-splitter-panel max="70%"></x-splitter-panel>
+     */
+    max;
+    /**
+     * Whether to enable drag and drop
+     * @example
+     * <x-splitter-panel resizable={false}></x-splitter-panel>
+     */
+    resizable = true;
+    /**
+     * Quick folding configuration
+     * @example
+     * <x-splitter-panel collapsible="start"></x-splitter-panel>
+     */
+    collapsible = false;
+    // ========================================
+    // EVENTS
+    // ========================================
+    /**
+     * Emitted when resize starts (internal)
+     * @example
+     * <x-splitter-panel onXPanelResizeStart={(ev) => console.log(ev.detail)}></x-splitter-panel>
+     */
+    xPanelResizeStart;
+    /**
+     * Emitted when collapse is triggered (internal)
+     * @example
+     * <x-splitter-panel onXPanelCollapse={(ev) => console.log(ev.detail)}></x-splitter-panel>
+     */
+    xPanelCollapse;
+    // ========================================
+    // RENDER
+    // ========================================
+    /**
+     * Renders the Splitter Panel component.
+     *
+     * Flow:
+     * 1. Applies styling classes based on props (e.g., resizable).
+     * 2. Renders the host element.
+     * 3. Renders a content wrapper div to hold projected content (slot).
+     *
+     * @returns JSX.Element
+     */
+    render() {
+        const hostClasses = {
+            'x-splitter-panel': true,
+            'x-splitter-panel-resizable': this.resizable,
+        };
+        return (h(Host, { key: '08300e8175426d88dcb05110dc6eae0faccddc4d', class: hostClasses }, h("div", { key: '9f154314674cf89391c711d3df44b097b2c0fa26', class: "x-splitter-panel-content" }, h("slot", { key: '34325ac37de1ae0f234cdc6e5e18b75eb4212cac' }))));
+    }
+};
+XSplitterPanel.style = xSplitterPanelCss();
+
+export { XSplitterPanel as x_splitter_panel };