@nexus-cross/design-system 1.0.3 → 1.0.4

package/dist/chunks/chunk-5PQ3UCKF.js

@@ -0,0 +1,99 @@
+'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 alertVariants = classVarianceAuthority.cva("nexus-alert", {
+  variants: {
+    variant: {
+      info: "nexus-alert--info",
+      success: "nexus-alert--success",
+      warning: "nexus-alert--warning",
+      danger: "nexus-alert--danger"
+    }
+  },
+  defaultVariants: {
+    variant: "info"
+  }
+});
+var statusIcons = {
+  info: ({ className }) => /* @__PURE__ */ jsxRuntime.jsx("svg", { className, viewBox: "0 0 20 20", fill: "currentColor", children: /* @__PURE__ */ jsxRuntime.jsx("path", { fillRule: "evenodd", d: "M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z", clipRule: "evenodd" }) }),
+  success: ({ className }) => /* @__PURE__ */ jsxRuntime.jsx("svg", { className, viewBox: "0 0 20 20", fill: "currentColor", children: /* @__PURE__ */ jsxRuntime.jsx("path", { fillRule: "evenodd", d: "M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z", clipRule: "evenodd" }) }),
+  warning: ({ className }) => /* @__PURE__ */ jsxRuntime.jsx("svg", { className, viewBox: "0 0 20 20", fill: "currentColor", children: /* @__PURE__ */ jsxRuntime.jsx("path", { fillRule: "evenodd", d: "M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z", clipRule: "evenodd" }) }),
+  danger: ({ className }) => /* @__PURE__ */ jsxRuntime.jsx("svg", { className, viewBox: "0 0 20 20", fill: "currentColor", children: /* @__PURE__ */ jsxRuntime.jsx("path", { fillRule: "evenodd", d: "M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z", clipRule: "evenodd" }) })
+};
+var CloseIcon = ({ className }) => /* @__PURE__ */ jsxRuntime.jsx("svg", { className, viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M4 4l8 8M12 4l-8 8", strokeLinecap: "round" }) });
+var Alert = React__namespace.forwardRef(
+  ({
+    className,
+    children,
+    variant = "info",
+    title,
+    icon,
+    closable = false,
+    onClose,
+    action,
+    ...props
+  }, ref) => {
+    const [visible, setVisible] = React__namespace.useState(true);
+    const handleClose = React__namespace.useCallback(() => {
+      setVisible(false);
+      onClose?.();
+    }, [onClose]);
+    if (!visible) return null;
+    const IconComp = icon === void 0 ? statusIcons[variant ?? "info"] : null;
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        ref,
+        role: "alert",
+        className: chunkCZC76ZD5_js.cn(alertVariants({ variant }), className),
+        ...props,
+        children: [
+          (icon || IconComp) && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "nexus-alert__icon", children: icon ?? (IconComp && /* @__PURE__ */ jsxRuntime.jsx(IconComp, { className: "nexus-alert__icon-svg" })) }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "nexus-alert__body", children: [
+            title && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "nexus-alert__title", children: title }),
+            children && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "nexus-alert__description", children })
+          ] }),
+          action && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "nexus-alert__action", children: action }),
+          closable && /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              className: "nexus-alert__close",
+              onClick: handleClose,
+              "aria-label": "Close",
+              children: /* @__PURE__ */ jsxRuntime.jsx(CloseIcon, { className: "nexus-alert__close-icon" })
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+Alert.displayName = "Alert";
+
+exports.Alert = Alert;
+exports.alertVariants = alertVariants;

package/dist/chunks/chunk-6BWOKTVQ.mjs

@@ -0,0 +1,87 @@
+import { cn } from './chunk-MCKOWMLS.mjs';
+import * as React from 'react';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+var ImageIcon = ({ className }) => /* @__PURE__ */ jsxs("svg", { className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", children: [
+  /* @__PURE__ */ jsx("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2" }),
+  /* @__PURE__ */ jsx("circle", { cx: "8.5", cy: "8.5", r: "1.5" }),
+  /* @__PURE__ */ jsx("path", { d: "M21 15l-5-5L5 21" })
+] });
+var NxImage = React.forwardRef(
+  ({
+    className,
+    src,
+    alt,
+    fallback,
+    fallbackSrc,
+    aspectRatio,
+    objectFit = "cover",
+    lazy = true,
+    wrapperClassName,
+    style,
+    onError,
+    onLoad,
+    ...props
+  }, ref) => {
+    const [status, setStatus] = React.useState(
+      "loading"
+    );
+    React.useEffect(() => {
+      setStatus("loading");
+    }, [src]);
+    const handleLoad = React.useCallback(
+      (e) => {
+        setStatus("loaded");
+        onLoad?.(e);
+      },
+      [onLoad]
+    );
+    const handleError = React.useCallback(
+      (e) => {
+        if (fallbackSrc && e.currentTarget.src !== fallbackSrc) {
+          e.currentTarget.src = fallbackSrc;
+          return;
+        }
+        setStatus("error");
+        onError?.(e);
+      },
+      [fallbackSrc, onError]
+    );
+    const wrapperStyle = {
+      ...style,
+      ...aspectRatio ? { aspectRatio } : {}
+    };
+    const showFallback = status === "error" || !src;
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn("nexus-image", wrapperClassName),
+        style: wrapperStyle,
+        children: showFallback ? /* @__PURE__ */ jsx("div", { className: "nexus-image__fallback", children: fallback ?? /* @__PURE__ */ jsx(ImageIcon, { className: "nexus-image__fallback-icon" }) }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+          status === "loading" && /* @__PURE__ */ jsx("div", { className: "nexus-image__skeleton" }),
+          /* @__PURE__ */ jsx(
+            "img",
+            {
+              ref,
+              src,
+              alt: alt ?? "",
+              loading: lazy ? "lazy" : "eager",
+              className: cn(
+                "nexus-image__img",
+                `nexus-image__img--${objectFit}`,
+                status === "loaded" && "nexus-image__img--loaded",
+                className
+              ),
+              onLoad: handleLoad,
+              onError: handleError,
+              ...props
+            }
+          )
+        ] })
+      }
+    );
+  }
+);
+NxImage.displayName = "NxImage";
+
+export { NxImage };

package/dist/chunks/chunk-6DBRL6NA.mjs

@@ -0,0 +1,81 @@
+import { cn } from './chunk-MCKOWMLS.mjs';
+import * as React from 'react';
+import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var DropdownMenu = ({
+  children,
+  items,
+  align = "start",
+  side = "bottom",
+  className,
+  contentClassName
+}) => /* @__PURE__ */ jsxs(DropdownMenuPrimitive.Root, { children: [
+  /* @__PURE__ */ jsx(DropdownMenuPrimitive.Trigger, { asChild: true, className, children }),
+  /* @__PURE__ */ jsx(DropdownMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx(
+    DropdownMenuPrimitive.Content,
+    {
+      align,
+      side,
+      sideOffset: 4,
+      className: cn("nexus-dropdown-content", contentClassName),
+      children: items.map(
+        (item, i) => item.separator ? /* @__PURE__ */ jsx(
+          DropdownMenuPrimitive.Separator,
+          {
+            className: "nexus-dropdown-separator"
+          },
+          i
+        ) : /* @__PURE__ */ jsxs(
+          DropdownMenuPrimitive.Item,
+          {
+            className: cn(
+              "nexus-dropdown-item",
+              item.danger && "nexus-dropdown-item--danger"
+            ),
+            disabled: item.disabled,
+            onSelect: item.onClick,
+            children: [
+              item.icon && /* @__PURE__ */ jsx("span", { className: "nexus-dropdown-item__icon", children: item.icon }),
+              /* @__PURE__ */ jsx("span", { children: item.label })
+            ]
+          },
+          item.value ?? i
+        )
+      )
+    }
+  ) })
+] });
+DropdownMenu.displayName = "DropdownMenu";
+var DropdownMenuRoot = DropdownMenuPrimitive.Root;
+var DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
+var DropdownMenuContent = React.forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx(DropdownMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx(
+  DropdownMenuPrimitive.Content,
+  {
+    ref,
+    sideOffset,
+    className: cn("nexus-dropdown-content", className),
+    ...props
+  }
+) }));
+DropdownMenuContent.displayName = "DropdownMenuContent";
+var DropdownMenuItem = React.forwardRef(({ className, danger, ...props }, ref) => /* @__PURE__ */ jsx(
+  DropdownMenuPrimitive.Item,
+  {
+    ref,
+    className: cn("nexus-dropdown-item", danger && "nexus-dropdown-item--danger", className),
+    ...props
+  }
+));
+DropdownMenuItem.displayName = "DropdownMenuItem";
+var DropdownMenuSeparator = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  DropdownMenuPrimitive.Separator,
+  {
+    ref,
+    className: cn("nexus-dropdown-separator", className),
+    ...props
+  }
+));
+DropdownMenuSeparator.displayName = "DropdownMenuSeparator";
+
+export { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuRoot, DropdownMenuSeparator, DropdownMenuTrigger };

package/dist/chunks/chunk-B5O6W3Z4.mjs

@@ -0,0 +1,73 @@
+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 progressVariants = cva("nexus-progress", {
+  variants: {
+    variant: {
+      primary: "nexus-progress--primary",
+      success: "nexus-progress--success",
+      warning: "nexus-progress--warning",
+      danger: "nexus-progress--danger",
+      info: "nexus-progress--info"
+    },
+    size: {
+      sm: "nexus-progress--sm",
+      md: "nexus-progress--md",
+      lg: "nexus-progress--lg"
+    }
+  },
+  defaultVariants: {
+    variant: "primary",
+    size: "md"
+  }
+});
+var Progress = React.forwardRef(
+  ({
+    className,
+    variant,
+    size,
+    value = 0,
+    max = 100,
+    showValue = false,
+    indeterminate = false,
+    label,
+    ...props
+  }, ref) => {
+    const percentage = Math.min(100, Math.max(0, value / max * 100));
+    return /* @__PURE__ */ jsxs("div", { className: cn("nexus-progress-wrapper", className), ref, ...props, children: [
+      (label || showValue) && /* @__PURE__ */ jsxs("div", { className: "nexus-progress__header", children: [
+        label && /* @__PURE__ */ jsx("span", { className: "nexus-progress__label", children: label }),
+        showValue && !indeterminate && /* @__PURE__ */ jsxs("span", { className: "nexus-progress__value", children: [
+          Math.round(percentage),
+          "%"
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: cn(progressVariants({ variant, size })),
+          role: "progressbar",
+          "aria-valuenow": indeterminate ? void 0 : value,
+          "aria-valuemin": 0,
+          "aria-valuemax": max,
+          "aria-label": label,
+          children: /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: cn(
+                "nexus-progress__bar",
+                indeterminate && "nexus-progress__bar--indeterminate"
+              ),
+              style: indeterminate ? void 0 : { width: `${percentage}%` }
+            }
+          )
+        }
+      )
+    ] });
+  }
+);
+Progress.displayName = "Progress";
+
+export { Progress, progressVariants };

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 };