@bizapps/ui 1.1.1 → 1.2.2

package/dist/main.cjs

@@ -1433,7 +1433,7 @@ var progressVariants = classVarianceAuthority.cva("relative flex w-full items-ce
     size: "md"
   }
 });
-var progressIndicatorVariants = classVarianceAuthority.cva("size-full flex-1 transition-all", {
+var progressIndicatorVariants = classVarianceAuthority.cva("size-full flex-1 transition-all rounded-[5px]", {
   variants: {
     variant: {
       default: "bg-[var(--color-main-blue-primary)]",
@@ -8364,6 +8364,228 @@ function DataTableSearch({
     )
   ] });
 }
+var DrawerContext = react.createContext(false);
+function Drawer({ children, open, onOpenChange, ...props }) {
+  const [internalOpen, setInternalOpen] = react.useState(props.defaultOpen ?? false);
+  const isOpen = open !== void 0 ? open : internalOpen;
+  return /* @__PURE__ */ jsxRuntime.jsx(DrawerContext.Provider, { value: isOpen, children: /* @__PURE__ */ jsxRuntime.jsx(
+    radixUi.Dialog.Root,
+    {
+      "data-slot": "drawer",
+      ...props,
+      open: isOpen,
+      onOpenChange: (v) => {
+        setInternalOpen(v);
+        onOpenChange?.(v);
+      },
+      children
+    }
+  ) });
+}
+function DrawerTrigger({ ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(radixUi.Dialog.Trigger, { "data-slot": "drawer-trigger", ...props });
+}
+function DrawerClose({ ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(radixUi.Dialog.Close, { "data-slot": "drawer-close", ...props });
+}
+function DrawerPortal({ children, ...props }) {
+  const isOpen = react.useContext(DrawerContext);
+  return /* @__PURE__ */ jsxRuntime.jsx(radixUi.Dialog.Portal, { forceMount: true, ...props, children: /* @__PURE__ */ jsxRuntime.jsx(react$1.AnimatePresence, { mode: "sync", children: isOpen && children }) });
+}
+function DrawerOverlay({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(radixUi.Dialog.Overlay, { "data-slot": "drawer-overlay", asChild: true, forceMount: true, ...props, children: /* @__PURE__ */ jsxRuntime.jsx(
+    react$1.motion.div,
+    {
+      className: cn(
+        "fixed inset-0 isolate z-50 bg-black/30 supports-backdrop-filter:backdrop-blur-sm",
+        className
+      ),
+      initial: { opacity: 0 },
+      animate: { opacity: 1 },
+      exit: { opacity: 0 },
+      transition: { duration: duration.normal, ease: ease.smooth }
+    }
+  ) });
+}
+var sizeClasses = {
+  sm: "w-64",
+  md: "w-80",
+  lg: "w-96",
+  xl: "w-[30rem]",
+  full: "w-screen"
+};
+function DrawerContent({
+  className,
+  children,
+  side = "right",
+  size = "md",
+  showCloseButton = true,
+  resizable = false,
+  ...props
+}) {
+  const isHorizontal = side === "left" || side === "right";
+  const xInitial = side === "right" ? "100%" : side === "left" ? "-100%" : 0;
+  const yInitial = side === "bottom" ? "100%" : side === "top" ? "-100%" : 0;
+  const dragRef = react.useRef(null);
+  return /* @__PURE__ */ jsxRuntime.jsxs(DrawerPortal, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(DrawerOverlay, {}),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      radixUi.Dialog.Content,
+      {
+        "data-slot": "drawer-content",
+        "data-side": side,
+        asChild: true,
+        forceMount: true,
+        className: cn(
+          "fixed z-50 flex flex-col bg-popover text-popover-foreground shadow-xl outline-none",
+          side === "left" && "inset-y-0 left-0",
+          side === "right" && "inset-y-0 right-0",
+          side === "top" && "inset-x-0 top-0",
+          side === "bottom" && "inset-x-0 bottom-0",
+          isHorizontal && sizeClasses[size],
+          !isHorizontal && "h-auto min-h-40",
+          className
+        ),
+        ...props,
+        children: /* @__PURE__ */ jsxRuntime.jsxs(
+          react$1.motion.div,
+          {
+            className: cn("flex flex-col", isHorizontal && "h-full"),
+            initial: { x: xInitial, y: yInitial, opacity: 0 },
+            animate: { x: 0, y: 0, opacity: 1 },
+            exit: { x: xInitial, y: yInitial, opacity: 0 },
+            transition: transition.sidebar,
+            children: [
+              children,
+              showCloseButton && /* @__PURE__ */ jsxRuntime.jsx(radixUi.Dialog.Close, { "data-slot": "drawer-close", asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
+                Button,
+                {
+                  variant: "ghost",
+                  className: "absolute top-4 right-4",
+                  size: "icon-sm",
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(lucideReact.XIcon, {}),
+                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Close" })
+                  ]
+                }
+              ) }),
+              resizable && /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  "data-slot": "drawer-resize-handle",
+                  className: cn(
+                    "absolute opacity-0 transition-opacity hover:opacity-100 hover:bg-border",
+                    side === "right" && "inset-y-0 left-0 w-1 cursor-col-resize",
+                    side === "left" && "inset-y-0 right-0 w-1 cursor-col-resize",
+                    side === "top" && "inset-x-0 bottom-0 h-1 cursor-row-resize",
+                    side === "bottom" && "inset-x-0 top-0 h-1 cursor-row-resize"
+                  ),
+                  onPointerDown: (e) => {
+                    e.preventDefault();
+                    const content = e.currentTarget.parentElement;
+                    if (!content) return;
+                    const startSize = isHorizontal ? parseFloat(getComputedStyle(content).width) : parseFloat(getComputedStyle(content).height);
+                    content.style.transition = "none";
+                    dragRef.current = {
+                      startPos: isHorizontal ? e.clientX : e.clientY,
+                      startSize,
+                      content
+                    };
+                    e.currentTarget.setPointerCapture(e.pointerId);
+                  },
+                  onPointerMove: (e) => {
+                    if (!dragRef.current) return;
+                    const { startPos, startSize, content } = dragRef.current;
+                    const delta = (isHorizontal ? e.clientX : e.clientY) - startPos;
+                    let newSize;
+                    if (side === "right") {
+                      newSize = Math.max(160, Math.min(window.innerWidth * 0.9, startSize - delta));
+                    } else if (side === "left") {
+                      newSize = Math.max(160, Math.min(window.innerWidth * 0.9, startSize + delta));
+                    } else if (side === "bottom") {
+                      newSize = Math.max(80, Math.min(window.innerHeight * 0.9, startSize - delta));
+                    } else {
+                      newSize = Math.max(80, Math.min(window.innerHeight * 0.9, startSize + delta));
+                    }
+                    content.style[isHorizontal ? "width" : "height"] = `${newSize}px`;
+                  },
+                  onPointerUp: () => {
+                    if (dragRef.current?.content) {
+                      dragRef.current.content.style.transition = "";
+                    }
+                    dragRef.current = null;
+                  },
+                  onPointerCancel: () => {
+                    if (dragRef.current?.content) {
+                      dragRef.current.content.style.transition = "";
+                    }
+                    dragRef.current = null;
+                  }
+                }
+              )
+            ]
+          }
+        )
+      }
+    )
+  ] });
+}
+function DrawerHeader({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      "data-slot": "drawer-header",
+      className: cn("flex shrink-0 flex-col gap-1.5 p-6", className),
+      ...props
+    }
+  );
+}
+function DrawerBody({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      "data-slot": "drawer-body",
+      className: cn("flex-1 overflow-y-auto px-6 pb-6", className),
+      ...props
+    }
+  );
+}
+function DrawerFooter({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      "data-slot": "drawer-footer",
+      className: cn(
+        "border-border mt-auto flex shrink-0 flex-wrap items-center justify-end gap-2 border-t px-6 py-4",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function DrawerTitle({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    radixUi.Dialog.Title,
+    {
+      "data-slot": "drawer-title",
+      className: cn("font-heading text-base leading-none font-semibold", className),
+      ...props
+    }
+  );
+}
+function DrawerDescription({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    radixUi.Dialog.Description,
+    {
+      "data-slot": "drawer-description",
+      className: cn("text-sm text-muted-foreground", className),
+      ...props
+    }
+  );
+}
 function TCCEProvider({
   children,
   permissions,
@@ -8466,6 +8688,17 @@ exports.DialogOverlay = DialogOverlay;
 exports.DialogPortal = DialogPortal;
 exports.DialogTitle = DialogTitle;
 exports.DialogTrigger = DialogTrigger;
+exports.Drawer = Drawer;
+exports.DrawerBody = DrawerBody;
+exports.DrawerClose = DrawerClose;
+exports.DrawerContent = DrawerContent;
+exports.DrawerDescription = DrawerDescription;
+exports.DrawerFooter = DrawerFooter;
+exports.DrawerHeader = DrawerHeader;
+exports.DrawerOverlay = DrawerOverlay;
+exports.DrawerPortal = DrawerPortal;
+exports.DrawerTitle = DrawerTitle;
+exports.DrawerTrigger = DrawerTrigger;
 exports.DropdownMenu = DropdownMenu;
 exports.DropdownMenuCheckboxItem = DropdownMenuCheckboxItem;
 exports.DropdownMenuContent = DropdownMenuContent;