@solidpb/ui-kit 0.1.1 → 0.3.0

package/dist/components/FilterBar/FiltersEdit.jsx

@@ -0,0 +1,45 @@
+import { createMemo, createSignal, For, Show } from "solid-js";
+import { Button } from "../Button";
+import FilterEdit from "./FilterEdit";
+import { createStore } from "solid-js/store";
+export const FiltersEdit = (props) => {
+    const [filters, setFilters] = createStore(props.filters);
+    const [filtersReady, setFiltersReady] = createSignal(props.filters.map(() => props.filtersReady || false));
+    const allFiltersReady = createMemo(() => [...filtersReady()].every(Boolean));
+    const handleSaveFilters = () => {
+        if (allFiltersReady()) {
+            props.onSaveFilters(filters);
+        }
+    };
+    const addNewFilter = () => {
+        setFilters(filters.length, {});
+        setFiltersReady([...filtersReady(), false]);
+    };
+    const deleteFilter = (ind) => {
+        setFilters((prev) => prev.filter((_, i) => i !== ind));
+        setFiltersReady((prev) => prev.filter((_, i) => i !== ind));
+    };
+    return (<div class="flex flex-col gap-2 bg-base-200">
+      <For each={filters}>
+        {(f, i) => (<>
+            {i() > 0 && <span class="divider italic text-xs m-0">OR</span>}
+            <FilterEdit availableFields={props.availableFields} filter={f} setField={(field) => setFilters(i(), { ...filters[i()], field })} setOperator={(operator) => setFilters(i(), { ...filters[i()], operator })} setValue={(value) => setFilters(i(), { ...filters[i()], value })} setCanConfirm={(v) => setFiltersReady((prev) => {
+                const next = [...prev];
+                next[i()] = v;
+                return next;
+            })} size={props.size} onDelete={filters.length > 1 ? () => deleteFilter(i()) : undefined}/>
+          </>)}
+      </For>
+      <div class="w-full flex justify-end gap-1">
+        <Show when={props.addConditionTrigger !== undefined}>
+          <Button appearance="secondary" size="xs" onClick={addNewFilter}>
+            {props.addConditionTrigger}
+          </Button>
+        </Show>
+        <Button appearance="success" disabled={!allFiltersReady()} size="xs" onClick={handleSaveFilters}>
+          {props.saveTrigger}
+        </Button>
+      </div>
+    </div>);
+};
+export default FiltersEdit;

package/dist/components/FilterBar/index.d.ts

@@ -0,0 +1 @@
+export * from "./FilterBar";

package/dist/components/FilterBar/index.js

@@ -0,0 +1 @@
+export * from "./FilterBar";

package/dist/components/Form/Form.d.ts

@@ -1,2 +1,37 @@
-import { ParentComponent } from "solid-js";
-export declare const Form: ParentComponent;
+import { JSXElement } from "solid-js";
+import { type SwitchProps } from "../Switch";
+import { type SelectProps } from "../Select";
+import { type InputRootProps } from "../Input";
+import { type TextAreaRootProps } from "../TextArea";
+import { type CheckboxProps } from "../Checkbox";
+import { type NumberInputRootProps } from "../NumberInput";
+import { type SliderProps } from "../Slider";
+import { type ImageProps } from "../Image";
+import { type FileInputProps } from "../FileInput";
+export interface FormProps<T> {
+    data: T;
+    title?: string;
+    onSave?: (values: Partial<T>) => Promise<void>;
+    onCancel?: () => void;
+    children: JSXElement;
+    class?: string;
+}
+type BaseFieldProps<T> = {
+    field: keyof T;
+};
+export declare function createForm<T>(): {
+    (props: FormProps<T>): JSXElement;
+    TextField: (props: InputRootProps & BaseFieldProps<T>) => import("solid-js").JSX.Element;
+    NumberField: (props: NumberInputRootProps & BaseFieldProps<T>) => import("solid-js").JSX.Element;
+    CheckboxField: (props: CheckboxProps & BaseFieldProps<T>) => import("solid-js").JSX.Element;
+    SwitchField: (props: SwitchProps & BaseFieldProps<T>) => import("solid-js").JSX.Element;
+    TextAreaField: (props: TextAreaRootProps & BaseFieldProps<T>) => import("solid-js").JSX.Element;
+    SelectField: (props: SelectProps<{
+        label: string;
+        value: string;
+    }> & BaseFieldProps<T>) => import("solid-js").JSX.Element;
+    FileField: (props: FileInputProps & BaseFieldProps<T>) => import("solid-js").JSX.Element;
+    ImageField: (props: ImageProps & BaseFieldProps<T>) => import("solid-js").JSX.Element;
+    SliderField: (props: SliderProps & BaseFieldProps<T>) => import("solid-js").JSX.Element;
+};
+export {};

package/dist/components/Form/Form.jsx

@@ -1,3 +1,102 @@
-export const Form = (props) => {
-    return <div>{props.children}</div>;
-};
+import { splitProps } from "solid-js";
+import { createStore } from "solid-js/store";
+import { InternalFormContext, useInternalFormContext } from "./formContext";
+import { Switch } from "../Switch";
+import { Select } from "../Select";
+import { Input } from "../Input";
+import { TextArea } from "../TextArea";
+import { Checkbox } from "../Checkbox";
+import { NumberInput } from "../NumberInput";
+import { Slider } from "../Slider";
+import { Image } from "../Image";
+import { Button } from "../Button";
+import { FileInput } from "../FileInput";
+import { tv } from "tailwind-variants";
+const formClass = tv({
+    base: "space-y-4 space-x-4",
+});
+export function createForm() {
+    const Form = (props) => {
+        const [values, setValues] = createStore({ ...props.data });
+        const setValue = (key, value) => {
+            setValues(key, value);
+        };
+        const getValue = (key) => {
+            return values[key];
+        };
+        const contextValue = { setValue, getValue, values };
+        const handleSubmit = (e) => {
+            e.preventDefault();
+            props.onSave?.(values);
+        };
+        return (<InternalFormContext.Provider value={contextValue}>
+        <form onSubmit={handleSubmit} class={formClass({ class: props.class })}>
+          {props.title && <h2 class="text-lg font-semibold">{props.title}</h2>}
+
+          {props.children}
+
+          <div class="flex justify-end gap-2">
+            {props.onCancel && (<Button appearance="neutral" onClick={props.onCancel} size="sm">
+                Cancel
+              </Button>)}
+            {props.onSave && (<Button appearance="success" type="submit" size="sm">
+                Save
+              </Button>)}
+          </div>
+        </form>
+      </InternalFormContext.Provider>);
+    };
+    const TextField = (props) => {
+        const form = useInternalFormContext();
+        return (<Input {...props} value={form.getValue(props.field)} onChange={(v) => form.setValue(props.field, v)}/>);
+    };
+    const NumberField = (props) => {
+        const form = useInternalFormContext();
+        return (<NumberInput {...props} rawValue={form.getValue(props.field)} onRawValueChange={(v) => form.setValue(props.field, v)}/>);
+    };
+    const CheckboxField = (props) => {
+        const form = useInternalFormContext();
+        return (<Checkbox {...props} checked={Boolean(form.getValue(props.field))} onChange={(v) => form.setValue(props.field, v)}/>);
+    };
+    const SwitchField = (props) => {
+        const form = useInternalFormContext();
+        return (<Switch {...props} checked={Boolean(form.getValue(props.field))} onChange={(v) => form.setValue(props.field, v)}/>);
+    };
+    const TextAreaField = (props) => {
+        const form = useInternalFormContext();
+        return (<TextArea {...props} value={form.getValue(props.field)} onChange={(v) => form.setValue(props.field, v)}/>);
+    };
+    const SelectField = (props) => {
+        const [local, others] = splitProps(props, ["onChange", "value"]);
+        const form = useInternalFormContext();
+        return (<Select {...others} labelKey="label" valueKey="value" value={local.value} onChange={(v) => {
+                local.onChange(v);
+                form.setValue(props.field, v?.value);
+            }}/>);
+    };
+    const FileField = (props) => {
+        const form = useInternalFormContext();
+        return <FileInput {...props} onChange={(files) => form.setValue(props.field, files)}/>;
+    };
+    const ImageField = (props) => {
+        const form = useInternalFormContext();
+        return (<Image {...props} editable src={form.getValue(props.field)} onChange={(file) => {
+                const fileURL = URL.createObjectURL(file);
+                form.setValue(props.field, fileURL);
+            }}/>);
+    };
+    const SliderField = (props) => {
+        const form = useInternalFormContext();
+        return (<Slider {...props} value={form.getValue(props.field)} onChange={(v) => form.setValue(props.field, v)}/>);
+    };
+    Form.TextField = TextField;
+    Form.NumberField = NumberField;
+    Form.CheckboxField = CheckboxField;
+    Form.SwitchField = SwitchField;
+    Form.TextAreaField = TextAreaField;
+    Form.SelectField = SelectField;
+    Form.FileField = FileField;
+    Form.ImageField = ImageField;
+    Form.SliderField = SliderField;
+    return Form;
+}

package/dist/components/Form/formContext.d.ts

@@ -0,0 +1,2 @@
+export declare const InternalFormContext: import("solid-js").Context<any>;
+export declare function useInternalFormContext(): any;

package/dist/components/Form/formContext.js

@@ -0,0 +1,9 @@
+import { createContext, useContext } from "solid-js";
+export const InternalFormContext = createContext();
+export function useInternalFormContext() {
+    const ctx = useContext(InternalFormContext);
+    if (!ctx) {
+        throw new Error("useInternalFormContext must be used inside Form");
+    }
+    return ctx;
+}

package/dist/components/Image/Image.d.ts

@@ -1,9 +1,8 @@
-import { Component } from "solid-js";
-interface ImageProps {
-    src: string;
-    alt?: string;
-    class?: string;
-    rounded?: boolean;
+import type { Component, JSX } from "solid-js";
+export interface ImageProps extends Omit<JSX.ImgHTMLAttributes<HTMLImageElement>, "onChange"> {
+    editable?: boolean;
+    onChange?: (file: File) => void;
+    size?: "xs" | "sm" | "md" | "lg" | "xl";
+    label?: string;
 }
 export declare const Image: Component<ImageProps>;
-export default Image;

package/dist/components/Image/Image.jsx

@@ -1,15 +1,82 @@
+import { Show, createSignal } from "solid-js";
 import { tv } from "tailwind-variants";
+import Pencil from "lucide-solid/icons/pencil";
+import ImageIcon from "lucide-solid/icons/image";
+import { Button } from "../Button";
 const image = tv({
-    base: "object-cover",
+    base: "rounded-box shadow object-cover",
     variants: {
-        rounded: {
-            true: "rounded-full",
-            false: "rounded-none",
+        size: {
+            xs: "w-16 h-16",
+            sm: "w-24 h-24",
+            md: "w-32 h-32",
+            lg: "w-48 h-48",
+            xl: "w-64 h-64",
+        },
+    },
+});
+const placeholder = tv({
+    base: "rounded-box shadow flex items-center justify-center bg-base-200",
+    variants: {
+        size: {
+            xs: "w-16 h-16",
+            sm: "w-24 h-24",
+            md: "w-32 h-32",
+            lg: "w-48 h-48",
+            xl: "w-64 h-64",
+        },
+    },
+});
+const label = tv({
+    base: "label text-xs",
+    variants: {
+        size: {
+            xs: "text-xs",
+            sm: "text-xs",
+            md: "text-xs",
+            lg: "text-sm",
+            xl: "text-sm",
         },
     },
     defaultVariants: {
-        rounded: false,
+        size: "sm",
     },
 });
-export const Image = (props) => (<img src={props.src} alt={props.alt} class={image({ rounded: props.rounded, class: props.class })}/>);
-export default Image;
+export const Image = (props) => {
+    const [preview, setPreview] = createSignal(null);
+    let fileInputRef = null;
+    const handleEditClick = () => {
+        fileInputRef?.click();
+    };
+    const handleFileChange = (e) => {
+        const target = e.target;
+        const file = target.files?.[0];
+        if (file) {
+            setPreview(URL.createObjectURL(file));
+            props.onChange?.(file);
+        }
+    };
+    // Destructure onChange and editable so they are not passed to <img>
+    const { onChange, editable, ...imgProps } = props;
+    const currentSrc = () => preview() || props.src;
+    return (<label class="flex flex-col gap-1 w-fit">
+      <Show when={props.label}>
+        <span class={label({ size: props.size })}>{props.label}</span>
+      </Show>
+      <div class="relative inline-block group w-fit">
+        <Show when={currentSrc()} fallback={<div class={placeholder({ size: props.size, class: props.class })}>
+              <ImageIcon class="w-1/2 h-1/2 text-base-300"/>
+            </div>}>
+          <img {...imgProps} src={currentSrc()} alt={props.alt} class={image({ size: props.size, class: props.class })}/>
+        </Show>
+        <Show when={editable}>
+          <div class="absolute inset-0 flex items-center justify-center bg-black/10 opacity-0 group-hover:opacity-100 transition-opacity z-10 rounded-box">
+            <Button size="sm" modifier="square" variant="ghost" onClick={handleEditClick}>
+              <Pencil class="w-4 h-4"/>
+            </Button>
+          </div>
+          <input ref={(el) => (fileInputRef = el)} type="file" accept="image/*" class="hidden" onChange={handleFileChange}/>
+        </Show>
+      </div>
+    </label>);
+};

package/dist/components/Input/Input.d.ts

@@ -1,15 +1,15 @@
 import { Component, ValidComponent } from "solid-js";
 import { type TextFieldInputProps, type TextFieldRootProps } from "@kobalte/core/text-field";
 import type { PolymorphicProps } from "@kobalte/core";
-type InputProps<T extends ValidComponent = "input"> = PolymorphicProps<T, TextFieldInputProps<T>>;
-interface ExtraProps {
+export type InputProps<T extends ValidComponent = "input"> = PolymorphicProps<T, TextFieldInputProps<T>>;
+export interface ExtraProps {
     label?: string;
-    variant?: "ghost" | "none";
+    variant?: "ghost";
     appearance?: "neutral" | "primary" | "secondary" | "accent" | "info" | "success" | "warning" | "error";
     size?: "xs" | "sm" | "md" | "lg" | "xl";
     inputProps?: InputProps;
     saveFunc?: (v: string) => Promise<any>;
 }
-type InputRootProps<T extends ValidComponent = "div"> = ExtraProps & PolymorphicProps<T, TextFieldRootProps<T>>;
+export type InputRootProps<T extends ValidComponent = "div"> = ExtraProps & PolymorphicProps<T, TextFieldRootProps<T>>;
 export declare const Input: Component<InputRootProps>;
 export default Input;

package/dist/components/Input/Input.jsx

@@ -4,30 +4,6 @@ import { tv } from "tailwind-variants";
 import { debounce } from "../../methods/debounce";
 const inputRoot = tv({
     base: "relative flex flex-col gap-1",
-    variants: {
-        marginTop: {
-            yes: "mt-2",
-            no: "",
-        },
-    },
-    defaultVariants: {
-        marginTop: "no",
-    },
-});
-const inputLabel = tv({
-    base: "absolute left-3 px-1 font-medium pointer-events-none z-10 bg-base-100",
-    variants: {
-        size: {
-            xs: "text-xs",
-            sm: "text-xs",
-            md: "text-sm",
-            lg: "text-sm",
-            xl: "text-md",
-        },
-    },
-    defaultVariants: {
-        size: "md",
-    },
 });
 const inputField = tv({
     base: "input outline-offset-0",
@@ -55,9 +31,7 @@ const inputField = tv({
         },
     },
     defaultVariants: {
-        variant: "none",
-        size: "md",
-        appearance: "neutral",
+        size: "sm",
     },
 });
 export const Input = (props) => {
@@ -76,19 +50,19 @@ export const Input = (props) => {
         local.onChange?.(v);
         debouncedSave()?.(v);
     };
-    return (<TextField class={inputRoot({ class: local.class, marginTop: local.label ? "yes" : "no" })} {...others} onChange={handleChange}>
+    return (<TextField {...others} class={inputRoot({ class: local.class })} onChange={handleChange}>
       <div class="relative w-full">
-        <Show when={local.label}>
-          <TextField.Label class={inputLabel({ size: local.size })} style="transform: translateY(-50%);">
-            {local.label}
-          </TextField.Label>
-        </Show>
-        <TextField.Input class={inputField({
+        <TextField.Label class="floating-label">
+          <Show when={local.label}>
+            <span>{local.label}</span>
+          </Show>
+          <TextField.Input {...local.inputProps} class={inputField({
             appearance: local.appearance,
             variant: local.variant,
             size: local.size,
             class: local.inputProps?.class,
-        })} {...local.inputProps}/>
+        })}/>
+        </TextField.Label>
       </div>
     </TextField>);
 };

package/dist/components/Kanban/Kanban.d.ts

@@ -0,0 +1,19 @@
+import { JSXElement } from "solid-js";
+export interface KanbanProps<T extends KanbanItem, K extends KanbanState> {
+    columns?: K[];
+    items: T[];
+    renderItem?: (item: T) => JSXElement;
+    onCardClick?: (item: T) => void;
+    containerClass?: string;
+    columnClass?: string;
+    cardClass?: string;
+    onCreateItem?: (title: string, state: string) => void;
+    onCollapseColumn?: (collapsed: boolean) => void;
+    onReorderCard?: (item: T, oldPos: number, newPos: number, oldState: string, newState: string) => void;
+    onReorderColumn?: (col: K, oldPos: number, newPos: number) => void;
+    itemStateKey?: keyof T;
+    itemPositionKey?: keyof T;
+    statePositionKey?: keyof K;
+}
+export declare const Kanban: <T extends KanbanItem, K extends KanbanState>(props: KanbanProps<T, K>) => import("solid-js").JSX.Element;
+export default Kanban;

package/dist/components/Kanban/Kanban.jsx

@@ -0,0 +1,68 @@
+import { createEffect, createMemo, createSignal, For, onCleanup, Show } from "solid-js";
+import { extractClosestEdge } from "@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge";
+import { monitorForElements } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
+import { tv } from "tailwind-variants";
+import { KanbanColumn } from "./KanbanColumn";
+const container = tv({
+    base: "flex gap-2 overflow-x-auto p-2",
+});
+export const Kanban = (props) => {
+    const sortedColumns = createMemo(() => {
+        const posKey = props.statePositionKey;
+        if (!posKey)
+            return props.columns;
+        return props.columns?.toSorted((a, b) => (Number(a[posKey]) ?? 0) - (Number(b[posKey]) ?? 0));
+    });
+    const colDragEnabled = () => !!props.statePositionKey;
+    const [flashedColId, setFlashedColId] = createSignal(null);
+    createEffect(() => {
+        if (!props.items.length || !colDragEnabled())
+            return;
+        const dispose = monitorForElements({
+            canMonitor({ source }) {
+                return (source.data.item.collectionId == props.items[0].collectionId &&
+                    !!source.data.isKanbanColumn);
+            },
+            onDrop({ location, source }) {
+                const target = location.current.dropTargets[0];
+                if (!target) {
+                    return;
+                }
+                const sourceData = source.data;
+                const targetData = target.data;
+                const sourceItem = sourceData.item;
+                const targetItem = targetData.item;
+                const posKey = props.statePositionKey;
+                if (!posKey)
+                    return;
+                if (sourceItem.collectionId !== targetItem.collectionId && source.data.isKanbanColumn) {
+                    return;
+                }
+                if ((Number(sourceItem[posKey]) || 0) < 0 || (Number(targetItem[posKey]) || 0) < 0) {
+                    return;
+                }
+                const closestEdgeOfTarget = extractClosestEdge(targetData);
+                let newInd = closestEdgeOfTarget === "left"
+                    ? Number(targetItem[posKey]) || 0
+                    : (Number(targetItem[posKey]) || 0) + 1;
+                if (newInd > (Number(sourceItem[posKey]) || 0)) {
+                    newInd--;
+                }
+                if ((Number(sourceItem[posKey]) || 0) !== newInd) {
+                    setFlashedColId(sourceItem.id);
+                    setTimeout(() => setFlashedColId(null), 10);
+                }
+                props.onReorderColumn?.(sourceItem, Number(sourceItem[posKey]) || 0, newInd);
+            },
+        });
+        onCleanup(dispose);
+    });
+    return (<div class={container({ class: props.containerClass })}>
+      <Show when={sortedColumns()?.length} fallback={<KanbanColumn dragEnabled={colDragEnabled} cardClass={props.cardClass} items={props.items} class={props.columnClass} onCardClick={props.onCardClick} renderItem={props.renderItem} onCreateItem={props.onCreateItem} onReorderCard={props.onReorderCard} onCollapse={props.onCollapseColumn} flashSignal={() => flashedColId()} itemPositionKey={props.itemPositionKey} itemStateKey={props.itemStateKey}/>}>
+        <For each={sortedColumns()}>
+          {(col) => (<KanbanColumn col={col} dragEnabled={colDragEnabled} cardClass={props.cardClass} items={props.items} class={props.columnClass} onCardClick={props.onCardClick} renderItem={props.renderItem} onCreateItem={props.onCreateItem} onReorderCard={props.onReorderCard} onCollapse={props.onCollapseColumn} flashSignal={() => flashedColId()} itemPositionKey={props.itemPositionKey} itemStateKey={props.itemStateKey}/>)}
+        </For>
+      </Show>
+    </div>);
+};
+export default Kanban;

package/dist/components/Kanban/KanbanCard.d.ts

@@ -0,0 +1,11 @@
+import { Accessor, JSXElement } from "solid-js";
+export interface KanbanCardProps<T extends KanbanItem> {
+    item: T;
+    dragEnabled: Accessor<boolean>;
+    flashSignal: Accessor<string | null>;
+    onCardClick?: () => void;
+    renderItem?: (item: T) => JSXElement;
+    class?: string;
+}
+export declare const KanbanCard: <T extends KanbanItem>(props: KanbanCardProps<T>) => import("solid-js").JSX.Element;
+export default KanbanCard;

package/dist/components/Kanban/KanbanCard.jsx

@@ -0,0 +1,94 @@
+import { createSignal, createEffect, onCleanup } from "solid-js";
+import { attachClosestEdge, extractClosestEdge, } from "@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge";
+import { dropTargetForElements, draggable } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
+import invariant from "tiny-invariant";
+import { tv } from "tailwind-variants";
+import { triggerFlash } from "../../methods/triggerFlash";
+const itemCard = tv({
+    base: "kanban-card card bg-base-100 p-2 rounded-md cursor-pointer hover:shadow-xs transition-shadow",
+});
+const itemTitle = tv({
+    base: "font-medium text-sm",
+});
+export const KanbanCard = (props) => {
+    let ref;
+    const [dragging, setDragging] = createSignal("idle");
+    const [closestEdge, setClosestEdge] = createSignal();
+    createEffect(() => {
+        if (props.flashSignal?.() === props.item.id && ref) {
+            triggerFlash(ref);
+        }
+    });
+    createEffect(() => {
+        if (!props.dragEnabled())
+            return;
+        const element = ref;
+        invariant(element);
+        const dispose = dropTargetForElements({
+            element,
+            canDrop({ source }) {
+                // not allowing dropping on yourself
+                if (source.element === element) {
+                    return false;
+                }
+                if (!source.data.item) {
+                    return false;
+                }
+                // only allowing same collection for now to be dropped on me
+                return source.data.item.collectionId == props.item.collectionId && !!source.data.isKanbanCard;
+            },
+            getData({ input }) {
+                return attachClosestEdge({
+                    item: props.item,
+                    isKanbanCard: true,
+                }, { element, input, allowedEdges: ["top", "bottom"] });
+            },
+            onDragEnter({ self }) {
+                const _closestEdge = extractClosestEdge(self.data);
+                setDragging("dragging-over");
+                setClosestEdge(_closestEdge);
+            },
+            onDrag({ self }) {
+                const _closestEdge = extractClosestEdge(self.data);
+                // Only need to update state if nothing has changed.
+                if (dragging() !== "dragging-over" || _closestEdge !== closestEdge()) {
+                    setDragging("dragging-over");
+                    setClosestEdge(_closestEdge);
+                }
+            },
+            onDragLeave() {
+                setDragging("idle");
+            },
+            onDrop() {
+                setDragging("idle");
+            },
+        });
+        onCleanup(dispose);
+    });
+    createEffect(() => {
+        if (!props.dragEnabled())
+            return;
+        const element = ref;
+        invariant(element);
+        const dispose = draggable({
+            element,
+            getInitialData() {
+                return {
+                    item: props.item,
+                    isKanbanCard: true,
+                };
+            },
+            onDragStart() {
+                setDragging("dragging");
+            },
+            onDrop() {
+                setDragging("idle");
+            },
+        });
+        onCleanup(dispose);
+    });
+    return (<div data-drop-edge={dragging() === "dragging-over" ? (closestEdge() ?? undefined) : undefined} style={{ opacity: dragging() == "dragging" ? 0.2 : 1 }} ref={ref} class={itemCard({ class: props.class })} onClick={props.onCardClick}>
+      {props.renderItem ? props.renderItem(props.item) : <div class={itemTitle()}>{props.item.title}</div>}
+    </div>);
+};
+export default KanbanCard;

package/dist/components/Kanban/KanbanColumn.d.ts

@@ -0,0 +1,18 @@
+import { Accessor, JSXElement } from "solid-js";
+export interface KanbanColumnProps<T extends KanbanItem, K extends KanbanState> {
+    col?: K;
+    items: T[];
+    dragEnabled: Accessor<boolean>;
+    class?: string;
+    cardClass?: string;
+    onCardClick?: (item: T) => void;
+    renderItem?: (item: T) => JSXElement;
+    onCreateItem?: (title: string, state: string) => void;
+    onReorderCard?: (item: T, oldPos: number, newPos: number, oldState: string, newState: string) => void;
+    onCollapse?: (collapsed: boolean) => void;
+    flashSignal: Accessor<string | null>;
+    itemStateKey?: keyof T;
+    itemPositionKey?: keyof T;
+}
+export declare const KanbanColumn: <T extends KanbanItem, K extends KanbanState>(props: KanbanColumnProps<T, K>) => import("solid-js").JSX.Element;
+export default KanbanColumn;