@nexus-cross/design-system 1.0.10 → 1.0.12

package/dist/chunks/{chunk-P73MEU7N.mjs → chunk-HI5XZ4PB.mjs}

@@ -22,7 +22,7 @@ var toggleGroupVariants = cva("nexus-toggle-group", {
   }
 });
 var ToggleGroup = React.forwardRef(
-  ({ className, variant, size, items, disabled, ...props }, ref) => {
+  ({ className, variant, size, items, disabled, required, ...props }, ref) => {
     const rootRef = React.useRef(null);
     const [animated, setAnimated] = React.useState(false);
     const [pos, setPos] = React.useState(null);
@@ -75,21 +75,23 @@ var ToggleGroup = React.forwardRef(
     }, []);
     const handleSingleChange = React.useCallback(
       (val) => {
+        if (required && !val) return;
         setTrackedValue(val);
         if (props.type !== "multiple") {
           props.onValueChange?.(val);
         }
       },
-      [props.type, props.onValueChange]
+      [props.type, props.onValueChange, required]
     );
     const handleMultipleChange = React.useCallback(
       (val) => {
+        if (required && val.length === 0) return;
         setTrackedValue(val);
         if (props.type === "multiple") {
           props.onValueChange?.(val);
         }
       },
-      [props.type, props.onValueChange]
+      [props.type, props.onValueChange, required]
     );
     const rootProps = props.type === "multiple" ? {
       type: "multiple",

package/dist/chunks/chunk-LAGQ7J5A.js

@@ -0,0 +1,279 @@
+'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 imageUploadVariants = classVarianceAuthority.cva("nexus-image-upload", {
+  variants: {
+    size: {
+      sm: "nexus-image-upload--sm",
+      md: "nexus-image-upload--md",
+      lg: "nexus-image-upload--lg"
+    }
+  },
+  defaultVariants: { size: "md" }
+});
+var DEFAULT_ACCEPT = ["jpg", "jpeg", "png", "gif", "webp"];
+var DEFAULT_MAX_SIZE = 2 * 1024 * 1024;
+var ImageUpIcon = ({ className }) => /* @__PURE__ */ jsxRuntime.jsxs("svg", { className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", children: [
+  /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M10.3 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v10l-3.1-3.1a2 2 0 0 0-2.814.014L6 21" }),
+  /* @__PURE__ */ jsxRuntime.jsx("path", { d: "m13.5 19 3-3 3 3" }),
+  /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M16.5 22v-6" }),
+  /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "9", cy: "9", r: "2" })
+] });
+var CloseIcon = ({ className }) => /* @__PURE__ */ jsxRuntime.jsx("svg", { className, viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 4L4 12M4 4l8 8" }) });
+function formatBytes(bytes) {
+  if (bytes >= 1024 * 1024) return `${Math.round(bytes / (1024 * 1024))}MB`;
+  return `${Math.round(bytes / 1024)}KB`;
+}
+var ImageUpload = React__namespace.forwardRef(
+  ({
+    value: controlledValue,
+    defaultValue,
+    onChange,
+    onError,
+    accept = DEFAULT_ACCEPT,
+    maxSize = DEFAULT_MAX_SIZE,
+    placeholder = "\uC774\uBBF8\uC9C0\uB97C \uB4DC\uB798\uADF8\uD558\uAC70\uB098 \uD30C\uC77C \uC120\uD0DD",
+    formatDescription: formatDescProp,
+    label,
+    description,
+    disabled = false,
+    size,
+    className
+  }, ref) => {
+    const isControlled = controlledValue !== void 0;
+    const [internalPreview, setInternalPreview] = React__namespace.useState(
+      defaultValue ?? null
+    );
+    const preview = isControlled ? controlledValue : internalPreview;
+    const [isDragging, setIsDragging] = React__namespace.useState(false);
+    const inputRef = React__namespace.useRef(null);
+    const dragCounter = React__namespace.useRef(0);
+    const acceptMime = React__namespace.useMemo(
+      () => accept.map((ext) => {
+        const lower = ext.toLowerCase().replace(/^\./, "");
+        if (lower === "jpg" || lower === "jpeg") return "image/jpeg";
+        return `image/${lower}`;
+      }),
+      [accept]
+    );
+    const formatText = formatDescProp ?? `${[...new Set(accept.map((e) => e.toUpperCase().replace(/^\./, "")))].join(" \xB7 ")} \xB7 \uCD5C\uB300 ${formatBytes(maxSize)}`;
+    const validateFile = React__namespace.useCallback(
+      (file) => {
+        if (!acceptMime.includes(file.type)) {
+          return `\uC9C0\uC6D0\uD558\uC9C0 \uC54A\uB294 \uD30C\uC77C \uD615\uC2DD\uC785\uB2C8\uB2E4. (${accept.join(", ")})`;
+        }
+        if (file.size > maxSize) {
+          return `\uD30C\uC77C \uD06C\uAE30\uAC00 ${formatBytes(maxSize)}\uB97C \uCD08\uACFC\uD569\uB2C8\uB2E4.`;
+        }
+        return null;
+      },
+      [acceptMime, accept, maxSize]
+    );
+    const handleFile = React__namespace.useCallback(
+      (file) => {
+        const error = validateFile(file);
+        if (error) {
+          onError?.(error);
+          return;
+        }
+        if (!isControlled) {
+          const url = URL.createObjectURL(file);
+          setInternalPreview((prev) => {
+            if (prev?.startsWith("blob:")) URL.revokeObjectURL(prev);
+            return url;
+          });
+        }
+        onChange?.(file);
+      },
+      [validateFile, isControlled, onChange, onError]
+    );
+    const handleRemove = React__namespace.useCallback(() => {
+      if (!isControlled) {
+        setInternalPreview((prev) => {
+          if (prev?.startsWith("blob:")) URL.revokeObjectURL(prev);
+          return null;
+        });
+      }
+      onChange?.(null);
+      if (inputRef.current) inputRef.current.value = "";
+    }, [isControlled, onChange]);
+    const handleInputChange = React__namespace.useCallback(
+      (e) => {
+        const file = e.target.files?.[0];
+        if (file) handleFile(file);
+      },
+      [handleFile]
+    );
+    const handleClick = React__namespace.useCallback(() => {
+      if (!disabled) inputRef.current?.click();
+    }, [disabled]);
+    const handleDragEnter = React__namespace.useCallback(
+      (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        if (disabled) return;
+        dragCounter.current += 1;
+        if (dragCounter.current === 1) setIsDragging(true);
+      },
+      [disabled]
+    );
+    const handleDragLeave = React__namespace.useCallback((e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      dragCounter.current -= 1;
+      if (dragCounter.current === 0) setIsDragging(false);
+    }, []);
+    const handleDragOver = React__namespace.useCallback((e) => {
+      e.preventDefault();
+      e.stopPropagation();
+    }, []);
+    const handleDrop = React__namespace.useCallback(
+      (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        setIsDragging(false);
+        dragCounter.current = 0;
+        if (disabled) return;
+        const file = e.dataTransfer.files?.[0];
+        if (file) handleFile(file);
+      },
+      [disabled, handleFile]
+    );
+    React__namespace.useEffect(() => {
+      return () => {
+        if (!isControlled && internalPreview?.startsWith("blob:")) {
+          URL.revokeObjectURL(internalPreview);
+        }
+      };
+    }, []);
+    const hasField = !!(label || description);
+    const hiddenInput = /* @__PURE__ */ jsxRuntime.jsx(
+      "input",
+      {
+        ref: inputRef,
+        type: "file",
+        accept: acceptMime.join(","),
+        onChange: handleInputChange,
+        className: "nexus-image-upload__input",
+        tabIndex: -1
+      }
+    );
+    const previewView = /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: chunkCZC76ZD5_js.cn(
+          "nexus-image-upload--has-preview",
+          size === "sm" && "nexus-image-upload--sm",
+          size === "lg" && "nexus-image-upload--lg",
+          disabled && "nexus-image-upload--disabled",
+          !hasField && className
+        ),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "nexus-image-upload__preview-area", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "nexus-image-upload__preview-wrapper", children: /* @__PURE__ */ jsxRuntime.jsx(
+              "img",
+              {
+                src: preview,
+                alt: "Uploaded preview",
+                className: "nexus-image-upload__preview"
+              }
+            ) }),
+            !disabled && /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                type: "button",
+                className: "nexus-image-upload__remove",
+                onClick: handleRemove,
+                "aria-label": "\uC774\uBBF8\uC9C0 \uC0AD\uC81C",
+                children: /* @__PURE__ */ jsxRuntime.jsx(CloseIcon, { className: "nexus-image-upload__remove-icon" })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "nexus-image-upload__info", children: [
+            !disabled && /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                type: "button",
+                className: "nexus-image-upload__change-btn",
+                onClick: handleClick,
+                children: "\uC774\uBBF8\uC9C0 \uBCC0\uACBD"
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "nexus-image-upload__format", children: formatText })
+          ] }),
+          hiddenInput
+        ]
+      }
+    );
+    const emptyView = /* @__PURE__ */ jsxRuntime.jsx("div", { className: "nexus-image-upload__container", children: /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        role: "button",
+        tabIndex: disabled ? -1 : 0,
+        className: chunkCZC76ZD5_js.cn(
+          imageUploadVariants({ size }),
+          isDragging && "nexus-image-upload--dragging",
+          disabled && "nexus-image-upload--disabled",
+          !hasField && className
+        ),
+        onClick: handleClick,
+        onKeyDown: (e) => {
+          if (e.key === "Enter" || e.key === " ") {
+            e.preventDefault();
+            handleClick();
+          }
+        },
+        onDragEnter: handleDragEnter,
+        onDragLeave: handleDragLeave,
+        onDragOver: handleDragOver,
+        onDrop: handleDrop,
+        "aria-label": placeholder,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(ImageUpIcon, { className: "nexus-image-upload__icon" }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "nexus-image-upload__text-group", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "nexus-image-upload__text", children: placeholder }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "nexus-image-upload__format", children: formatText })
+          ] }),
+          hiddenInput
+        ]
+      }
+    ) });
+    const uploadBox = preview ? previewView : emptyView;
+    if (!hasField) {
+      return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className, children: uploadBox });
+    }
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref, className: chunkCZC76ZD5_js.cn("nexus-image-upload-field", className), children: [
+      label && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "nexus-image-upload-field__label", children: label }),
+      uploadBox,
+      description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "nexus-image-upload-field__description", children: description })
+    ] });
+  }
+);
+ImageUpload.displayName = "ImageUpload";
+
+exports.ImageUpload = ImageUpload;
+exports.imageUploadVariants = imageUploadVariants;