@atom-learning/components 6.0.0-beta.19 → 6.0.0-beta.20

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.
@@ -1,2 +1,2 @@
1
- import{Close as p}from"@atom-learning/icons";import{Overlay as u,Content as c,Portal as v,Close as f}from"@radix-ui/react-dialog";import*as o from"react";import{styled as n}from"../../styled.js";import{backdropOverlay as w}from"../../utilities/style/backdrop-overlay.js";import{ActionIcon as x}from"../action-icon/ActionIcon.js";import{Icon as g}from"../icon/Icon.js";import{DialogBackground as r}from"./DialogBackground.js";const l="modal_overlay",b=n(u,{base:w}),t=["w-auto","h-auto","max-w-none","max-h-none","supports-[height:100svh]:h-auto","supports-[height:100svh]:max-h-none"],C=n(c,{base:["-translate-1/2","bg-white","shadow-xl","box-border","left-1/2","max-w-[90vw]","max-h-[90vh]","overflow-y-auto","p-8","fixed","top-1/2","z-1147483646","focus:outline-none","motion-safe:data-[state=open]:animate-slide-in-center","motion-safe:data-[state=closed]:animate-slide-out-center"],variants:{size:{xs:[...t,"rounded-md","w-95"],sm:[...t,"rounded-md","w-120"],md:[...t,"rounded-md","w-150"],lg:[...t,"rounded-md","w-200"],xl:[...t,"rounded-md","w-275"],fullscreen:["w-screen","h-screen","max-w-screen","max-h-screen","supports-[height:100svh]:h-svh","supports-[height:100svh]:max-h-svh"]}}},{enabledResponsiveVariants:!0}),y=({size:i="sm",children:a,closeDialogText:m="Close dialog",showCloseButton:d=!0,...h})=>o.createElement(v,null,o.createElement(b,{id:l},o.Children.map(a,e=>(e==null?void 0:e.type)===r&&e),o.createElement(C,{size:i,"aria-label":"Dialog",onPointerDownOutside:e=>{const s=e.target;(s==null?void 0:s.id)!==l&&e.preventDefault()},...h},d&&o.createElement(x,{as:f,label:m,hasTooltip:!1,size:"md",theme:"neutral",className:"absolute top-4 right-4 size-12"},o.createElement(g,{is:p})),o.Children.map(a,e=>(e==null?void 0:e.type)!==r&&e))));export{y as DialogContent};
1
+ import{Close as u}from"@atom-learning/icons";import{Overlay as p,Content as d,Portal as x,Close as v}from"@radix-ui/react-dialog";import*as o from"react";import{styled as s}from"../../styled.js";import{backdropOverlay as c}from"../../utilities/style/backdrop-overlay.js";import{ActionIcon as w}from"../action-icon/ActionIcon.js";import{Icon as g}from"../icon/Icon.js";import{DialogBackground as n}from"./DialogBackground.js";const h="modal_overlay",f=s(p,{base:c}),b=s(d,{base:["-translate-1/2","bg-white","shadow-xl","box-border","left-1/2","max-w-[90vw]","max-h-[90vh]","overflow-y-auto","p-8","fixed","top-1/2","z-1147483646","focus:outline-none","motion-safe:data-[state=open]:animate-slide-in-center","motion-safe:data-[state=closed]:animate-slide-out-center"],variants:{size:{xs:["w-auto","h-auto","max-w-none","max-h-none","supports-[height:100svh]:h-auto","supports-[height:100svh]:max-h-none","rounded-md","w-95"],sm:["w-auto","h-auto","max-w-none","max-h-none","supports-[height:100svh]:h-auto","supports-[height:100svh]:max-h-none","rounded-md","w-120"],md:["w-auto","h-auto","max-w-none","max-h-none","supports-[height:100svh]:h-auto","supports-[height:100svh]:max-h-none","rounded-md","w-150"],lg:["w-auto","h-auto","max-w-none","max-h-none","supports-[height:100svh]:h-auto","supports-[height:100svh]:max-h-none","rounded-md","w-200"],xl:["w-auto","h-auto","max-w-none","max-h-none","supports-[height:100svh]:h-auto","supports-[height:100svh]:max-h-none","rounded-md","w-275"],fullscreen:["w-screen","h-screen","max-w-screen","max-h-screen","supports-[height:100svh]:h-svh","supports-[height:100svh]:max-h-svh"]}}},{enabledResponsiveVariants:!0}),C=({size:r="sm",children:t,closeDialogText:m="Close dialog",showCloseButton:i=!0,...l})=>o.createElement(x,null,o.createElement(f,{id:h},o.Children.map(t,e=>(e==null?void 0:e.type)===n&&e),o.createElement(b,{size:r,"aria-label":"Dialog",onPointerDownOutside:e=>{const a=e.target;(a==null?void 0:a.id)!==h&&e.preventDefault()},...l},i&&o.createElement(w,{as:v,label:m,hasTooltip:!1,size:"md",theme:"neutral",className:"absolute top-4 right-4 size-12"},o.createElement(g,{is:u})),o.Children.map(t,e=>(e==null?void 0:e.type)!==n&&e))));export{C as DialogContent};
2
2
  //# sourceMappingURL=DialogContent.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"DialogContent.js","sources":["../../../src/components/dialog/DialogContent.tsx"],"sourcesContent":["import { Close as CloseIcon } from '@atom-learning/icons'\nimport { Close, Content, Overlay, Portal } from '@radix-ui/react-dialog'\nimport * as React from 'react'\n\nimport { styled } from '~/styled'\nimport { backdropOverlay } from '~/utilities/style/backdrop-overlay'\n\nimport { ActionIcon } from '../action-icon/ActionIcon'\nimport { Icon } from '../icon/Icon'\nimport { DialogBackground } from './DialogBackground'\n\nconst modalOverlayId = 'modal_overlay'\n\nconst StyledDialogOverlay = styled(Overlay, {\n base: backdropOverlay\n})\n\nconst sizeReset = [\n 'w-auto',\n 'h-auto',\n 'max-w-none',\n 'max-h-none',\n 'supports-[height:100svh]:h-auto',\n 'supports-[height:100svh]:max-h-none'\n]\n\nconst StyledDialogContent = styled(\n Content,\n {\n base: [\n '-translate-1/2',\n 'bg-white',\n 'shadow-xl',\n 'box-border',\n 'left-1/2',\n 'max-w-[90vw]',\n 'max-h-[90vh]',\n 'overflow-y-auto',\n 'p-8',\n 'fixed',\n 'top-1/2',\n 'z-1147483646',\n 'focus:outline-none',\n 'motion-safe:data-[state=open]:animate-slide-in-center',\n 'motion-safe:data-[state=closed]:animate-slide-out-center'\n ],\n variants: {\n size: {\n xs: [...sizeReset, 'rounded-md', 'w-95'],\n sm: [...sizeReset, 'rounded-md', 'w-120'],\n md: [...sizeReset, 'rounded-md', 'w-150'],\n lg: [...sizeReset, 'rounded-md', 'w-200'],\n xl: [...sizeReset, 'rounded-md', 'w-275'],\n fullscreen: [\n 'w-screen',\n 'h-screen',\n 'max-w-screen',\n 'max-h-screen',\n 'supports-[height:100svh]:h-svh',\n 'supports-[height:100svh]:max-h-svh'\n ]\n }\n }\n },\n { enabledResponsiveVariants: true }\n)\n\ntype DialogContentProps = React.ComponentProps<typeof StyledDialogContent> & {\n closeDialogText?: string\n showCloseButton?: boolean\n}\n\nexport const DialogContent = ({\n size = 'sm',\n children,\n closeDialogText = 'Close dialog',\n showCloseButton = true,\n ...remainingProps\n}: DialogContentProps) => (\n <Portal>\n <StyledDialogOverlay id={modalOverlayId}>\n {React.Children.map(\n children,\n (child?: React.ReactElement) =>\n child?.type === DialogBackground && child\n )}\n <StyledDialogContent\n size={size}\n aria-label=\"Dialog\"\n onPointerDownOutside={(event) => {\n const element = event.target as HTMLElement\n if (element?.id !== modalOverlayId) {\n event.preventDefault()\n }\n }}\n {...remainingProps}\n >\n {showCloseButton && (\n <ActionIcon\n as={Close}\n label={closeDialogText}\n hasTooltip={false}\n size=\"md\"\n theme=\"neutral\"\n className=\"absolute top-4 right-4 size-12\"\n >\n <Icon is={CloseIcon} />\n </ActionIcon>\n )}\n {React.Children.map(\n children,\n (child?: React.ReactElement) =>\n child?.type !== DialogBackground && child\n )}\n </StyledDialogContent>\n </StyledDialogOverlay>\n </Portal>\n)\n"],"names":["modalOverlayId","StyledDialogOverlay","styled","Overlay","backdropOverlay","sizeReset","StyledDialogContent","Content","DialogContent","size","children","closeDialogText","showCloseButton","remainingProps","React","Portal","child","DialogBackground","event","element","ActionIcon","Close","Icon","CloseIcon"],"mappings":"yaAWA,MAAMA,EAAiB,gBAEjBC,EAAsBC,EAAOC,EAAS,CAC1C,KAAMC,CACR,CAAC,EAEKC,EAAY,CAChB,SACA,SACA,aACA,aACA,kCACA,qCACF,EAEMC,EAAsBJ,EAC1BK,EACA,CACE,KAAM,CACJ,iBACA,WACA,YACA,aACA,WACA,eACA,eACA,kBACA,MACA,QACA,UACA,eACA,qBACA,wDACA,0DACF,EACA,SAAU,CACR,KAAM,CACJ,GAAI,CAAC,GAAGF,EAAW,aAAc,MAAM,EACvC,GAAI,CAAC,GAAGA,EAAW,aAAc,OAAO,EACxC,GAAI,CAAC,GAAGA,EAAW,aAAc,OAAO,EACxC,GAAI,CAAC,GAAGA,EAAW,aAAc,OAAO,EACxC,GAAI,CAAC,GAAGA,EAAW,aAAc,OAAO,EACxC,WAAY,CACV,WACA,WACA,eACA,eACA,iCACA,oCACF,CACF,CACF,CACF,EACA,CAAE,0BAA2B,EAAK,CACpC,EAOaG,EAAgB,CAAC,CAC5B,KAAAC,EAAO,KACP,SAAAC,EACA,gBAAAC,EAAkB,eAClB,gBAAAC,EAAkB,GAClB,GAAGC,CACL,IACEC,EAAA,cAACC,EAAA,KACCD,EAAA,cAACb,EAAA,CAAoB,GAAID,CAAAA,EACtBc,EAAM,SAAS,IACdJ,EACCM,IACCA,GAAA,KAAA,OAAAA,EAAO,QAASC,GAAoBD,CACxC,EACAF,EAAA,cAACR,EAAA,CACC,KAAMG,EACN,aAAW,SACX,qBAAuBS,GAAU,CAC/B,MAAMC,EAAUD,EAAM,QAClBC,GAAA,KAAAA,OAAAA,EAAS,MAAOnB,GAClBkB,EAAM,gBAEV,EACC,GAAGL,CAEHD,EAAAA,GACCE,EAAA,cAACM,EAAA,CACC,GAAIC,EACJ,MAAOV,EACP,WAAY,GACZ,KAAK,KACL,MAAM,UACN,UAAU,gCAEVG,EAAAA,EAAA,cAACQ,EAAA,CAAK,GAAIC,CAAW,CAAA,CACvB,EAEDT,EAAM,SAAS,IACdJ,EACCM,IACCA,GAAA,KAAA,OAAAA,EAAO,QAASC,GAAoBD,CACxC,CACF,CACF,CACF"}
1
+ {"version":3,"file":"DialogContent.js","sources":["../../../src/components/dialog/DialogContent.tsx"],"sourcesContent":["import { Close as CloseIcon } from '@atom-learning/icons'\nimport { Close, Content, Overlay, Portal } from '@radix-ui/react-dialog'\nimport * as React from 'react'\n\nimport { styled } from '~/styled'\nimport { backdropOverlay } from '~/utilities/style/backdrop-overlay'\n\nimport { ActionIcon } from '../action-icon/ActionIcon'\nimport { Icon } from '../icon/Icon'\nimport { DialogBackground } from './DialogBackground'\n\nconst modalOverlayId = 'modal_overlay'\n\nconst StyledDialogOverlay = styled(Overlay, {\n base: backdropOverlay\n})\n\nconst StyledDialogContent = styled(\n Content,\n {\n base: [\n '-translate-1/2',\n 'bg-white',\n 'shadow-xl',\n 'box-border',\n 'left-1/2',\n 'max-w-[90vw]',\n 'max-h-[90vh]',\n 'overflow-y-auto',\n 'p-8',\n 'fixed',\n 'top-1/2',\n 'z-1147483646',\n 'focus:outline-none',\n 'motion-safe:data-[state=open]:animate-slide-in-center',\n 'motion-safe:data-[state=closed]:animate-slide-out-center'\n ],\n variants: {\n size: {\n xs: [\n 'w-auto',\n 'h-auto',\n 'max-w-none',\n 'max-h-none',\n 'supports-[height:100svh]:h-auto',\n 'supports-[height:100svh]:max-h-none',\n 'rounded-md',\n 'w-95'\n ],\n sm: [\n 'w-auto',\n 'h-auto',\n 'max-w-none',\n 'max-h-none',\n 'supports-[height:100svh]:h-auto',\n 'supports-[height:100svh]:max-h-none',\n 'rounded-md',\n 'w-120'\n ],\n md: [\n 'w-auto',\n 'h-auto',\n 'max-w-none',\n 'max-h-none',\n 'supports-[height:100svh]:h-auto',\n 'supports-[height:100svh]:max-h-none',\n 'rounded-md',\n 'w-150'\n ],\n lg: [\n 'w-auto',\n 'h-auto',\n 'max-w-none',\n 'max-h-none',\n 'supports-[height:100svh]:h-auto',\n 'supports-[height:100svh]:max-h-none',\n 'rounded-md',\n 'w-200'\n ],\n xl: [\n 'w-auto',\n 'h-auto',\n 'max-w-none',\n 'max-h-none',\n 'supports-[height:100svh]:h-auto',\n 'supports-[height:100svh]:max-h-none',\n 'rounded-md',\n 'w-275'\n ],\n fullscreen: [\n 'w-screen',\n 'h-screen',\n 'max-w-screen',\n 'max-h-screen',\n 'supports-[height:100svh]:h-svh',\n 'supports-[height:100svh]:max-h-svh'\n ]\n }\n }\n },\n { enabledResponsiveVariants: true }\n)\n\ntype DialogContentProps = React.ComponentProps<typeof StyledDialogContent> & {\n closeDialogText?: string\n showCloseButton?: boolean\n}\n\nexport const DialogContent = ({\n size = 'sm',\n children,\n closeDialogText = 'Close dialog',\n showCloseButton = true,\n ...remainingProps\n}: DialogContentProps) => (\n <Portal>\n <StyledDialogOverlay id={modalOverlayId}>\n {React.Children.map(\n children,\n (child?: React.ReactElement) =>\n child?.type === DialogBackground && child\n )}\n <StyledDialogContent\n size={size}\n aria-label=\"Dialog\"\n onPointerDownOutside={(event) => {\n const element = event.target as HTMLElement\n if (element?.id !== modalOverlayId) {\n event.preventDefault()\n }\n }}\n {...remainingProps}\n >\n {showCloseButton && (\n <ActionIcon\n as={Close}\n label={closeDialogText}\n hasTooltip={false}\n size=\"md\"\n theme=\"neutral\"\n className=\"absolute top-4 right-4 size-12\"\n >\n <Icon is={CloseIcon} />\n </ActionIcon>\n )}\n {React.Children.map(\n children,\n (child?: React.ReactElement) =>\n child?.type !== DialogBackground && child\n )}\n </StyledDialogContent>\n </StyledDialogOverlay>\n </Portal>\n)\n"],"names":["modalOverlayId","StyledDialogOverlay","styled","Overlay","backdropOverlay","StyledDialogContent","Content","DialogContent","size","children","closeDialogText","showCloseButton","remainingProps","React","Portal","child","DialogBackground","event","element","ActionIcon","Close","Icon","CloseIcon"],"mappings":"yaAWA,MAAMA,EAAiB,gBAEjBC,EAAsBC,EAAOC,EAAS,CAC1C,KAAMC,CACR,CAAC,EAEKC,EAAsBH,EAC1BI,EACA,CACE,KAAM,CACJ,iBACA,WACA,YACA,aACA,WACA,eACA,eACA,kBACA,MACA,QACA,UACA,eACA,qBACA,wDACA,0DACF,EACA,SAAU,CACR,KAAM,CACJ,GAAI,CACF,SACA,SACA,aACA,aACA,kCACA,sCACA,aACA,MACF,EACA,GAAI,CACF,SACA,SACA,aACA,aACA,kCACA,sCACA,aACA,OACF,EACA,GAAI,CACF,SACA,SACA,aACA,aACA,kCACA,sCACA,aACA,OACF,EACA,GAAI,CACF,SACA,SACA,aACA,aACA,kCACA,sCACA,aACA,OACF,EACA,GAAI,CACF,SACA,SACA,aACA,aACA,kCACA,sCACA,aACA,OACF,EACA,WAAY,CACV,WACA,WACA,eACA,eACA,iCACA,oCACF,CACF,CACF,CACF,EACA,CAAE,0BAA2B,EAAK,CACpC,EAOaC,EAAgB,CAAC,CAC5B,KAAAC,EAAO,KACP,SAAAC,EACA,gBAAAC,EAAkB,eAClB,gBAAAC,EAAkB,GAClB,GAAGC,CACL,IACEC,EAAA,cAACC,EAAA,KACCD,EAAA,cAACZ,EAAA,CAAoB,GAAID,CAAAA,EACtBa,EAAM,SAAS,IACdJ,EACCM,IACCA,GAAA,KAAAA,OAAAA,EAAO,QAASC,GAAoBD,CACxC,EACAF,EAAA,cAACR,EAAA,CACC,KAAMG,EACN,aAAW,SACX,qBAAuBS,GAAU,CAC/B,MAAMC,EAAUD,EAAM,QAClBC,GAAA,KAAAA,OAAAA,EAAS,MAAOlB,GAClBiB,EAAM,eAEV,CAAA,EACC,GAAGL,CAAAA,EAEHD,GACCE,EAAA,cAACM,EAAA,CACC,GAAIC,EACJ,MAAOV,EACP,WAAY,GACZ,KAAK,KACL,MAAM,UACN,UAAU,gCAEVG,EAAAA,EAAA,cAACQ,EAAA,CAAK,GAAIC,CAAW,CAAA,CACvB,EAEDT,EAAM,SAAS,IACdJ,EACCM,IACCA,GAAA,KAAA,OAAAA,EAAO,QAASC,GAAoBD,CACxC,CACF,CACF,CACF"}