@atom-learning/components 9.0.0-beta.5 → 9.0.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/button/Button.js +5 -1
- package/dist/components/button/Button.js.map +1 -1
- package/dist/components/dialog/DialogContent.js +19 -6
- package/dist/components/dialog/DialogContent.js.map +1 -1
- package/dist/components/index.d.ts +0 -3
- package/dist/components/index.js +1 -4
- package/dist/components/index.js.map +1 -1
- package/dist/components/navigation/NavigationMenu.js +1 -1
- package/dist/components/navigation/NavigationMenu.js.map +1 -1
- package/dist/components/segmented-control/SegmentedControlRoot.js +4 -1
- package/dist/components/segmented-control/SegmentedControlRoot.js.map +1 -1
- package/dist/components/skeleton-loader/SkeletonCard.js.map +1 -1
- package/dist/components/toast/ToastProvider.js +2 -2
- package/dist/components/toast/ToastProvider.js.map +1 -1
- package/dist/components/top-bar/TopBar.js +4 -4
- package/dist/components/top-bar/TopBar.js.map +1 -1
- package/dist/docgen.json +1 -1
- package/dist/index.cjs.js +35 -135
- package/dist/index.cjs.js.map +1 -1
- package/dist/index.js +1 -4
- package/package.json +3 -1
- package/src/index.css +2 -0
- package/src/responsive-variant-classes.css +1 -1
- package/src/utilities.css +6 -0
- package/dist/components/box/Box.d.ts +0 -1
- package/dist/components/box/Box.js +0 -8
- package/dist/components/box/Box.js.map +0 -1
- package/dist/components/flex/Flex.d.ts +0 -7
- package/dist/components/flex/Flex.js +0 -88
- package/dist/components/flex/Flex.js.map +0 -1
- package/dist/components/grid/Grid.d.ts +0 -13
- package/dist/components/grid/Grid.js +0 -35
- package/dist/components/grid/Grid.js.map +0 -1
|
@@ -117,7 +117,11 @@ var StyledButton = styled("button", {
|
|
|
117
117
|
"[&_svg]:size-[22px]"
|
|
118
118
|
]
|
|
119
119
|
},
|
|
120
|
-
isLoading: { true: [
|
|
120
|
+
isLoading: { true: [
|
|
121
|
+
"cursor-not-allowed",
|
|
122
|
+
"opacity-60",
|
|
123
|
+
"pointer-events-none"
|
|
124
|
+
] },
|
|
121
125
|
fullWidth: {
|
|
122
126
|
true: ["w-full"],
|
|
123
127
|
false: ["w-max"]
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.js","names":[],"sources":["../../../src/components/button/Button.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { type PolymorphicComponent, styled } from '../../styled'\nimport type { NavigatorActions } from '../../types/navigatorActions.types'\nimport type { Override } from '../../utilities/types'\nimport { getExternalAnchorProps } from '../../utilities/uri'\nimport { Loader } from '../loader/Loader'\n\nexport const StyledButton = styled(\n 'button',\n {\n base: [\n 'items-center',\n 'bg-[unset]',\n 'rounded-md',\n 'cursor-pointer',\n 'flex',\n 'font-body',\n 'font-semibold',\n 'justify-center',\n 'no-underline',\n 'transition-all',\n 'duration-100',\n 'ease-out',\n 'whitespace-nowrap',\n 'w-max',\n 'disabled:cursor-not-allowed',\n 'disabled:opacity-30'\n ],\n variants: {\n theme: {\n primary: [\n '[--base:var(--color-primary-800)]',\n '[--interact:var(--color-primary-900)]',\n '[--active:var(--color-primary-1000)]'\n ],\n secondary: [\n '[--base:var(--color-primary-1000)]',\n '[--interact:var(--color-primary-1100)]',\n '[--active:var(--color-primary-1200)]'\n ],\n success: [\n '[--base:var(--color-success)]',\n '[--interact:var(--color-success-mid)]',\n '[--active:var(--color-success-dark)]'\n ],\n warning: [\n '[--base:var(--color-warning)]',\n '[--interact:var(--color-warning-mid)]',\n '[--active:var(--color-warning-dark)]',\n '[--text:var(--color-grey-800)]'\n ],\n danger: [\n '[--base:var(--color-danger)]',\n '[--interact:var(--color-danger-mid)]',\n '[--active:var(--color-danger-dark)]'\n ],\n neutral: [\n '[--base:white]',\n '[--interact:rgba(255,255,255,0.9)]',\n '[--active:rgba(255,255,255,0.75)]',\n '[--text:var(--color-primary-800)]'\n ]\n },\n appearance: {\n solid: [\n 'bg-(--base)',\n 'text-(--text,white)',\n 'disabled:opacity-30',\n 'disabled:cursor-not-allowed',\n 'not-disabled:hover:bg-(--interact)',\n 'not-disabled:hover:text-(--text,white)',\n 'not-disabled:focus:bg-(--interact)',\n 'not-disabled:focus:text-(--text,white)',\n 'not-disabled:active:bg-(--active)'\n ],\n outline: [\n 'border',\n 'border-current',\n 'text-(--base)',\n 'disabled:opacity-30',\n 'disabled:cursor-not-allowed',\n 'not-disabled:hover:no-underline',\n 'not-disabled:hover:text-(--interact)',\n 'not-disabled:focus:no-underline',\n 'not-disabled:focus:text-(--interact)',\n 'not-disabled:active:text-(--active)'\n ]\n },\n size: {\n sm: [\n 'text-sm',\n 'leading-[1.53]',\n 'h-8',\n 'px-4',\n 'gap-2',\n '[&_svg]:size-4'\n ],\n md: [\n 'text-md',\n 'leading-normal',\n 'h-10',\n 'px-8',\n 'gap-3',\n '[&_svg]:size-5'\n ],\n lg: [\n 'text-lg',\n 'leading-normal',\n 'h-12',\n 'px-8',\n 'gap-3',\n '[&_svg]:size-[22px]'\n ],\n xl: [\n 'text-lg',\n 'leading-normal',\n 'h-16',\n 'px-8',\n 'gap-3',\n '[&_svg]:size-[22px]'\n ]\n },\n isLoading: {\n true: ['cursor-not-allowed opacity-60 pointer-events-none']\n },\n fullWidth: {\n true: ['w-full'],\n false: ['w-max']\n }\n },\n defaultVariants: {\n appearance: 'solid',\n size: 'md',\n theme: 'primary'\n }\n },\n {\n enableResponsiveVariants: true\n }\n)\n\n// @__PURE__ keeps this tree-shakable for consumers importing only\n// StyledButton from this module.\nconst LoaderContentsWrapper = /* @__PURE__ */ styled(\n 'span',\n {\n base: ['items-center', 'flex', 'justify-center', 'invisible'],\n variants: {\n size: {\n sm: ['gap-2'],\n md: ['gap-3'],\n lg: ['gap-3'],\n xl: ['gap-3']\n }\n },\n defaultVariants: {\n size: 'md'\n }\n },\n {\n enableResponsiveVariants: true\n }\n)\n\nconst WithLoader = ({\n size,\n children\n}: React.ComponentProps<typeof LoaderContentsWrapper>) => (\n <>\n <Loader className=\"absolute\" />\n <LoaderContentsWrapper size={size}>{children}</LoaderContentsWrapper>\n </>\n)\n\ntype ButtonCustomProps = {\n children: React.ReactNode\n href?: string\n isLoading?: boolean\n} & NavigatorActions\n\ntype ButtonProps = Override<\n React.ComponentProps<typeof StyledButton>,\n ButtonCustomProps & { as?: React.ElementType }\n>\n\n// Re-expose StyledButton's variant props merged with our own, so the public\n// polymorphic type re-checks props against whatever `as` target is passed\ntype StyledButtonOwnProps =\n typeof StyledButton extends PolymorphicComponent<\n infer _Element extends React.ElementType,\n infer OwnProps\n >\n ? OwnProps\n : never\n\ntype ButtonOwnProps = Override<StyledButtonOwnProps, ButtonCustomProps>\n\nexport const Button = (({\n ref,\n children,\n as,\n href,\n isLoading = false,\n onClick,\n disabled,\n ...rest\n}: ButtonProps) => (\n <StyledButton\n as={as || (href ? 'a' : undefined)}\n {...(!disabled && !isLoading && { href, onClick })}\n isLoading={isLoading}\n type={!href ? 'button' : undefined}\n disabled={disabled}\n {...rest}\n {...getExternalAnchorProps(href)}\n ref={ref}\n >\n {isLoading ? (\n <WithLoader size={rest.size}>{children}</WithLoader>\n ) : (\n children\n )}\n </StyledButton>\n)) as PolymorphicComponent<'button', ButtonOwnProps>\n"],"mappings":";;;;;;AAQA,IAAa,eAAe,OAC1B,UACA;CACE,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF;CACA,UAAU;EACR,OAAO;GACL,SAAS;IACP;IACA;IACA;GACF;GACA,WAAW;IACT;IACA;IACA;GACF;GACA,SAAS;IACP;IACA;IACA;GACF;GACA,SAAS;IACP;IACA;IACA;IACA;GACF;GACA,QAAQ;IACN;IACA;IACA;GACF;GACA,SAAS;IACP;IACA;IACA;IACA;GACF;EACF;EACA,YAAY;GACV,OAAO;IACL;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;GACF;GACA,SAAS;IACP;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;GACF;EACF;EACA,MAAM;GACJ,IAAI;IACF;IACA;IACA;IACA;IACA;IACA;GACF;GACA,IAAI;IACF;IACA;IACA;IACA;IACA;IACA;GACF;GACA,IAAI;IACF;IACA;IACA;IACA;IACA;IACA;GACF;GACA,IAAI;IACF;IACA;IACA;IACA;IACA;IACA;GACF;EACF;EACA,WAAW,EACT,MAAM,
|
|
1
|
+
{"version":3,"file":"Button.js","names":[],"sources":["../../../src/components/button/Button.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { type PolymorphicComponent, styled } from '../../styled'\nimport type { NavigatorActions } from '../../types/navigatorActions.types'\nimport type { Override } from '../../utilities/types'\nimport { getExternalAnchorProps } from '../../utilities/uri'\nimport { Loader } from '../loader/Loader'\n\nexport const StyledButton = styled(\n 'button',\n {\n base: [\n 'items-center',\n 'bg-[unset]',\n 'rounded-md',\n 'cursor-pointer',\n 'flex',\n 'font-body',\n 'font-semibold',\n 'justify-center',\n 'no-underline',\n 'transition-all',\n 'duration-100',\n 'ease-out',\n 'whitespace-nowrap',\n 'w-max',\n 'disabled:cursor-not-allowed',\n 'disabled:opacity-30'\n ],\n variants: {\n theme: {\n primary: [\n '[--base:var(--color-primary-800)]',\n '[--interact:var(--color-primary-900)]',\n '[--active:var(--color-primary-1000)]'\n ],\n secondary: [\n '[--base:var(--color-primary-1000)]',\n '[--interact:var(--color-primary-1100)]',\n '[--active:var(--color-primary-1200)]'\n ],\n success: [\n '[--base:var(--color-success)]',\n '[--interact:var(--color-success-mid)]',\n '[--active:var(--color-success-dark)]'\n ],\n warning: [\n '[--base:var(--color-warning)]',\n '[--interact:var(--color-warning-mid)]',\n '[--active:var(--color-warning-dark)]',\n '[--text:var(--color-grey-800)]'\n ],\n danger: [\n '[--base:var(--color-danger)]',\n '[--interact:var(--color-danger-mid)]',\n '[--active:var(--color-danger-dark)]'\n ],\n neutral: [\n '[--base:white]',\n '[--interact:rgba(255,255,255,0.9)]',\n '[--active:rgba(255,255,255,0.75)]',\n '[--text:var(--color-primary-800)]'\n ]\n },\n appearance: {\n solid: [\n 'bg-(--base)',\n 'text-(--text,white)',\n 'disabled:opacity-30',\n 'disabled:cursor-not-allowed',\n 'not-disabled:hover:bg-(--interact)',\n 'not-disabled:hover:text-(--text,white)',\n 'not-disabled:focus:bg-(--interact)',\n 'not-disabled:focus:text-(--text,white)',\n 'not-disabled:active:bg-(--active)'\n ],\n outline: [\n 'border',\n 'border-current',\n 'text-(--base)',\n 'disabled:opacity-30',\n 'disabled:cursor-not-allowed',\n 'not-disabled:hover:no-underline',\n 'not-disabled:hover:text-(--interact)',\n 'not-disabled:focus:no-underline',\n 'not-disabled:focus:text-(--interact)',\n 'not-disabled:active:text-(--active)'\n ]\n },\n size: {\n sm: [\n 'text-sm',\n 'leading-[1.53]',\n 'h-8',\n 'px-4',\n 'gap-2',\n '[&_svg]:size-4'\n ],\n md: [\n 'text-md',\n 'leading-normal',\n 'h-10',\n 'px-8',\n 'gap-3',\n '[&_svg]:size-5'\n ],\n lg: [\n 'text-lg',\n 'leading-normal',\n 'h-12',\n 'px-8',\n 'gap-3',\n '[&_svg]:size-[22px]'\n ],\n xl: [\n 'text-lg',\n 'leading-normal',\n 'h-16',\n 'px-8',\n 'gap-3',\n '[&_svg]:size-[22px]'\n ]\n },\n isLoading: {\n true: ['cursor-not-allowed', 'opacity-60', 'pointer-events-none']\n },\n fullWidth: {\n true: ['w-full'],\n false: ['w-max']\n }\n },\n defaultVariants: {\n appearance: 'solid',\n size: 'md',\n theme: 'primary'\n }\n },\n {\n enableResponsiveVariants: true\n }\n)\n\n// @__PURE__ keeps this tree-shakable for consumers importing only\n// StyledButton from this module.\nconst LoaderContentsWrapper = /* @__PURE__ */ styled(\n 'span',\n {\n base: ['items-center', 'flex', 'justify-center', 'invisible'],\n variants: {\n size: {\n sm: ['gap-2'],\n md: ['gap-3'],\n lg: ['gap-3'],\n xl: ['gap-3']\n }\n },\n defaultVariants: {\n size: 'md'\n }\n },\n {\n enableResponsiveVariants: true\n }\n)\n\nconst WithLoader = ({\n size,\n children\n}: React.ComponentProps<typeof LoaderContentsWrapper>) => (\n <>\n <Loader className=\"absolute\" />\n <LoaderContentsWrapper size={size}>{children}</LoaderContentsWrapper>\n </>\n)\n\ntype ButtonCustomProps = {\n children: React.ReactNode\n href?: string\n isLoading?: boolean\n} & NavigatorActions\n\ntype ButtonProps = Override<\n React.ComponentProps<typeof StyledButton>,\n ButtonCustomProps & { as?: React.ElementType }\n>\n\n// Re-expose StyledButton's variant props merged with our own, so the public\n// polymorphic type re-checks props against whatever `as` target is passed\ntype StyledButtonOwnProps =\n typeof StyledButton extends PolymorphicComponent<\n infer _Element extends React.ElementType,\n infer OwnProps\n >\n ? OwnProps\n : never\n\ntype ButtonOwnProps = Override<StyledButtonOwnProps, ButtonCustomProps>\n\nexport const Button = (({\n ref,\n children,\n as,\n href,\n isLoading = false,\n onClick,\n disabled,\n ...rest\n}: ButtonProps) => (\n <StyledButton\n as={as || (href ? 'a' : undefined)}\n {...(!disabled && !isLoading && { href, onClick })}\n isLoading={isLoading}\n type={!href ? 'button' : undefined}\n disabled={disabled}\n {...rest}\n {...getExternalAnchorProps(href)}\n ref={ref}\n >\n {isLoading ? (\n <WithLoader size={rest.size}>{children}</WithLoader>\n ) : (\n children\n )}\n </StyledButton>\n)) as PolymorphicComponent<'button', ButtonOwnProps>\n"],"mappings":";;;;;;AAQA,IAAa,eAAe,OAC1B,UACA;CACE,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF;CACA,UAAU;EACR,OAAO;GACL,SAAS;IACP;IACA;IACA;GACF;GACA,WAAW;IACT;IACA;IACA;GACF;GACA,SAAS;IACP;IACA;IACA;GACF;GACA,SAAS;IACP;IACA;IACA;IACA;GACF;GACA,QAAQ;IACN;IACA;IACA;GACF;GACA,SAAS;IACP;IACA;IACA;IACA;GACF;EACF;EACA,YAAY;GACV,OAAO;IACL;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;GACF;GACA,SAAS;IACP;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;GACF;EACF;EACA,MAAM;GACJ,IAAI;IACF;IACA;IACA;IACA;IACA;IACA;GACF;GACA,IAAI;IACF;IACA;IACA;IACA;IACA;IACA;GACF;GACA,IAAI;IACF;IACA;IACA;IACA;IACA;IACA;GACF;GACA,IAAI;IACF;IACA;IACA;IACA;IACA;IACA;GACF;EACF;EACA,WAAW,EACT,MAAM;GAAC;GAAsB;GAAc;EAAqB,EAClE;EACA,WAAW;GACT,MAAM,CAAC,QAAQ;GACf,OAAO,CAAC,OAAO;EACjB;CACF;CACA,iBAAiB;EACf,YAAY;EACZ,MAAM;EACN,OAAO;CACT;AACF,GACA,EACE,0BAA0B,KAC5B,CACF;;AAIA,IAAM,wBAAwC,uBAC5C,QACA;CACE,MAAM;EAAC;EAAgB;EAAQ;EAAkB;CAAW;CAC5D,UAAU,EACR,MAAM;EACJ,IAAI,CAAC,OAAO;EACZ,IAAI,CAAC,OAAO;EACZ,IAAI,CAAC,OAAO;EACZ,IAAI,CAAC,OAAO;CACd,EACF;CACA,iBAAiB,EACf,MAAM,KACR;AACF,GACA,EACE,0BAA0B,KAC5B,CACF;AAEA,IAAM,cAAc,EAClB,MACA,eAEA,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,QAAD,EAAQ,WAAU,WAAY,CAAA,GAC9B,oBAAC,uBAAD;CAA6B;CAAO;AAAgC,CAAA,CACpE,EAAA,CAAA;AA0BJ,IAAa,WAAW,EACtB,KACA,UACA,IACA,MACA,YAAY,OACZ,SACA,UACA,GAAG,WAEH,oBAAC,cAAD;CACE,IAAI,OAAO,OAAO,MAAM,KAAA;CACxB,GAAK,CAAC,YAAY,CAAC,aAAa;EAAE;EAAM;CAAQ;CACrC;CACX,MAAM,CAAC,OAAO,WAAW,KAAA;CACf;CACV,GAAI;CACJ,GAAI,uBAAuB,IAAI;CAC1B;WAEJ,YACC,oBAAC,YAAD;EAAY,MAAM,KAAK;EAAO;CAAqB,CAAA,IAEnD;AAEU,CAAA"}
|
|
@@ -39,7 +39,9 @@ var StyledDialogContent = styled(Content, {
|
|
|
39
39
|
"max-h-[90vh]",
|
|
40
40
|
"supports-svh:h-auto",
|
|
41
41
|
"supports-svh:max-h-[90vh]",
|
|
42
|
-
"w-95"
|
|
42
|
+
"w-95",
|
|
43
|
+
"[&>[data-dialog-close]]:top-4",
|
|
44
|
+
"[&>[data-dialog-close]]:right-4"
|
|
43
45
|
],
|
|
44
46
|
sm: [
|
|
45
47
|
"rounded-md",
|
|
@@ -48,7 +50,9 @@ var StyledDialogContent = styled(Content, {
|
|
|
48
50
|
"max-h-[90vh]",
|
|
49
51
|
"supports-svh:h-auto",
|
|
50
52
|
"supports-svh:max-h-[90vh]",
|
|
51
|
-
"w-120"
|
|
53
|
+
"w-120",
|
|
54
|
+
"[&>[data-dialog-close]]:top-4",
|
|
55
|
+
"[&>[data-dialog-close]]:right-4"
|
|
52
56
|
],
|
|
53
57
|
md: [
|
|
54
58
|
"rounded-md",
|
|
@@ -57,7 +61,9 @@ var StyledDialogContent = styled(Content, {
|
|
|
57
61
|
"max-h-[90vh]",
|
|
58
62
|
"supports-svh:h-auto",
|
|
59
63
|
"supports-svh:max-h-[90vh]",
|
|
60
|
-
"w-150"
|
|
64
|
+
"w-150",
|
|
65
|
+
"[&>[data-dialog-close]]:top-4",
|
|
66
|
+
"[&>[data-dialog-close]]:right-4"
|
|
61
67
|
],
|
|
62
68
|
lg: [
|
|
63
69
|
"rounded-md",
|
|
@@ -66,7 +72,9 @@ var StyledDialogContent = styled(Content, {
|
|
|
66
72
|
"max-h-[90vh]",
|
|
67
73
|
"supports-svh:h-auto",
|
|
68
74
|
"supports-svh:max-h-[90vh]",
|
|
69
|
-
"w-200"
|
|
75
|
+
"w-200",
|
|
76
|
+
"[&>[data-dialog-close]]:top-4",
|
|
77
|
+
"[&>[data-dialog-close]]:right-4"
|
|
70
78
|
],
|
|
71
79
|
xl: [
|
|
72
80
|
"rounded-md",
|
|
@@ -75,7 +83,9 @@ var StyledDialogContent = styled(Content, {
|
|
|
75
83
|
"max-h-[90vh]",
|
|
76
84
|
"supports-svh:h-auto",
|
|
77
85
|
"supports-svh:max-h-[90vh]",
|
|
78
|
-
"w-275"
|
|
86
|
+
"w-275",
|
|
87
|
+
"[&>[data-dialog-close]]:top-4",
|
|
88
|
+
"[&>[data-dialog-close]]:right-4"
|
|
79
89
|
],
|
|
80
90
|
fullscreen: [
|
|
81
91
|
"rounded-none",
|
|
@@ -84,7 +94,9 @@ var StyledDialogContent = styled(Content, {
|
|
|
84
94
|
"max-w-screen",
|
|
85
95
|
"max-h-screen",
|
|
86
96
|
"supports-svh:h-svh",
|
|
87
|
-
"supports-svh:max-h-svh"
|
|
97
|
+
"supports-svh:max-h-svh",
|
|
98
|
+
"[&>[data-dialog-close]]:top-safe-offset-4",
|
|
99
|
+
"[&>[data-dialog-close]]:right-safe-offset-4"
|
|
88
100
|
]
|
|
89
101
|
},
|
|
90
102
|
layout: { panel: [
|
|
@@ -109,6 +121,7 @@ var DialogContent = ({ size = "sm", children, closeDialogText = "Close dialog",
|
|
|
109
121
|
hasTooltip: false,
|
|
110
122
|
size: "md",
|
|
111
123
|
theme: "neutral",
|
|
124
|
+
"data-dialog-close": true,
|
|
112
125
|
className: "absolute top-4 right-4 size-12",
|
|
113
126
|
children: /* @__PURE__ */ jsx(Icon, { is: Close })
|
|
114
127
|
}), React$1.Children.map(children, (child) => React$1.isValidElement(child) && child.type === DialogBackground ? null : child)]
|
|
@@ -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-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 { 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 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;GACF;GACA,IAAI;IACF;IACA;IACA;IACA;IACA;IACA;IACA;GACF;GACA,IAAI;IACF;IACA;IACA;IACA;IACA;IACA;IACA;GACF;GACA,IAAI;IACF;IACA;IACA;IACA;IACA;IACA;IACA;GACF;GACA,IAAI;IACF;IACA;IACA;IACA;IACA;IACA;IACA;GACF;GACA,YAAY;IACV;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,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"}
|
|
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-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 '[&>[data-dialog-close]]:top-4',\n '[&>[data-dialog-close]]:right-4'\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 '[&>[data-dialog-close]]:top-4',\n '[&>[data-dialog-close]]:right-4'\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 '[&>[data-dialog-close]]:top-4',\n '[&>[data-dialog-close]]:right-4'\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 '[&>[data-dialog-close]]:top-4',\n '[&>[data-dialog-close]]:right-4'\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 '[&>[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"}
|
|
@@ -10,7 +10,6 @@ export { Avatar } from './avatar/Avatar';
|
|
|
10
10
|
export { Badge, type BadgeProps } from './badge/Badge';
|
|
11
11
|
export { BannerRegular } from './banner/banner-regular/BannerRegular';
|
|
12
12
|
export { BannerSlim } from './banner/banner-slim/BannerSlim';
|
|
13
|
-
export { Box } from './box/Box';
|
|
14
13
|
export { Button, StyledButton } from './button/Button';
|
|
15
14
|
export { Carousel, useCarousel } from './carousel/Carousel';
|
|
16
15
|
export { Checkbox } from './checkbox/Checkbox';
|
|
@@ -37,9 +36,7 @@ export { EmptyState } from './empty-state/EmptyState';
|
|
|
37
36
|
export { FieldWrapper } from './field-wrapper/FieldWrapper';
|
|
38
37
|
export { InlineFieldWrapper } from './field-wrapper/InlineFieldWrapper';
|
|
39
38
|
export { FileInput } from './file-input/FileInput';
|
|
40
|
-
export { Flex } from './flex/Flex';
|
|
41
39
|
export { Form } from './form/Form';
|
|
42
|
-
export { Grid } from './grid/Grid';
|
|
43
40
|
export { Heading, type HeadingProps } from './heading/Heading';
|
|
44
41
|
export { Icon } from './icon/Icon';
|
|
45
42
|
export { Image } from './image/Image';
|
package/dist/components/index.js
CHANGED
|
@@ -15,7 +15,6 @@ import { Badge } from "./badge/Badge.js";
|
|
|
15
15
|
import { Dismissible } from "./dismissible/index.js";
|
|
16
16
|
import { BannerRegular } from "./banner/banner-regular/BannerRegular.js";
|
|
17
17
|
import { BannerSlim } from "./banner/banner-slim/BannerSlim.js";
|
|
18
|
-
import { Box } from "./box/Box.js";
|
|
19
18
|
import { Carousel, useCarousel } from "./carousel/Carousel.js";
|
|
20
19
|
import { Checkbox } from "./checkbox/Checkbox.js";
|
|
21
20
|
import { CheckboxGroup } from "./checkbox-group/CheckboxGroup.js";
|
|
@@ -52,9 +51,7 @@ import { Dialog } from "./dialog/Dialog.js";
|
|
|
52
51
|
import { Drawer } from "./drawer/Drawer.js";
|
|
53
52
|
import { DropdownMenu } from "./dropdown-menu/DropdownMenu.js";
|
|
54
53
|
import { FileInput } from "./file-input/FileInput.js";
|
|
55
|
-
import { Flex } from "./flex/Flex.js";
|
|
56
54
|
import { Form } from "./form/Form.js";
|
|
57
|
-
import { Grid } from "./grid/Grid.js";
|
|
58
55
|
import { InputField } from "./input-field/InputField.js";
|
|
59
56
|
import { List } from "./list/List.js";
|
|
60
57
|
import { MarkdownContent } from "./markdown-content/MarkdownContent.js";
|
|
@@ -100,6 +97,6 @@ import { useFileDrop } from "./file-drop/useFileDrop.js";
|
|
|
100
97
|
//#region src/components/index.ts
|
|
101
98
|
var Alert = { Provider: AlertProvider };
|
|
102
99
|
//#endregion
|
|
103
|
-
export { Accordion, ActionIcon, Alert, AlertDialog, Avatar, Badge, BannerRegular, BannerSlim,
|
|
100
|
+
export { Accordion, ActionIcon, Alert, AlertDialog, Avatar, Badge, BannerRegular, BannerSlim, Button, Carousel, Checkbox, CheckboxField, CheckboxGroup, CheckboxTree, Chip, ChipDismissibleGroup, ChipGroup, ChipToggleGroup, Combobox, CreatePasswordField, DataTable, DateField, DateInput, Dialog, Dismissible, DismissibleGroup, Divider, Drawer, DropdownMenu, EmptyState, FieldWrapper, FileDrop, FileInput, Form, Heading, Icon, Image, InlineFieldWrapper, InlineMessage, Input, InputBackground, InputField, InputText, KeyboardShortcut, Label, Link, List, Loader, MarkdownContent, NavigationMenu, NavigationMenuVertical, NotificationBadge, NumberInput, NumberInputField, Pagination, PasswordField, PasswordInput, Popover, ProgressBar, RadioButton, RadioButtonField, RadioButtonGroup, RadioCard, RadioCardGroup, SearchField, SearchInput, SectionMessage, SegmentedControl, Select, SelectField, SelectMenu, SelectMenuField, SideBar, skeleton_loader_exports as Skeleton, Slider, SliderField, sortable_exports as Sortable, Spacer, Stepper, StyledButton, StyledLink, Switch, Table, Tabs, Text, Textarea, TextareaField, Tile, TileInteractive, TileToggleGroup, Toast, ToggleGroup, Tooltip, TopBar, Tree, Video, toast, useAlert, useCarousel, useDataTable, useFileDrop, useSidebarState };
|
|
104
101
|
|
|
105
102
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":[],"sources":["../../src/components/index.ts"],"sourcesContent":["import { AlertProvider } from './alert-dialog/AlertDialog.context'\n\nexport type { ValidationOptions } from './form/validation'\n\nexport { Accordion } from './accordion/Accordion'\nexport { ActionIcon } from './action-icon/ActionIcon'\nexport { AlertDialog } from './alert-dialog/AlertDialog'\nexport { useAlert } from './alert-dialog/AlertDialog.context'\n\n// The alert system's provider lives under the `Alert` name; the alert UI\n// itself is imperative (`useAlert`), so there is no root component to render.\nexport const Alert = { Provider: AlertProvider }\nexport { Avatar } from './avatar/Avatar'\nexport { Badge, type BadgeProps } from './badge/Badge'\nexport { BannerRegular } from './banner/banner-regular/BannerRegular'\nexport { BannerSlim } from './banner/banner-slim/BannerSlim'\nexport {
|
|
1
|
+
{"version":3,"file":"index.js","names":[],"sources":["../../src/components/index.ts"],"sourcesContent":["import { AlertProvider } from './alert-dialog/AlertDialog.context'\n\nexport type { ValidationOptions } from './form/validation'\n\nexport { Accordion } from './accordion/Accordion'\nexport { ActionIcon } from './action-icon/ActionIcon'\nexport { AlertDialog } from './alert-dialog/AlertDialog'\nexport { useAlert } from './alert-dialog/AlertDialog.context'\n\n// The alert system's provider lives under the `Alert` name; the alert UI\n// itself is imperative (`useAlert`), so there is no root component to render.\nexport const Alert = { Provider: AlertProvider }\nexport { Avatar } from './avatar/Avatar'\nexport { Badge, type BadgeProps } from './badge/Badge'\nexport { BannerRegular } from './banner/banner-regular/BannerRegular'\nexport { BannerSlim } from './banner/banner-slim/BannerSlim'\nexport { Button, StyledButton } from './button/Button'\nexport { Carousel, useCarousel } from './carousel/Carousel'\nexport { Checkbox } from './checkbox/Checkbox'\nexport { CheckboxGroup } from './checkbox-group/CheckboxGroup'\nexport { CheckboxTree } from './checkbox-tree/CheckboxTree'\nexport { CheckboxField } from './checkbox-field/CheckboxField'\nexport { Chip } from './chip/Chip'\nexport { ChipGroup } from './chip/ChipGroup'\nexport { ChipDismissibleGroup } from './chip-dismissible-group'\nexport { ChipToggleGroup } from './chip-toggle-group'\nexport { Combobox } from './combobox/Combobox'\nexport { CreatePasswordField } from './create-password-field/CreatePasswordField'\nexport { DataTable } from './data-table/DataTable'\nexport { useDataTable } from './data-table/DataTable.context'\nexport { DateField } from './date-field/DateField'\nexport { DateInput } from './date-input/DateInput'\nexport { Dialog } from './dialog/Dialog'\nexport { Dismissible } from './dismissible'\nexport { DismissibleGroup } from './dismissible-group'\nexport { Divider } from './divider/Divider'\nexport { Drawer } from './drawer/Drawer'\nexport { DropdownMenu } from './dropdown-menu/DropdownMenu'\nexport { EmptyState } from './empty-state/EmptyState'\nexport { FieldWrapper } from './field-wrapper/FieldWrapper'\nexport { InlineFieldWrapper } from './field-wrapper/InlineFieldWrapper'\nexport { FileInput } from './file-input/FileInput'\nexport { Form } from './form/Form'\nexport { Heading, type HeadingProps } from './heading/Heading'\nexport { Icon } from './icon/Icon'\nexport { Image } from './image/Image'\n// Exported so consumers can name the type of `Image.Credit` — without it,\n// `styled(Image)` (and other inferences over `typeof Image`) can't be named\n// under `declaration: true` (TS2883).\nexport type { ImageCreditProps } from './image/ImageCredit'\nexport { InlineMessage } from './inline-message/InlineMessage'\nexport { Input, InputBackground, InputText } from './input/Input'\nexport { InputField } from './input-field/InputField'\nexport { Label } from './label/Label'\nexport { Link, StyledLink } from './link/Link'\nexport { List } from './list/List'\nexport { Loader } from './loader/Loader'\nexport { MarkdownContent } from './markdown-content/MarkdownContent'\nexport { NavigationMenu } from './navigation/NavigationMenu'\nexport { NavigationMenuVertical } from './navigation-menu-vertical/NavigationMenuVertical'\nexport { NotificationBadge } from './notification-badge/NotificationBadge'\nexport { NumberInput } from './number-input/NumberInput'\nexport { NumberInputField } from './number-input-field/NumberInputField'\nexport { Pagination } from './pagination/Pagination'\nexport { PasswordField } from './password-field/PasswordField'\nexport { PasswordInput } from './password-input/PasswordInput'\nexport { Popover } from './popover/Popover'\nexport { ProgressBar } from './progress-bar/ProgressBar'\nexport { RadioButton } from './radio-button/RadioButton'\nexport { RadioButtonGroup } from './radio-button/RadioButtonGroup'\nexport { RadioButtonField } from './radio-button-field/RadioButtonField'\nexport { RadioCard } from './radio-card/RadioCard'\nexport { RadioCardGroup } from './radio-card/RadioCardGroup'\nexport { SearchField } from './search-field/SearchField'\nexport { SearchInput } from './search-input/SearchInput'\nexport { SectionMessage } from './section-message/SectionMessage'\nexport { Select } from './select/Select'\nexport { SelectField } from './select-field/SelectField'\nexport { SelectMenu } from './select-menu/SelectMenu'\nexport { SelectMenuField } from './select-menu-field/SelectMenuField'\nexport { SideBar } from './side-bar/SideBar'\nexport { useSidebarState } from './side-bar/SideBar.context'\nexport { Slider } from './slider/Slider'\nexport { SliderField } from './slider-field/SliderField'\nexport * as Sortable from './sortable'\nexport * as Skeleton from './skeleton-loader'\nexport { Spacer } from './spacer/Spacer'\nexport { Stepper } from './stepper/Stepper'\n// Exported so consumers can name the compound's member types — without these,\n// inferences over `typeof Stepper` (e.g. `styled(Stepper)`) can't be named\n// under `declaration: true` (TS2883).\nexport type {\n StepperProps,\n StepperStepsProps,\n StepperNavigateProps\n} from './stepper/types'\nexport { Switch } from './switch/Switch'\nexport { Table } from './table/Table'\nexport { Tabs } from './tabs/Tabs'\nexport { Text } from './text/Text'\nexport { Textarea } from './textarea/Textarea'\nexport { TextareaField } from './textarea-field/TextareaField'\nexport { Tile } from './tile/Tile'\nexport { TileInteractive } from './tile-interactive/TileInteractive'\nexport { TileToggleGroup } from './tile-toggle-group'\nexport { Toast, toast } from './toast'\n// Exported so consumers can name `Toast.Close`'s props — without it, inferences\n// over `typeof Toast` (e.g. `styled(Toast)`) can't be named under\n// `declaration: true` (TS2883).\nexport type { ToastCloseButtonProps } from './toast/ToastCloseButton'\nexport { ToggleGroup } from './toggle-group'\nexport { Tooltip } from './tooltip/Tooltip'\nexport { TopBar } from './top-bar/TopBar'\nexport { Tree } from './tree/Tree'\nexport { Video } from './video/Video'\nexport { KeyboardShortcut } from './keyboard-shortcut'\nexport { SegmentedControl } from './segmented-control/SegmentedControl'\nexport { FileDrop } from './file-drop/FileDrop'\nexport { useFileDrop } from './file-drop/useFileDrop'\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAWA,IAAa,QAAQ,EAAE,UAAU,cAAc"}
|
|
@@ -36,7 +36,7 @@ var NavigationMenuComponent = ({ children, className, ...rest }) => {
|
|
|
36
36
|
const [activeItem, setActiveItem] = React$1.useState();
|
|
37
37
|
const [listWidth, setListWidth] = React$1.useState(0);
|
|
38
38
|
const listRef = React$1.useRef(null);
|
|
39
|
-
React$1.
|
|
39
|
+
React$1.useEffect(() => {
|
|
40
40
|
if (listRef.current) setListWidth(listRef.current.offsetWidth);
|
|
41
41
|
}, [React$1.Children.toArray(children).length]);
|
|
42
42
|
React$1.useEffect(() => {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NavigationMenu.js","names":[],"sources":["../../../src/components/navigation/NavigationMenu.tsx"],"sourcesContent":["import * as NavigationMenuPrimitive from '@radix-ui/react-navigation-menu'\nimport * as React from 'react'\n\nimport { styled, cn } from '../../styled'\nimport { colorSchemes as navigationMenuColorSchemes } from './NavigationMenu.colorscheme.config'\nimport { NavigationMenuContext } from './NavigationMenu.context'\nimport { NavigationMenuDropdown } from './NavigationMenuDropdown'\nimport { NavigationMenuDropdownContent } from './NavigationMenuDropdownContent'\nimport {\n NavigationMenuDropdownItem,\n NavigationMenuDropdownItemTitle\n} from './NavigationMenuDropdownItem'\nimport { NavigationMenuDropdownTrigger } from './NavigationMenuDropdownTrigger'\nimport { NavigationMenuLink } from './NavigationMenuLink'\n\nconst StyledMenu = styled(NavigationMenuPrimitive.Root, {\n base: ['flex', 'justify-center', 'relative']\n})\n\nconst StyledList = styled(NavigationMenuPrimitive.List, {\n base: ['flex', 'justify-center', 'items-center', 'gap-1', 'list-none']\n})\n\nconst StyledViewport = styled(NavigationMenuPrimitive.Viewport, {\n base: ['z-2147483647']\n})\n\nconst ViewportPosition = styled('div', {\n base: ['absolute', 'left-0', 'top-full', 'w-full', 'flex', 'justify-center']\n})\n\nconst NavigationMenuComponent = ({\n children,\n className,\n ...rest\n}: React.ComponentProps<typeof StyledMenu>) => {\n const [offset, setOffset] = React.useState<number | null | undefined>()\n const [activeItem, setActiveItem] = React.useState<string | undefined>()\n const [listWidth, setListWidth] = React.useState(0)\n const listRef = React.useRef<HTMLUListElement>(null)\n\n React.
|
|
1
|
+
{"version":3,"file":"NavigationMenu.js","names":[],"sources":["../../../src/components/navigation/NavigationMenu.tsx"],"sourcesContent":["import * as NavigationMenuPrimitive from '@radix-ui/react-navigation-menu'\nimport * as React from 'react'\n\nimport { styled, cn } from '../../styled'\nimport { colorSchemes as navigationMenuColorSchemes } from './NavigationMenu.colorscheme.config'\nimport { NavigationMenuContext } from './NavigationMenu.context'\nimport { NavigationMenuDropdown } from './NavigationMenuDropdown'\nimport { NavigationMenuDropdownContent } from './NavigationMenuDropdownContent'\nimport {\n NavigationMenuDropdownItem,\n NavigationMenuDropdownItemTitle\n} from './NavigationMenuDropdownItem'\nimport { NavigationMenuDropdownTrigger } from './NavigationMenuDropdownTrigger'\nimport { NavigationMenuLink } from './NavigationMenuLink'\n\nconst StyledMenu = styled(NavigationMenuPrimitive.Root, {\n base: ['flex', 'justify-center', 'relative']\n})\n\nconst StyledList = styled(NavigationMenuPrimitive.List, {\n base: ['flex', 'justify-center', 'items-center', 'gap-1', 'list-none']\n})\n\nconst StyledViewport = styled(NavigationMenuPrimitive.Viewport, {\n base: ['z-2147483647']\n})\n\nconst ViewportPosition = styled('div', {\n base: ['absolute', 'left-0', 'top-full', 'w-full', 'flex', 'justify-center']\n})\n\nconst NavigationMenuComponent = ({\n children,\n className,\n ...rest\n}: React.ComponentProps<typeof StyledMenu>) => {\n const [offset, setOffset] = React.useState<number | null | undefined>()\n const [activeItem, setActiveItem] = React.useState<string | undefined>()\n const [listWidth, setListWidth] = React.useState(0)\n const listRef = React.useRef<HTMLUListElement>(null)\n\n React.useEffect(() => {\n if (listRef.current) {\n setListWidth(listRef.current.offsetWidth)\n }\n }, [React.Children.toArray(children).length])\n\n React.useEffect(() => {\n let timer: ReturnType<typeof setTimeout>\n\n // Delay transitioning back to initial position\n // to allow enough time for fadeOut animation to complete\n if (activeItem === '') {\n timer = setTimeout(() => setOffset(null), 200)\n }\n\n return () => {\n if (timer !== null) {\n clearTimeout(timer)\n }\n }\n }, [activeItem])\n\n // https://github.com/radix-ui/primitives/issues/1462\n const onNodeUpdate = (trigger: HTMLButtonElement, itemValue: string) => {\n if (trigger && listWidth && activeItem === itemValue) {\n const listCenter = listWidth / 2\n\n const triggerOffsetRight =\n listWidth -\n trigger.offsetLeft -\n trigger.offsetWidth +\n trigger.offsetWidth / 2\n\n setOffset(Math.round(listCenter - triggerOffsetRight))\n }\n\n return trigger\n }\n\n return (\n <NavigationMenuContext.Provider value={{ onNodeUpdate }}>\n <StyledMenu\n className={cn(className)}\n style={navigationMenuColorSchemes['light']}\n onValueChange={setActiveItem}\n {...rest}\n >\n <StyledList ref={listRef}>{children}</StyledList>\n <ViewportPosition>\n <StyledViewport\n style={{ '--navigation-menu-viewport-offset': `${offset || 0}px` }}\n className={cn([\n 'data-[state=open]:animate-fade-in',\n 'data-[state=closed]:animate-fade-out',\n 'translate-x-(--navigation-menu-viewport-offset)'\n ])}\n />\n </ViewportPosition>\n </StyledMenu>\n </NavigationMenuContext.Provider>\n )\n}\n\nexport const NavigationMenu = /* @__PURE__ */ Object.assign(\n NavigationMenuComponent,\n {\n Link: NavigationMenuLink,\n Dropdown: NavigationMenuDropdown,\n DropdownContent: NavigationMenuDropdownContent,\n DropdownItem: NavigationMenuDropdownItem,\n DropdownItemTitle: NavigationMenuDropdownItemTitle,\n DropdownTrigger: NavigationMenuDropdownTrigger\n }\n)\n\nNavigationMenuComponent.displayName = 'NavigationMenu'\n"],"mappings":";;;;;;;;;;;;AAeA,IAAM,aAAa,OAAO,wBAAwB,MAAM,EACtD,MAAM;CAAC;CAAQ;CAAkB;AAAU,EAC7C,CAAC;AAED,IAAM,aAAa,OAAO,wBAAwB,MAAM,EACtD,MAAM;CAAC;CAAQ;CAAkB;CAAgB;CAAS;AAAW,EACvE,CAAC;AAED,IAAM,iBAAiB,OAAO,wBAAwB,UAAU,EAC9D,MAAM,CAAC,cAAc,EACvB,CAAC;AAED,IAAM,mBAAmB,OAAO,OAAO,EACrC,MAAM;CAAC;CAAY;CAAU;CAAY;CAAU;CAAQ;AAAgB,EAC7E,CAAC;AAED,IAAM,2BAA2B,EAC/B,UACA,WACA,GAAG,WAC0C;CAC7C,MAAM,CAAC,QAAQ,aAAa,QAAM,SAAoC;CACtE,MAAM,CAAC,YAAY,iBAAiB,QAAM,SAA6B;CACvE,MAAM,CAAC,WAAW,gBAAgB,QAAM,SAAS,CAAC;CAClD,MAAM,UAAU,QAAM,OAAyB,IAAI;CAEnD,QAAM,gBAAgB;EACpB,IAAI,QAAQ,SACV,aAAa,QAAQ,QAAQ,WAAW;CAE5C,GAAG,CAAC,QAAM,SAAS,QAAQ,QAAQ,CAAC,CAAC,MAAM,CAAC;CAE5C,QAAM,gBAAgB;EACpB,IAAI;EAIJ,IAAI,eAAe,IACjB,QAAQ,iBAAiB,UAAU,IAAI,GAAG,GAAG;EAG/C,aAAa;GACX,IAAI,UAAU,MACZ,aAAa,KAAK;EAEtB;CACF,GAAG,CAAC,UAAU,CAAC;CAGf,MAAM,gBAAgB,SAA4B,cAAsB;EACtE,IAAI,WAAW,aAAa,eAAe,WAAW;GACpD,MAAM,aAAa,YAAY;GAE/B,MAAM,qBACJ,YACA,QAAQ,aACR,QAAQ,cACR,QAAQ,cAAc;GAExB,UAAU,KAAK,MAAM,aAAa,kBAAkB,CAAC;EACvD;EAEA,OAAO;CACT;CAEA,OACE,oBAAC,sBAAsB,UAAvB;EAAgC,OAAO,EAAE,aAAa;YACpD,qBAAC,YAAD;GACE,WAAW,GAAG,SAAS;GACvB,OAAO,aAA2B;GAClC,eAAe;GACf,GAAI;aAJN,CAME,oBAAC,YAAD;IAAY,KAAK;IAAU;GAAqB,CAAA,GAChD,oBAAC,kBAAD,EAAA,UACE,oBAAC,gBAAD;IACE,OAAO,EAAE,qCAAqC,GAAG,UAAU,EAAE,IAAI;IACjE,WAAW,GAAG;KACZ;KACA;KACA;IACF,CAAC;GACF,CAAA,EACe,CAAA,CACR;;CACkB,CAAA;AAEpC;AAEA,IAAa,iBAAiC,uBAAO,OACnD,yBACA;CACE,MAAM;CACN,UAAU;CACV,iBAAiB;CACjB,cAAc;CACd,mBAAmB;CACnB,iBAAiB;AACnB,CACF;AAEA,wBAAwB,cAAc"}
|
|
@@ -16,7 +16,10 @@ var SegmentedControlRoot = ({ size, theme = "primary", defaultValue, children, v
|
|
|
16
16
|
const isControlled = value !== void 0;
|
|
17
17
|
const [internalValue, setInternalValue] = React$1.useState(defaultValue);
|
|
18
18
|
const currentValue = isControlled ? value : internalValue;
|
|
19
|
-
const handleValueChange =
|
|
19
|
+
const handleValueChange = React$1.useCallback((newValue) => {
|
|
20
|
+
if (!isControlled) setInternalValue(newValue);
|
|
21
|
+
onValueChange?.(newValue);
|
|
22
|
+
}, [isControlled, onValueChange]);
|
|
20
23
|
React$1.useEffect(() => {
|
|
21
24
|
if (!isControlled && defaultValue) setInternalValue(defaultValue);
|
|
22
25
|
}, [defaultValue, isControlled]);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SegmentedControlRoot.js","names":[],"sources":["../../../src/components/segmented-control/SegmentedControlRoot.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '../../styled'\nimport { Tabs } from '../tabs/Tabs'\nimport { SegmentedControlContext } from './SegmentedControl.context'\nimport type { SegmentedControlTheme } from './SegmentedControl.types'\n\nconst StyledSegmentedControlRoot = styled(\n Tabs,\n {\n base: ['[&>div]:border-none'],\n variants: {\n size: {\n sm: ['w-[unset]!'],\n md: [],\n lg: []\n }\n }\n },\n { enableResponsiveVariants: true }\n)\n\nexport interface SegmentedControlRootProps extends React.ComponentProps<\n typeof StyledSegmentedControlRoot\n> {\n theme?: SegmentedControlTheme\n}\n\nexport const SegmentedControlRoot = ({\n size,\n theme = 'primary',\n defaultValue,\n children,\n value,\n onValueChange,\n ...rest\n}: React.PropsWithChildren<SegmentedControlRootProps>) => {\n const isControlled = value !== undefined\n\n const [internalValue, setInternalValue] = React.useState(defaultValue)\n\n const currentValue = isControlled ? value : internalValue\n
|
|
1
|
+
{"version":3,"file":"SegmentedControlRoot.js","names":[],"sources":["../../../src/components/segmented-control/SegmentedControlRoot.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '../../styled'\nimport { Tabs } from '../tabs/Tabs'\nimport { SegmentedControlContext } from './SegmentedControl.context'\nimport type { SegmentedControlTheme } from './SegmentedControl.types'\n\nconst StyledSegmentedControlRoot = styled(\n Tabs,\n {\n base: ['[&>div]:border-none'],\n variants: {\n size: {\n sm: ['w-[unset]!'],\n md: [],\n lg: []\n }\n }\n },\n { enableResponsiveVariants: true }\n)\n\nexport interface SegmentedControlRootProps extends React.ComponentProps<\n typeof StyledSegmentedControlRoot\n> {\n theme?: SegmentedControlTheme\n}\n\nexport const SegmentedControlRoot = ({\n size,\n theme = 'primary',\n defaultValue,\n children,\n value,\n onValueChange,\n ...rest\n}: React.PropsWithChildren<SegmentedControlRootProps>) => {\n const isControlled = value !== undefined\n\n const [internalValue, setInternalValue] = React.useState(defaultValue)\n\n const currentValue = isControlled ? value : internalValue\n // Fire the consumer's `onValueChange` in BOTH modes; only own internal state\n // when uncontrolled. (Previously `isControlled ? onValueChange :\n // setInternalValue`, which silently dropped the consumer callback in\n // uncontrolled mode once `onValueChange` stopped leaking through `...rest`.)\n const handleValueChange = React.useCallback(\n (newValue: string) => {\n if (!isControlled) setInternalValue(newValue)\n onValueChange?.(newValue)\n },\n [isControlled, onValueChange]\n )\n\n React.useEffect(() => {\n if (!isControlled && defaultValue) {\n setInternalValue(defaultValue)\n }\n }, [defaultValue, isControlled])\n\n const contextValue = React.useMemo(\n () => ({\n size,\n theme,\n defaultValue,\n onValueChange: handleValueChange,\n value: currentValue\n }),\n [size, theme, defaultValue, handleValueChange, currentValue]\n )\n\n return (\n <SegmentedControlContext.Provider value={contextValue}>\n <StyledSegmentedControlRoot\n size={size}\n value={currentValue}\n onValueChange={handleValueChange}\n {...rest}\n >\n {children}\n </StyledSegmentedControlRoot>\n </SegmentedControlContext.Provider>\n )\n}\n"],"mappings":";;;;;;AAOA,IAAM,6BAA6B,OACjC,MACA;CACE,MAAM,CAAC,qBAAqB;CAC5B,UAAU,EACR,MAAM;EACJ,IAAI,CAAC,YAAY;EACjB,IAAI,CAAC;EACL,IAAI,CAAC;CACP,EACF;AACF,GACA,EAAE,0BAA0B,KAAK,CACnC;AAQA,IAAa,wBAAwB,EACnC,MACA,QAAQ,WACR,cACA,UACA,OACA,eACA,GAAG,WACqD;CACxD,MAAM,eAAe,UAAU,KAAA;CAE/B,MAAM,CAAC,eAAe,oBAAoB,QAAM,SAAS,YAAY;CAErE,MAAM,eAAe,eAAe,QAAQ;CAK5C,MAAM,oBAAoB,QAAM,aAC7B,aAAqB;EACpB,IAAI,CAAC,cAAc,iBAAiB,QAAQ;EAC5C,gBAAgB,QAAQ;CAC1B,GACA,CAAC,cAAc,aAAa,CAC9B;CAEA,QAAM,gBAAgB;EACpB,IAAI,CAAC,gBAAgB,cACnB,iBAAiB,YAAY;CAEjC,GAAG,CAAC,cAAc,YAAY,CAAC;CAE/B,MAAM,eAAe,QAAM,eAClB;EACL;EACA;EACA;EACA,eAAe;EACf,OAAO;CACT,IACA;EAAC;EAAM;EAAO;EAAc;EAAmB;CAAY,CAC7D;CAEA,OACE,oBAAC,wBAAwB,UAAzB;EAAkC,OAAO;YACvC,oBAAC,4BAAD;GACQ;GACN,OAAO;GACP,eAAe;GACf,GAAI;GAEH;EACyB,CAAA;CACI,CAAA;AAEtC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SkeletonCard.js","names":[],"sources":["../../../src/components/skeleton-loader/SkeletonCard.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { cn } from '../../styled'\nimport {
|
|
1
|
+
{"version":3,"file":"SkeletonCard.js","names":[],"sources":["../../../src/components/skeleton-loader/SkeletonCard.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { cn } from '../../styled'\nimport { Tile } from '../tile/Tile'\nimport { SkeletonLoader } from './Skeleton'\nimport { SkeletonButton } from './SkeletonButton'\nimport { SkeletonDoughnutChart } from './SkeletonDoughnutChart'\n\nexport const SkeletonCard = ({\n numberOfRows = 3,\n withChart,\n className\n}: {\n numberOfRows?: number\n withChart?: boolean\n className?: string\n}) => (\n <Tile\n className={cn(\n 'relative',\n 'w-full',\n 'flex-col',\n 'items-center',\n 'gap-6',\n 'p-6',\n className\n )}\n >\n <div className=\"align-center flex w-full gap-6\">\n {withChart && <SkeletonDoughnutChart />}\n <div className=\"flex grow flex-col gap-6\">\n {Array.from({ length: numberOfRows }, (_, index) => index).map(\n (rowNumber) => (\n <SkeletonLoader\n key={rowNumber}\n className=\"bg-grey-200 h-10 w-full min-w-25 rounded-md\"\n />\n )\n )}\n </div>\n </div>\n <SkeletonButton />\n </Tile>\n)\n"],"mappings":";;;;;;;;AAQA,IAAa,gBAAgB,EAC3B,eAAe,GACf,WACA,gBAMA,qBAAC,MAAD;CACE,WAAW,GACT,YACA,UACA,YACA,gBACA,SACA,OACA,SACF;WATF,CAWE,qBAAC,OAAD;EAAK,WAAU;YAAf,CACG,aAAa,oBAAC,uBAAD,CAAwB,CAAA,GACtC,oBAAC,OAAD;GAAK,WAAU;aACZ,MAAM,KAAK,EAAE,QAAQ,aAAa,IAAI,GAAG,UAAU,KAAK,CAAC,CAAC,KACxD,cACC,oBAAC,gBAAD,EAEE,WAAU,8CACX,GAFM,SAEN,CAEL;EACG,CAAA,CACF;KACL,oBAAC,gBAAD,CAAiB,CAAA,CACb"}
|
|
@@ -11,9 +11,9 @@ import { toast as toast$1, useToaster } from "react-hot-toast";
|
|
|
11
11
|
var ToastProviderBase = /* @__PURE__ */ styled("div", { base: [
|
|
12
12
|
"fixed",
|
|
13
13
|
"z-2147483647",
|
|
14
|
-
"inset-2",
|
|
14
|
+
"inset-safe-offset-2",
|
|
15
15
|
"pointer-events-none",
|
|
16
|
-
"sm:top-3"
|
|
16
|
+
"sm:top-safe-offset-3"
|
|
17
17
|
] });
|
|
18
18
|
var ToastWrapper = /* @__PURE__ */ styled("div", {
|
|
19
19
|
base: [
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ToastProvider.js","names":[],"sources":["../../../src/components/toast/ToastProvider.tsx"],"sourcesContent":["import { Error } from '@atom-learning/icons'\nimport * as React from 'react'\nimport { useToaster } from 'react-hot-toast'\n\nimport { styled } from '../../styled'\nimport { Spacer } from '../spacer/Spacer'\nimport { Text } from '../text/Text'\nimport { Toast } from './Toast'\nimport { ToastContext } from './Toast.context'\n\nexport { toast } from 'react-hot-toast'\nexport { useToastContext } from './Toast.context'\n\nconst ToastProviderBase = /* @__PURE__ */ styled('div', {\n base: ['fixed'
|
|
1
|
+
{"version":3,"file":"ToastProvider.js","names":[],"sources":["../../../src/components/toast/ToastProvider.tsx"],"sourcesContent":["import { Error } from '@atom-learning/icons'\nimport * as React from 'react'\nimport { useToaster } from 'react-hot-toast'\n\nimport { styled } from '../../styled'\nimport { Spacer } from '../spacer/Spacer'\nimport { Text } from '../text/Text'\nimport { Toast } from './Toast'\nimport { ToastContext } from './Toast.context'\n\nexport { toast } from 'react-hot-toast'\nexport { useToastContext } from './Toast.context'\n\nconst ToastProviderBase = /* @__PURE__ */ styled('div', {\n base: [\n 'fixed',\n 'z-2147483647',\n 'inset-safe-offset-2',\n 'pointer-events-none',\n 'sm:top-safe-offset-3'\n ]\n})\n\nconst ToastWrapper = /* @__PURE__ */ styled('div', {\n base: [\n 'absolute',\n 'w-full',\n 'flex',\n 'justify-center',\n 'items-center',\n 'rounded-sm',\n 'box-border',\n 'min-h-12',\n '[--slide-opacity-out:0]',\n '[--slide-direction-out-y:-100%]'\n ],\n variants: {\n visible: {\n true: ['motion-safe:animate-slide-direction-in'],\n false: ['opacity-0', 'motion-safe:animate-slide-direction-out']\n }\n }\n})\n\nexport const ToastProvider = ({\n children,\n className\n}: React.PropsWithChildren<{ className?: string }>) => {\n const { toasts, handlers } = useToaster()\n const { startPause, endPause, calculateOffset, updateHeight } = handlers\n\n return (\n <>\n <ToastProviderBase\n onMouseEnter={startPause}\n onMouseLeave={endPause}\n className={className}\n >\n {toasts.map((toast) => {\n const { message: children } = toast\n\n const offset = calculateOffset(toast, {\n reverseOrder: true,\n gutter: 8\n })\n\n const ref = (el: HTMLDivElement | null) => {\n if (el && toast.height === undefined) {\n updateHeight(toast.id, el.getBoundingClientRect().height)\n }\n }\n\n return (\n <ToastWrapper\n key={toast.id}\n ref={ref}\n visible={toast.visible}\n role={toast.ariaProps.role}\n aria-live={toast.ariaProps['aria-live']}\n style={{ '--offset': `${offset}px` }}\n className=\"top-(--offset)\"\n >\n <ToastContext.Provider value={toast}>\n {typeof children === 'function' ? (\n children(toast)\n ) : React.isValidElement(children) ? (\n children\n ) : (\n <Toast className=\"w-100\">\n {toast.type === 'error' && <Toast.Icon is={Error} />}\n <Text>{children}</Text>\n <Spacer />\n <Toast.Close />\n </Toast>\n )}\n </ToastContext.Provider>\n </ToastWrapper>\n )\n })}\n </ToastProviderBase>\n {children}\n </>\n )\n}\n\nToastProvider.displayName = 'ToastProvider'\n"],"mappings":";;;;;;;;;;AAaA,IAAM,oBAAoC,uBAAO,OAAO,EACtD,MAAM;CACJ;CACA;CACA;CACA;CACA;AACF,EACF,CAAC;AAED,IAAM,eAA+B,uBAAO,OAAO;CACjD,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF;CACA,UAAU,EACR,SAAS;EACP,MAAM,CAAC,wCAAwC;EAC/C,OAAO,CAAC,aAAa,yCAAyC;CAChE,EACF;AACF,CAAC;AAED,IAAa,iBAAiB,EAC5B,UACA,gBACqD;CACrD,MAAM,EAAE,QAAQ,aAAa,WAAW;CACxC,MAAM,EAAE,YAAY,UAAU,iBAAiB,iBAAiB;CAEhE,OACE,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,mBAAD;EACE,cAAc;EACd,cAAc;EACH;YAEV,OAAO,KAAK,UAAU;GACrB,MAAM,EAAE,SAAS,aAAa;GAE9B,MAAM,SAAS,gBAAgB,OAAO;IACpC,cAAc;IACd,QAAQ;GACV,CAAC;GAED,MAAM,OAAO,OAA8B;IACzC,IAAI,MAAM,MAAM,WAAW,KAAA,GACzB,aAAa,MAAM,IAAI,GAAG,sBAAsB,CAAC,CAAC,MAAM;GAE5D;GAEA,OACE,oBAAC,cAAD;IAEO;IACL,SAAS,MAAM;IACf,MAAM,MAAM,UAAU;IACtB,aAAW,MAAM,UAAU;IAC3B,OAAO,EAAE,YAAY,GAAG,OAAO,IAAI;IACnC,WAAU;cAEV,oBAAC,aAAa,UAAd;KAAuB,OAAO;eAC3B,OAAO,aAAa,aACnB,SAAS,KAAK,IACZ,QAAM,eAAe,QAAQ,IAC/B,WAEA,qBAAC,OAAD;MAAO,WAAU;gBAAjB;OACG,MAAM,SAAS,WAAW,oBAAC,MAAM,MAAP,EAAY,IAAI,MAAQ,CAAA;OACnD,oBAAC,MAAD,EAAO,SAAe,CAAA;OACtB,oBAAC,QAAD,CAAS,CAAA;OACT,oBAAC,MAAM,OAAP,CAAc,CAAA;MACT;;IAEY,CAAA;GACX,GAtBP,MAAM,EAsBC;EAElB,CAAC;CACgB,CAAA,GAClB,QACD,EAAA,CAAA;AAEN;AAEA,cAAc,cAAc"}
|
|
@@ -25,21 +25,21 @@ var StyledRoot = styled("header", {
|
|
|
25
25
|
variants: {
|
|
26
26
|
hasScrolled: { true: ["shadow-[0px_4px_4px_-2px_rgba(31,31,31,0.1)]"] },
|
|
27
27
|
size: {
|
|
28
|
-
md: ["h-16"],
|
|
29
|
-
lg: ["h-24"]
|
|
28
|
+
md: ["h-safe-offset-top-16", "pt-safe"],
|
|
29
|
+
lg: ["h-safe-offset-top-24", "pt-safe"]
|
|
30
30
|
},
|
|
31
31
|
diffused: { true: ["supports-color-mix:bg-[color-mix(in_hsl,(--base-1)_70%,transparent)]", "supports-color-mix:backdrop-blur-sm"] },
|
|
32
32
|
appearance: {
|
|
33
33
|
standard: [
|
|
34
34
|
"w-screen",
|
|
35
35
|
"max-w-full",
|
|
36
|
-
"top-
|
|
36
|
+
"top-safe",
|
|
37
37
|
"border-b",
|
|
38
38
|
"border-b-(--border-bottom)"
|
|
39
39
|
],
|
|
40
40
|
rounded: [
|
|
41
41
|
"w-full",
|
|
42
|
-
"top-2",
|
|
42
|
+
"top-safe-offset-2",
|
|
43
43
|
"p-2",
|
|
44
44
|
"border",
|
|
45
45
|
"border-white",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TopBar.js","names":[],"sources":["../../../src/components/top-bar/TopBar.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled, Theme } from '../../styled'\nimport { useWindowScrollPosition } from '../../utilities/hooks/useWindowScrollPosition'\nimport { Divider } from '../divider/Divider'\nimport { colorSchemes as topBarColorSchemes } from './TopBar.colorscheme.config'\nimport { TopBarActionIcon } from './TopBarActionIcon'\nimport { TopBarBrand, TopBarBrandLogo, TopBarBrandName } from './TopBarBrand'\n\nconst TopBarDivider = () => (\n <Divider orientation=\"vertical\" className=\"bg-divider h-6\" />\n)\n\nconst StyledRoot = styled(\n 'header',\n {\n base: [\n 'bg-(--background)',\n 'sticky',\n 'flex',\n 'items-center',\n 'z-15',\n 'transition-shadow',\n 'duration-200',\n 'ease-out'\n ],\n variants: {\n hasScrolled: {\n true: ['shadow-[0px_4px_4px_-2px_rgba(31,31,31,0.1)]']\n },\n size: {\n md: ['h-16'],\n lg: ['h-24']\n },\n diffused: {\n true: [\n 'supports-color-mix:bg-[color-mix(in_hsl,(--base-1)_70%,transparent)]',\n 'supports-color-mix:backdrop-blur-sm'\n ]\n },\n appearance: {\n standard: [\n 'w-screen',\n 'max-w-full',\n 'top-
|
|
1
|
+
{"version":3,"file":"TopBar.js","names":[],"sources":["../../../src/components/top-bar/TopBar.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled, Theme } from '../../styled'\nimport { useWindowScrollPosition } from '../../utilities/hooks/useWindowScrollPosition'\nimport { Divider } from '../divider/Divider'\nimport { colorSchemes as topBarColorSchemes } from './TopBar.colorscheme.config'\nimport { TopBarActionIcon } from './TopBarActionIcon'\nimport { TopBarBrand, TopBarBrandLogo, TopBarBrandName } from './TopBarBrand'\n\nconst TopBarDivider = () => (\n <Divider orientation=\"vertical\" className=\"bg-divider h-6\" />\n)\n\nconst StyledRoot = styled(\n 'header',\n {\n base: [\n 'bg-(--background)',\n 'sticky',\n 'flex',\n 'items-center',\n 'z-15',\n 'transition-shadow',\n 'duration-200',\n 'ease-out'\n ],\n variants: {\n hasScrolled: {\n true: ['shadow-[0px_4px_4px_-2px_rgba(31,31,31,0.1)]']\n },\n size: {\n md: ['h-safe-offset-top-16', 'pt-safe'],\n lg: ['h-safe-offset-top-24', 'pt-safe']\n },\n diffused: {\n true: [\n 'supports-color-mix:bg-[color-mix(in_hsl,(--base-1)_70%,transparent)]',\n 'supports-color-mix:backdrop-blur-sm'\n ]\n },\n appearance: {\n standard: [\n 'w-screen',\n 'max-w-full',\n 'top-safe',\n 'border-b',\n 'border-b-(--border-bottom)'\n ],\n rounded: [\n 'w-full',\n 'top-safe-offset-2',\n 'p-2',\n 'border',\n 'border-white',\n 'rounded-full'\n ]\n }\n }\n },\n {\n enableResponsiveVariants: true\n }\n)\n\nconst Container = styled('div', {\n base: ['flex', 'items-center', 'h-10', 'mx-4', 'w-full', 'md:mx-8']\n})\n\ntype TopBarProps = React.ComponentProps<typeof StyledRoot> &\n React.ComponentProps<typeof Container> &\n React.ComponentProps<typeof Theme>\n\nconst TopBarComponent = ({\n size = 'md',\n diffused,\n theme,\n appearance = 'standard',\n ...rest\n}: React.PropsWithChildren<TopBarProps>) => {\n const { y: scrollPositionY } = useWindowScrollPosition()\n\n return (\n <Theme theme={theme || topBarColorSchemes['light']}>\n <StyledRoot\n hasScrolled={!!scrollPositionY}\n diffused={diffused}\n appearance={appearance}\n size={size}\n >\n <Container {...rest} />\n </StyledRoot>\n </Theme>\n )\n}\n\nexport const TopBar = /* @__PURE__ */ Object.assign(TopBarComponent, {\n Brand: TopBarBrand,\n BrandLogo: TopBarBrandLogo,\n BrandName: TopBarBrandName,\n ActionIcon: TopBarActionIcon,\n Divider: TopBarDivider\n})\n\nTopBarComponent.displayName = 'TopBar'\n"],"mappings":";;;;;;;;;AASA,IAAM,sBACJ,oBAAC,SAAD;CAAS,aAAY;CAAW,WAAU;AAAkB,CAAA;AAG9D,IAAM,aAAa,OACjB,UACA;CACE,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF;CACA,UAAU;EACR,aAAa,EACX,MAAM,CAAC,8CAA8C,EACvD;EACA,MAAM;GACJ,IAAI,CAAC,wBAAwB,SAAS;GACtC,IAAI,CAAC,wBAAwB,SAAS;EACxC;EACA,UAAU,EACR,MAAM,CACJ,wEACA,qCACF,EACF;EACA,YAAY;GACV,UAAU;IACR;IACA;IACA;IACA;IACA;GACF;GACA,SAAS;IACP;IACA;IACA;IACA;IACA;IACA;GACF;EACF;CACF;AACF,GACA,EACE,0BAA0B,KAC5B,CACF;AAEA,IAAM,YAAY,OAAO,OAAO,EAC9B,MAAM;CAAC;CAAQ;CAAgB;CAAQ;CAAQ;CAAU;AAAS,EACpE,CAAC;AAMD,IAAM,mBAAmB,EACvB,OAAO,MACP,UACA,OACA,aAAa,YACb,GAAG,WACuC;CAC1C,MAAM,EAAE,GAAG,oBAAoB,wBAAwB;CAEvD,OACE,oBAAC,OAAD;EAAO,OAAO,SAAS,aAAmB;YACxC,oBAAC,YAAD;GACE,aAAa,CAAC,CAAC;GACL;GACE;GACN;aAEN,oBAAC,WAAD,EAAW,GAAI,KAAO,CAAA;EACZ,CAAA;CACP,CAAA;AAEX;AAEA,IAAa,SAAyB,uBAAO,OAAO,iBAAiB;CACnE,OAAO;CACP,WAAW;CACX,WAAW;CACX,YAAY;CACZ,SAAS;AACX,CAAC;AAED,gBAAgB,cAAc"}
|