@nexus-cross/design-system 1.0.0

package/dist/chunks/chunk-ECVAVQUY.mjs

@@ -0,0 +1,243 @@
+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 numberInputVariants = cva("nexus-number-input", {
+  variants: {
+    size: {
+      sm: "nexus-number-input--sm",
+      md: "nexus-number-input--md",
+      lg: "nexus-number-input--lg",
+      xl: "nexus-number-input--xl"
+    },
+    state: {
+      default: "nexus-number-input--default",
+      error: "nexus-number-input--error"
+    }
+  },
+  defaultVariants: { size: "md", state: "default" }
+});
+var ChevronUp = () => /* @__PURE__ */ jsx("svg", { className: "nexus-number-input__step-icon", viewBox: "0 0 12 12", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", children: /* @__PURE__ */ jsx("path", { d: "M3 7.5L6 4.5l3 3" }) });
+var ChevronDown = () => /* @__PURE__ */ jsx("svg", { className: "nexus-number-input__step-icon", viewBox: "0 0 12 12", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", children: /* @__PURE__ */ jsx("path", { d: "M3 4.5L6 7.5l3-3" }) });
+function clampValue(val, min, max) {
+  let result = val;
+  if (min !== void 0) result = Math.max(min, result);
+  if (max !== void 0) result = Math.min(max, result);
+  return result;
+}
+function roundToDigit(val, digit) {
+  const factor = Math.pow(10, digit);
+  return Math.round(val * factor) / factor;
+}
+function numberInputBind(ref, direction) {
+  return {
+    onPointerDown: (e) => {
+      if (direction === "increment") ref.current?.startIncrement(e);
+      else ref.current?.startDecrement(e);
+    },
+    onPointerUp: () => ref.current?.stop(),
+    onPointerLeave: () => ref.current?.stop()
+  };
+}
+var NumberInput = React.forwardRef(
+  ({
+    className,
+    size,
+    error,
+    value,
+    min,
+    max,
+    step = 1,
+    digit = 0,
+    hideButtons = false,
+    disabled,
+    readOnly,
+    onValueChange,
+    placeholder,
+    ...props
+  }, ref) => {
+    const inputRef = React.useRef(null);
+    const state = error ? "error" : "default";
+    const [internalValue, setInternalValue] = React.useState(value?.toString() ?? "");
+    const internalValueRef = React.useRef(internalValue);
+    const timeoutRef = React.useRef(null);
+    const pressCountRef = React.useRef(0);
+    React.useEffect(() => {
+      internalValueRef.current = internalValue;
+    }, [internalValue]);
+    React.useEffect(() => {
+      setInternalValue(value?.toString() ?? "");
+    }, [value]);
+    const commitValue = React.useCallback(
+      (raw) => {
+        if (raw === "" || raw === "-") {
+          setInternalValue(raw);
+          onValueChange?.(void 0);
+          return;
+        }
+        const parsed = parseFloat(raw);
+        if (isNaN(parsed)) return;
+        const clamped = clampValue(roundToDigit(parsed, digit), min, max);
+        setInternalValue(clamped.toString());
+        onValueChange?.(clamped);
+      },
+      [digit, min, max, onValueChange]
+    );
+    const handleInputChange = React.useCallback(
+      (e) => {
+        const raw = e.target.value;
+        const regex = digit > 0 ? /^-?\d*\.?\d*$/ : /^-?\d*$/;
+        if (!regex.test(raw)) return;
+        setInternalValue(raw);
+      },
+      [digit]
+    );
+    const handleBlur = React.useCallback(() => {
+      commitValue(internalValue);
+    }, [internalValue, commitValue]);
+    const adjust = React.useCallback(
+      (delta) => {
+        const current = parseFloat(internalValueRef.current) || 0;
+        const next = clampValue(roundToDigit(current + delta, digit), min, max);
+        const nextStr = next.toString();
+        internalValueRef.current = nextStr;
+        setInternalValue(nextStr);
+        onValueChange?.(next);
+      },
+      [digit, min, max, onValueChange]
+    );
+    const handleKeyDown = React.useCallback(
+      (e) => {
+        if (e.key === "Enter") commitValue(internalValue);
+        if (e.key === "ArrowUp") {
+          e.preventDefault();
+          adjust(step);
+        }
+        if (e.key === "ArrowDown") {
+          e.preventDefault();
+          adjust(-step);
+        }
+      },
+      [internalValue, commitValue, step, adjust]
+    );
+    const stopRepeat = React.useCallback(() => {
+      if (timeoutRef.current) clearTimeout(timeoutRef.current);
+      timeoutRef.current = null;
+      pressCountRef.current = 0;
+    }, []);
+    const startRepeat = React.useCallback(
+      (delta, e) => {
+        e.preventDefault();
+        adjust(delta);
+        pressCountRef.current = 0;
+        timeoutRef.current = setTimeout(() => {
+          const accelerate = () => {
+            adjust(delta);
+            pressCountRef.current += 1;
+            let delay = 100;
+            if (pressCountRef.current > 20) delay = 30;
+            else if (pressCountRef.current > 10) delay = 50;
+            else if (pressCountRef.current > 5) delay = 75;
+            timeoutRef.current = setTimeout(accelerate, delay);
+          };
+          accelerate();
+        }, 400);
+      },
+      [adjust]
+    );
+    React.useEffect(() => () => stopRepeat(), [stopRepeat]);
+    const startRepeatRef = React.useRef(startRepeat);
+    startRepeatRef.current = startRepeat;
+    const stopRepeatRef = React.useRef(stopRepeat);
+    stopRepeatRef.current = stopRepeat;
+    const adjustRef = React.useRef(adjust);
+    adjustRef.current = adjust;
+    React.useImperativeHandle(
+      ref,
+      () => ({
+        get input() {
+          return inputRef.current;
+        },
+        increment: () => adjustRef.current(step),
+        decrement: () => adjustRef.current(-step),
+        startIncrement: (e) => startRepeatRef.current(step, e),
+        startDecrement: (e) => startRepeatRef.current(-step, e),
+        stop: () => stopRepeatRef.current()
+      }),
+      [step]
+    );
+    const padSize = size === "sm" ? "nexus-number-input__field--sm" : size === "xl" ? "nexus-number-input__field--xl" : size === "lg" ? "nexus-number-input__field--lg" : "nexus-number-input__field--md";
+    const showButtons = !hideButtons && !readOnly && !disabled;
+    const numValue = parseFloat(internalValue) || 0;
+    const isMinDisabled = min !== void 0 && numValue <= min;
+    const isMaxDisabled = max !== void 0 && numValue >= max;
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn(
+          numberInputVariants({ size, state }),
+          disabled && "nexus-number-input--disabled",
+          className
+        ),
+        children: [
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              ref: inputRef,
+              type: "text",
+              inputMode: "decimal",
+              role: "spinbutton",
+              className: cn("nexus-number-input__field", padSize),
+              value: internalValue,
+              disabled,
+              readOnly,
+              placeholder,
+              "aria-invalid": error || void 0,
+              "aria-valuemin": min,
+              "aria-valuemax": max,
+              "aria-valuenow": internalValue ? parseFloat(internalValue) || void 0 : void 0,
+              onChange: handleInputChange,
+              onBlur: handleBlur,
+              onKeyDown: handleKeyDown,
+              ...props
+            }
+          ),
+          showButtons && /* @__PURE__ */ jsxs("div", { className: "nexus-number-input__buttons", children: [
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                tabIndex: -1,
+                disabled: isMaxDisabled,
+                className: "nexus-number-input__step nexus-number-input__step--up",
+                onPointerDown: (e) => startRepeat(step, e),
+                onPointerUp: stopRepeat,
+                onPointerLeave: stopRepeat,
+                "aria-label": "Increase",
+                children: /* @__PURE__ */ jsx(ChevronUp, {})
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                tabIndex: -1,
+                disabled: isMinDisabled,
+                className: "nexus-number-input__step nexus-number-input__step--down",
+                onPointerDown: (e) => startRepeat(-step, e),
+                onPointerUp: stopRepeat,
+                onPointerLeave: stopRepeat,
+                "aria-label": "Decrease",
+                children: /* @__PURE__ */ jsx(ChevronDown, {})
+              }
+            )
+          ] })
+        ]
+      }
+    );
+  }
+);
+NumberInput.displayName = "NumberInput";
+
+export { NumberInput, numberInputBind, numberInputVariants };

package/dist/chunks/chunk-EHAUUUWB.mjs

@@ -0,0 +1,120 @@
+import { cn } from './chunk-MCKOWMLS.mjs';
+import * as React from 'react';
+import { useVirtualizer } from '@tanstack/react-virtual';
+import { jsx } from 'react/jsx-runtime';
+
+function VirtualListInner({
+  items,
+  estimateSize,
+  renderItem,
+  overscan = 5,
+  gap = 0,
+  className,
+  style,
+  onEndReached,
+  endReachedThreshold = 200
+}, ref) {
+  const parentRef = React.useRef(null);
+  React.useImperativeHandle(ref, () => parentRef.current);
+  const estimateFn = typeof estimateSize === "function" ? estimateSize : () => estimateSize;
+  const onEndReachedRef = React.useRef(onEndReached);
+  onEndReachedRef.current = onEndReached;
+  const virtualizer = useVirtualizer({
+    count: items.length,
+    getScrollElement: () => parentRef.current,
+    estimateSize: estimateFn,
+    overscan,
+    gap
+  });
+  React.useEffect(() => {
+    const el = parentRef.current;
+    if (!el || !onEndReachedRef.current) return;
+    const handleScroll = () => {
+      const { scrollTop, scrollHeight, clientHeight } = el;
+      if (scrollHeight - scrollTop - clientHeight < endReachedThreshold) {
+        onEndReachedRef.current?.();
+      }
+    };
+    el.addEventListener("scroll", handleScroll, { passive: true });
+    return () => el.removeEventListener("scroll", handleScroll);
+  }, [endReachedThreshold]);
+  return /* @__PURE__ */ jsx("div", { ref: parentRef, className: cn("nexus-virtual-scroll", className), style, children: /* @__PURE__ */ jsx("div", { style: { height: virtualizer.getTotalSize(), width: "100%", position: "relative" }, children: virtualizer.getVirtualItems().map((virtualItem) => /* @__PURE__ */ jsx(
+    "div",
+    {
+      style: {
+        position: "absolute",
+        top: 0,
+        left: 0,
+        width: "100%",
+        height: virtualItem.size,
+        transform: `translateY(${virtualItem.start}px)`
+      },
+      children: renderItem(items[virtualItem.index], virtualItem.index, virtualItem)
+    },
+    virtualItem.key
+  )) }) });
+}
+var VirtualList = React.forwardRef(VirtualListInner);
+function VirtualGridInner({
+  items,
+  columns,
+  estimateSize,
+  renderItem,
+  overscan = 3,
+  gap = 0,
+  className,
+  style,
+  onEndReached,
+  endReachedThreshold = 200
+}, ref) {
+  const parentRef = React.useRef(null);
+  React.useImperativeHandle(ref, () => parentRef.current);
+  const rowCount = Math.ceil(items.length / columns);
+  const estimateFn = typeof estimateSize === "function" ? estimateSize : () => estimateSize;
+  const onEndReachedRef = React.useRef(onEndReached);
+  onEndReachedRef.current = onEndReached;
+  const virtualizer = useVirtualizer({
+    count: rowCount,
+    getScrollElement: () => parentRef.current,
+    estimateSize: estimateFn,
+    overscan,
+    gap
+  });
+  React.useEffect(() => {
+    const el = parentRef.current;
+    if (!el || !onEndReachedRef.current) return;
+    const handleScroll = () => {
+      const { scrollTop, scrollHeight, clientHeight } = el;
+      if (scrollHeight - scrollTop - clientHeight < endReachedThreshold) {
+        onEndReachedRef.current?.();
+      }
+    };
+    el.addEventListener("scroll", handleScroll, { passive: true });
+    return () => el.removeEventListener("scroll", handleScroll);
+  }, [endReachedThreshold]);
+  return /* @__PURE__ */ jsx("div", { ref: parentRef, className: cn("nexus-virtual-scroll", className), style, children: /* @__PURE__ */ jsx("div", { style: { height: virtualizer.getTotalSize(), width: "100%", position: "relative" }, children: virtualizer.getVirtualItems().map((virtualRow) => {
+    const rowStart = virtualRow.index * columns;
+    const rowItems = items.slice(rowStart, rowStart + columns);
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        style: {
+          position: "absolute",
+          top: 0,
+          left: 0,
+          width: "100%",
+          height: virtualRow.size,
+          transform: `translateY(${virtualRow.start}px)`,
+          display: "grid",
+          gridTemplateColumns: `repeat(${columns}, 1fr)`,
+          gap
+        },
+        children: rowItems.map((item, colIdx) => /* @__PURE__ */ jsx("div", { children: renderItem(item, rowStart + colIdx) }, rowStart + colIdx))
+      },
+      virtualRow.key
+    );
+  }) }) });
+}
+var VirtualGrid = React.forwardRef(VirtualGridInner);
+
+export { VirtualGrid, VirtualList };

package/dist/chunks/chunk-EVOOTSY5.js

@@ -0,0 +1,59 @@
+'use strict';
+
+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);
+
+// src/components/ErrorBoundary.tsx
+var ErrorBoundary = class extends React__namespace.Component {
+  constructor(props) {
+    super(props);
+    this.state = { hasError: false, error: null };
+  }
+  static getDerivedStateFromError(error) {
+    return { hasError: true, error };
+  }
+  componentDidCatch(error, errorInfo) {
+    this.props.onError?.(error, errorInfo);
+  }
+  render() {
+    if (this.state.hasError) {
+      if (this.props.fallback !== void 0) {
+        return this.props.fallback;
+      }
+      return /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          role: "alert",
+          className: "nexus-error-boundary",
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "nexus-error-boundary__title", children: "Something went wrong" }),
+            this.state.error && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "nexus-error-boundary__message", children: this.state.error.message })
+          ]
+        }
+      );
+    }
+    return this.props.children;
+  }
+};
+
+exports.ErrorBoundary = ErrorBoundary;

package/dist/chunks/chunk-GX6GSWX3.mjs

@@ -0,0 +1,38 @@
+import { cn } from './chunk-MCKOWMLS.mjs';
+import * as React from 'react';
+import { cva } from 'class-variance-authority';
+import { jsx } from 'react/jsx-runtime';
+
+var dividerVariants = 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.forwardRef(
+  ({ className, orientation, variant, color, style, ...props }, ref) => /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      role: "separator",
+      "aria-orientation": orientation ?? "horizontal",
+      className: cn(dividerVariants({ orientation, variant }), className),
+      style: { ...style, ...color ? { borderColor: color } : {} },
+      ...props
+    }
+  )
+);
+Divider.displayName = "Divider";
+
+export { Divider, dividerVariants };

package/dist/chunks/chunk-HHXDOKXY.js

@@ -0,0 +1,108 @@
+'use strict';
+
+var react = require('react');
+
+// src/hooks/useDraggableBottomSheet.ts
+function useDraggableBottomSheet({
+  enabled = true,
+  onClose,
+  threshold = 0.5,
+  velocityThreshold = 0.3,
+  maxDragDistance = 600
+}) {
+  const [translateY, setTranslateY] = react.useState(0);
+  const [dimOpacity, setDimOpacity] = react.useState(1);
+  const [isAnimating, setIsAnimating] = react.useState(false);
+  const dragStateRef = react.useRef({
+    isDragging: false,
+    startY: 0,
+    currentY: 0,
+    startTime: 0,
+    modalHeight: 0
+  });
+  const handleTouchStart = react.useCallback(
+    (e) => {
+      if (!enabled) return;
+      const touch = e.touches[0];
+      const target = e.currentTarget;
+      const modalInner = target.querySelector(".modal-inner");
+      if (!modalInner) return;
+      const scrollableElement = e.target.closest(".modal-body");
+      if (scrollableElement && scrollableElement.scrollTop > 0) return;
+      dragStateRef.current = {
+        isDragging: true,
+        startY: touch.clientY,
+        currentY: touch.clientY,
+        startTime: Date.now(),
+        modalHeight: modalInner.offsetHeight
+      };
+      setIsAnimating(false);
+    },
+    [enabled]
+  );
+  const handleTouchMove = react.useCallback(
+    (e) => {
+      if (!enabled || !dragStateRef.current.isDragging) return;
+      const touch = e.touches[0];
+      const deltaY = touch.clientY - dragStateRef.current.startY;
+      if (deltaY < 0) {
+        const resistedDelta = deltaY * 0.3;
+        setTranslateY(Math.max(resistedDelta, -50));
+        return;
+      }
+      const clampedDelta = Math.min(deltaY, maxDragDistance);
+      dragStateRef.current.currentY = touch.clientY;
+      setTranslateY(clampedDelta);
+      const dragRatio = Math.min(
+        clampedDelta / dragStateRef.current.modalHeight,
+        1
+      );
+      const opacity = Math.max(1 - dragRatio * 0.7, 0.3);
+      setDimOpacity(opacity);
+      if (Math.abs(deltaY) > 10) e.preventDefault();
+    },
+    [enabled, maxDragDistance]
+  );
+  const handleTouchEnd = react.useCallback(() => {
+    if (!enabled || !dragStateRef.current.isDragging) return;
+    const { startY, currentY, startTime, modalHeight } = dragStateRef.current;
+    const deltaY = currentY - startY;
+    const deltaTime = Date.now() - startTime;
+    const velocity = deltaY / deltaTime;
+    dragStateRef.current.isDragging = false;
+    setIsAnimating(true);
+    const isFastSwipe = velocity > velocityThreshold;
+    const isOverThreshold = deltaY > modalHeight * threshold;
+    const isDraggedDown = deltaY > 0;
+    if (isDraggedDown && (isFastSwipe || isOverThreshold)) {
+      setTranslateY(modalHeight + 100);
+      setDimOpacity(0);
+      setTimeout(() => {
+        onClose();
+      }, 250);
+    } else {
+      setTranslateY(0);
+      setDimOpacity(1);
+    }
+  }, [enabled, onClose, threshold, velocityThreshold]);
+  if (!enabled) {
+    return {
+      onTouchStart: void 0,
+      onTouchMove: void 0,
+      onTouchEnd: void 0,
+      translateY: 0,
+      dimOpacity: 1,
+      isAnimating: false
+    };
+  }
+  return {
+    onTouchStart: handleTouchStart,
+    onTouchMove: handleTouchMove,
+    onTouchEnd: handleTouchEnd,
+    translateY,
+    dimOpacity,
+    isAnimating
+  };
+}
+
+exports.useDraggableBottomSheet = useDraggableBottomSheet;