@atom-learning/components 11.2.0-beta.1 → 11.3.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.
- package/dist/components/alert-dialog/AlertDialogContent.js +1 -1
- package/dist/components/alert-dialog/AlertDialogContent.js.map +1 -1
- package/dist/components/dialog/DialogContent.js +6 -6
- package/dist/components/dialog/DialogContent.js.map +1 -1
- package/dist/index.cjs.js +7 -7
- package/dist/index.cjs.js.map +1 -1
- package/package.json +2 -2
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AlertDialogContent.js","names":[],"sources":["../../../src/components/alert-dialog/AlertDialogContent.tsx"],"sourcesContent":["import { Content, Overlay, Portal } from '@radix-ui/react-alert-dialog'\nimport * as React from 'react'\n\nimport { styled } from '../../styled'\n\nconst StyledAlertDialogOverlay = styled(Overlay, {\n base: [\n 'bg-alpha-600',\n 'top-0',\n 'right-0',\n 'bottom-0',\n 'left-0',\n 'fixed',\n 'z-1147483646',\n 'motion-safe:data-[state=open]:animate-fade-in',\n 'motion-safe:data-[state=closed]:animate-fade-out'\n ]\n})\nconst StyledAlertDialogContent = styled(Content, {\n base: [\n // `transform: translate()` is required for `floating-ui` to\n // correctly position elements within the Dialog component.\n // we can't use the translate property directly\n 'transform-[translate(-50%,-50%)]',\n 'bg-white',\n 'rounded-
|
|
1
|
+
{"version":3,"file":"AlertDialogContent.js","names":[],"sources":["../../../src/components/alert-dialog/AlertDialogContent.tsx"],"sourcesContent":["import { Content, Overlay, Portal } from '@radix-ui/react-alert-dialog'\nimport * as React from 'react'\n\nimport { styled } from '../../styled'\n\nconst StyledAlertDialogOverlay = styled(Overlay, {\n base: [\n 'bg-alpha-600',\n 'top-0',\n 'right-0',\n 'bottom-0',\n 'left-0',\n 'fixed',\n 'z-1147483646',\n 'motion-safe:data-[state=open]:animate-fade-in',\n 'motion-safe:data-[state=closed]:animate-fade-out'\n ]\n})\nconst StyledAlertDialogContent = styled(Content, {\n base: [\n // `transform: translate()` is required for `floating-ui` to\n // correctly position elements within the Dialog component.\n // we can't use the translate property directly\n 'transform-[translate(-50%,-50%)]',\n 'bg-white',\n 'rounded-xl',\n 'shadow-xl',\n 'box-border',\n 'left-1/2',\n 'max-w-[90vw]',\n 'p-8',\n 'fixed',\n 'top-1/2',\n 'focus:outline-none',\n 'z-1147483646',\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 sm: ['w-95'],\n md: ['w-120'],\n lg: ['w-150']\n }\n }\n})\n\nexport const AlertDialogContent = ({\n size = 'sm',\n ...rest\n}: React.ComponentProps<typeof StyledAlertDialogContent>) => (\n <Portal>\n <StyledAlertDialogOverlay />\n <StyledAlertDialogContent size={size} {...rest} />\n </Portal>\n)\n"],"mappings":";;;;;AAKA,IAAM,2BAA2B,OAAO,SAAS,EAC/C,MAAM;CACJ;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF,EACF,CAAC;AACD,IAAM,2BAA2B,OAAO,SAAS;CAC/C,MAAM;EAIJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF;CACA,UAAU,EACR,MAAM;EACJ,IAAI,CAAC,MAAM;EACX,IAAI,CAAC,OAAO;EACZ,IAAI,CAAC,OAAO;CACd,EACF;AACF,CAAC;AAED,IAAa,sBAAsB,EACjC,OAAO,MACP,GAAG,WAEH,qBAAC,QAAD,EAAA,UAAA,CACE,oBAAC,0BAAD,CAA2B,CAAA,GAC3B,oBAAC,0BAAD;CAAgC;CAAM,GAAI;AAAO,CAAA,CAC3C,EAAA,CAAA"}
|
|
@@ -21,7 +21,7 @@ var StyledDialogContent = styled(Content, {
|
|
|
21
21
|
"max-w-[90vw]",
|
|
22
22
|
"max-h-[90vh]",
|
|
23
23
|
"overflow-y-auto",
|
|
24
|
-
"rounded-
|
|
24
|
+
"rounded-xl",
|
|
25
25
|
"p-8",
|
|
26
26
|
"fixed",
|
|
27
27
|
"top-1/2",
|
|
@@ -33,7 +33,7 @@ var StyledDialogContent = styled(Content, {
|
|
|
33
33
|
variants: {
|
|
34
34
|
size: {
|
|
35
35
|
xs: [
|
|
36
|
-
"rounded-
|
|
36
|
+
"rounded-xl",
|
|
37
37
|
"size-auto",
|
|
38
38
|
"max-w-[90vw]",
|
|
39
39
|
"max-h-[90vh]",
|
|
@@ -44,7 +44,7 @@ var StyledDialogContent = styled(Content, {
|
|
|
44
44
|
"[&>[data-dialog-close]]:right-4"
|
|
45
45
|
],
|
|
46
46
|
sm: [
|
|
47
|
-
"rounded-
|
|
47
|
+
"rounded-xl",
|
|
48
48
|
"size-auto",
|
|
49
49
|
"max-w-[90vw]",
|
|
50
50
|
"max-h-[90vh]",
|
|
@@ -55,7 +55,7 @@ var StyledDialogContent = styled(Content, {
|
|
|
55
55
|
"[&>[data-dialog-close]]:right-4"
|
|
56
56
|
],
|
|
57
57
|
md: [
|
|
58
|
-
"rounded-
|
|
58
|
+
"rounded-xl",
|
|
59
59
|
"size-auto",
|
|
60
60
|
"max-w-[90vw]",
|
|
61
61
|
"max-h-[90vh]",
|
|
@@ -66,7 +66,7 @@ var StyledDialogContent = styled(Content, {
|
|
|
66
66
|
"[&>[data-dialog-close]]:right-4"
|
|
67
67
|
],
|
|
68
68
|
lg: [
|
|
69
|
-
"rounded-
|
|
69
|
+
"rounded-xl",
|
|
70
70
|
"size-auto",
|
|
71
71
|
"max-w-[90vw]",
|
|
72
72
|
"max-h-[90vh]",
|
|
@@ -77,7 +77,7 @@ var StyledDialogContent = styled(Content, {
|
|
|
77
77
|
"[&>[data-dialog-close]]:right-4"
|
|
78
78
|
],
|
|
79
79
|
xl: [
|
|
80
|
-
"rounded-
|
|
80
|
+
"rounded-xl",
|
|
81
81
|
"size-auto",
|
|
82
82
|
"max-w-[90vw]",
|
|
83
83
|
"max-h-[90vh]",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DialogContent.js","names":[],"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'\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 // `transform: translate()` is required for `floating-ui` to\n // correctly position elements within the Dialog component.\n // we can't use the translate property directly\n 'transform-[translate(-50%,-50%)]',\n 'bg-white',\n 'shadow-xl',\n 'box-border',\n 'left-1/2',\n 'h-auto',\n 'max-w-[90vw]',\n 'max-h-[90vh]',\n 'overflow-y-auto',\n 'rounded-
|
|
1
|
+
{"version":3,"file":"DialogContent.js","names":[],"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'\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 // `transform: translate()` is required for `floating-ui` to\n // correctly position elements within the Dialog component.\n // we can't use the translate property directly\n 'transform-[translate(-50%,-50%)]',\n 'bg-white',\n 'shadow-xl',\n 'box-border',\n 'left-1/2',\n 'h-auto',\n 'max-w-[90vw]',\n 'max-h-[90vh]',\n 'overflow-y-auto',\n 'rounded-xl',\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 'rounded-xl',\n 'size-auto',\n 'max-w-[90vw]',\n 'max-h-[90vh]',\n 'supports-svh:h-auto',\n 'supports-svh:max-h-[90vh]',\n 'w-95',\n '[&>[data-dialog-close]]:top-4',\n '[&>[data-dialog-close]]:right-4'\n ],\n sm: [\n 'rounded-xl',\n 'size-auto',\n 'max-w-[90vw]',\n 'max-h-[90vh]',\n 'supports-svh:h-auto',\n 'supports-svh:max-h-[90vh]',\n 'w-120',\n '[&>[data-dialog-close]]:top-4',\n '[&>[data-dialog-close]]:right-4'\n ],\n md: [\n 'rounded-xl',\n 'size-auto',\n 'max-w-[90vw]',\n 'max-h-[90vh]',\n 'supports-svh:h-auto',\n 'supports-svh:max-h-[90vh]',\n 'w-150',\n '[&>[data-dialog-close]]:top-4',\n '[&>[data-dialog-close]]:right-4'\n ],\n lg: [\n 'rounded-xl',\n 'size-auto',\n 'max-w-[90vw]',\n 'max-h-[90vh]',\n 'supports-svh:h-auto',\n 'supports-svh:max-h-[90vh]',\n 'w-200',\n '[&>[data-dialog-close]]:top-4',\n '[&>[data-dialog-close]]:right-4'\n ],\n xl: [\n 'rounded-xl',\n 'size-auto',\n 'max-w-[90vw]',\n 'max-h-[90vh]',\n 'supports-svh:h-auto',\n 'supports-svh:max-h-[90vh]',\n 'w-275',\n '[&>[data-dialog-close]]:top-4',\n '[&>[data-dialog-close]]:right-4'\n ],\n fullscreen: [\n 'rounded-none',\n 'w-screen',\n 'h-screen',\n 'max-w-screen',\n 'max-h-screen',\n 'supports-svh:h-svh',\n 'supports-svh:max-h-svh',\n '[&>[data-dialog-close]]:top-safe-offset-4',\n '[&>[data-dialog-close]]:right-safe-offset-4'\n ]\n },\n layout: {\n panel: ['flex', 'flex-col', 'p-0']\n }\n }\n },\n { enableResponsiveVariants: 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 ...rest\n}: DialogContentProps) => (\n <Portal>\n <StyledDialogOverlay id={modalOverlayId}>\n {React.Children.map(children, (child) =>\n React.isValidElement(child) && child.type === DialogBackground\n ? child\n : null\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 {...rest}\n >\n {showCloseButton && (\n <ActionIcon\n as={Close}\n label={closeDialogText}\n hasTooltip={false}\n size=\"md\"\n theme=\"neutral\"\n data-dialog-close\n className=\"absolute top-4 right-4 size-12\"\n >\n <Icon is={CloseIcon} />\n </ActionIcon>\n )}\n {React.Children.map(children, (child) =>\n React.isValidElement(child) && child.type === DialogBackground\n ? null\n : child\n )}\n </StyledDialogContent>\n </StyledDialogOverlay>\n </Portal>\n)\n"],"mappings":";;;;;;;;;;AAUA,IAAM,iBAAiB;AAEvB,IAAM,sBAAsB,OAAO,SAAS,EAC1C,MAAM,gBACR,CAAC;AAED,IAAM,sBAAsB,OAC1B,SACA;CACE,MAAM;EAIJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF;CACA,UAAU;EACR,MAAM;GACJ,IAAI;IACF;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;GACF;GACA,IAAI;IACF;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;GACF;GACA,IAAI;IACF;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;GACF;GACA,IAAI;IACF;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;GACF;GACA,IAAI;IACF;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;GACF;GACA,YAAY;IACV;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;GACF;EACF;EACA,QAAQ,EACN,OAAO;GAAC;GAAQ;GAAY;EAAK,EACnC;CACF;AACF,GACA,EAAE,0BAA0B,KAAK,CACnC;AAOA,IAAa,iBAAiB,EAC5B,OAAO,MACP,UACA,kBAAkB,gBAClB,kBAAkB,MAClB,GAAG,WAEH,oBAAC,QAAD,EAAA,UACE,qBAAC,qBAAD;CAAqB,IAAI;WAAzB,CACG,QAAM,SAAS,IAAI,WAAW,UAC7B,QAAM,eAAe,KAAK,KAAK,MAAM,SAAS,mBAC1C,QACA,IACN,GACA,qBAAC,qBAAD;EACQ;EACN,cAAW;EACX,uBAAuB,UAAU;GAE/B,IADgB,MAAM,QACT,OAAO,gBAClB,MAAM,eAAe;EAEzB;EACA,GAAI;YATN,CAWG,mBACC,oBAAC,YAAD;GACE,IAAI;GACJ,OAAO;GACP,YAAY;GACZ,MAAK;GACL,OAAM;GACN,qBAAA;GACA,WAAU;aAEV,oBAAC,MAAD,EAAM,IAAI,MAAY,CAAA;EACZ,CAAA,GAEb,QAAM,SAAS,IAAI,WAAW,UAC7B,QAAM,eAAe,KAAK,KAAK,MAAM,SAAS,mBAC1C,OACA,KACN,CACmB;GACF;GACf,CAAA"}
|
package/dist/index.cjs.js
CHANGED
|
@@ -793,7 +793,7 @@ var StyledAlertDialogContent = styled(_radix_ui_react_alert_dialog.Content, {
|
|
|
793
793
|
base: [
|
|
794
794
|
"transform-[translate(-50%,-50%)]",
|
|
795
795
|
"bg-white",
|
|
796
|
-
"rounded-
|
|
796
|
+
"rounded-xl",
|
|
797
797
|
"shadow-xl",
|
|
798
798
|
"box-border",
|
|
799
799
|
"left-1/2",
|
|
@@ -6569,7 +6569,7 @@ var StyledDialogContent = styled(_radix_ui_react_dialog.Content, {
|
|
|
6569
6569
|
"max-w-[90vw]",
|
|
6570
6570
|
"max-h-[90vh]",
|
|
6571
6571
|
"overflow-y-auto",
|
|
6572
|
-
"rounded-
|
|
6572
|
+
"rounded-xl",
|
|
6573
6573
|
"p-8",
|
|
6574
6574
|
"fixed",
|
|
6575
6575
|
"top-1/2",
|
|
@@ -6581,7 +6581,7 @@ var StyledDialogContent = styled(_radix_ui_react_dialog.Content, {
|
|
|
6581
6581
|
variants: {
|
|
6582
6582
|
size: {
|
|
6583
6583
|
xs: [
|
|
6584
|
-
"rounded-
|
|
6584
|
+
"rounded-xl",
|
|
6585
6585
|
"size-auto",
|
|
6586
6586
|
"max-w-[90vw]",
|
|
6587
6587
|
"max-h-[90vh]",
|
|
@@ -6592,7 +6592,7 @@ var StyledDialogContent = styled(_radix_ui_react_dialog.Content, {
|
|
|
6592
6592
|
"[&>[data-dialog-close]]:right-4"
|
|
6593
6593
|
],
|
|
6594
6594
|
sm: [
|
|
6595
|
-
"rounded-
|
|
6595
|
+
"rounded-xl",
|
|
6596
6596
|
"size-auto",
|
|
6597
6597
|
"max-w-[90vw]",
|
|
6598
6598
|
"max-h-[90vh]",
|
|
@@ -6603,7 +6603,7 @@ var StyledDialogContent = styled(_radix_ui_react_dialog.Content, {
|
|
|
6603
6603
|
"[&>[data-dialog-close]]:right-4"
|
|
6604
6604
|
],
|
|
6605
6605
|
md: [
|
|
6606
|
-
"rounded-
|
|
6606
|
+
"rounded-xl",
|
|
6607
6607
|
"size-auto",
|
|
6608
6608
|
"max-w-[90vw]",
|
|
6609
6609
|
"max-h-[90vh]",
|
|
@@ -6614,7 +6614,7 @@ var StyledDialogContent = styled(_radix_ui_react_dialog.Content, {
|
|
|
6614
6614
|
"[&>[data-dialog-close]]:right-4"
|
|
6615
6615
|
],
|
|
6616
6616
|
lg: [
|
|
6617
|
-
"rounded-
|
|
6617
|
+
"rounded-xl",
|
|
6618
6618
|
"size-auto",
|
|
6619
6619
|
"max-w-[90vw]",
|
|
6620
6620
|
"max-h-[90vh]",
|
|
@@ -6625,7 +6625,7 @@ var StyledDialogContent = styled(_radix_ui_react_dialog.Content, {
|
|
|
6625
6625
|
"[&>[data-dialog-close]]:right-4"
|
|
6626
6626
|
],
|
|
6627
6627
|
xl: [
|
|
6628
|
-
"rounded-
|
|
6628
|
+
"rounded-xl",
|
|
6629
6629
|
"size-auto",
|
|
6630
6630
|
"max-w-[90vw]",
|
|
6631
6631
|
"max-h-[90vh]",
|