gladvn 0.2.18 → 0.2.20

package/src/components/micro/navigation-menu.tsx

@@ -11,6 +11,7 @@ import { NavigationMenu as NavigationMenuPrimitive } from "@base-ui/react/naviga
 import { ChevronDownIcon } from "lucide-react";
 
 import { cn } from "../../lib/utils";
+import { ThemeWrapper } from "./theme-provider";
 
 /**
  * @description A collection of links for navigating websites.
@@ -117,7 +118,9 @@ NavigationMenuContent.displayName = "NavigationMenuContent";
 
 const NavigationMenuPositioner = React.forwardRef<
   React.ComponentRef<typeof NavigationMenuPrimitive.Positioner>,
-  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Positioner>
+  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Positioner> & {
+    container?: React.ComponentProps<typeof NavigationMenuPrimitive.Portal>["container"];
+  }
 >(
   (
     {
@@ -126,27 +129,32 @@ const NavigationMenuPositioner = React.forwardRef<
       sideOffset = 8,
       align = "start",
       alignOffset = 0,
+      container,
       ...props
     },
     ref,
   ) => {
     return (
-      <NavigationMenuPrimitive.Positioner
-        ref={ref}
-        side={side}
-        sideOffset={sideOffset}
-        align={align}
-        alignOffset={alignOffset}
-        className={cn(
-          "isolate z-50 h-(--positioner-height) w-(--positioner-width) max-w-(--available-width) transition-[top,left,right,bottom] duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)] data-instant:transition-none data-[side=bottom]:before:top-[-10px] data-[side=bottom]:before:right-0 data-[side=bottom]:before:left-0",
-          className,
-        )}
-        {...props}
-      >
-        <NavigationMenuPrimitive.Popup className="data-ending-style:easing-[ease] xs:w-(--popup-width) relative h-(--popup-height) w-(--popup-width) origin-(--transform-origin) rounded-lg bg-popover text-popover-foreground shadow ring-1 ring-foreground/10 transition-[opacity,transform,width,height,scale,translate] duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)] outline-none data-ending-style:scale-90 data-ending-style:opacity-0 data-ending-style:duration-150 data-starting-style:scale-90 data-starting-style:opacity-0">
-          <NavigationMenuViewport />
-        </NavigationMenuPrimitive.Popup>
-      </NavigationMenuPrimitive.Positioner>
+      <NavigationMenuPrimitive.Portal container={container}>
+        <ThemeWrapper>
+          <NavigationMenuPrimitive.Positioner
+            ref={ref}
+            side={side}
+            sideOffset={sideOffset}
+            align={align}
+            alignOffset={alignOffset}
+            className={cn(
+              "isolate z-50 h-(--positioner-height) w-(--positioner-width) max-w-(--available-width) transition-[top,left,right,bottom] duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)] data-instant:transition-none data-[side=bottom]:before:top-[-10px] data-[side=bottom]:before:right-0 data-[side=bottom]:before:left-0",
+              className,
+            )}
+            {...props}
+          >
+            <NavigationMenuPrimitive.Popup className="data-ending-style:easing-[ease] xs:w-(--popup-width) relative h-(--popup-height) w-(--popup-width) origin-(--transform-origin) rounded-lg bg-popover text-popover-foreground shadow ring-1 ring-foreground/10 transition-[opacity,transform,width,height,scale,translate] duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)] outline-none data-ending-style:scale-90 data-ending-style:opacity-0 data-ending-style:duration-150 data-starting-style:scale-90 data-starting-style:opacity-0">
+              <NavigationMenuViewport />
+            </NavigationMenuPrimitive.Popup>
+          </NavigationMenuPrimitive.Positioner>
+        </ThemeWrapper>
+      </NavigationMenuPrimitive.Portal>
     );
   },
 );
@@ -182,7 +190,7 @@ const NavigationMenuLink = React.forwardRef<
 });
 NavigationMenuLink.displayName = "NavigationMenuLink";
 
-const NavigationMenuPortal = NavigationMenuPrimitive.Portal;
+
 
 export {
   NavigationMenu,
@@ -190,7 +198,6 @@ export {
   NavigationMenuItem,
   NavigationMenuLink,
   NavigationMenuList,
-  NavigationMenuPortal,
   NavigationMenuPositioner,
   NavigationMenuTrigger,
   navigationMenuTriggerStyle,

package/src/components/micro/popover.tsx

@@ -13,6 +13,7 @@ import * as React from "react";
 import { Popover as PopoverPrimitive } from "@base-ui/react/popover";
 
 import { cn } from "../../lib/utils";
+import { ThemeWrapper } from "./theme-provider";
 
 function Popover(props: React.ComponentProps<typeof PopoverPrimitive.Root>) {
   return <PopoverPrimitive.Root {...props} />;
@@ -32,15 +33,15 @@ const PopoverTrigger = React.forwardRef<
 });
 PopoverTrigger.displayName = "PopoverTrigger";
 
-const PopoverPortal = PopoverPrimitive.Portal;
-
 const PopoverContent = React.forwardRef<
   HTMLDivElement,
   React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Popup> &
     Pick<
       React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Positioner>,
       "align" | "alignOffset" | "side" | "sideOffset"
-    >
+    > & {
+      container?: React.ComponentProps<typeof PopoverPrimitive.Portal>["container"];
+    }
 >(
   (
     {
@@ -49,30 +50,36 @@ const PopoverContent = React.forwardRef<
       alignOffset = 0,
       side = "bottom",
       sideOffset = 4,
+      container,
+      children,
       ...props
     },
     ref,
-  ) => {
-    return (
-      <PopoverPrimitive.Positioner
-        align={align}
-        alignOffset={alignOffset}
-        side={side}
-        sideOffset={sideOffset}
-        className="isolate z-50"
-      >
-        <PopoverPrimitive.Popup
-          ref={ref}
-          data-slot="popover-content"
-          className={cn(
-            "flex origin-(--transform-origin) flex-col gap-2.5 rounded-lg bg-popover p-2.5 text-sm text-popover-foreground shadow-md ring-1 ring-foreground/10 outline-hidden duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
-            className,
-          )}
-          {...props}
-        />
-      </PopoverPrimitive.Positioner>
-    );
-  },
+  ) => (
+    <PopoverPrimitive.Portal container={container}>
+      <ThemeWrapper>
+        <PopoverPrimitive.Positioner
+          align={align}
+          alignOffset={alignOffset}
+          side={side}
+          sideOffset={sideOffset}
+          className="isolate z-50"
+        >
+          <PopoverPrimitive.Popup
+            ref={ref}
+            data-slot="popover-content"
+            className={cn(
+              "flex origin-(--transform-origin) flex-col gap-2.5 rounded-lg bg-popover p-2.5 text-sm text-popover-foreground shadow-md ring-1 ring-foreground/10 outline-hidden duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+              className,
+            )}
+            {...props}
+          >
+            {children}
+          </PopoverPrimitive.Popup>
+        </PopoverPrimitive.Positioner>
+      </ThemeWrapper>
+    </PopoverPrimitive.Portal>
+  ),
 );
 PopoverContent.displayName = "PopoverContent";
 
@@ -126,7 +133,6 @@ export {
   PopoverContent,
   PopoverDescription,
   PopoverHeader,
-  PopoverPortal,
   PopoverTitle,
   PopoverTrigger,
 };

package/src/components/micro/select.tsx

@@ -14,6 +14,7 @@ import { type VariantProps, cva } from "class-variance-authority";
 import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react";
 
 import { cn } from "../../lib/utils";
+import { ThemeWrapper } from "./theme-provider";
 
 const Select = SelectPrimitive.Root;
 
@@ -43,7 +44,7 @@ const SelectValue = React.forwardRef<
 ));
 SelectValue.displayName = "SelectValue";
 
-const SelectPortal = SelectPrimitive.Portal;
+
 
 const selectTriggerVariants = cva(
   "inline-flex items-center justify-between rounded-lg border border-input bg-transparent text-foreground text-sm whitespace-nowrap transition-colors outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:ring-offset-1 focus-visible:ring-offset-background disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:focus-visible:ring-3 aria-invalid:focus-visible:ring-destructive/50 data-placeholder:text-muted-foreground [&_[data-slot=select-value]]:line-clamp-1 [&_[data-slot=select-value]]:flex [&_[data-slot=select-value]]:items-center [&>svg]:pointer-events-none [&>svg]:shrink-0 [&>svg:not([class*='size-'])]:size-4 dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:focus-visible:ring-destructive/50",
@@ -85,7 +86,9 @@ const SelectContent = React.forwardRef<
     Pick<
       SelectPrimitive.Positioner.Props,
       "align" | "alignOffset" | "side" | "sideOffset" | "alignItemWithTrigger"
-    >
+    > & {
+      container?: React.ComponentProps<typeof SelectPrimitive.Portal>["container"];
+    }
 >(
   (
     {
@@ -96,36 +99,41 @@ const SelectContent = React.forwardRef<
       align = "center",
       alignOffset = 0,
       alignItemWithTrigger = false,
+      container,
       ...props
     },
     ref,
   ) => (
-    <SelectPrimitive.Positioner
-      side={side}
-      sideOffset={sideOffset}
-      align={align}
-      alignOffset={alignOffset}
-      alignItemWithTrigger={alignItemWithTrigger}
-      className="isolate z-50"
-    >
-      <SelectPrimitive.Popup
-        ref={ref}
-        data-slot="select-content"
-        data-align-trigger={alignItemWithTrigger}
-        className={cn(
-          "relative isolate z-50 max-h-(--available-height) w-[calc(var(--anchor-width)+8px)] overflow-x-hidden overflow-y-auto rounded-lg bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-foreground/10 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
-          alignItemWithTrigger
-            ? "origin-(--transform-origin) data-[align-trigger=true]:animate-none"
-            : "",
-          className,
-        )}
-        {...props}
-      >
-        <SelectScrollUpButton />
-        <SelectPrimitive.List>{children}</SelectPrimitive.List>
-        <SelectScrollDownButton />
-      </SelectPrimitive.Popup>
-    </SelectPrimitive.Positioner>
+    <SelectPrimitive.Portal container={container}>
+      <ThemeWrapper>
+        <SelectPrimitive.Positioner
+          side={side}
+          sideOffset={sideOffset}
+          align={align}
+          alignOffset={alignOffset}
+          alignItemWithTrigger={alignItemWithTrigger}
+          className="isolate z-50"
+        >
+          <SelectPrimitive.Popup
+            ref={ref}
+            data-slot="select-content"
+            data-align-trigger={alignItemWithTrigger}
+            className={cn(
+              "relative isolate z-50 max-h-(--available-height) w-[calc(var(--anchor-width)+8px)] overflow-x-hidden overflow-y-auto rounded-lg bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-foreground/10 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+              alignItemWithTrigger
+                ? "origin-(--transform-origin) data-[align-trigger=true]:animate-none"
+                : "",
+              className,
+            )}
+            {...props}
+          >
+            <SelectScrollUpButton />
+            <SelectPrimitive.List>{children}</SelectPrimitive.List>
+            <SelectScrollDownButton />
+          </SelectPrimitive.Popup>
+        </SelectPrimitive.Positioner>
+      </ThemeWrapper>
+    </SelectPrimitive.Portal>
   ),
 );
 SelectContent.displayName = "SelectContent";
@@ -225,7 +233,6 @@ export {
   SelectGroup,
   SelectItem,
   SelectLabel,
-  SelectPortal,
   SelectScrollDownButton,
   SelectScrollUpButton,
   SelectSeparator,

package/src/components/micro/sheet.tsx

@@ -14,6 +14,7 @@ import { XIcon } from "lucide-react";
 
 import { Button } from "../../components/micro/button";
 import { cn } from "../../lib/utils";
+import { ThemeWrapper } from "./theme-provider";
 
 function Sheet({ ...props }: SheetPrimitive.Root.Props) {
   return <SheetPrimitive.Root data-slot="sheet" {...props} />;
@@ -27,7 +28,7 @@ function SheetClose({ ...props }: SheetPrimitive.Close.Props) {
   return <SheetPrimitive.Close data-slot="sheet-close" {...props} />;
 }
 
-const SheetPortal = SheetPrimitive.Portal;
+
 
 function SheetOverlay({ className, ...props }: SheetPrimitive.Backdrop.Props) {
   return (
@@ -47,41 +48,46 @@ function SheetContent({
   children,
   side = "right",
   showCloseButton = true,
+  container,
   ...props
 }: SheetPrimitive.Popup.Props & {
   side?: "top" | "right" | "bottom" | "left";
   showCloseButton?: boolean;
+  container?: React.ComponentProps<typeof SheetPrimitive.Portal>["container"];
 }) {
   return (
-    <>
-      <SheetOverlay />
-      <SheetPrimitive.Popup
-        data-slot="sheet-content"
-        data-side={side}
-        className={cn(
-          "fixed z-50 flex flex-col gap-4 bg-popover bg-clip-padding text-sm text-popover-foreground shadow-lg transition duration-200 ease-in-out data-ending-style:opacity-0 data-starting-style:opacity-0 data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:h-auto data-[side=bottom]:border-t data-[side=bottom]:data-ending-style:translate-y-[2.5rem] data-[side=bottom]:data-starting-style:translate-y-[2.5rem] data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=left]:h-full data-[side=left]:w-3/4 data-[side=left]:border-r data-[side=left]:data-ending-style:translate-x-[-2.5rem] data-[side=left]:data-starting-style:translate-x-[-2.5rem] data-[side=right]:inset-y-0 data-[side=right]:right-0 data-[side=right]:h-full data-[side=right]:w-3/4 data-[side=right]:border-l data-[side=right]:data-ending-style:translate-x-[2.5rem] data-[side=right]:data-starting-style:translate-x-[2.5rem] data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:h-auto data-[side=top]:border-b data-[side=top]:data-ending-style:translate-y-[-2.5rem] data-[side=top]:data-starting-style:translate-y-[-2.5rem] data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm motion-reduce:transition-none",
-          className,
-        )}
-        {...props}
-      >
-        {children}
-        {showCloseButton && (
-          <SheetPrimitive.Close
-            data-slot="sheet-close"
-            render={
-              <Button
-                variant="ghost"
-                className="absolute top-4 right-4"
-                size="sm"
-              />
-            }
-          >
-            <XIcon aria-hidden="true" />
-            <span className="sr-only">Close</span>
-          </SheetPrimitive.Close>
-        )}
-      </SheetPrimitive.Popup>
-    </>
+    <SheetPrimitive.Portal container={container}>
+      <ThemeWrapper>
+        <SheetOverlay />
+        <SheetPrimitive.Popup
+          data-slot="sheet-content"
+          data-side={side}
+          className={cn(
+            "fixed z-50 flex flex-col gap-4 bg-popover bg-clip-padding text-sm text-popover-foreground shadow-lg transition duration-200 ease-in-out data-ending-style:opacity-0 data-starting-style:opacity-0 data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:h-auto data-[side=bottom]:border-t data-[side=bottom]:data-ending-style:translate-y-[2.5rem] data-[side=bottom]:data-starting-style:translate-y-[2.5rem] data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=left]:h-full data-[side=left]:w-3/4 data-[side=left]:border-r data-[side=left]:data-ending-style:translate-x-[-2.5rem] data-[side=left]:data-starting-style:translate-x-[-2.5rem] data-[side=right]:inset-y-0 data-[side=right]:right-0 data-[side=right]:h-full data-[side=right]:w-3/4 data-[side=right]:border-l data-[side=right]:data-ending-style:translate-x-[2.5rem] data-[side=right]:data-starting-style:translate-x-[2.5rem] data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:h-auto data-[side=top]:border-b data-[side=top]:data-ending-style:translate-y-[-2.5rem] data-[side=top]:data-starting-style:translate-y-[-2.5rem] data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm motion-reduce:transition-none",
+            className,
+          )}
+          {...props}
+        >
+          {children}
+          {showCloseButton && (
+            <SheetPrimitive.Close
+              data-slot="sheet-close"
+              render={
+                <Button
+                  variant="ghost"
+                  className="absolute top-4 right-4"
+                  size="sm"
+                  iconOnly
+                />
+              }
+            >
+              <XIcon aria-hidden="true" />
+              <span className="sr-only">Close</span>
+            </SheetPrimitive.Close>
+          )}
+        </SheetPrimitive.Popup>
+      </ThemeWrapper>
+    </SheetPrimitive.Portal>
   );
 }
 
@@ -139,7 +145,6 @@ export {
   SheetFooter,
   SheetHeader,
   SheetOverlay,
-  SheetPortal,
   SheetTitle,
   SheetTrigger,
 };

package/src/components/micro/tooltip.tsx

@@ -12,6 +12,7 @@ import * as React from "react";
 import { Tooltip as TooltipPrimitive } from "@base-ui/react/tooltip";
 
 import { cn } from "../../lib/utils";
+import { ThemeWrapper } from "./theme-provider";
 
 /**
  * @description A popup that displays information related to an element.
@@ -55,15 +56,15 @@ const TooltipTrigger = React.forwardRef<
 });
 TooltipTrigger.displayName = "TooltipTrigger";
 
-const TooltipPortal = TooltipPrimitive.Portal;
-
 const TooltipContent = React.forwardRef<
   HTMLDivElement,
   React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Popup> &
     Pick<
       React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Positioner>,
       "align" | "alignOffset" | "side" | "sideOffset"
-    >
+    > & {
+      container?: React.ComponentProps<typeof TooltipPrimitive.Portal>["container"];
+    }
 >(
   (
     {
@@ -72,31 +73,36 @@ const TooltipContent = React.forwardRef<
       sideOffset = 4,
       align = "center",
       alignOffset = 0,
+      container,
       children,
       ...props
     },
     ref,
   ) => {
     return (
-      <TooltipPrimitive.Positioner
-        align={align}
-        alignOffset={alignOffset}
-        side={side}
-        sideOffset={sideOffset}
-        className="isolate z-50"
-      >
-        <TooltipPrimitive.Popup
-          ref={ref}
-          data-slot="tooltip-content"
-          className={cn(
-            "z-50 inline-flex w-fit max-w-xs origin-(--transform-origin) items-center gap-1.5 rounded-md bg-foreground px-3 py-1.5 text-xs text-background data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
-            className,
-          )}
-          {...props}
-        >
-          {children}
-        </TooltipPrimitive.Popup>
-      </TooltipPrimitive.Positioner>
+      <TooltipPrimitive.Portal container={container}>
+        <ThemeWrapper>
+          <TooltipPrimitive.Positioner
+            align={align}
+            alignOffset={alignOffset}
+            side={side}
+            sideOffset={sideOffset}
+            className="isolate z-50"
+          >
+            <TooltipPrimitive.Popup
+              ref={ref}
+              data-slot="tooltip-content"
+              className={cn(
+                "z-50 inline-flex w-fit max-w-xs origin-(--transform-origin) items-center gap-1.5 rounded-md bg-foreground px-3 py-1.5 text-xs text-background data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+                className,
+              )}
+              {...props}
+            >
+              {children}
+            </TooltipPrimitive.Popup>
+          </TooltipPrimitive.Positioner>
+        </ThemeWrapper>
+      </TooltipPrimitive.Portal>
     );
   },
 );
@@ -105,7 +111,6 @@ TooltipContent.displayName = "TooltipContent";
 export {
   Tooltip,
   TooltipContent,
-  TooltipPortal,
   TooltipProvider,
   TooltipTrigger,
 };