@thewrong/ui 0.1.0 → 0.2.0

package/dist/components/modal/Modal.esm.js

@@ -0,0 +1,137 @@
+import { cn as e } from "../../lib/utils.esm.js";
+import { useIsMobile as t } from "../../hooks/useMediaQuery.esm.js";
+import { overlayStack as n } from "../../lib/overlay-stack.esm.js";
+import { Portal as r } from "../../lib/Portal.esm.js";
+import { useEffect as i, useId as a } from "react";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+import { AnimatePresence as c, motion as l, useDragControls as u } from "motion/react";
+//#region src/components/modal/Modal.tsx
+function d({ isOpen: d, onClose: f, title: p, widthPx: m, footer: h, bodyPadded: g = !1, subView: _, className: v, children: y }) {
+	let b = t(), x = a(), S = u();
+	return i(() => {
+		if (d) return n.push(x), document.body.style.overflow = "hidden", () => {
+			n.pop(x), n.isEmpty() && (document.body.style.overflow = "");
+		};
+	}, [d, x]), i(() => {
+		let e = (e) => {
+			e.key === "Escape" && n.isTop(x) && f();
+		};
+		return d && window.addEventListener("keydown", e), () => window.removeEventListener("keydown", e);
+	}, [
+		d,
+		f,
+		x
+	]), /* @__PURE__ */ s(r, { children: [/* @__PURE__ */ o(c, { children: d && /* @__PURE__ */ o(l.div, {
+		initial: { opacity: 0 },
+		animate: { opacity: 1 },
+		exit: { opacity: 0 },
+		transition: { duration: .2 },
+		onClick: () => {
+			n.isTop(x) && f();
+		},
+		className: "fixed inset-0 z-50 bg-black/50"
+	}, "modal-backdrop") }), /* @__PURE__ */ o(c, { children: d && /* @__PURE__ */ s(l.div, {
+		initial: b ? { y: "100%" } : {
+			opacity: 0,
+			y: 24,
+			scale: .96
+		},
+		animate: b ? { y: 0 } : {
+			opacity: 1,
+			y: 0,
+			scale: 1
+		},
+		exit: b ? {
+			y: "100%",
+			transition: {
+				duration: .2,
+				ease: [
+					.4,
+					0,
+					1,
+					1
+				]
+			}
+		} : {
+			opacity: 0,
+			y: 24,
+			scale: .96
+		},
+		transition: b ? {
+			type: "spring",
+			damping: 38,
+			stiffness: 320
+		} : {
+			duration: .25,
+			ease: [
+				.32,
+				.72,
+				0,
+				1
+			]
+		},
+		drag: b ? "y" : !1,
+		dragListener: !1,
+		dragControls: S,
+		dragConstraints: {
+			top: 0,
+			bottom: 0
+		},
+		dragElastic: {
+			top: 0,
+			bottom: .4
+		},
+		onDragEnd: (e, t) => {
+			(t.offset.y > 100 || t.velocity.y > 500) && f();
+		},
+		className: e("fixed -bottom-8 left-0 right-0 z-50 mx-auto flex max-h-[88vh] w-full flex-col overflow-hidden rounded-t-2xl bg-white pb-8 shadow-xl sm:bottom-auto sm:left-1/2 sm:right-auto sm:top-1/2 sm:max-h-[90vh] sm:w-auto sm:min-w-[320px] sm:max-w-[90vw] sm:rounded-lg sm:pb-0 dark:bg-neutral-800", v),
+		style: b ? void 0 : {
+			translateX: "-50%",
+			translateY: "-50%",
+			...m ? { width: m } : {}
+		},
+		children: [
+			/* @__PURE__ */ o("div", {
+				className: "flex justify-center pt-2 pb-1 cursor-grab touch-none active:cursor-grabbing sm:hidden",
+				onPointerDown: (e) => S.start(e),
+				children: /* @__PURE__ */ o("div", { className: "h-1 w-10 rounded-full bg-neutral-300 dark:bg-neutral-600" })
+			}),
+			p && /* @__PURE__ */ s("div", {
+				className: "flex items-center justify-between px-4 py-3",
+				children: [/* @__PURE__ */ o("h3", {
+					className: "text-base font-semibold text-neutral-900 sm:text-lg dark:text-white",
+					children: p
+				}), /* @__PURE__ */ o("button", {
+					onClick: f,
+					className: "rounded p-1 text-neutral-500 hover:text-neutral-700 dark:hover:text-neutral-300",
+					"aria-label": "닫기",
+					children: /* @__PURE__ */ o("svg", {
+						className: "h-5 w-5",
+						fill: "none",
+						stroke: "currentColor",
+						viewBox: "0 0 24 24",
+						children: /* @__PURE__ */ o("path", {
+							strokeLinecap: "round",
+							strokeLinejoin: "round",
+							strokeWidth: 2,
+							d: "M6 18L18 6M6 6l12 12"
+						})
+					})
+				})]
+			}),
+			/* @__PURE__ */ s("div", {
+				className: "relative flex min-h-0 flex-1 flex-col overflow-hidden",
+				children: [/* @__PURE__ */ o("div", {
+					className: `transform-[translateZ(0)] flex-1 overflow-y-auto overflow-x-hidden${g ? " mx-1 sm:mx-4" : ""}`,
+					children: y
+				}), _]
+			}),
+			h && /* @__PURE__ */ o("div", {
+				className: "shrink-0",
+				children: h
+			})
+		]
+	}, "modal-sheet") })] });
+}
+//#endregion
+export { d as Modal };

package/dist/components/modal/ModalSubView.cjs.js

@@ -0,0 +1 @@
+const e=require("../../node_modules/lucide-react/dist/esm/icons/arrow-left.cjs.js"),t=require("../../lib/overlay-stack.cjs.js");let n=require("react"),r=require("react/jsx-runtime"),i=require("motion/react");function a({open:a,onBack:o,title:s,headerRight:c,bodyPadded:l=!0,contentPadded:u=!0,variant:d=`full`,children:f}){let p=(0,n.useId)();(0,n.useEffect)(()=>{if(a)return t.overlayStack.push(p),()=>{t.overlayStack.pop(p)}},[a,p]),(0,n.useEffect)(()=>{let e=e=>{e.key===`Escape`&&t.overlayStack.isTop(p)&&o()};return a&&window.addEventListener(`keydown`,e),()=>window.removeEventListener(`keydown`,e)},[a,o,p]);let m=(0,r.jsxs)(`div`,{className:`flex items-center gap-2 border-b border-border-tertiary px-4 py-3 dark:border-neutral-700`,children:[(0,r.jsx)(`button`,{type:`button`,onClick:o,className:`rounded p-1 text-text-tertiary transition-colors hover:bg-bg-base-secondary hover:text-text-secondary dark:text-neutral-400 dark:hover:bg-neutral-700 dark:hover:text-neutral-200`,"aria-label":`뒤로 가기`,children:(0,r.jsx)(e.ArrowLeft,{className:`h-4 w-4`})}),s&&(0,r.jsx)(`div`,{className:`flex-1 text-sm font-semibold text-text-primary dark:text-white`,children:s}),c]}),h=(0,r.jsx)(`div`,{className:`transform-[translateZ(0)] flex-1 overflow-y-auto overflow-x-hidden${l?` mx-1 sm:mx-4`:``}`,children:u?(0,r.jsx)(`div`,{className:`px-2 py-3 sm:px-4 sm:py-5`,children:f}):f});return d===`drawer`?(0,r.jsx)(i.AnimatePresence,{children:a&&(0,r.jsxs)(`div`,{className:`absolute inset-0 z-10`,children:[(0,r.jsx)(i.motion.div,{initial:{opacity:0},animate:{opacity:1},exit:{opacity:0},transition:{duration:.2},onClick:o,className:`absolute inset-0 bg-black/40`},`subview-drawer-backdrop`),(0,r.jsxs)(i.motion.div,{initial:{x:`100%`},animate:{x:0},exit:{x:`100%`,transition:{duration:.2,ease:[.4,0,1,1]}},transition:{type:`spring`,damping:30,stiffness:320},className:`absolute right-0 top-0 bottom-0 flex w-[85%] max-w-md flex-col bg-bg-white shadow-xl dark:bg-neutral-800`,children:[m,h]},`subview-drawer-sheet`)]})}):(0,r.jsx)(i.AnimatePresence,{children:a&&(0,r.jsxs)(i.motion.div,{initial:{x:`100%`},animate:{x:0},exit:{x:`100%`},transition:{duration:.25,ease:`easeOut`},className:`absolute inset-0 z-10 flex flex-col bg-bg-white dark:bg-neutral-800`,children:[m,h]})})}exports.ModalSubView=a;

package/dist/components/modal/ModalSubView.esm.js

@@ -0,0 +1,91 @@
+import { ArrowLeft as e } from "../../node_modules/lucide-react/dist/esm/icons/arrow-left.esm.js";
+import { overlayStack as t } from "../../lib/overlay-stack.esm.js";
+import { useEffect as n, useId as r } from "react";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+import { AnimatePresence as o, motion as s } from "motion/react";
+//#region src/components/modal/ModalSubView.tsx
+function c({ open: c, onBack: l, title: u, headerRight: d, bodyPadded: f = !0, contentPadded: p = !0, variant: m = "full", children: h }) {
+	let g = r();
+	n(() => {
+		if (c) return t.push(g), () => {
+			t.pop(g);
+		};
+	}, [c, g]), n(() => {
+		let e = (e) => {
+			e.key === "Escape" && t.isTop(g) && l();
+		};
+		return c && window.addEventListener("keydown", e), () => window.removeEventListener("keydown", e);
+	}, [
+		c,
+		l,
+		g
+	]);
+	let _ = /* @__PURE__ */ a("div", {
+		className: "flex items-center gap-2 border-b border-border-tertiary px-4 py-3 dark:border-neutral-700",
+		children: [
+			/* @__PURE__ */ i("button", {
+				type: "button",
+				onClick: l,
+				className: "rounded p-1 text-text-tertiary transition-colors hover:bg-bg-base-secondary hover:text-text-secondary dark:text-neutral-400 dark:hover:bg-neutral-700 dark:hover:text-neutral-200",
+				"aria-label": "뒤로 가기",
+				children: /* @__PURE__ */ i(e, { className: "h-4 w-4" })
+			}),
+			u && /* @__PURE__ */ i("div", {
+				className: "flex-1 text-sm font-semibold text-text-primary dark:text-white",
+				children: u
+			}),
+			d
+		]
+	}), v = /* @__PURE__ */ i("div", {
+		className: `transform-[translateZ(0)] flex-1 overflow-y-auto overflow-x-hidden${f ? " mx-1 sm:mx-4" : ""}`,
+		children: p ? /* @__PURE__ */ i("div", {
+			className: "px-2 py-3 sm:px-4 sm:py-5",
+			children: h
+		}) : h
+	});
+	return m === "drawer" ? /* @__PURE__ */ i(o, { children: c && /* @__PURE__ */ a("div", {
+		className: "absolute inset-0 z-10",
+		children: [/* @__PURE__ */ i(s.div, {
+			initial: { opacity: 0 },
+			animate: { opacity: 1 },
+			exit: { opacity: 0 },
+			transition: { duration: .2 },
+			onClick: l,
+			className: "absolute inset-0 bg-black/40"
+		}, "subview-drawer-backdrop"), /* @__PURE__ */ a(s.div, {
+			initial: { x: "100%" },
+			animate: { x: 0 },
+			exit: {
+				x: "100%",
+				transition: {
+					duration: .2,
+					ease: [
+						.4,
+						0,
+						1,
+						1
+					]
+				}
+			},
+			transition: {
+				type: "spring",
+				damping: 30,
+				stiffness: 320
+			},
+			className: "absolute right-0 top-0 bottom-0 flex w-[85%] max-w-md flex-col bg-bg-white shadow-xl dark:bg-neutral-800",
+			children: [_, v]
+		}, "subview-drawer-sheet")]
+	}) }) : /* @__PURE__ */ i(o, { children: c && /* @__PURE__ */ a(s.div, {
+		initial: { x: "100%" },
+		animate: { x: 0 },
+		exit: { x: "100%" },
+		transition: {
+			duration: .25,
+			ease: "easeOut"
+		},
+		className: "absolute inset-0 z-10 flex flex-col bg-bg-white dark:bg-neutral-800",
+		children: [_, v]
+	}) });
+}
+//#endregion
+export { c as ModalSubView };

package/dist/components/modal/StandardModal.cjs.js

@@ -0,0 +1 @@
+const e=require("../button/Button.cjs.js"),t=require("../../hooks/useMediaQuery.cjs.js"),n=require("./Modal.cjs.js");let r=require("react/jsx-runtime");function i({isOpen:i,onClose:a,title:o,widthPx:s,subView:c,primaryAction:l,secondaryAction:u,leftAction:d,bodyNoPadding:f,children:p}){let m=t.useIsMobile(),h=l||u||d,g=m?`mini`:`small`,_=(t,n)=>(0,r.jsx)(e.Button,{variant:t.variant??n.variant,appearance:t.appearance??n.appearance,size:g,display:`block`,leadingIcon:t.leadingIcon,onClick:t.onClick,loading:t.loading,disabled:t.disabled,children:t.label});return(0,r.jsx)(n.Modal,{isOpen:i,onClose:a,title:o,widthPx:s,bodyPadded:!0,subView:c,footer:h?(0,r.jsxs)(`div`,{className:`flex items-center justify-between gap-2 border-t border-neutral-200 px-4 py-3 sm:px-5 sm:py-4 dark:border-neutral-700`,children:[(0,r.jsx)(`div`,{children:d&&(0,r.jsx)(`div`,{className:`w-[88px] sm:w-28`,children:_(d,{variant:`tertiary`,appearance:`outlined`})})}),(0,r.jsxs)(`div`,{className:`flex gap-2`,children:[u&&(0,r.jsx)(`div`,{className:`w-16 sm:w-24`,children:_(u,{variant:`secondary`,appearance:`outlined`})}),l&&(0,r.jsx)(`div`,{className:`w-16 sm:w-24`,children:_(l,{variant:`primary`})})]})]}):void 0,children:f?p:(0,r.jsx)(`div`,{className:`px-2 py-3 sm:px-4 sm:py-5`,children:p})})}exports.StandardModal=i;

package/dist/components/modal/StandardModal.esm.js

@@ -0,0 +1,54 @@
+import { Button as e } from "../button/Button.esm.js";
+import { useIsMobile as t } from "../../hooks/useMediaQuery.esm.js";
+import { Modal as n } from "./Modal.esm.js";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+//#region src/components/modal/StandardModal.tsx
+function a({ isOpen: a, onClose: o, title: s, widthPx: c, subView: l, primaryAction: u, secondaryAction: d, leftAction: f, bodyNoPadding: p, children: m }) {
+	let h = t(), g = u || d || f, _ = h ? "mini" : "small", v = (t, n) => /* @__PURE__ */ r(e, {
+		variant: t.variant ?? n.variant,
+		appearance: t.appearance ?? n.appearance,
+		size: _,
+		display: "block",
+		leadingIcon: t.leadingIcon,
+		onClick: t.onClick,
+		loading: t.loading,
+		disabled: t.disabled,
+		children: t.label
+	});
+	return /* @__PURE__ */ r(n, {
+		isOpen: a,
+		onClose: o,
+		title: s,
+		widthPx: c,
+		bodyPadded: !0,
+		subView: l,
+		footer: g ? /* @__PURE__ */ i("div", {
+			className: "flex items-center justify-between gap-2 border-t border-neutral-200 px-4 py-3 sm:px-5 sm:py-4 dark:border-neutral-700",
+			children: [/* @__PURE__ */ r("div", { children: f && /* @__PURE__ */ r("div", {
+				className: "w-[88px] sm:w-28",
+				children: v(f, {
+					variant: "tertiary",
+					appearance: "outlined"
+				})
+			}) }), /* @__PURE__ */ i("div", {
+				className: "flex gap-2",
+				children: [d && /* @__PURE__ */ r("div", {
+					className: "w-16 sm:w-24",
+					children: v(d, {
+						variant: "secondary",
+						appearance: "outlined"
+					})
+				}), u && /* @__PURE__ */ r("div", {
+					className: "w-16 sm:w-24",
+					children: v(u, { variant: "primary" })
+				})]
+			})]
+		}) : void 0,
+		children: p ? m : /* @__PURE__ */ r("div", {
+			className: "px-2 py-3 sm:px-4 sm:py-5",
+			children: m
+		})
+	});
+}
+//#endregion
+export { a as StandardModal };

package/dist/components/page-title/PageTitle.cjs.js

@@ -0,0 +1 @@
+let e=require("react/jsx-runtime");function t({title:t,subtitle:n,className:r=``}){return(0,e.jsxs)(`div`,{className:`flex min-w-0 items-baseline gap-x-3 ${r}`,children:[(0,e.jsx)(`h1`,{className:`min-w-0 shrink truncate text-base font-semibold text-text-secondary sm:text-lg`,children:t}),n&&(0,e.jsx)(`p`,{className:`min-w-0 shrink-3 truncate text-xs text-text-tertiary sm:text-sm`,children:n})]})}exports.PageTitle=t;

package/dist/components/page-title/PageTitle.esm.js

@@ -0,0 +1,16 @@
+import { jsx as e, jsxs as t } from "react/jsx-runtime";
+//#region src/components/page-title/PageTitle.tsx
+function n({ title: n, subtitle: r, className: i = "" }) {
+	return /* @__PURE__ */ t("div", {
+		className: `flex min-w-0 items-baseline gap-x-3 ${i}`,
+		children: [/* @__PURE__ */ e("h1", {
+			className: "min-w-0 shrink truncate text-base font-semibold text-text-secondary sm:text-lg",
+			children: n
+		}), r && /* @__PURE__ */ e("p", {
+			className: "min-w-0 shrink-3 truncate text-xs text-text-tertiary sm:text-sm",
+			children: r
+		})]
+	});
+}
+//#endregion
+export { n as PageTitle };

package/dist/components/popover/Popover.cjs.js

@@ -0,0 +1 @@
+const e=require("../../lib/utils.cjs.js");let t=require("react"),n=require("react/jsx-runtime"),r=require("motion/react"),i=require("@floating-ui/react");function a({trigger:a,content:o,placement:s=`bottom`,onOpenChange:c,className:l}){let[u,d]=(0,t.useState)(!1),f=e=>{d(e),c?.(e)},{refs:p,floatingStyles:m,context:h}=(0,i.useFloating)({open:u,onOpenChange:f,placement:s,whileElementsMounted:i.autoUpdate,middleware:[(0,i.offset)(8),(0,i.flip)({fallbackAxisSideDirection:`start`}),(0,i.shift)({padding:8})]}),{getReferenceProps:g,getFloatingProps:_}=(0,i.useInteractions)([(0,i.useClick)(h),(0,i.useDismiss)(h),(0,i.useRole)(h,{role:`dialog`})]),v=()=>f(!1);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(`span`,{ref:p.setReference,tabIndex:0,role:`button`,...g(),className:`inline-flex cursor-pointer select-none`,children:a}),(0,n.jsx)(i.FloatingPortal,{children:(0,n.jsx)(r.AnimatePresence,{children:u&&(0,n.jsx)(`div`,{ref:p.setFloating,style:m,..._(),className:`z-9999`,children:(0,n.jsx)(r.motion.div,{initial:{opacity:0,scale:.95},animate:{opacity:1,scale:1},exit:{opacity:0,scale:.95},transition:{duration:.15},className:e.cn(`bg-white dark:bg-neutral-800 rounded-lg shadow-md border border-border-tertiary dark:border-border-secondary p-4 min-w-60 max-w-[320px]`,l),children:typeof o==`function`?o(v):o})})})})]})}exports.Popover=a;

package/dist/components/popover/Popover.esm.js

@@ -0,0 +1,57 @@
+import { cn as e } from "../../lib/utils.esm.js";
+import { useState as t } from "react";
+import { Fragment as n, jsx as r, jsxs as i } from "react/jsx-runtime";
+import { AnimatePresence as a, motion as o } from "motion/react";
+import { FloatingPortal as s, autoUpdate as c, flip as l, offset as u, shift as d, useClick as f, useDismiss as p, useFloating as m, useInteractions as h, useRole as g } from "@floating-ui/react";
+//#region src/components/popover/Popover.tsx
+function _({ trigger: _, content: v, placement: y = "bottom", onOpenChange: b, className: x }) {
+	let [S, C] = t(!1), w = (e) => {
+		C(e), b?.(e);
+	}, { refs: T, floatingStyles: E, context: D } = m({
+		open: S,
+		onOpenChange: w,
+		placement: y,
+		whileElementsMounted: c,
+		middleware: [
+			u(8),
+			l({ fallbackAxisSideDirection: "start" }),
+			d({ padding: 8 })
+		]
+	}), { getReferenceProps: O, getFloatingProps: k } = h([
+		f(D),
+		p(D),
+		g(D, { role: "dialog" })
+	]), A = () => w(!1);
+	return /* @__PURE__ */ i(n, { children: [/* @__PURE__ */ r("span", {
+		ref: T.setReference,
+		tabIndex: 0,
+		role: "button",
+		...O(),
+		className: "inline-flex cursor-pointer select-none",
+		children: _
+	}), /* @__PURE__ */ r(s, { children: /* @__PURE__ */ r(a, { children: S && /* @__PURE__ */ r("div", {
+		ref: T.setFloating,
+		style: E,
+		...k(),
+		className: "z-9999",
+		children: /* @__PURE__ */ r(o.div, {
+			initial: {
+				opacity: 0,
+				scale: .95
+			},
+			animate: {
+				opacity: 1,
+				scale: 1
+			},
+			exit: {
+				opacity: 0,
+				scale: .95
+			},
+			transition: { duration: .15 },
+			className: e("bg-white dark:bg-neutral-800 rounded-lg shadow-md border border-border-tertiary dark:border-border-secondary p-4 min-w-60 max-w-[320px]", x),
+			children: typeof v == "function" ? v(A) : v
+		})
+	}) }) })] });
+}
+//#endregion
+export { _ as Popover };

package/dist/components/search-box/ExactMatchToggle.cjs.js

@@ -0,0 +1 @@
+const e=require("../../node_modules/lucide-react/dist/esm/icons/check.cjs.js");let t=require("react/jsx-runtime");function n({value:n,onChange:r,size:i}){let a=i===`mini`;return(0,t.jsxs)(`label`,{className:`inline-flex cursor-pointer items-center gap-1 select-none`,children:[(0,t.jsx)(`input`,{type:`checkbox`,checked:n,onChange:e=>r(e.target.checked),className:`peer sr-only`}),(0,t.jsx)(e.Check,{className:`${a?`h-3.5 w-3.5`:`h-4 w-4`} stroke-3 transition-colors peer-focus-visible:outline-2 peer-focus-visible:outline-primary-500 peer-focus-visible:outline-offset-1 ${n?`text-primary-500`:`text-icon-tertiary`}`,"aria-hidden":`true`}),(0,t.jsx)(`span`,{className:`${a?`text-xs`:`text-sm`} font-medium transition-colors ${n?`text-primary-500`:`text-text-tertiary`}`,children:`완전일치`})]})}exports.ExactMatchToggle=n;

package/dist/components/search-box/ExactMatchToggle.esm.js

@@ -0,0 +1,27 @@
+import { Check as e } from "../../node_modules/lucide-react/dist/esm/icons/check.esm.js";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+//#region src/components/search-box/ExactMatchToggle.tsx
+function r({ value: r, onChange: i, size: a }) {
+	let o = a === "mini";
+	return /* @__PURE__ */ n("label", {
+		className: "inline-flex cursor-pointer items-center gap-1 select-none",
+		children: [
+			/* @__PURE__ */ t("input", {
+				type: "checkbox",
+				checked: r,
+				onChange: (e) => i(e.target.checked),
+				className: "peer sr-only"
+			}),
+			/* @__PURE__ */ t(e, {
+				className: `${o ? "h-3.5 w-3.5" : "h-4 w-4"} stroke-3 transition-colors peer-focus-visible:outline-2 peer-focus-visible:outline-primary-500 peer-focus-visible:outline-offset-1 ${r ? "text-primary-500" : "text-icon-tertiary"}`,
+				"aria-hidden": "true"
+			}),
+			/* @__PURE__ */ t("span", {
+				className: `${o ? "text-xs" : "text-sm"} font-medium transition-colors ${r ? "text-primary-500" : "text-text-tertiary"}`,
+				children: "완전일치"
+			})
+		]
+	});
+}
+//#endregion
+export { r as ExactMatchToggle };

package/dist/components/search-box/SearchBox.cjs.js

@@ -0,0 +1 @@
+const e=require("../button/Button.cjs.js"),t=require("../../node_modules/lucide-react/dist/esm/icons/list-filter.cjs.js"),n=require("../../node_modules/lucide-react/dist/esm/icons/rotate-ccw.cjs.js"),r=require("../../node_modules/lucide-react/dist/esm/icons/search.cjs.js"),i=require("../../hooks/useMediaQuery.cjs.js"),a=require("../modal/StandardModal.cjs.js"),o=require("./ExactMatchToggle.cjs.js"),s=require("./SearchBoxChips.cjs.js"),c=require("./SearchBoxSheetContext.cjs.js"),l=require("./SearchBoxField.cjs.js"),u=require("./useSearchBoxState.cjs.js");let d=require("react"),f=require("react/jsx-runtime");function p({fields:p,values:h,onSearch:g,onClear:_,isSubmitting:v=!1,exactMatch:y,className:b=``}){let x=i.useIsMobile(),S=x?`mini`:`small`,[C,w]=(0,d.useState)(!1),{draft:T,setFieldValue:E,submit:D,clear:O,chips:k,removeChip:A}=u.useSearchBoxState({fields:p,values:h,onSearch:g,onClear:_}),j=()=>v?!1:D(),M=()=>{j()&&w(!1)};return x?(0,f.jsxs)(`div`,{className:`w-full ${b}`,children:[(0,f.jsxs)(`div`,{className:`flex w-full items-center justify-end gap-1`,children:[(0,f.jsx)(m,{label:`초기화`,onClick:O,variant:`ghost`,icon:(0,f.jsx)(n.RotateCcw,{className:`h-4 w-4`})}),(0,f.jsx)(m,{label:`검색`,onClick:j,disabled:v,variant:`primary`,icon:(0,f.jsx)(r.Search,{className:`h-4 w-4`})}),(0,f.jsx)(m,{label:`필터`,onClick:()=>w(!0),variant:`ghost`,icon:(0,f.jsx)(t.ListFilter,{className:`h-4 w-4`}),activeDot:k.length>0})]}),k.length>0&&(0,f.jsx)(`div`,{className:`mt-2`,children:(0,f.jsx)(s.SearchBoxChips,{chips:k,onRemove:A})}),(0,f.jsx)(a.StandardModal,{isOpen:C,onClose:()=>w(!1),title:`필터`,primaryAction:{label:`적용`,onClick:M,loading:v},secondaryAction:{label:`닫기`,onClick:()=>w(!1)},children:(0,f.jsx)(c.SearchBoxSheetContext.Provider,{value:!0,children:(0,f.jsxs)(`div`,{className:`flex flex-col gap-4`,children:[p.filter(e=>!e.hidden).map(e=>(0,f.jsx)(l.SearchBoxField,{field:e,value:T[e.key]??``,onChange:t=>E(e.key,t),onEnter:M,size:`small`},e.key)),y&&(0,f.jsx)(`div`,{className:`flex justify-end`,children:(0,f.jsx)(o.ExactMatchToggle,{value:y.value,onChange:y.onChange,size:`small`})})]})})})]}):(0,f.jsxs)(`div`,{className:`w-full ${b}`,children:[(0,f.jsxs)(`div`,{className:`flex w-full flex-wrap items-center gap-x-3 gap-y-2`,children:[p.filter(e=>!e.hidden).map(e=>(0,f.jsx)(`div`,{className:e.className??`w-44`,children:(0,f.jsx)(l.SearchBoxField,{field:e,value:T[e.key]??``,onChange:t=>E(e.key,t),onEnter:j,size:S})},e.key)),(0,f.jsxs)(`div`,{className:`ml-auto flex items-center gap-3`,children:[y&&(0,f.jsx)(o.ExactMatchToggle,{value:y.value,onChange:y.onChange,size:S}),(0,f.jsxs)(`div`,{className:`flex items-center gap-2`,children:[(0,f.jsx)(e.Button,{variant:`tertiary`,appearance:`outlined`,size:S,onClick:O,leadingIcon:(0,f.jsx)(n.RotateCcw,{className:`h-3.5 w-3.5`}),className:`h-10 border-border-tertiary! dark:border-border-secondary!`,children:`초기화`}),(0,f.jsx)(e.Button,{variant:`primary`,size:S,onClick:j,loading:v,leadingIcon:(0,f.jsx)(r.Search,{className:`h-3.5 w-3.5`}),className:`h-10`,children:`검색`})]})]})]}),k.length>0&&(0,f.jsx)(`div`,{className:`mt-2`,children:(0,f.jsx)(s.SearchBoxChips,{chips:k,onRemove:A})})]})}function m({label:e,onClick:t,icon:n,variant:r,disabled:i,activeDot:a}){return(0,f.jsxs)(`button`,{type:`button`,"aria-label":e,onClick:t,disabled:i,className:`relative inline-flex h-9 w-9 items-center justify-center rounded-lg transition-colors disabled:opacity-50 ${r===`primary`?`bg-primary-500 text-white hover:bg-primary-600`:`text-icon-secondary hover:bg-bg-base-secondary`}`,children:[n,a&&(0,f.jsx)(`span`,{className:`absolute top-1.5 right-1.5 h-1.5 w-1.5 rounded-full bg-primary-500`})]})}exports.SearchBox=p;

package/dist/components/search-box/SearchBox.esm.js

@@ -0,0 +1,154 @@
+import { Button as e } from "../button/Button.esm.js";
+import { ListFilter as t } from "../../node_modules/lucide-react/dist/esm/icons/list-filter.esm.js";
+import { RotateCcw as n } from "../../node_modules/lucide-react/dist/esm/icons/rotate-ccw.esm.js";
+import { Search as r } from "../../node_modules/lucide-react/dist/esm/icons/search.esm.js";
+import { useIsMobile as i } from "../../hooks/useMediaQuery.esm.js";
+import { StandardModal as a } from "../modal/StandardModal.esm.js";
+import { ExactMatchToggle as o } from "./ExactMatchToggle.esm.js";
+import { SearchBoxChips as s } from "./SearchBoxChips.esm.js";
+import { SearchBoxSheetContext as c } from "./SearchBoxSheetContext.esm.js";
+import { SearchBoxField as l } from "./SearchBoxField.esm.js";
+import { useSearchBoxState as u } from "./useSearchBoxState.esm.js";
+import { useState as d } from "react";
+import { jsx as f, jsxs as p } from "react/jsx-runtime";
+//#region src/components/search-box/SearchBox.tsx
+function m({ fields: m, values: g, onSearch: _, onClear: v, isSubmitting: y = !1, exactMatch: b, className: x = "" }) {
+	let S = i(), C = S ? "mini" : "small", [w, T] = d(!1), { draft: E, setFieldValue: D, submit: O, clear: k, chips: A, removeChip: j } = u({
+		fields: m,
+		values: g,
+		onSearch: _,
+		onClear: v
+	}), M = () => y ? !1 : O(), N = () => {
+		M() && T(!1);
+	};
+	return S ? /* @__PURE__ */ p("div", {
+		className: `w-full ${x}`,
+		children: [
+			/* @__PURE__ */ p("div", {
+				className: "flex w-full items-center justify-end gap-1",
+				children: [
+					/* @__PURE__ */ f(h, {
+						label: "초기화",
+						onClick: k,
+						variant: "ghost",
+						icon: /* @__PURE__ */ f(n, { className: "h-4 w-4" })
+					}),
+					/* @__PURE__ */ f(h, {
+						label: "검색",
+						onClick: M,
+						disabled: y,
+						variant: "primary",
+						icon: /* @__PURE__ */ f(r, { className: "h-4 w-4" })
+					}),
+					/* @__PURE__ */ f(h, {
+						label: "필터",
+						onClick: () => T(!0),
+						variant: "ghost",
+						icon: /* @__PURE__ */ f(t, { className: "h-4 w-4" }),
+						activeDot: A.length > 0
+					})
+				]
+			}),
+			A.length > 0 && /* @__PURE__ */ f("div", {
+				className: "mt-2",
+				children: /* @__PURE__ */ f(s, {
+					chips: A,
+					onRemove: j
+				})
+			}),
+			/* @__PURE__ */ f(a, {
+				isOpen: w,
+				onClose: () => T(!1),
+				title: "필터",
+				primaryAction: {
+					label: "적용",
+					onClick: N,
+					loading: y
+				},
+				secondaryAction: {
+					label: "닫기",
+					onClick: () => T(!1)
+				},
+				children: /* @__PURE__ */ f(c.Provider, {
+					value: !0,
+					children: /* @__PURE__ */ p("div", {
+						className: "flex flex-col gap-4",
+						children: [m.filter((e) => !e.hidden).map((e) => /* @__PURE__ */ f(l, {
+							field: e,
+							value: E[e.key] ?? "",
+							onChange: (t) => D(e.key, t),
+							onEnter: N,
+							size: "small"
+						}, e.key)), b && /* @__PURE__ */ f("div", {
+							className: "flex justify-end",
+							children: /* @__PURE__ */ f(o, {
+								value: b.value,
+								onChange: b.onChange,
+								size: "small"
+							})
+						})]
+					})
+				})
+			})
+		]
+	}) : /* @__PURE__ */ p("div", {
+		className: `w-full ${x}`,
+		children: [/* @__PURE__ */ p("div", {
+			className: "flex w-full flex-wrap items-center gap-x-3 gap-y-2",
+			children: [m.filter((e) => !e.hidden).map((e) => /* @__PURE__ */ f("div", {
+				className: e.className ?? "w-44",
+				children: /* @__PURE__ */ f(l, {
+					field: e,
+					value: E[e.key] ?? "",
+					onChange: (t) => D(e.key, t),
+					onEnter: M,
+					size: C
+				})
+			}, e.key)), /* @__PURE__ */ p("div", {
+				className: "ml-auto flex items-center gap-3",
+				children: [b && /* @__PURE__ */ f(o, {
+					value: b.value,
+					onChange: b.onChange,
+					size: C
+				}), /* @__PURE__ */ p("div", {
+					className: "flex items-center gap-2",
+					children: [/* @__PURE__ */ f(e, {
+						variant: "tertiary",
+						appearance: "outlined",
+						size: C,
+						onClick: k,
+						leadingIcon: /* @__PURE__ */ f(n, { className: "h-3.5 w-3.5" }),
+						className: "h-10 border-border-tertiary! dark:border-border-secondary!",
+						children: "초기화"
+					}), /* @__PURE__ */ f(e, {
+						variant: "primary",
+						size: C,
+						onClick: M,
+						loading: y,
+						leadingIcon: /* @__PURE__ */ f(r, { className: "h-3.5 w-3.5" }),
+						className: "h-10",
+						children: "검색"
+					})]
+				})]
+			})]
+		}), A.length > 0 && /* @__PURE__ */ f("div", {
+			className: "mt-2",
+			children: /* @__PURE__ */ f(s, {
+				chips: A,
+				onRemove: j
+			})
+		})]
+	});
+}
+function h({ label: e, onClick: t, icon: n, variant: r, disabled: i, activeDot: a }) {
+	return /* @__PURE__ */ p("button", {
+		type: "button",
+		"aria-label": e,
+		onClick: t,
+		disabled: i,
+		className: `relative inline-flex h-9 w-9 items-center justify-center rounded-lg transition-colors disabled:opacity-50 ${r === "primary" ? "bg-primary-500 text-white hover:bg-primary-600" : "text-icon-secondary hover:bg-bg-base-secondary"}`,
+		children: [n, a && /* @__PURE__ */ f("span", { className: "absolute top-1.5 right-1.5 h-1.5 w-1.5 rounded-full bg-primary-500" })]
+	});
+}
+//#endregion
+export { m as SearchBox };

package/dist/components/search-box/SearchBoxChips.cjs.js

@@ -0,0 +1 @@
+const e=require("../../node_modules/lucide-react/dist/esm/icons/x.cjs.js"),t=require("../tooltip/Tooltip.cjs.js");let n=require("react/jsx-runtime");function r({chips:r,onRemove:i}){return r.length===0?null:(0,n.jsx)(`div`,{className:`flex flex-wrap items-center gap-1.5`,children:r.map(r=>(0,n.jsx)(t.Tooltip,{content:`${r.label} | ${r.valueLabel}`,position:`top`,children:(0,n.jsxs)(`button`,{type:`button`,onClick:()=>i(r.key),className:`inline-flex max-w-65 items-center gap-1.5 rounded-full border border-primary-200 bg-primary-50 px-2 py-0.5 text-xs text-primary-700 transition-colors hover:bg-primary-100 dark:border-primary-800 dark:bg-primary-900/30 dark:text-primary-300 dark:hover:bg-primary-900/50`,"aria-label":`${r.label} 필터 제거`,children:[(0,n.jsx)(`span`,{className:`shrink-0 text-text-tertiary`,children:r.label}),(0,n.jsx)(`span`,{className:`text-primary-300 dark:text-primary-700`,children:`|`}),(0,n.jsx)(`span`,{className:`truncate font-medium`,children:r.valueLabel}),(0,n.jsx)(e.X,{className:`h-3 w-3 shrink-0`})]})},r.key))})}exports.SearchBoxChips=r;

package/dist/components/search-box/SearchBoxChips.esm.js

@@ -0,0 +1,36 @@
+import { X as e } from "../../node_modules/lucide-react/dist/esm/icons/x.esm.js";
+import { Tooltip as t } from "../tooltip/Tooltip.esm.js";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+//#region src/components/search-box/SearchBoxChips.tsx
+function i({ chips: i, onRemove: a }) {
+	return i.length === 0 ? null : /* @__PURE__ */ n("div", {
+		className: "flex flex-wrap items-center gap-1.5",
+		children: i.map((i) => /* @__PURE__ */ n(t, {
+			content: `${i.label} | ${i.valueLabel}`,
+			position: "top",
+			children: /* @__PURE__ */ r("button", {
+				type: "button",
+				onClick: () => a(i.key),
+				className: "inline-flex max-w-65 items-center gap-1.5 rounded-full border border-primary-200 bg-primary-50 px-2 py-0.5 text-xs text-primary-700 transition-colors hover:bg-primary-100 dark:border-primary-800 dark:bg-primary-900/30 dark:text-primary-300 dark:hover:bg-primary-900/50",
+				"aria-label": `${i.label} 필터 제거`,
+				children: [
+					/* @__PURE__ */ n("span", {
+						className: "shrink-0 text-text-tertiary",
+						children: i.label
+					}),
+					/* @__PURE__ */ n("span", {
+						className: "text-primary-300 dark:text-primary-700",
+						children: "|"
+					}),
+					/* @__PURE__ */ n("span", {
+						className: "truncate font-medium",
+						children: i.valueLabel
+					}),
+					/* @__PURE__ */ n(e, { className: "h-3 w-3 shrink-0" })
+				]
+			})
+		}, i.key))
+	});
+}
+//#endregion
+export { i as SearchBoxChips };

package/dist/components/search-box/SearchBoxDateRange.cjs.js

@@ -0,0 +1 @@
+const e=require("../button/Button.cjs.js"),t=require("../date-input/DateInput.cjs.js"),n=require("./parseDateRange.cjs.js"),r=require("./SearchBoxSheetContext.cjs.js");let i=require("react"),a=require("react/jsx-runtime");function o({value:o,onChange:s,presets:c,size:l}){let{from:u,to:d}=n.parseDateRangeValue(o),f=(0,i.useContext)(r.SearchBoxSheetContext),p=(0,i.useMemo)(()=>c?.map(e=>({preset:e,range:e.range()}))??[],[c]),m=e=>{let t=e.range();s(n.serializeDateRangeValue(t.from,t.to))};return(0,a.jsxs)(`div`,{className:`flex flex-wrap items-center gap-x-3 gap-y-1.5`,children:[(0,a.jsxs)(`div`,{className:`flex items-center gap-1.5`,children:[(0,a.jsx)(t.DateInput,{value:u,onChange:e=>s(n.serializeDateRangeValue(e,d)),size:l,ariaLabel:`시작일`,disableMobileSheet:f}),(0,a.jsx)(`span`,{className:`text-neutral-400`,children:`~`}),(0,a.jsx)(t.DateInput,{value:d,onChange:e=>s(n.serializeDateRangeValue(u,e)),size:l,ariaLabel:`종료일`,disableMobileSheet:f})]}),p.length>0&&(0,a.jsx)(`div`,{className:`flex items-center gap-1`,children:p.map(({preset:t,range:n})=>{let r=u===n.from&&d===n.to;return(0,a.jsx)(e.Button,{variant:r?`primary`:`tertiary`,appearance:r?`filled`:`outlined`,size:l,onClick:()=>m(t),className:`whitespace-nowrap ${l===`small`?`h-10`:``} ${r?``:`border-border-tertiary! dark:border-border-secondary!`}`,children:t.label},t.label)})})]})}exports.SearchBoxDateRange=o;