@bubo-squared/ui-framework 0.1.96 → 0.1.98

package/dist/index.cjs

@@ -1129,8 +1129,10 @@ var dropdownTriggerVariants = (0, import_class_variance_authority12.cva)(
   {
     variants: {
       size: {
-        large: "h-11",
-        "extra-large": "h-14"
+        sm: "h-8 py-1",
+        md: "h-10 py-2",
+        lg: "h-11",
+        xl: "h-14"
       },
       status: {
         default: "border-(--border-secondary)",
@@ -1139,7 +1141,7 @@ var dropdownTriggerVariants = (0, import_class_variance_authority12.cva)(
       }
     },
     defaultVariants: {
-      size: "large",
+      size: "lg",
       status: "default"
     }
   }
@@ -1147,8 +1149,10 @@ var dropdownTriggerVariants = (0, import_class_variance_authority12.cva)(
 var dropdownTextVariants = (0, import_class_variance_authority12.cva)("truncate", {
   variants: {
     size: {
-      large: "subtitle",
-      "extra-large": "h6-title"
+      sm: "paragraph-m",
+      md: "paragraph-l",
+      lg: "subtitle",
+      xl: "h6-title"
     },
     hasValue: {
       false: "text-(--color-secondary)",
@@ -1159,15 +1163,17 @@ var dropdownTextVariants = (0, import_class_variance_authority12.cva)("truncate"
     }
   },
   defaultVariants: {
-    size: "large",
+    size: "lg",
     hasValue: false
   }
 });
 var dropdownIconVariants = (0, import_class_variance_authority12.cva)("flex items-center justify-center shrink-0", {
   variants: {
     size: {
-      large: "w-5 h-5",
-      "extra-large": "w-6 h-6"
+      sm: "w-4 h-4",
+      md: "w-5 h-5",
+      lg: "w-5 h-5",
+      xl: "w-6 h-6"
     },
     disabled: {
       false: "text-(--icon-primary)",
@@ -1175,7 +1181,7 @@ var dropdownIconVariants = (0, import_class_variance_authority12.cva)("flex item
     }
   },
   defaultVariants: {
-    size: "large",
+    size: "lg",
     disabled: false
   }
 });
@@ -1186,7 +1192,7 @@ var Dropdown = (props) => {
     hint = "This is a hint text to help user.",
     hideHint = false,
     placeholder = "Placeholder text",
-    size = "large",
+    size = "lg",
     status = "default",
     disabled,
     options,
@@ -1415,8 +1421,10 @@ var inputShellVariants = (0, import_class_variance_authority13.cva)(
   {
     variants: {
       size: {
-        large: "gap-2 px-2 py-2 h-11",
-        "extra-large": "gap-2 px-[10px] py-2 h-14"
+        sm: "gap-2 px-2 py-1 h-8",
+        md: "gap-2 px-2 py-2 h-10",
+        lg: "gap-2 px-2 py-2 h-11",
+        xl: "gap-2 px-[10px] py-2 h-14"
       },
       status: {
         default: "input-default",
@@ -1428,7 +1436,7 @@ var inputShellVariants = (0, import_class_variance_authority13.cva)(
       }
     },
     defaultVariants: {
-      size: "large",
+      size: "lg",
       status: "default"
     }
   }
@@ -1456,8 +1464,10 @@ var import_jsx_runtime22 = require("react/jsx-runtime");
 var passwordTextVariants = (0, import_class_variance_authority14.cva)("truncate", {
   variants: {
     size: {
-      large: "subtitle",
-      "extra-large": "h6-title"
+      sm: "paragraph-m",
+      md: "paragraph-l",
+      lg: "subtitle",
+      xl: "h6-title"
     },
     disabled: {
       true: "text-primary-disabled",
@@ -1465,7 +1475,7 @@ var passwordTextVariants = (0, import_class_variance_authority14.cva)("truncate"
     }
   },
   defaultVariants: {
-    size: "large",
+    size: "lg",
     disabled: false
   }
 });
@@ -1474,15 +1484,17 @@ var iconWrapperVariants = (0, import_class_variance_authority14.cva)(
   {
     variants: {
       size: {
-        large: "size-5 [&>svg]:size-5",
-        "extra-large": "size-6 [&>svg]:size-6"
+        sm: "size-4 [&>svg]:size-4",
+        md: "size-5 [&>svg]:size-5",
+        lg: "size-5 [&>svg]:size-5",
+        xl: "size-6 [&>svg]:size-6"
       },
       disabled: {
         true: "text-(--icon-primary-disabled)"
       }
     },
     defaultVariants: {
-      size: "large"
+      size: "lg"
     }
   }
 );
@@ -1491,15 +1503,17 @@ var actionButtonVariants = (0, import_class_variance_authority14.cva)(
   {
     variants: {
       size: {
-        large: "paragraph-s",
-        "extra-large": "paragraph-m"
+        sm: "paragraph-s",
+        md: "paragraph-s",
+        lg: "paragraph-s",
+        xl: "paragraph-m"
       },
       disabled: {
         true: "cursor-default text-primary-disabled hover:text-primary-disabled"
       }
     },
     defaultVariants: {
-      size: "large"
+      size: "lg"
     }
   }
 );
@@ -1509,7 +1523,7 @@ var PasswordInput = (props) => {
     hint,
     hideHint,
     placeholder = "\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022",
-    size = "large",
+    size = "lg",
     status = "default",
     variant = "icons",
     disabled,
@@ -1889,8 +1903,10 @@ var sizeBase = (0, import_class_variance_authority16.cva)(
   {
     variants: {
       size: {
-        large: "h-11 [&_button]:gap-2",
-        "extra-large": "h-14 [&_button]:gap-3"
+        sm: "h-8 [&_button]:gap-2",
+        md: "h-10 [&_button]:gap-2",
+        lg: "h-11 [&_button]:gap-2",
+        xl: "h-14 [&_button]:gap-3"
       }
     }
   }
@@ -1898,15 +1914,17 @@ var sizeBase = (0, import_class_variance_authority16.cva)(
 var inputTextVariants = (0, import_class_variance_authority16.cva)("", {
   variants: {
     size: {
-      large: "subtitle",
-      "extra-large": "h6-title"
+      sm: "paragraph-m",
+      md: "paragraph-l",
+      lg: "subtitle",
+      xl: "h6-title"
     },
     disabled: {
       true: "text-primary-disabled border-(--border-secondary-disabled)"
     }
   },
   defaultVariants: {
-    size: "large"
+    size: "lg"
   }
 });
 var wrapperStatusClass = {
@@ -1924,7 +1942,7 @@ var PhoneInput = React26.forwardRef(
       hint,
       hideHint,
       placeholder,
-      size = "large",
+      size = "lg",
       disabled = false,
       status = "default",
       ...rest
@@ -2253,32 +2271,36 @@ var import_jsx_runtime30 = require("react/jsx-runtime");
 var searchTextVariants = (0, import_class_variance_authority17.cva)("truncate", {
   variants: {
     size: {
-      large: "subtitle",
-      "extra-large": "h6-title"
+      sm: "paragraph-m",
+      md: "paragraph-l",
+      lg: "subtitle",
+      xl: "h6-title"
     }
   },
   defaultVariants: {
-    size: "large"
+    size: "lg"
   }
 });
 var iconWrapperVariants2 = (0, import_class_variance_authority17.cva)("flex items-center justify-center shrink-0 text-(--icon-primary)", {
   variants: {
     size: {
-      large: "size-5 [&>svg]:size-5",
-      "extra-large": "size-6 [&>svg]:size-6"
+      sm: "size-4 [&>svg]:size-4",
+      md: "size-5 [&>svg]:size-5",
+      lg: "size-5 [&>svg]:size-5",
+      xl: "size-6 [&>svg]:size-6"
     },
     disabled: {
       true: "text-(--icon-primary-disabled)"
     }
   },
   defaultVariants: {
-    size: "large"
+    size: "lg"
   }
 });
 var SearchInput = (props) => {
   const {
     placeholder = "Search...",
-    size = "large",
+    size = "lg",
     disabled,
     className,
     leadingIcon,
@@ -2327,10 +2349,16 @@ SearchInput.displayName = "SearchInput";
 var React29 = __toESM(require("react"), 1);
 var import_jsx_runtime31 = require("react/jsx-runtime");
 var wrapperBase2 = "flex flex-col gap-2 items-start";
+var isRangeProps = (props) => {
+  return Array.isArray(props.value) || Array.isArray(props.defaultValue);
+};
+var toArray = (value) => {
+  if (value === void 0) return void 0;
+  return Array.isArray(value) ? value : [value];
+};
 var Slider = (props) => {
   const {
     display = "flat",
-    type = "single",
     tooltipPlacement = "top",
     tooltipFormatter,
     showPercentage = true,
@@ -2340,11 +2368,11 @@ var Slider = (props) => {
     disabled = false,
     value,
     defaultValue,
-    onValueChange,
     className
   } = props;
+  const isRange = isRangeProps(props);
   const isControlled = value !== void 0;
-  const expectedLength = type === "multi" ? 2 : 1;
+  const expectedLength = isRange ? 2 : 1;
   const normalizeArray = React29.useCallback(
     (arr, fallback) => {
       if (!arr || arr.length === 0) return fallback;
@@ -2358,22 +2386,25 @@ var Slider = (props) => {
     [expectedLength, max]
   );
   const defaultInternal = React29.useMemo(() => {
-    if (defaultValue) return normalizeArray(defaultValue, []);
-    if (type === "multi") return [min, Math.min(min + (max - min) / 4, max)];
+    const defaultValueArray = toArray(defaultValue);
+    if (defaultValueArray) return normalizeArray(defaultValueArray, []);
+    if (isRange) return [min, Math.min(min + (max - min) / 4, max)];
     return [min + (max - min) / 3];
-  }, [defaultValue, min, max, type, normalizeArray]);
+  }, [defaultValue, min, max, isRange, normalizeArray]);
   const [internalValue, setInternalValue] = React29.useState(
-    () => normalizeArray(isControlled ? value : defaultInternal, defaultInternal)
+    () => normalizeArray(isControlled ? toArray(value) : defaultInternal, defaultInternal)
   );
   React29.useEffect(() => {
     if (isControlled) {
       setInternalValue(
-        (current2) => normalizeArray(value, current2.length ? current2 : defaultInternal)
+        (current2) => normalizeArray(toArray(value), current2.length ? current2 : defaultInternal)
       );
     }
   }, [isControlled, value, normalizeArray, defaultInternal]);
   const current = internalValue;
   const trackRef = React29.useRef(null);
+  const [draggingThumbIndex, setDraggingThumbIndex] = React29.useState(null);
+  const [hoveredThumbIndex, setHoveredThumbIndex] = React29.useState(null);
   const clamp = (val) => {
     if (val < min) return min;
     if (val > max) return max;
@@ -2383,13 +2414,13 @@ var Slider = (props) => {
     if (!isControlled) {
       setInternalValue((prev) => {
         const clamped = prev.map((v) => clamp(v));
-        if (type === "multi" && clamped.length === 2 && step > 0) {
+        if (isRange && clamped.length === 2 && step > 0) {
           return enforceMinGap(clamped, prev);
         }
         return clamped;
       });
     }
-  }, [isControlled, min, max]);
+  }, [isControlled, min, max, isRange]);
   const snap = (val) => {
     const range = max - min;
     if (range <= 0 || step <= 0) return clamp(val);
@@ -2397,7 +2428,7 @@ var Slider = (props) => {
     return clamp(min + stepsFromMin * step);
   };
   const enforceMinGap = (next, prev) => {
-    if (type !== "multi" || next.length !== 2 || step <= 0) return next;
+    if (!isRange || next.length !== 2 || step <= 0) return next;
     let [low, high] = next;
     const [prevLow, prevHigh] = prev.length === 2 ? prev : next;
     if (low > high) {
@@ -2422,13 +2453,17 @@ var Slider = (props) => {
   };
   const updateValue = (next) => {
     let normalized = normalizeArray(next, current);
-    if (type === "multi" && normalized.length === 2) {
+    if (isRange && normalized.length === 2) {
       normalized = enforceMinGap(normalized, current);
     }
     if (!isControlled) {
       setInternalValue(normalized);
     }
-    onValueChange?.(normalized);
+    if (isRangeProps(props)) {
+      props.onValueChange?.([normalized[0] ?? min, normalized[1] ?? max]);
+    } else {
+      props.onValueChange?.(normalized[0] ?? min);
+    }
   };
   const getSnappedValueFromClientX = (clientX, track) => {
     const rect = track.getBoundingClientRect();
@@ -2441,10 +2476,11 @@ var Slider = (props) => {
     if (disabled) return;
     const track = trackRef.current;
     if (!track) return;
+    setDraggingThumbIndex(thumbIndex);
     const handlePointerMove = (event) => {
       if (disabled) return;
       const snapped = getSnappedValueFromClientX(event.clientX, track);
-      if (type === "multi" && current.length === 2) {
+      if (isRange && current.length === 2) {
         const [a, b] = current;
         if (thumbIndex === 0) {
           updateValue([snapped, b]);
@@ -2458,9 +2494,11 @@ var Slider = (props) => {
     const handlePointerUp = () => {
       window.removeEventListener("pointermove", handlePointerMove);
       window.removeEventListener("pointerup", handlePointerUp);
+      window.removeEventListener("pointercancel", handlePointerUp);
+      setDraggingThumbIndex(null);
     };
     const initialSnapped = getSnappedValueFromClientX(clientX, track);
-    if (type === "multi" && current.length === 2) {
+    if (isRange && current.length === 2) {
       const [a, b] = current;
       if (thumbIndex === 0) {
         updateValue([initialSnapped, b]);
@@ -2472,6 +2510,7 @@ var Slider = (props) => {
     }
     window.addEventListener("pointermove", handlePointerMove);
     window.addEventListener("pointerup", handlePointerUp);
+    window.addEventListener("pointercancel", handlePointerUp);
   };
   const handleTrackPointerDown = (event) => {
     if (disabled) return;
@@ -2480,7 +2519,7 @@ var Slider = (props) => {
     if (!track) return;
     const snapped = getSnappedValueFromClientX(event.clientX, track);
     let thumbIndex = 0;
-    if (type === "multi" && current.length === 2) {
+    if (isRange && current.length === 2) {
       const [a, b] = current;
       const distToA = Math.abs(snapped - a);
       const distToB = Math.abs(snapped - b);
@@ -2518,7 +2557,7 @@ var Slider = (props) => {
       event.preventDefault();
     }
   };
-  const [primary, secondary] = type === "multi" && current.length === 2 ? [current[0], current[1]] : [current[0], void 0];
+  const [primary, secondary] = isRange && current.length === 2 ? [current[0], current[1]] : [current[0], void 0];
   const valueToPercent = (val) => {
     if (val === void 0) return 0;
     if (max === min) return 0;
@@ -2551,7 +2590,7 @@ var Slider = (props) => {
     return formatNumber(value2);
   };
   const formatNumericLabel = () => {
-    if (type === "multi" && secondary !== void 0) {
+    if (isRange && secondary !== void 0) {
       if (!tooltipFormatter && showPercentage && display === "numeric") {
         const first = formatNumber(valueToPercent(primary));
         const second = formatNumber(valueToPercent(secondary));
@@ -2564,10 +2603,14 @@ var Slider = (props) => {
   const trackHeight = 32;
   const thumbWidth = 18;
   const thumbRadius = thumbWidth / 2;
-  const renderTooltipBubble = (key, percent, labelText) => /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+  const renderTooltipBubble = (key, percent, labelText, isVisible) => /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
     "div",
     {
-      className: "absolute -translate-x-1/2 flex flex-col items-center",
+      className: cn(
+        "absolute -translate-x-1/2 flex flex-col items-center",
+        "transition-[opacity,transform] duration-150",
+        isVisible ? "opacity-100 scale-100 pointer-events-auto" : "opacity-0 scale-95 pointer-events-none"
+      ),
       style: {
         left: `${percent}%`,
         bottom: isTooltipAbove ? "100%" : void 0,
@@ -2578,17 +2621,14 @@ var Slider = (props) => {
       children: /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
         "div",
         {
-          className: cn(
-            "relative rounded-4 shadow-card-md px-(--space-8) py-(--space-4)",
-            disabled ? "bg-(--background-primary-disabled)" : "bg-(--background-neutral)"
-          ),
+          className: cn("relative rounded-4 shadow-card-md px-(--space-8) py-(--space-4) bg-(--background-tooltip)"),
           children: [
             /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
               "p",
               {
                 className: cn(
                   "paragraph-s",
-                  disabled ? "text-primary-disabled" : "text-primary"
+                  disabled ? "text-secondary" : "text-primary"
                 ),
                 children: labelText
               }
@@ -2597,8 +2637,7 @@ var Slider = (props) => {
               "div",
               {
                 className: cn(
-                  "absolute left-1/2 -translate-x-1/2 w-2 h-2 rotate-45",
-                  disabled ? "bg-(--background-primary-disabled)" : "bg-(--background-neutral)",
+                  "absolute left-1/2 -translate-x-1/2 w-2 h-2 rotate-45 bg-(--background-tooltip)",
                   isTooltipAbove ? "-bottom-1" : "-top-1"
                 )
               }
@@ -2611,6 +2650,7 @@ var Slider = (props) => {
   );
   const renderHandle = (index, percent, ariaValueText) => {
     const val = index === 0 ? primary : secondary;
+    const isDragging = draggingThumbIndex === index;
     return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
       "button",
       {
@@ -2624,12 +2664,21 @@ var Slider = (props) => {
         tabIndex: disabled ? -1 : 0,
         className: cn(
           "absolute -translate-x-1/2 flex items-center justify-center",
-          "h-8 w-[18px] rounded-4",
+          "h-8 w-4.5 rounded-4",
+          "transition-shadow duration-150",
+          !disabled && (isDragging ? "shadow-[0_0_0_12px_var(--slider-halo-color)]" : "hover:shadow-[0_0_0_8px_var(--slider-halo-color)]"),
           disabled ? "bg-(--icon-primary-disabled) cursor-default" : "bg-(--icon-primary-hover) outline-none focus-visible:shadow-[0_0_0_var(--focus-ring-spread)_var(--focus-primary)] cursor-pointer"
         ),
         style: {
           left: `${percent}%`,
-          top: `calc(50% - ${trackHeight / 2}px)`
+          top: `calc(50% - ${trackHeight / 2}px)`,
+          ["--slider-halo-color"]: "color-mix(in srgb, var(--color-brand) 10%, transparent)"
+        },
+        onPointerEnter: () => {
+          setHoveredThumbIndex(index);
+        },
+        onPointerLeave: () => {
+          setHoveredThumbIndex((prev) => prev === index ? null : prev);
         },
         onPointerDown: (event) => {
           if (disabled) return;
@@ -2644,8 +2693,18 @@ var Slider = (props) => {
   };
   return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: wrapperBase2, children: /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: cn("w-full flex flex-col gap-1", className), children: [
     /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "relative w-full", children: [
-      showTooltip && primary !== void 0 && renderTooltipBubble("primary", primaryPercent, formatDisplayValue(primary)),
-      showTooltip && type === "multi" && secondary !== void 0 && renderTooltipBubble("secondary", secondaryPercent, formatDisplayValue(secondary)),
+      showTooltip && primary !== void 0 && renderTooltipBubble(
+        "primary",
+        primaryPercent,
+        formatDisplayValue(primary),
+        hoveredThumbIndex === 0 || draggingThumbIndex === 0
+      ),
+      showTooltip && isRange && secondary !== void 0 && renderTooltipBubble(
+        "secondary",
+        secondaryPercent,
+        formatDisplayValue(secondary),
+        hoveredThumbIndex === 1 || draggingThumbIndex === 1
+      ),
       /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
         "div",
         {
@@ -2671,7 +2730,7 @@ var Slider = (props) => {
               }
             ),
             renderHandle(0, primaryPercent, formatDisplayValue(primary)),
-            type === "multi" && secondary !== void 0 && renderHandle(1, secondaryPercent, formatDisplayValue(secondary))
+            isRange && secondary !== void 0 && renderHandle(1, secondaryPercent, formatDisplayValue(secondary))
           ]
         }
       )
@@ -2881,12 +2940,14 @@ var import_jsx_runtime33 = require("react/jsx-runtime");
 var inputTextVariants2 = (0, import_class_variance_authority18.cva)("truncate", {
   variants: {
     size: {
-      large: "subtitle",
-      "extra-large": "h6-title"
+      sm: "paragraph-m",
+      md: "paragraph-l",
+      lg: "subtitle",
+      xl: "h6-title"
     }
   },
   defaultVariants: {
-    size: "large"
+    size: "lg"
   }
 });
 var iconWrapperVariants3 = (0, import_class_variance_authority18.cva)(
@@ -2894,15 +2955,17 @@ var iconWrapperVariants3 = (0, import_class_variance_authority18.cva)(
   {
     variants: {
       size: {
-        large: "size-5 [&>svg]:size-5",
-        "extra-large": "size-6 [&>svg]:size-6"
+        sm: "size-4 [&>svg]:size-4",
+        md: "size-5 [&>svg]:size-5",
+        lg: "size-5 [&>svg]:size-5",
+        xl: "size-6 [&>svg]:size-6"
       },
       disabled: {
         true: "text-(--icon-primary-disabled)"
       }
     },
     defaultVariants: {
-      size: "large"
+      size: "lg"
     }
   }
 );
@@ -2912,7 +2975,7 @@ var TextInput = (props) => {
     hint,
     hideHint,
     placeholder = "Placeholder text",
-    size = "large",
+    size = "lg",
     status = "default",
     disabled = false,
     className,
@@ -3101,21 +3164,22 @@ var WebsiteInput = (props) => {
     hierarchy = "leading",
     protocolLabel = "http://",
     icon,
-    size = "large",
+    size = "lg",
     disabled,
     className,
     ...rest
   } = props;
   const isLeading = hierarchy === "leading";
+  const spanHeightClass = size === "xl" ? "[&>span]:h-14!" : size === "lg" ? "[&>span]:h-11!" : size === "md" ? "[&>span]:h-10!" : "[&>span]:h-8!";
   const baseClass = cn(
     "[&>span]:w-[unset] hover:bg-[unset]",
     !disabled && "[&:not(:focus-within):hover]:shadow-[0_0_0_var(--focus-ring-spread)_var(--background-secondary-hover)]",
     disabled && "bg-[unset] hover:shadow-none hover:border-(--border-secondary-disabled) border-(--border-secondary-disabled)",
-    size === "extra-large" ? "[&>span]:h-14!" : "[&>span]:h-11!"
+    spanHeightClass
   );
   const addonTextClass = cn(
     "flex mb-0!",
-    size === "extra-large" ? "paragraph-m" : "paragraph-s",
+    size === "xl" ? "paragraph-m" : size === "sm" ? "paragraph-m" : "paragraph-s",
     disabled ? "text-primary-disabled" : "text-primary group-hover:text-(--color-primary-hover) group-focus-within:text-(--color-primary-focus)"
   );
   const baseAddonClass = cn(
@@ -3128,7 +3192,7 @@ var WebsiteInput = (props) => {
   );
   const iconWrapperClass = cn(
     "flex items-center justify-center shrink-0",
-    size === "extra-large" ? "[&>svg]:w-6 [&>svg]:h-6" : "[&>svg]:w-5 [&>svg]:h-5",
+    size === "xl" ? "[&>svg]:w-6 [&>svg]:h-6" : size === "sm" ? "[&>svg]:w-4 [&>svg]:h-4" : "[&>svg]:w-5 [&>svg]:h-5",
     disabled ? "text-(--icon-primary-disabled)" : "text-(--icon-primary) group-hover:text-(--icon-primary-hover) group-focus-within:text-(--icon-primary-focus)"
   );
   const leadingAddon = /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: baseAddonClass, children: [