@dgshahr/ui-kit 0.0.4 → 0.0.6

package/dist/Slide-BhWFQV8r.js

@@ -0,0 +1,234 @@
+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: "dgs-ui-kit-bg-gray-500/50 hover:dgs-ui-kit-bg-gray-500/80",
+    outside: "dgs-ui-kit-bg-gray-200 hover:dgs-ui-kit-bg-gray-300"
+  };
+  return [
+    variantClassName[variant],
+    active ? "dgs-ui-kit-w-[22px]" : "dgs-ui-kit-w-[6px]",
+    autoplay ? "dgs-ui-kit-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(
+        "dgs-ui-kit-rounded-full dgs-ui-kit-overflow-hidden dgs-ui-kit-transition-all dgs-ui-kit-h-[6px]",
+        styleNavigationDot({ active, autoplay, variant })
+      ),
+      onClick,
+      children: active && /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: clsx("dgs-ui-kit-h-full dgs-ui-kit-rounded-full", {
+            "dgs-ui-kit-bg-white": variant === "inside",
+            "dgs-ui-kit-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,
+    navigationContainerClassName = ""
+  } = 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) && slidesCount > 1;
+  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("dgs-ui-kit-overflow-hidden dgs-ui-kit-relative dgs-ui-kit-group", className),
+      style: { direction: "rtl" },
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: clsx(
+              "dgs-ui-kit-flex dgs-ui-kit-snap-x dgs-ui-kit-snap-mandatory dgs-ui-kit-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(
+              "dgs-ui-kit-flex",
+              {
+                "dgs-ui-kit-items-center dgs-ui-kit-mt-2": navigationVariant === "outside",
+                "dgs-ui-kit-absolute dgs-ui-kit-bottom-4 dgs-ui-kit-w-full dgs-ui-kit-justify-center": navigationVariant === "inside",
+                "dgs-ui-kit-justify-between": navigationVariant === "outside" && navigationButtonsShowType !== "hide",
+                "dgs-ui-kit-justify-center": navigationVariant === "outside" && navigationButtonsShowType === "hide"
+              },
+              navigationContainerClassName
+            ),
+            children: [
+              navigationButtonsShowType && navigationButtonsShowType !== "hide" && /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  className: clsx("dgs-ui-kit-flex dgs-ui-kit-gap-2", {
+                    "dgs-ui-kit-absolute dgs-ui-kit-bottom-0 dgs-ui-kit-left-[5.5%]": navigationVariant === "inside" && navigationButtonsShowType !== "onSides",
+                    "dgs-ui-kit-opacity-0 group-hover:dgs-ui-kit-opacity-100 dgs-ui-kit-transition": navigationButtonsShowType === "hover" || navigationButtonsShowType === "onSides",
+                    "dgs-ui-kit-fixed dgs-ui-kit-justify-between dgs-ui-kit-top-1/2 -dgs-ui-kit-translate-y-1/2 dgs-ui-kit-w-full dgs-ui-kit-px-[5.5%]": navigationVariant === "inside" && navigationButtonsShowType === "onSides"
+                  }),
+                  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: "dgs-ui-kit-flex dgs-ui-kit-items-center dgs-ui-kit-gap-3", children: [
+                showPaginationText && /* @__PURE__ */ jsxs("div", { className: "dgs-ui-kit-flex dgs-ui-kit-items-center dgs-ui-kit-gap-1 dgs-ui-kit-font-caption-regular dgs-ui-kit-text-gray-400 ss02", children: [
+                  /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      className: clsx("dgs-ui-kit-font-bold", {
+                        "dgs-ui-kit-text-gray-600": navigationVariant === "outside",
+                        "dgs-ui-kit-text-white": navigationVariant === "inside"
+                      }),
+                      children: slideIndex + 1
+                    }
+                  ),
+                  /* @__PURE__ */ jsx("span", { children: "از" }),
+                  /* @__PURE__ */ jsx("span", { children: slidesCount })
+                ] }),
+                showNavigationDots && /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: clsx(
+                      "dgs-ui-kit-flex dgs-ui-kit-items-center dgs-ui-kit-justify-center dgs-ui-kit-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("dgs-ui-kit-shrink-0 dgs-ui-kit-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-BzXDEkqH.cjs

@@ -0,0 +1,237 @@
+'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: "dgs-ui-kit-bg-gray-500/50 hover:dgs-ui-kit-bg-gray-500/80",
+    outside: "dgs-ui-kit-bg-gray-200 hover:dgs-ui-kit-bg-gray-300"
+  };
+  return [
+    variantClassName[variant],
+    active ? "dgs-ui-kit-w-[22px]" : "dgs-ui-kit-w-[6px]",
+    autoplay ? "dgs-ui-kit-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(
+        "dgs-ui-kit-rounded-full dgs-ui-kit-overflow-hidden dgs-ui-kit-transition-all dgs-ui-kit-h-[6px]",
+        styleNavigationDot({ active, autoplay, variant })
+      ),
+      onClick,
+      children: active && /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          className: clsx.clsx("dgs-ui-kit-h-full dgs-ui-kit-rounded-full", {
+            "dgs-ui-kit-bg-white": variant === "inside",
+            "dgs-ui-kit-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,
+    navigationContainerClassName = ""
+  } = 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) && slidesCount > 1;
+  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("dgs-ui-kit-overflow-hidden dgs-ui-kit-relative dgs-ui-kit-group", className),
+      style: { direction: "rtl" },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: clsx.clsx(
+              "dgs-ui-kit-flex dgs-ui-kit-snap-x dgs-ui-kit-snap-mandatory dgs-ui-kit-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(
+              "dgs-ui-kit-flex",
+              {
+                "dgs-ui-kit-items-center dgs-ui-kit-mt-2": navigationVariant === "outside",
+                "dgs-ui-kit-absolute dgs-ui-kit-bottom-4 dgs-ui-kit-w-full dgs-ui-kit-justify-center": navigationVariant === "inside",
+                "dgs-ui-kit-justify-between": navigationVariant === "outside" && navigationButtonsShowType !== "hide",
+                "dgs-ui-kit-justify-center": navigationVariant === "outside" && navigationButtonsShowType === "hide"
+              },
+              navigationContainerClassName
+            ),
+            children: [
+              navigationButtonsShowType && navigationButtonsShowType !== "hide" && /* @__PURE__ */ jsxRuntime.jsxs(
+                "div",
+                {
+                  className: clsx.clsx("dgs-ui-kit-flex dgs-ui-kit-gap-2", {
+                    "dgs-ui-kit-absolute dgs-ui-kit-bottom-0 dgs-ui-kit-left-[5.5%]": navigationVariant === "inside" && navigationButtonsShowType !== "onSides",
+                    "dgs-ui-kit-opacity-0 group-hover:dgs-ui-kit-opacity-100 dgs-ui-kit-transition": navigationButtonsShowType === "hover" || navigationButtonsShowType === "onSides",
+                    "dgs-ui-kit-fixed dgs-ui-kit-justify-between dgs-ui-kit-top-1/2 -dgs-ui-kit-translate-y-1/2 dgs-ui-kit-w-full dgs-ui-kit-px-[5.5%]": navigationVariant === "inside" && navigationButtonsShowType === "onSides"
+                  }),
+                  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: "dgs-ui-kit-flex dgs-ui-kit-items-center dgs-ui-kit-gap-3", children: [
+                showPaginationText && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "dgs-ui-kit-flex dgs-ui-kit-items-center dgs-ui-kit-gap-1 dgs-ui-kit-font-caption-regular dgs-ui-kit-text-gray-400 ss02", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "span",
+                    {
+                      className: clsx.clsx("dgs-ui-kit-font-bold", {
+                        "dgs-ui-kit-text-gray-600": navigationVariant === "outside",
+                        "dgs-ui-kit-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(
+                      "dgs-ui-kit-flex dgs-ui-kit-items-center dgs-ui-kit-justify-center dgs-ui-kit-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("dgs-ui-kit-shrink-0 dgs-ui-kit-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/NavigationDot.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NavigationDot.d.ts","sourceRoot":"","sources":["../../src/components/Slider/NavigationDot.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAE5C,UAAU,kBAAkB;IAC1B,MAAM,EAAE,OAAO,CAAC;IAChB,QAAQ,EAAE,QAAQ,CAAC,WAAW,CAAC,CAAC,UAAU,CAAC,CAAC;IAC5C,OAAO,EAAE,QAAQ,GAAG,SAAS,CAAC;IAC9B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,gBAAgB,CAAC,EAAE,MAAM,IAAI,CAAC;CAC/B;AAWD,QAAA,MAAM,aAAa,UAAW,kBAAkB,4CA6C/C,CAAC;AAEF,eAAe,aAAa,CAAC"}
+{"version":3,"file":"NavigationDot.d.ts","sourceRoot":"","sources":["../../src/components/Slider/NavigationDot.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAE5C,UAAU,kBAAkB;IAC1B,MAAM,EAAE,OAAO,CAAC;IAChB,QAAQ,EAAE,QAAQ,CAAC,WAAW,CAAC,CAAC,UAAU,CAAC,CAAC;IAC5C,OAAO,EAAE,QAAQ,GAAG,SAAS,CAAC;IAC9B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,gBAAgB,CAAC,EAAE,MAAM,IAAI,CAAC;CAC/B;AAeD,QAAA,MAAM,aAAa,UAAW,kBAAkB,4CA6C/C,CAAC;AAEF,eAAe,aAAa,CAAC"}

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

@@ -10,10 +10,11 @@ interface SliderPropsBase {
     };
     spaceBetween?: number;
     showPaginationText?: boolean;
+    navigationContainerClassName?: string;
 }
 interface InsideNavigationSliderProps extends SliderPropsBase {
     navigationVariant?: 'inside';
-    navigationButtonsShowType?: 'hide' | 'hover' | 'permanent';
+    navigationButtonsShowType?: 'hide' | 'hover' | 'permanent' | 'onSides';
 }
 interface OutsideNavigationSliderProps extends SliderPropsBase {
     navigationVariant?: 'outside';

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;IAC7B,4BAA4B,CAAC,EAAE,MAAM,CAAC;CACvC;AAED,UAAU,2BAA4B,SAAQ,eAAe;IAC3D,iBAAiB,CAAC,EAAE,QAAQ,CAAC;IAC7B,yBAAyB,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,WAAW,GAAG,SAAS,CAAC;CACxE;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,CAiJ9C,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-BzXDEkqH.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-BhWFQV8r.js';

package/dist/{TextFieldWrapper--hxpmYuz.js → TextFieldWrapper-BkoKcbvs.js}

@@ -43,16 +43,16 @@ const FieldBottomInfo = (props) => {
       "div",
       {
         className: clsx(
-          "flex font-p3-regular",
+          "dgs-ui-kit-flex dgs-ui-kit-font-p3-regular",
           {
-            "justify-between": (errorMessage || hintMessage) && maxLength,
-            "justify-start": (errorMessage || hintMessage) && !maxLength,
-            "justify-end": !(errorMessage || hintMessage) && maxLength
+            "dgs-ui-kit-justify-between": (errorMessage || hintMessage) && maxLength,
+            "dgs-ui-kit-justify-start": (errorMessage || hintMessage) && !maxLength,
+            "dgs-ui-kit-justify-end": !(errorMessage || hintMessage) && maxLength
           },
-          errorMessage ? "text-error-500" : "text-gray-500"
+          errorMessage ? "dgs-ui-kit-text-error-500" : "dgs-ui-kit-text-gray-500"
         ),
         children: [
-          (errorMessage || hintMessage) && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+          (errorMessage || hintMessage) && /* @__PURE__ */ jsxs("div", { className: "dgs-ui-kit-flex dgs-ui-kit-items-center dgs-ui-kit-gap-2", children: [
             /* @__PURE__ */ jsx(
               InfoCircleOutlineIcon,
               {
@@ -80,21 +80,21 @@ const FieldLabel = (props) => {
     return /* @__PURE__ */ jsxs(
       "div",
       {
-        className: clsx("flex mb-2", {
-          "justify-between": labelContent && link?.href,
-          "justify-start": labelContent && !link?.href,
-          "justify-end": !labelContent && link?.href
+        className: clsx("dgs-ui-kit-flex dgs-ui-kit-mb-2", {
+          "dgs-ui-kit-justify-between": labelContent && link?.href,
+          "dgs-ui-kit-justify-start": labelContent && !link?.href,
+          "dgs-ui-kit-justify-end": !labelContent && link?.href
         }),
         children: [
-          labelContent && /* @__PURE__ */ jsxs("label", { className: "px-0 text-sm font-bold text-right md:mx-0", children: [
+          labelContent && /* @__PURE__ */ jsxs("label", { className: "dgs-ui-kit-px-0 dgs-ui-kit-text-sm dgs-ui-kit-font-bold dgs-ui-kit-text-right md:dgs-ui-kit-mx-0", children: [
             labelContent,
-            required && /* @__PURE__ */ jsx("span", { className: "ms-2 text-error-500", children: "*" })
+            required && /* @__PURE__ */ jsx("span", { className: "dgs-ui-kit-ms-2 dgs-ui-kit-text-error-500", children: "*" })
           ] }),
           link?.href && /* @__PURE__ */ jsx(
             "a",
             {
               href: link.href,
-              className: "font-button-small text-primary-400",
+              className: "dgs-ui-kit-font-button-small dgs-ui-kit-text-primary-400",
               children: link.cnotent
             }
           )
@@ -142,12 +142,12 @@ const TextFieldWrapper = (props) => {
       "div",
       {
         className: clsx(
-          "relative cursor-text border border-solid rounded-lg ring-4 flex justify-between gap-x-3 p-3 bg-gray-100 transition-all ring-transparent hover:ring-gray-50 has-[:focus]:bg-white",
-          isError || errorMessage ? "border-error-500 has-[:focus]:ring-error-50" : "border-transparent hover:border-gray-300 has-[:focus]:border-primary-500 has-[:focus]:ring-primary-50",
+          "dgs-ui-kit-relative dgs-ui-kit-cursor-text dgs-ui-kit-border dgs-ui-kit-border-solid dgs-ui-kit-rounded-lg dgs-ui-kit-ring-4 dgs-ui-kit-flex dgs-ui-kit-justify-between dgs-ui-kit-gap-x-3 dgs-ui-kit-p-3 dgs-ui-kit-bg-gray-100 dgs-ui-kit-transition-all dgs-ui-kit-ring-transparent hover:dgs-ui-kit-ring-gray-50 has-[:focus]:dgs-ui-kit-bg-white",
+          isError || errorMessage ? "dgs-ui-kit-border-error-500 has-[:focus]:dgs-ui-kit-ring-error-50" : "dgs-ui-kit-border-transparent hover:dgs-ui-kit-border-gray-300 has-[:focus]:dgs-ui-kit-border-primary-500 has-[:focus]:dgs-ui-kit-ring-primary-50",
           containerClassName
         ),
         children: [
-          rightIcon && /* @__PURE__ */ jsx("div", { className: "text-gray-600", children: rightIcon }),
+          rightIcon && /* @__PURE__ */ jsx("div", { className: "dgs-ui-kit-text-gray-600", children: rightIcon }),
           children({ handleChangeField, setValue, value })
         ]
       }

package/dist/{TextFieldWrapper-DaoZxs1E.cjs → TextFieldWrapper-D-DH5_DG.cjs}

@@ -45,16 +45,16 @@ const FieldBottomInfo = (props) => {
       "div",
       {
         className: clsx.clsx(
-          "flex font-p3-regular",
+          "dgs-ui-kit-flex dgs-ui-kit-font-p3-regular",
           {
-            "justify-between": (errorMessage || hintMessage) && maxLength,
-            "justify-start": (errorMessage || hintMessage) && !maxLength,
-            "justify-end": !(errorMessage || hintMessage) && maxLength
+            "dgs-ui-kit-justify-between": (errorMessage || hintMessage) && maxLength,
+            "dgs-ui-kit-justify-start": (errorMessage || hintMessage) && !maxLength,
+            "dgs-ui-kit-justify-end": !(errorMessage || hintMessage) && maxLength
           },
-          errorMessage ? "text-error-500" : "text-gray-500"
+          errorMessage ? "dgs-ui-kit-text-error-500" : "dgs-ui-kit-text-gray-500"
         ),
         children: [
-          (errorMessage || hintMessage) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+          (errorMessage || hintMessage) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "dgs-ui-kit-flex dgs-ui-kit-items-center dgs-ui-kit-gap-2", children: [
             /* @__PURE__ */ jsxRuntime.jsx(
               InfoCircleOutlineIcon,
               {
@@ -82,21 +82,21 @@ const FieldLabel = (props) => {
     return /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {
-        className: clsx.clsx("flex mb-2", {
-          "justify-between": labelContent && link?.href,
-          "justify-start": labelContent && !link?.href,
-          "justify-end": !labelContent && link?.href
+        className: clsx.clsx("dgs-ui-kit-flex dgs-ui-kit-mb-2", {
+          "dgs-ui-kit-justify-between": labelContent && link?.href,
+          "dgs-ui-kit-justify-start": labelContent && !link?.href,
+          "dgs-ui-kit-justify-end": !labelContent && link?.href
         }),
         children: [
-          labelContent && /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "px-0 text-sm font-bold text-right md:mx-0", children: [
+          labelContent && /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "dgs-ui-kit-px-0 dgs-ui-kit-text-sm dgs-ui-kit-font-bold dgs-ui-kit-text-right md:dgs-ui-kit-mx-0", children: [
             labelContent,
-            required && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ms-2 text-error-500", children: "*" })
+            required && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "dgs-ui-kit-ms-2 dgs-ui-kit-text-error-500", children: "*" })
           ] }),
           link?.href && /* @__PURE__ */ jsxRuntime.jsx(
             "a",
             {
               href: link.href,
-              className: "font-button-small text-primary-400",
+              className: "dgs-ui-kit-font-button-small dgs-ui-kit-text-primary-400",
               children: link.cnotent
             }
           )
@@ -144,12 +144,12 @@ const TextFieldWrapper = (props) => {
       "div",
       {
         className: clsx.clsx(
-          "relative cursor-text border border-solid rounded-lg ring-4 flex justify-between gap-x-3 p-3 bg-gray-100 transition-all ring-transparent hover:ring-gray-50 has-[:focus]:bg-white",
-          isError || errorMessage ? "border-error-500 has-[:focus]:ring-error-50" : "border-transparent hover:border-gray-300 has-[:focus]:border-primary-500 has-[:focus]:ring-primary-50",
+          "dgs-ui-kit-relative dgs-ui-kit-cursor-text dgs-ui-kit-border dgs-ui-kit-border-solid dgs-ui-kit-rounded-lg dgs-ui-kit-ring-4 dgs-ui-kit-flex dgs-ui-kit-justify-between dgs-ui-kit-gap-x-3 dgs-ui-kit-p-3 dgs-ui-kit-bg-gray-100 dgs-ui-kit-transition-all dgs-ui-kit-ring-transparent hover:dgs-ui-kit-ring-gray-50 has-[:focus]:dgs-ui-kit-bg-white",
+          isError || errorMessage ? "dgs-ui-kit-border-error-500 has-[:focus]:dgs-ui-kit-ring-error-50" : "dgs-ui-kit-border-transparent hover:dgs-ui-kit-border-gray-300 has-[:focus]:dgs-ui-kit-border-primary-500 has-[:focus]:dgs-ui-kit-ring-primary-50",
           containerClassName
         ),
         children: [
-          rightIcon && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-gray-600", children: rightIcon }),
+          rightIcon && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "dgs-ui-kit-text-gray-600", children: rightIcon }),
           children({ handleChangeField, setValue, value })
         ]
       }