@solidpb/ui-kit 0.2.0 → 0.4.0

package/dist/components/Container/Container.d.ts

@@ -1,7 +1,6 @@
 import { ParentComponent } from "solid-js";
 interface Props {
     class?: string;
-    noPadding?: boolean;
 }
 export declare const Container: ParentComponent<Props>;
 export default Container;

package/dist/components/Container/Container.jsx

@@ -1,15 +1,9 @@
 import { tv } from "tailwind-variants";
 const container = tv({
-    base: "flex-1 bg-base-100 dark:bg-base-900 min-h-[calc(100vh-4rem)]",
-    variants: {
-        noPadding: {
-            true: "",
-            false: "py-4 px-[2vw]",
-        },
-    },
+    base: "flex-1 bg-base-100 min-h-[calc(100vh-4rem)] py-4 px-[2vw]",
 });
 export const Container = (props) => {
-    const classes = container({ noPadding: props.noPadding, class: props.class });
+    const classes = container({ class: props.class });
     return <div class={classes}>{props.children}</div>;
 };
 export default Container;

package/dist/components/FileInput/FileInput.jsx

@@ -28,6 +28,21 @@ const input = tv({
         size: "sm",
     },
 });
+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: {
+        size: "sm",
+    },
+});
 export const FileInput = (props) => {
     const [local, others] = splitProps(props, ["label", "class", "onChange", "saveFunc"]);
     const handleChange = (files) => {
@@ -36,7 +51,7 @@ export const FileInput = (props) => {
     };
     return (<label class="flex flex-col gap-1 w-fit">
       <Show when={local.label}>
-        <span class="label">{local.label}</span>
+        <span class={label({ size: props.size })}>{local.label}</span>
       </Show>
       <input {...others} type="file" class={input({ class: local.class })} accept={props.accept} multiple={props.multiple} onChange={(e) => handleChange(e.currentTarget.files)}/>
     </label>);

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

@@ -24,12 +24,10 @@ export interface FilterField<T> {
     name: keyof T;
     label: string;
     type: FieldType;
-    operators?: FilterOperator[];
     options?: {
         label: string;
         value: string;
     }[];
-    searchable?: boolean;
 }
 export interface SortOption<T> {
     field: keyof T;

package/dist/components/{Form/Form.d.ts → Form.d.ts}

@@ -1,19 +1,21 @@
 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";
+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";
+import { RelationPickerProps } from "./RelationPicker";
 export interface FormProps<T> {
-    data: T;
+    data: Partial<T>;
     title?: string;
     onSave?: (values: Partial<T>) => Promise<void>;
     onCancel?: () => void;
     children: JSXElement;
+    class?: string;
 }
 type BaseFieldProps<T> = {
     field: keyof T;
@@ -32,5 +34,8 @@ export declare function createForm<T>(): {
     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;
+    RelationField: <K extends {
+        id: string;
+    }>(props: RelationPickerProps<K> & BaseFieldProps<T>) => import("solid-js").JSX.Element;
 };
 export {};

package/dist/components/{Form/Form.jsx → Form.jsx}

@@ -1,41 +1,47 @@
 import { splitProps } from "solid-js";
 import { createStore } from "solid-js/store";
+import { tv } from "tailwind-variants";
 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 { 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 RelationPicker from "./RelationPicker";
+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) => {
+            console.log("Setting value", key, value);
             setValues(key, value);
         };
         const getValue = (key) => {
             return values[key];
         };
-        const contextValue = { setValue, getValue, values };
+        const contextValue = { setValue, getValue };
         const handleSubmit = (e) => {
             e.preventDefault();
-            props.onSave?.(values);
+            props.onSave?.(JSON.parse(JSON.stringify(values))); // deep clone to avoid issues with reactive proxies
         };
         return (<InternalFormContext.Provider value={contextValue}>
-        <form onSubmit={handleSubmit} class="space-y-4 space-x-4">
+        <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">
+            {props.onCancel && (<Button appearance="neutral" onClick={props.onCancel}>
                 Cancel
               </Button>)}
-            {props.onSave && (<Button appearance="success" type="submit" size="sm">
+            {props.onSave && (<Button appearance="success" type="submit">
                 Save
               </Button>)}
           </div>
@@ -76,15 +82,32 @@ export function createForm() {
     };
     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 [local, others] = splitProps(props, ["onChange"]);
+        // have to set src manually, when using with pocketbase, the value will be a URL string,
+        // but when uploading a new file it will be a File object, so we need to handle both cases
+        return (<Image editable {...others} onChange={(file) => {
+                form.setValue(props.field, file);
+                local.onChange?.(file);
             }}/>);
     };
     const SliderField = (props) => {
         const form = useInternalFormContext();
         return (<Slider {...props} value={form.getValue(props.field)} onChange={(v) => form.setValue(props.field, v)}/>);
     };
+    const RelationField = (props) => {
+        const form = useInternalFormContext();
+        const [local, others] = splitProps(props, ["onChange"]);
+        const handleChange = (val) => {
+            if (props.multi) {
+                form.setValue(props.field, (Array.isArray(val) ? val.map((v) => v.id) : []));
+            }
+            else {
+                form.setValue(props.field, (val?.id || null));
+            }
+            local.onChange?.(val);
+        };
+        return <RelationPicker {...others} onChange={handleChange}/>;
+    };
     Form.TextField = TextField;
     Form.NumberField = NumberField;
     Form.CheckboxField = CheckboxField;
@@ -94,5 +117,6 @@ export function createForm() {
     Form.FileField = FileField;
     Form.ImageField = ImageField;
     Form.SliderField = SliderField;
+    Form.RelationField = RelationField;
     return Form;
 }

package/dist/components/Image/Image.jsx

@@ -1,9 +1,22 @@
 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: "rounded shadow object-cover",
+    base: "rounded-sm object-cover",
+    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 placeholder = tv({
+    base: "rounded-sm flex items-center justify-center bg-base-200",
     variants: {
         size: {
             xs: "w-16 h-16",
@@ -45,14 +58,19 @@ export const Image = (props) => {
     };
     // 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">
-        <img {...imgProps} src={preview() || props.src} alt={props.alt} class={image({ size: props.size, class: props.class })}/>
+        <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">
+          <div class="absolute inset-0 flex items-center justify-center bg-black/10 opacity-0 group-hover:opacity-100 transition-opacity z-10 rounded-sm">
             <Button size="sm" modifier="square" variant="ghost" onClick={handleEditClick}>
               <Pencil class="w-4 h-4"/>
             </Button>

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

@@ -1,6 +1,6 @@
 import { JSXElement } from "solid-js";
 export interface KanbanProps<T extends KanbanItem, K extends KanbanState> {
-    columns: K[];
+    columns?: K[];
     items: T[];
     renderItem?: (item: T) => JSXElement;
     onCardClick?: (item: T) => void;

package/dist/components/Kanban/Kanban.jsx

@@ -1,4 +1,4 @@
-import { createEffect, createMemo, createSignal, For, onCleanup } from "solid-js";
+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";
@@ -11,7 +11,7 @@ export const Kanban = (props) => {
         const posKey = props.statePositionKey;
         if (!posKey)
             return props.columns;
-        return props.columns.toSorted((a, b) => (Number(a[posKey]) ?? 0) - (Number(b[posKey]) ?? 0));
+        return props.columns?.toSorted((a, b) => (Number(a[posKey]) ?? 0) - (Number(b[posKey]) ?? 0));
     });
     const colDragEnabled = () => !!props.statePositionKey;
     const [flashedColId, setFlashedColId] = createSignal(null);
@@ -58,9 +58,11 @@ export const Kanban = (props) => {
         onCleanup(dispose);
     });
     return (<div class={container({ class: props.containerClass })}>
-      <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 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/KanbanColumn.d.ts

@@ -1,6 +1,6 @@
 import { Accessor, JSXElement } from "solid-js";
 export interface KanbanColumnProps<T extends KanbanItem, K extends KanbanState> {
-    col: K;
+    col?: K;
     items: T[];
     dragEnabled: Accessor<boolean>;
     class?: string;

package/dist/components/Kanban/KanbanColumn.jsx

@@ -12,7 +12,7 @@ import { Button } from "../Button";
 import { KanbanCard } from "./KanbanCard";
 import { Input } from "../Input";
 const column = tv({
-    base: "kanban-column flex flex-col gap-1 flex-shrink-0 bg-base-300 p-1.5 rounded-md transition-[width] text-nowrap",
+    base: "kanban-column flex flex-col gap-1 bg-base-300 p-1.5 rounded-md transition-[width] text-nowrap",
     variants: {
         folded: {
             true: "w-9",
@@ -35,9 +35,6 @@ const columnHeader = tv({
         folded: false,
     },
 });
-const columnContent = tv({
-    base: "flex flex-col gap-1.5",
-});
 export const KanbanColumn = (props) => {
     let ref;
     const [dragging, setDragging] = createSignal("idle");
@@ -51,7 +48,7 @@ export const KanbanColumn = (props) => {
         const stateKey = props.itemStateKey;
         const posKey = props.itemPositionKey;
         if (stateKey) {
-            items = items.filter((item) => item[stateKey] === props.col.id);
+            items = items.filter((item) => item[stateKey] === props.col?.id);
         }
         if (!posKey)
             return items;
@@ -60,7 +57,7 @@ export const KanbanColumn = (props) => {
     const itemDragEnabled = () => !!props.itemPositionKey;
     const [flashedCardId, setFlashedCardId] = createSignal(null);
     createEffect(() => {
-        if (props.flashSignal?.() === props.col.id && ref) {
+        if (props.flashSignal?.() === props.col?.id && ref) {
             triggerFlash(ref);
         }
     });
@@ -77,7 +74,7 @@ export const KanbanColumn = (props) => {
                     return false;
                 }
                 // only allowing same collection for now to be dropped on me
-                return source.data.item.collectionId == props.col.collectionId;
+                return source.data.item.collectionId == props.col?.collectionId;
             },
             getData({ input }) {
                 return attachClosestEdge({
@@ -201,7 +198,7 @@ export const KanbanColumn = (props) => {
         return {};
     });
     return (<div data-drop-edge={dragging() === "dragging-over" && !cardDraggedOver() ? (closestEdge() ?? undefined) : undefined} ref={ref} class={column({ class: props.class, folded: folded() })} style={{ opacity: dragging() == "dragging" ? 0.2 : 1, ...bgStyle() }}>
-      <div>
+      <Show when={props.col}>
         <div class={columnHeader({ folded: folded() })}>
           <div class="flex items-center gap-2">
             <Button size="xs" variant="ghost" modifier="square" onClick={() => setFolded(!folded())}>
@@ -224,33 +221,31 @@ export const KanbanColumn = (props) => {
               <span class="text-xs font-normal text-base-content/50 mt-2">{filteredItems().length}</span>
             </div>)}
         </div>
-      </div>
-      <div class={columnContent()}>
-        {!folded() && (<>
-            {creatingItem() && (<div class="card bg-base-100 p-2 rounded-md space-y-1.5">
-                <p class="font-medium text-sm">New Item</p>
-                <Input value={newItemTitle()} onChange={setNewItemTitle} label="Title"/>
-                <div class="flex justify-end space-x-1.5">
-                  <Button appearance="neutral" size="sm" onClick={() => {
+      </Show>
+      {!folded() && (<>
+          {creatingItem() && props.col && (<div class="card bg-base-100 p-2 rounded-md space-y-1.5">
+              <p class="font-medium text-sm">New Item</p>
+              <Input value={newItemTitle()} onChange={setNewItemTitle} label="Title"/>
+              <div class="flex justify-end space-x-1.5">
+                <Button appearance="neutral" size="sm" onClick={() => {
                     setCreatingItem(false);
                     setNewItemTitle("");
                 }}>
-                    Cancel
-                  </Button>
-                  <Button appearance="success" size="sm" onClick={() => {
+                  Cancel
+                </Button>
+                <Button appearance="success" size="sm" onClick={() => {
                     setCreatingItem(false);
                     props.onCreateItem?.(newItemTitle(), props.col.id);
                     setNewItemTitle("");
                 }}>
-                    Add
-                  </Button>
-                </div>
-              </div>)}
-            <For each={filteredItems()}>
-              {(item) => (<KanbanCard item={item} dragEnabled={itemDragEnabled} onCardClick={() => props.onCardClick?.(item)} class={props.cardClass} renderItem={props.renderItem} flashSignal={() => flashedCardId()}/>)}
-            </For>
-          </>)}
-      </div>
+                  Add
+                </Button>
+              </div>
+            </div>)}
+          <For each={filteredItems()}>
+            {(item) => (<KanbanCard item={item} dragEnabled={itemDragEnabled} onCardClick={() => props.onCardClick?.(item)} class={props.cardClass} renderItem={props.renderItem} flashSignal={() => flashedCardId()}/>)}
+          </For>
+        </>)}
     </div>);
 };
 export default KanbanColumn;

package/dist/components/Navbar/Navbar.d.ts

@@ -3,7 +3,9 @@ export interface NavbarProps {
     class?: string;
 }
 export interface NavbarComponents {
-    Brand: ParentComponent;
+    Brand: ParentComponent<{
+        href?: string;
+    }>;
     Profile: ParentComponent;
     Menu: ParentComponent;
     MenuItem: ParentComponent;
@@ -12,7 +14,9 @@ export interface NavbarComponents {
     }>;
 }
 export declare const Navbar: ParentComponent<NavbarProps> & NavbarComponents;
-export declare const NavbarBrand: ParentComponent;
+export declare const NavbarBrand: ParentComponent<{
+    href?: string;
+}>;
 export declare const NavbarProfile: ParentComponent;
 export declare const NavbarMenu: ParentComponent;
 export declare const NavbarSubmenu: ParentComponent<{

package/dist/components/Navbar/Navbar.jsx

@@ -7,7 +7,9 @@ export const Navbar = (props) => {
     return <nav class={navbar({ class: props.class })}>{props.children}</nav>;
 };
 export const NavbarBrand = (props) => {
-    return <div class="btn btn-lg btn-ghost">{props.children}</div>;
+    return (<a class="btn btn-lg btn-ghost" href={props.href}>
+      {props.children}
+    </a>);
 };
 export const NavbarProfile = (props) => {
     return <div class="avatar">{props.children}</div>;

package/dist/components/RelationPicker.d.ts

@@ -0,0 +1,23 @@
+import { JSXElement } from "solid-js";
+export interface RelationPickerProps<T> {
+    value: T | T[] | null;
+    options: T[];
+    onChange: (val: T | T[] | null) => void;
+    labelKey: keyof T;
+    valueKey: keyof T;
+    disabledKey?: keyof T;
+    multi?: boolean;
+    label?: string;
+    variant?: "ghost";
+    appearance?: "neutral" | "primary" | "secondary" | "accent" | "info" | "success" | "warning" | "error";
+    size?: "xs" | "sm" | "md" | "lg" | "xl";
+    disabled?: boolean;
+    placeholder?: string;
+    class?: string;
+    listboxAction?: JSXElement;
+    onTextInputChange?: (text: string) => void;
+    defaultFilter?: (option: T[] | Exclude<NonNullable<T>, null>, filter: string) => boolean;
+    onLinkClick?: (value: T) => void;
+}
+export declare const RelationPicker: <T>(props: RelationPickerProps<T>) => import("solid-js").JSX.Element;
+export default RelationPicker;

package/dist/components/RelationPicker.jsx

@@ -0,0 +1,144 @@
+import { Combobox } from "@kobalte/core/combobox";
+import Check from "lucide-solid/icons/check";
+import Link from "lucide-solid/icons/link";
+import UpDown from "lucide-solid/icons/chevrons-up-down";
+import { For, Show } from "solid-js";
+import { tv } from "tailwind-variants";
+import { Tag } from "./Tag";
+import { Button } from "./Button";
+import { iconSize } from "../constants";
+const input = tv({
+    base: "join-item input outline-offset-0",
+    variants: {
+        variant: {
+            ghost: "input-ghost",
+            none: "",
+        },
+        appearance: {
+            neutral: "input-neutral",
+            primary: "input-primary",
+            secondary: "input-secondary",
+            accent: "input-accent",
+            info: "input-info",
+            success: "input-success",
+            warning: "input-warning",
+            error: "input-error",
+        },
+        size: {
+            xs: "input-xs",
+            sm: "input-sm",
+            md: "input-md",
+            lg: "input-lg",
+            xl: "input-xl",
+        },
+        tags: {
+            true: "h-full py-1.25",
+            false: "",
+        },
+    },
+    defaultVariants: {
+        size: "sm",
+    },
+});
+const menu = tv({
+    base: "menu w-full",
+    variants: {
+        size: {
+            xs: "menu-xs",
+            sm: "menu-sm",
+            md: "menu-base",
+            lg: "menu-lg",
+            xl: "menu-xl",
+        },
+    },
+    defaultVariants: {
+        size: "sm",
+    },
+});
+export const RelationPicker = (props) => {
+    let inputRef;
+    const values = () => {
+        if (props.multi) {
+            return Array.isArray(props.value) ? props.value : props.value ? [props.value] : [];
+        }
+        else {
+            return props.value && !Array.isArray(props.value) ? props.value : null;
+        }
+    };
+    const options = () => {
+        if (props.options.length === 0)
+            return [
+                { [props.labelKey]: "No Records Found", [props.valueKey]: "__no_options__", disabled: true },
+            ];
+        return props.options;
+    };
+    return (<div class="floating-label">
+      {props.label && <span>{props.label}</span>}
+      <Combobox disabled={props.disabled} multiple={props.multi} value={values()} onChange={props.onChange} options={options()} 
+    //@ts-ignore, kobalte confusing, just ignore for now...
+    optionValue={props.valueKey} 
+    //@ts-ignore
+    optionTextValue={props.labelKey} 
+    //@ts-ignore
+    optionLabel={props.labelKey} 
+    //@ts-ignore
+    optionDisabled={props.disabledKey} placeholder={props.placeholder} onMouseDown={(e) => {
+            e.preventDefault();
+            inputRef?.focus();
+        }} defaultFilter={props.defaultFilter} itemComponent={(itemProps) => (<Combobox.Item item={itemProps.item} class="outline-none focus:bg-base-300 rounded-sm">
+            <Combobox.ItemLabel class="flex flex-row justify-between items-center">
+              {itemProps.item.textValue}
+              <Combobox.ItemIndicator>
+                <Check size={16}/>
+              </Combobox.ItemIndicator>
+            </Combobox.ItemLabel>
+          </Combobox.Item>)}>
+        <Combobox.Control class="join w-full max-w-[20rem]">
+          {(state) => (<>
+              <div class={input({
+                variant: props.variant,
+                appearance: props.appearance,
+                size: props.size,
+                class: props.class,
+                tags: props.multi && Array.isArray(props.value) && props.value.length > 0,
+            })}>
+                <Show when={props.multi} fallback={<>
+                      {!props.multi && values() && (<Button variant="ghost" appearance="primary" size="xs" modifier="square" onClick={() => props.onLinkClick?.(props.value)}>
+                          <Link class="w-[1em] h-[1em]"/>
+                        </Button>)}
+                      <Combobox.Input onBlur={(e) => {
+                    if (!props.value) {
+                        e.currentTarget.value = "";
+                    }
+                    else {
+                        e.currentTarget.value = String(state.selectedOptions()[0][props.labelKey]);
+                    }
+                }} ref={inputRef} onInput={(e) => props.onTextInputChange?.(e.currentTarget.value)}/>
+                    </>}>
+                  <div class="flex flex-wrap gap-1 w-full">
+                    <For each={state.selectedOptions()}>
+                      {(option) => (<span onPointerDown={(e) => e.stopPropagation()}>
+                          <Tag appearance="neutral" variant="soft" title={String(option[props.labelKey])} onDelete={() => state.remove(option)}/>
+                        </span>)}
+                    </For>
+                    <Combobox.Input class="w-[unset]" onBlur={(e) => (e.currentTarget.value = "")} ref={inputRef} onInput={(e) => props.onTextInputChange?.(e.currentTarget.value)}/>
+                  </div>
+                </Show>
+              </div>
+              <Combobox.Trigger as={Button} size={props.size} modifier="square" class="join-item">
+                <Combobox.Icon>
+                  <UpDown size={iconSize[props.size ?? "sm"]}/>
+                </Combobox.Icon>
+              </Combobox.Trigger>
+            </>)}
+        </Combobox.Control>
+        <Combobox.Portal>
+          <Combobox.Content class="rounded-box bg-base-100 shadow-md border border-base-200 z-20 max-h-100 overflow-auto">
+            <Combobox.Listbox class={menu({ size: props.size })}/>
+            {props.listboxAction}
+          </Combobox.Content>
+        </Combobox.Portal>
+      </Combobox>
+    </div>);
+};
+export default RelationPicker;

package/dist/components/Select/Select.jsx

@@ -1,9 +1,11 @@
 import { Select as KSelect } from "@kobalte/core/select";
 import Check from "lucide-solid/icons/check";
-import Down from "lucide-solid/icons/chevron-down";
+import UpDown from "lucide-solid/icons/chevrons-up-down";
 import { tv } from "tailwind-variants";
+import { Button } from "../Button";
+import { iconSize } from "../../constants";
 const trigger = tv({
-    base: "input outline-offset-0 flex justify-between items-center",
+    base: "input outline-offset-0 flex justify-between items-center join-item",
     variants: {
         variant: {
             ghost: "input-ghost",
@@ -59,21 +61,23 @@ export const Select = (props) => {
               </KSelect.ItemLabel>
             </KSelect.Item>);
         }}>
-        <KSelect.Trigger class={trigger({
+        <KSelect.Trigger class="join w-full max-w-[20rem]">
+          <div class={trigger({
             variant: props.variant,
             appearance: props.appearance,
             size: props.size,
             class: props.class,
         })}>
-          <KSelect.Value>
-            {(state) => String(props.labelKey ? state.selectedOption()?.[props.labelKey] : "")}
-          </KSelect.Value>
-          <KSelect.Icon>
-            <Down size={16}/>
+            <KSelect.Value>
+              {(state) => String(props.labelKey ? state.selectedOption()?.[props.labelKey] : "")}
+            </KSelect.Value>
+          </div>
+          <KSelect.Icon as={Button} class="join-item" modifier="square" size={props.size}>
+            <UpDown size={iconSize[props.size ?? "sm"]}/>
           </KSelect.Icon>
         </KSelect.Trigger>
         <KSelect.Portal>
-          <KSelect.Content class="rounded-box bg-base-100 shadow-md border border-base-200 z-20">
+          <KSelect.Content class="rounded-box bg-base-100 shadow-md border border-base-200 z-20 max-h-100 overflow-auto">
             <KSelect.Listbox class={menu({ size: props.size })}/>
           </KSelect.Content>
         </KSelect.Portal>

package/dist/components/Table/Table.d.ts

@@ -1,4 +1,4 @@
-import { Accessor, JSXElement } from "solid-js";
+import { JSXElement } from "solid-js";
 import { ColumnDef, Row } from "@tanstack/solid-table";
 interface TableItem {
     id: string;
@@ -9,8 +9,8 @@ interface TableProps<T extends TableItem> {
     data: T[];
     createFunc?: () => Promise<void>;
     headerActions?: JSXElement;
-    columns: Accessor<ColumnDef<T>[]>;
-    onRowClick: (item: T) => void;
+    columns: ColumnDef<T>[];
+    onRowClick?: (item: T) => void;
     loading?: boolean;
     emptyState?: JSXElement;
     loadingFallback?: JSXElement;

package/dist/components/Table/Table.jsx

@@ -116,7 +116,7 @@ export const Table = (props) => {
         get data() {
             return props.data || [];
         },
-        columns: props.columns(),
+        columns: props.columns,
         getCoreRowModel: getCoreRowModel(),
     });
     const rowCount = createMemo(() => table.getRowModel().rows.length);
@@ -164,7 +164,7 @@ export const Table = (props) => {
               <Loader class="w-9 h-9 animate-spin"/>
             </div>)}>
         <Show when={rowCount() > 0} fallback={props.emptyState || <div class="text-center py-4">No results found.</div>}>
-          <table class={tableClass({ class: props.class })}>
+          <table class={tableClass({ class: props.class, size: props.size })}>
             <Show when={props.headers}>
               <thead>
                 <For each={table.getHeaderGroups()}>
@@ -182,7 +182,7 @@ export const Table = (props) => {
 
             <tbody>
               <For each={rows()}>
-                {(row, ind) => (<TableRow row={row} ind={ind()} onRowClick={() => props.onRowClick(row.original)} dragEnabled={dragEnabled} flashSignal={() => flashedRowId()}/>)}
+                {(row, ind) => (<TableRow row={row} ind={ind()} onRowClick={() => props.onRowClick?.(row.original)} dragEnabled={dragEnabled} flashSignal={() => flashedRowId()}/>)}
               </For>
             </tbody>
           </table>

package/dist/components/ThemeSwitch/ThemeSwitch.d.ts

@@ -1,2 +1,11 @@
-export declare function ThemeSwitch(): import("solid-js").JSX.Element;
+import { Component, JSXElement } from "solid-js";
+export interface ThemeOption {
+    value: string;
+    label: JSXElement;
+}
+interface ThemeSwitchProps {
+    triggerClass?: string;
+    options: ThemeOption[];
+}
+export declare const ThemeSwitch: Component<ThemeSwitchProps>;
 export default ThemeSwitch;

package/dist/components/ThemeSwitch/ThemeSwitch.jsx

@@ -1,72 +1,47 @@
-import { createSignal, onMount } from "solid-js";
-import Sun from "lucide-solid/icons/sun";
-import Moon from "lucide-solid/icons/moon";
+import { For } from "solid-js";
 import Monitor from "lucide-solid/icons/monitor";
+import { tv } from "tailwind-variants";
 import { DropdownMenu } from "../DropdownMenu";
-import { Button } from "../Button";
-const THEME_KEY = "theme";
-function getSystemTheme() {
-    if (window.matchMedia("(prefers-color-scheme: dark)").matches)
-        return "dark";
-    return "light";
-}
-function applyTheme(theme) {
-    const html = document.documentElement;
-    let applied = theme;
-    if (theme === "system") {
-        applied = getSystemTheme();
-    }
-    html.setAttribute("data-theme", applied);
-}
-const labelClass = "flex items-center gap-1";
-const getThemeValue = (theme) => {
-    switch (theme) {
-        case "light":
-            return (<span class={labelClass}>
-          <Sun class="w-[1em] h-[1em]"/> Light
-        </span>);
-        case "dark":
-            return (<span class={labelClass}>
-          <Moon class="w-[1em] h-[1em]"/> Dark
-        </span>);
-        case "system":
-            return (<span class={labelClass}>
-          <Monitor class="w-[1em] h-[1em]"/> System
-        </span>);
-    }
-};
-export function ThemeSwitch() {
-    const [theme, setTheme] = createSignal("system");
-    onMount(() => {
-        const saved = localStorage.getItem(THEME_KEY);
-        if (saved) {
-            setTheme(saved);
-            applyTheme(saved);
-        }
-        else {
-            applyTheme("system");
-        }
-    });
+import { THEME_KEY } from "../../constants";
+const trigger = tv({
+    base: "min-w-30",
+});
+const SystemOption = () => (<span class="flex items-center gap-1">
+    <Monitor class="w-[1em] h-[1em]"/> System
+  </span>);
+export const ThemeSwitch = (props) => {
+    const options = () => props.options;
+    const theme = localStorage.getItem("theme");
     const handleChange = (val) => {
-        setTheme(val);
+        if (val === "system") {
+            localStorage.removeItem(THEME_KEY);
+            document.documentElement.removeAttribute("data-theme");
+            return;
+        }
         localStorage.setItem(THEME_KEY, val);
-        applyTheme(val);
+        document.documentElement.setAttribute("data-theme", val);
+    };
+    const getCurrentLabel = () => {
+        if (theme === "system") {
+            return <SystemOption />;
+        }
+        const option = options().find((opt) => opt.value === theme);
+        return option?.label || theme;
     };
     return (<DropdownMenu>
-      <DropdownMenu.Trigger>
-        <Button>{getThemeValue(theme())}</Button>
+      <DropdownMenu.Trigger class={trigger({ class: props.triggerClass })}>
+        {getCurrentLabel()}
       </DropdownMenu.Trigger>
       <DropdownMenu.Content>
-        <DropdownMenu.MenuItem onSelect={() => handleChange("light")}>
-          {getThemeValue("light")}
-        </DropdownMenu.MenuItem>
-        <DropdownMenu.MenuItem onSelect={() => handleChange("dark")}>
-          {getThemeValue("dark")}
-        </DropdownMenu.MenuItem>
+        <For each={options()}>
+          {(option) => (<DropdownMenu.MenuItem onSelect={() => handleChange(option.value)}>
+              {option.label}
+            </DropdownMenu.MenuItem>)}
+        </For>
         <DropdownMenu.MenuItem onSelect={() => handleChange("system")}>
-          {getThemeValue("system")}
+          <SystemOption />
         </DropdownMenu.MenuItem>
       </DropdownMenu.Content>
     </DropdownMenu>);
-}
+};
 export default ThemeSwitch;

package/dist/constants.d.ts

@@ -5,3 +5,4 @@ export declare const iconSize: {
     lg: number;
     xl: number;
 };
+export declare const THEME_KEY = "theme";

package/dist/constants.js

@@ -5,3 +5,4 @@ export const iconSize = {
     lg: 20,
     xl: 22,
 };
+export const THEME_KEY = "theme";

package/dist/index.d.ts

@@ -33,4 +33,5 @@ export * from "./components/TextArea";
 export * from "./components/ThemeSwitch";
 export * from "./components/Toast";
 export * from "./components/Tooltip";
+export * from "./components/RelationPicker";
 export * from "./methods/debounce";

package/dist/index.js

@@ -33,4 +33,5 @@ export * from "./components/TextArea";
 export * from "./components/ThemeSwitch";
 export * from "./components/Toast";
 export * from "./components/Tooltip";
+export * from "./components/RelationPicker";
 export * from "./methods/debounce";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@solidpb/ui-kit",
-  "version": "0.2.0",
+  "version": "0.4.0",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",

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

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

package/dist/components/Form/index.js

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