@manhphi1309/drawer 0.1.3 → 0.2.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/dist/index.cjs +59 -5
  2. package/dist/index.d.cts +7 -1
  3. package/dist/index.d.mts +7 -1
  4. package/dist/index.mjs +37 -5
  5. package/package.json +2 -1
package/dist/index.cjs CHANGED
@@ -1,14 +1,48 @@
1
1
  "use client";
2
2
  Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
3
+ //#region \0rolldown/runtime.js
4
+ var __create = Object.create;
5
+ var __defProp = Object.defineProperty;
6
+ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
7
+ var __getOwnPropNames = Object.getOwnPropertyNames;
8
+ var __getProtoOf = Object.getPrototypeOf;
9
+ var __hasOwnProp = Object.prototype.hasOwnProperty;
10
+ var __copyProps = (to, from, except, desc) => {
11
+ if (from && typeof from === "object" || typeof from === "function") for (var keys = __getOwnPropNames(from), i = 0, n = keys.length, key; i < n; i++) {
12
+ key = keys[i];
13
+ if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
14
+ get: ((k) => from[k]).bind(null, key),
15
+ enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
16
+ });
17
+ }
18
+ return to;
19
+ };
20
+ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
21
+ value: mod,
22
+ enumerable: true
23
+ }) : target, mod));
3
24
  //#endregion
4
- require("react");
25
+ let react = require("react");
26
+ react = __toESM(react);
5
27
  let vaul = require("vaul");
28
+ let _manhphi1309_hooks = require("@manhphi1309/hooks");
6
29
  let _manhphi1309_utils = require("@manhphi1309/utils");
7
30
  let react_jsx_runtime = require("react/jsx-runtime");
8
31
  //#region index.tsx
9
32
  function Drawer({ ...props }) {
33
+ const [internalOpen, setInternalOpen] = react.useState(props.defaultOpen ?? false);
34
+ const isControlled = props.open !== void 0;
35
+ const open = isControlled ? props.open : internalOpen;
36
+ const { onOpenChange } = props;
37
+ const handleOpenChange = react.useCallback((newOpen) => {
38
+ if (!isControlled) setInternalOpen(newOpen);
39
+ onOpenChange?.(newOpen);
40
+ }, [isControlled, onOpenChange]);
41
+ (0, _manhphi1309_hooks.useThemeColorAnimation)(open ?? false);
10
42
  return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(vaul.Drawer.Root, {
11
43
  "data-slot": "drawer",
44
+ open,
45
+ onOpenChange: handleOpenChange,
12
46
  ...props
13
47
  });
14
48
  }
@@ -33,7 +67,7 @@ function DrawerClose({ ...props }) {
33
67
  function DrawerOverlay({ className, ...props }) {
34
68
  return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(vaul.Drawer.Overlay, {
35
69
  "data-slot": "drawer-overlay",
36
- className: (0, _manhphi1309_utils.cn)("fixed inset-0 z-50 bg-black/10 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0", className),
70
+ className: (0, _manhphi1309_utils.cn)("fixed inset-0 z-50 bg-black/40 data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0", className),
37
71
  ...props
38
72
  });
39
73
  }
@@ -42,17 +76,37 @@ function DrawerContent({ className, children, ...props }) {
42
76
  "data-slot": "drawer-portal",
43
77
  children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(DrawerOverlay, {}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(vaul.Drawer.Content, {
44
78
  "data-slot": "drawer-content",
45
- className: (0, _manhphi1309_utils.cn)("group/drawer-content fixed z-50 flex h-auto flex-col bg-popover text-sm text-popover-foreground data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=bottom]:rounded-t-xl data-[vaul-drawer-direction=bottom]:border-t data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:rounded-r-xl data-[vaul-drawer-direction=left]:border-r data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:rounded-l-xl data-[vaul-drawer-direction=right]:border-l data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=top]:rounded-b-xl data-[vaul-drawer-direction=top]:border-b data-[vaul-drawer-direction=left]:sm:max-w-sm data-[vaul-drawer-direction=right]:sm:max-w-sm", className),
79
+ className: (0, _manhphi1309_utils.cn)("group/drawer-content fixed z-50 flex h-auto flex-col bg-popover text-sm text-popover-foreground data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[96dvh] data-[vaul-drawer-direction=bottom]:rounded-t-xl data-[vaul-drawer-direction=bottom]:border-t data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:rounded-r-xl data-[vaul-drawer-direction=left]:border-r data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:rounded-l-xl data-[vaul-drawer-direction=right]:border-l data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[96dvh] data-[vaul-drawer-direction=top]:rounded-b-xl data-[vaul-drawer-direction=top]:border-b data-[vaul-drawer-direction=left]:sm:max-w-sm data-[vaul-drawer-direction=right]:sm:max-w-sm", className),
46
80
  ...props,
47
81
  children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: "mx-auto mt-4 hidden h-1 w-[100px] shrink-0 rounded-full bg-muted group-data-[vaul-drawer-direction=bottom]/drawer-content:block" }), children]
48
82
  })]
49
83
  });
50
84
  }
51
- function DrawerHeader({ className, ...props }) {
85
+ function DrawerHeader({ className, leftNode, rightNode, children, ...props }) {
86
+ if (leftNode || rightNode) return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
87
+ "data-slot": "drawer-header",
88
+ className: (0, _manhphi1309_utils.cn)("grid grid-cols-[1fr_auto_1fr] items-center gap-2 px-4 py-2", className),
89
+ ...props,
90
+ children: [
91
+ /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
92
+ className: "flex justify-start",
93
+ children: leftNode
94
+ }),
95
+ /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
96
+ className: "flex flex-col gap-0.5 text-center",
97
+ children
98
+ }),
99
+ /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
100
+ className: "flex justify-end",
101
+ children: rightNode
102
+ })
103
+ ]
104
+ });
52
105
  return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
53
106
  "data-slot": "drawer-header",
54
107
  className: (0, _manhphi1309_utils.cn)("flex flex-col gap-0.5 p-4 group-data-[vaul-drawer-direction=bottom]/drawer-content:text-center group-data-[vaul-drawer-direction=top]/drawer-content:text-center md:gap-0.5 md:text-left", className),
55
- ...props
108
+ ...props,
109
+ children
56
110
  });
57
111
  }
58
112
  function DrawerFooter({ className, ...props }) {
package/dist/index.d.cts CHANGED
@@ -25,8 +25,14 @@ declare function DrawerContent({
25
25
  }: React.ComponentProps<typeof Drawer$1.Content>): React.JSX.Element;
26
26
  declare function DrawerHeader({
27
27
  className,
28
+ leftNode,
29
+ rightNode,
30
+ children,
28
31
  ...props
29
- }: React.ComponentProps<"div">): React.JSX.Element;
32
+ }: React.ComponentProps<"div"> & {
33
+ leftNode?: React.ReactNode;
34
+ rightNode?: React.ReactNode;
35
+ }): React.JSX.Element;
30
36
  declare function DrawerFooter({
31
37
  className,
32
38
  ...props
package/dist/index.d.mts CHANGED
@@ -25,8 +25,14 @@ declare function DrawerContent({
25
25
  }: React.ComponentProps<typeof Drawer$1.Content>): React.JSX.Element;
26
26
  declare function DrawerHeader({
27
27
  className,
28
+ leftNode,
29
+ rightNode,
30
+ children,
28
31
  ...props
29
- }: React.ComponentProps<"div">): React.JSX.Element;
32
+ }: React.ComponentProps<"div"> & {
33
+ leftNode?: React.ReactNode;
34
+ rightNode?: React.ReactNode;
35
+ }): React.JSX.Element;
30
36
  declare function DrawerFooter({
31
37
  className,
32
38
  ...props
package/dist/index.mjs CHANGED
@@ -1,12 +1,24 @@
1
1
  "use client";
2
- import "react";
2
+ import * as React from "react";
3
3
  import { Drawer as Drawer$1 } from "vaul";
4
+ import { useThemeColorAnimation } from "@manhphi1309/hooks";
4
5
  import { cn } from "@manhphi1309/utils";
5
6
  import { jsx, jsxs } from "react/jsx-runtime";
6
7
  //#region index.tsx
7
8
  function Drawer({ ...props }) {
9
+ const [internalOpen, setInternalOpen] = React.useState(props.defaultOpen ?? false);
10
+ const isControlled = props.open !== void 0;
11
+ const open = isControlled ? props.open : internalOpen;
12
+ const { onOpenChange } = props;
13
+ const handleOpenChange = React.useCallback((newOpen) => {
14
+ if (!isControlled) setInternalOpen(newOpen);
15
+ onOpenChange?.(newOpen);
16
+ }, [isControlled, onOpenChange]);
17
+ useThemeColorAnimation(open ?? false);
8
18
  return /* @__PURE__ */ jsx(Drawer$1.Root, {
9
19
  "data-slot": "drawer",
20
+ open,
21
+ onOpenChange: handleOpenChange,
10
22
  ...props
11
23
  });
12
24
  }
@@ -31,7 +43,7 @@ function DrawerClose({ ...props }) {
31
43
  function DrawerOverlay({ className, ...props }) {
32
44
  return /* @__PURE__ */ jsx(Drawer$1.Overlay, {
33
45
  "data-slot": "drawer-overlay",
34
- className: cn("fixed inset-0 z-50 bg-black/10 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0", className),
46
+ className: cn("fixed inset-0 z-50 bg-black/40 data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0", className),
35
47
  ...props
36
48
  });
37
49
  }
@@ -40,17 +52,37 @@ function DrawerContent({ className, children, ...props }) {
40
52
  "data-slot": "drawer-portal",
41
53
  children: [/* @__PURE__ */ jsx(DrawerOverlay, {}), /* @__PURE__ */ jsxs(Drawer$1.Content, {
42
54
  "data-slot": "drawer-content",
43
- className: cn("group/drawer-content fixed z-50 flex h-auto flex-col bg-popover text-sm text-popover-foreground data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=bottom]:rounded-t-xl data-[vaul-drawer-direction=bottom]:border-t data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:rounded-r-xl data-[vaul-drawer-direction=left]:border-r data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:rounded-l-xl data-[vaul-drawer-direction=right]:border-l data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=top]:rounded-b-xl data-[vaul-drawer-direction=top]:border-b data-[vaul-drawer-direction=left]:sm:max-w-sm data-[vaul-drawer-direction=right]:sm:max-w-sm", className),
55
+ className: cn("group/drawer-content fixed z-50 flex h-auto flex-col bg-popover text-sm text-popover-foreground data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[96dvh] data-[vaul-drawer-direction=bottom]:rounded-t-xl data-[vaul-drawer-direction=bottom]:border-t data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:rounded-r-xl data-[vaul-drawer-direction=left]:border-r data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:rounded-l-xl data-[vaul-drawer-direction=right]:border-l data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[96dvh] data-[vaul-drawer-direction=top]:rounded-b-xl data-[vaul-drawer-direction=top]:border-b data-[vaul-drawer-direction=left]:sm:max-w-sm data-[vaul-drawer-direction=right]:sm:max-w-sm", className),
44
56
  ...props,
45
57
  children: [/* @__PURE__ */ jsx("div", { className: "mx-auto mt-4 hidden h-1 w-[100px] shrink-0 rounded-full bg-muted group-data-[vaul-drawer-direction=bottom]/drawer-content:block" }), children]
46
58
  })]
47
59
  });
48
60
  }
49
- function DrawerHeader({ className, ...props }) {
61
+ function DrawerHeader({ className, leftNode, rightNode, children, ...props }) {
62
+ if (leftNode || rightNode) return /* @__PURE__ */ jsxs("div", {
63
+ "data-slot": "drawer-header",
64
+ className: cn("grid grid-cols-[1fr_auto_1fr] items-center gap-2 px-4 py-2", className),
65
+ ...props,
66
+ children: [
67
+ /* @__PURE__ */ jsx("div", {
68
+ className: "flex justify-start",
69
+ children: leftNode
70
+ }),
71
+ /* @__PURE__ */ jsx("div", {
72
+ className: "flex flex-col gap-0.5 text-center",
73
+ children
74
+ }),
75
+ /* @__PURE__ */ jsx("div", {
76
+ className: "flex justify-end",
77
+ children: rightNode
78
+ })
79
+ ]
80
+ });
50
81
  return /* @__PURE__ */ jsx("div", {
51
82
  "data-slot": "drawer-header",
52
83
  className: cn("flex flex-col gap-0.5 p-4 group-data-[vaul-drawer-direction=bottom]/drawer-content:text-center group-data-[vaul-drawer-direction=top]/drawer-content:text-center md:gap-0.5 md:text-left", className),
53
- ...props
84
+ ...props,
85
+ children
54
86
  });
55
87
  }
56
88
  function DrawerFooter({ className, ...props }) {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@manhphi1309/drawer",
3
- "version": "0.1.3",
3
+ "version": "0.2.1",
4
4
  "sideEffects": false,
5
5
  "main": "./dist/index.cjs",
6
6
  "module": "./dist/index.mjs",
@@ -28,6 +28,7 @@
28
28
  "react-dom": "^19.0.0"
29
29
  },
30
30
  "dependencies": {
31
+ "@manhphi1309/hooks": "*",
31
32
  "@manhphi1309/utils": "*",
32
33
  "vaul": "^1.1.2"
33
34
  }