@xlabs-store/core 0.0.1

package/dist/collection/components/x-switch/types.js

@@ -0,0 +1 @@
+export {};

package/dist/collection/components/x-switch/x-switch.css

@@ -0,0 +1,463 @@
+@charset "UTF-8";
+:root {
+  /** Primary Colors **/
+  --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;
+  /** Secondary Colors **/
+  --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;
+  /** Success Colors **/
+  --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;
+  /** Warning Colors **/
+  --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;
+  /** Danger/Error Colors **/
+  --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;
+  /** Info Colors **/
+  --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;
+  /** Text Colors **/
+  --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;
+  /** Background Colors **/
+  --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);
+  /** Common Colors **/
+  --x-color-white: #ffffff;
+  /** Fill Colors **/
+  --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);
+  /** Border Colors **/
+  --x-color-border: #d9d9d9;
+  --x-color-border-secondary: #f0f0f0;
+  --x-color-border-bg: #ffffff;
+  /** Split/Divider Colors **/
+  --x-color-split: rgba(5, 5, 5, 0.06);
+  /** Dark/Medium/Light - Legacy support **/
+  --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;
+  /** Font Family **/
+  --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;
+  /** Font Sizes **/
+  --x-font-size: 14px;
+  --x-font-size-sm: 12px;
+  --x-font-size-lg: 16px;
+  --x-font-size-xl: 20px;
+  /** Heading Font Sizes **/
+  --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;
+  /** Line Heights **/
+  --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;
+  /** Font Weight **/
+  --x-font-weight-normal: 400;
+  --x-font-weight-medium: 500;
+  --x-font-weight-semibold: 600;
+  --x-font-weight-strong: 600;
+  /** Additional Font Sizes **/
+  --x-font-size-base: 14px;
+  --x-font-size-xxl: 24px;
+  /** Additional Line Heights **/
+  --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;
+  /** Margin/Padding shortcuts **/
+  --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;
+}
+
+/**
+* X-Switch Component Variables
+* 
+* Sass variables for x-switch component
+* Resolution priority: x-switch → ref (x-*)
+* 
+* Usage: Import this file in x-switch.scss
+* @use './variables' as *;
+*/
+/**
+ * X-Switch Component
+ * 
+ * Sass variables for x-switch component
+ * Resolution priority: x-switch → ref (x-*)
+ */
+:host {
+  /* ========================================
+   * BASE STYLES
+   * ======================================== */
+  margin: 0;
+  padding: 0;
+  color: var(--x-switch-inner-color, var(--x-color-white, #ffffff));
+  font-size: var(--x-switch-font-size, var(--x-font-size-sm, 12px));
+  line-height: var(--x-switch-height, 22px);
+  list-style: none;
+  position: relative;
+  display: inline-block;
+  min-width: var(--x-switch-min-width, 44px);
+  height: var(--x-switch-height, 22px);
+  vertical-align: middle;
+  background: var(--x-switch-bg, var(--x-color-text-quaternary, rgba(0, 0, 0, 0.25)));
+  border: 0;
+  border-radius: 100px;
+  cursor: pointer;
+  transition: all var(--x-switch-motion-duration, var(--x-motion-duration-fast, 0.1s)) var(--x-switch-motion-timing, ease-in-out);
+  user-select: none;
+}
+
+/* ========================================
+ * CHECKED STATE
+ * ======================================== */
+:host(.x-switch-checked) {
+  background: var(--x-switch-bg-checked, var(--x-color-primary, #1677ff));
+}
+:host(.x-switch-checked):not(.x-switch-disabled):not(.x-switch-loading):hover {
+  background: var(--x-switch-bg-checked-hover, var(--x-color-primary-hover, #4096ff));
+}
+
+/* ========================================
+ * DISABLED STATE
+ * ======================================== */
+:host(.x-switch-disabled) {
+  cursor: not-allowed;
+  opacity: var(--x-switch-opacity-disabled, var(--x-opacity-disabled, 0.65));
+}
+
+:host(.x-switch-loading) {
+  cursor: not-allowed;
+  opacity: var(--x-switch-opacity-disabled, var(--x-opacity-disabled, 0.65));
+}
+
+/* ========================================
+ * HANDLE
+ * ======================================== */
+.x-switch-handle {
+  position: absolute;
+  top: var(--x-switch-handle-offset, 2px);
+  left: var(--x-switch-handle-offset, 2px);
+  width: var(--x-switch-handle-size, 18px);
+  height: var(--x-switch-handle-size, 18px);
+  background: var(--x-switch-handle-bg, var(--x-color-white, #ffffff));
+  border-radius: var(--x-switch-handle-size, 18px);
+  transition: all var(--x-switch-motion-duration, var(--x-motion-duration-fast, 0.1s)) var(--x-switch-motion-timing, ease-in-out);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.x-switch-handle::before {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  background-color: transparent;
+  border-radius: calc(var(--x-switch-handle-size, 18px) / 2);
+  box-shadow: var(--x-switch-handle-shadow, var(--x-shadow-tertiary, 0 2px 4px 0 rgba(0, 21, 41, 0.08)));
+  transition: all var(--x-switch-motion-duration, var(--x-motion-duration-fast, 0.1s)) var(--x-switch-motion-timing, ease-in-out);
+  content: "";
+}
+
+:host(.x-switch-checked) .x-switch-handle {
+  left: calc(100% - var(--x-switch-handle-size, 18px) - var(--x-switch-handle-offset, 2px));
+}
+
+/* ========================================
+ * INNER (text/icon content)
+ * ======================================== */
+.x-switch-inner {
+  display: block;
+  margin: 0 7px 0 25px;
+  color: var(--x-switch-inner-color, var(--x-color-white, #ffffff));
+  font-size: var(--x-switch-font-size, var(--x-font-size-sm, 12px));
+  transition: margin var(--x-switch-motion-duration, var(--x-motion-duration-fast, 0.1s)) var(--x-switch-motion-timing, ease-in-out);
+}
+
+:host(.x-switch-checked) .x-switch-inner {
+  margin: 0 25px 0 7px;
+}
+
+/* ========================================
+ * SMALL SIZE
+ * ======================================== */
+:host(.x-switch-small) {
+  min-width: var(--x-switch-min-width-sm, 28px);
+  height: var(--x-switch-height-sm, 16px);
+  line-height: var(--x-switch-height-sm, 16px);
+}
+
+:host(.x-switch-small) .x-switch-handle {
+  width: var(--x-switch-handle-size-sm, 12px);
+  height: var(--x-switch-handle-size-sm, 12px);
+}
+
+:host(.x-switch-small.x-switch-checked) .x-switch-handle {
+  left: calc(100% - var(--x-switch-handle-size-sm, 12px) - var(--x-switch-handle-offset, 2px));
+}
+
+:host(.x-switch-small) .x-switch-inner {
+  margin: 0 5px 0 18px;
+}
+
+:host(.x-switch-small.x-switch-checked) .x-switch-inner {
+  margin: 0 18px 0 5px;
+}
+
+/* ========================================
+ * LOADING
+ * ======================================== */
+.x-switch-loading-icon {
+  color: var(--x-switch-loading-color, var(--x-color-text-secondary, rgba(0, 0, 0, 0.45)));
+  font-size: var(--x-switch-font-size, var(--x-font-size-sm, 12px));
+}
+
+@keyframes loadingCircle {
+  100% {
+    transform: rotate(360deg);
+  }
+}
+.anticon-spin {
+  display: inline-block;
+  animation: loadingCircle 1s infinite linear;
+}