@manhphi1309/drawer 0.1.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 (6) hide show
  1. package/README.md +85 -0
  2. package/dist/index.cjs +89 -0
  3. package/dist/index.d.cts +43 -0
  4. package/dist/index.d.mts +43 -0
  5. package/dist/index.mjs +78 -0
  6. package/package.json +33 -0
package/README.md ADDED
@@ -0,0 +1,85 @@
1
+ # @manhphi1309/drawer
2
+
3
+ A customizable and accessible drawer component built on top of `vaul` for the shadcn-custom monorepo.
4
+
5
+ ## Subcomponents
6
+
7
+ This package exports the following subcomponents:
8
+
9
+ - `Drawer`
10
+ - `DrawerPortal`
11
+ - `DrawerOverlay`
12
+ - `DrawerTrigger`
13
+ - `DrawerClose`
14
+ - `DrawerContent`
15
+ - `DrawerHeader`
16
+ - `DrawerFooter`
17
+ - `DrawerTitle`
18
+ - `DrawerDescription`
19
+
20
+ ## Dependencies
21
+
22
+ - `vaul` (Underlying drawer primitive)
23
+ - `@manhphi1309/utils` (For styling and merging class names)
24
+
25
+ ## Installation
26
+
27
+ ```bash
28
+ npm install @manhphi1309/drawer
29
+ ```
30
+
31
+ ## Usage Example
32
+
33
+ ```tsx
34
+ import { Button } from "@manhphi1309/button"
35
+ import {
36
+ Drawer,
37
+ DrawerClose,
38
+ DrawerContent,
39
+ DrawerDescription,
40
+ DrawerFooter,
41
+ DrawerHeader,
42
+ DrawerTitle,
43
+ DrawerTrigger,
44
+ } from "@manhphi1309/drawer"
45
+
46
+ export default function App() {
47
+ return (
48
+ <Drawer>
49
+ <DrawerTrigger asChild>
50
+ <Button variant="outline">Open Drawer</Button>
51
+ </DrawerTrigger>
52
+ <DrawerContent>
53
+ <div className="mx-auto w-full max-w-sm">
54
+ <DrawerHeader>
55
+ <DrawerTitle>Action Required</DrawerTitle>
56
+ <DrawerDescription>Please confirm your action below.</DrawerDescription>
57
+ </DrawerHeader>
58
+ <div className="p-4">
59
+ <p>Are you sure you want to proceed?</p>
60
+ </div>
61
+ <DrawerFooter>
62
+ <Button>Confirm</Button>
63
+ <DrawerClose asChild>
64
+ <Button variant="outline">Cancel</Button>
65
+ </DrawerClose>
66
+ </DrawerFooter>
67
+ </div>
68
+ </DrawerContent>
69
+ </Drawer>
70
+ )
71
+ }
72
+ ```
73
+
74
+ ## Props
75
+
76
+ The `Drawer` component natively wraps and accepts all props provided by the `vaul` library.
77
+
78
+ | Prop | Type | Description |
79
+ | :--- | :--- | :--- |
80
+ | `direction` | `"top" \| "bottom" \| "left" \| "right"` | Direction the drawer slides in from. |
81
+ | `open` | `boolean` | Controlled open state. |
82
+ | `onOpenChange` | `(open: boolean) => void` | Callback when the open state changes. |
83
+ | `snapPoints` | `number[] \| string[]` | Array of numbers from 0 to 1 or string values representing heights to snap to. |
84
+
85
+ For a complete and advanced list of properties (like `fadeFromIndex`, `activeSnapPoint`, etc.), please refer to the official [Vaul documentation](https://github.com/emilkowalski/vaul).
package/dist/index.cjs ADDED
@@ -0,0 +1,89 @@
1
+ "use client";
2
+ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
3
+ //#endregion
4
+ require("react");
5
+ let vaul = require("vaul");
6
+ let _manhphi1309_utils = require("@manhphi1309/utils");
7
+ let react_jsx_runtime = require("react/jsx-runtime");
8
+ //#region index.tsx
9
+ function Drawer({ ...props }) {
10
+ return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(vaul.Drawer.Root, {
11
+ "data-slot": "drawer",
12
+ ...props
13
+ });
14
+ }
15
+ function DrawerTrigger({ ...props }) {
16
+ return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(vaul.Drawer.Trigger, {
17
+ "data-slot": "drawer-trigger",
18
+ ...props
19
+ });
20
+ }
21
+ function DrawerPortal({ ...props }) {
22
+ return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(vaul.Drawer.Portal, {
23
+ "data-slot": "drawer-portal",
24
+ ...props
25
+ });
26
+ }
27
+ function DrawerClose({ ...props }) {
28
+ return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(vaul.Drawer.Close, {
29
+ "data-slot": "drawer-close",
30
+ ...props
31
+ });
32
+ }
33
+ function DrawerOverlay({ className, ...props }) {
34
+ return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(vaul.Drawer.Overlay, {
35
+ "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),
37
+ ...props
38
+ });
39
+ }
40
+ function DrawerContent({ className, children, ...props }) {
41
+ return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(DrawerPortal, {
42
+ "data-slot": "drawer-portal",
43
+ children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(DrawerOverlay, {}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(vaul.Drawer.Content, {
44
+ "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),
46
+ ...props,
47
+ 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
+ })]
49
+ });
50
+ }
51
+ function DrawerHeader({ className, ...props }) {
52
+ return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
53
+ "data-slot": "drawer-header",
54
+ 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
56
+ });
57
+ }
58
+ function DrawerFooter({ className, ...props }) {
59
+ return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
60
+ "data-slot": "drawer-footer",
61
+ className: (0, _manhphi1309_utils.cn)("mt-auto flex flex-col gap-2 p-4", className),
62
+ ...props
63
+ });
64
+ }
65
+ function DrawerTitle({ className, ...props }) {
66
+ return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(vaul.Drawer.Title, {
67
+ "data-slot": "drawer-title",
68
+ className: (0, _manhphi1309_utils.cn)("text-base font-medium text-foreground", className),
69
+ ...props
70
+ });
71
+ }
72
+ function DrawerDescription({ className, ...props }) {
73
+ return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(vaul.Drawer.Description, {
74
+ "data-slot": "drawer-description",
75
+ className: (0, _manhphi1309_utils.cn)("text-sm text-muted-foreground", className),
76
+ ...props
77
+ });
78
+ }
79
+ //#endregion
80
+ exports.Drawer = Drawer;
81
+ exports.DrawerClose = DrawerClose;
82
+ exports.DrawerContent = DrawerContent;
83
+ exports.DrawerDescription = DrawerDescription;
84
+ exports.DrawerFooter = DrawerFooter;
85
+ exports.DrawerHeader = DrawerHeader;
86
+ exports.DrawerOverlay = DrawerOverlay;
87
+ exports.DrawerPortal = DrawerPortal;
88
+ exports.DrawerTitle = DrawerTitle;
89
+ exports.DrawerTrigger = DrawerTrigger;
package/dist/index.d.cts ADDED
@@ -0,0 +1,43 @@
1
+ import * as React from "react";
2
+ import { Drawer as Drawer$1 } from "vaul";
3
+
4
+ //#region index.d.ts
5
+ declare function Drawer({
6
+ ...props
7
+ }: React.ComponentProps<typeof Drawer$1.Root>): React.JSX.Element;
8
+ declare function DrawerTrigger({
9
+ ...props
10
+ }: React.ComponentProps<typeof Drawer$1.Trigger>): React.JSX.Element;
11
+ declare function DrawerPortal({
12
+ ...props
13
+ }: React.ComponentProps<typeof Drawer$1.Portal>): React.JSX.Element;
14
+ declare function DrawerClose({
15
+ ...props
16
+ }: React.ComponentProps<typeof Drawer$1.Close>): React.JSX.Element;
17
+ declare function DrawerOverlay({
18
+ className,
19
+ ...props
20
+ }: React.ComponentProps<typeof Drawer$1.Overlay>): React.JSX.Element;
21
+ declare function DrawerContent({
22
+ className,
23
+ children,
24
+ ...props
25
+ }: React.ComponentProps<typeof Drawer$1.Content>): React.JSX.Element;
26
+ declare function DrawerHeader({
27
+ className,
28
+ ...props
29
+ }: React.ComponentProps<"div">): React.JSX.Element;
30
+ declare function DrawerFooter({
31
+ className,
32
+ ...props
33
+ }: React.ComponentProps<"div">): React.JSX.Element;
34
+ declare function DrawerTitle({
35
+ className,
36
+ ...props
37
+ }: React.ComponentProps<typeof Drawer$1.Title>): React.JSX.Element;
38
+ declare function DrawerDescription({
39
+ className,
40
+ ...props
41
+ }: React.ComponentProps<typeof Drawer$1.Description>): React.JSX.Element;
42
+ //#endregion
43
+ export { Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger };
package/dist/index.d.mts ADDED
@@ -0,0 +1,43 @@
1
+ import * as React from "react";
2
+ import { Drawer as Drawer$1 } from "vaul";
3
+
4
+ //#region index.d.ts
5
+ declare function Drawer({
6
+ ...props
7
+ }: React.ComponentProps<typeof Drawer$1.Root>): React.JSX.Element;
8
+ declare function DrawerTrigger({
9
+ ...props
10
+ }: React.ComponentProps<typeof Drawer$1.Trigger>): React.JSX.Element;
11
+ declare function DrawerPortal({
12
+ ...props
13
+ }: React.ComponentProps<typeof Drawer$1.Portal>): React.JSX.Element;
14
+ declare function DrawerClose({
15
+ ...props
16
+ }: React.ComponentProps<typeof Drawer$1.Close>): React.JSX.Element;
17
+ declare function DrawerOverlay({
18
+ className,
19
+ ...props
20
+ }: React.ComponentProps<typeof Drawer$1.Overlay>): React.JSX.Element;
21
+ declare function DrawerContent({
22
+ className,
23
+ children,
24
+ ...props
25
+ }: React.ComponentProps<typeof Drawer$1.Content>): React.JSX.Element;
26
+ declare function DrawerHeader({
27
+ className,
28
+ ...props
29
+ }: React.ComponentProps<"div">): React.JSX.Element;
30
+ declare function DrawerFooter({
31
+ className,
32
+ ...props
33
+ }: React.ComponentProps<"div">): React.JSX.Element;
34
+ declare function DrawerTitle({
35
+ className,
36
+ ...props
37
+ }: React.ComponentProps<typeof Drawer$1.Title>): React.JSX.Element;
38
+ declare function DrawerDescription({
39
+ className,
40
+ ...props
41
+ }: React.ComponentProps<typeof Drawer$1.Description>): React.JSX.Element;
42
+ //#endregion
43
+ export { Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger };
package/dist/index.mjs ADDED
@@ -0,0 +1,78 @@
1
+ "use client";
2
+ import "react";
3
+ import { Drawer as Drawer$1 } from "vaul";
4
+ import { cn } from "@manhphi1309/utils";
5
+ import { jsx, jsxs } from "react/jsx-runtime";
6
+ //#region index.tsx
7
+ function Drawer({ ...props }) {
8
+ return /* @__PURE__ */ jsx(Drawer$1.Root, {
9
+ "data-slot": "drawer",
10
+ ...props
11
+ });
12
+ }
13
+ function DrawerTrigger({ ...props }) {
14
+ return /* @__PURE__ */ jsx(Drawer$1.Trigger, {
15
+ "data-slot": "drawer-trigger",
16
+ ...props
17
+ });
18
+ }
19
+ function DrawerPortal({ ...props }) {
20
+ return /* @__PURE__ */ jsx(Drawer$1.Portal, {
21
+ "data-slot": "drawer-portal",
22
+ ...props
23
+ });
24
+ }
25
+ function DrawerClose({ ...props }) {
26
+ return /* @__PURE__ */ jsx(Drawer$1.Close, {
27
+ "data-slot": "drawer-close",
28
+ ...props
29
+ });
30
+ }
31
+ function DrawerOverlay({ className, ...props }) {
32
+ return /* @__PURE__ */ jsx(Drawer$1.Overlay, {
33
+ "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),
35
+ ...props
36
+ });
37
+ }
38
+ function DrawerContent({ className, children, ...props }) {
39
+ return /* @__PURE__ */ jsxs(DrawerPortal, {
40
+ "data-slot": "drawer-portal",
41
+ children: [/* @__PURE__ */ jsx(DrawerOverlay, {}), /* @__PURE__ */ jsxs(Drawer$1.Content, {
42
+ "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),
44
+ ...props,
45
+ 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
+ })]
47
+ });
48
+ }
49
+ function DrawerHeader({ className, ...props }) {
50
+ return /* @__PURE__ */ jsx("div", {
51
+ "data-slot": "drawer-header",
52
+ 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
54
+ });
55
+ }
56
+ function DrawerFooter({ className, ...props }) {
57
+ return /* @__PURE__ */ jsx("div", {
58
+ "data-slot": "drawer-footer",
59
+ className: cn("mt-auto flex flex-col gap-2 p-4", className),
60
+ ...props
61
+ });
62
+ }
63
+ function DrawerTitle({ className, ...props }) {
64
+ return /* @__PURE__ */ jsx(Drawer$1.Title, {
65
+ "data-slot": "drawer-title",
66
+ className: cn("text-base font-medium text-foreground", className),
67
+ ...props
68
+ });
69
+ }
70
+ function DrawerDescription({ className, ...props }) {
71
+ return /* @__PURE__ */ jsx(Drawer$1.Description, {
72
+ "data-slot": "drawer-description",
73
+ className: cn("text-sm text-muted-foreground", className),
74
+ ...props
75
+ });
76
+ }
77
+ //#endregion
78
+ export { Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger };
package/package.json ADDED
@@ -0,0 +1,33 @@
1
+ {
2
+ "name": "@manhphi1309/drawer",
3
+ "version": "0.1.1",
4
+ "sideEffects": false,
5
+ "main": "./dist/index.cjs",
6
+ "module": "./dist/index.mjs",
7
+ "types": "./dist/index.d.cts",
8
+ "exports": {
9
+ ".": {
10
+ "import": {
11
+ "types": "./dist/index.d.mts",
12
+ "default": "./dist/index.mjs"
13
+ },
14
+ "require": {
15
+ "types": "./dist/index.d.cts",
16
+ "default": "./dist/index.cjs"
17
+ }
18
+ }
19
+ },
20
+ "files": [
21
+ "dist"
22
+ ],
23
+ "scripts": {
24
+ "build": "tsdown"
25
+ },
26
+ "peerDependencies": {
27
+ "react": "^19.0.0",
28
+ "react-dom": "^19.0.0"
29
+ },
30
+ "dependencies": {
31
+ "@manhphi1309/utils": "*"
32
+ }
33
+ }