@xonic0506/sonic-ui 0.1.0 → 0.2.0

package/dist/components/button.d.ts

@@ -1,9 +1,18 @@
 import * as React from 'react';
-export interface ButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'className'> {
+interface ButtonBaseProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'className'> {
     variant?: 'primary' | 'secondary' | 'ghost' | 'danger';
-    size?: 'sm' | 'md' | 'lg';
     className?: string;
     /** 다른 요소로 렌더링할 때 (예: render={<a href="/" />}) */
     render?: React.ReactElement;
+    /** 진행 중: 스피너 표시, 클릭 막기, 포커스 유지, aria-busy */
+    loading?: boolean;
 }
+/** 아이콘만 있는 버튼은 읽을 글자가 없어서 aria-label이 필수예요 */
+export type ButtonProps = ButtonBaseProps & ({
+    size?: 'sm' | 'md' | 'lg';
+} | {
+    size: 'icon-sm' | 'icon-md' | 'icon-lg';
+    'aria-label': string;
+});
 export declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
+export {};

package/dist/components/button.js

@@ -3,9 +3,10 @@ import { cn as e } from "../lib/cn.js";
 import * as t from "react";
 import { Button as n } from "@base-ui/react/button";
 import { cva as r } from "class-variance-authority";
-import { jsx as i } from "react/jsx-runtime";
+import { LoaderCircle as i } from "lucide-react";
+import { Fragment as a, jsx as o, jsxs as s } from "react/jsx-runtime";
 //#region src/components/button.tsx
-var a = r("sn:box-border sn:inline-flex sn:items-center sn:justify-center sn:gap-2 sn:whitespace-nowrap sn:rounded-md sn:border sn:border-transparent sn:font-sans sn:cursor-pointer sn:select-none sn:transition-colors sn:duration-(--sn-duration-fast) sn:ease-standard sn:focus-visible:outline-2 sn:focus-visible:outline-offset-2 sn:focus-visible:outline-focus sn:data-disabled:cursor-not-allowed sn:data-disabled:opacity-(--sn-opacity-disabled)", {
+var c = r("sn:box-border sn:inline-flex sn:items-center sn:justify-center sn:gap-2 sn:whitespace-nowrap sn:rounded-md sn:border sn:border-transparent sn:font-sans sn:cursor-pointer sn:select-none sn:transition-colors sn:duration-(--sn-duration-fast) sn:ease-standard sn:focus-visible:outline-2 sn:focus-visible:outline-offset-2 sn:focus-visible:outline-focus sn:data-disabled:not-data-loading:cursor-not-allowed sn:data-disabled:not-data-loading:opacity-(--sn-opacity-disabled) sn:data-loading:cursor-progress sn:[&_svg]:pointer-events-none sn:[&_svg]:shrink-0", {
 	variants: {
 		variant: {
 			primary: "sn:bg-primary sn:text-on-primary sn:hover:not-data-disabled:bg-primary-hover",
@@ -14,26 +15,35 @@ var a = r("sn:box-border sn:inline-flex sn:items-center sn:justify-center sn:gap
 			danger: "sn:bg-danger sn:text-on-danger"
 		},
 		size: {
-			sm: "sn:h-7 sn:px-2 sn:text-label",
-			md: "sn:h-8 sn:px-3 sn:text-body-strong",
-			lg: "sn:h-10 sn:px-4 sn:text-body-strong"
+			sm: "sn:h-7 sn:px-2 sn:text-label sn:[&_svg]:size-4",
+			md: "sn:h-8 sn:px-3 sn:text-body-strong sn:[&_svg]:size-4",
+			lg: "sn:h-10 sn:px-4 sn:text-body-strong sn:[&_svg]:size-5",
+			"icon-sm": "sn:size-7 sn:p-0 sn:[&_svg]:size-4",
+			"icon-md": "sn:size-8 sn:p-0 sn:[&_svg]:size-4",
+			"icon-lg": "sn:size-10 sn:p-0 sn:[&_svg]:size-5"
 		}
 	},
 	defaultVariants: {
 		variant: "primary",
 		size: "md"
 	}
-}), o = t.forwardRef(function({ variant: t, size: r, className: o, render: s, ...c }, l) {
-	return /* @__PURE__ */ i(n, {
-		ref: l,
-		render: s,
-		nativeButton: !s || s.type === "button",
-		className: e(a({
+}), l = t.forwardRef(function({ variant: t, size: r, className: l, render: u, loading: d, disabled: f, children: p, ...m }, h) {
+	let g = /* @__PURE__ */ o(i, { className: "sn:animate-[sn-spin_var(--sn-duration-loop)_linear_infinite] sn:motion-reduce:animate-none" });
+	return /* @__PURE__ */ o(n, {
+		ref: h,
+		render: u,
+		nativeButton: !u || u.type === "button",
+		disabled: f || d,
+		focusableWhenDisabled: d,
+		"aria-busy": d || void 0,
+		"data-loading": d ? "" : void 0,
+		className: e(c({
 			variant: t,
 			size: r
-		}), o),
-		...c
+		}), l),
+		...m,
+		children: d && r?.startsWith("icon-") ? g : d ? /* @__PURE__ */ s(a, { children: [g, p] }) : p
 	});
 });
 //#endregion
-export { o as Button };
+export { l as Button };

package/dist/components/checkbox.d.ts

@@ -0,0 +1,30 @@
+import * as React from 'react';
+declare const labelClass = "sn:inline-flex sn:items-center sn:gap-2 sn:font-sans sn:text-body sn:text-default sn:cursor-pointer";
+declare const disabledClass = "sn:cursor-not-allowed sn:opacity-(--sn-opacity-disabled)";
+declare const focusClass = "sn:focus-visible:outline-2 sn:focus-visible:outline-offset-2 sn:focus-visible:outline-focus";
+export interface CheckboxProps {
+    checked?: boolean;
+    defaultChecked?: boolean;
+    onCheckedChange?: (checked: boolean) => void;
+    /** 일부만 선택된 상태 (그룹의 상위 항목) */
+    indeterminate?: boolean;
+    disabled?: boolean;
+    /** CheckboxGroup 안에서 쓰는 값 */
+    value?: string;
+    name?: string;
+    className?: string;
+    children?: React.ReactNode;
+}
+export declare const Checkbox: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLElement>>;
+export interface CheckboxGroupProps {
+    /** 그룹 이름 (fieldset legend) */
+    label: React.ReactNode;
+    value?: string[];
+    defaultValue?: string[];
+    onValueChange?: (value: string[]) => void;
+    disabled?: boolean;
+    className?: string;
+    children: React.ReactNode;
+}
+export declare function CheckboxGroup({ label, value, defaultValue, onValueChange, disabled, className, children }: CheckboxGroupProps): React.JSX.Element;
+export { labelClass as choiceLabelClass, disabledClass as choiceDisabledClass, focusClass as choiceFocusClass };

package/dist/components/checkbox.js

@@ -0,0 +1,48 @@
+"use client";
+import { cn as e } from "../lib/cn.js";
+import { boxClass as t } from "./popup-styles.js";
+import * as n from "react";
+import { Check as r, Minus as i } from "lucide-react";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+import { Checkbox as s } from "@base-ui/react/checkbox";
+import { CheckboxGroup as c } from "@base-ui/react/checkbox-group";
+import { Fieldset as l } from "@base-ui/react/fieldset";
+//#region src/components/checkbox.tsx
+var u = "sn:inline-flex sn:items-center sn:gap-2 sn:font-sans sn:text-body sn:text-default sn:cursor-pointer", d = "sn:cursor-not-allowed sn:opacity-(--sn-opacity-disabled)", f = "sn:focus-visible:outline-2 sn:focus-visible:outline-offset-2 sn:focus-visible:outline-focus", p = n.forwardRef(function({ checked: n, defaultChecked: c, onCheckedChange: l, indeterminate: d, disabled: p, value: m, name: h, className: g, children: _ }, v) {
+	return /* @__PURE__ */ o("label", {
+		className: e(u, p && "sn:cursor-not-allowed sn:opacity-(--sn-opacity-disabled)", g),
+		children: [/* @__PURE__ */ a(s.Root, {
+			ref: v,
+			checked: n,
+			defaultChecked: c,
+			onCheckedChange: l && ((e) => l(e)),
+			indeterminate: d,
+			disabled: p,
+			value: m,
+			name: h,
+			className: e(t, f, "sn:data-checked:border-transparent sn:data-checked:bg-primary sn:data-indeterminate:border-transparent sn:data-indeterminate:bg-primary"),
+			children: /* @__PURE__ */ a(s.Indicator, {
+				className: "sn:flex",
+				children: a(d ? i : r, {})
+			})
+		}), _]
+	});
+});
+function m({ label: t, value: n, defaultValue: r, onValueChange: i, disabled: s, className: u, children: d }) {
+	return /* @__PURE__ */ o(l.Root, {
+		className: e("sn:m-0 sn:flex sn:min-w-0 sn:flex-col sn:gap-3 sn:border-0 sn:p-0 sn:font-sans", u),
+		children: [/* @__PURE__ */ a(l.Legend, {
+			className: "sn:p-0 sn:text-label sn:text-default",
+			children: t
+		}), /* @__PURE__ */ a(c, {
+			value: n,
+			defaultValue: r,
+			onValueChange: i && ((e) => i(e)),
+			disabled: s,
+			className: "sn:flex sn:flex-col sn:gap-2",
+			children: d
+		})]
+	});
+}
+//#endregion
+export { p as Checkbox, m as CheckboxGroup, d as choiceDisabledClass, f as choiceFocusClass, u as choiceLabelClass };

package/dist/components/dialog.d.ts

@@ -1,4 +1,8 @@
 import * as React from 'react';
+export declare const backdropClass = "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";
+export declare const dialogPopupClass = "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";
+export declare const dialogTitleClass = "sn:m-0 sn:text-title sn:text-default";
+export declare const dialogDescriptionClass = "sn:-mt-3 sn:mb-0 sn:text-caption sn:text-muted";
 export interface DialogProps {
     open?: boolean;
     defaultOpen?: boolean;
@@ -15,8 +19,15 @@ export declare const DialogTrigger: React.ForwardRefExoticComponent<DialogButton
 export declare const DialogClose: React.ForwardRefExoticComponent<DialogButtonProps & React.RefAttributes<HTMLButtonElement>>;
 export interface DialogPopupProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'className'> {
     className?: string;
+    /** 열릴 때 포커스할 요소 (기본: 팝업 안 첫 포커스 가능 요소) */
+    initialFocus?: React.RefObject<HTMLElement | null>;
+    /** 닫힌 뒤 포커스할 요소 (기본: 트리거나 열기 전 포커스 요소). 코드로 열었을 때 지정해요 */
+    finalFocus?: React.RefObject<HTMLElement | null>;
 }
 export declare const DialogPopup: React.ForwardRefExoticComponent<DialogPopupProps & React.RefAttributes<HTMLDivElement>>;
+export type TextProps<E extends HTMLElement> = Omit<React.HTMLAttributes<E>, 'className'> & {
+    className?: string;
+};
 export declare const DialogTitle: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<HTMLHeadingElement>, "className"> & {
     className?: string;
 } & React.RefAttributes<HTMLHeadingElement>>;

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/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/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>>;

package/dist/components/popover.js

@@ -0,0 +1,50 @@
+"use client";
+import { cn as e } from "../lib/cn.js";
+import { popupClass as t } from "./popup-styles.js";
+import * as n from "react";
+import { jsx as r } from "react/jsx-runtime";
+import { Popover as i } from "@base-ui/react/popover";
+//#region src/components/popover.tsx
+function a({ onOpenChange: e, ...t }) {
+	return /* @__PURE__ */ r(i.Root, {
+		...t,
+		onOpenChange: e && ((t) => e(t))
+	});
+}
+var o = n.forwardRef(function(e, t) {
+	return /* @__PURE__ */ r(i.Trigger, {
+		ref: t,
+		...e
+	});
+}), s = n.forwardRef(function(e, t) {
+	return /* @__PURE__ */ r(i.Close, {
+		ref: t,
+		...e
+	});
+}), c = n.forwardRef(function({ side: n = "bottom", className: a, children: o }, s) {
+	return /* @__PURE__ */ r(i.Portal, { children: /* @__PURE__ */ r(i.Positioner, {
+		side: n,
+		sideOffset: 8,
+		align: "start",
+		className: "sn:z-50 sn:outline-none",
+		children: /* @__PURE__ */ r(i.Popup, {
+			ref: s,
+			className: e(t, "sn:flex sn:w-80 sn:max-w-[calc(100vw-2*var(--sn-space-4))] sn:min-w-0 sn:flex-col sn:gap-3 sn:p-4", a),
+			children: o
+		})
+	}) });
+}), l = n.forwardRef(function({ className: t, ...n }, a) {
+	return /* @__PURE__ */ r(i.Title, {
+		ref: a,
+		className: e("sn:m-0 sn:text-body-strong sn:text-default", t),
+		...n
+	});
+}), u = n.forwardRef(function({ className: t, ...n }, a) {
+	return /* @__PURE__ */ r(i.Description, {
+		ref: a,
+		className: e("sn:-mt-2 sn:mb-0 sn:text-caption sn:text-muted", t),
+		...n
+	});
+});
+//#endregion
+export { a as Popover, s as PopoverClose, u as PopoverDescription, c as PopoverPopup, l as PopoverTitle, o as PopoverTrigger };

package/dist/components/popup-styles.d.ts

@@ -0,0 +1,3 @@
+export declare const popupClass = "sn:box-border sn:min-w-(--anchor-width) sn:max-h-(--available-height) sn:overflow-y-auto sn:origin-(--transform-origin) sn:rounded-lg sn:border sn:border-default sn:bg-surface sn:p-1 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";
+export declare const itemClass = "sn:group sn:flex sn:h-8 sn:cursor-default sn:items-center sn:gap-2 sn:rounded-md sn:px-2 sn:outline-none sn:select-none sn:data-highlighted:bg-subtle sn:data-disabled:opacity-(--sn-opacity-disabled) sn:[&_svg]:size-4 sn:[&_svg]:shrink-0";
+export declare const boxClass = "sn:box-border sn:inline-flex sn:size-4 sn:shrink-0 sn:items-center sn:justify-center sn:rounded-sm sn:border sn:border-strong sn:bg-surface sn:text-on-primary sn:[&_svg]:size-3";

package/dist/components/popup-styles.js

@@ -0,0 +1,5 @@
+"use client";
+//#region src/components/popup-styles.ts
+var e = "sn:box-border sn:min-w-(--anchor-width) sn:max-h-(--available-height) sn:overflow-y-auto sn:origin-(--transform-origin) sn:rounded-lg sn:border sn:border-default sn:bg-surface sn:p-1 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 = "sn:group sn:flex sn:h-8 sn:cursor-default sn:items-center sn:gap-2 sn:rounded-md sn:px-2 sn:outline-none sn:select-none sn:data-highlighted:bg-subtle sn:data-disabled:opacity-(--sn-opacity-disabled) sn:[&_svg]:size-4 sn:[&_svg]:shrink-0", n = "sn:box-border sn:inline-flex sn:size-4 sn:shrink-0 sn:items-center sn:justify-center sn:rounded-sm sn:border sn:border-strong sn:bg-surface sn:text-on-primary sn:[&_svg]:size-3";
+//#endregion
+export { n as boxClass, t as itemClass, e as popupClass };

package/dist/components/progress.d.ts

@@ -0,0 +1,16 @@
+import * as React from 'react';
+interface ProgressBaseProps {
+    value: number;
+    /** 기본 100 */
+    max?: number;
+    className?: string;
+}
+/** 라벨이 없으면 읽을 이름이 없어서 aria-label이 필수예요 */
+export type ProgressProps = ProgressBaseProps & ({
+    label: React.ReactNode;
+} | {
+    label?: undefined;
+    'aria-label': string;
+});
+export declare function Progress({ value, max, className, ...props }: ProgressProps): React.JSX.Element;
+export {};

package/dist/components/progress.js

@@ -0,0 +1,27 @@
+"use client";
+import { cn as e } from "../lib/cn.js";
+import "react";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+import { Progress as r } from "@base-ui/react/progress";
+//#region src/components/progress.tsx
+function i({ value: i, max: a = 100, className: o, ...s }) {
+	let c = s.label;
+	return /* @__PURE__ */ n(r.Root, {
+		value: i,
+		max: a,
+		"aria-label": "aria-label" in s ? s["aria-label"] : void 0,
+		className: e("sn:flex sn:flex-col sn:gap-2 sn:font-sans", o),
+		children: [c != null && /* @__PURE__ */ n("div", {
+			className: "sn:flex sn:items-center sn:gap-2",
+			children: [/* @__PURE__ */ t(r.Label, {
+				className: "sn:min-w-0 sn:flex-1 sn:text-label sn:text-default",
+				children: c
+			}), /* @__PURE__ */ t(r.Value, { className: "sn:font-mono sn:text-caption sn:text-muted" })]
+		}), /* @__PURE__ */ t(r.Track, {
+			className: "sn:h-1 sn:overflow-hidden sn:rounded-full sn:bg-subtle",
+			children: /* @__PURE__ */ t(r.Indicator, { className: "sn:h-full sn:rounded-full sn:bg-primary sn:transition-[width] sn:duration-(--sn-duration-normal) sn:ease-standard sn:motion-reduce:transition-none" })
+		})]
+	});
+}
+//#endregion
+export { i as Progress };

package/dist/components/radio-group.d.ts

@@ -0,0 +1,20 @@
+import * as React from 'react';
+export interface RadioGroupProps {
+    /** 그룹 이름 (fieldset legend) */
+    label: React.ReactNode;
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+    disabled?: boolean;
+    name?: string;
+    className?: string;
+    children: React.ReactNode;
+}
+export declare function RadioGroup({ label, value, defaultValue, onValueChange, disabled, name, className, children }: RadioGroupProps): React.JSX.Element;
+export interface RadioProps {
+    value: string;
+    disabled?: boolean;
+    className?: string;
+    children?: React.ReactNode;
+}
+export declare const Radio: React.ForwardRefExoticComponent<RadioProps & React.RefAttributes<HTMLElement>>;