blimpui 0.0.9 → 0.0.10
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.
|
@@ -0,0 +1,74 @@
|
|
|
1
|
+
import * as DrawerPrimitive from "@rn-primitives/dialog";
|
|
2
|
+
import * as React from "react";
|
|
3
|
+
import { View, type ViewProps } from "react-native";
|
|
4
|
+
import { type EntryAnimationsValues, type ExitAnimationsValues } from "react-native-reanimated";
|
|
5
|
+
type DrawerSide = "left" | "right" | "top" | "bottom";
|
|
6
|
+
type DrawerSize = "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "full";
|
|
7
|
+
type DrawerHandle = {
|
|
8
|
+
open: () => void;
|
|
9
|
+
close: () => void;
|
|
10
|
+
toggle: () => void;
|
|
11
|
+
readonly isOpen: boolean;
|
|
12
|
+
};
|
|
13
|
+
type DrawerProps = Omit<React.ComponentProps<typeof DrawerPrimitive.Root>, "open" | "defaultOpen" | "onOpenChange"> & {
|
|
14
|
+
open?: boolean;
|
|
15
|
+
defaultOpen?: boolean;
|
|
16
|
+
onOpenChange?: (open: boolean) => void;
|
|
17
|
+
title?: React.ReactNode;
|
|
18
|
+
description?: React.ReactNode;
|
|
19
|
+
footer?: React.ReactNode;
|
|
20
|
+
trigger?: React.ReactNode;
|
|
21
|
+
content?: React.ReactNode;
|
|
22
|
+
contentProps?: Omit<DrawerContentProps, "children">;
|
|
23
|
+
headerProps?: React.ComponentProps<typeof DrawerHeader>;
|
|
24
|
+
footerProps?: React.ComponentProps<typeof DrawerFooter>;
|
|
25
|
+
titleProps?: React.ComponentProps<typeof DrawerTitle>;
|
|
26
|
+
descriptionProps?: React.ComponentProps<typeof DrawerDescription>;
|
|
27
|
+
side?: DrawerSide;
|
|
28
|
+
size?: DrawerSize;
|
|
29
|
+
portalHost?: string;
|
|
30
|
+
overlayProps?: DrawerOverlayProps;
|
|
31
|
+
showClose?: boolean;
|
|
32
|
+
closeButtonProps?: React.ComponentProps<typeof DrawerPrimitive.Close>;
|
|
33
|
+
dismissible?: boolean;
|
|
34
|
+
disableKeyboardDismiss?: boolean;
|
|
35
|
+
enterAnimation?: EntryAnimationsValues;
|
|
36
|
+
exitAnimation?: ExitAnimationsValues;
|
|
37
|
+
};
|
|
38
|
+
type DrawerPortalProps = React.ComponentProps<typeof DrawerPrimitive.Portal>;
|
|
39
|
+
type DrawerOverlayProps = Omit<DrawerPrimitive.OverlayProps, "asChild"> & React.RefAttributes<DrawerPrimitive.OverlayRef>;
|
|
40
|
+
type DrawerContentProps = DrawerPrimitive.ContentProps & React.RefAttributes<DrawerPrimitive.ContentRef> & {
|
|
41
|
+
side?: DrawerSide;
|
|
42
|
+
size?: DrawerSize;
|
|
43
|
+
portalHost?: string;
|
|
44
|
+
overlayProps?: DrawerOverlayProps;
|
|
45
|
+
showClose?: boolean;
|
|
46
|
+
closeButtonProps?: React.ComponentProps<typeof DrawerPrimitive.Close>;
|
|
47
|
+
dismissible?: boolean;
|
|
48
|
+
disableKeyboardDismiss?: boolean;
|
|
49
|
+
enterAnimation?: EntryAnimationsValues;
|
|
50
|
+
exitAnimation?: ExitAnimationsValues;
|
|
51
|
+
};
|
|
52
|
+
declare const DrawerTrigger: React.ForwardRefExoticComponent<Omit<import("react-native").PressableProps & React.RefAttributes<View>, "ref"> & {
|
|
53
|
+
asChild?: boolean;
|
|
54
|
+
} & {
|
|
55
|
+
onKeyDown?: (ev: React.KeyboardEvent) => void;
|
|
56
|
+
onKeyUp?: (ev: React.KeyboardEvent) => void;
|
|
57
|
+
} & React.RefAttributes<View>>;
|
|
58
|
+
declare const DrawerClose: React.ForwardRefExoticComponent<Omit<import("react-native").PressableProps & React.RefAttributes<View>, "ref"> & {
|
|
59
|
+
asChild?: boolean;
|
|
60
|
+
} & {
|
|
61
|
+
onKeyDown?: (ev: React.KeyboardEvent) => void;
|
|
62
|
+
onKeyUp?: (ev: React.KeyboardEvent) => void;
|
|
63
|
+
} & React.RefAttributes<View>>;
|
|
64
|
+
declare const Drawer: React.ForwardRefExoticComponent<Omit<DrawerProps, "ref"> & React.RefAttributes<DrawerHandle>>;
|
|
65
|
+
declare const DrawerPortal: ({ children, ...props }: DrawerPortalProps) => import("react/jsx-runtime").JSX.Element;
|
|
66
|
+
declare const DrawerContent: React.ForwardRefExoticComponent<Omit<DrawerContentProps, "ref"> & React.RefAttributes<View>>;
|
|
67
|
+
declare function DrawerHeader({ className, ...props }: ViewProps): import("react/jsx-runtime").JSX.Element;
|
|
68
|
+
declare function DrawerFooter({ className, ...props }: ViewProps): import("react/jsx-runtime").JSX.Element;
|
|
69
|
+
declare function DrawerTitle({ className, ...props }: DrawerPrimitive.TitleProps): import("react/jsx-runtime").JSX.Element;
|
|
70
|
+
declare function DrawerDescription({ className, ...props }: DrawerPrimitive.DescriptionProps): import("react/jsx-runtime").JSX.Element;
|
|
71
|
+
export { Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerPortal, DrawerTitle, DrawerTrigger, };
|
|
72
|
+
export type { DrawerHandle, DrawerSide, DrawerSize, DrawerProps };
|
|
73
|
+
export * from "../primitives/dialog";
|
|
74
|
+
//# sourceMappingURL=drawer.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"drawer.d.ts","sourceRoot":"","sources":["../../../../$/components/ui/drawer.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,183 @@
|
|
|
1
|
+
var __assign = (this && this.__assign) || function () {
|
|
2
|
+
__assign = Object.assign || function(t) {
|
|
3
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
4
|
+
s = arguments[i];
|
|
5
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
6
|
+
t[p] = s[p];
|
|
7
|
+
}
|
|
8
|
+
return t;
|
|
9
|
+
};
|
|
10
|
+
return __assign.apply(this, arguments);
|
|
11
|
+
};
|
|
12
|
+
var __rest = (this && this.__rest) || function (s, e) {
|
|
13
|
+
var t = {};
|
|
14
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
15
|
+
t[p] = s[p];
|
|
16
|
+
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
17
|
+
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
18
|
+
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
19
|
+
t[p[i]] = s[p[i]];
|
|
20
|
+
}
|
|
21
|
+
return t;
|
|
22
|
+
};
|
|
23
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
24
|
+
import { Icon } from "../../../$/components/primitives/icon";
|
|
25
|
+
import { NativeOnlyAnimatedView } from "../../../$/components/primitives/native-only-animated-view";
|
|
26
|
+
import { cn } from "../../../$/lib/utils";
|
|
27
|
+
import * as DrawerPrimitive from "@rn-primitives/dialog";
|
|
28
|
+
import { X } from "lucide-react-native";
|
|
29
|
+
import * as React from "react";
|
|
30
|
+
import { Platform, Text, View } from "react-native";
|
|
31
|
+
import { FadeIn, FadeOut, SlideInRight, SlideOutRight, } from "react-native-reanimated";
|
|
32
|
+
import { FullWindowOverlay as RNFullWindowOverlay } from "react-native-screens";
|
|
33
|
+
var DrawerTrigger = DrawerPrimitive.Trigger;
|
|
34
|
+
var DrawerClose = DrawerPrimitive.Close;
|
|
35
|
+
var FullWindowOverlay = Platform.OS === "ios" ? RNFullWindowOverlay : React.Fragment;
|
|
36
|
+
var horizontalSizes = {
|
|
37
|
+
xs: "max-w-[18rem] w-[18rem]",
|
|
38
|
+
sm: "max-w-[20rem] w-[20rem]",
|
|
39
|
+
md: "max-w-[24rem] w-[24rem]",
|
|
40
|
+
lg: "max-w-[28rem] w-[28rem]",
|
|
41
|
+
xl: "max-w-[32rem] w-[32rem]",
|
|
42
|
+
"2xl": "max-w-[36rem] w-[36rem]",
|
|
43
|
+
"3xl": "max-w-[42rem] w-[42rem]",
|
|
44
|
+
"4xl": "max-w-[48rem] w-[48rem]",
|
|
45
|
+
"5xl": "max-w-[56rem] w-[56rem]",
|
|
46
|
+
full: "w-full max-w-full",
|
|
47
|
+
};
|
|
48
|
+
var verticalSizes = {
|
|
49
|
+
xs: "max-h-[16rem] h-[16rem]",
|
|
50
|
+
sm: "max-h-[18rem] h-[18rem]",
|
|
51
|
+
md: "max-h-[22rem] h-[22rem]",
|
|
52
|
+
lg: "max-h-[26rem] h-[26rem]",
|
|
53
|
+
xl: "max-h-[30rem] h-[30rem]",
|
|
54
|
+
"2xl": "max-h-[34rem] h-[34rem]",
|
|
55
|
+
"3xl": "max-h-[38rem] h-[38rem]",
|
|
56
|
+
"4xl": "max-h-[44rem] h-[44rem]",
|
|
57
|
+
"5xl": "max-h-[52rem] h-[52rem]",
|
|
58
|
+
full: "h-full max-h-full",
|
|
59
|
+
};
|
|
60
|
+
var sidePositionClass = {
|
|
61
|
+
right: "right-0 top-0 h-full border-l",
|
|
62
|
+
left: "left-0 top-0 h-full border-r",
|
|
63
|
+
bottom: "bottom-0 left-0 w-full border-t",
|
|
64
|
+
top: "left-0 top-0 w-full border-b",
|
|
65
|
+
};
|
|
66
|
+
var Drawer = React.forwardRef(function Drawer(_a, ref) {
|
|
67
|
+
var openProp = _a.open, _b = _a.defaultOpen, defaultOpen = _b === void 0 ? false : _b, onOpenChange = _a.onOpenChange, children = _a.children, title = _a.title, description = _a.description, footer = _a.footer, trigger = _a.trigger, content = _a.content, contentProps = _a.contentProps, headerProps = _a.headerProps, footerProps = _a.footerProps, titleProps = _a.titleProps, descriptionProps = _a.descriptionProps, side = _a.side, size = _a.size, portalHost = _a.portalHost, overlayProps = _a.overlayProps, showClose = _a.showClose, closeButtonProps = _a.closeButtonProps, dismissible = _a.dismissible, disableKeyboardDismiss = _a.disableKeyboardDismiss, enterAnimation = _a.enterAnimation, exitAnimation = _a.exitAnimation, props = __rest(_a, ["open", "defaultOpen", "onOpenChange", "children", "title", "description", "footer", "trigger", "content", "contentProps", "headerProps", "footerProps", "titleProps", "descriptionProps", "side", "size", "portalHost", "overlayProps", "showClose", "closeButtonProps", "dismissible", "disableKeyboardDismiss", "enterAnimation", "exitAnimation"]);
|
|
68
|
+
var isControlled = openProp !== undefined;
|
|
69
|
+
var _c = React.useState(defaultOpen), uncontrolledOpen = _c[0], setUncontrolledOpen = _c[1];
|
|
70
|
+
var latestOpen = React.useRef(openProp !== null && openProp !== void 0 ? openProp : uncontrolledOpen);
|
|
71
|
+
React.useEffect(function () {
|
|
72
|
+
latestOpen.current = openProp !== null && openProp !== void 0 ? openProp : uncontrolledOpen;
|
|
73
|
+
}, [openProp, uncontrolledOpen]);
|
|
74
|
+
var setOpen = React.useCallback(function (next) {
|
|
75
|
+
if (!isControlled) {
|
|
76
|
+
setUncontrolledOpen(next);
|
|
77
|
+
}
|
|
78
|
+
onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(next);
|
|
79
|
+
}, [isControlled, onOpenChange]);
|
|
80
|
+
var handleOpenChange = React.useCallback(function (next) {
|
|
81
|
+
setOpen(next);
|
|
82
|
+
}, [setOpen]);
|
|
83
|
+
React.useImperativeHandle(ref, function () { return ({
|
|
84
|
+
open: function () { return setOpen(true); },
|
|
85
|
+
close: function () { return setOpen(false); },
|
|
86
|
+
toggle: function () { return setOpen(!latestOpen.current); },
|
|
87
|
+
get isOpen() {
|
|
88
|
+
return latestOpen.current;
|
|
89
|
+
},
|
|
90
|
+
}); }, [setOpen]);
|
|
91
|
+
var open = openProp !== null && openProp !== void 0 ? openProp : uncontrolledOpen;
|
|
92
|
+
var childArray = React.useMemo(function () { return React.Children.toArray(children); }, [children]);
|
|
93
|
+
var hasExplicitContent = React.useMemo(function () {
|
|
94
|
+
return childArray.some(function (child) {
|
|
95
|
+
if (!React.isValidElement(child))
|
|
96
|
+
return false;
|
|
97
|
+
var childType = child.type;
|
|
98
|
+
return (childType === DrawerContent ||
|
|
99
|
+
childType === DrawerPrimitive.Content ||
|
|
100
|
+
(childType === null || childType === void 0 ? void 0 : childType.displayName) === DrawerContent.displayName);
|
|
101
|
+
});
|
|
102
|
+
}, [childArray]);
|
|
103
|
+
var body = content !== null && content !== void 0 ? content : children;
|
|
104
|
+
var mergedContentProps = React.useMemo(function () { return (__assign({ side: side, size: size, portalHost: portalHost, overlayProps: overlayProps, showClose: showClose, closeButtonProps: closeButtonProps, dismissible: dismissible, disableKeyboardDismiss: disableKeyboardDismiss, enterAnimation: enterAnimation, exitAnimation: exitAnimation }, (contentProps !== null && contentProps !== void 0 ? contentProps : {}))); }, [
|
|
105
|
+
side,
|
|
106
|
+
size,
|
|
107
|
+
portalHost,
|
|
108
|
+
overlayProps,
|
|
109
|
+
showClose,
|
|
110
|
+
closeButtonProps,
|
|
111
|
+
dismissible,
|
|
112
|
+
disableKeyboardDismiss,
|
|
113
|
+
enterAnimation,
|
|
114
|
+
exitAnimation,
|
|
115
|
+
contentProps,
|
|
116
|
+
]);
|
|
117
|
+
return (_jsxs(DrawerPrimitive.Root, __assign({ open: open, onOpenChange: handleOpenChange }, props, { children: [trigger ? _jsx(DrawerTrigger, { asChild: true, children: trigger }) : null, hasExplicitContent ? (children) : (_jsxs(DrawerContent, __assign({}, mergedContentProps, { children: [title || description ? (_jsxs(DrawerHeader, __assign({}, headerProps, { children: [title ? (_jsx(DrawerTitle, __assign({}, titleProps, { children: title }))) : null, description ? (_jsx(DrawerDescription, __assign({}, descriptionProps, { children: description }))) : null] }))) : null, body, footer ? (_jsx(DrawerFooter, __assign({}, footerProps, { children: footer }))) : null] })))] })));
|
|
118
|
+
});
|
|
119
|
+
Drawer.displayName = "Drawer";
|
|
120
|
+
var DrawerPortal = function (_a) {
|
|
121
|
+
var children = _a.children, props = __rest(_a, ["children"]);
|
|
122
|
+
return (_jsx(DrawerPrimitive.Portal, __assign({}, props, { children: _jsx(FullWindowOverlay, { children: children }) })));
|
|
123
|
+
};
|
|
124
|
+
function DrawerOverlay(_a) {
|
|
125
|
+
var className = _a.className, props = __rest(_a, ["className"]);
|
|
126
|
+
return (_jsx(DrawerPrimitive.Overlay, __assign({ className: cn("bg-black/50 fixed inset-0 z-50 flex", Platform.select({
|
|
127
|
+
web: "animate-in fade-in-0 data-[state=closed]:animate-out",
|
|
128
|
+
}), className) }, props, { asChild: Platform.OS !== "web", children: _jsx(NativeOnlyAnimatedView, { entering: FadeIn.duration(180), exiting: FadeOut.duration(150) }) })));
|
|
129
|
+
}
|
|
130
|
+
var defaultEnter = SlideInRight.duration(200);
|
|
131
|
+
var defaultExit = SlideOutRight.duration(160);
|
|
132
|
+
var getSizeClass = function (side, size) {
|
|
133
|
+
return side === "left" || side === "right"
|
|
134
|
+
? horizontalSizes[size]
|
|
135
|
+
: verticalSizes[size];
|
|
136
|
+
};
|
|
137
|
+
var DrawerContent = React.forwardRef(function (_a, ref) {
|
|
138
|
+
var _b;
|
|
139
|
+
var className = _a.className, children = _a.children, _c = _a.side, side = _c === void 0 ? "right" : _c, _d = _a.size, size = _d === void 0 ? "md" : _d, portalHost = _a.portalHost, overlayProps = _a.overlayProps, _e = _a.showClose, showClose = _e === void 0 ? true : _e, closeButtonProps = _a.closeButtonProps, _f = _a.dismissible, dismissible = _f === void 0 ? true : _f, _g = _a.disableKeyboardDismiss, disableKeyboardDismiss = _g === void 0 ? false : _g, _h = _a.enterAnimation, enterAnimation = _h === void 0 ? defaultEnter : _h, _j = _a.exitAnimation, exitAnimation = _j === void 0 ? defaultExit : _j, onEscapeKeyDown = _a.onEscapeKeyDown, onInteractOutside = _a.onInteractOutside, props = __rest(_a, ["className", "children", "side", "size", "portalHost", "overlayProps", "showClose", "closeButtonProps", "dismissible", "disableKeyboardDismiss", "enterAnimation", "exitAnimation", "onEscapeKeyDown", "onInteractOutside"]);
|
|
140
|
+
var handleEscapeKeyDown = React.useCallback(function (event) {
|
|
141
|
+
var _a;
|
|
142
|
+
if (disableKeyboardDismiss) {
|
|
143
|
+
(_a = event === null || event === void 0 ? void 0 : event.preventDefault) === null || _a === void 0 ? void 0 : _a.call(event);
|
|
144
|
+
}
|
|
145
|
+
onEscapeKeyDown === null || onEscapeKeyDown === void 0 ? void 0 : onEscapeKeyDown(event);
|
|
146
|
+
}, [disableKeyboardDismiss, onEscapeKeyDown]);
|
|
147
|
+
var handleInteractOutside = React.useCallback(function (event) {
|
|
148
|
+
var _a;
|
|
149
|
+
if (!dismissible) {
|
|
150
|
+
(_a = event === null || event === void 0 ? void 0 : event.preventDefault) === null || _a === void 0 ? void 0 : _a.call(event);
|
|
151
|
+
}
|
|
152
|
+
onInteractOutside === null || onInteractOutside === void 0 ? void 0 : onInteractOutside(event);
|
|
153
|
+
}, [dismissible, onInteractOutside]);
|
|
154
|
+
var dimensionClass = getSizeClass(side, size);
|
|
155
|
+
return (_jsxs(DrawerPortal, { hostName: portalHost, children: [_jsx(DrawerOverlay, __assign({}, overlayProps)), _jsxs(DrawerPrimitive.Content, __assign({ ref: ref, className: cn("bg-background border-border fixed z-50 flex flex-col gap-4 p-6 shadow-lg shadow-black/5 outline-hidden", "web:max-w-[calc(100%-1.5rem)]", Platform.select({
|
|
156
|
+
web: cn("data-[state=open]:animate-in data-[state=closed]:animate-out", "data-[state=open]:duration-300 data-[state=closed]:duration-200", side === "right" &&
|
|
157
|
+
"data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right", side === "left" &&
|
|
158
|
+
"data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left", side === "top" &&
|
|
159
|
+
"data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top", side === "bottom" &&
|
|
160
|
+
"data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom"),
|
|
161
|
+
}), sidePositionClass[side], dimensionClass, className), onEscapeKeyDown: handleEscapeKeyDown, onInteractOutside: handleInteractOutside }, props, { children: [_jsx(NativeOnlyAnimatedView, { entering: enterAnimation, exiting: exitAnimation, className: "flex-1", children: children }), showClose ? (_jsxs(DrawerPrimitive.Close, __assign({ className: cn("absolute right-4 top-4 rounded opacity-70 active:opacity-100", Platform.select({
|
|
162
|
+
web: "ring-offset-background focus:ring-ring data-[state=open]:bg-accent transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-offset-2",
|
|
163
|
+
})) }, closeButtonProps, { hitSlop: (_b = closeButtonProps === null || closeButtonProps === void 0 ? void 0 : closeButtonProps.hitSlop) !== null && _b !== void 0 ? _b : 12, children: [_jsx(Icon, { as: X, className: cn("text-accent-foreground web:pointer-events-none size-4 shrink-0") }), _jsx(Text, { className: "sr-only", children: "Close" })] }))) : null] }))] }));
|
|
164
|
+
});
|
|
165
|
+
DrawerContent.displayName = "DrawerContent";
|
|
166
|
+
function DrawerHeader(_a) {
|
|
167
|
+
var className = _a.className, props = __rest(_a, ["className"]);
|
|
168
|
+
return _jsx(View, __assign({ className: cn("flex flex-col gap-2", className) }, props));
|
|
169
|
+
}
|
|
170
|
+
function DrawerFooter(_a) {
|
|
171
|
+
var className = _a.className, props = __rest(_a, ["className"]);
|
|
172
|
+
return (_jsx(View, __assign({ className: cn("flex flex-row items-center gap-2", className) }, props)));
|
|
173
|
+
}
|
|
174
|
+
function DrawerTitle(_a) {
|
|
175
|
+
var className = _a.className, props = __rest(_a, ["className"]);
|
|
176
|
+
return (_jsx(DrawerPrimitive.Title, __assign({ className: cn("text-foreground text-lg font-semibold", className) }, props)));
|
|
177
|
+
}
|
|
178
|
+
function DrawerDescription(_a) {
|
|
179
|
+
var className = _a.className, props = __rest(_a, ["className"]);
|
|
180
|
+
return (_jsx(DrawerPrimitive.Description, __assign({ className: cn("text-muted-foreground text-sm", className) }, props)));
|
|
181
|
+
}
|
|
182
|
+
export { Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerPortal, DrawerTitle, DrawerTrigger, };
|
|
183
|
+
export * from "../primitives/dialog";
|
package/dist/index.d.ts
CHANGED
|
@@ -42,6 +42,7 @@ export * from "./$/components/ui/textarea";
|
|
|
42
42
|
export * from "./$/components/ui/toggle";
|
|
43
43
|
export * from "./$/components/ui/toggle-group";
|
|
44
44
|
export * from "./$/components/ui/tooltip";
|
|
45
|
+
export * from "./$/components/ui/drawer";
|
|
45
46
|
export * from "./$/components/ui/wheelpicker";
|
|
46
47
|
export * from "./$/components/ui/multi-column-wheelpicker";
|
|
47
48
|
export * from "./$/components/ui/timewheelpicker";
|
package/dist/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../index.ts"],"names":[],"mappings":"AAAA,cAAc,yBAAyB,CAAC;AACxC,cAAc,gCAAgC,CAAC;AAC/C,cAAc,gCAAgC,CAAC;AAC/C,cAAc,0BAA0B,CAAC;AACzC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,wBAAwB,CAAC;AACvC,cAAc,wBAAwB,CAAC;AACvC,cAAc,6BAA6B,CAAC;AAE5C,cAAc,yBAAyB,CAAC;AACxC,cAAc,0BAA0B,CAAC;AAEzC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,+BAA+B,CAAC;AAC9C,cAAc,wBAAwB,CAAC;AACvC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,8BAA8B,CAAC;AAC7C,cAAc,mCAAmC,CAAC;AAClD,cAAc,8BAA8B,CAAC;AAC7C,cAAc,qCAAqC,CAAC;AACpD,cAAc,gCAAgC,CAAC;AAE/C,cAAc,0BAA0B,CAAC;AACzC,cAAc,iCAAiC,CAAC;AAEhD,cAAc,8BAA8B,CAAC;AAE7C,cAAc,wBAAwB,CAAC;AACvC,cAAc,yBAAyB,CAAC;AACxC,cAAc,8BAA8B,CAAC;AAE7C,cAAc,yBAAyB,CAAC;AAExC,cAAc,wBAAwB,CAAC;AACvC,cAAc,yBAAyB,CAAC;AAExC,cAAc,2BAA2B,CAAC;AAE1C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,0BAA0B,CAAC;AACzC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,0BAA0B,CAAC;AACzC,cAAc,wBAAwB,CAAC;AAEvC,cAAc,+BAA+B,CAAC;AAE9C,cAAc,kCAAkC,CAAC;AAEjD,cAAc,0BAA0B,CAAC;AACzC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,0BAA0B,CAAC;AACzC,cAAc,4BAA4B,CAAC;AAE3C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,0BAA0B,CAAC;AACzC,cAAc,gCAAgC,CAAC;AAC/C,cAAc,2BAA2B,CAAC;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../index.ts"],"names":[],"mappings":"AAAA,cAAc,yBAAyB,CAAC;AACxC,cAAc,gCAAgC,CAAC;AAC/C,cAAc,gCAAgC,CAAC;AAC/C,cAAc,0BAA0B,CAAC;AACzC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,wBAAwB,CAAC;AACvC,cAAc,wBAAwB,CAAC;AACvC,cAAc,6BAA6B,CAAC;AAE5C,cAAc,yBAAyB,CAAC;AACxC,cAAc,0BAA0B,CAAC;AAEzC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,+BAA+B,CAAC;AAC9C,cAAc,wBAAwB,CAAC;AACvC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,8BAA8B,CAAC;AAC7C,cAAc,mCAAmC,CAAC;AAClD,cAAc,8BAA8B,CAAC;AAC7C,cAAc,qCAAqC,CAAC;AACpD,cAAc,gCAAgC,CAAC;AAE/C,cAAc,0BAA0B,CAAC;AACzC,cAAc,iCAAiC,CAAC;AAEhD,cAAc,8BAA8B,CAAC;AAE7C,cAAc,wBAAwB,CAAC;AACvC,cAAc,yBAAyB,CAAC;AACxC,cAAc,8BAA8B,CAAC;AAE7C,cAAc,yBAAyB,CAAC;AAExC,cAAc,wBAAwB,CAAC;AACvC,cAAc,yBAAyB,CAAC;AAExC,cAAc,2BAA2B,CAAC;AAE1C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,0BAA0B,CAAC;AACzC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,0BAA0B,CAAC;AACzC,cAAc,wBAAwB,CAAC;AAEvC,cAAc,+BAA+B,CAAC;AAE9C,cAAc,kCAAkC,CAAC;AAEjD,cAAc,0BAA0B,CAAC;AACzC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,0BAA0B,CAAC;AACzC,cAAc,4BAA4B,CAAC;AAE3C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,0BAA0B,CAAC;AACzC,cAAc,gCAAgC,CAAC;AAC/C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,0BAA0B,CAAC;AAEzC,cAAc,+BAA+B,CAAC;AAC9C,cAAc,4CAA4C,CAAC;AAC3D,cAAc,mCAAmC,CAAC;AAElD,cAAc,eAAe,CAAC"}
|
package/dist/index.js
CHANGED
|
@@ -42,6 +42,7 @@ export * from "./$/components/ui/textarea";
|
|
|
42
42
|
export * from "./$/components/ui/toggle";
|
|
43
43
|
export * from "./$/components/ui/toggle-group";
|
|
44
44
|
export * from "./$/components/ui/tooltip";
|
|
45
|
+
export * from "./$/components/ui/drawer";
|
|
45
46
|
export * from "./$/components/ui/wheelpicker";
|
|
46
47
|
export * from "./$/components/ui/multi-column-wheelpicker";
|
|
47
48
|
export * from "./$/components/ui/timewheelpicker";
|