@solidpb/ui-kit 0.1.1 → 0.3.0

package/README.md

@@ -1 +1,18 @@
 ## UI components for solidpb
+
+Need to add below to vite.config.ts:
+
+```
+optimizeDeps: {
+  exclude: ["@solidpb/ui-kit"],
+},
+```
+
+Also to index.css (refer daisyui docs):
+
+```
+@plugin "daisyui" {
+  themes: {choose theme} --default, {choose theme} --prefersdark;
+}
+@source "../node_modules/@solidpb/ui-kit";
+```

package/dist/components/ActivityFeed/ActivityFeed.d.ts

@@ -0,0 +1,16 @@
+import { Component } from "solid-js";
+export interface FeedItem {
+    username: string;
+    profileUrl: string;
+    message: string;
+    timeStamp: string;
+}
+export interface ActivityFeedProps {
+    feed: FeedItem[];
+    class?: string;
+    profileUrl: string;
+    username: string;
+    onMessageCreate?: (msg: string) => void;
+}
+export declare const ActivityFeed: Component<ActivityFeedProps>;
+export default ActivityFeed;

package/dist/components/ActivityFeed/ActivityFeed.jsx

@@ -0,0 +1,54 @@
+import { createSignal, For } from "solid-js";
+import { tv } from "tailwind-variants";
+import { Avatar } from "../Avatar";
+import { TextArea } from "../TextArea";
+import { Button } from "../Button";
+const activityFeed = tv({
+    base: "bg-base-100 w-100 min-h-full border-l border-l-base-300 p-3",
+});
+export const ActivityFeed = (props) => {
+    const [feed, setFeed] = createSignal(props.feed);
+    const [input, setInput] = createSignal("");
+    const handleSubmit = () => {
+        props.onMessageCreate?.(input());
+        const date = new Date();
+        const dateString = date.toLocaleTimeString([], { hour: "numeric", minute: "2-digit" });
+        setFeed([
+            ...feed(),
+            { username: props.username, profileUrl: props.profileUrl, message: input(), timeStamp: dateString },
+        ]);
+        setInput("");
+    };
+    return (<div class={activityFeed({ class: props.class })}>
+      <div class="mb-2">
+        <div class="flex items-start gap-2.5">
+          <Avatar src={props.profileUrl} class="w-10"/>
+          <div class="space-y-1 flex-1">
+            <TextArea textareaProps={{ autoResize: true }} value={input()} onChange={setInput}/>
+            <div>
+              <Button size="sm" appearance="primary" onClick={handleSubmit}>
+                Send
+              </Button>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div>
+        <For each={feed().reverse()}>
+          {(feedItem) => (<div class="chat chat-start">
+              <div class="chat-image avatar">
+                <div class="w-10 rounded-full">
+                  <img src={feedItem.profileUrl}/>
+                </div>
+              </div>
+              <div class="chat-header">
+                {feedItem.username}
+                <time class="text-xs opacity-50">{feedItem.timeStamp}</time>
+              </div>
+              <div class="chat-bubble text-sm">{feedItem.message}</div>
+            </div>)}
+        </For>
+      </div>
+    </div>);
+};
+export default ActivityFeed;

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

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

package/dist/components/ActivityFeed/index.js

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

package/dist/components/AlertDialog/AlertDialog.d.ts

@@ -0,0 +1,27 @@
+import { JSXElement, ParentComponent } from "solid-js";
+import { ButtonProps } from "../Button";
+interface AlertDialogProps {
+    id: string;
+    actions?: JSXElement;
+}
+interface AlertDialogContentProps {
+    title: string;
+}
+interface AlertDialogComponents {
+    Button: ParentComponent<ButtonProps>;
+    Buttons: ParentComponent;
+    Content: ParentComponent<AlertDialogContentProps>;
+    Trigger: ParentComponent<ButtonProps>;
+}
+export declare const AlertDialog: ParentComponent<AlertDialogProps> & AlertDialogComponents;
+export declare const AlertDialogButton: ParentComponent<ButtonProps>;
+export declare const AlertDialogButtons: ParentComponent;
+export declare const AlertDialogTrigger: ParentComponent<ButtonProps>;
+export declare const AlertDialogContent: ParentComponent<AlertDialogContentProps>;
+export default AlertDialog;
+export declare function useAlertDialog(): {
+    id: string;
+    actions?: JSXElement;
+    open: import("solid-js").Accessor<boolean>;
+    setOpen: (v: boolean) => void;
+};

package/dist/components/AlertDialog/AlertDialog.jsx

@@ -0,0 +1,62 @@
+import { createSignal, useContext } from "solid-js";
+import Close from "lucide-solid/icons/x";
+import { Button } from "../Button";
+import { AlertDialogContext } from "./alertDialogContext";
+export const AlertDialog = (props) => {
+    const [open, setOpen] = createSignal(false);
+    const handleOpen = (v) => {
+        if (v) {
+            const dialog = document.getElementById(props.id);
+            dialog.showModal();
+        }
+        else {
+            const dialog = document.getElementById(props.id);
+            dialog.close();
+        }
+        setOpen(v);
+    };
+    return (<AlertDialogContext.Provider value={{ id: props.id, open, setOpen: handleOpen }}>
+      {props.children}
+    </AlertDialogContext.Provider>);
+};
+export const AlertDialogButton = (props) => {
+    return <Button {...props} size="sm"></Button>;
+};
+export const AlertDialogButtons = (props) => {
+    return <div class="flex justify-end gap-2">{props.children}</div>;
+};
+export const AlertDialogTrigger = (props) => {
+    const { open, setOpen } = useAlertDialog();
+    return (<Button {...props} size="sm" onClick={() => setOpen(!open())}>
+      {props.children}
+    </Button>);
+};
+export const AlertDialogContent = (props) => {
+    const { id, setOpen } = useAlertDialog();
+    return (<dialog id={id} class="modal">
+      <div class="modal-box">
+        <div class="flex justify-between items-start">
+          {props.title && <h3 class="font-bold text-lg mb-2">{props.title}</h3>}
+          <Button variant="ghost" modifier="square" size="xs" onClick={() => setOpen(false)}>
+            <Close size={20}/>
+          </Button>
+        </div>
+        <div class="flex flex-col gap-2">{props.children}</div>
+      </div>
+      <form method="dialog" class="modal-backdrop">
+        <button class="cursor-auto">close</button>
+      </form>
+    </dialog>);
+};
+AlertDialog.Button = AlertDialogButton;
+AlertDialog.Buttons = AlertDialogButtons;
+AlertDialog.Trigger = AlertDialogTrigger;
+AlertDialog.Content = AlertDialogContent;
+export default AlertDialog;
+export function useAlertDialog() {
+    const context = useContext(AlertDialogContext);
+    if (!context) {
+        throw new Error("useModal must be used within a Modal");
+    }
+    return context;
+}

package/dist/components/AlertDialog/alertDialogContext.d.ts

@@ -0,0 +1,9 @@
+import { Accessor, JSXElement } from "solid-js";
+type AlertDialogContextType = {
+    id: string;
+    actions?: JSXElement;
+    open: Accessor<boolean>;
+    setOpen: (v: boolean) => void;
+};
+export declare const AlertDialogContext: import("solid-js").Context<AlertDialogContextType | undefined>;
+export {};

package/dist/components/AlertDialog/alertDialogContext.js

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

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

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

package/dist/components/AlertDialog/index.js

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

package/dist/components/Avatar/Avatar.d.ts

@@ -0,0 +1,10 @@
+import { Component } from "solid-js";
+interface AvatarProps {
+    src?: string;
+    alt?: string;
+    class?: string;
+    fallback?: string;
+    size?: "xs" | "sm" | "md" | "lg" | "xl";
+}
+export declare const Avatar: Component<AvatarProps>;
+export default Avatar;

package/dist/components/Avatar/Avatar.jsx

@@ -0,0 +1,30 @@
+import { Image } from "@kobalte/core/image";
+import { tv } from "tailwind-variants";
+const avatar = tv({
+    base: "rounded-full font-bold",
+    variants: {
+        size: {
+            xs: "w-6 h-6 text-xs",
+            sm: "w-8 h-8 text-sm",
+            md: "w-12 h-12 text-lg",
+            lg: "w-16 h-16 text-2xl",
+            xl: "w-24 h-24 text-4xl",
+        },
+        fallback: {
+            true: "bg-base-200 flex items-center justify-center",
+            false: "",
+        },
+    },
+    defaultVariants: {
+        size: "sm",
+    },
+});
+export const Avatar = (props) => {
+    return (<Image fallbackDelay={100} class="avatar">
+      <Image.Img src={props.src} alt={props.alt} class={avatar({ size: props.size, class: props.class })}/>
+      <Image.Fallback class={avatar({ size: props.size, class: props.class, fallback: true })}>
+        {props.fallback}
+      </Image.Fallback>
+    </Image>);
+};
+export default Avatar;

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

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

package/dist/components/Avatar/index.js

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

package/dist/components/BreadCrumbs/BreadCrumbs.d.ts

@@ -0,0 +1,12 @@
+import { Component } from "solid-js";
+export interface BreadCrumb {
+    label: string;
+    href?: string;
+    onClick?: () => void;
+}
+export interface BreadCrumbsProps {
+    items: BreadCrumb[];
+    class?: string;
+}
+export declare const BreadCrumbs: Component<BreadCrumbsProps>;
+export default BreadCrumbs;

package/dist/components/BreadCrumbs/BreadCrumbs.jsx

@@ -0,0 +1,26 @@
+import { For, Show } from "solid-js";
+import { tv } from "tailwind-variants";
+const breadcrumbs = tv({
+    base: "breadcrumbs text-sm",
+});
+export const BreadCrumbs = (props) => {
+    return (<div class={breadcrumbs({ class: props.class })}>
+      <ul>
+        <For each={props.items}>
+          {(item) => (<li>
+              <Show when={item.href || item.onClick} fallback={item.label}>
+                <a href={item.href} onClick={(e) => {
+                if (item.onClick) {
+                    e.preventDefault();
+                    item.onClick();
+                }
+            }}>
+                  {item.label}
+                </a>
+              </Show>
+            </li>)}
+        </For>
+      </ul>
+    </div>);
+};
+export default BreadCrumbs;

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

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

package/dist/components/BreadCrumbs/index.js

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

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

@@ -1,13 +1,13 @@
 import { ParentComponent, ValidComponent } from "solid-js";
-import { ButtonRootProps } from "@kobalte/core/button";
+import { type 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 {
+export interface ButtonProps extends BaseProps {
     variant?: "outline" | "dash" | "soft" | "ghost" | "link";
     appearance?: "primary" | "secondary" | "success" | "warning" | "neutral" | "error" | "accent" | "info";
     size?: "xs" | "sm" | "md" | "lg" | "xl";
     modifier?: "wide" | "block" | "square" | "circle";
     isLoading?: boolean;
 }
-export declare const Button: ParentComponent<Props>;
+export declare const Button: ParentComponent<ButtonProps>;
 export default Button;

package/dist/components/Button/Button.jsx

@@ -28,21 +28,16 @@ const button = tv({
             soft: "btn-soft",
             ghost: "btn-ghost",
             link: "btn-link",
-            none: "",
         },
         modifier: {
             wide: "btn-wide",
             block: "btn-block",
             square: "btn-square",
             circle: "btn-circle",
-            none: "",
         },
     },
     defaultVariants: {
-        variant: "none",
-        appearance: "neutral",
-        size: "md",
-        modifier: "none",
+        size: "sm",
     },
 });
 const spinnerSizeMap = {

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

@@ -3,6 +3,7 @@ interface Props {
     class?: string;
     img?: string;
     imgAlt?: string;
+    imgClass?: string;
     bodyClass?: string;
 }
 export declare const Card: ParentComponent<Props> & {

package/dist/components/Card/Card.jsx

@@ -1,15 +1,18 @@
 import { Show } from "solid-js";
 import { tv } from "tailwind-variants";
 const card = tv({
-    base: "card bg-base-100 shadow-sm",
+    base: "card bg-base-100 shadow-sm border border-base-200",
 });
 const cardBody = tv({
     base: "card-body w-full",
 });
+const cardImage = tv({
+    base: "px-4 pt-4",
+});
 export const Card = (props) => {
     return (<div class={card({ class: props.class })}>
       <Show when={props.img}>
-        <figure>
+        <figure class={cardImage({ class: props.imgClass })}>
           <img src={props.img} alt={props.imgAlt ?? "Card Image"}/>
         </figure>
       </Show>

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

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

package/dist/components/Checkbox/Checkbox.jsx

@@ -1,25 +1,42 @@
-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";
+import { splitProps } from "solid-js";
+import { tv } from "tailwind-variants";
+const checkbox = tv({
+    base: "checkbox",
+    variants: {
+        size: {
+            xs: "checkbox-xs",
+            sm: "checkbox-sm",
+            md: "checkbox-md",
+            lg: "checkbox-lg",
+            xl: "checkbox-xl",
+        },
+        appearance: {
+            primary: "checkbox-primary",
+            secondary: "checkbox-secondary",
+            success: "checkbox-success",
+            warning: "checkbox-warning",
+            error: "checkbox-error",
+            info: "checkbox-info",
+            accent: "checkbox-accent",
+            neutral: "checkbox-neutral",
+        },
+    },
+    defaultVariants: {
+        size: "sm",
+    },
+});
 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>);
+    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={checkbox({
+            size: local.size,
+            appearance: local.appearance,
+            class: local.class,
+        })} onChange={(e) => {
+            local.onChange?.(e.currentTarget.checked);
+        }}/>
+
+      {local.label && <span class="select-none">{local.label}</span>}
+    </label>);
 };
 export default Checkbox;

package/dist/components/ColorPicker/ColorPicker.d.ts

@@ -0,0 +1,10 @@
+interface ColorPickerProps {
+    value?: string;
+    onChange?: (color: string) => void;
+    saveFunc?: (v: string) => Promise<void>;
+    size?: "xs" | "sm" | "md" | "lg" | "xl";
+    label?: string;
+    class?: string;
+}
+export declare function ColorPicker(props: ColorPickerProps): import("solid-js").JSX.Element;
+export default ColorPicker;

package/dist/components/ColorPicker/ColorPicker.jsx

@@ -0,0 +1,61 @@
+import { Show, createSignal } from "solid-js";
+import { tv } from "tailwind-variants";
+const colorPicker = tv({
+    base: "flex items-center justify-center w-10 h-10 cursor-pointer rounded-lg focus:outline-2",
+    variants: {
+        size: {
+            xs: "w-6 h-6",
+            sm: "w-8 h-8",
+            md: "w-10 h-10",
+            lg: "w-12 h-12",
+            xl: "w-16 h-16",
+        },
+    },
+    defaultVariants: {
+        size: "sm",
+    },
+});
+const label = tv({
+    base: "label",
+    variants: {
+        size: {
+            xs: "text-xs",
+            sm: "text-xs",
+            md: "text-xs",
+            lg: "text-sm",
+            xl: "text-sm",
+        },
+    },
+    defaultVariants: {
+        size: "sm",
+    },
+});
+export function ColorPicker(props) {
+    let inputRef;
+    let swatchRef;
+    const [color, setColor] = createSignal(props.value ?? "#000000");
+    // Sync external value changes
+    if (props.value !== undefined && props.value !== color()) {
+        setColor(props.value);
+    }
+    const handleChange = (e) => {
+        const value = e.target.value;
+        setColor(value);
+        props.onChange?.(value);
+        props.saveFunc?.(value);
+    };
+    const handleDivClick = () => {
+        inputRef?.click();
+    };
+    return (<label class="flex flex-col gap-1 w-fit">
+      <Show when={props.label}>
+        <span class={label({ size: props.size })}>{props.label}</span>
+      </Show>
+      <div ref={(el) => (swatchRef = el)} class={colorPicker({ size: props.size, class: props.class })} style={{ background: color() }} aria-label="Color picker" tabIndex={0} role="button" onClick={handleDivClick} onKeyDown={(e) => {
+            if (e.key === "Enter" || e.key === " ")
+                handleDivClick();
+        }}></div>
+      <input ref={(el) => (inputRef = el)} type="color" value={color()} onInput={handleChange} style={{ position: "absolute", opacity: 0, width: "1px", height: "1px", "pointer-events": "none" }} tabIndex={-1} aria-hidden="true" onfocus={() => swatchRef?.focus()}/>
+    </label>);
+}
+export default ColorPicker;

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

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

package/dist/components/ColorPicker/index.js

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

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

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

@@ -1,15 +1,9 @@
 import { tv } from "tailwind-variants";
 const container = tv({
-    base: "flex-1 bg-base-100 dark:bg-base-900 min-h-[calc(100vh-4rem)]",
-    variants: {
-        noPadding: {
-            true: "",
-            false: "py-4 px-[3vw]",
-        },
-    },
+    base: "flex-1 bg-base-100 min-h-[calc(100vh-4rem)] py-4 px-[2vw]",
 });
 export const Container = (props) => {
-    const classes = container({ noPadding: props.noPadding, class: props.class });
+    const classes = container({ class: props.class });
     return <div class={classes}>{props.children}</div>;
 };
 export default Container;

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

@@ -3,7 +3,12 @@ interface DateInputProps {
     label?: string;
     value: Date | null;
     onChange: (date: Date | null) => void;
+    variant?: "ghost";
+    appearance?: "neutral" | "primary" | "secondary" | "accent" | "info" | "success" | "warning" | "error";
+    size?: "xs" | "sm" | "md" | "lg" | "xl";
     class?: string;
+    min?: string;
+    max?: string;
 }
 export declare const DateInput: Component<DateInputProps>;
 export default DateInput;

package/dist/components/DateInput/DateInput.jsx

@@ -1,22 +1,43 @@
 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)]",
+    base: "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",
+        },
+    },
 });
 export const DateInput = (props) => {
-    // Convert Date to yyyy-mm-dd string for input value
+    // yyyy-mm-dd 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}>
+    return (<label class="floating-label">
       <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>
+        <span>{props.label}</span>
       </Show>
-      <input type="date" class={dateInput()} value={valueStr()} onInput={handleChange}/>
-    </div>);
+      <input type="date" class={dateInput({ size: props.size, variant: props.variant, appearance: props.appearance })} value={valueStr()} onInput={handleChange} min={props.min} max={props.max}/>
+    </label>);
 };
 export default DateInput;