@simplysm/solid 13.0.28 → 13.0.29

package/src/components/display/Echarts.tsx

@@ -1,4 +1,11 @@
-import { type Component, createEffect, createSignal, 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 type * as echartsType from "echarts";
 import clsx from "clsx";
@@ -6,13 +13,13 @@ import { twMerge } from "tailwind-merge";
 
 export interface EchartsProps extends JSX.HTMLAttributes<HTMLDivElement> {
   option: echartsType.EChartsOption;
-  loading?: boolean;
+  busy?: boolean;
 }
 
 const baseClass = clsx("block", "size-full");
 
 export const Echarts: Component<EchartsProps> = (props) => {
-  const [local, rest] = splitProps(props, ["option", "loading", "class"]);
+  const [local, rest] = splitProps(props, ["option", "busy", "class"]);
   let containerRef!: HTMLDivElement;
   let chart: echartsType.EChartsType | undefined;
   const [ready, setReady] = createSignal(false);
@@ -33,10 +40,10 @@ export const Echarts: Component<EchartsProps> = (props) => {
     chart!.setOption(local.option);
   });
 
-  // loading 상태 변경 감지
+  // busy 상태 변경 감지
   createEffect(() => {
     if (!ready()) return;
-    if (local.loading) {
+    if (local.busy) {
       chart!.showLoading();
     } else {
       chart!.hideLoading();

package/src/components/display/Link.tsx

@@ -0,0 +1,22 @@
+import { type JSX, type ParentComponent, splitProps } from "solid-js";
+import clsx from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export interface LinkProps extends JSX.AnchorHTMLAttributes<HTMLAnchorElement> {}
+
+const baseClass = clsx(
+  "text-primary-600",
+  "dark:text-primary-400",
+  "hover:underline",
+  "cursor-pointer",
+);
+
+export const Link: ParentComponent<LinkProps> = (props) => {
+  const [local, rest] = splitProps(props, ["children", "class"]);
+
+  return (
+    <a class={twMerge(baseClass, local.class)} {...rest}>
+      {local.children}
+    </a>
+  );
+};

package/src/components/feedback/{loading/LoadingContainer.tsx → busy/BusyContainer.tsx}

@@ -1,13 +1,21 @@
-import { type ParentComponent, type JSX, splitProps, createEffect, onCleanup, Show, useContext } from "solid-js";
+import {
+  type ParentComponent,
+  type JSX,
+  splitProps,
+  createEffect,
+  onCleanup,
+  Show,
+  useContext,
+} from "solid-js";
 import clsx from "clsx";
 import { twMerge } from "tailwind-merge";
-import { LoadingContext, type LoadingVariant } from "./LoadingContext";
+import { BusyContext, type BusyVariant } from "./BusyContext";
 import { createMountTransition } from "../../../hooks/createMountTransition";
-import "./LoadingContainer.css";
+import "./BusyContainer.css";
 
-export interface LoadingContainerProps extends Omit<JSX.HTMLAttributes<HTMLDivElement>, "children"> {
+export interface BusyContainerProps extends Omit<JSX.HTMLAttributes<HTMLDivElement>, "children"> {
   busy?: boolean;
-  variant?: LoadingVariant;
+  variant?: BusyVariant;
   message?: string;
   progressPercent?: number;
   children?: JSX.Element;
@@ -46,11 +54,18 @@ const progressBarClass = clsx(
 
 const barIndicatorClass = clsx("absolute left-0 top-0", "h-1 w-full", "bg-white dark:bg-base-800");
 
-export const LoadingContainer: ParentComponent<LoadingContainerProps> = (props) => {
-  const [local, rest] = splitProps(props, ["busy", "variant", "message", "progressPercent", "class", "children"]);
+export const BusyContainer: ParentComponent<BusyContainerProps> = (props) => {
+  const [local, rest] = splitProps(props, [
+    "busy",
+    "variant",
+    "message",
+    "progressPercent",
+    "class",
+    "children",
+  ]);
 
-  const loadingCtx = useContext(LoadingContext);
-  const currVariant = (): LoadingVariant => local.variant ?? loadingCtx?.variant() ?? "spinner";
+  const busyCtx = useContext(BusyContext);
+  const currVariant = (): BusyVariant => local.variant ?? busyCtx?.variant() ?? "spinner";
 
   // 애니메이션 상태 (mount transition)
   const { mounted, animating, unmount } = createMountTransition(() => !!local.busy);
@@ -74,11 +89,16 @@ export const LoadingContainer: ParentComponent<LoadingContainerProps> = (props)
     };
 
     containerRef.addEventListener("keydown", handleKeyDownCapture, { capture: true });
-    onCleanup(() => containerRef.removeEventListener("keydown", handleKeyDownCapture, { capture: true }));
+    onCleanup(() =>
+      containerRef.removeEventListener("keydown", handleKeyDownCapture, { capture: true }),
+    );
   });
 
   const screenClass = () =>
-    clsx(screenBaseClass, animating() ? "pointer-events-auto opacity-100" : "pointer-events-none opacity-0");
+    clsx(
+      screenBaseClass,
+      animating() ? "pointer-events-auto opacity-100" : "pointer-events-none opacity-0",
+    );
 
   // spinner: 슬라이드 다운 애니메이션
   const rectClass = () => {
@@ -100,13 +120,19 @@ export const LoadingContainer: ParentComponent<LoadingContainerProps> = (props)
             <Show when={currVariant() === "bar" && local.busy}>
               <div class={barIndicatorClass}>
                 <div
-                  class={clsx("absolute left-0 top-0 h-1 w-full origin-left", "bg-primary-500 dark:bg-primary-400")}
+                  class={clsx(
+                    "absolute left-0 top-0 h-1 w-full origin-left",
+                    "bg-primary-500 dark:bg-primary-400",
+                  )}
                   style={{
                     animation: "sd-busy-bar-before 2s infinite ease-in",
                   }}
                 />
                 <div
-                  class={clsx("absolute left-0 top-0 h-1 w-full origin-left", "bg-white dark:bg-base-800")}
+                  class={clsx(
+                    "absolute left-0 top-0 h-1 w-full origin-left",
+                    "bg-white dark:bg-base-800",
+                  )}
                   style={{
                     animation: "sd-busy-bar-after 2s infinite ease-out",
                   }}
@@ -121,7 +147,10 @@ export const LoadingContainer: ParentComponent<LoadingContainerProps> = (props)
           </div>
           <Show when={local.progressPercent != null}>
             <div class={progressTrackClass}>
-              <div class={progressBarClass} style={{ transform: `scaleX(${(local.progressPercent ?? 0) / 100})` }} />
+              <div
+                class={progressBarClass}
+                style={{ transform: `scaleX(${(local.progressPercent ?? 0) / 100})` }}
+              />
             </div>
           </Show>
         </div>

package/src/components/feedback/busy/BusyContext.ts

@@ -0,0 +1,20 @@
+import { createContext, useContext, type Accessor } from "solid-js";
+
+export type BusyVariant = "spinner" | "bar";
+
+export interface BusyContextValue {
+  variant: Accessor<BusyVariant>;
+  show: (message?: string) => void;
+  hide: () => void;
+  setProgress: (percent: number | undefined) => void;
+}
+
+export const BusyContext = createContext<BusyContextValue>();
+
+export function useBusy(): BusyContextValue {
+  const context = useContext(BusyContext);
+  if (!context) {
+    throw new Error("useBusy는 BusyProvider 내부에서만 사용할 수 있습니다");
+  }
+  return context;
+}

package/src/components/feedback/{loading/LoadingProvider.tsx → busy/BusyProvider.tsx}

@@ -1,21 +1,21 @@
 import { type ParentComponent, createSignal } from "solid-js";
 import { Portal } from "solid-js/web";
 import clsx from "clsx";
-import { LoadingContext, type LoadingContextValue, type LoadingVariant } from "./LoadingContext";
-import { LoadingContainer } from "./LoadingContainer";
+import { BusyContext, type BusyContextValue, type BusyVariant } from "./BusyContext";
+import { BusyContainer } from "./BusyContainer";
 
 const overlayClass = clsx("fixed left-0 top-0", "h-screen w-screen", "overflow-hidden");
 
-export interface LoadingProviderProps {
-  variant?: LoadingVariant;
+export interface BusyProviderProps {
+  variant?: BusyVariant;
 }
 
-export const LoadingProvider: ParentComponent<LoadingProviderProps> = (props) => {
+export const BusyProvider: ParentComponent<BusyProviderProps> = (props) => {
   const [busyCount, setBusyCount] = createSignal(0);
   const [message, setMessage] = createSignal<string | undefined>();
   const [progress, setProgress] = createSignal<number | undefined>();
 
-  const variant = (): LoadingVariant => props.variant ?? "spinner";
+  const variant = (): BusyVariant => props.variant ?? "spinner";
 
   const show = (msg?: string): void => {
     setBusyCount((c) => c + 1);
@@ -33,7 +33,7 @@ export const LoadingProvider: ParentComponent<LoadingProviderProps> = (props) =>
     }
   };
 
-  const contextValue: LoadingContextValue = {
+  const contextValue: BusyContextValue = {
     variant,
     show,
     hide,
@@ -41,10 +41,10 @@ export const LoadingProvider: ParentComponent<LoadingProviderProps> = (props) =>
   };
 
   return (
-    <LoadingContext.Provider value={contextValue}>
+    <BusyContext.Provider value={contextValue}>
       {props.children}
       <Portal>
-        <LoadingContainer
+        <BusyContainer
           busy={busyCount() > 0}
           variant={variant()}
           message={message()}
@@ -53,6 +53,6 @@ export const LoadingProvider: ParentComponent<LoadingProviderProps> = (props) =>
           style={{ "pointer-events": busyCount() > 0 ? "auto" : "none" }}
         />
       </Portal>
-    </LoadingContext.Provider>
+    </BusyContext.Provider>
   );
 };

package/src/components/feedback/notification/NotificationBanner.tsx

@@ -33,7 +33,13 @@ const themeClasses: Record<string, string> = {
 const contentClass = clsx("flex flex-col", "gap-0.5", "min-w-0");
 const messageClass = clsx("text-sm", "opacity-90", "overflow-auto");
 const actionsClass = clsx("flex items-center", "gap-2", "shrink-0");
-const actionButtonClass = clsx("rounded", "bg-white/20", "px-3 py-1", "text-sm", "hover:bg-white/30");
+const actionButtonClass = clsx(
+  "rounded",
+  "bg-white/20",
+  "px-3 py-1",
+  "text-sm",
+  "hover:bg-white/30",
+);
 const dismissButtonClass = clsx("rounded", "p-1", "hover:bg-white/20");
 
 export const NotificationBanner: Component = () => {
@@ -70,7 +76,12 @@ export const NotificationBanner: Component = () => {
                   {item().action!.label}
                 </button>
               </Show>
-              <button type="button" aria-label="알림 닫기" class={dismissButtonClass} onClick={handleDismiss}>
+              <button
+                type="button"
+                aria-label="알림 닫기"
+                class={dismissButtonClass}
+                onClick={handleDismiss}
+              >
                 <Icon icon={IconX} size="1.25em" />
               </button>
             </div>

package/src/components/feedback/notification/NotificationBell.tsx

@@ -99,18 +99,32 @@ export const NotificationBell: Component<NotificationBellProps> = (props) => {
         </Show>
       </button>
 
-      <Dropdown triggerRef={() => buttonRef} open={open()} onOpenChange={handleOpenChange} maxHeight={400} class="w-80">
+      <Dropdown
+        triggerRef={() => buttonRef}
+        open={open()}
+        onOpenChange={handleOpenChange}
+        maxHeight={400}
+        class="w-80"
+      >
         <div class="p-2">
           <div class={dropdownHeaderClass}>
             <span class="font-semibold">알림</span>
             <Show when={notification.items().length > 0}>
-              <button type="button" data-notification-clear class={clearButtonClass} onClick={handleClear}>
+              <button
+                type="button"
+                data-notification-clear
+                class={clearButtonClass}
+                onClick={handleClear}
+              >
                 전체 삭제
               </button>
             </Show>
           </div>
 
-          <Show when={notification.items().length > 0} fallback={<div class={emptyClass}>알림이 없습니다</div>}>
+          <Show
+            when={notification.items().length > 0}
+            fallback={<div class={emptyClass}>알림이 없습니다</div>}
+          >
             <div class={listClass}>
               <For each={[...notification.items()].reverse()}>
                 {(item) => (

package/src/components/feedback/notification/NotificationContext.ts

@@ -38,7 +38,10 @@ export interface NotificationContextValue {
   danger: (title: string, message?: string, options?: NotificationOptions) => string;
 
   // 에러 처리 (danger 알림 + 로깅)
-  try: <TResult>(fn: () => Promise<TResult> | TResult, header?: string) => Promise<TResult | undefined>;
+  try: <TResult>(
+    fn: () => Promise<TResult> | TResult,
+    header?: string,
+  ) => Promise<TResult | undefined>;
 
   // 알림 수정
   update: (

package/src/components/feedback/notification/NotificationProvider.tsx

@@ -154,7 +154,9 @@ export const NotificationProvider: ParentComponent = (props) => {
     <NotificationContext.Provider value={contextValue}>
       {/* 스크린 리더용 Live Region */}
       <div role="status" aria-live="polite" aria-atomic="true" class="sr-only">
-        <Show when={latestUnread()}>{(item) => `알림: ${item().title} ${item().message ?? ""}`}</Show>
+        <Show when={latestUnread()}>
+          {(item) => `알림: ${item().title} ${item().message ?? ""}`}
+        </Show>
       </div>
       {props.children}
     </NotificationContext.Provider>

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

@@ -2,7 +2,12 @@ import { type JSX, type ParentComponent, splitProps } from "solid-js";
 import clsx from "clsx";
 import { twMerge } from "tailwind-merge";
 import { ripple } from "../../directives/ripple";
-import { themeTokens, type SemanticTheme, type ComponentSize, disabledOpacity } from "../../styles/tokens.styles";
+import {
+  themeTokens,
+  type SemanticTheme,
+  type ComponentSize,
+  disabledOpacity,
+} from "../../styles/tokens.styles";
 
 // Directive 사용 선언 (TypeScript용)
 void ripple;
@@ -18,7 +23,7 @@ const baseClass = clsx(
   "justify-center",
   "text-center",
   "cursor-pointer",
-  "transition-colors",
+  "transition",
   "rounded",
   "focus:outline-none",
   "focus-visible:ring-2",
@@ -30,7 +35,7 @@ const themeClasses = Object.fromEntries(
   Object.entries(themeTokens).map(([theme, t]) => [
     theme,
     {
-      solid: clsx(t.solid, t.solidHover),
+      solid: clsx(t.solid, t.solidHover, "shadow-md hover:shadow-lg"),
       outline: clsx("bg-transparent", t.hoverBg, t.text, t.border),
       ghost: clsx("bg-transparent", t.hoverBg, t.text),
     },

package/src/components/form-control/DropdownTrigger.styles.ts

@@ -1,6 +1,12 @@
 import clsx from "clsx";
 import { twMerge } from "tailwind-merge";
-import { borderDefault, type ComponentSize, paddingLg, paddingSm, paddingXl } from "../../styles/tokens.styles";
+import {
+  borderDefault,
+  type ComponentSize,
+  paddingLg,
+  paddingSm,
+  paddingXl,
+} from "../../styles/tokens.styles";
 import { insetBase, insetFocusOutlineSelf } from "../../styles/patterns.styles";
 
 export const triggerBaseClass = clsx(

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

@@ -49,13 +49,17 @@ export const Invalid: ParentComponent<InvalidProps> = (props) => {
   return (
     <div {...rest} class={twMerge("inline", local.class)}>
       <span class={anchorClass}>
-        <span class={indicatorClass} style={{ display: (local.message ?? "") !== "" ? "block" : "none" }} />
+        <span
+          class={indicatorClass}
+          style={{ display: (local.message ?? "") !== "" ? "block" : "none" }}
+        />
       </span>
       {local.children}
       <input
         ref={hiddenInputEl}
         type="text"
         class={hiddenInputClass}
+        autocomplete="off"
         tabIndex={-1}
         aria-hidden="true"
         onFocus={handleHiddenInputFocus}

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

@@ -37,7 +37,10 @@ const modeLabels: Record<ThemeMode, string> = {
   dark: "다크 모드",
 };
 
-export interface ThemeToggleProps extends Omit<JSX.ButtonHTMLAttributes<HTMLButtonElement>, "children"> {
+export interface ThemeToggleProps extends Omit<
+  JSX.ButtonHTMLAttributes<HTMLButtonElement>,
+  "children"
+> {
   /** 버튼 크기 */
   size?: "sm" | "lg";
 }
@@ -65,7 +68,8 @@ export const ThemeToggle: Component<ThemeToggleProps> = (props) => {
 
   const { mode, cycleMode } = useTheme();
 
-  const getClassName = () => twMerge(baseClass, "p-1.5", local.size && sizeClasses[local.size], local.class);
+  const getClassName = () =>
+    twMerge(baseClass, "p-1.5", local.size && sizeClasses[local.size], local.class);
 
   const iconSize = () => (local.size ? iconSizes[local.size] : "1.25em");
 

package/src/components/form-control/checkbox/Checkbox.styles.ts

@@ -53,7 +53,11 @@ export const checkboxSizeClasses: Record<CheckboxSize, string> = {
 };
 
 // inset 스타일
-export const checkboxInsetClass = clsx("h-field-inset justify-center bg-transparent", insetBase, insetFocusOutlineSelf);
+export const checkboxInsetClass = clsx(
+  "h-field-inset justify-center bg-transparent",
+  insetBase,
+  insetFocusOutlineSelf,
+);
 
 // inset 사이즈별 높이 (border 2px 제외)
 export const checkboxInsetSizeHeightClasses: Record<CheckboxSize, string> = {

package/src/components/form-control/color-picker/ColorPicker.tsx

@@ -66,7 +66,15 @@ export interface ColorPickerProps {
  * ```
  */
 export const ColorPicker: Component<ColorPickerProps> = (props) => {
-  const [local, rest] = splitProps(props, ["value", "onValueChange", "title", "disabled", "size", "class", "style"]);
+  const [local, rest] = splitProps(props, [
+    "value",
+    "onValueChange",
+    "title",
+    "disabled",
+    "size",
+    "class",
+    "style",
+  ]);
 
   const [value, setValue] = createControllableSignal({
     value: () => local.value ?? "#000000",
@@ -78,7 +86,12 @@ export const ColorPicker: Component<ColorPickerProps> = (props) => {
   };
 
   const getClassName = () =>
-    twMerge(baseClass, local.size && sizeClasses[local.size], local.disabled && disabledClass, local.class);
+    twMerge(
+      baseClass,
+      local.size && sizeClasses[local.size],
+      local.disabled && disabledClass,
+      local.class,
+    );
 
   return (
     <input

package/src/components/form-control/combobox/Combobox.tsx

@@ -154,7 +154,7 @@ export const Combobox: ComboboxComponent = <T,>(props: ComboboxProps<T>) => {
   const [open, setOpen] = createSignal(false);
   const [query, setQuery] = createSignal("");
   const [items, setItems] = createSignal<T[]>([]);
-  const [loading, setLoading] = createSignal(false);
+  const [busy, setBusy] = createSignal(false);
 
   // 선택된 값 관리 (controlled/uncontrolled 패턴)
   const [getValue, setInternalValue] = createControllableSignal<T | undefined>({
@@ -200,12 +200,12 @@ export const Combobox: ComboboxComponent = <T,>(props: ComboboxProps<T>) => {
     // loadItems 함수 참조를 캡처하여 사용
     const loadItemsFn = local.loadItems;
     debounceQueue.run(async () => {
-      setLoading(true);
+      setBusy(true);
       try {
         const result = await loadItemsFn(searchQuery);
         setItems(result);
       } finally {
-        setLoading(false);
+        setBusy(false);
       }
     });
   };
@@ -282,7 +282,9 @@ export const Combobox: ComboboxComponent = <T,>(props: ComboboxProps<T>) => {
     const getItemTemplate = (): ((item: T, index: number) => JSX.Element) | undefined => {
       const templateSlots = slots().comboboxItemTemplate;
       if (templateSlots.length === 0) return undefined;
-      return templateFnMap.get(templateSlots[0]) as ((item: T, index: number) => JSX.Element) | undefined;
+      return templateFnMap.get(templateSlots[0]) as
+        | ((item: T, index: number) => JSX.Element)
+        | undefined;
     };
 
     // 선택된 값 또는 입력 표시
@@ -318,7 +320,7 @@ export const Combobox: ComboboxComponent = <T,>(props: ComboboxProps<T>) => {
       const itemTemplate = getItemTemplate();
 
       // 로딩 중
-      if (loading()) {
+      if (busy()) {
         return <div class={noResultsClass}>검색 중...</div>;
       }
 
@@ -337,13 +339,19 @@ export const Combobox: ComboboxComponent = <T,>(props: ComboboxProps<T>) => {
       if (itemTemplate) {
         return (
           <For each={items()}>
-            {(item, index) => <ComboboxItem value={item}>{itemTemplate(item, index())}</ComboboxItem>}
+            {(item, index) => (
+              <ComboboxItem value={item}>{itemTemplate(item, index())}</ComboboxItem>
+            )}
           </For>
         );
       }
 
       // 기본 렌더링
-      return <For each={items()}>{(item) => <ComboboxItem value={item}>{String(item)}</ComboboxItem>}</For>;
+      return (
+        <For each={items()}>
+          {(item) => <ComboboxItem value={item}>{String(item)}</ComboboxItem>}
+        </For>
+      );
     };
 
     return (
@@ -364,7 +372,7 @@ export const Combobox: ComboboxComponent = <T,>(props: ComboboxProps<T>) => {
         >
           <div class={selectedValueClass}>{renderDisplayContent()}</div>
           <div class={chevronWrapperClass}>
-            <Show when={loading()} fallback={<Icon icon={IconChevronDown} size="1em" />}>
+            <Show when={busy()} fallback={<Icon icon={IconChevronDown} size="1em" />}>
               <Icon icon={IconLoader2} size="1em" class="animate-spin" />
             </Show>
           </div>

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

@@ -48,7 +48,10 @@ const toolbarBtnClass = clsx(
 );
 
 // 툴바 버튼 활성 스타일
-const toolbarBtnActiveClass = clsx("bg-primary-100 text-primary-700", "dark:bg-primary-900/40 dark:text-primary-300");
+const toolbarBtnActiveClass = clsx(
+  "bg-primary-100 text-primary-700",
+  "dark:bg-primary-900/40 dark:text-primary-300",
+);
 
 // 구분선 스타일
 const separatorClass = clsx("mx-1 h-5 w-px", "bg-base-300 dark:bg-base-700");
@@ -107,7 +110,8 @@ export const EditorToolbar: Component<EditorToolbarProps> = (props) => {
     (editor) => (editor.getAttributes("highlight")["color"] as string | undefined) ?? "#ffff00",
   );
 
-  const btnClass = (active: () => boolean) => twMerge(toolbarBtnClass, active() && toolbarBtnActiveClass);
+  const btnClass = (active: () => boolean) =>
+    twMerge(toolbarBtnClass, active() && toolbarBtnActiveClass);
 
   // 이미지 삽입 핸들러
   const handleImageInsert = () => {
@@ -202,14 +206,19 @@ export const EditorToolbar: Component<EditorToolbarProps> = (props) => {
         />
       </label>
       <label class={colorLabelClass} title="배경색">
-        <span class={clsx("rounded px-0.5 text-sm font-bold")} style={{ "background-color": currentHighlight() }}>
+        <span
+          class={clsx("rounded px-0.5 text-sm font-bold")}
+          style={{ "background-color": currentHighlight() }}
+        >
           A
         </span>
         <input
           type="color"
           class={colorInputClass}
           value={currentHighlight()}
-          onInput={(ev) => props.editor.chain().focus().toggleHighlight({ color: ev.currentTarget.value }).run()}
+          onInput={(ev) =>
+            props.editor.chain().focus().toggleHighlight({ color: ev.currentTarget.value }).run()
+          }
         />
       </label>
 
@@ -321,7 +330,9 @@ export const EditorToolbar: Component<EditorToolbarProps> = (props) => {
         type="button"
         class={toolbarBtnClass}
         title="테이블 삽입"
-        onClick={() => props.editor.chain().focus().insertTable({ rows: 3, cols: 3, withHeaderRow: true }).run()}
+        onClick={() =>
+          props.editor.chain().focus().insertTable({ rows: 3, cols: 3, withHeaderRow: true }).run()
+        }
       >
         <Icon icon={IconTablePlus} size="1em" />
       </button>

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

@@ -1,4 +1,13 @@
-import { type Component, type JSX, Show, createEffect, on, onCleanup, splitProps, untrack } from "solid-js";
+import {
+  type Component,
+  type JSX,
+  Show,
+  createEffect,
+  on,
+  onCleanup,
+  splitProps,
+  untrack,
+} from "solid-js";
 import clsx from "clsx";
 import "./editor.css";
 import { twMerge } from "tailwind-merge";
@@ -67,7 +76,14 @@ const editorContentSizeClasses: Record<FieldSize, string> = {
 };
 
 export const RichTextEditor: Component<RichTextEditorProps> = (props) => {
-  const [local, rest] = splitProps(props, ["value", "onValueChange", "disabled", "size", "class", "style"]);
+  const [local, rest] = splitProps(props, [
+    "value",
+    "onValueChange",
+    "disabled",
+    "size",
+    "class",
+    "style",
+  ]);
 
   const [value, setValue] = createControllableSignal({
     value: () => local.value ?? "",
@@ -148,9 +164,11 @@ export const RichTextEditor: Component<RichTextEditorProps> = (props) => {
     editor()?.destroy();
   });
 
-  const getWrapperClass = () => twMerge(editorWrapperClass, local.disabled && editorDisabledClass, local.class);
+  const getWrapperClass = () =>
+    twMerge(editorWrapperClass, local.disabled && editorDisabledClass, local.class);
 
-  const getContentClass = () => twMerge(editorContentClass, local.size && editorContentSizeClasses[local.size]);
+  const getContentClass = () =>
+    twMerge(editorContentClass, local.size && editorContentSizeClasses[local.size]);
 
   return (
     <div {...rest} data-rich-text-editor class={getWrapperClass()} style={local.style}>

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

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