@mdigital_ui/ui 0.2.5 → 0.2.6

package/dist/chunk-3QKPSJTV.js

@@ -0,0 +1,120 @@
+import { cn } from './chunk-2OGZENFC.js';
+import React, { useRef, useState, useEffect } from 'react';
+import { Pagination } from 'swiper/modules';
+import { Swiper } from 'swiper/react';
+import { ChevronRight, ChevronLeft } from 'lucide-react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+function CarouselNavigation({ type, swiper }) {
+  const [slideConfig, setSlideConfig] = useState({
+    isBeginning: true,
+    isEnd: false
+  });
+  useEffect(() => {
+    if (!swiper) return;
+    const updateSlideState = () => {
+      setSlideConfig({ isBeginning: swiper.isBeginning, isEnd: swiper.isEnd });
+    };
+    swiper.on("slideChange", updateSlideState);
+    return () => {
+      swiper.off("slideChange", updateSlideState);
+    };
+  }, [swiper]);
+  if (!swiper) return null;
+  if (slideConfig.isBeginning && type === "prev") return null;
+  if (slideConfig.isEnd && type === "next") return null;
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      onClick: (e) => {
+        e.stopPropagation();
+        if (type === "next") {
+          swiper?.slideNext();
+        } else {
+          swiper?.slidePrev();
+        }
+      },
+      className: "flex items-center justify-center w-9 h-9 rounded-full border border-gray-300 bg-white shadow-sm hover:bg-gray-100 transition cursor-pointer",
+      children: type === "next" ? /* @__PURE__ */ jsx(ChevronRight, { size: 18 }) : /* @__PURE__ */ jsx(ChevronLeft, { size: 18 })
+    }
+  );
+}
+var cssWarningShown = false;
+var warnMissingCSS = () => {
+  if (typeof window === "undefined" || cssWarningShown) return;
+  const hasStyles = Array.from(document.styleSheets).some((sheet) => {
+    try {
+      return Array.from(sheet.cssRules || []).some(
+        (rule) => rule.cssText?.includes(".swiper")
+      );
+    } catch {
+      return false;
+    }
+  });
+  if (!hasStyles) {
+    cssWarningShown = true;
+    console.warn(
+      "[@mdigital_ui/ui] Carousel requires Swiper CSS. Add to your CSS:\n@import 'swiper/css';\n\nOr import in your entry file:\nimport 'swiper/css';"
+    );
+  }
+};
+var pagination = {
+  clickable: true,
+  horizontalClass: "pagination",
+  bulletActiveClass: "bg-text-primary",
+  bulletClass: "inline-flex w-2.5 h-2.5 mx-1 rounded-full bg-border opacity-70 transition-all duration-300 cursor-pointer hover:opacity-100"
+};
+var Carousel = React.memo(
+  ({
+    withArrows = false,
+    withPagination = false,
+    children,
+    loop = false,
+    className,
+    modules,
+    ...props
+  }) => {
+    const swiperRef = useRef(null);
+    const [, setRenderTrigger] = useState(0);
+    useEffect(() => {
+      warnMissingCSS();
+    }, []);
+    return /* @__PURE__ */ jsxs("div", { className: "relative h-full group", children: [
+      withArrows && /* @__PURE__ */ jsx("div", { className: "absolute -translate-y-1/2 top-1/2 left-0 flex px-1 z-10 opacity-0 group-hover:opacity-100 transition-opacity duration-200", children: /* @__PURE__ */ jsx(
+        CarouselNavigation,
+        {
+          type: "prev",
+          swiper: swiperRef.current
+        }
+      ) }),
+      /* @__PURE__ */ jsx(
+        Swiper,
+        {
+          loop,
+          ...props,
+          modules: [Pagination, ...modules || []],
+          pagination: withPagination ? pagination : false,
+          className: cn("relative", className),
+          onBeforeInit: (swiper) => {
+            swiperRef.current = swiper;
+            setRenderTrigger((x) => x + 1);
+          },
+          children
+        }
+      ),
+      withArrows && /* @__PURE__ */ jsx("div", { className: "absolute -translate-y-1/2 top-1/2 right-0 flex px-1 z-10 opacity-0 group-hover:opacity-100 transition-opacity duration-200", children: /* @__PURE__ */ jsx(
+        CarouselNavigation,
+        {
+          type: "next",
+          swiper: swiperRef.current
+        }
+      ) })
+    ] });
+  }
+);
+Carousel.displayName = "Carousel";
+var carousel_default = Carousel;
+
+export { carousel_default };
+//# sourceMappingURL=chunk-3QKPSJTV.js.map
+//# sourceMappingURL=chunk-3QKPSJTV.js.map

package/dist/chunk-3QKPSJTV.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/carousel/carousel-navigation.tsx","../src/carousel/index.tsx"],"names":["useState","useEffect","jsx"],"mappings":"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","file":"chunk-3QKPSJTV.js","sourcesContent":["'use client'\n\nimport { ChevronLeft, ChevronRight } from 'lucide-react'\nimport { Swiper as SwiperType } from 'swiper/types'\nimport { useEffect, useState } from 'react'\n\ninterface CarouselNavigationProps {\n  type: 'next' | 'prev'\n  swiper: SwiperType | null\n}\n\nexport function CarouselNavigation({ type, swiper }: CarouselNavigationProps) {\n  const [slideConfig, setSlideConfig] = useState({\n    isBeginning: true,\n    isEnd: false,\n  })\n\n  useEffect(() => {\n    if (!swiper) return\n\n    const updateSlideState = () => {\n      setSlideConfig({ isBeginning: swiper.isBeginning, isEnd: swiper.isEnd })\n    }\n\n    swiper.on('slideChange', updateSlideState)\n\n    return () => {\n      swiper.off('slideChange', updateSlideState)\n    }\n  }, [swiper])\n\n  if (!swiper) return null\n  if (slideConfig.isBeginning && type === 'prev') return null\n  if (slideConfig.isEnd && type === 'next') return null\n\n  return (\n    <button\n      onClick={(e) => {\n        e.stopPropagation()\n        if (type === 'next') {\n          swiper?.slideNext()\n        } else {\n          swiper?.slidePrev()\n        }\n      }}\n      className=\"flex items-center justify-center w-9 h-9 rounded-full border border-gray-300 bg-white shadow-sm hover:bg-gray-100 transition cursor-pointer\"\n    >\n      {type === 'next' ? <ChevronRight size={18} /> : <ChevronLeft size={18} />}\n    </button>\n  )\n}\n","'use client'\n\nimport React, { useRef, useState, useEffect } from 'react'\nimport { Pagination } from 'swiper/modules'\nimport { Swiper, SwiperProps } from 'swiper/react'\nimport { PaginationOptions, Swiper as SwiperType } from 'swiper/types'\n\nimport { cn } from '../utils'\nimport { CarouselNavigation } from './carousel-navigation'\n\n// Development warning for missing CSS\nlet cssWarningShown = false\nconst warnMissingCSS = () => {\n  if (typeof window === 'undefined' || cssWarningShown) return\n\n  // Check if Swiper CSS is loaded by looking for a swiper-specific style\n  const hasStyles = Array.from(document.styleSheets).some((sheet) => {\n    try {\n      return Array.from(sheet.cssRules || []).some(\n        (rule) => rule.cssText?.includes('.swiper'),\n      )\n    } catch {\n      return false // Cross-origin stylesheets\n    }\n  })\n\n  if (!hasStyles) {\n    cssWarningShown = true\n    console.warn(\n      '[@mdigital_ui/ui] Carousel requires Swiper CSS. Add to your CSS:\\n' +\n        \"@import 'swiper/css';\\n\\n\" +\n        'Or import in your entry file:\\n' +\n        \"import 'swiper/css';\",\n    )\n  }\n}\n\ninterface CarouselProps extends SwiperProps {\n  withArrows?: boolean\n  withPagination?: boolean\n  children: React.ReactNode\n}\n\nconst pagination: PaginationOptions = {\n  clickable: true,\n  horizontalClass: 'pagination',\n  bulletActiveClass: 'bg-text-primary',\n  bulletClass:\n    'inline-flex w-2.5 h-2.5 mx-1 rounded-full bg-border opacity-70 transition-all duration-300 cursor-pointer hover:opacity-100',\n}\n\nconst Carousel = React.memo<CarouselProps>(\n  ({\n    withArrows = false,\n    withPagination = false,\n    children,\n    loop = false,\n    className,\n    modules,\n    ...props\n  }) => {\n    const swiperRef = useRef<SwiperType | null>(null)\n    const [, setRenderTrigger] = useState(0)\n\n    useEffect(() => {\n      warnMissingCSS()\n    }, [])\n\n    return (\n      <div className=\"relative h-full group\">\n        {withArrows && (\n          <div className=\"absolute -translate-y-1/2 top-1/2 left-0 flex px-1 z-10 opacity-0 group-hover:opacity-100 transition-opacity duration-200\">\n            <CarouselNavigation\n              type=\"prev\"\n              swiper={swiperRef.current}\n            />\n          </div>\n        )}\n\n        <Swiper\n          loop={loop}\n          {...props}\n          modules={[Pagination, ...(modules || [])]}\n          pagination={withPagination ? pagination : false}\n          className={cn('relative', className)}\n          onBeforeInit={(swiper) => {\n            swiperRef.current = swiper\n            setRenderTrigger((x) => x + 1) // Trigger re-render to update navigation refs\n          }}\n        >\n          {children}\n        </Swiper>\n\n        {withArrows && (\n          <div className=\"absolute -translate-y-1/2 top-1/2 right-0 flex px-1 z-10 opacity-0 group-hover:opacity-100 transition-opacity duration-200\">\n            <CarouselNavigation\n              type=\"next\"\n              swiper={swiperRef.current}\n            />\n          </div>\n        )}\n      </div>\n    )\n  },\n)\n\nCarousel.displayName = 'Carousel'\n\nexport default Carousel\n"]}