@uzum-tech/ui 2.3.8 → 3.0.0-alpha.0

package/dist/index.js

@@ -3905,7 +3905,7 @@
    * _.upperFirst('FRED');
    * // => 'FRED'
    */
-  var upperFirst = createCaseFirst('toUpperCase');
+  var upperFirst$1 = createCaseFirst('toUpperCase');
 
   /**
    * Converts the first character of `string` to upper case and the remaining
@@ -3923,7 +3923,7 @@
    * // => 'Fred'
    */
   function capitalize(string) {
-    return upperFirst(toString$1(string).toLowerCase());
+    return upperFirst$1(toString$1(string).toLowerCase());
   }
 
   /**
@@ -6649,7 +6649,7 @@
     });
   }
 
-  var commonVariables$6 = {
+  var commonVariables$7 = {
     fontFamily: 'v-sans, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"',
     fontFamilyMono: "v-mono, SFMono-Regular, Menlo, Consolas, Courier, monospace",
     fontFamilyWixMadeforDisplay: '"Wix Madefor Display", v-sans, system-ui, sans-serif',
@@ -6707,7 +6707,7 @@
   const {
     fontBodyMedium,
     fontFamily: fontFamily$1
-  } = commonVariables$6;
+  } = commonVariables$7;
   var globalStyle = c$1("body", `
   margin: 0;
   font-size: ${fontBodyMedium};
@@ -8828,7 +8828,7 @@
   }
 
   /* eslint-disable @typescript-eslint/no-non-null-assertion */
-  const style$1_ = c([c('.v-binder-follower-container', {
+  const style$1$ = c([c('.v-binder-follower-container', {
     position: 'absolute',
     left: '0',
     right: '0',
@@ -8907,7 +8907,7 @@
         }
       });
       const ssrAdapter = useSsrAdapter();
-      style$1_.mount({
+      style$1$.mount({
         id: 'vueuc/binder',
         head: true,
         anchorMetaName: cssrAnchorMetaName,
@@ -10367,7 +10367,7 @@
 
   /* eslint-disable @typescript-eslint/strict-boolean-expressions */
   const hiddenAttr = 'v-hidden';
-  const style$1Z = c('[v-hidden]', {
+  const style$1_ = c('[v-hidden]', {
     display: 'none!important'
   });
   var VOverflow = vue.defineComponent({
@@ -10480,7 +10480,7 @@
         }
       }
       const ssrAdapter = useSsrAdapter();
-      style$1Z.mount({
+      style$1_.mount({
         id: 'vueuc/overflow',
         head: true,
         anchorMetaName: cssrAnchorMetaName,
@@ -14169,7 +14169,7 @@
     }
   }
 
-  var style$1Y = cB("base-icon", `
+  var style$1Z = cB("base-icon", `
   height: 1em;
   width: 1em;
   line-height: 1em;
@@ -14205,7 +14205,7 @@
       onMouseup: Function
     },
     setup(props) {
-      useStyle("-base-icon", style$1Y, vue.toRef(props, "clsPrefix"));
+      useStyle("-base-icon", style$1Z, vue.toRef(props, "clsPrefix"));
     },
     render() {
       return /* @__PURE__ */ vue.h(
@@ -14240,7 +14240,7 @@
     onClick: Function
   };
 
-  var style$1X = cB("icon", `
+  var style$1Y = cB("icon", `
   height: 1em;
   width: 1em;
   line-height: 1em;
@@ -14264,7 +14264,7 @@
 
   const derived$1 = {
     name: "common",
-    ...commonVariables$6,
+    ...commonVariables$7,
     scrollbarColor: "rgba(255, 255, 255, 0.25)",
     scrollbarColorHover: "rgba(255, 255, 255, 0.4)",
     scrollbarWidth: "5px",
@@ -14297,6 +14297,18 @@
     brandQuinary300: "#F19EDA",
     brandQuinary600: "#EA3E68",
     brandQuinary100: "#FAD6D9",
+    accentBrand: "#7000FF",
+    accentBrandHover: "#5D46A6",
+    accentError: "#F24835",
+    accentErrorHover: "#A82C1E",
+    accentErrorSubtle: "#FFFFFF",
+    accentNeutral: "#F3F4F6",
+    accentNeutralHover: "#E8EAED",
+    accentFocusRing: "#CDD1D5",
+    accentBorder: "#DDE0E3",
+    accentDisabled: "#DDE0E3",
+    accentDisabledContent: "#B2B8BC",
+    accentPressedOverlay: "rgba(0, 0, 0, 0.12)",
     surfacePrimary: "#101010",
     surfaceSecondary: "#1D1D1D",
     containerPrimary: "#1D1D1D",
@@ -14347,7 +14359,7 @@
 
   const derived = {
     name: "common",
-    ...commonVariables$6,
+    ...commonVariables$7,
     scrollbarColor: "rgba(0, 0, 0, 0.25)",
     scrollbarColorHover: "rgba(0, 0, 0, 0.4)",
     scrollbarWidth: "5px",
@@ -14380,6 +14392,18 @@
     brandQuinary300: "#F19EDA",
     brandQuinary600: "#EA3E68",
     brandQuinary100: "#FAD6D9",
+    accentBrand: "#7000FF",
+    accentBrandHover: "#5D46A6",
+    accentError: "#F24835",
+    accentErrorHover: "#A82C1E",
+    accentErrorSubtle: "#FFFFFF",
+    accentNeutral: "#F3F4F6",
+    accentNeutralHover: "#E8EAED",
+    accentFocusRing: "#CDD1D5",
+    accentBorder: "#DDE0E3",
+    accentDisabled: "#DDE0E3",
+    accentDisabledContent: "#B2B8BC",
+    accentPressedOverlay: "rgba(0, 0, 0, 0.12)",
     surfacePrimary: "#fff",
     surfaceSecondary: "#1d1d1d",
     containerPrimary: "#fff",
@@ -14426,7 +14450,7 @@
     boxShadow2: "0px 20px 80px 0px rgba(0, 0, 0, 0.07)"
   };
 
-  function self$1E(vars) {
+  function self$1F(vars) {
     const {
       elementsPrimary
     } = vars;
@@ -14442,13 +14466,13 @@
   const iconLight = {
     name: "Icon",
     common: derived,
-    self: self$1E
+    self: self$1F
   };
 
   const iconDark$1 = {
     name: "Icon",
     common: derived$1,
-    self: self$1E
+    self: self$1F
   };
 
   const FALLBACK_ICON = "&#65533";
@@ -14462,7 +14486,7 @@
         mergedIconPacksRef,
         inlineThemeDisabled
       } = useConfig(props);
-      const themeRef = useTheme("Icon", "-icon", style$1X, iconLight, props, mergedClsPrefixRef);
+      const themeRef = useTheme("Icon", "-icon", style$1Y, iconLight, props, mergedClsPrefixRef);
       const cssVarsRef = vue.computed(() => {
         const {
           depth
@@ -14603,7 +14627,7 @@
     avatarSize: "16px"
   };
 
-  function self$1D(vars) {
+  function self$1E(vars) {
     const {
       heightHuge,
       fontBodyLarge,
@@ -14633,16 +14657,16 @@
   const accountOptionLight = {
     name: "AccountOption",
     common: derived,
-    self: self$1D
+    self: self$1E
   };
 
   const accountOptionDark = {
     name: "AccountOption",
     common: derived$1,
-    self: self$1D
+    self: self$1E
   };
 
-  var style$1W = cB("base-account-option", `
+  var style$1X = cB("base-account-option", `
   display: flex;
   align-items: center;
   position: relative;
@@ -14697,7 +14721,7 @@
       const themeRef = useTheme(
         "AccountOption",
         "-base-account-option",
-        style$1W,
+        style$1X,
         accountOptionLight,
         props,
         mergedClsPrefixRef
@@ -14773,6 +14797,546 @@
     }
   });
 
+  var commonVariables$6 = {
+    heightSmall: "36px",
+    heightMedium: "48px",
+    heightLarge: "56px",
+    paddingSmall: "0 12px",
+    paddingMedium: "0 16px",
+    paddingLarge: "0 24px",
+    borderRadiusSmall: "8px",
+    borderRadiusMedium: "12px",
+    borderRadiusLarge: "16px",
+    iconSizeSmall: "16px",
+    iconSizeMedium: "20px",
+    iconSizeLarge: "24px",
+    iconMargin: "8px",
+    borderWidth: "1px",
+    focusRingWidth: "2px",
+    spinnerStrokeWidth: "3.7px"
+  };
+
+  const TRANSPARENT = "transparent";
+  function self$1D(vars) {
+    const {
+      fontFamilyWixMadeforDisplay,
+      fontBodyMedium,
+      lineHeightBodyMedium,
+      fontWeightStrong,
+      textPrimary,
+      staticBlack,
+      staticWhite,
+      accentBrand,
+      accentBrandHover,
+      accentError,
+      accentErrorHover,
+      accentErrorSubtle,
+      accentNeutral,
+      accentNeutralHover,
+      accentBorder,
+      accentFocusRing,
+      accentDisabled,
+      accentDisabledContent,
+      accentPressedOverlay
+    } = vars;
+    return {
+      ...commonVariables$6,
+      fontFamily: fontFamilyWixMadeforDisplay,
+      fontSize: fontBodyMedium,
+      lineHeight: lineHeightBodyMedium,
+      fontWeight: fontWeightStrong,
+      letterSpacing: "0.1px",
+      pressedOverlayColor: accentPressedOverlay,
+      focusRingColor: accentFocusRing,
+      textColorDisabled: accentDisabledContent,
+      colorPrimary: accentBrand,
+      colorPrimaryHover: accentBrandHover,
+      textColorPrimary: staticWhite,
+      textColorPrimaryHover: staticWhite,
+      borderColorPrimary: TRANSPARENT,
+      colorPrimaryDisabled: accentDisabled,
+      borderColorPrimaryDisabled: TRANSPARENT,
+      colorPrimaryNegative: accentError,
+      colorPrimaryNegativeHover: accentErrorHover,
+      textColorPrimaryNegative: staticWhite,
+      textColorPrimaryNegativeHover: staticWhite,
+      borderColorPrimaryNegative: TRANSPARENT,
+      colorPrimaryNegativeDisabled: accentDisabled,
+      borderColorPrimaryNegativeDisabled: TRANSPARENT,
+      colorSecondary: accentNeutral,
+      colorSecondaryHover: accentNeutralHover,
+      textColorSecondary: staticBlack,
+      textColorSecondaryHover: staticBlack,
+      borderColorSecondary: accentBorder,
+      colorSecondaryDisabled: accentDisabled,
+      borderColorSecondaryDisabled: accentNeutral,
+      colorTertiary: TRANSPARENT,
+      colorTertiaryHover: accentNeutral,
+      textColorTertiary: textPrimary,
+      textColorTertiaryHover: staticBlack,
+      borderColorTertiary: TRANSPARENT,
+      colorTertiaryDisabled: TRANSPARENT,
+      borderColorTertiaryDisabled: TRANSPARENT,
+      colorTertiaryNegative: TRANSPARENT,
+      colorTertiaryNegativeHover: accentErrorSubtle,
+      textColorTertiaryNegative: accentError,
+      textColorTertiaryNegativeHover: accentError,
+      borderColorTertiaryNegative: TRANSPARENT,
+      colorTertiaryNegativeDisabled: TRANSPARENT,
+      borderColorTertiaryNegativeDisabled: TRANSPARENT,
+      colorGhost: TRANSPARENT,
+      colorGhostHover: TRANSPARENT,
+      textColorGhost: accentBrand,
+      textColorGhostHover: accentBrandHover,
+      borderColorGhost: TRANSPARENT,
+      colorGhostDisabled: TRANSPARENT,
+      borderColorGhostDisabled: TRANSPARENT,
+      colorGhostNegative: TRANSPARENT,
+      colorGhostNegativeHover: TRANSPARENT,
+      textColorGhostNegative: accentError,
+      textColorGhostNegativeHover: accentErrorHover,
+      borderColorGhostNegative: TRANSPARENT,
+      colorGhostNegativeDisabled: TRANSPARENT,
+      borderColorGhostNegativeDisabled: TRANSPARENT
+    };
+  }
+  const buttonV3Light = {
+    name: "ButtonV3",
+    common: derived,
+    self: self$1D
+  };
+
+  const buttonV3Dark = {
+    name: "ButtonV3",
+    common: derived$1,
+    self: self$1D
+  };
+
+  const buttonV3Props = {
+    ...useTheme.props,
+    type: {
+      type: String,
+      default: "primary"
+    },
+    tone: {
+      type: String,
+      default: "default"
+    },
+    size: String,
+    iconOnly: Boolean,
+    block: Boolean,
+    disabled: Boolean,
+    loading: Boolean,
+    focusable: {
+      type: Boolean,
+      default: true
+    },
+    tag: {
+      type: String,
+      default: "button"
+    },
+    attrType: {
+      type: String,
+      default: "button"
+    },
+    onClick: [Function, Array]
+  };
+
+  var style$1W = c$1([c$1("@keyframes u-button-v3-spin", `
+    from {
+      transform: rotate(0deg);
+    }
+    to {
+      transform: rotate(360deg);
+    }
+  `), cB("button-v3", `
+    box-sizing: border-box;
+    position: relative;
+    display: inline-flex;
+    flex-wrap: nowrap;
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: center;
+    gap: var(--u-icon-margin);
+    margin: 0;
+    max-width: 100%;
+    height: var(--u-height);
+    padding: var(--u-padding);
+    border: var(--u-border-width) solid var(--u-border-color);
+    border-radius: var(--u-border-radius);
+    background-color: var(--u-color);
+    color: var(--u-text-color);
+    font-family: var(--u-font-family);
+    font-size: var(--u-font-size);
+    line-height: var(--u-line-height);
+    font-weight: var(--u-font-weight);
+    letter-spacing: var(--u-letter-spacing);
+    text-align: center;
+    text-decoration: none;
+    white-space: nowrap;
+    cursor: pointer;
+    outline: none;
+    user-select: none;
+    -webkit-user-select: none;
+    -webkit-tap-highlight-color: transparent;
+    transition:
+      color .3s var(--u-bezier),
+      background-color .3s var(--u-bezier),
+      border-color .3s var(--u-bezier);
+  `, [c$1("&::after", `
+      content: "";
+      position: absolute;
+      inset: calc(var(--u-border-width) * -1);
+      z-index: 0;
+      border-radius: inherit;
+      background-color: var(--u-pressed-overlay-color);
+      opacity: 0;
+      pointer-events: none;
+      transition: opacity .2s var(--u-bezier);
+    `), cE("label", `
+      position: relative;
+      z-index: 1;
+      min-width: 0;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    `), cE("icon", `
+      position: relative;
+      z-index: 1;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      flex: none;
+      width: var(--u-icon-size);
+      height: var(--u-icon-size);
+      font-size: var(--u-icon-size);
+      line-height: 1;
+    `, [c$1("svg", `
+        width: 1em;
+        height: 1em;
+      `)]), cE("spinner", `
+      position: absolute;
+      z-index: 1;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      width: var(--u-icon-size);
+      height: var(--u-icon-size);
+      font-size: var(--u-icon-size);
+      line-height: 1;
+    `), cE("spinner-icon", `
+      display: block;
+      width: 100%;
+      height: 100%;
+      color: currentColor;
+      animation: u-button-v3-spin 1s linear infinite;
+    `), cM("block", `
+      display: flex;
+      width: 100%;
+    `), cM("icon-only", `
+      padding: 0;
+      width: var(--u-height);
+    `), cNotM("disabled", [c$1("&:hover", `
+        background-color: var(--u-color-hover);
+        color: var(--u-text-color-hover);
+      `), c$1("&:focus-visible", `
+        outline: var(--u-focus-ring-width) solid var(--u-focus-ring-color);
+        outline-offset: 0;
+      `), cNotM("loading", [c$1("&:active", `
+          background-color: var(--u-color);
+        `, [c$1("&::after", `
+            opacity: 1;
+          `)])])]), cM("ghost-type", [c$1("&::after", `
+        display: none;
+      `), cNotM("disabled", [c$1("&:focus-visible", `
+          color: var(--u-text-color-hover);
+        `)])]), cM("disabled", `
+      cursor: not-allowed;
+      background-color: var(--u-color-disabled);
+      border-color: var(--u-border-color-disabled);
+      color: var(--u-text-color-disabled);
+    `), cM("loading", `
+      cursor: default;
+    `), cM("loading-text-only", [cE("label", `
+        visibility: hidden;
+      `)])])]);
+
+  const SPINNER_VIEWBOX = 100;
+  const SPINNER_ARC = 0.75;
+  const DEFAULT_SPINNER_STROKE_WIDTH = 18.5;
+  function resolveVariantKey(type, tone) {
+    if (tone !== "negative" || type === "secondary") return type;
+    return `${type}Negative`;
+  }
+  function upperFirst(value) {
+    return value.charAt(0).toUpperCase() + value.slice(1);
+  }
+  function resolveSpinnerStrokeWidth(iconSize, strokeWidth) {
+    const size = Number.parseFloat(iconSize);
+    const stroke = Number.parseFloat(strokeWidth);
+    if (!size || !stroke) return DEFAULT_SPINNER_STROKE_WIDTH;
+    return stroke / size * SPINNER_VIEWBOX;
+  }
+  function renderSpinner(clsPrefix, strokeWidth) {
+    const radius = (SPINNER_VIEWBOX - strokeWidth) / 2;
+    const circumference = 2 * Math.PI * radius;
+    const arc = SPINNER_ARC * circumference;
+    return vue.h("svg", {
+      class: `${clsPrefix}-button-v3__spinner-icon`,
+      viewBox: `0 0 ${SPINNER_VIEWBOX} ${SPINNER_VIEWBOX}`,
+      xmlns: "http://www.w3.org/2000/svg",
+      role: "img",
+      "aria-label": "loading"
+    }, [vue.h("circle", {
+      cx: SPINNER_VIEWBOX / 2,
+      cy: SPINNER_VIEWBOX / 2,
+      r: radius,
+      fill: "none",
+      stroke: "currentColor",
+      "stroke-width": strokeWidth,
+      "stroke-linecap": "round",
+      "stroke-dasharray": `${arc} ${circumference - arc}`
+    })]);
+  }
+  function renderIconSlot(options) {
+    const {
+      clsPrefix,
+      slot,
+      showSpinner,
+      strokeWidth,
+      key
+    } = options;
+    if (!showSpinner && !slot) return null;
+    return vue.h("span", {
+      key,
+      class: `${clsPrefix}-button-v3__icon`
+    }, showSpinner ? [renderSpinner(clsPrefix, strokeWidth)] : slot?.());
+  }
+
+  const ButtonV3$1 = vue.defineComponent({
+    name: "ButtonV3",
+    props: buttonV3Props,
+    slots: Object,
+    setup(props, { attrs }) {
+      {
+        vue.watchEffect(() => {
+          if (props.type === "secondary" && props.tone === "negative") {
+            warnOnce(
+              "button-v3",
+              "\u0423 \u0442\u0438\u043F\u0430 `secondary` \u043D\u0435\u0442 \u0442\u043E\u043D\u0430 `negative` \u2014 \u0438\u0441\u043F\u043E\u043B\u044C\u0437\u0443\u0435\u0442\u0441\u044F \u0442\u043E\u043D `default`."
+            );
+          }
+          if (props.iconOnly && !attrs["aria-label"] && !attrs["aria-labelledby"] && !attrs.title) {
+            warnOnce(
+              "button-v3",
+              "\u041A\u043D\u043E\u043F\u043A\u0435 \u0441 `icon-only` \u043D\u0443\u0436\u0435\u043D `aria-label` (\u0438\u043B\u0438 `title`) \u2014 \u0438\u043D\u0430\u0447\u0435 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0435 \u043D\u0435\u043F\u043E\u043D\u044F\u0442\u043D\u043E."
+            );
+          }
+        });
+      }
+      const selfElRef = vue.ref(null);
+      const { inlineThemeDisabled, mergedClsPrefixRef } = useConfig(props);
+      const themeRef = useTheme(
+        "ButtonV3",
+        "-button-v3",
+        style$1W,
+        buttonV3Light,
+        props,
+        mergedClsPrefixRef
+      );
+      const { mergedSizeRef } = useFormItem(
+        {},
+        {
+          defaultSize: "medium",
+          mergedSize: (UFormItem) => {
+            const { size } = props;
+            if (size)
+              return size;
+            const { mergedSize: formItemSize } = UFormItem || {};
+            if (formItemSize)
+              return formItemSize.value;
+            return "medium";
+          }
+        }
+      );
+      const variantKeyRef = vue.computed(
+        () => resolveVariantKey(props.type, props.tone)
+      );
+      const mergedDisabledRef = vue.computed(() => props.disabled);
+      const inertRef = vue.computed(() => props.disabled || props.loading);
+      const mergedFocusableRef = vue.computed(
+        () => props.focusable && !props.disabled
+      );
+      const spinnerStrokeWidthRef = vue.computed(() => {
+        const { self } = themeRef.value;
+        return resolveSpinnerStrokeWidth(
+          self[createKey("iconSize", mergedSizeRef.value)],
+          self.spinnerStrokeWidth
+        );
+      });
+      const handleClick = (e) => {
+        if (inertRef.value) {
+          e.preventDefault();
+          e.stopPropagation();
+          return;
+        }
+        const { onClick } = props;
+        if (onClick)
+          call(onClick, e);
+      };
+      const cssVarsRef = vue.computed(() => {
+        const {
+          common: { cubicBezierEaseInOut },
+          self
+        } = themeRef.value;
+        const {
+          fontFamily,
+          fontSize,
+          lineHeight,
+          fontWeight,
+          letterSpacing,
+          iconMargin,
+          borderWidth,
+          focusRingWidth,
+          focusRingColor,
+          pressedOverlayColor,
+          textColorDisabled
+        } = self;
+        const size = mergedSizeRef.value;
+        const variant = upperFirst(variantKeyRef.value);
+        const colors = self;
+        return {
+          "--u-bezier": cubicBezierEaseInOut,
+          "--u-height": self[createKey("height", size)],
+          "--u-padding": self[createKey("padding", size)],
+          "--u-border-radius": self[createKey("borderRadius", size)],
+          "--u-icon-size": self[createKey("iconSize", size)],
+          "--u-icon-margin": iconMargin,
+          "--u-font-family": fontFamily,
+          "--u-font-size": fontSize,
+          "--u-line-height": lineHeight,
+          "--u-font-weight": fontWeight,
+          "--u-letter-spacing": letterSpacing,
+          "--u-border-width": borderWidth,
+          "--u-focus-ring-width": focusRingWidth,
+          "--u-focus-ring-color": focusRingColor,
+          "--u-pressed-overlay-color": pressedOverlayColor,
+          "--u-color": colors[`color${variant}`],
+          "--u-color-hover": colors[`color${variant}Hover`],
+          "--u-color-disabled": colors[`color${variant}Disabled`],
+          "--u-text-color": colors[`textColor${variant}`],
+          "--u-text-color-hover": colors[`textColor${variant}Hover`],
+          "--u-text-color-disabled": textColorDisabled,
+          "--u-border-color": colors[`borderColor${variant}`],
+          "--u-border-color-disabled": colors[`borderColor${variant}Disabled`]
+        };
+      });
+      const themeClassHashRef = vue.computed(
+        () => `${variantKeyRef.value}-${mergedSizeRef.value}`
+      );
+      const themeClassHandle = inlineThemeDisabled ? useThemeClass("button-v3", themeClassHashRef, cssVarsRef, props) : void 0;
+      return {
+        selfElRef,
+        mergedClsPrefix: mergedClsPrefixRef,
+        mergedSize: mergedSizeRef,
+        mergedDisabled: mergedDisabledRef,
+        mergedFocusable: mergedFocusableRef,
+        inert: inertRef,
+        spinnerStrokeWidth: spinnerStrokeWidthRef,
+        handleClick,
+        cssVars: inlineThemeDisabled ? void 0 : cssVarsRef,
+        themeClass: themeClassHandle?.themeClass,
+        onRender: themeClassHandle?.onRender
+      };
+    },
+    render() {
+      const {
+        $slots,
+        mergedClsPrefix: clsPrefix,
+        tag: Component,
+        iconOnly,
+        loading,
+        mergedDisabled,
+        inert,
+        spinnerStrokeWidth: strokeWidth,
+        onRender
+      } = this;
+      onRender?.();
+      const iconStartSlot = $slots["icon-start"];
+      const iconEndSlot = $slots["icon-end"];
+      const hasIconStart = !!iconStartSlot;
+      const hasIconEnd = !!iconEndSlot;
+      const centeredSpinner = loading && !iconOnly && !hasIconStart && !hasIconEnd;
+      const children = [];
+      if (iconOnly) {
+        children.push(
+          renderIconSlot({
+            clsPrefix,
+            slot: iconStartSlot || $slots.default,
+            showSpinner: loading,
+            strokeWidth,
+            key: "icon"
+          })
+        );
+      } else {
+        children.push(
+          renderIconSlot({
+            clsPrefix,
+            slot: iconStartSlot,
+            showSpinner: loading && hasIconStart,
+            strokeWidth,
+            key: "icon-start"
+          })
+        );
+        if ($slots.default) {
+          children.push(
+            /* @__PURE__ */ vue.h("span", { class: `${clsPrefix}-button-v3__label` }, $slots.default())
+          );
+        }
+        children.push(
+          renderIconSlot({
+            clsPrefix,
+            slot: iconEndSlot,
+            showSpinner: loading && !hasIconStart && hasIconEnd,
+            strokeWidth,
+            key: "icon-end"
+          })
+        );
+        if (centeredSpinner) {
+          children.push(
+            /* @__PURE__ */ vue.h("span", { class: `${clsPrefix}-button-v3__spinner` }, renderSpinner(clsPrefix, strokeWidth))
+          );
+        }
+      }
+      return /* @__PURE__ */ vue.h(
+        Component,
+        {
+          ref: "selfElRef",
+          class: [
+            `${clsPrefix}-button-v3`,
+            this.themeClass,
+            `${clsPrefix}-button-v3--${this.type}-type`,
+            `${clsPrefix}-button-v3--${this.tone}-tone`,
+            `${clsPrefix}-button-v3--${this.mergedSize}-size`,
+            iconOnly && `${clsPrefix}-button-v3--icon-only`,
+            this.block && `${clsPrefix}-button-v3--block`,
+            mergedDisabled && `${clsPrefix}-button-v3--disabled`,
+            loading && `${clsPrefix}-button-v3--loading`,
+            centeredSpinner && `${clsPrefix}-button-v3--loading-text-only`
+          ],
+          style: this.cssVars,
+          type: Component === "button" ? this.attrType : void 0,
+          disabled: Component === "button" ? mergedDisabled : void 0,
+          tabindex: this.mergedFocusable ? 0 : -1,
+          "aria-disabled": inert ? "true" : void 0,
+          "aria-busy": loading ? "true" : void 0,
+          onClick: this.handleClick
+        },
+        children
+      );
+    }
+  });
+
   const checkboxGroupInjectionKey = createInjectionKey("u-checkbox-group");
   const checkboxBaseProps = {
     size: String,
@@ -15039,7 +15603,7 @@
 
   function replaceable(name, icon) {
     return vue.defineComponent({
-      name: upperFirst(name),
+      name: upperFirst$1(name),
       setup() {
         const mergedIconsRef = vue.inject(
           configProviderInjectionKey,
@@ -16151,7 +16715,7 @@
 
   const {
     cubicBezierEaseInOut: cubicBezierEaseInOut$4
-  } = commonVariables$6;
+  } = commonVariables$7;
   function iconSwitchTransition({
     originalTransform = "",
     left = 0,
@@ -16761,7 +17325,7 @@
 
   const {
     cubicBezierEaseInOut: cubicBezierEaseInOut$3
-  } = commonVariables$6;
+  } = commonVariables$7;
   function fadeInTransition({
     name = "fade-in",
     enterDuration = "0.2s",
@@ -21907,7 +22471,7 @@
 
   const {
     cubicBezierEaseInOut: cubicBezierEaseInOut$2
-  } = commonVariables$6;
+  } = commonVariables$7;
   function fadeInWidthExpandTransition({
     duration = ".2s",
     delay = ".1s"
@@ -22830,7 +23394,7 @@
     cubicBezierEaseInOut: cubicBezierEaseInOut$1,
     cubicBezierEaseOut: cubicBezierEaseOut$6,
     cubicBezierEaseIn: cubicBezierEaseIn$5
-  } = commonVariables$6;
+  } = commonVariables$7;
   function fadeInHeightExpandTransition({
     overflow = "hidden",
     duration = ".3s",
@@ -25017,7 +25581,7 @@
   const {
     cubicBezierEaseIn: cubicBezierEaseIn$4,
     cubicBezierEaseOut: cubicBezierEaseOut$5
-  } = commonVariables$6;
+  } = commonVariables$7;
   function fadeInScaleUpTransition({
     transformOrigin = "inherit",
     duration = ".2s",
@@ -29076,7 +29640,7 @@
 
   const {
     cubicBezierEaseOut: cubicBezierEaseOut$4
-  } = commonVariables$6;
+  } = commonVariables$7;
   function fadeUpWidthExpandTransition({
     duration = ".2s"
   } = {}) {
@@ -34155,6 +34719,24 @@
     }
   });
 
+  const ButtonV3 = vue.defineComponent({
+    name: "ButtonV3",
+    props: buttonV3Props,
+    slots: Object,
+    inheritAttrs: false,
+    setup(props, { slots, attrs }) {
+      return () => vue.h(
+        ButtonV3$1,
+        {
+          ...props,
+          ...attrs
+        },
+        slots
+      );
+    }
+  });
+  const XButtonV3 = ButtonV3;
+
   /**
    * The {@link addDays} function options.
    */
@@ -91270,7 +91852,7 @@
   const {
     cubicBezierEaseIn: cubicBezierEaseIn$3,
     cubicBezierEaseOut: cubicBezierEaseOut$3
-  } = commonVariables$6;
+  } = commonVariables$7;
   function slideInFromBottomTransition({
     duration = "0.3s",
     leaveDuration = "0.2s",
@@ -91294,7 +91876,7 @@
   const {
     cubicBezierEaseIn: cubicBezierEaseIn$2,
     cubicBezierEaseOut: cubicBezierEaseOut$2
-  } = commonVariables$6;
+  } = commonVariables$7;
   function slideInFromLeftTransition({
     duration = "0.3s",
     leaveDuration = "0.2s",
@@ -91318,7 +91900,7 @@
   const {
     cubicBezierEaseIn: cubicBezierEaseIn$1,
     cubicBezierEaseOut: cubicBezierEaseOut$1
-  } = commonVariables$6;
+  } = commonVariables$7;
   function slideInFromRightTransition({
     duration = "0.3s",
     leaveDuration = "0.2s",
@@ -91342,7 +91924,7 @@
   const {
     cubicBezierEaseIn,
     cubicBezierEaseOut
-  } = commonVariables$6;
+  } = commonVariables$7;
   function slideInFromTopTransition({
     duration = "0.3s",
     leaveDuration = "0.2s",
@@ -94918,7 +95500,7 @@
 
   const {
     cubicBezierEaseInOut
-  } = commonVariables$6;
+  } = commonVariables$7;
   function fadeDownTransition({
     name = "fade-down",
     fromOffset = "-4px",
@@ -123058,6 +123640,8 @@ ${icon.label}`.toLowerCase()
   const UButton = /* @__PURE__ */wrap(Button);
   const UxButton = /* @__PURE__ */wrap(XButton);
   const UButtonGroup = /* @__PURE__ */wrap(_UButtonGroup);
+  const UButtonV3 = /* @__PURE__ */wrap(ButtonV3);
+  const UxButtonV3 = /* @__PURE__ */wrap(XButtonV3);
   const UCalendar = /* @__PURE__ */wrap(_UCalendar);
   const UCard = /* @__PURE__ */wrap(_UCard);
   const UCardList = /* @__PURE__ */wrap(_UCardList);
@@ -123251,6 +123835,7 @@ ${icon.label}`.toLowerCase()
     UBreadcrumbItem: UBreadcrumbItem,
     UButton: UButton,
     UButtonGroup: UButtonGroup,
+    UButtonV3: UButtonV3,
     UCalendar: UCalendar,
     UCard: UCard,
     UCardList: UCardList,
@@ -123420,6 +124005,7 @@ ${icon.label}`.toLowerCase()
     UVirtualList: UVirtualList,
     UWatermark: UWatermark,
     UxButton: UxButton,
+    UxButtonV3: UxButtonV3,
     aProps: aProps,
     actionCardDark: actionCardDark,
     actionCardLight: actionCardLight,
@@ -123437,6 +124023,9 @@ ${icon.label}`.toLowerCase()
     breadcrumbProps: breadcrumbProps,
     buttonGroupProps: buttonGroupProps,
     buttonProps: buttonProps,
+    buttonV3Dark: buttonV3Dark,
+    buttonV3Light: buttonV3Light,
+    buttonV3Props: buttonV3Props,
     calendarProps: calendarProps,
     cardListProps: cardListProps,
     cardProps: cardProps,
@@ -123636,7 +124225,7 @@ ${icon.label}`.toLowerCase()
     });
   }
 
-  var version = "2.3.8";
+  var version = "3.0.0-alpha.0";
 
   function create({
     componentPrefix = "U",
@@ -123706,6 +124295,7 @@ ${icon.label}`.toLowerCase()
     Breadcrumb: breadcrumbLight,
     Button: buttonLight,
     ButtonGroup: buttonGroupLight,
+    ButtonV3: buttonV3Light,
     Calendar: calendarLight,
     Card: cardLight,
     CardList: cardListLight,
@@ -124331,6 +124921,7 @@ ${icon.label}`.toLowerCase()
     Breadcrumb: breadcrumbDark,
     Button: buttonDark,
     ButtonGroup: buttonGroupDark,
+    ButtonV3: buttonV3Dark,
     Calendar: calendarDark,
     Card: cardDark$1,
     CardList: cardDark,
@@ -124466,6 +125057,7 @@ ${icon.label}`.toLowerCase()
   exports.UBreadcrumbItem = UBreadcrumbItem;
   exports.UButton = UButton;
   exports.UButtonGroup = UButtonGroup;
+  exports.UButtonV3 = UButtonV3;
   exports.UCalendar = UCalendar;
   exports.UCard = UCard;
   exports.UCardList = UCardList;
@@ -124636,6 +125228,7 @@ ${icon.label}`.toLowerCase()
   exports.UVirtualList = UVirtualList;
   exports.UWatermark = UWatermark;
   exports.UxButton = UxButton;
+  exports.UxButtonV3 = UxButtonV3;
   exports.UzumUiResolver = UzumUiResolver;
   exports.aProps = aProps;
   exports.actionCardDark = actionCardDark;
@@ -124663,6 +125256,9 @@ ${icon.label}`.toLowerCase()
   exports.buttonGroupDark = buttonGroupDark;
   exports.buttonGroupProps = buttonGroupProps;
   exports.buttonProps = buttonProps;
+  exports.buttonV3Dark = buttonV3Dark;
+  exports.buttonV3Light = buttonV3Light;
+  exports.buttonV3Props = buttonV3Props;
   exports.c = c$1;
   exports.cB = cB;
   exports.cE = cE;