@thewrong/ui 0.2.0 → 0.3.0

package/README.md

@@ -20,10 +20,12 @@ import "@thewrong/ui/styles.css";
 import { Button, Modal, PaginatedTable, SearchBox } from "@thewrong/ui";
 ```
 
+TypeScript 선언은 ESM용이다. `moduleResolution: "bundler"` 또는 `"nodenext"`의 ESM에서 사용한다. CJS 런타임의 `require`는 지원하며, 타입 사용에는 `nodenext` ESM을 권장한다 (`node16` CJS에서 일반 `import`는 TS1479, `import x = require()`는 TS1471이 발생한다).
+
 ## 특징
 
 - **CSS 자체포함** — `styles.css` 한 줄이면 끝. Tailwind 설정 불필요.
-- **테마 오버라이드** — oklch 기반 2계층 토큰. `:root`에서 CSS Variable만 덮어쓰면 전체 테마가 바뀐다.
+- **토큰 2계층** — 프리미티브(`--p-*`) → 시맨틱(역할). 시맨틱 CSS Variable을 덮어쓰면 테마가 바뀐다. 다크는 `.dark` 클래스 하나.
 - **가벼운 코어** — 무거운 의존(motion, floating-ui, dnd-kit, react-virtual, date-fns, react-hot-toast)은 **optional peerDependency**. 해당 기능을 쓰는 컴포넌트만 그 패키지를 함께 설치하면 된다.
 - **React 19**, TypeScript, Vite(lib mode).
 
@@ -38,17 +40,36 @@ import { Button, Modal, PaginatedTable, SearchBox } from "@thewrong/ui";
 | 레이아웃 | TablePageLayout · TableCard · Toolbar · PageTitle |
 | 모션/유틸 | AnimatedHeight · Collapsible · LoadingSpinner · cn |
 
-## 테마 오버라이드
+## 테마 · 토큰
+
+- **층**: 프리미티브(`--p-*`, 원료 — 직접 쓰지 않는다) → 시맨틱(`--color-bg-surface`, `--radius-control-medium` 같은 역할). 변수명이 곧 Tailwind 유틸 이름이다(`bg-bg-surface`, `rounded-control-medium`).
+- **다크**: 시맨틱 토큰은 조상 요소의 `.dark`를 따른다. Modal·Drawer·Tooltip·Popover·Select·DatePicker 등 body로 portal되는 컴포넌트에도 적용하고 `:root` 오버라이드와 함께 쓰려면 `<html>`에 붙인다. `<body>`에 붙여도 포털은 덮지만 `:root` 값이 body의 다크 선언보다 우선하지는 않는다. `styles.css`의 `dark:` 유틸도 `.dark`를 따르며 OS 설정은 따르지 않는다.
+- **테마**: `styles.css`와 `tokens.css`에 포함된 `quiet`, `high-contrast`는 `data-theme`으로 선택하며 `.dark`와 조합할 수 있다. 한 서브트리에는 한 테마만 쓴다 — 서로 다른 테마 중첩이나 `data-theme="default"`로 상위 테마 해제는 소스 순서와 상속이 섞여 지원하지 않는다. `<html>` 또는 겹치지 않는 형제 서브트리에 지정한다. Modal·Toast·Popover 등 body 포털에도 적용하려면 `<html>`에 지정한다.
+- **오버라이드**: 시맨틱 변수를 덮는다. 아래 예시는 별도 오버라이드 CSS에 두고 항상 `styles.css` 뒤에 로드하며, 다크 값은 `.dark` 블록에 따로 적는다. 테마 활성 시 `.dark[data-theme="quiet"]`의 특이도(0,2,0)가 `.dark`(0,1,0)보다 높으므로, 테마 위에서 다크 값을 바꾸려면 배치에 맞는 같은 테마 선택자로 재선언한다.
+- **구형 브라우저**: Chrome 111 미만, Safari 16.2 미만, Firefox 113 미만은 `color-mix`를 지원하지 않아 배포 CSS의 `high-contrast` 보조 버튼 상태·입력 지우기 링에 기본 테마 폴백 색이 적용된다(avocado와 같은 구조). `--color-icon-button-primary-active`에는 정적 폴백이 없으므로 지원 브라우저를 쓰거나 명시적 색을 덮어쓴다.
+- **그림자**: `shadow-control` 등 그림자 유틸의 값은 `--shadow-control-src` 같은 `--shadow-*-src` 변수를 덮어 조절한다.
 
 ```css
 :root {
-  --color-primary-500: oklch(0.6 0.2 260); /* 브랜드 색 교체 */
+  --color-primary: #2563eb;
 }
 .dark {
-  /* 다크 토큰도 같은 방식으로 */
+  --color-bg-surface: #0b1220;
 }
 ```
 
+- **내 Tailwind에서 토큰 유틸 쓰기** (Tailwind v4):
+
+```css
+@import "tailwindcss";
+@import "@thewrong/ui/tokens.css"; /* bg-bg-surface, rounded-control-medium, z-floating … 생성 */
+@custom-variant dark (&:where(.dark, .dark *)); /* 소비자 dark:도 .dark를 따르게 할 때 */
+```
+
+`tokens.css`를 컴파일한 소비자 CSS와 `styles.css`를 함께 쓸 수 있다. 별도 사용자 오버라이드 CSS는 둘 다 로드한 뒤에 둔다.
+
+`tokens.css`는 소비자의 variant를 강제하지 않으므로 `@custom-variant dark`를 포함하지 않는다. 위 선언이 없으면 소비자 Tailwind의 기본 `dark:`는 `prefers-color-scheme`을 따른다.
+
 ## 개발
 
 ```bash

package/dist/components/_shared/form-size-tokens.cjs

@@ -0,0 +1 @@
+var e={mini:`text-control-mini`,small:`text-control-small`,medium:`text-control-medium`,large:`text-control-large`},t={mini:`h-slot-icon-mini w-slot-icon-mini`,small:`h-slot-icon-small w-slot-icon-small`,medium:`h-slot-icon-medium w-slot-icon-medium`,large:`h-slot-icon-large w-slot-icon-large`},n={mini:`h-slot-icon-mini w-slot-icon-mini`,small:`h-slot-icon-small w-slot-icon-small`,medium:`h-slot-icon-medium w-slot-icon-medium`,large:`h-slot-icon-large w-slot-icon-large`},r={mini:`[&>svg]:h-slot-icon-mini [&>svg]:w-slot-icon-mini`,small:`[&>svg]:h-slot-icon-small [&>svg]:w-slot-icon-small`,medium:`[&>svg]:h-slot-icon-medium [&>svg]:w-slot-icon-medium`,large:`[&>svg]:h-slot-icon-large [&>svg]:w-slot-icon-large`},i={mini:`text-slot-badge-mini`,small:`text-slot-badge-small`,medium:`text-slot-badge-medium`,large:`text-slot-badge-large`},a={mini:`gap-slot-mini`,small:`gap-slot-small`,medium:`gap-slot-medium`,large:`gap-slot-large`};exports.CHEVRON_SIZE_CLASS=n,exports.CONTROL_TEXT_CLASS=e,exports.SLOT_BADGE_TEXT_CLASS=i,exports.SLOT_CHILD_ICON_CLASS=r,exports.SLOT_GAP_CLASS=a,exports.SLOT_ICON_SIZE_CLASS=t;

package/dist/{src/components → components}/_shared/form-size-tokens.d.ts

@@ -4,13 +4,15 @@
  * Button/Input/Select/Textarea의 size 토큰 정렬을 단일 출처로 관리한다.
  */
 export type FormFieldSize = "mini" | "small" | "medium" | "large";
+/** 필드 텍스트의 크기와 줄 높이. */
+export declare const CONTROL_TEXT_CLASS: Record<FormFieldSize, string>;
 /** 빌트인 clearable의 X 아이콘과 호출부 trailingIcon의 svg에 적용할 height/width 클래스. */
 export declare const SLOT_ICON_SIZE_CLASS: Record<FormFieldSize, string>;
 /** Select의 chevron 전용 사이즈 — 일반 슬롯 아이콘과 동일 비율. */
 export declare const CHEVRON_SIZE_CLASS: Record<FormFieldSize, string>;
 /** trailingIcon/badge wrapper에 깔아 안의 svg가 자동으로 따라가게 하는 arbitrary selector. */
 export declare const SLOT_CHILD_ICON_CLASS: Record<FormFieldSize, string>;
-/** badge wrapper에 적용할 텍스트 사이즈 — 호출부가 inline className으로 명시 시 override. */
+/** badge wrapper의 텍스트 크기와 줄 높이. */
 export declare const SLOT_BADGE_TEXT_CLASS: Record<FormFieldSize, string>;
 /** 슬롯 간 gap — 디자인 시안 medium 기준 12px. */
 export declare const SLOT_GAP_CLASS: Record<FormFieldSize, string>;

package/dist/components/_shared/form-size-tokens.esm.js

@@ -1,29 +1,34 @@
 //#region src/components/_shared/form-size-tokens.ts
 var e = {
-	mini: "h-3.5 w-3.5",
-	small: "h-4 w-4",
-	medium: "h-4.5 w-4.5",
-	large: "h-5 w-5"
+	mini: "text-control-mini",
+	small: "text-control-small",
+	medium: "text-control-medium",
+	large: "text-control-large"
 }, t = {
-	mini: "h-3.5 w-3.5",
-	small: "h-4 w-4",
-	medium: "h-4.5 w-4.5",
-	large: "h-5 w-5"
+	mini: "h-slot-icon-mini w-slot-icon-mini",
+	small: "h-slot-icon-small w-slot-icon-small",
+	medium: "h-slot-icon-medium w-slot-icon-medium",
+	large: "h-slot-icon-large w-slot-icon-large"
 }, n = {
-	mini: "[&>svg]:h-3.5 [&>svg]:w-3.5",
-	small: "[&>svg]:h-4 [&>svg]:w-4",
-	medium: "[&>svg]:h-4.5 [&>svg]:w-4.5",
-	large: "[&>svg]:h-5 [&>svg]:w-5"
+	mini: "h-slot-icon-mini w-slot-icon-mini",
+	small: "h-slot-icon-small w-slot-icon-small",
+	medium: "h-slot-icon-medium w-slot-icon-medium",
+	large: "h-slot-icon-large w-slot-icon-large"
 }, r = {
-	mini: "text-[10px]",
-	small: "text-xs",
-	medium: "text-xs",
-	large: "text-sm"
+	mini: "[&>svg]:h-slot-icon-mini [&>svg]:w-slot-icon-mini",
+	small: "[&>svg]:h-slot-icon-small [&>svg]:w-slot-icon-small",
+	medium: "[&>svg]:h-slot-icon-medium [&>svg]:w-slot-icon-medium",
+	large: "[&>svg]:h-slot-icon-large [&>svg]:w-slot-icon-large"
 }, i = {
-	mini: "gap-1.5",
-	small: "gap-2",
-	medium: "gap-3",
-	large: "gap-3.5"
+	mini: "text-slot-badge-mini",
+	small: "text-slot-badge-small",
+	medium: "text-slot-badge-medium",
+	large: "text-slot-badge-large"
+}, a = {
+	mini: "gap-slot-mini",
+	small: "gap-slot-small",
+	medium: "gap-slot-medium",
+	large: "gap-slot-large"
 };
 //#endregion
-export { t as CHEVRON_SIZE_CLASS, r as SLOT_BADGE_TEXT_CLASS, n as SLOT_CHILD_ICON_CLASS, i as SLOT_GAP_CLASS, e as SLOT_ICON_SIZE_CLASS };
+export { n as CHEVRON_SIZE_CLASS, e as CONTROL_TEXT_CLASS, i as SLOT_BADGE_TEXT_CLASS, r as SLOT_CHILD_ICON_CLASS, a as SLOT_GAP_CLASS, t as SLOT_ICON_SIZE_CLASS };

package/dist/components/action-toast/ActionToast.cjs

@@ -0,0 +1 @@
+const e=require("../../_virtual/_rolldown/runtime.cjs"),t=require("../../lib/utils.cjs"),n=require("../button/Button.cjs"),r=require("../../node_modules/lucide-react/dist/esm/icons/circle-x.cjs"),i=require("../../node_modules/lucide-react/dist/esm/icons/info.cjs"),a=require("../../node_modules/lucide-react/dist/esm/icons/triangle-alert.cjs"),o=require("../input/Input.cjs"),s=require("../textarea/Textarea.cjs"),c=require("../../hooks/useMediaQuery.cjs"),l=require("../../lib/overlay-stack.cjs");let u=require("react"),d=require("react/jsx-runtime"),f=require("motion/react"),p=require("react-hot-toast");p=e.__toESM(p,1);let m=require("react-dom");var h=`action-toast-singleton`;function g(e){_=e,e?l.overlayStack.push(l.ACTION_TOAST_OVERLAY_ID,l.ACTION_TOAST_PRIORITY):l.overlayStack.pop(l.ACTION_TOAST_OVERLAY_ID)}var _=!1,v=0;function y({message:e,actions:t,tone:n=`warning`,icon:r,input:i,duration:a=1/0,widthPx:o,backdrop:s=!0,className:c}){let l=++v;return g(!0),p.default.custom(a=>(0,d.jsx)(T,{toastInstance:a,generation:l,message:e,actions:t,tone:n,icon:r,input:i,widthPx:o,backdrop:s,className:c}),{id:h,duration:a})}function b(){p.default.dismiss(h),g(!1)}function x(){return _}function S(e){if(e===`tertiary`)return`bg-bg-toast-tertiary hover:bg-bg-toast-tertiary-hover active:bg-bg-toast-tertiary-active text-fg-toast`}var C={warning:`text-toast-tone-warning`,info:`text-toast-tone-info`,danger:`text-toast-tone-danger`};function w(e,n){let r=t.cn(n,`shrink-0`,C[e]);return e===`info`?(0,d.jsx)(i.Info,{className:r,strokeWidth:2,"aria-hidden":!0}):(0,d.jsx)(a.TriangleAlert,{className:r,strokeWidth:2,"aria-hidden":!0})}function T({toastInstance:e,generation:i,message:a,actions:h,tone:_,icon:y,input:b,widthPx:x=680,backdrop:C,className:T}){let E=c.useIsMobile(),D=(0,f.useReducedMotion)(),O=E?`h-4 w-4`:`h-4.5 w-4.5`,k=E?`text-xs`:`text-sm`,A=E?`mini`:`small`,j=E?`px-3 py-2.5`:`px-4 py-3`,M=E?`px-3 py-3`:`px-4 py-3.5`,N=E?`gap-2`:`gap-3`,P=y===void 0?w(_,O):y,[F,I]=(0,u.useState)(b?.defaultValue??``),L=(0,u.useRef)(null),R=(0,u.useRef)(null);(0,u.useEffect)(()=>{!e.visible||!b||(b.type===`text`?L.current:R.current)?.focus({preventScroll:!0})},[b,e.visible]),(0,u.useEffect)(()=>{i===v&&g(e.visible)},[i,e.visible]),(0,u.useEffect)(()=>()=>{i===v&&g(!1)},[i]),(0,u.useEffect)(()=>{let t=t=>{t.key===`Escape`&&l.overlayStack.isTop(`action-toast-overlay`)&&(p.default.dismiss(e.id),g(!1))};return window.addEventListener(`keydown`,t),()=>window.removeEventListener(`keydown`,t)},[e.id]);let z=(0,u.useRef)(null),[B,V]=(0,u.useState)(!1);(0,u.useEffect)(()=>{let e=z.current;if(!e)return;let t=()=>{let t=window.getComputedStyle(e),n=parseFloat(t.lineHeight);!Number.isFinite(n)||n<=0||V(e.scrollHeight>n+1.5)};t();let n=new ResizeObserver(t);return n.observe(e),()=>n.disconnect()},[a]);let H=E&&B&&!b;(0,u.useEffect)(()=>{I(b?.defaultValue??``)},[b?.defaultValue,b?.type]);let U=t=>{(t.closeOnClick??!0)&&(p.default.dismiss(e.id),g(!1)),t.onClick(F)},W=C?null:(0,d.jsx)(`button`,{type:`button`,onClick:()=>{p.default.dismiss(e.id),g(!1)},className:`ml-1 shrink-0 text-fg-toast-muted hover:text-fg-toast-hover transition-colors cursor-pointer`,"aria-label":`닫기`,children:(0,d.jsx)(r.CircleX,{className:O,fill:`currentColor`,stroke:`var(--color-bg-toast)`,strokeWidth:2})}),G=(e,t=!1)=>h.length>0&&(0,d.jsx)(`div`,{className:e,children:h.map((e,r)=>(0,d.jsx)(n.Button,{variant:e.variant,appearance:e.appearance,size:e.size??A,leadingIcon:e.leadingIcon,trailingIcon:e.trailingIcon,"aria-label":e.ariaLabel,disabled:t?void 0:e.disabled,onClick:t?void 0:()=>U(e),tabIndex:t?-1:void 0,className:t?void 0:S(e.variant),children:e.label},r))});return(0,d.jsxs)(d.Fragment,{children:[C&&(0,m.createPortal)((0,d.jsx)(f.motion.div,{initial:D?!1:{opacity:0},animate:{opacity:+!!e.visible},transition:{duration:D?0:.18},onClick:()=>{p.default.dismiss(e.id),g(!1)},className:t.cn(`fixed inset-0 z-toast-backdrop bg-bg-toast-backdrop`,!e.visible&&`pointer-events-none`),"aria-hidden":!0}),document.body),(0,d.jsx)(f.motion.div,{initial:D?!1:{opacity:0,scale:.98},animate:e.visible?{opacity:1,scale:1}:{opacity:0,scale:.98},transition:{duration:D?0:.22,ease:[.16,1,.3,1]},className:t.cn(`dark relative rounded-toast bg-bg-toast text-fg-toast shadow-overlay`,e.visible?``:`pointer-events-none`,T),style:{width:`min(${x}px, calc(100vw - 32px))`},role:`alertdialog`,"data-ui-action-toast":``,"aria-modal":C?`true`:void 0,"aria-label":`확인이 필요한 알림`,children:b?(0,d.jsxs)(`div`,{className:`flex flex-col gap-2.5 ${M}`,children:[(0,d.jsxs)(`div`,{className:`flex items-start ${N}`,children:[P,(0,d.jsx)(`div`,{className:`min-w-0 flex-1 ${k} leading-relaxed whitespace-pre-line break-keep wrap-break-word`,children:a}),W]}),b.type===`text`?(0,d.jsx)(o.Input,{ref:L,variant:`box`,inputSize:E?`mini`:`small`,value:F,onChange:e=>I(e.target.value),onKeyDown:e=>{if(e.key!==`Enter`||e.nativeEvent.isComposing)return;let t=h[h.length-1];!t||t.disabled||(e.preventDefault(),U(t))},placeholder:b.placeholder}):(0,d.jsx)(s.Textarea,{ref:R,textareaSize:E?`mini`:`small`,rows:b.rows??3,value:F,onChange:e=>I(e.target.value),placeholder:b.placeholder}),G(`flex justify-end gap-1.5`)]}):(0,d.jsxs)(d.Fragment,{children:[(0,d.jsxs)(`div`,{"aria-hidden":!0,className:`invisible pointer-events-none absolute inset-0 flex items-center ${N} ${j}`,children:[(0,d.jsx)(`span`,{className:`${O} shrink-0`}),(0,d.jsx)(`div`,{ref:z,className:`min-w-0 flex-1 ${k} leading-relaxed whitespace-pre-line break-keep wrap-break-word`,children:a}),G(`flex shrink-0 gap-1.5`,!0)]}),H?(0,d.jsxs)(`div`,{className:`relative flex flex-col ${N} ${M}`,children:[W&&(0,d.jsx)(`div`,{className:`absolute right-3 top-3`,children:W}),(0,d.jsx)(`div`,{className:`flex justify-center`,children:P}),(0,d.jsx)(`div`,{className:`${k} leading-relaxed text-center whitespace-pre-line break-keep wrap-break-word`,children:a}),G(`flex justify-end gap-1.5`)]}):(0,d.jsxs)(`div`,{className:`flex items-center ${N} ${j}`,children:[P,(0,d.jsx)(`div`,{className:`min-w-0 flex-1 ${k} leading-relaxed whitespace-pre-line break-keep wrap-break-word`,children:a}),G(`flex shrink-0 gap-1.5`),W]})]})})]})}exports.dismissActionToast=b,exports.isActionToastActive=x,exports.showActionToast=y;

package/dist/{src/components → components}/action-toast/ActionToast.d.ts

@@ -1,8 +1,10 @@
 import { ComponentProps, ReactNode } from 'react';
-import { Button } from '../../../components/button';
+import { Button } from '../button/index.js';
 type ButtonVisualProps = Partial<Pick<ComponentProps<typeof Button>, "variant" | "appearance" | "size" | "leadingIcon" | "trailingIcon">>;
 export interface ActionToastButton extends ButtonVisualProps {
     label: ReactNode;
+    /** 화면에 보이는 라벨 대신 스크린 리더에 전달할 버튼 이름. */
+    ariaLabel?: string;
     /**
      * 클릭 시 호출. 호출 후 토스트는 자동으로 닫힌다.
      * 닫지 않고 유지하려면 `closeOnClick: false`.
@@ -24,6 +26,11 @@ export type ActionToastInput = {
     rows?: number;
 };
 interface ShowActionToastArgs {
+    /**
+     * 본문. ReactNode를 받지만 Select·MultiSelect·Popover·Tooltip·DatePicker 같은 부유 패널은 넣지 않는다 —
+     * 토스트(z-toast 150)가 부유 패널(z-floating 100)보다 위라, 패널이 열리면 시트 아래로 깔린다.
+     * 선택이 필요하면 토스트 대신 Modal을 쓴다. `icon`·액션 `label`도 같다.
+     */
     message: ReactNode;
     actions: ActionToastButton[];
     /** 톤. 좌측 아이콘 색상에만 반영(배경/텍스트는 일반 토스트와 동일한 다크 그레이). */
@@ -31,6 +38,8 @@ interface ShowActionToastArgs {
     /** 좌측 아이콘 커스텀. 미지정 시 톤별 기본 아이콘. null이면 아이콘 숨김. */
     icon?: ReactNode | null;
     input?: ActionToastInput;
+    /** 자동으로 닫힐 때까지의 시간(ms). 기본값은 자동으로 닫히지 않는 Infinity. @default Infinity */
+    duration?: number;
     /** 토스트 폭(px) 커스텀. 기본 680(일반 토스트와 동일). 모바일은 viewport-32px로 자동 fit. */
     widthPx?: number;
     /**
@@ -46,7 +55,7 @@ interface ShowActionToastArgs {
     className?: string;
 }
 /**
- * 사용자 결정이 필요한 액션 토스트. 자동 dismiss 없음.
+ * 사용자 결정이 필요한 액션 토스트. 기본적으로 자동 닫힘이 없으며, `duration`을 지정하면 해당 시간이 지난 뒤 닫힌다.
  * 위치는 전역 Toaster를 따름(데스크탑=bottom-center, 모바일=top-center).
  * 한 번에 최대 1개만 노출(같은 id로 덮어쓰기).
  *
@@ -55,7 +64,7 @@ interface ShowActionToastArgs {
  *
  * 사용 전 앱 루트에 `react-hot-toast`의 `<Toaster />`가 마운트돼 있어야 한다.
  */
-export declare function showActionToast({ message, actions, tone, icon, input, widthPx, backdrop, className, }: ShowActionToastArgs): string;
+export declare function showActionToast({ message, actions, tone, icon, input, duration, widthPx, backdrop, className, }: ShowActionToastArgs): string;
 export declare function dismissActionToast(): void;
 export declare function isActionToastActive(): boolean;
 export {};

package/dist/components/action-toast/ActionToast.esm.js

@@ -1,130 +1,139 @@
-import { Button as e } from "../button/Button.esm.js";
-import { CircleX as t } from "../../node_modules/lucide-react/dist/esm/icons/circle-x.esm.js";
-import { Info as n } from "../../node_modules/lucide-react/dist/esm/icons/info.esm.js";
-import { TriangleAlert as r } from "../../node_modules/lucide-react/dist/esm/icons/triangle-alert.esm.js";
-import { Input as i } from "../input/Input.esm.js";
-import { Textarea as a } from "../textarea/Textarea.esm.js";
-import { cn as o } from "../../lib/utils.esm.js";
+import { cn as e } from "../../lib/utils.esm.js";
+import { Button as t } from "../button/Button.esm.js";
+import { CircleX as n } from "../../node_modules/lucide-react/dist/esm/icons/circle-x.esm.js";
+import { Info as r } from "../../node_modules/lucide-react/dist/esm/icons/info.esm.js";
+import { TriangleAlert as i } from "../../node_modules/lucide-react/dist/esm/icons/triangle-alert.esm.js";
+import { Input as a } from "../input/Input.esm.js";
+import { Textarea as o } from "../textarea/Textarea.esm.js";
 import { useIsMobile as s } from "../../hooks/useMediaQuery.esm.js";
 import { ACTION_TOAST_OVERLAY_ID as c, ACTION_TOAST_PRIORITY as l, overlayStack as u } from "../../lib/overlay-stack.esm.js";
 import { useEffect as d, useRef as f, useState as p } from "react";
 import { Fragment as m, jsx as h, jsxs as g } from "react/jsx-runtime";
-import { motion as _ } from "motion/react";
-import v from "react-hot-toast";
-import { createPortal as y } from "react-dom";
+import { motion as _, useReducedMotion as v } from "motion/react";
+import y from "react-hot-toast";
+import { createPortal as b } from "react-dom";
 //#region src/components/action-toast/ActionToast.tsx
-var b = "action-toast-singleton";
-function x(e) {
-	S = e, e ? u.push(c, l) : u.pop(c);
+var x = "action-toast-singleton";
+function S(e) {
+	C = e, e ? u.push(c, l) : u.pop(c);
 }
-var S = !1;
-function C({ message: e, actions: t, tone: n = "warning", icon: r, input: i, widthPx: a, backdrop: o = !0, className: s }) {
-	return x(!0), v.custom((c) => /* @__PURE__ */ h(k, {
-		toastInstance: c,
+var C = !1, w = 0;
+function T({ message: e, actions: t, tone: n = "warning", icon: r, input: i, duration: a = Infinity, widthPx: o, backdrop: s = !0, className: c }) {
+	let l = ++w;
+	return S(!0), y.custom((a) => /* @__PURE__ */ h(j, {
+		toastInstance: a,
+		generation: l,
 		message: e,
 		actions: t,
 		tone: n,
 		icon: r,
 		input: i,
-		widthPx: a,
-		backdrop: o,
-		className: s
+		widthPx: o,
+		backdrop: s,
+		className: c
 	}), {
-		id: b,
-		duration: Infinity
+		id: x,
+		duration: a
 	});
 }
-function w() {
-	v.dismiss(b), x(!1);
+function E() {
+	y.dismiss(x), S(!1);
 }
-function T() {
-	return S;
+function D() {
+	return C;
 }
-function E(e) {
-	if (e === "tertiary") return "dark:bg-white/10 dark:hover:bg-white/15 dark:active:bg-white/20 dark:text-white";
+function O(e) {
+	if (e === "tertiary") return "bg-bg-toast-tertiary hover:bg-bg-toast-tertiary-hover active:bg-bg-toast-tertiary-active text-fg-toast";
 }
-var D = {
-	warning: "text-amber-400",
-	info: "text-blue-400",
-	danger: "text-rose-400"
+var k = {
+	warning: "text-toast-tone-warning",
+	info: "text-toast-tone-info",
+	danger: "text-toast-tone-danger"
 };
-function O(e, t) {
-	let i = `${t} shrink-0 ${D[e]}`;
-	return h(e === "info" ? n : r, {
-		className: i,
+function A(t, n) {
+	let a = e(n, "shrink-0", k[t]);
+	return h(t === "info" ? r : i, {
+		className: a,
 		strokeWidth: 2,
 		"aria-hidden": !0
 	});
 }
-function k({ toastInstance: n, message: r, actions: c, tone: l, icon: b, input: S, widthPx: C = 680, backdrop: w, className: T }) {
-	let D = s(), k = D ? "h-4 w-4" : "h-4.5 w-4.5", A = D ? "text-xs" : "text-sm", j = D ? "mini" : "small", M = D ? "px-3 py-2.5" : "px-4 py-3", N = D ? "px-3 py-3" : "px-4 py-3.5", P = D ? "gap-2" : "gap-3", F = b === void 0 ? O(l, k) : b, [I, L] = p(S?.defaultValue ?? "");
+function j({ toastInstance: r, generation: i, message: c, actions: l, tone: x, icon: C, input: T, widthPx: E = 680, backdrop: D, className: k }) {
+	let j = s(), M = v(), N = j ? "h-4 w-4" : "h-4.5 w-4.5", P = j ? "text-xs" : "text-sm", F = j ? "mini" : "small", I = j ? "px-3 py-2.5" : "px-4 py-3", L = j ? "px-3 py-3" : "px-4 py-3.5", R = j ? "gap-2" : "gap-3", z = C === void 0 ? A(x, N) : C, [B, V] = p(T?.defaultValue ?? ""), H = f(null), U = f(null);
 	d(() => {
+		!r.visible || !T || (T.type === "text" ? H.current : U.current)?.focus({ preventScroll: !0 });
+	}, [T, r.visible]), d(() => {
+		i === w && S(r.visible);
+	}, [i, r.visible]), d(() => () => {
+		i === w && S(!1);
+	}, [i]), d(() => {
 		let e = (e) => {
-			e.key === "Escape" && u.isTop("action-toast-overlay") && (v.dismiss(n.id), x(!1));
+			e.key === "Escape" && u.isTop("action-toast-overlay") && (y.dismiss(r.id), S(!1));
 		};
 		return window.addEventListener("keydown", e), () => window.removeEventListener("keydown", e);
-	}, [n.id]);
-	let R = f(null), [z, B] = p(!1);
+	}, [r.id]);
+	let W = f(null), [G, K] = p(!1);
 	d(() => {
-		let e = R.current;
+		let e = W.current;
 		if (!e) return;
 		let t = () => {
 			let t = window.getComputedStyle(e), n = parseFloat(t.lineHeight);
-			!Number.isFinite(n) || n <= 0 || B(e.scrollHeight > n + 1.5);
+			!Number.isFinite(n) || n <= 0 || K(e.scrollHeight > n + 1.5);
 		};
 		t();
 		let n = new ResizeObserver(t);
 		return n.observe(e), () => n.disconnect();
-	}, [r]);
-	let V = D && z && !S;
+	}, [c]);
+	let q = j && G && !T;
 	d(() => {
-		L(S?.defaultValue ?? "");
-	}, [S?.defaultValue, S?.type]);
-	let H = (e) => {
-		(e.closeOnClick ?? !0) && (v.dismiss(n.id), x(!1)), e.onClick(I);
-	}, U = w ? null : /* @__PURE__ */ h("button", {
+		V(T?.defaultValue ?? "");
+	}, [T?.defaultValue, T?.type]);
+	let J = (e) => {
+		(e.closeOnClick ?? !0) && (y.dismiss(r.id), S(!1)), e.onClick(B);
+	}, Y = D ? null : /* @__PURE__ */ h("button", {
 		type: "button",
 		onClick: () => {
-			v.dismiss(n.id), x(!1);
+			y.dismiss(r.id), S(!1);
 		},
-		className: "ml-1 shrink-0 text-white/70 hover:text-white transition-colors cursor-pointer",
+		className: "ml-1 shrink-0 text-fg-toast-muted hover:text-fg-toast-hover transition-colors cursor-pointer",
 		"aria-label": "닫기",
-		children: /* @__PURE__ */ h(t, {
-			className: k,
+		children: /* @__PURE__ */ h(n, {
+			className: N,
 			fill: "currentColor",
-			stroke: "var(--color-secondary-700)",
+			stroke: "var(--color-bg-toast)",
 			strokeWidth: 2
 		})
-	}), W = (t, n = !1) => c.length > 0 && /* @__PURE__ */ h("div", {
-		className: t,
-		children: c.map((t, r) => /* @__PURE__ */ h(e, {
-			variant: t.variant,
-			appearance: t.appearance,
-			size: t.size ?? j,
-			leadingIcon: t.leadingIcon,
-			trailingIcon: t.trailingIcon,
-			disabled: n ? void 0 : t.disabled,
-			onClick: n ? void 0 : () => H(t),
+	}), X = (e, n = !1) => l.length > 0 && /* @__PURE__ */ h("div", {
+		className: e,
+		children: l.map((e, r) => /* @__PURE__ */ h(t, {
+			variant: e.variant,
+			appearance: e.appearance,
+			size: e.size ?? F,
+			leadingIcon: e.leadingIcon,
+			trailingIcon: e.trailingIcon,
+			"aria-label": e.ariaLabel,
+			disabled: n ? void 0 : e.disabled,
+			onClick: n ? void 0 : () => J(e),
 			tabIndex: n ? -1 : void 0,
-			className: n ? void 0 : E(t.variant),
-			children: t.label
+			className: n ? void 0 : O(e.variant),
+			children: e.label
 		}, r))
 	});
-	return /* @__PURE__ */ g(m, { children: [w && y(/* @__PURE__ */ h(_.div, {
-		initial: { opacity: 0 },
-		animate: { opacity: +!!n.visible },
-		transition: { duration: .18 },
+	return /* @__PURE__ */ g(m, { children: [D && b(/* @__PURE__ */ h(_.div, {
+		initial: M ? !1 : { opacity: 0 },
+		animate: { opacity: +!!r.visible },
+		transition: { duration: M ? 0 : .18 },
 		onClick: () => {
-			v.dismiss(n.id), x(!1);
+			y.dismiss(r.id), S(!1);
 		},
-		className: `fixed inset-0 z-9998 bg-black/15 ${n.visible ? "" : "pointer-events-none"}`,
+		className: e("fixed inset-0 z-toast-backdrop bg-bg-toast-backdrop", !r.visible && "pointer-events-none"),
 		"aria-hidden": !0
 	}), document.body), /* @__PURE__ */ h(_.div, {
-		initial: {
+		initial: M ? !1 : {
 			opacity: 0,
 			scale: .98
 		},
-		animate: n.visible ? {
+		animate: r.visible ? {
 			opacity: 1,
 			scale: 1
 		} : {
@@ -132,7 +141,7 @@ function k({ toastInstance: n, message: r, actions: c, tone: l, icon: b, input:
 			scale: .98
 		},
 		transition: {
-			duration: .22,
+			duration: M ? 0 : .22,
 			ease: [
 				.16,
 				1,
@@ -140,89 +149,90 @@ function k({ toastInstance: n, message: r, actions: c, tone: l, icon: b, input:
 				1
 			]
 		},
-		className: o("dark relative rounded-2xl bg-secondary-700 text-white shadow-lg", n.visible ? "" : "pointer-events-none", T),
-		style: { width: `min(${C}px, calc(100vw - 32px))` },
+		className: e("dark relative rounded-toast bg-bg-toast text-fg-toast shadow-overlay", r.visible ? "" : "pointer-events-none", k),
+		style: { width: `min(${E}px, calc(100vw - 32px))` },
 		role: "alertdialog",
-		"aria-modal": w ? "true" : void 0,
+		"data-ui-action-toast": "",
+		"aria-modal": D ? "true" : void 0,
 		"aria-label": "확인이 필요한 알림",
-		children: S ? /* @__PURE__ */ g("div", {
-			className: `flex flex-col gap-2.5 ${N}`,
+		children: T ? /* @__PURE__ */ g("div", {
+			className: `flex flex-col gap-2.5 ${L}`,
 			children: [
 				/* @__PURE__ */ g("div", {
-					className: `flex items-start ${P}`,
+					className: `flex items-start ${R}`,
 					children: [
-						F,
+						z,
 						/* @__PURE__ */ h("div", {
-							className: `min-w-0 flex-1 ${A} leading-relaxed whitespace-pre-line break-keep wrap-break-word`,
-							children: r
+							className: `min-w-0 flex-1 ${P} leading-relaxed whitespace-pre-line break-keep wrap-break-word`,
+							children: c
 						}),
-						U
+						Y
 					]
 				}),
-				S.type === "text" ? /* @__PURE__ */ h(i, {
+				T.type === "text" ? /* @__PURE__ */ h(a, {
+					ref: H,
 					variant: "box",
-					inputSize: D ? "mini" : "small",
-					autoFocus: !0,
-					value: I,
-					onChange: (e) => L(e.target.value),
+					inputSize: j ? "mini" : "small",
+					value: B,
+					onChange: (e) => V(e.target.value),
 					onKeyDown: (e) => {
 						if (e.key !== "Enter" || e.nativeEvent.isComposing) return;
-						let t = c[c.length - 1];
-						!t || t.disabled || (e.preventDefault(), H(t));
+						let t = l[l.length - 1];
+						!t || t.disabled || (e.preventDefault(), J(t));
 					},
-					placeholder: S.placeholder
-				}) : /* @__PURE__ */ h(a, {
-					textareaSize: D ? "mini" : "small",
-					rows: S.rows ?? 3,
-					autoFocus: !0,
-					value: I,
-					onChange: (e) => L(e.target.value),
-					placeholder: S.placeholder
+					placeholder: T.placeholder
+				}) : /* @__PURE__ */ h(o, {
+					ref: U,
+					textareaSize: j ? "mini" : "small",
+					rows: T.rows ?? 3,
+					value: B,
+					onChange: (e) => V(e.target.value),
+					placeholder: T.placeholder
 				}),
-				W("flex justify-end gap-1.5")
+				X("flex justify-end gap-1.5")
 			]
 		}) : /* @__PURE__ */ g(m, { children: [/* @__PURE__ */ g("div", {
 			"aria-hidden": !0,
-			className: `invisible pointer-events-none absolute inset-0 flex items-center ${P} ${M}`,
+			className: `invisible pointer-events-none absolute inset-0 flex items-center ${R} ${I}`,
 			children: [
-				/* @__PURE__ */ h("span", { className: `${k} shrink-0` }),
+				/* @__PURE__ */ h("span", { className: `${N} shrink-0` }),
 				/* @__PURE__ */ h("div", {
-					ref: R,
-					className: `min-w-0 flex-1 ${A} leading-relaxed whitespace-pre-line break-keep wrap-break-word`,
-					children: r
+					ref: W,
+					className: `min-w-0 flex-1 ${P} leading-relaxed whitespace-pre-line break-keep wrap-break-word`,
+					children: c
 				}),
-				W("flex shrink-0 gap-1.5", !0)
+				X("flex shrink-0 gap-1.5", !0)
 			]
-		}), V ? /* @__PURE__ */ g("div", {
-			className: `relative flex flex-col ${P} ${N}`,
+		}), q ? /* @__PURE__ */ g("div", {
+			className: `relative flex flex-col ${R} ${L}`,
 			children: [
-				U && /* @__PURE__ */ h("div", {
+				Y && /* @__PURE__ */ h("div", {
 					className: "absolute right-3 top-3",
-					children: U
+					children: Y
 				}),
 				/* @__PURE__ */ h("div", {
 					className: "flex justify-center",
-					children: F
+					children: z
 				}),
 				/* @__PURE__ */ h("div", {
-					className: `${A} leading-relaxed text-center whitespace-pre-line break-keep wrap-break-word`,
-					children: r
+					className: `${P} leading-relaxed text-center whitespace-pre-line break-keep wrap-break-word`,
+					children: c
 				}),
-				W("flex justify-end gap-1.5")
+				X("flex justify-end gap-1.5")
 			]
 		}) : /* @__PURE__ */ g("div", {
-			className: `flex items-center ${P} ${M}`,
+			className: `flex items-center ${R} ${I}`,
 			children: [
-				F,
+				z,
 				/* @__PURE__ */ h("div", {
-					className: `min-w-0 flex-1 ${A} leading-relaxed whitespace-pre-line break-keep wrap-break-word`,
-					children: r
+					className: `min-w-0 flex-1 ${P} leading-relaxed whitespace-pre-line break-keep wrap-break-word`,
+					children: c
 				}),
-				W("flex shrink-0 gap-1.5"),
-				U
+				X("flex shrink-0 gap-1.5"),
+				Y
 			]
 		})] })
 	})] });
 }
 //#endregion
-export { w as dismissActionToast, T as isActionToastActive, C as showActionToast };
+export { E as dismissActionToast, D as isActionToastActive, T as showActionToast };

package/dist/{src/components → components}/action-toast/index.d.ts

@@ -1,2 +1,2 @@
-export { showActionToast, dismissActionToast, isActionToastActive, } from './ActionToast';
-export type { ActionToastButton, ActionToastInput } from './ActionToast';
+export { showActionToast, dismissActionToast, isActionToastActive, } from './ActionToast.js';
+export type { ActionToastButton, ActionToastInput } from './ActionToast.js';

package/dist/components/animated-height/AnimatedHeight.cjs

@@ -0,0 +1 @@
+let e=require("react"),t=require("react/jsx-runtime"),n=require("motion/react");function r({children:r,durationMs:i=220,ease:a=[.16,1,.3,1],className:o=``}){let s=(0,n.useReducedMotion)(),c=(0,e.useRef)(null),[l,u]=(0,e.useState)(`auto`),d=(0,e.useRef)(!0),[f,p]=(0,e.useState)(!1);return(0,e.useEffect)(()=>{let e=c.current;if(!e)return;let t=new ResizeObserver(([e])=>{if(!e)return;let t=e.contentRect.height;u(t),d.current&&(d.current=!1,requestAnimationFrame(()=>p(!0)))});return t.observe(e),()=>t.disconnect()},[]),(0,t.jsx)(n.motion.div,{animate:{height:l},transition:f&&!s?{duration:i/1e3,ease:a}:{duration:0},style:{overflow:`hidden`},className:o,children:(0,t.jsx)(`div`,{ref:c,children:r})})}exports.AnimatedHeight=r;

package/dist/components/animated-height/AnimatedHeight.esm.js

@@ -1,36 +1,36 @@
 import { useEffect as e, useRef as t, useState as n } from "react";
 import { jsx as r } from "react/jsx-runtime";
-import { motion as i } from "motion/react";
+import { motion as i, useReducedMotion as a } from "motion/react";
 //#region src/components/animated-height/AnimatedHeight.tsx
-function a({ children: a, durationMs: o = 220, ease: s = [
+function o({ children: o, durationMs: s = 220, ease: c = [
 	.16,
 	1,
 	.3,
 	1
-], className: c = "" }) {
-	let l = t(null), [u, d] = n("auto"), f = t(!0), [p, m] = n(!1);
+], className: l = "" }) {
+	let u = a(), d = t(null), [f, p] = n("auto"), m = t(!0), [h, g] = n(!1);
 	return e(() => {
-		let e = l.current;
+		let e = d.current;
 		if (!e) return;
 		let t = new ResizeObserver(([e]) => {
 			if (!e) return;
 			let t = e.contentRect.height;
-			d(t), f.current && (f.current = !1, requestAnimationFrame(() => m(!0)));
+			p(t), m.current && (m.current = !1, requestAnimationFrame(() => g(!0)));
 		});
 		return t.observe(e), () => t.disconnect();
 	}, []), /* @__PURE__ */ r(i.div, {
-		animate: { height: u },
-		transition: p ? {
-			duration: o / 1e3,
-			ease: s
+		animate: { height: f },
+		transition: h && !u ? {
+			duration: s / 1e3,
+			ease: c
 		} : { duration: 0 },
 		style: { overflow: "hidden" },
-		className: c,
+		className: l,
 		children: /* @__PURE__ */ r("div", {
-			ref: l,
-			children: a
+			ref: d,
+			children: o
 		})
 	});
 }
 //#endregion
-export { a as AnimatedHeight };
+export { o as AnimatedHeight };

package/dist/components/animated-height/index.d.ts

@@ -0,0 +1,2 @@
+export { AnimatedHeight } from './AnimatedHeight.js';
+export type { AnimatedHeightProps } from './AnimatedHeight.js';