@manhphi1309/dialog 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 +28 -0
  2. package/dist/index.cjs +105 -0
  3. package/dist/index.d.cts +50 -0
  4. package/dist/index.d.mts +50 -0
  5. package/dist/index.mjs +95 -0
  6. package/package.json +35 -0
package/README.md ADDED
@@ -0,0 +1,28 @@
1
+ # @manhphi1309/dialog
2
+
3
+ A custom dialog component for the shadcn-custom monorepo.
4
+
5
+ ## Subcomponents
6
+
7
+ - `Dialog`
8
+
9
+ ## Dependencies
10
+
11
+ - `@manhphi1309/utils`
12
+ - `class-variance-authority`
13
+
14
+ ## Installation
15
+
16
+ ```bash
17
+ npm install @manhphi1309/dialog
18
+ ```
19
+
20
+ ## Usage Example
21
+
22
+ ```tsx
23
+ import { Dialog } from "@manhphi1309/dialog"
24
+
25
+ export default function App() {
26
+ return <Dialog>Hello World</Dialog>
27
+ }
28
+ ```
package/dist/index.cjs ADDED
@@ -0,0 +1,105 @@
1
+ "use client";
2
+ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
3
+ let lucide_react = require("lucide-react");
4
+ let radix_ui = require("radix-ui");
5
+ let _manhphi1309_button = require("@manhphi1309/button");
6
+ let _manhphi1309_utils = require("@manhphi1309/utils");
7
+ let react_jsx_runtime = require("react/jsx-runtime");
8
+ //#region index.tsx
9
+ function Dialog({ ...props }) {
10
+ return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(radix_ui.Dialog.Root, {
11
+ "data-slot": "dialog",
12
+ ...props
13
+ });
14
+ }
15
+ function DialogTrigger({ ...props }) {
16
+ return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(radix_ui.Dialog.Trigger, {
17
+ "data-slot": "dialog-trigger",
18
+ ...props
19
+ });
20
+ }
21
+ function DialogPortal({ ...props }) {
22
+ return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(radix_ui.Dialog.Portal, {
23
+ "data-slot": "dialog-portal",
24
+ ...props
25
+ });
26
+ }
27
+ function DialogClose({ ...props }) {
28
+ return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(radix_ui.Dialog.Close, {
29
+ "data-slot": "dialog-close",
30
+ ...props
31
+ });
32
+ }
33
+ function DialogOverlay({ className, ...props }) {
34
+ return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(radix_ui.Dialog.Overlay, {
35
+ "data-slot": "dialog-overlay",
36
+ className: (0, _manhphi1309_utils.cn)("fixed inset-0 isolate z-50 bg-black/10 duration-100 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 DialogContent({ className, children, showCloseButton = true, ...props }) {
41
+ return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(DialogPortal, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(DialogOverlay, {}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(radix_ui.Dialog.Content, {
42
+ "data-slot": "dialog-content",
43
+ className: (0, _manhphi1309_utils.cn)("fixed top-1/2 left-1/2 z-50 grid w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 gap-4 rounded-xl bg-popover p-4 text-sm text-popover-foreground ring-1 ring-foreground/10 duration-100 outline-none sm:max-w-sm data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", className),
44
+ ...props,
45
+ children: [children, showCloseButton && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(radix_ui.Dialog.Close, {
46
+ "data-slot": "dialog-close",
47
+ asChild: true,
48
+ children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_manhphi1309_button.Button, {
49
+ variant: "ghost",
50
+ className: "absolute top-2 right-2",
51
+ size: "icon-sm",
52
+ children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.XIcon, {}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
53
+ className: "sr-only",
54
+ children: "Close"
55
+ })]
56
+ })
57
+ })]
58
+ })] });
59
+ }
60
+ function DialogHeader({ className, ...props }) {
61
+ return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
62
+ "data-slot": "dialog-header",
63
+ className: (0, _manhphi1309_utils.cn)("flex flex-col gap-2", className),
64
+ ...props
65
+ });
66
+ }
67
+ function DialogFooter({ className, showCloseButton = false, children, ...props }) {
68
+ return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
69
+ "data-slot": "dialog-footer",
70
+ className: (0, _manhphi1309_utils.cn)("-mx-4 -mb-4 flex flex-col-reverse gap-2 rounded-b-xl border-t bg-muted/50 p-4 sm:flex-row sm:justify-end", className),
71
+ ...props,
72
+ children: [children, showCloseButton && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(radix_ui.Dialog.Close, {
73
+ asChild: true,
74
+ children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_manhphi1309_button.Button, {
75
+ variant: "outline",
76
+ children: "Close"
77
+ })
78
+ })]
79
+ });
80
+ }
81
+ function DialogTitle({ className, ...props }) {
82
+ return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(radix_ui.Dialog.Title, {
83
+ "data-slot": "dialog-title",
84
+ className: (0, _manhphi1309_utils.cn)("cn-font-heading text-base leading-none font-medium", className),
85
+ ...props
86
+ });
87
+ }
88
+ function DialogDescription({ className, ...props }) {
89
+ return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(radix_ui.Dialog.Description, {
90
+ "data-slot": "dialog-description",
91
+ className: (0, _manhphi1309_utils.cn)("text-sm text-muted-foreground *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground", className),
92
+ ...props
93
+ });
94
+ }
95
+ //#endregion
96
+ exports.Dialog = Dialog;
97
+ exports.DialogClose = DialogClose;
98
+ exports.DialogContent = DialogContent;
99
+ exports.DialogDescription = DialogDescription;
100
+ exports.DialogFooter = DialogFooter;
101
+ exports.DialogHeader = DialogHeader;
102
+ exports.DialogOverlay = DialogOverlay;
103
+ exports.DialogPortal = DialogPortal;
104
+ exports.DialogTitle = DialogTitle;
105
+ exports.DialogTrigger = DialogTrigger;
package/dist/index.d.cts ADDED
@@ -0,0 +1,50 @@
1
+ import * as _$react from "react";
2
+ import { Dialog as Dialog$1 } from "radix-ui";
3
+
4
+ //#region index.d.ts
5
+ declare function Dialog({
6
+ ...props
7
+ }: React.ComponentProps<typeof Dialog$1.Root>): _$react.JSX.Element;
8
+ declare function DialogTrigger({
9
+ ...props
10
+ }: React.ComponentProps<typeof Dialog$1.Trigger>): _$react.JSX.Element;
11
+ declare function DialogPortal({
12
+ ...props
13
+ }: React.ComponentProps<typeof Dialog$1.Portal>): _$react.JSX.Element;
14
+ declare function DialogClose({
15
+ ...props
16
+ }: React.ComponentProps<typeof Dialog$1.Close>): _$react.JSX.Element;
17
+ declare function DialogOverlay({
18
+ className,
19
+ ...props
20
+ }: React.ComponentProps<typeof Dialog$1.Overlay>): _$react.JSX.Element;
21
+ declare function DialogContent({
22
+ className,
23
+ children,
24
+ showCloseButton,
25
+ ...props
26
+ }: React.ComponentProps<typeof Dialog$1.Content> & {
27
+ showCloseButton?: boolean;
28
+ }): _$react.JSX.Element;
29
+ declare function DialogHeader({
30
+ className,
31
+ ...props
32
+ }: React.ComponentProps<"div">): _$react.JSX.Element;
33
+ declare function DialogFooter({
34
+ className,
35
+ showCloseButton,
36
+ children,
37
+ ...props
38
+ }: React.ComponentProps<"div"> & {
39
+ showCloseButton?: boolean;
40
+ }): _$react.JSX.Element;
41
+ declare function DialogTitle({
42
+ className,
43
+ ...props
44
+ }: React.ComponentProps<typeof Dialog$1.Title>): _$react.JSX.Element;
45
+ declare function DialogDescription({
46
+ className,
47
+ ...props
48
+ }: React.ComponentProps<typeof Dialog$1.Description>): _$react.JSX.Element;
49
+ //#endregion
50
+ export { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger };
package/dist/index.d.mts ADDED
@@ -0,0 +1,50 @@
1
+ import { Dialog as Dialog$1 } from "radix-ui";
2
+ import * as _$react from "react";
3
+
4
+ //#region index.d.ts
5
+ declare function Dialog({
6
+ ...props
7
+ }: React.ComponentProps<typeof Dialog$1.Root>): _$react.JSX.Element;
8
+ declare function DialogTrigger({
9
+ ...props
10
+ }: React.ComponentProps<typeof Dialog$1.Trigger>): _$react.JSX.Element;
11
+ declare function DialogPortal({
12
+ ...props
13
+ }: React.ComponentProps<typeof Dialog$1.Portal>): _$react.JSX.Element;
14
+ declare function DialogClose({
15
+ ...props
16
+ }: React.ComponentProps<typeof Dialog$1.Close>): _$react.JSX.Element;
17
+ declare function DialogOverlay({
18
+ className,
19
+ ...props
20
+ }: React.ComponentProps<typeof Dialog$1.Overlay>): _$react.JSX.Element;
21
+ declare function DialogContent({
22
+ className,
23
+ children,
24
+ showCloseButton,
25
+ ...props
26
+ }: React.ComponentProps<typeof Dialog$1.Content> & {
27
+ showCloseButton?: boolean;
28
+ }): _$react.JSX.Element;
29
+ declare function DialogHeader({
30
+ className,
31
+ ...props
32
+ }: React.ComponentProps<"div">): _$react.JSX.Element;
33
+ declare function DialogFooter({
34
+ className,
35
+ showCloseButton,
36
+ children,
37
+ ...props
38
+ }: React.ComponentProps<"div"> & {
39
+ showCloseButton?: boolean;
40
+ }): _$react.JSX.Element;
41
+ declare function DialogTitle({
42
+ className,
43
+ ...props
44
+ }: React.ComponentProps<typeof Dialog$1.Title>): _$react.JSX.Element;
45
+ declare function DialogDescription({
46
+ className,
47
+ ...props
48
+ }: React.ComponentProps<typeof Dialog$1.Description>): _$react.JSX.Element;
49
+ //#endregion
50
+ export { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger };
package/dist/index.mjs ADDED
@@ -0,0 +1,95 @@
1
+ "use client";
2
+ import { XIcon } from "lucide-react";
3
+ import { Dialog as Dialog$1 } from "radix-ui";
4
+ import { Button } from "@manhphi1309/button";
5
+ import { cn } from "@manhphi1309/utils";
6
+ import { jsx, jsxs } from "react/jsx-runtime";
7
+ //#region index.tsx
8
+ function Dialog({ ...props }) {
9
+ return /* @__PURE__ */ jsx(Dialog$1.Root, {
10
+ "data-slot": "dialog",
11
+ ...props
12
+ });
13
+ }
14
+ function DialogTrigger({ ...props }) {
15
+ return /* @__PURE__ */ jsx(Dialog$1.Trigger, {
16
+ "data-slot": "dialog-trigger",
17
+ ...props
18
+ });
19
+ }
20
+ function DialogPortal({ ...props }) {
21
+ return /* @__PURE__ */ jsx(Dialog$1.Portal, {
22
+ "data-slot": "dialog-portal",
23
+ ...props
24
+ });
25
+ }
26
+ function DialogClose({ ...props }) {
27
+ return /* @__PURE__ */ jsx(Dialog$1.Close, {
28
+ "data-slot": "dialog-close",
29
+ ...props
30
+ });
31
+ }
32
+ function DialogOverlay({ className, ...props }) {
33
+ return /* @__PURE__ */ jsx(Dialog$1.Overlay, {
34
+ "data-slot": "dialog-overlay",
35
+ className: cn("fixed inset-0 isolate z-50 bg-black/10 duration-100 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),
36
+ ...props
37
+ });
38
+ }
39
+ function DialogContent({ className, children, showCloseButton = true, ...props }) {
40
+ return /* @__PURE__ */ jsxs(DialogPortal, { children: [/* @__PURE__ */ jsx(DialogOverlay, {}), /* @__PURE__ */ jsxs(Dialog$1.Content, {
41
+ "data-slot": "dialog-content",
42
+ className: cn("fixed top-1/2 left-1/2 z-50 grid w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 gap-4 rounded-xl bg-popover p-4 text-sm text-popover-foreground ring-1 ring-foreground/10 duration-100 outline-none sm:max-w-sm data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", className),
43
+ ...props,
44
+ children: [children, showCloseButton && /* @__PURE__ */ jsx(Dialog$1.Close, {
45
+ "data-slot": "dialog-close",
46
+ asChild: true,
47
+ children: /* @__PURE__ */ jsxs(Button, {
48
+ variant: "ghost",
49
+ className: "absolute top-2 right-2",
50
+ size: "icon-sm",
51
+ children: [/* @__PURE__ */ jsx(XIcon, {}), /* @__PURE__ */ jsx("span", {
52
+ className: "sr-only",
53
+ children: "Close"
54
+ })]
55
+ })
56
+ })]
57
+ })] });
58
+ }
59
+ function DialogHeader({ className, ...props }) {
60
+ return /* @__PURE__ */ jsx("div", {
61
+ "data-slot": "dialog-header",
62
+ className: cn("flex flex-col gap-2", className),
63
+ ...props
64
+ });
65
+ }
66
+ function DialogFooter({ className, showCloseButton = false, children, ...props }) {
67
+ return /* @__PURE__ */ jsxs("div", {
68
+ "data-slot": "dialog-footer",
69
+ className: cn("-mx-4 -mb-4 flex flex-col-reverse gap-2 rounded-b-xl border-t bg-muted/50 p-4 sm:flex-row sm:justify-end", className),
70
+ ...props,
71
+ children: [children, showCloseButton && /* @__PURE__ */ jsx(Dialog$1.Close, {
72
+ asChild: true,
73
+ children: /* @__PURE__ */ jsx(Button, {
74
+ variant: "outline",
75
+ children: "Close"
76
+ })
77
+ })]
78
+ });
79
+ }
80
+ function DialogTitle({ className, ...props }) {
81
+ return /* @__PURE__ */ jsx(Dialog$1.Title, {
82
+ "data-slot": "dialog-title",
83
+ className: cn("cn-font-heading text-base leading-none font-medium", className),
84
+ ...props
85
+ });
86
+ }
87
+ function DialogDescription({ className, ...props }) {
88
+ return /* @__PURE__ */ jsx(Dialog$1.Description, {
89
+ "data-slot": "dialog-description",
90
+ className: cn("text-sm text-muted-foreground *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground", className),
91
+ ...props
92
+ });
93
+ }
94
+ //#endregion
95
+ export { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger };
package/package.json ADDED
@@ -0,0 +1,35 @@
1
+ {
2
+ "name": "@manhphi1309/dialog",
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/button": "*",
32
+ "@manhphi1309/utils": "*",
33
+ "class-variance-authority": "*"
34
+ }
35
+ }