@nexus-cross/design-system 1.0.0

package/dist/chunks/chunk-3HHJORN7.mjs

@@ -0,0 +1,137 @@
+import { cn } from './chunk-MCKOWMLS.mjs';
+import * as React from 'react';
+import useEmblaCarousel from 'embla-carousel-react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var CarouselContext = React.createContext(null);
+function useCarousel() {
+  const ctx = React.useContext(CarouselContext);
+  if (!ctx) throw new Error("useCarousel must be used within <Carousel>");
+  return ctx;
+}
+var Carousel = React.forwardRef(
+  ({ opts, plugins, onApiChange, className, children, ...props }, ref) => {
+    const [emblaRef, api] = useEmblaCarousel(
+      { loop: false, ...opts },
+      plugins
+    );
+    const [canScrollPrev, setCanScrollPrev] = React.useState(false);
+    const [canScrollNext, setCanScrollNext] = React.useState(false);
+    const [selectedIndex, setSelectedIndex] = React.useState(0);
+    const [scrollSnapCount, setScrollSnapCount] = React.useState(0);
+    const onSelect = React.useCallback(() => {
+      if (!api) return;
+      setCanScrollPrev(api.canScrollPrev());
+      setCanScrollNext(api.canScrollNext());
+      setSelectedIndex(api.selectedScrollSnap());
+    }, [api]);
+    React.useEffect(() => {
+      if (!api) return;
+      setScrollSnapCount(api.scrollSnapList().length);
+      onSelect();
+      api.on("reInit", onSelect);
+      api.on("select", onSelect);
+      onApiChange?.(api);
+      return () => {
+        api.off("reInit", onSelect);
+        api.off("select", onSelect);
+      };
+    }, [api, onSelect, onApiChange]);
+    const scrollPrev = React.useCallback(() => api?.scrollPrev(), [api]);
+    const scrollNext = React.useCallback(() => api?.scrollNext(), [api]);
+    const slides = [];
+    const extras = [];
+    React.Children.forEach(children, (child) => {
+      if (React.isValidElement(child) && typeof child.type !== "string" && child.type.displayName === "CarouselSlide") {
+        slides.push(child);
+      } else {
+        extras.push(child);
+      }
+    });
+    return /* @__PURE__ */ jsx(
+      CarouselContext.Provider,
+      {
+        value: { api, canScrollPrev, canScrollNext, scrollPrev, scrollNext, selectedIndex, scrollSnapCount },
+        children: /* @__PURE__ */ jsxs("div", { ref, className: cn("nexus-carousel", className), role: "region", "aria-roledescription": "carousel", "aria-label": props["aria-label"] ?? "Carousel", ...props, children: [
+          /* @__PURE__ */ jsx("div", { ref: emblaRef, className: "nexus-carousel__viewport", children: /* @__PURE__ */ jsx("div", { className: "nexus-carousel__container", children: slides }) }),
+          extras
+        ] })
+      }
+    );
+  }
+);
+Carousel.displayName = "Carousel";
+var CarouselSlide = React.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      role: "group",
+      "aria-roledescription": "slide",
+      className: cn("nexus-carousel-slide", className),
+      ...props
+    }
+  )
+);
+CarouselSlide.displayName = "CarouselSlide";
+var ChevronLeftIcon = () => /* @__PURE__ */ jsx("svg", { className: "nexus-carousel-btn__icon", viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx("path", { d: "M10 4L6 8l4 4" }) });
+var ChevronRightIcon = () => /* @__PURE__ */ jsx("svg", { className: "nexus-carousel-btn__icon", viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx("path", { d: "M6 4l4 4-4 4" }) });
+var CarouselPrev = React.forwardRef(
+  ({ className, children, ...props }, ref) => {
+    const { canScrollPrev, scrollPrev } = useCarousel();
+    return /* @__PURE__ */ jsx(
+      "button",
+      {
+        ref,
+        type: "button",
+        className: cn("nexus-carousel-btn nexus-carousel-btn--prev", className),
+        disabled: !canScrollPrev,
+        onClick: scrollPrev,
+        "aria-label": "Previous slide",
+        ...props,
+        children: children ?? /* @__PURE__ */ jsx(ChevronLeftIcon, {})
+      }
+    );
+  }
+);
+CarouselPrev.displayName = "CarouselPrev";
+var CarouselNext = React.forwardRef(
+  ({ className, children, ...props }, ref) => {
+    const { canScrollNext, scrollNext } = useCarousel();
+    return /* @__PURE__ */ jsx(
+      "button",
+      {
+        ref,
+        type: "button",
+        className: cn("nexus-carousel-btn nexus-carousel-btn--next", className),
+        disabled: !canScrollNext,
+        onClick: scrollNext,
+        "aria-label": "Next slide",
+        ...props,
+        children: children ?? /* @__PURE__ */ jsx(ChevronRightIcon, {})
+      }
+    );
+  }
+);
+CarouselNext.displayName = "CarouselNext";
+function CarouselDots({ className }) {
+  const { selectedIndex, scrollSnapCount, api } = useCarousel();
+  return /* @__PURE__ */ jsx("div", { role: "tablist", "aria-label": "Slide navigation", className: cn("nexus-carousel-dots", className), children: Array.from({ length: scrollSnapCount }, (_, i) => /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      role: "tab",
+      "aria-selected": i === selectedIndex,
+      className: cn(
+        "nexus-carousel-dot",
+        i === selectedIndex ? "nexus-carousel-dot--active" : "nexus-carousel-dot--inactive"
+      ),
+      onClick: () => api?.scrollTo(i),
+      "aria-label": `Go to slide ${i + 1}`
+    },
+    i
+  )) });
+}
+CarouselDots.displayName = "CarouselDots";
+
+export { Carousel, CarouselDots, CarouselNext, CarouselPrev, CarouselSlide, useCarousel };

package/dist/chunks/chunk-3PCNRCTB.js

@@ -0,0 +1,61 @@
+'use strict';
+
+var chunkCZC76ZD5_js = require('./chunk-CZC76ZD5.js');
+var React = require('react');
+var classVarianceAuthority = require('class-variance-authority');
+var jsxRuntime = require('react/jsx-runtime');
+
+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 dividerVariants = classVarianceAuthority.cva("nexus-divider", {
+  variants: {
+    orientation: {
+      horizontal: "nexus-divider--horizontal",
+      vertical: "nexus-divider--vertical"
+    },
+    variant: {
+      solid: "nexus-divider--solid",
+      dashed: "nexus-divider--dashed",
+      dotted: "nexus-divider--dotted"
+    }
+  },
+  defaultVariants: {
+    orientation: "horizontal",
+    variant: "solid"
+  }
+});
+var Divider = React__namespace.forwardRef(
+  ({ className, orientation, variant, color, style, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ref,
+      role: "separator",
+      "aria-orientation": orientation ?? "horizontal",
+      className: chunkCZC76ZD5_js.cn(dividerVariants({ orientation, variant }), className),
+      style: { ...style, ...color ? { borderColor: color } : {} },
+      ...props
+    }
+  )
+);
+Divider.displayName = "Divider";
+
+exports.Divider = Divider;
+exports.dividerVariants = dividerVariants;