@dgshahr/ui-kit 0.0.5 → 0.0.7

package/dist/Slide-BDD1_RXD.js

@@ -1,215 +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),
-      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

@@ -1,218 +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),
-      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/TextFieldWrapper--hxpmYuz.js

@@ -1,167 +0,0 @@
-import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import { c as clsx } from './clsx-ChV9xqsO.js';
-import { useState, useEffect } from 'react';
-import './assets/styles.css';/* empty css                */
-
-const InfoCircleOutlineIcon = (props) => /* @__PURE__ */ jsxs(
-  "svg",
-  {
-    xmlns: "http://www.w3.org/2000/svg",
-    width: "1em",
-    height: "1em",
-    fill: "none",
-    viewBox: "0 0 24 24",
-    ...props,
-    children: [
-      /* @__PURE__ */ jsx(
-        "path",
-        {
-          fill: "currentColor",
-          fillRule: "evenodd",
-          d: "M12.25 3.75a8.25 8.25 0 1 0 0 16.5 8.25 8.25 0 0 0 0-16.5M2.5 12a9.75 9.75 0 0 1 9.75-9.75A9.75 9.75 0 0 1 22 12c0 5.384-4.365 9.75-9.75 9.75S2.5 17.384 2.5 12",
-          clipRule: "evenodd"
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        "path",
-        {
-          fill: "currentColor",
-          fillRule: "evenodd",
-          d: "M12.25 7.541a.75.75 0 0 1 .75.75v.063a.75.75 0 0 1-1.5 0v-.063a.75.75 0 0 1 .75-.75m.006 3.103a.75.75 0 0 1 .75.75v4.3a.75.75 0 0 1-1.5 0v-4.3a.75.75 0 0 1 .75-.75",
-          clipRule: "evenodd"
-        }
-      )
-    ]
-  }
-);
-
-const FieldBottomInfo = (props) => {
-  const { errorMessage, hintMessage, maxLength, value } = props;
-  const showInfo = Boolean(errorMessage || hintMessage || maxLength);
-  if (showInfo)
-    return /* @__PURE__ */ jsxs(
-      "div",
-      {
-        className: clsx(
-          "flex font-p3-regular",
-          {
-            "justify-between": (errorMessage || hintMessage) && maxLength,
-            "justify-start": (errorMessage || hintMessage) && !maxLength,
-            "justify-end": !(errorMessage || hintMessage) && maxLength
-          },
-          errorMessage ? "text-error-500" : "text-gray-500"
-        ),
-        children: [
-          (errorMessage || hintMessage) && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-            /* @__PURE__ */ jsx(
-              InfoCircleOutlineIcon,
-              {
-                width: 16,
-                height: 16
-              }
-            ),
-            /* @__PURE__ */ jsx("span", { children: errorMessage || hintMessage })
-          ] }),
-          maxLength && /* @__PURE__ */ jsxs("span", { className: "ss02", children: [
-            value?.length ?? 0,
-            "/",
-            maxLength
-          ] })
-        ]
-      }
-    );
-  return null;
-};
-
-const FieldLabel = (props) => {
-  const { link, labelContent, required } = props;
-  const showLabel = Boolean(labelContent || link?.href);
-  if (showLabel)
-    return /* @__PURE__ */ jsxs(
-      "div",
-      {
-        className: clsx("flex mb-2", {
-          "justify-between": labelContent && link?.href,
-          "justify-start": labelContent && !link?.href,
-          "justify-end": !labelContent && link?.href
-        }),
-        children: [
-          labelContent && /* @__PURE__ */ jsxs("label", { className: "px-0 text-sm font-bold text-right md:mx-0", children: [
-            labelContent,
-            required && /* @__PURE__ */ jsx("span", { className: "ms-2 text-error-500", children: "*" })
-          ] }),
-          link?.href && /* @__PURE__ */ jsx(
-            "a",
-            {
-              href: link.href,
-              className: "font-button-small text-primary-400",
-              children: link.cnotent
-            }
-          )
-        ]
-      }
-    );
-  return null;
-};
-
-const TextFieldWrapper = (props) => {
-  const {
-    labelContent,
-    link,
-    containerClassName,
-    rightIcon,
-    isError,
-    errorMessage,
-    hintMessage,
-    required,
-    maxLength,
-    value: initialValue,
-    onChange,
-    children
-  } = props;
-  const [value, setValue] = useState(initialValue?.toString());
-  useEffect(() => {
-    setValue(initialValue?.toString());
-  }, [initialValue]);
-  const handleChangeField = (e) => {
-    setValue(e.currentTarget.value);
-    if (onChange) {
-      onChange(e);
-    }
-  };
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(
-      FieldLabel,
-      {
-        labelContent,
-        link,
-        required
-      }
-    ),
-    /* @__PURE__ */ jsxs(
-      "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",
-          containerClassName
-        ),
-        children: [
-          rightIcon && /* @__PURE__ */ jsx("div", { className: "text-gray-600", children: rightIcon }),
-          children({ handleChangeField, setValue, value })
-        ]
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      FieldBottomInfo,
-      {
-        errorMessage,
-        hintMessage,
-        maxLength,
-        value
-      }
-    )
-  ] });
-};
-
-export { TextFieldWrapper as T };