@atom-learning/components 6.10.0 → 6.11.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (20) hide show
  1. package/dist/components/dialog/Dialog.d.ts +17 -1
  2. package/dist/components/dialog/Dialog.js +6 -0
  3. package/dist/components/dialog/Dialog.js.map +1 -1
  4. package/dist/components/dialog/DialogActionBar.d.ts +5 -0
  5. package/dist/components/dialog/DialogActionBar.js +14 -0
  6. package/dist/components/dialog/DialogActionBar.js.map +1 -0
  7. package/dist/components/dialog/DialogContent.d.ts +2 -1
  8. package/dist/components/dialog/DialogContent.js +63 -56
  9. package/dist/components/dialog/DialogContent.js.map +1 -1
  10. package/dist/components/dialog/DialogNavigationBar.d.ts +5 -0
  11. package/dist/components/dialog/DialogNavigationBar.js +14 -0
  12. package/dist/components/dialog/DialogNavigationBar.js.map +1 -0
  13. package/dist/components/dialog/DialogScrollableContent.d.ts +5 -0
  14. package/dist/components/dialog/DialogScrollableContent.js +11 -0
  15. package/dist/components/dialog/DialogScrollableContent.js.map +1 -0
  16. package/dist/docgen.json +1 -1
  17. package/dist/index.cjs.js +93 -56
  18. package/dist/index.cjs.js.map +1 -1
  19. package/package.json +1 -1
  20. package/src/responsive-variant-classes.css +1 -1
package/dist/components/dialog/Dialog.d.ts CHANGED
@@ -1,12 +1,18 @@
1
1
  export declare const Dialog: import("react").FC<import("@radix-ui/react-dialog").DialogProps> & {
2
+ ActionBar: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
3
+ ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
4
+ }, never> & {
5
+ as?: import("react").ElementType;
6
+ }>;
2
7
  Background: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
3
8
  ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
4
9
  }, never> & {
5
10
  as?: import("react").ElementType;
6
11
  }>;
7
12
  Close: import("react").ForwardRefExoticComponent<import("@radix-ui/react-dialog").DialogCloseProps & import("react").RefAttributes<HTMLButtonElement>>;
8
- Content: ({ size, children, closeDialogText, showCloseButton, ...remainingProps }: Omit<import("@radix-ui/react-dialog").DialogContentProps & import("react").RefAttributes<HTMLDivElement>, "size"> & {
13
+ Content: ({ size, children, closeDialogText, showCloseButton, ...remainingProps }: Omit<import("@radix-ui/react-dialog").DialogContentProps & import("react").RefAttributes<HTMLDivElement>, "size" | "layout"> & {
9
14
  size?: ("sm" | "md" | "lg" | "xs" | "xl" | "fullscreen" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "sm" | "md" | "lg" | "xs" | "xl" | "fullscreen">>) | undefined;
15
+ layout?: ("panel" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "panel">>) | undefined;
10
16
  } & {
11
17
  as?: import("react").ElementType;
12
18
  } & {
@@ -19,6 +25,16 @@ export declare const Dialog: import("react").FC<import("@radix-ui/react-dialog")
19
25
  }, never> & {
20
26
  as?: import("react").ElementType;
21
27
  }>;
28
+ NavigationBar: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
29
+ ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
30
+ }, never> & {
31
+ as?: import("react").ElementType;
32
+ }>;
33
+ ScrollableContent: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
34
+ ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
35
+ }, never> & {
36
+ as?: import("react").ElementType;
37
+ }>;
22
38
  Description: import("react").ForwardRefExoticComponent<import("@radix-ui/react-dialog").DialogDescriptionProps & import("react").RefAttributes<HTMLParagraphElement>>;
23
39
  Title: import("react").ForwardRefExoticComponent<import("@radix-ui/react-dialog").DialogTitleProps & import("react").RefAttributes<HTMLHeadingElement>>;
24
40
  Trigger: import("react").ForwardRefExoticComponent<import("@radix-ui/react-dialog").DialogTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
package/dist/components/dialog/Dialog.js CHANGED
@@ -1,16 +1,22 @@
1
+ import { DialogActionBar } from "./DialogActionBar.js";
1
2
  import { DialogBackground } from "./DialogBackground.js";
2
3
  import { DialogClose } from "./DialogClose.js";
3
4
  import { DialogContent } from "./DialogContent.js";
4
5
  import { DialogFooter } from "./DialogFooter.js";
5
6
  import { DialogHeading } from "./DialogHeading.js";
7
+ import { DialogNavigationBar } from "./DialogNavigationBar.js";
8
+ import { DialogScrollableContent } from "./DialogScrollableContent.js";
6
9
  import { Description, Root, Title, Trigger } from "@radix-ui/react-dialog";
7
10
  //#region src/components/dialog/Dialog.tsx
8
11
  var Dialog = Object.assign(Root, {
12
+ ActionBar: DialogActionBar,
9
13
  Background: DialogBackground,
10
14
  Close: DialogClose,
11
15
  Content: DialogContent,
12
16
  Heading: DialogHeading,
13
17
  Footer: DialogFooter,
18
+ NavigationBar: DialogNavigationBar,
19
+ ScrollableContent: DialogScrollableContent,
14
20
  Description,
15
21
  Title,
16
22
  Trigger
package/dist/components/dialog/Dialog.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Dialog.js","names":[],"sources":["../../../src/components/dialog/Dialog.tsx"],"sourcesContent":["import { Description, Root, Title, Trigger } from '@radix-ui/react-dialog'\n\nimport { DialogBackground } from './DialogBackground'\nimport { DialogClose } from './DialogClose'\nimport { DialogContent } from './DialogContent'\nimport { DialogFooter } from './DialogFooter'\nimport { DialogHeading } from './DialogHeading'\n\nexport const Dialog = Object.assign(Root, {\n Background: DialogBackground,\n Close: DialogClose,\n Content: DialogContent,\n Heading: DialogHeading,\n Footer: DialogFooter,\n\n Description: Description,\n Title: Title,\n Trigger: Trigger\n})\n\nDialog.displayName = 'Dialog'\n"],"mappings":";;;;;;;AAQA,IAAa,SAAS,OAAO,OAAO,MAAM;CACxC,YAAY;CACZ,OAAO;CACP,SAAS;CACT,SAAS;CACT,QAAQ;CAEK;CACN;CACE;CACV,CAAC;AAEF,OAAO,cAAc"}
1
+ {"version":3,"file":"Dialog.js","names":[],"sources":["../../../src/components/dialog/Dialog.tsx"],"sourcesContent":["import { Description, Root, Title, Trigger } from '@radix-ui/react-dialog'\n\nimport { DialogActionBar } from './DialogActionBar'\nimport { DialogBackground } from './DialogBackground'\nimport { DialogClose } from './DialogClose'\nimport { DialogContent } from './DialogContent'\nimport { DialogFooter } from './DialogFooter'\nimport { DialogHeading } from './DialogHeading'\nimport { DialogNavigationBar } from './DialogNavigationBar'\nimport { DialogScrollableContent } from './DialogScrollableContent'\n\nexport const Dialog = Object.assign(Root, {\n ActionBar: DialogActionBar,\n Background: DialogBackground,\n Close: DialogClose,\n Content: DialogContent,\n Heading: DialogHeading,\n Footer: DialogFooter,\n NavigationBar: DialogNavigationBar,\n ScrollableContent: DialogScrollableContent,\n\n Description: Description,\n Title: Title,\n Trigger: Trigger\n})\n\nDialog.displayName = 'Dialog'\n"],"mappings":";;;;;;;;;;AAWA,IAAa,SAAS,OAAO,OAAO,MAAM;CACxC,WAAW;CACX,YAAY;CACZ,OAAO;CACP,SAAS;CACT,SAAS;CACT,QAAQ;CACR,eAAe;CACf,mBAAmB;CAEN;CACN;CACE;CACV,CAAC;AAEF,OAAO,cAAc"}
package/dist/components/dialog/DialogActionBar.d.ts ADDED
@@ -0,0 +1,5 @@
1
+ export declare const DialogActionBar: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
2
+ ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
3
+ }, never> & {
4
+ as?: import("react").ElementType;
5
+ }>;
package/dist/components/dialog/DialogActionBar.js ADDED
@@ -0,0 +1,14 @@
1
+ import { styled } from "../../styled.js";
2
+ //#region src/components/dialog/DialogActionBar.tsx
3
+ var DialogActionBar = styled("div", { base: [
4
+ "border-t",
5
+ "border-grey-300",
6
+ "p-4",
7
+ "flex",
8
+ "gap-4",
9
+ "shadow-[0_-6px_6px_-1px_rgba(51,51,51,0.05)]"
10
+ ] });
11
+ //#endregion
12
+ export { DialogActionBar };
13
+
14
+ //# sourceMappingURL=DialogActionBar.js.map
package/dist/components/dialog/DialogActionBar.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"DialogActionBar.js","names":[],"sources":["../../../src/components/dialog/DialogActionBar.tsx"],"sourcesContent":["import { styled } from '~/styled'\n\nexport const DialogActionBar = styled('div', {\n base: [\n 'border-t',\n 'border-grey-300',\n 'p-4',\n 'flex',\n 'gap-4',\n 'shadow-[0_-6px_6px_-1px_rgba(51,51,51,0.05)]'\n ]\n})\n"],"mappings":";;AAEA,IAAa,kBAAkB,OAAO,OAAO,EAC3C,MAAM;CACJ;CACA;CACA;CACA;CACA;CACA;CACD,EACF,CAAC"}
package/dist/components/dialog/DialogContent.d.ts CHANGED
@@ -1,6 +1,7 @@
1
1
  import * as React from 'react';
2
- declare const StyledDialogContent: React.ForwardRefExoticComponent<Omit<import("@radix-ui/react-dialog").DialogContentProps & React.RefAttributes<HTMLDivElement>, "size"> & {
2
+ declare const StyledDialogContent: React.ForwardRefExoticComponent<Omit<import("@radix-ui/react-dialog").DialogContentProps & React.RefAttributes<HTMLDivElement>, "size" | "layout"> & {
3
3
  size?: ("sm" | "md" | "lg" | "xs" | "xl" | "fullscreen" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "sm" | "md" | "lg" | "xs" | "xl" | "fullscreen">>) | undefined;
4
+ layout?: ("panel" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "panel">>) | undefined;
4
5
  } & {
5
6
  as?: React.ElementType;
6
7
  }>;
package/dist/components/dialog/DialogContent.js CHANGED
@@ -29,62 +29,69 @@ var StyledDialogContent = styled(Content, {
29
29
  "motion-safe:data-[state=open]:animate-slide-in-center",
30
30
  "motion-safe:data-[state=closed]:animate-slide-out-center"
31
31
  ],
32
- variants: { size: {
33
- xs: [
34
- "rounded-md",
35
- "size-auto",
36
- "max-w-[90vw]",
37
- "max-h-[90vh]",
38
- "supports-svh:h-auto",
39
- "supports-svh:max-h-[90vh]",
40
- "w-95"
41
- ],
42
- sm: [
43
- "rounded-md",
44
- "size-auto",
45
- "max-w-[90vw]",
46
- "max-h-[90vh]",
47
- "supports-svh:h-auto",
48
- "supports-svh:max-h-[90vh]",
49
- "w-120"
50
- ],
51
- md: [
52
- "rounded-md",
53
- "size-auto",
54
- "max-w-[90vw]",
55
- "max-h-[90vh]",
56
- "supports-svh:h-auto",
57
- "supports-svh:max-h-[90vh]",
58
- "w-150"
59
- ],
60
- lg: [
61
- "rounded-md",
62
- "size-auto",
63
- "max-w-[90vw]",
64
- "max-h-[90vh]",
65
- "supports-svh:h-auto",
66
- "supports-svh:max-h-[90vh]",
67
- "w-200"
68
- ],
69
- xl: [
70
- "rounded-md",
71
- "size-auto",
72
- "max-w-[90vw]",
73
- "max-h-[90vh]",
74
- "supports-svh:h-auto",
75
- "supports-svh:max-h-[90vh]",
76
- "w-275"
77
- ],
78
- fullscreen: [
79
- "rounded-none",
80
- "w-screen",
81
- "h-screen",
82
- "max-w-screen",
83
- "max-h-screen",
84
- "supports-svh:h-svh",
85
- "supports-svh:max-h-svh"
86
- ]
87
- } }
32
+ variants: {
33
+ size: {
34
+ xs: [
35
+ "rounded-md",
36
+ "size-auto",
37
+ "max-w-[90vw]",
38
+ "max-h-[90vh]",
39
+ "supports-svh:h-auto",
40
+ "supports-svh:max-h-[90vh]",
41
+ "w-95"
42
+ ],
43
+ sm: [
44
+ "rounded-md",
45
+ "size-auto",
46
+ "max-w-[90vw]",
47
+ "max-h-[90vh]",
48
+ "supports-svh:h-auto",
49
+ "supports-svh:max-h-[90vh]",
50
+ "w-120"
51
+ ],
52
+ md: [
53
+ "rounded-md",
54
+ "size-auto",
55
+ "max-w-[90vw]",
56
+ "max-h-[90vh]",
57
+ "supports-svh:h-auto",
58
+ "supports-svh:max-h-[90vh]",
59
+ "w-150"
60
+ ],
61
+ lg: [
62
+ "rounded-md",
63
+ "size-auto",
64
+ "max-w-[90vw]",
65
+ "max-h-[90vh]",
66
+ "supports-svh:h-auto",
67
+ "supports-svh:max-h-[90vh]",
68
+ "w-200"
69
+ ],
70
+ xl: [
71
+ "rounded-md",
72
+ "size-auto",
73
+ "max-w-[90vw]",
74
+ "max-h-[90vh]",
75
+ "supports-svh:h-auto",
76
+ "supports-svh:max-h-[90vh]",
77
+ "w-275"
78
+ ],
79
+ fullscreen: [
80
+ "rounded-none",
81
+ "w-screen",
82
+ "h-screen",
83
+ "max-w-screen",
84
+ "max-h-screen",
85
+ "supports-svh:h-svh",
86
+ "supports-svh:max-h-svh"
87
+ ]
88
+ },
89
+ layout: { panel: [
90
+ "flex",
91
+ "flex-col",
92
+ "p-0"
93
+ ] }
94
+ }
88
95
  }, { enabledResponsiveVariants: true });
89
96
  var DialogContent = ({ size = "sm", children, closeDialogText = "Close dialog", showCloseButton = true, ...remainingProps }) => /* @__PURE__ */ React$1.createElement(Portal, null, /* @__PURE__ */ React$1.createElement(StyledDialogOverlay, { id: modalOverlayId }, React$1.Children.map(children, (child) => child?.type === DialogBackground && child), /* @__PURE__ */ React$1.createElement(StyledDialogContent, {
90
97
  size,
package/dist/components/dialog/DialogContent.js.map CHANGED
@@ -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'\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 // `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-md',\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-md',\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 ],\n sm: [\n 'rounded-md',\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 ],\n md: [\n 'rounded-md',\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 ],\n lg: [\n 'rounded-md',\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 ],\n xl: [\n 'rounded-md',\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 ],\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 ]\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"],"mappings":";;;;;;;;;AAWA,IAAM,iBAAiB;AAEvB,IAAM,sBAAsB,OAAO,SAAS,EAC1C,MAAM,iBACP,CAAC;AAEF,IAAM,sBAAsB,OAC1B,SACA;CACE,MAAM;EAIJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD;CACD,UAAU,EACR,MAAM;EACJ,IAAI;GACF;GACA;GACA;GACA;GACA;GACA;GACA;GACD;EACD,IAAI;GACF;GACA;GACA;GACA;GACA;GACA;GACA;GACD;EACD,IAAI;GACF;GACA;GACA;GACA;GACA;GACA;GACA;GACD;EACD,IAAI;GACF;GACA;GACA;GACA;GACA;GACA;GACA;GACD;EACD,IAAI;GACF;GACA;GACA;GACA;GACA;GACA;GACA;GACD;EACD,YAAY;GACV;GACA;GACA;GACA;GACA;GACA;GACA;GACD;EACF,EACF;CACF,EACD,EAAE,2BAA2B,MAAM,CACpC;AAOD,IAAa,iBAAiB,EAC5B,OAAO,MACP,UACA,kBAAkB,gBAClB,kBAAkB,MAClB,GAAG,qBAEH,wBAAA,cAAC,QAAA,MACC,wBAAA,cAAC,qBAAD,EAAqB,IAAI,gBAmCH,EAlCnB,QAAM,SAAS,IACd,WACC,UACC,OAAO,SAAS,oBAAoB,MACvC,EACD,wBAAA,cAAC,qBAAD;CACQ;CACN,cAAW;CACX,uBAAuB,UAAU;AAE/B,MADgB,MAAM,QACT,OAAO,eAClB,OAAM,gBAAgB;;CAG1B,GAAI;CAmBgB,EAjBnB,mBACC,wBAAA,cAAC,YAAD;CACE,IAAI;CACJ,OAAO;CACP,YAAY;CACZ,MAAK;CACL,OAAM;CACN,WAAU;CAGC,EADX,wBAAA,cAAC,MAAD,EAAM,IAAI,OAAa,CAAA,CACZ,EAEd,QAAM,SAAS,IACd,WACC,UACC,OAAO,SAAS,oBAAoB,MACvC,CACmB,CACF,CACf"}
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'\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 // `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-md',\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-md',\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 ],\n sm: [\n 'rounded-md',\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 ],\n md: [\n 'rounded-md',\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 ],\n lg: [\n 'rounded-md',\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 ],\n xl: [\n 'rounded-md',\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 ],\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 ]\n },\n layout: {\n panel: ['flex', 'flex-col', 'p-0']\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"],"mappings":";;;;;;;;;AAWA,IAAM,iBAAiB;AAEvB,IAAM,sBAAsB,OAAO,SAAS,EAC1C,MAAM,iBACP,CAAC;AAEF,IAAM,sBAAsB,OAC1B,SACA;CACE,MAAM;EAIJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD;CACD,UAAU;EACR,MAAM;GACJ,IAAI;IACF;IACA;IACA;IACA;IACA;IACA;IACA;IACD;GACD,IAAI;IACF;IACA;IACA;IACA;IACA;IACA;IACA;IACD;GACD,IAAI;IACF;IACA;IACA;IACA;IACA;IACA;IACA;IACD;GACD,IAAI;IACF;IACA;IACA;IACA;IACA;IACA;IACA;IACD;GACD,IAAI;IACF;IACA;IACA;IACA;IACA;IACA;IACA;IACD;GACD,YAAY;IACV;IACA;IACA;IACA;IACA;IACA;IACA;IACD;GACF;EACD,QAAQ,EACN,OAAO;GAAC;GAAQ;GAAY;GAAM,EACnC;EACF;CACF,EACD,EAAE,2BAA2B,MAAM,CACpC;AAOD,IAAa,iBAAiB,EAC5B,OAAO,MACP,UACA,kBAAkB,gBAClB,kBAAkB,MAClB,GAAG,qBAEH,wBAAA,cAAC,QAAA,MACC,wBAAA,cAAC,qBAAD,EAAqB,IAAI,gBAmCH,EAlCnB,QAAM,SAAS,IACd,WACC,UACC,OAAO,SAAS,oBAAoB,MACvC,EACD,wBAAA,cAAC,qBAAD;CACQ;CACN,cAAW;CACX,uBAAuB,UAAU;AAE/B,MADgB,MAAM,QACT,OAAO,eAClB,OAAM,gBAAgB;;CAG1B,GAAI;CAmBgB,EAjBnB,mBACC,wBAAA,cAAC,YAAD;CACE,IAAI;CACJ,OAAO;CACP,YAAY;CACZ,MAAK;CACL,OAAM;CACN,WAAU;CAGC,EADX,wBAAA,cAAC,MAAD,EAAM,IAAI,OAAa,CAAA,CACZ,EAEd,QAAM,SAAS,IACd,WACC,UACC,OAAO,SAAS,oBAAoB,MACvC,CACmB,CACF,CACf"}
package/dist/components/dialog/DialogNavigationBar.d.ts ADDED
@@ -0,0 +1,5 @@
1
+ export declare const DialogNavigationBar: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
2
+ ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
3
+ }, never> & {
4
+ as?: import("react").ElementType;
5
+ }>;
package/dist/components/dialog/DialogNavigationBar.js ADDED
@@ -0,0 +1,14 @@
1
+ import { styled } from "../../styled.js";
2
+ //#region src/components/dialog/DialogNavigationBar.tsx
3
+ var DialogNavigationBar = styled("div", { base: [
4
+ "flex",
5
+ "justify-between",
6
+ "items-center",
7
+ "border-b",
8
+ "border-grey-300",
9
+ "p-4"
10
+ ] });
11
+ //#endregion
12
+ export { DialogNavigationBar };
13
+
14
+ //# sourceMappingURL=DialogNavigationBar.js.map
package/dist/components/dialog/DialogNavigationBar.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"DialogNavigationBar.js","names":[],"sources":["../../../src/components/dialog/DialogNavigationBar.tsx"],"sourcesContent":["import { styled } from '~/styled'\n\nexport const DialogNavigationBar = styled('div', {\n base: [\n 'flex',\n 'justify-between',\n 'items-center',\n 'border-b',\n 'border-grey-300',\n 'p-4'\n ]\n})\n"],"mappings":";;AAEA,IAAa,sBAAsB,OAAO,OAAO,EAC/C,MAAM;CACJ;CACA;CACA;CACA;CACA;CACA;CACD,EACF,CAAC"}
package/dist/components/dialog/DialogScrollableContent.d.ts ADDED
@@ -0,0 +1,5 @@
1
+ export declare const DialogScrollableContent: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
2
+ ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
3
+ }, never> & {
4
+ as?: import("react").ElementType;
5
+ }>;
package/dist/components/dialog/DialogScrollableContent.js ADDED
@@ -0,0 +1,11 @@
1
+ import { styled } from "../../styled.js";
2
+ //#region src/components/dialog/DialogScrollableContent.tsx
3
+ var DialogScrollableContent = styled("div", { base: [
4
+ "overflow-scroll",
5
+ "flex-1",
6
+ "p-4"
7
+ ] });
8
+ //#endregion
9
+ export { DialogScrollableContent };
10
+
11
+ //# sourceMappingURL=DialogScrollableContent.js.map
package/dist/components/dialog/DialogScrollableContent.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"DialogScrollableContent.js","names":[],"sources":["../../../src/components/dialog/DialogScrollableContent.tsx"],"sourcesContent":["import { styled } from '~/styled'\n\nexport const DialogScrollableContent = styled('div', {\n base: ['overflow-scroll', 'flex-1', 'p-4']\n})\n"],"mappings":";;AAEA,IAAa,0BAA0B,OAAO,OAAO,EACnD,MAAM;CAAC;CAAmB;CAAU;CAAM,EAC3C,CAAC"}