@thewrong/ui 0.3.0 → 0.4.0

package/README.md

@@ -33,11 +33,11 @@ TypeScript 선언은 ESM용이다. `moduleResolution: "bundler"` 또는 `"nodene
 
 | 분류 | 컴포넌트 |
 |------|----------|
-| 폼 | Button · Input(+PasswordInput) · Textarea · Select · MultiSelect · Switch · Checkbox · Badge |
+| 폼 | Button · Input(+PasswordInput) · Textarea · Select · MultiSelect · Slider · Switch · Checkbox · Badge |
 | 오버레이 | Modal(+SubView/Standard) · Drawer · Popover · Tooltip · InfoTooltip · Toast · ActionToast |
 | 날짜 | DatePicker · DateRangePicker · MonthPicker · DateInput |
 | 데이터 | Table · PaginatedTable · AccordionTable · MiniTable · Pagination · SearchBox |
-| 레이아웃 | TablePageLayout · TableCard · Toolbar · PageTitle |
+| 레이아웃 | TablePageLayout · TableCard · Toolbar · PageTitle · Tabs |
 | 모션/유틸 | AnimatedHeight · Collapsible · LoadingSpinner · cn |
 
 ## 테마 · 토큰

package/dist/components/button/Button.cjs

@@ -1 +1 @@
-const e=require("../../lib/utils.cjs"),t=require("./utils.cjs");let n=require("react"),r=require("react/jsx-runtime");var i=()=>(0,r.jsxs)(`svg`,{className:`animate-button-spinner size-button-spinner-small`,xmlns:`http://www.w3.org/2000/svg`,fill:`none`,viewBox:`0 0 24 24`,children:[(0,r.jsx)(`circle`,{className:`opacity-button-spinner-track`,cx:`12`,cy:`12`,r:`10`,stroke:`currentColor`,strokeWidth:`4`}),(0,r.jsx)(`path`,{className:`opacity-button-spinner-head`,fill:`currentColor`,d:`M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z`})]}),a=(0,n.forwardRef)((a,o)=>{let{variant:s=`primary`,appearance:c=`filled`,size:l=`medium`,display:u=`inline`,loading:d=!1,clickThrottleMs:f=0,leadingIcon:p,trailingIcon:m,className:h=``,children:g,..._}=a,[v,y]=(0,n.useState)(!1),b=(0,n.useRef)(null),x=()=>{f&&(y(!0),b.current&&clearTimeout(b.current),b.current=setTimeout(()=>{y(!1),b.current=null},f))};(0,n.useEffect)(()=>()=>{b.current&&clearTimeout(b.current)},[]);let S=`as`in a&&a.as===`a`,C=(`disabled`in a?a.disabled:!1)||d||v,w=e.cn(t.getButtonBaseClasses(),t.getButtonColorClasses(s,c),t.getButtonSizeClasses(l),t.getButtonDisplayClasses(u),t.getButtonFocusRing(s),d&&`opacity-70 cursor-wait`,S&&C&&`pointer-events-none`,S&&C&&!d&&`opacity-button-disabled`,h);if(S){let e=_,t=t=>{if(C){t.preventDefault();return}x(),e.onClick?.(t)};return(0,r.jsxs)(`a`,{ref:o,className:w,"aria-disabled":C,tabIndex:C?-1:e.tabIndex,...e,onClick:t,children:[d?(0,r.jsx)(i,{}):p,g,!d&&m]})}let T=_,E=e=>{if(C){e.preventDefault();return}x(),T.onClick?.(e)};return(0,r.jsxs)(`button`,{ref:o,className:w,disabled:C,...T,onClick:E,children:[d?(0,r.jsx)(i,{}):p,g,!d&&m]})});a.displayName=`Button`,exports.Button=a;
+const e=require("../../lib/utils.cjs"),t=require("./utils.cjs");let n=require("react"),r=require("react/jsx-runtime");var i=()=>(0,r.jsxs)(`svg`,{className:`animate-button-spinner size-button-spinner-small`,xmlns:`http://www.w3.org/2000/svg`,fill:`none`,viewBox:`0 0 24 24`,children:[(0,r.jsx)(`circle`,{className:`opacity-button-spinner-track`,cx:`12`,cy:`12`,r:`10`,stroke:`currentColor`,strokeWidth:`4`}),(0,r.jsx)(`path`,{className:`opacity-button-spinner-head`,fill:`currentColor`,d:`M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z`})]}),a=(0,n.forwardRef)((a,o)=>{let{variant:s=`primary`,appearance:c=`filled`,size:l=`medium`,display:u=`inline`,loading:d=!1,clickThrottleMs:f=0,leadingIcon:p,trailingIcon:m,className:h=``,children:g,..._}=a,[v,y]=(0,n.useState)(!1),b=(0,n.useRef)(null),x=()=>{f&&(y(!0),b.current&&clearTimeout(b.current),b.current=setTimeout(()=>{y(!1),b.current=null},f))};(0,n.useEffect)(()=>()=>{b.current&&clearTimeout(b.current)},[]);let S=`as`in a&&a.as===`a`,C=(`disabled`in a?a.disabled:!1)||d||v,w=e.cn(t.getButtonBaseClasses(c),t.getButtonColorClasses(s,c),c===`link`?`h-auto min-w-0 border-0 p-0 align-baseline text-start underline hover:decoration-2 hover:underline-offset-2 active:decoration-[3px] active:underline-offset-4 text-[length:inherit] leading-[inherit] font-[inherit]`:t.getButtonSizeClasses(l),c===`link`?`inline`:t.getButtonDisplayClasses(u),t.getButtonFocusRing(s,c),c===`link`&&C&&`no-underline`,d&&`opacity-70 cursor-wait`,S&&C&&`pointer-events-none`,S&&C&&!d&&c!==`link`&&`opacity-button-disabled`,h);if(S){let e=_,t=t=>{if(C){t.preventDefault();return}x(),e.onClick?.(t)};return(0,r.jsxs)(`a`,{ref:o,className:w,"aria-disabled":C,tabIndex:C?-1:e.tabIndex,...e,onClick:t,children:[c===`link`&&(d||p)?(0,r.jsx)(`span`,{className:`inline-flex align-middle`,children:d?(0,r.jsx)(i,{}):p}):d?(0,r.jsx)(i,{}):p,g,!d&&(c===`link`&&m?(0,r.jsx)(`span`,{className:`inline-flex align-middle`,children:m}):m)]})}let T=_,E=e=>{if(C){e.preventDefault();return}x(),T.onClick?.(e)};return(0,r.jsxs)(`button`,{ref:o,className:w,disabled:C,...T,onClick:E,children:[c===`link`&&(d||p)?(0,r.jsx)(`span`,{className:`inline-flex align-middle`,children:d?(0,r.jsx)(i,{}):p}):d?(0,r.jsx)(i,{}):p,g,!d&&(c===`link`&&m?(0,r.jsx)(`span`,{className:`inline-flex align-middle`,children:m}):m)]})});a.displayName=`Button`,exports.Button=a;

package/dist/components/button/Button.d.ts

@@ -6,6 +6,9 @@ import { ButtonBaseProps, ButtonLinkProps } from './types.js';
  * - 저장·정산·전송 같은 **비가역 async 액션**에는 `clickThrottleMs`로 더블클릭을 막는다.
  * - 모달 푸터·모바일 등 부모 폭을 채워야 하면 `display="block"`.
  * - 시각은 버튼이지만 실제 이동이 필요하면 `as="a"` + `href`(링크로 렌더, loading/disabled 동일 동작).
+ * - `appearance="link"`는 문장 안에 배치하며 size와 display를 무시하고 부모 글자 크기·줄높이·글꼴을 상속한다.
+ *   `font-[inherit]`는 font-family만 상속하며, 글자 굵기는 기본 CSS(preflight)의 폼 컨트롤 상속 규칙을 따른다.
+ *   `as="a"`는 문장 사이에서 줄바꿈되며, 기본 button은 브라우저의 인라인 블록으로 배치된다.
  * - 크기와 색상은 `className`으로 덮어쓸 수 있다.
  *
  * @example

package/dist/components/button/Button.esm.js

@@ -29,7 +29,7 @@ var f = () => /* @__PURE__ */ d("svg", {
 	s(() => () => {
 		D.current && clearTimeout(D.current);
 	}, []);
-	let k = "as" in o && o.as === "a", A = ("disabled" in o ? o.disabled : !1) || v || T, j = e(t(), n(m, h), a(g), r(_), i(m), v && "opacity-70 cursor-wait", k && A && "pointer-events-none", k && A && !v && "opacity-button-disabled", S);
+	let k = "as" in o && o.as === "a", A = ("disabled" in o ? o.disabled : !1) || v || T, j = e(t(h), n(m, h), h === "link" ? "h-auto min-w-0 border-0 p-0 align-baseline text-start underline hover:decoration-2 hover:underline-offset-2 active:decoration-[3px] active:underline-offset-4 text-[length:inherit] leading-[inherit] font-[inherit]" : a(g), h === "link" ? "inline" : r(_), i(m, h), h === "link" && A && "no-underline", v && "opacity-70 cursor-wait", k && A && "pointer-events-none", k && A && !v && h !== "link" && "opacity-button-disabled", S);
 	if (k) {
 		let e = w, t = (t) => {
 			if (A) {
@@ -46,9 +46,15 @@ var f = () => /* @__PURE__ */ d("svg", {
 			...e,
 			onClick: t,
 			children: [
-				v ? /* @__PURE__ */ u(f, {}) : b,
+				h === "link" && (v || b) ? /* @__PURE__ */ u("span", {
+					className: "inline-flex align-middle",
+					children: v ? /* @__PURE__ */ u(f, {}) : b
+				}) : v ? /* @__PURE__ */ u(f, {}) : b,
 				C,
-				!v && x
+				!v && (h === "link" && x ? /* @__PURE__ */ u("span", {
+					className: "inline-flex align-middle",
+					children: x
+				}) : x)
 			]
 		});
 	}
@@ -66,9 +72,15 @@ var f = () => /* @__PURE__ */ d("svg", {
 		...M,
 		onClick: N,
 		children: [
-			v ? /* @__PURE__ */ u(f, {}) : b,
+			h === "link" && (v || b) ? /* @__PURE__ */ u("span", {
+				className: "inline-flex align-middle",
+				children: v ? /* @__PURE__ */ u(f, {}) : b
+			}) : v ? /* @__PURE__ */ u(f, {}) : b,
 			C,
-			!v && x
+			!v && (h === "link" && x ? /* @__PURE__ */ u("span", {
+				className: "inline-flex align-middle",
+				children: x
+			}) : x)
 		]
 	});
 });

package/dist/components/button/types.d.ts

@@ -1,12 +1,14 @@
 import { ComponentPropsWithoutRef, ReactNode } from 'react';
 export type ButtonVariant = "primary" | "secondary" | "tertiary" | "danger";
-export type ButtonAppearance = "filled" | "outlined" | "transparent";
+export type ButtonAppearance = "filled" | "outlined" | "transparent" | "link";
 export type ButtonSize = "mini" | "small" | "medium" | "large";
 export type ButtonDisplay = "inline" | "block";
 export interface ButtonCommonProps {
     variant?: ButtonVariant;
     appearance?: ButtonAppearance;
+    /** link 모양에서는 크기 대신 부모의 글자 크기·줄높이·글꼴을 상속한다. 굵기는 기본 CSS의 폼 컨트롤 상속 규칙을 따른다. */
     size?: ButtonSize;
+    /** link 모양에서는 block도 무시하고 문장 안에 배치한다. */
     display?: ButtonDisplay;
     loading?: boolean;
     /** 클릭 후 N ms 동안 추가 클릭 무시 — 더블클릭 방지 */

package/dist/components/button/utils.cjs

@@ -1 +1 @@
-var e=(e=`primary`,t=`filled`)=>({primary:{filled:`border-transparent bg-primary text-fg-inverse hover:bg-primary-hover active:bg-primary-active disabled:bg-bg-disabled disabled:text-fg-disabled`,outlined:`bg-bg-surface text-fg-default border-border-default hover:bg-bg-subtle active:bg-bg-muted disabled:text-fg-disabled disabled:border-border-subtle disabled:bg-transparent`,transparent:`border-transparent bg-transparent text-fg-default hover:bg-bg-subtle active:bg-bg-muted disabled:text-fg-disabled`},secondary:{filled:`border-transparent bg-primary-subtle text-primary-fg hover:bg-button-secondary-hover active:bg-button-secondary-active disabled:bg-bg-disabled disabled:text-fg-disabled`,outlined:`bg-bg-surface text-fg-muted border-border-subtle hover:bg-bg-subtle active:bg-bg-muted disabled:text-fg-disabled disabled:border-border-faint disabled:bg-transparent`,transparent:`border-transparent bg-transparent text-fg-muted hover:bg-bg-subtle active:bg-bg-muted disabled:text-fg-disabled`},tertiary:{filled:`border-transparent bg-bg-subtle text-fg-muted hover:bg-bg-muted active:bg-bg-disabled disabled:bg-bg-page disabled:text-fg-disabled`,outlined:`bg-bg-surface text-fg-subtle border-border-subtle hover:bg-bg-page active:bg-bg-subtle disabled:text-fg-disabled disabled:border-border-faint disabled:bg-transparent`,transparent:`border-transparent bg-transparent text-fg-subtle hover:bg-bg-page active:bg-bg-subtle disabled:text-fg-disabled`},danger:{filled:`border-transparent bg-error text-fg-inverse hover:bg-error-hover active:bg-error-active disabled:bg-bg-disabled disabled:text-fg-disabled`,outlined:`bg-bg-surface text-error-fg border-border-danger hover:bg-error-subtle active:bg-error-muted disabled:text-error-border disabled:border-error-border disabled:bg-transparent`,transparent:`border-transparent bg-transparent text-error-fg hover:bg-error-subtle active:bg-error-muted disabled:text-error-border`}})[e][t],t=(e=`medium`)=>({mini:`h-control-mini px-control-pad-mini text-control-mini gap-button-mini rounded-control-mini`,small:`h-control-small px-control-pad-small text-control-small gap-button-small rounded-control-small`,medium:`h-control-medium px-control-pad-medium text-control-medium gap-button-medium rounded-control-medium`,large:`h-control-large px-control-pad-large text-control-large gap-button-large rounded-control-large`})[e],n=(e=`inline`)=>({inline:`inline-flex`,block:`flex w-full`})[e],r=()=>`items-center justify-center font-control-action border-button transition-colors duration-button ease-button outline-none focus-visible:ring-button focus-visible:ring-inset disabled:cursor-not-allowed disabled:pointer-events-none`,i=(e=`primary`)=>({primary:`focus-visible:ring-focus-primary`,secondary:`focus-visible:ring-focus-primary`,tertiary:`focus-visible:ring-border-default`,danger:`focus-visible:ring-focus-danger`})[e];exports.getButtonBaseClasses=r,exports.getButtonColorClasses=e,exports.getButtonDisplayClasses=n,exports.getButtonFocusRing=i,exports.getButtonSizeClasses=t;
+var e=(e=`primary`,t=`filled`)=>({primary:{link:`border-transparent bg-transparent text-primary-fg disabled:text-fg-disabled aria-disabled:text-fg-disabled`,filled:`border-transparent bg-primary text-fg-inverse hover:bg-primary-hover active:bg-primary-active disabled:bg-bg-disabled disabled:text-fg-disabled`,outlined:`bg-bg-surface text-fg-default border-border-default hover:bg-bg-subtle active:bg-bg-muted disabled:text-fg-disabled disabled:border-border-subtle disabled:bg-transparent`,transparent:`border-transparent bg-transparent text-fg-default hover:bg-bg-subtle active:bg-bg-muted disabled:text-fg-disabled`},secondary:{link:`border-transparent bg-transparent text-fg-muted hover:text-fg-default active:text-fg-default disabled:text-fg-disabled aria-disabled:text-fg-disabled`,filled:`border-transparent bg-primary-subtle text-primary-fg hover:bg-button-secondary-hover active:bg-button-secondary-active disabled:bg-bg-disabled disabled:text-fg-disabled`,outlined:`bg-bg-surface text-fg-muted border-border-subtle hover:bg-bg-subtle active:bg-bg-muted disabled:text-fg-disabled disabled:border-border-faint disabled:bg-transparent`,transparent:`border-transparent bg-transparent text-fg-muted hover:bg-bg-subtle active:bg-bg-muted disabled:text-fg-disabled`},tertiary:{link:`border-transparent bg-transparent text-fg-subtle hover:text-fg-default active:text-fg-default disabled:text-fg-disabled aria-disabled:text-fg-disabled`,filled:`border-transparent bg-bg-subtle text-fg-muted hover:bg-bg-muted active:bg-bg-disabled disabled:bg-bg-page disabled:text-fg-disabled`,outlined:`bg-bg-surface text-fg-subtle border-border-subtle hover:bg-bg-page active:bg-bg-subtle disabled:text-fg-disabled disabled:border-border-faint disabled:bg-transparent`,transparent:`border-transparent bg-transparent text-fg-subtle hover:bg-bg-page active:bg-bg-subtle disabled:text-fg-disabled`},danger:{link:`border-transparent bg-transparent text-error-fg disabled:text-fg-disabled aria-disabled:text-fg-disabled`,filled:`border-transparent bg-error text-fg-inverse hover:bg-error-hover active:bg-error-active disabled:bg-bg-disabled disabled:text-fg-disabled`,outlined:`bg-bg-surface text-error-fg border-border-danger hover:bg-error-subtle active:bg-error-muted disabled:text-error-border disabled:border-error-border disabled:bg-transparent`,transparent:`border-transparent bg-transparent text-error-fg hover:bg-error-subtle active:bg-error-muted disabled:text-error-border`}})[e][t],t=(e=`medium`)=>({mini:`h-control-mini px-control-pad-mini text-control-mini gap-button-mini rounded-control-mini`,small:`h-control-small px-control-pad-small text-control-small gap-button-small rounded-control-small`,medium:`h-control-medium px-control-pad-medium text-control-medium gap-button-medium rounded-control-medium`,large:`h-control-large px-control-pad-large text-control-large gap-button-large rounded-control-large`})[e],n=(e=`inline`)=>({inline:`inline-flex`,block:`flex w-full`})[e],r=(e=`filled`)=>`items-center justify-center ${e===`link`?``:`font-control-action `}border-button transition-colors duration-button ease-button outline-none focus-visible:ring-button ${e===`link`?`box-decoration-clone focus-visible:ring-offset-2 focus-visible:ring-offset-transparent`:`focus-visible:ring-inset`} disabled:cursor-not-allowed disabled:pointer-events-none`,i=(e=`primary`,t=`filled`)=>t===`link`?`focus-visible:ring-primary-fg`:{primary:`focus-visible:ring-focus-primary`,secondary:`focus-visible:ring-focus-primary`,tertiary:`focus-visible:ring-border-default`,danger:`focus-visible:ring-focus-danger`}[e];exports.getButtonBaseClasses=r,exports.getButtonColorClasses=e,exports.getButtonDisplayClasses=n,exports.getButtonFocusRing=i,exports.getButtonSizeClasses=t;

package/dist/components/button/utils.d.ts

@@ -2,5 +2,5 @@ import { ButtonAppearance, ButtonDisplay, ButtonSize, ButtonVariant } from './ty
 export declare const getButtonColorClasses: (variant?: ButtonVariant, appearance?: ButtonAppearance) => string;
 export declare const getButtonSizeClasses: (size?: ButtonSize) => string;
 export declare const getButtonDisplayClasses: (display?: ButtonDisplay) => string;
-export declare const getButtonBaseClasses: () => string;
-export declare const getButtonFocusRing: (variant?: ButtonVariant) => string;
+export declare const getButtonBaseClasses: (appearance?: ButtonAppearance) => string;
+export declare const getButtonFocusRing: (variant?: ButtonVariant, appearance?: ButtonAppearance) => string;

package/dist/components/button/utils.esm.js

@@ -1,21 +1,25 @@
 //#region src/components/button/utils.ts
 var e = (e = "primary", t = "filled") => ({
 	primary: {
+		link: "border-transparent bg-transparent text-primary-fg disabled:text-fg-disabled aria-disabled:text-fg-disabled",
 		filled: "border-transparent bg-primary text-fg-inverse hover:bg-primary-hover active:bg-primary-active disabled:bg-bg-disabled disabled:text-fg-disabled",
 		outlined: "bg-bg-surface text-fg-default border-border-default hover:bg-bg-subtle active:bg-bg-muted disabled:text-fg-disabled disabled:border-border-subtle disabled:bg-transparent",
 		transparent: "border-transparent bg-transparent text-fg-default hover:bg-bg-subtle active:bg-bg-muted disabled:text-fg-disabled"
 	},
 	secondary: {
+		link: "border-transparent bg-transparent text-fg-muted hover:text-fg-default active:text-fg-default disabled:text-fg-disabled aria-disabled:text-fg-disabled",
 		filled: "border-transparent bg-primary-subtle text-primary-fg hover:bg-button-secondary-hover active:bg-button-secondary-active disabled:bg-bg-disabled disabled:text-fg-disabled",
 		outlined: "bg-bg-surface text-fg-muted border-border-subtle hover:bg-bg-subtle active:bg-bg-muted disabled:text-fg-disabled disabled:border-border-faint disabled:bg-transparent",
 		transparent: "border-transparent bg-transparent text-fg-muted hover:bg-bg-subtle active:bg-bg-muted disabled:text-fg-disabled"
 	},
 	tertiary: {
+		link: "border-transparent bg-transparent text-fg-subtle hover:text-fg-default active:text-fg-default disabled:text-fg-disabled aria-disabled:text-fg-disabled",
 		filled: "border-transparent bg-bg-subtle text-fg-muted hover:bg-bg-muted active:bg-bg-disabled disabled:bg-bg-page disabled:text-fg-disabled",
 		outlined: "bg-bg-surface text-fg-subtle border-border-subtle hover:bg-bg-page active:bg-bg-subtle disabled:text-fg-disabled disabled:border-border-faint disabled:bg-transparent",
 		transparent: "border-transparent bg-transparent text-fg-subtle hover:bg-bg-page active:bg-bg-subtle disabled:text-fg-disabled"
 	},
 	danger: {
+		link: "border-transparent bg-transparent text-error-fg disabled:text-fg-disabled aria-disabled:text-fg-disabled",
 		filled: "border-transparent bg-error text-fg-inverse hover:bg-error-hover active:bg-error-active disabled:bg-bg-disabled disabled:text-fg-disabled",
 		outlined: "bg-bg-surface text-error-fg border-border-danger hover:bg-error-subtle active:bg-error-muted disabled:text-error-border disabled:border-error-border disabled:bg-transparent",
 		transparent: "border-transparent bg-transparent text-error-fg hover:bg-error-subtle active:bg-error-muted disabled:text-error-border"
@@ -28,11 +32,11 @@ var e = (e = "primary", t = "filled") => ({
 })[e], n = (e = "inline") => ({
 	inline: "inline-flex",
 	block: "flex w-full"
-})[e], r = () => "items-center justify-center font-control-action border-button transition-colors duration-button ease-button outline-none focus-visible:ring-button focus-visible:ring-inset disabled:cursor-not-allowed disabled:pointer-events-none", i = (e = "primary") => ({
+})[e], r = (e = "filled") => `items-center justify-center ${e === "link" ? "" : "font-control-action "}border-button transition-colors duration-button ease-button outline-none focus-visible:ring-button ${e === "link" ? "box-decoration-clone focus-visible:ring-offset-2 focus-visible:ring-offset-transparent" : "focus-visible:ring-inset"} disabled:cursor-not-allowed disabled:pointer-events-none`, i = (e = "primary", t = "filled") => t === "link" ? "focus-visible:ring-primary-fg" : {
 	primary: "focus-visible:ring-focus-primary",
 	secondary: "focus-visible:ring-focus-primary",
 	tertiary: "focus-visible:ring-border-default",
 	danger: "focus-visible:ring-focus-danger"
-})[e];
+}[e];
 //#endregion
 export { r as getButtonBaseClasses, e as getButtonColorClasses, n as getButtonDisplayClasses, i as getButtonFocusRing, t as getButtonSizeClasses };

package/dist/components/progress/Progress.cjs

@@ -1 +1 @@
-const e=require("../../lib/utils.cjs");let t=require("react/jsx-runtime");var n={small:`h-1.5`,medium:`h-2.5`};function r({value:r,size:i=`medium`,className:a,...o}){let s=Math.min(100,Math.max(0,r));return(0,t.jsx)(`div`,{role:`progressbar`,"aria-valuenow":s,"aria-valuemin":0,"aria-valuemax":100,className:e.cn(`w-full overflow-hidden rounded-full bg-bg-subtle`,n[i],a),...o,children:(0,t.jsx)(`div`,{className:`h-full rounded-full bg-primary transition-[width] duration-200 ease-out motion-reduce:transition-none`,style:{width:`${s}%`}})})}exports.Progress=r;
+const e=require("../../lib/utils.cjs");let t=require("react/jsx-runtime");var n={small:`h-1.5`,medium:`h-2.5`};function r({value:r,size:i=`medium`,className:a,...o}){let s=r===void 0?void 0:Math.min(100,Math.max(0,r));return(0,t.jsx)(`div`,{role:`progressbar`,"aria-valuenow":s,"aria-valuemin":s===void 0?void 0:0,"aria-valuemax":s===void 0?void 0:100,className:e.cn(`w-full overflow-hidden rounded-full bg-bg-subtle`,n[i],a),...o,children:(0,t.jsx)(`div`,{className:e.cn(`h-full rounded-full bg-primary-fg`,s===void 0?`progress-indeterminate`:`transition-[width] duration-200 ease-out motion-reduce:transition-none`),style:s===void 0?void 0:{width:`${s}%`}})})}exports.Progress=r;

package/dist/components/progress/Progress.d.ts

@@ -1,13 +1,12 @@
 import { ProgressProps } from './types.js';
 /**
- * Progress — 결정형(determinate) 진행률 바 원자.
+ * Progress — 결정형 또는 불확정 진행률 바 원자.
  *
  * `value`는 0~100 스케일이다. 서버 계약이 0~1(비율)을 내려주는 도메인이
  * 있더라도 이 컴포넌트에는 항상 0~100으로 변환해 넘긴다 — 컴포넌트가
  * 스케일을 추측하지 않는다.
  *
- * 접근성: `role="progressbar"` + `aria-valuenow/min/max`. 시각 바는 트랙
- * 위에 채움 막대를 폭(%)으로 표현하고, transition은 순수 시각 효과라
- * `motion-reduce:transition-none`으로 감쇠한다.
+ * 접근성: `role="progressbar"`를 유지한다. 결정형은 값과 범위를 알리고,
+ * 불확정형은 값과 범위를 생략한다. 움직임 감소 설정에서는 정적으로 표시한다.
  */
 export declare function Progress({ value, size, className, ...rest }: ProgressProps): import("react").JSX.Element;

package/dist/components/progress/Progress.esm.js

@@ -6,17 +6,17 @@ var n = {
 	medium: "h-2.5"
 };
 function r({ value: r, size: i = "medium", className: a, ...o }) {
-	let s = Math.min(100, Math.max(0, r));
+	let s = r === void 0 ? void 0 : Math.min(100, Math.max(0, r));
 	return /* @__PURE__ */ t("div", {
 		role: "progressbar",
 		"aria-valuenow": s,
-		"aria-valuemin": 0,
-		"aria-valuemax": 100,
+		"aria-valuemin": s === void 0 ? void 0 : 0,
+		"aria-valuemax": s === void 0 ? void 0 : 100,
 		className: e("w-full overflow-hidden rounded-full bg-bg-subtle", n[i], a),
 		...o,
 		children: /* @__PURE__ */ t("div", {
-			className: "h-full rounded-full bg-primary transition-[width] duration-200 ease-out motion-reduce:transition-none",
-			style: { width: `${s}%` }
+			className: e("h-full rounded-full bg-primary-fg", s === void 0 ? "progress-indeterminate" : "transition-[width] duration-200 ease-out motion-reduce:transition-none"),
+			style: s === void 0 ? void 0 : { width: `${s}%` }
 		})
 	});
 }

package/dist/components/progress/types.d.ts

@@ -4,9 +4,9 @@ export type ProgressSize = "small" | "medium";
 export interface ProgressProps extends Omit<ComponentPropsWithoutRef<"div">, "role" | "aria-valuenow" | "aria-valuemin" | "aria-valuemax" | "children"> {
     /**
      * 진행률. **0~100 스케일이다(0~1 아님)** — 소비처는 백분율 값을 그대로
-     * 넘긴다. 컴포넌트 내부에서 곱셈·나눗셈으로 재해석하지 않는다.
+     * 넘긴다. 생략하면 불확정 진행 상태를 표시한다.
      */
-    value: number;
+    value?: number;
     size?: ProgressSize;
     /** 접근성 이름. 시각적 라벨이 이미 화면에 있으면 소비처에서 함께 넘긴다. */
     "aria-label"?: string;

package/dist/components/select/MultiSelect.cjs

@@ -1 +1 @@
-const e=require("../../lib/utils.cjs"),t=require("../../node_modules/lucide-react/dist/esm/icons/check.cjs"),n=require("../../node_modules/lucide-react/dist/esm/icons/chevron-down.cjs"),r=require("../../node_modules/lucide-react/dist/esm/icons/circle-x.cjs"),i=require("../../node_modules/lucide-react/dist/esm/icons/search.cjs"),a=require("../_shared/form-size-tokens.cjs"),o=require("../input/utils.cjs"),ee=require("./loading-dots.cjs"),te=require("./panel-width.cjs");let s=require("react"),c=require("react/jsx-runtime"),l=require("@floating-ui/react");var ne=e=>e.length===0?``:e.map(e=>e.label).join(`, `),re=e=>e.length===0?``:`${e.length}개 선택`,u=(0,s.forwardRef)(function({options:u,value:d,onChange:f,variant:p,selectSize:m=`medium`,label:h,labelOption:g=`appear`,help:_,placeholder:ie=`선택해주세요`,hasError:v=!1,disabled:y=!1,suffix:ae,trailingIcon:oe,clearable:b=!1,badge:x,searchable:S=!1,searchPlaceholder:se=`검색...`,onSearchChange:C,isSearchLoading:w=!1,containerProps:ce,containerRef:le,className:ue=``,panelClassName:de=``,formatTrigger:fe=ne,formatCollapsed:pe=re,disableAutoCollapse:T=!1,showSelectAll:me=!1,id:he,name:E,"data-testid":ge},D){let[O,_e]=(0,s.useState)(!1),[k,A]=(0,s.useState)(null),[j,M]=(0,s.useState)(``),[ve,N]=(0,s.useState)(!1),P=(0,s.useRef)([]),F=(0,s.useRef)(null),I=(0,s.useRef)(null),L=(0,s.useRef)(null),R=(0,s.useRef)(null),z=(0,s.useId)(),ye=(0,s.useId)(),B=he??ye,V=e=>`${z}-opt-${e}`,be=k===null?void 0:V(k),H=typeof C==`function`,U=(0,s.useRef)(C);U.current=C;let W=(0,s.useMemo)(()=>{if(!S||H||j.length===0)return u;let e=j.toLowerCase();return u.filter(t=>t.label.toLowerCase().includes(e))},[u,S,H,j]),G=(0,s.useMemo)(()=>new Set(d),[d]),K=(0,s.useMemo)(()=>u.filter(e=>G.has(String(e.value))),[u,G]),{refs:q,floatingStyles:xe,context:J}=(0,l.useFloating)({open:O,onOpenChange:_e,placement:`bottom-start`,whileElementsMounted:l.autoUpdate,middleware:[(0,l.offset)(4),(0,l.flip)({padding:8}),(0,l.shift)({padding:8}),(0,l.size)({apply({rects:e,elements:t,availableHeight:n,availableWidth:r}){Object.assign(t.floating.style,{minWidth:`${e.reference.width}px`,maxWidth:`${te.computeSelectPanelMaxWidth(e.reference.width,r)}px`,maxHeight:`${Math.min(n,320)}px`})},padding:8})]}),{getReferenceProps:Se,getFloatingProps:Ce,getItemProps:we}=(0,l.useInteractions)([(0,l.useClick)(J,{enabled:!y}),(0,l.useDismiss)(J),(0,l.useRole)(J,{role:`listbox`}),(0,l.useListNavigation)(J,{listRef:P,activeIndex:k,onNavigate:A,virtual:S,loop:!0})]),Te=(0,s.useRef)(!1);(0,s.useEffect)(()=>{O?Te.current=!0:(M(``),A(null),Te.current&&U.current?.(``))},[O]),(0,s.useEffect)(()=>{O&&S&&F.current&&F.current.focus()},[O,S]),(0,s.useLayoutEffect)(()=>{if(T){N(!1);return}let e=L.current,t=R.current;if(!e||!t)return;let n=()=>{let n=t.scrollWidth,r=e.clientWidth;N(n>r-1)};n();let r=new ResizeObserver(()=>{requestAnimationFrame(n)});return r.observe(e),()=>r.disconnect()},[T,d.join(`,`)]);let Y=e=>{let t=new Set(G);t.has(e)?t.delete(e):t.add(e),f(u.filter(e=>t.has(String(e.value))).map(e=>String(e.value)))},Ee=e=>{e.stopPropagation(),f([])},X=W.filter(e=>!e.disabled).map(e=>String(e.value)),De=X.length>0&&X.every(e=>G.has(e)),Oe=()=>{if(De){let e=new Set(X);f(d.filter(t=>!e.has(t)))}else{let e=new Set([...d,...X]);f(u.filter(t=>e.has(String(t.value))).map(e=>String(e.value)))}},ke=e=>{!b||y||d.length===0||O||(e.key===`Backspace`||e.key===`Delete`)&&(e.preventDefault(),f([]))},Ae=e=>{let t=e.target.value;t!==j&&(I.current&&(I.current.scrollTop=0),A(null)),M(t),U.current?.(t)},je=e=>{if(!e.nativeEvent.isComposing&&e.key===`Enter`&&k!==null){e.preventDefault();let t=W[k];t&&!t.disabled&&Y(String(t.value))}},Z=K.length>0,Me=g===`sustain`||g===`appear`&&Z,Ne=Z?fe(K):``,Pe=Z?pe(K):``,Fe=Z?ve?Pe:Ne:ie,Ie=a.SLOT_GAP_CLASS[m],Le=a.SLOT_CHILD_ICON_CLASS[m],Re=a.SLOT_BADGE_TEXT_CLASS[m],ze=a.SLOT_ICON_SIZE_CLASS[m],Be=a.CHEVRON_SIZE_CLASS[m],Ve=o.getInputVariantClasses(p,v,y,m),Q=o.getInputTrailingIconColor(v,y,Z||O),$=a.CONTROL_TEXT_CLASS[m],He=y?`text-fg-disabled`:v?`text-fg-danger`:Z?`text-fg-default`:`text-fg-subtle`;return(0,c.jsxs)(`div`,{ref:le,className:e.cn(o.getInputContainerClasses(),`min-w-0`),...ce,children:[!T&&Z&&(0,c.jsx)(`span`,{ref:R,"aria-hidden":!0,className:e.cn(`pointer-events-none fixed left-0 -top-[9999px] whitespace-nowrap`,$),children:Ne}),Me&&h&&(0,c.jsx)(`label`,{className:o.getInputLabelClasses(p,v),htmlFor:B,children:h}),(0,c.jsxs)(`button`,{ref:e=>{q.setReference(e),typeof D==`function`?D(e):D&&(D.current=e)},id:B,type:`button`,disabled:y,"aria-haspopup":`listbox`,"aria-expanded":O,"aria-controls":O?z:void 0,"aria-activedescendant":be,"data-testid":ge,...Se({onKeyDown:ke}),className:e.cn(Ve,`flex w-full min-w-0 items-center`,Ie,y?`cursor-not-allowed`:`cursor-pointer`,ue),children:[(0,c.jsx)(`span`,{ref:L,className:e.cn(`min-w-0 flex-1 truncate text-left`,$,He),children:Fe}),ae&&(0,c.jsx)(`span`,{className:e.cn(`shrink-0 whitespace-nowrap`,$,Q),children:ae}),oe&&(0,c.jsx)(`span`,{className:e.cn(`flex shrink-0 items-center`,Q,Le),children:oe}),b&&!y&&Z&&(0,c.jsx)(`span`,{role:`button`,tabIndex:-1,onClick:Ee,"aria-label":`선택 모두 지우기`,className:e.cn(`flex shrink-0 cursor-pointer items-center`,Q,`hover:text-fg-default`),children:(0,c.jsx)(r.CircleX,{className:ze,strokeWidth:1.5,"aria-hidden":!0})}),x&&(0,c.jsx)(`span`,{className:e.cn(`flex shrink-0 items-center`,Le,Re),children:x}),(0,c.jsx)(n.ChevronDown,{className:e.cn(`shrink-0 transition-transform`,Be,Q,O&&`rotate-180`),strokeWidth:1.5,"aria-hidden":!0})]}),E&&(0,c.jsx)(`input`,{type:`hidden`,name:E,value:d.join(`,`)}),O&&(0,c.jsx)(l.FloatingPortal,{children:(0,c.jsx)(l.FloatingFocusManager,{context:J,modal:!1,initialFocus:S?-1:0,children:(0,c.jsxs)(`div`,{ref:q.setFloating,id:z,style:xe,...Ce(),className:e.cn(`z-floating overflow-hidden rounded-surface border border-border-subtle bg-bg-surface text-fg-default shadow-overlay`,de),children:[S&&(0,c.jsxs)(`div`,{className:`flex items-center gap-2 border-b border-border-subtle px-3 py-2`,children:[(0,c.jsx)(i.Search,{className:`h-4 w-4 shrink-0 text-fg-subtle`,"aria-hidden":!0}),(0,c.jsx)(`input`,{ref:F,type:`text`,value:j,onChange:Ae,onKeyDown:je,placeholder:se,className:`flex-1 bg-transparent text-sm outline-hidden placeholder:text-fg-subtle`}),w&&(0,c.jsx)(ee.LoadingDots,{className:`h-4 w-4 shrink-0 text-fg-subtle`})]}),me&&W.length>0&&(0,c.jsxs)(`button`,{type:`button`,onClick:Oe,className:`flex w-full items-center justify-between border-b border-border-subtle px-3 py-2 text-xs text-fg-muted transition-colors hover:bg-bg-subtle`,children:[(0,c.jsx)(`span`,{children:De?`전체 해제`:`전체 선택`}),(0,c.jsxs)(`span`,{className:`text-fg-subtle`,children:[X.length,`개`]})]}),(0,c.jsx)(`div`,{ref:I,className:`max-h-72 overflow-y-auto py-1`,children:W.length===0?(0,c.jsx)(`div`,{className:`px-3 py-4 text-center text-sm text-fg-subtle`,children:w?`검색 중...`:`옵션이 없어요`}):W.map((n,r)=>{let i=String(n.value),a=G.has(i),o=k===r;return(0,c.jsxs)(`div`,{id:V(r),ref:e=>{P.current[r]=e},role:`option`,"aria-selected":a,"aria-disabled":n.disabled||void 0,tabIndex:o?0:-1,...we({onClick:()=>{n.disabled||Y(i)},onKeyDown:e=>{n.disabled||(e.key===`Enter`||e.key===` `)&&(e.preventDefault(),Y(i))}}),className:e.cn(`flex cursor-pointer items-start gap-3 px-3 py-2 text-sm transition-colors`,n.disabled?`cursor-not-allowed text-fg-disabled`:o?`bg-bg-subtle text-fg-default`:`text-fg-default hover:bg-bg-subtle`),children:[(0,c.jsx)(`span`,{className:e.cn(`mt-0.5 flex h-4 w-4 shrink-0 items-center justify-center rounded-checkbox border`,a?`border-primary bg-primary text-fg-inverse`:`border-border-subtle`),"aria-hidden":!0,children:a&&(0,c.jsx)(t.Check,{className:`h-3 w-3`,strokeWidth:3})}),(0,c.jsxs)(`div`,{className:`min-w-0 flex-1`,children:[(0,c.jsx)(`div`,{className:e.cn(`truncate`,a&&`font-medium`),children:n.label}),n.description&&(0,c.jsx)(`div`,{className:`mt-0.5 truncate text-xs text-fg-subtle`,children:n.description})]}),n.trailing&&(0,c.jsx)(`span`,{className:`shrink-0 text-xs text-fg-subtle`,children:n.trailing})]},i)})})]})})}),_&&(0,c.jsx)(`div`,{className:o.getInputHelpClasses(v),children:_})]})});exports.MultiSelect=u;
+const e=require("../../lib/utils.cjs"),t=require("../../node_modules/lucide-react/dist/esm/icons/check.cjs"),n=require("../../node_modules/lucide-react/dist/esm/icons/chevron-down.cjs"),r=require("../../node_modules/lucide-react/dist/esm/icons/circle-x.cjs"),i=require("../../node_modules/lucide-react/dist/esm/icons/search.cjs"),a=require("../_shared/form-size-tokens.cjs"),o=require("../input/utils.cjs"),ee=require("./loading-dots.cjs"),te=require("./panel-width.cjs");let s=require("react"),c=require("react/jsx-runtime"),l=require("@floating-ui/react");var ne=e=>e.length===0?``:e.map(e=>e.label).join(`, `),re=e=>e.length===0?``:`${e.length}개 선택`,u=(0,s.forwardRef)(function({options:u,value:d,onChange:f,variant:ie,selectSize:p=`medium`,label:m,"aria-label":ae,"aria-labelledby":oe,labelOption:h=`appear`,help:g,placeholder:se=`선택해주세요`,hasError:_=!1,disabled:v=!1,suffix:y,trailingIcon:ce,clearable:b=!1,badge:x,searchable:S=!1,searchPlaceholder:le=`검색...`,onSearchChange:C,isSearchLoading:ue=!1,containerProps:de,containerRef:fe,className:pe=``,panelClassName:me=``,formatTrigger:he=ne,formatCollapsed:ge=re,disableAutoCollapse:w=!1,showSelectAll:_e=!1,id:ve,name:T,"data-testid":ye},E){let[D,be]=(0,s.useState)(!1),[O,k]=(0,s.useState)(null),[A,j]=(0,s.useState)(``),[xe,M]=(0,s.useState)(!1),N=(0,s.useRef)([]),P=(0,s.useRef)(null),F=(0,s.useRef)(null),I=(0,s.useRef)(null),L=(0,s.useRef)(null),R=(0,s.useId)(),Se=(0,s.useId)(),z=ve??Se,B=e=>`${R}-opt-${e}`,Ce=O===null?void 0:B(O),V=typeof C==`function`,H=(0,s.useRef)(C);H.current=C;let U=(0,s.useMemo)(()=>{if(!S||V||A.length===0)return u;let e=A.toLowerCase();return u.filter(t=>t.label.toLowerCase().includes(e))},[u,S,V,A]),W=(0,s.useMemo)(()=>new Set(d),[d]),G=(0,s.useMemo)(()=>u.filter(e=>W.has(String(e.value))),[u,W]),{refs:K,floatingStyles:we,context:q}=(0,l.useFloating)({open:D,onOpenChange:be,placement:`bottom-start`,whileElementsMounted:l.autoUpdate,middleware:[(0,l.offset)(4),(0,l.flip)({padding:8}),(0,l.shift)({padding:8}),(0,l.size)({apply({rects:e,elements:t,availableHeight:n,availableWidth:r}){Object.assign(t.floating.style,{minWidth:`${e.reference.width}px`,maxWidth:`${te.computeSelectPanelMaxWidth(e.reference.width,r)}px`,maxHeight:`${Math.min(n,320)}px`})},padding:8})]}),{getReferenceProps:Te,getFloatingProps:Ee,getItemProps:De}=(0,l.useInteractions)([(0,l.useClick)(q,{enabled:!v}),(0,l.useDismiss)(q),(0,l.useRole)(q,{role:`listbox`}),(0,l.useListNavigation)(q,{listRef:N,activeIndex:O,onNavigate:k,virtual:S,loop:!0})]),Oe=(0,s.useRef)(!1);(0,s.useEffect)(()=>{D?Oe.current=!0:(j(``),k(null),Oe.current&&H.current?.(``))},[D]),(0,s.useEffect)(()=>{D&&S&&P.current&&P.current.focus()},[D,S]),(0,s.useLayoutEffect)(()=>{if(w){M(!1);return}let e=I.current,t=L.current;if(!e||!t)return;let n=()=>{let n=t.scrollWidth,r=e.clientWidth;M(n>r-1)};n();let r=new ResizeObserver(()=>{requestAnimationFrame(n)});return r.observe(e),()=>r.disconnect()},[w,d.join(`,`)]);let J=e=>{let t=new Set(W);t.has(e)?t.delete(e):t.add(e),f(u.filter(e=>t.has(String(e.value))).map(e=>String(e.value)))},ke=e=>{e.stopPropagation(),f([])},Y=U.filter(e=>!e.disabled).map(e=>String(e.value)),Ae=Y.length>0&&Y.every(e=>W.has(e)),je=()=>{if(Ae){let e=new Set(Y);f(d.filter(t=>!e.has(t)))}else{let e=new Set([...d,...Y]);f(u.filter(t=>e.has(String(t.value))).map(e=>String(e.value)))}},Me=e=>{!b||v||d.length===0||D||(e.key===`Backspace`||e.key===`Delete`)&&(e.preventDefault(),f([]))},Ne=e=>{let t=e.target.value;t!==A&&(F.current&&(F.current.scrollTop=0),k(null)),j(t),H.current?.(t)},Pe=e=>{if(!e.nativeEvent.isComposing&&e.key===`Enter`&&O!==null){e.preventDefault();let t=U[O];t&&!t.disabled&&J(String(t.value))}},X=G.length>0,Fe=h===`sustain`||h===`appear`&&X,Ie=X?he(G):``,Le=X?ge(G):``,Re=X?xe?Le:Ie:se,ze=a.SLOT_GAP_CLASS[p],Z=a.SLOT_CHILD_ICON_CLASS[p],Be=a.SLOT_BADGE_TEXT_CLASS[p],Ve=a.SLOT_ICON_SIZE_CLASS[p],He=a.CHEVRON_SIZE_CLASS[p],Ue=o.getInputVariantClasses(ie,_,v,p),Q=o.getInputTrailingIconColor(_,v,X||D),$=a.CONTROL_TEXT_CLASS[p],We=v?`text-fg-disabled`:_?`text-fg-danger`:X?`text-fg-default`:`text-fg-subtle`;return(0,c.jsxs)(`div`,{ref:fe,className:e.cn(o.getInputContainerClasses(),`min-w-0`),...de,children:[!w&&X&&(0,c.jsx)(`span`,{ref:L,"aria-hidden":!0,className:e.cn(`pointer-events-none fixed left-0 -top-[9999px] whitespace-nowrap`,$),children:Ie}),Fe&&m&&(0,c.jsx)(`label`,{className:o.getInputLabelClasses(ie,_),htmlFor:z,children:m}),(0,c.jsxs)(`button`,{ref:e=>{K.setReference(e),typeof E==`function`?E(e):E&&(E.current=e)},id:z,type:`button`,disabled:v,"aria-haspopup":`listbox`,"aria-expanded":D,"aria-controls":D?R:void 0,"aria-activedescendant":Ce,"data-testid":ye,...Te({onKeyDown:Me}),"aria-label":ae,"aria-labelledby":oe,className:e.cn(Ue,`flex w-full min-w-0 items-center`,ze,v?`cursor-not-allowed`:`cursor-pointer`,pe),children:[(0,c.jsx)(`span`,{ref:I,className:e.cn(`min-w-0 flex-1 truncate text-left`,$,We),children:Re}),y&&(0,c.jsx)(`span`,{className:e.cn(`shrink-0 whitespace-nowrap`,$,Q),children:y}),ce&&(0,c.jsx)(`span`,{className:e.cn(`flex shrink-0 items-center`,Q,Z),children:ce}),b&&!v&&X&&(0,c.jsx)(`span`,{role:`button`,tabIndex:-1,onClick:ke,"aria-label":`선택 모두 지우기`,className:e.cn(`flex shrink-0 cursor-pointer items-center`,Q,`hover:text-fg-default`),children:(0,c.jsx)(r.CircleX,{className:Ve,strokeWidth:1.5,"aria-hidden":!0})}),x&&(0,c.jsx)(`span`,{className:e.cn(`flex shrink-0 items-center`,Z,Be),children:x}),(0,c.jsx)(n.ChevronDown,{className:e.cn(`shrink-0 transition-transform`,He,Q,D&&`rotate-180`),strokeWidth:1.5,"aria-hidden":!0})]}),T&&(0,c.jsx)(`input`,{type:`hidden`,name:T,value:d.join(`,`)}),D&&(0,c.jsx)(l.FloatingPortal,{children:(0,c.jsx)(l.FloatingFocusManager,{context:q,modal:!1,initialFocus:S?-1:0,children:(0,c.jsxs)(`div`,{ref:K.setFloating,id:R,style:we,...Ee(),className:e.cn(`z-floating overflow-hidden rounded-surface border border-border-subtle bg-bg-surface text-fg-default shadow-overlay`,me),children:[S&&(0,c.jsxs)(`div`,{className:`flex items-center gap-2 border-b border-border-subtle px-3 py-2`,children:[(0,c.jsx)(i.Search,{className:`h-4 w-4 shrink-0 text-fg-subtle`,"aria-hidden":!0}),(0,c.jsx)(`input`,{ref:P,type:`text`,value:A,onChange:Ne,onKeyDown:Pe,placeholder:le,className:`flex-1 bg-transparent text-sm outline-hidden placeholder:text-fg-subtle`}),ue&&(0,c.jsx)(ee.LoadingDots,{className:`h-4 w-4 shrink-0 text-fg-subtle`})]}),_e&&U.length>0&&(0,c.jsxs)(`button`,{type:`button`,onClick:je,className:`flex w-full items-center justify-between border-b border-border-subtle px-3 py-2 text-xs text-fg-muted transition-colors hover:bg-bg-subtle`,children:[(0,c.jsx)(`span`,{children:Ae?`전체 해제`:`전체 선택`}),(0,c.jsxs)(`span`,{className:`text-fg-subtle`,children:[Y.length,`개`]})]}),(0,c.jsx)(`div`,{ref:F,className:`max-h-72 overflow-y-auto py-1`,children:U.length===0?(0,c.jsx)(`div`,{className:`px-3 py-4 text-center text-sm text-fg-subtle`,children:ue?`검색 중...`:`옵션이 없어요`}):U.map((n,r)=>{let i=String(n.value),a=W.has(i),o=O===r;return(0,c.jsxs)(`div`,{id:B(r),ref:e=>{N.current[r]=e},role:`option`,"aria-selected":a,"aria-disabled":n.disabled||void 0,tabIndex:o?0:-1,...De({onClick:()=>{n.disabled||J(i)},onKeyDown:e=>{n.disabled||(e.key===`Enter`||e.key===` `)&&(e.preventDefault(),J(i))}}),className:e.cn(`flex cursor-pointer items-start gap-3 px-3 py-2 text-sm transition-colors`,n.disabled?`cursor-not-allowed text-fg-disabled`:o?`bg-bg-subtle text-fg-default`:`text-fg-default hover:bg-bg-subtle`),children:[(0,c.jsx)(`span`,{className:e.cn(`mt-0.5 flex h-4 w-4 shrink-0 items-center justify-center rounded-checkbox border`,a?`border-primary bg-primary text-fg-inverse`:`border-border-subtle`),"aria-hidden":!0,children:a&&(0,c.jsx)(t.Check,{className:`h-3 w-3`,strokeWidth:3})}),(0,c.jsxs)(`div`,{className:`min-w-0 flex-1`,children:[(0,c.jsx)(`div`,{className:e.cn(`truncate`,a&&`font-medium`),children:n.label}),n.description&&(0,c.jsx)(`div`,{className:`mt-0.5 truncate text-xs text-fg-subtle`,children:n.description})]}),n.trailing&&(0,c.jsx)(`span`,{className:`shrink-0 text-xs text-fg-subtle`,children:n.trailing})]},i)})})]})})}),g&&(0,c.jsx)(`div`,{className:o.getInputHelpClasses(_),children:g})]})});exports.MultiSelect=u;