@bearmenu/ui 0.7.1 → 0.8.2
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/dist/{chunk-4JOV7FXW.js → chunk-2DEIXTBN.js} +1 -1
- package/dist/{chunk-UUJVXN2O.js → chunk-66MAPLXS.js} +3 -1
- package/dist/{chunk-Y5D5LP4A.js → chunk-7BWTYWM3.js} +14 -3
- package/dist/{chunk-ZFNOCP6W.js → chunk-H3BV4VAG.js} +15 -1
- package/dist/{chunk-TL4YU2O5.js → chunk-UKBNQO6Q.js} +2 -2
- package/dist/{chunk-UX6SWAKH.js → chunk-UZ3PCIE5.js} +119 -28
- package/dist/{chunk-YLNYXPIH.js → chunk-VBA45GLP.js} +1 -1
- package/dist/{chunk-A5ONAJCE.js → chunk-VG3PND3D.js} +1 -1
- package/dist/{chunk-ZBBUKXM5.js → chunk-X3WMRKOW.js} +1 -1
- package/dist/{chunk-HCM6LKM5.js → chunk-XNA2INVQ.js} +2 -2
- package/dist/{chunk-AV777R4G.js → chunk-YYGB4G4Q.js} +1 -1
- package/dist/components/accordion.js +1 -1
- package/dist/components/alert-dialog.js +1 -1
- package/dist/components/alert.js +1 -1
- package/dist/components/avatar.d.ts +10 -1
- package/dist/components/avatar.js +41 -14
- package/dist/components/badge.d.ts +11 -2
- package/dist/components/badge.js +1 -1
- package/dist/components/breadcrumb.js +1 -1
- package/dist/components/button.d.ts +1 -1
- package/dist/components/button.js +1 -1
- package/dist/components/calendar.js +3 -3
- package/dist/components/card.js +1 -1
- package/dist/components/carousel.js +1 -1
- package/dist/components/circular-progress.js +1 -1
- package/dist/components/combobox.js +3 -3
- package/dist/components/command.js +1 -1
- package/dist/components/currency-input.js +2 -2
- package/dist/components/date-input.js +1 -1
- package/dist/components/description-list.js +1 -1
- package/dist/components/drawer.js +5 -1
- package/dist/components/dropdown-menu.js +1 -1
- package/dist/components/empty-state.js +2 -2
- package/dist/components/field.js +2 -2
- package/dist/components/filter-category-row.js +2 -2
- package/dist/components/form.js +1 -1
- package/dist/components/haptic-button.js +1 -1
- package/dist/components/input-group.js +1 -1
- package/dist/components/input.js +1 -1
- package/dist/components/item.js +1 -1
- package/dist/components/kbd.js +1 -1
- package/dist/components/label.js +1 -1
- package/dist/components/link-button.js +1 -1
- package/dist/components/multi-select-combobox.js +4 -4
- package/dist/components/pagination.js +1 -1
- package/dist/components/place-about-tab.d.ts +17 -1
- package/dist/components/place-about-tab.js +4 -4
- package/dist/components/place-card.js +2 -2
- package/dist/components/place-details-mobile.js +7 -7
- package/dist/components/place-schedule-week.js +2 -2
- package/dist/components/popover.js +1 -1
- package/dist/components/searchable-select.js +3 -3
- package/dist/components/select.js +2 -2
- package/dist/components/selection-bar.js +1 -1
- package/dist/components/sheet.d.ts +23 -0
- package/dist/components/sheet.js +51 -14
- package/dist/components/sliding-panels.js +5 -1
- package/dist/components/sonner.js +2 -2
- package/dist/components/stepper.js +4 -1
- package/dist/components/table.js +1 -1
- package/dist/components/tabs.js +1 -1
- package/dist/components/tag-group.js +1 -1
- package/dist/components/tag.js +1 -1
- package/dist/components/text.d.ts +18 -0
- package/dist/components/text.js +1 -1
- package/dist/components/toggle-group.js +1 -1
- package/dist/components/toggle.js +1 -1
- package/dist/lib/card-hover.d.ts +75 -0
- package/dist/lib/card-hover.js +18 -0
- package/package.json +1 -1
- package/src/components/accordion.tsx +1 -1
- package/src/components/avatar.stories.tsx +59 -26
- package/src/components/avatar.test.tsx +129 -0
- package/src/components/avatar.tsx +93 -37
- package/src/components/badge.tsx +15 -3
- package/src/components/breadcrumb.tsx +1 -1
- package/src/components/button.tsx +16 -1
- package/src/components/calendar.tsx +2 -2
- package/src/components/circular-progress.tsx +1 -1
- package/src/components/command.tsx +2 -2
- package/src/components/currency-input.tsx +1 -1
- package/src/components/description-list.tsx +1 -1
- package/src/components/drawer.tsx +5 -1
- package/src/components/dropdown-menu.tsx +1 -1
- package/src/components/field.tsx +1 -1
- package/src/components/input-group.tsx +1 -1
- package/src/components/input.tsx +1 -1
- package/src/components/item.tsx +1 -1
- package/src/components/kbd.tsx +1 -1
- package/src/components/label.tsx +1 -1
- package/src/components/place-about-tab.tsx +131 -18
- package/src/components/place-card.tsx +1 -1
- package/src/components/place-details-mobile.tsx +2 -2
- package/src/components/popover.tsx +9 -1
- package/src/components/select.tsx +2 -2
- package/src/components/selection-bar.tsx +1 -1
- package/src/components/sheet.tsx +72 -12
- package/src/components/sliding-panels.stories.tsx +70 -0
- package/src/components/sliding-panels.test.tsx +116 -0
- package/src/components/sliding-panels.tsx +14 -0
- package/src/components/sonner.tsx +2 -2
- package/src/components/stepper.tsx +4 -1
- package/src/components/table.tsx +1 -1
- package/src/components/tabs.tsx +1 -1
- package/src/components/tag-group.tsx +1 -1
- package/src/components/tag.tsx +1 -1
- package/src/components/text.test.tsx +37 -3
- package/src/components/text.tsx +32 -3
- package/src/components/toggle.tsx +1 -1
- package/src/globals.css +53 -11
- package/src/lib/card-hover.ts +87 -0
- package/dist/chunk-EBAMCZDW.js +0 -112
- package/dist/chunk-VQNDZVI7.js +0 -106
- package/dist/components/toast.d.ts +0 -18
- package/dist/components/toast.js +0 -3
- package/dist/components/toaster.d.ts +0 -5
- package/dist/components/toaster.js +0 -25
- package/dist/components/use-toast.d.ts +0 -42
- package/dist/components/use-toast.js +0 -2
- package/src/components/toast.stories.tsx +0 -63
- package/src/components/toast.tsx +0 -130
- package/src/components/toaster.tsx +0 -31
- package/src/components/use-toast.ts +0 -180
package/dist/chunk-EBAMCZDW.js
DELETED
|
@@ -1,112 +0,0 @@
|
|
|
1
|
-
import { __spreadProps, __spreadValues, __objRest } from './chunk-3GWWZKX7.js';
|
|
2
|
-
import * as React from 'react';
|
|
3
|
-
|
|
4
|
-
var TOAST_LIMIT = 1;
|
|
5
|
-
var TOAST_REMOVE_DELAY = 1e6;
|
|
6
|
-
var count = 0;
|
|
7
|
-
function genId() {
|
|
8
|
-
count = (count + 1) % Number.MAX_SAFE_INTEGER;
|
|
9
|
-
return count.toString();
|
|
10
|
-
}
|
|
11
|
-
var toastTimeouts = /* @__PURE__ */ new Map();
|
|
12
|
-
var addToRemoveQueue = (toastId) => {
|
|
13
|
-
if (toastTimeouts.has(toastId)) {
|
|
14
|
-
return;
|
|
15
|
-
}
|
|
16
|
-
const timeout = setTimeout(() => {
|
|
17
|
-
toastTimeouts.delete(toastId);
|
|
18
|
-
dispatch({
|
|
19
|
-
type: "REMOVE_TOAST",
|
|
20
|
-
toastId
|
|
21
|
-
});
|
|
22
|
-
}, TOAST_REMOVE_DELAY);
|
|
23
|
-
toastTimeouts.set(toastId, timeout);
|
|
24
|
-
};
|
|
25
|
-
var reducer = (state, action) => {
|
|
26
|
-
switch (action.type) {
|
|
27
|
-
case "ADD_TOAST":
|
|
28
|
-
return __spreadProps(__spreadValues({}, state), {
|
|
29
|
-
toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT)
|
|
30
|
-
});
|
|
31
|
-
case "UPDATE_TOAST":
|
|
32
|
-
return __spreadProps(__spreadValues({}, state), {
|
|
33
|
-
toasts: state.toasts.map((t) => t.id === action.toast.id ? __spreadValues(__spreadValues({}, t), action.toast) : t)
|
|
34
|
-
});
|
|
35
|
-
case "DISMISS_TOAST": {
|
|
36
|
-
const { toastId } = action;
|
|
37
|
-
if (toastId) {
|
|
38
|
-
addToRemoveQueue(toastId);
|
|
39
|
-
} else {
|
|
40
|
-
state.toasts.forEach((toast2) => {
|
|
41
|
-
addToRemoveQueue(toast2.id);
|
|
42
|
-
});
|
|
43
|
-
}
|
|
44
|
-
return __spreadProps(__spreadValues({}, state), {
|
|
45
|
-
toasts: state.toasts.map(
|
|
46
|
-
(t) => t.id === toastId || toastId === void 0 ? __spreadProps(__spreadValues({}, t), {
|
|
47
|
-
open: false
|
|
48
|
-
}) : t
|
|
49
|
-
)
|
|
50
|
-
});
|
|
51
|
-
}
|
|
52
|
-
case "REMOVE_TOAST":
|
|
53
|
-
if (action.toastId === void 0) {
|
|
54
|
-
return __spreadProps(__spreadValues({}, state), {
|
|
55
|
-
toasts: []
|
|
56
|
-
});
|
|
57
|
-
}
|
|
58
|
-
return __spreadProps(__spreadValues({}, state), {
|
|
59
|
-
toasts: state.toasts.filter((t) => t.id !== action.toastId)
|
|
60
|
-
});
|
|
61
|
-
}
|
|
62
|
-
};
|
|
63
|
-
var listeners = [];
|
|
64
|
-
var memoryState = { toasts: [] };
|
|
65
|
-
function dispatch(action) {
|
|
66
|
-
memoryState = reducer(memoryState, action);
|
|
67
|
-
listeners.forEach((listener) => {
|
|
68
|
-
listener(memoryState);
|
|
69
|
-
});
|
|
70
|
-
}
|
|
71
|
-
function toast(_a) {
|
|
72
|
-
var props = __objRest(_a, []);
|
|
73
|
-
const id = genId();
|
|
74
|
-
const update = (props2) => dispatch({
|
|
75
|
-
type: "UPDATE_TOAST",
|
|
76
|
-
toast: __spreadProps(__spreadValues({}, props2), { id })
|
|
77
|
-
});
|
|
78
|
-
const dismiss = () => dispatch({ type: "DISMISS_TOAST", toastId: id });
|
|
79
|
-
dispatch({
|
|
80
|
-
type: "ADD_TOAST",
|
|
81
|
-
toast: __spreadProps(__spreadValues({}, props), {
|
|
82
|
-
id,
|
|
83
|
-
open: true,
|
|
84
|
-
onOpenChange: (open) => {
|
|
85
|
-
if (!open) dismiss();
|
|
86
|
-
}
|
|
87
|
-
})
|
|
88
|
-
});
|
|
89
|
-
return {
|
|
90
|
-
id,
|
|
91
|
-
dismiss,
|
|
92
|
-
update
|
|
93
|
-
};
|
|
94
|
-
}
|
|
95
|
-
function useToast() {
|
|
96
|
-
const [state, setState] = React.useState(memoryState);
|
|
97
|
-
React.useEffect(() => {
|
|
98
|
-
listeners.push(setState);
|
|
99
|
-
return () => {
|
|
100
|
-
const index = listeners.indexOf(setState);
|
|
101
|
-
if (index > -1) {
|
|
102
|
-
listeners.splice(index, 1);
|
|
103
|
-
}
|
|
104
|
-
};
|
|
105
|
-
}, [state]);
|
|
106
|
-
return __spreadProps(__spreadValues({}, state), {
|
|
107
|
-
toast,
|
|
108
|
-
dismiss: (toastId) => dispatch({ type: "DISMISS_TOAST", toastId })
|
|
109
|
-
});
|
|
110
|
-
}
|
|
111
|
-
|
|
112
|
-
export { reducer, toast, useToast };
|
package/dist/chunk-VQNDZVI7.js
DELETED
|
@@ -1,106 +0,0 @@
|
|
|
1
|
-
import { cn } from './chunk-FEK5XGZW.js';
|
|
2
|
-
import { __objRest, __spreadValues, __spreadProps } from './chunk-3GWWZKX7.js';
|
|
3
|
-
import * as React from 'react';
|
|
4
|
-
import * as ToastPrimitives from '@radix-ui/react-toast';
|
|
5
|
-
import { cva } from 'class-variance-authority';
|
|
6
|
-
import { X } from 'lucide-react';
|
|
7
|
-
import { jsx } from 'react/jsx-runtime';
|
|
8
|
-
|
|
9
|
-
var ToastProvider = ToastPrimitives.Provider;
|
|
10
|
-
var ToastViewport = React.forwardRef((_a, ref) => {
|
|
11
|
-
var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
|
|
12
|
-
return /* @__PURE__ */ jsx(
|
|
13
|
-
ToastPrimitives.Viewport,
|
|
14
|
-
__spreadValues({
|
|
15
|
-
ref,
|
|
16
|
-
className: cn(
|
|
17
|
-
"fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]",
|
|
18
|
-
className
|
|
19
|
-
)
|
|
20
|
-
}, props)
|
|
21
|
-
);
|
|
22
|
-
});
|
|
23
|
-
ToastViewport.displayName = ToastPrimitives.Viewport.displayName;
|
|
24
|
-
var toastVariants = cva(
|
|
25
|
-
"group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-xl p-6 pr-8 shadow-2xl transition-[transform,opacity] duration-[var(--duration-standard)] ease-[var(--ease-standard)] data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=open]:duration-[var(--duration-standard)] data-[state=closed]:duration-[var(--duration-exit-standard)] data-[state=open]:ease-[var(--ease-enter)] data-[state=closed]:ease-[var(--ease-exit)] data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full",
|
|
26
|
-
{
|
|
27
|
-
variants: {
|
|
28
|
-
variant: {
|
|
29
|
-
default: "glass text-foreground border border-border/50",
|
|
30
|
-
destructive: "destructive border border-destructive/60 bg-destructive text-destructive-foreground"
|
|
31
|
-
}
|
|
32
|
-
},
|
|
33
|
-
defaultVariants: {
|
|
34
|
-
variant: "default"
|
|
35
|
-
}
|
|
36
|
-
}
|
|
37
|
-
);
|
|
38
|
-
var Toast = React.forwardRef((_a, ref) => {
|
|
39
|
-
var _b = _a, { className, variant } = _b, props = __objRest(_b, ["className", "variant"]);
|
|
40
|
-
return /* @__PURE__ */ jsx(
|
|
41
|
-
ToastPrimitives.Root,
|
|
42
|
-
__spreadValues({
|
|
43
|
-
ref,
|
|
44
|
-
className: cn(toastVariants({ variant }), className)
|
|
45
|
-
}, props)
|
|
46
|
-
);
|
|
47
|
-
});
|
|
48
|
-
Toast.displayName = ToastPrimitives.Root.displayName;
|
|
49
|
-
var ToastAction = React.forwardRef((_a, ref) => {
|
|
50
|
-
var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
|
|
51
|
-
return /* @__PURE__ */ jsx(
|
|
52
|
-
ToastPrimitives.Action,
|
|
53
|
-
__spreadValues({
|
|
54
|
-
ref,
|
|
55
|
-
className: cn(
|
|
56
|
-
"inline-flex h-8 shrink-0 items-center justify-center rounded-lg border border-muted bg-transparent px-3 text-xs font-medium ring-offset-background transition-colors hover:bg-secondary focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive",
|
|
57
|
-
className
|
|
58
|
-
)
|
|
59
|
-
}, props)
|
|
60
|
-
);
|
|
61
|
-
});
|
|
62
|
-
ToastAction.displayName = ToastPrimitives.Action.displayName;
|
|
63
|
-
var ToastClose = React.forwardRef((_a, ref) => {
|
|
64
|
-
var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
|
|
65
|
-
return /* @__PURE__ */ jsx(
|
|
66
|
-
ToastPrimitives.Close,
|
|
67
|
-
__spreadProps(__spreadValues({
|
|
68
|
-
ref,
|
|
69
|
-
className: cn(
|
|
70
|
-
"absolute right-2 top-2 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-2 group-hover:opacity-100 group-[.destructive]:text-white group-[.destructive]:opacity-100 group-[.destructive]:hover:text-white group-[.destructive]:focus:ring-white/50 group-[.destructive]:focus:ring-offset-destructive",
|
|
71
|
-
className
|
|
72
|
-
),
|
|
73
|
-
"toast-close": ""
|
|
74
|
-
}, props), {
|
|
75
|
-
children: /* @__PURE__ */ jsx(X, { className: "h-4 w-4" })
|
|
76
|
-
})
|
|
77
|
-
);
|
|
78
|
-
});
|
|
79
|
-
ToastClose.displayName = ToastPrimitives.Close.displayName;
|
|
80
|
-
var ToastTitle = React.forwardRef((_a, ref) => {
|
|
81
|
-
var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
|
|
82
|
-
return /* @__PURE__ */ jsx(
|
|
83
|
-
ToastPrimitives.Title,
|
|
84
|
-
__spreadValues({
|
|
85
|
-
ref,
|
|
86
|
-
className: cn(
|
|
87
|
-
"text-sm font-semibold group-[.destructive]:text-destructive-foreground",
|
|
88
|
-
className
|
|
89
|
-
)
|
|
90
|
-
}, props)
|
|
91
|
-
);
|
|
92
|
-
});
|
|
93
|
-
ToastTitle.displayName = ToastPrimitives.Title.displayName;
|
|
94
|
-
var ToastDescription = React.forwardRef((_a, ref) => {
|
|
95
|
-
var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
|
|
96
|
-
return /* @__PURE__ */ jsx(
|
|
97
|
-
ToastPrimitives.Description,
|
|
98
|
-
__spreadValues({
|
|
99
|
-
ref,
|
|
100
|
-
className: cn("text-sm opacity-90 group-[.destructive]:text-white", className)
|
|
101
|
-
}, props)
|
|
102
|
-
);
|
|
103
|
-
});
|
|
104
|
-
ToastDescription.displayName = ToastPrimitives.Description.displayName;
|
|
105
|
-
|
|
106
|
-
export { Toast, ToastAction, ToastClose, ToastDescription, ToastProvider, ToastTitle, ToastViewport };
|
|
@@ -1,18 +0,0 @@
|
|
|
1
|
-
import * as class_variance_authority_types from 'class-variance-authority/types';
|
|
2
|
-
import * as React from 'react';
|
|
3
|
-
import * as ToastPrimitives from '@radix-ui/react-toast';
|
|
4
|
-
import { VariantProps } from 'class-variance-authority';
|
|
5
|
-
|
|
6
|
-
declare const ToastProvider: React.FC<ToastPrimitives.ToastProviderProps>;
|
|
7
|
-
declare const ToastViewport: React.ForwardRefExoticComponent<Omit<ToastPrimitives.ToastViewportProps & React.RefAttributes<HTMLOListElement>, "ref"> & React.RefAttributes<HTMLOListElement>>;
|
|
8
|
-
declare const Toast: React.ForwardRefExoticComponent<Omit<ToastPrimitives.ToastProps & React.RefAttributes<HTMLLIElement>, "ref"> & VariantProps<(props?: ({
|
|
9
|
-
variant?: "default" | "destructive" | null | undefined;
|
|
10
|
-
} & class_variance_authority_types.ClassProp) | undefined) => string> & React.RefAttributes<HTMLLIElement>>;
|
|
11
|
-
declare const ToastAction: React.ForwardRefExoticComponent<Omit<ToastPrimitives.ToastActionProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
|
|
12
|
-
declare const ToastClose: React.ForwardRefExoticComponent<Omit<ToastPrimitives.ToastCloseProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
|
|
13
|
-
declare const ToastTitle: React.ForwardRefExoticComponent<Omit<ToastPrimitives.ToastTitleProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
14
|
-
declare const ToastDescription: React.ForwardRefExoticComponent<Omit<ToastPrimitives.ToastDescriptionProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
15
|
-
type ToastProps = React.ComponentPropsWithoutRef<typeof Toast>;
|
|
16
|
-
type ToastActionElement = React.ReactElement<typeof ToastAction>;
|
|
17
|
-
|
|
18
|
-
export { Toast, ToastAction, type ToastActionElement, ToastClose, ToastDescription, type ToastProps, ToastProvider, ToastTitle, ToastViewport };
|
package/dist/components/toast.js
DELETED
|
@@ -1,25 +0,0 @@
|
|
|
1
|
-
import { useToast } from '../chunk-EBAMCZDW.js';
|
|
2
|
-
import { ToastProvider, Toast, ToastTitle, ToastDescription, ToastClose, ToastViewport } from '../chunk-VQNDZVI7.js';
|
|
3
|
-
import '../chunk-FEK5XGZW.js';
|
|
4
|
-
import { __objRest, __spreadProps, __spreadValues } from '../chunk-3GWWZKX7.js';
|
|
5
|
-
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
6
|
-
|
|
7
|
-
function Toaster() {
|
|
8
|
-
const { toasts } = useToast();
|
|
9
|
-
return /* @__PURE__ */ jsxs(ToastProvider, { children: [
|
|
10
|
-
toasts.map((_a) => {
|
|
11
|
-
var _b = _a, { id, title, description, action } = _b, props = __objRest(_b, ["id", "title", "description", "action"]);
|
|
12
|
-
return /* @__PURE__ */ jsxs(Toast, __spreadProps(__spreadValues({}, props), { children: [
|
|
13
|
-
/* @__PURE__ */ jsxs("div", { className: "grid gap-1", children: [
|
|
14
|
-
title && /* @__PURE__ */ jsx(ToastTitle, { children: title }),
|
|
15
|
-
description && /* @__PURE__ */ jsx(ToastDescription, { children: description })
|
|
16
|
-
] }),
|
|
17
|
-
action,
|
|
18
|
-
/* @__PURE__ */ jsx(ToastClose, {})
|
|
19
|
-
] }), id);
|
|
20
|
-
}),
|
|
21
|
-
/* @__PURE__ */ jsx(ToastViewport, {})
|
|
22
|
-
] });
|
|
23
|
-
}
|
|
24
|
-
|
|
25
|
-
export { Toaster };
|
|
@@ -1,42 +0,0 @@
|
|
|
1
|
-
import * as React from 'react';
|
|
2
|
-
import { ToastProps, ToastActionElement } from './toast.js';
|
|
3
|
-
import 'class-variance-authority/types';
|
|
4
|
-
import '@radix-ui/react-toast';
|
|
5
|
-
import 'class-variance-authority';
|
|
6
|
-
|
|
7
|
-
type ToasterToast = ToastProps & {
|
|
8
|
-
id: string;
|
|
9
|
-
title?: React.ReactNode;
|
|
10
|
-
description?: React.ReactNode;
|
|
11
|
-
action?: ToastActionElement;
|
|
12
|
-
};
|
|
13
|
-
type Action = {
|
|
14
|
-
type: "ADD_TOAST";
|
|
15
|
-
toast: ToasterToast;
|
|
16
|
-
} | {
|
|
17
|
-
type: "UPDATE_TOAST";
|
|
18
|
-
toast: Partial<ToasterToast>;
|
|
19
|
-
} | {
|
|
20
|
-
type: "DISMISS_TOAST";
|
|
21
|
-
toastId?: ToasterToast["id"];
|
|
22
|
-
} | {
|
|
23
|
-
type: "REMOVE_TOAST";
|
|
24
|
-
toastId?: ToasterToast["id"];
|
|
25
|
-
};
|
|
26
|
-
interface State {
|
|
27
|
-
toasts: ToasterToast[];
|
|
28
|
-
}
|
|
29
|
-
declare const reducer: (state: State, action: Action) => State;
|
|
30
|
-
type Toast = Omit<ToasterToast, "id">;
|
|
31
|
-
declare function toast({ ...props }: Toast): {
|
|
32
|
-
id: string;
|
|
33
|
-
dismiss: () => void;
|
|
34
|
-
update: (props: ToasterToast) => void;
|
|
35
|
-
};
|
|
36
|
-
declare function useToast(): {
|
|
37
|
-
toast: typeof toast;
|
|
38
|
-
dismiss: (toastId?: string) => void;
|
|
39
|
-
toasts: ToasterToast[];
|
|
40
|
-
};
|
|
41
|
-
|
|
42
|
-
export { reducer, toast, useToast };
|
|
@@ -1,63 +0,0 @@
|
|
|
1
|
-
import type { Meta, StoryObj } from "@storybook/react";
|
|
2
|
-
import {
|
|
3
|
-
Toast,
|
|
4
|
-
ToastAction,
|
|
5
|
-
ToastClose,
|
|
6
|
-
ToastDescription,
|
|
7
|
-
ToastProvider,
|
|
8
|
-
ToastTitle,
|
|
9
|
-
ToastViewport,
|
|
10
|
-
} from "./toast";
|
|
11
|
-
|
|
12
|
-
const meta = {
|
|
13
|
-
title: "Components/Toast",
|
|
14
|
-
component: Toast,
|
|
15
|
-
tags: ["autodocs"],
|
|
16
|
-
decorators: [
|
|
17
|
-
(Story) => (
|
|
18
|
-
<ToastProvider>
|
|
19
|
-
<Story />
|
|
20
|
-
<ToastViewport />
|
|
21
|
-
</ToastProvider>
|
|
22
|
-
),
|
|
23
|
-
],
|
|
24
|
-
} satisfies Meta<typeof Toast>;
|
|
25
|
-
|
|
26
|
-
export default meta;
|
|
27
|
-
type Story = StoryObj<typeof meta>;
|
|
28
|
-
|
|
29
|
-
export const Default: Story = {
|
|
30
|
-
render: () => (
|
|
31
|
-
<Toast open>
|
|
32
|
-
<div className="grid gap-1">
|
|
33
|
-
<ToastTitle>Notification</ToastTitle>
|
|
34
|
-
<ToastDescription>Your changes have been saved.</ToastDescription>
|
|
35
|
-
</div>
|
|
36
|
-
<ToastClose />
|
|
37
|
-
</Toast>
|
|
38
|
-
),
|
|
39
|
-
};
|
|
40
|
-
|
|
41
|
-
export const Destructive: Story = {
|
|
42
|
-
render: () => (
|
|
43
|
-
<Toast variant="destructive" open>
|
|
44
|
-
<div className="grid gap-1">
|
|
45
|
-
<ToastTitle>Error</ToastTitle>
|
|
46
|
-
<ToastDescription>Something went wrong.</ToastDescription>
|
|
47
|
-
</div>
|
|
48
|
-
<ToastClose />
|
|
49
|
-
</Toast>
|
|
50
|
-
),
|
|
51
|
-
};
|
|
52
|
-
|
|
53
|
-
export const WithAction: Story = {
|
|
54
|
-
render: () => (
|
|
55
|
-
<Toast open>
|
|
56
|
-
<div className="grid gap-1">
|
|
57
|
-
<ToastTitle>Event Created</ToastTitle>
|
|
58
|
-
<ToastDescription>Friday, March 14 at 2:00 PM</ToastDescription>
|
|
59
|
-
</div>
|
|
60
|
-
<ToastAction altText="Undo">Undo</ToastAction>
|
|
61
|
-
</Toast>
|
|
62
|
-
),
|
|
63
|
-
};
|
package/src/components/toast.tsx
DELETED
|
@@ -1,130 +0,0 @@
|
|
|
1
|
-
"use client";
|
|
2
|
-
|
|
3
|
-
import * as React from "react";
|
|
4
|
-
import * as ToastPrimitives from "@radix-ui/react-toast";
|
|
5
|
-
import { cva, type VariantProps } from "class-variance-authority";
|
|
6
|
-
import { X } from "lucide-react";
|
|
7
|
-
import { cn } from "../lib/utils";
|
|
8
|
-
|
|
9
|
-
const ToastProvider = ToastPrimitives.Provider;
|
|
10
|
-
|
|
11
|
-
const ToastViewport = React.forwardRef<
|
|
12
|
-
React.ElementRef<typeof ToastPrimitives.Viewport>,
|
|
13
|
-
React.ComponentPropsWithoutRef<typeof ToastPrimitives.Viewport>
|
|
14
|
-
>(({ className, ...props }, ref) => (
|
|
15
|
-
<ToastPrimitives.Viewport
|
|
16
|
-
ref={ref}
|
|
17
|
-
className={cn(
|
|
18
|
-
"fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]",
|
|
19
|
-
className
|
|
20
|
-
)}
|
|
21
|
-
{...props}
|
|
22
|
-
/>
|
|
23
|
-
));
|
|
24
|
-
ToastViewport.displayName = ToastPrimitives.Viewport.displayName;
|
|
25
|
-
|
|
26
|
-
const toastVariants = cva(
|
|
27
|
-
"group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-xl p-6 pr-8 shadow-2xl transition-[transform,opacity] duration-[var(--duration-standard)] ease-[var(--ease-standard)] data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=open]:duration-[var(--duration-standard)] data-[state=closed]:duration-[var(--duration-exit-standard)] data-[state=open]:ease-[var(--ease-enter)] data-[state=closed]:ease-[var(--ease-exit)] data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full",
|
|
28
|
-
{
|
|
29
|
-
variants: {
|
|
30
|
-
variant: {
|
|
31
|
-
default: "glass text-foreground border border-border/50",
|
|
32
|
-
destructive:
|
|
33
|
-
"destructive border border-destructive/60 bg-destructive text-destructive-foreground",
|
|
34
|
-
},
|
|
35
|
-
},
|
|
36
|
-
defaultVariants: {
|
|
37
|
-
variant: "default",
|
|
38
|
-
},
|
|
39
|
-
}
|
|
40
|
-
);
|
|
41
|
-
|
|
42
|
-
const Toast = React.forwardRef<
|
|
43
|
-
React.ElementRef<typeof ToastPrimitives.Root>,
|
|
44
|
-
React.ComponentPropsWithoutRef<typeof ToastPrimitives.Root> & VariantProps<typeof toastVariants>
|
|
45
|
-
>(({ className, variant, ...props }, ref) => {
|
|
46
|
-
return (
|
|
47
|
-
<ToastPrimitives.Root
|
|
48
|
-
ref={ref}
|
|
49
|
-
className={cn(toastVariants({ variant }), className)}
|
|
50
|
-
{...props}
|
|
51
|
-
/>
|
|
52
|
-
);
|
|
53
|
-
});
|
|
54
|
-
Toast.displayName = ToastPrimitives.Root.displayName;
|
|
55
|
-
|
|
56
|
-
const ToastAction = React.forwardRef<
|
|
57
|
-
React.ElementRef<typeof ToastPrimitives.Action>,
|
|
58
|
-
React.ComponentPropsWithoutRef<typeof ToastPrimitives.Action>
|
|
59
|
-
>(({ className, ...props }, ref) => (
|
|
60
|
-
<ToastPrimitives.Action
|
|
61
|
-
ref={ref}
|
|
62
|
-
className={cn(
|
|
63
|
-
"inline-flex h-8 shrink-0 items-center justify-center rounded-lg border border-muted bg-transparent px-3 text-xs font-medium ring-offset-background transition-colors hover:bg-secondary focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive",
|
|
64
|
-
className
|
|
65
|
-
)}
|
|
66
|
-
{...props}
|
|
67
|
-
/>
|
|
68
|
-
));
|
|
69
|
-
ToastAction.displayName = ToastPrimitives.Action.displayName;
|
|
70
|
-
|
|
71
|
-
const ToastClose = React.forwardRef<
|
|
72
|
-
React.ElementRef<typeof ToastPrimitives.Close>,
|
|
73
|
-
React.ComponentPropsWithoutRef<typeof ToastPrimitives.Close>
|
|
74
|
-
>(({ className, ...props }, ref) => (
|
|
75
|
-
<ToastPrimitives.Close
|
|
76
|
-
ref={ref}
|
|
77
|
-
className={cn(
|
|
78
|
-
"absolute right-2 top-2 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-2 group-hover:opacity-100 group-[.destructive]:text-white group-[.destructive]:opacity-100 group-[.destructive]:hover:text-white group-[.destructive]:focus:ring-white/50 group-[.destructive]:focus:ring-offset-destructive",
|
|
79
|
-
className
|
|
80
|
-
)}
|
|
81
|
-
toast-close=""
|
|
82
|
-
{...props}
|
|
83
|
-
>
|
|
84
|
-
<X className="h-4 w-4" />
|
|
85
|
-
</ToastPrimitives.Close>
|
|
86
|
-
));
|
|
87
|
-
ToastClose.displayName = ToastPrimitives.Close.displayName;
|
|
88
|
-
|
|
89
|
-
const ToastTitle = React.forwardRef<
|
|
90
|
-
React.ElementRef<typeof ToastPrimitives.Title>,
|
|
91
|
-
React.ComponentPropsWithoutRef<typeof ToastPrimitives.Title>
|
|
92
|
-
>(({ className, ...props }, ref) => (
|
|
93
|
-
<ToastPrimitives.Title
|
|
94
|
-
ref={ref}
|
|
95
|
-
className={cn(
|
|
96
|
-
"text-sm font-semibold group-[.destructive]:text-destructive-foreground",
|
|
97
|
-
className
|
|
98
|
-
)}
|
|
99
|
-
{...props}
|
|
100
|
-
/>
|
|
101
|
-
));
|
|
102
|
-
ToastTitle.displayName = ToastPrimitives.Title.displayName;
|
|
103
|
-
|
|
104
|
-
const ToastDescription = React.forwardRef<
|
|
105
|
-
React.ElementRef<typeof ToastPrimitives.Description>,
|
|
106
|
-
React.ComponentPropsWithoutRef<typeof ToastPrimitives.Description>
|
|
107
|
-
>(({ className, ...props }, ref) => (
|
|
108
|
-
<ToastPrimitives.Description
|
|
109
|
-
ref={ref}
|
|
110
|
-
className={cn("text-sm opacity-90 group-[.destructive]:text-white", className)}
|
|
111
|
-
{...props}
|
|
112
|
-
/>
|
|
113
|
-
));
|
|
114
|
-
ToastDescription.displayName = ToastPrimitives.Description.displayName;
|
|
115
|
-
|
|
116
|
-
type ToastProps = React.ComponentPropsWithoutRef<typeof Toast>;
|
|
117
|
-
|
|
118
|
-
type ToastActionElement = React.ReactElement<typeof ToastAction>;
|
|
119
|
-
|
|
120
|
-
export {
|
|
121
|
-
type ToastProps,
|
|
122
|
-
type ToastActionElement,
|
|
123
|
-
ToastProvider,
|
|
124
|
-
ToastViewport,
|
|
125
|
-
Toast,
|
|
126
|
-
ToastTitle,
|
|
127
|
-
ToastDescription,
|
|
128
|
-
ToastClose,
|
|
129
|
-
ToastAction,
|
|
130
|
-
};
|
|
@@ -1,31 +0,0 @@
|
|
|
1
|
-
"use client";
|
|
2
|
-
|
|
3
|
-
import {
|
|
4
|
-
Toast,
|
|
5
|
-
ToastClose,
|
|
6
|
-
ToastDescription,
|
|
7
|
-
ToastProvider,
|
|
8
|
-
ToastTitle,
|
|
9
|
-
ToastViewport,
|
|
10
|
-
} from "./toast";
|
|
11
|
-
import { useToast } from "./use-toast";
|
|
12
|
-
|
|
13
|
-
export function Toaster() {
|
|
14
|
-
const { toasts } = useToast();
|
|
15
|
-
|
|
16
|
-
return (
|
|
17
|
-
<ToastProvider>
|
|
18
|
-
{toasts.map(({ id, title, description, action, ...props }) => (
|
|
19
|
-
<Toast key={id} {...props}>
|
|
20
|
-
<div className="grid gap-1">
|
|
21
|
-
{title && <ToastTitle>{title}</ToastTitle>}
|
|
22
|
-
{description && <ToastDescription>{description}</ToastDescription>}
|
|
23
|
-
</div>
|
|
24
|
-
{action}
|
|
25
|
-
<ToastClose />
|
|
26
|
-
</Toast>
|
|
27
|
-
))}
|
|
28
|
-
<ToastViewport />
|
|
29
|
-
</ToastProvider>
|
|
30
|
-
);
|
|
31
|
-
}
|