@simplysm/solid 13.0.0-beta.6 → 13.0.2

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

@@ -1,25 +1,24 @@
-import { Show, splitProps, createMemo } from "solid-js";
+import { template as _$template } from "solid-js/web";
+import { delegateEvents as _$delegateEvents } from "solid-js/web";
+import { insert as _$insert } from "solid-js/web";
+import { createComponent as _$createComponent } from "solid-js/web";
+import { className as _$className } from "solid-js/web";
+import { memo as _$memo } from "solid-js/web";
+import { spread as _$spread } from "solid-js/web";
+import { mergeProps as _$mergeProps } from "solid-js/web";
+var _tmpl$ = /* @__PURE__ */ _$template(`<div role=button aria-label="\uC0AC\uC774\uB4DC\uBC14 \uB2EB\uAE30"tabindex=0>`), _tmpl$2 = /* @__PURE__ */ _$template(`<div>`);
+import { Show, splitProps, createMemo, createSignal } from "solid-js";
 import { useBeforeLeave } from "@solidjs/router";
 import { createMediaQuery } from "@solid-primitives/media";
 import clsx from "clsx";
 import { twMerge } from "tailwind-merge";
-import { SidebarContext, SM_MEDIA_QUERY } from "./SidebarContext";
-import { usePersisted } from "../../../hooks/usePersisted";
-import { mergeStyles } from "../../../helpers/mergeStyles";
-const backdropClass = clsx(
-  "absolute",
-  "top-0",
-  "left-0",
-  "right-0",
-  "bottom-0",
-  "z-sidebar-backdrop",
-  "bg-black/50",
-  "sm:hidden"
-);
+import { SidebarContext, SM_MEDIA_QUERY } from "./SidebarContext.js";
+import { mergeStyles } from "../../../helpers/mergeStyles.js";
+const backdropClass = clsx("absolute", "top-0", "left-0", "right-0", "bottom-0", "z-sidebar-backdrop", "bg-black/50", "sm:hidden");
 const containerClass = clsx("relative h-full transition-[padding-left] duration-100");
 const SidebarContainer = (props) => {
   const [local, rest] = splitProps(props, ["children", "class", "style"]);
-  const [toggle, setToggle] = usePersisted("sidebar.toggle", false);
+  const [toggle, setToggle] = createSignal(false);
   const isDesktop = createMediaQuery(SM_MEDIA_QUERY);
   const isOpen = createMemo(() => {
     if (isDesktop()) {
@@ -42,28 +41,42 @@ const SidebarContainer = (props) => {
     return void 0;
   };
   const getClassName = () => twMerge(containerClass, local.class);
-  return /* @__PURE__ */ React.createElement(SidebarContext.Provider, { value: { toggle, setToggle } }, /* @__PURE__ */ React.createElement(
-    "div",
-    {
-      ...rest,
-      "data-sidebar-container": true,
-      class: getClassName(),
-      style: mergeStyles(local.style, { "padding-left": getPaddingLeft() })
+  return _$createComponent(SidebarContext.Provider, {
+    value: {
+      toggle,
+      setToggle
     },
-    local.children,
-    /* @__PURE__ */ React.createElement(Show, { when: !isDesktop() && isOpen() }, /* @__PURE__ */ React.createElement(
-      "div",
-      {
-        class: backdropClass,
-        onClick: handleBackdropClick,
-        onKeyDown: (e) => e.key === "Escape" && handleBackdropClick(),
-        role: "button",
-        "aria-label": "\uC0AC\uC774\uB4DC\uBC14 \uB2EB\uAE30",
-        tabIndex: 0
-      }
-    ))
-  ));
+    get children() {
+      var _el$ = _tmpl$2();
+      _$spread(_el$, _$mergeProps(rest, {
+        "data-sidebar-container": "",
+        get ["class"]() {
+          return getClassName();
+        },
+        get style() {
+          return mergeStyles(local.style, {
+            "padding-left": getPaddingLeft()
+          });
+        }
+      }), false, true);
+      _$insert(_el$, () => local.children, null);
+      _$insert(_el$, _$createComponent(Show, {
+        get when() {
+          return _$memo(() => !!!isDesktop())() && isOpen();
+        },
+        get children() {
+          var _el$2 = _tmpl$();
+          _el$2.$$keydown = (e) => e.key === "Escape" && handleBackdropClick();
+          _el$2.$$click = handleBackdropClick;
+          _$className(_el$2, backdropClass);
+          return _el$2;
+        }
+      }), null);
+      return _el$;
+    }
+  });
 };
+_$delegateEvents(["click", "keydown"]);
 export {
   SidebarContainer
 };

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

@@ -1,7 +1,6 @@
 {
   "version": 3,
   "sources": ["../../../../src/components/layout/sidebar/SidebarContainer.tsx"],
-  "sourcesContent": ["import { type JSX, type ParentComponent, Show, splitProps, createMemo } from \"solid-js\";\nimport { useBeforeLeave } from \"@solidjs/router\";\nimport { createMediaQuery } from \"@solid-primitives/media\";\nimport clsx from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\nimport { SidebarContext, SM_MEDIA_QUERY } from \"./SidebarContext\";\nimport { usePersisted } from \"../../../hooks/usePersisted\";\nimport { mergeStyles } from \"../../../helpers/mergeStyles\";\n\nconst backdropClass = clsx(\n  \"absolute\",\n  \"top-0\",\n  \"left-0\",\n  \"right-0\",\n  \"bottom-0\",\n  \"z-sidebar-backdrop\",\n  \"bg-black/50\",\n  \"sm:hidden\",\n);\n\nconst containerClass = clsx(\"relative h-full transition-[padding-left] duration-100\");\n\nexport interface SidebarContainerProps extends JSX.HTMLAttributes<HTMLDivElement> {\n  children: JSX.Element;\n}\n\n/**\n * \uC0AC\uC774\uB4DC\uBC14 \uCEE8\uD14C\uC774\uB108 \uCEF4\uD3EC\uB10C\uD2B8\n *\n * @remarks\n * - `position: relative`\uB85C Sidebar\uB97C \uD3EC\uD568\uD558\uB294 \uCEE8\uD14C\uC774\uB108 \uC5ED\uD560\n * - \uBD80\uBAA8 \uC694\uC18C\uC5D0 \uB192\uC774\uAC00 \uC9C0\uC815\uB418\uC5B4\uC57C \uD568 (`h-full` \uC0AC\uC6A9)\n * - \uCF58\uD150\uCE20 \uC601\uC5ED\uC758 `overflow-auto`\uB294 \uC0AC\uC6A9\uC790\uAC00 \uC9C1\uC811 \uC801\uC6A9\uD574\uC57C \uD568\n * - SidebarContext.Provider\uB85C toggle \uC0C1\uD0DC \uACF5\uC720\n * - usePersisted\uB85C toggle \uC0C1\uD0DC localStorage \uC800\uC7A5 (\uD0A4: sidebar.toggle)\n * - \uB370\uC2A4\uD06C\uD0D1(640px+)\uC5D0\uC11C padding-left + transition\uC73C\uB85C \uCF58\uD150\uCE20 \uD655\uC7A5/\uCD95\uC18C\n * - \uBAA8\uBC14\uC77C(640px-)\uC5D0\uC11C backdrop \uB80C\uB354\uB9C1 \uBC0F \uD074\uB9AD \uC2DC \uB2EB\uAE30\n * - \uD398\uC774\uC9C0 \uC774\uB3D9 \uC2DC \uBAA8\uBC14\uC77C\uC5D0\uC11C \uC790\uB3D9 \uB2EB\uAE30\n *\n * @example\n * ```tsx\n * <div class=\"h-screen\">\n *   <SidebarContainer>\n *     <Sidebar>\n *       <SidebarUser menus={userMenus}>\n *         <span>\uC0AC\uC6A9\uC790</span>\n *       </SidebarUser>\n *       <SidebarMenu menus={menuItems} />\n *     </Sidebar>\n *     <main class=\"h-full overflow-auto\">\uCF58\uD150\uCE20</main>\n *   </SidebarContainer>\n * </div>\n * ```\n */\nexport const SidebarContainer: ParentComponent<SidebarContainerProps> = (props) => {\n  const [local, rest] = splitProps(props, [\"children\", \"class\", \"style\"]);\n\n  const [toggle, setToggle] = usePersisted(\"sidebar.toggle\", false);\n\n  // Tailwind sm: breakpoint \uAC10\uC9C0\n  const isDesktop = createMediaQuery(SM_MEDIA_QUERY);\n\n  // \uC0AC\uC774\uB4DC\uBC14 \uC5F4\uB9BC \uC5EC\uBD80 \uACC4\uC0B0\n  const isOpen = createMemo(() => {\n    if (isDesktop()) {\n      return !toggle();\n    }\n    return toggle();\n  });\n\n  // backdrop \uD074\uB9AD \uC2DC \uB2EB\uAE30\n  const handleBackdropClick = () => {\n    setToggle(false);\n  };\n\n  // \uBAA8\uBC14\uC77C\uC5D0\uC11C \uD398\uC774\uC9C0 \uC774\uB3D9 \uC2DC \uC790\uB3D9 \uB2EB\uAE30\n  useBeforeLeave(() => {\n    if (!isDesktop() && toggle()) {\n      setToggle(false);\n    }\n  });\n\n  // \uB370\uC2A4\uD06C\uD0D1\uC5D0\uC11C \uC0AC\uC774\uB4DC\uBC14 \uC5F4\uB9BC \uC2DC padding-left \uC801\uC6A9 (16rem = w-64)\n  const getPaddingLeft = () => {\n    if (isDesktop() && isOpen()) {\n      return \"16rem\";\n    }\n    return undefined;\n  };\n\n  const getClassName = () => twMerge(containerClass, local.class);\n\n  return (\n    <SidebarContext.Provider value={{ toggle, setToggle }}>\n      <div\n        {...rest}\n        data-sidebar-container\n        class={getClassName()}\n        style={mergeStyles(local.style, { \"padding-left\": getPaddingLeft() })}\n      >\n        {local.children}\n        <Show when={!isDesktop() && isOpen()}>\n          <div\n            class={backdropClass}\n            onClick={handleBackdropClick}\n            onKeyDown={(e) => e.key === \"Escape\" && handleBackdropClick()}\n            role=\"button\"\n            aria-label=\"\uC0AC\uC774\uB4DC\uBC14 \uB2EB\uAE30\"\n            tabIndex={0}\n          />\n        </Show>\n      </div>\n    </SidebarContext.Provider>\n  );\n};\n"],
-  "mappings": "AAAA,SAAyC,MAAM,YAAY,kBAAkB;AAC7E,SAAS,sBAAsB;AAC/B,SAAS,wBAAwB;AACjC,OAAO,UAAU;AACjB,SAAS,eAAe;AACxB,SAAS,gBAAgB,sBAAsB;AAC/C,SAAS,oBAAoB;AAC7B,SAAS,mBAAmB;AAE5B,MAAM,gBAAgB;AAAA,EACpB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;AAEA,MAAM,iBAAiB,KAAK,wDAAwD;AAkC7E,MAAM,mBAA2D,CAAC,UAAU;AACjF,QAAM,CAAC,OAAO,IAAI,IAAI,WAAW,OAAO,CAAC,YAAY,SAAS,OAAO,CAAC;AAEtE,QAAM,CAAC,QAAQ,SAAS,IAAI,aAAa,kBAAkB,KAAK;AAGhE,QAAM,YAAY,iBAAiB,cAAc;AAGjD,QAAM,SAAS,WAAW,MAAM;AAC9B,QAAI,UAAU,GAAG;AACf,aAAO,CAAC,OAAO;AAAA,IACjB;AACA,WAAO,OAAO;AAAA,EAChB,CAAC;AAGD,QAAM,sBAAsB,MAAM;AAChC,cAAU,KAAK;AAAA,EACjB;AAGA,iBAAe,MAAM;AACnB,QAAI,CAAC,UAAU,KAAK,OAAO,GAAG;AAC5B,gBAAU,KAAK;AAAA,IACjB;AAAA,EACF,CAAC;AAGD,QAAM,iBAAiB,MAAM;AAC3B,QAAI,UAAU,KAAK,OAAO,GAAG;AAC3B,aAAO;AAAA,IACT;AACA,WAAO;AAAA,EACT;AAEA,QAAM,eAAe,MAAM,QAAQ,gBAAgB,MAAM,KAAK;AAE9D,SACE,oCAAC,eAAe,UAAf,EAAwB,OAAO,EAAE,QAAQ,UAAU,KAClD;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,0BAAsB;AAAA,MACtB,OAAO,aAAa;AAAA,MACpB,OAAO,YAAY,MAAM,OAAO,EAAE,gBAAgB,eAAe,EAAE,CAAC;AAAA;AAAA,IAEnE,MAAM;AAAA,IACP,oCAAC,QAAK,MAAM,CAAC,UAAU,KAAK,OAAO,KACjC;AAAA,MAAC;AAAA;AAAA,QACC,OAAO;AAAA,QACP,SAAS;AAAA,QACT,WAAW,CAAC,MAAM,EAAE,QAAQ,YAAY,oBAAoB;AAAA,QAC5D,MAAK;AAAA,QACL,cAAW;AAAA,QACX,UAAU;AAAA;AAAA,IACZ,CACF;AAAA,EACF,CACF;AAEJ;",
-  "names": []
+  "mappings": ";;;;;;;;;AAAA,SAAyCA,MAAMC,YAAYC,YAAYC,oBAAoB;AAC3F,SAASC,sBAAsB;AAC/B,SAASC,wBAAwB;AACjC,OAAOC,UAAU;AACjB,SAASC,eAAe;AACxB,SAASC,gBAAgBC,sBAAsB;AAC/C,SAASC,mBAAmB;AAE5B,MAAMC,gBAAgBL,KACpB,YACA,SACA,UACA,WACA,YACA,sBACA,eACA,WACF;AAEA,MAAMM,iBAAiBN,KAAK,wDAAwD;AAkC7E,MAAMO,mBAA4DC,WAAU;AACjF,QAAM,CAACC,OAAOC,IAAI,IAAIf,WAAWa,OAAO,CAAC,YAAY,SAAS,OAAO,CAAC;AAEtE,QAAM,CAACG,QAAQC,SAAS,IAAIf,aAAa,KAAK;AAG9C,QAAMgB,YAAYd,iBAAiBI,cAAc;AAGjD,QAAMW,SAASlB,WAAW,MAAM;AAC9B,QAAIiB,UAAU,GAAG;AACf,aAAO,CAACF,OAAO;IACjB;AACA,WAAOA,OAAO;EAChB,CAAC;AAGD,QAAMI,sBAAsBA,MAAM;AAChCH,cAAU,KAAK;EACjB;AAGAd,iBAAe,MAAM;AACnB,QAAI,CAACe,UAAU,KAAKF,OAAO,GAAG;AAC5BC,gBAAU,KAAK;IACjB;EACF,CAAC;AAGD,QAAMI,iBAAiBA,MAAM;AAC3B,QAAIH,UAAU,KAAKC,OAAO,GAAG;AAC3B,aAAO;IACT;AACA,WAAOG;EACT;AAEA,QAAMC,eAAeA,MAAMjB,QAAQK,gBAAgBG,MAAMU,KAAK;AAE9D,SAAAC,kBACGlB,eAAemB,UAAQ;IAACC,OAAO;MAAEX;MAAQC;IAAU;IAAC,IAAAW,WAAA;AAAA,UAAAC,OAAAC,QAAA;AAAAC,eAAAF,MAAAG,aAE7CjB,MAAI;QAAA,0BAAA;QAAA,KAAA,OAAA,IAAA;AAAA,iBAEDQ,aAAa;QAAC;QAAA,IACrBU,QAAK;AAAA,iBAAExB,YAAYK,MAAMmB,OAAO;YAAE,gBAAgBZ,eAAe;UAAE,CAAC;QAAC;MAAA,CAAA,GAAA,OAAA,IAAA;AAAAa,eAAAL,MAAA,MAEpEf,MAAMc,UAAQ,IAAA;AAAAM,eAAAL,MAAAJ,kBACd1B,MAAI;QAAA,IAACoC,OAAI;AAAA,iBAAEC,OAAA,MAAA,CAAA,CAAA,CAAClB,UAAU,CAAC,EAAA,KAAIC,OAAO;QAAC;QAAA,IAAAS,WAAA;AAAA,cAAAS,QAAAC,OAAA;AAAAD,gBAAAE,YAIpBC,OAAMA,EAAEC,QAAQ,YAAYrB,oBAAoB;AAACiB,gBAAAK,UADpDtB;AAAmBuB,sBAAAN,OADrB3B,aAAa;AAAA,iBAAA2B;QAAA;MAAA,CAAA,GAAA,IAAA;AAAA,aAAAR;IAAA;EAAA,CAAA;AAWhC;AAAEe,iBAAA,CAAA,SAAA,SAAA,CAAA;",
+  "names": ["Show", "splitProps", "createMemo", "createSignal", "useBeforeLeave", "createMediaQuery", "clsx", "twMerge", "SidebarContext", "SM_MEDIA_QUERY", "mergeStyles", "backdropClass", "containerClass", "SidebarContainer", "props", "local", "rest", "toggle", "setToggle", "isDesktop", "isOpen", "handleBackdropClick", "getPaddingLeft", "undefined", "getClassName", "class", "_$createComponent", "Provider", "value", "children", "_el$", "_tmpl$2", "_$spread", "_$mergeProps", "style", "_$insert", "when", "_$memo", "_el$2", "_tmpl$", "$$keydown", "e", "key", "$$click", "_$className", "_$delegateEvents"]
 }

package/dist/components/layout/sidebar/SidebarContext.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SidebarContext.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/sidebar/SidebarContext.ts"],"names":[],"mappings":"AAAA,OAAO,EAA6B,KAAK,QAAQ,EAAE,KAAK,MAAM,EAAE,MAAM,UAAU,CAAC;AAEjF;;;GAGG;AACH,eAAO,MAAM,cAAc,uBAAuB,CAAC;AAEnD;;;;;;;GAOG;AACH,MAAM,WAAW,mBAAmB;IAClC,MAAM,EAAE,QAAQ,CAAC,OAAO,CAAC,CAAC;IAC1B,SAAS,EAAE,MAAM,CAAC,OAAO,CAAC,CAAC;CAC5B;AAED,eAAO,MAAM,cAAc,6DAAuC,CAAC;AAEnE,wBAAgB,iBAAiB,IAAI,mBAAmB,CAMvD;AAED;;;;;GAKG;AACH,wBAAgB,yBAAyB,IAAI,mBAAmB,GAAG,SAAS,CAE3E"}

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

@@ -1,7 +1,6 @@
 {
   "version": 3,
   "sources": ["../../../../src/components/layout/sidebar/SidebarContext.ts"],
-  "sourcesContent": ["import { createContext, useContext, type Accessor, type Setter } from \"solid-js\";\n\n/**\n * Tailwind sm: breakpoint\uC5D0 \uD574\uB2F9\uD558\uB294 \uBBF8\uB514\uC5B4 \uCFFC\uB9AC\n * @see tailwind.config.ts screens.sm (640px)\n */\nexport const SM_MEDIA_QUERY = \"(min-width: 640px)\";\n\n/**\n * \uC0AC\uC774\uB4DC\uBC14 toggle \uC0C1\uD0DC \uACF5\uC720 Context\n *\n * @remarks\n * toggle \uC2DC\uB9E8\uD2F1:\n * - `toggle=false` (\uAE30\uBCF8\uAC12): \uB370\uC2A4\uD06C\uD0D1(640px+)\uC5D0\uC11C \uC5F4\uB9BC, \uBAA8\uBC14\uC77C(640px-)\uC5D0\uC11C \uB2EB\uD798\n * - `toggle=true`: \uB370\uC2A4\uD06C\uD0D1(640px+)\uC5D0\uC11C \uB2EB\uD798, \uBAA8\uBC14\uC77C(640px-)\uC5D0\uC11C \uC5F4\uB9BC (\uC624\uBC84\uB808\uC774)\n */\nexport interface SidebarContextValue {\n  toggle: Accessor<boolean>;\n  setToggle: Setter<boolean>;\n}\n\nexport const SidebarContext = createContext<SidebarContextValue>();\n\nexport function useSidebarContext(): SidebarContextValue {\n  const context = useContext(SidebarContext);\n  if (!context) {\n    throw new Error(\"useSidebarContext\uB294 SidebarContainer \uB0B4\uBD80\uC5D0\uC11C\uB9CC \uC0AC\uC6A9\uD560 \uC218 \uC788\uC2B5\uB2C8\uB2E4\");\n  }\n  return context;\n}\n\n/**\n * SidebarContext\uB97C \uC120\uD0DD\uC801\uC73C\uB85C \uC0AC\uC6A9 (Context \uC5C6\uC73C\uBA74 undefined \uBC18\uD658)\n *\n * @remarks\n * SidebarContainer \uC678\uBD80\uC5D0\uC11C\uB3C4 \uC0AC\uC6A9 \uAC00\uB2A5\uD55C \uCEF4\uD3EC\uB10C\uD2B8(\uC608: Topbar)\uC5D0\uC11C \uC0AC\uC6A9\n */\nexport function useSidebarContextOptional(): SidebarContextValue | undefined {\n  return useContext(SidebarContext);\n}\n"],
   "mappings": "AAAA,SAAS,eAAe,kBAA8C;AAM/D,MAAM,iBAAiB;AAevB,MAAM,iBAAiB,cAAmC;AAE1D,SAAS,oBAAyC;AACvD,QAAM,UAAU,WAAW,cAAc;AACzC,MAAI,CAAC,SAAS;AACZ,UAAM,IAAI,MAAM,4HAAsD;AAAA,EACxE;AACA,SAAO;AACT;AAQO,SAAS,4BAA6D;AAC3E,SAAO,WAAW,cAAc;AAClC;",
   "names": []
 }

package/dist/components/layout/sidebar/SidebarMenu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SidebarMenu.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/sidebar/SidebarMenu.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,SAAS,EACd,KAAK,GAAG,EAUT,MAAM,UAAU,CAAC;AAIlB,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAiBvD,MAAM,WAAW,eAAe;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC5B,QAAQ,CAAC,EAAE,eAAe,EAAE,CAAC;CAC9B;AAED,MAAM,WAAW,gBAAiB,SAAQ,IAAI,CAAC,GAAG,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC;IAC5F;;OAEG;IACH,KAAK,EAAE,eAAe,EAAE,CAAC;CAC1B;AASD;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,eAAO,MAAM,WAAW,EAAE,SAAS,CAAC,gBAAgB,CA4CnD,CAAC"}

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

@@ -1,29 +1,18 @@
-import {
-  For,
-  Show,
-  splitProps,
-  createSignal,
-  createMemo,
-  createEffect,
-  createContext,
-  useContext
-} from "solid-js";
+import { template as _$template } from "solid-js/web";
+import { insert as _$insert } from "solid-js/web";
+import { createComponent as _$createComponent } from "solid-js/web";
+import { className as _$className } from "solid-js/web";
+import { spread as _$spread } from "solid-js/web";
+import { mergeProps as _$mergeProps } from "solid-js/web";
+var _tmpl$ = /* @__PURE__ */ _$template(`<div><div>MENU`), _tmpl$2 = /* @__PURE__ */ _$template(`<span class=truncate>`);
+import { For, Show, splitProps, createSignal, createMemo, createEffect, createContext, useContext } from "solid-js";
 import { useLocation, useNavigate } from "@solidjs/router";
 import clsx from "clsx";
 import { twMerge } from "tailwind-merge";
-import { Icon } from "../../display/Icon";
-import { List } from "../../data/list/List";
-import { ListItem } from "../../data/list/ListItem";
-const headerClass = clsx(
-  "px-4",
-  "py-2",
-  "text-xs",
-  "font-semibold",
-  "text-base-500",
-  "dark:text-base-400",
-  "uppercase",
-  "tracking-wider"
-);
+import { Icon } from "../../display/Icon.js";
+import { List } from "../../data/list/List.js";
+import { ListItem } from "../../data/list/ListItem.js";
+const headerClass = clsx("px-4", "py-2", "text-xs", "font-semibold", "text-base-500", "dark:text-base-400", "uppercase", "tracking-wider");
 const MenuContext = createContext();
 const SidebarMenu = (props) => {
   const [local, rest] = splitProps(props, ["menus", "class"]);
@@ -46,7 +35,36 @@ const SidebarMenu = (props) => {
     return selectedPath ? new Set(selectedPath.slice(0, -1)) : /* @__PURE__ */ new Set();
   });
   const getClassName = () => twMerge("flex-1 overflow-y-auto", local.class);
-  return /* @__PURE__ */ React.createElement(MenuContext.Provider, { value: { initialOpenItems } }, /* @__PURE__ */ React.createElement("div", { ...rest, "data-sidebar-menu": true, class: getClassName() }, /* @__PURE__ */ React.createElement("div", { class: headerClass }, "MENU"), /* @__PURE__ */ React.createElement(List, { inset: true }, /* @__PURE__ */ React.createElement(For, { each: local.menus }, (menu) => /* @__PURE__ */ React.createElement(MenuItem, { menu, size: "lg" })))));
+  return _$createComponent(MenuContext.Provider, {
+    value: {
+      initialOpenItems
+    },
+    get children() {
+      var _el$ = _tmpl$(), _el$2 = _el$.firstChild;
+      _$spread(_el$, _$mergeProps(rest, {
+        "data-sidebar-menu": "",
+        get ["class"]() {
+          return getClassName();
+        }
+      }), false, true);
+      _$className(_el$2, headerClass);
+      _$insert(_el$, _$createComponent(List, {
+        inset: true,
+        get children() {
+          return _$createComponent(For, {
+            get each() {
+              return local.menus;
+            },
+            children: (menu) => _$createComponent(MenuItem, {
+              menu,
+              size: "lg"
+            })
+          });
+        }
+      }), null);
+      return _el$;
+    }
+  });
 };
 const MenuItem = (props) => {
   const location = useLocation();
@@ -76,7 +94,55 @@ const MenuItem = (props) => {
       }
     }
   };
-  return /* @__PURE__ */ React.createElement(ListItem, { selected: isSelected(), open: open(), onOpenChange: setOpen, onClick: handleClick, size: props.size }, /* @__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(MenuItem, { menu: child })))));
+  return _$createComponent(ListItem, {
+    get selected() {
+      return isSelected();
+    },
+    get open() {
+      return open();
+    },
+    onOpenChange: setOpen,
+    onClick: handleClick,
+    get size() {
+      return props.size;
+    },
+    get children() {
+      return [_$createComponent(Show, {
+        get when() {
+          return props.menu.icon;
+        },
+        get children() {
+          return _$createComponent(Icon, {
+            get icon() {
+              return props.menu.icon;
+            }
+          });
+        }
+      }), (() => {
+        var _el$3 = _tmpl$2();
+        _$insert(_el$3, () => props.menu.title);
+        return _el$3;
+      })(), _$createComponent(Show, {
+        get when() {
+          return hasChildren();
+        },
+        get children() {
+          return _$createComponent(ListItem.Children, {
+            get children() {
+              return _$createComponent(For, {
+                get each() {
+                  return props.menu.children;
+                },
+                children: (child) => _$createComponent(MenuItem, {
+                  menu: child
+                })
+              });
+            }
+          });
+        }
+      })];
+    }
+  });
 };
 export {
   SidebarMenu

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

@@ -1,7 +1,6 @@
 {
   "version": 3,
   "sources": ["../../../../src/components/layout/sidebar/SidebarMenu.tsx"],
-  "sourcesContent": ["import {\n  type Component,\n  type JSX,\n  For,\n  Show,\n  splitProps,\n  createSignal,\n  createMemo,\n  createEffect,\n  createContext,\n  useContext,\n  type Accessor,\n} from \"solid-js\";\nimport { useLocation, useNavigate } from \"@solidjs/router\";\nimport clsx from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\nimport type { IconProps } from \"@tabler/icons-solidjs\";\nimport type { ComponentSize } from \"../../../styles/tokens.styles\";\nimport { Icon } from \"../../display/Icon\";\nimport { List } from \"../../data/list/List\";\nimport { ListItem } from \"../../data/list/ListItem\";\n\nconst headerClass = clsx(\n  \"px-4\",\n  \"py-2\",\n  \"text-xs\",\n  \"font-semibold\",\n  \"text-base-500\",\n  \"dark:text-base-400\",\n  \"uppercase\",\n  \"tracking-wider\",\n);\n\nexport interface SidebarMenuItem {\n  title: string;\n  href?: string;\n  icon?: Component<IconProps>;\n  children?: SidebarMenuItem[];\n}\n\nexport interface SidebarMenuProps extends Omit<JSX.HTMLAttributes<HTMLDivElement>, \"children\"> {\n  /**\n   * \uBA54\uB274 \uC544\uC774\uD15C \uBC30\uC5F4\n   */\n  menus: SidebarMenuItem[];\n}\n\n// \uB0B4\uBD80 Context: \uCD08\uAE30 \uD3BC\uCE68 \uC0C1\uD0DC \uACF5\uC720\ninterface MenuContextValue {\n  initialOpenItems: Accessor<Set<SidebarMenuItem>>;\n}\n\nconst MenuContext = createContext<MenuContextValue>();\n\n/**\n * \uC0AC\uC774\uB4DC\uBC14 \uBA54\uB274 \uCEF4\uD3EC\uB10C\uD2B8\n *\n * @remarks\n * - \"MENU\" \uD5E4\uB354 \uACE0\uC815 \uD45C\uC2DC\n * - List/ListItem\uC73C\uB85C \uC7AC\uADC0\uC801 \uBA54\uB274 \uB80C\uB354\uB9C1\n * - pathname \uC815\uD655 \uC77C\uCE58\uB85C \uC120\uD0DD \uC0C1\uD0DC \uD310\uB2E8 (query string \uBB34\uC2DC)\n * - \uC120\uD0DD\uB41C \uBA54\uB274\uC758 \uBD80\uBAA8\uB4E4\uC740 \uCD08\uAE30 \uB80C\uB354\uB9C1 \uC2DC \uC790\uB3D9 \uD3BC\uCE68\n * - \uC678\uBD80 \uB9C1\uD06C(://\uD3EC\uD568)\uB294 \uC0C8 \uD0ED\uC5D0\uC11C \uC5F4\uAE30\n *\n * @example\n * ```tsx\n * <SidebarMenu menus={[\n *   { title: \"\uB300\uC2DC\uBCF4\uB4DC\", href: \"/dashboard\", icon: IconHome },\n *   {\n *     title: \"\uC124\uC815\",\n *     icon: IconSettings,\n *     children: [\n *       { title: \"\uD504\uB85C\uD544\", href: \"/settings/profile\" },\n *       { title: \"\uBCF4\uC548\", href: \"/settings/security\" },\n *     ],\n *   },\n * ]} />\n * ```\n */\nexport const SidebarMenu: Component<SidebarMenuProps> = (props) => {\n  const [local, rest] = splitProps(props, [\"menus\", \"class\"]);\n\n  const location = useLocation();\n\n  // \uD604\uC7AC pathname\uACFC \uC77C\uCE58\uD558\uB294 \uBA54\uB274\uC758 \uBD80\uBAA8\uB4E4\uC744 \uCC3E\uC544 \uD3BC\uCE68 \uC0C1\uD0DC \uACC4\uC0B0\n  const findSelectedPath = (\n    menus: SidebarMenuItem[],\n    pathname: string,\n    path: SidebarMenuItem[] = [],\n  ): SidebarMenuItem[] | null => {\n    for (const menu of menus) {\n      const currentPath = [...path, menu];\n      if (menu.href === pathname) {\n        return currentPath;\n      }\n      if (menu.children) {\n        const found = findSelectedPath(menu.children, pathname, currentPath);\n        if (found) return found;\n      }\n    }\n    return null;\n  };\n\n  // pathname \uBCC0\uACBD\uC5D0 \uBC18\uC751\uD558\uC5EC \uD3BC\uCE68 \uC0C1\uD0DC \uC7AC\uACC4\uC0B0\n  const initialOpenItems = createMemo(() => {\n    const selectedPath = findSelectedPath(local.menus, location.pathname);\n    return selectedPath\n      ? new Set(selectedPath.slice(0, -1)) // \uB9C8\uC9C0\uB9C9 \uD56D\uBAA9(\uC120\uD0DD\uB41C \uBA54\uB274)\uC740 \uC81C\uC678\uD558\uACE0 \uBD80\uBAA8\uB4E4\uB9CC \uD3BC\uCE68\n      : new Set<SidebarMenuItem>();\n  });\n\n  const getClassName = () => twMerge(\"flex-1 overflow-y-auto\", local.class);\n\n  return (\n    <MenuContext.Provider value={{ initialOpenItems }}>\n      <div {...rest} data-sidebar-menu class={getClassName()}>\n        <div class={headerClass}>MENU</div>\n        <List inset>\n          <For each={local.menus}>{(menu) => <MenuItem menu={menu} size=\"lg\" />}</For>\n        </List>\n      </div>\n    </MenuContext.Provider>\n  );\n};\n\ninterface MenuItemProps {\n  menu: SidebarMenuItem;\n  size?: ComponentSize;\n}\n\nconst MenuItem: Component<MenuItemProps> = (props) => {\n  const location = useLocation();\n  const navigate = useNavigate();\n  const menuContext = useContext(MenuContext)!;\n\n  const hasChildren = () => props.menu.children !== undefined && props.menu.children.length > 0;\n\n  // \uC678\uBD80 \uB9C1\uD06C \uC5EC\uBD80 \uD655\uC778\n  const isExternalLink = () => props.menu.href?.includes(\"://\") ?? false;\n\n  // \uC120\uD0DD \uC0C1\uD0DC\n  const isSelected = () => props.menu.href === location.pathname;\n\n  // \uD3BC\uCE68 \uC0C1\uD0DC \uACC4\uC0B0 (object reference\uB85C \uBE44\uAD50)\n  const shouldBeOpen = () => menuContext.initialOpenItems().has(props.menu);\n\n  const [open, setOpen] = createSignal(false);\n\n  // pathname \uBCC0\uACBD\uC5D0 \uBC18\uC751\uD558\uC5EC \uD3BC\uCE68 \uC0C1\uD0DC \uC5C5\uB370\uC774\uD2B8\n  createEffect(() => {\n    if (shouldBeOpen()) {\n      setOpen(true);\n    }\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    <ListItem selected={isSelected()} open={open()} onOpenChange={setOpen} onClick={handleClick} size={props.size}>\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}>{(child) => <MenuItem menu={child} />}</For>\n        </ListItem.Children>\n      </Show>\n    </ListItem>\n  );\n};\n"],
-  "mappings": "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",
-  "names": []
+  "mappings": ";;;;;;;AAAA,SAGEA,KACAC,MACAC,YACAC,cACAC,YACAC,cACAC,eACAC,kBAEK;AACP,SAASC,aAAaC,mBAAmB;AACzC,OAAOC,UAAU;AACjB,SAASC,eAAe;AAGxB,SAASC,YAAY;AACrB,SAASC,YAAY;AACrB,SAASC,gBAAgB;AAEzB,MAAMC,cAAcL,KAClB,QACA,QACA,WACA,iBACA,iBACA,sBACA,aACA,gBACF;AAqBA,MAAMM,cAAcV,cAAgC;AA2B7C,MAAMW,cAA4CC,WAAU;AACjE,QAAM,CAACC,OAAOC,IAAI,IAAIlB,WAAWgB,OAAO,CAAC,SAAS,OAAO,CAAC;AAE1D,QAAMG,WAAWb,YAAY;AAG7B,QAAMc,mBAAmBA,CACvBC,OACAC,UACAC,OAA0B,CAAA,MACG;AAC7B,eAAWC,QAAQH,OAAO;AACxB,YAAMI,cAAc,CAAC,GAAGF,MAAMC,IAAI;AAClC,UAAIA,KAAKE,SAASJ,UAAU;AAC1B,eAAOG;MACT;AACA,UAAID,KAAKG,UAAU;AACjB,cAAMC,QAAQR,iBAAiBI,KAAKG,UAAUL,UAAUG,WAAW;AACnE,YAAIG,MAAO,QAAOA;MACpB;IACF;AACA,WAAO;EACT;AAGA,QAAMC,mBAAmB3B,WAAW,MAAM;AACxC,UAAM4B,eAAeV,iBAAiBH,MAAMI,OAAOF,SAASG,QAAQ;AACpE,WAAOQ,eACH,IAAIC,IAAID,aAAaE,MAAM,GAAG,EAAE,CAAC,IACjC,oBAAID,IAAqB;EAC/B,CAAC;AAED,QAAME,eAAeA,MAAMxB,QAAQ,0BAA0BQ,MAAMiB,KAAK;AAExE,SAAAC,kBACGrB,YAAYsB,UAAQ;IAACC,OAAO;MAAER;IAAiB;IAAC,IAAAF,WAAA;AAAA,UAAAW,OAAAC,OAAA,GAAAC,QAAAF,KAAAG;AAAAC,eAAAJ,MAAAK,aACtCzB,MAAI;QAAA,qBAAA;QAAA,KAAA,OAAA,IAAA;AAAA,iBAA2Be,aAAa;QAAC;MAAA,CAAA,GAAA,OAAA,IAAA;AAAAW,kBAAAJ,OACxC3B,WAAW;AAAAgC,eAAAP,MAAAH,kBACtBxB,MAAI;QAACmC,OAAK;QAAA,IAAAnB,WAAA;AAAA,iBAAAQ,kBACRrC,KAAG;YAAA,IAACiD,OAAI;AAAA,qBAAE9B,MAAMI;YAAK;YAAAM,UAAIH,UAAIW,kBAAMa,UAAQ;cAACxB;cAAYyB,MAAI;YAAA,CAAA;UAAQ,CAAA;QAAA;MAAA,CAAA,GAAA,IAAA;AAAA,aAAAX;IAAA;EAAA,CAAA;AAK/E;AAOA,MAAMU,WAAsChC,WAAU;AACpD,QAAMG,WAAWb,YAAY;AAC7B,QAAM4C,WAAW3C,YAAY;AAC7B,QAAM4C,cAAc9C,WAAWS,WAAW;AAE1C,QAAMsC,cAAcA,MAAMpC,MAAMQ,KAAKG,aAAa0B,UAAarC,MAAMQ,KAAKG,SAAS2B,SAAS;AAG5F,QAAMC,iBAAiBA,MAAA;;AAAMvC,wBAAMQ,KAAKE,SAAXV,mBAAiBwC,SAAS,WAAU;;AAGjE,QAAMC,aAAaA,MAAMzC,MAAMQ,KAAKE,SAASP,SAASG;AAGtD,QAAMoC,eAAeA,MAAMP,YAAYtB,iBAAiB,EAAE8B,IAAI3C,MAAMQ,IAAI;AAExE,QAAM,CAACoC,MAAMC,OAAO,IAAI5D,aAAa,KAAK;AAG1CE,eAAa,MAAM;AACjB,QAAIuD,aAAa,GAAG;AAClBG,cAAQ,IAAI;IACd;EACF,CAAC;AAED,QAAMC,cAAcA,MAAM;AACxB,QAAIV,YAAY,GAAG;AACjBS,cAASE,OAAM,CAACA,CAAC;IACnB,WAAW/C,MAAMQ,KAAKE,SAAS2B,QAAW;AACxC,UAAIE,eAAe,GAAG;AACpBS,eAAOJ,KAAK5C,MAAMQ,KAAKE,MAAM,UAAU,qBAAqB;MAC9D,OAAO;AACLwB,iBAASlC,MAAMQ,KAAKE,IAAI;MAC1B;IACF;EACF;AAEA,SAAAS,kBACGvB,UAAQ;IAAA,IAACqD,WAAQ;AAAA,aAAER,WAAW;IAAC;IAAA,IAAEG,OAAI;AAAA,aAAEA,KAAK;IAAC;IAAEM,cAAcL;IAASM,SAASL;IAAW,IAAEb,OAAI;AAAA,aAAEjC,MAAMiC;IAAI;IAAA,IAAAtB,WAAA;AAAA,aAAA,CAAAQ,kBAC1GpC,MAAI;QAAA,IAACqE,OAAI;AAAA,iBAAEpD,MAAMQ,KAAK6C;QAAI;QAAA,IAAA1C,WAAA;AAAA,iBAAAQ,kBACxBzB,MAAI;YAAA,IAAC2D,OAAI;AAAA,qBAAErD,MAAMQ,KAAK6C;YAAI;UAAA,CAAA;QAAA;MAAA,CAAA,IAAA,MAAA;AAAA,YAAAC,QAAAC,QAAA;AAAA1B,iBAAAyB,OAAA,MAELtD,MAAMQ,KAAKgD,KAAK;AAAA,eAAAF;MAAA,GAAA,GAAAnC,kBACvCpC,MAAI;QAAA,IAACqE,OAAI;AAAA,iBAAEhB,YAAY;QAAC;QAAA,IAAAzB,WAAA;AAAA,iBAAAQ,kBACtBvB,SAAS6D,UAAQ;YAAA,IAAA9C,WAAA;AAAA,qBAAAQ,kBACfrC,KAAG;gBAAA,IAACiD,OAAI;AAAA,yBAAE/B,MAAMQ,KAAKG;gBAAQ;gBAAAA,UAAI+C,WAAKvC,kBAAMa,UAAQ;kBAACxB,MAAMkD;gBAAK,CAAA;cAAI,CAAA;YAAA;UAAA,CAAA;QAAA;MAAA,CAAA,CAAA;IAAA;EAAA,CAAA;AAK/E;",
+  "names": ["For", "Show", "splitProps", "createSignal", "createMemo", "createEffect", "createContext", "useContext", "useLocation", "useNavigate", "clsx", "twMerge", "Icon", "List", "ListItem", "headerClass", "MenuContext", "SidebarMenu", "props", "local", "rest", "location", "findSelectedPath", "menus", "pathname", "path", "menu", "currentPath", "href", "children", "found", "initialOpenItems", "selectedPath", "Set", "slice", "getClassName", "class", "_$createComponent", "Provider", "value", "_el$", "_tmpl$", "_el$2", "firstChild", "_$spread", "_$mergeProps", "_$className", "_$insert", "inset", "each", "MenuItem", "size", "navigate", "menuContext", "hasChildren", "undefined", "length", "isExternalLink", "includes", "isSelected", "shouldBeOpen", "has", "open", "setOpen", "handleClick", "v", "window", "selected", "onOpenChange", "onClick", "when", "icon", "_el$3", "_tmpl$2", "title", "Children", "child"]
 }

package/dist/components/layout/sidebar/SidebarUser.d.ts

@@ -0,0 +1,48 @@
+import { type Component, type JSX } from "solid-js";
+import type { IconProps as TablerIconProps } from "@tabler/icons-solidjs";
+export interface SidebarUserMenu {
+    title: string;
+    onClick: () => void;
+}
+export interface SidebarUserProps extends Omit<JSX.HTMLAttributes<HTMLDivElement>, "onClick"> {
+    /**
+     * 사용자 이름 (필수)
+     */
+    name: string;
+    /**
+     * 아바타 아이콘 (미입력 시 기본 사용자 아이콘)
+     */
+    icon?: Component<TablerIconProps>;
+    /**
+     * 부가 정보 (이메일 등, 미입력 시 이름만 표시)
+     */
+    description?: string;
+    /**
+     * 드롭다운 메뉴 (있을 때만 클릭 가능)
+     */
+    menus?: SidebarUserMenu[];
+}
+/**
+ * 사이드바 사용자 정보 컴포넌트
+ *
+ * @remarks
+ * - name, icon, description props로 사용자 정보 표시
+ * - icon 미입력 시 기본 사용자 아이콘 표시
+ * - description 미입력 시 이름만 세로 중앙 정렬
+ * - menus가 있을 때만 클릭 가능 및 ripple 효과 적용
+ * - 클릭 시 드롭다운 메뉴 펼침/접힘
+ *
+ * @example
+ * ```tsx
+ * <SidebarUser
+ *   name="홍길동"
+ *   description="hong@example.com"
+ *   menus={[
+ *     { title: "프로필", onClick: () => navigate("/profile") },
+ *     { title: "로그아웃", onClick: handleLogout },
+ *   ]}
+ * />
+ * ```
+ */
+export declare const SidebarUser: Component<SidebarUserProps>;
+//# sourceMappingURL=SidebarUser.d.ts.map

package/dist/components/layout/sidebar/SidebarUser.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SidebarUser.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/sidebar/SidebarUser.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,SAAS,EAAqB,KAAK,GAAG,EAAoB,MAAM,UAAU,CAAC;AAGzF,OAAO,KAAK,EAAE,SAAS,IAAI,eAAe,EAAE,MAAM,uBAAuB,CAAC;AA2B1E,MAAM,WAAW,eAAe;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,MAAM,WAAW,gBAAiB,SAAQ,IAAI,CAAC,GAAG,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,SAAS,CAAC;IAC3F;;OAEG;IACH,IAAI,EAAE,MAAM,CAAC;IAEb;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC,eAAe,CAAC,CAAC;IAElC;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;OAEG;IACH,KAAK,CAAC,EAAE,eAAe,EAAE,CAAC;CAC3B;AAED;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,eAAO,MAAM,WAAW,EAAE,SAAS,CAAC,gBAAgB,CAuDnD,CAAC"}

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

@@ -1,25 +1,31 @@
+import { template as _$template } from "solid-js/web";
+import { delegateEvents as _$delegateEvents } from "solid-js/web";
+import { setAttribute as _$setAttribute } from "solid-js/web";
+import { effect as _$effect } from "solid-js/web";
+import { insert as _$insert } from "solid-js/web";
+import { createComponent as _$createComponent } from "solid-js/web";
+import { memo as _$memo } from "solid-js/web";
+import { className as _$className } from "solid-js/web";
+import { use as _$use } from "solid-js/web";
+import { spread as _$spread } from "solid-js/web";
+import { mergeProps as _$mergeProps } from "solid-js/web";
+var _tmpl$ = /* @__PURE__ */ _$template(`<div class="flex flex-col"><span class=font-semibold></span><span>`), _tmpl$2 = /* @__PURE__ */ _$template(`<div><button type=button><div class="relative flex flex-1 items-center gap-3"><div>`), _tmpl$3 = /* @__PURE__ */ _$template(`<span class=font-semibold>`);
 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";
+import { IconUser } from "@tabler/icons-solidjs";
+import { ripple } from "../../../directives/ripple.js";
+import { Collapse } from "../../disclosure/Collapse.js";
+import { List } from "../../data/list/List.js";
+import { ListItem } from "../../data/list/ListItem.js";
+import { Icon } from "../../display/Icon.js";
 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 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 avatarClass = clsx("flex size-10 items-center justify-center rounded-full", "bg-primary-500 text-white");
 const SidebarUser = (props) => {
-  const [local, rest] = splitProps(props, ["children", "class", "menus"]);
+  const [local, rest] = splitProps(props, ["name", "icon", "description", "class", "menus"]);
   const [open, setOpen] = createSignal(false);
   const hasMenus = () => local.menus !== void 0 && local.menus.length > 0;
   const handleClick = () => {
@@ -33,18 +39,85 @@ const SidebarUser = (props) => {
   };
   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))))));
+  return (() => {
+    var _el$ = _tmpl$2(), _el$2 = _el$.firstChild, _el$3 = _el$2.firstChild, _el$4 = _el$3.firstChild;
+    _$spread(_el$, _$mergeProps(rest, {
+      "data-sidebar-user": "",
+      get ["class"]() {
+        return getContainerClassName();
+      }
+    }), false, true);
+    _el$2.$$click = handleClick;
+    _$use(ripple, _el$2, () => hasMenus());
+    _$className(_el$4, avatarClass);
+    _$insert(_el$4, _$createComponent(Icon, {
+      get icon() {
+        return local.icon ?? IconUser;
+      },
+      "class": "size-6"
+    }));
+    _$insert(_el$3, _$createComponent(Show, {
+      get when() {
+        return local.description;
+      },
+      get fallback() {
+        return (() => {
+          var _el$8 = _tmpl$3();
+          _$insert(_el$8, () => local.name);
+          return _el$8;
+        })();
+      },
+      get children() {
+        var _el$5 = _tmpl$(), _el$6 = _el$5.firstChild, _el$7 = _el$6.nextSibling;
+        _$insert(_el$6, () => local.name);
+        _$insert(_el$7, () => local.description);
+        _$effect(() => _$className(_el$7, clsx("text-sm", "text-base-500 dark:text-base-400")));
+        return _el$5;
+      }
+    }), null);
+    _$insert(_el$, _$createComponent(Show, {
+      get when() {
+        return hasMenus();
+      },
+      get children() {
+        return _$createComponent(Collapse, {
+          get open() {
+            return open();
+          },
+          get children() {
+            return _$createComponent(List, {
+              inset: true,
+              get children() {
+                return _$createComponent(For, {
+                  get each() {
+                    return local.menus;
+                  },
+                  children: (menu) => _$createComponent(ListItem, {
+                    onClick: () => handleMenuClick(menu),
+                    get children() {
+                      return menu.title;
+                    }
+                  })
+                });
+              }
+            });
+          }
+        });
+      }
+    }), null);
+    _$effect((_p$) => {
+      var _v$ = getHeaderClassName(), _v$2 = hasMenus() ? open() : void 0;
+      _v$ !== _p$.e && _$className(_el$2, _p$.e = _v$);
+      _v$2 !== _p$.t && _$setAttribute(_el$2, "aria-expanded", _p$.t = _v$2);
+      return _p$;
+    }, {
+      e: void 0,
+      t: void 0
+    });
+    return _el$;
+  })();
 };
+_$delegateEvents(["click"]);
 export {
   SidebarUser
 };

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

@@ -1,7 +1,6 @@
 {
   "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": []
+  "mappings": "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",
+  "names": ["createSignal", "For", "Show", "splitProps", "clsx", "twMerge", "IconUser", "ripple", "Collapse", "List", "ListItem", "Icon", "containerClass", "headerClass", "headerReadonlyClass", "avatarClass", "SidebarUser", "props", "local", "rest", "open", "setOpen", "hasMenus", "menus", "undefined", "length", "handleClick", "v", "handleMenuClick", "menu", "onClick", "getHeaderClassName", "getContainerClassName", "class", "_el$", "_tmpl$2", "_el$2", "firstChild", "_el$3", "_el$4", "_$spread", "_$mergeProps", "$$click", "_$use", "_$className", "_$insert", "_$createComponent", "icon", "when", "description", "fallback", "_el$8", "_tmpl$3", "name", "children", "_el$5", "_tmpl$", "_el$6", "_el$7", "nextSibling", "_$effect", "inset", "each", "title", "_p$", "_v$", "_v$2", "e", "t", "_$setAttribute", "_$delegateEvents"]
 }

package/dist/components/layout/topbar/Topbar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Topbar.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/topbar/Topbar.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,GAAG,EAAE,KAAK,eAAe,EAAoB,MAAM,UAAU,CAAC;AAO5E,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAE1C,YAAY,EAAE,oBAAoB,EAAE,MAAM,mBAAmB,CAAC;AAC9D,YAAY,EAAE,cAAc,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AACpE,YAAY,EAAE,cAAc,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAwBpE,MAAM,WAAW,WAAY,SAAQ,GAAG,CAAC,cAAc,CAAC,WAAW,CAAC;IAClE,QAAQ,EAAE,GAAG,CAAC,OAAO,CAAC;CACvB;AAED;;;;;;;;;;;;;;;;;GAiBG;AACH,UAAU,eAAgB,SAAQ,eAAe,CAAC,WAAW,CAAC;IAC5D,SAAS,EAAE,OAAO,eAAe,CAAC;IAClC,IAAI,EAAE,OAAO,UAAU,CAAC;IACxB,IAAI,EAAE,OAAO,UAAU,CAAC;CACzB;AA0BD,eAAO,MAAM,MAAM,EAAiB,eAAe,CAAC"}

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

@@ -1,13 +1,19 @@
+import { template as _$template } from "solid-js/web";
+import { insert as _$insert } from "solid-js/web";
+import { createComponent as _$createComponent } from "solid-js/web";
+import { spread as _$spread } from "solid-js/web";
+import { mergeProps as _$mergeProps } from "solid-js/web";
+var _tmpl$ = /* @__PURE__ */ _$template(`<header>`);
 import { splitProps, Show } from "solid-js";
 import { IconMenu2 } from "@tabler/icons-solidjs";
 import clsx from "clsx";
-import { Icon } from "../../display/Icon";
+import { Icon } from "../../display/Icon.js";
 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";
+import { Button } from "../../form-control/Button.js";
+import { useSidebarContextOptional } from "../sidebar/SidebarContext.js";
+import { TopbarContainer } from "./TopbarContainer.js";
+import { TopbarMenu } from "./TopbarMenu.js";
+import { TopbarUser } from "./TopbarUser.js";
 const baseClass = clsx(
   // 레이아웃
   "flex",
@@ -36,7 +42,34 @@ const TopbarBase = (props) => {
     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);
+  return (() => {
+    var _el$ = _tmpl$();
+    _$spread(_el$, _$mergeProps(rest, {
+      "data-topbar": "",
+      get ["class"]() {
+        return getClassName();
+      }
+    }), false, true);
+    _$insert(_el$, _$createComponent(Show, {
+      when: sidebarContext,
+      get children() {
+        return _$createComponent(Button, {
+          variant: "ghost",
+          onClick: handleToggle,
+          "class": "p-2",
+          "aria-label": "\uC0AC\uC774\uB4DC\uBC14 \uD1A0\uAE00",
+          get children() {
+            return _$createComponent(Icon, {
+              icon: IconMenu2,
+              size: "1.5em"
+            });
+          }
+        });
+      }
+    }), null);
+    _$insert(_el$, () => local.children, null);
+    return _el$;
+  })();
 };
 const Topbar = TopbarBase;
 Topbar.Container = TopbarContainer;