solid-element-ui 0.2.3 → 0.2.5

package/src/search/search.tsx

@@ -0,0 +1,99 @@
+import { TextField as KSearch } from "@kobalte/core/text-field";
+import { splitProps, type ComponentProps, Show } from "solid-js";
+import { tv, type VariantProps } from "tailwind-variants";
+import { Search as SearchIcon, CircleX } from "lucide-solid";
+
+const searchStyles = tv(
+    {
+        slots: {
+            root: "relative flex flex-col gap-1.5 w-full",
+            inputWrapper: "relative flex items-center transition-all",
+            input: [
+                "flex h-10 w-full rounded-md border border-slate-200 bg-white px-9 py-2 text-sm",
+                "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",
+                "disabled:cursor-not-allowed disabled:opacity-50 dark:border-slate-800 dark:bg-slate-950",
+            ],
+            icon: "absolute left-3 h-4 w-4 text-slate-500 pointer-events-none",
+            clear: "absolute right-3 h-4 w-4 text-slate-400 hover:text-slate-600 cursor-pointer transition-colors",
+        },
+        variants: {
+            size: {
+                sm: {
+                    input: "h-8 text-xs px-8",
+                    icon: "h-3.5 w-3.5",
+                    clear: "h-3.5 w-3.5",
+                },
+                md: {
+                    input: "h-10 text-sm",
+                    icon: "h-4 w-4",
+                    clear: "h-4 w-4",
+                },
+                lg: {
+                    input: "h-12 text-base px-10",
+                    icon: "h-5 w-5",
+                    clear: "h-5 w-5",
+                },
+            },
+            ringColor: {
+                primary: { input: "focus-visible:ring-blue-500" },
+                danger: { input: "focus-visible:ring-red-500" },
+            },
+        },
+        defaultVariants: {
+            size: "md",
+            ringColor: "primary",
+        },
+    },
+    {
+        twMerge: true,
+    },
+);
+
+type SearchVariants = VariantProps<typeof searchStyles>;
+
+export interface SearchProps
+    extends Omit<ComponentProps<typeof KSearch>, "class">, SearchVariants {
+    class?: string;
+    placeholder?: string;
+    allowClear?: boolean;
+    onClear?: () => void;
+}
+
+export const Search = (props: SearchProps) => {
+    const [local, variantProps, others] = splitProps(
+        props,
+        ["class", "placeholder", "allowClear", "onClear", "value", "onChange"],
+        ["size", "ringColor"],
+    );
+
+    const styles = searchStyles(variantProps);
+
+    return (
+        <KSearch
+            class={styles.root({ class: local.class })}
+            value={local.value}
+            onChange={local.onChange}
+            {...others}
+        >
+            <div class={styles.inputWrapper()}>
+                <SearchIcon class={styles.icon()} />
+                <KSearch.Input
+                    class={styles.input()}
+                    placeholder={local.placeholder ?? "搜索..."}
+                />
+                <Show when={local.allowClear && local.value}>
+                    <button
+                        onClick={() => local.onClear?.()}
+                        class={styles.clear()}
+                    >
+                        <CircleX
+                            fill="currentColor"
+                            class="text-white dark:text-slate-950"
+                        />
+                    </button>
+                </Show>
+            </div>
+        </KSearch>
+    );
+};

package/src/segmented-control/segmented-control.tsx

@@ -0,0 +1,92 @@
+import { SegmentedControl as KSegmented } from "@kobalte/core/segmented-control";
+import { splitProps, For, type ComponentProps } from "solid-js";
+import { tv, type VariantProps } from "tailwind-variants";
+
+// FIXME 样式问题
+
+const segmentedStyles = tv(
+    {
+        slots: {
+            root: "relative flex flex-col",
+            container:
+                "relative flex items-center w-full rounded-lg bg-slate-100 p-1 text-slate-500 dark:bg-slate-800 dark:text-slate-400",
+            item: [
+                " z-10 inline-flex flex-1 items-center justify-center whitespace-nowrap rounded-md px-3 py-1.5 text-sm font-medium transition-all cursor-pointer",
+                "outline-none focus-visible:ring-2 focus-visible:ring-slate-400 focus-visible:ring-offset-2",
+                "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+                "data-[checked]:text-slate-950 dark:data-[checked]:text-slate-50 transition-colors duration-200",
+            ],
+            indicator:
+                "absolute z-0 bg-white shadow-sm rounded-md transition-all duration-200 ease-in-out dark:bg-slate-950",
+            label: "mb-2 text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
+            itemLabel: "flex w-full cursor-pointer items-center justify-center",
+        },
+        variants: {
+            size: {
+                sm: { root: "p-0.5", item: "px-2 py-1 text-xs" },
+                md: { root: "p-1", item: "px-3 py-1.5 text-sm" },
+                lg: { root: "p-1.5", item: "px-6 py-2 text-base" },
+            },
+        },
+        defaultVariants: {
+            size: "md",
+        },
+    },
+    {
+        twMerge: true,
+    },
+);
+
+type SegmentedVariants = VariantProps<typeof segmentedStyles>;
+
+interface Option {
+    label: string;
+    value: string;
+    disabled?: boolean;
+}
+
+export interface SegmentedControlProps
+    extends
+        Omit<ComponentProps<typeof KSegmented>, "class">,
+        SegmentedVariants {
+    options: Option[];
+    label?: string;
+    class?: string;
+}
+
+export const SegmentedControl = (props: SegmentedControlProps) => {
+    const [local, variantProps, others] = splitProps(
+        props,
+        ["options", "class", "label"],
+        ["size"],
+    );
+
+    const styles = segmentedStyles(variantProps);
+
+    return (
+        <KSegmented class={styles.root({ class: local.class })} {...others}>
+            {local.label && (
+                <KSegmented.Label class={styles.label()}>
+                    {local.label}
+                </KSegmented.Label>
+            )}
+            <div class={styles.container()}>
+                <For each={local.options}>
+                    {(option) => (
+                        <KSegmented.Item
+                            value={option.value}
+                            disabled={option.disabled}
+                            class={styles.item()}
+                        >
+                            <KSegmented.ItemInput />
+                            <KSegmented.ItemLabel class={styles.itemLabel()}>
+                                {option.label}
+                            </KSegmented.ItemLabel>
+                        </KSegmented.Item>
+                    )}
+                </For>
+                <KSegmented.Indicator class={styles.indicator()} />
+            </div>
+        </KSegmented>
+    );
+};

package/src/select/select.tsx

@@ -0,0 +1,164 @@
+import { Select as KSelect } from "@kobalte/core/select";
+import { splitProps, Show, createMemo } from "solid-js";
+import { tv, type VariantProps } from "tailwind-variants";
+import { ChevronDown, Check } from "lucide-solid";
+
+const selectStyles = tv(
+    {
+        slots: {
+            root: "flex flex-col gap-1.5 w-full",
+            label: "text-sm font-medium text-slate-700 dark:text-slate-300",
+            trigger: [
+                "flex h-10 w-full items-center justify-between rounded-md border border-slate-200 bg-white px-3 py-2 text-sm",
+                "ring-offset-white placeholder:text-slate-500 focus:outline-none focus:ring-2 focus:ring-blue-500",
+                "disabled:cursor-not-allowed disabled:opacity-50 dark:border-slate-800 dark:bg-slate-950",
+            ],
+            content: [
+                "relative z-50 min-w-[8rem] overflow-hidden rounded-md border border-slate-200 bg-white text-slate-950 shadow-md",
+                "data-[expanded]:animate-in data-[closed]:animate-out dark:border-slate-800 dark:bg-slate-950 dark:text-slate-50",
+            ],
+            listbox: "p-1",
+            item: [
+                "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none",
+                "focus:bg-slate-100 focus:text-slate-900 data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+                "dark:focus:bg-slate-800 dark:focus:text-slate-50",
+            ],
+            itemIndicator:
+                "absolute left-2 flex h-3.5 w-3.5 items-center justify-center",
+            description: "text-xs text-slate-500 dark:text-slate-400",
+        },
+        variants: {
+            size: {
+                sm: { trigger: "h-8 text-xs", item: "py-1 text-xs" },
+                md: { trigger: "h-10 text-sm", item: "py-1.5 text-sm" },
+                lg: { trigger: "h-12 text-base", item: "py-2 text-base" },
+            },
+        },
+        defaultVariants: {
+            size: "md",
+        },
+    },
+    {
+        twMerge: true,
+    },
+);
+
+type SelectVariants = VariantProps<typeof selectStyles>;
+
+interface Option {
+    label: string;
+    value: string;
+    disabled?: boolean;
+}
+
+// 重新定义接口，使 value 和 onChange 处理的是 string 类型
+export interface SelectProps extends SelectVariants {
+    options: Option[];
+    value?: string;
+    defaultValue?: string;
+    onChange?: (value: string) => void;
+    label?: string;
+    description?: string;
+    placeholder?: string;
+    disabled?: boolean;
+    name?: string;
+    class?: string;
+}
+
+export const Select = (props: SelectProps) => {
+    const [local, variantProps, others] = splitProps(
+        props,
+        [
+            "options",
+            "label",
+            "description",
+            "placeholder",
+            "class",
+            "value",
+            "defaultValue",
+            "onChange",
+        ],
+        ["size"],
+    );
+
+    const styles = selectStyles(variantProps);
+
+    const selectedOption = createMemo(() => {
+        if (local.value === undefined) return undefined;
+        return local.options.find((opt) => opt.value === local.value);
+    });
+
+    const defaultOption = createMemo(() => {
+        if (local.defaultValue === undefined) return undefined;
+        return local.options.find((opt) => opt.value === local.defaultValue);
+    });
+
+    const handleValueChange = (opt: Option | null) => {
+        if (opt === null) {
+           
+            local.onChange?.("");
+            return;
+        }
+        local.onChange?.(opt.value);
+    };
+
+    return (
+        <KSelect<Option>
+            multiple={false}
+            options={local.options}
+            optionValue="value"
+            optionTextValue="label"
+            optionDisabled="disabled"
+            placeholder={local.placeholder}
+            value={selectedOption()}
+            defaultValue={defaultOption()}
+            onChange={handleValueChange}
+            class={styles.root({ class: local.class })}
+            {...others}
+            itemComponent={(itemProps) => (
+                <KSelect.Item item={itemProps.item} class={styles.item()}>
+                    <KSelect.ItemIndicator class={styles.itemIndicator()}>
+                        <Check size={14} />
+                    </KSelect.ItemIndicator>
+                    <KSelect.ItemLabel>
+                        {itemProps.item.textValue}
+                    </KSelect.ItemLabel>
+                </KSelect.Item>
+            )}
+        >
+            <Show when={local.label}>
+                <KSelect.Label class={styles.label()}>
+                    {local.label}
+                </KSelect.Label>
+            </Show>
+
+            <KSelect.Trigger class={styles.trigger()}>
+                <KSelect.Value<Option>>
+                    {(state) => (
+                        <Show
+                            when={state.selectedOption()}
+                            fallback={local.placeholder}
+                        >
+                            {state.selectedOption()?.label}
+                        </Show>
+                    )}
+                </KSelect.Value>
+                <KSelect.Icon>
+                    <ChevronDown size={16} class="opacity-50" />
+                </KSelect.Icon>
+            </KSelect.Trigger>
+
+            <KSelect.Portal>
+                <KSelect.Content class={styles.content()}>
+                    <KSelect.Listbox class={styles.listbox()} />
+                </KSelect.Content>
+            </KSelect.Portal>
+
+            <Show when={local.description}>
+                <KSelect.Description class={styles.description()}>
+                    {local.description}
+                </KSelect.Description>
+            </Show>
+        </KSelect>
+    );
+};

package/src/separator/separator.tsx

@@ -0,0 +1,62 @@
+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-slate-200 dark:bg-slate-800 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-slate-200 dark:bg-slate-800",
+                muted: "bg-slate-100 dark:bg-slate-900",
+                primary: "bg-blue-500/50",
+            },
+        },
+        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-slate-200 dark:bg-slate-800",
+        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,91 @@
+import { Slider as KSlider } from "@kobalte/core/slider";
+import { splitProps, type ComponentProps, For, Show } from "solid-js";
+import { tv, type VariantProps } from "tailwind-variants";
+
+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-slate-700 dark:text-slate-300",
+            value: "text-sm text-slate-500 font-mono",
+            track: "relative h-2 w-full grow rounded-full bg-slate-100 dark:bg-slate-800",
+            fill: "absolute h-full rounded-full bg-blue-600 dark:bg-blue-500",
+            thumb: [
+                "block h-5 w-5 rounded-full border-2 border-blue-600 bg-white 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-blue-600", thumb: "border-blue-600" },
+                danger: { fill: "bg-red-600", thumb: "border-red-600" },
+                success: {
+                    fill: "bg-emerald-600",
+                    thumb: "border-emerald-600",
+                },
+            },
+            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>
+    );
+};