@solidpb/ui-kit 0.2.0 → 0.3.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/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

@@ -14,6 +14,7 @@ export interface FormProps<T> {
     onSave?: (values: Partial<T>) => Promise<void>;
     onCancel?: () => void;
     children: JSXElement;
+    class?: string;
 }
 type BaseFieldProps<T> = {
     field: keyof T;

package/dist/components/Form/Form.jsx

@@ -11,6 +11,10 @@ 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 });
@@ -26,7 +30,7 @@ export function createForm() {
             props.onSave?.(values);
         };
         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}

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-box shadow 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-box shadow 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-box">
             <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/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);
@@ -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,49 @@
-import { createSignal, onMount } from "solid-js";
-import Sun from "lucide-solid/icons/sun";
-import Moon from "lucide-solid/icons/moon";
+import { createSignal, 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() {
+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, setTheme] = createSignal("system");
-    onMount(() => {
-        const saved = localStorage.getItem(THEME_KEY);
-        if (saved) {
-            setTheme(saved);
-            applyTheme(saved);
-        }
-        else {
-            applyTheme("system");
-        }
-    });
     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 = () => {
+        const current = theme();
+        if (current === "system") {
+            return <SystemOption />;
+        }
+        const option = options().find((opt) => opt.value === current);
+        return option?.label || current;
     };
     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/package.json

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