solid-element-ui 0.2.3 → 0.2.5

package/dist/src/alert-dialog/alert-dialog.d.ts

@@ -4,8 +4,9 @@ interface AlertDialogProps extends ComponentProps<typeof KAlertDialog> {
     trigger: JSX.Element;
     title: string;
     description?: string;
-    action: JSX.Element;
+    action?: JSX.Element;
     cancel?: JSX.Element;
+    onConfirm?: () => void;
 }
 export declare const AlertDialog: (props: AlertDialogProps) => JSX.Element;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "solid-element-ui",
-    "version": "0.2.3",
+    "version": "0.2.5",
     "type": "module",
     "license": "MIT",
     "author": "sanguogege",
@@ -25,6 +25,7 @@
     },
     "files": [
         "dist",
+        "src",
         "README.md"
     ],
     "main": "./dist/index.js",
@@ -33,12 +34,11 @@
     "exports": {
         ".": {
             "types": "./dist/index.d.ts",
-            "solid": "./src/index.tsx",
             "import": "./dist/index.js",
-            "default": "./src/index.tsx"
+            "solid": "./src/index.tsx",
+            "default": "./dist/index.js"
         },
-        "./styles": "./src/index.css",
-        "./dist/index.css": "./dist/index.css"
+        "./index.css": "./dist/index.css"
     },
     "source": "./src/index.tsx",
     "scripts": {

package/src/accordion/accordion.tsx

@@ -0,0 +1,80 @@
+import {
+    Accordion as KAccordion,
+    type AccordionRootProps,
+} from "@kobalte/core/accordion";
+import { For, type JSX, splitProps } from "solid-js";
+import { ChevronDown } from "lucide-solid";
+import { tv, type VariantProps } from "tailwind-variants";
+
+// 1. 定义样式
+const accordionStyles = tv(
+    {
+        slots: {
+            root: "w-full divide-y divide-base border border-base rounded-lg overflow-hidden",
+            item: "group",
+            header: "flex",
+            trigger: [
+                "flex flex-1 items-center justify-between cursor-pointer py-4 px-4 text-md font-medium transition-all ",
+                "bg-header hover:bg-header/80",
+            ],
+            content: [
+                "overflow-hidden text-md transition-all bg-transparent text-main",
+                "data-[expanded]:animate-accordion-down data-[closed]:animate-accordion-up",
+            ],
+            contentInner: "pb-4 pt-2 px-4",
+            icon: "h-4 w-4 transition-transform duration-200 group-data-[expanded]:rotate-180",
+        },
+    },
+    {
+        twMerge: true,
+    },
+);
+
+const { root, item, header, trigger, content, contentInner, icon } =
+    accordionStyles();
+
+// 2. 类型定义
+export interface AccordionItem {
+    value: string;
+    title: JSX.Element;
+    content: JSX.Element;
+    disabled?: boolean;
+}
+
+interface AccordionProps
+    extends AccordionRootProps, VariantProps<typeof accordionStyles> {
+    items: AccordionItem[];
+    class?: string;
+}
+
+export const Accordion = (props: AccordionProps) => {
+    const [local, others] = splitProps(props, ["items", "class"]);
+
+    return (
+        <KAccordion class={root({ class: local.class })} {...others}>
+            <For each={local.items}>
+                {(itemData) => (
+                    <KAccordion.Item
+                        value={itemData.value}
+                        disabled={itemData.disabled}
+                        class={item()}
+                    >
+                        <KAccordion.Header class={header()}>
+                            <KAccordion.Trigger class={trigger()}>
+                                {itemData.title}
+                                <ChevronDown
+                                    class={icon()}
+                                    aria-hidden="true"
+                                />
+                            </KAccordion.Trigger>
+                        </KAccordion.Header>
+
+                        <KAccordion.Content class={content()}>
+                            <div class={contentInner()}>{itemData.content}</div>
+                        </KAccordion.Content>
+                    </KAccordion.Item>
+                )}
+            </For>
+        </KAccordion>
+    );
+};

package/src/alert/alert.tsx

@@ -0,0 +1,86 @@
+import { Alert as KAlert } from "@kobalte/core/alert";
+import { splitProps, type JSX, type ComponentProps } from "solid-js";
+import { tv, type VariantProps } from "tailwind-variants";
+import { Info, CircleAlert, CircleCheck, CircleX } from "lucide-solid";
+
+const alertStyles = tv(
+    {
+        slots: {
+            root: "relative w-full rounded-lg border p-4 flex gap-3 antialiased text-main",
+            content: "flex flex-col gap-1 text-left",
+            title: "font-semibold leading-none tracking-tight",
+            children: "text-md leading-relaxed opacity-90",
+            icon: "shrink-0",
+        },
+        variants: {
+            variant: {
+                info: {
+                    root: "bg-primary/20 border-primary/80",
+                    icon: "text-primary",
+                },
+                success: {
+                    root: "bg-success/20 border-success/80 ",
+                    icon: "text-success",
+                },
+                warning: {
+                    root: "bg-warning/20 border-warning/80 ",
+                    icon: "text-warning",
+                },
+                danger: {
+                    root: "bg-danger/20 border-danger/80 ",
+                    icon: "text-danger",
+                },
+            },
+        },
+        defaultVariants: {
+            variant: "info",
+        },
+    },
+    {
+        twMerge: true,
+    },
+);
+
+type AlertVariants = VariantProps<typeof alertStyles>;
+
+export interface AlertProps
+    extends ComponentProps<typeof KAlert>, AlertVariants {
+    title?: string;
+    icon?: boolean | JSX.Element;
+}
+
+const iconMap = {
+    info: Info,
+    success: CircleCheck,
+    warning: CircleAlert,
+    danger: CircleX,
+};
+
+export const Alert = (props: AlertProps) => {
+    const [local, variantProps, others] = splitProps(
+        props,
+        ["title", "icon", "children", "class"],
+        ["variant"],
+    );
+
+    const { root, content, title, children, icon } = alertStyles(variantProps);
+
+    const RenderedIcon = () => {
+        if (local.icon === false) return null;
+        if (typeof local.icon === "object") return local.icon;
+
+        const Icon = iconMap[variantProps.variant || "info"];
+        return <Icon size={18} class={icon()} />;
+    };
+
+    // 5. 渲染组件
+    return (
+        <KAlert class={`${root()} ${local.class || ""}`.trim()} {...others}>
+            <RenderedIcon />
+            <div class={content()}>
+                {local.title && <h5 class={title()}>{local.title}</h5>}
+                <div class={children()}>{local.children}</div>
+            </div>
+        </KAlert>
+    );
+};

package/src/alert-dialog/alert-dialog.tsx

@@ -0,0 +1,98 @@
+import { AlertDialog as KAlertDialog } from "@kobalte/core/alert-dialog";
+import { splitProps, type JSX, type ComponentProps } from "solid-js";
+import { tv } from "tailwind-variants";
+import { X } from "lucide-solid";
+import { Button } from "../button/button";
+
+// TODO 修改点击确定时的行为，目前是关闭对话框
+
+const alertDialogStyles = tv(
+    {
+        slots: {
+            overlay: [
+                "fixed inset-0 z-50 bg-black/50 backdrop-blur-sm",
+                " data-[expanded]:animate-in data-[closed]:animate-out ",
+            ],
+            content: [
+                "fixed left-1/2 top-1/2 z-50 w-full max-w-md -translate-x-1/2 -translate-y-1/2 rounded-xl bg-app p-4 shadow-xl ",
+                "data-[expanded]:animate-in data-[closed]:animate-out",
+            ],
+            header: "flex align-center justify-between",
+            title: "text-lg font-semibold text-main ",
+            description: "text-sm py-2 text-main",
+            footer: "mt-6 flex flex-row justify-end gap-3",
+            closeButton:
+                "rounded-sm opacity-70 text-main transition-opacity hover:opacity-100 focus:outline-none",
+        },
+    },
+    {
+        twMerge: true,
+    },
+);
+
+const { overlay, content, header, title, description, footer, closeButton } =
+    alertDialogStyles();
+
+interface AlertDialogProps extends ComponentProps<typeof KAlertDialog> {
+    trigger: JSX.Element;
+    title: string;
+    description?: string;
+    action?: JSX.Element;
+    cancel?: JSX.Element;
+    onConfirm?: () => void;
+}
+
+export const AlertDialog = (props: AlertDialogProps) => {
+    const [local, others] = splitProps(props, [
+        "trigger",
+        "title",
+        "description",
+        "action",
+        "cancel",
+        "onConfirm",
+    ]);
+
+    const handleConfirm = () => {
+        local.onConfirm?.();
+    };
+
+    return (
+        <KAlertDialog {...others}>
+            <KAlertDialog.Trigger>{local.trigger}</KAlertDialog.Trigger>
+            <KAlertDialog.Portal>
+                <KAlertDialog.Overlay class={overlay()} />
+                <KAlertDialog.Content class={content()}>
+                    <div class={header()}>
+                        <KAlertDialog.Title class={title()}>
+                            {local.title}
+                        </KAlertDialog.Title>
+                        <KAlertDialog.CloseButton class={closeButton()}>
+                            <X size={18} />
+                        </KAlertDialog.CloseButton>
+                    </div>
+                    <div>
+                        {local.description && (
+                            <KAlertDialog.Description class={description()}>
+                                {local.description}
+                            </KAlertDialog.Description>
+                        )}
+                    </div>
+
+                    <div class={footer()}>
+                        <KAlertDialog.CloseButton>
+                            {local.cancel || (
+                                <Button variant="outline">取消</Button>
+                            )}
+                        </KAlertDialog.CloseButton>
+
+                        <KAlertDialog.CloseButton onClick={handleConfirm}>
+                            {local.action || (
+                                <Button color="primary">确认</Button>
+                            )}
+                        </KAlertDialog.CloseButton>
+                    </div>
+                </KAlertDialog.Content>
+            </KAlertDialog.Portal>
+        </KAlertDialog>
+    );
+};

package/src/badge/badge.tsx

@@ -0,0 +1,52 @@
+import { Badge as KBadge } from "@kobalte/core/badge";
+import { splitProps, type ComponentProps } from "solid-js";
+import { tv, type VariantProps } from "tailwind-variants";
+
+const badgeStyles = tv(
+    {
+        base: "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none",
+        variants: {
+            variant: {
+                default:
+                    "border-transparent bg-zinc-900 text-zinc-50 hover:bg-zinc-900/80 dark:bg-zinc-50 dark:text-zinc-900",
+                secondary:
+                    "border-transparent bg-zinc-100 text-zinc-900 hover:bg-zinc-100/80 dark:bg-zinc-800 dark:text-zinc-50",
+                outline:
+                    "text-zinc-950 border-zinc-200 dark:text-zinc-50 dark:border-zinc-800",
+                success:
+                    "border-transparent bg-emerald-100 text-emerald-800 dark:bg-emerald-900/30 dark:text-emerald-400",
+                danger: "border-transparent bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-400",
+            },
+        },
+        defaultVariants: {
+            variant: "default",
+        },
+    },
+    {
+        twMerge: true,
+    },
+);
+
+type BadgeVariants = VariantProps<typeof badgeStyles>;
+
+export interface BadgeProps
+    extends ComponentProps<typeof KBadge>,
+        BadgeVariants {}
+
+export const Badge = (props: BadgeProps) => {
+    const [local, variantProps, others] = splitProps(
+        props,
+        ["class"],
+        ["variant"]
+    );
+
+    return (
+        <KBadge
+            class={badgeStyles({
+                variant: variantProps.variant,
+                class: local.class,
+            })}
+            {...others}
+        />
+    );
+};

package/src/breadcrumbs/breadcrumbs.tsx

@@ -0,0 +1,69 @@
+import { Breadcrumbs as KBreadcrumbs } from "@kobalte/core/breadcrumbs";
+import { For, type JSX, splitProps, type ComponentProps } from "solid-js";
+import { tv } from "tailwind-variants";
+import { ChevronRight } from "lucide-solid";
+
+// TODO 1. 定义样式
+//      2. icon 支持自定义
+
+const breadcrumbStyles = tv(
+    {
+        slots: {
+            root: "flex w-full justify-start items-center gap-2",
+            link: "text-md transition-colors text-main data-[current]:text-main/50 data-[disabled]:pointer-events-none no-underline",
+            separator: "flex h-4 w-4 items-center justify-center text-main/80",
+        },
+    },
+    {
+        twMerge: true,
+    },
+);
+
+const { root, link, separator } = breadcrumbStyles();
+
+export interface BreadcrumbItem {
+    title: JSX.Element;
+    href?: string;
+    current?: boolean;
+    disabled?: boolean;
+}
+
+interface BreadcrumbsProps extends ComponentProps<typeof KBreadcrumbs> {
+    items: BreadcrumbItem[];
+    separatorIcon?: JSX.Element;
+}
+
+export const Breadcrumbs = (props: BreadcrumbsProps) => {
+    const [local, others] = splitProps(props, [
+        "items",
+        "separatorIcon",
+        "class",
+    ]);
+
+    return (
+        <KBreadcrumbs class={root()} {...others}>
+            <For each={local.items}>
+                {(breadcrumb, index) => (
+                    <>
+                        <KBreadcrumbs.Link
+                            href={breadcrumb.href}
+                            current={breadcrumb.current}
+                            disabled={breadcrumb.disabled}
+                            class={link({ class: local.class })}
+                        >
+                            {breadcrumb.title}
+                        </KBreadcrumbs.Link>
+
+                        {index() < local.items.length - 1 && (
+                            <span aria-hidden="true" class={separator()}>
+                                {local.separatorIcon || (
+                                    <ChevronRight size={16} />
+                                )}
+                            </span>
+                        )}
+                    </>
+                )}
+            </For>
+        </KBreadcrumbs>
+    );
+};

package/src/button/button.tsx

@@ -0,0 +1,216 @@
+import { Button as KButton } from "@kobalte/core/button";
+import { splitProps, type JSX, type ComponentProps, Show } from "solid-js";
+import { tv, type VariantProps } from "tailwind-variants";
+import { LoaderCircle } from "lucide-solid";
+
+// --- 样式定义保持不变 ---
+const buttonStyles = tv(
+    {
+        slots: {
+            base: "inline-flex items-center cursor-pointer justify-center rounded-sm text-sm font-medium transition-all duration-200 active:scale-[0.98] focus:outline-none disabled:opacity-50 disabled:pointer-events-none",
+            icon: "animate-spin -ml-1 mr-2 h-4 w-4 text-current",
+        },
+        variants: {
+            size: {
+                sm: { base: "h-6 px-2 text-xs" },
+                md: { base: "h-8 px-4 text-sm" },
+                lg: { base: "h-10 px-6 text-base" },
+            },
+            loading: {
+                true: {
+                    base: "pointer-events-none opacity-70",
+                },
+            },
+            variant: {
+                default: { base: "bg-main text-reversal" },
+                outline: {
+                    base: "border border-base hover:border-primary hover:text-primary",
+                },
+                dashed: {
+                    base: "border border-dashed border-base hover:border-primary hover:text-primary",
+                },
+                filled: { base: "bg-main/5 hover:bg-main/10" },
+                text: { base: "hover:bg-main/10" },
+            },
+            color: {
+                primary: { base: "" },
+                success: { base: "" },
+                warning: { base: "" },
+                danger: { base: "" },
+            },
+        },
+        compoundVariants: [
+            {
+                variant: "default",
+                color: "primary",
+                class: {
+                    base: "bg-primary text-white border-primary hover:bg-primary/70 hover:border-primary/70",
+                },
+            },
+            {
+                variant: "default",
+                color: "success",
+                class: {
+                    base: "bg-success text-white border-success hover:bg-success/70 hover:border-success/70",
+                },
+            },
+            {
+                variant: "default",
+                color: "warning",
+                class: {
+                    base: "bg-warning text-white border-warning hover:bg-warning/70 hover:border-warning/70",
+                },
+            },
+            {
+                variant: "default",
+                color: "danger",
+                class: {
+                    base: "bg-danger text-white border-danger hover:bg-danger/70 hover:border-danger/70",
+                },
+            },
+            // --- outline 和 dashed 类型 ---
+            {
+                variant: ["outline", "dashed"],
+                color: "primary",
+                class: {
+                    base: "text-primary border-primary hover:border-primary/70  hover:text-primary/70",
+                },
+            },
+            {
+                variant: ["outline", "dashed"],
+                color: "success",
+                class: {
+                    base: "text-success border-success hover:border-success/70  hover:text-success/70",
+                },
+            },
+            {
+                variant: ["outline", "dashed"],
+                color: "warning",
+                class: {
+                    base: "text-warning border-warning hover:border-warning/70  hover:text-warning/70",
+                },
+            },
+            {
+                variant: ["outline", "dashed"],
+                color: "danger",
+                class: {
+                    base: "text-danger border-danger hover:border-danger/70  hover:text-danger/70",
+                },
+            },
+
+            // --- filled 类型 ---
+            {
+                variant: "filled",
+                color: "primary",
+                class: {
+                    base: "text-primary bg-primary/5 hover:bg-primary/10",
+                },
+            },
+            {
+                variant: "filled",
+                color: "success",
+                class: {
+                    base: "text-success bg-success/5 hover:bg-success/10",
+                },
+            },
+            {
+                variant: "filled",
+                color: "warning",
+                class: {
+                    base: "text-warning bg-warning/5 hover:bg-warning/10",
+                },
+            },
+            {
+                variant: "filled",
+                color: "danger",
+                class: {
+                    base: "text-danger bg-danger/5 hover:bg-danger/10",
+                },
+            },
+            // --- text 类型 ---
+            {
+                variant: "text",
+                color: "primary",
+                class: {
+                    base: "text-primary hover:bg-primary/10",
+                },
+            },
+            {
+                variant: "text",
+                color: "success",
+                class: {
+                    base: "text-success hover:bg-success/10",
+                },
+            },
+            {
+                variant: "text",
+                color: "warning",
+                class: {
+                    base: "text-warning hover:bg-warning/10",
+                },
+            },
+            {
+                variant: "text",
+                color: "danger",
+                class: {
+                    base: "text-danger hover:bg-danger/10",
+                },
+            },
+        ],
+        defaultVariants: {
+            size: "md",
+            variant: "default",
+        },
+    },
+    { twMerge: true },
+);
+
+type ButtonVariants = VariantProps<typeof buttonStyles>;
+
+export interface ButtonProps
+    extends ComponentProps<typeof KButton>, ButtonVariants {
+    loading?: boolean;
+    leftIcon?: JSX.Element;
+    rightIcon?: JSX.Element;
+}
+
+export const Button = (props: ButtonProps) => {
+    const [local, variantKeys, others] = splitProps(
+        props,
+        ["class", "children", "loading", "leftIcon", "rightIcon", "disabled"],
+        ["variant", "size", "color", "loading"],
+    );
+
+    // 2. 调用 styles 获取 slots
+    // 注意：将 local.class 传入 base 槽位
+    const styles = () =>
+        buttonStyles({
+            ...variantKeys,
+            class: local.class,
+        });
+
+    return (
+        <KButton
+            class={styles().base()}
+            disabled={local.disabled || local.loading}
+            {...others}
+        >
+            {/* Loading 状态显示 */}
+            <Show when={local.loading}>
+                <LoaderCircle class={styles().icon()} />
+            </Show>
+
+            {/* 非 Loading 状态下的 Left Icon */}
+            <Show when={!local.loading && local.leftIcon}>
+                <span class="mr-2 inline-flex">{local.leftIcon}</span>
+            </Show>
+
+            {local.children}
+
+            {/* Right Icon */}
+            <Show when={local.rightIcon}>
+                <span class="ml-2 inline-flex">{local.rightIcon}</span>
+            </Show>
+        </KButton>
+    );
+};