avt-rct-lib 1.0.3 → 1.0.5

package/dist/index.cjs

@@ -1212,130 +1212,6 @@ function SidebarItem({
     }
   );
 }
-function SidebarSubMenu({
-  icon,
-  label,
-  badge,
-  defaultOpen = false,
-  open: controlledOpen,
-  onOpenChange,
-  activeChild = false,
-  children,
-  className
-}) {
-  const { collapsed } = useSidebar();
-  const [internalOpen, setInternalOpen] = React3.useState(defaultOpen);
-  const isOpen = controlledOpen ?? internalOpen;
-  const toggle = () => {
-    const next = !isOpen;
-    setInternalOpen(next);
-    onOpenChange?.(next);
-  };
-  if (collapsed) {
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      "button",
-      {
-        type: "button",
-        title: label,
-        onClick: toggle,
-        className: cn(
-          "mx-auto flex h-10 w-10 min-h-[44px] min-w-[44px] items-center justify-center rounded-xl",
-          "select-none outline-none transition-all duration-150",
-          "focus-visible:ring-2 focus-visible:ring-[#007AFF]/30",
-          activeChild ? "bg-[#007AFF] text-white shadow-[0_2px_8px_rgba(0,122,255,0.28)]" : "text-[#3C3C43] hover:bg-[#007AFF]/8 hover:text-[#007AFF]",
-          className
-        ),
-        children: icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("flex-shrink-0", !activeChild && "text-[#8E8E93]"), children: icon })
-      }
-    );
-  }
-  const triggerActive = activeChild && !isOpen;
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("space-y-0.5", className), children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(
-      "button",
-      {
-        type: "button",
-        onClick: toggle,
-        className: cn(
-          "flex w-full items-center gap-2.5 rounded-xl px-3 py-2.5 min-h-[44px]",
-          "text-[13px] font-medium select-none outline-none transition-all duration-150",
-          "focus-visible:ring-2 focus-visible:ring-[#007AFF]/30",
-          triggerActive ? "bg-[#007AFF] text-white shadow-[0_2px_8px_rgba(0,122,255,0.28)]" : "text-[#3C3C43] hover:bg-[#007AFF]/8 hover:text-[#007AFF]"
-        ),
-        children: [
-          icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("flex-shrink-0", !triggerActive && "text-[#8E8E93]"), children: icon }),
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-1 truncate text-left", children: label }),
-          badge !== void 0 && /* @__PURE__ */ jsxRuntime.jsx(
-            "span",
-            {
-              className: cn(
-                "flex h-5 min-w-5 items-center justify-center rounded-full px-1.5 text-[10px] font-bold",
-                triggerActive ? "bg-white/20 text-white" : "bg-[#E5E5EA] text-[#8E8E93]"
-              ),
-              children: badge
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "svg",
-            {
-              className: cn(
-                "h-3.5 w-3.5 flex-shrink-0 transition-transform duration-200",
-                triggerActive ? "text-white/60" : "text-[#C7C7CC]",
-                isOpen && "rotate-90"
-              ),
-              viewBox: "0 0 24 24",
-              fill: "none",
-              stroke: "currentColor",
-              strokeWidth: "2.5",
-              strokeLinecap: "round",
-              strokeLinejoin: "round",
-              children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M9 18l6-6-6-6" })
-            }
-          )
-        ]
-      }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      "div",
-      {
-        className: cn(
-          "overflow-hidden transition-all duration-200 ease-[cubic-bezier(0.16,1,0.3,1)]",
-          isOpen ? "max-h-96 opacity-100" : "max-h-0 opacity-0 pointer-events-none"
-        ),
-        children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ml-3 space-y-0.5 border-l border-[#E5E5EA] py-0.5 pl-2", children })
-      }
-    )
-  ] });
-}
-function SidebarSubMenuItem({
-  icon,
-  label,
-  active = false,
-  href,
-  as: Tag = "button",
-  className,
-  ...props
-}) {
-  const tagProps = href ? { href } : { type: "button" };
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    Tag,
-    {
-      ...tagProps,
-      className: cn(
-        "flex w-full items-center gap-2 rounded-lg px-2.5 py-2 min-h-[36px]",
-        "text-[12px] font-medium select-none outline-none transition-all duration-150",
-        "focus-visible:ring-2 focus-visible:ring-[#007AFF]/30",
-        active ? "bg-[#007AFF] text-white shadow-[0_2px_8px_rgba(0,122,255,0.20)]" : "text-[#3C3C43] hover:bg-[#007AFF]/8 hover:text-[#007AFF]",
-        className
-      ),
-      ...props,
-      children: [
-        icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("flex-shrink-0", !active && "text-[#8E8E93]"), children: icon }),
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-1 truncate text-left", children: label })
-      ]
-    }
-  );
-}
 function SidebarFooter({ className, ...props }) {
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex-shrink-0 p-3", className), ...props });
 }
@@ -1401,6 +1277,925 @@ function SidebarToggle({ collapsed, className, ...props }) {
     }
   );
 }
+function useAnchoredPosition(anchorRef, open, {
+  align = "start",
+  sideOffset = 6,
+  minWidth = 180,
+  matchWidth = true,
+  maxHeight = 280,
+  viewportPadding = 8
+} = {}) {
+  const [pos, setPos] = React3.useState(null);
+  const update = React3.useCallback(() => {
+    const el = anchorRef.current;
+    if (!el) return;
+    const rect = el.getBoundingClientRect();
+    const vw = window.innerWidth;
+    const vh = window.innerHeight;
+    const width = matchWidth ? Math.max(minWidth, rect.width) : minWidth;
+    let left;
+    if (align === "end") left = rect.right - width;
+    else if (align === "center") left = rect.left + rect.width / 2 - width / 2;
+    else left = rect.left;
+    left = Math.max(viewportPadding, Math.min(left, vw - width - viewportPadding));
+    const spaceBelow = vh - rect.bottom - sideOffset - viewportPadding;
+    const spaceAbove = rect.top - sideOffset - viewportPadding;
+    const flipUp = spaceBelow < Math.min(maxHeight, 180) && spaceAbove > spaceBelow;
+    const available = Math.max(120, flipUp ? spaceAbove : spaceBelow);
+    const height = Math.min(maxHeight, available);
+    const top = flipUp ? rect.top - sideOffset - height : rect.bottom + sideOffset;
+    setPos({
+      top,
+      left,
+      width,
+      maxHeight: height,
+      placement: flipUp ? "top" : "bottom"
+    });
+  }, [anchorRef, align, sideOffset, minWidth, matchWidth, maxHeight, viewportPadding]);
+  React3.useEffect(() => {
+    if (!open) {
+      setPos(null);
+      return;
+    }
+    update();
+    window.addEventListener("scroll", update, true);
+    window.addEventListener("resize", update);
+    return () => {
+      window.removeEventListener("scroll", update, true);
+      window.removeEventListener("resize", update);
+    };
+  }, [open, update]);
+  return pos;
+}
+var stack = [];
+var bound = false;
+function onGlobalKeydown(e) {
+  if (e.key !== "Escape") return;
+  const top = stack[stack.length - 1];
+  if (!top) return;
+  e.stopPropagation();
+  top();
+}
+function bind() {
+  if (bound || typeof document === "undefined") return;
+  document.addEventListener("keydown", onGlobalKeydown, true);
+  bound = true;
+}
+function unbind() {
+  if (!bound || typeof document === "undefined") return;
+  document.removeEventListener("keydown", onGlobalKeydown, true);
+  bound = false;
+}
+function useEscapeDismiss(enabled, onDismiss) {
+  const handlerRef = React3.useRef(onDismiss);
+  handlerRef.current = onDismiss;
+  React3.useEffect(() => {
+    if (!enabled) return;
+    const entry = () => handlerRef.current();
+    stack.push(entry);
+    bind();
+    return () => {
+      const i = stack.lastIndexOf(entry);
+      if (i >= 0) stack.splice(i, 1);
+      if (stack.length === 0) unbind();
+    };
+  }, [enabled]);
+}
+var triggerBase = [
+  "flex w-full items-center gap-2 rounded-xl bg-[#F2F2F7] text-left",
+  "border-0 outline-none select-none text-[#1C1C1E]",
+  "transition-all duration-150",
+  "focus-visible:bg-white focus-visible:shadow-[0_0_0_2px_rgba(0,122,255,0.22)]",
+  "disabled:cursor-not-allowed disabled:opacity-50"
+].join(" ");
+var triggerSizes = {
+  sm: "h-9 px-3 text-[13px]",
+  md: "h-11 px-4 text-sm",
+  lg: "h-12 px-5 text-[15px]"
+};
+var panelBase = [
+  "fixed z-[9999] flex flex-col overflow-hidden avt-animate-slide-up",
+  "rounded-xl border border-[#E5E5EA]/60 bg-white/95 backdrop-blur-2xl",
+  "shadow-[0_8px_24px_rgba(0,0,0,0.10),_0_0_1px_rgba(0,0,0,0.06)]"
+].join(" ");
+function optionRowClass(state, className) {
+  return cn(
+    "flex w-full items-center gap-2.5 px-3.5 py-2.5 text-[13px] font-medium",
+    "cursor-pointer select-none text-left outline-none",
+    "transition-colors duration-100",
+    // Mobile: jaga target sentuh minimal
+    "min-h-[44px] sm:min-h-0",
+    state.disabled ? "pointer-events-none opacity-40" : state.active ? "bg-[#F2F2F7]" : "hover:bg-[#F2F2F7]",
+    state.selected ? "text-[#007AFF]" : "text-[#1C1C1E]",
+    className
+  );
+}
+var groupLabelClass = "px-3.5 pb-1 pt-2 text-[11px] font-semibold uppercase tracking-wider text-[#8E8E93]";
+var ChevronDownIcon = ({ className }) => /* @__PURE__ */ jsxRuntime.jsx(
+  "svg",
+  {
+    className,
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2.5",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    "aria-hidden": "true",
+    children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M6 9l6 6 6-6" })
+  }
+);
+var CheckIcon = ({ className }) => /* @__PURE__ */ jsxRuntime.jsx(
+  "svg",
+  {
+    className,
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "3",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    "aria-hidden": "true",
+    children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M20 6L9 17l-5-5" })
+  }
+);
+var SearchIcon2 = ({ className }) => /* @__PURE__ */ jsxRuntime.jsxs(
+  "svg",
+  {
+    className,
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2.5",
+    strokeLinecap: "round",
+    "aria-hidden": "true",
+    children: [
+      /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "11", cy: "11", r: "7" }),
+      /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M20 20l-3.5-3.5" })
+    ]
+  }
+);
+var ClearIcon = ({ className }) => /* @__PURE__ */ jsxRuntime.jsx(
+  "svg",
+  {
+    className,
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2.5",
+    strokeLinecap: "round",
+    "aria-hidden": "true",
+    children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M18 6L6 18M6 6l12 12" })
+  }
+);
+var SpinnerIcon = ({ className }) => /* @__PURE__ */ jsxRuntime.jsxs("svg", { className: cn("animate-spin", className), viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", children: [
+  /* @__PURE__ */ jsxRuntime.jsx("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "3" }),
+  /* @__PURE__ */ jsxRuntime.jsx("path", { className: "opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8v4a4 4 0 00-4 4H4z" })
+] });
+function groupOptions(options) {
+  const groups = [];
+  const byName = /* @__PURE__ */ new Map();
+  for (const option of options) {
+    const key = option.group ?? "";
+    let bucket = byName.get(key);
+    if (!bucket) {
+      bucket = { group: option.group, items: [], offset: 0 };
+      byName.set(key, bucket);
+      groups.push(bucket);
+    }
+    bucket.items.push(option);
+  }
+  let offset = 0;
+  for (const bucket of groups) {
+    bucket.offset = offset;
+    offset += bucket.items.length;
+  }
+  return groups;
+}
+function nextEnabledIndex(options, from, dir) {
+  const n = options.length;
+  if (n === 0) return -1;
+  let i = from < 0 ? dir === 1 ? -1 : 0 : from;
+  for (let step = 0; step < n; step++) {
+    i = (i + dir + n) % n;
+    if (!options[i].disabled) return i;
+  }
+  return -1;
+}
+function defaultFilter(option, query) {
+  const q = query.trim().toLowerCase();
+  if (!q) return true;
+  return option.label.toLowerCase().includes(q) || (option.description?.toLowerCase().includes(q) ?? false) || String(option.value).toLowerCase().includes(q);
+}
+var Select = React3__default.default.forwardRef(function Select2({
+  options,
+  value: controlledValue,
+  defaultValue = null,
+  onChange,
+  placeholder = "Pilih\u2026",
+  label,
+  hint,
+  error,
+  size = "md",
+  disabled = false,
+  clearable = false,
+  name,
+  align = "start",
+  maxHeight = 280,
+  emptyText = "Tidak ada pilihan",
+  containerClassName,
+  panelClassName,
+  onOpenChange,
+  renderOption,
+  searchable = false,
+  searchPlaceholder = "Cari\u2026",
+  filter = defaultFilter,
+  onSearchChange,
+  manualFilter = false,
+  loading = false,
+  loadingText = "Memuat\u2026",
+  className,
+  id,
+  ...props
+}, ref) {
+  const reactId = React3__default.default.useId();
+  const uid = id ?? `avt-select-${reactId}`;
+  const listboxId = `${uid}-listbox`;
+  const labelId = `${uid}-label`;
+  const [open, setOpen] = React3.useState(false);
+  const [query, setQuery] = React3.useState("");
+  const [activeIndex, setActiveIndex] = React3.useState(-1);
+  const [internalValue, setInternalValue] = React3.useState(defaultValue);
+  const triggerRef = React3.useRef(null);
+  const panelRef = React3.useRef(null);
+  const listRef = React3.useRef(null);
+  const typeahead = React3.useRef({ text: "", at: 0 });
+  const focusOnMount = React3.useCallback((el) => {
+    el?.focus();
+  }, []);
+  React3__default.default.useImperativeHandle(ref, () => triggerRef.current, []);
+  const isControlled = controlledValue !== void 0;
+  const value = isControlled ? controlledValue : internalValue;
+  const selected = React3.useMemo(
+    () => value == null ? null : options.find((o) => o.value === value) ?? null,
+    [options, value]
+  );
+  const visible = React3.useMemo(() => {
+    if (!searchable || manualFilter || !query.trim()) return options;
+    return options.filter((o) => filter(o, query));
+  }, [options, searchable, manualFilter, query, filter]);
+  const groups = React3.useMemo(() => groupOptions(visible), [visible]);
+  const flat = React3.useMemo(() => groups.flatMap((g) => g.items), [groups]);
+  const changeOpen = React3.useCallback(
+    (next) => {
+      setOpen(next);
+      onOpenChange?.(next);
+    },
+    [onOpenChange]
+  );
+  const dismiss = React3.useCallback(() => {
+    changeOpen(false);
+    triggerRef.current?.focus();
+  }, [changeOpen]);
+  useEscapeDismiss(open, dismiss);
+  React3.useEffect(() => {
+    if (!open) return;
+    const handler = (e) => {
+      const target = e.target;
+      if (triggerRef.current?.contains(target)) return;
+      if (panelRef.current?.contains(target)) return;
+      changeOpen(false);
+    };
+    document.addEventListener("mousedown", handler, true);
+    document.addEventListener("touchstart", handler, true);
+    return () => {
+      document.removeEventListener("mousedown", handler, true);
+      document.removeEventListener("touchstart", handler, true);
+    };
+  }, [open, changeOpen]);
+  React3.useEffect(() => {
+    if (!open) setQuery("");
+  }, [open]);
+  React3.useEffect(() => {
+    if (!open) {
+      setActiveIndex(-1);
+      return;
+    }
+    const pick = flat.findIndex((o) => value != null && o.value === value && !o.disabled);
+    setActiveIndex(pick >= 0 ? pick : nextEnabledIndex(flat, -1, 1));
+  }, [open, query]);
+  React3.useEffect(() => {
+    if (!open || activeIndex < 0) return;
+    listRef.current?.querySelector(`[data-index="${activeIndex}"]`)?.scrollIntoView({ block: "nearest" });
+  }, [open, activeIndex]);
+  const commit = React3.useCallback(
+    (option) => {
+      if (option.disabled) return;
+      if (!isControlled) setInternalValue(option.value);
+      onChange?.(option.value, option);
+      changeOpen(false);
+      triggerRef.current?.focus();
+    },
+    [isControlled, onChange, changeOpen]
+  );
+  const clear = React3.useCallback(
+    (e) => {
+      e.stopPropagation();
+      if (!isControlled) setInternalValue(null);
+      onChange?.(null, null);
+    },
+    [isControlled, onChange]
+  );
+  const move = React3.useCallback(
+    (dir) => setActiveIndex((i) => nextEnabledIndex(flat, i, dir)),
+    [flat]
+  );
+  const runTypeahead = React3.useCallback(
+    (char) => {
+      const now = Date.now();
+      const text = now - typeahead.current.at > 600 ? char : typeahead.current.text + char;
+      typeahead.current = { text, at: now };
+      const q = text.toLowerCase();
+      const hit = flat.findIndex((o) => !o.disabled && o.label.toLowerCase().startsWith(q));
+      if (hit >= 0) setActiveIndex(hit);
+    },
+    [flat]
+  );
+  const onNavKeyDown = React3.useCallback(
+    (e) => {
+      switch (e.key) {
+        case "ArrowDown":
+          e.preventDefault();
+          move(1);
+          return;
+        case "ArrowUp":
+          e.preventDefault();
+          move(-1);
+          return;
+        case "Home":
+          e.preventDefault();
+          setActiveIndex(nextEnabledIndex(flat, -1, 1));
+          return;
+        case "End":
+          e.preventDefault();
+          setActiveIndex(nextEnabledIndex(flat, 0, -1));
+          return;
+        case "Enter":
+          e.preventDefault();
+          if (activeIndex >= 0 && flat[activeIndex]) commit(flat[activeIndex]);
+          return;
+        case "Tab":
+          changeOpen(false);
+          return;
+      }
+    },
+    [move, flat, activeIndex, commit, changeOpen]
+  );
+  const onTriggerKeyDown = (e) => {
+    if (disabled) return;
+    if (!open) {
+      if (e.key === "ArrowDown" || e.key === "ArrowUp" || e.key === "Enter" || e.key === " ") {
+        e.preventDefault();
+        changeOpen(true);
+      }
+      return;
+    }
+    if (e.key === " " && !searchable) {
+      e.preventDefault();
+      if (activeIndex >= 0 && flat[activeIndex]) commit(flat[activeIndex]);
+      return;
+    }
+    onNavKeyDown(e);
+    if (!searchable && e.key.length === 1 && !e.metaKey && !e.ctrlKey && !e.altKey) {
+      runTypeahead(e.key);
+    }
+  };
+  const showClear = clearable && selected != null && !disabled;
+  const activeId = open && activeIndex >= 0 ? `${uid}-opt-${activeIndex}` : void 0;
+  const comboProps = searchable ? { "aria-haspopup": "listbox" } : {
+    role: "combobox",
+    "aria-controls": open ? listboxId : void 0,
+    "aria-activedescendant": activeId,
+    "aria-haspopup": "listbox"
+  };
+  const pos = useAnchoredPosition(triggerRef, open, {
+    align,
+    matchWidth: true,
+    maxHeight
+  });
+  const panel = open && pos && typeof document !== "undefined" ? reactDom.createPortal(
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        ref: panelRef,
+        className: cn(panelBase, panelClassName),
+        style: {
+          top: pos.top,
+          left: pos.left,
+          width: pos.width,
+          maxHeight: pos.maxHeight
+        },
+        children: [
+          searchable && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex items-center border-b border-[#F2F2F7] px-3", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(SearchIcon2, { className: "pointer-events-none absolute left-3 h-3.5 w-3.5 text-[#8E8E93]" }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "input",
+              {
+                ref: focusOnMount,
+                type: "text",
+                role: "combobox",
+                "aria-expanded": true,
+                "aria-controls": listboxId,
+                "aria-activedescendant": activeId,
+                "aria-autocomplete": "list",
+                "aria-label": searchPlaceholder,
+                autoComplete: "off",
+                spellCheck: false,
+                value: query,
+                placeholder: searchPlaceholder,
+                onChange: (e) => {
+                  setQuery(e.target.value);
+                  onSearchChange?.(e.target.value);
+                },
+                onKeyDown: onNavKeyDown,
+                className: cn(
+                  "h-10 w-full border-0 bg-transparent pl-6 pr-2 text-[13px] text-[#1C1C1E]",
+                  "outline-none placeholder:text-[#8E8E93]"
+                )
+              }
+            ),
+            loading && /* @__PURE__ */ jsxRuntime.jsx(SpinnerIcon, { className: "absolute right-3 h-3.5 w-3.5 text-[#8E8E93]" })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              ref: listRef,
+              id: listboxId,
+              role: "listbox",
+              "aria-labelledby": label ? labelId : void 0,
+              className: "avt-scroll min-h-0 flex-1 overflow-y-auto py-1.5",
+              children: flat.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-3.5 py-6 text-center text-[13px] text-[#8E8E93]", children: loading ? loadingText : emptyText }) : groups.map((group) => /* @__PURE__ */ jsxRuntime.jsxs("div", { role: "group", "aria-label": group.group, children: [
+                group.group && /* @__PURE__ */ jsxRuntime.jsx("div", { className: groupLabelClass, children: group.group }),
+                group.items.map((option, i) => {
+                  const index = group.offset + i;
+                  const state = {
+                    selected: value != null && option.value === value,
+                    active: index === activeIndex
+                  };
+                  return /* @__PURE__ */ jsxRuntime.jsx(
+                    "div",
+                    {
+                      id: `${uid}-opt-${index}`,
+                      "data-index": index,
+                      role: "option",
+                      "aria-selected": state.selected,
+                      "aria-disabled": option.disabled || void 0,
+                      className: optionRowClass({
+                        ...state,
+                        disabled: option.disabled
+                      }),
+                      onMouseEnter: () => !option.disabled && setActiveIndex(index),
+                      onClick: () => commit(option),
+                      children: renderOption ? renderOption(option, state) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                        option.icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-shrink-0 text-[#8E8E93]", children: option.icon }),
+                        /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "min-w-0 flex-1", children: [
+                          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "block truncate", children: option.label }),
+                          option.description && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "block truncate text-[11px] font-normal text-[#8E8E93]", children: option.description })
+                        ] }),
+                        state.selected && /* @__PURE__ */ jsxRuntime.jsx(CheckIcon, { className: "h-4 w-4 flex-shrink-0 text-[#007AFF]" })
+                      ] })
+                    },
+                    option.value
+                  );
+                })
+              ] }, group.group ?? "__default"))
+            }
+          )
+        ]
+      }
+    ),
+    document.body
+  ) : null;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-col gap-1.5", containerClassName), ...props, children: [
+    label && /* @__PURE__ */ jsxRuntime.jsx("label", { id: labelId, htmlFor: uid, className: "text-[13px] font-medium text-[#3C3C43]", children: label }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        "button",
+        {
+          ref: triggerRef,
+          id: uid,
+          type: "button",
+          disabled,
+          "aria-expanded": open,
+          "aria-invalid": error ? true : void 0,
+          className: cn(
+            triggerBase,
+            triggerSizes[size],
+            "pr-9",
+            showClear && "pr-14",
+            error && "bg-[#FF3B30]/6 focus-visible:shadow-[0_0_0_2px_rgba(255,59,48,0.22)]",
+            open && "bg-white shadow-[0_0_0_2px_rgba(0,122,255,0.22)]",
+            className
+          ),
+          onClick: () => changeOpen(!open),
+          onKeyDown: onTriggerKeyDown,
+          ...comboProps,
+          children: [
+            selected?.icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-shrink-0 text-[#8E8E93]", children: selected.icon }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("flex-1 truncate", !selected && "text-[#8E8E93]"), children: selected ? selected.label : placeholder }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              ChevronDownIcon,
+              {
+                className: cn(
+                  "absolute right-3.5 h-4 w-4 flex-shrink-0 text-[#8E8E93]",
+                  "transition-transform duration-150",
+                  open && "rotate-180"
+                )
+              }
+            )
+          ]
+        }
+      ),
+      showClear && /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          type: "button",
+          tabIndex: -1,
+          "aria-label": "Hapus pilihan",
+          onClick: clear,
+          className: cn(
+            "absolute right-8 top-1/2 flex h-5 w-5 -translate-y-1/2 items-center justify-center",
+            "rounded-full bg-[#E5E5EA] text-[#8E8E93] transition-colors duration-150",
+            "hover:bg-[#D1D1D6] hover:text-[#1C1C1E]"
+          ),
+          children: /* @__PURE__ */ jsxRuntime.jsx(ClearIcon, { className: "h-2.5 w-2.5" })
+        }
+      )
+    ] }),
+    name && /* @__PURE__ */ jsxRuntime.jsx("input", { type: "hidden", name, value: value ?? "", readOnly: true }),
+    error ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-[#FF3B30]", children: error }) : hint ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-[#8E8E93]", children: hint }) : null,
+    panel
+  ] });
+});
+Select.displayName = "Select";
+var SelectSearch = React3__default.default.forwardRef(
+  function SelectSearch2(props, ref) {
+    return /* @__PURE__ */ jsxRuntime.jsx(Select, { ref, searchable: true, ...props });
+  }
+);
+SelectSearch.displayName = "SelectSearch";
+var FOCUSABLE = [
+  "a[href]",
+  "button:not([disabled])",
+  "input:not([disabled])",
+  "select:not([disabled])",
+  "textarea:not([disabled])",
+  '[tabindex]:not([tabindex="-1"])'
+].join(",");
+function useFocusTrap(containerRef, enabled = true, initialFocusRef) {
+  React3.useEffect(() => {
+    if (!enabled) return;
+    const container = containerRef.current;
+    if (!container) return;
+    const previouslyFocused = document.activeElement;
+    const focusables = () => Array.from(container.querySelectorAll(FOCUSABLE)).filter(
+      (el) => el.getClientRects().length > 0
+    );
+    const raf = requestAnimationFrame(() => {
+      const target = initialFocusRef?.current ?? focusables()[0] ?? container;
+      target.focus();
+    });
+    const onKeyDown = (e) => {
+      if (e.key !== "Tab") return;
+      const items = focusables();
+      if (items.length === 0) {
+        e.preventDefault();
+        return;
+      }
+      const first = items[0];
+      const last = items[items.length - 1];
+      const active = document.activeElement;
+      const inside = container.contains(active);
+      if (e.shiftKey) {
+        if (active === first || !inside) {
+          e.preventDefault();
+          last.focus();
+        }
+      } else if (active === last || !inside) {
+        e.preventDefault();
+        first.focus();
+      }
+    };
+    document.addEventListener("keydown", onKeyDown);
+    return () => {
+      cancelAnimationFrame(raf);
+      document.removeEventListener("keydown", onKeyDown);
+      previouslyFocused?.focus?.();
+    };
+  }, [containerRef, enabled, initialFocusRef]);
+}
+var sizes2 = {
+  sm: "max-w-sm",
+  md: "max-w-md",
+  lg: "max-w-lg",
+  xl: "max-w-2xl",
+  full: "max-w-[calc(100vw-2rem)]"
+};
+var lockCount = 0;
+var previousOverflow = "";
+function useBodyScrollLock(enabled) {
+  React3.useEffect(() => {
+    if (!enabled) return;
+    if (lockCount === 0) {
+      previousOverflow = document.body.style.overflow;
+      document.body.style.overflow = "hidden";
+    }
+    lockCount++;
+    return () => {
+      lockCount--;
+      if (lockCount === 0) document.body.style.overflow = previousOverflow;
+    };
+  }, [enabled]);
+}
+function Modal({
+  open,
+  onClose,
+  title,
+  description,
+  footer,
+  size = "md",
+  closeOnOverlay = true,
+  closeOnEscape = true,
+  showClose = true,
+  initialFocusRef,
+  overlayClassName,
+  bodyClassName,
+  role = "dialog",
+  className,
+  children,
+  ...props
+}) {
+  const reactId = React3__default.default.useId();
+  const titleId = `avt-modal-${reactId}-title`;
+  const descId = `avt-modal-${reactId}-desc`;
+  const panelRef = React3.useRef(null);
+  useEscapeDismiss(open && closeOnEscape, onClose);
+  useBodyScrollLock(open);
+  useFocusTrap(panelRef, open, initialFocusRef);
+  if (!open || typeof document === "undefined") return null;
+  const hasHeader = Boolean(title || description || showClose);
+  return reactDom.createPortal(
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "fixed inset-0 z-[1000] flex items-center justify-center p-4 sm:p-6", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          className: cn(
+            "avt-animate-fade-in absolute inset-0 bg-black/30 backdrop-blur-[2px]",
+            overlayClassName
+          ),
+          onClick: closeOnOverlay ? onClose : void 0,
+          "aria-hidden": "true"
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          ref: panelRef,
+          role,
+          "aria-modal": "true",
+          "aria-labelledby": title ? titleId : void 0,
+          "aria-describedby": description ? descId : void 0,
+          tabIndex: -1,
+          className: cn(
+            "avt-animate-modal relative z-10 flex w-full flex-col overflow-hidden outline-none",
+            "rounded-2xl bg-white/95 backdrop-blur-2xl",
+            "border border-[#E5E5EA]/60 shadow-[0_16px_48px_rgba(0,0,0,0.16)]",
+            "max-h-[calc(100vh-2rem)]",
+            sizes2[size],
+            className
+          ),
+          ...props,
+          children: [
+            hasHeader && /* @__PURE__ */ jsxRuntime.jsxs(ModalHeader, { showClose, onClose, children: [
+              title && /* @__PURE__ */ jsxRuntime.jsx(ModalTitle, { id: titleId, children: title }),
+              description && /* @__PURE__ */ jsxRuntime.jsx(ModalDescription, { id: descId, children: description })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx(ModalBody, { className: bodyClassName, children }),
+            footer && /* @__PURE__ */ jsxRuntime.jsx(ModalFooter, { children: footer })
+          ]
+        }
+      )
+    ] }),
+    document.body
+  );
+}
+function ModalHeader({
+  showClose,
+  onClose,
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: cn(
+        "flex items-start justify-between border-b border-[#F2F2F7] px-6 pb-4 pt-6",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-w-0 flex-1 pr-3", children }),
+        showClose && onClose && /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            onClick: onClose,
+            "aria-label": "Tutup",
+            className: cn(
+              "flex h-7 w-7 flex-shrink-0 items-center justify-center rounded-full",
+              "bg-[#F2F2F7] text-[#8E8E93] hover:bg-[#E5E5EA] hover:text-[#1C1C1E]",
+              "transition-colors duration-150",
+              "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#007AFF]/40"
+            ),
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              "svg",
+              {
+                className: "h-3.5 w-3.5",
+                viewBox: "0 0 24 24",
+                fill: "none",
+                stroke: "currentColor",
+                strokeWidth: "2.5",
+                strokeLinecap: "round",
+                "aria-hidden": "true",
+                children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M18 6L6 18M6 6l12 12" })
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+}
+function ModalTitle({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "h2",
+    {
+      className: cn("text-[15px] font-semibold tracking-[-0.01em] text-[#1C1C1E]", className),
+      ...props
+    }
+  );
+}
+function ModalDescription({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mt-0.5 text-[13px] text-[#8E8E93]", className), ...props });
+}
+function ModalBody({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("avt-scroll flex-1 overflow-y-auto px-6 py-5", className), ...props });
+}
+function ModalFooter({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: cn(
+        "flex items-center justify-end gap-2 px-6 py-4",
+        "border-t border-[#F2F2F7] bg-[#FAFAFA]",
+        className
+      ),
+      ...props
+    }
+  );
+}
+var accents = {
+  info: { bg: "bg-[#007AFF]/10", fg: "text-[#007AFF]", confirm: "primary" },
+  success: { bg: "bg-[#34C759]/10", fg: "text-[#34C759]", confirm: "primary" },
+  warning: { bg: "bg-[#FF9500]/10", fg: "text-[#FF9500]", confirm: "primary" },
+  danger: {
+    bg: "bg-[#FF3B30]/10",
+    fg: "text-[#FF3B30]",
+    confirm: "destructive"
+  },
+  question: { bg: "bg-[#5856D6]/10", fg: "text-[#5856D6]", confirm: "primary" }
+};
+var iconProps = {
+  className: "h-5 w-5",
+  viewBox: "0 0 24 24",
+  fill: "none",
+  stroke: "currentColor",
+  strokeWidth: "2.2",
+  strokeLinecap: "round",
+  strokeLinejoin: "round",
+  "aria-hidden": true
+};
+var icons = {
+  info: /* @__PURE__ */ jsxRuntime.jsxs("svg", { ...iconProps, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "9" }),
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 11v5M12 8h.01" })
+  ] }),
+  success: /* @__PURE__ */ jsxRuntime.jsxs("svg", { ...iconProps, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "9" }),
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M8.5 12.5l2.5 2.5 4.5-5" })
+  ] }),
+  warning: /* @__PURE__ */ jsxRuntime.jsxs("svg", { ...iconProps, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M10.3 4.3L2.6 17.6A2 2 0 004.3 20.6h15.4a2 2 0 001.7-3L13.7 4.3a2 2 0 00-3.4 0z" }),
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 9v4M12 17h.01" })
+  ] }),
+  danger: /* @__PURE__ */ jsxRuntime.jsxs("svg", { ...iconProps, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "9" }),
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M15 9l-6 6M9 9l6 6" })
+  ] }),
+  question: /* @__PURE__ */ jsxRuntime.jsxs("svg", { ...iconProps, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "9" }),
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M9.5 9.5a2.5 2.5 0 113.4 2.3c-.6.2-.9.8-.9 1.4v.3M12 17h.01" })
+  ] })
+};
+function Dialog({
+  open,
+  onClose,
+  variant = "question",
+  title,
+  description,
+  confirmText = "Konfirmasi",
+  cancelText = "Batal",
+  onConfirm,
+  onCancel,
+  loading = false,
+  closeOnConfirm = true,
+  hideCancel = false,
+  closeOnOverlay = true,
+  closeOnEscape = true,
+  size = "sm",
+  icon,
+  children,
+  className
+}) {
+  const reactId = React3__default.default.useId();
+  const titleId = `avt-dialog-${reactId}-title`;
+  const descId = `avt-dialog-${reactId}-desc`;
+  const [busy, setBusy] = React3.useState(false);
+  const isBusy = loading || busy;
+  const accent = accents[variant];
+  const handleCancel = React3.useCallback(() => {
+    if (isBusy) return;
+    onCancel?.();
+    onClose();
+  }, [isBusy, onCancel, onClose]);
+  const handleConfirm = React3.useCallback(async () => {
+    if (isBusy) return;
+    if (!onConfirm) {
+      if (closeOnConfirm) onClose();
+      return;
+    }
+    setBusy(true);
+    try {
+      await onConfirm();
+      if (closeOnConfirm) onClose();
+    } catch {
+    } finally {
+      setBusy(false);
+    }
+  }, [isBusy, onConfirm, closeOnConfirm, onClose]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Modal,
+    {
+      open,
+      onClose: handleCancel,
+      role: "alertdialog",
+      size,
+      showClose: false,
+      closeOnOverlay: closeOnOverlay && !isBusy,
+      closeOnEscape: closeOnEscape && !isBusy,
+      "aria-labelledby": titleId,
+      "aria-describedby": description ? descId : void 0,
+      bodyClassName: "px-6 pb-2 pt-6",
+      className,
+      footer: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        !hideCancel && /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "secondary", onClick: handleCancel, disabled: isBusy, children: cancelText }),
+        /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: accent.confirm, onClick: handleConfirm, loading: isBusy, children: confirmText })
+      ] }),
+      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-4", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: cn(
+              "flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-full",
+              accent.bg,
+              accent.fg
+            ),
+            children: icon ?? icons[variant]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0 flex-1 pt-0.5", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("h2", { id: titleId, className: "text-[15px] font-semibold tracking-[-0.01em] text-[#1C1C1E]", children: title }),
+          description && /* @__PURE__ */ jsxRuntime.jsx("p", { id: descId, className: "mt-1 text-[13px] leading-relaxed text-[#8E8E93]", children: description }),
+          children && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-3.5", children })
+        ] })
+      ] })
+    }
+  );
+}
 function useClickOutside(ref, handler, enabled = true) {
   React3.useEffect(() => {
     if (!enabled) return;
@@ -1427,6 +2222,7 @@ exports.CardFooter = CardFooter;
 exports.CardHeader = CardHeader;
 exports.CardTitle = CardTitle;
 exports.DataTable = DataTable;
+exports.Dialog = Dialog;
 exports.Drawer = Drawer;
 exports.Input = Input;
 exports.Menu = MenuRoot;
@@ -1438,6 +2234,12 @@ exports.MenuLabel = MenuLabel;
 exports.MenuRoot = MenuRoot;
 exports.MenuSeparator = MenuSeparator;
 exports.MenuTrigger = MenuTrigger;
+exports.Modal = Modal;
+exports.ModalBody = ModalBody;
+exports.ModalDescription = ModalDescription;
+exports.ModalFooter = ModalFooter;
+exports.ModalHeader = ModalHeader;
+exports.ModalTitle = ModalTitle;
 exports.Navbar = Navbar;
 exports.NavbarBrand = NavbarBrand;
 exports.NavbarCenter = NavbarCenter;
@@ -1447,6 +2249,8 @@ exports.NavbarLeft = NavbarLeft;
 exports.NavbarRight = NavbarRight;
 exports.NavbarSearch = NavbarSearch;
 exports.Scrollbar = Scrollbar;
+exports.Select = Select;
+exports.SelectSearch = SelectSearch;
 exports.Sheet = Sheet;
 exports.SheetContent = SheetContent;
 exports.SheetDescription = SheetDescription;
@@ -1461,8 +2265,6 @@ exports.SidebarFooter = SidebarFooter;
 exports.SidebarGroup = SidebarGroup;
 exports.SidebarHeader = SidebarHeader;
 exports.SidebarItem = SidebarItem;
-exports.SidebarSubMenu = SidebarSubMenu;
-exports.SidebarSubMenuItem = SidebarSubMenuItem;
 exports.SidebarToggle = SidebarToggle;
 exports.SidebarUser = SidebarUser;
 exports.Table = Table;
@@ -1486,7 +2288,10 @@ exports.colors = colors;
 exports.dismissToast = dismissToast;
 exports.generateId = generateId;
 exports.toast = toast;
+exports.useAnchoredPosition = useAnchoredPosition;
 exports.useClickOutside = useClickOutside;
+exports.useEscapeDismiss = useEscapeDismiss;
+exports.useFocusTrap = useFocusTrap;
 exports.useKeydown = useKeydown;
 exports.useToast = useToast;
 exports.withScrollbar = withScrollbar;