rootzz-layout 0.1.0

package/dist/index.mjs

@@ -0,0 +1,836 @@
+"use client";
+import { createContext, forwardRef, useEffect, useState, useCallback, useMemo, Children, isValidElement, useContext, useRef, useId } from 'react';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+
+// src/components/RootzzLayout.tsx
+function useControllableState(options) {
+  const { value, defaultValue, onChange } = options;
+  const isControlled = value !== void 0;
+  const [internal, setInternal] = useState(defaultValue);
+  const onChangeRef = useRef(onChange);
+  onChangeRef.current = onChange;
+  const current = isControlled ? value : internal;
+  const currentRef = useRef(current);
+  currentRef.current = current;
+  const setValue = useCallback(
+    (next) => {
+      const resolved = typeof next === "function" ? next(currentRef.current) : next;
+      if (!isControlled) {
+        setInternal(resolved);
+      }
+      if (resolved !== currentRef.current) {
+        onChangeRef.current?.(resolved);
+      }
+    },
+    [isControlled]
+  );
+  return [current, setValue];
+}
+var MOBILE_QUERY = "(max-width: 767.98px)";
+var LayoutContext = createContext(null);
+function useLayout() {
+  const ctx = useContext(LayoutContext);
+  if (!ctx) {
+    throw new Error("useLayout deve ser usado dentro de <RootzzLayout> ou <LayoutShell>.");
+  }
+  return ctx;
+}
+function LayoutProvider({
+  children,
+  theme: themeProp,
+  defaultTheme = "light",
+  onThemeChange,
+  linkComponent = "a"
+}) {
+  const [theme, setTheme] = useControllableState({
+    value: themeProp,
+    defaultValue: defaultTheme,
+    onChange: onThemeChange
+  });
+  const [mobileOpen, setMobileOpen] = useState(false);
+  const [isMobile, setIsMobile] = useState(false);
+  useEffect(() => {
+    if (typeof window === "undefined" || !window.matchMedia) return;
+    const mql = window.matchMedia(MOBILE_QUERY);
+    const update = () => setIsMobile(mql.matches);
+    update();
+    mql.addEventListener("change", update);
+    return () => mql.removeEventListener("change", update);
+  }, []);
+  useEffect(() => {
+    if (!isMobile && mobileOpen) setMobileOpen(false);
+  }, [isMobile, mobileOpen]);
+  useEffect(() => {
+    if (typeof document === "undefined") return;
+    if (!mobileOpen || !isMobile) return;
+    const previous = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+    return () => {
+      document.body.style.overflow = previous;
+    };
+  }, [mobileOpen, isMobile]);
+  const toggleTheme = useCallback(() => {
+    setTheme(theme === "dark" ? "light" : "dark");
+  }, [theme, setTheme]);
+  const value = useMemo(
+    () => ({
+      theme,
+      setTheme,
+      toggleTheme,
+      mobileOpen,
+      setMobileOpen,
+      isMobile,
+      linkComponent
+    }),
+    [theme, setTheme, toggleTheme, mobileOpen, isMobile, linkComponent]
+  );
+  return /* @__PURE__ */ jsx(LayoutContext.Provider, { value, children });
+}
+
+// src/lib/cx.ts
+function cx(...inputs) {
+  const out = [];
+  for (const input of inputs) {
+    if (!input) continue;
+    if (typeof input === "string" || typeof input === "number") {
+      out.push(String(input));
+    } else if (Array.isArray(input)) {
+      const inner = cx(...input);
+      if (inner) out.push(inner);
+    } else if (typeof input === "object") {
+      for (const key in input) {
+        if (input[key]) out.push(key);
+      }
+    }
+  }
+  return out.join(" ");
+}
+function Content({ children, maxWidth, className, noPadding = false }) {
+  const useToken = maxWidth === void 0;
+  const style = maxWidth === void 0 || maxWidth === false ? void 0 : { maxWidth };
+  return /* @__PURE__ */ jsx("main", { className: "rootzz-content", children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      style,
+      className: cx(
+        "rootzz-content__inner",
+        useToken && "rootzz-content__inner--max",
+        !noPadding && "rootzz-content__inner--padded",
+        className
+      ),
+      children
+    }
+  ) });
+}
+var SidebarContext = createContext({});
+var SidebarProvider = SidebarContext.Provider;
+function useSidebar() {
+  return useContext(SidebarContext);
+}
+function base({ size = 20, ...props }) {
+  return {
+    width: size,
+    height: size,
+    viewBox: "0 0 24 24",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    "aria-hidden": true,
+    focusable: false,
+    ...props
+  };
+}
+var stroke = {
+  stroke: "currentColor",
+  strokeWidth: 1.5,
+  strokeLinecap: "round",
+  strokeLinejoin: "round"
+};
+function AppsGridIcon(props) {
+  const xs = [5, 12, 19];
+  const ys = [5, 12, 19];
+  return /* @__PURE__ */ jsx("svg", { ...base(props), children: ys.flatMap(
+    (cy) => xs.map((cx2) => /* @__PURE__ */ jsx("circle", { cx: cx2, cy, r: 1, ...stroke }, `${cx2}-${cy}`))
+  ) });
+}
+function ChevronDownIcon(props) {
+  return /* @__PURE__ */ jsx("svg", { ...base(props), children: /* @__PURE__ */ jsx("path", { d: "m6 9 6 6 6-6", ...stroke }) });
+}
+function MenuIcon(props) {
+  return /* @__PURE__ */ jsx("svg", { ...base(props), children: /* @__PURE__ */ jsx("path", { d: "M3 6h18M3 12h18M3 18h18", ...stroke }) });
+}
+function CloseIcon(props) {
+  return /* @__PURE__ */ jsx("svg", { ...base(props), children: /* @__PURE__ */ jsx("path", { d: "M18 6 6 18M6 6l12 12", ...stroke }) });
+}
+function SearchIcon(props) {
+  return /* @__PURE__ */ jsxs("svg", { ...base(props), children: [
+    /* @__PURE__ */ jsx("circle", { cx: 11, cy: 11, r: 7, ...stroke }),
+    /* @__PURE__ */ jsx("path", { d: "m21 21-4.3-4.3", ...stroke })
+  ] });
+}
+function SunIcon(props) {
+  return /* @__PURE__ */ jsxs("svg", { ...base(props), children: [
+    /* @__PURE__ */ jsx("circle", { cx: 12, cy: 12, r: 4, ...stroke }),
+    /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: "M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M6.34 17.66l-1.41 1.41M19.07 4.93l-1.41 1.41",
+        ...stroke
+      }
+    )
+  ] });
+}
+function MoonIcon(props) {
+  return /* @__PURE__ */ jsx("svg", { ...base(props), children: /* @__PURE__ */ jsx("path", { d: "M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79Z", ...stroke }) });
+}
+var IconButton = forwardRef(function IconButton2({ children, badge, size = 40, className, type = "button", ...rest }, ref) {
+  const hasBadge = badge !== void 0 && badge !== false && badge !== null;
+  const isDot = badge === true;
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      ref,
+      type,
+      style: { width: size, height: size },
+      className: cx("rootzz-icon-button", className),
+      ...rest,
+      children: [
+        children,
+        hasBadge && /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: cx(
+              "rootzz-icon-button__badge",
+              isDot ? "rootzz-icon-button__badge--dot" : "rootzz-icon-button__badge--count"
+            ),
+            children: !isDot && badge
+          }
+        )
+      ]
+    }
+  );
+});
+function usePresence(open, duration = 220) {
+  const [mounted, setMounted] = useState(open);
+  const [active, setActive] = useState(open);
+  useEffect(() => {
+    if (open) {
+      setMounted(true);
+      const raf = requestAnimationFrame(() => setActive(true));
+      return () => cancelAnimationFrame(raf);
+    }
+    setActive(false);
+    const timer = setTimeout(() => setMounted(false), duration);
+    return () => clearTimeout(timer);
+  }, [open, duration]);
+  return { mounted, active };
+}
+function Overlay({ open, onClick, className }) {
+  const { mounted, active } = usePresence(open);
+  if (!mounted) return null;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-rzl": "overlay",
+      "aria-hidden": true,
+      onClick,
+      className: cx(
+        "rootzz-overlay",
+        active ? "rootzz-overlay--active" : "rootzz-overlay--inactive",
+        className
+      )
+    }
+  );
+}
+function SidebarItem({ item, nested = false }) {
+  const { linkComponent: Link, isMobile, setMobileOpen } = useLayout();
+  const { activeKey } = useSidebar();
+  const isActive = item.active ?? (activeKey != null && item.key === activeKey);
+  const handleClick = (event) => {
+    item.onClick?.(event);
+    if (isMobile) setMobileOpen(false);
+  };
+  const className = cx(
+    "rootzz-sidebar-item",
+    nested && "rootzz-sidebar-item--nested",
+    item.disabled && "rootzz-sidebar-item--disabled",
+    isActive && "rootzz-sidebar-item--active"
+  );
+  const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+    item.icon && /* @__PURE__ */ jsx("span", { className: "rootzz-sidebar-item__icon", children: item.icon }),
+    /* @__PURE__ */ jsx("span", { className: "rootzz-sidebar-item__label", children: item.label }),
+    item.badge != null && /* @__PURE__ */ jsx("span", { className: "rootzz-sidebar-item__badge", children: item.badge })
+  ] });
+  if (item.href && !item.disabled) {
+    return /* @__PURE__ */ jsx(
+      Link,
+      {
+        href: item.href,
+        target: item.target,
+        onClick: handleClick,
+        "aria-current": isActive ? "page" : void 0,
+        className,
+        children: content
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      onClick: handleClick,
+      disabled: item.disabled,
+      "aria-current": isActive ? "page" : void 0,
+      className,
+      children: content
+    }
+  );
+}
+function SidebarGroup({ group }) {
+  const { activeKey } = useSidebar();
+  const collapsible = group.collapsible ?? true;
+  const [collapsed, setCollapsed] = useState(collapsible ? group.defaultCollapsed ?? false : false);
+  const open = collapsible ? !collapsed : true;
+  const regionId = useId();
+  const hasActiveChild = group.items.some(
+    (it) => it.active || activeKey != null && it.key === activeKey
+  );
+  const header = /* @__PURE__ */ jsxs("div", { className: "rootzz-sidebar-group__header", children: [
+    group.icon && /* @__PURE__ */ jsx("span", { className: "rootzz-sidebar-group__icon", children: group.icon }),
+    /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: cx(
+          "rootzz-sidebar-group__label",
+          hasActiveChild && "rootzz-sidebar-group__label--active"
+        ),
+        children: group.label
+      }
+    ),
+    collapsible && /* @__PURE__ */ jsx(
+      ChevronDownIcon,
+      {
+        size: 16,
+        className: cx(
+          "rootzz-sidebar-group__chevron",
+          open && "rootzz-sidebar-group__chevron--open"
+        )
+      }
+    )
+  ] });
+  return /* @__PURE__ */ jsxs("div", { className: "rootzz-sidebar-group", children: [
+    collapsible ? /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        onClick: () => setCollapsed((v) => !v),
+        "aria-expanded": open,
+        "aria-controls": regionId,
+        className: "rootzz-sidebar-group__trigger",
+        children: header
+      }
+    ) : header,
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        id: regionId,
+        "aria-hidden": !open,
+        className: cx(
+          "rootzz-sidebar-group__region",
+          open && "rootzz-sidebar-group__region--open"
+        ),
+        children: /* @__PURE__ */ jsx("div", { className: "rootzz-sidebar-group__clip", children: /* @__PURE__ */ jsx("div", { className: "rootzz-sidebar-group__items", children: group.items.map((item) => /* @__PURE__ */ jsx(SidebarItem, { item, nested: true }, item.key)) }) })
+      }
+    )
+  ] });
+}
+function renderEntry(entry, index) {
+  if (entry.type === "divider") {
+    return /* @__PURE__ */ jsx("div", { className: "rootzz-nav__divider" }, entry.key ?? `divider-${index}`);
+  }
+  if (entry.type === "group") {
+    const group = entry;
+    return /* @__PURE__ */ jsx(SidebarGroup, { group }, group.key);
+  }
+  const item = entry;
+  return /* @__PURE__ */ jsx(SidebarItem, { item }, item.key);
+}
+function Nav({
+  menu,
+  header,
+  footer,
+  ariaLabel,
+  children
+}) {
+  return /* @__PURE__ */ jsxs("nav", { "aria-label": ariaLabel ?? "Navega\xE7\xE3o principal", className: "rootzz-nav", children: [
+    header && /* @__PURE__ */ jsx("div", { className: "rootzz-nav__header", children: header }),
+    /* @__PURE__ */ jsx("div", { className: "rootzz-nav__scroll rootzz-scrollbar-none", children: children ?? /* @__PURE__ */ jsx("div", { className: "rootzz-nav__list", children: menu?.map(renderEntry) }) }),
+    footer && /* @__PURE__ */ jsx("div", { className: "rootzz-nav__footer", children: footer })
+  ] });
+}
+function Sidebar({
+  menu,
+  activeKey,
+  header,
+  footer,
+  ariaLabel,
+  children,
+  className,
+  mobileTitle
+}) {
+  const { mobileOpen, setMobileOpen } = useLayout();
+  useEffect(() => {
+    if (!mobileOpen) return;
+    if (typeof document === "undefined") return;
+    const onKey = (e) => {
+      if (e.key === "Escape") setMobileOpen(false);
+    };
+    document.addEventListener("keydown", onKey);
+    return () => document.removeEventListener("keydown", onKey);
+  }, [mobileOpen, setMobileOpen]);
+  const navProps = { menu, header, footer, ariaLabel, children };
+  return /* @__PURE__ */ jsxs(SidebarProvider, { value: { activeKey }, children: [
+    /* @__PURE__ */ jsx("aside", { "data-rzl": "sidebar", className: cx("rootzz-sidebar", className), children: /* @__PURE__ */ jsx(Nav, { ...navProps }) }),
+    /* @__PURE__ */ jsx(Overlay, { open: mobileOpen, onClick: () => setMobileOpen(false) }),
+    /* @__PURE__ */ jsxs(
+      "aside",
+      {
+        "data-rzl": "drawer",
+        "data-state": mobileOpen ? "open" : "closed",
+        "aria-hidden": !mobileOpen,
+        className: cx("rootzz-drawer", mobileOpen && "rootzz-drawer--open", className),
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "rootzz-drawer__header", children: [
+            /* @__PURE__ */ jsx("span", { className: "rootzz-drawer__title", children: mobileTitle }),
+            /* @__PURE__ */ jsx(IconButton, { "aria-label": "Fechar menu", onClick: () => setMobileOpen(false), children: /* @__PURE__ */ jsx(CloseIcon, { size: 22 }) })
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "rootzz-drawer__body", children: /* @__PURE__ */ jsx(Nav, { ...navProps }) })
+        ]
+      }
+    )
+  ] });
+}
+var DEFAULT_APPS_URL = "https://cdn.eduzzcdn.com/topbar/applications.json";
+var cache = /* @__PURE__ */ new Map();
+function fetchApps(url) {
+  let promise = cache.get(url);
+  if (!promise) {
+    promise = fetch(url).then((res) => {
+      if (!res.ok) throw new Error(`HTTP ${res.status} ao buscar apps`);
+      return res.json();
+    }).then((data) => Array.isArray(data) ? data : []).catch((err) => {
+      cache.delete(url);
+      throw err;
+    });
+    cache.set(url, promise);
+  }
+  return promise;
+}
+function resolveSource(source) {
+  if (!source) return { staticItems: null, url: null };
+  if (source === true) return { staticItems: null, url: DEFAULT_APPS_URL };
+  if (typeof source === "string") return { staticItems: null, url: source };
+  if (Array.isArray(source)) return { staticItems: source, url: null };
+  if (source.items) return { staticItems: source.items, url: null };
+  return { staticItems: null, url: source.url ?? DEFAULT_APPS_URL };
+}
+function useApps(source) {
+  const { staticItems, url } = resolveSource(source);
+  const [items, setItems] = useState(staticItems ?? []);
+  const [loading, setLoading] = useState(!!url && !staticItems);
+  const [error, setError] = useState(null);
+  useEffect(() => {
+    if (staticItems) {
+      setItems(staticItems);
+      setLoading(false);
+      setError(null);
+      return;
+    }
+    if (!url) {
+      setItems([]);
+      setLoading(false);
+      return;
+    }
+    let active = true;
+    setLoading(true);
+    setError(null);
+    fetchApps(url).then((data) => {
+      if (!active) return;
+      setItems(data);
+      setLoading(false);
+    }).catch((err) => {
+      if (!active) return;
+      setError(err);
+      setLoading(false);
+    });
+    return () => {
+      active = false;
+    };
+  }, [url, staticItems ? staticItems.length : null]);
+  return { items, loading, error };
+}
+function useApplication(application, url = DEFAULT_APPS_URL) {
+  const [app, setApp] = useState(null);
+  const [loading, setLoading] = useState(!!application);
+  const [error, setError] = useState(null);
+  useEffect(() => {
+    if (!application) {
+      setApp(null);
+      setLoading(false);
+      setError(null);
+      return;
+    }
+    let active = true;
+    setLoading(true);
+    setError(null);
+    fetchApps(url).then((data) => {
+      if (!active) return;
+      setApp(data.find((item) => item.application === application) ?? null);
+      setLoading(false);
+    }).catch((err) => {
+      if (!active) return;
+      setError(err);
+      setLoading(false);
+    });
+    return () => {
+      active = false;
+    };
+  }, [application, url]);
+  return { app, loading, error };
+}
+function useDismiss(open, refs, onDismiss) {
+  useEffect(() => {
+    if (!open) return;
+    if (typeof document === "undefined") return;
+    const handlePointer = (event) => {
+      const target = event.target;
+      if (!target) return;
+      const inside = refs.some((ref) => ref.current && ref.current.contains(target));
+      if (!inside) onDismiss();
+    };
+    const handleKey = (event) => {
+      if (event.key === "Escape") onDismiss();
+    };
+    document.addEventListener("pointerdown", handlePointer, true);
+    document.addEventListener("keydown", handleKey);
+    return () => {
+      document.removeEventListener("pointerdown", handlePointer, true);
+      document.removeEventListener("keydown", handleKey);
+    };
+  }, [open, onDismiss, refs]);
+}
+function Dropdown({
+  renderTrigger,
+  children,
+  align = "end",
+  panelClassName,
+  panelWidth,
+  closeOnContentClick = true,
+  ariaLabel,
+  open: openProp,
+  onOpenChange
+}) {
+  const [open, setOpen] = useControllableState({
+    value: openProp,
+    defaultValue: false,
+    onChange: onOpenChange
+  });
+  const containerRef = useRef(null);
+  const panelId = useId();
+  const { mounted, active } = usePresence(open);
+  useDismiss(open, [containerRef], () => setOpen(false));
+  const toggle = () => setOpen((v) => !v);
+  return /* @__PURE__ */ jsxs("div", { ref: containerRef, className: "rootzz-dropdown", children: [
+    renderTrigger({
+      open,
+      toggle,
+      triggerProps: {
+        "aria-haspopup": "menu",
+        "aria-expanded": open,
+        "aria-controls": panelId
+      }
+    }),
+    mounted && /* @__PURE__ */ jsx(
+      "div",
+      {
+        id: panelId,
+        role: "menu",
+        "aria-label": ariaLabel,
+        onClick: () => closeOnContentClick && setOpen(false),
+        style: panelWidth !== void 0 ? { width: panelWidth } : void 0,
+        className: cx(
+          "rootzz-dropdown__panel",
+          align === "end" ? "rootzz-dropdown__panel--end" : "rootzz-dropdown__panel--start",
+          active ? "rootzz-dropdown__panel--active" : "rootzz-dropdown__panel--inactive",
+          panelClassName
+        ),
+        children
+      }
+    )
+  ] });
+}
+function AppsMenu({ source = true, label = "Aplicativos", title = "Aplicativos" }) {
+  const { items, loading, error } = useApps(source);
+  if (source === false) return null;
+  return /* @__PURE__ */ jsxs(
+    Dropdown,
+    {
+      align: "start",
+      ariaLabel: title,
+      panelWidth: 332,
+      panelClassName: "rootzz-apps",
+      renderTrigger: ({ toggle, triggerProps }) => /* @__PURE__ */ jsx(IconButton, { onClick: toggle, "aria-label": label, title: label, ...triggerProps, children: /* @__PURE__ */ jsx(AppsGridIcon, { size: 22 }) }),
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "rootzz-apps__title", children: title }),
+        loading && /* @__PURE__ */ jsx("div", { className: "rootzz-apps__status", children: "Carregando\u2026" }),
+        error && !loading && /* @__PURE__ */ jsx("div", { className: "rootzz-apps__status", children: "N\xE3o foi poss\xEDvel carregar os aplicativos." }),
+        !loading && !error && items.length > 0 && /* @__PURE__ */ jsx("div", { className: "rootzz-apps__grid rootzz-scrollbar-none", children: items.map((app, index) => /* @__PURE__ */ jsxs(
+          "a",
+          {
+            href: app.url,
+            title: app.description ?? app.label,
+            role: "menuitem",
+            className: "rootzz-apps__item",
+            children: [
+              /* @__PURE__ */ jsx("img", { src: app.icon, alt: "", className: "rootzz-apps__icon", loading: "lazy" }),
+              /* @__PURE__ */ jsx("span", { className: "rootzz-apps__label", children: app.label })
+            ]
+          },
+          app.application ?? `${app.label}-${index}`
+        )) })
+      ]
+    }
+  );
+}
+var MYEDUZZ_LOGO = {
+  src: "https://cdn.eduzzcdn.com/topbar/orbita-new.svg",
+  alt: "MyEduzz",
+  height: 28
+};
+function isMyEduzzShortcut(value) {
+  return typeof value === "string" && value.trim().toLowerCase() === "myeduzz";
+}
+function isLogoConfig(value) {
+  return typeof value === "object" && value !== null && !isValidElement(value) && "src" in value;
+}
+function Logo({ logo }) {
+  const { linkComponent: Link } = useLayout();
+  if (isLogoConfig(logo)) {
+    const img = /* @__PURE__ */ jsx("img", { src: logo.src, alt: logo.alt ?? "", className: "rootzz-brand__logo-img" });
+    if (logo.href) {
+      return /* @__PURE__ */ jsx(Link, { href: logo.href, onClick: logo.onClick, className: "rootzz-brand__logo-link", children: img });
+    }
+    if (logo.onClick) {
+      return /* @__PURE__ */ jsx("button", { type: "button", onClick: logo.onClick, className: "rootzz-brand__logo-link", children: img });
+    }
+    return /* @__PURE__ */ jsx("span", { className: "rootzz-brand__logo-link", children: img });
+  }
+  return /* @__PURE__ */ jsx(Fragment, { children: logo });
+}
+function ApplicationBrand({ application }) {
+  const { linkComponent: Link } = useLayout();
+  const { app } = useApplication(application);
+  if (!app) return null;
+  return /* @__PURE__ */ jsxs(Link, { href: app.url, className: "rootzz-brand__app", title: app.label, children: [
+    /* @__PURE__ */ jsx("img", { src: app.icon, alt: app.label, className: "rootzz-brand__app-icon" }),
+    /* @__PURE__ */ jsx("span", { className: "rootzz-brand__app-name", children: app.label })
+  ] });
+}
+function Brand({ logo, application, apps, appsLabel }) {
+  const resolvedLogo = isMyEduzzShortcut(logo) ? MYEDUZZ_LOGO : logo;
+  return /* @__PURE__ */ jsxs("div", { className: "rootzz-brand", children: [
+    /* @__PURE__ */ jsx(AppsMenu, { source: apps, label: appsLabel }),
+    application ? /* @__PURE__ */ jsx("span", { className: "rootzz-brand__logo", children: /* @__PURE__ */ jsx(ApplicationBrand, { application }) }) : resolvedLogo != null && /* @__PURE__ */ jsx("span", { className: "rootzz-brand__logo", children: /* @__PURE__ */ jsx(Logo, { logo: resolvedLogo }) })
+  ] });
+}
+function ThemeToggle({ label = "Alternar tema" }) {
+  const { theme, toggleTheme } = useLayout();
+  const isDark = theme === "dark";
+  return /* @__PURE__ */ jsx(IconButton, { onClick: toggleTheme, "aria-label": label, title: label, children: /* @__PURE__ */ jsxs("span", { className: "rootzz-theme-toggle", children: [
+    /* @__PURE__ */ jsx(SunIcon, { size: 20, className: cxFade(isDark) }),
+    /* @__PURE__ */ jsx(MoonIcon, { size: 20, className: cxFade(!isDark) })
+  ] }) });
+}
+function cxFade(visible) {
+  return [
+    "rootzz-theme-toggle__icon",
+    visible ? "rootzz-theme-toggle__icon--visible" : "rootzz-theme-toggle__icon--hidden"
+  ].join(" ");
+}
+function computeInitials(name) {
+  const parts = name.trim().split(/\s+/).filter(Boolean);
+  if (parts.length === 0) return "?";
+  if (parts.length === 1) return parts[0].slice(0, 2).toUpperCase();
+  return (parts[0][0] + parts[parts.length - 1][0]).toUpperCase();
+}
+function Avatar({ user, size = 32 }) {
+  const initials = user.initials ?? computeInitials(user.name);
+  if (user.avatarUrl) {
+    return /* @__PURE__ */ jsx(
+      "img",
+      {
+        src: user.avatarUrl,
+        alt: user.name,
+        style: { width: size, height: size },
+        className: "rootzz-avatar"
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx("span", { "aria-hidden": true, style: { width: size, height: size }, className: "rootzz-avatar rootzz-avatar--initials", children: initials });
+}
+function isDivider(entry) {
+  return entry.type === "divider";
+}
+function UserMenu({ user }) {
+  const { linkComponent: Link } = useLayout();
+  const hasMenu = !!user.menu && user.menu.length > 0;
+  const trigger = (extra) => /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      onClick: extra ? extra.toggle : user.onClick,
+      ...extra?.triggerProps ?? {},
+      className: "rootzz-user",
+      children: [
+        /* @__PURE__ */ jsx(Avatar, { user }),
+        /* @__PURE__ */ jsx("span", { className: "rootzz-user__name", children: user.name }),
+        hasMenu && /* @__PURE__ */ jsx(ChevronDownIcon, { size: 16, className: "rootzz-user__chevron" })
+      ]
+    }
+  );
+  if (!hasMenu) {
+    return trigger();
+  }
+  return /* @__PURE__ */ jsxs(
+    Dropdown,
+    {
+      align: "end",
+      ariaLabel: `Menu de ${user.name}`,
+      panelWidth: 240,
+      renderTrigger: ({ toggle, triggerProps }) => trigger({ toggle, triggerProps }),
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "rootzz-user-panel__header", children: [
+          /* @__PURE__ */ jsx(Avatar, { user, size: 36 }),
+          /* @__PURE__ */ jsxs("div", { className: "rootzz-user-panel__info", children: [
+            /* @__PURE__ */ jsx("div", { className: "rootzz-user-panel__name", children: user.name }),
+            user.email && /* @__PURE__ */ jsx("div", { className: "rootzz-user-panel__email", children: user.email })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "rootzz-divider" }),
+        user.menu.map((entry, index) => {
+          if (isDivider(entry)) {
+            return /* @__PURE__ */ jsx("div", { className: "rootzz-divider" }, entry.key ?? `divider-${index}`);
+          }
+          const itemClass = cx(
+            "rootzz-menu-item",
+            entry.disabled && "rootzz-menu-item--disabled",
+            entry.danger && "rootzz-menu-item--danger"
+          );
+          const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+            entry.icon && /* @__PURE__ */ jsx("span", { className: "rootzz-menu-item__icon", children: entry.icon }),
+            /* @__PURE__ */ jsx("span", { className: "rootzz-menu-item__label", children: entry.label })
+          ] });
+          if (entry.href) {
+            return /* @__PURE__ */ jsx(Link, { href: entry.href, role: "menuitem", className: itemClass, children: content }, entry.key ?? index);
+          }
+          return /* @__PURE__ */ jsx("button", { type: "button", role: "menuitem", onClick: entry.onClick, className: itemClass, children: content }, entry.key ?? index);
+        })
+      ]
+    }
+  );
+}
+function Topbar({
+  logo,
+  application,
+  apps,
+  search,
+  actions,
+  user,
+  showThemeToggle = false,
+  showMenuButton = true,
+  appsLabel,
+  menuButtonLabel = "Abrir menu",
+  className
+}) {
+  const { mobileOpen, setMobileOpen } = useLayout();
+  return /* @__PURE__ */ jsxs("header", { className: cx("rootzz-topbar", className), children: [
+    /* @__PURE__ */ jsxs("div", { className: "rootzz-topbar__left", children: [
+      showMenuButton && /* @__PURE__ */ jsx(
+        IconButton,
+        {
+          className: "rootzz-topbar__menu-button",
+          "aria-label": menuButtonLabel,
+          "aria-expanded": mobileOpen,
+          onClick: () => setMobileOpen(!mobileOpen),
+          children: /* @__PURE__ */ jsx(MenuIcon, { size: 22 })
+        }
+      ),
+      /* @__PURE__ */ jsx(Brand, { logo, application, apps, appsLabel })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "rootzz-topbar__center", children: search && /* @__PURE__ */ jsx("div", { className: "rootzz-topbar__search", children: search }) }),
+    /* @__PURE__ */ jsxs("div", { className: "rootzz-topbar__right", children: [
+      actions,
+      showThemeToggle && /* @__PURE__ */ jsx(ThemeToggle, {}),
+      user && /* @__PURE__ */ jsx(UserMenu, { user })
+    ] })
+  ] });
+}
+function Shell({ children, className, style, id }) {
+  const { theme } = useLayout();
+  const items = Children.toArray(children).filter(isValidElement);
+  const topbar = items.find((el) => el.type === Topbar);
+  const sidebars = items.filter((el) => el.type === Sidebar);
+  const body = items.filter((el) => el.type !== Topbar && el.type !== Sidebar);
+  return /* @__PURE__ */ jsxs("div", { id, "data-theme": theme, style, className: cx("rootzz-layout", className), children: [
+    topbar,
+    /* @__PURE__ */ jsxs("div", { className: "rootzz-layout__body", children: [
+      sidebars,
+      body
+    ] })
+  ] });
+}
+function RootzzLayoutBase({
+  children,
+  theme,
+  defaultTheme,
+  onThemeChange,
+  linkComponent,
+  className,
+  style,
+  id
+}) {
+  return /* @__PURE__ */ jsx(
+    LayoutProvider,
+    {
+      theme,
+      defaultTheme,
+      onThemeChange,
+      linkComponent,
+      children: /* @__PURE__ */ jsx(Shell, { className, style, id, children })
+    }
+  );
+}
+var RootzzLayout = Object.assign(RootzzLayoutBase, {
+  Topbar,
+  Sidebar,
+  Content
+});
+var SearchBar = forwardRef(function SearchBar2({ placeholder = "Buscar\u2026", shortcut, wrapperClassName, className, ...rest }, ref) {
+  return /* @__PURE__ */ jsxs("div", { className: cx("rootzz-search", wrapperClassName), children: [
+    /* @__PURE__ */ jsx(SearchIcon, { size: 18, className: "rootzz-search__icon" }),
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        ref,
+        type: "search",
+        placeholder,
+        className: cx("rootzz-search__input", className),
+        ...rest
+      }
+    ),
+    shortcut != null && /* @__PURE__ */ jsx("kbd", { className: "rootzz-search__shortcut", children: shortcut })
+  ] });
+});
+
+export { AppsMenu, Brand, Content, DEFAULT_APPS_URL, Dropdown, IconButton, LayoutProvider, Overlay, RootzzLayout, SearchBar, Sidebar, SidebarGroup, SidebarItem, ThemeToggle, Topbar, UserMenu, cx, useApplication, useApps, useLayout };
+//# sourceMappingURL=index.mjs.map
+//# sourceMappingURL=index.mjs.map