@simplysm/solid 13.0.27 → 13.0.29

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

@@ -79,7 +79,14 @@ function parseValue(str: string, unit: DateTimePickerUnit): DateTime | undefined
       // yyyy-MM-ddTHH:mm 형식
       const match = /^(\d{4})-(\d{2})-(\d{2})T(\d{2}):(\d{2})$/.exec(str);
       if (match == null) return undefined;
-      return new DateTime(Number(match[1]), Number(match[2]), Number(match[3]), Number(match[4]), Number(match[5]), 0);
+      return new DateTime(
+        Number(match[1]),
+        Number(match[2]),
+        Number(match[3]),
+        Number(match[4]),
+        Number(match[5]),
+        0,
+      );
     }
     case "second": {
       // yyyy-MM-ddTHH:mm:ss 형식

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

@@ -1,11 +1,21 @@
 import clsx from "clsx";
 import { type ComponentSize, paddingLg, paddingSm, paddingXl } from "../../../styles/tokens.styles";
-import { fieldSurface, insetBase, insetFocusOutline, inputBase } from "../../../styles/patterns.styles";
+import {
+  fieldSurface,
+  insetBase,
+  insetFocusOutline,
+  inputBase,
+} from "../../../styles/patterns.styles";
 
 export type FieldSize = ComponentSize;
 
 // 기본 wrapper 스타일
-export const fieldBaseClass = clsx("inline-flex items-center", fieldSurface, "px-2 py-1", "h-field");
+export const fieldBaseClass = clsx(
+  "inline-flex items-center",
+  fieldSurface,
+  "px-2 py-1",
+  "h-field",
+);
 
 // 사이즈별 스타일
 export const fieldSizeClasses: Record<FieldSize, string> = {
@@ -15,7 +25,11 @@ export const fieldSizeClasses: Record<FieldSize, string> = {
 };
 
 // inset 스타일
-export const fieldInsetClass = clsx(insetBase, "bg-primary-50 dark:bg-primary-950/30", insetFocusOutline);
+export const fieldInsetClass = clsx(
+  insetBase,
+  "bg-primary-50 dark:bg-primary-950/30",
+  insetFocusOutline,
+);
 
 // inset 높이 (border 2px 제외)
 export const fieldInsetHeightClass = "h-field-inset";

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

@@ -1,6 +1,7 @@
 import { type Component, type JSX, Show, splitProps, createSignal, createEffect } from "solid-js";
 import clsx from "clsx";
 import { twMerge } from "tailwind-merge";
+import type { IconProps as TablerIconProps } from "@tabler/icons-solidjs";
 import { createControllableSignal } from "../../../hooks/createControllableSignal";
 import {
   type FieldSize,
@@ -13,6 +14,7 @@ import {
   fieldInputClass,
 } from "./Field.styles";
 import { textMuted } from "../../../styles/tokens.styles";
+import { Icon } from "../../display/Icon";
 
 // NumberInput 전용 input 스타일 (우측 정렬 + 스피너 숨김)
 const numberInputClass = clsx(
@@ -58,6 +60,9 @@ export interface NumberInputProps {
 
   /** 커스텀 style */
   style?: JSX.CSSProperties;
+
+  /** 접두 아이콘 */
+  prefixIcon?: Component<TablerIconProps>;
 }
 
 /**
@@ -163,6 +168,7 @@ export const NumberInput: Component<NumberInputProps> = (props) => {
     "readonly",
     "size",
     "inset",
+    "prefixIcon",
     "class",
     "style",
   ]);
@@ -235,6 +241,14 @@ export const NumberInput: Component<NumberInputProps> = (props) => {
   const getWrapperClass = (includeCustomClass: boolean) =>
     twMerge(
       fieldBaseClass,
+      local.prefixIcon &&
+        (local.size === "sm"
+          ? "gap-1.5"
+          : local.size === "lg"
+            ? "gap-3"
+            : local.size === "xl"
+              ? "gap-4"
+              : "gap-2"),
       local.size && fieldSizeClasses[local.size],
       local.disabled && fieldDisabledClass,
       local.inset && fieldInsetClass,
@@ -245,6 +259,12 @@ export const NumberInput: Component<NumberInputProps> = (props) => {
 
   const isEditable = () => !local.disabled && !local.readonly;
 
+  const prefixIconEl = () => (
+    <Show when={local.prefixIcon}>
+      <Icon icon={local.prefixIcon!} class="shrink-0 opacity-70" />
+    </Show>
+  );
+
   return (
     <Show
       when={local.inset}
@@ -260,6 +280,7 @@ export const NumberInput: Component<NumberInputProps> = (props) => {
               style={local.style}
               title={local.title}
             >
+              {prefixIconEl()}
               {formatNumber(value(), local.comma ?? true, local.minDigits) ||
                 (local.placeholder != null && local.placeholder !== "" ? (
                   <span class={textMuted}>{local.placeholder}</span>
@@ -270,6 +291,7 @@ export const NumberInput: Component<NumberInputProps> = (props) => {
           }
         >
           <div {...rest} data-number-field class={getWrapperClass(true)} style={local.style}>
+            {prefixIconEl()}
             <input
               type="text"
               inputmode="numeric"
@@ -293,6 +315,7 @@ export const NumberInput: Component<NumberInputProps> = (props) => {
           style={{ visibility: isEditable() ? "hidden" : undefined }}
           title={local.title}
         >
+          {prefixIconEl()}
           {formatNumber(value(), local.comma ?? true, local.minDigits) ||
             (local.placeholder != null && local.placeholder !== "" ? (
               <span class={textMuted}>{local.placeholder}</span>
@@ -303,6 +326,7 @@ export const NumberInput: Component<NumberInputProps> = (props) => {
 
         <Show when={isEditable()}>
           <div class={twMerge(getWrapperClass(false), "absolute left-0 top-0 size-full")}>
+            {prefixIconEl()}
             <input
               type="text"
               inputmode="numeric"

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

@@ -1,19 +1,21 @@
 import clsx from "clsx";
 import { type Component, createEffect, type JSX, Show, splitProps } from "solid-js";
 import { twMerge } from "tailwind-merge";
+import type { IconProps as TablerIconProps } from "@tabler/icons-solidjs";
 import { createControllableSignal } from "../../../hooks/createControllableSignal";
 import { createIMEHandler } from "../../../hooks/createIMEHandler";
 import {
-  type FieldSize,
   fieldBaseClass,
-  fieldSizeClasses,
+  fieldDisabledClass,
+  fieldInputClass,
   fieldInsetClass,
   fieldInsetHeightClass,
   fieldInsetSizeHeightClasses,
-  fieldDisabledClass,
-  fieldInputClass,
+  type FieldSize,
+  fieldSizeClasses,
 } from "./Field.styles";
 import { textMuted } from "../../../styles/tokens.styles";
+import { Icon } from "../../display/Icon";
 
 type TextInputType = "text" | "password" | "email";
 
@@ -34,7 +36,7 @@ export interface TextInputProps {
   title?: string;
 
   /** 자동완성 */
-  autocomplete?: string;
+  autocomplete?: JSX.HTMLAutocomplete;
 
   /** 비활성화 */
   disabled?: boolean;
@@ -51,6 +53,9 @@ export interface TextInputProps {
   /** 입력 포맷 (예: XXX-XXXX-XXXX) */
   format?: string;
 
+  /** 접두 아이콘 */
+  prefixIcon?: Component<TablerIconProps>;
+
   /** 커스텀 class */
   class?: string;
 
@@ -132,6 +137,7 @@ export const TextInput: Component<TextInputProps> = (props) => {
     "size",
     "inset",
     "format",
+    "prefixIcon",
     "class",
     "style",
   ]);
@@ -188,6 +194,14 @@ export const TextInput: Component<TextInputProps> = (props) => {
   const getWrapperClass = (includeCustomClass: boolean) =>
     twMerge(
       fieldBaseClass,
+      local.prefixIcon &&
+        (local.size === "sm"
+          ? "gap-1.5"
+          : local.size === "lg"
+            ? "gap-3"
+            : local.size === "xl"
+              ? "gap-4"
+              : "gap-2"),
       local.size && fieldSizeClasses[local.size],
       local.disabled && fieldDisabledClass,
       local.inset && fieldInsetClass,
@@ -199,6 +213,12 @@ export const TextInput: Component<TextInputProps> = (props) => {
   // 편집 가능 여부
   const isEditable = () => !local.disabled && !local.readonly;
 
+  const prefixIconEl = () => (
+    <Show when={local.prefixIcon}>
+      <Icon icon={local.prefixIcon!} class="shrink-0 opacity-70" />
+    </Show>
+  );
+
   // disabled 전환 시 미커밋 조합 값 flush
   createEffect(() => {
     if (!isEditable()) {
@@ -221,6 +241,7 @@ export const TextInput: Component<TextInputProps> = (props) => {
               style={local.style}
               title={local.title}
             >
+              {prefixIconEl()}
               {displayValue() ||
                 (local.placeholder != null && local.placeholder !== "" ? (
                   <span class={textMuted}>{local.placeholder}</span>
@@ -231,6 +252,7 @@ export const TextInput: Component<TextInputProps> = (props) => {
           }
         >
           <div {...rest} data-text-field class={getWrapperClass(true)} style={local.style}>
+            {prefixIconEl()}
             <input
               type={local.type ?? "text"}
               class={fieldInputClass}
@@ -254,6 +276,7 @@ export const TextInput: Component<TextInputProps> = (props) => {
         style={local.style}
       >
         <div data-text-field-content style={{ visibility: isEditable() ? "hidden" : undefined }}>
+          {prefixIconEl()}
           {displayValue() ||
             (local.placeholder != null && local.placeholder !== "" ? (
               <span class={textMuted}>{local.placeholder}</span>

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

@@ -128,7 +128,8 @@ export const Textarea: Component<TextareaProps> = (props) => {
   const contentForHeight = () => {
     const rows = local.minRows ?? 1;
     const val = displayValue();
-    const content = val !== "" && val.split("\n").length >= rows ? val : "\n".repeat(rows - 1) + "\u00A0";
+    const content =
+      val !== "" && val.split("\n").length >= rows ? val : "\n".repeat(rows - 1) + "\u00A0";
     // 마지막이 줄바꿈이면 빈 줄 높이 확보를 위해 공백 추가
     return content.endsWith("\n") ? content + "\u00A0" : content;
   };

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

@@ -189,7 +189,11 @@ export const TimePicker: Component<TimePickerProps> = (props) => {
         class={twMerge(getWrapperClass(false), "relative", local.class)}
         style={local.style}
       >
-        <div data-time-field-content style={{ visibility: isEditable() ? "hidden" : undefined }} title={local.title}>
+        <div
+          data-time-field-content
+          style={{ visibility: isEditable() ? "hidden" : undefined }}
+          title={local.title}
+        >
           {displayValue() || "\u00A0"}
         </div>
 

package/src/components/form-control/select/Select.tsx

@@ -1,4 +1,12 @@
-import { children, createSignal, For, type JSX, type ParentComponent, Show, splitProps } from "solid-js";
+import {
+  children,
+  createSignal,
+  For,
+  type JSX,
+  type ParentComponent,
+  Show,
+  splitProps,
+} from "solid-js";
 import clsx from "clsx";
 import { twMerge } from "tailwind-merge";
 import { IconChevronDown } from "@tabler/icons-solidjs";
@@ -70,12 +78,18 @@ interface SelectItemTemplateProps<TValue> {
 }
 
 // 템플릿 함수를 저장하는 전역 Map (WeakMap 사용하여 메모리 누수 방지)
-const templateFnMap = new WeakMap<HTMLElement, (item: unknown, index: number, depth: number) => JSX.Element>();
+const templateFnMap = new WeakMap<
+  HTMLElement,
+  (item: unknown, index: number, depth: number) => JSX.Element
+>();
 
 const SelectItemTemplate = <T,>(props: SelectItemTemplateProps<T>) => (
   <span
     ref={(el) => {
-      templateFnMap.set(el, props.children as (item: unknown, index: number, depth: number) => JSX.Element);
+      templateFnMap.set(
+        el,
+        props.children as (item: unknown, index: number, depth: number) => JSX.Element,
+      );
     }}
     data-select-item-template
     style={{ display: "none" }}
@@ -291,10 +305,16 @@ export const Select: SelectComponent = <T,>(props: SelectProps<T>) => {
   // 내부 컴포넌트: Provider 안에서 children을 resolve
   const SelectInner: ParentComponent = (innerProps) => {
     const resolved = children(() => innerProps.children);
-    const [slots, items] = splitSlots(resolved, ["selectHeader", "selectAction", "selectItemTemplate"] as const);
+    const [slots, items] = splitSlots(resolved, [
+      "selectHeader",
+      "selectAction",
+      "selectItemTemplate",
+    ] as const);
 
     // itemTemplate 함수 추출
-    const getItemTemplate = (): ((item: T, index: number, depth: number) => JSX.Element) | undefined => {
+    const getItemTemplate = ():
+      | ((item: T, index: number, depth: number) => JSX.Element)
+      | undefined => {
       const templateSlots = slots().selectItemTemplate;
       if (templateSlots.length === 0) return undefined;
       // WeakMap에서 함수 참조 가져오기
@@ -314,7 +334,9 @@ export const Select: SelectComponent = <T,>(props: SelectProps<T>) => {
               <Show when={local.getChildren?.(item, index(), depth)} keyed>
                 {(itemChildren) => (
                   <Show when={itemChildren.length > 0}>
-                    <SelectItem.Children>{renderItems(itemChildren, depth + 1)}</SelectItem.Children>
+                    <SelectItem.Children>
+                      {renderItems(itemChildren, depth + 1)}
+                    </SelectItem.Children>
                   </Show>
                 )}
               </Show>
@@ -367,7 +389,10 @@ export const Select: SelectComponent = <T,>(props: SelectProps<T>) => {
           aria-disabled={local.disabled || undefined}
           aria-required={local.required || undefined}
           tabIndex={local.disabled ? -1 : 0}
-          class={twMerge(getTriggerClassName(), slots().selectAction.length > 0 && "rounded-r-none border-r-0")}
+          class={twMerge(
+            getTriggerClassName(),
+            slots().selectAction.length > 0 && "rounded-r-none border-r-0",
+          )}
           style={local.style}
           onClick={handleTriggerClick}
           onKeyDown={handleTriggerKeyDown}

package/src/components/form-control/select/SelectItem.tsx

@@ -61,7 +61,9 @@ interface SelectItemComponent<TValue = unknown> extends ParentComponent<SelectIt
  * </Select.Item>
  * ```
  */
-export const SelectItem: SelectItemComponent = <T,>(props: SelectItemProps<T> & { children?: JSX.Element }) => {
+export const SelectItem: SelectItemComponent = <T,>(
+  props: SelectItemProps<T> & { children?: JSX.Element },
+) => {
   const [local, rest] = splitProps(props, ["children", "class", "value", "disabled"]);
 
   const context = useSelectContext<T>();

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

@@ -108,13 +108,23 @@ const iconSize = "0.85em";
 // ── Component ──
 
 function StatePresetInner<TValue>(props: StatePresetProps<TValue>): JSX.Element {
-  const [local] = splitProps(props, ["presetKey", "value", "onValueChange", "size", "class", "style"]);
+  const [local] = splitProps(props, [
+    "presetKey",
+    "value",
+    "onValueChange",
+    "size",
+    "class",
+    "style",
+  ]);
 
   const notification = useNotification();
 
   // presetKey는 마운트 시 한 번만 설정되는 식별자이므로 즉시 평가하여 캡처
   /* eslint-disable solid/reactivity */
-  const [presets, setPresets] = useSyncConfig<StatePresetItem<TValue>[]>(`state-preset.${local.presetKey}`, []);
+  const [presets, setPresets] = useSyncConfig<StatePresetItem<TValue>[]>(
+    `state-preset.${local.presetKey}`,
+    [],
+  );
   /* eslint-enable solid/reactivity */
   const [adding, setAdding] = createSignal(false);
   const [inputValue, setInputValue] = createSignal("");
@@ -163,18 +173,24 @@ function StatePresetInner<TValue>(props: StatePresetProps<TValue>): JSX.Element
     const snapshot = [...presets()];
     const presetName = snapshot[index].name;
 
-    const updated = snapshot.map((p, i) => (i === index ? { ...p, state: objClone(local.value) } : p));
+    const updated = snapshot.map((p, i) =>
+      i === index ? { ...p, state: objClone(local.value) } : p,
+    );
     setPresets(updated);
 
-    const notiId = notification.info("프리셋 덮어쓰기", `"${presetName}" 프리셋이 현재 상태로 업데이트되었습니다.`, {
-      action: {
-        label: "실행 취소",
-        onClick: () => {
-          setPresets(snapshot);
-          notification.remove(notiId);
+    const notiId = notification.info(
+      "프리셋 덮어쓰기",
+      `"${presetName}" 프리셋이 현재 상태로 업데이트되었습니다.`,
+      {
+        action: {
+          label: "실행 취소",
+          onClick: () => {
+            setPresets(snapshot);
+            notification.remove(notiId);
+          },
         },
       },
-    });
+    );
   }
 
   function handleDelete(index: number): void {
@@ -209,7 +225,8 @@ function StatePresetInner<TValue>(props: StatePresetProps<TValue>): JSX.Element
 
   const containerClass = () => twMerge(baseClass, local.class);
 
-  const resolvedChipClass = () => twMerge(chipClass, local.size ? chipSizeClasses[local.size] : chipDefaultClass);
+  const resolvedChipClass = () =>
+    twMerge(chipClass, local.size ? chipSizeClasses[local.size] : chipDefaultClass);
 
   const resolvedIconBtnClass = () =>
     twMerge(iconBtnClass, local.size ? iconBtnSizeClasses[local.size] : iconBtnDefaultClass);
@@ -217,12 +234,18 @@ function StatePresetInner<TValue>(props: StatePresetProps<TValue>): JSX.Element
   const resolvedStarBtnClass = () =>
     twMerge(starBtnClass, local.size ? starBtnSizeClasses[local.size] : starBtnDefaultClass);
 
-  const resolvedInputClass = () => twMerge(inputClass, local.size ? inputSizeClasses[local.size] : inputDefaultClass);
+  const resolvedInputClass = () =>
+    twMerge(inputClass, local.size ? inputSizeClasses[local.size] : inputDefaultClass);
 
   return (
     <div class={containerClass()} style={local.style}>
       {/* Star button - add preset */}
-      <button type="button" class={resolvedStarBtnClass()} onClick={handleStartAdd} title="프리셋 추가">
+      <button
+        type="button"
+        class={resolvedStarBtnClass()}
+        onClick={handleStartAdd}
+        title="프리셋 추가"
+      >
         <Icon icon={IconStar} size={iconSize} />
       </button>
 
@@ -278,4 +301,6 @@ function StatePresetInner<TValue>(props: StatePresetProps<TValue>): JSX.Element
   );
 }
 
-export const StatePreset = StatePresetInner as <TValue>(props: StatePresetProps<TValue>) => JSX.Element;
+export const StatePreset = StatePresetInner as <TValue>(
+  props: StatePresetProps<TValue>,
+) => JSX.Element;

package/src/components/layout/FormGroup.tsx

@@ -1,4 +1,11 @@
-import { type JSX, type ParentComponent, Show, splitProps, createContext, useContext } from "solid-js";
+import {
+  type JSX,
+  type ParentComponent,
+  Show,
+  splitProps,
+  createContext,
+  useContext,
+} from "solid-js";
 import clsx from "clsx";
 import { twMerge } from "tailwind-merge";
 
@@ -26,7 +33,9 @@ const FormGroupItem: ParentComponent<FormGroupItemProps> = (props) => {
   return (
     <div class={getClassName()} data-form-group-item {...rest}>
       <Show when={local.label}>
-        <label class={ctx.inline ? clsx("whitespace-nowrap font-bold", "pr-2") : "mb-1 block font-bold"}>
+        <label
+          class={ctx.inline ? clsx("whitespace-nowrap font-bold", "pr-2") : "mb-1 block font-bold"}
+        >
           {local.label}
         </label>
       </Show>

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

@@ -22,7 +22,7 @@ const baseClass = clsx(
   "flex",
   "flex-col",
   "bg-base-100",
-  "dark:bg-base-900",
+  "dark:bg-base-800",
   "border-r",
   "border-base-200",
   "dark:border-base-700",
@@ -82,7 +82,8 @@ const SidebarBase: ParentComponent<SidebarProps> = (props) => {
     return isOpen() ? "translateX(0)" : "translateX(-100%)";
   };
 
-  const getClassName = () => twMerge(baseClass, !isDesktop() && isOpen() && mobileOpenClass, local.class);
+  const getClassName = () =>
+    twMerge(baseClass, !isDesktop() && isOpen() && mobileOpenClass, local.class);
 
   return (
     <aside

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

@@ -1,4 +1,11 @@
-import { type JSX, type ParentComponent, Show, splitProps, createMemo, createSignal } 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";

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

@@ -166,7 +166,13 @@ const MenuItem: Component<MenuItemProps> = (props) => {
   };
 
   return (
-    <ListItem selected={isSelected()} open={open()} onOpenChange={setOpen} onClick={handleClick} size={props.size}>
+    <ListItem
+      selected={isSelected()}
+      open={open()}
+      onOpenChange={setOpen}
+      onClick={handleClick}
+      size={props.size}
+    >
       <Show when={props.menu.icon}>
         <Icon icon={props.menu.icon!} />
       </Show>

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

@@ -11,7 +11,7 @@ import { Icon } from "../../display/Icon";
 
 void ripple;
 
-const containerClass = clsx("m-2 flex flex-col overflow-hidden rounded bg-white dark:bg-base-800");
+const containerClass = clsx("m-2 flex flex-col overflow-hidden rounded bg-white dark:bg-base-900");
 
 const headerClass = clsx(
   "flex",
@@ -23,12 +23,15 @@ const headerClass = clsx(
   "cursor-pointer",
   "transition-colors",
   "hover:bg-base-500/10",
-  "dark:hover:bg-base-700",
+  "dark:hover:bg-base-800",
 );
 
 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 avatarClass = clsx(
+  "flex size-10 items-center justify-center rounded-full",
+  "bg-primary-500 text-white",
+);
 
 export interface SidebarUserMenu {
   title: string;
@@ -117,7 +120,9 @@ export const SidebarUser: Component<SidebarUserProps> = (props) => {
           <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>
+              <span class={clsx("text-sm", "text-base-500 dark:text-base-400")}>
+                {local.description}
+              </span>
             </div>
           </Show>
         </div>

package/src/components/layout/topbar/Topbar.tsx

@@ -24,7 +24,7 @@ const baseClass = clsx(
   "px-2",
   // 배경/테두리
   "bg-white",
-  "dark:bg-base-950",
+  "dark:bg-base-900",
   "border-b",
   "border-base-200",
   "dark:border-base-700",

package/src/components/layout/topbar/TopbarMenu.tsx

@@ -1,4 +1,12 @@
-import { type Component, type JSX, For, Show, splitProps, createSignal, createMemo } from "solid-js";
+import {
+  type Component,
+  type JSX,
+  For,
+  Show,
+  splitProps,
+  createSignal,
+  createMemo,
+} from "solid-js";
 import { useLocation, useNavigate } from "@solidjs/router";
 import { IconChevronDown, IconDotsVertical, type IconProps } from "@tabler/icons-solidjs";
 import { Icon } from "../../display/Icon";
@@ -76,10 +84,16 @@ export const TopbarMenu: Component<TopbarMenuProps> = (props) => {
         >
           <Icon icon={IconDotsVertical} size="1.25em" />
         </Button>
-        <Dropdown triggerRef={() => mobileButtonRef} open={mobileMenuOpen()} onOpenChange={setMobileMenuOpen}>
+        <Dropdown
+          triggerRef={() => mobileButtonRef}
+          open={mobileMenuOpen()}
+          onOpenChange={setMobileMenuOpen}
+        >
           <List inset>
             <For each={local.menus}>
-              {(menu) => <TopbarMenuDropdownItem menu={menu} onClose={() => setMobileMenuOpen(false)} />}
+              {(menu) => (
+                <TopbarMenuDropdownItem menu={menu} onClose={() => setMobileMenuOpen(false)} />
+              )}
             </For>
           </List>
         </Dropdown>
@@ -147,7 +161,11 @@ const TopbarMenuButton: Component<TopbarMenuButtonProps> = (props) => {
         </Show>
         <span>{props.menu.title}</span>
         <Show when={hasChildren()}>
-          <Icon icon={IconChevronDown} size="1em" class={clsx("transition-transform", open() && "rotate-180")} />
+          <Icon
+            icon={IconChevronDown}
+            size="1em"
+            class={clsx("transition-transform", open() && "rotate-180")}
+          />
         </Show>
       </Button>
       <Show when={hasChildren()}>
@@ -189,7 +207,11 @@ const TopbarMenuDropdownItem: Component<TopbarMenuDropdownItemProps> = (props) =
   };
 
   return (
-    <ListItem selected={isSelected()} readonly={props.menu.href === undefined && hasChildren()} onClick={handleClick}>
+    <ListItem
+      selected={isSelected()}
+      readonly={props.menu.href === undefined && hasChildren()}
+      onClick={handleClick}
+    >
       <Show when={props.menu.icon}>
         <Icon icon={props.menu.icon!} />
       </Show>

package/src/components/layout/topbar/TopbarUser.tsx

@@ -79,7 +79,11 @@ export const TopbarUser: ParentComponent<TopbarUserProps> = (props) => {
       >
         {local.children}
         <Show when={hasMenus()}>
-          <Icon icon={IconChevronDown} size="1em" class={clsx("transition-transform", open() && "rotate-180")} />
+          <Icon
+            icon={IconChevronDown}
+            size="1em"
+            class={clsx("transition-transform", open() && "rotate-180")}
+          />
         </Show>
       </Button>
       <Show when={hasMenus()}>