solid-element-ui 0.2.3 → 0.2.5

package/src/style/index.css

@@ -0,0 +1,150 @@
+@import "tailwindcss";
+
+/* --- 1. 先定义 CSS 变量 --- */
+@layer theme {
+    :root {
+        --primary: var(--color-blue-600);
+        --success: var(--color-green-600);
+        --warning: var(--color-orange-600);
+        --danger: var(--color-red-600);
+
+        --app-bg: #ffffff;
+        --app-text-reversal: #ffffff;
+        --app-text-main: var(--color-zinc-900);
+        --app-text-muted: var(--color-zinc-500);
+        --app-border: var(--color-zinc-500);
+        --app-ring: var(--color-zinc-400);
+        --container-header: var(--color-zinc-100);
+    }
+
+    [data-theme="dark"] {
+        --app-text-reversal: #000;
+        --app-bg: var(--color-zinc-950);
+        --app-text-main: var(--color-zinc-50);
+        --app-text-muted: var(--color-zinc-400);
+        --app-ring: var(--color-zinc-600);
+        --container-header: var(--color-zinc-900);
+    }
+
+    [data-theme="coffee"] {
+        --app-bg: #2c2420;
+        --app-text-main: #f3e5d8;
+        --app-ring: #8b5e3c;
+    }
+    
+    @keyframes accordion-down {
+        from {
+            height: 0;
+        }
+        to {
+            height: var(--kb-accordion-content-height);
+        }
+    }
+
+    @keyframes accordion-up {
+        from {
+            height: var(--kb-accordion-content-height);
+        }
+        to {
+            height: 0;
+        }
+    }
+
+    @keyframes fade-in {
+        from {
+            opacity: 0;
+        }
+        to {
+            opacity: 1;
+        }
+    }
+
+    @keyframes fade-out {
+        from {
+            opacity: 1;
+        }
+        to {
+            opacity: 0;
+        }
+    }
+
+    @keyframes collapsible-down {
+        from {
+            height: 0;
+        }
+        to {
+            height: var(--kb-collapsible-content-height);
+        }
+    }
+
+    @keyframes collapsible-up {
+        from {
+            height: var(--kb-collapsible-content-height);
+        }
+        to {
+            height: 0;
+        }
+    }
+
+    @keyframes slide-in {
+        from {
+            transform: translateX(calc(100% + var(--viewport-padding)));
+        }
+        to {
+            transform: translateX(0);
+        }
+    }
+
+    @keyframes hide {
+        from {
+            opacity: 1;
+        }
+        to {
+            opacity: 0;
+        }
+    }
+
+    @keyframes swipe-out {
+        from {
+            transform: translateX(var(--kb-toast-swipe-end-x));
+        }
+        to {
+            transform: translateX(calc(100% + var(--viewport-padding)));
+        }
+    }
+}
+
+/* --- 2. 注册到 Tailwind 主题系统 --- */
+@theme {
+    --color-primary: var(--primary);
+    --color-success: var(--success);
+    --color-warning: var(--warning);
+    --color-danger: var(--danger);
+    --color-reversal: var(--app-text-reversal);
+    --color-header: var(--container-header);
+    --color-app: var(--app-bg);
+    --color-main: var(--app-text-main);
+    --color-muted: var(--app-text-muted);
+    --color-base: var(--app-border);
+    --color-accent-ring: var(--app-ring);
+    --radius-app: 0.75rem;
+
+    /* 注册动画到主题 */
+    --animate-accordion-down: accordion-down 0.2s ease-out;
+    --animate-accordion-up: accordion-up 0.2s ease-out;
+
+    --animate-in: fade-in 0.2s ease-in;
+    --animate-out: fade-out 0.2s ease-out forwards;
+
+    --animate-collapsible-down: collapsible-down 0.2s ease-out;
+    --animate-collapsible-up: collapsible-up 0.2s ease-out;
+
+    --animate-slide-in: slide-in 150ms cubic-bezier(0.16, 1, 0.3, 1);
+    --animate-hide: hide 100ms ease-in;
+    --animate-swipe-out: swipe-out 100ms ease-out;
+
+    --viewport-padding: 16px;
+}
+
+/* --- 3. 暗色主题变体 --- */
+@custom-variant dark (&:where([data-theme="dark"], [data-theme="dark"] *));

package/src/switch/switch.tsx

@@ -0,0 +1,104 @@
+import { Switch as KSwitch } from "@kobalte/core/switch";
+import { splitProps, type ComponentProps, Show } from "solid-js";
+import { tv, type VariantProps } from "tailwind-variants";
+
+const switchStyles = tv(
+    {
+        slots: {
+            root: "inline-flex items-center gap-2 group",
+            control: [
+                "inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors",
+                "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2",
+                "disabled:cursor-not-allowed disabled:opacity-50",
+                "bg-slate-200 dark:bg-slate-800 data-[checked]:bg-blue-600 dark:data-[checked]:bg-blue-500",
+            ],
+            thumb: [
+                "pointer-events-none block h-5 w-5 rounded-full bg-white shadow-lg ring-0 transition-transform",
+                "data-[checked]:translate-x-5 translate-x-0",
+            ],
+            label: "text-sm font-medium leading-none group-data-[disabled]:opacity-70",
+            description: "text-xs text-slate-500 dark:text-slate-400",
+        },
+        variants: {
+            size: {
+                sm: {
+                    control: "h-5 w-9",
+                    thumb: "h-4 w-4 data-[checked]:translate-x-4",
+                },
+                md: {
+                    control: "h-6 w-11",
+                    thumb: "h-5 w-5 data-[checked]:translate-x-5",
+                },
+                lg: {
+                    control: "h-7 w-13",
+                    thumb: "h-6 w-6 data-[checked]:translate-x-6",
+                },
+            },
+            variant: {
+                primary: {
+                    control:
+                        "data-[checked]:bg-blue-600 dark:data-[checked]:bg-blue-500",
+                },
+                success: {
+                    control:
+                        "data-[checked]:bg-emerald-600 dark:data-[checked]:bg-emerald-500",
+                },
+                danger: {
+                    control:
+                        "data-[checked]:bg-red-600 dark:data-[checked]:bg-red-500",
+                },
+            },
+        },
+        defaultVariants: {
+            size: "md",
+            variant: "primary",
+        },
+    },
+    {
+        twMerge: true,
+    },
+);
+
+type SwitchVariants = VariantProps<typeof switchStyles>;
+
+export interface SwitchProps
+    extends Omit<ComponentProps<typeof KSwitch>, "class">,
+        SwitchVariants {
+    label?: string;
+    description?: string;
+    class?: string;
+}
+
+export const Switch = (props: SwitchProps) => {
+    const [local, variantProps, others] = splitProps(
+        props,
+        ["label", "description", "class"],
+        ["size", "variant"]
+    );
+
+    const styles = switchStyles(variantProps);
+
+    return (
+        <KSwitch class={styles.root({ class: local.class })} {...others}>
+            <KSwitch.Input />
+            <KSwitch.Control class={styles.control()}>
+                <KSwitch.Thumb class={styles.thumb()} />
+            </KSwitch.Control>
+
+            <Show when={local.label || local.description}>
+                <div class="flex flex-col gap-0.5">
+                    <Show when={local.label}>
+                        <KSwitch.Label class={styles.label()}>
+                            {local.label}
+                        </KSwitch.Label>
+                    </Show>
+                    <Show when={local.description}>
+                        <KSwitch.Description class={styles.description()}>
+                            {local.description}
+                        </KSwitch.Description>
+                    </Show>
+                </div>
+            </Show>
+        </KSwitch>
+    );
+};

package/src/tabs/tabs.tsx

@@ -0,0 +1,73 @@
+import { Tabs as KTabs } from "@kobalte/core/tabs";
+import { splitProps, type JSX, For } from "solid-js";
+import { tv } from "tailwind-variants";
+
+const tabsStyles = tv(
+    {
+        slots: {
+            root: "flex flex-col w-full",
+            list: "relative flex items-center border-b border-zinc-200 dark:border-zinc-800",
+            trigger: [
+                "relative flex h-9 items-center justify-center px-4 text-sm font-medium transition-colors outline-none select-none cursor-pointer",
+                "text-zinc-500 hover:text-zinc-700 dark:text-zinc-400 dark:hover:text-zinc-200",
+                "data-[selected]:text-zinc-950 dark:data-[selected]:text-zinc-50",
+            ],
+            indicator:
+                "absolute bottom-[-1px] h-0.5 bg-zinc-950 dark:bg-zinc-50 transition-all duration-200",
+            content:
+                "mt-4 text-sm text-zinc-600 dark:text-zinc-400 focus-visible:outline-none",
+        },
+    },
+    {
+        twMerge: true,
+    },
+);
+
+const { root, list, trigger, indicator, content } = tabsStyles();
+
+export type TabItem = {
+    value: string;
+    label: string | JSX.Element;
+    content: JSX.Element;
+    disabled?: boolean;
+};
+
+interface TabsProps {
+    items: TabItem[];
+    defaultValue?: string;
+    value?: string;
+    onValueChange?: (value: string) => void;
+    orientation?: "horizontal" | "vertical";
+    class?: string;
+}
+
+export const Tabs = (props: TabsProps) => {
+    const [local, others] = splitProps(props, ["items", "class"]);
+
+    return (
+        <KTabs class={root({ class: local.class })} {...others}>
+            <KTabs.List class={list()}>
+                <For each={local.items}>
+                    {(item) => (
+                        <KTabs.Trigger
+                            class={trigger()}
+                            value={item.value}
+                            disabled={item.disabled}
+                        >
+                            {item.label}
+                        </KTabs.Trigger>
+                    )}
+                </For>
+                <KTabs.Indicator class={indicator()} />
+            </KTabs.List>
+
+            <For each={local.items}>
+                {(item) => (
+                    <KTabs.Content class={content()} value={item.value}>
+                        {item.content}
+                    </KTabs.Content>
+                )}
+            </For>
+        </KTabs>
+    );
+};

package/src/text-field/text-field.tsx

@@ -0,0 +1,97 @@
+import { TextField as KTextField } from "@kobalte/core/text-field";
+import { splitProps, type ComponentProps, Show } from "solid-js";
+import { tv, type VariantProps } from "tailwind-variants";
+
+const textFieldStyles = tv(
+    {
+        slots: {
+            root: "flex flex-col gap-1.5 w-full",
+            label: "text-sm font-medium text-slate-700 dark:text-slate-300 peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
+            input: [
+                "flex h-10 w-full rounded-md border border-slate-200 bg-white px-3 py-2 text-sm transition-shadow",
+                "ring-offset-white file:border-0 file:bg-transparent file:text-sm file:font-medium",
+                "placeholder:text-slate-500 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500",
+                "disabled:cursor-not-allowed disabled:opacity-50 dark:border-slate-800 dark:bg-slate-950",
+                "data-[invalid]:border-red-500 data-[invalid]:focus-visible:ring-red-500",
+            ],
+            description: "text-xs text-slate-500 dark:text-slate-400",
+            errorMessage:
+                "text-xs text-red-500 animate-in fade-in-50 slide-in-from-top-1",
+        },
+        variants: {
+            size: {
+                sm: { input: "h-8 px-2 text-xs" },
+                md: { input: "h-10 px-3 text-sm" },
+                lg: { input: "h-12 px-4 text-base" },
+            },
+        },
+        defaultVariants: {
+            size: "md",
+        },
+    },
+    {
+        twMerge: true,
+    },
+);
+
+type TextFieldVariants = VariantProps<typeof textFieldStyles>;
+
+export interface TextFieldProps
+    extends Omit<ComponentProps<typeof KTextField>, "class">,
+        TextFieldVariants {
+    label?: string;
+    description?: string;
+    errorMessage?: string;
+    placeholder?: string;
+    type?: string;
+    class?: string;
+}
+
+export const TextField = (props: TextFieldProps) => {
+    const [local, variantProps, others] = splitProps(
+        props,
+        [
+            "label",
+            "description",
+            "errorMessage",
+            "placeholder",
+            "type",
+            "class",
+        ],
+        ["size"]
+    );
+
+    const styles = textFieldStyles(variantProps);
+
+    return (
+        <KTextField
+            class={styles.root({ class: local.class })}
+            validationState={local.errorMessage ? "invalid" : "valid"}
+            {...others}
+        >
+            <Show when={local.label}>
+                <KTextField.Label class={styles.label()}>
+                    {local.label}
+                </KTextField.Label>
+            </Show>
+
+            <KTextField.Input
+                class={styles.input()}
+                type={local.type}
+                placeholder={local.placeholder}
+            />
+
+            <Show when={local.description}>
+                <KTextField.Description class={styles.description()}>
+                    {local.description}
+                </KTextField.Description>
+            </Show>
+
+            <Show when={local.errorMessage}>
+                <KTextField.ErrorMessage class={styles.errorMessage()}>
+                    {local.errorMessage}
+                </KTextField.ErrorMessage>
+            </Show>
+        </KTextField>
+    );
+};

package/src/time-field/time-field.tsx

@@ -0,0 +1,103 @@
+// import { TimeField as KTimeField } from "@kobalte/core/time-field";
+// import { splitProps, For, type ComponentProps, Show } from "solid-js";
+// import { tv, type VariantProps } from "tailwind-variants";
+
+// const timeFieldStyles = tv({
+//     slots: {
+//         root: "flex flex-col gap-1.5 w-full",
+//         label: "text-sm font-medium text-slate-700 dark:text-slate-300 peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
+//         control: [
+//             "flex h-10 w-full rounded-md border border-slate-200 bg-white px-3 py-2 text-sm transition-shadow",
+//             "focus-within:ring-2 focus-within:ring-blue-500 focus-within:ring-offset-2",
+//             "disabled:cursor-not-allowed disabled:opacity-50 dark:border-slate-800 dark:bg-slate-950",
+//             "data-[invalid]:border-red-500 data-[invalid]:focus-within:ring-red-500",
+//         ],
+//         segment: [
+//             "inline rounded-sm px-0.5 tabular-nums outline-none transition-colors",
+//             "focus:bg-blue-600 focus:text-white dark:focus:bg-blue-500",
+//             "data-[placeholder]:text-slate-400 data-[type=literal]:px-0",
+//         ],
+//         description: "text-xs text-slate-500 dark:text-slate-400",
+//         errorMessage: "text-xs text-red-500",
+//     },
+//     variants: {
+//         size: {
+//             sm: { control: "h-8 px-2 text-xs" },
+//             md: { control: "h-10 px-3 text-sm" },
+//             lg: { control: "h-12 px-4 text-base" },
+//         },
+//     },
+//     defaultVariants: {
+//         size: "md",
+//     },
+// });
+
+// type TimeFieldVariants = VariantProps<typeof timeFieldStyles>;
+
+// export interface TimeFieldProps
+//     extends Omit<ComponentProps<typeof KTimeField>, "class">,
+//         TimeFieldVariants {
+//     label?: string;
+//     description?: string;
+//     errorMessage?: string;
+//     class?: string;
+// }
+
+// export const TimeField = (props: TimeFieldProps) => {
+//     const [local, variantProps, others] = splitProps(
+//         props,
+//         ["label", "description", "errorMessage", "class"],
+//         ["size"]
+//     );
+
+//     const styles = timeFieldStyles(variantProps);
+
+//     return (
+//         <KTimeField
+//             class={styles.root({ class: local.class })}
+//             validationState={local.errorMessage ? "invalid" : "valid"}
+//             {...others}
+//         >
+//             <Show when={local.label}>
+//                 <KTimeField.Label class={styles.label()}>
+//                     {local.label}
+//                 </KTimeField.Label>
+//             </Show>
+
+//             <KTimeField.Input class={styles.control()}>
+//                 <For
+//                     each={
+//                         others.value
+//                             ? []
+//                             : [1] /* 仅作为占位，Kobalte 内部会自动处理内容 */
+//                     }
+//                 >
+//                     {() => <KTimeField.Segment class={styles.segment()} />}
+//                 </For>
+//                 {/* 注意：通常情况下，直接在 Input 内部放置 Segment 映射即可 */}
+//                 {(state) => (
+//                     <For each={state.segments()}>
+//                         {(segment) => (
+//                             <KTimeField.Segment
+//                                 segment={segment}
+//                                 class={styles.segment()}
+//                             />
+//                         )}
+//                     </For>
+//                 )}
+//             </KTimeField.Input>
+
+//             <Show when={local.description}>
+//                 <KTimeField.Description class={styles.description()}>
+//                     {local.description}
+//                 </KTimeField.Description>
+//             </Show>
+
+//             <Show when={local.errorMessage}>
+//                 <KTimeField.ErrorMessage class={styles.errorMessage()}>
+//                     {local.errorMessage}
+//                 </KTimeField.ErrorMessage>
+//             </Show>
+//         </KTimeField>
+//     );
+// };

package/src/toast/toast.tsx

@@ -0,0 +1,128 @@
+import { Toast as KToast, toaster } from "@kobalte/core/toast";
+import {
+    splitProps,
+    type ComponentProps,
+    Show,
+    type ParentProps,
+} from "solid-js";
+import { tv, type VariantProps } from "tailwind-variants";
+import { X, CircleCheck, CircleAlert, Info, TriangleAlert } from "lucide-solid";
+
+const toastStyles = tv(
+    {
+        slots: {
+            root: [
+                "group relative flex w-[400px] items-start justify-between space-x-4 overflow-hidden rounded-md border p-4 pr-8 shadow-lg transition-all",
+                "data-[opened]:animate-slide-in",
+                "data-[closed]:animate-hide",
+
+                // 滑动手势处理
+                "data-[swipe=move]:translate-x-[--kb-toast-swipe-move-x]",
+                "data-[swipe=cancel]:translate-x-0 data-[swipe=cancel]:transition-transform data-[swipe=cancel]:duration-200 data-[swipe=cancel]:ease-out",
+                "data-[swipe=end]:animate-swipe-out",
+            ],
+            title: "text-sm font-semibold",
+            description: "text-xs opacity-90 leading-relaxed",
+            closeButton: [
+                "absolute right-2 top-2 rounded-md p-1 text-slate-500 opacity-0 transition-opacity hover:text-slate-900",
+                "focus:opacity-100 focus:outline-none focus:ring-2 group-hover:opacity-100 dark:text-slate-400 dark:hover:text-slate-50",
+            ],
+            content: "flex flex-col gap-1 flex-1",
+            icon: "h-5 w-5 shrink-0 mt-0.5", // 稍微下移一点对齐文字
+        },
+        variants: {
+            variant: {
+                info: {
+                    root: "bg-white border-slate-200 text-slate-950 dark:bg-slate-950 dark:border-slate-800 dark:text-slate-50",
+                    icon: "text-blue-500",
+                },
+                success: {
+                    root: "bg-emerald-50 border-emerald-200 text-emerald-900 dark:bg-emerald-950 dark:border-emerald-900 dark:text-emerald-50",
+                    icon: "text-emerald-500",
+                },
+                warning: {
+                    root: "bg-amber-50 border-amber-200 text-amber-900 dark:bg-amber-950 dark:border-amber-900 dark:text-amber-50",
+                    icon: "text-amber-500",
+                },
+                error: {
+                    root: "bg-red-50 border-red-200 text-red-900 dark:bg-red-950 dark:border-red-900 dark:text-red-50",
+                    icon: "text-red-500",
+                },
+            },
+        },
+        defaultVariants: { variant: "info" },
+    },
+    {
+        twMerge: true,
+    },
+);
+
+type ToastVariants = VariantProps<typeof toastStyles>;
+
+export interface ToastProps
+    extends Omit<ComponentProps<typeof KToast>, "class">, ToastVariants {
+    title?: string;
+    description?: string;
+    class?: string;
+}
+
+const iconMap = {
+    info: Info,
+    success: CircleCheck,
+    warning: TriangleAlert,
+    error: CircleAlert,
+} as const; // 使用 const 断言增强类型推导
+
+// 优化：允许包裹 Children，这样在 App.tsx 顶层包裹即可
+export const ToastProvider = (props: ParentProps) => {
+    return (
+        <>
+            {props.children}
+            <KToast.Region>
+                <KToast.List class="fixed bottom-4 right-4 z-100 flex flex-col gap-3 w-full max-w-100 outline-none" />
+            </KToast.Region>
+        </>
+    );
+};
+
+const Toast = (props: ToastProps) => {
+    const [local, variantProps, others] = splitProps(
+        props,
+        ["title", "description", "class", "toastId"],
+        ["variant"]
+    );
+
+    const { root, icon, content, title, description, closeButton } =
+        toastStyles(variantProps);
+    // 显式回退到 info，确保 Icon 组件始终存在
+    const Icon = iconMap[variantProps.variant ?? "info"];
+
+    return (
+        <KToast
+            toastId={local.toastId}
+            class={root({ class: local.class })}
+            {...others}
+        >
+            <Icon class={icon()} />
+            <div class={content()}>
+                <Show when={local.title}>
+                    <KToast.Title class={title()}>
+                        {local.title}
+                    </KToast.Title>
+                </Show>
+                <Show when={local.description}>
+                    <KToast.Description class={description()}>
+                        {local.description}
+                    </KToast.Description>
+                </Show>
+            </div>
+            <KToast.CloseButton class={closeButton()}>
+                <X size={16} />
+            </KToast.CloseButton>
+        </KToast>
+    );
+};
+
+export const showToast = (props: Omit<ToastProps, "toastId">) => {
+    return toaster.show((data) => <Toast toastId={data.toastId} {...props} />);
+};