fix: fix slot type error

fix: remove nonsense use client directive in drawer
fix: do missing steps for upgrading to tailwindcss v4
2025-03-12 13:27:23 +09:00 · 2025-03-11 20:24:55 +09:00 · 2025-03-11 20:12:46 +09:00 · 2025-03-11 19:59:11 +09:00 · 2025-03-11 19:33:26 +09:00 · 2024-08-09 11:44:18 +09:00
17 changed files with 600 additions and 498 deletions
--- a/.zed/settings.json
+++ b/.zed/settings.json
@ -10,5 +10,11 @@
        }
      }
    }
-  }
+  },
+  "formatter": {
+    "language_server": {
+      "name": "biome"
+    }
+  },
+  "format_on_save": "on"
 }
--- a/packages/react/components/Dialog/Component.tsx
+++ b/packages/react/components/Dialog/Component.tsx
@ -1,12 +1,20 @@
-import { Slot, type VariantProps, useDocument, vcn } from "@pswui-lib";
-import React, { type ReactNode, useId, useState } from "react";
+import {
+  Slot,
+  type VariantProps,
+  useAnimatedMount,
+  useDocument,
+  vcn,
+} from "@pswui-lib";
+import React, { type ReactNode, useId, useRef, useState } from "react";
 import ReactDOM from "react-dom";

 import {
  DialogContext,
  type IDialogContext,
+  InnerDialogContext,
  initialDialogContext,
  useDialogContext,
+  useInnerDialogContext,
 } from "./Context";

 /**
@ -81,40 +89,56 @@ interface DialogOverlay
 const DialogOverlay = React.forwardRef<HTMLDivElement, DialogOverlay>(
  (props, ref) => {
    const [{ opened, ids }, setContext] = useDialogContext();
-    const [variantProps, otherPropsCompressed] = resolveDialogOverlayVariant({
-      ...props,
-      opened,
-    });
+    const [variantProps, otherPropsCompressed] =
+      resolveDialogOverlayVariant(props);
    const { children, closeOnClick, onClick, ...otherPropsExtracted } =
      otherPropsCompressed;

+    const internalRef = useRef<HTMLDivElement | null>(null);
+
+    const { isMounted, isRendered } = useAnimatedMount(opened, internalRef);
+
    const document = useDocument();
    if (!document) return null;

-    return ReactDOM.createPortal(
-      <div
-        {...otherPropsExtracted}
-        id={ids.dialog}
-        ref={ref}
-        className={dialogOverlayVariant(variantProps)}
-        onClick={(e) => {
-          if (closeOnClick) {
-            setContext((p) => ({ ...p, opened: false }));
-          }
-          onClick?.(e);
-        }}
-      >
-        <div
-          className={
-            "w-screen max-w-full min-h-screen flex flex-col justify-center items-center"
-          }
-        >
-          {/* Layer for overflow positioning */}
-          {children}
-        </div>
-      </div>,
-      document.body,
-    );
+    return isMounted
+      ? ReactDOM.createPortal(
+          <div
+            {...otherPropsExtracted}
+            id={ids.dialog}
+            ref={(el) => {
+              internalRef.current = el;
+              if (typeof ref === "function") {
+                ref(el);
+              } else if (ref) {
+                ref.current = el;
+              }
+            }}
+            className={dialogOverlayVariant({
+              ...variantProps,
+              opened: isRendered,
+            })}
+            onClick={(e) => {
+              if (closeOnClick) {
+                setContext((p) => ({ ...p, opened: false }));
+              }
+              onClick?.(e);
+            }}
+          >
+            {/* Layer for overflow positioning */}
+            <div
+              className={
+                "w-screen max-w-full min-h-screen flex flex-col justify-center items-center"
+              }
+            >
+              <InnerDialogContext.Provider value={{ isMounted, isRendered }}>
+                {children}
+              </InnerDialogContext.Provider>
+            </div>
+          </div>,
+          document.body,
+        )
+      : null;
  },
 );
 DialogOverlay.displayName = "DialogOverlay";
@ -144,11 +168,10 @@ interface DialogContentProps

 const DialogContent = React.forwardRef<HTMLDivElement, DialogContentProps>(
  (props, ref) => {
-    const [{ opened, ids }] = useDialogContext();
-    const [variantProps, otherPropsCompressed] = resolveDialogContentVariant({
-      ...props,
-      opened,
-    });
+    const [{ ids }] = useDialogContext();
+    const [variantProps, otherPropsCompressed] =
+      resolveDialogContentVariant(props);
+    const { isRendered } = useInnerDialogContext();
    const { children, onClick, ...otherPropsExtracted } = otherPropsCompressed;
    return (
      <div
@ -157,7 +180,10 @@ const DialogContent = React.forwardRef<HTMLDivElement, DialogContentProps>(
        role="dialog"
        aria-labelledby={ids.title}
        aria-describedby={ids.description}
-        className={dialogContentVariant(variantProps)}
+        className={dialogContentVariant({
+          ...variantProps,
+          opened: isRendered,
+        })}
        onClick={(e) => {
          e.stopPropagation();
          onClick?.(e);
--- a/packages/react/components/Dialog/Context.ts
+++ b/packages/react/components/Dialog/Context.ts
@ -38,3 +38,23 @@ export const DialogContext = createContext<
 ]);

 export const useDialogContext = () => useContext(DialogContext);
+
+/**
+ * ===================
+ * InnerDialogContext
+ * ===================
+ */
+
+export interface IInnerDialogContext {
+  isMounted: boolean;
+  isRendered: boolean;
+}
+export const initialInnerDialogContext: IInnerDialogContext = {
+  isMounted: false,
+  isRendered: false,
+};
+export const InnerDialogContext = createContext<IInnerDialogContext>(
+  initialInnerDialogContext,
+);
+
+export const useInnerDialogContext = () => useContext(InnerDialogContext);
--- a/packages/react/components/Drawer.tsx
+++ b/packages/react/components/Drawer.tsx
@ -2,6 +2,7 @@ import {
  type AsChild,
  Slot,
  type VariantProps,
+  useAnimatedMount,
  useDocument,
  vcn,
 } from "@pswui-lib";
@ -21,6 +22,8 @@ interface IDrawerContext {
  closeThreshold: number;
  movePercentage: number;
  isDragging: boolean;
+  isMounted: boolean;
+  isRendered: boolean;
  leaveWhileDragging: boolean;
 }
 const DrawerContextInitial: IDrawerContext = {
@ -28,6 +31,8 @@ const DrawerContextInitial: IDrawerContext = {
  closeThreshold: 0.3,
  movePercentage: 0,
  isDragging: false,
+  isMounted: false,
+  isRendered: false,
  leaveWhileDragging: false,
 };
 const DrawerContext = React.createContext<
@ -102,8 +107,14 @@ interface DrawerOverlayProps

 const DrawerOverlay = forwardRef<HTMLDivElement, DrawerOverlayProps>(
  (props, ref) => {
+    const internalRef = useRef<HTMLDivElement | null>(null);
    const [state, setState] = useContext(DrawerContext);

+    const { isMounted, isRendered } = useAnimatedMount(
+      state.isDragging ? true : state.opened,
+      internalRef,
+    );
+
    const [variantProps, restPropsCompressed] =
      resolveDrawerOverlayVariantProps(props);
    const { asChild, ...restPropsExtracted } = restPropsCompressed;
@ -128,22 +139,39 @@ const DrawerOverlay = forwardRef<HTMLDivElement, DrawerOverlayProps>(
    const document = useDocument();
    if (!document) return null;

-    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 (
+      <>
+        <DrawerContext.Provider
+          value={[{ ...state, isMounted, isRendered }, setState]}
+        >
+          {isMounted
+            ? createPortal(
+                <Comp
+                  {...restPropsExtracted}
+                  className={drawerOverlayVariant({
+                    ...variantProps,
+                    opened: isRendered,
+                  })}
+                  onClick={onOutsideClick}
+                  style={{
+                    backdropFilter,
+                    WebkitBackdropFilter: backdropFilter,
+                    transitionDuration: state.isDragging ? "0s" : undefined,
+                  }}
+                  ref={(el: HTMLDivElement) => {
+                    internalRef.current = el;
+                    if (typeof ref === "function") {
+                      ref(el);
+                    } else if (ref) {
+                      ref.current = el;
+                    }
+                  }}
+                />,
+                document.body,
+              )
+            : null}
+        </DrawerContext.Provider>
+      </>
    );
  },
 );
@ -158,10 +186,10 @@ const [drawerContentVariant, resolveDrawerContentVariantProps] = vcn({
  base: `fixed ${drawerContentColors.background} ${drawerContentColors.border} transition-all p-4 flex flex-col justify-between gap-8 overflow-auto`,
  variants: {
    position: {
-      top: "top-0 inset-x-0 w-full max-w-screen rounded-t-lg border-b-2",
-      bottom: "bottom-0 inset-x-0 w-full max-w-screen rounded-b-lg border-t-2",
-      left: "left-0 inset-y-0 h-screen rounded-l-lg border-r-2",
-      right: "right-0 inset-y-0 h-screen rounded-r-lg border-l-2",
+      top: "top-0 w-full max-w-screen rounded-t-lg border-b-2",
+      bottom: "bottom-0 w-full max-w-screen rounded-b-lg border-t-2",
+      left: "left-0 h-screen rounded-l-lg border-r-2",
+      right: "right-0 h-screen rounded-r-lg border-l-2",
    },
    maxSize: {
      sm: "[&.left-0]:max-w-sm [&.right-0]:max-w-sm",
@ -174,16 +202,36 @@ const [drawerContentVariant, resolveDrawerContentVariantProps] = vcn({
      false:
        "[&.top-0]:-translate-y-full [&.bottom-0]:translate-y-full [&.left-0]:-translate-x-full [&.right-0]:translate-x-full",
    },
+    internal: {
+      true: "relative",
+      false: "fixed",
+    },
  },
  defaults: {
    position: "left",
    opened: false,
    maxSize: "sm",
+    internal: false,
  },
+  dynamics: [
+    ({ position, internal }) => {
+      if (!internal) {
+        if (["top", "bottom"].includes(position)) {
+          return "inset-x-0";
+        }
+        return "inset-y-0";
+      }
+
+      return "w-fit";
+    },
+  ],
 });

 interface DrawerContentProps
-  extends Omit<VariantProps<typeof drawerContentVariant>, "opened">,
+  extends Omit<
+      VariantProps<typeof drawerContentVariant>,
+      "opened" | "internal"
+    >,
    AsChild,
    ComponentPropsWithoutRef<"div"> {}

@ -324,7 +372,7 @@ const DrawerContent = forwardRef<HTMLDivElement, DrawerContentProps>(
      <div
        className={drawerContentVariant({
          ...variantProps,
-          opened: true,
+          opened: state.isRendered,
          className: dragState.isDragging
            ? "transition-[width] duration-0"
            : variantProps.className,
@ -338,6 +386,7 @@ const DrawerContent = forwardRef<HTMLDivElement, DrawerContentProps>(
                      0) +
                    (position === "top" ? dragState.delta : -dragState.delta),
                  padding: 0,
+                  [`padding${position.slice(0, 1).toUpperCase()}${position.slice(1)}`]: `${dragState.delta}px`,
                }
              : {
                  width:
@ -345,6 +394,7 @@ const DrawerContent = forwardRef<HTMLDivElement, DrawerContentProps>(
                      0) +
                    (position === "left" ? dragState.delta : -dragState.delta),
                  padding: 0,
+                  [`padding${position.slice(0, 1).toUpperCase()}${position.slice(1)}`]: `${dragState.delta}px`,
                }
            : { width: 0, height: 0, padding: 0 }
        }
@ -353,14 +403,16 @@ const DrawerContent = forwardRef<HTMLDivElement, DrawerContentProps>(
          {...restPropsExtracted}
          className={drawerContentVariant({
            ...variantProps,
-            opened: state.opened,
+            opened: state.isRendered,
+            internal: true,
          })}
          style={{
-            transform: dragState.isDragging
-              ? `translate${["top", "bottom"].includes(position) ? "Y" : "X"}(${
-                  dragState.delta
-                }px)`
-              : undefined,
+            transform:
+              dragState.isDragging &&
+              ((["top", "left"].includes(position) && dragState.delta < 0) ||
+                (["bottom", "right"].includes(position) && dragState.delta > 0))
+                ? `translate${["top", "bottom"].includes(position) ? "Y" : "X"}(${dragState.delta}px)`
+                : undefined,
            transitionDuration: dragState.isDragging ? "0s" : undefined,
            userSelect: dragState.isDragging ? "none" : undefined,
          }}
@ -439,7 +491,7 @@ const DrawerHeader = forwardRef<HTMLDivElement, DrawerHeaderProps>(
 DrawerHeader.displayName = "DrawerHeader";

 const [drawerBodyVariant, resolveDrawerBodyVariantProps] = vcn({
-  base: "flex-grow",
+  base: "grow",
  variants: {},
  defaults: {},
 });
--- a/packages/react/components/Input.tsx
+++ b/packages/react/components/Input.tsx
@ -7,24 +7,24 @@ const inputColors = {
    hover:
      "hover:bg-neutral-100 dark:hover:bg-neutral-800 has-[input:hover]:bg-neutral-100 dark:has-[input:hover]:bg-neutral-800",
    invalid:
-      "invalid:bg-red-100 invalid:dark:bg-red-900 has-[input:invalid]:bg-red-100 dark:has-[input:invalid]:bg-red-900",
+      "invalid:bg-red-100 dark:invalid:bg-red-900 has-[input:invalid]:bg-red-100 dark:has-[input:invalid]:bg-red-900",
    invalidHover:
      "hover:invalid:bg-red-200 dark:hover:invalid:bg-red-800 has-[input:invalid:hover]:bg-red-200 dark:has-[input:invalid:hover]:bg-red-800",
  },
  border: {
    default: "border-neutral-400 dark:border-neutral-600",
    invalid:
-      "invalid:border-red-400 invalid:dark:border-red-600 has-[input:invalid]:border-red-400 dark:has-[input:invalid]:border-red-600",
+      "invalid:border-red-400 dark:invalid:border-red-600 has-[input:invalid]:border-red-400 dark:has-[input:invalid]:border-red-600",
  },
  ring: {
    default: "ring-transparent focus-within:ring-current",
    invalid:
-      "invalid:focus-within:ring-red-400 invalid:focus-within:dark:ring-red-600 has-[input:invalid]:focus-within:ring-red-400 dark:has-[input:invalid]:focus-within:ring-red-600",
+      "invalid:focus-within:ring-red-400 dark:invalid:focus-within:ring-red-600 has-[input:invalid]:focus-within:ring-red-400 dark:has-[input:invalid]:focus-within:ring-red-600",
  },
 };

 const [inputVariant, resolveInputVariantProps] = vcn({
-  base: `rounded-md p-2 border ring-1 outline-none transition-all duration-200 [appearance:textfield] disabled:brightness-50 disabled:saturate-0 disabled:cursor-not-allowed ${inputColors.background.default} ${inputColors.background.hover} ${inputColors.border.default} ${inputColors.ring.default} ${inputColors.background.invalid} ${inputColors.background.invalidHover} ${inputColors.border.invalid} ${inputColors.ring.invalid} [&:has(input)]:flex`,
+  base: `rounded-md p-2 border ring-1 outline-hidden transition-all duration-200 [appearance:textfield] disabled:brightness-50 disabled:saturate-0 disabled:cursor-not-allowed ${inputColors.background.default} ${inputColors.background.hover} ${inputColors.border.default} ${inputColors.ring.default} ${inputColors.background.invalid} ${inputColors.background.invalidHover} ${inputColors.border.invalid} ${inputColors.ring.invalid} [&:has(input)]:flex`,
  variants: {
    unstyled: {
      true: "bg-transparent border-none p-0 ring-0 hover:bg-transparent invalid:hover:bg-transparent invalid:focus-within:bg-transparent invalid:focus-within:ring-0",
--- a/packages/react/components/Popover.tsx
+++ b/packages/react/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 z-10 [&>*]:w-full ${popoverColors.background} ${popoverColors.border}`,
+  base: `absolute transition-all duration-150 border rounded-lg p-0.5 z-10 *:w-full ${popoverColors.background} ${popoverColors.border}`,
  variants: {
    direction: {
      row: "",
--- a/packages/react/components/Tabs/Component.tsx
+++ b/packages/react/components/Tabs/Component.tsx
@ -39,7 +39,7 @@ const TabList = (props: TabListProps) => {
 };

 const [TabTriggerVariant, resolveTabTriggerVariantProps] = vcn({
-  base: "py-1.5 rounded-md flex-grow transition-all text-sm",
+  base: "py-1.5 rounded-md grow transition-all text-sm",
  variants: {
    active: {
      true: "bg-white/100 dark:bg-black/100 text-black dark:text-white",
--- a/packages/react/components/Toast/Component.tsx
+++ b/packages/react/components/Toast/Component.tsx
@ -1,5 +1,10 @@
-import { type VariantProps, useDocument, vcn } from "@pswui-lib";
-import React, { useEffect, useId, useRef } from "react";
+import {
+  type VariantProps,
+  getCalculatedTransitionDuration,
+  useDocument,
+  vcn,
+} from "@pswui-lib";
+import React, { type MutableRefObject, useEffect, useId, useRef } from "react";
 import ReactDOM from "react-dom";

 import {
@ -41,9 +46,16 @@ const ToastTemplate = ({

  React.useEffect(() => {
    if (toastData.life === "born") {
-      requestAnimationFrame(() => {
-        // To make sure that the toast is rendered as "born" state
-        // and then change to "normal" state
+      requestAnimationFrame(function untilBorn() {
+        /*
+        To confirm that the toast is rendered as "born" state and then change to "normal" state
+        This way will make sure born -> normal stage transition animation will work.
+        */
+        const elm = document.querySelector(
+          `div[data-toaster-root] > div[data-toast-id="${id}"][data-toast-lifecycle="born"]`,
+        );
+        if (!elm) return requestAnimationFrame(untilBorn);
+
        toasts[id] = {
          ...toasts[id],
          life: "normal",
@ -58,42 +70,15 @@ const ToastTemplate = ({
      return () => clearTimeout(timeout);
    }
    if (toastData.life === "dead") {
-      let transitionDuration: {
-        value: number;
-        unit: string;
-      } | null;
-      if (!ref.current) {
-        transitionDuration = null;
-      } else if (ref.current.computedStyleMap !== undefined) {
-        transitionDuration = ref.current
-          .computedStyleMap()
-          .get("transition-duration") as { value: number; unit: string };
-      } else {
-        const style = /(\d+(\.\d+)?)(.+)/.exec(
-          window.getComputedStyle(ref.current).transitionDuration,
+      let calculatedTransitionDurationMs = 1;
+      if (ref.current)
+        calculatedTransitionDurationMs = getCalculatedTransitionDuration(
+          ref as MutableRefObject<HTMLDivElement>,
        );
-        transitionDuration = style
-          ? {
-              value: Number.parseFloat(style[1] ?? "0"),
-              unit: style[3] ?? style[2] ?? "s",
-            }
-          : null;
-      }
-      if (!transitionDuration) {
-        delete toasts[id];
-        notify();
-        return;
-      }
-      const calculatedTransitionDuration =
-        transitionDuration.value *
-        ({
-          s: 1000,
-          ms: 1,
-        }[transitionDuration.unit] ?? 1);
      const timeout = setTimeout(() => {
        delete toasts[id];
        notify();
-      }, calculatedTransitionDuration);
+      }, calculatedTransitionDurationMs);
      return () => clearTimeout(timeout);
    }
  }, [id, toastData.life, toastData.closeTimeout]);
@ -105,6 +90,8 @@ const ToastTemplate = ({
        life: toastData.life,
      })}
      ref={ref}
+      data-toast-id={id}
+      data-toast-lifecycle={toastData.life}
    >
      {toastData.closeButton && (
        <button
--- a/packages/react/lib/Slot.tsx
+++ b/packages/react/lib/Slot.tsx
@ -85,7 +85,10 @@ export const Slot = React.forwardRef<
    return null;
  }
  return React.cloneElement(children, {
-    ...mergeReactProps(safeSlotProps, children.props),
+    ...mergeReactProps(
+      safeSlotProps,
+      children.props as Record<string, unknown>,
+    ),
    ref: combinedRef([
      ref,
      (children as unknown as { ref: React.Ref<HTMLElement> }).ref,
--- a/packages/react/lib/index.ts
+++ b/packages/react/lib/index.ts
@ -1,3 +1,4 @@
 export * from "./vcn";
 export * from "./Slot";
 export * from "./useDocument";
+export * from "./useAnimatedMount";
--- a/packages/react/lib/useAnimatedMount.ts
+++ b/packages/react/lib/useAnimatedMount.ts
@ -0,0 +1,85 @@
+import { type MutableRefObject, useCallback, useEffect, useState } from "react";
+
+function getCalculatedTransitionDuration(
+  ref: MutableRefObject<HTMLElement>,
+): number {
+  let transitionDuration: {
+    value: number;
+    unit: string;
+  } | null;
+  if (ref.current.computedStyleMap !== undefined) {
+    transitionDuration = ref.current
+      .computedStyleMap()
+      .get("transition-duration") as { value: number; unit: string };
+  } else {
+    const style = /(\d+(\.\d+)?)(.+)/.exec(
+      window.getComputedStyle(ref.current).transitionDuration,
+    );
+    if (!style) return 0;
+    transitionDuration = {
+      value: Number.parseFloat(style[1] ?? "0"),
+      unit: style[3] ?? style[2] ?? "s",
+    };
+  }
+
+  return (
+    transitionDuration.value *
+    ({
+      s: 1000,
+      ms: 1,
+    }[transitionDuration.unit] ?? 1)
+  );
+}
+
+/*
+ * isMounted: true     isRendered: true         isRendered: false        isMounted: false
+ * Component Mount     Component Appear         Component Disappear      Component Unmount
+ * v                   v                        v                        v
+ * |-|=================|------------------------|======================|-|
+ */
+
+function useAnimatedMount(
+  visible: boolean,
+  ref: MutableRefObject<HTMLElement | null>,
+  callbacks?: { onMount: () => void; onUnmount: () => void },
+) {
+  const [state, setState] = useState<{
+    isMounted: boolean;
+    isRendered: boolean;
+  }>({ isMounted: visible, isRendered: visible });
+
+  const umountCallback = useCallback(() => {
+    setState((p) => ({ ...p, isRendered: false }));
+
+    const calculatedTransitionDuration = ref.current
+      ? getCalculatedTransitionDuration(ref as MutableRefObject<HTMLElement>)
+      : 0;
+
+    setTimeout(() => {
+      setState((p) => ({ ...p, isMounted: false }));
+      callbacks?.onUnmount?.();
+    }, calculatedTransitionDuration);
+  }, [ref, callbacks]);
+
+  const mountCallback = useCallback(() => {
+    setState((p) => ({ ...p, isMounted: true }));
+    callbacks?.onMount?.();
+    requestAnimationFrame(function onMount() {
+      if (!ref.current) return requestAnimationFrame(onMount);
+      setState((p) => ({ ...p, isRendered: true }));
+    });
+  }, [ref.current, callbacks]);
+
+  useEffect(() => {
+    console.log(state);
+    if (!visible && state.isRendered) {
+      umountCallback();
+    } else if (visible && !state.isMounted) {
+      mountCallback();
+    }
+  }, [state, visible, mountCallback, umountCallback]);
+
+  return state;
+}
+
+export { getCalculatedTransitionDuration, useAnimatedMount };
--- a/packages/react/package.json
+++ b/packages/react/package.json
@ -10,18 +10,17 @@
    "preview": "vite preview"
  },
  "dependencies": {
+    "@tailwindcss/vite": "^4.0.12",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
-    "tailwind-merge": "^2.3.0"
+    "tailwind-merge": "^2.3.0",
+    "tailwindcss": "^4.0.12"
  },
  "devDependencies": {
    "@types/node": "^20.12.13",
    "@types/react": "^18.2.66",
    "@types/react-dom": "^18.2.22",
    "@vitejs/plugin-react": "^4.2.1",
-    "autoprefixer": "^10.4.19",
-    "postcss": "^8.4.38",
-    "tailwindcss": "^3.4.3",
    "typescript": "^5.4.5",
    "vite": "^5.2.0"
  }
--- a/packages/react/src/tailwind.css
+++ b/packages/react/src/tailwind.css
@ -1,7 +1,5 @@
+@import tailwindcss;
@import url("https://cdn.jsdelivr.net/gh/wanteddev/wanted-sans@v1.0.3/packages/wanted-sans/fonts/webfonts/variable/split/WantedSansVariable.min.css");
-@tailwind base;
-@tailwind components;
-@tailwind utilities;

@layer base {
  :root {
@ -34,4 +32,3 @@
    @apply transition-colors;
  }
 }
-
--- a/packages/react/tailwind.config.js
+++ b/packages/react/tailwind.config.js
@ -1,8 +0,0 @@
-/** @type {import('tailwindcss').Config} */
-module.exports = {
-  content: ["./{components,stories,src}/**/*.{js,jsx,ts,tsx,css,mdx}"],
-  darkMode: "media",
-  theme: {
-    extend: {},
-  },
-};
--- a/packages/react/vite.config.ts
+++ b/packages/react/vite.config.ts
@ -1,16 +1,11 @@
 import { resolve } from "node:path";
+import tailwindcss from "@tailwindcss/vite";
 import react from "@vitejs/plugin-react";
-import tailwindcss from "tailwindcss";
 import { defineConfig } from "vite";

 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [react()],
-  css: {
-    postcss: {
-      plugins: [tailwindcss()],
-    },
-  },
+  plugins: [react(), tailwindcss()],
  resolve: {
    alias: {
      "@components": resolve(__dirname, "./components"),
--- a/registry.json
+++ b/registry.json
@ -4,7 +4,13 @@
    "components": "/packages/react/components/{componentName}",
    "lib": "/packages/react/lib/{libName}"
  },
-  "lib": ["index.ts", "Slot.tsx", "vcn.ts", "useDocument.ts"],
+  "lib": [
+    "index.ts",
+    "Slot.tsx",
+    "vcn.ts",
+    "useDocument.ts",
+    "useAnimatedMount.ts"
+  ],
  "components": {
    "button": { "type": "file", "name": "Button.tsx" },
    "checkbox": { "type": "file", "name": "Checkbox.tsx" },
--- a/yarn.lock
+++ b/yarn.lock
@ -15,13 +15,6 @@ __metadata:
  languageName: node
  linkType: hard

-"@alloc/quick-lru@npm:^5.2.0":
-  version: 5.2.0
-  resolution: "@alloc/quick-lru@npm:5.2.0"
-  checksum: 10c0/7b878c48b9d25277d0e1a9b8b2f2312a314af806b4129dc902f2bc29ab09b58236e53964689feec187b28c80d2203aff03829754773a707a8a5987f1b7682d92
-  languageName: node
-  linkType: hard
-
 "@ampproject/remapping@npm:^2.2.0":
  version: 2.3.0
  resolution: "@ampproject/remapping@npm:2.3.0"
@ -1405,7 +1398,7 @@ __metadata:
  languageName: node
  linkType: hard

-"@jridgewell/gen-mapping@npm:^0.3.2, @jridgewell/gen-mapping@npm:^0.3.5":
+"@jridgewell/gen-mapping@npm:^0.3.5":
  version: 0.3.5
  resolution: "@jridgewell/gen-mapping@npm:0.3.5"
  dependencies:
@ -2564,6 +2557,150 @@ __metadata:
  languageName: node
  linkType: hard

+"@tailwindcss/node@npm:4.0.12":
+  version: 4.0.12
+  resolution: "@tailwindcss/node@npm:4.0.12"
+  dependencies:
+    enhanced-resolve: "npm:^5.18.1"
+    jiti: "npm:^2.4.2"
+    tailwindcss: "npm:4.0.12"
+  checksum: 10c0/69468c6f6a4f2ff88449b13be245b9a9b0372f2d456a59959da0562dfb3f45f64ae8003965fe0c4f8c4f2fef92f88def003489c2e5b16fd912eb69c99bd064ad
+  languageName: node
+  linkType: hard
+
+"@tailwindcss/oxide-android-arm64@npm:4.0.12":
+  version: 4.0.12
+  resolution: "@tailwindcss/oxide-android-arm64@npm:4.0.12"
+  conditions: os=android & cpu=arm64
+  languageName: node
+  linkType: hard
+
+"@tailwindcss/oxide-darwin-arm64@npm:4.0.12":
+  version: 4.0.12
+  resolution: "@tailwindcss/oxide-darwin-arm64@npm:4.0.12"
+  conditions: os=darwin & cpu=arm64
+  languageName: node
+  linkType: hard
+
+"@tailwindcss/oxide-darwin-x64@npm:4.0.12":
+  version: 4.0.12
+  resolution: "@tailwindcss/oxide-darwin-x64@npm:4.0.12"
+  conditions: os=darwin & cpu=x64
+  languageName: node
+  linkType: hard
+
+"@tailwindcss/oxide-freebsd-x64@npm:4.0.12":
+  version: 4.0.12
+  resolution: "@tailwindcss/oxide-freebsd-x64@npm:4.0.12"
+  conditions: os=freebsd & cpu=x64
+  languageName: node
+  linkType: hard
+
+"@tailwindcss/oxide-linux-arm-gnueabihf@npm:4.0.12":
+  version: 4.0.12
+  resolution: "@tailwindcss/oxide-linux-arm-gnueabihf@npm:4.0.12"
+  conditions: os=linux & cpu=arm
+  languageName: node
+  linkType: hard
+
+"@tailwindcss/oxide-linux-arm64-gnu@npm:4.0.12":
+  version: 4.0.12
+  resolution: "@tailwindcss/oxide-linux-arm64-gnu@npm:4.0.12"
+  conditions: os=linux & cpu=arm64 & libc=glibc
+  languageName: node
+  linkType: hard
+
+"@tailwindcss/oxide-linux-arm64-musl@npm:4.0.12":
+  version: 4.0.12
+  resolution: "@tailwindcss/oxide-linux-arm64-musl@npm:4.0.12"
+  conditions: os=linux & cpu=arm64 & libc=musl
+  languageName: node
+  linkType: hard
+
+"@tailwindcss/oxide-linux-x64-gnu@npm:4.0.12":
+  version: 4.0.12
+  resolution: "@tailwindcss/oxide-linux-x64-gnu@npm:4.0.12"
+  conditions: os=linux & cpu=x64 & libc=glibc
+  languageName: node
+  linkType: hard
+
+"@tailwindcss/oxide-linux-x64-musl@npm:4.0.12":
+  version: 4.0.12
+  resolution: "@tailwindcss/oxide-linux-x64-musl@npm:4.0.12"
+  conditions: os=linux & cpu=x64 & libc=musl
+  languageName: node
+  linkType: hard
+
+"@tailwindcss/oxide-win32-arm64-msvc@npm:4.0.12":
+  version: 4.0.12
+  resolution: "@tailwindcss/oxide-win32-arm64-msvc@npm:4.0.12"
+  conditions: os=win32 & cpu=arm64
+  languageName: node
+  linkType: hard
+
+"@tailwindcss/oxide-win32-x64-msvc@npm:4.0.12":
+  version: 4.0.12
+  resolution: "@tailwindcss/oxide-win32-x64-msvc@npm:4.0.12"
+  conditions: os=win32 & cpu=x64
+  languageName: node
+  linkType: hard
+
+"@tailwindcss/oxide@npm:4.0.12":
+  version: 4.0.12
+  resolution: "@tailwindcss/oxide@npm:4.0.12"
+  dependencies:
+    "@tailwindcss/oxide-android-arm64": "npm:4.0.12"
+    "@tailwindcss/oxide-darwin-arm64": "npm:4.0.12"
+    "@tailwindcss/oxide-darwin-x64": "npm:4.0.12"
+    "@tailwindcss/oxide-freebsd-x64": "npm:4.0.12"
+    "@tailwindcss/oxide-linux-arm-gnueabihf": "npm:4.0.12"
+    "@tailwindcss/oxide-linux-arm64-gnu": "npm:4.0.12"
+    "@tailwindcss/oxide-linux-arm64-musl": "npm:4.0.12"
+    "@tailwindcss/oxide-linux-x64-gnu": "npm:4.0.12"
+    "@tailwindcss/oxide-linux-x64-musl": "npm:4.0.12"
+    "@tailwindcss/oxide-win32-arm64-msvc": "npm:4.0.12"
+    "@tailwindcss/oxide-win32-x64-msvc": "npm:4.0.12"
+  dependenciesMeta:
+    "@tailwindcss/oxide-android-arm64":
+      optional: true
+    "@tailwindcss/oxide-darwin-arm64":
+      optional: true
+    "@tailwindcss/oxide-darwin-x64":
+      optional: true
+    "@tailwindcss/oxide-freebsd-x64":
+      optional: true
+    "@tailwindcss/oxide-linux-arm-gnueabihf":
+      optional: true
+    "@tailwindcss/oxide-linux-arm64-gnu":
+      optional: true
+    "@tailwindcss/oxide-linux-arm64-musl":
+      optional: true
+    "@tailwindcss/oxide-linux-x64-gnu":
+      optional: true
+    "@tailwindcss/oxide-linux-x64-musl":
+      optional: true
+    "@tailwindcss/oxide-win32-arm64-msvc":
+      optional: true
+    "@tailwindcss/oxide-win32-x64-msvc":
+      optional: true
+  checksum: 10c0/02483551ebe381e0d23d325f726108f196770eda09118ddd33d052460aec76d492f176c34a9417d8f8c7461530095809993926d7f374673d2e5833bd90c6d316
+  languageName: node
+  linkType: hard
+
+"@tailwindcss/vite@npm:^4.0.12":
+  version: 4.0.12
+  resolution: "@tailwindcss/vite@npm:4.0.12"
+  dependencies:
+    "@tailwindcss/node": "npm:4.0.12"
+    "@tailwindcss/oxide": "npm:4.0.12"
+    lightningcss: "npm:^1.29.1"
+    tailwindcss: "npm:4.0.12"
+  peerDependencies:
+    vite: ^5.2.0 || ^6
+  checksum: 10c0/5ba921ade4f23c34757895896ac0808c684c9f8f90af512b462754afeab977a5fee80fe784e7263ec086327924f158116c686346a2fe3318f7eb0efad51940a0
+  languageName: node
+  linkType: hard
+
 "@tsconfig/node10@npm:^1.0.7":
  version: 1.0.11
  resolution: "@tsconfig/node10@npm:1.0.11"
@ -2868,23 +3005,6 @@ __metadata:
  languageName: node
  linkType: hard

-"any-promise@npm:^1.0.0":
-  version: 1.3.0
-  resolution: "any-promise@npm:1.3.0"
-  checksum: 10c0/60f0298ed34c74fef50daab88e8dab786036ed5a7fad02e012ab57e376e0a0b4b29e83b95ea9b5e7d89df762f5f25119b83e00706ecaccb22cfbacee98d74889
-  languageName: node
-  linkType: hard
-
-"anymatch@npm:~3.1.2":
-  version: 3.1.3
-  resolution: "anymatch@npm:3.1.3"
-  dependencies:
-    normalize-path: "npm:^3.0.0"
-    picomatch: "npm:^2.0.4"
-  checksum: 10c0/57b06ae984bc32a0d22592c87384cd88fe4511b1dd7581497831c56d41939c8a001b28e7b853e1450f2bf61992dfcaa8ae2d0d161a0a90c4fb631ef07098fbac
-  languageName: node
-  linkType: hard
-
 "aproba@npm:^2.0.0":
  version: 2.0.0
  resolution: "aproba@npm:2.0.0"
@ -2906,13 +3026,6 @@ __metadata:
  languageName: node
  linkType: hard

-"arg@npm:^5.0.2":
-  version: 5.0.2
-  resolution: "arg@npm:5.0.2"
-  checksum: 10c0/ccaf86f4e05d342af6666c569f844bec426595c567d32a8289715087825c2ca7edd8a3d204e4d2fb2aa4602e09a57d0c13ea8c9eea75aac3dbb4af5514e6800e
-  languageName: node
-  linkType: hard
-
 "argparse@npm:^2.0.1":
  version: 2.0.1
  resolution: "argparse@npm:2.0.1"
@ -2957,24 +3070,6 @@ __metadata:
  languageName: node
  linkType: hard

-"autoprefixer@npm:^10.4.19":
-  version: 10.4.19
-  resolution: "autoprefixer@npm:10.4.19"
-  dependencies:
-    browserslist: "npm:^4.23.0"
-    caniuse-lite: "npm:^1.0.30001599"
-    fraction.js: "npm:^4.3.7"
-    normalize-range: "npm:^0.1.2"
-    picocolors: "npm:^1.0.0"
-    postcss-value-parser: "npm:^4.2.0"
-  peerDependencies:
-    postcss: ^8.1.0
-  bin:
-    autoprefixer: bin/autoprefixer
-  checksum: 10c0/fe0178eb8b1da4f15c6535cd329926609b22d1811e047371dccce50563623f8075dd06fb167daff059e4228da651b0bdff6d9b44281541eaf0ce0b79125bfd19
-  languageName: node
-  linkType: hard
-
 "balanced-match@npm:^1.0.0":
  version: 1.0.2
  resolution: "balanced-match@npm:1.0.2"
@ -2994,7 +3089,7 @@ __metadata:
  languageName: node
  linkType: hard

-"binary-extensions@npm:^2.0.0, binary-extensions@npm:^2.3.0":
+"binary-extensions@npm:^2.3.0":
  version: 2.3.0
  resolution: "binary-extensions@npm:2.3.0"
  checksum: 10c0/75a59cafc10fb12a11d510e77110c6c7ae3f4ca22463d52487709ca7f18f69d886aa387557cc9864fbdb10153d0bdb4caacabf11541f55e89ed6e18d12ece2b5
@ -3027,7 +3122,7 @@ __metadata:
  languageName: node
  linkType: hard

-"braces@npm:^3.0.3, braces@npm:~3.0.2":
+"braces@npm:^3.0.3":
  version: 3.0.3
  resolution: "braces@npm:3.0.3"
  dependencies:
@ -3036,7 +3131,7 @@ __metadata:
  languageName: node
  linkType: hard

-"browserslist@npm:^4.22.2, browserslist@npm:^4.23.0":
+"browserslist@npm:^4.22.2":
  version: 4.23.0
  resolution: "browserslist@npm:4.23.0"
  dependencies:
@ -3109,14 +3204,7 @@ __metadata:
  languageName: node
  linkType: hard

-"camelcase-css@npm:^2.0.1":
-  version: 2.0.1
-  resolution: "camelcase-css@npm:2.0.1"
-  checksum: 10c0/1a1a3137e8a781e6cbeaeab75634c60ffd8e27850de410c162cce222ea331cd1ba5364e8fb21c95e5ca76f52ac34b81a090925ca00a87221355746d049c6e273
-  languageName: node
-  linkType: hard
-
-"caniuse-lite@npm:^1.0.30001587, caniuse-lite@npm:^1.0.30001599":
+"caniuse-lite@npm:^1.0.30001587":
  version: 1.0.30001629
  resolution: "caniuse-lite@npm:1.0.30001629"
  checksum: 10c0/e95136a423c0c5e7f9d026ef3f9be8d06cadc4c83ad65eedfaeaba6b5eb814489ea186e90bae1085f3be7348577e25f8fe436b384c2f983324ad8dea4a7dfe1d
@ -3206,25 +3294,6 @@ __metadata:
  languageName: node
  linkType: hard

-"chokidar@npm:^3.5.3":
-  version: 3.6.0
-  resolution: "chokidar@npm:3.6.0"
-  dependencies:
-    anymatch: "npm:~3.1.2"
-    braces: "npm:~3.0.2"
-    fsevents: "npm:~2.3.2"
-    glob-parent: "npm:~5.1.2"
-    is-binary-path: "npm:~2.1.0"
-    is-glob: "npm:~4.0.1"
-    normalize-path: "npm:~3.0.0"
-    readdirp: "npm:~3.6.0"
-  dependenciesMeta:
-    fsevents:
-      optional: true
-  checksum: 10c0/8361dcd013f2ddbe260eacb1f3cb2f2c6f2b0ad118708a343a5ed8158941a39cb8fb1d272e0f389712e74ee90ce8ba864eece9e0e62b9705cb468a2f6d917462
-  languageName: node
-  linkType: hard
-
 "chownr@npm:^2.0.0":
  version: 2.0.0
  resolution: "chownr@npm:2.0.0"
@ -3362,13 +3431,6 @@ __metadata:
  languageName: node
  linkType: hard

-"commander@npm:^4.0.0":
-  version: 4.1.1
-  resolution: "commander@npm:4.1.1"
-  checksum: 10c0/84a76c08fe6cc08c9c93f62ac573d2907d8e79138999312c92d4155bc2325d487d64d13f669b2000c9f8caf70493c1be2dac74fec3c51d5a04f8bc3ae1830bab
-  languageName: node
-  linkType: hard
-
 "common-ancestor-path@npm:^1.0.1":
  version: 1.0.1
  resolution: "common-ancestor-path@npm:1.0.1"
@ -3510,6 +3572,13 @@ __metadata:
  languageName: node
  linkType: hard

+"detect-libc@npm:^2.0.3":
+  version: 2.0.3
+  resolution: "detect-libc@npm:2.0.3"
+  checksum: 10c0/88095bda8f90220c95f162bf92cad70bd0e424913e655c20578600e35b91edc261af27531cf160a331e185c0ced93944bc7e09939143225f56312d7fd800fdb7
+  languageName: node
+  linkType: hard
+
 "detect-newline@npm:^4.0.0":
  version: 4.0.1
  resolution: "detect-newline@npm:4.0.1"
@ -3517,13 +3586,6 @@ __metadata:
  languageName: node
  linkType: hard

-"didyoumean@npm:^1.2.2":
-  version: 1.2.2
-  resolution: "didyoumean@npm:1.2.2"
-  checksum: 10c0/95d0b53d23b851aacff56dfadb7ecfedce49da4232233baecfeecb7710248c4aa03f0aa8995062f0acafaf925adf8536bd7044a2e68316fd7d411477599bc27b
-  languageName: node
-  linkType: hard
-
 "diff@npm:^4.0.1":
  version: 4.0.2
  resolution: "diff@npm:4.0.2"
@ -3547,13 +3609,6 @@ __metadata:
  languageName: node
  linkType: hard

-"dlv@npm:^1.1.3":
-  version: 1.1.3
-  resolution: "dlv@npm:1.1.3"
-  checksum: 10c0/03eb4e769f19a027fd5b43b59e8a05e3fd2100ac239ebb0bf9a745de35d449e2f25cfaf3aa3934664551d72856f4ae8b7822016ce5c42c2d27c18ae79429ec42
-  languageName: node
-  linkType: hard
-
 "dot-case@npm:^3.0.4":
  version: 3.0.4
  resolution: "dot-case@npm:3.0.4"
@ -3619,6 +3674,16 @@ __metadata:
  languageName: node
  linkType: hard

+"enhanced-resolve@npm:^5.18.1":
+  version: 5.18.1
+  resolution: "enhanced-resolve@npm:5.18.1"
+  dependencies:
+    graceful-fs: "npm:^4.2.4"
+    tapable: "npm:^2.2.0"
+  checksum: 10c0/4cffd9b125225184e2abed9fdf0ed3dbd2224c873b165d0838fd066cde32e0918626cba2f1f4bf6860762f13a7e2364fd89a82b99566be2873d813573ac71846
+  languageName: node
+  linkType: hard
+
 "env-paths@npm:^2.2.0, env-paths@npm:^2.2.1":
  version: 2.2.1
  resolution: "env-paths@npm:2.2.1"
@ -3857,13 +3922,6 @@ __metadata:
  languageName: node
  linkType: hard

-"fraction.js@npm:^4.3.7":
-  version: 4.3.7
-  resolution: "fraction.js@npm:4.3.7"
-  checksum: 10c0/df291391beea9ab4c263487ffd9d17fed162dbb736982dee1379b2a8cc94e4e24e46ed508c6d278aded9080ba51872f1bc5f3a5fd8d7c74e5f105b508ac28711
-  languageName: node
-  linkType: hard
-
 "fs-extra@npm:^8.1":
  version: 8.1.0
  resolution: "fs-extra@npm:8.1.0"
@ -3982,7 +4040,7 @@ __metadata:
  languageName: node
  linkType: hard

-"glob-parent@npm:^5.1.2, glob-parent@npm:~5.1.2":
+"glob-parent@npm:^5.1.2":
  version: 5.1.2
  resolution: "glob-parent@npm:5.1.2"
  dependencies:
@ -3991,15 +4049,6 @@ __metadata:
  languageName: node
  linkType: hard

-"glob-parent@npm:^6.0.2":
-  version: 6.0.2
-  resolution: "glob-parent@npm:6.0.2"
-  dependencies:
-    is-glob: "npm:^4.0.3"
-  checksum: 10c0/317034d88654730230b3f43bb7ad4f7c90257a426e872ea0bf157473ac61c99bf5d205fad8f0185f989be8d2fa6d3c7dce1645d99d545b6ea9089c39f838e7f8
-  languageName: node
-  linkType: hard
-
 "glob@npm:^10.2.2, glob@npm:^10.3.10, glob@npm:^10.4.1":
  version: 10.4.1
  resolution: "glob@npm:10.4.1"
@ -4082,7 +4131,7 @@ __metadata:
  languageName: node
  linkType: hard

-"graceful-fs@npm:^4.1.6, graceful-fs@npm:^4.2.0, graceful-fs@npm:^4.2.11, graceful-fs@npm:^4.2.6":
+"graceful-fs@npm:^4.1.6, graceful-fs@npm:^4.2.0, graceful-fs@npm:^4.2.11, graceful-fs@npm:^4.2.4, graceful-fs@npm:^4.2.6":
  version: 4.2.11
  resolution: "graceful-fs@npm:4.2.11"
  checksum: 10c0/386d011a553e02bc594ac2ca0bd6d9e4c22d7fa8cfbfc448a6d148c59ea881b092db9dbe3547ae4b88e55f1b01f7c4a2ecc53b310c042793e63aa44cf6c257f2
@ -4362,15 +4411,6 @@ __metadata:
  languageName: node
  linkType: hard

-"is-binary-path@npm:~2.1.0":
-  version: 2.1.0
-  resolution: "is-binary-path@npm:2.1.0"
-  dependencies:
-    binary-extensions: "npm:^2.0.0"
-  checksum: 10c0/a16eaee59ae2b315ba36fad5c5dcaf8e49c3e27318f8ab8fa3cdb8772bf559c8d1ba750a589c2ccb096113bb64497084361a25960899cb6172a6925ab6123d38
-  languageName: node
-  linkType: hard
-
 "is-cidr@npm:^5.1.0":
  version: 5.1.0
  resolution: "is-cidr@npm:5.1.0"
@ -4428,7 +4468,7 @@ __metadata:
  languageName: node
  linkType: hard

-"is-glob@npm:^4.0.1, is-glob@npm:^4.0.3, is-glob@npm:~4.0.1":
+"is-glob@npm:^4.0.1":
  version: 4.0.3
  resolution: "is-glob@npm:4.0.3"
  dependencies:
@ -4552,12 +4592,12 @@ __metadata:
  languageName: node
  linkType: hard

-"jiti@npm:^1.21.0":
-  version: 1.21.3
-  resolution: "jiti@npm:1.21.3"
+"jiti@npm:^2.4.2":
+  version: 2.4.2
+  resolution: "jiti@npm:2.4.2"
  bin:
-    jiti: bin/jiti.js
-  checksum: 10c0/5de8b6a30e02e665ff03a925e43110097082e2e695cbf958ee8b2ba18fa894e3688862bb2ea52356fbefd924050d28b729b0c4efdaf4b05bf24f2c52ad0e778d
+    jiti: lib/jiti-cli.mjs
+  checksum: 10c0/4ceac133a08c8faff7eac84aabb917e85e8257f5ad659e843004ce76e981c457c390a220881748ac67ba1b940b9b729b30fb85cbaf6e7989f04b6002c94da331
  languageName: node
  linkType: hard

@ -4905,17 +4945,113 @@ __metadata:
  languageName: node
  linkType: hard

-"lilconfig@npm:^2.1.0":
-  version: 2.1.0
-  resolution: "lilconfig@npm:2.1.0"
-  checksum: 10c0/64645641aa8d274c99338e130554abd6a0190533c0d9eb2ce7ebfaf2e05c7d9961f3ffe2bfa39efd3b60c521ba3dd24fa236fe2775fc38501bf82bf49d4678b8
+"lightningcss-darwin-arm64@npm:1.29.2":
+  version: 1.29.2
+  resolution: "lightningcss-darwin-arm64@npm:1.29.2"
+  conditions: os=darwin & cpu=arm64
  languageName: node
  linkType: hard

-"lilconfig@npm:^3.0.0":
-  version: 3.1.1
-  resolution: "lilconfig@npm:3.1.1"
-  checksum: 10c0/311b559794546894e3fe176663427326026c1c644145be9e8041c58e268aa9328799b8dfe7e4dd8c6a4ae305feae95a1c9e007db3569f35b42b6e1bc8274754c
+"lightningcss-darwin-x64@npm:1.29.2":
+  version: 1.29.2
+  resolution: "lightningcss-darwin-x64@npm:1.29.2"
+  conditions: os=darwin & cpu=x64
+  languageName: node
+  linkType: hard
+
+"lightningcss-freebsd-x64@npm:1.29.2":
+  version: 1.29.2
+  resolution: "lightningcss-freebsd-x64@npm:1.29.2"
+  conditions: os=freebsd & cpu=x64
+  languageName: node
+  linkType: hard
+
+"lightningcss-linux-arm-gnueabihf@npm:1.29.2":
+  version: 1.29.2
+  resolution: "lightningcss-linux-arm-gnueabihf@npm:1.29.2"
+  conditions: os=linux & cpu=arm
+  languageName: node
+  linkType: hard
+
+"lightningcss-linux-arm64-gnu@npm:1.29.2":
+  version: 1.29.2
+  resolution: "lightningcss-linux-arm64-gnu@npm:1.29.2"
+  conditions: os=linux & cpu=arm64 & libc=glibc
+  languageName: node
+  linkType: hard
+
+"lightningcss-linux-arm64-musl@npm:1.29.2":
+  version: 1.29.2
+  resolution: "lightningcss-linux-arm64-musl@npm:1.29.2"
+  conditions: os=linux & cpu=arm64 & libc=musl
+  languageName: node
+  linkType: hard
+
+"lightningcss-linux-x64-gnu@npm:1.29.2":
+  version: 1.29.2
+  resolution: "lightningcss-linux-x64-gnu@npm:1.29.2"
+  conditions: os=linux & cpu=x64 & libc=glibc
+  languageName: node
+  linkType: hard
+
+"lightningcss-linux-x64-musl@npm:1.29.2":
+  version: 1.29.2
+  resolution: "lightningcss-linux-x64-musl@npm:1.29.2"
+  conditions: os=linux & cpu=x64 & libc=musl
+  languageName: node
+  linkType: hard
+
+"lightningcss-win32-arm64-msvc@npm:1.29.2":
+  version: 1.29.2
+  resolution: "lightningcss-win32-arm64-msvc@npm:1.29.2"
+  conditions: os=win32 & cpu=arm64
+  languageName: node
+  linkType: hard
+
+"lightningcss-win32-x64-msvc@npm:1.29.2":
+  version: 1.29.2
+  resolution: "lightningcss-win32-x64-msvc@npm:1.29.2"
+  conditions: os=win32 & cpu=x64
+  languageName: node
+  linkType: hard
+
+"lightningcss@npm:^1.29.1":
+  version: 1.29.2
+  resolution: "lightningcss@npm:1.29.2"
+  dependencies:
+    detect-libc: "npm:^2.0.3"
+    lightningcss-darwin-arm64: "npm:1.29.2"
+    lightningcss-darwin-x64: "npm:1.29.2"
+    lightningcss-freebsd-x64: "npm:1.29.2"
+    lightningcss-linux-arm-gnueabihf: "npm:1.29.2"
+    lightningcss-linux-arm64-gnu: "npm:1.29.2"
+    lightningcss-linux-arm64-musl: "npm:1.29.2"
+    lightningcss-linux-x64-gnu: "npm:1.29.2"
+    lightningcss-linux-x64-musl: "npm:1.29.2"
+    lightningcss-win32-arm64-msvc: "npm:1.29.2"
+    lightningcss-win32-x64-msvc: "npm:1.29.2"
+  dependenciesMeta:
+    lightningcss-darwin-arm64:
+      optional: true
+    lightningcss-darwin-x64:
+      optional: true
+    lightningcss-freebsd-x64:
+      optional: true
+    lightningcss-linux-arm-gnueabihf:
+      optional: true
+    lightningcss-linux-arm64-gnu:
+      optional: true
+    lightningcss-linux-arm64-musl:
+      optional: true
+    lightningcss-linux-x64-gnu:
+      optional: true
+    lightningcss-linux-x64-musl:
+      optional: true
+    lightningcss-win32-arm64-msvc:
+      optional: true
+    lightningcss-win32-x64-msvc:
+      optional: true
+  checksum: 10c0/e06bb99c98e9f56cfcf37b5ce0e0198cdeeac2993ef2e5b878b6b0934fff54c7528f38bf8875e7bd71e64c9b20b29c0cada222d1e0089c8f94c1159bbb5d611f
  languageName: node
  linkType: hard

@ -5029,7 +5165,7 @@ __metadata:
  languageName: node
  linkType: hard

-"micromatch@npm:^4.0.2, micromatch@npm:^4.0.4, micromatch@npm:^4.0.5":
+"micromatch@npm:^4.0.2, micromatch@npm:^4.0.4":
  version: 4.0.7
  resolution: "micromatch@npm:4.0.7"
  dependencies:
@ -5218,17 +5354,6 @@ __metadata:
  languageName: node
  linkType: hard

-"mz@npm:^2.7.0":
-  version: 2.7.0
-  resolution: "mz@npm:2.7.0"
-  dependencies:
-    any-promise: "npm:^1.0.0"
-    object-assign: "npm:^4.0.1"
-    thenify-all: "npm:^1.0.0"
-  checksum: 10c0/103114e93f87362f0b56ab5b2e7245051ad0276b646e3902c98397d18bb8f4a77f2ea4a2c9d3ad516034ea3a56553b60d3f5f78220001ca4c404bd711bd0af39
-  languageName: node
-  linkType: hard
-
 "nanoid@npm:^3.3.7":
  version: 3.3.7
  resolution: "nanoid@npm:3.3.7"
@ -5305,20 +5430,6 @@ __metadata:
  languageName: node
  linkType: hard

-"normalize-path@npm:^3.0.0, normalize-path@npm:~3.0.0":
-  version: 3.0.0
-  resolution: "normalize-path@npm:3.0.0"
-  checksum: 10c0/e008c8142bcc335b5e38cf0d63cfd39d6cf2d97480af9abdbe9a439221fd4d749763bab492a8ee708ce7a194bb00c9da6d0a115018672310850489137b3da046
-  languageName: node
-  linkType: hard
-
-"normalize-range@npm:^0.1.2":
-  version: 0.1.2
-  resolution: "normalize-range@npm:0.1.2"
-  checksum: 10c0/bf39b73a63e0a42ad1a48c2bd1bda5a07ede64a7e2567307a407674e595bcff0fa0d57e8e5f1e7fa5e91000797c7615e13613227aaaa4d6d6e87f5bd5cc95de6
-  languageName: node
-  linkType: hard
-
 "normalize-url@npm:^8.0.0":
  version: 8.0.1
  resolution: "normalize-url@npm:8.0.1"
@ -5512,20 +5623,6 @@ __metadata:
  languageName: node
  linkType: hard

-"object-assign@npm:^4.0.1":
-  version: 4.1.1
-  resolution: "object-assign@npm:4.1.1"
-  checksum: 10c0/1f4df9945120325d041ccf7b86f31e8bcc14e73d29171e37a7903050e96b81323784ec59f93f102ec635bcf6fa8034ba3ea0a8c7e69fa202b87ae3b6cec5a414
-  languageName: node
-  linkType: hard
-
-"object-hash@npm:^3.0.0":
-  version: 3.0.0
-  resolution: "object-hash@npm:3.0.0"
-  checksum: 10c0/a06844537107b960c1c8b96cd2ac8592a265186bfa0f6ccafe0d34eabdb526f6fa81da1f37c43df7ed13b12a4ae3457a16071603bcd39d8beddb5f08c37b0f47
-  languageName: node
-  linkType: hard
-
 "object-treeify@npm:^4.0.1":
  version: 4.0.1
  resolution: "object-treeify@npm:4.0.1"
@ -5783,81 +5880,14 @@ __metadata:
  languageName: node
  linkType: hard

-"picomatch@npm:^2.0.4, picomatch@npm:^2.2.1, picomatch@npm:^2.3.1":
+"picomatch@npm:^2.3.1":
  version: 2.3.1
  resolution: "picomatch@npm:2.3.1"
  checksum: 10c0/26c02b8d06f03206fc2ab8d16f19960f2ff9e81a658f831ecb656d8f17d9edc799e8364b1f4a7873e89d9702dff96204be0fa26fe4181f6843f040f819dac4be
  languageName: node
  linkType: hard

-"pify@npm:^2.3.0":
-  version: 2.3.0
-  resolution: "pify@npm:2.3.0"
-  checksum: 10c0/551ff8ab830b1052633f59cb8adc9ae8407a436e06b4a9718bcb27dc5844b83d535c3a8512b388b6062af65a98c49bdc0dd523d8b2617b188f7c8fee457158dc
-  languageName: node
-  linkType: hard
-
-"pirates@npm:^4.0.1":
-  version: 4.0.6
-  resolution: "pirates@npm:4.0.6"
-  checksum: 10c0/00d5fa51f8dded94d7429700fb91a0c1ead00ae2c7fd27089f0c5b63e6eca36197fe46384631872690a66f390c5e27198e99006ab77ae472692ab9c2ca903f36
-  languageName: node
-  linkType: hard
-
-"postcss-import@npm:^15.1.0":
-  version: 15.1.0
-  resolution: "postcss-import@npm:15.1.0"
-  dependencies:
-    postcss-value-parser: "npm:^4.0.0"
-    read-cache: "npm:^1.0.0"
-    resolve: "npm:^1.1.7"
-  peerDependencies:
-    postcss: ^8.0.0
-  checksum: 10c0/518aee5c83ea6940e890b0be675a2588db68b2582319f48c3b4e06535a50ea6ee45f7e63e4309f8754473245c47a0372632378d1d73d901310f295a92f26f17b
-  languageName: node
-  linkType: hard
-
-"postcss-js@npm:^4.0.1":
-  version: 4.0.1
-  resolution: "postcss-js@npm:4.0.1"
-  dependencies:
-    camelcase-css: "npm:^2.0.1"
-  peerDependencies:
-    postcss: ^8.4.21
-  checksum: 10c0/af35d55cb873b0797d3b42529514f5318f447b134541844285c9ac31a17497297eb72296902967911bb737a75163441695737300ce2794e3bd8c70c13a3b106e
-  languageName: node
-  linkType: hard
-
-"postcss-load-config@npm:^4.0.1":
-  version: 4.0.2
-  resolution: "postcss-load-config@npm:4.0.2"
-  dependencies:
-    lilconfig: "npm:^3.0.0"
-    yaml: "npm:^2.3.4"
-  peerDependencies:
-    postcss: ">=8.0.9"
-    ts-node: ">=9.0.0"
-  peerDependenciesMeta:
-    postcss:
-      optional: true
-    ts-node:
-      optional: true
-  checksum: 10c0/3d7939acb3570b0e4b4740e483d6e555a3e2de815219cb8a3c8fc03f575a6bde667443aa93369c0be390af845cb84471bf623e24af833260de3a105b78d42519
-  languageName: node
-  linkType: hard
-
-"postcss-nested@npm:^6.0.1":
-  version: 6.0.1
-  resolution: "postcss-nested@npm:6.0.1"
-  dependencies:
-    postcss-selector-parser: "npm:^6.0.11"
-  peerDependencies:
-    postcss: ^8.2.14
-  checksum: 10c0/2a50aa36d5d103c2e471954830489f4c024deed94fa066169101db55171368d5f80b32446b584029e0471feee409293d0b6b1d8ede361f6675ba097e477b3cbd
-  languageName: node
-  linkType: hard
-
-"postcss-selector-parser@npm:^6.0.10, postcss-selector-parser@npm:^6.0.11":
+"postcss-selector-parser@npm:^6.0.10":
  version: 6.1.0
  resolution: "postcss-selector-parser@npm:6.1.0"
  dependencies:
@ -5867,14 +5897,7 @@ __metadata:
  languageName: node
  linkType: hard

-"postcss-value-parser@npm:^4.0.0, postcss-value-parser@npm:^4.2.0":
-  version: 4.2.0
-  resolution: "postcss-value-parser@npm:4.2.0"
-  checksum: 10c0/f4142a4f56565f77c1831168e04e3effd9ffcc5aebaf0f538eee4b2d465adfd4b85a44257bb48418202a63806a7da7fe9f56c330aebb3cac898e46b4cbf49161
-  languageName: node
-  linkType: hard
-
-"postcss@npm:^8.4.23, postcss@npm:^8.4.38":
+"postcss@npm:^8.4.38":
  version: 8.4.38
  resolution: "postcss@npm:8.4.38"
  dependencies:
@ -6013,30 +6036,20 @@ __metadata:
  version: 0.0.0-use.local
  resolution: "react@workspace:packages/react"
  dependencies:
+    "@tailwindcss/vite": "npm:^4.0.12"
    "@types/node": "npm:^20.12.13"
    "@types/react": "npm:^18.2.66"
    "@types/react-dom": "npm:^18.2.22"
    "@vitejs/plugin-react": "npm:^4.2.1"
-    autoprefixer: "npm:^10.4.19"
-    postcss: "npm:^8.4.38"
    react: "npm:^18.2.0"
    react-dom: "npm:^18.2.0"
    tailwind-merge: "npm:^2.3.0"
-    tailwindcss: "npm:^3.4.3"
+    tailwindcss: "npm:^4.0.12"
    typescript: "npm:^5.4.5"
    vite: "npm:^5.2.0"
  languageName: unknown
  linkType: soft

-"read-cache@npm:^1.0.0":
-  version: 1.0.0
-  resolution: "read-cache@npm:1.0.0"
-  dependencies:
-    pify: "npm:^2.3.0"
-  checksum: 10c0/90cb2750213c7dd7c80cb420654344a311fdec12944e81eb912cd82f1bc92aea21885fa6ce442e3336d9fccd663b8a7a19c46d9698e6ca55620848ab932da814
-  languageName: node
-  linkType: hard
-
 "read-cmd-shim@npm:^4.0.0":
  version: 4.0.0
  resolution: "read-cmd-shim@npm:4.0.0"
@ -6063,15 +6076,6 @@ __metadata:
  languageName: node
  linkType: hard

-"readdirp@npm:~3.6.0":
-  version: 3.6.0
-  resolution: "readdirp@npm:3.6.0"
-  dependencies:
-    picomatch: "npm:^2.2.1"
-  checksum: 10c0/6fa848cf63d1b82ab4e985f4cf72bd55b7dcfd8e0a376905804e48c3634b7e749170940ba77b32804d5fe93b3cc521aa95a8d7e7d725f830da6d93f3669ce66b
-  languageName: node
-  linkType: hard
-
 "rechoir@npm:^0.6.2":
  version: 0.6.2
  resolution: "rechoir@npm:0.6.2"
@ -6102,7 +6106,7 @@ __metadata:
  languageName: node
  linkType: hard

-"resolve@npm:^1.1.6, resolve@npm:^1.1.7, resolve@npm:^1.22.2":
+"resolve@npm:^1.1.6":
  version: 1.22.8
  resolution: "resolve@npm:1.22.8"
  dependencies:
@ -6115,7 +6119,7 @@ __metadata:
  languageName: node
  linkType: hard

-"resolve@patch:resolve@npm%3A^1.1.6#optional!builtin<compat/resolve>, resolve@patch:resolve@npm%3A^1.1.7#optional!builtin<compat/resolve>, resolve@patch:resolve@npm%3A^1.22.2#optional!builtin<compat/resolve>":
+"resolve@patch:resolve@npm%3A^1.1.6#optional!builtin<compat/resolve>":
  version: 1.22.8
  resolution: "resolve@patch:resolve@npm%3A1.22.8#optional!builtin<compat/resolve>::version=1.22.8&hash=c3c19d"
  dependencies:
@ -6599,24 +6603,6 @@ __metadata:
  languageName: node
  linkType: hard

-"sucrase@npm:^3.32.0":
-  version: 3.35.0
-  resolution: "sucrase@npm:3.35.0"
-  dependencies:
-    "@jridgewell/gen-mapping": "npm:^0.3.2"
-    commander: "npm:^4.0.0"
-    glob: "npm:^10.3.10"
-    lines-and-columns: "npm:^1.1.6"
-    mz: "npm:^2.7.0"
-    pirates: "npm:^4.0.1"
-    ts-interface-checker: "npm:^0.1.9"
-  bin:
-    sucrase: bin/sucrase
-    sucrase-node: bin/sucrase-node
-  checksum: 10c0/ac85f3359d2c2ecbf5febca6a24ae9bf96c931f05fde533c22a94f59c6a74895e5d5f0e871878dfd59c2697a75ebb04e4b2224ef0bfc24ca1210735c2ec191ef
-  languageName: node
-  linkType: hard
-
 "supports-color@npm:^5.3.0":
  version: 5.5.0
  resolution: "supports-color@npm:5.5.0"
@ -6676,36 +6662,17 @@ __metadata:
  languageName: node
  linkType: hard

-"tailwindcss@npm:^3.4.3":
-  version: 3.4.4
-  resolution: "tailwindcss@npm:3.4.4"
-  dependencies:
-    "@alloc/quick-lru": "npm:^5.2.0"
-    arg: "npm:^5.0.2"
-    chokidar: "npm:^3.5.3"
-    didyoumean: "npm:^1.2.2"
-    dlv: "npm:^1.1.3"
-    fast-glob: "npm:^3.3.0"
-    glob-parent: "npm:^6.0.2"
-    is-glob: "npm:^4.0.3"
-    jiti: "npm:^1.21.0"
-    lilconfig: "npm:^2.1.0"
-    micromatch: "npm:^4.0.5"
-    normalize-path: "npm:^3.0.0"
-    object-hash: "npm:^3.0.0"
-    picocolors: "npm:^1.0.0"
-    postcss: "npm:^8.4.23"
-    postcss-import: "npm:^15.1.0"
-    postcss-js: "npm:^4.0.1"
-    postcss-load-config: "npm:^4.0.1"
-    postcss-nested: "npm:^6.0.1"
-    postcss-selector-parser: "npm:^6.0.11"
-    resolve: "npm:^1.22.2"
-    sucrase: "npm:^3.32.0"
-  bin:
-    tailwind: lib/cli.js
-    tailwindcss: lib/cli.js
-  checksum: 10c0/e4f7e1a2e1897871a4744f421ccb5639e8d51012e3644b0c35cf723527fdc8f9cddd3fa3b0fc28c198b0ea6ce44ead21c89cfec549d80bad9b1f3dd9d8bf2d54
+"tailwindcss@npm:4.0.12, tailwindcss@npm:^4.0.12":
+  version: 4.0.12
+  resolution: "tailwindcss@npm:4.0.12"
+  checksum: 10c0/186e94e49b97e974daf999c350bfc50e727039f22c44baf9144b987b6c9b754bc983e8c9ef5b99a3ca2d399115eb7811967f66cf9e88edc08ac729746d80dc56
+  languageName: node
+  linkType: hard
+
+"tapable@npm:^2.2.0":
+  version: 2.2.1
+  resolution: "tapable@npm:2.2.1"
+  checksum: 10c0/bc40e6efe1e554d075469cedaba69a30eeb373552aaf41caeaaa45bf56ffacc2674261b106245bd566b35d8f3329b52d838e851ee0a852120acae26e622925c9
  languageName: node
  linkType: hard

@ -6730,24 +6697,6 @@ __metadata:
  languageName: node
  linkType: hard

-"thenify-all@npm:^1.0.0":
-  version: 1.6.0
-  resolution: "thenify-all@npm:1.6.0"
-  dependencies:
-    thenify: "npm:>= 3.1.0 < 4"
-  checksum: 10c0/9b896a22735e8122754fe70f1d65f7ee691c1d70b1f116fda04fea103d0f9b356e3676cb789506e3909ae0486a79a476e4914b0f92472c2e093d206aed4b7d6b
-  languageName: node
-  linkType: hard
-
-"thenify@npm:>= 3.1.0 < 4":
-  version: 3.3.1
-  resolution: "thenify@npm:3.3.1"
-  dependencies:
-    any-promise: "npm:^1.0.0"
-  checksum: 10c0/f375aeb2b05c100a456a30bc3ed07ef03a39cbdefe02e0403fb714b8c7e57eeaad1a2f5c4ecfb9ce554ce3db9c2b024eba144843cd9e344566d9fcee73b04767
-  languageName: node
-  linkType: hard
-
 "tiny-jsonc@npm:^1.0.1":
  version: 1.0.1
  resolution: "tiny-jsonc@npm:1.0.1"
@ -6792,13 +6741,6 @@ __metadata:
  languageName: node
  linkType: hard

-"ts-interface-checker@npm:^0.1.9":
-  version: 0.1.13
-  resolution: "ts-interface-checker@npm:0.1.13"
-  checksum: 10c0/232509f1b84192d07b81d1e9b9677088e590ac1303436da1e92b296e9be8e31ea042e3e1fd3d29b1742ad2c959e95afe30f63117b8f1bc3a3850070a5142fea7
-  languageName: node
-  linkType: hard
-
 "ts-node@npm:^10":
  version: 10.9.2
  resolution: "ts-node@npm:10.9.2"
@ -7209,15 +7151,6 @@ __metadata:
  languageName: node
  linkType: hard

-"yaml@npm:^2.3.4":
-  version: 2.4.3
-  resolution: "yaml@npm:2.4.3"
-  bin:
-    yaml: bin.mjs
-  checksum: 10c0/b4a9dea34265f000402c909144ac310be42c4526dfd16dff1aee2b04a0d94051713651c0cd2b0a3d8109266997422120f16a7934629d12f22dc215839ebbeccf
-  languageName: node
-  linkType: hard
-
 "yarn@npm:^1.22.22":
  version: 1.22.22
  resolution: "yarn@npm:1.22.22"
Author	SHA1	Message	Date
Shinwoo PARK	f122310c37	fix: fix slot type error Some checks failed lint-and-check / CLI Check (push) Has been cancelled Details lint-and-check / Component Check (push) Has been cancelled Details	2025-03-12 13:27:23 +09:00
Shinwoo PARK	ef2bdbf3e0	fix: remove nonsense use client directive in drawer Some checks are pending lint-and-check / CLI Check (push) Waiting to run Details lint-and-check / Component Check (push) Waiting to run Details	2025-03-11 20:24:55 +09:00
Shinwoo PARK	a4da53a890	fix: do missing steps for upgrading to tailwindcss v4	2025-03-11 20:12:46 +09:00
Shinwoo PARK	90a458268f	feat: upgrade tailwindcss v4 Some checks are pending lint-and-check / CLI Check (push) Waiting to run Details lint-and-check / Component Check (push) Waiting to run Details	2025-03-11 19:59:11 +09:00
Shinwoo PARK	fe1a9afeb0	chore: change setting to auto format with biome	2025-03-11 19:33:26 +09:00
p-sw	a6af5622dd	feat: improve stability of drawer using relative and padding	2024-08-09 11:44:18 +09:00
p-sw	81854841ce	feat: use useAnimatedMount in Drawer	2024-08-07 22:08:22 +09:00
p-sw	57f9a9b118	fix: add useAnimatedMount to registry	2024-08-07 21:46:12 +09:00
p-sw	a90cec770c	feat: make sure toast is rendered as born first	2024-08-07 19:19:27 +09:00
p-sw	371453b544	refactor: use getCalculatedTransitionDuration on Toast	2024-08-07 19:14:30 +09:00
p-sw	054568a2ec	feat: export getCalculatedTransitionDuration	2024-08-07 19:09:27 +09:00
p-sw	4b6724ed90	feat: unmount dialog from dom on closed	2024-08-07 18:58:53 +09:00
p-sw	8728df1f60	docs: enhance useAnimatedMount comment	2024-08-07 18:54:57 +09:00
p-sw	3ccfa3b519	feat: add useAnimatedMount	2024-08-07 18:32:13 +09:00