@atom-learning/components 6.16.1-beta.0 → 6.16.1-beta.1
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/dialog/DialogContent.js +20 -7
- package/dist/components/dialog/DialogContent.js.map +1 -1
- package/dist/components/navigation/NavigationMenu.js +1 -1
- package/dist/components/navigation/NavigationMenu.js.map +1 -1
- package/dist/components/top-bar/TopBar.js +2 -2
- package/dist/components/top-bar/TopBar.js.map +1 -1
- package/dist/index.cjs.js +23 -10
- package/dist/index.cjs.js.map +1 -1
- package/package.json +1 -1
- package/src/responsive-variant-classes.css +1 -1
- package/src/utilities.css +6 -0
|
@@ -38,7 +38,9 @@ var StyledDialogContent = styled(Content, {
|
|
|
38
38
|
"max-h-[90vh]",
|
|
39
39
|
"supports-svh:h-auto",
|
|
40
40
|
"supports-svh:max-h-[90vh]",
|
|
41
|
-
"w-95"
|
|
41
|
+
"w-95",
|
|
42
|
+
"[&>[data-dialog-close]]:top-4",
|
|
43
|
+
"[&>[data-dialog-close]]:right-4"
|
|
42
44
|
],
|
|
43
45
|
sm: [
|
|
44
46
|
"rounded-md",
|
|
@@ -47,7 +49,9 @@ var StyledDialogContent = styled(Content, {
|
|
|
47
49
|
"max-h-[90vh]",
|
|
48
50
|
"supports-svh:h-auto",
|
|
49
51
|
"supports-svh:max-h-[90vh]",
|
|
50
|
-
"w-120"
|
|
52
|
+
"w-120",
|
|
53
|
+
"[&>[data-dialog-close]]:top-4",
|
|
54
|
+
"[&>[data-dialog-close]]:right-4"
|
|
51
55
|
],
|
|
52
56
|
md: [
|
|
53
57
|
"rounded-md",
|
|
@@ -56,7 +60,9 @@ var StyledDialogContent = styled(Content, {
|
|
|
56
60
|
"max-h-[90vh]",
|
|
57
61
|
"supports-svh:h-auto",
|
|
58
62
|
"supports-svh:max-h-[90vh]",
|
|
59
|
-
"w-150"
|
|
63
|
+
"w-150",
|
|
64
|
+
"[&>[data-dialog-close]]:top-4",
|
|
65
|
+
"[&>[data-dialog-close]]:right-4"
|
|
60
66
|
],
|
|
61
67
|
lg: [
|
|
62
68
|
"rounded-md",
|
|
@@ -65,7 +71,9 @@ var StyledDialogContent = styled(Content, {
|
|
|
65
71
|
"max-h-[90vh]",
|
|
66
72
|
"supports-svh:h-auto",
|
|
67
73
|
"supports-svh:max-h-[90vh]",
|
|
68
|
-
"w-200"
|
|
74
|
+
"w-200",
|
|
75
|
+
"[&>[data-dialog-close]]:top-4",
|
|
76
|
+
"[&>[data-dialog-close]]:right-4"
|
|
69
77
|
],
|
|
70
78
|
xl: [
|
|
71
79
|
"rounded-md",
|
|
@@ -74,7 +82,9 @@ var StyledDialogContent = styled(Content, {
|
|
|
74
82
|
"max-h-[90vh]",
|
|
75
83
|
"supports-svh:h-auto",
|
|
76
84
|
"supports-svh:max-h-[90vh]",
|
|
77
|
-
"w-275"
|
|
85
|
+
"w-275",
|
|
86
|
+
"[&>[data-dialog-close]]:top-4",
|
|
87
|
+
"[&>[data-dialog-close]]:right-4"
|
|
78
88
|
],
|
|
79
89
|
fullscreen: [
|
|
80
90
|
"rounded-none",
|
|
@@ -83,7 +93,9 @@ var StyledDialogContent = styled(Content, {
|
|
|
83
93
|
"max-w-screen",
|
|
84
94
|
"max-h-screen",
|
|
85
95
|
"supports-svh:h-svh",
|
|
86
|
-
"supports-svh:max-h-svh"
|
|
96
|
+
"supports-svh:max-h-svh",
|
|
97
|
+
"[&>[data-dialog-close]]:top-safe-offset-4",
|
|
98
|
+
"[&>[data-dialog-close]]:right-safe-offset-4"
|
|
87
99
|
]
|
|
88
100
|
},
|
|
89
101
|
layout: { panel: [
|
|
@@ -106,7 +118,8 @@ var DialogContent = ({ size = "sm", children, closeDialogText = "Close dialog",
|
|
|
106
118
|
hasTooltip: false,
|
|
107
119
|
size: "md",
|
|
108
120
|
theme: "neutral",
|
|
109
|
-
|
|
121
|
+
"data-dialog-close": true,
|
|
122
|
+
className: "absolute top-4 right-4 size-12"
|
|
110
123
|
}, /* @__PURE__ */ React$1.createElement(Icon, { is: Close })), React$1.Children.map(children, (child) => child?.type !== DialogBackground && child))));
|
|
111
124
|
//#endregion
|
|
112
125
|
export { DialogContent };
|
|
@@ -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 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=\"top-
|
|
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 '[&>[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 { 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 data-dialog-close\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;IACA;IACA;IACD;GACD,IAAI;IACF;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACD;GACD,IAAI;IACF;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACD;GACD,IAAI;IACF;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACD;GACD,IAAI;IACF;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACD;GACD,YAAY;IACV;IACA;IACA;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,gBAoCH,EAnCnB,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;CAoBgB,EAlBnB,mBACC,wBAAA,cAAC,YAAD;CACE,IAAI;CACJ,OAAO;CACP,YAAY;CACZ,MAAK;CACL,OAAM;CACN,qBAAA;CACA,WAAU;CAGC,EADX,wBAAA,cAAC,MAAD,EAAM,IAAI,OAAa,CAAA,CACZ,EAEd,QAAM,SAAS,IACd,WACC,UACC,OAAO,SAAS,oBAAoB,MACvC,CACmB,CACF,CACf"}
|
|
@@ -35,7 +35,7 @@ var NavigationMenuComponent = ({ children, className, ...props }) => {
|
|
|
35
35
|
const [activeItem, setActiveItem] = React.useState();
|
|
36
36
|
const [listWidth, setListWidth] = React.useState(0);
|
|
37
37
|
const listRef = React.useRef(null);
|
|
38
|
-
React.
|
|
38
|
+
React.useEffect(() => {
|
|
39
39
|
if (listRef.current) setListWidth(listRef.current.offsetWidth);
|
|
40
40
|
}, [React.Children.toArray(children).length]);
|
|
41
41
|
React.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 React from 'react'\n\nimport { styled } from '~/styled'\nimport { cn } from '~/styled'\n\nimport { colorSchemes as navigationMenuColorSchemes } from './NavigationMenu.colorscheme.config'\nimport { NavigationMenuContext } from './NavigationMenuContext'\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 ...props\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 React from 'react'\n\nimport { styled } from '~/styled'\nimport { cn } from '~/styled'\n\nimport { colorSchemes as navigationMenuColorSchemes } from './NavigationMenu.colorscheme.config'\nimport { NavigationMenuContext } from './NavigationMenuContext'\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 ...props\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 {...props}\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 = Object.assign(NavigationMenuComponent, {\n Link: NavigationMenuLink,\n Dropdown: NavigationMenuDropdown,\n DropdownContent: NavigationMenuDropdownContent,\n DropdownItem: NavigationMenuDropdownItem,\n DropdownItemTitle: NavigationMenuDropdownItemTitle,\n DropdownTrigger: NavigationMenuDropdownTrigger\n})\n\nNavigationMenuComponent.displayName = 'NavigationMenu'\n"],"mappings":";;;;;;;;;;;AAiBA,IAAM,aAAa,OAAO,wBAAwB,MAAM,EACtD,MAAM;CAAC;CAAQ;CAAkB;CAAW,EAC7C,CAAC;AAEF,IAAM,aAAa,OAAO,wBAAwB,MAAM,EACtD,MAAM;CAAC;CAAQ;CAAkB;CAAgB;CAAS;CAAY,EACvE,CAAC;AAEF,IAAM,iBAAiB,OAAO,wBAAwB,UAAU,EAC9D,MAAM,CAAC,eAAe,EACvB,CAAC;AAEF,IAAM,mBAAmB,OAAO,OAAO,EACrC,MAAM;CAAC;CAAY;CAAU;CAAY;CAAU;CAAQ;CAAiB,EAC7E,CAAC;AAEF,IAAM,2BAA2B,EAC/B,UACA,WACA,GAAG,YAC0C;CAC7C,MAAM,CAAC,QAAQ,aAAa,MAAM,UAAqC;CACvE,MAAM,CAAC,YAAY,iBAAiB,MAAM,UAA8B;CACxE,MAAM,CAAC,WAAW,gBAAgB,MAAM,SAAS,EAAE;CACnD,MAAM,UAAU,MAAM,OAAyB,KAAK;AAEpD,OAAM,gBAAgB;AACpB,MAAI,QAAQ,QACV,cAAa,QAAQ,QAAQ,YAAY;IAE1C,CAAC,MAAM,SAAS,QAAQ,SAAS,CAAC,OAAO,CAAC;AAE7C,OAAM,gBAAgB;EACpB,IAAI;AAIJ,MAAI,eAAe,GACjB,SAAQ,iBAAiB,UAAU,KAAK,EAAE,IAAI;AAGhD,eAAa;AACX,OAAI,UAAU,KACZ,cAAa,MAAM;;IAGtB,CAAC,WAAW,CAAC;CAGhB,MAAM,gBAAgB,SAA4B,cAAsB;AACtE,MAAI,WAAW,aAAa,eAAe,WAAW;GACpD,MAAM,aAAa,YAAY;GAE/B,MAAM,qBACJ,YACA,QAAQ,aACR,QAAQ,cACR,QAAQ,cAAc;AAExB,aAAU,KAAK,MAAM,aAAa,mBAAmB,CAAC;;AAGxD,SAAO;;AAGT,QACE,sBAAA,cAAC,sBAAsB,UAAvB,EAAgC,OAAO,EAAE,cAAc,EAmBtB,EAlB/B,sBAAA,cAAC,YAAD;EACE,WAAW,GAAG,UAAU;EACxB,OAAO,aAA2B;EAClC,eAAe;EACf,GAAI;EAaO,EAXX,sBAAA,cAAC,YAAD,EAAY,KAAK,SAAgC,EAAtB,SAAsB,EACjD,sBAAA,cAAC,kBAAA,MACC,sBAAA,cAAC,gBAAD;EACE,OAAO,EAAE,qCAAqC,GAAG,UAAU,EAAE,KAAK;EAClE,WAAW,GAAG;GACZ;GACA;GACA;GACD,CAAC;EACF,CAAA,CACe,CACR,CACkB;;AAIrC,IAAa,iBAAiB,OAAO,OAAO,yBAAyB;CACnE,MAAM;CACN,UAAU;CACV,iBAAiB;CACjB,cAAc;CACd,mBAAmB;CACnB,iBAAiB;CAClB,CAAC;AAEF,wBAAwB,cAAc"}
|
|
@@ -24,8 +24,8 @@ var StyledRoot = styled("header", {
|
|
|
24
24
|
variants: {
|
|
25
25
|
hasScrolled: { true: ["shadow-[0px_4px_4px_-2px_rgba(31,31,31,0.1)]"] },
|
|
26
26
|
size: {
|
|
27
|
-
md: ["h-16"],
|
|
28
|
-
lg: ["h-24"]
|
|
27
|
+
md: ["h-safe-offset-16", "pt-safe"],
|
|
28
|
+
lg: ["h-safe-offset-24", "pt-safe"]
|
|
29
29
|
},
|
|
30
30
|
diffused: { true: ["supports-color-mix:bg-[color-mix(in_hsl,(--base-1)_70%,transparent)]", "supports-color-mix:backdrop-blur-sm"] },
|
|
31
31
|
appearance: {
|
|
@@ -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'\n\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-0',\n 'border-b',\n 'border-b-(--border-bottom)'\n ],\n rounded: [\n 'w-full',\n 'top-2',\n 'p-2',\n 'border',\n 'border-white',\n 'rounded-full'\n ]\n }\n }\n },\n {\n enabledResponsiveVariants: 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 = 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":";;;;;;;;AAUA,IAAM,sBACJ,wBAAA,cAAC,SAAD;CAAS,aAAY;CAAW,WAAU;CAAmB,CAAA;AAG/D,IAAM,aAAa,OACjB,UACA;CACE,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD;CACD,UAAU;EACR,aAAa,EACX,MAAM,CAAC,+CAA+C,EACvD;EACD,MAAM;GACJ,IAAI,CAAC,
|
|
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'\n\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-16', 'pt-safe'],\n lg: ['h-safe-offset-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-0',\n 'border-b',\n 'border-b-(--border-bottom)'\n ],\n rounded: [\n 'w-full',\n 'top-2',\n 'p-2',\n 'border',\n 'border-white',\n 'rounded-full'\n ]\n }\n }\n },\n {\n enabledResponsiveVariants: 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 = 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":";;;;;;;;AAUA,IAAM,sBACJ,wBAAA,cAAC,SAAD;CAAS,aAAY;CAAW,WAAU;CAAmB,CAAA;AAG/D,IAAM,aAAa,OACjB,UACA;CACE,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD;CACD,UAAU;EACR,aAAa,EACX,MAAM,CAAC,+CAA+C,EACvD;EACD,MAAM;GACJ,IAAI,CAAC,oBAAoB,UAAU;GACnC,IAAI,CAAC,oBAAoB,UAAU;GACpC;EACD,UAAU,EACR,MAAM,CACJ,wEACA,sCACD,EACF;EACD,YAAY;GACV,UAAU;IACR;IACA;IACA;IACA;IACA;IACD;GACD,SAAS;IACP;IACA;IACA;IACA;IACA;IACA;IACD;GACF;EACF;CACF,EACD,EACE,2BAA2B,MAC5B,CACF;AAED,IAAM,YAAY,OAAO,OAAO,EAC9B,MAAM;CAAC;CAAQ;CAAgB;CAAQ;CAAQ;CAAU;CAAU,EACpE,CAAC;AAMF,IAAM,mBAAmB,EACvB,OAAO,MACP,UACA,OACA,aAAa,YACb,GAAG,WACuC;CAC1C,MAAM,EAAE,GAAG,oBAAoB,yBAAyB;AAExD,QACE,wBAAA,cAAC,OAAD,EAAO,OAAO,SAAS,aAAmB,UASlC,EARN,wBAAA,cAAC,YAAD;EACE,aAAa,CAAC,CAAC;EACL;EACE;EACN;EAGK,EADX,wBAAA,cAAC,WAAc,KAAQ,CACZ,CACP;;AAIZ,IAAa,SAAS,OAAO,OAAO,iBAAiB;CACnD,OAAO;CACP,WAAW;CACX,WAAW;CACX,YAAY;CACZ,SAAS;CACV,CAAC;AAEF,gBAAgB,cAAc"}
|
package/dist/index.cjs.js
CHANGED
|
@@ -5794,7 +5794,9 @@ var StyledDialogContent = styled(_radix_ui_react_dialog.Content, {
|
|
|
5794
5794
|
"max-h-[90vh]",
|
|
5795
5795
|
"supports-svh:h-auto",
|
|
5796
5796
|
"supports-svh:max-h-[90vh]",
|
|
5797
|
-
"w-95"
|
|
5797
|
+
"w-95",
|
|
5798
|
+
"[&>[data-dialog-close]]:top-4",
|
|
5799
|
+
"[&>[data-dialog-close]]:right-4"
|
|
5798
5800
|
],
|
|
5799
5801
|
sm: [
|
|
5800
5802
|
"rounded-md",
|
|
@@ -5803,7 +5805,9 @@ var StyledDialogContent = styled(_radix_ui_react_dialog.Content, {
|
|
|
5803
5805
|
"max-h-[90vh]",
|
|
5804
5806
|
"supports-svh:h-auto",
|
|
5805
5807
|
"supports-svh:max-h-[90vh]",
|
|
5806
|
-
"w-120"
|
|
5808
|
+
"w-120",
|
|
5809
|
+
"[&>[data-dialog-close]]:top-4",
|
|
5810
|
+
"[&>[data-dialog-close]]:right-4"
|
|
5807
5811
|
],
|
|
5808
5812
|
md: [
|
|
5809
5813
|
"rounded-md",
|
|
@@ -5812,7 +5816,9 @@ var StyledDialogContent = styled(_radix_ui_react_dialog.Content, {
|
|
|
5812
5816
|
"max-h-[90vh]",
|
|
5813
5817
|
"supports-svh:h-auto",
|
|
5814
5818
|
"supports-svh:max-h-[90vh]",
|
|
5815
|
-
"w-150"
|
|
5819
|
+
"w-150",
|
|
5820
|
+
"[&>[data-dialog-close]]:top-4",
|
|
5821
|
+
"[&>[data-dialog-close]]:right-4"
|
|
5816
5822
|
],
|
|
5817
5823
|
lg: [
|
|
5818
5824
|
"rounded-md",
|
|
@@ -5821,7 +5827,9 @@ var StyledDialogContent = styled(_radix_ui_react_dialog.Content, {
|
|
|
5821
5827
|
"max-h-[90vh]",
|
|
5822
5828
|
"supports-svh:h-auto",
|
|
5823
5829
|
"supports-svh:max-h-[90vh]",
|
|
5824
|
-
"w-200"
|
|
5830
|
+
"w-200",
|
|
5831
|
+
"[&>[data-dialog-close]]:top-4",
|
|
5832
|
+
"[&>[data-dialog-close]]:right-4"
|
|
5825
5833
|
],
|
|
5826
5834
|
xl: [
|
|
5827
5835
|
"rounded-md",
|
|
@@ -5830,7 +5838,9 @@ var StyledDialogContent = styled(_radix_ui_react_dialog.Content, {
|
|
|
5830
5838
|
"max-h-[90vh]",
|
|
5831
5839
|
"supports-svh:h-auto",
|
|
5832
5840
|
"supports-svh:max-h-[90vh]",
|
|
5833
|
-
"w-275"
|
|
5841
|
+
"w-275",
|
|
5842
|
+
"[&>[data-dialog-close]]:top-4",
|
|
5843
|
+
"[&>[data-dialog-close]]:right-4"
|
|
5834
5844
|
],
|
|
5835
5845
|
fullscreen: [
|
|
5836
5846
|
"rounded-none",
|
|
@@ -5839,7 +5849,9 @@ var StyledDialogContent = styled(_radix_ui_react_dialog.Content, {
|
|
|
5839
5849
|
"max-w-screen",
|
|
5840
5850
|
"max-h-screen",
|
|
5841
5851
|
"supports-svh:h-svh",
|
|
5842
|
-
"supports-svh:max-h-svh"
|
|
5852
|
+
"supports-svh:max-h-svh",
|
|
5853
|
+
"[&>[data-dialog-close]]:top-safe-offset-4",
|
|
5854
|
+
"[&>[data-dialog-close]]:right-safe-offset-4"
|
|
5843
5855
|
]
|
|
5844
5856
|
},
|
|
5845
5857
|
layout: { panel: [
|
|
@@ -5862,7 +5874,8 @@ var DialogContent = ({ size = "sm", children, closeDialogText = "Close dialog",
|
|
|
5862
5874
|
hasTooltip: false,
|
|
5863
5875
|
size: "md",
|
|
5864
5876
|
theme: "neutral",
|
|
5865
|
-
|
|
5877
|
+
"data-dialog-close": true,
|
|
5878
|
+
className: "absolute top-4 right-4 size-12"
|
|
5866
5879
|
}, /* @__PURE__ */ react.createElement(Icon, { is: _atom_learning_icons.Close })), react.Children.map(children, (child) => child?.type !== DialogBackground && child))));
|
|
5867
5880
|
//#endregion
|
|
5868
5881
|
//#region src/components/dialog/DialogFooter.tsx
|
|
@@ -6738,7 +6751,7 @@ var NavigationMenuComponent = ({ children, className, ...props }) => {
|
|
|
6738
6751
|
const [activeItem, setActiveItem] = react.default.useState();
|
|
6739
6752
|
const [listWidth, setListWidth] = react.default.useState(0);
|
|
6740
6753
|
const listRef = react.default.useRef(null);
|
|
6741
|
-
react.default.
|
|
6754
|
+
react.default.useEffect(() => {
|
|
6742
6755
|
if (listRef.current) setListWidth(listRef.current.offsetWidth);
|
|
6743
6756
|
}, [react.default.Children.toArray(children).length]);
|
|
6744
6757
|
react.default.useEffect(() => {
|
|
@@ -9685,8 +9698,8 @@ var StyledRoot = styled("header", {
|
|
|
9685
9698
|
variants: {
|
|
9686
9699
|
hasScrolled: { true: ["shadow-[0px_4px_4px_-2px_rgba(31,31,31,0.1)]"] },
|
|
9687
9700
|
size: {
|
|
9688
|
-
md: ["h-16"],
|
|
9689
|
-
lg: ["h-24"]
|
|
9701
|
+
md: ["h-safe-offset-16", "pt-safe"],
|
|
9702
|
+
lg: ["h-safe-offset-24", "pt-safe"]
|
|
9690
9703
|
},
|
|
9691
9704
|
diffused: { true: ["supports-color-mix:bg-[color-mix(in_hsl,(--base-1)_70%,transparent)]", "supports-color-mix:backdrop-blur-sm"] },
|
|
9692
9705
|
appearance: {
|