@bubo-squared/ui-framework 0.2.23 → 0.2.25

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: {
@@ -374,7 +378,7 @@ var IconButtonGroup = (props) => {
           "aria-label": item.ariaLabel,
           disabled: item.disabled,
           className: cn(
-            "rounded-none border-1 border-(--border-secondary) text-primary ",
+            "rounded-none border-1 border-secondary text-primary ",
             index === 0 && "rounded-l-6",
             index === items.length - 1 && "rounded-r-6",
             index > 0 && "-ml-px"
@@ -551,7 +555,7 @@ var Accordion = React6.forwardRef(
           AccordionPrimitive.Item,
           {
             value: "item",
-            className: cn(bordered ? "border rounded-4" : "border-b", "border-(--border-secondary) px-4"),
+            className: cn(bordered ? "border rounded-4" : "border-b", "border-secondary px-4"),
             children: [
               /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(AccordionPrimitive.Header, { className: "flex", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
                 AccordionPrimitive.Trigger,
@@ -585,7 +589,7 @@ var import_class_variance_authority6 = require("class-variance-authority");
 var import_icons2 = require("@bubo-squared/icons");
 var import_jsx_runtime9 = require("react/jsx-runtime");
 var avatarVariants = (0, import_class_variance_authority6.cva)(
-  "relative inline-flex items-center justify-center rounded-full border-(--border-secondary) border-1 bg-(--background-primary) text-primary overflow-hidden hover:border-(--focus-secondary) focus-visible:border-(--focus-primary) focus-visible:outline-none",
+  "relative inline-flex items-center justify-center rounded-full border-secondary border-1 bg-(--background-primary) text-primary overflow-hidden hover:border-(--focus-secondary) focus-visible:border-(--focus-primary) focus-visible:outline-none",
   {
     variants: {
       size: {
@@ -734,24 +738,24 @@ var import_react_slot5 = require("@radix-ui/react-slot");
 var import_class_variance_authority7 = require("class-variance-authority");
 var import_jsx_runtime11 = require("react/jsx-runtime");
 var badgeVariants = (0, import_class_variance_authority7.cva)(
-  "inline-flex items-center justify-center rounded-4 leading-none whitespace-nowrap gap-1 px-1 py-0",
+  "inline-flex items-center justify-center rounded-4 leading-none whitespace-nowrap gap-1 py-0",
   {
     variants: {
       size: {
-        sm: "px-1 paragraph-sm",
-        md: "px-1 paragraph-md",
-        lg: "px-1.5 subtitle",
-        xl: "px-2 h6-title"
+        sm: "px-1.5 paragraph-sm",
+        md: "px-2 paragraph-md",
+        lg: "px-2 subtitle",
+        xl: "px-2.5 h6-title"
       },
       variant: {
         primary: "bg-(--background-secondary) text-primary",
-        secondary: "bg-(--background-primary) border-1 border-(--border-primary) text-primary",
+        secondary: "bg-(--background-primary) border-1 border-primary text-primary",
         active: "bg-ac-lilac text-badge-black",
         informal: "bg-ac-neon-blue text-badge-black",
         success: "bg-ac-neon-green text-badge-black",
         warning: "bg-ac-light-orange text-badge-black",
         error: "bg-s-error-300 text-badge-black",
-        disabled: "bg-(--background-primary-disabled) border-1 border-(--border-primary-disabled) text-primary-disabled",
+        disabled: "bg-(--background-primary-disabled) border-1 border-primary-disabled text-primary-disabled",
         "double-default": "bg-(--background-secondary) text-primary",
         "double-current": "bg-color-ac-lilac text-badge-black"
       }
@@ -806,12 +810,12 @@ var badgeDigitVariants = (0, import_class_variance_authority8.cva)(
       },
       variant: {
         primary: "bg-(--background-brand)",
-        secondary: "bg-(--background-primary) border-1 border-(--border-secondary) text-(--color-secondary)",
+        secondary: "bg-(--background-primary) border-1 border-secondary text-primary",
         informal: "bg-(--background-informal)",
         success: "bg-(--background-success)",
         warning: "bg-(--background-warning)",
         error: "bg-(--background-error)",
-        disabled: "bg-(--background-primary) border-1 border-(--border-primary-disabled) text-primary-disabled"
+        disabled: "bg-(--background-primary) border-1 border-primary-disabled text-primary-disabled"
       }
     },
     defaultVariants: {
@@ -1280,7 +1284,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) 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-secondary bg-(--background-neutral) focus:border-brand focus-ring-primary ",
   {
     variants: {
       size: {
@@ -1293,7 +1297,7 @@ var tagVariants = (0, import_class_variance_authority11.cva)(
     }
   }
 );
-var disabledTag = "pointer-events-none border-(--border-secondary-disabled) bg-(--background-neutral-disabled) text-primary-disabled";
+var disabledTag = "pointer-events-none border-secondary-disabled bg-(--background-neutral-disabled) text-primary-disabled";
 var iconClasses = "flex items-center justify-center w-5 h-5 [&>*]:w-5 [&>*]:h-5 shrink-0 text-primary";
 var Tag = React17.forwardRef(
   (props, ref) => {
@@ -1340,7 +1344,7 @@ var import_icons5 = require("@bubo-squared/icons");
 
 // src/components/ui/dropdown-styles.ts
 var import_class_variance_authority12 = require("class-variance-authority");
-var dropdownSurfaceClass = "z-50 rounded-4 border border-(--border-secondary-hover) bg-(--background-neutral) shadow-card-md";
+var dropdownSurfaceClass = "z-50 rounded-4 border border-secondary-hover bg-(--background-neutral) shadow-card-md";
 var dropdownScrollClass = "max-h-79 overflow-y-auto dropdown-scrollbar";
 var dropdownRowVariants = (0, import_class_variance_authority12.cva)(
   "flex w-full items-center gap-2 pl-(--space-8) pr-(--space-16) text-left text-primary cursor-pointer hover:bg-(--background-secondary)",
@@ -1601,15 +1605,15 @@ var Checkbox = React20.forwardRef(({ label, className, ...props }, forwardedRef)
       {
         ref: forwardedRef,
         className: cn(
-          "group flex h-5 w-5 items-center justify-center rounded-2 border border-(--border-secondary) bg-(--background-neutral) text-primary-inverse",
+          "group flex h-5 w-5 items-center justify-center rounded-2 border border-secondary bg-(--background-neutral) text-primary-inverse",
           "data-[state=checked]:bg-(--background-brand) data-[state=checked]:text-button-white data-[state=checked]:border-none",
           "data-[state=indeterminate]:bg-(--background-brand) data-[state=indeterminate]:text-button-white data-[state=indeterminate]:border-none",
           "data-[state=checked]:hover:bg-(--background-brand-hover) data-[state=indeterminate]:hover:bg-(--background-brand-hover)",
-          "focus-visible:border-(--border-brand)",
+          "focus-visible:border-brand",
           "disabled:bg-(--background-primary-disabled) disabled:border-none disabled:text-(--icon-primary-disabled)",
           "data-[state=checked]:disabled:bg-(--background-primary-disabled) data-[state=checked]:disabled:border-none data-[state=checked]:disabled:text-(--icon-primary-disabled)",
           "data-[state=indeterminate]:disabled:bg-(--background-primary-disabled) data-[state=indeterminate]:disabled:border-none data-[state=indeterminate]:disabled:text-(--icon-primary-disabled)",
-          "focus-ring-primary hover:cursor-pointer hover:border-(--border-secondary-hover)",
+          "focus-ring-primary hover:cursor-pointer hover:border-secondary-hover",
           className
         ),
         ...props,
@@ -1633,7 +1637,7 @@ var React21 = __toESM(require("react"), 1);
 var import_class_variance_authority13 = require("class-variance-authority");
 var import_jsx_runtime23 = require("react/jsx-runtime");
 var inputShellVariants = (0, import_class_variance_authority13.cva)(
-  "group flex w-full items-center rounded-4 border bg-(--background-primary) text-left cursor-text border-(--border-secondary)",
+  "group flex w-full items-center rounded-4 border bg-(--background-primary) text-left cursor-text border-secondary",
   {
     variants: {
       size: {
@@ -1648,7 +1652,7 @@ var inputShellVariants = (0, import_class_variance_authority13.cva)(
         error: "input-error"
       },
       disabled: {
-        true: "bg-(--background-primary-disabled) border-(--border-secondary-disabled) text-primary-disabled cursor-default"
+        true: "bg-(--background-primary-disabled) border-secondary-disabled text-primary-disabled cursor-default"
       }
     },
     defaultVariants: {
@@ -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: {
@@ -2807,7 +2811,7 @@ function ScrollBar({
 // src/components/Inputs/PhoneInput.tsx
 var import_class_variance_authority18 = require("class-variance-authority");
 var import_jsx_runtime33 = require("react/jsx-runtime");
-var inputBase = "h-full rounded-4 border-(--border-secondary) bg-(--background-primary) hover:border-(--border-secondary-hover)";
+var inputBase = "h-full rounded-4 border-secondary bg-(--background-primary) hover:border-secondary-hover";
 var sizeBase = (0, import_class_variance_authority18.cva)(
   "flex w-full",
   {
@@ -2830,7 +2834,7 @@ var inputTextVariants2 = (0, import_class_variance_authority18.cva)("", {
       xl: "h6-title"
     },
     disabled: {
-      true: "text-primary-disabled border-(--border-secondary-disabled)"
+      true: "text-primary-disabled border-secondary-disabled"
     }
   },
   defaultVariants: {
@@ -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
@@ -3137,24 +3163,24 @@ var RadioGroup = React32.forwardRef((props, forwardedRef) => {
                     className: cn(
                       "flex items-center justify-center shrink-0 h-5 w-5 rounded-full border bg-(--background-primary) transition-all",
                       // 1: enabled, unchecked, unfocused, unhovered
-                      "group-data-[state=unchecked]:border-(--border-secondary)",
+                      "group-data-[state=unchecked]:border-secondary",
                       // 2: enabled, checked, unfocused, unhovered
-                      "group-data-[state=checked]:border-(--border-brand)",
+                      "group-data-[state=checked]:border-brand",
                       // 3: enabled, unchecked, hovered, unfocused
-                      "group-data-[state=unchecked]:group-hover:border-(--border-secondary-hover)",
+                      "group-data-[state=unchecked]:group-hover:border-secondary-hover",
                       // 4: enabled, checked, hovered, unfocused
-                      "group-data-[state=checked]:group-hover:border-(--border-brand-hover)",
+                      "group-data-[state=checked]:group-hover:border-brand-hover",
                       "group-data-[state=checked]:group-hover:shadow-[0_0_0_var(--focus-ring-spread)_var(--focus-secondary)]",
                       // 5: enabled, unchecked, focused (override 1/3)
-                      "group-data-[state=unchecked]:group-focus-visible:border-(--border-secondary-hover)",
+                      "group-data-[state=unchecked]:group-focus-visible:border-secondary-hover",
                       // 6: enabled, checked, focused (override 2/4)
-                      "group-data-[state=checked]:group-focus-visible:border-(--border-brand-focus)",
+                      "group-data-[state=checked]:group-focus-visible:border-brand-focus",
                       "group-data-[state=checked]:group-focus-visible:shadow-[0_0_0_var(--focus-ring-spread)_var(--focus-primary)]",
                       // 7: disabled, unchecked (override everything above)
                       "group-[&[data-disabled][data-state=unchecked]]:border-none",
                       "group-[&[data-disabled][data-state=unchecked]]:bg-(--background-primary-disabled)",
                       // 8: disabled, checked (override everything above)
-                      "group-[&[data-disabled][data-state=checked]]:border-(--border-primary-disabled)",
+                      "group-[&[data-disabled][data-state=checked]]:border-primary-disabled",
                       "group-[&[data-disabled][data-state=checked]]:bg-(--background-primary-disabled)"
                     ),
                     children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
@@ -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)
+                )
               ]
             }
           ) }),
@@ -3848,8 +3900,8 @@ var TextArea = React36.forwardRef((props, forwardedRef) => {
   const textareaId = id ?? generatedId;
   const statusBorderClass = {
     default: "",
-    success: "border-(--border-success)",
-    error: "border-(--border-error)"
+    success: "border-success",
+    error: "border-error"
   };
   const statusShellClass = {
     default: "input-default",
@@ -3895,9 +3947,9 @@ var TextArea = React36.forwardRef((props, forwardedRef) => {
         {
           className: cn(
             "relative flex w-full rounded-4 border bg-(--background-primary) cursor-text",
-            "border-(--border-secondary)",
+            "border-secondary",
             statusShellClass[status],
-            disabled && "bg-(--background-primary-disabled) border-(--border-secondary-disabled) cursor-default",
+            disabled && "bg-(--background-primary-disabled) border-secondary-disabled cursor-default",
             statusBorderClass[status],
             className
           ),
@@ -4145,16 +4197,16 @@ var Toggle = React38.forwardRef((props, forwardedRef) => {
                 // Knob position
                 "justify-start peer-checked:justify-end",
                 // 1: enabled, unchecked, unhovered, unfocused
-                "border-(--border-secondary)",
+                "border-secondary",
                 // 3: enabled, unchecked, hovered, unfocused
-                "hover:border-(--border-secondary-hover)",
+                "hover:border-secondary-hover",
                 // 2: enabled, checked, unhovered, unfocused
-                "peer-checked:border-(--border-brand)",
+                "peer-checked:border-brand",
                 // 4: enabled, checked, hovered, unfocused
-                "peer-checked:hover:border-(--border-brand-hover)",
+                "peer-checked:hover:border-brand-hover",
                 "peer-checked:hover:shadow-[0_0_0_var(--focus-ring-spread)_var(--focus-secondary)]",
                 // 5: enabled, unchecked, unhovered, focused
-                "peer-focus-visible:border-(--border-brand-focus)",
+                "peer-focus-visible:border-brand-focus",
                 // 6: enabled, checked, unhovered, focused
                 "peer-checked:peer-focus-visible:bg-(--background-brand-focus)",
                 "peer-checked:peer-focus-visible:shadow-[0_0_0_var(--focus-ring-spread)_var(--focus-primary)]",
@@ -4163,7 +4215,7 @@ var Toggle = React38.forwardRef((props, forwardedRef) => {
                 "peer-disabled:border-none",
                 "peer-disabled:shadow-none",
                 // 8: disabled, checked (override)
-                "peer-disabled:peer-checked:border-(--border-primary-disabled)",
+                "peer-disabled:peer-checked:border-primary-disabled",
                 // Disable hover when disabled
                 "peer-disabled:pointer-events-none",
                 // Knob on (enabled)
@@ -4222,7 +4274,7 @@ var WebsiteInput = React39.forwardRef((props, forwardedRef) => {
   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)",
+    disabled && "bg-[unset] hover:shadow-none hover:border-secondary-disabled border-secondary-disabled",
     spanHeightClass
   );
   const addonTextClass = cn(
@@ -4233,9 +4285,9 @@ var WebsiteInput = React39.forwardRef((props, forwardedRef) => {
   const baseAddonClass = cn(
     "flex items-center gap-2 px-2 h-full",
     // layout + padding
-    "border-(--border-secondary)",
+    "border-secondary",
     // divider color
-    disabled && "border-(--border-secondary-disabled) hover:border-(--border-secondary-disabled)",
+    disabled && "border-secondary-disabled hover:border-secondary-disabled",
     isLeading ? "border-r" : "border-l"
   );
   const iconWrapperClass = cn(
@@ -4498,7 +4550,7 @@ var Breadcrumbs = React43.forwardRef(
             DropdownMenuContent,
             {
               align: "start",
-              className: "bg-(--background-neutral) border-(--border-secondary-hover) shadow-card-md rounded-4",
+              className: "bg-(--background-neutral) border-secondary-hover shadow-card-md rounded-4",
               children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(DropdownMenuGroup, { children: hiddenItems.map((hidden, hiddenIndex) => {
                 const hiddenKey = React43.isValidElement(hidden) && hidden.key != null ? String(hidden.key) : `hidden-${hiddenIndex}`;
                 if (React43.isValidElement(hidden)) {