@bridger-kr/react 0.1.0

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

@@ -0,0 +1,15 @@
+import * as react from 'react';
+import { HTMLAttributes, ReactNode, CSSProperties } from 'react';
+
+interface BreadcrumbItem {
+    label: ReactNode;
+    href?: string;
+}
+interface BreadcrumbProps extends Omit<HTMLAttributes<HTMLElement>, 'children'> {
+    items?: BreadcrumbItem[];
+    style?: CSSProperties;
+}
+/** Breadcrumb trail — last item is the current page. */
+declare function Breadcrumb({ items, style, ...rest }: BreadcrumbProps): react.JSX.Element;
+
+export { Breadcrumb, type BreadcrumbItem, type BreadcrumbProps };

package/dist/components/navigation/Breadcrumb.mjs

@@ -0,0 +1,25 @@
+import { Fragment } from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+// src/components/navigation/Breadcrumb.tsx
+function Breadcrumb({ items = [], style, ...rest }) {
+  return /* @__PURE__ */ jsx(
+    "nav",
+    {
+      ...rest,
+      "aria-label": "breadcrumb",
+      style: { display: "flex", alignItems: "center", gap: 6, flexWrap: "wrap", ...style },
+      children: items.map((it, i) => {
+        const last = i === items.length - 1;
+        return /* @__PURE__ */ jsxs(Fragment, { children: [
+          last ? /* @__PURE__ */ jsx("span", { "aria-current": "page", style: { fontSize: 13, fontWeight: 600, color: "var(--dt-ink-strong)" }, children: it.label }) : /* @__PURE__ */ jsx("a", { href: it.href || "#", style: { fontSize: 13, fontWeight: 500, color: "var(--dt-muted)", textDecoration: "none" }, children: it.label }),
+          !last ? /* @__PURE__ */ jsx("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", style: { color: "var(--dt-border-strong)" }, "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M9 6l6 6-6 6", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }) : null
+        ] }, i);
+      })
+    }
+  );
+}
+
+export { Breadcrumb };
+//# sourceMappingURL=Breadcrumb.mjs.map
+//# sourceMappingURL=Breadcrumb.mjs.map

package/dist/components/navigation/Breadcrumb.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/navigation/Breadcrumb.tsx"],"names":[],"mappings":";;;;AAcO,SAAS,UAAA,CAAW,EAAE,KAAA,GAAQ,IAAI,KAAA,EAAO,GAAG,MAAK,EAAoB;AAC1E,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACE,GAAG,IAAA;AAAA,MACJ,YAAA,EAAW,YAAA;AAAA,MACX,KAAA,EAAO,EAAE,OAAA,EAAS,MAAA,EAAQ,UAAA,EAAY,QAAA,EAAU,GAAA,EAAK,CAAA,EAAG,QAAA,EAAU,MAAA,EAAQ,GAAG,KAAA,EAAM;AAAA,MAElF,QAAA,EAAA,KAAA,CAAM,GAAA,CAAI,CAAC,EAAA,EAAI,CAAA,KAAM;AACpB,QAAA,MAAM,IAAA,GAAO,CAAA,KAAM,KAAA,CAAM,MAAA,GAAS,CAAA;AAClC,QAAA,4BACG,QAAA,EAAA,EACE,QAAA,EAAA;AAAA,UAAA,IAAA,mBACG,GAAA,CAAC,MAAA,EAAA,EAAK,cAAA,EAAa,MAAA,EAAO,OAAO,EAAE,QAAA,EAAU,EAAA,EAAI,UAAA,EAAY,KAAK,KAAA,EAAO,sBAAA,EAAuB,EAAI,QAAA,EAAA,EAAA,CAAG,OAAM,CAAA,mBAC7G,GAAA,CAAC,GAAA,EAAA,EAAE,IAAA,EAAM,EAAA,CAAG,IAAA,IAAQ,GAAA,EAAK,KAAA,EAAO,EAAE,QAAA,EAAU,EAAA,EAAI,UAAA,EAAY,GAAA,EAAK,OAAO,iBAAA,EAAmB,cAAA,EAAgB,MAAA,EAAO,EAAI,aAAG,KAAA,EAAM,CAAA;AAAA,UAClI,CAAC,IAAA,mBACA,GAAA,CAAC,KAAA,EAAA,EAAI,OAAM,IAAA,EAAK,MAAA,EAAO,IAAA,EAAK,OAAA,EAAQ,WAAA,EAAY,IAAA,EAAK,MAAA,EAAO,KAAA,EAAO,EAAE,KAAA,EAAO,yBAAA,EAA0B,EAAG,aAAA,EAAY,MAAA,EACnH,QAAA,kBAAA,GAAA,CAAC,MAAA,EAAA,EAAK,CAAA,EAAE,gBAAe,MAAA,EAAO,cAAA,EAAe,WAAA,EAAY,GAAA,EAAI,aAAA,EAAc,OAAA,EAAQ,cAAA,EAAe,OAAA,EAAQ,GAC5G,CAAA,GACE;AAAA,SAAA,EAAA,EARS,CASf,CAAA;AAAA,MAEJ,CAAC;AAAA;AAAA,GACH;AAEJ","file":"Breadcrumb.mjs","sourcesContent":["import { Fragment } from 'react';\nimport type { CSSProperties, HTMLAttributes, ReactNode } from 'react';\n\nexport interface BreadcrumbItem {\n  label: ReactNode;\n  href?: string;\n}\n\nexport interface BreadcrumbProps extends Omit<HTMLAttributes<HTMLElement>, 'children'> {\n  items?: BreadcrumbItem[];\n  style?: CSSProperties;\n}\n\n/** Breadcrumb trail — last item is the current page. */\nexport function Breadcrumb({ items = [], style, ...rest }: BreadcrumbProps) {\n  return (\n    <nav\n      {...rest}\n      aria-label=\"breadcrumb\"\n      style={{ display: 'flex', alignItems: 'center', gap: 6, flexWrap: 'wrap', ...style }}\n    >\n      {items.map((it, i) => {\n        const last = i === items.length - 1;\n        return (\n          <Fragment key={i}>\n            {last\n              ? <span aria-current=\"page\" style={{ fontSize: 13, fontWeight: 600, color: 'var(--dt-ink-strong)' }}>{it.label}</span>\n              : <a href={it.href || '#'} style={{ fontSize: 13, fontWeight: 500, color: 'var(--dt-muted)', textDecoration: 'none' }}>{it.label}</a>}\n            {!last ? (\n              <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" style={{ color: 'var(--dt-border-strong)' }} aria-hidden=\"true\">\n                <path d=\"M9 6l6 6-6 6\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n              </svg>\n            ) : null}\n          </Fragment>\n        );\n      })}\n    </nav>\n  );\n}\n"]}

package/dist/components/navigation/CommandPalette.cjs

@@ -0,0 +1,136 @@
+'use strict';
+
+var react = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+
+// src/components/navigation/CommandPalette.tsx
+function CommandPalette({ open = true, query = "", onQueryChange, groups = [], footerHint = "\u2191\u2193 \uC774\uB3D9 \xB7 \u21B5 \uC2E4\uD589 \xB7 esc \uB2EB\uAE30", onSelect, style, ...rest }) {
+  const [activeIndex, setActiveIndex] = react.useState([0, 0]);
+  const [isOpen, setIsOpen] = react.useState(open);
+  react.useEffect(() => {
+    setIsOpen(open);
+  }, [open]);
+  if (!isOpen) return null;
+  const handleKeyDown = (_e) => {
+    if (_e.key === "ArrowDown") {
+      _e.preventDefault();
+      setActiveIndex((prev) => {
+        const [groupIdx, itemIdx] = prev;
+        const group = groups[groupIdx];
+        if (!group) return prev;
+        if (itemIdx < group.items.length - 1) return [groupIdx, itemIdx + 1];
+        const nextGroupIdx = (groupIdx + 1) % groups.length;
+        const nextGroup = groups[nextGroupIdx];
+        if (nextGroup && nextGroup.items.length > 0) return [nextGroupIdx, 0];
+        return prev;
+      });
+    } else if (_e.key === "ArrowUp") {
+      _e.preventDefault();
+      setActiveIndex((prev) => {
+        const [groupIdx, itemIdx] = prev;
+        if (itemIdx > 0) return [groupIdx, itemIdx - 1];
+        const prevGroupIdx = (groupIdx - 1 + groups.length) % groups.length;
+        const prevGroup = groups[prevGroupIdx];
+        if (prevGroup && prevGroup.items.length > 0) return [prevGroupIdx, prevGroup.items.length - 1];
+        return prev;
+      });
+    } else if (_e.key === "Enter") {
+      _e.preventDefault();
+      const [gi, ii] = activeIndex;
+      const group = groups[gi];
+      if (group && group.items[ii]) onSelect?.(group.items[ii]);
+    } else if (_e.key === "Escape") {
+      _e.preventDefault();
+      setIsOpen(false);
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      ...rest,
+      role: "listbox",
+      onKeyDown: handleKeyDown,
+      style: {
+        width: 520,
+        maxWidth: "100%",
+        background: "var(--dt-surface)",
+        border: "1px solid var(--dt-border-strong)",
+        borderRadius: "var(--dt-radius-xl)",
+        boxShadow: "var(--dt-shadow-xl)",
+        overflow: "hidden",
+        fontFamily: "var(--dt-font-sans)",
+        ...style
+      },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "center", gap: 11, padding: "14px 16px", borderBottom: "1px solid var(--dt-border)" }, children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "18", height: "18", 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",
+            {
+              autoFocus: true,
+              value: query,
+              onChange: (e) => onQueryChange?.(e.target.value),
+              placeholder: "\uB3C4\uAD6C \xB7 \uC561\uC158 \uAC80\uC0C9\u2026",
+              style: { flex: 1, border: "none", outline: "none", background: "transparent", fontSize: 15, fontFamily: "inherit", color: "var(--dt-ink-strong)" }
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx("kbd", { style: {
+            fontFamily: "var(--dt-font-mono)",
+            fontSize: 11,
+            fontWeight: 600,
+            color: "var(--dt-muted)",
+            border: "1px solid var(--dt-border-strong)",
+            borderRadius: "var(--dt-radius-sm)",
+            padding: "2px 7px"
+          }, children: "\u2318K" })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { style: { maxHeight: 320, overflowY: "auto", padding: 6 }, children: groups.map((g, gi) => /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { marginBottom: 4 }, children: [
+          g.heading ? /* @__PURE__ */ jsxRuntime.jsx("div", { style: { fontFamily: "var(--dt-font-mono)", fontSize: 10, letterSpacing: ".1em", textTransform: "uppercase", color: "var(--dt-muted)", padding: "8px 10px 5px" }, children: g.heading }) : null,
+          g.items.map((it, ii) => {
+            const isActive = activeIndex[0] === gi && activeIndex[1] === ii;
+            return /* @__PURE__ */ jsxRuntime.jsxs(
+              "button",
+              {
+                type: "button",
+                role: "option",
+                "aria-selected": isActive,
+                onMouseDown: (e) => {
+                  e.preventDefault();
+                  onSelect?.(it);
+                },
+                style: {
+                  display: "flex",
+                  alignItems: "center",
+                  gap: 11,
+                  padding: "9px 10px",
+                  borderRadius: "var(--dt-radius-md)",
+                  cursor: "pointer",
+                  background: isActive ? "var(--dt-tint-accent)" : "transparent",
+                  border: "none",
+                  outline: "none"
+                },
+                children: [
+                  it.icon ? /* @__PURE__ */ jsxRuntime.jsx("span", { style: { display: "inline-flex", flex: "0 0 auto", color: isActive ? "var(--dt-accent)" : "var(--dt-muted)" }, "aria-hidden": "true", children: it.icon }) : null,
+                  /* @__PURE__ */ jsxRuntime.jsxs("span", { style: { flex: 1, minWidth: 0, fontSize: 13.5, fontWeight: isActive ? 600 : 500, color: isActive ? "var(--dt-accent)" : "var(--dt-ink-strong)", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: [
+                    it.label,
+                    it.meta ? /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontFamily: "var(--dt-font-mono)", fontSize: 11, color: "var(--dt-muted)", fontWeight: 400, marginLeft: 8 }, children: it.meta }) : null
+                  ] }),
+                  it.shortcut ? /* @__PURE__ */ jsxRuntime.jsx("kbd", { style: { fontFamily: "var(--dt-font-mono)", fontSize: 11, color: "var(--dt-muted-strong)", border: "1px solid var(--dt-border-strong)", borderRadius: "var(--dt-radius-sm)", padding: "1px 6px" }, children: it.shortcut }) : null
+                ]
+              },
+              ii
+            );
+          })
+        ] }, gi)) }),
+        footerHint ? /* @__PURE__ */ jsxRuntime.jsx("div", { style: { borderTop: "1px solid var(--dt-border)", padding: "8px 14px", fontFamily: "var(--dt-font-mono)", fontSize: 11, color: "var(--dt-muted)" }, children: footerHint }) : null
+      ]
+    }
+  );
+}
+
+exports.CommandPalette = CommandPalette;
+//# sourceMappingURL=CommandPalette.cjs.map
+//# sourceMappingURL=CommandPalette.cjs.map

package/dist/components/navigation/CommandPalette.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/navigation/CommandPalette.tsx"],"names":["useState","useEffect","jsxs","jsx"],"mappings":"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","file":"CommandPalette.cjs","sourcesContent":["import type { ChangeEvent, CSSProperties, HTMLAttributes, KeyboardEvent, MouseEvent as ReactMouseEvent, ReactNode } from 'react';\nimport { useState, useEffect } from 'react';\n\nexport interface CommandItem {\n  label: string;\n  icon?: ReactNode;\n  meta?: string;\n  shortcut?: string;\n  active?: boolean;\n}\n\nexport interface CommandGroup {\n  heading?: string;\n  items: CommandItem[];\n}\n\nexport interface CommandPaletteProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'onSelect'> {\n  open?: boolean;\n  query?: string;\n  onQueryChange?: (q: string) => void;\n  groups?: CommandGroup[];\n  footerHint?: string;\n  onSelect?: (item: CommandItem) => void;\n  style?: CSSProperties;\n}\n\nexport function CommandPalette({ open = true, query = '', onQueryChange, groups = [], footerHint = '↑↓ 이동 · ↵ 실행 · esc 닫기', onSelect, style, ...rest }: CommandPaletteProps) {\n  const [activeIndex, setActiveIndex] = useState([0, 0]);\n  const [isOpen, setIsOpen] = useState(open);\n\n  useEffect(() => {\n    setIsOpen(open);\n  }, [open]);\n\n  if (!isOpen) return null;\n\n  const handleKeyDown = (_e: KeyboardEvent) => {\n    if (_e.key === 'ArrowDown') {\n      _e.preventDefault();\n      setActiveIndex((prev) => {\n        const [groupIdx, itemIdx] = prev;\n        const group = groups[groupIdx];\n        if (!group) return prev;\n        if (itemIdx < group.items.length - 1) return [groupIdx, itemIdx + 1];\n        const nextGroupIdx = (groupIdx + 1) % groups.length;\n        const nextGroup = groups[nextGroupIdx];\n        if (nextGroup && nextGroup.items.length > 0) return [nextGroupIdx, 0];\n        return prev;\n      });\n    } else if (_e.key === 'ArrowUp') {\n      _e.preventDefault();\n      setActiveIndex((prev) => {\n        const [groupIdx, itemIdx] = prev;\n        if (itemIdx > 0) return [groupIdx, itemIdx - 1];\n        const prevGroupIdx = (groupIdx - 1 + groups.length) % groups.length;\n        const prevGroup = groups[prevGroupIdx];\n        if (prevGroup && prevGroup.items.length > 0) return [prevGroupIdx, prevGroup.items.length - 1];\n        return prev;\n      });\n    } else if (_e.key === 'Enter') {\n      _e.preventDefault();\n      const [gi, ii] = activeIndex;\n      const group = groups[gi];\n      if (group && group.items[ii]) onSelect?.(group.items[ii]);\n    } else if (_e.key === 'Escape') {\n      _e.preventDefault();\n      setIsOpen(false);\n    }\n  };\n\n  return (\n    <div\n      {...rest}\n      role=\"listbox\"\n      onKeyDown={handleKeyDown}\n      style={{\n        width: 520, maxWidth: '100%', background: 'var(--dt-surface)',\n        border: '1px solid var(--dt-border-strong)', borderRadius: 'var(--dt-radius-xl)',\n        boxShadow: 'var(--dt-shadow-xl)', overflow: 'hidden', fontFamily: 'var(--dt-font-sans)', ...style,\n      }}\n    >\n      {/* search */}\n      <div style={{ display: 'flex', alignItems: 'center', gap: 11, padding: '14px 16px', borderBottom: '1px solid var(--dt-border)' }}>\n        <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\" style={{ color: 'var(--dt-muted)', flex: '0 0 auto' }}>\n          <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" strokeWidth=\"2\" /><path d=\"M21 21l-4-4\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" />\n        </svg>\n        <input\n          autoFocus value={query} onChange={(e: ChangeEvent<HTMLInputElement>) => onQueryChange?.(e.target.value)}\n          placeholder=\"도구 · 액션 검색…\"\n          style={{ flex: 1, border: 'none', outline: 'none', background: 'transparent', fontSize: 15, fontFamily: 'inherit', color: 'var(--dt-ink-strong)' }}\n        />\n        <kbd style={{\n          fontFamily: 'var(--dt-font-mono)', fontSize: 11, fontWeight: 600, color: 'var(--dt-muted)',\n          border: '1px solid var(--dt-border-strong)', borderRadius: 'var(--dt-radius-sm)', padding: '2px 7px',\n        }}>⌘K</kbd>\n      </div>\n\n      {/* results */}\n      <div style={{ maxHeight: 320, overflowY: 'auto', padding: 6 }}>\n        {groups.map((g, gi) => (\n          <div key={gi} style={{ marginBottom: 4 }}>\n            {g.heading ? (\n              <div style={{ fontFamily: 'var(--dt-font-mono)', fontSize: 10, letterSpacing: '.1em', textTransform: 'uppercase', color: 'var(--dt-muted)', padding: '8px 10px 5px' }}>{g.heading}</div>\n            ) : null}\n            {g.items.map((it, ii) => {\n              const isActive = activeIndex[0] === gi && activeIndex[1] === ii;\n              return (\n                <button\n                  key={ii}\n                  type=\"button\"\n                  role=\"option\"\n                  aria-selected={isActive}\n                  onMouseDown={(e: ReactMouseEvent<HTMLButtonElement>) => { e.preventDefault(); onSelect?.(it); }}\n                  style={{\n                    display: 'flex', alignItems: 'center', gap: 11, padding: '9px 10px',\n                    borderRadius: 'var(--dt-radius-md)', cursor: 'pointer',\n                    background: isActive ? 'var(--dt-tint-accent)' : 'transparent',\n                    border: 'none', outline: 'none',\n                  }}\n                >\n                  {it.icon ? <span style={{ display: 'inline-flex', flex: '0 0 auto', color: isActive ? 'var(--dt-accent)' : 'var(--dt-muted)' }} aria-hidden=\"true\">{it.icon}</span> : null}\n                  <span style={{ flex: 1, minWidth: 0, fontSize: 13.5, fontWeight: isActive ? 600 : 500, color: isActive ? 'var(--dt-accent)' : 'var(--dt-ink-strong)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>\n                    {it.label}\n                    {it.meta ? <span style={{ fontFamily: 'var(--dt-font-mono)', fontSize: 11, color: 'var(--dt-muted)', fontWeight: 400, marginLeft: 8 }}>{it.meta}</span> : null}\n                  </span>\n                  {it.shortcut ? (\n                    <kbd style={{ fontFamily: 'var(--dt-font-mono)', fontSize: 11, color: 'var(--dt-muted-strong)', border: '1px solid var(--dt-border-strong)', borderRadius: 'var(--dt-radius-sm)', padding: '1px 6px' }}>{it.shortcut}</kbd>\n                  ) : null}\n                </button>\n              );\n            })}\n          </div>\n        ))}\n      </div>\n\n      {footerHint ? (\n        <div style={{ borderTop: '1px solid var(--dt-border)', padding: '8px 14px', fontFamily: 'var(--dt-font-mono)', fontSize: 11, color: 'var(--dt-muted)' }}>{footerHint}</div>\n      ) : null}\n    </div>\n  );\n}\n"]}

package/dist/components/navigation/CommandPalette.d.cts

@@ -0,0 +1,26 @@
+import * as react from 'react';
+import { ReactNode, HTMLAttributes, CSSProperties } from 'react';
+
+interface CommandItem {
+    label: string;
+    icon?: ReactNode;
+    meta?: string;
+    shortcut?: string;
+    active?: boolean;
+}
+interface CommandGroup {
+    heading?: string;
+    items: CommandItem[];
+}
+interface CommandPaletteProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'onSelect'> {
+    open?: boolean;
+    query?: string;
+    onQueryChange?: (q: string) => void;
+    groups?: CommandGroup[];
+    footerHint?: string;
+    onSelect?: (item: CommandItem) => void;
+    style?: CSSProperties;
+}
+declare function CommandPalette({ open, query, onQueryChange, groups, footerHint, onSelect, style, ...rest }: CommandPaletteProps): react.JSX.Element | null;
+
+export { type CommandGroup, type CommandItem, CommandPalette, type CommandPaletteProps };

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

@@ -0,0 +1,26 @@
+import * as react from 'react';
+import { ReactNode, HTMLAttributes, CSSProperties } from 'react';
+
+interface CommandItem {
+    label: string;
+    icon?: ReactNode;
+    meta?: string;
+    shortcut?: string;
+    active?: boolean;
+}
+interface CommandGroup {
+    heading?: string;
+    items: CommandItem[];
+}
+interface CommandPaletteProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'onSelect'> {
+    open?: boolean;
+    query?: string;
+    onQueryChange?: (q: string) => void;
+    groups?: CommandGroup[];
+    footerHint?: string;
+    onSelect?: (item: CommandItem) => void;
+    style?: CSSProperties;
+}
+declare function CommandPalette({ open, query, onQueryChange, groups, footerHint, onSelect, style, ...rest }: CommandPaletteProps): react.JSX.Element | null;
+
+export { type CommandGroup, type CommandItem, CommandPalette, type CommandPaletteProps };

package/dist/components/navigation/CommandPalette.mjs

@@ -0,0 +1,134 @@
+import { useState, useEffect } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+// src/components/navigation/CommandPalette.tsx
+function CommandPalette({ open = true, query = "", onQueryChange, groups = [], footerHint = "\u2191\u2193 \uC774\uB3D9 \xB7 \u21B5 \uC2E4\uD589 \xB7 esc \uB2EB\uAE30", onSelect, style, ...rest }) {
+  const [activeIndex, setActiveIndex] = useState([0, 0]);
+  const [isOpen, setIsOpen] = useState(open);
+  useEffect(() => {
+    setIsOpen(open);
+  }, [open]);
+  if (!isOpen) return null;
+  const handleKeyDown = (_e) => {
+    if (_e.key === "ArrowDown") {
+      _e.preventDefault();
+      setActiveIndex((prev) => {
+        const [groupIdx, itemIdx] = prev;
+        const group = groups[groupIdx];
+        if (!group) return prev;
+        if (itemIdx < group.items.length - 1) return [groupIdx, itemIdx + 1];
+        const nextGroupIdx = (groupIdx + 1) % groups.length;
+        const nextGroup = groups[nextGroupIdx];
+        if (nextGroup && nextGroup.items.length > 0) return [nextGroupIdx, 0];
+        return prev;
+      });
+    } else if (_e.key === "ArrowUp") {
+      _e.preventDefault();
+      setActiveIndex((prev) => {
+        const [groupIdx, itemIdx] = prev;
+        if (itemIdx > 0) return [groupIdx, itemIdx - 1];
+        const prevGroupIdx = (groupIdx - 1 + groups.length) % groups.length;
+        const prevGroup = groups[prevGroupIdx];
+        if (prevGroup && prevGroup.items.length > 0) return [prevGroupIdx, prevGroup.items.length - 1];
+        return prev;
+      });
+    } else if (_e.key === "Enter") {
+      _e.preventDefault();
+      const [gi, ii] = activeIndex;
+      const group = groups[gi];
+      if (group && group.items[ii]) onSelect?.(group.items[ii]);
+    } else if (_e.key === "Escape") {
+      _e.preventDefault();
+      setIsOpen(false);
+    }
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ...rest,
+      role: "listbox",
+      onKeyDown: handleKeyDown,
+      style: {
+        width: 520,
+        maxWidth: "100%",
+        background: "var(--dt-surface)",
+        border: "1px solid var(--dt-border-strong)",
+        borderRadius: "var(--dt-radius-xl)",
+        boxShadow: "var(--dt-shadow-xl)",
+        overflow: "hidden",
+        fontFamily: "var(--dt-font-sans)",
+        ...style
+      },
+      children: [
+        /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 11, padding: "14px 16px", borderBottom: "1px solid var(--dt-border)" }, children: [
+          /* @__PURE__ */ jsxs("svg", { width: "18", height: "18", 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",
+            {
+              autoFocus: true,
+              value: query,
+              onChange: (e) => onQueryChange?.(e.target.value),
+              placeholder: "\uB3C4\uAD6C \xB7 \uC561\uC158 \uAC80\uC0C9\u2026",
+              style: { flex: 1, border: "none", outline: "none", background: "transparent", fontSize: 15, fontFamily: "inherit", color: "var(--dt-ink-strong)" }
+            }
+          ),
+          /* @__PURE__ */ jsx("kbd", { style: {
+            fontFamily: "var(--dt-font-mono)",
+            fontSize: 11,
+            fontWeight: 600,
+            color: "var(--dt-muted)",
+            border: "1px solid var(--dt-border-strong)",
+            borderRadius: "var(--dt-radius-sm)",
+            padding: "2px 7px"
+          }, children: "\u2318K" })
+        ] }),
+        /* @__PURE__ */ jsx("div", { style: { maxHeight: 320, overflowY: "auto", padding: 6 }, children: groups.map((g, gi) => /* @__PURE__ */ jsxs("div", { style: { marginBottom: 4 }, children: [
+          g.heading ? /* @__PURE__ */ jsx("div", { style: { fontFamily: "var(--dt-font-mono)", fontSize: 10, letterSpacing: ".1em", textTransform: "uppercase", color: "var(--dt-muted)", padding: "8px 10px 5px" }, children: g.heading }) : null,
+          g.items.map((it, ii) => {
+            const isActive = activeIndex[0] === gi && activeIndex[1] === ii;
+            return /* @__PURE__ */ jsxs(
+              "button",
+              {
+                type: "button",
+                role: "option",
+                "aria-selected": isActive,
+                onMouseDown: (e) => {
+                  e.preventDefault();
+                  onSelect?.(it);
+                },
+                style: {
+                  display: "flex",
+                  alignItems: "center",
+                  gap: 11,
+                  padding: "9px 10px",
+                  borderRadius: "var(--dt-radius-md)",
+                  cursor: "pointer",
+                  background: isActive ? "var(--dt-tint-accent)" : "transparent",
+                  border: "none",
+                  outline: "none"
+                },
+                children: [
+                  it.icon ? /* @__PURE__ */ jsx("span", { style: { display: "inline-flex", flex: "0 0 auto", color: isActive ? "var(--dt-accent)" : "var(--dt-muted)" }, "aria-hidden": "true", children: it.icon }) : null,
+                  /* @__PURE__ */ jsxs("span", { style: { flex: 1, minWidth: 0, fontSize: 13.5, fontWeight: isActive ? 600 : 500, color: isActive ? "var(--dt-accent)" : "var(--dt-ink-strong)", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: [
+                    it.label,
+                    it.meta ? /* @__PURE__ */ jsx("span", { style: { fontFamily: "var(--dt-font-mono)", fontSize: 11, color: "var(--dt-muted)", fontWeight: 400, marginLeft: 8 }, children: it.meta }) : null
+                  ] }),
+                  it.shortcut ? /* @__PURE__ */ jsx("kbd", { style: { fontFamily: "var(--dt-font-mono)", fontSize: 11, color: "var(--dt-muted-strong)", border: "1px solid var(--dt-border-strong)", borderRadius: "var(--dt-radius-sm)", padding: "1px 6px" }, children: it.shortcut }) : null
+                ]
+              },
+              ii
+            );
+          })
+        ] }, gi)) }),
+        footerHint ? /* @__PURE__ */ jsx("div", { style: { borderTop: "1px solid var(--dt-border)", padding: "8px 14px", fontFamily: "var(--dt-font-mono)", fontSize: 11, color: "var(--dt-muted)" }, children: footerHint }) : null
+      ]
+    }
+  );
+}
+
+export { CommandPalette };
+//# sourceMappingURL=CommandPalette.mjs.map
+//# sourceMappingURL=CommandPalette.mjs.map

package/dist/components/navigation/CommandPalette.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/navigation/CommandPalette.tsx"],"names":[],"mappings":"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","file":"CommandPalette.mjs","sourcesContent":["import type { ChangeEvent, CSSProperties, HTMLAttributes, KeyboardEvent, MouseEvent as ReactMouseEvent, ReactNode } from 'react';\nimport { useState, useEffect } from 'react';\n\nexport interface CommandItem {\n  label: string;\n  icon?: ReactNode;\n  meta?: string;\n  shortcut?: string;\n  active?: boolean;\n}\n\nexport interface CommandGroup {\n  heading?: string;\n  items: CommandItem[];\n}\n\nexport interface CommandPaletteProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'onSelect'> {\n  open?: boolean;\n  query?: string;\n  onQueryChange?: (q: string) => void;\n  groups?: CommandGroup[];\n  footerHint?: string;\n  onSelect?: (item: CommandItem) => void;\n  style?: CSSProperties;\n}\n\nexport function CommandPalette({ open = true, query = '', onQueryChange, groups = [], footerHint = '↑↓ 이동 · ↵ 실행 · esc 닫기', onSelect, style, ...rest }: CommandPaletteProps) {\n  const [activeIndex, setActiveIndex] = useState([0, 0]);\n  const [isOpen, setIsOpen] = useState(open);\n\n  useEffect(() => {\n    setIsOpen(open);\n  }, [open]);\n\n  if (!isOpen) return null;\n\n  const handleKeyDown = (_e: KeyboardEvent) => {\n    if (_e.key === 'ArrowDown') {\n      _e.preventDefault();\n      setActiveIndex((prev) => {\n        const [groupIdx, itemIdx] = prev;\n        const group = groups[groupIdx];\n        if (!group) return prev;\n        if (itemIdx < group.items.length - 1) return [groupIdx, itemIdx + 1];\n        const nextGroupIdx = (groupIdx + 1) % groups.length;\n        const nextGroup = groups[nextGroupIdx];\n        if (nextGroup && nextGroup.items.length > 0) return [nextGroupIdx, 0];\n        return prev;\n      });\n    } else if (_e.key === 'ArrowUp') {\n      _e.preventDefault();\n      setActiveIndex((prev) => {\n        const [groupIdx, itemIdx] = prev;\n        if (itemIdx > 0) return [groupIdx, itemIdx - 1];\n        const prevGroupIdx = (groupIdx - 1 + groups.length) % groups.length;\n        const prevGroup = groups[prevGroupIdx];\n        if (prevGroup && prevGroup.items.length > 0) return [prevGroupIdx, prevGroup.items.length - 1];\n        return prev;\n      });\n    } else if (_e.key === 'Enter') {\n      _e.preventDefault();\n      const [gi, ii] = activeIndex;\n      const group = groups[gi];\n      if (group && group.items[ii]) onSelect?.(group.items[ii]);\n    } else if (_e.key === 'Escape') {\n      _e.preventDefault();\n      setIsOpen(false);\n    }\n  };\n\n  return (\n    <div\n      {...rest}\n      role=\"listbox\"\n      onKeyDown={handleKeyDown}\n      style={{\n        width: 520, maxWidth: '100%', background: 'var(--dt-surface)',\n        border: '1px solid var(--dt-border-strong)', borderRadius: 'var(--dt-radius-xl)',\n        boxShadow: 'var(--dt-shadow-xl)', overflow: 'hidden', fontFamily: 'var(--dt-font-sans)', ...style,\n      }}\n    >\n      {/* search */}\n      <div style={{ display: 'flex', alignItems: 'center', gap: 11, padding: '14px 16px', borderBottom: '1px solid var(--dt-border)' }}>\n        <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\" style={{ color: 'var(--dt-muted)', flex: '0 0 auto' }}>\n          <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" strokeWidth=\"2\" /><path d=\"M21 21l-4-4\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" />\n        </svg>\n        <input\n          autoFocus value={query} onChange={(e: ChangeEvent<HTMLInputElement>) => onQueryChange?.(e.target.value)}\n          placeholder=\"도구 · 액션 검색…\"\n          style={{ flex: 1, border: 'none', outline: 'none', background: 'transparent', fontSize: 15, fontFamily: 'inherit', color: 'var(--dt-ink-strong)' }}\n        />\n        <kbd style={{\n          fontFamily: 'var(--dt-font-mono)', fontSize: 11, fontWeight: 600, color: 'var(--dt-muted)',\n          border: '1px solid var(--dt-border-strong)', borderRadius: 'var(--dt-radius-sm)', padding: '2px 7px',\n        }}>⌘K</kbd>\n      </div>\n\n      {/* results */}\n      <div style={{ maxHeight: 320, overflowY: 'auto', padding: 6 }}>\n        {groups.map((g, gi) => (\n          <div key={gi} style={{ marginBottom: 4 }}>\n            {g.heading ? (\n              <div style={{ fontFamily: 'var(--dt-font-mono)', fontSize: 10, letterSpacing: '.1em', textTransform: 'uppercase', color: 'var(--dt-muted)', padding: '8px 10px 5px' }}>{g.heading}</div>\n            ) : null}\n            {g.items.map((it, ii) => {\n              const isActive = activeIndex[0] === gi && activeIndex[1] === ii;\n              return (\n                <button\n                  key={ii}\n                  type=\"button\"\n                  role=\"option\"\n                  aria-selected={isActive}\n                  onMouseDown={(e: ReactMouseEvent<HTMLButtonElement>) => { e.preventDefault(); onSelect?.(it); }}\n                  style={{\n                    display: 'flex', alignItems: 'center', gap: 11, padding: '9px 10px',\n                    borderRadius: 'var(--dt-radius-md)', cursor: 'pointer',\n                    background: isActive ? 'var(--dt-tint-accent)' : 'transparent',\n                    border: 'none', outline: 'none',\n                  }}\n                >\n                  {it.icon ? <span style={{ display: 'inline-flex', flex: '0 0 auto', color: isActive ? 'var(--dt-accent)' : 'var(--dt-muted)' }} aria-hidden=\"true\">{it.icon}</span> : null}\n                  <span style={{ flex: 1, minWidth: 0, fontSize: 13.5, fontWeight: isActive ? 600 : 500, color: isActive ? 'var(--dt-accent)' : 'var(--dt-ink-strong)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>\n                    {it.label}\n                    {it.meta ? <span style={{ fontFamily: 'var(--dt-font-mono)', fontSize: 11, color: 'var(--dt-muted)', fontWeight: 400, marginLeft: 8 }}>{it.meta}</span> : null}\n                  </span>\n                  {it.shortcut ? (\n                    <kbd style={{ fontFamily: 'var(--dt-font-mono)', fontSize: 11, color: 'var(--dt-muted-strong)', border: '1px solid var(--dt-border-strong)', borderRadius: 'var(--dt-radius-sm)', padding: '1px 6px' }}>{it.shortcut}</kbd>\n                  ) : null}\n                </button>\n              );\n            })}\n          </div>\n        ))}\n      </div>\n\n      {footerHint ? (\n        <div style={{ borderTop: '1px solid var(--dt-border)', padding: '8px 14px', fontFamily: 'var(--dt-font-mono)', fontSize: 11, color: 'var(--dt-muted)' }}>{footerHint}</div>\n      ) : null}\n    </div>\n  );\n}\n"]}

package/dist/components/navigation/Menu.cjs

@@ -0,0 +1,104 @@
+'use strict';
+
+var react = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+
+// src/components/navigation/Menu.tsx
+function Menu({ trigger, items = [], align = "left", width = 200, style, ...rest }) {
+  const [open, setOpen] = react.useState(false);
+  const ref = react.useRef(null);
+  react.useEffect(() => {
+    if (!open) return void 0;
+    const onDoc = (e) => {
+      if (ref.current && !ref.current.contains(e.target)) setOpen(false);
+    };
+    window.addEventListener("mousedown", onDoc);
+    return () => window.removeEventListener("mousedown", onDoc);
+  }, [open]);
+  const handleTriggerKeyDown = (e) => {
+    if (e.key === "Enter" || e.key === " ") {
+      e.preventDefault();
+      setOpen((v) => !v);
+    } else if (e.key === "ArrowDown") {
+      e.preventDefault();
+      const firstItem = ref.current?.querySelector('button[role="menuitem"]');
+      firstItem?.focus();
+    }
+  };
+  const handleItemClick = (item) => {
+    if (item.onClick) {
+      item.onClick();
+      setOpen(false);
+    }
+  };
+  const handleTriggerClick = () => {
+    setOpen((v) => !v);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs("span", { ...rest, ref, style: { position: "relative", display: "inline-flex", ...style }, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        type: "button",
+        onClick: handleTriggerClick,
+        onKeyDown: handleTriggerKeyDown,
+        "aria-expanded": open,
+        "aria-haspopup": "menu",
+        style: { display: "inline-flex", cursor: "pointer", border: "none", background: "transparent", padding: 0, fontSize: "inherit", fontFamily: "inherit" },
+        children: trigger
+      }
+    ),
+    open ? /* @__PURE__ */ jsxRuntime.jsxs("div", { role: "menu", "aria-orientation": "vertical", style: {
+      position: "absolute",
+      top: "100%",
+      [align]: 0,
+      marginTop: 6,
+      zIndex: 80,
+      width,
+      padding: 5,
+      background: "var(--dt-surface)",
+      borderRadius: "var(--dt-radius-md)",
+      boxShadow: "var(--dt-shadow-lg)",
+      animation: "dt-menu 130ms var(--dt-ease)"
+    }, children: [
+      items.map((it, i) => it.divider ? /* @__PURE__ */ jsxRuntime.jsx("div", { style: { height: 1, background: "var(--dt-border)", margin: "5px 0" } }, `d${i}`) : /* @__PURE__ */ jsxRuntime.jsxs(
+        "button",
+        {
+          role: "menuitem",
+          onClick: () => handleItemClick(it),
+          style: {
+            display: "flex",
+            alignItems: "center",
+            gap: 9,
+            width: "100%",
+            textAlign: "left",
+            padding: "8px 10px",
+            border: "none",
+            borderRadius: "var(--dt-radius-sm)",
+            cursor: "pointer",
+            background: "transparent",
+            fontSize: 13.5,
+            fontWeight: 500,
+            fontFamily: "inherit",
+            color: it.danger ? "var(--dt-danger)" : "var(--dt-ink)"
+          },
+          onMouseEnter: (e) => {
+            e.currentTarget.style.background = it.danger ? "var(--dt-tint-danger)" : "var(--dt-surface-sunken)";
+          },
+          onMouseLeave: (e) => {
+            e.currentTarget.style.background = "transparent";
+          },
+          children: [
+            it.icon ? /* @__PURE__ */ jsxRuntime.jsx("span", { style: { display: "inline-flex", color: it.danger ? "var(--dt-danger)" : "var(--dt-muted-strong)" }, children: it.icon }) : null,
+            it.label
+          ]
+        },
+        i
+      )),
+      /* @__PURE__ */ jsxRuntime.jsx("style", { children: `@keyframes dt-menu{from{opacity:0;transform:translateY(-4px)}}` })
+    ] }) : null
+  ] });
+}
+
+exports.Menu = Menu;
+//# sourceMappingURL=Menu.cjs.map
+//# sourceMappingURL=Menu.cjs.map

package/dist/components/navigation/Menu.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/navigation/Menu.tsx"],"names":["useState","useRef","useEffect","jsxs","jsx"],"mappings":"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","file":"Menu.cjs","sourcesContent":["import { useEffect, useRef, useState } from 'react';\nimport type { CSSProperties, HTMLAttributes, KeyboardEvent, MouseEvent as ReactMouseEvent, ReactNode } from 'react';\n\nexport interface MenuItem {\n  label?: ReactNode;\n  icon?: ReactNode;\n  onClick?: () => void;\n  danger?: boolean;\n  divider?: boolean;\n}\n\nexport interface MenuProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'children'> {\n  trigger: ReactNode;\n  items?: MenuItem[];\n  align?: 'left' | 'right';\n  width?: number;\n  style?: CSSProperties;\n}\n\nexport function Menu({ trigger, items = [], align = 'left', width = 200, style, ...rest }: MenuProps) {\n  const [open, setOpen] = useState(false);\n  const ref = useRef<HTMLSpanElement>(null);\n\n  useEffect(() => {\n    if (!open) return undefined;\n    const onDoc = (e: MouseEvent) => { if (ref.current && !ref.current.contains(e.target as Node)) setOpen(false); };\n    window.addEventListener('mousedown', onDoc);\n    return () => window.removeEventListener('mousedown', onDoc);\n  }, [open]);\n\n  const handleTriggerKeyDown = (e: KeyboardEvent) => {\n    if (e.key === 'Enter' || e.key === ' ') {\n      e.preventDefault();\n      setOpen((v) => !v);\n    } else if (e.key === 'ArrowDown') {\n      e.preventDefault();\n      const firstItem = ref.current?.querySelector('button[role=\"menuitem\"]') as HTMLButtonElement | null;\n      firstItem?.focus();\n    }\n  };\n\n  const handleItemClick = (item: MenuItem) => {\n    if (item.onClick) {\n      item.onClick();\n      setOpen(false);\n    }\n  };\n\n  const handleTriggerClick = () => {\n    setOpen((v) => !v);\n  };\n\n  return (\n    <span {...rest} ref={ref} style={{ position: 'relative', display: 'inline-flex', ...style }}>\n      <button\n        type=\"button\"\n        onClick={handleTriggerClick}\n        onKeyDown={handleTriggerKeyDown}\n        aria-expanded={open}\n        aria-haspopup=\"menu\"\n        style={{ display: 'inline-flex', cursor: 'pointer', border: 'none', background: 'transparent', padding: 0, fontSize: 'inherit', fontFamily: 'inherit' }}\n      >\n        {trigger}\n      </button>\n      {open ? (\n        <div role=\"menu\" aria-orientation=\"vertical\" style={{\n          position: 'absolute', top: '100%', [align]: 0, marginTop: 6, zIndex: 80, width,\n          padding: 5, background: 'var(--dt-surface)', borderRadius: 'var(--dt-radius-md)',\n          boxShadow: 'var(--dt-shadow-lg)', animation: 'dt-menu 130ms var(--dt-ease)',\n        }}>\n          {items.map((it, i) => it.divider\n            ? <div key={`d${i}`} style={{ height: 1, background: 'var(--dt-border)', margin: '5px 0' }} />\n            : (\n              <button\n                key={i}\n                role=\"menuitem\"\n                onClick={() => handleItemClick(it)}\n                style={{\n                  display: 'flex', alignItems: 'center', gap: 9, width: '100%', textAlign: 'left',\n                  padding: '8px 10px', border: 'none', borderRadius: 'var(--dt-radius-sm)', cursor: 'pointer',\n                  background: 'transparent', fontSize: 13.5, fontWeight: 500, fontFamily: 'inherit',\n                  color: it.danger ? 'var(--dt-danger)' : 'var(--dt-ink)',\n                }}\n                onMouseEnter={(e: ReactMouseEvent<HTMLButtonElement>) => { e.currentTarget.style.background = it.danger ? 'var(--dt-tint-danger)' : 'var(--dt-surface-sunken)'; }}\n                onMouseLeave={(e: ReactMouseEvent<HTMLButtonElement>) => { e.currentTarget.style.background = 'transparent'; }}>\n                {it.icon ? <span style={{ display: 'inline-flex', color: it.danger ? 'var(--dt-danger)' : 'var(--dt-muted-strong)' }}>{it.icon}</span> : null}\n                {it.label}\n              </button>\n            ))}\n          <style>{`@keyframes dt-menu{from{opacity:0;transform:translateY(-4px)}}`}</style>\n        </div>\n      ) : null}\n    </span>\n  );\n}\n"]}

package/dist/components/navigation/Menu.d.cts

@@ -0,0 +1,20 @@
+import * as react from 'react';
+import { HTMLAttributes, ReactNode, CSSProperties } from 'react';
+
+interface MenuItem {
+    label?: ReactNode;
+    icon?: ReactNode;
+    onClick?: () => void;
+    danger?: boolean;
+    divider?: boolean;
+}
+interface MenuProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'children'> {
+    trigger: ReactNode;
+    items?: MenuItem[];
+    align?: 'left' | 'right';
+    width?: number;
+    style?: CSSProperties;
+}
+declare function Menu({ trigger, items, align, width, style, ...rest }: MenuProps): react.JSX.Element;
+
+export { Menu, type MenuItem, type MenuProps };

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

@@ -0,0 +1,20 @@
+import * as react from 'react';
+import { HTMLAttributes, ReactNode, CSSProperties } from 'react';
+
+interface MenuItem {
+    label?: ReactNode;
+    icon?: ReactNode;
+    onClick?: () => void;
+    danger?: boolean;
+    divider?: boolean;
+}
+interface MenuProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'children'> {
+    trigger: ReactNode;
+    items?: MenuItem[];
+    align?: 'left' | 'right';
+    width?: number;
+    style?: CSSProperties;
+}
+declare function Menu({ trigger, items, align, width, style, ...rest }: MenuProps): react.JSX.Element;
+
+export { Menu, type MenuItem, type MenuProps };