@xonic0506/sonic-ui 0.1.0 → 0.3.0

package/dist/components/dialog.js

@@ -4,41 +4,44 @@ import * as t from "react";
 import { jsx as n, jsxs as r } from "react/jsx-runtime";
 import { Dialog as i } from "@base-ui/react/dialog";
 //#region src/components/dialog.tsx
-function a({ onOpenChange: e, ...t }) {
+var a = "sn:fixed sn:inset-0 sn:z-50 sn:bg-overlay sn:transition-opacity sn:duration-(--sn-duration-normal) sn:ease-standard sn:data-starting-style:opacity-0 sn:data-ending-style:opacity-0 sn:motion-reduce:transition-none", o = "sn:fixed sn:top-1/2 sn:left-1/2 sn:z-50 sn:box-border sn:flex sn:w-110 sn:max-w-[calc(100vw-2*var(--sn-space-4))] sn:-translate-x-1/2 sn:-translate-y-1/2 sn:flex-col sn:gap-4 sn:rounded-lg sn:border sn:border-default sn:bg-surface sn:p-6 sn:font-sans sn:text-body sn:text-default sn:outline-none sn:transition-[opacity,scale] sn:duration-(--sn-duration-normal) sn:ease-standard sn:data-starting-style:scale-98 sn:data-starting-style:opacity-0 sn:data-ending-style:scale-98 sn:data-ending-style:opacity-0 sn:motion-reduce:transition-none", s = "sn:m-0 sn:text-title sn:text-default", c = "sn:-mt-3 sn:mb-0 sn:text-caption sn:text-muted";
+function l({ onOpenChange: e, ...t }) {
 	return /* @__PURE__ */ n(i.Root, {
 		...t,
 		onOpenChange: e && ((t) => e(t))
 	});
 }
-var o = t.forwardRef(function(e, t) {
+var u = t.forwardRef(function(e, t) {
 	return /* @__PURE__ */ n(i.Trigger, {
 		ref: t,
 		...e
 	});
-}), s = t.forwardRef(function(e, t) {
+}), d = t.forwardRef(function(e, t) {
 	return /* @__PURE__ */ n(i.Close, {
 		ref: t,
 		...e
 	});
-}), c = t.forwardRef(function({ className: t, ...a }, o) {
-	return /* @__PURE__ */ r(i.Portal, { children: [/* @__PURE__ */ n(i.Backdrop, { className: "sn:fixed sn:inset-0 sn:z-50 sn:bg-overlay sn:transition-opacity sn:duration-(--sn-duration-normal) sn:ease-standard sn:data-starting-style:opacity-0 sn:data-ending-style:opacity-0 sn:motion-reduce:transition-none" }), /* @__PURE__ */ n(i.Popup, {
-		ref: o,
-		className: e("sn:fixed sn:top-1/2 sn:left-1/2 sn:z-50 sn:box-border sn:flex sn:w-110 sn:max-w-[calc(100vw-2*var(--sn-space-4))] sn:-translate-x-1/2 sn:-translate-y-1/2 sn:flex-col sn:gap-4 sn:rounded-lg sn:border sn:border-default sn:bg-surface sn:p-6 sn:font-sans sn:text-body sn:text-default sn:outline-none sn:transition-[opacity,scale] sn:duration-(--sn-duration-normal) sn:ease-standard sn:data-starting-style:scale-98 sn:data-starting-style:opacity-0 sn:data-ending-style:scale-98 sn:data-ending-style:opacity-0 sn:motion-reduce:transition-none", t),
-		...a
+}), f = t.forwardRef(function({ className: t, initialFocus: s, finalFocus: c, ...l }, u) {
+	return /* @__PURE__ */ r(i.Portal, { children: [/* @__PURE__ */ n(i.Backdrop, { className: a }), /* @__PURE__ */ n(i.Popup, {
+		ref: u,
+		initialFocus: s,
+		finalFocus: c,
+		className: e(o, t),
+		...l
 	})] });
-}), l = t.forwardRef(function({ className: t, ...r }, a) {
+}), p = t.forwardRef(function({ className: t, ...r }, a) {
 	return /* @__PURE__ */ n(i.Title, {
 		ref: a,
-		className: e("sn:m-0 sn:text-title sn:text-default", t),
+		className: e(s, t),
 		...r
 	});
-}), u = t.forwardRef(function({ className: t, ...r }, a) {
+}), m = t.forwardRef(function({ className: t, ...r }, a) {
 	return /* @__PURE__ */ n(i.Description, {
 		ref: a,
-		className: e("sn:-mt-3 sn:mb-0 sn:text-caption sn:text-muted", t),
+		className: e(c, t),
 		...r
 	});
-}), d = t.forwardRef(function({ className: t, ...r }, i) {
+}), h = t.forwardRef(function({ className: t, ...r }, i) {
 	return /* @__PURE__ */ n("div", {
 		ref: i,
 		className: e("sn:mt-2 sn:flex sn:justify-end sn:gap-2", t),
@@ -46,4 +49,4 @@ var o = t.forwardRef(function(e, t) {
 	});
 });
 //#endregion
-export { a as Dialog, s as DialogClose, u as DialogDescription, d as DialogFooter, c as DialogPopup, l as DialogTitle, o as DialogTrigger };
+export { l as Dialog, d as DialogClose, m as DialogDescription, h as DialogFooter, f as DialogPopup, p as DialogTitle, u as DialogTrigger, a as backdropClass, c as dialogDescriptionClass, o as dialogPopupClass, s as dialogTitleClass };

package/dist/components/empty-state.d.ts

@@ -0,0 +1,11 @@
+import * as React from 'react';
+export interface EmptyStateProps {
+    /** lucide 아이콘 (24px로 맞춰져요) */
+    icon?: React.ReactNode;
+    title: React.ReactNode;
+    description?: React.ReactNode;
+    /** 다음에 할 행동 하나. 보통 <Button> */
+    action?: React.ReactNode;
+    className?: string;
+}
+export declare function EmptyState({ icon, title, description, action, className }: EmptyStateProps): React.JSX.Element;

package/dist/components/empty-state.js

@@ -0,0 +1,17 @@
+"use client";
+import { StateLayout as e } from "./state-layout.js";
+import "react";
+import { jsx as t } from "react/jsx-runtime";
+//#region src/components/empty-state.tsx
+function n({ icon: n, title: r, description: i, action: a, className: o }) {
+	return /* @__PURE__ */ t(e, {
+		icon: n,
+		iconClassName: "sn:text-muted",
+		title: r,
+		description: i,
+		className: o,
+		children: a
+	});
+}
+//#endregion
+export { n as EmptyState };

package/dist/components/error-state.d.ts

@@ -0,0 +1,12 @@
+import * as React from 'react';
+export interface ErrorStateProps {
+    /** 기본값: triangle-alert */
+    icon?: React.ReactNode;
+    title: React.ReactNode;
+    description?: React.ReactNode;
+    /** 있으면 "다시 시도" 버튼을 보여 줘요 */
+    onRetry?: () => void;
+    retryLabel?: string;
+    className?: string;
+}
+export declare function ErrorState({ icon, title, description, onRetry, retryLabel, className }: ErrorStateProps): React.JSX.Element;

package/dist/components/error-state.js

@@ -0,0 +1,24 @@
+"use client";
+import { Button as e } from "./button.js";
+import { StateLayout as t } from "./state-layout.js";
+import "react";
+import { RefreshCw as n, TriangleAlert as r } from "lucide-react";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+//#region src/components/error-state.tsx
+function o({ icon: o = /* @__PURE__ */ i(r, {}), title: s, description: c, onRetry: l, retryLabel: u = "다시 시도", className: d }) {
+	return /* @__PURE__ */ i(t, {
+		role: "alert",
+		icon: o,
+		iconClassName: "sn:text-danger",
+		title: s,
+		description: c,
+		className: d,
+		children: l && /* @__PURE__ */ a(e, {
+			variant: "secondary",
+			onClick: l,
+			children: [/* @__PURE__ */ i(n, {}), u]
+		})
+	});
+}
+//#endregion
+export { o as ErrorState };

package/dist/components/field.d.ts

@@ -0,0 +1,13 @@
+import * as React from 'react';
+export interface FieldProps {
+    label: React.ReactNode;
+    description?: React.ReactNode;
+    /** invalid일 때만 보이고, 그때는 description 자리를 대신해요 */
+    error?: React.ReactNode;
+    /** 안의 Input에 자동으로 전달돼요. Input에는 invalid를 따로 주지 않아요 */
+    invalid?: boolean;
+    disabled?: boolean;
+    className?: string;
+    children: React.ReactNode;
+}
+export declare const Field: React.ForwardRefExoticComponent<FieldProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/field.js

@@ -0,0 +1,33 @@
+"use client";
+import { cn as e } from "../lib/cn.js";
+import * as t from "react";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+import { Field as i } from "@base-ui/react/field";
+//#region src/components/field.tsx
+var a = t.forwardRef(function({ label: t, description: a, error: o, invalid: s, disabled: c, className: l, children: u }, d) {
+	let f = s && !!o;
+	return /* @__PURE__ */ r(i.Root, {
+		ref: d,
+		invalid: s,
+		disabled: c,
+		className: e("sn:flex sn:flex-col sn:gap-2 sn:font-sans", l),
+		children: [
+			/* @__PURE__ */ n(i.Label, {
+				className: "sn:text-label sn:text-default",
+				children: t
+			}),
+			u,
+			a && !f && /* @__PURE__ */ n(i.Description, {
+				className: "sn:m-0 sn:text-caption sn:text-muted",
+				children: a
+			}),
+			f && /* @__PURE__ */ n(i.Error, {
+				match: !0,
+				className: "sn:m-0 sn:text-caption sn:text-danger",
+				children: o
+			})
+		]
+	});
+});
+//#endregion
+export { a as Field };

package/dist/components/file-upload.d.ts

@@ -0,0 +1,57 @@
+import * as React from 'react';
+/** 바이트를 "2.4 MB"처럼 표시 */
+export declare function formatBytes(bytes: number): string;
+export interface FileRejection {
+    file: File;
+    reason: 'type' | 'size' | 'count';
+    /** 기본 문구. 바꾸려면 이 값 대신 직접 보여 주세요 */
+    message: string;
+}
+export interface FileDropzoneProps {
+    onFilesChange: (accepted: File[], rejected: FileRejection[]) => void;
+    /** 예: ".pdf", "image/*", "image/png,image/jpeg" */
+    accept?: string;
+    multiple?: boolean;
+    /** 남은 개수. multiple일 때만 */
+    maxFiles?: number;
+    /** 파일 하나의 최대 크기(바이트) */
+    maxSize?: number;
+    variant?: 'file' | 'image';
+    /** 영역 안 안내 문구. Field 밖에서 쓰면 버튼 이름이 돼요 */
+    title?: React.ReactNode;
+    description?: React.ReactNode;
+    invalid?: boolean;
+    disabled?: boolean;
+    name?: string;
+    id?: string;
+    className?: string;
+}
+/** Input처럼 Field로 감싸면 라벨·설명·에러·invalid·disabled가 연결돼요 */
+export declare function FileDropzone({ onFilesChange, accept, multiple, maxFiles, maxSize, variant, title, description, invalid, disabled, name, id, className }: FileDropzoneProps): React.JSX.Element;
+export interface FileItemData {
+    id: string;
+    name: string;
+    /** 바이트 */
+    size?: number;
+    /** MIME. 이미지 여부 판단 */
+    type?: string;
+    status: 'uploading' | 'done' | 'error';
+    /** 0~100 */
+    progress?: number;
+    /** 무엇이 실패했고 어떻게 고치는지 */
+    error?: string;
+    /** 완료된 파일을 열 주소 */
+    url?: string;
+    /** 썸네일: 서버 주소, data URL, blob URL 모두 가능 */
+    previewUrl?: string;
+    /** 방금 고른 로컬 파일. previewUrl이 없으면 blob URL을 만들어 미리보기에 써요 */
+    file?: File;
+}
+export interface FileListProps {
+    items: FileItemData[];
+    layout?: 'list' | 'grid';
+    onRemove?: (id: string) => void;
+    onRetry?: (id: string) => void;
+    className?: string;
+}
+export declare function FileList({ items, layout, onRemove, onRetry, className }: FileListProps): React.JSX.Element;

package/dist/components/file-upload.js

@@ -0,0 +1,238 @@
+"use client";
+import { cn as e } from "../lib/cn.js";
+import { Button as t } from "./button.js";
+import { Progress as n } from "./progress.js";
+import { Link as r } from "./link.js";
+import * as i from "react";
+import { CircleAlert as a, File as o, Image as s, RefreshCw as c, Upload as l, X as u } from "lucide-react";
+import { Fragment as d, jsx as f, jsxs as p } from "react/jsx-runtime";
+import { Field as m } from "@base-ui/react/field";
+//#region src/components/file-upload.tsx
+function h(e) {
+	if (e < 1024) return `${e} B`;
+	let t = [
+		"KB",
+		"MB",
+		"GB"
+	], n = e / 1024, r = 0;
+	for (; n >= 1024 && r < t.length - 1;) n /= 1024, r++;
+	return `${Number(n.toFixed(1))} ${t[r]}`;
+}
+function g(e, t) {
+	if (!t) return !0;
+	let n = e.name.toLowerCase(), r = e.type.toLowerCase();
+	return t.split(",").map((e) => e.trim().toLowerCase()).filter(Boolean).some((e) => e.startsWith(".") ? n.endsWith(e) : e.endsWith("/*") ? r.startsWith(e.slice(0, -1)) : r === e);
+}
+function _(e, { accept: t, maxSize: n, maxFiles: r, multiple: i }) {
+	let a = i ? r ?? Infinity : 1, o = [], s = [];
+	for (let r of e) g(r, t) ? n !== void 0 && r.size > n ? s.push({
+		file: r,
+		reason: "size",
+		message: `${r.name}: ${h(n)}보다 큰 파일은 올릴 수 없어요.`
+	}) : o.length >= a ? s.push({
+		file: r,
+		reason: "count",
+		message: a <= 0 ? "더 올릴 수 없어요. 파일을 삭제한 뒤 다시 골라 주세요." : `${a}개까지 올릴 수 있어요.`
+	}) : o.push(r) : s.push({
+		file: r,
+		reason: "type",
+		message: `${r.name}: 올릴 수 없는 형식이에요. ${t} 파일만 올려 주세요.`
+	});
+	return {
+		accepted: o,
+		rejected: s
+	};
+}
+function v({ onFilesChange: t, accept: n, multiple: r, maxFiles: a, maxSize: o, variant: c = "file", title: u, description: h, invalid: g, disabled: v, name: y, id: b, className: x }) {
+	let S = i.useRef(null), [C, w] = i.useState(!1), [T, E] = i.useState(), D = i.useId(), O = (e) => {
+		if (!e.length) return;
+		let { accepted: i, rejected: s } = _(e, {
+			accept: n,
+			maxSize: o,
+			maxFiles: a,
+			multiple: r
+		});
+		E(s.length ? s[0].message + (s.length > 1 ? ` (외 ${s.length - 1}개)` : "") : void 0), t(i, s);
+	}, k = g || !!T, A = c === "image" ? s : l;
+	return /* @__PURE__ */ p(d, { children: [/* @__PURE__ */ p(m.Control, {
+		render: /* @__PURE__ */ f("button", { type: "button" }),
+		id: b,
+		disabled: v,
+		"aria-describedby": D,
+		"data-dragging": C ? "" : void 0,
+		"aria-invalid": g || void 0,
+		"data-invalid": k ? "" : void 0,
+		onClick: () => S.current?.click(),
+		onDragEnter: (e) => {
+			e.preventDefault(), v || w(!0);
+		},
+		onDragOver: (e) => e.preventDefault(),
+		onDragLeave: (e) => {
+			e.currentTarget.contains(e.relatedTarget) || w(!1);
+		},
+		onDrop: (e) => {
+			e.preventDefault(), w(!1), v || O([...e.dataTransfer.files]);
+		},
+		className: e("sn:group sn:box-border sn:flex sn:w-full sn:flex-col sn:items-center sn:gap-2 sn:rounded-lg sn:border sn:border-dashed sn:border-strong sn:bg-surface sn:px-4 sn:py-6 sn:font-sans sn:text-center sn:cursor-pointer sn:transition-colors sn:duration-(--sn-duration-fast) sn:ease-standard sn:hover:not-disabled:bg-subtle sn:data-dragging:border-focus sn:data-dragging:bg-subtle sn:data-invalid:border-danger sn:aria-invalid:border-danger sn:focus-visible:outline-2 sn:focus-visible:outline-offset-2 sn:focus-visible:outline-focus sn:disabled:cursor-not-allowed sn:disabled:opacity-(--sn-opacity-disabled) sn:motion-reduce:transition-none", x),
+		children: [
+			/* @__PURE__ */ f(A, { className: "sn:size-6 sn:text-muted sn:group-data-invalid:text-danger sn:group-aria-invalid:text-danger" }),
+			/* @__PURE__ */ f("span", {
+				className: "sn:text-body-strong sn:text-default",
+				children: u ?? (c === "image" ? "이미지를 끌어다 놓거나 눌러서 고르세요" : "파일을 끌어다 놓거나 눌러서 고르세요")
+			}),
+			/* @__PURE__ */ f("span", {
+				id: D,
+				"aria-live": "polite",
+				className: e("sn:text-caption", T ? "sn:text-danger" : "sn:text-muted"),
+				children: T ?? h
+			})
+		]
+	}), /* @__PURE__ */ f("input", {
+		ref: S,
+		type: "file",
+		hidden: !0,
+		name: y,
+		accept: n,
+		multiple: r,
+		disabled: v,
+		onChange: (e) => {
+			O([...e.target.files ?? []]), e.target.value = "";
+		}
+	})] });
+}
+function y(e) {
+	let [t, n] = i.useState(), r = (e.type ?? e.file?.type ?? "").startsWith("image/");
+	return i.useEffect(() => {
+		if (e.previewUrl || !e.file || !r) return;
+		let t = URL.createObjectURL(e.file);
+		return n(t), () => URL.revokeObjectURL(t);
+	}, [
+		e.previewUrl,
+		e.file,
+		r
+	]), e.previewUrl ?? t;
+}
+function b({ items: t, layout: n = "list", onRemove: r, onRetry: i, className: a }) {
+	let o = n === "grid" ? S : x;
+	return /* @__PURE__ */ f("ul", {
+		className: e("sn:m-0 sn:list-none sn:p-0 sn:font-sans", n === "grid" ? "sn:flex sn:flex-wrap sn:gap-3" : "sn:flex sn:flex-col sn:gap-2", a),
+		children: t.map((e) => /* @__PURE__ */ f(o, {
+			item: e,
+			onRemove: r,
+			onRetry: i
+		}, e.id))
+	});
+}
+function x({ item: t, onRemove: i, onRetry: a }) {
+	let s = t.status === "error";
+	return /* @__PURE__ */ p("li", {
+		className: e("sn:box-border sn:flex sn:items-center sn:gap-3 sn:rounded-md sn:border sn:bg-surface sn:p-3", s ? "sn:border-danger" : "sn:border-default"),
+		children: [
+			/* @__PURE__ */ f("span", {
+				className: "sn:flex sn:size-8 sn:shrink-0 sn:items-center sn:justify-center sn:rounded-md sn:bg-subtle",
+				children: /* @__PURE__ */ f(o, { className: e("sn:size-4", s ? "sn:text-danger" : "sn:text-muted") })
+			}),
+			/* @__PURE__ */ p("div", {
+				className: "sn:flex sn:min-w-0 sn:flex-1 sn:flex-col sn:gap-1",
+				children: [
+					/* @__PURE__ */ p("div", {
+						className: "sn:flex sn:items-center sn:justify-between sn:gap-2",
+						children: [t.status === "done" && t.url ? /* @__PURE__ */ f(r, {
+							href: t.url,
+							target: "_blank",
+							rel: "noopener noreferrer",
+							className: "sn:min-w-0 sn:truncate sn:text-body",
+							children: t.name
+						}) : /* @__PURE__ */ f("span", {
+							className: "sn:min-w-0 sn:truncate sn:text-body sn:text-default",
+							children: t.name
+						}), /* @__PURE__ */ f("span", {
+							className: "sn:shrink-0 sn:font-mono sn:text-caption sn:text-muted",
+							children: t.status === "uploading" ? `${Math.round(t.progress ?? 0)}%` : t.size === void 0 ? null : h(t.size)
+						})]
+					}),
+					t.status === "uploading" && /* @__PURE__ */ f(n, {
+						value: t.progress ?? 0,
+						"aria-label": `${t.name} 올리는 중`
+					}),
+					s && t.error && /* @__PURE__ */ f("span", {
+						className: "sn:text-caption sn:text-danger",
+						children: t.error
+					})
+				]
+			}),
+			/* @__PURE__ */ f(C, {
+				item: t,
+				onRemove: i,
+				onRetry: a,
+				variant: "ghost"
+			})
+		]
+	});
+}
+function S({ item: t, onRemove: r, onRetry: i }) {
+	let o = t.status === "error", c = y(t);
+	return /* @__PURE__ */ p("li", {
+		className: "sn:flex sn:w-24 sn:flex-col sn:gap-1",
+		children: [
+			/* @__PURE__ */ p("div", {
+				className: e("sn:relative sn:box-border sn:flex sn:size-24 sn:flex-col sn:justify-between sn:overflow-hidden sn:rounded-md sn:border sn:bg-subtle sn:p-1", o ? "sn:border-danger" : "sn:border-default"),
+				children: [
+					c && !o ? /* @__PURE__ */ f("img", {
+						src: c,
+						alt: t.name,
+						className: "sn:absolute sn:inset-0 sn:size-full sn:object-cover"
+					}) : /* @__PURE__ */ f("span", {
+						className: "sn:absolute sn:inset-0 sn:flex sn:items-center sn:justify-center",
+						children: o ? /* @__PURE__ */ f(a, { className: "sn:size-6 sn:text-danger" }) : /* @__PURE__ */ f(s, { className: "sn:size-6 sn:text-muted" })
+					}),
+					/* @__PURE__ */ f("div", {
+						className: "sn:relative sn:flex sn:justify-end",
+						children: /* @__PURE__ */ f(C, {
+							item: t,
+							onRemove: r,
+							onRetry: i,
+							variant: "secondary"
+						})
+					}),
+					t.status === "uploading" && /* @__PURE__ */ f("div", {
+						className: "sn:relative",
+						children: /* @__PURE__ */ f(n, {
+							value: t.progress ?? 0,
+							"aria-label": `${t.name} 올리는 중`
+						})
+					})
+				]
+			}),
+			/* @__PURE__ */ f("span", {
+				className: e("sn:truncate sn:text-caption", o ? "sn:text-danger" : "sn:text-muted"),
+				title: t.name,
+				children: t.name
+			}),
+			o && t.error && /* @__PURE__ */ f("span", {
+				className: "sn:sr-only",
+				children: t.error
+			})
+		]
+	});
+}
+function C({ item: e, onRemove: n, onRetry: r, variant: i }) {
+	return /* @__PURE__ */ p("div", {
+		className: "sn:flex sn:shrink-0",
+		children: [e.status === "error" && r && /* @__PURE__ */ f(t, {
+			size: "icon-sm",
+			variant: i,
+			"aria-label": `${e.name} 다시 시도`,
+			onClick: () => r(e.id),
+			children: /* @__PURE__ */ f(c, {})
+		}), n && /* @__PURE__ */ f(t, {
+			size: "icon-sm",
+			variant: i,
+			"aria-label": `${e.name} 삭제`,
+			onClick: () => n(e.id),
+			children: /* @__PURE__ */ f(u, {})
+		})]
+	});
+}
+//#endregion
+export { v as FileDropzone, b as FileList, h as formatBytes };

package/dist/components/input.d.ts

@@ -1,4 +1,5 @@
 import * as React from 'react';
+export declare const inputClass = "sn:box-border sn:m-0 sn:w-full sn:min-w-0 sn:rounded-md sn:border sn:border-default sn:bg-surface sn:px-3 sn:font-sans sn:text-body sn:text-default sn:placeholder:text-muted sn:transition-colors sn:duration-(--sn-duration-fast) sn:ease-standard sn:hover:not-data-disabled:border-strong sn:focus-visible:outline-2 sn:focus-visible:outline-offset-2 sn:focus-visible:outline-focus sn:aria-invalid:focus-visible:outline-danger sn:data-invalid:focus-visible:outline-danger sn:aria-invalid:border-danger sn:hover:aria-invalid:border-danger sn:data-invalid:border-danger sn:data-disabled:cursor-not-allowed sn:data-disabled:opacity-(--sn-opacity-disabled)";
 export interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'className' | 'size'> {
     /** 에러 상태. aria-invalid로 전달돼요 */
     invalid?: boolean;

package/dist/components/input.js

@@ -4,13 +4,13 @@ import * as t from "react";
 import { jsx as n } from "react/jsx-runtime";
 import { Input as r } from "@base-ui/react/input";
 //#region src/components/input.tsx
-var i = t.forwardRef(function({ invalid: t, className: i, ...a }, o) {
+var i = "sn:box-border sn:m-0 sn:w-full sn:min-w-0 sn:rounded-md sn:border sn:border-default sn:bg-surface sn:px-3 sn:font-sans sn:text-body sn:text-default sn:placeholder:text-muted sn:transition-colors sn:duration-(--sn-duration-fast) sn:ease-standard sn:hover:not-data-disabled:border-strong sn:focus-visible:outline-2 sn:focus-visible:outline-offset-2 sn:focus-visible:outline-focus sn:aria-invalid:focus-visible:outline-danger sn:data-invalid:focus-visible:outline-danger sn:aria-invalid:border-danger sn:hover:aria-invalid:border-danger sn:data-invalid:border-danger sn:data-disabled:cursor-not-allowed sn:data-disabled:opacity-(--sn-opacity-disabled)", a = t.forwardRef(function({ invalid: t, className: a, ...o }, s) {
 	return /* @__PURE__ */ n(r, {
-		ref: o,
+		ref: s,
 		"aria-invalid": t || void 0,
-		className: e("sn:box-border sn:m-0 sn:h-8 sn:w-full sn:min-w-0 sn:rounded-md sn:border sn:border-default sn:bg-surface sn:px-3 sn:font-sans sn:text-body sn:text-default sn:placeholder:text-muted sn:transition-colors sn:duration-(--sn-duration-fast) sn:ease-standard sn:hover:not-data-disabled:border-strong sn:focus-visible:outline-2 sn:focus-visible:outline-offset-2 sn:focus-visible:outline-focus sn:aria-invalid:border-danger sn:hover:aria-invalid:border-danger sn:data-invalid:border-danger sn:data-disabled:cursor-not-allowed sn:data-disabled:opacity-(--sn-opacity-disabled)", i),
-		...a
+		className: e("sn:h-8", i, a),
+		...o
 	});
 });
 //#endregion
-export { i as Input };
+export { a as Input, i as inputClass };

package/dist/components/link.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+export interface LinkProps extends Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'className'> {
+    /** 새 탭으로 열고 external-link 아이콘을 붙여요 */
+    external?: boolean;
+    className?: string;
+    /** 다른 링크 컴포넌트로 렌더링 (예: render={<NextLink href="/docs" />}) */
+    render?: React.ReactElement<Record<string, unknown>>;
+}
+export declare const Link: React.ForwardRefExoticComponent<LinkProps & React.RefAttributes<HTMLAnchorElement>>;

package/dist/components/link.js

@@ -0,0 +1,30 @@
+"use client";
+import { cn as e } from "../lib/cn.js";
+import * as t from "react";
+import { ExternalLink as n } from "lucide-react";
+import { Fragment as r, jsx as i, jsxs as a } from "react/jsx-runtime";
+//#region src/components/link.tsx
+var o = "sn:rounded-sm sn:text-default sn:underline sn:underline-offset-2 sn:transition-colors sn:duration-(--sn-duration-fast) sn:ease-standard sn:hover:text-muted sn:focus-visible:outline-2 sn:focus-visible:outline-offset-2 sn:focus-visible:outline-focus sn:motion-reduce:transition-none", s = t.forwardRef(function({ external: s, className: c, render: l, children: u, ...d }, f) {
+	let p = s ? /* @__PURE__ */ a(r, { children: [
+		u,
+		/* @__PURE__ */ i(n, { className: "sn:ml-1 sn:inline-block sn:size-4 sn:align-text-bottom" }),
+		/* @__PURE__ */ i("span", {
+			className: "sn:sr-only",
+			children: "(새 탭에서 열림)"
+		})
+	] }) : u, m = {
+		ref: f,
+		className: e(o, c),
+		...s && {
+			target: "_blank",
+			rel: "noopener noreferrer"
+		},
+		...d
+	};
+	return l ? t.cloneElement(l, m, p) : /* @__PURE__ */ i("a", {
+		...m,
+		children: p
+	});
+});
+//#endregion
+export { s as Link };

package/dist/components/menu.d.ts

@@ -0,0 +1,33 @@
+import * as React from 'react';
+export interface MenuProps {
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    children?: React.ReactNode;
+}
+export declare function Menu({ onOpenChange, ...props }: MenuProps): React.JSX.Element;
+export interface MenuTriggerProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'className'> {
+    className?: string;
+    /** 보통 sonic-ui Button: render={<Button size="icon-md" variant="ghost" aria-label="더 보기" />} */
+    render?: React.ReactElement;
+}
+export declare const MenuTrigger: React.ForwardRefExoticComponent<MenuTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+export interface MenuPopupProps {
+    className?: string;
+    children?: React.ReactNode;
+}
+export declare const MenuPopup: React.ForwardRefExoticComponent<MenuPopupProps & React.RefAttributes<HTMLDivElement>>;
+export interface MenuItemProps {
+    /** danger: 삭제처럼 위험한 동작. 맨 아래, 구분선 뒤에 둬요 */
+    tone?: 'default' | 'danger';
+    onClick?: () => void;
+    disabled?: boolean;
+    /** 고른 뒤 메뉴를 닫을지 (기본 true) */
+    closeOnClick?: boolean;
+    className?: string;
+    children?: React.ReactNode;
+}
+export declare const MenuItem: React.ForwardRefExoticComponent<MenuItemProps & React.RefAttributes<HTMLDivElement>>;
+export declare function MenuSeparator({ className }: {
+    className?: string;
+}): React.JSX.Element;

package/dist/components/menu.js

@@ -0,0 +1,44 @@
+"use client";
+import { cn as e } from "../lib/cn.js";
+import { itemClass as t, popupClass as n } from "./popup-styles.js";
+import * as r from "react";
+import { jsx as i } from "react/jsx-runtime";
+import { Menu as a } from "@base-ui/react/menu";
+//#region src/components/menu.tsx
+function o({ onOpenChange: e, ...t }) {
+	return /* @__PURE__ */ i(a.Root, {
+		...t,
+		onOpenChange: e && ((t) => e(t))
+	});
+}
+var s = r.forwardRef(function(e, t) {
+	return /* @__PURE__ */ i(a.Trigger, {
+		ref: t,
+		...e
+	});
+}), c = r.forwardRef(function({ className: t, children: r }, o) {
+	return /* @__PURE__ */ i(a.Portal, { children: /* @__PURE__ */ i(a.Positioner, {
+		sideOffset: 4,
+		align: "start",
+		className: "sn:z-50 sn:outline-none",
+		children: /* @__PURE__ */ i(a.Popup, {
+			ref: o,
+			className: e(n, "sn:min-w-48", t),
+			children: r
+		})
+	}) });
+}), l = r.forwardRef(function({ tone: n = "default", onClick: r, disabled: o, closeOnClick: s, className: c, children: l }, u) {
+	return /* @__PURE__ */ i(a.Item, {
+		ref: u,
+		onClick: r && (() => r()),
+		disabled: o,
+		closeOnClick: s,
+		className: e(t, n === "danger" ? "sn:text-danger" : "sn:text-default", c),
+		children: l
+	});
+});
+function u({ className: t }) {
+	return /* @__PURE__ */ i(a.Separator, { className: e("sn:my-1 sn:h-px sn:border-0 sn:bg-(--sn-color-border-default)", t) });
+}
+//#endregion
+export { o as Menu, l as MenuItem, c as MenuPopup, u as MenuSeparator, s as MenuTrigger };

package/dist/components/popover.d.ts

@@ -0,0 +1,26 @@
+import * as React from 'react';
+export interface PopoverProps {
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    children?: React.ReactNode;
+}
+export declare function Popover({ onOpenChange, ...props }: PopoverProps): React.JSX.Element;
+export interface PopoverButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'className'> {
+    className?: string;
+    render?: React.ReactElement;
+}
+export declare const PopoverTrigger: React.ForwardRefExoticComponent<PopoverButtonProps & React.RefAttributes<HTMLButtonElement>>;
+export declare const PopoverClose: React.ForwardRefExoticComponent<PopoverButtonProps & React.RefAttributes<HTMLButtonElement>>;
+export interface PopoverPopupProps {
+    side?: 'top' | 'bottom' | 'left' | 'right';
+    className?: string;
+    children?: React.ReactNode;
+}
+export declare const PopoverPopup: React.ForwardRefExoticComponent<PopoverPopupProps & React.RefAttributes<HTMLDivElement>>;
+export declare const PopoverTitle: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<HTMLHeadingElement>, "className"> & {
+    className?: string;
+} & React.RefAttributes<HTMLHeadingElement>>;
+export declare const PopoverDescription: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<HTMLParagraphElement>, "className"> & {
+    className?: string;
+} & React.RefAttributes<HTMLParagraphElement>>;