npm - @greatapps/common - Versions diffs - 1.1.786 → 1.1.787 - Mend

@greatapps/common 1.1.786 → 1.1.787

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (98) hide show

package/dist/components/layouts/AppMobileNavBar.mjs CHANGED Viewed

@@ -1,8 +1,10 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import Image from "next/image";
+import { useTranslations } from "next-intl";
 import { IconMenu2, IconX } from "@tabler/icons-react";
 import { ProfilePopover } from "./ProfilePopover";
+import { GreatDomainIcon } from "./GreatDomainIcon";
 import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/overlay/Tooltip";
 import { useMobileNavbarSheet } from "../../store/useMobileNavbarSheet";
 import {
@@ -14,10 +16,12 @@ function AppMobileNavBar({
   activeApp,
   onLogoClick,
   onAppIconClick,
+  onDomainIconClick,
   extraLeftSlot,
   menuItems = [],
   showMenuToggle = true
 }) {
+  const translate = useTranslations();
   const { isOpen, toggle } = useMobileNavbarSheet();
   const { whitelabel } = useWhitelabel();
   const isDefaultWl = useIsDefaultWhitelabel();
@@ -25,6 +29,7 @@ function AppMobileNavBar({
   const wlName = whitelabel?.name || "Great";
   const isGappsActive = activeApp === "gapps";
   const isGpagesActive = activeApp === "gpages";
+  const isGdomainActive = activeApp === "gdomain";
   const wlIcon = whitelabel?.secondary_logo ? /* @__PURE__ */ jsx(
     Image,
     {
@@ -65,8 +70,8 @@ function AppMobileNavBar({
     }
   );
   return /* @__PURE__ */ jsxs("div", { className: "fixed top-0 left-0 right-0 flex md:hidden items-center justify-between p-4 bg-white z-50 border-b border-gray-200", children: [
-    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
-      /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 min-w-0", children: [
+      /* @__PURE__ */ jsxs("div", { className: "relative shrink-0", children: [
         /* @__PURE__ */ jsxs(Tooltip, { children: [
           /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
             "div",
@@ -101,7 +106,7 @@ function AppMobileNavBar({
           }
         )
       ] }),
-      /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+      /* @__PURE__ */ jsxs("div", { className: "relative shrink-0", children: [
         /* @__PURE__ */ jsxs(Tooltip, { children: [
           /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
             "div",
@@ -160,9 +165,63 @@ function AppMobileNavBar({
           }
         )
       ] }),
-      extraLeftSlot
+      onDomainIconClick ? /* @__PURE__ */ jsxs("div", { className: "relative shrink-0", children: [
+        /* @__PURE__ */ jsxs(Tooltip, { children: [
+          /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+            "div",
+            {
+              "aria-label": isDefaultWl ? translate("common.layout.navbar.greatDomain") : translate("common.layout.navbar.domains"),
+              className: cn(
+                "size-10 rounded-[10px] flex items-center justify-center border-2 ring-2 transition-colors duration-300",
+                isGdomainActive ? isDefaultWl ? "bg-[#EDE9FE] border-white ring-[#C092FF]" : "border-white ring-transparent" : isDefaultWl ? "hover:bg-gray-100 border-transparent ring-transparent" : "border-transparent ring-transparent",
+                "cursor-pointer"
+              ),
+              style: !isDefaultWl ? {
+                backgroundColor: primaryColor,
+                boxShadow: isGdomainActive ? `0 0 0 2px ${primaryColor}40` : void 0,
+                opacity: !isGdomainActive ? 0.2 : void 0
+              } : void 0,
+              onClick: onDomainIconClick,
+              children: isDefaultWl ? /* @__PURE__ */ jsx(GreatDomainIcon, { active: isGdomainActive }) : /* @__PURE__ */ jsxs(
+                "svg",
+                {
+                  xmlns: "http://www.w3.org/2000/svg",
+                  width: "24",
+                  height: "24",
+                  viewBox: "0 0 24 24",
+                  fill: "none",
+                  stroke: "white",
+                  strokeWidth: "2",
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round",
+                  children: [
+                    /* @__PURE__ */ jsx("path", { d: "M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0" }),
+                    /* @__PURE__ */ jsx("path", { d: "M3.6 9h16.8" }),
+                    /* @__PURE__ */ jsx("path", { d: "M3.6 15h16.8" }),
+                    /* @__PURE__ */ jsx("path", { d: "M11.5 3a17 17 0 0 0 0 18" }),
+                    /* @__PURE__ */ jsx("path", { d: "M12.5 3a17 17 0 0 1 0 18" })
+                  ]
+                }
+              )
+            }
+          ) }),
+          /* @__PURE__ */ jsx(TooltipContent, { side: "bottom", children: isDefaultWl ? translate("common.layout.navbar.greatDomain") : translate("common.layout.navbar.domains") })
+        ] }),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              "absolute -bottom-[17px] left-1/2 -translate-x-1/2 w-5 h-[3px] rounded-t-xl transition-opacity duration-300",
+              isDefaultWl ? "bg-[#984DFF]" : "",
+              isGdomainActive ? "opacity-100" : "opacity-0"
+            ),
+            style: !isDefaultWl ? { backgroundColor: primaryColor } : void 0
+          }
+        )
+      ] }) : null,
+      extraLeftSlot ? /* @__PURE__ */ jsx("div", { className: "min-w-0 shrink [&>*]:max-w-full", children: extraLeftSlot }) : null
     ] }),
-    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 shrink-0", children: [
       /* @__PURE__ */ jsx(
         ProfilePopover,
         {

package/dist/components/layouts/AppMobileNavBar.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../src/components/layouts/AppMobileNavBar.tsx"],"sourcesContent":["\"use client\";\n\nimport { ReactNode } from \"react\";\nimport Image from \"next/image\";\nimport { IconMenu2, IconX } from \"@tabler/icons-react\";\nimport { ProfilePopover } from \"./ProfilePopover\";\nimport { Tooltip, TooltipContent, TooltipTrigger } from \"../ui/overlay/Tooltip\";\nimport { useMobileNavbarSheet } from \"../../store/useMobileNavbarSheet\";\nimport {\n useWhitelabel,\n useIsDefaultWhitelabel,\n} from \"../../providers/whitelabel.provider\";\nimport { cn } from \"../../infra/utils/clsx\";\nimport type { ProfileMenuItem } from \"./ProfilePopover\";\n\nexport interface AppMobileNavBarProps {\n /** Which app is currently active — controls which icon gets the indicator /\n activeApp?: \"gapps\" \| \"gpages\";\n /* Called when the GreatApps logo is clicked /\n onLogoClick?: () => void;\n /* Called when the app icon (e.g. GreatPages) is clicked /\n onAppIconClick?: () => void;\n /* Extra slot rendered after the app icon (e.g. project selector) /\n extraLeftSlot?: ReactNode;\n menuItems?: ProfileMenuItem[];\n showMenuToggle?: boolean;\n}\n\nexport function AppMobileNavBar({\n activeApp,\n onLogoClick,\n onAppIconClick,\n extraLeftSlot,\n menuItems = [],\n showMenuToggle = true,\n}: AppMobileNavBarProps) {\n const { isOpen, toggle } = useMobileNavbarSheet();\n const { whitelabel } = useWhitelabel();\n const isDefaultWl = useIsDefaultWhitelabel();\n const primaryColor = whitelabel?.general?.primary_color;\n const wlName = whitelabel?.name \|\| \"Great\";\n\n const isGappsActive = activeApp === \"gapps\";\n const isGpagesActive = activeApp === \"gpages\";\n\n const wlIcon = whitelabel?.secondary_logo ? (\n <Image\n className=\"size-7 object-contain\"\n src={`${process.env.NEXT_PUBLIC_STORAGE_URL}/${whitelabel.secondary_logo}`}\n alt={`${wlName} Logo`}\n width={28}\n height={28}\n />\n ) : (\n <div\n className={cn(\n \"size-10 rounded-lg flex items-center justify-center transition-opacity duration-300\",\n !isGappsActive && \"opacity-20\",\n )}\n style={{ backgroundColor: primaryColor }}\n >\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"white\"\n strokeWidth=\"2\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n >\n <path d=\"M4 5a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v4a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1l0 -4\" />\n <path d=\"M14 5a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v4a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1l0 -4\" />\n <path d=\"M4 15a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v4a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1l0 -4\" />\n <path d=\"M14 15a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v4a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1l0 -4\" />\n </svg>\n </div>\n );\n\n return (\n <div className=\"fixed top-0 left-0 right-0 flex md:hidden items-center justify-between p-4 bg-white z-50 border-b border-gray-200\">\n <div className=\"flex items-center gap-1.5\">\n {/ GreatApps logo /}\n <div className=\"relative\">\n <Tooltip>\n <TooltipTrigger asChild>\n <div\n className={cn(\n \"flex items-center justify-center\",\n onLogoClick ? \"cursor-pointer\" : \"\",\n )}\n onClick={onLogoClick}\n >\n {isDefaultWl ? (\n <div className=\"size-10 flex items-center justify-center rounded-lg\">\n <Image\n src=\"/icons/great-icon.svg\"\n alt=\"Great Icon\"\n width={28}\n height={28}\n />\n </div>\n ) : (\n wlIcon\n )}\n </div>\n </TooltipTrigger>\n <TooltipContent side=\"bottom\">{wlName}</TooltipContent>\n </Tooltip>\n <div\n className={cn(\n \"absolute -bottom-[17px] left-1/2 -translate-x-1/2 w-5 h-[3px] rounded-t-xl transition-opacity duration-300\",\n isDefaultWl ? \"bg-gray-950\" : \"\",\n isGappsActive ? \"opacity-100\" : \"opacity-0\",\n )}\n style={!isDefaultWl ? { backgroundColor: primaryColor } : undefined}\n />\n </div>\n\n {/ GreatPages icon */}\n <div className=\"relative\">\n <Tooltip>\n <TooltipTrigger asChild>\n <div\n className={cn(\n \"size-10 rounded-lg flex items-center justify-center border-2 ring-2 transition-colors duration-300\",\n isGpagesActive\n ? isDefaultWl\n ? \"bg-cyan-100 border-white ring-cyan-300\"\n : \"border-white ring-transparent\"\n : isDefaultWl\n ? \"hover:bg-gray-100 border-transparent ring-transparent\"\n : \"border-transparent ring-transparent\",\n onAppIconClick ? \"cursor-pointer\" : \"\",\n )}\n style={\n !isDefaultWl\n ? {\n backgroundColor: primaryColor,\n boxShadow: isGpagesActive\n ? `0 0 0 2px ${primaryColor}40`\n : undefined,\n opacity: !isGpagesActive ? 0.2 : undefined,\n }\n : undefined\n }\n onClick={onAppIconClick}\n >\n {isDefaultWl ? (\n <Image\n src=\"/icons/icon-navbar.svg\"\n alt=\"GreatPages\"\n width={24}\n height={24}\n />\n ) : (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"white\"\n strokeWidth=\"2\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n >\n <path d=\"M4 8h16\" />\n <path d=\"M4 6a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2l0 -12\" />\n <path d=\"M8 4v4\" />\n </svg>\n )}\n </div>\n </TooltipTrigger>\n <TooltipContent side=\"bottom\">\n {isDefaultWl ? \"GreatPages\" : \"Páginas\"}\n </TooltipContent>\n </Tooltip>\n <div\n className={cn(\n \"absolute -bottom-[17px] left-1/2 -translate-x-1/2 w-5 h-[3px] rounded-t-xl transition-opacity duration-300\",\n isDefaultWl ? \"bg-cyan-300\" : \"\",\n isGpagesActive ? \"opacity-100\" : \"opacity-0\",\n )}\n style={!isDefaultWl ? { backgroundColor: primaryColor } : undefined}\n />\n </div>\n\n {extraLeftSlot}\n </div>\n <div className=\"flex items-center gap-1.5\">\n <ProfilePopover\n side=\"bottom\"\n align=\"end\"\n contentClassName=\"\"\n menuItems={menuItems}\n />\n {showMenuToggle && (\n <button\n className=\"size-10 flex items-center justify-center border border-zinc-200 rounded-lg bg-white cursor-pointer\"\n onClick={toggle}\n >\n {isOpen ? (\n <IconX size={18} className=\"text-zinc-950\" />\n ) : (\n <IconMenu2 size={18} className=\"text-zinc-950\" />\n )}\n </button>\n )}\n </div>\n </div>\n );\n}\n"],"mappings":"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","names":[]}
1	+ {"version":3,"sources":["../../../src/components/layouts/AppMobileNavBar.tsx"],"sourcesContent":["\"use client\";\n\nimport { ReactNode } from \"react\";\nimport Image from \"next/image\";\nimport { useTranslations } from \"next-intl\";\nimport { IconMenu2, IconX } from \"@tabler/icons-react\";\nimport { ProfilePopover } from \"./ProfilePopover\";\nimport { GreatDomainIcon } from \"./GreatDomainIcon\";\nimport { Tooltip, TooltipContent, TooltipTrigger } from \"../ui/overlay/Tooltip\";\nimport { useMobileNavbarSheet } from \"../../store/useMobileNavbarSheet\";\nimport {\n useWhitelabel,\n useIsDefaultWhitelabel,\n} from \"../../providers/whitelabel.provider\";\nimport { cn } from \"../../infra/utils/clsx\";\nimport type { ProfileMenuItem } from \"./ProfilePopover\";\n\nexport interface AppMobileNavBarProps {\n /** Which app is currently active — controls which icon gets the indicator /\n activeApp?: \"gapps\" \| \"gpages\" \| \"gdomain\";\n /* Called when the GreatApps logo is clicked /\n onLogoClick?: () => void;\n /* Called when the app icon (e.g. GreatPages) is clicked /\n onAppIconClick?: () => void;\n /* Called when the GreatDomain icon is clicked; without it the icon is not rendered (app flag) /\n onDomainIconClick?: () => void;\n /* Extra slot rendered after the app icon (e.g. project selector) /\n extraLeftSlot?: ReactNode;\n menuItems?: ProfileMenuItem[];\n showMenuToggle?: boolean;\n}\n\nexport function AppMobileNavBar({\n activeApp,\n onLogoClick,\n onAppIconClick,\n onDomainIconClick,\n extraLeftSlot,\n menuItems = [],\n showMenuToggle = true,\n}: AppMobileNavBarProps) {\n const translate = useTranslations();\n const { isOpen, toggle } = useMobileNavbarSheet();\n const { whitelabel } = useWhitelabel();\n const isDefaultWl = useIsDefaultWhitelabel();\n const primaryColor = whitelabel?.general?.primary_color;\n const wlName = whitelabel?.name \|\| \"Great\";\n\n const isGappsActive = activeApp === \"gapps\";\n const isGpagesActive = activeApp === \"gpages\";\n const isGdomainActive = activeApp === \"gdomain\";\n\n const wlIcon = whitelabel?.secondary_logo ? (\n <Image\n className=\"size-7 object-contain\"\n src={`${process.env.NEXT_PUBLIC_STORAGE_URL}/${whitelabel.secondary_logo}`}\n alt={`${wlName} Logo`}\n width={28}\n height={28}\n />\n ) : (\n <div\n className={cn(\n \"size-10 rounded-lg flex items-center justify-center transition-opacity duration-300\",\n !isGappsActive && \"opacity-20\",\n )}\n style={{ backgroundColor: primaryColor }}\n >\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"white\"\n strokeWidth=\"2\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n >\n <path d=\"M4 5a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v4a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1l0 -4\" />\n <path d=\"M14 5a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v4a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1l0 -4\" />\n <path d=\"M4 15a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v4a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1l0 -4\" />\n <path d=\"M14 15a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v4a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1l0 -4\" />\n </svg>\n </div>\n );\n\n return (\n <div className=\"fixed top-0 left-0 right-0 flex md:hidden items-center justify-between p-4 bg-white z-50 border-b border-gray-200\">\n <div className=\"flex items-center gap-1.5 min-w-0\">\n {/ GreatApps logo /}\n <div className=\"relative shrink-0\">\n <Tooltip>\n <TooltipTrigger asChild>\n <div\n className={cn(\n \"flex items-center justify-center\",\n onLogoClick ? \"cursor-pointer\" : \"\",\n )}\n onClick={onLogoClick}\n >\n {isDefaultWl ? (\n <div className=\"size-10 flex items-center justify-center rounded-lg\">\n <Image\n src=\"/icons/great-icon.svg\"\n alt=\"Great Icon\"\n width={28}\n height={28}\n />\n </div>\n ) : (\n wlIcon\n )}\n </div>\n </TooltipTrigger>\n <TooltipContent side=\"bottom\">{wlName}</TooltipContent>\n </Tooltip>\n <div\n className={cn(\n \"absolute -bottom-[17px] left-1/2 -translate-x-1/2 w-5 h-[3px] rounded-t-xl transition-opacity duration-300\",\n isDefaultWl ? \"bg-gray-950\" : \"\",\n isGappsActive ? \"opacity-100\" : \"opacity-0\",\n )}\n style={!isDefaultWl ? { backgroundColor: primaryColor } : undefined}\n />\n </div>\n\n {/ GreatPages icon /}\n <div className=\"relative shrink-0\">\n <Tooltip>\n <TooltipTrigger asChild>\n <div\n className={cn(\n \"size-10 rounded-lg flex items-center justify-center border-2 ring-2 transition-colors duration-300\",\n isGpagesActive\n ? isDefaultWl\n ? \"bg-cyan-100 border-white ring-cyan-300\"\n : \"border-white ring-transparent\"\n : isDefaultWl\n ? \"hover:bg-gray-100 border-transparent ring-transparent\"\n : \"border-transparent ring-transparent\",\n onAppIconClick ? \"cursor-pointer\" : \"\",\n )}\n style={\n !isDefaultWl\n ? {\n backgroundColor: primaryColor,\n boxShadow: isGpagesActive\n ? `0 0 0 2px ${primaryColor}40`\n : undefined,\n opacity: !isGpagesActive ? 0.2 : undefined,\n }\n : undefined\n }\n onClick={onAppIconClick}\n >\n {isDefaultWl ? (\n <Image\n src=\"/icons/icon-navbar.svg\"\n alt=\"GreatPages\"\n width={24}\n height={24}\n />\n ) : (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"white\"\n strokeWidth=\"2\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n >\n <path d=\"M4 8h16\" />\n <path d=\"M4 6a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2l0 -12\" />\n <path d=\"M8 4v4\" />\n </svg>\n )}\n </div>\n </TooltipTrigger>\n <TooltipContent side=\"bottom\">\n {isDefaultWl ? \"GreatPages\" : \"Páginas\"}\n </TooltipContent>\n </Tooltip>\n <div\n className={cn(\n \"absolute -bottom-[17px] left-1/2 -translate-x-1/2 w-5 h-[3px] rounded-t-xl transition-opacity duration-300\",\n isDefaultWl ? \"bg-cyan-300\" : \"\",\n isGpagesActive ? \"opacity-100\" : \"opacity-0\",\n )}\n style={!isDefaultWl ? { backgroundColor: primaryColor } : undefined}\n />\n </div>\n\n {/ GreatDomain icon /}\n {onDomainIconClick ? (\n <div className=\"relative shrink-0\">\n <Tooltip>\n <TooltipTrigger asChild>\n <div\n aria-label={\n isDefaultWl\n ? translate(\"common.layout.navbar.greatDomain\")\n : translate(\"common.layout.navbar.domains\")\n }\n className={cn(\n \"size-10 rounded-[10px] flex items-center justify-center border-2 ring-2 transition-colors duration-300\",\n isGdomainActive\n ? isDefaultWl\n ? \"bg-[#EDE9FE] border-white ring-[#C092FF]\"\n : \"border-white ring-transparent\"\n : isDefaultWl\n ? \"hover:bg-gray-100 border-transparent ring-transparent\"\n : \"border-transparent ring-transparent\",\n \"cursor-pointer\",\n )}\n style={\n !isDefaultWl\n ? {\n backgroundColor: primaryColor,\n boxShadow: isGdomainActive\n ? `0 0 0 2px ${primaryColor}40`\n : undefined,\n opacity: !isGdomainActive ? 0.2 : undefined,\n }\n : undefined\n }\n onClick={onDomainIconClick}\n >\n {isDefaultWl ? (\n <GreatDomainIcon active={isGdomainActive} />\n ) : (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"white\"\n strokeWidth=\"2\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n >\n <path d=\"M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0\" />\n <path d=\"M3.6 9h16.8\" />\n <path d=\"M3.6 15h16.8\" />\n <path d=\"M11.5 3a17 17 0 0 0 0 18\" />\n <path d=\"M12.5 3a17 17 0 0 1 0 18\" />\n </svg>\n )}\n </div>\n </TooltipTrigger>\n <TooltipContent side=\"bottom\">\n {isDefaultWl\n ? translate(\"common.layout.navbar.greatDomain\")\n : translate(\"common.layout.navbar.domains\")}\n </TooltipContent>\n </Tooltip>\n <div\n className={cn(\n \"absolute -bottom-[17px] left-1/2 -translate-x-1/2 w-5 h-[3px] rounded-t-xl transition-opacity duration-300\",\n isDefaultWl ? \"bg-[#984DFF]\" : \"\",\n isGdomainActive ? \"opacity-100\" : \"opacity-0\",\n )}\n style={!isDefaultWl ? { backgroundColor: primaryColor } : undefined}\n />\n </div>\n ) : null}\n\n {extraLeftSlot ? (\n <div className=\"min-w-0 shrink [&>]:max-w-full\">{extraLeftSlot}</div>\n ) : null}\n </div>\n <div className=\"flex items-center gap-1.5 shrink-0\">\n <ProfilePopover\n side=\"bottom\"\n align=\"end\"\n contentClassName=\"\"\n menuItems={menuItems}\n />\n {showMenuToggle && (\n <button\n className=\"size-10 flex items-center justify-center border border-zinc-200 rounded-lg bg-white cursor-pointer\"\n onClick={toggle}\n >\n {isOpen ? (\n <IconX size={18} className=\"text-zinc-950\" />\n ) : (\n <IconMenu2 size={18} className=\"text-zinc-950\" />\n )}\n </button>\n )}\n </div>\n </div>\n );\n}\n"],"mappings":"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","names":[]}

package/dist/components/layouts/AppNavBar.mjs CHANGED Viewed

@@ -6,6 +6,7 @@ import { NotificationsPopover } from "./NotificationsPopover";
 function AppNavBar({
   logoHref,
   appIconHref,
+  domainIconHref,
   activeApp,
   showExpandButton = false,
   onExpandClick,
@@ -17,6 +18,7 @@ function AppNavBar({
     {
       logoHref,
       appIconHref,
+      domainIconHref,
       activeApp,
       showExpandButton,
       onExpandClick,

package/dist/components/layouts/AppNavBar.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../src/components/layouts/AppNavBar.tsx"],"sourcesContent":["\"use client\";\n\nimport { NavBar } from \"./NavBar\";\nimport { ProfilePopover } from \"./ProfilePopover\";\nimport { NotificationsPopover } from \"./NotificationsPopover\";\nimport type { ProfileMenuItem } from \"./ProfilePopover\";\n\nexport interface AppNavBarProps {\n logoHref: string;\n appIconHref: string;\n /** Which app is currently active — controls which icon gets the indicator */\n activeApp?: \"gapps\" \| \"gpages\";\n showExpandButton?: boolean;\n onExpandClick?: () => void;\n menuItems?: ProfileMenuItem[];\n onNotificationsViewAll?: () => void;\n}\n\nexport function AppNavBar({\n logoHref,\n appIconHref,\n activeApp,\n showExpandButton = false,\n onExpandClick,\n menuItems = [],\n onNotificationsViewAll,\n}: AppNavBarProps) {\n return (\n <NavBar\n logoHref={logoHref}\n appIconHref={appIconHref}\n activeApp={activeApp}\n showExpandButton={showExpandButton}\n onExpandClick={onExpandClick}\n >\n <NotificationsPopover onViewAll={onNotificationsViewAll} />\n <ProfilePopover menuItems={menuItems} />\n </NavBar>\n );\n}\n"],"mappings":";~~AA4BI~~,~~SAOE~~,~~KAPF~~;~~AA1BJ~~,SAAS,cAAc;AACvB,SAAS,sBAAsB;AAC/B,SAAS,4BAA4B;~~AAc9B~~,SAAS,UAAU;AAAA,EACxB;AAAA,EACA;AAAA,EACA;AAAA,EACA,mBAAmB;AAAA,EACnB;AAAA,EACA,YAAY,CAAC;AAAA,EACb;AACF,GAAmB;AACjB,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MAEA;AAAA,4BAAC,wBAAqB,WAAW,wBAAwB;AAAA,QACzD,oBAAC,kBAAe,WAAsB;AAAA;AAAA;AAAA,EACxC;AAEJ;","names":[]}
1	+ {"version":3,"sources":["../../../src/components/layouts/AppNavBar.tsx"],"sourcesContent":["\"use client\";\n\nimport { NavBar } from \"./NavBar\";\nimport { ProfilePopover } from \"./ProfilePopover\";\nimport { NotificationsPopover } from \"./NotificationsPopover\";\nimport type { ProfileMenuItem } from \"./ProfilePopover\";\n\nexport interface AppNavBarProps {\n logoHref: string;\n appIconHref: string;\n /** Sem href o ícone do GreatDomain não é renderizado: é a flag do app. /\n domainIconHref?: string;\n /* Which app is currently active — controls which icon gets the indicator */\n activeApp?: \"gapps\" \| \"gpages\" \| \"gdomain\";\n showExpandButton?: boolean;\n onExpandClick?: () => void;\n menuItems?: ProfileMenuItem[];\n onNotificationsViewAll?: () => void;\n}\n\nexport function AppNavBar({\n logoHref,\n appIconHref,\n domainIconHref,\n activeApp,\n showExpandButton = false,\n onExpandClick,\n menuItems = [],\n onNotificationsViewAll,\n}: AppNavBarProps) {\n return (\n <NavBar\n logoHref={logoHref}\n appIconHref={appIconHref}\n domainIconHref={domainIconHref}\n activeApp={activeApp}\n showExpandButton={showExpandButton}\n onExpandClick={onExpandClick}\n >\n <NotificationsPopover onViewAll={onNotificationsViewAll} />\n <ProfilePopover menuItems={menuItems} />\n </NavBar>\n );\n}\n"],"mappings":";AA+BI,SAQE,KARF;AA7BJ,SAAS,cAAc;AACvB,SAAS,sBAAsB;AAC/B,SAAS,4BAA4B;AAgB9B,SAAS,UAAU;AAAA,EACxB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,mBAAmB;AAAA,EACnB;AAAA,EACA,YAAY,CAAC;AAAA,EACb;AACF,GAAmB;AACjB,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MAEA;AAAA,4BAAC,wBAAqB,WAAW,wBAAwB;AAAA,QACzD,oBAAC,kBAAe,WAAsB;AAAA;AAAA;AAAA,EACxC;AAEJ;","names":[]}

package/dist/components/layouts/GreatDomainIcon.mjs ADDED Viewed

@@ -0,0 +1,40 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "../../infra/utils/clsx";
+function GreatDomainIcon({ active, className }) {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      width: "23",
+      height: "23",
+      viewBox: "0 0 23 23",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      className,
+      "aria-hidden": "true",
+      children: [
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: "M11.8444 17.0777C11.8444 20.3487 9.19292 23.0003 5.92218 23.0003C2.65145 23.0003 0 20.3487 0 17.0777C0 13.8068 2.65145 11.1551 5.92218 11.1551C9.19292 11.1551 11.8444 13.8068 11.8444 17.0777Z",
+            className: cn(
+              "transition-colors duration-300",
+              active ? "fill-[#984DFF]" : "fill-[#650CE4]"
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: "M11.8436 3.06666C11.8436 1.37299 13.2166 0 14.9103 0H19.9331C21.6267 0 22.9997 1.37299 22.9997 3.06666V19.9333C22.9997 21.6269 21.6267 22.9999 19.9331 22.9999H14.9103C13.2166 22.9999 11.8436 21.6269 11.8436 19.9333V3.06666Z",
+            fill: "#C9B2FF"
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  GreatDomainIcon
+};
+//# sourceMappingURL=GreatDomainIcon.mjs.map

package/dist/components/layouts/GreatDomainIcon.mjs.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"sources":["../../../src/components/layouts/GreatDomainIcon.tsx"],"sourcesContent":["\"use client\";\n\nimport { cn } from \"../../infra/utils/clsx\";\n\ntype GreatDomainIconProps = {\n /** Em repouso o círculo é #650CE4; só no estado ativo vira #984DFF. */\n active?: boolean;\n className?: string;\n};\n\n/**\n * Glifo do GreatDomain — geometria exportada do Figma (node 5929:2700), 23×23.\n * O círculo só troca de cor quando ativo. No hover o container ganha fundo cinza\n * (igual ao GreatPages) e o glifo fica como está.\n */\nfunction GreatDomainIcon({ active, className }: GreatDomainIconProps) {\n return (\n <svg\n width=\"23\"\n height=\"23\"\n viewBox=\"0 0 23 23\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n className={className}\n aria-hidden=\"true\"\n >\n <path\n d=\"M11.8444 17.0777C11.8444 20.3487 9.19292 23.0003 5.92218 23.0003C2.65145 23.0003 0 20.3487 0 17.0777C0 13.8068 2.65145 11.1551 5.92218 11.1551C9.19292 11.1551 11.8444 13.8068 11.8444 17.0777Z\"\n className={cn(\n \"transition-colors duration-300\",\n active ? \"fill-[#984DFF]\" : \"fill-[#650CE4]\",\n )}\n />\n <path\n d=\"M11.8436 3.06666C11.8436 1.37299 13.2166 0 14.9103 0H19.9331C21.6267 0 22.9997 1.37299 22.9997 3.06666V19.9333C22.9997 21.6269 21.6267 22.9999 19.9331 22.9999H14.9103C13.2166 22.9999 11.8436 21.6269 11.8436 19.9333V3.06666Z\"\n fill=\"#C9B2FF\"\n />\n </svg>\n );\n}\n\nexport { GreatDomainIcon };\nexport type { GreatDomainIconProps };\n"],"mappings":";AAiBI,SASE,KATF;AAfJ,SAAS,UAAU;AAanB,SAAS,gBAAgB,EAAE,QAAQ,UAAU,GAAyB;AACpE,SACE;AAAA,IAAC;AAAA;AAAA,MACC,OAAM;AAAA,MACN,QAAO;AAAA,MACP,SAAQ;AAAA,MACR,MAAK;AAAA,MACL,OAAM;AAAA,MACN;AAAA,MACA,eAAY;AAAA,MAEZ;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,GAAE;AAAA,YACF,WAAW;AAAA,cACT;AAAA,cACA,SAAS,mBAAmB;AAAA,YAC9B;AAAA;AAAA,QACF;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,GAAE;AAAA,YACF,MAAK;AAAA;AAAA,QACP;AAAA;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/dist/components/layouts/NavBar.mjs CHANGED Viewed

@@ -5,11 +5,13 @@ import Link from "next/link";
 import { useTranslations } from "next-intl";
 import { IconChevronRight } from "@tabler/icons-react";
 import { Separator } from "../ui/data-display/Separator";
+import { GreatDomainIcon } from "./GreatDomainIcon";
 import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/overlay/Tooltip";
 import {
   useDesktopSidebarStore,
   useDesktopSidebarHydration
 } from "../../store/useDesktopSidebarStore";
+import { useMdSidebarHydration } from "../../store/useMdSidebarStore";
 import {
   useWhitelabel,
   useIsDefaultWhitelabel
@@ -18,6 +20,7 @@ import { cn } from "../../infra/utils/clsx";
 function NavBar({
   logoHref,
   appIconHref,
+  domainIconHref,
   activeApp,
   showExpandButton = false,
   onExpandClick,
@@ -27,6 +30,7 @@ function NavBar({
   const translate = useTranslations();
   const { isExpanded: isDesktopExpanded, toggle: toggleDesktop } = useDesktopSidebarStore();
   useDesktopSidebarHydration();
+  useMdSidebarHydration();
   const { whitelabel } = useWhitelabel();
   const isDefaultWl = useIsDefaultWhitelabel();
   const primaryColor = whitelabel?.general?.primary_color;
@@ -129,63 +133,118 @@ function NavBar({
               /* @__PURE__ */ jsx(TooltipContent, { side: "right", children: translate("common.layout.navbar.expandMenu") })
             ] })
           ] }),
-          /* @__PURE__ */ jsxs("div", { className: "relative", children: [
-            /* @__PURE__ */ jsxs(Tooltip, { children: [
-              /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
-                Link,
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2 items-center", children: [
+            /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+              /* @__PURE__ */ jsxs(Tooltip, { children: [
+                /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+                  Link,
+                  {
+                    href: appIconHref,
+                    className: cn(
+                      "size-10 rounded-lg cursor-pointer flex items-center justify-center border-2 ring-2 transition-colors duration-300",
+                      activeApp === "gpages" ? isDefaultWl ? "bg-cyan-100 border-white ring-cyan-300" : "border-white ring-transparent" : isDefaultWl ? "hover:bg-gray-100 border-transparent ring-transparent" : "border-transparent ring-transparent"
+                    ),
+                    style: !isDefaultWl ? {
+                      backgroundColor: primaryColor,
+                      boxShadow: activeApp === "gpages" ? `0 0 0 2px ${primaryColor}40` : void 0,
+                      opacity: activeApp !== "gpages" ? 0.2 : void 0
+                    } : void 0,
+                    children: isDefaultWl ? /* @__PURE__ */ jsx(
+                      Image,
+                      {
+                        src: "/icons/icon-navbar.svg",
+                        alt: "GreatPages",
+                        width: 24,
+                        height: 24
+                      }
+                    ) : /* @__PURE__ */ jsxs(
+                      "svg",
+                      {
+                        xmlns: "http://www.w3.org/2000/svg",
+                        width: "24",
+                        height: "24",
+                        viewBox: "0 0 24 24",
+                        fill: "none",
+                        stroke: "white",
+                        strokeWidth: "2",
+                        strokeLinecap: "round",
+                        strokeLinejoin: "round",
+                        children: [
+                          /* @__PURE__ */ jsx("path", { d: "M4 8h16" }),
+                          /* @__PURE__ */ jsx("path", { d: "M4 6a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2l0 -12" }),
+                          /* @__PURE__ */ jsx("path", { d: "M8 4v4" })
+                        ]
+                      }
+                    )
+                  }
+                ) }),
+                /* @__PURE__ */ jsx(TooltipContent, { side: "right", children: isDefaultWl ? translate("common.layout.navbar.greatPages") : translate("common.layout.navbar.pages") })
+              ] }),
+              /* @__PURE__ */ jsx(
+                "div",
                 {
-                  href: appIconHref,
                   className: cn(
-                    "size-10 rounded-lg cursor-pointer flex items-center justify-center border-2 ring-2 transition-colors duration-300",
-                    activeApp === "gpages" ? isDefaultWl ? "bg-cyan-100 border-white ring-cyan-300" : "border-white ring-transparent" : isDefaultWl ? "hover:bg-gray-100 border-transparent ring-transparent" : "border-transparent ring-transparent"
+                    "absolute -left-4 top-1/2 -translate-y-1/2 z-10 w-[3px] h-5 rounded-r-xl transition-opacity duration-300",
+                    isDefaultWl ? "bg-cyan-300" : "",
+                    activeApp === "gpages" ? "opacity-100" : "opacity-0"
                   ),
-                  style: !isDefaultWl ? {
-                    backgroundColor: primaryColor,
-                    boxShadow: activeApp === "gpages" ? `0 0 0 2px ${primaryColor}40` : void 0,
-                    opacity: activeApp !== "gpages" ? 0.2 : void 0
-                  } : void 0,
-                  children: isDefaultWl ? /* @__PURE__ */ jsx(
-                    Image,
-                    {
-                      src: "/icons/icon-navbar.svg",
-                      alt: "GreatPages",
-                      width: 24,
-                      height: 24
-                    }
-                  ) : /* @__PURE__ */ jsxs(
-                    "svg",
-                    {
-                      xmlns: "http://www.w3.org/2000/svg",
-                      width: "24",
-                      height: "24",
-                      viewBox: "0 0 24 24",
-                      fill: "none",
-                      stroke: "white",
-                      strokeWidth: "2",
-                      strokeLinecap: "round",
-                      strokeLinejoin: "round",
-                      children: [
-                        /* @__PURE__ */ jsx("path", { d: "M4 8h16" }),
-                        /* @__PURE__ */ jsx("path", { d: "M4 6a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2l0 -12" }),
-                        /* @__PURE__ */ jsx("path", { d: "M8 4v4" })
-                      ]
-                    }
-                  )
+                  style: !isDefaultWl ? { backgroundColor: primaryColor } : void 0
                 }
-              ) }),
-              /* @__PURE__ */ jsx(TooltipContent, { side: "right", children: isDefaultWl ? translate("common.layout.navbar.greatPages") : translate("common.layout.navbar.pages") })
+              )
             ] }),
-            /* @__PURE__ */ jsx(
-              "div",
-              {
-                className: cn(
-                  "absolute -left-4 top-1/2 -translate-y-1/2 z-10 w-[3px] h-5 rounded-r-xl transition-opacity duration-300",
-                  isDefaultWl ? "bg-cyan-300" : "",
-                  activeApp === "gpages" ? "opacity-100" : "opacity-0"
-                ),
-                style: !isDefaultWl ? { backgroundColor: primaryColor } : void 0
-              }
-            )
+            domainIconHref ? /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+              /* @__PURE__ */ jsxs(Tooltip, { children: [
+                /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+                  Link,
+                  {
+                    href: domainIconHref,
+                    "aria-label": isDefaultWl ? translate("common.layout.navbar.greatDomain") : translate("common.layout.navbar.domains"),
+                    className: cn(
+                      "size-10 rounded-[10px] cursor-pointer flex items-center justify-center border-2 ring-2 transition-colors duration-300",
+                      activeApp === "gdomain" ? isDefaultWl ? "bg-[#EDE9FE] border-white ring-[#C092FF]" : "border-white ring-transparent" : isDefaultWl ? "hover:bg-gray-100 border-transparent ring-transparent" : "border-transparent ring-transparent"
+                    ),
+                    style: !isDefaultWl ? {
+                      backgroundColor: primaryColor,
+                      boxShadow: activeApp === "gdomain" ? `0 0 0 2px ${primaryColor}40` : void 0,
+                      opacity: activeApp !== "gdomain" ? 0.2 : void 0
+                    } : void 0,
+                    children: isDefaultWl ? /* @__PURE__ */ jsx(GreatDomainIcon, { active: activeApp === "gdomain" }) : /* @__PURE__ */ jsxs(
+                      "svg",
+                      {
+                        xmlns: "http://www.w3.org/2000/svg",
+                        width: "24",
+                        height: "24",
+                        viewBox: "0 0 24 24",
+                        fill: "none",
+                        stroke: "white",
+                        strokeWidth: "2",
+                        strokeLinecap: "round",
+                        strokeLinejoin: "round",
+                        children: [
+                          /* @__PURE__ */ jsx("path", { d: "M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0" }),
+                          /* @__PURE__ */ jsx("path", { d: "M3.6 9h16.8" }),
+                          /* @__PURE__ */ jsx("path", { d: "M3.6 15h16.8" }),
+                          /* @__PURE__ */ jsx("path", { d: "M11.5 3a17 17 0 0 0 0 18" }),
+                          /* @__PURE__ */ jsx("path", { d: "M12.5 3a17 17 0 0 1 0 18" })
+                        ]
+                      }
+                    )
+                  }
+                ) }),
+                /* @__PURE__ */ jsx(TooltipContent, { side: "right", children: isDefaultWl ? translate("common.layout.navbar.greatDomain") : translate("common.layout.navbar.domains") })
+              ] }),
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: cn(
+                    "absolute -left-4 top-1/2 -translate-y-1/2 z-10 w-[3px] h-5 rounded-r-xl transition-opacity duration-300",
+                    isDefaultWl ? "bg-[#984DFF]" : "",
+                    activeApp === "gdomain" ? "opacity-100" : "opacity-0"
+                  ),
+                  style: !isDefaultWl ? { backgroundColor: primaryColor } : void 0
+                }
+              )
+            ] }) : null
           ] })
         ] }),
         /* @__PURE__ */ jsx("div", { className: "flex flex-col items-center gap-2", children })

package/dist/components/layouts/NavBar.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../src/components/layouts/NavBar.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport Image from \"next/image\";\nimport Link from \"next/link\";\nimport { useTranslations } from \"next-intl\";\nimport { IconChevronRight } from \"@tabler/icons-react\";\nimport { Separator } from \"../ui/data-display/Separator\";\nimport { Tooltip, TooltipContent, TooltipTrigger } from \"../ui/overlay/Tooltip\";\nimport {\n useDesktopSidebarStore,\n useDesktopSidebarHydration,\n} from \"../../store/useDesktopSidebarStore\";\nimport {\n useWhitelabel,\n useIsDefaultWhitelabel,\n} from \"../../providers/whitelabel.provider\";\nimport { cn } from \"../../infra/utils/clsx\";\n\ntype NavBarProps = {\n logoHref: string;\n appIconHref: string;\n activeApp?: \"gapps\" \| \"gpages\";\n showExpandButton?: boolean;\n onExpandClick?: () => void;\n children?: React.ReactNode;\n className?: string;\n};\n\nfunction NavBar({\n logoHref,\n appIconHref,\n activeApp,\n showExpandButton = false,\n onExpandClick,\n children,\n className,\n}: NavBarProps) {\n const translate = useTranslations();\n const { isExpanded: isDesktopExpanded, toggle: toggleDesktop } =\n useDesktopSidebarStore();\n useDesktopSidebarHydration();\n const { whitelabel } = useWhitelabel();\n const isDefaultWl = useIsDefaultWhitelabel();\n const primaryColor = whitelabel?.general?.primary_color;\n const wlName = whitelabel?.name \|\| \"Great\";\n\n const wlIcon = whitelabel?.secondary_logo ? (\n <Image\n className=\"size-7 object-contain\"\n src={`${process.env.NEXT_PUBLIC_STORAGE_URL}/${whitelabel.secondary_logo}`}\n alt={`${wlName} Logo`}\n width={28}\n height={28}\n />\n ) : (\n <div\n className={cn(\n \"size-10 rounded-lg flex items-center justify-center transition-opacity duration-300\",\n activeApp !== \"gapps\" && \"opacity-20\",\n )}\n style={{ backgroundColor: primaryColor }}\n >\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"white\"\n strokeWidth=\"2\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n >\n <path d=\"M4 5a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v4a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1l0 -4\" />\n <path d=\"M14 5a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v4a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1l0 -4\" />\n <path d=\"M4 15a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v4a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1l0 -4\" />\n <path d=\"M14 15a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v4a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1l0 -4\" />\n </svg>\n </div>\n );\n\n return (\n <div\n className={cn(\n \"hidden md:flex flex-col justify-between h-screen p-4 border-r border-gray-200 overflow-visible z-40 bg-white\",\n className,\n )}\n >\n <div className=\"flex flex-col gap-4 items-center mt-[6.5px]\">\n {/* GreatApps logo /}\n <div className=\"relative\">\n <Tooltip>\n <TooltipTrigger className=\"cursor-pointer\" asChild>\n <Link href={logoHref}>\n {isDefaultWl ? (\n <Image\n src=\"/icons/great-icon.svg\"\n alt=\"Great Icon\"\n width={28}\n height={28}\n />\n ) : (\n wlIcon\n )}\n </Link>\n </TooltipTrigger>\n <TooltipContent side=\"right\">{wlName}</TooltipContent>\n </Tooltip>\n <div\n className={cn(\n \"absolute -left-[22px] top-1/2 -translate-y-1/2 z-10 w-[3px] h-5 rounded-r-xl transition-opacity duration-300\",\n isDefaultWl ? \"bg-gray-950\" : \"\",\n activeApp === \"gapps\" ? \"opacity-100\" : \"opacity-0\",\n )}\n style={!isDefaultWl ? { backgroundColor: primaryColor } : undefined}\n />\n </div>\n\n <div className=\"relative w-full mt-[7.5px]\">\n <Separator />\n {/ Md expand button /}\n {showExpandButton && (\n <Tooltip>\n <TooltipTrigger asChild>\n <button\n onClick={onExpandClick}\n className=\"hidden md:flex lg:hidden absolute top-1/2 -translate-y-1/2 right-0 translate-x-[calc(50%+1rem)] size-8 items-center justify-center rounded-full border border-gray-200 bg-white hover:bg-gray-100 cursor-pointer transition-colors z-10\"\n >\n <IconChevronRight size={16} className=\"text-gray-500\" />\n </button>\n </TooltipTrigger>\n <TooltipContent side=\"right\">{translate('common.layout.navbar.expandMenu')}</TooltipContent>\n </Tooltip>\n )}\n {/ Desktop expand button /}\n {!isDesktopExpanded && (\n <Tooltip>\n <TooltipTrigger asChild>\n <button\n onClick={toggleDesktop}\n className=\"hidden lg:flex absolute top-1/2 -translate-y-1/2 right-0 translate-x-[calc(50%+1rem)] size-8 items-center justify-center rounded-full border border-gray-200 bg-white hover:bg-gray-100 cursor-pointer transition-colors z-10\"\n >\n <IconChevronRight size={16} className=\"text-gray-500\" />\n </button>\n </TooltipTrigger>\n <TooltipContent side=\"right\">{translate('common.layout.navbar.expandMenu')}</TooltipContent>\n </Tooltip>\n )}\n </div>\n\n {/ GreatPages icon */}\n <div className=\"relative\">\n <Tooltip>\n <TooltipTrigger asChild>\n <Link\n href={appIconHref}\n className={cn(\n \"size-10 rounded-lg cursor-pointer flex items-center justify-center border-2 ring-2 transition-colors duration-300\",\n activeApp === \"gpages\"\n ? isDefaultWl\n ? \"bg-cyan-100 border-white ring-cyan-300\"\n : \"border-white ring-transparent\"\n : isDefaultWl\n ? \"hover:bg-gray-100 border-transparent ring-transparent\"\n : \"border-transparent ring-transparent\",\n )}\n style={\n !isDefaultWl\n ? {\n backgroundColor: primaryColor,\n boxShadow:\n activeApp === \"gpages\"\n ? `0 0 0 2px ${primaryColor}40`\n : undefined,\n opacity: activeApp !== \"gpages\" ? 0.2 : undefined,\n }\n : undefined\n }\n >\n {isDefaultWl ? (\n <Image\n src=\"/icons/icon-navbar.svg\"\n alt=\"GreatPages\"\n width={24}\n height={24}\n />\n ) : (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"white\"\n strokeWidth=\"2\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n >\n <path d=\"M4 8h16\" />\n <path d=\"M4 6a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2l0 -12\" />\n <path d=\"M8 4v4\" />\n </svg>\n )}\n </Link>\n </TooltipTrigger>\n <TooltipContent side=\"right\">\n {isDefaultWl ? translate('common.layout.navbar.greatPages') : translate('common.layout.navbar.pages')}\n </TooltipContent>\n </Tooltip>\n <div\n className={cn(\n \"absolute -left-4 top-1/2 -translate-y-1/2 z-10 w-[3px] h-5 rounded-r-xl transition-opacity duration-300\",\n isDefaultWl ? \"bg-cyan-300\" : \"\",\n activeApp === \"gpages\" ? \"opacity-100\" : \"opacity-0\",\n )}\n style={!isDefaultWl ? { backgroundColor: primaryColor } : undefined}\n />\n </div>\n </div>\n\n <div className=\"flex flex-col items-center gap-2\">{children}</div>\n </div>\n );\n}\n\nexport { NavBar };\nexport type { NavBarProps };\n"],"mappings":"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","names":[]}
1	+ {"version":3,"sources":["../../../src/components/layouts/NavBar.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport Image from \"next/image\";\nimport Link from \"next/link\";\nimport { useTranslations } from \"next-intl\";\nimport { IconChevronRight } from \"@tabler/icons-react\";\nimport { Separator } from \"../ui/data-display/Separator\";\nimport { GreatDomainIcon } from \"./GreatDomainIcon\";\nimport { Tooltip, TooltipContent, TooltipTrigger } from \"../ui/overlay/Tooltip\";\nimport {\n useDesktopSidebarStore,\n useDesktopSidebarHydration,\n} from \"../../store/useDesktopSidebarStore\";\nimport { useMdSidebarHydration } from \"../../store/useMdSidebarStore\";\nimport {\n useWhitelabel,\n useIsDefaultWhitelabel,\n} from \"../../providers/whitelabel.provider\";\nimport { cn } from \"../../infra/utils/clsx\";\n\ntype NavBarProps = {\n logoHref: string;\n appIconHref: string;\n /** Sem href o ícone do GreatDomain não é renderizado: é a flag do app. /\n domainIconHref?: string;\n activeApp?: \"gapps\" \| \"gpages\" \| \"gdomain\";\n showExpandButton?: boolean;\n onExpandClick?: () => void;\n children?: React.ReactNode;\n className?: string;\n};\n\nfunction NavBar({\n logoHref,\n appIconHref,\n domainIconHref,\n activeApp,\n showExpandButton = false,\n onExpandClick,\n children,\n className,\n}: NavBarProps) {\n const translate = useTranslations();\n const { isExpanded: isDesktopExpanded, toggle: toggleDesktop } =\n useDesktopSidebarStore();\n useDesktopSidebarHydration();\n useMdSidebarHydration();\n const { whitelabel } = useWhitelabel();\n const isDefaultWl = useIsDefaultWhitelabel();\n const primaryColor = whitelabel?.general?.primary_color;\n const wlName = whitelabel?.name \|\| \"Great\";\n\n const wlIcon = whitelabel?.secondary_logo ? (\n <Image\n className=\"size-7 object-contain\"\n src={`${process.env.NEXT_PUBLIC_STORAGE_URL}/${whitelabel.secondary_logo}`}\n alt={`${wlName} Logo`}\n width={28}\n height={28}\n />\n ) : (\n <div\n className={cn(\n \"size-10 rounded-lg flex items-center justify-center transition-opacity duration-300\",\n activeApp !== \"gapps\" && \"opacity-20\",\n )}\n style={{ backgroundColor: primaryColor }}\n >\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"white\"\n strokeWidth=\"2\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n >\n <path d=\"M4 5a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v4a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1l0 -4\" />\n <path d=\"M14 5a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v4a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1l0 -4\" />\n <path d=\"M4 15a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v4a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1l0 -4\" />\n <path d=\"M14 15a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v4a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1l0 -4\" />\n </svg>\n </div>\n );\n\n return (\n <div\n className={cn(\n \"hidden md:flex flex-col justify-between h-screen p-4 border-r border-gray-200 overflow-visible z-40 bg-white\",\n className,\n )}\n >\n <div className=\"flex flex-col gap-4 items-center mt-[6.5px]\">\n {/ GreatApps logo /}\n <div className=\"relative\">\n <Tooltip>\n <TooltipTrigger className=\"cursor-pointer\" asChild>\n <Link href={logoHref}>\n {isDefaultWl ? (\n <Image\n src=\"/icons/great-icon.svg\"\n alt=\"Great Icon\"\n width={28}\n height={28}\n />\n ) : (\n wlIcon\n )}\n </Link>\n </TooltipTrigger>\n <TooltipContent side=\"right\">{wlName}</TooltipContent>\n </Tooltip>\n <div\n className={cn(\n \"absolute -left-[22px] top-1/2 -translate-y-1/2 z-10 w-[3px] h-5 rounded-r-xl transition-opacity duration-300\",\n isDefaultWl ? \"bg-gray-950\" : \"\",\n activeApp === \"gapps\" ? \"opacity-100\" : \"opacity-0\",\n )}\n style={!isDefaultWl ? { backgroundColor: primaryColor } : undefined}\n />\n </div>\n\n <div className=\"relative w-full mt-[7.5px]\">\n <Separator />\n {/ Md expand button /}\n {showExpandButton && (\n <Tooltip>\n <TooltipTrigger asChild>\n <button\n onClick={onExpandClick}\n className=\"hidden md:flex lg:hidden absolute top-1/2 -translate-y-1/2 right-0 translate-x-[calc(50%+1rem)] size-8 items-center justify-center rounded-full border border-gray-200 bg-white hover:bg-gray-100 cursor-pointer transition-colors z-10\"\n >\n <IconChevronRight size={16} className=\"text-gray-500\" />\n </button>\n </TooltipTrigger>\n <TooltipContent side=\"right\">\n {translate(\"common.layout.navbar.expandMenu\")}\n </TooltipContent>\n </Tooltip>\n )}\n {/ Desktop expand button /}\n {!isDesktopExpanded && (\n <Tooltip>\n <TooltipTrigger asChild>\n <button\n onClick={toggleDesktop}\n className=\"hidden lg:flex absolute top-1/2 -translate-y-1/2 right-0 translate-x-[calc(50%+1rem)] size-8 items-center justify-center rounded-full border border-gray-200 bg-white hover:bg-gray-100 cursor-pointer transition-colors z-10\"\n >\n <IconChevronRight size={16} className=\"text-gray-500\" />\n </button>\n </TooltipTrigger>\n <TooltipContent side=\"right\">\n {translate(\"common.layout.navbar.expandMenu\")}\n </TooltipContent>\n </Tooltip>\n )}\n </div>\n\n {/ Ícones de app — 8px entre eles (Figma 5929:2676) /}\n <div className=\"flex flex-col gap-2 items-center\">\n {/ GreatPages icon /}\n <div className=\"relative\">\n <Tooltip>\n <TooltipTrigger asChild>\n <Link\n href={appIconHref}\n className={cn(\n \"size-10 rounded-lg cursor-pointer flex items-center justify-center border-2 ring-2 transition-colors duration-300\",\n activeApp === \"gpages\"\n ? isDefaultWl\n ? \"bg-cyan-100 border-white ring-cyan-300\"\n : \"border-white ring-transparent\"\n : isDefaultWl\n ? \"hover:bg-gray-100 border-transparent ring-transparent\"\n : \"border-transparent ring-transparent\",\n )}\n style={\n !isDefaultWl\n ? {\n backgroundColor: primaryColor,\n boxShadow:\n activeApp === \"gpages\"\n ? `0 0 0 2px ${primaryColor}40`\n : undefined,\n opacity: activeApp !== \"gpages\" ? 0.2 : undefined,\n }\n : undefined\n }\n >\n {isDefaultWl ? (\n <Image\n src=\"/icons/icon-navbar.svg\"\n alt=\"GreatPages\"\n width={24}\n height={24}\n />\n ) : (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"white\"\n strokeWidth=\"2\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n >\n <path d=\"M4 8h16\" />\n <path d=\"M4 6a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2l0 -12\" />\n <path d=\"M8 4v4\" />\n </svg>\n )}\n </Link>\n </TooltipTrigger>\n <TooltipContent side=\"right\">\n {isDefaultWl\n ? translate(\"common.layout.navbar.greatPages\")\n : translate(\"common.layout.navbar.pages\")}\n </TooltipContent>\n </Tooltip>\n <div\n className={cn(\n \"absolute -left-4 top-1/2 -translate-y-1/2 z-10 w-[3px] h-5 rounded-r-xl transition-opacity duration-300\",\n isDefaultWl ? \"bg-cyan-300\" : \"\",\n activeApp === \"gpages\" ? \"opacity-100\" : \"opacity-0\",\n )}\n style={\n !isDefaultWl ? { backgroundColor: primaryColor } : undefined\n }\n />\n </div>\n\n {/ GreatDomain icon */}\n {domainIconHref ? (\n <div className=\"relative\">\n <Tooltip>\n <TooltipTrigger asChild>\n <Link\n href={domainIconHref}\n aria-label={\n isDefaultWl\n ? translate(\"common.layout.navbar.greatDomain\")\n : translate(\"common.layout.navbar.domains\")\n }\n className={cn(\n \"size-10 rounded-[10px] cursor-pointer flex items-center justify-center border-2 ring-2 transition-colors duration-300\",\n activeApp === \"gdomain\"\n ? isDefaultWl\n ? \"bg-[#EDE9FE] border-white ring-[#C092FF]\"\n : \"border-white ring-transparent\"\n : isDefaultWl\n ? \"hover:bg-gray-100 border-transparent ring-transparent\"\n : \"border-transparent ring-transparent\",\n )}\n style={\n !isDefaultWl\n ? {\n backgroundColor: primaryColor,\n boxShadow:\n activeApp === \"gdomain\"\n ? `0 0 0 2px ${primaryColor}40`\n : undefined,\n opacity: activeApp !== \"gdomain\" ? 0.2 : undefined,\n }\n : undefined\n }\n >\n {isDefaultWl ? (\n <GreatDomainIcon active={activeApp === \"gdomain\"} />\n ) : (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"white\"\n strokeWidth=\"2\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n >\n <path d=\"M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0\" />\n <path d=\"M3.6 9h16.8\" />\n <path d=\"M3.6 15h16.8\" />\n <path d=\"M11.5 3a17 17 0 0 0 0 18\" />\n <path d=\"M12.5 3a17 17 0 0 1 0 18\" />\n </svg>\n )}\n </Link>\n </TooltipTrigger>\n <TooltipContent side=\"right\">\n {isDefaultWl\n ? translate(\"common.layout.navbar.greatDomain\")\n : translate(\"common.layout.navbar.domains\")}\n </TooltipContent>\n </Tooltip>\n <div\n className={cn(\n \"absolute -left-4 top-1/2 -translate-y-1/2 z-10 w-[3px] h-5 rounded-r-xl transition-opacity duration-300\",\n isDefaultWl ? \"bg-[#984DFF]\" : \"\",\n activeApp === \"gdomain\" ? \"opacity-100\" : \"opacity-0\",\n )}\n style={\n !isDefaultWl ? { backgroundColor: primaryColor } : undefined\n }\n />\n </div>\n ) : null}\n </div>\n </div>\n\n <div className=\"flex flex-col items-center gap-2\">{children}</div>\n </div>\n );\n}\n\nexport { NavBar };\nexport type { NavBarProps };\n"],"mappings":"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","names":[]}

package/dist/components/ui/form/PhoneInput.mjs CHANGED Viewed

@@ -28,7 +28,7 @@ function PhoneInput({
   const translate = useTranslations();
   const parsed = parsePhoneValue(value ?? "");
   const [selectedCountry, setSelectedCountry] = useState(parsed.country);
-  const [phoneNumber, setPhoneNumber] = useState(parsed.number);
+  const [phoneNumber, setPhoneNumber] = useState(formatNational(parsed.number, parsed.country.iso));
   const [search, setSearch] = useState("");
   const [open, setOpen] = useState(false);
   const prevValueRef = useRef(value);

package/dist/components/ui/form/PhoneInput.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../src/components/ui/form/PhoneInput.tsx"],"sourcesContent":["'use client';\n\nimport { useState, useEffect, useRef } from 'react';\nimport { useTranslations } from 'next-intl';\nimport { AsYouType, CountryCode } from 'libphonenumber-js';\nimport { Input, Separator, Popover, PopoverTrigger, PopoverContent, cn } from '@greatapps/common';\nimport { IconChevronDown, IconSearch } from '@tabler/icons-react';\nimport { COUNTRIES, Country, flagUrl, parsePhoneValue } from '../../../utils/countries';\n\nfunction formatNational(digits: string, iso: string): string {\n const raw = digits.replace(/\\D/g, '');\n if (!raw) return '';\n return new AsYouType(iso as CountryCode).input(raw);\n}\n\ninterface PhoneInputProps {\n value?: string;\n onChange?: (value: string) => void;\n label?: string;\n optional?: boolean;\n required?: boolean;\n hintMessage?: string;\n error?: boolean;\n errorMessage?: string;\n placeholder?: string;\n disabled?: boolean;\n classnameContainer?: string;\n className?: string;\n}\n\nexport default function PhoneInput({\n value,\n onChange,\n label,\n optional = false,\n required = false,\n hintMessage,\n error = false,\n errorMessage,\n placeholder,\n disabled = false,\n classnameContainer,\n className,\n}: PhoneInputProps) {\n const translate = useTranslations();\n const parsed = parsePhoneValue(value ?? '');\n const [selectedCountry, setSelectedCountry] = useState<Country>(parsed.country);\n const [phoneNumber, setPhoneNumber] = useState(parsed.number);\n const [search, setSearch] = useState('');\n const [open, setOpen] = useState(false);\n const prevValueRef = useRef(value);\n const inputRef = useRef<HTMLInputElement>(null);\n\n useEffect(() => {\n if (value !== prevValueRef.current) {\n prevValueRef.current = value;\n const p = parsePhoneValue(value ?? '');\n setSelectedCountry(p.country);\n setPhoneNumber(formatNational(p.number, p.country.iso));\n }\n }, [value]);\n\n const emit = (country: Country, number: string) => {\n onChange?.(`${country.dial} ${number}`);\n };\n\n const handleCountrySelect = (country: Country) => {\n const reformatted = formatNational(phoneNumber, country.iso);\n setSelectedCountry(country);\n setPhoneNumber(reformatted);\n setOpen(false);\n setSearch('');\n emit(country, reformatted);\n };\n\n const handleNumberChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n const rawInput = e.target.value;\n const digits = rawInput.replace(/\\D/g, '');\n if (digits.length > 15) return;\n\n const cursorPos = e.target.selectionStart ?? rawInput.length;\n const digitsBeforeCursor = rawInput.slice(0, cursorPos).replace(/\\D/g, '').length;\n\n const formatted = formatNational(rawInput, selectedCountry.iso);\n setPhoneNumber(formatted);\n emit(selectedCountry, formatted);\n\n requestAnimationFrame(() => {\n if (!inputRef.current) return;\n let digitCount = 0;\n let newPos = formatted.length;\n for (let i = 0; i < formatted.length; i++) {\n if (/\\d/.test(formatted[i])) {\n digitCount++;\n if (digitCount === digitsBeforeCursor) {\n newPos = i + 1;\n break;\n }\n }\n }\n inputRef.current.setSelectionRange(newPos, newPos);\n });\n };\n\n const filtered = COUNTRIES.filter(\n (c) =>\n c.name.toLowerCase().includes(search.toLowerCase()) \|\|\n c.dial.includes(search) \|\|\n c.iso.toLowerCase().includes(search.toLowerCase())\n );\n\n const finalMessage = error && errorMessage ? errorMessage : hintMessage;\n const showMessage = finalMessage && finalMessage.trim() !== '';\n\n return (\n <div className=\"flex flex-col gap-1.5\">\n {label && (\n <div className=\"flex items-center gap-1 paragraph-xsmall-semibold\">\n <span className=\"text-zinc-600\">{label}</span>\n {optional && <span className=\"text-zinc-500\">{translate('common.forms.phoneInput.optional')}</span>}\n {required && <span className=\"text-red-600\">*</span>}\n </div>\n )}\n\n <div\n className={cn(\n 'flex gap-2 items-center border rounded-lg h-10 transition-colors',\n error\n ? 'border-red-600 hover:border-red-700'\n : 'border-zinc-200 hover:border-zinc-400 focus-within:border-zinc-950',\n disabled && 'cursor-not-allowed',\n classnameContainer\n )}\n >\n <Popover open={open} onOpenChange={setOpen}>\n <PopoverTrigger asChild>\n <button\n type=\"button\"\n className=\"flex items-center gap-1.5 px-3 h-full shrink-0 focus:outline-none\"\n disabled={disabled}\n >\n <img src={flagUrl(selectedCountry.iso)} alt={selectedCountry.iso} className=\"w-5 h-5 rounded-full\" />\n <span className=\"paragraph-small-regular text-zinc-950\">{selectedCountry.dial}</span>\n <IconChevronDown size={14} className={cn(\"text-zinc-500 transition-transform duration-200\", open && \"rotate-180\")} />\n </button>\n </PopoverTrigger>\n <PopoverContent className=\"w-72 p-0\" align=\"start\" side=\"top\">\n <div className=\"flex items-center gap-2 p-2 border-b border-zinc-100\">\n <IconSearch size={14} className=\"text-zinc-400 shrink-0\" />\n <input\n type=\"text\"\n className=\"flex-1 text-sm outline-none placeholder:text-zinc-400\"\n placeholder={translate('common.forms.phoneInput.searchPlaceholder')}\n value={search}\n onChange={(e) => setSearch(e.target.value)}\n autoFocus\n />\n </div>\n <div className=\"max-h-60 overflow-y-auto overscroll-contain\" onTouchMove={(e) => e.stopPropagation()} onWheel={(e) => e.stopPropagation()}>\n {filtered.map((country) => (\n <button\n key={country.iso}\n type=\"button\"\n className={cn(\n 'flex items-center gap-2.5 w-full px-3 py-2 text-left hover:bg-zinc-50 transition-colors',\n selectedCountry.iso === country.iso && 'bg-zinc-100'\n )}\n onClick={() => handleCountrySelect(country)}\n >\n <img src={flagUrl(country.iso)} alt={country.iso} className=\"w-5 h-5 rounded-full shrink-0\" />\n <span className=\"paragraph-small-regular text-zinc-950 flex-1 truncate\">\n {country.name}\n </span>\n <span className=\"paragraph-small-regular text-zinc-500 shrink-0\">\n {country.dial}\n </span>\n </button>\n ))}\n {filtered.length === 0 && (\n <p className=\"text-sm text-zinc-500 p-3 text-center\">{translate('common.forms.phoneInput.emptyMessage')}</p>\n )}\n </div>\n </PopoverContent>\n </Popover>\n\n <Separator orientation=\"vertical\" />\n\n <Input\n ref={inputRef}\n type=\"tel\"\n value={phoneNumber}\n onChange={handleNumberChange}\n placeholder={placeholder}\n disabled={disabled}\n className={cn(\n 'paragraph-small-medium w-full h-full text-zinc-950 border-0 focus-visible:ring-0 focus-visible:ring-offset-0',\n disabled && 'cursor-not-allowed',\n className\n )}\n />\n </div>\n\n {showMessage && (\n <span className={cn('paragraph-xsmall-medium', error ? 'text-red-600' : 'text-zinc-600')}>\n {finalMessage}\n </span>\n )}\n </div>\n );\n}\n"],"mappings":"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","names":[]}
1	+ {"version":3,"sources":["../../../../src/components/ui/form/PhoneInput.tsx"],"sourcesContent":["'use client';\n\nimport { useState, useEffect, useRef } from 'react';\nimport { useTranslations } from 'next-intl';\nimport { AsYouType, CountryCode } from 'libphonenumber-js';\nimport { Input, Separator, Popover, PopoverTrigger, PopoverContent, cn } from '@greatapps/common';\nimport { IconChevronDown, IconSearch } from '@tabler/icons-react';\nimport { COUNTRIES, Country, flagUrl, parsePhoneValue } from '../../../utils/countries';\n\nfunction formatNational(digits: string, iso: string): string {\n const raw = digits.replace(/\\D/g, '');\n if (!raw) return '';\n return new AsYouType(iso as CountryCode).input(raw);\n}\n\ninterface PhoneInputProps {\n value?: string;\n onChange?: (value: string) => void;\n label?: string;\n optional?: boolean;\n required?: boolean;\n hintMessage?: string;\n error?: boolean;\n errorMessage?: string;\n placeholder?: string;\n disabled?: boolean;\n classnameContainer?: string;\n className?: string;\n}\n\nexport default function PhoneInput({\n value,\n onChange,\n label,\n optional = false,\n required = false,\n hintMessage,\n error = false,\n errorMessage,\n placeholder,\n disabled = false,\n classnameContainer,\n className,\n}: PhoneInputProps) {\n const translate = useTranslations();\n const parsed = parsePhoneValue(value ?? '');\n const [selectedCountry, setSelectedCountry] = useState<Country>(parsed.country);\n const [phoneNumber, setPhoneNumber] = useState(formatNational(parsed.number, parsed.country.iso));\n const [search, setSearch] = useState('');\n const [open, setOpen] = useState(false);\n const prevValueRef = useRef(value);\n const inputRef = useRef<HTMLInputElement>(null);\n\n useEffect(() => {\n if (value !== prevValueRef.current) {\n prevValueRef.current = value;\n const p = parsePhoneValue(value ?? '');\n setSelectedCountry(p.country);\n setPhoneNumber(formatNational(p.number, p.country.iso));\n }\n }, [value]);\n\n const emit = (country: Country, number: string) => {\n onChange?.(`${country.dial} ${number}`);\n };\n\n const handleCountrySelect = (country: Country) => {\n const reformatted = formatNational(phoneNumber, country.iso);\n setSelectedCountry(country);\n setPhoneNumber(reformatted);\n setOpen(false);\n setSearch('');\n emit(country, reformatted);\n };\n\n const handleNumberChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n const rawInput = e.target.value;\n const digits = rawInput.replace(/\\D/g, '');\n if (digits.length > 15) return;\n\n const cursorPos = e.target.selectionStart ?? rawInput.length;\n const digitsBeforeCursor = rawInput.slice(0, cursorPos).replace(/\\D/g, '').length;\n\n const formatted = formatNational(rawInput, selectedCountry.iso);\n setPhoneNumber(formatted);\n emit(selectedCountry, formatted);\n\n requestAnimationFrame(() => {\n if (!inputRef.current) return;\n let digitCount = 0;\n let newPos = formatted.length;\n for (let i = 0; i < formatted.length; i++) {\n if (/\\d/.test(formatted[i])) {\n digitCount++;\n if (digitCount === digitsBeforeCursor) {\n newPos = i + 1;\n break;\n }\n }\n }\n inputRef.current.setSelectionRange(newPos, newPos);\n });\n };\n\n const filtered = COUNTRIES.filter(\n (c) =>\n c.name.toLowerCase().includes(search.toLowerCase()) \|\|\n c.dial.includes(search) \|\|\n c.iso.toLowerCase().includes(search.toLowerCase())\n );\n\n const finalMessage = error && errorMessage ? errorMessage : hintMessage;\n const showMessage = finalMessage && finalMessage.trim() !== '';\n\n return (\n <div className=\"flex flex-col gap-1.5\">\n {label && (\n <div className=\"flex items-center gap-1 paragraph-xsmall-semibold\">\n <span className=\"text-zinc-600\">{label}</span>\n {optional && <span className=\"text-zinc-500\">{translate('common.forms.phoneInput.optional')}</span>}\n {required && <span className=\"text-red-600\">*</span>}\n </div>\n )}\n\n <div\n className={cn(\n 'flex gap-2 items-center border rounded-lg h-10 transition-colors',\n error\n ? 'border-red-600 hover:border-red-700'\n : 'border-zinc-200 hover:border-zinc-400 focus-within:border-zinc-950',\n disabled && 'cursor-not-allowed',\n classnameContainer\n )}\n >\n <Popover open={open} onOpenChange={setOpen}>\n <PopoverTrigger asChild>\n <button\n type=\"button\"\n className=\"flex items-center gap-1.5 px-3 h-full shrink-0 focus:outline-none\"\n disabled={disabled}\n >\n <img src={flagUrl(selectedCountry.iso)} alt={selectedCountry.iso} className=\"w-5 h-5 rounded-full\" />\n <span className=\"paragraph-small-regular text-zinc-950\">{selectedCountry.dial}</span>\n <IconChevronDown size={14} className={cn(\"text-zinc-500 transition-transform duration-200\", open && \"rotate-180\")} />\n </button>\n </PopoverTrigger>\n <PopoverContent className=\"w-72 p-0\" align=\"start\" side=\"top\">\n <div className=\"flex items-center gap-2 p-2 border-b border-zinc-100\">\n <IconSearch size={14} className=\"text-zinc-400 shrink-0\" />\n <input\n type=\"text\"\n className=\"flex-1 text-sm outline-none placeholder:text-zinc-400\"\n placeholder={translate('common.forms.phoneInput.searchPlaceholder')}\n value={search}\n onChange={(e) => setSearch(e.target.value)}\n autoFocus\n />\n </div>\n <div className=\"max-h-60 overflow-y-auto overscroll-contain\" onTouchMove={(e) => e.stopPropagation()} onWheel={(e) => e.stopPropagation()}>\n {filtered.map((country) => (\n <button\n key={country.iso}\n type=\"button\"\n className={cn(\n 'flex items-center gap-2.5 w-full px-3 py-2 text-left hover:bg-zinc-50 transition-colors',\n selectedCountry.iso === country.iso && 'bg-zinc-100'\n )}\n onClick={() => handleCountrySelect(country)}\n >\n <img src={flagUrl(country.iso)} alt={country.iso} className=\"w-5 h-5 rounded-full shrink-0\" />\n <span className=\"paragraph-small-regular text-zinc-950 flex-1 truncate\">\n {country.name}\n </span>\n <span className=\"paragraph-small-regular text-zinc-500 shrink-0\">\n {country.dial}\n </span>\n </button>\n ))}\n {filtered.length === 0 && (\n <p className=\"text-sm text-zinc-500 p-3 text-center\">{translate('common.forms.phoneInput.emptyMessage')}</p>\n )}\n </div>\n </PopoverContent>\n </Popover>\n\n <Separator orientation=\"vertical\" />\n\n <Input\n ref={inputRef}\n type=\"tel\"\n value={phoneNumber}\n onChange={handleNumberChange}\n placeholder={placeholder}\n disabled={disabled}\n className={cn(\n 'paragraph-small-medium w-full h-full text-zinc-950 border-0 focus-visible:ring-0 focus-visible:ring-offset-0',\n disabled && 'cursor-not-allowed',\n className\n )}\n />\n </div>\n\n {showMessage && (\n <span className={cn('paragraph-xsmall-medium', error ? 'text-red-600' : 'text-zinc-600')}>\n {finalMessage}\n </span>\n )}\n </div>\n );\n}\n"],"mappings":";AAqHQ,SACE,KADF;AAnHR,SAAS,UAAU,WAAW,cAAc;AAC5C,SAAS,uBAAuB;AAChC,SAAS,iBAA8B;AACvC,SAAS,OAAO,WAAW,SAAS,gBAAgB,gBAAgB,UAAU;AAC9E,SAAS,iBAAiB,kBAAkB;AAC5C,SAAS,WAAoB,SAAS,uBAAuB;AAE7D,SAAS,eAAe,QAAgB,KAAqB;AAC3D,QAAM,MAAM,OAAO,QAAQ,OAAO,EAAE;AACpC,MAAI,CAAC,IAAK,QAAO;AACjB,SAAO,IAAI,UAAU,GAAkB,EAAE,MAAM,GAAG;AACpD;AAiBe,SAAR,WAA4B;AAAA,EACjC;AAAA,EACA;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX,WAAW;AAAA,EACX;AAAA,EACA,QAAQ;AAAA,EACR;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX;AAAA,EACA;AACF,GAAoB;AAClB,QAAM,YAAY,gBAAgB;AAClC,QAAM,SAAS,gBAAgB,SAAS,EAAE;AAC1C,QAAM,CAAC,iBAAiB,kBAAkB,IAAI,SAAkB,OAAO,OAAO;AAC9E,QAAM,CAAC,aAAa,cAAc,IAAI,SAAS,eAAe,OAAO,QAAQ,OAAO,QAAQ,GAAG,CAAC;AAChG,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAS,EAAE;AACvC,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,KAAK;AACtC,QAAM,eAAe,OAAO,KAAK;AACjC,QAAM,WAAW,OAAyB,IAAI;AAE9C,YAAU,MAAM;AACd,QAAI,UAAU,aAAa,SAAS;AAClC,mBAAa,UAAU;AACvB,YAAM,IAAI,gBAAgB,SAAS,EAAE;AACrC,yBAAmB,EAAE,OAAO;AAC5B,qBAAe,eAAe,EAAE,QAAQ,EAAE,QAAQ,GAAG,CAAC;AAAA,IACxD;AAAA,EACF,GAAG,CAAC,KAAK,CAAC;AAEV,QAAM,OAAO,CAAC,SAAkB,WAAmB;AACjD,eAAW,GAAG,QAAQ,IAAI,IAAI,MAAM,EAAE;AAAA,EACxC;AAEA,QAAM,sBAAsB,CAAC,YAAqB;AAChD,UAAM,cAAc,eAAe,aAAa,QAAQ,GAAG;AAC3D,uBAAmB,OAAO;AAC1B,mBAAe,WAAW;AAC1B,YAAQ,KAAK;AACb,cAAU,EAAE;AACZ,SAAK,SAAS,WAAW;AAAA,EAC3B;AAEA,QAAM,qBAAqB,CAAC,MAA2C;AACrE,UAAM,WAAW,EAAE,OAAO;AAC1B,UAAM,SAAS,SAAS,QAAQ,OAAO,EAAE;AACzC,QAAI,OAAO,SAAS,GAAI;AAExB,UAAM,YAAY,EAAE,OAAO,kBAAkB,SAAS;AACtD,UAAM,qBAAqB,SAAS,MAAM,GAAG,SAAS,EAAE,QAAQ,OAAO,EAAE,EAAE;AAE3E,UAAM,YAAY,eAAe,UAAU,gBAAgB,GAAG;AAC9D,mBAAe,SAAS;AACxB,SAAK,iBAAiB,SAAS;AAE/B,0BAAsB,MAAM;AAC1B,UAAI,CAAC,SAAS,QAAS;AACvB,UAAI,aAAa;AACjB,UAAI,SAAS,UAAU;AACvB,eAAS,IAAI,GAAG,IAAI,UAAU,QAAQ,KAAK;AACzC,YAAI,KAAK,KAAK,UAAU,CAAC,CAAC,GAAG;AAC3B;AACA,cAAI,eAAe,oBAAoB;AACrC,qBAAS,IAAI;AACb;AAAA,UACF;AAAA,QACF;AAAA,MACF;AACA,eAAS,QAAQ,kBAAkB,QAAQ,MAAM;AAAA,IACnD,CAAC;AAAA,EACH;AAEA,QAAM,WAAW,UAAU;AAAA,IACzB,CAAC,MACC,EAAE,KAAK,YAAY,EAAE,SAAS,OAAO,YAAY,CAAC,KAClD,EAAE,KAAK,SAAS,MAAM,KACtB,EAAE,IAAI,YAAY,EAAE,SAAS,OAAO,YAAY,CAAC;AAAA,EACrD;AAEA,QAAM,eAAe,SAAS,eAAe,eAAe;AAC5D,QAAM,cAAc,gBAAgB,aAAa,KAAK,MAAM;AAE5D,SACE,qBAAC,SAAI,WAAU,yBACZ;AAAA,aACC,qBAAC,SAAI,WAAU,qDACb;AAAA,0BAAC,UAAK,WAAU,iBAAiB,iBAAM;AAAA,MACtC,YAAY,oBAAC,UAAK,WAAU,iBAAiB,oBAAU,kCAAkC,GAAE;AAAA,MAC3F,YAAY,oBAAC,UAAK,WAAU,gBAAe,eAAC;AAAA,OAC/C;AAAA,IAGF;AAAA,MAAC;AAAA;AAAA,QACC,WAAW;AAAA,UACT;AAAA,UACA,QACI,wCACA;AAAA,UACJ,YAAY;AAAA,UACZ;AAAA,QACF;AAAA,QAEA;AAAA,+BAAC,WAAQ,MAAY,cAAc,SACjC;AAAA,gCAAC,kBAAe,SAAO,MACrB;AAAA,cAAC;AAAA;AAAA,gBACC,MAAK;AAAA,gBACL,WAAU;AAAA,gBACV;AAAA,gBAEA;AAAA,sCAAC,SAAI,KAAK,QAAQ,gBAAgB,GAAG,GAAG,KAAK,gBAAgB,KAAK,WAAU,wBAAuB;AAAA,kBACnG,oBAAC,UAAK,WAAU,yCAAyC,0BAAgB,MAAK;AAAA,kBAC9E,oBAAC,mBAAgB,MAAM,IAAI,WAAW,GAAG,mDAAmD,QAAQ,YAAY,GAAG;AAAA;AAAA;AAAA,YACrH,GACF;AAAA,YACA,qBAAC,kBAAe,WAAU,YAAW,OAAM,SAAQ,MAAK,OACtD;AAAA,mCAAC,SAAI,WAAU,wDACb;AAAA,oCAAC,cAAW,MAAM,IAAI,WAAU,0BAAyB;AAAA,gBACzD;AAAA,kBAAC;AAAA;AAAA,oBACC,MAAK;AAAA,oBACL,WAAU;AAAA,oBACV,aAAa,UAAU,2CAA2C;AAAA,oBAClE,OAAO;AAAA,oBACP,UAAU,CAAC,MAAM,UAAU,EAAE,OAAO,KAAK;AAAA,oBACzC,WAAS;AAAA;AAAA,gBACX;AAAA,iBACF;AAAA,cACA,qBAAC,SAAI,WAAU,+CAA8C,aAAa,CAAC,MAAM,EAAE,gBAAgB,GAAG,SAAS,CAAC,MAAM,EAAE,gBAAgB,GACrI;AAAA,yBAAS,IAAI,CAAC,YACb;AAAA,kBAAC;AAAA;AAAA,oBAEC,MAAK;AAAA,oBACL,WAAW;AAAA,sBACT;AAAA,sBACA,gBAAgB,QAAQ,QAAQ,OAAO;AAAA,oBACzC;AAAA,oBACA,SAAS,MAAM,oBAAoB,OAAO;AAAA,oBAE1C;AAAA,0CAAC,SAAI,KAAK,QAAQ,QAAQ,GAAG,GAAG,KAAK,QAAQ,KAAK,WAAU,iCAAgC;AAAA,sBAC5F,oBAAC,UAAK,WAAU,yDACb,kBAAQ,MACX;AAAA,sBACA,oBAAC,UAAK,WAAU,kDACb,kBAAQ,MACX;AAAA;AAAA;AAAA,kBAdK,QAAQ;AAAA,gBAef,CACD;AAAA,gBACA,SAAS,WAAW,KACnB,oBAAC,OAAE,WAAU,yCAAyC,oBAAU,sCAAsC,GAAE;AAAA,iBAE5G;AAAA,eACF;AAAA,aACF;AAAA,UAEA,oBAAC,aAAU,aAAY,YAAW;AAAA,UAElC;AAAA,YAAC;AAAA;AAAA,cACC,KAAK;AAAA,cACL,MAAK;AAAA,cACL,OAAO;AAAA,cACP,UAAU;AAAA,cACV;AAAA,cACA;AAAA,cACA,WAAW;AAAA,gBACT;AAAA,gBACA,YAAY;AAAA,gBACZ;AAAA,cACF;AAAA;AAAA,UACF;AAAA;AAAA;AAAA,IACF;AAAA,IAEC,eACC,oBAAC,UAAK,WAAW,GAAG,2BAA2B,QAAQ,iBAAiB,eAAe,GACpF,wBACH;AAAA,KAEJ;AAEJ;","names":[]}