@simplysm/solid 13.0.0-beta.6

package/dist/components/layout/sidebar/SidebarUser.js

@@ -0,0 +1,51 @@
+import { createSignal, For, Show, splitProps } from "solid-js";
+import clsx from "clsx";
+import { twMerge } from "tailwind-merge";
+import { ripple } from "../../../directives/ripple";
+import { Collapse } from "../../disclosure/Collapse";
+import { List } from "../../data/list/List";
+import { ListItem } from "../../data/list/ListItem";
+void ripple;
+const containerClass = clsx("m-2 flex flex-col overflow-hidden rounded bg-white dark:bg-base-800");
+const headerClass = clsx(
+  "flex",
+  "items-center",
+  "p-2",
+  "text-left",
+  "cursor-pointer",
+  "transition-colors",
+  "hover:bg-base-100",
+  "dark:hover:bg-base-700"
+);
+const headerReadonlyClass = clsx("cursor-default hover:bg-transparent dark:hover:bg-transparent");
+const SidebarUser = (props) => {
+  const [local, rest] = splitProps(props, ["children", "class", "menus"]);
+  const [open, setOpen] = createSignal(false);
+  const hasMenus = () => local.menus !== void 0 && local.menus.length > 0;
+  const handleClick = () => {
+    if (hasMenus()) {
+      setOpen((v) => !v);
+    }
+  };
+  const handleMenuClick = (menu) => {
+    setOpen(false);
+    menu.onClick();
+  };
+  const getHeaderClassName = () => twMerge(headerClass, !hasMenus() && headerReadonlyClass, open() && "border-b border-b-base-50");
+  const getContainerClassName = () => twMerge(containerClass, local.class);
+  return /* @__PURE__ */ React.createElement("div", { ...rest, "data-sidebar-user": true, class: getContainerClassName() }, /* @__PURE__ */ React.createElement(
+    "button",
+    {
+      type: "button",
+      "use:ripple": hasMenus(),
+      class: getHeaderClassName(),
+      onClick: handleClick,
+      "aria-expanded": hasMenus() ? open() : void 0
+    },
+    local.children
+  ), /* @__PURE__ */ React.createElement(Show, { when: hasMenus() }, /* @__PURE__ */ React.createElement(Collapse, { open: open() }, /* @__PURE__ */ React.createElement(List, { inset: true }, /* @__PURE__ */ React.createElement(For, { each: local.menus }, (menu) => /* @__PURE__ */ React.createElement(ListItem, { onClick: () => handleMenuClick(menu) }, menu.title))))));
+};
+export {
+  SidebarUser
+};
+//# sourceMappingURL=SidebarUser.js.map

package/dist/components/layout/sidebar/SidebarUser.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/components/layout/sidebar/SidebarUser.tsx"],
+  "sourcesContent": ["import { createSignal, For, type JSX, type ParentComponent, Show, splitProps } from \"solid-js\";\nimport clsx from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\nimport { ripple } from \"../../../directives/ripple\";\nimport { Collapse } from \"../../disclosure/Collapse\";\nimport { List } from \"../../data/list/List\";\nimport { ListItem } from \"../../data/list/ListItem\";\n\nvoid ripple;\n\nconst containerClass = clsx(\"m-2 flex flex-col overflow-hidden rounded bg-white dark:bg-base-800\");\n\nconst headerClass = clsx(\n  \"flex\",\n  \"items-center\",\n  \"p-2\",\n  \"text-left\",\n  \"cursor-pointer\",\n  \"transition-colors\",\n  \"hover:bg-base-100\",\n  \"dark:hover:bg-base-700\",\n);\n\nconst headerReadonlyClass = clsx(\"cursor-default hover:bg-transparent dark:hover:bg-transparent\");\n\nexport interface SidebarUserMenu {\n  title: string;\n  onClick: () => void;\n}\n\nexport interface SidebarUserProps extends Omit<JSX.HTMLAttributes<HTMLDivElement>, \"onClick\"> {\n  /**\n   * \uB4DC\uB86D\uB2E4\uC6B4 \uBA54\uB274 (\uC788\uC744 \uB54C\uB9CC \uD074\uB9AD \uAC00\uB2A5)\n   */\n  menus?: SidebarUserMenu[];\n\n  /**\n   * \uC0AC\uC6A9\uC790 \uC815\uBCF4 \uC601\uC5ED (\uCEE4\uC2A4\uD130\uB9C8\uC774\uC9D5)\n   */\n  children: JSX.Element;\n}\n\n/**\n * \uC0AC\uC774\uB4DC\uBC14 \uC0AC\uC6A9\uC790 \uC815\uBCF4 \uCEF4\uD3EC\uB10C\uD2B8\n *\n * @remarks\n * - children\uC73C\uB85C \uC0AC\uC6A9\uC790 \uC815\uBCF4 \uC601\uC5ED \uCEE4\uC2A4\uD130\uB9C8\uC774\uC9D5\n * - menus\uAC00 \uC788\uC744 \uB54C\uB9CC \uD074\uB9AD \uAC00\uB2A5 \uBC0F ripple \uD6A8\uACFC \uC801\uC6A9\n * - \uD074\uB9AD \uC2DC \uB4DC\uB86D\uB2E4\uC6B4 \uBA54\uB274 \uD3BC\uCE68/\uC811\uD798\n *\n * @example\n * ```tsx\n * <SidebarUser menus={[\n *   { title: \"\uD504\uB85C\uD544\", onClick: () => navigate(\"/profile\") },\n *   { title: \"\uB85C\uADF8\uC544\uC6C3\", onClick: handleLogout },\n * ]}>\n *   <Avatar src={user.avatar} />\n *   <span>{user.name}</span>\n * </SidebarUser>\n * ```\n */\nexport const SidebarUser: ParentComponent<SidebarUserProps> = (props) => {\n  const [local, rest] = splitProps(props, [\"children\", \"class\", \"menus\"]);\n\n  const [open, setOpen] = createSignal(false);\n\n  const hasMenus = () => local.menus !== undefined && local.menus.length > 0;\n\n  const handleClick = () => {\n    if (hasMenus()) {\n      setOpen((v) => !v);\n    }\n  };\n\n  const handleMenuClick = (menu: SidebarUserMenu) => {\n    setOpen(false);\n    menu.onClick();\n  };\n\n  const getHeaderClassName = () =>\n    twMerge(headerClass, !hasMenus() && headerReadonlyClass, open() && \"border-b border-b-base-50\");\n\n  const getContainerClassName = () => twMerge(containerClass, local.class);\n\n  return (\n    <div {...rest} data-sidebar-user class={getContainerClassName()}>\n      <button\n        type=\"button\"\n        use:ripple={hasMenus()}\n        class={getHeaderClassName()}\n        onClick={handleClick}\n        aria-expanded={hasMenus() ? open() : undefined}\n      >\n        {local.children}\n      </button>\n      <Show when={hasMenus()}>\n        <Collapse open={open()}>\n          <List inset>\n            <For each={local.menus}>\n              {(menu) => <ListItem onClick={() => handleMenuClick(menu)}>{menu.title}</ListItem>}\n            </For>\n          </List>\n        </Collapse>\n      </Show>\n    </div>\n  );\n};\n"],
+  "mappings": "AAAA,SAAS,cAAc,KAAqC,MAAM,kBAAkB;AACpF,OAAO,UAAU;AACjB,SAAS,eAAe;AACxB,SAAS,cAAc;AACvB,SAAS,gBAAgB;AACzB,SAAS,YAAY;AACrB,SAAS,gBAAgB;AAEzB,KAAK;AAEL,MAAM,iBAAiB,KAAK,qEAAqE;AAEjG,MAAM,cAAc;AAAA,EAClB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;AAEA,MAAM,sBAAsB,KAAK,+DAA+D;AAsCzF,MAAM,cAAiD,CAAC,UAAU;AACvE,QAAM,CAAC,OAAO,IAAI,IAAI,WAAW,OAAO,CAAC,YAAY,SAAS,OAAO,CAAC;AAEtE,QAAM,CAAC,MAAM,OAAO,IAAI,aAAa,KAAK;AAE1C,QAAM,WAAW,MAAM,MAAM,UAAU,UAAa,MAAM,MAAM,SAAS;AAEzE,QAAM,cAAc,MAAM;AACxB,QAAI,SAAS,GAAG;AACd,cAAQ,CAAC,MAAM,CAAC,CAAC;AAAA,IACnB;AAAA,EACF;AAEA,QAAM,kBAAkB,CAAC,SAA0B;AACjD,YAAQ,KAAK;AACb,SAAK,QAAQ;AAAA,EACf;AAEA,QAAM,qBAAqB,MACzB,QAAQ,aAAa,CAAC,SAAS,KAAK,qBAAqB,KAAK,KAAK,2BAA2B;AAEhG,QAAM,wBAAwB,MAAM,QAAQ,gBAAgB,MAAM,KAAK;AAEvE,SACE,oCAAC,SAAK,GAAG,MAAM,qBAAiB,MAAC,OAAO,sBAAsB,KAC5D;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,cAAY,SAAS;AAAA,MACrB,OAAO,mBAAmB;AAAA,MAC1B,SAAS;AAAA,MACT,iBAAe,SAAS,IAAI,KAAK,IAAI;AAAA;AAAA,IAEpC,MAAM;AAAA,EACT,GACA,oCAAC,QAAK,MAAM,SAAS,KACnB,oCAAC,YAAS,MAAM,KAAK,KACnB,oCAAC,QAAK,OAAK,QACT,oCAAC,OAAI,MAAM,MAAM,SACd,CAAC,SAAS,oCAAC,YAAS,SAAS,MAAM,gBAAgB,IAAI,KAAI,KAAK,KAAM,CACzE,CACF,CACF,CACF,CACF;AAEJ;",
+  "names": []
+}

package/dist/components/layout/topbar/Topbar.js

@@ -0,0 +1,48 @@
+import { splitProps, Show } from "solid-js";
+import { IconMenu2 } from "@tabler/icons-solidjs";
+import clsx from "clsx";
+import { Icon } from "../../display/Icon";
+import { twMerge } from "tailwind-merge";
+import { Button } from "../../form-control/Button";
+import { useSidebarContextOptional } from "../sidebar/SidebarContext";
+import { TopbarContainer } from "./TopbarContainer";
+import { TopbarMenu } from "./TopbarMenu";
+import { TopbarUser } from "./TopbarUser";
+const baseClass = clsx(
+  // 레이아웃
+  "flex",
+  "flex-row",
+  "gap-2",
+  "items-center",
+  // 크기
+  "min-h-12",
+  "px-2",
+  // 배경/테두리
+  "bg-white",
+  "dark:bg-base-950",
+  "border-b",
+  "border-base-200",
+  "dark:border-base-700",
+  // 스크롤
+  "overflow-x-auto",
+  "overflow-y-hidden",
+  // 기타
+  "select-none"
+);
+const TopbarBase = (props) => {
+  const [local, rest] = splitProps(props, ["children", "class"]);
+  const sidebarContext = useSidebarContextOptional();
+  const handleToggle = () => {
+    sidebarContext == null ? void 0 : sidebarContext.setToggle((v) => !v);
+  };
+  const getClassName = () => twMerge(baseClass, local.class);
+  return /* @__PURE__ */ React.createElement("header", { ...rest, "data-topbar": true, class: getClassName() }, /* @__PURE__ */ React.createElement(Show, { when: sidebarContext }, /* @__PURE__ */ React.createElement(Button, { variant: "ghost", onClick: handleToggle, class: "p-2", "aria-label": "\uC0AC\uC774\uB4DC\uBC14 \uD1A0\uAE00" }, /* @__PURE__ */ React.createElement(Icon, { icon: IconMenu2, size: "1.5em" }))), local.children);
+};
+const Topbar = TopbarBase;
+Topbar.Container = TopbarContainer;
+Topbar.Menu = TopbarMenu;
+Topbar.User = TopbarUser;
+export {
+  Topbar
+};
+//# sourceMappingURL=Topbar.js.map

package/dist/components/layout/topbar/Topbar.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/components/layout/topbar/Topbar.tsx"],
+  "sourcesContent": ["import { type JSX, type ParentComponent, splitProps, Show } from \"solid-js\";\nimport { IconMenu2 } from \"@tabler/icons-solidjs\";\nimport clsx from \"clsx\";\nimport { Icon } from \"../../display/Icon\";\nimport { twMerge } from \"tailwind-merge\";\nimport { Button } from \"../../form-control/Button\";\nimport { useSidebarContextOptional } from \"../sidebar/SidebarContext\";\nimport { TopbarContainer } from \"./TopbarContainer\";\nimport { TopbarMenu } from \"./TopbarMenu\";\nimport { TopbarUser } from \"./TopbarUser\";\n\nexport type { TopbarContainerProps } from \"./TopbarContainer\";\nexport type { TopbarMenuItem, TopbarMenuProps } from \"./TopbarMenu\";\nexport type { TopbarUserMenu, TopbarUserProps } from \"./TopbarUser\";\n\nconst baseClass = clsx(\n  // \uB808\uC774\uC544\uC6C3\n  \"flex\",\n  \"flex-row\",\n  \"gap-2\",\n  \"items-center\",\n  // \uD06C\uAE30\n  \"min-h-12\",\n  \"px-2\",\n  // \uBC30\uACBD/\uD14C\uB450\uB9AC\n  \"bg-white\",\n  \"dark:bg-base-950\",\n  \"border-b\",\n  \"border-base-200\",\n  \"dark:border-base-700\",\n  // \uC2A4\uD06C\uB864\n  \"overflow-x-auto\",\n  \"overflow-y-hidden\",\n  // \uAE30\uD0C0\n  \"select-none\",\n);\n\nexport interface TopbarProps extends JSX.HTMLAttributes<HTMLElement> {\n  children: JSX.Element;\n}\n\n/**\n * \uC0C1\uB2E8\uBC14 \uBCF8\uCCB4 \uCEF4\uD3EC\uB10C\uD2B8\n *\n * @remarks\n * - SidebarContext\uAC00 \uC788\uC744 \uACBD\uC6B0 \uC0AC\uC774\uB4DC\uBC14 \uD1A0\uAE00 \uBC84\uD2BC \uC790\uB3D9 \uD45C\uC2DC\n * - SidebarContainer \uB0B4\uBD80\uC5D0\uC11C \uC0AC\uC6A9\uD558\uBA74 \uD1A0\uAE00 \uBC84\uD2BC\uC774 \uB098\uD0C0\uB0A8\n * - \uB2E8\uB3C5 \uC0AC\uC6A9 \uC2DC \uD1A0\uAE00 \uBC84\uD2BC \uC5C6\uC774 \uC21C\uC218 Topbar\uB85C \uB3D9\uC791\n *\n * @example\n * ```tsx\n * <Topbar>\n *   <h1 class=\"text-lg font-bold\">\uC571 \uC774\uB984</h1>\n *   <Topbar.Menu menus={menuItems} />\n *   <div class=\"flex-1\" />\n *   <Topbar.User menus={userMenus}>\uC0AC\uC6A9\uC790</Topbar.User>\n * </Topbar>\n * ```\n */\ninterface TopbarComponent extends ParentComponent<TopbarProps> {\n  Container: typeof TopbarContainer;\n  Menu: typeof TopbarMenu;\n  User: typeof TopbarUser;\n}\n\nconst TopbarBase: ParentComponent<TopbarProps> = (props) => {\n  const [local, rest] = splitProps(props, [\"children\", \"class\"]);\n\n  // SidebarContext \uC120\uD0DD\uC801 \uC0AC\uC6A9 (Context \uC5C6\uC73C\uBA74 \uD1A0\uAE00 \uBC84\uD2BC \uBBF8\uD45C\uC2DC)\n  const sidebarContext = useSidebarContextOptional();\n\n  const handleToggle = () => {\n    sidebarContext?.setToggle((v) => !v);\n  };\n\n  const getClassName = () => twMerge(baseClass, local.class);\n\n  return (\n    <header {...rest} data-topbar class={getClassName()}>\n      <Show when={sidebarContext}>\n        <Button variant=\"ghost\" onClick={handleToggle} class=\"p-2\" aria-label=\"\uC0AC\uC774\uB4DC\uBC14 \uD1A0\uAE00\">\n          <Icon icon={IconMenu2} size=\"1.5em\" />\n        </Button>\n      </Show>\n      {local.children}\n    </header>\n  );\n};\n\nexport const Topbar = TopbarBase as TopbarComponent;\nTopbar.Container = TopbarContainer;\nTopbar.Menu = TopbarMenu;\nTopbar.User = TopbarUser;\n"],
+  "mappings": "AAAA,SAAyC,YAAY,YAAY;AACjE,SAAS,iBAAiB;AAC1B,OAAO,UAAU;AACjB,SAAS,YAAY;AACrB,SAAS,eAAe;AACxB,SAAS,cAAc;AACvB,SAAS,iCAAiC;AAC1C,SAAS,uBAAuB;AAChC,SAAS,kBAAkB;AAC3B,SAAS,kBAAkB;AAM3B,MAAM,YAAY;AAAA;AAAA,EAEhB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA;AAAA,EAEA;AAAA,EACA;AAAA;AAAA,EAEA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA;AAAA,EAEA;AAAA,EACA;AAAA;AAAA,EAEA;AACF;AA8BA,MAAM,aAA2C,CAAC,UAAU;AAC1D,QAAM,CAAC,OAAO,IAAI,IAAI,WAAW,OAAO,CAAC,YAAY,OAAO,CAAC;AAG7D,QAAM,iBAAiB,0BAA0B;AAEjD,QAAM,eAAe,MAAM;AACzB,qDAAgB,UAAU,CAAC,MAAM,CAAC;AAAA,EACpC;AAEA,QAAM,eAAe,MAAM,QAAQ,WAAW,MAAM,KAAK;AAEzD,SACE,oCAAC,YAAQ,GAAG,MAAM,eAAW,MAAC,OAAO,aAAa,KAChD,oCAAC,QAAK,MAAM,kBACV,oCAAC,UAAO,SAAQ,SAAQ,SAAS,cAAc,OAAM,OAAM,cAAW,2CACpE,oCAAC,QAAK,MAAM,WAAW,MAAK,SAAQ,CACtC,CACF,GACC,MAAM,QACT;AAEJ;AAEO,MAAM,SAAS;AACtB,OAAO,YAAY;AACnB,OAAO,OAAO;AACd,OAAO,OAAO;",
+  "names": []
+}

package/dist/components/layout/topbar/TopbarContainer.js

@@ -0,0 +1,13 @@
+import { splitProps } from "solid-js";
+import clsx from "clsx";
+import { twMerge } from "tailwind-merge";
+const containerClass = clsx("flex h-full flex-col");
+const TopbarContainer = (props) => {
+  const [local, rest] = splitProps(props, ["children", "class"]);
+  const getClassName = () => twMerge(containerClass, local.class);
+  return /* @__PURE__ */ React.createElement("div", { ...rest, "data-topbar-container": true, class: getClassName() }, local.children);
+};
+export {
+  TopbarContainer
+};
+//# sourceMappingURL=TopbarContainer.js.map

package/dist/components/layout/topbar/TopbarContainer.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/components/layout/topbar/TopbarContainer.tsx"],
+  "sourcesContent": ["import { type JSX, type ParentComponent, splitProps } from \"solid-js\";\nimport clsx from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nconst containerClass = clsx(\"flex h-full flex-col\");\n\nexport interface TopbarContainerProps extends JSX.HTMLAttributes<HTMLDivElement> {\n  children: JSX.Element;\n}\n\n/**\n * Topbar + \uCF58\uD150\uCE20 \uC601\uC5ED\uC744 \uAC10\uC2F8\uB294 \uB808\uC774\uC544\uC6C3 \uCEE8\uD14C\uC774\uB108\n *\n * @remarks\n * - `flex flex-col h-full` \uAD6C\uC870\uB85C Topbar\uC640 \uCF58\uD150\uCE20\uB97C \uC218\uC9C1 \uBC30\uCE58\n * - Context \uC5C6\uC774 \uC21C\uC218 \uB808\uC774\uC544\uC6C3 \uC5ED\uD560\uB9CC \uC218\uD589\n * - \uBD80\uBAA8 \uC694\uC18C\uC5D0 \uB192\uC774\uAC00 \uC9C0\uC815\uB418\uC5B4\uC57C \uD568\n *\n * @example\n * ```tsx\n * <TopbarContainer>\n *   <Topbar>\n *     <h1>\uC571 \uC774\uB984</h1>\n *     <TopbarMenu menus={menuItems} />\n *   </Topbar>\n *   <main class=\"flex-1 overflow-auto\">\uCF58\uD150\uCE20</main>\n * </TopbarContainer>\n * ```\n */\nexport const TopbarContainer: ParentComponent<TopbarContainerProps> = (props) => {\n  const [local, rest] = splitProps(props, [\"children\", \"class\"]);\n\n  const getClassName = () => twMerge(containerClass, local.class);\n\n  return (\n    <div {...rest} data-topbar-container class={getClassName()}>\n      {local.children}\n    </div>\n  );\n};\n"],
+  "mappings": "AAAA,SAAyC,kBAAkB;AAC3D,OAAO,UAAU;AACjB,SAAS,eAAe;AAExB,MAAM,iBAAiB,KAAK,sBAAsB;AAyB3C,MAAM,kBAAyD,CAAC,UAAU;AAC/E,QAAM,CAAC,OAAO,IAAI,IAAI,WAAW,OAAO,CAAC,YAAY,OAAO,CAAC;AAE7D,QAAM,eAAe,MAAM,QAAQ,gBAAgB,MAAM,KAAK;AAE9D,SACE,oCAAC,SAAK,GAAG,MAAM,yBAAqB,MAAC,OAAO,aAAa,KACtD,MAAM,QACT;AAEJ;",
+  "names": []
+}

package/dist/components/layout/topbar/TopbarMenu.js

@@ -0,0 +1,106 @@
+import { For, Show, splitProps, createSignal, createMemo } from "solid-js";
+import { useLocation, useNavigate } from "@solidjs/router";
+import { IconChevronDown, IconDotsVertical } from "@tabler/icons-solidjs";
+import { Icon } from "../../display/Icon";
+import clsx from "clsx";
+import { twMerge } from "tailwind-merge";
+import { Button } from "../../form-control/Button";
+import { Dropdown } from "../../disclosure/Dropdown";
+import { List } from "../../data/list/List";
+import { ListItem } from "../../data/list/ListItem";
+const desktopNavBaseClass = clsx("hidden sm:flex", "flex-row gap-1", "items-center");
+const mobileWrapperClass = clsx("flex sm:hidden");
+const menuButtonContentClass = clsx("flex items-center", "gap-1");
+const TopbarMenu = (props) => {
+  const [local, rest] = splitProps(props, ["menus", "class"]);
+  const [mobileMenuOpen, setMobileMenuOpen] = createSignal(false);
+  let mobileButtonRef;
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("nav", { ...rest, "data-topbar-menu": true, class: twMerge(desktopNavBaseClass, local.class) }, /* @__PURE__ */ React.createElement(For, { each: local.menus }, (menu) => /* @__PURE__ */ React.createElement(TopbarMenuButton, { menu }))), /* @__PURE__ */ React.createElement("div", { class: mobileWrapperClass }, /* @__PURE__ */ React.createElement(
+    Button,
+    {
+      ref: mobileButtonRef,
+      variant: "ghost",
+      onClick: () => setMobileMenuOpen((v) => !v),
+      "aria-label": "\uBA54\uB274",
+      "aria-haspopup": "menu",
+      "aria-expanded": mobileMenuOpen()
+    },
+    /* @__PURE__ */ React.createElement(Icon, { icon: IconDotsVertical, size: "1.25em" })
+  ), /* @__PURE__ */ React.createElement(Dropdown, { triggerRef: () => mobileButtonRef, open: mobileMenuOpen(), onOpenChange: setMobileMenuOpen }, /* @__PURE__ */ React.createElement(List, { inset: true }, /* @__PURE__ */ React.createElement(For, { each: local.menus }, (menu) => /* @__PURE__ */ React.createElement(TopbarMenuDropdownItem, { menu, onClose: () => setMobileMenuOpen(false) }))))));
+};
+const TopbarMenuButton = (props) => {
+  const location = useLocation();
+  const navigate = useNavigate();
+  const [open, setOpen] = createSignal(false);
+  let buttonRef;
+  const hasChildren = () => props.menu.children !== void 0 && props.menu.children.length > 0;
+  const isExternalLink = () => {
+    var _a;
+    return ((_a = props.menu.href) == null ? void 0 : _a.includes("://")) ?? false;
+  };
+  const isAnyChildSelected = (items) => {
+    for (const item of items) {
+      if (item.href === location.pathname) return true;
+      if (item.children && isAnyChildSelected(item.children)) return true;
+    }
+    return false;
+  };
+  const isSelected = createMemo(() => {
+    if (props.menu.href === location.pathname) return true;
+    if (props.menu.children) {
+      return isAnyChildSelected(props.menu.children);
+    }
+    return false;
+  });
+  const handleClick = () => {
+    if (hasChildren()) {
+      setOpen((v) => !v);
+    } else if (props.menu.href !== void 0) {
+      if (isExternalLink()) {
+        window.open(props.menu.href, "_blank", "noopener,noreferrer");
+      } else {
+        navigate(props.menu.href);
+      }
+    }
+  };
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
+    Button,
+    {
+      ref: buttonRef,
+      variant: isSelected() ? "solid" : "ghost",
+      theme: isSelected() ? "primary" : "base",
+      onClick: handleClick,
+      class: menuButtonContentClass,
+      "aria-haspopup": hasChildren() ? "menu" : void 0,
+      "aria-expanded": hasChildren() ? open() : void 0
+    },
+    /* @__PURE__ */ React.createElement(Show, { when: props.menu.icon }, /* @__PURE__ */ React.createElement(Icon, { icon: props.menu.icon })),
+    /* @__PURE__ */ React.createElement("span", null, props.menu.title),
+    /* @__PURE__ */ React.createElement(Show, { when: hasChildren() }, /* @__PURE__ */ React.createElement(Icon, { icon: IconChevronDown, size: "1em", class: clsx("transition-transform", open() && "rotate-180") }))
+  ), /* @__PURE__ */ React.createElement(Show, { when: hasChildren() }, /* @__PURE__ */ React.createElement(Dropdown, { triggerRef: () => buttonRef, open: open(), onOpenChange: setOpen }, /* @__PURE__ */ React.createElement(List, { inset: true }, /* @__PURE__ */ React.createElement(For, { each: props.menu.children }, (child) => /* @__PURE__ */ React.createElement(TopbarMenuDropdownItem, { menu: child, onClose: () => setOpen(false) }))))));
+};
+const TopbarMenuDropdownItem = (props) => {
+  const location = useLocation();
+  const navigate = useNavigate();
+  const hasChildren = () => props.menu.children !== void 0 && props.menu.children.length > 0;
+  const isExternalLink = () => {
+    var _a;
+    return ((_a = props.menu.href) == null ? void 0 : _a.includes("://")) ?? false;
+  };
+  const isSelected = () => props.menu.href === location.pathname;
+  const handleClick = () => {
+    if (props.menu.href !== void 0) {
+      if (isExternalLink()) {
+        window.open(props.menu.href, "_blank", "noopener,noreferrer");
+      } else {
+        navigate(props.menu.href);
+      }
+      props.onClose();
+    }
+  };
+  return /* @__PURE__ */ React.createElement(ListItem, { selected: isSelected(), readonly: props.menu.href === void 0 && hasChildren(), onClick: handleClick }, /* @__PURE__ */ React.createElement(Show, { when: props.menu.icon }, /* @__PURE__ */ React.createElement(Icon, { icon: props.menu.icon })), /* @__PURE__ */ React.createElement("span", { class: "truncate" }, props.menu.title), /* @__PURE__ */ React.createElement(Show, { when: hasChildren() }, /* @__PURE__ */ React.createElement(ListItem.Children, null, /* @__PURE__ */ React.createElement(For, { each: props.menu.children }, (child) => /* @__PURE__ */ React.createElement(TopbarMenuDropdownItem, { menu: child, onClose: props.onClose })))));
+};
+export {
+  TopbarMenu
+};
+//# sourceMappingURL=TopbarMenu.js.map

package/dist/components/layout/topbar/TopbarMenu.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/components/layout/topbar/TopbarMenu.tsx"],
+  "sourcesContent": ["import { type Component, type JSX, For, Show, splitProps, createSignal, createMemo } from \"solid-js\";\nimport { useLocation, useNavigate } from \"@solidjs/router\";\nimport { IconChevronDown, IconDotsVertical, type IconProps } from \"@tabler/icons-solidjs\";\nimport { Icon } from \"../../display/Icon\";\nimport clsx from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\nimport { Button } from \"../../form-control/Button\";\nimport { Dropdown } from \"../../disclosure/Dropdown\";\nimport { List } from \"../../data/list/List\";\nimport { ListItem } from \"../../data/list/ListItem\";\n\nconst desktopNavBaseClass = clsx(\"hidden sm:flex\", \"flex-row gap-1\", \"items-center\");\nconst mobileWrapperClass = clsx(\"flex sm:hidden\");\nconst menuButtonContentClass = clsx(\"flex items-center\", \"gap-1\");\n\nexport interface TopbarMenuItem {\n  title: string;\n  href?: string;\n  icon?: Component<IconProps>;\n  children?: TopbarMenuItem[];\n}\n\nexport interface TopbarMenuProps extends Omit<JSX.HTMLAttributes<HTMLElement>, \"children\"> {\n  /**\n   * \uBA54\uB274 \uC544\uC774\uD15C \uBC30\uC5F4\n   */\n  menus: TopbarMenuItem[];\n}\n\n/**\n * Topbar \uB4DC\uB86D\uB2E4\uC6B4 \uBA54\uB274 \uCEF4\uD3EC\uB10C\uD2B8\n *\n * @remarks\n * - children\uC774 \uC788\uB294 \uD56D\uBAA9: \uD074\uB9AD \uC2DC \uB4DC\uB86D\uB2E4\uC6B4 \uD45C\uC2DC\n * - children\uC774 \uC5C6\uB294 \uD56D\uBAA9: \uD074\uB9AD \uC2DC \uBC14\uB85C \uB124\uBE44\uAC8C\uC774\uC158\n * - \uC678\uBD80 \uB9C1\uD06C(://\uD3EC\uD568)\uB294 \uC0C8 \uD0ED\uC5D0\uC11C \uC5F4\uAE30\n * - pathname \uC815\uD655 \uC77C\uCE58\uB85C \uC120\uD0DD \uC0C1\uD0DC \uD310\uB2E8\n * - \uD558\uC704 \uBA54\uB274\uB294 List/ListItem\uC73C\uB85C \uB80C\uB354\uB9C1 (\uBAA8\uB4E0 \uACC4\uCE35 \uD3BC\uCE68)\n *\n * @example\n * ```tsx\n * <TopbarMenu menus={[\n *   { title: \"\uB300\uC2DC\uBCF4\uB4DC\", href: \"/dashboard\", icon: IconHome },\n *   {\n *     title: \"\uBA54\uB2741\",\n *     icon: IconFolder,\n *     children: [\n *       { title: \"\uC11C\uBE0C\uBA54\uB2741\", href: \"/menu1/sub1\" },\n *       { title: \"\uC11C\uBE0C\uBA54\uB2742\", href: \"/menu1/sub2\" },\n *     ],\n *   },\n * ]} />\n * ```\n */\nexport const TopbarMenu: Component<TopbarMenuProps> = (props) => {\n  const [local, rest] = splitProps(props, [\"menus\", \"class\"]);\n  const [mobileMenuOpen, setMobileMenuOpen] = createSignal(false);\n  let mobileButtonRef: HTMLButtonElement | undefined;\n\n  return (\n    <>\n      {/* \uB370\uC2A4\uD06C\uD0D1 \uBA54\uB274 (640px \uC774\uC0C1\uC5D0\uC11C\uB9CC \uD45C\uC2DC) */}\n      <nav {...rest} data-topbar-menu class={twMerge(desktopNavBaseClass, local.class)}>\n        <For each={local.menus}>{(menu) => <TopbarMenuButton menu={menu} />}</For>\n      </nav>\n\n      {/* \uBAA8\uBC14\uC77C \uD584\uBC84\uAC70 (640px \uBBF8\uB9CC\uC5D0\uC11C\uB9CC \uD45C\uC2DC) */}\n      <div class={mobileWrapperClass}>\n        <Button\n          ref={mobileButtonRef}\n          variant=\"ghost\"\n          onClick={() => setMobileMenuOpen((v) => !v)}\n          aria-label=\"\uBA54\uB274\"\n          aria-haspopup=\"menu\"\n          aria-expanded={mobileMenuOpen()}\n        >\n          <Icon icon={IconDotsVertical} size=\"1.25em\" />\n        </Button>\n        <Dropdown triggerRef={() => mobileButtonRef} open={mobileMenuOpen()} onOpenChange={setMobileMenuOpen}>\n          <List inset>\n            <For each={local.menus}>\n              {(menu) => <TopbarMenuDropdownItem menu={menu} onClose={() => setMobileMenuOpen(false)} />}\n            </For>\n          </List>\n        </Dropdown>\n      </div>\n    </>\n  );\n};\n\ninterface TopbarMenuButtonProps {\n  menu: TopbarMenuItem;\n}\n\nconst TopbarMenuButton: Component<TopbarMenuButtonProps> = (props) => {\n  const location = useLocation();\n  const navigate = useNavigate();\n\n  const [open, setOpen] = createSignal(false);\n  let buttonRef: HTMLButtonElement | undefined;\n\n  const hasChildren = () => props.menu.children !== undefined && props.menu.children.length > 0;\n  const isExternalLink = () => props.menu.href?.includes(\"://\") ?? false;\n\n  const isAnyChildSelected = (items: TopbarMenuItem[]): boolean => {\n    for (const item of items) {\n      if (item.href === location.pathname) return true;\n      if (item.children && isAnyChildSelected(item.children)) return true;\n    }\n    return false;\n  };\n\n  // \uD604\uC7AC \uBA54\uB274 \uB610\uB294 \uD558\uC704 \uBA54\uB274\uAC00 \uC120\uD0DD\uB418\uC5C8\uB294\uC9C0 \uD655\uC778 (createMemo\uB85C \uCE90\uC2F1)\n  const isSelected = createMemo(() => {\n    if (props.menu.href === location.pathname) return true;\n    if (props.menu.children) {\n      return isAnyChildSelected(props.menu.children);\n    }\n    return false;\n  });\n\n  const handleClick = () => {\n    if (hasChildren()) {\n      setOpen((v) => !v);\n    } else if (props.menu.href !== undefined) {\n      if (isExternalLink()) {\n        window.open(props.menu.href, \"_blank\", \"noopener,noreferrer\");\n      } else {\n        navigate(props.menu.href);\n      }\n    }\n  };\n\n  return (\n    <>\n      <Button\n        ref={buttonRef}\n        variant={isSelected() ? \"solid\" : \"ghost\"}\n        theme={isSelected() ? \"primary\" : \"base\"}\n        onClick={handleClick}\n        class={menuButtonContentClass}\n        aria-haspopup={hasChildren() ? \"menu\" : undefined}\n        aria-expanded={hasChildren() ? open() : undefined}\n      >\n        <Show when={props.menu.icon}>\n          <Icon icon={props.menu.icon!} />\n        </Show>\n        <span>{props.menu.title}</span>\n        <Show when={hasChildren()}>\n          <Icon icon={IconChevronDown} size=\"1em\" class={clsx(\"transition-transform\", open() && \"rotate-180\")} />\n        </Show>\n      </Button>\n      <Show when={hasChildren()}>\n        <Dropdown triggerRef={() => buttonRef} open={open()} onOpenChange={setOpen}>\n          <List inset>\n            <For each={props.menu.children}>\n              {(child) => <TopbarMenuDropdownItem menu={child} onClose={() => setOpen(false)} />}\n            </For>\n          </List>\n        </Dropdown>\n      </Show>\n    </>\n  );\n};\n\ninterface TopbarMenuDropdownItemProps {\n  menu: TopbarMenuItem;\n  onClose: () => void;\n}\n\nconst TopbarMenuDropdownItem: Component<TopbarMenuDropdownItemProps> = (props) => {\n  const location = useLocation();\n  const navigate = useNavigate();\n\n  const hasChildren = () => props.menu.children !== undefined && props.menu.children.length > 0;\n  const isExternalLink = () => props.menu.href?.includes(\"://\") ?? false;\n  const isSelected = () => props.menu.href === location.pathname;\n\n  const handleClick = () => {\n    if (props.menu.href !== undefined) {\n      if (isExternalLink()) {\n        window.open(props.menu.href, \"_blank\", \"noopener,noreferrer\");\n      } else {\n        navigate(props.menu.href);\n      }\n      props.onClose();\n    }\n    // href\uAC00 \uC5C6\uACE0 children\uB9CC \uC788\uB294 \uACBD\uC6B0 \uD074\uB9AD\uD574\uB3C4 \uB2EB\uD788\uC9C0 \uC54A\uC74C\n  };\n\n  return (\n    <ListItem selected={isSelected()} readonly={props.menu.href === undefined && hasChildren()} onClick={handleClick}>\n      <Show when={props.menu.icon}>\n        <Icon icon={props.menu.icon!} />\n      </Show>\n      <span class=\"truncate\">{props.menu.title}</span>\n      <Show when={hasChildren()}>\n        <ListItem.Children>\n          <For each={props.menu.children}>\n            {(child) => <TopbarMenuDropdownItem menu={child} onClose={props.onClose} />}\n          </For>\n        </ListItem.Children>\n      </Show>\n    </ListItem>\n  );\n};\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/components/layout/topbar/TopbarUser.js

@@ -0,0 +1,44 @@
+import { createSignal, For, Show, splitProps } from "solid-js";
+import { IconChevronDown } from "@tabler/icons-solidjs";
+import clsx from "clsx";
+import { Icon } from "../../display/Icon";
+import { twMerge } from "tailwind-merge";
+import { Button } from "../../form-control/Button";
+import { Dropdown } from "../../disclosure/Dropdown";
+import { List } from "../../data/list/List";
+import { ListItem } from "../../data/list/ListItem";
+const wrapperBaseClass = clsx("flex items-center");
+const buttonContentClass = clsx("flex items-center", "gap-1");
+const TopbarUser = (props) => {
+  const [local, rest] = splitProps(props, ["children", "class", "menus"]);
+  const [open, setOpen] = createSignal(false);
+  let buttonRef;
+  const hasMenus = () => local.menus !== void 0 && local.menus.length > 0;
+  const handleClick = () => {
+    if (hasMenus()) {
+      setOpen((v) => !v);
+    }
+  };
+  const handleMenuClick = (menu) => {
+    setOpen(false);
+    menu.onClick();
+  };
+  const getClassName = () => twMerge(wrapperBaseClass, local.class);
+  return /* @__PURE__ */ React.createElement("div", { ...rest, "data-topbar-user": true, class: getClassName() }, /* @__PURE__ */ React.createElement(
+    Button,
+    {
+      ref: buttonRef,
+      variant: "ghost",
+      onClick: handleClick,
+      class: buttonContentClass,
+      "aria-haspopup": hasMenus() ? "menu" : void 0,
+      "aria-expanded": hasMenus() ? open() : void 0
+    },
+    local.children,
+    /* @__PURE__ */ React.createElement(Show, { when: hasMenus() }, /* @__PURE__ */ React.createElement(Icon, { icon: IconChevronDown, size: "1em", class: clsx("transition-transform", open() && "rotate-180") }))
+  ), /* @__PURE__ */ React.createElement(Show, { when: hasMenus() }, /* @__PURE__ */ React.createElement(Dropdown, { triggerRef: () => buttonRef, open: open(), onOpenChange: setOpen }, /* @__PURE__ */ React.createElement(List, { inset: true }, /* @__PURE__ */ React.createElement(For, { each: local.menus }, (menu) => /* @__PURE__ */ React.createElement(ListItem, { onClick: () => handleMenuClick(menu) }, menu.title))))));
+};
+export {
+  TopbarUser
+};
+//# sourceMappingURL=TopbarUser.js.map

package/dist/components/layout/topbar/TopbarUser.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/components/layout/topbar/TopbarUser.tsx"],
+  "sourcesContent": ["import { createSignal, For, type JSX, type ParentComponent, Show, splitProps } from \"solid-js\";\nimport { IconChevronDown } from \"@tabler/icons-solidjs\";\nimport clsx from \"clsx\";\nimport { Icon } from \"../../display/Icon\";\nimport { twMerge } from \"tailwind-merge\";\nimport { Button } from \"../../form-control/Button\";\nimport { Dropdown } from \"../../disclosure/Dropdown\";\nimport { List } from \"../../data/list/List\";\nimport { ListItem } from \"../../data/list/ListItem\";\n\nconst wrapperBaseClass = clsx(\"flex items-center\");\nconst buttonContentClass = clsx(\"flex items-center\", \"gap-1\");\n\nexport interface TopbarUserMenu {\n  title: string;\n  onClick: () => void;\n}\n\nexport interface TopbarUserProps extends Omit<JSX.HTMLAttributes<HTMLDivElement>, \"onClick\"> {\n  /**\n   * \uB4DC\uB86D\uB2E4\uC6B4 \uBA54\uB274 (\uC788\uC744 \uB54C\uB9CC \uB4DC\uB86D\uB2E4\uC6B4 \uD45C\uC2DC)\n   */\n  menus?: TopbarUserMenu[];\n\n  /**\n   * \uC0AC\uC6A9\uC790 \uC815\uBCF4 \uC601\uC5ED (\uCEE4\uC2A4\uD130\uB9C8\uC774\uC9D5)\n   */\n  children: JSX.Element;\n}\n\n/**\n * Topbar \uC0AC\uC6A9\uC790 \uC815\uBCF4 \uCEF4\uD3EC\uB10C\uD2B8\n *\n * @remarks\n * - children\uC73C\uB85C \uC0AC\uC6A9\uC790 \uC815\uBCF4 \uD45C\uC2DC \uCEE4\uC2A4\uD130\uB9C8\uC774\uC9D5\n * - menus\uAC00 \uC788\uC744 \uB54C \uD074\uB9AD \uC2DC Dropdown\uC73C\uB85C \uBA54\uB274 \uD45C\uC2DC\n * - Button\uC758 ghost \uC2A4\uD0C0\uC77C \uC0AC\uC6A9\n *\n * @example\n * ```tsx\n * <TopbarUser menus={[\n *   { title: \"\uD504\uB85C\uD544\", onClick: () => navigate(\"/profile\") },\n *   { title: \"\uB85C\uADF8\uC544\uC6C3\", onClick: handleLogout },\n * ]}>\n *   <span>\uC0AC\uC6A9\uC790\uBA85</span>\n * </TopbarUser>\n * ```\n */\nexport const TopbarUser: ParentComponent<TopbarUserProps> = (props) => {\n  const [local, rest] = splitProps(props, [\"children\", \"class\", \"menus\"]);\n\n  const [open, setOpen] = createSignal(false);\n  let buttonRef: HTMLButtonElement | undefined;\n\n  const hasMenus = () => local.menus !== undefined && local.menus.length > 0;\n\n  const handleClick = () => {\n    if (hasMenus()) {\n      setOpen((v) => !v);\n    }\n  };\n\n  const handleMenuClick = (menu: TopbarUserMenu) => {\n    setOpen(false);\n    menu.onClick();\n  };\n\n  const getClassName = () => twMerge(wrapperBaseClass, local.class);\n\n  return (\n    <div {...rest} data-topbar-user class={getClassName()}>\n      <Button\n        ref={buttonRef}\n        variant=\"ghost\"\n        onClick={handleClick}\n        class={buttonContentClass}\n        aria-haspopup={hasMenus() ? \"menu\" : undefined}\n        aria-expanded={hasMenus() ? open() : undefined}\n      >\n        {local.children}\n        <Show when={hasMenus()}>\n          <Icon icon={IconChevronDown} size=\"1em\" class={clsx(\"transition-transform\", open() && \"rotate-180\")} />\n        </Show>\n      </Button>\n      <Show when={hasMenus()}>\n        <Dropdown triggerRef={() => buttonRef} open={open()} onOpenChange={setOpen}>\n          <List inset>\n            <For each={local.menus}>\n              {(menu) => <ListItem onClick={() => handleMenuClick(menu)}>{menu.title}</ListItem>}\n            </For>\n          </List>\n        </Dropdown>\n      </Show>\n    </div>\n  );\n};\n"],
+  "mappings": "AAAA,SAAS,cAAc,KAAqC,MAAM,kBAAkB;AACpF,SAAS,uBAAuB;AAChC,OAAO,UAAU;AACjB,SAAS,YAAY;AACrB,SAAS,eAAe;AACxB,SAAS,cAAc;AACvB,SAAS,gBAAgB;AACzB,SAAS,YAAY;AACrB,SAAS,gBAAgB;AAEzB,MAAM,mBAAmB,KAAK,mBAAmB;AACjD,MAAM,qBAAqB,KAAK,qBAAqB,OAAO;AAqCrD,MAAM,aAA+C,CAAC,UAAU;AACrE,QAAM,CAAC,OAAO,IAAI,IAAI,WAAW,OAAO,CAAC,YAAY,SAAS,OAAO,CAAC;AAEtE,QAAM,CAAC,MAAM,OAAO,IAAI,aAAa,KAAK;AAC1C,MAAI;AAEJ,QAAM,WAAW,MAAM,MAAM,UAAU,UAAa,MAAM,MAAM,SAAS;AAEzE,QAAM,cAAc,MAAM;AACxB,QAAI,SAAS,GAAG;AACd,cAAQ,CAAC,MAAM,CAAC,CAAC;AAAA,IACnB;AAAA,EACF;AAEA,QAAM,kBAAkB,CAAC,SAAyB;AAChD,YAAQ,KAAK;AACb,SAAK,QAAQ;AAAA,EACf;AAEA,QAAM,eAAe,MAAM,QAAQ,kBAAkB,MAAM,KAAK;AAEhE,SACE,oCAAC,SAAK,GAAG,MAAM,oBAAgB,MAAC,OAAO,aAAa,KAClD;AAAA,IAAC;AAAA;AAAA,MACC,KAAK;AAAA,MACL,SAAQ;AAAA,MACR,SAAS;AAAA,MACT,OAAO;AAAA,MACP,iBAAe,SAAS,IAAI,SAAS;AAAA,MACrC,iBAAe,SAAS,IAAI,KAAK,IAAI;AAAA;AAAA,IAEpC,MAAM;AAAA,IACP,oCAAC,QAAK,MAAM,SAAS,KACnB,oCAAC,QAAK,MAAM,iBAAiB,MAAK,OAAM,OAAO,KAAK,wBAAwB,KAAK,KAAK,YAAY,GAAG,CACvG;AAAA,EACF,GACA,oCAAC,QAAK,MAAM,SAAS,KACnB,oCAAC,YAAS,YAAY,MAAM,WAAW,MAAM,KAAK,GAAG,cAAc,WACjE,oCAAC,QAAK,OAAK,QACT,oCAAC,OAAI,MAAM,MAAM,SACd,CAAC,SAAS,oCAAC,YAAS,SAAS,MAAM,gBAAgB,IAAI,KAAI,KAAK,KAAM,CACzE,CACF,CACF,CACF,CACF;AAEJ;",
+  "names": []
+}

package/dist/core-browser/src/extensions/element-ext.d.ts

@@ -0,0 +1,98 @@
+/**
+ * 요소 bounds 정보 타입
+ */
+export interface ElementBounds {
+    /** 측정 대상 요소 */
+    target: Element;
+    /** 뷰포트 기준 상단 위치 */
+    top: number;
+    /** 뷰포트 기준 왼쪽 위치 */
+    left: number;
+    /** 요소 너비 */
+    width: number;
+    /** 요소 높이 */
+    height: number;
+}
+declare global {
+    interface Element {
+        /**
+         * 셀렉터로 하위 요소 전체 검색
+         *
+         * @param selector - CSS 셀렉터
+         * @returns 매칭된 요소 배열 (빈 셀렉터는 빈 배열 반환)
+         */
+        findAll<T extends Element = Element>(selector: string): T[];
+        /**
+         * 셀렉터로 첫 번째 매칭 요소 검색
+         *
+         * @param selector - CSS 셀렉터
+         * @returns 첫 번째 매칭 요소 또는 undefined (빈 셀렉터는 undefined 반환)
+         */
+        findFirst<T extends Element = Element>(selector: string): T | undefined;
+        /**
+         * 요소를 첫 번째 자식으로 삽입
+         *
+         * @param child - 삽입할 자식 요소
+         * @returns 삽입된 자식 요소
+         */
+        prependChild<T extends Element>(child: T): T;
+        /**
+         * 모든 부모 요소 목록 반환 (가까운 순서)
+         *
+         * @returns 부모 요소 배열 (가까운 부모부터 순서대로)
+         */
+        getParents(): Element[];
+        /**
+         * 부모 중 첫 번째 포커스 가능 요소 검색 (tabbable 사용)
+         *
+         * @returns 포커스 가능한 첫 번째 부모 요소 또는 undefined
+         */
+        findFocusableParent(): HTMLElement | undefined;
+        /**
+         * 자식 중 첫 번째 포커스 가능 요소 검색 (tabbable 사용)
+         *
+         * @returns 포커스 가능한 첫 번째 자식 요소 또는 undefined
+         */
+        findFirstFocusableChild(): HTMLElement | undefined;
+        /**
+         * 요소가 offset 기준 요소인지 확인 (position: relative/absolute/fixed/sticky)
+         *
+         * @returns position 속성이 relative, absolute, fixed, sticky 중 하나면 true
+         */
+        isOffsetElement(): boolean;
+        /**
+         * 요소가 화면에 보이는지 확인
+         *
+         * @remarks
+         * clientRects 존재 여부, visibility: hidden, opacity: 0 여부를 확인한다.
+         *
+         * @returns 요소가 화면에 보이면 true
+         */
+        isVisible(): boolean;
+    }
+}
+/**
+ * 요소 내용을 클립보드에 복사 (copy 이벤트 핸들러에서 사용)
+ *
+ * @param event - copy 이벤트 객체
+ */
+export declare function copyElement(event: ClipboardEvent): void;
+/**
+ * 클립보드 내용을 요소에 붙여넣기 (paste 이벤트 핸들러에서 사용)
+ *
+ * @remarks
+ * 대상 요소 내의 첫 번째 input/textarea를 찾아 전체 값을 클립보드 내용으로 교체한다.
+ * 커서 위치나 선택 영역을 고려하지 않는다.
+ *
+ * @param event - paste 이벤트 객체
+ */
+export declare function pasteToElement(event: ClipboardEvent): void;
+/**
+ * IntersectionObserver를 사용하여 요소들의 bounds 정보 조회
+ *
+ * @param els - 대상 요소 배열
+ * @param timeout - 타임아웃 (밀리초, 기본: 5000)
+ * @throws {TimeoutError} 타임아웃 시간 내에 응답이 없을 경우
+ */
+export declare function getBounds(els: Element[], timeout?: number): Promise<ElementBounds[]>;
+//# sourceMappingURL=element-ext.d.ts.map

package/dist/core-browser/src/extensions/element-ext.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"element-ext.d.ts","sourceRoot":"","sources":["../../../../../core-browser/src/extensions/element-ext.ts"],"names":[],"mappings":"AAGA;;GAEG;AACH,MAAM,WAAW,aAAa;IAC5B,eAAe;IACf,MAAM,EAAE,OAAO,CAAC;IAChB,mBAAmB;IACnB,GAAG,EAAE,MAAM,CAAC;IACZ,mBAAmB;IACnB,IAAI,EAAE,MAAM,CAAC;IACb,YAAY;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,YAAY;IACZ,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,OAAO;QACf;;;;;WAKG;QACH,OAAO,CAAC,CAAC,SAAS,OAAO,GAAG,OAAO,EAAE,QAAQ,EAAE,MAAM,GAAG,CAAC,EAAE,CAAC;QAE5D;;;;;WAKG;QACH,SAAS,CAAC,CAAC,SAAS,OAAO,GAAG,OAAO,EAAE,QAAQ,EAAE,MAAM,GAAG,CAAC,GAAG,SAAS,CAAC;QAExE;;;;;WAKG;QACH,YAAY,CAAC,CAAC,SAAS,OAAO,EAAE,KAAK,EAAE,CAAC,GAAG,CAAC,CAAC;QAE7C;;;;WAIG;QACH,UAAU,IAAI,OAAO,EAAE,CAAC;QAExB;;;;WAIG;QACH,mBAAmB,IAAI,WAAW,GAAG,SAAS,CAAC;QAE/C;;;;WAIG;QACH,uBAAuB,IAAI,WAAW,GAAG,SAAS,CAAC;QAEnD;;;;WAIG;QACH,eAAe,IAAI,OAAO,CAAC;QAE3B;;;;;;;WAOG;QACH,SAAS,IAAI,OAAO,CAAC;KACtB;CACF;AAgED;;;;GAIG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE,cAAc,GAAG,IAAI,CAUvD;AAED;;;;;;;;GAQG;AACH,wBAAgB,cAAc,CAAC,KAAK,EAAE,cAAc,GAAG,IAAI,CAa1D;AAED;;;;;;GAMG;AACH,wBAAsB,SAAS,CAAC,GAAG,EAAE,OAAO,EAAE,EAAE,OAAO,GAAE,MAAa,GAAG,OAAO,CAAC,aAAa,EAAE,CAAC,CAkDhG"}

package/dist/core-browser/src/extensions/html-element-ext.d.ts

@@ -0,0 +1,54 @@
+declare global {
+    interface HTMLElement {
+        /**
+         * 강제 리페인트 (reflow 트리거)
+         */
+        repaint(): void;
+        /**
+         * 부모 요소 기준 상대 위치 계산 (CSS 포지셔닝용)
+         *
+         * @remarks
+         * 이 함수는 요소의 위치를 부모 요소 기준으로 계산하되, `window.scrollX/Y`를 포함하여
+         * CSS `top`/`left` 속성에 직접 사용할 수 있는 문서 기준 좌표를 반환한다.
+         *
+         * 주요 사용 사례:
+         * - 드롭다운, 팝업 등을 `document.body`에 append 후 위치 지정
+         * - 스크롤된 페이지에서도 올바르게 동작
+         *
+         * 계산에 포함되는 요소:
+         * - 뷰포트 기준 위치 (getBoundingClientRect)
+         * - 문서 스크롤 위치 (window.scrollX/Y)
+         * - 부모 요소 내부 스크롤 (parentEl.scrollTop/Left)
+         * - 중간 요소들의 border 두께
+         * - CSS transform 변환
+         *
+         * @param parent - 기준이 될 부모 요소 또는 셀렉터 (예: document.body, ".container")
+         * @returns CSS top/left 속성에 사용할 수 있는 좌표
+         * @throws {ArgumentError} 부모 요소를 찾을 수 없는 경우
+         */
+        getRelativeOffset(parent: HTMLElement | string): {
+            top: number;
+            left: number;
+        };
+        /**
+         * 대상이 offset 영역(고정 헤더/고정 열 등)에 가려진 경우, 보이도록 스크롤
+         *
+         * @remarks
+         * 이 함수는 대상이 스크롤 영역의 위쪽/왼쪽 경계를 벗어난 경우만 처리한다.
+         * 아래쪽/오른쪽으로 스크롤이 필요한 경우는 브라우저의 기본 포커스 스크롤 동작에 의존한다.
+         * 주로 고정 헤더나 고정 열이 있는 테이블에서 포커스 이벤트와 함께 사용된다.
+         *
+         * @param target - 대상의 컨테이너 내 위치 (offsetTop, offsetLeft)
+         * @param offset - 가려지면 안 되는 영역 크기 (예: 고정 헤더 높이, 고정 열 너비)
+         */
+        scrollIntoViewIfNeeded(target: {
+            top: number;
+            left: number;
+        }, offset?: {
+            top: number;
+            left: number;
+        }): void;
+    }
+}
+export {};
+//# sourceMappingURL=html-element-ext.d.ts.map

package/dist/core-browser/src/extensions/html-element-ext.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"html-element-ext.d.ts","sourceRoot":"","sources":["../../../../../core-browser/src/extensions/html-element-ext.ts"],"names":[],"mappings":"AAEA,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,WAAW;QACnB;;WAEG;QACH,OAAO,IAAI,IAAI,CAAC;QAEhB;;;;;;;;;;;;;;;;;;;;;WAqBG;QACH,iBAAiB,CAAC,MAAM,EAAE,WAAW,GAAG,MAAM,GAAG;YAAE,GAAG,EAAE,MAAM,CAAC;YAAC,IAAI,EAAE,MAAM,CAAA;SAAE,CAAC;QAE/E;;;;;;;;;;WAUG;QACH,sBAAsB,CAAC,MAAM,EAAE;YAAE,GAAG,EAAE,MAAM,CAAC;YAAC,IAAI,EAAE,MAAM,CAAA;SAAE,EAAE,MAAM,CAAC,EAAE;YAAE,GAAG,EAAE,MAAM,CAAC;YAAC,IAAI,EAAE,MAAM,CAAA;SAAE,GAAG,IAAI,CAAC;KAC7G;CACF"}

package/dist/core-browser/src/index.d.ts

@@ -0,0 +1,7 @@
+import "./extensions/element-ext";
+import "./extensions/html-element-ext";
+export * from "./extensions/element-ext";
+export * from "./extensions/html-element-ext";
+export * from "./utils/blob";
+export * from "./utils/download";
+//# sourceMappingURL=index.d.ts.map

package/dist/core-browser/src/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../core-browser/src/index.ts"],"names":[],"mappings":"AAGA,OAAO,0BAA0B,CAAC;AAClC,OAAO,+BAA+B,CAAC;AAGvC,cAAc,0BAA0B,CAAC;AACzC,cAAc,+BAA+B,CAAC;AAC9C,cAAc,cAAc,CAAC;AAC7B,cAAc,kBAAkB,CAAC"}

package/dist/core-browser/src/utils/blob.d.ts

@@ -0,0 +1,10 @@
+export declare namespace BlobUtils {
+    /**
+     * Blob을 파일로 다운로드
+     *
+     * @param blob - 다운로드할 Blob 객체
+     * @param fileName - 저장될 파일 이름
+     */
+    function download(blob: Blob, fileName: string): void;
+}
+//# sourceMappingURL=blob.d.ts.map

package/dist/core-browser/src/utils/blob.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"blob.d.ts","sourceRoot":"","sources":["../../../../../core-browser/src/utils/blob.ts"],"names":[],"mappings":"AAAA,yBAAiB,SAAS,CAAC;IACzB;;;;;OAKG;IACH,SAAgB,QAAQ,CAAC,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,GAAG,IAAI,CAU3D;CACF"}

package/dist/core-browser/src/utils/download.d.ts

@@ -0,0 +1,11 @@
+export interface DownloadProgress {
+    receivedLength: number;
+    contentLength: number;
+}
+/**
+ * URL에서 바이너리 데이터 다운로드 (진행률 콜백 지원)
+ */
+export declare function downloadBytes(url: string, options?: {
+    onProgress?: (progress: DownloadProgress) => void;
+}): Promise<Uint8Array>;
+//# sourceMappingURL=download.d.ts.map

package/dist/core-browser/src/utils/download.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"download.d.ts","sourceRoot":"","sources":["../../../../../core-browser/src/utils/download.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,gBAAgB;IAC/B,cAAc,EAAE,MAAM,CAAC;IACvB,aAAa,EAAE,MAAM,CAAC;CACvB;AAED;;GAEG;AACH,wBAAsB,aAAa,CACjC,GAAG,EAAE,MAAM,EACX,OAAO,CAAC,EAAE;IAAE,UAAU,CAAC,EAAE,CAAC,QAAQ,EAAE,gBAAgB,KAAK,IAAI,CAAA;CAAE,GAC9D,OAAO,CAAC,UAAU,CAAC,CAsDrB"}