@nextelco/common-ui 2.1.98 → 2.1.99

package/dist/esm/legacy/components/layout/Header/Header.js

@@ -0,0 +1,37 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faBars } from "@fortawesome/free-solid-svg-icons";
+import './Header.css';/* empty css            */
+const Header = ({
+  title,
+  subTitle,
+  icon,
+  sideBar,
+  handleSideBar,
+  profile,
+  handleHome,
+  background
+}) => {
+  return /* @__PURE__ */ jsx("div", { className: "cui-header", children: /* @__PURE__ */ jsx(
+    "header",
+    {
+      className: "cui-header__wrapper",
+      style: background ? { "--cui-header-bg": background } : void 0,
+      children: /* @__PURE__ */ jsxs("div", { className: "cui-header__container", children: [
+        /* @__PURE__ */ jsxs("div", { className: "cui-header__left", children: [
+          sideBar && /* @__PURE__ */ jsx("div", { className: "cui-header__sidebar", onClick: handleSideBar, children: /* @__PURE__ */ jsx(FontAwesomeIcon, { icon: faBars, className: "cui-header__icon" }) }),
+          /* @__PURE__ */ jsxs("div", { className: "cui-header__title", onClick: handleHome, children: [
+            icon && /* @__PURE__ */ jsx(FontAwesomeIcon, { icon, className: "cui-header__icon" }),
+            /* @__PURE__ */ jsx("h1", { children: title })
+          ] }),
+          subTitle && /* @__PURE__ */ jsx("div", { className: "cui-header__subtitle", children: /* @__PURE__ */ jsx("h2", { children: subTitle }) })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "cui-header__right", children: /* @__PURE__ */ jsx("div", { className: "cui-header__profile", children: profile }) })
+      ] })
+    }
+  ) });
+};
+export {
+  Header as default
+};
+//# sourceMappingURL=Header.js.map

package/dist/esm/legacy/components/layout/Header/Header.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Header.js","sources":["../../../../../../src/legacy/components/layout/Header/Header.tsx"],"sourcesContent":["import React, { ReactNode } from 'react'\r\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome'\r\nimport { faBars, faHouse } from '@fortawesome/free-solid-svg-icons'\r\nimport './Header.scss'\r\nimport { IconProp } from '@fortawesome/fontawesome-svg-core'\r\n\r\ntype Props = {\r\n  title: string\r\n  subTitle?: string\r\n  icon?: IconProp\r\n  sideBar: boolean\r\n  handleSideBar: () => void\r\n  profile: ReactNode\r\n  handleHome: () => void\r\n  // Sobrepõe o fundo (gradiente/imagem) por defeito. Aceita qualquer valor\r\n  // válido da propriedade CSS \"background\" (cor sólida, gradiente, url(...)).\r\n  background?: string\r\n}\r\n\r\n/** @deprecated Legacy — não usar em código novo. Ver Storybook › Legacy. */\r\nconst Header = ({\r\n  title,\r\n  subTitle,\r\n  icon,\r\n  sideBar,\r\n  handleSideBar,\r\n  profile,\r\n  handleHome,\r\n  background,\r\n}: Props) => {\r\n  return (\r\n    <div className=\"cui-header\">\r\n      <header\r\n        className=\"cui-header__wrapper\"\r\n        style={background ? ({ '--cui-header-bg': background } as React.CSSProperties) : undefined}\r\n      >\r\n        <div className=\"cui-header__container\">\r\n          <div className=\"cui-header__left\">\r\n            {sideBar && (\r\n              <div className=\"cui-header__sidebar\" onClick={handleSideBar}>\r\n                <FontAwesomeIcon icon={faBars} className=\"cui-header__icon\" />\r\n              </div>\r\n            )}\r\n            <div className=\"cui-header__title\" onClick={handleHome}>\r\n              {icon && (\r\n                <FontAwesomeIcon icon={icon} className=\"cui-header__icon\" />\r\n              )}\r\n              <h1>{title}</h1>\r\n            </div>\r\n            {subTitle && (\r\n              <div className=\"cui-header__subtitle\">\r\n                <h2>{subTitle}</h2>\r\n              </div>\r\n            )}\r\n          </div>\r\n          <div className=\"cui-header__right\">\r\n            <div className=\"cui-header__profile\">{profile}</div>\r\n          </div>\r\n        </div>\r\n      </header>\r\n    </div>\r\n  )\r\n}\r\n\r\nexport default Header\r\n"],"names":[],"mappings":";;;;AAoBA,MAAM,SAAS,CAAC;AAAA,EACd;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAa;AACX,SACE,oBAAC,OAAA,EAAI,WAAU,cACb,UAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAU;AAAA,MACV,OAAO,aAAc,EAAE,mBAAmB,eAAuC;AAAA,MAEjF,UAAA,qBAAC,OAAA,EAAI,WAAU,yBACb,UAAA;AAAA,QAAA,qBAAC,OAAA,EAAI,WAAU,oBACZ,UAAA;AAAA,UAAA,WACC,oBAAC,OAAA,EAAI,WAAU,uBAAsB,SAAS,eAC5C,UAAA,oBAAC,iBAAA,EAAgB,MAAM,QAAQ,WAAU,mBAAA,CAAmB,GAC9D;AAAA,UAEF,qBAAC,OAAA,EAAI,WAAU,qBAAoB,SAAS,YACzC,UAAA;AAAA,YAAA,QACC,oBAAC,iBAAA,EAAgB,MAAY,WAAU,oBAAmB;AAAA,YAE5D,oBAAC,QAAI,UAAA,MAAA,CAAM;AAAA,UAAA,GACb;AAAA,UACC,gCACE,OAAA,EAAI,WAAU,wBACb,UAAA,oBAAC,MAAA,EAAI,oBAAS,EAAA,CAChB;AAAA,QAAA,GAEJ;AAAA,QACA,oBAAC,SAAI,WAAU,qBACb,8BAAC,OAAA,EAAI,WAAU,uBAAuB,UAAA,QAAA,CAAQ,EAAA,CAChD;AAAA,MAAA,EAAA,CACF;AAAA,IAAA;AAAA,EAAA,GAEJ;AAEJ;"}

package/dist/esm/legacy/components/layout/Layout/Layout.js

@@ -0,0 +1,92 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useState, useEffect } from "react";
+import Sidebar from "../Sidebar/Sidebar.js";
+const Menu = ({ size = 24, className }) => /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className, children: [
+  /* @__PURE__ */ jsx("line", { x1: "4", x2: "20", y1: "12", y2: "12" }),
+  /* @__PURE__ */ jsx("line", { x1: "4", x2: "20", y1: "6", y2: "6" }),
+  /* @__PURE__ */ jsx("line", { x1: "4", x2: "20", y1: "18", y2: "18" })
+] });
+const Layout = ({
+  children,
+  menus,
+  groupLabels,
+  appTitle,
+  topBar,
+  avatar,
+  onLogout,
+  logoutLabel,
+  languages,
+  currentLang,
+  onLanguageChange,
+  theme,
+  onThemeChange,
+  themeLabels,
+  footer,
+  deployedAt,
+  deployedAtLabel,
+  sidebarOpen: sidebarOpenProp,
+  onSidebarOpenChange
+}) => {
+  const [sidebarOpen, setSidebarOpenState] = useState(sidebarOpenProp ?? window.innerWidth > 640);
+  const [isMobile, setIsMobile] = useState(window.innerWidth <= 640);
+  const setSidebarOpen = (open) => {
+    setSidebarOpenState(open);
+    onSidebarOpenChange?.(open);
+  };
+  useEffect(() => {
+    const handleResize = () => {
+      setIsMobile(window.innerWidth <= 640);
+      setSidebarOpenState(window.innerWidth > 640);
+    };
+    window.addEventListener("resize", handleResize);
+    return () => window.removeEventListener("resize", handleResize);
+  }, []);
+  const contentMarginLeft = isMobile ? 0 : sidebarOpen ? 256 : 80;
+  return /* @__PURE__ */ jsxs("div", { className: "min-h-screen bg-slate-50/30 dark:bg-slate-950 flex", children: [
+    /* @__PURE__ */ jsx(
+      Sidebar,
+      {
+        isOpen: sidebarOpen,
+        setIsOpen: setSidebarOpen,
+        menus,
+        groupLabels,
+        appTitle,
+        avatar,
+        onLogout,
+        logoutLabel,
+        languages,
+        currentLang,
+        onLanguageChange,
+        theme,
+        onThemeChange,
+        themeLabels,
+        footer,
+        deployedAt,
+        deployedAtLabel
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: "flex-1 flex flex-col min-w-0 transition-all duration-300", children: [
+      !sidebarOpen && /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: () => setSidebarOpen(true),
+          className: "fixed top-6 left-6 z-50 p-2.5 bg-white shadow-md border border-slate-200 rounded-lg text-slate-500 hover:text-proef-blue dark:bg-slate-900 dark:border-slate-700 dark:text-slate-400 transition-colors sm:hidden",
+          children: /* @__PURE__ */ jsx(Menu, { size: 20 })
+        }
+      ),
+      topBar && /* @__PURE__ */ jsx("div", { style: { marginLeft: contentMarginLeft }, className: "sticky top-0 z-30 transition-all duration-300", children: topBar }),
+      /* @__PURE__ */ jsx(
+        "main",
+        {
+          style: { marginLeft: contentMarginLeft },
+          className: `pb-16 px-4 sm:px-12 transition-all duration-300 ${topBar ? "pt-6 sm:pt-6" : "pt-24 sm:pt-8"}`,
+          children: /* @__PURE__ */ jsx("div", { className: "mx-auto animate-in fade-in slide-in-from-bottom-2 duration-700", children })
+        }
+      )
+    ] })
+  ] });
+};
+export {
+  Layout as default
+};
+//# sourceMappingURL=Layout.js.map

package/dist/esm/legacy/components/layout/Layout/Layout.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Layout.js","sources":["../../../../../../src/legacy/components/layout/Layout/Layout.tsx"],"sourcesContent":["import React, { useState, useEffect } from 'react'\r\nimport Sidebar, { SidebarMenuItem, SidebarLanguage, SidebarTheme } from '../Sidebar/Sidebar'\r\n\r\n// ── Inline icon (no lucide-react dependency in common-ui) ─────────────────\r\ntype IconProps = { size?: number; className?: string }\r\n\r\nconst Menu = ({ size = 24, className }: IconProps) => (\r\n    <svg xmlns=\"http://www.w3.org/2000/svg\" width={size} height={size} viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" className={className}>\r\n        <line x1=\"4\" x2=\"20\" y1=\"12\" y2=\"12\" />\r\n        <line x1=\"4\" x2=\"20\" y1=\"6\" y2=\"6\" />\r\n        <line x1=\"4\" x2=\"20\" y1=\"18\" y2=\"18\" />\r\n    </svg>\r\n)\r\n\r\n/** @deprecated Legacy — não usar em código novo. Ver Storybook › Legacy. */\r\nexport interface LayoutProps {\r\n    children: React.ReactNode\r\n    menus: SidebarMenuItem[]\r\n    groupLabels?: Record<string, string>\r\n    appTitle?: string\r\n    /** Barra superior opcional (título/alertas). Fica sticky acima do conteúdo,\r\n     * alinhada à direita da sidebar. Traz o seu próprio fundo/padding. */\r\n    topBar?: React.ReactNode\r\n    avatar?: React.ReactNode\r\n    onLogout?: () => void\r\n    logoutLabel?: string\r\n    languages?: SidebarLanguage[]\r\n    currentLang?: string\r\n    onLanguageChange?: (code: string) => void\r\n    theme?: SidebarTheme\r\n    onThemeChange?: (theme: SidebarTheme) => void\r\n    themeLabels?: { label?: string; light?: string; dark?: string; system?: string }\r\n    /** Slot extra no rodapé da sidebar (ex: filtro global). Ver Sidebar.footer. */\r\n    footer?: (isExpanded: boolean) => React.ReactNode\r\n    /** Quando este build foi feito, por baixo do logout. Ver Sidebar.deployedAt. */\r\n    deployedAt?: string | number | Date\r\n    deployedAtLabel?: string\r\n    /**\r\n     * Estado inicial da sidebar (aberta/fechada). Sem isto mantém-se o comportamento de\r\n     * sempre: aberta no desktop, fechada em mobile. Passar isto serve para a app repor o\r\n     * que a pessoa tinha antes de recarregar a página (ex.: lido do seu próprio\r\n     * localStorage) — o Layout não persiste nada sozinho, tal como já acontece com `theme`.\r\n     */\r\n    sidebarOpen?: boolean\r\n    /**\r\n     * Chamado sempre que a sidebar abre/fecha por uma ação da pessoa (o atalho da própria\r\n     * Sidebar, ou o botão de expandir em mobile) — nunca pelo ajuste automático ao\r\n     * redimensionar a janela, que não é uma escolha dela. Mesmo padrão de\r\n     * `onThemeChange`: o Layout só avisa, quem usa decide se e como guardar.\r\n     */\r\n    onSidebarOpenChange?: (open: boolean) => void\r\n}\r\n\r\n/** @deprecated Legacy — não usar em código novo. Ver Storybook › Legacy. */\r\nconst Layout = ({\r\n    children,\r\n    menus,\r\n    groupLabels,\r\n    appTitle,\r\n    topBar,\r\n    avatar,\r\n    onLogout,\r\n    logoutLabel,\r\n    languages,\r\n    currentLang,\r\n    onLanguageChange,\r\n    theme,\r\n    onThemeChange,\r\n    themeLabels,\r\n    footer,\r\n    deployedAt,\r\n    deployedAtLabel,\r\n    sidebarOpen: sidebarOpenProp,\r\n    onSidebarOpenChange,\r\n}: LayoutProps) => {\r\n    // Expandida por defeito no desktop; colapsa em mobile (< 640) — a não ser que a app\r\n    // passe `sidebarOpen` (ex.: o que tinha guardado antes de recarregar a página).\r\n    const [sidebarOpen, setSidebarOpenState] = useState(sidebarOpenProp ?? window.innerWidth > 640)\r\n    const [isMobile, setIsMobile] = useState(window.innerWidth <= 640)\r\n\r\n    // Toggle deliberado (Sidebar passa isto como o seu `setIsOpen`, e o botão de expandir\r\n    // em mobile também) — avisa a app para poder persistir a escolha.\r\n    const setSidebarOpen = (open: boolean) => {\r\n        setSidebarOpenState(open)\r\n        onSidebarOpenChange?.(open)\r\n    }\r\n\r\n    useEffect(() => {\r\n        const handleResize = () => {\r\n            setIsMobile(window.innerWidth <= 640)\r\n            // Direto ao estado, não ao wrapper: isto é o viewport a mudar, não a pessoa a\r\n            // escolher — não faz sentido a app gravar isto como preferência.\r\n            setSidebarOpenState(window.innerWidth > 640)\r\n        }\r\n        window.addEventListener('resize', handleResize)\r\n        return () => window.removeEventListener('resize', handleResize)\r\n    }, [])\r\n\r\n    // Margem do conteúdo = largura da sidebar fixa (px, inline). NÃO usar classes\r\n    // sm:ml-* aqui: o Tailwind do consumidor scaneia o bundle minificado do\r\n    // common-ui e nem sempre gera as responsive utilities → conteúdo ficava\r\n    // por baixo do rail. Inline style é imune a isso.\r\n    // Mobile (< 640): sidebar esconde (translate) → sem margem.\r\n    const contentMarginLeft = isMobile ? 0 : sidebarOpen ? 256 : 80\r\n\r\n    return (\r\n        <div className=\"min-h-screen bg-slate-50/30 dark:bg-slate-950 flex\">\r\n            <Sidebar\r\n                isOpen={sidebarOpen}\r\n                setIsOpen={setSidebarOpen}\r\n                menus={menus}\r\n                groupLabels={groupLabels}\r\n                appTitle={appTitle}\r\n                avatar={avatar}\r\n                onLogout={onLogout}\r\n                logoutLabel={logoutLabel}\r\n                languages={languages}\r\n                currentLang={currentLang}\r\n                onLanguageChange={onLanguageChange}\r\n                theme={theme}\r\n                onThemeChange={onThemeChange}\r\n                themeLabels={themeLabels}\r\n                footer={footer}\r\n                deployedAt={deployedAt}\r\n                deployedAtLabel={deployedAtLabel}\r\n            />\r\n            <div className=\"flex-1 flex flex-col min-w-0 transition-all duration-300\">\r\n                {!sidebarOpen && (\r\n                    <button\r\n                        onClick={() => setSidebarOpen(true)}\r\n                        className=\"fixed top-6 left-6 z-50 p-2.5 bg-white shadow-md border border-slate-200 rounded-lg text-slate-500 hover:text-proef-blue dark:bg-slate-900 dark:border-slate-700 dark:text-slate-400 transition-colors sm:hidden\"\r\n                    >\r\n                        <Menu size={20} />\r\n                    </button>\r\n                )}\r\n                {topBar && (\r\n                    <div style={{ marginLeft: contentMarginLeft }} className=\"sticky top-0 z-30 transition-all duration-300\">\r\n                        {topBar}\r\n                    </div>\r\n                )}\r\n                <main\r\n                    style={{ marginLeft: contentMarginLeft }}\r\n                    className={`pb-16 px-4 sm:px-12 transition-all duration-300 ${topBar ? 'pt-6 sm:pt-6' : 'pt-24 sm:pt-8'}`}\r\n                >\r\n                    <div className=\"mx-auto animate-in fade-in slide-in-from-bottom-2 duration-700\">\r\n                        {children}\r\n                    </div>\r\n                </main>\r\n            </div>\r\n        </div>\r\n    )\r\n}\r\n\r\nexport default Layout\r\n"],"names":[],"mappings":";;;AAMA,MAAM,OAAO,CAAC,EAAE,OAAO,IAAI,UAAA,MACvB,qBAAC,OAAA,EAAI,OAAM,8BAA6B,OAAO,MAAM,QAAQ,MAAM,SAAQ,aAAY,MAAK,QAAO,QAAO,gBAAe,aAAY,KAAI,eAAc,SAAQ,gBAAe,SAAQ,WAClL,UAAA;AAAA,EAAA,oBAAC,QAAA,EAAK,IAAG,KAAI,IAAG,MAAK,IAAG,MAAK,IAAG,KAAA,CAAK;AAAA,EACrC,oBAAC,UAAK,IAAG,KAAI,IAAG,MAAK,IAAG,KAAI,IAAG,IAAA,CAAI;AAAA,EACnC,oBAAC,UAAK,IAAG,KAAI,IAAG,MAAK,IAAG,MAAK,IAAG,KAAA,CAAK;AAAA,GACzC;AA2CJ,MAAM,SAAS,CAAC;AAAA,EACZ;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,aAAa;AAAA,EACb;AACJ,MAAmB;AAGf,QAAM,CAAC,aAAa,mBAAmB,IAAI,SAAS,mBAAmB,OAAO,aAAa,GAAG;AAC9F,QAAM,CAAC,UAAU,WAAW,IAAI,SAAS,OAAO,cAAc,GAAG;AAIjE,QAAM,iBAAiB,CAAC,SAAkB;AACtC,wBAAoB,IAAI;AACxB,0BAAsB,IAAI;AAAA,EAC9B;AAEA,YAAU,MAAM;AACZ,UAAM,eAAe,MAAM;AACvB,kBAAY,OAAO,cAAc,GAAG;AAGpC,0BAAoB,OAAO,aAAa,GAAG;AAAA,IAC/C;AACA,WAAO,iBAAiB,UAAU,YAAY;AAC9C,WAAO,MAAM,OAAO,oBAAoB,UAAU,YAAY;AAAA,EAClE,GAAG,CAAA,CAAE;AAOL,QAAM,oBAAoB,WAAW,IAAI,cAAc,MAAM;AAE7D,SACI,qBAAC,OAAA,EAAI,WAAU,sDACX,UAAA;AAAA,IAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,QAAQ;AAAA,QACR,WAAW;AAAA,QACX;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MAAA;AAAA,IAAA;AAAA,IAEJ,qBAAC,OAAA,EAAI,WAAU,4DACV,UAAA;AAAA,MAAA,CAAC,eACE;AAAA,QAAC;AAAA,QAAA;AAAA,UACG,SAAS,MAAM,eAAe,IAAI;AAAA,UAClC,WAAU;AAAA,UAEV,UAAA,oBAAC,MAAA,EAAK,MAAM,GAAA,CAAI;AAAA,QAAA;AAAA,MAAA;AAAA,MAGvB,UACG,oBAAC,OAAA,EAAI,OAAO,EAAE,YAAY,kBAAA,GAAqB,WAAU,iDACpD,UAAA,OAAA,CACL;AAAA,MAEJ;AAAA,QAAC;AAAA,QAAA;AAAA,UACG,OAAO,EAAE,YAAY,kBAAA;AAAA,UACrB,WAAW,mDAAmD,SAAS,iBAAiB,eAAe;AAAA,UAEvG,UAAA,oBAAC,OAAA,EAAI,WAAU,kEACV,SAAA,CACL;AAAA,QAAA;AAAA,MAAA;AAAA,IACJ,EAAA,CACJ;AAAA,EAAA,GACJ;AAER;"}

package/dist/esm/legacy/components/layout/Sidebar/Sidebar.js

@@ -0,0 +1,227 @@
+import { jsxs, jsx, Fragment as Fragment$1 } from "react/jsx-runtime";
+import { useState, useEffect, Fragment } from "react";
+import { useLocation, NavLink } from "react-router-dom";
+const ChevronLeft = ({ size = 24, className }) => /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className, children: /* @__PURE__ */ jsx("path", { d: "m15 18-6-6 6-6" }) });
+const ChevronRight = ({ size = 24, className }) => /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className, children: /* @__PURE__ */ jsx("path", { d: "m9 18 6-6-6-6" }) });
+const ChevronDown = ({ size = 24, className }) => /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className, children: /* @__PURE__ */ jsx("path", { d: "m6 9 6 6 6-6" }) });
+const ExternalLink = ({ size = 24, className }) => /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className, children: [
+  /* @__PURE__ */ jsx("path", { d: "M15 3h6v6" }),
+  /* @__PURE__ */ jsx("path", { d: "M10 14 21 3" }),
+  /* @__PURE__ */ jsx("path", { d: "M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" })
+] });
+const LogOut = ({ size = 24, className }) => /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className, children: [
+  /* @__PURE__ */ jsx("path", { d: "M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4" }),
+  /* @__PURE__ */ jsx("polyline", { points: "16 17 21 12 16 7" }),
+  /* @__PURE__ */ jsx("line", { x1: "21", x2: "9", y1: "12", y2: "12" })
+] });
+const Globe = ({ size = 24, className }) => /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className, children: [
+  /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "10" }),
+  /* @__PURE__ */ jsx("path", { d: "M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z" }),
+  /* @__PURE__ */ jsx("path", { d: "M2 12h20" })
+] });
+const Sun = ({ size = 24, className }) => /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className, children: [
+  /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "4" }),
+  /* @__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" })
+] });
+const Moon = ({ size = 24, className }) => /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className, children: /* @__PURE__ */ jsx("path", { d: "M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9z" }) });
+const Monitor = ({ size = 24, className }) => /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className, children: [
+  /* @__PURE__ */ jsx("rect", { width: "20", height: "14", x: "2", y: "3", rx: "2" }),
+  /* @__PURE__ */ jsx("path", { d: "M8 21h8M12 17v4" })
+] });
+function formatarDeploy(valor) {
+  const d = valor instanceof Date ? valor : new Date(valor);
+  if (Number.isNaN(d.getTime())) return "";
+  const dois = (n) => String(n).padStart(2, "0");
+  return `${dois(d.getDate())}/${dois(d.getMonth() + 1)}/${d.getFullYear()}, ${dois(d.getHours())}:${dois(d.getMinutes())}:${dois(d.getSeconds())}`;
+}
+const Sidebar = ({
+  isOpen = true,
+  setIsOpen,
+  menus,
+  groupLabels = {},
+  appTitle,
+  avatar,
+  onLogout,
+  logoutLabel = "Logout",
+  languages,
+  currentLang,
+  onLanguageChange,
+  theme,
+  onThemeChange,
+  themeLabels,
+  footer,
+  deployedAt,
+  deployedAtLabel = "Último deploy"
+}) => {
+  const [isHovered, setIsHovered] = useState(false);
+  const isExpanded = isOpen || isHovered;
+  const GROUPS = Array.from(new Set(menus.map((m) => m.group).filter(Boolean)));
+  const routeGroupMap = Object.fromEntries(
+    menus.filter((m) => m.group).map((m) => [m.to, m.group])
+  );
+  const location = useLocation();
+  const buildCollapsed = (pathname) => {
+    const base = window.innerHeight < 950 ? Object.fromEntries(GROUPS.map((g) => [g, true])) : {};
+    const activeGroup = Object.entries(routeGroupMap).find(([p]) => pathname.includes(p))?.[1];
+    if (activeGroup) base[activeGroup] = false;
+    return base;
+  };
+  const [collapsedGroups, setCollapsedGroups] = useState(
+    () => buildCollapsed(location.pathname)
+  );
+  const toggleGroup = (group) => setCollapsedGroups((prev) => ({ ...prev, [group]: !prev[group] }));
+  const cycleLang = () => {
+    if (!languages?.length || !onLanguageChange) return;
+    const idx = languages.findIndex((l) => l.code === currentLang);
+    const next = languages[(idx + 1) % languages.length];
+    if (next) onLanguageChange(next.code);
+  };
+  const themeOptions = [
+    { val: "light", Icon: Sun, label: themeLabels?.light ?? "Light" },
+    { val: "dark", Icon: Moon, label: themeLabels?.dark ?? "Dark" },
+    { val: "system", Icon: Monitor, label: themeLabels?.system ?? "System" }
+  ];
+  const ThemeIcon = theme === "light" ? Sun : theme === "dark" ? Moon : Monitor;
+  const cycleTheme = () => {
+    if (!onThemeChange) return;
+    const order = ["light", "dark", "system"];
+    const idx = order.indexOf(theme ?? "system");
+    onThemeChange(order[(idx + 1) % order.length]);
+  };
+  useEffect(() => {
+    const onResize = () => setCollapsedGroups(buildCollapsed(location.pathname));
+    window.addEventListener("resize", onResize);
+    return () => window.removeEventListener("resize", onResize);
+  }, [location.pathname]);
+  useEffect(() => {
+    const activeGroup = Object.entries(routeGroupMap).find(
+      ([p]) => location.pathname.includes(p)
+    )?.[1];
+    if (activeGroup) setCollapsedGroups((prev) => ({ ...prev, [activeGroup]: false }));
+  }, [location.pathname]);
+  return /* @__PURE__ */ jsxs(
+    "aside",
+    {
+      onMouseEnter: () => !isOpen && setIsHovered(true),
+      onMouseLeave: () => setIsHovered(false),
+      className: `bg-proef-navy text-white h-screen flex flex-col fixed left-0 top-0 z-40 transition-all duration-300 border-r border-white/10 overflow-hidden ${isExpanded ? "w-64 translate-x-0" : "w-20 sm:translate-x-0 -translate-x-full"}`,
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: `px-4 flex flex-row items-center h-16 ${isExpanded ? "justify-between" : "justify-center"}`, children: [
+          isExpanded && /* @__PURE__ */ jsxs("div", { className: "flex flex-col pl-2", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ jsx("span", { className: "text-3xl font-black text-white tracking-tighter", children: "proef" }),
+              /* @__PURE__ */ jsx("div", { className: "w-2 h-2 rounded-full bg-proef-turquoise mt-3 animate-pulse" })
+            ] }),
+            appTitle && /* @__PURE__ */ jsx("span", { className: "text-[10px] font-black uppercase tracking-[0.3em] text-white/50 mt-1 pl-1", children: appTitle })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+            avatar && /* @__PURE__ */ jsx("div", { className: "cursor-help flex-shrink-0", children: avatar }),
+            setIsOpen && isExpanded && // isOpen: fixa → colapsa (ChevronLeft). Colapsada+hover: fixa de volta (ChevronRight).
+            /* @__PURE__ */ jsx("button", { onClick: () => setIsOpen(!isOpen), title: isOpen ? void 0 : "Fixar", className: "appearance-none border-0 cursor-pointer text-white/40 hover:text-white transition-colors p-1.5 bg-white/5 rounded-lg hover:bg-white/10", children: isOpen ? /* @__PURE__ */ jsx(ChevronLeft, { size: 16 }) : /* @__PURE__ */ jsx(ChevronRight, { size: 16 }) })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx("nav", { className: "flex-1 overflow-y-auto overflow-x-hidden pt-2 transition-opacity duration-300", children: menus.map((item, i) => {
+          const prevGroup = menus[i - 1]?.group;
+          const currGroup = item.group;
+          const showGroupHeader = currGroup && currGroup !== prevGroup;
+          const isGroupCollapsed = !!currGroup && !!collapsedGroups[currGroup];
+          return /* @__PURE__ */ jsxs(Fragment, { children: [
+            showGroupHeader && isExpanded && /* @__PURE__ */ jsxs("button", { onClick: () => toggleGroup(currGroup), className: "w-full px-6 pt-5 pb-1.5 text-left group/grp appearance-none bg-transparent border-0 cursor-pointer", children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+                /* @__PURE__ */ jsx("span", { className: "text-[9px] font-black uppercase tracking-[0.25em] text-white/30 group-hover/grp:text-white/50 transition-colors", children: groupLabels[currGroup] ?? currGroup }),
+                /* @__PURE__ */ jsx(ChevronDown, { size: 10, className: `text-white/30 group-hover/grp:text-white/50 transition-all ${isGroupCollapsed ? "-rotate-90" : ""}` })
+              ] }),
+              /* @__PURE__ */ jsx("div", { className: "mt-1 h-px bg-white/10" })
+            ] }),
+            showGroupHeader && !isExpanded && /* @__PURE__ */ jsx("div", { className: "mx-auto w-8 my-3 h-px bg-white/15" }),
+            !isGroupCollapsed && item.external && /* @__PURE__ */ jsxs(
+              "a",
+              {
+                href: item.to,
+                target: "_blank",
+                rel: "noreferrer",
+                title: !isExpanded ? item.label : void 0,
+                onClick: () => {
+                  if (window.innerWidth < 640 && setIsOpen) setIsOpen(false);
+                },
+                className: `
+                                        flex items-center gap-4 transition-all duration-300 rounded-lg mx-2 no-underline
+                                        ${isExpanded ? "px-6 py-2.5" : "px-0 py-2.5 justify-center"}
+                                        text-white/50 hover:bg-white/5 hover:text-white
+                                    `,
+                children: [
+                  /* @__PURE__ */ jsx("div", { className: "relative flex-shrink-0", children: /* @__PURE__ */ jsx(item.icon, { size: 20 }) }),
+                  isExpanded && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 flex-1 min-w-0", children: [
+                    /* @__PURE__ */ jsx("span", { className: "text-sm font-semibold truncate", children: item.label }),
+                    /* @__PURE__ */ jsx(ExternalLink, { size: 12, className: "ml-auto flex-shrink-0 text-white/30" })
+                  ] })
+                ]
+              }
+            ),
+            !isGroupCollapsed && !item.external && /* @__PURE__ */ jsx(
+              NavLink,
+              {
+                to: item.to,
+                end: item.end ?? item.to === "/",
+                title: !isExpanded ? item.label : void 0,
+                onClick: () => {
+                  if (window.innerWidth < 640 && setIsOpen) setIsOpen(false);
+                },
+                className: ({ isActive }) => `
+                                        flex items-center gap-4 transition-all duration-300 rounded-lg mx-2
+                                        ${isExpanded ? "px-6 py-2.5" : "px-0 py-2.5 justify-center"}
+                                        ${isActive ? "bg-proef-turquoise/15 text-proef-turquoise font-semibold" : "text-white/50 hover:bg-white/5 hover:text-white"}
+                                    `,
+                children: ({ isActive }) => /* @__PURE__ */ jsxs(Fragment$1, { children: [
+                  /* @__PURE__ */ jsxs("div", { className: "relative flex-shrink-0", children: [
+                    /* @__PURE__ */ jsx(item.icon, { size: 20, className: isActive ? "text-proef-turquoise drop-shadow-[0_0_6px_rgba(0,230,200,0.6)]" : "" }),
+                    item.badge != null && item.badge > 0 && !isExpanded && /* @__PURE__ */ jsx("span", { className: "absolute -top-1 -right-1 w-2 h-2 rounded-full bg-amber-400" })
+                  ] }),
+                  isExpanded && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 flex-1 min-w-0", children: [
+                    /* @__PURE__ */ jsx("span", { className: "text-sm font-semibold truncate", children: item.label }),
+                    item.badge != null && item.badge > 0 && /* @__PURE__ */ jsx("span", { className: "ml-auto flex-shrink-0 bg-amber-400 text-proef-navy text-[10px] font-black rounded-full px-1.5 py-0.5 min-w-[18px] text-center leading-none", children: item.badge })
+                  ] })
+                ] })
+              }
+            )
+          ] }, item.to);
+        }) }),
+        /* @__PURE__ */ jsxs("div", { className: `mt-auto border-t border-white/10 px-2 py-3 ${isExpanded ? "space-y-2" : "flex flex-col items-center gap-3"}`, children: [
+          footer && /* @__PURE__ */ jsx("div", { className: isExpanded ? "" : "w-full flex justify-center", children: footer(isExpanded) }),
+          onThemeChange && (isExpanded ? /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx("p", { className: "px-1 pb-1 text-[8px] font-black uppercase tracking-[0.25em] text-white/30", children: themeLabels?.label ?? "Theme" }),
+            /* @__PURE__ */ jsx("div", { className: "grid grid-cols-3 gap-1 p-1 bg-white/5 rounded-lg border border-white/5", children: themeOptions.map((opt) => /* @__PURE__ */ jsxs(
+              "button",
+              {
+                onClick: () => onThemeChange(opt.val),
+                title: opt.label,
+                "aria-pressed": theme === opt.val,
+                className: `appearance-none bg-transparent border-0 cursor-pointer flex flex-col items-center gap-1 py-1.5 rounded-md text-[8px] font-black uppercase tracking-wider transition-all ${theme === opt.val ? "bg-proef-turquoise/15 text-proef-turquoise" : "text-white/40 hover:text-white/70 hover:bg-white/5"}`,
+                children: [
+                  /* @__PURE__ */ jsx(opt.Icon, { size: 14 }),
+                  opt.label
+                ]
+              },
+              opt.val
+            )) })
+          ] }) : /* @__PURE__ */ jsx("button", { onClick: cycleTheme, title: themeLabels?.label ?? "Theme", className: "appearance-none bg-transparent border-0 cursor-pointer p-2 text-white/30 hover:text-proef-turquoise transition-colors rounded-lg hover:bg-white/5", children: /* @__PURE__ */ jsx(ThemeIcon, { size: 18 }) })),
+          languages && languages.length > 0 && (isExpanded ? /* @__PURE__ */ jsx("div", { className: "flex gap-1", children: languages.map((l) => /* @__PURE__ */ jsx(
+            "button",
+            {
+              onClick: () => onLanguageChange?.(l.code),
+              className: `appearance-none bg-transparent cursor-pointer flex-1 py-1.5 text-[10px] font-black uppercase tracking-widest border transition-all rounded-md ${currentLang === l.code ? "text-proef-turquoise border-proef-turquoise/40" : "text-white/40 border-white/5 hover:text-white hover:border-white/20"}`,
+              children: l.label
+            },
+            l.code
+          )) }) : /* @__PURE__ */ jsx("div", { className: "flex justify-center", children: /* @__PURE__ */ jsx("button", { onClick: cycleLang, title: currentLang?.toUpperCase(), className: "appearance-none bg-transparent border-0 cursor-pointer p-2 text-white/30 hover:text-proef-turquoise transition-colors rounded-lg hover:bg-white/5", children: /* @__PURE__ */ jsx(Globe, { size: 18 }) }) })),
+          isExpanded ? /* @__PURE__ */ jsx("button", { onClick: () => onLogout?.(), className: "appearance-none bg-transparent cursor-pointer w-full text-center py-2.5 text-[10px] font-black uppercase tracking-widest text-white/40 hover:text-proef-turquoise transition-all border border-white/5 hover:border-proef-turquoise/30", children: logoutLabel }) : /* @__PURE__ */ jsx("div", { className: "flex justify-center", children: /* @__PURE__ */ jsx("button", { onClick: () => onLogout?.(), title: logoutLabel, className: "appearance-none bg-transparent border-0 cursor-pointer p-2 text-white/30 hover:text-proef-turquoise transition-colors rounded-lg hover:bg-white/5", children: /* @__PURE__ */ jsx(LogOut, { size: 18 }) }) }),
+          deployedAt != null && isExpanded && /* @__PURE__ */ jsx("div", { title: deployedAtLabel, className: "text-center text-[10px] tabular-nums text-white/25 select-text", children: formatarDeploy(deployedAt) })
+        ] })
+      ]
+    }
+  );
+};
+export {
+  Sidebar as default
+};
+//# sourceMappingURL=Sidebar.js.map

package/dist/esm/legacy/components/layout/Sidebar/Sidebar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Sidebar.js","sources":["../../../../../../src/legacy/components/layout/Sidebar/Sidebar.tsx"],"sourcesContent":["import React, { useState, Fragment, useEffect } from 'react'\r\nimport { NavLink, useLocation } from 'react-router-dom'\r\n\r\n// ── Inline icons (no lucide-react dependency in common-ui) ────────────────\r\ntype IconProps = { size?: number; className?: string }\r\n\r\nconst ChevronLeft = ({ size = 24, className }: IconProps) => (\r\n    <svg xmlns=\"http://www.w3.org/2000/svg\" width={size} height={size} viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" className={className}>\r\n        <path d=\"m15 18-6-6 6-6\" />\r\n    </svg>\r\n)\r\n\r\nconst ChevronRight = ({ size = 24, className }: IconProps) => (\r\n    <svg xmlns=\"http://www.w3.org/2000/svg\" width={size} height={size} viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" className={className}>\r\n        <path d=\"m9 18 6-6-6-6\" />\r\n    </svg>\r\n)\r\n\r\nconst ChevronDown = ({ size = 24, className }: IconProps) => (\r\n    <svg xmlns=\"http://www.w3.org/2000/svg\" width={size} height={size} viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" className={className}>\r\n        <path d=\"m6 9 6 6 6-6\" />\r\n    </svg>\r\n)\r\n\r\nconst ExternalLink = ({ size = 24, className }: IconProps) => (\r\n    <svg xmlns=\"http://www.w3.org/2000/svg\" width={size} height={size} viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" className={className}>\r\n        <path d=\"M15 3h6v6\" />\r\n        <path d=\"M10 14 21 3\" />\r\n        <path d=\"M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6\" />\r\n    </svg>\r\n)\r\n\r\nconst LogOut = ({ size = 24, className }: IconProps) => (\r\n    <svg xmlns=\"http://www.w3.org/2000/svg\" width={size} height={size} viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" className={className}>\r\n        <path d=\"M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4\" />\r\n        <polyline points=\"16 17 21 12 16 7\" />\r\n        <line x1=\"21\" x2=\"9\" y1=\"12\" y2=\"12\" />\r\n    </svg>\r\n)\r\n\r\nconst Globe = ({ size = 24, className }: IconProps) => (\r\n    <svg xmlns=\"http://www.w3.org/2000/svg\" width={size} height={size} viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" className={className}>\r\n        <circle cx=\"12\" cy=\"12\" r=\"10\" />\r\n        <path d=\"M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z\" />\r\n        <path d=\"M2 12h20\" />\r\n    </svg>\r\n)\r\n\r\nconst Sun = ({ size = 24, className }: IconProps) => (\r\n    <svg xmlns=\"http://www.w3.org/2000/svg\" width={size} height={size} viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" className={className}>\r\n        <circle cx=\"12\" cy=\"12\" r=\"4\" />\r\n        <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\" />\r\n    </svg>\r\n)\r\n\r\nconst Moon = ({ size = 24, className }: IconProps) => (\r\n    <svg xmlns=\"http://www.w3.org/2000/svg\" width={size} height={size} viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" className={className}>\r\n        <path d=\"M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9z\" />\r\n    </svg>\r\n)\r\n\r\nconst Monitor = ({ size = 24, className }: IconProps) => (\r\n    <svg xmlns=\"http://www.w3.org/2000/svg\" width={size} height={size} viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" className={className}>\r\n        <rect width=\"20\" height=\"14\" x=\"2\" y=\"3\" rx=\"2\" />\r\n        <path d=\"M8 21h8M12 17v4\" />\r\n    </svg>\r\n)\r\n\r\n/** @deprecated Legacy — não usar em código novo. Ver Storybook › Legacy. */\r\nexport type SidebarTheme = 'light' | 'dark' | 'system'\r\n\r\n/** @deprecated Legacy — não usar em código novo. Ver Storybook › Legacy. */\r\nexport interface SidebarLanguage {\r\n    code: string\r\n    label: string\r\n}\r\n\r\n/** @deprecated Legacy — não usar em código novo. Ver Storybook › Legacy. */\r\nexport interface SidebarMenuItem {\r\n    to: string\r\n    icon: React.ComponentType<{ size?: number; className?: string }>\r\n    label: string\r\n    group?: string\r\n    end?: boolean\r\n    /** Contador opcional (ex: aprovações pendentes). Igual ao badge do Sidebar dos Tickets. */\r\n    badge?: number\r\n    /**\r\n     * Destino fora da aplicação (SharePoint, portal antigo, etc.): abre em\r\n     * separador novo em vez de navegar pelo router. Sem isto, um URL absoluto\r\n     * ia parar ao NavLink, que o trata como rota interna e dá página em branco.\r\n     */\r\n    external?: boolean\r\n}\r\n\r\n/** @deprecated Legacy — não usar em código novo. Ver Storybook › Legacy. */\r\nexport interface SidebarProps {\r\n    isOpen?: boolean\r\n    setIsOpen?: (isOpen: boolean) => void\r\n    menus: SidebarMenuItem[]\r\n    groupLabels?: Record<string, string>\r\n    appTitle?: string\r\n    avatar?: React.ReactNode\r\n    onLogout?: () => void\r\n    logoutLabel?: string\r\n    /** Selector de idioma no rodapé da sidebar. Só aparece se `languages` vier. */\r\n    languages?: SidebarLanguage[]\r\n    currentLang?: string\r\n    onLanguageChange?: (code: string) => void\r\n    /** Selector de tema (light/dark/system) no rodapé. Só aparece se `onThemeChange` vier.\r\n     * O common-ui só renderiza a UI + chama o callback — aplicar a classe `.dark`\r\n     * no <html> é responsabilidade da app (o seu gestor de tema). */\r\n    theme?: SidebarTheme\r\n    onThemeChange?: (theme: SidebarTheme) => void\r\n    themeLabels?: { label?: string; light?: string; dark?: string; system?: string }\r\n    /** Slot extra no topo do rodapé (acima de tema/idioma/logout). Render-prop\r\n     * com o estado expandido → ex: filtro global (AgendamentoEDP → AoFilterDropdown). */\r\n    footer?: (isExpanded: boolean) => React.ReactNode\r\n    /**\r\n     * Quando este build foi feito — aparece por baixo do logout.\r\n     *\r\n     * Serve para responder a \"isto já tem a correcção?\": diz a idade do código\r\n     * que o browser está mesmo a correr, e não a que o servidor tem. A app é que\r\n     * decide a QUEM o mostra (tipicamente só admins) — passar a prop é mostrá-la.\r\n     */\r\n    deployedAt?: string | number | Date\r\n    /** Tooltip do rodapé, para a app o traduzir. */\r\n    deployedAtLabel?: string\r\n}\r\n\r\n/**\r\n * `DD/MM/AAAA, HH:MM:SS` na hora local de quem lê.\r\n *\r\n * Escrito à mão e não com `toLocaleString`: o formato do rodapé não pode\r\n * mudar com a lingua escolhida no selector mesmo ao lado — é um carimbo, e\r\n * lê-se sempre da mesma maneira. Data inválida não mostra nada.\r\n */\r\nfunction formatarDeploy(valor: string | number | Date): string {\r\n    const d = valor instanceof Date ? valor : new Date(valor)\r\n    if (Number.isNaN(d.getTime())) return ''\r\n    const dois = (n: number) => String(n).padStart(2, '0')\r\n    return `${dois(d.getDate())}/${dois(d.getMonth() + 1)}/${d.getFullYear()}, ${dois(d.getHours())}:${dois(d.getMinutes())}:${dois(d.getSeconds())}`\r\n}\r\n\r\n/** @deprecated Legacy — não usar em código novo. Ver Storybook › Legacy. */\r\nconst Sidebar = ({\r\n    isOpen = true,\r\n    setIsOpen,\r\n    menus,\r\n    groupLabels = {},\r\n    appTitle,\r\n    avatar,\r\n    onLogout,\r\n    logoutLabel = 'Logout',\r\n    languages,\r\n    currentLang,\r\n    onLanguageChange,\r\n    theme,\r\n    onThemeChange,\r\n    themeLabels,\r\n    footer,\r\n    deployedAt,\r\n    deployedAtLabel = 'Último deploy',\r\n}: SidebarProps) => {\r\n    const [isHovered, setIsHovered] = useState(false)\r\n    const isExpanded = isOpen || isHovered\r\n\r\n    // ── Nav groups — derived from the injected menus ─────────────────────────\r\n    const GROUPS = Array.from(new Set(menus.map((m) => m.group).filter(Boolean))) as string[]\r\n    const routeGroupMap: Record<string, string> = Object.fromEntries(\r\n        menus.filter((m) => m.group).map((m) => [m.to, m.group as string])\r\n    )\r\n\r\n    const location = useLocation()\r\n\r\n    const buildCollapsed = (pathname: string) => {\r\n        const base =\r\n            window.innerHeight < 950\r\n                ? Object.fromEntries(GROUPS.map((g) => [g, true]))\r\n                : ({} as Record<string, boolean>)\r\n        const activeGroup = Object.entries(routeGroupMap).find(([p]) => pathname.includes(p))?.[1]\r\n        if (activeGroup) base[activeGroup] = false\r\n        return base\r\n    }\r\n\r\n    const [collapsedGroups, setCollapsedGroups] = useState<Record<string, boolean>>(() =>\r\n        buildCollapsed(location.pathname)\r\n    )\r\n    const toggleGroup = (group: string) =>\r\n        setCollapsedGroups((prev) => ({ ...prev, [group]: !prev[group] }))\r\n\r\n    // Colapsada: 1 botão que roda p/ o próximo idioma (não há espaço p/ segmentos).\r\n    const cycleLang = () => {\r\n        if (!languages?.length || !onLanguageChange) return\r\n        const idx = languages.findIndex((l) => l.code === currentLang)\r\n        const next = languages[(idx + 1) % languages.length]\r\n        if (next) onLanguageChange(next.code)\r\n    }\r\n\r\n    // Seletor de tema (light/dark/system) — derivado do Sidebar do Tickets.\r\n    const themeOptions: { val: SidebarTheme; Icon: React.ComponentType<IconProps>; label: string }[] = [\r\n        { val: 'light', Icon: Sun, label: themeLabels?.light ?? 'Light' },\r\n        { val: 'dark', Icon: Moon, label: themeLabels?.dark ?? 'Dark' },\r\n        { val: 'system', Icon: Monitor, label: themeLabels?.system ?? 'System' },\r\n    ]\r\n    const ThemeIcon = theme === 'light' ? Sun : theme === 'dark' ? Moon : Monitor\r\n    const cycleTheme = () => {\r\n        if (!onThemeChange) return\r\n        const order: SidebarTheme[] = ['light', 'dark', 'system']\r\n        const idx = order.indexOf((theme ?? 'system') as SidebarTheme)\r\n        onThemeChange(order[(idx + 1) % order.length])\r\n    }\r\n\r\n    useEffect(() => {\r\n        const onResize = () => setCollapsedGroups(buildCollapsed(location.pathname))\r\n        window.addEventListener('resize', onResize)\r\n        return () => window.removeEventListener('resize', onResize)\r\n        // eslint-disable-next-line react-hooks/exhaustive-deps\r\n    }, [location.pathname])\r\n\r\n    useEffect(() => {\r\n        const activeGroup = Object.entries(routeGroupMap).find(([p]) =>\r\n            location.pathname.includes(p)\r\n        )?.[1]\r\n        if (activeGroup) setCollapsedGroups((prev) => ({ ...prev, [activeGroup]: false }))\r\n        // eslint-disable-next-line react-hooks/exhaustive-deps\r\n    }, [location.pathname])\r\n\r\n    return (\r\n        <aside\r\n            onMouseEnter={() => !isOpen && setIsHovered(true)}\r\n            onMouseLeave={() => setIsHovered(false)}\r\n            className={`bg-proef-navy text-white h-screen flex flex-col fixed left-0 top-0 z-40 transition-all duration-300 border-r border-white/10 overflow-hidden ${isExpanded ? 'w-64 translate-x-0' : 'w-20 sm:translate-x-0 -translate-x-full'}`}>\r\n\r\n            <div className={`px-4 flex flex-row items-center h-16 ${isExpanded ? 'justify-between' : 'justify-center'}`}>\r\n                {isExpanded && (\r\n                    <div className=\"flex flex-col pl-2\">\r\n                        <div className=\"flex items-center gap-2\">\r\n                            <span className=\"text-3xl font-black text-white tracking-tighter\">proef</span>\r\n                            <div className=\"w-2 h-2 rounded-full bg-proef-turquoise mt-3 animate-pulse\" />\r\n                        </div>\r\n                        {appTitle && (\r\n                            <span className=\"text-[10px] font-black uppercase tracking-[0.3em] text-white/50 mt-1 pl-1\">{appTitle}</span>\r\n                        )}\r\n                    </div>\r\n                )}\r\n                <div className=\"flex items-center gap-2\">\r\n                    {avatar && (\r\n                        <div className=\"cursor-help flex-shrink-0\">{avatar}</div>\r\n                    )}\r\n                    {setIsOpen && isExpanded && (\r\n                        // isOpen: fixa → colapsa (ChevronLeft). Colapsada+hover: fixa de volta (ChevronRight).\r\n                        <button onClick={() => setIsOpen(!isOpen)} title={isOpen ? undefined : 'Fixar'} className=\"appearance-none border-0 cursor-pointer text-white/40 hover:text-white transition-colors p-1.5 bg-white/5 rounded-lg hover:bg-white/10\">\r\n                            {isOpen ? <ChevronLeft size={16} /> : <ChevronRight size={16} />}\r\n                        </button>\r\n                    )}\r\n                </div>\r\n            </div>\r\n\r\n            <nav className=\"flex-1 overflow-y-auto overflow-x-hidden pt-2 transition-opacity duration-300\">\r\n                {menus.map((item, i) => {\r\n                    const prevGroup = menus[i - 1]?.group\r\n                    const currGroup = item.group\r\n                    const showGroupHeader = currGroup && currGroup !== prevGroup\r\n                    const isGroupCollapsed = !!currGroup && !!collapsedGroups[currGroup]\r\n\r\n                    return (\r\n                        <Fragment key={item.to}>\r\n                            {showGroupHeader && isExpanded && (\r\n                                <button onClick={() => toggleGroup(currGroup!)} className=\"w-full px-6 pt-5 pb-1.5 text-left group/grp appearance-none bg-transparent border-0 cursor-pointer\">\r\n                                    <div className=\"flex items-center justify-between\">\r\n                                        <span className=\"text-[9px] font-black uppercase tracking-[0.25em] text-white/30 group-hover/grp:text-white/50 transition-colors\">{groupLabels[currGroup!] ?? currGroup}</span>\r\n                                        <ChevronDown size={10} className={`text-white/30 group-hover/grp:text-white/50 transition-all ${isGroupCollapsed ? '-rotate-90' : ''}`} />\r\n                                    </div>\r\n                                    <div className=\"mt-1 h-px bg-white/10\" />\r\n                                </button>\r\n                            )}\r\n                            {showGroupHeader && !isExpanded && <div className=\"mx-auto w-8 my-3 h-px bg-white/15\" />}\r\n                            {!isGroupCollapsed && item.external && (\r\n                                <a\r\n                                    href={item.to}\r\n                                    target=\"_blank\"\r\n                                    rel=\"noreferrer\"\r\n                                    title={!isExpanded ? item.label : undefined}\r\n                                    onClick={() => { if (window.innerWidth < 640 && setIsOpen) setIsOpen(false) }}\r\n                                    className={`\r\n                                        flex items-center gap-4 transition-all duration-300 rounded-lg mx-2 no-underline\r\n                                        ${isExpanded ? 'px-6 py-2.5' : 'px-0 py-2.5 justify-center'}\r\n                                        text-white/50 hover:bg-white/5 hover:text-white\r\n                                    `}\r\n                                >\r\n                                    <div className=\"relative flex-shrink-0\">\r\n                                        <item.icon size={20} />\r\n                                    </div>\r\n                                    {isExpanded && (\r\n                                        <div className=\"flex items-center gap-1.5 flex-1 min-w-0\">\r\n                                            <span className=\"text-sm font-semibold truncate\">{item.label}</span>\r\n                                            <ExternalLink size={12} className=\"ml-auto flex-shrink-0 text-white/30\" />\r\n                                        </div>\r\n                                    )}\r\n                                </a>\r\n                            )}\r\n                            {!isGroupCollapsed && !item.external && (\r\n                                <NavLink\r\n                                    to={item.to}\r\n                                    end={item.end ?? item.to === '/'}\r\n                                    title={!isExpanded ? item.label : undefined}\r\n                                    onClick={() => { if (window.innerWidth < 640 && setIsOpen) setIsOpen(false) }}\r\n                                    className={({ isActive }) => `\r\n                                        flex items-center gap-4 transition-all duration-300 rounded-lg mx-2\r\n                                        ${isExpanded ? 'px-6 py-2.5' : 'px-0 py-2.5 justify-center'}\r\n                                        ${isActive ? 'bg-proef-turquoise/15 text-proef-turquoise font-semibold' : 'text-white/50 hover:bg-white/5 hover:text-white'}\r\n                                    `}\r\n                                >\r\n                                    {({ isActive }) => (\r\n                                        <>\r\n                                            <div className=\"relative flex-shrink-0\">\r\n                                                <item.icon size={20} className={isActive ? 'text-proef-turquoise drop-shadow-[0_0_6px_rgba(0,230,200,0.6)]' : ''} />\r\n                                                {item.badge != null && item.badge > 0 && !isExpanded && (\r\n                                                    <span className=\"absolute -top-1 -right-1 w-2 h-2 rounded-full bg-amber-400\" />\r\n                                                )}\r\n                                            </div>\r\n                                            {isExpanded && (\r\n                                                <div className=\"flex items-center gap-1.5 flex-1 min-w-0\">\r\n                                                    <span className=\"text-sm font-semibold truncate\">{item.label}</span>\r\n                                                    {item.badge != null && item.badge > 0 && (\r\n                                                        <span className=\"ml-auto flex-shrink-0 bg-amber-400 text-proef-navy text-[10px] font-black rounded-full px-1.5 py-0.5 min-w-[18px] text-center leading-none\">\r\n                                                            {item.badge}\r\n                                                        </span>\r\n                                                    )}\r\n                                                </div>\r\n                                            )}\r\n                                        </>\r\n                                    )}\r\n                                </NavLink>\r\n                            )}\r\n                        </Fragment>\r\n                    )\r\n                })}\r\n            </nav>\r\n\r\n            <div className={`mt-auto border-t border-white/10 px-2 py-3 ${isExpanded ? 'space-y-2' : 'flex flex-col items-center gap-3'}`}>\r\n                {/* Slot extra (ex: filtro global da app). Recebe o estado expandido. */}\r\n                {footer && <div className={isExpanded ? '' : 'w-full flex justify-center'}>{footer(isExpanded)}</div>}\r\n\r\n                {/* Seletor de tema (opcional). Expandida: grid Light/Dark/System; colapsada: 1 ícone que roda. */}\r\n                {onThemeChange && (\r\n                    isExpanded ? (\r\n                        <div>\r\n                            <p className=\"px-1 pb-1 text-[8px] font-black uppercase tracking-[0.25em] text-white/30\">{themeLabels?.label ?? 'Theme'}</p>\r\n                            <div className=\"grid grid-cols-3 gap-1 p-1 bg-white/5 rounded-lg border border-white/5\">\r\n                                {themeOptions.map((opt) => (\r\n                                    <button\r\n                                        key={opt.val}\r\n                                        onClick={() => onThemeChange(opt.val)}\r\n                                        title={opt.label}\r\n                                        aria-pressed={theme === opt.val}\r\n                                        className={`appearance-none bg-transparent border-0 cursor-pointer flex flex-col items-center gap-1 py-1.5 rounded-md text-[8px] font-black uppercase tracking-wider transition-all ${theme === opt.val ? 'bg-proef-turquoise/15 text-proef-turquoise' : 'text-white/40 hover:text-white/70 hover:bg-white/5'}`}\r\n                                    >\r\n                                        <opt.Icon size={14} />\r\n                                        {opt.label}\r\n                                    </button>\r\n                                ))}\r\n                            </div>\r\n                        </div>\r\n                    ) : (\r\n                        <button onClick={cycleTheme} title={themeLabels?.label ?? 'Theme'} className=\"appearance-none bg-transparent border-0 cursor-pointer p-2 text-white/30 hover:text-proef-turquoise transition-colors rounded-lg hover:bg-white/5\">\r\n                            <ThemeIcon size={18} />\r\n                        </button>\r\n                    )\r\n                )}\r\n\r\n                {/* Selector de idioma (opcional). Expandida: segmentos PT|EN; colapsada: 1 globo que roda. */}\r\n                {languages && languages.length > 0 && (\r\n                    isExpanded ? (\r\n                        <div className=\"flex gap-1\">\r\n                            {languages.map((l) => (\r\n                                <button\r\n                                    key={l.code}\r\n                                    onClick={() => onLanguageChange?.(l.code)}\r\n                                    className={`appearance-none bg-transparent cursor-pointer flex-1 py-1.5 text-[10px] font-black uppercase tracking-widest border transition-all rounded-md ${currentLang === l.code ? 'text-proef-turquoise border-proef-turquoise/40' : 'text-white/40 border-white/5 hover:text-white hover:border-white/20'}`}\r\n                                >\r\n                                    {l.label}\r\n                                </button>\r\n                            ))}\r\n                        </div>\r\n                    ) : (\r\n                        <div className=\"flex justify-center\">\r\n                            <button onClick={cycleLang} title={currentLang?.toUpperCase()} className=\"appearance-none bg-transparent border-0 cursor-pointer p-2 text-white/30 hover:text-proef-turquoise transition-colors rounded-lg hover:bg-white/5\">\r\n                                <Globe size={18} />\r\n                            </button>\r\n                        </div>\r\n                    )\r\n                )}\r\n\r\n                {isExpanded ? (\r\n                    <button onClick={() => onLogout?.()} className=\"appearance-none bg-transparent cursor-pointer w-full text-center py-2.5 text-[10px] font-black uppercase tracking-widest text-white/40 hover:text-proef-turquoise transition-all border border-white/5 hover:border-proef-turquoise/30\">\r\n                        {logoutLabel}\r\n                    </button>\r\n                ) : (\r\n                    <div className=\"flex justify-center\">\r\n                        <button onClick={() => onLogout?.()} title={logoutLabel} className=\"appearance-none bg-transparent border-0 cursor-pointer p-2 text-white/30 hover:text-proef-turquoise transition-colors rounded-lg hover:bg-white/5\">\r\n                            <LogOut size={18} />\r\n                        </button>\r\n                    </div>\r\n                )}\r\n\r\n                {/* Só com a sidebar aberta: no carril de 20px isto ficava ilegível\r\n                    ou cortado, e é informação de consulta, não um controlo. */}\r\n                {deployedAt != null && isExpanded && (\r\n                    <div title={deployedAtLabel} className=\"text-center text-[10px] tabular-nums text-white/25 select-text\">\r\n                        {formatarDeploy(deployedAt)}\r\n                    </div>\r\n                )}\r\n            </div>\r\n        </aside>\r\n    )\r\n}\r\n\r\nexport default Sidebar\r\n"],"names":["Fragment"],"mappings":"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"}

package/dist/esm/legacy/components/layout/Spinner/Spinner.css

@@ -0,0 +1,10 @@
+.cui-spinner {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+}
+.cui-spinner .cui-icon {
+  font-size: 1.5rem;
+  color: var(--dark-blue);
+}

package/dist/esm/legacy/components/layout/Spinner/Spinner.js

@@ -0,0 +1,19 @@
+import { jsx } from "react/jsx-runtime";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faSpinner } from "@fortawesome/free-solid-svg-icons";
+import './Spinner.css';/* empty css             */
+const Spinner = () => {
+  return /* @__PURE__ */ jsx("div", { className: "cui-spinner", children: /* @__PURE__ */ jsx(
+    FontAwesomeIcon,
+    {
+      icon: faSpinner,
+      className: "cui-icon",
+      spin: true,
+      "aria-hidden": "true"
+    }
+  ) });
+};
+export {
+  Spinner as default
+};
+//# sourceMappingURL=Spinner.js.map

package/dist/esm/legacy/components/layout/Spinner/Spinner.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Spinner.js","sources":["../../../../../../src/legacy/components/layout/Spinner/Spinner.tsx"],"sourcesContent":["import React from 'react'\r\n\r\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome'\r\nimport { faSpinner } from '@fortawesome/free-solid-svg-icons'\r\nimport './Spinner.scss'\r\n\r\n/** @deprecated Legacy — não usar em código novo. Ver Storybook › Legacy. */\r\nconst Spinner: React.FC = () => {\r\n  return (\r\n    <div className=\"cui-spinner\">\r\n      <FontAwesomeIcon\r\n        icon={faSpinner}\r\n        className={'cui-icon'}\r\n        spin\r\n        aria-hidden=\"true\"\r\n      />\r\n    </div>\r\n  )\r\n}\r\n\r\nexport default Spinner\r\n"],"names":[],"mappings":";;;;AAOA,MAAM,UAAoB,MAAM;AAC9B,SACE,oBAAC,OAAA,EAAI,WAAU,eACb,UAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAM;AAAA,MACN,WAAW;AAAA,MACX,MAAI;AAAA,MACJ,eAAY;AAAA,IAAA;AAAA,EAAA,GAEhB;AAEJ;"}

package/dist/esm/legacy/components/layout/TopBar/TopBar.js

@@ -0,0 +1,34 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+const Search = ({ size = 24, className }) => /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className, children: [
+  /* @__PURE__ */ jsx("circle", { cx: "11", cy: "11", r: "8" }),
+  /* @__PURE__ */ jsx("path", { d: "m21 21-4.3-4.3" })
+] });
+const Bell = ({ size = 24, className }) => /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className, children: [
+  /* @__PURE__ */ jsx("path", { d: "M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9" }),
+  /* @__PURE__ */ jsx("path", { d: "M10.3 21a1.94 1.94 0 0 0 3.4 0" })
+] });
+const TopBar = ({ searchPlaceholder, onSearch, right }) => {
+  return /* @__PURE__ */ jsxs("header", { className: "h-16 bg-white border-b border-slate-100 dark:bg-slate-900 dark:border-slate-800 fixed top-0 right-0 left-0 sm:left-64 z-30 flex items-center justify-between px-4 sm:px-12", children: [
+    /* @__PURE__ */ jsx("div", { className: "flex items-center gap-4 flex-1 max-w-xl", children: /* @__PURE__ */ jsxs("div", { className: "relative group w-full", children: [
+      /* @__PURE__ */ jsx(Search, { size: 16, className: "absolute left-0 top-1/2 -translate-y-1/2 text-slate-400 group-focus-within:text-proef-blue transition-colors" }),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          type: "text",
+          placeholder: searchPlaceholder,
+          onChange: (e) => onSearch?.(e.target.value),
+          className: "w-full bg-transparent border-none py-2.5 pl-8 pr-4 text-sm focus:ring-0 outline-none placeholder:text-slate-400 font-medium"
+        }
+      ),
+      /* @__PURE__ */ jsx("div", { className: "absolute bottom-1 left-0 right-4 h-0.5 bg-slate-100 scale-x-0 group-focus-within:scale-x-100 transition-transform origin-left duration-300" })
+    ] }) }),
+    /* @__PURE__ */ jsx("div", { className: "flex items-center gap-4", children: right ?? /* @__PURE__ */ jsxs("button", { className: "relative p-2 text-slate-400 hover:text-proef-navy transition-colors", children: [
+      /* @__PURE__ */ jsx(Bell, { size: 20 }),
+      /* @__PURE__ */ jsx("span", { className: "absolute top-2 right-2 w-1.5 h-1.5 bg-proef-turquoise rounded-full" })
+    ] }) })
+  ] });
+};
+export {
+  TopBar as default
+};
+//# sourceMappingURL=TopBar.js.map

package/dist/esm/legacy/components/layout/TopBar/TopBar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TopBar.js","sources":["../../../../../../src/legacy/components/layout/TopBar/TopBar.tsx"],"sourcesContent":["import React from 'react'\r\n\r\n// ── Inline icons (no lucide-react dependency in common-ui) ────────────────\r\ntype IconProps = { size?: number; className?: string }\r\n\r\nconst Search = ({ size = 24, className }: IconProps) => (\r\n    <svg xmlns=\"http://www.w3.org/2000/svg\" width={size} height={size} viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" className={className}>\r\n        <circle cx=\"11\" cy=\"11\" r=\"8\" />\r\n        <path d=\"m21 21-4.3-4.3\" />\r\n    </svg>\r\n)\r\n\r\nconst Bell = ({ size = 24, className }: IconProps) => (\r\n    <svg xmlns=\"http://www.w3.org/2000/svg\" width={size} height={size} viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" className={className}>\r\n        <path d=\"M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9\" />\r\n        <path d=\"M10.3 21a1.94 1.94 0 0 0 3.4 0\" />\r\n    </svg>\r\n)\r\n\r\n/** @deprecated Legacy — não usar em código novo. Ver Storybook › Legacy. */\r\nexport interface TopBarProps {\r\n    searchPlaceholder?: string\r\n    onSearch?: (value: string) => void\r\n    right?: React.ReactNode\r\n}\r\n\r\n/** @deprecated Legacy — não usar em código novo. Ver Storybook › Legacy. */\r\nconst TopBar = ({ searchPlaceholder, onSearch, right }: TopBarProps) => {\r\n    return (\r\n        <header className=\"h-16 bg-white border-b border-slate-100 dark:bg-slate-900 dark:border-slate-800 fixed top-0 right-0 left-0 sm:left-64 z-30 flex items-center justify-between px-4 sm:px-12\">\r\n            <div className=\"flex items-center gap-4 flex-1 max-w-xl\">\r\n                <div className=\"relative group w-full\">\r\n                    <Search size={16} className=\"absolute left-0 top-1/2 -translate-y-1/2 text-slate-400 group-focus-within:text-proef-blue transition-colors\" />\r\n                    <input\r\n                        type=\"text\"\r\n                        placeholder={searchPlaceholder}\r\n                        onChange={(e) => onSearch?.(e.target.value)}\r\n                        className=\"w-full bg-transparent border-none py-2.5 pl-8 pr-4 text-sm focus:ring-0 outline-none placeholder:text-slate-400 font-medium\"\r\n                    />\r\n                    <div className=\"absolute bottom-1 left-0 right-4 h-0.5 bg-slate-100 scale-x-0 group-focus-within:scale-x-100 transition-transform origin-left duration-300\" />\r\n                </div>\r\n            </div>\r\n            <div className=\"flex items-center gap-4\">\r\n                {right ?? (\r\n                    <button className=\"relative p-2 text-slate-400 hover:text-proef-navy transition-colors\">\r\n                        <Bell size={20} />\r\n                        <span className=\"absolute top-2 right-2 w-1.5 h-1.5 bg-proef-turquoise rounded-full\" />\r\n                    </button>\r\n                )}\r\n            </div>\r\n        </header>\r\n    )\r\n}\r\n\r\nexport default TopBar\r\n"],"names":[],"mappings":";AAKA,MAAM,SAAS,CAAC,EAAE,OAAO,IAAI,UAAA,MACzB,qBAAC,OAAA,EAAI,OAAM,8BAA6B,OAAO,MAAM,QAAQ,MAAM,SAAQ,aAAY,MAAK,QAAO,QAAO,gBAAe,aAAY,KAAI,eAAc,SAAQ,gBAAe,SAAQ,WAClL,UAAA;AAAA,EAAA,oBAAC,YAAO,IAAG,MAAK,IAAG,MAAK,GAAE,KAAI;AAAA,EAC9B,oBAAC,QAAA,EAAK,GAAE,iBAAA,CAAiB;AAAA,GAC7B;AAGJ,MAAM,OAAO,CAAC,EAAE,OAAO,IAAI,UAAA,MACvB,qBAAC,OAAA,EAAI,OAAM,8BAA6B,OAAO,MAAM,QAAQ,MAAM,SAAQ,aAAY,MAAK,QAAO,QAAO,gBAAe,aAAY,KAAI,eAAc,SAAQ,gBAAe,SAAQ,WAClL,UAAA;AAAA,EAAA,oBAAC,QAAA,EAAK,GAAE,4CAAA,CAA4C;AAAA,EACpD,oBAAC,QAAA,EAAK,GAAE,iCAAA,CAAiC;AAAA,GAC7C;AAWJ,MAAM,SAAS,CAAC,EAAE,mBAAmB,UAAU,YAAyB;AACpE,SACI,qBAAC,UAAA,EAAO,WAAU,8KACd,UAAA;AAAA,IAAA,oBAAC,SAAI,WAAU,2CACX,UAAA,qBAAC,OAAA,EAAI,WAAU,yBACX,UAAA;AAAA,MAAA,oBAAC,QAAA,EAAO,MAAM,IAAI,WAAU,gHAA+G;AAAA,MAC3I;AAAA,QAAC;AAAA,QAAA;AAAA,UACG,MAAK;AAAA,UACL,aAAa;AAAA,UACb,UAAU,CAAC,MAAM,WAAW,EAAE,OAAO,KAAK;AAAA,UAC1C,WAAU;AAAA,QAAA;AAAA,MAAA;AAAA,MAEd,oBAAC,OAAA,EAAI,WAAU,6IAAA,CAA6I;AAAA,IAAA,EAAA,CAChK,EAAA,CACJ;AAAA,IACA,oBAAC,SAAI,WAAU,2BACV,mBACG,qBAAC,UAAA,EAAO,WAAU,uEACd,UAAA;AAAA,MAAA,oBAAC,MAAA,EAAK,MAAM,GAAA,CAAI;AAAA,MAChB,oBAAC,QAAA,EAAK,WAAU,qEAAA,CAAqE;AAAA,IAAA,EAAA,CACzF,EAAA,CAER;AAAA,EAAA,GACJ;AAER;"}