@zayne-labs/ui-react 0.10.9 → 0.10.11

package/dist/esm/ui/card/index.d.ts

@@ -1,2 +1,20 @@
-import { CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardRoot, CardTitle, card_parts_d_exports } from "../../index-bD-GMufy.js";
-export { card_parts_d_exports as Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardRoot, CardTitle };
+import { PolymorphicProps } from "@zayne-labs/toolkit-react/utils";
+import * as React from "react";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/components/ui/card/card.d.ts
+declare function CardRoot<TElement extends React.ElementType = "article">(props: PolymorphicProps<TElement>): react_jsx_runtime0.JSX.Element;
+declare function CardHeader<TElement extends React.ElementType = "header">(props: PolymorphicProps<TElement>): react_jsx_runtime0.JSX.Element;
+declare function CardTitle<TElement extends React.ElementType = "h3">(props: PolymorphicProps<TElement>): react_jsx_runtime0.JSX.Element;
+declare function CardDescription<TElement extends React.ElementType = "p">(props: PolymorphicProps<TElement>): react_jsx_runtime0.JSX.Element;
+declare function CardContent<TElement extends React.ElementType = "div">(props: PolymorphicProps<TElement>): react_jsx_runtime0.JSX.Element;
+declare function CardAction<TElement extends React.ElementType = "div">(props: PolymorphicProps<TElement>): react_jsx_runtime0.JSX.Element;
+declare function CardFooter<TElement extends React.ElementType = "footer">(props: PolymorphicProps<TElement, {
+  asChild?: boolean;
+}>): react_jsx_runtime0.JSX.Element;
+declare namespace card_parts_d_exports {
+  export { CardAction as Action, CardContent as Content, CardDescription as Description, CardFooter as Footer, CardHeader as Header, CardRoot as Root, CardTitle as Title };
+}
+//#endregion
+export { card_parts_d_exports as Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardRoot, CardTitle };
+//# sourceMappingURL=index.d.ts.map

package/dist/esm/ui/card/index.js

@@ -1,5 +1,95 @@
-import "../../slot-WVWfOlr3.js";
-import "../../cn-s-D7vHW1.js";
-import { CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardRoot, CardTitle, card_parts_exports } from "../../card-DDLJVCwL.js";
+import { __export } from "../../chunk-CTAAG5j7.js";
+import { SlotRoot } from "../../slot-WVWfOlr3.js";
+import { cnMerge } from "../../cn-DdD3uYxA.js";
+import "react";
+import { jsx } from "react/jsx-runtime";
 
-export { card_parts_exports as Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardRoot, CardTitle };
+//#region src/components/ui/card/card.tsx
+function CardRoot(props) {
+	const { as: Element = "article",...restOfProps } = props;
+	return /* @__PURE__ */ jsx(Element, {
+		"data-scope": "card",
+		"data-part": "root",
+		"data-slot": "card-root",
+		className: "flex flex-col gap-6 rounded-xl border py-6 shadow-sm",
+		...restOfProps
+	});
+}
+function CardHeader(props) {
+	const { as: Element = "header", className,...restOfProps } = props;
+	return /* @__PURE__ */ jsx(Element, {
+		"data-scope": "card",
+		"data-part": "header",
+		"data-slot": "card-header",
+		className: cnMerge(`@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6
+				has-data-[slot=card-action]:grid-cols-[1fr_auto]`, className),
+		...restOfProps
+	});
+}
+function CardTitle(props) {
+	const { as: Element = "h3", className,...restOfProps } = props;
+	return /* @__PURE__ */ jsx(Element, {
+		"data-scope": "card",
+		"data-part": "title",
+		"data-slot": "card-title",
+		className: cnMerge("leading-none font-semibold", className),
+		...restOfProps
+	});
+}
+function CardDescription(props) {
+	const { as: Element = "p", className,...restOfProps } = props;
+	return /* @__PURE__ */ jsx(Element, {
+		"data-scope": "card",
+		"data-part": "description",
+		"data-slot": "card-description",
+		className: cnMerge("text-sm text-zu-muted-foreground", className),
+		...restOfProps
+	});
+}
+function CardContent(props) {
+	const { as: Element = "div", className,...restOfProps } = props;
+	return /* @__PURE__ */ jsx(Element, {
+		"data-scope": "card",
+		"data-part": "content",
+		"data-slot": "card-content",
+		className: cnMerge("px-6", className),
+		...restOfProps
+	});
+}
+function CardAction(props) {
+	const { as: Element = "div", className,...restOfProps } = props;
+	return /* @__PURE__ */ jsx(Element, {
+		"data-scope": "card",
+		"data-part": "action",
+		"data-slot": "card-action",
+		className: cnMerge("col-start-2 row-span-2 row-start-1 self-start justify-self-end", className),
+		...restOfProps
+	});
+}
+function CardFooter(props) {
+	const { as: Element = "footer", asChild, className,...restOfProps } = props;
+	const Component$1 = asChild ? SlotRoot : Element;
+	return /* @__PURE__ */ jsx(Component$1, {
+		"data-scope": "card",
+		"data-part": "footer",
+		"data-slot": "card-footer",
+		className: cnMerge("px-6", className),
+		...restOfProps
+	});
+}
+
+//#endregion
+//#region src/components/ui/card/card-parts.ts
+var card_parts_exports = __export({
+	Action: () => CardAction,
+	Content: () => CardContent,
+	Description: () => CardDescription,
+	Footer: () => CardFooter,
+	Header: () => CardHeader,
+	Root: () => CardRoot,
+	Title: () => CardTitle
+});
+
+//#endregion
+export { card_parts_exports as Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardRoot, CardTitle };
+//# sourceMappingURL=index.js.map

package/dist/esm/ui/card/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["Component","Slot.Root"],"sources":["../../../../src/components/ui/card/card.tsx","../../../../src/components/ui/card/card-parts.ts"],"sourcesContent":["import type { PolymorphicProps } from \"@zayne-labs/toolkit-react/utils\";\nimport * as React from \"react\";\nimport { Slot } from \"@/components/common/slot\";\nimport { cnMerge } from \"@/lib/utils/cn\";\n\nexport function CardRoot<TElement extends React.ElementType = \"article\">(\n\tprops: PolymorphicProps<TElement>\n) {\n\tconst { as: Element = \"article\", ...restOfProps } = props;\n\n\treturn (\n\t\t<Element\n\t\t\tdata-scope=\"card\"\n\t\t\tdata-part=\"root\"\n\t\t\tdata-slot=\"card-root\"\n\t\t\tclassName=\"flex flex-col gap-6 rounded-xl border py-6 shadow-sm\"\n\t\t\t{...restOfProps}\n\t\t/>\n\t);\n}\n\nexport function CardHeader<TElement extends React.ElementType = \"header\">(\n\tprops: PolymorphicProps<TElement>\n) {\n\tconst { as: Element = \"header\", className, ...restOfProps } = props;\n\n\treturn (\n\t\t<Element\n\t\t\tdata-scope=\"card\"\n\t\t\tdata-part=\"header\"\n\t\t\tdata-slot=\"card-header\"\n\t\t\tclassName={cnMerge(\n\t\t\t\t`@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6\n\t\t\t\thas-data-[slot=card-action]:grid-cols-[1fr_auto]`,\n\t\t\t\tclassName\n\t\t\t)}\n\t\t\t{...restOfProps}\n\t\t/>\n\t);\n}\n\nexport function CardTitle<TElement extends React.ElementType = \"h3\">(props: PolymorphicProps<TElement>) {\n\tconst { as: Element = \"h3\", className, ...restOfProps } = props;\n\n\treturn (\n\t\t<Element\n\t\t\tdata-scope=\"card\"\n\t\t\tdata-part=\"title\"\n\t\t\tdata-slot=\"card-title\"\n\t\t\tclassName={cnMerge(\"leading-none font-semibold\", className)}\n\t\t\t{...restOfProps}\n\t\t/>\n\t);\n}\n\nexport function CardDescription<TElement extends React.ElementType = \"p\">(\n\tprops: PolymorphicProps<TElement>\n) {\n\tconst { as: Element = \"p\", className, ...restOfProps } = props;\n\n\treturn (\n\t\t<Element\n\t\t\tdata-scope=\"card\"\n\t\t\tdata-part=\"description\"\n\t\t\tdata-slot=\"card-description\"\n\t\t\tclassName={cnMerge(\"text-sm text-zu-muted-foreground\", className)}\n\t\t\t{...restOfProps}\n\t\t/>\n\t);\n}\n\nexport function CardContent<TElement extends React.ElementType = \"div\">(\n\tprops: PolymorphicProps<TElement>\n) {\n\tconst { as: Element = \"div\", className, ...restOfProps } = props;\n\n\treturn (\n\t\t<Element\n\t\t\tdata-scope=\"card\"\n\t\t\tdata-part=\"content\"\n\t\t\tdata-slot=\"card-content\"\n\t\t\tclassName={cnMerge(\"px-6\", className)}\n\t\t\t{...restOfProps}\n\t\t/>\n\t);\n}\n\nexport function CardAction<TElement extends React.ElementType = \"div\">(props: PolymorphicProps<TElement>) {\n\tconst { as: Element = \"div\", className, ...restOfProps } = props;\n\n\treturn (\n\t\t<Element\n\t\t\tdata-scope=\"card\"\n\t\t\tdata-part=\"action\"\n\t\t\tdata-slot=\"card-action\"\n\t\t\tclassName={cnMerge(\"col-start-2 row-span-2 row-start-1 self-start justify-self-end\", className)}\n\t\t\t{...restOfProps}\n\t\t/>\n\t);\n}\n\nexport function CardFooter<TElement extends React.ElementType = \"footer\">(\n\tprops: PolymorphicProps<TElement, { asChild?: boolean }>\n) {\n\tconst { as: Element = \"footer\", asChild, className, ...restOfProps } = props;\n\n\tconst Component = asChild ? Slot.Root : Element;\n\n\treturn (\n\t\t<Component\n\t\t\tdata-scope=\"card\"\n\t\t\tdata-part=\"footer\"\n\t\t\tdata-slot=\"card-footer\"\n\t\t\tclassName={cnMerge(\"px-6\", className)}\n\t\t\t{...restOfProps}\n\t\t/>\n\t);\n}\n","export {\n\tCardContent as Content,\n\tCardDescription as Description,\n\tCardFooter as Footer,\n\tCardHeader as Header,\n\tCardAction as Action,\n\tCardRoot as Root,\n\tCardTitle as Title,\n} from \"./card\";\n"],"mappings":";;;;;;;AAKA,SAAgB,SACf,OACC;CACD,MAAM,EAAE,IAAI,UAAU,UAAW,GAAG,gBAAgB;AAEpD,QACC,oBAAC;EACA,cAAW;EACX,aAAU;EACV,aAAU;EACV,WAAU;EACV,GAAI;GACH;;AAIJ,SAAgB,WACf,OACC;CACD,MAAM,EAAE,IAAI,UAAU,UAAU,UAAW,GAAG,gBAAgB;AAE9D,QACC,oBAAC;EACA,cAAW;EACX,aAAU;EACV,aAAU;EACV,WAAW,QACV;uDAEA,UACA;EACD,GAAI;GACH;;AAIJ,SAAgB,UAAqD,OAAmC;CACvG,MAAM,EAAE,IAAI,UAAU,MAAM,UAAW,GAAG,gBAAgB;AAE1D,QACC,oBAAC;EACA,cAAW;EACX,aAAU;EACV,aAAU;EACV,WAAW,QAAQ,8BAA8B,UAAU;EAC3D,GAAI;GACH;;AAIJ,SAAgB,gBACf,OACC;CACD,MAAM,EAAE,IAAI,UAAU,KAAK,UAAW,GAAG,gBAAgB;AAEzD,QACC,oBAAC;EACA,cAAW;EACX,aAAU;EACV,aAAU;EACV,WAAW,QAAQ,oCAAoC,UAAU;EACjE,GAAI;GACH;;AAIJ,SAAgB,YACf,OACC;CACD,MAAM,EAAE,IAAI,UAAU,OAAO,UAAW,GAAG,gBAAgB;AAE3D,QACC,oBAAC;EACA,cAAW;EACX,aAAU;EACV,aAAU;EACV,WAAW,QAAQ,QAAQ,UAAU;EACrC,GAAI;GACH;;AAIJ,SAAgB,WAAuD,OAAmC;CACzG,MAAM,EAAE,IAAI,UAAU,OAAO,UAAW,GAAG,gBAAgB;AAE3D,QACC,oBAAC;EACA,cAAW;EACX,aAAU;EACV,aAAU;EACV,WAAW,QAAQ,kEAAkE,UAAU;EAC/F,GAAI;GACH;;AAIJ,SAAgB,WACf,OACC;CACD,MAAM,EAAE,IAAI,UAAU,UAAU,SAAS,UAAW,GAAG,gBAAgB;CAEvE,MAAMA,cAAY,UAAUC,WAAY;AAExC,QACC,oBAACD;EACA,cAAW;EACX,aAAU;EACV,aAAU;EACV,WAAW,QAAQ,QAAQ,UAAU;EACrC,GAAI;GACH"}

package/dist/esm/ui/carousel/index.d.ts

@@ -1,2 +1,95 @@
-import { CarouselButton, CarouselButtonsProps, CarouselCaption, CarouselControlProps, CarouselControls, CarouselIndicator, CarouselIndicatorList, CarouselIndicatorProps, CarouselItem, CarouselItemList, CarouselRoot, CarouselRootProps, CarouselStore, CarouselStoreApi, CarouselWrapperProps, ImagesType, OtherCarouselProps, carousel_parts_d_exports } from "../../index-ipYGGqwN.js";
-export { carousel_parts_d_exports as Carousel, CarouselButton, CarouselButtonsProps, CarouselCaption, CarouselControlProps, CarouselControls, CarouselIndicator, CarouselIndicatorList, CarouselIndicatorProps, CarouselItem, CarouselItemList, CarouselRoot, CarouselRootProps, CarouselStore, CarouselStoreApi, CarouselWrapperProps, ImagesType, OtherCarouselProps };
+import { PolymorphicPropsStrict } from "@zayne-labs/toolkit-react/utils";
+import { UnionDiscriminator } from "@zayne-labs/toolkit-type-helpers";
+import * as React$1 from "react";
+import * as react_jsx_runtime40 from "react/jsx-runtime";
+import { StoreApi } from "@zayne-labs/toolkit-core";
+
+//#region src/components/ui/carousel/types.d.ts
+type ImagesType = Array<Record<string, string>> | string[];
+type CarouselStore<TImages extends ImagesType = any> = {
+  actions: {
+    goToNextSlide: () => void;
+    goToPreviousSlide: () => void;
+    goToSlide: (newValue: number) => void;
+  };
+  currentSlide: number;
+  images: TImages;
+  maxSlide: number;
+};
+type CarouselStoreApi<TImages extends ImagesType = ImagesType> = StoreApi<CarouselStore<TImages>>;
+type CarouselRootProps<TImages extends ImagesType = ImagesType> = {
+  autoSlideInterval?: number;
+  children: React.ReactNode;
+  classNames?: {
+    base?: string;
+    scrollContainer?: string;
+  };
+  hasAutoSlide?: boolean;
+  images: CarouselStore<TImages>["images"];
+  onSlideBtnClick?: () => void;
+  shouldPauseOnHover?: boolean;
+};
+type CarouselButtonsProps = {
+  classNames?: {
+    base?: string;
+    defaultIcon?: string;
+    iconContainer?: string;
+  };
+  icon?: React.ReactElement;
+  variant: "next" | "prev";
+};
+type CarouselControlProps = {
+  classNames?: {
+    base?: string;
+    defaultIcon?: string;
+    iconContainer?: string;
+  };
+  icon?: UnionDiscriminator<[{
+    icon?: React.ReactElement;
+    iconType: "nextIcon" | "prevIcon";
+  }, {
+    next?: React.ReactElement;
+    prev?: React.ReactElement;
+  }]>;
+};
+type CarouselIndicatorProps = {
+  classNames?: {
+    base?: string;
+    button?: string;
+    isActive?: string;
+  };
+  currentIndex: number;
+};
+type RenderPropFn<TArrayItem> = (context: {
+  array: NoInfer<TArrayItem[]>;
+  image: NoInfer<TArrayItem>;
+  index: number;
+}) => React.ReactNode;
+type BaseWrapperProps<TArrayItem> = {
+  children: React.ReactNode | RenderPropFn<TArrayItem>;
+  each?: TArrayItem[];
+};
+type CarouselWrapperProps<TArrayItem> = BaseWrapperProps<TArrayItem> & {
+  className?: string;
+};
+type OtherCarouselProps = {
+  children?: React.ReactNode;
+  className?: string;
+  style?: React.CSSProperties;
+};
+//#endregion
+//#region src/components/ui/carousel/carousel.d.ts
+declare function CarouselRoot<TImages extends ImagesType, TElement extends React$1.ElementType = "div">(props: PolymorphicPropsStrict<TElement, CarouselRootProps<TImages>>): react_jsx_runtime40.JSX.Element;
+declare function CarouselButton(props: CarouselButtonsProps): react_jsx_runtime40.JSX.Element;
+declare function CarouselControls(props: CarouselControlProps): react_jsx_runtime40.JSX.Element;
+declare function CarouselItemList<TArrayItem>(props: CarouselWrapperProps<TArrayItem>): react_jsx_runtime40.JSX.Element;
+declare function CarouselItem(props: OtherCarouselProps): react_jsx_runtime40.JSX.Element;
+declare function CarouselCaption<TElement extends React$1.ElementType = "div">(props: PolymorphicPropsStrict<TElement, OtherCarouselProps>): react_jsx_runtime40.JSX.Element;
+declare function CarouselIndicatorList<TArrayItem>(props: CarouselWrapperProps<TArrayItem>): react_jsx_runtime40.JSX.Element;
+declare function CarouselIndicator(props: CarouselIndicatorProps): react_jsx_runtime40.JSX.Element;
+declare namespace carousel_parts_d_exports {
+  export { CarouselButton as Button, CarouselCaption as Caption, CarouselControls as Controls, CarouselIndicator as Indicator, CarouselIndicatorList as IndicatorGroup, CarouselItem as Item, CarouselItemList as ItemGroup, CarouselRoot as Root };
+}
+//#endregion
+export { carousel_parts_d_exports as Carousel, CarouselButton, CarouselButtonsProps, CarouselCaption, CarouselControlProps, CarouselControls, CarouselIndicator, CarouselIndicatorList, CarouselIndicatorProps, CarouselItem, CarouselItemList, CarouselRoot, CarouselRootProps, CarouselStore, CarouselStoreApi, CarouselWrapperProps, ImagesType, OtherCarouselProps };
+//# sourceMappingURL=index.d.ts.map

package/dist/esm/ui/carousel/index.js

@@ -1,16 +1,288 @@
 "use client";
 
 
-import "../../error-boundary-y9Samt_s.js";
-import "../../slot-WVWfOlr3.js";
-import "../../await-DDgVzpvI.js";
-import "../../for-DK5rEY_m.js";
-import "../../show-N1ZXBhoA.js";
-import "../../suspense-with-boundary-D-1NYDV4.js";
-import "../../switch-Ch22z21e.js";
-import "../../teleport-C8TzRm4M.js";
-import "../../common-PS3X58Pj.js";
-import "../../cn-s-D7vHW1.js";
-import { CarouselButton, CarouselCaption, CarouselControls, CarouselIndicator, CarouselIndicatorList, CarouselItem, CarouselItemList, CarouselRoot, carousel_parts_exports } from "../../carousel-B051PAAX.js";
-
-export { carousel_parts_exports as Carousel, CarouselButton, CarouselCaption, CarouselControls, CarouselIndicator, CarouselIndicatorList, CarouselItem, CarouselItemList, CarouselRoot };
+import { __export } from "../../chunk-CTAAG5j7.js";
+import { For } from "../../for-BYsFEk3R.js";
+import { ShowContent, ShowFallback, ShowRoot } from "../../show-N1ZXBhoA.js";
+import { cnMerge } from "../../cn-DdD3uYxA.js";
+import { isFunction } from "@zayne-labs/toolkit-type-helpers";
+import { useMemo, useState } from "react";
+import { useAnimationInterval, useCallbackRef, useStore } from "@zayne-labs/toolkit-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { createStore } from "@zayne-labs/toolkit-core";
+import { createZustandContext } from "@zayne-labs/toolkit-react/zustand";
+
+//#region src/components/ui/carousel/carousel-store-context.ts
+const [CarouselStoreContextProvider, useCarouselStoreContext] = createZustandContext({
+	hookName: "useCarouselStore",
+	name: "CarouselStoreContext",
+	providerName: "CarouselRoot"
+});
+const createCarouselStore = (storeValues) => {
+	const { images, onSlideBtnClick } = storeValues;
+	return createStore((set, get) => ({
+		currentSlide: 0,
+		images,
+		maxSlide: images.length - 1,
+		actions: {
+			goToNextSlide: () => {
+				const { currentSlide, maxSlide } = get();
+				const { goToSlide } = get().actions;
+				if (currentSlide === maxSlide) {
+					goToSlide(0);
+					return;
+				}
+				goToSlide(currentSlide + 1);
+			},
+			goToPreviousSlide: () => {
+				const { currentSlide, maxSlide } = get();
+				const { goToSlide } = get().actions;
+				if (currentSlide === 0) {
+					goToSlide(maxSlide);
+					return;
+				}
+				goToSlide(currentSlide - 1);
+			},
+			goToSlide: (newValue) => {
+				onSlideBtnClick?.();
+				set({ currentSlide: newValue });
+			}
+		}
+	}));
+};
+const useCarousel = (props) => {
+	const { images, onSlideBtnClick } = props;
+	const savedOnSlideBtnClick = useCallbackRef(onSlideBtnClick);
+	const carouselStore = useMemo(() => createCarouselStore({
+		images,
+		onSlideBtnClick: savedOnSlideBtnClick
+	}), [images, savedOnSlideBtnClick]);
+	const useCarouselStore = (selector) => {
+		return useStore(carouselStore, selector);
+	};
+	const savedUseCarouselStore = useCallbackRef(useCarouselStore);
+	return useMemo(() => ({
+		carouselStore,
+		useCarouselStore: savedUseCarouselStore
+	}), [carouselStore, savedUseCarouselStore]);
+};
+
+//#endregion
+//#region src/components/ui/carousel/icons.tsx
+const ChevronLeftIcon = (props) => /* @__PURE__ */ jsx("svg", {
+	xmlns: "http://www.w3.org/2000/svg",
+	width: "1em",
+	height: "1em",
+	viewBox: "0 0 24 24",
+	...props,
+	children: /* @__PURE__ */ jsxs("g", {
+		fill: "none",
+		stroke: "currentColor",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		strokeWidth: "2",
+		children: [/* @__PURE__ */ jsx("circle", {
+			cx: "12",
+			cy: "12",
+			r: "10"
+		}), /* @__PURE__ */ jsx("path", { d: "m14 16l-4-4l4-4" })]
+	})
+});
+
+//#endregion
+//#region src/components/ui/carousel/useCarouselOptions.ts
+const useCarouselOptions = (options) => {
+	const { actions, autoSlideInterval = 5e3, hasAutoSlide = false, shouldPauseOnHover = false } = options;
+	const [isPaused, setIsPaused] = useState(false);
+	useAnimationInterval({
+		intervalDuration: hasAutoSlide && !isPaused ? autoSlideInterval : null,
+		onAnimation: actions.goToNextSlide
+	});
+	const pauseAutoSlide = useCallbackRef(() => shouldPauseOnHover && setIsPaused(true));
+	const resumeAutoSlide = useCallbackRef(() => shouldPauseOnHover && setIsPaused(false));
+	return {
+		pauseAutoSlide,
+		resumeAutoSlide
+	};
+};
+
+//#endregion
+//#region src/components/ui/carousel/carousel.tsx
+function CarouselRoot(props) {
+	const { as: Element = "div", autoSlideInterval, children, classNames, hasAutoSlide, images, onSlideBtnClick, shouldPauseOnHover } = props;
+	const { carouselStore } = useCarousel({
+		images,
+		onSlideBtnClick
+	});
+	const actions = carouselStore.getState().actions;
+	const { pauseAutoSlide, resumeAutoSlide } = useCarouselOptions({
+		actions,
+		autoSlideInterval,
+		hasAutoSlide,
+		shouldPauseOnHover
+	});
+	return /* @__PURE__ */ jsx(CarouselStoreContextProvider, {
+		store: carouselStore,
+		children: /* @__PURE__ */ jsx(Element, {
+			"data-scope": "carousel",
+			"data-part": "content",
+			"data-slot": "carousel-content",
+			className: cnMerge("relative select-none", classNames?.base),
+			onMouseEnter: pauseAutoSlide,
+			onMouseLeave: resumeAutoSlide,
+			children: /* @__PURE__ */ jsx("div", {
+				className: cnMerge("flex size-full overflow-x-scroll [scrollbar-width:none] [&::-webkit-scrollbar]:hidden", classNames?.scrollContainer),
+				children
+			})
+		})
+	});
+}
+function CarouselButton(props) {
+	const { classNames, icon, variant } = props;
+	const { goToNextSlide, goToPreviousSlide } = useCarouselStoreContext((state) => state.actions);
+	return /* @__PURE__ */ jsx("button", {
+		"data-scope": "carousel",
+		"data-part": "button",
+		"data-slot": "carousel-button",
+		type: "button",
+		className: cnMerge("z-30 flex h-full w-fit items-center", variant === "prev" ? "justify-start" : "justify-end", classNames?.base),
+		onClick: variant === "prev" ? goToPreviousSlide : goToNextSlide,
+		children: /* @__PURE__ */ jsx("span", {
+			className: cnMerge("transition-transform active:scale-[1.06]", classNames?.iconContainer),
+			children: icon ?? /* @__PURE__ */ jsx(ChevronLeftIcon, { className: cnMerge(variant === "next" && "rotate-180", classNames?.defaultIcon) })
+		})
+	});
+}
+function CarouselControls(props) {
+	const { classNames, icon } = props;
+	return /* @__PURE__ */ jsx("div", {
+		"data-scope": "carousel",
+		"data-part": "controls",
+		"data-slot": "carousel-controls",
+		className: cnMerge("absolute inset-0 flex justify-between", classNames?.base),
+		children: /* @__PURE__ */ jsxs(ShowRoot, {
+			when: icon?.iconType,
+			children: [/* @__PURE__ */ jsxs(ShowContent, { children: [/* @__PURE__ */ jsx(CarouselButton, {
+				variant: "prev",
+				classNames: {
+					defaultIcon: classNames?.defaultIcon,
+					iconContainer: cnMerge(icon?.iconType === "nextIcon" && "rotate-180", classNames?.iconContainer)
+				},
+				icon: icon?.icon
+			}), /* @__PURE__ */ jsx(CarouselButton, {
+				variant: "next",
+				classNames: {
+					defaultIcon: classNames?.defaultIcon,
+					iconContainer: cnMerge(icon?.iconType === "prevIcon" && "rotate-180", classNames?.iconContainer)
+				},
+				icon: icon?.icon
+			})] }), /* @__PURE__ */ jsxs(ShowFallback, { children: [/* @__PURE__ */ jsx(CarouselButton, {
+				variant: "prev",
+				classNames: {
+					defaultIcon: classNames?.defaultIcon,
+					iconContainer: classNames?.iconContainer
+				},
+				icon: icon?.prev
+			}), /* @__PURE__ */ jsx(CarouselButton, {
+				variant: "next",
+				classNames: {
+					defaultIcon: classNames?.defaultIcon,
+					iconContainer: classNames?.iconContainer
+				},
+				icon: icon?.next
+			})] })]
+		})
+	});
+}
+function CarouselItemList(props) {
+	const { children, className, each } = props;
+	const currentSlide = useCarouselStoreContext((state) => state.currentSlide);
+	const images = useCarouselStoreContext((state) => each ?? state.images);
+	return /* @__PURE__ */ jsx("ul", {
+		"data-scope": "carousel",
+		"data-part": "item-list",
+		"data-slot": "carousel-item-list",
+		className: cnMerge(`flex w-full shrink-0 transform-[translate3d(var(--translate-distance),0,0)] snap-center
+				transition-transform duration-800`, className),
+		style: { "--translate-distance": `-${currentSlide * 100}%` },
+		children: isFunction(children) ? /* @__PURE__ */ jsx(For, {
+			each: images,
+			renderItem: (image, index, array) => children({
+				array,
+				image,
+				index
+			})
+		}) : children
+	});
+}
+function CarouselItem(props) {
+	const { children, className,...restOfProps } = props;
+	return /* @__PURE__ */ jsx("li", {
+		"data-scope": "carousel",
+		"data-part": "item",
+		"data-slot": "carousel-item",
+		className: cnMerge("flex w-full shrink-0 snap-center justify-center", className),
+		...restOfProps,
+		children
+	});
+}
+function CarouselCaption(props) {
+	const { as: HtmlElement = "div", children, className } = props;
+	return /* @__PURE__ */ jsx(HtmlElement, {
+		"data-scope": "carousel",
+		"data-part": "caption",
+		"data-slot": "carousel-caption",
+		className: cnMerge("absolute z-10", className),
+		children
+	});
+}
+function CarouselIndicatorList(props) {
+	const { children, className, each } = props;
+	const images = useCarouselStoreContext((state) => each ?? state.images);
+	return /* @__PURE__ */ jsx("ul", {
+		"data-scope": "carousel",
+		"data-part": "indicator-list",
+		"data-slot": "carousel-indicator-list",
+		className: cnMerge("absolute bottom-[25px] z-[2] flex w-full items-center justify-center gap-[15px]", className),
+		children: isFunction(children) ? /* @__PURE__ */ jsx(For, {
+			each: images,
+			renderItem: (image, index, array) => children({
+				array,
+				image,
+				index
+			})
+		}) : children
+	});
+}
+function CarouselIndicator(props) {
+	const { classNames, currentIndex } = props;
+	const { actions: { goToSlide }, currentSlide } = useCarouselStoreContext((state) => state);
+	return /* @__PURE__ */ jsx("li", {
+		"data-scope": "carousel",
+		"data-part": "indicator",
+		"data-slot": "carousel-indicator",
+		className: cnMerge("inline-flex", classNames?.base),
+		children: /* @__PURE__ */ jsx("button", {
+			type: "button",
+			onClick: () => goToSlide(currentIndex),
+			className: cnMerge("size-[6px] rounded-[50%]", classNames?.base, currentIndex === currentSlide && ["w-[35px] rounded-[5px]", classNames?.isActive])
+		})
+	});
+}
+
+//#endregion
+//#region src/components/ui/carousel/carousel-parts.ts
+var carousel_parts_exports = __export({
+	Button: () => CarouselButton,
+	Caption: () => CarouselCaption,
+	Controls: () => CarouselControls,
+	Indicator: () => CarouselIndicator,
+	IndicatorGroup: () => CarouselIndicatorList,
+	Item: () => CarouselItem,
+	ItemGroup: () => CarouselItemList,
+	Root: () => CarouselRoot
+});
+
+//#endregion
+export { carousel_parts_exports as Carousel, CarouselButton, CarouselCaption, CarouselControls, CarouselIndicator, CarouselIndicatorList, CarouselItem, CarouselItemList, CarouselRoot };
+//# sourceMappingURL=index.js.map

package/dist/esm/ui/carousel/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["useCarouselStore: typeof useCarouselStoreContext","Show.Root","Show.Content","Show.Fallback"],"sources":["../../../../src/components/ui/carousel/carousel-store-context.ts","../../../../src/components/ui/carousel/icons.tsx","../../../../src/components/ui/carousel/useCarouselOptions.ts","../../../../src/components/ui/carousel/carousel.tsx","../../../../src/components/ui/carousel/carousel-parts.ts"],"sourcesContent":["import { createStore } from \"@zayne-labs/toolkit-core\";\nimport { useCallbackRef, useStore } from \"@zayne-labs/toolkit-react\";\nimport { createZustandContext } from \"@zayne-labs/toolkit-react/zustand\";\nimport type { PrettyOmit } from \"@zayne-labs/toolkit-type-helpers\";\nimport { useMemo } from \"react\";\nimport type { CarouselRootProps, CarouselStore, ImagesType } from \"./types\";\n\nconst [CarouselStoreContextProvider, useCarouselStoreContext] = createZustandContext<CarouselStore>({\n\thookName: \"useCarouselStore\",\n\tname: \"CarouselStoreContext\",\n\tproviderName: \"CarouselRoot\",\n});\n\n// CarouselStore Creation\nconst createCarouselStore = <TImages extends ImagesType>(\n\tstoreValues: PrettyOmit<CarouselRootProps<TImages>, \"children\">\n) => {\n\tconst { images, onSlideBtnClick } = storeValues;\n\n\tconst carouselStore = createStore<CarouselStore<TImages>>((set, get) => ({\n\t\tcurrentSlide: 0,\n\t\timages,\n\t\tmaxSlide: images.length - 1,\n\n\t\t/* eslint-disable perfectionist/sort-objects -- actions should be last */\n\t\tactions: {\n\t\t\t/* eslint-enable perfectionist/sort-objects -- actions should be last */\n\n\t\t\tgoToNextSlide: () => {\n\t\t\t\tconst { currentSlide, maxSlide } = get();\n\t\t\t\tconst { goToSlide } = get().actions;\n\n\t\t\t\tif (currentSlide === maxSlide) {\n\t\t\t\t\tgoToSlide(0);\n\t\t\t\t\treturn;\n\t\t\t\t}\n\n\t\t\t\tgoToSlide(currentSlide + 1);\n\t\t\t},\n\n\t\t\tgoToPreviousSlide: () => {\n\t\t\t\tconst { currentSlide, maxSlide } = get();\n\t\t\t\tconst { goToSlide } = get().actions;\n\n\t\t\t\tif (currentSlide === 0) {\n\t\t\t\t\tgoToSlide(maxSlide);\n\t\t\t\t\treturn;\n\t\t\t\t}\n\n\t\t\t\tgoToSlide(currentSlide - 1);\n\t\t\t},\n\n\t\t\tgoToSlide: (newValue) => {\n\t\t\t\tonSlideBtnClick?.();\n\n\t\t\t\tset({ currentSlide: newValue });\n\t\t\t},\n\t\t},\n\t}));\n\n\treturn carouselStore;\n};\n\nconst useCarousel = <TImages extends ImagesType>(props: Omit<CarouselRootProps<TImages>, \"children\">) => {\n\tconst { images, onSlideBtnClick } = props;\n\n\tconst savedOnSlideBtnClick = useCallbackRef(onSlideBtnClick);\n\n\tconst carouselStore = useMemo(\n\t\t() => createCarouselStore({ images, onSlideBtnClick: savedOnSlideBtnClick }),\n\t\t[images, savedOnSlideBtnClick]\n\t);\n\n\tconst useCarouselStore: typeof useCarouselStoreContext = (selector) => {\n\t\treturn useStore(carouselStore, selector);\n\t};\n\n\tconst savedUseCarouselStore = useCallbackRef(useCarouselStore);\n\n\treturn useMemo(\n\t\t() => ({ carouselStore, useCarouselStore: savedUseCarouselStore }),\n\t\t[carouselStore, savedUseCarouselStore]\n\t);\n};\n\nexport { CarouselStoreContextProvider, useCarousel, useCarouselStoreContext };\n","import * as React from \"react\";\n\nexport const ChevronLeftIcon = (props: React.SVGProps<SVGSVGElement>) => (\n\t<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"1em\" height=\"1em\" viewBox=\"0 0 24 24\" {...props}>\n\t\t<g fill=\"none\" stroke=\"currentColor\" strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth=\"2\">\n\t\t\t<circle cx=\"12\" cy=\"12\" r=\"10\" />\n\t\t\t<path d=\"m14 16l-4-4l4-4\" />\n\t\t</g>\n\t</svg>\n);\n","import { useAnimationInterval, useCallbackRef } from \"@zayne-labs/toolkit-react\";\nimport { useState } from \"react\";\nimport type { CarouselStore } from \"./types\";\n\ntype CarouselOptions = {\n\tactions: CarouselStore[\"actions\"];\n\tautoSlideInterval?: number;\n\thasAutoSlide?: boolean;\n\tshouldPauseOnHover?: boolean;\n};\n\nconst useCarouselOptions = (options: CarouselOptions) => {\n\tconst { actions, autoSlideInterval = 5000, hasAutoSlide = false, shouldPauseOnHover = false } = options;\n\n\tconst [isPaused, setIsPaused] = useState(false);\n\n\tconst shouldAutoSlide = hasAutoSlide && !isPaused;\n\n\tuseAnimationInterval({\n\t\tintervalDuration: shouldAutoSlide ? autoSlideInterval : null,\n\t\tonAnimation: actions.goToNextSlide,\n\t});\n\n\tconst pauseAutoSlide = useCallbackRef(() => shouldPauseOnHover && setIsPaused(true));\n\n\tconst resumeAutoSlide = useCallbackRef(() => shouldPauseOnHover && setIsPaused(false));\n\n\treturn { pauseAutoSlide, resumeAutoSlide };\n};\n\nexport { useCarouselOptions };\n","\"use client\";\n\nimport type { CssWithCustomProperties, PolymorphicPropsStrict } from \"@zayne-labs/toolkit-react/utils\";\nimport { isFunction } from \"@zayne-labs/toolkit-type-helpers\";\nimport * as React from \"react\";\nimport { Show } from \"@/components/common/show\";\nimport { For } from \"@/components/common/for\";\nimport { cnMerge } from \"@/lib/utils/cn\";\nimport {\n\tCarouselStoreContextProvider,\n\tuseCarousel,\n\tuseCarouselStoreContext,\n} from \"./carousel-store-context\";\nimport { ChevronLeftIcon } from \"./icons\";\nimport type {\n\tCarouselButtonsProps,\n\tCarouselControlProps,\n\tCarouselIndicatorProps,\n\tCarouselRootProps,\n\tCarouselWrapperProps,\n\tImagesType,\n\tOtherCarouselProps,\n} from \"./types\";\nimport { useCarouselOptions } from \"./useCarouselOptions\";\n\n// TODO -  Add dragging and swiping support\nexport function CarouselRoot<TImages extends ImagesType, TElement extends React.ElementType = \"div\">(\n\tprops: PolymorphicPropsStrict<TElement, CarouselRootProps<TImages>>\n) {\n\tconst {\n\t\tas: Element = \"div\",\n\t\tautoSlideInterval,\n\t\tchildren,\n\t\tclassNames,\n\t\thasAutoSlide,\n\t\timages,\n\t\tonSlideBtnClick,\n\t\tshouldPauseOnHover,\n\t} = props;\n\n\tconst { carouselStore } = useCarousel({ images, onSlideBtnClick });\n\n\tconst actions = carouselStore.getState().actions;\n\n\tconst { pauseAutoSlide, resumeAutoSlide } = useCarouselOptions({\n\t\tactions,\n\t\tautoSlideInterval,\n\t\thasAutoSlide,\n\t\tshouldPauseOnHover,\n\t});\n\n\treturn (\n\t\t<CarouselStoreContextProvider store={carouselStore}>\n\t\t\t<Element\n\t\t\t\tdata-scope=\"carousel\"\n\t\t\t\tdata-part=\"content\"\n\t\t\t\tdata-slot=\"carousel-content\"\n\t\t\t\tclassName={cnMerge(\"relative select-none\", classNames?.base)}\n\t\t\t\tonMouseEnter={pauseAutoSlide}\n\t\t\t\tonMouseLeave={resumeAutoSlide}\n\t\t\t>\n\t\t\t\t<div\n\t\t\t\t\tclassName={cnMerge(\n\t\t\t\t\t\t\"flex size-full overflow-x-scroll [scrollbar-width:none] [&::-webkit-scrollbar]:hidden\",\n\t\t\t\t\t\tclassNames?.scrollContainer\n\t\t\t\t\t)}\n\t\t\t\t>\n\t\t\t\t\t{children}\n\t\t\t\t</div>\n\t\t\t</Element>\n\t\t</CarouselStoreContextProvider>\n\t);\n}\n\nexport function CarouselButton(props: CarouselButtonsProps) {\n\tconst { classNames, icon, variant } = props;\n\n\tconst { goToNextSlide, goToPreviousSlide } = useCarouselStoreContext((state) => state.actions);\n\n\treturn (\n\t\t<button\n\t\t\tdata-scope=\"carousel\"\n\t\t\tdata-part=\"button\"\n\t\t\tdata-slot=\"carousel-button\"\n\t\t\ttype=\"button\"\n\t\t\tclassName={cnMerge(\n\t\t\t\t\"z-30 flex h-full w-fit items-center\",\n\t\t\t\tvariant === \"prev\" ? \"justify-start\" : \"justify-end\",\n\t\t\t\tclassNames?.base\n\t\t\t)}\n\t\t\tonClick={variant === \"prev\" ? goToPreviousSlide : goToNextSlide}\n\t\t>\n\t\t\t<span className={cnMerge(\"transition-transform active:scale-[1.06]\", classNames?.iconContainer)}>\n\t\t\t\t{icon ?? (\n\t\t\t\t\t<ChevronLeftIcon\n\t\t\t\t\t\tclassName={cnMerge(variant === \"next\" && \"rotate-180\", classNames?.defaultIcon)}\n\t\t\t\t\t/>\n\t\t\t\t)}\n\t\t\t</span>\n\t\t</button>\n\t);\n}\n\nexport function CarouselControls(props: CarouselControlProps) {\n\tconst { classNames, icon } = props;\n\n\treturn (\n\t\t<div\n\t\t\tdata-scope=\"carousel\"\n\t\t\tdata-part=\"controls\"\n\t\t\tdata-slot=\"carousel-controls\"\n\t\t\tclassName={cnMerge(\"absolute inset-0 flex justify-between\", classNames?.base)}\n\t\t>\n\t\t\t<Show.Root when={icon?.iconType}>\n\t\t\t\t<Show.Content>\n\t\t\t\t\t<CarouselButton\n\t\t\t\t\t\tvariant=\"prev\"\n\t\t\t\t\t\tclassNames={{\n\t\t\t\t\t\t\tdefaultIcon: classNames?.defaultIcon,\n\t\t\t\t\t\t\ticonContainer: cnMerge(\n\t\t\t\t\t\t\t\ticon?.iconType === \"nextIcon\" && \"rotate-180\",\n\t\t\t\t\t\t\t\tclassNames?.iconContainer\n\t\t\t\t\t\t\t),\n\t\t\t\t\t\t}}\n\t\t\t\t\t\ticon={icon?.icon}\n\t\t\t\t\t/>\n\n\t\t\t\t\t<CarouselButton\n\t\t\t\t\t\tvariant=\"next\"\n\t\t\t\t\t\tclassNames={{\n\t\t\t\t\t\t\tdefaultIcon: classNames?.defaultIcon,\n\t\t\t\t\t\t\ticonContainer: cnMerge(\n\t\t\t\t\t\t\t\ticon?.iconType === \"prevIcon\" && \"rotate-180\",\n\t\t\t\t\t\t\t\tclassNames?.iconContainer\n\t\t\t\t\t\t\t),\n\t\t\t\t\t\t}}\n\t\t\t\t\t\ticon={icon?.icon}\n\t\t\t\t\t/>\n\t\t\t\t</Show.Content>\n\n\t\t\t\t<Show.Fallback>\n\t\t\t\t\t<CarouselButton\n\t\t\t\t\t\tvariant=\"prev\"\n\t\t\t\t\t\tclassNames={{\n\t\t\t\t\t\t\tdefaultIcon: classNames?.defaultIcon,\n\t\t\t\t\t\t\ticonContainer: classNames?.iconContainer,\n\t\t\t\t\t\t}}\n\t\t\t\t\t\ticon={icon?.prev}\n\t\t\t\t\t/>\n\n\t\t\t\t\t<CarouselButton\n\t\t\t\t\t\tvariant=\"next\"\n\t\t\t\t\t\tclassNames={{\n\t\t\t\t\t\t\tdefaultIcon: classNames?.defaultIcon,\n\t\t\t\t\t\t\ticonContainer: classNames?.iconContainer,\n\t\t\t\t\t\t}}\n\t\t\t\t\t\ticon={icon?.next}\n\t\t\t\t\t/>\n\t\t\t\t</Show.Fallback>\n\t\t\t</Show.Root>\n\t\t</div>\n\t);\n}\n\nexport function CarouselItemList<TArrayItem>(props: CarouselWrapperProps<TArrayItem>) {\n\tconst { children, className, each } = props;\n\n\tconst currentSlide = useCarouselStoreContext((state) => state.currentSlide);\n\tconst images = useCarouselStoreContext((state) => each ?? (state.images as TArrayItem[]));\n\n\treturn (\n\t\t<ul\n\t\t\tdata-scope=\"carousel\"\n\t\t\tdata-part=\"item-list\"\n\t\t\tdata-slot=\"carousel-item-list\"\n\t\t\tclassName={cnMerge(\n\t\t\t\t`flex w-full shrink-0 transform-[translate3d(var(--translate-distance),0,0)] snap-center\n\t\t\t\ttransition-transform duration-800`,\n\t\t\t\tclassName\n\t\t\t)}\n\t\t\tstyle={\n\t\t\t\t{\n\t\t\t\t\t\"--translate-distance\": `-${currentSlide * 100}%`,\n\t\t\t\t} satisfies CssWithCustomProperties as CssWithCustomProperties\n\t\t\t}\n\t\t>\n\t\t\t{isFunction(children) ?\n\t\t\t\t<For each={images} renderItem={(image, index, array) => children({ array, image, index })} />\n\t\t\t:\tchildren}\n\t\t</ul>\n\t);\n}\n\nexport function CarouselItem(props: OtherCarouselProps) {\n\tconst { children, className, ...restOfProps } = props;\n\n\treturn (\n\t\t<li\n\t\t\tdata-scope=\"carousel\"\n\t\t\tdata-part=\"item\"\n\t\t\tdata-slot=\"carousel-item\"\n\t\t\tclassName={cnMerge(\"flex w-full shrink-0 snap-center justify-center\", className)}\n\t\t\t{...restOfProps}\n\t\t>\n\t\t\t{children}\n\t\t</li>\n\t);\n}\n\nexport function CarouselCaption<TElement extends React.ElementType = \"div\">(\n\tprops: PolymorphicPropsStrict<TElement, OtherCarouselProps>\n) {\n\tconst { as: HtmlElement = \"div\", children, className } = props;\n\n\treturn (\n\t\t<HtmlElement\n\t\t\tdata-scope=\"carousel\"\n\t\t\tdata-part=\"caption\"\n\t\t\tdata-slot=\"carousel-caption\"\n\t\t\tclassName={cnMerge(\"absolute z-10\", className)}\n\t\t>\n\t\t\t{children}\n\t\t</HtmlElement>\n\t);\n}\n\nexport function CarouselIndicatorList<TArrayItem>(props: CarouselWrapperProps<TArrayItem>) {\n\tconst { children, className, each } = props;\n\n\tconst images = useCarouselStoreContext((state) => each ?? (state.images as TArrayItem[]));\n\n\treturn (\n\t\t<ul\n\t\t\tdata-scope=\"carousel\"\n\t\t\tdata-part=\"indicator-list\"\n\t\t\tdata-slot=\"carousel-indicator-list\"\n\t\t\tclassName={cnMerge(\n\t\t\t\t\"absolute bottom-[25px] z-[2] flex w-full items-center justify-center gap-[15px]\",\n\t\t\t\tclassName\n\t\t\t)}\n\t\t>\n\t\t\t{isFunction(children) ?\n\t\t\t\t<For each={images} renderItem={(image, index, array) => children({ array, image, index })} />\n\t\t\t:\tchildren}\n\t\t</ul>\n\t);\n}\n\nexport function CarouselIndicator(props: CarouselIndicatorProps) {\n\tconst { classNames, currentIndex } = props;\n\n\tconst {\n\t\tactions: { goToSlide },\n\t\tcurrentSlide,\n\t} = useCarouselStoreContext((state) => state);\n\n\treturn (\n\t\t<li\n\t\t\tdata-scope=\"carousel\"\n\t\t\tdata-part=\"indicator\"\n\t\t\tdata-slot=\"carousel-indicator\"\n\t\t\tclassName={cnMerge(\"inline-flex\", classNames?.base)}\n\t\t>\n\t\t\t<button\n\t\t\t\ttype=\"button\"\n\t\t\t\tonClick={() => goToSlide(currentIndex)}\n\t\t\t\tclassName={cnMerge(\n\t\t\t\t\t\"size-[6px] rounded-[50%]\",\n\t\t\t\t\tclassNames?.base,\n\t\t\t\t\tcurrentIndex === currentSlide && [\"w-[35px] rounded-[5px]\", classNames?.isActive]\n\t\t\t\t)}\n\t\t\t/>\n\t\t</li>\n\t);\n}\n","export {\n\tCarouselButton as Button,\n\tCarouselCaption as Caption,\n\tCarouselControls as Controls,\n\tCarouselIndicator as Indicator,\n\tCarouselIndicatorList as IndicatorGroup,\n\tCarouselItem as Item,\n\tCarouselItemList as ItemGroup,\n\tCarouselRoot as Root,\n} from \"./carousel\";\n"],"mappings":"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"}

package/dist/esm/ui/drag-scroll/index.d.ts

@@ -1,2 +1,23 @@
-import { useDragScroll } from "../../index-C1GPFYKG.js";
-export { useDragScroll };
+import { InferProps } from "@zayne-labs/toolkit-react/utils";
+
+//#region src/components/ui/drag-scroll/use-drag-scroll.d.ts
+type ItemProps<TItemElement extends HTMLElement> = Omit<InferProps<TItemElement>, "children">;
+type RootProps<TElement extends HTMLElement> = Omit<InferProps<TElement>, "children">;
+type DragScrollProps<TElement extends HTMLElement, TItemElement extends HTMLElement> = {
+  classNames?: {
+    base?: string;
+    item?: string;
+  };
+  extraItemProps?: ItemProps<TItemElement>;
+  extraRootProps?: InferProps<TElement>;
+  orientation?: "both" | "horizontal" | "vertical";
+  usage?: "allScreens" | "desktopOnly" | "mobileAndTabletOnly";
+};
+type DragScrollResult<TElement extends HTMLElement, TItemElement extends HTMLElement> = {
+  getItemProps: (itemProps?: ItemProps<TItemElement>) => ItemProps<TItemElement>;
+  getRootProps: (rootProps?: RootProps<TElement>) => RootProps<TElement>;
+};
+declare const useDragScroll: <TElement extends HTMLElement, TItemElement extends HTMLElement = HTMLElement>(props?: DragScrollProps<TElement, TItemElement>) => DragScrollResult<TElement, TItemElement>;
+//#endregion
+export { useDragScroll };
+//# sourceMappingURL=index.d.ts.map