@underverse-ui/underverse 1.0.199 → 1.0.200

package/dist/index.js

@@ -13,6 +13,39 @@ var __export = (target, all) => {
 // src/components/Button.tsx
 import { forwardRef, useCallback, useRef, useState } from "react";
 
+// src/constants/form-control-size.ts
+var formControlSizeStyles = {
+  sm: {
+    control: "h-8 px-3 text-sm leading-none md:h-7 md:text-xs",
+    compactControl: "h-8 px-2.5 text-sm leading-none md:h-7 md:text-xs",
+    input: "h-8 px-3 text-sm leading-none md:h-7 md:text-xs",
+    label: "text-xs",
+    icon: "h-4 w-4 md:h-3.5 md:w-3.5",
+    iconButton: "h-7 w-7 md:h-6 md:w-6",
+    tag: "h-5 max-w-24 px-2 text-[10px] leading-none"
+  },
+  md: {
+    control: "h-10 px-3 text-sm leading-none",
+    compactControl: "h-10 px-3 text-sm leading-none",
+    input: "h-10 px-4 text-sm leading-none",
+    label: "text-sm",
+    icon: "h-4 w-4",
+    iconButton: "h-8 w-8",
+    tag: "h-6 max-w-28 px-2 text-xs leading-none"
+  },
+  lg: {
+    control: "h-12 px-4 text-base leading-none",
+    compactControl: "h-12 px-4 text-base leading-none",
+    input: "h-12 px-5 text-base leading-none",
+    label: "text-base",
+    icon: "h-5 w-5",
+    iconButton: "h-10 w-10",
+    tag: "h-7 max-w-32 px-2.5 text-sm leading-none"
+  }
+};
+var formControlFixedClass = "min-h-0 overflow-hidden";
+var formControlValueClass = "max-h-full min-w-0 flex-1 truncate whitespace-nowrap";
+
 // src/constants/button.ts
 var VARIANT_STYLES_BTN = {
   // Mặc định: tối giản, rõ ràng, dùng tokens hệ màu
@@ -36,10 +69,10 @@ var VARIANT_STYLES_BTN = {
   gradient: "bg-linear-to-r from-primary via-primary/80 to-secondary text-primary-foreground hover:opacity-90 shadow-md border-0"
 };
 var SIZE_STYLES_BTN = {
-  sm: "px-3 py-1.5 text-sm h-8 min-w-8 md:px-2.5 md:py-1 md:h-7 md:text-xs",
-  md: "px-4 py-2 text-sm h-10 min-w-10 md:px-3 md:py-1.5 md:h-9",
-  lg: "px-6 py-3 text-base h-12 min-w-12 md:px-4 md:py-2 md:h-10 md:text-sm",
-  smx: "px-3.5 py-1.5 text-[13px] h-9 min-w-9 md:px-3 md:py-1 md:h-8 md:text-xs",
+  sm: `${formControlSizeStyles.sm.control} min-w-8`,
+  md: `${formControlSizeStyles.md.input} min-w-10`,
+  lg: `${formControlSizeStyles.lg.input} min-w-12`,
+  smx: "h-9 min-w-9 px-3.5 text-[13px] leading-none md:h-8 md:text-xs",
   icon: "w-11 h-11 p-0 rounded-full flex items-center justify-center md:w-10 md:h-10"
 };
 
@@ -124,6 +157,7 @@ var Button = forwardRef(
     const finalVariant = gradient ? "gradient" : variant;
     const variantStyle = VARIANT_STYLES_BTN[finalVariant] || VARIANT_STYLES_BTN.default;
     const sizeStyle = SIZE_STYLES_BTN[size] || SIZE_STYLES_BTN.md;
+    const iconSizeStyle = size === "sm" ? formControlSizeStyles.sm.icon : size === "lg" || size === "icon" ? formControlSizeStyles.lg.icon : formControlSizeStyles.md.icon;
     const globalConfig = useUnderverseUIConfig();
     const resolvedBorderMode = borderMode ?? globalConfig.button?.borderMode ?? "full";
     const SpinnerIcon = Spinner ?? Activity;
@@ -188,13 +222,13 @@ var Button = forwardRef(
         children: [
           !noHoverOverlay ? /* @__PURE__ */ jsx2("span", { className: "absolute inset-0 bg-linear-to-r from-primary-foreground/20 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-200 dark:hidden" }) : null,
           loading2 ? /* @__PURE__ */ jsxs(Fragment2, { children: [
-            /* @__PURE__ */ jsx2(SpinnerIcon, { className: "w-4 h-4 animate-spin", "aria-hidden": "true" }),
+            /* @__PURE__ */ jsx2(SpinnerIcon, { className: cn(iconSizeStyle, "shrink-0 animate-spin"), "aria-hidden": "true" }),
             loadingText ? /* @__PURE__ */ jsx2("span", { className: "ml-2", "aria-live": "polite", children: loadingText }) : null,
             preserveChildrenOnLoading && !loadingText ? /* @__PURE__ */ jsx2("span", { className: "ml-2 opacity-70", "aria-hidden": true, children }) : null
           ] }) : /* @__PURE__ */ jsxs(Fragment2, { children: [
-            Icon ? /* @__PURE__ */ jsx2(Icon, { className: cn("transition-transform duration-200", iConClassName ? iConClassName : "w-5 h-5") }) : null,
+            Icon ? /* @__PURE__ */ jsx2(Icon, { className: cn("shrink-0 transition-transform duration-200", iConClassName ? iConClassName : iconSizeStyle) }) : null,
             children,
-            IconRight ? /* @__PURE__ */ jsx2(IconRight, { className: "w-4 h-4 transition-transform duration-200" }) : null
+            IconRight ? /* @__PURE__ */ jsx2(IconRight, { className: cn(iconSizeStyle, "shrink-0 transition-transform duration-200") }) : null
           ] })
         ]
       }
@@ -2915,39 +2949,6 @@ function useOverlayScrollbarTarget(targetRef, options = {}) {
 }
 var OverlayScrollbarProvider_default = OverlayScrollbarProvider;
 
-// src/components/form-control-size.ts
-var formControlSizeStyles = {
-  sm: {
-    control: "h-8 px-3 text-sm leading-none md:h-7 md:text-xs",
-    compactControl: "h-8 px-2.5 text-sm leading-none md:h-7 md:text-xs",
-    input: "h-8 px-3 text-sm leading-none md:h-7 md:text-xs",
-    label: "text-xs",
-    icon: "h-4 w-4 md:h-3.5 md:w-3.5",
-    iconButton: "h-7 w-7 md:h-6 md:w-6",
-    tag: "h-5 max-w-24 px-2 text-[10px] leading-none"
-  },
-  md: {
-    control: "h-10 px-3 text-sm leading-none",
-    compactControl: "h-10 px-3 text-sm leading-none",
-    input: "h-10 px-4 text-sm leading-none",
-    label: "text-sm",
-    icon: "h-4 w-4",
-    iconButton: "h-8 w-8",
-    tag: "h-6 max-w-28 px-2 text-xs leading-none"
-  },
-  lg: {
-    control: "h-12 px-4 text-base leading-none",
-    compactControl: "h-12 px-4 text-base leading-none",
-    input: "h-12 px-5 text-base leading-none",
-    label: "text-base",
-    icon: "h-5 w-5",
-    iconButton: "h-10 w-10",
-    tag: "h-7 max-w-32 px-2.5 text-sm leading-none"
-  }
-};
-var formControlFixedClass = "min-h-0 overflow-hidden";
-var formControlValueClass = "max-h-full min-w-0 flex-1 truncate whitespace-nowrap";
-
 // src/components/Input.tsx
 import { jsx as jsx11, jsxs as jsxs5 } from "react/jsx-runtime";
 var Input = forwardRef3(
@@ -33835,7 +33836,7 @@ var EditorToolbar = ({
     "div",
     {
       role: "toolbar",
-      className: "flex min-h-[60px] flex-nowrap items-center gap-1 overflow-x-auto border-b border-[rgba(196,197,213,0.6)] bg-[#F4F4F4] px-3 py-3 dark:bg-muted/60",
+      className: "flex min-h-15 flex-nowrap items-center gap-1 overflow-x-auto border-b border-[rgba(196,197,213,0.6)] bg-[#F4F4F4] px-3 py-3 dark:bg-muted/60",
       children: [
         isFull && /* @__PURE__ */ jsx93(
           DropdownMenu,
@@ -33846,7 +33847,7 @@ var EditorToolbar = ({
                 onClick: () => {
                 },
                 title: t("toolbar.fontFamily"),
-                className: "h-9 w-[200px] max-w-[200px] justify-between gap-3 rounded-lg border border-[rgba(196,197,213,0.6)] bg-white px-3 text-[#404040] shadow-[0_1px_2px_rgba(0,0,0,0.07)] hover:bg-white hover:text-[#404040] dark:bg-background dark:text-foreground",
+                className: "h-9 w-50 max-w-50 justify-between gap-3 rounded-lg border border-[rgba(196,197,213,0.6)] bg-white px-3 text-[#404040] shadow-[0_1px_2px_rgba(0,0,0,0.07)] hover:bg-white hover:text-[#404040] dark:bg-background dark:text-foreground",
                 children: [
                   /* @__PURE__ */ jsx93("span", { className: "min-w-0 flex-1 truncate text-left text-sm font-normal", style: { fontFamily: displayedFontFamilyValue || void 0 }, children: displayedFontFamilyLabel }),
                   /* @__PURE__ */ jsx93(FigmaChevronDownIcon, { className: "h-3 w-3 shrink-0 text-[#7B8184]" })