@thewrong/ui 0.1.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/_virtual/_rolldown/runtime.cjs

@@ -0,0 +1 @@
+var e=Object.create,t=Object.defineProperty,n=Object.getOwnPropertyDescriptor,r=Object.getOwnPropertyNames,i=Object.getPrototypeOf,a=Object.prototype.hasOwnProperty,o=(e,i,o,s)=>{if(i&&typeof i==`object`||typeof i==`function`)for(var c=r(i),l=0,u=c.length,d;l<u;l++)d=c[l],!a.call(e,d)&&d!==o&&t(e,d,{get:(e=>i[e]).bind(null,d),enumerable:!(s=n(i,d))||s.enumerable});return e},s=(n,r,a)=>(a=n==null?{}:e(i(n)),o(r||!n||!n.__esModule?t(a,`default`,{value:n,enumerable:!0}):a,n));exports.__toESM=s;

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

@@ -0,0 +1,34 @@
+//#region src/components/_shared/form-size-tokens.ts
+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"
+};
+//#endregion
+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;
     /**
@@ -39,9 +48,14 @@ interface ShowActionToastArgs {
      * false면 클릭-아웃 dismiss도 비활성.
      */
     backdrop?: boolean;
+    /**
+     * 시트(카드) 루트에 병합되는 클래스. `cn`(tailwind-merge)으로 병합된다. 백드롭에는 적용 안 됨.
+     * 폭은 `widthPx`로 고정하는 것이 정책이므로 너비 클래스 대신 `widthPx`를 우선 쓸 것.
+     */
+    className?: string;
 }
 /**
- * 사용자 결정이 필요한 액션 토스트. 자동 dismiss 없음.
+ * 사용자 결정이 필요한 액션 토스트. 기본적으로 자동 닫힘이 없으며, `duration`을 지정하면 해당 시간이 지난 뒤 닫힌다.
  * 위치는 전역 Toaster를 따름(데스크탑=bottom-center, 모바일=top-center).
  * 한 번에 최대 1개만 노출(같은 id로 덮어쓰기).
  *
@@ -50,7 +64,7 @@ interface ShowActionToastArgs {
  *
  * 사용 전 앱 루트에 `react-hot-toast`의 `<Toaster />`가 마운트돼 있어야 한다.
  */
-export declare function showActionToast({ message, actions, tone, icon, input, widthPx, backdrop, }: 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

@@ -0,0 +1,238 @@
+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 _, 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 x = "action-toast-singleton";
+function S(e) {
+	C = e, e ? u.push(c, l) : u.pop(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: o,
+		backdrop: s,
+		className: c
+	}), {
+		id: x,
+		duration: a
+	});
+}
+function E() {
+	y.dismiss(x), S(!1);
+}
+function D() {
+	return C;
+}
+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 k = {
+	warning: "text-toast-tone-warning",
+	info: "text-toast-tone-info",
+	danger: "text-toast-tone-danger"
+};
+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 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") && (y.dismiss(r.id), S(!1));
+		};
+		return window.addEventListener("keydown", e), () => window.removeEventListener("keydown", e);
+	}, [r.id]);
+	let W = f(null), [G, K] = p(!1);
+	d(() => {
+		let e = W.current;
+		if (!e) return;
+		let t = () => {
+			let t = window.getComputedStyle(e), n = parseFloat(t.lineHeight);
+			!Number.isFinite(n) || n <= 0 || K(e.scrollHeight > n + 1.5);
+		};
+		t();
+		let n = new ResizeObserver(t);
+		return n.observe(e), () => n.disconnect();
+	}, [c]);
+	let q = j && G && !T;
+	d(() => {
+		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: () => {
+			y.dismiss(r.id), S(!1);
+		},
+		className: "ml-1 shrink-0 text-fg-toast-muted hover:text-fg-toast-hover transition-colors cursor-pointer",
+		"aria-label": "닫기",
+		children: /* @__PURE__ */ h(n, {
+			className: N,
+			fill: "currentColor",
+			stroke: "var(--color-bg-toast)",
+			strokeWidth: 2
+		})
+	}), 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 : O(e.variant),
+			children: e.label
+		}, r))
+	});
+	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: () => {
+			y.dismiss(r.id), S(!1);
+		},
+		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: M ? !1 : {
+			opacity: 0,
+			scale: .98
+		},
+		animate: r.visible ? {
+			opacity: 1,
+			scale: 1
+		} : {
+			opacity: 0,
+			scale: .98
+		},
+		transition: {
+			duration: M ? 0 : .22,
+			ease: [
+				.16,
+				1,
+				.3,
+				1
+			]
+		},
+		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",
+		"data-ui-action-toast": "",
+		"aria-modal": D ? "true" : void 0,
+		"aria-label": "확인이 필요한 알림",
+		children: T ? /* @__PURE__ */ g("div", {
+			className: `flex flex-col gap-2.5 ${L}`,
+			children: [
+				/* @__PURE__ */ g("div", {
+					className: `flex items-start ${R}`,
+					children: [
+						z,
+						/* @__PURE__ */ h("div", {
+							className: `min-w-0 flex-1 ${P} leading-relaxed whitespace-pre-line break-keep wrap-break-word`,
+							children: c
+						}),
+						Y
+					]
+				}),
+				T.type === "text" ? /* @__PURE__ */ h(a, {
+					ref: H,
+					variant: "box",
+					inputSize: j ? "mini" : "small",
+					value: B,
+					onChange: (e) => V(e.target.value),
+					onKeyDown: (e) => {
+						if (e.key !== "Enter" || e.nativeEvent.isComposing) return;
+						let t = l[l.length - 1];
+						!t || t.disabled || (e.preventDefault(), J(t));
+					},
+					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
+				}),
+				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 ${R} ${I}`,
+			children: [
+				/* @__PURE__ */ h("span", { className: `${N} shrink-0` }),
+				/* @__PURE__ */ h("div", {
+					ref: W,
+					className: `min-w-0 flex-1 ${P} leading-relaxed whitespace-pre-line break-keep wrap-break-word`,
+					children: c
+				}),
+				X("flex shrink-0 gap-1.5", !0)
+			]
+		}), q ? /* @__PURE__ */ g("div", {
+			className: `relative flex flex-col ${R} ${L}`,
+			children: [
+				Y && /* @__PURE__ */ h("div", {
+					className: "absolute right-3 top-3",
+					children: Y
+				}),
+				/* @__PURE__ */ h("div", {
+					className: "flex justify-center",
+					children: z
+				}),
+				/* @__PURE__ */ h("div", {
+					className: `${P} leading-relaxed text-center whitespace-pre-line break-keep wrap-break-word`,
+					children: c
+				}),
+				X("flex justify-end gap-1.5")
+			]
+		}) : /* @__PURE__ */ g("div", {
+			className: `flex items-center ${R} ${I}`,
+			children: [
+				z,
+				/* @__PURE__ */ h("div", {
+					className: `min-w-0 flex-1 ${P} leading-relaxed whitespace-pre-line break-keep wrap-break-word`,
+					children: c
+				}),
+				X("flex shrink-0 gap-1.5"),
+				Y
+			]
+		})] })
+	})] });
+}
+//#endregion
+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

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

package/dist/components/badge/Badge.cjs

@@ -0,0 +1 @@
+const e=require("../../lib/utils.cjs"),t=require("./utils.cjs");let n=require("react"),r=require("react/jsx-runtime");var i=(0,n.forwardRef)((n,i)=>{let{size:a=`medium`,variant:o=`fill`,color:s=`neutral`,className:c=``,children:l,...u}=n,d=e.cn(t.getBadgeBaseClasses(),t.getBadgeColorClasses(s,o),t.getBadgeSizeClasses(a),c);if(`as`in n&&n.as===`div`){let{as:e,...t}=u;return(0,r.jsx)(`div`,{ref:i,className:d,...t,children:l})}return(0,r.jsx)(`span`,{ref:i,className:d,...u,children:l})});i.displayName=`Badge`,exports.Badge=i;

package/dist/{src/components → components}/badge/Badge.d.ts

@@ -1,2 +1,2 @@
-import { BadgeProps } from './types';
+import { BadgeProps } from './types.js';
 export declare const Badge: import('react').ForwardRefExoticComponent<BadgeProps & import('react').RefAttributes<HTMLDivElement | HTMLSpanElement>>;

package/dist/components/badge/Badge.esm.js

@@ -0,0 +1,26 @@
+import { cn as e } from "../../lib/utils.esm.js";
+import { getBadgeBaseClasses as t, getBadgeColorClasses as n, getBadgeSizeClasses as r } from "./utils.esm.js";
+import { forwardRef as i } from "react";
+import { jsx as a } from "react/jsx-runtime";
+//#region src/components/badge/Badge.tsx
+var o = i((i, o) => {
+	let { size: s = "medium", variant: c = "fill", color: l = "neutral", className: u = "", children: d, ...f } = i, p = e(t(), n(l, c), r(s), u);
+	if ("as" in i && i.as === "div") {
+		let { as: e, ...t } = f;
+		return /* @__PURE__ */ a("div", {
+			ref: o,
+			className: p,
+			...t,
+			children: d
+		});
+	}
+	return /* @__PURE__ */ a("span", {
+		ref: o,
+		className: p,
+		...f,
+		children: d
+	});
+});
+o.displayName = "Badge";
+//#endregion
+export { o as Badge };

package/dist/components/badge/index.d.ts

@@ -0,0 +1,2 @@
+export { Badge } from './Badge.js';
+export type { BadgeProps, BadgeBaseProps, BadgeDivProps, BadgeCommonProps, BadgeColor, BadgeVariant, BadgeSize, } from './types.js';

package/dist/components/badge/utils.cjs

@@ -0,0 +1 @@
+var e=(e=`neutral`,t=`fill`)=>({primary:{fill:`bg-primary text-fg-inverse`,weak:`bg-primary-subtle text-primary-fg border border-primary-border`},secondary:{fill:`bg-neutral-fill text-fg-inverse`,weak:`bg-neutral-subtle text-neutral-fg border border-neutral-border`},success:{fill:`bg-success text-fg-inverse`,weak:`bg-success-subtle text-success-fg border border-success-border`},error:{fill:`bg-error text-fg-inverse`,weak:`bg-error-subtle text-error-fg border border-error-border`},warning:{fill:`bg-warning text-fg-inverse`,weak:`bg-warning-subtle text-warning-fg border border-warning-border`},info:{fill:`bg-info text-fg-inverse`,weak:`bg-info-subtle text-info-fg border border-info-border`},neutral:{fill:`bg-neutral-fill text-fg-inverse`,weak:`bg-neutral-subtle text-neutral-fg border border-neutral-border`}})[e][t],t=(e=`medium`)=>({xsmall:`px-1.5 py-0.5 text-xs`,small:`px-2 py-1 text-xs`,medium:`px-2.5 py-1 text-sm`,large:`px-3 py-1.5 text-base`})[e],n=()=>`inline-flex items-center justify-center font-medium rounded-badge whitespace-nowrap`;exports.getBadgeBaseClasses=n,exports.getBadgeColorClasses=e,exports.getBadgeSizeClasses=t;

package/dist/{src/components → components}/badge/utils.d.ts

@@ -1,4 +1,4 @@
-import { BadgeColor, BadgeVariant, BadgeSize } from './types';
+import { BadgeColor, BadgeVariant, BadgeSize } from './types.js';
 /**
  * Badge 색상에 따른 Tailwind 클래스 매핑
  */

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

@@ -0,0 +1,38 @@
+//#region src/components/badge/utils.ts
+var e = (e = "neutral", t = "fill") => ({
+	primary: {
+		fill: "bg-primary text-fg-inverse",
+		weak: "bg-primary-subtle text-primary-fg border border-primary-border"
+	},
+	secondary: {
+		fill: "bg-neutral-fill text-fg-inverse",
+		weak: "bg-neutral-subtle text-neutral-fg border border-neutral-border"
+	},
+	success: {
+		fill: "bg-success text-fg-inverse",
+		weak: "bg-success-subtle text-success-fg border border-success-border"
+	},
+	error: {
+		fill: "bg-error text-fg-inverse",
+		weak: "bg-error-subtle text-error-fg border border-error-border"
+	},
+	warning: {
+		fill: "bg-warning text-fg-inverse",
+		weak: "bg-warning-subtle text-warning-fg border border-warning-border"
+	},
+	info: {
+		fill: "bg-info text-fg-inverse",
+		weak: "bg-info-subtle text-info-fg border border-info-border"
+	},
+	neutral: {
+		fill: "bg-neutral-fill text-fg-inverse",
+		weak: "bg-neutral-subtle text-neutral-fg border border-neutral-border"
+	}
+})[e][t], t = (e = "medium") => ({
+	xsmall: "px-1.5 py-0.5 text-xs",
+	small: "px-2 py-1 text-xs",
+	medium: "px-2.5 py-1 text-sm",
+	large: "px-3 py-1.5 text-base"
+})[e], n = () => "inline-flex items-center justify-center font-medium rounded-badge whitespace-nowrap";
+//#endregion
+export { n as getBadgeBaseClasses, e as getBadgeColorClasses, t as getBadgeSizeClasses };

package/dist/components/button/Button.cjs

@@ -0,0 +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;

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

@@ -0,0 +1,19 @@
+import { ButtonBaseProps, ButtonLinkProps } from './types.js';
+/**
+ * 기본 버튼. `variant`(primary/secondary/tertiary/danger) × `appearance`(filled/outlined/transparent)
+ * × `size`(mini/small/medium/large) 조합으로 표현한다.
+ *
+ * - 저장·정산·전송 같은 **비가역 async 액션**에는 `clickThrottleMs`로 더블클릭을 막는다.
+ * - 모달 푸터·모바일 등 부모 폭을 채워야 하면 `display="block"`.
+ * - 시각은 버튼이지만 실제 이동이 필요하면 `as="a"` + `href`(링크로 렌더, loading/disabled 동일 동작).
+ * - 크기와 색상은 `className`으로 덮어쓸 수 있다.
+ *
+ * @example
+ * ```tsx
+ * <Button onClick={save}>저장</Button>
+ * <Button variant="danger" appearance="outlined" onClick={remove}>삭제</Button>
+ * <Button display="block" loading={isSaving} clickThrottleMs={1000} onClick={submit}>제출</Button>
+ * <Button as="a" href="/list">목록으로</Button>
+ * ```
+ */
+export declare const Button: import('react').ForwardRefExoticComponent<(ButtonBaseProps | ButtonLinkProps) & import('react').RefAttributes<HTMLButtonElement | HTMLAnchorElement>>;