@jenesei-software/jenesei-kit-react 1.0.0

package/build/context.constants-BaD7xj_m.cjs

@@ -0,0 +1,100 @@
+"use strict";const e=require("react"),n=require("./jsx-runtime-BcGej2Kr.cjs"),t=require("framer-motion"),i=require("styled-components"),o=require("uuid"),r=require("./component-D1NPhRuV.cjs"),s=require("./component.styles-BfvB83xM.cjs"),l=require("./component-C52VCES6.cjs"),d=require("./style-Dm74EPGE.cjs"),c=e.createContext(null),x=e.memo(e=>n.jsxRuntimeExports.jsx(t.motion.div,{layout:!0,initial:{opacity:0,scale:1,y:e.isLastViewIndex?e.isTop?E:-E:e.isTop?-E:E},animate:{y:0,opacity:e.isMoreThanLastViewIndex?0:1,pointerEvents:e.isMoreThanLastViewIndex?"none":"auto",display:e.isMoreThanLastViewIndex?"none":"flex",scale:e.isHovered?1:1-e.index*j,marginTop:e.isTop?e.isHovered||0===e.index?"0px":`-${y}px`:"0px",marginBottom:e.isTop||e.isHovered||0===e.index?"0px":`-${y}px`},style:{zIndex:-e.index},whileInView:{opacity:e.isMoreThanLastViewIndex?0:1},exit:{opacity:0,y:e.isTop?-E:E},transition:{type:"spring",duration:b},children:n.jsxRuntimeExports.jsxs(u,{$genre:e.genre,onClick:()=>"clickOnSonner"===e.hidingMode&&e.handleOnClick(e.id,"clickOnSonner"),children:[(e.isLoading||e.icon)&&n.jsxRuntimeExports.jsx(m,{children:e.isLoading?n.jsxRuntimeExports.jsx(s.Icon,{size:"medium",type:"loading",name:"Line"}):e.icon&&n.jsxRuntimeExports.jsx(s.Icon,{name:e.icon,type:"id",size:"medium"})}),n.jsxRuntimeExports.jsx(p,{children:e.content?e.content:n.jsxRuntimeExports.jsxs(n.jsxRuntimeExports.Fragment,{children:[e.title&&n.jsxRuntimeExports.jsx(f,{$genre:e.genre,children:e.title}),e.description&&n.jsxRuntimeExports.jsx(v,{$genre:e.genre,children:e.description})]})}),e.button&&e.button.content&&n.jsxRuntimeExports.jsx(h,{children:n.jsxRuntimeExports.jsx(r.Button,{genre:e.buttonGenre,size:"small",onClick:()=>"clickOnButton"===e.hidingMode&&e.handleOnClick(e.id,"clickOnButton"),children:e.button.content})})]})},e.id)),a=i.div`
+  position: fixed;
+  z-index: ${e=>e.$zIndex};
+  max-height: calc(100dvh - 20px);
+  width: 320px;
+  display: flex;
+  margin: 10px;
+  gap: ${e=>e.$gap}px;
+  box-sizing: content-box;
+  overflow-y: visible;
+  overflow-x: visible;
+  ${d.addRemoveScrollbar}
+  ${e=>"bottom-center"===e.$position?i.css`
+          bottom: 0;
+          left: 50%;
+          transform: translateX(-50%);
+          justify-content: flex-start;
+          flex-direction: column-reverse;
+        `:"bottom-left"===e.$position?i.css`
+            left: 0;
+            bottom: 0;
+            justify-content: flex-start;
+            flex-direction: column-reverse;
+          `:"bottom-right"===e.$position?i.css`
+              right: 0;
+              bottom: 0;
+              justify-content: flex-start;
+              flex-direction: column-reverse;
+            `:"top-right"===e.$position?i.css`
+                top: 0;
+                right: 0;
+                justify-content: flex-end;
+                flex-direction: column;
+              `:"top-left"===e.$position?i.css`
+                  top: 0;
+                  left: 0;
+                  justify-content: flex-end;
+                  flex-direction: column;
+                `:"top-center"===e.$position?i.css`
+                    top: 0;
+                    left: 50%;
+                    transform: translateX(-50%);
+                    justify-content: flex-end;
+                    flex-direction: column;
+                  `:i.css``}
+`,u=i.div`
+  background: ${e=>e.theme.colors.sonner[e.$genre].wrapper.background};
+  color: ${e=>e.theme.colors.sonner[e.$genre].icon.color};
+  border-radius: 12px;
+  border-style: solid;
+  border-color: ${e=>e.theme.colors.sonner[e.$genre].wrapper.borderColor};
+  border-width: 1px;
+  padding: 16px 20px 16px 20px;
+  display: flex;
+  flex-direction: row;
+  gap: 10px;
+  align-items: center;
+  justify-content: flex-start;
+  align-self: stretch;
+  flex-shrink: 0;
+  flex-shrink: 1;
+  min-width: 320px;
+  min-height: 64px;
+  transform-origin: center center;
+  box-shadow: ${e=>e.theme.colors.sonner[e.$genre].wrapper.boxShadow};
+  overflow: visible;
+  &:hover {
+    box-shadow: ${e=>e.theme.colors.sonner[e.$genre].wrapper.boxShadowHover};
+  }
+  ${d.addTransition};
+`,p=i.div`
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  align-items: flex-start;
+  justify-content: flex-start;
+  align-self: stretch;
+  flex-shrink: 0;
+  flex: 1;
+  position: relative;
+  overflow: hidden;
+`,m=i.div`
+  display: contents;
+`,f=i.div`
+  ${e=>l.getFontSizeStyles(14,700,e.theme.font.family)}
+  color:  ${e=>e.theme.colors.sonner[e.$genre].title.color};
+  text-align: left;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+`,v=i.div`
+  ${e=>l.getFontSizeStyles(12,400,e.theme.font.family)}
+  color:${e=>e.theme.colors.sonner[e.$genre].description.color};
+  text-align: left;
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+`,h=i.div``,g=100,j=.04,E=100,b=.3,R="black",y=60,$={content:"Undo",onClick:()=>{}};exports.DEFAULT_PROVIDER_SONNER_BUTTON=$,exports.DEFAULT_PROVIDER_SONNER_DURATION=b,exports.DEFAULT_PROVIDER_SONNER_GENRE=R,exports.DEFAULT_PROVIDER_SONNER_MARGIN_BOTTOM=y,exports.DEFAULT_PROVIDER_SONNER_SCALE=j,exports.DEFAULT_PROVIDER_SONNER_Y=E,exports.DEFAULT_PROVIDER_SONNER_Z_INDEX=g,exports.ProviderSonner=r=>{var s,l,d,u,p,m;const f=e.useMemo(()=>r.visibleToasts,[r.visibleToasts]),v=e.useMemo(()=>{var e;return null==(e=null==r?void 0:r.default)?void 0:e.description},[null==(s=null==r?void 0:r.default)?void 0:s.description]),h=e.useMemo(()=>{var e;return null==(e=null==r?void 0:r.default)?void 0:e.title},[null==(l=null==r?void 0:r.default)?void 0:l.title]),j=e.useMemo(()=>{var e;return null==(e=null==r?void 0:r.default)?void 0:e.button},[null==(d=null==r?void 0:r.default)?void 0:d.button]),E=e.useMemo(()=>{var e;return null==(e=null==r?void 0:r.default)?void 0:e.hidingTime},[null==(u=null==r?void 0:r.default)?void 0:u.hidingTime]),b=e.useMemo(()=>{var e;return(null==(e=null==r?void 0:r.default)?void 0:e.hidingMode)??"clickOnButton"},[null==(p=null==r?void 0:r.default)?void 0:p.hidingMode]),y=e.useMemo(()=>{var e;return(null==(e=null==r?void 0:r.default)?void 0:e.genre)??R},[null==(m=null==r?void 0:r.default)?void 0:m.genre]),T=e.useMemo(()=>r.position.includes("top"),[r.position]),[S,w]=e.useState([]),[I,O]=e.useState(!1),L=e.useCallback(()=>{O(!0)},[]),M=e.useCallback(()=>{O(!1)},[]),k=e.useCallback(e=>{w(n=>{const t=n.find(n=>n.id===e);if(!t)return n;const i=t.index,o=n.filter(n=>n.id!==e).map(e=>({...e,index:e.index>i?e.index-1:e.index}));return 0===o.length&&M(),o})},[M]),_=e.useCallback(e=>{const n=e.id??o.v4(),t=e.hidingTime??E;w(t=>{const i=t.findIndex(e=>e.id===n);let o;if(-1!==i)o=[...t],o[i]={...e,id:n,index:t[i].index};else{o=t.map(e=>({...e,index:e.index+1}));const i={...e,id:n,index:0};o.unshift(i)}return o}),void 0!==t&&setTimeout(()=>{k(n)},t)},[E,k]),C=e.useCallback((e,n,t)=>{const i=o.v4();return _({...n,id:i,isLoading:!0}),e.then(e=>{_({...t(e,void 0),id:i})}).catch(e=>{_({...t(void 0,e),id:i})})},[_]),N=e.useCallback(e=>{k(e)},[k]),D=i.useTheme();return n.jsxRuntimeExports.jsxs(c.Provider,{value:{toast:_,promise:C,remove:k,contentHistory:S},children:[n.jsxRuntimeExports.jsx(a,{$zIndex:r.zIndex??g,$position:r.position,$gap:r.gap,onMouseEnter:L,onMouseLeave:M,children:n.jsxRuntimeExports.jsx(t.AnimatePresence,{children:S.map(e=>{const t=e.index,i=!!f&&t>f,o=!!f&&t>f-1,r=!!f&&t==f-1,s=e.genre??y,l=D.colors.sonner[s].button.genre,d=e.hidingMode??b,c="content"in e&&e.content,a="title"in e&&e.title,u="description"in e&&e.description;return n.jsxRuntimeExports.jsx(x,{isMoreThanLastViewIndexPlusOne:i,isMoreThanLastViewIndex:o,isLastViewIndex:r,isTop:T,id:e.id,icon:e.icon,isLoading:e.isLoading,index:t,buttonGenre:l,hidingMode:d,isHovered:I,genre:s,content:c,title:a||h,description:u||v,button:e.button??j??$,handleOnClick:N},e.id)})})}),r.children]})},exports.SonnerButtonWrapper=h,exports.SonnerContent=p,exports.SonnerContentDescription=v,exports.SonnerContentTitle=f,exports.SonnerContext=c,exports.SonnerElementWrapper=u,exports.SonnerIcon=m,exports.SonnerLayout=a,exports.useSonner=()=>{const n=e.useContext(c);if(!n)throw new Error("useSonner must be used within an ProviderSonner");return n};
+//# sourceMappingURL=context.constants-BaD7xj_m.cjs.map

package/build/context.constants-BaD7xj_m.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.constants-BaD7xj_m.cjs","sources":["../src/contexts/context-sonner/context.tsx","../src/contexts/context-sonner/context.styles.tsx","../src/contexts/context-sonner/context.constants.ts","../src/contexts/context-sonner/context.hooks.ts"],"sourcesContent":["import { AnimatePresence, motion } from 'framer-motion'\nimport { FC, createContext, memo, useCallback, useMemo, useState } from 'react'\nimport { useTheme } from 'styled-components'\nimport { v4 as uuidv4 } from 'uuid'\n\nimport { Button } from '@local/components/button'\nimport { Icon } from '@local/components/icon'\n\nimport {\n  DEFAULT_PROVIDER_SONNER_BUTTON,\n  DEFAULT_PROVIDER_SONNER_DURATION,\n  DEFAULT_PROVIDER_SONNER_GENRE,\n  DEFAULT_PROVIDER_SONNER_MARGIN_BOTTOM,\n  DEFAULT_PROVIDER_SONNER_SCALE,\n  DEFAULT_PROVIDER_SONNER_Y,\n  DEFAULT_PROVIDER_SONNER_Z_INDEX,\n  ProviderSonnerProps,\n  SonnerButtonWrapper,\n  SonnerContent,\n  SonnerContentDescription,\n  SonnerContentProps,\n  SonnerContentStandardProps,\n  SonnerContentTitle,\n  SonnerContextProps,\n  SonnerElementProps,\n  SonnerElementWrapper,\n  SonnerIcon,\n  SonnerLayout\n} from '.'\n\nexport const SonnerContext = createContext<SonnerContextProps | null>(null)\n\nexport const ProviderSonner: FC<ProviderSonnerProps> = props => {\n  const memoVisibleToasts: ProviderSonnerProps['visibleToasts'] = useMemo(\n    () => props.visibleToasts,\n    [props.visibleToasts]\n  )\n  const memoDefaultDescription: ProviderSonnerProps['default']['description'] = useMemo(\n    () => props?.default?.description,\n    [props?.default?.description]\n  )\n  const memoDefaultTitle: ProviderSonnerProps['default']['title'] = useMemo(\n    () => props?.default?.title,\n    [props?.default?.title]\n  )\n  const memoDefaultButton: ProviderSonnerProps['default']['button'] = useMemo(\n    () => props?.default?.button,\n    [props?.default?.button]\n  )\n  const memoDefaultHidingTime: ProviderSonnerProps['default']['hidingTime'] = useMemo(\n    () => props?.default?.hidingTime,\n    [props?.default?.hidingTime]\n  )\n  const memoDefaultHidingMode: ProviderSonnerProps['default']['hidingMode'] = useMemo(\n    () => props?.default?.hidingMode ?? 'clickOnButton',\n    [props?.default?.hidingMode]\n  )\n  const memoDefaultGenre = useMemo(\n    () => props?.default?.genre ?? DEFAULT_PROVIDER_SONNER_GENRE,\n    [props?.default?.genre]\n  )\n\n  const isTop = useMemo(() => props.position.includes('top'), [props.position])\n\n  const [contentHistory, setContentHistory] = useState<SonnerContentProps[]>([])\n\n  const [isHovered, setIsHovered] = useState(false)\n\n  const handleMouseEnter = useCallback(() => {\n    setIsHovered(true)\n  }, [])\n\n  const handleMouseLeave = useCallback(() => {\n    setIsHovered(false)\n  }, [])\n\n  const remove: SonnerContextProps['remove'] = useCallback(\n    id => {\n      setContentHistory(prev => {\n        const itemToRemove = prev.find(item => item.id === id)\n\n        if (!itemToRemove) return prev\n\n        const indexToRemove = itemToRemove.index\n\n        const updatedHistory = prev\n          .filter(item => item.id !== id)\n          .map(item => ({\n            ...item,\n            index: item.index > indexToRemove ? item.index - 1 : item.index\n          }))\n\n        if (updatedHistory.length === 0) handleMouseLeave()\n\n        return updatedHistory\n      })\n    },\n    [handleMouseLeave]\n  )\n\n  const toast: SonnerContextProps['toast'] = useCallback(\n    content => {\n      const id = content.id ?? uuidv4()\n\n      const hidingTime = content.hidingTime ?? memoDefaultHidingTime\n\n      setContentHistory(prev => {\n        const existingIndex = prev.findIndex(item => item.id === id)\n\n        let updatedHistory\n        if (existingIndex !== -1) {\n          // Replace existing item\n          updatedHistory = [...prev]\n          updatedHistory[existingIndex] = { ...content, id, index: prev[existingIndex].index }\n        } else {\n          // Add new item\n          updatedHistory = prev.map(item => ({\n            ...item,\n            index: item.index + 1\n          }))\n          const newContent = { ...content, id, index: 0 }\n          updatedHistory.unshift(newContent)\n        }\n\n        return updatedHistory\n      })\n\n      if (hidingTime !== undefined) {\n        setTimeout(() => {\n          remove(id)\n        }, hidingTime)\n      }\n    },\n    [memoDefaultHidingTime, remove]\n  )\n  const promise: SonnerContextProps['promise'] = useCallback(\n    <T,>(\n      promise: Promise<T>,\n      expectation: Omit<SonnerContentProps, 'index'>,\n      localToast: (success: T | undefined, error: unknown | undefined) => Omit<SonnerContentProps, 'index'>\n    ) => {\n      const id = uuidv4()\n      toast({ ...expectation, id, isLoading: true })\n\n      return promise\n        .then(result => {\n          toast({ ...localToast(result, undefined), id })\n        })\n        .catch(error => {\n          toast({ ...localToast(undefined, error), id })\n        })\n    },\n    [toast]\n  )\n  const handleOnClick = useCallback(\n    (id: SonnerContentStandardProps['id']) => {\n      remove(id)\n    },\n    [remove]\n  )\n  const theme = useTheme()\n  return (\n    <SonnerContext.Provider value={{ toast, promise, remove, contentHistory }}>\n      <SonnerLayout\n        $zIndex={props.zIndex ?? DEFAULT_PROVIDER_SONNER_Z_INDEX}\n        $position={props.position}\n        $gap={props.gap}\n        onMouseEnter={handleMouseEnter}\n        onMouseLeave={handleMouseLeave}\n      >\n        <AnimatePresence>\n          {contentHistory.map(content => {\n            const index = content.index\n            const isMoreThanLastViewIndexPlusOne = memoVisibleToasts ? index > memoVisibleToasts : false\n            const isMoreThanLastViewIndex = memoVisibleToasts ? index > memoVisibleToasts - 1 : false\n            const isLastViewIndex = memoVisibleToasts ? index == memoVisibleToasts - 1 : false\n            const localGenre = content.genre ?? memoDefaultGenre\n            const buttonGenre = theme.colors.sonner[localGenre].button.genre\n            const hidingMode = content.hidingMode ?? memoDefaultHidingMode\n\n            const localContent = 'content' in content ? content.content : false\n            const localTitle = 'title' in content ? content.title : false\n            const localDescription = 'description' in content ? content.description : false\n            return (\n              <MemoizedSonnerElement\n                isMoreThanLastViewIndexPlusOne={isMoreThanLastViewIndexPlusOne}\n                isMoreThanLastViewIndex={isMoreThanLastViewIndex}\n                isLastViewIndex={isLastViewIndex}\n                isTop={isTop}\n                key={content.id}\n                id={content.id}\n                icon={content.icon}\n                isLoading={content.isLoading}\n                index={index}\n                buttonGenre={buttonGenre}\n                hidingMode={hidingMode}\n                isHovered={isHovered}\n                genre={localGenre}\n                content={localContent}\n                title={localTitle || memoDefaultTitle}\n                description={localDescription || memoDefaultDescription}\n                button={content.button ?? memoDefaultButton ?? DEFAULT_PROVIDER_SONNER_BUTTON}\n                handleOnClick={handleOnClick}\n              />\n            )\n          })}\n        </AnimatePresence>\n      </SonnerLayout>\n      {props.children}\n    </SonnerContext.Provider>\n  )\n}\n\nconst SonnerElement = (props: SonnerElementProps) => {\n  return (\n    <motion.div\n      key={props.id}\n      layout\n      initial={{\n        opacity: 0,\n        scale: 1,\n        y: props.isLastViewIndex\n          ? !props.isTop\n            ? -DEFAULT_PROVIDER_SONNER_Y\n            : DEFAULT_PROVIDER_SONNER_Y\n          : !props.isTop\n            ? DEFAULT_PROVIDER_SONNER_Y\n            : -DEFAULT_PROVIDER_SONNER_Y\n      }}\n      animate={{\n        y: 0,\n        opacity: props.isMoreThanLastViewIndex ? 0 : 1,\n        pointerEvents: props.isMoreThanLastViewIndex ? 'none' : 'auto',\n        display: props.isMoreThanLastViewIndex ? 'none' : 'flex',\n        scale: !props.isHovered ? 1 - props.index * DEFAULT_PROVIDER_SONNER_SCALE : 1,\n        marginTop: props.isTop\n          ? props.isHovered || props.index === 0\n            ? `0px`\n            : `-${DEFAULT_PROVIDER_SONNER_MARGIN_BOTTOM}px`\n          : '0px',\n        marginBottom: !props.isTop\n          ? props.isHovered || props.index === 0\n            ? `0px`\n            : `-${DEFAULT_PROVIDER_SONNER_MARGIN_BOTTOM}px`\n          : '0px'\n      }}\n      style={{\n        zIndex: -props.index\n      }}\n      whileInView={{ opacity: props.isMoreThanLastViewIndex ? 0 : 1 }}\n      exit={{ opacity: 0, y: !props.isTop ? DEFAULT_PROVIDER_SONNER_Y : -DEFAULT_PROVIDER_SONNER_Y }}\n      transition={{ type: 'spring', duration: DEFAULT_PROVIDER_SONNER_DURATION }}\n    >\n      <SonnerElementWrapper\n        $genre={props.genre}\n        onClick={() => props.hidingMode === 'clickOnSonner' && props.handleOnClick(props.id, 'clickOnSonner')}\n      >\n        {(props.isLoading || props.icon) && (\n          <SonnerIcon>\n            {props.isLoading ? (\n              <Icon size=\"medium\" type=\"loading\" name=\"Line\" />\n            ) : (\n              props.icon && <Icon name={props.icon} type=\"id\" size={'medium'} />\n            )}\n          </SonnerIcon>\n        )}\n        <SonnerContent>\n          {props.content ? (\n            props.content\n          ) : (\n            <>\n              {props.title && <SonnerContentTitle $genre={props.genre}>{props.title}</SonnerContentTitle>}\n              {props.description && (\n                <SonnerContentDescription $genre={props.genre}>{props.description}</SonnerContentDescription>\n              )}\n            </>\n          )}\n        </SonnerContent>\n\n        {props.button && props.button.content && (\n          <SonnerButtonWrapper>\n            <Button\n              genre={props.buttonGenre}\n              size=\"small\"\n              onClick={() => props.hidingMode === 'clickOnButton' && props.handleOnClick(props.id, 'clickOnButton')}\n            >\n              {props.button.content}\n            </Button>\n          </SonnerButtonWrapper>\n        )}\n      </SonnerElementWrapper>\n    </motion.div>\n  )\n}\nconst MemoizedSonnerElement = memo(SonnerElement)\n","import styled, { css } from 'styled-components'\n\nimport { getFontSizeStyles } from '@local/components/typography'\nimport { addRemoveScrollbar, addTransition } from '@local/styles/add'\n\nimport { SonnerContentDescriptionProps, SonnerContentTitleProps, SonnerElementWrapperProps, SonnerLayoutProps } from '.'\n\nexport const SonnerLayout = styled.div<SonnerLayoutProps>`\n  position: fixed;\n  z-index: ${props => props.$zIndex};\n  max-height: calc(100dvh - 20px);\n  width: 320px;\n  display: flex;\n  margin: 10px;\n  gap: ${props => props.$gap}px;\n  box-sizing: content-box;\n  overflow-y: visible;\n  overflow-x: visible;\n  ${addRemoveScrollbar}\n  ${props =>\n    props.$position === 'bottom-center'\n      ? css`\n          bottom: 0;\n          left: 50%;\n          transform: translateX(-50%);\n          justify-content: flex-start;\n          flex-direction: column-reverse;\n        `\n      : props.$position === 'bottom-left'\n        ? css`\n            left: 0;\n            bottom: 0;\n            justify-content: flex-start;\n            flex-direction: column-reverse;\n          `\n        : props.$position === 'bottom-right'\n          ? css`\n              right: 0;\n              bottom: 0;\n              justify-content: flex-start;\n              flex-direction: column-reverse;\n            `\n          : props.$position === 'top-right'\n            ? css`\n                top: 0;\n                right: 0;\n                justify-content: flex-end;\n                flex-direction: column;\n              `\n            : props.$position === 'top-left'\n              ? css`\n                  top: 0;\n                  left: 0;\n                  justify-content: flex-end;\n                  flex-direction: column;\n                `\n              : props.$position === 'top-center'\n                ? css`\n                    top: 0;\n                    left: 50%;\n                    transform: translateX(-50%);\n                    justify-content: flex-end;\n                    flex-direction: column;\n                  `\n                : css``}\n`\n\nexport const SonnerElementWrapper = styled.div<SonnerElementWrapperProps>`\n  background: ${props => props.theme.colors.sonner[props.$genre].wrapper.background};\n  color: ${props => props.theme.colors.sonner[props.$genre].icon.color};\n  border-radius: 12px;\n  border-style: solid;\n  border-color: ${props => props.theme.colors.sonner[props.$genre].wrapper.borderColor};\n  border-width: 1px;\n  padding: 16px 20px 16px 20px;\n  display: flex;\n  flex-direction: row;\n  gap: 10px;\n  align-items: center;\n  justify-content: flex-start;\n  align-self: stretch;\n  flex-shrink: 0;\n  flex-shrink: 1;\n  min-width: 320px;\n  min-height: 64px;\n  transform-origin: center center;\n  box-shadow: ${props => props.theme.colors.sonner[props.$genre].wrapper.boxShadow};\n  overflow: visible;\n  &:hover {\n    box-shadow: ${props => props.theme.colors.sonner[props.$genre].wrapper.boxShadowHover};\n  }\n  ${addTransition};\n`\nexport const SonnerContent = styled.div`\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n  align-items: flex-start;\n  justify-content: flex-start;\n  align-self: stretch;\n  flex-shrink: 0;\n  flex: 1;\n  position: relative;\n  overflow: hidden;\n`\nexport const SonnerIcon = styled.div`\n  display: contents;\n`\nexport const SonnerContentTitle = styled.div<SonnerContentTitleProps>`\n  ${props => getFontSizeStyles(14, 700, props.theme.font.family)}\n  color:  ${props => props.theme.colors.sonner[props.$genre].title.color};\n  text-align: left;\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n`\nexport const SonnerContentDescription = styled.div<SonnerContentDescriptionProps>`\n  ${props => getFontSizeStyles(12, 400, props.theme.font.family)}\n  color:${props => props.theme.colors.sonner[props.$genre].description.color};\n  text-align: left;\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n`\nexport const SonnerButtonWrapper = styled.div``\n","import { ITheme } from '@local/theme'\n\nimport { ProviderSonnerProps } from '.'\n\nexport const DEFAULT_PROVIDER_SONNER_Z_INDEX = 100\nexport const DEFAULT_PROVIDER_SONNER_SCALE = 0.04\nexport const DEFAULT_PROVIDER_SONNER_Y = 100\nexport const DEFAULT_PROVIDER_SONNER_DURATION = 0.3\nexport const DEFAULT_PROVIDER_SONNER_GENRE: keyof ITheme['colors']['sonner'] = 'black'\nexport const DEFAULT_PROVIDER_SONNER_MARGIN_BOTTOM = 60\nexport const DEFAULT_PROVIDER_SONNER_BUTTON: ProviderSonnerProps['default']['button'] = {\n  content: 'Undo',\n  onClick: () => {}\n}\n","import { useContext } from 'react'\n\nimport { SonnerContext, SonnerContextProps } from '.'\n\nexport const useSonner = (): SonnerContextProps => {\n  const context = useContext(SonnerContext)\n  if (!context) {\n    throw new Error('useSonner must be used within an ProviderSonner')\n  }\n  return context\n}\n"],"names":["SonnerContext","createContext","MemoizedSonnerElement","memo","props","jsx","motion","div","layout","initial","opacity","scale","y","isLastViewIndex","isTop","DEFAULT_PROVIDER_SONNER_Y","animate","isMoreThanLastViewIndex","pointerEvents","display","isHovered","index","DEFAULT_PROVIDER_SONNER_SCALE","marginTop","DEFAULT_PROVIDER_SONNER_MARGIN_BOTTOM","marginBottom","style","zIndex","whileInView","exit","transition","type","duration","DEFAULT_PROVIDER_SONNER_DURATION","children","jsxs","SonnerElementWrapper","$genre","genre","onClick","hidingMode","handleOnClick","id","isLoading","icon","SonnerIcon","Icon","size","name","SonnerContent","content","Fragment","title","SonnerContentTitle","description","SonnerContentDescription","button","SonnerButtonWrapper","Button","buttonGenre","SonnerLayout","styled","$zIndex","$gap","addRemoveScrollbar","$position","css","theme","colors","sonner","wrapper","background","color","borderColor","boxShadow","boxShadowHover","addTransition","getFontSizeStyles","font","family","DEFAULT_PROVIDER_SONNER_Z_INDEX","DEFAULT_PROVIDER_SONNER_GENRE","DEFAULT_PROVIDER_SONNER_BUTTON","memoVisibleToasts","useMemo","visibleToasts","memoDefaultDescription","_a","default","memoDefaultTitle","_b","memoDefaultButton","_c","memoDefaultHidingTime","hidingTime","_d","memoDefaultHidingMode","_e","memoDefaultGenre","_f","position","includes","contentHistory","setContentHistory","useState","setIsHovered","handleMouseEnter","useCallback","handleMouseLeave","remove","prev","itemToRemove","find","item","indexToRemove","updatedHistory","filter","map","length","toast","uuidv4","existingIndex","findIndex","newContent","unshift","setTimeout","promise","expectation","localToast","then","result","catch","error","useTheme","Provider","value","gap","onMouseEnter","onMouseLeave","AnimatePresence","isMoreThanLastViewIndexPlusOne","localGenre","localContent","localTitle","localDescription","context","useContext","Error"],"mappings":"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"}

package/build/context.constants-CsZRZ7gH.js

@@ -0,0 +1,228 @@
+import { createContext, memo, useState, useCallback, useMemo, useContext, useEffect } from "react";
+import { v4 } from "uuid";
+import { u as useDeepCompareMemoize } from "./use-DT0XgvJT.js";
+import { AnimatePresence, motion } from "framer-motion";
+import styled from "styled-components";
+import { f as addOutline } from "./style-CEGJOjRW.js";
+import { j as jsxRuntimeExports } from "./jsx-runtime-BrDlu8eK.js";
+import { O as Outside } from "./area-DRqAofd0.js";
+const DialogContext = createContext(null);
+const ProviderDialog = (props) => {
+  const [dialogHistory, setDialogHistory] = useState([]);
+  const remove = useCallback((id) => {
+    setDialogHistory((prev) => {
+      const itemToRemove = prev.find((item) => item.id === id);
+      if (!itemToRemove) return prev;
+      const indexToRemove = itemToRemove.index;
+      const updatedHistory = prev.filter((item) => item.id !== id).map((item) => ({
+        ...item,
+        index: item.index > indexToRemove ? item.index - 1 : item.index
+      }));
+      return updatedHistory;
+    });
+  }, []);
+  const update = useCallback((dialog) => {
+    setDialogHistory((prev) => {
+      return prev.map((item) => {
+        if (item.id === dialog.id) {
+          return { ...item, ...dialog };
+        }
+        return item;
+      });
+    });
+  }, []);
+  const add = useCallback((dialog) => {
+    const id = dialog.id;
+    setDialogHistory((prev) => {
+      const existingIndex = prev.findIndex((item) => item.id === id);
+      let updatedHistory;
+      if (existingIndex !== -1) {
+        updatedHistory = [...prev];
+        updatedHistory[existingIndex] = { ...dialog, id, index: prev[existingIndex].index };
+      } else {
+        updatedHistory = prev.map((item) => ({
+          ...item,
+          index: item.index + 1
+        }));
+        const newContent = { ...dialog, id, index: 0 };
+        updatedHistory.unshift(newContent);
+      }
+      return updatedHistory;
+    });
+  }, []);
+  const dialogHistoryLength = useMemo(() => dialogHistory.length, [dialogHistory.length]);
+  const zIndex = useMemo(() => props.zIndex, [props.zIndex]);
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(DialogContext.Provider, { value: { add, remove, update, dialogHistory }, children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx(AnimatePresence, { children: dialogHistoryLength && /* @__PURE__ */ jsxRuntimeExports.jsx(
+      DialogLayout,
+      {
+        $zIndex: zIndex,
+        initial: {
+          opacity: 0
+        },
+        exit: {
+          opacity: 0
+        },
+        animate: {
+          opacity: 1
+        },
+        transition: { type: "spring", duration: DEFAULT_PROVIDER_DIALOG_DURATION_LAYOUT },
+        children: dialogHistory.map((dialog) => {
+          const index = dialog.index;
+          const content = dialog.content;
+          const id = dialog.id;
+          const props2 = dialog.props;
+          return /* @__PURE__ */ jsxRuntimeExports.jsx(
+            MemoizedDialogElement,
+            {
+              index,
+              content,
+              props: props2,
+              id,
+              remove: () => remove(id)
+            },
+            id
+          );
+        })
+      }
+    ) }),
+    props.children
+  ] });
+};
+const DialogElement = (props) => {
+  var _a, _b;
+  const [isAnimating, setIsAnimating] = useState(true);
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(Outside, { onOutsideClick: () => props.remove(), children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+    DialogElementWrapper,
+    {
+      initial: {
+        opacity: 0,
+        scale: 0.8
+      },
+      animate: {
+        opacity: 1,
+        scale: 1
+      },
+      onAnimationComplete: () => setIsAnimating(false),
+      transition: {
+        type: "spring",
+        duration: DEFAULT_PROVIDER_DIALOG_DURATION_ELEMENT,
+        delay: DEFAULT_PROVIDER_DIALOG_DURATION_LAYOUT
+      },
+      style: {
+        zIndex: -props.index
+      },
+      $propsDialog: (_a = props.props) == null ? void 0 : _a.propsDialog,
+      children: (_b = props.content) == null ? void 0 : _b.call(props, props.props, props.remove, isAnimating)
+    },
+    props.id
+  ) });
+};
+const MemoizedDialogElement = memo(DialogElement);
+const useDialogs = () => {
+  const context = useContext(DialogContext);
+  if (!context) {
+    throw new Error("useDialogs must be used within an ProviderDialog");
+  }
+  return context;
+};
+const useDialog = (props) => {
+  const { add, remove, update, dialogHistory } = useDialogs();
+  const [id, setId] = useState(null);
+  const localAdd = useCallback(
+    (dialog) => {
+      const find = dialogHistory.find((item) => item.id === dialog.id);
+      if (!id || !find) {
+        const id2 = dialog.id || v4();
+        setId(id2);
+        add({ ...dialog, props, id: id2 });
+      }
+    },
+    [add, dialogHistory, id, props]
+  );
+  const localRemove = useCallback(() => {
+    if (id) {
+      remove(id);
+      setId(null);
+    }
+  }, [id, remove]);
+  const propsMemo = useDeepCompareMemoize(props);
+  useEffect(() => {
+    if (id) {
+      update({ id, props: propsMemo });
+    }
+  }, [id, propsMemo, update]);
+  return { add: localAdd, remove: localRemove, id };
+};
+const DialogLayout = styled(motion.div)`
+  position: fixed;
+  flex: 1;
+  width: 100%;
+  height: 100%;
+  background-color: ${(props) => props.theme.palette.black50};
+  z-index: ${(props) => props.$zIndex};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+`;
+const DialogElementWrapper = styled(motion.dialog)`
+  ${addOutline};
+  max-width: ${(props) => {
+  var _a;
+  return ((_a = props.$propsDialog) == null ? void 0 : _a.maxWidth) || DEFAULT_PROVIDER_DIALOG_ELEMENT_MAX_WIDTH;
+}};
+  max-height: ${(props) => {
+  var _a;
+  return ((_a = props.$propsDialog) == null ? void 0 : _a.maxHeight) || DEFAULT_PROVIDER_DIALOG_ELEMENT_MAX_HEIGHT;
+}};
+  border-radius: ${(props) => {
+  var _a;
+  return ((_a = props.$propsDialog) == null ? void 0 : _a.borderRadius) || DEFAULT_PROVIDER_DIALOG_ELEMENT_BORDER_RADIUS;
+}};
+  background: ${(props) => {
+  var _a;
+  return ((_a = props.$propsDialog) == null ? void 0 : _a.background) ? props.theme.palette[props.$propsDialog.background] : props.theme.palette[DEFAULT_PROVIDER_DIALOG_ELEMENT_BACKGROUND];
+}};
+  padding: ${(props) => {
+  var _a;
+  return ((_a = props.$propsDialog) == null ? void 0 : _a.padding) || DEFAULT_PROVIDER_DIALOG_ELEMENT_PADDING;
+}};
+  width: max-content;
+  height: max-content;
+  border: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  align-items: flex-start;
+  justify-content: flex-start;
+  flex-shrink: 0;
+  position: relative;
+  box-shadow: 0px 10px 30px 0px rgba(0, 0, 0, 0.2);
+  overflow: hidden;
+`;
+const DialogContent = styled(motion.div)``;
+const DEFAULT_PROVIDER_DIALOG_DURATION_ELEMENT = 0.3;
+const DEFAULT_PROVIDER_DIALOG_DURATION_LAYOUT = 0.4;
+const DEFAULT_PROVIDER_DIALOG_ELEMENT_MAX_HEIGHT = "max-content";
+const DEFAULT_PROVIDER_DIALOG_ELEMENT_MAX_WIDTH = "max-content";
+const DEFAULT_PROVIDER_DIALOG_ELEMENT_BORDER_RADIUS = "12px";
+const DEFAULT_PROVIDER_DIALOG_ELEMENT_PADDING = "20px";
+const DEFAULT_PROVIDER_DIALOG_ELEMENT_BACKGROUND = "whiteStandard";
+export {
+  DialogContext as D,
+  ProviderDialog as P,
+  useDialog as a,
+  DialogLayout as b,
+  DialogElementWrapper as c,
+  DialogContent as d,
+  DEFAULT_PROVIDER_DIALOG_DURATION_ELEMENT as e,
+  DEFAULT_PROVIDER_DIALOG_DURATION_LAYOUT as f,
+  DEFAULT_PROVIDER_DIALOG_ELEMENT_MAX_HEIGHT as g,
+  DEFAULT_PROVIDER_DIALOG_ELEMENT_MAX_WIDTH as h,
+  DEFAULT_PROVIDER_DIALOG_ELEMENT_BORDER_RADIUS as i,
+  DEFAULT_PROVIDER_DIALOG_ELEMENT_PADDING as j,
+  DEFAULT_PROVIDER_DIALOG_ELEMENT_BACKGROUND as k,
+  useDialogs as u
+};
+//# sourceMappingURL=context.constants-CsZRZ7gH.js.map

package/build/context.constants-CsZRZ7gH.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.constants-CsZRZ7gH.js","sources":["../src/contexts/context-dialog/context.tsx","../src/contexts/context-dialog/context.hooks.ts","../src/contexts/context-dialog/context.styles.tsx","../src/contexts/context-dialog/context.constants.ts"],"sourcesContent":["import { AnimatePresence } from 'framer-motion'\nimport { FC, createContext, memo, useCallback, useMemo, useState } from 'react'\n\nimport { Outside } from '@local/areas/outside'\n\nimport {\n  DEFAULT_PROVIDER_DIALOG_DURATION_ELEMENT,\n  DEFAULT_PROVIDER_DIALOG_DURATION_LAYOUT,\n  DialogContentProps,\n  DialogContextProps,\n  DialogElementProps,\n  DialogElementWrapper,\n  DialogLayout,\n  ProviderDialogProps\n} from '.'\n\nexport const DialogContext = createContext<DialogContextProps<object> | null>(null)\n\nexport const ProviderDialog: FC<ProviderDialogProps> = props => {\n  const [dialogHistory, setDialogHistory] = useState<DialogContentProps<object>[]>([])\n\n  const remove: DialogContextProps<object>['remove'] = useCallback(id => {\n    setDialogHistory(prev => {\n      const itemToRemove = prev.find(item => item.id === id)\n\n      if (!itemToRemove) return prev\n\n      const indexToRemove = itemToRemove.index!\n\n      const updatedHistory = prev\n        .filter(item => item.id !== id)\n        .map(item => ({\n          ...item,\n          index: item.index! > indexToRemove ? item.index! - 1 : item.index\n        }))\n\n      return updatedHistory\n    })\n  }, [])\n\n  const update: DialogContextProps<object>['update'] = useCallback(dialog => {\n    setDialogHistory(prev => {\n      return prev.map(item => {\n        if (item.id === dialog.id) {\n          return { ...item, ...dialog }\n        }\n        return item\n      })\n    })\n  }, [])\n\n  const add: DialogContextProps<object>['add'] = useCallback(dialog => {\n    const id = dialog.id\n\n    setDialogHistory(prev => {\n      const existingIndex = prev.findIndex(item => item.id === id)\n\n      let updatedHistory\n      if (existingIndex !== -1) {\n        updatedHistory = [...prev]\n        updatedHistory[existingIndex] = { ...dialog, id, index: prev[existingIndex].index }\n      } else {\n        updatedHistory = prev.map(item => ({\n          ...item,\n          index: item.index! + 1\n        }))\n        const newContent = { ...dialog, id, index: 0 }\n        updatedHistory.unshift(newContent)\n      }\n\n      return updatedHistory\n    })\n  }, [])\n\n  const dialogHistoryLength = useMemo(() => dialogHistory.length, [dialogHistory.length])\n  const zIndex = useMemo(() => props.zIndex, [props.zIndex])\n\n  return (\n    <DialogContext.Provider value={{ add, remove, update, dialogHistory }}>\n      <AnimatePresence>\n        {dialogHistoryLength && (\n          <DialogLayout\n            $zIndex={zIndex}\n            initial={{\n              opacity: 0\n            }}\n            exit={{\n              opacity: 0\n            }}\n            animate={{\n              opacity: 1\n            }}\n            transition={{ type: 'spring', duration: DEFAULT_PROVIDER_DIALOG_DURATION_LAYOUT }}\n          >\n            {dialogHistory.map(dialog => {\n              const index = dialog.index\n              const content = dialog.content\n              const id = dialog.id\n              const props = dialog.props\n\n              return (\n                <MemoizedDialogElement\n                  index={index}\n                  content={content}\n                  props={props}\n                  key={id}\n                  id={id}\n                  remove={() => remove(id)}\n                />\n              )\n            })}\n          </DialogLayout>\n        )}\n      </AnimatePresence>\n\n      {props.children}\n    </DialogContext.Provider>\n  )\n}\n\nconst DialogElement = (props: DialogElementProps) => {\n  const [isAnimating, setIsAnimating] = useState(true)\n  return (\n    <Outside onOutsideClick={() => props.remove()}>\n      <DialogElementWrapper\n        key={props.id}\n        initial={{\n          opacity: 0,\n          scale: 0.8\n        }}\n        animate={{\n          opacity: 1,\n          scale: 1\n        }}\n        onAnimationComplete={() => setIsAnimating(false)}\n        transition={{\n          type: 'spring',\n          duration: DEFAULT_PROVIDER_DIALOG_DURATION_ELEMENT,\n          delay: DEFAULT_PROVIDER_DIALOG_DURATION_LAYOUT\n        }}\n        style={{\n          zIndex: -props.index!\n        }}\n        $propsDialog={props.props?.propsDialog}\n      >\n        {props.content?.(props.props, props.remove, isAnimating)}\n      </DialogElementWrapper>\n    </Outside>\n  )\n}\nconst MemoizedDialogElement = memo(DialogElement)\n","import { useCallback, useContext, useEffect, useState } from 'react'\nimport { v4 as uuidv4 } from 'uuid'\n\nimport { useDeepCompareMemoize } from '@local/hooks/use-deep-compare-memoize'\n\nimport { DialogContext, DialogContextItemProps, DialogContextProps, useDialogProps } from '.'\n\nexport const useDialogs = (): DialogContextProps<object> => {\n  const context = useContext(DialogContext)\n  if (!context) {\n    throw new Error('useDialogs must be used within an ProviderDialog')\n  }\n  return context\n}\n\nexport const useDialog = <T extends object>(props?: useDialogProps<T>): DialogContextItemProps<T> => {\n  const { add, remove, update, dialogHistory } = useDialogs()\n  const [id, setId] = useState<string | null>(null)\n\n  const localAdd: DialogContextItemProps<T>['add'] = useCallback(\n    dialog => {\n      const find = dialogHistory.find(item => item.id === dialog.id)\n      if (!id || !find) {\n        const id = dialog.id || uuidv4()\n        setId(id)\n        add({ ...(dialog as T), props: props, id })\n      }\n    },\n    [add, dialogHistory, id, props]\n  )\n  const localRemove = useCallback(() => {\n    if (id) {\n      remove(id)\n      setId(null)\n    }\n  }, [id, remove])\n\n  const propsMemo = useDeepCompareMemoize(props)\n\n  useEffect(() => {\n    if (id) {\n      update({ id, props: propsMemo })\n    }\n  }, [id, propsMemo, update])\n\n  return { add: localAdd, remove: localRemove, id }\n}\n","import { motion } from 'framer-motion'\nimport styled from 'styled-components'\n\nimport { addOutline } from '@local/styles/add'\n\nimport {\n  DEFAULT_PROVIDER_DIALOG_ELEMENT_BACKGROUND,\n  DEFAULT_PROVIDER_DIALOG_ELEMENT_BORDER_RADIUS,\n  DEFAULT_PROVIDER_DIALOG_ELEMENT_MAX_HEIGHT,\n  DEFAULT_PROVIDER_DIALOG_ELEMENT_MAX_WIDTH,\n  DEFAULT_PROVIDER_DIALOG_ELEMENT_PADDING,\n  DialogElementWrapperProps,\n  DialogLayoutProps\n} from '.'\n\nexport const DialogLayout = styled(motion.div)<DialogLayoutProps>`\n  position: fixed;\n  flex: 1;\n  width: 100%;\n  height: 100%;\n  background-color: ${props => props.theme.palette.black50};\n  z-index: ${props => props.$zIndex};\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  overflow: hidden;\n`\n\nexport const DialogElementWrapper = styled(motion.dialog)<DialogElementWrapperProps>`\n  ${addOutline};\n  max-width: ${props => props.$propsDialog?.maxWidth || DEFAULT_PROVIDER_DIALOG_ELEMENT_MAX_WIDTH};\n  max-height: ${props => props.$propsDialog?.maxHeight || DEFAULT_PROVIDER_DIALOG_ELEMENT_MAX_HEIGHT};\n  border-radius: ${props => props.$propsDialog?.borderRadius || DEFAULT_PROVIDER_DIALOG_ELEMENT_BORDER_RADIUS};\n  background: ${props =>\n    props.$propsDialog?.background\n      ? props.theme.palette[props.$propsDialog.background]\n      : props.theme.palette[DEFAULT_PROVIDER_DIALOG_ELEMENT_BACKGROUND]};\n  padding: ${props => props.$propsDialog?.padding || DEFAULT_PROVIDER_DIALOG_ELEMENT_PADDING};\n  width: max-content;\n  height: max-content;\n  border: 0;\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n  align-items: flex-start;\n  justify-content: flex-start;\n  flex-shrink: 0;\n  position: relative;\n  box-shadow: 0px 10px 30px 0px rgba(0, 0, 0, 0.2);\n  overflow: hidden;\n`\nexport const DialogContent = styled(motion.div)``\n","// export const DEFAULT_PROVIDER_Dialog_SCALE = 0.04\nimport { IThemePaletteKeys } from '@local/theme'\n\nexport const DEFAULT_PROVIDER_DIALOG_DURATION_ELEMENT = 0.3\nexport const DEFAULT_PROVIDER_DIALOG_DURATION_LAYOUT = 0.4\nexport const DEFAULT_PROVIDER_DIALOG_ELEMENT_MAX_HEIGHT: string = 'max-content'\nexport const DEFAULT_PROVIDER_DIALOG_ELEMENT_MAX_WIDTH: string = 'max-content'\nexport const DEFAULT_PROVIDER_DIALOG_ELEMENT_BORDER_RADIUS: string = '12px'\nexport const DEFAULT_PROVIDER_DIALOG_ELEMENT_PADDING: string = '20px'\nexport const DEFAULT_PROVIDER_DIALOG_ELEMENT_BACKGROUND: IThemePaletteKeys = 'whiteStandard'\n"],"names":["jsxs","jsx","props","id","uuidv4"],"mappings":"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"}