@solidpb/ui-kit 0.1.0 → 0.2.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,12 +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 {
-    variant?: "text" | "solid";
-    appearance?: "primary" | "success" | "warning" | "neutral" | "error" | "muted";
-    size?: "xs" | "sm" | "md" | "lg";
+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

@@ -3,71 +3,50 @@ 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
-  `,
+    base: "btn",
     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",
+            primary: "btn-primary",
+            secondary: "btn-secondary",
+            success: "btn-success",
+            warning: "btn-warning",
+            neutral: "btn-neutral",
+            error: "btn-error",
+            accent: "btn-accent",
+            info: "btn-info",
         },
         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",
+            xs: "btn-xs",
+            sm: "btn-sm",
+            md: "btn-md",
+            lg: "btn-lg",
+            xl: "btn-xl",
         },
         variant: {
-            text: "bg-transparent dark:bg-transparent border-none py-0 px-1 hover:underline underline-offset-4",
-            solid: "dark:border-1",
+            outline: "btn-outline",
+            dash: "btn-dash",
+            soft: "btn-soft",
+            ghost: "btn-ghost",
+            link: "btn-link",
         },
-    },
-    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",
+        modifier: {
+            wide: "btn-wide",
+            block: "btn-block",
+            square: "btn-square",
+            circle: "btn-circle",
         },
-        {
-            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",
+        size: "sm",
     },
 });
+const spinnerSizeMap = {
+    xs: 12,
+    sm: 16,
+    md: 20,
+    lg: 24,
+    xl: 28,
+};
 export const Button = (props) => {
     const [local, others] = splitProps(props, [
         "children",
@@ -76,17 +55,19 @@ export const Button = (props) => {
         "appearance",
         "size",
         "isLoading",
+        "modifier",
     ]);
     const classes = createMemo(() => button({
         variant: local.variant,
         appearance: local.appearance,
         size: local.size,
+        modifier: local.modifier,
         class: local.class,
     }));
     return (<KButton class={classes()} disabled={local.isLoading} {...others}>
       {local.children}
       <Show when={local.isLoading}>
-        <Loader class="ml-2 animate-spin"/>
+        <Loader class="ml-1 animate-spin" size={spinnerSizeMap[local.size ?? "md"]}/>
       </Show>
     </KButton>);
 };

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

@@ -1,6 +1,16 @@
 import { ParentComponent } from "solid-js";
 interface Props {
     class?: string;
+    img?: string;
+    imgAlt?: string;
+    imgClass?: string;
+    bodyClass?: string;
 }
-export declare const Card: ParentComponent<Props>;
+export declare const Card: ParentComponent<Props> & {
+    Title: typeof CardTitle;
+};
+interface CardTitleProps {
+    class?: string;
+}
+declare const CardTitle: ParentComponent<CardTitleProps>;
 export default Card;

package/dist/components/Card/Card.jsx

@@ -1,6 +1,29 @@
+import { Show } from "solid-js";
+import { tv } from "tailwind-variants";
+const card = tv({
+    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={`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}
+    return (<div class={card({ class: props.class })}>
+      <Show when={props.img}>
+        <figure class={cardImage({ class: props.imgClass })}>
+          <img src={props.img} alt={props.imgAlt ?? "Card Image"}/>
+        </figure>
+      </Show>
+      <div class={cardBody({ class: props.bodyClass })}>{props.children}</div>
     </div>);
 };
+const cardTitle = tv({
+    base: "card-title",
+});
+const CardTitle = (props) => {
+    return <h2 class={cardTitle({ class: props.class })}>{props.children}</h2>;
+};
+Card.Title = CardTitle;
 export default Card;

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;