@solidpb/ui-kit 0.3.0 → 0.4.1

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/{Form/Form.d.ts → Form.d.ts}

@@ -1,15 +1,16 @@
 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;
@@ -33,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,17 +1,18 @@
 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";
+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 RelationPicker from "./RelationPicker";
 const formClass = tv({
     base: "space-y-4 space-x-4",
 });
@@ -24,7 +25,7 @@ export function createForm() {
         const getValue = (key) => {
             return values[key];
         };
-        const contextValue = { setValue, getValue, values };
+        const contextValue = { setValue, getValue };
         const handleSubmit = (e) => {
             e.preventDefault();
             props.onSave?.(values);
@@ -36,10 +37,10 @@ export function createForm() {
           {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>
@@ -80,15 +81,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;
@@ -98,5 +116,6 @@ export function createForm() {
     Form.FileField = FileField;
     Form.ImageField = ImageField;
     Form.SliderField = SliderField;
+    Form.RelationField = RelationField;
     return Form;
 }

package/dist/components/Image/Image.jsx

@@ -4,7 +4,7 @@ import Pencil from "lucide-solid/icons/pencil";
 import ImageIcon from "lucide-solid/icons/image";
 import { Button } from "../Button";
 const image = tv({
-    base: "rounded-box shadow object-cover",
+    base: "rounded-sm object-cover",
     variants: {
         size: {
             xs: "w-16 h-16",
@@ -16,7 +16,7 @@ const image = tv({
     },
 });
 const placeholder = tv({
-    base: "rounded-box shadow flex items-center justify-center bg-base-200",
+    base: "rounded-sm flex items-center justify-center bg-base-200",
     variants: {
         size: {
             xs: "w-16 h-16",
@@ -70,7 +70,7 @@ export const Image = (props) => {
           <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">
+          <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/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.jsx

@@ -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()}>

package/dist/components/ThemeSwitch/ThemeSwitch.jsx

@@ -1,4 +1,4 @@
-import { createSignal, For } from "solid-js";
+import { For } from "solid-js";
 import Monitor from "lucide-solid/icons/monitor";
 import { tv } from "tailwind-variants";
 import { DropdownMenu } from "../DropdownMenu";
@@ -11,9 +11,8 @@ const SystemOption = () => (<span class="flex items-center gap-1">
   </span>);
 export const ThemeSwitch = (props) => {
     const options = () => props.options;
-    const [theme, setTheme] = createSignal("system");
+    const theme = localStorage.getItem("theme");
     const handleChange = (val) => {
-        setTheme(val);
         if (val === "system") {
             localStorage.removeItem(THEME_KEY);
             document.documentElement.removeAttribute("data-theme");
@@ -23,12 +22,11 @@ export const ThemeSwitch = (props) => {
         document.documentElement.setAttribute("data-theme", val);
     };
     const getCurrentLabel = () => {
-        const current = theme();
-        if (current === "system") {
+        if (theme === "system") {
             return <SystemOption />;
         }
-        const option = options().find((opt) => opt.value === current);
-        return option?.label || current;
+        const option = options().find((opt) => opt.value === theme);
+        return option?.label || theme;
     };
     return (<DropdownMenu>
       <DropdownMenu.Trigger class={trigger({ class: props.triggerClass })}>

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.3.0",
+  "version": "0.4.1",
   "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";