@spark-ui/components 14.1.2 → 15.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (38) hide show
  1. package/dist/FormFieldRequiredIndicator-CHfcoT2y.js +2 -0
  2. package/dist/FormFieldRequiredIndicator-CHfcoT2y.js.map +1 -0
  3. package/dist/FormFieldRequiredIndicator-DTnCGiX2.mjs +13 -0
  4. package/dist/FormFieldRequiredIndicator-DTnCGiX2.mjs.map +1 -0
  5. package/dist/dialog/Dialog.d.ts +1 -0
  6. package/dist/dialog/index.js +1 -1
  7. package/dist/dialog/index.js.map +1 -1
  8. package/dist/dialog/index.mjs +19 -18
  9. package/dist/dialog/index.mjs.map +1 -1
  10. package/dist/form-field/index.js +1 -1
  11. package/dist/form-field/index.js.map +1 -1
  12. package/dist/form-field/index.mjs +76 -81
  13. package/dist/form-field/index.mjs.map +1 -1
  14. package/dist/slider/Slider.d.ts +8 -13
  15. package/dist/slider/SliderContext.d.ts +7 -1
  16. package/dist/slider/SliderControl.d.ts +7 -0
  17. package/dist/slider/SliderIndicator.d.ts +7 -0
  18. package/dist/slider/SliderLabel.d.ts +13 -0
  19. package/dist/slider/SliderMaxValue.d.ts +6 -0
  20. package/dist/slider/SliderMinValue.d.ts +6 -0
  21. package/dist/slider/SliderThumb.d.ts +4 -11
  22. package/dist/slider/SliderThumbContext.d.ts +5 -0
  23. package/dist/slider/SliderTrack.d.ts +4 -11
  24. package/dist/slider/SliderTrack.styles.d.ts +1 -4
  25. package/dist/slider/SliderValue.d.ts +10 -0
  26. package/dist/slider/index.d.mts +13 -1
  27. package/dist/slider/index.d.ts +13 -1
  28. package/dist/slider/index.js +1 -1
  29. package/dist/slider/index.js.map +1 -1
  30. package/dist/slider/index.mjs +290 -127
  31. package/dist/slider/index.mjs.map +1 -1
  32. package/dist/slider/useSliderValueBoundaries.d.ts +12 -0
  33. package/dist/toast/index.js +1 -1
  34. package/dist/toast/index.js.map +1 -1
  35. package/dist/toast/index.mjs +154 -129
  36. package/dist/toast/index.mjs.map +1 -1
  37. package/dist/toast/types.d.ts +4 -1
  38. package/package.json +4 -4
@@ -1,2 +1,2 @@
1
- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),a=require("@base-ui/react/toast"),w=require("../Slot-DQ8z2zsy.js"),l=require("class-variance-authority"),h=require("../Button-B6rA3-e5.js"),y=require("../Icon-CF0W0LKr.js"),_=require("../IconButton-D3g86WpZ.js"),I=require("@spark-ui/icons/Close"),N=require("react");function C(e){const n=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const s in e)if(s!=="default"){const i=Object.getOwnPropertyDescriptor(e,s);Object.defineProperty(n,s,i.get?i:{enumerable:!0,get:()=>e[s]})}}return n.default=e,Object.freeze(n)}const P=C(N),M=l.cva(["gap-lg p-md flex w-max !w-[min(400px,calc(100vw-2rem))] flex-col rounded-lg","absolute right-0 bottom-0 left-auto mr-0","bg-clip-padding shadow-md select-none","focus-visible:ring-focus focus-visible:ring-2 focus-visible:outline-none","z-[calc(1000-var(--toast-index))]","after:absolute after:bottom-full after:left-0 after:h-[calc(var(--gap)+1px)] after:w-full after:content-['']","[transform:translateX(var(--toast-swipe-movement-x))_translateY(calc(var(--toast-swipe-movement-y)+calc(min(var(--toast-index),10)*-16px)))_scale(calc(max(0,1-(var(--toast-index)*0.1))))]","ease-standard [transition-property:opacity,transform]","duration-400","data-[starting-style]:[transform:translateY(150%)]","data-[expanded]:[transform:translateX(var(--toast-swipe-movement-x))_translateY(calc(var(--toast-offset-y)*-1+calc(var(--toast-index)*var(--gap)*-1)+var(--toast-swipe-movement-y)))]","data-[ending-style]:duration-250","data-[ending-style]:opacity-0","data-[ending-style]:data-[swipe-direction=down]:[transform:translateY(calc(var(--toast-swipe-movement-y)+150%))]","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-[limited]:opacity-0"],{variants:{design:{filled:"",tinted:""},intent:{success:"",alert:"",error:"",info:"",neutral:"",main:"",basic:"",support:"",accent:"",surface:"",surfaceInverse:""}},compoundVariants:[{design:"filled",intent:"success",class:["bg-success text-on-success"]},{design:"filled",intent:"alert",class:["bg-alert text-on-alert"]},{design:"filled",intent:"error",class:["bg-error text-on-error"]},{design:"filled",intent:"info",class:["bg-info text-on-info"]},{design:"filled",intent:"neutral",class:["bg-neutral text-on-neutral"]},{design:"filled",intent:"main",class:["bg-main text-on-main"]},{design:"filled",intent:"basic",class:["bg-basic text-on-basic"]},{design:"filled",intent:"support",class:["bg-support text-on-support"]},{design:"filled",intent:"accent",class:["bg-accent text-on-accent"]},{design:"filled",intent:"surface",class:["bg-surface text-on-surface"]},{design:"filled",intent:"surfaceInverse",class:["bg-surface-inverse text-on-surface-inverse"]},{design:"tinted",intent:"success",class:["bg-success-container text-on-success-container"]},{design:"tinted",intent:"alert",class:["bg-alert-container text-on-alert-container"]},{design:"tinted",intent:"error",class:["bg-error-container text-on-error-container"]},{design:"tinted",intent:"info",class:["bg-info-container text-on-info-container"]},{design:"tinted",intent:"neutral",class:["bg-neutral-container text-on-neutral-container"]},{design:"tinted",intent:"main",class:["bg-main-container text-on-main-container"]},{design:"tinted",intent:"basic",class:["bg-basic-container text-on-basic-container"]},{design:"tinted",intent:"support",class:["bg-support-container text-on-support-container"]},{design:"tinted",intent:"accent",class:["bg-accent-container text-on-accent-container"]},{design:"tinted",intent:"surface",class:["bg-surface text-on-surface"]},{design:"tinted",intent:"surfaceInverse",class:["bg-surface-inverse text-on-surface-inverse"]}],defaultVariants:{design:"filled",intent:"neutral"}});l.cva(["inline-grid items-center","col-start-1 row-start-1","pl-md pr-lg"],{variants:{actionOnNewline:{true:["grid-rows-[52px_1fr_52px]","grid-cols-[min-content_1fr_min-content]","[grid-template-areas:'icon_message_close'_'._message_.'_'action_action_action']"],false:["grid-cols-[min-content_1fr_min-content_min-content]","[grid-template-areas:'icon_message_action_close']"]}},defaultVariants:{actionOnNewline:!1}});function q(e){return e==="surfaceInverse"?"surface":e==="surface"?"surfaceInverse":e==="error"?"danger":e}function B(e){return e==="surfaceInverse"?"surfaceInverse":e==="surface"?"surface":e==="error"?"danger":e}const D=(e,{toastDesign:n,toastIntent:s})=>{if(!e)return{};const{design:i,intent:c,className:d,onClick:u,...o}=e;return{design:i??n,intent:c??q(s),className:l.cx("ml-auto",d),onClick:u,...o}},O=(e,n,s)=>({key:e.id,swipeDirection:["down","right"],toast:e,className:l.cx(M({design:n,intent:s})),style:{"--gap":"var(--spacing-md)","--offset-y":"calc(var(--toast-offset-y) * -1 + (var(--toast-index) * var(--gap) * -1) + var(--toast-swipe-movement-y))"}});function S({toast:e}){const{icon:n,intent:s="neutral",design:i="filled",action:c,isClosable:d,closeLabel:u="Close",compact:o=!1}=e.data??{},m=c?.close?a.Toast.Close:a.Toast.Action,g=D(c,{toastDesign:i,toastIntent:s}),p=O(e,i,s),f=r=>d?t.jsx(a.Toast.Close,{className:r,render:t.jsx(_.IconButton,{"aria-label":u,design:i,intent:B(s),size:"md"}),children:t.jsx(y.Icon,{children:t.jsx(I.Close,{})})}):null,v=()=>{const r=e.data?.title??e.title,x=!!(e.data?.description??e.description);return typeof r!="string"&&r!==void 0?t.jsx(a.Toast.Title,{className:x?"text-headline-2":"text-body-1",render:t.jsx("div",{}),children:r}):t.jsx(a.Toast.Title,{className:x?"text-headline-2":"text-body-1"})},b=()=>{const r=e.data?.description??e.description;return r?typeof r!="string"?t.jsx(a.Toast.Description,{className:"text-body-1",render:t.jsx("div",{}),children:r}):t.jsx(a.Toast.Description,{className:"text-body-1"}):null};return t.jsx(a.Toast.Root,{...p,children:t.jsxs("div",{className:l.cx("flex",o?"gap-lg items-center":"gap-md flex-col"),children:[t.jsxs("div",{className:"gap-lg p-md flex grow items-center",children:[n&&t.jsx(y.Icon,{size:"md",children:n}),t.jsxs("div",{className:l.cx("gap-sm flex flex-col",o&&"flex-1",!o&&d&&"pr-3xl"),children:[v(),b()]})]}),t.jsxs("div",{className:l.cx("flex"),children:[c&&t.jsx(m,{render:t.jsx(h.Button,{...g}),children:c.label}),o&&f()]}),!o&&f("top-md right-md absolute")]})})}function T(){const e=a.Toast.useToastManager(),n=P.useCallback(()=>{e.toasts.forEach(({id:s})=>e.close(s))},[e]);return{...e,closeAll:n}}function Y(){const{toasts:e}=T();return e.map(n=>t.jsx(S,{toast:n},n.id))}function k({children:e,limit:n=3,...s}){return t.jsxs(a.Toast.Provider,{limit:n,...s,children:[t.jsx(a.Toast.Portal,{children:t.jsx(a.Toast.Viewport,{className:l.cx("z-toast right-lg bottom-lg text-on-surfa- fixed top-auto mx-auto flex w-fit flex-col items-end"),children:t.jsx(Y,{})})}),e]})}function z({children:e,onClick:n,asChild:s=!1,title:i,description:c,timeout:d=5e3,design:u="filled",intent:o="neutral",isClosable:m=!0,icon:g,action:p,compact:f,priority:v="low"}){const b=T(),r=s?w.Slot:"button";function x(j){n?.(j),b.add({title:i,description:c,timeout:d,priority:v,data:{design:u,intent:o,isClosable:m,...g&&{icon:g},action:p,...f!==void 0&&{compact:f}}})}return t.jsx(r,{...!s&&{type:"button"},onClick:x,children:e})}const A=a.Toast.createToastManager;exports.ToastProvider=k;exports.ToastTrigger=z;exports.createToastManager=A;exports.useToastManager=T;
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),r=require("@base-ui/react/toast"),_=require("../Slot-DQ8z2zsy.js"),c=require("class-variance-authority"),I=require("../Button-B6rA3-e5.js"),w=require("../Icon-CF0W0LKr.js"),N=require("../IconButton-D3g86WpZ.js"),q=require("@spark-ui/icons/AlertFill"),C=require("@spark-ui/icons/Close"),h=require("@spark-ui/icons/InfoFill"),P=require("@spark-ui/icons/ValidFill"),M=require("@spark-ui/icons/WarningFill"),D=require("react");function F(e){const s=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const n in e)if(n!=="default"){const l=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(s,n,l.get?l:{enumerable:!0,get:()=>e[n]})}}return s.default=e,Object.freeze(s)}const B=F(D),O=c.cva(["gap-lg p-md flex w-max !w-[min(400px,calc(100vw-2rem))] flex-col rounded-lg border-md","absolute right-0 bottom-0 left-auto mr-0","bg-clip-padding shadow-md select-none","focus-visible:ring-focus focus-visible:ring-2 focus-visible:outline-none","z-[calc(1000-var(--toast-index))]","after:absolute after:bottom-full after:left-0 after:h-[calc(var(--gap)+1px)] after:w-full after:content-['']","[transform:translateX(var(--toast-swipe-movement-x))_translateY(calc(var(--toast-swipe-movement-y)+calc(min(var(--toast-index),10)*-16px)))_scale(calc(max(0,1-(var(--toast-index)*0.1))))]","ease-standard [transition-property:opacity,transform]","duration-400","data-[starting-style]:[transform:translateY(150%)]","data-[expanded]:[transform:translateX(var(--toast-swipe-movement-x))_translateY(calc(var(--toast-offset-y)*-1+calc(var(--toast-index)*var(--gap)*-1)+var(--toast-swipe-movement-y)))]","data-[ending-style]:duration-250","data-[ending-style]:opacity-0","data-[ending-style]:data-[swipe-direction=down]:[transform:translateY(calc(var(--toast-swipe-movement-y)+150%))]","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-[limited]:opacity-0"],{variants:{design:{filled:"",tinted:""},intent:{success:"",alert:"",error:"",info:"",neutral:"",main:"",basic:"",support:"",accent:"",surface:"",surfaceInverse:""}},compoundVariants:[{design:"filled",intent:"success",class:["bg-success text-on-success border-success"]},{design:"filled",intent:"alert",class:["bg-alert text-on-alert border-alert"]},{design:"filled",intent:"error",class:["bg-error text-on-error border-error"]},{design:"filled",intent:"info",class:["bg-info text-on-info border-info"]},{design:"filled",intent:"neutral",class:["bg-neutral text-on-neutral border-neutral"]},{design:"filled",intent:"main",class:["bg-main text-on-main border-main"]},{design:"filled",intent:"basic",class:["bg-basic text-on-basic border-basic"]},{design:"filled",intent:"support",class:["bg-support text-on-support border-support"]},{design:"filled",intent:"accent",class:["bg-accent text-on-accent border-accent"]},{design:"filled",intent:"surface",class:["bg-surface text-on-surface border-surface"]},{design:"filled",intent:"surfaceInverse",class:["bg-surface-inverse text-on-surface-inverse border-surface-inverse"]},{design:"tinted",intent:"success",class:["bg-success-container text-on-success-container border-success"]},{design:"tinted",intent:"alert",class:["bg-alert-container text-on-alert-container border-alert"]},{design:"tinted",intent:"error",class:["bg-error-container text-on-error-container border-error"]},{design:"tinted",intent:"info",class:["bg-info-container text-on-info-container border-info"]},{design:"tinted",intent:"neutral",class:["bg-neutral-container text-on-neutral-container border-neutral"]},{design:"tinted",intent:"main",class:["bg-main-container text-on-main-container border-main"]},{design:"tinted",intent:"basic",class:["bg-basic-container text-on-basic-container border-basic"]},{design:"tinted",intent:"support",class:["bg-support-container text-on-support-container border-support"]},{design:"tinted",intent:"accent",class:["bg-accent-container text-on-accent-container border-accent"]},{design:"tinted",intent:"surface",class:["bg-surface text-on-surface border-surface"]},{design:"tinted",intent:"surfaceInverse",class:["bg-surface-inverse text-on-surface-inverse border-surface-inverse"]}],defaultVariants:{design:"filled",intent:"neutral"}});c.cva(["inline-grid items-center","col-start-1 row-start-1","pl-md pr-lg"],{variants:{actionOnNewline:{true:["grid-rows-[52px_1fr_52px]","grid-cols-[min-content_1fr_min-content]","[grid-template-areas:'icon_message_close'_'._message_.'_'action_action_action']"],false:["grid-cols-[min-content_1fr_min-content_min-content]","[grid-template-areas:'icon_message_action_close']"]}},defaultVariants:{actionOnNewline:!1}});function A(e){return e==="surfaceInverse"?"surface":e==="surface"?"surfaceInverse":e==="error"?"danger":e}function S(e){return e==="surfaceInverse"?"surfaceInverse":e==="surface"?"surface":e==="error"?"danger":e}const V=(e,{toastDesign:s,toastIntent:n})=>{if(!e)return{};const{design:l,intent:i,className:d,onClick:u,...o}=e;return{design:l??s,intent:i??A(n),className:c.cx("ml-auto",d),onClick:u,...o}},Y=(e,s,n)=>({swipeDirection:["down","right"],toast:e,className:c.cx(O({design:s,intent:n})),style:{"--gap":"var(--spacing-md)","--offset-y":"calc(var(--toast-offset-y) * -1 + (var(--toast-index) * var(--gap) * -1) + var(--toast-swipe-movement-y))"}});function z(e){switch(e){case"info":return t.jsx(h.InfoFill,{});case"success":return t.jsx(P.ValidFill,{});case"alert":return t.jsx(M.WarningFill,{});case"error":return t.jsx(q.AlertFill,{});case"main":case"support":case"accent":case"basic":case"neutral":case"surface":case"surfaceInverse":default:return t.jsx(h.InfoFill,{})}}function R({toast:e}){const{icon:s,intent:n="info",design:l,action:i,isClosable:d,closeLabel:u="Close",compact:o=!1}=e.data??{},f="tinted",g=i?.close?r.Toast.Close:r.Toast.Action,p=V(i,{toastDesign:f,toastIntent:n}),x=Y(e,f,n),b=s??z(n),m=a=>d?t.jsx(r.Toast.Close,{className:a,render:t.jsx(N.IconButton,{"aria-label":u,design:f,intent:S(n),size:"md"}),children:t.jsx(w.Icon,{children:t.jsx(C.Close,{})})}):null,v=()=>{const a=e.data?.title??e.title,y=!!(e.data?.description??e.description);return typeof a!="string"&&a!==void 0?t.jsx(r.Toast.Title,{className:y?"text-headline-2":"text-body-1",render:t.jsx("div",{}),children:a}):t.jsx(r.Toast.Title,{className:y?"text-headline-2":"text-body-1"})},T=()=>{const a=e.data?.description??e.description;return a?typeof a!="string"?t.jsx(r.Toast.Description,{className:"text-body-1",render:t.jsx("div",{}),children:a}):t.jsx(r.Toast.Description,{className:"text-body-1"}):null};return t.jsx(r.Toast.Root,{...x,children:t.jsxs("div",{className:c.cx("flex",o?"gap-lg items-center":"gap-md flex-col"),children:[t.jsxs("div",{className:"gap-lg p-md flex grow items-center",children:[t.jsx(w.Icon,{size:"md",children:b}),t.jsxs("div",{className:c.cx("gap-sm flex flex-col",o&&"flex-1",!o&&d&&"pr-3xl"),children:[v(),T()]})]}),t.jsxs("div",{className:c.cx("flex"),children:[i&&t.jsx(g,{render:t.jsx(I.Button,{...p}),children:i.label}),o&&m()]}),!o&&m("top-md right-md absolute")]})},e.id)}function j(){const e=r.Toast.useToastManager(),s=B.useCallback(()=>{e.toasts.forEach(({id:n})=>e.close(n))},[e]);return{...e,closeAll:s}}function k(){const{toasts:e}=j();return e.map(s=>t.jsx(R,{toast:s},s.id))}function X({children:e,limit:s=3,...n}){return t.jsxs(r.Toast.Provider,{limit:s,...n,children:[t.jsx(r.Toast.Portal,{children:t.jsx(r.Toast.Viewport,{className:c.cx("z-toast right-lg bottom-lg text-on-surfa- fixed top-auto mx-auto flex w-fit flex-col items-end"),children:t.jsx(k,{})})}),e]})}function L({children:e,onClick:s,asChild:n=!1,title:l,description:i,timeout:d=5e3,design:u="filled",intent:o="neutral",isClosable:f=!0,icon:g,action:p,compact:x,priority:b="low"}){const m=j(),v=n?_.Slot:"button";function T(a){s?.(a),m.add({title:l,description:i,timeout:d,priority:b,data:{design:u,intent:o,isClosable:f,...g&&{icon:g},action:p,...x!==void 0&&{compact:x}}})}return t.jsx(v,{...!n&&{type:"button"},onClick:T,children:e})}const W=r.Toast.createToastManager;exports.ToastProvider=X;exports.ToastTrigger=L;exports.createToastManager=W;exports.useToastManager=j;
2
2
  //# sourceMappingURL=index.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sources":["../../src/toast/Toast.styles.ts","../../src/toast/Toast.tsx","../../src/toast/useToastManager.ts","../../src/toast/index.tsx"],"sourcesContent":["import { cva, VariantProps } from 'class-variance-authority'\n\nexport const toastStyles = cva(\n [\n 'gap-lg p-md flex w-max !w-[min(400px,calc(100vw-2rem))] flex-col rounded-lg',\n 'absolute right-0 bottom-0 left-auto mr-0',\n 'bg-clip-padding shadow-md select-none',\n 'focus-visible:ring-focus focus-visible:ring-2 focus-visible:outline-none',\n 'z-[calc(1000-var(--toast-index))]',\n \"after:absolute after:bottom-full after:left-0 after:h-[calc(var(--gap)+1px)] after:w-full after:content-['']\",\n // Stack effect while not focused\n '[transform:translateX(var(--toast-swipe-movement-x))_translateY(calc(var(--toast-swipe-movement-y)+calc(min(var(--toast-index),10)*-16px)))_scale(calc(max(0,1-(var(--toast-index)*0.1))))]',\n // Scale and translate\n 'ease-standard [transition-property:opacity,transform]',\n 'duration-400',\n // Present when the toast is animating in.\n 'data-[starting-style]:[transform:translateY(150%)]',\n // Expanded: Present when the toast is expanded in the viewport.\n 'data-[expanded]:[transform:translateX(var(--toast-swipe-movement-x))_translateY(calc(var(--toast-offset-y)*-1+calc(var(--toast-index)*var(--gap)*-1)+var(--toast-swipe-movement-y)))]',\n // Present when the toast is animating out.\n 'data-[ending-style]:duration-250',\n 'data-[ending-style]:opacity-0',\n 'data-[ending-style]:data-[swipe-direction=down]:[transform:translateY(calc(var(--toast-swipe-movement-y)+150%))]',\n 'data-[ending-style]:data-[swipe-direction=right]:[transform:translateX(calc(var(--toast-swipe-movement-x)+150%))_translateY(var(--offset-y))]',\n 'data-[expanded]:data-[ending-style]:data-[swipe-direction=right]:[transform:translateX(calc(var(--toast-swipe-movement-x)+150%))_translateY(var(--offset-y))]',\n // Limited: Present when the toast was removed due to exceeding the limit.\n 'data-[limited]:opacity-0',\n ],\n {\n variants: {\n design: {\n filled: '',\n tinted: '',\n },\n intent: {\n success: '',\n alert: '',\n error: '',\n info: '',\n neutral: '',\n main: '',\n basic: '',\n support: '',\n accent: '',\n surface: '',\n surfaceInverse: '',\n },\n },\n compoundVariants: [\n // Filled variants\n {\n design: 'filled',\n intent: 'success',\n class: ['bg-success text-on-success'],\n },\n {\n design: 'filled',\n intent: 'alert',\n class: ['bg-alert text-on-alert'],\n },\n {\n design: 'filled',\n intent: 'error',\n class: ['bg-error text-on-error'],\n },\n {\n design: 'filled',\n intent: 'info',\n class: ['bg-info text-on-info'],\n },\n {\n design: 'filled',\n intent: 'neutral',\n class: ['bg-neutral text-on-neutral'],\n },\n {\n design: 'filled',\n intent: 'main',\n class: ['bg-main text-on-main'],\n },\n {\n design: 'filled',\n intent: 'basic',\n class: ['bg-basic text-on-basic'],\n },\n {\n design: 'filled',\n intent: 'support',\n class: ['bg-support text-on-support'],\n },\n {\n design: 'filled',\n intent: 'accent',\n class: ['bg-accent text-on-accent'],\n },\n {\n design: 'filled',\n intent: 'surface',\n class: ['bg-surface text-on-surface'],\n },\n {\n design: 'filled',\n intent: 'surfaceInverse',\n class: ['bg-surface-inverse text-on-surface-inverse'],\n },\n\n // Tinted variants\n {\n design: 'tinted',\n intent: 'success',\n class: ['bg-success-container text-on-success-container'],\n },\n {\n design: 'tinted',\n intent: 'alert',\n class: ['bg-alert-container text-on-alert-container'],\n },\n {\n design: 'tinted',\n intent: 'error',\n class: ['bg-error-container text-on-error-container'],\n },\n {\n design: 'tinted',\n intent: 'info',\n class: ['bg-info-container text-on-info-container'],\n },\n {\n design: 'tinted',\n intent: 'neutral',\n class: ['bg-neutral-container text-on-neutral-container'],\n },\n {\n design: 'tinted',\n intent: 'main',\n class: ['bg-main-container text-on-main-container'],\n },\n {\n design: 'tinted',\n intent: 'basic',\n class: ['bg-basic-container text-on-basic-container'],\n },\n {\n design: 'tinted',\n intent: 'support',\n class: ['bg-support-container text-on-support-container'],\n },\n {\n design: 'tinted',\n intent: 'accent',\n class: ['bg-accent-container text-on-accent-container'],\n },\n {\n design: 'tinted',\n intent: 'surface',\n class: ['bg-surface text-on-surface'],\n },\n {\n design: 'tinted',\n intent: 'surfaceInverse',\n class: ['bg-surface-inverse text-on-surface-inverse'],\n },\n ],\n defaultVariants: {\n design: 'filled',\n intent: 'neutral',\n },\n }\n)\n\nexport const snackbarItemVariantContent = cva(\n [\n 'inline-grid items-center',\n 'col-start-1 row-start-1',\n 'pl-md pr-lg', // applying padding on the parent prevents VoiceOver on Safari from reading snackbar content 🤷\n ],\n {\n variants: {\n /**\n * Force action button displaying on a new line\n * @default false\n */\n actionOnNewline: {\n true: [\n 'grid-rows-[52px_1fr_52px]',\n 'grid-cols-[min-content_1fr_min-content]',\n \"[grid-template-areas:'icon_message_close'_'._message_.'_'action_action_action']\",\n ],\n false: [\n 'grid-cols-[min-content_1fr_min-content_min-content]',\n \"[grid-template-areas:'icon_message_action_close']\",\n ],\n },\n },\n defaultVariants: {\n actionOnNewline: false,\n },\n }\n)\n\nexport type ToastVariantProps = VariantProps<typeof toastStyles>\nexport type SnackbarItemVariantContentProps = VariantProps<typeof snackbarItemVariantContent>\n","import { Toast as BaseToast } from '@base-ui/react/toast'\nimport { Button, ButtonProps } from '@spark-ui/components/button'\nimport { Icon } from '@spark-ui/components/icon'\nimport { IconButton } from '@spark-ui/components/icon-button'\nimport { Close } from '@spark-ui/icons/Close'\nimport { cx } from 'class-variance-authority'\n\nimport { toastStyles } from './Toast.styles'\nimport type { ToastData, ToastDesign, ToastIntent, ToastObject } from './types'\n\nfunction getButtonIntent(intent?: ToastIntent): ButtonProps['intent'] {\n if (intent === 'surfaceInverse') return 'surface'\n if (intent === 'surface') return 'surfaceInverse'\n if (intent === 'error') return 'danger'\n\n return intent as ButtonProps['intent']\n}\n\nfunction getCloseButtonIntent(intent?: ToastIntent): ButtonProps['intent'] {\n if (intent === 'surfaceInverse') return 'surfaceInverse'\n if (intent === 'surface') return 'surface'\n if (intent === 'error') return 'danger'\n\n return intent as ButtonProps['intent']\n}\n\nconst getActionProps = (\n action: ToastData['action'],\n { toastDesign, toastIntent }: { toastDesign?: ToastDesign; toastIntent?: ToastIntent }\n): ButtonProps => {\n if (!action) return {}\n\n const { design, intent, className, onClick, ...rest } = action\n\n return {\n design: design ?? toastDesign,\n intent: intent ?? getButtonIntent(toastIntent),\n className: cx('ml-auto', className),\n onClick,\n ...rest,\n }\n}\n\nconst getToastRootProps = (toast: ToastObject, design: ToastDesign, intent: ToastIntent) => ({\n key: toast.id,\n swipeDirection: ['down', 'right'] as ['down', 'right'],\n toast,\n className: cx(toastStyles({ design, intent })),\n style: {\n ['--gap' as string]: 'var(--spacing-md)',\n ['--offset-y' as string]:\n 'calc(var(--toast-offset-y) * -1 + (var(--toast-index) * var(--gap) * -1) + var(--toast-swipe-movement-y))',\n },\n})\n\nexport function Toast({ toast }: { toast: ToastObject }) {\n const {\n icon: ToastIcon,\n intent = 'neutral',\n design = 'filled',\n action,\n isClosable,\n closeLabel = 'Close',\n compact = false,\n } = toast.data ?? {}\n\n const ActionButton = action?.close ? BaseToast.Close : BaseToast.Action\n const actionProps = getActionProps(action, { toastDesign: design, toastIntent: intent })\n const rootProps = getToastRootProps(toast, design, intent)\n\n const getCloseButton = (className?: string) => {\n if (!isClosable) return null\n\n return (\n <BaseToast.Close\n className={className}\n render={\n <IconButton\n aria-label={closeLabel}\n design={design}\n intent={getCloseButtonIntent(intent)}\n size=\"md\"\n />\n }\n >\n <Icon>\n <Close />\n </Icon>\n </BaseToast.Close>\n )\n }\n\n const renderTitle = () => {\n // Check ToastData first for JSX, then fallback to toast.title (string)\n const title = toast.data?.title ?? toast.title\n const hasDescription = !!(toast.data?.description ?? toast.description)\n\n if (typeof title !== 'string' && title !== undefined) {\n return (\n <BaseToast.Title\n className={hasDescription ? 'text-headline-2' : 'text-body-1'}\n render={<div />}\n >\n {title}\n </BaseToast.Title>\n )\n }\n\n return <BaseToast.Title className={hasDescription ? 'text-headline-2' : 'text-body-1'} />\n }\n\n const renderDescription = () => {\n // Check ToastData first for JSX, then fallback to toast.description (string)\n const description = toast.data?.description ?? toast.description\n\n if (!description) return null\n\n if (typeof description !== 'string') {\n return (\n <BaseToast.Description className=\"text-body-1\" render={<div />}>\n {description}\n </BaseToast.Description>\n )\n }\n\n return <BaseToast.Description className=\"text-body-1\" />\n }\n\n return (\n <BaseToast.Root {...rootProps}>\n <div className={cx('flex', compact ? 'gap-lg items-center' : 'gap-md flex-col')}>\n <div className=\"gap-lg p-md flex grow items-center\">\n {/* Icon */}\n {ToastIcon && <Icon size=\"md\">{ToastIcon}</Icon>}\n {/* Title and description */}\n <div\n className={cx(\n 'gap-sm flex flex-col',\n compact && 'flex-1',\n !compact && isClosable && 'pr-3xl'\n )}\n >\n {renderTitle()}\n {renderDescription()}\n </div>\n </div>\n\n <div className={cx('flex')}>\n {/* Action button */}\n {action && (\n <ActionButton render={<Button {...actionProps} />}>{action.label}</ActionButton>\n )}\n {/* Close button - compact layout only */}\n {compact && getCloseButton()}\n </div>\n\n {/* Close button - default layout only */}\n {!compact && getCloseButton('top-md right-md absolute')}\n </div>\n </BaseToast.Root>\n )\n}\n","import { Toast as BaseToast } from '@base-ui/react/toast'\nimport * as React from 'react'\n\nimport type { UseToastManagerReturnValue } from './types'\n\nexport function useToastManager(): UseToastManagerReturnValue {\n const baseToastManager = BaseToast.useToastManager()\n\n const closeAll = React.useCallback((): void => {\n baseToastManager.toasts.forEach(({ id }) => baseToastManager.close(id))\n }, [baseToastManager])\n\n return {\n ...baseToastManager,\n closeAll,\n } as UseToastManagerReturnValue\n}\n","import { Toast as BaseToast } from '@base-ui/react/toast'\nimport { Slot } from '@spark-ui/components/slot'\nimport { cx } from 'class-variance-authority'\nimport * as React from 'react'\n\nimport { Toast } from './Toast'\nimport type { ToastData, ToastObject } from './types'\nimport { useToastManager } from './useToastManager'\n\nexport * from './types'\n\nfunction ToastList() {\n const { toasts } = useToastManager()\n\n return toasts.map(toast => <Toast key={toast.id} toast={toast} />)\n}\n\ninterface ToastProviderProps extends React.ComponentProps<typeof BaseToast.Provider> {\n children: React.ReactNode\n}\n\nexport function ToastProvider({ children, limit = 3, ...props }: ToastProviderProps) {\n return (\n <BaseToast.Provider limit={limit} {...props}>\n <BaseToast.Portal>\n <BaseToast.Viewport\n className={cx(\n 'z-toast right-lg bottom-lg text-on-surfa- fixed top-auto mx-auto flex w-fit flex-col items-end'\n )}\n >\n <ToastList />\n </BaseToast.Viewport>\n </BaseToast.Portal>\n {children}\n </BaseToast.Provider>\n )\n}\n\ninterface ToastTriggerProps\n extends Omit<React.ComponentPropsWithRef<'button'>, 'title'>,\n Pick<ToastObject, 'priority'>,\n Pick<ToastData, 'design' | 'intent' | 'icon' | 'isClosable' | 'action' | 'compact'> {\n children: React.ReactNode\n asChild?: boolean\n title: string | React.ReactNode\n description?: string | React.ReactNode\n timeout?: number\n}\n\nexport function ToastTrigger({\n children,\n onClick,\n asChild = false,\n title,\n description,\n timeout = 5000,\n design = 'filled',\n intent = 'neutral',\n isClosable = true,\n icon,\n action,\n compact,\n priority = 'low',\n}: ToastTriggerProps) {\n const toastManager = useToastManager()\n\n const Component = asChild ? Slot : 'button'\n\n function createToast(e: React.MouseEvent<HTMLButtonElement>) {\n onClick?.(e)\n toastManager.add({\n title,\n description,\n timeout,\n priority,\n data: {\n design,\n intent,\n isClosable,\n ...(icon && { icon }),\n action,\n ...(compact !== undefined && { compact }),\n },\n })\n }\n\n return (\n <Component {...(!asChild && { type: 'button' })} onClick={createToast}>\n {children}\n </Component>\n )\n}\n\nexport type ToastManager = ReturnType<typeof BaseToast.createToastManager>\n\nexport const createToastManager: () => ToastManager = BaseToast.createToastManager\n\nexport { useToastManager }\n"],"names":["toastStyles","cva","getButtonIntent","intent","getCloseButtonIntent","getActionProps","action","toastDesign","toastIntent","design","className","onClick","rest","cx","getToastRootProps","toast","Toast","ToastIcon","isClosable","closeLabel","compact","ActionButton","BaseToast","actionProps","rootProps","getCloseButton","jsx","IconButton","Icon","Close","renderTitle","title","hasDescription","renderDescription","description","jsxs","Button","useToastManager","baseToastManager","closeAll","React","id","ToastList","toasts","ToastProvider","children","limit","props","ToastTrigger","asChild","timeout","icon","priority","toastManager","Component","Slot","createToast","e","createToastManager"],"mappings":"ypBAEaA,EAAcC,EAAAA,IACzB,CACE,8EACA,2CACA,wCACA,2EACA,oCACA,+GAEA,8LAEA,wDACA,eAEA,qDAEA,wLAEA,mCACA,gCACA,mHACA,gJACA,gKAEA,0BAAA,EAEF,CACE,SAAU,CACR,OAAQ,CACN,OAAQ,GACR,OAAQ,EAAA,EAEV,OAAQ,CACN,QAAS,GACT,MAAO,GACP,MAAO,GACP,KAAM,GACN,QAAS,GACT,KAAM,GACN,MAAO,GACP,QAAS,GACT,OAAQ,GACR,QAAS,GACT,eAAgB,EAAA,CAClB,EAEF,iBAAkB,CAEhB,CACE,OAAQ,SACR,OAAQ,UACR,MAAO,CAAC,4BAA4B,CAAA,EAEtC,CACE,OAAQ,SACR,OAAQ,QACR,MAAO,CAAC,wBAAwB,CAAA,EAElC,CACE,OAAQ,SACR,OAAQ,QACR,MAAO,CAAC,wBAAwB,CAAA,EAElC,CACE,OAAQ,SACR,OAAQ,OACR,MAAO,CAAC,sBAAsB,CAAA,EAEhC,CACE,OAAQ,SACR,OAAQ,UACR,MAAO,CAAC,4BAA4B,CAAA,EAEtC,CACE,OAAQ,SACR,OAAQ,OACR,MAAO,CAAC,sBAAsB,CAAA,EAEhC,CACE,OAAQ,SACR,OAAQ,QACR,MAAO,CAAC,wBAAwB,CAAA,EAElC,CACE,OAAQ,SACR,OAAQ,UACR,MAAO,CAAC,4BAA4B,CAAA,EAEtC,CACE,OAAQ,SACR,OAAQ,SACR,MAAO,CAAC,0BAA0B,CAAA,EAEpC,CACE,OAAQ,SACR,OAAQ,UACR,MAAO,CAAC,4BAA4B,CAAA,EAEtC,CACE,OAAQ,SACR,OAAQ,iBACR,MAAO,CAAC,4CAA4C,CAAA,EAItD,CACE,OAAQ,SACR,OAAQ,UACR,MAAO,CAAC,gDAAgD,CAAA,EAE1D,CACE,OAAQ,SACR,OAAQ,QACR,MAAO,CAAC,4CAA4C,CAAA,EAEtD,CACE,OAAQ,SACR,OAAQ,QACR,MAAO,CAAC,4CAA4C,CAAA,EAEtD,CACE,OAAQ,SACR,OAAQ,OACR,MAAO,CAAC,0CAA0C,CAAA,EAEpD,CACE,OAAQ,SACR,OAAQ,UACR,MAAO,CAAC,gDAAgD,CAAA,EAE1D,CACE,OAAQ,SACR,OAAQ,OACR,MAAO,CAAC,0CAA0C,CAAA,EAEpD,CACE,OAAQ,SACR,OAAQ,QACR,MAAO,CAAC,4CAA4C,CAAA,EAEtD,CACE,OAAQ,SACR,OAAQ,UACR,MAAO,CAAC,gDAAgD,CAAA,EAE1D,CACE,OAAQ,SACR,OAAQ,SACR,MAAO,CAAC,8CAA8C,CAAA,EAExD,CACE,OAAQ,SACR,OAAQ,UACR,MAAO,CAAC,4BAA4B,CAAA,EAEtC,CACE,OAAQ,SACR,OAAQ,iBACR,MAAO,CAAC,4CAA4C,CAAA,CACtD,EAEF,gBAAiB,CACf,OAAQ,SACR,OAAQ,SAAA,CACV,CAEJ,EAE0CA,EAAAA,IACxC,CACE,2BACA,0BACA,aAAA,EAEF,CACE,SAAU,CAKR,gBAAiB,CACf,KAAM,CACJ,4BACA,0CACA,iFAAA,EAEF,MAAO,CACL,sDACA,mDAAA,CACF,CACF,EAEF,gBAAiB,CACf,gBAAiB,EAAA,CACnB,CAEJ,EC5LA,SAASC,EAAgBC,EAA6C,CACpE,OAAIA,IAAW,iBAAyB,UACpCA,IAAW,UAAkB,iBAC7BA,IAAW,QAAgB,SAExBA,CACT,CAEA,SAASC,EAAqBD,EAA6C,CACzE,OAAIA,IAAW,iBAAyB,iBACpCA,IAAW,UAAkB,UAC7BA,IAAW,QAAgB,SAExBA,CACT,CAEA,MAAME,EAAiB,CACrBC,EACA,CAAE,YAAAC,EAAa,YAAAC,KACC,CAChB,GAAI,CAACF,EAAQ,MAAO,CAAA,EAEpB,KAAM,CAAE,OAAAG,EAAQ,OAAAN,EAAQ,UAAAO,EAAW,QAAAC,EAAS,GAAGC,GAASN,EAExD,MAAO,CACL,OAAQG,GAAUF,EAClB,OAAQJ,GAAUD,EAAgBM,CAAW,EAC7C,UAAWK,EAAAA,GAAG,UAAWH,CAAS,EAClC,QAAAC,EACA,GAAGC,CAAA,CAEP,EAEME,EAAoB,CAACC,EAAoBN,EAAqBN,KAAyB,CAC3F,IAAKY,EAAM,GACX,eAAgB,CAAC,OAAQ,OAAO,EAChC,MAAAA,EACA,UAAWF,EAAAA,GAAGb,EAAY,CAAE,OAAAS,EAAQ,OAAAN,CAAA,CAAQ,CAAC,EAC7C,MAAO,CACJ,QAAoB,oBACpB,aACC,2GAAA,CAEN,GAEO,SAASa,EAAM,CAAA,MAAED,GAAiC,CACvD,KAAM,CACJ,KAAME,EACN,OAAAd,EAAS,UACT,OAAAM,EAAS,SACT,OAAAH,EACA,WAAAY,EACA,WAAAC,EAAa,QACb,QAAAC,EAAU,EAAA,EACRL,EAAM,MAAQ,CAAA,EAEZM,EAAef,GAAQ,MAAQgB,EAAAA,MAAU,MAAQA,EAAAA,MAAU,OAC3DC,EAAclB,EAAeC,EAAQ,CAAE,YAAaG,EAAQ,YAAaN,EAAQ,EACjFqB,EAAYV,EAAkBC,EAAON,EAAQN,CAAM,EAEnDsB,EAAkBf,GACjBQ,EAGHQ,EAAAA,IAACJ,EAAAA,MAAU,MAAV,CACC,UAAAZ,EACA,OACEgB,EAAAA,IAACC,EAAAA,WAAA,CACC,aAAYR,EACZ,OAAAV,EACA,OAAQL,EAAqBD,CAAM,EACnC,KAAK,IAAA,CAAA,EAIT,SAAAuB,EAAAA,IAACE,OAAA,CACC,SAAAF,MAACG,EAAAA,MAAA,CAAA,CAAM,CAAA,CACT,CAAA,CAAA,EAhBoB,KAqBpBC,EAAc,IAAM,CAExB,MAAMC,EAAQhB,EAAM,MAAM,OAASA,EAAM,MACnCiB,EAAiB,CAAC,EAAEjB,EAAM,MAAM,aAAeA,EAAM,aAE3D,OAAI,OAAOgB,GAAU,UAAYA,IAAU,OAEvCL,EAAAA,IAACJ,EAAAA,MAAU,MAAV,CACC,UAAWU,EAAiB,kBAAoB,cAChD,aAAS,MAAA,EAAI,EAEZ,SAAAD,CAAA,CAAA,QAKCT,EAAAA,MAAU,MAAV,CAAgB,UAAWU,EAAiB,kBAAoB,cAAe,CACzF,EAEMC,EAAoB,IAAM,CAE9B,MAAMC,EAAcnB,EAAM,MAAM,aAAeA,EAAM,YAErD,OAAKmB,EAED,OAAOA,GAAgB,SAEvBR,EAAAA,IAACJ,EAAAA,MAAU,YAAV,CAAsB,UAAU,cAAc,OAAQI,EAAAA,IAAC,MAAA,CAAA,CAAI,EACzD,SAAAQ,CAAA,CACH,EAIGR,EAAAA,IAACJ,EAAAA,MAAU,YAAV,CAAsB,UAAU,aAAA,CAAc,EAV7B,IAW3B,EAEA,OACEI,EAAAA,IAACJ,EAAAA,MAAU,KAAV,CAAgB,GAAGE,EAClB,SAAAW,OAAC,MAAA,CAAI,UAAWtB,EAAAA,GAAG,OAAQO,EAAU,sBAAwB,iBAAiB,EAC5E,SAAA,CAAAe,EAAAA,KAAC,MAAA,CAAI,UAAU,qCAEZ,SAAA,CAAAlB,GAAaS,EAAAA,IAACE,OAAA,CAAK,KAAK,KAAM,SAAAX,EAAU,EAEzCkB,EAAAA,KAAC,MAAA,CACC,UAAWtB,EAAAA,GACT,uBACAO,GAAW,SACX,CAACA,GAAWF,GAAc,QAAA,EAG3B,SAAA,CAAAY,EAAA,EACAG,EAAA,CAAkB,CAAA,CAAA,CACrB,EACF,EAEAE,EAAAA,KAAC,MAAA,CAAI,UAAWtB,EAAAA,GAAG,MAAM,EAEtB,SAAA,CAAAP,GACCoB,EAAAA,IAACL,GAAa,OAAQK,EAAAA,IAACU,EAAAA,QAAQ,GAAGb,CAAA,CAAa,EAAK,SAAAjB,EAAO,KAAA,CAAM,EAGlEc,GAAWK,EAAA,CAAe,EAC7B,EAGC,CAACL,GAAWK,EAAe,0BAA0B,CAAA,CAAA,CACxD,CAAA,CACF,CAEJ,CC5JO,SAASY,GAA8C,CAC5D,MAAMC,EAAmBhB,EAAAA,MAAU,gBAAA,EAE7BiB,EAAWC,EAAM,YAAY,IAAY,CAC7CF,EAAiB,OAAO,QAAQ,CAAC,CAAE,GAAAG,KAASH,EAAiB,MAAMG,CAAE,CAAC,CACxE,EAAG,CAACH,CAAgB,CAAC,EAErB,MAAO,CACL,GAAGA,EACH,SAAAC,CAAA,CAEJ,CCLA,SAASG,GAAY,CACnB,KAAM,CAAE,OAAAC,CAAA,EAAWN,EAAA,EAEnB,OAAOM,EAAO,IAAI5B,GAASW,EAAAA,IAACV,GAAqB,MAAAD,CAAA,EAAVA,EAAM,EAAkB,CAAE,CACnE,CAMO,SAAS6B,EAAc,CAAE,SAAAC,EAAU,MAAAC,EAAQ,EAAG,GAAGC,GAA6B,CACnF,cACGzB,EAAAA,MAAU,SAAV,CAAmB,MAAAwB,EAAe,GAAGC,EACpC,SAAA,CAAArB,EAAAA,IAACJ,EAAAA,MAAU,OAAV,CACC,SAAAI,EAAAA,IAACJ,EAAAA,MAAU,SAAV,CACC,UAAWT,EAAAA,GACT,gGAAA,EAGF,eAAC6B,EAAA,CAAA,CAAU,CAAA,CAAA,EAEf,EACCG,CAAA,EACH,CAEJ,CAaO,SAASG,EAAa,CAC3B,SAAAH,EACA,QAAAlC,EACA,QAAAsC,EAAU,GACV,MAAAlB,EACA,YAAAG,EACA,QAAAgB,EAAU,IACV,OAAAzC,EAAS,SACT,OAAAN,EAAS,UACT,WAAAe,EAAa,GACb,KAAAiC,EACA,OAAA7C,EACA,QAAAc,EACA,SAAAgC,EAAW,KACb,EAAsB,CACpB,MAAMC,EAAehB,EAAA,EAEfiB,EAAYL,EAAUM,EAAAA,KAAO,SAEnC,SAASC,EAAYC,EAAwC,CAC3D9C,IAAU8C,CAAC,EACXJ,EAAa,IAAI,CACf,MAAAtB,EACA,YAAAG,EACA,QAAAgB,EACA,SAAAE,EACA,KAAM,CACJ,OAAA3C,EACA,OAAAN,EACA,WAAAe,EACA,GAAIiC,GAAQ,CAAE,KAAAA,CAAA,EACd,OAAA7C,EACA,GAAIc,IAAY,QAAa,CAAE,QAAAA,CAAA,CAAQ,CACzC,CACD,CACH,CAEA,OACEM,MAAC4B,EAAA,CAAW,GAAI,CAACL,GAAW,CAAE,KAAM,UAAa,QAASO,EACvD,SAAAX,CAAA,CACH,CAEJ,CAIO,MAAMa,EAAyCpC,EAAAA,MAAU"}
1
+ {"version":3,"file":"index.js","sources":["../../src/toast/Toast.styles.ts","../../src/toast/Toast.tsx","../../src/toast/useToastManager.ts","../../src/toast/index.tsx"],"sourcesContent":["import { cva, VariantProps } from 'class-variance-authority'\n\nexport const toastStyles = cva(\n [\n 'gap-lg p-md flex w-max !w-[min(400px,calc(100vw-2rem))] flex-col rounded-lg border-md',\n 'absolute right-0 bottom-0 left-auto mr-0',\n 'bg-clip-padding shadow-md select-none',\n 'focus-visible:ring-focus focus-visible:ring-2 focus-visible:outline-none',\n 'z-[calc(1000-var(--toast-index))]',\n \"after:absolute after:bottom-full after:left-0 after:h-[calc(var(--gap)+1px)] after:w-full after:content-['']\",\n // Stack effect while not focused\n '[transform:translateX(var(--toast-swipe-movement-x))_translateY(calc(var(--toast-swipe-movement-y)+calc(min(var(--toast-index),10)*-16px)))_scale(calc(max(0,1-(var(--toast-index)*0.1))))]',\n // Scale and translate\n 'ease-standard [transition-property:opacity,transform]',\n 'duration-400',\n // Present when the toast is animating in.\n 'data-[starting-style]:[transform:translateY(150%)]',\n // Expanded: Present when the toast is expanded in the viewport.\n 'data-[expanded]:[transform:translateX(var(--toast-swipe-movement-x))_translateY(calc(var(--toast-offset-y)*-1+calc(var(--toast-index)*var(--gap)*-1)+var(--toast-swipe-movement-y)))]',\n // Present when the toast is animating out.\n 'data-[ending-style]:duration-250',\n 'data-[ending-style]:opacity-0',\n 'data-[ending-style]:data-[swipe-direction=down]:[transform:translateY(calc(var(--toast-swipe-movement-y)+150%))]',\n 'data-[ending-style]:data-[swipe-direction=right]:[transform:translateX(calc(var(--toast-swipe-movement-x)+150%))_translateY(var(--offset-y))]',\n 'data-[expanded]:data-[ending-style]:data-[swipe-direction=right]:[transform:translateX(calc(var(--toast-swipe-movement-x)+150%))_translateY(var(--offset-y))]',\n // Limited: Present when the toast was removed due to exceeding the limit.\n 'data-[limited]:opacity-0',\n ],\n {\n variants: {\n design: {\n filled: '',\n tinted: '',\n },\n intent: {\n success: '',\n alert: '',\n error: '',\n info: '',\n neutral: '',\n main: '',\n basic: '',\n support: '',\n accent: '',\n surface: '',\n surfaceInverse: '',\n },\n },\n compoundVariants: [\n // Filled variants\n {\n design: 'filled',\n intent: 'success',\n class: ['bg-success text-on-success border-success'],\n },\n {\n design: 'filled',\n intent: 'alert',\n class: ['bg-alert text-on-alert border-alert'],\n },\n {\n design: 'filled',\n intent: 'error',\n class: ['bg-error text-on-error border-error'],\n },\n {\n design: 'filled',\n intent: 'info',\n class: ['bg-info text-on-info border-info'],\n },\n {\n design: 'filled',\n intent: 'neutral',\n class: ['bg-neutral text-on-neutral border-neutral'],\n },\n {\n design: 'filled',\n intent: 'main',\n class: ['bg-main text-on-main border-main'],\n },\n {\n design: 'filled',\n intent: 'basic',\n class: ['bg-basic text-on-basic border-basic'],\n },\n {\n design: 'filled',\n intent: 'support',\n class: ['bg-support text-on-support border-support'],\n },\n {\n design: 'filled',\n intent: 'accent',\n class: ['bg-accent text-on-accent border-accent'],\n },\n {\n design: 'filled',\n intent: 'surface',\n class: ['bg-surface text-on-surface border-surface'],\n },\n {\n design: 'filled',\n intent: 'surfaceInverse',\n class: ['bg-surface-inverse text-on-surface-inverse border-surface-inverse'],\n },\n\n // Tinted variants\n {\n design: 'tinted',\n intent: 'success',\n class: ['bg-success-container text-on-success-container border-success'],\n },\n {\n design: 'tinted',\n intent: 'alert',\n class: ['bg-alert-container text-on-alert-container border-alert'],\n },\n {\n design: 'tinted',\n intent: 'error',\n class: ['bg-error-container text-on-error-container border-error'],\n },\n {\n design: 'tinted',\n intent: 'info',\n class: ['bg-info-container text-on-info-container border-info'],\n },\n {\n design: 'tinted',\n intent: 'neutral',\n class: ['bg-neutral-container text-on-neutral-container border-neutral'],\n },\n {\n design: 'tinted',\n intent: 'main',\n class: ['bg-main-container text-on-main-container border-main'],\n },\n {\n design: 'tinted',\n intent: 'basic',\n class: ['bg-basic-container text-on-basic-container border-basic'],\n },\n {\n design: 'tinted',\n intent: 'support',\n class: ['bg-support-container text-on-support-container border-support'],\n },\n {\n design: 'tinted',\n intent: 'accent',\n class: ['bg-accent-container text-on-accent-container border-accent'],\n },\n {\n design: 'tinted',\n intent: 'surface',\n class: ['bg-surface text-on-surface border-surface'],\n },\n {\n design: 'tinted',\n intent: 'surfaceInverse',\n class: ['bg-surface-inverse text-on-surface-inverse border-surface-inverse'],\n },\n ],\n defaultVariants: {\n design: 'filled',\n intent: 'neutral',\n },\n }\n)\n\nexport const snackbarItemVariantContent = cva(\n [\n 'inline-grid items-center',\n 'col-start-1 row-start-1',\n 'pl-md pr-lg', // applying padding on the parent prevents VoiceOver on Safari from reading snackbar content 🤷\n ],\n {\n variants: {\n /**\n * Force action button displaying on a new line\n * @default false\n */\n actionOnNewline: {\n true: [\n 'grid-rows-[52px_1fr_52px]',\n 'grid-cols-[min-content_1fr_min-content]',\n \"[grid-template-areas:'icon_message_close'_'._message_.'_'action_action_action']\",\n ],\n false: [\n 'grid-cols-[min-content_1fr_min-content_min-content]',\n \"[grid-template-areas:'icon_message_action_close']\",\n ],\n },\n },\n defaultVariants: {\n actionOnNewline: false,\n },\n }\n)\n\nexport type ToastVariantProps = VariantProps<typeof toastStyles>\nexport type SnackbarItemVariantContentProps = VariantProps<typeof snackbarItemVariantContent>\n","import { Toast as BaseToast } from '@base-ui/react/toast'\nimport { Button, ButtonProps } from '@spark-ui/components/button'\nimport { Icon } from '@spark-ui/components/icon'\nimport { IconButton } from '@spark-ui/components/icon-button'\nimport { AlertFill } from '@spark-ui/icons/AlertFill'\nimport { Close } from '@spark-ui/icons/Close'\nimport { InfoFill } from '@spark-ui/icons/InfoFill'\nimport { ValidFill } from '@spark-ui/icons/ValidFill'\nimport { WarningFill } from '@spark-ui/icons/WarningFill'\nimport { cx } from 'class-variance-authority'\n\nimport { toastStyles } from './Toast.styles'\nimport type { ToastData, ToastDesign, ToastIntent, ToastObject } from './types'\n\nfunction getButtonIntent(intent?: ToastIntent): ButtonProps['intent'] {\n if (intent === 'surfaceInverse') return 'surface'\n if (intent === 'surface') return 'surfaceInverse'\n if (intent === 'error') return 'danger'\n\n return intent as ButtonProps['intent']\n}\n\nfunction getCloseButtonIntent(intent?: ToastIntent): ButtonProps['intent'] {\n if (intent === 'surfaceInverse') return 'surfaceInverse'\n if (intent === 'surface') return 'surface'\n if (intent === 'error') return 'danger'\n\n return intent as ButtonProps['intent']\n}\n\nconst getActionProps = (\n action: ToastData['action'],\n { toastDesign, toastIntent }: { toastDesign?: ToastDesign; toastIntent?: ToastIntent }\n): ButtonProps => {\n if (!action) return {}\n\n const { design, intent, className, onClick, ...rest } = action\n\n return {\n design: design ?? toastDesign,\n intent: intent ?? getButtonIntent(toastIntent),\n className: cx('ml-auto', className),\n onClick,\n ...rest,\n }\n}\n\nconst getToastRootProps = (toast: ToastObject, design: ToastDesign, intent: ToastIntent) => ({\n swipeDirection: ['down', 'right'] as ['down', 'right'],\n toast,\n className: cx(toastStyles({ design, intent })),\n style: {\n ['--gap' as string]: 'var(--spacing-md)',\n ['--offset-y' as string]:\n 'calc(var(--toast-offset-y) * -1 + (var(--toast-index) * var(--gap) * -1) + var(--toast-swipe-movement-y))',\n },\n})\n\nfunction getDefaultIcon(intent: ToastIntent): React.ReactNode {\n switch (intent) {\n case 'info':\n return <InfoFill />\n case 'success':\n return <ValidFill />\n case 'alert':\n return <WarningFill />\n case 'error':\n return <AlertFill />\n case 'main':\n case 'support':\n case 'accent':\n case 'basic':\n case 'neutral':\n case 'surface':\n case 'surfaceInverse':\n default:\n return <InfoFill />\n }\n}\n\nexport function Toast({ toast }: { toast: ToastObject }) {\n const {\n icon: ToastIcon,\n intent = 'info',\n design: _design, // deprecated prop, ignored\n action,\n isClosable,\n closeLabel = 'Close',\n compact = false,\n } = toast.data ?? {}\n\n // Always use 'tinted' design regardless of prop value\n const design = 'tinted' as const\n\n const ActionButton = action?.close ? BaseToast.Close : BaseToast.Action\n const actionProps = getActionProps(action, { toastDesign: design, toastIntent: intent })\n const rootProps = getToastRootProps(toast, design, intent)\n\n // Use provided icon or default icon based on intent\n const icon = ToastIcon ?? getDefaultIcon(intent)\n\n const getCloseButton = (className?: string) => {\n if (!isClosable) return null\n\n return (\n <BaseToast.Close\n className={className}\n render={\n <IconButton\n aria-label={closeLabel}\n design={design}\n intent={getCloseButtonIntent(intent)}\n size=\"md\"\n />\n }\n >\n <Icon>\n <Close />\n </Icon>\n </BaseToast.Close>\n )\n }\n\n const renderTitle = () => {\n // Check ToastData first for JSX, then fallback to toast.title (string)\n const title = toast.data?.title ?? toast.title\n const hasDescription = !!(toast.data?.description ?? toast.description)\n\n if (typeof title !== 'string' && title !== undefined) {\n return (\n <BaseToast.Title\n className={hasDescription ? 'text-headline-2' : 'text-body-1'}\n render={<div />}\n >\n {title}\n </BaseToast.Title>\n )\n }\n\n return <BaseToast.Title className={hasDescription ? 'text-headline-2' : 'text-body-1'} />\n }\n\n const renderDescription = () => {\n // Check ToastData first for JSX, then fallback to toast.description (string)\n const description = toast.data?.description ?? toast.description\n\n if (!description) return null\n\n if (typeof description !== 'string') {\n return (\n <BaseToast.Description className=\"text-body-1\" render={<div />}>\n {description}\n </BaseToast.Description>\n )\n }\n\n return <BaseToast.Description className=\"text-body-1\" />\n }\n\n return (\n <BaseToast.Root key={toast.id} {...rootProps}>\n <div className={cx('flex', compact ? 'gap-lg items-center' : 'gap-md flex-col')}>\n <div className=\"gap-lg p-md flex grow items-center\">\n {/* Icon */}\n <Icon size=\"md\">{icon}</Icon>\n {/* Title and description */}\n <div\n className={cx(\n 'gap-sm flex flex-col',\n compact && 'flex-1',\n !compact && isClosable && 'pr-3xl'\n )}\n >\n {renderTitle()}\n {renderDescription()}\n </div>\n </div>\n\n <div className={cx('flex')}>\n {/* Action button */}\n {action && (\n <ActionButton render={<Button {...actionProps} />}>{action.label}</ActionButton>\n )}\n {/* Close button - compact layout only */}\n {compact && getCloseButton()}\n </div>\n\n {/* Close button - default layout only */}\n {!compact && getCloseButton('top-md right-md absolute')}\n </div>\n </BaseToast.Root>\n )\n}\n","import { Toast as BaseToast } from '@base-ui/react/toast'\nimport * as React from 'react'\n\nimport type { UseToastManagerReturnValue } from './types'\n\nexport function useToastManager(): UseToastManagerReturnValue {\n const baseToastManager = BaseToast.useToastManager()\n\n const closeAll = React.useCallback((): void => {\n baseToastManager.toasts.forEach(({ id }) => baseToastManager.close(id))\n }, [baseToastManager])\n\n return {\n ...baseToastManager,\n closeAll,\n } as UseToastManagerReturnValue\n}\n","import { Toast as BaseToast } from '@base-ui/react/toast'\nimport { Slot } from '@spark-ui/components/slot'\nimport { cx } from 'class-variance-authority'\nimport * as React from 'react'\n\nimport { Toast } from './Toast'\nimport type { ToastData, ToastObject } from './types'\nimport { useToastManager } from './useToastManager'\n\nexport * from './types'\n\nfunction ToastList() {\n const { toasts } = useToastManager()\n\n return toasts.map(toast => <Toast key={toast.id} toast={toast} />)\n}\n\ninterface ToastProviderProps extends React.ComponentProps<typeof BaseToast.Provider> {\n children: React.ReactNode\n}\n\nexport function ToastProvider({ children, limit = 3, ...props }: ToastProviderProps) {\n return (\n <BaseToast.Provider limit={limit} {...props}>\n <BaseToast.Portal>\n <BaseToast.Viewport\n className={cx(\n 'z-toast right-lg bottom-lg text-on-surfa- fixed top-auto mx-auto flex w-fit flex-col items-end'\n )}\n >\n <ToastList />\n </BaseToast.Viewport>\n </BaseToast.Portal>\n {children}\n </BaseToast.Provider>\n )\n}\n\ninterface ToastTriggerProps\n extends Omit<React.ComponentPropsWithRef<'button'>, 'title'>,\n Pick<ToastObject, 'priority'>,\n Pick<ToastData, 'design' | 'intent' | 'icon' | 'isClosable' | 'action' | 'compact'> {\n children: React.ReactNode\n asChild?: boolean\n title: string | React.ReactNode\n description?: string | React.ReactNode\n timeout?: number\n}\n\nexport function ToastTrigger({\n children,\n onClick,\n asChild = false,\n title,\n description,\n timeout = 5000,\n design = 'filled',\n intent = 'neutral',\n isClosable = true,\n icon,\n action,\n compact,\n priority = 'low',\n}: ToastTriggerProps) {\n const toastManager = useToastManager()\n\n const Component = asChild ? Slot : 'button'\n\n function createToast(e: React.MouseEvent<HTMLButtonElement>) {\n onClick?.(e)\n toastManager.add({\n title,\n description,\n timeout,\n priority,\n data: {\n design,\n intent,\n isClosable,\n ...(icon && { icon }),\n action,\n ...(compact !== undefined && { compact }),\n },\n })\n }\n\n return (\n <Component {...(!asChild && { type: 'button' })} onClick={createToast}>\n {children}\n </Component>\n )\n}\n\nexport type ToastManager = ReturnType<typeof BaseToast.createToastManager>\n\nexport const createToastManager: () => ToastManager = BaseToast.createToastManager\n\nexport { useToastManager }\n"],"names":["toastStyles","cva","getButtonIntent","intent","getCloseButtonIntent","getActionProps","action","toastDesign","toastIntent","design","className","onClick","rest","cx","getToastRootProps","toast","getDefaultIcon","InfoFill","ValidFill","WarningFill","AlertFill","Toast","ToastIcon","_design","isClosable","closeLabel","compact","ActionButton","BaseToast","actionProps","rootProps","icon","getCloseButton","jsx","IconButton","Icon","Close","renderTitle","title","hasDescription","renderDescription","description","jsxs","Button","useToastManager","baseToastManager","closeAll","React","id","ToastList","toasts","ToastProvider","children","limit","props","ToastTrigger","asChild","timeout","priority","toastManager","Component","Slot","createToast","e","createToastManager"],"mappings":"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"}
@@ -1,15 +1,19 @@
1
- import { jsx as e, jsxs as g } from "react/jsx-runtime";
2
- import { Toast as s } from "@base-ui/react/toast";
3
- import { a as I } from "../Slot-D2Bbf8Gw.mjs";
4
- import { cva as h, cx as d } from "class-variance-authority";
5
- import { B as N } from "../Button-C3C0aixy.mjs";
6
- import { I as w } from "../Icon-Ck-dhfLd.mjs";
7
- import { I as C } from "../IconButton-C62-axzv.mjs";
8
- import { Close as B } from "@spark-ui/icons/Close";
9
- import * as P from "react";
10
- const D = h(
1
+ import { jsx as t, jsxs as u } from "react/jsx-runtime";
2
+ import { Toast as a } from "@base-ui/react/toast";
3
+ import { a as C } from "../Slot-D2Bbf8Gw.mjs";
4
+ import { cva as T, cx as l } from "class-variance-authority";
5
+ import { B } from "../Button-C3C0aixy.mjs";
6
+ import { I as _ } from "../Icon-Ck-dhfLd.mjs";
7
+ import { I as D } from "../IconButton-C62-axzv.mjs";
8
+ import { AlertFill as P } from "@spark-ui/icons/AlertFill";
9
+ import { Close as M } from "@spark-ui/icons/Close";
10
+ import { InfoFill as I } from "@spark-ui/icons/InfoFill";
11
+ import { ValidFill as Y } from "@spark-ui/icons/ValidFill";
12
+ import { WarningFill as A } from "@spark-ui/icons/WarningFill";
13
+ import * as V from "react";
14
+ const z = T(
11
15
  [
12
- "gap-lg p-md flex w-max !w-[min(400px,calc(100vw-2rem))] flex-col rounded-lg",
16
+ "gap-lg p-md flex w-max !w-[min(400px,calc(100vw-2rem))] flex-col rounded-lg border-md",
13
17
  "absolute right-0 bottom-0 left-auto mr-0",
14
18
  "bg-clip-padding shadow-md select-none",
15
19
  "focus-visible:ring-focus focus-visible:ring-2 focus-visible:outline-none",
@@ -58,113 +62,113 @@ const D = h(
58
62
  {
59
63
  design: "filled",
60
64
  intent: "success",
61
- class: ["bg-success text-on-success"]
65
+ class: ["bg-success text-on-success border-success"]
62
66
  },
63
67
  {
64
68
  design: "filled",
65
69
  intent: "alert",
66
- class: ["bg-alert text-on-alert"]
70
+ class: ["bg-alert text-on-alert border-alert"]
67
71
  },
68
72
  {
69
73
  design: "filled",
70
74
  intent: "error",
71
- class: ["bg-error text-on-error"]
75
+ class: ["bg-error text-on-error border-error"]
72
76
  },
73
77
  {
74
78
  design: "filled",
75
79
  intent: "info",
76
- class: ["bg-info text-on-info"]
80
+ class: ["bg-info text-on-info border-info"]
77
81
  },
78
82
  {
79
83
  design: "filled",
80
84
  intent: "neutral",
81
- class: ["bg-neutral text-on-neutral"]
85
+ class: ["bg-neutral text-on-neutral border-neutral"]
82
86
  },
83
87
  {
84
88
  design: "filled",
85
89
  intent: "main",
86
- class: ["bg-main text-on-main"]
90
+ class: ["bg-main text-on-main border-main"]
87
91
  },
88
92
  {
89
93
  design: "filled",
90
94
  intent: "basic",
91
- class: ["bg-basic text-on-basic"]
95
+ class: ["bg-basic text-on-basic border-basic"]
92
96
  },
93
97
  {
94
98
  design: "filled",
95
99
  intent: "support",
96
- class: ["bg-support text-on-support"]
100
+ class: ["bg-support text-on-support border-support"]
97
101
  },
98
102
  {
99
103
  design: "filled",
100
104
  intent: "accent",
101
- class: ["bg-accent text-on-accent"]
105
+ class: ["bg-accent text-on-accent border-accent"]
102
106
  },
103
107
  {
104
108
  design: "filled",
105
109
  intent: "surface",
106
- class: ["bg-surface text-on-surface"]
110
+ class: ["bg-surface text-on-surface border-surface"]
107
111
  },
108
112
  {
109
113
  design: "filled",
110
114
  intent: "surfaceInverse",
111
- class: ["bg-surface-inverse text-on-surface-inverse"]
115
+ class: ["bg-surface-inverse text-on-surface-inverse border-surface-inverse"]
112
116
  },
113
117
  // Tinted variants
114
118
  {
115
119
  design: "tinted",
116
120
  intent: "success",
117
- class: ["bg-success-container text-on-success-container"]
121
+ class: ["bg-success-container text-on-success-container border-success"]
118
122
  },
119
123
  {
120
124
  design: "tinted",
121
125
  intent: "alert",
122
- class: ["bg-alert-container text-on-alert-container"]
126
+ class: ["bg-alert-container text-on-alert-container border-alert"]
123
127
  },
124
128
  {
125
129
  design: "tinted",
126
130
  intent: "error",
127
- class: ["bg-error-container text-on-error-container"]
131
+ class: ["bg-error-container text-on-error-container border-error"]
128
132
  },
129
133
  {
130
134
  design: "tinted",
131
135
  intent: "info",
132
- class: ["bg-info-container text-on-info-container"]
136
+ class: ["bg-info-container text-on-info-container border-info"]
133
137
  },
134
138
  {
135
139
  design: "tinted",
136
140
  intent: "neutral",
137
- class: ["bg-neutral-container text-on-neutral-container"]
141
+ class: ["bg-neutral-container text-on-neutral-container border-neutral"]
138
142
  },
139
143
  {
140
144
  design: "tinted",
141
145
  intent: "main",
142
- class: ["bg-main-container text-on-main-container"]
146
+ class: ["bg-main-container text-on-main-container border-main"]
143
147
  },
144
148
  {
145
149
  design: "tinted",
146
150
  intent: "basic",
147
- class: ["bg-basic-container text-on-basic-container"]
151
+ class: ["bg-basic-container text-on-basic-container border-basic"]
148
152
  },
149
153
  {
150
154
  design: "tinted",
151
155
  intent: "support",
152
- class: ["bg-support-container text-on-support-container"]
156
+ class: ["bg-support-container text-on-support-container border-support"]
153
157
  },
154
158
  {
155
159
  design: "tinted",
156
160
  intent: "accent",
157
- class: ["bg-accent-container text-on-accent-container"]
161
+ class: ["bg-accent-container text-on-accent-container border-accent"]
158
162
  },
159
163
  {
160
164
  design: "tinted",
161
165
  intent: "surface",
162
- class: ["bg-surface text-on-surface"]
166
+ class: ["bg-surface text-on-surface border-surface"]
163
167
  },
164
168
  {
165
169
  design: "tinted",
166
170
  intent: "surfaceInverse",
167
- class: ["bg-surface-inverse text-on-surface-inverse"]
171
+ class: ["bg-surface-inverse text-on-surface-inverse border-surface-inverse"]
168
172
  }
169
173
  ],
170
174
  defaultVariants: {
@@ -173,7 +177,7 @@ const D = h(
173
177
  }
174
178
  }
175
179
  );
176
- h(
180
+ T(
177
181
  [
178
182
  "inline-grid items-center",
179
183
  "col-start-1 row-start-1",
@@ -203,161 +207,182 @@ h(
203
207
  }
204
208
  }
205
209
  );
206
- function M(t) {
207
- return t === "surfaceInverse" ? "surface" : t === "surface" ? "surfaceInverse" : t === "error" ? "danger" : t;
210
+ function F(e) {
211
+ return e === "surfaceInverse" ? "surface" : e === "surface" ? "surfaceInverse" : e === "error" ? "danger" : e;
208
212
  }
209
- function Y(t) {
210
- return t === "surfaceInverse" ? "surfaceInverse" : t === "surface" ? "surface" : t === "error" ? "danger" : t;
213
+ function X(e) {
214
+ return e === "surfaceInverse" ? "surfaceInverse" : e === "surface" ? "surface" : e === "error" ? "danger" : e;
211
215
  }
212
- const k = (t, { toastDesign: n, toastIntent: a }) => {
213
- if (!t) return {};
214
- const { design: c, intent: o, className: l, onClick: f, ...i } = t;
216
+ const k = (e, { toastDesign: r, toastIntent: n }) => {
217
+ if (!e) return {};
218
+ const { design: g, intent: o, className: c, onClick: d, ...i } = e;
215
219
  return {
216
- design: c ?? n,
217
- intent: o ?? M(a),
218
- className: d("ml-auto", l),
219
- onClick: f,
220
+ design: g ?? r,
221
+ intent: o ?? F(n),
222
+ className: l("ml-auto", c),
223
+ onClick: d,
220
224
  ...i
221
225
  };
222
- }, z = (t, n, a) => ({
223
- key: t.id,
226
+ }, R = (e, r, n) => ({
224
227
  swipeDirection: ["down", "right"],
225
- toast: t,
226
- className: d(D({ design: n, intent: a })),
228
+ toast: e,
229
+ className: l(z({ design: r, intent: n })),
227
230
  style: {
228
231
  "--gap": "var(--spacing-md)",
229
232
  "--offset-y": "calc(var(--toast-offset-y) * -1 + (var(--toast-index) * var(--gap) * -1) + var(--toast-swipe-movement-y))"
230
233
  }
231
234
  });
232
- function A({ toast: t }) {
235
+ function j(e) {
236
+ switch (e) {
237
+ case "info":
238
+ return /* @__PURE__ */ t(I, {});
239
+ case "success":
240
+ return /* @__PURE__ */ t(Y, {});
241
+ case "alert":
242
+ return /* @__PURE__ */ t(A, {});
243
+ case "error":
244
+ return /* @__PURE__ */ t(P, {});
245
+ case "main":
246
+ case "support":
247
+ case "accent":
248
+ case "basic":
249
+ case "neutral":
250
+ case "surface":
251
+ case "surfaceInverse":
252
+ default:
253
+ return /* @__PURE__ */ t(I, {});
254
+ }
255
+ }
256
+ function L({ toast: e }) {
233
257
  const {
234
- icon: n,
235
- intent: a = "neutral",
236
- design: c = "filled",
258
+ icon: r,
259
+ intent: n = "info",
260
+ design: g,
261
+ // deprecated prop, ignored
237
262
  action: o,
238
- isClosable: l,
239
- closeLabel: f = "Close",
263
+ isClosable: c,
264
+ closeLabel: d = "Close",
240
265
  compact: i = !1
241
- } = t.data ?? {}, x = o?.close ? s.Close : s.Action, m = k(o, { toastDesign: c, toastIntent: a }), v = z(t, c, a), u = (r) => l ? /* @__PURE__ */ e(
242
- s.Close,
266
+ } = e.data ?? {}, f = "tinted", m = o?.close ? a.Close : a.Action, x = k(o, { toastDesign: f, toastIntent: n }), p = R(e, f, n), v = r ?? j(n), b = (s) => c ? /* @__PURE__ */ t(
267
+ a.Close,
243
268
  {
244
- className: r,
245
- render: /* @__PURE__ */ e(
246
- C,
269
+ className: s,
270
+ render: /* @__PURE__ */ t(
271
+ D,
247
272
  {
248
- "aria-label": f,
249
- design: c,
250
- intent: Y(a),
273
+ "aria-label": d,
274
+ design: f,
275
+ intent: X(n),
251
276
  size: "md"
252
277
  }
253
278
  ),
254
- children: /* @__PURE__ */ e(w, { children: /* @__PURE__ */ e(B, {}) })
279
+ children: /* @__PURE__ */ t(_, { children: /* @__PURE__ */ t(M, {}) })
255
280
  }
256
- ) : null, b = () => {
257
- const r = t.data?.title ?? t.title, p = !!(t.data?.description ?? t.description);
258
- return typeof r != "string" && r !== void 0 ? /* @__PURE__ */ e(
259
- s.Title,
281
+ ) : null, w = () => {
282
+ const s = e.data?.title ?? e.title, h = !!(e.data?.description ?? e.description);
283
+ return typeof s != "string" && s !== void 0 ? /* @__PURE__ */ t(
284
+ a.Title,
260
285
  {
261
- className: p ? "text-headline-2" : "text-body-1",
262
- render: /* @__PURE__ */ e("div", {}),
263
- children: r
286
+ className: h ? "text-headline-2" : "text-body-1",
287
+ render: /* @__PURE__ */ t("div", {}),
288
+ children: s
264
289
  }
265
- ) : /* @__PURE__ */ e(s.Title, { className: p ? "text-headline-2" : "text-body-1" });
290
+ ) : /* @__PURE__ */ t(a.Title, { className: h ? "text-headline-2" : "text-body-1" });
266
291
  }, y = () => {
267
- const r = t.data?.description ?? t.description;
268
- return r ? typeof r != "string" ? /* @__PURE__ */ e(s.Description, { className: "text-body-1", render: /* @__PURE__ */ e("div", {}), children: r }) : /* @__PURE__ */ e(s.Description, { className: "text-body-1" }) : null;
292
+ const s = e.data?.description ?? e.description;
293
+ return s ? typeof s != "string" ? /* @__PURE__ */ t(a.Description, { className: "text-body-1", render: /* @__PURE__ */ t("div", {}), children: s }) : /* @__PURE__ */ t(a.Description, { className: "text-body-1" }) : null;
269
294
  };
270
- return /* @__PURE__ */ e(s.Root, { ...v, children: /* @__PURE__ */ g("div", { className: d("flex", i ? "gap-lg items-center" : "gap-md flex-col"), children: [
271
- /* @__PURE__ */ g("div", { className: "gap-lg p-md flex grow items-center", children: [
272
- n && /* @__PURE__ */ e(w, { size: "md", children: n }),
273
- /* @__PURE__ */ g(
295
+ return /* @__PURE__ */ t(a.Root, { ...p, children: /* @__PURE__ */ u("div", { className: l("flex", i ? "gap-lg items-center" : "gap-md flex-col"), children: [
296
+ /* @__PURE__ */ u("div", { className: "gap-lg p-md flex grow items-center", children: [
297
+ /* @__PURE__ */ t(_, { size: "md", children: v }),
298
+ /* @__PURE__ */ u(
274
299
  "div",
275
300
  {
276
- className: d(
301
+ className: l(
277
302
  "gap-sm flex flex-col",
278
303
  i && "flex-1",
279
- !i && l && "pr-3xl"
304
+ !i && c && "pr-3xl"
280
305
  ),
281
306
  children: [
282
- b(),
307
+ w(),
283
308
  y()
284
309
  ]
285
310
  }
286
311
  )
287
312
  ] }),
288
- /* @__PURE__ */ g("div", { className: d("flex"), children: [
289
- o && /* @__PURE__ */ e(x, { render: /* @__PURE__ */ e(N, { ...m }), children: o.label }),
290
- i && u()
313
+ /* @__PURE__ */ u("div", { className: l("flex"), children: [
314
+ o && /* @__PURE__ */ t(m, { render: /* @__PURE__ */ t(B, { ...x }), children: o.label }),
315
+ i && b()
291
316
  ] }),
292
- !i && u("top-md right-md absolute")
293
- ] }) });
317
+ !i && b("top-md right-md absolute")
318
+ ] }) }, e.id);
294
319
  }
295
- function _() {
296
- const t = s.useToastManager(), n = P.useCallback(() => {
297
- t.toasts.forEach(({ id: a }) => t.close(a));
298
- }, [t]);
320
+ function N() {
321
+ const e = a.useToastManager(), r = V.useCallback(() => {
322
+ e.toasts.forEach(({ id: n }) => e.close(n));
323
+ }, [e]);
299
324
  return {
300
- ...t,
301
- closeAll: n
325
+ ...e,
326
+ closeAll: r
302
327
  };
303
328
  }
304
- function V() {
305
- const { toasts: t } = _();
306
- return t.map((n) => /* @__PURE__ */ e(A, { toast: n }, n.id));
329
+ function O() {
330
+ const { toasts: e } = N();
331
+ return e.map((r) => /* @__PURE__ */ t(L, { toast: r }, r.id));
307
332
  }
308
- function q({ children: t, limit: n = 3, ...a }) {
309
- return /* @__PURE__ */ g(s.Provider, { limit: n, ...a, children: [
310
- /* @__PURE__ */ e(s.Portal, { children: /* @__PURE__ */ e(
311
- s.Viewport,
333
+ function ee({ children: e, limit: r = 3, ...n }) {
334
+ return /* @__PURE__ */ u(a.Provider, { limit: r, ...n, children: [
335
+ /* @__PURE__ */ t(a.Portal, { children: /* @__PURE__ */ t(
336
+ a.Viewport,
312
337
  {
313
- className: d(
338
+ className: l(
314
339
  "z-toast right-lg bottom-lg text-on-surfa- fixed top-auto mx-auto flex w-fit flex-col items-end"
315
340
  ),
316
- children: /* @__PURE__ */ e(V, {})
341
+ children: /* @__PURE__ */ t(O, {})
317
342
  }
318
343
  ) }),
319
- t
344
+ e
320
345
  ] });
321
346
  }
322
- function F({
323
- children: t,
324
- onClick: n,
325
- asChild: a = !1,
326
- title: c,
347
+ function te({
348
+ children: e,
349
+ onClick: r,
350
+ asChild: n = !1,
351
+ title: g,
327
352
  description: o,
328
- timeout: l = 5e3,
329
- design: f = "filled",
353
+ timeout: c = 5e3,
354
+ design: d = "filled",
330
355
  intent: i = "neutral",
331
- isClosable: x = !0,
356
+ isClosable: f = !0,
332
357
  icon: m,
333
- action: v,
334
- compact: u,
335
- priority: b = "low"
358
+ action: x,
359
+ compact: p,
360
+ priority: v = "low"
336
361
  }) {
337
- const y = _(), r = a ? I : "button";
338
- function p(T) {
339
- n?.(T), y.add({
340
- title: c,
362
+ const b = N(), w = n ? C : "button";
363
+ function y(s) {
364
+ r?.(s), b.add({
365
+ title: g,
341
366
  description: o,
342
- timeout: l,
343
- priority: b,
367
+ timeout: c,
368
+ priority: v,
344
369
  data: {
345
- design: f,
370
+ design: d,
346
371
  intent: i,
347
- isClosable: x,
372
+ isClosable: f,
348
373
  ...m && { icon: m },
349
- action: v,
350
- ...u !== void 0 && { compact: u }
374
+ action: x,
375
+ ...p !== void 0 && { compact: p }
351
376
  }
352
377
  });
353
378
  }
354
- return /* @__PURE__ */ e(r, { ...!a && { type: "button" }, onClick: p, children: t });
379
+ return /* @__PURE__ */ t(w, { ...!n && { type: "button" }, onClick: y, children: e });
355
380
  }
356
- const G = s.createToastManager;
381
+ const ne = a.createToastManager;
357
382
  export {
358
- q as ToastProvider,
359
- F as ToastTrigger,
360
- G as createToastManager,
361
- _ as useToastManager
383
+ ee as ToastProvider,
384
+ te as ToastTrigger,
385
+ ne as createToastManager,
386
+ N as useToastManager
362
387
  };
363
388
  //# sourceMappingURL=index.mjs.map