@nexus-cross/design-system 1.0.0

package/dist/chunks/chunk-26BUGBOY.mjs

@@ -0,0 +1,57 @@
+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 textAreaVariants = cva("nexus-textarea", {
+  variants: {
+    state: {
+      default: "nexus-textarea--default",
+      error: "nexus-textarea--error"
+    }
+  },
+  defaultVariants: { state: "default" }
+});
+var TextArea = React.forwardRef(
+  ({ className, error, showCount, maxLength, onValueChange, onChange, ...props }, ref) => {
+    const state = error ? "error" : "default";
+    const [count, setCount] = React.useState(0);
+    const handleChange = React.useCallback(
+      (e) => {
+        setCount(e.target.value.length);
+        onValueChange?.(e.target.value);
+        onChange?.(e);
+      },
+      [onValueChange, onChange]
+    );
+    return /* @__PURE__ */ jsxs("div", { className: "nexus-textarea-wrap", children: [
+      /* @__PURE__ */ jsx(
+        "textarea",
+        {
+          ref,
+          className: cn(textAreaVariants({ state }), className),
+          maxLength,
+          "aria-invalid": error || void 0,
+          onChange: handleChange,
+          ...props
+        }
+      ),
+      showCount && maxLength && /* @__PURE__ */ jsxs(
+        "p",
+        {
+          className: "nexus-textarea-count",
+          "aria-live": "polite",
+          "aria-atomic": "true",
+          children: [
+            /* @__PURE__ */ jsx("span", { className: "nexus-textarea-count__current", children: count.toLocaleString() }),
+            "/",
+            maxLength.toLocaleString()
+          ]
+        }
+      )
+    ] });
+  }
+);
+TextArea.displayName = "TextArea";
+
+export { TextArea, textAreaVariants };

package/dist/chunks/chunk-2JTPRBHZ.mjs

@@ -0,0 +1,36 @@
+import { useState, useRef, useCallback } from 'react';
+
+// src/hooks/useInView.ts
+function useInView(options) {
+  const { triggerOnce = true, rootMargin = "200px", threshold = 0 } = options ?? {};
+  const [isInView, setIsInView] = useState(false);
+  const observerRef = useRef(null);
+  const ref = useCallback(
+    (node) => {
+      if (observerRef.current) {
+        observerRef.current.disconnect();
+        observerRef.current = null;
+      }
+      if (!node) return;
+      if (triggerOnce && isInView) return;
+      const observer = new IntersectionObserver(
+        ([entry]) => {
+          if (entry.isIntersecting) {
+            setIsInView(true);
+            if (triggerOnce) observer.disconnect();
+          } else if (!triggerOnce) {
+            setIsInView(false);
+          }
+        },
+        { rootMargin, threshold }
+      );
+      observer.observe(node);
+      observerRef.current = observer;
+    },
+    [triggerOnce, rootMargin, threshold, isInView]
+  );
+  return { ref, isInView };
+}
+var useInView_default = useInView;
+
+export { useInView, useInView_default };

package/dist/chunks/chunk-2MC7XJSE.js

@@ -0,0 +1,98 @@
+'use strict';
+
+var chunkCZC76ZD5_js = require('./chunk-CZC76ZD5.js');
+var React = require('react');
+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 Marquee = React__namespace.forwardRef(
+  ({ direction = "left", speed = 40, pauseOnHover = false, gap = 16, children, className, style, ...props }, ref) => {
+    const containerRef = React__namespace.useRef(null);
+    const [copies, setCopies] = React__namespace.useState(2);
+    const [prefersReducedMotion, setPrefersReducedMotion] = React__namespace.useState(false);
+    React__namespace.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__namespace.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__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        ref,
+        className: chunkCZC76ZD5_js.cn(
+          "nexus-marquee",
+          pauseOnHover && "nexus-marquee--pause-on-hover",
+          className
+        ),
+        style,
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("style", { children: keyframes }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { ref: containerRef, style: innerStyle, children: Array.from({ length: copies }, (_, i) => /* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "flex", flexDirection: isHorizontal ? "row" : "column", gap, flexShrink: 0 }, children }, i)) })
+        ]
+      }
+    );
+  }
+);
+Marquee.displayName = "Marquee";
+
+exports.Marquee = Marquee;

package/dist/chunks/chunk-2RPRCWKV.mjs

@@ -0,0 +1,139 @@
+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 paginationVariants = cva("nexus-pagination", {
+  variants: {
+    size: {
+      sm: "nexus-pagination--sm",
+      md: "nexus-pagination--md"
+    }
+  },
+  defaultVariants: { size: "md" }
+});
+var pageButtonVariants = 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__ */ jsxs("svg", { className, viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+  /* @__PURE__ */ jsx("path", { d: "M7 4L3 8l4 4" }),
+  /* @__PURE__ */ jsx("path", { d: "M13 4L9 8l4 4" })
+] });
+var ChevronLeft = ({ className }) => /* @__PURE__ */ jsx("svg", { className, 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 ChevronRight = ({ className }) => /* @__PURE__ */ jsx("svg", { className, 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 ChevronsRight = ({ className }) => /* @__PURE__ */ jsxs("svg", { className, viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+  /* @__PURE__ */ jsx("path", { d: "M3 4l4 4-4 4" }),
+  /* @__PURE__ */ jsx("path", { d: "M9 4l4 4-4 4" })
+] });
+var Pagination = React.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__ */ jsxs("nav", { ref, role: "navigation", "aria-label": "pagination", className: cn(paginationVariants({ size }), className), children: [
+      showEdges && /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: cn(pageButtonVariants({ size, active: false })),
+          disabled: currentPage <= 1,
+          onClick: () => onPageChange(1),
+          "aria-label": "First page",
+          children: /* @__PURE__ */ jsx(ChevronsLeft, { className: iconSize })
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: cn(pageButtonVariants({ size, active: false })),
+          disabled: currentPage <= 1,
+          onClick: () => onPageChange(currentPage - 1),
+          "aria-label": "Previous page",
+          children: /* @__PURE__ */ jsx(ChevronLeft, { className: iconSize })
+        }
+      ),
+      pages.map(
+        (page, i) => page === "dots" ? /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: cn(pageButtonVariants({ size, active: false })),
+            style: { pointerEvents: "none" },
+            children: "\xB7\xB7\xB7"
+          },
+          `dots-${i}`
+        ) : /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: cn(pageButtonVariants({ size, active: page === currentPage })),
+            onClick: () => onPageChange(page),
+            "aria-current": page === currentPage ? "page" : void 0,
+            "aria-label": `Page ${page}`,
+            children: page
+          },
+          page
+        )
+      ),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: cn(pageButtonVariants({ size, active: false })),
+          disabled: currentPage >= totalPages,
+          onClick: () => onPageChange(currentPage + 1),
+          "aria-label": "Next page",
+          children: /* @__PURE__ */ jsx(ChevronRight, { className: iconSize })
+        }
+      ),
+      showEdges && /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: cn(pageButtonVariants({ size, active: false })),
+          disabled: currentPage >= totalPages,
+          onClick: () => onPageChange(totalPages),
+          "aria-label": "Last page",
+          children: /* @__PURE__ */ jsx(ChevronsRight, { className: iconSize })
+        }
+      )
+    ] });
+  }
+);
+Pagination.displayName = "Pagination";
+
+export { Pagination, pageButtonVariants, paginationVariants };

package/dist/chunks/chunk-2ZXDXO4I.js

@@ -0,0 +1,166 @@
+'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 tabListVariants = classVarianceAuthority.cva("nexus-tab-list", {
+  variants: {
+    variant: {
+      line: "",
+      pill: "nexus-tab-list--pill"
+    }
+  },
+  defaultVariants: { variant: "line" }
+});
+var tabTriggerVariants = classVarianceAuthority.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__namespace.useState(
+    defaultActiveKey ?? items[0]?.key ?? ""
+  );
+  const currentKey = controlledKey ?? internalKey;
+  const handleSelect = React__namespace.useCallback(
+    (key) => {
+      if (controlledKey === void 0) setInternalKey(key);
+      onTabChange?.(key);
+    },
+    [controlledKey, onTabChange]
+  );
+  const handleKeyDown = React__namespace.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__ */ jsxRuntime.jsxs("div", { className, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        role: "tablist",
+        className: chunkCZC76ZD5_js.cn(tabListVariants({ variant }), tabListClassName),
+        children: items.map((item, i) => /* @__PURE__ */ jsxRuntime.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: chunkCZC76ZD5_js.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__ */ jsxRuntime.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__ */ jsxRuntime.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";
+
+exports.Tab = Tab;
+exports.tabListVariants = tabListVariants;
+exports.tabTriggerVariants = tabTriggerVariants;

package/dist/chunks/chunk-33UFQJIO.mjs

@@ -0,0 +1,135 @@
+import { cn } from './chunk-MCKOWMLS.mjs';
+import * as React from 'react';
+import { cva } from 'class-variance-authority';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var radioGroupVariants = cva("nexus-radio-group", {
+  variants: {
+    orientation: {
+      horizontal: "nexus-radio-group--horizontal",
+      vertical: "nexus-radio-group--vertical"
+    }
+  },
+  defaultVariants: { orientation: "vertical" }
+});
+var radioItemVariants = cva("nexus-radio-item", {
+  variants: {
+    size: {
+      sm: "nexus-radio-item--sm",
+      md: "nexus-radio-item--md"
+    }
+  },
+  defaultVariants: { size: "md" }
+});
+var RadioGroupCtx = React.createContext({
+  name: ""
+});
+var RadioGroup = React.forwardRef(
+  ({
+    className,
+    orientation,
+    name,
+    value: controlledValue,
+    defaultValue,
+    size = "md",
+    disabled,
+    onValueChange,
+    children,
+    ...props
+  }, ref) => {
+    const [uncontrolled, setUncontrolled] = React.useState(defaultValue ?? "");
+    const isControlled = controlledValue !== void 0;
+    const value = isControlled ? controlledValue : uncontrolled;
+    const handleChange = React.useCallback(
+      (v) => {
+        if (!isControlled) setUncontrolled(v);
+        onValueChange?.(v);
+      },
+      [isControlled, onValueChange]
+    );
+    const ctx = React.useMemo(
+      () => ({ name, value, size, disabled, onValueChange: handleChange }),
+      [name, value, size, disabled, handleChange]
+    );
+    return /* @__PURE__ */ jsx(RadioGroupCtx.Provider, { value: ctx, children: /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        role: "radiogroup",
+        className: cn(radioGroupVariants({ orientation }), className),
+        ...props,
+        children
+      }
+    ) });
+  }
+);
+RadioGroup.displayName = "RadioGroup";
+var RadioItem = React.forwardRef(
+  ({
+    className,
+    value,
+    size: sizeProp,
+    disabled: disabledProp,
+    label,
+    children,
+    ...props
+  }, ref) => {
+    const ctx = React.useContext(RadioGroupCtx);
+    const size = sizeProp ?? ctx.size ?? "md";
+    const disabled = disabledProp ?? ctx.disabled;
+    const checked = ctx.value === value;
+    const content = label ?? children;
+    const handleChange = React.useCallback(() => {
+      ctx.onValueChange?.(value);
+    }, [ctx, value]);
+    return /* @__PURE__ */ jsxs(
+      "label",
+      {
+        className: cn(
+          radioItemVariants({ size }),
+          disabled ? "nexus-radio-item--disabled" : "nexus-radio-item--pointer",
+          className
+        ),
+        children: [
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              ref,
+              type: "radio",
+              className: "nexus-sr-only",
+              name: ctx.name,
+              value,
+              checked,
+              disabled,
+              onChange: handleChange,
+              ...props
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: cn(
+                size === "sm" ? "nexus-radio__circle--sm" : "nexus-radio__circle--md",
+                "nexus-radio__circle",
+                checked ? "nexus-radio__circle--checked" : "nexus-radio__circle--unchecked"
+              ),
+              children: checked && /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: cn(
+                    "nexus-radio__dot",
+                    size === "sm" ? "nexus-radio__dot--sm" : "nexus-radio__dot--md"
+                  )
+                }
+              )
+            }
+          ),
+          content && /* @__PURE__ */ jsx("span", { className: "nexus-radio__label", children: content })
+        ]
+      }
+    );
+  }
+);
+RadioItem.displayName = "RadioItem";
+
+export { RadioGroup, RadioItem, radioGroupVariants, radioItemVariants };