@atom-learning/components 6.16.1-beta.0 → 6.17.0-beta.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/carousel/Carousel.d.ts +32 -25
- package/dist/components/carousel/Carousel.js +83 -13
- package/dist/components/carousel/Carousel.js.map +1 -1
- package/dist/components/carousel/CarouselArrows.d.ts +5 -6
- package/dist/components/carousel/CarouselArrows.js +25 -9
- package/dist/components/carousel/CarouselArrows.js.map +1 -1
- package/dist/components/carousel/CarouselPagination.d.ts +2 -3
- package/dist/components/carousel/CarouselPagination.js +31 -17
- package/dist/components/carousel/CarouselPagination.js.map +1 -1
- package/dist/components/carousel/CarouselSlide.d.ts +2 -4
- package/dist/components/carousel/CarouselSlide.js +12 -5
- package/dist/components/carousel/CarouselSlide.js.map +1 -1
- package/dist/components/carousel/CarouselSlider.d.ts +6 -4
- package/dist/components/carousel/CarouselSlider.js +12 -5
- package/dist/components/carousel/CarouselSlider.js.map +1 -1
- package/dist/components/dialog/DialogContent.js +1 -1
- package/dist/components/dialog/DialogContent.js.map +1 -1
- package/dist/components/toast/ToastProvider.js +1 -2
- package/dist/components/toast/ToastProvider.js.map +1 -1
- package/dist/docgen.json +1 -1
- package/dist/index.cjs.js +160 -48
- package/dist/index.cjs.js.map +1 -1
- package/package.json +2 -3
- package/src/index.css +0 -2
|
@@ -1,41 +1,48 @@
|
|
|
1
|
-
import
|
|
1
|
+
import useEmblaCarousel from 'embla-carousel-react';
|
|
2
2
|
import * as React from 'react';
|
|
3
|
-
|
|
3
|
+
type EmblaApi = ReturnType<typeof useEmblaCarousel>[1];
|
|
4
4
|
type CarouselProps = {
|
|
5
|
-
|
|
6
|
-
slideWidth: number;
|
|
7
|
-
numSlides: number;
|
|
5
|
+
currentSlide?: number;
|
|
8
6
|
};
|
|
9
7
|
export declare const CarouselComponent: {
|
|
10
|
-
({ children,
|
|
8
|
+
({ children, currentSlide, ...props }: React.PropsWithChildren<CarouselProps & React.HTMLAttributes<HTMLDivElement>>): React.JSX.Element;
|
|
11
9
|
displayName: string;
|
|
12
10
|
};
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
11
|
+
export declare const useCarousel: () => {
|
|
12
|
+
currentSlide: number;
|
|
13
|
+
emblaRef: React.RefCallback<HTMLDivElement>;
|
|
14
|
+
emblaApi: EmblaApi;
|
|
15
|
+
selectedIndex: number;
|
|
16
|
+
scrollSnaps: number[];
|
|
17
|
+
canScrollPrev: boolean;
|
|
18
|
+
canScrollNext: boolean;
|
|
19
|
+
scrollPrev: () => void;
|
|
20
|
+
scrollNext: () => void;
|
|
21
|
+
scrollTo: (index: number) => void;
|
|
22
|
+
};
|
|
18
23
|
export declare const Carousel: {
|
|
19
|
-
({ children,
|
|
24
|
+
({ children, currentSlide, ...props }: React.PropsWithChildren<CarouselProps & React.HTMLAttributes<HTMLDivElement>>): React.JSX.Element;
|
|
20
25
|
displayName: string;
|
|
21
26
|
} & {
|
|
22
|
-
ArrowNext: (props:
|
|
23
|
-
|
|
24
|
-
}
|
|
25
|
-
ArrowPrevious: (props: Omit<React.ComponentProps<React.ForwardRefExoticComponent<Omit<import("pure-react-carousel").ButtonBackProps & React.RefAttributes<React.Component<import("pure-react-carousel").ButtonBackProps, any, any>>, never> & {
|
|
27
|
+
ArrowNext: (props: React.ComponentProps<React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
|
|
28
|
+
ref?: ((instance: HTMLButtonElement | null) => void) | React.RefObject<HTMLButtonElement> | null | undefined;
|
|
29
|
+
}, never> & {
|
|
26
30
|
as?: React.ElementType;
|
|
27
|
-
}
|
|
28
|
-
|
|
31
|
+
}>>) => React.JSX.Element;
|
|
32
|
+
ArrowPrevious: (props: React.ComponentProps<React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
|
|
33
|
+
ref?: ((instance: HTMLButtonElement | null) => void) | React.RefObject<HTMLButtonElement> | null | undefined;
|
|
34
|
+
}, never> & {
|
|
29
35
|
as?: React.ElementType;
|
|
30
|
-
}
|
|
31
|
-
|
|
32
|
-
|
|
36
|
+
}>>) => React.JSX.Element;
|
|
37
|
+
Pagination: ({ className, ...rest }: React.HTMLAttributes<HTMLDivElement>) => React.JSX.Element;
|
|
38
|
+
Slide: ({ children, className, index, ...rest }: React.PropsWithChildren<{
|
|
33
39
|
index: number;
|
|
34
|
-
}) => React.JSX.Element;
|
|
35
|
-
Slider: ({ children, className, overflow, ...rest }:
|
|
36
|
-
|
|
40
|
+
} & React.HTMLAttributes<HTMLDivElement>>) => React.JSX.Element;
|
|
41
|
+
Slider: ({ children, className, overflow, tabIndex, ...rest }: {
|
|
42
|
+
children?: React.ReactNode;
|
|
37
43
|
className?: string;
|
|
38
44
|
overflow?: boolean;
|
|
39
|
-
|
|
45
|
+
tabIndex?: number;
|
|
46
|
+
}) => React.JSX.Element;
|
|
40
47
|
};
|
|
41
48
|
export {};
|
|
@@ -1,22 +1,92 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { cn } from "../../styled.js";
|
|
2
2
|
import { CarouselArrowNext, CarouselArrowPrevious } from "./CarouselArrows.js";
|
|
3
3
|
import { CarouselPagination } from "./CarouselPagination.js";
|
|
4
4
|
import { CarouselSlide } from "./CarouselSlide.js";
|
|
5
5
|
import { CarouselSlider } from "./CarouselSlider.js";
|
|
6
6
|
import * as React$1 from "react";
|
|
7
|
-
import
|
|
7
|
+
import useEmblaCarousel from "embla-carousel-react";
|
|
8
8
|
//#region src/components/carousel/Carousel.tsx
|
|
9
|
-
var
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
}
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
9
|
+
var CarouselContext = React$1.createContext(null);
|
|
10
|
+
var CarouselComponent = ({ children, currentSlide = 0, ...props }) => {
|
|
11
|
+
const [emblaRef, emblaApi] = useEmblaCarousel({
|
|
12
|
+
startIndex: currentSlide,
|
|
13
|
+
align: "center"
|
|
14
|
+
});
|
|
15
|
+
const [selectedIndex, setSelectedIndex] = React$1.useState(currentSlide);
|
|
16
|
+
const [scrollSnaps, setScrollSnaps] = React$1.useState([]);
|
|
17
|
+
const [canScrollPrev, setCanScrollPrev] = React$1.useState(false);
|
|
18
|
+
const [canScrollNext, setCanScrollNext] = React$1.useState(false);
|
|
19
|
+
const scrollPrev = React$1.useCallback(() => {
|
|
20
|
+
emblaApi?.scrollPrev();
|
|
21
|
+
}, [emblaApi]);
|
|
22
|
+
const scrollNext = React$1.useCallback(() => {
|
|
23
|
+
emblaApi?.scrollNext();
|
|
24
|
+
}, [emblaApi]);
|
|
25
|
+
const scrollTo = React$1.useCallback((index) => {
|
|
26
|
+
emblaApi?.scrollTo(index);
|
|
27
|
+
}, [emblaApi]);
|
|
28
|
+
const onSelect = React$1.useCallback(() => {
|
|
29
|
+
if (!emblaApi) return;
|
|
30
|
+
setSelectedIndex(emblaApi.selectedScrollSnap());
|
|
31
|
+
setCanScrollPrev(emblaApi.canScrollPrev());
|
|
32
|
+
setCanScrollNext(emblaApi.canScrollNext());
|
|
33
|
+
}, [emblaApi]);
|
|
34
|
+
const onInit = React$1.useCallback(() => {
|
|
35
|
+
if (!emblaApi) return;
|
|
36
|
+
setScrollSnaps(emblaApi.scrollSnapList());
|
|
37
|
+
}, [emblaApi]);
|
|
38
|
+
React$1.useEffect(() => {
|
|
39
|
+
if (!emblaApi) return;
|
|
40
|
+
onInit();
|
|
41
|
+
onSelect();
|
|
42
|
+
emblaApi.on("reInit", onInit);
|
|
43
|
+
emblaApi.on("reInit", onSelect);
|
|
44
|
+
emblaApi.on("select", onSelect);
|
|
45
|
+
return () => {
|
|
46
|
+
emblaApi.off("reInit", onInit);
|
|
47
|
+
emblaApi.off("reInit", onSelect);
|
|
48
|
+
emblaApi.off("select", onSelect);
|
|
49
|
+
};
|
|
50
|
+
}, [
|
|
51
|
+
emblaApi,
|
|
52
|
+
onInit,
|
|
53
|
+
onSelect
|
|
54
|
+
]);
|
|
55
|
+
const contextValue = React$1.useMemo(() => ({
|
|
56
|
+
emblaRef,
|
|
57
|
+
emblaApi,
|
|
58
|
+
selectedIndex,
|
|
59
|
+
scrollSnaps,
|
|
60
|
+
canScrollPrev,
|
|
61
|
+
canScrollNext,
|
|
62
|
+
scrollPrev,
|
|
63
|
+
scrollNext,
|
|
64
|
+
scrollTo
|
|
65
|
+
}), [
|
|
66
|
+
emblaRef,
|
|
67
|
+
emblaApi,
|
|
68
|
+
selectedIndex,
|
|
69
|
+
scrollSnaps,
|
|
70
|
+
canScrollPrev,
|
|
71
|
+
canScrollNext,
|
|
72
|
+
scrollPrev,
|
|
73
|
+
scrollNext,
|
|
74
|
+
scrollTo
|
|
75
|
+
]);
|
|
76
|
+
const { className, ...rest } = props;
|
|
77
|
+
return /* @__PURE__ */ React$1.createElement("div", {
|
|
78
|
+
className: cn("relative", "w-full", className),
|
|
79
|
+
...rest
|
|
80
|
+
}, /* @__PURE__ */ React$1.createElement(CarouselContext.Provider, { value: contextValue }, children));
|
|
81
|
+
};
|
|
82
|
+
var useCarousel = () => {
|
|
83
|
+
const context = React$1.useContext(CarouselContext);
|
|
84
|
+
if (!context) throw new Error("useCarousel must be used within a Carousel");
|
|
85
|
+
return {
|
|
86
|
+
...context,
|
|
87
|
+
currentSlide: context.selectedIndex
|
|
88
|
+
};
|
|
89
|
+
};
|
|
20
90
|
var Carousel = Object.assign(CarouselComponent, {
|
|
21
91
|
ArrowNext: CarouselArrowNext,
|
|
22
92
|
ArrowPrevious: CarouselArrowPrevious,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Carousel.js","names":[],"sources":["../../../src/components/carousel/Carousel.tsx"],"sourcesContent":["import
|
|
1
|
+
{"version":3,"file":"Carousel.js","names":[],"sources":["../../../src/components/carousel/Carousel.tsx"],"sourcesContent":["import useEmblaCarousel from 'embla-carousel-react'\nimport * as React from 'react'\n\nimport { cn } from '~/styled'\n\nimport { CarouselArrowNext, CarouselArrowPrevious } from './CarouselArrows'\nimport { CarouselPagination } from './CarouselPagination'\nimport { CarouselSlide } from './CarouselSlide'\nimport { CarouselSlider } from './CarouselSlider'\n\ntype EmblaApi = ReturnType<typeof useEmblaCarousel>[1]\n\ntype CarouselContextValue = {\n emblaRef: React.RefCallback<HTMLDivElement>\n emblaApi: EmblaApi\n selectedIndex: number\n scrollSnaps: number[]\n canScrollPrev: boolean\n canScrollNext: boolean\n scrollPrev: () => void\n scrollNext: () => void\n scrollTo: (index: number) => void\n}\n\nconst CarouselContext = React.createContext<CarouselContextValue | null>(null)\n\ntype CarouselProps = {\n currentSlide?: number\n}\n\nexport const CarouselComponent = ({\n children,\n currentSlide = 0,\n ...props\n}: React.PropsWithChildren<\n CarouselProps & React.HTMLAttributes<HTMLDivElement>\n>) => {\n const [emblaRef, emblaApi] = useEmblaCarousel({\n startIndex: currentSlide,\n align: 'center'\n })\n\n const [selectedIndex, setSelectedIndex] = React.useState(currentSlide)\n const [scrollSnaps, setScrollSnaps] = React.useState<number[]>([])\n const [canScrollPrev, setCanScrollPrev] = React.useState(false)\n const [canScrollNext, setCanScrollNext] = React.useState(false)\n\n const scrollPrev = React.useCallback(() => {\n emblaApi?.scrollPrev()\n }, [emblaApi])\n\n const scrollNext = React.useCallback(() => {\n emblaApi?.scrollNext()\n }, [emblaApi])\n\n const scrollTo = React.useCallback(\n (index: number) => {\n emblaApi?.scrollTo(index)\n },\n [emblaApi]\n )\n\n const onSelect = React.useCallback(() => {\n if (!emblaApi) return\n setSelectedIndex(emblaApi.selectedScrollSnap())\n setCanScrollPrev(emblaApi.canScrollPrev())\n setCanScrollNext(emblaApi.canScrollNext())\n }, [emblaApi])\n\n const onInit = React.useCallback(() => {\n if (!emblaApi) return\n setScrollSnaps(emblaApi.scrollSnapList())\n }, [emblaApi])\n\n React.useEffect(() => {\n if (!emblaApi) return\n\n onInit()\n onSelect()\n\n emblaApi.on('reInit', onInit)\n emblaApi.on('reInit', onSelect)\n emblaApi.on('select', onSelect)\n\n return () => {\n emblaApi.off('reInit', onInit)\n emblaApi.off('reInit', onSelect)\n emblaApi.off('select', onSelect)\n }\n }, [emblaApi, onInit, onSelect])\n\n const contextValue = React.useMemo<CarouselContextValue>(\n () => ({\n emblaRef,\n emblaApi,\n selectedIndex,\n scrollSnaps,\n canScrollPrev,\n canScrollNext,\n scrollPrev,\n scrollNext,\n scrollTo\n }),\n [\n emblaRef,\n emblaApi,\n selectedIndex,\n scrollSnaps,\n canScrollPrev,\n canScrollNext,\n scrollPrev,\n scrollNext,\n scrollTo\n ]\n )\n\n const { className, ...rest } = props\n\n return (\n <div className={cn('relative', 'w-full', className)} {...rest}>\n <CarouselContext.Provider value={contextValue}>\n {children}\n </CarouselContext.Provider>\n </div>\n )\n}\n\nexport const useCarousel = () => {\n const context = React.useContext(CarouselContext)\n if (!context) {\n throw new Error('useCarousel must be used within a Carousel')\n }\n\n return {\n ...context,\n // Alias for backward compatibility\n currentSlide: context.selectedIndex\n }\n}\n\nexport const Carousel = Object.assign(CarouselComponent, {\n ArrowNext: CarouselArrowNext,\n ArrowPrevious: CarouselArrowPrevious,\n Pagination: CarouselPagination,\n Slide: CarouselSlide,\n Slider: CarouselSlider\n})\n\nCarouselComponent.displayName = 'Carousel'\n"],"mappings":";;;;;;;;AAwBA,IAAM,kBAAkB,QAAM,cAA2C,KAAK;AAM9E,IAAa,qBAAqB,EAChC,UACA,eAAe,GACf,GAAG,YAGC;CACJ,MAAM,CAAC,UAAU,YAAY,iBAAiB;EAC5C,YAAY;EACZ,OAAO;EACR,CAAC;CAEF,MAAM,CAAC,eAAe,oBAAoB,QAAM,SAAS,aAAa;CACtE,MAAM,CAAC,aAAa,kBAAkB,QAAM,SAAmB,EAAE,CAAC;CAClE,MAAM,CAAC,eAAe,oBAAoB,QAAM,SAAS,MAAM;CAC/D,MAAM,CAAC,eAAe,oBAAoB,QAAM,SAAS,MAAM;CAE/D,MAAM,aAAa,QAAM,kBAAkB;AACzC,YAAU,YAAY;IACrB,CAAC,SAAS,CAAC;CAEd,MAAM,aAAa,QAAM,kBAAkB;AACzC,YAAU,YAAY;IACrB,CAAC,SAAS,CAAC;CAEd,MAAM,WAAW,QAAM,aACpB,UAAkB;AACjB,YAAU,SAAS,MAAM;IAE3B,CAAC,SAAS,CACX;CAED,MAAM,WAAW,QAAM,kBAAkB;AACvC,MAAI,CAAC,SAAU;AACf,mBAAiB,SAAS,oBAAoB,CAAC;AAC/C,mBAAiB,SAAS,eAAe,CAAC;AAC1C,mBAAiB,SAAS,eAAe,CAAC;IACzC,CAAC,SAAS,CAAC;CAEd,MAAM,SAAS,QAAM,kBAAkB;AACrC,MAAI,CAAC,SAAU;AACf,iBAAe,SAAS,gBAAgB,CAAC;IACxC,CAAC,SAAS,CAAC;AAEd,SAAM,gBAAgB;AACpB,MAAI,CAAC,SAAU;AAEf,UAAQ;AACR,YAAU;AAEV,WAAS,GAAG,UAAU,OAAO;AAC7B,WAAS,GAAG,UAAU,SAAS;AAC/B,WAAS,GAAG,UAAU,SAAS;AAE/B,eAAa;AACX,YAAS,IAAI,UAAU,OAAO;AAC9B,YAAS,IAAI,UAAU,SAAS;AAChC,YAAS,IAAI,UAAU,SAAS;;IAEjC;EAAC;EAAU;EAAQ;EAAS,CAAC;CAEhC,MAAM,eAAe,QAAM,eAClB;EACL;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,GACD;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CACF;CAED,MAAM,EAAE,WAAW,GAAG,SAAS;AAE/B,QACE,wBAAA,cAAC,OAAD;EAAK,WAAW,GAAG,YAAY,UAAU,UAAU;EAAE,GAAI;EAInD,EAHJ,wBAAA,cAAC,gBAAgB,UAAjB,EAA0B,OAAO,cAEN,EADxB,SACwB,CACvB;;AAIV,IAAa,oBAAoB;CAC/B,MAAM,UAAU,QAAM,WAAW,gBAAgB;AACjD,KAAI,CAAC,QACH,OAAM,IAAI,MAAM,6CAA6C;AAG/D,QAAO;EACL,GAAG;EAEH,cAAc,QAAQ;EACvB;;AAGH,IAAa,WAAW,OAAO,OAAO,mBAAmB;CACvD,WAAW;CACX,eAAe;CACf,YAAY;CACZ,OAAO;CACP,QAAQ;CACT,CAAC;AAEF,kBAAkB,cAAc"}
|
|
@@ -1,10 +1,9 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
|
-
declare const
|
|
2
|
+
declare const ArrowButton: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
|
|
3
|
+
ref?: ((instance: HTMLButtonElement | null) => void) | React.RefObject<HTMLButtonElement> | null | undefined;
|
|
4
|
+
}, never> & {
|
|
3
5
|
as?: React.ElementType;
|
|
4
6
|
}>;
|
|
5
|
-
declare const
|
|
6
|
-
|
|
7
|
-
}>;
|
|
8
|
-
export declare const CarouselArrowPrevious: (props: Omit<React.ComponentProps<typeof StyledButtonBack>, "children">) => React.JSX.Element;
|
|
9
|
-
export declare const CarouselArrowNext: (props: Omit<React.ComponentProps<typeof StyledButtonNext>, "children">) => React.JSX.Element;
|
|
7
|
+
export declare const CarouselArrowPrevious: (props: React.ComponentProps<typeof ArrowButton>) => React.JSX.Element;
|
|
8
|
+
export declare const CarouselArrowNext: (props: React.ComponentProps<typeof ArrowButton>) => React.JSX.Element;
|
|
10
9
|
export {};
|
|
@@ -1,12 +1,11 @@
|
|
|
1
1
|
import { styled } from "../../styled.js";
|
|
2
2
|
import { Icon } from "../icon/Icon.js";
|
|
3
|
+
import { useCarousel } from "./Carousel.js";
|
|
3
4
|
import * as React$1 from "react";
|
|
4
5
|
import { ChevronLeft, ChevronRight } from "@atom-learning/icons";
|
|
5
|
-
import { ButtonBack, ButtonNext } from "pure-react-carousel";
|
|
6
6
|
//#region src/components/carousel/CarouselArrows.tsx
|
|
7
|
-
var
|
|
7
|
+
var ArrowButton = styled("button", { base: [
|
|
8
8
|
"items-center",
|
|
9
|
-
"bg-[unset]",
|
|
10
9
|
"text-primary-800",
|
|
11
10
|
"cursor-pointer",
|
|
12
11
|
"flex",
|
|
@@ -19,12 +18,29 @@ var buttonStyles = [
|
|
|
19
18
|
"ease-in-out",
|
|
20
19
|
"hover:text-primary-900",
|
|
21
20
|
"active:text-primary-1000",
|
|
22
|
-
"disabled:text-grey-200"
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
var
|
|
26
|
-
|
|
27
|
-
|
|
21
|
+
"disabled:text-grey-200",
|
|
22
|
+
"disabled:cursor-not-allowed"
|
|
23
|
+
] });
|
|
24
|
+
var CarouselArrowPrevious = (props) => {
|
|
25
|
+
const { scrollPrev, canScrollPrev } = useCarousel();
|
|
26
|
+
return /* @__PURE__ */ React$1.createElement(ArrowButton, {
|
|
27
|
+
type: "button",
|
|
28
|
+
onClick: scrollPrev,
|
|
29
|
+
disabled: !canScrollPrev,
|
|
30
|
+
"aria-label": "Previous slide",
|
|
31
|
+
...props
|
|
32
|
+
}, /* @__PURE__ */ React$1.createElement(Icon, { is: ChevronLeft }));
|
|
33
|
+
};
|
|
34
|
+
var CarouselArrowNext = (props) => {
|
|
35
|
+
const { scrollNext, canScrollNext } = useCarousel();
|
|
36
|
+
return /* @__PURE__ */ React$1.createElement(ArrowButton, {
|
|
37
|
+
type: "button",
|
|
38
|
+
onClick: scrollNext,
|
|
39
|
+
disabled: !canScrollNext,
|
|
40
|
+
"aria-label": "Next slide",
|
|
41
|
+
...props
|
|
42
|
+
}, /* @__PURE__ */ React$1.createElement(Icon, { is: ChevronRight }));
|
|
43
|
+
};
|
|
28
44
|
//#endregion
|
|
29
45
|
export { CarouselArrowNext, CarouselArrowPrevious };
|
|
30
46
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CarouselArrows.js","names":[],"sources":["../../../src/components/carousel/CarouselArrows.tsx"],"sourcesContent":["import { ChevronLeft, ChevronRight } from '@atom-learning/icons'\nimport
|
|
1
|
+
{"version":3,"file":"CarouselArrows.js","names":[],"sources":["../../../src/components/carousel/CarouselArrows.tsx"],"sourcesContent":["import { ChevronLeft, ChevronRight } from '@atom-learning/icons'\nimport * as React from 'react'\n\nimport { Icon } from '~/components/icon/Icon'\nimport { styled } from '~/styled'\n\nimport { useCarousel } from './Carousel'\n\nconst ArrowButton = styled('button', {\n base: [\n 'items-center',\n 'text-primary-800',\n 'cursor-pointer',\n 'flex',\n 'justify-center',\n 'size-12',\n 'top-1/2',\n '-translate-y-1/2',\n 'transition-colors',\n 'duration-150',\n 'ease-in-out',\n 'hover:text-primary-900',\n 'active:text-primary-1000',\n 'disabled:text-grey-200',\n 'disabled:cursor-not-allowed'\n ]\n})\n\nexport const CarouselArrowPrevious = (\n props: React.ComponentProps<typeof ArrowButton>\n) => {\n const { scrollPrev, canScrollPrev } = useCarousel()\n\n return (\n <ArrowButton\n type=\"button\"\n onClick={scrollPrev}\n disabled={!canScrollPrev}\n aria-label=\"Previous slide\"\n {...props}\n >\n <Icon is={ChevronLeft} />\n </ArrowButton>\n )\n}\n\nexport const CarouselArrowNext = (\n props: React.ComponentProps<typeof ArrowButton>\n) => {\n const { scrollNext, canScrollNext } = useCarousel()\n\n return (\n <ArrowButton\n type=\"button\"\n onClick={scrollNext}\n disabled={!canScrollNext}\n aria-label=\"Next slide\"\n {...props}\n >\n <Icon is={ChevronRight} />\n </ArrowButton>\n )\n}\n"],"mappings":";;;;;;AAQA,IAAM,cAAc,OAAO,UAAU,EACnC,MAAM;CACJ;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACD,EACF,CAAC;AAEF,IAAa,yBACX,UACG;CACH,MAAM,EAAE,YAAY,kBAAkB,aAAa;AAEnD,QACE,wBAAA,cAAC,aAAD;EACE,MAAK;EACL,SAAS;EACT,UAAU,CAAC;EACX,cAAW;EACX,GAAI;EAGQ,EADZ,wBAAA,cAAC,MAAD,EAAM,IAAI,aAAe,CAAA,CACb;;AAIlB,IAAa,qBACX,UACG;CACH,MAAM,EAAE,YAAY,kBAAkB,aAAa;AAEnD,QACE,wBAAA,cAAC,aAAD;EACE,MAAK;EACL,SAAS;EACT,UAAU,CAAC;EACX,cAAW;EACX,GAAI;EAGQ,EADZ,wBAAA,cAAC,MAAD,EAAM,IAAI,cAAgB,CAAA,CACd"}
|
|
@@ -1,3 +1,2 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
}>;
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
export declare const CarouselPagination: ({ className, ...rest }: React.HTMLAttributes<HTMLDivElement>) => React.JSX.Element;
|
|
@@ -1,22 +1,36 @@
|
|
|
1
|
-
import { styled } from "../../styled.js";
|
|
2
|
-
import {
|
|
1
|
+
import { cn, styled } from "../../styled.js";
|
|
2
|
+
import { useCarousel } from "./Carousel.js";
|
|
3
|
+
import * as React$1 from "react";
|
|
3
4
|
//#region src/components/carousel/CarouselPagination.tsx
|
|
4
|
-
var
|
|
5
|
-
"
|
|
6
|
-
"
|
|
7
|
-
"
|
|
8
|
-
"
|
|
9
|
-
"
|
|
10
|
-
"
|
|
11
|
-
"
|
|
12
|
-
"
|
|
13
|
-
"
|
|
14
|
-
"
|
|
15
|
-
"
|
|
16
|
-
"
|
|
17
|
-
"
|
|
18
|
-
"[&_button]:transition-all"
|
|
5
|
+
var Dot = styled("button", { base: [
|
|
6
|
+
"bg-grey-600",
|
|
7
|
+
"cursor-pointer",
|
|
8
|
+
"duration-100",
|
|
9
|
+
"ease-in",
|
|
10
|
+
"focus:bg-primary-900",
|
|
11
|
+
"hover:bg-primary-900",
|
|
12
|
+
"mx-1",
|
|
13
|
+
"p-1",
|
|
14
|
+
"rounded-full",
|
|
15
|
+
"size-3",
|
|
16
|
+
"transition-all",
|
|
17
|
+
"disabled:bg-primary-800",
|
|
18
|
+
"disabled:cursor-default"
|
|
19
19
|
] });
|
|
20
|
+
var CarouselPagination = ({ className, ...rest }) => {
|
|
21
|
+
const { scrollSnaps, selectedIndex, scrollTo } = useCarousel();
|
|
22
|
+
const dots = Array.from({ length: scrollSnaps.length }, (_, i) => i);
|
|
23
|
+
return /* @__PURE__ */ React$1.createElement("div", {
|
|
24
|
+
className: cn("flex", "justify-center", className),
|
|
25
|
+
...rest
|
|
26
|
+
}, dots.map((index) => /* @__PURE__ */ React$1.createElement(Dot, {
|
|
27
|
+
key: index,
|
|
28
|
+
type: "button",
|
|
29
|
+
onClick: () => scrollTo(index),
|
|
30
|
+
disabled: index === selectedIndex,
|
|
31
|
+
"aria-label": "slide dot"
|
|
32
|
+
})));
|
|
33
|
+
};
|
|
20
34
|
//#endregion
|
|
21
35
|
export { CarouselPagination };
|
|
22
36
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CarouselPagination.js","names":[],"sources":["../../../src/components/carousel/CarouselPagination.tsx"],"sourcesContent":["import
|
|
1
|
+
{"version":3,"file":"CarouselPagination.js","names":[],"sources":["../../../src/components/carousel/CarouselPagination.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { cn, styled } from '~/styled'\n\nimport { useCarousel } from './Carousel'\n\nconst Dot = styled('button', {\n base: [\n 'bg-grey-600',\n 'cursor-pointer',\n 'duration-100',\n 'ease-in',\n 'focus:bg-primary-900',\n 'hover:bg-primary-900',\n 'mx-1',\n 'p-1',\n 'rounded-full',\n 'size-3',\n 'transition-all',\n 'disabled:bg-primary-800',\n 'disabled:cursor-default'\n ]\n})\n\nexport const CarouselPagination = ({\n className,\n ...rest\n}: React.HTMLAttributes<HTMLDivElement>) => {\n const { scrollSnaps, selectedIndex, scrollTo } = useCarousel()\n\n const dots = Array.from({ length: scrollSnaps.length }, (_, i) => i)\n\n return (\n <div className={cn('flex', 'justify-center', className)} {...rest}>\n {dots.map((index) => (\n <Dot\n key={index}\n type=\"button\"\n onClick={() => scrollTo(index)}\n disabled={index === selectedIndex}\n aria-label=\"slide dot\"\n />\n ))}\n </div>\n )\n}\n"],"mappings":";;;;AAMA,IAAM,MAAM,OAAO,UAAU,EAC3B,MAAM;CACJ;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACD,EACF,CAAC;AAEF,IAAa,sBAAsB,EACjC,WACA,GAAG,WACuC;CAC1C,MAAM,EAAE,aAAa,eAAe,aAAa,aAAa;CAE9D,MAAM,OAAO,MAAM,KAAK,EAAE,QAAQ,YAAY,QAAQ,GAAG,GAAG,MAAM,EAAE;AAEpE,QACE,wBAAA,cAAC,OAAD;EAAK,WAAW,GAAG,QAAQ,kBAAkB,UAAU;EAAE,GAAI;EAUvD,EATH,KAAK,KAAK,UACT,wBAAA,cAAC,KAAD;EACE,KAAK;EACL,MAAK;EACL,eAAe,SAAS,MAAM;EAC9B,UAAU,UAAU;EACpB,cAAW;EACX,CAAA,CACF,CACE"}
|
|
@@ -1,6 +1,4 @@
|
|
|
1
|
-
import { Slide as BaseSlide } from 'pure-react-carousel';
|
|
2
1
|
import * as React from 'react';
|
|
3
|
-
export declare const CarouselSlide: ({ children, ...
|
|
4
|
-
className?: string;
|
|
2
|
+
export declare const CarouselSlide: ({ children, className, index, ...rest }: React.PropsWithChildren<{
|
|
5
3
|
index: number;
|
|
6
|
-
}) => React.JSX.Element;
|
|
4
|
+
} & React.HTMLAttributes<HTMLDivElement>>) => React.JSX.Element;
|
|
@@ -1,10 +1,17 @@
|
|
|
1
|
+
import { cn } from "../../styled.js";
|
|
2
|
+
import { useCarousel } from "./Carousel.js";
|
|
1
3
|
import * as React$1 from "react";
|
|
2
|
-
import { Slide } from "pure-react-carousel";
|
|
3
4
|
//#region src/components/carousel/CarouselSlide.tsx
|
|
4
|
-
var CarouselSlide = ({ children, ...
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
5
|
+
var CarouselSlide = ({ children, className, index, ...rest }) => {
|
|
6
|
+
const { selectedIndex } = useCarousel();
|
|
7
|
+
const isSelected = selectedIndex === index;
|
|
8
|
+
return /* @__PURE__ */ React$1.createElement("div", {
|
|
9
|
+
role: "option",
|
|
10
|
+
"aria-selected": isSelected,
|
|
11
|
+
className: cn("basis-full", "shrink-0", className),
|
|
12
|
+
...rest
|
|
13
|
+
}, /* @__PURE__ */ React$1.createElement("div", { className: "grid place-items-center px-3" }, children));
|
|
14
|
+
};
|
|
8
15
|
//#endregion
|
|
9
16
|
export { CarouselSlide };
|
|
10
17
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CarouselSlide.js","names":[],"sources":["../../../src/components/carousel/CarouselSlide.tsx"],"sourcesContent":["import
|
|
1
|
+
{"version":3,"file":"CarouselSlide.js","names":[],"sources":["../../../src/components/carousel/CarouselSlide.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { cn } from '~/styled'\n\nimport { useCarousel } from './Carousel'\n\nexport const CarouselSlide = ({\n children,\n className,\n index,\n ...rest\n}: React.PropsWithChildren<\n { index: number } & React.HTMLAttributes<HTMLDivElement>\n>) => {\n const { selectedIndex } = useCarousel()\n const isSelected = selectedIndex === index\n\n return (\n <div\n role=\"option\"\n aria-selected={isSelected}\n className={cn('basis-full', 'shrink-0', className)}\n {...rest}\n >\n {/* padding to create the gap between slides */}\n <div className=\"grid place-items-center px-3\">{children}</div>\n </div>\n )\n}\n"],"mappings":";;;;AAMA,IAAa,iBAAiB,EAC5B,UACA,WACA,OACA,GAAG,WAGC;CACJ,MAAM,EAAE,kBAAkB,aAAa;CACvC,MAAM,aAAa,kBAAkB;AAErC,QACE,wBAAA,cAAC,OAAD;EACE,MAAK;EACL,iBAAe;EACf,WAAW,GAAG,cAAc,YAAY,UAAU;EAClD,GAAI;EAIA,EADJ,wBAAA,cAAC,OAAD,EAAK,WAAU,gCAA+C,EAAf,SAAe,CAC1D"}
|
|
@@ -1,7 +1,9 @@
|
|
|
1
|
-
import { Slider as BaseSlider } from 'pure-react-carousel';
|
|
2
1
|
import * as React from 'react';
|
|
3
|
-
|
|
4
|
-
|
|
2
|
+
type CarouselSliderProps = {
|
|
3
|
+
children?: React.ReactNode;
|
|
5
4
|
className?: string;
|
|
6
5
|
overflow?: boolean;
|
|
7
|
-
|
|
6
|
+
tabIndex?: number;
|
|
7
|
+
};
|
|
8
|
+
export declare const CarouselSlider: ({ children, className, overflow, tabIndex, ...rest }: CarouselSliderProps) => React.JSX.Element;
|
|
9
|
+
export {};
|
|
@@ -1,11 +1,18 @@
|
|
|
1
1
|
import { cn } from "../../styled.js";
|
|
2
|
+
import { useCarousel } from "./Carousel.js";
|
|
2
3
|
import * as React$1 from "react";
|
|
3
|
-
import { Slider } from "pure-react-carousel";
|
|
4
4
|
//#region src/components/carousel/CarouselSlider.tsx
|
|
5
|
-
var CarouselSlider = ({ children, className, overflow, ...rest }) =>
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
5
|
+
var CarouselSlider = ({ children, className, overflow, tabIndex = 0, ...rest }) => {
|
|
6
|
+
const { emblaRef } = useCarousel();
|
|
7
|
+
return /* @__PURE__ */ React$1.createElement("div", {
|
|
8
|
+
ref: emblaRef,
|
|
9
|
+
className: cn("ml-[50%]", "-translate-x-1/2", "cursor-grab", overflow ? "overflow-visible" : "overflow-hidden", className),
|
|
10
|
+
role: "listbox",
|
|
11
|
+
"aria-live": "polite",
|
|
12
|
+
tabIndex,
|
|
13
|
+
...rest
|
|
14
|
+
}, /* @__PURE__ */ React$1.createElement("div", { className: "flex" }, children));
|
|
15
|
+
};
|
|
9
16
|
//#endregion
|
|
10
17
|
export { CarouselSlider };
|
|
11
18
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CarouselSlider.js","names":[],"sources":["../../../src/components/carousel/CarouselSlider.tsx"],"sourcesContent":["import
|
|
1
|
+
{"version":3,"file":"CarouselSlider.js","names":[],"sources":["../../../src/components/carousel/CarouselSlider.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { cn } from '~/styled'\n\nimport { useCarousel } from './Carousel'\n\ntype CarouselSliderProps = {\n children?: React.ReactNode\n className?: string\n overflow?: boolean\n tabIndex?: number\n}\n\nexport const CarouselSlider = ({\n children,\n className,\n overflow,\n tabIndex = 0,\n ...rest\n}: CarouselSliderProps) => {\n const { emblaRef } = useCarousel()\n\n return (\n <div\n ref={emblaRef}\n className={cn(\n 'ml-[50%]',\n '-translate-x-1/2',\n 'cursor-grab',\n overflow ? 'overflow-visible' : 'overflow-hidden',\n className\n )}\n role=\"listbox\"\n aria-live=\"polite\"\n tabIndex={tabIndex}\n {...rest}\n >\n <div className=\"flex\">{children}</div>\n </div>\n )\n}\n"],"mappings":";;;;AAaA,IAAa,kBAAkB,EAC7B,UACA,WACA,UACA,WAAW,GACX,GAAG,WACsB;CACzB,MAAM,EAAE,aAAa,aAAa;AAElC,QACE,wBAAA,cAAC,OAAD;EACE,KAAK;EACL,WAAW,GACT,YACA,oBACA,eACA,WAAW,qBAAqB,mBAChC,UACD;EACD,MAAK;EACL,aAAU;EACA;EACV,GAAI;EAGA,EADJ,wBAAA,cAAC,OAAD,EAAK,WAAU,QAAuB,EAAf,SAAe,CAClC"}
|
|
@@ -106,7 +106,7 @@ var DialogContent = ({ size = "sm", children, closeDialogText = "Close dialog",
|
|
|
106
106
|
hasTooltip: false,
|
|
107
107
|
size: "md",
|
|
108
108
|
theme: "neutral",
|
|
109
|
-
className: "top-
|
|
109
|
+
className: "absolute top-4 right-4 size-12"
|
|
110
110
|
}, /* @__PURE__ */ React$1.createElement(Icon, { is: Close })), React$1.Children.map(children, (child) => child?.type !== DialogBackground && child))));
|
|
111
111
|
//#endregion
|
|
112
112
|
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 ],\n sm: [\n 'rounded-md',\n 'size-auto',\n 'max-w-[90vw]',\n 'max-h-[90vh]',\n 'supports-svh:h-auto',\n 'supports-svh:max-h-[90vh]',\n 'w-120'\n ],\n md: [\n 'rounded-md',\n 'size-auto',\n 'max-w-[90vw]',\n 'max-h-[90vh]',\n 'supports-svh:h-auto',\n 'supports-svh:max-h-[90vh]',\n 'w-150'\n ],\n lg: [\n 'rounded-md',\n 'size-auto',\n 'max-w-[90vw]',\n 'max-h-[90vh]',\n 'supports-svh:h-auto',\n 'supports-svh:max-h-[90vh]',\n 'w-200'\n ],\n xl: [\n 'rounded-md',\n 'size-auto',\n 'max-w-[90vw]',\n 'max-h-[90vh]',\n 'supports-svh:h-auto',\n 'supports-svh:max-h-[90vh]',\n 'w-275'\n ],\n fullscreen: [\n 'rounded-none',\n 'w-screen',\n 'h-screen',\n 'max-w-screen',\n 'max-h-screen',\n 'supports-svh:h-svh',\n 'supports-svh:max-h-svh'\n ]\n },\n layout: {\n panel: ['flex', 'flex-col', 'p-0']\n }\n }\n },\n { enabledResponsiveVariants: true }\n)\n\ntype DialogContentProps = React.ComponentProps<typeof StyledDialogContent> & {\n closeDialogText?: string\n showCloseButton?: boolean\n}\n\nexport const DialogContent = ({\n size = 'sm',\n children,\n closeDialogText = 'Close dialog',\n showCloseButton = true,\n ...remainingProps\n}: DialogContentProps) => (\n <Portal>\n <StyledDialogOverlay id={modalOverlayId}>\n {React.Children.map(\n children,\n (child?: React.ReactElement) =>\n child?.type === DialogBackground && child\n )}\n <StyledDialogContent\n size={size}\n aria-label=\"Dialog\"\n onPointerDownOutside={(event) => {\n const element = event.target as HTMLElement\n if (element?.id !== modalOverlayId) {\n event.preventDefault()\n }\n }}\n {...remainingProps}\n >\n {showCloseButton && (\n <ActionIcon\n as={Close}\n label={closeDialogText}\n hasTooltip={false}\n size=\"md\"\n theme=\"neutral\"\n className=\"absolute top-4 right-4 size-12\"\n >\n <Icon is={CloseIcon} />\n </ActionIcon>\n )}\n {React.Children.map(\n children,\n (child?: React.ReactElement) =>\n child?.type !== DialogBackground && child\n )}\n </StyledDialogContent>\n </StyledDialogOverlay>\n </Portal>\n)\n"],"mappings":";;;;;;;;;AAWA,IAAM,iBAAiB;AAEvB,IAAM,sBAAsB,OAAO,SAAS,EAC1C,MAAM,iBACP,CAAC;AAEF,IAAM,sBAAsB,OAC1B,SACA;CACE,MAAM;EAIJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD;CACD,UAAU;EACR,MAAM;GACJ,IAAI;IACF;IACA;IACA;IACA;IACA;IACA;IACA;IACD;GACD,IAAI;IACF;IACA;IACA;IACA;IACA;IACA;IACA;IACD;GACD,IAAI;IACF;IACA;IACA;IACA;IACA;IACA;IACA;IACD;GACD,IAAI;IACF;IACA;IACA;IACA;IACA;IACA;IACA;IACD;GACD,IAAI;IACF;IACA;IACA;IACA;IACA;IACA;IACA;IACD;GACD,YAAY;IACV;IACA;IACA;IACA;IACA;IACA;IACA;IACD;GACF;EACD,QAAQ,EACN,OAAO;GAAC;GAAQ;GAAY;GAAM,EACnC;EACF;CACF,EACD,EAAE,2BAA2B,MAAM,CACpC;AAOD,IAAa,iBAAiB,EAC5B,OAAO,MACP,UACA,kBAAkB,gBAClB,kBAAkB,MAClB,GAAG,qBAEH,wBAAA,cAAC,QAAA,MACC,wBAAA,cAAC,qBAAD,EAAqB,IAAI,gBAmCH,EAlCnB,QAAM,SAAS,IACd,WACC,UACC,OAAO,SAAS,oBAAoB,MACvC,EACD,wBAAA,cAAC,qBAAD;CACQ;CACN,cAAW;CACX,uBAAuB,UAAU;AAE/B,MADgB,MAAM,QACT,OAAO,eAClB,OAAM,gBAAgB;;CAG1B,GAAI;CAmBgB,EAjBnB,mBACC,wBAAA,cAAC,YAAD;CACE,IAAI;CACJ,OAAO;CACP,YAAY;CACZ,MAAK;CACL,OAAM;CACN,WAAU;CAGC,EADX,wBAAA,cAAC,MAAD,EAAM,IAAI,OAAa,CAAA,CACZ,EAEd,QAAM,SAAS,IACd,WACC,UACC,OAAO,SAAS,oBAAoB,MACvC,CACmB,CACF,CACf"}
|
|
@@ -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: [
|
|
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"}
|