@alexgorbatchev/shadcn 0.0.31 → 0.0.32

package/dist/chunk-dzvsjw59.js

@@ -0,0 +1,200 @@
+import {
+  cn2
+} from "./chunk-cp2m7y7v.js";
+import {
+  Button2
+} from "./chunk-q7p28b89.js";
+
+// src/components/carousel/Carousel.tsx
+import { useCallback, useEffect, useState } from "react";
+import useEmblaCarousel from "embla-carousel-react";
+import { useDirection } from "@base-ui/react/direction-provider";
+import { ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon } from "lucide-react";
+
+// src/components/carousel/CarouselContext.ts
+import { createContext } from "react";
+var CarouselContext = createContext(null);
+
+// src/components/carousel/hooks/useCarousel.ts
+import { useContext } from "react";
+function useCarousel2() {
+  const context = useContext(CarouselContext);
+  if (!context)
+    throw new Error("useCarousel must be used within Carousel.");
+  return context;
+}
+
+// src/components/carousel/Carousel.tsx
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+function Carousel2({
+  density,
+  orientation = "horizontal",
+  opts,
+  setApi,
+  plugins,
+  className,
+  children,
+  onKeyDown,
+  ...props
+}) {
+  const inheritedDirection = useDirection();
+  const direction = opts?.direction ?? inheritedDirection;
+  const [carouselRef, api] = useEmblaCarousel({
+    ...opts,
+    direction,
+    axis: orientation === "horizontal" ? "x" : "y",
+    breakpoints: {
+      ...opts?.breakpoints,
+      "(prefers-reduced-motion: reduce)": {
+        ...opts?.breakpoints?.["(prefers-reduced-motion: reduce)"],
+        duration: 0
+      }
+    }
+  }, plugins);
+  const [canScrollPrev, setCanScrollPrev] = useState(false);
+  const [canScrollNext, setCanScrollNext] = useState(false);
+  const scrollPrev = useCallback(() => api?.scrollPrev(), [api]);
+  const scrollNext = useCallback(() => api?.scrollNext(), [api]);
+  useEffect(() => {
+    if (!api)
+      return;
+    const update = () => {
+      setCanScrollPrev(api.canScrollPrev());
+      setCanScrollNext(api.canScrollNext());
+    };
+    update();
+    api.on("reInit", update);
+    api.on("select", update);
+    return () => {
+      api.off("reInit", update);
+      api.off("select", update);
+    };
+  }, [api]);
+  useEffect(() => {
+    if (api)
+      setApi?.(api);
+  }, [api, setApi]);
+  const handleKeyDown = (event) => {
+    onKeyDown?.(event);
+    if (event.defaultPrevented || event.target !== event.currentTarget)
+      return;
+    const previousKey = orientation === "vertical" ? "ArrowUp" : direction === "rtl" ? "ArrowRight" : "ArrowLeft";
+    const nextKey = orientation === "vertical" ? "ArrowDown" : direction === "rtl" ? "ArrowLeft" : "ArrowRight";
+    if (event.key === previousKey) {
+      event.preventDefault();
+      scrollPrev();
+    }
+    if (event.key === nextKey) {
+      event.preventDefault();
+      scrollNext();
+    }
+  };
+  return /* @__PURE__ */ jsx(CarouselContext.Provider, {
+    value: { carouselRef, api, orientation, direction, scrollPrev, scrollNext, canScrollPrev, canScrollNext },
+    children: /* @__PURE__ */ jsx("div", {
+      "data-slot": "carousel",
+      "data-density": density,
+      dir: direction,
+      role: "region",
+      "aria-roledescription": "carousel",
+      tabIndex: 0,
+      className: cn2("relative outline-none focus-visible:ring-1 focus-visible:ring-ring", className),
+      ...props,
+      onKeyDown: handleKeyDown,
+      children
+    })
+  });
+}
+function CarouselContent2({ className, ...props }) {
+  const { carouselRef, orientation } = useCarousel2();
+  return /* @__PURE__ */ jsx("div", {
+    ref: carouselRef,
+    "data-slot": "carousel-content",
+    className: "overflow-hidden",
+    children: /* @__PURE__ */ jsx("div", {
+      className: cn2("flex", orientation === "horizontal" ? "-ms-panel touch-pan-y touch-pinch-zoom" : "-mt-panel flex-col touch-pan-x touch-pinch-zoom", className),
+      ...props
+    })
+  });
+}
+function CarouselItem2({ className, ...props }) {
+  const { orientation } = useCarousel2();
+  return /* @__PURE__ */ jsx("div", {
+    role: "group",
+    "aria-roledescription": "slide",
+    "data-slot": "carousel-item",
+    className: cn2("min-h-0 min-w-0 shrink-0 grow-0 basis-full", orientation === "horizontal" ? "ps-panel" : "pt-panel", className),
+    ...props
+  });
+}
+function CarouselPrevious2({
+  className,
+  variant = "outline",
+  size = "icon-sm",
+  disabled,
+  onClick,
+  children,
+  ...props
+}) {
+  const { orientation, scrollPrev, canScrollPrev } = useCarousel2();
+  return /* @__PURE__ */ jsx(Button2, {
+    "data-slot": "carousel-previous",
+    variant,
+    size,
+    className: (state) => cn2("absolute touch-manipulation", orientation === "horizontal" ? "inset-y-0 -start-10 my-auto" : "-top-10 left-1/2 -translate-x-1/2", typeof className === "function" ? className(state) : className),
+    disabled: disabled || !canScrollPrev,
+    onClick: (event) => {
+      onClick?.(event);
+      if (!event.defaultPrevented)
+        scrollPrev();
+    },
+    ...props,
+    children: children ?? /* @__PURE__ */ jsxs(Fragment, {
+      children: [
+        orientation === "horizontal" ? /* @__PURE__ */ jsx(ChevronLeftIcon, {
+          className: "rtl:rotate-180"
+        }) : /* @__PURE__ */ jsx(ChevronUpIcon, {}),
+        /* @__PURE__ */ jsx("span", {
+          className: "sr-only",
+          children: "Previous slide"
+        })
+      ]
+    })
+  });
+}
+function CarouselNext2({
+  className,
+  variant = "outline",
+  size = "icon-sm",
+  disabled,
+  onClick,
+  children,
+  ...props
+}) {
+  const { orientation, scrollNext, canScrollNext } = useCarousel2();
+  return /* @__PURE__ */ jsx(Button2, {
+    "data-slot": "carousel-next",
+    variant,
+    size,
+    className: (state) => cn2("absolute touch-manipulation", orientation === "horizontal" ? "inset-y-0 -end-10 my-auto" : "-bottom-10 left-1/2 -translate-x-1/2", typeof className === "function" ? className(state) : className),
+    disabled: disabled || !canScrollNext,
+    onClick: (event) => {
+      onClick?.(event);
+      if (!event.defaultPrevented)
+        scrollNext();
+    },
+    ...props,
+    children: children ?? /* @__PURE__ */ jsxs(Fragment, {
+      children: [
+        orientation === "horizontal" ? /* @__PURE__ */ jsx(ChevronRightIcon, {
+          className: "rtl:rotate-180"
+        }) : /* @__PURE__ */ jsx(ChevronDownIcon, {}),
+        /* @__PURE__ */ jsx("span", {
+          className: "sr-only",
+          children: "Next slide"
+        })
+      ]
+    })
+  });
+}
+export { useCarousel2, Carousel2, CarouselContent2, CarouselItem2, CarouselPrevious2, CarouselNext2 };