@atom-learning/components 8.0.2 → 9.0.0-beta.0

package/dist/components/carousel/Carousel.js

@@ -8,7 +8,7 @@ import { jsx } from "react/jsx-runtime";
 import useEmblaCarousel from "embla-carousel-react";
 //#region src/components/carousel/Carousel.tsx
 var CarouselContext = React$1.createContext(null);
-var CarouselComponent = ({ children, currentSlide = 0, ...props }) => {
+var CarouselComponent = ({ children, currentSlide = 0, className, ...rest }) => {
 	const [emblaRef, emblaApi] = useEmblaCarousel({
 		startIndex: currentSlide,
 		align: "center"
@@ -74,7 +74,6 @@ var CarouselComponent = ({ children, currentSlide = 0, ...props }) => {
 		scrollNext,
 		scrollTo
 	]);
-	const { className, ...rest } = props;
 	return /* @__PURE__ */ jsx("div", {
 		className: cn("relative", "w-full", className),
 		...rest,
@@ -92,7 +91,7 @@ var useCarousel = () => {
 		currentSlide: context.selectedIndex
 	};
 };
-var Carousel = Object.assign(CarouselComponent, {
+var Carousel = /* @__PURE__ */ Object.assign(CarouselComponent, {
 	ArrowNext: CarouselArrowNext,
 	ArrowPrevious: CarouselArrowPrevious,
 	Pagination: CarouselPagination,
@@ -101,6 +100,6 @@ var Carousel = Object.assign(CarouselComponent, {
 });
 CarouselComponent.displayName = "Carousel";
 //#endregion
-export { Carousel, useCarousel };
+export { Carousel, CarouselComponent, useCarousel };
 
 //# sourceMappingURL=Carousel.js.map

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

@@ -1 +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,oBAAC,OAAD;EAAK,WAAW,GAAG,YAAY,UAAU,UAAU;EAAE,GAAI;YACvD,oBAAC,gBAAgB,UAAjB;GAA0B,OAAO;GAC9B;GACwB,CAAA;EACvB,CAAA;;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"}
+{"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'\nimport { CSSWrapper } from '../../utilities/css-wrapper/CSSWrapper'\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  className,\n  ...rest\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  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 = /* @__PURE__ */ 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,IAAI;AAM7E,IAAa,qBAAqB,EAChC,UACA,eAAe,GACf,WACA,GAAG,WAGC;CACJ,MAAM,CAAC,UAAU,YAAY,iBAAiB;EAC5C,YAAY;EACZ,OAAO;CACT,CAAC;CAED,MAAM,CAAC,eAAe,oBAAoB,QAAM,SAAS,YAAY;CACrE,MAAM,CAAC,aAAa,kBAAkB,QAAM,SAAmB,CAAC,CAAC;CACjE,MAAM,CAAC,eAAe,oBAAoB,QAAM,SAAS,KAAK;CAC9D,MAAM,CAAC,eAAe,oBAAoB,QAAM,SAAS,KAAK;CAE9D,MAAM,aAAa,QAAM,kBAAkB;EACzC,UAAU,WAAW;CACvB,GAAG,CAAC,QAAQ,CAAC;CAEb,MAAM,aAAa,QAAM,kBAAkB;EACzC,UAAU,WAAW;CACvB,GAAG,CAAC,QAAQ,CAAC;CAEb,MAAM,WAAW,QAAM,aACpB,UAAkB;EACjB,UAAU,SAAS,KAAK;CAC1B,GACA,CAAC,QAAQ,CACX;CAEA,MAAM,WAAW,QAAM,kBAAkB;EACvC,IAAI,CAAC,UAAU;EACf,iBAAiB,SAAS,mBAAmB,CAAC;EAC9C,iBAAiB,SAAS,cAAc,CAAC;EACzC,iBAAiB,SAAS,cAAc,CAAC;CAC3C,GAAG,CAAC,QAAQ,CAAC;CAEb,MAAM,SAAS,QAAM,kBAAkB;EACrC,IAAI,CAAC,UAAU;EACf,eAAe,SAAS,eAAe,CAAC;CAC1C,GAAG,CAAC,QAAQ,CAAC;CAEb,QAAM,gBAAgB;EACpB,IAAI,CAAC,UAAU;EAEf,OAAO;EACP,SAAS;EAET,SAAS,GAAG,UAAU,MAAM;EAC5B,SAAS,GAAG,UAAU,QAAQ;EAC9B,SAAS,GAAG,UAAU,QAAQ;EAE9B,aAAa;GACX,SAAS,IAAI,UAAU,MAAM;GAC7B,SAAS,IAAI,UAAU,QAAQ;GAC/B,SAAS,IAAI,UAAU,QAAQ;EACjC;CACF,GAAG;EAAC;EAAU;EAAQ;CAAQ,CAAC;CAE/B,MAAM,eAAe,QAAM,eAClB;EACL;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,IACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CACF;CAEA,OACE,oBAAC,OAAD;EAAK,WAAW,GAAG,YAAY,UAAU,SAAS;EAAG,GAAI;YACvD,oBAAC,gBAAgB,UAAjB;GAA0B,OAAO;GAC9B;EACuB,CAAA;CACvB,CAAA;AAET;AAEA,IAAa,oBAAoB;CAC/B,MAAM,UAAU,QAAM,WAAW,eAAe;CAChD,IAAI,CAAC,SACH,MAAM,IAAI,MAAM,4CAA4C;CAG9D,OAAO;EACL,GAAG;EAEH,cAAc,QAAQ;CACxB;AACF;AAEA,IAAa,WAA2B,uBAAO,OAAO,mBAAmB;CACvE,WAAW;CACX,eAAe;CACf,YAAY;CACZ,OAAO;CACP,QAAQ;AACV,CAAC;AAED,kBAAkB,cAAc"}

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

@@ -1,7 +1,5 @@
 import * as React from 'react';
-declare const ArrowButton: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, never> & {
-    as?: React.ElementType;
-}>;
+declare const ArrowButton: import("../..").PolymorphicComponent<"button", unknown>;
 export declare const CarouselArrowPrevious: (props: React.ComponentProps<typeof ArrowButton>) => React.JSX.Element;
 export declare const CarouselArrowNext: (props: React.ComponentProps<typeof ArrowButton>) => React.JSX.Element;
 export {};

package/dist/components/carousel/CarouselArrows.js

@@ -5,7 +5,7 @@ import "react";
 import { jsx } from "react/jsx-runtime";
 import { ChevronLeft, ChevronRight } from "@atom-learning/icons";
 //#region src/components/carousel/CarouselArrows.tsx
-var ArrowButton = styled("button", { base: [
+var ArrowButton = /* @__PURE__ */ styled("button", { base: [
 	"items-center",
 	"text-primary-800",
 	"cursor-pointer",

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

@@ -1 +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,oBAAC,aAAD;EACE,MAAK;EACL,SAAS;EACT,UAAU,CAAC;EACX,cAAW;EACX,GAAI;YAEJ,oBAAC,MAAD,EAAM,IAAI,aAAe,CAAA;EACb,CAAA;;AAIlB,IAAa,qBACX,UACG;CACH,MAAM,EAAE,YAAY,kBAAkB,aAAa;AAEnD,QACE,oBAAC,aAAD;EACE,MAAK;EACL,SAAS;EACT,UAAU,CAAC;EACX,cAAW;EACX,GAAI;YAEJ,oBAAC,MAAD,EAAM,IAAI,cAAgB,CAAA;EACd,CAAA"}
+{"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 { styled } from '../../styled'\nimport { Icon } from '../icon/Icon'\nimport { useCarousel } from './Carousel'\n\nconst ArrowButton = /* @__PURE__ */ 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":";;;;;;;AAOA,IAAM,cAA8B,uBAAO,UAAU,EACnD,MAAM;CACJ;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF,EACF,CAAC;AAED,IAAa,yBACX,UACG;CACH,MAAM,EAAE,YAAY,kBAAkB,YAAY;CAElD,OACE,oBAAC,aAAD;EACE,MAAK;EACL,SAAS;EACT,UAAU,CAAC;EACX,cAAW;EACX,GAAI;YAEJ,oBAAC,MAAD,EAAM,IAAI,YAAc,CAAA;CACb,CAAA;AAEjB;AAEA,IAAa,qBACX,UACG;CACH,MAAM,EAAE,YAAY,kBAAkB,YAAY;CAElD,OACE,oBAAC,aAAD;EACE,MAAK;EACL,SAAS;EACT,UAAU,CAAC;EACX,cAAW;EACX,GAAI;YAEJ,oBAAC,MAAD,EAAM,IAAI,aAAe,CAAA;CACd,CAAA;AAEjB"}

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

@@ -1 +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,oBAAC,OAAD;EAAK,WAAW,GAAG,QAAQ,kBAAkB,UAAU;EAAE,GAAI;YAC1D,KAAK,KAAK,UACT,oBAAC,KAAD;GAEE,MAAK;GACL,eAAe,SAAS,MAAM;GAC9B,UAAU,UAAU;GACpB,cAAW;GACX,EALK,MAKL,CACF;EACE,CAAA"}
+{"version":3,"file":"CarouselPagination.js","names":[],"sources":["../../../src/components/carousel/CarouselPagination.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled, cn } from '../../styled'\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":";;;;;AAKA,IAAM,MAAM,OAAO,UAAU,EAC3B,MAAM;CACJ;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF,EACF,CAAC;AAED,IAAa,sBAAsB,EACjC,WACA,GAAG,WACuC;CAC1C,MAAM,EAAE,aAAa,eAAe,aAAa,YAAY;CAE7D,MAAM,OAAO,MAAM,KAAK,EAAE,QAAQ,YAAY,OAAO,IAAI,GAAG,MAAM,CAAC;CAEnE,OACE,oBAAC,OAAD;EAAK,WAAW,GAAG,QAAQ,kBAAkB,SAAS;EAAG,GAAI;YAC1D,KAAK,KAAK,UACT,oBAAC,KAAD;GAEE,MAAK;GACL,eAAe,SAAS,KAAK;GAC7B,UAAU,UAAU;GACpB,cAAW;EACZ,GALM,KAKN,CACF;CACE,CAAA;AAET"}

package/dist/components/carousel/CarouselSlide.js

@@ -7,10 +7,9 @@ import { jsx } from "react/jsx-runtime";
 var CarouselSlide = ({ children, className, index, ...rest }) => {
 	const { selectedIndex } = useCarousel();
 	const gap = React$1.useContext(CarouselSlideGapContext);
-	const isSelected = selectedIndex === index;
 	return /* @__PURE__ */ jsx("div", {
 		role: "option",
-		"aria-selected": isSelected,
+		"aria-selected": selectedIndex === index,
 		className: cn("min-w-0", "basis-full", "shrink-0", className),
 		...rest,
 		children: /* @__PURE__ */ jsx("div", {

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'\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,oBAAC,OAAD;EACE,MAAK;EACL,iBAAe;EAGf,WAAW,GAAG,WAAW,cAAc,YAAY,UAAU;EAC7D,GAAI;YAGJ,oBAAC,OAAD;GACE,WAAW,GAAG,oCAAoC,gBAAgB,KAAK;GAEtE;GACG,CAAA;EACF,CAAA"}
+{"version":3,"file":"CarouselSlide.js","names":[],"sources":["../../../src/components/carousel/CarouselSlide.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { cn } from '../../styled'\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":";;;;;;AAMA,IAAa,iBAAiB,EAC5B,UACA,WACA,OACA,GAAG,WAGC;CACJ,MAAM,EAAE,kBAAkB,YAAY;CACtC,MAAM,MAAM,QAAM,WAAW,uBAAuB;CAGpD,OACE,oBAAC,OAAD;EACE,MAAK;EACL,iBALe,kBAAkB;EAQjC,WAAW,GAAG,WAAW,cAAc,YAAY,SAAS;EAC5D,GAAI;YAGJ,oBAAC,OAAD;GACE,WAAW,GAAG,oCAAoC,gBAAgB,IAAI;GAErE;EACE,CAAA;CACF,CAAA;AAET"}

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

@@ -1,11 +1,11 @@
 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>;
+export type CarouselSlideGap = 'none' | 0 | 1 | 2 | 3 | 4;
+export declare const toSlideGapClass: Record<CarouselSlideGap, string>;
+export declare const CarouselSlideGapContext: React.Context<CarouselSlideGap>;
 type CarouselSliderProps = {
     children?: React.ReactNode;
     className?: string;
-    gap?: TCarouselSlideGap;
+    gap?: CarouselSlideGap;
     overflow?: boolean;
     tabIndex?: number;
 };

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\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,oBAAC,OAAD;EACE,KAAK;EACL,WAAW,GACT,YACA,oBACA,eACA,WAAW,qBAAqB,mBAChC,UACD;EACD,MAAK;EACL,aAAU;EACA;EACV,GAAI;YAEJ,oBAAC,OAAD;GAAK,WAAU;aACb,oBAAC,wBAAwB,UAAzB;IAAkC,OAAO;IACtC;IACgC,CAAA;GAC/B,CAAA;EACF,CAAA"}
+{"version":3,"file":"CarouselSlider.js","names":[],"sources":["../../../src/components/carousel/CarouselSlider.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { cn } from '../../styled'\nimport { useCarousel } from './Carousel'\n\nexport type CarouselSlideGap = '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<CarouselSlideGap, 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<CarouselSlideGap>(3)\n\ntype CarouselSliderProps = {\n  children?: React.ReactNode\n  className?: string\n  gap?: CarouselSlideGap\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":";;;;;AASA,IAAa,kBAAoD;CAC/D,MAAM;CACN,GAAG;CACH,GAAG;CACH,GAAG;CACH,GAAG;CACH,GAAG;AACL;AAGA,IAAa,0BAA0B,QAAM,cAAgC,CAAC;AAU9E,IAAa,kBAAkB,EAC7B,UACA,WACA,MAAM,GACN,UACA,WAAW,GACX,GAAG,WACsB;CACzB,MAAM,EAAE,aAAa,YAAY;CAEjC,OACE,oBAAC,OAAD;EACE,KAAK;EACL,WAAW,GACT,YACA,oBACA,eACA,WAAW,qBAAqB,mBAChC,SACF;EACA,MAAK;EACL,aAAU;EACA;EACV,GAAI;YAEJ,oBAAC,OAAD;GAAK,WAAU;aACb,oBAAC,wBAAwB,UAAzB;IAAkC,OAAO;IACtC;GAC+B,CAAA;EAC/B,CAAA;CACF,CAAA;AAET"}

package/dist/components/checkbox/Checkbox.d.ts

@@ -1,8 +1,8 @@
 import * as RadixCheckbox from '@radix-ui/react-checkbox';
 import * as React from 'react';
-export declare const Checkbox: React.ForwardRefExoticComponent<Omit<Omit<RadixCheckbox.CheckboxProps & React.RefAttributes<HTMLButtonElement>, "size" | "state"> & {
+declare const StyledCheckbox: import("../..").PolymorphicComponent<React.ForwardRefExoticComponent<RadixCheckbox.CheckboxProps & React.RefAttributes<HTMLButtonElement>>, {
     state?: "error" | undefined;
-    size?: "md" | "lg" | undefined;
-} & {
-    as?: React.ElementType;
-}, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+    size?: "lg" | "md" | undefined;
+}>;
+export declare const Checkbox: ({ ref, size, checked, ...rest }: React.ComponentProps<typeof StyledCheckbox>) => React.JSX.Element;
+export {};

package/dist/components/checkbox/Checkbox.js

@@ -62,7 +62,7 @@ var toIconSize = {
 	md: "sm",
 	lg: "sm"
 };
-var Checkbox = React$1.forwardRef(({ size = "md", checked, ...rest }, ref) => {
+var Checkbox = ({ ref, size = "md", checked, ...rest }) => {
 	const iconSize = React$1.useMemo(() => overrideStyledVariantValue(size, (s) => toIconSize[s]), [size]);
 	return /* @__PURE__ */ jsx("div", {
 		className: "relative z-1",
@@ -81,8 +81,7 @@ var Checkbox = React$1.forwardRef(({ size = "md", checked, ...rest }, ref) => {
 			})]
 		})
 	});
-});
-Checkbox.displayName = "Checkbox";
+};
 //#endregion
 export { Checkbox };
 

package/dist/components/checkbox/Checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.js","names":[],"sources":["../../../src/components/checkbox/Checkbox.tsx"],"sourcesContent":["import { Minus, Ok } from '@atom-learning/icons'\nimport * as RadixCheckbox from '@radix-ui/react-checkbox'\nimport * as React from 'react'\n\nimport { styled } from '~/styled'\nimport { overrideStyledVariantValue } from '~/utilities/override-styled-variant-value/overrideStyledVariantValue'\n\nimport { Icon } from '../icon/Icon'\n\nconst StyledCheckbox = styled(RadixCheckbox.Root, {\n  base: [\n    'appearance-none',\n    'relative',\n    'bg-transparent',\n    'border',\n    'border-grey-800',\n    'rounded-[3px]',\n    'text-white',\n    'bg-white',\n    'cursor-pointer',\n    'size-4',\n    'p-0',\n    'flex',\n    'items-center',\n    'justify-center',\n    'transition-all',\n    'duration-50',\n    'ease-out',\n    'shrink-0',\n    'not-disabled:before:-inset-2',\n    'not-disabled:before:-z-1',\n    'not-disabled:before:absolute',\n    'not-disabled:before:bg-primary-300',\n    \"not-disabled:before:content-['']\",\n    'not-disabled:before:duration-125',\n    'not-disabled:before:ease-in-out',\n    'not-disabled:before:opacity-0',\n    'not-disabled:before:rounded-[50%]',\n    'not-disabled:before:scale-0',\n    'not-disabled:before:transition-[opacity,scale]',\n    'not-disabled:hover:before:opacity-100',\n    'not-disabled:hover:before:scale-100',\n    'data-[state=checked]:bg-primary-800',\n    'data-[state=checked]:border-primary-800',\n    'data-[state=indeterminate]:bg-primary-800',\n    'data-[state=indeterminate]:border-primary-800',\n    'focus:-outline-offset-1',\n    'focus:outline-2',\n    'focus:outline-primary-800',\n    'focus:outline-solid',\n    'disabled:cursor-not-allowed',\n    'disabled:opacity-30'\n  ],\n  variants: {\n    state: {\n      error: ['border-danger']\n    },\n    size: {\n      md: ['size-4'],\n      lg: ['mt-px', 'size-6']\n    }\n  }\n})\n\nconst toIconSize = {\n  md: 'sm',\n  lg: 'sm'\n}\n\nexport const Checkbox = React.forwardRef<\n  HTMLButtonElement,\n  React.ComponentProps<typeof StyledCheckbox>\n>(({ size = 'md', checked, ...rest }, ref) => {\n  const iconSize = React.useMemo(\n    () => overrideStyledVariantValue(size, (s) => toIconSize[s]),\n    [size]\n  )\n\n  return (\n    <div className=\"relative z-1\">\n      <StyledCheckbox ref={ref} checked={checked} size={size} {...rest}>\n        <div className=\"absolute -inset-3 opacity-50\" />\n        <RadixCheckbox.Indicator asChild>\n          <Icon\n            is={checked === 'indeterminate' ? Minus : Ok}\n            size={iconSize}\n            className=\"stroke-3\"\n          />\n        </RadixCheckbox.Indicator>\n      </StyledCheckbox>\n    </div>\n  )\n})\n\nCheckbox.displayName = 'Checkbox'\n"],"mappings":";;;;;;;;AASA,IAAM,iBAAiB,OAAO,cAAc,MAAM;CAChD,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD;CACD,UAAU;EACR,OAAO,EACL,OAAO,CAAC,gBAAgB,EACzB;EACD,MAAM;GACJ,IAAI,CAAC,SAAS;GACd,IAAI,CAAC,SAAS,SAAS;GACxB;EACF;CACF,CAAC;AAEF,IAAM,aAAa;CACjB,IAAI;CACJ,IAAI;CACL;AAED,IAAa,WAAW,QAAM,YAG3B,EAAE,OAAO,MAAM,SAAS,GAAG,QAAQ,QAAQ;CAC5C,MAAM,WAAW,QAAM,cACf,2BAA2B,OAAO,MAAM,WAAW,GAAG,EAC5D,CAAC,KAAK,CACP;AAED,QACE,oBAAC,OAAD;EAAK,WAAU;YACb,qBAAC,gBAAD;GAAqB;GAAc;GAAe;GAAM,GAAI;aAA5D,CACE,oBAAC,OAAD,EAAK,WAAU,gCAAiC,CAAA,EAChD,oBAAC,cAAc,WAAf;IAAyB,SAAA;cACvB,oBAAC,MAAD;KACE,IAAI,YAAY,kBAAkB,QAAQ;KAC1C,MAAM;KACN,WAAU;KACV,CAAA;IACsB,CAAA,CACX;;EACb,CAAA;EAER;AAEF,SAAS,cAAc"}
+{"version":3,"file":"Checkbox.js","names":[],"sources":["../../../src/components/checkbox/Checkbox.tsx"],"sourcesContent":["import { Minus, Ok } from '@atom-learning/icons'\nimport * as RadixCheckbox from '@radix-ui/react-checkbox'\nimport * as React from 'react'\n\nimport { styled } from '../../styled'\nimport { overrideStyledVariantValue } from '../../utilities/override-styled-variant-value/overrideStyledVariantValue'\nimport { Icon } from '../icon/Icon'\n\nconst StyledCheckbox = styled(RadixCheckbox.Root, {\n  base: [\n    'appearance-none',\n    'relative',\n    'bg-transparent',\n    'border',\n    'border-grey-800',\n    'rounded-[3px]',\n    'text-white',\n    'bg-white',\n    'cursor-pointer',\n    'size-4',\n    'p-0',\n    'flex',\n    'items-center',\n    'justify-center',\n    'transition-all',\n    'duration-50',\n    'ease-out',\n    'shrink-0',\n    'not-disabled:before:-inset-2',\n    'not-disabled:before:-z-1',\n    'not-disabled:before:absolute',\n    'not-disabled:before:bg-primary-300',\n    \"not-disabled:before:content-['']\",\n    'not-disabled:before:duration-125',\n    'not-disabled:before:ease-in-out',\n    'not-disabled:before:opacity-0',\n    'not-disabled:before:rounded-[50%]',\n    'not-disabled:before:scale-0',\n    'not-disabled:before:transition-[opacity,scale]',\n    'not-disabled:hover:before:opacity-100',\n    'not-disabled:hover:before:scale-100',\n    'data-[state=checked]:bg-primary-800',\n    'data-[state=checked]:border-primary-800',\n    'data-[state=indeterminate]:bg-primary-800',\n    'data-[state=indeterminate]:border-primary-800',\n    'focus:-outline-offset-1',\n    'focus:outline-2',\n    'focus:outline-primary-800',\n    'focus:outline-solid',\n    'disabled:cursor-not-allowed',\n    'disabled:opacity-30'\n  ],\n  variants: {\n    state: {\n      error: ['border-danger']\n    },\n    size: {\n      md: ['size-4'],\n      lg: ['mt-px', 'size-6']\n    }\n  }\n})\n\nconst toIconSize = {\n  md: 'sm',\n  lg: 'sm'\n}\n\nexport const Checkbox = ({\n  ref,\n  size = 'md',\n  checked,\n  ...rest\n}: React.ComponentProps<typeof StyledCheckbox>) => {\n  const iconSize = React.useMemo(\n    () => overrideStyledVariantValue(size, (s) => toIconSize[s]),\n    [size]\n  )\n\n  return (\n    <div className=\"relative z-1\">\n      <StyledCheckbox ref={ref} checked={checked} size={size} {...rest}>\n        <div className=\"absolute -inset-3 opacity-50\" />\n        <RadixCheckbox.Indicator asChild>\n          <Icon\n            is={checked === 'indeterminate' ? Minus : Ok}\n            size={iconSize}\n            className=\"stroke-3\"\n          />\n        </RadixCheckbox.Indicator>\n      </StyledCheckbox>\n    </div>\n  )\n}\n"],"mappings":";;;;;;;;AAQA,IAAM,iBAAiB,OAAO,cAAc,MAAM;CAChD,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF;CACA,UAAU;EACR,OAAO,EACL,OAAO,CAAC,eAAe,EACzB;EACA,MAAM;GACJ,IAAI,CAAC,QAAQ;GACb,IAAI,CAAC,SAAS,QAAQ;EACxB;CACF;AACF,CAAC;AAED,IAAM,aAAa;CACjB,IAAI;CACJ,IAAI;AACN;AAEA,IAAa,YAAY,EACvB,KACA,OAAO,MACP,SACA,GAAG,WAC8C;CACjD,MAAM,WAAW,QAAM,cACf,2BAA2B,OAAO,MAAM,WAAW,EAAE,GAC3D,CAAC,IAAI,CACP;CAEA,OACE,oBAAC,OAAD;EAAK,WAAU;YACb,qBAAC,gBAAD;GAAqB;GAAc;GAAe;GAAM,GAAI;aAA5D,CACE,oBAAC,OAAD,EAAK,WAAU,+BAAgC,CAAA,GAC/C,oBAAC,cAAc,WAAf;IAAyB,SAAA;cACvB,oBAAC,MAAD;KACE,IAAI,YAAY,kBAAkB,QAAQ;KAC1C,MAAM;KACN,WAAU;IACX,CAAA;GACsB,CAAA,CACX;;CACb,CAAA;AAET"}

package/dist/components/checkbox-field/CheckboxField.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
-import { Checkbox } from '../../components/checkbox/Checkbox';
-import { FieldElementWrapperProps } from '../../components/field-wrapper/FieldWrapper';
-export declare const CheckboxField: {
-    ({ className, label, name, validation, description, defaultChecked, checked, onCheckedChange, ...remainingProps }: React.ComponentProps<typeof Checkbox> & FieldElementWrapperProps): React.JSX.Element;
-    displayName: string;
-};
+import { Checkbox } from '../checkbox/Checkbox';
+import type { FieldElementWrapperProps } from '../field-wrapper/FieldWrapper';
+export declare function CheckboxField({ className, label, name, validation, description, defaultChecked, checked, onCheckedChange, ...rest }: React.ComponentProps<typeof Checkbox> & FieldElementWrapperProps): React.JSX.Element;
+export declare namespace CheckboxField {
+    var displayName: string;
+}

package/dist/components/checkbox-field/CheckboxField.js

@@ -5,12 +5,7 @@ import * as React$1 from "react";
 import { jsx } from "react/jsx-runtime";
 import { useController, useFormContext } from "react-hook-form";
 //#region src/components/checkbox-field/CheckboxField.tsx
-var CheckboxValue = /* @__PURE__ */ function(CheckboxValue) {
-	CheckboxValue["ON"] = "on";
-	CheckboxValue["OFF"] = "off";
-	return CheckboxValue;
-}(CheckboxValue || {});
-var CheckboxField = ({ className, label, name, validation, description, defaultChecked = false, checked, onCheckedChange, ...remainingProps }) => {
+var CheckboxField = ({ className, label, name, validation, description, defaultChecked = false, checked, onCheckedChange, ...rest }) => {
 	const { control } = useFormContext();
 	const { error } = useFieldError(name);
 	const { field: { ref, onChange, value: innerChecked, name: innerName } } = useController({
@@ -31,12 +26,12 @@ var CheckboxField = ({ className, label, name, validation, description, defaultC
 		children: /* @__PURE__ */ jsx(Checkbox, {
 			ref,
 			name: innerName,
-			...remainingProps,
+			...rest,
 			onCheckedChange: (newChecked) => {
 				onChange(newChecked);
 				onCheckedChange?.(newChecked);
 			},
-			value: innerChecked ? CheckboxValue.ON : CheckboxValue.OFF,
+			value: innerChecked ? "on" : "off",
 			checked: innerChecked,
 			...error && { state: "error" }
 		})

package/dist/components/checkbox-field/CheckboxField.js.map

@@ -1 +1 @@
-{"version":3,"file":"CheckboxField.js","names":[],"sources":["../../../src/components/checkbox-field/CheckboxField.tsx"],"sourcesContent":["import * as React from 'react'\nimport { useController, useFormContext } from 'react-hook-form'\n\nimport { Checkbox } from '~/components/checkbox/Checkbox'\nimport { FieldElementWrapperProps } from '~/components/field-wrapper/FieldWrapper'\nimport { InlineFieldWrapper } from '~/components/field-wrapper/InlineFieldWrapper'\nimport { useFieldError } from '~/components/form/useFieldError'\n\nenum CheckboxValue {\n  ON = 'on',\n  OFF = 'off'\n}\n\nexport const CheckboxField = ({\n  className,\n  label,\n  name,\n  validation,\n  description,\n  defaultChecked = false,\n  checked,\n  onCheckedChange,\n  ...remainingProps\n}: React.ComponentProps<typeof Checkbox> & FieldElementWrapperProps) => {\n  const { control } = useFormContext()\n  const { error } = useFieldError(name)\n  const {\n    field: { ref, onChange, value: innerChecked, name: innerName }\n  } = useController({\n    name,\n    control,\n    rules: validation,\n    defaultValue: defaultChecked\n  })\n\n  React.useEffect(() => {\n    // Update the react-hook-form inner checked to match what is passed in.\n    if (typeof checked !== 'undefined') onChange(checked)\n  }, [checked])\n\n  return (\n    <InlineFieldWrapper\n      className={className}\n      description={description}\n      error={error}\n      label={label}\n      required={Boolean(validation?.required)}\n    >\n      <Checkbox\n        ref={ref}\n        name={innerName}\n        {...remainingProps}\n        onCheckedChange={(newChecked) => {\n          onChange(newChecked)\n          onCheckedChange?.(newChecked)\n        }}\n        value={innerChecked ? CheckboxValue.ON : CheckboxValue.OFF}\n        checked={innerChecked}\n        {...(error && { state: 'error' })}\n      />\n    </InlineFieldWrapper>\n  )\n}\n\nCheckboxField.displayName = 'CheckboxField'\n"],"mappings":";;;;;;;AAQA,IAAK,gBAAL,yBAAA,eAAA;AACE,eAAA,QAAA;AACA,eAAA,SAAA;;EAFG,iBAAA,EAAA,CAGJ;AAED,IAAa,iBAAiB,EAC5B,WACA,OACA,MACA,YACA,aACA,iBAAiB,OACjB,SACA,iBACA,GAAG,qBACmE;CACtE,MAAM,EAAE,YAAY,gBAAgB;CACpC,MAAM,EAAE,UAAU,cAAc,KAAK;CACrC,MAAM,EACJ,OAAO,EAAE,KAAK,UAAU,OAAO,cAAc,MAAM,gBACjD,cAAc;EAChB;EACA;EACA,OAAO;EACP,cAAc;EACf,CAAC;AAEF,SAAM,gBAAgB;AAEpB,MAAI,OAAO,YAAY,YAAa,UAAS,QAAQ;IACpD,CAAC,QAAQ,CAAC;AAEb,QACE,oBAAC,oBAAD;EACa;EACE;EACN;EACA;EACP,UAAU,QAAQ,YAAY,SAAS;YAEvC,oBAAC,UAAD;GACO;GACL,MAAM;GACN,GAAI;GACJ,kBAAkB,eAAe;AAC/B,aAAS,WAAW;AACpB,sBAAkB,WAAW;;GAE/B,OAAO,eAAe,cAAc,KAAK,cAAc;GACvD,SAAS;GACT,GAAK,SAAS,EAAE,OAAO,SAAS;GAChC,CAAA;EACiB,CAAA;;AAIzB,cAAc,cAAc"}
+{"version":3,"file":"CheckboxField.js","names":[],"sources":["../../../src/components/checkbox-field/CheckboxField.tsx"],"sourcesContent":["import * as React from 'react'\nimport { useController, useFormContext } from 'react-hook-form'\n\nimport { Checkbox } from '../checkbox/Checkbox'\nimport type { FieldElementWrapperProps } from '../field-wrapper/FieldWrapper'\nimport { InlineFieldWrapper } from '../field-wrapper/InlineFieldWrapper'\nimport { useFieldError } from '../form/useFieldError'\n\nenum CheckboxValue {\n  ON = 'on',\n  OFF = 'off'\n}\n\nexport const CheckboxField = ({\n  className,\n  label,\n  name,\n  validation,\n  description,\n  defaultChecked = false,\n  checked,\n  onCheckedChange,\n  ...rest\n}: React.ComponentProps<typeof Checkbox> & FieldElementWrapperProps) => {\n  const { control } = useFormContext()\n  const { error } = useFieldError(name)\n  const {\n    field: { ref, onChange, value: innerChecked, name: innerName }\n  } = useController({\n    name,\n    control,\n    rules: validation,\n    defaultValue: defaultChecked\n  })\n\n  React.useEffect(() => {\n    // Update the react-hook-form inner checked to match what is passed in.\n    if (typeof checked !== 'undefined') onChange(checked)\n  }, [checked])\n\n  return (\n    <InlineFieldWrapper\n      className={className}\n      description={description}\n      error={error}\n      label={label}\n      required={Boolean(validation?.required)}\n    >\n      <Checkbox\n        ref={ref}\n        name={innerName}\n        {...rest}\n        onCheckedChange={(newChecked) => {\n          onChange(newChecked)\n          onCheckedChange?.(newChecked)\n        }}\n        value={innerChecked ? CheckboxValue.ON : CheckboxValue.OFF}\n        checked={innerChecked}\n        {...(error && { state: 'error' })}\n      />\n    </InlineFieldWrapper>\n  )\n}\n\nCheckboxField.displayName = 'CheckboxField'\n"],"mappings":";;;;;;;AAaA,IAAa,iBAAiB,EAC5B,WACA,OACA,MACA,YACA,aACA,iBAAiB,OACjB,SACA,iBACA,GAAG,WACmE;CACtE,MAAM,EAAE,YAAY,eAAe;CACnC,MAAM,EAAE,UAAU,cAAc,IAAI;CACpC,MAAM,EACJ,OAAO,EAAE,KAAK,UAAU,OAAO,cAAc,MAAM,gBACjD,cAAc;EAChB;EACA;EACA,OAAO;EACP,cAAc;CAChB,CAAC;CAED,QAAM,gBAAgB;EAEpB,IAAI,OAAO,YAAY,aAAa,SAAS,OAAO;CACtD,GAAG,CAAC,OAAO,CAAC;CAEZ,OACE,oBAAC,oBAAD;EACa;EACE;EACN;EACA;EACP,UAAU,QAAQ,YAAY,QAAQ;YAEtC,oBAAC,UAAD;GACO;GACL,MAAM;GACN,GAAI;GACJ,kBAAkB,eAAe;IAC/B,SAAS,UAAU;IACnB,kBAAkB,UAAU;GAC9B;GACA,OAAO,eAAA,OAAA;GACP,SAAS;GACT,GAAK,SAAS,EAAE,OAAO,QAAQ;EAChC,CAAA;CACiB,CAAA;AAExB;AAEA,cAAc,cAAc"}

package/dist/components/checkbox-group/CheckboxGroup.d.ts

@@ -7,134 +7,21 @@ type CheckboxGroupRootProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'defaul
     asChild?: boolean;
 };
 export declare const CheckboxGroup: (({ checked, defaultChecked, onCheckedChange, asChild, ...rest }: CheckboxGroupRootProps) => React.JSX.Element) & {
-    Item: ({ value, title, onCheckedChange, ...rest }: Omit<Omit<Omit<import("@radix-ui/react-checkbox").CheckboxProps & React.RefAttributes<HTMLButtonElement>, "size" | "state"> & {
+    Item: ({ value, title, onCheckedChange, ...rest }: Omit<{
         state?: "error" | undefined;
-        size?: "md" | "lg" | undefined;
+        size?: "lg" | "md" | undefined;
     } & {
-        as?: React.ElementType;
-    }, "ref"> & React.RefAttributes<HTMLButtonElement>, "defaultChecked" | "checked" | "onCheckedChange"> & {
+        as?: never;
+    } & Omit<import("@radix-ui/react-checkbox").CheckboxProps & React.RefAttributes<HTMLButtonElement>, "as" | "size" | "state">, "checked" | "defaultChecked" | "onCheckedChange"> & {
         onCheckedChange?: (newChecked: boolean) => void;
     }) => React.JSX.Element;
     AllItem: ({ onCheckedChange, title, ...rest }: {
-        required?: boolean | undefined;
-        content?: string | undefined | undefined;
-        size?: "md" | "lg" | undefined;
-        translate?: "yes" | "no" | undefined | undefined;
-        color?: string | undefined | undefined;
-        prefix?: string | undefined | undefined;
-        children?: React.ReactNode;
-        form?: string | undefined | undefined;
-        slot?: string | undefined | undefined;
-        style?: React.CSSProperties | undefined;
-        title?: string | undefined | undefined;
-        ref?: React.Ref<HTMLButtonElement> | undefined;
-        as?: React.ElementType | undefined;
-        className?: string | undefined | undefined;
         key?: React.Key | null | undefined;
-        value?: string | number | readonly string[] | undefined;
-        name?: string | undefined | undefined;
-        defaultValue?: string | number | readonly string[] | undefined;
-        suppressContentEditableWarning?: boolean | undefined | undefined;
-        suppressHydrationWarning?: boolean | undefined | undefined;
-        accessKey?: string | undefined | undefined;
-        autoCapitalize?: "off" | "none" | "on" | "sentences" | "words" | "characters" | undefined | (string & {}) | undefined;
-        autoFocus?: boolean | undefined | undefined;
-        contentEditable?: (boolean | "true" | "false") | "inherit" | "plaintext-only" | undefined;
-        contextMenu?: string | undefined | undefined;
-        dir?: string | undefined | undefined;
-        draggable?: (boolean | "true" | "false") | undefined;
-        enterKeyHint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | undefined;
-        hidden?: boolean | undefined | undefined;
-        id?: string | undefined | undefined;
-        lang?: string | undefined | undefined;
-        nonce?: string | undefined | undefined;
-        spellCheck?: (boolean | "true" | "false") | undefined;
-        tabIndex?: number | undefined | undefined;
-        radioGroup?: string | undefined | undefined;
-        role?: React.AriaRole | undefined;
-        about?: string | undefined | undefined;
-        datatype?: string | undefined | undefined;
-        inlist?: any;
-        property?: string | undefined | undefined;
-        rel?: string | undefined | undefined;
-        resource?: string | undefined | undefined;
-        rev?: string | undefined | undefined;
-        typeof?: string | undefined | undefined;
-        vocab?: string | undefined | undefined;
-        autoCorrect?: string | undefined | undefined;
-        autoSave?: string | undefined | undefined;
-        itemProp?: string | undefined | undefined;
-        itemScope?: boolean | undefined | undefined;
-        itemType?: string | undefined | undefined;
-        itemID?: string | undefined | undefined;
-        itemRef?: string | undefined | undefined;
-        results?: number | undefined | undefined;
-        security?: string | undefined | undefined;
-        unselectable?: "on" | "off" | undefined | undefined;
-        popover?: "" | "auto" | "manual" | "hint" | undefined | undefined;
-        popoverTargetAction?: "toggle" | "show" | "hide" | undefined | undefined;
-        popoverTarget?: string | undefined | undefined;
-        inert?: boolean | undefined | undefined;
-        inputMode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined | undefined;
-        is?: string | undefined | undefined;
-        exportparts?: string | undefined | undefined;
-        part?: string | undefined | undefined;
-        "aria-activedescendant"?: string | undefined | undefined;
-        "aria-atomic"?: (boolean | "true" | "false") | undefined;
-        "aria-autocomplete"?: "none" | "inline" | "list" | "both" | undefined | undefined;
-        "aria-braillelabel"?: string | undefined | undefined;
-        "aria-brailleroledescription"?: string | undefined | undefined;
-        "aria-busy"?: (boolean | "true" | "false") | undefined;
-        "aria-checked"?: boolean | "false" | "mixed" | "true" | undefined | undefined;
-        "aria-colcount"?: number | undefined | undefined;
-        "aria-colindex"?: number | undefined | undefined;
-        "aria-colindextext"?: string | undefined | undefined;
-        "aria-colspan"?: number | undefined | undefined;
-        "aria-controls"?: string | undefined | undefined;
-        "aria-current"?: boolean | "false" | "true" | "page" | "step" | "location" | "date" | "time" | undefined | undefined;
-        "aria-describedby"?: string | undefined | undefined;
-        "aria-description"?: string | undefined | undefined;
-        "aria-details"?: string | undefined | undefined;
-        "aria-disabled"?: (boolean | "true" | "false") | undefined;
-        "aria-dropeffect"?: "none" | "copy" | "execute" | "link" | "move" | "popup" | undefined | undefined;
-        "aria-errormessage"?: string | undefined | undefined;
-        "aria-expanded"?: (boolean | "true" | "false") | undefined;
-        "aria-flowto"?: string | undefined | undefined;
-        "aria-grabbed"?: (boolean | "true" | "false") | undefined;
-        "aria-haspopup"?: boolean | "false" | "true" | "menu" | "listbox" | "tree" | "grid" | "dialog" | undefined | undefined;
-        "aria-hidden"?: (boolean | "true" | "false") | undefined;
-        "aria-invalid"?: boolean | "false" | "true" | "grammar" | "spelling" | undefined | undefined;
-        "aria-keyshortcuts"?: string | undefined | undefined;
-        "aria-label"?: string | undefined | undefined;
-        "aria-labelledby"?: string | undefined | undefined;
-        "aria-level"?: number | undefined | undefined;
-        "aria-live"?: "off" | "assertive" | "polite" | undefined | undefined;
-        "aria-modal"?: (boolean | "true" | "false") | undefined;
-        "aria-multiline"?: (boolean | "true" | "false") | undefined;
-        "aria-multiselectable"?: (boolean | "true" | "false") | undefined;
-        "aria-orientation"?: "horizontal" | "vertical" | undefined | undefined;
-        "aria-owns"?: string | undefined | undefined;
-        "aria-placeholder"?: string | undefined | undefined;
-        "aria-posinset"?: number | undefined | undefined;
-        "aria-pressed"?: boolean | "false" | "mixed" | "true" | undefined | undefined;
-        "aria-readonly"?: (boolean | "true" | "false") | undefined;
-        "aria-relevant"?: "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text" | "text additions" | "text removals" | undefined | undefined;
-        "aria-required"?: (boolean | "true" | "false") | undefined;
-        "aria-roledescription"?: string | undefined | undefined;
-        "aria-rowcount"?: number | undefined | undefined;
-        "aria-rowindex"?: number | undefined | undefined;
-        "aria-rowindextext"?: string | undefined | undefined;
-        "aria-rowspan"?: number | undefined | undefined;
-        "aria-selected"?: (boolean | "true" | "false") | undefined;
-        "aria-setsize"?: number | undefined | undefined;
-        "aria-sort"?: "none" | "ascending" | "descending" | "other" | undefined | undefined;
-        "aria-valuemax"?: number | undefined | undefined;
-        "aria-valuemin"?: number | undefined | undefined;
-        "aria-valuenow"?: number | undefined | undefined;
-        "aria-valuetext"?: string | undefined | undefined;
+        ref?: React.Ref<HTMLButtonElement> | undefined;
+        children?: React.ReactNode | undefined;
         dangerouslySetInnerHTML?: {
             __html: string | TrustedHTML;
-        } | undefined | undefined;
+        } | undefined;
         onCopy?: React.ClipboardEventHandler<HTMLButtonElement> | undefined;
         onCopyCapture?: React.ClipboardEventHandler<HTMLButtonElement> | undefined;
         onCut?: React.ClipboardEventHandler<HTMLButtonElement> | undefined;
@@ -303,16 +190,129 @@ export declare const CheckboxGroup: (({ checked, defaultChecked, onCheckedChange
         onTransitionRunCapture?: React.TransitionEventHandler<HTMLButtonElement> | undefined;
         onTransitionStart?: React.TransitionEventHandler<HTMLButtonElement> | undefined;
         onTransitionStartCapture?: React.TransitionEventHandler<HTMLButtonElement> | undefined;
-        asChild?: boolean | undefined;
-        disabled?: boolean | undefined | undefined;
-        type?: "submit" | "reset" | "button" | undefined | undefined;
-        formAction?: string | ((formData: FormData) => void | Promise<void>) | undefined;
-        formEncType?: string | undefined | undefined;
-        formMethod?: string | undefined | undefined;
-        formNoValidate?: boolean | undefined | undefined;
-        formTarget?: string | undefined | undefined;
-        state?: "error" | undefined;
+        "aria-activedescendant"?: string | undefined;
+        "aria-atomic"?: ("false" | "true" | boolean) | undefined;
+        "aria-autocomplete"?: "none" | "inline" | "list" | "both" | undefined;
+        "aria-braillelabel"?: string | undefined;
+        "aria-brailleroledescription"?: string | undefined;
+        "aria-busy"?: ("false" | "true" | boolean) | undefined;
+        "aria-checked"?: boolean | "false" | "mixed" | "true" | undefined;
+        "aria-colcount"?: number | undefined;
+        "aria-colindex"?: number | undefined;
+        "aria-colindextext"?: string | undefined;
+        "aria-colspan"?: number | undefined;
+        "aria-controls"?: string | undefined;
+        "aria-current"?: boolean | "false" | "true" | "page" | "step" | "location" | "date" | "time" | undefined;
+        "aria-describedby"?: string | undefined;
+        "aria-description"?: string | undefined;
+        "aria-details"?: string | undefined;
+        "aria-disabled"?: ("false" | "true" | boolean) | undefined;
+        "aria-dropeffect"?: "none" | "copy" | "execute" | "link" | "move" | "popup" | undefined;
+        "aria-errormessage"?: string | undefined;
+        "aria-expanded"?: ("false" | "true" | boolean) | undefined;
+        "aria-flowto"?: string | undefined;
+        "aria-grabbed"?: ("false" | "true" | boolean) | undefined;
+        "aria-haspopup"?: boolean | "false" | "true" | "menu" | "listbox" | "tree" | "grid" | "dialog" | undefined;
+        "aria-hidden"?: ("false" | "true" | boolean) | undefined;
+        "aria-invalid"?: boolean | "false" | "true" | "grammar" | "spelling" | undefined;
+        "aria-keyshortcuts"?: string | undefined;
+        "aria-label"?: string | undefined;
+        "aria-labelledby"?: string | undefined;
+        "aria-level"?: number | undefined;
+        "aria-live"?: "off" | "assertive" | "polite" | undefined;
+        "aria-modal"?: ("false" | "true" | boolean) | undefined;
+        "aria-multiline"?: ("false" | "true" | boolean) | undefined;
+        "aria-multiselectable"?: ("false" | "true" | boolean) | undefined;
+        "aria-orientation"?: "horizontal" | "vertical" | undefined;
+        "aria-owns"?: string | undefined;
+        "aria-placeholder"?: string | undefined;
+        "aria-posinset"?: number | undefined;
+        "aria-pressed"?: boolean | "false" | "mixed" | "true" | undefined;
+        "aria-readonly"?: ("false" | "true" | boolean) | undefined;
+        "aria-relevant"?: "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text" | "text additions" | "text removals" | undefined;
+        "aria-required"?: ("false" | "true" | boolean) | undefined;
+        "aria-roledescription"?: string | undefined;
+        "aria-rowcount"?: number | undefined;
+        "aria-rowindex"?: number | undefined;
+        "aria-rowindextext"?: string | undefined;
+        "aria-rowspan"?: number | undefined;
+        "aria-selected"?: ("false" | "true" | boolean) | undefined;
+        "aria-setsize"?: number | undefined;
+        "aria-sort"?: "none" | "ascending" | "descending" | "other" | undefined;
+        "aria-valuemax"?: number | undefined;
+        "aria-valuemin"?: number | undefined;
+        "aria-valuenow"?: number | undefined;
+        "aria-valuetext"?: string | undefined;
+        defaultValue?: string | number | readonly string[] | undefined;
+        suppressContentEditableWarning?: boolean | undefined;
+        suppressHydrationWarning?: boolean | undefined;
+        accessKey?: string | undefined;
+        autoCapitalize?: "off" | "none" | "on" | "sentences" | "words" | "characters" | undefined | (string & {});
+        autoFocus?: boolean | undefined;
+        className?: string | undefined;
+        contentEditable?: ("false" | "true" | boolean) | "inherit" | "plaintext-only" | undefined;
+        contextMenu?: string | undefined;
+        dir?: string | undefined;
+        draggable?: ("false" | "true" | boolean) | undefined;
+        enterKeyHint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined;
+        hidden?: boolean | undefined;
+        id?: string | undefined;
+        lang?: string | undefined;
+        nonce?: string | undefined;
+        slot?: string | undefined;
+        spellCheck?: ("false" | "true" | boolean) | undefined;
+        style?: React.CSSProperties | undefined;
+        tabIndex?: number | undefined;
+        title?: string | undefined;
+        translate?: "yes" | "no" | undefined;
+        radioGroup?: string | undefined;
+        role?: React.AriaRole | undefined;
+        about?: string | undefined;
+        content?: string | undefined;
+        datatype?: string | undefined;
+        inlist?: any;
+        prefix?: string | undefined;
+        property?: string | undefined;
+        rel?: string | undefined;
+        resource?: string | undefined;
+        rev?: string | undefined;
+        typeof?: string | undefined;
+        vocab?: string | undefined;
+        autoCorrect?: string | undefined;
+        autoSave?: string | undefined;
+        color?: string | undefined;
+        itemProp?: string | undefined;
+        itemScope?: boolean | undefined;
+        itemType?: string | undefined;
+        itemID?: string | undefined;
+        itemRef?: string | undefined;
+        results?: number | undefined;
+        security?: string | undefined;
+        unselectable?: "on" | "off" | undefined;
+        popover?: "" | "auto" | "manual" | "hint" | undefined;
+        popoverTargetAction?: "toggle" | "show" | "hide" | undefined;
+        popoverTarget?: string | undefined;
+        inert?: boolean | undefined;
+        inputMode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined;
+        is?: string | undefined;
+        exportparts?: string | undefined;
+        part?: string | undefined;
+        disabled?: boolean | undefined;
+        form?: string | undefined;
+        formAction?: string | ((formData: FormData) => void | Promise<void>) | React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_EXPERIMENTAL_FORM_ACTIONS[keyof React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_EXPERIMENTAL_FORM_ACTIONS] | undefined;
+        formEncType?: string | undefined;
+        formMethod?: string | undefined;
+        formNoValidate?: boolean | undefined;
+        formTarget?: string | undefined;
+        name?: string | undefined;
+        type?: "submit" | "reset" | "button" | undefined;
+        value?: string | readonly string[] | number | undefined;
+        as?: never;
+        asChild?: boolean;
+        required?: boolean;
         onCheckedChange?: ((checked: import("@radix-ui/react-checkbox").CheckedState) => void) | undefined;
+        state?: "error" | undefined;
+        size?: "lg" | "md" | undefined;
     }) => React.JSX.Element;
     Sub: ({ asChild, ...rest }: React.HTMLAttributes<HTMLDivElement> & {
         asChild?: boolean;

package/dist/components/checkbox-group/CheckboxGroup.js

@@ -1,5 +1,5 @@
-import { CheckboxGroupCheckedProvider } from "./context/CheckboxGroupChecked.context.js";
-import { CheckboxGroupMountedProvider } from "./context/CheckboxGroupMounted.context.js";
+import { CheckboxGroupCheckedProvider } from "./CheckboxGroupChecked.context.js";
+import { CheckboxGroupMountedProvider } from "./CheckboxGroupMounted.context.js";
 import { CheckboxGroupAllItem } from "./CheckboxGroupAllItem.js";
 import { CheckboxGroupItem } from "./CheckboxGroupItem.js";
 import { CheckboxGroupSub } from "./CheckboxGroupSub.js";
@@ -15,7 +15,7 @@ var CheckboxGroupRoot = ({ checked, defaultChecked, onCheckedChange, asChild = f
 		children: /* @__PURE__ */ jsx(CheckboxGroupMountedProvider, { children: /* @__PURE__ */ jsx(asChild ? Slot : "div", { ...rest }) })
 	});
 };
-var CheckboxGroup = Object.assign(CheckboxGroupRoot, {
+var CheckboxGroup = /* @__PURE__ */ Object.assign(CheckboxGroupRoot, {
 	Item: CheckboxGroupItem,
 	AllItem: CheckboxGroupAllItem,
 	Sub: CheckboxGroupSub

package/dist/components/checkbox-group/CheckboxGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"CheckboxGroup.js","names":[],"sources":["../../../src/components/checkbox-group/CheckboxGroup.tsx"],"sourcesContent":["import { Slot } from '@radix-ui/react-slot'\nimport * as React from 'react'\n\nimport type { CheckboxGroupItemValue } from './CheckboxGroup.types'\nimport { CheckboxGroupAllItem } from './CheckboxGroupAllItem'\nimport { CheckboxGroupItem } from './CheckboxGroupItem'\nimport { CheckboxGroupSub } from './CheckboxGroupSub'\nimport { CheckboxGroupCheckedProvider } from './context/CheckboxGroupChecked.context'\nimport { CheckboxGroupMountedProvider } from './context/CheckboxGroupMounted.context'\n\ntype CheckboxGroupRootProps = Omit<\n  React.HTMLAttributes<HTMLDivElement>,\n  'defaultChecked'\n> & {\n  checked?: CheckboxGroupItemValue[]\n  onCheckedChange?: (checked: CheckboxGroupItemValue[]) => void\n  defaultChecked?: CheckboxGroupItemValue[]\n  asChild?: boolean\n}\n\nconst CheckboxGroupRoot = ({\n  checked,\n  defaultChecked,\n  onCheckedChange,\n  asChild = false,\n  ...rest\n}: CheckboxGroupRootProps) => {\n  const Component = asChild ? Slot : 'div'\n\n  return (\n    <CheckboxGroupCheckedProvider\n      checked={checked}\n      defaultChecked={defaultChecked}\n      onCheckedChange={onCheckedChange}\n    >\n      <CheckboxGroupMountedProvider>\n        <Component {...rest} />\n      </CheckboxGroupMountedProvider>\n    </CheckboxGroupCheckedProvider>\n  )\n}\n\nexport const CheckboxGroup = Object.assign(CheckboxGroupRoot, {\n  Item: CheckboxGroupItem,\n  AllItem: CheckboxGroupAllItem,\n  Sub: CheckboxGroupSub\n})\n"],"mappings":";;;;;;;;;AAoBA,IAAM,qBAAqB,EACzB,SACA,gBACA,iBACA,UAAU,OACV,GAAG,WACyB;AAG5B,QACE,oBAAC,8BAAD;EACW;EACO;EACC;YAEjB,oBAAC,8BAAD,EAAA,UACE,oBATY,UAAU,OAAO,OAS7B,EAAW,GAAI,MAAQ,CAAA,EACM,CAAA;EACF,CAAA;;AAInC,IAAa,gBAAgB,OAAO,OAAO,mBAAmB;CAC5D,MAAM;CACN,SAAS;CACT,KAAK;CACN,CAAC"}
+{"version":3,"file":"CheckboxGroup.js","names":[],"sources":["../../../src/components/checkbox-group/CheckboxGroup.tsx"],"sourcesContent":["import { Slot } from '@radix-ui/react-slot'\nimport * as React from 'react'\n\nimport type { CheckboxGroupItemValue } from './CheckboxGroup.types'\nimport { CheckboxGroupAllItem } from './CheckboxGroupAllItem'\nimport { CheckboxGroupCheckedProvider } from './CheckboxGroupChecked.context'\nimport { CheckboxGroupItem } from './CheckboxGroupItem'\nimport { CheckboxGroupMountedProvider } from './CheckboxGroupMounted.context'\nimport { CheckboxGroupSub } from './CheckboxGroupSub'\n\ntype CheckboxGroupRootProps = Omit<\n  React.HTMLAttributes<HTMLDivElement>,\n  'defaultChecked'\n> & {\n  checked?: CheckboxGroupItemValue[]\n  onCheckedChange?: (checked: CheckboxGroupItemValue[]) => void\n  defaultChecked?: CheckboxGroupItemValue[]\n  asChild?: boolean\n}\n\nconst CheckboxGroupRoot = ({\n  checked,\n  defaultChecked,\n  onCheckedChange,\n  asChild = false,\n  ...rest\n}: CheckboxGroupRootProps) => {\n  const Component = asChild ? Slot : 'div'\n\n  return (\n    <CheckboxGroupCheckedProvider\n      checked={checked}\n      defaultChecked={defaultChecked}\n      onCheckedChange={onCheckedChange}\n    >\n      <CheckboxGroupMountedProvider>\n        <Component {...rest} />\n      </CheckboxGroupMountedProvider>\n    </CheckboxGroupCheckedProvider>\n  )\n}\n\nexport const CheckboxGroup = /* @__PURE__ */ Object.assign(CheckboxGroupRoot, {\n  Item: CheckboxGroupItem,\n  AllItem: CheckboxGroupAllItem,\n  Sub: CheckboxGroupSub\n})\n"],"mappings":";;;;;;;;;AAoBA,IAAM,qBAAqB,EACzB,SACA,gBACA,iBACA,UAAU,OACV,GAAG,WACyB;CAG5B,OACE,oBAAC,8BAAD;EACW;EACO;EACC;YAEjB,oBAAC,8BAAD,EAAA,UACE,oBATY,UAAU,OAAO,OAS7B,EAAW,GAAI,KAAO,CAAA,EACM,CAAA;CACF,CAAA;AAElC;AAEA,IAAa,gBAAgC,uBAAO,OAAO,mBAAmB;CAC5E,MAAM;CACN,SAAS;CACT,KAAK;AACP,CAAC"}