@nucleux/carousel 0.2.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Nucleux
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,26 @@
+# @nucleux/carousel
+
+Swipeable content carousel — Nucleux agentic UI for React.
+
+Part of **[Nucleux](https://github.com/intelligaia-open-labs/nucleux)** — agentic UI components for React. Install a single component, or the full kit via [`@nucleux/react`](https://www.npmjs.com/package/@nucleux/react).
+
+## Install
+
+```bash
+pnpm add @nucleux/carousel @nucleux/tokens
+```
+
+`react` / `react-dom` are peer dependencies.
+
+## Usage
+
+```tsx
+import { Carousel } from "@nucleux/carousel";
+```
+
+Requires the theme once in your app: `import "@nucleux/tokens/styles.css";`
+and the Tailwind preset from `@nucleux/tokens/preset`.
+
+## License
+
+MIT © Nucleux

package/dist/index.cjs

@@ -0,0 +1,185 @@
+"use client";
+'use strict';
+
+var React = require('react');
+var lucideReact = require('lucide-react');
+var useEmblaCarousel = require('embla-carousel-react');
+var utils = require('@nucleux/utils');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+var useEmblaCarousel__default = /*#__PURE__*/_interopDefault(useEmblaCarousel);
+
+// src/index.tsx
+var CarouselContext = React__namespace.createContext(null);
+var useCarousel = (component) => {
+  const ctx = React__namespace.useContext(CarouselContext);
+  if (!ctx) throw new Error(`${component} must be used within a Carousel`);
+  return ctx;
+};
+var Carousel = React__namespace.forwardRef(
+  ({ orientation = "horizontal", opts, setApi, className, children, ...props }, ref) => {
+    const [carouselRef, api] = useEmblaCarousel__default.default({
+      ...opts,
+      axis: orientation === "horizontal" ? "x" : "y"
+    });
+    const [canScrollPrev, setCanScrollPrev] = React__namespace.useState(false);
+    const [canScrollNext, setCanScrollNext] = React__namespace.useState(false);
+    const onSelect = React__namespace.useCallback((embla) => {
+      setCanScrollPrev(embla.canScrollPrev());
+      setCanScrollNext(embla.canScrollNext());
+    }, []);
+    const scrollPrev = React__namespace.useCallback(() => api?.scrollPrev(), [api]);
+    const scrollNext = React__namespace.useCallback(() => api?.scrollNext(), [api]);
+    React__namespace.useEffect(() => {
+      if (!api) return;
+      setApi?.(api);
+      onSelect(api);
+      api.on("reInit", onSelect);
+      api.on("select", onSelect);
+      return () => {
+        api.off("reInit", onSelect);
+        api.off("select", onSelect);
+      };
+    }, [api, setApi, onSelect]);
+    const handleKeyDown = (e) => {
+      if (e.key === "ArrowLeft") {
+        e.preventDefault();
+        scrollPrev();
+      } else if (e.key === "ArrowRight") {
+        e.preventDefault();
+        scrollNext();
+      }
+    };
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      CarouselContext.Provider,
+      {
+        value: { carouselRef, api, orientation, scrollPrev, scrollNext, canScrollPrev, canScrollNext },
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            ref,
+            role: "region",
+            "aria-roledescription": "carousel",
+            onKeyDownCapture: handleKeyDown,
+            className: utils.cn("relative", className),
+            ...props,
+            children
+          }
+        )
+      }
+    );
+  }
+);
+Carousel.displayName = "Carousel";
+var CarouselContent = React__namespace.forwardRef(
+  ({ className, ...props }, ref) => {
+    const { carouselRef, orientation } = useCarousel("CarouselContent");
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { ref: carouselRef, className: "overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref,
+        className: utils.cn("flex", orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col", className),
+        ...props
+      }
+    ) });
+  }
+);
+CarouselContent.displayName = "CarouselContent";
+var CarouselItem = React__namespace.forwardRef(
+  ({ className, ...props }, ref) => {
+    const { orientation } = useCarousel("CarouselItem");
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref,
+        role: "group",
+        "aria-roledescription": "slide",
+        className: utils.cn(
+          "min-w-0 shrink-0 grow-0 basis-full",
+          orientation === "horizontal" ? "pl-4" : "pt-4",
+          className
+        ),
+        ...props
+      }
+    );
+  }
+);
+CarouselItem.displayName = "CarouselItem";
+var navBase = "inline-flex h-8 w-8 items-center justify-center rounded-full border border-input bg-background text-foreground shadow-sm transition-colors hover:bg-accent disabled:pointer-events-none disabled:opacity-40 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring";
+var CarouselPrevious = React__namespace.forwardRef(
+  ({ className, ...props }, ref) => {
+    const { scrollPrev, canScrollPrev, orientation } = useCarousel("CarouselPrevious");
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        ref,
+        type: "button",
+        "aria-label": "Previous slide",
+        disabled: !canScrollPrev,
+        onClick: scrollPrev,
+        className: utils.cn(
+          navBase,
+          "absolute",
+          orientation === "horizontal" ? "-left-4 top-1/2 -translate-y-1/2" : "-top-4 left-1/2 -translate-x-1/2 rotate-90",
+          className
+        ),
+        ...props,
+        children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowLeft, { className: "h-4 w-4" })
+      }
+    );
+  }
+);
+CarouselPrevious.displayName = "CarouselPrevious";
+var CarouselNext = React__namespace.forwardRef(
+  ({ className, ...props }, ref) => {
+    const { scrollNext, canScrollNext, orientation } = useCarousel("CarouselNext");
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        ref,
+        type: "button",
+        "aria-label": "Next slide",
+        disabled: !canScrollNext,
+        onClick: scrollNext,
+        className: utils.cn(
+          navBase,
+          "absolute",
+          orientation === "horizontal" ? "-right-4 top-1/2 -translate-y-1/2" : "-bottom-4 left-1/2 -translate-x-1/2 rotate-90",
+          className
+        ),
+        ...props,
+        children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowRight, { className: "h-4 w-4" })
+      }
+    );
+  }
+);
+CarouselNext.displayName = "CarouselNext";
+
+exports.Carousel = Carousel;
+exports.CarouselContent = CarouselContent;
+exports.CarouselItem = CarouselItem;
+exports.CarouselNext = CarouselNext;
+exports.CarouselPrevious = CarouselPrevious;
+//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.tsx"],"names":["React","useEmblaCarousel","jsx","cn","ArrowLeft","ArrowRight"],"mappings":"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","file":"index.cjs","sourcesContent":["import * as React from \"react\";\nimport { ArrowLeft, ArrowRight } from \"lucide-react\";\nimport useEmblaCarousel from \"embla-carousel-react\";\nimport type { EmblaCarouselType, EmblaOptionsType } from \"embla-carousel\";\nimport { cn } from \"@nucleux/utils\";\n\ntype Orientation = \"horizontal\" | \"vertical\";\n\ninterface CarouselContextValue {\n  carouselRef: ReturnType<typeof useEmblaCarousel>[0];\n  api: EmblaCarouselType | undefined;\n  orientation: Orientation;\n  scrollPrev: () => void;\n  scrollNext: () => void;\n  canScrollPrev: boolean;\n  canScrollNext: boolean;\n}\n\nconst CarouselContext = React.createContext<CarouselContextValue | null>(null);\nconst useCarousel = (component: string) => {\n  const ctx = React.useContext(CarouselContext);\n  if (!ctx) throw new Error(`${component} must be used within a Carousel`);\n  return ctx;\n};\n\nexport interface CarouselProps extends React.HTMLAttributes<HTMLDivElement> {\n  orientation?: Orientation;\n  opts?: EmblaOptionsType;\n  /** Receive the Embla API instance once ready. */\n  setApi?: (api: EmblaCarouselType | undefined) => void;\n}\n\n/** A swipeable/keyboard-navigable carousel built on Embla. */\nexport const Carousel = React.forwardRef<HTMLDivElement, CarouselProps>(\n  ({ orientation = \"horizontal\", opts, setApi, className, children, ...props }, ref) => {\n    const [carouselRef, api] = useEmblaCarousel({\n      ...opts,\n      axis: orientation === \"horizontal\" ? \"x\" : \"y\",\n    });\n    const [canScrollPrev, setCanScrollPrev] = React.useState(false);\n    const [canScrollNext, setCanScrollNext] = React.useState(false);\n\n    const onSelect = React.useCallback((embla: EmblaCarouselType) => {\n      setCanScrollPrev(embla.canScrollPrev());\n      setCanScrollNext(embla.canScrollNext());\n    }, []);\n\n    const scrollPrev = React.useCallback(() => api?.scrollPrev(), [api]);\n    const scrollNext = React.useCallback(() => api?.scrollNext(), [api]);\n\n    React.useEffect(() => {\n      if (!api) return;\n      setApi?.(api);\n      onSelect(api);\n      api.on(\"reInit\", onSelect);\n      api.on(\"select\", onSelect);\n      return () => {\n        api.off(\"reInit\", onSelect);\n        api.off(\"select\", onSelect);\n      };\n    }, [api, setApi, onSelect]);\n\n    const handleKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {\n      if (e.key === \"ArrowLeft\") {\n        e.preventDefault();\n        scrollPrev();\n      } else if (e.key === \"ArrowRight\") {\n        e.preventDefault();\n        scrollNext();\n      }\n    };\n\n    return (\n      <CarouselContext.Provider\n        value={{ carouselRef, api, orientation, scrollPrev, scrollNext, canScrollPrev, canScrollNext }}\n      >\n        <div\n          ref={ref}\n          role=\"region\"\n          aria-roledescription=\"carousel\"\n          onKeyDownCapture={handleKeyDown}\n          className={cn(\"relative\", className)}\n          {...props}\n        >\n          {children}\n        </div>\n      </CarouselContext.Provider>\n    );\n  },\n);\nCarousel.displayName = \"Carousel\";\n\nexport type CarouselContentProps = React.HTMLAttributes<HTMLDivElement>;\n\n/** The scrolling viewport holding {@link CarouselItem}s. */\nexport const CarouselContent = React.forwardRef<HTMLDivElement, CarouselContentProps>(\n  ({ className, ...props }, ref) => {\n    const { carouselRef, orientation } = useCarousel(\"CarouselContent\");\n    return (\n      <div ref={carouselRef} className=\"overflow-hidden\">\n        <div\n          ref={ref}\n          className={cn(\"flex\", orientation === \"horizontal\" ? \"-ml-4\" : \"-mt-4 flex-col\", className)}\n          {...props}\n        />\n      </div>\n    );\n  },\n);\nCarouselContent.displayName = \"CarouselContent\";\n\nexport type CarouselItemProps = React.HTMLAttributes<HTMLDivElement>;\n\n/** A single slide. */\nexport const CarouselItem = React.forwardRef<HTMLDivElement, CarouselItemProps>(\n  ({ className, ...props }, ref) => {\n    const { orientation } = useCarousel(\"CarouselItem\");\n    return (\n      <div\n        ref={ref}\n        role=\"group\"\n        aria-roledescription=\"slide\"\n        className={cn(\n          \"min-w-0 shrink-0 grow-0 basis-full\",\n          orientation === \"horizontal\" ? \"pl-4\" : \"pt-4\",\n          className,\n        )}\n        {...props}\n      />\n    );\n  },\n);\nCarouselItem.displayName = \"CarouselItem\";\n\nconst navBase =\n  \"inline-flex h-8 w-8 items-center justify-center rounded-full border border-input bg-background text-foreground shadow-sm transition-colors hover:bg-accent disabled:pointer-events-none disabled:opacity-40 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\";\n\n/** Scrolls to the previous slide. */\nexport const CarouselPrevious = React.forwardRef<HTMLButtonElement, React.ButtonHTMLAttributes<HTMLButtonElement>>(\n  ({ className, ...props }, ref) => {\n    const { scrollPrev, canScrollPrev, orientation } = useCarousel(\"CarouselPrevious\");\n    return (\n      <button\n        ref={ref}\n        type=\"button\"\n        aria-label=\"Previous slide\"\n        disabled={!canScrollPrev}\n        onClick={scrollPrev}\n        className={cn(\n          navBase,\n          \"absolute\",\n          orientation === \"horizontal\"\n            ? \"-left-4 top-1/2 -translate-y-1/2\"\n            : \"-top-4 left-1/2 -translate-x-1/2 rotate-90\",\n          className,\n        )}\n        {...props}\n      >\n        <ArrowLeft className=\"h-4 w-4\" />\n      </button>\n    );\n  },\n);\nCarouselPrevious.displayName = \"CarouselPrevious\";\n\n/** Scrolls to the next slide. */\nexport const CarouselNext = React.forwardRef<HTMLButtonElement, React.ButtonHTMLAttributes<HTMLButtonElement>>(\n  ({ className, ...props }, ref) => {\n    const { scrollNext, canScrollNext, orientation } = useCarousel(\"CarouselNext\");\n    return (\n      <button\n        ref={ref}\n        type=\"button\"\n        aria-label=\"Next slide\"\n        disabled={!canScrollNext}\n        onClick={scrollNext}\n        className={cn(\n          navBase,\n          \"absolute\",\n          orientation === \"horizontal\"\n            ? \"-right-4 top-1/2 -translate-y-1/2\"\n            : \"-bottom-4 left-1/2 -translate-x-1/2 rotate-90\",\n          className,\n        )}\n        {...props}\n      >\n        <ArrowRight className=\"h-4 w-4\" />\n      </button>\n    );\n  },\n);\nCarouselNext.displayName = \"CarouselNext\";\n"]}

package/dist/index.d.cts

@@ -0,0 +1,24 @@
+import * as React from 'react';
+import { EmblaOptionsType, EmblaCarouselType } from 'embla-carousel';
+
+type Orientation = "horizontal" | "vertical";
+interface CarouselProps extends React.HTMLAttributes<HTMLDivElement> {
+    orientation?: Orientation;
+    opts?: EmblaOptionsType;
+    /** Receive the Embla API instance once ready. */
+    setApi?: (api: EmblaCarouselType | undefined) => void;
+}
+/** A swipeable/keyboard-navigable carousel built on Embla. */
+declare const Carousel: React.ForwardRefExoticComponent<CarouselProps & React.RefAttributes<HTMLDivElement>>;
+type CarouselContentProps = React.HTMLAttributes<HTMLDivElement>;
+/** The scrolling viewport holding {@link CarouselItem}s. */
+declare const CarouselContent: React.ForwardRefExoticComponent<CarouselContentProps & React.RefAttributes<HTMLDivElement>>;
+type CarouselItemProps = React.HTMLAttributes<HTMLDivElement>;
+/** A single slide. */
+declare const CarouselItem: React.ForwardRefExoticComponent<CarouselItemProps & React.RefAttributes<HTMLDivElement>>;
+/** Scrolls to the previous slide. */
+declare const CarouselPrevious: React.ForwardRefExoticComponent<React.ButtonHTMLAttributes<HTMLButtonElement> & React.RefAttributes<HTMLButtonElement>>;
+/** Scrolls to the next slide. */
+declare const CarouselNext: React.ForwardRefExoticComponent<React.ButtonHTMLAttributes<HTMLButtonElement> & React.RefAttributes<HTMLButtonElement>>;
+
+export { Carousel, CarouselContent, type CarouselContentProps, CarouselItem, type CarouselItemProps, CarouselNext, CarouselPrevious, type CarouselProps };

package/dist/index.d.ts

@@ -0,0 +1,24 @@
+import * as React from 'react';
+import { EmblaOptionsType, EmblaCarouselType } from 'embla-carousel';
+
+type Orientation = "horizontal" | "vertical";
+interface CarouselProps extends React.HTMLAttributes<HTMLDivElement> {
+    orientation?: Orientation;
+    opts?: EmblaOptionsType;
+    /** Receive the Embla API instance once ready. */
+    setApi?: (api: EmblaCarouselType | undefined) => void;
+}
+/** A swipeable/keyboard-navigable carousel built on Embla. */
+declare const Carousel: React.ForwardRefExoticComponent<CarouselProps & React.RefAttributes<HTMLDivElement>>;
+type CarouselContentProps = React.HTMLAttributes<HTMLDivElement>;
+/** The scrolling viewport holding {@link CarouselItem}s. */
+declare const CarouselContent: React.ForwardRefExoticComponent<CarouselContentProps & React.RefAttributes<HTMLDivElement>>;
+type CarouselItemProps = React.HTMLAttributes<HTMLDivElement>;
+/** A single slide. */
+declare const CarouselItem: React.ForwardRefExoticComponent<CarouselItemProps & React.RefAttributes<HTMLDivElement>>;
+/** Scrolls to the previous slide. */
+declare const CarouselPrevious: React.ForwardRefExoticComponent<React.ButtonHTMLAttributes<HTMLButtonElement> & React.RefAttributes<HTMLButtonElement>>;
+/** Scrolls to the next slide. */
+declare const CarouselNext: React.ForwardRefExoticComponent<React.ButtonHTMLAttributes<HTMLButtonElement> & React.RefAttributes<HTMLButtonElement>>;
+
+export { Carousel, CarouselContent, type CarouselContentProps, CarouselItem, type CarouselItemProps, CarouselNext, CarouselPrevious, type CarouselProps };

package/dist/index.js

@@ -0,0 +1,156 @@
+"use client";
+import * as React from 'react';
+import { ArrowLeft, ArrowRight } from 'lucide-react';
+import useEmblaCarousel from 'embla-carousel-react';
+import { cn } from '@nucleux/utils';
+import { jsx } from 'react/jsx-runtime';
+
+// src/index.tsx
+var CarouselContext = React.createContext(null);
+var useCarousel = (component) => {
+  const ctx = React.useContext(CarouselContext);
+  if (!ctx) throw new Error(`${component} must be used within a Carousel`);
+  return ctx;
+};
+var Carousel = React.forwardRef(
+  ({ orientation = "horizontal", opts, setApi, className, children, ...props }, ref) => {
+    const [carouselRef, api] = useEmblaCarousel({
+      ...opts,
+      axis: orientation === "horizontal" ? "x" : "y"
+    });
+    const [canScrollPrev, setCanScrollPrev] = React.useState(false);
+    const [canScrollNext, setCanScrollNext] = React.useState(false);
+    const onSelect = React.useCallback((embla) => {
+      setCanScrollPrev(embla.canScrollPrev());
+      setCanScrollNext(embla.canScrollNext());
+    }, []);
+    const scrollPrev = React.useCallback(() => api?.scrollPrev(), [api]);
+    const scrollNext = React.useCallback(() => api?.scrollNext(), [api]);
+    React.useEffect(() => {
+      if (!api) return;
+      setApi?.(api);
+      onSelect(api);
+      api.on("reInit", onSelect);
+      api.on("select", onSelect);
+      return () => {
+        api.off("reInit", onSelect);
+        api.off("select", onSelect);
+      };
+    }, [api, setApi, onSelect]);
+    const handleKeyDown = (e) => {
+      if (e.key === "ArrowLeft") {
+        e.preventDefault();
+        scrollPrev();
+      } else if (e.key === "ArrowRight") {
+        e.preventDefault();
+        scrollNext();
+      }
+    };
+    return /* @__PURE__ */ jsx(
+      CarouselContext.Provider,
+      {
+        value: { carouselRef, api, orientation, scrollPrev, scrollNext, canScrollPrev, canScrollNext },
+        children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            ref,
+            role: "region",
+            "aria-roledescription": "carousel",
+            onKeyDownCapture: handleKeyDown,
+            className: cn("relative", className),
+            ...props,
+            children
+          }
+        )
+      }
+    );
+  }
+);
+Carousel.displayName = "Carousel";
+var CarouselContent = React.forwardRef(
+  ({ className, ...props }, ref) => {
+    const { carouselRef, orientation } = useCarousel("CarouselContent");
+    return /* @__PURE__ */ jsx("div", { ref: carouselRef, className: "overflow-hidden", children: /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: cn("flex", orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col", className),
+        ...props
+      }
+    ) });
+  }
+);
+CarouselContent.displayName = "CarouselContent";
+var CarouselItem = React.forwardRef(
+  ({ className, ...props }, ref) => {
+    const { orientation } = useCarousel("CarouselItem");
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        role: "group",
+        "aria-roledescription": "slide",
+        className: cn(
+          "min-w-0 shrink-0 grow-0 basis-full",
+          orientation === "horizontal" ? "pl-4" : "pt-4",
+          className
+        ),
+        ...props
+      }
+    );
+  }
+);
+CarouselItem.displayName = "CarouselItem";
+var navBase = "inline-flex h-8 w-8 items-center justify-center rounded-full border border-input bg-background text-foreground shadow-sm transition-colors hover:bg-accent disabled:pointer-events-none disabled:opacity-40 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring";
+var CarouselPrevious = React.forwardRef(
+  ({ className, ...props }, ref) => {
+    const { scrollPrev, canScrollPrev, orientation } = useCarousel("CarouselPrevious");
+    return /* @__PURE__ */ jsx(
+      "button",
+      {
+        ref,
+        type: "button",
+        "aria-label": "Previous slide",
+        disabled: !canScrollPrev,
+        onClick: scrollPrev,
+        className: cn(
+          navBase,
+          "absolute",
+          orientation === "horizontal" ? "-left-4 top-1/2 -translate-y-1/2" : "-top-4 left-1/2 -translate-x-1/2 rotate-90",
+          className
+        ),
+        ...props,
+        children: /* @__PURE__ */ jsx(ArrowLeft, { className: "h-4 w-4" })
+      }
+    );
+  }
+);
+CarouselPrevious.displayName = "CarouselPrevious";
+var CarouselNext = React.forwardRef(
+  ({ className, ...props }, ref) => {
+    const { scrollNext, canScrollNext, orientation } = useCarousel("CarouselNext");
+    return /* @__PURE__ */ jsx(
+      "button",
+      {
+        ref,
+        type: "button",
+        "aria-label": "Next slide",
+        disabled: !canScrollNext,
+        onClick: scrollNext,
+        className: cn(
+          navBase,
+          "absolute",
+          orientation === "horizontal" ? "-right-4 top-1/2 -translate-y-1/2" : "-bottom-4 left-1/2 -translate-x-1/2 rotate-90",
+          className
+        ),
+        ...props,
+        children: /* @__PURE__ */ jsx(ArrowRight, { className: "h-4 w-4" })
+      }
+    );
+  }
+);
+CarouselNext.displayName = "CarouselNext";
+
+export { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.tsx"],"names":[],"mappings":"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","file":"index.js","sourcesContent":["import * as React from \"react\";\nimport { ArrowLeft, ArrowRight } from \"lucide-react\";\nimport useEmblaCarousel from \"embla-carousel-react\";\nimport type { EmblaCarouselType, EmblaOptionsType } from \"embla-carousel\";\nimport { cn } from \"@nucleux/utils\";\n\ntype Orientation = \"horizontal\" | \"vertical\";\n\ninterface CarouselContextValue {\n  carouselRef: ReturnType<typeof useEmblaCarousel>[0];\n  api: EmblaCarouselType | undefined;\n  orientation: Orientation;\n  scrollPrev: () => void;\n  scrollNext: () => void;\n  canScrollPrev: boolean;\n  canScrollNext: boolean;\n}\n\nconst CarouselContext = React.createContext<CarouselContextValue | null>(null);\nconst useCarousel = (component: string) => {\n  const ctx = React.useContext(CarouselContext);\n  if (!ctx) throw new Error(`${component} must be used within a Carousel`);\n  return ctx;\n};\n\nexport interface CarouselProps extends React.HTMLAttributes<HTMLDivElement> {\n  orientation?: Orientation;\n  opts?: EmblaOptionsType;\n  /** Receive the Embla API instance once ready. */\n  setApi?: (api: EmblaCarouselType | undefined) => void;\n}\n\n/** A swipeable/keyboard-navigable carousel built on Embla. */\nexport const Carousel = React.forwardRef<HTMLDivElement, CarouselProps>(\n  ({ orientation = \"horizontal\", opts, setApi, className, children, ...props }, ref) => {\n    const [carouselRef, api] = useEmblaCarousel({\n      ...opts,\n      axis: orientation === \"horizontal\" ? \"x\" : \"y\",\n    });\n    const [canScrollPrev, setCanScrollPrev] = React.useState(false);\n    const [canScrollNext, setCanScrollNext] = React.useState(false);\n\n    const onSelect = React.useCallback((embla: EmblaCarouselType) => {\n      setCanScrollPrev(embla.canScrollPrev());\n      setCanScrollNext(embla.canScrollNext());\n    }, []);\n\n    const scrollPrev = React.useCallback(() => api?.scrollPrev(), [api]);\n    const scrollNext = React.useCallback(() => api?.scrollNext(), [api]);\n\n    React.useEffect(() => {\n      if (!api) return;\n      setApi?.(api);\n      onSelect(api);\n      api.on(\"reInit\", onSelect);\n      api.on(\"select\", onSelect);\n      return () => {\n        api.off(\"reInit\", onSelect);\n        api.off(\"select\", onSelect);\n      };\n    }, [api, setApi, onSelect]);\n\n    const handleKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {\n      if (e.key === \"ArrowLeft\") {\n        e.preventDefault();\n        scrollPrev();\n      } else if (e.key === \"ArrowRight\") {\n        e.preventDefault();\n        scrollNext();\n      }\n    };\n\n    return (\n      <CarouselContext.Provider\n        value={{ carouselRef, api, orientation, scrollPrev, scrollNext, canScrollPrev, canScrollNext }}\n      >\n        <div\n          ref={ref}\n          role=\"region\"\n          aria-roledescription=\"carousel\"\n          onKeyDownCapture={handleKeyDown}\n          className={cn(\"relative\", className)}\n          {...props}\n        >\n          {children}\n        </div>\n      </CarouselContext.Provider>\n    );\n  },\n);\nCarousel.displayName = \"Carousel\";\n\nexport type CarouselContentProps = React.HTMLAttributes<HTMLDivElement>;\n\n/** The scrolling viewport holding {@link CarouselItem}s. */\nexport const CarouselContent = React.forwardRef<HTMLDivElement, CarouselContentProps>(\n  ({ className, ...props }, ref) => {\n    const { carouselRef, orientation } = useCarousel(\"CarouselContent\");\n    return (\n      <div ref={carouselRef} className=\"overflow-hidden\">\n        <div\n          ref={ref}\n          className={cn(\"flex\", orientation === \"horizontal\" ? \"-ml-4\" : \"-mt-4 flex-col\", className)}\n          {...props}\n        />\n      </div>\n    );\n  },\n);\nCarouselContent.displayName = \"CarouselContent\";\n\nexport type CarouselItemProps = React.HTMLAttributes<HTMLDivElement>;\n\n/** A single slide. */\nexport const CarouselItem = React.forwardRef<HTMLDivElement, CarouselItemProps>(\n  ({ className, ...props }, ref) => {\n    const { orientation } = useCarousel(\"CarouselItem\");\n    return (\n      <div\n        ref={ref}\n        role=\"group\"\n        aria-roledescription=\"slide\"\n        className={cn(\n          \"min-w-0 shrink-0 grow-0 basis-full\",\n          orientation === \"horizontal\" ? \"pl-4\" : \"pt-4\",\n          className,\n        )}\n        {...props}\n      />\n    );\n  },\n);\nCarouselItem.displayName = \"CarouselItem\";\n\nconst navBase =\n  \"inline-flex h-8 w-8 items-center justify-center rounded-full border border-input bg-background text-foreground shadow-sm transition-colors hover:bg-accent disabled:pointer-events-none disabled:opacity-40 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\";\n\n/** Scrolls to the previous slide. */\nexport const CarouselPrevious = React.forwardRef<HTMLButtonElement, React.ButtonHTMLAttributes<HTMLButtonElement>>(\n  ({ className, ...props }, ref) => {\n    const { scrollPrev, canScrollPrev, orientation } = useCarousel(\"CarouselPrevious\");\n    return (\n      <button\n        ref={ref}\n        type=\"button\"\n        aria-label=\"Previous slide\"\n        disabled={!canScrollPrev}\n        onClick={scrollPrev}\n        className={cn(\n          navBase,\n          \"absolute\",\n          orientation === \"horizontal\"\n            ? \"-left-4 top-1/2 -translate-y-1/2\"\n            : \"-top-4 left-1/2 -translate-x-1/2 rotate-90\",\n          className,\n        )}\n        {...props}\n      >\n        <ArrowLeft className=\"h-4 w-4\" />\n      </button>\n    );\n  },\n);\nCarouselPrevious.displayName = \"CarouselPrevious\";\n\n/** Scrolls to the next slide. */\nexport const CarouselNext = React.forwardRef<HTMLButtonElement, React.ButtonHTMLAttributes<HTMLButtonElement>>(\n  ({ className, ...props }, ref) => {\n    const { scrollNext, canScrollNext, orientation } = useCarousel(\"CarouselNext\");\n    return (\n      <button\n        ref={ref}\n        type=\"button\"\n        aria-label=\"Next slide\"\n        disabled={!canScrollNext}\n        onClick={scrollNext}\n        className={cn(\n          navBase,\n          \"absolute\",\n          orientation === \"horizontal\"\n            ? \"-right-4 top-1/2 -translate-y-1/2\"\n            : \"-bottom-4 left-1/2 -translate-x-1/2 rotate-90\",\n          className,\n        )}\n        {...props}\n      >\n        <ArrowRight className=\"h-4 w-4\" />\n      </button>\n    );\n  },\n);\nCarouselNext.displayName = \"CarouselNext\";\n"]}

package/package.json

@@ -0,0 +1,60 @@
+{
+  "name": "@nucleux/carousel",
+  "version": "0.2.0",
+  "type": "module",
+  "sideEffects": false,
+  "description": "Swipeable content carousel — Nucleux agentic UI for React.",
+  "keywords": [
+    "nucleux",
+    "react",
+    "ui",
+    "components",
+    "agentic",
+    "ai",
+    "tailwind",
+    "carousel"
+  ],
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "peerDependencies": {
+    "react": ">=18",
+    "react-dom": ">=18"
+  },
+  "dependencies": {
+    "lucide-react": "^0.469.0",
+    "embla-carousel-react": "^8.5.1",
+    "embla-carousel": "^8.5.1",
+    "@nucleux/utils": "0.2.0"
+  },
+  "devDependencies": {
+    "tsup": "^8.3.5",
+    "typescript": "^5.7.2",
+    "@types/react": "^18.3.18",
+    "react": "^18.3.1"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/intelligaia-open-labs/nucleux.git",
+    "directory": "packages/carousel"
+  },
+  "homepage": "https://github.com/intelligaia-open-labs/nucleux#readme",
+  "scripts": {
+    "build": "tsup"
+  }
+}