feat(pswui): update component and library to latest

src/pswui/components/Button.tsx

@@ -111,21 +111,20 @@ export interface ButtonProps
 const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
   (props, ref) => {
     const [variantProps, otherPropsCompressed] = resolveVariants(props);
-    const { asChild, ...otherPropsExtracted } = otherPropsCompressed;
+    const { asChild, type, ...otherPropsExtracted } = otherPropsCompressed;
 
     const Comp = asChild ? Slot : "button";
-    const compProps = {
-      ...otherPropsExtracted,
-      className: buttonVariants(variantProps),
-    };
 
     return (
       <Comp
         ref={ref}
-        {...compProps}
+        type={type ?? "button"}
+        className={buttonVariants(variantProps)}
+        {...otherPropsExtracted}
       />
     );
   },
 );
+Button.displayName = "Button";
 
 export { Button };

src/pswui/components/Checkbox.tsx

@@ -110,5 +110,6 @@ const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(
     );
   },
 );
+Checkbox.displayName = "Checkbox";
 
 export { Checkbox };

src/pswui/components/Dialog/Component.tsx

@@ -1,5 +1,10 @@
-import { Slot, type VariantProps, vcn } from "@pswui-lib";
-import React, { useState } from "react";
+import {
+  ServerSideDocumentFallback,
+  Slot,
+  type VariantProps,
+  vcn,
+} from "@pswui-lib";
+import React, { type ReactNode, useState } from "react";
 import ReactDOM from "react-dom";
 
 import {
@@ -100,8 +105,9 @@ const DialogOverlay = React.forwardRef<HTMLDivElement, DialogOverlay>(
     });
     const { children, closeOnClick, onClick, ...otherPropsExtracted } =
       otherPropsCompressed;
+
     return (
-      <>
+      <ServerSideDocumentFallback>
         {ReactDOM.createPortal(
           <div
             {...otherPropsExtracted}
@@ -125,10 +131,11 @@ const DialogOverlay = React.forwardRef<HTMLDivElement, DialogOverlay>(
           </div>,
           document.body,
         )}
-      </>
+      </ServerSideDocumentFallback>
     );
   },
 );
+DialogOverlay.displayName = "DialogOverlay";
 
 /**
  * =========================
@@ -204,6 +211,7 @@ const DialogContent = React.forwardRef<HTMLDivElement, DialogContentProps>(
     );
   },
 );
+DialogContent.displayName = "DialogContent";
 
 /**
  * =========================
@@ -268,6 +276,8 @@ const DialogHeader = React.forwardRef<HTMLElement, DialogHeaderProps>(
   },
 );
 
+DialogHeader.displayName = "DialogHeader";
+
 /**
  * =========================
  * DialogTitle / DialogSubtitle
@@ -342,6 +352,7 @@ const DialogTitle = React.forwardRef<HTMLHeadingElement, DialogTitleProps>(
     );
   },
 );
+DialogTitle.displayName = "DialogTitle";
 
 const DialogSubtitle = React.forwardRef<
   HTMLHeadingElement,
@@ -360,6 +371,7 @@ const DialogSubtitle = React.forwardRef<
     </h2>
   );
 });
+DialogSubtitle.displayName = "DialogSubtitle";
 
 /**
  * =========================
@@ -401,6 +413,34 @@ const DialogFooter = React.forwardRef<HTMLDivElement, DialogFooterProps>(
     );
   },
 );
+DialogFooter.displayName = "DialogFooter";
+
+interface DialogControllers {
+  context: IDialogContext;
+
+  setContext: React.Dispatch<React.SetStateAction<IDialogContext>>;
+  close: () => void;
+}
+
+interface DialogControllerProps {
+  children: (controllers: DialogControllers) => ReactNode;
+}
+
+const DialogController = (props: DialogControllerProps) => {
+  return (
+    <DialogContext.Consumer>
+      {([context, setContext]) =>
+        props.children({
+          context,
+          setContext,
+          close() {
+            setContext((p) => ({ ...p, opened: false }));
+          },
+        })
+      }
+    </DialogContext.Consumer>
+  );
+};
 
 export {
   DialogRoot,
@@ -412,4 +452,5 @@ export {
   DialogTitle,
   DialogSubtitle,
   DialogFooter,
+  DialogController,
 };

src/pswui/components/Drawer.tsx

@@ -1,4 +1,10 @@
-import { type AsChild, Slot, type VariantProps, vcn } from "@pswui-lib";
+import {
+  type AsChild,
+  ServerSideDocumentFallback,
+  Slot,
+  type VariantProps,
+  vcn,
+} from "@pswui-lib";
 import React, {
   type ComponentPropsWithoutRef,
   type TouchEvent as ReactTouchEvent,
@@ -119,7 +125,9 @@ const DrawerOverlay = forwardRef<HTMLDivElement, DrawerOverlayProps>(
           : 1
     })`;
 
-    return createPortal(
+    return (
+      <ServerSideDocumentFallback>
+        {createPortal(
           <Comp
             {...restPropsExtracted}
             className={drawerOverlayVariant({
@@ -135,9 +143,12 @@ const DrawerOverlay = forwardRef<HTMLDivElement, DrawerOverlayProps>(
             ref={ref}
           />,
           document.body,
+        )}
+      </ServerSideDocumentFallback>
     );
   },
 );
+DrawerOverlay.displayName = "DrawerOverlay";
 
 const drawerContentColors = {
   background: "bg-white dark:bg-black",
@@ -309,7 +320,7 @@ const DrawerContent = forwardRef<HTMLDivElement, DrawerContentProps>(
           ...variantProps,
           opened: true,
           className: dragState.isDragging
-            ? "transition-[width_0ms]"
+            ? "transition-[width] duration-0"
             : variantProps.className,
         })}
         style={
@@ -374,6 +385,7 @@ const DrawerContent = forwardRef<HTMLDivElement, DrawerContentProps>(
     );
   },
 );
+DrawerContent.displayName = "DrawerContent";
 
 const DrawerClose = forwardRef<
   HTMLButtonElement,
@@ -388,6 +400,7 @@ const DrawerClose = forwardRef<
     />
   );
 });
+DrawerClose.displayName = "DrawerClose";
 
 const [drawerHeaderVariant, resolveDrawerHeaderVariantProps] = vcn({
   base: "flex flex-col gap-2",
@@ -417,6 +430,7 @@ const DrawerHeader = forwardRef<HTMLDivElement, DrawerHeaderProps>(
     );
   },
 );
+DrawerHeader.displayName = "DrawerHeader";
 
 const [drawerBodyVariant, resolveDrawerBodyVariantProps] = vcn({
   base: "flex-grow",
@@ -444,6 +458,7 @@ const DrawerBody = forwardRef<HTMLDivElement, DrawerBodyProps>((props, ref) => {
     />
   );
 });
+DrawerBody.displayName = "DrawerBody";
 
 const [drawerFooterVariant, resolveDrawerFooterVariantProps] = vcn({
   base: "flex flex-row justify-end gap-2",
@@ -473,6 +488,7 @@ const DrawerFooter = forwardRef<HTMLDivElement, DrawerFooterProps>(
     );
   },
 );
+DrawerFooter.displayName = "DrawerFooter";
 
 export {
   DrawerRoot,

src/pswui/components/Input.tsx

@@ -1,4 +1,4 @@
-import { type VariantProps, vcn } from "@pswui-lib";
+import { type AsChild, Slot, type VariantProps, vcn } from "@pswui-lib";
 import React from "react";
 
 const inputColors = {
@@ -42,7 +42,8 @@ const [inputVariant, resolveInputVariantProps] = vcn({
 
 interface InputFrameProps
   extends VariantProps<typeof inputVariant>,
-    React.ComponentPropsWithoutRef<"label"> {
+    React.ComponentPropsWithoutRef<"label">,
+    AsChild {
   children?: React.ReactNode;
 }
 
@@ -50,19 +51,22 @@ const InputFrame = React.forwardRef<HTMLLabelElement, InputFrameProps>(
   (props, ref) => {
     const [variantProps, otherPropsCompressed] =
       resolveInputVariantProps(props);
-    const { children, ...otherPropsExtracted } = otherPropsCompressed;
+    const { children, asChild, ...otherPropsExtracted } = otherPropsCompressed;
+
+    const Comp = asChild ? Slot : "label";
 
     return (
-      <label
+      <Comp
         ref={ref}
         className={`group/input-frame ${inputVariant(variantProps)}`}
         {...otherPropsExtracted}
       >
         {children}
-      </label>
+      </Comp>
     );
   },
 );
+InputFrame.displayName = "InputFrame";
 
 interface InputProps
   extends VariantProps<typeof inputVariant>,
@@ -113,5 +117,6 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>((props, ref) => {
     />
   );
 });
+Input.displayName = "Input";
 
 export { InputFrame, Input };

src/pswui/components/Label.tsx

@@ -29,5 +29,6 @@ const Label = React.forwardRef<HTMLLabelElement, LabelProps>((props, ref) => {
     />
   );
 });
+Label.displayName = "Label";
 
 export { Label };

src/pswui/components/Popover.tsx

@@ -65,7 +65,7 @@ const popoverColors = {
 };
 
 const [popoverContentVariant, resolvePopoverContentVariantProps] = vcn({
-  base: `absolute transition-all duration-150 border rounded-lg p-0.5 [&>*]:w-full z-10 ${popoverColors.background} ${popoverColors.border}`,
+  base: `absolute transition-all duration-150 border rounded-lg p-0.5 [&>*]:w-full ${popoverColors.background} ${popoverColors.border}`,
   variants: {
     direction: {
       row: "",
@@ -200,7 +200,7 @@ const PopoverContent = React.forwardRef<HTMLDivElement, PopoverContentProps>(
   (props, ref) => {
     const [variantProps, otherPropsCompressed] =
       resolvePopoverContentVariantProps(props);
-    const { children, ...otherPropsExtracted } = otherPropsCompressed;
+    const { children, asChild, ...otherPropsExtracted } = otherPropsCompressed;
     const [state, setState] = useContext(PopoverContext);
 
     const internalRef = useRef<HTMLDivElement | null>(null);
@@ -221,14 +221,16 @@ const PopoverContent = React.forwardRef<HTMLDivElement, PopoverContentProps>(
       };
     }, [state.controlled, setState]);
 
+    const Comp = asChild ? Slot : "div";
+
     return (
-      <div
+      <Comp
         {...otherPropsExtracted}
         className={popoverContentVariant({
           ...variantProps,
           opened: state.opened,
         })}
-        ref={(el) => {
+        ref={(el: HTMLDivElement) => {
           internalRef.current = el;
           if (typeof ref === "function") {
             ref(el);
@@ -238,9 +240,10 @@ const PopoverContent = React.forwardRef<HTMLDivElement, PopoverContentProps>(
         }}
       >
         {children}
-      </div>
+      </Comp>
     );
   },
 );
+PopoverContent.displayName = "PopoverContent";
 
 export { Popover, PopoverTrigger, PopoverContent };

src/pswui/components/Switch.tsx

@@ -80,5 +80,6 @@ const Switch = React.forwardRef<HTMLInputElement, SwitchProps>((props, ref) => {
     </label>
   );
 });
+Switch.displayName = "Switch";
 
 export { Switch };

src/pswui/components/Toast/Component.tsx

@@ -1,4 +1,4 @@
-import { type VariantProps, vcn } from "@pswui-lib";
+import { type VariantProps, vcn, withServerSideDocument } from "@pswui-lib";
 import React, { useEffect, useId, useRef } from "react";
 import ReactDOM from "react-dom";
 
@@ -145,7 +145,8 @@ interface ToasterProps
   muteDuplicationWarning?: boolean;
 }
 
-const Toaster = React.forwardRef<HTMLDivElement, ToasterProps>((props, ref) => {
+const Toaster = withServerSideDocument(
+  React.forwardRef<HTMLDivElement, ToasterProps>((props, ref) => {
     const id = useId();
     const [variantProps, otherPropsCompressed] =
       resolveToasterVariantProps(props);
@@ -207,6 +208,8 @@ const Toaster = React.forwardRef<HTMLDivElement, ToasterProps>((props, ref) => {
         )}
       </>
     );
-});
+  }),
+);
+Toaster.displayName = "Toaster";
 
 export { Toaster };

src/pswui/components/Tooltip.tsx

@@ -71,6 +71,7 @@ const Tooltip = React.forwardRef<HTMLDivElement, TooltipProps>((props, ref) => {
     </TooltipContext.Provider>
   );
 });
+Tooltip.displayName = "Tooltip";
 
 const tooltipContentColors = {
   variants: {
@@ -144,5 +145,6 @@ const TooltipContent = React.forwardRef<HTMLDivElement, TooltipContentProps>(
     );
   },
 );
+TooltipContent.displayName = "TooltipContent";
 
 export { Tooltip, TooltipContent };

src/pswui/lib/index.ts

@@ -1,2 +1,4 @@
 export * from "./vcn";
 export * from "./Slot";
+export * from "./ssrFallback";
+export * from "./withSSD";

src/pswui/lib/ssrFallback.tsx

@@ -0,0 +1,20 @@
+import { type ReactNode, useEffect, useState } from "react";
+
+/**
+ * This component allows components to use `document` as like they're always in the client side.
+ * Return null if there is no `document` (which represents it's server side) or initial render(to avoid hydration error).
+ */
+function ServerSideDocumentFallback({ children }: { children: ReactNode }) {
+  const [initialRender, setInitialRender] = useState<boolean>(true);
+
+  useEffect(() => {
+    setInitialRender(false);
+  }, []);
+
+  if (typeof document === "undefined" /* server side */ || initialRender)
+    return null;
+
+  return children;
+}
+
+export { ServerSideDocumentFallback };

src/pswui/lib/withSSD.tsx

@@ -0,0 +1,16 @@
+import type { ComponentType } from "react";
+import { ServerSideDocumentFallback } from "./ssrFallback";
+
+function withServerSideDocument<P extends {}>(
+  Component: ComponentType<P>,
+): ComponentType<P> {
+  return (props) => {
+    return (
+      <ServerSideDocumentFallback>
+        <Component {...props} />
+      </ServerSideDocumentFallback>
+    );
+  };
+}
+
+export { withServerSideDocument };