@bubo-squared/ui-framework 0.2.21 → 0.2.23

package/dist/index.cjs

@@ -774,13 +774,14 @@ var Badge = React9.forwardRef(
       ...rest
     } = props;
     const Comp = asChild ? import_react_slot5.Slot : "div";
+    const hasValue = typeof value === "string" ? value.trim() !== "" : value != null;
     return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
       Comp,
       {
         ref,
         className: cn(badgeVariants({ size, variant }), className),
         ...rest,
-        children: value ? /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_jsx_runtime11.Fragment, { children: [
+        children: hasValue ? /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_jsx_runtime11.Fragment, { children: [
           /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "font-normal", children: label }),
           /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "font-normal", children: ":" }),
           /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "font-medium", children: value })
@@ -961,7 +962,7 @@ var Divider = (props) => {
       className: _className,
       ...divProps
     } = props;
-    const textLabel = label ? label : "OR";
+    const textLabel = label ?? "OR";
     return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
       "div",
       {
@@ -1109,13 +1110,15 @@ var Field = (props) => {
     className,
     children
   } = props;
+  const hasLabel = label != null;
+  const hasHint = hint != null;
   const fieldId = React14.useId();
-  const labelId = label ? `${fieldId}-label` : void 0;
-  const hintId = hint ? `${fieldId}-hint` : void 0;
+  const labelId = hasLabel ? `${fieldId}-label` : void 0;
+  const hintId = hasHint ? `${fieldId}-hint` : void 0;
   const hintColorClass = disabled ? "text-primary-disabled" : status === "success" ? "text-(--color-success)" : status === "error" ? "text-(--color-error)" : "text-(--color-secondary)";
   const labelColorClass = disabled ? "text-primary-disabled" : "text-primary";
   return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: cn(fieldBase, className), children: [
-    label && /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "flex w-full items-center justify-between", children: [
+    hasLabel && /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "flex w-full items-center justify-between", children: [
       /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("label", { id: labelId, className: cn("paragraph-sm", labelColorClass), children: label }),
       labelRight
     ] }),
@@ -1123,9 +1126,9 @@ var Field = (props) => {
     !hideHint && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
       "p",
       {
-        id: hint ? hintId : void 0,
-        className: cn("caption", hint ? hintColorClass : "invisible"),
-        children: hint || "\xA0"
+        id: hasHint ? hintId : void 0,
+        className: cn("caption", hasHint ? hintColorClass : "invisible"),
+        children: hasHint ? hint : "\xA0"
       }
     )
   ] });
@@ -1145,6 +1148,7 @@ var Progress = React15.forwardRef(
       value,
       label,
       hint,
+      ariaLabel,
       showProgressLabel = true,
       hideHint,
       size = "lg",
@@ -1155,12 +1159,13 @@ var Progress = React15.forwardRef(
     } = props;
     const clamped = Number.isFinite(value) ? Math.min(100, Math.max(0, value)) : 0;
     const percentageLabel = `${Math.round(clamped)}%`;
+    const resolvedAriaLabel = ariaLabel ?? (typeof label === "string" ? label : void 0);
     const barHeightClasses = sizeToBarClasses[size];
     return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
       Field,
       {
         label,
-        labelRight: showProgressLabel && label ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "footnote text-(--color-secondary)", children: percentageLabel }) : void 0,
+        labelRight: showProgressLabel && label != null ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "footnote text-(--color-secondary)", children: percentageLabel }) : void 0,
         hint,
         hideHint,
         status,
@@ -1174,7 +1179,7 @@ var Progress = React15.forwardRef(
             "aria-valuenow": clamped,
             "aria-valuemin": 0,
             "aria-valuemax": 100,
-            "aria-label": label,
+            "aria-label": resolvedAriaLabel,
             ...rest,
             children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
               "div",
@@ -1275,7 +1280,7 @@ var import_react_slot6 = require("@radix-ui/react-slot");
 var import_class_variance_authority11 = require("class-variance-authority");
 var import_jsx_runtime19 = require("react/jsx-runtime");
 var tagVariants = (0, import_class_variance_authority11.cva)(
-  "inline-flex flex-row items-center justify-center rounded-6 gap-2 px-3 overflow-hidden border-1 border-(--border-secondary) bg-(--background-neutral) hover:border-(--border-secondary-hover) focus:border-(--border-brand) focus-ring-primary ",
+  "inline-flex flex-row items-center justify-center rounded-6 gap-2 px-3 overflow-hidden border-1 border-(--border-secondary) bg-(--background-neutral) focus:border-(--border-brand) focus-ring-primary ",
   {
     variants: {
       size: {
@@ -1301,6 +1306,7 @@ var Tag = React17.forwardRef(
       value,
       ...rest
     } = props;
+    const hasValue = typeof value === "string" ? value.trim() !== "" : value != null;
     const Comp = asChild ? import_react_slot6.Slot : "div";
     const leading = props.leadingIcon && React17.isValidElement(props.leadingIcon) ? React17.cloneElement(props.leadingIcon, { disabled, ...props.leadingIcon.props }) : null;
     const trailing = props.trailingIcon && React17.isValidElement(props.trailingIcon) ? React17.cloneElement(props.trailingIcon, { disabled, ...props.trailingIcon.props }) : null;
@@ -1312,7 +1318,7 @@ var Tag = React17.forwardRef(
         ...rest,
         children: [
           leading && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: iconClasses, children: leading }),
-          value ? /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "flex flex-row gap-1 items-center", children: [
+          hasValue ? /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "flex flex-row gap-1 items-center", children: [
             /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "text-primary paragraph-lg mb-0! cursor-default font-normal", children: label }),
             /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "text-primary paragraph-lg mb-0! cursor-default font-normal", children: ":" }),
             /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "text-primary paragraph-lg-medium mb-0! cursor-default font-medium", children: value })
@@ -1646,13 +1652,13 @@ var inputShellVariants = (0, import_class_variance_authority13.cva)(
       }
     },
     defaultVariants: {
-      size: "lg",
+      size: "md",
       status: "default"
     }
   }
 );
 var InputShell = React21.forwardRef(
-  ({ size, status, disabled, className, ...rest }, ref) => {
+  ({ size = "md", status, disabled, className, ...rest }, ref) => {
     return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
       "div",
       {
@@ -1755,7 +1761,7 @@ var Autocomplete = React23.forwardRef((props, forwardedRef) => {
     hint,
     hideHint,
     status = "default",
-    size = "lg",
+    size = "md",
     disabled,
     className,
     leadingIcon,
@@ -1770,6 +1776,7 @@ var Autocomplete = React23.forwardRef((props, forwardedRef) => {
     inputValue,
     defaultInputValue,
     onInputChange,
+    freeSolo = false,
     dropdownClassName,
     listboxClassName,
     placeholder = "Search\u2026",
@@ -1820,6 +1827,12 @@ var Autocomplete = React23.forwardRef((props, forwardedRef) => {
     }
     onInputChange?.(next);
   };
+  const commitTypedValue = (next) => {
+    if (!isValueControlled) {
+      setInternalValue(next);
+    }
+    onChange?.(next);
+  };
   const commitValue = (next) => {
     if (!isValueControlled) {
       setInternalValue(next);
@@ -1836,6 +1849,9 @@ var Autocomplete = React23.forwardRef((props, forwardedRef) => {
     const next = event.target.value;
     setInputText(next);
     setActiveIndex(-1);
+    if (freeSolo) {
+      commitTypedValue(next);
+    }
   };
   const handleFocus = (event) => {
     setIsFocused(true);
@@ -1844,6 +1860,12 @@ var Autocomplete = React23.forwardRef((props, forwardedRef) => {
   const handleBlur = (event) => {
     setIsFocused(false);
     setActiveIndex(-1);
+    if (freeSolo) {
+      const trimmed = currentInput.trim();
+      if (trimmed.length > 0 && currentInput !== currentValue) {
+        commitTypedValue(currentInput);
+      }
+    }
     onBlur?.(event);
   };
   const handleKeyDown = (event) => {
@@ -1877,6 +1899,17 @@ var Autocomplete = React23.forwardRef((props, forwardedRef) => {
           event.preventDefault();
           commitValue(options[activeIndex]);
           setIsFocused(false);
+          break;
+        }
+        if (freeSolo) {
+          const trimmed = currentInput.trim();
+          if (trimmed.length > 0) {
+            event.preventDefault();
+            if (currentInput !== currentValue) {
+              commitTypedValue(currentInput);
+            }
+            setIsFocused(false);
+          }
         }
         break;
       }
@@ -1999,7 +2032,7 @@ var import_class_variance_authority15 = require("class-variance-authority");
 var import_icons8 = require("@bubo-squared/icons");
 var import_jsx_runtime26 = require("react/jsx-runtime");
 var selectTriggerVariants = (0, import_class_variance_authority15.cva)(
-  "group flex w-full items-center justify-between rounded-4 border bg-(--background-primary) p-2 text-left transition-colors cursor-pointer focus-ring-primary focus:border-(--border-brand) hover:bg-(--background-primary-hover) disabled:bg-(--background-primary) disabled:border-(--border-secondary-disabled) disabled:text-primary-disabled disabled:cursor-default",
+  "group flex w-full items-center justify-between rounded-4 border bg-(--background-primary) p-2 text-left transition-colors cursor-pointer hover:bg-(--background-primary-hover) disabled:bg-(--background-primary-disabled) disabled:text-primary-disabled disabled:cursor-default",
   {
     variants: {
       size: {
@@ -2009,13 +2042,13 @@ var selectTriggerVariants = (0, import_class_variance_authority15.cva)(
         xl: "h-14"
       },
       status: {
-        default: "border-(--border-secondary)",
-        success: "border-(--border-success)",
-        error: "border-(--border-error)"
+        default: "input-default",
+        success: "input-success",
+        error: "input-error"
       }
     },
     defaultVariants: {
-      size: "lg",
+      size: "md",
       status: "default"
     }
   }
@@ -2037,7 +2070,7 @@ var textVariants = (0, import_class_variance_authority15.cva)("truncate", {
     }
   },
   defaultVariants: {
-    size: "lg",
+    size: "md",
     hasValue: false
   }
 });
@@ -2055,7 +2088,7 @@ var selectIconVariants = (0, import_class_variance_authority15.cva)("flex items-
     }
   },
   defaultVariants: {
-    size: "lg",
+    size: "md",
     disabled: false
   }
 });
@@ -2079,7 +2112,7 @@ var Select = React24.forwardRef((props, forwardedRef) => {
     hideHint = false,
     name,
     placeholder = "Placeholder text",
-    size = "lg",
+    size = "md",
     status = "default",
     disabled,
     options,
@@ -2151,6 +2184,7 @@ var Select = React24.forwardRef((props, forwardedRef) => {
                 type: "button",
                 "aria-haspopup": "listbox",
                 "aria-expanded": isOpen,
+                "aria-disabled": disabled || void 0,
                 disabled,
                 className: cn(
                   selectTriggerVariants({ size, status }),
@@ -2244,7 +2278,7 @@ var passwordTextVariants = (0, import_class_variance_authority16.cva)("truncate"
     }
   },
   defaultVariants: {
-    size: "lg",
+    size: "md",
     disabled: false
   }
 });
@@ -2292,7 +2326,7 @@ var PasswordInput = React25.forwardRef((props, forwardedRef) => {
     hint,
     hideHint,
     placeholder = "\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022",
-    size = "lg",
+    size = "md",
     status = "default",
     variant = "icon",
     disabled,
@@ -2800,7 +2834,7 @@ var inputTextVariants2 = (0, import_class_variance_authority18.cva)("", {
     }
   },
   defaultVariants: {
-    size: "lg"
+    size: "md"
   }
 });
 var dropdownWidthVariants = (0, import_class_variance_authority18.cva)("", {
@@ -2813,7 +2847,7 @@ var dropdownWidthVariants = (0, import_class_variance_authority18.cva)("", {
     }
   },
   defaultVariants: {
-    size: "lg"
+    size: "md"
   }
 });
 var wrapperStatusClass = {
@@ -2833,7 +2867,7 @@ var countryOptionVariants = (0, import_class_variance_authority18.cva)(
       }
     },
     defaultVariants: {
-      size: "lg"
+      size: "md"
     }
   }
 );
@@ -2847,7 +2881,7 @@ var PhoneInput = React31.forwardRef(
       hint,
       hideHint,
       placeholder,
-      size = "lg",
+      size = "md",
       disabled = false,
       status = "default",
       ...rest
@@ -2905,7 +2939,7 @@ var CountrySelect = ({
   value: selectedCountry,
   options: countryList,
   onChange,
-  size = "lg"
+  size = "md"
 }) => {
   const scrollAreaRef = React31.useRef(null);
   const [searchValue, setSearchValue] = React31.useState("");
@@ -3010,7 +3044,7 @@ var CountrySelectOption = (props) => {
     selectedCountry,
     onChange,
     onSelectComplete,
-    size = "lg"
+    size = "md"
   } = props;
   const handleSelect = () => {
     onChange(country);
@@ -3173,7 +3207,7 @@ var searchTextVariants = (0, import_class_variance_authority19.cva)("truncate",
     }
   },
   defaultVariants: {
-    size: "lg"
+    size: "md"
   }
 });
 var iconWrapperVariants3 = (0, import_class_variance_authority19.cva)("flex items-center justify-center shrink-0 text-(--icon-primary)", {
@@ -3189,13 +3223,13 @@ var iconWrapperVariants3 = (0, import_class_variance_authority19.cva)("flex item
     }
   },
   defaultVariants: {
-    size: "lg"
+    size: "md"
   }
 });
 var SearchInput = React33.forwardRef((props, forwardedRef) => {
   const {
     placeholder = "Search...",
-    size = "lg",
+    size = "md",
     disabled,
     className,
     leadingIcon,
@@ -3256,10 +3290,21 @@ SearchInput.displayName = "SearchInput";
 var React35 = __toESM(require("react"), 1);
 
 // src/components/Feedback/Tooltip.tsx
-var React34 = require("react");
+var React34 = __toESM(require("react"), 1);
 var TooltipPrimitive = __toESM(require("@radix-ui/react-tooltip"), 1);
 var import_jsx_runtime36 = require("react/jsx-runtime");
 var TooltipArrow = TooltipPrimitive.Arrow;
+var REACT_FORWARD_REF_TYPE = /* @__PURE__ */ Symbol.for("react.forward_ref");
+var REACT_MEMO_TYPE = /* @__PURE__ */ Symbol.for("react.memo");
+var canAcceptRef = (child) => {
+  const type = child.type;
+  if (typeof child.type === "string") return true;
+  if (type?.$$typeof === REACT_FORWARD_REF_TYPE) return true;
+  if (type?.$$typeof === REACT_MEMO_TYPE && type.type?.$$typeof === REACT_FORWARD_REF_TYPE) {
+    return true;
+  }
+  return false;
+};
 var mapPlacementToSideAndAlign = (placement) => {
   switch (placement) {
     case "top":
@@ -3306,6 +3351,9 @@ var Tooltip = (props) => {
     children,
     delayDuration = 200
   } = props;
+  const trigger = React34.isValidElement(children) && canAcceptRef(children) ? children : /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: "inline-flex", tabIndex: 0, children });
+  const hasStrapline = typeof strapline === "string" ? strapline.trim() !== "" : strapline != null;
+  const hasDescription = typeof description === "string" ? description.trim() !== "" : description != null;
   const { side, align } = mapPlacementToSideAndAlign(placement);
   const tooltipClasses = "group bg-(--background-tooltip) max-w-[calc(100vw-2rem)] shadow-card-md border-none rounded-4 py-1.5 px-2.5 [&>span]:scale-200 data-[state=delayed-open]:animate-in data-[state=instant-open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=delayed-open]:fade-in-0 data-[state=instant-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-[state=instant-open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2";
   const tooltipArrowClasses = "relative fill-(--background-tooltip) transition-[filter,transform] group-data-[side=top]:top-[-2px] group-data-[side=top]:drop-shadow-[0px_1px_1px_color-mix(in_srgb,_var(--color-b-black-10)_66%,_transparent)] group-data-[side=bottom]:drop-shadow-[0px_1px_1px_color-mix(in_srgb,_var(--color-b-black-10)_66%,_transparent)] group-data-[side=left]:drop-shadow-[0px_2px_1px_color-mix(in_srgb,_var(--color-b-black-10)_66%,_transparent)] group-data-[side=right]:drop-shadow-[0px_2px_1px_color-mix(in_srgb,_var(--color-b-black-10)_66%,_transparent)]";
@@ -3318,7 +3366,7 @@ var Tooltip = (props) => {
       disableHoverableContent,
       delayDuration,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(TooltipPrimitive.Trigger, { asChild: true, children }),
+        /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(TooltipPrimitive.Trigger, { asChild: true, children: trigger }),
         /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(TooltipPrimitive.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
           TooltipPrimitive.Content,
           {
@@ -3329,9 +3377,9 @@ var Tooltip = (props) => {
             children: [
               showArrow && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(TooltipArrow, { className: tooltipArrowClasses }),
               /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "grid", children: [
-                (strapline ?? "") !== "" && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: "caption text-secondary", children: strapline }),
+                hasStrapline && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: "caption text-secondary", children: strapline }),
                 /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("h4", { className: "paragraph-md text-primary", children: title }),
-                (description ?? "") !== "" && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("p", { className: "paragraph-sm text-primary", children: description })
+                hasDescription && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("p", { className: "paragraph-sm text-primary", children: description })
               ] })
             ]
           }
@@ -3934,7 +3982,7 @@ var inputTextVariants3 = (0, import_class_variance_authority20.cva)("truncate",
     }
   },
   defaultVariants: {
-    size: "lg"
+    size: "md"
   }
 });
 var iconWrapperVariants4 = (0, import_class_variance_authority20.cva)(
@@ -3952,7 +4000,7 @@ var iconWrapperVariants4 = (0, import_class_variance_authority20.cva)(
       }
     },
     defaultVariants: {
-      size: "lg"
+      size: "md"
     }
   }
 );
@@ -3962,7 +4010,7 @@ var TextInput = React37.forwardRef((props, forwardedRef) => {
     hint,
     hideHint,
     placeholder = "Placeholder text",
-    size = "lg",
+    size = "md",
     status = "default",
     disabled = false,
     className,
@@ -4164,7 +4212,7 @@ var WebsiteInput = React39.forwardRef((props, forwardedRef) => {
     hierarchy = "leading",
     protocolLabel = "http://",
     icon,
-    size = "lg",
+    size = "md",
     disabled,
     className,
     ...rest
@@ -4238,6 +4286,8 @@ var Popover2 = (props) => {
     offset = 10,
     children
   } = props;
+  const hasStrapline = typeof strapline === "string" ? strapline.trim() !== "" : strapline != null;
+  const hasDescription = typeof description === "string" ? description.trim() !== "" : description != null;
   const [open, setOpen] = React40.useState(false);
   const handleCancel = () => {
     onCancel?.();
@@ -4293,9 +4343,9 @@ var Popover2 = (props) => {
           showArrow && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(PopoverArrow, { className: popoverArrowClasses }),
           /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "grid gap-4", children: [
             /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "space-y-2", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { className: "caption text-secondary", children: strapline }),
+              hasStrapline && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { className: "caption text-secondary", children: strapline }),
               /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("h4", { className: "subtitle-medium text-primary", children: title }),
-              /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("p", { className: "paragraph-sm text-primary", children: description })
+              hasDescription && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("p", { className: "paragraph-sm text-primary", children: description })
             ] }),
             /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "flex justify-start items-center gap-4 flex-wrap", children: [
               /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Button, { size: "sm", variant: "secondary", onClick: handleCancel, children: cancelText || "Cancel" }),