avt-rct-lib 1.0.0

package/dist/index.cjs

@@ -0,0 +1,1341 @@
+'use strict';
+
+var React3 = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+var reactDom = require('react-dom');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React3__default = /*#__PURE__*/_interopDefault(React3);
+
+// 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__ */ jsxRuntime.jsxs("svg", { className: "h-4 w-4 animate-spin", viewBox: "0 0 24 24", fill: "none", 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" })
+] });
+var Button = React3__default.default.forwardRef(
+  ({
+    variant = "primary",
+    size = "md",
+    loading = false,
+    leftIcon,
+    rightIcon,
+    fullWidth = false,
+    className,
+    children,
+    disabled,
+    ...props
+  }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(
+    "button",
+    {
+      ref,
+      disabled: disabled || loading,
+      className: cn(base, variants[variant], sizes[size], fullWidth && "w-full", className),
+      ...props,
+      children: [
+        loading ? /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx("span", { className: cn("h-1.5 w-1.5 flex-shrink-0 rounded-full", dotColors[variant]) }),
+        children
+      ]
+    }
+  );
+}
+var Input = React3__default.default.forwardRef(
+  ({ label, hint, error, leftAddon, rightAddon, containerClassName, className, id, ...props }, ref) => {
+    const inputId = id ?? label?.toLowerCase().replace(/\s+/g, "-");
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-col gap-1.5", containerClassName), children: [
+      label && /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: inputId, className: "text-[13px] font-medium text-[#3C3C43]", children: label }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex items-center", children: [
+        leftAddon && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute left-3.5 flex items-center text-[#8E8E93]", children: leftAddon }),
+        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: "absolute right-3.5 flex items-center text-[#8E8E93]", children: rightAddon })
+      ] }),
+      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
+    ] });
+  }
+);
+Input.displayName = "Input";
+var Textarea = React3__default.default.forwardRef(
+  ({ label, hint, error, containerClassName, className, id, ...props }, ref) => {
+    const inputId = id ?? label?.toLowerCase().replace(/\s+/g, "-");
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-col gap-1.5", containerClassName), children: [
+      label && /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: inputId, className: "text-[13px] font-medium text-[#3C3C43]", children: label }),
+      /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("p", { className: "text-xs text-[#FF3B30]", children: error }) : hint ? /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: cn("px-5 pt-5 pb-4", className), ...props });
+}
+function CardTitle({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "h3",
+    {
+      className: cn("text-[15px] font-semibold tracking-[-0.01em] text-[#1C1C1E]", className),
+      ...props
+    }
+  );
+}
+function CardDescription({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mt-0.5 text-[13px] text-[#8E8E93]", className), ...props });
+}
+function CardContent({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("px-5 pb-5", className), ...props });
+}
+function CardFooter({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("hr", { className: cn("border-0 border-t border-[#F2F2F7]", className), ...props });
+}
+function Table({ card = true, className, children, ...props }) {
+  const childArray = React3__default.default.Children.toArray(children);
+  const toolbars = childArray.filter((c) => React3__default.default.isValidElement(c) && c.type === TableToolbar);
+  const paginations = childArray.filter((c) => React3__default.default.isValidElement(c) && c.type === TablePagination);
+  const tableNodes = childArray.filter(
+    (c) => React3__default.default.isValidElement(c) && c.type !== TableToolbar && c.type !== TablePagination
+  );
+  const inner = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    toolbars,
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full overflow-x-auto avt-scroll", children: /* @__PURE__ */ jsxRuntime.jsx("table", { className: "w-full caption-bottom text-sm", children: tableNodes }) }),
+    paginations
+  ] });
+  if (!card) return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: inner });
+  return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+    "thead",
+    {
+      className: cn("bg-[#F9F9F9] border-b border-[#F2F2F7]", className),
+      ...props
+    }
+  );
+}
+function TableBody({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("tbody", { className: cn("[&_tr:last-child]:border-0", className), ...props });
+}
+function TableFooter({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "tfoot",
+    {
+      className: cn("border-t border-[#F2F2F7] bg-[#FAFAFA] font-medium", className),
+      ...props
+    }
+  );
+}
+function TableRow({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx("td", { className: cn("px-4 py-3.5 align-middle text-[13px] text-[#1C1C1E]", className), ...props });
+}
+function TableCaption({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("caption", { className: cn("mt-4 text-xs text-[#8E8E93]", className), ...props });
+}
+function TableToolbar({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: cn(
+        "flex items-center justify-between border-t border-[#F2F2F7] px-5 py-3",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-[12px] text-[#8E8E93]", children: [
+          "Halaman ",
+          page,
+          " dari ",
+          pageCount || 1
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-1.5", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(Btn, { onClick: onPrev, disabled: !canPrev, children: /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "h-4 w-4", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M15 18l-6-6 6-6" }) }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(Btn, { onClick: onNext, disabled: !canNext, children: /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "h-4 w-4", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M9 18l6-6-6-6" }) }) })
+        ] })
+      ]
+    }
+  );
+}
+var TabsContext = React3.createContext({
+  active: "",
+  setActive: () => {
+  },
+  variant: "pills"
+});
+var useTabs = () => React3.useContext(TabsContext);
+function Tabs({
+  defaultValue = "",
+  value,
+  onValueChange,
+  variant = "pills",
+  children,
+  className
+}) {
+  const [internalActive, setInternalActive] = React3.useState(defaultValue);
+  const active = value ?? internalActive;
+  const setActive = (v) => {
+    setInternalActive(v);
+    onValueChange?.(v);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(TabsContext.Provider, { value: { active, setActive, variant }, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex flex-col", className), children }) });
+}
+function TabsList({ className, children, ...props }) {
+  const { variant } = useTabs();
+  return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(Scrollbar, { ...scrollbarProps, children: /* @__PURE__ */ jsxRuntime.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] = React3.useReducer((x) => x + 1, 0);
+  React3.useEffect(() => {
+    storeListeners.add(forceUpdate);
+    return () => {
+      storeListeners.delete(forceUpdate);
+    };
+  }, []);
+  return {
+    toasts: storeState,
+    toast,
+    dismiss: dismissToast
+  };
+}
+var IconCheck = () => /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("path", { d: "M20 6L9 17l-5-5" }) });
+var IconX = () => /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "10" }),
+  /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M15 9l-6 6M9 9l6 6" })
+] });
+var IconInfo = () => /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "10" }),
+  /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 16v-4M12 8h.01" })
+] });
+var IconWarn = () => /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx("path", { d: "M12 9v4M12 17h.01" })
+] });
+var defaultIcons = {
+  default: /* @__PURE__ */ jsxRuntime.jsx(IconInfo, {}),
+  success: /* @__PURE__ */ jsxRuntime.jsx(IconCheck, {}),
+  destructive: /* @__PURE__ */ jsxRuntime.jsx(IconX, {}),
+  warning: /* @__PURE__ */ jsxRuntime.jsx(IconWarn, {})
+};
+function ToastItemComp({ item, onDismiss }) {
+  return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "flex-1 min-w-0", children: [
+          item.title && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[13px] font-semibold text-[#1C1C1E] leading-snug", children: item.title }),
+          item.description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-0.5 text-[12px] text-[#8E8E93] leading-snug", children: item.description })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("svg", { className: "h-3 w-3", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", children: /* @__PURE__ */ jsxRuntime.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 reactDom.createPortal(
+    /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: "pointer-events-auto", children: /* @__PURE__ */ jsxRuntime.jsx(ToastItemComp, { item, onDismiss: dismiss }) }, item.id))
+      }
+    ),
+    document.body
+  );
+}
+function useKeydown(key, handler, enabled = true) {
+  React3.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 = React3.createContext({
+  open: false,
+  close: () => {
+  },
+  rootRef: { current: null },
+  contentRef: { current: null }
+});
+var useMenu = () => React3.useContext(MenuContext);
+function MenuRoot({ children, open: controlledOpen, onOpenChange }) {
+  const [internalOpen, setInternalOpen] = React3.useState(false);
+  const open = controlledOpen ?? internalOpen;
+  const setOpen = (v) => {
+    setInternalOpen(v);
+    onOpenChange?.(v);
+  };
+  const close = React3.useCallback(() => setOpen(false), []);
+  const toggle = () => setOpen(!open);
+  const rootRef = React3.useRef(null);
+  const contentRef = React3.useRef(null);
+  useKeydown("Escape", close, open);
+  React3.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]);
+  React3.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__ */ jsxRuntime.jsx(MenuContext.Provider, { value: { open, close, rootRef, contentRef }, children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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] = React3.useState(null);
+  React3.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 reactDom.createPortal(
+    /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx("span", { className: cn("flex-shrink-0", variant === "default" ? "text-[#8E8E93]" : "text-[#FF3B30]"), children: icon }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-1 text-left", children }),
+        rightSlot && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-auto text-[#8E8E93]", children: rightSlot })
+      ]
+    }
+  );
+}
+function MenuSeparator({ className }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("my-1 h-px bg-[#F2F2F7]", className), role: "separator" });
+}
+function MenuLabel({ className, children }) {
+  return /* @__PURE__ */ jsxRuntime.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);
+  React3.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 reactDom.createPortal(
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "fixed inset-0 z-[999] flex", "aria-modal": "true", role: "dialog", children: [
+      /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: cn("flex items-start justify-between px-6 pt-6 pb-4 border-b border-[#F2F2F7]", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 min-w-0 pr-3", children }),
+        showClose && onClose && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx("path", { d: "M18 6L6 18M6 6l12 12" }) })
+          }
+        )
+      ]
+    }
+  );
+}
+function SheetTitle({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "h2",
+    {
+      className: cn("text-[15px] font-semibold tracking-[-0.01em] text-[#1C1C1E]", className),
+      ...props
+    }
+  );
+}
+function SheetDescription({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mt-0.5 text-[13px] text-[#8E8E93]", className), ...props });
+}
+function SheetContent({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: cn("flex-1 overflow-y-auto px-6 py-5 avt-scroll", className),
+      ...props
+    }
+  );
+}
+function SheetFooter({ 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
+    }
+  );
+}
+function Drawer({ children, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(Sheet, { side: "bottom", ...props, children });
+}
+function Navbar({
+  glass = true,
+  border = true,
+  sticky = true,
+  height = "h-14",
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: "flex h-full items-center px-5 gap-4", children })
+    }
+  );
+}
+function NavbarLeft({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex items-center gap-3 flex-shrink-0", className), ...props });
+}
+function NavbarCenter({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex flex-1 items-center justify-center", className), ...props });
+}
+function NavbarRight({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: cn("flex items-center gap-2.5", className), ...props, children: [
+    logo && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-shrink-0", children: logo }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[14px] font-semibold tracking-[-0.01em] text-[#1C1C1E] leading-none", children: title }),
+      subtitle && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[11px] text-[#8E8E93] mt-0.5 leading-none", children: subtitle })
+    ] })
+  ] });
+}
+var SearchIcon = () => /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("circle", { cx: "11", cy: "11", r: "8" }),
+  /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M21 21l-4.35-4.35" })
+] });
+function NavbarSearch({ icon, className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative w-64", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute left-3 top-1/2 -translate-y-1/2 text-[#8E8E93]", children: icon ?? /* @__PURE__ */ jsxRuntime.jsx(SearchIcon, {}) }),
+    /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "relative", title: tooltip, children: [
+    /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: cn("h-5 w-px bg-[#E5E5EA]", className) });
+}
+var SidebarContext = React3.createContext({ collapsed: false });
+var useSidebar = () => React3.useContext(SidebarContext);
+function Sidebar({
+  collapsed = false,
+  glass = true,
+  width = "240px",
+  collapsedWidth = "64px",
+  overlay = false,
+  onOverlayClose,
+  className,
+  children,
+  style,
+  ...props
+}) {
+  if (overlay) {
+    return /* @__PURE__ */ jsxRuntime.jsxs(SidebarContext.Provider, { value: { collapsed: false }, children: [
+      /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(SidebarContext.Provider, { value: { collapsed }, children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: cn("flex-shrink-0", className), ...props });
+}
+function SidebarBrand({ logo, title, subtitle, className, ...props }) {
+  const { collapsed } = useSidebar();
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: cn("flex items-center gap-3 px-4 py-5", collapsed && "justify-center px-0", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-shrink-0", children: logo }),
+        !collapsed && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0 overflow-hidden", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "truncate text-[13px] font-semibold tracking-[-0.01em] text-[#1C1C1E]", children: title }),
+          subtitle && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "truncate text-[11px] text-[#8E8E93]", children: subtitle })
+        ] })
+      ]
+    }
+  );
+}
+function SidebarDivider({ className }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mx-3 my-1 h-px bg-[#E5E5EA]", className) });
+}
+function SidebarContent({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: cn("mb-1", className), ...props, children: [
+    label && !collapsed && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx("span", { className: cn("flex-shrink-0", !active && "text-[#8E8E93]"), children: icon }),
+        !collapsed && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-1 truncate text-left", children: label }),
+        !collapsed && badge !== void 0 && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: cn("flex justify-center", className), ...props, children: avatarNode });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("rounded-xl bg-[#F2F2F7] p-3", className), ...props, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2.5", children: [
+    avatarNode,
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0 flex-1", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "truncate text-[12px] font-semibold text-[#1C1C1E]", children: name }),
+      subtitle && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "truncate text-[11px] text-[#8E8E93]", children: subtitle })
+    ] }),
+    actions && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-shrink-0", children: actions })
+  ] }) });
+}
+function SidebarToggle({ collapsed, className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx("path", { d: "M15 18l-6-6 6-6" })
+        }
+      )
+    }
+  );
+}
+function useClickOutside(ref, handler, enabled = true) {
+  React3.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]);
+}
+
+exports.Badge = Badge;
+exports.Button = Button;
+exports.Card = Card;
+exports.CardContent = CardContent;
+exports.CardDescription = CardDescription;
+exports.CardDivider = CardDivider;
+exports.CardFooter = CardFooter;
+exports.CardHeader = CardHeader;
+exports.CardTitle = CardTitle;
+exports.Drawer = Drawer;
+exports.Input = Input;
+exports.Menu = MenuRoot;
+exports.MenuButton = MenuButton;
+exports.MenuContent = MenuContent;
+exports.MenuDropdown = MenuRoot;
+exports.MenuItem = MenuItem;
+exports.MenuLabel = MenuLabel;
+exports.MenuRoot = MenuRoot;
+exports.MenuSeparator = MenuSeparator;
+exports.MenuTrigger = MenuTrigger;
+exports.Navbar = Navbar;
+exports.NavbarBrand = NavbarBrand;
+exports.NavbarCenter = NavbarCenter;
+exports.NavbarDivider = NavbarDivider;
+exports.NavbarIconButton = NavbarIconButton;
+exports.NavbarLeft = NavbarLeft;
+exports.NavbarRight = NavbarRight;
+exports.NavbarSearch = NavbarSearch;
+exports.Scrollbar = Scrollbar;
+exports.Sheet = Sheet;
+exports.SheetContent = SheetContent;
+exports.SheetDescription = SheetDescription;
+exports.SheetFooter = SheetFooter;
+exports.SheetHeader = SheetHeader;
+exports.SheetTitle = SheetTitle;
+exports.Sidebar = Sidebar;
+exports.SidebarBrand = SidebarBrand;
+exports.SidebarContent = SidebarContent;
+exports.SidebarDivider = SidebarDivider;
+exports.SidebarFooter = SidebarFooter;
+exports.SidebarGroup = SidebarGroup;
+exports.SidebarHeader = SidebarHeader;
+exports.SidebarItem = SidebarItem;
+exports.SidebarToggle = SidebarToggle;
+exports.SidebarUser = SidebarUser;
+exports.Table = Table;
+exports.TableBody = TableBody;
+exports.TableCaption = TableCaption;
+exports.TableCell = TableCell;
+exports.TableFooter = TableFooter;
+exports.TableHead = TableHead;
+exports.TableHeader = TableHeader;
+exports.TablePagination = TablePagination;
+exports.TableRow = TableRow;
+exports.TableToolbar = TableToolbar;
+exports.Tabs = Tabs;
+exports.TabsContent = TabsContent;
+exports.TabsList = TabsList;
+exports.TabsTrigger = TabsTrigger;
+exports.Textarea = Textarea;
+exports.Toaster = Toaster;
+exports.cn = cn;
+exports.colors = colors;
+exports.dismissToast = dismissToast;
+exports.generateId = generateId;
+exports.toast = toast;
+exports.useClickOutside = useClickOutside;
+exports.useKeydown = useKeydown;
+exports.useToast = useToast;
+exports.withScrollbar = withScrollbar;