@simplysm/solid 13.0.75 → 13.0.77

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,30 +21,99 @@ 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";
+
+//#region Types
+// ── Types ──────────────────────────────────────────────────────
+
+export interface KanbanCardRef<TLaneValue = unknown, TCardValue = unknown> {
+  value: TCardValue | undefined;
+  laneValue: TLaneValue | undefined;
+  heightOnDrag: number;
+}
+
+export interface KanbanDropInfo<TLaneValue = unknown, TCardValue = unknown> {
+  sourceValue?: TCardValue;
+  targetLaneValue?: TLaneValue;
+  targetCardValue?: TCardValue;
+  position?: "before" | "after";
+}
+
+export interface KanbanDropTarget<TCardValue = unknown> {
+  element: HTMLElement;
+  value: TCardValue | undefined;
+  position: "before" | "after";
+}
+//#endregion
+
+//#region Board Context
+// ── Board Context ──────────────────────────────────────────────
+
+export interface KanbanContextValue<TLaneValue = unknown, TCardValue = unknown> {
+  dragCard: Accessor<KanbanCardRef<TLaneValue, TCardValue> | undefined>;
+  setDragCard: Setter<KanbanCardRef<TLaneValue, TCardValue> | undefined>;
+  onDropTo: (
+    targetLaneValue: TLaneValue | undefined,
+    targetCardValue: TCardValue | undefined,
+    position: "before" | "after" | undefined,
+  ) => void;
 
+  // Selection (Phase 4)
+  selectedValues: Accessor<TCardValue[]>;
+  setSelectedValues: (updater: TCardValue[] | ((prev: TCardValue[]) => TCardValue[])) => void;
+  toggleSelection: (value: TCardValue) => 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;
+}
+//#endregion
+
+//#region Lane Context
+// ── Lane Context ───────────────────────────────────────────────
+
+export interface KanbanLaneContextValue<TLaneValue = unknown, TCardValue = unknown> {
+  value: Accessor<TLaneValue | undefined>;
+  dropTarget: Accessor<KanbanDropTarget<TCardValue> | undefined>;
+  setDropTarget: (target: KanbanDropTarget<TCardValue> | undefined) => void;
+
+  // Card registration (Phase 4)
+  registerCard: (id: string, info: { value: TCardValue | 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;
+}
+//#endregion
+
+//#region Slots
 // ─── 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 }>();
+//#endregion
 
+//#region KanbanCard
 // ─── KanbanCard ──────────────────────────────────────────────────
 
 export interface KanbanCardProps<TCardValue = unknown> extends Omit<
@@ -54,16 +127,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 +261,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,14 +275,20 @@ 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>
     </div>
   );
 };
+//#endregion
 
+//#region KanbanLane
 // ─── KanbanLane ──────────────────────────────────────────────────
 
 export interface KanbanLaneProps<TLaneValue = unknown> extends Omit<
@@ -234,38 +303,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 +411,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 +420,6 @@ const KanbanLane: ParentComponent<KanbanLaneProps> = (props) => {
     setDropTarget,
     registerCard,
     unregisterCard,
-    setTitle,
-    setTools,
   };
 
   const hasHeader = () =>
@@ -394,7 +428,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 +464,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,9 +514,13 @@ const KanbanLane: ParentComponent<KanbanLaneProps> = (props) => {
         </div>
       </BusyContainer>
     </KanbanLaneContext.Provider>
+      </ToolsProvider>
+    </TitleProvider>
   );
 };
+//#endregion
 
+//#region KanbanBoard
 // ─── Kanban (Board) ──────────────────────────────────────────────
 
 export interface KanbanProps<TCardValue = unknown, TLaneValue = unknown> extends Omit<
@@ -488,19 +533,9 @@ 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>(
-    props: KanbanProps<TCardValue, TLaneValue>,
-  ): JSX.Element;
-  Lane: typeof KanbanLane;
-  Card: typeof KanbanCard;
-  LaneTitle: typeof KanbanLaneTitle;
-  LaneTools: typeof KanbanLaneTools;
-}
 
-const KanbanBase = (props: KanbanProps) => {
+const KanbanInner = (props: KanbanProps) => {
   const [local, rest] = splitProps(props, [
     "children",
     "class",
@@ -563,15 +598,19 @@ 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;
+//#endregion
+
+//#region Export
+export const Kanban = Object.assign(KanbanInner, {
+  Lane: KanbanLane,
+  Card: KanbanCard,
+  LaneTitle: KanbanLaneTitle,
+  LaneTools: KanbanLaneTools,
+});
+//#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
@@ -45,10 +34,6 @@ export interface ListProps extends JSX.HTMLAttributes<HTMLDivElement> {
  * </List>
  * ```
  */
-interface ListComponent extends ParentComponent<ListProps> {
-  Item: typeof ListItem;
-}
-
 const ListBase: ParentComponent<ListProps> = (props) => {
   const [local, rest] = splitProps(props, ["children", "class", "inset"]);
 
@@ -161,10 +146,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,
     );
 
@@ -187,5 +172,6 @@ const ListBase: ParentComponent<ListProps> = (props) => {
   );
 };
 
-export const List = ListBase as ListComponent;
-List.Item = ListItem;
+export const List = Object.assign(ListBase, {
+  Item: ListItem,
+});

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