@nexus-cross/design-system 1.0.6-beta.2 → 1.0.7

package/dist/chunks/chunk-BJM3NDT2.mjs

@@ -0,0 +1,368 @@
+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: {
+    variant: {
+      basic: "nexus-number-input--basic",
+      bind: "nexus-number-input--bind"
+    },
+    size: {
+      lg: "nexus-number-input--lg",
+      xl: "nexus-number-input--xl"
+    }
+  },
+  defaultVariants: { variant: "basic", size: "lg" }
+});
+var CHEVRON_PATH = "M3.606.179C3.82-.06 4.18-.06 4.394.179L7.846 4.01C8.18 4.382 7.934 5 7.452 5H.548C.066 5-.18 4.382.154 4.01L3.606.179Z";
+var ChevronUpIcon = () => /* @__PURE__ */ jsx(
+  "svg",
+  {
+    className: "nexus-number-input__chevron-icon",
+    viewBox: "0 0 8 5",
+    fill: "currentColor",
+    children: /* @__PURE__ */ jsx("path", { d: CHEVRON_PATH })
+  }
+);
+var ChevronDownIcon = () => /* @__PURE__ */ jsx(
+  "svg",
+  {
+    className: "nexus-number-input__chevron-icon nexus-number-input__chevron-icon--down",
+    viewBox: "0 0 8 5",
+    fill: "currentColor",
+    children: /* @__PURE__ */ jsx("path", { d: CHEVRON_PATH })
+  }
+);
+var MinusIcon = () => /* @__PURE__ */ jsx(
+  "svg",
+  {
+    className: "nexus-number-input__bind-icon",
+    viewBox: "0 0 16 16",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "1.33",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    children: /* @__PURE__ */ jsx("path", { d: "M3.333 8h9.334" })
+  }
+);
+var PlusIcon = () => /* @__PURE__ */ jsx(
+  "svg",
+  {
+    className: "nexus-number-input__bind-icon",
+    viewBox: "0 0 16 16",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "1.33",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    children: /* @__PURE__ */ jsx("path", { d: "M3.333 8h9.334M8 3.333v9.334" })
+  }
+);
+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,
+    variant = "basic",
+    size,
+    error,
+    value,
+    min,
+    max,
+    step = 1,
+    digit = 0,
+    label,
+    description,
+    showMax,
+    hideButtons = false,
+    disabled,
+    readOnly,
+    onValueChange,
+    placeholder,
+    ...props
+  }, ref) => {
+    const inputRef = React.useRef(null);
+    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 handleMaxClick = React.useCallback(() => {
+      if (disabled || readOnly || max === void 0) return;
+      const maxStr = max.toString();
+      internalValueRef.current = maxStr;
+      setInternalValue(maxStr);
+      onValueChange?.(max);
+      inputRef.current?.focus();
+    }, [disabled, readOnly, max, onValueChange]);
+    const numValue = parseFloat(internalValue) || 0;
+    const isMinDisabled = min !== void 0 && numValue <= min;
+    const isMaxDisabled = max !== void 0 && numValue >= max;
+    const isMaxExceeded = max !== void 0 && numValue > max;
+    const displayMax = showMax ?? max !== void 0;
+    const showHeader = !!label || displayMax;
+    const isError = error || isMaxExceeded;
+    const showBtns = !hideButtons && !readOnly;
+    const isBasic = variant !== "bind";
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn(
+          numberInputVariants({ variant, size }),
+          isError && "nexus-number-input--error",
+          disabled && "nexus-number-input--disabled",
+          className
+        ),
+        children: [
+          showHeader && /* @__PURE__ */ jsxs("div", { className: "nexus-number-input__header", children: [
+            label && /* @__PURE__ */ jsx("span", { className: "nexus-number-input__label", children: label }),
+            displayMax && max !== void 0 && /* @__PURE__ */ jsxs(
+              "button",
+              {
+                type: "button",
+                className: "nexus-number-input__max",
+                onClick: handleMaxClick,
+                disabled: disabled || readOnly,
+                tabIndex: -1,
+                children: [
+                  /* @__PURE__ */ jsx("span", { className: "nexus-number-input__max-text", children: "Max" }),
+                  /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      className: cn(
+                        "nexus-number-input__max-value",
+                        isMaxExceeded && "nexus-number-input__max-value--exceeded"
+                      ),
+                      children: max
+                    }
+                  )
+                ]
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "nexus-number-input__container", children: [
+            !isBasic && showBtns && /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                tabIndex: -1,
+                disabled: disabled || isMinDisabled,
+                className: "nexus-number-input__bind-btn",
+                onPointerDown: (e) => startRepeat(-step, e),
+                onPointerUp: stopRepeat,
+                onPointerLeave: stopRepeat,
+                "aria-label": "Decrease",
+                children: /* @__PURE__ */ jsx(MinusIcon, {})
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                ref: inputRef,
+                type: "text",
+                inputMode: "decimal",
+                role: "spinbutton",
+                className: "nexus-number-input__field",
+                value: internalValue,
+                disabled,
+                readOnly,
+                placeholder: placeholder ?? "0",
+                "aria-invalid": isError || void 0,
+                "aria-valuemin": min,
+                "aria-valuemax": max,
+                "aria-valuenow": internalValue ? parseFloat(internalValue) || void 0 : void 0,
+                onChange: handleInputChange,
+                onBlur: handleBlur,
+                onKeyDown: handleKeyDown,
+                ...props
+              }
+            ),
+            !isBasic && showBtns && /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                tabIndex: -1,
+                disabled: disabled || isMaxDisabled,
+                className: "nexus-number-input__bind-btn",
+                onPointerDown: (e) => startRepeat(step, e),
+                onPointerUp: stopRepeat,
+                onPointerLeave: stopRepeat,
+                "aria-label": "Increase",
+                children: /* @__PURE__ */ jsx(PlusIcon, {})
+              }
+            ),
+            isBasic && showBtns && /* @__PURE__ */ jsxs("div", { className: "nexus-number-input__buttons", children: [
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  tabIndex: -1,
+                  disabled: 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(ChevronUpIcon, {})
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  tabIndex: -1,
+                  disabled: 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(ChevronDownIcon, {})
+                }
+              )
+            ] })
+          ] }),
+          description && /* @__PURE__ */ jsx(
+            "p",
+            {
+              className: cn(
+                "nexus-number-input__description",
+                isError && "nexus-number-input__description--error"
+              ),
+              children: description
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+NumberInput.displayName = "NumberInput";
+
+export { NumberInput, numberInputBind, numberInputVariants };

package/dist/chunks/chunk-C2DSAJTL.js

@@ -0,0 +1,109 @@
+'use strict';
+
+var chunkCZC76ZD5_js = require('./chunk-CZC76ZD5.js');
+var React = require('react');
+var DropdownMenuPrimitive = require('@radix-ui/react-dropdown-menu');
+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 DropdownMenuPrimitive__namespace = /*#__PURE__*/_interopNamespace(DropdownMenuPrimitive);
+
+var DropdownMenu = ({
+  children,
+  items,
+  align = "start",
+  side = "bottom",
+  className,
+  contentClassName
+}) => /* @__PURE__ */ jsxRuntime.jsxs(DropdownMenuPrimitive__namespace.Root, { children: [
+  /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuPrimitive__namespace.Trigger, { asChild: true, className, children }),
+  /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuPrimitive__namespace.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(
+    DropdownMenuPrimitive__namespace.Content,
+    {
+      align,
+      side,
+      sideOffset: 4,
+      className: chunkCZC76ZD5_js.cn("nexus-dropdown-content", contentClassName),
+      children: items.map(
+        (item, i) => item.separator ? /* @__PURE__ */ jsxRuntime.jsx(
+          DropdownMenuPrimitive__namespace.Separator,
+          {
+            className: "nexus-dropdown-separator"
+          },
+          i
+        ) : /* @__PURE__ */ jsxRuntime.jsxs(
+          DropdownMenuPrimitive__namespace.Item,
+          {
+            className: chunkCZC76ZD5_js.cn(
+              "nexus-dropdown-item",
+              item.danger && "nexus-dropdown-item--danger"
+            ),
+            disabled: item.disabled,
+            onSelect: item.onClick,
+            children: [
+              item.icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "nexus-dropdown-item__icon", children: item.icon }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { children: item.label })
+            ]
+          },
+          item.value ?? i
+        )
+      )
+    }
+  ) })
+] });
+DropdownMenu.displayName = "DropdownMenu";
+var DropdownMenuRoot = DropdownMenuPrimitive__namespace.Root;
+var DropdownMenuTrigger = DropdownMenuPrimitive__namespace.Trigger;
+var DropdownMenuContent = React__namespace.forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuPrimitive__namespace.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(
+  DropdownMenuPrimitive__namespace.Content,
+  {
+    ref,
+    sideOffset,
+    className: chunkCZC76ZD5_js.cn("nexus-dropdown-content", className),
+    ...props
+  }
+) }));
+DropdownMenuContent.displayName = "DropdownMenuContent";
+var DropdownMenuItem = React__namespace.forwardRef(({ className, danger, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+  DropdownMenuPrimitive__namespace.Item,
+  {
+    ref,
+    className: chunkCZC76ZD5_js.cn("nexus-dropdown-item", danger && "nexus-dropdown-item--danger", className),
+    ...props
+  }
+));
+DropdownMenuItem.displayName = "DropdownMenuItem";
+var DropdownMenuSeparator = React__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+  DropdownMenuPrimitive__namespace.Separator,
+  {
+    ref,
+    className: chunkCZC76ZD5_js.cn("nexus-dropdown-separator", className),
+    ...props
+  }
+));
+DropdownMenuSeparator.displayName = "DropdownMenuSeparator";
+
+exports.DropdownMenu = DropdownMenu;
+exports.DropdownMenuContent = DropdownMenuContent;
+exports.DropdownMenuItem = DropdownMenuItem;
+exports.DropdownMenuRoot = DropdownMenuRoot;
+exports.DropdownMenuSeparator = DropdownMenuSeparator;
+exports.DropdownMenuTrigger = DropdownMenuTrigger;

package/dist/chunks/chunk-CUTMLBC3.mjs

@@ -0,0 +1,86 @@
+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 badgeVariants = cva("nexus-badge", {
+  variants: {
+    variant: {
+      danger: "nexus-badge--danger",
+      primary: "nexus-badge--primary",
+      secondary: "nexus-badge--secondary",
+      info: "nexus-badge--info",
+      success: "nexus-badge--success",
+      warning: "nexus-badge--warning"
+    },
+    size: {
+      sm: "nexus-badge--sm",
+      md: "nexus-badge--md",
+      lg: "nexus-badge--lg"
+    }
+  },
+  defaultVariants: {
+    variant: "danger",
+    size: "md"
+  }
+});
+var Badge = React.forwardRef(
+  ({
+    className,
+    children,
+    variant,
+    size,
+    count,
+    max = 99,
+    dot = false,
+    showZero = false,
+    offset,
+    style,
+    ...props
+  }, ref) => {
+    const displayCount = count !== void 0 && max !== void 0 && count > max ? `${max}+` : count;
+    const isHidden = !dot && (count === void 0 || count === 0 && !showZero);
+    const badgeStyle = {
+      ...style,
+      ...offset ? { "--nexus-badge-offset-x": `${offset[0]}px`, "--nexus-badge-offset-y": `${offset[1]}px` } : {}
+    };
+    if (!children) {
+      if (isHidden) return null;
+      return /* @__PURE__ */ jsx(
+        "span",
+        {
+          ref,
+          className: cn(
+            badgeVariants({ variant, size }),
+            dot && "nexus-badge--dot",
+            className
+          ),
+          style: badgeStyle,
+          ...props,
+          children: !dot && displayCount
+        }
+      );
+    }
+    return /* @__PURE__ */ jsxs("span", { className: "nexus-badge-wrapper", style: { position: "relative", display: "inline-flex" }, children: [
+      children,
+      !isHidden && /* @__PURE__ */ jsx(
+        "span",
+        {
+          ref,
+          className: cn(
+            badgeVariants({ variant, size }),
+            dot && "nexus-badge--dot",
+            "nexus-badge--positioned",
+            className
+          ),
+          style: badgeStyle,
+          ...props,
+          children: !dot && displayCount
+        }
+      )
+    ] });
+  }
+);
+Badge.displayName = "Badge";
+
+export { Badge, badgeVariants };