@solidpb/ui-kit 0.1.0

package/README.md

@@ -0,0 +1 @@
+## UI components for solidpb

package/dist/components/Button/Button.d.ts

@@ -0,0 +1,12 @@
+import { ParentComponent, ValidComponent } from "solid-js";
+import { ButtonRootProps } from "@kobalte/core/button";
+import { PolymorphicProps } from "@kobalte/core/polymorphic";
+type BaseProps<T extends ValidComponent = "button"> = PolymorphicProps<T, ButtonRootProps<T>>;
+interface Props extends BaseProps {
+    variant?: "text" | "solid";
+    appearance?: "primary" | "success" | "warning" | "neutral" | "error" | "muted";
+    size?: "xs" | "sm" | "md" | "lg";
+    isLoading?: boolean;
+}
+export declare const Button: ParentComponent<Props>;
+export default Button;

package/dist/components/Button/Button.jsx

@@ -0,0 +1,93 @@
+import { createMemo, Show, splitProps } from "solid-js";
+import { Button as KButton } from "@kobalte/core/button";
+import { tv } from "tailwind-variants";
+import Loader from "lucide-solid/icons/loader";
+const button = tv({
+    base: `
+    inline-flex items-center justify-center gap-2 font-medium
+    transition active:opacity-60 hover:opacity-90
+    focus:outline-none focus:ring-1
+    disabled:opacity-50 disabled:cursor-not-allowed
+    rounded-md
+  `,
+    variants: {
+        appearance: {
+            primary: "bg-light-primary dark:bg-dark-primary/20 dark:text-dark-primary",
+            success: "bg-light-success dark:bg-dark-success/20 dark:text-dark-success",
+            warning: "bg-light-warning dark:bg-dark-warning/20 dark:text-dark-warning",
+            neutral: "bg-light-neutral dark:bg-dark-neutral/20 dark:text-dark-neutral",
+            error: "bg-light-error dark:bg-dark-error/20 dark:text-dark-error",
+            muted: "bg-light-muted dark:bg-dark-muted/20 dark:text-dark-muted",
+        },
+        size: {
+            xs: "text-xs px-2 py-1",
+            sm: "text-sm px-3 py-1.5",
+            md: "text-base px-4 py-2",
+            lg: "text-lg px-5 py-3",
+        },
+        variant: {
+            text: "bg-transparent dark:bg-transparent border-none py-0 px-1 hover:underline underline-offset-4",
+            solid: "dark:border-1",
+        },
+    },
+    compoundVariants: [
+        {
+            variant: "text",
+            appearance: "primary",
+            class: "text-light-primary dark:text-dark-primary",
+        },
+        {
+            variant: "text",
+            appearance: "success",
+            class: "text-light-success dark:text-dark-success",
+        },
+        {
+            variant: "text",
+            appearance: "warning",
+            class: "text-light-warning dark:text-dark-warning",
+        },
+        {
+            variant: "text",
+            appearance: "neutral",
+            class: "text-light-neutral dark:text-dark-neutral",
+        },
+        {
+            variant: "text",
+            appearance: "error",
+            class: "text-light-error dark:text-dark-error",
+        },
+        {
+            variant: "text",
+            appearance: "muted",
+            class: "text-light-muted dark:text-dark-muted",
+        },
+    ],
+    defaultVariants: {
+        variant: "solid",
+        appearance: "neutral",
+        size: "md",
+    },
+});
+export const Button = (props) => {
+    const [local, others] = splitProps(props, [
+        "children",
+        "class",
+        "variant",
+        "appearance",
+        "size",
+        "isLoading",
+    ]);
+    const classes = createMemo(() => button({
+        variant: local.variant,
+        appearance: local.appearance,
+        size: local.size,
+        class: local.class,
+    }));
+    return (<KButton class={classes()} disabled={local.isLoading} {...others}>
+      {local.children}
+      <Show when={local.isLoading}>
+        <Loader class="ml-2 animate-spin"/>
+      </Show>
+    </KButton>);
+};
+export default Button;

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

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

package/dist/components/Button/index.js

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

package/dist/components/Card/Card.d.ts

@@ -0,0 +1,6 @@
+import { ParentComponent } from "solid-js";
+interface Props {
+    class?: string;
+}
+export declare const Card: ParentComponent<Props>;
+export default Card;

package/dist/components/Card/Card.jsx

@@ -0,0 +1,6 @@
+export const Card = (props) => {
+    return (<div class={`rounded-xl p-3 bg-[var(--color-light-surface)] dark:bg-[var(--color-dark-surface)] text-[var(--color-text-light-primary)] dark:text-[var(--color-text-dark-primary)] ${props.class ?? ""}`}>
+      {props.children}
+    </div>);
+};
+export default Card;

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

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

package/dist/components/Card/index.js

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

package/dist/components/Checkbox/Checkbox.d.ts

@@ -0,0 +1,10 @@
+import { Component, ValidComponent } from "solid-js";
+import { CheckboxRootProps } from "@kobalte/core/checkbox";
+import { PolymorphicProps } from "@kobalte/core";
+type CheckBoxProps<T extends ValidComponent = "div"> = PolymorphicProps<T, CheckboxRootProps<T>>;
+interface Props extends CheckBoxProps {
+    label?: string;
+    saveFunc?: (v: boolean) => Promise<void>;
+}
+export declare const Checkbox: Component<Props>;
+export default Checkbox;

package/dist/components/Checkbox/Checkbox.jsx

@@ -0,0 +1,25 @@
+import { createMemo, Show } from "solid-js";
+import { Checkbox as KCheckbox } from "@kobalte/core/checkbox";
+import Check from "lucide-solid/icons/check";
+import { debounce } from "../../methods/debounce";
+export const Checkbox = (props) => {
+    const debouncedSave = createMemo(() => (props.saveFunc ? debounce(props.saveFunc) : undefined));
+    const handleChange = (v) => {
+        props.onChange?.(v);
+        debouncedSave()?.(v);
+    };
+    return (<KCheckbox checked={props.checked} onChange={handleChange} class="flex flex-row space-x-2 items-center">
+      <KCheckbox.Input />
+      <KCheckbox.Control class="h-5 w-5 rounded-sm border-2 border-[var(--color-light-muted)] dark:border-[var(--color-dark-muted)] bg-[var(--color-light-surface)] dark:bg-[var(--color-dark-surface)] data-[checked]:bg-[var(--color-light-primary)] dark:data-[checked]:bg-[var(--color-dark-primary)] transition-colors">
+        <KCheckbox.Indicator class="text-[var(--color-light-surface)] dark:text-[var(--color-dark-surface)]">
+          <Check />
+        </KCheckbox.Indicator>
+      </KCheckbox.Control>
+      <Show when={props.label}>
+        <KCheckbox.Label class="text-[var(--color-text-light-primary)] dark:text-[var(--color-text-dark-primary)]">
+          {props.label}
+        </KCheckbox.Label>
+      </Show>
+    </KCheckbox>);
+};
+export default Checkbox;

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

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

package/dist/components/Checkbox/index.js

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

package/dist/components/Container/Container.d.ts

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

@@ -0,0 +1,5 @@
+export const Container = (props) => {
+    const classes = `flex-1 ${props.noPadding ? "" : "py-4 px-[3vw]"} ${props.class ?? ""}`;
+    return <div class={classes}>{props.children}</div>;
+};
+export default Container;

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

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

package/dist/components/Container/index.js

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

package/dist/components/DateInput/DateInput.d.ts

@@ -0,0 +1,9 @@
+import { Component } from "solid-js";
+interface DateInputProps {
+    label?: string;
+    value: Date | null;
+    onChange: (date: Date | null) => void;
+    class?: string;
+}
+export declare const DateInput: Component<DateInputProps>;
+export default DateInput;

package/dist/components/DateInput/DateInput.jsx

@@ -0,0 +1,22 @@
+import { Show } from "solid-js";
+import { tv } from "tailwind-variants";
+const dateInput = tv({
+    base: "rounded border px-2 py-1 bg-[var(--color-light-surface)] dark:bg-[var(--color-dark-surface)] text-[var(--color-text-light-primary)] dark:text-[var(--color-text-dark-primary)] border-[var(--color-light-muted)] dark:border-[var(--color-dark-muted)]",
+});
+export const DateInput = (props) => {
+    // Convert Date to yyyy-mm-dd string for input value
+    const valueStr = () => (props.value ? props.value.toISOString().slice(0, 10) : "");
+    const handleChange = (e) => {
+        const val = e.target.value;
+        props.onChange(val ? new Date(val) : null);
+    };
+    return (<div class={props.class}>
+      <Show when={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>
+      </Show>
+      <input type="date" class={dateInput()} value={valueStr()} onInput={handleChange}/>
+    </div>);
+};
+export default DateInput;

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

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

package/dist/components/DateInput/index.js

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

package/dist/components/DropdownMenu/DropdownMenu.d.ts

@@ -0,0 +1,11 @@
+import { Component } from "solid-js";
+interface DropdownMenuProps {
+    label?: string;
+    items: {
+        label: string;
+        onSelect: () => void;
+    }[];
+    class?: string;
+}
+export declare const DropdownMenu: Component<DropdownMenuProps>;
+export default DropdownMenu;

package/dist/components/DropdownMenu/DropdownMenu.jsx

@@ -0,0 +1,22 @@
+import { DropdownMenu as KDropdownMenu } from "@kobalte/core/dropdown-menu";
+import { For } from "solid-js";
+import { tv } from "tailwind-variants";
+const menu = tv({
+    base: "bg-[var(--color-light-surface)] dark:bg-[var(--color-dark-surface)] rounded shadow-md p-2 min-w-[120px]",
+});
+const item = tv({
+    base: "px-3 py-2 cursor-pointer hover:bg-[var(--color-light-muted)] dark:hover:bg-[var(--color-dark-muted)] rounded",
+});
+export const DropdownMenu = (props) => (<KDropdownMenu>
+    <KDropdownMenu.Trigger class={props.class}>{props.label}</KDropdownMenu.Trigger>
+    <KDropdownMenu.Portal>
+      <KDropdownMenu.Content class={menu()}>
+        <For each={props.items}>
+          {(itemObj) => (<KDropdownMenu.Item class={item()} onSelect={itemObj.onSelect}>
+              {itemObj.label}
+            </KDropdownMenu.Item>)}
+        </For>
+      </KDropdownMenu.Content>
+    </KDropdownMenu.Portal>
+  </KDropdownMenu>);
+export default DropdownMenu;

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

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

package/dist/components/DropdownMenu/index.js

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

package/dist/components/FileInput/FileInput.d.ts

@@ -0,0 +1,10 @@
+import { Component } from "solid-js";
+interface FileInputProps {
+    label?: string;
+    onChange: (files: FileList | null) => void;
+    accept?: string;
+    multiple?: boolean;
+    class?: string;
+}
+export declare const FileInput: Component<FileInputProps>;
+export default FileInput;

package/dist/components/FileInput/FileInput.jsx

@@ -0,0 +1,18 @@
+import { Show, splitProps } from "solid-js";
+import { tv } from "tailwind-variants";
+const root = tv({ base: "flex flex-col gap-1" });
+const input = tv({
+    base: "block w-full text-sm text-[var(--color-text-light-primary)] dark:text-[var(--color-text-dark-primary)] file:mr-4 file:py-2 file:px-4 file:rounded file:border-0 file:text-sm file:font-semibold file:bg-[var(--color-light-muted)] dark:file:bg-[var(--color-dark-muted)] file:text-[var(--color-light-primary)] dark:file:text-[var(--color-dark-primary)] hover:file:bg-[var(--color-light-surface)] dark:hover:file:bg-[var(--color-dark-surface)] transition",
+});
+export const FileInput = (props) => {
+    const [local, others] = splitProps(props, ["label", "class", "onChange"]);
+    return (<div class={root({ class: local.class })}>
+      <Show when={local.label}>
+        <label class="block mb-1 text-xs font-medium text-[var(--color-text-light-secondary)] dark:text-[var(--color-text-dark-secondary)]">
+          {local.label}
+        </label>
+      </Show>
+      <input type="file" class={input()} accept={props.accept} multiple={props.multiple} {...others} onChange={(e) => local.onChange(e.currentTarget.files)}/>
+    </div>);
+};
+export default FileInput;

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

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

package/dist/components/FileInput/index.js

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

package/dist/components/Form/Form.d.ts

@@ -0,0 +1,2 @@
+import { ParentComponent } from "solid-js";
+export declare const Form: ParentComponent;

package/dist/components/Form/Form.jsx

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

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

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

package/dist/components/Form/index.js

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

package/dist/components/Heading/Heading.d.ts

@@ -0,0 +1,7 @@
+import { JSX } from "solid-js";
+interface Props extends JSX.HTMLAttributes<HTMLElement> {
+    as?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p";
+    appearance?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p";
+}
+export declare const Heading: (props: Props) => JSX.Element;
+export default Heading;

package/dist/components/Heading/Heading.jsx

@@ -0,0 +1,29 @@
+import { splitProps, createMemo } from "solid-js";
+import { Dynamic } from "solid-js/web";
+import { tv } from "tailwind-variants";
+const heading = tv({
+    base: "font-sans text-balance tracking-tight",
+    variants: {
+        appearance: {
+            h1: "text-4xl font-bold",
+            h2: "text-3xl font-semibold",
+            h3: "text-2xl font-semibold",
+            h4: "text-xl font-medium",
+            h5: "text-lg font-medium",
+            h6: "text-base font-medium",
+            p: "text-base font-normal",
+        },
+    },
+    defaultVariants: {
+        appearance: "p",
+    },
+});
+export const Heading = (props) => {
+    const [local, others] = splitProps(props, ["as", "appearance", "class", "children"]);
+    const Tag = (local.as ?? "p");
+    const classes = createMemo(() => heading({ appearance: local.appearance ?? local.as ?? "p", class: local.class }));
+    return (<Dynamic component={Tag} class={classes()} {...others}>
+      {local.children}
+    </Dynamic>);
+};
+export default Heading;

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

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

package/dist/components/Heading/index.js

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

package/dist/components/Image/Image.d.ts

@@ -0,0 +1,9 @@
+import { Component } from "solid-js";
+interface ImageProps {
+    src: string;
+    alt?: string;
+    class?: string;
+    rounded?: boolean;
+}
+export declare const Image: Component<ImageProps>;
+export default Image;

package/dist/components/Image/Image.jsx

@@ -0,0 +1,15 @@
+import { tv } from "tailwind-variants";
+const image = tv({
+    base: "object-cover",
+    variants: {
+        rounded: {
+            true: "rounded-full",
+            false: "rounded-none",
+        },
+    },
+    defaultVariants: {
+        rounded: false,
+    },
+});
+export const Image = (props) => (<img src={props.src} alt={props.alt} class={image({ rounded: props.rounded, class: props.class })}/>);
+export default Image;

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

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

package/dist/components/Image/index.js

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

package/dist/components/Input/Input.d.ts

@@ -0,0 +1,15 @@
+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 = "input"> = PolymorphicProps<T, TextFieldInputProps<T>>;
+interface ExtraProps {
+    label?: string;
+    variant?: "ghost" | "none";
+    appearance?: "neutral" | "primary" | "secondary" | "accent" | "info" | "success" | "warning" | "error";
+    size?: "xs" | "sm" | "md" | "lg" | "xl";
+    inputProps?: InputProps;
+    saveFunc?: (v: string) => Promise<any>;
+}
+type InputRootProps<T extends ValidComponent = "div"> = ExtraProps & PolymorphicProps<T, TextFieldRootProps<T>>;
+export declare const Input: Component<InputRootProps>;
+export default Input;

package/dist/components/Input/Input.jsx

@@ -0,0 +1,86 @@
+import { createMemo, Show, splitProps } from "solid-js";
+import { TextField } from "@kobalte/core/text-field";
+import { tv } from "tailwind-variants";
+import { debounce } from "../../methods/debounce";
+const inputRoot = tv({
+    base: "relative flex flex-col gap-1 mt-3",
+});
+const inputLabel = tv({
+    base: "absolute left-3 px-1 font-medium pointer-events-none z-10 bg-base-100",
+    variants: {
+        size: {
+            xs: "text-xs",
+            sm: "text-xs",
+            md: "text-sm",
+            lg: "text-sm",
+            xl: "text-md",
+        },
+    },
+    defaultVariants: {
+        size: "md",
+    },
+});
+const inputField = tv({
+    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: {
+        variant: "none",
+        size: "md",
+        appearance: "neutral",
+    },
+});
+export const Input = (props) => {
+    const [local, others] = splitProps(props, [
+        "label",
+        "class",
+        "variant",
+        "appearance",
+        "size",
+        "inputProps",
+        "saveFunc",
+        "onChange",
+    ]);
+    const debouncedSave = createMemo(() => (local.saveFunc ? debounce(local.saveFunc) : undefined));
+    const handleChange = (v) => {
+        local.onChange?.(v);
+        debouncedSave()?.(v);
+    };
+    return (<TextField class={inputRoot({ class: local.class })} {...others} onChange={handleChange}>
+      <div class="relative w-full">
+        <Show when={local.label}>
+          <TextField.Label class={inputLabel({ size: local.size })} style="transform: translateY(-50%);">
+            {local.label}
+          </TextField.Label>
+        </Show>
+        <TextField.Input class={inputField({
+            appearance: local.appearance,
+            variant: local.variant,
+            size: local.size,
+            class: local.inputProps?.class,
+        })} {...local.inputProps}/>
+      </div>
+    </TextField>);
+};
+export default Input;

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

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

package/dist/components/Input/index.js

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

package/dist/components/Link/Link.d.ts

@@ -0,0 +1,9 @@
+import { JSX, ValidComponent, ParentComponent } from "solid-js";
+interface LinkProps {
+    as?: ValidComponent;
+    href?: string;
+    children: JSX.Element;
+    class?: string;
+}
+export declare const Link: ParentComponent<LinkProps>;
+export default Link;

package/dist/components/Link/Link.jsx

@@ -0,0 +1,13 @@
+import { splitProps } from "solid-js";
+import { Dynamic } from "solid-js/web";
+import { tv } from "tailwind-variants";
+const link = tv({
+    base: "text-[var(--color-light-primary)] dark:text-[var(--color-dark-primary)] hover:underline underline-offset-4 transition",
+});
+export const Link = (props) => {
+    const [local, others] = splitProps(props, ["as", "children", "class"]);
+    return (<Dynamic component={local.as ?? "a"} {...others} class={link({ class: local.class })}>
+      {local.children}
+    </Dynamic>);
+};
+export default Link;

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

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

package/dist/components/Link/index.js

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

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

@@ -0,0 +1,26 @@
+import { ColumnDef, ColumnFiltersState, Row } from "@tanstack/solid-table";
+import { Accessor, JSXElement } from "solid-js";
+interface ListProps<T> {
+    data?: Accessor<T[]>;
+    filters?: Accessor<ColumnFiltersState>;
+    createFunc?: () => Promise<void>;
+    headerActions?: JSXElement;
+    columns: Accessor<ColumnDef<T>[]>;
+    onRowClick: (item: T) => void;
+    loading?: boolean;
+    emptyState?: JSXElement;
+    loadingFallback?: JSXElement;
+    searchPlaceholder?: string;
+    renderRow?: (row: Row<T>, onRowClick: (item: T) => void) => JSXElement;
+    showItemCount?: boolean;
+    containerClass?: string;
+    search?: boolean;
+    headers?: boolean;
+}
+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;