@solidpb/ui-kit 0.1.1 → 0.2.0

package/dist/components/TextArea/TextArea.jsx

@@ -1,40 +1,76 @@
-import { createEffect, on, Show, splitProps, createMemo } from "solid-js";
+import { Show, splitProps, createMemo } from "solid-js";
 import { TextField } from "@kobalte/core/text-field";
 import { tv } from "tailwind-variants";
 import { debounce } from "../../methods/debounce";
-const root = tv({ base: "flex flex-col gap-1" });
+const root = tv({
+    base: "flex flex-col gap-1",
+    variants: {
+        marginTop: {
+            yes: "mt-3",
+            no: "",
+        },
+    },
+});
 const textarea = tv({
-    base: "w-full resize-none rounded-sm outline-none px-2 py-1 min-h-[80px]",
+    base: "textarea outline-offset-0 resize-none",
     variants: {
         variant: {
-            bordered: "border-2 border-[var(--color-light-muted)] dark:border-[var(--color-dark-muted)]",
             none: "",
+            ghost: "textarea-ghost",
+        },
+        size: {
+            xs: "textarea-xs",
+            sm: "textarea-sm",
+            md: "textarea-md",
+            lg: "textarea-lg",
+            xl: "textarea-xl",
+        },
+        appearance: {
+            primary: "textarea-primary",
+            secondary: "textarea-secondary",
+            success: "textarea-success",
+            warning: "textarea-warning",
+            neutral: "textarea-neutral",
+            error: "textarea-error",
+            accent: "textarea-accent",
+            info: "textarea-info",
         },
     },
     defaultVariants: {
-        variant: "none",
+        size: "sm",
     },
 });
 export const TextArea = (props) => {
-    const [local, others] = splitProps(props, ["label", "class", "inputProps", "saveFunc", "variant"]);
+    const [local, others] = splitProps(props, [
+        "label",
+        "class",
+        "textareaProps",
+        "saveFunc",
+        "variant",
+        "size",
+        "appearance",
+    ]);
     let textareaRef;
     const debouncedSave = createMemo(() => (local.saveFunc ? debounce(local.saveFunc) : undefined));
     const handleChange = (v) => {
         props.onChange?.(v);
         debouncedSave()?.(v);
     };
-    const autoResize = () => {
-        if (!textareaRef)
-            return;
-        textareaRef.style.height = "auto";
-        textareaRef.style.height = `${textareaRef.scrollHeight}px`;
-    };
-    createEffect(on(() => others.value, () => autoResize()));
-    return (<TextField class={root({ class: local.class })} {...others} onChange={handleChange}>
-      <Show when={local.label}>
-        <TextField.Label>{local.label}</TextField.Label>
-      </Show>
-      <TextField.TextArea ref={textareaRef} class={textarea({ variant: local.variant, class: local.inputProps?.class })} {...local.inputProps}/>
+    return (<TextField {...others} class={root({
+            marginTop: local.label ? "yes" : "no",
+            class: local.class,
+        })} onChange={handleChange}>
+      <TextField.Label class="floating-label">
+        <Show when={local.label}>
+          <span>{local.label}</span>
+        </Show>
+        <TextField.TextArea {...local.textareaProps} ref={textareaRef} class={textarea({
+            variant: local.variant,
+            appearance: local.appearance,
+            size: local.size,
+            class: local.textareaProps?.class,
+        })}/>
+      </TextField.Label>
     </TextField>);
 };
 export default TextArea;

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

@@ -0,0 +1,2 @@
+export declare function ThemeSwitch(): import("solid-js").JSX.Element;
+export default ThemeSwitch;

package/dist/components/ThemeSwitch/ThemeSwitch.jsx

@@ -0,0 +1,72 @@
+import { createSignal, onMount } from "solid-js";
+import Sun from "lucide-solid/icons/sun";
+import Moon from "lucide-solid/icons/moon";
+import Monitor from "lucide-solid/icons/monitor";
+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");
+        }
+    });
+    const handleChange = (val) => {
+        setTheme(val);
+        localStorage.setItem(THEME_KEY, val);
+        applyTheme(val);
+    };
+    return (<DropdownMenu>
+      <DropdownMenu.Trigger>
+        <Button>{getThemeValue(theme())}</Button>
+      </DropdownMenu.Trigger>
+      <DropdownMenu.Content>
+        <DropdownMenu.MenuItem onSelect={() => handleChange("light")}>
+          {getThemeValue("light")}
+        </DropdownMenu.MenuItem>
+        <DropdownMenu.MenuItem onSelect={() => handleChange("dark")}>
+          {getThemeValue("dark")}
+        </DropdownMenu.MenuItem>
+        <DropdownMenu.MenuItem onSelect={() => handleChange("system")}>
+          {getThemeValue("system")}
+        </DropdownMenu.MenuItem>
+      </DropdownMenu.Content>
+    </DropdownMenu>);
+}
+export default ThemeSwitch;

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

@@ -0,0 +1 @@
+export { ThemeSwitch } from "./ThemeSwitch";

package/dist/components/ThemeSwitch/index.js

@@ -0,0 +1 @@
+export { ThemeSwitch } from "./ThemeSwitch";

package/dist/components/Toast/Toast.d.ts

@@ -3,7 +3,7 @@ import { ToastRootProps } from "@kobalte/core/toast";
 interface Props extends ToastRootProps {
     title: string;
     msg: string;
-    variant?: "error" | "neutral";
+    appearance?: "primary" | "secondary" | "success" | "warning" | "error" | "neutral" | "info" | "accent";
 }
 export declare const Toast: Component<Props>;
 export default Toast;

package/dist/components/Toast/Toast.jsx

@@ -3,31 +3,34 @@ import { Toast as KToast } from "@kobalte/core/toast";
 import X from "lucide-solid/icons/x";
 import { tv } from "tailwind-variants";
 const toast = tv({
-    base: `flex flex-col items-center justify-between gap-1 border-1
+    base: `alert flex flex-col items-center justify-between gap-1 border-1
         rounded-md px-2 py-1 data-[opened]:animate-slideIn data-[closed]:animate-hide
         data-[swipe=move]:translate-x-[var(--kb-toast-swipe-move-x)] data-[swipe=cancel]:translate-x-0
         data-[swipe=cancel]:transition-transform data-[swipe=cancel]:duration-200 data-[swipe=cancel]:ease-out
         data-[swipe=end]:animate-swipeOut shadow-md`,
     variants: {
-        variant: {
-            error: "border-red-500",
-            neutral: "border-gray-500",
+        appearance: {
+            primary: "alert-primary",
+            secondary: "alert-secondary",
+            success: "alert-success",
+            warning: "alert-warning",
+            error: "alert-error",
+            neutral: "alert-neutral",
+            info: "alert-info",
+            accent: "alert-accent",
         },
     },
-    defaultVariants: {
-        variant: "neutral",
-    },
 });
 export const Toast = (props) => {
-    const [local, rootProps] = splitProps(props, ["msg", "title", "variant"]);
-    const classes = createMemo(() => toast({ variant: local.variant }));
+    const [local, rootProps] = splitProps(props, ["msg", "title", "appearance"]);
+    const classes = createMemo(() => toast({ appearance: local.appearance }));
     return (<KToast {...rootProps} class={classes()}>
       <div class={`flex items-start w-full`}>
         <div>
           <KToast.Title class="text-md truncate">{local.title}</KToast.Title>
           <KToast.Description class="text-xs line-clamp-4">{local.msg}</KToast.Description>
         </div>
-        <KToast.CloseButton class={`shrink-0 ml-auto`}>
+        <KToast.CloseButton class="shrink-0 ml-auto btn btn-ghost btn-xs btn-square">
           <X size={16}/>
         </KToast.CloseButton>
       </div>

package/dist/components/Toast/Toaster.jsx

@@ -3,8 +3,7 @@ import { Toast } from "@kobalte/core/toast";
 export const Toaster = () => {
     return (<Portal>
       <Toast.Region>
-        <Toast.List class={`z-99999 top-0 right-0 flex flex-col p-(--viewport-padding) fixed gap-2 w-100
-            max-w-[100vw] m-0 outline-none list-none`}/>
+        <Toast.List class="z-1000000 toast toast-top w-80 max-w-[100vw] m-0"/>
       </Toast.Region>
     </Portal>);
 };

package/dist/components/Tooltip/Tooltip.d.ts

@@ -1,8 +1,9 @@
-import { Component, JSX } from "solid-js";
+import { Component, JSXElement } from "solid-js";
 interface TooltipProps {
-    content: JSX.Element;
-    children: JSX.Element;
+    content: JSXElement;
+    children: JSXElement;
     class?: string;
+    appearance?: "neutral" | "primary" | "secondary" | "accent" | "info" | "success" | "warning" | "error";
 }
 export declare const Tooltip: Component<TooltipProps>;
 export default Tooltip;

package/dist/components/Tooltip/Tooltip.jsx

@@ -1,12 +1,23 @@
-import { Tooltip as KTooltip } from "@kobalte/core/tooltip";
 import { tv } from "tailwind-variants";
 const tooltip = tv({
-    base: "bg-[var(--color-light-surface)] dark:bg-[var(--color-dark-surface)] text-[var(--color-text-light-primary)] dark:text-[var(--color-text-dark-primary)] px-2 py-1 rounded shadow",
+    base: "tooltip tooltip-bottom",
+    variants: {
+        appearance: {
+            neutral: "tooltip-neutral",
+            primary: "tooltip-primary",
+            secondary: "tooltip-secondary",
+            accent: "tooltip-accent",
+            info: "tooltip-info",
+            success: "tooltip-success",
+            warning: "tooltip-warning",
+            error: "tooltip-error",
+        },
+    },
 });
-export const Tooltip = (props) => (<KTooltip>
-    <KTooltip.Trigger>{props.children}</KTooltip.Trigger>
-    <KTooltip.Portal>
-      <KTooltip.Content class={tooltip()}>{props.content}</KTooltip.Content>
-    </KTooltip.Portal>
-  </KTooltip>);
+export const Tooltip = (props) => {
+    return (<div class={tooltip({ class: props.class, appearance: props.appearance })}>
+      {props.children}
+      <div class="tooltip-content">{props.content}</div>
+    </div>);
+};
 export default Tooltip;

package/dist/constants.d.ts

@@ -0,0 +1,7 @@
+export declare const iconSize: {
+    xs: number;
+    sm: number;
+    md: number;
+    lg: number;
+    xl: number;
+};

package/dist/constants.js

@@ -0,0 +1,7 @@
+export const iconSize = {
+    xs: 14,
+    sm: 16,
+    md: 18,
+    lg: 20,
+    xl: 22,
+};

package/dist/index.d.ts

@@ -1,24 +1,36 @@
+export * from "./components/ActivityFeed";
+export * from "./components/AlertDialog";
+export * from "./components/Avatar";
+export * from "./components/BreadCrumbs";
 export * from "./components/Button";
 export * from "./components/Card";
 export * from "./components/Checkbox";
+export * from "./components/ColorPicker";
 export * from "./components/Container";
 export * from "./components/DateInput";
+export * from "./components/Drawer";
 export * from "./components/DropdownMenu";
 export * from "./components/FileInput";
+export * from "./components/FilterBar";
 export * from "./components/Form";
 export * from "./components/Image";
 export * from "./components/Input";
+export * from "./components/Kanban";
 export * from "./components/Link";
-export * from "./components/List";
 export * from "./components/Modal";
+export * from "./components/Navbar";
 export * from "./components/NumberInput";
-export * from "./components/RelationPicker";
+export * from "./components/Pagination";
 export * from "./components/SearchInput";
 export * from "./components/Select";
+export * from "./components/Slider";
 export * from "./components/Switch";
+export * from "./components/Table";
 export * from "./components/Tabs";
 export * from "./components/Tag";
 export * from "./components/TagArea";
 export * from "./components/TextArea";
+export * from "./components/ThemeSwitch";
+export * from "./components/Toast";
 export * from "./components/Tooltip";
 export * from "./methods/debounce";

package/dist/index.js

@@ -1,24 +1,36 @@
+export * from "./components/ActivityFeed";
+export * from "./components/AlertDialog";
+export * from "./components/Avatar";
+export * from "./components/BreadCrumbs";
 export * from "./components/Button";
 export * from "./components/Card";
 export * from "./components/Checkbox";
+export * from "./components/ColorPicker";
 export * from "./components/Container";
 export * from "./components/DateInput";
+export * from "./components/Drawer";
 export * from "./components/DropdownMenu";
 export * from "./components/FileInput";
+export * from "./components/FilterBar";
 export * from "./components/Form";
 export * from "./components/Image";
 export * from "./components/Input";
+export * from "./components/Kanban";
 export * from "./components/Link";
-export * from "./components/List";
 export * from "./components/Modal";
+export * from "./components/Navbar";
 export * from "./components/NumberInput";
-export * from "./components/RelationPicker";
+export * from "./components/Pagination";
 export * from "./components/SearchInput";
 export * from "./components/Select";
+export * from "./components/Slider";
 export * from "./components/Switch";
+export * from "./components/Table";
 export * from "./components/Tabs";
 export * from "./components/Tag";
 export * from "./components/TagArea";
 export * from "./components/TextArea";
+export * from "./components/ThemeSwitch";
+export * from "./components/Toast";
 export * from "./components/Tooltip";
 export * from "./methods/debounce";

package/dist/methods/triggerFlash.d.ts

@@ -0,0 +1 @@
+export declare const triggerFlash: (ref: HTMLElement) => void;

package/dist/methods/triggerFlash.js

@@ -0,0 +1,7 @@
+export const triggerFlash = (ref) => {
+    ref.animate([{ backgroundColor: "color-mix(in srgb, var(--color-primary) 10%, transparent)" }, {}], {
+        duration: 700,
+        easing: "cubic-bezier(0.25, 0.1, 0.25, 1.0)",
+        iterations: 1,
+    });
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@solidpb/ui-kit",
-  "version": "0.1.1",
+  "version": "0.2.0",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -20,10 +20,11 @@
     "vite-plugin-solid": "^2.11.10"
   },
   "dependencies": {
+    "@atlaskit/pragmatic-drag-and-drop": "^1.7.7",
+    "@atlaskit/pragmatic-drag-and-drop-hitbox": "^1.1.0",
     "@kobalte/core": "^0.13.11",
     "@tailwindcss/vite": "^4.1.18",
     "@tanstack/solid-table": "^8.21.3",
-    "@tanstack/solid-virtual": "^3.13.13",
     "lucide-solid": "^0.562.0",
     "solid-js": "^1.9.10",
     "tailwind-merge": "^3.3.1",

package/dist/components/List/List.jsx

@@ -1,120 +0,0 @@
-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" 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

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

package/dist/components/List/index.js

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

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

@@ -1,11 +0,0 @@
-interface RelationPickerProps<T extends Tag = Tag> {
-    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 Tag = Tag>(props: RelationPickerProps<T>) => import("solid-js").JSX.Element;
-export default RelationPicker;

package/dist/components/RelationPicker/RelationPicker.jsx

@@ -1,13 +0,0 @@
-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

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

package/dist/components/RelationPicker/index.js

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