@nexus-cross/design-system 1.0.0

package/dist/chunks/chunk-CA3SOLI3.mjs

@@ -0,0 +1,78 @@
+import * as React from 'react';
+import { jsx } from 'react/jsx-runtime';
+
+// src/components/Counter.tsx
+function easeOutCubic(t) {
+  return 1 - Math.pow(1 - t, 3);
+}
+function formatNumber(val, separator, digits) {
+  const fixed = digits > 0 ? val.toFixed(digits) : Math.round(val).toString();
+  if (!separator) return fixed;
+  const [intPart, decPart] = fixed.split(".");
+  const formatted = intPart.replace(/\B(?=(\d{3})+(?!\d))/g, ",");
+  return decPart !== void 0 ? `${formatted}.${decPart}` : formatted;
+}
+var Counter = React.forwardRef(
+  ({
+    startValue = 0,
+    endValue,
+    duration = 1500,
+    delay = 0,
+    separator = true,
+    digits = 0,
+    triggerOnView = false,
+    onEnd,
+    className,
+    ...props
+  }, ref) => {
+    const [display, setDisplay] = React.useState(formatNumber(startValue, separator, digits));
+    const [started, setStarted] = React.useState(!triggerOnView);
+    const innerRef = React.useRef(null);
+    React.useImperativeHandle(ref, () => innerRef.current);
+    React.useEffect(() => {
+      if (!triggerOnView || !innerRef.current) return;
+      const observer = new IntersectionObserver(
+        ([entry]) => {
+          if (entry.isIntersecting) {
+            setStarted(true);
+            observer.disconnect();
+          }
+        },
+        { threshold: 0.1 }
+      );
+      observer.observe(innerRef.current);
+      return () => observer.disconnect();
+    }, [triggerOnView]);
+    React.useEffect(() => {
+      if (!started) return;
+      let rafId;
+      let startTime = null;
+      const delayMs = delay;
+      const timeout = setTimeout(() => {
+        const animate = (timestamp) => {
+          if (startTime === null) startTime = timestamp;
+          const elapsed = timestamp - startTime;
+          const progress = Math.min(elapsed / duration, 1);
+          const eased = easeOutCubic(progress);
+          const current = startValue + (endValue - startValue) * eased;
+          setDisplay(formatNumber(current, separator, digits));
+          if (progress < 1) {
+            rafId = requestAnimationFrame(animate);
+          } else {
+            setDisplay(formatNumber(endValue, separator, digits));
+            onEnd?.();
+          }
+        };
+        rafId = requestAnimationFrame(animate);
+      }, delayMs);
+      return () => {
+        clearTimeout(timeout);
+        if (rafId) cancelAnimationFrame(rafId);
+      };
+    }, [started, startValue, endValue, duration, delay, separator, digits, onEnd]);
+    return /* @__PURE__ */ jsx("span", { ref: innerRef, className, role: "status", "aria-live": "polite", "aria-atomic": true, ...props, children: display });
+  }
+);
+Counter.displayName = "Counter";
+
+export { Counter };

package/dist/chunks/chunk-CSJDDREF.js

@@ -0,0 +1,90 @@
+'use strict';
+
+var chunkCZC76ZD5_js = require('./chunk-CZC76ZD5.js');
+var AccordionPrimitive = require('@radix-ui/react-accordion');
+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 AccordionPrimitive__namespace = /*#__PURE__*/_interopNamespace(AccordionPrimitive);
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+
+var ChevronDown = ({ className }) => /* @__PURE__ */ jsxRuntime.jsx("svg", { className, viewBox: "0 0 16 16", fill: "currentColor", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M4 6l4 4 4-4", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }) });
+var AccordionRoot = AccordionPrimitive__namespace.Root;
+var AccordionItem = React__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(AccordionPrimitive__namespace.Item, { ref, className: chunkCZC76ZD5_js.cn("nexus-accordion-item", className), ...props }));
+AccordionItem.displayName = "AccordionItem";
+var AccordionTrigger = React__namespace.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(AccordionPrimitive__namespace.Header, { className: "nexus-accordion-header", children: /* @__PURE__ */ jsxRuntime.jsxs(
+  AccordionPrimitive__namespace.Trigger,
+  {
+    ref,
+    className: chunkCZC76ZD5_js.cn("nexus-accordion-trigger", className),
+    ...props,
+    children: [
+      children,
+      /* @__PURE__ */ jsxRuntime.jsx(ChevronDown, { className: "nexus-accordion-chevron" })
+    ]
+  }
+) }));
+AccordionTrigger.displayName = AccordionPrimitive__namespace.Trigger.displayName;
+var AccordionContent = React__namespace.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+  AccordionPrimitive__namespace.Content,
+  {
+    ref,
+    className: "nexus-accordion-content",
+    ...props,
+    children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: chunkCZC76ZD5_js.cn("nexus-accordion-content__inner", className), children })
+  }
+));
+AccordionContent.displayName = AccordionPrimitive__namespace.Content.displayName;
+var Accordion = ({
+  items,
+  type = "single",
+  collapsible = true,
+  value,
+  defaultValue,
+  className,
+  onValueChange
+}) => {
+  const accordionProps = {
+    className,
+    ...type === "single" ? {
+      type: "single",
+      collapsible,
+      value,
+      defaultValue,
+      onValueChange
+    } : {
+      type: "multiple",
+      value,
+      defaultValue,
+      onValueChange
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(AccordionRoot, { ...accordionProps, children: items.map((item) => /* @__PURE__ */ jsxRuntime.jsxs(AccordionItem, { value: item.id, className: item.className, disabled: item.disabled, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(AccordionTrigger, { className: item.triggerClassName, children: item.trigger }),
+    /* @__PURE__ */ jsxRuntime.jsx(AccordionContent, { className: item.contentClassName, children: item.content })
+  ] }, item.id)) });
+};
+
+exports.Accordion = Accordion;
+exports.AccordionContent = AccordionContent;
+exports.AccordionItem = AccordionItem;
+exports.AccordionRoot = AccordionRoot;
+exports.AccordionTrigger = AccordionTrigger;

package/dist/chunks/chunk-CVYXRSXT.mjs

@@ -0,0 +1,8 @@
+var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
+  get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
+}) : x)(function(x) {
+  if (typeof require !== "undefined") return require.apply(this, arguments);
+  throw Error('Dynamic require of "' + x + '" is not supported');
+});
+
+export { __require };

package/dist/chunks/chunk-CZC76ZD5.js

@@ -0,0 +1,10 @@
+'use strict';
+
+var clsx = require('clsx');
+
+// src/utils/cn.ts
+function cn(...inputs) {
+  return clsx.clsx(inputs);
+}
+
+exports.cn = cn;

package/dist/chunks/chunk-D6FII7HW.js

@@ -0,0 +1,202 @@
+'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 textInputVariants = classVarianceAuthority.cva("nexus-text-input", {
+  variants: {
+    size: {
+      sm: "nexus-text-input--sm",
+      md: "nexus-text-input--md",
+      lg: "nexus-text-input--lg",
+      xl: "nexus-text-input--xl"
+    },
+    state: {
+      default: "nexus-text-input--default",
+      error: "nexus-text-input--error"
+    }
+  },
+  defaultVariants: { size: "md", state: "default" }
+});
+var ClearIcon = () => /* @__PURE__ */ jsxRuntime.jsx(
+  "svg",
+  {
+    width: "14",
+    height: "14",
+    viewBox: "0 0 14 14",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "1.5",
+    strokeLinecap: "round",
+    children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M10.5 3.5L3.5 10.5M3.5 3.5L10.5 10.5" })
+  }
+);
+var TextInput = React__namespace.forwardRef(
+  ({
+    className,
+    size,
+    error,
+    prefixIcon,
+    suffixIcon,
+    label,
+    description,
+    showCount,
+    clearable,
+    onValueChange,
+    onChange,
+    value: controlledValue,
+    defaultValue,
+    disabled,
+    maxLength,
+    id,
+    ...props
+  }, ref) => {
+    const state = error ? "error" : "default";
+    const fallbackId = React__namespace.useRef(
+      `nexus-ti-${Math.random().toString(36).slice(2, 9)}`
+    );
+    const inputId = id || fallbackId.current;
+    const inputRef = React__namespace.useRef(null);
+    const setInputRef = React__namespace.useCallback(
+      (node) => {
+        inputRef.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 hasField = !!(label || description || showCount);
+    const handleChange = React__namespace.useCallback(
+      (e) => {
+        if (!isControlled) setInternalValue(e.target.value);
+        onValueChange?.(e.target.value);
+        onChange?.(e);
+      },
+      [isControlled, onValueChange, onChange]
+    );
+    const handleClear = React__namespace.useCallback(() => {
+      const input = inputRef.current;
+      if (!input) return;
+      const setter = Object.getOwnPropertyDescriptor(
+        HTMLInputElement.prototype,
+        "value"
+      )?.set;
+      if (setter) {
+        setter.call(input, "");
+        input.dispatchEvent(new Event("input", { bubbles: true }));
+      }
+      if (!isControlled) setInternalValue("");
+      onValueChange?.("");
+      input.focus();
+    }, [isControlled, onValueChange]);
+    const inputBox = /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: chunkCZC76ZD5_js.cn(
+          textInputVariants({ size, state }),
+          disabled && "nexus-text-input--disabled",
+          !hasField && className
+        ),
+        children: [
+          prefixIcon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "nexus-text-input__icon", children: prefixIcon }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "input",
+            {
+              ref: setInputRef,
+              id: label ? inputId : id,
+              className: "nexus-text-input__inner",
+              disabled,
+              maxLength,
+              "aria-invalid": error || void 0,
+              "aria-describedby": description ? `${inputId}-desc` : void 0,
+              value: isControlled ? controlledValue : void 0,
+              defaultValue: !isControlled ? defaultValue : void 0,
+              onChange: handleChange,
+              ...props
+            }
+          ),
+          clearable && currentValue.length > 0 && !disabled && /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              className: "nexus-text-input__clear",
+              onClick: handleClear,
+              tabIndex: -1,
+              "aria-label": "Clear",
+              children: /* @__PURE__ */ jsxRuntime.jsx(ClearIcon, {})
+            }
+          ),
+          suffixIcon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "nexus-text-input__icon", children: suffixIcon })
+        ]
+      }
+    );
+    if (!hasField) return inputBox;
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: chunkCZC76ZD5_js.cn("nexus-text-input-field", className), children: [
+      label && /* @__PURE__ */ jsxRuntime.jsx("label", { className: "nexus-text-input-field__label", htmlFor: inputId, children: label }),
+      inputBox,
+      (description || showCount && maxLength) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "nexus-text-input-field__footer", children: [
+        description && /* @__PURE__ */ jsxRuntime.jsx(
+          "p",
+          {
+            id: `${inputId}-desc`,
+            className: chunkCZC76ZD5_js.cn(
+              "nexus-text-input-field__description",
+              error && "nexus-text-input-field__description--error"
+            ),
+            children: description
+          }
+        ),
+        showCount && maxLength && /* @__PURE__ */ jsxRuntime.jsxs(
+          "span",
+          {
+            className: chunkCZC76ZD5_js.cn(
+              "nexus-text-input-field__count",
+              isOverLimit && "nexus-text-input-field__count--error"
+            ),
+            "aria-live": "polite",
+            "aria-atomic": "true",
+            children: [
+              charCount,
+              "/",
+              maxLength
+            ]
+          }
+        )
+      ] })
+    ] });
+  }
+);
+TextInput.displayName = "TextInput";
+
+exports.TextInput = TextInput;
+exports.textInputVariants = textInputVariants;

package/dist/chunks/chunk-DLFV7ZZV.js

@@ -0,0 +1,112 @@
+'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);
+
+function calcTimeLeft(endTimestamp) {
+  const total = Math.max(0, endTimestamp - Date.now());
+  const isFinished = total <= 0;
+  return {
+    days: Math.floor(total / (1e3 * 60 * 60 * 24)),
+    hours: Math.floor(total / (1e3 * 60 * 60) % 24),
+    minutes: Math.floor(total / (1e3 * 60) % 60),
+    seconds: Math.floor(total / 1e3 % 60),
+    total,
+    isFinished
+  };
+}
+function useCountdown(endTimestamp, onEnd) {
+  const [timeLeft, setTimeLeft] = React__namespace.useState(() => calcTimeLeft(endTimestamp));
+  const onEndRef = React__namespace.useRef(onEnd);
+  onEndRef.current = onEnd;
+  React__namespace.useEffect(() => {
+    setTimeLeft(calcTimeLeft(endTimestamp));
+    const id = setInterval(() => {
+      const next = calcTimeLeft(endTimestamp);
+      setTimeLeft(next);
+      if (next.isFinished) {
+        clearInterval(id);
+        onEndRef.current?.();
+      }
+    }, 1e3);
+    const handleVisibility = () => {
+      if (!document.hidden) setTimeLeft(calcTimeLeft(endTimestamp));
+    };
+    document.addEventListener("visibilitychange", handleVisibility);
+    return () => {
+      clearInterval(id);
+      document.removeEventListener("visibilitychange", handleVisibility);
+    };
+  }, [endTimestamp]);
+  return timeLeft;
+}
+var pad = (n) => n.toString().padStart(2, "0");
+var Countdown = React__namespace.forwardRef(
+  ({
+    endTimestamp,
+    separator = ":",
+    showDays = true,
+    labels,
+    onEnd,
+    render,
+    className,
+    ...props
+  }, ref) => {
+    const timeLeft = useCountdown(endTimestamp, onEnd);
+    if (render) {
+      return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className, ...props, children: render(timeLeft) });
+    }
+    const units = [];
+    if (showDays && timeLeft.days > 0) {
+      units.push({ value: timeLeft.days.toString(), label: labels?.days });
+    }
+    units.push(
+      { value: pad(timeLeft.hours), label: labels?.hours },
+      { value: pad(timeLeft.minutes), label: labels?.minutes },
+      { value: pad(timeLeft.seconds), label: labels?.seconds }
+    );
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref,
+        className: chunkCZC76ZD5_js.cn("nexus-countdown", className),
+        role: "timer",
+        "aria-live": "polite",
+        "aria-atomic": "true",
+        ...props,
+        children: units.map((unit, i) => /* @__PURE__ */ jsxRuntime.jsxs(React__namespace.Fragment, { children: [
+          i > 0 && separator && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "nexus-countdown__separator", children: separator }),
+          /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+            unit.value,
+            unit.label && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "nexus-countdown__label", children: unit.label })
+          ] })
+        ] }, i))
+      }
+    );
+  }
+);
+Countdown.displayName = "Countdown";
+
+exports.Countdown = Countdown;
+exports.useCountdown = useCountdown;

package/dist/chunks/chunk-DO6VK2QQ.mjs

@@ -0,0 +1,108 @@
+import { cn } from './chunk-MCKOWMLS.mjs';
+import * as SelectPrimitive from '@radix-ui/react-select';
+import { cva } from 'class-variance-authority';
+import { useState } from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var selectTriggerVariants = cva("nexus-select-trigger", {
+  variants: {
+    variant: {
+      default: "nexus-select-trigger--default",
+      outline: "nexus-select-trigger--outline"
+    },
+    size: {
+      sm: "nexus-select-trigger--sm",
+      md: "nexus-select-trigger--md",
+      lg: "nexus-select-trigger--lg",
+      full: "nexus-select-trigger--full"
+    }
+  },
+  defaultVariants: { variant: "default", size: "full" }
+});
+var selectContentVariants = cva("nexus-select-content", {
+  variants: {
+    size: {
+      sm: "nexus-select-content--sm",
+      md: "nexus-select-content--md",
+      lg: "nexus-select-content--lg",
+      full: "nexus-select-content--full"
+    }
+  },
+  defaultVariants: { size: "full" }
+});
+var ChevronDown = ({ className }) => /* @__PURE__ */ jsx("svg", { className, viewBox: "0 0 16 16", fill: "currentColor", children: /* @__PURE__ */ jsx("path", { d: "M4 6l4 4 4-4", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }) });
+var Select = ({
+  children,
+  value,
+  onValueChange,
+  placeholder,
+  disabled,
+  size,
+  variant,
+  className = "",
+  triggerClassName = "",
+  displayComponent
+}) => {
+  const [isOpen, setIsOpen] = useState(false);
+  return /* @__PURE__ */ jsx(
+    SelectPrimitive.Root,
+    {
+      value,
+      onValueChange,
+      disabled,
+      onOpenChange: setIsOpen,
+      children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: cn(
+            selectTriggerVariants({ size, variant }),
+            displayComponent && "nexus-select-trigger--justify-end",
+            className
+          ),
+          children: [
+            displayComponent && /* @__PURE__ */ jsx("div", { className: "nexus-select-trigger__display", children: displayComponent }),
+            /* @__PURE__ */ jsxs(
+              SelectPrimitive.Trigger,
+              {
+                className: cn("nexus-select-trigger__inner", triggerClassName),
+                children: [
+                  /* @__PURE__ */ jsx(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ jsx(
+                    ChevronDown,
+                    {
+                      className: cn("nexus-select-chevron", isOpen && "nexus-select-chevron--open")
+                    }
+                  ) }),
+                  !displayComponent && /* @__PURE__ */ jsx(SelectPrimitive.Value, { placeholder })
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsx(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsx(
+              SelectPrimitive.Content,
+              {
+                className: cn(selectContentVariants({ size })),
+                position: "popper",
+                children: /* @__PURE__ */ jsx(SelectPrimitive.Viewport, { className: "nexus-select-viewport", children })
+              }
+            ) })
+          ]
+        }
+      )
+    }
+  );
+};
+var SelectItem = ({
+  children,
+  value,
+  disabled,
+  className = ""
+}) => /* @__PURE__ */ jsx(
+  SelectPrimitive.Item,
+  {
+    value,
+    disabled,
+    className: cn("nexus-select-item", className),
+    children: /* @__PURE__ */ jsx(SelectPrimitive.ItemText, { children })
+  }
+);
+
+export { Select, SelectItem, selectContentVariants, selectTriggerVariants };