laif-ds/dist/components/ui/carousel.js

Design System di Laif con componenti React basati su principi di Atomic Design

"use client";
import { jsx as a, jsxs as h } from "react/jsx-runtime";
import * as l from "react";
import k from "../../node_modules/embla-carousel-react/esm/embla-carousel-react.esm.js";
import { cn as d } from "../../lib/utils.js";
import { Button as v } from "./button.js";
import z from "../../node_modules/lucide-react/dist/esm/icons/arrow-right.js";
import g from "../../node_modules/lucide-react/dist/esm/icons/arrow-left.js";
const p = l.createContext(null);
function m() {
  const o = l.useContext(p);
  if (!o)
    throw new Error("useCarousel must be used within a <Carousel />");
  return o;
}
function K({
  orientation: o = "horizontal",
  opts: r,
  setApi: t,
  plugins: s,
  className: c,
  children: i,
  ...u
}) {
  const [N, e] = k(
    {
      ...r,
      axis: o === "horizontal" ? "x" : "y"
    },
    s
  ), [b, w] = l.useState(!1), [S, y] = l.useState(!1), f = l.useCallback((n) => {
    n && (w(n.canScrollPrev()), y(n.canScrollNext()));
  }, []), x = l.useCallback(() => {
    e?.scrollPrev();
  }, [e]), C = l.useCallback(() => {
    e?.scrollNext();
  }, [e]), P = l.useCallback(
    (n) => {
      n.key === "ArrowLeft" ? (n.preventDefault(), x()) : n.key === "ArrowRight" && (n.preventDefault(), C());
    },
    [x, C]
  );
  return l.useEffect(() => {
    !e || !t || t(e);
  }, [e, t]), l.useEffect(() => {
    if (e)
      return f(e), e.on("reInit", f), e.on("select", f), () => {
        e?.off("select", f);
      };
  }, [e, f]), /* @__PURE__ */ a(
    p.Provider,
    {
      value: {
        carouselRef: N,
        api: e,
        opts: r,
        orientation: o || (r?.axis === "y" ? "vertical" : "horizontal"),
        scrollPrev: x,
        scrollNext: C,
        canScrollPrev: b,
        canScrollNext: S
      },
      children: /* @__PURE__ */ a(
        "div",
        {
          onKeyDownCapture: P,
          className: d("relative", c),
          role: "region",
          "aria-roledescription": "carousel",
          "data-slot": "carousel",
          ...u,
          children: i
        }
      )
    }
  );
}
function L({ className: o, ...r }) {
  const { carouselRef: t, orientation: s } = m();
  return /* @__PURE__ */ a(
    "div",
    {
      ref: t,
      className: "overflow-hidden",
      "data-slot": "carousel-content",
      children: /* @__PURE__ */ a(
        "div",
        {
          className: d(
            "flex",
            s === "horizontal" ? "-ml-4" : "-mt-4 flex-col",
            o
          ),
          ...r
        }
      )
    }
  );
}
function B({ className: o, ...r }) {
  const { orientation: t } = m();
  return /* @__PURE__ */ a(
    "div",
    {
      role: "group",
      "aria-roledescription": "slide",
      "data-slot": "carousel-item",
      className: d(
        "min-w-0 shrink-0 grow-0 basis-full",
        t === "horizontal" ? "pl-4" : "pt-4",
        o
      ),
      ...r
    }
  );
}
function q({
  className: o,
  variant: r = "outline",
  size: t = "icon",
  ...s
}) {
  const { orientation: c, scrollPrev: i, canScrollPrev: u } = m();
  return /* @__PURE__ */ h(
    v,
    {
      "data-slot": "carousel-previous",
      variant: r,
      size: t,
      className: d(
        "absolute size-8 rounded-full",
        c === "horizontal" ? "top-1/2 -left-12 -translate-y-1/2" : "-top-12 left-1/2 -translate-x-1/2 rotate-90",
        o
      ),
      disabled: !u,
      onClick: i,
      ...s,
      children: [
        /* @__PURE__ */ a(g, {}),
        /* @__PURE__ */ a("span", { className: "sr-only", children: "Previous slide" })
      ]
    }
  );
}
function F({
  className: o,
  variant: r = "outline",
  size: t = "icon",
  ...s
}) {
  const { orientation: c, scrollNext: i, canScrollNext: u } = m();
  return /* @__PURE__ */ h(
    v,
    {
      "data-slot": "carousel-next",
      variant: r,
      size: t,
      className: d(
        "absolute size-8 rounded-full",
        c === "horizontal" ? "top-1/2 -right-12 -translate-y-1/2" : "-bottom-12 left-1/2 -translate-x-1/2 rotate-90",
        o
      ),
      disabled: !u,
      onClick: i,
      ...s,
      children: [
        /* @__PURE__ */ a(z, {}),
        /* @__PURE__ */ a("span", { className: "sr-only", children: "Next slide" })
      ]
    }
  );
}
export {
  K as Carousel,
  L as CarouselContent,
  B as CarouselItem,
  F as CarouselNext,
  q as CarouselPrevious
};