@zayne-labs/ui-react 0.11.2 → 0.11.4

package/dist/components/show-CMxdpPiN.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"show-CMxdpPiN.js","names":[],"sources":["../../src/components/common/show/show.tsx","../../src/components/common/show/show-parts.ts"],"sourcesContent":["\"use client\";\n\nimport { toArray } from \"@zayne-labs/toolkit-core\";\nimport { getMultipleSlots, getSingleSlot } from \"@zayne-labs/toolkit-react/utils\";\nimport { assert, isFunction } from \"@zayne-labs/toolkit-type-helpers\";\n\nexport type ShowRootProps<TWhen> =\n\t| {\n\t\t\tchildren: React.ReactNode;\n\t\t\tcontrol: \"content\";\n\t\t\tfallback?: React.ReactNode;\n\t\t\twhen?: never;\n\t  }\n\t| {\n\t\t\tchildren: React.ReactNode | ((value: TWhen) => React.ReactNode);\n\t\t\tcontrol?: \"root\";\n\t\t\tfallback?: React.ReactNode;\n\t\t\twhen: false | TWhen | null | undefined;\n\t  };\n\nexport function ShowRoot<TWhen>(props: ShowRootProps<TWhen>) {\n\tconst { children, control = \"root\", fallback = null, when } = props;\n\n\tif (control === \"content\" && !isFunction(children)) {\n\t\tconst childrenArray = toArray(children) as Array<React.ReactElement<ShowContentProps<TWhen>>>;\n\n\t\tconst foundContentSlot = childrenArray.find((child) => Boolean(child.props.when));\n\n\t\tconst fallBackSlot = getSingleSlot(childrenArray, ShowFallback);\n\n\t\tassert(\n\t\t\t!(fallBackSlot && fallback),\n\t\t\t\"The fallback prop and <Show.Fallback> cannot be used at the same time.\"\n\t\t);\n\n\t\treturn foundContentSlot ?? fallBackSlot ?? fallback;\n\t}\n\n\tconst resolvedChildren = isFunction(children) ? when && children(when) : children;\n\n\tconst {\n\t\tregularChildren,\n\t\tslots: [contentSlot, fallBackSlot],\n\t} = getMultipleSlots(resolvedChildren, [ShowContent, ShowFallback], {\n\t\terrorMessage: [\n\t\t\t\"Only one <Show.Content> component is allowed\",\n\t\t\t\"Only one <Show.Fallback> or <Show.OtherWise> component is allowed\",\n\t\t],\n\t\tthrowOnMultipleSlotMatch: true,\n\t});\n\n\tif (!when) {\n\t\tassert(\n\t\t\t!(fallBackSlot && fallback),\n\t\t\t\"The fallback prop and <Show.Fallback> cannot be used at the same time.\"\n\t\t);\n\n\t\treturn fallBackSlot ?? fallback;\n\t}\n\n\treturn contentSlot ?? regularChildren;\n}\n\nexport type ShowContentProps<TWhen> = Pick<ShowRootProps<TWhen>, \"children\" | \"when\">;\n\nexport function ShowContent<TWhen>(props: ShowContentProps<TWhen>) {\n\tconst { children, when } = props;\n\n\tconst resolvedChildren = isFunction(children) ? children(when as TWhen) : children;\n\n\treturn resolvedChildren;\n}\nShowContent.slotSymbol = Symbol(\"show-content\");\n\nexport function ShowFallback(props: { children: React.ReactNode }) {\n\tconst { children } = props;\n\n\treturn children;\n}\nShowFallback.slotSymbol = Symbol(\"show-fallback\");\n","export {\n\tShowContent as Content,\n\tShowFallback as Fallback,\n\tShowFallback as Otherwise,\n\tShowRoot as Root,\n} from \"./show\";\n"],"mappings":";;;;;AAoBA,SAAgB,SAAgB,OAA6B;CAC5D,MAAM,EAAE,UAAU,UAAU,QAAQ,WAAW,MAAM,SAAS;AAE9D,KAAI,YAAY,aAAa,CAAC,WAAW,SAAS,EAAE;EACnD,MAAM,gBAAgB,QAAQ,SAAS;EAEvC,MAAM,mBAAmB,cAAc,MAAM,UAAU,QAAQ,MAAM,MAAM,KAAK,CAAC;EAEjF,MAAM,eAAe,cAAc,eAAe,aAAa;AAE/D,SACC,EAAE,gBAAgB,WAClB,yEACA;AAED,SAAO,oBAAoB,gBAAgB;;CAK5C,MAAM,EACL,iBACA,OAAO,CAAC,aAAa,kBAClB,iBALqB,WAAW,SAAS,GAAG,QAAQ,SAAS,KAAK,GAAG,UAKlC,CAAC,aAAa,aAAa,EAAE;EACnE,cAAc,CACb,gDACA,oEACA;EACD,0BAA0B;EAC1B,CAAC;AAEF,KAAI,CAAC,MAAM;AACV,SACC,EAAE,gBAAgB,WAClB,yEACA;AAED,SAAO,gBAAgB;;AAGxB,QAAO,eAAe;;AAKvB,SAAgB,YAAmB,OAAgC;CAClE,MAAM,EAAE,UAAU,SAAS;AAI3B,QAFyB,WAAW,SAAS,GAAG,SAAS,KAAc,GAAG;;AAI3E,YAAY,aAAa,OAAO,eAAe;AAE/C,SAAgB,aAAa,OAAsC;CAClE,MAAM,EAAE,aAAa;AAErB,QAAO;;AAER,aAAa,aAAa,OAAO,gBAAgB"}

package/dist/{esm → components}/ui/card/index.d.ts

@@ -1,31 +1,31 @@
 import { PolymorphicProps } from "@zayne-labs/toolkit-react/utils";
-import * as react_jsx_runtime0 from "react/jsx-runtime";
+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, {
   asChild?: boolean;
   className?: string;
-}>): react_jsx_runtime0.JSX.Element;
+}>): _$react_jsx_runtime0.JSX.Element;
 declare function CardHeader<TElement extends React.ElementType = "header">(props: PolymorphicProps<TElement, {
   asChild?: boolean;
   className?: string;
-}>): react_jsx_runtime0.JSX.Element;
+}>): _$react_jsx_runtime0.JSX.Element;
 declare function CardTitle<TElement extends React.ElementType = "h3">(props: PolymorphicProps<TElement, {
   className?: string;
-}>): react_jsx_runtime0.JSX.Element;
+}>): _$react_jsx_runtime0.JSX.Element;
 declare function CardDescription<TElement extends React.ElementType = "p">(props: PolymorphicProps<TElement, {
   className?: string;
-}>): react_jsx_runtime0.JSX.Element;
+}>): _$react_jsx_runtime0.JSX.Element;
 declare function CardContent<TElement extends React.ElementType = "div">(props: PolymorphicProps<TElement, {
   className?: string;
-}>): react_jsx_runtime0.JSX.Element;
+}>): _$react_jsx_runtime0.JSX.Element;
 declare function CardAction<TElement extends React.ElementType = "button">(props: PolymorphicProps<TElement, {
   className?: string;
-}>): react_jsx_runtime0.JSX.Element;
+}>): _$react_jsx_runtime0.JSX.Element;
 declare function CardFooter<TElement extends React.ElementType = "footer">(props: PolymorphicProps<TElement, {
   asChild?: boolean;
   className?: string;
-}>): react_jsx_runtime0.JSX.Element;
+}>): _$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 };
 }

package/dist/{esm → components}/ui/carousel/index.d.ts

@@ -1,6 +1,6 @@
 import { PolymorphicPropsStrict } from "@zayne-labs/toolkit-react/utils";
 import { UnionDiscriminator } from "@zayne-labs/toolkit-type-helpers";
-import * as react_jsx_runtime0 from "react/jsx-runtime";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 import { StoreApi } from "@zayne-labs/toolkit-core";
 
 //#region src/components/ui/carousel/types.d.ts
@@ -21,7 +21,7 @@ type CarouselRootProps<TImages extends ImagesType = ImagesType> = {
   children: React.ReactNode;
   classNames?: {
     base?: string;
-    scrollContainer?: string;
+    content?: string;
   };
   hasAutoSlide?: boolean;
   images: CarouselStore<TImages>["images"];
@@ -37,12 +37,7 @@ type CarouselButtonsProps = {
   icon?: React.ReactElement;
   variant: "next" | "prev";
 };
-type CarouselControlProps = {
-  classNames?: {
-    base?: string;
-    defaultIcon?: string;
-    iconContainer?: string;
-  };
+type CarouselControlProps = Pick<CarouselButtonsProps, "classNames"> & {
   icon?: UnionDiscriminator<[{
     icon?: React.ReactElement;
     iconType: "nextIcon" | "prevIcon";
@@ -78,14 +73,14 @@ type OtherCarouselProps = {
 };
 //#endregion
 //#region src/components/ui/carousel/carousel.d.ts
-declare function CarouselRoot<TImages extends ImagesType, TElement extends React.ElementType = "div">(props: PolymorphicPropsStrict<TElement, CarouselRootProps<TImages>>): react_jsx_runtime0.JSX.Element;
-declare function CarouselButton(props: CarouselButtonsProps): react_jsx_runtime0.JSX.Element;
-declare function CarouselControls(props: CarouselControlProps): react_jsx_runtime0.JSX.Element;
-declare function CarouselItemList<TArray extends unknown[]>(props: CarouselWrapperProps<TArray[number]>): react_jsx_runtime0.JSX.Element;
-declare function CarouselItem(props: OtherCarouselProps): react_jsx_runtime0.JSX.Element;
-declare function CarouselCaption<TElement extends React.ElementType = "div">(props: PolymorphicPropsStrict<TElement, OtherCarouselProps>): react_jsx_runtime0.JSX.Element;
-declare function CarouselIndicatorList<TArray extends unknown[]>(props: CarouselWrapperProps<TArray[number]>): react_jsx_runtime0.JSX.Element;
-declare function CarouselIndicator(props: CarouselIndicatorProps): react_jsx_runtime0.JSX.Element;
+declare function CarouselRoot<TImages extends ImagesType, TElement extends React.ElementType = "div">(props: PolymorphicPropsStrict<TElement, CarouselRootProps<TImages>>): _$react_jsx_runtime0.JSX.Element;
+declare function CarouselButton(props: CarouselButtonsProps): _$react_jsx_runtime0.JSX.Element;
+declare function CarouselControls(props: CarouselControlProps): _$react_jsx_runtime0.JSX.Element;
+declare function CarouselItemList<TArray extends unknown[]>(props: CarouselWrapperProps<TArray[number]>): _$react_jsx_runtime0.JSX.Element;
+declare function CarouselItem(props: OtherCarouselProps): _$react_jsx_runtime0.JSX.Element;
+declare function CarouselCaption<TElement extends React.ElementType = "div">(props: PolymorphicPropsStrict<TElement, OtherCarouselProps>): _$react_jsx_runtime0.JSX.Element;
+declare function CarouselIndicatorList<TArray extends unknown[]>(props: CarouselWrapperProps<TArray[number]>): _$react_jsx_runtime0.JSX.Element;
+declare function CarouselIndicator(props: CarouselIndicatorProps): _$react_jsx_runtime0.JSX.Element;
 declare namespace carousel_parts_d_exports {
   export { CarouselButton as Button, CarouselCaption as Caption, CarouselControls as Controls, CarouselIndicator as Indicator, CarouselIndicatorList as IndicatorList, CarouselItem as Item, CarouselItemList as ItemList, CarouselRoot as Root };
 }

package/dist/{esm → components}/ui/carousel/index.js

@@ -1,7 +1,7 @@
 "use client";
 import { t as __exportAll } from "../../chunk-pbuEa-1d.js";
 import { n as For } from "../../for-DGTMIS0w.js";
-import { i as ShowRoot, n as ShowContent, r as ShowFallback } from "../../show-BzfAw7y3.js";
+import { i as ShowRoot, n as ShowContent, r as ShowFallback } from "../../show-CMxdpPiN.js";
 import { t as cnMerge } from "../../cn-jNZfGhrk.js";
 import { isFunction } from "@zayne-labs/toolkit-type-helpers";
 import { useMemo, useState } from "react";
@@ -116,14 +116,17 @@ function CarouselRoot(props) {
 	return /* @__PURE__ */ jsx(CarouselStoreContextProvider, {
 		store: carouselStore,
 		children: /* @__PURE__ */ jsx(Element, {
+			"data-slot": "carousel-root",
 			"data-scope": "carousel",
-			"data-part": "content",
-			"data-slot": "carousel-content",
-			className: cnMerge("relative select-none", classNames?.base),
+			"data-part": "root",
+			className: cnMerge("relative isolate", 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),
+				"data-scope": "carousel",
+				"data-part": "content",
+				"data-slot": "carousel-content",
+				className: cnMerge("scrollbar-hidden flex size-full overflow-x-scroll", classNames?.content),
 				children
 			})
 		})
@@ -133,11 +136,11 @@ function CarouselButton(props) {
 	const { classNames, icon, variant } = props;
 	const { goToNextSlide, goToPreviousSlide } = useCarouselStoreContext((state) => state.actions);
 	return /* @__PURE__ */ jsx("button", {
+		"data-slot": `carousel-${variant}-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),
+		className: cnMerge("absolute inset-y-0 z-20 flex items-center justify-center", variant === "prev" && "left-0", variant === "next" && "right-0", classNames?.base),
 		onClick: variant === "prev" ? goToPreviousSlide : goToNextSlide,
 		children: /* @__PURE__ */ jsx("span", {
 			className: cnMerge("transition-transform active:scale-[1.06]", classNames?.iconContainer),
@@ -147,43 +150,31 @@ function CarouselButton(props) {
 }
 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
-			})] })]
-		})
+	return /* @__PURE__ */ jsxs(ShowRoot, {
+		when: icon?.iconType,
+		children: [/* @__PURE__ */ jsxs(ShowContent, { children: [/* @__PURE__ */ jsx(CarouselButton, {
+			variant: "prev",
+			classNames: {
+				...classNames,
+				iconContainer: cnMerge(icon?.iconType === "nextIcon" && "rotate-180", classNames?.iconContainer)
+			},
+			icon: icon?.icon
+		}), /* @__PURE__ */ jsx(CarouselButton, {
+			variant: "next",
+			classNames: {
+				...classNames,
+				iconContainer: cnMerge(icon?.iconType === "prevIcon" && "rotate-180", classNames?.iconContainer)
+			},
+			icon: icon?.icon
+		})] }), /* @__PURE__ */ jsxs(ShowFallback, { children: [/* @__PURE__ */ jsx(CarouselButton, {
+			variant: "prev",
+			classNames,
+			icon: icon?.prev
+		}), /* @__PURE__ */ jsx(CarouselButton, {
+			variant: "next",
+			classNames,
+			icon: icon?.next
+		})] })]
 	});
 }
 function CarouselItemList(props) {
@@ -191,9 +182,9 @@ function CarouselItemList(props) {
 	const currentSlide = useCarouselStoreContext((state) => state.currentSlide);
 	const images = useCarouselStoreContext((state) => each ?? state.images);
 	return /* @__PURE__ */ jsx("ul", {
+		"data-slot": "carousel-item-list",
 		"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}%` },
@@ -210,20 +201,20 @@ function CarouselItemList(props) {
 function CarouselItem(props) {
 	const { children, className, ...restOfProps } = props;
 	return /* @__PURE__ */ jsx("li", {
+		"data-slot": "carousel-item",
 		"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, {
+	const { as: Element = "div", children, className } = props;
+	return /* @__PURE__ */ jsx(Element, {
+		"data-slot": "carousel-caption",
 		"data-scope": "carousel",
 		"data-part": "caption",
-		"data-slot": "carousel-caption",
 		className: cnMerge("absolute z-10", className),
 		children
 	});
@@ -232,9 +223,9 @@ function CarouselIndicatorList(props) {
 	const { children, className, each } = props;
 	const images = useCarouselStoreContext((state) => each ?? state.images);
 	return /* @__PURE__ */ jsx("ul", {
+		"data-slot": "carousel-indicator-list",
 		"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,
@@ -250,9 +241,9 @@ function CarouselIndicator(props) {
 	const { classNames, currentIndex } = props;
 	const { actions: { goToSlide }, currentSlide } = useCarouselStoreContext((state) => state);
 	return /* @__PURE__ */ jsx("li", {
+		"data-slot": "carousel-indicator",
 		"data-scope": "carousel",
 		"data-part": "indicator",
-		"data-slot": "carousel-indicator",
 		className: cnMerge("inline-flex", classNames?.base),
 		children: /* @__PURE__ */ jsx("button", {
 			type: "button",

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["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 { createReactStoreContext } 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] = createReactStoreContext<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\t// eslint-disable-next-line react-x/component-hook-factories -- Ignore\n\tconst useCarouselStore: typeof useCarouselStoreContext = (selector) => {\n\t\t// eslint-disable-next-line react-hooks/hooks -- Ignore\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","export 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 { For } from \"@/components/common/for\";\nimport { Show } from \"@/components/common/show\";\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-slot=\"carousel-root\"\n\t\t\t\tdata-scope=\"carousel\"\n\t\t\t\tdata-part=\"root\"\n\t\t\t\tclassName={cnMerge(\"relative isolate\", 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\tdata-scope=\"carousel\"\n\t\t\t\t\tdata-part=\"content\"\n\t\t\t\t\tdata-slot=\"carousel-content\"\n\t\t\t\t\tclassName={cnMerge(\n\t\t\t\t\t\t\"scrollbar-hidden flex size-full overflow-x-scroll\",\n\t\t\t\t\t\tclassNames?.content\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-slot={`carousel-${variant}-button`}\n\t\t\tdata-scope=\"carousel\"\n\t\t\tdata-part=\"button\"\n\t\t\ttype=\"button\"\n\t\t\tclassName={cnMerge(\n\t\t\t\t\"absolute inset-y-0 z-20 flex items-center justify-center\",\n\t\t\t\tvariant === \"prev\" && \"left-0\",\n\t\t\t\tvariant === \"next\" && \"right-0\",\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<Show.Root when={icon?.iconType}>\n\t\t\t<Show.Content>\n\t\t\t\t<CarouselButton\n\t\t\t\t\tvariant=\"prev\"\n\t\t\t\t\tclassNames={{\n\t\t\t\t\t\t...classNames,\n\t\t\t\t\t\ticonContainer: cnMerge(\n\t\t\t\t\t\t\ticon?.iconType === \"nextIcon\" && \"rotate-180\",\n\t\t\t\t\t\t\tclassNames?.iconContainer\n\t\t\t\t\t\t),\n\t\t\t\t\t}}\n\t\t\t\t\ticon={icon?.icon}\n\t\t\t\t/>\n\n\t\t\t\t<CarouselButton\n\t\t\t\t\tvariant=\"next\"\n\t\t\t\t\tclassNames={{\n\t\t\t\t\t\t...classNames,\n\t\t\t\t\t\ticonContainer: cnMerge(\n\t\t\t\t\t\t\ticon?.iconType === \"prevIcon\" && \"rotate-180\",\n\t\t\t\t\t\t\tclassNames?.iconContainer\n\t\t\t\t\t\t),\n\t\t\t\t\t}}\n\t\t\t\t\ticon={icon?.icon}\n\t\t\t\t/>\n\t\t\t</Show.Content>\n\n\t\t\t<Show.Fallback>\n\t\t\t\t<CarouselButton variant=\"prev\" classNames={classNames} icon={icon?.prev} />\n\n\t\t\t\t<CarouselButton variant=\"next\" classNames={classNames} icon={icon?.next} />\n\t\t\t</Show.Fallback>\n\t\t</Show.Root>\n\t);\n}\n\nexport function CarouselItemList<TArray extends unknown[]>(props: CarouselWrapperProps<TArray[number]>) {\n\tconst { children, className, each } = props;\n\n\tconst currentSlide = useCarouselStoreContext((state) => state.currentSlide);\n\tconst images = useCarouselStoreContext((state) => each ?? (state.images as TArray));\n\n\treturn (\n\t\t<ul\n\t\t\tdata-slot=\"carousel-item-list\"\n\t\t\tdata-scope=\"carousel\"\n\t\t\tdata-part=\"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-slot=\"carousel-item\"\n\t\t\tdata-scope=\"carousel\"\n\t\t\tdata-part=\"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: Element = \"div\", children, className } = props;\n\n\treturn (\n\t\t<Element\n\t\t\tdata-slot=\"carousel-caption\"\n\t\t\tdata-scope=\"carousel\"\n\t\t\tdata-part=\"caption\"\n\t\t\tclassName={cnMerge(\"absolute z-10\", className)}\n\t\t>\n\t\t\t{children}\n\t\t</Element>\n\t);\n}\n\nexport function CarouselIndicatorList<TArray extends unknown[]>(\n\tprops: CarouselWrapperProps<TArray[number]>\n) {\n\tconst { children, className, each } = props;\n\n\tconst images = useCarouselStoreContext((state) => each ?? (state.images as TArray));\n\n\treturn (\n\t\t<ul\n\t\t\tdata-slot=\"carousel-indicator-list\"\n\t\t\tdata-scope=\"carousel\"\n\t\t\tdata-part=\"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-slot=\"carousel-indicator\"\n\t\t\tdata-scope=\"carousel\"\n\t\t\tdata-part=\"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-1.5 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 IndicatorList,\n\tCarouselItem as Item,\n\tCarouselItemList as ItemList,\n\tCarouselRoot as Root,\n} from \"./carousel\";\n"],"mappings":"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"}

package/dist/{esm → components}/ui/drag-scroll/index.d.ts

@@ -1,9 +1,9 @@
 import { InferProps, PolymorphicPropsStrict } from "@zayne-labs/toolkit-react/utils";
-import * as _zayne_labs_toolkit_type_helpers0 from "@zayne-labs/toolkit-type-helpers";
+import * as _$_zayne_labs_toolkit_type_helpers0 from "@zayne-labs/toolkit-type-helpers";
 import { SelectorFn } from "@zayne-labs/toolkit-type-helpers";
-import * as react from "react";
-import * as react_jsx_runtime0 from "react/jsx-runtime";
-import * as _zayne_labs_toolkit_core0 from "@zayne-labs/toolkit-core";
+import * as _$react from "react";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+import * as _$_zayne_labs_toolkit_core0 from "@zayne-labs/toolkit-core";
 
 //#region src/components/ui/drag-scroll/drag-scroll-context.d.ts
 declare const DragScrollStoreContextProvider: (props: {
@@ -29,9 +29,9 @@ declare const DragScrollStoreContextProvider: (props: {
           shouldReplace: true;
         }) | undefined): void;
       };
-      subscribe: _zayne_labs_toolkit_core0.SubscribeFn<DragScrollStore>;
+      subscribe: _$_zayne_labs_toolkit_core0.SubscribeFn<DragScrollStore>;
     };
-  }) => react.FunctionComponentElement<react.ProviderProps<{
+  }) => _$react.FunctionComponentElement<_$react.ProviderProps<{
     getInitialState: () => DragScrollStore;
     getListeners: () => Set<(state: DragScrollStore, prevState: DragScrollStore) => void>;
     getState: () => DragScrollStore;
@@ -52,8 +52,8 @@ declare const DragScrollStoreContextProvider: (props: {
         shouldReplace: true;
       }) | undefined): void;
     };
-    subscribe: _zayne_labs_toolkit_core0.SubscribeFn<DragScrollStore>;
-  }>>, useDragScrollStoreContext: <TResult = DragScrollStore>(selector?: _zayne_labs_toolkit_type_helpers0.SelectorFn<DragScrollStore, TResult> | undefined) => TResult;
+    subscribe: _$_zayne_labs_toolkit_core0.SubscribeFn<DragScrollStore>;
+  }>>, useDragScrollStoreContext: <TResult = DragScrollStore>(selector?: _$_zayne_labs_toolkit_type_helpers0.SelectorFn<DragScrollStore, TResult> | undefined) => TResult;
 //#endregion
 //#region src/components/ui/drag-scroll/drag-scroll-store.d.ts
 type RequiredUseDragScrollProps = { [Key in keyof Required<UseDragScrollProps>]: UseDragScrollProps[Key] | undefined };
@@ -79,7 +79,7 @@ declare const createDragScrollStore: (initStoreValues: InitStoreValues) => {
       shouldReplace: true;
     }) | undefined): void;
   };
-  subscribe: _zayne_labs_toolkit_core0.SubscribeFn<DragScrollStore>;
+  subscribe: _$_zayne_labs_toolkit_core0.SubscribeFn<DragScrollStore>;
 };
 //#endregion
 //#region src/components/ui/drag-scroll/types.d.ts
@@ -91,14 +91,14 @@ type SharedInputProps = {
   unstyled?: boolean;
 };
 type PartProps<TContainerElement extends HTMLElement = HTMLElement> = {
-  container: {
-    input: PartProps<TContainerElement>["container"]["output"] & SharedInputProps;
-    output: RecordForDataAttr & InferProps<TContainerElement>;
-  };
   item: {
     input: PartProps<TContainerElement>["item"]["output"] & SharedInputProps;
     output: InferProps<HTMLElement> & RecordForDataAttr;
   };
+  list: {
+    input: PartProps<TContainerElement>["list"]["output"] & SharedInputProps;
+    output: RecordForDataAttr & InferProps<TContainerElement>;
+  };
   nextButton: {
     input: PartProps<TContainerElement>["nextButton"]["output"] & SharedInputProps;
     output: RecordForDataAttr & InferProps<"button">;
@@ -129,7 +129,7 @@ type DragScrollActions = {
     handleMouseUpOrLeave: () => void;
     handleScroll: () => void;
     initializeResizeObserver: () => (() => void) | undefined;
-    setContainerRef: (element: HTMLElement | null) => void;
+    setListRef: (element: HTMLElement | null) => void;
     updateScrollState: () => void;
   };
 };
@@ -166,13 +166,21 @@ type UseDragScrollProps = {
   usage?: "allScreens" | "desktopOnly" | "mobileAndTabletOnly";
 };
 type UseDragScrollResult<TContainerElement extends HTMLElement> = Pick<UseDragScrollProps, "disableInternalStateSubscription"> & {
-  containerRef: React.RefObject<TContainerElement | null>;
+  listRef: React.RefObject<TContainerElement | null>;
   propGetters: DragScrollPropGetters<TContainerElement>;
   storeApi: ReturnType<typeof createDragScrollStore>;
   useDragScrollStore: typeof useDragScrollStoreContext;
 };
 //#endregion
+//#region src/lib/utils/type-helpers.d.ts
+type FromCamelToKebabCase<TString extends string> = TString extends `${infer First}${infer Rest}` ? First extends Uppercase<First> ? `-${Lowercase<First>}${FromCamelToKebabCase<Rest>}` : `${First}${FromCamelToKebabCase<Rest>}` : "";
+//#endregion
 //#region src/components/ui/drag-scroll/use-drag-scroll.d.ts
+declare const getDragScrollScopeAttrs: (part: FromCamelToKebabCase<keyof PartProps>) => {
+  readonly "data-slot": "drag-scroll-item" | "drag-scroll-list" | "drag-scroll-root" | "drag-scroll-next-button" | "drag-scroll-prev-button";
+  readonly "data-scope": "drag-scroll";
+  readonly "data-part": FromCamelToKebabCase<keyof PartProps>;
+};
 declare const useDragScroll: <TContainerElement extends HTMLElement = HTMLElement>(props?: UseDragScrollProps) => UseDragScrollResult<TContainerElement>;
 //#endregion
 //#region src/components/ui/drag-scroll/drag-scroll.d.ts
@@ -180,31 +188,31 @@ type DragScrollRootProps = UseDragScrollProps & {
   asChild?: boolean;
   children: React.ReactNode;
 } & PartInputProps["root"];
-declare function DragScrollRoot<TElement extends React.ElementType = "div">(props: PolymorphicPropsStrict<TElement, DragScrollRootProps>): react_jsx_runtime0.JSX.Element;
+declare function DragScrollRoot(props: DragScrollRootProps): _$react_jsx_runtime0.JSX.Element;
 type DragScrollContextProps<TSlice> = {
   children: React.ReactNode | ((context: TSlice) => React.ReactNode);
   selector?: SelectorFn<DragScrollStore, TSlice>;
 };
-declare function DragScrollContext<TSlice = DragScrollStore>(props: DragScrollContextProps<TSlice>): react.ReactNode;
-type DragScrollContainerProps = {
+declare function DragScrollContext<TSlice = DragScrollStore>(props: DragScrollContextProps<TSlice>): _$react.ReactNode;
+type DragScrollListProps = {
   asChild?: boolean;
-} & PartInputProps["container"];
-declare function DragScrollContainer<TElement extends React.ElementType = "ul">(props: PolymorphicPropsStrict<TElement, DragScrollContainerProps>): react_jsx_runtime0.JSX.Element;
+} & PartInputProps["list"];
+declare function DragScrollList<TElement extends React.ElementType = "ul">(props: PolymorphicPropsStrict<TElement, DragScrollListProps>): _$react_jsx_runtime0.JSX.Element;
 type DragScrollItemProps = {
   asChild?: boolean;
 } & PartInputProps["item"];
-declare function DragScrollItem<TElement extends React.ElementType = "li">(props: PolymorphicPropsStrict<TElement, DragScrollItemProps>): react_jsx_runtime0.JSX.Element;
+declare function DragScrollItem<TElement extends React.ElementType = "li">(props: PolymorphicPropsStrict<TElement, DragScrollItemProps>): _$react_jsx_runtime0.JSX.Element;
 type DragScrollPrevProps = {
   asChild?: boolean;
 } & PartInputProps["prevButton"];
-declare function DragScrollPrev(props: DragScrollPrevProps): react_jsx_runtime0.JSX.Element;
+declare function DragScrollPrev(props: DragScrollPrevProps): _$react_jsx_runtime0.JSX.Element;
 type DragScrollNextProps = {
   asChild?: boolean;
 } & PartInputProps["nextButton"];
-declare function DragScrollNext(props: DragScrollNextProps): react_jsx_runtime0.JSX.Element;
+declare function DragScrollNext(props: DragScrollNextProps): _$react_jsx_runtime0.JSX.Element;
 declare namespace drag_scroll_parts_d_exports {
-  export { DragScrollContainer as Container, DragScrollContext as Context, DragScrollItem as Item, DragScrollNext as Next, DragScrollPrev as Prev, DragScrollRoot as Root };
+  export { DragScrollContext as Context, DragScrollItem as Item, DragScrollList as List, DragScrollNext as Next, DragScrollPrev as Prev, DragScrollRoot as Root };
 }
 //#endregion
-export { drag_scroll_parts_d_exports as DragScroll, DragScrollContainer, DragScrollContainerProps, DragScrollContext, DragScrollContextProps, DragScrollItem, DragScrollItemProps, DragScrollNext, DragScrollNextProps, DragScrollPrev, DragScrollPrevProps, DragScrollRoot, DragScrollRootProps, type DragScrollStore, type UseDragScrollProps, type UseDragScrollResult, useDragScroll, useDragScrollStoreContext };
+export { drag_scroll_parts_d_exports as DragScroll, DragScrollContext, DragScrollContextProps, DragScrollItem, DragScrollItemProps, DragScrollList, DragScrollListProps, DragScrollNext, DragScrollNextProps, DragScrollPrev, DragScrollPrevProps, DragScrollRoot, DragScrollRootProps, type DragScrollStore, type UseDragScrollProps, type UseDragScrollResult, getDragScrollScopeAttrs, useDragScroll, useDragScrollStoreContext };
 //# sourceMappingURL=index.d.ts.map