avt-rct-lib 1.0.0

package/dist/index.js

@@ -0,0 +1,1266 @@
+import React3, { createContext, useState, useReducer, useEffect, useCallback, useRef, useContext } from 'react';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { createPortal } from 'react-dom';
+
+// src/components/Button.tsx
+
+// src/lib/utils.ts
+function cn(...inputs) {
+  const result = [];
+  for (const input of inputs) {
+    if (!input && input !== 0) continue;
+    if (typeof input === "string" || typeof input === "number") {
+      result.push(String(input));
+    } else if (Array.isArray(input)) {
+      const inner = cn(...input);
+      if (inner) result.push(inner);
+    } else if (typeof input === "object") {
+      for (const [key, val] of Object.entries(input)) {
+        if (val) result.push(key);
+      }
+    }
+  }
+  return result.join(" ");
+}
+var colors = {
+  blue: "#007AFF",
+  green: "#34C759",
+  red: "#FF3B30",
+  orange: "#FF9500",
+  purple: "#AF52DE",
+  teal: "#5AC8FA",
+  indigo: "#5856D6",
+  bg: "#F2F2F7",
+  card: "#FFFFFF",
+  label: "#1C1C1E",
+  label2: "#3C3C43",
+  label3: "#8E8E93",
+  sep: "#E5E5EA",
+  fill: "#F2F2F7",
+  fill2: "#E5E5EA",
+  fill3: "#D1D1D6"
+};
+function generateId() {
+  return Math.random().toString(36).slice(2, 9);
+}
+var base = [
+  "inline-flex items-center justify-center gap-2 font-medium select-none",
+  "transition-all duration-150 focus-visible:outline-none",
+  "focus-visible:ring-2 focus-visible:ring-[#007AFF]/40 focus-visible:ring-offset-1",
+  "disabled:pointer-events-none disabled:opacity-40",
+  "active:scale-[0.97]"
+].join(" ");
+var variants = {
+  primary: "bg-[#007AFF] text-white rounded-xl shadow-[0_2px_8px_rgba(0,122,255,0.28)] hover:bg-[#0071EB] hover:shadow-[0_4px_12px_rgba(0,122,255,0.35)]",
+  secondary: "bg-[#F2F2F7] text-[#1C1C1E] rounded-xl hover:bg-[#E5E5EA]",
+  ghost: "text-[#007AFF] rounded-xl hover:bg-[#007AFF]/10",
+  outline: "border border-[#E5E5EA] bg-white text-[#1C1C1E] rounded-xl hover:bg-[#F2F2F7] shadow-[0_1px_3px_rgba(0,0,0,0.06)]",
+  destructive: "bg-[#FF3B30] text-white rounded-xl shadow-[0_2px_8px_rgba(255,59,48,0.25)] hover:bg-[#E0352B]",
+  link: "text-[#007AFF] underline-offset-4 hover:underline p-0 h-auto"
+};
+var sizes = {
+  xs: "h-7 px-3 text-xs",
+  sm: "h-8 px-4 text-sm",
+  md: "h-10 px-5 text-sm",
+  lg: "h-12 px-7 text-[15px]",
+  icon: "h-9 w-9 rounded-xl"
+};
+var Spinner = () => /* @__PURE__ */ jsxs("svg", { className: "h-4 w-4 animate-spin", viewBox: "0 0 24 24", fill: "none", children: [
+  /* @__PURE__ */ jsx("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "3" }),
+  /* @__PURE__ */ jsx("path", { className: "opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8v4a4 4 0 00-4 4H4z" })
+] });
+var Button = React3.forwardRef(
+  ({
+    variant = "primary",
+    size = "md",
+    loading = false,
+    leftIcon,
+    rightIcon,
+    fullWidth = false,
+    className,
+    children,
+    disabled,
+    ...props
+  }, ref) => /* @__PURE__ */ jsxs(
+    "button",
+    {
+      ref,
+      disabled: disabled || loading,
+      className: cn(base, variants[variant], sizes[size], fullWidth && "w-full", className),
+      ...props,
+      children: [
+        loading ? /* @__PURE__ */ jsx(Spinner, {}) : leftIcon,
+        children,
+        !loading && rightIcon
+      ]
+    }
+  )
+);
+Button.displayName = "Button";
+var variants2 = {
+  default: "bg-[#007AFF]/10 text-[#007AFF]",
+  secondary: "bg-[#F2F2F7] text-[#3C3C43]",
+  success: "bg-[#34C759]/12 text-[#1A8C39]",
+  warning: "bg-[#FF9500]/12 text-[#B86800]",
+  destructive: "bg-[#FF3B30]/10 text-[#D0302A]",
+  purple: "bg-[#AF52DE]/10 text-[#8B3BB5]",
+  outline: "border border-[#E5E5EA] bg-transparent text-[#3C3C43]"
+};
+var dotColors = {
+  default: "bg-[#007AFF]",
+  secondary: "bg-[#8E8E93]",
+  success: "bg-[#34C759]",
+  warning: "bg-[#FF9500]",
+  destructive: "bg-[#FF3B30]",
+  purple: "bg-[#AF52DE]",
+  outline: "bg-[#8E8E93]"
+};
+function Badge({ variant = "default", dot = false, className, children, ...props }) {
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      className: cn(
+        "inline-flex items-center gap-1.5 rounded-full px-2.5 py-0.5 text-xs font-medium select-none",
+        variants2[variant],
+        className
+      ),
+      ...props,
+      children: [
+        dot && /* @__PURE__ */ jsx("span", { className: cn("h-1.5 w-1.5 flex-shrink-0 rounded-full", dotColors[variant]) }),
+        children
+      ]
+    }
+  );
+}
+var Input = React3.forwardRef(
+  ({ label, hint, error, leftAddon, rightAddon, containerClassName, className, id, ...props }, ref) => {
+    const inputId = id ?? label?.toLowerCase().replace(/\s+/g, "-");
+    return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-1.5", containerClassName), children: [
+      label && /* @__PURE__ */ jsx("label", { htmlFor: inputId, className: "text-[13px] font-medium text-[#3C3C43]", children: label }),
+      /* @__PURE__ */ jsxs("div", { className: "relative flex items-center", children: [
+        leftAddon && /* @__PURE__ */ jsx("div", { className: "absolute left-3.5 flex items-center text-[#8E8E93]", children: leftAddon }),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            id: inputId,
+            ref,
+            className: cn(
+              "flex h-11 w-full rounded-xl bg-[#F2F2F7] text-sm text-[#1C1C1E]",
+              "px-4 placeholder:text-[#8E8E93]",
+              "border-0 outline-none",
+              "transition-all duration-150",
+              "focus:bg-white focus:shadow-[0_0_0_2px_rgba(0,122,255,0.22)]",
+              "disabled:cursor-not-allowed disabled:opacity-50",
+              error && "bg-[#FF3B30]/6 focus:shadow-[0_0_0_2px_rgba(255,59,48,0.22)]",
+              leftAddon && "pl-9",
+              rightAddon && "pr-9",
+              className
+            ),
+            ...props
+          }
+        ),
+        rightAddon && /* @__PURE__ */ jsx("div", { className: "absolute right-3.5 flex items-center text-[#8E8E93]", children: rightAddon })
+      ] }),
+      error ? /* @__PURE__ */ jsx("p", { className: "text-xs text-[#FF3B30]", children: error }) : hint ? /* @__PURE__ */ jsx("p", { className: "text-xs text-[#8E8E93]", children: hint }) : null
+    ] });
+  }
+);
+Input.displayName = "Input";
+var Textarea = React3.forwardRef(
+  ({ label, hint, error, containerClassName, className, id, ...props }, ref) => {
+    const inputId = id ?? label?.toLowerCase().replace(/\s+/g, "-");
+    return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-1.5", containerClassName), children: [
+      label && /* @__PURE__ */ jsx("label", { htmlFor: inputId, className: "text-[13px] font-medium text-[#3C3C43]", children: label }),
+      /* @__PURE__ */ jsx(
+        "textarea",
+        {
+          id: inputId,
+          ref,
+          className: cn(
+            "w-full rounded-xl bg-[#F2F2F7] px-4 py-3 text-sm text-[#1C1C1E]",
+            "placeholder:text-[#8E8E93] border-0 outline-none resize-none",
+            "transition-all duration-150",
+            "focus:bg-white focus:shadow-[0_0_0_2px_rgba(0,122,255,0.22)]",
+            "disabled:cursor-not-allowed disabled:opacity-50",
+            error && "bg-[#FF3B30]/6 focus:shadow-[0_0_0_2px_rgba(255,59,48,0.22)]",
+            className
+          ),
+          ...props
+        }
+      ),
+      error ? /* @__PURE__ */ jsx("p", { className: "text-xs text-[#FF3B30]", children: error }) : hint ? /* @__PURE__ */ jsx("p", { className: "text-xs text-[#8E8E93]", children: hint }) : null
+    ] });
+  }
+);
+Textarea.displayName = "Textarea";
+function Card({ hover = false, glass = false, padding = "none", className, ...props }) {
+  const paddings = { none: "", sm: "p-4", md: "p-5", lg: "p-6" };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "rounded-2xl border border-[#E5E5EA]/60",
+        glass ? "bg-white/75 backdrop-blur-2xl" : "bg-white",
+        "shadow-[0_2px_8px_rgba(0,0,0,0.07),_0_0_1px_rgba(0,0,0,0.04)]",
+        hover && "transition-shadow duration-200 hover:shadow-[0_4px_16px_rgba(0,0,0,0.10)] cursor-pointer",
+        paddings[padding],
+        className
+      ),
+      ...props
+    }
+  );
+}
+function CardHeader({ className, ...props }) {
+  return /* @__PURE__ */ jsx("div", { className: cn("px-5 pt-5 pb-4", className), ...props });
+}
+function CardTitle({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "h3",
+    {
+      className: cn("text-[15px] font-semibold tracking-[-0.01em] text-[#1C1C1E]", className),
+      ...props
+    }
+  );
+}
+function CardDescription({ className, ...props }) {
+  return /* @__PURE__ */ jsx("p", { className: cn("mt-0.5 text-[13px] text-[#8E8E93]", className), ...props });
+}
+function CardContent({ className, ...props }) {
+  return /* @__PURE__ */ jsx("div", { className: cn("px-5 pb-5", className), ...props });
+}
+function CardFooter({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "flex items-center justify-between px-5 py-3.5",
+        "border-t border-[#F2F2F7] bg-[#FAFAFA] rounded-b-2xl",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function CardDivider({ className, ...props }) {
+  return /* @__PURE__ */ jsx("hr", { className: cn("border-0 border-t border-[#F2F2F7]", className), ...props });
+}
+function Table({ card = true, className, children, ...props }) {
+  const childArray = React3.Children.toArray(children);
+  const toolbars = childArray.filter((c) => React3.isValidElement(c) && c.type === TableToolbar);
+  const paginations = childArray.filter((c) => React3.isValidElement(c) && c.type === TablePagination);
+  const tableNodes = childArray.filter(
+    (c) => React3.isValidElement(c) && c.type !== TableToolbar && c.type !== TablePagination
+  );
+  const inner = /* @__PURE__ */ jsxs(Fragment, { children: [
+    toolbars,
+    /* @__PURE__ */ jsx("div", { className: "w-full overflow-x-auto avt-scroll", children: /* @__PURE__ */ jsx("table", { className: "w-full caption-bottom text-sm", children: tableNodes }) }),
+    paginations
+  ] });
+  if (!card) return /* @__PURE__ */ jsx(Fragment, { children: inner });
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "rounded-2xl border border-[#E5E5EA]/60 bg-white overflow-hidden",
+        "shadow-[0_2px_8px_rgba(0,0,0,0.07)]",
+        className
+      ),
+      ...props,
+      children: inner
+    }
+  );
+}
+function TableHeader({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "thead",
+    {
+      className: cn("bg-[#F9F9F9] border-b border-[#F2F2F7]", className),
+      ...props
+    }
+  );
+}
+function TableBody({ className, ...props }) {
+  return /* @__PURE__ */ jsx("tbody", { className: cn("[&_tr:last-child]:border-0", className), ...props });
+}
+function TableFooter({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "tfoot",
+    {
+      className: cn("border-t border-[#F2F2F7] bg-[#FAFAFA] font-medium", className),
+      ...props
+    }
+  );
+}
+function TableRow({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "tr",
+    {
+      className: cn(
+        "border-b border-[#F2F2F7] transition-colors duration-100",
+        "hover:bg-[#007AFF]/[0.03]",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function TableHead({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "th",
+    {
+      className: cn(
+        "h-10 px-4 text-left align-middle",
+        "text-[11px] font-semibold text-[#8E8E93] uppercase tracking-wider",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function TableCell({ className, ...props }) {
+  return /* @__PURE__ */ jsx("td", { className: cn("px-4 py-3.5 align-middle text-[13px] text-[#1C1C1E]", className), ...props });
+}
+function TableCaption({ className, ...props }) {
+  return /* @__PURE__ */ jsx("caption", { className: cn("mt-4 text-xs text-[#8E8E93]", className), ...props });
+}
+function TableToolbar({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn("flex items-center gap-3 px-5 py-3.5 border-b border-[#F2F2F7]", className),
+      ...props
+    }
+  );
+}
+function TablePagination({
+  page,
+  pageCount,
+  canPrev,
+  canNext,
+  onPrev,
+  onNext,
+  className
+}) {
+  const Btn = ({
+    onClick,
+    disabled,
+    children
+  }) => /* @__PURE__ */ jsx(
+    "button",
+    {
+      onClick,
+      disabled,
+      className: "flex h-7 w-7 items-center justify-center rounded-lg bg-[#F2F2F7] text-[#3C3C43] hover:bg-[#E5E5EA] disabled:opacity-40 transition-colors",
+      children
+    }
+  );
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "flex items-center justify-between border-t border-[#F2F2F7] px-5 py-3",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxs("p", { className: "text-[12px] text-[#8E8E93]", children: [
+          "Halaman ",
+          page,
+          " dari ",
+          pageCount || 1
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex gap-1.5", children: [
+          /* @__PURE__ */ jsx(Btn, { onClick: onPrev, disabled: !canPrev, children: /* @__PURE__ */ jsx("svg", { className: "h-4 w-4", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx("path", { d: "M15 18l-6-6 6-6" }) }) }),
+          /* @__PURE__ */ jsx(Btn, { onClick: onNext, disabled: !canNext, children: /* @__PURE__ */ jsx("svg", { className: "h-4 w-4", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx("path", { d: "M9 18l6-6-6-6" }) }) })
+        ] })
+      ]
+    }
+  );
+}
+var TabsContext = createContext({
+  active: "",
+  setActive: () => {
+  },
+  variant: "pills"
+});
+var useTabs = () => useContext(TabsContext);
+function Tabs({
+  defaultValue = "",
+  value,
+  onValueChange,
+  variant = "pills",
+  children,
+  className
+}) {
+  const [internalActive, setInternalActive] = useState(defaultValue);
+  const active = value ?? internalActive;
+  const setActive = (v) => {
+    setInternalActive(v);
+    onValueChange?.(v);
+  };
+  return /* @__PURE__ */ jsx(TabsContext.Provider, { value: { active, setActive, variant }, children: /* @__PURE__ */ jsx("div", { className: cn("flex flex-col", className), children }) });
+}
+function TabsList({ className, children, ...props }) {
+  const { variant } = useTabs();
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "tablist",
+      className: cn(
+        "flex items-center overflow-x-auto avt-scroll",
+        variant === "segment" && "gap-0.5 rounded-xl bg-[#E5E5EA] p-1 min-w-0 flex-shrink-0",
+        variant === "pills" && "gap-1",
+        variant === "underline" && "gap-0 border-b border-[#E5E5EA]",
+        className
+      ),
+      ...props,
+      children
+    }
+  );
+}
+function TabsTrigger({ value, icon, className, children, ...props }) {
+  const { active, setActive, variant } = useTabs();
+  const isActive = active === value;
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      role: "tab",
+      "aria-selected": isActive,
+      onClick: () => setActive(value),
+      className: cn(
+        "inline-flex flex-shrink-0 items-center gap-1.5 text-[13px] font-medium transition-all duration-150 select-none whitespace-nowrap",
+        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#007AFF]/30",
+        "disabled:pointer-events-none disabled:opacity-50",
+        variant === "segment" && [
+          "flex-1 justify-center rounded-lg px-3 py-2 min-h-[36px]",
+          isActive ? "bg-white text-[#1C1C1E] shadow-[0_1px_3px_rgba(0,0,0,0.12)]" : "text-[#8E8E93] hover:text-[#3C3C43]"
+        ],
+        variant === "pills" && [
+          "rounded-lg px-3.5 py-2 min-h-[36px]",
+          isActive ? "bg-[#007AFF] text-white shadow-[0_2px_6px_rgba(0,122,255,0.25)]" : "text-[#8E8E93] hover:bg-[#F2F2F7] hover:text-[#1C1C1E]"
+        ],
+        variant === "underline" && [
+          "relative px-4 py-3 border-b-2 -mb-px min-h-[44px]",
+          isActive ? "border-[#007AFF] text-[#007AFF]" : "border-transparent text-[#8E8E93] hover:text-[#3C3C43]"
+        ],
+        className
+      ),
+      ...props,
+      children: [
+        icon && /* @__PURE__ */ jsx("span", { className: "flex-shrink-0", children: icon }),
+        children
+      ]
+    }
+  );
+}
+function TabsContent({
+  value,
+  keepMounted = false,
+  className,
+  children,
+  ...props
+}) {
+  const { active } = useTabs();
+  const isActive = active === value;
+  if (!keepMounted && !isActive) return null;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "tabpanel",
+      hidden: !isActive,
+      className: cn("avt-animate-fade-in", isActive && "block", className),
+      ...props,
+      children
+    }
+  );
+}
+function Scrollbar({
+  maxHeight,
+  maxWidth,
+  direction = "vertical",
+  always = false,
+  className,
+  style,
+  ...props
+}) {
+  const overflow = {
+    vertical: "overflow-y-auto overflow-x-hidden",
+    horizontal: "overflow-x-auto overflow-y-hidden",
+    both: "overflow-auto"
+  }[direction];
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "avt-scroll",
+        overflow,
+        // On hover scroll trick (webkit only - fallback gracefully)
+        !always && "hover:avt-scroll",
+        className
+      ),
+      style: {
+        maxHeight: typeof maxHeight === "number" ? `${maxHeight}px` : maxHeight,
+        maxWidth: typeof maxWidth === "number" ? `${maxWidth}px` : maxWidth,
+        ...style
+      },
+      ...props
+    }
+  );
+}
+function withScrollbar(Component, scrollbarProps) {
+  return function ScrollbarWrapped(props) {
+    return /* @__PURE__ */ jsx(Scrollbar, { ...scrollbarProps, children: /* @__PURE__ */ jsx(Component, { ...props }) });
+  };
+}
+var storeState = [];
+var storeListeners = /* @__PURE__ */ new Set();
+var timers = /* @__PURE__ */ new Map();
+function dispatch(action) {
+  if (action.type === "ADD") {
+    storeState = [...storeState, action.payload];
+  } else if (action.type === "REMOVE") {
+    storeState = storeState.filter((t) => t.id !== action.payload.id);
+    const timer = timers.get(action.payload.id);
+    if (timer) {
+      clearTimeout(timer);
+      timers.delete(action.payload.id);
+    }
+  }
+  storeListeners.forEach((l) => l());
+}
+function toast(options) {
+  const id = generateId();
+  const duration = options.duration ?? 4e3;
+  dispatch({ type: "ADD", payload: { id, duration, ...options } });
+  if (duration !== Infinity) {
+    timers.set(id, setTimeout(() => dispatch({ type: "REMOVE", payload: { id } }), duration));
+  }
+  return id;
+}
+function dismissToast(id) {
+  dispatch({ type: "REMOVE", payload: { id } });
+}
+function useToast() {
+  const [, forceUpdate] = useReducer((x) => x + 1, 0);
+  useEffect(() => {
+    storeListeners.add(forceUpdate);
+    return () => {
+      storeListeners.delete(forceUpdate);
+    };
+  }, []);
+  return {
+    toasts: storeState,
+    toast,
+    dismiss: dismissToast
+  };
+}
+var IconCheck = () => /* @__PURE__ */ jsx("svg", { className: "h-4 w-4 flex-shrink-0 mt-0.5", viewBox: "0 0 24 24", fill: "none", stroke: "#34C759", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx("path", { d: "M20 6L9 17l-5-5" }) });
+var IconX = () => /* @__PURE__ */ jsxs("svg", { className: "h-4 w-4 flex-shrink-0 mt-0.5", viewBox: "0 0 24 24", fill: "none", stroke: "#FF3B30", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: [
+  /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "10" }),
+  /* @__PURE__ */ jsx("path", { d: "M15 9l-6 6M9 9l6 6" })
+] });
+var IconInfo = () => /* @__PURE__ */ jsxs("svg", { className: "h-4 w-4 flex-shrink-0 mt-0.5", viewBox: "0 0 24 24", fill: "none", stroke: "#007AFF", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: [
+  /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "10" }),
+  /* @__PURE__ */ jsx("path", { d: "M12 16v-4M12 8h.01" })
+] });
+var IconWarn = () => /* @__PURE__ */ jsxs("svg", { className: "h-4 w-4 flex-shrink-0 mt-0.5", viewBox: "0 0 24 24", fill: "none", stroke: "#FF9500", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: [
+  /* @__PURE__ */ jsx("path", { d: "M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z" }),
+  /* @__PURE__ */ jsx("path", { d: "M12 9v4M12 17h.01" })
+] });
+var defaultIcons = {
+  default: /* @__PURE__ */ jsx(IconInfo, {}),
+  success: /* @__PURE__ */ jsx(IconCheck, {}),
+  destructive: /* @__PURE__ */ jsx(IconX, {}),
+  warning: /* @__PURE__ */ jsx(IconWarn, {})
+};
+function ToastItemComp({ item, onDismiss }) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "avt-animate-toast",
+        "flex w-[calc(100vw-2rem)] sm:w-full max-w-[360px] items-start gap-3 rounded-2xl",
+        "border border-[#E5E5EA]/60 bg-white/95 backdrop-blur-2xl",
+        "px-4 py-3.5 shadow-[0_8px_24px_rgba(0,0,0,0.12),_0_0_1px_rgba(0,0,0,0.06)]",
+        "group cursor-default select-none"
+      ),
+      role: "alert",
+      children: [
+        item.icon ?? defaultIcons[item.variant ?? "default"],
+        /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
+          item.title && /* @__PURE__ */ jsx("p", { className: "text-[13px] font-semibold text-[#1C1C1E] leading-snug", children: item.title }),
+          item.description && /* @__PURE__ */ jsx("p", { className: "mt-0.5 text-[12px] text-[#8E8E93] leading-snug", children: item.description })
+        ] }),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: () => onDismiss(item.id),
+            className: cn(
+              "flex h-5 w-5 flex-shrink-0 items-center justify-center rounded-full",
+              "bg-[#F2F2F7] text-[#8E8E93]",
+              "opacity-0 group-hover:opacity-100 transition-opacity",
+              "hover:bg-[#E5E5EA] hover:text-[#1C1C1E]"
+            ),
+            "aria-label": "Tutup",
+            children: /* @__PURE__ */ jsx("svg", { className: "h-3 w-3", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", children: /* @__PURE__ */ jsx("path", { d: "M18 6L6 18M6 6l12 12" }) })
+          }
+        )
+      ]
+    }
+  );
+}
+var positionClasses = {
+  "top-right": "top-4 right-4 items-end",
+  "top-left": "top-4 left-4 items-start",
+  "top-center": "top-4 left-1/2 -translate-x-1/2 items-center",
+  "bottom-right": "bottom-4 right-4 sm:right-4 left-4 sm:left-auto items-end",
+  "bottom-left": "bottom-4 left-4 items-start",
+  "bottom-center": "bottom-4 left-1/2 -translate-x-1/2 items-center"
+};
+function Toaster({ position = "bottom-right" }) {
+  const { toasts, dismiss } = useToast();
+  if (typeof document === "undefined") return null;
+  return createPortal(
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn(
+          "fixed z-[9999] flex flex-col gap-2 pointer-events-none",
+          positionClasses[position]
+        ),
+        "aria-live": "polite",
+        "aria-label": "Notifications",
+        children: toasts.map((item) => /* @__PURE__ */ jsx("div", { className: "pointer-events-auto", children: /* @__PURE__ */ jsx(ToastItemComp, { item, onDismiss: dismiss }) }, item.id))
+      }
+    ),
+    document.body
+  );
+}
+function useKeydown(key, handler, enabled = true) {
+  useEffect(() => {
+    if (!enabled) return;
+    const listener = (e) => {
+      if (e.key === key) handler();
+    };
+    document.addEventListener("keydown", listener);
+    return () => document.removeEventListener("keydown", listener);
+  }, [key, handler, enabled]);
+}
+var MenuContext = createContext({
+  open: false,
+  close: () => {
+  },
+  rootRef: { current: null },
+  contentRef: { current: null }
+});
+var useMenu = () => useContext(MenuContext);
+function MenuRoot({ children, open: controlledOpen, onOpenChange }) {
+  const [internalOpen, setInternalOpen] = useState(false);
+  const open = controlledOpen ?? internalOpen;
+  const setOpen = (v) => {
+    setInternalOpen(v);
+    onOpenChange?.(v);
+  };
+  const close = useCallback(() => setOpen(false), []);
+  const toggle = () => setOpen(!open);
+  const rootRef = useRef(null);
+  const contentRef = useRef(null);
+  useKeydown("Escape", close, open);
+  useEffect(() => {
+    if (!open) return;
+    const handler = (e) => {
+      const target = e.target;
+      if (rootRef.current?.contains(target)) return;
+      if (contentRef.current?.contains(target)) return;
+      close();
+    };
+    document.addEventListener("mousedown", handler, true);
+    document.addEventListener("touchstart", handler, true);
+    return () => {
+      document.removeEventListener("mousedown", handler, true);
+      document.removeEventListener("touchstart", handler, true);
+    };
+  }, [open, close]);
+  useEffect(() => {
+    const el = rootRef.current;
+    if (!el) return;
+    const handler = () => toggle();
+    el.addEventListener("avt-menu-toggle", handler);
+    return () => el.removeEventListener("avt-menu-toggle", handler);
+  }, [open]);
+  return /* @__PURE__ */ jsx(MenuContext.Provider, { value: { open, close, rootRef, contentRef }, children: /* @__PURE__ */ jsx("div", { ref: rootRef, "data-avt-menu": "", className: "relative inline-block", children }) });
+}
+function MenuButton({
+  className,
+  children,
+  ...props
+}) {
+  const { open } = useMenu();
+  const handleClick = (e) => {
+    e.stopPropagation();
+    props.onClick?.(e);
+    const el = e.currentTarget.closest("[data-avt-menu]");
+    el?.dispatchEvent(new CustomEvent("avt-menu-toggle", { bubbles: false }));
+  };
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      "aria-haspopup": "menu",
+      "aria-expanded": open,
+      className: cn("select-none", className),
+      ...props,
+      onClick: handleClick,
+      children
+    }
+  );
+}
+function MenuContent({
+  align = "start",
+  sideOffset = 6,
+  minWidth = 180,
+  className,
+  children,
+  style,
+  ...props
+}) {
+  const { open, rootRef, contentRef } = useMenu();
+  const [pos, setPos] = useState(null);
+  useEffect(() => {
+    if (!open) {
+      setPos(null);
+      return;
+    }
+    const update = () => {
+      if (!rootRef.current) return;
+      const rect = rootRef.current.getBoundingClientRect();
+      const vw = window.innerWidth;
+      const vh = window.innerHeight;
+      let left;
+      if (align === "end") left = rect.right - minWidth;
+      else if (align === "center") left = rect.left + rect.width / 2 - minWidth / 2;
+      else left = rect.left;
+      left = Math.max(8, Math.min(left, vw - minWidth - 8));
+      const spaceBelow = vh - rect.bottom - sideOffset - 8;
+      const spaceAbove = rect.top - sideOffset - 8;
+      const flipUp = spaceBelow < 100 && spaceAbove > spaceBelow;
+      const top = flipUp ? rect.top - sideOffset - Math.min(320, spaceAbove) : rect.bottom + sideOffset;
+      const maxH = flipUp ? Math.max(60, spaceAbove) : Math.max(60, spaceBelow);
+      setPos({ top, left, maxH });
+    };
+    update();
+    window.addEventListener("scroll", update, true);
+    window.addEventListener("resize", update);
+    return () => {
+      window.removeEventListener("scroll", update, true);
+      window.removeEventListener("resize", update);
+    };
+  }, [open, align, sideOffset, minWidth]);
+  if (!open || !pos || typeof document === "undefined") return null;
+  return createPortal(
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: contentRef,
+        role: "menu",
+        className: cn(
+          "fixed z-[9999] avt-animate-slide-up overflow-y-auto avt-scroll",
+          "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)]",
+          "py-1.5",
+          className
+        ),
+        style: { top: pos.top, left: pos.left, minWidth, maxHeight: pos.maxH, ...style },
+        ...props,
+        children
+      }
+    ),
+    document.body
+  );
+}
+function MenuItem({
+  icon,
+  rightSlot,
+  variant = "default",
+  disabled,
+  className,
+  children,
+  onClick,
+  ...props
+}) {
+  const { close } = useMenu();
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      role: "menuitem",
+      type: "button",
+      disabled,
+      className: cn(
+        "flex w-full items-center gap-2.5 px-3.5 py-2.5 text-[13px] font-medium",
+        "transition-colors duration-100 outline-none select-none",
+        "focus-visible:bg-[#F2F2F7]",
+        // Mobile: min touch target
+        "min-h-[44px] sm:min-h-0",
+        variant === "default" ? "text-[#1C1C1E] hover:bg-[#F2F2F7]" : "text-[#FF3B30] hover:bg-[#FF3B30]/8",
+        disabled && "pointer-events-none opacity-40",
+        className
+      ),
+      onClick: (e) => {
+        onClick?.(e);
+        close();
+      },
+      ...props,
+      children: [
+        icon && /* @__PURE__ */ jsx("span", { className: cn("flex-shrink-0", variant === "default" ? "text-[#8E8E93]" : "text-[#FF3B30]"), children: icon }),
+        /* @__PURE__ */ jsx("span", { className: "flex-1 text-left", children }),
+        rightSlot && /* @__PURE__ */ jsx("span", { className: "ml-auto text-[#8E8E93]", children: rightSlot })
+      ]
+    }
+  );
+}
+function MenuSeparator({ className }) {
+  return /* @__PURE__ */ jsx("div", { className: cn("my-1 h-px bg-[#F2F2F7]", className), role: "separator" });
+}
+function MenuLabel({ className, children }) {
+  return /* @__PURE__ */ jsx("div", { className: cn("px-3.5 py-1.5 text-[11px] font-semibold uppercase tracking-wider text-[#8E8E93]", className), children });
+}
+function MenuTrigger({ children }) {
+  return children;
+}
+var slideAnim = {
+  right: "avt-animate-slide-right",
+  left: "avt-animate-slide-left",
+  bottom: "avt-animate-slide-bottom"
+};
+var positionClasses2 = {
+  right: "right-0 top-0 h-full",
+  left: "left-0 top-0 h-full",
+  bottom: "bottom-0 left-0 w-full"
+};
+function Sheet({
+  open,
+  onClose,
+  side = "right",
+  width = "420px",
+  height = "60vh",
+  closeOnOverlay = true,
+  children
+}) {
+  useKeydown("Escape", onClose, open);
+  useEffect(() => {
+    if (open) document.body.style.overflow = "hidden";
+    else document.body.style.overflow = "";
+    return () => {
+      document.body.style.overflow = "";
+    };
+  }, [open]);
+  if (!open || typeof document === "undefined") return null;
+  const panelStyle = {
+    ...side !== "bottom" ? { width } : { height }
+  };
+  return createPortal(
+    /* @__PURE__ */ jsxs("div", { className: "fixed inset-0 z-[999] flex", "aria-modal": "true", role: "dialog", children: [
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "absolute inset-0 bg-black/30 backdrop-blur-[2px] avt-animate-fade-in",
+          onClick: closeOnOverlay ? onClose : void 0,
+          "aria-hidden": "true"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: cn(
+            "absolute z-10 flex flex-col bg-white/95 backdrop-blur-2xl",
+            "border-[#E5E5EA]/60 shadow-[0_16px_48px_rgba(0,0,0,0.16)]",
+            side === "right" && "border-l rounded-l-2xl",
+            side === "left" && "border-r rounded-r-2xl",
+            side === "bottom" && "border-t rounded-t-2xl",
+            positionClasses2[side],
+            slideAnim[side]
+          ),
+          style: panelStyle,
+          onClick: (e) => e.stopPropagation(),
+          children
+        }
+      )
+    ] }),
+    document.body
+  );
+}
+function SheetHeader({ showClose, onClose, className, children, ...props }) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn("flex items-start justify-between px-6 pt-6 pb-4 border-b border-[#F2F2F7]", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "flex-1 min-w-0 pr-3", children }),
+        showClose && onClose && /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: onClose,
+            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"
+            ),
+            "aria-label": "Tutup",
+            children: /* @__PURE__ */ jsx("svg", { className: "h-3.5 w-3.5", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", children: /* @__PURE__ */ jsx("path", { d: "M18 6L6 18M6 6l12 12" }) })
+          }
+        )
+      ]
+    }
+  );
+}
+function SheetTitle({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "h2",
+    {
+      className: cn("text-[15px] font-semibold tracking-[-0.01em] text-[#1C1C1E]", className),
+      ...props
+    }
+  );
+}
+function SheetDescription({ className, ...props }) {
+  return /* @__PURE__ */ jsx("p", { className: cn("mt-0.5 text-[13px] text-[#8E8E93]", className), ...props });
+}
+function SheetContent({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn("flex-1 overflow-y-auto px-6 py-5 avt-scroll", className),
+      ...props
+    }
+  );
+}
+function SheetFooter({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "flex items-center justify-end gap-2 px-6 py-4",
+        "border-t border-[#F2F2F7] bg-[#FAFAFA]",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function Drawer({ children, ...props }) {
+  return /* @__PURE__ */ jsx(Sheet, { side: "bottom", ...props, children });
+}
+function Navbar({
+  glass = true,
+  border = true,
+  sticky = true,
+  height = "h-14",
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "header",
+    {
+      className: cn(
+        "w-full z-40",
+        sticky && "sticky top-0",
+        glass ? "bg-white/80 backdrop-blur-2xl" : "bg-white",
+        border && "border-b border-[#E5E5EA]/70",
+        height,
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ jsx("div", { className: "flex h-full items-center px-5 gap-4", children })
+    }
+  );
+}
+function NavbarLeft({ className, ...props }) {
+  return /* @__PURE__ */ jsx("div", { className: cn("flex items-center gap-3 flex-shrink-0", className), ...props });
+}
+function NavbarCenter({ className, ...props }) {
+  return /* @__PURE__ */ jsx("div", { className: cn("flex flex-1 items-center justify-center", className), ...props });
+}
+function NavbarRight({ className, ...props }) {
+  return /* @__PURE__ */ jsx("div", { className: cn("flex items-center gap-2 flex-shrink-0 ml-auto", className), ...props });
+}
+function NavbarBrand({ logo, title, subtitle, className, ...props }) {
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex items-center gap-2.5", className), ...props, children: [
+    logo && /* @__PURE__ */ jsx("div", { className: "flex-shrink-0", children: logo }),
+    /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx("p", { className: "text-[14px] font-semibold tracking-[-0.01em] text-[#1C1C1E] leading-none", children: title }),
+      subtitle && /* @__PURE__ */ jsx("p", { className: "text-[11px] text-[#8E8E93] mt-0.5 leading-none", children: subtitle })
+    ] })
+  ] });
+}
+var SearchIcon = () => /* @__PURE__ */ jsxs("svg", { className: "h-4 w-4", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round", strokeLinejoin: "round", children: [
+  /* @__PURE__ */ jsx("circle", { cx: "11", cy: "11", r: "8" }),
+  /* @__PURE__ */ jsx("path", { d: "M21 21l-4.35-4.35" })
+] });
+function NavbarSearch({ icon, className, ...props }) {
+  return /* @__PURE__ */ jsxs("div", { className: "relative w-64", children: [
+    /* @__PURE__ */ jsx("div", { className: "absolute left-3 top-1/2 -translate-y-1/2 text-[#8E8E93]", children: icon ?? /* @__PURE__ */ jsx(SearchIcon, {}) }),
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        type: "search",
+        className: cn(
+          "h-9 w-full rounded-xl bg-[#F2F2F7] pl-9 pr-4 text-sm text-[#1C1C1E]",
+          "placeholder:text-[#8E8E93] border-0 outline-none",
+          "focus:bg-white focus:shadow-[0_0_0_2px_rgba(0,122,255,0.22)] transition-all duration-150",
+          className
+        ),
+        ...props
+      }
+    )
+  ] });
+}
+function NavbarIconButton({
+  badge,
+  tooltip,
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: "relative", title: tooltip, children: [
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        className: cn(
+          "flex h-9 w-9 items-center justify-center rounded-xl text-[#3C3C43]",
+          "hover:bg-[#F2F2F7] transition-colors duration-150",
+          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#007AFF]/30",
+          className
+        ),
+        ...props,
+        children
+      }
+    ),
+    badge !== void 0 && /* @__PURE__ */ jsx("span", { className: "absolute -top-0.5 -right-0.5 flex h-4 min-w-4 items-center justify-center rounded-full bg-[#FF3B30] px-1 text-[10px] font-bold text-white", children: badge })
+  ] });
+}
+function NavbarDivider({ className }) {
+  return /* @__PURE__ */ jsx("div", { className: cn("h-5 w-px bg-[#E5E5EA]", className) });
+}
+var SidebarContext = createContext({ collapsed: false });
+var useSidebar = () => useContext(SidebarContext);
+function Sidebar({
+  collapsed = false,
+  glass = true,
+  width = "240px",
+  collapsedWidth = "64px",
+  overlay = false,
+  onOverlayClose,
+  className,
+  children,
+  style,
+  ...props
+}) {
+  if (overlay) {
+    return /* @__PURE__ */ jsxs(SidebarContext.Provider, { value: { collapsed: false }, children: [
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: cn(
+            "fixed inset-0 z-40 transition-opacity duration-300",
+            collapsed ? "pointer-events-none opacity-0" : "bg-black/30 backdrop-blur-[2px]"
+          ),
+          onClick: onOverlayClose,
+          "aria-hidden": "true"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "aside",
+        {
+          className: cn(
+            "fixed left-0 top-0 z-50 flex h-full flex-col",
+            "border-r border-[#E5E5EA]/70",
+            glass ? "bg-white/90 backdrop-blur-2xl" : "bg-white",
+            "transition-transform duration-300 ease-[cubic-bezier(0.16,1,0.3,1)]",
+            collapsed ? "-translate-x-full" : "translate-x-0",
+            className
+          ),
+          style: { width, ...style },
+          ...props,
+          children
+        }
+      )
+    ] });
+  }
+  return /* @__PURE__ */ jsx(SidebarContext.Provider, { value: { collapsed }, children: /* @__PURE__ */ jsx(
+    "aside",
+    {
+      className: cn(
+        "flex h-full flex-shrink-0 flex-col",
+        "border-r border-[#E5E5EA]/70",
+        glass ? "bg-white/80 backdrop-blur-2xl" : "bg-white",
+        "transition-[width] duration-200",
+        className
+      ),
+      style: { width: collapsed ? collapsedWidth : width, ...style },
+      ...props,
+      children
+    }
+  ) });
+}
+function SidebarHeader({ className, ...props }) {
+  return /* @__PURE__ */ jsx("div", { className: cn("flex-shrink-0", className), ...props });
+}
+function SidebarBrand({ logo, title, subtitle, className, ...props }) {
+  const { collapsed } = useSidebar();
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn("flex items-center gap-3 px-4 py-5", collapsed && "justify-center px-0", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "flex-shrink-0", children: logo }),
+        !collapsed && /* @__PURE__ */ jsxs("div", { className: "min-w-0 overflow-hidden", children: [
+          /* @__PURE__ */ jsx("p", { className: "truncate text-[13px] font-semibold tracking-[-0.01em] text-[#1C1C1E]", children: title }),
+          subtitle && /* @__PURE__ */ jsx("p", { className: "truncate text-[11px] text-[#8E8E93]", children: subtitle })
+        ] })
+      ]
+    }
+  );
+}
+function SidebarDivider({ className }) {
+  return /* @__PURE__ */ jsx("div", { className: cn("mx-3 my-1 h-px bg-[#E5E5EA]", className) });
+}
+function SidebarContent({ className, ...props }) {
+  return /* @__PURE__ */ jsx("div", { className: cn("flex-1 overflow-y-auto px-2 py-2 avt-scroll space-y-0.5", className), ...props });
+}
+function SidebarGroup({ label, className, children, ...props }) {
+  const { collapsed } = useSidebar();
+  return /* @__PURE__ */ jsxs("div", { className: cn("mb-1", className), ...props, children: [
+    label && !collapsed && /* @__PURE__ */ jsx("p", { className: "mb-1 px-3 text-[10px] font-semibold uppercase tracking-widest text-[#C7C7CC]", children: label }),
+    children
+  ] });
+}
+function SidebarItem({
+  icon,
+  label,
+  active = false,
+  badge,
+  href,
+  as: Tag = "button",
+  className,
+  ...props
+}) {
+  const { collapsed } = useSidebar();
+  const tagProps = href ? { href } : { type: "button" };
+  return /* @__PURE__ */ jsxs(
+    Tag,
+    {
+      ...tagProps,
+      title: collapsed ? label : void 0,
+      className: cn(
+        "flex w-full items-center gap-2.5 rounded-xl transition-all duration-150",
+        "text-[13px] font-medium select-none outline-none",
+        "focus-visible:ring-2 focus-visible:ring-[#007AFF]/30",
+        // Mobile-friendly touch target
+        collapsed ? "justify-center px-0 mx-auto w-10 h-10 min-h-[44px] min-w-[44px]" : "px-3 py-2.5 min-h-[44px]",
+        active ? "bg-[#007AFF] text-white shadow-[0_2px_8px_rgba(0,122,255,0.28)]" : "text-[#3C3C43] hover:bg-[#007AFF]/8 hover:text-[#007AFF]",
+        className
+      ),
+      ...props,
+      children: [
+        icon && /* @__PURE__ */ jsx("span", { className: cn("flex-shrink-0", !active && "text-[#8E8E93]"), children: icon }),
+        !collapsed && /* @__PURE__ */ jsx("span", { className: "flex-1 truncate text-left", children: label }),
+        !collapsed && badge !== void 0 && /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: cn(
+              "ml-auto flex h-5 min-w-5 items-center justify-center rounded-full px-1.5",
+              "text-[10px] font-bold",
+              active ? "bg-white/20 text-white" : "bg-[#E5E5EA] text-[#8E8E93]"
+            ),
+            children: badge
+          }
+        )
+      ]
+    }
+  );
+}
+function SidebarFooter({ className, ...props }) {
+  return /* @__PURE__ */ jsx("div", { className: cn("flex-shrink-0 p-3", className), ...props });
+}
+function SidebarUser({
+  name,
+  subtitle,
+  avatar,
+  avatarFallback,
+  avatarColor = "from-[#5856D6] to-[#AF52DE]",
+  actions,
+  className,
+  ...props
+}) {
+  const { collapsed } = useSidebar();
+  const avatarNode = avatar ?? /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-full",
+        `bg-gradient-to-br ${avatarColor} text-white text-xs font-semibold`
+      ),
+      children: avatarFallback ?? name.charAt(0).toUpperCase()
+    }
+  );
+  if (collapsed) {
+    return /* @__PURE__ */ jsx("div", { className: cn("flex justify-center", className), ...props, children: avatarNode });
+  }
+  return /* @__PURE__ */ jsx("div", { className: cn("rounded-xl bg-[#F2F2F7] p-3", className), ...props, children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2.5", children: [
+    avatarNode,
+    /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+      /* @__PURE__ */ jsx("p", { className: "truncate text-[12px] font-semibold text-[#1C1C1E]", children: name }),
+      subtitle && /* @__PURE__ */ jsx("p", { className: "truncate text-[11px] text-[#8E8E93]", children: subtitle })
+    ] }),
+    actions && /* @__PURE__ */ jsx("div", { className: "flex-shrink-0", children: actions })
+  ] }) });
+}
+function SidebarToggle({ collapsed, className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      className: cn(
+        "flex h-7 w-7 items-center justify-center rounded-lg",
+        "text-[#8E8E93] hover:bg-[#F2F2F7] hover:text-[#3C3C43]",
+        "transition-colors duration-150",
+        className
+      ),
+      "aria-label": collapsed ? "Expand sidebar" : "Collapse sidebar",
+      ...props,
+      children: /* @__PURE__ */ jsx(
+        "svg",
+        {
+          className: cn("h-4 w-4 transition-transform duration-200", collapsed && "rotate-180"),
+          viewBox: "0 0 24 24",
+          fill: "none",
+          stroke: "currentColor",
+          strokeWidth: "2",
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+          children: /* @__PURE__ */ jsx("path", { d: "M15 18l-6-6 6-6" })
+        }
+      )
+    }
+  );
+}
+function useClickOutside(ref, handler, enabled = true) {
+  useEffect(() => {
+    if (!enabled) return;
+    const listener = (event) => {
+      if (!ref.current || ref.current.contains(event.target)) return;
+      handler(event);
+    };
+    document.addEventListener("mousedown", listener, true);
+    document.addEventListener("touchstart", listener, true);
+    return () => {
+      document.removeEventListener("mousedown", listener, true);
+      document.removeEventListener("touchstart", listener, true);
+    };
+  }, [ref, handler, enabled]);
+}
+
+export { Badge, Button, Card, CardContent, CardDescription, CardDivider, CardFooter, CardHeader, CardTitle, Drawer, Input, MenuRoot as Menu, MenuButton, MenuContent, MenuRoot as MenuDropdown, MenuItem, MenuLabel, MenuRoot, MenuSeparator, MenuTrigger, Navbar, NavbarBrand, NavbarCenter, NavbarDivider, NavbarIconButton, NavbarLeft, NavbarRight, NavbarSearch, Scrollbar, Sheet, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, Sidebar, SidebarBrand, SidebarContent, SidebarDivider, SidebarFooter, SidebarGroup, SidebarHeader, SidebarItem, SidebarToggle, SidebarUser, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TablePagination, TableRow, TableToolbar, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, Toaster, cn, colors, dismissToast, generateId, toast, useClickOutside, useKeydown, useToast, withScrollbar };