@atom-learning/components 6.16.1-beta.1 → 6.17.0-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.
Files changed (30) hide show
  1. package/dist/components/carousel/Carousel.d.ts +32 -25
  2. package/dist/components/carousel/Carousel.js +83 -13
  3. package/dist/components/carousel/Carousel.js.map +1 -1
  4. package/dist/components/carousel/CarouselArrows.d.ts +5 -6
  5. package/dist/components/carousel/CarouselArrows.js +25 -9
  6. package/dist/components/carousel/CarouselArrows.js.map +1 -1
  7. package/dist/components/carousel/CarouselPagination.d.ts +2 -3
  8. package/dist/components/carousel/CarouselPagination.js +31 -17
  9. package/dist/components/carousel/CarouselPagination.js.map +1 -1
  10. package/dist/components/carousel/CarouselSlide.d.ts +2 -4
  11. package/dist/components/carousel/CarouselSlide.js +12 -5
  12. package/dist/components/carousel/CarouselSlide.js.map +1 -1
  13. package/dist/components/carousel/CarouselSlider.d.ts +6 -4
  14. package/dist/components/carousel/CarouselSlider.js +12 -5
  15. package/dist/components/carousel/CarouselSlider.js.map +1 -1
  16. package/dist/components/dialog/DialogContent.js +6 -19
  17. package/dist/components/dialog/DialogContent.js.map +1 -1
  18. package/dist/components/navigation/NavigationMenu.js +1 -1
  19. package/dist/components/navigation/NavigationMenu.js.map +1 -1
  20. package/dist/components/toast/ToastProvider.js +1 -2
  21. package/dist/components/toast/ToastProvider.js.map +1 -1
  22. package/dist/components/top-bar/TopBar.js +2 -2
  23. package/dist/components/top-bar/TopBar.js.map +1 -1
  24. package/dist/docgen.json +1 -1
  25. package/dist/index.cjs.js +168 -69
  26. package/dist/index.cjs.js.map +1 -1
  27. package/package.json +2 -3
  28. package/src/index.css +0 -2
  29. package/src/responsive-variant-classes.css +1 -1
  30. package/src/utilities.css +0 -6
@@ -12,8 +12,7 @@ var ToastProviderBase = styled("div", { base: [
12
12
  "z-2147483647",
13
13
  "inset-2",
14
14
  "pointer-events-none",
15
- "top-safe-or-2",
16
- "sm:top-safe-or-3"
15
+ "sm:top-3"
17
16
  ] });
18
17
  var ToastWrapper = styled("div", {
19
18
  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'\n\nimport { Spacer } from '../spacer/Spacer'\nimport { Text } from '../text/Text'\nimport { Toast } from './Toast'\nimport { ToastContext } from './ToastContext'\n\nexport { default as toast } from 'react-hot-toast'\nexport { useToastContext } from './ToastContext'\n\nconst ToastProviderBase = styled('div', {\n base: [\n 'fixed',\n 'z-2147483647',\n 'inset-2',\n 'pointer-events-none',\n 'top-safe-or-2',\n 'sm:top-safe-or-3'\n ]\n})\n\nconst ToastWrapper = 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.id, {\n reverseOrder: true,\n margin: 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.role}\n aria-live={toast.ariaLive}\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":";;;;;;;;;AAcA,IAAM,oBAAoB,OAAO,OAAO,EACtC,MAAM;CACJ;CACA;CACA;CACA;CACA;CACA;CACD,EACF,CAAC;AAEF,IAAM,eAAe,OAAO,OAAO;CACjC,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD;CACD,UAAU,EACR,SAAS;EACP,MAAM,CAAC,yCAAyC;EAChD,OAAO,CAAC,aAAa,0CAA0C;EAChE,EACF;CACF,CAAC;AAEF,IAAa,iBAAiB,EAC5B,UACA,gBACqD;CACrD,MAAM,EAAE,QAAQ,aAAa,YAAY;CACzC,MAAM,EAAE,YAAY,UAAU,iBAAiB,iBAAiB;AAEhE,QACE,wBAAA,cAAA,QAAA,UAAA,MACE,wBAAA,cAAC,mBAAD;EACE,cAAc;EACd,cAAc;EACH;EA2CO,EAzCjB,OAAO,KAAK,UAAU;EACrB,MAAM,EAAE,SAAS,aAAa;EAE9B,MAAM,SAAS,gBAAgB,MAAM,IAAI;GACvC,cAAc;GACd,QAAQ;GACT,CAAC;EAEF,MAAM,OAAO,OAA8B;AACzC,OAAI,MAAM,MAAM,WAAW,KAAA,EACzB,cAAa,MAAM,IAAI,GAAG,uBAAuB,CAAC,OAAO;;AAI7D,SACE,wBAAA,cAAC,cAAD;GACE,KAAK,MAAM;GACN;GACL,SAAS,MAAM;GACf,MAAM,MAAM;GACZ,aAAW,MAAM;GACjB,OAAO,EAAE,YAAY,GAAG,OAAO,KAAK;GACpC,WAAU;GAgBG,EAdb,wBAAA,cAAC,aAAa,UAAd,EAAuB,OAAO,OAaN,EAZrB,OAAO,aAAa,aACnB,SAAS,MAAM,GACb,QAAM,eAAe,SAAS,GAChC,WAEA,wBAAA,cAAC,OAAD,EAAO,WAAU,SAKT,EAJL,MAAM,SAAS,WAAW,wBAAA,cAAC,MAAM,MAAP,EAAY,IAAI,OAAS,CAAA,EACpD,wBAAA,cAAC,MAAA,MAAM,SAAgB,EACvB,wBAAA,cAAC,QAAA,KAAS,EACV,wBAAA,cAAC,MAAM,OAAA,KAAQ,CACT,CAEY,CACX;GAEjB,CACgB,EACnB,SACA;;AAIP,cAAc,cAAc"}
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'\n\nimport { Spacer } from '../spacer/Spacer'\nimport { Text } from '../text/Text'\nimport { Toast } from './Toast'\nimport { ToastContext } from './ToastContext'\n\nexport { default as toast } from 'react-hot-toast'\nexport { useToastContext } from './ToastContext'\n\nconst ToastProviderBase = styled('div', {\n base: ['fixed', 'z-2147483647', 'inset-2', 'pointer-events-none', 'sm:top-3']\n})\n\nconst ToastWrapper = 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.id, {\n reverseOrder: true,\n margin: 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.role}\n aria-live={toast.ariaLive}\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":";;;;;;;;;AAcA,IAAM,oBAAoB,OAAO,OAAO,EACtC,MAAM;CAAC;CAAS;CAAgB;CAAW;CAAuB;CAAW,EAC9E,CAAC;AAEF,IAAM,eAAe,OAAO,OAAO;CACjC,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD;CACD,UAAU,EACR,SAAS;EACP,MAAM,CAAC,yCAAyC;EAChD,OAAO,CAAC,aAAa,0CAA0C;EAChE,EACF;CACF,CAAC;AAEF,IAAa,iBAAiB,EAC5B,UACA,gBACqD;CACrD,MAAM,EAAE,QAAQ,aAAa,YAAY;CACzC,MAAM,EAAE,YAAY,UAAU,iBAAiB,iBAAiB;AAEhE,QACE,wBAAA,cAAA,QAAA,UAAA,MACE,wBAAA,cAAC,mBAAD;EACE,cAAc;EACd,cAAc;EACH;EA2CO,EAzCjB,OAAO,KAAK,UAAU;EACrB,MAAM,EAAE,SAAS,aAAa;EAE9B,MAAM,SAAS,gBAAgB,MAAM,IAAI;GACvC,cAAc;GACd,QAAQ;GACT,CAAC;EAEF,MAAM,OAAO,OAA8B;AACzC,OAAI,MAAM,MAAM,WAAW,KAAA,EACzB,cAAa,MAAM,IAAI,GAAG,uBAAuB,CAAC,OAAO;;AAI7D,SACE,wBAAA,cAAC,cAAD;GACE,KAAK,MAAM;GACN;GACL,SAAS,MAAM;GACf,MAAM,MAAM;GACZ,aAAW,MAAM;GACjB,OAAO,EAAE,YAAY,GAAG,OAAO,KAAK;GACpC,WAAU;GAgBG,EAdb,wBAAA,cAAC,aAAa,UAAd,EAAuB,OAAO,OAaN,EAZrB,OAAO,aAAa,aACnB,SAAS,MAAM,GACb,QAAM,eAAe,SAAS,GAChC,WAEA,wBAAA,cAAC,OAAD,EAAO,WAAU,SAKT,EAJL,MAAM,SAAS,WAAW,wBAAA,cAAC,MAAM,MAAP,EAAY,IAAI,OAAS,CAAA,EACpD,wBAAA,cAAC,MAAA,MAAM,SAAgB,EACvB,wBAAA,cAAC,QAAA,KAAS,EACV,wBAAA,cAAC,MAAM,OAAA,KAAQ,CACT,CAEY,CACX;GAEjB,CACgB,EACnB,SACA;;AAIP,cAAc,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-safe-offset-16", "pt-safe"],
28
- lg: ["h-safe-offset-24", "pt-safe"]
27
+ md: ["h-16"],
28
+ lg: ["h-24"]
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-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"}
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,OAAO;GACZ,IAAI,CAAC,OAAO;GACb;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"}