@dgshahr/ui-kit 0.0.4 → 0.0.5

package/dist/Slide-BDD1_RXD.js

@@ -0,0 +1,215 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { c as clsx } from './clsx-ChV9xqsO.js';
+import { createContext, useContext, useState, useEffect, useRef, Children } from 'react';
+import { A as ArrowLeft2Icon } from './ArrowLeft2-BURhvXT2.js';
+import { A as ArrowRight2Icon } from './ArrowRight2-DCxJPvNC.js';
+import Button from './Button/index.js';
+
+const sliderContext = createContext({
+  slidesPerView: 1,
+  spaceBetween: 0
+});
+const useSliderContext = () => useContext(sliderContext);
+
+function styleNavigationDot({ active, autoplay, variant }) {
+  const variantClassName = {
+    inside: "bg-gray-500/50 hover:bg-gray-500/80",
+    outside: "bg-gray-200 hover:bg-gray-300"
+  };
+  return [variantClassName[variant], active ? "w-[22px]" : "w-[6px]", autoplay ? "p-[1px]" : ""];
+}
+const NavigationDot = (props) => {
+  const { active, autoplay, variant, onClick, onNavigateToNext } = props;
+  const [fillPercentage, setFillPercentage] = useState(0);
+  useEffect(() => {
+    if (!active || !autoplay) return;
+    const autoplayTime = typeof autoplay === "boolean" ? 7e3 : autoplay?.delay ?? 7e3;
+    let startTime = Date.now();
+    const autoplayInterval = setInterval(() => {
+      const elapsed = Date.now() - startTime;
+      const percentage = elapsed / autoplayTime * 100;
+      setFillPercentage(Math.min(percentage, 100));
+      if (elapsed >= autoplayTime && typeof onNavigateToNext === "function") {
+        onNavigateToNext();
+      }
+    }, 100);
+    return function cleanup() {
+      setFillPercentage(0);
+      startTime = Date.now();
+      return clearInterval(autoplayInterval);
+    };
+  }, [active, autoplay, onNavigateToNext]);
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      className: clsx(
+        "rounded-full overflow-hidden transition-all h-[6px]",
+        styleNavigationDot({ active, autoplay, variant })
+      ),
+      onClick,
+      children: active && /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: clsx("h-full rounded-full", {
+            "bg-white": variant === "inside",
+            "bg-gray-700": variant === "outside"
+          }),
+          style: { width: autoplay ? `${fillPercentage}%` : "100%" }
+        }
+      )
+    }
+  );
+};
+
+const Slider = (props) => {
+  const {
+    className = "",
+    containerClassName = "",
+    showNavigationDots = true,
+    dotsClassName = "",
+    slidesPerView = 1,
+    autoplay,
+    navigationButtonsShowType = "hide",
+    spaceBetween = 0,
+    navigationVariant = "outside",
+    showPaginationText = false
+  } = props;
+  const [slideIndex, setSlideIndex] = useState(0);
+  const containerRef = useRef(null);
+  const childsCount = Children.count(props.children);
+  const slidesCount = Math.ceil(childsCount / slidesPerView);
+  const haveNavigation = showNavigationDots || navigationButtonsShowType && navigationButtonsShowType !== "hide" || showPaginationText;
+  function detectCarouselPosition(e) {
+    const itemsWidth = e.currentTarget.scrollWidth / slidesCount;
+    const position = (e.currentTarget.scrollWidth - e.currentTarget.scrollLeft) / itemsWidth;
+    setSlideIndex(Math.round(position % slidesCount));
+  }
+  function navigate(target) {
+    if (!containerRef.current) return;
+    const slideWidth = containerRef.current.offsetWidth;
+    let nextSlideScroll = -(slideWidth * target);
+    if (target < 0) nextSlideScroll = -(slideWidth * slidesCount);
+    else if (target >= slidesCount) nextSlideScroll = 0;
+    containerRef.current.scrollTo({
+      left: nextSlideScroll,
+      behavior: "smooth"
+    });
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: clsx("overflow-hidden relative group", className),
+      style: { direction: "rtl" },
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: clsx(
+              "flex snap-x snap-mandatory overflow-x-auto no-scrollbar",
+              containerClassName
+            ),
+            style: { marginLeft: -spaceBetween },
+            onScroll: detectCarouselPosition,
+            ref: containerRef,
+            children: /* @__PURE__ */ jsx(sliderContext.Provider, { value: { slidesPerView, spaceBetween }, children: props.children })
+          }
+        ),
+        haveNavigation && /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: clsx("flex", {
+              "items-center mt-2": navigationVariant === "outside",
+              "absolute bottom-4 w-full justify-center": navigationVariant === "inside",
+              "justify-between": navigationVariant === "outside" && navigationButtonsShowType !== "hide",
+              "justify-center": navigationVariant === "outside" && navigationButtonsShowType === "hide"
+            }),
+            children: [
+              navigationButtonsShowType && navigationButtonsShowType !== "hide" && /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  className: clsx("flex gap-2", {
+                    "absolute bottom-0 left-[5.5%]": navigationVariant === "inside",
+                    "opacity-0 group-hover:opacity-100 transition": navigationButtonsShowType === "hover"
+                  }),
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      Button,
+                      {
+                        type: "button",
+                        variant: "secondary",
+                        onClick: () => navigate(slideIndex - 1),
+                        rightIcon: /* @__PURE__ */ jsx(ArrowRight2Icon, {})
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      Button,
+                      {
+                        type: "button",
+                        variant: "secondary",
+                        onClick: () => navigate(slideIndex + 1),
+                        rightIcon: /* @__PURE__ */ jsx(ArrowLeft2Icon, {})
+                      }
+                    )
+                  ]
+                }
+              ),
+              (showNavigationDots || showPaginationText) && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+                showPaginationText && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 font-caption-regular text-gray-400 ss02", children: [
+                  /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      className: clsx("font-bold", {
+                        "text-gray-600": navigationVariant === "outside",
+                        "text-white": navigationVariant === "inside"
+                      }),
+                      children: slideIndex + 1
+                    }
+                  ),
+                  /* @__PURE__ */ jsx("span", { children: "از" }),
+                  /* @__PURE__ */ jsx("span", { children: slidesCount })
+                ] }),
+                showNavigationDots && /* @__PURE__ */ jsx("div", { className: clsx("flex items-center justify-center gap-2", dotsClassName), children: Array.from(Array(slidesCount).keys()).map((item, index) => /* @__PURE__ */ jsx(
+                  NavigationDot,
+                  {
+                    active: slideIndex === index,
+                    autoplay: autoplay ?? false,
+                    variant: navigationVariant,
+                    onClick: () => navigate(index),
+                    onNavigateToNext: () => navigate(slideIndex + 1)
+                  },
+                  item + slidesCount
+                )) })
+              ] })
+            ]
+          }
+        )
+      ]
+    }
+  );
+};
+
+const Slide = (props) => {
+  const { children, className } = props;
+  const { slidesPerView, spaceBetween } = useSliderContext();
+  const ref = useRef(null);
+  const [childIndex, setChildIndex] = useState(0);
+  useEffect(() => {
+    if (!ref.current) return;
+    setChildIndex(Array.prototype.indexOf.call(ref.current.parentNode?.children, ref.current));
+  }, [ref]);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      className: clsx("shrink-0 snap-always", className),
+      style: {
+        width: 100 / (slidesPerView ?? 1) + "%",
+        paddingLeft: spaceBetween,
+        scrollSnapAlign: childIndex % slidesPerView === 0 ? "start" : "none"
+      },
+      children
+    }
+  );
+};
+
+export { Slider as S, Slide as a };

package/dist/Slide-Q5_7SCZR.cjs

@@ -0,0 +1,218 @@
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const clsx = require('./clsx-BtxeOLZW.cjs');
+const react = require('react');
+const ArrowLeft2 = require('./ArrowLeft2-iZ0Au6Fn.cjs');
+const ArrowRight2 = require('./ArrowRight2-DTuru_sP.cjs');
+const Button = require('./Button/index.cjs');
+
+const sliderContext = react.createContext({
+  slidesPerView: 1,
+  spaceBetween: 0
+});
+const useSliderContext = () => react.useContext(sliderContext);
+
+function styleNavigationDot({ active, autoplay, variant }) {
+  const variantClassName = {
+    inside: "bg-gray-500/50 hover:bg-gray-500/80",
+    outside: "bg-gray-200 hover:bg-gray-300"
+  };
+  return [variantClassName[variant], active ? "w-[22px]" : "w-[6px]", autoplay ? "p-[1px]" : ""];
+}
+const NavigationDot = (props) => {
+  const { active, autoplay, variant, onClick, onNavigateToNext } = props;
+  const [fillPercentage, setFillPercentage] = react.useState(0);
+  react.useEffect(() => {
+    if (!active || !autoplay) return;
+    const autoplayTime = typeof autoplay === "boolean" ? 7e3 : autoplay?.delay ?? 7e3;
+    let startTime = Date.now();
+    const autoplayInterval = setInterval(() => {
+      const elapsed = Date.now() - startTime;
+      const percentage = elapsed / autoplayTime * 100;
+      setFillPercentage(Math.min(percentage, 100));
+      if (elapsed >= autoplayTime && typeof onNavigateToNext === "function") {
+        onNavigateToNext();
+      }
+    }, 100);
+    return function cleanup() {
+      setFillPercentage(0);
+      startTime = Date.now();
+      return clearInterval(autoplayInterval);
+    };
+  }, [active, autoplay, onNavigateToNext]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "button",
+    {
+      className: clsx.clsx(
+        "rounded-full overflow-hidden transition-all h-[6px]",
+        styleNavigationDot({ active, autoplay, variant })
+      ),
+      onClick,
+      children: active && /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          className: clsx.clsx("h-full rounded-full", {
+            "bg-white": variant === "inside",
+            "bg-gray-700": variant === "outside"
+          }),
+          style: { width: autoplay ? `${fillPercentage}%` : "100%" }
+        }
+      )
+    }
+  );
+};
+
+const Slider = (props) => {
+  const {
+    className = "",
+    containerClassName = "",
+    showNavigationDots = true,
+    dotsClassName = "",
+    slidesPerView = 1,
+    autoplay,
+    navigationButtonsShowType = "hide",
+    spaceBetween = 0,
+    navigationVariant = "outside",
+    showPaginationText = false
+  } = props;
+  const [slideIndex, setSlideIndex] = react.useState(0);
+  const containerRef = react.useRef(null);
+  const childsCount = react.Children.count(props.children);
+  const slidesCount = Math.ceil(childsCount / slidesPerView);
+  const haveNavigation = showNavigationDots || navigationButtonsShowType && navigationButtonsShowType !== "hide" || showPaginationText;
+  function detectCarouselPosition(e) {
+    const itemsWidth = e.currentTarget.scrollWidth / slidesCount;
+    const position = (e.currentTarget.scrollWidth - e.currentTarget.scrollLeft) / itemsWidth;
+    setSlideIndex(Math.round(position % slidesCount));
+  }
+  function navigate(target) {
+    if (!containerRef.current) return;
+    const slideWidth = containerRef.current.offsetWidth;
+    let nextSlideScroll = -(slideWidth * target);
+    if (target < 0) nextSlideScroll = -(slideWidth * slidesCount);
+    else if (target >= slidesCount) nextSlideScroll = 0;
+    containerRef.current.scrollTo({
+      left: nextSlideScroll,
+      behavior: "smooth"
+    });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: clsx.clsx("overflow-hidden relative group", className),
+      style: { direction: "rtl" },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: clsx.clsx(
+              "flex snap-x snap-mandatory overflow-x-auto no-scrollbar",
+              containerClassName
+            ),
+            style: { marginLeft: -spaceBetween },
+            onScroll: detectCarouselPosition,
+            ref: containerRef,
+            children: /* @__PURE__ */ jsxRuntime.jsx(sliderContext.Provider, { value: { slidesPerView, spaceBetween }, children: props.children })
+          }
+        ),
+        haveNavigation && /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: clsx.clsx("flex", {
+              "items-center mt-2": navigationVariant === "outside",
+              "absolute bottom-4 w-full justify-center": navigationVariant === "inside",
+              "justify-between": navigationVariant === "outside" && navigationButtonsShowType !== "hide",
+              "justify-center": navigationVariant === "outside" && navigationButtonsShowType === "hide"
+            }),
+            children: [
+              navigationButtonsShowType && navigationButtonsShowType !== "hide" && /* @__PURE__ */ jsxRuntime.jsxs(
+                "div",
+                {
+                  className: clsx.clsx("flex gap-2", {
+                    "absolute bottom-0 left-[5.5%]": navigationVariant === "inside",
+                    "opacity-0 group-hover:opacity-100 transition": navigationButtonsShowType === "hover"
+                  }),
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      Button,
+                      {
+                        type: "button",
+                        variant: "secondary",
+                        onClick: () => navigate(slideIndex - 1),
+                        rightIcon: /* @__PURE__ */ jsxRuntime.jsx(ArrowRight2.ArrowRight2Icon, {})
+                      }
+                    ),
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      Button,
+                      {
+                        type: "button",
+                        variant: "secondary",
+                        onClick: () => navigate(slideIndex + 1),
+                        rightIcon: /* @__PURE__ */ jsxRuntime.jsx(ArrowLeft2.ArrowLeft2Icon, {})
+                      }
+                    )
+                  ]
+                }
+              ),
+              (showNavigationDots || showPaginationText) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
+                showPaginationText && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1 font-caption-regular text-gray-400 ss02", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "span",
+                    {
+                      className: clsx.clsx("font-bold", {
+                        "text-gray-600": navigationVariant === "outside",
+                        "text-white": navigationVariant === "inside"
+                      }),
+                      children: slideIndex + 1
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { children: "از" }),
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { children: slidesCount })
+                ] }),
+                showNavigationDots && /* @__PURE__ */ jsxRuntime.jsx("div", { className: clsx.clsx("flex items-center justify-center gap-2", dotsClassName), children: Array.from(Array(slidesCount).keys()).map((item, index) => /* @__PURE__ */ jsxRuntime.jsx(
+                  NavigationDot,
+                  {
+                    active: slideIndex === index,
+                    autoplay: autoplay ?? false,
+                    variant: navigationVariant,
+                    onClick: () => navigate(index),
+                    onNavigateToNext: () => navigate(slideIndex + 1)
+                  },
+                  item + slidesCount
+                )) })
+              ] })
+            ]
+          }
+        )
+      ]
+    }
+  );
+};
+
+const Slide = (props) => {
+  const { children, className } = props;
+  const { slidesPerView, spaceBetween } = useSliderContext();
+  const ref = react.useRef(null);
+  const [childIndex, setChildIndex] = react.useState(0);
+  react.useEffect(() => {
+    if (!ref.current) return;
+    setChildIndex(Array.prototype.indexOf.call(ref.current.parentNode?.children, ref.current));
+  }, [ref]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ref,
+      className: clsx.clsx("shrink-0 snap-always", className),
+      style: {
+        width: 100 / (slidesPerView ?? 1) + "%",
+        paddingLeft: spaceBetween,
+        scrollSnapAlign: childIndex % slidesPerView === 0 ? "start" : "none"
+      },
+      children
+    }
+  );
+};
+
+exports.Slide = Slide;
+exports.Slider = Slider;

package/dist/Slider/Slide.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Slide.d.ts","sourceRoot":"","sources":["../../src/components/Slider/Slide.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAGnD,UAAU,UAAU;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AACD,QAAA,MAAM,KAAK,EAAE,EAAE,CAAC,iBAAiB,CAAC,UAAU,CAAC,CAe5C,CAAC;AAEF,eAAe,KAAK,CAAC"}
+{"version":3,"file":"Slide.d.ts","sourceRoot":"","sources":["../../src/components/Slider/Slide.tsx"],"names":[],"mappings":"AACA,OAAO,EAA+B,KAAK,EAAE,EAAE,KAAK,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAGrF,UAAU,UAAU;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AACD,QAAA,MAAM,KAAK,EAAE,EAAE,CAAC,iBAAiB,CAAC,UAAU,CAAC,CAwB5C,CAAC;AAEF,eAAe,KAAK,CAAC"}

package/dist/Slider/Slider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Slider.d.ts","sourceRoot":"","sources":["../../src/components/Slider/Slider.tsx"],"names":[],"mappings":"AACA,OAAO,EAA8B,KAAK,EAAE,EAAE,KAAK,iBAAiB,EAAgB,MAAM,OAAO,CAAC;AAOlG,UAAU,eAAe;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,EACL,OAAO,GACP;QACE,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;KACvB,CAAC;IACN,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B;AAED,UAAU,2BAA4B,SAAQ,eAAe;IAC3D,iBAAiB,CAAC,EAAE,QAAQ,CAAC;IAC7B,yBAAyB,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,WAAW,CAAC;CAC5D;AACD,UAAU,4BAA6B,SAAQ,eAAe;IAC5D,iBAAiB,CAAC,EAAE,SAAS,CAAC;IAC9B,yBAAyB,CAAC,EAAE,MAAM,GAAG,WAAW,CAAC;CAClD;AAED,MAAM,MAAM,WAAW,GAAG,2BAA2B,GAAG,4BAA4B,CAAC;AAErF,QAAA,MAAM,MAAM,EAAE,EAAE,CAAC,iBAAiB,CAAC,WAAW,CAAC,CA2H9C,CAAC;AAEF,eAAe,MAAM,CAAC"}
+{"version":3,"file":"Slider.d.ts","sourceRoot":"","sources":["../../src/components/Slider/Slider.tsx"],"names":[],"mappings":"AACA,OAAO,EAA8B,KAAK,EAAE,EAAE,KAAK,iBAAiB,EAAgB,MAAM,OAAO,CAAC;AAOlG,UAAU,eAAe;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,EACL,OAAO,GACP;QACE,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;KACvB,CAAC;IACN,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B;AAED,UAAU,2BAA4B,SAAQ,eAAe;IAC3D,iBAAiB,CAAC,EAAE,QAAQ,CAAC;IAC7B,yBAAyB,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,WAAW,CAAC;CAC5D;AACD,UAAU,4BAA6B,SAAQ,eAAe;IAC5D,iBAAiB,CAAC,EAAE,SAAS,CAAC;IAC9B,yBAAyB,CAAC,EAAE,MAAM,GAAG,WAAW,CAAC;CAClD;AAED,MAAM,MAAM,WAAW,GAAG,2BAA2B,GAAG,4BAA4B,CAAC;AAErF,QAAA,MAAM,MAAM,EAAE,EAAE,CAAC,iBAAiB,CAAC,WAAW,CAAC,CAkI9C,CAAC;AAEF,eAAe,MAAM,CAAC"}

package/dist/Slider/index.cjs

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 require('../assets/styles.css');;/* empty css                   */
-const Slide = require('../Slide-JxJDSGwS.cjs');
+const Slide = require('../Slide-Q5_7SCZR.cjs');
 
 
 

package/dist/Slider/index.js

@@ -1,2 +1,2 @@
 import '../assets/styles.css';/* empty css                 */
-export { a as Slide, S as Slider } from '../Slide-B4sbGo5D.js';
+export { a as Slide, S as Slider } from '../Slide-BDD1_RXD.js';

package/dist/assets/Button.css

@@ -629,6 +629,9 @@ video {
 .h-\[1px\] {
   height: 1px;
 }
+.h-\[200px\] {
+  height: 200px;
+}
 .h-\[6px\] {
   height: 6px;
 }
@@ -669,6 +672,9 @@ video {
 .w-\[22px\] {
   width: 22px;
 }
+.w-\[400px\] {
+  width: 400px;
+}
 .w-\[6px\] {
   width: 6px;
 }
@@ -717,6 +723,9 @@ video {
 .snap-mandatory {
   --tw-scroll-snap-strictness: mandatory;
 }
+.snap-always {
+  scroll-snap-stop: always;
+}
 .appearance-none {
   -webkit-appearance: none;
      -moz-appearance: none;
@@ -792,6 +801,9 @@ video {
 .overflow-hidden {
   overflow: hidden;
 }
+.overflow-x-auto {
+  overflow-x: auto;
+}
 .overflow-x-hidden {
   overflow-x: hidden;
 }
@@ -1667,9 +1679,3 @@ button svg {
     margin-right: 0px;
   }
 }
-.\[\&\>\*\]\:snap-start>* {
-  scroll-snap-align: start;
-}
-.\[\&\>\*\]\:snap-always>* {
-  scroll-snap-stop: always;
-}

package/dist/assets/styles.css

@@ -629,6 +629,9 @@ video {
 .h-\[1px\] {
   height: 1px;
 }
+.h-\[200px\] {
+  height: 200px;
+}
 .h-\[6px\] {
   height: 6px;
 }
@@ -669,6 +672,9 @@ video {
 .w-\[22px\] {
   width: 22px;
 }
+.w-\[400px\] {
+  width: 400px;
+}
 .w-\[6px\] {
   width: 6px;
 }
@@ -717,6 +723,9 @@ video {
 .snap-mandatory {
   --tw-scroll-snap-strictness: mandatory;
 }
+.snap-always {
+  scroll-snap-stop: always;
+}
 .appearance-none {
   -webkit-appearance: none;
      -moz-appearance: none;
@@ -792,6 +801,9 @@ video {
 .overflow-hidden {
   overflow: hidden;
 }
+.overflow-x-auto {
+  overflow-x: auto;
+}
 .overflow-x-hidden {
   overflow-x: hidden;
 }
@@ -1603,9 +1615,3 @@ video {
     margin-right: 0px;
   }
 }
-.\[\&\>\*\]\:snap-start>* {
-  scroll-snap-align: start;
-}
-.\[\&\>\*\]\:snap-always>* {
-  scroll-snap-stop: always;
-}

package/dist/index.cjs

@@ -14,7 +14,7 @@ const Form_Input = require('./Form/Input/index.cjs');
 const Form_RadioButton = require('./Form/RadioButton/index.cjs');
 const Form_Textarea = require('./Form/Textarea/index.cjs');
 const Pagination = require('./Pagination/index.cjs');
-const Slide = require('./Slide-JxJDSGwS.cjs');
+const Slide = require('./Slide-Q5_7SCZR.cjs');
 
 
 

package/dist/index.js

@@ -10,4 +10,4 @@ export { default as Input } from './Form/Input/index.js';
 export { default as RadioButton } from './Form/RadioButton/index.js';
 export { default as Textarea } from './Form/Textarea/index.js';
 export { default as Pagination } from './Pagination/index.js';
-export { a as Slide, S as Slider } from './Slide-B4sbGo5D.js';
+export { a as Slide, S as Slider } from './Slide-BDD1_RXD.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dgshahr/ui-kit",
-  "version": "0.0.4",
+  "version": "0.0.5",
   "description": "dgshahr ui-kit",
   "author": "dgshahr",
   "license": "MIT",

package/dist/Slide-B4sbGo5D.js

@@ -1,198 +0,0 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
-import { c as clsx } from './clsx-ChV9xqsO.js';
-import { createContext, useContext, useState, useEffect, useRef, Children } from 'react';
-import { A as ArrowLeft2Icon } from './ArrowLeft2-BURhvXT2.js';
-import { A as ArrowRight2Icon } from './ArrowRight2-DCxJPvNC.js';
-import Button from './Button/index.js';
-
-const sliderContext = createContext({
-  slidesPerView: 1,
-  spaceBetween: 0
-});
-const useSliderContext = () => useContext(sliderContext);
-
-function styleNavigationDot({ active, autoplay, variant }) {
-  const variantClassName = {
-    inside: "bg-gray-500/50 hover:bg-gray-500/80",
-    outside: "bg-gray-200 hover:bg-gray-300"
-  };
-  return [variantClassName[variant], active ? "w-[22px]" : "w-[6px]", autoplay ? "p-[1px]" : ""];
-}
-const NavigationDot = (props) => {
-  const { active, autoplay, variant, onClick, onNavigateToNext } = props;
-  const [fillPercentage, setFillPercentage] = useState(0);
-  useEffect(() => {
-    if (!active || !autoplay) return;
-    const autoplayTime = typeof autoplay === "boolean" ? 7e3 : autoplay?.delay ?? 7e3;
-    let startTime = Date.now();
-    const autoplayInterval = setInterval(() => {
-      const elapsed = Date.now() - startTime;
-      const percentage = elapsed / autoplayTime * 100;
-      setFillPercentage(Math.min(percentage, 100));
-      if (elapsed >= autoplayTime && typeof onNavigateToNext === "function") {
-        onNavigateToNext();
-      }
-    }, 100);
-    return function cleanup() {
-      setFillPercentage(0);
-      startTime = Date.now();
-      return clearInterval(autoplayInterval);
-    };
-  }, [active, autoplay, onNavigateToNext]);
-  return /* @__PURE__ */ jsx(
-    "button",
-    {
-      className: clsx(
-        "rounded-full overflow-hidden transition-all h-[6px]",
-        styleNavigationDot({ active, autoplay, variant })
-      ),
-      onClick,
-      children: active && /* @__PURE__ */ jsx(
-        "div",
-        {
-          className: clsx("h-full rounded-full", {
-            "bg-white": variant === "inside",
-            "bg-gray-700": variant === "outside"
-          }),
-          style: { width: autoplay ? `${fillPercentage}%` : "100%" }
-        }
-      )
-    }
-  );
-};
-
-const Slider = (props) => {
-  const {
-    className = "",
-    containerClassName = "",
-    showNavigationDots = true,
-    dotsClassName = "",
-    slidesPerView = 1,
-    autoplay,
-    navigationButtonsShowType = "hide",
-    spaceBetween = 0,
-    navigationVariant = "outside",
-    showPaginationText = false
-  } = props;
-  const [slideIndex, setSlideIndex] = useState(0);
-  const containerRef = useRef(null);
-  const childsCount = Children.count(props.children);
-  const slidesCount = Math.ceil(childsCount / slidesPerView);
-  const haveNavigation = showNavigationDots || navigationButtonsShowType && navigationButtonsShowType !== "hide" || showPaginationText;
-  function detectCarouselPosition(e) {
-    const itemsWidth = e.currentTarget.scrollWidth / slidesCount;
-    const position = (e.currentTarget.scrollWidth - e.currentTarget.scrollLeft) / itemsWidth;
-    setSlideIndex(Math.round(position % slidesCount));
-  }
-  function navigate(target) {
-    if (!containerRef.current) return;
-    const slideWidth = containerRef.current.offsetWidth;
-    let nextSlideScroll = -(slideWidth * target);
-    if (target < 0) nextSlideScroll = -(slideWidth * slidesCount);
-    else if (target >= slidesCount) nextSlideScroll = 0;
-    containerRef.current.scrollTo({
-      left: nextSlideScroll,
-      behavior: "smooth"
-    });
-  }
-  return /* @__PURE__ */ jsxs("div", { className: clsx("overflow-hidden relative group", className), children: [
-    /* @__PURE__ */ jsx(
-      "div",
-      {
-        className: clsx(
-          "flex snap-x snap-mandatory overflow-x-hidden [&>*]:snap-start no-scrollbar [&>*]:snap-always",
-          containerClassName
-        ),
-        style: { marginLeft: -spaceBetween },
-        onScroll: detectCarouselPosition,
-        ref: containerRef,
-        children: /* @__PURE__ */ jsx(sliderContext.Provider, { value: { slidesPerView, spaceBetween }, children: props.children })
-      }
-    ),
-    haveNavigation && /* @__PURE__ */ jsxs(
-      "div",
-      {
-        className: clsx("flex", {
-          "items-center justify-between mt-2": navigationVariant === "outside",
-          "absolute bottom-4 w-full justify-center": navigationVariant === "inside"
-        }),
-        children: [
-          navigationButtonsShowType && navigationButtonsShowType !== "hide" && /* @__PURE__ */ jsxs(
-            "div",
-            {
-              className: clsx("flex gap-2", {
-                "absolute bottom-0 left-[5.5%]": navigationVariant === "inside",
-                "opacity-0 group-hover:opacity-100 transition": navigationButtonsShowType === "hover"
-              }),
-              children: [
-                /* @__PURE__ */ jsx(
-                  Button,
-                  {
-                    type: "button",
-                    variant: "secondary",
-                    onClick: () => navigate(slideIndex - 1),
-                    rightIcon: /* @__PURE__ */ jsx(ArrowRight2Icon, {})
-                  }
-                ),
-                /* @__PURE__ */ jsx(
-                  Button,
-                  {
-                    type: "button",
-                    variant: "secondary",
-                    onClick: () => navigate(slideIndex + 1),
-                    rightIcon: /* @__PURE__ */ jsx(ArrowLeft2Icon, {})
-                  }
-                )
-              ]
-            }
-          ),
-          (showNavigationDots || showPaginationText) && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
-            showPaginationText && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 font-caption-regular text-gray-400 ss02", children: [
-              /* @__PURE__ */ jsx(
-                "span",
-                {
-                  className: clsx("font-bold", {
-                    "text-gray-600": navigationVariant === "outside",
-                    "text-white": navigationVariant === "inside"
-                  }),
-                  children: slideIndex + 1
-                }
-              ),
-              /* @__PURE__ */ jsx("span", { children: "از" }),
-              /* @__PURE__ */ jsx("span", { children: slidesCount })
-            ] }),
-            showNavigationDots && /* @__PURE__ */ jsx("div", { className: clsx("flex items-center justify-center gap-2", dotsClassName), children: Array.from(Array(slidesCount).keys()).map((item, index) => /* @__PURE__ */ jsx(
-              NavigationDot,
-              {
-                active: slideIndex === index,
-                autoplay: autoplay ?? false,
-                variant: navigationVariant,
-                onClick: () => navigate(index),
-                onNavigateToNext: () => navigate(slideIndex + 1)
-              },
-              item + slidesCount
-            )) })
-          ] })
-        ]
-      }
-    )
-  ] });
-};
-
-const Slide = (props) => {
-  const { children, className } = props;
-  const { slidesPerView, spaceBetween } = useSliderContext();
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      className: clsx("shrink-0", className),
-      style: {
-        width: 100 / (slidesPerView ?? 1) + "%",
-        paddingLeft: spaceBetween
-      },
-      children
-    }
-  );
-};
-
-export { Slider as S, Slide as a };

package/dist/Slide-JxJDSGwS.cjs

@@ -1,201 +0,0 @@
-'use strict';
-
-const jsxRuntime = require('react/jsx-runtime');
-const clsx = require('./clsx-BtxeOLZW.cjs');
-const react = require('react');
-const ArrowLeft2 = require('./ArrowLeft2-iZ0Au6Fn.cjs');
-const ArrowRight2 = require('./ArrowRight2-DTuru_sP.cjs');
-const Button = require('./Button/index.cjs');
-
-const sliderContext = react.createContext({
-  slidesPerView: 1,
-  spaceBetween: 0
-});
-const useSliderContext = () => react.useContext(sliderContext);
-
-function styleNavigationDot({ active, autoplay, variant }) {
-  const variantClassName = {
-    inside: "bg-gray-500/50 hover:bg-gray-500/80",
-    outside: "bg-gray-200 hover:bg-gray-300"
-  };
-  return [variantClassName[variant], active ? "w-[22px]" : "w-[6px]", autoplay ? "p-[1px]" : ""];
-}
-const NavigationDot = (props) => {
-  const { active, autoplay, variant, onClick, onNavigateToNext } = props;
-  const [fillPercentage, setFillPercentage] = react.useState(0);
-  react.useEffect(() => {
-    if (!active || !autoplay) return;
-    const autoplayTime = typeof autoplay === "boolean" ? 7e3 : autoplay?.delay ?? 7e3;
-    let startTime = Date.now();
-    const autoplayInterval = setInterval(() => {
-      const elapsed = Date.now() - startTime;
-      const percentage = elapsed / autoplayTime * 100;
-      setFillPercentage(Math.min(percentage, 100));
-      if (elapsed >= autoplayTime && typeof onNavigateToNext === "function") {
-        onNavigateToNext();
-      }
-    }, 100);
-    return function cleanup() {
-      setFillPercentage(0);
-      startTime = Date.now();
-      return clearInterval(autoplayInterval);
-    };
-  }, [active, autoplay, onNavigateToNext]);
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "button",
-    {
-      className: clsx.clsx(
-        "rounded-full overflow-hidden transition-all h-[6px]",
-        styleNavigationDot({ active, autoplay, variant })
-      ),
-      onClick,
-      children: active && /* @__PURE__ */ jsxRuntime.jsx(
-        "div",
-        {
-          className: clsx.clsx("h-full rounded-full", {
-            "bg-white": variant === "inside",
-            "bg-gray-700": variant === "outside"
-          }),
-          style: { width: autoplay ? `${fillPercentage}%` : "100%" }
-        }
-      )
-    }
-  );
-};
-
-const Slider = (props) => {
-  const {
-    className = "",
-    containerClassName = "",
-    showNavigationDots = true,
-    dotsClassName = "",
-    slidesPerView = 1,
-    autoplay,
-    navigationButtonsShowType = "hide",
-    spaceBetween = 0,
-    navigationVariant = "outside",
-    showPaginationText = false
-  } = props;
-  const [slideIndex, setSlideIndex] = react.useState(0);
-  const containerRef = react.useRef(null);
-  const childsCount = react.Children.count(props.children);
-  const slidesCount = Math.ceil(childsCount / slidesPerView);
-  const haveNavigation = showNavigationDots || navigationButtonsShowType && navigationButtonsShowType !== "hide" || showPaginationText;
-  function detectCarouselPosition(e) {
-    const itemsWidth = e.currentTarget.scrollWidth / slidesCount;
-    const position = (e.currentTarget.scrollWidth - e.currentTarget.scrollLeft) / itemsWidth;
-    setSlideIndex(Math.round(position % slidesCount));
-  }
-  function navigate(target) {
-    if (!containerRef.current) return;
-    const slideWidth = containerRef.current.offsetWidth;
-    let nextSlideScroll = -(slideWidth * target);
-    if (target < 0) nextSlideScroll = -(slideWidth * slidesCount);
-    else if (target >= slidesCount) nextSlideScroll = 0;
-    containerRef.current.scrollTo({
-      left: nextSlideScroll,
-      behavior: "smooth"
-    });
-  }
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: clsx.clsx("overflow-hidden relative group", className), children: [
-    /* @__PURE__ */ jsxRuntime.jsx(
-      "div",
-      {
-        className: clsx.clsx(
-          "flex snap-x snap-mandatory overflow-x-hidden [&>*]:snap-start no-scrollbar [&>*]:snap-always",
-          containerClassName
-        ),
-        style: { marginLeft: -spaceBetween },
-        onScroll: detectCarouselPosition,
-        ref: containerRef,
-        children: /* @__PURE__ */ jsxRuntime.jsx(sliderContext.Provider, { value: { slidesPerView, spaceBetween }, children: props.children })
-      }
-    ),
-    haveNavigation && /* @__PURE__ */ jsxRuntime.jsxs(
-      "div",
-      {
-        className: clsx.clsx("flex", {
-          "items-center justify-between mt-2": navigationVariant === "outside",
-          "absolute bottom-4 w-full justify-center": navigationVariant === "inside"
-        }),
-        children: [
-          navigationButtonsShowType && navigationButtonsShowType !== "hide" && /* @__PURE__ */ jsxRuntime.jsxs(
-            "div",
-            {
-              className: clsx.clsx("flex gap-2", {
-                "absolute bottom-0 left-[5.5%]": navigationVariant === "inside",
-                "opacity-0 group-hover:opacity-100 transition": navigationButtonsShowType === "hover"
-              }),
-              children: [
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  Button,
-                  {
-                    type: "button",
-                    variant: "secondary",
-                    onClick: () => navigate(slideIndex - 1),
-                    rightIcon: /* @__PURE__ */ jsxRuntime.jsx(ArrowRight2.ArrowRight2Icon, {})
-                  }
-                ),
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  Button,
-                  {
-                    type: "button",
-                    variant: "secondary",
-                    onClick: () => navigate(slideIndex + 1),
-                    rightIcon: /* @__PURE__ */ jsxRuntime.jsx(ArrowLeft2.ArrowLeft2Icon, {})
-                  }
-                )
-              ]
-            }
-          ),
-          (showNavigationDots || showPaginationText) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
-            showPaginationText && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1 font-caption-regular text-gray-400 ss02", children: [
-              /* @__PURE__ */ jsxRuntime.jsx(
-                "span",
-                {
-                  className: clsx.clsx("font-bold", {
-                    "text-gray-600": navigationVariant === "outside",
-                    "text-white": navigationVariant === "inside"
-                  }),
-                  children: slideIndex + 1
-                }
-              ),
-              /* @__PURE__ */ jsxRuntime.jsx("span", { children: "از" }),
-              /* @__PURE__ */ jsxRuntime.jsx("span", { children: slidesCount })
-            ] }),
-            showNavigationDots && /* @__PURE__ */ jsxRuntime.jsx("div", { className: clsx.clsx("flex items-center justify-center gap-2", dotsClassName), children: Array.from(Array(slidesCount).keys()).map((item, index) => /* @__PURE__ */ jsxRuntime.jsx(
-              NavigationDot,
-              {
-                active: slideIndex === index,
-                autoplay: autoplay ?? false,
-                variant: navigationVariant,
-                onClick: () => navigate(index),
-                onNavigateToNext: () => navigate(slideIndex + 1)
-              },
-              item + slidesCount
-            )) })
-          ] })
-        ]
-      }
-    )
-  ] });
-};
-
-const Slide = (props) => {
-  const { children, className } = props;
-  const { slidesPerView, spaceBetween } = useSliderContext();
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
-    {
-      className: clsx.clsx("shrink-0", className),
-      style: {
-        width: 100 / (slidesPerView ?? 1) + "%",
-        paddingLeft: spaceBetween
-      },
-      children
-    }
-  );
-};
-
-exports.Slide = Slide;
-exports.Slider = Slider;