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

package/dist/chunks/chunk-P73MEU7N.mjs

@@ -0,0 +1,150 @@
+import { cn } from './chunk-MCKOWMLS.mjs';
+import * as React from 'react';
+import * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group';
+import { cva } from 'class-variance-authority';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var toggleGroupVariants = cva("nexus-toggle-group", {
+  variants: {
+    variant: {
+      default: "nexus-toggle-group--default",
+      outline: "nexus-toggle-group--outline"
+    },
+    size: {
+      sm: "nexus-toggle-group--sm",
+      md: "nexus-toggle-group--md",
+      lg: "nexus-toggle-group--lg"
+    }
+  },
+  defaultVariants: {
+    variant: "default",
+    size: "md"
+  }
+});
+var ToggleGroup = React.forwardRef(
+  ({ className, variant, size, items, disabled, ...props }, ref) => {
+    const rootRef = React.useRef(null);
+    const [animated, setAnimated] = React.useState(false);
+    const [pos, setPos] = React.useState(null);
+    const combinedRef = React.useCallback(
+      (node) => {
+        rootRef.current = node;
+        if (typeof ref === "function") ref(node);
+        else if (ref) ref.current = node;
+      },
+      [ref]
+    );
+    const currentValue = props.type === "multiple" ? props.value ?? props.defaultValue : props.value ?? props.defaultValue;
+    const [trackedValue, setTrackedValue] = React.useState(currentValue);
+    React.useEffect(() => {
+      if (currentValue !== void 0) setTrackedValue(currentValue);
+    }, [currentValue]);
+    const isDefault = variant !== "outline";
+    React.useLayoutEffect(() => {
+      const root = rootRef.current;
+      if (!root || !isDefault) return;
+      const activeVal = Array.isArray(trackedValue) ? trackedValue[0] : trackedValue;
+      if (!activeVal) {
+        setPos(null);
+        return;
+      }
+      const idx = items.findIndex((item) => item.value === activeVal);
+      if (idx === -1) {
+        setPos(null);
+        return;
+      }
+      const itemEls = root.querySelectorAll(
+        ".nexus-toggle-group__item"
+      );
+      const el = itemEls[idx];
+      if (!el) return;
+      const rootRect = root.getBoundingClientRect();
+      const elRect = el.getBoundingClientRect();
+      setPos({
+        width: elRect.width,
+        height: elRect.height,
+        x: elRect.left - rootRect.left,
+        y: elRect.top - rootRect.top
+      });
+    }, [trackedValue, items, isDefault]);
+    React.useEffect(() => {
+      const frame = requestAnimationFrame(() => {
+        requestAnimationFrame(() => setAnimated(true));
+      });
+      return () => cancelAnimationFrame(frame);
+    }, []);
+    const handleSingleChange = React.useCallback(
+      (val) => {
+        setTrackedValue(val);
+        if (props.type !== "multiple") {
+          props.onValueChange?.(val);
+        }
+      },
+      [props.type, props.onValueChange]
+    );
+    const handleMultipleChange = React.useCallback(
+      (val) => {
+        setTrackedValue(val);
+        if (props.type === "multiple") {
+          props.onValueChange?.(val);
+        }
+      },
+      [props.type, props.onValueChange]
+    );
+    const rootProps = props.type === "multiple" ? {
+      type: "multiple",
+      value: props.value,
+      defaultValue: props.defaultValue,
+      onValueChange: handleMultipleChange
+    } : {
+      type: "single",
+      value: props.value,
+      defaultValue: props.defaultValue,
+      onValueChange: handleSingleChange
+    };
+    const indicatorStyle = pos ? {
+      width: pos.width,
+      height: pos.height,
+      transform: `translate(${pos.x}px, ${pos.y}px)`,
+      opacity: 1
+    } : { opacity: 0 };
+    return /* @__PURE__ */ jsxs(
+      ToggleGroupPrimitive.Root,
+      {
+        ref: combinedRef,
+        className: cn(toggleGroupVariants({ variant, size }), className),
+        disabled,
+        ...rootProps,
+        children: [
+          isDefault && /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: cn(
+                "nexus-toggle-group__indicator",
+                animated && "nexus-toggle-group__indicator--animated"
+              ),
+              style: indicatorStyle,
+              "aria-hidden": true
+            }
+          ),
+          items.map((item) => /* @__PURE__ */ jsxs(
+            ToggleGroupPrimitive.Item,
+            {
+              value: item.value,
+              disabled: item.disabled,
+              className: "nexus-toggle-group__item",
+              children: [
+                item.icon && /* @__PURE__ */ jsx("span", { className: "nexus-toggle-group__icon", children: item.icon }),
+                item.label && /* @__PURE__ */ jsx("span", { children: item.label })
+              ]
+            },
+            item.value
+          ))
+        ]
+      }
+    );
+  }
+);
+ToggleGroup.displayName = "ToggleGroup";
+
+export { ToggleGroup, toggleGroupVariants };

package/dist/chunks/chunk-PDJTSQOC.js

@@ -0,0 +1,59 @@
+'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 emptyStateVariants = classVarianceAuthority.cva("nexus-empty-state", {
+  variants: {
+    size: {
+      sm: "nexus-empty-state--sm",
+      md: "nexus-empty-state--md",
+      lg: "nexus-empty-state--lg"
+    }
+  },
+  defaultVariants: { size: "md" }
+});
+var DefaultIcon = ({ className }) => /* @__PURE__ */ jsxRuntime.jsx("svg", { className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4", strokeLinecap: "round", strokeLinejoin: "round" }) });
+var EmptyState = React__namespace.forwardRef(
+  ({ className, size, icon, title, description, action, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      ref,
+      className: chunkCZC76ZD5_js.cn(emptyStateVariants({ size }), className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "nexus-empty-state__icon", children: icon ?? /* @__PURE__ */ jsxRuntime.jsx(DefaultIcon, { className: "nexus-empty-state__default-icon" }) }),
+        title && /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "nexus-empty-state__title", children: title }),
+        description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "nexus-empty-state__description", children: description }),
+        children,
+        action && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "nexus-empty-state__action", children: action })
+      ]
+    }
+  )
+);
+EmptyState.displayName = "EmptyState";
+
+exports.EmptyState = EmptyState;
+exports.emptyStateVariants = emptyStateVariants;

package/dist/chunks/chunk-S2GMEC43.js

@@ -0,0 +1,109 @@
+'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 badgeVariants = classVarianceAuthority.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__namespace.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__ */ jsxRuntime.jsx(
+        "span",
+        {
+          ref,
+          className: chunkCZC76ZD5_js.cn(
+            badgeVariants({ variant, size }),
+            dot && "nexus-badge--dot",
+            className
+          ),
+          style: badgeStyle,
+          ...props,
+          children: !dot && displayCount
+        }
+      );
+    }
+    return /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "nexus-badge-wrapper", style: { position: "relative", display: "inline-flex" }, children: [
+      children,
+      !isHidden && /* @__PURE__ */ jsxRuntime.jsx(
+        "span",
+        {
+          ref,
+          className: chunkCZC76ZD5_js.cn(
+            badgeVariants({ variant, size }),
+            dot && "nexus-badge--dot",
+            "nexus-badge--positioned",
+            className
+          ),
+          style: badgeStyle,
+          ...props,
+          children: !dot && displayCount
+        }
+      )
+    ] });
+  }
+);
+Badge.displayName = "Badge";
+
+exports.Badge = Badge;
+exports.badgeVariants = badgeVariants;

package/dist/chunks/chunk-X3CTJ7TD.js

@@ -0,0 +1,108 @@
+'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 stepperVariants = classVarianceAuthority.cva("nexus-stepper", {
+  variants: {
+    orientation: {
+      horizontal: "nexus-stepper--horizontal",
+      vertical: "nexus-stepper--vertical"
+    },
+    size: {
+      sm: "nexus-stepper--sm",
+      md: "nexus-stepper--md"
+    }
+  },
+  defaultVariants: {
+    orientation: "horizontal",
+    size: "md"
+  }
+});
+var CheckIcon = ({ className }) => /* @__PURE__ */ jsxRuntime.jsx("svg", { className, viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "2.5", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M3.5 8.5l3 3 6-6", strokeLinecap: "round", strokeLinejoin: "round" }) });
+var Stepper = React__namespace.forwardRef(
+  ({ className, orientation, size, steps, current = 0, status = "process", ...props }, ref) => {
+    const isHorizontal = orientation !== "vertical";
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref,
+        className: chunkCZC76ZD5_js.cn(stepperVariants({ orientation, size }), className),
+        "aria-label": "Progress",
+        ...props,
+        children: steps.map((step, i) => {
+          const state = i < current ? "completed" : i === current ? status === "error" ? "error" : "active" : "pending";
+          const isFirst = i === 0;
+          const isLast = i === steps.length - 1;
+          const prevCompleted = i <= current;
+          const nextCompleted = i < current;
+          return /* @__PURE__ */ jsxRuntime.jsxs(
+            "div",
+            {
+              className: chunkCZC76ZD5_js.cn("nexus-stepper__step", `nexus-stepper__step--${state}`),
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "nexus-stepper__indicator-wrap", children: isHorizontal ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "div",
+                    {
+                      className: chunkCZC76ZD5_js.cn(
+                        "nexus-stepper__connector",
+                        isFirst && "nexus-stepper__connector--hidden",
+                        prevCompleted && "nexus-stepper__connector--completed"
+                      )
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "nexus-stepper__indicator", children: state === "completed" ? /* @__PURE__ */ jsxRuntime.jsx(CheckIcon, { className: "nexus-stepper__check" }) : /* @__PURE__ */ jsxRuntime.jsx("span", { children: i + 1 }) }),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "div",
+                    {
+                      className: chunkCZC76ZD5_js.cn(
+                        "nexus-stepper__connector",
+                        isLast && "nexus-stepper__connector--hidden",
+                        nextCompleted && "nexus-stepper__connector--completed"
+                      )
+                    }
+                  )
+                ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                  !isFirst && /* @__PURE__ */ jsxRuntime.jsx("div", { className: chunkCZC76ZD5_js.cn("nexus-stepper__connector", prevCompleted && "nexus-stepper__connector--completed") }),
+                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "nexus-stepper__indicator", children: state === "completed" ? /* @__PURE__ */ jsxRuntime.jsx(CheckIcon, { className: "nexus-stepper__check" }) : /* @__PURE__ */ jsxRuntime.jsx("span", { children: i + 1 }) })
+                ] }) }),
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "nexus-stepper__content", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "nexus-stepper__label", children: step.label }),
+                  step.description && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "nexus-stepper__description", children: step.description })
+                ] })
+              ]
+            },
+            i
+          );
+        })
+      }
+    );
+  }
+);
+Stepper.displayName = "Stepper";
+
+exports.Stepper = Stepper;
+exports.stepperVariants = stepperVariants;

package/dist/chunks/chunk-XGIJZ3NZ.js

@@ -0,0 +1,160 @@
+'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 textAreaVariants = classVarianceAuthority.cva("nexus-textarea", {
+  variants: {
+    size: {
+      lg: "nexus-textarea--lg",
+      md: "nexus-textarea--md"
+    },
+    state: {
+      default: "nexus-textarea--default",
+      error: "nexus-textarea--error"
+    }
+  },
+  defaultVariants: { size: "lg", state: "default" }
+});
+var TextArea = React__namespace.forwardRef(
+  ({
+    className,
+    size,
+    error,
+    label,
+    description,
+    showCount,
+    resize = "default",
+    maxLength,
+    onValueChange,
+    onChange,
+    value: controlledValue,
+    defaultValue,
+    disabled,
+    id,
+    ...props
+  }, ref) => {
+    const fallbackId = React__namespace.useRef(
+      `nexus-ta-${Math.random().toString(36).slice(2, 9)}`
+    );
+    const inputId = id || fallbackId.current;
+    const textareaRef = React__namespace.useRef(null);
+    const setRef = React__namespace.useCallback(
+      (node) => {
+        textareaRef.current = node;
+        if (typeof ref === "function") ref(node);
+        else if (ref)
+          ref.current = node;
+      },
+      [ref]
+    );
+    const isControlled = controlledValue !== void 0;
+    const [internalValue, setInternalValue] = React__namespace.useState(
+      () => defaultValue != null ? String(defaultValue) : ""
+    );
+    const currentValue = isControlled ? String(controlledValue) : internalValue;
+    const charCount = currentValue.length;
+    const isOverLimit = !!(maxLength && charCount > maxLength);
+    const state = error || isOverLimit ? "error" : "default";
+    const hasField = !!(label || description || showCount);
+    const autoResize = React__namespace.useCallback(() => {
+      const el = textareaRef.current;
+      if (!el || resize !== "auto") return;
+      el.style.height = "auto";
+      el.style.height = `${el.scrollHeight}px`;
+    }, [resize]);
+    React__namespace.useEffect(() => {
+      autoResize();
+    }, [currentValue, autoResize]);
+    const handleChange = React__namespace.useCallback(
+      (e) => {
+        if (!isControlled) setInternalValue(e.target.value);
+        onValueChange?.(e.target.value);
+        onChange?.(e);
+      },
+      [isControlled, onValueChange, onChange]
+    );
+    const resizeClass = resize === "default" ? "nexus-textarea--resize-default" : resize === "auto" ? "nexus-textarea--resize-auto" : "";
+    const textarea = /* @__PURE__ */ jsxRuntime.jsx(
+      "textarea",
+      {
+        ref: setRef,
+        id: label ? inputId : id,
+        className: chunkCZC76ZD5_js.cn(
+          textAreaVariants({ size, state }),
+          disabled && "nexus-textarea--disabled",
+          resizeClass,
+          !hasField && className
+        ),
+        maxLength: showCount ? void 0 : maxLength,
+        disabled,
+        "aria-invalid": error || isOverLimit || void 0,
+        "aria-describedby": description ? `${inputId}-desc` : void 0,
+        value: isControlled ? controlledValue : void 0,
+        defaultValue: !isControlled ? defaultValue : void 0,
+        onChange: handleChange,
+        ...props
+      }
+    );
+    if (!hasField) return textarea;
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: chunkCZC76ZD5_js.cn("nexus-textarea-field", className), children: [
+      label && /* @__PURE__ */ jsxRuntime.jsx("label", { className: "nexus-textarea-field__label", htmlFor: inputId, children: label }),
+      textarea,
+      (description || showCount && maxLength) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "nexus-textarea-field__footer", children: [
+        description && /* @__PURE__ */ jsxRuntime.jsx(
+          "p",
+          {
+            id: `${inputId}-desc`,
+            className: chunkCZC76ZD5_js.cn(
+              "nexus-textarea-field__description",
+              (error || isOverLimit) && "nexus-textarea-field__description--error"
+            ),
+            children: description
+          }
+        ),
+        showCount && maxLength && /* @__PURE__ */ jsxRuntime.jsxs(
+          "span",
+          {
+            className: chunkCZC76ZD5_js.cn(
+              "nexus-textarea-field__count",
+              isOverLimit && "nexus-textarea-field__count--error"
+            ),
+            "aria-live": "polite",
+            "aria-atomic": "true",
+            children: [
+              charCount,
+              "/",
+              maxLength
+            ]
+          }
+        )
+      ] })
+    ] });
+  }
+);
+TextArea.displayName = "TextArea";
+
+exports.TextArea = TextArea;
+exports.textAreaVariants = textAreaVariants;

package/dist/chunks/chunk-YO5MSDPX.mjs

@@ -0,0 +1,36 @@
+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 emptyStateVariants = cva("nexus-empty-state", {
+  variants: {
+    size: {
+      sm: "nexus-empty-state--sm",
+      md: "nexus-empty-state--md",
+      lg: "nexus-empty-state--lg"
+    }
+  },
+  defaultVariants: { size: "md" }
+});
+var DefaultIcon = ({ className }) => /* @__PURE__ */ jsx("svg", { className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", children: /* @__PURE__ */ jsx("path", { d: "M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4", strokeLinecap: "round", strokeLinejoin: "round" }) });
+var EmptyState = React.forwardRef(
+  ({ className, size, icon, title, description, action, children, ...props }, ref) => /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref,
+      className: cn(emptyStateVariants({ size }), className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "nexus-empty-state__icon", children: icon ?? /* @__PURE__ */ jsx(DefaultIcon, { className: "nexus-empty-state__default-icon" }) }),
+        title && /* @__PURE__ */ jsx("h3", { className: "nexus-empty-state__title", children: title }),
+        description && /* @__PURE__ */ jsx("p", { className: "nexus-empty-state__description", children: description }),
+        children,
+        action && /* @__PURE__ */ jsx("div", { className: "nexus-empty-state__action", children: action })
+      ]
+    }
+  )
+);
+EmptyState.displayName = "EmptyState";
+
+export { EmptyState, emptyStateVariants };