@bubo-squared/ui-framework 0.2.20 → 0.2.21

package/dist/index.cjs

@@ -151,10 +151,10 @@ var buttonVariants = (0, import_class_variance_authority.cva)(
         ]
       },
       size: {
-        sm: ["px-2", "py-1", "gap-2", "h-9"],
-        md: ["px-2", "py-1", "gap-2", "h-10"],
-        lg: ["px-2.5", "py-1", "gap-2.5", "h-11"],
-        xl: ["px-3", "py-0.5", "gap-3", "h-12"]
+        sm: ["px-3", "py-1", "gap-2", "h-9"],
+        md: ["px-4", "py-2", "gap-2", "h-10"],
+        lg: ["px-4", "py-2", "gap-2.5", "h-11"],
+        xl: ["px-4", "py-2", "gap-3", "h-12"]
       }
     },
     defaultVariants: {
@@ -1583,16 +1583,17 @@ var MenuSubContent = DropdownMenuSubContent;
 var MenuSubTrigger = DropdownMenuSubTrigger;
 
 // src/components/Inputs/Checkbox.tsx
-var React20 = require("react");
+var React20 = __toESM(require("react"), 1);
 var CheckboxPrimitive = __toESM(require("@radix-ui/react-checkbox"), 1);
 var import_icons6 = require("@bubo-squared/icons");
 var import_icons7 = require("@bubo-squared/icons");
 var import_jsx_runtime22 = require("react/jsx-runtime");
-function Checkbox({ label, className, ...props }) {
+var Checkbox = React20.forwardRef(({ label, className, ...props }, forwardedRef) => {
   return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("label", { className: "inline-flex items-center gap-(--space-12) cursor-pointer select-none", children: [
     /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
       CheckboxPrimitive.Root,
       {
+        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",
           "data-[state=checked]:bg-(--background-brand) data-[state=checked]:text-button-white data-[state=checked]:border-none",
@@ -1614,7 +1615,8 @@ function Checkbox({ label, className, ...props }) {
     ),
     label && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "paragraph-md-medium text-primary", children: label })
   ] });
-}
+});
+Checkbox.displayName = "Checkbox";
 
 // src/components/Inputs/Autocomplete.tsx
 var React23 = __toESM(require("react"), 1);
@@ -1747,7 +1749,7 @@ var iconWrapperVariants = (0, import_class_variance_authority14.cva)(
     }
   }
 );
-var Autocomplete = (props) => {
+var Autocomplete = React23.forwardRef((props, forwardedRef) => {
   const {
     label,
     hint,
@@ -1788,6 +1790,18 @@ var Autocomplete = (props) => {
   const [isFocused, setIsFocused] = React23.useState(false);
   const [activeIndex, setActiveIndex] = React23.useState(-1);
   const inputRef = React23.useRef(null);
+  const setInputRef = React23.useCallback(
+    (node) => {
+      inputRef.current = node;
+      if (!forwardedRef) return;
+      if (typeof forwardedRef === "function") {
+        forwardedRef(node);
+      } else {
+        forwardedRef.current = node;
+      }
+    },
+    [forwardedRef]
+  );
   const baseId = React23.useId();
   const inputId = id ?? baseId;
   const listboxId = `${inputId}-listbox`;
@@ -1900,7 +1914,7 @@ var Autocomplete = (props) => {
           /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
             Input,
             {
-              ref: inputRef,
+              ref: setInputRef,
               id: inputId,
               type: "text",
               disabled: disabled ?? void 0,
@@ -1975,7 +1989,7 @@ var Autocomplete = (props) => {
       }
     )
   ] }) });
-};
+});
 Autocomplete.displayName = "Autocomplete";
 
 // src/components/Inputs/Select.tsx
@@ -2058,7 +2072,7 @@ var selectButtonVariants = (0, import_class_variance_authority15.cva)(
     }
   }
 );
-var Select = (props) => {
+var Select = React24.forwardRef((props, forwardedRef) => {
   const {
     label = "Field Label",
     hint = "This is a hint text to help user.",
@@ -2133,6 +2147,7 @@ var Select = (props) => {
             /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(SelectPrimitive.Trigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
               "button",
               {
+                ref: forwardedRef,
                 type: "button",
                 "aria-haspopup": "listbox",
                 "aria-expanded": isOpen,
@@ -2207,7 +2222,7 @@ var Select = (props) => {
       )
     }
   );
-};
+});
 Select.displayName = "Select";
 
 // src/components/Inputs/PasswordInput.tsx
@@ -2271,7 +2286,7 @@ var actionButtonVariants = (0, import_class_variance_authority16.cva)(
     }
   }
 );
-var PasswordInput = (props) => {
+var PasswordInput = React25.forwardRef((props, forwardedRef) => {
   const {
     label,
     hint,
@@ -2295,6 +2310,18 @@ var PasswordInput = (props) => {
   const [isRevealed, setIsRevealed] = React25.useState(false);
   const currentValue = (isControlled ? value : internalValue) ?? "";
   const inputRef = React25.useRef(null);
+  const setInputRef = React25.useCallback(
+    (node) => {
+      inputRef.current = node;
+      if (!forwardedRef) return;
+      if (typeof forwardedRef === "function") {
+        forwardedRef(node);
+      } else {
+        forwardedRef.current = node;
+      }
+    },
+    [forwardedRef]
+  );
   const showLeadingIcon = !!leadingIcon;
   const handleContainerClick = () => {
     if (disabled) return;
@@ -2335,7 +2362,7 @@ var PasswordInput = (props) => {
             /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
               Input,
               {
-                ref: inputRef,
+                ref: setInputRef,
                 type: isRevealed ? "text" : "password",
                 disabled: disabled ?? void 0,
                 placeholder,
@@ -2370,7 +2397,7 @@ var PasswordInput = (props) => {
       )
     }
   );
-};
+});
 PasswordInput.displayName = "PasswordInput";
 
 // src/components/Inputs/PhoneInput.tsx
@@ -3017,19 +3044,20 @@ var FlagComponent = ({ country, countryName }) => {
 var React32 = __toESM(require("react"), 1);
 var RadioGroupPrimitive = __toESM(require("@radix-ui/react-radio-group"), 1);
 var import_jsx_runtime34 = require("react/jsx-runtime");
-var RadioGroup = ({
-  label,
-  hint,
-  hideHint,
-  options,
-  orientation = "vertical",
-  disabled = false,
-  value,
-  defaultValue,
-  onValueChange,
-  className,
-  ...rootProps
-}) => {
+var RadioGroup = React32.forwardRef((props, forwardedRef) => {
+  const {
+    label,
+    hint,
+    hideHint,
+    options,
+    orientation = "vertical",
+    disabled = false,
+    value,
+    defaultValue,
+    onValueChange,
+    className,
+    ...rootProps
+  } = props;
   const groupId = React32.useId();
   const hintId = hint ? `${groupId}-hint` : void 0;
   const handleValueChange = (next) => {
@@ -3046,6 +3074,7 @@ var RadioGroup = ({
       children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
         RadioGroupPrimitive.Root,
         {
+          ref: forwardedRef,
           ...rootProps,
           value,
           defaultValue,
@@ -3126,7 +3155,8 @@ var RadioGroup = ({
       )
     }
   );
-};
+});
+RadioGroup.displayName = "RadioGroup";
 
 // src/components/Inputs/SearchInput.tsx
 var React33 = __toESM(require("react"), 1);
@@ -3162,7 +3192,7 @@ var iconWrapperVariants3 = (0, import_class_variance_authority19.cva)("flex item
     size: "lg"
   }
 });
-var SearchInput = (props) => {
+var SearchInput = React33.forwardRef((props, forwardedRef) => {
   const {
     placeholder = "Search...",
     size = "lg",
@@ -3174,6 +3204,18 @@ var SearchInput = (props) => {
     ...inputProps
   } = props;
   const inputRef = React33.useRef(null);
+  const setInputRef = React33.useCallback(
+    (node) => {
+      inputRef.current = node;
+      if (!forwardedRef) return;
+      if (typeof forwardedRef === "function") {
+        forwardedRef(node);
+      } else {
+        forwardedRef.current = node;
+      }
+    },
+    [forwardedRef]
+  );
   const handleContainerClick = () => {
     if (disabled) return;
     inputRef.current?.focus();
@@ -3192,7 +3234,7 @@ var SearchInput = (props) => {
         /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
           Input,
           {
-            ref: inputRef,
+            ref: setInputRef,
             type: "search",
             placeholder,
             disabled: disabled ?? void 0,
@@ -3207,7 +3249,7 @@ var SearchInput = (props) => {
       ]
     }
   ) }) });
-};
+});
 SearchInput.displayName = "SearchInput";
 
 // src/components/Inputs/Slider.tsx
@@ -3310,7 +3352,7 @@ var toArray = (value) => {
   if (value === void 0) return void 0;
   return Array.isArray(value) ? value : [value];
 };
-var Slider = (props) => {
+var Slider = React35.forwardRef((props, forwardedRef) => {
   const {
     name,
     display = "flat",
@@ -3626,6 +3668,7 @@ var Slider = (props) => {
     {
       className: wrapperBase,
       style: { marginInline: `${thumbRadius}px` },
+      ref: forwardedRef,
       children: [
         name && /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(import_jsx_runtime37.Fragment, { children: [
           /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
@@ -3691,14 +3734,14 @@ var Slider = (props) => {
       ]
     }
   );
-};
+});
 Slider.displayName = "Slider";
 
 // src/components/Inputs/TextArea.tsx
 var React36 = __toESM(require("react"), 1);
 var import_icons13 = require("@bubo-squared/icons");
 var import_jsx_runtime38 = require("react/jsx-runtime");
-var TextArea = (props) => {
+var TextArea = React36.forwardRef((props, forwardedRef) => {
   const {
     label,
     hint,
@@ -3727,6 +3770,18 @@ var TextArea = (props) => {
   const showCharacterLimit = type === "character-limit" && typeof effectiveMaxLength === "number";
   const textareaRef = React36.useRef(null);
   const containerRef = React36.useRef(null);
+  const setTextareaRef = React36.useCallback(
+    (node) => {
+      textareaRef.current = node;
+      if (!forwardedRef) return;
+      if (typeof forwardedRef === "function") {
+        forwardedRef(node);
+      } else {
+        forwardedRef.current = node;
+      }
+    },
+    [forwardedRef]
+  );
   const [height, setHeight] = React36.useState(void 0);
   const [width, setWidth] = React36.useState(void 0);
   const minHeight = 80;
@@ -3811,7 +3866,7 @@ var TextArea = (props) => {
               {
                 id: textareaId,
                 name,
-                ref: textareaRef,
+                ref: setTextareaRef,
                 disabled: disabled ?? void 0,
                 value: isControlled ? value : currentValue,
                 defaultValue: isControlled ? void 0 : defaultValue,
@@ -3862,7 +3917,7 @@ var TextArea = (props) => {
       )
     }
   );
-};
+});
 TextArea.displayName = "TextArea";
 
 // src/components/Inputs/TextInput.tsx
@@ -3901,7 +3956,7 @@ var iconWrapperVariants4 = (0, import_class_variance_authority20.cva)(
     }
   }
 );
-var TextInput = (props) => {
+var TextInput = React37.forwardRef((props, forwardedRef) => {
   const {
     label,
     hint,
@@ -3924,6 +3979,18 @@ var TextInput = (props) => {
   );
   const currentValue = (isControlled ? value : internalValue) ?? "";
   const inputRef = React37.useRef(null);
+  const setInputRef = React37.useCallback(
+    (node) => {
+      inputRef.current = node;
+      if (!forwardedRef) return;
+      if (typeof forwardedRef === "function") {
+        forwardedRef(node);
+      } else {
+        forwardedRef.current = node;
+      }
+    },
+    [forwardedRef]
+  );
   const handleContainerClick = () => {
     if (disabled) return;
     inputRef.current?.focus();
@@ -3965,7 +4032,7 @@ var TextInput = (props) => {
             /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
               Input,
               {
-                ref: inputRef,
+                ref: setInputRef,
                 type: "text",
                 disabled: disabled ?? void 0,
                 placeholder,
@@ -3994,13 +4061,13 @@ var TextInput = (props) => {
       )
     }
   );
-};
+});
 TextInput.displayName = "TextInput";
 
 // src/components/Inputs/Toggle.tsx
-var React38 = require("react");
+var React38 = __toESM(require("react"), 1);
 var import_jsx_runtime40 = require("react/jsx-runtime");
-var Toggle = (props) => {
+var Toggle = React38.forwardRef((props, forwardedRef) => {
   const { label, className, disabled, ...inputProps } = props;
   return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
     "label",
@@ -4014,6 +4081,7 @@ var Toggle = (props) => {
           /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
             "input",
             {
+              ref: forwardedRef,
               type: "checkbox",
               disabled,
               className: "peer sr-only",
@@ -4085,13 +4153,13 @@ var Toggle = (props) => {
       ]
     }
   );
-};
+});
 Toggle.displayName = "Toggle";
 
 // src/components/Inputs/WebsiteInput.tsx
-var React39 = require("react");
+var React39 = __toESM(require("react"), 1);
 var import_jsx_runtime41 = require("react/jsx-runtime");
-var WebsiteInput = (props) => {
+var WebsiteInput = React39.forwardRef((props, forwardedRef) => {
   const {
     hierarchy = "leading",
     protocolLabel = "http://",
@@ -4138,6 +4206,7 @@ var WebsiteInput = (props) => {
   return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
     TextInput,
     {
+      ref: forwardedRef,
       ...rest,
       size,
       disabled,
@@ -4146,7 +4215,7 @@ var WebsiteInput = (props) => {
       trailingIcon: !isLeading ? trailingAddon : void 0
     }
   );
-};
+});
 WebsiteInput.displayName = "WebsiteInput";
 
 // src/components/Feedback/Popover.tsx