@boxcustodia/library 2.0.0-alpha.25 → 2.0.0-alpha.26
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/components/tag/tag.cjs.js +1 -1
- package/dist/components/tag/tag.es.js +5 -5
- package/dist/components/toast/toast.cjs.js +1 -1
- package/dist/components/toast/toast.es.js +12 -5
- package/package.json +1 -1
- package/src/components/tag/tag.tsx +1 -1
- package/src/components/toast/toast.test.tsx +15 -0
- package/src/components/toast/toast.tsx +5 -2
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("@base-ui/react/merge-props"),g=require("@base-ui/react/use-render"),
|
|
2
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("@base-ui/react/merge-props"),g=require("@base-ui/react/use-render"),d=require("class-variance-authority"),u=require("../../lib/cn.cjs.js"),t=d.cva("group/tag inline-flex h-5 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 aria-invalid:border-error aria-invalid:ring-error/20 dark:aria-invalid:ring-error/40 [&>svg:not([data-slot=tooltip-trigger])]:pointer-events-none [&>svg]:size-3!",{variants:{variant:{default:"bg-primary text-primary-foreground [a]:hover:bg-primary/80",secondary:"bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80",error:"bg-error/10 text-error focus-visible:ring-error/20 dark:bg-error/20 dark:focus-visible:ring-error/40 [a]:hover:bg-error/20",success:"bg-success/10 text-success focus-visible:ring-success/20 dark:bg-success/20 dark:focus-visible:ring-success/40 [a]:hover:bg-success/20",warning:"bg-warning/10 text-warning focus-visible:ring-warning/20 dark:bg-warning/20 dark:focus-visible:ring-warning/40 [a]:hover:bg-warning/20",outline:"border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground",ghost:"hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50",link:"text-primary underline-offset-4 hover:underline"},color:{gray:"bg-gray-100 text-gray-600",red:"bg-red-100 text-red-600",orange:"bg-orange-100 text-orange-600",amber:"bg-amber-100 text-amber-600",green:"bg-green-100 text-green-600",teal:"bg-teal-100 text-teal-600",cyan:"bg-cyan-100 text-cyan-600",sky:"bg-sky-100 text-sky-600",blue:"bg-blue-100 text-blue-600",indigo:"bg-indigo-100 text-indigo-600",violet:"bg-violet-100 text-violet-600",purple:"bg-purple-100 text-purple-600",pink:"bg-pink-100 text-pink-600",rose:"bg-rose-100 text-rose-600"}}});function b({className:n,variant:i,color:e,render:a,...o}){const r=e?void 0:i??"default";return g.useRender({defaultTagName:"span",props:s.mergeProps({className:u.cn(t({variant:r,color:e}),n)},o),render:a,state:{slot:"tag",variant:r,color:e}})}exports.Tag=b;exports.tagVariants=t;
|
|
@@ -4,7 +4,7 @@ import { useRender as g } from "@base-ui/react/use-render";
|
|
|
4
4
|
import { cva as s } from "class-variance-authority";
|
|
5
5
|
import { cn as b } from "../../lib/cn.es.js";
|
|
6
6
|
const d = s(
|
|
7
|
-
"group/tag inline-flex h-5 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 aria-invalid:border-error aria-invalid:ring-error/20 dark:aria-invalid:ring-error/40 [&>svg]:pointer-events-none [&>svg]:size-3!",
|
|
7
|
+
"group/tag inline-flex h-5 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 aria-invalid:border-error aria-invalid:ring-error/20 dark:aria-invalid:ring-error/40 [&>svg:not([data-slot=tooltip-trigger])]:pointer-events-none [&>svg]:size-3!",
|
|
8
8
|
{
|
|
9
9
|
variants: {
|
|
10
10
|
variant: {
|
|
@@ -40,8 +40,8 @@ function p({
|
|
|
40
40
|
className: t,
|
|
41
41
|
variant: i,
|
|
42
42
|
color: r,
|
|
43
|
-
render:
|
|
44
|
-
...
|
|
43
|
+
render: o,
|
|
44
|
+
...n
|
|
45
45
|
}) {
|
|
46
46
|
const e = r ? void 0 : i ?? "default";
|
|
47
47
|
return g({
|
|
@@ -53,9 +53,9 @@ function p({
|
|
|
53
53
|
t
|
|
54
54
|
)
|
|
55
55
|
},
|
|
56
|
-
|
|
56
|
+
n
|
|
57
57
|
),
|
|
58
|
-
render:
|
|
58
|
+
render: o,
|
|
59
59
|
state: {
|
|
60
60
|
slot: "tag",
|
|
61
61
|
variant: e,
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),r=require("@base-ui/react/toast"),l=require("lucide-react"),f=require("react"),c=require("../../lib/cn.cjs.js"),v=require("../button/button.cjs.js"),d={default:{icon:null,ringClass:"ring-input",titleClass:"",bgClass:""},success:{icon:l.CircleCheck,ringClass:"ring-success",titleClass:"text-success",bgClass:"bg-success/5"},error:{icon:l.CircleX,ringClass:"ring-error",titleClass:"text-error",bgClass:"bg-error/5"},warning:{icon:l.TriangleAlert,ringClass:"ring-warning",titleClass:"text-warning",bgClass:"bg-warning/5"},info:{icon:l.Info,ringClass:"ring-info",titleClass:"text-info",bgClass:"bg-info/5"}};function g({variant:t="default"}={}){return c.cn("rounded-xl ring-1 bg-clip-padding p-4 shadow-lg bg-background",d[t].ringClass)}function u(t){return{...t,close:a=>t.close(a),add:a=>{if(a.id){const s=t.toasts;if(s){const n=s.find(p=>p.id===a.id);if(n&&n.transitionStatus!=="ending")return t.update(a.id,{bump:!1}),requestAnimationFrame(()=>{t.update(a.id,{bump:!0,...a.timeout!==void 0&&{timeout:a.timeout}})}),a.id;if(n&&n.transitionStatus==="ending")return a.id}}return t.add({...a})},update:(a,s)=>t.update(a,{...s}),promise:(a,s)=>t.promise(a,{loading:{...s.loading},success:typeof s.success=="function"?n=>({...s.success(n)}):{...s.success},error:typeof s.error=="function"?n=>({...s.error(n)}):{...s.error}})}}function m(){const t=r.Toast.useToastManager();return{...u(t),toasts:t.toasts}}function x(){return u(r.Toast.createToastManager())}let i=null;function o(t){return typeof t=="string"?{title:t}:t}const h=Object.assign(t=>i?.add({...o(t)}),{success:t=>i?.add({variant:"success",...o(t)}),error:t=>i?.add({variant:"error",...o(t)}),warning:t=>i?.add({variant:"warning",...o(t)}),info:t=>i?.add({variant:"info",...o(t)}),promise:(t,a)=>i?.promise(t,a)});function w(){const t=r.Toast.useToastManager();return i=f.useMemo(()=>u(t),[t]),f.useEffect(()=>()=>{i=null},[]),null}function b({children:t,toastManager:a,container:s}){return e.jsxs(r.Toast.Provider,{toastManager:a,children:[e.jsx(w,{}),t,e.jsx(r.Toast.Portal,{container:s,children:e.jsx(r.Toast.Viewport,{className:"fixed top-auto right-4 bottom-4 mx-auto flex w-[calc(100%-2rem)] sm:right-8 sm:bottom-8 sm:w-[340px]",children:e.jsx(y,{})})})]})}function y(){const{toasts:t}=m();return t.map(a=>e.jsxs(r.Toast.Root,{toast:a,"data-slot":"toast",className:c.cn("absolute right-0 bottom-0 left-auto z-[calc(var(--z-toast)-var(--toast-index))] mr-0 h-[var(--height)] w-full origin-bottom select-none",g({variant:a.variant}),"[--gap:0.75rem] [--height:var(--toast-frontmost-height,var(--toast-height))] [--offset-y:calc(var(--toast-offset-y)*-1+calc(var(--toast-index)*var(--gap)*-1)+var(--toast-swipe-movement-y))] [--peek:0.75rem] [--scale:calc(max(0,1-(var(--toast-index)*0.1)))] [--shrink:calc(1-var(--scale))]","[transform:translateX(var(--toast-swipe-movement-x))_translateY(calc(var(--toast-swipe-movement-y)-(var(--toast-index)*var(--peek))-(var(--shrink)*var(--height))))_scale(var(--scale))] [transition:transform_0.5s_cubic-bezier(0.22,1,0.36,1),opacity_0.5s,height_0.15s]","after:absolute after:top-full after:left-0 after:h-[calc(var(--gap)+1px)] after:w-full after:content-['']","data-[ending-style]:opacity-0 data-[expanded]:h-[var(--toast-height)] data-[expanded]:[transform:translateX(var(--toast-swipe-movement-x))_translateY(calc(var(--offset-y)))] data-[limited]:opacity-0 data-[starting-style]:[transform:translateY(150%)]","data-[ending-style]:data-[swipe-direction=down]:[transform:translateY(calc(var(--toast-swipe-movement-y)+150%))] data-[expanded]:data-[ending-style]:data-[swipe-direction=down]:[transform:translateY(calc(var(--toast-swipe-movement-y)+150%))]","data-[ending-style]:data-[swipe-direction=left]:[transform:translateX(calc(var(--toast-swipe-movement-x)-150%))_translateY(var(--offset-y))] data-[expanded]:data-[ending-style]:data-[swipe-direction=left]:[transform:translateX(calc(var(--toast-swipe-movement-x)-150%))_translateY(var(--offset-y))]","data-[ending-style]:data-[swipe-direction=right]:[transform:translateX(calc(var(--toast-swipe-movement-x)+150%))_translateY(var(--offset-y))] data-[expanded]:data-[ending-style]:data-[swipe-direction=right]:[transform:translateX(calc(var(--toast-swipe-movement-x)+150%))_translateY(var(--offset-y))]","data-[ending-style]:data-[swipe-direction=up]:[transform:translateY(calc(var(--toast-swipe-movement-y)-150%))] data-[expanded]:data-[ending-style]:data-[swipe-direction=up]:[transform:translateY(calc(var(--toast-swipe-movement-y)-150%))]","[&[data-ending-style]:not([data-limited]):not([data-swipe-direction])]:[transform:translateY(150%)]",a.bump&&"animate-toast-bump"),children:[e.jsx(T,{variant:a.variant}),e.jsxs(r.Toast.Content,{className:"isolate flex flex-col gap-1 transition-opacity [transition-duration:250ms] data-[behind]:pointer-events-none data-[behind]:opacity-0 data-[expanded]:pointer-events-auto data-[expanded]:opacity-100",children:[a.content??e.jsxs("div",{className:"flex items-start gap-2",children:[e.jsx(C,{variant:a.variant}),e.jsxs("div",{className:"flex flex-col gap-1 overflow-hidden",children:[e.jsx(r.Toast.Title,{"data-slot":"toast-title",className:c.cn("text-[0.975rem] leading-5 font-medium text-foreground",d[a.variant??"default"].titleClass)}),e.jsx(r.Toast.Description,{"data-slot":"toast-description",className:"text-[0.925rem] leading-5 text-muted-foreground"}),!!a.actions?.length&&e.jsx("div",{className:"mt-2 flex min-w-0 flex-nowrap gap-2 overflow-x-auto p-px",children:a.actions.map((s,n)=>e.jsx(v.Button,{...s},n))})]})]}),e.jsx(r.Toast.Close,{className:"absolute top-2 right-2 flex h-4 w-4 items-center justify-center rounded border-none bg-transparent text-current/50 hover:bg-foreground/10 hover:text-current","aria-label":"Cerrar",children:e.jsx(l.X,{className:"h-3 w-3"})})]})]},a.id))}function T({variant:t}){const a=t?d[t].bgClass:"";return e.jsx("div",{className:c.cn("absolute inset-0 rounded-[11px] bg-background/90",a)})}function C({variant:t}){if(!t||t==="default")return null;const{icon:a,titleClass:s}=d[t];return a?e.jsx(a,{"data-slot":"toast-icon",className:c.cn("mt-0.5 h-4 w-4 shrink-0",s)}):null}Object.defineProperty(exports,"ToastPrimitive",{enumerable:!0,get:()=>r.Toast});exports.ToastProvider=b;exports.createToastManager=x;exports.toast=h;exports.toastVariants=g;exports.useToastManager=m;
|
|
2
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),r=require("@base-ui/react/toast"),l=require("lucide-react"),f=require("react"),c=require("../../lib/cn.cjs.js"),v=require("../button/button.cjs.js"),d={default:{icon:null,ringClass:"ring-input",titleClass:"",bgClass:""},success:{icon:l.CircleCheck,ringClass:"ring-success",titleClass:"text-success",bgClass:"bg-success/5"},error:{icon:l.CircleX,ringClass:"ring-error",titleClass:"text-error",bgClass:"bg-error/5"},warning:{icon:l.TriangleAlert,ringClass:"ring-warning",titleClass:"text-warning",bgClass:"bg-warning/5"},info:{icon:l.Info,ringClass:"ring-info",titleClass:"text-info",bgClass:"bg-info/5"}};function g({variant:t="default"}={}){return c.cn("rounded-xl ring-1 bg-clip-padding p-4 shadow-lg bg-background",d[t].ringClass)}function u(t){return{...t,close:a=>t.close(a),add:a=>{if(a.id){const s=t.toasts;if(s){const n=s.find(p=>p.id===a.id);if(n&&n.transitionStatus!=="ending")return t.update(a.id,{bump:!1}),requestAnimationFrame(()=>{t.update(a.id,{bump:!0,...a.timeout!==void 0&&{timeout:a.timeout}})}),a.id;if(n&&n.transitionStatus==="ending")return a.id}}return t.add({...a})},update:(a,s)=>t.update(a,{...s}),promise:(a,s)=>t.promise(a,{loading:{...s.loading},success:typeof s.success=="function"?n=>({...s.success(n)}):{...s.success},error:typeof s.error=="function"?n=>({...s.error(n)}):{...s.error}})}}function m(){const t=r.Toast.useToastManager();return{...u(t),toasts:t.toasts}}function x(){return u(r.Toast.createToastManager())}let i=null;function o(t){return typeof t=="string"?{title:t}:t}const h=Object.assign(t=>i?.add({...o(t)}),{success:t=>i?.add({variant:"success",...o(t)}),error:t=>i?.add({variant:"error",...o(t)}),warning:t=>i?.add({variant:"warning",...o(t)}),info:t=>i?.add({variant:"info",...o(t)}),promise:(t,a)=>i?.promise(t,a)});function w(){const t=r.Toast.useToastManager();return i=f.useMemo(()=>u(t),[t]),f.useEffect(()=>()=>{i=null},[]),null}function b({children:t,toastManager:a,container:s}){return e.jsxs(r.Toast.Provider,{toastManager:a,children:[e.jsx(w,{}),t,e.jsx(r.Toast.Portal,{container:s,className:"relative z-[70]",children:e.jsx(r.Toast.Viewport,{"data-slot":"toast-viewport",className:"fixed top-auto right-4 bottom-4 mx-auto flex w-[calc(100%-2rem)] sm:right-8 sm:bottom-8 sm:w-[340px]",children:e.jsx(y,{})})})]})}function y(){const{toasts:t}=m();return t.map(a=>e.jsxs(r.Toast.Root,{toast:a,"data-slot":"toast",className:c.cn("absolute right-0 bottom-0 left-auto z-[calc(var(--z-toast)-var(--toast-index))] mr-0 h-[var(--height)] w-full origin-bottom select-none",g({variant:a.variant}),"[--gap:0.75rem] [--height:var(--toast-frontmost-height,var(--toast-height))] [--offset-y:calc(var(--toast-offset-y)*-1+calc(var(--toast-index)*var(--gap)*-1)+var(--toast-swipe-movement-y))] [--peek:0.75rem] [--scale:calc(max(0,1-(var(--toast-index)*0.1)))] [--shrink:calc(1-var(--scale))]","[transform:translateX(var(--toast-swipe-movement-x))_translateY(calc(var(--toast-swipe-movement-y)-(var(--toast-index)*var(--peek))-(var(--shrink)*var(--height))))_scale(var(--scale))] [transition:transform_0.5s_cubic-bezier(0.22,1,0.36,1),opacity_0.5s,height_0.15s]","after:absolute after:top-full after:left-0 after:h-[calc(var(--gap)+1px)] after:w-full after:content-['']","data-[ending-style]:opacity-0 data-[expanded]:h-[var(--toast-height)] data-[expanded]:[transform:translateX(var(--toast-swipe-movement-x))_translateY(calc(var(--offset-y)))] data-[limited]:opacity-0 data-[starting-style]:[transform:translateY(150%)]","data-[ending-style]:data-[swipe-direction=down]:[transform:translateY(calc(var(--toast-swipe-movement-y)+150%))] data-[expanded]:data-[ending-style]:data-[swipe-direction=down]:[transform:translateY(calc(var(--toast-swipe-movement-y)+150%))]","data-[ending-style]:data-[swipe-direction=left]:[transform:translateX(calc(var(--toast-swipe-movement-x)-150%))_translateY(var(--offset-y))] data-[expanded]:data-[ending-style]:data-[swipe-direction=left]:[transform:translateX(calc(var(--toast-swipe-movement-x)-150%))_translateY(var(--offset-y))]","data-[ending-style]:data-[swipe-direction=right]:[transform:translateX(calc(var(--toast-swipe-movement-x)+150%))_translateY(var(--offset-y))] data-[expanded]:data-[ending-style]:data-[swipe-direction=right]:[transform:translateX(calc(var(--toast-swipe-movement-x)+150%))_translateY(var(--offset-y))]","data-[ending-style]:data-[swipe-direction=up]:[transform:translateY(calc(var(--toast-swipe-movement-y)-150%))] data-[expanded]:data-[ending-style]:data-[swipe-direction=up]:[transform:translateY(calc(var(--toast-swipe-movement-y)-150%))]","[&[data-ending-style]:not([data-limited]):not([data-swipe-direction])]:[transform:translateY(150%)]",a.bump&&"animate-toast-bump"),children:[e.jsx(T,{variant:a.variant}),e.jsxs(r.Toast.Content,{className:"isolate flex flex-col gap-1 transition-opacity [transition-duration:250ms] data-[behind]:pointer-events-none data-[behind]:opacity-0 data-[expanded]:pointer-events-auto data-[expanded]:opacity-100",children:[a.content??e.jsxs("div",{className:"flex items-start gap-2",children:[e.jsx(C,{variant:a.variant}),e.jsxs("div",{className:"flex flex-col gap-1 overflow-hidden",children:[e.jsx(r.Toast.Title,{"data-slot":"toast-title",className:c.cn("text-[0.975rem] leading-5 font-medium text-foreground",d[a.variant??"default"].titleClass)}),e.jsx(r.Toast.Description,{"data-slot":"toast-description",className:"text-[0.925rem] leading-5 text-muted-foreground"}),!!a.actions?.length&&e.jsx("div",{className:"mt-2 flex min-w-0 flex-nowrap gap-2 overflow-x-auto p-px",children:a.actions.map((s,n)=>e.jsx(v.Button,{...s},n))})]})]}),e.jsx(r.Toast.Close,{className:"absolute top-2 right-2 flex h-4 w-4 items-center justify-center rounded border-none bg-transparent text-current/50 hover:bg-foreground/10 hover:text-current","aria-label":"Cerrar",children:e.jsx(l.X,{className:"h-3 w-3"})})]})]},a.id))}function T({variant:t}){const a=t?d[t].bgClass:"";return e.jsx("div",{className:c.cn("absolute inset-0 rounded-[11px] bg-background/90",a)})}function C({variant:t}){if(!t||t==="default")return null;const{icon:a,titleClass:s}=d[t];return a?e.jsx(a,{"data-slot":"toast-icon",className:c.cn("mt-0.5 h-4 w-4 shrink-0",s)}):null}Object.defineProperty(exports,"ToastPrimitive",{enumerable:!0,get:()=>r.Toast});exports.ToastProvider=b;exports.createToastManager=x;exports.toast=h;exports.toastVariants=g;exports.useToastManager=m;
|
|
@@ -93,14 +93,14 @@ function C() {
|
|
|
93
93
|
toasts: t.toasts
|
|
94
94
|
};
|
|
95
95
|
}
|
|
96
|
-
function
|
|
96
|
+
function z() {
|
|
97
97
|
return m(s.createToastManager());
|
|
98
98
|
}
|
|
99
99
|
let i = null;
|
|
100
100
|
function o(t) {
|
|
101
101
|
return typeof t == "string" ? { title: t } : t;
|
|
102
102
|
}
|
|
103
|
-
const
|
|
103
|
+
const P = Object.assign(
|
|
104
104
|
(t) => i?.add({ ...o(t) }),
|
|
105
105
|
{
|
|
106
106
|
success: (t) => i?.add({ variant: "success", ...o(t) }),
|
|
@@ -127,7 +127,14 @@ function B({
|
|
|
127
127
|
return /* @__PURE__ */ l(s.Provider, { toastManager: a, children: [
|
|
128
128
|
/* @__PURE__ */ r(T, {}),
|
|
129
129
|
t,
|
|
130
|
-
/* @__PURE__ */ r(s.Portal, { container: e,
|
|
130
|
+
/* @__PURE__ */ r(s.Portal, { container: e, className: "relative z-[70]", children: /* @__PURE__ */ r(
|
|
131
|
+
s.Viewport,
|
|
132
|
+
{
|
|
133
|
+
"data-slot": "toast-viewport",
|
|
134
|
+
className: "fixed top-auto right-4 bottom-4 mx-auto flex w-[calc(100%-2rem)] sm:right-8 sm:bottom-8 sm:w-[340px]",
|
|
135
|
+
children: /* @__PURE__ */ r(N, {})
|
|
136
|
+
}
|
|
137
|
+
) })
|
|
131
138
|
] });
|
|
132
139
|
}
|
|
133
140
|
function N() {
|
|
@@ -217,8 +224,8 @@ function Y({ variant: t }) {
|
|
|
217
224
|
export {
|
|
218
225
|
V as ToastPrimitive,
|
|
219
226
|
B as ToastProvider,
|
|
220
|
-
|
|
221
|
-
|
|
227
|
+
z as createToastManager,
|
|
228
|
+
P as toast,
|
|
222
229
|
y as toastVariants,
|
|
223
230
|
C as useToastManager
|
|
224
231
|
};
|
package/package.json
CHANGED
|
@@ -6,7 +6,7 @@ import { cva, type VariantProps } from "class-variance-authority";
|
|
|
6
6
|
import { cn } from "../../lib";
|
|
7
7
|
|
|
8
8
|
const tagVariants = cva(
|
|
9
|
-
"group/tag inline-flex h-5 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 aria-invalid:border-error aria-invalid:ring-error/20 dark:aria-invalid:ring-error/40 [&>svg]:pointer-events-none [&>svg]:size-3!",
|
|
9
|
+
"group/tag inline-flex h-5 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 aria-invalid:border-error aria-invalid:ring-error/20 dark:aria-invalid:ring-error/40 [&>svg:not([data-slot=tooltip-trigger])]:pointer-events-none [&>svg]:size-3!",
|
|
10
10
|
{
|
|
11
11
|
variants: {
|
|
12
12
|
variant: {
|
|
@@ -309,6 +309,21 @@ describe("Toast actions", () => {
|
|
|
309
309
|
});
|
|
310
310
|
});
|
|
311
311
|
|
|
312
|
+
describe("Toast viewport", () => {
|
|
313
|
+
it("toast portal wrapper carries z-[70] for stacking above dialog", async () => {
|
|
314
|
+
renderWithProvider(
|
|
315
|
+
<button onClick={() => toast.success("Stacking test")}>Trigger</button>,
|
|
316
|
+
);
|
|
317
|
+
await userEvent.click(screen.getByText("Trigger"));
|
|
318
|
+
await screen.findByText("Stacking test");
|
|
319
|
+
const viewport = document.querySelector('[data-slot="toast-viewport"]');
|
|
320
|
+
expect(viewport).toBeInTheDocument();
|
|
321
|
+
const portalWrapper = document.querySelector('[data-base-ui-portal]');
|
|
322
|
+
expect(portalWrapper).toBeInTheDocument();
|
|
323
|
+
expect(portalWrapper).toHaveClass("z-[70]");
|
|
324
|
+
});
|
|
325
|
+
});
|
|
326
|
+
|
|
312
327
|
describe("Toast exports", () => {
|
|
313
328
|
it("exports ToastPrimitive", () => {
|
|
314
329
|
expect(ToastPrimitive).toBeDefined();
|
|
@@ -313,8 +313,11 @@ export function ToastProvider({
|
|
|
313
313
|
<Toast.Provider toastManager={toastManager}>
|
|
314
314
|
<ToastManagerBridge />
|
|
315
315
|
{children}
|
|
316
|
-
<Toast.Portal container={container}>
|
|
317
|
-
<Toast.Viewport
|
|
316
|
+
<Toast.Portal container={container} className="relative z-[70]">
|
|
317
|
+
<Toast.Viewport
|
|
318
|
+
data-slot="toast-viewport"
|
|
319
|
+
className="fixed top-auto right-4 bottom-4 mx-auto flex w-[calc(100%-2rem)] sm:right-8 sm:bottom-8 sm:w-[340px]"
|
|
320
|
+
>
|
|
318
321
|
<ToastList />
|
|
319
322
|
</Toast.Viewport>
|
|
320
323
|
</Toast.Portal>
|