@simplysm/solid 13.0.0-beta.6 → 13.0.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@simplysm/solid",
-  "version": "13.0.0-beta.6",
+  "version": "13.0.1",
   "description": "심플리즘 패키지 - SolidJS 라이브러리",
   "repository": {
     "type": "git",
@@ -12,15 +12,22 @@
   "type": "module",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
-  "sideEffects": false,
+  "files": [
+    "dist",
+    "src",
+    "docs",
+    "tailwind.config.ts",
+    "tailwind.css"
+  ],
+  "sideEffects": [
+    "*.css"
+  ],
   "dependencies": {
-    "@simplysm/core-browser": "workspace:*",
-    "@simplysm/core-common": "workspace:*",
     "@solid-primitives/media": "^2.3.3",
-    "@solid-primitives/resize-observer": "^2.0.26",
-    "@solid-primitives/storage": "^4.3.1",
+    "@solid-primitives/resize-observer": "^2.1.3",
+    "@solid-primitives/storage": "^4.3.3",
     "@solidjs/router": "^0.15.4",
-    "@tabler/icons-solidjs": "^3.31.0",
+    "@tabler/icons-solidjs": "^3.36.1",
     "@tiptap/core": "^3.19.0",
     "@tiptap/extension-color": "^3.19.0",
     "@tiptap/extension-highlight": "^3.19.0",
@@ -35,12 +42,15 @@
     "@tiptap/starter-kit": "^3.19.0",
     "bwip-js": "^4.8.0",
     "clsx": "^2.1.1",
+    "consola": "^3.4.2",
     "html-to-image": "^1.11.13",
-    "jspdf": "^4.0.0",
+    "jspdf": "^4.1.0",
     "solid-js": "^1.9.11",
     "solid-tiptap": "^0.8.0",
     "tailwind-merge": "^3.4.0",
-    "tailwindcss": "^3.4.19"
+    "tailwindcss": "^3.4.19",
+    "@simplysm/core-browser": "13.0.1",
+    "@simplysm/core-common": "13.0.1"
   },
   "devDependencies": {
     "@solidjs/testing-library": "^0.8.10"
@@ -53,4 +63,4 @@
       "optional": true
     }
   }
-}
+}

package/src/components/data/list/ListItem.styles.ts

@@ -19,8 +19,8 @@ export const listItemBaseClass = clsx(
 
 // 사이즈별 스타일
 export const listItemSizeClasses: Record<ComponentSize, string> = {
-  sm: clsx("py-0.5 px-1"),
-  lg: clsx("py-1.5 px-2"),
+  sm: clsx("px-1 py-0.5"),
+  lg: clsx("px-2 py-1.5"),
 };
 
 // 선택된 상태

package/src/components/data/sheet/DataSheet.tsx

@@ -27,7 +27,7 @@ import { createControllableSignal } from "../../../hooks/createControllableSigna
 import { Icon } from "../../display/Icon";
 import { Checkbox } from "../../form-control/checkbox/Checkbox";
 import { Pagination } from "../Pagination";
-import { usePersisted } from "../../../hooks/usePersisted";
+import { useSyncConfig } from "../../../hooks/useSyncConfig";
 import { DialogContext } from "../../disclosure/DialogContext";
 import "./DataSheet.css";
 import {
@@ -110,11 +110,11 @@ export const DataSheet: DataSheetComponent = <T,>(props: DataSheetProps<T>) => {
     ),
   );
 
-  // #region Config (usePersisted)
+  // #region Config (useSyncConfig)
   /* eslint-disable solid/reactivity -- persistKey는 정적 값으로 컴포넌트 마운트 시 한 번만 사용됨 */
   const [config, setConfig] =
     local.persistKey != null && local.persistKey !== ""
-      ? usePersisted<DataSheetConfig>(`sheet.${local.persistKey}`, { columnRecord: {} })
+      ? useSyncConfig<DataSheetConfig>(`sheet.${local.persistKey}`, { columnRecord: {} })
       : createSignal<DataSheetConfig>({ columnRecord: {} });
   /* eslint-enable solid/reactivity */
 

package/src/components/display/Echarts.tsx

@@ -1,11 +1,11 @@
-import { type Component, createEffect, onCleanup, splitProps, type JSX } from "solid-js";
+import { type Component, createEffect, createSignal, onCleanup, splitProps, type JSX } from "solid-js";
 import { createResizeObserver } from "@solid-primitives/resize-observer";
-import * as echarts from "echarts";
+import type * as echartsType from "echarts";
 import clsx from "clsx";
 import { twMerge } from "tailwind-merge";
 
 export interface EchartsProps extends JSX.HTMLAttributes<HTMLDivElement> {
-  option: echarts.EChartsOption;
+  option: echartsType.EChartsOption;
   loading?: boolean;
 }
 
@@ -14,31 +14,38 @@ const baseClass = clsx("block", "size-full");
 export const Echarts: Component<EchartsProps> = (props) => {
   const [local, rest] = splitProps(props, ["option", "loading", "class"]);
   let containerRef!: HTMLDivElement;
-  let chart: echarts.EChartsType;
+  let chart: echartsType.EChartsType | undefined;
+  const [ready, setReady] = createSignal(false);
 
-  // 마운트 시 차트 초기화 + 언마운트 시 정리
+  // 마운트 시 echarts 동적 로드 + 차트 초기화
   createEffect(() => {
-    chart = echarts.init(containerRef, null, { renderer: "svg" });
-    onCleanup(() => chart.dispose());
+    void import("echarts").then((echarts) => {
+      chart = echarts.init(containerRef, null, { renderer: "svg" });
+      setReady(true);
+    });
+
+    onCleanup(() => chart?.dispose());
   });
 
   // option 변경 감지
   createEffect(() => {
-    chart.setOption(local.option);
+    if (!ready()) return;
+    chart!.setOption(local.option);
   });
 
   // loading 상태 변경 감지
   createEffect(() => {
+    if (!ready()) return;
     if (local.loading) {
-      chart.showLoading();
+      chart!.showLoading();
     } else {
-      chart.hideLoading();
+      chart!.hideLoading();
     }
   });
 
   // 컨테이너 크기 변경 감지
   createResizeObserver(containerRef, () => {
-    chart.resize();
+    chart?.resize();
   });
 
   return <div data-echarts ref={containerRef} class={twMerge(baseClass, local.class)} {...rest} />;

package/src/components/form-control/Invalid.tsx

@@ -0,0 +1,61 @@
+import { type ParentComponent, createEffect, splitProps } from "solid-js";
+import clsx from "clsx";
+import { twMerge } from "tailwind-merge";
+import "@simplysm/core-browser";
+
+export interface InvalidProps {
+  /** Validation error message. Non-empty = invalid. */
+  message?: string;
+  /** Custom class */
+  class?: string;
+}
+
+const indicatorClass = clsx(
+  "absolute left-0.5 top-0.5",
+  "size-1.5 rounded-full",
+  "bg-danger-500",
+  "pointer-events-none select-none",
+);
+
+const hiddenInputClass = clsx(
+  "absolute bottom-0 left-0.5",
+  "size-px opacity-0",
+  "pointer-events-none -z-10",
+  "select-none",
+);
+
+export const Invalid: ParentComponent<InvalidProps> = (props) => {
+  const [local, rest] = splitProps(props, ["message", "class", "children"]);
+
+  let hiddenInputEl!: HTMLInputElement;
+
+  // message 변경 시 setCustomValidity 반응형 업데이트
+  createEffect(() => {
+    const msg = local.message ?? "";
+    hiddenInputEl.setCustomValidity(msg);
+  });
+
+  const handleHiddenInputFocus = (e: FocusEvent) => {
+    const container = (e.currentTarget as HTMLElement).parentElement;
+    if (!container) return;
+    const focusable = container.findFirstFocusableChild();
+    if (focusable && focusable !== e.currentTarget) {
+      focusable.focus();
+    }
+  };
+
+  return (
+    <div {...rest} class={twMerge("relative inline-block", local.class)}>
+      {local.children}
+      <div class={indicatorClass} style={{ display: (local.message ?? "") !== "" ? "block" : "none" }} />
+      <input
+        ref={hiddenInputEl}
+        type="text"
+        class={hiddenInputClass}
+        tabIndex={-1}
+        aria-hidden="true"
+        onFocus={handleHiddenInputFocus}
+      />
+    </div>
+  );
+};

package/src/components/form-control/editor/RichTextEditor.tsx

@@ -27,9 +27,6 @@ export interface RichTextEditorProps {
   /** 비활성화 */
   disabled?: boolean;
 
-  /** 에러 상태 */
-  error?: boolean;
-
   /** 사이즈 */
   size?: FieldSize;
 
@@ -50,9 +47,6 @@ const editorWrapperClass = clsx(
   "focus-within:border-primary-500",
 );
 
-// 에디터 에러 스타일
-const editorErrorClass = clsx("border-danger-500");
-
 // 에디터 disabled 스타일
 const editorDisabledClass = clsx("bg-base-100 dark:bg-base-800", "text-base-500");
 
@@ -72,7 +66,7 @@ const editorContentSizeClasses: Record<FieldSize, string> = {
 };
 
 export const RichTextEditor: Component<RichTextEditorProps> = (props) => {
-  const [local, rest] = splitProps(props, ["value", "onValueChange", "disabled", "error", "size", "class", "style"]);
+  const [local, rest] = splitProps(props, ["value", "onValueChange", "disabled", "size", "class", "style"]);
 
   const [value, setValue] = createControllableSignal({
     value: () => local.value ?? "",
@@ -153,8 +147,7 @@ export const RichTextEditor: Component<RichTextEditorProps> = (props) => {
     editor()?.destroy();
   });
 
-  const getWrapperClass = () =>
-    twMerge(editorWrapperClass, local.error && editorErrorClass, local.disabled && editorDisabledClass, local.class);
+  const getWrapperClass = () => twMerge(editorWrapperClass, local.disabled && editorDisabledClass, local.class);
 
   const getContentClass = () => twMerge(editorContentClass, local.size && editorContentSizeClasses[local.size]);
 

package/src/components/form-control/field/DatePicker.tsx

@@ -7,7 +7,6 @@ import {
   type FieldSize,
   fieldBaseClass,
   fieldSizeClasses,
-  fieldErrorClass,
   fieldInsetClass,
   fieldInsetHeightClass,
   fieldInsetSizeHeightClasses,
@@ -42,9 +41,6 @@ export interface DatePickerProps {
   /** 읽기 전용 */
   readonly?: boolean;
 
-  /** 에러 상태 */
-  error?: boolean;
-
   /** 사이즈 */
   size?: FieldSize;
 
@@ -165,7 +161,6 @@ export const DatePicker: Component<DatePickerProps> = (props) => {
     "title",
     "disabled",
     "readonly",
-    "error",
     "size",
     "inset",
     "class",
@@ -196,7 +191,6 @@ export const DatePicker: Component<DatePickerProps> = (props) => {
     twMerge(
       fieldBaseClass,
       local.size && fieldSizeClasses[local.size],
-      local.error && fieldErrorClass,
       local.disabled && fieldDisabledClass,
       local.inset && fieldInsetClass + " block",
       local.inset && (local.size ? fieldInsetSizeHeightClasses[local.size] : fieldInsetHeightClass),

package/src/components/form-control/field/DateTimePicker.tsx

@@ -7,7 +7,6 @@ import {
   type FieldSize,
   fieldBaseClass,
   fieldSizeClasses,
-  fieldErrorClass,
   fieldInsetClass,
   fieldInsetHeightClass,
   fieldInsetSizeHeightClasses,
@@ -42,9 +41,6 @@ export interface DateTimePickerProps {
   /** 읽기 전용 */
   readonly?: boolean;
 
-  /** 에러 상태 */
-  error?: boolean;
-
   /** 사이즈 */
   size?: FieldSize;
 
@@ -148,7 +144,6 @@ export const DateTimePicker: Component<DateTimePickerProps> = (props) => {
     "title",
     "disabled",
     "readonly",
-    "error",
     "size",
     "inset",
     "class",
@@ -179,7 +174,6 @@ export const DateTimePicker: Component<DateTimePickerProps> = (props) => {
     twMerge(
       fieldBaseClass,
       local.size && fieldSizeClasses[local.size],
-      local.error && fieldErrorClass,
       local.disabled && fieldDisabledClass,
       local.inset && fieldInsetClass + " block",
       local.inset && (local.size ? fieldInsetSizeHeightClasses[local.size] : fieldInsetHeightClass),

package/src/components/form-control/field/Field.styles.ts

@@ -13,9 +13,6 @@ export const fieldSizeClasses: Record<FieldSize, string> = {
   lg: clsx("h-field-lg", paddingLg),
 };
 
-// 에러 스타일
-export const fieldErrorClass = "border-danger-500";
-
 // inset 스타일
 export const fieldInsetClass = clsx(insetBase, "bg-primary-50 dark:bg-primary-950/30", insetFocusOutline);
 

package/src/components/form-control/field/NumberInput.tsx

@@ -6,7 +6,6 @@ import {
   type FieldSize,
   fieldBaseClass,
   fieldSizeClasses,
-  fieldErrorClass,
   fieldInsetClass,
   fieldInsetHeightClass,
   fieldInsetSizeHeightClasses,
@@ -48,9 +47,6 @@ export interface NumberInputProps {
   /** 읽기 전용 */
   readonly?: boolean;
 
-  /** 에러 상태 */
-  error?: boolean;
-
   /** 사이즈 */
   size?: FieldSize;
 
@@ -165,7 +161,6 @@ export const NumberInput: Component<NumberInputProps> = (props) => {
     "title",
     "disabled",
     "readonly",
-    "error",
     "size",
     "inset",
     "class",
@@ -241,7 +236,6 @@ export const NumberInput: Component<NumberInputProps> = (props) => {
     twMerge(
       fieldBaseClass,
       local.size && fieldSizeClasses[local.size],
-      local.error && fieldErrorClass,
       local.disabled && fieldDisabledClass,
       local.inset && fieldInsetClass,
       local.inset && (local.size ? fieldInsetSizeHeightClasses[local.size] : fieldInsetHeightClass),

package/src/components/form-control/field/TextInput.tsx

@@ -7,7 +7,6 @@ import {
   type FieldSize,
   fieldBaseClass,
   fieldSizeClasses,
-  fieldErrorClass,
   fieldInsetClass,
   fieldInsetHeightClass,
   fieldInsetSizeHeightClasses,
@@ -43,9 +42,6 @@ export interface TextInputProps {
   /** 읽기 전용 */
   readonly?: boolean;
 
-  /** 에러 상태 */
-  error?: boolean;
-
   /** 사이즈 */
   size?: FieldSize;
 
@@ -133,7 +129,6 @@ export const TextInput: Component<TextInputProps> = (props) => {
     "autocomplete",
     "disabled",
     "readonly",
-    "error",
     "size",
     "inset",
     "format",
@@ -194,7 +189,6 @@ export const TextInput: Component<TextInputProps> = (props) => {
     twMerge(
       fieldBaseClass,
       local.size && fieldSizeClasses[local.size],
-      local.error && fieldErrorClass,
       local.disabled && fieldDisabledClass,
       local.inset && fieldInsetClass,
       local.inset && (local.size ? fieldInsetSizeHeightClasses[local.size] : fieldInsetHeightClass),

package/src/components/form-control/field/Textarea.tsx

@@ -7,7 +7,6 @@ import {
   type FieldSize,
   textAreaBaseClass as fieldTextAreaBaseClass,
   textAreaSizeClasses,
-  fieldErrorClass,
   fieldInsetClass,
   fieldDisabledClass,
 } from "./Field.styles";
@@ -32,9 +31,6 @@ export interface TextareaProps {
   /** 읽기 전용 */
   readonly?: boolean;
 
-  /** 에러 상태 */
-  error?: boolean;
-
   /** 사이즈 */
   size?: FieldSize;
 
@@ -80,7 +76,6 @@ export const Textarea: Component<TextareaProps> = (props) => {
     "title",
     "disabled",
     "readonly",
-    "error",
     "size",
     "inset",
     "minRows",
@@ -143,7 +138,6 @@ export const Textarea: Component<TextareaProps> = (props) => {
     twMerge(
       fieldTextAreaBaseClass,
       local.size && textAreaSizeClasses[local.size],
-      local.error && fieldErrorClass,
       local.disabled && fieldDisabledClass,
       local.inset && fieldInsetClass,
 

package/src/components/form-control/field/TimePicker.tsx

@@ -7,7 +7,6 @@ import {
   type FieldSize,
   fieldBaseClass,
   fieldSizeClasses,
-  fieldErrorClass,
   fieldInsetClass,
   fieldInsetHeightClass,
   fieldInsetSizeHeightClasses,
@@ -36,9 +35,6 @@ export interface TimePickerProps {
   /** 읽기 전용 */
   readonly?: boolean;
 
-  /** 에러 상태 */
-  error?: boolean;
-
   /** 사이즈 */
   size?: FieldSize;
 
@@ -111,7 +107,6 @@ export const TimePicker: Component<TimePickerProps> = (props) => {
     "title",
     "disabled",
     "readonly",
-    "error",
     "size",
     "inset",
     "class",
@@ -142,7 +137,6 @@ export const TimePicker: Component<TimePickerProps> = (props) => {
     twMerge(
       fieldBaseClass,
       local.size && fieldSizeClasses[local.size],
-      local.error && fieldErrorClass,
       local.disabled && fieldDisabledClass,
       local.inset && fieldInsetClass + " block",
       local.inset && (local.size ? fieldInsetSizeHeightClasses[local.size] : fieldInsetHeightClass),

package/src/components/form-control/state-preset/StatePreset.tsx

@@ -4,7 +4,7 @@ import { twMerge } from "tailwind-merge";
 import clsx from "clsx";
 import { IconDeviceFloppy, IconStar, IconX } from "@tabler/icons-solidjs";
 import { objClone, objEqual } from "@simplysm/core-common";
-import { usePersisted } from "../../../hooks/usePersisted";
+import { useSyncConfig } from "../../../hooks/useSyncConfig";
 import { useNotification } from "../../feedback/notification/NotificationContext";
 import { Icon } from "../../display/Icon";
 import { textPlaceholder } from "../../../styles/tokens.styles";
@@ -110,7 +110,7 @@ function StatePresetInner<T>(props: StatePresetProps<T>): JSX.Element {
 
   // presetKey는 마운트 시 한 번만 설정되는 식별자이므로 즉시 평가하여 캡처
   /* eslint-disable solid/reactivity */
-  const [presets, setPresets] = usePersisted<StatePresetItem<T>[]>(`state-preset.${local.presetKey}`, []);
+  const [presets, setPresets] = useSyncConfig<StatePresetItem<T>[]>(`state-preset.${local.presetKey}`, []);
   /* eslint-enable solid/reactivity */
   const [adding, setAdding] = createSignal(false);
   const [inputValue, setInputValue] = createSignal("");

package/src/components/layout/sidebar/SidebarContainer.tsx

@@ -1,10 +1,9 @@
-import { type JSX, type ParentComponent, Show, splitProps, createMemo } from "solid-js";
+import { type JSX, type ParentComponent, 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(
@@ -32,7 +31,7 @@ export interface SidebarContainerProps extends JSX.HTMLAttributes<HTMLDivElement
  * - 부모 요소에 높이가 지정되어야 함 (`h-full` 사용)
  * - 콘텐츠 영역의 `overflow-auto`는 사용자가 직접 적용해야 함
  * - SidebarContext.Provider로 toggle 상태 공유
- * - usePersisted로 toggle 상태 localStorage 저장 (키: sidebar.toggle)
+ * - toggle 상태는 메모리에만 유지 (페이지 새로고침 시 초기화)
  * - 데스크탑(640px+)에서 padding-left + transition으로 콘텐츠 확장/축소
  * - 모바일(640px-)에서 backdrop 렌더링 및 클릭 시 닫기
  * - 페이지 이동 시 모바일에서 자동 닫기
@@ -55,7 +54,7 @@ export interface SidebarContainerProps extends JSX.HTMLAttributes<HTMLDivElement
 export const SidebarContainer: ParentComponent<SidebarContainerProps> = (props) => {
   const [local, rest] = splitProps(props, ["children", "class", "style"]);
 
-  const [toggle, setToggle] = usePersisted("sidebar.toggle", false);
+  const [toggle, setToggle] = createSignal(false);
 
   // Tailwind sm: breakpoint 감지
   const isDesktop = createMediaQuery(SM_MEDIA_QUERY);

package/src/components/layout/sidebar/SidebarUser.tsx

@@ -1,10 +1,13 @@
-import { createSignal, For, type JSX, type ParentComponent, Show, splitProps } from "solid-js";
+import { type Component, createSignal, For, type JSX, Show, splitProps } from "solid-js";
 import clsx from "clsx";
 import { twMerge } from "tailwind-merge";
+import type { IconProps as TablerIconProps } from "@tabler/icons-solidjs";
+import { IconUser } from "@tabler/icons-solidjs";
 import { ripple } from "../../../directives/ripple";
 import { Collapse } from "../../disclosure/Collapse";
 import { List } from "../../data/list/List";
 import { ListItem } from "../../data/list/ListItem";
+import { Icon } from "../../display/Icon";
 
 void ripple;
 
@@ -23,6 +26,8 @@ const headerClass = clsx(
 
 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");
+
 export interface SidebarUserMenu {
   title: string;
   onClick: () => void;
@@ -30,37 +35,50 @@ export interface SidebarUserMenu {
 
 export interface SidebarUserProps extends Omit<JSX.HTMLAttributes<HTMLDivElement>, "onClick"> {
   /**
-   * 드롭다운 메뉴 (있을 때만 클릭 가능)
+   * 사용자 이름 (필수)
    */
-  menus?: SidebarUserMenu[];
+  name: string;
+
+  /**
+   * 아바타 아이콘 (미입력 시 기본 사용자 아이콘)
+   */
+  icon?: Component<TablerIconProps>;
 
   /**
-   * 사용자 정보 영역 (커스터마이징)
+   * 부가 정보 (이메일 등, 미입력 시 이름만 표시)
    */
-  children: JSX.Element;
+  description?: string;
+
+  /**
+   * 드롭다운 메뉴 (있을 때만 클릭 가능)
+   */
+  menus?: SidebarUserMenu[];
 }
 
 /**
  * 사이드바 사용자 정보 컴포넌트
  *
  * @remarks
- * - children으로 사용자 정보 영역 커스터마이징
+ * - name, icon, description props로 사용자 정보 표시
+ * - icon 미입력 시 기본 사용자 아이콘 표시
+ * - description 미입력 시 이름만 세로 중앙 정렬
  * - menus가 있을 때만 클릭 가능 및 ripple 효과 적용
  * - 클릭 시 드롭다운 메뉴 펼침/접힘
  *
  * @example
  * ```tsx
- * <SidebarUser menus={[
- *   { title: "프로필", onClick: () => navigate("/profile") },
- *   { title: "로그아웃", onClick: handleLogout },
- * ]}>
- *   <Avatar src={user.avatar} />
- *   <span>{user.name}</span>
- * </SidebarUser>
+ * <SidebarUser
+ *   name="홍길동"
+ *   description="hong@example.com"
+ *   menus={[
+ *     { title: "프로필", onClick: () => navigate("/profile") },
+ *     { title: "로그아웃", onClick: handleLogout },
+ *   ]}
+ * />
  * ```
  */
-export const SidebarUser: ParentComponent<SidebarUserProps> = (props) => {
-  const [local, rest] = splitProps(props, ["children", "class", "menus"]);
+export const SidebarUser: Component<SidebarUserProps> = (props) => {
+  const [local, rest] = splitProps(props, ["name", "icon", "description", "class", "menus"]);
 
   const [open, setOpen] = createSignal(false);
 
@@ -91,7 +109,17 @@ export const SidebarUser: ParentComponent<SidebarUserProps> = (props) => {
         onClick={handleClick}
         aria-expanded={hasMenus() ? open() : undefined}
       >
-        {local.children}
+        <div class="relative flex flex-1 items-center gap-3">
+          <div class={avatarClass}>
+            <Icon icon={local.icon ?? IconUser} class="size-6" />
+          </div>
+          <Show when={local.description} fallback={<span class="font-semibold">{local.name}</span>}>
+            <div class="flex flex-col">
+              <span class="font-semibold">{local.name}</span>
+              <span class={clsx("text-sm", "text-base-500 dark:text-base-400")}>{local.description}</span>
+            </div>
+          </Show>
+        </div>
       </button>
       <Show when={hasMenus()}>
         <Collapse open={open()}>