diff --git a/src/pswui/components/Button.tsx b/src/pswui/components/Button.tsx
index 40158d4..3ad8f67 100644
--- a/src/pswui/components/Button.tsx
+++ b/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 };
diff --git a/src/pswui/components/Checkbox.tsx b/src/pswui/components/Checkbox.tsx
index d48a1e3..695be34 100644
--- a/src/pswui/components/Checkbox.tsx
+++ b/src/pswui/components/Checkbox.tsx
@@ -110,5 +110,6 @@ const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(
);
},
);
+Checkbox.displayName = "Checkbox";
export { Checkbox };
diff --git a/src/pswui/components/Dialog/Component.tsx b/src/pswui/components/Dialog/Component.tsx
index 6332b62..a97e747 100644
--- a/src/pswui/components/Dialog/Component.tsx
+++ b/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,
};
diff --git a/src/pswui/components/Drawer.tsx b/src/pswui/components/Drawer.tsx
index 5828204..42d84f3 100644
--- a/src/pswui/components/Drawer.tsx
+++ b/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,25 +125,30 @@ const DrawerOverlay = forwardRef<HTMLDivElement, DrawerOverlayProps>(
: 1
})`;
- return createPortal(
- <Comp
- {...restPropsExtracted}
- className={drawerOverlayVariant({
- ...variantProps,
- opened: state.isDragging ? true : state.opened,
- })}
- onClick={onOutsideClick}
- style={{
- backdropFilter,
- WebkitBackdropFilter: backdropFilter,
- transitionDuration: state.isDragging ? "0s" : undefined,
- }}
- ref={ref}
- />,
- document.body,
+ return (
+ <ServerSideDocumentFallback>
+ {createPortal(
+ <Comp
+ {...restPropsExtracted}
+ className={drawerOverlayVariant({
+ ...variantProps,
+ opened: state.isDragging ? true : state.opened,
+ })}
+ onClick={onOutsideClick}
+ style={{
+ backdropFilter,
+ WebkitBackdropFilter: backdropFilter,
+ transitionDuration: state.isDragging ? "0s" : undefined,
+ }}
+ 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,
diff --git a/src/pswui/components/Form.tsx b/src/pswui/components/Form.tsx
new file mode 100644
index 0000000..e69de29
diff --git a/src/pswui/components/Input.tsx b/src/pswui/components/Input.tsx
index 6541e04..99e456e 100644
--- a/src/pswui/components/Input.tsx
+++ b/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 };
diff --git a/src/pswui/components/Label.tsx b/src/pswui/components/Label.tsx
index 31790ef..3f695a7 100644
--- a/src/pswui/components/Label.tsx
+++ b/src/pswui/components/Label.tsx
@@ -29,5 +29,6 @@ const Label = React.forwardRef<HTMLLabelElement, LabelProps>((props, ref) => {
/>
);
});
+Label.displayName = "Label";
export { Label };
diff --git a/src/pswui/components/Popover.tsx b/src/pswui/components/Popover.tsx
index 2fb43f1..f6f2cfb 100644
--- a/src/pswui/components/Popover.tsx
+++ b/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 };
diff --git a/src/pswui/components/Switch.tsx b/src/pswui/components/Switch.tsx
index c804eba..cb52209 100644
--- a/src/pswui/components/Switch.tsx
+++ b/src/pswui/components/Switch.tsx
@@ -80,5 +80,6 @@ const Switch = React.forwardRef<HTMLInputElement, SwitchProps>((props, ref) => {
</label>
);
});
+Switch.displayName = "Switch";
export { Switch };
diff --git a/src/pswui/components/Toast/Component.tsx b/src/pswui/components/Toast/Component.tsx
index 42df8f4..e9c4675 100644
--- a/src/pswui/components/Toast/Component.tsx
+++ b/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,68 +145,71 @@ interface ToasterProps
muteDuplicationWarning?: boolean;
}
-const Toaster = React.forwardRef<HTMLDivElement, ToasterProps>((props, ref) => {
- const id = useId();
- const [variantProps, otherPropsCompressed] =
- resolveToasterVariantProps(props);
- const { defaultOption, muteDuplicationWarning, ...otherPropsExtracted } =
- otherPropsCompressed;
+const Toaster = withServerSideDocument(
+ React.forwardRef<HTMLDivElement, ToasterProps>((props, ref) => {
+ const id = useId();
+ const [variantProps, otherPropsCompressed] =
+ resolveToasterVariantProps(props);
+ const { defaultOption, muteDuplicationWarning, ...otherPropsExtracted } =
+ otherPropsCompressed;
- const [toastList, setToastList] = React.useState<typeof toasts>(toasts);
- const internalRef = useRef<HTMLDivElement | null>(null);
+ const [toastList, setToastList] = React.useState<typeof toasts>(toasts);
+ const internalRef = useRef<HTMLDivElement | null>(null);
- useEffect(() => {
- return subscribe(() => {
- setToastList(getSnapshot());
- });
- }, []);
+ useEffect(() => {
+ return subscribe(() => {
+ setToastList(getSnapshot());
+ });
+ }, []);
- const option = React.useMemo(() => {
- return {
- ...defaultToastOption,
- ...defaultOption,
- };
- }, [defaultOption]);
+ const option = React.useMemo(() => {
+ return {
+ ...defaultToastOption,
+ ...defaultOption,
+ };
+ }, [defaultOption]);
- const toasterInstance = document.querySelector("div[data-toaster-root]");
- if (toasterInstance && id !== toasterInstance.id) {
- if (process.env.NODE_ENV === "development" && !muteDuplicationWarning) {
- console.warn(
- "Multiple Toaster instances detected. Only one Toaster is allowed.",
- );
+ const toasterInstance = document.querySelector("div[data-toaster-root]");
+ if (toasterInstance && id !== toasterInstance.id) {
+ if (process.env.NODE_ENV === "development" && !muteDuplicationWarning) {
+ console.warn(
+ "Multiple Toaster instances detected. Only one Toaster is allowed.",
+ );
+ }
+ return null;
}
- return null;
- }
- return (
- <>
- {ReactDOM.createPortal(
- <div
- {...otherPropsExtracted}
- data-toaster-root={true}
- className={toasterVariant(variantProps)}
- ref={(el) => {
- internalRef.current = el;
- if (typeof ref === "function") {
- ref(el);
- } else if (ref) {
- ref.current = el;
- }
- }}
- id={id}
- >
- {Object.entries(toastList).map(([id]) => (
- <ToastTemplate
- key={id}
- id={id as `${number}`}
- globalOption={option}
- />
- ))}
- </div>,
- document.body,
- )}
- </>
- );
-});
+ return (
+ <>
+ {ReactDOM.createPortal(
+ <div
+ {...otherPropsExtracted}
+ data-toaster-root={true}
+ className={toasterVariant(variantProps)}
+ ref={(el) => {
+ internalRef.current = el;
+ if (typeof ref === "function") {
+ ref(el);
+ } else if (ref) {
+ ref.current = el;
+ }
+ }}
+ id={id}
+ >
+ {Object.entries(toastList).map(([id]) => (
+ <ToastTemplate
+ key={id}
+ id={id as `${number}`}
+ globalOption={option}
+ />
+ ))}
+ </div>,
+ document.body,
+ )}
+ </>
+ );
+ }),
+);
+Toaster.displayName = "Toaster";
export { Toaster };
diff --git a/src/pswui/components/Tooltip.tsx b/src/pswui/components/Tooltip.tsx
index aaf9c64..f47568b 100644
--- a/src/pswui/components/Tooltip.tsx
+++ b/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: {
@@ -83,10 +84,10 @@ const tooltipContentColors = {
};
const [tooltipContentVariant, resolveTooltipContentVariantProps] = vcn({
- base: `absolute py-1 px-3 rounded-md border opacity-0 transition-all
- group-[:not(.controlled):hover]/tooltip:opacity-100 group-[.opened]/tooltip:opacity-100
- select-none pointer-events-none
- group-[:not(.controlled):hover]/tooltip:select-auto group-[.opened]/tooltip:select-auto group-[:not(.controlled):hover]/tooltip:pointer-events-auto group-[.opened]/tooltip:pointer-events-auto
+ base: `absolute py-1 px-3 rounded-md border opacity-0 transition-all
+ group-[:not(.controlled):hover]/tooltip:opacity-100 group-[.opened]/tooltip:opacity-100
+ select-none pointer-events-none
+ group-[:not(.controlled):hover]/tooltip:select-auto group-[.opened]/tooltip:select-auto group-[:not(.controlled):hover]/tooltip:pointer-events-auto group-[.opened]/tooltip:pointer-events-auto
group-[:not(.controlled):hover]/tooltip:[transition:transform_150ms_ease-out_var(--delay),opacity_150ms_ease-out_var(--delay),background-color_150ms_ease-in-out,color_150ms_ease-in-out,border-color_150ms_ease-in-out]`,
variants: {
position: {
@@ -144,5 +145,6 @@ const TooltipContent = React.forwardRef<HTMLDivElement, TooltipContentProps>(
);
},
);
+TooltipContent.displayName = "TooltipContent";
export { Tooltip, TooltipContent };
diff --git a/src/pswui/lib/index.ts b/src/pswui/lib/index.ts
index faba6d8..47c4881 100644
--- a/src/pswui/lib/index.ts
+++ b/src/pswui/lib/index.ts
@@ -1,2 +1,4 @@
export * from "./vcn";
export * from "./Slot";
+export * from "./ssrFallback";
+export * from "./withSSD";
diff --git a/src/pswui/lib/ssrFallback.tsx b/src/pswui/lib/ssrFallback.tsx
new file mode 100644
index 0000000..abaff35
--- /dev/null
+++ b/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 };
diff --git a/src/pswui/lib/withSSD.tsx b/src/pswui/lib/withSSD.tsx
new file mode 100644
index 0000000..0cc71ee
--- /dev/null
+++ b/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 };