@simplysm/solid 13.0.75 → 13.0.76

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

@@ -1,13 +1,12 @@
 import clsx from "clsx";
-import { borderDefault, type ComponentSize } from "../../../styles/tokens.styles";
+import { border } from "../../../styles/base.styles";
+import { type ComponentSize, pad } from "../../../styles/control.styles";
 
 // Base item style
 export const listItemBaseClass = clsx(
   "flex",
   "items-center",
   "gap-2",
-  "py-1",
-  "px-1.5",
   "m-px",
   "cursor-pointer",
   "rounded-md",
@@ -19,10 +18,11 @@ export const listItemBaseClass = clsx(
 
 // Size-based styles
 export const listItemSizeClasses: Record<ComponentSize, string> = {
-  xs: clsx("px-0.5 py-0"),
-  sm: clsx("px-1 py-0.5"),
-  lg: clsx("px-2 py-1.5"),
-  xl: clsx("px-3 py-2"),
+  default: pad.default,
+  xs: pad.xs,
+  sm: pad.sm,
+  lg: pad.lg,
+  xl: pad.xl,
 };
 
 // Selected state
@@ -41,7 +41,7 @@ export const listItemDisabledClass = clsx("pointer-events-none cursor-auto opaci
 export const listItemReadonlyClass = clsx("cursor-auto select-text hover:bg-transparent");
 
 // Indent guide (for nested items)
-export const listItemIndentGuideClass = clsx("ml-4 w-2 border-l", borderDefault);
+export const listItemIndentGuideClass = clsx("ml-4 w-2 border-l", border.default);
 
 // Item content area
 export const listItemContentClass = clsx("flex flex-1 flex-row", "items-center gap-1", "text-left");

package/src/components/data/list/ListItem.tsx

@@ -1,6 +1,5 @@
 import {
   type Component,
-  createContext,
   type JSX,
   type ParentComponent,
   Show,
@@ -8,13 +7,11 @@ import {
 } from "solid-js";
 import { IconChevronDown, type IconProps } from "@tabler/icons-solidjs";
 import { Icon } from "../../display/Icon";
-import clsx from "clsx";
 import { twMerge } from "tailwind-merge";
 import { ripple } from "../../../directives/ripple";
 import { Collapse } from "../../disclosure/Collapse";
 import { createControllableSignal } from "../../../hooks/createControllableSignal";
-import { createSlotComponent } from "../../../helpers/createSlotComponent";
-import { createSlotSignal, type SlotAccessor } from "../../../hooks/createSlotSignal";
+import { createSlot } from "../../../helpers/createSlot";
 import { useListContext } from "./ListContext";
 import { List } from "./List";
 import {
@@ -27,19 +24,11 @@ import {
   listItemContentClass,
   getListItemSelectedIconClass,
 } from "./ListItem.styles";
-import type { ComponentSize } from "../../../styles/tokens.styles";
+import type { ComponentSize } from "../../../styles/control.styles";
 
 void ripple;
 
-interface ListItemSlotsContextValue {
-  setChildren: (content: SlotAccessor) => void;
-}
-
-const ListItemSlotsContext = createContext<ListItemSlotsContextValue>();
-
-const chevronClass = clsx("transition-transform duration-200 motion-reduce:transition-none");
-
-const ListItemChildren = createSlotComponent(ListItemSlotsContext, (ctx) => ctx.setChildren);
+const [ListItemChildren, createChildrenSlotAccessor] = createSlot<{ children: JSX.Element }>();
 
 export interface ListItemProps extends Omit<
   JSX.ButtonHTMLAttributes<HTMLButtonElement>,
@@ -63,7 +52,7 @@ export interface ListItemProps extends Omit<
   /**
    * Readonly (click disabled, normal color retained)
    */
-  readonly?: boolean;
+  readOnly?: boolean;
 
   /**
    * Disabled (unclickable, dimmed)
@@ -112,11 +101,7 @@ export interface ListItemProps extends Omit<
  * </List.Item>
  * ```
  */
-interface ListItemComponent extends ParentComponent<ListItemProps> {
-  Children: typeof ListItemChildren;
-}
-
-export const ListItem: ListItemComponent = (props) => {
+const ListItemInner: ParentComponent<ListItemProps> = (props) => {
   const [local, rest] = splitProps(props, [
     "children",
     "class",
@@ -124,7 +109,7 @@ export const ListItem: ListItemComponent = (props) => {
     "open",
     "onOpenChange",
     "selected",
-    "readonly",
+    "readOnly",
     "disabled",
     "selectedIcon",
     "size",
@@ -139,13 +124,13 @@ export const ListItem: ListItemComponent = (props) => {
     onChange: () => local.onOpenChange,
   });
 
-  const [childrenSlot, setChildrenSlot] = createSlotSignal();
+  const [childrenSlot, ChildrenProvider] = createChildrenSlotAccessor();
   const hasChildren = () => childrenSlot() !== undefined;
 
-  const useRipple = () => !(local.readonly || local.disabled);
+  const useRipple = () => !(local.readOnly || local.disabled);
 
   const onHeaderClick = (e: MouseEvent) => {
-    if (local.readonly || local.disabled) return;
+    if (local.readOnly || local.disabled) return;
 
     if (hasChildren()) {
       setOpenState((v: boolean) => !v);
@@ -157,19 +142,19 @@ export const ListItem: ListItemComponent = (props) => {
   const getHeaderClassName = () =>
     twMerge(
       listItemBaseClass,
-      local.size && listItemSizeClasses[local.size],
+      listItemSizeClasses[local.size ?? "default"],
       local.selected && listItemSelectedClass,
-      local.readonly && listItemReadonlyClass,
+      local.readOnly && listItemReadonlyClass,
       local.disabled && listItemDisabledClass,
       local.class,
     );
 
-  const getChevronClassName = () => twMerge(chevronClass, openState() ? "rotate-0" : "rotate-90");
+  const getChevronClassName = () => twMerge("transition-transform duration-200 motion-reduce:transition-none", openState() ? "rotate-0" : "rotate-90");
 
   const getSelectedIconClassName = () => getListItemSelectedIconClass(local.selected ?? false);
 
   return (
-    <ListItemSlotsContext.Provider value={{ setChildren: setChildrenSlot }}>
+    <ChildrenProvider>
       <button
         {...rest}
         type="button"
@@ -205,13 +190,17 @@ export const ListItem: ListItemComponent = (props) => {
           <div class="flex">
             <div class={listItemIndentGuideClass} />
             <List inset class="flex-1">
-              {childrenSlot()!()}
+              {childrenSlot()!.children}
             </List>
           </div>
         </Collapse>
       </Show>
-    </ListItemSlotsContext.Provider>
+    </ChildrenProvider>
   );
 };
 
-ListItem.Children = ListItemChildren;
+//#region Export
+export const ListItem = Object.assign(ListItemInner, {
+  Children: ListItemChildren,
+});
+//#endregion

package/src/components/data/sheet/DataSheet.styles.ts

@@ -1,5 +1,6 @@
 import clsx from "clsx";
-import { borderDefault, borderSubtle } from "../../../styles/tokens.styles";
+import { border } from "../../../styles/base.styles";
+import { pad } from "../../../styles/control.styles";
 
 export const dataSheetContainerClass = clsx(
   "relative",
@@ -20,12 +21,12 @@ export const thClass = clsx(
   "align-middle",
 );
 
-export const thContentClass = clsx("px-2 py-1");
+export const thContentClass = clsx(pad.default);
 
 export const tdClass = clsx(
   "bg-white dark:bg-base-950",
   "border-b border-r",
-  borderSubtle,
+  border.subtle,
   "truncate",
   "p-0",
   "align-top",
@@ -42,7 +43,7 @@ export const insetTableClass = clsx(
   "[&_tbody>tr:last-child>td]:border-b-0",
 );
 
-export const defaultContainerClass = clsx("border", borderDefault, "rounded");
+export const defaultContainerClass = clsx("border", border.default, "rounded");
 
 // Sortable header — shows clickable indicator
 export const sortableThClass = clsx("cursor-pointer", "hover:underline");
@@ -51,10 +52,15 @@ export const sortableThClass = clsx("cursor-pointer", "hover:underline");
 export const sortIconClass = clsx("bg-base-100 dark:bg-base-900");
 
 // Top toolbar (settings button + pagination)
-export const toolbarClass = clsx("flex items-center gap-2", "px-2 py-1", "border-b", borderDefault);
+export const toolbarClass = clsx(
+  "flex items-center gap-2",
+  pad.default,
+  "border-b",
+  border.default,
+);
 
 // Fixed column base (sticky)
-export const fixedClass = "sticky";
+export const fixedClass = clsx`sticky`;
 
 // Visual effect for fixed/unfixed boundary — applied to last cell of fixed column
 export const fixedLastClass = clsx("border-r border-r-base-400", "dark:border-r-base-600");
@@ -80,7 +86,7 @@ export const resizeIndicatorClass = clsx(
 export const featureThClass = clsx(
   "bg-base-100 dark:bg-base-800",
   "border-b border-r",
-  borderDefault,
+  border.default,
   "p-0",
   "align-middle",
 );
@@ -88,7 +94,7 @@ export const featureThClass = clsx(
 export const featureTdClass = clsx(
   "bg-base-50 dark:bg-base-900",
   "border-b border-r",
-  borderSubtle,
+  border.subtle,
   "p-0",
   "align-middle",
   "h-px",
@@ -98,7 +104,7 @@ export const featureTdClass = clsx(
 export const expandIndentGuideClass = clsx("mr-0.5 w-3 self-stretch", "flex justify-end");
 
 // Expand column depth guide — vertical line
-export const expandIndentGuideLineClass = clsx("w-0 self-stretch", "border-r", borderDefault);
+export const expandIndentGuideLineClass = clsx("w-0 self-stretch", "border-r", border.default);
 
 // Expand toggle button
 export const expandToggleClass = clsx(
@@ -172,3 +178,20 @@ export const configButtonClass = clsx(
   "hover:bg-base-200 dark:hover:bg-base-700",
   "cursor-pointer",
 );
+
+// Body row — hover/selected/drag overlay via ::after pseudo-element
+export const trRowClass = clsx(
+  "relative",
+  // ::after base positioning (content is set per-state so it only renders when needed)
+  "after:pointer-events-none after:absolute after:inset-0 after:z-10",
+  // hover overlay
+  "hover:after:bg-black/[0.03] hover:after:content-['']",
+  "dark:hover:after:bg-white/[0.04]",
+  // selected row overlay
+  "[&[data-selected]]:after:bg-black/[0.05] [&[data-selected]]:after:content-['']",
+  "dark:[&[data-selected]]:after:bg-white/[0.06]",
+  // dragging row
+  "[&[data-dragging]>td]:opacity-50",
+  // drop target (inside) overlay
+  "[&[data-drag-over=inside]]:after:bg-blue-500/10 [&[data-drag-over=inside]]:after:content-['']",
+);