@deepnoid/ui 0.1.56 → 0.1.57

package/dist/{chunk-ZI37UH3A.mjs → chunk-DN6AW7DN.mjs}

@@ -1,10 +1,10 @@
 "use client";
-import {
-  ripple_default
-} from "./chunk-LXHUO6VM.mjs";
 import {
   useRipple
 } from "./chunk-6PNKRBUT.mjs";
+import {
+  ripple_default
+} from "./chunk-LXHUO6VM.mjs";
 import {
   Icon_default
 } from "./chunk-DZ6QJCDZ.mjs";
@@ -93,9 +93,7 @@ var buttonStyle = tv({
     variant: {
       solid: "",
       soft: "",
-      outline: {
-        base: "bg-transparent border-transparent"
-      },
+      outline: "",
       ghost: ""
     },
     color: {
@@ -266,49 +264,49 @@ var buttonStyle = tv({
       variant: "outline",
       color: "primary",
       class: {
-        base: ["bg-transparent", "border-primary-main", "text-primary-main", "hover:bg-primary-soft"]
+        base: ["bg-body-background", "border-primary-main", "text-primary-main", "hover:bg-primary-soft"]
       }
     },
     {
       variant: "outline",
       color: "secondary",
       class: {
-        base: ["bg-transparent", "border-secondary-main", "text-secondary-main", "hover:bg-secondary-soft"]
+        base: ["bg-body-background", "border-secondary-main", "text-secondary-main", "hover:bg-secondary-soft"]
       }
     },
     {
       variant: "outline",
       color: "neutral",
       class: {
-        base: ["bg-transparent", "border-neutral-main", "text-neutral-main", "hover:bg-neutral-soft"]
+        base: ["bg-body-background", "border-neutral-main", "text-neutral-main", "hover:bg-neutral-soft"]
       }
     },
     {
       variant: "outline",
       color: "info",
       class: {
-        base: ["bg-transparent", "border-info-main", "text-info-main", "hover:bg-info-soft"]
+        base: ["bg-body-background", "border-info-main", "text-info-main", "hover:bg-info-soft"]
       }
     },
     {
       variant: "outline",
       color: "success",
       class: {
-        base: ["bg-transparent", "border-success-main", "text-success-main", "hover:bg-success-soft"]
+        base: ["bg-body-background", "border-success-main", "text-success-main", "hover:bg-success-soft"]
       }
     },
     {
       variant: "outline",
       color: "warning",
       class: {
-        base: ["bg-transparent", "border-warning-main", "text-warning-main", "hover:bg-warning-soft"]
+        base: ["bg-body-background", "border-warning-main", "text-warning-main", "hover:bg-warning-soft"]
       }
     },
     {
       variant: "outline",
       color: "danger",
       class: {
-        base: ["bg-transparent", "border-danger-main", "text-danger-main", "hover:bg-danger-soft"]
+        base: ["bg-body-background", "border-danger-main", "text-danger-main", "hover:bg-danger-soft"]
       }
     },
     // ghost & color

package/dist/{chunk-IC3O54EM.mjs → chunk-LDRIZFBK.mjs}

@@ -4,10 +4,10 @@ import {
 } from "./chunk-UETBYMGS.mjs";
 import {
   button_default
-} from "./chunk-ZI37UH3A.mjs";
+} from "./chunk-DN6AW7DN.mjs";
 import {
   icon_button_default
-} from "./chunk-D47SHPFE.mjs";
+} from "./chunk-DFBPLQMN.mjs";
 
 // src/components/fileUpload/fileUpload.tsx
 import { useRef, useState, useEffect } from "react";

package/dist/chunk-LSO5QZIT.mjs

@@ -0,0 +1,174 @@
+"use client";
+import {
+  tv
+} from "./chunk-4ZJFD3L3.mjs";
+import {
+  clsx
+} from "./chunk-27Y6K5NK.mjs";
+import {
+  mapPropsVariants
+} from "./chunk-E3G5QXSH.mjs";
+
+// src/components/drawer/drawer.tsx
+import { forwardRef, useMemo, useEffect, useState } from "react";
+import { createPortal } from "react-dom";
+import { jsx, jsxs } from "react/jsx-runtime";
+var Drawer = forwardRef((props, ref) => {
+  const [localProps, variantProps] = mapPropsVariants(props, drawer.variantKeys);
+  const { classNames, isOpen, content, isKeyboardDismissDisabled = false, onClose, backdrop = true } = localProps;
+  const position = props.position || "right";
+  const [shouldRender, setShouldRender] = useState(isOpen);
+  const [isAnimating, setIsAnimating] = useState(isOpen);
+  const [isContentAnimating, setIsContentAnimating] = useState(isOpen);
+  const slots = useMemo(() => drawer(variantProps), [variantProps]);
+  useEffect(() => {
+    if (isOpen) {
+      setShouldRender(true);
+      requestAnimationFrame(() => {
+        setIsAnimating(true);
+        setTimeout(() => {
+          setIsContentAnimating(true);
+        }, 50);
+      });
+    } else {
+      setIsContentAnimating(false);
+      setIsAnimating(false);
+      const timer = setTimeout(() => {
+        setShouldRender(false);
+      }, 300);
+      return () => clearTimeout(timer);
+    }
+  }, [isOpen]);
+  useEffect(() => {
+    if (shouldRender) {
+      document.body.classList.add("overflow-hidden");
+    } else {
+      document.body.classList.remove("overflow-hidden");
+    }
+    if (!isOpen || isKeyboardDismissDisabled) return;
+    const handleKeyDown = (e) => {
+      if (e.key === "Escape") onClose == null ? void 0 : onClose();
+    };
+    document.addEventListener("keydown", handleKeyDown);
+    return () => {
+      document.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [shouldRender, isOpen, isKeyboardDismissDisabled, onClose]);
+  const getAnimationClasses = () => {
+    const baseTransition = "transform transition-all duration-300 ease-in-out";
+    if (!isContentAnimating) {
+      switch (position) {
+        case "left":
+          return `${baseTransition} -translate-x-full`;
+        case "right":
+          return `${baseTransition} translate-x-full`;
+        case "top":
+          return `${baseTransition} -translate-y-full`;
+        case "bottom":
+          return `${baseTransition} translate-y-full`;
+        default:
+          return `${baseTransition} translate-x-full`;
+      }
+    }
+    return `${baseTransition} translate-x-0 translate-y-0`;
+  };
+  if (!shouldRender) return null;
+  return createPortal(
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        className: slots.base({
+          class: clsx(
+            classNames == null ? void 0 : classNames.base,
+            isAnimating ? "visible opacity-100" : "invisible opacity-0",
+            "transition-all duration-300 ease-in-out"
+          )
+        }),
+        "aria-labelledby": "drawer",
+        role: "dialog",
+        "aria-modal": "true",
+        children: [
+          backdrop && /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-black/50 backdrop-blur-sm", onClick: onClose }),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: slots.drawerWrapper({
+                class: clsx(classNames == null ? void 0 : classNames.drawerWrapper, getAnimationClasses())
+              }),
+              onClick: (e) => e.stopPropagation(),
+              children: /* @__PURE__ */ jsx("div", { className: slots.wrapper({ class: classNames == null ? void 0 : classNames.wrapper }), children: content })
+            }
+          )
+        ]
+      }
+    ),
+    document.body
+  );
+});
+Drawer.displayName = "Drawer";
+var drawer = tv({
+  slots: {
+    base: ["fixed", "inset-0", "z-50", "flex", "transition-all", "duration-300", "ease-in-out"],
+    drawerWrapper: ["relative", "flex", "flex-col", "bg-white", "shadow-xl", "overflow-hidden", "z-10"],
+    wrapper: ["flex", "flex-col", "h-full", "overflow-y-auto"]
+  },
+  variants: {
+    position: {
+      left: {
+        base: "justify-start",
+        drawerWrapper: "h-full border-r"
+      },
+      right: {
+        base: "justify-end",
+        drawerWrapper: "h-full border-l"
+      },
+      top: {
+        base: "items-start",
+        drawerWrapper: "w-full border-b"
+      },
+      bottom: {
+        base: "items-end",
+        drawerWrapper: "w-full border-t"
+      }
+    }
+  },
+  compoundVariants: [
+    {
+      position: ["top", "bottom"],
+      size: "sm",
+      class: {
+        drawerWrapper: "max-h-[25vh] max-w-none w-full"
+      }
+    },
+    {
+      position: ["top", "bottom"],
+      size: "md",
+      class: {
+        drawerWrapper: "max-h-[40vh] max-w-none w-full"
+      }
+    },
+    {
+      position: ["top", "bottom"],
+      size: "lg",
+      class: {
+        drawerWrapper: "max-h-[60vh] max-w-none w-full"
+      }
+    },
+    {
+      position: ["top", "bottom"],
+      size: "xl",
+      class: {
+        drawerWrapper: "max-h-[80vh] max-w-none w-full"
+      }
+    }
+  ],
+  defaultVariants: {
+    position: "right"
+  }
+});
+var drawer_default = Drawer;
+
+export {
+  drawer_default
+};

package/dist/{chunk-BWTDELPC.mjs → chunk-N4TTHIUT.mjs}

@@ -4,7 +4,7 @@ import {
 } from "./chunk-LL6F3WDX.mjs";
 import {
   button_default
-} from "./chunk-ZI37UH3A.mjs";
+} from "./chunk-DN6AW7DN.mjs";
 import {
   Icon_default
 } from "./chunk-DZ6QJCDZ.mjs";

package/dist/components/breadcrumb/breadcrumb.mjs

@@ -4,11 +4,11 @@ import {
 } from "../../chunk-3ONHMYAP.mjs";
 import "../../chunk-MY5U63QO.mjs";
 import "../../chunk-LPZOH3RP.mjs";
-import "../../chunk-ZI37UH3A.mjs";
-import "../../chunk-D47SHPFE.mjs";
+import "../../chunk-DN6AW7DN.mjs";
+import "../../chunk-DFBPLQMN.mjs";
 import "../../chunk-6WSACUIB.mjs";
-import "../../chunk-LXHUO6VM.mjs";
 import "../../chunk-6PNKRBUT.mjs";
+import "../../chunk-LXHUO6VM.mjs";
 import "../../chunk-ZYIIXWVY.mjs";
 import "../../chunk-DZ6QJCDZ.mjs";
 import "../../chunk-WFMFC7R6.mjs";

package/dist/components/breadcrumb/index.mjs

@@ -5,11 +5,11 @@ import {
 } from "../../chunk-3ONHMYAP.mjs";
 import "../../chunk-MY5U63QO.mjs";
 import "../../chunk-LPZOH3RP.mjs";
-import "../../chunk-ZI37UH3A.mjs";
-import "../../chunk-D47SHPFE.mjs";
+import "../../chunk-DN6AW7DN.mjs";
+import "../../chunk-DFBPLQMN.mjs";
 import "../../chunk-6WSACUIB.mjs";
-import "../../chunk-LXHUO6VM.mjs";
 import "../../chunk-6PNKRBUT.mjs";
+import "../../chunk-LXHUO6VM.mjs";
 import "../../chunk-ZYIIXWVY.mjs";
 import "../../chunk-DZ6QJCDZ.mjs";
 import "../../chunk-WFMFC7R6.mjs";

package/dist/components/button/button.d.mts

@@ -17,9 +17,7 @@ declare const buttonStyle: tailwind_variants.TVReturnType<{
     variant: {
         solid: string;
         soft: string;
-        outline: {
-            base: string;
-        };
+        outline: string;
         ghost: string;
     };
     color: {
@@ -81,9 +79,7 @@ declare const buttonStyle: tailwind_variants.TVReturnType<{
     variant: {
         solid: string;
         soft: string;
-        outline: {
-            base: string;
-        };
+        outline: string;
         ghost: string;
     };
     color: {
@@ -145,9 +141,7 @@ declare const buttonStyle: tailwind_variants.TVReturnType<{
     variant: {
         solid: string;
         soft: string;
-        outline: {
-            base: string;
-        };
+        outline: string;
         ghost: string;
     };
     color: {

package/dist/components/button/button.d.ts

@@ -17,9 +17,7 @@ declare const buttonStyle: tailwind_variants.TVReturnType<{
     variant: {
         solid: string;
         soft: string;
-        outline: {
-            base: string;
-        };
+        outline: string;
         ghost: string;
     };
     color: {
@@ -81,9 +79,7 @@ declare const buttonStyle: tailwind_variants.TVReturnType<{
     variant: {
         solid: string;
         soft: string;
-        outline: {
-            base: string;
-        };
+        outline: string;
         ghost: string;
     };
     color: {
@@ -145,9 +141,7 @@ declare const buttonStyle: tailwind_variants.TVReturnType<{
     variant: {
         solid: string;
         soft: string;
-        outline: {
-            base: string;
-        };
+        outline: string;
         ghost: string;
     };
     color: {

package/dist/components/button/button.js

@@ -4514,9 +4514,7 @@ var buttonStyle = tv({
     variant: {
       solid: "",
       soft: "",
-      outline: {
-        base: "bg-transparent border-transparent"
-      },
+      outline: "",
       ghost: ""
     },
     color: {
@@ -4687,49 +4685,49 @@ var buttonStyle = tv({
       variant: "outline",
       color: "primary",
       class: {
-        base: ["bg-transparent", "border-primary-main", "text-primary-main", "hover:bg-primary-soft"]
+        base: ["bg-body-background", "border-primary-main", "text-primary-main", "hover:bg-primary-soft"]
       }
     },
     {
       variant: "outline",
       color: "secondary",
       class: {
-        base: ["bg-transparent", "border-secondary-main", "text-secondary-main", "hover:bg-secondary-soft"]
+        base: ["bg-body-background", "border-secondary-main", "text-secondary-main", "hover:bg-secondary-soft"]
       }
     },
     {
       variant: "outline",
       color: "neutral",
       class: {
-        base: ["bg-transparent", "border-neutral-main", "text-neutral-main", "hover:bg-neutral-soft"]
+        base: ["bg-body-background", "border-neutral-main", "text-neutral-main", "hover:bg-neutral-soft"]
       }
     },
     {
       variant: "outline",
       color: "info",
       class: {
-        base: ["bg-transparent", "border-info-main", "text-info-main", "hover:bg-info-soft"]
+        base: ["bg-body-background", "border-info-main", "text-info-main", "hover:bg-info-soft"]
       }
     },
     {
       variant: "outline",
       color: "success",
       class: {
-        base: ["bg-transparent", "border-success-main", "text-success-main", "hover:bg-success-soft"]
+        base: ["bg-body-background", "border-success-main", "text-success-main", "hover:bg-success-soft"]
       }
     },
     {
       variant: "outline",
       color: "warning",
       class: {
-        base: ["bg-transparent", "border-warning-main", "text-warning-main", "hover:bg-warning-soft"]
+        base: ["bg-body-background", "border-warning-main", "text-warning-main", "hover:bg-warning-soft"]
       }
     },
     {
       variant: "outline",
       color: "danger",
       class: {
-        base: ["bg-transparent", "border-danger-main", "text-danger-main", "hover:bg-danger-soft"]
+        base: ["bg-body-background", "border-danger-main", "text-danger-main", "hover:bg-danger-soft"]
       }
     },
     // ghost & color

package/dist/components/button/button.mjs

@@ -1,10 +1,10 @@
 "use client";
 import {
   button_default
-} from "../../chunk-ZI37UH3A.mjs";
+} from "../../chunk-DN6AW7DN.mjs";
 import "../../chunk-6WSACUIB.mjs";
-import "../../chunk-LXHUO6VM.mjs";
 import "../../chunk-6PNKRBUT.mjs";
+import "../../chunk-LXHUO6VM.mjs";
 import "../../chunk-ZYIIXWVY.mjs";
 import "../../chunk-DZ6QJCDZ.mjs";
 import "../../chunk-3I7QA57V.mjs";

package/dist/components/button/icon-button.mjs

@@ -1,10 +1,10 @@
 "use client";
 import {
   icon_button_default
-} from "../../chunk-D47SHPFE.mjs";
+} from "../../chunk-DFBPLQMN.mjs";
 import "../../chunk-6WSACUIB.mjs";
-import "../../chunk-LXHUO6VM.mjs";
 import "../../chunk-6PNKRBUT.mjs";
+import "../../chunk-LXHUO6VM.mjs";
 import "../../chunk-ZYIIXWVY.mjs";
 import "../../chunk-DZ6QJCDZ.mjs";
 import "../../chunk-3I7QA57V.mjs";

package/dist/components/button/index.js

@@ -4519,9 +4519,7 @@ var buttonStyle = tv({
     variant: {
       solid: "",
       soft: "",
-      outline: {
-        base: "bg-transparent border-transparent"
-      },
+      outline: "",
       ghost: ""
     },
     color: {
@@ -4692,49 +4690,49 @@ var buttonStyle = tv({
       variant: "outline",
       color: "primary",
       class: {
-        base: ["bg-transparent", "border-primary-main", "text-primary-main", "hover:bg-primary-soft"]
+        base: ["bg-body-background", "border-primary-main", "text-primary-main", "hover:bg-primary-soft"]
       }
     },
     {
       variant: "outline",
       color: "secondary",
       class: {
-        base: ["bg-transparent", "border-secondary-main", "text-secondary-main", "hover:bg-secondary-soft"]
+        base: ["bg-body-background", "border-secondary-main", "text-secondary-main", "hover:bg-secondary-soft"]
       }
     },
     {
       variant: "outline",
       color: "neutral",
       class: {
-        base: ["bg-transparent", "border-neutral-main", "text-neutral-main", "hover:bg-neutral-soft"]
+        base: ["bg-body-background", "border-neutral-main", "text-neutral-main", "hover:bg-neutral-soft"]
       }
     },
     {
       variant: "outline",
       color: "info",
       class: {
-        base: ["bg-transparent", "border-info-main", "text-info-main", "hover:bg-info-soft"]
+        base: ["bg-body-background", "border-info-main", "text-info-main", "hover:bg-info-soft"]
       }
     },
     {
       variant: "outline",
       color: "success",
       class: {
-        base: ["bg-transparent", "border-success-main", "text-success-main", "hover:bg-success-soft"]
+        base: ["bg-body-background", "border-success-main", "text-success-main", "hover:bg-success-soft"]
       }
     },
     {
       variant: "outline",
       color: "warning",
       class: {
-        base: ["bg-transparent", "border-warning-main", "text-warning-main", "hover:bg-warning-soft"]
+        base: ["bg-body-background", "border-warning-main", "text-warning-main", "hover:bg-warning-soft"]
       }
     },
     {
       variant: "outline",
       color: "danger",
       class: {
-        base: ["bg-transparent", "border-danger-main", "text-danger-main", "hover:bg-danger-soft"]
+        base: ["bg-body-background", "border-danger-main", "text-danger-main", "hover:bg-danger-soft"]
       }
     },
     // ghost & color

package/dist/components/button/index.mjs

@@ -5,13 +5,13 @@ import {
 } from "../../chunk-LPZOH3RP.mjs";
 import {
   button_default
-} from "../../chunk-ZI37UH3A.mjs";
+} from "../../chunk-DN6AW7DN.mjs";
 import {
   icon_button_default
-} from "../../chunk-D47SHPFE.mjs";
+} from "../../chunk-DFBPLQMN.mjs";
 import "../../chunk-6WSACUIB.mjs";
-import "../../chunk-LXHUO6VM.mjs";
 import "../../chunk-6PNKRBUT.mjs";
+import "../../chunk-LXHUO6VM.mjs";
 import "../../chunk-ZYIIXWVY.mjs";
 import "../../chunk-DZ6QJCDZ.mjs";
 import {

package/dist/components/drawer/drawer.d.mts

@@ -0,0 +1,89 @@
+import * as tailwind_variants from 'tailwind-variants';
+import { VariantProps } from 'tailwind-variants';
+import * as react from 'react';
+import { ReactNode } from 'react';
+import { SlotsToClasses } from '../../utils/types.mjs';
+
+interface DrawerProps extends VariantProps<typeof drawer> {
+    isOpen?: boolean;
+    position?: "left" | "right" | "top" | "bottom";
+    content?: ReactNode | string;
+    isKeyboardDismissDisabled?: boolean;
+    onClose?: () => void;
+    classNames?: SlotsToClasses<DrawerSlots>;
+    backdrop?: boolean;
+}
+declare const Drawer: react.ForwardRefExoticComponent<DrawerProps & react.RefAttributes<HTMLDivElement>>;
+declare const drawer: tailwind_variants.TVReturnType<{
+    position: {
+        left: {
+            base: string;
+            drawerWrapper: string;
+        };
+        right: {
+            base: string;
+            drawerWrapper: string;
+        };
+        top: {
+            base: string;
+            drawerWrapper: string;
+        };
+        bottom: {
+            base: string;
+            drawerWrapper: string;
+        };
+    };
+}, {
+    base: string[];
+    drawerWrapper: string[];
+    wrapper: string[];
+}, undefined, {
+    position: {
+        left: {
+            base: string;
+            drawerWrapper: string;
+        };
+        right: {
+            base: string;
+            drawerWrapper: string;
+        };
+        top: {
+            base: string;
+            drawerWrapper: string;
+        };
+        bottom: {
+            base: string;
+            drawerWrapper: string;
+        };
+    };
+}, {
+    base: string[];
+    drawerWrapper: string[];
+    wrapper: string[];
+}, tailwind_variants.TVReturnType<{
+    position: {
+        left: {
+            base: string;
+            drawerWrapper: string;
+        };
+        right: {
+            base: string;
+            drawerWrapper: string;
+        };
+        top: {
+            base: string;
+            drawerWrapper: string;
+        };
+        bottom: {
+            base: string;
+            drawerWrapper: string;
+        };
+    };
+}, {
+    base: string[];
+    drawerWrapper: string[];
+    wrapper: string[];
+}, undefined, unknown, unknown, undefined>>;
+type DrawerSlots = keyof ReturnType<typeof drawer>;
+
+export { type DrawerProps, Drawer as default };