sh-ui-cli 0.44.0 → 0.45.0

package/data/registry/react/components/color-picker/index.tailwind.tsx

@@ -0,0 +1,309 @@
+"use client";
+
+import * as React from "react";
+
+interface HSV { h: number; s: number; v: number; }
+interface HSVA extends HSV { a: number; }
+
+export interface ColorPickerProps
+  extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange" | "defaultValue" | "children"> {
+  value?: string;
+  onChange?: (hex: string) => void;
+  defaultValue?: string;
+  children?: React.ReactNode;
+}
+
+function clamp(n: number, min: number, max: number) { return Math.min(max, Math.max(min, n)); }
+
+function hexToRgb(hex: string): [number, number, number] {
+  const m = hex.replace("#", "");
+  const full = m.length === 3 ? m.split("").map((c) => c + c).join("") : m;
+  const n = parseInt(full, 16);
+  return [(n >> 16) & 255, (n >> 8) & 255, n & 255];
+}
+function rgbToHex(r: number, g: number, b: number): string {
+  const toHex = (n: number) => clamp(Math.round(n), 0, 255).toString(16).padStart(2, "0");
+  return `#${toHex(r)}${toHex(g)}${toHex(b)}`.toUpperCase();
+}
+function rgbToHsv(r: number, g: number, b: number): HSV {
+  const rn = r / 255, gn = g / 255, bn = b / 255;
+  const max = Math.max(rn, gn, bn); const min = Math.min(rn, gn, bn);
+  const d = max - min; let h = 0;
+  if (d !== 0) {
+    if (max === rn) h = ((gn - bn) / d) % 6;
+    else if (max === gn) h = (bn - rn) / d + 2;
+    else h = (rn - gn) / d + 4;
+    h *= 60; if (h < 0) h += 360;
+  }
+  const s = max === 0 ? 0 : d / max; const v = max;
+  return { h, s, v };
+}
+function hsvToRgb({ h, s, v }: HSV): [number, number, number] {
+  const c = v * s; const hh = h / 60;
+  const x = c * (1 - Math.abs((hh % 2) - 1));
+  let r = 0, g = 0, b = 0;
+  if (hh >= 0 && hh < 1) [r, g, b] = [c, x, 0];
+  else if (hh < 2) [r, g, b] = [x, c, 0];
+  else if (hh < 3) [r, g, b] = [0, c, x];
+  else if (hh < 4) [r, g, b] = [0, x, c];
+  else if (hh < 5) [r, g, b] = [x, 0, c];
+  else [r, g, b] = [c, 0, x];
+  const m = v - c;
+  return [(r + m) * 255, (g + m) * 255, (b + m) * 255];
+}
+function hexToHsv(hex: string): HSV { const [r, g, b] = hexToRgb(hex); return rgbToHsv(r, g, b); }
+function hsvToHex(hsv: HSV): string { const [r, g, b] = hsvToRgb(hsv); return rgbToHex(r, g, b); }
+
+const HEX_RE = /^#?[0-9a-f]{6}$/i;
+
+function useDrag(onMove: (e: PointerEvent, el: HTMLElement) => void) {
+  const ref = React.useRef<HTMLDivElement>(null);
+  const onPointerDown = (e: React.PointerEvent<HTMLDivElement>) => {
+    const el = ref.current; if (!el) return;
+    el.setPointerCapture(e.pointerId);
+    onMove(e.nativeEvent, el);
+    const onPointerMove = (ev: PointerEvent) => onMove(ev, el);
+    const onPointerUp = (ev: PointerEvent) => {
+      el.releasePointerCapture(ev.pointerId);
+      el.removeEventListener("pointermove", onPointerMove);
+      el.removeEventListener("pointerup", onPointerUp);
+    };
+    el.addEventListener("pointermove", onPointerMove);
+    el.addEventListener("pointerup", onPointerUp);
+  };
+  return { ref, onPointerDown };
+}
+
+interface ColorPickerContextValue {
+  hsva: HSVA; hex: string; pureHueHex: string;
+  setHsv: (next: Partial<HSV>) => void;
+  setAlpha: (a: number) => void;
+  commitHex: (raw: string) => boolean;
+}
+const ColorPickerContext = React.createContext<ColorPickerContextValue | null>(null);
+function useColorPicker() {
+  const ctx = React.useContext(ColorPickerContext);
+  if (!ctx) throw new Error("ColorPicker 하위 컴포넌트는 <ColorPicker> 내부에서만 사용할 수 있습니다.");
+  return ctx;
+}
+
+export function ColorPicker({
+  value: valueProp, onChange, defaultValue = "#000000", className, children, ...rest
+}: ColorPickerProps) {
+  const isControlled = valueProp !== undefined;
+  const [internal, setInternal] = React.useState(defaultValue);
+  const value = isControlled ? valueProp! : internal;
+  const [hsva, setHsva] = React.useState<HSVA>(() => ({ ...hexToHsv(value), a: 1 }));
+
+  const lastEmittedRef = React.useRef(value);
+  React.useEffect(() => {
+    if (value === lastEmittedRef.current) return;
+    setHsva((prev) => ({ ...hexToHsv(value), a: prev.a }));
+  }, [value]);
+
+  const setHsv = React.useCallback((partial: Partial<HSV>) => {
+    const next: HSVA = { ...hsva, ...partial };
+    const hex = hsvToHex(next);
+    lastEmittedRef.current = hex;
+    setHsva(next);
+    if (!isControlled) setInternal(hex);
+    onChange?.(hex);
+  }, [hsva, isControlled, onChange]);
+
+  const setAlpha = React.useCallback((a: number) => {
+    setHsva((prev) => ({ ...prev, a: clamp(a, 0, 1) }));
+  }, []);
+
+  const commitHex = React.useCallback((raw: string) => {
+    const v = raw.trim();
+    if (!HEX_RE.test(v)) return false;
+    const normalized = (v.startsWith("#") ? v : `#${v}`).toUpperCase();
+    const nextHsv = hexToHsv(normalized);
+    const next: HSVA = { ...nextHsv, a: hsva.a };
+    const hex = hsvToHex(next);
+    lastEmittedRef.current = hex;
+    setHsva(next);
+    if (!isControlled) setInternal(hex);
+    onChange?.(hex);
+    return true;
+  }, [hsva.a, isControlled, onChange]);
+
+  const pureHueHex = React.useMemo(() => hsvToHex({ h: hsva.h, s: 1, v: 1 }), [hsva.h]);
+  const ctx = React.useMemo<ColorPickerContextValue>(
+    () => ({ hsva, hex: value, pureHueHex, setHsv, setAlpha, commitHex }),
+    [hsva, value, pureHueHex, setHsv, setAlpha, commitHex],
+  );
+
+  return (
+    <ColorPickerContext.Provider value={ctx}>
+      <div className={["flex flex-col gap-2.5 w-full select-none", className].filter(Boolean).join(" ")} {...rest}>
+        {children ?? (<><ColorPickerSaturation /><ColorPickerHue /><ColorPickerHex /></>)}
+      </div>
+    </ColorPickerContext.Provider>
+  );
+}
+
+export interface ColorPickerSaturationProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onPointerDown"> {}
+
+export function ColorPickerSaturation({ className, style, ...rest }: ColorPickerSaturationProps) {
+  const { hsva, hex, pureHueHex, setHsv } = useColorPicker();
+  const drag = useDrag((e, el) => {
+    const r = el.getBoundingClientRect();
+    const x = clamp((e.clientX - r.left) / r.width, 0, 1);
+    const y = clamp((e.clientY - r.top) / r.height, 0, 1);
+    setHsv({ s: x, v: 1 - y });
+  });
+  return (
+    <div
+      ref={drag.ref}
+      onPointerDown={drag.onPointerDown}
+      className={["relative w-full aspect-[4/3] rounded-[var(--radius)] cursor-crosshair overflow-hidden touch-none", className].filter(Boolean).join(" ")}
+      style={{ background: pureHueHex, ...style }}
+      role="slider"
+      aria-label="채도/명도"
+      aria-valuemin={0} aria-valuemax={100} aria-valuenow={Math.round(hsva.s * 100)}
+      {...rest}
+    >
+      <div className="absolute inset-0 bg-[linear-gradient(to_right,#fff,transparent)]" />
+      <div className="absolute inset-0 bg-[linear-gradient(to_top,#000,transparent)]" />
+      <div
+        className="absolute w-3.5 h-3.5 -ml-[0.4375rem] -mt-[0.4375rem] border-2 border-white rounded-full shadow-[0_0_0_1px_rgba(0,0,0,0.4)] pointer-events-none"
+        style={{ left: `${hsva.s * 100}%`, top: `${(1 - hsva.v) * 100}%`, background: hex }}
+      />
+    </div>
+  );
+}
+
+export interface ColorPickerHueProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onPointerDown"> {}
+
+export function ColorPickerHue({ className, ...rest }: ColorPickerHueProps) {
+  const { hsva, setHsv } = useColorPicker();
+  const drag = useDrag((e, el) => {
+    const r = el.getBoundingClientRect();
+    const x = clamp((e.clientX - r.left) / r.width, 0, 1);
+    setHsv({ h: x * 360 });
+  });
+  return (
+    <div
+      ref={drag.ref}
+      onPointerDown={drag.onPointerDown}
+      className={["relative w-full h-3.5 rounded-full cursor-pointer touch-none bg-[linear-gradient(to_right,#f00_0%,#ff0_16.66%,#0f0_33.33%,#0ff_50%,#00f_66.66%,#f0f_83.33%,#f00_100%)]", className].filter(Boolean).join(" ")}
+      role="slider"
+      aria-label="색조"
+      aria-valuemin={0} aria-valuemax={360} aria-valuenow={Math.round(hsva.h)}
+      {...rest}
+    >
+      <div
+        className="absolute top-1/2 w-3.5 h-3.5 -ml-[0.4375rem] -translate-y-1/2 bg-white rounded-full shadow-[0_0_0_1px_rgba(0,0,0,0.4)] pointer-events-none"
+        style={{ left: `${(hsva.h / 360) * 100}%` }}
+      />
+    </div>
+  );
+}
+
+export interface ColorPickerAlphaProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onPointerDown"> {}
+
+export function ColorPickerAlpha({ className, style, ...rest }: ColorPickerAlphaProps) {
+  const { hsva, hex, setAlpha } = useColorPicker();
+  const drag = useDrag((e, el) => {
+    const r = el.getBoundingClientRect();
+    const x = clamp((e.clientX - r.left) / r.width, 0, 1);
+    setAlpha(x);
+  });
+  const gradient = `linear-gradient(to right, rgba(0,0,0,0) 0%, ${hex} 100%)`;
+  return (
+    <div
+      ref={drag.ref}
+      onPointerDown={drag.onPointerDown}
+      className={["relative w-full h-3.5 rounded-full cursor-pointer touch-none overflow-hidden bg-white bg-[length:8px_8px] bg-[position:0_0,0_4px,4px_-4px,-4px_0] [background-image:linear-gradient(45deg,#ccc_25%,transparent_25%),linear-gradient(-45deg,#ccc_25%,transparent_25%),linear-gradient(45deg,transparent_75%,#ccc_75%),linear-gradient(-45deg,transparent_75%,#ccc_75%)]", className].filter(Boolean).join(" ")}
+      role="slider"
+      aria-label="투명도"
+      aria-valuemin={0} aria-valuemax={100} aria-valuenow={Math.round(hsva.a * 100)}
+      style={style}
+      {...rest}
+    >
+      <div className="absolute inset-0 rounded-[inherit] pointer-events-none" style={{ backgroundImage: gradient }} />
+      <div
+        className="absolute top-1/2 w-3.5 h-3.5 -ml-[0.4375rem] -translate-y-1/2 bg-white rounded-full shadow-[0_0_0_1px_rgba(0,0,0,0.4)] pointer-events-none"
+        style={{ left: `${hsva.a * 100}%` }}
+      />
+    </div>
+  );
+}
+
+export interface ColorPickerHexProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange"> {
+  showSwatch?: boolean;
+}
+
+export function ColorPickerHex({ className, showSwatch = true, ...rest }: ColorPickerHexProps) {
+  const { hex, commitHex } = useColorPicker();
+  const [draft, setDraft] = React.useState(hex);
+
+  const inputRef = React.useRef<HTMLInputElement>(null);
+  React.useEffect(() => {
+    if (document.activeElement !== inputRef.current) setDraft(hex);
+  }, [hex]);
+
+  const onCommit = () => { if (!commitHex(draft)) setDraft(hex); };
+
+  return (
+    <div
+      className={["flex items-center gap-[var(--space-2)]", className].filter(Boolean).join(" ")}
+      {...rest}
+    >
+      {showSwatch && (
+        <div
+          className="w-7 h-7 rounded-[calc(var(--radius)-2px)] border border-border shrink-0"
+          style={{ background: hex }}
+          aria-hidden
+        />
+      )}
+      <input
+        ref={inputRef}
+        type="text"
+        className="flex-1 min-w-0 h-7 px-[var(--space-2)] border border-border rounded-[calc(var(--radius)-2px)] bg-background text-foreground font-mono text-[0.8125rem] uppercase focus:outline-none focus:border-foreground focus:shadow-[0_0_0_1px_var(--foreground)]"
+        value={draft}
+        onChange={(e) => setDraft(e.target.value)}
+        onBlur={onCommit}
+        onKeyDown={(e) => {
+          if (e.key === "Enter") { e.preventDefault(); (e.target as HTMLInputElement).blur(); }
+        }}
+        spellCheck={false}
+        aria-label="Hex"
+      />
+    </div>
+  );
+}
+
+export interface ColorPickerSwatchesProps extends React.HTMLAttributes<HTMLDivElement> {
+  colors: string[];
+}
+
+export function ColorPickerSwatches({ className, colors, ...rest }: ColorPickerSwatchesProps) {
+  const { hex, commitHex } = useColorPicker();
+  return (
+    <div
+      role="group"
+      aria-label="미리 준비된 색상"
+      className={["flex flex-wrap gap-1.5", className].filter(Boolean).join(" ")}
+      {...rest}
+    >
+      {colors.map((c) => {
+        const normalized = c.toUpperCase();
+        const selected = normalized === hex.toUpperCase();
+        return (
+          <button
+            key={c}
+            type="button"
+            className="w-5 h-5 p-0 border border-border rounded-[calc(var(--radius)-4px)] cursor-pointer transition-[transform,box-shadow] duration-[var(--duration-fast)] hover:scale-110 focus-visible:outline-[length:var(--border-width-strong)] focus-visible:outline-foreground focus-visible:outline-offset-2 data-[selected]:shadow-[0_0_0_2px_var(--background),0_0_0_3.5px_var(--foreground)]"
+            aria-label={c}
+            aria-pressed={selected}
+            data-selected={selected || undefined}
+            style={{ background: c }}
+            onClick={() => commitHex(c)}
+          />
+        );
+      })}
+    </div>
+  );
+}

package/data/registry/react/components/file-upload/index.tailwind.tsx

@@ -0,0 +1,290 @@
+"use client";
+
+import * as React from "react";
+
+function cx(...args: (string | false | undefined)[]) {
+  return args.filter(Boolean).join(" ");
+}
+
+function formatBytes(bytes: number): string {
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+  if (bytes < 1024 * 1024 * 1024) return `${(bytes / 1024 / 1024).toFixed(1)} MB`;
+  return `${(bytes / 1024 / 1024 / 1024).toFixed(1)} GB`;
+}
+
+interface FileUploadContextValue {
+  files: File[];
+  dragging: boolean;
+  disabled: boolean;
+  multiple: boolean;
+  accept?: string;
+  id?: string;
+  name?: string;
+  inputRef: React.RefObject<HTMLInputElement | null>;
+  setDragging: (v: boolean) => void;
+  addFiles: (incoming: FileList | File[]) => void;
+  remove: (idx: number) => void;
+  openPicker: () => void;
+}
+
+const FileUploadContext = React.createContext<FileUploadContextValue | null>(null);
+
+function useFileUpload() {
+  const ctx = React.useContext(FileUploadContext);
+  if (!ctx) throw new Error("FileUpload 하위 컴포넌트는 <FileUpload> 내부에서만 사용할 수 있습니다.");
+  return ctx;
+}
+
+export interface FileUploadProps {
+  value?: File[]; defaultValue?: File[];
+  onValueChange?: (files: File[]) => void;
+  onFiles?: (files: File[]) => void;
+  multiple?: boolean; accept?: string;
+  maxSize?: number; maxFiles?: number;
+  disabled?: boolean;
+  onError?: (message: string) => void;
+  placeholder?: React.ReactNode; hint?: React.ReactNode;
+  showFileList?: boolean;
+  className?: string;
+  style?: React.CSSProperties;
+  id?: string; name?: string;
+  children?: React.ReactNode;
+}
+
+export const FileUpload = React.forwardRef<HTMLInputElement, FileUploadProps>(
+  ({ value, defaultValue, onValueChange, onFiles, multiple = false, accept, maxSize, maxFiles, disabled = false, onError, placeholder, hint, showFileList = true, className, style, id, name, children }, ref) => {
+    const isControlled = value !== undefined;
+    const [internal, setInternal] = React.useState<File[]>(defaultValue ?? []);
+    const files = isControlled ? value! : internal;
+
+    const inputRef = React.useRef<HTMLInputElement>(null);
+    React.useImperativeHandle(ref, () => inputRef.current as HTMLInputElement);
+    const [dragging, setDragging] = React.useState(false);
+
+    const update = React.useCallback((next: File[]) => {
+      if (!isControlled) setInternal(next);
+      onValueChange?.(next);
+      onFiles?.(next);
+    }, [isControlled, onValueChange, onFiles]);
+
+    const addFiles = React.useCallback((incoming: FileList | File[]) => {
+      const arr = Array.from(incoming);
+      const accepted: File[] = [];
+      for (const f of arr) {
+        if (maxSize && f.size > maxSize) {
+          onError?.(`${f.name}: 최대 ${formatBytes(maxSize)}까지 업로드 가능합니다.`);
+          continue;
+        }
+        accepted.push(f);
+      }
+      if (accepted.length === 0) return;
+      let next = multiple ? [...files, ...accepted] : [accepted[accepted.length - 1]];
+      if (maxFiles && next.length > maxFiles) {
+        onError?.(`최대 ${maxFiles}개까지 업로드 가능합니다.`);
+        next = next.slice(0, maxFiles);
+      }
+      update(next);
+    }, [files, maxSize, maxFiles, multiple, onError, update]);
+
+    const remove = React.useCallback((idx: number) => update(files.filter((_, i) => i !== idx)), [files, update]);
+    const openPicker = React.useCallback(() => {
+      if (disabled) return;
+      inputRef.current?.click();
+    }, [disabled]);
+
+    const ctx = React.useMemo<FileUploadContextValue>(() => ({
+      files, dragging, disabled, multiple, accept, id, name, inputRef,
+      setDragging, addFiles, remove, openPicker,
+    }), [files, dragging, disabled, multiple, accept, id, name, addFiles, remove, openPicker]);
+
+    return (
+      <FileUploadContext.Provider value={ctx}>
+        <div className={cx("flex flex-col gap-[var(--space-3)]", className)} style={style}>
+          <input
+            ref={inputRef}
+            id={id}
+            name={name}
+            type="file"
+            multiple={multiple}
+            accept={accept}
+            disabled={disabled}
+            className="absolute w-px h-px p-0 -m-px overflow-hidden whitespace-nowrap border-0 [clip:rect(0,0,0,0)]"
+            onChange={(e) => {
+              if (e.target.files) addFiles(e.target.files);
+              e.target.value = "";
+            }}
+          />
+          {children ?? <DefaultLayout placeholder={placeholder} hint={hint} showFileList={showFileList} />}
+        </div>
+      </FileUploadContext.Provider>
+    );
+  },
+);
+FileUpload.displayName = "FileUpload";
+
+function DefaultLayout({ placeholder, hint, showFileList }: { placeholder?: React.ReactNode; hint?: React.ReactNode; showFileList: boolean }) {
+  const { files } = useFileUpload();
+  return (
+    <>
+      <FileUploadDropzone>
+        <UploadIcon />
+        <div className="text-[length:var(--text-sm)] text-foreground [&_strong]:font-semibold">
+          {placeholder ?? <><strong>파일을 드래그</strong>하거나 <strong>클릭해서 선택</strong></>}
+        </div>
+        {hint && <div className="text-[length:var(--text-xs)] text-foreground-muted">{hint}</div>}
+      </FileUploadDropzone>
+      {showFileList && files.length > 0 && <FileUploadList />}
+    </>
+  );
+}
+
+export interface FileUploadDropzoneProps
+  extends Omit<React.HTMLAttributes<HTMLDivElement>, "onDrop" | "onDragOver" | "onDragLeave"> {
+  children?: React.ReactNode;
+}
+
+export const FileUploadDropzone = React.forwardRef<HTMLDivElement, FileUploadDropzoneProps>(
+  function FileUploadDropzone({ className, children, onClick, ...rest }, ref) {
+    const { dragging, disabled, setDragging, addFiles, openPicker } = useFileUpload();
+    return (
+      <div
+        ref={ref}
+        role="button"
+        tabIndex={disabled ? -1 : 0}
+        aria-disabled={disabled || undefined}
+        data-dragging={dragging || undefined}
+        className={cx(
+          "relative flex flex-col items-center justify-center gap-[var(--space-2)] py-[var(--space-8)] px-[var(--space-6)] min-h-40 bg-background-subtle text-foreground-muted border-[1.5px] border-dashed border-border rounded-[var(--radius)] cursor-pointer text-center transition-[border-color,background-color,color] duration-[var(--duration-fast)] hover:border-border-strong hover:text-foreground focus-visible:outline-[length:var(--border-width-strong)] focus-visible:outline-foreground focus-visible:outline-offset-2 focus-visible:border-foreground motion-reduce:transition-none",
+          dragging && "border-foreground bg-background-muted text-foreground",
+          disabled && "opacity-[var(--opacity-disabled)] cursor-not-allowed pointer-events-none",
+          className,
+        )}
+        onClick={(e) => { onClick?.(e); if (!e.defaultPrevented) openPicker(); }}
+        onKeyDown={(e) => {
+          if (disabled) return;
+          if (e.key === "Enter" || e.key === " ") { e.preventDefault(); openPicker(); }
+        }}
+        onDragOver={(e) => { e.preventDefault(); if (!disabled) setDragging(true); }}
+        onDragLeave={() => setDragging(false)}
+        onDrop={(e) => {
+          e.preventDefault(); setDragging(false);
+          if (disabled) return;
+          addFiles(e.dataTransfer.files);
+        }}
+        {...rest}
+      >
+        {children}
+      </div>
+    );
+  },
+);
+
+export interface FileUploadTriggerProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {}
+
+export const FileUploadTrigger = React.forwardRef<HTMLButtonElement, FileUploadTriggerProps>(
+  function FileUploadTrigger({ className, onClick, children, type, ...rest }, ref) {
+    const { disabled, openPicker } = useFileUpload();
+    return (
+      <button
+        ref={ref}
+        type={type ?? "button"}
+        disabled={disabled || rest.disabled}
+        className={cx(
+          "inline-flex items-center justify-center gap-[var(--space-2)] py-[var(--space-2)] px-[var(--space-3)] text-[length:var(--text-sm)] font-medium text-foreground bg-background border border-border rounded-[calc(var(--radius)-2px)] cursor-pointer transition-[background-color,border-color] duration-[var(--duration-fast)] hover:not-disabled:bg-background-muted hover:not-disabled:border-border-strong focus-visible:outline-[length:var(--border-width-strong)] focus-visible:outline-foreground focus-visible:outline-offset-2 disabled:opacity-[var(--opacity-disabled)] disabled:cursor-not-allowed",
+          className,
+        )}
+        onClick={(e) => {
+          e.stopPropagation();
+          onClick?.(e);
+          if (!e.defaultPrevented) openPicker();
+        }}
+        {...rest}
+      >
+        {children}
+      </button>
+    );
+  },
+);
+
+export interface FileUploadListProps extends Omit<React.HTMLAttributes<HTMLUListElement>, "children"> {
+  children?: React.ReactNode | ((args: { files: File[]; remove: (idx: number) => void }) => React.ReactNode);
+}
+
+export const FileUploadList = React.forwardRef<HTMLUListElement, FileUploadListProps>(
+  function FileUploadList({ className, children, ...rest }, ref) {
+    const { files, remove } = useFileUpload();
+    if (files.length === 0) return null;
+    const content = typeof children === "function"
+      ? children({ files, remove })
+      : (children ?? files.map((f, i) => <FileUploadItem key={`${f.name}-${i}`} file={f} index={i} />));
+
+    return (
+      <ul ref={ref} className={cx("list-none m-0 p-0 flex flex-col gap-1.5", className)} {...rest}>
+        {content}
+      </ul>
+    );
+  },
+);
+
+export interface FileUploadItemProps extends Omit<React.LiHTMLAttributes<HTMLLIElement>, "children"> {
+  file: File;
+  index: number;
+  children?: React.ReactNode;
+}
+
+export const FileUploadItem = React.forwardRef<HTMLLIElement, FileUploadItemProps>(
+  function FileUploadItem({ file, index, className, children, ...rest }, ref) {
+    const { disabled, remove } = useFileUpload();
+    return (
+      <li
+        ref={ref}
+        className={cx(
+          "flex items-center gap-2.5 py-[var(--space-2)] px-[var(--space-3)] bg-background border border-border rounded-[calc(var(--radius)-2px)] text-[length:var(--text-sm)] text-foreground [&>svg]:text-foreground-muted [&>svg]:shrink-0",
+          className,
+        )}
+        {...rest}
+      >
+        {children ?? (
+          <>
+            <FileIcon />
+            <span className="flex-1 overflow-hidden text-ellipsis whitespace-nowrap" title={file.name}>{file.name}</span>
+            <span className="text-[length:var(--text-xs)] text-foreground-muted shrink-0">{formatBytes(file.size)}</span>
+            <button
+              type="button"
+              className="inline-flex items-center justify-center w-6 h-6 p-0 bg-transparent border-none rounded-[calc(var(--radius)-4px)] text-foreground-muted cursor-pointer transition-[color,background-color] duration-[var(--duration-fast)] shrink-0 hover:not-disabled:text-foreground hover:not-disabled:bg-background-muted focus-visible:outline-[length:var(--border-width-strong)] focus-visible:outline-foreground focus-visible:outline-offset-2 disabled:opacity-[var(--opacity-disabled)] disabled:cursor-not-allowed motion-reduce:transition-none"
+              onClick={() => remove(index)}
+              disabled={disabled}
+              aria-label={`${file.name} 제거`}
+            >
+              <XIcon />
+            </button>
+          </>
+        )}
+      </li>
+    );
+  },
+);
+
+function UploadIcon() {
+  return (
+    <svg viewBox="0 0 24 24" width="28" height="28" fill="none" aria-hidden>
+      <path d="M12 16V4m0 0l-4 4m4-4l4 4M4 16v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-2" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+    </svg>
+  );
+}
+function FileIcon() {
+  return (
+    <svg viewBox="0 0 20 20" width="16" height="16" fill="none" aria-hidden>
+      <path d="M5 2.5h6l4 4v9a1.5 1.5 0 0 1-1.5 1.5h-8.5A1.5 1.5 0 0 1 3.5 15.5v-11A1.5 1.5 0 0 1 5 3Z" stroke="currentColor" strokeWidth="1.5" strokeLinejoin="round" />
+      <path d="M11 2.5v4h4" stroke="currentColor" strokeWidth="1.5" strokeLinejoin="round" />
+    </svg>
+  );
+}
+function XIcon() {
+  return (
+    <svg viewBox="0 0 16 16" width="14" height="14" fill="none" aria-hidden>
+      <path d="M4 4l8 8m0-8l-8 8" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
+    </svg>
+  );
+}