@atom-learning/components 6.17.0-beta.0 → 6.17.0-beta.2

package/dist/components/carousel/Carousel.d.ts

@@ -38,9 +38,10 @@ export declare const Carousel: {
     Slide: ({ children, className, index, ...rest }: React.PropsWithChildren<{
         index: number;
     } & React.HTMLAttributes<HTMLDivElement>>) => React.JSX.Element;
-    Slider: ({ children, className, overflow, tabIndex, ...rest }: {
+    Slider: ({ children, className, gap, overflow, tabIndex, ...rest }: {
         children?: React.ReactNode;
         className?: string;
+        gap?: import("./CarouselSlider").TCarouselSlideGap;
         overflow?: boolean;
         tabIndex?: number;
     }) => React.JSX.Element;

package/dist/components/carousel/Carousel.js

@@ -1,8 +1,8 @@
 import { cn } from "../../styled.js";
 import { CarouselArrowNext, CarouselArrowPrevious } from "./CarouselArrows.js";
 import { CarouselPagination } from "./CarouselPagination.js";
-import { CarouselSlide } from "./CarouselSlide.js";
 import { CarouselSlider } from "./CarouselSlider.js";
+import { CarouselSlide } from "./CarouselSlide.js";
 import * as React$1 from "react";
 import useEmblaCarousel from "embla-carousel-react";
 //#region src/components/carousel/Carousel.tsx

package/dist/components/carousel/CarouselSlide.js

@@ -1,16 +1,18 @@
 import { cn } from "../../styled.js";
+import { CarouselSlideGapContext, toSlideGapClass } from "./CarouselSlider.js";
 import { useCarousel } from "./Carousel.js";
 import * as React$1 from "react";
 //#region src/components/carousel/CarouselSlide.tsx
 var CarouselSlide = ({ children, className, index, ...rest }) => {
 	const { selectedIndex } = useCarousel();
+	const gap = React$1.useContext(CarouselSlideGapContext);
 	const isSelected = selectedIndex === index;
 	return /* @__PURE__ */ React$1.createElement("div", {
 		role: "option",
 		"aria-selected": isSelected,
-		className: cn("basis-full", "shrink-0", className),
+		className: cn("min-w-0", "basis-full", "shrink-0", className),
 		...rest
-	}, /* @__PURE__ */ React$1.createElement("div", { className: "grid place-items-center px-3" }, children));
+	}, /* @__PURE__ */ React$1.createElement("div", { className: cn("flex items-center justify-center", toSlideGapClass[gap]) }, children));
 };
 //#endregion
 export { CarouselSlide };

package/dist/components/carousel/CarouselSlide.js.map

@@ -1 +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"}
+{"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'\nimport { CarouselSlideGapContext, toSlideGapClass } from './CarouselSlider'\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 gap = React.useContext(CarouselSlideGapContext)\n  const isSelected = selectedIndex === index\n\n  return (\n    <div\n      role=\"option\"\n      aria-selected={isSelected}\n      // min-w-0 so basis-full wins over the content's min-content size and\n      // the slide never outgrows the slider viewport\n      className={cn('min-w-0', 'basis-full', 'shrink-0', className)}\n      {...rest}\n    >\n      {/* padding to create the gap between slides; gap=\"none\" for full-bleed */}\n      <div\n        className={cn('flex items-center justify-center', toSlideGapClass[gap])}\n      >\n        {children}\n      </div>\n    </div>\n  )\n}\n"],"mappings":";;;;;AAOA,IAAa,iBAAiB,EAC5B,UACA,WACA,OACA,GAAG,WAGC;CACJ,MAAM,EAAE,kBAAkB,aAAa;CACvC,MAAM,MAAM,QAAM,WAAW,wBAAwB;CACrD,MAAM,aAAa,kBAAkB;AAErC,QACE,wBAAA,cAAC,OAAD;EACE,MAAK;EACL,iBAAe;EAGf,WAAW,GAAG,WAAW,cAAc,YAAY,UAAU;EAC7D,GAAI;EAQA,EALJ,wBAAA,cAAC,OAAD,EACE,WAAW,GAAG,oCAAoC,gBAAgB,KAAK,EAGnE,EADH,SACG,CACF"}

package/dist/components/carousel/CarouselSlider.d.ts

@@ -1,9 +1,13 @@
 import * as React from 'react';
+export type TCarouselSlideGap = 'none' | 0 | 1 | 2 | 3 | 4;
+export declare const toSlideGapClass: Record<TCarouselSlideGap, string>;
+export declare const CarouselSlideGapContext: React.Context<TCarouselSlideGap>;
 type CarouselSliderProps = {
     children?: React.ReactNode;
     className?: string;
+    gap?: TCarouselSlideGap;
     overflow?: boolean;
     tabIndex?: number;
 };
-export declare const CarouselSlider: ({ children, className, overflow, tabIndex, ...rest }: CarouselSliderProps) => React.JSX.Element;
+export declare const CarouselSlider: ({ children, className, gap, overflow, tabIndex, ...rest }: CarouselSliderProps) => React.JSX.Element;
 export {};

package/dist/components/carousel/CarouselSlider.js

@@ -2,7 +2,16 @@ import { cn } from "../../styled.js";
 import { useCarousel } from "./Carousel.js";
 import * as React$1 from "react";
 //#region src/components/carousel/CarouselSlider.tsx
-var CarouselSlider = ({ children, className, overflow, tabIndex = 0, ...rest }) => {
+var toSlideGapClass = {
+	none: "",
+	0: "px-0.5",
+	1: "px-1",
+	2: "px-2",
+	3: "px-3",
+	4: "px-4"
+};
+var CarouselSlideGapContext = React$1.createContext(3);
+var CarouselSlider = ({ children, className, gap = 3, overflow, tabIndex = 0, ...rest }) => {
 	const { emblaRef } = useCarousel();
 	return /* @__PURE__ */ React$1.createElement("div", {
 		ref: emblaRef,
@@ -11,9 +20,9 @@ var CarouselSlider = ({ children, className, overflow, tabIndex = 0, ...rest })
 		"aria-live": "polite",
 		tabIndex,
 		...rest
-	}, /* @__PURE__ */ React$1.createElement("div", { className: "flex" }, children));
+	}, /* @__PURE__ */ React$1.createElement("div", { className: "flex" }, /* @__PURE__ */ React$1.createElement(CarouselSlideGapContext.Provider, { value: gap }, children)));
 };
 //#endregion
-export { CarouselSlider };
+export { CarouselSlideGapContext, CarouselSlider, toSlideGapClass };
 
 //# sourceMappingURL=CarouselSlider.js.map

package/dist/components/carousel/CarouselSlider.js.map

@@ -1 +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"}
+{"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\nexport type TCarouselSlideGap = 'none' | 0 | 1 | 2 | 3 | 4\n\n// Horizontal padding applied around each slide's content, on the same\n// spacing scale as Flex/ToggleGroup's gap. 'none' renders full-bleed slides.\nexport const toSlideGapClass: Record<TCarouselSlideGap, string> = {\n  none: '',\n  0: 'px-0.5',\n  1: 'px-1',\n  2: 'px-2',\n  3: 'px-3',\n  4: 'px-4'\n}\n\n// Slides read the gap via context so it is configured once on the slider.\nexport const CarouselSlideGapContext = React.createContext<TCarouselSlideGap>(3)\n\ntype CarouselSliderProps = {\n  children?: React.ReactNode\n  className?: string\n  gap?: TCarouselSlideGap\n  overflow?: boolean\n  tabIndex?: number\n}\n\nexport const CarouselSlider = ({\n  children,\n  className,\n  gap = 3,\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\">\n        <CarouselSlideGapContext.Provider value={gap}>\n          {children}\n        </CarouselSlideGapContext.Provider>\n      </div>\n    </div>\n  )\n}\n"],"mappings":";;;;AAUA,IAAa,kBAAqD;CAChE,MAAM;CACN,GAAG;CACH,GAAG;CACH,GAAG;CACH,GAAG;CACH,GAAG;CACJ;AAGD,IAAa,0BAA0B,QAAM,cAAiC,EAAE;AAUhF,IAAa,kBAAkB,EAC7B,UACA,WACA,MAAM,GACN,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;EAOA,EALJ,wBAAA,cAAC,OAAD,EAAK,WAAU,QAIT,EAHJ,wBAAA,cAAC,wBAAwB,UAAzB,EAAkC,OAAO,KAEN,EADhC,SACgC,CAC/B,CACF"}