@bridger-kr/react 0.1.0

package/dist/components/forms/Combobox.cjs

@@ -0,0 +1,217 @@
+'use strict';
+
+var react = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+
+// src/components/forms/Combobox.tsx
+function Combobox({
+  label,
+  hint,
+  options = [],
+  value,
+  onChange,
+  placeholder = "\uAC80\uC0C9\u2026",
+  emptyText = "\uACB0\uACFC \uC5C6\uC74C",
+  id,
+  style
+}) {
+  const [open, setOpen] = react.useState(false);
+  const [query, setQuery] = react.useState("");
+  const [active, setActive] = react.useState(0);
+  const rootRef = react.useRef(null);
+  const cbId = id || (label ? `cb-${label.replace(/\s+/g, "-")}` : void 0);
+  const selected = options.find((o) => o.value === value) || null;
+  react.useEffect(() => {
+    const onDoc = (e) => {
+      if (rootRef.current && !rootRef.current.contains(e.target)) setOpen(false);
+    };
+    document.addEventListener("mousedown", onDoc);
+    return () => document.removeEventListener("mousedown", onDoc);
+  }, []);
+  const q = query.trim().toLowerCase();
+  const filtered = q ? options.filter((o) => (o.label + " " + (o.meta || "")).toLowerCase().includes(q)) : options;
+  const commit = (o) => {
+    onChange?.(o.value);
+    setOpen(false);
+    setQuery("");
+  };
+  const onKey = (e) => {
+    if (e.key === "ArrowDown") {
+      e.preventDefault();
+      setOpen(true);
+      setActive((i) => Math.min(i + 1, filtered.length - 1));
+    } else if (e.key === "ArrowUp") {
+      e.preventDefault();
+      setActive((i) => Math.max(i - 1, 0));
+    } else if (e.key === "Enter" && open && filtered[active]) {
+      e.preventDefault();
+      commit(filtered[active]);
+    } else if (e.key === "Escape") {
+      setOpen(false);
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: rootRef, style: { display: "grid", gap: 7, position: "relative", ...style }, children: [
+    label ? /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: cbId, style: { fontSize: 13, fontWeight: 600, color: "var(--dt-muted-strong)" }, children: label }) : null,
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: "dt-field",
+        style: {
+          display: "flex",
+          alignItems: "center",
+          gap: 9,
+          height: 44,
+          padding: "0 12px",
+          boxShadow: open ? "var(--dt-shadow-focus)" : void 0,
+          background: open ? "var(--dt-surface)" : "var(--dt-surface-sunken)"
+        },
+        onClick: () => setOpen(true),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "svg",
+            {
+              width: "16",
+              height: "16",
+              viewBox: "0 0 24 24",
+              fill: "none",
+              "aria-hidden": "true",
+              style: { color: "var(--dt-muted)", flex: "0 0 auto" },
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "11", cy: "11", r: "7", stroke: "currentColor", strokeWidth: "2" }),
+                /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M21 21l-4-4", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "input",
+            {
+              id: cbId,
+              value: open ? query : selected ? selected.label : "",
+              placeholder: selected && !open ? selected.label : placeholder,
+              onChange: (e) => {
+                setQuery(e.target.value);
+                setOpen(true);
+                setActive(0);
+              },
+              onFocus: () => setOpen(true),
+              onKeyDown: onKey,
+              style: {
+                flex: 1,
+                minWidth: 0,
+                border: "none",
+                outline: "none",
+                background: "transparent",
+                fontSize: 14,
+                fontFamily: "inherit",
+                color: "var(--dt-ink-strong)"
+              }
+            }
+          ),
+          selected && !open ? /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontFamily: "var(--dt-font-mono)", fontSize: 11, color: "var(--dt-muted)" }, children: selected.meta }) : null
+        ]
+      }
+    ),
+    open ? /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        role: "listbox",
+        style: {
+          position: "absolute",
+          top: "calc(100% + 6px)",
+          left: 0,
+          right: 0,
+          zIndex: 20,
+          background: "var(--dt-surface)",
+          border: "1px solid var(--dt-border-strong)",
+          borderRadius: "var(--dt-radius-lg)",
+          boxShadow: "var(--dt-shadow-md)",
+          maxHeight: 240,
+          overflowY: "auto",
+          padding: 4
+        },
+        children: filtered.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { style: { padding: "12px 12px", fontSize: 13, color: "var(--dt-muted)" }, children: emptyText }) : filtered.map((o, i) => {
+          const isActive = i === active;
+          const isSel = o.value === value;
+          return /* @__PURE__ */ jsxRuntime.jsxs(
+            "div",
+            {
+              role: "option",
+              "aria-selected": isSel,
+              onMouseEnter: () => setActive(i),
+              onMouseDown: (e) => {
+                e.preventDefault();
+                commit(o);
+              },
+              style: {
+                display: "flex",
+                alignItems: "center",
+                gap: 10,
+                padding: "9px 10px",
+                borderRadius: "var(--dt-radius-md)",
+                cursor: "pointer",
+                background: isActive ? "var(--dt-surface-sunken)" : "transparent"
+              },
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "span",
+                  {
+                    style: {
+                      flex: 1,
+                      minWidth: 0,
+                      fontSize: 13.5,
+                      fontWeight: isSel ? 600 : 500,
+                      color: "var(--dt-ink-strong)",
+                      overflow: "hidden",
+                      textOverflow: "ellipsis",
+                      whiteSpace: "nowrap"
+                    },
+                    children: o.label
+                  }
+                ),
+                o.meta ? /* @__PURE__ */ jsxRuntime.jsx(
+                  "span",
+                  {
+                    style: {
+                      fontFamily: "var(--dt-font-mono)",
+                      fontSize: 11,
+                      color: "var(--dt-muted)",
+                      flex: "0 0 auto"
+                    },
+                    children: o.meta
+                  }
+                ) : null,
+                isSel ? /* @__PURE__ */ jsxRuntime.jsx(
+                  "svg",
+                  {
+                    width: "15",
+                    height: "15",
+                    viewBox: "0 0 24 24",
+                    fill: "none",
+                    "aria-hidden": "true",
+                    style: { color: "var(--dt-accent)", flex: "0 0 auto" },
+                    children: /* @__PURE__ */ jsxRuntime.jsx(
+                      "path",
+                      {
+                        d: "M20 6L9 17l-5-5",
+                        stroke: "currentColor",
+                        strokeWidth: "2.2",
+                        strokeLinecap: "round",
+                        strokeLinejoin: "round"
+                      }
+                    )
+                  }
+                ) : null
+              ]
+            },
+            o.value
+          );
+        })
+      }
+    ) : null,
+    hint ? /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontSize: 12, color: "var(--dt-muted)" }, children: hint }) : null
+  ] });
+}
+
+exports.Combobox = Combobox;
+//# sourceMappingURL=Combobox.cjs.map
+//# sourceMappingURL=Combobox.cjs.map

package/dist/components/forms/Combobox.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/forms/Combobox.tsx"],"names":["useState","useRef","useEffect","jsxs","jsx"],"mappings":"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","file":"Combobox.cjs","sourcesContent":["import { useEffect, useRef, useState } from 'react';\nimport type { CSSProperties, HTMLAttributes, KeyboardEvent, MouseEvent } from 'react';\n\nexport interface ComboboxOption {\n  value: string;\n  label: string;\n  meta?: string;\n}\n\nexport interface ComboboxProps extends Omit<HTMLAttributes<HTMLDivElement>, 'id' | 'onChange' | 'style'> {\n  label?: string;\n  hint?: string;\n  options?: ComboboxOption[];\n  value?: string;\n  onChange?: (value: string) => void;\n  placeholder?: string;\n  emptyText?: string;\n  id?: string;\n  style?: CSSProperties;\n}\n\n/**\n * Searchable select for large option sets (the 230+ public-data API catalog).\n * Hairline field; the listbox is a bordered plane. Filters on label + meta.\n * @startingPoint section=\"Forms\" subtitle=\"Searchable select over a large catalog\" viewport=\"460x320\"\n */\nexport function Combobox({\n  label,\n  hint,\n  options = [],\n  value,\n  onChange,\n  placeholder = '검색…',\n  emptyText = '결과 없음',\n  id,\n  style,\n}: ComboboxProps) {\n  const [open, setOpen] = useState(false);\n  const [query, setQuery] = useState('');\n  const [active, setActive] = useState(0);\n  const rootRef = useRef<HTMLDivElement>(null);\n  const cbId = id || (label ? `cb-${label.replace(/\\s+/g, '-')}` : undefined);\n\n  const selected = options.find((o) => o.value === value) || null;\n\n  useEffect(() => {\n    const onDoc = (e: globalThis.MouseEvent) => {\n      if (rootRef.current && !rootRef.current.contains(e.target as Node)) setOpen(false);\n    };\n    document.addEventListener('mousedown', onDoc);\n    return () => document.removeEventListener('mousedown', onDoc);\n  }, []);\n\n  const q = query.trim().toLowerCase();\n  const filtered = q\n    ? options.filter((o) => (o.label + ' ' + (o.meta || '')).toLowerCase().includes(q))\n    : options;\n\n  const commit = (o: ComboboxOption) => {\n    onChange?.(o.value);\n    setOpen(false);\n    setQuery('');\n  };\n\n  const onKey = (e: KeyboardEvent<HTMLInputElement>) => {\n    if (e.key === 'ArrowDown') {\n      e.preventDefault();\n      setOpen(true);\n      setActive((i) => Math.min(i + 1, filtered.length - 1));\n    } else if (e.key === 'ArrowUp') {\n      e.preventDefault();\n      setActive((i) => Math.max(i - 1, 0));\n    } else if (e.key === 'Enter' && open && filtered[active]) {\n      e.preventDefault();\n      commit(filtered[active]);\n    } else if (e.key === 'Escape') {\n      setOpen(false);\n    }\n  };\n\n  return (\n    <div ref={rootRef} style={{ display: 'grid', gap: 7, position: 'relative', ...style }}>\n      {label ? (\n        <label htmlFor={cbId} style={{ fontSize: 13, fontWeight: 600, color: 'var(--dt-muted-strong)' }}>\n          {label}\n        </label>\n      ) : null}\n      <div\n        className=\"dt-field\"\n        style={{\n          display: 'flex',\n          alignItems: 'center',\n          gap: 9,\n          height: 44,\n          padding: '0 12px',\n          boxShadow: open ? 'var(--dt-shadow-focus)' : undefined,\n          background: open ? 'var(--dt-surface)' : 'var(--dt-surface-sunken)',\n        }}\n        onClick={() => setOpen(true)}\n      >\n        <svg\n          width=\"16\"\n          height=\"16\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          aria-hidden=\"true\"\n          style={{ color: 'var(--dt-muted)', flex: '0 0 auto' }}\n        >\n          <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" strokeWidth=\"2\" />\n          <path d=\"M21 21l-4-4\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" />\n        </svg>\n        <input\n          id={cbId}\n          value={open ? query : selected ? selected.label : ''}\n          placeholder={selected && !open ? selected.label : placeholder}\n          onChange={(e) => {\n            setQuery(e.target.value);\n            setOpen(true);\n            setActive(0);\n          }}\n          onFocus={() => setOpen(true)}\n          onKeyDown={onKey}\n          style={{\n            flex: 1,\n            minWidth: 0,\n            border: 'none',\n            outline: 'none',\n            background: 'transparent',\n            fontSize: 14,\n            fontFamily: 'inherit',\n            color: 'var(--dt-ink-strong)',\n          }}\n        />\n        {selected && !open ? (\n          <span style={{ fontFamily: 'var(--dt-font-mono)', fontSize: 11, color: 'var(--dt-muted)' }}>\n            {selected.meta}\n          </span>\n        ) : null}\n      </div>\n\n      {open ? (\n        <div\n          role=\"listbox\"\n          style={{\n            position: 'absolute',\n            top: 'calc(100% + 6px)',\n            left: 0,\n            right: 0,\n            zIndex: 20,\n            background: 'var(--dt-surface)',\n            border: '1px solid var(--dt-border-strong)',\n            borderRadius: 'var(--dt-radius-lg)',\n            boxShadow: 'var(--dt-shadow-md)',\n            maxHeight: 240,\n            overflowY: 'auto',\n            padding: 4,\n          }}\n        >\n          {filtered.length === 0 ? (\n            <div style={{ padding: '12px 12px', fontSize: 13, color: 'var(--dt-muted)' }}>{emptyText}</div>\n          ) : (\n            filtered.map((o, i) => {\n              const isActive = i === active;\n              const isSel = o.value === value;\n              return (\n                <div\n                  key={o.value}\n                  role=\"option\"\n                  aria-selected={isSel}\n                  onMouseEnter={() => setActive(i)}\n                  onMouseDown={(e: MouseEvent<HTMLDivElement>) => {\n                    e.preventDefault();\n                    commit(o);\n                  }}\n                  style={{\n                    display: 'flex',\n                    alignItems: 'center',\n                    gap: 10,\n                    padding: '9px 10px',\n                    borderRadius: 'var(--dt-radius-md)',\n                    cursor: 'pointer',\n                    background: isActive ? 'var(--dt-surface-sunken)' : 'transparent',\n                  }}\n                >\n                  <span\n                    style={{\n                      flex: 1,\n                      minWidth: 0,\n                      fontSize: 13.5,\n                      fontWeight: isSel ? 600 : 500,\n                      color: 'var(--dt-ink-strong)',\n                      overflow: 'hidden',\n                      textOverflow: 'ellipsis',\n                      whiteSpace: 'nowrap',\n                    }}\n                  >\n                    {o.label}\n                  </span>\n                  {o.meta ? (\n                    <span\n                      style={{\n                        fontFamily: 'var(--dt-font-mono)',\n                        fontSize: 11,\n                        color: 'var(--dt-muted)',\n                        flex: '0 0 auto',\n                      }}\n                    >\n                      {o.meta}\n                    </span>\n                  ) : null}\n                  {isSel ? (\n                    <svg\n                      width=\"15\"\n                      height=\"15\"\n                      viewBox=\"0 0 24 24\"\n                      fill=\"none\"\n                      aria-hidden=\"true\"\n                      style={{ color: 'var(--dt-accent)', flex: '0 0 auto' }}\n                    >\n                      <path\n                        d=\"M20 6L9 17l-5-5\"\n                        stroke=\"currentColor\"\n                        strokeWidth=\"2.2\"\n                        strokeLinecap=\"round\"\n                        strokeLinejoin=\"round\"\n                      />\n                    </svg>\n                  ) : null}\n                </div>\n              );\n            })\n          )}\n        </div>\n      ) : null}\n      {hint ? <span style={{ fontSize: 12, color: 'var(--dt-muted)' }}>{hint}</span> : null}\n    </div>\n  );\n}\n"]}

package/dist/components/forms/Combobox.d.cts

@@ -0,0 +1,27 @@
+import * as react from 'react';
+import { HTMLAttributes, CSSProperties } from 'react';
+
+interface ComboboxOption {
+    value: string;
+    label: string;
+    meta?: string;
+}
+interface ComboboxProps extends Omit<HTMLAttributes<HTMLDivElement>, 'id' | 'onChange' | 'style'> {
+    label?: string;
+    hint?: string;
+    options?: ComboboxOption[];
+    value?: string;
+    onChange?: (value: string) => void;
+    placeholder?: string;
+    emptyText?: string;
+    id?: string;
+    style?: CSSProperties;
+}
+/**
+ * Searchable select for large option sets (the 230+ public-data API catalog).
+ * Hairline field; the listbox is a bordered plane. Filters on label + meta.
+ * @startingPoint section="Forms" subtitle="Searchable select over a large catalog" viewport="460x320"
+ */
+declare function Combobox({ label, hint, options, value, onChange, placeholder, emptyText, id, style, }: ComboboxProps): react.JSX.Element;
+
+export { Combobox, type ComboboxOption, type ComboboxProps };

package/dist/components/forms/Combobox.d.ts

@@ -0,0 +1,27 @@
+import * as react from 'react';
+import { HTMLAttributes, CSSProperties } from 'react';
+
+interface ComboboxOption {
+    value: string;
+    label: string;
+    meta?: string;
+}
+interface ComboboxProps extends Omit<HTMLAttributes<HTMLDivElement>, 'id' | 'onChange' | 'style'> {
+    label?: string;
+    hint?: string;
+    options?: ComboboxOption[];
+    value?: string;
+    onChange?: (value: string) => void;
+    placeholder?: string;
+    emptyText?: string;
+    id?: string;
+    style?: CSSProperties;
+}
+/**
+ * Searchable select for large option sets (the 230+ public-data API catalog).
+ * Hairline field; the listbox is a bordered plane. Filters on label + meta.
+ * @startingPoint section="Forms" subtitle="Searchable select over a large catalog" viewport="460x320"
+ */
+declare function Combobox({ label, hint, options, value, onChange, placeholder, emptyText, id, style, }: ComboboxProps): react.JSX.Element;
+
+export { Combobox, type ComboboxOption, type ComboboxProps };

package/dist/components/forms/Combobox.mjs

@@ -0,0 +1,215 @@
+import { useState, useRef, useEffect } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+// src/components/forms/Combobox.tsx
+function Combobox({
+  label,
+  hint,
+  options = [],
+  value,
+  onChange,
+  placeholder = "\uAC80\uC0C9\u2026",
+  emptyText = "\uACB0\uACFC \uC5C6\uC74C",
+  id,
+  style
+}) {
+  const [open, setOpen] = useState(false);
+  const [query, setQuery] = useState("");
+  const [active, setActive] = useState(0);
+  const rootRef = useRef(null);
+  const cbId = id || (label ? `cb-${label.replace(/\s+/g, "-")}` : void 0);
+  const selected = options.find((o) => o.value === value) || null;
+  useEffect(() => {
+    const onDoc = (e) => {
+      if (rootRef.current && !rootRef.current.contains(e.target)) setOpen(false);
+    };
+    document.addEventListener("mousedown", onDoc);
+    return () => document.removeEventListener("mousedown", onDoc);
+  }, []);
+  const q = query.trim().toLowerCase();
+  const filtered = q ? options.filter((o) => (o.label + " " + (o.meta || "")).toLowerCase().includes(q)) : options;
+  const commit = (o) => {
+    onChange?.(o.value);
+    setOpen(false);
+    setQuery("");
+  };
+  const onKey = (e) => {
+    if (e.key === "ArrowDown") {
+      e.preventDefault();
+      setOpen(true);
+      setActive((i) => Math.min(i + 1, filtered.length - 1));
+    } else if (e.key === "ArrowUp") {
+      e.preventDefault();
+      setActive((i) => Math.max(i - 1, 0));
+    } else if (e.key === "Enter" && open && filtered[active]) {
+      e.preventDefault();
+      commit(filtered[active]);
+    } else if (e.key === "Escape") {
+      setOpen(false);
+    }
+  };
+  return /* @__PURE__ */ jsxs("div", { ref: rootRef, style: { display: "grid", gap: 7, position: "relative", ...style }, children: [
+    label ? /* @__PURE__ */ jsx("label", { htmlFor: cbId, style: { fontSize: 13, fontWeight: 600, color: "var(--dt-muted-strong)" }, children: label }) : null,
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: "dt-field",
+        style: {
+          display: "flex",
+          alignItems: "center",
+          gap: 9,
+          height: 44,
+          padding: "0 12px",
+          boxShadow: open ? "var(--dt-shadow-focus)" : void 0,
+          background: open ? "var(--dt-surface)" : "var(--dt-surface-sunken)"
+        },
+        onClick: () => setOpen(true),
+        children: [
+          /* @__PURE__ */ jsxs(
+            "svg",
+            {
+              width: "16",
+              height: "16",
+              viewBox: "0 0 24 24",
+              fill: "none",
+              "aria-hidden": "true",
+              style: { color: "var(--dt-muted)", flex: "0 0 auto" },
+              children: [
+                /* @__PURE__ */ jsx("circle", { cx: "11", cy: "11", r: "7", stroke: "currentColor", strokeWidth: "2" }),
+                /* @__PURE__ */ jsx("path", { d: "M21 21l-4-4", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              id: cbId,
+              value: open ? query : selected ? selected.label : "",
+              placeholder: selected && !open ? selected.label : placeholder,
+              onChange: (e) => {
+                setQuery(e.target.value);
+                setOpen(true);
+                setActive(0);
+              },
+              onFocus: () => setOpen(true),
+              onKeyDown: onKey,
+              style: {
+                flex: 1,
+                minWidth: 0,
+                border: "none",
+                outline: "none",
+                background: "transparent",
+                fontSize: 14,
+                fontFamily: "inherit",
+                color: "var(--dt-ink-strong)"
+              }
+            }
+          ),
+          selected && !open ? /* @__PURE__ */ jsx("span", { style: { fontFamily: "var(--dt-font-mono)", fontSize: 11, color: "var(--dt-muted)" }, children: selected.meta }) : null
+        ]
+      }
+    ),
+    open ? /* @__PURE__ */ jsx(
+      "div",
+      {
+        role: "listbox",
+        style: {
+          position: "absolute",
+          top: "calc(100% + 6px)",
+          left: 0,
+          right: 0,
+          zIndex: 20,
+          background: "var(--dt-surface)",
+          border: "1px solid var(--dt-border-strong)",
+          borderRadius: "var(--dt-radius-lg)",
+          boxShadow: "var(--dt-shadow-md)",
+          maxHeight: 240,
+          overflowY: "auto",
+          padding: 4
+        },
+        children: filtered.length === 0 ? /* @__PURE__ */ jsx("div", { style: { padding: "12px 12px", fontSize: 13, color: "var(--dt-muted)" }, children: emptyText }) : filtered.map((o, i) => {
+          const isActive = i === active;
+          const isSel = o.value === value;
+          return /* @__PURE__ */ jsxs(
+            "div",
+            {
+              role: "option",
+              "aria-selected": isSel,
+              onMouseEnter: () => setActive(i),
+              onMouseDown: (e) => {
+                e.preventDefault();
+                commit(o);
+              },
+              style: {
+                display: "flex",
+                alignItems: "center",
+                gap: 10,
+                padding: "9px 10px",
+                borderRadius: "var(--dt-radius-md)",
+                cursor: "pointer",
+                background: isActive ? "var(--dt-surface-sunken)" : "transparent"
+              },
+              children: [
+                /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    style: {
+                      flex: 1,
+                      minWidth: 0,
+                      fontSize: 13.5,
+                      fontWeight: isSel ? 600 : 500,
+                      color: "var(--dt-ink-strong)",
+                      overflow: "hidden",
+                      textOverflow: "ellipsis",
+                      whiteSpace: "nowrap"
+                    },
+                    children: o.label
+                  }
+                ),
+                o.meta ? /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    style: {
+                      fontFamily: "var(--dt-font-mono)",
+                      fontSize: 11,
+                      color: "var(--dt-muted)",
+                      flex: "0 0 auto"
+                    },
+                    children: o.meta
+                  }
+                ) : null,
+                isSel ? /* @__PURE__ */ jsx(
+                  "svg",
+                  {
+                    width: "15",
+                    height: "15",
+                    viewBox: "0 0 24 24",
+                    fill: "none",
+                    "aria-hidden": "true",
+                    style: { color: "var(--dt-accent)", flex: "0 0 auto" },
+                    children: /* @__PURE__ */ jsx(
+                      "path",
+                      {
+                        d: "M20 6L9 17l-5-5",
+                        stroke: "currentColor",
+                        strokeWidth: "2.2",
+                        strokeLinecap: "round",
+                        strokeLinejoin: "round"
+                      }
+                    )
+                  }
+                ) : null
+              ]
+            },
+            o.value
+          );
+        })
+      }
+    ) : null,
+    hint ? /* @__PURE__ */ jsx("span", { style: { fontSize: 12, color: "var(--dt-muted)" }, children: hint }) : null
+  ] });
+}
+
+export { Combobox };
+//# sourceMappingURL=Combobox.mjs.map
+//# sourceMappingURL=Combobox.mjs.map

package/dist/components/forms/Combobox.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/forms/Combobox.tsx"],"names":[],"mappings":"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","file":"Combobox.mjs","sourcesContent":["import { useEffect, useRef, useState } from 'react';\nimport type { CSSProperties, HTMLAttributes, KeyboardEvent, MouseEvent } from 'react';\n\nexport interface ComboboxOption {\n  value: string;\n  label: string;\n  meta?: string;\n}\n\nexport interface ComboboxProps extends Omit<HTMLAttributes<HTMLDivElement>, 'id' | 'onChange' | 'style'> {\n  label?: string;\n  hint?: string;\n  options?: ComboboxOption[];\n  value?: string;\n  onChange?: (value: string) => void;\n  placeholder?: string;\n  emptyText?: string;\n  id?: string;\n  style?: CSSProperties;\n}\n\n/**\n * Searchable select for large option sets (the 230+ public-data API catalog).\n * Hairline field; the listbox is a bordered plane. Filters on label + meta.\n * @startingPoint section=\"Forms\" subtitle=\"Searchable select over a large catalog\" viewport=\"460x320\"\n */\nexport function Combobox({\n  label,\n  hint,\n  options = [],\n  value,\n  onChange,\n  placeholder = '검색…',\n  emptyText = '결과 없음',\n  id,\n  style,\n}: ComboboxProps) {\n  const [open, setOpen] = useState(false);\n  const [query, setQuery] = useState('');\n  const [active, setActive] = useState(0);\n  const rootRef = useRef<HTMLDivElement>(null);\n  const cbId = id || (label ? `cb-${label.replace(/\\s+/g, '-')}` : undefined);\n\n  const selected = options.find((o) => o.value === value) || null;\n\n  useEffect(() => {\n    const onDoc = (e: globalThis.MouseEvent) => {\n      if (rootRef.current && !rootRef.current.contains(e.target as Node)) setOpen(false);\n    };\n    document.addEventListener('mousedown', onDoc);\n    return () => document.removeEventListener('mousedown', onDoc);\n  }, []);\n\n  const q = query.trim().toLowerCase();\n  const filtered = q\n    ? options.filter((o) => (o.label + ' ' + (o.meta || '')).toLowerCase().includes(q))\n    : options;\n\n  const commit = (o: ComboboxOption) => {\n    onChange?.(o.value);\n    setOpen(false);\n    setQuery('');\n  };\n\n  const onKey = (e: KeyboardEvent<HTMLInputElement>) => {\n    if (e.key === 'ArrowDown') {\n      e.preventDefault();\n      setOpen(true);\n      setActive((i) => Math.min(i + 1, filtered.length - 1));\n    } else if (e.key === 'ArrowUp') {\n      e.preventDefault();\n      setActive((i) => Math.max(i - 1, 0));\n    } else if (e.key === 'Enter' && open && filtered[active]) {\n      e.preventDefault();\n      commit(filtered[active]);\n    } else if (e.key === 'Escape') {\n      setOpen(false);\n    }\n  };\n\n  return (\n    <div ref={rootRef} style={{ display: 'grid', gap: 7, position: 'relative', ...style }}>\n      {label ? (\n        <label htmlFor={cbId} style={{ fontSize: 13, fontWeight: 600, color: 'var(--dt-muted-strong)' }}>\n          {label}\n        </label>\n      ) : null}\n      <div\n        className=\"dt-field\"\n        style={{\n          display: 'flex',\n          alignItems: 'center',\n          gap: 9,\n          height: 44,\n          padding: '0 12px',\n          boxShadow: open ? 'var(--dt-shadow-focus)' : undefined,\n          background: open ? 'var(--dt-surface)' : 'var(--dt-surface-sunken)',\n        }}\n        onClick={() => setOpen(true)}\n      >\n        <svg\n          width=\"16\"\n          height=\"16\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          aria-hidden=\"true\"\n          style={{ color: 'var(--dt-muted)', flex: '0 0 auto' }}\n        >\n          <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" strokeWidth=\"2\" />\n          <path d=\"M21 21l-4-4\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" />\n        </svg>\n        <input\n          id={cbId}\n          value={open ? query : selected ? selected.label : ''}\n          placeholder={selected && !open ? selected.label : placeholder}\n          onChange={(e) => {\n            setQuery(e.target.value);\n            setOpen(true);\n            setActive(0);\n          }}\n          onFocus={() => setOpen(true)}\n          onKeyDown={onKey}\n          style={{\n            flex: 1,\n            minWidth: 0,\n            border: 'none',\n            outline: 'none',\n            background: 'transparent',\n            fontSize: 14,\n            fontFamily: 'inherit',\n            color: 'var(--dt-ink-strong)',\n          }}\n        />\n        {selected && !open ? (\n          <span style={{ fontFamily: 'var(--dt-font-mono)', fontSize: 11, color: 'var(--dt-muted)' }}>\n            {selected.meta}\n          </span>\n        ) : null}\n      </div>\n\n      {open ? (\n        <div\n          role=\"listbox\"\n          style={{\n            position: 'absolute',\n            top: 'calc(100% + 6px)',\n            left: 0,\n            right: 0,\n            zIndex: 20,\n            background: 'var(--dt-surface)',\n            border: '1px solid var(--dt-border-strong)',\n            borderRadius: 'var(--dt-radius-lg)',\n            boxShadow: 'var(--dt-shadow-md)',\n            maxHeight: 240,\n            overflowY: 'auto',\n            padding: 4,\n          }}\n        >\n          {filtered.length === 0 ? (\n            <div style={{ padding: '12px 12px', fontSize: 13, color: 'var(--dt-muted)' }}>{emptyText}</div>\n          ) : (\n            filtered.map((o, i) => {\n              const isActive = i === active;\n              const isSel = o.value === value;\n              return (\n                <div\n                  key={o.value}\n                  role=\"option\"\n                  aria-selected={isSel}\n                  onMouseEnter={() => setActive(i)}\n                  onMouseDown={(e: MouseEvent<HTMLDivElement>) => {\n                    e.preventDefault();\n                    commit(o);\n                  }}\n                  style={{\n                    display: 'flex',\n                    alignItems: 'center',\n                    gap: 10,\n                    padding: '9px 10px',\n                    borderRadius: 'var(--dt-radius-md)',\n                    cursor: 'pointer',\n                    background: isActive ? 'var(--dt-surface-sunken)' : 'transparent',\n                  }}\n                >\n                  <span\n                    style={{\n                      flex: 1,\n                      minWidth: 0,\n                      fontSize: 13.5,\n                      fontWeight: isSel ? 600 : 500,\n                      color: 'var(--dt-ink-strong)',\n                      overflow: 'hidden',\n                      textOverflow: 'ellipsis',\n                      whiteSpace: 'nowrap',\n                    }}\n                  >\n                    {o.label}\n                  </span>\n                  {o.meta ? (\n                    <span\n                      style={{\n                        fontFamily: 'var(--dt-font-mono)',\n                        fontSize: 11,\n                        color: 'var(--dt-muted)',\n                        flex: '0 0 auto',\n                      }}\n                    >\n                      {o.meta}\n                    </span>\n                  ) : null}\n                  {isSel ? (\n                    <svg\n                      width=\"15\"\n                      height=\"15\"\n                      viewBox=\"0 0 24 24\"\n                      fill=\"none\"\n                      aria-hidden=\"true\"\n                      style={{ color: 'var(--dt-accent)', flex: '0 0 auto' }}\n                    >\n                      <path\n                        d=\"M20 6L9 17l-5-5\"\n                        stroke=\"currentColor\"\n                        strokeWidth=\"2.2\"\n                        strokeLinecap=\"round\"\n                        strokeLinejoin=\"round\"\n                      />\n                    </svg>\n                  ) : null}\n                </div>\n              );\n            })\n          )}\n        </div>\n      ) : null}\n      {hint ? <span style={{ fontSize: 12, color: 'var(--dt-muted)' }}>{hint}</span> : null}\n    </div>\n  );\n}\n"]}