@cupcodev/ui 1.2.3 → 1.2.4

package/dist/index.cjs

@@ -2675,9 +2675,54 @@ var NavbarCupcode = ({
   className
 }) => {
   const [isOpen, setIsOpen] = React10.useState(false);
+  const navRef = React10.useRef(null);
+  const mobileMenuId = React10.useId();
+  React10.useEffect(() => {
+    if (!isOpen) return;
+    const handlePointerDown = (event) => {
+      var _a65;
+      const target = event.target;
+      if (!(target instanceof Node)) return;
+      if (!((_a65 = navRef.current) == null ? void 0 : _a65.contains(target))) {
+        setIsOpen(false);
+      }
+    };
+    const handleEscape = (event) => {
+      if (event.key === "Escape") {
+        setIsOpen(false);
+      }
+    };
+    document.addEventListener("pointerdown", handlePointerDown);
+    document.addEventListener("keydown", handleEscape);
+    return () => {
+      document.removeEventListener("pointerdown", handlePointerDown);
+      document.removeEventListener("keydown", handleEscape);
+    };
+  }, [isOpen]);
+  React10.useEffect(() => {
+    if (!isOpen) return;
+    const { style } = document.body;
+    const previousOverflow = style.overflow;
+    style.overflow = "hidden";
+    return () => {
+      style.overflow = previousOverflow;
+    };
+  }, [isOpen]);
+  React10.useEffect(() => {
+    const handleResize = () => {
+      if (window.innerWidth >= 768) {
+        setIsOpen(false);
+      }
+    };
+    window.addEventListener("resize", handleResize);
+    return () => {
+      window.removeEventListener("resize", handleResize);
+    };
+  }, []);
   return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
     "nav",
     {
+      ref: navRef,
       className: cn(
         "fixed top-0 left-0 right-0 z-[200] pointer-events-auto",
         "glass border-b border-border",
@@ -2736,38 +2781,49 @@ var NavbarCupcode = ({
           /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
             "button",
             {
+              type: "button",
               onClick: () => setIsOpen(!isOpen),
-              className: "md:hidden p-2 rounded-lg hover:bg-primary/10 transition-colors",
-              children: isOpen ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_lucide_react5.X, { className: "h-6 w-6 text-foreground" }) : /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_lucide_react5.Menu, { className: "h-6 w-6 text-foreground" })
+              "aria-controls": mobileMenuId,
+              "aria-expanded": isOpen,
+              "aria-label": isOpen ? "Fechar menu de navega\xE7\xE3o" : "Abrir menu de navega\xE7\xE3o",
+              className: "md:hidden inline-flex h-10 w-10 items-center justify-center rounded-lg transition-colors hover:bg-primary/10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/40",
+              children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_lucide_react5.Menu, { className: cn("h-6 w-6 text-foreground", isOpen && "text-primary") })
             }
           )
         ] }),
-        isOpen && /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "md:hidden py-4 space-y-3 animate-slide-up", children: [
-          items.map((item, index) => {
-            const key = `${item.label}-${index}`;
-            const isActive = item.isActive;
-            const classes = cn(
-              "flex items-center gap-2 px-4 py-2 text-sm font-semibold text-foreground hover:bg-primary/10 rounded-lg transition-colors",
-              isActive && "text-primary"
-            );
-            const handleClick = (event) => {
-              var _a65;
-              (_a65 = item.onClick) == null ? void 0 : _a65.call(item, event);
-              setIsOpen(false);
-            };
-            if (item.href.startsWith("#")) {
-              return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("a", { href: item.href, className: classes, onClick: handleClick, children: [
-                item.icon && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { children: item.icon }),
-                item.label
-              ] }, key);
-            }
-            return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("a", { href: item.href, className: classes, onClick: handleClick, children: [
-              item.icon && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { children: item.icon }),
-              item.label
-            ] }, key);
-          }),
-          actions && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "px-4 pt-2", children: actions })
-        ] })
+        isOpen && /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+          "div",
+          {
+            id: mobileMenuId,
+            className: "md:hidden max-h-[calc(100dvh-4rem)] space-y-3 overflow-y-auto border-t border-border/60 py-4 animate-slide-up",
+            children: [
+              items.map((item, index) => {
+                const key = `${item.label}-${index}`;
+                const isActive = item.isActive;
+                const classes = cn(
+                  "flex min-h-11 items-center gap-2 rounded-lg px-4 py-2.5 text-sm font-semibold text-foreground transition-colors hover:bg-primary/10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/40",
+                  isActive && "text-primary"
+                );
+                const handleClick = (event) => {
+                  var _a65;
+                  (_a65 = item.onClick) == null ? void 0 : _a65.call(item, event);
+                  setIsOpen(false);
+                };
+                if (item.href.startsWith("#")) {
+                  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("a", { href: item.href, className: classes, onClick: handleClick, children: [
+                    item.icon && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { children: item.icon }),
+                    item.label
+                  ] }, key);
+                }
+                return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("a", { href: item.href, className: classes, onClick: handleClick, children: [
+                  item.icon && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { children: item.icon }),
+                  item.label
+                ] }, key);
+              }),
+              actions && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "px-4 pb-[max(env(safe-area-inset-bottom),0.5rem)] pt-2", children: actions })
+            ]
+          }
+        )
       ] })
     }
   );
@@ -10118,7 +10174,7 @@ var UserMenuCupcode = ({
                 type: "button",
                 onClick: () => openChatPanel(),
                 className: cn(
-                  "relative z-0 inline-flex h-9 min-w-[2.55rem] origin-right items-center justify-center rounded-[12px] border border-border/70 bg-background/80 px-2.5 text-foreground shadow-[0_10px_22px_-18px_rgba(0,0,0,0.75)] transition-[transform,opacity] duration-[260ms] will-change-transform",
+                  "relative z-0 inline-flex h-9 min-w-[2.55rem] origin-right items-center justify-center rounded-[12px] border border-border/70 bg-background/80 px-2.5 text-foreground shadow-[0_10px_22px_-18px_rgba(0,0,0,0.75)] transition-[transform,opacity] [transition-duration:260ms] will-change-transform",
                   prefersReducedMotion ? isChatIndicatorVisible ? "opacity-100" : "opacity-0" : isChatIndicatorVisible ? "translate-x-0 opacity-100" : "translate-x-[10px] opacity-0"
                 ),
                 style: {
@@ -10131,7 +10187,7 @@ var UserMenuCupcode = ({
                     "span",
                     {
                       className: cn(
-                        "relative inline-flex transition-[transform,opacity] duration-[220ms]",
+                        "relative inline-flex transition-[transform,opacity] [transition-duration:220ms]",
                         prefersReducedMotion ? isChatIndicatorVisible ? "scale-100 opacity-100" : "scale-100 opacity-0" : isChatIndicatorVisible ? isChatIndicatorIntroAnimating ? "scale-[1.08] opacity-100" : "scale-100 opacity-100" : "scale-[0.84] opacity-0"
                       ),
                       style: {
@@ -10144,7 +10200,7 @@ var UserMenuCupcode = ({
                     "span",
                     {
                       className: cn(
-                        "absolute -right-1 -top-1 inline-flex h-4 min-w-[1rem] items-center justify-center rounded-full border border-background bg-destructive px-1 text-[9px] font-bold text-destructive-foreground transition-[transform,opacity] duration-[180ms]",
+                        "absolute -right-1 -top-1 inline-flex h-4 min-w-[1rem] items-center justify-center rounded-full border border-background bg-destructive px-1 text-[9px] font-bold text-destructive-foreground transition-[transform,opacity] [transition-duration:180ms]",
                         prefersReducedMotion ? isChatIndicatorVisible ? "scale-100 opacity-100" : "scale-100 opacity-0" : isChatIndicatorVisible ? isChatBadgePulsing ? "scale-[1.14] opacity-100" : "scale-100 opacity-100" : "scale-[0.72] opacity-0"
                       ),
                       style: {
@@ -26363,14 +26419,31 @@ var sheetVariants = (0, import_class_variance_authority6.cva)(
   }
 );
 var SheetContent = React56.forwardRef(
-  ({ side = "right", className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)(SheetPortal, { children: [
+  ({
+    side = "right",
+    className,
+    children,
+    showCloseButton = false,
+    closeButtonClassName,
+    closeButtonLabel = "Close",
+    ...props
+  }, ref) => /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)(SheetPortal, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(SheetOverlay, {}),
     /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)(SheetPrimitive.Content, { ref, className: cn(sheetVariants({ side }), className), ...props, children: [
       children,
-      /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)(SheetPrimitive.Close, { className: "absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity data-[state=open]:bg-secondary hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(import_lucide_react28.X, { className: "h-4 w-4" }),
-        /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("span", { className: "sr-only", children: "Close" })
-      ] })
+      showCloseButton ? /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)(
+        SheetPrimitive.Close,
+        {
+          className: cn(
+            "absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity data-[state=open]:bg-secondary hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none",
+            closeButtonClassName
+          ),
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(import_lucide_react28.X, { className: "h-4 w-4" }),
+            /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("span", { className: "sr-only", children: closeButtonLabel })
+          ]
+        }
+      ) : null
     ] })
   ] })
 );
@@ -26501,7 +26574,7 @@ var Sidebar = React58.forwardRef(({ side = "left", variant = "sidebar", collapsi
       {
         "data-sidebar": "sidebar",
         "data-mobile": "true",
-        className: "w-[--sidebar-width] bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden",
+        className: "w-[--sidebar-width] bg-sidebar p-0 text-sidebar-foreground",
         style: {
           "--sidebar-width": SIDEBAR_WIDTH_MOBILE
         },

package/dist/index.d.cts

@@ -1308,6 +1308,9 @@ declare const sheetVariants: (props?: ({
     side?: "top" | "right" | "bottom" | "left" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface SheetContentProps extends React$1.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>, VariantProps<typeof sheetVariants> {
+    showCloseButton?: boolean;
+    closeButtonClassName?: string;
+    closeButtonLabel?: string;
 }
 declare const SheetContent: React$1.ForwardRefExoticComponent<SheetContentProps & React$1.RefAttributes<HTMLDivElement>>;
 declare const SheetHeader: {

package/dist/index.d.ts

@@ -1308,6 +1308,9 @@ declare const sheetVariants: (props?: ({
     side?: "top" | "right" | "bottom" | "left" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface SheetContentProps extends React$1.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>, VariantProps<typeof sheetVariants> {
+    showCloseButton?: boolean;
+    closeButtonClassName?: string;
+    closeButtonLabel?: string;
 }
 declare const SheetContent: React$1.ForwardRefExoticComponent<SheetContentProps & React$1.RefAttributes<HTMLDivElement>>;
 declare const SheetHeader: {