@nexus-cross/design-system 1.0.10 → 1.0.12

package/cursor-rules/nexus-ui-api.mdc

@@ -1097,14 +1097,14 @@ Empty state placeholder. Shown when data is empty or unavailable.
 
 ## Breadcrumb
 
-Breadcrumb navigation. Shows current location path.
+Breadcrumb navigation (compound component pattern). Use <Breadcrumb.Item> children instead of items array. Each Item can wrap arbitrary ReactNode (Link, Select, plain text, etc.).
 
 | Prop | Type | Default | Description |
 |---|---|---|---|
-| `items` | `object`[] | - | Breadcrumb items array (required) |
-| `separator` | `ReactNode` | - | Custom separator (ReactNode). Default: chevron |
-| `maxItems` | `number` | - | Max visible items (collapses middle with "...") |
-| `className` | `string` | - | Style override |
+| `children` | `ReactNode` | - | One or more <Breadcrumb.Item> elements |
+| `separator` | `ReactNode` | - | Custom separator (ReactNode). Default: chevron icon |
+| `maxItems` | `number` | - | Max visible items. When exceeded, middle items collapse with "…" |
+| `className` | `string` | - | Style override for the root nav element |
 
 ---
 
@@ -1235,6 +1235,28 @@ DatePicker. Calendar popup for date selection. Based on react-day-picker.
 
 ---
 
+## ImageUpload
+
+ImageUpload. Drag-and-drop image upload with preview, file validation, and field label/description support.
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `value` | `string` | - | Controlled image URL (string | null) |
+| `defaultValue` | `string` | - | Default image URL |
+| `onChange` | `ReactNode` | - | File change callback (file: File | null) => void |
+| `onError` | `ReactNode` | - | Validation error callback (error: string) => void |
+| `accept` | `string`[] | `["jpg","jpeg","png","gif","webp"]` | Allowed file extensions |
+| `maxSize` | `number` | `2097152` | Max file size in bytes (default 2MB) |
+| `placeholder` | `string` | `"이미지를 드래그하거나 파일 선택"` | Empty state placeholder text |
+| `formatDescription` | `string` | - | Format description override (default: auto-generated from accept/maxSize) |
+| `label` | `ReactNode` | - | Field label (ReactNode) |
+| `description` | `ReactNode` | - | Field description below the upload area (ReactNode) |
+| `disabled` | `boolean` | `false` | Disabled state |
+| `size` | `'sm'` \| `'md'` \| `'lg'` | `"md"` | Upload area size |
+| `className` | `string` | - | Style override |
+
+---
+
 ## Hooks
 
 ### useModal

package/dist/chunks/{chunk-CV4GMFWP.js → chunk-2WM23PO6.js}

@@ -45,7 +45,7 @@ var toggleGroupVariants = classVarianceAuthority.cva("nexus-toggle-group", {
   }
 });
 var ToggleGroup = React__namespace.forwardRef(
-  ({ className, variant, size, items, disabled, ...props }, ref) => {
+  ({ className, variant, size, items, disabled, required, ...props }, ref) => {
     const rootRef = React__namespace.useRef(null);
     const [animated, setAnimated] = React__namespace.useState(false);
     const [pos, setPos] = React__namespace.useState(null);
@@ -98,21 +98,23 @@ var ToggleGroup = React__namespace.forwardRef(
     }, []);
     const handleSingleChange = React__namespace.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__namespace.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-5J63FUAS.mjs

@@ -0,0 +1,256 @@
+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 imageUploadVariants = 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__ */ jsxs("svg", { className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", children: [
+  /* @__PURE__ */ 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__ */ jsx("path", { d: "m13.5 19 3-3 3 3" }),
+  /* @__PURE__ */ jsx("path", { d: "M16.5 22v-6" }),
+  /* @__PURE__ */ jsx("circle", { cx: "9", cy: "9", r: "2" })
+] });
+var CloseIcon = ({ className }) => /* @__PURE__ */ jsx("svg", { className, viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", children: /* @__PURE__ */ 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.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.useState(
+      defaultValue ?? null
+    );
+    const preview = isControlled ? controlledValue : internalPreview;
+    const [isDragging, setIsDragging] = React.useState(false);
+    const inputRef = React.useRef(null);
+    const dragCounter = React.useRef(0);
+    const acceptMime = React.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.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.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.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.useCallback(
+      (e) => {
+        const file = e.target.files?.[0];
+        if (file) handleFile(file);
+      },
+      [handleFile]
+    );
+    const handleClick = React.useCallback(() => {
+      if (!disabled) inputRef.current?.click();
+    }, [disabled]);
+    const handleDragEnter = React.useCallback(
+      (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        if (disabled) return;
+        dragCounter.current += 1;
+        if (dragCounter.current === 1) setIsDragging(true);
+      },
+      [disabled]
+    );
+    const handleDragLeave = React.useCallback((e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      dragCounter.current -= 1;
+      if (dragCounter.current === 0) setIsDragging(false);
+    }, []);
+    const handleDragOver = React.useCallback((e) => {
+      e.preventDefault();
+      e.stopPropagation();
+    }, []);
+    const handleDrop = React.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.useEffect(() => {
+      return () => {
+        if (!isControlled && internalPreview?.startsWith("blob:")) {
+          URL.revokeObjectURL(internalPreview);
+        }
+      };
+    }, []);
+    const hasField = !!(label || description);
+    const hiddenInput = /* @__PURE__ */ jsx(
+      "input",
+      {
+        ref: inputRef,
+        type: "file",
+        accept: acceptMime.join(","),
+        onChange: handleInputChange,
+        className: "nexus-image-upload__input",
+        tabIndex: -1
+      }
+    );
+    const previewView = /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: 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__ */ jsxs("div", { className: "nexus-image-upload__preview-area", children: [
+            /* @__PURE__ */ jsx("div", { className: "nexus-image-upload__preview-wrapper", children: /* @__PURE__ */ jsx(
+              "img",
+              {
+                src: preview,
+                alt: "Uploaded preview",
+                className: "nexus-image-upload__preview"
+              }
+            ) }),
+            !disabled && /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                className: "nexus-image-upload__remove",
+                onClick: handleRemove,
+                "aria-label": "\uC774\uBBF8\uC9C0 \uC0AD\uC81C",
+                children: /* @__PURE__ */ jsx(CloseIcon, { className: "nexus-image-upload__remove-icon" })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "nexus-image-upload__info", children: [
+            !disabled && /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                className: "nexus-image-upload__change-btn",
+                onClick: handleClick,
+                children: "\uC774\uBBF8\uC9C0 \uBCC0\uACBD"
+              }
+            ),
+            /* @__PURE__ */ jsx("span", { className: "nexus-image-upload__format", children: formatText })
+          ] }),
+          hiddenInput
+        ]
+      }
+    );
+    const emptyView = /* @__PURE__ */ jsx("div", { className: "nexus-image-upload__container", children: /* @__PURE__ */ jsxs(
+      "div",
+      {
+        role: "button",
+        tabIndex: disabled ? -1 : 0,
+        className: 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__ */ jsx(ImageUpIcon, { className: "nexus-image-upload__icon" }),
+          /* @__PURE__ */ jsxs("div", { className: "nexus-image-upload__text-group", children: [
+            /* @__PURE__ */ jsx("span", { className: "nexus-image-upload__text", children: placeholder }),
+            /* @__PURE__ */ jsx("span", { className: "nexus-image-upload__format", children: formatText })
+          ] }),
+          hiddenInput
+        ]
+      }
+    ) });
+    const uploadBox = preview ? previewView : emptyView;
+    if (!hasField) {
+      return /* @__PURE__ */ jsx("div", { ref, className, children: uploadBox });
+    }
+    return /* @__PURE__ */ jsxs("div", { ref, className: cn("nexus-image-upload-field", className), children: [
+      label && /* @__PURE__ */ jsx("span", { className: "nexus-image-upload-field__label", children: label }),
+      uploadBox,
+      description && /* @__PURE__ */ jsx("p", { className: "nexus-image-upload-field__description", children: description })
+    ] });
+  }
+);
+ImageUpload.displayName = "ImageUpload";
+
+export { ImageUpload, imageUploadVariants };