@simplysm/solid 13.0.28 → 13.0.29

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

@@ -1,4 +1,13 @@
-import { children, createMemo, createSignal, For, type JSX, Show, splitProps, useContext } from "solid-js";
+import {
+  children,
+  createMemo,
+  createSignal,
+  For,
+  type JSX,
+  Show,
+  splitProps,
+  useContext,
+} from "solid-js";
 import { createResizeObserver } from "@solid-primitives/resize-observer";
 import clsx from "clsx";
 import { twMerge } from "tailwind-merge";
@@ -157,7 +166,9 @@ export const DataSheet: DataSheetComponent = <T,>(props: DataSheetProps<T>) => {
 
     const { DataSheetConfigDialog } = await import("./DataSheetConfigDialog");
 
-    const allCols = resolved.toArray().filter(isDataSheetColumnDef) as unknown as DataSheetColumnDef<T>[];
+    const allCols = resolved
+      .toArray()
+      .filter(isDataSheetColumnDef) as unknown as DataSheetColumnDef<T>[];
 
     const columnInfos: DataSheetConfigColumnInfo[] = allCols
       .filter((col) => !col.collapse)
@@ -359,7 +370,9 @@ export const DataSheet: DataSheetComponent = <T,>(props: DataSheetProps<T>) => {
     target.setPointerCapture(event.pointerId);
 
     const th = target.closest("th")!;
-    const container = th.closest("[data-sheet]")!.querySelector("[data-sheet-scroll]") as HTMLElement;
+    const container = th
+      .closest("[data-sheet]")!
+      .querySelector("[data-sheet-scroll]") as HTMLElement;
     const startX = event.clientX;
     const startWidth = th.offsetWidth;
 
@@ -484,7 +497,9 @@ export const DataSheet: DataSheetComponent = <T,>(props: DataSheetProps<T>) => {
     if (local.selectMode === "single") {
       setSelectedItems(isSelected ? [] : [item]);
     } else {
-      setSelectedItems(isSelected ? selectedItems().filter((i) => i !== item) : [...selectedItems(), item]);
+      setSelectedItems(
+        isSelected ? selectedItems().filter((i) => i !== item) : [...selectedItems(), item],
+      );
     }
   }
 
@@ -584,7 +599,11 @@ export const DataSheet: DataSheetComponent = <T,>(props: DataSheetProps<T>) => {
         } else if (relY > third * 2) {
           foundPosition = "after";
         } else {
-          foundPosition = local.getChildren ? "inside" : relY < rect.height / 2 ? "before" : "after";
+          foundPosition = local.getChildren
+            ? "inside"
+            : relY < rect.height / 2
+              ? "before"
+              : "after";
         }
         foundTarget = flat.item;
         break;
@@ -707,7 +726,8 @@ export const DataSheet: DataSheetComponent = <T,>(props: DataSheetProps<T>) => {
     hasExpandFeature() && !hasSelectFeature() && !hasReorderFeature() && lastFixedIndex() < 0;
 
   // 선택 기능 컬럼이 "마지막 고정"인지 (일반 고정 컬럼이 없고, 선택 컬럼이 가장 오른쪽 기능 컬럼일 때)
-  const isSelectColLastFixed = () => hasSelectFeature() && !hasReorderFeature() && lastFixedIndex() < 0;
+  const isSelectColLastFixed = () =>
+    hasSelectFeature() && !hasReorderFeature() && lastFixedIndex() < 0;
 
   const isReorderColLastFixed = () => hasReorderFeature() && lastFixedIndex() < 0;
 
@@ -722,13 +742,19 @@ export const DataSheet: DataSheetComponent = <T,>(props: DataSheetProps<T>) => {
   const isAllExpanded = createMemo(() => {
     if (!local.getChildren) return false;
     const allExpandable = collectAllExpandable(pagedItems(), local.getChildren);
-    return allExpandable.length > 0 && allExpandable.every((item) => expandedItems().includes(item));
+    return (
+      allExpandable.length > 0 && allExpandable.every((item) => expandedItems().includes(item))
+    );
   });
 
   return (
     <div
       data-sheet={local.persistKey ?? ""}
-      class={twMerge("flex flex-col", local.inset ? insetContainerClass : defaultContainerClass, local.class)}
+      class={twMerge(
+        "flex flex-col",
+        local.inset ? insetContainerClass : defaultContainerClass,
+        local.class,
+      )}
     >
       <Show when={!local.hideConfigBar && (modal != null || effectivePageCount() > 1)}>
         <div class={toolbarClass}>
@@ -743,13 +769,22 @@ export const DataSheet: DataSheetComponent = <T,>(props: DataSheetProps<T>) => {
           </Show>
           <div class="flex-1" />
           <Show when={modal != null}>
-            <button class={configButtonClass} onClick={openConfigModal} title="시트 설정" type="button">
+            <button
+              class={configButtonClass}
+              onClick={openConfigModal}
+              title="시트 설정"
+              type="button"
+            >
               <Icon icon={IconSettings} size="1em" />
             </button>
           </Show>
         </div>
       </Show>
-      <div data-sheet-scroll class={twMerge(dataSheetContainerClass, "flex-1 min-h-0")} style={local.contentStyle}>
+      <div
+        data-sheet-scroll
+        class={twMerge(dataSheetContainerClass, "flex-1 min-h-0")}
+        style={local.contentStyle}
+      >
         <table
           class={twMerge(tableClass, local.inset ? insetTableClass : undefined)}
           onKeyDown={onTableKeyDown}
@@ -800,7 +835,10 @@ export const DataSheet: DataSheetComponent = <T,>(props: DataSheetProps<T>) => {
                           <Icon
                             icon={IconChevronDown}
                             size="1em"
-                            class={clsx("transition-transform", isAllExpanded() ? "rotate-0" : "-rotate-90")}
+                            class={clsx(
+                              "transition-transform",
+                              isAllExpanded() ? "rotate-0" : "-rotate-90",
+                            )}
                           />
                         </button>
                       </div>
@@ -863,9 +901,13 @@ export const DataSheet: DataSheetComponent = <T,>(props: DataSheetProps<T>) => {
                       <Show when={cell}>
                         {(c) => {
                           const isSortable = () =>
-                            c().isLastRow && c().colIndex != null && effectiveColumns()[c().colIndex!].sortable;
+                            c().isLastRow &&
+                            c().colIndex != null &&
+                            effectiveColumns()[c().colIndex!].sortable;
                           const colKey = () =>
-                            c().colIndex != null ? effectiveColumns()[c().colIndex!].key : undefined;
+                            c().colIndex != null
+                              ? effectiveColumns()[c().colIndex!].key
+                              : undefined;
 
                           // 그룹 헤더의 고정 여부: colspan 범위 내 모든 컬럼이 fixed인지
                           const isGroupFixed = (): boolean => {
@@ -881,12 +923,15 @@ export const DataSheet: DataSheetComponent = <T,>(props: DataSheetProps<T>) => {
 
                           // 셀의 고정 컬럼 여부 (마지막 행이면 colIndex 기반, 그 외 그룹 기반)
                           const isCellFixed = () =>
-                            (c().isLastRow && c().colIndex != null && effectiveColumns()[c().colIndex!].fixed) ||
+                            (c().isLastRow &&
+                              c().colIndex != null &&
+                              effectiveColumns()[c().colIndex!].fixed) ||
                             isGroupFixed();
 
                           // 셀의 마지막 고정 여부
                           const isCellLastFixed = () => {
-                            if (c().isLastRow && c().colIndex != null) return isLastFixed(c().colIndex!);
+                            if (c().isLastRow && c().colIndex != null)
+                              return isLastFixed(c().colIndex!);
                             if (isGroupFixed()) {
                               const lastCol = cellColIndex() + c().colspan - 1;
                               return isLastFixed(lastCol);
@@ -932,7 +977,11 @@ export const DataSheet: DataSheetComponent = <T,>(props: DataSheetProps<T>) => {
                                   : c().text
                               }
                               ref={(el: HTMLElement) => {
-                                if (c().isLastRow && c().colIndex != null && effectiveColumns()[c().colIndex!].fixed) {
+                                if (
+                                  c().isLastRow &&
+                                  c().colIndex != null &&
+                                  effectiveColumns()[c().colIndex!].fixed
+                                ) {
                                   registerColumnRef(c().colIndex!, el);
                                 }
                               }}
@@ -958,9 +1007,15 @@ export const DataSheet: DataSheetComponent = <T,>(props: DataSheetProps<T>) => {
                                           <Icon icon={IconSortDescending} size="1em" />
                                         </Show>
                                         <Show when={sortDef() == null}>
-                                          <Icon icon={IconArrowsSort} size="1em" class="opacity-30" />
+                                          <Icon
+                                            icon={IconArrowsSort}
+                                            size="1em"
+                                            class="opacity-30"
+                                          />
+                                        </Show>
+                                        <Show when={sortIndex()}>
+                                          {(idx) => <sub>{idx()}</sub>}
                                         </Show>
-                                        <Show when={sortIndex()}>{(idx) => <sub>{idx()}</sub>}</Show>
                                       </div>
                                     );
                                   }}
@@ -968,13 +1023,17 @@ export const DataSheet: DataSheetComponent = <T,>(props: DataSheetProps<T>) => {
                               </div>
                               <Show
                                 when={
-                                  c().isLastRow && c().colIndex != null && effectiveColumns()[c().colIndex!].resizable
+                                  c().isLastRow &&
+                                  c().colIndex != null &&
+                                  effectiveColumns()[c().colIndex!].resizable
                                 }
                               >
                                 <div
                                   class={resizerClass}
                                   onClick={(e) => e.stopPropagation()}
-                                  onPointerDown={(e) => onResizerPointerdown(e, effectiveColumns()[c().colIndex!].key)}
+                                  onPointerDown={(e) =>
+                                    onResizerPointerdown(e, effectiveColumns()[c().colIndex!].key)
+                                  }
                                   onDblClick={(e) => {
                                     e.stopPropagation();
                                     onResizerDoubleClick(effectiveColumns()[c().colIndex!].key);
@@ -1054,7 +1113,11 @@ export const DataSheet: DataSheetComponent = <T,>(props: DataSheetProps<T>) => {
                           )}
                         </For>
                         <Show when={flat.hasChildren}>
-                          <button type="button" class={expandToggleClass} onClick={() => toggleExpand(flat.item)}>
+                          <button
+                            type="button"
+                            class={expandToggleClass}
+                            onClick={() => toggleExpand(flat.item)}
+                          >
                             <Icon
                               icon={IconChevronDown}
                               size="1em"
@@ -1092,11 +1155,16 @@ export const DataSheet: DataSheetComponent = <T,>(props: DataSheetProps<T>) => {
                             fallback={
                               /* single 모드 */
                               <Show when={selectable() === true}>
-                                <div class={featureCellBodyClickableClass} onClick={() => toggleSelect(flat.item)}>
+                                <div
+                                  class={featureCellBodyClickableClass}
+                                  onClick={() => toggleSelect(flat.item)}
+                                >
                                   <div
                                     class={twMerge(
                                       selectSingleClass,
-                                      isSelected() ? selectSingleSelectedClass : selectSingleUnselectedClass,
+                                      isSelected()
+                                        ? selectSingleSelectedClass
+                                        : selectSingleUnselectedClass,
                                     )}
                                   >
                                     <Icon icon={IconChevronRight} size="1em" />
@@ -1116,7 +1184,11 @@ export const DataSheet: DataSheetComponent = <T,>(props: DataSheetProps<T>) => {
                                 }
                                 setLastClickedRow(rowIndex());
                               }}
-                              title={typeof selectable() === "string" ? (selectable() as string) : undefined}
+                              title={
+                                typeof selectable() === "string"
+                                  ? (selectable() as string)
+                                  : undefined
+                              }
                             >
                               <Checkbox
                                 value={isSelected()}
@@ -1148,7 +1220,10 @@ export const DataSheet: DataSheetComponent = <T,>(props: DataSheetProps<T>) => {
                         left: reorderColLeft(),
                       }}
                     >
-                      <div class={reorderCellWrapperClass} onPointerDown={(e) => onReorderPointerDown(e, flat.item)}>
+                      <div
+                        class={reorderCellWrapperClass}
+                        onPointerDown={(e) => onReorderPointerDown(e, flat.item)}
+                      >
                         <div class={reorderHandleClass}>
                           <Icon icon={IconGripVertical} size="1em" />
                         </div>

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

@@ -3,7 +3,11 @@ import type { DataSheetColumnDef, DataSheetColumnProps } from "./types";
 import { normalizeHeader } from "./sheetUtils";
 
 export function isDataSheetColumnDef(value: unknown): value is DataSheetColumnDef<unknown> {
-  return value != null && typeof value === "object" && (value as Record<string, unknown>)["__type"] === "sheet-column";
+  return (
+    value != null &&
+    typeof value === "object" &&
+    (value as Record<string, unknown>)["__type"] === "sheet-column"
+  );
 }
 
 /* eslint-disable solid/reactivity -- plain object 반환 패턴으로 reactive context 불필요 */

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

@@ -2,7 +2,12 @@ import { type Component } from "solid-js";
 import { createStore, reconcile } from "solid-js/store";
 import clsx from "clsx";
 import { useDialogInstance } from "../../disclosure/DialogInstanceContext";
-import type { DataSheetConfig, DataSheetConfigColumn, DataSheetConfigColumnInfo, DataSheetReorderEvent } from "./types";
+import type {
+  DataSheetConfig,
+  DataSheetConfigColumn,
+  DataSheetConfigColumnInfo,
+  DataSheetReorderEvent,
+} from "./types";
 import { DataSheet } from "./DataSheet";
 import { Checkbox } from "../../form-control/checkbox/Checkbox";
 import { TextInput } from "../../form-control/field/TextInput";
@@ -66,7 +71,11 @@ export const DataSheetConfigDialog: Component<DataSheetConfigDialogProps> = (pro
     setEditItems(reconcile(items));
   }
 
-  function updateItem(key: string, field: keyof EditColumnItem, value: EditColumnItem[keyof EditColumnItem]): void {
+  function updateItem(
+    key: string,
+    field: keyof EditColumnItem,
+    value: EditColumnItem[keyof EditColumnItem],
+  ): void {
     const index = editItems.findIndex((item) => item.key === key);
     if (index >= 0) {
       setEditItems(index, { [field]: value } as Partial<EditColumnItem>);
@@ -104,17 +113,30 @@ export const DataSheetConfigDialog: Component<DataSheetConfigDialogProps> = (pro
     <div class={containerClass}>
       <div class={sheetWrapperClass}>
         <DataSheet items={editItems} inset hideConfigBar onItemsReorder={handleReorder}>
-          <DataSheet.Column<EditColumnItem> key="header" header="컬럼" class="px-2 py-1" sortable={false}>
+          <DataSheet.Column<EditColumnItem>
+            key="header"
+            header="컬럼"
+            class="px-2 py-1"
+            sortable={false}
+          >
             {(ctx) => ctx.item.headerText}
           </DataSheet.Column>
           <DataSheet.Column<EditColumnItem> key="fixed" header="고정" sortable={false}>
             {(ctx) => (
-              <Checkbox inset value={ctx.item.fixed} onValueChange={(v) => updateItem(ctx.item.key, "fixed", v)} />
+              <Checkbox
+                inset
+                value={ctx.item.fixed}
+                onValueChange={(v) => updateItem(ctx.item.key, "fixed", v)}
+              />
             )}
           </DataSheet.Column>
           <DataSheet.Column<EditColumnItem> key="hidden" header="숨김" sortable={false}>
             {(ctx) => (
-              <Checkbox inset value={ctx.item.hidden} onValueChange={(v) => updateItem(ctx.item.key, "hidden", v)} />
+              <Checkbox
+                inset
+                value={ctx.item.hidden}
+                onValueChange={(v) => updateItem(ctx.item.key, "hidden", v)}
+              />
             )}
           </DataSheet.Column>
           <DataSheet.Column<EditColumnItem> key="width" header="너비" sortable={false}>

package/src/components/data/sheet/sheetUtils.ts

@@ -7,7 +7,9 @@ export function normalizeHeader(header?: string | string[]): string[] {
   return header;
 }
 
-export function buildHeaderTable<TItem>(columns: DataSheetColumnDef<TItem>[]): (HeaderDef | null)[][] {
+export function buildHeaderTable<TItem>(
+  columns: DataSheetColumnDef<TItem>[],
+): (HeaderDef | null)[][] {
   if (columns.length === 0) return [];
 
   const maxDepth = Math.max(...columns.map((c) => c.header.length));
@@ -84,7 +86,13 @@ export function buildHeaderTable<TItem>(columns: DataSheetColumnDef<TItem>[]): (
 }
 
 // 같은 병합 그룹에 속하는지 확인 (행 0~endRow까지 같은 텍스트 시퀀스)
-function isSameGroup(padded: string[][], colA: number, colB: number, startRow: number, endRow: number): boolean {
+function isSameGroup(
+  padded: string[][],
+  colA: number,
+  colB: number,
+  startRow: number,
+  endRow: number,
+): boolean {
   for (let r = startRow; r < endRow; r++) {
     if (padded[colA][r] !== padded[colB][r]) return false;
   }
@@ -152,7 +160,8 @@ export function applySorting<TItem>(items: TItem[], sorts: SortingDef[]): TItem[
 
   let result = [...items];
   for (const sort of [...sorts].reverse()) {
-    const selector = (item: TItem) => objGetChainValue(item, sort.key) as string | number | undefined;
+    const selector = (item: TItem) =>
+      objGetChainValue(item, sort.key) as string | number | undefined;
     result = sort.desc ? result.orderByDesc(selector) : result.orderBy(selector);
   }
   return result;

package/src/components/disclosure/Collapse.tsx

@@ -1,4 +1,11 @@
-import { type JSX, type ParentComponent, splitProps, createSignal, onMount, onCleanup } from "solid-js";
+import {
+  type JSX,
+  type ParentComponent,
+  splitProps,
+  createSignal,
+  onMount,
+  onCleanup,
+} from "solid-js";
 import { createElementSize } from "@solid-primitives/resize-observer";
 import clsx from "clsx";
 import { twMerge } from "tailwind-merge";
@@ -23,7 +30,12 @@ export interface CollapseProps extends JSX.HTMLAttributes<HTMLDivElement> {
   open?: boolean;
 }
 
-const transitionClass = clsx("transition-[margin-top]", "duration-200", "ease-out", "motion-reduce:transition-none");
+const transitionClass = clsx(
+  "transition-[margin-top]",
+  "duration-200",
+  "ease-out",
+  "motion-reduce:transition-none",
+);
 
 export const Collapse: ParentComponent<CollapseProps> = (props) => {
   const [local, rest] = splitProps(props, ["children", "class", "style", "open"]);
@@ -54,7 +66,6 @@ export const Collapse: ParentComponent<CollapseProps> = (props) => {
       data-collapse
       class={twMerge("block", local.class)}
       style={mergeStyles(local.style, { overflow: "hidden" })}
-      aria-hidden={!isOpen()}
     >
       <div
         ref={setContentRef}

package/src/components/disclosure/Dialog.tsx

@@ -1,4 +1,13 @@
-import { type JSX, type ParentComponent, createEffect, onCleanup, Show, splitProps, For, useContext } from "solid-js";
+import {
+  type JSX,
+  type ParentComponent,
+  createEffect,
+  onCleanup,
+  Show,
+  splitProps,
+  For,
+  useContext,
+} from "solid-js";
 import { Portal } from "solid-js/web";
 import clsx from "clsx";
 import { twMerge } from "tailwind-merge";
@@ -58,7 +67,15 @@ export interface DialogProps {
   children: JSX.Element;
 }
 
-type ResizeDirection = "left" | "right" | "top" | "bottom" | "top-left" | "top-right" | "bottom-left" | "bottom-right";
+type ResizeDirection =
+  | "left"
+  | "right"
+  | "top"
+  | "bottom"
+  | "top-left"
+  | "top-right"
+  | "bottom-left"
+  | "bottom-right";
 
 const RESIZE_DIRECTIONS: ResizeDirection[] = [
   "left",
@@ -171,7 +188,8 @@ export const Dialog: ParentComponent<DialogProps> = (props) => {
   let wrapperRef: HTMLDivElement | undefined;
 
   const closeOnEscape = () => local.closeOnEscape ?? dialogDefaults?.().closeOnEscape ?? true;
-  const closeOnBackdrop = () => local.closeOnBackdrop ?? dialogDefaults?.().closeOnBackdrop ?? false;
+  const closeOnBackdrop = () =>
+    local.closeOnBackdrop ?? dialogDefaults?.().closeOnBackdrop ?? false;
 
   // Escape 키 감지
   createEffect(() => {
@@ -423,7 +441,9 @@ export const Dialog: ParentComponent<DialogProps> = (props) => {
       "mx-auto",
       "w-fit min-w-[200px]",
       "bg-white dark:bg-base-800",
-      local.float ? clsx("shadow-md dark:shadow-black/30", "border", borderSubtle) : "shadow-2xl dark:shadow-black/40",
+      local.float
+        ? clsx("shadow-md dark:shadow-black/30", "border", borderSubtle)
+        : "shadow-2xl dark:shadow-black/40",
       local.fill ? "rounded-none border-none" : "rounded-lg",
       "overflow-hidden",
       "flex flex-col",
@@ -470,7 +490,11 @@ export const Dialog: ParentComponent<DialogProps> = (props) => {
               <div
                 data-modal-header
                 class={clsx(headerClass(), "touch-none")}
-                style={typeof local.headerStyle === "string" ? mergeStyles(local.headerStyle) : local.headerStyle}
+                style={
+                  typeof local.headerStyle === "string"
+                    ? mergeStyles(local.headerStyle)
+                    : local.headerStyle
+                }
                 onPointerDown={handleHeaderPointerDown}
               >
                 <h5 class={clsx("flex-1", "px-4 py-2", "text-sm font-semibold")}>{local.title}</h5>
@@ -506,7 +530,12 @@ export const Dialog: ParentComponent<DialogProps> = (props) => {
                 {(direction) => (
                   <div
                     data-resize-bar={direction}
-                    class={clsx("absolute", "touch-none", resizePositionMap[direction], resizeCursorMap[direction])}
+                    class={clsx(
+                      "absolute",
+                      "touch-none",
+                      resizePositionMap[direction],
+                      resizeCursorMap[direction],
+                    )}
                     onPointerDown={(e) => handleResizeBarPointerDown(e, direction)}
                   />
                 )}

package/src/components/disclosure/DialogContext.ts

@@ -27,7 +27,10 @@ export interface DialogShowOptions {
 }
 
 export interface DialogContextValue {
-  show<T = undefined>(factory: () => JSX.Element, options: DialogShowOptions): Promise<T | undefined>;
+  show<T = undefined>(
+    factory: () => JSX.Element,
+    options: DialogShowOptions,
+  ): Promise<T | undefined>;
 }
 
 export const DialogContext = createContext<DialogContextValue>();

package/src/components/disclosure/DialogProvider.tsx

@@ -1,4 +1,11 @@
-import { type Accessor, type ParentComponent, createSignal, For, splitProps, type JSX } from "solid-js";
+import {
+  type Accessor,
+  type ParentComponent,
+  createSignal,
+  For,
+  splitProps,
+  type JSX,
+} from "solid-js";
 import {
   DialogContext,
   DialogDefaultsContext,
@@ -46,7 +53,10 @@ export const DialogProvider: ParentComponent<DialogProviderProps> = (props) => {
 
   const [entries, setEntries] = createSignal<DialogEntry[]>([]);
 
-  const show = <T,>(factory: () => JSX.Element, options: DialogShowOptions): Promise<T | undefined> => {
+  const show = <T,>(
+    factory: () => JSX.Element,
+    options: DialogShowOptions,
+  ): Promise<T | undefined> => {
     return new Promise<T | undefined>((resolve) => {
       const id = String(nextId++);
       const [open, setOpen] = createSignal(true);
@@ -122,7 +132,9 @@ export const DialogProvider: ParentComponent<DialogProviderProps> = (props) => {
                 headerStyle={entry.options.headerStyle}
                 canDeactivate={entry.options.canDeactivate}
               >
-                <DialogInstanceContext.Provider value={instance}>{entry.factory()}</DialogInstanceContext.Provider>
+                <DialogInstanceContext.Provider value={instance}>
+                  {entry.factory()}
+                </DialogInstanceContext.Provider>
               </Dialog>
             );
           }}

package/src/components/disclosure/Dropdown.tsx

@@ -1,4 +1,12 @@
-import { type JSX, type ParentComponent, createSignal, createEffect, onCleanup, Show, splitProps } from "solid-js";
+import {
+  type JSX,
+  type ParentComponent,
+  createSignal,
+  createEffect,
+  onCleanup,
+  Show,
+  splitProps,
+} from "solid-js";
 import { createResizeObserver } from "@solid-primitives/resize-observer";
 import { createMountTransition } from "../../hooks/createMountTransition";
 import { Portal } from "solid-js/web";
@@ -261,7 +269,9 @@ export const Dropdown: ParentComponent<DropdownProps> = (props) => {
 
     const dir = direction();
     const focusables = [
-      ...popup.querySelectorAll<HTMLElement>('[tabindex]:not([tabindex="-1"]), button, [data-list-item]'),
+      ...popup.querySelectorAll<HTMLElement>(
+        '[tabindex]:not([tabindex="-1"]), button, [data-list-item]',
+      ),
     ];
 
     if (dir === "down") {

package/src/components/disclosure/Tabs.tsx

@@ -40,11 +40,18 @@ function TabsTabInner(props: TabsTabProps) {
     }
   };
 
-  const baseClass = clsx("relative cursor-pointer select-none font-medium", "transition-colors", "-mb-px");
+  const baseClass = clsx(
+    "relative cursor-pointer select-none font-medium",
+    "transition-colors",
+    "-mb-px",
+  );
 
   const stateClass = () =>
     isSelected()
-      ? clsx("border-b-2 border-primary-500 text-primary-600", "dark:border-primary-400 dark:text-primary-400")
+      ? clsx(
+          "border-b-2 border-primary-500 text-primary-600",
+          "dark:border-primary-400 dark:text-primary-400",
+        )
       : clsx(
           "border-b-2 border-transparent",
           "text-base-500 hover:border-base-300 hover:text-base-700",
@@ -60,7 +67,13 @@ function TabsTabInner(props: TabsTabProps) {
       aria-selected={isSelected()}
       aria-disabled={props.disabled ?? false}
       tabIndex={props.disabled ? -1 : 0}
-      class={twMerge(baseClass, sizeClasses(), stateClass(), props.disabled && disabledClass, props.class)}
+      class={twMerge(
+        baseClass,
+        sizeClasses(),
+        stateClass(),
+        props.disabled && disabledClass,
+        props.class,
+      )}
       onClick={() => {
         if (!props.disabled) {
           ctx.select(props.value);
@@ -97,7 +110,14 @@ interface TabsComponent {
 }
 
 const TabsInner: ParentComponent<TabsProps> = (props) => {
-  const [local, rest] = splitProps(props, ["value", "onValueChange", "size", "class", "style", "children"]);
+  const [local, rest] = splitProps(props, [
+    "value",
+    "onValueChange",
+    "size",
+    "class",
+    "style",
+    "children",
+  ]);
 
   const [value, setValue] = createControllableSignal<string | undefined>({
     value: () => local.value,
@@ -112,7 +132,11 @@ const TabsInner: ParentComponent<TabsProps> = (props) => {
     size: () => local.size,
   };
 
-  const baseClass = clsx("inline-flex items-center gap-1", "border-b border-base-200", "dark:border-base-700");
+  const baseClass = clsx(
+    "inline-flex items-center gap-1",
+    "border-b border-base-200",
+    "dark:border-base-700",
+  );
 
   return (
     <TabsContext.Provider value={contextValue}>

package/src/components/display/Alert.tsx

@@ -11,10 +11,9 @@ export interface AlertProps extends JSX.HTMLAttributes<HTMLDivElement> {
 
 const baseClass = clsx("block", "p-3", "rounded");
 
-const themeClasses = Object.fromEntries(Object.entries(themeTokens).map(([theme, t]) => [theme, t.light])) as Record<
-  AlertTheme,
-  string
->;
+const themeClasses = Object.fromEntries(
+  Object.entries(themeTokens).map(([theme, t]) => [theme, t.light]),
+) as Record<AlertTheme, string>;
 
 export const Alert: ParentComponent<AlertProps> = (props) => {
   const [local, rest] = splitProps(props, ["children", "class", "theme"]);

package/src/components/display/Card.tsx

@@ -1,7 +1,6 @@
 import { type JSX, type ParentComponent, splitProps } from "solid-js";
 import clsx from "clsx";
 import { twMerge } from "tailwind-merge";
-import "./Card.css";
 
 export interface CardProps extends JSX.HTMLAttributes<HTMLDivElement> {}
 
@@ -12,7 +11,7 @@ const baseClass = clsx(
   "shadow focus-within:shadow-md hover:shadow-md",
   "dark:shadow-black/20 dark:focus-within:shadow-black/30 dark:hover:shadow-black/30",
   "transition-shadow duration-300",
-  "animate-card-in",
+  "animate-fade-in",
 );
 
 export const Card: ParentComponent<CardProps> = (props) => {