@thewrong/ui 0.2.0 → 0.3.0

package/dist/components/table-checkbox/TableCheckbox.esm.js

@@ -1,39 +1,40 @@
-import { Check as e } from "../../node_modules/lucide-react/dist/esm/icons/check.esm.js";
-import { Minus as t } from "../../node_modules/lucide-react/dist/esm/icons/minus.esm.js";
-import { forwardRef as n, useEffect as r, useRef as i } from "react";
-import { jsx as a, jsxs as o } from "react/jsx-runtime";
+import { cn as e } from "../../lib/utils.esm.js";
+import { Check as t } from "../../node_modules/lucide-react/dist/esm/icons/check.esm.js";
+import { Minus as n } from "../../node_modules/lucide-react/dist/esm/icons/minus.esm.js";
+import { forwardRef as r, useEffect as i, useRef as a } from "react";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
 //#region src/components/table-checkbox/TableCheckbox.tsx
-var s = n(function({ checked: n, indeterminate: s = !1, disabled: c = !1, onChange: l, pointerEventsNone: u = !1, ariaLabel: d }, f) {
-	let p = i(null);
-	r(() => {
-		let e = p.current;
-		e && (e.indeterminate = s && !n);
-	}, [s, n]);
-	let m = s && !n;
-	return /* @__PURE__ */ o("label", {
-		className: `relative inline-flex h-[18px] w-[18px] shrink-0 items-center justify-center ${c ? "cursor-not-allowed" : "cursor-pointer"} ${u ? "pointer-events-none" : ""}`,
+var c = r(function({ checked: r, indeterminate: c = !1, disabled: l = !1, onChange: u, pointerEventsNone: d = !1, ariaLabel: f }, p) {
+	let m = a(null);
+	i(() => {
+		let e = m.current;
+		e && (e.indeterminate = c && !r);
+	}, [c, r]);
+	let h = c && !r, g = r || h;
+	return /* @__PURE__ */ s("label", {
+		className: e("relative inline-flex h-[18px] w-[18px] shrink-0 items-center justify-center", l ? "cursor-not-allowed" : "cursor-pointer", d && "pointer-events-none"),
 		style: { flex: "0 0 18px" },
-		"aria-label": d,
-		children: [/* @__PURE__ */ a("input", {
+		"aria-label": f,
+		children: [/* @__PURE__ */ o("input", {
 			ref: (e) => {
-				p.current = e, typeof f == "function" ? f(e) : f && (f.current = e);
+				m.current = e, typeof p == "function" ? p(e) : p && (p.current = e);
 			},
 			type: "checkbox",
 			className: "peer sr-only",
-			checked: n,
-			disabled: c,
-			onChange: (e) => l?.(e.target.checked)
-		}), /* @__PURE__ */ a("span", {
-			className: `flex h-full w-full items-center justify-center rounded-md border-[1.5px] transition-colors ${n || m ? "border-primary-500 bg-primary-500" : "border-neutral-300 bg-white dark:border-neutral-600 dark:bg-neutral-800"} ${c ? "opacity-40" : ""}`,
-			children: m ? /* @__PURE__ */ a(t, {
-				className: "h-3 w-3 text-white",
+			checked: r,
+			disabled: l,
+			onChange: (e) => u?.(e.target.checked)
+		}), /* @__PURE__ */ o("span", {
+			className: e("flex h-full w-full items-center justify-center rounded-checkbox border-[1.5px] transition-colors", g ? "border-primary bg-primary" : "border-border-default bg-bg-surface", l && "opacity-40"),
+			children: h ? /* @__PURE__ */ o(n, {
+				className: "h-3 w-3 text-fg-inverse",
 				strokeWidth: 3
-			}) : n ? /* @__PURE__ */ a(e, {
-				className: "h-3 w-3 text-white",
+			}) : r ? /* @__PURE__ */ o(t, {
+				className: "h-3 w-3 text-fg-inverse",
 				strokeWidth: 3
 			}) : null
 		})]
 	});
 });
 //#endregion
-export { s as TableCheckbox };
+export { c as TableCheckbox };

package/dist/components/table-checkbox/index.d.ts

@@ -0,0 +1 @@
+export { TableCheckbox } from './TableCheckbox.js';

package/dist/components/table-page-layout/TablePageLayout.cjs

@@ -0,0 +1 @@
+const e=require("../../hooks/useMediaQuery.cjs");let t=require("react"),n=require("react/jsx-runtime");function r(){return e.useIsMobile()?`mini`:`small`}function i({children:e}){let r=t.Children.toArray(e),i=r[0],o=(0,t.isValidElement)(i)&&i.type===a;return(0,n.jsxs)(`div`,{className:`flex h-[calc(100dvh-64px)] flex-col`,children:[o?i:null,(0,n.jsx)(`div`,{className:`flex min-h-0 flex-1 flex-col gap-2 px-3 pt-2 pb-3 sm:gap-3 sm:px-4 sm:pt-3 sm:pb-4 [&>*:last-child]:min-h-0 [&>*:last-child]:flex-1`,children:o?r.slice(1):r})]})}function a({title:e,children:t}){return(0,n.jsxs)(`div`,{className:`flex items-center justify-between gap-2 border-b border-border-subtle px-4 py-2 sm:px-6 sm:py-3`,children:[(0,n.jsx)(`h1`,{className:`min-w-0 truncate text-base font-semibold text-fg-default sm:text-lg`,children:e}),t?(0,n.jsx)(`div`,{className:`flex shrink-0 items-center gap-2`,children:t}):null]})}function o({children:e}){return(0,n.jsx)(`div`,{className:`flex h-full min-h-0 flex-col overflow-hidden rounded-lg bg-bg-surface p-4 gap-2 md:p-5 md:gap-4 xl:p-6 xl:gap-4 [&>*:last-child]:min-h-0 [&>*:last-child]:flex-1`,children:e})}exports.PageHeader=a,exports.TableCard=o,exports.TablePageLayout=i,exports.useHeaderButtonSize=r;

package/dist/components/table-page-layout/TablePageLayout.esm.js

@@ -17,9 +17,9 @@ function o({ children: e }) {
 }
 function s({ title: e, children: t }) {
 	return /* @__PURE__ */ i("div", {
-		className: "flex items-center justify-between gap-2 border-b border-neutral-200 px-4 py-2 dark:border-neutral-700 sm:px-6 sm:py-3",
+		className: "flex items-center justify-between gap-2 border-b border-border-subtle px-4 py-2 sm:px-6 sm:py-3",
 		children: [/* @__PURE__ */ r("h1", {
-			className: "min-w-0 truncate text-base font-semibold text-neutral-900 dark:text-white sm:text-lg",
+			className: "min-w-0 truncate text-base font-semibold text-fg-default sm:text-lg",
 			children: e
 		}), t ? /* @__PURE__ */ r("div", {
 			className: "flex shrink-0 items-center gap-2",
@@ -29,7 +29,7 @@ function s({ title: e, children: t }) {
 }
 function c({ children: e }) {
 	return /* @__PURE__ */ r("div", {
-		className: "flex h-full min-h-0 flex-col overflow-hidden rounded-lg bg-white p-4 gap-2 md:p-5 md:gap-4 xl:p-6 xl:gap-4 dark:bg-neutral-800 [&>*:last-child]:min-h-0 [&>*:last-child]:flex-1",
+		className: "flex h-full min-h-0 flex-col overflow-hidden rounded-lg bg-bg-surface p-4 gap-2 md:p-5 md:gap-4 xl:p-6 xl:gap-4 [&>*:last-child]:min-h-0 [&>*:last-child]:flex-1",
 		children: e
 	});
 }

package/dist/{src/components → components}/table-page-layout/index.d.ts

@@ -1 +1 @@
-export { TablePageLayout, PageHeader, TableCard, useHeaderButtonSize, } from './TablePageLayout';
+export { TablePageLayout, PageHeader, TableCard, useHeaderButtonSize, } from './TablePageLayout.js';

package/dist/components/textarea/Textarea.cjs

@@ -0,0 +1 @@
+const e=require("../../lib/utils.cjs"),t=require("../_shared/form-size-tokens.cjs");let n=require("react"),r=require("react/jsx-runtime");var i={large:`rounded-control-large border px-control-pad-large py-3.5 transition-colors focus-within:outline-hidden`,medium:`rounded-control-medium border px-control-pad-medium py-3 transition-colors focus-within:outline-hidden`,small:`rounded-control-small border px-control-pad-small py-2 transition-colors focus-within:outline-hidden`,mini:`rounded-control-mini border px-control-pad-mini py-1.5 transition-colors focus-within:outline-hidden`},a=(e,t,n)=>{let r=i[n];return t?[r,`bg-bg-disabled border-border-subtle`].join(` `):e?[r,`bg-bg-surface border-border-danger`].join(` `):[r,`bg-bg-surface border-border-subtle focus-within:border-border-primary`].join(` `)},o=(e,n,r,i,a)=>{let o=`w-full bg-transparent ${t.CONTROL_TEXT_CLASS[a]} focus:outline-hidden disabled:cursor-not-allowed ${i?`resize-y`:`resize-none`}`;return n?[o,`text-fg-disabled placeholder:text-fg-disabled`].join(` `):e?[o,`text-fg-danger placeholder:text-fg-danger-placeholder`].join(` `):r?[o,`text-fg-default placeholder:text-fg-subtle`].join(` `):[o,`text-fg-subtle placeholder:text-fg-subtle`].join(` `)},s=e=>[`block text-xs font-medium mb-2`,e?`text-fg-danger`:`text-fg-muted`].join(` `),c=e=>[`mt-2 text-sm`,e?`text-fg-danger`:`text-fg-muted`].join(` `),l=(0,n.forwardRef)(({textareaSize:t=`medium`,label:i,help:l,hasError:u=!1,disabled:d=!1,showCount:f=!1,resize:p=!1,maxLength:m,rows:h=4,className:g=``,containerClassName:_=``,value:v,defaultValue:y,onChange:b,placeholder:x,id:S,...C},w)=>{let[T,E]=(0,n.useState)(y?.toString()??``),D=v!==void 0,O=D?v?.toString()??``:T,k=O.length>0,A=e=>{D||E(e.target.value),b?.(e)},j=a(u,d,t),M=o(u,d,k,p,t),N=f&&m!=null&&(0,r.jsxs)(`span`,{className:e.cn(`text-xs`,u?`text-fg-danger`:`text-fg-subtle`),children:[O.length,` / `,m]});return(0,r.jsxs)(`div`,{className:e.cn(`w-full`,_),children:[i&&(0,r.jsx)(`label`,{className:s(u),htmlFor:S,children:i}),(0,r.jsxs)(`div`,{className:j,children:[(0,r.jsx)(`textarea`,{...C,ref:w,id:S,rows:h,value:D?O:void 0,defaultValue:D?void 0:y,onChange:A,placeholder:x,disabled:d,maxLength:m,className:e.cn(M,g)}),N&&(0,r.jsx)(`div`,{className:`mt-1 flex justify-end`,children:N})]}),l&&(0,r.jsx)(`div`,{className:c(u),children:l})]})});l.displayName=`Textarea`,exports.Textarea=l;

package/dist/{src/components → components}/textarea/Textarea.d.ts

@@ -1,4 +1,4 @@
-import { TextareaProps } from './types';
+import { TextareaProps } from './types.js';
 /**
  * Textarea 컴포넌트.
  *

package/dist/components/textarea/Textarea.esm.js

@@ -1,62 +1,64 @@
-import { forwardRef as e, useState as t } from "react";
-import { jsx as n, jsxs as r } from "react/jsx-runtime";
+import { cn as e } from "../../lib/utils.esm.js";
+import { CONTROL_TEXT_CLASS as t } from "../_shared/form-size-tokens.esm.js";
+import { forwardRef as n, useState as r } from "react";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
 //#region src/components/textarea/Textarea.tsx
-var i = {
-	large: "rounded-xl border px-5 py-3.5 transition-colors focus-within:outline-hidden",
-	medium: "rounded-xl border px-3.5 py-3 transition-colors focus-within:outline-hidden",
-	small: "rounded-lg border px-3 py-2 transition-colors focus-within:outline-hidden",
-	mini: "rounded-md border px-2 py-1.5 transition-colors focus-within:outline-hidden"
-}, a = (e, t, n) => {
-	let r = i[n];
-	return t ? [r, "bg-bg-disabled border-border-tertiary dark:border-border-secondary"].join(" ") : e ? [r, "bg-bg-white border-border-danger"].join(" ") : [r, "bg-bg-white border-border-tertiary dark:border-border-secondary focus-within:border-border-primary"].join(" ");
-}, o = (e, t, n, r, i) => {
-	let a = `w-full bg-transparent ${i === "mini" ? "text-xs" : i === "large" ? "text-base" : "text-sm"} focus:outline-hidden disabled:cursor-not-allowed ${r ? "resize-y" : "resize-none"}`;
-	return t ? [a, "text-text-disabled placeholder:text-text-disabled"].join(" ") : e ? [a, "text-text-danger placeholder:text-text-danger"].join(" ") : n ? [a, "text-text-primary placeholder:text-text-tertiary"].join(" ") : [a, "text-text-tertiary placeholder:text-text-tertiary"].join(" ");
-}, s = (e) => ["block text-xs font-medium mb-2", e ? "text-text-danger" : "text-text-secondary"].join(" "), c = (e) => ["mt-2 text-sm", e ? "text-text-danger" : "text-text-secondary"].join(" "), l = e(({ textareaSize: e = "medium", label: i, help: l, hasError: u = !1, disabled: d = !1, showCount: f = !1, resize: p = !1, maxLength: m, rows: h = 4, className: g = "", containerClassName: _ = "", value: v, defaultValue: y, onChange: b, placeholder: x, id: S, ...C }, w) => {
-	let [T, E] = t(y?.toString() ?? ""), D = v !== void 0, O = D ? v?.toString() ?? "" : T, k = O.length > 0, A = (e) => {
-		D || E(e.target.value), b?.(e);
-	}, j = a(u, d, e), M = o(u, d, k, p, e), N = f && m != null && /* @__PURE__ */ r("span", {
-		className: ["text-xs", u ? "text-text-danger" : "text-text-tertiary"].join(" "),
+var o = {
+	large: "rounded-control-large border px-control-pad-large py-3.5 transition-colors focus-within:outline-hidden",
+	medium: "rounded-control-medium border px-control-pad-medium py-3 transition-colors focus-within:outline-hidden",
+	small: "rounded-control-small border px-control-pad-small py-2 transition-colors focus-within:outline-hidden",
+	mini: "rounded-control-mini border px-control-pad-mini py-1.5 transition-colors focus-within:outline-hidden"
+}, s = (e, t, n) => {
+	let r = o[n];
+	return t ? [r, "bg-bg-disabled border-border-subtle"].join(" ") : e ? [r, "bg-bg-surface border-border-danger"].join(" ") : [r, "bg-bg-surface border-border-subtle focus-within:border-border-primary"].join(" ");
+}, c = (e, n, r, i, a) => {
+	let o = `w-full bg-transparent ${t[a]} focus:outline-hidden disabled:cursor-not-allowed ${i ? "resize-y" : "resize-none"}`;
+	return n ? [o, "text-fg-disabled placeholder:text-fg-disabled"].join(" ") : e ? [o, "text-fg-danger placeholder:text-fg-danger-placeholder"].join(" ") : r ? [o, "text-fg-default placeholder:text-fg-subtle"].join(" ") : [o, "text-fg-subtle placeholder:text-fg-subtle"].join(" ");
+}, l = (e) => ["block text-xs font-medium mb-2", e ? "text-fg-danger" : "text-fg-muted"].join(" "), u = (e) => ["mt-2 text-sm", e ? "text-fg-danger" : "text-fg-muted"].join(" "), d = n(({ textareaSize: t = "medium", label: n, help: o, hasError: d = !1, disabled: f = !1, showCount: p = !1, resize: m = !1, maxLength: h, rows: g = 4, className: _ = "", containerClassName: v = "", value: y, defaultValue: b, onChange: x, placeholder: S, id: C, ...w }, T) => {
+	let [E, D] = r(b?.toString() ?? ""), O = y !== void 0, k = O ? y?.toString() ?? "" : E, A = k.length > 0, j = (e) => {
+		O || D(e.target.value), x?.(e);
+	}, M = s(d, f, t), N = c(d, f, A, m, t), P = p && h != null && /* @__PURE__ */ a("span", {
+		className: e("text-xs", d ? "text-fg-danger" : "text-fg-subtle"),
 		children: [
-			O.length,
+			k.length,
 			" / ",
-			m
+			h
 		]
 	});
-	return /* @__PURE__ */ r("div", {
-		className: `w-full ${_}`.trim(),
+	return /* @__PURE__ */ a("div", {
+		className: e("w-full", v),
 		children: [
-			i && /* @__PURE__ */ n("label", {
-				className: s(u),
-				htmlFor: S,
-				children: i
+			n && /* @__PURE__ */ i("label", {
+				className: l(d),
+				htmlFor: C,
+				children: n
 			}),
-			/* @__PURE__ */ r("div", {
-				className: j,
-				children: [/* @__PURE__ */ n("textarea", {
-					...C,
-					ref: w,
-					id: S,
-					rows: h,
-					value: D ? O : void 0,
-					defaultValue: D ? void 0 : y,
-					onChange: A,
-					placeholder: x,
-					disabled: d,
-					maxLength: m,
-					className: `${M} ${g}`.trim()
-				}), N && /* @__PURE__ */ n("div", {
+			/* @__PURE__ */ a("div", {
+				className: M,
+				children: [/* @__PURE__ */ i("textarea", {
+					...w,
+					ref: T,
+					id: C,
+					rows: g,
+					value: O ? k : void 0,
+					defaultValue: O ? void 0 : b,
+					onChange: j,
+					placeholder: S,
+					disabled: f,
+					maxLength: h,
+					className: e(N, _)
+				}), P && /* @__PURE__ */ i("div", {
 					className: "mt-1 flex justify-end",
-					children: N
+					children: P
 				})]
 			}),
-			l && /* @__PURE__ */ n("div", {
-				className: c(u),
-				children: l
+			o && /* @__PURE__ */ i("div", {
+				className: u(d),
+				children: o
 			})
 		]
 	});
 });
-l.displayName = "Textarea";
+d.displayName = "Textarea";
 //#endregion
-export { l as Textarea };
+export { d as Textarea };

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

@@ -0,0 +1,2 @@
+export { Textarea } from './Textarea.js';
+export type { TextareaProps, TextareaSize } from './types.js';

package/dist/components/time-picker/index.d.ts

@@ -0,0 +1,2 @@
+export { TimeInput, TimePicker } from './time-picker.js';
+export type { TimeInputProps, TimePickerProps, TimePrecision, } from './time-picker.js';

package/dist/components/time-picker/time-picker.cjs

@@ -0,0 +1 @@
+const e=require("../../lib/utils.cjs"),t=require("../button/Button.cjs"),n=require("../../node_modules/lucide-react/dist/esm/icons/check.cjs"),r=require("../../node_modules/lucide-react/dist/esm/icons/clock.cjs"),i=require("../select/Select.cjs"),a=require("../date-picker/PickerSheet.cjs"),o=require("./time-utils.cjs");let s=require("react"),c=require("react/jsx-runtime"),l=require("@floating-ui/react");function u({children:t,value:n,onApply:r,precision:i,disabled:u=!1,disableMobileSheet:f,referenceClassName:p}){let[m,h]=(0,s.useState)(!1),[g,_]=(0,s.useState)(()=>o.parseTime(n)),v=u||!!t.props.disabled,{useSheet:y}=a.usePickerMobile(f),{refs:b,floatingStyles:x,context:S}=(0,l.useFloating)({open:m,onOpenChange:e=>{v||(e&&_(o.parseTime(n)),h(e))},placement:`bottom-start`,whileElementsMounted:l.autoUpdate,middleware:[(0,l.offset)(8),(0,l.flip)({fallbackAxisSideDirection:`start`}),(0,l.shift)({padding:8})]}),{getReferenceProps:C,getFloatingProps:w}=(0,l.useInteractions)([(0,l.useClick)(S,{enabled:!v}),(0,l.useDismiss)(S),(0,l.useRole)(S,{role:`dialog`})]),T=()=>{let e=o.normalizeTime(g,i);e&&(r(o.formatTime(e,i)),h(!1))},E=C(),D=typeof t.type!=`string`||[`button`,`input`,`select`,`textarea`].includes(t.type),O=(0,s.cloneElement)(t,{"aria-haspopup":`dialog`,"aria-expanded":m,"aria-controls":typeof E[`aria-controls`]==`string`?E[`aria-controls`]:void 0,"aria-disabled":v||void 0,...v&&D?{disabled:!0}:{}});return(0,c.jsxs)(c.Fragment,{children:[(0,c.jsx)(`span`,{ref:b.setReference,...E,className:e.cn(`inline-flex`,p??`w-full`),children:O}),(0,c.jsx)(a.PickerSheet,{isOpen:m,onClose:()=>h(!1),useSheet:y,context:S,setFloating:b.setFloating,floatingStyles:x,getFloatingProps:e=>w({...e,"aria-label":`시간 선택`}),desktopClassName:`z-floating w-80 max-w-[calc(100vw-16px)] rounded-2xl border border-border-subtle bg-bg-surface text-fg-default p-4 shadow-tooltip`,children:(0,c.jsx)(d,{pending:g,precision:i,onChange:_,onClose:()=>h(!1),onApply:T})})]})}function d({pending:r,precision:i,onChange:a,onClose:l,onApply:u}){let[d,p]=(0,s.useState)(null),m=(0,s.useRef)(null),h=(0,s.useRef)(null),g=(0,s.useRef)(null),_=e=>{if(e.key!==`Tab`||e.shiftKey||!(e.target instanceof HTMLInputElement))return;let t=e.target===m.current?h:e.target===h.current&&i===`second`?g:null;t&&(e.preventDefault(),t.current?.focus())},v=(e,t,n,i)=>(0,c.jsx)(f,{label:t,value:r[e],max:n,open:d===e,onOpenChange:t=>p(n=>t?e:n===e?null:n),onChange:t=>a({...r,[e]:t}),inputRef:i});return(0,c.jsxs)(`div`,{className:`grid gap-4`,onKeyDown:_,children:[(0,c.jsxs)(`div`,{className:e.cn(`grid items-end gap-2`,i===`second`?`grid-cols-3`:`grid-cols-2`),children:[v(`hour`,`시간`,23,m),v(`minute`,`분`,59,h),i===`second`&&v(`second`,`초`,59,g)]}),(0,c.jsxs)(`div`,{className:`flex justify-end gap-2`,children:[(0,c.jsx)(t.Button,{type:`button`,size:`small`,variant:`tertiary`,appearance:`transparent`,onClick:l,children:`닫기`}),(0,c.jsx)(t.Button,{type:`button`,size:`small`,disabled:!o.normalizeTime(r,i),leadingIcon:(0,c.jsx)(n.Check,{"aria-hidden":!0,className:`h-4 w-4`}),onClick:u,children:`적용`})]})]})}function f({label:e,value:t,max:n,open:r,onOpenChange:a,onChange:s,inputRef:l}){let u=Array.from({length:n+1},(e,t)=>({value:o.padTimeUnit(t),label:o.padTimeUnit(t)}));t&&!u.some(e=>e.value===t)&&u.push({value:t,label:t});let d=e===`시간`?`HH`:e===`분`?`MM`:`SS`;return(0,c.jsx)(i.Select,{variant:`box`,selectSize:`small`,ref:l,label:e,labelOption:`sustain`,options:u,value:t,placeholder:d,onChange:s,open:r,onOpenChange:a,searchable:!0,openOnFocus:!0,validateSearchQuery:e=>e===``||/^\d{1,2}$/.test(e)&&Number(e)<=n,onSearchChange:e=>{(r||e!==``)&&s(e)},searchDebounceMs:!1,searchPlaceholder:d})}function p({value:t,onChange:n,precision:i,ariaLabel:a=`시간`,placeholder:s,disabled:l,readOnly:d=!1,className:f,disableMobileSheet:p,size:m=`medium`,"aria-invalid":h,"data-rhf-invalid":g}){return(0,c.jsxs)(`div`,{className:e.cn(`flex min-w-0 w-full items-center border border-border-subtle bg-bg-surface transition-colors focus-within:border-border-primary`,m===`small`?`h-control-small rounded-control-small px-control-pad-small text-control-small`:`h-control-medium rounded-control-medium px-control-pad-medium font-control-field`,l&&`bg-bg-disabled text-fg-disabled`,!l&&d&&`bg-bg-subtle`,f),children:[(0,c.jsx)(`input`,{"aria-label":a,"aria-invalid":h||void 0,"data-rhf-invalid":g?`true`:void 0,value:t,placeholder:s??(i===`second`?`00:00:00`:`00:00`),disabled:l,readOnly:d,inputMode:`numeric`,maxLength:i===`second`?8:5,onChange:e=>{if(d)return;let t=o.formatDigitStream(e.target.value,i);t!==null&&o.isValidTimeDraft(t,i)&&n(t)},className:`w-0 min-w-0 flex-1 self-stretch bg-transparent text-fg-default outline-hidden placeholder:text-fg-subtle disabled:text-fg-disabled`}),(0,c.jsx)(u,{value:t,precision:i,disabled:l||d,disableMobileSheet:p,onApply:n,referenceClassName:`shrink-0`,children:(0,c.jsx)(`button`,{type:`button`,"aria-label":`${a} 선택`,disabled:l||d,"data-field-affordance":`true`,className:`relative flex h-6 w-6 shrink-0 items-center justify-center rounded text-fg-subtle transition-colors hover:bg-bg-subtle hover:text-fg-default`,children:(0,c.jsx)(r.Clock,{"aria-hidden":!0,className:`h-3.5 w-3.5`})})})]})}exports.TimeInput=p,exports.TimePicker=u;

package/dist/components/time-picker/time-picker.d.ts

@@ -0,0 +1,35 @@
+import { ReactElement } from 'react';
+import { TimePrecision } from './time-utils.js';
+export type { TimePrecision } from './time-utils.js';
+export interface TimePickerProps {
+    children: ReactElement;
+    value: string;
+    onApply: (value: string) => void;
+    precision: TimePrecision;
+    disabled?: boolean;
+    /** 이미 바텀시트 안이면 모바일에서도 popover를 사용한다. 생략하면 Modal 안에서 자동 적용되며, false를 명시하면 시트를 유지한다. */
+    disableMobileSheet?: boolean;
+    referenceClassName?: string;
+}
+export interface TimeInputProps {
+    value: string;
+    onChange: (value: string) => void;
+    precision: TimePrecision;
+    ariaLabel?: string;
+    placeholder?: string;
+    disabled?: boolean;
+    /** 값의 대비를 유지하면서 입력과 선택을 막는다. */
+    readOnly?: boolean;
+    className?: string;
+    disableMobileSheet?: boolean;
+    size?: "small" | "medium";
+    "aria-invalid"?: boolean;
+    "data-rhf-invalid"?: boolean;
+}
+/**
+ * 시·분 또는 시·분·초를 선택하고 적용할 때 값을 전달한다.
+ * 모바일 시트는 포커스를 가두지 않는다. 포커스 순환이 필요하면 Modal 안에서 사용한다.
+ */
+export declare function TimePicker({ children, value, onApply, precision, disabled, disableMobileSheet, referenceClassName, }: TimePickerProps): import("react").JSX.Element;
+/** 직접 시간 입력과 피커 버튼을 함께 제공하는 제어 입력. */
+export declare function TimeInput({ value, onChange, precision, ariaLabel, placeholder, disabled, readOnly, className, disableMobileSheet, size, "aria-invalid": ariaInvalid, "data-rhf-invalid": dataRHFInvalid, }: TimeInputProps): import("react").JSX.Element;

package/dist/components/time-picker/time-picker.esm.js

@@ -0,0 +1,193 @@
+import { cn as e } from "../../lib/utils.esm.js";
+import { Button as t } from "../button/Button.esm.js";
+import { Check as n } from "../../node_modules/lucide-react/dist/esm/icons/check.esm.js";
+import { Clock as r } from "../../node_modules/lucide-react/dist/esm/icons/clock.esm.js";
+import { Select as i } from "../select/Select.esm.js";
+import { PickerSheet as a, usePickerMobile as o } from "../date-picker/PickerSheet.esm.js";
+import { formatDigitStream as s, formatTime as c, isValidTimeDraft as l, normalizeTime as u, padTimeUnit as d, parseTime as f } from "./time-utils.esm.js";
+import { cloneElement as p, useRef as m, useState as h } from "react";
+import { Fragment as g, jsx as _, jsxs as v } from "react/jsx-runtime";
+import { autoUpdate as y, flip as b, offset as x, shift as S, useClick as C, useDismiss as w, useFloating as T, useInteractions as E, useRole as D } from "@floating-ui/react";
+//#region src/components/time-picker/time-picker.tsx
+function O({ children: t, value: n, onApply: r, precision: i, disabled: s = !1, disableMobileSheet: l, referenceClassName: d }) {
+	let [m, O] = h(!1), [A, j] = h(() => f(n)), M = s || !!t.props.disabled, { useSheet: N } = o(l), { refs: P, floatingStyles: F, context: I } = T({
+		open: m,
+		onOpenChange: (e) => {
+			M || (e && j(f(n)), O(e));
+		},
+		placement: "bottom-start",
+		whileElementsMounted: y,
+		middleware: [
+			x(8),
+			b({ fallbackAxisSideDirection: "start" }),
+			S({ padding: 8 })
+		]
+	}), { getReferenceProps: L, getFloatingProps: R } = E([
+		C(I, { enabled: !M }),
+		w(I),
+		D(I, { role: "dialog" })
+	]), z = () => {
+		let e = u(A, i);
+		e && (r(c(e, i)), O(!1));
+	}, B = L(), V = typeof t.type != "string" || [
+		"button",
+		"input",
+		"select",
+		"textarea"
+	].includes(t.type), H = p(t, {
+		"aria-haspopup": "dialog",
+		"aria-expanded": m,
+		"aria-controls": typeof B["aria-controls"] == "string" ? B["aria-controls"] : void 0,
+		"aria-disabled": M || void 0,
+		...M && V ? { disabled: !0 } : {}
+	});
+	return /* @__PURE__ */ v(g, { children: [/* @__PURE__ */ _("span", {
+		ref: P.setReference,
+		...B,
+		className: e("inline-flex", d ?? "w-full"),
+		children: H
+	}), /* @__PURE__ */ _(a, {
+		isOpen: m,
+		onClose: () => O(!1),
+		useSheet: N,
+		context: I,
+		setFloating: P.setFloating,
+		floatingStyles: F,
+		getFloatingProps: (e) => R({
+			...e,
+			"aria-label": "시간 선택"
+		}),
+		desktopClassName: "z-floating w-80 max-w-[calc(100vw-16px)] rounded-2xl border border-border-subtle bg-bg-surface text-fg-default p-4 shadow-tooltip",
+		children: /* @__PURE__ */ _(k, {
+			pending: A,
+			precision: i,
+			onChange: j,
+			onClose: () => O(!1),
+			onApply: z
+		})
+	})] });
+}
+function k({ pending: r, precision: i, onChange: a, onClose: o, onApply: s }) {
+	let [c, l] = h(null), d = m(null), f = m(null), p = m(null), g = (e) => {
+		if (e.key !== "Tab" || e.shiftKey || !(e.target instanceof HTMLInputElement)) return;
+		let t = e.target === d.current ? f : e.target === f.current && i === "second" ? p : null;
+		t && (e.preventDefault(), t.current?.focus());
+	}, y = (e, t, n, i) => /* @__PURE__ */ _(A, {
+		label: t,
+		value: r[e],
+		max: n,
+		open: c === e,
+		onOpenChange: (t) => l((n) => t ? e : n === e ? null : n),
+		onChange: (t) => a({
+			...r,
+			[e]: t
+		}),
+		inputRef: i
+	});
+	return /* @__PURE__ */ v("div", {
+		className: "grid gap-4",
+		onKeyDown: g,
+		children: [/* @__PURE__ */ v("div", {
+			className: e("grid items-end gap-2", i === "second" ? "grid-cols-3" : "grid-cols-2"),
+			children: [
+				y("hour", "시간", 23, d),
+				y("minute", "분", 59, f),
+				i === "second" && y("second", "초", 59, p)
+			]
+		}), /* @__PURE__ */ v("div", {
+			className: "flex justify-end gap-2",
+			children: [/* @__PURE__ */ _(t, {
+				type: "button",
+				size: "small",
+				variant: "tertiary",
+				appearance: "transparent",
+				onClick: o,
+				children: "닫기"
+			}), /* @__PURE__ */ _(t, {
+				type: "button",
+				size: "small",
+				disabled: !u(r, i),
+				leadingIcon: /* @__PURE__ */ _(n, {
+					"aria-hidden": !0,
+					className: "h-4 w-4"
+				}),
+				onClick: s,
+				children: "적용"
+			})]
+		})]
+	});
+}
+function A({ label: e, value: t, max: n, open: r, onOpenChange: a, onChange: o, inputRef: s }) {
+	let c = Array.from({ length: n + 1 }, (e, t) => ({
+		value: d(t),
+		label: d(t)
+	}));
+	t && !c.some((e) => e.value === t) && c.push({
+		value: t,
+		label: t
+	});
+	let l = e === "시간" ? "HH" : e === "분" ? "MM" : "SS";
+	return /* @__PURE__ */ _(i, {
+		variant: "box",
+		selectSize: "small",
+		ref: s,
+		label: e,
+		labelOption: "sustain",
+		options: c,
+		value: t,
+		placeholder: l,
+		onChange: o,
+		open: r,
+		onOpenChange: a,
+		searchable: !0,
+		openOnFocus: !0,
+		validateSearchQuery: (e) => e === "" || /^\d{1,2}$/.test(e) && Number(e) <= n,
+		onSearchChange: (e) => {
+			(r || e !== "") && o(e);
+		},
+		searchDebounceMs: !1,
+		searchPlaceholder: l
+	});
+}
+function j({ value: t, onChange: n, precision: i, ariaLabel: a = "시간", placeholder: o, disabled: c, readOnly: u = !1, className: d, disableMobileSheet: f, size: p = "medium", "aria-invalid": m, "data-rhf-invalid": h }) {
+	return /* @__PURE__ */ v("div", {
+		className: e("flex min-w-0 w-full items-center border border-border-subtle bg-bg-surface transition-colors focus-within:border-border-primary", p === "small" ? "h-control-small rounded-control-small px-control-pad-small text-control-small" : "h-control-medium rounded-control-medium px-control-pad-medium font-control-field", c && "bg-bg-disabled text-fg-disabled", !c && u && "bg-bg-subtle", d),
+		children: [/* @__PURE__ */ _("input", {
+			"aria-label": a,
+			"aria-invalid": m || void 0,
+			"data-rhf-invalid": h ? "true" : void 0,
+			value: t,
+			placeholder: o ?? (i === "second" ? "00:00:00" : "00:00"),
+			disabled: c,
+			readOnly: u,
+			inputMode: "numeric",
+			maxLength: i === "second" ? 8 : 5,
+			onChange: (e) => {
+				if (u) return;
+				let t = s(e.target.value, i);
+				t !== null && l(t, i) && n(t);
+			},
+			className: "w-0 min-w-0 flex-1 self-stretch bg-transparent text-fg-default outline-hidden placeholder:text-fg-subtle disabled:text-fg-disabled"
+		}), /* @__PURE__ */ _(O, {
+			value: t,
+			precision: i,
+			disabled: c || u,
+			disableMobileSheet: f,
+			onApply: n,
+			referenceClassName: "shrink-0",
+			children: /* @__PURE__ */ _("button", {
+				type: "button",
+				"aria-label": `${a} 선택`,
+				disabled: c || u,
+				"data-field-affordance": "true",
+				className: "relative flex h-6 w-6 shrink-0 items-center justify-center rounded text-fg-subtle transition-colors hover:bg-bg-subtle hover:text-fg-default",
+				children: /* @__PURE__ */ _(r, {
+					"aria-hidden": !0,
+					className: "h-3.5 w-3.5"
+				})
+			})
+		})]
+	});
+}
+//#endregion
+export { j as TimeInput, O as TimePicker };

package/dist/components/time-picker/time-utils.cjs

@@ -0,0 +1 @@
+function e(e){return String(e).padStart(2,`0`)}function t(e){let t=/^(\d{2}):(\d{2})(?::(\d{2}))?$/.exec(e);return t?{hour:t[1],minute:t[2],second:t[3]??`00`}:{hour:`00`,minute:`00`,second:`00`}}function n(t,n){let r=n===`second`?[t.hour,t.minute,t.second]:[t.hour,t.minute],i=[23,59,59];return r.some((e,t)=>!/^\d{1,2}$/.test(e)||Number(e)>i[t])?null:{hour:e(Number(t.hour)),minute:e(Number(t.minute)),second:e(Number(t.second))}}function r(e,t){return t===`second`?`${e.hour}:${e.minute}:${e.second}`:`${e.hour}:${e.minute}`}function i(e,t){if(e===``)return!0;if(!/^\d{0,2}(?::\d{0,2}){0,2}$/.test(e))return!1;let n=e.split(`:`);return n.length>(t===`second`?3:2)?!1:n.every((e,t)=>{if(t<n.length-1&&e.length!==2)return!1;if(e.length===0)return t===n.length-1;let r=Number(e);return t===0?r<=(e.length===1?2:23):r<=(e.length===1?5:59)})}function a(e,t){if(e===``)return``;if(!/^\d+$/.test(e))return e.includes(`:`)?e:null;if(e.length>(t===`second`?6:4))return null;if(e.length<=2)return e;let n=e.slice(0,2),r=e.slice(2,4);return t===`minute`||e.length<=4?`${n}:${r}`:`${n}:${r}:${e.slice(4,6)}`}exports.formatDigitStream=a,exports.formatTime=r,exports.isValidTimeDraft=i,exports.normalizeTime=n,exports.padTimeUnit=e,exports.parseTime=t;

package/dist/components/time-picker/time-utils.d.ts

@@ -0,0 +1,12 @@
+export type TimePrecision = "minute" | "second";
+export interface PendingTime {
+    hour: string;
+    minute: string;
+    second: string;
+}
+export declare function padTimeUnit(value: number): string;
+export declare function parseTime(value: string): PendingTime;
+export declare function normalizeTime(time: PendingTime, precision: TimePrecision): PendingTime | null;
+export declare function formatTime(time: PendingTime, precision: TimePrecision): string;
+export declare function isValidTimeDraft(value: string, precision: TimePrecision): boolean;
+export declare function formatDigitStream(value: string, precision: TimePrecision): string | null;

package/dist/components/time-picker/time-utils.esm.js

@@ -0,0 +1,56 @@
+//#region src/components/time-picker/time-utils.ts
+function e(e) {
+	return String(e).padStart(2, "0");
+}
+function t(e) {
+	let t = /^(\d{2}):(\d{2})(?::(\d{2}))?$/.exec(e);
+	return t ? {
+		hour: t[1],
+		minute: t[2],
+		second: t[3] ?? "00"
+	} : {
+		hour: "00",
+		minute: "00",
+		second: "00"
+	};
+}
+function n(t, n) {
+	let r = n === "second" ? [
+		t.hour,
+		t.minute,
+		t.second
+	] : [t.hour, t.minute], i = [
+		23,
+		59,
+		59
+	];
+	return r.some((e, t) => !/^\d{1,2}$/.test(e) || Number(e) > i[t]) ? null : {
+		hour: e(Number(t.hour)),
+		minute: e(Number(t.minute)),
+		second: e(Number(t.second))
+	};
+}
+function r(e, t) {
+	return t === "second" ? `${e.hour}:${e.minute}:${e.second}` : `${e.hour}:${e.minute}`;
+}
+function i(e, t) {
+	if (e === "") return !0;
+	if (!/^\d{0,2}(?::\d{0,2}){0,2}$/.test(e)) return !1;
+	let n = e.split(":");
+	return n.length > (t === "second" ? 3 : 2) ? !1 : n.every((e, t) => {
+		if (t < n.length - 1 && e.length !== 2) return !1;
+		if (e.length === 0) return t === n.length - 1;
+		let r = Number(e);
+		return t === 0 ? r <= (e.length === 1 ? 2 : 23) : r <= (e.length === 1 ? 5 : 59);
+	});
+}
+function a(e, t) {
+	if (e === "") return "";
+	if (!/^\d+$/.test(e)) return e.includes(":") ? e : null;
+	if (e.length > (t === "second" ? 6 : 4)) return null;
+	if (e.length <= 2) return e;
+	let n = e.slice(0, 2), r = e.slice(2, 4);
+	return t === "minute" || e.length <= 4 ? `${n}:${r}` : `${n}:${r}:${e.slice(4, 6)}`;
+}
+//#endregion
+export { a as formatDigitStream, r as formatTime, i as isValidTimeDraft, n as normalizeTime, e as padTimeUnit, t as parseTime };

package/dist/components/toast/ToastProvider.cjs

@@ -0,0 +1 @@
+const e=require("../../lib/utils.cjs"),t=require("../../node_modules/lucide-react/dist/esm/icons/circle-check.cjs"),n=require("../../node_modules/lucide-react/dist/esm/icons/circle-x.cjs"),r=require("../../node_modules/lucide-react/dist/esm/icons/info.cjs"),i=require("../../node_modules/lucide-react/dist/esm/icons/loader-circle.cjs"),a=require("../../hooks/useMediaQuery.cjs");let o=require("react/jsx-runtime"),s=require("react-hot-toast");function c({children:c}){let l=a.useIsMobile();return(0,o.jsxs)(o.Fragment,{children:[c,(0,o.jsx)(s.Toaster,{position:l?`top-center`:`bottom-center`,containerStyle:{zIndex:`var(--z-toast)`,...l?{top:`calc(16px + env(safe-area-inset-top))`}:{}},toastOptions:{duration:3e3,style:{background:`var(--color-bg-toast)`,color:`var(--color-fg-toast)`,borderRadius:`var(--radius-toast)`,padding:0,fontSize:l?`12px`:`14px`,fontWeight:500,width:`min(680px, calc(100vw - 32px))`,maxWidth:`none`}},children:a=>(0,o.jsx)(s.ToastBar,{toast:a,style:{...a.style,padding:0,width:`100%`},children:({message:c})=>{let u=l?`w-4 h-4`:`w-4.5 h-4.5`,d=l?`px-3 py-3`:`px-3 py-3.5`,f=l?`text-xs`:`text-sm`;return(0,o.jsxs)(`div`,{className:e.cn(`flex items-center w-full`,d),children:[(0,o.jsxs)(`div`,{className:`flex items-center justify-center gap-2 flex-1 min-w-0`,children:[(0,o.jsxs)(`span`,{className:`shrink-0 flex items-center`,children:[a.type===`success`&&(0,o.jsx)(t.CircleCheck,{className:e.cn(u,`text-toast-tone-success`),strokeWidth:2}),a.type===`error`&&(0,o.jsx)(n.CircleX,{className:e.cn(u,`text-toast-tone-danger`),strokeWidth:2}),a.type===`loading`&&(0,o.jsx)(i.LoaderCircle,{className:e.cn(u,`animate-spin text-fg-toast`),strokeWidth:2}),a.type===`blank`&&(0,o.jsx)(r.Info,{className:e.cn(u,`text-toast-tone-info`),strokeWidth:2})]}),(0,o.jsx)(`span`,{className:e.cn(f,`text-fg-toast whitespace-pre-line min-w-0 break-keep wrap-break-word`),children:c})]}),a.type!==`loading`&&(0,o.jsx)(`button`,{type:`button`,onClick:()=>s.toast.dismiss(a.id),className:`ml-2 shrink-0 text-fg-toast-muted hover:text-fg-toast-hover transition-colors cursor-pointer`,"aria-label":`닫기`,children:(0,o.jsx)(n.CircleX,{className:u,fill:`currentColor`,stroke:`var(--color-bg-toast)`,strokeWidth:2})})]})}})})]})}exports.ToastProvider=c;

package/dist/{src/components → components}/toast/ToastProvider.d.ts

@@ -10,6 +10,9 @@ export interface ToastProviderProps {
  *
  * - 데스크탑: bottom-center / 모바일: top-center (safe-area-inset-top 반영)
  * - 다크 그레이 배경 + lucide 아이콘 + 닫기 버튼
+ * - 쌓임: 컨테이너가 `z-toast`(150)라 모달(50)·부유 패널(100) 위에 뜬다. 그래서 토스트 내용에
+ *   Select·Popover·Tooltip 같은 부유 패널을 넣으면 패널이 토스트 아래로 깔린다 — 넣지 않는다.
+ *   react-hot-toast의 `<Toaster />`를 직접 마운트하면 이 계층이 적용되지 않는다(기본 9999).
  *
  * @example
  * ```tsx