@simplysm/solid 13.0.75 → 13.0.76

package/src/components/data/Pagination.tsx

@@ -9,24 +9,24 @@ import {
 } from "@tabler/icons-solidjs";
 import { Button } from "../form-control/Button";
 import { Icon } from "../display/Icon";
-import { type ComponentSizeCompact } from "../../styles/tokens.styles";
+import { type ComponentSize, gap } from "../../styles/control.styles";
 
 export interface PaginationProps extends JSX.HTMLAttributes<HTMLElement> {
   page: number;
   onPageChange?: (page: number) => void;
   totalPageCount: number;
   displayPageCount?: number;
-  size?: ComponentSizeCompact;
+  size?: ComponentSize;
 }
 
-const baseClass = clsx("inline-flex items-center");
-
 const btnClass = clsx("border-none font-normal");
 
-const gapClasses: Record<ComponentSizeCompact | "default", string> = {
-  default: "gap-1",
-  sm: "gap-0.5",
-  lg: "gap-1.5",
+const gapClasses: Record<ComponentSize, string> = {
+  default: gap.default,
+  xs: gap.xs,
+  sm: gap.sm,
+  lg: gap.lg,
+  xl: gap.xl,
 };
 
 export const Pagination: Component<PaginationProps> = (props) => {
@@ -54,7 +54,7 @@ export const Pagination: Component<PaginationProps> = (props) => {
   const hasPrev = () => (pages()[0] ?? 1) > 1;
   const hasNext = () => (pages()[pages().length - 1] ?? 1) < local.totalPageCount;
 
-  const getClassName = () => twMerge(baseClass, gapClasses[local.size ?? "default"], local.class);
+  const getClassName = () => twMerge("inline-flex items-center", gapClasses[local.size ?? "default"], local.class);
 
   return (
     <nav {...rest} data-pagination class={getClassName()}>

package/src/components/data/Table.tsx

@@ -1,43 +1,76 @@
-import { type JSX, type ParentComponent, splitProps } from "solid-js";
+import { createContext, type JSX, type ParentComponent, splitProps, useContext } from "solid-js";
 import clsx from "clsx";
 import { twMerge } from "tailwind-merge";
+import { bg, border } from "../../styles/base.styles";
+import { pad } from "../../styles/control.styles";
 
 export interface TableProps extends JSX.HTMLAttributes<HTMLTableElement> {
   inset?: boolean;
 }
 
-const baseClass = clsx(
-  "w-auto",
-  "border-separate border-spacing-0",
-  "border-b border-r border-base-300 dark:border-base-600",
-  "rounded",
-  "overflow-hidden",
-  // th
-  "[&_th]:border-l [&_th]:border-t [&_th]:border-base-300 [&_th]:dark:border-base-600",
-  "[&_th]:px-2 [&_th]:py-1",
-  "[&_th]:bg-base-100 [&_th]:text-left [&_th]:font-bold",
-  "[&_th]:dark:bg-base-800",
-  // td
-  "[&_td]:border-l [&_td]:border-t [&_td]:border-base-300 [&_td]:dark:border-base-600",
-  "[&_td]:px-2 [&_td]:py-1",
-);
-
-const insetClass = clsx(
-  "border-b-0 border-r-0",
-  "[&>*>tr>*:first-child]:border-l-0",
-  "[&>*:first-child>tr:first-child>*]:border-t-0",
-  "rounded-none",
-  "overflow-auto",
-);
-
-export const Table: ParentComponent<TableProps> = (props) => {
-  const [local, rest] = splitProps(props, ["children", "class", "inset"]);
+const TableContext = createContext<{ inset: boolean }>({ inset: false });
+
+// -- Sub-components --
+
+const TableTr: ParentComponent<JSX.HTMLAttributes<HTMLTableRowElement>> = (props) => {
+  const [local, rest] = splitProps(props, ["children", "class"]);
+  return <tr class={twMerge(local.class)} {...rest}>{local.children}</tr>;
+};
 
-  const getClassName = () => twMerge(baseClass, local.inset && insetClass, local.class);
+const TableTh: ParentComponent<JSX.ThHTMLAttributes<HTMLTableCellElement>> = (props) => {
+  const [local, rest] = splitProps(props, ["children", "class"]);
+  const ctx = useContext(TableContext);
+  return (
+    <th
+      class={twMerge(
+        clsx("border-l border-t", border.default, pad.default, bg.muted, "text-left font-bold"),
+        ctx.inset && "first:border-l-0",
+        local.class,
+      )}
+      {...rest}
+    >
+      {local.children}
+    </th>
+  );
+};
 
+const TableTd: ParentComponent<JSX.TdHTMLAttributes<HTMLTableCellElement>> = (props) => {
+  const [local, rest] = splitProps(props, ["children", "class"]);
+  const ctx = useContext(TableContext);
   return (
-    <table data-table class={getClassName()} {...rest}>
+    <td
+      class={twMerge(
+        clsx("border-l border-t", border.default, pad.default),
+        ctx.inset && "first:border-l-0",
+        local.class,
+      )}
+      {...rest}
+    >
       {local.children}
-    </table>
+    </td>
   );
 };
+
+// -- Main component --
+
+const TableBase: ParentComponent<TableProps> = (props) => {
+  const [local, rest] = splitProps(props, ["children", "class", "inset"]);
+
+  return (
+    <TableContext.Provider value={{ get inset() { return !!local.inset; } }}>
+      <table
+        data-table
+        class={twMerge(
+          clsx("w-auto border-separate border-spacing-0 border-b border-r", border.default, "overflow-hidden rounded"),
+          local.inset && clsx("border-b-0 border-r-0", "[&>*:first-child>tr:first-child>*]:border-t-0", "overflow-auto rounded-none"),
+          local.class,
+        )}
+        {...rest}
+      >
+        {local.children}
+      </table>
+    </TableContext.Provider>
+  );
+};
+
+export const Table = Object.assign(TableBase, { Row: TableTr, HeaderCell: TableTh, Cell: TableTd });

package/src/components/data/calendar/Calendar.tsx

@@ -3,7 +3,9 @@ import { DateOnly } from "@simplysm/core-common";
 import clsx from "clsx";
 import { twMerge } from "tailwind-merge";
 import { createControllableSignal } from "../../../hooks/createControllableSignal";
-import { useI18n } from "../../../providers/i18n/I18nContext";
+import { bg, border, text } from "../../../styles/base.styles";
+import { gap, pad } from "../../../styles/control.styles";
+import { useI18n } from "../../../providers/i18n/I18nProvider";
 
 export interface CalendarProps<TValue> extends Omit<
   JSX.HTMLAttributes<HTMLTableElement>,
@@ -18,30 +20,6 @@ export interface CalendarProps<TValue> extends Omit<
   minDaysInFirstWeek?: number;
 }
 
-const baseClass = clsx(
-  "w-full",
-  "border-separate border-spacing-0",
-  "border-b border-r border-base-300",
-  "dark:border-base-600",
-  "overflow-hidden rounded",
-  // th
-  "[&_th]:border-l [&_th]:border-t [&_th]:border-base-300 [&_th]:dark:border-base-600",
-  "[&_th]:px-2 [&_th]:py-1",
-  "[&_th]:bg-base-100 [&_th]:text-center [&_th]:text-sm [&_th]:font-bold",
-  "[&_th]:dark:bg-base-800",
-  // td
-  "[&_td]:border-l [&_td]:border-t [&_td]:border-base-300 [&_td]:dark:border-base-600",
-  "[&_td]:p-1 [&_td]:align-top",
-);
-
-const notCurrentClass = clsx("[&.not-current]:bg-base-50", "[&.not-current]:dark:bg-base-900");
-
-const dayClass = clsx("mb-1 text-sm text-base-500", "dark:text-base-400");
-
-const notCurrentDayClass = clsx("text-base-300", "dark:text-base-600");
-
-const contentClass = clsx("flex flex-col gap-1");
-
 function CalendarBase<TValue>(props: CalendarProps<TValue>) {
   const [local, rest] = splitProps(props, [
     "class",
@@ -109,13 +87,36 @@ function CalendarBase<TValue>(props: CalendarProps<TValue>) {
     return result;
   });
 
-  const getClassName = () => twMerge(baseClass, local.class);
-
   return (
-    <table data-calendar class={getClassName()} {...rest}>
+    <table
+      data-calendar
+      class={twMerge(
+        clsx(
+          "w-full border-separate border-spacing-0 border-b border-r",
+          border.default,
+          "overflow-hidden rounded",
+        ),
+        local.class,
+      )}
+      {...rest}
+    >
       <thead>
         <tr>
-          <For each={weekHeaders()}>{(header) => <th>{header}</th>}</For>
+          <For each={weekHeaders()}>
+            {(header) => (
+              <th
+                class={clsx(
+                  "border-l border-t",
+                  border.default,
+                  pad.default,
+                  bg.muted,
+                  "text-center text-sm font-bold",
+                )}
+              >
+                {header}
+              </th>
+            )}
+          </For>
         </tr>
       </thead>
       <tbody>
@@ -126,20 +127,21 @@ function CalendarBase<TValue>(props: CalendarProps<TValue>) {
                 {(cell) => (
                   <td
                     class={twMerge(
-                      notCurrentClass,
+                      clsx("border-l border-t", border.default, "p-1 align-top"),
+                      "[&.not-current]:bg-base-50 [&.not-current]:dark:bg-base-900",
                       cell.date.month !== yearMonth().month && "not-current",
                     )}
                   >
                     <div
-                      class={
-                        cell.date.month !== yearMonth().month
-                          ? twMerge(dayClass, notCurrentDayClass)
-                          : dayClass
-                      }
+                      class={twMerge(
+                        "mb-1 text-sm",
+                        text.muted,
+                        cell.date.month !== yearMonth().month && "text-base-300 dark:text-base-600",
+                      )}
                     >
                       {cell.date.day}
                     </div>
-                    <div class={contentClass}>
+                    <div class={clsx("flex flex-col", gap.default)}>
                       <For each={cell.items}>
                         {(entry) => local.renderItem(entry.item, entry.index)}
                       </For>

package/src/components/data/kanban/{Kanban.css → Kanban.animate.css}

@@ -6,7 +6,5 @@
 
   to {
     opacity: 1;
-
-    /* transform: scaleY(1); */
   }
 }

package/src/components/data/kanban/Kanban.tsx

@@ -1,4 +1,5 @@
 import {
+  createContext,
   createEffect,
   createMemo,
   createSignal,
@@ -8,6 +9,9 @@ import {
   type ParentComponent,
   Show,
   splitProps,
+  useContext,
+  type Accessor,
+  type Setter,
 } from "solid-js";
 import clsx from "clsx";
 import { twMerge } from "tailwind-merge";
@@ -17,29 +21,89 @@ import { Checkbox } from "../../form-control/checkbox/Checkbox";
 import { Icon } from "../../display/Icon";
 import { BusyContainer } from "../../feedback/busy/BusyContainer";
 import { createControllableSignal } from "../../../hooks/createControllableSignal";
-import { createSlotComponent } from "../../../helpers/createSlotComponent";
-import { createSlotSignal } from "../../../hooks/createSlotSignal";
-import "./Kanban.css";
-import { iconButtonBase } from "../../../styles/patterns.styles";
-import {
-  KanbanContext,
-  KanbanLaneContext,
-  useKanbanContext,
-  useKanbanLaneContext,
-  type KanbanCardRef,
-  type KanbanContextValue,
-  type KanbanDropInfo,
-  type KanbanDropTarget,
-  type KanbanLaneContextValue,
-} from "./KanbanContext";
+import { bg, text } from "../../../styles/base.styles";
+import { gap, pad } from "../../../styles/control.styles";
+import { createSlot } from "../../../helpers/createSlot";
+import "./Kanban.animate.css";
+import { Button } from "../../form-control/Button";
+
+// ── Types ──────────────────────────────────────────────────────
+
+export interface KanbanCardRef<L = unknown, T = unknown> {
+  value: T | undefined;
+  laneValue: L | undefined;
+  heightOnDrag: number;
+}
+
+export interface KanbanDropInfo<L = unknown, T = unknown> {
+  sourceValue?: T;
+  targetLaneValue?: L;
+  targetCardValue?: T;
+  position?: "before" | "after";
+}
+
+export interface KanbanDropTarget<T = unknown> {
+  element: HTMLElement;
+  value: T | undefined;
+  position: "before" | "after";
+}
+
+// ── Board Context ──────────────────────────────────────────────
+
+export interface KanbanContextValue<L = unknown, T = unknown> {
+  dragCard: Accessor<KanbanCardRef<L, T> | undefined>;
+  setDragCard: Setter<KanbanCardRef<L, T> | undefined>;
+  onDropTo: (
+    targetLaneValue: L | undefined,
+    targetCardValue: T | undefined,
+    position: "before" | "after" | undefined,
+  ) => void;
+
+  // Selection (Phase 4)
+  selectedValues: Accessor<T[]>;
+  setSelectedValues: (updater: T[] | ((prev: T[]) => T[])) => void;
+  toggleSelection: (value: T) => void;
+}
+
+export const KanbanContext = createContext<KanbanContextValue>();
+
+export function useKanbanContext(): KanbanContextValue {
+  const context = useContext(KanbanContext);
+  if (!context) {
+    throw new Error("useKanbanContext can only be used inside Kanban");
+  }
+  return context;
+}
+
+// ── Lane Context ───────────────────────────────────────────────
+
+export interface KanbanLaneContextValue<L = unknown, T = unknown> {
+  value: Accessor<L | undefined>;
+  dropTarget: Accessor<KanbanDropTarget<T> | undefined>;
+  setDropTarget: (target: KanbanDropTarget<T> | undefined) => void;
+
+  // Card registration (Phase 4)
+  registerCard: (id: string, info: { value: T | undefined; selectable: boolean }) => void;
+  unregisterCard: (id: string) => void;
+}
+
+export const KanbanLaneContext = createContext<KanbanLaneContextValue>();
+
+export function useKanbanLaneContext(): KanbanLaneContextValue {
+  const context = useContext(KanbanLaneContext);
+  if (!context) {
+    throw new Error("useKanbanLaneContext can only be used inside Kanban.Lane");
+  }
+  return context;
+}
 
 // ─── KanbanLaneTitle ─────────────────────────────────────────────
 
-const KanbanLaneTitle = createSlotComponent(KanbanLaneContext, (ctx) => ctx.setTitle);
+const [KanbanLaneTitle, createTitleSlotAccessor] = createSlot<{ children: JSX.Element }>();
 
 // ─── KanbanLaneTools ─────────────────────────────────────────────
 
-const KanbanLaneTools = createSlotComponent(KanbanLaneContext, (ctx) => ctx.setTools);
+const [KanbanLaneTools, createToolsSlotAccessor] = createSlot<{ children: JSX.Element }>();
 
 // ─── KanbanCard ──────────────────────────────────────────────────
 
@@ -54,16 +118,6 @@ export interface KanbanCardProps<TCardValue = unknown> extends Omit<
   children?: JSX.Element;
 }
 
-const cardHostClass = clsx("relative block", "transition-opacity duration-200");
-
-const cardContentClass = clsx(
-  "select-none whitespace-normal",
-  "animate-none",
-  "transition-shadow duration-200",
-);
-
-const cardSelectedClass = clsx("ring-2 ring-primary-500/50", "shadow-md dark:shadow-black/30");
-
 const LONG_PRESS_MS = 500;
 
 const KanbanCard: ParentComponent<KanbanCardProps> = (props) => {
@@ -198,7 +252,7 @@ const KanbanCard: ParentComponent<KanbanCardProps> = (props) => {
       data-kanban-card
       draggable={isDraggable()}
       class={twMerge(
-        cardHostClass,
+        "relative block transition-opacity duration-200",
         isDraggable() && "cursor-grab",
         isDragSource() && "opacity-30",
         local.class,
@@ -212,7 +266,11 @@ const KanbanCard: ParentComponent<KanbanCardProps> = (props) => {
       onClick={handleClick}
     >
       <Card
-        class={twMerge(cardContentClass, isSelected() && cardSelectedClass, local.contentClass)}
+        class={twMerge(
+          "select-none whitespace-normal animate-none transition-shadow duration-200",
+          isSelected() && "ring-2 ring-primary-500/50 shadow-md dark:shadow-black/30",
+          local.contentClass,
+        )}
       >
         {local.children}
       </Card>
@@ -234,38 +292,6 @@ export interface KanbanLaneProps<TLaneValue = unknown> extends Omit<
   children?: JSX.Element;
 }
 
-const laneBaseClass = clsx(
-  "flex flex-col",
-  "w-72 min-w-72",
-  "bg-base-100 dark:bg-base-900",
-  "rounded-lg",
-  "overflow-hidden",
-  "transition-[background-color,box-shadow] duration-200",
-);
-
-const laneDragOverClass = clsx("bg-primary-50 dark:bg-primary-950");
-
-const laneHeaderBaseClass = clsx(
-  "flex items-center gap-2",
-  "px-3 py-2",
-  "font-bold",
-  "text-base-700 dark:text-base-200",
-  "select-none",
-);
-
-const collapseButtonClass = twMerge(iconButtonBase, "size-6", "hover:text-primary-500");
-
-const laneToolsClass = clsx("flex items-center", "gap-1");
-
-const laneBodyBaseClass = clsx("flex-1", "flex flex-col gap-2", "p-2", "overflow-y-auto");
-
-const placeholderBaseClass = clsx(
-  "rounded-lg",
-  "bg-primary-100/60 dark:bg-primary-900/30",
-  "origin-top",
-  "animate-[kanban-ph-in_200ms_ease-out]",
-);
-
 const KanbanLane: ParentComponent<KanbanLaneProps> = (props) => {
   const [local, rest] = splitProps(props, [
     "children",
@@ -374,9 +400,8 @@ const KanbanLane: ParentComponent<KanbanLaneProps> = (props) => {
     }
   };
 
-  // Slot signals
-  const [title, setTitle] = createSlotSignal();
-  const [tools, setTools] = createSlotSignal();
+  const [title, TitleProvider] = createTitleSlotAccessor();
+  const [tools, ToolsProvider] = createToolsSlotAccessor();
 
   const laneContextValue: KanbanLaneContextValue = {
     value: () => local.value,
@@ -384,8 +409,6 @@ const KanbanLane: ParentComponent<KanbanLaneProps> = (props) => {
     setDropTarget,
     registerCard,
     unregisterCard,
-    setTitle,
-    setTools,
   };
 
   const hasHeader = () =>
@@ -394,7 +417,7 @@ const KanbanLane: ParentComponent<KanbanLaneProps> = (props) => {
   // Placeholder div (owned by Lane, direct DOM control)
   let bodyRef: HTMLDivElement | undefined;
   const placeholderEl = document.createElement("div");
-  placeholderEl.className = placeholderBaseClass;
+  placeholderEl.className = clsx("rounded-lg", "bg-primary-100/60 dark:bg-primary-900/30", "origin-top", "animate-[kanban-ph-in_200ms_ease-out]");
 
   createEffect(() => {
     const target = dropTarget();
@@ -430,42 +453,49 @@ const KanbanLane: ParentComponent<KanbanLaneProps> = (props) => {
   });
 
   return (
+    <TitleProvider>
+      <ToolsProvider>
     <KanbanLaneContext.Provider value={laneContextValue}>
       <BusyContainer busy={local.busy} variant="bar">
         <div
           {...rest}
           data-kanban-lane
-          class={twMerge(laneBaseClass, isDragOverLane() && laneDragOverClass, local.class)}
+          class={twMerge(
+            clsx("flex w-72 min-w-72 flex-col", bg.muted, "overflow-hidden rounded-lg transition-[background-color,box-shadow] duration-200"),
+            isDragOverLane() && "bg-primary-50 dark:bg-primary-950",
+            local.class,
+          )}
           onDragEnter={handleLaneDragEnter}
           onDragLeave={handleLaneDragLeave}
           onDragOver={handleLaneDragOver}
           onDrop={handleLaneDrop}
         >
           <Show when={hasHeader()}>
-            <div class={laneHeaderBaseClass}>
+            <div class={clsx("flex items-center", gap.xl, pad.lg, "font-bold", text.default, "select-none")}>
               <Show when={local.collapsible}>
-                <button
-                  type="button"
-                  class={collapseButtonClass}
+                <Button
+                  variant="ghost"
+                  size="xs"
+                  class="size-6 hover:text-primary-500"
                   onClick={() => setCollapsed((prev) => !prev)}
                 >
                   <Icon icon={collapsed() ? IconEyeOff : IconEye} size="1em" />
-                </button>
+                </Button>
               </Show>
               <Show when={hasSelectableCards()}>
                 <Checkbox value={isAllSelected()} onValueChange={handleSelectAll} inline />
               </Show>
               <div class="flex-1">
-                <Show when={title()}>{title()!()}</Show>
+                <Show when={title()}>{title()!.children}</Show>
               </div>
               <Show when={tools()}>
-                <div class={laneToolsClass}>{tools()!()}</div>
+                <div class={clsx("flex items-center", gap.default)}>{tools()!.children}</div>
               </Show>
             </div>
           </Show>
           <div
             ref={bodyRef}
-            class={laneBodyBaseClass}
+            class={clsx("flex flex-1 flex-col", gap.xl, "overflow-y-auto p-2")}
             style={{ display: collapsed() ? "none" : undefined }}
           >
             {local.children}
@@ -473,6 +503,8 @@ const KanbanLane: ParentComponent<KanbanLaneProps> = (props) => {
         </div>
       </BusyContainer>
     </KanbanLaneContext.Provider>
+      </ToolsProvider>
+    </TitleProvider>
   );
 };
 
@@ -488,7 +520,6 @@ export interface KanbanProps<TCardValue = unknown, TLaneValue = unknown> extends
   children?: JSX.Element;
 }
 
-const boardBaseClass = clsx("inline-flex flex-nowrap", "h-full", "gap-4");
 
 interface KanbanComponent {
   <TCardValue = unknown, TLaneValue = unknown>(
@@ -500,7 +531,7 @@ interface KanbanComponent {
   LaneTools: typeof KanbanLaneTools;
 }
 
-const KanbanBase = (props: KanbanProps) => {
+const KanbanInner = (props: KanbanProps) => {
   const [local, rest] = splitProps(props, [
     "children",
     "class",
@@ -563,15 +594,18 @@ const KanbanBase = (props: KanbanProps) => {
 
   return (
     <KanbanContext.Provider value={contextValue}>
-      <div {...rest} data-kanban class={twMerge(boardBaseClass, local.class)}>
+      <div {...rest} data-kanban class={twMerge("inline-flex flex-nowrap h-full gap-4", local.class)}>
         {local.children}
       </div>
     </KanbanContext.Provider>
   );
 };
 
-export const Kanban = KanbanBase as KanbanComponent;
-Kanban.Lane = KanbanLane;
-Kanban.Card = KanbanCard;
-Kanban.LaneTitle = KanbanLaneTitle;
-Kanban.LaneTools = KanbanLaneTools;
+//#region Export
+export const Kanban = Object.assign(KanbanInner, {
+  Lane: KanbanLane,
+  Card: KanbanCard,
+  LaneTitle: KanbanLaneTitle,
+  LaneTools: KanbanLaneTools,
+}) as KanbanComponent;
+//#endregion

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

@@ -1,21 +1,10 @@
 import { type JSX, type ParentComponent, splitProps } from "solid-js";
 import clsx from "clsx";
 import { twMerge } from "tailwind-merge";
+import { border } from "../../../styles/base.styles";
 import { ListContext, useListContext } from "./ListContext";
 import { ListItem } from "./ListItem";
 
-const baseClass = clsx("inline-flex flex-col rounded-md");
-
-const rootClass = clsx(
-  "border border-base-300 bg-base-50 p-px dark:border-base-700 dark:bg-base-900",
-);
-
-const nestedClass = clsx("rounded-none py-1");
-
-const insetClass = clsx(
-  "w-full border-transparent bg-transparent dark:border-transparent dark:bg-transparent",
-);
-
 export interface ListProps extends JSX.HTMLAttributes<HTMLDivElement> {
   /**
    * Apply transparent background style
@@ -161,10 +150,10 @@ const ListBase: ParentComponent<ListProps> = (props) => {
 
   const getClassName = () =>
     twMerge(
-      baseClass,
-      !isNested && rootClass,
-      (local.inset || isNested) && insetClass,
-      isNested && nestedClass,
+      "inline-flex flex-col rounded-md",
+      !isNested && clsx("border bg-base-50 p-px dark:bg-base-900", border.default),
+      (local.inset || isNested) && "w-full border-transparent bg-transparent dark:border-transparent dark:bg-transparent",
+      isNested && "rounded-none py-1",
       local.class,
     );