@bubo-squared/ui-framework 0.2.22 → 0.2.24

package/dist/index.d.cts

@@ -11,7 +11,7 @@ import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
 import { ClassValue } from 'clsx';
 
 declare const buttonVariants: (props?: ({
-    variant?: "primary" | "secondary" | "ghost" | "outline" | "destructive" | null | undefined;
+    variant?: "primary" | "secondary" | "ghost" | "outline" | "destructive" | "destructive-outline" | null | undefined;
     size?: "sm" | "md" | "lg" | "xl" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface ButtonProps$1 extends React$1.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
@@ -274,7 +274,7 @@ interface TagProps extends VariantProps<typeof tagVariants> {
     trailingIcon?: React$1.ReactElement<{
         disabled?: boolean;
     }>;
-    size: "sm" | "md";
+    size?: "sm" | "md";
     disabled?: boolean;
 }
 declare const Tag: React$1.ForwardRefExoticComponent<TagProps & React$1.RefAttributes<HTMLDivElement>>;
@@ -540,10 +540,13 @@ type SliderBaseProps = {
     tooltipPlacement?: SliderTooltipPlacement;
     /**
      * Custom formatter for tooltip / numeric / accessibility text.
-     * Receives the current slider value and should return a display string.
+      * Receives the current slider value and should return display content.
      * If provided, it takes precedence over `showPercentage`.
+      *
+      * Accessibility note: when the formatter returns non-text content,
+      * `aria-valuetext` falls back to the default numeric/percentage string.
      */
-    tooltipFormatter?: (value: number) => string;
+    tooltipFormatter?: (value: number) => React$1.ReactNode;
     /**
      * When true (default), values are rendered as percentages (e.g. "30%").
      * When false, raw numbers are shown instead.

package/dist/index.d.ts

@@ -11,7 +11,7 @@ import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
 import { ClassValue } from 'clsx';
 
 declare const buttonVariants: (props?: ({
-    variant?: "primary" | "secondary" | "ghost" | "outline" | "destructive" | null | undefined;
+    variant?: "primary" | "secondary" | "ghost" | "outline" | "destructive" | "destructive-outline" | null | undefined;
     size?: "sm" | "md" | "lg" | "xl" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface ButtonProps$1 extends React$1.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
@@ -274,7 +274,7 @@ interface TagProps extends VariantProps<typeof tagVariants> {
     trailingIcon?: React$1.ReactElement<{
         disabled?: boolean;
     }>;
-    size: "sm" | "md";
+    size?: "sm" | "md";
     disabled?: boolean;
 }
 declare const Tag: React$1.ForwardRefExoticComponent<TagProps & React$1.RefAttributes<HTMLDivElement>>;
@@ -540,10 +540,13 @@ type SliderBaseProps = {
     tooltipPlacement?: SliderTooltipPlacement;
     /**
      * Custom formatter for tooltip / numeric / accessibility text.
-     * Receives the current slider value and should return a display string.
+      * Receives the current slider value and should return display content.
      * If provided, it takes precedence over `showPercentage`.
+      *
+      * Accessibility note: when the formatter returns non-text content,
+      * `aria-valuetext` falls back to the default numeric/percentage string.
      */
-    tooltipFormatter?: (value: number) => string;
+    tooltipFormatter?: (value: number) => React$1.ReactNode;
     /**
      * When true (default), values are rendered as percentages (e.g. "30%").
      * When false, raw numbers are shown instead.

package/dist/index.js

@@ -66,6 +66,10 @@ var buttonVariants = cva(
         destructive: [
           "btn-destructive",
           "focus-ring-error"
+        ],
+        "destructive-outline": [
+          "btn-destructive-outline",
+          "focus-ring-error-outline"
         ]
       },
       size: {
@@ -1576,13 +1580,13 @@ var inputShellVariants = cva13(
       }
     },
     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__ */ jsx23(
       "div",
       {
@@ -1685,7 +1689,7 @@ var Autocomplete = React23.forwardRef((props, forwardedRef) => {
     hint,
     hideHint,
     status = "default",
-    size = "lg",
+    size = "md",
     disabled,
     className,
     leadingIcon,
@@ -1956,7 +1960,7 @@ import { cva as cva15 } from "class-variance-authority";
 import { ChevronDownIcon as ChevronDownIcon2 } from "@bubo-squared/icons";
 import { jsx as jsx26, jsxs as jsxs16 } from "react/jsx-runtime";
 var selectTriggerVariants = cva15(
-  "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-[background-color] cursor-pointer hover:bg-(--background-primary-hover) disabled:bg-(--background-primary-disabled) disabled:text-primary-disabled disabled:cursor-default",
   {
     variants: {
       size: {
@@ -1966,13 +1970,13 @@ var selectTriggerVariants = cva15(
         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"
     }
   }
@@ -1994,7 +1998,7 @@ var textVariants = cva15("truncate", {
     }
   },
   defaultVariants: {
-    size: "lg",
+    size: "md",
     hasValue: false
   }
 });
@@ -2012,7 +2016,7 @@ var selectIconVariants = cva15("flex items-center justify-center shrink-0", {
     }
   },
   defaultVariants: {
-    size: "lg",
+    size: "md",
     disabled: false
   }
 });
@@ -2036,7 +2040,7 @@ var Select = React24.forwardRef((props, forwardedRef) => {
     hideHint = false,
     name,
     placeholder = "Placeholder text",
-    size = "lg",
+    size = "md",
     status = "default",
     disabled,
     options,
@@ -2108,6 +2112,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 }),
@@ -2201,7 +2206,7 @@ var passwordTextVariants = cva16("truncate", {
     }
   },
   defaultVariants: {
-    size: "lg",
+    size: "md",
     disabled: false
   }
 });
@@ -2249,7 +2254,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,
@@ -2757,7 +2762,7 @@ var inputTextVariants2 = cva18("", {
     }
   },
   defaultVariants: {
-    size: "lg"
+    size: "md"
   }
 });
 var dropdownWidthVariants = cva18("", {
@@ -2770,7 +2775,7 @@ var dropdownWidthVariants = cva18("", {
     }
   },
   defaultVariants: {
-    size: "lg"
+    size: "md"
   }
 });
 var wrapperStatusClass = {
@@ -2790,12 +2795,12 @@ var countryOptionVariants = cva18(
       }
     },
     defaultVariants: {
-      size: "lg"
+      size: "md"
     }
   }
 );
 var PhoneInput = React31.forwardRef(
-  (props, ref) => {
+  (props, forwardedRef) => {
     const {
       className,
       onChange,
@@ -2804,11 +2809,16 @@ var PhoneInput = React31.forwardRef(
       hint,
       hideHint,
       placeholder,
-      size = "lg",
+      size = "md",
       disabled = false,
       status = "default",
       ...rest
     } = props;
+    const wrapperRef = React31.useRef(null);
+    const focusNumberInput = React31.useCallback(() => {
+      const el = wrapperRef.current?.querySelector("input");
+      el?.focus();
+    }, []);
     return /* @__PURE__ */ jsx33(
       Field,
       {
@@ -2818,16 +2828,29 @@ var PhoneInput = React31.forwardRef(
         status,
         disabled,
         className,
-        children: /* @__PURE__ */ jsx33("div", { className: cn("w-full", wrapperStatusClass[status]), children: /* @__PURE__ */ jsx33(
+        children: /* @__PURE__ */ jsx33("div", { ref: wrapperRef, className: cn("w-full", wrapperStatusClass[status]), children: /* @__PURE__ */ jsx33(
           RPNInput.default,
           {
-            ref,
+            ref: forwardedRef,
             className: cn(
               sizeBase({ size }),
               inputTextVariants2({ size, disabled })
             ),
             flagComponent: FlagComponent,
-            countrySelectComponent: (countrySelectProps) => /* @__PURE__ */ jsx33(CountrySelect, { ...countrySelectProps, size }),
+            countrySelectComponent: (countrySelectProps) => /* @__PURE__ */ jsx33(
+              CountrySelect,
+              {
+                ...countrySelectProps,
+                size,
+                onAfterSelect: () => {
+                  requestAnimationFrame(() => {
+                    requestAnimationFrame(() => {
+                      focusNumberInput();
+                    });
+                  });
+                }
+              }
+            ),
             inputComponent: InputComponent,
             smartCaret: false,
             value: value || void 0,
@@ -2862,7 +2885,8 @@ var CountrySelect = ({
   value: selectedCountry,
   options: countryList,
   onChange,
-  size = "lg"
+  size = "md",
+  onAfterSelect
 }) => {
   const scrollAreaRef = React31.useRef(null);
   const [searchValue, setSearchValue] = React31.useState("");
@@ -2946,7 +2970,10 @@ var CountrySelect = ({
                       countryName: label,
                       selectedCountry,
                       onChange,
-                      onSelectComplete: () => setIsOpen(false),
+                      onSelectComplete: () => {
+                        setIsOpen(false);
+                        onAfterSelect?.();
+                      },
                       size
                     },
                     value
@@ -2967,7 +2994,7 @@ var CountrySelectOption = (props) => {
     selectedCountry,
     onChange,
     onSelectComplete,
-    size = "lg"
+    size = "md"
   } = props;
   const handleSelect = () => {
     onChange(country);
@@ -3130,7 +3157,7 @@ var searchTextVariants = cva19("truncate", {
     }
   },
   defaultVariants: {
-    size: "lg"
+    size: "md"
   }
 });
 var iconWrapperVariants3 = cva19("flex items-center justify-center shrink-0 text-(--icon-primary)", {
@@ -3146,13 +3173,13 @@ var iconWrapperVariants3 = cva19("flex items-center justify-center shrink-0 text
     }
   },
   defaultVariants: {
-    size: "lg"
+    size: "md"
   }
 });
 var SearchInput = React33.forwardRef((props, forwardedRef) => {
   const {
     placeholder = "Search...",
-    size = "lg",
+    size = "md",
     disabled,
     className,
     leadingIcon,
@@ -3213,10 +3240,21 @@ SearchInput.displayName = "SearchInput";
 import * as React35 from "react";
 
 // src/components/Feedback/Tooltip.tsx
-import "react";
+import * as React34 from "react";
 import * as TooltipPrimitive from "@radix-ui/react-tooltip";
 import { jsx as jsx36, jsxs as jsxs24 } from "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":
@@ -3263,6 +3301,7 @@ var Tooltip = (props) => {
     children,
     delayDuration = 200
   } = props;
+  const trigger = React34.isValidElement(children) && canAcceptRef(children) ? children : /* @__PURE__ */ jsx36("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);
@@ -3277,7 +3316,7 @@ var Tooltip = (props) => {
       disableHoverableContent,
       delayDuration,
       children: [
-        /* @__PURE__ */ jsx36(TooltipPrimitive.Trigger, { asChild: true, children }),
+        /* @__PURE__ */ jsx36(TooltipPrimitive.Trigger, { asChild: true, children: trigger }),
         /* @__PURE__ */ jsx36(TooltipPrimitive.Portal, { children: /* @__PURE__ */ jsxs24(
           TooltipPrimitive.Content,
           {
@@ -3536,15 +3575,27 @@ var Slider = React35.forwardRef((props, forwardedRef) => {
     }
     return rounded.toFixed(2);
   };
-  const formatDisplayValue = (val) => {
+  const formatFallbackText = (val) => {
     const value2 = val ?? min;
-    if (tooltipFormatter) return tooltipFormatter(value2);
     if (showPercentage) {
       const percent = valueToPercent(value2);
       return `${formatNumber(percent)}%`;
     }
     return formatNumber(value2);
   };
+  const formatDisplayNode = (val) => {
+    const value2 = val ?? min;
+    if (tooltipFormatter) return tooltipFormatter(value2);
+    return formatFallbackText(value2);
+  };
+  const formatAriaValueText = (val) => {
+    const fallback = formatFallbackText(val);
+    if (!tooltipFormatter) return fallback;
+    const node = tooltipFormatter(val ?? min);
+    if (typeof node === "string") return node;
+    if (typeof node === "number") return String(node);
+    return fallback;
+  };
   const formatNumericLabel = () => {
     if (isRange && secondary !== void 0) {
       if (!tooltipFormatter && showPercentage && display === "numeric") {
@@ -3552,14 +3603,18 @@ var Slider = React35.forwardRef((props, forwardedRef) => {
         const second = formatNumber(valueToPercent(secondary));
         return `${first} - ${second}`;
       }
-      return `${formatDisplayValue(primary)} - ${formatDisplayValue(secondary)}`;
+      return /* @__PURE__ */ jsxs25(Fragment2, { children: [
+        formatDisplayNode(primary),
+        " - ",
+        formatDisplayNode(secondary)
+      ] });
     }
-    return formatDisplayValue(primary);
+    return formatDisplayNode(primary);
   };
   const trackHeight = 32;
   const thumbWidth = 18;
   const thumbRadius = thumbWidth / 2;
-  const renderHandle = (index, percent, ariaValueText) => {
+  const renderHandle = (index, percent, tooltipContent, ariaValueText) => {
     const val = index === 0 ? primary : secondary;
     const isDragging = draggingThumbIndex === index;
     const isTooltipVisible = showTooltip && (hoveredThumbIndex === index || draggingThumbIndex === index || focusedThumbIndex === index);
@@ -3612,7 +3667,7 @@ var Slider = React35.forwardRef((props, forwardedRef) => {
     return /* @__PURE__ */ jsx37(
       Tooltip,
       {
-        title: ariaValueText,
+        title: tooltipContent,
         placement: tooltipPlacement === "top" ? "top" : "bottom",
         offset: 8,
         open: isTooltipVisible,
@@ -3674,8 +3729,18 @@ var Slider = React35.forwardRef((props, forwardedRef) => {
                     }
                   }
                 ),
-                renderHandle(0, primaryPercent, formatDisplayValue(primary)),
-                isRange && secondary !== void 0 && renderHandle(1, secondaryPercent, formatDisplayValue(secondary))
+                renderHandle(
+                  0,
+                  primaryPercent,
+                  formatDisplayNode(primary),
+                  formatAriaValueText(primary)
+                ),
+                isRange && secondary !== void 0 && renderHandle(
+                  1,
+                  secondaryPercent,
+                  formatDisplayNode(secondary),
+                  formatAriaValueText(secondary)
+                )
               ]
             }
           ) }),
@@ -3893,7 +3958,7 @@ var inputTextVariants3 = cva20("truncate", {
     }
   },
   defaultVariants: {
-    size: "lg"
+    size: "md"
   }
 });
 var iconWrapperVariants4 = cva20(
@@ -3911,7 +3976,7 @@ var iconWrapperVariants4 = cva20(
       }
     },
     defaultVariants: {
-      size: "lg"
+      size: "md"
     }
   }
 );
@@ -3921,7 +3986,7 @@ var TextInput = React37.forwardRef((props, forwardedRef) => {
     hint,
     hideHint,
     placeholder = "Placeholder text",
-    size = "lg",
+    size = "md",
     status = "default",
     disabled = false,
     className,
@@ -4123,7 +4188,7 @@ var WebsiteInput = React39.forwardRef((props, forwardedRef) => {
     hierarchy = "leading",
     protocolLabel = "http://",
     icon,
-    size = "lg",
+    size = "md",
     disabled,
     className,
     ...rest