@atom-learning/components 8.1.3-beta.0 → 8.1.3
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/index.d.ts +0 -3
- package/dist/components/skeleton-loader/SkeletonCard.js.map +1 -1
- package/dist/components/toast/ToastProvider.js +1 -2
- package/dist/components/toast/ToastProvider.js.map +1 -1
- package/dist/components/top-bar/TopBar.js +1 -1
- package/dist/components/top-bar/TopBar.js.map +1 -1
- package/dist/docgen.json +1 -1
- package/dist/index.cjs.js +7 -124
- package/dist/index.cjs.js.map +1 -1
- package/dist/index.js +1 -4
- package/package.json +1 -1
- package/src/responsive-variant-classes.css +1 -1
- package/dist/components/box/Box.d.ts +0 -3
- 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 -9
- 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 -15
- 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 { 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 enabledResponsiveVariants: true\n }\n)\n\nconst LoaderContentsWrapper = 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 enabledResponsiveVariants: 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 ButtonProps = Override<\n React.ComponentProps<typeof StyledButton>,\n {\n children: React.ReactNode\n href?: string\n isLoading?: boolean\n } & NavigatorActions\n>\n\nexport const Button = React.forwardRef<HTMLElement, ButtonProps>(\n (\n { children, as, href, isLoading = false, onClick, disabled, size, ...rest },\n ref\n ) => (\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 size={size}\n {...rest}\n {...getExternalAnchorProps(href)}\n ref={ref as any}\n >\n {isLoading ? <WithLoader size={size}>{children}</WithLoader> : children}\n </StyledButton>\n )\n)\n\nButton.displayName = 'Button'\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 { 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 enabledResponsiveVariants: true\n }\n)\n\nconst LoaderContentsWrapper = 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 enabledResponsiveVariants: 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 ButtonProps = Override<\n React.ComponentProps<typeof StyledButton>,\n {\n children: React.ReactNode\n href?: string\n isLoading?: boolean\n } & NavigatorActions\n>\n\nexport const Button = React.forwardRef<HTMLElement, ButtonProps>(\n (\n { children, as, href, isLoading = false, onClick, disabled, size, ...rest },\n ref\n ) => (\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 size={size}\n {...rest}\n {...getExternalAnchorProps(href)}\n ref={ref as any}\n >\n {isLoading ? <WithLoader size={size}>{children}</WithLoader> : children}\n </StyledButton>\n )\n)\n\nButton.displayName = 'Button'\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,2BAA2B,KAC7B,CACF;AAEA,IAAM,wBAAwB,OAC5B,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,2BAA2B,KAC7B,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;AAYJ,IAAa,SAAS,QAAM,YAExB,EAAE,UAAU,IAAI,MAAM,YAAY,OAAO,SAAS,UAAU,MAAM,GAAG,QACrE,QAEA,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;CACJ;CACN,GAAI;CACJ,GAAI,uBAAuB,IAAI;CAC1B;WAEJ,YAAY,oBAAC,YAAD;EAAkB;EAAO;CAAqB,CAAA,IAAI;AACnD,CAAA,CAElB;AAEA,OAAO,cAAc"}
|
|
@@ -7,7 +7,6 @@ export { Avatar } from './avatar/Avatar';
|
|
|
7
7
|
export { Badge, type BadgeProps } from './badge/Badge';
|
|
8
8
|
export { BannerRegular } from './banner/banner-regular/BannerRegular';
|
|
9
9
|
export { BannerSlim } from './banner/banner-slim/BannerSlim';
|
|
10
|
-
export { Box } from './box/Box';
|
|
11
10
|
export { Button, StyledButton } from './button/Button';
|
|
12
11
|
export { Carousel, useCarousel } from './carousel/Carousel';
|
|
13
12
|
export { Checkbox } from './checkbox/Checkbox';
|
|
@@ -34,9 +33,7 @@ export { EmptyState } from './empty-state/EmptyState';
|
|
|
34
33
|
export { FieldWrapper } from './field-wrapper/FieldWrapper';
|
|
35
34
|
export { InlineFieldWrapper } from './field-wrapper/InlineFieldWrapper';
|
|
36
35
|
export { FileInput } from './file-input/FileInput';
|
|
37
|
-
export { Flex } from './flex/Flex';
|
|
38
36
|
export { Form } from './form/Form';
|
|
39
|
-
export { Grid } from './grid/Grid';
|
|
40
37
|
export { Heading, type HeadingProps } from './heading/Heading';
|
|
41
38
|
export { Icon } from './icon/Icon';
|
|
42
39
|
export { Image } from './image/Image';
|
|
@@ -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,8 @@ import { toast as toast$1, useToaster } from "react-hot-toast";
|
|
|
11
11
|
var ToastProviderBase = styled("div", { base: [
|
|
12
12
|
"fixed",
|
|
13
13
|
"z-2147483647",
|
|
14
|
-
"inset-2",
|
|
14
|
+
"inset-safe-offset-2",
|
|
15
15
|
"pointer-events-none",
|
|
16
|
-
"top-safe-offset-2",
|
|
17
16
|
"sm:top-safe-offset-3"
|
|
18
17
|
] });
|
|
19
18
|
var ToastWrapper = styled("div", {
|
|
@@ -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 = styled('div', {\n base: [\n 'fixed',\n 'z-2147483647',\n 'inset-2',\n 'pointer-events-none',\n '
|
|
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 = 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 = 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,oBAAoB,OAAO,OAAO,EACtC,MAAM;CACJ;CACA;CACA;CACA;CACA;AACF,EACF,CAAC;AAED,IAAM,eAAe,OAAO,OAAO;CACjC,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"}
|
|
@@ -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-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
|
|
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 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":";;;;;;;;;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,2BAA2B,KAC7B,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,SAAS,OAAO,OAAO,iBAAiB;CACnD,OAAO;CACP,WAAW;CACX,WAAW;CACX,YAAY;CACZ,SAAS;AACX,CAAC;AAED,gBAAgB,cAAc"}
|