@nexus-cross/design-system 1.0.0

package/dist/chunks/chunk-4J3GCZ7W.mjs

@@ -0,0 +1,102 @@
+import { useState, useRef, useCallback } from 'react';
+
+// src/hooks/useDraggableWindow.ts
+function useDraggableWindow({
+  initialPosition,
+  persistKey,
+  targetRef
+} = {}) {
+  const [position, setPosition] = useState(() => {
+    if (persistKey) {
+      try {
+        const saved = localStorage.getItem(`draggable-${persistKey}`);
+        if (saved) return JSON.parse(saved);
+      } catch {
+      }
+    }
+    return initialPosition ?? { x: -1, y: -1 };
+  });
+  const dragRef = useRef({
+    isDragging: false,
+    startX: 0,
+    startY: 0,
+    startPosX: 0,
+    startPosY: 0
+  });
+  const handleMouseDown = useCallback(
+    (e) => {
+      if (e.target.closest("button, input, select, textarea"))
+        return;
+      e.preventDefault();
+      let startPosX = position.x;
+      let startPosY = position.y;
+      if (startPosX === -1 && startPosY === -1 && targetRef?.current) {
+        const rect = targetRef.current.getBoundingClientRect();
+        startPosX = rect.left;
+        startPosY = rect.top;
+        setPosition({ x: startPosX, y: startPosY });
+      }
+      dragRef.current = {
+        isDragging: true,
+        startX: e.clientX,
+        startY: e.clientY,
+        startPosX,
+        startPosY
+      };
+      const handleMouseMove = (ev) => {
+        if (!dragRef.current.isDragging) return;
+        const dx = ev.clientX - dragRef.current.startX;
+        const dy = ev.clientY - dragRef.current.startY;
+        const newX = Math.max(
+          0,
+          Math.min(window.innerWidth - 100, dragRef.current.startPosX + dx)
+        );
+        const newY = Math.max(
+          0,
+          Math.min(window.innerHeight - 40, dragRef.current.startPosY + dy)
+        );
+        setPosition({ x: newX, y: newY });
+      };
+      const handleMouseUp = () => {
+        dragRef.current.isDragging = false;
+        document.removeEventListener("mousemove", handleMouseMove);
+        document.removeEventListener("mouseup", handleMouseUp);
+        document.body.style.cursor = "";
+        document.body.style.userSelect = "";
+        if (persistKey) {
+          setPosition((pos) => {
+            try {
+              localStorage.setItem(
+                `draggable-${persistKey}`,
+                JSON.stringify(pos)
+              );
+            } catch {
+            }
+            return pos;
+          });
+        }
+      };
+      document.body.style.cursor = "grabbing";
+      document.body.style.userSelect = "none";
+      document.addEventListener("mousemove", handleMouseMove);
+      document.addEventListener("mouseup", handleMouseUp);
+    },
+    [position, persistKey, targetRef]
+  );
+  const resetPosition = useCallback(() => {
+    const reset = initialPosition ?? { x: -1, y: -1 };
+    setPosition(reset);
+    if (persistKey) {
+      localStorage.removeItem(`draggable-${persistKey}`);
+    }
+  }, [initialPosition, persistKey]);
+  return {
+    position,
+    setPosition,
+    handleMouseDown,
+    resetPosition,
+    isDefaultPosition: position.x === -1 && position.y === -1
+  };
+}
+
+export { useDraggableWindow };

package/dist/chunks/chunk-54IA2P2Z.mjs

@@ -0,0 +1,40 @@
+// src/utils/scroll.ts
+var hasWindow = () => typeof window !== "undefined";
+var scrollFreeze = () => {
+  if (!hasWindow()) return;
+  const body = document.body;
+  body.setAttribute(
+    "data-fz",
+    body.dataset.fz ? `${Number(body.dataset.fz) + 1}` : "1"
+  );
+  if (body.style.position !== "fixed") {
+    const scrollPosition = window.scrollY;
+    body.setAttribute("data-scroll-y", String(scrollPosition));
+  }
+  body.style.overflow = "hidden";
+  body.style.touchAction = "none";
+  body.style.position = "fixed";
+  body.style.top = `-${body.dataset.scrollY}px`;
+  body.style.left = "0";
+  body.style.width = "100%";
+};
+var scrollRelease = () => {
+  if (!hasWindow()) return;
+  const body = document.body;
+  if (body.dataset.fz && Number(body.dataset.fz) > 1) {
+    body.setAttribute("data-fz", `${Number(body.dataset.fz) - 1}`);
+  } else {
+    body.removeAttribute("data-fz");
+    body.style.position = "";
+    body.style.top = "";
+    body.style.left = "";
+    body.style.width = "";
+    body.style.overflow = "";
+    body.style.paddingRight = "";
+    body.style.backgroundColor = "";
+    body.style.touchAction = "";
+    window.scrollTo(0, Number(body.dataset.scrollY));
+  }
+};
+
+export { scrollFreeze, scrollRelease };

package/dist/chunks/chunk-54RBL7J4.mjs

@@ -0,0 +1,179 @@
+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 textInputVariants = 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__ */ jsx(
+  "svg",
+  {
+    width: "14",
+    height: "14",
+    viewBox: "0 0 14 14",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "1.5",
+    strokeLinecap: "round",
+    children: /* @__PURE__ */ jsx("path", { d: "M10.5 3.5L3.5 10.5M3.5 3.5L10.5 10.5" })
+  }
+);
+var TextInput = React.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.useRef(
+      `nexus-ti-${Math.random().toString(36).slice(2, 9)}`
+    );
+    const inputId = id || fallbackId.current;
+    const inputRef = React.useRef(null);
+    const setInputRef = React.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.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.useCallback(
+      (e) => {
+        if (!isControlled) setInternalValue(e.target.value);
+        onValueChange?.(e.target.value);
+        onChange?.(e);
+      },
+      [isControlled, onValueChange, onChange]
+    );
+    const handleClear = React.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__ */ jsxs(
+      "div",
+      {
+        className: cn(
+          textInputVariants({ size, state }),
+          disabled && "nexus-text-input--disabled",
+          !hasField && className
+        ),
+        children: [
+          prefixIcon && /* @__PURE__ */ jsx("span", { className: "nexus-text-input__icon", children: prefixIcon }),
+          /* @__PURE__ */ 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__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: "nexus-text-input__clear",
+              onClick: handleClear,
+              tabIndex: -1,
+              "aria-label": "Clear",
+              children: /* @__PURE__ */ jsx(ClearIcon, {})
+            }
+          ),
+          suffixIcon && /* @__PURE__ */ jsx("span", { className: "nexus-text-input__icon", children: suffixIcon })
+        ]
+      }
+    );
+    if (!hasField) return inputBox;
+    return /* @__PURE__ */ jsxs("div", { className: cn("nexus-text-input-field", className), children: [
+      label && /* @__PURE__ */ jsx("label", { className: "nexus-text-input-field__label", htmlFor: inputId, children: label }),
+      inputBox,
+      (description || showCount && maxLength) && /* @__PURE__ */ jsxs("div", { className: "nexus-text-input-field__footer", children: [
+        description && /* @__PURE__ */ jsx(
+          "p",
+          {
+            id: `${inputId}-desc`,
+            className: cn(
+              "nexus-text-input-field__description",
+              error && "nexus-text-input-field__description--error"
+            ),
+            children: description
+          }
+        ),
+        showCount && maxLength && /* @__PURE__ */ jsxs(
+          "span",
+          {
+            className: 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";
+
+export { TextInput, textInputVariants };

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

@@ -0,0 +1,83 @@
+'use strict';
+
+var chunkCZC76ZD5_js = require('./chunk-CZC76ZD5.js');
+var react = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+
+var DefaultSpinner = () => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "nexus-infinite-spinner", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "nexus-infinite-spinner-icon" }) });
+var InfiniteScroll = ({
+  className = "",
+  tag = "div",
+  list,
+  scrollTarget = null,
+  rootMargin = 100,
+  loading,
+  loadingElement = /* @__PURE__ */ jsxRuntime.jsx(DefaultSpinner, {}),
+  children,
+  handleLoadMore,
+  ...props
+}) => {
+  const target = react.useRef(null);
+  const listRef = react.useRef(list);
+  const totalCountRef = react.useRef("totalCount" in props ? props.totalCount : void 0);
+  const hasMoreRef = react.useRef("hasMore" in props ? props.hasMore : void 0);
+  const loadingRef = react.useRef(loading);
+  const prevCount = react.useRef(-1);
+  const [count, setCount] = react.useState(0);
+  const io = react.useMemo(() => {
+    if (typeof window === "undefined") return null;
+    return new IntersectionObserver(
+      (entries, observer) => {
+        if (!target.current) return;
+        if (entries[0].intersectionRatio > 0.2) {
+          if (!loadingRef.current) {
+            setCount((v) => v + 1);
+            observer.disconnect();
+          }
+        }
+      },
+      {
+        root: !scrollTarget ? null : "current" in scrollTarget ? scrollTarget.current : scrollTarget,
+        rootMargin: `${rootMargin}px 0px`,
+        threshold: [0.1, 0.2, 0.5, 0.8, 0.9, 1]
+      }
+    );
+  }, [rootMargin, scrollTarget]);
+  const hasNext = react.useCallback(() => {
+    if (!listRef.current || loadingRef.current) return false;
+    if (typeof totalCountRef.current !== "undefined") {
+      return totalCountRef.current > listRef.current.length;
+    }
+    return !!hasMoreRef.current;
+  }, []);
+  react.useEffect(() => {
+    if (count > 0 && prevCount.current < count && (listRef.current ?? []).length && hasNext()) {
+      prevCount.current = count;
+      handleLoadMore();
+    }
+  }, [count, hasNext, handleLoadMore]);
+  react.useEffect(() => {
+    const observeEl = target.current;
+    if (observeEl && io) io.observe(observeEl);
+    return () => {
+      if (observeEl && io) io.unobserve(observeEl);
+    };
+  }, [list, io]);
+  react.useEffect(() => {
+    if ("totalCount" in props) {
+      totalCountRef.current = props.totalCount;
+    } else {
+      hasMoreRef.current = props.hasMore;
+    }
+    listRef.current = [...list || []];
+  }, [list, props]);
+  react.useEffect(() => {
+    loadingRef.current = loading;
+  }, [loading]);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: chunkCZC76ZD5_js.cn("nexus-infinite-scroll", className), children: [
+    react.createElement(tag, null, children),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { ref: target, className: "nexus-infinite-sentinel", role: "status", "aria-live": "polite", children: loading && (list ?? []).length > 0 && loadingElement })
+  ] });
+};
+
+exports.InfiniteScroll = InfiniteScroll;

package/dist/chunks/chunk-5JHN4FCY.mjs

@@ -0,0 +1,58 @@
+import { ErrorBoundary } from './chunk-VIGRCJAE.mjs';
+import { Spinner } from './chunk-BPUQ2CO2.mjs';
+import { cn } from './chunk-MCKOWMLS.mjs';
+import * as React from 'react';
+import { jsx } from 'react/jsx-runtime';
+
+function DataList({
+  list,
+  loadingElement,
+  skeletonElement,
+  skeletonCount = 3,
+  noDataMessage,
+  loading = false,
+  errorFallback,
+  children,
+  className
+}) {
+  const content = React.useMemo(() => {
+    if (!list || loading) {
+      if (skeletonElement) {
+        return Array.from({ length: skeletonCount }).map(
+          (_, index) => React.cloneElement(skeletonElement, {
+            ...skeletonElement.props,
+            key: index
+          })
+        );
+      }
+      return loadingElement ?? /* @__PURE__ */ jsx("div", { className: cn("nexus-datalist-center"), children: /* @__PURE__ */ jsx(Spinner, { size: 32 }) });
+    }
+    if (list.length === 0) {
+      if (React.isValidElement(noDataMessage)) {
+        return noDataMessage;
+      }
+      return /* @__PURE__ */ jsx(
+        "p",
+        {
+          className: cn("nexus-datalist-empty"),
+          children: noDataMessage ?? "\uB370\uC774\uD130\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4"
+        }
+      );
+    }
+    return list.map(
+      (item, index) => children({ item, index })
+    );
+  }, [
+    list,
+    loading,
+    skeletonElement,
+    skeletonCount,
+    loadingElement,
+    noDataMessage,
+    children
+  ]);
+  return /* @__PURE__ */ jsx(ErrorBoundary, { fallback: errorFallback, children: /* @__PURE__ */ jsx("div", { className, children: content }) });
+}
+DataList.displayName = "DataList";
+
+export { DataList };

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

@@ -0,0 +1,114 @@
+import { cn } from './chunk-MCKOWMLS.mjs';
+import { useRef, useState, useCallback, useMemo, useLayoutEffect } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+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 Ellipsis = ({
+  className,
+  content = "",
+  triggerMore = "more",
+  triggerLess = "less",
+  lineClamp = 2,
+  defaultShortened = true,
+  observingEnvs = [],
+  onShowMoreLessClick
+}) => {
+  const contentRef = useRef(null);
+  const isMeasuringRef = useRef(false);
+  const prevObservingEnvs = useRef([...observingEnvs]);
+  const [shortened, setShortened] = useState(defaultShortened);
+  const [triggerVisible, setTriggerVisible] = useState(false);
+  const allocateContentElementStyle = useCallback(
+    (style) => {
+      const el = contentRef.current;
+      if (!el) return;
+      if (style) {
+        el.style.maxHeight = `${style.openHeight}px`;
+        el.style.minHeight = `${style.closeHeight}px`;
+        el.style.height = `${style.closeHeight}px`;
+      } else {
+        el.style.maxHeight = "";
+        el.style.minHeight = "";
+        el.style.height = "";
+      }
+    },
+    []
+  );
+  const resetContentElementAfterMeasuring = useCallback(
+    ({ openHeight, closeHeight }) => {
+      allocateContentElementStyle({ openHeight, closeHeight });
+      setTriggerVisible(closeHeight + 10 < openHeight);
+      setShortened(defaultShortened);
+      isMeasuringRef.current = false;
+    },
+    [defaultShortened, allocateContentElementStyle]
+  );
+  const initializeContentElement = useCallback(() => {
+    allocateContentElementStyle(null);
+    setShortened(true);
+    isMeasuringRef.current = true;
+  }, [allocateContentElementStyle]);
+  const handleToggle = useCallback((e) => {
+    e.stopPropagation();
+    setShortened((prev) => !prev);
+  }, []);
+  const contentStyle = useMemo(
+    () => shortened ? {
+      display: "-webkit-box",
+      WebkitLineClamp: lineClamp,
+      WebkitBoxOrient: "vertical",
+      overflow: "hidden",
+      height: contentRef.current?.style.minHeight
+    } : {
+      WebkitLineClamp: void 0,
+      height: contentRef.current?.style.maxHeight
+    },
+    [shortened, lineClamp]
+  );
+  useLayoutEffect(() => {
+    if (contentRef.current) initializeContentElement();
+  }, [initializeContentElement]);
+  useLayoutEffect(() => {
+    if (!contentRef.current) return;
+    const isEnvChanged = observingEnvs.length ? observingEnvs.some((env, i) => env !== prevObservingEnvs.current[i]) : false;
+    if (isEnvChanged) {
+      prevObservingEnvs.current = [...observingEnvs];
+      initializeContentElement();
+    }
+  }, [observingEnvs, initializeContentElement]);
+  useLayoutEffect(() => {
+    const el = contentRef.current;
+    if (shortened && isMeasuringRef.current && el) {
+      resetContentElementAfterMeasuring({
+        openHeight: el.scrollHeight,
+        closeHeight: el.offsetHeight
+      });
+    }
+  }, [shortened, content, observingEnvs, resetContentElementAfterMeasuring]);
+  return /* @__PURE__ */ jsxs("div", { className: cn("nexus-ellipsis", className), children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: contentRef,
+        className: "nexus-ellipsis__content",
+        style: contentStyle,
+        children: typeof content === "string" ? /* @__PURE__ */ jsx("span", { dangerouslySetInnerHTML: { __html: content } }) : content
+      }
+    ),
+    triggerVisible && /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        onClick: onShowMoreLessClick ?? handleToggle,
+        className: cn("nexus-ellipsis__trigger", !shortened && "nexus-ellipsis__trigger--expanded"),
+        "aria-expanded": !shortened,
+        children: [
+          shortened ? triggerMore : triggerLess,
+          /* @__PURE__ */ jsx(ChevronDown, { className: "nexus-ellipsis__chevron" })
+        ]
+      }
+    )
+  ] });
+};
+
+export { Ellipsis };