@solidpb/ui-kit 0.1.0

package/dist/components/List/List.jsx

@@ -0,0 +1,120 @@
+import { createSolidTable, flexRender, getCoreRowModel, getFilteredRowModel, } from "@tanstack/solid-table";
+import { For, Show, createMemo, createSignal } from "solid-js";
+import { createVirtualizer } from "@tanstack/solid-virtual";
+import { tv } from "tailwind-variants";
+import Loader from "lucide-solid/icons/loader";
+import Plus from "lucide-solid/icons/plus";
+import { Button } from "../Button";
+import { Input } from "../Input";
+const containerClass = tv({
+    base: "overflow-y-auto relative flex-1",
+});
+export const DefaultRowRenderer = (props) => {
+    return (<div class="flex justify-between items-center cursor-pointer text-sm border-b border-[var(--color-light-muted)] dark:border-[var(--color-dark-muted)] py-2 hover:bg-[var(--color-light-muted)] dark:hover:bg-[var(--color-dark-muted)]" onClick={() => props.onClick(props.row.original)}>
+      <For each={props.row.getVisibleCells()}>
+        {(cell) => (<div class="flex-1 overflow-hidden truncate">
+            {flexRender(cell.column.columnDef.cell, cell.getContext())}
+          </div>)}
+      </For>
+    </div>);
+};
+export const List = (props) => {
+    const [globalFilter, setGlobalFilter] = createSignal();
+    let parentRef;
+    const table = createSolidTable({
+        get data() {
+            return props.data?.() || [];
+        },
+        columns: props.columns(),
+        getCoreRowModel: getCoreRowModel(),
+        getFilteredRowModel: getFilteredRowModel(),
+        state: {
+            get globalFilter() {
+                return globalFilter();
+            },
+            get columnFilters() {
+                return props.filters?.();
+            },
+        },
+    });
+    const rowCount = createMemo(() => table.getRowModel().rows.length);
+    const dataExists = createMemo(() => props.data?.() || props.loading);
+    const rows = createMemo(() => table.getRowModel().rows);
+    const virtualizer = createMemo(() => createVirtualizer({
+        get count() {
+            return rows().length;
+        },
+        getScrollElement: () => {
+            return parentRef;
+        },
+        estimateSize: () => 41,
+        get getItemKey() {
+            return (index) => rows()[index].id;
+        },
+    }));
+    const virtualRows = createMemo(() => virtualizer().getVirtualItems());
+    const totalSize = createMemo(() => virtualizer().getTotalSize());
+    const containerStyle = createMemo(() => containerClass({ class: props.containerClass }));
+    return (<div class="flex flex-col h-full max-h-[inherit]">
+      <Show when={dataExists()} fallback={props.loadingFallback || (<div class="fixed inset-0 z-100 flex items-center justify-center bg-[var(--color-dark-background)]/25 dark:bg-[var(--color-light-background)]/25">
+              <Loader class="w-9 h-9 animate-spin text-[var(--color-light-muted)] dark:text-[var(--color-dark-muted)]"/>
+            </div>)}>
+        <div class="sticky top-0 bg-charcoal-500/95 backdrop-blur-xs">
+          <Show when={props.search}>
+            <div class="flex items-center space-x-2 mt-3 mb-1">
+              <Show when={props.createFunc}>
+                <Button class="flex text-sm items-center pl-1 pr-2" variant="solid" appearance="success" onClick={props.createFunc}>
+                  <Plus size={20}/>
+                  New
+                </Button>
+              </Show>
+
+              <div class="w-full relative">
+                <Input class="w-full" value={globalFilter()} onChange={setGlobalFilter} inputProps={{ placeholder: props.searchPlaceholder ?? "Search", class: "p-1" }}/>
+                {props.loading && (<Loader size={16} class="absolute animate-spin top-1/2 transform -translate-y-1/2 right-2"/>)}
+              </div>
+            </div>
+          </Show>
+
+          <Show when={props.headerActions}>{props.headerActions}</Show>
+
+          <Show when={props.showItemCount}>
+            <p class="text-xs italic mb-1">{rowCount()} items</p>
+          </Show>
+        </div>
+
+        <Show when={props.headers}>
+          <For each={table.getHeaderGroups()}>
+            {(headerGroup) => (<div class="flex flex-row w-full justify-between sticky top-0 bg-[var(--color-light-surface)]/95 dark:bg-[var(--color-dark-surface)]/95 text-[var(--color-text-light-primary)] dark:text-[var(--color-dark-primary)] backdrop-blur-sm p-2 z-10">
+                <For each={headerGroup.headers}>
+                  {(header) => (<div class="text-left font-bold">
+                      {flexRender(header.column.columnDef.header, header.getContext())}
+                    </div>)}
+                </For>
+              </div>)}
+          </For>
+        </Show>
+
+        <div ref={parentRef} class={containerStyle()}>
+          <Show when={rowCount() > 0} fallback={props.emptyState || <div class="text-center py-4">No results found.</div>}>
+            <div class="w-full" style={{
+            height: `${totalSize()}px`,
+            position: "relative",
+        }}>
+              <For each={virtualRows()}>
+                {(virtualRow) => {
+            const row = rows()[virtualRow.index];
+            return (<div data-index={virtualRow.index} ref={(el) => queueMicrotask(() => virtualizer().measureElement(el))} class="absolute w-full" style={{ transform: `translateY(${virtualRow.start}px)` }}>
+                      <Show when={props.renderRow} fallback={<DefaultRowRenderer row={row} columns={props.columns} onClick={props.onRowClick}/>}>
+                        {props.renderRow(row, props.onRowClick)}
+                      </Show>
+                    </div>);
+        }}
+              </For>
+            </div>
+          </Show>
+        </div>
+      </Show>
+    </div>);
+};
+export default List;

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

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

package/dist/components/List/index.js

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

package/dist/components/Modal/Modal.d.ts

@@ -0,0 +1,13 @@
+import { ParentComponent } from "solid-js";
+interface Props {
+    setModalVisible?: (v: boolean) => void;
+    saveFunc?: () => Promise<void>;
+    zIndexClass?: string;
+    title?: string;
+}
+export declare const Modal: ParentComponent<Props>;
+export default Modal;
+export declare function useModalLoading(): {
+    loading: import("solid-js").Accessor<boolean>;
+    setLoading: import("solid-js").Setter<boolean>;
+};

package/dist/components/Modal/Modal.jsx

@@ -0,0 +1,51 @@
+import { createSignal, Show, useContext } from "solid-js";
+import { Portal } from "solid-js/web";
+import Loader from "lucide-solid/icons/loader";
+import { Button } from "../Button";
+import { ModalContext } from "./modalContext";
+export const Modal = (props) => {
+    const [loading, setLoading] = createSignal(false);
+    const containerStyle = `${props.zIndexClass !== undefined ? props.zIndexClass : "z-50"} fixed inset-0 flex items-center justify-center bg-black/50`;
+    return (<Portal>
+      <Show when={loading()}>
+        <div class="fixed inset-0 z-100 flex items-center justify-center bg-gray-800/25">
+          <Loader class="w-9 h-9 animate-spin text-gray-700"/>
+        </div>
+      </Show>
+      <div class={containerStyle} onClick={() => props.setModalVisible?.(false)}>
+        <div class={`bg-charcoal-500 text-dark-slate-gray-900 rounded-xl shadow-lg p-4 md:p-6
+              w-full mx-3 sm:w-[50vw] lg:w-[35vw] flex flex-col`} onClick={(e) => e.stopPropagation()}>
+          <Show when={props.title}>
+            <h2 class="pb-2">{props.title}</h2>
+          </Show>
+          <div class="max-h-[55vh] overflow-y-hidden flex flex-col h-full">
+            <ModalContext.Provider value={{ loading, setLoading }}>{props.children}</ModalContext.Provider>
+          </div>
+          <div class="w-full flex justify-end space-x-2">
+            <Button onClick={() => props.setModalVisible?.(false)} class="mt-3">
+              Cancel
+            </Button>
+
+            <Show when={props.saveFunc}>
+              <Button appearance="success" onClick={() => {
+            setLoading(true);
+            props.saveFunc()
+                .then(() => props.setModalVisible?.(false))
+                .finally(() => setLoading(false));
+        }} class="mt-3">
+                Save
+              </Button>
+            </Show>
+          </div>
+        </div>
+      </div>
+    </Portal>);
+};
+export default Modal;
+export function useModalLoading() {
+    const context = useContext(ModalContext);
+    if (!context) {
+        throw new Error("useModalLoading must be used within a Modal");
+    }
+    return context;
+}

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

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

package/dist/components/Modal/index.js

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

package/dist/components/Modal/modalContext.d.ts

@@ -0,0 +1,7 @@
+import { Accessor, Setter } from "solid-js";
+type ModalContextType = {
+    loading: Accessor<boolean>;
+    setLoading: Setter<boolean>;
+};
+export declare const ModalContext: import("solid-js").Context<ModalContextType | undefined>;
+export {};

package/dist/components/Modal/modalContext.js

@@ -0,0 +1,2 @@
+import { createContext } from "solid-js";
+export const ModalContext = createContext();

package/dist/components/NumberInput/NumberInput.d.ts

@@ -0,0 +1,13 @@
+import { Component, ValidComponent } from "solid-js";
+import { type NumberFieldInputProps, type NumberFieldRootProps } from "@kobalte/core/number-field";
+import type { PolymorphicProps } from "@kobalte/core";
+type InputProps<T extends ValidComponent = "input"> = PolymorphicProps<T, NumberFieldInputProps<T>>;
+interface ExtraProps {
+    label?: string;
+    size?: "sm" | "md";
+    inputProps?: InputProps;
+    saveFunc?: (v: number) => Promise<any>;
+}
+type InputRootProps<T extends ValidComponent = "div"> = ExtraProps & PolymorphicProps<T, NumberFieldRootProps<T>>;
+export declare const NumberInput: Component<InputRootProps>;
+export default NumberInput;

package/dist/components/NumberInput/NumberInput.jsx

@@ -0,0 +1,20 @@
+import { createMemo, Show, splitProps } from "solid-js";
+import { NumberField, } from "@kobalte/core/number-field";
+import { debounce } from "../../methods/debounce";
+import { tv } from "tailwind-variants";
+const inputRoot = tv({ base: "flex flex-row items-center space-x-1" });
+const inputField = tv({ base: "input outline-none text-right my-0" });
+export const NumberInput = (props) => {
+    const [local, others] = splitProps(props, ["label", "class", "inputProps", "saveFunc"]);
+    const debouncedSave = createMemo(() => (local.saveFunc ? debounce(local.saveFunc) : undefined));
+    const handleChange = (v) => {
+        debouncedSave()?.(Number(v));
+    };
+    return (<NumberField {...others} onChange={handleChange} class={inputRoot({ class: local.class })}>
+      <Show when={local.label}>
+        <NumberField.Label>{local.label}</NumberField.Label>
+      </Show>
+      <NumberField.Input {...local.inputProps} class={inputField({ class: local.inputProps?.class ?? "" })}/>
+    </NumberField>);
+};
+export default NumberInput;

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

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

package/dist/components/NumberInput/index.js

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

package/dist/components/RelationPicker/RelationPicker.d.ts

@@ -0,0 +1,11 @@
+interface RelationPickerProps<T extends TagRecord = TagRecord> {
+    relations: T[];
+    setRelations: (relations: T[]) => void;
+    suggestions?: T[];
+    onCreateRelation: (name: string) => Promise<T>;
+    onDeleteRelation: (relation: T) => Promise<void>;
+    placeholder?: string;
+    label?: string;
+}
+export declare const RelationPicker: <T extends TagRecord = TagRecord>(props: RelationPickerProps<T>) => import("solid-js").JSX.Element;
+export default RelationPicker;

package/dist/components/RelationPicker/RelationPicker.jsx

@@ -0,0 +1,13 @@
+import { Show } from "solid-js";
+import TagArea from "../TagArea/TagArea";
+export const RelationPicker = (props) => {
+    return (<div class="flex flex-col gap-1">
+      <Show when={props.label}>
+        <span class="text-xs font-medium text-(--color-text-light-secondary) dark:text-(--color-text-dark-secondary) mb-1">
+          {props.label}
+        </span>
+      </Show>
+      <TagArea tags={props.relations} setTags={props.setRelations} suggestions={props.suggestions} onCreateTag={props.onCreateRelation} onDeleteTag={props.onDeleteRelation} placeholder={props.placeholder || "Add relation..."}/>
+    </div>);
+};
+export default RelationPicker;

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

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

package/dist/components/RelationPicker/index.js

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

package/dist/components/SearchInput/SearchInput.d.ts

@@ -0,0 +1,9 @@
+import { Component } from "solid-js";
+interface SearchInputProps {
+    value: string;
+    onChange: (v: string) => void;
+    placeholder?: string;
+    class?: string;
+}
+export declare const SearchInput: Component<SearchInputProps>;
+export default SearchInput;

package/dist/components/SearchInput/SearchInput.jsx

@@ -0,0 +1,9 @@
+import { TextField } from "@kobalte/core/text-field";
+import { tv } from "tailwind-variants";
+const search = tv({
+    base: "w-full rounded px-2 py-1 border border-[var(--color-light-muted)] dark:border-[var(--color-dark-muted)] bg-[var(--color-light-surface)] dark:bg-[var(--color-dark-surface)]",
+});
+export const SearchInput = (props) => (<TextField class={search({ class: props.class })} value={props.value} onChange={props.onChange}>
+    <TextField.Input placeholder={props.placeholder || "Search..."}/>
+  </TextField>);
+export default SearchInput;

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

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

package/dist/components/SearchInput/index.js

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

package/dist/components/Select/Select.d.ts

@@ -0,0 +1,15 @@
+import { Component } from "solid-js";
+interface Option {
+    label: string;
+    value: string;
+}
+interface SelectProps {
+    label?: string;
+    options: Option[];
+    value: string;
+    onChange: (value: string | null) => void;
+    placeholder?: string;
+    class?: string;
+}
+export declare const Select: Component<SelectProps>;
+export default Select;

package/dist/components/Select/Select.jsx

@@ -0,0 +1,37 @@
+import { Select as KobalteSelect } from "@kobalte/core/select";
+import Check from "lucide-solid/icons/check";
+import UpDown from "lucide-solid/icons/chevrons-up-down";
+export const Select = (props) => {
+    return (<div class={props.class}>
+      {props.label && (<label class="block mb-1 text-xs font-medium text-[var(--color-text-light-secondary)] dark:text-[var(--color-text-dark-secondary)]">
+          {props.label}
+        </label>)}
+      <KobalteSelect multiple={false} value={props.value} onChange={props.onChange} options={props.options.map((o) => o.value)} placeholder={props.placeholder} itemComponent={(itemProps) => {
+            const option = props.options.find((o) => o.value === itemProps.item.rawValue);
+            return (<KobalteSelect.Item item={itemProps.item} class="flex flex-row space-x-1 px-2 py-1 hover:bg-[var(--color-light-muted)] dark:hover:bg-[var(--color-dark-muted)] rounded cursor-pointer">
+              <KobalteSelect.ItemLabel>{option?.label ?? itemProps.item.textValue}</KobalteSelect.ItemLabel>
+              <KobalteSelect.ItemIndicator>
+                <Check size={16}/>
+              </KobalteSelect.ItemIndicator>
+            </KobalteSelect.Item>);
+        }}>
+        <KobalteSelect.Trigger class="rounded border px-3 py-1 bg-[var(--color-light-surface)] dark:bg-[var(--color-dark-surface)] flex flex-row items-center justify-between w-full text-[var(--color-text-light-primary)] dark:text-[var(--color-text-dark-primary)]">
+          <KobalteSelect.Value>
+            {(state) => {
+            const selected = props.options.find((o) => o.value === state.selectedOption());
+            return selected ? selected.label : props.placeholder || "Select...";
+        }}
+          </KobalteSelect.Value>
+          <KobalteSelect.Icon>
+            <UpDown size={16}/>
+          </KobalteSelect.Icon>
+        </KobalteSelect.Trigger>
+        <KobalteSelect.Portal>
+          <KobalteSelect.Content class="rounded border bg-[var(--color-light-surface)] dark:bg-[var(--color-dark-surface)] text-[var(--color-text-light-primary)] dark:text-[var(--color-text-dark-primary)] shadow-lg mt-1">
+            <KobalteSelect.Listbox class="max-h-50 overflow-y-auto"/>
+          </KobalteSelect.Content>
+        </KobalteSelect.Portal>
+      </KobalteSelect>
+    </div>);
+};
+export default Select;

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

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

package/dist/components/Select/index.js

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

package/dist/components/Switch/Switch.d.ts

@@ -0,0 +1,11 @@
+import { SwitchRootProps } from "@kobalte/core/switch";
+import { Component, ValidComponent } from "solid-js";
+import { PolymorphicProps } from "@kobalte/core";
+type SwitchProps<T extends ValidComponent = "div"> = PolymorphicProps<T, SwitchRootProps<T>>;
+interface Props extends SwitchProps {
+    label?: string;
+    size?: "sm" | "md";
+    saveFunc?: (v: boolean) => Promise<any>;
+}
+export declare const Switch: Component<Props>;
+export default Switch;

package/dist/components/Switch/Switch.jsx

@@ -0,0 +1,22 @@
+import { Switch as KSwitch } from "@kobalte/core/switch";
+import { createMemo, Show } from "solid-js";
+import { debounce } from "../../methods/debounce";
+export const Switch = (props) => {
+    const debouncedSave = createMemo(() => (props.saveFunc ? debounce(props.saveFunc) : undefined));
+    const handleChange = (v) => {
+        props.onChange?.(v);
+        debouncedSave()?.(v);
+    };
+    return (<KSwitch class={`flex flex-row justify-between items-center ${props.class ?? ""}`} checked={props.checked} onChange={handleChange}>
+      <Show when={props.label}>
+        <KSwitch.Label>{props.label}</KSwitch.Label>
+      </Show>
+      <KSwitch.Input />
+      <KSwitch.Control class={`flex items-center w-10 h-6 bg-black rounded-full border-1 border-black
+        data-[checked]:bg-white data-[checked]:border-white transition-all`}>
+        <KSwitch.Thumb class={`h-5 w-5 rounded-full bg-white transition-transform 
+            data-[checked]:[transform:translateX(calc(100%-2px))]`}/>
+      </KSwitch.Control>
+    </KSwitch>);
+};
+export default Switch;

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

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

package/dist/components/Switch/index.js

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

package/dist/components/Tabs/Tabs.d.ts

@@ -0,0 +1,3 @@
+import { ParentComponent } from "solid-js";
+export declare const Tabs: ParentComponent;
+export default Tabs;

package/dist/components/Tabs/Tabs.jsx

@@ -0,0 +1,4 @@
+export const Tabs = (props) => {
+    return <div>{props.children}</div>;
+};
+export default Tabs;

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

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

package/dist/components/Tabs/index.js

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

package/dist/components/Tag/Tag.d.ts

@@ -0,0 +1,10 @@
+import { Component } from "solid-js";
+interface Props {
+    onClick: () => void;
+    title: string;
+    colorHex: string;
+    size?: "xs" | "s" | "m";
+    class?: string;
+}
+export declare const Tag: Component<Props>;
+export default Tag;

package/dist/components/Tag/Tag.jsx

@@ -0,0 +1,30 @@
+import { createMemo } from "solid-js";
+import { Button as KobalteButton } from "@kobalte/core/button";
+import CloseIcon from "lucide-solid/icons/x";
+import { tv } from "tailwind-variants";
+const tag = tv({
+    base: "flex items-center rounded-full select-none border-1 font-bold",
+    variants: {
+        size: {
+            m: "text-sm px-2 py-1",
+            s: "text-sm pl-1.5 pr-1 py-0.5",
+            xs: "text-xs px-1",
+        },
+    },
+    defaultVariants: {
+        size: "m",
+    },
+});
+export const Tag = (props) => {
+    const classes = createMemo(() => tag({
+        size: props.size,
+        class: props.class,
+    }));
+    return (<div style={{ "background-color": `${props.colorHex}30`, color: `${props.colorHex}` }} class={classes()}>
+      <span>{props.title}</span>
+      <KobalteButton onClick={props.onClick} class="pl-1 flex items-center justify-center">
+        <CloseIcon size={14}/>
+      </KobalteButton>
+    </div>);
+};
+export default Tag;

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

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

package/dist/components/Tag/index.js

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

package/dist/components/TagArea/TagArea.d.ts

@@ -0,0 +1,11 @@
+import { JSX } from "solid-js";
+interface TagAreaProps<T extends TagRecord = TagRecord> {
+    tags: T[];
+    setTags: (tags: T[]) => void;
+    onCreateTag: (name: string) => Promise<T>;
+    onDeleteTag: (tag: T) => Promise<void>;
+    suggestions?: T[];
+    placeholder?: string;
+}
+export declare const TagArea: <T extends TagRecord = TagRecord>(props: TagAreaProps<T>) => JSX.Element;
+export default TagArea;

package/dist/components/TagArea/TagArea.jsx

@@ -0,0 +1,62 @@
+import { createSignal, For, Show, createMemo } from "solid-js";
+import { Input } from "../Input";
+import Tag from "../Tag/Tag";
+export const TagArea = (props) => {
+    const [tagInput, setTagInput] = createSignal("");
+    const [showSuggestions, setShowSuggestions] = createSignal(false);
+    const filteredSuggestions = createMemo(() => (props.suggestions || []).filter((s) => s.name.toLowerCase().includes(tagInput().toLowerCase()) && !props.tags.some((t) => t.id === s.id)));
+    const handleTagInput = async (e) => {
+        if (e.key === "Enter" && tagInput().trim()) {
+            e.preventDefault();
+            const newTagName = tagInput().trim();
+            if (!props.tags.map((t) => t.name).includes(newTagName)) {
+                let newTag = undefined;
+                newTag = await props.onCreateTag(newTagName);
+                if (newTag)
+                    props.setTags([...props.tags, newTag]);
+            }
+            setTagInput("");
+            setShowSuggestions(false);
+        }
+        else {
+            setShowSuggestions(true);
+        }
+    };
+    const handleSuggestionClick = (tag) => {
+        props.setTags([...props.tags, tag]);
+        setTagInput("");
+        setShowSuggestions(false);
+    };
+    const deleteTag = async (t) => {
+        await props.onDeleteTag(t);
+        props.setTags((props.tags || []).filter((tag) => tag.id !== t.id));
+    };
+    return (<div class="rounded-md p-2 flex flex-col bg-[var(--color-light-surface)] dark:bg-[var(--color-dark-surface)]">
+      <div class="flex flex-wrap gap-2">
+        <For each={props.tags || []}>
+          {(t) => (<Tag title={t.name || ""} colorHex={t.colorHex || "#6b7280"} onClick={() => deleteTag(t)}/>)}
+        </For>
+        <div class="relative flex-1 min-w-[120px]">
+          <Input label="" value={tagInput()} onChange={(v) => {
+            setTagInput(v);
+            setShowSuggestions(true);
+        }} inputProps={{
+            onKeyDown: handleTagInput,
+            placeholder: props.placeholder || "Add tags (press Enter)",
+            onFocus: () => setShowSuggestions(true),
+            onBlur: () => setTimeout(() => setShowSuggestions(false), 100),
+        }} class="w-full"/>
+          <Show when={showSuggestions() && filteredSuggestions().length > 0}>
+            <div class="absolute z-10 mt-1 w-full bg-[var(--color-light-surface)] dark:bg-[var(--color-dark-surface)] border border-[var(--color-light-muted)] dark:border-[var(--color-dark-muted)] rounded shadow-lg max-h-40 overflow-auto">
+              <For each={filteredSuggestions()}>
+                {(s) => (<div class="px-3 py-2 cursor-pointer hover:bg-[var(--color-light-muted)] dark:hover:bg-[var(--color-dark-muted)]" onMouseDown={() => handleSuggestionClick(s)}>
+                    {s.name}
+                  </div>)}
+              </For>
+            </div>
+          </Show>
+        </div>
+      </div>
+    </div>);
+};
+export default TagArea;

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

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

package/dist/components/TagArea/index.js

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

package/dist/components/Text/Text.d.ts

@@ -0,0 +1,9 @@
+import { Component, JSX } from "solid-js";
+interface TextProps {
+    children: JSX.Element;
+    size?: "sm" | "md" | "lg";
+    color?: "primary" | "secondary" | "error" | "success" | "warning" | "muted";
+    class?: string;
+}
+export declare const Text: Component<TextProps>;
+export default Text;

package/dist/components/Text/Text.jsx

@@ -0,0 +1,25 @@
+import { tv } from "tailwind-variants";
+const text = tv({
+    base: "font-normal",
+    variants: {
+        size: {
+            sm: "text-sm",
+            md: "text-base",
+            lg: "text-lg",
+        },
+        color: {
+            primary: "text-[var(--color-text-light-primary)] dark:text-[var(--color-text-dark-primary)]",
+            secondary: "text-[var(--color-text-light-secondary)] dark:text-[var(--color-text-dark-secondary)]",
+            error: "text-[var(--color-light-error)] dark:text-[var(--color-dark-error)]",
+            success: "text-[var(--color-light-success)] dark:text-[var(--color-dark-success)]",
+            warning: "text-[var(--color-light-warning)] dark:text-[var(--color-dark-warning)]",
+            muted: "text-[var(--color-light-muted)] dark:text-[var(--color-dark-muted)]",
+        },
+    },
+    defaultVariants: {
+        size: "md",
+        color: "primary",
+    },
+});
+export const Text = (props) => (<span class={text({ size: props.size, color: props.color, class: props.class })}>{props.children}</span>);
+export default Text;

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

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

package/dist/components/Text/index.js

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

package/dist/components/TextArea/TextArea.d.ts

@@ -0,0 +1,14 @@
+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 = "textarea"> = PolymorphicProps<T, TextFieldInputProps<T>>;
+interface ExtraProps {
+    label?: string;
+    saveFunc?: (v: string) => Promise<any>;
+    inputProps?: InputProps;
+    variant?: "bordered" | "none";
+    size?: "sm" | "md";
+}
+type InputRootProps<T extends ValidComponent = "div"> = ExtraProps & PolymorphicProps<T, TextFieldRootProps<T>>;
+export declare const TextArea: Component<InputRootProps>;
+export default TextArea;