solid-element-ui 0.2.4 → 0.2.6

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>
+    );
+};

package/src/checkbox/checkbox.tsx

@@ -0,0 +1,63 @@
+import { Checkbox as KCheckbox } from "@kobalte/core/checkbox";
+import { splitProps, type ComponentProps, type JSX } from "solid-js";
+import { tv } from "tailwind-variants";
+import { Check } from "lucide-solid";
+
+// TODO 添加checkbox 的几种形状尺寸,看情况吧
+
+
+const checkboxStyles = tv(
+    {
+        slots: {
+            root: "group flex items-center gap-2 cursor-pointer disabled:cursor-not-allowed disabled:opacity-50",
+            control: [
+                "flex h-4 w-4 shrink-0 items-center justify-center rounded-sm border border-base transition-all",
+                "group-focus-visible:outline-none group-focus-visible:ring-2 group-focus-visible:ring-zinc-950",
+                "data-[checked]:bg-zinc-900 data-[checked]:border-zinc-900 data-[checked]:text-zinc-50",
+                "data-[disabled]:bg-zinc-400 data-[disabled]:border-zinc-400",
+                "dark:data-[checked]:bg-zinc-50 dark:data-[checked]:text-zinc-900 dark:group-focus-visible:ring-zinc-300",
+            ],
+            label: "text-sm font-medium leading-none select-none data-[disabled]:text-zinc-400",
+            indicator: "h-3.5 w-3.5",
+            description: "text-sm text-zinc-500",
+            errorMessage: "text-sm text-red-500",
+        },
+    },
+    {
+        twMerge: true,
+    },
+);
+
+const { root, control, label, indicator, description, errorMessage } = checkboxStyles();
+export interface CheckboxProps extends ComponentProps<typeof KCheckbox> {
+    label?: JSX.Element;
+}
+
+export const Checkbox = (props: CheckboxProps) => {
+    const [local, others] = splitProps(props, [
+        "label",
+        "class",
+        "description",
+        "errorMessage",
+    ]);
+
+    return (
+        <KCheckbox class={root({ class: local.class })} {...others}>
+            <KCheckbox.Input />
+            <KCheckbox.Control class={control()}>
+                <KCheckbox.Indicator class={indicator()}>
+                    <Check class={indicator()} stroke-width={3} />
+                </KCheckbox.Indicator>
+            </KCheckbox.Control>
+            {local.label && (
+                <KCheckbox.Label class={label()}>{local.label}</KCheckbox.Label>
+            )}
+            <KCheckbox.Description class={description()}>
+                {local.description}
+            </KCheckbox.Description>
+            <KCheckbox.ErrorMessage class={errorMessage()}>
+                {local.errorMessage}
+            </KCheckbox.ErrorMessage>
+        </KCheckbox>
+    );
+};

package/src/collapsible/collapsible.tsx

@@ -0,0 +1,46 @@
+import { Collapsible as KCollapsible } from "@kobalte/core/collapsible";
+import { splitProps, type JSX, type ComponentProps } from "solid-js";
+import { tv } from "tailwind-variants";
+import { ChevronDown } from "lucide-solid";
+
+const collapsibleStyles = tv(
+    {
+        slots: {
+            root: "w-full space-y-2",
+            trigger:
+                "flex w-full items-center justify-between border border-light bg-foreground px-4 py-2 text-sm font-medium hover:bg-foreground/80  transition-all group mb-0",
+            content:
+                "overflow-hidden text-sm transition-all data-[expanded]:animate-collapsible-down data-[closed]:animate-collapsible-up",
+            contentInner:
+                "px-4 py-3 text-main border border-light !border-t-0",
+            icon: "h-4 w-4 text-zinc-500 transition-transform duration-200 group-data-[expanded]:rotate-180",
+        },
+    },
+    {
+        twMerge: true,
+    },
+);
+
+const { root, trigger, content, contentInner, icon } = collapsibleStyles();
+
+interface CollapsibleProps extends ComponentProps<typeof KCollapsible> {
+    title: JSX.Element;
+    children: JSX.Element;
+}
+
+export const Collapsible = (props: CollapsibleProps) => {
+    const [local, others] = splitProps(props, ["title", "children", "class"]);
+
+    return (
+        <KCollapsible class={root({ class: local.class })} {...others}>
+            <KCollapsible.Trigger class={trigger()}>
+                <span>{local.title}</span>
+                <ChevronDown class={icon()} />
+            </KCollapsible.Trigger>
+
+            <KCollapsible.Content class={content()}>
+                <div class={contentInner()}>{local.children}</div>
+            </KCollapsible.Content>
+        </KCollapsible>
+    );
+};

package/src/color-area/color-area.tsx

@@ -0,0 +1,46 @@
+import { ColorArea as KColorArea } from "@kobalte/core/color-area";
+import { splitProps, type ComponentProps } from "solid-js";
+import { tv } from "tailwind-variants";
+
+const colorAreaStyles = tv(
+    {
+        slots: {
+            root: "relative h-48 w-full shrink-0 rounded-lg border border-base touch-none",
+            background: "h-full w-full rounded-[inherit]",
+            thumb: [
+                "z-10 h-5 w-5 rounded-full border-2 border-white bg-transparent shadow-md transition-[transform]",
+                "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-zinc-950 focus-visible:ring-offset-2",
+                "hover:scale-110 active:scale-90 cursor-grab active:cursor-grabbing",
+            ],
+        },
+    },
+    {
+        twMerge: true,
+    },
+);
+
+const { root, background, thumb } = colorAreaStyles();
+
+export interface ColorAreaProps extends ComponentProps<typeof KColorArea> {}
+
+export const ColorArea = (props: ColorAreaProps) => {
+    const [local, others] = splitProps(props, ["class"]);
+
+    return (
+        <KColorArea class={root({ class: local.class })} {...others}>
+            <KColorArea.Background
+                class={background()}
+                // 默认背景，通常实际使用时会根据 Hue 滑块动态改变这里的红色部分
+                style={{
+                    background:
+                        "linear-gradient(to top, #000, transparent), linear-gradient(to right, #fff, transparent), red",
+                }}
+            />
+            <KColorArea.Thumb class={thumb()}>
+                {/* 修复点：ColorArea 需要分别定义 X 和 Y 的隐藏输入框 */}
+                <KColorArea.HiddenInputX />
+                <KColorArea.HiddenInputY />
+            </KColorArea.Thumb>
+        </KColorArea>
+    );
+};

package/src/color-channel-field/color-channel-field.tsx

@@ -0,0 +1,46 @@
+import { ColorChannelField as KColorChannelField } from "@kobalte/core/color-channel-field";
+import { splitProps, type ComponentProps } from "solid-js";
+import { tv } from "tailwind-variants";
+
+const fieldStyles = tv(
+    {
+        slots: {
+            root: "flex flex-col gap-1.5 w-full",
+            label: "text-sm font-medium text-zinc-900 dark:text-zinc-100 select-none",
+            input: [
+                "h-9 w-full rounded-md border border-zinc-200 bg-white px-3 py-1 text-sm shadow-sm transition-colors",
+                "placeholder:text-zinc-500 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-zinc-950",
+                "disabled:cursor-not-allowed disabled:opacity-50",
+                "dark:border-zinc-800 dark:bg-zinc-950 dark:focus-visible:ring-zinc-300",
+            ],
+        },
+    },
+    {
+        twMerge: true,
+    },
+);
+
+const { root, label, input } = fieldStyles();
+
+export interface ColorChannelFieldProps
+    extends ComponentProps<typeof KColorChannelField> {
+    label?: string;
+}
+
+
+// TODO channel 问题
+
+export const ColorChannelField = (props: ColorChannelFieldProps) => {
+    const [local, others] = splitProps(props, ["label", "class"]);
+
+    return (
+        <KColorChannelField class={root({ class: local.class })} {...others}>
+            {local.label && (
+                <KColorChannelField.Label class={label()}>
+                    {local.label}
+                </KColorChannelField.Label>
+            )}
+            <KColorChannelField.Input class={input()} />
+        </KColorChannelField>
+    );
+};

package/src/color-field/color-field.tsx

@@ -0,0 +1,64 @@
+import { ColorField as KColorField } from "@kobalte/core/color-field";
+import { splitProps, type ComponentProps } from "solid-js";
+import { tv } from "tailwind-variants";
+
+const colorFieldStyles = tv(
+    {
+        slots: {
+            root: "flex flex-col gap-1.5 w-full",
+            label: "text-sm font-medium text-zinc-900 dark:text-zinc-100 select-none disabled:opacity-50",
+            input: [
+                "h-9 w-full rounded-md border border-zinc-200 bg-white px-3 py-1 text-sm shadow-sm transition-all",
+                "placeholder:text-zinc-500 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-zinc-950",
+                "data-[invalid]:border-red-500 data-[invalid]:focus-visible:ring-red-500",
+                "disabled:cursor-not-allowed disabled:opacity-50",
+                "dark:border-zinc-800 dark:bg-zinc-950 dark:focus-visible:ring-zinc-300",
+            ],
+            description: "text-[0.8rem] text-zinc-500 dark:text-zinc-400",
+            errorMessage: "text-[0.8rem] font-medium text-red-500",
+        },
+    },
+    {
+        twMerge: true,
+    },
+);
+
+const { root, label, input, description, errorMessage } = colorFieldStyles();
+
+export interface ColorFieldProps extends ComponentProps<typeof KColorField> {
+    label?: string;
+    desc?: string;
+    error?: string;
+}
+
+export const ColorField = (props: ColorFieldProps) => {
+    const [local, others] = splitProps(props, [
+        "label",
+        "desc",
+        "error",
+        "class",
+    ]);
+
+    return (
+        <KColorField
+            class={root({ class: local.class })}
+            validationState={local.error ? "invalid" : "valid"}
+            {...others}
+        >
+            {local.label && (
+                <KColorField.Label class={label()}>
+                    {local.label}
+                </KColorField.Label>
+            )}
+            <KColorField.Input class={input()} placeholder="#FFFFFF" />
+            {local.desc && !local.error && (
+                <KColorField.Description class={description()}>
+                    {local.desc}
+                </KColorField.Description>
+            )}
+            <KColorField.ErrorMessage class={errorMessage()}>
+                {local.error}
+            </KColorField.ErrorMessage>
+        </KColorField>
+    );
+};

package/src/color-slider/color-slider.tsx

@@ -0,0 +1,60 @@
+import { ColorSlider as KColorSlider } from "@kobalte/core/color-slider";
+import { splitProps, type ComponentProps } from "solid-js";
+import { tv } from "tailwind-variants";
+
+// TODO defaultValue,还有channel 的问题
+
+const sliderStyles = tv(
+    {
+        slots: {
+            root: "relative flex flex-col items-center select-none touch-none w-full gap-2",
+            label: "text-sm font-medium text-zinc-900 dark:text-zinc-100 self-start",
+            track: "relative h-3 w-full rounded-full border border-black/5 dark:border-white/10",
+            thumb: [
+                "z-10 h-5 w-5 rounded-full border-2 border-white bg-transparent shadow-md transition-[transform]",
+                "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-zinc-950 focus-visible:ring-offset-2",
+                "hover:scale-110 active:scale-90 cursor-grab active:cursor-grabbing",
+            ],
+            valueLabel: "text-xs text-zinc-500 dark:text-zinc-400 tabular-nums",
+        },
+    },
+    {
+        twMerge: true,
+    },
+);
+
+const { root, label, track, thumb, valueLabel } = sliderStyles();
+
+export interface ColorSliderProps extends ComponentProps<typeof KColorSlider> {
+    label?: string;
+    showValue?: boolean;
+}
+
+export const ColorSlider = (props: ColorSliderProps) => {
+    const [local, others] = splitProps(props, ["label", "showValue", "class"]);
+
+    return (
+        <KColorSlider class={root({ class: local.class })} {...others}>
+            <div class="flex w-full justify-between items-center">
+                {local.label && (
+                    <KColorSlider.Label class={label()}>
+                        {local.label}
+                    </KColorSlider.Label>
+                )}
+                {local.showValue && (
+                    <KColorSlider.ValueLabel class={valueLabel()} />
+                )}
+            </div>
+            <KColorSlider.Track
+                class={track()}
+                style={{
+                    background: "var(--kb-color-slider-track-background)",
+                }}
+            >
+                <KColorSlider.Thumb class={thumb()}>
+                    <KColorSlider.Input />
+                </KColorSlider.Thumb>
+            </KColorSlider.Track>
+        </KColorSlider>
+    );
+};

package/src/color-swatch/color-swatch.tsx

@@ -0,0 +1,33 @@
+import { ColorSwatch as KColorSwatch } from "@kobalte/core/color-swatch";
+import { splitProps, type ComponentProps } from "solid-js";
+import { tv } from "tailwind-variants";
+
+const colorSwatchStyles = tv(
+    {
+        base: [
+            "h-8 w-8 rounded-md border border-black/10 shadow-sm transition-transform",
+            "hover:scale-105 select-none dark:border-white/20",
+        ],
+    },
+    {
+        twMerge: true,
+    },
+);
+
+
+// TODO 源代码问题
+
+// FIXME 源代码问题
+
+export interface ColorSwatchProps extends ComponentProps<typeof KColorSwatch> {}
+
+export const ColorSwatch = (props: ColorSwatchProps) => {
+    const [local, others] = splitProps(props, ["class", "style"]);
+
+    return (
+        <KColorSwatch
+            class={colorSwatchStyles({ class: local.class })}
+            {...others}
+        />
+    );
+};

package/src/color-wheel/color-wheel.tsx

@@ -0,0 +1,50 @@
+import { ColorWheel as KColorWheel } from "@kobalte/core/color-wheel";
+import { splitProps, type ComponentProps } from "solid-js";
+import { tv } from "tailwind-variants";
+
+// FIXME 颜色选项都有源代码问题，注意查看原始kobalte的问题。
+
+const colorWheelStyles = tv(
+    {
+        slots: {
+            root: "relative flex flex-col items-center justify-center select-none touch-none",
+            track: "relative rounded-full border border-black/5 dark:border-white/10",
+            thumb: [
+                "z-10 h-5 w-5 rounded-full border-2 border-white bg-transparent shadow-md transition-[transform]",
+                "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-zinc-950 focus-visible:ring-offset-2",
+                "hover:scale-110 active:scale-90 cursor-grab active:cursor-grabbing",
+            ],
+        },
+    },
+    {
+        twMerge: true,
+    },
+);
+
+const { root, track, thumb } = colorWheelStyles();
+
+export interface ColorWheelProps extends ComponentProps<typeof KColorWheel> {
+    size?: number;
+}
+
+export const ColorWheel = (props: ColorWheelProps) => {
+    const [local, others] = splitProps(props, ["size", "class"]);
+
+    return (
+        <KColorWheel class={root({ class: local.class })} {...others}>
+         
+            <KColorWheel.Track
+                class={track()}
+                style={{
+                    width: `${local.size || 160}px`,
+                    height: `${local.size || 160}px`,
+                    background: "var(--kb-color-wheel-track-background)",
+                }}
+            >
+                <KColorWheel.Thumb class={thumb()}>
+                    <KColorWheel.Input />
+                </KColorWheel.Thumb>
+            </KColorWheel.Track>
+        </KColorWheel>
+    );
+};