@solidpb/ui-kit 0.1.0 → 0.2.0

package/dist/components/Pagination/Pagination.jsx

@@ -0,0 +1,67 @@
+import { For, Show } from "solid-js";
+import { Button } from "../Button";
+import ChevronLeft from "lucide-solid/icons/chevron-left";
+import ChevronRight from "lucide-solid/icons/chevron-right";
+import ChevronDown from "lucide-solid/icons/chevron-down";
+import { tv } from "tailwind-variants";
+import { iconSize } from "../../constants";
+import { DropdownMenu } from "../DropdownMenu";
+import { NumberInput } from "../NumberInput";
+const base = tv({
+    base: "flex items-center gap-2",
+});
+const labelClass = tv({
+    base: "min-w-30 text-end",
+    variants: {
+        size: {
+            xs: "text-xs",
+            sm: "text-xs",
+            md: "text-sm",
+            lg: "text-sm",
+            xl: "text-md",
+        },
+    },
+    defaultVariants: {
+        size: "sm",
+    },
+});
+export const Pagination = (props) => {
+    const from = () => Math.max(0, props.page() * props.perPage()) + 1;
+    const to = () => Math.min(props.totalItems, (props.page() + 1) * props.perPage());
+    const totalPages = () => Math.ceil(props.totalItems / props.perPage());
+    const isFirstPage = () => props.page() === 0;
+    const isLastPage = () => props.page() >= totalPages() - 1;
+    return (<div class={base({ class: props.class })}>
+      <Show when={props.totalItems > 0}>
+        <p class={labelClass({ size: props.size })}>
+          Results: {from()}-{to()} of {props.totalItems}
+        </p>
+      </Show>
+      <DropdownMenu>
+        <DropdownMenu.Trigger>
+          <Button size={props.size} class="min-w-25">
+            <div class="flex items-center gap-1">
+              <span>{props.perPage()} / page </span>
+              <ChevronDown size={iconSize[props.size ?? "md"]}/>
+            </div>
+          </Button>
+        </DropdownMenu.Trigger>
+        <DropdownMenu.Content size={props.size}>
+          <For each={props.perPageOptions}>
+            {(opt) => (<DropdownMenu.MenuItem onSelect={() => props.onPerPageChange(opt)}>
+                <a>{opt}</a>
+              </DropdownMenu.MenuItem>)}
+          </For>
+        </DropdownMenu.Content>
+      </DropdownMenu>
+      <div class="join">
+        <Button class="join-item" size={props.size} modifier="square" disabled={isFirstPage()} onClick={props.onPrevPage}>
+          <ChevronLeft size={iconSize[props.size ?? "md"]}/>
+        </Button>
+        <NumberInput class="join-item" inputProps={{ class: "rounded-none w-15 text-center" }} size={props.size} minValue={1} maxValue={totalPages()} rawValue={props.page() + 1} onRawValueChange={(val) => props.onPageChange(val - 1)}/>
+        <Button class="join-item" size={props.size} modifier="square" disabled={isLastPage()} onClick={props.onNextPage}>
+          <ChevronRight size={iconSize[props.size ?? "md"]}/>
+        </Button>
+      </div>
+    </div>);
+};

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

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

package/dist/components/Pagination/index.js

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

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

@@ -4,6 +4,9 @@ interface SearchInputProps {
     onChange: (v: string) => void;
     placeholder?: string;
     class?: string;
+    variant?: "ghost";
+    appearance?: "neutral" | "primary" | "secondary" | "accent" | "info" | "success" | "warning" | "error";
+    size?: "xs" | "sm" | "md" | "lg" | "xl";
 }
 export declare const SearchInput: Component<SearchInputProps>;
 export default SearchInput;

package/dist/components/SearchInput/SearchInput.jsx

@@ -1,9 +1,44 @@
 import { TextField } from "@kobalte/core/text-field";
 import { tv } from "tailwind-variants";
+import Search from "lucide-solid/icons/search";
 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)]",
+    base: "input outline-offset-0",
+    variants: {
+        variant: {
+            ghost: "input-ghost",
+            none: "",
+        },
+        size: {
+            xs: "input-xs",
+            sm: "input-sm",
+            md: "input-md",
+            lg: "input-lg",
+            xl: "input-xl",
+        },
+        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",
+        },
+    },
+    defaultVariants: {
+        size: "sm",
+    },
 });
-export const SearchInput = (props) => (<TextField class={search({ class: props.class })} value={props.value} onChange={props.onChange}>
-    <TextField.Input placeholder={props.placeholder || "Search..."}/>
+export const SearchInput = (props) => (<TextField value={props.value} onChange={props.onChange}>
+    <TextField.Label class={search({
+        class: props.class,
+        variant: props.variant,
+        size: props.size,
+        appearance: props.appearance,
+    })}>
+      <Search class="w-[1em] h-[1em] shrink-0 opacity-70"/>
+      <TextField.Input placeholder={props.placeholder || "Search"} class="grow"/>
+    </TextField.Label>
   </TextField>);
 export default SearchInput;

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

@@ -1,15 +1,17 @@
-import { Component } from "solid-js";
-interface Option {
-    label: string;
-    value: string;
-}
-interface SelectProps {
+export interface SelectProps<T> {
+    options: T[];
+    value: T | null;
+    onChange: (val: T | null) => void;
+    labelKey?: keyof T;
+    valueKey?: keyof T;
+    disabledKey?: keyof T;
     label?: string;
-    options: Option[];
-    value: string;
-    onChange: (value: string | null) => void;
-    placeholder?: string;
+    variant?: "ghost";
+    appearance?: "neutral" | "primary" | "secondary" | "accent" | "info" | "success" | "warning" | "error";
+    size?: "xs" | "sm" | "md" | "lg" | "xl";
     class?: string;
+    placeholder?: string;
+    disabled?: boolean;
 }
-export declare const Select: Component<SelectProps>;
+export declare const Select: <T>(props: SelectProps<T>) => import("solid-js").JSX.Element;
 export default Select;

package/dist/components/Select/Select.jsx

@@ -1,37 +1,83 @@
-import { Select as KobalteSelect } from "@kobalte/core/select";
+import { Select as KSelect } from "@kobalte/core/select";
 import Check from "lucide-solid/icons/check";
-import UpDown from "lucide-solid/icons/chevrons-up-down";
+import Down from "lucide-solid/icons/chevron-down";
+import { tv } from "tailwind-variants";
+const trigger = tv({
+    base: "input outline-offset-0 flex justify-between items-center",
+    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",
+        },
+    },
+    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 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>);
+    return (<label class="floating-label">
+      {props.label && <span>{props.label}</span>}
+      <KSelect disabled={props.disabled} multiple={false} value={props.value} onChange={props.onChange} options={props.options} optionValue={props.valueKey} optionTextValue={props.labelKey} optionDisabled={props.disabledKey} placeholder={props.placeholder} itemComponent={(itemProps) => {
+            return (<KSelect.Item item={itemProps.item} class="outline-none focus:bg-base-300 rounded-sm">
+              <KSelect.ItemLabel class="flex flex-row justify-between items-center">
+                {props.labelKey ? String(itemProps.item.rawValue[props.labelKey]) : itemProps.item.textValue}
+                <KSelect.ItemIndicator>
+                  <Check size={16}/>
+                </KSelect.ItemIndicator>
+              </KSelect.ItemLabel>
+            </KSelect.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>);
+        <KSelect.Trigger 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.Icon>
+        </KSelect.Trigger>
+        <KSelect.Portal>
+          <KSelect.Content class="rounded-box bg-base-100 shadow-md border border-base-200 z-20">
+            <KSelect.Listbox class={menu({ size: props.size })}/>
+          </KSelect.Content>
+        </KSelect.Portal>
+      </KSelect>
+    </label>);
 };
 export default Select;

package/dist/components/Slider/Slider.d.ts

@@ -0,0 +1,16 @@
+import { Component } from "solid-js";
+export interface SliderProps {
+    value?: number;
+    min: number;
+    max: number;
+    step?: number;
+    onChange?: (v: number) => void;
+    saveFunc?: (v: number) => Promise<any>;
+    appearance?: "neutral" | "primary" | "secondary" | "accent" | "info" | "success" | "warning" | "error";
+    size?: "xs" | "sm" | "md" | "lg" | "xl";
+    class?: string;
+    labelClass?: string;
+    label?: string;
+}
+export declare const Slider: Component<SliderProps>;
+export default Slider;

package/dist/components/Slider/Slider.jsx

@@ -0,0 +1,60 @@
+import { createMemo, Show } from "solid-js";
+import { debounce } from "../../methods/debounce";
+import { tv } from "tailwind-variants";
+const slider = tv({
+    base: "range",
+    variants: {
+        appearance: {
+            neutral: "range-neutral",
+            primary: "range-primary",
+            secondary: "range-secondary",
+            accent: "range-accent",
+            info: "range-info",
+            success: "range-success",
+            warning: "range-warning",
+            error: "range-error",
+        },
+        size: {
+            xs: "range-xs",
+            sm: "range-sm",
+            md: "range-md",
+            lg: "range-lg",
+            xl: "range-xl",
+        },
+    },
+    defaultVariants: {
+        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 Slider = (props) => {
+    const debouncedSave = createMemo(() => (props.saveFunc ? debounce(props.saveFunc) : undefined));
+    const handleChange = (val) => {
+        const v = val[0];
+        props.onChange?.(v);
+        debouncedSave()?.(v);
+    };
+    return (<label class="flex flex-col gap-1 w-fit">
+      <Show when={props.label}>
+        <span class={label({ size: props.size, class: props.labelClass })}>{props.label}</span>
+      </Show>
+      <input class={slider({ appearance: props.appearance, size: props.size, class: props.class })} type="range" min={props.min} max={props.max} value={props.value} step={props.step} onInput={(e) => {
+            handleChange([e.currentTarget.valueAsNumber]);
+        }}/>
+    </label>);
+};
+export default Slider;

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

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

package/dist/components/Slider/index.js

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

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

@@ -1,11 +1,9 @@
-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 {
+import { Component, JSX } from "solid-js";
+export interface SwitchProps extends Omit<JSX.InputHTMLAttributes<HTMLInputElement>, "type" | "onChange"> {
     label?: string;
-    size?: "sm" | "md";
-    saveFunc?: (v: boolean) => Promise<any>;
+    size?: "xs" | "sm" | "md" | "lg" | "xl";
+    appearance?: "primary" | "secondary" | "success" | "warning" | "error" | "info" | "accent" | "neutral";
+    onChange?: (checked: boolean) => void;
 }
-export declare const Switch: Component<Props>;
+export declare const Switch: Component<SwitchProps>;
 export default Switch;

package/dist/components/Switch/Switch.jsx

@@ -1,22 +1,41 @@
-import { Switch as KSwitch } from "@kobalte/core/switch";
-import { createMemo, Show } from "solid-js";
-import { debounce } from "../../methods/debounce";
+import { splitProps } from "solid-js";
+import { tv } from "tailwind-variants";
+const toggle = tv({
+    base: "toggle",
+    variants: {
+        size: {
+            xs: "toggle-xs",
+            sm: "toggle-sm",
+            md: "toggle-md",
+            lg: "toggle-lg",
+            xl: "toggle-xl",
+        },
+        appearance: {
+            primary: "toggle-primary",
+            secondary: "toggle-secondary",
+            success: "toggle-success",
+            warning: "toggle-warning",
+            error: "toggle-error",
+            info: "toggle-info",
+            accent: "toggle-accent",
+            neutral: "toggle-neutral",
+        },
+    },
+    defaultVariants: {
+        size: "sm",
+    },
+});
 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>);
+    const [local, inputProps] = splitProps(props, ["label", "size", "appearance", "class", "onChange"]);
+    return (<label class="flex items-center gap-3 w-fit">
+      <input {...inputProps} type="checkbox" class={toggle({
+            size: local.size,
+            appearance: local.appearance,
+            class: local.class,
+        })} onChange={(e) => {
+            local.onChange?.(Boolean(e.currentTarget.value));
+        }}/>
+      {local.label && <span class="select-none">{local.label}</span>}
+    </label>);
 };
 export default Switch;

package/dist/components/{List/List.d.ts → Table/Table.d.ts}

@@ -1,8 +1,12 @@
-import { ColumnDef, ColumnFiltersState, Row } from "@tanstack/solid-table";
 import { Accessor, JSXElement } from "solid-js";
-interface ListProps<T> {
-    data?: Accessor<T[]>;
-    filters?: Accessor<ColumnFiltersState>;
+import { ColumnDef, Row } from "@tanstack/solid-table";
+interface TableItem {
+    id: string;
+    collectionId: string;
+    tablePosition?: number;
+}
+interface TableProps<T extends TableItem> {
+    data: T[];
     createFunc?: () => Promise<void>;
     headerActions?: JSXElement;
     columns: Accessor<ColumnDef<T>[]>;
@@ -13,14 +17,11 @@ interface ListProps<T> {
     searchPlaceholder?: string;
     renderRow?: (row: Row<T>, onRowClick: (item: T) => void) => JSXElement;
     showItemCount?: boolean;
-    containerClass?: string;
+    class?: string;
     search?: boolean;
     headers?: boolean;
+    size?: "xs" | "sm" | "md" | "lg" | "xl";
+    onReorderRow?: (item: T, oldInd: number, newInd: number) => void;
 }
-export declare const DefaultRowRenderer: <T>(props: {
-    row: Row<T>;
-    columns: Accessor<ColumnDef<T>[]>;
-    onClick: (item: T) => void;
-}) => JSXElement;
-export declare const List: <T>(props: ListProps<T>) => JSXElement;
-export default List;
+export declare const Table: <T extends TableItem>(props: TableProps<T>) => JSXElement;
+export default Table;