@atom-learning/components 6.0.0-beta.1 → 6.0.0-beta.11

package/dist/components/toast/Toast.js

@@ -1,2 +1,2 @@
-import*as s from"react";import{styled as n}from"../../stitches.js";import{Flex as a}from"../flex/Flex.js";import{ToastCloseButton as i}from"./ToastCloseButton.js";import{ToastIcon as m}from"./ToastIcon.js";import{useToastContext as c}from"./ToastProvider.js";const p={loading:{bg:"$info"},blank:{bg:"$info"},success:{bg:"$success"},error:{bg:"$danger"}},e=n(a,{pointerEvents:"auto",borderRadius:"$3",boxShadow:"$1",boxSizing:"border-box",color:"white",minHeight:"$5",position:"relative",px:"$4",py:"$1",transition:"background-color 50ms ease-out","@allowMotion":{transition:"background-color 50ms ease-out, transform 150ms ease-out"},variants:{type:p}}),o=t=>{const{type:r}=c();return s.createElement(e,{align:"center",type:t.type||r,...t})};o.Icon=m,o.Close=i;export{e as StyledToast,o as Toast};
+import*as s from"react";import{styled as n}from"../../styled.js";import{Flex as a}from"../flex/Flex.js";import{ToastCloseButton as i}from"./ToastCloseButton.js";import{ToastIcon as m}from"./ToastIcon.js";import{useToastContext as p}from"./ToastProvider.js";const e=n(a,{base:["pointer-events-auto","rounded-xl","shadow-md","box-border","text-white","min-h-12","relative","px-4","py-1","motion-safe:duration-125","motion-safe:ease-out","motion-safe:transition-[colors,transform]"],variants:{type:{loading:["bg-info"],blank:["bg-info"],success:["bg-success"],error:["bg-danger"]}}}),o=t=>{const{type:r}=p();return s.createElement(e,{align:"center",type:t.type||r,...t})};o.Icon=m,o.Close=i;export{e as StyledToast,o as Toast};
 //# sourceMappingURL=Toast.js.map

package/dist/components/toast/Toast.js.map

@@ -1 +1 @@
-{"version":3,"file":"Toast.js","sources":["../../../src/components/toast/Toast.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/stitches'\n\nimport { Flex } from '../flex'\nimport { ToastCloseButton } from './ToastCloseButton'\nimport { ToastIcon } from './ToastIcon'\nimport { useToastContext } from './ToastProvider'\n\nconst toastVariants = {\n  loading: { bg: '$info' },\n  blank: { bg: '$info' },\n  success: { bg: '$success' },\n  error: { bg: '$danger' }\n} as const\n\nexport const StyledToast = styled(Flex, {\n  pointerEvents: 'auto',\n  borderRadius: '$3',\n  boxShadow: '$1',\n  boxSizing: 'border-box',\n  color: 'white',\n  minHeight: '$5',\n  position: 'relative',\n  px: '$4',\n  py: '$1',\n  transition: 'background-color 50ms ease-out',\n  '@allowMotion': {\n    transition: 'background-color 50ms ease-out, transform 150ms ease-out'\n  },\n  variants: {\n    type: toastVariants\n  }\n})\n\ntype ToastProps = Omit<React.ComponentProps<typeof StyledToast>, 'type'> & {\n  type?: keyof typeof toastVariants\n}\n\nexport const Toast = (props: ToastProps): JSX.Element => {\n  const { type } = useToastContext()\n  return <StyledToast align=\"center\" type={props.type || type} {...props} />\n}\n\nToast.Icon = ToastIcon\nToast.Close = ToastCloseButton\n"],"names":["toastVariants","StyledToast","styled","Flex","Toast","props","type","useToastContext","React","ToastIcon","ToastCloseButton"],"mappings":"mQASA,MAAMA,EAAgB,CACpB,QAAS,CAAE,GAAI,OAAQ,EACvB,MAAO,CAAE,GAAI,OAAQ,EACrB,QAAS,CAAE,GAAI,UAAW,EAC1B,MAAO,CAAE,GAAI,SAAU,CACzB,EAEaC,EAAcC,EAAOC,EAAM,CACtC,cAAe,OACf,aAAc,KACd,UAAW,KACX,UAAW,aACX,MAAO,QACP,UAAW,KACX,SAAU,WACV,GAAI,KACJ,GAAI,KACJ,WAAY,iCACZ,eAAgB,CACd,WAAY,0DACd,EACA,SAAU,CACR,KAAMH,CACR,CACF,CAAC,EAMYI,EAASC,GAAmC,CACvD,KAAM,CAAE,KAAAC,CAAK,EAAIC,EACjB,EAAA,OAAOC,EAAA,cAACP,EAAY,CAAA,MAAM,SAAS,KAAMI,EAAM,MAAQC,EAAO,GAAGD,CAAAA,CAAO,CAC1E,EAEAD,EAAM,KAAOK,EACbL,EAAM,MAAQM"}
+{"version":3,"file":"Toast.js","sources":["../../../src/components/toast/Toast.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/styled'\n\nimport { Flex } from '../flex'\nimport { ToastCloseButton } from './ToastCloseButton'\nimport { ToastIcon } from './ToastIcon'\nimport { useToastContext } from './ToastProvider'\n\nexport const StyledToast = styled(Flex, {\n  base: [\n    'pointer-events-auto',\n    'rounded-xl',\n    'shadow-md',\n    'box-border',\n    'text-white',\n    'min-h-12',\n    'relative',\n    'px-4',\n    'py-1',\n    'motion-safe:duration-125',\n    'motion-safe:ease-out',\n    'motion-safe:transition-[colors,transform]'\n  ],\n  variants: {\n    type: {\n      loading: ['bg-info'],\n      blank: ['bg-info'],\n      success: ['bg-success'],\n      error: ['bg-danger']\n    }\n  }\n})\n\nexport const Toast = (props: React.ComponentProps<typeof StyledToast>) => {\n  const { type } = useToastContext()\n  return <StyledToast align=\"center\" type={props.type || type} {...props} />\n}\n\nToast.Icon = ToastIcon\nToast.Close = ToastCloseButton\n"],"names":["StyledToast","styled","Flex","Toast","props","type","useToastContext","React","ToastIcon","ToastCloseButton"],"mappings":"uQASaA,EAAcC,EAAOC,EAAM,CACtC,KAAM,CACJ,sBACA,aACA,YACA,aACA,aACA,WACA,WACA,OACA,OACA,2BACA,uBACA,2CACF,EACA,SAAU,CACR,KAAM,CACJ,QAAS,CAAC,SAAS,EACnB,MAAO,CAAC,SAAS,EACjB,QAAS,CAAC,YAAY,EACtB,MAAO,CAAC,WAAW,CACrB,CACF,CACF,CAAC,EAEYC,EAASC,GAAoD,CACxE,KAAM,CAAE,KAAAC,CAAK,EAAIC,EACjB,EAAA,OAAOC,EAAA,cAACP,EAAA,CAAY,MAAM,SAAS,KAAMI,EAAM,MAAQC,EAAO,GAAGD,CAAO,CAAA,CAC1E,EAEAD,EAAM,KAAOK,EACbL,EAAM,MAAQM"}

package/dist/components/toast/ToastCloseButton.js

@@ -1,2 +1,2 @@
-import{Close as i}from"@atom-learning/icons";import*as t from"react";import{toast as m}from"react-hot-toast";import{ActionIcon as l}from"../action-icon/ActionIcon.js";import{Icon as c}from"../icon/Icon.js";import{useToastContext as n}from"./ToastProvider.js";const a=({onDismiss:o,label:e="Close alert",...r})=>{const{id:s}=n();return t.createElement(l,{css:{color:"white",mr:"-$2","&:hover,&:focus":{color:"white",opacity:.8}},label:e,onClick:()=>{m.dismiss(s),o==null||o()},...r},t.createElement(c,{is:i}))};export{a as ToastCloseButton};
+import{Close as i}from"@atom-learning/icons";import m from"clsx";import*as t from"react";import{toast as l}from"react-hot-toast";import{ActionIcon as a}from"../action-icon/ActionIcon.js";import{Icon as c}from"../icon/Icon.js";import{useToastContext as n}from"./ToastProvider.js";const p=({onDismiss:o,label:e="Close alert",...r})=>{const{id:s}=n();return t.createElement(a,{label:e,onClick:()=>{l.dismiss(s),o==null||o()},...r,className:m("text-white","-mr-2","hover:opacity-80","hover:text-white","focus:opacity-80","focus:text-white")},t.createElement(c,{is:i}))};export{p as ToastCloseButton};
 //# sourceMappingURL=ToastCloseButton.js.map

package/dist/components/toast/ToastCloseButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"ToastCloseButton.js","sources":["../../../src/components/toast/ToastCloseButton.tsx"],"sourcesContent":["import { Close } from '@atom-learning/icons'\nimport * as React from 'react'\nimport { toast } from 'react-hot-toast'\nimport type { Toast } from 'react-hot-toast/dist/core/types'\n\nimport { ActionIcon } from '../action-icon/ActionIcon'\nimport { Icon } from '../icon/Icon'\nimport { useToastContext } from './ToastProvider'\n\nexport interface ToastCloseButtonProps\n  extends Omit<React.ComponentProps<typeof ActionIcon>, 'label' | 'children'> {\n  onDismiss?: () => void\n  label?: string\n}\n\nexport const ToastCloseButton = ({\n  onDismiss,\n  label = 'Close alert',\n  ...rest\n}: ToastCloseButtonProps): JSX.Element => {\n  const { id } = useToastContext()\n\n  return (\n    <ActionIcon\n      css={{\n        color: 'white',\n        mr: '-$2',\n        '&:hover,&:focus': { color: 'white', opacity: 0.8 }\n      }}\n      label={label}\n      onClick={() => {\n        toast.dismiss(id)\n        onDismiss?.()\n      }}\n      {...rest}\n    >\n      <Icon is={Close} />\n    </ActionIcon>\n  )\n}\n"],"names":["ToastCloseButton","onDismiss","label","rest","id","useToastContext","React","ActionIcon","toast","Icon","Close"],"mappings":"mQAea,MAAAA,EAAmB,CAAC,CAC/B,UAAAC,EACA,MAAAC,EAAQ,iBACLC,CACL,IAA0C,CACxC,KAAM,CAAE,GAAAC,CAAG,EAAIC,IAEf,OACEC,EAAA,cAACC,EAAA,CACC,IAAK,CACH,MAAO,QACP,GAAI,MACJ,kBAAmB,CAAE,MAAO,QAAS,QAAS,EAAI,CACpD,EACA,MAAOL,EACP,QAAS,IAAM,CACbM,EAAM,QAAQJ,CAAE,EAChBH,GAAA,MAAAA,EACF,CAAA,EACC,GAAGE,CAAAA,EAEJG,EAAA,cAACG,EAAA,CAAK,GAAIC,CAAAA,CAAO,CACnB,CAEJ"}
+{"version":3,"file":"ToastCloseButton.js","sources":["../../../src/components/toast/ToastCloseButton.tsx"],"sourcesContent":["import { Close } from '@atom-learning/icons'\nimport clsx from 'clsx'\nimport * as React from 'react'\nimport { toast } from 'react-hot-toast'\nimport type { Toast } from 'react-hot-toast/dist/core/types'\n\nimport { ActionIcon } from '../action-icon/ActionIcon'\nimport { Icon } from '../icon/Icon'\nimport { useToastContext } from './ToastProvider'\n\nexport interface ToastCloseButtonProps\n  extends Omit<React.ComponentProps<typeof ActionIcon>, 'label' | 'children'> {\n  onDismiss?: () => void\n  label?: string\n}\n\nexport const ToastCloseButton = ({\n  onDismiss,\n  label = 'Close alert',\n  ...rest\n}: ToastCloseButtonProps): JSX.Element => {\n  const { id } = useToastContext()\n\n  return (\n    <ActionIcon\n      label={label}\n      onClick={() => {\n        toast.dismiss(id)\n        onDismiss?.()\n      }}\n      {...rest}\n      className={clsx(\n        'text-white',\n        '-mr-2',\n        'hover:opacity-80',\n        'hover:text-white',\n        'focus:opacity-80',\n        'focus:text-white'\n      )}\n    >\n      <Icon is={Close} />\n    </ActionIcon>\n  )\n}\n"],"names":["ToastCloseButton","onDismiss","label","rest","id","useToastContext","React","ActionIcon","toast","clsx","Icon","Close"],"mappings":"uRAgBO,MAAMA,EAAmB,CAAC,CAC/B,UAAAC,EACA,MAAAC,EAAQ,cACR,GAAGC,CACL,IAA0C,CACxC,KAAM,CAAE,GAAAC,CAAG,EAAIC,EAAgB,EAE/B,OACEC,EAAA,cAACC,EAAA,CACC,MAAOL,EACP,QAAS,IAAM,CACbM,EAAM,QAAQJ,CAAE,EAChBH,GAAA,MAAAA,EACF,CAAA,EACC,GAAGE,EACJ,UAAWM,EACT,aACA,QACA,mBACA,mBACA,mBACA,kBACF,CAAA,EAEAH,EAAA,cAACI,EAAA,CAAK,GAAIC,CAAAA,CAAO,CACnB,CAEJ"}

package/dist/components/toast/ToastIcon.js

@@ -1,2 +1,2 @@
-import e from"react";import{Icon as t}from"../icon/Icon.js";const m=o=>e.createElement(t,{size:"sm",css:{mr:"$3",flex:"0 0 auto"},...o});export{m as ToastIcon};
+import o from"react";import{Icon as t}from"../icon/Icon.js";const m=e=>o.createElement(t,{size:"sm",...e,className:"mr-3 flex-[0_0_auto]"});export{m as ToastIcon};
 //# sourceMappingURL=ToastIcon.js.map

package/dist/components/toast/ToastIcon.js.map

@@ -1 +1 @@
-{"version":3,"file":"ToastIcon.js","sources":["../../../src/components/toast/ToastIcon.tsx"],"sourcesContent":["import React from 'react'\n\nimport { Icon } from '../icon'\n\nexport const ToastIcon = (\n  props: React.ComponentProps<typeof Icon>\n): JSX.Element => (\n  <Icon size=\"sm\" css={{ mr: '$3', flex: '0 0 auto' }} {...props} />\n)\n"],"names":["ToastIcon","props","React","Icon"],"mappings":"4DAIO,MAAMA,EACXC,GAEAC,EAAA,cAACC,EAAA,CAAK,KAAK,KAAK,IAAK,CAAE,GAAI,KAAM,KAAM,UAAW,EAAI,GAAGF,CAAO,CAAA"}
+{"version":3,"file":"ToastIcon.js","sources":["../../../src/components/toast/ToastIcon.tsx"],"sourcesContent":["import React from 'react'\n\nimport { Icon } from '../icon'\n\nexport const ToastIcon = (\n  props: React.ComponentProps<typeof Icon>\n): JSX.Element => <Icon size=\"sm\" {...props} className=\"mr-3 flex-[0_0_auto]\" />\n"],"names":["ToastIcon","props","React","Icon"],"mappings":"kEAIaA,EACXC,GACgBC,EAAA,cAACC,EAAA,CAAK,KAAK,KAAM,GAAGF,EAAO,UAAU,sBAAuB,CAAA"}

package/dist/components/toast/ToastProvider.d.ts

@@ -1,10 +1,9 @@
 import * as React from 'react';
-import { CSS } from '../../stitches';
-export { default as toast } from 'react-hot-toast';
 import type { Toast as ToastType } from 'react-hot-toast/dist/core/types';
+export { default as toast } from 'react-hot-toast';
 export declare const ToastProvider: {
-    ({ children, css }: React.PropsWithChildren<{
-        css?: CSS;
+    ({ children, className }: React.PropsWithChildren<{
+        className?: string;
     }>): React.JSX.Element;
     displayName: string;
 };

package/dist/components/toast/ToastProvider.js

@@ -1,2 +1,2 @@
-import{Error as n}from"@atom-learning/icons";import*as e from"react";import{useToaster as h}from"react-hot-toast";import{default as j}from"react-hot-toast";import{styled as s,keyframes as l}from"../../stitches.js";import{MAX_Z_INDEX as g}from"../../constants/zIndices.js";import{Spacer as T}from"../spacer/Spacer.js";import{Text as w}from"../text/Text.js";import{Toast as a}from"./Toast.js";const C="$2",P=400,M=s("div",{position:"fixed",zIndex:g,inset:C,pointerEvents:"none","@sm":{top:"$3"}}),$=l({"0%":{transform:"translateY(-100%)",opacity:0},"100%":{transform:"translateY(0)",opacity:1}}),I=l({"0%":{transform:"translateY(0)",opacity:1},"100%":{transform:"translateY(-100%)",opacity:0}}),z=s("div",{position:"absolute",width:"100%",display:"flex",justifyContent:"center",alignItems:"center",borderRadius:"$0",boxSizing:"border-box",minHeight:"$5",variants:{visible:{true:{"@allowMotion":{animation:`${$} 250ms cubic-bezier(0.22, 1, 0.36, 1)`}},false:{opacity:0,"@allowMotion":{animation:`${I} 250ms cubic-bezier(0.22, 1, 0.36, 1)`}}}}}),m=e.createContext(null),c=({children:o,css:u})=>{const{toasts:d,handlers:p}=h(),{startPause:f,endPause:v,calculateOffset:E,updateHeight:y}=p;return e.createElement(e.Fragment,null,e.createElement(M,{onMouseEnter:f,onMouseLeave:v,css:u},d.map(t=>{const{message:r}=t,b=E(t.id,{reverseOrder:!0,margin:8}),x=i=>{i&&t.height===void 0&&y(t.id,i.getBoundingClientRect().height)};return e.createElement(z,{key:t.id,ref:x,visible:t.visible,role:t.role,"aria-live":t.ariaLive,css:{top:b}},e.createElement(m.Provider,{value:t},typeof r=="function"?r(t):e.isValidElement(r)?r:e.createElement(a,{css:{width:P}},t.type==="error"&&e.createElement(a.Icon,{is:n}),e.createElement(w,null,r),e.createElement(T,null),e.createElement(a.Close,null))))})),o)},Y=()=>{const o=e.useContext(m);if(!o)throw new n("useToastContext must be used within a ToastProvider");return o};c.displayName="ToastProvider";export{c as ToastProvider,j as toast,Y as useToastContext};
+import{Error as i}from"@atom-learning/icons";import*as e from"react";import{useToaster as h}from"react-hot-toast";import{default as B}from"react-hot-toast";import{styled as n}from"../../styled.js";import{Spacer as y}from"../spacer/Spacer.js";import{Text as g}from"../text/Text.js";import{Toast as s}from"./Toast.js";const T=n("div",{base:["fixed","z-2147483647","inset-2","pointer-events-none","sm:top-3"]}),C=n("div",{base:["absolute","w-full","flex","justify-center","items-center","rounded-sm","box-border","min-h-12","[--slide-opacity-out:0]","[--slide-direction-out-y:-100%]"],variants:{visible:{true:["motion-safe:animate-slide-direction-in"],false:["opacity-0","motion-safe:animate-slide-direction-out"]}}}),l=e.createContext(null),m=({children:r,className:c})=>{const{toasts:d,handlers:u}=h(),{startPause:f,endPause:p,calculateOffset:v,updateHeight:x}=u;return e.createElement(e.Fragment,null,e.createElement(T,{onMouseEnter:f,onMouseLeave:p,className:c},d.map(t=>{const{message:o}=t,E=v(t.id,{reverseOrder:!0,margin:8}),b=a=>{a&&t.height===void 0&&x(t.id,a.getBoundingClientRect().height)};return e.createElement(C,{key:t.id,ref:b,visible:t.visible,role:t.role,"aria-live":t.ariaLive,style:{"--offset":"".concat(E,"px")},className:"top-(--offset)"},e.createElement(l.Provider,{value:t},typeof o=="function"?o(t):e.isValidElement(o)?o:e.createElement(s,{className:"w-100"},t.type==="error"&&e.createElement(s.Icon,{is:i}),e.createElement(g,null,o),e.createElement(y,null),e.createElement(s.Close,null))))})),r)},P=()=>{const r=e.useContext(l);if(!r)throw new i("useToastContext must be used within a ToastProvider");return r};m.displayName="ToastProvider";export{m as ToastProvider,B as toast,P as useToastContext};
 //# sourceMappingURL=ToastProvider.js.map

package/dist/components/toast/ToastProvider.js.map

@@ -1 +1 @@
-{"version":3,"file":"ToastProvider.js","sources":["../../../src/components/toast/ToastProvider.tsx"],"sourcesContent":["import { Error } from '@atom-learning/icons'\nimport * as React from 'react'\nimport { useToaster } from 'react-hot-toast'\n\nimport { CSS, keyframes, styled } from '~/stitches'\nexport { default as toast } from 'react-hot-toast'\nimport type { Toast as ToastType } from 'react-hot-toast/dist/core/types'\n\nimport { MAX_Z_INDEX } from '~/constants/zIndices'\n\nimport { Flex } from '../flex'\nimport { Spacer } from '../spacer'\nimport { Text } from '../text'\nimport { Toast } from './Toast'\n\nconst DEFAULT_OFFSET = '$2'\nconst TOAST_WIDTH = 400\n\nconst ToastProviderBase = styled('div', {\n  position: 'fixed',\n  zIndex: MAX_Z_INDEX,\n  inset: DEFAULT_OFFSET,\n  pointerEvents: 'none',\n  '@sm': {\n    top: '$3'\n  }\n})\n\nconst slideIn = keyframes({\n  '0%': { transform: 'translateY(-100%)', opacity: 0 },\n  '100%': { transform: `translateY(0)`, opacity: 1 }\n})\n\nconst slideOut = keyframes({\n  '0%': { transform: `translateY(0)`, opacity: 1 },\n  '100%': { transform: `translateY(-100%)`, opacity: 0 }\n})\n\nconst ToastWrapper = styled('div', {\n  position: 'absolute',\n  width: '100%',\n  display: 'flex',\n  justifyContent: 'center',\n  alignItems: 'center',\n  borderRadius: '$0',\n  boxSizing: 'border-box',\n  minHeight: '$5',\n  variants: {\n    visible: {\n      true: {\n        '@allowMotion': {\n          animation: `${slideIn} 250ms cubic-bezier(0.22, 1, 0.36, 1)`\n        }\n      },\n      false: {\n        opacity: 0,\n        '@allowMotion': {\n          animation: `${slideOut} 250ms cubic-bezier(0.22, 1, 0.36, 1)`\n        }\n      }\n    }\n  }\n})\n\nconst ToastContext = React.createContext<Pick<\n  ToastType,\n  'type' | 'id' | 'message'\n> | null>(null)\n\nexport const ToastProvider = ({\n  children,\n  css\n}: React.PropsWithChildren<{ css?: CSS }>) => {\n  const { toasts, handlers } = useToaster()\n  const { startPause, endPause, calculateOffset, updateHeight } = handlers\n\n  return (\n    <>\n      <ToastProviderBase\n        onMouseEnter={startPause}\n        onMouseLeave={endPause}\n        css={css}\n      >\n        {toasts.map((toast) => {\n          const { message: children } = toast\n\n          const offset = calculateOffset(toast.id, {\n            reverseOrder: true,\n            margin: 8\n          })\n\n          const ref = (el: HTMLDivElement | null) => {\n            if (el && toast.height === undefined) {\n              updateHeight(toast.id, el.getBoundingClientRect().height)\n            }\n          }\n\n          return (\n            <ToastWrapper\n              key={toast.id}\n              ref={ref}\n              visible={toast.visible}\n              role={toast.role}\n              aria-live={toast.ariaLive}\n              css={{ top: offset }}\n            >\n              <ToastContext.Provider value={toast}>\n                {typeof children === 'function' ? (\n                  children(toast)\n                ) : React.isValidElement(children) ? (\n                  children\n                ) : (\n                  <Toast css={{ width: TOAST_WIDTH }}>\n                    {toast.type === 'error' && <Toast.Icon is={Error} />}\n                    <Text>{children}</Text>\n                    <Spacer />\n                    <Toast.Close />\n                  </Toast>\n                )}\n              </ToastContext.Provider>\n            </ToastWrapper>\n          )\n        })}\n      </ToastProviderBase>\n      {children}\n    </>\n  )\n}\n\nexport const useToastContext = () => {\n  const context = React.useContext(ToastContext)\n\n  if (!context) {\n    throw new Error('useToastContext must be used within a ToastProvider')\n  }\n\n  return context\n}\n\nToastProvider.displayName = 'ToastProvider'\n"],"names":["DEFAULT_OFFSET","TOAST_WIDTH","ToastProviderBase","styled","MAX_Z_INDEX","slideIn","keyframes","slideOut","ToastWrapper","ToastContext","React","ToastProvider","children","css","toasts","handlers","useToaster","startPause","endPause","calculateOffset","updateHeight","toast","offset","ref","el","Toast","Error","Text","Spacer","useToastContext","context"],"mappings":"uYAeA,MAAMA,EAAiB,KACjBC,EAAc,IAEdC,EAAoBC,EAAO,MAAO,CACtC,SAAU,QACV,OAAQC,EACR,MAAOJ,EACP,cAAe,OACf,MAAO,CACL,IAAK,IACP,CACF,CAAC,EAEKK,EAAUC,EAAU,CACxB,KAAM,CAAE,UAAW,oBAAqB,QAAS,CAAE,EACnD,OAAQ,CAAE,UAAW,gBAAiB,QAAS,CAAE,CACnD,CAAC,EAEKC,EAAWD,EAAU,CACzB,KAAM,CAAE,UAAW,gBAAiB,QAAS,CAAE,EAC/C,OAAQ,CAAE,UAAW,oBAAqB,QAAS,CAAE,CACvD,CAAC,EAEKE,EAAeL,EAAO,MAAO,CACjC,SAAU,WACV,MAAO,OACP,QAAS,OACT,eAAgB,SAChB,WAAY,SACZ,aAAc,KACd,UAAW,aACX,UAAW,KACX,SAAU,CACR,QAAS,CACP,KAAM,CACJ,eAAgB,CACd,UAAW,GAAGE,wCAChB,CACF,EACA,MAAO,CACL,QAAS,EACT,eAAgB,CACd,UAAW,GAAGE,wCAChB,CACF,CACF,CACF,CACF,CAAC,EAEKE,EAAeC,EAAM,cAGjB,IAAI,EAEDC,EAAgB,CAAC,CAC5B,SAAAC,EACA,IAAAC,CACF,IAA8C,CAC5C,KAAM,CAAE,OAAAC,EAAQ,SAAAC,CAAS,EAAIC,EAAAA,EACvB,CAAE,WAAAC,EAAY,SAAAC,EAAU,gBAAAC,EAAiB,aAAAC,CAAa,EAAIL,EAEhE,OACEL,EAAA,cAAAA,EAAA,SACEA,KAAAA,EAAA,cAACR,EAAA,CACC,aAAce,EACd,aAAcC,EACd,IAAKL,GAEJC,EAAO,IAAKO,GAAU,CACrB,KAAM,CAAE,QAAST,CAAS,EAAIS,EAExBC,EAASH,EAAgBE,EAAM,GAAI,CACvC,aAAc,GACd,OAAQ,CACV,CAAC,EAEKE,EAAOC,GAA8B,CACrCA,GAAMH,EAAM,SAAW,QACzBD,EAAaC,EAAM,GAAIG,EAAG,sBAAsB,EAAE,MAAM,CAE5D,EAEA,OACEd,EAAA,cAACF,EAAA,CACC,IAAKa,EAAM,GACX,IAAKE,EACL,QAASF,EAAM,QACf,KAAMA,EAAM,KACZ,YAAWA,EAAM,SACjB,IAAK,CAAE,IAAKC,CAAO,CAEnBZ,EAAAA,EAAA,cAACD,EAAa,SAAb,CAAsB,MAAOY,CAC3B,EAAA,OAAOT,GAAa,WACnBA,EAASS,CAAK,EACZX,EAAM,eAAeE,CAAQ,EAC/BA,EAEAF,EAAA,cAACe,EAAA,CAAM,IAAK,CAAE,MAAOxB,CAAY,CAAA,EAC9BoB,EAAM,OAAS,SAAWX,EAAA,cAACe,EAAM,KAAN,CAAW,GAAIC,CAAO,CAAA,EAClDhB,EAAA,cAACiB,EAAA,KAAMf,CAAS,EAChBF,EAAA,cAACkB,EAAA,IAAO,EACRlB,EAAA,cAACe,EAAM,MAAN,IAAY,CACf,CAEJ,CACF,CAEJ,CAAC,CACH,EACCb,CACH,CAEJ,EAEaiB,EAAkB,IAAM,CACnC,MAAMC,EAAUpB,EAAM,WAAWD,CAAY,EAE7C,GAAI,CAACqB,EACH,MAAM,IAAIJ,EAAM,qDAAqD,EAGvE,OAAOI,CACT,EAEAnB,EAAc,YAAc"}
+{"version":3,"file":"ToastProvider.js","sources":["../../../src/components/toast/ToastProvider.tsx"],"sourcesContent":["import { Error } from '@atom-learning/icons'\nimport * as React from 'react'\nimport { useToaster } from 'react-hot-toast'\nimport type { Toast as ToastType } from 'react-hot-toast/dist/core/types'\n\nimport { styled } from '~/styled'\n\nimport { Spacer } from '../spacer'\nimport { Text } from '../text'\nimport { Toast } from './Toast'\n\nexport { default as toast } from 'react-hot-toast'\n\nconst ToastProviderBase = styled('div', {\n  base: ['fixed', 'z-2147483647', 'inset-2', 'pointer-events-none', 'sm:top-3']\n})\n\nconst ToastWrapper = styled('div', {\n  base: [\n    'absolute',\n    'w-full',\n    'flex',\n    'justify-center',\n    'items-center',\n    'rounded-sm',\n    'box-border',\n    'min-h-12',\n    '[--slide-opacity-out:0]',\n    '[--slide-direction-out-y:-100%]'\n  ],\n  variants: {\n    visible: {\n      true: ['motion-safe:animate-slide-direction-in'],\n      false: ['opacity-0', 'motion-safe:animate-slide-direction-out']\n    }\n  }\n})\n\nconst ToastContext = React.createContext<Pick<\n  ToastType,\n  'type' | 'id' | 'message'\n> | null>(null)\n\nexport const ToastProvider = ({\n  children,\n  className\n}: React.PropsWithChildren<{ className?: string }>) => {\n  const { toasts, handlers } = useToaster()\n  const { startPause, endPause, calculateOffset, updateHeight } = handlers\n\n  return (\n    <>\n      <ToastProviderBase\n        onMouseEnter={startPause}\n        onMouseLeave={endPause}\n        className={className}\n      >\n        {toasts.map((toast) => {\n          const { message: children } = toast\n\n          const offset = calculateOffset(toast.id, {\n            reverseOrder: true,\n            margin: 8\n          })\n\n          const ref = (el: HTMLDivElement | null) => {\n            if (el && toast.height === undefined) {\n              updateHeight(toast.id, el.getBoundingClientRect().height)\n            }\n          }\n\n          return (\n            <ToastWrapper\n              key={toast.id}\n              ref={ref}\n              visible={toast.visible}\n              role={toast.role}\n              aria-live={toast.ariaLive}\n              style={{ '--offset': `${offset}px` }}\n              className=\"top-(--offset)\"\n            >\n              <ToastContext.Provider value={toast}>\n                {typeof children === 'function' ? (\n                  children(toast)\n                ) : React.isValidElement(children) ? (\n                  children\n                ) : (\n                  <Toast className=\"w-100\">\n                    {toast.type === 'error' && <Toast.Icon is={Error} />}\n                    <Text>{children}</Text>\n                    <Spacer />\n                    <Toast.Close />\n                  </Toast>\n                )}\n              </ToastContext.Provider>\n            </ToastWrapper>\n          )\n        })}\n      </ToastProviderBase>\n      {children}\n    </>\n  )\n}\n\nexport const useToastContext = () => {\n  const context = React.useContext(ToastContext)\n\n  if (!context) {\n    throw new Error('useToastContext must be used within a ToastProvider')\n  }\n\n  return context\n}\n\nToastProvider.displayName = 'ToastProvider'\n"],"names":["ToastProviderBase","styled","ToastWrapper","ToastContext","React","ToastProvider","children","className","toasts","handlers","useToaster","startPause","endPause","calculateOffset","updateHeight","toast","offset","ref","el","Toast","Error","Text","Spacer","useToastContext","context"],"mappings":"4TAaA,MAAMA,EAAoBC,EAAO,MAAO,CACtC,KAAM,CAAC,QAAS,eAAgB,UAAW,sBAAuB,UAAU,CAC9E,CAAC,EAEKC,EAAeD,EAAO,MAAO,CACjC,KAAM,CACJ,WACA,SACA,OACA,iBACA,eACA,aACA,aACA,WACA,0BACA,iCACF,EACA,SAAU,CACR,QAAS,CACP,KAAM,CAAC,wCAAwC,EAC/C,MAAO,CAAC,YAAa,yCAAyC,CAChE,CACF,CACF,CAAC,EAEKE,EAAeC,EAAM,cAGjB,IAAI,EAEDC,EAAgB,CAAC,CAC5B,SAAAC,EACA,UAAAC,CACF,IAAuD,CACrD,KAAM,CAAE,OAAAC,EAAQ,SAAAC,CAAS,EAAIC,EAAW,EAClC,CAAE,WAAAC,EAAY,SAAAC,EAAU,gBAAAC,EAAiB,aAAAC,CAAa,EAAIL,EAEhE,OACEL,EAAA,cAAAA,EAAA,SACEA,KAAAA,EAAA,cAACJ,EAAA,CACC,aAAcW,EACd,aAAcC,EACd,UAAWL,CAAAA,EAEVC,EAAO,IAAKO,GAAU,CACrB,KAAM,CAAE,QAAST,CAAS,EAAIS,EAExBC,EAASH,EAAgBE,EAAM,GAAI,CACvC,aAAc,GACd,OAAQ,CACV,CAAC,EAEKE,EAAOC,GAA8B,CACrCA,GAAMH,EAAM,SAAW,QACzBD,EAAaC,EAAM,GAAIG,EAAG,wBAAwB,MAAM,CAE5D,EAEA,OACEd,EAAA,cAACF,EAAA,CACC,IAAKa,EAAM,GACX,IAAKE,EACL,QAASF,EAAM,QACf,KAAMA,EAAM,KACZ,YAAWA,EAAM,SACjB,MAAO,CAAE,WAAY,GAAG,OAAAC,EAAM,IAAA,CAAK,EACnC,UAAU,gBAEVZ,EAAAA,EAAA,cAACD,EAAa,SAAb,CAAsB,MAAOY,CAC3B,EAAA,OAAOT,GAAa,WACnBA,EAASS,CAAK,EACZX,EAAM,eAAeE,CAAQ,EAC/BA,EAEAF,EAAA,cAACe,EAAA,CAAM,UAAU,OACdJ,EAAAA,EAAM,OAAS,SAAWX,EAAA,cAACe,EAAM,KAAN,CAAW,GAAIC,CAAAA,CAAO,EAClDhB,EAAA,cAACiB,EAAA,KAAMf,CAAS,EAChBF,EAAA,cAACkB,EAAA,IAAO,EACRlB,EAAA,cAACe,EAAM,MAAN,IAAY,CACf,CAEJ,CACF,CAEJ,CAAC,CACH,EACCb,CACH,CAEJ,EAEaiB,EAAkB,IAAM,CACnC,MAAMC,EAAUpB,EAAM,WAAWD,CAAY,EAE7C,GAAI,CAACqB,EACH,MAAM,IAAIJ,EAAM,qDAAqD,EAGvE,OAAOI,CACT,EAEAnB,EAAc,YAAc"}