import { o as be } from "./rolldown-runtime.js";
import { i as he, t as ge } from "./vendor/react.js";
import { t as I } from "./createLucideIcon.js";
import { t as K } from "./chevron-right.js";
import { a as J, c as Q, d as X, f as Y, g as b, h as ve, l as Z, m as je, n as ee, o as N, p as Ne, r as te, s as y, t as ye, u as Se } from "./sidebar.js";
import { t as W } from "./Avatar.js";
import { t as ae } from "./dist.js";
import { t as l } from "./utils.js";
import { t as se } from "./Badge.js";
import { a as ke, i as Ce, n as Ae, o as _e, r as U, t as Ie } from "./_shared.js";
import { t as we } from "./separator2.js";
import { t as oe } from "./BrandIcon.js";
import { a as Ee, i as Le, s as Oe } from "./Popover.js";
import { n as w, r as E, t as L } from "./tooltip2.js";
var ze = [["path", {
  d: "M2.992 16.342a2 2 0 0 1 .094 1.167l-1.065 3.29a1 1 0 0 0 1.236 1.168l3.413-.998a2 2 0 0 1 1.099.092 10 10 0 1 0-4.777-4.719",
  key: "1sd12s"
}]], Pe = I("message-circle", ze), Fe = [
  ["rect", {
    width: "18",
    height: "18",
    x: "3",
    y: "3",
    rx: "2",
    key: "afitv7"
  }],
  ["path", {
    d: "M9 3v18",
    key: "fh3hqa"
  }],
  ["path", {
    d: "m16 15-3-3 3-3",
    key: "14y99z"
  }]
], $e = I("panel-left-close", Fe), Me = [
  ["rect", {
    width: "18",
    height: "18",
    x: "3",
    y: "3",
    rx: "2",
    key: "afitv7"
  }],
  ["path", {
    d: "M9 3v18",
    key: "fh3hqa"
  }],
  ["path", {
    d: "m14 9 3 3-3 3",
    key: "8010ee"
  }]
], Be = I("panel-left-open", Me), p = /* @__PURE__ */ be(he(), 1), e = ge();
function re(t, a) {
  return a == null ? t : `${t}, ${typeof a == "number" ? `${a} ${a === 1 ? "item" : "items"}` : a}`;
}
function ne(t, a) {
  return t ? "bg-transparent" : a ?? "bg-muted";
}
function Te(t, a) {
  return p.useMemo(() => {
    const s = {
      header: [],
      content: [],
      footer: [],
      explicitHeader: null,
      explicitContent: null,
      explicitFooter: null
    };
    return p.Children.forEach(t, (o) => {
      if (!p.isValidElement(o)) return;
      const r = o.type;
      if (r === z) {
        s.explicitHeader = o;
        return;
      }
      if (r === P) {
        s.explicitContent = o;
        return;
      }
      if (r === F) {
        s.explicitFooter = o;
        return;
      }
      a.header.some((i) => r === i) ? s.header.push(o) : a.content.some((i) => r === i) ? s.content.push(o) : a.footer.some((i) => r === i) ? s.footer.push(o) : s.content.push(o);
    }), s;
  }, [t, a]);
}
var Re = /* @__PURE__ */ (0, e.jsx)(oe, {
  icon: "mark",
  size: "lg"
});
function O({ logo: t, compactedLogo: a, subtext: s, className: o, ...r }) {
  const { state: i, toggleSidebar: d } = b(), c = i === "collapsed", n = a ?? Re;
  return c ? /* @__PURE__ */ (0, e.jsx)("div", {
    "data-slot": "app-sidebar-logo",
    className: l("flex items-center justify-center", o),
    ...r,
    children: /* @__PURE__ */ (0, e.jsxs)("button", {
      type: "button",
      onClick: d,
      className: "group/logo relative flex min-h-11 min-w-11 items-center justify-center rounded-md p-1 transition-colors duration-200 ease-smooth hover:bg-background focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring motion-reduce:transition-none",
      "aria-label": "Expand sidebar",
      children: [/* @__PURE__ */ (0, e.jsx)("span", {
        className: "transition-opacity duration-200 ease-smooth group-hover/logo:opacity-0 motion-reduce:transition-none",
        children: n
      }), /* @__PURE__ */ (0, e.jsx)(Be, { className: "absolute size-5 opacity-0 transition-opacity duration-200 ease-smooth group-hover/logo:opacity-100 motion-reduce:transition-none" })]
    })
  }) : /* @__PURE__ */ (0, e.jsxs)("div", {
    "data-slot": "app-sidebar-logo",
    className: l("flex items-center justify-between px-3", o),
    ...r,
    children: [/* @__PURE__ */ (0, e.jsxs)("div", {
      className: "flex flex-col gap-0",
      children: [/* @__PURE__ */ (0, e.jsx)("div", {
        className: "flex items-center gap-2",
        children: t || /* @__PURE__ */ (0, e.jsxs)(e.Fragment, { children: [/* @__PURE__ */ (0, e.jsx)(oe, {
          icon: "mark",
          size: "lg"
        }), /* @__PURE__ */ (0, e.jsx)("span", {
          className: "text-lg font-semibold tracking-tight text-foreground",
          children: "HUMAIN"
        })] })
      }), s && /* @__PURE__ */ (0, e.jsx)("p", {
        className: "text-sm text-sidebar-foreground",
        children: s
      })]
    }), /* @__PURE__ */ (0, e.jsx)("button", {
      type: "button",
      onClick: d,
      className: "relative flex size-7 items-center justify-center rounded-md text-muted-foreground transition-colors duration-200 ease-smooth hover:bg-background hover:text-foreground focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring motion-reduce:transition-none after:absolute after:-inset-2",
      "aria-label": "Collapse sidebar",
      children: /* @__PURE__ */ (0, e.jsx)($e, {
        "aria-hidden": "true",
        className: "size-4"
      })
    })]
  });
}
O.displayName = "AppSidebar.Logo";
function z({ children: t, className: a }) {
  return /* @__PURE__ */ (0, e.jsx)("div", {
    "data-slot": "app-sidebar-header",
    className: a,
    children: t
  });
}
z.displayName = "AppSidebar.Header";
function P({ children: t, className: a }) {
  return /* @__PURE__ */ (0, e.jsx)("div", {
    "data-slot": "app-sidebar-content",
    className: a,
    children: t
  });
}
P.displayName = "AppSidebar.Content";
function F({ children: t, className: a }) {
  return /* @__PURE__ */ (0, e.jsx)("div", {
    "data-slot": "app-sidebar-footer",
    className: a,
    children: t
  });
}
F.displayName = "AppSidebar.Footer";
function $({ children: t, "aria-label": a = "Sidebar navigation", className: s }) {
  const o = /* @__PURE__ */ (0, e.jsx)(X, {
    className: "gap-0.5 group-data-[collapsible=icon]:items-center group-data-[collapsible=icon]:gap-2",
    children: p.Children.map(t, (r) => /* @__PURE__ */ (0, e.jsx)(Y, { children: r }))
  });
  return /* @__PURE__ */ (0, e.jsx)(N, {
    "data-slot": "app-sidebar-nav",
    className: l("shrink-0 p-0 group-data-[collapsible=icon]:w-auto", s),
    children: /* @__PURE__ */ (0, e.jsx)(y, { children: /* @__PURE__ */ (0, e.jsx)("nav", {
      "aria-label": a,
      children: o
    }) })
  });
}
$.displayName = "AppSidebar.Nav";
function ie({ label: t, className: a }) {
  return /* @__PURE__ */ (0, e.jsxs)("div", {
    "data-slot": "app-sidebar-nav-section",
    role: "separator",
    "aria-label": t,
    className: l("py-2", a),
    children: [/* @__PURE__ */ (0, e.jsx)("div", {
      className: "flex h-8 items-center px-2 group-data-[collapsible=icon]:hidden",
      children: /* @__PURE__ */ (0, e.jsx)("span", {
        className: "text-xs font-medium text-sidebar-foreground/80",
        children: t
      })
    }), /* @__PURE__ */ (0, e.jsxs)("div", {
      className: "hidden py-2 group-data-[collapsible=icon]:block",
      children: [/* @__PURE__ */ (0, e.jsx)("span", {
        className: "sr-only",
        children: t
      }), /* @__PURE__ */ (0, e.jsx)(we, { className: "mx-auto w-8" })]
    })]
  });
}
ie.displayName = "AppSidebar.NavSection";
var le = ae("relative flex w-full items-center gap-1.5 rounded-md px-2 py-2 text-sm font-normal transition-[color,background-color] duration-200 ease-smooth motion-reduce:transition-none", {
  variants: { state: {
    default: "text-sidebar-foreground hover:bg-background",
    active: "bg-primary/10 text-sidebar-foreground"
  } },
  defaultVariants: { state: "default" }
});
function ce({ icon: t, label: a, isActive: s = !1, badge: o, onClick: r, href: i, className: d, children: c }) {
  const { state: n } = b(), m = n === "collapsed", u = p.Children.count(c) > 0, [x, f] = p.useState(s && u), T = p.useId();
  p.useEffect(() => {
    s && u && f(!0);
  }, [s, u]);
  const h = re(a, o), R = /* @__PURE__ */ (0, e.jsx)("span", {
    "data-slot": "nav-icon",
    className: "flex shrink-0 items-center p-0.5 [&>svg]:size-4",
    children: t
  }), H = /* @__PURE__ */ (0, e.jsx)("span", {
    className: "flex-1 text-start group-data-[collapsible=icon]:hidden",
    children: a
  }), V = o != null && /* @__PURE__ */ (0, e.jsx)(se, {
    size: "sm",
    variant: "soft",
    color: s ? "secondary" : "primary",
    className: "group-data-[collapsible=icon]:hidden",
    "aria-hidden": "true",
    children: o
  }), q = u && /* @__PURE__ */ (0, e.jsx)(K, {
    "aria-hidden": "true",
    className: l("size-4 shrink-0 text-muted-foreground transition-transform duration-200 ease-smooth group-data-[collapsible=icon]:hidden motion-reduce:transition-none", x && "rotate-90", s && x && "text-primary")
  }), g = l(le({ state: s ? "active" : "default" }), "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring", "min-h-11 group-data-[collapsible=icon]:justify-center group-data-[collapsible=icon]:px-0 group-data-[collapsible=icon]:py-2 group-data-[collapsible=icon]:w-11 group-data-[collapsible=icon]:h-11", d), j = s ? { "aria-current": "page" } : {};
  if (m) {
    const A = /* @__PURE__ */ (0, e.jsx)("span", {
      "data-slot": "nav-icon",
      className: "flex shrink-0 items-center justify-center p-0.5 [&>svg]:size-4",
      children: t
    }), G = i ? /* @__PURE__ */ (0, e.jsx)("a", {
      href: i,
      className: l(g),
      "aria-label": h,
      ...j,
      "data-slot": "app-sidebar-nav-item",
      children: A
    }) : /* @__PURE__ */ (0, e.jsx)("button", {
      type: "button",
      onClick: u ? () => f(!x) : r,
      className: l(g, "cursor-pointer"),
      "aria-label": h,
      ...j,
      "data-slot": "app-sidebar-nav-item",
      children: A
    });
    return u ? /* @__PURE__ */ (0, e.jsxs)(Ee, { children: [/* @__PURE__ */ (0, e.jsx)(Oe, {
      className: l(g, "cursor-pointer"),
      "aria-label": h,
      "data-slot": "app-sidebar-nav-item",
      children: A
    }), /* @__PURE__ */ (0, e.jsx)(Le, {
      side: "right",
      sideOffset: 0,
      className: l("w-56 max-w-[calc(100vw-2rem)] rounded-none rounded-r-xl border-0 p-0", "bg-popover", "supports-backdrop-filter:bg-[linear-gradient(180deg,color-mix(in_srgb,var(--popover)_87%,transparent)_0%,color-mix(in_srgb,var(--popover)_75%,transparent)_100%)]", "supports-backdrop-filter:backdrop-blur-[30px]", "shadow-[0px_4px_24px_color-mix(in_srgb,var(--foreground)_6%,transparent)]"),
      children: /* @__PURE__ */ (0, e.jsxs)("div", {
        className: "flex flex-col gap-0.5 p-3 delight-tooltip-stagger",
        role: "group",
        "aria-label": a,
        children: [/* @__PURE__ */ (0, e.jsx)("p", {
          className: "px-2 pb-2 pt-1 text-xs font-semibold text-primary/70",
          "aria-hidden": "true",
          children: a
        }), c]
      })
    })] }) : a ? /* @__PURE__ */ (0, e.jsxs)(L, { children: [/* @__PURE__ */ (0, e.jsx)(E, { render: G }), /* @__PURE__ */ (0, e.jsx)(w, {
      side: "right",
      sideOffset: 8,
      children: a
    })] }) : G;
  }
  const xe = () => {
    u && f(!x), r?.();
  }, D = i && !u ? /* @__PURE__ */ (0, e.jsxs)("a", {
    href: i,
    className: g,
    "aria-label": h,
    ...j,
    "data-slot": "app-sidebar-nav-item",
    children: [
      R,
      H,
      V,
      q
    ]
  }) : /* @__PURE__ */ (0, e.jsxs)("button", {
    type: "button",
    onClick: xe,
    className: l(g, "cursor-pointer"),
    "aria-label": h,
    "aria-expanded": u ? x : void 0,
    "aria-controls": u ? T : void 0,
    ...j,
    "data-slot": "app-sidebar-nav-item",
    children: [
      R,
      H,
      V,
      q
    ]
  });
  return u ? /* @__PURE__ */ (0, e.jsxs)(e.Fragment, { children: [D, x && /* @__PURE__ */ (0, e.jsx)("ul", {
    id: T,
    role: "group",
    "aria-label": `${a} sub-navigation`,
    className: "flex flex-col items-start py-1 pl-6",
    children: c
  })] }) : D;
}
ce.displayName = "AppSidebar.NavItem";
function de({ label: t, badge: a, isActive: s = !1, href: o, onClick: r, className: i }) {
  const d = re(t, a), c = l(le({ state: s ? "active" : "default" }), "min-h-11 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring", "transition-[color,background-color,transform] ltr:hover:translate-x-0.5 rtl:hover:-translate-x-0.5 motion-reduce:ltr:hover:translate-x-0 motion-reduce:rtl:hover:translate-x-0", i), n = s ? { "aria-current": "page" } : {}, m = /* @__PURE__ */ (0, e.jsxs)(e.Fragment, { children: [/* @__PURE__ */ (0, e.jsx)("span", {
    className: "flex-1 text-start",
    children: t
  }), a != null && /* @__PURE__ */ (0, e.jsx)(se, {
    size: "sm",
    variant: "soft",
    color: s ? "secondary" : "primary",
    "aria-hidden": "true",
    children: a
  })] });
  return o ? /* @__PURE__ */ (0, e.jsx)("a", {
    href: o,
    className: c,
    "aria-label": d,
    ...n,
    "data-slot": "app-sidebar-nav-sub",
    children: m
  }) : /* @__PURE__ */ (0, e.jsx)("button", {
    type: "button",
    onClick: r,
    className: l(c, "cursor-pointer delight-selection-press"),
    "aria-label": d,
    ...n,
    "data-slot": "app-sidebar-nav-sub",
    children: m
  });
}
de.displayName = "AppSidebar.NavSub";
function S({ count: t = 3, className: a }) {
  return /* @__PURE__ */ (0, e.jsx)(N, {
    className: l("shrink-0 p-0 group-data-[collapsible=icon]:w-auto", a),
    children: /* @__PURE__ */ (0, e.jsx)(y, { children: /* @__PURE__ */ (0, e.jsx)(X, {
      className: "gap-0.5 group-data-[collapsible=icon]:items-center group-data-[collapsible=icon]:gap-2",
      children: Array.from({ length: t }).map((s, o) => /* @__PURE__ */ (0, e.jsx)(Y, { children: /* @__PURE__ */ (0, e.jsx)(je, {}) }, `nav-skeleton-${o}`))
    }) })
  });
}
S.displayName = "AppSidebar.NavSkeleton";
function M({ label: t = "Recent Chats", children: a, className: s }) {
  const { state: o } = b();
  return o === "collapsed" ? null : /* @__PURE__ */ (0, e.jsxs)(N, {
    "data-slot": "app-sidebar-chat-list",
    className: l("mt-4 flex min-h-0 flex-1 flex-col p-0", s),
    children: [/* @__PURE__ */ (0, e.jsx)(Q, {
      className: "shrink-0 px-3 py-1 text-xs font-bold text-muted-foreground",
      children: t
    }), /* @__PURE__ */ (0, e.jsx)(y, {
      className: "flex-1 overflow-hidden",
      children: /* @__PURE__ */ (0, e.jsx)("div", {
        className: "flex h-full flex-col overflow-y-auto pb-5 rounded-md focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring",
        tabIndex: 0,
        role: "list",
        "aria-label": t,
        children: a
      })
    })]
  });
}
M.displayName = "AppSidebar.ChatList";
var He = ae("flex w-full items-center justify-between gap-2 rounded-md px-3 py-2 min-h-11 transition-[color,background-color,transform] duration-200 ease-smooth cursor-pointer motion-reduce:transition-none ltr:hover:translate-x-0.5 rtl:hover:-translate-x-0.5 motion-reduce:ltr:hover:translate-x-0 motion-reduce:rtl:hover:translate-x-0", {
  variants: { state: {
    default: "hover:bg-muted",
    hover: "bg-muted",
    selected: "bg-primary/10"
  } },
  defaultVariants: { state: "default" }
});
function pe({ title: t, time: a, icon: s, isSelected: o = !1, onClick: r, onContextMenu: i, className: d }) {
  const { state: c } = b();
  if (c === "collapsed") {
    const n = /* @__PURE__ */ (0, e.jsx)("button", {
      type: "button",
      onClick: r,
      onContextMenu: i,
      "data-slot": "app-sidebar-chat-item",
      "aria-label": t || void 0,
      className: l("flex size-11 items-center justify-center rounded-md transition-colors duration-200 ease-smooth motion-reduce:transition-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring", o ? "bg-primary/10" : "hover:bg-muted", d),
      children: s || /* @__PURE__ */ (0, e.jsx)(Pe, { className: "size-5 text-secondary-foreground" })
    });
    return !t && !a ? n : /* @__PURE__ */ (0, e.jsxs)(L, { children: [/* @__PURE__ */ (0, e.jsx)(E, { render: n }), /* @__PURE__ */ (0, e.jsx)(w, {
      side: "right",
      sideOffset: 8,
      children: /* @__PURE__ */ (0, e.jsxs)("div", {
        className: "flex flex-col",
        children: [/* @__PURE__ */ (0, e.jsx)("span", {
          className: "font-medium",
          children: t
        }), a && /* @__PURE__ */ (0, e.jsx)("span", {
          className: "text-xs text-muted-foreground",
          children: a
        })]
      })
    })] });
  }
  return /* @__PURE__ */ (0, e.jsx)("div", {
    role: "listitem",
    children: /* @__PURE__ */ (0, e.jsxs)("button", {
      type: "button",
      onClick: r,
      onContextMenu: i,
      "data-slot": "app-sidebar-chat-item",
      "aria-label": t,
      className: l(He({ state: o ? "selected" : "default" }), "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring", d),
      children: [/* @__PURE__ */ (0, e.jsx)("span", {
        className: "text-base font-semibold text-secondary-foreground truncate",
        children: t
      }), a && /* @__PURE__ */ (0, e.jsx)("span", {
        className: "text-xs font-normal text-muted-foreground shrink-0",
        children: a
      })]
    })
  });
}
pe.displayName = "AppSidebar.ChatItem";
function k({ count: t = 5, label: a = "Recent Chats", className: s }) {
  return /* @__PURE__ */ (0, e.jsxs)(N, {
    className: l("mt-4 flex min-h-0 flex-1 flex-col p-0 group-data-[collapsible=icon]:hidden", s),
    children: [/* @__PURE__ */ (0, e.jsx)(Q, {
      className: "shrink-0 px-3 py-1 text-xs font-bold text-muted-foreground",
      children: a
    }), /* @__PURE__ */ (0, e.jsx)(y, {
      className: "flex-1 overflow-hidden",
      children: /* @__PURE__ */ (0, e.jsx)("div", {
        className: "flex h-full flex-col overflow-y-auto pb-5",
        children: Array.from({ length: t }).map((o, r) => /* @__PURE__ */ (0, e.jsx)(Ne, {}, `chat-skeleton-${r}`))
      })
    })]
  });
}
k.displayName = "AppSidebar.ChatListSkeleton";
function B({ name: t, subtitle: a, avatarSrc: s, isOnline: o = !1, onExpand: r, className: i }) {
  const { state: d } = b();
  if (d === "collapsed") {
    const c = /* @__PURE__ */ (0, e.jsx)("button", {
      type: "button",
      onClick: r,
      "data-slot": "app-sidebar-account",
      "aria-label": t ? `${t} account menu` : "Account menu",
      "aria-haspopup": "true",
      className: l("flex items-center justify-center rounded-lg transition-opacity duration-200 ease-smooth hover:opacity-80 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring motion-reduce:transition-none", i),
      children: /* @__PURE__ */ (0, e.jsx)(W, {
        src: s,
        alt: t,
        fallback: t,
        size: "sm",
        indicator: o ? "online" : void 0
      })
    });
    return !t && !a ? c : /* @__PURE__ */ (0, e.jsxs)(L, { children: [/* @__PURE__ */ (0, e.jsx)(E, { render: c }), /* @__PURE__ */ (0, e.jsx)(w, {
      side: "right",
      sideOffset: 8,
      children: /* @__PURE__ */ (0, e.jsxs)("div", {
        className: "flex flex-col",
        children: [t && /* @__PURE__ */ (0, e.jsx)("span", {
          className: "font-medium",
          children: t
        }), a && /* @__PURE__ */ (0, e.jsx)("span", {
          className: "text-xs text-muted-foreground",
          children: a
        })]
      })
    })] });
  }
  return /* @__PURE__ */ (0, e.jsxs)("button", {
    type: "button",
    onClick: r,
    "data-slot": "app-sidebar-account",
    "aria-label": t ? `${t} account menu` : "Account menu",
    "aria-haspopup": "true",
    className: l("flex w-full items-center gap-2 rounded-md p-2 transition-colors duration-200 ease-smooth hover:bg-background focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring motion-reduce:transition-none", i),
    children: [
      /* @__PURE__ */ (0, e.jsx)(W, {
        src: s,
        alt: t,
        fallback: t,
        size: "sm",
        indicator: o ? "online" : void 0
      }),
      /* @__PURE__ */ (0, e.jsxs)("div", {
        className: "flex flex-1 flex-col items-start overflow-hidden",
        children: [/* @__PURE__ */ (0, e.jsx)("span", {
          className: "w-full truncate text-start text-sm font-medium text-sidebar-foreground",
          children: t
        }), a && /* @__PURE__ */ (0, e.jsx)("span", {
          className: "w-full truncate text-start text-xs font-light text-sidebar-foreground",
          children: a
        })]
      }),
      /* @__PURE__ */ (0, e.jsx)(K, {
        "aria-hidden": "true",
        className: "size-4 shrink-0 text-muted-foreground"
      })
    ]
  });
}
B.displayName = "AppSidebar.Account";
function C({ className: t }) {
  return /* @__PURE__ */ (0, e.jsx)(ye, { className: t });
}
C.displayName = "AppSidebar.AccountSkeleton";
function ue({ navCount: t = 4, chatCount: a = 5, logo: s, compactedLogo: o, collapsible: r = "icon", side: i = "left", rounded: d = !1, sidebarBgColor: c, className: n }) {
  const { state: m } = b();
  return /* @__PURE__ */ (0, e.jsxs)(ee, {
    collapsible: r,
    side: i,
    rounded: d,
    className: l(ne(m === "collapsed", c), n),
    children: [
      /* @__PURE__ */ (0, e.jsx)(Z, {
        className: "gap-4 pb-0 pt-6 group-data-[collapsible=icon]:px-4",
        children: /* @__PURE__ */ (0, e.jsx)(O, {
          logo: s,
          compactedLogo: o
        })
      }),
      /* @__PURE__ */ (0, e.jsxs)(te, {
        className: "flex flex-col gap-0 overflow-hidden px-3 py-4 group-data-[collapsible=icon]:items-center group-data-[collapsible=icon]:px-4",
        children: [/* @__PURE__ */ (0, e.jsx)(S, { count: t }), /* @__PURE__ */ (0, e.jsx)(k, { count: a })]
      }),
      /* @__PURE__ */ (0, e.jsx)(J, {
        className: "gap-4 px-4 pb-6 pt-0 group-data-[collapsible=icon]:items-center group-data-[collapsible=icon]:px-4",
        children: /* @__PURE__ */ (0, e.jsx)(C, {})
      })
    ]
  });
}
ue.displayName = "AppSidebar.Skeleton";
var Ve = {
  header: [],
  content: [
    $,
    M,
    S,
    k
  ],
  footer: [B, C]
};
function me({ logo: t, compactedLogo: a, logoSubtext: s, collapsible: o = "icon", side: r = "left", rounded: i = !1, sidebarBgColor: d, className: c, children: n, ...m }) {
  const { state: u } = b(), x = ne(u === "collapsed", d), f = Te(n, Ve);
  return /* @__PURE__ */ (0, e.jsxs)(ee, {
    collapsible: o,
    side: r,
    rounded: i,
    className: l(x, c),
    ...m,
    children: [
      /* @__PURE__ */ (0, e.jsx)(Z, {
        className: "gap-4 pb-0 pt-6 group-data-[collapsible=icon]:px-4",
        children: /* @__PURE__ */ (0, e.jsx)(O, {
          logo: t,
          compactedLogo: a,
          subtext: s
        })
      }),
      /* @__PURE__ */ (0, e.jsx)(te, {
        className: "flex flex-col gap-0 overflow-hidden px-3 py-4 group-data-[collapsible=icon]:items-center group-data-[collapsible=icon]:px-4",
        children: f.explicitContent ? f.explicitContent.props.children : f.content
      }),
      /* @__PURE__ */ (0, e.jsx)(J, {
        className: "gap-4 px-4 pb-6 pt-0 group-data-[collapsible=icon]:items-center group-data-[collapsible=icon]:px-4",
        children: f.explicitFooter ? f.explicitFooter.props.children : f.footer
      })
    ]
  });
}
me.displayName = "AppSidebar";
var v = Object.assign(me, {
  Header: z,
  Content: P,
  Footer: F,
  Nav: $,
  NavSection: ie,
  NavItem: ce,
  NavSub: de,
  NavSkeleton: S,
  ChatList: M,
  ChatItem: pe,
  ChatListSkeleton: k,
  Account: B,
  AccountSkeleton: C,
  Skeleton: ue
}), _ = {
  navItems: "json",
  activeNavItemId: "string",
  account: "json",
  logo: "json",
  showRecentChats: "boolean",
  collapsible: "string",
  connected: "boolean",
  defaultOpen: "boolean",
  side: "string",
  compactedLogo: "string",
  sidebarBgColor: "string",
  rounded: "boolean",
  logoSubtext: "string"
}, fe = class extends Ie {
  get propDefs() {
    return _;
  }
  static get observedAttributes() {
    return Object.keys(_).map(Ae);
  }
  _renderReact() {
    const t = this._readAllProps(), a = this._getSlot("content"), s = t.navItems || [], o = t.account, r = t.logo, i = (n) => {
      U(this, "nav-item-click", n);
    }, d = (n) => {
      U(this, "open-change", n);
    }, c = [];
    return c.push(p.createElement(v, {
      key: "sidebar",
      collapsible: t.collapsible || "icon",
      side: t.side || "left",
      rounded: t.rounded,
      sidebarBgColor: t.sidebarBgColor,
      logoSubtext: t.logoSubtext,
      logo: r ? r.src ? p.createElement("img", {
        src: r.src,
        alt: r.alt || "Logo"
      }) : null : void 0
    }, s.length > 0 && p.createElement(v.Nav, { key: "nav" }, ...s.map((n) => p.createElement(v.NavItem, {
      key: n.id,
      icon: p.createElement("span", null, "•"),
      label: n.label,
      isActive: n.isActive || n.id === t.activeNavItemId,
      href: n.href,
      onClick: () => i(n)
    }, ...n.children ? n.children.map((m, u) => p.createElement(v.NavSub, {
      key: `${n.id}-sub-${u}`,
      label: m.label,
      badge: m.badge,
      href: m.href,
      isActive: m.isActive
    })) : []))), o && p.createElement(v.Account, {
      key: "account",
      name: o.name,
      subtitle: o.subtitle,
      avatarSrc: o.avatarSrc,
      isOnline: o.isOnline
    }))), a && c.push(p.createElement(Se, {
      key: "inset",
      connected: t.connected
    }, ke(a))), p.createElement(ve, {
      defaultOpen: t.defaultOpen ?? !0,
      onOpenChange: d,
      connected: t.connected
    }, ...c);
  }
};
Ce(fe, _);
_e("hf-app-sidebar", fe);
export {
  fe as AppSidebarWC,
  fe as default
};

//# sourceMappingURL=hf-app-sidebar.js.map