@thewrong/ui 0.2.0 → 0.4.0

package/dist/components/table/utils.cjs

@@ -0,0 +1,35 @@
+var e=()=>`w-full
+    border-collapse
+    text-left
+    table-fixed`.replace(/\s+/g,` `),t=(e=`default`)=>({default:``,bordered:`border border-border-default`,striped:``})[e],n=(e=`medium`)=>({small:`text-sm`,medium:`text-base`,large:`text-lg`})[e],r=(e=`left`)=>({left:`text-left justify-start`,center:`text-center justify-center`,right:`text-right justify-end`})[e],i=()=>`font-medium
+    text-fg-muted
+    text-sm
+    uppercase
+    tracking-wider
+    bg-bg-table-header
+    leading-tight`.replace(/\s+/g,` `),a=()=>`px-6
+    py-1.5
+    text-fg-muted
+    text-sm
+    font-medium
+    leading-tight
+    border-b border-r border-border-table-header
+    whitespace-nowrap
+    bg-bg-table-header`.replace(/\s+/g,` `),o=()=>`px-3
+    py-0.5
+    text-fg-default
+    text-xs
+    leading-tight
+    border-b border-r border-border-table-cell
+    whitespace-nowrap
+    overflow-hidden
+    text-ellipsis`.replace(/\s+/g,` `),s=()=>`px-3
+    py-0.5
+    text-fg-default
+    text-xs
+    leading-tight
+    border-b border-r border-border-table-cell
+    whitespace-nowrap`.replace(/\s+/g,` `),c=e=>e%2==0?`bg-bg-table-row-even hover:bg-bg-table-row-hover`:`bg-bg-table-row-odd hover:bg-bg-table-row-hover`,l=()=>`bg-bg-table-row-selected
+    hover:bg-bg-table-row-selected-hover
+    shadow-[inset_4px_0_0_0_var(--color-primary)]`.replace(/\s+/g,` `),u=()=>`transition-colors duration-200
+    cursor-pointer`.replace(/\s+/g,` `);exports.getColumnAlignClasses=r,exports.getHoverableRowClasses=u,exports.getSelectedRowClasses=l,exports.getStripedRowClasses=c,exports.getTableBaseClasses=e,exports.getTableCellClasses=o,exports.getTableCellClassesNoTruncate=s,exports.getTableHeaderCellClasses=a,exports.getTableHeaderClasses=i,exports.getTableSizeClasses=n,exports.getTableVariantClasses=t;

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

@@ -1,4 +1,4 @@
-import { TableVariant, TableSize } from './types';
+import { TableVariant, TableSize } from './types.js';
 /**
  * Table의 기본 클래스 (공통 스타일)
  */
@@ -34,7 +34,7 @@ export declare const getTableCellClasses: () => string;
 export declare const getTableCellClassesNoTruncate: () => string;
 /**
  * 스트라이프 행 스타일
- * 첫 번째(index 0): 회색, 두 번째(index 1): 흰색
+ * 첫 번째(index 0): row-even(라이트 흰색), 두 번째(index 1): row-odd — avocado와 같은 위상
  */
 export declare const getStripedRowClasses: (index: number) => string;
 /**

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

@@ -1,7 +1,7 @@
 //#region src/components/table/utils.ts
 var e = () => "w-full\n    border-collapse\n    text-left\n    table-fixed".replace(/\s+/g, " "), t = (e = "default") => ({
 	default: "",
-	bordered: "border border-neutral-200 dark:border-neutral-700",
+	bordered: "border border-border-default",
 	striped: ""
 })[e], n = (e = "medium") => ({
 	small: "text-sm",
@@ -11,6 +11,6 @@ var e = () => "w-full\n    border-collapse\n    text-left\n    table-fixed".repl
 	left: "text-left justify-start",
 	center: "text-center justify-center",
 	right: "text-right justify-end"
-})[e], i = () => "font-medium\n    text-text-secondary\n    text-sm\n    uppercase\n    tracking-wider\n    bg-bg-base-secondary\n    leading-tight".replace(/\s+/g, " "), a = () => "px-6\n    py-1.5\n    text-text-secondary\n    text-sm\n    font-medium\n    leading-tight\n    border-b border-r border-border-secondary dark:border-border-tertiary\n    whitespace-nowrap\n    bg-bg-base-secondary".replace(/\s+/g, " "), o = () => "px-3\n    py-0.5\n    text-neutral-900 dark:text-white\n    text-xs\n    leading-tight\n    border-b border-r border-[#f2f3f5] dark:border-neutral-700\n    whitespace-nowrap\n    overflow-hidden\n    text-ellipsis".replace(/\s+/g, " "), s = () => "px-3\n    py-0.5\n    text-neutral-900 dark:text-white\n    text-xs\n    leading-tight\n    border-b border-r border-[#f2f3f5] dark:border-neutral-700\n    whitespace-nowrap".replace(/\s+/g, " "), c = (e) => e % 2 == 0 ? "bg-[#f9fafb] dark:bg-slate-900/50 hover:bg-[#f3f4f6] dark:hover:bg-slate-800" : "bg-white dark:bg-slate-950 hover:bg-slate-50 dark:hover:bg-slate-900", l = () => "bg-blue-50 dark:bg-blue-950/50\n    hover:bg-blue-100 dark:hover:bg-blue-950/70\n    shadow-[inset_4px_0_0_0_var(--color-primary-500)]\n    dark:shadow-[inset_4px_0_0_0_var(--color-primary-400)]".replace(/\s+/g, " "), u = () => "hover:bg-[#f9fafb]\n    transition-colors duration-200\n    cursor-pointer".replace(/\s+/g, " ");
+})[e], i = () => "font-medium\n    text-fg-muted\n    text-sm\n    uppercase\n    tracking-wider\n    bg-bg-table-header\n    leading-tight".replace(/\s+/g, " "), a = () => "px-6\n    py-1.5\n    text-fg-muted\n    text-sm\n    font-medium\n    leading-tight\n    border-b border-r border-border-table-header\n    whitespace-nowrap\n    bg-bg-table-header".replace(/\s+/g, " "), o = () => "px-3\n    py-0.5\n    text-fg-default\n    text-xs\n    leading-tight\n    border-b border-r border-border-table-cell\n    whitespace-nowrap\n    overflow-hidden\n    text-ellipsis".replace(/\s+/g, " "), s = () => "px-3\n    py-0.5\n    text-fg-default\n    text-xs\n    leading-tight\n    border-b border-r border-border-table-cell\n    whitespace-nowrap".replace(/\s+/g, " "), c = (e) => e % 2 == 0 ? "bg-bg-table-row-even hover:bg-bg-table-row-hover" : "bg-bg-table-row-odd hover:bg-bg-table-row-hover", l = () => "bg-bg-table-row-selected\n    hover:bg-bg-table-row-selected-hover\n    shadow-[inset_4px_0_0_0_var(--color-primary)]".replace(/\s+/g, " "), u = () => "transition-colors duration-200\n    cursor-pointer".replace(/\s+/g, " ");
 //#endregion
 export { r as getColumnAlignClasses, u as getHoverableRowClasses, l as getSelectedRowClasses, c as getStripedRowClasses, e as getTableBaseClasses, o as getTableCellClasses, s as getTableCellClassesNoTruncate, a as getTableHeaderCellClasses, i as getTableHeaderClasses, n as getTableSizeClasses, t as getTableVariantClasses };

package/dist/components/table-checkbox/TableCheckbox.cjs

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

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/tabs/Tabs.cjs

@@ -0,0 +1 @@
+const e=require("../../lib/utils.cjs"),t=require("./navigation.cjs");let n=require("react"),r=require("react/jsx-runtime");function i({items:i,value:a,defaultValue:o,onValueChange:s,activation:c=`auto`,"aria-label":l,"aria-labelledby":u,className:d}){let f=(0,n.useId)(),p=(0,n.useRef)([]),[m,h]=(0,n.useState)(o),[g,_]=(0,n.useState)(),v=a??m,y=i.find(e=>e.value===v&&!e.disabled)?.value??i.find(e=>!e.disabled)?.value,b=i.find(e=>e.value===g&&!e.disabled)?.value??y,x=e=>{e!==y&&(a===void 0&&h(e),s?.(e))},S=(e,n)=>{if(e.altKey||e.ctrlKey||e.metaKey)return;let r=t.nextTabIndex(i.map(e=>!!e.disabled),n,e.key);r!==null&&(e.preventDefault(),p.current[r]?.focus(),c===`auto`&&r!==n&&x(i[r].value))};return(0,r.jsxs)(`div`,{className:e.cn(`w-full`,d),children:[(0,r.jsx)(`div`,{role:`tablist`,"aria-label":l,"aria-labelledby":u,className:`flex gap-1 border-b border-border-subtle`,onBlur:e=>{e.currentTarget.contains(e.relatedTarget)||_(void 0)},children:i.map((t,n)=>(0,r.jsx)(`button`,{ref:e=>{p.current[n]=e},type:`button`,role:`tab`,id:`${f}-tab-${n}`,"aria-controls":`${f}-panel-${n}`,"aria-selected":t.value===y,tabIndex:t.value===b?0:-1,disabled:t.disabled,onFocus:()=>_(t.value),onClick:()=>x(t.value),onKeyDown:e=>S(e,n),className:e.cn(`-mb-px border-b-2 px-3 py-2 text-sm font-medium outline-none transition-colors focus-visible:ring-control focus-visible:ring-inset focus-visible:ring-focus-primary disabled:cursor-not-allowed disabled:text-fg-disabled disabled:opacity-60`,t.value===y?`border-primary-fg text-primary-fg`:`border-transparent text-fg-muted hover:text-fg-default`),children:t.label},t.value))}),i.map((e,t)=>(0,r.jsx)(`div`,{role:`tabpanel`,id:`${f}-panel-${t}`,"aria-labelledby":`${f}-tab-${t}`,hidden:e.value!==y,tabIndex:0,className:`pt-4 outline-none focus-visible:ring-control focus-visible:ring-focus-primary`,children:e.value===y?e.content:null},e.value))]})}exports.Tabs=i;

package/dist/components/tabs/Tabs.d.ts

@@ -0,0 +1,8 @@
+import { TabsProps } from './types.js';
+/**
+ * 가로 탭. SegmentedControl처럼 항목 배열을 받으며 패널 내용은 선택된 경우에만 마운트한다.
+ * 자동 활성화는 패널 내용이 즉시 준비될 때 적합하다. 지연이 있으면 manual을 사용한다.
+ * 탭 목록의 접근성 이름은 aria-label 또는 aria-labelledby로 지정한다.
+ * value가 활성 항목에 없으면 첫 활성 탭을 표시하며 onValueChange는 호출하지 않는다. 부모에서 값을 맞춘다.
+ */
+export declare function Tabs<V extends string>({ items, value, defaultValue, onValueChange, activation, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, className, }: TabsProps<V>): import("react").JSX.Element;

package/dist/components/tabs/Tabs.esm.js

@@ -0,0 +1,53 @@
+import { cn as e } from "../../lib/utils.esm.js";
+import { nextTabIndex as t } from "./navigation.esm.js";
+import { useId as n, useRef as r, useState as i } from "react";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+//#region src/components/tabs/Tabs.tsx
+function s({ items: s, value: c, defaultValue: l, onValueChange: u, activation: d = "auto", "aria-label": f, "aria-labelledby": p, className: m }) {
+	let h = n(), g = r([]), [_, v] = i(l), [y, b] = i(), x = c ?? _, S = s.find((e) => e.value === x && !e.disabled)?.value ?? s.find((e) => !e.disabled)?.value, C = s.find((e) => e.value === y && !e.disabled)?.value ?? S, w = (e) => {
+		e !== S && (c === void 0 && v(e), u?.(e));
+	}, T = (e, n) => {
+		if (e.altKey || e.ctrlKey || e.metaKey) return;
+		let r = t(s.map((e) => !!e.disabled), n, e.key);
+		r !== null && (e.preventDefault(), g.current[r]?.focus(), d === "auto" && r !== n && w(s[r].value));
+	};
+	return /* @__PURE__ */ o("div", {
+		className: e("w-full", m),
+		children: [/* @__PURE__ */ a("div", {
+			role: "tablist",
+			"aria-label": f,
+			"aria-labelledby": p,
+			className: "flex gap-1 border-b border-border-subtle",
+			onBlur: (e) => {
+				e.currentTarget.contains(e.relatedTarget) || b(void 0);
+			},
+			children: s.map((t, n) => /* @__PURE__ */ a("button", {
+				ref: (e) => {
+					g.current[n] = e;
+				},
+				type: "button",
+				role: "tab",
+				id: `${h}-tab-${n}`,
+				"aria-controls": `${h}-panel-${n}`,
+				"aria-selected": t.value === S,
+				tabIndex: t.value === C ? 0 : -1,
+				disabled: t.disabled,
+				onFocus: () => b(t.value),
+				onClick: () => w(t.value),
+				onKeyDown: (e) => T(e, n),
+				className: e("-mb-px border-b-2 px-3 py-2 text-sm font-medium outline-none transition-colors focus-visible:ring-control focus-visible:ring-inset focus-visible:ring-focus-primary disabled:cursor-not-allowed disabled:text-fg-disabled disabled:opacity-60", t.value === S ? "border-primary-fg text-primary-fg" : "border-transparent text-fg-muted hover:text-fg-default"),
+				children: t.label
+			}, t.value))
+		}), s.map((e, t) => /* @__PURE__ */ a("div", {
+			role: "tabpanel",
+			id: `${h}-panel-${t}`,
+			"aria-labelledby": `${h}-tab-${t}`,
+			hidden: e.value !== S,
+			tabIndex: 0,
+			className: "pt-4 outline-none focus-visible:ring-control focus-visible:ring-focus-primary",
+			children: e.value === S ? e.content : null
+		}, e.value))]
+	});
+}
+//#endregion
+export { s as Tabs };

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

@@ -0,0 +1,2 @@
+export { Tabs } from './Tabs.js';
+export type { TabItem, TabsProps } from './types.js';

package/dist/components/tabs/navigation.cjs

@@ -0,0 +1 @@
+function e(e,t,n){let r=e.length;if(!r||e.every(Boolean))return null;if(n===`Home`)return e.findIndex(e=>!e);if(n===`End`){for(let t=r-1;t>=0;t--)if(!e[t])return t}let i=n===`ArrowRight`?1:n===`ArrowLeft`?-1:0;if(!i)return null;for(let n=1;n<=r;n++){let a=(t+i*n+r*n)%r;if(!e[a])return a}return null}exports.nextTabIndex=e;

package/dist/components/tabs/navigation.d.ts

@@ -0,0 +1,2 @@
+/** 비활성 항목을 건너뛰며 가로 탭의 다음 포커스 인덱스를 찾는다. */
+export declare function nextTabIndex(disabled: readonly boolean[], current: number, key: string): number | null;

package/dist/components/tabs/navigation.esm.js

@@ -0,0 +1,18 @@
+//#region src/components/tabs/navigation.ts
+function e(e, t, n) {
+	let r = e.length;
+	if (!r || e.every(Boolean)) return null;
+	if (n === "Home") return e.findIndex((e) => !e);
+	if (n === "End") {
+		for (let t = r - 1; t >= 0; t--) if (!e[t]) return t;
+	}
+	let i = n === "ArrowRight" ? 1 : n === "ArrowLeft" ? -1 : 0;
+	if (!i) return null;
+	for (let n = 1; n <= r; n++) {
+		let a = (t + i * n + r * n) % r;
+		if (!e[a]) return a;
+	}
+	return null;
+}
+//#endregion
+export { e as nextTabIndex };

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

@@ -0,0 +1,20 @@
+import { ReactNode } from 'react';
+export interface TabItem<V extends string> {
+    value: V;
+    label: ReactNode;
+    content: ReactNode;
+    disabled?: boolean;
+}
+export interface TabsProps<V extends string> {
+    items: readonly TabItem<V>[];
+    /** 활성 항목에 없으면 첫 활성 탭을 표시하며 콜백은 호출하지 않는다. 부모에서 값을 맞춘다. */
+    value?: V;
+    defaultValue?: V;
+    onValueChange?: (value: V) => void;
+    /** auto는 화살표·Home·End 이동 시 선택하고 manual은 Enter 또는 Space로 선택한다. 기본 auto. */
+    activation?: "auto" | "manual";
+    /** 가로 탭만 지원한다. */
+    "aria-label"?: string;
+    "aria-labelledby"?: string;
+    className?: string;
+}

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;