@glob-ui/sheet 0.0.0-stage → 0.1.0
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.
- package/LICENSE +21 -0
- package/README.md +16 -2
- package/dist/index.d.mts +31 -0
- package/dist/index.d.ts +31 -0
- package/dist/index.js +140 -0
- package/dist/index.js.map +1 -0
- package/dist/index.mjs +118 -0
- package/dist/index.mjs.map +1 -0
- package/package.json +66 -3
package/LICENSE
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2026 Kevin Martínez E
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
package/README.md
CHANGED
|
@@ -1,3 +1,17 @@
|
|
|
1
|
-
#
|
|
1
|
+
# @glob-ui/sheet
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
A panel that slides in from an edge. It is a Dialog: same focus handling, Escape, backdrop and scroll lock.
|
|
4
|
+
|
|
5
|
+
## Install
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
pnpm add @glob-ui/sheet
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
## Documentation
|
|
12
|
+
|
|
13
|
+
Full docs, examples and the accessibility table: [Sheet](https://github.com/kevin-martineze/GlobUI/tree/main/apps/docs/content/docs/components/sheet.mdx).
|
|
14
|
+
|
|
15
|
+
## License
|
|
16
|
+
|
|
17
|
+
MIT. See [LICENSE](./LICENSE).
|
package/dist/index.d.mts
ADDED
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
import * as class_variance_authority_types from 'class-variance-authority/types';
|
|
2
|
+
import * as react from 'react';
|
|
3
|
+
import * as _glob_ui_dialog from '@glob-ui/dialog';
|
|
4
|
+
import { Dialog, DialogClose, DialogContentBaseProps, DialogDescription, DialogFooterProps, DialogHeader, DialogTitle, DialogTrigger } from '@glob-ui/dialog';
|
|
5
|
+
import { VariantProps } from 'class-variance-authority';
|
|
6
|
+
|
|
7
|
+
declare const Sheet: typeof Dialog;
|
|
8
|
+
declare const SheetTrigger: react.ForwardRefExoticComponent<_glob_ui_dialog.DialogTriggerProps & react.RefAttributes<HTMLButtonElement>>;
|
|
9
|
+
declare const SheetClose: react.ForwardRefExoticComponent<_glob_ui_dialog.DialogCloseProps & react.RefAttributes<HTMLButtonElement>>;
|
|
10
|
+
declare const SheetHeader: react.ForwardRefExoticComponent<_glob_ui_dialog.DialogHeaderProps & react.RefAttributes<HTMLDivElement>>;
|
|
11
|
+
declare const SheetTitle: react.ForwardRefExoticComponent<_glob_ui_dialog.DialogTitleProps & react.RefAttributes<HTMLHeadingElement>>;
|
|
12
|
+
declare const SheetDescription: react.ForwardRefExoticComponent<_glob_ui_dialog.DialogDescriptionProps & react.RefAttributes<HTMLParagraphElement>>;
|
|
13
|
+
type SheetProps = React.ComponentProps<typeof Dialog>;
|
|
14
|
+
type SheetTriggerProps = React.ComponentProps<typeof DialogTrigger>;
|
|
15
|
+
type SheetCloseProps = React.ComponentProps<typeof DialogClose>;
|
|
16
|
+
type SheetHeaderProps = React.ComponentProps<typeof DialogHeader>;
|
|
17
|
+
type SheetTitleProps = React.ComponentProps<typeof DialogTitle>;
|
|
18
|
+
type SheetDescriptionProps = React.ComponentProps<typeof DialogDescription>;
|
|
19
|
+
type SheetFooterProps = DialogFooterProps;
|
|
20
|
+
declare const sheetVariants: (props?: ({
|
|
21
|
+
side?: "right" | "left" | "top" | "bottom" | null | undefined;
|
|
22
|
+
size?: "sm" | "md" | "lg" | null | undefined;
|
|
23
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
24
|
+
interface SheetContentProps extends DialogContentBaseProps, VariantProps<typeof sheetVariants> {
|
|
25
|
+
/** Shows an X button in the top-right corner. */
|
|
26
|
+
showCloseButton?: boolean;
|
|
27
|
+
}
|
|
28
|
+
declare const SheetContent: react.ForwardRefExoticComponent<SheetContentProps & react.RefAttributes<HTMLDialogElement>>;
|
|
29
|
+
declare const SheetFooter: react.ForwardRefExoticComponent<DialogFooterProps & react.RefAttributes<HTMLDivElement>>;
|
|
30
|
+
|
|
31
|
+
export { Sheet, SheetClose, type SheetCloseProps, SheetContent, type SheetContentProps, SheetDescription, type SheetDescriptionProps, SheetFooter, type SheetFooterProps, SheetHeader, type SheetHeaderProps, type SheetProps, SheetTitle, type SheetTitleProps, SheetTrigger, type SheetTriggerProps, sheetVariants };
|
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
import * as class_variance_authority_types from 'class-variance-authority/types';
|
|
2
|
+
import * as react from 'react';
|
|
3
|
+
import * as _glob_ui_dialog from '@glob-ui/dialog';
|
|
4
|
+
import { Dialog, DialogClose, DialogContentBaseProps, DialogDescription, DialogFooterProps, DialogHeader, DialogTitle, DialogTrigger } from '@glob-ui/dialog';
|
|
5
|
+
import { VariantProps } from 'class-variance-authority';
|
|
6
|
+
|
|
7
|
+
declare const Sheet: typeof Dialog;
|
|
8
|
+
declare const SheetTrigger: react.ForwardRefExoticComponent<_glob_ui_dialog.DialogTriggerProps & react.RefAttributes<HTMLButtonElement>>;
|
|
9
|
+
declare const SheetClose: react.ForwardRefExoticComponent<_glob_ui_dialog.DialogCloseProps & react.RefAttributes<HTMLButtonElement>>;
|
|
10
|
+
declare const SheetHeader: react.ForwardRefExoticComponent<_glob_ui_dialog.DialogHeaderProps & react.RefAttributes<HTMLDivElement>>;
|
|
11
|
+
declare const SheetTitle: react.ForwardRefExoticComponent<_glob_ui_dialog.DialogTitleProps & react.RefAttributes<HTMLHeadingElement>>;
|
|
12
|
+
declare const SheetDescription: react.ForwardRefExoticComponent<_glob_ui_dialog.DialogDescriptionProps & react.RefAttributes<HTMLParagraphElement>>;
|
|
13
|
+
type SheetProps = React.ComponentProps<typeof Dialog>;
|
|
14
|
+
type SheetTriggerProps = React.ComponentProps<typeof DialogTrigger>;
|
|
15
|
+
type SheetCloseProps = React.ComponentProps<typeof DialogClose>;
|
|
16
|
+
type SheetHeaderProps = React.ComponentProps<typeof DialogHeader>;
|
|
17
|
+
type SheetTitleProps = React.ComponentProps<typeof DialogTitle>;
|
|
18
|
+
type SheetDescriptionProps = React.ComponentProps<typeof DialogDescription>;
|
|
19
|
+
type SheetFooterProps = DialogFooterProps;
|
|
20
|
+
declare const sheetVariants: (props?: ({
|
|
21
|
+
side?: "right" | "left" | "top" | "bottom" | null | undefined;
|
|
22
|
+
size?: "sm" | "md" | "lg" | null | undefined;
|
|
23
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
24
|
+
interface SheetContentProps extends DialogContentBaseProps, VariantProps<typeof sheetVariants> {
|
|
25
|
+
/** Shows an X button in the top-right corner. */
|
|
26
|
+
showCloseButton?: boolean;
|
|
27
|
+
}
|
|
28
|
+
declare const SheetContent: react.ForwardRefExoticComponent<SheetContentProps & react.RefAttributes<HTMLDialogElement>>;
|
|
29
|
+
declare const SheetFooter: react.ForwardRefExoticComponent<DialogFooterProps & react.RefAttributes<HTMLDivElement>>;
|
|
30
|
+
|
|
31
|
+
export { Sheet, SheetClose, type SheetCloseProps, SheetContent, type SheetContentProps, SheetDescription, type SheetDescriptionProps, SheetFooter, type SheetFooterProps, SheetHeader, type SheetHeaderProps, type SheetProps, SheetTitle, type SheetTitleProps, SheetTrigger, type SheetTriggerProps, sheetVariants };
|
package/dist/index.js
ADDED
|
@@ -0,0 +1,140 @@
|
|
|
1
|
+
"use client"
|
|
2
|
+
"use strict";
|
|
3
|
+
var __defProp = Object.defineProperty;
|
|
4
|
+
var __defProps = Object.defineProperties;
|
|
5
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
6
|
+
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
|
|
7
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
8
|
+
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
9
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
10
|
+
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
11
|
+
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
12
|
+
var __spreadValues = (a, b) => {
|
|
13
|
+
for (var prop in b || (b = {}))
|
|
14
|
+
if (__hasOwnProp.call(b, prop))
|
|
15
|
+
__defNormalProp(a, prop, b[prop]);
|
|
16
|
+
if (__getOwnPropSymbols)
|
|
17
|
+
for (var prop of __getOwnPropSymbols(b)) {
|
|
18
|
+
if (__propIsEnum.call(b, prop))
|
|
19
|
+
__defNormalProp(a, prop, b[prop]);
|
|
20
|
+
}
|
|
21
|
+
return a;
|
|
22
|
+
};
|
|
23
|
+
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
24
|
+
var __objRest = (source, exclude) => {
|
|
25
|
+
var target = {};
|
|
26
|
+
for (var prop in source)
|
|
27
|
+
if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
|
|
28
|
+
target[prop] = source[prop];
|
|
29
|
+
if (source != null && __getOwnPropSymbols)
|
|
30
|
+
for (var prop of __getOwnPropSymbols(source)) {
|
|
31
|
+
if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
|
|
32
|
+
target[prop] = source[prop];
|
|
33
|
+
}
|
|
34
|
+
return target;
|
|
35
|
+
};
|
|
36
|
+
var __export = (target, all) => {
|
|
37
|
+
for (var name in all)
|
|
38
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
39
|
+
};
|
|
40
|
+
var __copyProps = (to, from, except, desc) => {
|
|
41
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
42
|
+
for (let key of __getOwnPropNames(from))
|
|
43
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
44
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
45
|
+
}
|
|
46
|
+
return to;
|
|
47
|
+
};
|
|
48
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
49
|
+
|
|
50
|
+
// src/index.ts
|
|
51
|
+
var index_exports = {};
|
|
52
|
+
__export(index_exports, {
|
|
53
|
+
Sheet: () => Sheet,
|
|
54
|
+
SheetClose: () => SheetClose,
|
|
55
|
+
SheetContent: () => SheetContent,
|
|
56
|
+
SheetDescription: () => SheetDescription,
|
|
57
|
+
SheetFooter: () => SheetFooter,
|
|
58
|
+
SheetHeader: () => SheetHeader,
|
|
59
|
+
SheetTitle: () => SheetTitle,
|
|
60
|
+
SheetTrigger: () => SheetTrigger,
|
|
61
|
+
sheetVariants: () => sheetVariants
|
|
62
|
+
});
|
|
63
|
+
module.exports = __toCommonJS(index_exports);
|
|
64
|
+
|
|
65
|
+
// src/sheet.tsx
|
|
66
|
+
var import_react = require("react");
|
|
67
|
+
var import_class_variance_authority = require("class-variance-authority");
|
|
68
|
+
var import_utils = require("@glob-ui/utils");
|
|
69
|
+
var import_dialog = require("@glob-ui/dialog");
|
|
70
|
+
var import_jsx_runtime = require("react/jsx-runtime");
|
|
71
|
+
var Sheet = import_dialog.Dialog;
|
|
72
|
+
var SheetTrigger = import_dialog.DialogTrigger;
|
|
73
|
+
var SheetClose = import_dialog.DialogClose;
|
|
74
|
+
var SheetHeader = import_dialog.DialogHeader;
|
|
75
|
+
var SheetTitle = import_dialog.DialogTitle;
|
|
76
|
+
var SheetDescription = import_dialog.DialogDescription;
|
|
77
|
+
var sheetVariants = (0, import_class_variance_authority.cva)(
|
|
78
|
+
[
|
|
79
|
+
// Pinned to its edge: the native dialog margin and max sizes are reset here, the side adds the edge.
|
|
80
|
+
"m-0 h-full max-h-none w-[calc(100%-3rem)] max-w-none overflow-visible rounded-none border-glob-border bg-glob-surface p-0 text-glob-text shadow-glob-md",
|
|
81
|
+
// Slide in from its edge. @starting-style sets the start; transition-discrete keeps display alive on exit.
|
|
82
|
+
"transition-[translate,overlay,display] transition-discrete duration-300 ease-out",
|
|
83
|
+
"backdrop:bg-glob-overlay backdrop:opacity-0 backdrop:transition-[opacity,overlay,display] backdrop:transition-discrete backdrop:duration-200",
|
|
84
|
+
"open:backdrop:opacity-100 starting:open:backdrop:opacity-0",
|
|
85
|
+
"motion-reduce:transition-none motion-reduce:backdrop:transition-none"
|
|
86
|
+
],
|
|
87
|
+
{
|
|
88
|
+
variants: {
|
|
89
|
+
side: {
|
|
90
|
+
right: "border-l inset-y-0 left-auto right-0 translate-x-full open:translate-x-0 starting:open:translate-x-full",
|
|
91
|
+
left: "border-r inset-y-0 left-0 right-auto -translate-x-full open:translate-x-0 starting:open:-translate-x-full",
|
|
92
|
+
top: "border-b inset-x-0 top-0 bottom-auto h-auto max-h-[85dvh] w-full -translate-y-full open:translate-y-0 starting:open:-translate-y-full",
|
|
93
|
+
bottom: "border-t inset-x-0 top-auto bottom-0 h-auto max-h-[85dvh] w-full translate-y-full open:translate-y-0 starting:open:translate-y-full"
|
|
94
|
+
},
|
|
95
|
+
// Only applies to left and right (see compoundVariants): top and bottom are full width.
|
|
96
|
+
size: {
|
|
97
|
+
sm: "",
|
|
98
|
+
md: "",
|
|
99
|
+
lg: ""
|
|
100
|
+
}
|
|
101
|
+
},
|
|
102
|
+
compoundVariants: [
|
|
103
|
+
{ side: ["left", "right"], size: "sm", className: "max-w-xs" },
|
|
104
|
+
{ side: ["left", "right"], size: "md", className: "max-w-sm" },
|
|
105
|
+
{ side: ["left", "right"], size: "lg", className: "max-w-md" }
|
|
106
|
+
],
|
|
107
|
+
defaultVariants: {
|
|
108
|
+
side: "right",
|
|
109
|
+
size: "md"
|
|
110
|
+
}
|
|
111
|
+
}
|
|
112
|
+
);
|
|
113
|
+
var SheetContent = (0, import_react.forwardRef)(
|
|
114
|
+
(_a, ref) => {
|
|
115
|
+
var _b = _a, { className, side, size, showCloseButton = true, children } = _b, props = __objRest(_b, ["className", "side", "size", "showCloseButton", "children"]);
|
|
116
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_dialog.DialogContentBase, __spreadProps(__spreadValues({ ref, className: (0, import_utils.cn)(sheetVariants({ side, size, className })) }, props), { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "relative flex h-full flex-col gap-4 overflow-y-auto p-6", children: [
|
|
117
|
+
children,
|
|
118
|
+
showCloseButton && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_dialog.DialogCloseIcon, {})
|
|
119
|
+
] }) }));
|
|
120
|
+
}
|
|
121
|
+
);
|
|
122
|
+
SheetContent.displayName = "SheetContent";
|
|
123
|
+
var SheetFooter = (0, import_react.forwardRef)((_a, ref) => {
|
|
124
|
+
var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
|
|
125
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_dialog.DialogFooter, __spreadValues({ ref, className: (0, import_utils.cn)("mt-auto", className) }, props));
|
|
126
|
+
});
|
|
127
|
+
SheetFooter.displayName = "SheetFooter";
|
|
128
|
+
// Annotate the CommonJS export names for ESM import in node:
|
|
129
|
+
0 && (module.exports = {
|
|
130
|
+
Sheet,
|
|
131
|
+
SheetClose,
|
|
132
|
+
SheetContent,
|
|
133
|
+
SheetDescription,
|
|
134
|
+
SheetFooter,
|
|
135
|
+
SheetHeader,
|
|
136
|
+
SheetTitle,
|
|
137
|
+
SheetTrigger,
|
|
138
|
+
sheetVariants
|
|
139
|
+
});
|
|
140
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/index.ts","../src/sheet.tsx"],"sourcesContent":["export { Sheet, SheetTrigger, SheetClose, SheetHeader, SheetTitle, SheetDescription, SheetContent, SheetFooter, sheetVariants } from \"./sheet\"\nexport type {\n SheetProps,\n SheetTriggerProps,\n SheetCloseProps,\n SheetHeaderProps,\n SheetTitleProps,\n SheetDescriptionProps,\n SheetContentProps,\n SheetFooterProps,\n} from \"./sheet\"\n","\"use client\"\n\nimport { forwardRef } from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { cn } from \"@glob-ui/utils\"\nimport {\n Dialog,\n DialogTrigger,\n DialogClose,\n DialogHeader,\n DialogTitle,\n DialogDescription,\n DialogFooter,\n DialogContentBase,\n DialogCloseIcon,\n type DialogContentBaseProps,\n type DialogFooterProps,\n} from \"@glob-ui/dialog\"\n\n// A Sheet is a Dialog: same context, same scroll lock, Esc, backdrop and focus return.\nexport const Sheet = Dialog\nexport const SheetTrigger = DialogTrigger\nexport const SheetClose = DialogClose\nexport const SheetHeader = DialogHeader\nexport const SheetTitle = DialogTitle\nexport const SheetDescription = DialogDescription\n\nexport type SheetProps = React.ComponentProps<typeof Dialog>\nexport type SheetTriggerProps = React.ComponentProps<typeof DialogTrigger>\nexport type SheetCloseProps = React.ComponentProps<typeof DialogClose>\nexport type SheetHeaderProps = React.ComponentProps<typeof DialogHeader>\nexport type SheetTitleProps = React.ComponentProps<typeof DialogTitle>\nexport type SheetDescriptionProps = React.ComponentProps<typeof DialogDescription>\nexport type SheetFooterProps = DialogFooterProps\n\nconst sheetVariants = cva(\n [\n // Pinned to its edge: the native dialog margin and max sizes are reset here, the side adds the edge.\n \"m-0 h-full max-h-none w-[calc(100%-3rem)] max-w-none overflow-visible rounded-none border-glob-border bg-glob-surface p-0 text-glob-text shadow-glob-md\",\n // Slide in from its edge. @starting-style sets the start; transition-discrete keeps display alive on exit.\n \"transition-[translate,overlay,display] transition-discrete duration-300 ease-out\",\n \"backdrop:bg-glob-overlay backdrop:opacity-0 backdrop:transition-[opacity,overlay,display] backdrop:transition-discrete backdrop:duration-200\",\n \"open:backdrop:opacity-100 starting:open:backdrop:opacity-0\",\n \"motion-reduce:transition-none motion-reduce:backdrop:transition-none\",\n ],\n {\n variants: {\n side: {\n right: \"border-l inset-y-0 left-auto right-0 translate-x-full open:translate-x-0 starting:open:translate-x-full\",\n left: \"border-r inset-y-0 left-0 right-auto -translate-x-full open:translate-x-0 starting:open:-translate-x-full\",\n top: \"border-b inset-x-0 top-0 bottom-auto h-auto max-h-[85dvh] w-full -translate-y-full open:translate-y-0 starting:open:-translate-y-full\",\n bottom: \"border-t inset-x-0 top-auto bottom-0 h-auto max-h-[85dvh] w-full translate-y-full open:translate-y-0 starting:open:translate-y-full\",\n },\n // Only applies to left and right (see compoundVariants): top and bottom are full width.\n size: {\n sm: \"\",\n md: \"\",\n lg: \"\",\n },\n },\n compoundVariants: [\n { side: [\"left\", \"right\"], size: \"sm\", className: \"max-w-xs\" },\n { side: [\"left\", \"right\"], size: \"md\", className: \"max-w-sm\" },\n { side: [\"left\", \"right\"], size: \"lg\", className: \"max-w-md\" },\n ],\n defaultVariants: {\n side: \"right\",\n size: \"md\",\n },\n }\n)\n\nexport interface SheetContentProps extends DialogContentBaseProps, VariantProps<typeof sheetVariants> {\n /** Shows an X button in the top-right corner. */\n showCloseButton?: boolean\n}\n\nconst SheetContent = forwardRef<HTMLDialogElement, SheetContentProps>(\n ({ className, side, size, showCloseButton = true, children, ...props }, ref) => (\n <DialogContentBase ref={ref} className={cn(sheetVariants({ side, size, className }))} {...props}>\n <div className=\"relative flex h-full flex-col gap-4 overflow-y-auto p-6\">\n {children}\n {showCloseButton && <DialogCloseIcon />}\n </div>\n </DialogContentBase>\n )\n)\nSheetContent.displayName = \"SheetContent\"\n\nconst SheetFooter = forwardRef<HTMLDivElement, SheetFooterProps>(({ className, ...props }, ref) => (\n <DialogFooter ref={ref} className={cn(\"mt-auto\", className)} {...props} />\n))\nSheetFooter.displayName = \"SheetFooter\"\n\nexport { SheetContent, SheetFooter, sheetVariants }\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACEA,mBAA2B;AAC3B,sCAAuC;AACvC,mBAAmB;AACnB,oBAYO;AA+DD;AA5DC,IAAM,QAAQ;AACd,IAAM,eAAe;AACrB,IAAM,aAAa;AACnB,IAAM,cAAc;AACpB,IAAM,aAAa;AACnB,IAAM,mBAAmB;AAUhC,IAAM,oBAAgB;AAAA,EACpB;AAAA;AAAA,IAEE;AAAA;AAAA,IAEA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,MAAM;AAAA,QACJ,OAAO;AAAA,QACP,MAAM;AAAA,QACN,KAAK;AAAA,QACL,QAAQ;AAAA,MACV;AAAA;AAAA,MAEA,MAAM;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,MACN;AAAA,IACF;AAAA,IACA,kBAAkB;AAAA,MAChB,EAAE,MAAM,CAAC,QAAQ,OAAO,GAAG,MAAM,MAAM,WAAW,WAAW;AAAA,MAC7D,EAAE,MAAM,CAAC,QAAQ,OAAO,GAAG,MAAM,MAAM,WAAW,WAAW;AAAA,MAC7D,EAAE,MAAM,CAAC,QAAQ,OAAO,GAAG,MAAM,MAAM,WAAW,WAAW;AAAA,IAC/D;AAAA,IACA,iBAAiB;AAAA,MACf,MAAM;AAAA,MACN,MAAM;AAAA,IACR;AAAA,EACF;AACF;AAOA,IAAM,mBAAe;AAAA,EACnB,CAAC,IAAuE,QAAK;AAA5E,iBAAE,aAAW,MAAM,MAAM,kBAAkB,MAAM,SA9EpD,IA8EG,IAA8D,kBAA9D,IAA8D,CAA5D,aAAW,QAAM,QAAM,mBAAwB;AAChD,uDAAC,gEAAkB,KAAU,eAAW,iBAAG,cAAc,EAAE,MAAM,MAAM,UAAU,CAAC,CAAC,KAAO,QAAzF,EACC,uDAAC,SAAI,WAAU,2DACZ;AAAA;AAAA,MACA,mBAAmB,4CAAC,iCAAgB;AAAA,OACvC,IACF;AAAA;AAEJ;AACA,aAAa,cAAc;AAE3B,IAAM,kBAAc,yBAA6C,CAAC,IAAyB,QAAK;AAA9B,eAAE,YAzFpE,IAyFkE,IAAgB,kBAAhB,IAAgB,CAAd;AAClE,qDAAC,6CAAa,KAAU,eAAW,iBAAG,WAAW,SAAS,KAAO,MAAO;AAAA,CACzE;AACD,YAAY,cAAc;","names":[]}
|
package/dist/index.mjs
ADDED
|
@@ -0,0 +1,118 @@
|
|
|
1
|
+
"use client"
|
|
2
|
+
var __defProp = Object.defineProperty;
|
|
3
|
+
var __defProps = Object.defineProperties;
|
|
4
|
+
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
|
|
5
|
+
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
6
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
7
|
+
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
8
|
+
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
9
|
+
var __spreadValues = (a, b) => {
|
|
10
|
+
for (var prop in b || (b = {}))
|
|
11
|
+
if (__hasOwnProp.call(b, prop))
|
|
12
|
+
__defNormalProp(a, prop, b[prop]);
|
|
13
|
+
if (__getOwnPropSymbols)
|
|
14
|
+
for (var prop of __getOwnPropSymbols(b)) {
|
|
15
|
+
if (__propIsEnum.call(b, prop))
|
|
16
|
+
__defNormalProp(a, prop, b[prop]);
|
|
17
|
+
}
|
|
18
|
+
return a;
|
|
19
|
+
};
|
|
20
|
+
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
21
|
+
var __objRest = (source, exclude) => {
|
|
22
|
+
var target = {};
|
|
23
|
+
for (var prop in source)
|
|
24
|
+
if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
|
|
25
|
+
target[prop] = source[prop];
|
|
26
|
+
if (source != null && __getOwnPropSymbols)
|
|
27
|
+
for (var prop of __getOwnPropSymbols(source)) {
|
|
28
|
+
if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
|
|
29
|
+
target[prop] = source[prop];
|
|
30
|
+
}
|
|
31
|
+
return target;
|
|
32
|
+
};
|
|
33
|
+
|
|
34
|
+
// src/sheet.tsx
|
|
35
|
+
import { forwardRef } from "react";
|
|
36
|
+
import { cva } from "class-variance-authority";
|
|
37
|
+
import { cn } from "@glob-ui/utils";
|
|
38
|
+
import {
|
|
39
|
+
Dialog,
|
|
40
|
+
DialogTrigger,
|
|
41
|
+
DialogClose,
|
|
42
|
+
DialogHeader,
|
|
43
|
+
DialogTitle,
|
|
44
|
+
DialogDescription,
|
|
45
|
+
DialogFooter,
|
|
46
|
+
DialogContentBase,
|
|
47
|
+
DialogCloseIcon
|
|
48
|
+
} from "@glob-ui/dialog";
|
|
49
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
50
|
+
var Sheet = Dialog;
|
|
51
|
+
var SheetTrigger = DialogTrigger;
|
|
52
|
+
var SheetClose = DialogClose;
|
|
53
|
+
var SheetHeader = DialogHeader;
|
|
54
|
+
var SheetTitle = DialogTitle;
|
|
55
|
+
var SheetDescription = DialogDescription;
|
|
56
|
+
var sheetVariants = cva(
|
|
57
|
+
[
|
|
58
|
+
// Pinned to its edge: the native dialog margin and max sizes are reset here, the side adds the edge.
|
|
59
|
+
"m-0 h-full max-h-none w-[calc(100%-3rem)] max-w-none overflow-visible rounded-none border-glob-border bg-glob-surface p-0 text-glob-text shadow-glob-md",
|
|
60
|
+
// Slide in from its edge. @starting-style sets the start; transition-discrete keeps display alive on exit.
|
|
61
|
+
"transition-[translate,overlay,display] transition-discrete duration-300 ease-out",
|
|
62
|
+
"backdrop:bg-glob-overlay backdrop:opacity-0 backdrop:transition-[opacity,overlay,display] backdrop:transition-discrete backdrop:duration-200",
|
|
63
|
+
"open:backdrop:opacity-100 starting:open:backdrop:opacity-0",
|
|
64
|
+
"motion-reduce:transition-none motion-reduce:backdrop:transition-none"
|
|
65
|
+
],
|
|
66
|
+
{
|
|
67
|
+
variants: {
|
|
68
|
+
side: {
|
|
69
|
+
right: "border-l inset-y-0 left-auto right-0 translate-x-full open:translate-x-0 starting:open:translate-x-full",
|
|
70
|
+
left: "border-r inset-y-0 left-0 right-auto -translate-x-full open:translate-x-0 starting:open:-translate-x-full",
|
|
71
|
+
top: "border-b inset-x-0 top-0 bottom-auto h-auto max-h-[85dvh] w-full -translate-y-full open:translate-y-0 starting:open:-translate-y-full",
|
|
72
|
+
bottom: "border-t inset-x-0 top-auto bottom-0 h-auto max-h-[85dvh] w-full translate-y-full open:translate-y-0 starting:open:translate-y-full"
|
|
73
|
+
},
|
|
74
|
+
// Only applies to left and right (see compoundVariants): top and bottom are full width.
|
|
75
|
+
size: {
|
|
76
|
+
sm: "",
|
|
77
|
+
md: "",
|
|
78
|
+
lg: ""
|
|
79
|
+
}
|
|
80
|
+
},
|
|
81
|
+
compoundVariants: [
|
|
82
|
+
{ side: ["left", "right"], size: "sm", className: "max-w-xs" },
|
|
83
|
+
{ side: ["left", "right"], size: "md", className: "max-w-sm" },
|
|
84
|
+
{ side: ["left", "right"], size: "lg", className: "max-w-md" }
|
|
85
|
+
],
|
|
86
|
+
defaultVariants: {
|
|
87
|
+
side: "right",
|
|
88
|
+
size: "md"
|
|
89
|
+
}
|
|
90
|
+
}
|
|
91
|
+
);
|
|
92
|
+
var SheetContent = forwardRef(
|
|
93
|
+
(_a, ref) => {
|
|
94
|
+
var _b = _a, { className, side, size, showCloseButton = true, children } = _b, props = __objRest(_b, ["className", "side", "size", "showCloseButton", "children"]);
|
|
95
|
+
return /* @__PURE__ */ jsx(DialogContentBase, __spreadProps(__spreadValues({ ref, className: cn(sheetVariants({ side, size, className })) }, props), { children: /* @__PURE__ */ jsxs("div", { className: "relative flex h-full flex-col gap-4 overflow-y-auto p-6", children: [
|
|
96
|
+
children,
|
|
97
|
+
showCloseButton && /* @__PURE__ */ jsx(DialogCloseIcon, {})
|
|
98
|
+
] }) }));
|
|
99
|
+
}
|
|
100
|
+
);
|
|
101
|
+
SheetContent.displayName = "SheetContent";
|
|
102
|
+
var SheetFooter = forwardRef((_a, ref) => {
|
|
103
|
+
var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
|
|
104
|
+
return /* @__PURE__ */ jsx(DialogFooter, __spreadValues({ ref, className: cn("mt-auto", className) }, props));
|
|
105
|
+
});
|
|
106
|
+
SheetFooter.displayName = "SheetFooter";
|
|
107
|
+
export {
|
|
108
|
+
Sheet,
|
|
109
|
+
SheetClose,
|
|
110
|
+
SheetContent,
|
|
111
|
+
SheetDescription,
|
|
112
|
+
SheetFooter,
|
|
113
|
+
SheetHeader,
|
|
114
|
+
SheetTitle,
|
|
115
|
+
SheetTrigger,
|
|
116
|
+
sheetVariants
|
|
117
|
+
};
|
|
118
|
+
//# sourceMappingURL=index.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/sheet.tsx"],"sourcesContent":["\"use client\"\n\nimport { forwardRef } from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { cn } from \"@glob-ui/utils\"\nimport {\n Dialog,\n DialogTrigger,\n DialogClose,\n DialogHeader,\n DialogTitle,\n DialogDescription,\n DialogFooter,\n DialogContentBase,\n DialogCloseIcon,\n type DialogContentBaseProps,\n type DialogFooterProps,\n} from \"@glob-ui/dialog\"\n\n// A Sheet is a Dialog: same context, same scroll lock, Esc, backdrop and focus return.\nexport const Sheet = Dialog\nexport const SheetTrigger = DialogTrigger\nexport const SheetClose = DialogClose\nexport const SheetHeader = DialogHeader\nexport const SheetTitle = DialogTitle\nexport const SheetDescription = DialogDescription\n\nexport type SheetProps = React.ComponentProps<typeof Dialog>\nexport type SheetTriggerProps = React.ComponentProps<typeof DialogTrigger>\nexport type SheetCloseProps = React.ComponentProps<typeof DialogClose>\nexport type SheetHeaderProps = React.ComponentProps<typeof DialogHeader>\nexport type SheetTitleProps = React.ComponentProps<typeof DialogTitle>\nexport type SheetDescriptionProps = React.ComponentProps<typeof DialogDescription>\nexport type SheetFooterProps = DialogFooterProps\n\nconst sheetVariants = cva(\n [\n // Pinned to its edge: the native dialog margin and max sizes are reset here, the side adds the edge.\n \"m-0 h-full max-h-none w-[calc(100%-3rem)] max-w-none overflow-visible rounded-none border-glob-border bg-glob-surface p-0 text-glob-text shadow-glob-md\",\n // Slide in from its edge. @starting-style sets the start; transition-discrete keeps display alive on exit.\n \"transition-[translate,overlay,display] transition-discrete duration-300 ease-out\",\n \"backdrop:bg-glob-overlay backdrop:opacity-0 backdrop:transition-[opacity,overlay,display] backdrop:transition-discrete backdrop:duration-200\",\n \"open:backdrop:opacity-100 starting:open:backdrop:opacity-0\",\n \"motion-reduce:transition-none motion-reduce:backdrop:transition-none\",\n ],\n {\n variants: {\n side: {\n right: \"border-l inset-y-0 left-auto right-0 translate-x-full open:translate-x-0 starting:open:translate-x-full\",\n left: \"border-r inset-y-0 left-0 right-auto -translate-x-full open:translate-x-0 starting:open:-translate-x-full\",\n top: \"border-b inset-x-0 top-0 bottom-auto h-auto max-h-[85dvh] w-full -translate-y-full open:translate-y-0 starting:open:-translate-y-full\",\n bottom: \"border-t inset-x-0 top-auto bottom-0 h-auto max-h-[85dvh] w-full translate-y-full open:translate-y-0 starting:open:translate-y-full\",\n },\n // Only applies to left and right (see compoundVariants): top and bottom are full width.\n size: {\n sm: \"\",\n md: \"\",\n lg: \"\",\n },\n },\n compoundVariants: [\n { side: [\"left\", \"right\"], size: \"sm\", className: \"max-w-xs\" },\n { side: [\"left\", \"right\"], size: \"md\", className: \"max-w-sm\" },\n { side: [\"left\", \"right\"], size: \"lg\", className: \"max-w-md\" },\n ],\n defaultVariants: {\n side: \"right\",\n size: \"md\",\n },\n }\n)\n\nexport interface SheetContentProps extends DialogContentBaseProps, VariantProps<typeof sheetVariants> {\n /** Shows an X button in the top-right corner. */\n showCloseButton?: boolean\n}\n\nconst SheetContent = forwardRef<HTMLDialogElement, SheetContentProps>(\n ({ className, side, size, showCloseButton = true, children, ...props }, ref) => (\n <DialogContentBase ref={ref} className={cn(sheetVariants({ side, size, className }))} {...props}>\n <div className=\"relative flex h-full flex-col gap-4 overflow-y-auto p-6\">\n {children}\n {showCloseButton && <DialogCloseIcon />}\n </div>\n </DialogContentBase>\n )\n)\nSheetContent.displayName = \"SheetContent\"\n\nconst SheetFooter = forwardRef<HTMLDivElement, SheetFooterProps>(({ className, ...props }, ref) => (\n <DialogFooter ref={ref} className={cn(\"mt-auto\", className)} {...props} />\n))\nSheetFooter.displayName = \"SheetFooter\"\n\nexport { SheetContent, SheetFooter, sheetVariants }\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAEA,SAAS,kBAAkB;AAC3B,SAAS,WAA8B;AACvC,SAAS,UAAU;AACnB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAGK;AA+DD,SAEsB,KAFtB;AA5DC,IAAM,QAAQ;AACd,IAAM,eAAe;AACrB,IAAM,aAAa;AACnB,IAAM,cAAc;AACpB,IAAM,aAAa;AACnB,IAAM,mBAAmB;AAUhC,IAAM,gBAAgB;AAAA,EACpB;AAAA;AAAA,IAEE;AAAA;AAAA,IAEA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,MAAM;AAAA,QACJ,OAAO;AAAA,QACP,MAAM;AAAA,QACN,KAAK;AAAA,QACL,QAAQ;AAAA,MACV;AAAA;AAAA,MAEA,MAAM;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,MACN;AAAA,IACF;AAAA,IACA,kBAAkB;AAAA,MAChB,EAAE,MAAM,CAAC,QAAQ,OAAO,GAAG,MAAM,MAAM,WAAW,WAAW;AAAA,MAC7D,EAAE,MAAM,CAAC,QAAQ,OAAO,GAAG,MAAM,MAAM,WAAW,WAAW;AAAA,MAC7D,EAAE,MAAM,CAAC,QAAQ,OAAO,GAAG,MAAM,MAAM,WAAW,WAAW;AAAA,IAC/D;AAAA,IACA,iBAAiB;AAAA,MACf,MAAM;AAAA,MACN,MAAM;AAAA,IACR;AAAA,EACF;AACF;AAOA,IAAM,eAAe;AAAA,EACnB,CAAC,IAAuE,QAAK;AAA5E,iBAAE,aAAW,MAAM,MAAM,kBAAkB,MAAM,SA9EpD,IA8EG,IAA8D,kBAA9D,IAA8D,CAA5D,aAAW,QAAM,QAAM,mBAAwB;AAChD,+BAAC,kDAAkB,KAAU,WAAW,GAAG,cAAc,EAAE,MAAM,MAAM,UAAU,CAAC,CAAC,KAAO,QAAzF,EACC,+BAAC,SAAI,WAAU,2DACZ;AAAA;AAAA,MACA,mBAAmB,oBAAC,mBAAgB;AAAA,OACvC,IACF;AAAA;AAEJ;AACA,aAAa,cAAc;AAE3B,IAAM,cAAc,WAA6C,CAAC,IAAyB,QAAK;AAA9B,eAAE,YAzFpE,IAyFkE,IAAgB,kBAAhB,IAAgB,CAAd;AAClE,6BAAC,+BAAa,KAAU,WAAW,GAAG,WAAW,SAAS,KAAO,MAAO;AAAA,CACzE;AACD,YAAY,cAAc;","names":[]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,69 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@glob-ui/sheet",
|
|
3
|
-
"version": "0.
|
|
4
|
-
"
|
|
5
|
-
"
|
|
3
|
+
"version": "0.1.0",
|
|
4
|
+
"main": "./dist/index.js",
|
|
5
|
+
"module": "./dist/index.mjs",
|
|
6
|
+
"types": "./dist/index.d.ts",
|
|
7
|
+
"exports": {
|
|
8
|
+
".": {
|
|
9
|
+
"import": {
|
|
10
|
+
"types": "./dist/index.d.mts",
|
|
11
|
+
"default": "./dist/index.mjs"
|
|
12
|
+
},
|
|
13
|
+
"require": {
|
|
14
|
+
"types": "./dist/index.d.ts",
|
|
15
|
+
"default": "./dist/index.js"
|
|
16
|
+
}
|
|
17
|
+
},
|
|
18
|
+
"./package.json": "./package.json"
|
|
19
|
+
},
|
|
20
|
+
"files": [
|
|
21
|
+
"dist/",
|
|
22
|
+
"LICENSE",
|
|
23
|
+
"README.md"
|
|
24
|
+
],
|
|
25
|
+
"peerDependencies": {
|
|
26
|
+
"react": "^19"
|
|
27
|
+
},
|
|
28
|
+
"dependencies": {
|
|
29
|
+
"@glob-ui/dialog": "0.1.0",
|
|
30
|
+
"@glob-ui/utils": "0.1.0",
|
|
31
|
+
"class-variance-authority": "^0.7.1"
|
|
32
|
+
},
|
|
33
|
+
"devDependencies": {
|
|
34
|
+
"tsup": "^8.5.1"
|
|
35
|
+
},
|
|
36
|
+
"description": "A panel that slides in from an edge. It is a Dialog: same focus handling, Escape, backdrop and scroll lock.",
|
|
37
|
+
"keywords": [
|
|
38
|
+
"react",
|
|
39
|
+
"glob-ui",
|
|
40
|
+
"components",
|
|
41
|
+
"accessible",
|
|
42
|
+
"tailwind",
|
|
43
|
+
"sheet"
|
|
44
|
+
],
|
|
45
|
+
"license": "MIT",
|
|
46
|
+
"author": "Kevin Martínez E",
|
|
47
|
+
"repository": {
|
|
48
|
+
"type": "git",
|
|
49
|
+
"url": "git+https://github.com/kevin-martineze/GlobUI.git",
|
|
50
|
+
"directory": "packages/sheet"
|
|
51
|
+
},
|
|
52
|
+
"homepage": "https://github.com/kevin-martineze/GlobUI#readme",
|
|
53
|
+
"bugs": {
|
|
54
|
+
"url": "https://github.com/kevin-martineze/GlobUI/issues"
|
|
55
|
+
},
|
|
56
|
+
"publishConfig": {
|
|
57
|
+
"access": "public",
|
|
58
|
+
"provenance": true
|
|
59
|
+
},
|
|
60
|
+
"sideEffects": false,
|
|
61
|
+
"type": "commonjs",
|
|
62
|
+
"engines": {
|
|
63
|
+
"node": ">=18.18"
|
|
64
|
+
},
|
|
65
|
+
"scripts": {
|
|
66
|
+
"build": "tsup",
|
|
67
|
+
"dev": "tsup --watch --no-clean"
|
|
68
|
+
}
|
|
6
69
|
}
|