@karakuri-ui/react 0.2.3 → 0.2.4
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/README.md +0 -1
- package/dist/components/ui/accordion.d.mts +49 -0
- package/dist/components/ui/accordion.d.ts +49 -0
- package/dist/components/ui/accordion.js +220 -0
- package/dist/components/ui/accordion.js.map +1 -0
- package/dist/components/ui/accordion.mjs +181 -0
- package/dist/components/ui/accordion.mjs.map +1 -0
- package/dist/components/ui/alert.d.mts +47 -0
- package/dist/components/ui/alert.d.ts +47 -0
- package/dist/components/ui/alert.js +223 -0
- package/dist/components/ui/alert.js.map +1 -0
- package/dist/components/ui/alert.mjs +185 -0
- package/dist/components/ui/alert.mjs.map +1 -0
- package/dist/components/ui/avatar.d.mts +232 -0
- package/dist/components/ui/avatar.d.ts +232 -0
- package/dist/components/ui/avatar.js +250 -0
- package/dist/components/ui/avatar.js.map +1 -0
- package/dist/components/ui/avatar.mjs +209 -0
- package/dist/components/ui/avatar.mjs.map +1 -0
- package/dist/components/ui/badge.d.mts +31 -0
- package/dist/components/ui/badge.d.ts +31 -0
- package/dist/components/ui/badge.js +205 -0
- package/dist/components/ui/badge.js.map +1 -0
- package/dist/components/ui/badge.mjs +170 -0
- package/dist/components/ui/badge.mjs.map +1 -0
- package/dist/components/ui/breadcrumb.d.mts +57 -0
- package/dist/components/ui/breadcrumb.d.ts +57 -0
- package/dist/components/ui/breadcrumb.js +209 -0
- package/dist/components/ui/breadcrumb.js.map +1 -0
- package/dist/components/ui/breadcrumb.mjs +168 -0
- package/dist/components/ui/breadcrumb.mjs.map +1 -0
- package/dist/components/ui/button-group.d.mts +22 -0
- package/dist/components/ui/button-group.d.ts +22 -0
- package/dist/components/ui/button-group.js +107 -0
- package/dist/components/ui/button-group.js.map +1 -0
- package/dist/components/ui/button-group.mjs +72 -0
- package/dist/components/ui/button-group.mjs.map +1 -0
- package/dist/components/ui/button.d.mts +31 -0
- package/dist/components/ui/button.d.ts +31 -0
- package/dist/components/ui/button.js +176 -0
- package/dist/components/ui/button.js.map +1 -0
- package/dist/components/ui/button.mjs +141 -0
- package/dist/components/ui/button.mjs.map +1 -0
- package/dist/components/ui/card.d.mts +77 -0
- package/dist/components/ui/card.d.ts +77 -0
- package/dist/components/ui/card.js +370 -0
- package/dist/components/ui/card.js.map +1 -0
- package/dist/components/ui/card.mjs +328 -0
- package/dist/components/ui/card.mjs.map +1 -0
- package/dist/{chart.js → components/ui/chart.js} +29 -39
- package/dist/components/ui/chart.js.map +1 -0
- package/dist/{chart.mjs → components/ui/chart.mjs} +21 -31
- package/dist/components/ui/chart.mjs.map +1 -0
- package/dist/components/ui/checkbox.d.mts +24 -0
- package/dist/components/ui/checkbox.d.ts +24 -0
- package/dist/components/ui/checkbox.js +173 -0
- package/dist/components/ui/checkbox.js.map +1 -0
- package/dist/components/ui/checkbox.mjs +138 -0
- package/dist/components/ui/checkbox.mjs.map +1 -0
- package/dist/components/ui/divider.d.mts +27 -0
- package/dist/components/ui/divider.d.ts +27 -0
- package/dist/components/ui/divider.js +147 -0
- package/dist/components/ui/divider.js.map +1 -0
- package/dist/components/ui/divider.mjs +112 -0
- package/dist/components/ui/divider.mjs.map +1 -0
- package/dist/components/ui/drawer.d.mts +51 -0
- package/dist/components/ui/drawer.d.ts +51 -0
- package/dist/components/ui/drawer.js +225 -0
- package/dist/components/ui/drawer.js.map +1 -0
- package/dist/components/ui/drawer.mjs +178 -0
- package/dist/components/ui/drawer.mjs.map +1 -0
- package/dist/components/ui/dropdown.d.mts +59 -0
- package/dist/components/ui/dropdown.d.ts +59 -0
- package/dist/components/ui/dropdown.js +310 -0
- package/dist/components/ui/dropdown.js.map +1 -0
- package/dist/components/ui/dropdown.mjs +263 -0
- package/dist/components/ui/dropdown.mjs.map +1 -0
- package/dist/components/ui/field.d.mts +33 -0
- package/dist/components/ui/field.d.ts +33 -0
- package/dist/components/ui/field.js +146 -0
- package/dist/components/ui/field.js.map +1 -0
- package/dist/components/ui/field.mjs +108 -0
- package/dist/components/ui/field.mjs.map +1 -0
- package/dist/components/ui/icon-button.d.mts +20 -0
- package/dist/components/ui/icon-button.d.ts +20 -0
- package/dist/components/ui/icon-button.js +147 -0
- package/dist/components/ui/icon-button.js.map +1 -0
- package/dist/components/ui/icon-button.mjs +112 -0
- package/dist/components/ui/icon-button.mjs.map +1 -0
- package/dist/components/ui/index.d.mts +55 -0
- package/dist/components/ui/index.d.ts +55 -0
- package/dist/components/ui/index.js +476 -0
- package/dist/components/ui/index.js.map +1 -0
- package/dist/components/ui/index.mjs +246 -0
- package/dist/components/ui/index.mjs.map +1 -0
- package/dist/components/ui/input.d.mts +20 -0
- package/dist/components/ui/input.d.ts +20 -0
- package/dist/components/ui/input.js +250 -0
- package/dist/components/ui/input.js.map +1 -0
- package/dist/components/ui/input.mjs +215 -0
- package/dist/components/ui/input.mjs.map +1 -0
- package/dist/components/ui/metric-card.d.mts +53 -0
- package/dist/components/ui/metric-card.d.ts +53 -0
- package/dist/components/ui/metric-card.js +258 -0
- package/dist/components/ui/metric-card.js.map +1 -0
- package/dist/components/ui/metric-card.mjs +217 -0
- package/dist/components/ui/metric-card.mjs.map +1 -0
- package/dist/components/ui/modal.d.mts +77 -0
- package/dist/components/ui/modal.d.ts +77 -0
- package/dist/components/ui/modal.js +396 -0
- package/dist/components/ui/modal.js.map +1 -0
- package/dist/components/ui/modal.mjs +338 -0
- package/dist/components/ui/modal.mjs.map +1 -0
- package/dist/components/ui/navigation-menu.d.mts +139 -0
- package/dist/components/ui/navigation-menu.d.ts +139 -0
- package/dist/components/ui/navigation-menu.js +531 -0
- package/dist/components/ui/navigation-menu.js.map +1 -0
- package/dist/components/ui/navigation-menu.mjs +488 -0
- package/dist/components/ui/navigation-menu.mjs.map +1 -0
- package/dist/components/ui/pagination.d.mts +130 -0
- package/dist/components/ui/pagination.d.ts +130 -0
- package/dist/components/ui/pagination.js +495 -0
- package/dist/components/ui/pagination.js.map +1 -0
- package/dist/components/ui/pagination.mjs +449 -0
- package/dist/components/ui/pagination.mjs.map +1 -0
- package/dist/components/ui/popover.d.mts +41 -0
- package/dist/components/ui/popover.d.ts +41 -0
- package/dist/components/ui/popover.js +175 -0
- package/dist/components/ui/popover.js.map +1 -0
- package/dist/components/ui/popover.mjs +133 -0
- package/dist/components/ui/popover.mjs.map +1 -0
- package/dist/components/ui/progress.d.mts +35 -0
- package/dist/components/ui/progress.d.ts +35 -0
- package/dist/components/ui/progress.js +194 -0
- package/dist/components/ui/progress.js.map +1 -0
- package/dist/components/ui/progress.mjs +159 -0
- package/dist/components/ui/progress.mjs.map +1 -0
- package/dist/components/ui/radio-group.d.mts +40 -0
- package/dist/components/ui/radio-group.d.ts +40 -0
- package/dist/components/ui/radio-group.js +177 -0
- package/dist/components/ui/radio-group.js.map +1 -0
- package/dist/components/ui/radio-group.mjs +140 -0
- package/dist/components/ui/radio-group.mjs.map +1 -0
- package/dist/components/ui/segmented.d.mts +30 -0
- package/dist/components/ui/segmented.d.ts +30 -0
- package/dist/components/ui/segmented.js +241 -0
- package/dist/components/ui/segmented.js.map +1 -0
- package/dist/components/ui/segmented.mjs +204 -0
- package/dist/components/ui/segmented.mjs.map +1 -0
- package/dist/components/ui/select.d.mts +31 -0
- package/dist/components/ui/select.d.ts +31 -0
- package/dist/components/ui/select.js +317 -0
- package/dist/components/ui/select.js.map +1 -0
- package/dist/components/ui/select.mjs +276 -0
- package/dist/components/ui/select.mjs.map +1 -0
- package/dist/components/ui/skeleton.d.mts +26 -0
- package/dist/components/ui/skeleton.d.ts +26 -0
- package/dist/components/ui/skeleton.js +144 -0
- package/dist/components/ui/skeleton.js.map +1 -0
- package/dist/components/ui/skeleton.mjs +109 -0
- package/dist/components/ui/skeleton.mjs.map +1 -0
- package/dist/components/ui/slider.d.mts +38 -0
- package/dist/components/ui/slider.d.ts +38 -0
- package/dist/components/ui/slider.js +180 -0
- package/dist/components/ui/slider.js.map +1 -0
- package/dist/components/ui/slider.mjs +145 -0
- package/dist/components/ui/slider.mjs.map +1 -0
- package/dist/components/ui/spinner.d.mts +23 -0
- package/dist/components/ui/spinner.d.ts +23 -0
- package/dist/components/ui/spinner.js +471 -0
- package/dist/components/ui/spinner.js.map +1 -0
- package/dist/components/ui/spinner.mjs +436 -0
- package/dist/components/ui/spinner.mjs.map +1 -0
- package/dist/components/ui/switch.d.mts +22 -0
- package/dist/components/ui/switch.d.ts +22 -0
- package/dist/components/ui/switch.js +173 -0
- package/dist/components/ui/switch.js.map +1 -0
- package/dist/components/ui/switch.mjs +138 -0
- package/dist/components/ui/switch.mjs.map +1 -0
- package/dist/components/ui/table.d.mts +74 -0
- package/dist/components/ui/table.d.ts +74 -0
- package/dist/components/ui/table.js +240 -0
- package/dist/components/ui/table.js.map +1 -0
- package/dist/components/ui/table.mjs +199 -0
- package/dist/components/ui/table.mjs.map +1 -0
- package/dist/components/ui/tabs.d.mts +40 -0
- package/dist/components/ui/tabs.d.ts +40 -0
- package/dist/components/ui/tabs.js +238 -0
- package/dist/components/ui/tabs.js.map +1 -0
- package/dist/components/ui/tabs.mjs +199 -0
- package/dist/components/ui/tabs.mjs.map +1 -0
- package/dist/components/ui/textarea.d.mts +19 -0
- package/dist/components/ui/textarea.d.ts +19 -0
- package/dist/components/ui/textarea.js +181 -0
- package/dist/components/ui/textarea.js.map +1 -0
- package/dist/components/ui/textarea.mjs +146 -0
- package/dist/components/ui/textarea.mjs.map +1 -0
- package/dist/components/ui/toast.d.mts +93 -0
- package/dist/components/ui/toast.d.ts +93 -0
- package/dist/components/ui/toast.js +429 -0
- package/dist/components/ui/toast.js.map +1 -0
- package/dist/components/ui/toast.mjs +393 -0
- package/dist/components/ui/toast.mjs.map +1 -0
- package/dist/components/ui/toggle-group.d.mts +47 -0
- package/dist/components/ui/toggle-group.d.ts +47 -0
- package/dist/components/ui/toggle-group.js +186 -0
- package/dist/components/ui/toggle-group.js.map +1 -0
- package/dist/components/ui/toggle-group.mjs +149 -0
- package/dist/components/ui/toggle-group.mjs.map +1 -0
- package/dist/components/ui/toggle.d.mts +19 -0
- package/dist/components/ui/toggle.d.ts +19 -0
- package/dist/components/ui/toggle.js +194 -0
- package/dist/components/ui/toggle.js.map +1 -0
- package/dist/components/ui/toggle.mjs +159 -0
- package/dist/components/ui/toggle.mjs.map +1 -0
- package/dist/components/ui/tooltip.d.mts +37 -0
- package/dist/components/ui/tooltip.d.ts +37 -0
- package/dist/components/ui/tooltip.js +137 -0
- package/dist/components/ui/tooltip.js.map +1 -0
- package/dist/components/ui/tooltip.mjs +96 -0
- package/dist/components/ui/tooltip.mjs.map +1 -0
- package/dist/lib/utils.d.mts +10 -0
- package/dist/lib/utils.d.ts +10 -0
- package/dist/lib/utils.js +33 -0
- package/dist/lib/utils.js.map +1 -0
- package/dist/lib/utils.mjs +9 -0
- package/dist/lib/utils.mjs.map +1 -0
- package/package.json +11 -11
- package/dist/chart.js.map +0 -1
- package/dist/chart.mjs.map +0 -1
- package/dist/index.d.mts +0 -1636
- package/dist/index.d.ts +0 -1636
- package/dist/index.js +0 -7291
- package/dist/index.js.map +0 -1
- package/dist/index.mjs +0 -7048
- package/dist/index.mjs.map +0 -1
- /package/dist/{chart.d.mts → components/ui/chart.d.mts} +0 -0
- /package/dist/{chart.d.ts → components/ui/chart.d.ts} +0 -0
|
@@ -0,0 +1,225 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
"use client";
|
|
3
|
+
var __create = Object.create;
|
|
4
|
+
var __defProp = Object.defineProperty;
|
|
5
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
6
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
7
|
+
var __getProtoOf = Object.getPrototypeOf;
|
|
8
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
9
|
+
var __export = (target, all) => {
|
|
10
|
+
for (var name in all)
|
|
11
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
12
|
+
};
|
|
13
|
+
var __copyProps = (to, from, except, desc) => {
|
|
14
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
15
|
+
for (let key of __getOwnPropNames(from))
|
|
16
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
17
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
18
|
+
}
|
|
19
|
+
return to;
|
|
20
|
+
};
|
|
21
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
22
|
+
// If the importer is in node compatibility mode or this is not an ESM
|
|
23
|
+
// file that has been converted to a CommonJS file using a Babel-
|
|
24
|
+
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
25
|
+
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
26
|
+
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
27
|
+
mod
|
|
28
|
+
));
|
|
29
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
30
|
+
var drawer_exports = {};
|
|
31
|
+
__export(drawer_exports, {
|
|
32
|
+
Drawer: () => Drawer,
|
|
33
|
+
DrawerBody: () => DrawerBody,
|
|
34
|
+
DrawerClose: () => DrawerClose,
|
|
35
|
+
DrawerContent: () => DrawerContent,
|
|
36
|
+
DrawerDescription: () => DrawerDescription,
|
|
37
|
+
DrawerFooter: () => DrawerFooter,
|
|
38
|
+
DrawerHeader: () => DrawerHeader,
|
|
39
|
+
DrawerOverlay: () => DrawerOverlay,
|
|
40
|
+
DrawerPortal: () => DrawerPortal,
|
|
41
|
+
DrawerRoot: () => DrawerRoot,
|
|
42
|
+
DrawerTitle: () => DrawerTitle,
|
|
43
|
+
DrawerTrigger: () => DrawerTrigger,
|
|
44
|
+
drawerSizeHorizontal: () => drawerSizeHorizontal,
|
|
45
|
+
drawerSizeVertical: () => drawerSizeVertical
|
|
46
|
+
});
|
|
47
|
+
module.exports = __toCommonJS(drawer_exports);
|
|
48
|
+
var React = __toESM(require("react"));
|
|
49
|
+
var DialogPrimitive = __toESM(require("@radix-ui/react-dialog"));
|
|
50
|
+
var import_class_variance_authority = require("class-variance-authority");
|
|
51
|
+
var import_utils = require("../../lib/utils");
|
|
52
|
+
const DefaultCloseIcon = ({ className }) => /* @__PURE__ */ React.createElement(
|
|
53
|
+
"svg",
|
|
54
|
+
{
|
|
55
|
+
className,
|
|
56
|
+
fill: "none",
|
|
57
|
+
viewBox: "0 0 24 24",
|
|
58
|
+
stroke: "currentColor",
|
|
59
|
+
strokeWidth: 2,
|
|
60
|
+
"aria-hidden": "true"
|
|
61
|
+
},
|
|
62
|
+
/* @__PURE__ */ React.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M6 18L18 6M6 6l12 12" })
|
|
63
|
+
);
|
|
64
|
+
const ANIMATION_CLASSES = {
|
|
65
|
+
right: "data-[state=open]:animate-drawer-right-enter data-[state=closed]:animate-drawer-right-exit",
|
|
66
|
+
left: "data-[state=open]:animate-drawer-left-enter data-[state=closed]:animate-drawer-left-exit",
|
|
67
|
+
top: "data-[state=open]:animate-drawer-top-enter data-[state=closed]:animate-drawer-top-exit",
|
|
68
|
+
bottom: "data-[state=open]:animate-drawer-bottom-enter data-[state=closed]:animate-drawer-bottom-exit"
|
|
69
|
+
};
|
|
70
|
+
const drawerSizeHorizontal = (0, import_class_variance_authority.cva)("", {
|
|
71
|
+
variants: {
|
|
72
|
+
size: {
|
|
73
|
+
sm: "w-[320px]",
|
|
74
|
+
md: "w-[400px]",
|
|
75
|
+
lg: "w-[480px]",
|
|
76
|
+
xl: "w-[640px]",
|
|
77
|
+
full: "w-full"
|
|
78
|
+
}
|
|
79
|
+
},
|
|
80
|
+
defaultVariants: { size: "md" }
|
|
81
|
+
});
|
|
82
|
+
const drawerSizeVertical = (0, import_class_variance_authority.cva)("", {
|
|
83
|
+
variants: {
|
|
84
|
+
size: {
|
|
85
|
+
sm: "h-[320px]",
|
|
86
|
+
md: "h-[400px]",
|
|
87
|
+
lg: "h-[480px]",
|
|
88
|
+
xl: "h-[640px]",
|
|
89
|
+
full: "h-full"
|
|
90
|
+
}
|
|
91
|
+
},
|
|
92
|
+
defaultVariants: { size: "md" }
|
|
93
|
+
});
|
|
94
|
+
function DrawerRoot(props) {
|
|
95
|
+
return /* @__PURE__ */ React.createElement(DialogPrimitive.Root, { ...props });
|
|
96
|
+
}
|
|
97
|
+
const DrawerTrigger = DialogPrimitive.Trigger;
|
|
98
|
+
const DrawerPortal = DialogPrimitive.Portal;
|
|
99
|
+
const DrawerClose = DialogPrimitive.Close;
|
|
100
|
+
const DrawerOverlay = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React.createElement(
|
|
101
|
+
DialogPrimitive.Overlay,
|
|
102
|
+
{
|
|
103
|
+
ref,
|
|
104
|
+
className: (0, import_utils.cn)(
|
|
105
|
+
"fixed inset-0 z-overlay bg-black/50",
|
|
106
|
+
"data-[state=open]:animate-modal-overlay-enter data-[state=closed]:animate-modal-overlay-exit",
|
|
107
|
+
className
|
|
108
|
+
),
|
|
109
|
+
...props
|
|
110
|
+
}
|
|
111
|
+
));
|
|
112
|
+
DrawerOverlay.displayName = "DrawerOverlay";
|
|
113
|
+
const SIDE_POSITION = {
|
|
114
|
+
right: "inset-y-0 right-0",
|
|
115
|
+
left: "inset-y-0 left-0",
|
|
116
|
+
top: "inset-x-0 top-0",
|
|
117
|
+
bottom: "inset-x-0 bottom-0"
|
|
118
|
+
};
|
|
119
|
+
const DrawerContent = React.forwardRef(({ className, children, side = "right", size = "md", showCloseButton = true, closeIcon, ...props }, ref) => {
|
|
120
|
+
const isHorizontal = side === "left" || side === "right";
|
|
121
|
+
const sizeClass = isHorizontal ? drawerSizeHorizontal({ size }) : drawerSizeVertical({ size });
|
|
122
|
+
return /* @__PURE__ */ React.createElement(DrawerPortal, null, /* @__PURE__ */ React.createElement(DrawerOverlay, null), /* @__PURE__ */ React.createElement(
|
|
123
|
+
DialogPrimitive.Content,
|
|
124
|
+
{
|
|
125
|
+
ref,
|
|
126
|
+
className: (0, import_utils.cn)(
|
|
127
|
+
"fixed z-modal flex flex-col bg-background text-foreground shadow-xl",
|
|
128
|
+
"focus:outline-none",
|
|
129
|
+
SIDE_POSITION[side],
|
|
130
|
+
isHorizontal ? "max-w-full h-full" : "max-h-full w-full",
|
|
131
|
+
sizeClass,
|
|
132
|
+
ANIMATION_CLASSES[side],
|
|
133
|
+
className
|
|
134
|
+
),
|
|
135
|
+
...props
|
|
136
|
+
},
|
|
137
|
+
children,
|
|
138
|
+
showCloseButton && /* @__PURE__ */ React.createElement(DialogPrimitive.Close, { className: (0, import_utils.cn)(
|
|
139
|
+
"absolute right-4 top-4 rounded-md p-1",
|
|
140
|
+
"text-text-muted hover:text-foreground",
|
|
141
|
+
"transition-colors duration-fast",
|
|
142
|
+
"focus-visible:focus-ring focus-visible:outline-none",
|
|
143
|
+
"disabled:pointer-events-none"
|
|
144
|
+
) }, closeIcon || /* @__PURE__ */ React.createElement(DefaultCloseIcon, { className: "icon-sm" }), /* @__PURE__ */ React.createElement("span", { className: "sr-only" }, "Close"))
|
|
145
|
+
));
|
|
146
|
+
});
|
|
147
|
+
DrawerContent.displayName = "DrawerContent";
|
|
148
|
+
const DrawerHeader = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React.createElement(
|
|
149
|
+
"div",
|
|
150
|
+
{
|
|
151
|
+
ref,
|
|
152
|
+
className: (0, import_utils.cn)("flex flex-col gap-1.5 p-6 pb-0", className),
|
|
153
|
+
...props
|
|
154
|
+
}
|
|
155
|
+
));
|
|
156
|
+
DrawerHeader.displayName = "DrawerHeader";
|
|
157
|
+
const DrawerTitle = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React.createElement(
|
|
158
|
+
DialogPrimitive.Title,
|
|
159
|
+
{
|
|
160
|
+
ref,
|
|
161
|
+
className: (0, import_utils.cn)("text-lg font-semibold text-foreground", className),
|
|
162
|
+
...props
|
|
163
|
+
}
|
|
164
|
+
));
|
|
165
|
+
DrawerTitle.displayName = "DrawerTitle";
|
|
166
|
+
const DrawerDescription = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React.createElement(
|
|
167
|
+
DialogPrimitive.Description,
|
|
168
|
+
{
|
|
169
|
+
ref,
|
|
170
|
+
className: (0, import_utils.cn)("text-md text-text-muted", className),
|
|
171
|
+
...props
|
|
172
|
+
}
|
|
173
|
+
));
|
|
174
|
+
DrawerDescription.displayName = "DrawerDescription";
|
|
175
|
+
const DrawerBody = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React.createElement(
|
|
176
|
+
"div",
|
|
177
|
+
{
|
|
178
|
+
ref,
|
|
179
|
+
className: (0, import_utils.cn)("flex-1 overflow-y-auto p-6", className),
|
|
180
|
+
...props
|
|
181
|
+
}
|
|
182
|
+
));
|
|
183
|
+
DrawerBody.displayName = "DrawerBody";
|
|
184
|
+
const DrawerFooter = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React.createElement(
|
|
185
|
+
"div",
|
|
186
|
+
{
|
|
187
|
+
ref,
|
|
188
|
+
className: (0, import_utils.cn)(
|
|
189
|
+
"flex items-center justify-end gap-3 p-6 pt-0",
|
|
190
|
+
className
|
|
191
|
+
),
|
|
192
|
+
...props
|
|
193
|
+
}
|
|
194
|
+
));
|
|
195
|
+
DrawerFooter.displayName = "DrawerFooter";
|
|
196
|
+
const Drawer = Object.assign(DrawerRoot, {
|
|
197
|
+
Trigger: DrawerTrigger,
|
|
198
|
+
Portal: DrawerPortal,
|
|
199
|
+
Overlay: DrawerOverlay,
|
|
200
|
+
Content: DrawerContent,
|
|
201
|
+
Header: DrawerHeader,
|
|
202
|
+
Title: DrawerTitle,
|
|
203
|
+
Description: DrawerDescription,
|
|
204
|
+
Body: DrawerBody,
|
|
205
|
+
Footer: DrawerFooter,
|
|
206
|
+
Close: DrawerClose
|
|
207
|
+
});
|
|
208
|
+
// Annotate the CommonJS export names for ESM import in node:
|
|
209
|
+
0 && (module.exports = {
|
|
210
|
+
Drawer,
|
|
211
|
+
DrawerBody,
|
|
212
|
+
DrawerClose,
|
|
213
|
+
DrawerContent,
|
|
214
|
+
DrawerDescription,
|
|
215
|
+
DrawerFooter,
|
|
216
|
+
DrawerHeader,
|
|
217
|
+
DrawerOverlay,
|
|
218
|
+
DrawerPortal,
|
|
219
|
+
DrawerRoot,
|
|
220
|
+
DrawerTitle,
|
|
221
|
+
DrawerTrigger,
|
|
222
|
+
drawerSizeHorizontal,
|
|
223
|
+
drawerSizeVertical
|
|
224
|
+
});
|
|
225
|
+
//# sourceMappingURL=drawer.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../../src/components/ui/drawer.tsx"],"sourcesContent":["'use client'\n\nimport * as React from 'react'\nimport * as DialogPrimitive from '@radix-ui/react-dialog'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { cn } from '../../lib/utils'\n\n// ─── Default Close Icon (built-in, no external dependency) ──\nconst DefaultCloseIcon = ({ className }: { className?: string }) => (\n <svg\n className={className}\n fill=\"none\"\n viewBox=\"0 0 24 24\"\n stroke=\"currentColor\"\n strokeWidth={2}\n aria-hidden=\"true\"\n >\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" d=\"M6 18L18 6M6 6l12 12\" />\n </svg>\n)\n\n// ─── Types ──────────────────────────────────────────────────\nexport type DrawerSide = 'left' | 'right' | 'top' | 'bottom'\nexport type DrawerSize = 'sm' | 'md' | 'lg' | 'xl' | 'full'\n\n// ─── Animation class mapping (static strings for Tailwind scanner) ──\nconst ANIMATION_CLASSES: Record<DrawerSide, string> = {\n right: 'data-[state=open]:animate-drawer-right-enter data-[state=closed]:animate-drawer-right-exit',\n left: 'data-[state=open]:animate-drawer-left-enter data-[state=closed]:animate-drawer-left-exit',\n top: 'data-[state=open]:animate-drawer-top-enter data-[state=closed]:animate-drawer-top-exit',\n bottom: 'data-[state=open]:animate-drawer-bottom-enter data-[state=closed]:animate-drawer-bottom-exit',\n}\n\n// ─── Size variants ──────────────────────────────────────────\nconst drawerSizeHorizontal = cva('', {\n variants: {\n size: {\n sm: 'w-[320px]',\n md: 'w-[400px]',\n lg: 'w-[480px]',\n xl: 'w-[640px]',\n full: 'w-full',\n },\n },\n defaultVariants: { size: 'md' },\n})\n\nconst drawerSizeVertical = cva('', {\n variants: {\n size: {\n sm: 'h-[320px]',\n md: 'h-[400px]',\n lg: 'h-[480px]',\n xl: 'h-[640px]',\n full: 'h-full',\n },\n },\n defaultVariants: { size: 'md' },\n})\n\n// ═══════════════════════════════════════════════════════════════\n// Drawer\n// ═══════════════════════════════════════════════════════════════\n\n// ─── Drawer (Root) — wrapper to avoid Object.assign mutating DialogPrimitive.Root ──\nfunction DrawerRoot(props: React.ComponentPropsWithoutRef<typeof DialogPrimitive.Root>) {\n return <DialogPrimitive.Root {...props} />\n}\n\n// ─── DrawerTrigger ──────────────────────────────────────────\nconst DrawerTrigger = DialogPrimitive.Trigger\n\n// ─── DrawerPortal ───────────────────────────────────────────\nconst DrawerPortal = DialogPrimitive.Portal\n\n// ─── DrawerClose ────────────────────────────────────────────\nconst DrawerClose = DialogPrimitive.Close\n\n// ─── DrawerOverlay ──────────────────────────────────────────\nconst DrawerOverlay = React.forwardRef<\n React.ElementRef<typeof DialogPrimitive.Overlay>,\n React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>\n>(({ className, ...props }, ref) => (\n <DialogPrimitive.Overlay\n ref={ref}\n className={cn(\n 'fixed inset-0 z-overlay bg-black/50',\n 'data-[state=open]:animate-modal-overlay-enter data-[state=closed]:animate-modal-overlay-exit',\n className\n )}\n {...props}\n />\n))\nDrawerOverlay.displayName = 'DrawerOverlay'\n\n// ─── DrawerContent ──────────────────────────────────────────\nexport interface DrawerContentProps\n extends Omit<React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>, 'children'> {\n /** Side from which the drawer slides in */\n side?: DrawerSide\n /** Panel size (width for left/right, height for top/bottom) */\n size?: DrawerSize\n /** Show built-in close button */\n showCloseButton?: boolean\n /** Custom close icon (replaces default X) */\n closeIcon?: React.ReactNode\n children?: React.ReactNode\n}\n\nconst SIDE_POSITION: Record<DrawerSide, string> = {\n right: 'inset-y-0 right-0',\n left: 'inset-y-0 left-0',\n top: 'inset-x-0 top-0',\n bottom: 'inset-x-0 bottom-0',\n}\n\nconst DrawerContent = React.forwardRef<\n React.ElementRef<typeof DialogPrimitive.Content>,\n DrawerContentProps\n>(({ className, children, side = 'right', size = 'md', showCloseButton = true, closeIcon, ...props }, ref) => {\n const isHorizontal = side === 'left' || side === 'right'\n const sizeClass = isHorizontal\n ? drawerSizeHorizontal({ size })\n : drawerSizeVertical({ size })\n\n return (\n <DrawerPortal>\n <DrawerOverlay />\n <DialogPrimitive.Content\n ref={ref}\n className={cn(\n 'fixed z-modal flex flex-col bg-background text-foreground shadow-xl',\n 'focus:outline-none',\n SIDE_POSITION[side],\n isHorizontal ? 'max-w-full h-full' : 'max-h-full w-full',\n sizeClass,\n ANIMATION_CLASSES[side],\n className,\n )}\n {...props}\n >\n {children}\n {showCloseButton && (\n <DialogPrimitive.Close className={cn(\n 'absolute right-4 top-4 rounded-md p-1',\n 'text-text-muted hover:text-foreground',\n 'transition-colors duration-fast',\n 'focus-visible:focus-ring focus-visible:outline-none',\n 'disabled:pointer-events-none'\n )}>\n {closeIcon || <DefaultCloseIcon className=\"icon-sm\" />}\n <span className=\"sr-only\">Close</span>\n </DialogPrimitive.Close>\n )}\n </DialogPrimitive.Content>\n </DrawerPortal>\n )\n})\nDrawerContent.displayName = 'DrawerContent'\n\n// ─── DrawerHeader ───────────────────────────────────────────\nconst DrawerHeader = React.forwardRef<\n HTMLDivElement,\n React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n <div\n ref={ref}\n className={cn('flex flex-col gap-1.5 p-6 pb-0', className)}\n {...props}\n />\n))\nDrawerHeader.displayName = 'DrawerHeader'\n\n// ─── DrawerTitle ────────────────────────────────────────────\nconst DrawerTitle = React.forwardRef<\n React.ElementRef<typeof DialogPrimitive.Title>,\n React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>\n>(({ className, ...props }, ref) => (\n <DialogPrimitive.Title\n ref={ref}\n className={cn('text-lg font-semibold text-foreground', className)}\n {...props}\n />\n))\nDrawerTitle.displayName = 'DrawerTitle'\n\n// ─── DrawerDescription ─────────────────────────────────────\nconst DrawerDescription = React.forwardRef<\n React.ElementRef<typeof DialogPrimitive.Description>,\n React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>\n>(({ className, ...props }, ref) => (\n <DialogPrimitive.Description\n ref={ref}\n className={cn('text-md text-text-muted', className)}\n {...props}\n />\n))\nDrawerDescription.displayName = 'DrawerDescription'\n\n// ─── DrawerBody ─────────────────────────────────────────────\nconst DrawerBody = React.forwardRef<\n HTMLDivElement,\n React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n <div\n ref={ref}\n className={cn('flex-1 overflow-y-auto p-6', className)}\n {...props}\n />\n))\nDrawerBody.displayName = 'DrawerBody'\n\n// ─── DrawerFooter ───────────────────────────────────────────\nconst DrawerFooter = React.forwardRef<\n HTMLDivElement,\n React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n <div\n ref={ref}\n className={cn(\n 'flex items-center justify-end gap-3 p-6 pt-0',\n className\n )}\n {...props}\n />\n))\nDrawerFooter.displayName = 'DrawerFooter'\n\n// ─── Namespace: Drawer ──────────────────────────────────────\nconst Drawer = Object.assign(DrawerRoot, {\n Trigger: DrawerTrigger,\n Portal: DrawerPortal,\n Overlay: DrawerOverlay,\n Content: DrawerContent,\n Header: DrawerHeader,\n Title: DrawerTitle,\n Description: DrawerDescription,\n Body: DrawerBody,\n Footer: DrawerFooter,\n Close: DrawerClose,\n})\n\n// eslint-disable-next-line @typescript-eslint/no-namespace\nnamespace Drawer {\n export type ContentProps = DrawerContentProps\n}\n\n// ─── Exports ────────────────────────────────────────────────\nexport {\n Drawer,\n DrawerRoot,\n DrawerTrigger,\n DrawerPortal,\n DrawerOverlay,\n DrawerContent,\n DrawerHeader,\n DrawerTitle,\n DrawerDescription,\n DrawerBody,\n DrawerFooter,\n DrawerClose,\n drawerSizeHorizontal,\n drawerSizeVertical,\n}\n"],"mappings":"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","names":[]}
|
|
@@ -0,0 +1,178 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import * as React from "react";
|
|
3
|
+
import * as DialogPrimitive from "@radix-ui/react-dialog";
|
|
4
|
+
import { cva } from "class-variance-authority";
|
|
5
|
+
import { cn } from "../../lib/utils";
|
|
6
|
+
const DefaultCloseIcon = ({ className }) => /* @__PURE__ */ React.createElement(
|
|
7
|
+
"svg",
|
|
8
|
+
{
|
|
9
|
+
className,
|
|
10
|
+
fill: "none",
|
|
11
|
+
viewBox: "0 0 24 24",
|
|
12
|
+
stroke: "currentColor",
|
|
13
|
+
strokeWidth: 2,
|
|
14
|
+
"aria-hidden": "true"
|
|
15
|
+
},
|
|
16
|
+
/* @__PURE__ */ React.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M6 18L18 6M6 6l12 12" })
|
|
17
|
+
);
|
|
18
|
+
const ANIMATION_CLASSES = {
|
|
19
|
+
right: "data-[state=open]:animate-drawer-right-enter data-[state=closed]:animate-drawer-right-exit",
|
|
20
|
+
left: "data-[state=open]:animate-drawer-left-enter data-[state=closed]:animate-drawer-left-exit",
|
|
21
|
+
top: "data-[state=open]:animate-drawer-top-enter data-[state=closed]:animate-drawer-top-exit",
|
|
22
|
+
bottom: "data-[state=open]:animate-drawer-bottom-enter data-[state=closed]:animate-drawer-bottom-exit"
|
|
23
|
+
};
|
|
24
|
+
const drawerSizeHorizontal = cva("", {
|
|
25
|
+
variants: {
|
|
26
|
+
size: {
|
|
27
|
+
sm: "w-[320px]",
|
|
28
|
+
md: "w-[400px]",
|
|
29
|
+
lg: "w-[480px]",
|
|
30
|
+
xl: "w-[640px]",
|
|
31
|
+
full: "w-full"
|
|
32
|
+
}
|
|
33
|
+
},
|
|
34
|
+
defaultVariants: { size: "md" }
|
|
35
|
+
});
|
|
36
|
+
const drawerSizeVertical = cva("", {
|
|
37
|
+
variants: {
|
|
38
|
+
size: {
|
|
39
|
+
sm: "h-[320px]",
|
|
40
|
+
md: "h-[400px]",
|
|
41
|
+
lg: "h-[480px]",
|
|
42
|
+
xl: "h-[640px]",
|
|
43
|
+
full: "h-full"
|
|
44
|
+
}
|
|
45
|
+
},
|
|
46
|
+
defaultVariants: { size: "md" }
|
|
47
|
+
});
|
|
48
|
+
function DrawerRoot(props) {
|
|
49
|
+
return /* @__PURE__ */ React.createElement(DialogPrimitive.Root, { ...props });
|
|
50
|
+
}
|
|
51
|
+
const DrawerTrigger = DialogPrimitive.Trigger;
|
|
52
|
+
const DrawerPortal = DialogPrimitive.Portal;
|
|
53
|
+
const DrawerClose = DialogPrimitive.Close;
|
|
54
|
+
const DrawerOverlay = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React.createElement(
|
|
55
|
+
DialogPrimitive.Overlay,
|
|
56
|
+
{
|
|
57
|
+
ref,
|
|
58
|
+
className: cn(
|
|
59
|
+
"fixed inset-0 z-overlay bg-black/50",
|
|
60
|
+
"data-[state=open]:animate-modal-overlay-enter data-[state=closed]:animate-modal-overlay-exit",
|
|
61
|
+
className
|
|
62
|
+
),
|
|
63
|
+
...props
|
|
64
|
+
}
|
|
65
|
+
));
|
|
66
|
+
DrawerOverlay.displayName = "DrawerOverlay";
|
|
67
|
+
const SIDE_POSITION = {
|
|
68
|
+
right: "inset-y-0 right-0",
|
|
69
|
+
left: "inset-y-0 left-0",
|
|
70
|
+
top: "inset-x-0 top-0",
|
|
71
|
+
bottom: "inset-x-0 bottom-0"
|
|
72
|
+
};
|
|
73
|
+
const DrawerContent = React.forwardRef(({ className, children, side = "right", size = "md", showCloseButton = true, closeIcon, ...props }, ref) => {
|
|
74
|
+
const isHorizontal = side === "left" || side === "right";
|
|
75
|
+
const sizeClass = isHorizontal ? drawerSizeHorizontal({ size }) : drawerSizeVertical({ size });
|
|
76
|
+
return /* @__PURE__ */ React.createElement(DrawerPortal, null, /* @__PURE__ */ React.createElement(DrawerOverlay, null), /* @__PURE__ */ React.createElement(
|
|
77
|
+
DialogPrimitive.Content,
|
|
78
|
+
{
|
|
79
|
+
ref,
|
|
80
|
+
className: cn(
|
|
81
|
+
"fixed z-modal flex flex-col bg-background text-foreground shadow-xl",
|
|
82
|
+
"focus:outline-none",
|
|
83
|
+
SIDE_POSITION[side],
|
|
84
|
+
isHorizontal ? "max-w-full h-full" : "max-h-full w-full",
|
|
85
|
+
sizeClass,
|
|
86
|
+
ANIMATION_CLASSES[side],
|
|
87
|
+
className
|
|
88
|
+
),
|
|
89
|
+
...props
|
|
90
|
+
},
|
|
91
|
+
children,
|
|
92
|
+
showCloseButton && /* @__PURE__ */ React.createElement(DialogPrimitive.Close, { className: cn(
|
|
93
|
+
"absolute right-4 top-4 rounded-md p-1",
|
|
94
|
+
"text-text-muted hover:text-foreground",
|
|
95
|
+
"transition-colors duration-fast",
|
|
96
|
+
"focus-visible:focus-ring focus-visible:outline-none",
|
|
97
|
+
"disabled:pointer-events-none"
|
|
98
|
+
) }, closeIcon || /* @__PURE__ */ React.createElement(DefaultCloseIcon, { className: "icon-sm" }), /* @__PURE__ */ React.createElement("span", { className: "sr-only" }, "Close"))
|
|
99
|
+
));
|
|
100
|
+
});
|
|
101
|
+
DrawerContent.displayName = "DrawerContent";
|
|
102
|
+
const DrawerHeader = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React.createElement(
|
|
103
|
+
"div",
|
|
104
|
+
{
|
|
105
|
+
ref,
|
|
106
|
+
className: cn("flex flex-col gap-1.5 p-6 pb-0", className),
|
|
107
|
+
...props
|
|
108
|
+
}
|
|
109
|
+
));
|
|
110
|
+
DrawerHeader.displayName = "DrawerHeader";
|
|
111
|
+
const DrawerTitle = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React.createElement(
|
|
112
|
+
DialogPrimitive.Title,
|
|
113
|
+
{
|
|
114
|
+
ref,
|
|
115
|
+
className: cn("text-lg font-semibold text-foreground", className),
|
|
116
|
+
...props
|
|
117
|
+
}
|
|
118
|
+
));
|
|
119
|
+
DrawerTitle.displayName = "DrawerTitle";
|
|
120
|
+
const DrawerDescription = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React.createElement(
|
|
121
|
+
DialogPrimitive.Description,
|
|
122
|
+
{
|
|
123
|
+
ref,
|
|
124
|
+
className: cn("text-md text-text-muted", className),
|
|
125
|
+
...props
|
|
126
|
+
}
|
|
127
|
+
));
|
|
128
|
+
DrawerDescription.displayName = "DrawerDescription";
|
|
129
|
+
const DrawerBody = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React.createElement(
|
|
130
|
+
"div",
|
|
131
|
+
{
|
|
132
|
+
ref,
|
|
133
|
+
className: cn("flex-1 overflow-y-auto p-6", className),
|
|
134
|
+
...props
|
|
135
|
+
}
|
|
136
|
+
));
|
|
137
|
+
DrawerBody.displayName = "DrawerBody";
|
|
138
|
+
const DrawerFooter = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React.createElement(
|
|
139
|
+
"div",
|
|
140
|
+
{
|
|
141
|
+
ref,
|
|
142
|
+
className: cn(
|
|
143
|
+
"flex items-center justify-end gap-3 p-6 pt-0",
|
|
144
|
+
className
|
|
145
|
+
),
|
|
146
|
+
...props
|
|
147
|
+
}
|
|
148
|
+
));
|
|
149
|
+
DrawerFooter.displayName = "DrawerFooter";
|
|
150
|
+
const Drawer = Object.assign(DrawerRoot, {
|
|
151
|
+
Trigger: DrawerTrigger,
|
|
152
|
+
Portal: DrawerPortal,
|
|
153
|
+
Overlay: DrawerOverlay,
|
|
154
|
+
Content: DrawerContent,
|
|
155
|
+
Header: DrawerHeader,
|
|
156
|
+
Title: DrawerTitle,
|
|
157
|
+
Description: DrawerDescription,
|
|
158
|
+
Body: DrawerBody,
|
|
159
|
+
Footer: DrawerFooter,
|
|
160
|
+
Close: DrawerClose
|
|
161
|
+
});
|
|
162
|
+
export {
|
|
163
|
+
Drawer,
|
|
164
|
+
DrawerBody,
|
|
165
|
+
DrawerClose,
|
|
166
|
+
DrawerContent,
|
|
167
|
+
DrawerDescription,
|
|
168
|
+
DrawerFooter,
|
|
169
|
+
DrawerHeader,
|
|
170
|
+
DrawerOverlay,
|
|
171
|
+
DrawerPortal,
|
|
172
|
+
DrawerRoot,
|
|
173
|
+
DrawerTitle,
|
|
174
|
+
DrawerTrigger,
|
|
175
|
+
drawerSizeHorizontal,
|
|
176
|
+
drawerSizeVertical
|
|
177
|
+
};
|
|
178
|
+
//# sourceMappingURL=drawer.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../../src/components/ui/drawer.tsx"],"sourcesContent":["'use client'\n\nimport * as React from 'react'\nimport * as DialogPrimitive from '@radix-ui/react-dialog'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { cn } from '../../lib/utils'\n\n// ─── Default Close Icon (built-in, no external dependency) ──\nconst DefaultCloseIcon = ({ className }: { className?: string }) => (\n <svg\n className={className}\n fill=\"none\"\n viewBox=\"0 0 24 24\"\n stroke=\"currentColor\"\n strokeWidth={2}\n aria-hidden=\"true\"\n >\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" d=\"M6 18L18 6M6 6l12 12\" />\n </svg>\n)\n\n// ─── Types ──────────────────────────────────────────────────\nexport type DrawerSide = 'left' | 'right' | 'top' | 'bottom'\nexport type DrawerSize = 'sm' | 'md' | 'lg' | 'xl' | 'full'\n\n// ─── Animation class mapping (static strings for Tailwind scanner) ──\nconst ANIMATION_CLASSES: Record<DrawerSide, string> = {\n right: 'data-[state=open]:animate-drawer-right-enter data-[state=closed]:animate-drawer-right-exit',\n left: 'data-[state=open]:animate-drawer-left-enter data-[state=closed]:animate-drawer-left-exit',\n top: 'data-[state=open]:animate-drawer-top-enter data-[state=closed]:animate-drawer-top-exit',\n bottom: 'data-[state=open]:animate-drawer-bottom-enter data-[state=closed]:animate-drawer-bottom-exit',\n}\n\n// ─── Size variants ──────────────────────────────────────────\nconst drawerSizeHorizontal = cva('', {\n variants: {\n size: {\n sm: 'w-[320px]',\n md: 'w-[400px]',\n lg: 'w-[480px]',\n xl: 'w-[640px]',\n full: 'w-full',\n },\n },\n defaultVariants: { size: 'md' },\n})\n\nconst drawerSizeVertical = cva('', {\n variants: {\n size: {\n sm: 'h-[320px]',\n md: 'h-[400px]',\n lg: 'h-[480px]',\n xl: 'h-[640px]',\n full: 'h-full',\n },\n },\n defaultVariants: { size: 'md' },\n})\n\n// ═══════════════════════════════════════════════════════════════\n// Drawer\n// ═══════════════════════════════════════════════════════════════\n\n// ─── Drawer (Root) — wrapper to avoid Object.assign mutating DialogPrimitive.Root ──\nfunction DrawerRoot(props: React.ComponentPropsWithoutRef<typeof DialogPrimitive.Root>) {\n return <DialogPrimitive.Root {...props} />\n}\n\n// ─── DrawerTrigger ──────────────────────────────────────────\nconst DrawerTrigger = DialogPrimitive.Trigger\n\n// ─── DrawerPortal ───────────────────────────────────────────\nconst DrawerPortal = DialogPrimitive.Portal\n\n// ─── DrawerClose ────────────────────────────────────────────\nconst DrawerClose = DialogPrimitive.Close\n\n// ─── DrawerOverlay ──────────────────────────────────────────\nconst DrawerOverlay = React.forwardRef<\n React.ElementRef<typeof DialogPrimitive.Overlay>,\n React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>\n>(({ className, ...props }, ref) => (\n <DialogPrimitive.Overlay\n ref={ref}\n className={cn(\n 'fixed inset-0 z-overlay bg-black/50',\n 'data-[state=open]:animate-modal-overlay-enter data-[state=closed]:animate-modal-overlay-exit',\n className\n )}\n {...props}\n />\n))\nDrawerOverlay.displayName = 'DrawerOverlay'\n\n// ─── DrawerContent ──────────────────────────────────────────\nexport interface DrawerContentProps\n extends Omit<React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>, 'children'> {\n /** Side from which the drawer slides in */\n side?: DrawerSide\n /** Panel size (width for left/right, height for top/bottom) */\n size?: DrawerSize\n /** Show built-in close button */\n showCloseButton?: boolean\n /** Custom close icon (replaces default X) */\n closeIcon?: React.ReactNode\n children?: React.ReactNode\n}\n\nconst SIDE_POSITION: Record<DrawerSide, string> = {\n right: 'inset-y-0 right-0',\n left: 'inset-y-0 left-0',\n top: 'inset-x-0 top-0',\n bottom: 'inset-x-0 bottom-0',\n}\n\nconst DrawerContent = React.forwardRef<\n React.ElementRef<typeof DialogPrimitive.Content>,\n DrawerContentProps\n>(({ className, children, side = 'right', size = 'md', showCloseButton = true, closeIcon, ...props }, ref) => {\n const isHorizontal = side === 'left' || side === 'right'\n const sizeClass = isHorizontal\n ? drawerSizeHorizontal({ size })\n : drawerSizeVertical({ size })\n\n return (\n <DrawerPortal>\n <DrawerOverlay />\n <DialogPrimitive.Content\n ref={ref}\n className={cn(\n 'fixed z-modal flex flex-col bg-background text-foreground shadow-xl',\n 'focus:outline-none',\n SIDE_POSITION[side],\n isHorizontal ? 'max-w-full h-full' : 'max-h-full w-full',\n sizeClass,\n ANIMATION_CLASSES[side],\n className,\n )}\n {...props}\n >\n {children}\n {showCloseButton && (\n <DialogPrimitive.Close className={cn(\n 'absolute right-4 top-4 rounded-md p-1',\n 'text-text-muted hover:text-foreground',\n 'transition-colors duration-fast',\n 'focus-visible:focus-ring focus-visible:outline-none',\n 'disabled:pointer-events-none'\n )}>\n {closeIcon || <DefaultCloseIcon className=\"icon-sm\" />}\n <span className=\"sr-only\">Close</span>\n </DialogPrimitive.Close>\n )}\n </DialogPrimitive.Content>\n </DrawerPortal>\n )\n})\nDrawerContent.displayName = 'DrawerContent'\n\n// ─── DrawerHeader ───────────────────────────────────────────\nconst DrawerHeader = React.forwardRef<\n HTMLDivElement,\n React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n <div\n ref={ref}\n className={cn('flex flex-col gap-1.5 p-6 pb-0', className)}\n {...props}\n />\n))\nDrawerHeader.displayName = 'DrawerHeader'\n\n// ─── DrawerTitle ────────────────────────────────────────────\nconst DrawerTitle = React.forwardRef<\n React.ElementRef<typeof DialogPrimitive.Title>,\n React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>\n>(({ className, ...props }, ref) => (\n <DialogPrimitive.Title\n ref={ref}\n className={cn('text-lg font-semibold text-foreground', className)}\n {...props}\n />\n))\nDrawerTitle.displayName = 'DrawerTitle'\n\n// ─── DrawerDescription ─────────────────────────────────────\nconst DrawerDescription = React.forwardRef<\n React.ElementRef<typeof DialogPrimitive.Description>,\n React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>\n>(({ className, ...props }, ref) => (\n <DialogPrimitive.Description\n ref={ref}\n className={cn('text-md text-text-muted', className)}\n {...props}\n />\n))\nDrawerDescription.displayName = 'DrawerDescription'\n\n// ─── DrawerBody ─────────────────────────────────────────────\nconst DrawerBody = React.forwardRef<\n HTMLDivElement,\n React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n <div\n ref={ref}\n className={cn('flex-1 overflow-y-auto p-6', className)}\n {...props}\n />\n))\nDrawerBody.displayName = 'DrawerBody'\n\n// ─── DrawerFooter ───────────────────────────────────────────\nconst DrawerFooter = React.forwardRef<\n HTMLDivElement,\n React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n <div\n ref={ref}\n className={cn(\n 'flex items-center justify-end gap-3 p-6 pt-0',\n className\n )}\n {...props}\n />\n))\nDrawerFooter.displayName = 'DrawerFooter'\n\n// ─── Namespace: Drawer ──────────────────────────────────────\nconst Drawer = Object.assign(DrawerRoot, {\n Trigger: DrawerTrigger,\n Portal: DrawerPortal,\n Overlay: DrawerOverlay,\n Content: DrawerContent,\n Header: DrawerHeader,\n Title: DrawerTitle,\n Description: DrawerDescription,\n Body: DrawerBody,\n Footer: DrawerFooter,\n Close: DrawerClose,\n})\n\n// eslint-disable-next-line @typescript-eslint/no-namespace\nnamespace Drawer {\n export type ContentProps = DrawerContentProps\n}\n\n// ─── Exports ────────────────────────────────────────────────\nexport {\n Drawer,\n DrawerRoot,\n DrawerTrigger,\n DrawerPortal,\n DrawerOverlay,\n DrawerContent,\n DrawerHeader,\n DrawerTitle,\n DrawerDescription,\n DrawerBody,\n DrawerFooter,\n DrawerClose,\n drawerSizeHorizontal,\n drawerSizeVertical,\n}\n"],"mappings":"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","names":[]}
|
|
@@ -0,0 +1,59 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
|
|
3
|
+
|
|
4
|
+
type DropdownMenuRadius = 'md' | 'lg' | 'xl';
|
|
5
|
+
type DropdownMenuSize = 'sm' | 'md' | 'lg';
|
|
6
|
+
declare const DropdownMenuTrigger: React.ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuTriggerProps & React.RefAttributes<HTMLButtonElement>>;
|
|
7
|
+
declare const DropdownMenuGroup: React.ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuGroupProps & React.RefAttributes<HTMLDivElement>>;
|
|
8
|
+
declare const DropdownMenuSub: React.FC<DropdownMenuPrimitive.DropdownMenuSubProps>;
|
|
9
|
+
declare const DropdownMenuRadioGroup: React.ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuRadioGroupProps & React.RefAttributes<HTMLDivElement>>;
|
|
10
|
+
declare const DropdownMenuContent: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
|
|
11
|
+
radius?: DropdownMenuRadius;
|
|
12
|
+
flush?: boolean;
|
|
13
|
+
size?: DropdownMenuSize;
|
|
14
|
+
} & React.RefAttributes<HTMLDivElement>>;
|
|
15
|
+
declare const DropdownMenuItem: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
|
|
16
|
+
inset?: boolean;
|
|
17
|
+
} & React.RefAttributes<HTMLDivElement>>;
|
|
18
|
+
declare const DropdownMenuCheckboxItem: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuCheckboxItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
19
|
+
declare const DropdownMenuRadioItem: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuRadioItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
20
|
+
declare const DropdownMenuLabel: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuLabelProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
|
|
21
|
+
inset?: boolean;
|
|
22
|
+
} & React.RefAttributes<HTMLDivElement>>;
|
|
23
|
+
declare const DropdownMenuSeparator: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuSeparatorProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
24
|
+
declare const DropdownMenuSubTrigger: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuSubTriggerProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
|
|
25
|
+
inset?: boolean;
|
|
26
|
+
} & React.RefAttributes<HTMLDivElement>>;
|
|
27
|
+
declare const DropdownMenuSubContent: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuSubContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
28
|
+
declare function DropdownMenuShortcut({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>): React.JSX.Element;
|
|
29
|
+
declare namespace DropdownMenuShortcut {
|
|
30
|
+
var displayName: string;
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
declare const DropdownMenu: React.FC<DropdownMenuPrimitive.DropdownMenuProps> & {
|
|
34
|
+
Trigger: React.ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuTriggerProps & React.RefAttributes<HTMLButtonElement>>;
|
|
35
|
+
Content: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
|
|
36
|
+
radius?: DropdownMenuRadius;
|
|
37
|
+
flush?: boolean;
|
|
38
|
+
size?: DropdownMenuSize;
|
|
39
|
+
} & React.RefAttributes<HTMLDivElement>>;
|
|
40
|
+
Item: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
|
|
41
|
+
inset?: boolean;
|
|
42
|
+
} & React.RefAttributes<HTMLDivElement>>;
|
|
43
|
+
CheckboxItem: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuCheckboxItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
44
|
+
RadioGroup: React.ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuRadioGroupProps & React.RefAttributes<HTMLDivElement>>;
|
|
45
|
+
RadioItem: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuRadioItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
46
|
+
Label: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuLabelProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
|
|
47
|
+
inset?: boolean;
|
|
48
|
+
} & React.RefAttributes<HTMLDivElement>>;
|
|
49
|
+
Separator: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuSeparatorProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
50
|
+
Group: React.ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuGroupProps & React.RefAttributes<HTMLDivElement>>;
|
|
51
|
+
Sub: React.FC<DropdownMenuPrimitive.DropdownMenuSubProps>;
|
|
52
|
+
SubTrigger: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuSubTriggerProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
|
|
53
|
+
inset?: boolean;
|
|
54
|
+
} & React.RefAttributes<HTMLDivElement>>;
|
|
55
|
+
SubContent: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuSubContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
56
|
+
Shortcut: typeof DropdownMenuShortcut;
|
|
57
|
+
};
|
|
58
|
+
|
|
59
|
+
export { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuRadioGroup, DropdownMenuRadioItem, type DropdownMenuRadius, DropdownMenuSeparator, DropdownMenuShortcut, type DropdownMenuSize, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger };
|
|
@@ -0,0 +1,59 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
|
|
3
|
+
|
|
4
|
+
type DropdownMenuRadius = 'md' | 'lg' | 'xl';
|
|
5
|
+
type DropdownMenuSize = 'sm' | 'md' | 'lg';
|
|
6
|
+
declare const DropdownMenuTrigger: React.ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuTriggerProps & React.RefAttributes<HTMLButtonElement>>;
|
|
7
|
+
declare const DropdownMenuGroup: React.ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuGroupProps & React.RefAttributes<HTMLDivElement>>;
|
|
8
|
+
declare const DropdownMenuSub: React.FC<DropdownMenuPrimitive.DropdownMenuSubProps>;
|
|
9
|
+
declare const DropdownMenuRadioGroup: React.ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuRadioGroupProps & React.RefAttributes<HTMLDivElement>>;
|
|
10
|
+
declare const DropdownMenuContent: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
|
|
11
|
+
radius?: DropdownMenuRadius;
|
|
12
|
+
flush?: boolean;
|
|
13
|
+
size?: DropdownMenuSize;
|
|
14
|
+
} & React.RefAttributes<HTMLDivElement>>;
|
|
15
|
+
declare const DropdownMenuItem: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
|
|
16
|
+
inset?: boolean;
|
|
17
|
+
} & React.RefAttributes<HTMLDivElement>>;
|
|
18
|
+
declare const DropdownMenuCheckboxItem: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuCheckboxItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
19
|
+
declare const DropdownMenuRadioItem: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuRadioItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
20
|
+
declare const DropdownMenuLabel: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuLabelProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
|
|
21
|
+
inset?: boolean;
|
|
22
|
+
} & React.RefAttributes<HTMLDivElement>>;
|
|
23
|
+
declare const DropdownMenuSeparator: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuSeparatorProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
24
|
+
declare const DropdownMenuSubTrigger: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuSubTriggerProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
|
|
25
|
+
inset?: boolean;
|
|
26
|
+
} & React.RefAttributes<HTMLDivElement>>;
|
|
27
|
+
declare const DropdownMenuSubContent: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuSubContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
28
|
+
declare function DropdownMenuShortcut({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>): React.JSX.Element;
|
|
29
|
+
declare namespace DropdownMenuShortcut {
|
|
30
|
+
var displayName: string;
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
declare const DropdownMenu: React.FC<DropdownMenuPrimitive.DropdownMenuProps> & {
|
|
34
|
+
Trigger: React.ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuTriggerProps & React.RefAttributes<HTMLButtonElement>>;
|
|
35
|
+
Content: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
|
|
36
|
+
radius?: DropdownMenuRadius;
|
|
37
|
+
flush?: boolean;
|
|
38
|
+
size?: DropdownMenuSize;
|
|
39
|
+
} & React.RefAttributes<HTMLDivElement>>;
|
|
40
|
+
Item: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
|
|
41
|
+
inset?: boolean;
|
|
42
|
+
} & React.RefAttributes<HTMLDivElement>>;
|
|
43
|
+
CheckboxItem: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuCheckboxItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
44
|
+
RadioGroup: React.ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuRadioGroupProps & React.RefAttributes<HTMLDivElement>>;
|
|
45
|
+
RadioItem: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuRadioItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
46
|
+
Label: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuLabelProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
|
|
47
|
+
inset?: boolean;
|
|
48
|
+
} & React.RefAttributes<HTMLDivElement>>;
|
|
49
|
+
Separator: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuSeparatorProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
50
|
+
Group: React.ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuGroupProps & React.RefAttributes<HTMLDivElement>>;
|
|
51
|
+
Sub: React.FC<DropdownMenuPrimitive.DropdownMenuSubProps>;
|
|
52
|
+
SubTrigger: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuSubTriggerProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
|
|
53
|
+
inset?: boolean;
|
|
54
|
+
} & React.RefAttributes<HTMLDivElement>>;
|
|
55
|
+
SubContent: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuSubContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
56
|
+
Shortcut: typeof DropdownMenuShortcut;
|
|
57
|
+
};
|
|
58
|
+
|
|
59
|
+
export { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuRadioGroup, DropdownMenuRadioItem, type DropdownMenuRadius, DropdownMenuSeparator, DropdownMenuShortcut, type DropdownMenuSize, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger };
|