@zayne-labs/ui-react 0.6.3 → 0.7.0

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

@@ -1 +1 @@
-{"version":3,"sources":[],"names":[],"mappings":"","file":"index.js"}
+{"version":3,"sources":["../../../../src/components/ui/card/card.tsx","../../../../src/components/ui/card/card-parts.ts"],"names":[],"mappings":";;;;;AAMO,SAAS,SACf,KACC,EAAA;AACD,EAAA,MAAM,EAAE,EAAI,EAAA,OAAA,GAAU,SAAW,EAAA,GAAG,aAAgB,GAAA,KAAA;AAEpD,EAAO,uBAAA,KAAA,CAAA,aAAA,CAAC,OAAS,EAAA,EAAA,GAAG,WAAa,EAAA,CAAA;AAClC;AAEO,SAAS,WACf,KACC,EAAA;AACD,EAAA,MAAM,EAAE,EAAI,EAAA,OAAA,GAAU,QAAU,EAAA,GAAG,aAAgB,GAAA,KAAA;AAEnD,EAAO,uBAAA,KAAA,CAAA,aAAA,CAAC,OAAS,EAAA,EAAA,GAAG,WAAa,EAAA,CAAA;AAClC;AAEO,SAAS,UAAqD,KAAmC,EAAA;AACvG,EAAA,MAAM,EAAE,EAAI,EAAA,OAAA,GAAU,MAAM,SAAW,EAAA,GAAG,aAAgB,GAAA,KAAA;AAE1D,EAAO,uBAAA,KAAA,CAAA,aAAA,CAAC,WAAQ,SAAW,EAAA,OAAA,CAAQ,iBAAiB,SAAS,CAAA,EAAI,GAAG,WAAa,EAAA,CAAA;AAClF;AAEO,SAAS,gBACf,KACC,EAAA;AACD,EAAA,MAAM,EAAE,EAAI,EAAA,OAAA,GAAU,KAAK,SAAW,EAAA,GAAG,aAAgB,GAAA,KAAA;AAEzD,EACC,uBAAA,KAAA,CAAA,aAAA,CAAC,WAAQ,SAAW,EAAA,OAAA,CAAQ,wCAAwC,SAAS,CAAA,EAAI,GAAG,WAAa,EAAA,CAAA;AAEnG;AAEO,SAAS,YACf,KACC,EAAA;AACD,EAAA,MAAM,EAAE,EAAI,EAAA,OAAA,GAAU,KAAO,EAAA,GAAG,aAAgB,GAAA,KAAA;AAEhD,EAAO,uBAAA,KAAA,CAAA,aAAA,CAAC,OAAS,EAAA,EAAA,GAAG,WAAa,EAAA,CAAA;AAClC;AAEO,SAAS,WACf,KACC,EAAA;AACD,EAAA,MAAM,EAAE,EAAI,EAAA,OAAA,GAAU,UAAU,OAAS,EAAA,GAAG,aAAgB,GAAA,KAAA;AAE5D,EAAM,MAAA,SAAA,GAAY,UAAU,IAAO,GAAA,OAAA;AAEnC,EAAO,uBAAA,KAAA,CAAA,aAAA,CAAC,SAAW,EAAA,EAAA,GAAG,WAAa,EAAA,CAAA;AACpC;;;ACtDA,IAAA,kBAAA,GAAA;AAAA,QAAA,CAAA,kBAAA,EAAA;AAAA,EAAA,OAAA,EAAA,MAAA,WAAA;AAAA,EAAA,WAAA,EAAA,MAAA,eAAA;AAAA,EAAA,MAAA,EAAA,MAAA,UAAA;AAAA,EAAA,MAAA,EAAA,MAAA,UAAA;AAAA,EAAA,IAAA,EAAA,MAAA,QAAA;AAAA,EAAA,KAAA,EAAA,MAAA;AAAA,CAAA,CAAA","file":"index.js","sourcesContent":["import * as React from \"react\";\n\nimport { Slot } from \"@/components/common/slot\";\nimport { cnMerge } from \"@/lib/utils/cn\";\nimport type { PolymorphicProps } from \"@zayne-labs/toolkit-react/utils\";\n\nexport function CardRoot<TElement extends React.ElementType = \"article\">(\n\tprops: PolymorphicProps<TElement>\n) {\n\tconst { as: Element = \"article\", ...restOfProps } = props;\n\n\treturn <Element {...restOfProps} />;\n}\n\nexport function CardHeader<TElement extends React.ElementType = \"header\">(\n\tprops: PolymorphicProps<TElement>\n) {\n\tconst { as: Element = \"header\", ...restOfProps } = props;\n\n\treturn <Element {...restOfProps} />;\n}\n\nexport function CardTitle<TElement extends React.ElementType = \"h3\">(props: PolymorphicProps<TElement>) {\n\tconst { as: Element = \"h3\", className, ...restOfProps } = props;\n\n\treturn <Element className={cnMerge(\"font-semibold\", className)} {...restOfProps} />;\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 className={cnMerge(\"text-sm text-shadcn-muted-foreground\", className)} {...restOfProps} />\n\t);\n}\n\nexport function CardContent<TElement extends React.ElementType = \"div\">(\n\tprops: PolymorphicProps<TElement>\n) {\n\tconst { as: Element = \"div\", ...restOfProps } = props;\n\n\treturn <Element {...restOfProps} />;\n}\n\nexport function CardFooter<TElement extends React.ElementType = \"footer\">(\n\tprops: PolymorphicProps<TElement, { asChild?: boolean }>\n) {\n\tconst { as: Element = \"footer\", asChild, ...restOfProps } = props;\n\n\tconst Component = asChild ? Slot : Element;\n\n\treturn <Component {...restOfProps} />;\n}\n","export {\n\tCardContent as Content,\n\tCardDescription as Description,\n\tCardFooter as Footer,\n\tCardHeader as Header,\n\tCardRoot as Root,\n\tCardTitle as Title,\n} from \"./card\";\n"]}

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

@@ -1,6 +1,274 @@
-export { carousel_parts_exports as Carousel, CarouselButton, CarouselCaption, CarouselContent, CarouselControls, CarouselIndicator, CarouselIndicatorGroup, CarouselItem, CarouselItemGroup } from '../../chunk-GVL6BLX5.js';
-import '../../chunk-OHG7GB7O.js';
-import '../../chunk-DW3FXTFL.js';
-import '../../chunk-PZ5AY32C.js';
+import { cnMerge } from '../../chunk-OHG7GB7O.js';
+import { getElementList } from '../../chunk-DW3FXTFL.js';
+import { __export } from '../../chunk-PZ5AY32C.js';
+import * as React3 from 'react';
+import { useEffect, useState } from 'react';
+import { useConstant, useAnimationInterval, useCallbackRef } from '@zayne-labs/toolkit-react';
+import { createZustandContext } from '@zayne-labs/toolkit-react/zustand';
+import { create } from 'zustand';
+
+var ChevronLeftIcon = (props) => /* @__PURE__ */ React3.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", viewBox: "0 0 24 24", ...props }, /* @__PURE__ */ React3.createElement("g", { fill: "none", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2" }, /* @__PURE__ */ React3.createElement("circle", { cx: "12", cy: "12", r: "10" }), /* @__PURE__ */ React3.createElement("path", { d: "m14 16l-4-4l4-4" })));
+var [Provider, useCarouselStoreContext] = createZustandContext({
+  hookName: "useCarouselStore",
+  name: "CarouselStoreContext",
+  providerName: "CarouselContextProvider"
+});
+var createCarouselStore = (storeValues) => {
+  const { images, onSlideBtnClick } = storeValues;
+  const useInitCarouselStore = create()((set, get) => ({
+    currentSlide: 0,
+    images,
+    maxSlide: images.length - 1,
+    /* eslint-disable perfectionist/sort-objects -- actions should be last */
+    actions: {
+      /* eslint-enable perfectionist/sort-objects -- actions should be last */
+      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 });
+      }
+    }
+  }));
+  return useInitCarouselStore;
+};
+var useCarousel = (props) => {
+  const { images, onSlideBtnClick } = props;
+  const useInitCarouselStore = useConstant(() => createCarouselStore({ images, onSlideBtnClick }));
+  useEffect(() => {
+    useInitCarouselStore.setState({ images });
+  }, [images]);
+  return useInitCarouselStore;
+};
+function CarouselContextProvider(props) {
+  const { children, images, onSlideBtnClick } = props;
+  const useInitCarouselStore = useCarousel({ images, onSlideBtnClick });
+  return /* @__PURE__ */ React3.createElement(Provider, { value: useInitCarouselStore }, children);
+}
+var useCarouselOptions = (options = {}) => {
+  const { autoSlideInterval = 5e3, hasAutoSlide = false, shouldPauseOnHover = false } = options;
+  const { goToNextSlide } = useCarouselStoreContext((state) => state.actions);
+  const [isPaused, setIsPaused] = useState(false);
+  const shouldAutoSlide = hasAutoSlide && !isPaused;
+  useAnimationInterval({
+    intervalDuration: shouldAutoSlide ? autoSlideInterval : null,
+    onAnimation: goToNextSlide
+  });
+  const pauseAutoSlide = useCallbackRef(() => shouldPauseOnHover && setIsPaused(true));
+  const resumeAutoSlide = useCallbackRef(() => shouldPauseOnHover && setIsPaused(false));
+  return { pauseAutoSlide, resumeAutoSlide };
+};
+
+// src/components/ui/carousel/carousel.tsx
+function CarouselContent(props) {
+  const {
+    as: HtmlElement = "article",
+    autoSlideInterval,
+    children,
+    classNames,
+    hasAutoSlide,
+    shouldPauseOnHover
+  } = props;
+  const { pauseAutoSlide, resumeAutoSlide } = useCarouselOptions({
+    autoSlideInterval,
+    hasAutoSlide,
+    shouldPauseOnHover
+  });
+  return /* @__PURE__ */ React3.createElement(
+    HtmlElement,
+    {
+      "data-id": "Carousel",
+      className: cnMerge("relative select-none", classNames?.base),
+      onMouseEnter: pauseAutoSlide,
+      onMouseLeave: resumeAutoSlide
+    },
+    /* @__PURE__ */ React3.createElement(
+      "div",
+      {
+        "data-id": "Scroll Container",
+        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__ */ React3.createElement(
+    "button",
+    {
+      type: "button",
+      className: cnMerge(
+        "z-30 flex h-full w-[15%] items-center",
+        variant === "prev" ? "justify-start" : "justify-end",
+        classNames?.base
+      ),
+      onClick: variant === "prev" ? goToPreviousSlide : goToNextSlide
+    },
+    /* @__PURE__ */ React3.createElement("span", { className: cnMerge("transition-transform active:scale-[1.06]", classNames?.iconContainer) }, icon ?? /* @__PURE__ */ React3.createElement(
+      ChevronLeftIcon,
+      {
+        className: cnMerge(variant === "next" && "rotate-180", classNames?.defaultIcon)
+      }
+    ))
+  );
+}
+function CarouselControls(props) {
+  const { classNames, icon } = props;
+  return /* @__PURE__ */ React3.createElement("div", { className: cnMerge("absolute inset-0 flex justify-between", classNames?.base) }, icon?.iconType ? /* @__PURE__ */ React3.createElement(React3.Fragment, null, /* @__PURE__ */ React3.createElement(
+    CarouselButton,
+    {
+      variant: "prev",
+      classNames: {
+        defaultIcon: classNames?.defaultIcon,
+        iconContainer: cnMerge(
+          icon.iconType === "nextIcon" && "rotate-180",
+          classNames?.iconContainer
+        )
+      },
+      icon: icon.icon
+    }
+  ), /* @__PURE__ */ React3.createElement(
+    CarouselButton,
+    {
+      variant: "next",
+      classNames: {
+        defaultIcon: classNames?.defaultIcon,
+        iconContainer: cnMerge(
+          icon.iconType === "prevIcon" && "rotate-180",
+          classNames?.iconContainer
+        )
+      },
+      icon: icon.icon
+    }
+  )) : /* @__PURE__ */ React3.createElement(React3.Fragment, null, /* @__PURE__ */ React3.createElement(
+    CarouselButton,
+    {
+      variant: "prev",
+      classNames: {
+        defaultIcon: classNames?.defaultIcon,
+        iconContainer: classNames?.iconContainer
+      },
+      icon: icon?.prev
+    }
+  ), /* @__PURE__ */ React3.createElement(
+    CarouselButton,
+    {
+      variant: "next",
+      classNames: {
+        defaultIcon: classNames?.defaultIcon,
+        iconContainer: classNames?.iconContainer
+      },
+      icon: icon?.next
+    }
+  )));
+}
+function CarouselItemGroup(props) {
+  const { children, className, each, render } = props;
+  const [ItemList] = getElementList("base");
+  const currentSlide = useCarouselStoreContext((state) => state.currentSlide);
+  const images = useCarouselStoreContext((state) => each ?? state.images);
+  return /* @__PURE__ */ React3.createElement(
+    "ul",
+    {
+      "data-id": "Carousel Image Wrapper",
+      className: cnMerge(
+        `flex w-full shrink-0 [transform:translate3d(var(--translate-distance),0,0)] snap-center
+				[transition:transform_800ms_ease]`,
+        className
+      ),
+      style: {
+        "--translate-distance": `-${currentSlide * 100}%`
+      }
+    },
+    typeof render === "function" ? /* @__PURE__ */ React3.createElement(ItemList, { each: images, render }) : /* @__PURE__ */ React3.createElement(ItemList, { each: images }, children)
+  );
+}
+function CarouselItem({ children, className, ...restOfProps }) {
+  return /* @__PURE__ */ React3.createElement(
+    "li",
+    {
+      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__ */ React3.createElement(HtmlElement, { "data-id": "Carousel Caption", className: cnMerge("absolute z-10", className) }, children);
+}
+function CarouselIndicatorGroup(props) {
+  const { children, className, each, render } = props;
+  const images = useCarouselStoreContext((state) => each ?? state.images);
+  const [IndicatorList] = getElementList("base");
+  return /* @__PURE__ */ React3.createElement(
+    "ul",
+    {
+      "data-id": "Carousel Indicators",
+      className: cnMerge(
+        "absolute bottom-10 z-[2] flex w-full items-center justify-center gap-6",
+        className
+      )
+    },
+    typeof render === "function" ? /* @__PURE__ */ React3.createElement(IndicatorList, { each: images, render }) : /* @__PURE__ */ React3.createElement(IndicatorList, { each: images }, children)
+  );
+}
+function CarouselIndicator(props) {
+  const { classNames, currentIndex } = props;
+  const {
+    actions: { goToSlide },
+    currentSlide
+  } = useCarouselStoreContext((state) => state);
+  return /* @__PURE__ */ React3.createElement("li", { className: cnMerge("inline-flex", classNames?.base) }, /* @__PURE__ */ React3.createElement(
+    "button",
+    {
+      "data-active": currentIndex === currentSlide,
+      type: "button",
+      onClick: () => goToSlide(currentIndex),
+      className: cnMerge(
+        "size-[6px] rounded-[50%]",
+        classNames?.button,
+        currentIndex === currentSlide && ["w-14 rounded-lg", classNames?.activeBtn]
+      )
+    }
+  ));
+}
+
+// src/components/ui/carousel/carousel-parts.ts
+var carousel_parts_exports = {};
+__export(carousel_parts_exports, {
+  Button: () => CarouselButton,
+  Caption: () => CarouselCaption,
+  Content: () => CarouselContent,
+  Controls: () => CarouselControls,
+  Indicator: () => CarouselIndicator,
+  IndicatorWrapper: () => CarouselIndicatorGroup,
+  Item: () => CarouselItem,
+  ItemWrapper: () => CarouselItemGroup,
+  Root: () => CarouselContextProvider
+});
+
+export { carousel_parts_exports as Carousel, CarouselButton, CarouselCaption, CarouselContent, CarouselControls, CarouselIndicator, CarouselIndicatorGroup, CarouselItem, CarouselItemGroup };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":[],"names":[],"mappings":"","file":"index.js"}
+{"version":3,"sources":["../../../../src/components/icons/ChevronLeftIcon.tsx","../../../../src/components/ui/carousel/carousel-store-context.tsx","../../../../src/components/ui/carousel/useCarouselOptions.ts","../../../../src/components/ui/carousel/carousel.tsx","../../../../src/components/ui/carousel/carousel-parts.ts"],"names":["React","React2"],"mappings":";;;;;;;;;AAEA,IAAM,kBAAkB,CAAC,KAAA,0CACvB,KAAI,EAAA,EAAA,KAAA,EAAM,8BAA6B,KAAM,EAAA,KAAA,EAAM,MAAO,EAAA,KAAA,EAAM,SAAQ,WAAa,EAAA,GAAG,yBACvFA,MAAA,CAAA,aAAA,CAAA,GAAA,EAAA,EAAE,MAAK,MAAO,EAAA,MAAA,EAAO,cAAe,EAAA,aAAA,EAAc,SAAQ,cAAe,EAAA,OAAA,EAAQ,aAAY,GAC7F,EAAA,kBAAAA,MAAA,CAAA,aAAA,CAAC,YAAO,EAAG,EAAA,IAAA,EAAK,IAAG,IAAK,EAAA,CAAA,EAAE,MAAK,CAC/B,kBAAAA,MAAA,CAAA,aAAA,CAAC,UAAK,CAAE,EAAA,iBAAA,EAAkB,CAC3B,CACD,CAAA;ACCD,IAAM,CAAC,QAAA,EAAU,uBAAuB,CAAA,GAAI,oBAAoC,CAAA;AAAA,EAC/E,QAAU,EAAA,kBAAA;AAAA,EACV,IAAM,EAAA,sBAAA;AAAA,EACN,YAAc,EAAA;AACf,CAAC,CAAA;AAGD,IAAM,mBAAA,GAAsB,CAC3B,WACI,KAAA;AACJ,EAAM,MAAA,EAAE,MAAQ,EAAA,eAAA,EAAoB,GAAA,WAAA;AAEpC,EAAA,MAAM,oBAAuB,GAAA,MAAA,EAAiC,CAAA,CAAC,KAAK,GAAS,MAAA;AAAA,IAC5E,YAAc,EAAA,CAAA;AAAA,IACd,MAAA;AAAA,IACA,QAAA,EAAU,OAAO,MAAS,GAAA,CAAA;AAAA;AAAA,IAG1B,OAAS,EAAA;AAAA;AAAA,MAGR,eAAe,MAAM;AACpB,QAAA,MAAM,EAAE,YAAA,EAAc,QAAS,EAAA,GAAI,GAAI,EAAA;AACvC,QAAA,MAAM,EAAE,SAAA,EAAc,GAAA,GAAA,EAAM,CAAA,OAAA;AAE5B,QAAA,IAAI,iBAAiB,QAAU,EAAA;AAC9B,UAAA,SAAA,CAAU,CAAC,CAAA;AACX,UAAA;AAAA;AAGD,QAAA,SAAA,CAAU,eAAe,CAAC,CAAA;AAAA,OAC3B;AAAA,MAEA,mBAAmB,MAAM;AACxB,QAAA,MAAM,EAAE,YAAA,EAAc,QAAS,EAAA,GAAI,GAAI,EAAA;AACvC,QAAA,MAAM,EAAE,SAAA,EAAc,GAAA,GAAA,EAAM,CAAA,OAAA;AAE5B,QAAA,IAAI,iBAAiB,CAAG,EAAA;AACvB,UAAA,SAAA,CAAU,QAAQ,CAAA;AAClB,UAAA;AAAA;AAGD,QAAA,SAAA,CAAU,eAAe,CAAC,CAAA;AAAA,OAC3B;AAAA,MAEA,SAAA,EAAW,CAAC,QAAa,KAAA;AACxB,QAAkB,eAAA,IAAA;AAElB,QAAI,GAAA,CAAA,EAAE,YAAc,EAAA,QAAA,EAAU,CAAA;AAAA;AAC/B;AACD,GACC,CAAA,CAAA;AAEF,EAAO,OAAA,oBAAA;AACR,CAAA;AAEA,IAAM,WAAA,GAAc,CACnB,KACI,KAAA;AACJ,EAAM,MAAA,EAAE,MAAQ,EAAA,eAAA,EAAoB,GAAA,KAAA;AAEpC,EAAM,MAAA,oBAAA,GAAuB,YAAY,MAAM,mBAAA,CAAoB,EAAE,MAAQ,EAAA,eAAA,EAAiB,CAAC,CAAA;AAG/F,EAAA,SAAA,CAAU,MAAM;AACf,IAAqB,oBAAA,CAAA,QAAA,CAAS,EAAE,MAAA,EAAQ,CAAA;AAAA,GAEzC,EAAG,CAAC,MAAM,CAAC,CAAA;AAEX,EAAO,OAAA,oBAAA;AACR,CAAA;AAGA,SAAS,wBAAoD,KAAuC,EAAA;AACnG,EAAA,MAAM,EAAE,QAAA,EAAU,MAAQ,EAAA,eAAA,EAAoB,GAAA,KAAA;AAE9C,EAAA,MAAM,oBAAuB,GAAA,WAAA,CAAY,EAAE,MAAA,EAAQ,iBAAiB,CAAA;AAEpE,EAAA,uBAAQC,MAAA,CAAA,aAAA,CAAA,QAAA,EAAA,EAAS,KAAO,EAAA,oBAAA,EAAA,EAAuB,QAAS,CAAA;AACzD;AC9EA,IAAM,kBAAqB,GAAA,CAAC,OAA2B,GAAA,EAAO,KAAA;AAC7D,EAAA,MAAM,EAAE,iBAAoB,GAAA,GAAA,EAAM,eAAe,KAAO,EAAA,kBAAA,GAAqB,OAAU,GAAA,OAAA;AAEvF,EAAA,MAAM,EAAE,aAAc,EAAA,GAAI,wBAAwB,CAAC,KAAA,KAAU,MAAM,OAAO,CAAA;AAE1E,EAAA,MAAM,CAAC,QAAA,EAAU,WAAW,CAAA,GAAI,SAAS,KAAK,CAAA;AAE9C,EAAM,MAAA,eAAA,GAAkB,gBAAgB,CAAC,QAAA;AAEzC,EAAqB,oBAAA,CAAA;AAAA,IACpB,gBAAA,EAAkB,kBAAkB,iBAAoB,GAAA,IAAA;AAAA,IACxD,WAAa,EAAA;AAAA,GACb,CAAA;AAED,EAAA,MAAM,iBAAiB,cAAe,CAAA,MAAM,kBAAsB,IAAA,WAAA,CAAY,IAAI,CAAC,CAAA;AAEnF,EAAA,MAAM,kBAAkB,cAAe,CAAA,MAAM,kBAAsB,IAAA,WAAA,CAAY,KAAK,CAAC,CAAA;AAErF,EAAO,OAAA,EAAE,gBAAgB,eAAgB,EAAA;AAC1C,CAAA;;;ACTO,SAAS,gBACf,KACC,EAAA;AACD,EAAM,MAAA;AAAA,IACL,IAAI,WAAc,GAAA,SAAA;AAAA,IAClB,iBAAA;AAAA,IACA,QAAA;AAAA,IACA,UAAA;AAAA,IACA,YAAA;AAAA,IACA;AAAA,GACG,GAAA,KAAA;AAEJ,EAAA,MAAM,EAAE,cAAA,EAAgB,eAAgB,EAAA,GAAI,kBAAmB,CAAA;AAAA,IAC9D,iBAAA;AAAA,IACA,YAAA;AAAA,IACA;AAAA,GACA,CAAA;AAGD,EACC,uBAAA,MAAA,CAAA,aAAA;AAAA,IAAC,WAAA;AAAA,IAAA;AAAA,MACA,SAAQ,EAAA,UAAA;AAAA,MACR,SAAW,EAAA,OAAA,CAAQ,sBAAwB,EAAA,UAAA,EAAY,IAAI,CAAA;AAAA,MAC3D,YAAc,EAAA,cAAA;AAAA,MACd,YAAc,EAAA;AAAA,KAAA;AAAA,oBAEd,MAAA,CAAA,aAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACA,SAAQ,EAAA,kBAAA;AAAA,QACR,SAAW,EAAA,OAAA;AAAA,UACV,uFAAA;AAAA,UACA,UAAY,EAAA;AAAA;AACb,OAAA;AAAA,MAEC;AAAA;AACF,GACD;AAEF;AAEO,SAAS,eAAe,KAA6B,EAAA;AAC3D,EAAA,MAAM,EAAE,UAAA,EAAY,IAAM,EAAA,OAAA,EAAY,GAAA,KAAA;AAEtC,EAAM,MAAA,EAAE,eAAe,iBAAkB,EAAA,GAAI,wBAAwB,CAAC,KAAA,KAAU,MAAM,OAAO,CAAA;AAE7F,EACC,uBAAA,MAAA,CAAA,aAAA;AAAA,IAAC,QAAA;AAAA,IAAA;AAAA,MACA,IAAK,EAAA,QAAA;AAAA,MACL,SAAW,EAAA,OAAA;AAAA,QACV,uCAAA;AAAA,QACA,OAAA,KAAY,SAAS,eAAkB,GAAA,aAAA;AAAA,QACvC,UAAY,EAAA;AAAA,OACb;AAAA,MACA,OAAA,EAAS,OAAY,KAAA,MAAA,GAAS,iBAAoB,GAAA;AAAA,KAAA;AAAA,oBAElD,MAAA,CAAA,aAAA,CAAC,UAAK,SAAW,EAAA,OAAA,CAAQ,4CAA4C,UAAY,EAAA,aAAa,KAC5F,IACA,oBAAA,MAAA,CAAA,aAAA;AAAA,MAAC,eAAA;AAAA,MAAA;AAAA,QACA,WAAW,OAAQ,CAAA,OAAA,KAAY,MAAU,IAAA,YAAA,EAAc,YAAY,WAAW;AAAA;AAAA,KAGjF;AAAA,GACD;AAEF;AAEO,SAAS,iBAAiB,KAA6B,EAAA;AAC7D,EAAM,MAAA,EAAE,UAAY,EAAA,IAAA,EAAS,GAAA,KAAA;AAE7B,EACC,uBAAA,MAAA,CAAA,aAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EAAW,OAAQ,CAAA,uCAAA,EAAyC,YAAY,IAAI,CAAA,EAAA,EAC/E,IAAM,EAAA,QAAA,mBAEL,MAAA,CAAA,aAAA,CAAA,MAAA,CAAA,QAAA,EAAA,IAAA,kBAAA,MAAA,CAAA,aAAA;AAAA,IAAC,cAAA;AAAA,IAAA;AAAA,MACA,OAAQ,EAAA,MAAA;AAAA,MACR,UAAY,EAAA;AAAA,QACX,aAAa,UAAY,EAAA,WAAA;AAAA,QACzB,aAAe,EAAA,OAAA;AAAA,UACd,IAAA,CAAK,aAAa,UAAc,IAAA,YAAA;AAAA,UAChC,UAAY,EAAA;AAAA;AACb,OACD;AAAA,MACA,MAAM,IAAK,CAAA;AAAA;AAAA,GAEZ,kBAAA,MAAA,CAAA,aAAA;AAAA,IAAC,cAAA;AAAA,IAAA;AAAA,MACA,OAAQ,EAAA,MAAA;AAAA,MACR,UAAY,EAAA;AAAA,QACX,aAAa,UAAY,EAAA,WAAA;AAAA,QACzB,aAAe,EAAA,OAAA;AAAA,UACd,IAAA,CAAK,aAAa,UAAc,IAAA,YAAA;AAAA,UAChC,UAAY,EAAA;AAAA;AACb,OACD;AAAA,MACA,MAAM,IAAK,CAAA;AAAA;AAAA,GAEb,oBAGC,MAAA,CAAA,aAAA,CAAA,MAAA,CAAA,QAAA,EAAA,IAAA,kBAAA,MAAA,CAAA,aAAA;AAAA,IAAC,cAAA;AAAA,IAAA;AAAA,MACA,OAAQ,EAAA,MAAA;AAAA,MACR,UAAY,EAAA;AAAA,QACX,aAAa,UAAY,EAAA,WAAA;AAAA,QACzB,eAAe,UAAY,EAAA;AAAA,OAC5B;AAAA,MACA,MAAM,IAAM,EAAA;AAAA;AAAA,GAEb,kBAAA,MAAA,CAAA,aAAA;AAAA,IAAC,cAAA;AAAA,IAAA;AAAA,MACA,OAAQ,EAAA,MAAA;AAAA,MACR,UAAY,EAAA;AAAA,QACX,aAAa,UAAY,EAAA,WAAA;AAAA,QACzB,eAAe,UAAY,EAAA;AAAA,OAC5B;AAAA,MACA,MAAM,IAAM,EAAA;AAAA;AAAA,GAEd,CAEF,CAAA;AAEF;AAEO,SAAS,kBAA8B,KAAyC,EAAA;AACtF,EAAA,MAAM,EAAE,QAAA,EAAU,SAAW,EAAA,IAAA,EAAM,QAAW,GAAA,KAAA;AAE9C,EAAA,MAAM,CAAC,QAAQ,CAAI,GAAA,cAAA,CAAe,MAAM,CAAA;AACxC,EAAA,MAAM,YAAe,GAAA,uBAAA,CAAwB,CAAC,KAAA,KAAU,MAAM,YAAY,CAAA;AAC1E,EAAA,MAAM,SAAS,uBAAwB,CAAA,CAAC,KAAU,KAAA,IAAA,IAAS,MAAM,MAAuB,CAAA;AAExF,EACC,uBAAA,MAAA,CAAA,aAAA;AAAA,IAAC,IAAA;AAAA,IAAA;AAAA,MACA,SAAQ,EAAA,wBAAA;AAAA,MACR,SAAW,EAAA,OAAA;AAAA,QACV,CAAA;AAAA,qCAAA,CAAA;AAAA,QAEA;AAAA,OACD;AAAA,MACA,KACC,EAAA;AAAA,QACC,sBAAA,EAAwB,CAAI,CAAA,EAAA,YAAA,GAAe,GAAG,CAAA,CAAA;AAAA;AAC/C,KAAA;AAAA,IAGA,OAAO,MAAA,KAAW,UAClB,mBAAA,MAAA,CAAA,aAAA,CAAC,QAAS,EAAA,EAAA,IAAA,EAAM,MAAQ,EAAA,MAAA,EAAgB,CAExC,mBAAA,MAAA,CAAA,aAAA,CAAC,QAAS,EAAA,EAAA,IAAA,EAAM,UAAS,QAAS;AAAA,GAEpC;AAEF;AAEO,SAAS,aAAa,EAAE,QAAA,EAAU,SAAW,EAAA,GAAG,aAAmC,EAAA;AACzF,EACC,uBAAA,MAAA,CAAA,aAAA;AAAA,IAAC,IAAA;AAAA,IAAA;AAAA,MACA,SAAA,EAAW,OAAQ,CAAA,iDAAA,EAAmD,SAAS,CAAA;AAAA,MAC9E,GAAG;AAAA,KAAA;AAAA,IAEH;AAAA,GACF;AAEF;AAEO,SAAS,gBACf,KACC,EAAA;AACD,EAAA,MAAM,EAAE,EAAI,EAAA,WAAA,GAAc,KAAO,EAAA,QAAA,EAAU,WAAc,GAAA,KAAA;AAEzD,EACC,uBAAA,MAAA,CAAA,aAAA,CAAC,eAAY,SAAQ,EAAA,kBAAA,EAAmB,WAAW,OAAQ,CAAA,eAAA,EAAiB,SAAS,CAAA,EAAA,EACnF,QACF,CAAA;AAEF;AAEO,SAAS,uBAAmC,KAAyC,EAAA;AAC3F,EAAA,MAAM,EAAE,QAAA,EAAU,SAAW,EAAA,IAAA,EAAM,QAAW,GAAA,KAAA;AAE9C,EAAA,MAAM,SAAS,uBAAwB,CAAA,CAAC,KAAU,KAAA,IAAA,IAAS,MAAM,MAAuB,CAAA;AACxF,EAAA,MAAM,CAAC,aAAa,CAAI,GAAA,cAAA,CAAe,MAAM,CAAA;AAE7C,EACC,uBAAA,MAAA,CAAA,aAAA;AAAA,IAAC,IAAA;AAAA,IAAA;AAAA,MACA,SAAQ,EAAA,qBAAA;AAAA,MACR,SAAW,EAAA,OAAA;AAAA,QACV,wEAAA;AAAA,QACA;AAAA;AACD,KAAA;AAAA,IAEC,OAAO,MAAA,KAAW,UAClB,mBAAA,MAAA,CAAA,aAAA,CAAC,aAAc,EAAA,EAAA,IAAA,EAAM,MAAQ,EAAA,MAAA,EAAgB,CAE7C,mBAAA,MAAA,CAAA,aAAA,CAAC,aAAc,EAAA,EAAA,IAAA,EAAM,UAAS,QAAS;AAAA,GAEzC;AAEF;AAEO,SAAS,kBAAkB,KAA+B,EAAA;AAChE,EAAM,MAAA,EAAE,UAAY,EAAA,YAAA,EAAiB,GAAA,KAAA;AAErC,EAAM,MAAA;AAAA,IACL,OAAA,EAAS,EAAE,SAAU,EAAA;AAAA,IACrB;AAAA,GACG,GAAA,uBAAA,CAAwB,CAAC,KAAA,KAAU,KAAK,CAAA;AAE5C,EAAA,4CACE,IAAG,EAAA,EAAA,SAAA,EAAW,QAAQ,aAAe,EAAA,UAAA,EAAY,IAAI,CACrD,EAAA,kBAAA,MAAA,CAAA,aAAA;AAAA,IAAC,QAAA;AAAA,IAAA;AAAA,MACA,eAAa,YAAiB,KAAA,YAAA;AAAA,MAC9B,IAAK,EAAA,QAAA;AAAA,MACL,OAAA,EAAS,MAAM,SAAA,CAAU,YAAY,CAAA;AAAA,MACrC,SAAW,EAAA,OAAA;AAAA,QACV,0BAAA;AAAA,QACA,UAAY,EAAA,MAAA;AAAA,QACZ,YAAiB,KAAA,YAAA,IAAgB,CAAC,iBAAA,EAAmB,YAAY,SAAS;AAAA;AAC3E;AAAA,GAEF,CAAA;AAEF;;;AC7OA,IAAA,sBAAA,GAAA;AAAA,QAAA,CAAA,sBAAA,EAAA;AAAA,EAAA,MAAA,EAAA,MAAA,cAAA;AAAA,EAAA,OAAA,EAAA,MAAA,eAAA;AAAA,EAAA,OAAA,EAAA,MAAA,eAAA;AAAA,EAAA,QAAA,EAAA,MAAA,gBAAA;AAAA,EAAA,SAAA,EAAA,MAAA,iBAAA;AAAA,EAAA,gBAAA,EAAA,MAAA,sBAAA;AAAA,EAAA,IAAA,EAAA,MAAA,YAAA;AAAA,EAAA,WAAA,EAAA,MAAA,iBAAA;AAAA,EAAA,IAAA,EAAA,MAAA;AAAA,CAAA,CAAA","file":"index.js","sourcesContent":["import * as React from \"react\";\n\nconst 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\nexport { ChevronLeftIcon };\n","import * as React from \"react\";\n\nimport { useConstant } from \"@zayne-labs/toolkit-react\";\nimport { createZustandContext } from \"@zayne-labs/toolkit-react/zustand\";\nimport type { PrettyOmit } from \"@zayne-labs/toolkit-type-helpers\";\nimport { useEffect } from \"react\";\nimport { create } from \"zustand\";\nimport type { CarouselProviderProps, CarouselStore, ImagesType } from \"./types\";\n\nconst [Provider, useCarouselStoreContext] = createZustandContext<CarouselStore>({\n\thookName: \"useCarouselStore\",\n\tname: \"CarouselStoreContext\",\n\tproviderName: \"CarouselContextProvider\",\n});\n\n// CarouselStore Creation\nconst createCarouselStore = <TImages extends ImagesType>(\n\tstoreValues: PrettyOmit<CarouselProviderProps<TImages>, \"children\">\n) => {\n\tconst { images, onSlideBtnClick } = storeValues;\n\n\tconst useInitCarouselStore = create<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 useInitCarouselStore;\n};\n\nconst useCarousel = <TImages extends ImagesType>(\n\tprops: Omit<CarouselProviderProps<TImages>, \"children\">\n) => {\n\tconst { images, onSlideBtnClick } = props;\n\n\tconst useInitCarouselStore = useConstant(() => createCarouselStore({ images, onSlideBtnClick }));\n\n\t// == To set images again when a page is mounted, preventing stale images from previous page\n\tuseEffect(() => {\n\t\tuseInitCarouselStore.setState({ images });\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps -- useInitCarouselStore is stable\n\t}, [images]);\n\n\treturn useInitCarouselStore;\n};\n\n// == Provider Component\nfunction CarouselContextProvider<TImages extends ImagesType>(props: CarouselProviderProps<TImages>) {\n\tconst { children, images, onSlideBtnClick } = props;\n\n\tconst useInitCarouselStore = useCarousel({ images, onSlideBtnClick });\n\n\treturn <Provider value={useInitCarouselStore}>{children}</Provider>;\n}\n\n// eslint-disable-next-line react-refresh/only-export-components -- It's fine\nexport { useCarouselStoreContext, CarouselContextProvider };\n","import { useAnimationInterval, useCallbackRef } from \"@zayne-labs/toolkit-react\";\nimport { useState } from \"react\";\nimport { useCarouselStoreContext } from \"./carousel-store-context\";\n\ntype CarouselOptions = {\n\tautoSlideInterval?: number;\n\thasAutoSlide?: boolean;\n\tshouldPauseOnHover?: boolean;\n};\n\nconst useCarouselOptions = (options: CarouselOptions = {}) => {\n\tconst { autoSlideInterval = 5000, hasAutoSlide = false, shouldPauseOnHover = false } = options;\n\n\tconst { goToNextSlide } = useCarouselStoreContext((state) => state.actions);\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: 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 * as React from \"react\";\n\nimport { getElementList } from \"@/components/common/for\";\nimport { ChevronLeftIcon } from \"@/components/icons\";\nimport { cnMerge } from \"@/lib/utils/cn\";\nimport type { MyCustomCss, PolymorphicProps } from \"@zayne-labs/toolkit-react/utils\";\nimport { useCarouselStoreContext } from \"./carousel-store-context\";\nimport type {\n\tCarouselButtonsProps,\n\tCarouselContentProps,\n\tCarouselControlProps,\n\tCarouselIndicatorProps,\n\tCarouselWrapperProps,\n\tOtherCarouselProps,\n} from \"./types\";\nimport { useCarouselOptions } from \"./useCarouselOptions\";\n\n// TODO -  Add dragging and swiping support\nexport function CarouselContent<TElement extends React.ElementType = \"article\">(\n\tprops: PolymorphicProps<TElement, CarouselContentProps>\n) {\n\tconst {\n\t\tas: HtmlElement = \"article\",\n\t\tautoSlideInterval,\n\t\tchildren,\n\t\tclassNames,\n\t\thasAutoSlide,\n\t\tshouldPauseOnHover,\n\t} = props;\n\n\tconst { pauseAutoSlide, resumeAutoSlide } = useCarouselOptions({\n\t\tautoSlideInterval,\n\t\thasAutoSlide,\n\t\tshouldPauseOnHover,\n\t});\n\n\t// FIXME - Prevent touch swipe on mobile using a cover element or allow swipe but it must update the state appriopriately\n\treturn (\n\t\t<HtmlElement\n\t\t\tdata-id=\"Carousel\"\n\t\t\tclassName={cnMerge(\"relative select-none\", classNames?.base)}\n\t\t\tonMouseEnter={pauseAutoSlide}\n\t\t\tonMouseLeave={resumeAutoSlide}\n\t\t>\n\t\t\t<div\n\t\t\t\tdata-id=\"Scroll Container\"\n\t\t\t\tclassName={cnMerge(\n\t\t\t\t\t\"flex size-full overflow-x-scroll [scrollbar-width:none] [&::-webkit-scrollbar]:hidden\",\n\t\t\t\t\tclassNames?.scrollContainer\n\t\t\t\t)}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t</div>\n\t\t</HtmlElement>\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\ttype=\"button\"\n\t\t\tclassName={cnMerge(\n\t\t\t\t\"z-30 flex h-full w-[15%] 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 className={cnMerge(\"absolute inset-0 flex justify-between\", classNames?.base)}>\n\t\t\t{icon?.iconType ? (\n\t\t\t\t<>\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\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</>\n\t\t\t) : (\n\t\t\t\t<>\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\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</>\n\t\t\t)}\n\t\t</div>\n\t);\n}\n\nexport function CarouselItemGroup<TArrayItem>(props: CarouselWrapperProps<TArrayItem>) {\n\tconst { children, className, each, render } = props;\n\n\tconst [ItemList] = getElementList(\"base\");\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-id=\"Carousel Image Wrapper\"\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\t[transition:transform_800ms_ease]`,\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 MyCustomCss as MyCustomCss\n\t\t\t}\n\t\t>\n\t\t\t{typeof render === \"function\" ? (\n\t\t\t\t<ItemList each={images} render={render} />\n\t\t\t) : (\n\t\t\t\t<ItemList each={images}>{children}</ItemList>\n\t\t\t)}\n\t\t</ul>\n\t);\n}\n\nexport function CarouselItem({ children, className, ...restOfProps }: OtherCarouselProps) {\n\treturn (\n\t\t<li\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: PolymorphicProps<TElement, OtherCarouselProps>\n) {\n\tconst { as: HtmlElement = \"div\", children, className } = props;\n\n\treturn (\n\t\t<HtmlElement data-id=\"Carousel Caption\" className={cnMerge(\"absolute z-10\", className)}>\n\t\t\t{children}\n\t\t</HtmlElement>\n\t);\n}\n\nexport function CarouselIndicatorGroup<TArrayItem>(props: CarouselWrapperProps<TArrayItem>) {\n\tconst { children, className, each, render } = props;\n\n\tconst images = useCarouselStoreContext((state) => each ?? (state.images as TArrayItem[]));\n\tconst [IndicatorList] = getElementList(\"base\");\n\n\treturn (\n\t\t<ul\n\t\t\tdata-id=\"Carousel Indicators\"\n\t\t\tclassName={cnMerge(\n\t\t\t\t\"absolute bottom-10 z-[2] flex w-full items-center justify-center gap-6\",\n\t\t\t\tclassName\n\t\t\t)}\n\t\t>\n\t\t\t{typeof render === \"function\" ? (\n\t\t\t\t<IndicatorList each={images} render={render} />\n\t\t\t) : (\n\t\t\t\t<IndicatorList each={images}>{children}</IndicatorList>\n\t\t\t)}\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 className={cnMerge(\"inline-flex\", classNames?.base)}>\n\t\t\t<button\n\t\t\t\tdata-active={currentIndex === currentSlide}\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?.button,\n\t\t\t\t\tcurrentIndex === currentSlide && [\"w-14 rounded-lg\", classNames?.activeBtn]\n\t\t\t\t)}\n\t\t\t/>\n\t\t</li>\n\t);\n}\n","export { CarouselContextProvider as Root } from \"./carousel-store-context\";\nexport {\n\tCarouselContent as Content,\n\tCarouselControls as Controls,\n\tCarouselButton as Button,\n\tCarouselItem as Item,\n\tCarouselItemGroup as ItemWrapper,\n\tCarouselCaption as Caption,\n\tCarouselIndicator as Indicator,\n\tCarouselIndicatorGroup as IndicatorWrapper,\n} from \"./carousel\";\n"]}

package/dist/esm/ui/drag-scroll/index.js

@@ -1,5 +1,120 @@
-export { useDragScroll } from '../../chunk-E42DOTGX.js';
-import '../../chunk-OHG7GB7O.js';
+import { cnMerge } from '../../chunk-OHG7GB7O.js';
 import '../../chunk-PZ5AY32C.js';
+import { off, on, checkIsDeviceMobileOrTablet } from '@zayne-labs/toolkit-core';
+import { useCallbackRef } from '@zayne-labs/toolkit-react';
+import { mergeTwoProps, composeRefs } from '@zayne-labs/toolkit-react/utils';
+import { useRef } from 'react';
+
+var updateCursor = (element) => {
+  element.style.cursor = "grabbing";
+  element.style.userSelect = "none";
+};
+var onScrollSnap = (action, element) => {
+  if (action === "remove") {
+    element.style.scrollSnapType = "none";
+    return;
+  }
+  element.style.scrollSnapType = "";
+};
+var resetCursor = (element) => {
+  element.style.cursor = "";
+  element.style.userSelect = "";
+};
+var handleScrollSnap = (dragContainer) => {
+  const isMobileOrTablet = checkIsDeviceMobileOrTablet();
+  if (!isMobileOrTablet) {
+    onScrollSnap("remove", dragContainer);
+  } else {
+    onScrollSnap("reset", dragContainer);
+  }
+};
+
+// src/components/ui/drag-scroll/use-drag-scroll.ts
+var useDragScroll = (props = {}) => {
+  const {
+    classNames,
+    extraItemProps,
+    extraRootProps,
+    orientation = "horizontal",
+    usage = "allScreens"
+  } = props;
+  const dragContainerRef = useRef(null);
+  const positionRef = useRef({ left: 0, top: 0, x: 0, y: 0 });
+  const handleMouseMove = useCallbackRef((event) => {
+    if (!dragContainerRef.current) return;
+    if (orientation === "horizontal" || orientation === "both") {
+      const dx = event.clientX - positionRef.current.x;
+      dragContainerRef.current.scrollLeft = positionRef.current.left - dx;
+    }
+    if (orientation === "vertical" || orientation === "both") {
+      const dy = event.clientY - positionRef.current.y;
+      dragContainerRef.current.scrollTop = positionRef.current.top - dy;
+    }
+  });
+  const handleMouseUpOrLeave = useCallbackRef(() => {
+    if (!dragContainerRef.current) return;
+    off("mousemove", dragContainerRef.current, handleMouseMove);
+    off("mouseup", dragContainerRef.current, handleMouseUpOrLeave);
+    off("mouseleave", dragContainerRef.current, handleMouseUpOrLeave);
+    resetCursor(dragContainerRef.current);
+  });
+  const handleMouseDown = useCallbackRef((event) => {
+    if (usage === "mobileAndTabletOnly" && window.innerWidth >= 768) return;
+    if (usage === "desktopOnly" && window.innerWidth < 768) return;
+    if (!dragContainerRef.current) return;
+    if (orientation === "horizontal" || orientation === "both") {
+      positionRef.current.x = event.clientX;
+      positionRef.current.left = dragContainerRef.current.scrollLeft;
+    }
+    if (orientation === "vertical" || orientation === "both") {
+      positionRef.current.y = event.clientY;
+      positionRef.current.top = dragContainerRef.current.scrollTop;
+    }
+    updateCursor(dragContainerRef.current);
+    on("mousemove", dragContainerRef.current, handleMouseMove);
+    on("mouseup", dragContainerRef.current, handleMouseUpOrLeave);
+    on("mouseleave", dragContainerRef.current, handleMouseUpOrLeave);
+  });
+  const refCallBack = useCallbackRef((node) => {
+    dragContainerRef.current = node;
+    node && handleScrollSnap(node);
+    const cleanup = on("mousedown", dragContainerRef.current, handleMouseDown);
+    return cleanup;
+  });
+  const getRootProps = (rootProps) => {
+    const mergedRootProps = mergeTwoProps(extraRootProps, rootProps);
+    return {
+      ...mergedRootProps,
+      className: cnMerge(
+        `flex w-full cursor-grab snap-x snap-mandatory overflow-x-scroll overflow-y-clip
+				[-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden`,
+        orientation === "horizontal" && "flex-row",
+        orientation === "vertical" && "flex-col",
+        usage === "mobileAndTabletOnly" && "md:cursor-default md:flex-col",
+        usage === "desktopOnly" && "max-md:cursor-default max-md:flex-col",
+        classNames?.base,
+        mergedRootProps.className
+      ),
+      "data-part": "root",
+      "data-scope": "drag-scroll",
+      ref: composeRefs([
+        refCallBack,
+        mergedRootProps?.ref
+      ])
+    };
+  };
+  const getItemProps = (itemProps) => {
+    const mergedItemProps = mergeTwoProps(extraItemProps, itemProps);
+    return {
+      ...mergedItemProps,
+      className: cnMerge("snap-center snap-always", classNames?.item, mergedItemProps.className),
+      "data-part": "item",
+      "data-scope": "drag-scroll"
+    };
+  };
+  return { getItemProps, getRootProps };
+};
+
+export { useDragScroll };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map

package/dist/esm/ui/drag-scroll/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":[],"names":[],"mappings":"","file":"index.js"}
+{"version":3,"sources":["../../../../src/components/ui/drag-scroll/utils.ts","../../../../src/components/ui/drag-scroll/use-drag-scroll.ts"],"names":[],"mappings":"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","file":"index.js","sourcesContent":["import { checkIsDeviceMobileOrTablet } from \"@zayne-labs/toolkit-core\";\n\n/* eslint-disable no-param-reassign -- Mutation is needed here since it's an element */\nexport const updateCursor = <TElement extends HTMLElement>(element: TElement) => {\n\telement.style.cursor = \"grabbing\";\n\telement.style.userSelect = \"none\";\n};\n\nexport const onScrollSnap = <TElement extends HTMLElement>(\n\taction: \"remove\" | \"reset\",\n\telement: TElement\n) => {\n\tif (action === \"remove\") {\n\t\telement.style.scrollSnapType = \"none\";\n\t\treturn;\n\t}\n\n\telement.style.scrollSnapType = \"\";\n};\n\nexport const resetCursor = <TElement extends HTMLElement>(element: TElement) => {\n\telement.style.cursor = \"\";\n\telement.style.userSelect = \"\";\n};\n/* eslint-enable no-param-reassign  -- Mutation is needed here since it's an element */\n\nexport const handleScrollSnap = (dragContainer: HTMLElement) => {\n\tconst isMobileOrTablet = checkIsDeviceMobileOrTablet();\n\n\tif (!isMobileOrTablet) {\n\t\tonScrollSnap(\"remove\", dragContainer);\n\t} else {\n\t\tonScrollSnap(\"reset\", dragContainer);\n\t}\n};\n","import { cnMerge } from \"@/lib/utils/cn\";\nimport { off, on } from \"@zayne-labs/toolkit-core\";\nimport { useCallbackRef } from \"@zayne-labs/toolkit-react\";\nimport { type InferProps, composeRefs, mergeTwoProps } from \"@zayne-labs/toolkit-react/utils\";\nimport { type RefCallback, useRef } from \"react\";\nimport { handleScrollSnap, resetCursor, updateCursor } from \"./utils\";\n\ntype DragScrollProps<TElement extends HTMLElement> = {\n\tclassNames?: { base?: string; item?: string };\n\textraItemProps?: InferProps<HTMLElement>;\n\textraRootProps?: Omit<InferProps<TElement>, \"children\">;\n\torientation?: \"both\" | \"horizontal\" | \"vertical\";\n\tusage?: \"allScreens\" | \"desktopOnly\" | \"mobileAndTabletOnly\";\n};\n\nconst useDragScroll = <TElement extends HTMLElement>(props: DragScrollProps<TElement> = {}) => {\n\tconst {\n\t\tclassNames,\n\t\textraItemProps,\n\t\textraRootProps,\n\t\torientation = \"horizontal\",\n\t\tusage = \"allScreens\",\n\t} = props;\n\n\tconst dragContainerRef = useRef<TElement>(null);\n\n\tconst positionRef = useRef({ left: 0, top: 0, x: 0, y: 0 });\n\n\tconst handleMouseMove = useCallbackRef((event: MouseEvent) => {\n\t\tif (!dragContainerRef.current) return;\n\n\t\tif (orientation === \"horizontal\" || orientation === \"both\") {\n\t\t\t// == calculate the current change in the horizontal scroll position based on the difference between the previous mouse position and the new mouse position\n\t\t\tconst dx = event.clientX - positionRef.current.x;\n\n\t\t\t// == Assign the scrollLeft of the container to the difference between its previous horizontal scroll position and the change in the mouse position\n\t\t\tdragContainerRef.current.scrollLeft = positionRef.current.left - dx;\n\t\t}\n\n\t\tif (orientation === \"vertical\" || orientation === \"both\") {\n\t\t\t// == calculate the current change in the vertical scroll position based on the difference between the previous mouse position and the new mouse position\n\t\t\tconst dy = event.clientY - positionRef.current.y;\n\n\t\t\t// == Assign the scrollTop of the container to the difference between its previous vertical scroll position and the change in the mouse position\n\t\t\tdragContainerRef.current.scrollTop = positionRef.current.top - dy;\n\t\t}\n\t});\n\n\tconst handleMouseUpOrLeave = useCallbackRef(() => {\n\t\tif (!dragContainerRef.current) return;\n\n\t\toff(\"mousemove\", dragContainerRef.current, handleMouseMove);\n\t\toff(\"mouseup\", dragContainerRef.current, handleMouseUpOrLeave);\n\t\toff(\"mouseleave\", dragContainerRef.current, handleMouseUpOrLeave);\n\n\t\tresetCursor(dragContainerRef.current);\n\t});\n\n\tconst handleMouseDown = useCallbackRef((event: MouseEvent) => {\n\t\tif (usage === \"mobileAndTabletOnly\" && window.innerWidth >= 768) return;\n\t\tif (usage === \"desktopOnly\" && window.innerWidth < 768) return;\n\n\t\tif (!dragContainerRef.current) return;\n\n\t\t// == Update all initial position properties stored in the positionRef\n\t\tif (orientation === \"horizontal\" || orientation === \"both\") {\n\t\t\tpositionRef.current.x = event.clientX;\n\t\t\tpositionRef.current.left = dragContainerRef.current.scrollLeft;\n\t\t}\n\n\t\tif (orientation === \"vertical\" || orientation === \"both\") {\n\t\t\tpositionRef.current.y = event.clientY;\n\t\t\tpositionRef.current.top = dragContainerRef.current.scrollTop;\n\t\t}\n\n\t\tupdateCursor(dragContainerRef.current);\n\n\t\ton(\"mousemove\", dragContainerRef.current, handleMouseMove);\n\t\ton(\"mouseup\", dragContainerRef.current, handleMouseUpOrLeave);\n\t\ton(\"mouseleave\", dragContainerRef.current, handleMouseUpOrLeave);\n\t});\n\n\tconst refCallBack: RefCallback<TElement> = useCallbackRef((node) => {\n\t\tdragContainerRef.current = node;\n\n\t\tnode && handleScrollSnap(node);\n\n\t\tconst cleanup = on(\"mousedown\", dragContainerRef.current, handleMouseDown);\n\n\t\treturn cleanup;\n\t});\n\n\tconst getRootProps = (rootProps?: DragScrollProps<TElement>[\"extraRootProps\"]) => {\n\t\tconst mergedRootProps = mergeTwoProps(extraRootProps, rootProps);\n\n\t\treturn {\n\t\t\t...mergedRootProps,\n\t\t\tclassName: cnMerge(\n\t\t\t\t`flex w-full cursor-grab snap-x snap-mandatory overflow-x-scroll overflow-y-clip\n\t\t\t\t[-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden`,\n\t\t\t\torientation === \"horizontal\" && \"flex-row\",\n\t\t\t\torientation === \"vertical\" && \"flex-col\",\n\t\t\t\tusage === \"mobileAndTabletOnly\" && \"md:cursor-default md:flex-col\",\n\t\t\t\tusage === \"desktopOnly\" && \"max-md:cursor-default max-md:flex-col\",\n\t\t\t\tclassNames?.base,\n\t\t\t\tmergedRootProps.className\n\t\t\t),\n\t\t\t\"data-part\": \"root\",\n\t\t\t\"data-scope\": \"drag-scroll\",\n\t\t\tref: composeRefs([\n\t\t\t\trefCallBack,\n\t\t\t\t(mergedRootProps as { ref?: React.Ref<TElement> } | undefined)?.ref,\n\t\t\t]),\n\t\t};\n\t};\n\n\tconst getItemProps = <TItemElement extends HTMLElement>(\n\t\titemProps?: DragScrollProps<TItemElement>[\"extraItemProps\"]\n\t) => {\n\t\tconst mergedItemProps = mergeTwoProps(extraItemProps, itemProps);\n\n\t\treturn {\n\t\t\t...mergedItemProps,\n\t\t\tclassName: cnMerge(\"snap-center snap-always\", classNames?.item, mergedItemProps.className),\n\t\t\t\"data-part\": \"item\",\n\t\t\t\"data-scope\": \"drag-scroll\",\n\t\t};\n\t};\n\n\treturn { getItemProps, getRootProps };\n};\n\nexport { useDragScroll };\n"]}

package/dist/esm/ui/drop-zone/index.js

@@ -1,5 +1,140 @@
-export { DropZone, useDropZone } from '../../chunk-RQZL6ZG6.js';
-import '../../chunk-OHG7GB7O.js';
+import { cnMerge } from '../../chunk-OHG7GB7O.js';
 import '../../chunk-PZ5AY32C.js';
+import * as React from 'react';
+import { useRef, useState } from 'react';
+import { handleFileValidation } from '@zayne-labs/toolkit-core';
+import { useToggle, useCallbackRef } from '@zayne-labs/toolkit-react';
+import { mergeTwoProps, composeRefs } from '@zayne-labs/toolkit-react/utils';
+import { isFunction } from '@zayne-labs/toolkit-type-helpers';
+
+var useDropZone = (props) => {
+  const inputRef = useRef(null);
+  const {
+    allowedFileTypes,
+    children,
+    classNames,
+    disallowDuplicates = true,
+    existingFiles,
+    extraInputProps,
+    extraRootProps,
+    fileLimit,
+    maxFileSize,
+    onUpload,
+    onUploadError,
+    onUploadSuccess,
+    render,
+    validator
+    // eslint-disable-next-line ts-eslint/no-unnecessary-condition -- Can be undefined
+  } = props ?? {};
+  const [isDragging, toggleIsDragging] = useToggle(false);
+  const [acceptedFiles, setAcceptedFiles] = useState([]);
+  const handleFileUpload = useCallbackRef(
+    (event) => {
+      if (event.defaultPrevented) return;
+      if (event.type === "drop") {
+        event.preventDefault();
+        toggleIsDragging(false);
+      }
+      const fileList = event.type === "drop" ? event.dataTransfer.files : event.target.files;
+      if (fileList === null) {
+        console.warn("No file selected");
+        return;
+      }
+      const validFilesArray = handleFileValidation({
+        existingFileArray: existingFiles,
+        newFileList: fileList,
+        onError: onUploadError,
+        onSuccess: onUploadSuccess,
+        validationSettings: {
+          allowedFileTypes,
+          disallowDuplicates,
+          fileLimit,
+          maxFileSize
+        },
+        validator
+      });
+      if (validFilesArray.length === 0) return;
+      setAcceptedFiles(validFilesArray);
+      onUpload?.({ acceptedFiles: validFilesArray, event });
+    }
+  );
+  const handleDragOver = (event) => {
+    event.preventDefault();
+    toggleIsDragging(true);
+  };
+  const handleDragLeave = (event) => {
+    event.preventDefault();
+    toggleIsDragging(false);
+  };
+  const getRenderProps = () => ({
+    acceptedFiles,
+    inputRef,
+    isDragging,
+    openFilePicker: () => inputRef.current?.click()
+  });
+  const computedChildren = children ?? render;
+  const getChildren = () => isFunction(computedChildren) ? computedChildren(getRenderProps()) : computedChildren;
+  const getRootProps = (rootProps) => {
+    const mergedRootProps = mergeTwoProps(extraRootProps, rootProps);
+    return {
+      ...mergedRootProps,
+      className: cnMerge(
+        "relative isolate flex flex-col",
+        mergedRootProps.className,
+        classNames?.base,
+        isDragging && ["opacity-60", classNames?.activeDrag, rootProps?.classNames?.activeDrag]
+      ),
+      "data-active-drag": isDragging,
+      "data-part": "root",
+      "data-scope": "dropzone",
+      onDragEnter: handleDragOver,
+      onDragLeave: handleDragLeave,
+      onDragOver: handleDragOver,
+      onDrop: handleFileUpload
+    };
+  };
+  const getInputProps = (inputProps) => {
+    const mergedInputProps = mergeTwoProps(extraInputProps, inputProps);
+    return {
+      ...mergedInputProps,
+      accept: allowedFileTypes ? allowedFileTypes.join(", ") : mergedInputProps.accept,
+      className: cnMerge(
+        "absolute inset-0 z-[100] cursor-pointer opacity-0",
+        classNames?.input,
+        mergedInputProps.className
+      ),
+      "data-active-drag": isDragging,
+      "data-part": "input",
+      "data-scope": "dropzone",
+      onChange: (event) => {
+        mergedInputProps.onChange?.(event);
+        handleFileUpload(event);
+      },
+      ref: composeRefs([inputRef, mergedInputProps.ref]),
+      type: "file"
+    };
+  };
+  return {
+    acceptedFiles,
+    computedChildren,
+    getChildren,
+    getInputProps,
+    getRenderProps,
+    getRootProps,
+    handleDragLeave,
+    handleDragOver,
+    handleFileUpload,
+    inputRef,
+    isDragging
+  };
+};
+
+// src/components/ui/drop-zone/drop-zone.tsx
+function DropZone(props) {
+  const api = useDropZone(props);
+  return /* @__PURE__ */ React.createElement("div", { ...api.getRootProps() }, /* @__PURE__ */ React.createElement("input", { ...api.getInputProps() }), api.getChildren());
+}
+
+export { DropZone, useDropZone };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map

package/dist/esm/ui/drop-zone/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":[],"names":[],"mappings":"","file":"index.js"}
+{"version":3,"sources":["../../../../src/components/ui/drop-zone/use-drop-zone.ts","../../../../src/components/ui/drop-zone/drop-zone.tsx"],"names":[],"mappings":"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","file":"index.js","sourcesContent":["\"use client\";\n\nimport { cnMerge } from \"@/lib/utils/cn\";\nimport { type FileValidationOptions, handleFileValidation } from \"@zayne-labs/toolkit-core\";\nimport { useCallbackRef, useToggle } from \"@zayne-labs/toolkit-react\";\nimport {\n\ttype DiscriminatedRenderProps,\n\ttype InferProps,\n\tcomposeRefs,\n\tmergeTwoProps,\n} from \"@zayne-labs/toolkit-react/utils\";\nimport { isFunction } from \"@zayne-labs/toolkit-type-helpers\";\nimport { useRef, useState } from \"react\";\n\ntype RenderProps = {\n\tacceptedFiles: File[];\n\tinputRef: React.RefObject<HTMLInputElement | null>;\n\tisDragging: boolean;\n\topenFilePicker: () => void;\n};\n\nexport type RootProps = InferProps<\"div\"> & {\n\tclassNames?: {\n\t\tactiveDrag?: string;\n\t\tbase?: string;\n\t};\n};\n\nexport type InputProps = InferProps<\"input\">;\n\ntype DropZoneRenderProps = DiscriminatedRenderProps<\n\tReact.ReactNode | ((props: RenderProps) => React.ReactNode)\n>;\n\nexport type UseDropZoneProps = DropZoneRenderProps & {\n\t/**\n\t * Allowed file types to be uploaded.\n\t */\n\tallowedFileTypes?: string[];\n\n\tclassNames?: { activeDrag?: string; base?: string; input?: string };\n\t/**\n\t * Whether to disallow duplicate files\n\t * @default true\n\t */\n\tdisallowDuplicates?: boolean;\n\n\t/**\n\t * Existing files to be uploaded\n\t */\n\texistingFiles?: File[];\n\n\t/**\n\t * Extra props to pass to the input element\n\t */\n\textraInputProps?: InputProps;\n\n\t/**\n\t * Extra props to pass to the root element\n\t */\n\textraRootProps?: RootProps;\n\n\t/**\n\t * Maximum number of files that can be uploaded.\n\t */\n\tfileLimit?: number;\n\n\t/**\n\t * Maximum file size in MB\n\t */\n\tmaxFileSize?: number;\n\n\t/**\n\t * Callback function to handle file upload\n\t */\n\tonUpload?: (details: {\n\t\tacceptedFiles: File[];\n\t\tevent: React.ChangeEvent<HTMLInputElement> | React.DragEvent<HTMLDivElement>;\n\t}) => void;\n\n\t/**\n\t * Callback function to handle file upload errors\n\t */\n\tonUploadError?: FileValidationOptions[\"onError\"];\n\n\t/**\n\t * Callback function to handle file upload success\n\t */\n\tonUploadSuccess?: FileValidationOptions[\"onSuccess\"];\n\n\t/**\n\t * Custom validator function to handle file validation\n\t */\n\tvalidator?: (context: { existingFileArray: File[] | undefined; newFileList: FileList }) => File[];\n};\n\nexport const useDropZone = (props: UseDropZoneProps) => {\n\tconst inputRef = useRef<HTMLInputElement>(null);\n\n\tconst {\n\t\tallowedFileTypes,\n\t\tchildren,\n\t\tclassNames,\n\t\tdisallowDuplicates = true,\n\t\texistingFiles,\n\t\textraInputProps,\n\t\textraRootProps,\n\t\tfileLimit,\n\t\tmaxFileSize,\n\t\tonUpload,\n\t\tonUploadError,\n\t\tonUploadSuccess,\n\t\trender,\n\t\tvalidator,\n\t\t// eslint-disable-next-line ts-eslint/no-unnecessary-condition -- Can be undefined\n\t} = props ?? {};\n\n\tconst [isDragging, toggleIsDragging] = useToggle(false);\n\n\tconst [acceptedFiles, setAcceptedFiles] = useState<File[]>([]);\n\n\tconst handleFileUpload = useCallbackRef(\n\t\t(event: React.ChangeEvent<HTMLInputElement> | React.DragEvent<HTMLDivElement>) => {\n\t\t\tif (event.defaultPrevented) return;\n\n\t\t\tif (event.type === \"drop\") {\n\t\t\t\tevent.preventDefault();\n\t\t\t\ttoggleIsDragging(false);\n\t\t\t}\n\n\t\t\tconst fileList =\n\t\t\t\tevent.type === \"drop\"\n\t\t\t\t\t? (event as React.DragEvent).dataTransfer.files\n\t\t\t\t\t: (event as React.ChangeEvent<HTMLInputElement>).target.files;\n\n\t\t\tif (fileList === null) {\n\t\t\t\tconsole.warn(\"No file selected\");\n\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tconst validFilesArray = handleFileValidation({\n\t\t\t\texistingFileArray: existingFiles,\n\t\t\t\tnewFileList: fileList,\n\t\t\t\tonError: onUploadError,\n\t\t\t\tonSuccess: onUploadSuccess,\n\t\t\t\tvalidationSettings: {\n\t\t\t\t\tallowedFileTypes,\n\t\t\t\t\tdisallowDuplicates,\n\t\t\t\t\tfileLimit,\n\t\t\t\t\tmaxFileSize,\n\t\t\t\t},\n\t\t\t\tvalidator,\n\t\t\t});\n\n\t\t\tif (validFilesArray.length === 0) return;\n\n\t\t\tsetAcceptedFiles(validFilesArray);\n\n\t\t\tonUpload?.({ acceptedFiles: validFilesArray, event });\n\t\t}\n\t);\n\n\tconst handleDragOver = (event: React.DragEvent<HTMLDivElement>) => {\n\t\tevent.preventDefault();\n\t\ttoggleIsDragging(true);\n\t};\n\n\tconst handleDragLeave = (event: React.DragEvent<HTMLDivElement>) => {\n\t\tevent.preventDefault();\n\t\ttoggleIsDragging(false);\n\t};\n\n\tconst getRenderProps = () =>\n\t\t({\n\t\t\tacceptedFiles,\n\t\t\tinputRef,\n\t\t\tisDragging,\n\t\t\topenFilePicker: () => inputRef.current?.click(),\n\t\t}) satisfies RenderProps;\n\n\tconst computedChildren = children ?? render;\n\n\tconst getChildren = () =>\n\t\tisFunction(computedChildren) ? computedChildren(getRenderProps()) : computedChildren;\n\n\tconst getRootProps = (rootProps?: RootProps) => {\n\t\tconst mergedRootProps = mergeTwoProps(extraRootProps, rootProps);\n\n\t\treturn {\n\t\t\t...mergedRootProps,\n\t\t\tclassName: cnMerge(\n\t\t\t\t\"relative isolate flex flex-col\",\n\t\t\t\tmergedRootProps.className,\n\t\t\t\tclassNames?.base,\n\t\t\t\tisDragging && [\"opacity-60\", classNames?.activeDrag, rootProps?.classNames?.activeDrag]\n\t\t\t),\n\t\t\t\"data-active-drag\": isDragging,\n\t\t\t\"data-part\": \"root\",\n\t\t\t\"data-scope\": \"dropzone\",\n\t\t\tonDragEnter: handleDragOver,\n\t\t\tonDragLeave: handleDragLeave,\n\t\t\tonDragOver: handleDragOver,\n\t\t\tonDrop: handleFileUpload,\n\t\t};\n\t};\n\n\tconst getInputProps = (inputProps?: InputProps) => {\n\t\tconst mergedInputProps = mergeTwoProps(extraInputProps, inputProps);\n\n\t\treturn {\n\t\t\t...mergedInputProps,\n\t\t\taccept: allowedFileTypes ? allowedFileTypes.join(\", \") : mergedInputProps.accept,\n\t\t\tclassName: cnMerge(\n\t\t\t\t\"absolute inset-0 z-[100] cursor-pointer opacity-0\",\n\t\t\t\tclassNames?.input,\n\t\t\t\tmergedInputProps.className\n\t\t\t),\n\t\t\t\"data-active-drag\": isDragging,\n\t\t\t\"data-part\": \"input\",\n\t\t\t\"data-scope\": \"dropzone\",\n\t\t\tonChange: (event: React.ChangeEvent<HTMLInputElement>) => {\n\t\t\t\tmergedInputProps.onChange?.(event);\n\t\t\t\thandleFileUpload(event);\n\t\t\t},\n\t\t\tref: composeRefs([inputRef, mergedInputProps.ref]),\n\t\t\ttype: \"file\",\n\t\t};\n\t};\n\n\treturn {\n\t\tacceptedFiles,\n\t\tcomputedChildren,\n\t\tgetChildren,\n\t\tgetInputProps,\n\t\tgetRenderProps,\n\t\tgetRootProps,\n\t\thandleDragLeave,\n\t\thandleDragOver,\n\t\thandleFileUpload,\n\t\tinputRef,\n\t\tisDragging,\n\t};\n};\n","import * as React from \"react\";\n\nimport { type UseDropZoneProps, useDropZone } from \"./use-drop-zone\";\n\nfunction DropZone(props: UseDropZoneProps) {\n\tconst api = useDropZone(props);\n\n\treturn (\n\t\t<div {...api.getRootProps()}>\n\t\t\t<input {...api.getInputProps()} />\n\n\t\t\t{api.getChildren()}\n\t\t</div>\n\t);\n}\n\nexport { DropZone };\n"]}