@bubo-squared/ui-framework 0.2.23 → 0.2.24

package/dist/index.cjs

@@ -148,6 +148,10 @@ var buttonVariants = (0, import_class_variance_authority.cva)(
         destructive: [
           "btn-destructive",
           "focus-ring-error"
+        ],
+        "destructive-outline": [
+          "btn-destructive-outline",
+          "focus-ring-error-outline"
         ]
       },
       size: {
@@ -2032,7 +2036,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 hover:bg-(--background-primary-hover) disabled:bg-(--background-primary-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: {
@@ -2872,7 +2876,7 @@ var countryOptionVariants = (0, import_class_variance_authority18.cva)(
   }
 );
 var PhoneInput = React31.forwardRef(
-  (props, ref) => {
+  (props, forwardedRef) => {
     const {
       className,
       onChange,
@@ -2886,6 +2890,11 @@ var PhoneInput = React31.forwardRef(
       status = "default",
       ...rest
     } = props;
+    const wrapperRef = React31.useRef(null);
+    const focusNumberInput = React31.useCallback(() => {
+      const el = wrapperRef.current?.querySelector("input");
+      el?.focus();
+    }, []);
     return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
       Field,
       {
@@ -2895,16 +2904,29 @@ var PhoneInput = React31.forwardRef(
         status,
         disabled,
         className,
-        children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: cn("w-full", wrapperStatusClass[status]), children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { ref: wrapperRef, className: cn("w-full", wrapperStatusClass[status]), children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
           RPNInput.default,
           {
-            ref,
+            ref: forwardedRef,
             className: cn(
               sizeBase({ size }),
               inputTextVariants2({ size, disabled })
             ),
             flagComponent: FlagComponent,
-            countrySelectComponent: (countrySelectProps) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(CountrySelect, { ...countrySelectProps, size }),
+            countrySelectComponent: (countrySelectProps) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+              CountrySelect,
+              {
+                ...countrySelectProps,
+                size,
+                onAfterSelect: () => {
+                  requestAnimationFrame(() => {
+                    requestAnimationFrame(() => {
+                      focusNumberInput();
+                    });
+                  });
+                }
+              }
+            ),
             inputComponent: InputComponent,
             smartCaret: false,
             value: value || void 0,
@@ -2939,7 +2961,8 @@ var CountrySelect = ({
   value: selectedCountry,
   options: countryList,
   onChange,
-  size = "md"
+  size = "md",
+  onAfterSelect
 }) => {
   const scrollAreaRef = React31.useRef(null);
   const [searchValue, setSearchValue] = React31.useState("");
@@ -3023,7 +3046,10 @@ var CountrySelect = ({
                       countryName: label,
                       selectedCountry,
                       onChange,
-                      onSelectComplete: () => setIsOpen(false),
+                      onSelectComplete: () => {
+                        setIsOpen(false);
+                        onAfterSelect?.();
+                      },
                       size
                     },
                     value
@@ -3625,15 +3651,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") {
@@ -3641,14 +3679,18 @@ var Slider = React35.forwardRef((props, forwardedRef) => {
         const second = formatNumber(valueToPercent(secondary));
         return `${first} - ${second}`;
       }
-      return `${formatDisplayValue(primary)} - ${formatDisplayValue(secondary)}`;
+      return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(import_jsx_runtime37.Fragment, { 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);
@@ -3701,7 +3743,7 @@ var Slider = React35.forwardRef((props, forwardedRef) => {
     return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
       Tooltip,
       {
-        title: ariaValueText,
+        title: tooltipContent,
         placement: tooltipPlacement === "top" ? "top" : "bottom",
         offset: 8,
         open: isTooltipVisible,
@@ -3763,8 +3805,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)
+                )
               ]
             }
           ) }),