@dgshahr/ui-kit 1.4.0 → 1.5.1

package/dist/Slide-Cg1SjpFn.js

@@ -0,0 +1,339 @@
+"use client";
+import { jsx as r, jsxs as w, Fragment as j } from "react/jsx-runtime";
+import { c as k } from "./clsx-OuTLNxxd.js";
+import { createContext as $, useContext as H, useState as x, useEffect as C, forwardRef as K, useRef as O, useImperativeHandle as _, useId as z } from "react";
+import { I as X } from "./IconArrowLeft2-cxcPyDqS.js";
+import { I as q } from "./IconArrowRight2-BoXg0Gkw.js";
+import M from "./Button/index.mjs";
+const R = $({
+  slidesPerView: 1,
+  spaceBetween: 0,
+  navigationVariant: "outside",
+  showNavigationDots: !0,
+  showPaginationText: !1,
+  childrenCount: 0,
+  sliderId: ""
+}), W = () => H(R);
+function G({
+  active: e,
+  autoplay: i,
+  variant: n = "outside"
+}) {
+  return [
+    {
+      inside: "dgsuikit:bg-gray-500/50 dgsuikit:hover:bg-gray-500/80",
+      outside: "dgsuikit:bg-gray-200 dgsuikit:hover:bg-gray-300"
+    }[n],
+    e ? "dgsuikit:w-[22px]" : "dgsuikit:w-[6px]",
+    i ? "dgsuikit:p-[1px]" : ""
+  ];
+}
+const J = (e) => {
+  const { active: i, onClick: n, onNavigateToNext: a, index: t } = e, { autoplay: d, navigationVariant: m = "outside" } = W(), [l, u] = x(0);
+  return C(() => {
+    if (!i || !d) return;
+    const f = typeof d == "boolean" ? 7e3 : d?.delay ?? 7e3;
+    let v = Date.now();
+    const o = setInterval(() => {
+      const c = Date.now() - v, g = c / f * 100;
+      u(Math.min(g, 100)), c >= f && typeof a == "function" && (a(), u(0), clearInterval(o));
+    }, 100);
+    return function() {
+      return u(0), v = Date.now(), clearInterval(o);
+    };
+  }, [i, d, a]), /* @__PURE__ */ r(
+    "button",
+    {
+      className: k(
+        "dgsuikit:rounded-full dgsuikit:overflow-hidden dgsuikit:transition-all dgsuikit:h-[6px]",
+        G({ active: i, autoplay: d, variant: m })
+      ),
+      onClick: n,
+      "aria-label": `slider-navigation-dot-${t + 1}`,
+      children: i && /* @__PURE__ */ r(
+        "div",
+        {
+          className: k("dgsuikit:h-full dgsuikit:rounded-full", {
+            "dgsuikit:bg-white": m === "inside",
+            "dgsuikit:bg-gray-700": m === "outside"
+          }),
+          style: { width: d ? `${l}%` : "100%" }
+        }
+      )
+    }
+  );
+}, B = "dgsuikit:opacity-0 dgsuikit:group-hover:opacity-100 dgsuikit:transition-opacity", Q = (e) => {
+  const { onNavigate: i, slideIndex: n, slidesCount: a } = e, {
+    navigationButtonsShowType: t = "hide",
+    dotsClassName: d,
+    navigationContainerClassName: m,
+    navigationVariant: l = "outside",
+    showNavigationDots: u = !0,
+    showPaginationText: f
+  } = W(), v = () => {
+    const o = k(
+      "dgsuikit:!absolute dgsuikit:top-1/2 dgsuikit:-translate-y-1/2",
+      B
+    );
+    return /* @__PURE__ */ w(j, { children: [
+      /* @__PURE__ */ r(
+        M,
+        {
+          type: "button",
+          variant: "secondary",
+          onClick: () => i(n - 1),
+          rightIcon: /* @__PURE__ */ r(q, {}),
+          "aria-label": "slider-previous-button",
+          className: t === "onSides" ? k(o, "dgsuikit:right-[5.5%]") : void 0
+        }
+      ),
+      /* @__PURE__ */ r(
+        M,
+        {
+          type: "button",
+          variant: "secondary",
+          onClick: () => i(n + 1),
+          rightIcon: /* @__PURE__ */ r(X, {}),
+          "aria-label": "slider-next-button",
+          className: t === "onSides" ? k(o, "dgsuikit:left-[5.5%]") : void 0
+        }
+      )
+    ] });
+  };
+  return /* @__PURE__ */ w(j, { children: [
+    t && t !== "hide" && t === "onSides" && v,
+    /* @__PURE__ */ w(
+      "div",
+      {
+        className: k(
+          "dgsuikit:flex",
+          {
+            "dgsuikit:items-center dgsuikit:mt-2": l === "outside",
+            "dgsuikit:absolute dgsuikit:bottom-4 dgsuikit:w-full dgsuikit:justify-center": l === "inside",
+            "dgsuikit:justify-between": l === "outside" && t !== "hide" && t !== "onSides",
+            "dgsuikit:justify-center": l === "outside" && (t === "hide" || t === "onSides")
+          },
+          m
+        ),
+        children: [
+          t && t !== "hide" && t !== "onSides" && /* @__PURE__ */ r(
+            "div",
+            {
+              className: k(
+                "dgsuikit:flex dgsuikit:gap-2",
+                t === "hover" && B,
+                l === "inside" && "dgsuikit:absolute dgsuikit:bottom-0 dgsuikit:left-[5.5%]"
+              ),
+              children: v()
+            }
+          ),
+          (u || f) && /* @__PURE__ */ w("div", { className: "dgsuikit:flex dgsuikit:items-center dgsuikit:gap-3", children: [
+            f && /* @__PURE__ */ w("div", { className: "dgsuikit:flex dgsuikit:items-center dgsuikit:gap-1 dgsuikit:font-caption-regular dgsuikit:text-gray-400 dgsuikit:ss02", children: [
+              /* @__PURE__ */ r(
+                "span",
+                {
+                  className: k("dgsuikit:font-bold", {
+                    "dgsuikit:text-gray-600": l === "outside",
+                    "dgsuikit:text-white": l === "inside"
+                  }),
+                  children: n + 1
+                }
+              ),
+              /* @__PURE__ */ r("span", { children: "از" }),
+              /* @__PURE__ */ r("span", { children: a })
+            ] }),
+            u && /* @__PURE__ */ r(
+              "div",
+              {
+                className: k(
+                  "dgsuikit:flex dgsuikit:items-center dgsuikit:justify-center dgsuikit:gap-2",
+                  d
+                ),
+                children: Array.from(Array(a).keys()).map((o, c) => /* @__PURE__ */ r(
+                  J,
+                  {
+                    active: n === c,
+                    index: c,
+                    onClick: () => i(c),
+                    onNavigateToNext: () => i(n + 1)
+                  },
+                  o + a
+                ))
+              }
+            )
+          ] })
+        ]
+      }
+    )
+  ] });
+}, U = K((e, i) => {
+  const [n, a] = x(e), {
+    className: t = "",
+    containerClassName: d = "",
+    showNavigationDots: m = !0,
+    slidesPerView: l = 1,
+    navigationButtonsShowType: u = "hide",
+    spaceBetween: f = 0,
+    showPaginationText: v,
+    onSlideIndexChange: o,
+    initialSlide: c,
+    containerXPadding: g = 0
+  } = n, [S, I] = x(0), [A, D] = x(0), E = Object.fromEntries(
+    Object.entries(n).filter(([s]) => s !== "children")
+  ), h = O(null), p = Math.ceil(A / Math.floor(l)), V = (m || u && u !== "hide" || v) && p > 1;
+  function F(s) {
+    if (Math.ceil(Math.abs(s.currentTarget.scrollLeft)) + s.currentTarget.clientWidth + 1 + g >= s.currentTarget.scrollWidth) {
+      I(p - 1);
+      return;
+    }
+    const N = s.currentTarget.scrollWidth - g * 2, b = N / p, y = (N - s.currentTarget.scrollLeft - g) / b;
+    if (y <= p) {
+      I(0);
+      return;
+    }
+    I(Math.round(y % p));
+  }
+  function P(s) {
+    if (!h.current) return;
+    const N = h.current.offsetWidth, b = S - s, y = h.current.scrollWidth / p, L = b * y;
+    s < 0 ? h.current.scrollTo({ behavior: "smooth", left: -(N * p) }) : s >= p ? h.current.scrollTo({ behavior: "smooth", left: 0 }) : h.current.scrollBy({ behavior: "smooth", left: L });
+  }
+  function T() {
+    const N = Object.keys(e.responsive).sort(
+      (y, L) => Number(y) - Number(L)
+    ).findLast(
+      (y) => Number(y) <= window.innerWidth
+    ), b = N ? e.responsive[Number(N)] : null;
+    a(b ? { ...n, ...b } : e);
+  }
+  return _(i, () => ({
+    element: h.current,
+    navigate: (s) => P(Math.max(0, s - 1))
+  })), C(() => {
+    if (!h.current) return;
+    let s = h.current.childElementCount;
+    g > 0 && (s -= 2), D(s);
+  }, [e.children, h, g]), C(() => {
+    if (!(!e.responsive || Object.keys(e.responsive).length <= 0))
+      return T(), window.addEventListener("resize", T), () => {
+        window.removeEventListener("resize", T);
+      };
+  }, [e.responsive]), C(() => {
+    o && typeof o == "function" && o(S);
+  }, [S]), C(() => {
+    typeof c == "number" && h.current && P(Math.max(0, c - 1));
+  }, [c, h.current]), /* @__PURE__ */ r(R.Provider, { value: { ...E, childrenCount: A, sliderId: z() }, children: /* @__PURE__ */ w(
+    "div",
+    {
+      className: k("dgsuikit:overflow-hidden dgsuikit:relative dgsuikit:group", t),
+      style: { direction: "rtl" },
+      children: [
+        /* @__PURE__ */ w(
+          "div",
+          {
+            className: k(
+              "dgsuikit:flex dgsuikit:snap-x dgsuikit:snap-mandatory dgsuikit:overflow-x-auto dgsuikit:no-scrollbar",
+              d
+            ),
+            style: { marginLeft: -f },
+            onScroll: F,
+            ref: h,
+            children: [
+              g > 0 && /* @__PURE__ */ r(
+                "div",
+                {
+                  className: "dgsuikit:shrink-0",
+                  style: {
+                    width: g,
+                    paddingLeft: f
+                  }
+                }
+              ),
+              e.children,
+              g > 0 && /* @__PURE__ */ r(
+                "div",
+                {
+                  className: "dgsuikit:shrink-0",
+                  style: {
+                    width: g,
+                    paddingLeft: f
+                  }
+                }
+              )
+            ]
+          }
+        ),
+        V && /* @__PURE__ */ r(
+          Q,
+          {
+            onNavigate: P,
+            slideIndex: S,
+            slidesCount: p
+          }
+        )
+      ]
+    }
+  ) });
+});
+U.displayName = "Slider";
+function Y({
+  slidesPerView: e,
+  childIndex: i,
+  centerMode: n,
+  childrenCount: a,
+  haveContainerPadding: t
+}) {
+  const d = i % Math.floor(e) === 0, m = e % 1 !== 0, l = i === 0, u = i === a - 1;
+  if (!d) return "none";
+  if (n) {
+    if (m && !t) {
+      if (l) return "start";
+      if (u) return "end";
+    }
+    return "center";
+  }
+  return "start";
+}
+const rt = (e) => {
+  const { children: i, className: n, style: a, ...t } = e, {
+    slidesPerView: d = 1,
+    spaceBetween: m = 0,
+    centerMode: l = !1,
+    containerXPadding: u = 0,
+    childrenCount: f = 0,
+    sliderId: v
+  } = W(), o = O(null), [c, g] = x(0);
+  return C(() => {
+    o.current && g(
+      Array.prototype.indexOf.call(
+        document.querySelectorAll(`[id='slide-item-${v}']`),
+        o.current
+      )
+    );
+  }, [o, f, u]), /* @__PURE__ */ r(
+    "div",
+    {
+      ...t,
+      ref: o,
+      id: `slide-item-${v}`,
+      className: k("dgsuikit:shrink-0 dgsuikit:snap-normal", n),
+      style: {
+        width: 100 / (d ?? 1) + "%",
+        paddingLeft: m,
+        scrollSnapAlign: Y({
+          slidesPerView: d,
+          childIndex: c,
+          centerMode: l,
+          childrenCount: f || 0,
+          haveContainerPadding: u > 0
+        }),
+        ...a
+      },
+      children: i
+    }
+  );
+};
+export {
+  U as S,
+  rt as a
+};

package/dist/Slide-YnGNNNXw.cjs

@@ -0,0 +1 @@
+"use client";"use strict";const t=require("react/jsx-runtime"),v=require("./clsx-C11secjj.cjs"),n=require("react"),D=require("./IconArrowLeft2-CNA3H0xY.cjs"),q=require("./IconArrowRight2-CF_bdH81.cjs"),A=require("./Button/index.cjs"),R=n.createContext({slidesPerView:1,spaceBetween:0,navigationVariant:"outside",showNavigationDots:!0,showPaginationText:!1,childrenCount:0,sliderId:""}),P=()=>n.useContext(R);function F({active:i,autoplay:s,variant:r="outside"}){return[{inside:"dgsuikit:bg-gray-500/50 dgsuikit:hover:bg-gray-500/80",outside:"dgsuikit:bg-gray-200 dgsuikit:hover:bg-gray-300"}[r],i?"dgsuikit:w-[22px]":"dgsuikit:w-[6px]",s?"dgsuikit:p-[1px]":""]}const V=i=>{const{active:s,onClick:r,onNavigateToNext:d,index:e}=i,{autoplay:l,navigationVariant:x="outside"}=P(),[u,c]=n.useState(0);return n.useEffect(()=>{if(!s||!l)return;const k=typeof l=="boolean"?7e3:l?.delay??7e3;let m=Date.now();const a=setInterval(()=>{const g=Date.now()-m,h=g/k*100;c(Math.min(h,100)),g>=k&&typeof d=="function"&&(d(),c(0),clearInterval(a))},100);return function(){return c(0),m=Date.now(),clearInterval(a)}},[s,l,d]),t.jsx("button",{className:v.clsx("dgsuikit:rounded-full dgsuikit:overflow-hidden dgsuikit:transition-all dgsuikit:h-[6px]",F({active:s,autoplay:l,variant:x})),onClick:r,"aria-label":`slider-navigation-dot-${e+1}`,children:s&&t.jsx("div",{className:v.clsx("dgsuikit:h-full dgsuikit:rounded-full",{"dgsuikit:bg-white":x==="inside","dgsuikit:bg-gray-700":x==="outside"}),style:{width:l?`${u}%`:"100%"}})})},L="dgsuikit:opacity-0 dgsuikit:group-hover:opacity-100 dgsuikit:transition-opacity",$=i=>{const{onNavigate:s,slideIndex:r,slidesCount:d}=i,{navigationButtonsShowType:e="hide",dotsClassName:l,navigationContainerClassName:x,navigationVariant:u="outside",showNavigationDots:c=!0,showPaginationText:k}=P(),m=()=>{const a=v.clsx("dgsuikit:!absolute dgsuikit:top-1/2 dgsuikit:-translate-y-1/2",L);return t.jsxs(t.Fragment,{children:[t.jsx(A,{type:"button",variant:"secondary",onClick:()=>s(r-1),rightIcon:t.jsx(q.IconArrowRight2,{}),"aria-label":"slider-previous-button",className:e==="onSides"?v.clsx(a,"dgsuikit:right-[5.5%]"):void 0}),t.jsx(A,{type:"button",variant:"secondary",onClick:()=>s(r+1),rightIcon:t.jsx(D.IconArrowLeft2,{}),"aria-label":"slider-next-button",className:e==="onSides"?v.clsx(a,"dgsuikit:left-[5.5%]"):void 0})]})};return t.jsxs(t.Fragment,{children:[e&&e!=="hide"&&e==="onSides"&&m,t.jsxs("div",{className:v.clsx("dgsuikit:flex",{"dgsuikit:items-center dgsuikit:mt-2":u==="outside","dgsuikit:absolute dgsuikit:bottom-4 dgsuikit:w-full dgsuikit:justify-center":u==="inside","dgsuikit:justify-between":u==="outside"&&e!=="hide"&&e!=="onSides","dgsuikit:justify-center":u==="outside"&&(e==="hide"||e==="onSides")},x),children:[e&&e!=="hide"&&e!=="onSides"&&t.jsx("div",{className:v.clsx("dgsuikit:flex dgsuikit:gap-2",e==="hover"&&L,u==="inside"&&"dgsuikit:absolute dgsuikit:bottom-0 dgsuikit:left-[5.5%]"),children:m()}),(c||k)&&t.jsxs("div",{className:"dgsuikit:flex dgsuikit:items-center dgsuikit:gap-3",children:[k&&t.jsxs("div",{className:"dgsuikit:flex dgsuikit:items-center dgsuikit:gap-1 dgsuikit:font-caption-regular dgsuikit:text-gray-400 dgsuikit:ss02",children:[t.jsx("span",{className:v.clsx("dgsuikit:font-bold",{"dgsuikit:text-gray-600":u==="outside","dgsuikit:text-white":u==="inside"}),children:r+1}),t.jsx("span",{children:"از"}),t.jsx("span",{children:d})]}),c&&t.jsx("div",{className:v.clsx("dgsuikit:flex dgsuikit:items-center dgsuikit:justify-center dgsuikit:gap-2",l),children:Array.from(Array(d).keys()).map((a,g)=>t.jsx(V,{active:r===g,index:g,onClick:()=>s(g),onNavigateToNext:()=>s(r+1)},a+d))})]})]})]})},W=n.forwardRef((i,s)=>{const[r,d]=n.useState(i),{className:e="",containerClassName:l="",showNavigationDots:x=!0,slidesPerView:u=1,navigationButtonsShowType:c="hide",spaceBetween:k=0,showPaginationText:m,onSlideIndexChange:a,initialSlide:g,containerXPadding:h=0}=r,[b,C]=n.useState(0),[T,E]=n.useState(0),M=Object.fromEntries(Object.entries(r).filter(([o])=>o!=="children")),f=n.useRef(null),p=Math.ceil(T/Math.floor(u)),B=(x||c&&c!=="hide"||m)&&p>1;function O(o){if(Math.ceil(Math.abs(o.currentTarget.scrollLeft))+o.currentTarget.clientWidth+1+h>=o.currentTarget.scrollWidth){C(p-1);return}const w=o.currentTarget.scrollWidth-h*2,N=w/p,y=(w-o.currentTarget.scrollLeft-h)/N;if(y<=p){C(0);return}C(Math.round(y%p))}function S(o){if(!f.current)return;const w=f.current.offsetWidth,N=b-o,y=f.current.scrollWidth/p,I=N*y;o<0?f.current.scrollTo({behavior:"smooth",left:-(w*p)}):o>=p?f.current.scrollTo({behavior:"smooth",left:0}):f.current.scrollBy({behavior:"smooth",left:I})}function j(){const w=Object.keys(i.responsive).sort((y,I)=>Number(y)-Number(I)).findLast(y=>Number(y)<=window.innerWidth),N=w?i.responsive[Number(w)]:null;d(N?{...r,...N}:i)}return n.useImperativeHandle(s,()=>({element:f.current,navigate:o=>S(Math.max(0,o-1))})),n.useEffect(()=>{if(!f.current)return;let o=f.current.childElementCount;h>0&&(o-=2),E(o)},[i.children,f,h]),n.useEffect(()=>{if(!(!i.responsive||Object.keys(i.responsive).length<=0))return j(),window.addEventListener("resize",j),()=>{window.removeEventListener("resize",j)}},[i.responsive]),n.useEffect(()=>{a&&typeof a=="function"&&a(b)},[b]),n.useEffect(()=>{typeof g=="number"&&f.current&&S(Math.max(0,g-1))},[g,f.current]),t.jsx(R.Provider,{value:{...M,childrenCount:T,sliderId:n.useId()},children:t.jsxs("div",{className:v.clsx("dgsuikit:overflow-hidden dgsuikit:relative dgsuikit:group",e),style:{direction:"rtl"},children:[t.jsxs("div",{className:v.clsx("dgsuikit:flex dgsuikit:snap-x dgsuikit:snap-mandatory dgsuikit:overflow-x-auto dgsuikit:no-scrollbar",l),style:{marginLeft:-k},onScroll:O,ref:f,children:[h>0&&t.jsx("div",{className:"dgsuikit:shrink-0",style:{width:h,paddingLeft:k}}),i.children,h>0&&t.jsx("div",{className:"dgsuikit:shrink-0",style:{width:h,paddingLeft:k}})]}),B&&t.jsx($,{onNavigate:S,slideIndex:b,slidesCount:p})]})})});W.displayName="Slider";function H({slidesPerView:i,childIndex:s,centerMode:r,childrenCount:d,haveContainerPadding:e}){const l=s%Math.floor(i)===0,x=i%1!==0,u=s===0,c=s===d-1;if(!l)return"none";if(r){if(x&&!e){if(u)return"start";if(c)return"end"}return"center"}return"start"}const K=i=>{const{children:s,className:r,style:d,...e}=i,{slidesPerView:l=1,spaceBetween:x=0,centerMode:u=!1,containerXPadding:c=0,childrenCount:k=0,sliderId:m}=P(),a=n.useRef(null),[g,h]=n.useState(0);return n.useEffect(()=>{a.current&&h(Array.prototype.indexOf.call(document.querySelectorAll(`[id='slide-item-${m}']`),a.current))},[a,k,c]),t.jsx("div",{...e,ref:a,id:`slide-item-${m}`,className:v.clsx("dgsuikit:shrink-0 dgsuikit:snap-normal",r),style:{width:100/(l??1)+"%",paddingLeft:x,scrollSnapAlign:H({slidesPerView:l,childIndex:g,centerMode:u,childrenCount:k||0,haveContainerPadding:c>0}),...d},children:s})};exports.Slide=K;exports.Slider=W;

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

@@ -1 +1 @@
-{"version":3,"file":"Navigation.d.ts","sourceRoot":"","sources":["../../src/components/Slider/Navigation.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAOhC,UAAU,eAAe;IACvB,UAAU,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,EAAE,MAAM,CAAC;CACrB;AAED,QAAA,MAAM,UAAU,EAAE,EAAE,CAAC,eAAe,CA2GnC,CAAC;AAEF,eAAe,UAAU,CAAC"}
+{"version":3,"file":"Navigation.d.ts","sourceRoot":"","sources":["../../src/components/Slider/Navigation.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAOhC,UAAU,eAAe;IACvB,UAAU,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,EAAE,MAAM,CAAC;CACrB;AAKD,QAAA,MAAM,UAAU,EAAE,EAAE,CAAC,eAAe,CA4HnC,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/dist/Slider/index.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../assets/styles.css');;/* empty css                   */const e=require("../Slide-CdFHPwvj.cjs");exports.Slide=e.Slide;exports.Slider=e.Slider;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../assets/styles.css');;/* empty css                   */const e=require("../Slide-YnGNNNXw.cjs");exports.Slide=e.Slide;exports.Slider=e.Slider;

package/dist/Slider/index.mjs

@@ -1,5 +1,5 @@
 import '../assets/styles.css';/* empty css                 */
-import { a as i, S as o } from "../Slide-CyQuarjr.js";
+import { a as i, S as o } from "../Slide-Cg1SjpFn.js";
 export {
   i as Slide,
   o as Slider