solid-element-ui 0.2.4 → 0.2.6

package/dist/{src/separator → separator}/separator.d.ts

@@ -13,10 +13,12 @@ declare const separatorStyles: import('tailwind-variants').TVReturnType<{
     };
     variant: {
         default: string;
-        muted: string;
         primary: string;
+        success: string;
+        warning: string;
+        danger: string;
     };
-}, undefined, "bg-slate-200 dark:bg-slate-800 shrink-0 transition-colors", {
+}, undefined, "bg-foreground shrink-0 transition-colors", {
     orientation: {
         horizontal: string;
         vertical: string;
@@ -28,8 +30,10 @@ declare const separatorStyles: import('tailwind-variants').TVReturnType<{
     };
     variant: {
         default: string;
-        muted: string;
         primary: string;
+        success: string;
+        warning: string;
+        danger: string;
     };
 }, undefined, import('tailwind-variants').TVReturnType<{
     orientation: {
@@ -43,10 +47,12 @@ declare const separatorStyles: import('tailwind-variants').TVReturnType<{
     };
     variant: {
         default: string;
-        muted: string;
         primary: string;
+        success: string;
+        warning: string;
+        danger: string;
     };
-}, undefined, "bg-slate-200 dark:bg-slate-800 shrink-0 transition-colors", unknown, unknown, undefined>>;
+}, undefined, "bg-foreground shrink-0 transition-colors", unknown, unknown, undefined>>;
 type SeparatorVariants = VariantProps<typeof separatorStyles>;
 export interface SeparatorProps extends ComponentProps<typeof KSeparator>, SeparatorVariants {
     class?: string;

package/dist/{src/skeleton → skeleton}/skeleton.d.ts

@@ -12,7 +12,7 @@ declare const skeletonStyles: import('tailwind-variants').TVReturnType<{
         wave: string;
         none: string;
     };
-}, undefined, "bg-slate-200 dark:bg-slate-800", {
+}, undefined, "bg-foreground", {
     variant: {
         rect: string;
         circle: string;
@@ -34,7 +34,7 @@ declare const skeletonStyles: import('tailwind-variants').TVReturnType<{
         wave: string;
         none: string;
     };
-}, undefined, "bg-slate-200 dark:bg-slate-800", unknown, unknown, undefined>>;
+}, undefined, "bg-foreground", unknown, unknown, undefined>>;
 type SkeletonVariants = VariantProps<typeof skeletonStyles>;
 export interface SkeletonProps extends Omit<ComponentProps<typeof KSkeleton>, "class" | "width" | "height">, SkeletonVariants {
     width?: string | number;

package/dist/{src/slider → slider}/slider.d.ts

@@ -11,6 +11,10 @@ declare const sliderStyles: import('tailwind-variants').TVReturnType<{
             fill: string;
             thumb: string;
         };
+        warning: {
+            fill: string;
+            thumb: string;
+        };
         success: {
             fill: string;
             thumb: string;
@@ -48,6 +52,10 @@ declare const sliderStyles: import('tailwind-variants').TVReturnType<{
             fill: string;
             thumb: string;
         };
+        warning: {
+            fill: string;
+            thumb: string;
+        };
         success: {
             fill: string;
             thumb: string;
@@ -85,6 +93,10 @@ declare const sliderStyles: import('tailwind-variants').TVReturnType<{
             fill: string;
             thumb: string;
         };
+        warning: {
+            fill: string;
+            thumb: string;
+        };
         success: {
             fill: string;
             thumb: string;

package/dist/{src/toast → toast}/toast.d.ts

@@ -87,5 +87,7 @@ export interface ToastProps extends Omit<ComponentProps<typeof KToast>, "class">
     class?: string;
 }
 export declare const ToastProvider: (props: ParentProps) => import("solid-js").JSX.Element;
-export declare const showToast: (props: Omit<ToastProps, "toastId">) => number;
+export declare const showToast: (props: Omit<ToastProps, "toastId">) => number | {
+    toastId: () => string;
+};
 export {};

package/dist/{src/toggle-button → toggle-button}/toggle-button.d.ts

@@ -5,7 +5,6 @@ declare const toggleStyles: import('tailwind-variants').TVReturnType<{
     variant: {
         solid: string;
         outline: string;
-        ghost: string;
     };
     size: {
         sm: string;
@@ -17,7 +16,6 @@ declare const toggleStyles: import('tailwind-variants').TVReturnType<{
     variant: {
         solid: string;
         outline: string;
-        ghost: string;
     };
     size: {
         sm: string;
@@ -29,7 +27,6 @@ declare const toggleStyles: import('tailwind-variants').TVReturnType<{
     variant: {
         solid: string;
         outline: string;
-        ghost: string;
     };
     size: {
         sm: string;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "solid-element-ui",
-    "version": "0.2.4",
+    "version": "0.2.6",
     "type": "module",
     "license": "MIT",
     "author": "sanguogege",
@@ -25,6 +25,7 @@
     },
     "files": [
         "dist",
+        "src",
         "README.md"
     ],
     "main": "./dist/index.js",
@@ -34,23 +35,26 @@
         ".": {
             "types": "./dist/index.d.ts",
             "solid": "./src/index.tsx",
-            "import": "./dist/index.js",
+            "import": {
+                "node": "./dist/index.js",
+                "default": "./dist/index.js"
+            },
+            "browser": "./dist/index.js",
             "default": "./dist/index.js"
         },
-        "./styles": "./src/index.css",
-        "./index.css": "./dist/index.css"
+        "./index.css": "./dist/global.css"
     },
     "source": "./src/index.tsx",
     "scripts": {
         "build": "tsc -b && vite build"
     },
     "peerDependencies": {
-        "solid-js": "^1.9.10"
+        "solid-js": "^1.9.11"
     },
     "dependencies": {
         "@kobalte/core": "^0.13.11",
-        "lucide-solid": "^0.562.0",
-        "tailwind-merge": "^3.4.0",
+        "lucide-solid": "^0.577.0",
+        "tailwind-merge": "^3.5.0",
         "tailwind-variants": "^3.2.2"
     },
     "devDependencies": {

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-foreground hover:bg-foreground/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,129 @@
+import { AlertDialog as KAlertDialog } from "@kobalte/core/alert-dialog";
+import {
+    splitProps,
+    type JSX,
+    type ComponentProps,
+    createSignal,
+} from "solid-js";
+import { tv } from "tailwind-variants";
+import { X } from "lucide-solid";
+import { Button } from "../button/button";
+
+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 | Promise<void>;
+}
+
+export const AlertDialog = (props: AlertDialogProps) => {
+    // 使用受控模式
+    const [isOpen, setIsOpen] = createSignal(false);
+    const [loading, setLoading] = createSignal(false);
+
+    const [local, others] = splitProps(props, [
+        "trigger",
+        "title",
+        "description",
+        "action",
+        "cancel",
+        "onConfirm",
+    ]);
+
+    const handleConfirm = async (e: MouseEvent) => {
+        // 阻止默认行为和冒泡，确保点击不会误触发 Kobalte 的内部关闭逻辑
+        e.preventDefault();
+        e.stopPropagation();
+
+        if (local.onConfirm) {
+            setLoading(true);
+            try {
+                await local.onConfirm();
+                // 只有逻辑成功执行后，才手动关闭
+                setIsOpen(false);
+            } catch (error) {
+                console.error("确认操作失败:", error);
+                // 报错时不关闭，让用户留在页面
+            } finally {
+                setLoading(false);
+            }
+        } else {
+            setIsOpen(false);
+        }
+    };
+
+    return (
+        <KAlertDialog {...others} open={isOpen()} onOpenChange={setIsOpen}>
+            <div onClick={() => setIsOpen(true)} class="inline-block">
+                {local.trigger}
+            </div>
+
+            <KAlertDialog.Portal>
+                <KAlertDialog.Overlay class={overlay()} />
+                <KAlertDialog.Content class={content()}>
+                    <div class={header()}>
+                        <KAlertDialog.Title class={title()}>
+                            {local.title}
+                        </KAlertDialog.Title>
+                        {/* 这里使用 CloseButton 是正确的，因为它专门负责“取消/关闭” */}
+                        <KAlertDialog.CloseButton class={closeButton()}>
+                            <X size={18} />
+                        </KAlertDialog.CloseButton>
+                    </div>
+
+                    <div class="mt-2">
+                        {local.description && (
+                            <KAlertDialog.Description class={description()}>
+                                {local.description}
+                            </KAlertDialog.Description>
+                        )}
+                    </div>
+
+                    <div class={footer()}>
+                        <KAlertDialog.CloseButton>
+                            {local.cancel || (
+                                <Button variant="outline">取消</Button>
+                            )}
+                        </KAlertDialog.CloseButton>
+                        <div onClick={handleConfirm}>
+                            {local.action || (
+                                <Button color="primary" loading={loading()}>
+                                    确认
+                                </Button>
+                            )}
+                        </div>
+                    </div>
+                </KAlertDialog.Content>
+            </KAlertDialog.Portal>
+        </KAlertDialog>
+    );
+};

package/src/badge/badge.tsx

@@ -0,0 +1,49 @@
+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 border-transparent px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none",
+        variants: {
+            variant: {
+                default: " bg-reversal-bg text-reversal",
+                secondary:
+                    "bg-foreground text-muted",
+                outline: "text-main border-light",
+                success:
+                    "bg-success/20 text-success ",
+                danger: "bg-danger/20 text-danger",
+            },
+        },
+        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>
+    );
+};