@sikka/hawa 0.29.14-next → 0.30.0-next

package/dist/elements/index.mjs

@@ -28,7 +28,7 @@ import {
   TabsTrigger,
   Textarea,
   UncheckMark
-} from "../chunk-XKVSLAKW.mjs";
+} from "../chunk-TGB72TYK.mjs";
 import {
   Sheet,
   SheetClose,
@@ -385,7 +385,7 @@ var DialogOverlay = React6.forwardRef(({ className, ...props }, ref) => /* @__PU
     ...props
   }
 ));
-var DialogContent = React6.forwardRef(({ className, children, persist, hideCloseButton, ...props }, ref) => /* @__PURE__ */ React6.createElement(DialogPortal, null, /* @__PURE__ */ React6.createElement(DialogOverlay, null), /* @__PURE__ */ React6.createElement(
+var DialogContent = React6.forwardRef(({ className, children, persist, hideCloseButton, ...props }, ref) => /* @__PURE__ */ React6.createElement(DialogPortal, { container: props.container }, /* @__PURE__ */ React6.createElement(DialogOverlay, null), /* @__PURE__ */ React6.createElement(
   DialogPrimitive.Content,
   {
     onPointerDownOutside: (e) => {
@@ -1465,11 +1465,13 @@ var Combobox = React13.forwardRef(
     direction,
     labelProps,
     data,
+    renderOption,
     ...props
   }, ref) => {
     var _a, _b, _c;
     const [open, setOpen] = React13.useState(false);
     const [value, setValue] = React13.useState(defaultValue);
+    const containerRef = React13.useRef(null);
     function getProperty(obj, key) {
       return obj[key];
     }
@@ -1484,7 +1486,8 @@ var Combobox = React13.forwardRef(
         className: cn(
           "hawa-relative hawa-flex hawa-h-fit hawa-flex-col hawa-gap-2",
           props.width === "fit" ? "hawa-w-fit" : "hawa-w-full"
-        )
+        ),
+        ref: containerRef
       },
       props.label && /* @__PURE__ */ React13.createElement(Label, { ...labelProps }, props.label),
       /* @__PURE__ */ React13.createElement(PopoverPrimitive.Root, { open, onOpenChange: handleOpenChange }, /* @__PURE__ */ React13.createElement(PopoverTrigger, { asChild: true }, props.isLoading ? /* @__PURE__ */ React13.createElement("div", { className: "hawa-pb-2" }, /* @__PURE__ */ React13.createElement(Skeleton, { className: "hawa-h-[40px] hawa-w-full" })) : /* @__PURE__ */ React13.createElement("div", { className: "hawa-flex hawa-flex-col hawa-items-start hawa-gap-2 " }, /* @__PURE__ */ React13.createElement(
@@ -1542,7 +1545,8 @@ var Combobox = React13.forwardRef(
         {
           sideOffset: 0,
           className: cn("popover-w-parent", props.helperText && "-hawa-mt-4"),
-          dir: direction
+          dir: direction,
+          container: containerRef.current
         },
         /* @__PURE__ */ React13.createElement(Command, null, !props.hideInput && /* @__PURE__ */ React13.createElement(
           CommandInput,
@@ -1550,7 +1554,7 @@ var Combobox = React13.forwardRef(
             dir: direction,
             placeholder: ((_b = props.texts) == null ? void 0 : _b.searchPlaceholder) || "Search"
           }
-        ), /* @__PURE__ */ React13.createElement(CommandEmpty, null, ((_c = props.texts) == null ? void 0 : _c.noItems) || "No items found."), /* @__PURE__ */ React13.createElement(CommandGroup, { className: "hawa-max-h-[200px] hawa-overflow-y-auto" }, data.map((item, i) => /* @__PURE__ */ React13.createElement(
+        ), /* @__PURE__ */ React13.createElement(CommandEmpty, null, ((_c = props.texts) == null ? void 0 : _c.noItems) || "No items found."), /* @__PURE__ */ React13.createElement(CommandGroup, { className: "hawa-max-h-[200px] hawa-overflow-y-scroll" }, data.map((item, i) => /* @__PURE__ */ React13.createElement(
           CommandItem,
           {
             key: i,
@@ -1586,7 +1590,7 @@ var Combobox = React13.forwardRef(
             },
             /* @__PURE__ */ React13.createElement("polyline", { points: "20 6 9 17 4 12" })
           ),
-          getProperty(item, labelKey)
+          renderOption ? renderOption(item) : getProperty(item, labelKey)
         ))))
       ))
     );
@@ -1987,7 +1991,7 @@ var AppStores = (props) => {
 };
 
 // elements/badge/Badge.tsx
-import React19, { useEffect as useEffect5, useState as useState7, useRef as useRef4 } from "react";
+import React19, { useEffect as useEffect5, useState as useState7, useRef as useRef5 } from "react";
 var Badge = ({
   anchor,
   position = "right",
@@ -1996,7 +2000,7 @@ var Badge = ({
   className
 }) => {
   const [badgePosition, setBadgePosition] = useState7(null);
-  const indicatorRef = useRef4(null);
+  const indicatorRef = useRef5(null);
   const sizeStyles2 = {
     small: { top: 4, left: 6, right: 7, classes: "hawa-w-3 hawa-h-3" },
     default: { top: 4, left: 7, right: 5, classes: "hawa-w-3 hawa-h-3" },
@@ -2050,7 +2054,7 @@ var BadgedComponent = ({
   size,
   text
 }) => {
-  const ref = useRef4(null);
+  const ref = useRef5(null);
   return /* @__PURE__ */ React19.createElement("div", { className: cn("hawa-relative hawa-w-fit", className), ref }, !hideBadge && /* @__PURE__ */ React19.createElement(
     Badge,
     {
@@ -3132,7 +3136,7 @@ function Toaster(props) {
 }
 
 // elements/destroyableCard/DestroyableCard.tsx
-import React32, { useRef as useRef5, useState as useState13 } from "react";
+import React32, { useRef as useRef6, useState as useState13 } from "react";
 var DestroyableCard = ({
   position = "bottom-right",
   fixed,
@@ -3140,7 +3144,7 @@ var DestroyableCard = ({
   ...props
 }) => {
   const [closed, setClosed] = useState13(false);
-  const popUpRef = useRef5(null);
+  const popUpRef = useRef6(null);
   const boxPosition = {
     "bottom-right": "hawa-right-4 hawa-bottom-4",
     "bottom-left": "hawa-left-4 hawa-bottom-4"

package/dist/index.d.mts

@@ -343,6 +343,7 @@ declare const DialogPortal: {
 declare const DialogContent: React$1.ForwardRefExoticComponent<Omit<SheetPrimitive.DialogContentProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & {
     persist?: boolean | undefined;
     hideCloseButton?: boolean | undefined;
+    container?: HTMLElement | undefined;
 } & React$1.RefAttributes<HTMLDivElement>>;
 declare const DialogCarouselContent: React$1.ForwardRefExoticComponent<Omit<SheetPrimitive.DialogContentProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & {
     hideCloseButton?: boolean | undefined;
@@ -559,6 +560,7 @@ type ComboboxTypes<T> = {
     /** If true, it will show a red asterisk next to the label*/
     isRequired?: boolean;
     onChange?: (e: any) => void;
+    renderOption?: (item: T) => React$1.ReactNode;
 };
 declare const Combobox: React$1.ForwardRefExoticComponent<ComboboxTypes<any> & React$1.RefAttributes<HTMLDivElement>>;
 
@@ -723,7 +725,9 @@ declare const CommandShortcut: {
     displayName: string;
 };
 
-declare const PopoverContent: React$1.ForwardRefExoticComponent<Omit<PopoverPrimitive.PopoverContentProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+declare const PopoverContent: React$1.ForwardRefExoticComponent<Omit<PopoverPrimitive.PopoverContentProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & {
+    container?: HTMLElement | null | undefined;
+} & React$1.RefAttributes<HTMLDivElement>>;
 interface PopoverProps {
     side?: PositionType;
     align?: "start" | "center" | "end";
@@ -918,8 +922,7 @@ declare const PasswordInput: React__default.FC<PasswordInputType$1>;
 
 declare const Slider: React$1.ForwardRefExoticComponent<Omit<SliderPrimitive.SliderProps & React$1.RefAttributes<HTMLSpanElement>, "ref"> & React$1.RefAttributes<HTMLSpanElement>>;
 
-type DataProps = {};
-type SimpleTableProps = {
+type SimpleTableProps<DataProps = {}> = {
     direction?: DirectionType;
     columns: ColumnDef<DataProps>[];
     data: DataProps[];
@@ -939,9 +942,11 @@ type SimpleTableProps = {
 declare module "@tanstack/table-core" {
     interface ColumnMeta<TData extends RowData, TValue> {
         padding?: "condensed" | "default" | "noPadding";
+        sortable?: boolean;
+        hidden?: boolean;
     }
 }
-declare const SimpleTable: React$1.FC<SimpleTableProps>;
+declare const SimpleTable: <DataProps extends {}>({ columns, data, classNames, ...props }: SimpleTableProps<DataProps>) => React$1.JSX.Element;
 
 type SeparatorProps = {
     className?: string;

package/dist/index.d.ts

@@ -343,6 +343,7 @@ declare const DialogPortal: {
 declare const DialogContent: React$1.ForwardRefExoticComponent<Omit<SheetPrimitive.DialogContentProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & {
     persist?: boolean | undefined;
     hideCloseButton?: boolean | undefined;
+    container?: HTMLElement | undefined;
 } & React$1.RefAttributes<HTMLDivElement>>;
 declare const DialogCarouselContent: React$1.ForwardRefExoticComponent<Omit<SheetPrimitive.DialogContentProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & {
     hideCloseButton?: boolean | undefined;
@@ -559,6 +560,7 @@ type ComboboxTypes<T> = {
     /** If true, it will show a red asterisk next to the label*/
     isRequired?: boolean;
     onChange?: (e: any) => void;
+    renderOption?: (item: T) => React$1.ReactNode;
 };
 declare const Combobox: React$1.ForwardRefExoticComponent<ComboboxTypes<any> & React$1.RefAttributes<HTMLDivElement>>;
 
@@ -723,7 +725,9 @@ declare const CommandShortcut: {
     displayName: string;
 };
 
-declare const PopoverContent: React$1.ForwardRefExoticComponent<Omit<PopoverPrimitive.PopoverContentProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+declare const PopoverContent: React$1.ForwardRefExoticComponent<Omit<PopoverPrimitive.PopoverContentProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & {
+    container?: HTMLElement | null | undefined;
+} & React$1.RefAttributes<HTMLDivElement>>;
 interface PopoverProps {
     side?: PositionType;
     align?: "start" | "center" | "end";
@@ -918,8 +922,7 @@ declare const PasswordInput: React__default.FC<PasswordInputType$1>;
 
 declare const Slider: React$1.ForwardRefExoticComponent<Omit<SliderPrimitive.SliderProps & React$1.RefAttributes<HTMLSpanElement>, "ref"> & React$1.RefAttributes<HTMLSpanElement>>;
 
-type DataProps = {};
-type SimpleTableProps = {
+type SimpleTableProps<DataProps = {}> = {
     direction?: DirectionType;
     columns: ColumnDef<DataProps>[];
     data: DataProps[];
@@ -939,9 +942,11 @@ type SimpleTableProps = {
 declare module "@tanstack/table-core" {
     interface ColumnMeta<TData extends RowData, TValue> {
         padding?: "condensed" | "default" | "noPadding";
+        sortable?: boolean;
+        hidden?: boolean;
     }
 }
-declare const SimpleTable: React$1.FC<SimpleTableProps>;
+declare const SimpleTable: <DataProps extends {}>({ columns, data, classNames, ...props }: SimpleTableProps<DataProps>) => React$1.JSX.Element;
 
 type SeparatorProps = {
     className?: string;

package/dist/index.js

@@ -1900,7 +1900,7 @@ var DialogOverlay = React14.forwardRef(({ className, ...props }, ref) => /* @__P
     ...props
   }
 ));
-var DialogContent = React14.forwardRef(({ className, children, persist, hideCloseButton, ...props }, ref) => /* @__PURE__ */ React14.createElement(DialogPortal, null, /* @__PURE__ */ React14.createElement(DialogOverlay, null), /* @__PURE__ */ React14.createElement(
+var DialogContent = React14.forwardRef(({ className, children, persist, hideCloseButton, ...props }, ref) => /* @__PURE__ */ React14.createElement(DialogPortal, { container: props.container }, /* @__PURE__ */ React14.createElement(DialogOverlay, null), /* @__PURE__ */ React14.createElement(
   DialogPrimitive.Content,
   {
     onPointerDownOutside: (e) => {
@@ -3423,72 +3423,10 @@ var Radio = ({
 var React27 = __toESM(require("react"));
 var PopoverPrimitive2 = __toESM(require("@radix-ui/react-popover"));
 
-// elements/popover/Popover.tsx
-var React25 = __toESM(require("react"));
-var PopoverPrimitive = __toESM(require("@radix-ui/react-popover"));
-var PopoverContent = React25.forwardRef(({ className, align = "center", sideOffset = 4, ...props }, ref) => /* @__PURE__ */ React25.createElement(PopoverPrimitive.Portal, null, /* @__PURE__ */ React25.createElement(
-  PopoverPrimitive.Content,
-  {
-    ref,
-    align,
-    sideOffset,
-    className: cn(
-      "dark:dark-shadow hawa-z-50 hawa-rounded hawa-border hawa-bg-popover hawa-text-popover-foreground hawa-shadow-md hawa-outline-none data-[state=open]:hawa-animate-in data-[state=closed]:hawa-animate-out data-[state=closed]:hawa-fade-out-0 data-[state=open]:hawa-fade-in-0 data-[state=closed]:hawa-zoom-out-95 data-[state=open]:hawa-zoom-in-95 data-[side=bottom]:hawa-slide-in-from-top-2 data-[side=left]:hawa-slide-in-from-right-2 data-[side=right]:hawa-slide-in-from-left-2 data-[side=top]:hawa-slide-in-from-bottom-2",
-      className
-    ),
-    ...props
-  }
-)));
-PopoverContent.displayName = PopoverPrimitive.Content.displayName;
-var Popover = ({
-  trigger,
-  children,
-  className,
-  align = "center",
-  side,
-  sideOffset = 4,
-  open,
-  width = "default",
-  disableTrigger,
-  contentProps,
-  triggerProps,
-  ...props
-}) => {
-  let widthStyles = {
-    trigger: "var(--radix-popover-trigger-width)",
-    default: "auto"
-  };
-  return /* @__PURE__ */ React25.createElement(PopoverPrimitive.Root, { open, ...props }, /* @__PURE__ */ React25.createElement(
-    PopoverPrimitive.Trigger,
-    {
-      className: "hawa-w-full",
-      disabled: disableTrigger,
-      ...triggerProps
-    },
-    trigger
-  ), /* @__PURE__ */ React25.createElement(
-    PopoverContent,
-    {
-      side,
-      className,
-      align,
-      sideOffset,
-      style: {
-        width: widthStyles[width],
-        maxWidth: "var(--radix-popover-content-available-width)",
-        maxHeight: "var(--radix-popover-content-available-height)"
-      },
-      ...contentProps
-    },
-    children
-  ));
-};
-var PopoverTrigger = PopoverPrimitive.Trigger;
-
 // elements/command/Command.tsx
-var React26 = __toESM(require("react"));
+var React25 = __toESM(require("react"));
 var import_cmdk = require("cmdk");
-var Command = React26.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React26.createElement(
+var Command = React25.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React25.createElement(
   import_cmdk.Command,
   {
     ref,
@@ -3501,15 +3439,15 @@ var Command = React26.forwardRef(({ className, ...props }, ref) => /* @__PURE__
 ));
 Command.displayName = import_cmdk.Command.displayName;
 var CommandDialog = ({ children, ...props }) => {
-  return /* @__PURE__ */ React26.createElement(Dialog, { ...props }, /* @__PURE__ */ React26.createElement(DialogContent, { className: "hawa-overflow-hidden hawa-p-0 hawa-shadow-lg" }, /* @__PURE__ */ React26.createElement(Command, { className: "[&_[cmdk-group-heading]]:hawa-px-2 [&_[cmdk-group-heading]]:hawa-font-medium [&_[cmdk-group-heading]]:hawa-text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:hawa-pt-0 [&_[cmdk-group]]:hawa-px-2 [&_[cmdk-input-wrapper]_svg]:hawa-h-5 [&_[cmdk-input-wrapper]_svg]:hawa-w-5 [&_[cmdk-input]]:hawa-h-12 [&_[cmdk-item]]:hawa-px-2 [&_[cmdk-item]]:hawa-py-3 [&_[cmdk-item]_svg]:hawa-h-5 [&_[cmdk-item]_svg]:hawa-w-5" }, children)));
+  return /* @__PURE__ */ React25.createElement(Dialog, { ...props }, /* @__PURE__ */ React25.createElement(DialogContent, { className: "hawa-overflow-hidden hawa-p-0 hawa-shadow-lg" }, /* @__PURE__ */ React25.createElement(Command, { className: "[&_[cmdk-group-heading]]:hawa-px-2 [&_[cmdk-group-heading]]:hawa-font-medium [&_[cmdk-group-heading]]:hawa-text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:hawa-pt-0 [&_[cmdk-group]]:hawa-px-2 [&_[cmdk-input-wrapper]_svg]:hawa-h-5 [&_[cmdk-input-wrapper]_svg]:hawa-w-5 [&_[cmdk-input]]:hawa-h-12 [&_[cmdk-item]]:hawa-px-2 [&_[cmdk-item]]:hawa-py-3 [&_[cmdk-item]_svg]:hawa-h-5 [&_[cmdk-item]_svg]:hawa-w-5" }, children)));
 };
-var CommandInput = React26.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React26.createElement(
+var CommandInput = React25.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React25.createElement(
   "div",
   {
     className: "hawa-flex hawa-items-center hawa-border-b hawa-px-3",
     "cmdk-input-wrapper": ""
   },
-  /* @__PURE__ */ React26.createElement(
+  /* @__PURE__ */ React25.createElement(
     "svg",
     {
       "aria-label": "Search Icon",
@@ -3524,10 +3462,10 @@ var CommandInput = React26.forwardRef(({ className, ...props }, ref) => /* @__PU
       strokeLinejoin: "round",
       className: "hawa-icon hawa-me-2 hawa-shrink-0 hawa-opacity-50"
     },
-    /* @__PURE__ */ React26.createElement("circle", { cx: "11", cy: "11", r: "8" }),
-    /* @__PURE__ */ React26.createElement("path", { d: "m21 21-4.3-4.3" })
+    /* @__PURE__ */ React25.createElement("circle", { cx: "11", cy: "11", r: "8" }),
+    /* @__PURE__ */ React25.createElement("path", { d: "m21 21-4.3-4.3" })
   ),
-  /* @__PURE__ */ React26.createElement(
+  /* @__PURE__ */ React25.createElement(
     import_cmdk.Command.Input,
     {
       ref,
@@ -3540,7 +3478,7 @@ var CommandInput = React26.forwardRef(({ className, ...props }, ref) => /* @__PU
   )
 ));
 CommandInput.displayName = import_cmdk.Command.Input.displayName;
-var CommandList = React26.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React26.createElement(
+var CommandList = React25.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React25.createElement(
   import_cmdk.Command.List,
   {
     ref,
@@ -3552,7 +3490,7 @@ var CommandList = React26.forwardRef(({ className, ...props }, ref) => /* @__PUR
   }
 ));
 CommandList.displayName = import_cmdk.Command.List.displayName;
-var CommandEmpty = React26.forwardRef((props, ref) => /* @__PURE__ */ React26.createElement(
+var CommandEmpty = React25.forwardRef((props, ref) => /* @__PURE__ */ React25.createElement(
   import_cmdk.Command.Empty,
   {
     ref,
@@ -3561,7 +3499,7 @@ var CommandEmpty = React26.forwardRef((props, ref) => /* @__PURE__ */ React26.cr
   }
 ));
 CommandEmpty.displayName = import_cmdk.Command.Empty.displayName;
-var CommandGroup = React26.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React26.createElement(
+var CommandGroup = React25.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React25.createElement(
   import_cmdk.Command.Group,
   {
     ref,
@@ -3573,7 +3511,7 @@ var CommandGroup = React26.forwardRef(({ className, ...props }, ref) => /* @__PU
   }
 ));
 CommandGroup.displayName = import_cmdk.Command.Group.displayName;
-var CommandSeparator = React26.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React26.createElement(
+var CommandSeparator = React25.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React25.createElement(
   import_cmdk.Command.Separator,
   {
     ref,
@@ -3582,7 +3520,7 @@ var CommandSeparator = React26.forwardRef(({ className, ...props }, ref) => /* @
   }
 ));
 CommandSeparator.displayName = import_cmdk.Command.Separator.displayName;
-var CommandItem = React26.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React26.createElement(
+var CommandItem = React25.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React25.createElement(
   import_cmdk.Command.Item,
   {
     ref,
@@ -3598,7 +3536,7 @@ var CommandShortcut = ({
   className,
   ...props
 }) => {
-  return /* @__PURE__ */ React26.createElement(
+  return /* @__PURE__ */ React25.createElement(
     "span",
     {
       className: cn(
@@ -3611,6 +3549,70 @@ var CommandShortcut = ({
 };
 CommandShortcut.displayName = "CommandShortcut";
 
+// elements/popover/Popover.tsx
+var React26 = __toESM(require("react"));
+var PopoverPrimitive = __toESM(require("@radix-ui/react-popover"));
+var PopoverContent = React26.forwardRef(
+  ({ className, align = "center", sideOffset = 4, container, ...props }, ref) => /* @__PURE__ */ React26.createElement(PopoverPrimitive.Portal, { container }, /* @__PURE__ */ React26.createElement(
+    PopoverPrimitive.Content,
+    {
+      ref,
+      align,
+      sideOffset,
+      className: cn(
+        "dark:dark-shadow hawa-z-50 hawa-rounded hawa-border hawa-bg-popover hawa-text-popover-foreground hawa-shadow-md hawa-outline-none data-[state=open]:hawa-animate-in data-[state=closed]:hawa-animate-out data-[state=closed]:hawa-fade-out-0 data-[state=open]:hawa-fade-in-0 data-[state=closed]:hawa-zoom-out-95 data-[state=open]:hawa-zoom-in-95 data-[side=bottom]:hawa-slide-in-from-top-2 data-[side=left]:hawa-slide-in-from-right-2 data-[side=right]:hawa-slide-in-from-left-2 data-[side=top]:hawa-slide-in-from-bottom-2",
+        className
+      ),
+      ...props
+    }
+  ))
+);
+PopoverContent.displayName = PopoverPrimitive.Content.displayName;
+var Popover = ({
+  trigger,
+  children,
+  className,
+  align = "center",
+  side,
+  sideOffset = 4,
+  open,
+  width = "default",
+  disableTrigger,
+  contentProps,
+  triggerProps,
+  ...props
+}) => {
+  let widthStyles = {
+    trigger: "var(--radix-popover-trigger-width)",
+    default: "auto"
+  };
+  return /* @__PURE__ */ React26.createElement(PopoverPrimitive.Root, { open, ...props }, /* @__PURE__ */ React26.createElement(
+    PopoverPrimitive.Trigger,
+    {
+      className: "hawa-w-full",
+      disabled: disableTrigger,
+      ...triggerProps
+    },
+    trigger
+  ), /* @__PURE__ */ React26.createElement(
+    PopoverContent,
+    {
+      side,
+      className,
+      align,
+      sideOffset,
+      style: {
+        width: widthStyles[width],
+        maxWidth: "var(--radix-popover-content-available-width)",
+        maxHeight: "var(--radix-popover-content-available-height)"
+      },
+      ...contentProps
+    },
+    children
+  ));
+};
+var PopoverTrigger = PopoverPrimitive.Trigger;
+
 // elements/combobox/Combobox.tsx
 var Combobox = React27.forwardRef(
   ({
@@ -3621,11 +3623,13 @@ var Combobox = React27.forwardRef(
     direction,
     labelProps,
     data,
+    renderOption,
     ...props
   }, ref) => {
     var _a, _b, _c;
     const [open, setOpen] = React27.useState(false);
     const [value, setValue] = React27.useState(defaultValue);
+    const containerRef = React27.useRef(null);
     function getProperty(obj, key) {
       return obj[key];
     }
@@ -3640,7 +3644,8 @@ var Combobox = React27.forwardRef(
         className: cn(
           "hawa-relative hawa-flex hawa-h-fit hawa-flex-col hawa-gap-2",
           props.width === "fit" ? "hawa-w-fit" : "hawa-w-full"
-        )
+        ),
+        ref: containerRef
       },
       props.label && /* @__PURE__ */ React27.createElement(Label2, { ...labelProps }, props.label),
       /* @__PURE__ */ React27.createElement(PopoverPrimitive2.Root, { open, onOpenChange: handleOpenChange }, /* @__PURE__ */ React27.createElement(PopoverTrigger, { asChild: true }, props.isLoading ? /* @__PURE__ */ React27.createElement("div", { className: "hawa-pb-2" }, /* @__PURE__ */ React27.createElement(Skeleton, { className: "hawa-h-[40px] hawa-w-full" })) : /* @__PURE__ */ React27.createElement("div", { className: "hawa-flex hawa-flex-col hawa-items-start hawa-gap-2 " }, /* @__PURE__ */ React27.createElement(
@@ -3698,7 +3703,8 @@ var Combobox = React27.forwardRef(
         {
           sideOffset: 0,
           className: cn("popover-w-parent", props.helperText && "-hawa-mt-4"),
-          dir: direction
+          dir: direction,
+          container: containerRef.current
         },
         /* @__PURE__ */ React27.createElement(Command, null, !props.hideInput && /* @__PURE__ */ React27.createElement(
           CommandInput,
@@ -3706,7 +3712,7 @@ var Combobox = React27.forwardRef(
             dir: direction,
             placeholder: ((_b = props.texts) == null ? void 0 : _b.searchPlaceholder) || "Search"
           }
-        ), /* @__PURE__ */ React27.createElement(CommandEmpty, null, ((_c = props.texts) == null ? void 0 : _c.noItems) || "No items found."), /* @__PURE__ */ React27.createElement(CommandGroup, { className: "hawa-max-h-[200px] hawa-overflow-y-auto" }, data.map((item, i) => /* @__PURE__ */ React27.createElement(
+        ), /* @__PURE__ */ React27.createElement(CommandEmpty, null, ((_c = props.texts) == null ? void 0 : _c.noItems) || "No items found."), /* @__PURE__ */ React27.createElement(CommandGroup, { className: "hawa-max-h-[200px] hawa-overflow-y-scroll" }, data.map((item, i) => /* @__PURE__ */ React27.createElement(
           CommandItem,
           {
             key: i,
@@ -3742,7 +3748,7 @@ var Combobox = React27.forwardRef(
             },
             /* @__PURE__ */ React27.createElement("polyline", { points: "20 6 9 17 4 12" })
           ),
-          getProperty(item, labelKey)
+          renderOption ? renderOption(item) : getProperty(item, labelKey)
         ))))
       ))
     );