@nexus-cross/design-system 1.0.0

package/dist/chunks/chunk-QZ4QR3XV.mjs

@@ -0,0 +1,142 @@
+import { cn } from './chunk-MCKOWMLS.mjs';
+import * as React from 'react';
+import { cva } from 'class-variance-authority';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var tabListVariants = cva("nexus-tab-list", {
+  variants: {
+    variant: {
+      line: "",
+      pill: "nexus-tab-list--pill"
+    }
+  },
+  defaultVariants: { variant: "line" }
+});
+var tabTriggerVariants = cva("nexus-tab-trigger", {
+  variants: {
+    variant: {
+      line: "nexus-tab-trigger--line",
+      pill: "nexus-tab-trigger--pill"
+    },
+    size: {
+      sm: "nexus-tab-trigger--sm",
+      md: "nexus-tab-trigger--md"
+    },
+    active: {
+      true: "",
+      false: ""
+    }
+  },
+  compoundVariants: [
+    { variant: "line", active: true, className: "nexus-tab-trigger--line-active" },
+    { variant: "pill", active: true, className: "nexus-tab-trigger--pill-active" }
+  ],
+  defaultVariants: { variant: "line", size: "md", active: false }
+});
+function Tab({
+  items,
+  activeKey: controlledKey,
+  defaultActiveKey,
+  variant,
+  size,
+  destroyInactive = false,
+  onTabChange,
+  className,
+  tabListClassName,
+  tabPanelClassName
+}) {
+  const [internalKey, setInternalKey] = React.useState(
+    defaultActiveKey ?? items[0]?.key ?? ""
+  );
+  const currentKey = controlledKey ?? internalKey;
+  const handleSelect = React.useCallback(
+    (key) => {
+      if (controlledKey === void 0) setInternalKey(key);
+      onTabChange?.(key);
+    },
+    [controlledKey, onTabChange]
+  );
+  const handleKeyDown = React.useCallback(
+    (e, index) => {
+      const enabledItems = items.filter((i) => !i.disabled);
+      const currentIdx = enabledItems.findIndex((i) => i.key === items[index].key);
+      let nextIdx = currentIdx;
+      if (e.key === "ArrowRight") nextIdx = (currentIdx + 1) % enabledItems.length;
+      if (e.key === "ArrowLeft") nextIdx = (currentIdx - 1 + enabledItems.length) % enabledItems.length;
+      if (e.key === "Home") nextIdx = 0;
+      if (e.key === "End") nextIdx = enabledItems.length - 1;
+      if (nextIdx !== currentIdx) {
+        e.preventDefault();
+        const next = enabledItems[nextIdx];
+        handleSelect(next.key);
+        const btn = e.currentTarget.parentElement?.querySelector(
+          `[data-tab-key="${next.key}"]`
+        );
+        btn?.focus();
+      }
+    },
+    [items, handleSelect]
+  );
+  const activeItem = items.find((i) => i.key === currentKey);
+  return /* @__PURE__ */ jsxs("div", { className, children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        role: "tablist",
+        className: cn(tabListVariants({ variant }), tabListClassName),
+        children: items.map((item, i) => /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            role: "tab",
+            "data-tab-key": item.key,
+            id: `tab-${item.key}`,
+            "aria-selected": item.key === currentKey,
+            "aria-controls": `panel-${item.key}`,
+            "aria-disabled": item.disabled || void 0,
+            tabIndex: item.key === currentKey ? 0 : -1,
+            className: cn(
+              tabTriggerVariants({
+                variant,
+                size,
+                active: item.key === currentKey
+              }),
+              item.disabled && "nexus-tab-trigger--disabled"
+            ),
+            onClick: () => !item.disabled && handleSelect(item.key),
+            onKeyDown: (e) => handleKeyDown(e, i),
+            children: item.label
+          },
+          item.key
+        ))
+      }
+    ),
+    destroyInactive ? activeItem?.children !== void 0 && /* @__PURE__ */ jsx(
+      "div",
+      {
+        role: "tabpanel",
+        id: `panel-${currentKey}`,
+        "aria-labelledby": `tab-${currentKey}`,
+        className: tabPanelClassName,
+        children: activeItem.children
+      },
+      currentKey
+    ) : items.map(
+      (item) => item.children !== void 0 ? /* @__PURE__ */ jsx(
+        "div",
+        {
+          role: "tabpanel",
+          id: `panel-${item.key}`,
+          "aria-labelledby": `tab-${item.key}`,
+          className: tabPanelClassName,
+          hidden: item.key !== currentKey,
+          children: item.children
+        },
+        item.key
+      ) : null
+    )
+  ] });
+}
+Tab.displayName = "Tab";
+
+export { Tab, tabListVariants, tabTriggerVariants };

package/dist/chunks/chunk-RS3SBY3I.js

@@ -0,0 +1,163 @@
+'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 paginationVariants = classVarianceAuthority.cva("nexus-pagination", {
+  variants: {
+    size: {
+      sm: "nexus-pagination--sm",
+      md: "nexus-pagination--md"
+    }
+  },
+  defaultVariants: { size: "md" }
+});
+var pageButtonVariants = classVarianceAuthority.cva("nexus-page-btn", {
+  variants: {
+    size: {
+      sm: "nexus-page-btn--sm",
+      md: "nexus-page-btn--md"
+    },
+    active: {
+      true: "nexus-page-btn--active",
+      false: "nexus-page-btn--inactive"
+    }
+  },
+  defaultVariants: { size: "md", active: false }
+});
+function generatePages(current, total, siblingCount) {
+  const totalNumbers = siblingCount * 2 + 5;
+  if (total <= totalNumbers) {
+    return Array.from({ length: total }, (_, i) => i + 1);
+  }
+  const leftSibling = Math.max(current - siblingCount, 1);
+  const rightSibling = Math.min(current + siblingCount, total);
+  const showLeftDots = leftSibling > 2;
+  const showRightDots = rightSibling < total - 1;
+  if (!showLeftDots && showRightDots) {
+    const leftCount = 3 + 2 * siblingCount;
+    const leftRange = Array.from({ length: leftCount }, (_, i) => i + 1);
+    return [...leftRange, "dots", total];
+  }
+  if (showLeftDots && !showRightDots) {
+    const rightCount = 3 + 2 * siblingCount;
+    const rightRange = Array.from({ length: rightCount }, (_, i) => total - rightCount + i + 1);
+    return [1, "dots", ...rightRange];
+  }
+  const middleRange = Array.from(
+    { length: rightSibling - leftSibling + 1 },
+    (_, i) => leftSibling + i
+  );
+  return [1, "dots", ...middleRange, "dots", total];
+}
+var ChevronsLeft = ({ className }) => /* @__PURE__ */ jsxRuntime.jsxs("svg", { className, viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+  /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M7 4L3 8l4 4" }),
+  /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M13 4L9 8l4 4" })
+] });
+var ChevronLeft = ({ className }) => /* @__PURE__ */ jsxRuntime.jsx("svg", { className, viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M10 4L6 8l4 4" }) });
+var ChevronRight = ({ className }) => /* @__PURE__ */ jsxRuntime.jsx("svg", { className, viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M6 4l4 4-4 4" }) });
+var ChevronsRight = ({ className }) => /* @__PURE__ */ jsxRuntime.jsxs("svg", { className, viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+  /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M3 4l4 4-4 4" }),
+  /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M9 4l4 4-4 4" })
+] });
+var Pagination = React__namespace.forwardRef(
+  ({ currentPage, totalPages, siblingCount = 1, showEdges = false, onPageChange, size, className }, ref) => {
+    const pages = generatePages(currentPage, totalPages, siblingCount);
+    const iconSize = size === "sm" ? "nexus-page-icon--sm" : "nexus-page-icon--md";
+    return /* @__PURE__ */ jsxRuntime.jsxs("nav", { ref, role: "navigation", "aria-label": "pagination", className: chunkCZC76ZD5_js.cn(paginationVariants({ size }), className), children: [
+      showEdges && /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          type: "button",
+          className: chunkCZC76ZD5_js.cn(pageButtonVariants({ size, active: false })),
+          disabled: currentPage <= 1,
+          onClick: () => onPageChange(1),
+          "aria-label": "First page",
+          children: /* @__PURE__ */ jsxRuntime.jsx(ChevronsLeft, { className: iconSize })
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          type: "button",
+          className: chunkCZC76ZD5_js.cn(pageButtonVariants({ size, active: false })),
+          disabled: currentPage <= 1,
+          onClick: () => onPageChange(currentPage - 1),
+          "aria-label": "Previous page",
+          children: /* @__PURE__ */ jsxRuntime.jsx(ChevronLeft, { className: iconSize })
+        }
+      ),
+      pages.map(
+        (page, i) => page === "dots" ? /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            className: chunkCZC76ZD5_js.cn(pageButtonVariants({ size, active: false })),
+            style: { pointerEvents: "none" },
+            children: "\xB7\xB7\xB7"
+          },
+          `dots-${i}`
+        ) : /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            className: chunkCZC76ZD5_js.cn(pageButtonVariants({ size, active: page === currentPage })),
+            onClick: () => onPageChange(page),
+            "aria-current": page === currentPage ? "page" : void 0,
+            "aria-label": `Page ${page}`,
+            children: page
+          },
+          page
+        )
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          type: "button",
+          className: chunkCZC76ZD5_js.cn(pageButtonVariants({ size, active: false })),
+          disabled: currentPage >= totalPages,
+          onClick: () => onPageChange(currentPage + 1),
+          "aria-label": "Next page",
+          children: /* @__PURE__ */ jsxRuntime.jsx(ChevronRight, { className: iconSize })
+        }
+      ),
+      showEdges && /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          type: "button",
+          className: chunkCZC76ZD5_js.cn(pageButtonVariants({ size, active: false })),
+          disabled: currentPage >= totalPages,
+          onClick: () => onPageChange(totalPages),
+          "aria-label": "Last page",
+          children: /* @__PURE__ */ jsxRuntime.jsx(ChevronsRight, { className: iconSize })
+        }
+      )
+    ] });
+  }
+);
+Pagination.displayName = "Pagination";
+
+exports.Pagination = Pagination;
+exports.pageButtonVariants = pageButtonVariants;
+exports.paginationVariants = paginationVariants;

package/dist/chunks/chunk-RX5UKRYK.mjs

@@ -0,0 +1,76 @@
+import { cn } from './chunk-MCKOWMLS.mjs';
+import * as React from 'react';
+import { Slot } from '@radix-ui/react-slot';
+import { cva } from 'class-variance-authority';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var chipVariants = cva("nexus-chip", {
+  variants: {
+    variant: {
+      default: "nexus-chip--default",
+      filled: "nexus-chip--filled",
+      outline: "nexus-chip--outline",
+      accent: "nexus-chip--accent"
+    },
+    size: {
+      sm: "nexus-chip--sm",
+      md: "nexus-chip--md",
+      lg: "nexus-chip--lg"
+    }
+  },
+  defaultVariants: {
+    variant: "default",
+    size: "md"
+  }
+});
+var CloseIcon = ({ className }) => /* @__PURE__ */ jsx(
+  "svg",
+  {
+    className,
+    viewBox: "0 0 16 16",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    children: /* @__PURE__ */ jsx("path", { d: "M4 4l8 8M12 4l-8 8", strokeLinecap: "round" })
+  }
+);
+var Chip = React.forwardRef(
+  ({
+    className,
+    variant,
+    size,
+    asChild = false,
+    disabled,
+    children,
+    onClose,
+    ...props
+  }, ref) => {
+    const Comp = asChild ? Slot : "div";
+    return /* @__PURE__ */ jsxs(
+      Comp,
+      {
+        ref,
+        className: cn(chipVariants({ variant, size }), className),
+        "aria-disabled": disabled || void 0,
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx("span", { children }),
+          onClose && /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: "nexus-chip__close",
+              onClick: disabled ? void 0 : onClose,
+              disabled,
+              "aria-label": "Remove",
+              children: /* @__PURE__ */ jsx(CloseIcon, { className: "nexus-chip__close-icon" })
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+Chip.displayName = "Chip";
+
+export { Chip, chipVariants };

package/dist/chunks/chunk-SGNRVYYQ.mjs

@@ -0,0 +1,99 @@
+import { cn } from './chunk-MCKOWMLS.mjs';
+import * as React from 'react';
+import { Drawer as Drawer$1 } from 'vaul';
+import { cva } from 'class-variance-authority';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var DrawerDirectionCtx = React.createContext("bottom");
+var drawerOverlayVariants = cva("nexus-drawer-overlay", {
+  variants: {
+    blur: {
+      none: "",
+      sm: "nexus-drawer-overlay--blur-sm",
+      md: "nexus-drawer-overlay--blur-md"
+    }
+  },
+  defaultVariants: { blur: "none" }
+});
+var drawerContentVariants = cva("nexus-drawer-content", {
+  variants: {
+    direction: {
+      bottom: "nexus-drawer-content--bottom",
+      top: "nexus-drawer-content--top",
+      left: "nexus-drawer-content--left",
+      right: "nexus-drawer-content--right"
+    }
+  },
+  defaultVariants: { direction: "bottom" }
+});
+var DrawerRoot = ({ direction = "bottom", ...props }) => /* @__PURE__ */ jsx(DrawerDirectionCtx.Provider, { value: direction, children: /* @__PURE__ */ jsx(Drawer$1.Root, { shouldScaleBackground: false, direction, ...props }) });
+var DrawerTrigger = (props) => /* @__PURE__ */ jsx(Drawer$1.Trigger, { ...props });
+DrawerTrigger.displayName = "DrawerTrigger";
+var DrawerContent = React.forwardRef(
+  ({
+    className,
+    children,
+    direction: directionProp,
+    showHandle = true,
+    blur,
+    overlayClassName,
+    ...props
+  }, ref) => {
+    const ctxDirection = React.useContext(DrawerDirectionCtx);
+    const direction = directionProp ?? ctxDirection;
+    return /* @__PURE__ */ jsxs(Drawer$1.Portal, { children: [
+      /* @__PURE__ */ jsx(
+        Drawer$1.Overlay,
+        {
+          className: cn(drawerOverlayVariants({ blur }), overlayClassName)
+        }
+      ),
+      /* @__PURE__ */ jsxs(
+        Drawer$1.Content,
+        {
+          ref,
+          className: cn(drawerContentVariants({ direction }), className),
+          ...props,
+          children: [
+            showHandle && (direction === "bottom" || direction === "top") && /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: cn("nexus-drawer-handle", direction === "bottom" ? "nexus-drawer-handle--bottom" : "nexus-drawer-handle--top"),
+                children: /* @__PURE__ */ jsx("div", { className: "nexus-drawer-handle__bar" })
+              }
+            ),
+            children
+          ]
+        }
+      )
+    ] });
+  }
+);
+DrawerContent.displayName = "DrawerContent";
+var DrawerClose = (props) => /* @__PURE__ */ jsx(Drawer$1.Close, { ...props });
+DrawerClose.displayName = "DrawerClose";
+var DrawerTitle = ({ className, ...props }) => /* @__PURE__ */ jsx(
+  Drawer$1.Title,
+  {
+    className: cn("nexus-drawer-title", className),
+    ...props
+  }
+);
+DrawerTitle.displayName = "DrawerTitle";
+var DrawerDescription = ({ className, ...props }) => /* @__PURE__ */ jsx(
+  Drawer$1.Description,
+  {
+    className: cn("nexus-drawer-description", className),
+    ...props
+  }
+);
+DrawerDescription.displayName = "DrawerDescription";
+var Drawer = Object.assign(DrawerRoot, {
+  Trigger: DrawerTrigger,
+  Content: DrawerContent,
+  Close: DrawerClose,
+  Title: DrawerTitle,
+  Description: DrawerDescription
+});
+
+export { Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerRoot, DrawerTitle, DrawerTrigger, drawerContentVariants, drawerOverlayVariants };

package/dist/chunks/chunk-SJMCPSVH.mjs

@@ -0,0 +1,76 @@
+import { cn } from './chunk-MCKOWMLS.mjs';
+import * as React from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var Marquee = React.forwardRef(
+  ({ direction = "left", speed = 40, pauseOnHover = false, gap = 16, children, className, style, ...props }, ref) => {
+    const containerRef = React.useRef(null);
+    const [copies, setCopies] = React.useState(2);
+    const [prefersReducedMotion, setPrefersReducedMotion] = React.useState(false);
+    React.useEffect(() => {
+      const mq = window.matchMedia("(prefers-reduced-motion: reduce)");
+      setPrefersReducedMotion(mq.matches);
+      const handler = (e) => setPrefersReducedMotion(e.matches);
+      mq.addEventListener("change", handler);
+      return () => mq.removeEventListener("change", handler);
+    }, []);
+    const isHorizontal = direction === "left" || direction === "right";
+    const isReverse = direction === "right" || direction === "down";
+    React.useEffect(() => {
+      const container = containerRef.current;
+      if (!container) return;
+      const measure = () => {
+        const firstChild = container.firstElementChild;
+        if (!firstChild) return;
+        const containerSize = isHorizontal ? container.offsetWidth : container.offsetHeight;
+        const childSize = isHorizontal ? firstChild.offsetWidth : firstChild.offsetHeight;
+        if (childSize > 0) {
+          const needed = Math.ceil(containerSize / childSize) + 2;
+          setCopies(Math.max(2, needed));
+        }
+      };
+      measure();
+      const observer = new ResizeObserver(measure);
+      observer.observe(container);
+      return () => observer.disconnect();
+    }, [isHorizontal, children]);
+    const animationName = isHorizontal ? "nx-marquee-x" : "nx-marquee-y";
+    const translate = isHorizontal ? isReverse ? "translateX(0)" : "translateX(0)" : isReverse ? "translateY(0)" : "translateY(0)";
+    const endTranslate = isHorizontal ? `translateX(${isReverse ? "" : "-"}100%)` : `translateY(${isReverse ? "" : "-"}100%)`;
+    const innerStyle = {
+      display: "flex",
+      flexDirection: isHorizontal ? "row" : "column",
+      gap,
+      ...prefersReducedMotion ? {} : {
+        animation: `${animationName} ${speed}s linear infinite`,
+        ...isReverse ? { animationDirection: "reverse" } : {}
+      }
+    };
+    const keyframes = `
+      @keyframes ${animationName} {
+        from { transform: ${translate}; }
+        to { transform: ${endTranslate}; }
+      }
+    `;
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        className: cn(
+          "nexus-marquee",
+          pauseOnHover && "nexus-marquee--pause-on-hover",
+          className
+        ),
+        style,
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx("style", { children: keyframes }),
+          /* @__PURE__ */ jsx("div", { ref: containerRef, style: innerStyle, children: Array.from({ length: copies }, (_, i) => /* @__PURE__ */ jsx("div", { style: { display: "flex", flexDirection: isHorizontal ? "row" : "column", gap, flexShrink: 0 }, children }, i)) })
+        ]
+      }
+    );
+  }
+);
+Marquee.displayName = "Marquee";
+
+export { Marquee };

package/dist/chunks/chunk-T2IY2TSR.js

@@ -0,0 +1,43 @@
+'use strict';
+
+// src/utils/scroll.ts
+var hasWindow = () => typeof window !== "undefined";
+var scrollFreeze = () => {
+  if (!hasWindow()) return;
+  const body = document.body;
+  body.setAttribute(
+    "data-fz",
+    body.dataset.fz ? `${Number(body.dataset.fz) + 1}` : "1"
+  );
+  if (body.style.position !== "fixed") {
+    const scrollPosition = window.scrollY;
+    body.setAttribute("data-scroll-y", String(scrollPosition));
+  }
+  body.style.overflow = "hidden";
+  body.style.touchAction = "none";
+  body.style.position = "fixed";
+  body.style.top = `-${body.dataset.scrollY}px`;
+  body.style.left = "0";
+  body.style.width = "100%";
+};
+var scrollRelease = () => {
+  if (!hasWindow()) return;
+  const body = document.body;
+  if (body.dataset.fz && Number(body.dataset.fz) > 1) {
+    body.setAttribute("data-fz", `${Number(body.dataset.fz) - 1}`);
+  } else {
+    body.removeAttribute("data-fz");
+    body.style.position = "";
+    body.style.top = "";
+    body.style.left = "";
+    body.style.width = "";
+    body.style.overflow = "";
+    body.style.paddingRight = "";
+    body.style.backgroundColor = "";
+    body.style.touchAction = "";
+    window.scrollTo(0, Number(body.dataset.scrollY));
+  }
+};
+
+exports.scrollFreeze = scrollFreeze;
+exports.scrollRelease = scrollRelease;