@idds/react 1.5.31 → 1.5.33

package/dist/index.es.js

@@ -1,5 +1,5 @@
 import { jsxs, jsx, Fragment } from "react/jsx-runtime";
-import React, { createContext, useRef, useState, useCallback, useMemo, useContext, useId, useEffect, forwardRef, createElement, Fragment as Fragment$1, useImperativeHandle } from "react";
+import React, { createContext, useRef, useState, useCallback, useMemo, useContext, useId, useEffect, forwardRef, createElement, useImperativeHandle, Fragment as Fragment$1 } from "react";
 import { createPortal } from "react-dom";
 const iddsColorTokens = {
   // Neutral Colors
@@ -824,136 +824,128 @@ const createReactComponent = (type, iconName, iconNamePascal, iconNode) => {
  * This source code is licensed under the MIT license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$v = [["path", { "d": "M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0", "key": "svg-0" }], ["path", { "d": "M12 8v4", "key": "svg-1" }], ["path", { "d": "M12 16h.01", "key": "svg-2" }]];
-const IconAlertCircle = createReactComponent("outline", "alert-circle", "AlertCircle", __iconNode$v);
+const __iconNode$u = [["path", { "d": "M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0", "key": "svg-0" }], ["path", { "d": "M12 8v4", "key": "svg-1" }], ["path", { "d": "M12 16h.01", "key": "svg-2" }]];
+const IconAlertCircle = createReactComponent("outline", "alert-circle", "AlertCircle", __iconNode$u);
 /**
  * @license @tabler/icons-react v3.35.0 - MIT
  *
  * This source code is licensed under the MIT license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$u = [["path", { "d": "M12 9v4", "key": "svg-0" }], ["path", { "d": "M10.363 3.591l-8.106 13.534a1.914 1.914 0 0 0 1.636 2.871h16.214a1.914 1.914 0 0 0 1.636 -2.87l-8.106 -13.536a1.914 1.914 0 0 0 -3.274 0z", "key": "svg-1" }], ["path", { "d": "M12 16h.01", "key": "svg-2" }]];
-const IconAlertTriangle = createReactComponent("outline", "alert-triangle", "AlertTriangle", __iconNode$u);
+const __iconNode$t = [["path", { "d": "M12 9v4", "key": "svg-0" }], ["path", { "d": "M10.363 3.591l-8.106 13.534a1.914 1.914 0 0 0 1.636 2.871h16.214a1.914 1.914 0 0 0 1.636 -2.87l-8.106 -13.536a1.914 1.914 0 0 0 -3.274 0z", "key": "svg-1" }], ["path", { "d": "M12 16h.01", "key": "svg-2" }]];
+const IconAlertTriangle = createReactComponent("outline", "alert-triangle", "AlertTriangle", __iconNode$t);
 /**
  * @license @tabler/icons-react v3.35.0 - MIT
  *
  * This source code is licensed under the MIT license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$t = [["path", { "d": "M12 5l0 14", "key": "svg-0" }], ["path", { "d": "M16 15l-4 4", "key": "svg-1" }], ["path", { "d": "M8 15l4 4", "key": "svg-2" }]];
-const IconArrowNarrowDown = createReactComponent("outline", "arrow-narrow-down", "ArrowNarrowDown", __iconNode$t);
+const __iconNode$s = [["path", { "d": "M12 5l0 14", "key": "svg-0" }], ["path", { "d": "M16 15l-4 4", "key": "svg-1" }], ["path", { "d": "M8 15l4 4", "key": "svg-2" }]];
+const IconArrowNarrowDown = createReactComponent("outline", "arrow-narrow-down", "ArrowNarrowDown", __iconNode$s);
 /**
  * @license @tabler/icons-react v3.35.0 - MIT
  *
  * This source code is licensed under the MIT license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$s = [["path", { "d": "M12 5l0 14", "key": "svg-0" }], ["path", { "d": "M16 9l-4 -4", "key": "svg-1" }], ["path", { "d": "M8 9l4 -4", "key": "svg-2" }]];
-const IconArrowNarrowUp = createReactComponent("outline", "arrow-narrow-up", "ArrowNarrowUp", __iconNode$s);
+const __iconNode$r = [["path", { "d": "M12 5l0 14", "key": "svg-0" }], ["path", { "d": "M16 9l-4 -4", "key": "svg-1" }], ["path", { "d": "M8 9l4 -4", "key": "svg-2" }]];
+const IconArrowNarrowUp = createReactComponent("outline", "arrow-narrow-up", "ArrowNarrowUp", __iconNode$r);
 /**
  * @license @tabler/icons-react v3.35.0 - MIT
  *
  * This source code is licensed under the MIT license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$r = [["path", { "d": "M4 7a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12z", "key": "svg-0" }], ["path", { "d": "M16 3v4", "key": "svg-1" }], ["path", { "d": "M8 3v4", "key": "svg-2" }], ["path", { "d": "M4 11h16", "key": "svg-3" }], ["path", { "d": "M11 15h1", "key": "svg-4" }], ["path", { "d": "M12 15v3", "key": "svg-5" }]];
-const IconCalendar = createReactComponent("outline", "calendar", "Calendar", __iconNode$r);
+const __iconNode$q = [["path", { "d": "M4 7a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12z", "key": "svg-0" }], ["path", { "d": "M16 3v4", "key": "svg-1" }], ["path", { "d": "M8 3v4", "key": "svg-2" }], ["path", { "d": "M4 11h16", "key": "svg-3" }], ["path", { "d": "M11 15h1", "key": "svg-4" }], ["path", { "d": "M12 15v3", "key": "svg-5" }]];
+const IconCalendar = createReactComponent("outline", "calendar", "Calendar", __iconNode$q);
 /**
  * @license @tabler/icons-react v3.35.0 - MIT
  *
  * This source code is licensed under the MIT license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$q = [["path", { "d": "M5 12l5 5l10 -10", "key": "svg-0" }]];
-const IconCheck = createReactComponent("outline", "check", "Check", __iconNode$q);
+const __iconNode$p = [["path", { "d": "M5 12l5 5l10 -10", "key": "svg-0" }]];
+const IconCheck = createReactComponent("outline", "check", "Check", __iconNode$p);
 /**
  * @license @tabler/icons-react v3.35.0 - MIT
  *
  * This source code is licensed under the MIT license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$p = [["path", { "d": "M6 9l6 6l6 -6", "key": "svg-0" }]];
-const IconChevronDown = createReactComponent("outline", "chevron-down", "ChevronDown", __iconNode$p);
+const __iconNode$o = [["path", { "d": "M6 9l6 6l6 -6", "key": "svg-0" }]];
+const IconChevronDown = createReactComponent("outline", "chevron-down", "ChevronDown", __iconNode$o);
 /**
  * @license @tabler/icons-react v3.35.0 - MIT
  *
  * This source code is licensed under the MIT license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$o = [["path", { "d": "M15 6l-6 6l6 6", "key": "svg-0" }]];
-const IconChevronLeft = createReactComponent("outline", "chevron-left", "ChevronLeft", __iconNode$o);
+const __iconNode$n = [["path", { "d": "M15 6l-6 6l6 6", "key": "svg-0" }]];
+const IconChevronLeft = createReactComponent("outline", "chevron-left", "ChevronLeft", __iconNode$n);
 /**
  * @license @tabler/icons-react v3.35.0 - MIT
  *
  * This source code is licensed under the MIT license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$n = [["path", { "d": "M9 6l6 6l-6 6", "key": "svg-0" }]];
-const IconChevronRight = createReactComponent("outline", "chevron-right", "ChevronRight", __iconNode$n);
+const __iconNode$m = [["path", { "d": "M9 6l6 6l-6 6", "key": "svg-0" }]];
+const IconChevronRight = createReactComponent("outline", "chevron-right", "ChevronRight", __iconNode$m);
 /**
  * @license @tabler/icons-react v3.35.0 - MIT
  *
  * This source code is licensed under the MIT license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$m = [["path", { "d": "M6 15l6 -6l6 6", "key": "svg-0" }]];
-const IconChevronUp = createReactComponent("outline", "chevron-up", "ChevronUp", __iconNode$m);
+const __iconNode$l = [["path", { "d": "M6 15l6 -6l6 6", "key": "svg-0" }]];
+const IconChevronUp = createReactComponent("outline", "chevron-up", "ChevronUp", __iconNode$l);
 /**
  * @license @tabler/icons-react v3.35.0 - MIT
  *
  * This source code is licensed under the MIT license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$l = [["path", { "d": "M11 7l-5 5l5 5", "key": "svg-0" }], ["path", { "d": "M17 7l-5 5l5 5", "key": "svg-1" }]];
-const IconChevronsLeft = createReactComponent("outline", "chevrons-left", "ChevronsLeft", __iconNode$l);
+const __iconNode$k = [["path", { "d": "M11 7l-5 5l5 5", "key": "svg-0" }], ["path", { "d": "M17 7l-5 5l5 5", "key": "svg-1" }]];
+const IconChevronsLeft = createReactComponent("outline", "chevrons-left", "ChevronsLeft", __iconNode$k);
 /**
  * @license @tabler/icons-react v3.35.0 - MIT
  *
  * This source code is licensed under the MIT license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$k = [["path", { "d": "M7 7l5 5l-5 5", "key": "svg-0" }], ["path", { "d": "M13 7l5 5l-5 5", "key": "svg-1" }]];
-const IconChevronsRight = createReactComponent("outline", "chevrons-right", "ChevronsRight", __iconNode$k);
+const __iconNode$j = [["path", { "d": "M7 7l5 5l-5 5", "key": "svg-0" }], ["path", { "d": "M13 7l5 5l-5 5", "key": "svg-1" }]];
+const IconChevronsRight = createReactComponent("outline", "chevrons-right", "ChevronsRight", __iconNode$j);
 /**
  * @license @tabler/icons-react v3.35.0 - MIT
  *
  * This source code is licensed under the MIT license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$j = [["path", { "d": "M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0", "key": "svg-0" }], ["path", { "d": "M9 12l2 2l4 -4", "key": "svg-1" }]];
-const IconCircleCheck = createReactComponent("outline", "circle-check", "CircleCheck", __iconNode$j);
+const __iconNode$i = [["path", { "d": "M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0", "key": "svg-0" }], ["path", { "d": "M9 12l2 2l4 -4", "key": "svg-1" }]];
+const IconCircleCheck = createReactComponent("outline", "circle-check", "CircleCheck", __iconNode$i);
 /**
  * @license @tabler/icons-react v3.35.0 - MIT
  *
  * This source code is licensed under the MIT license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$i = [["path", { "d": "M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0", "key": "svg-0" }], ["path", { "d": "M10 10l4 4m0 -4l-4 4", "key": "svg-1" }]];
-const IconCircleX = createReactComponent("outline", "circle-x", "CircleX", __iconNode$i);
+const __iconNode$h = [["path", { "d": "M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0", "key": "svg-0" }], ["path", { "d": "M10 10l4 4m0 -4l-4 4", "key": "svg-1" }]];
+const IconCircleX = createReactComponent("outline", "circle-x", "CircleX", __iconNode$h);
 /**
  * @license @tabler/icons-react v3.35.0 - MIT
  *
  * This source code is licensed under the MIT license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$h = [["path", { "d": "M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0", "key": "svg-0" }], ["path", { "d": "M12 7v5l3 3", "key": "svg-1" }]];
-const IconClock = createReactComponent("outline", "clock", "Clock", __iconNode$h);
+const __iconNode$g = [["path", { "d": "M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0", "key": "svg-0" }], ["path", { "d": "M12 7v5l3 3", "key": "svg-1" }]];
+const IconClock = createReactComponent("outline", "clock", "Clock", __iconNode$g);
 /**
  * @license @tabler/icons-react v3.35.0 - MIT
  *
  * This source code is licensed under the MIT license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$g = [["path", { "d": "M6 17.6l-2 -1.1v-2.5", "key": "svg-0" }], ["path", { "d": "M4 10v-2.5l2 -1.1", "key": "svg-1" }], ["path", { "d": "M10 4.1l2 -1.1l2 1.1", "key": "svg-2" }], ["path", { "d": "M18 6.4l2 1.1v2.5", "key": "svg-3" }], ["path", { "d": "M20 14v2.5l-2 1.12", "key": "svg-4" }], ["path", { "d": "M14 19.9l-2 1.1l-2 -1.1", "key": "svg-5" }], ["path", { "d": "M12 12l2 -1.1", "key": "svg-6" }], ["path", { "d": "M18 8.6l2 -1.1", "key": "svg-7" }], ["path", { "d": "M12 12l0 2.5", "key": "svg-8" }], ["path", { "d": "M12 18.5l0 2.5", "key": "svg-9" }], ["path", { "d": "M12 12l-2 -1.12", "key": "svg-10" }], ["path", { "d": "M6 8.6l-2 -1.1", "key": "svg-11" }]];
-const IconCube3dSphere = createReactComponent("outline", "cube-3d-sphere", "Cube3dSphere", __iconNode$g);
-/**
- * @license @tabler/icons-react v3.35.0 - MIT
- *
- * This source code is licensed under the MIT license.
- * See the LICENSE file in the root directory of this source tree.
- */
-const __iconNode$f = [["path", { "d": "M12 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0", "key": "svg-0" }], ["path", { "d": "M12 19m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0", "key": "svg-1" }], ["path", { "d": "M12 5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0", "key": "svg-2" }]];
-const IconDotsVertical = createReactComponent("outline", "dots-vertical", "DotsVertical", __iconNode$f);
+const __iconNode$f = [["path", { "d": "M6 17.6l-2 -1.1v-2.5", "key": "svg-0" }], ["path", { "d": "M4 10v-2.5l2 -1.1", "key": "svg-1" }], ["path", { "d": "M10 4.1l2 -1.1l2 1.1", "key": "svg-2" }], ["path", { "d": "M18 6.4l2 1.1v2.5", "key": "svg-3" }], ["path", { "d": "M20 14v2.5l-2 1.12", "key": "svg-4" }], ["path", { "d": "M14 19.9l-2 1.1l-2 -1.1", "key": "svg-5" }], ["path", { "d": "M12 12l2 -1.1", "key": "svg-6" }], ["path", { "d": "M18 8.6l2 -1.1", "key": "svg-7" }], ["path", { "d": "M12 12l0 2.5", "key": "svg-8" }], ["path", { "d": "M12 18.5l0 2.5", "key": "svg-9" }], ["path", { "d": "M12 12l-2 -1.12", "key": "svg-10" }], ["path", { "d": "M6 8.6l-2 -1.1", "key": "svg-11" }]];
+const IconCube3dSphere = createReactComponent("outline", "cube-3d-sphere", "Cube3dSphere", __iconNode$f);
 /**
  * @license @tabler/icons-react v3.35.0 - MIT
  *
@@ -1138,94 +1130,102 @@ function AccordionCard({
     )
   ] });
 }
-function ActionDropdown({
-  trigger,
-  items,
-  className = "",
-  iconSize = 24,
-  dropdownClassName = "",
-  dropdownStyle
-}) {
-  const [open, setOpen] = useState(false);
-  const [dropdownPosition, setDropdownPosition] = useState({ vertical: "bottom", horizontal: "right" });
-  const containerRef = useRef(null);
-  useEffect(() => {
-    const handleClickOutside = (e) => {
-      if (containerRef.current && !containerRef.current.contains(e.target)) {
-        setOpen(false);
-      }
-    };
-    document.addEventListener("mousedown", handleClickOutside);
-    return () => {
-      document.removeEventListener("mousedown", handleClickOutside);
-    };
-  }, []);
-  const handleTriggerClick = (e) => {
-    e.stopPropagation();
-    if (containerRef.current) {
-      const rect = containerRef.current.getBoundingClientRect();
-      const dropdownHeight = items.length * 40 + 16;
-      const dropdownWidth = 160;
-      const fitsBelow = rect.bottom + dropdownHeight <= window.innerHeight;
-      const vertical = fitsBelow ? "bottom" : "top";
-      const fitsRight = rect.right + dropdownWidth <= window.innerWidth;
-      const horizontal = fitsRight ? "right" : "left";
-      setDropdownPosition({ vertical, horizontal });
-    }
-    setOpen((o) => !o);
-  };
-  return /* @__PURE__ */ jsxs("div", { ref: containerRef, className: clsx("ina-action-dropdown", className), children: [
-    React.isValidElement(trigger) && trigger.props && trigger.props.type === "button" ? React.cloneElement(trigger, {
-      onClick: (e) => {
-        if (typeof trigger.props.onClick === "function") {
-          trigger.props.onClick(e);
+const ActionDropdown = forwardRef(
+  ({
+    label,
+    items,
+    placement = "bottom-start",
+    icon,
+    className,
+    menuClassName,
+    triggerClassName,
+    width = "auto",
+    disabled = false
+  }, ref) => {
+    const [isOpen, setIsOpen] = useState(false);
+    const triggerRef = useRef(null);
+    const menuRef = useRef(null);
+    useImperativeHandle(ref, () => ({
+      open: () => setIsOpen(true),
+      close: () => setIsOpen(false),
+      toggle: () => setIsOpen((prev) => !prev)
+    }));
+    useEffect(() => {
+      const handleClickOutside = (event) => {
+        if (triggerRef.current && !triggerRef.current.contains(event.target) && menuRef.current && !menuRef.current.contains(event.target)) {
+          setIsOpen(false);
         }
-        handleTriggerClick(e);
-      },
-      "aria-haspopup": "true",
-      "aria-expanded": open
-    }) : /* @__PURE__ */ jsx(
-      "div",
-      {
-        onClick: handleTriggerClick,
-        "aria-haspopup": "true",
-        "aria-expanded": open,
-        className: "ina-action-dropdown__trigger",
-        children: trigger ?? /* @__PURE__ */ jsx(IconDotsVertical, { size: iconSize })
-      }
-    ),
-    open && /* @__PURE__ */ jsx(
+      };
+      document.addEventListener("mousedown", handleClickOutside);
+      return () => {
+        document.removeEventListener("mousedown", handleClickOutside);
+      };
+    }, []);
+    const containerClasses = clsx(
+      "ina-action-dropdown",
+      width === "full" && "w-full",
+      className
+    );
+    const triggerClasses = clsx(
+      "ina-action-dropdown__trigger",
+      triggerClassName
+    );
+    const menuClasses = clsx(
+      "ina-action-dropdown__menu",
+      `ina-action-dropdown__menu--${placement}`,
+      `ina-action-dropdown__menu--width-${width}`,
+      isOpen && "ina-action-dropdown__menu--visible",
+      menuClassName
+    );
+    const handleItemClick = (item) => {
+      var _a;
+      if (item.disabled) return;
+      (_a = item.onClick) == null ? void 0 : _a.call(item);
+      setIsOpen(false);
+    };
+    return /* @__PURE__ */ jsxs(
       "div",
       {
-        className: clsx(
-          "ina-action-dropdown__menu",
-          `ina-action-dropdown__menu--${dropdownPosition.vertical}`,
-          `ina-action-dropdown__menu--${dropdownPosition.horizontal}`,
-          dropdownClassName
-        ),
-        style: dropdownStyle,
-        role: "menu",
-        onMouseDown: (e) => e.stopPropagation(),
-        children: /* @__PURE__ */ jsx("ul", { className: "ina-action-dropdown__list", children: items.map((item, idx) => {
-          if (item && typeof item === "object" && "props" in item && item.props.className) {
-            return /* @__PURE__ */ jsx("li", {
-              role: "none",
-              // Clone element dengan className hasil clsx
-              // @ts-ignore
-              children: React.cloneElement(item, {
-                className: clsx(
-                  "ina-action-dropdown__item",
-                  item.props.className
-                )
-              })
-            }, idx);
-          }
-          return /* @__PURE__ */ jsx("li", { role: "none", children: /* @__PURE__ */ jsx("div", { className: "ina-action-dropdown__item", children: item }) }, idx);
-        }) })
+        className: containerClasses,
+        ref: menuRef,
+        children: [
+          /* @__PURE__ */ jsxs(
+            "button",
+            {
+              ref: triggerRef,
+              type: "button",
+              className: triggerClasses,
+              onClick: () => !disabled && setIsOpen(!isOpen),
+              disabled,
+              children: [
+                icon && /* @__PURE__ */ jsx("span", { className: "ina-action-dropdown__icon", children: icon }),
+                label && /* @__PURE__ */ jsx("span", { className: "ina-action-dropdown__label", children: label })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx("div", { className: menuClasses, children: /* @__PURE__ */ jsx("ul", { className: "ina-action-dropdown__list", children: items.map((item, index) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              className: clsx(
+                "ina-action-dropdown__item",
+                item.type && `ina-action-dropdown__item--${item.type}`,
+                item.disabled && "ina-action-dropdown__item--disabled"
+              ),
+              onClick: () => handleItemClick(item),
+              disabled: item.disabled,
+              children: [
+                item.icon && /* @__PURE__ */ jsx("span", { className: "ina-action-dropdown__item-icon", children: item.icon }),
+                item.label
+              ]
+            }
+          ) }, index)) }) })
+        ]
       }
-    )
-  ] });
-}
+    );
+  }
+);
+ActionDropdown.displayName = "ActionDropdown";
 function Alert(props) {
   const {
     variant = "info",
@@ -2311,120 +2311,92 @@ function Divider({
   );
   return /* @__PURE__ */ jsx("hr", { className: dividerClasses });
 }
-function Dropdown({
+function BasicDropdown({
   trigger,
-  items,
+  content,
+  open: controlledOpen,
+  defaultOpen = false,
+  onOpenChange,
+  placement = "bottom-start",
   className = "",
-  dropdownClassName = "",
-  dropdownStyle,
-  disabled = false,
-  dropdownWidth
+  panelClassName = "",
+  triggerClassName = "",
+  disabled = false
 }) {
-  const [open, setOpen] = useState(false);
-  const [dropdownPosition, setDropdownPosition] = useState({ vertical: "bottom", horizontal: "left" });
-  const [triggerWidth, setTriggerWidth] = useState(0);
+  const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen);
+  const isControlled = controlledOpen !== void 0;
+  const isOpen = isControlled ? controlledOpen : uncontrolledOpen;
   const containerRef = useRef(null);
-  const [mounted, setMounted] = useState(false);
-  useEffect(() => {
-    setMounted(true);
-  }, []);
+  const triggerRef = useRef(null);
+  const panelRef = useRef(null);
+  const handleOpenChange = (newOpen) => {
+    if (!isControlled) {
+      setUncontrolledOpen(newOpen);
+    }
+    onOpenChange == null ? void 0 : onOpenChange(newOpen);
+  };
+  const toggle = (e) => {
+    e.stopPropagation();
+    if (disabled) return;
+    handleOpenChange(!isOpen);
+  };
   useEffect(() => {
-    if (!mounted) return;
-    const handleClickOutside = (e) => {
-      if (containerRef.current && !containerRef.current.contains(e.target)) {
-        setOpen(false);
+    const handleClickOutside = (event) => {
+      if (containerRef.current && !containerRef.current.contains(event.target)) {
+        if (isOpen) {
+          handleOpenChange(false);
+        }
       }
     };
     document.addEventListener("mousedown", handleClickOutside);
+    document.addEventListener("touchstart", handleClickOutside);
     return () => {
       document.removeEventListener("mousedown", handleClickOutside);
+      document.removeEventListener("touchstart", handleClickOutside);
     };
-  }, [mounted]);
-  const handleTriggerClick = (e) => {
-    e.stopPropagation();
-    if (disabled) return;
-    if (containerRef.current) {
-      const rect = containerRef.current.getBoundingClientRect();
-      setTriggerWidth(rect.width);
-      const dropdownHeight = 200;
-      const fitsBelow = rect.bottom + dropdownHeight <= window.innerHeight;
-      const vertical = fitsBelow ? "bottom" : "top";
-      const fitsRight = rect.left + (dropdownWidth ?? 160) <= window.innerWidth;
-      const horizontal = fitsRight ? "left" : "right";
-      setDropdownPosition({ vertical, horizontal });
-    }
-    setOpen((o) => !o);
-  };
-  const dropdownContainerClasses = clsx("ina-dropdown", className);
-  const triggerClasses = clsx(
-    "ina-dropdown__trigger",
-    disabled && "ina-dropdown__trigger--disabled"
-  );
-  const menuClasses = clsx(
-    "ina-dropdown__menu",
-    open && "ina-dropdown__menu--visible",
-    `ina-dropdown__menu--position-${dropdownPosition.vertical}`,
-    `ina-dropdown__menu--align-${dropdownPosition.horizontal}`,
-    dropdownClassName
-  );
-  const effectiveWidth = dropdownWidth ?? triggerWidth;
-  const isStandardTrigger = typeof trigger === "string" || typeof trigger === "number";
-  return /* @__PURE__ */ jsxs("div", { ref: containerRef, className: dropdownContainerClasses, children: [
-    /* @__PURE__ */ jsx("div", { onClick: handleTriggerClick, className: triggerClasses, children: isStandardTrigger ? /* @__PURE__ */ jsxs(
+  }, [isOpen, onOpenChange]);
+  const isPrimitiveTrigger = typeof trigger === "string" || typeof trigger === "number";
+  return /* @__PURE__ */ jsxs("div", { ref: containerRef, className: clsx("ina-basic-dropdown", className), children: [
+    /* @__PURE__ */ jsx(
       "div",
       {
-        className: clsx(
-          "ina-dropdown__trigger-button",
-          open && "ina-dropdown__trigger-button--open"
-        ),
-        children: [
-          /* @__PURE__ */ jsx("span", { className: "ina-dropdown__trigger-content", children: trigger }),
-          /* @__PURE__ */ jsx(
-            "svg",
-            {
-              className: "ina-dropdown__trigger-icon",
-              width: "16",
-              height: "16",
-              viewBox: "0 0 16 16",
-              fill: "none",
-              xmlns: "http://www.w3.org/2000/svg",
-              children: /* @__PURE__ */ jsx(
-                "path",
+        ref: triggerRef,
+        className: clsx("ina-basic-dropdown__trigger", triggerClassName),
+        onClick: toggle,
+        children: isPrimitiveTrigger ? /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            disabled,
+            className: clsx(
+              "ina-basic-dropdown__trigger-button",
+              isOpen && "ina-basic-dropdown__trigger-button--open"
+            ),
+            children: [
+              /* @__PURE__ */ jsx("span", { className: "ina-basic-dropdown__trigger-content", children: trigger }),
+              /* @__PURE__ */ jsx(
+                IconChevronDown,
                 {
-                  d: "M4 6L8 10L12 6",
-                  stroke: "currentColor",
-                  strokeWidth: "1.5",
-                  strokeLinecap: "round",
-                  strokeLinejoin: "round"
+                  size: 16,
+                  className: "ina-basic-dropdown__trigger-icon"
                 }
               )
-            }
-          )
-        ]
+            ]
+          }
+        ) : trigger
       }
-    ) : trigger }),
-    open && /* @__PURE__ */ jsx(
+    ),
+    isOpen && !disabled && /* @__PURE__ */ jsx(
       "div",
       {
-        className: menuClasses,
-        style: {
-          width: effectiveWidth || void 0,
-          minWidth: effectiveWidth ? void 0 : "160px",
-          ...dropdownStyle
-        },
-        role: "menu",
-        onMouseDown: (e) => e.stopPropagation(),
-        children: /* @__PURE__ */ jsx("ul", { className: "ina-dropdown__list", children: items.map((item, idx) => {
-          if (item && typeof item === "object" && "props" in item && item.props.className) {
-            return /* @__PURE__ */ jsx("li", { role: "none", children: React.cloneElement(item, {
-              className: clsx(
-                "ina-dropdown__item",
-                item.props.className
-              )
-            }) }, idx);
-          }
-          return /* @__PURE__ */ jsx("li", { role: "none", children: /* @__PURE__ */ jsx("div", { className: "ina-dropdown__item", children: item }) }, idx);
-        }) })
+        ref: panelRef,
+        className: clsx(
+          "ina-basic-dropdown__panel",
+          `ina-basic-dropdown__panel--${placement}`,
+          panelClassName
+        ),
+        onClick: (e) => e.stopPropagation(),
+        children: content
       }
     )
   ] });
@@ -10028,7 +10000,8 @@ function DatePicker({
   readonly = false,
   size = "md",
   label,
-  required
+  required,
+  panelOnly = false
 }) {
   const [isOpen, setIsOpen] = useState(false);
   const [currentMonth, setCurrentMonth] = useState(/* @__PURE__ */ new Date());
@@ -10089,11 +10062,11 @@ function DatePicker({
       setTempStartDate(null);
       setTempStartDate(null);
     };
-    if (isOpen) {
+    if (isOpen && !panelOnly) {
       document.addEventListener("mousedown", handleClickOutside, true);
       return () => document.removeEventListener("mousedown", handleClickOutside, true);
     }
-  }, [isOpen]);
+  }, [isOpen, panelOnly]);
   useEffect(() => {
     if (isOpen) {
       const allDatePickers = document.querySelectorAll(".ina-date-picker");
@@ -10194,7 +10167,7 @@ function DatePicker({
   ]);
   const hasInitialized = useRef(false);
   useEffect(() => {
-    if (isOpen && !hasInitialized.current) {
+    if ((isOpen || panelOnly) && !hasInitialized.current) {
       const parsedDates = parseSelectedDates();
       let targetMonth = null;
       let targetNextMonth = null;
@@ -10273,7 +10246,7 @@ function DatePicker({
     }
   }, [isOpen, mode, getFirstEnabledMonth]);
   useEffect(() => {
-    if (isOpen && triggerRef.current) {
+    if (isOpen && triggerRef.current && !panelOnly) {
       const calculatePosition = () => {
         if (!triggerRef.current) return;
         const triggerRect = triggerRef.current.getBoundingClientRect();
@@ -10700,15 +10673,16 @@ function DatePicker({
       className: clsx(
         "ina-date-picker",
         disabled && "ina-date-picker--disabled",
+        panelOnly && "ina-date-picker--panel-only",
         className
       ),
       style: { width: validatedTriggerWidth },
       children: [
-        label && /* @__PURE__ */ jsxs("label", { className: "ina-date-picker__label", children: [
+        !panelOnly && label && /* @__PURE__ */ jsxs("label", { className: "ina-date-picker__label", children: [
           label,
           required && /* @__PURE__ */ jsx("span", { className: "ina-date-picker__required", children: "*" })
         ] }),
-        /* @__PURE__ */ jsxs(
+        !panelOnly && /* @__PURE__ */ jsxs(
           "button",
           {
             ref: triggerRef,
@@ -10764,7 +10738,7 @@ function DatePicker({
             ]
           }
         ),
-        isOpen && !disabled && !readonly && /* @__PURE__ */ jsx(
+        (isOpen || panelOnly) && !disabled && !readonly && /* @__PURE__ */ jsx(
           "div",
           {
             ref: panelRef,
@@ -11390,6 +11364,7 @@ export {
   Alert,
   Avatar,
   Badge,
+  BasicDropdown,
   BottomSheet,
   Breadcrumb,
   Button,
@@ -11405,7 +11380,6 @@ export {
   DatePicker,
   Divider,
   Drawer,
-  Dropdown,
   FieldInputTable,
   FileUpload,
   FormField,