@locusgraph/components 0.2.0 → 0.2.2

package/dist/display/media/carousel-controls.js

@@ -1,19 +1,170 @@
 "use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+
+import { c as _c } from "react/compiler-runtime";
 import { ArrowLeft, ArrowRight } from "@carbon/icons-react";
 import { cn } from "cn";
+import * as React from "react";
 import { Button } from "../../action/button.js";
 import { useCarousel } from "./carousel.js";
-function CarouselPrevious({ className, variant = "outline", size = "icon", ...props }) {
-    const { orientation, scrollPrev, canScrollPrev } = useCarousel();
-    return (_jsxs(Button, { "data-slot": "carousel-previous", variant: variant, size: size, className: cn("absolute size-8 rounded-full", orientation === "horizontal"
-            ? "top-1/2 -left-12 -translate-y-1/2"
-            : "-top-12 left-1/2 -translate-x-1/2 rotate-90", className), disabled: !canScrollPrev, onClick: scrollPrev, ...props, children: [_jsx(ArrowLeft, {}), _jsx("span", { className: "sr-only", children: "Previous slide" })] }));
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+function CarouselPrevious(t0) {
+  const $ = _c(17);
+  let className;
+  let props;
+  let t1;
+  let t2;
+  if ($[0] !== t0) {
+    ({
+      className,
+      variant: t1,
+      size: t2,
+      ...props
+    } = t0);
+    $[0] = t0;
+    $[1] = className;
+    $[2] = props;
+    $[3] = t1;
+    $[4] = t2;
+  } else {
+    className = $[1];
+    props = $[2];
+    t1 = $[3];
+    t2 = $[4];
+  }
+  const variant = t1 === undefined ? "outline" : t1;
+  const size = t2 === undefined ? "icon" : t2;
+  const {
+    orientation,
+    scrollPrev,
+    canScrollPrev
+  } = useCarousel();
+  const t3 = orientation === "horizontal" ? "top-1/2 -left-12 -translate-y-1/2" : "-top-12 left-1/2 -translate-x-1/2 rotate-90";
+  let t4;
+  if ($[5] !== className || $[6] !== t3) {
+    t4 = cn("absolute size-8 rounded-full", t3, className);
+    $[5] = className;
+    $[6] = t3;
+    $[7] = t4;
+  } else {
+    t4 = $[7];
+  }
+  const t5 = !canScrollPrev;
+  let t6;
+  let t7;
+  if ($[8] === Symbol.for("react.memo_cache_sentinel")) {
+    t6 = /*#__PURE__*/_jsx(ArrowLeft, {});
+    t7 = /*#__PURE__*/_jsx("span", {
+      className: "sr-only",
+      children: "Previous slide"
+    });
+    $[8] = t6;
+    $[9] = t7;
+  } else {
+    t6 = $[8];
+    t7 = $[9];
+  }
+  let t8;
+  if ($[10] !== props || $[11] !== scrollPrev || $[12] !== size || $[13] !== t4 || $[14] !== t5 || $[15] !== variant) {
+    t8 = /*#__PURE__*/_jsxs(Button, {
+      "data-slot": "carousel-previous",
+      variant: variant,
+      size: size,
+      className: t4,
+      disabled: t5,
+      onClick: scrollPrev,
+      ...props,
+      children: [t6, t7]
+    });
+    $[10] = props;
+    $[11] = scrollPrev;
+    $[12] = size;
+    $[13] = t4;
+    $[14] = t5;
+    $[15] = variant;
+    $[16] = t8;
+  } else {
+    t8 = $[16];
+  }
+  return t8;
 }
-function CarouselNext({ className, variant = "outline", size = "icon", ...props }) {
-    const { orientation, scrollNext, canScrollNext } = useCarousel();
-    return (_jsxs(Button, { "data-slot": "carousel-next", variant: variant, size: size, className: cn("absolute size-8 rounded-full", orientation === "horizontal"
-            ? "top-1/2 -right-12 -translate-y-1/2"
-            : "-bottom-12 left-1/2 -translate-x-1/2 rotate-90", className), disabled: !canScrollNext, onClick: scrollNext, ...props, children: [_jsx(ArrowRight, {}), _jsx("span", { className: "sr-only", children: "Next slide" })] }));
+function CarouselNext(t0) {
+  const $ = _c(17);
+  let className;
+  let props;
+  let t1;
+  let t2;
+  if ($[0] !== t0) {
+    ({
+      className,
+      variant: t1,
+      size: t2,
+      ...props
+    } = t0);
+    $[0] = t0;
+    $[1] = className;
+    $[2] = props;
+    $[3] = t1;
+    $[4] = t2;
+  } else {
+    className = $[1];
+    props = $[2];
+    t1 = $[3];
+    t2 = $[4];
+  }
+  const variant = t1 === undefined ? "outline" : t1;
+  const size = t2 === undefined ? "icon" : t2;
+  const {
+    orientation,
+    scrollNext,
+    canScrollNext
+  } = useCarousel();
+  const t3 = orientation === "horizontal" ? "top-1/2 -right-12 -translate-y-1/2" : "-bottom-12 left-1/2 -translate-x-1/2 rotate-90";
+  let t4;
+  if ($[5] !== className || $[6] !== t3) {
+    t4 = cn("absolute size-8 rounded-full", t3, className);
+    $[5] = className;
+    $[6] = t3;
+    $[7] = t4;
+  } else {
+    t4 = $[7];
+  }
+  const t5 = !canScrollNext;
+  let t6;
+  let t7;
+  if ($[8] === Symbol.for("react.memo_cache_sentinel")) {
+    t6 = /*#__PURE__*/_jsx(ArrowRight, {});
+    t7 = /*#__PURE__*/_jsx("span", {
+      className: "sr-only",
+      children: "Next slide"
+    });
+    $[8] = t6;
+    $[9] = t7;
+  } else {
+    t6 = $[8];
+    t7 = $[9];
+  }
+  let t8;
+  if ($[10] !== props || $[11] !== scrollNext || $[12] !== size || $[13] !== t4 || $[14] !== t5 || $[15] !== variant) {
+    t8 = /*#__PURE__*/_jsxs(Button, {
+      "data-slot": "carousel-next",
+      variant: variant,
+      size: size,
+      className: t4,
+      disabled: t5,
+      onClick: scrollNext,
+      ...props,
+      children: [t6, t7]
+    });
+    $[10] = props;
+    $[11] = scrollNext;
+    $[12] = size;
+    $[13] = t4;
+    $[14] = t5;
+    $[15] = variant;
+    $[16] = t8;
+  } else {
+    t8 = $[16];
+  }
+  return t8;
 }
 export { CarouselNext, CarouselPrevious };

package/dist/display/media/carousel.js

@@ -1,77 +1,337 @@
 "use client";
-import { jsx as _jsx } from "react/jsx-runtime";
+
+import { c as _c } from "react/compiler-runtime";
 import { cn } from "cn";
 import useEmblaCarousel from "embla-carousel-react";
 import * as React from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
 const CarouselContext = React.createContext(null);
 function useCarousel() {
-    const context = React.useContext(CarouselContext);
-    if (!context) {
-        throw new Error("useCarousel must be used within a <Carousel />");
-    }
-    return context;
+  const context = React.useContext(CarouselContext);
+  if (!context) {
+    throw new Error("useCarousel must be used within a <Carousel />");
+  }
+  return context;
 }
-function Carousel({ orientation = "horizontal", opts, setApi, plugins, className, children, ...props }) {
-    const [carouselRef, api] = useEmblaCarousel({
-        ...opts,
-        axis: orientation === "horizontal" ? "x" : "y",
-    }, plugins);
-    const [canScrollPrev, setCanScrollPrev] = React.useState(false);
-    const [canScrollNext, setCanScrollNext] = React.useState(false);
-    const onSelect = React.useCallback((api) => {
-        if (!api)
-            return;
-        setCanScrollPrev(api.canScrollPrev());
-        setCanScrollNext(api.canScrollNext());
-    }, []);
-    const scrollPrev = React.useCallback(() => {
-        api?.scrollPrev();
-    }, [api]);
-    const scrollNext = React.useCallback(() => {
-        api?.scrollNext();
-    }, [api]);
-    const handleKeyDown = React.useCallback((event) => {
-        if (event.key === "ArrowLeft") {
-            event.preventDefault();
-            scrollPrev();
-        }
-        else if (event.key === "ArrowRight") {
-            event.preventDefault();
-            scrollNext();
+function Carousel(t0) {
+  const $ = _c(45);
+  let children;
+  let className;
+  let opts;
+  let plugins;
+  let props;
+  let setApi;
+  let t1;
+  if ($[0] !== t0) {
+    ({
+      orientation: t1,
+      opts,
+      setApi,
+      plugins,
+      className,
+      children,
+      ...props
+    } = t0);
+    $[0] = t0;
+    $[1] = children;
+    $[2] = className;
+    $[3] = opts;
+    $[4] = plugins;
+    $[5] = props;
+    $[6] = setApi;
+    $[7] = t1;
+  } else {
+    children = $[1];
+    className = $[2];
+    opts = $[3];
+    plugins = $[4];
+    props = $[5];
+    setApi = $[6];
+    t1 = $[7];
+  }
+  const orientation = t1 === undefined ? "horizontal" : t1;
+  const t2 = orientation === "horizontal" ? "x" : "y";
+  let t3;
+  if ($[8] !== opts || $[9] !== t2) {
+    t3 = {
+      ...opts,
+      axis: t2
+    };
+    $[8] = opts;
+    $[9] = t2;
+    $[10] = t3;
+  } else {
+    t3 = $[10];
+  }
+  const [carouselRef, api] = useEmblaCarousel(t3, plugins);
+  const [canScrollPrev, setCanScrollPrev] = React.useState(false);
+  const [canScrollNext, setCanScrollNext] = React.useState(false);
+  let t4;
+  if ($[11] === Symbol.for("react.memo_cache_sentinel")) {
+    t4 = api_0 => {
+      if (!api_0) {
+        return;
+      }
+      setCanScrollPrev(api_0.canScrollPrev());
+      setCanScrollNext(api_0.canScrollNext());
+    };
+    $[11] = t4;
+  } else {
+    t4 = $[11];
+  }
+  const onSelect = t4;
+  let t5;
+  if ($[12] !== api) {
+    t5 = () => {
+      api?.scrollPrev();
+    };
+    $[12] = api;
+    $[13] = t5;
+  } else {
+    t5 = $[13];
+  }
+  const scrollPrev = t5;
+  let t6;
+  if ($[14] !== api) {
+    t6 = () => {
+      api?.scrollNext();
+    };
+    $[14] = api;
+    $[15] = t6;
+  } else {
+    t6 = $[15];
+  }
+  const scrollNext = t6;
+  let t7;
+  if ($[16] !== scrollNext || $[17] !== scrollPrev) {
+    t7 = event => {
+      if (event.key === "ArrowLeft") {
+        event.preventDefault();
+        scrollPrev();
+      } else {
+        if (event.key === "ArrowRight") {
+          event.preventDefault();
+          scrollNext();
         }
-    }, [scrollPrev, scrollNext]);
-    React.useEffect(() => {
-        if (!api || !setApi)
-            return;
-        setApi(api);
-    }, [api, setApi]);
-    React.useEffect(() => {
-        if (!api)
-            return;
-        onSelect(api);
-        api.on("reInit", onSelect);
-        api.on("select", onSelect);
-        return () => {
-            api?.off("select", onSelect);
-        };
-    }, [api, onSelect]);
-    return (_jsx(CarouselContext.Provider, { value: {
-            carouselRef,
-            api: api,
-            opts,
-            orientation: orientation || (opts?.axis === "y" ? "vertical" : "horizontal"),
-            scrollPrev,
-            scrollNext,
-            canScrollPrev,
-            canScrollNext,
-        }, children: _jsx("div", { onKeyDownCapture: handleKeyDown, className: cn("relative", className), role: "region", "aria-roledescription": "carousel", "data-slot": "carousel", ...props, children: children }) }));
+      }
+    };
+    $[16] = scrollNext;
+    $[17] = scrollPrev;
+    $[18] = t7;
+  } else {
+    t7 = $[18];
+  }
+  const handleKeyDown = t7;
+  let t8;
+  let t9;
+  if ($[19] !== api || $[20] !== setApi) {
+    t8 = () => {
+      if (!api || !setApi) {
+        return;
+      }
+      setApi(api);
+    };
+    t9 = [api, setApi];
+    $[19] = api;
+    $[20] = setApi;
+    $[21] = t8;
+    $[22] = t9;
+  } else {
+    t8 = $[21];
+    t9 = $[22];
+  }
+  React.useEffect(t8, t9);
+  let t10;
+  let t11;
+  if ($[23] !== api) {
+    t10 = () => {
+      if (!api) {
+        return;
+      }
+      onSelect(api);
+      api.on("reInit", onSelect);
+      api.on("select", onSelect);
+      return () => {
+        api?.off("select", onSelect);
+      };
+    };
+    t11 = [api, onSelect];
+    $[23] = api;
+    $[24] = t10;
+    $[25] = t11;
+  } else {
+    t10 = $[24];
+    t11 = $[25];
+  }
+  React.useEffect(t10, t11);
+  const t12 = orientation || (opts?.axis === "y" ? "vertical" : "horizontal");
+  let t13;
+  if ($[26] !== api || $[27] !== canScrollNext || $[28] !== canScrollPrev || $[29] !== carouselRef || $[30] !== opts || $[31] !== scrollNext || $[32] !== scrollPrev || $[33] !== t12) {
+    t13 = {
+      carouselRef,
+      api,
+      opts,
+      orientation: t12,
+      scrollPrev,
+      scrollNext,
+      canScrollPrev,
+      canScrollNext
+    };
+    $[26] = api;
+    $[27] = canScrollNext;
+    $[28] = canScrollPrev;
+    $[29] = carouselRef;
+    $[30] = opts;
+    $[31] = scrollNext;
+    $[32] = scrollPrev;
+    $[33] = t12;
+    $[34] = t13;
+  } else {
+    t13 = $[34];
+  }
+  let t14;
+  if ($[35] !== className) {
+    t14 = cn("relative", className);
+    $[35] = className;
+    $[36] = t14;
+  } else {
+    t14 = $[36];
+  }
+  let t15;
+  if ($[37] !== children || $[38] !== handleKeyDown || $[39] !== props || $[40] !== t14) {
+    t15 = /*#__PURE__*/_jsx("div", {
+      onKeyDownCapture: handleKeyDown,
+      className: t14,
+      role: "region",
+      "aria-roledescription": "carousel",
+      "data-slot": "carousel",
+      ...props,
+      children: children
+    });
+    $[37] = children;
+    $[38] = handleKeyDown;
+    $[39] = props;
+    $[40] = t14;
+    $[41] = t15;
+  } else {
+    t15 = $[41];
+  }
+  let t16;
+  if ($[42] !== t13 || $[43] !== t15) {
+    t16 = /*#__PURE__*/_jsx(CarouselContext.Provider, {
+      value: t13,
+      children: t15
+    });
+    $[42] = t13;
+    $[43] = t15;
+    $[44] = t16;
+  } else {
+    t16 = $[44];
+  }
+  return t16;
 }
-function CarouselContent({ className, ...props }) {
-    const { carouselRef, orientation } = useCarousel();
-    return (_jsx("div", { ref: carouselRef, className: "overflow-hidden", "data-slot": "carousel-content", children: _jsx("div", { className: cn("flex", orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col", className), ...props }) }));
+function CarouselContent(t0) {
+  const $ = _c(12);
+  let className;
+  let props;
+  if ($[0] !== t0) {
+    ({
+      className,
+      ...props
+    } = t0);
+    $[0] = t0;
+    $[1] = className;
+    $[2] = props;
+  } else {
+    className = $[1];
+    props = $[2];
+  }
+  const {
+    carouselRef,
+    orientation
+  } = useCarousel();
+  const t1 = orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col";
+  let t2;
+  if ($[3] !== className || $[4] !== t1) {
+    t2 = cn("flex", t1, className);
+    $[3] = className;
+    $[4] = t1;
+    $[5] = t2;
+  } else {
+    t2 = $[5];
+  }
+  let t3;
+  if ($[6] !== props || $[7] !== t2) {
+    t3 = /*#__PURE__*/_jsx("div", {
+      className: t2,
+      ...props
+    });
+    $[6] = props;
+    $[7] = t2;
+    $[8] = t3;
+  } else {
+    t3 = $[8];
+  }
+  let t4;
+  if ($[9] !== carouselRef || $[10] !== t3) {
+    t4 = /*#__PURE__*/_jsx("div", {
+      ref: carouselRef,
+      className: "overflow-hidden",
+      "data-slot": "carousel-content",
+      children: t3
+    });
+    $[9] = carouselRef;
+    $[10] = t3;
+    $[11] = t4;
+  } else {
+    t4 = $[11];
+  }
+  return t4;
 }
-function CarouselItem({ className, ...props }) {
-    const { orientation } = useCarousel();
-    return (_jsx("div", { role: "group", "aria-roledescription": "slide", "data-slot": "carousel-item", className: cn("min-w-0 shrink-0 grow-0 basis-full", orientation === "horizontal" ? "pl-4" : "pt-4", className), ...props }));
+function CarouselItem(t0) {
+  const $ = _c(9);
+  let className;
+  let props;
+  if ($[0] !== t0) {
+    ({
+      className,
+      ...props
+    } = t0);
+    $[0] = t0;
+    $[1] = className;
+    $[2] = props;
+  } else {
+    className = $[1];
+    props = $[2];
+  }
+  const {
+    orientation
+  } = useCarousel();
+  const t1 = orientation === "horizontal" ? "pl-4" : "pt-4";
+  let t2;
+  if ($[3] !== className || $[4] !== t1) {
+    t2 = cn("min-w-0 shrink-0 grow-0 basis-full", t1, className);
+    $[3] = className;
+    $[4] = t1;
+    $[5] = t2;
+  } else {
+    t2 = $[5];
+  }
+  let t3;
+  if ($[6] !== props || $[7] !== t2) {
+    t3 = /*#__PURE__*/_jsx("div", {
+      role: "group",
+      "aria-roledescription": "slide",
+      "data-slot": "carousel-item",
+      className: t2,
+      ...props
+    });
+    $[6] = props;
+    $[7] = t2;
+    $[8] = t3;
+  } else {
+    t3 = $[8];
+  }
+  return t3;
 }
 export { Carousel, CarouselContent, CarouselItem, useCarousel };