solid-element-ui 0.2.4 → 0.2.6

package/src/separator/separator.tsx

@@ -0,0 +1,64 @@
+import { Separator as KSeparator } from "@kobalte/core/separator";
+import { splitProps, type ComponentProps } from "solid-js";
+import { tv, type VariantProps } from "tailwind-variants";
+
+const separatorStyles = tv(
+    {
+        base: "bg-foreground shrink-0 transition-colors",
+        variants: {
+            orientation: {
+                horizontal: "h-[1px] w-full my-4",
+                vertical: "h-full w-[1px] mx-4",
+            },
+            thickness: {
+                thin: "", // 默认 1px
+                medium: "data-[orientation=horizontal]:h-[2px] data-[orientation=vertical]:w-[2px]",
+                thick: "data-[orientation=horizontal]:h-[4px] data-[orientation=vertical]:w-[4px] rounded-full",
+            },
+            variant: {
+                default: "bg-foreground",
+                primary: "bg-primary",
+                success: "bg-success",
+                warning: "bg-warning",
+                danger: "bg-danger",
+            },
+        },
+        defaultVariants: {
+            orientation: "horizontal",
+            thickness: "thin",
+            variant: "default",
+        },
+    },
+    {
+        twMerge: true,
+    },
+);
+
+type SeparatorVariants = VariantProps<typeof separatorStyles>;
+
+export interface SeparatorProps
+    extends ComponentProps<typeof KSeparator>,
+        SeparatorVariants {
+    class?: string;
+}
+
+export const Separator = (props: SeparatorProps) => {
+    const [local, variantProps, others] = splitProps(
+        props,
+        ["class"],
+        ["orientation", "thickness", "variant"]
+    );
+
+    return (
+        <KSeparator
+            class={separatorStyles({
+                orientation: variantProps.orientation,
+                thickness: variantProps.thickness,
+                variant: variantProps.variant,
+                class: local.class,
+            })}
+            orientation={variantProps.orientation}
+            {...others}
+        />
+    );
+};

package/src/skeleton/skeleton.tsx

@@ -0,0 +1,73 @@
+import { Skeleton as KSkeleton } from "@kobalte/core/skeleton";
+import { splitProps, type ComponentProps } from "solid-js";
+import { tv, type VariantProps } from "tailwind-variants";
+
+const skeletonStyles = tv(
+    {
+        base: "bg-foreground",
+        variants: {
+            variant: {
+                rect: "rounded-md",
+                circle: "rounded-full",
+                text: "rounded h-3 w-full",
+            },
+            animation: {
+                pulse: "animate-pulse",
+                wave: "relative overflow-hidden before:absolute before:inset-0 before:-translate-x-full before:animate-[wave_2s_linear_infinite] before:bg-gradient-to-r before:from-transparent before:via-white/20 before:to-transparent",
+                none: "",
+            },
+        },
+        defaultVariants: {
+            variant: "rect",
+            animation: "pulse",
+        },
+    },
+    {
+        twMerge: true,
+    },
+);
+
+type SkeletonVariants = VariantProps<typeof skeletonStyles>;
+
+// 核心修正：使用 Omit 排除掉冲突的 width 和 height
+export interface SkeletonProps
+    extends Omit<
+            ComponentProps<typeof KSkeleton>,
+            "class" | "width" | "height"
+        >,
+        SkeletonVariants {
+    width?: string | number;
+    height?: string | number;
+    class?: string;
+}
+
+export const Skeleton = (props: SkeletonProps) => {
+    // 显式提取这些属性，避免传给 KSkeleton 引起类型或运行时错误
+    const [local, variantProps, others] = splitProps(
+        props,
+        ["class", "width", "height", "style"],
+        ["variant", "animation"]
+    );
+
+    const mergedStyle = () => ({
+        width:
+            typeof local.width === "number" ? `${local.width}px` : local.width,
+        height:
+            typeof local.height === "number"
+                ? `${local.height}px`
+                : local.height,
+        ...(typeof local.style === "object" ? local.style : {}),
+    });
+
+    return (
+        <KSkeleton
+            class={skeletonStyles({
+                variant: variantProps.variant,
+                animation: variantProps.animation,
+                class: local.class,
+            })}
+            style={mergedStyle()}
+            {...others}
+        />
+    );
+};

package/src/slider/slider.tsx

@@ -0,0 +1,94 @@
+import { Slider as KSlider } from "@kobalte/core/slider";
+import { splitProps, type ComponentProps, For, Show } from "solid-js";
+import { tv, type VariantProps } from "tailwind-variants";
+
+// FIXME 点击轨道时报错
+
+const sliderStyles = tv(
+    {
+        slots: {
+            root: "relative flex flex-col items-center select-none touch-none w-full gap-2",
+            labelWrapper: "flex w-full justify-between items-center",
+            label: "text-sm font-medium text-muted",
+            value: "text-sm text-muted font-mono",
+            track: "relative h-2 w-full grow rounded-full bg-foreground",
+            fill: "absolute h-full rounded-full ",
+            thumb: [
+                "block h-5 w-5 rounded-full border-2 bg-app ring-offset-white transition-colors",
+                "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-400 focus-visible:ring-offset-2",
+                "disabled:pointer-events-none disabled:opacity-50 hover:scale-110 active:scale-95 transition-transform",
+            ],
+        },
+        variants: {
+            variant: {
+                default: { fill: "bg-primary", thumb: "border-primary" },
+                danger: { fill: "bg-danger", thumb: "border-danger" },
+                warning: { fill: "bg-warning", thumb: "border-warning" },
+                success: {
+                    fill: "bg-success",
+                    thumb: "border-success",
+                },
+            },
+            size: {
+                sm: { track: "h-1", thumb: "h-4 w-4" },
+                md: { track: "h-2", thumb: "h-5 w-5" },
+                lg: { track: "h-3", thumb: "h-6 w-6" },
+            },
+        },
+        defaultVariants: {
+            variant: "default",
+            size: "md",
+        },
+    },
+    {
+        twMerge: true,
+    },
+);
+
+type SliderVariants = VariantProps<typeof sliderStyles>;
+
+export interface SliderProps
+    extends Omit<ComponentProps<typeof KSlider>, "class">,
+        SliderVariants {
+    label?: string;
+    showValue?: boolean;
+    class?: string;
+}
+
+export const Slider = (props: SliderProps) => {
+    const [local, variantProps, others] = splitProps(
+        props,
+        ["label", "showValue", "class"],
+        ["variant", "size"]
+    );
+
+    const styles = sliderStyles(variantProps);
+
+    return (
+        <KSlider class={styles.root({ class: local.class })} {...others}>
+            <Show when={local.label || local.showValue}>
+                <div class={styles.labelWrapper()}>
+                    <Show when={local.label}>
+                        <KSlider.Label class={styles.label()}>
+                            {local.label}
+                        </KSlider.Label>
+                    </Show>
+                    <Show when={local.showValue}>
+                        <KSlider.ValueLabel class={styles.value()} />
+                    </Show>
+                </div>
+            </Show>
+
+            <KSlider.Track class={styles.track()}>
+                <KSlider.Fill class={styles.fill()} />
+                <For each={others.value ?? [others.defaultValue]}>
+                    {() => (
+                        <KSlider.Thumb class={styles.thumb()}>
+                            <KSlider.Input />
+                        </KSlider.Thumb>
+                    )}
+                </For>
+            </KSlider.Track>
+        </KSlider>
+    );
+};

package/src/style/global.css

@@ -0,0 +1,156 @@
+@import "tailwindcss";
+
+@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: var(--color-white); /* 应用背景色 */
+        --app-bg-reversal: var(--color-zinc-900); /* 应用反转背景色 */
+        --app-foreground: var(--color-zinc-100); /* 应用前景色 */
+
+
+        --app-text-main: var(--color-zinc-950); /* 应用主文字色 */
+        --app-text-muted: var(--color-zinc-600); /* 应用次级文字色*/
+        --app-border: var(--color-zinc-500); /* 应用边框色*/
+        --app-border-light: var(--color-zinc-300); /* 应用浅边框色 */
+        --app-ring: var(--color-zinc-300);
+        --app-text-reversal: var(--color-zinc-100); /* 应用反转文字色 */
+    }
+
+    [data-theme="dark"] {
+        --app-text-reversal: var(--color-zinc-950);
+        --app-bg-reversal: var(--color-zinc-50);
+        --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);
+        --app-foreground: 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-app: var(--app-bg);
+    --color-foreground: var(--app-foreground);
+    --color-reversal-bg: var(--app-bg-reversal);
+    --color-main: var(--app-text-main);
+    --color-muted: var(--app-text-muted);
+    --color-reversal: var(--app-text-reversal);
+    --color-base: var(--app-border);
+    --color-light: var(--app-border-light);
+    --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-primary focus-visible:ring-offset-2",
+                "disabled:cursor-not-allowed disabled:opacity-50",
+                "bg-foreground data-[checked]:bg-primary",
+            ],
+            thumb: [
+                "pointer-events-none block h-5 w-5 rounded-full bg-app 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-muted",
+        },
+        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-primary",
+                },
+                success: {
+                    control:
+                        "data-[checked]:bg-success",
+                },
+                danger: {
+                    control:
+                        "data-[checked]:bg-danger",
+                },
+            },
+        },
+        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-base",
+            trigger: [
+                "relative flex h-9 items-center justify-center px-4 text-sm font-medium transition-colors outline-none select-none cursor-pointer",
+                "text-muted hover:text-muted/80 ",
+                "data-[selected]:text-main",
+            ],
+            indicator:
+                "absolute bottom-[-1px] h-0.5 bg-reversal-bg transition-all duration-200",
+            content:
+                "mt-4 text-sm text-main 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-muted peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
+            input: [
+                "flex h-10 w-full rounded-md border border-light bg-app px-3 py-2 text-sm transition-shadow text-main",
+                "ring-offset-white file:border-0 file:bg-transparent file:text-sm file:font-medium",
+                "placeholder:text-muted/40 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-primary",
+                "disabled:cursor-not-allowed disabled:opacity-50",
+                "data-[invalid]:border-danger data-[invalid]:focus-visible:ring-danger",
+            ],
+            description: "text-xs text-muted",
+            errorMessage:
+                "text-xs text-danger 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>
+    );
+};