@definable/ui 0.1.26 → 0.1.27

package/dist/components/sheet.d.ts

@@ -8,6 +8,7 @@ interface SheetProps {
     enableFullscreen?: boolean;
     position?: 'left' | 'right' | 'bottom';
     headerClassName?: string;
+    disableOutsideClose?: boolean;
 }
-export declare function Sheet({ isOpen, onClose, children, header, footer, className, enableFullscreen, position, headerClassName }: SheetProps): import('react').ReactPortal | null;
+export declare function Sheet({ isOpen, onClose, children, header, footer, className, enableFullscreen, position, headerClassName, disableOutsideClose }: SheetProps): import('react').ReactPortal | null;
 export {};

package/dist/components/sheet.js

@@ -1,79 +1,81 @@
-import { jsxs as l, jsx as t, Fragment as F } from "react/jsx-runtime";
-import { Minimize2 as R, Maximize2 as B, X as I } from "lucide-react";
-import { Button as x } from "./button.js";
-import { useState as M, useRef as X, useEffect as m } from "react";
+import { jsxs as l, jsx as t, Fragment as R } from "react/jsx-runtime";
+import { Minimize2 as B, Maximize2 as I, X as M } from "lucide-react";
+import { Button as b } from "./button.js";
+import { useState as X, useRef as q, useEffect as m } from "react";
 import { cn as u } from "../lib/utils.js";
-import { AnimatePresence as q, motion as b } from "framer-motion";
-import { createPortal as D } from "react-dom";
+import { AnimatePresence as D, motion as y } from "framer-motion";
+import { createPortal as G } from "react-dom";
 let a = [];
-function V({
+function W({
   isOpen: i,
-  onClose: n,
-  children: y,
-  header: g,
+  onClose: s,
+  children: g,
+  header: v,
   footer: f,
-  className: v,
-  enableFullscreen: N = !0,
+  className: N,
+  enableFullscreen: k = !0,
   position: c = "right",
-  headerClassName: k = ""
+  headerClassName: w = "",
+  disableOutsideClose: h = !1
 }) {
-  const [o, w] = M(!1), r = X(null);
+  const [n, P] = X(!1), r = q(null);
   if (m(() => (i ? a.push(r) : a = a.filter((e) => e !== r), () => {
     a = a.filter((e) => e !== r);
   }), [i]), m(() => {
-    const e = (s) => {
-      var h;
-      const j = a.some(
-        (p) => p.current && p.current.contains(s.target)
-      ), A = (h = s.target) == null ? void 0 : h.closest("[data-sheet-close]");
-      !j && !A && r.current && !r.current.contains(s.target) && n();
+    const e = (o) => {
+      var p;
+      if (h) return;
+      const A = a.some(
+        (x) => x.current && x.current.contains(o.target)
+      ), F = (p = o.target) == null ? void 0 : p.closest("[data-sheet-close]");
+      !A && !F && r.current && !r.current.contains(o.target) && s();
     };
-    return i && !o && document.addEventListener("mousedown", e), () => {
+    return i && !n && document.addEventListener("mousedown", e), () => {
       document.removeEventListener("mousedown", e);
     };
-  }, [i, o, n]), m(() => {
-    const e = (s) => {
-      s.key === "Escape" && i && a[a.length - 1] === r && n();
+  }, [i, n, h]), m(() => {
+    const e = (o) => {
+      o.key === "Escape" && i && a[a.length - 1] === r && s();
     };
     return document.addEventListener("keydown", e), () => document.removeEventListener("keydown", e);
-  }, [i, n]), !i) return null;
-  const P = (e) => {
-    e.stopPropagation(), n();
-  }, E = /* @__PURE__ */ l("div", { className: "flex flex-col h-full", children: [
+  }, [i]), !i) return null;
+  const E = (e) => {
+    e.stopPropagation(), s();
+  }, z = /* @__PURE__ */ l("div", { className: "flex flex-col h-full", children: [
     /* @__PURE__ */ l("div", { className: u(
       "flex items-center bg-card justify-between py-4 px-4 h-header border-b border-border/50",
-      k
+      w
     ), children: [
-      /* @__PURE__ */ t("div", { className: "text-sm font-medium", children: g }),
+      /* @__PURE__ */ t("div", { className: "text-sm font-medium", children: v }),
       /* @__PURE__ */ l("div", { className: "flex items-center gap-1 ml-auto", children: [
-        N && /* @__PURE__ */ t(
-          x,
+        k && /* @__PURE__ */ t(
+          b,
           {
             variant: "ghost",
             size: "icon",
             className: "h-7 w-7",
             onClick: (e) => {
-              e.stopPropagation(), w(!o);
+              e.stopPropagation(), P(!n);
             },
-            children: o ? /* @__PURE__ */ t(R, { className: "h-3.5 w-3.5" }) : /* @__PURE__ */ t(B, { className: "h-3.5 w-3.5" })
+            children: n ? /* @__PURE__ */ t(B, { className: "h-3.5 w-3.5" }) : /* @__PURE__ */ t(I, { className: "h-3.5 w-3.5" })
           }
         ),
         /* @__PURE__ */ t(
-          x,
+          b,
           {
             variant: "ghost",
             size: "icon",
             className: "h-7 w-7",
-            onClick: P,
+            onClick: E,
             "data-sheet-close": "true",
-            children: /* @__PURE__ */ t(I, { className: "h-3.5 w-3.5" })
+            children: /* @__PURE__ */ t(M, { className: "h-3.5 w-3.5" })
           }
         )
       ] })
     ] }),
-    /* @__PURE__ */ t("div", { className: "flex-1 overflow-auto", children: y }),
+    /* @__PURE__ */ t("div", { className: "flex-1 overflow-auto", children: g }),
     f && /* @__PURE__ */ t("div", { className: "border-t border-border/50 bg-card py-2 px-3", children: /* @__PURE__ */ t("div", { className: "text-sm", children: f }) })
-  ] }), z = () => c === "left" ? {
+  ] }), C = () => c === "left" ? {
     initial: { x: -100, opacity: 0 },
     animate: { x: 0, opacity: 1 },
     exit: { x: -100, opacity: 0 }
@@ -85,24 +87,24 @@ function V({
     initial: { x: 100, opacity: 0 },
     animate: { x: 0, opacity: 1 },
     exit: { x: 100, opacity: 0 }
-  }, C = () => o ? "inset-4 rounded-lg" : c === "left" ? "inset-y-0 left-0 border-r" : c === "bottom" ? "inset-x-0 bottom-0 border-t" : "inset-y-0 right-0 border-l", d = z(), L = C(), S = /* @__PURE__ */ t(q, { children: i && /* @__PURE__ */ l(F, { children: [
+  }, L = () => n ? "inset-4 rounded-lg" : c === "left" ? "inset-y-0 left-0 border-r" : c === "bottom" ? "inset-x-0 bottom-0 border-t" : "inset-y-0 right-0 border-l", d = C(), S = L(), j = /* @__PURE__ */ t(D, { children: i && /* @__PURE__ */ l(R, { children: [
     /* @__PURE__ */ t(
-      b.div,
+      y.div,
       {
         initial: { opacity: 0 },
         animate: { opacity: 1 },
         exit: { opacity: 0 },
         onClick: (e) => {
-          e.stopPropagation(), n();
+          e.stopPropagation(), s();
         },
         className: u(
           "fixed inset-0 z-[100] bg-background/80 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
-          o ? "block" : "hidden"
+          n ? "block" : "hidden"
         )
       }
     ),
     /* @__PURE__ */ t(
-      b.div,
+      y.div,
       {
         ref: r,
         initial: d.initial,
@@ -114,15 +116,15 @@ function V({
         },
         className: u(
           "fixed z-[100] bg-background shadow-lg flex flex-col border-border/50",
-          L,
-          v
+          S,
+          N
         ),
-        children: E
+        children: z
       }
     )
   ] }) });
-  return D(S, document.body);
+  return G(j, document.body);
 }
 export {
-  V as Sheet
+  W as Sheet
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@definable/ui",
   "type": "module",
-  "version": "0.1.26",
+  "version": "0.1.27",
   "private": false,
   "description": "Definable UI Component Library",
   "main": "dist/index.js",