solid-element-ui 0.2.4 → 0.2.5

package/src/meter/meter.tsx

@@ -0,0 +1,89 @@
+import { Meter as KMeter } from "@kobalte/core/meter";
+import { splitProps, type ComponentProps } from "solid-js";
+import { tv, type VariantProps } from "tailwind-variants";
+
+// TODO 1. 格式
+
+const meterStyles = tv(
+    {
+        slots: {
+            root: "flex flex-col gap-2 w-full antialiased",
+            labelContainer:
+                "flex justify-between items-center text-sm font-medium text-slate-700 dark:text-slate-300",
+            track: "h-2.5 w-full rounded-full bg-slate-100 dark:bg-slate-800 overflow-hidden",
+            fill: "h-full transition-all duration-500 ease-out rounded-full",
+        },
+        variants: {
+            color: {
+                primary: { fill: "bg-blue-600" },
+                success: { fill: "bg-emerald-500" },
+                warning: { fill: "bg-amber-500" },
+                danger: { fill: "bg-red-500" },
+            },
+        },
+        defaultVariants: {
+            color: "primary",
+        },
+    },
+    {
+        twMerge: true,
+    },
+);
+
+type MeterVariants = VariantProps<typeof meterStyles>;
+
+export const Meter = Object.assign(
+    (props: ComponentProps<typeof KMeter> & MeterVariants) => {
+        const [local, variantProps, others] = splitProps(
+            props,
+            ["class"],
+            ["color"]
+        );
+        const s = () => meterStyles({ color: variantProps.color });
+
+        return (
+            <KMeter class={s().root({ class: local.class })} {...others}>
+                {others.children}
+            </KMeter>
+        );
+    },
+    {
+        Label: (props: ComponentProps<typeof KMeter.Label>) => {
+            const [local, others] = splitProps(props, ["class"]);
+            return (
+                <KMeter.Label
+                    class={meterStyles().labelContainer({ class: local.class })}
+                    {...others}
+                />
+            );
+        },
+        ValueLabel: (props: ComponentProps<typeof KMeter.ValueLabel>) => {
+            const [local, others] = splitProps(props, ["class"]);
+            return (
+                <KMeter.ValueLabel
+                    class={`text-xs text-slate-500 ${local.class}`}
+                    {...others}
+                />
+            );
+        },
+        Track: (props: ComponentProps<typeof KMeter.Track>) => {
+            const [local, others] = splitProps(props, ["class"]);
+            return (
+                <KMeter.Track
+                    class={meterStyles().track({ class: local.class })}
+                    {...others}
+                />
+            );
+        },
+        Fill: (props: ComponentProps<typeof KMeter.Fill>) => {
+            const [local, others] = splitProps(props, ["class"]);
+            // 注意：Fill 不需要手动设置宽度，Kobalte 会通过 style 注入百分比
+            return (
+                <KMeter.Fill
+                    class={meterStyles().fill({ class: local.class })}
+                    {...others}
+                />
+            );
+        },
+    }
+);

package/src/navigation-menu/navigation-menu.tsx

@@ -0,0 +1,90 @@
+import { NavigationMenu as KNavigationMenu } from "@kobalte/core/navigation-menu";
+import { splitProps, type ComponentProps, type JSX, For, Show } from "solid-js";
+import { tv } from "tailwind-variants";
+
+// TODO 不显示问题
+
+const navStyles = tv(
+    {
+        slots: {
+            root: "relative z-10 flex w-full justify-center antialiased",
+            trigger: [
+                "group inline-flex h-9 w-max items-center justify-center rounded-md px-4 py-2 text-sm font-medium transition-all",
+                "hover:bg-slate-100 hover:text-slate-900 data-[state=open]:bg-slate-100/50",
+                "dark:hover:bg-slate-800 dark:hover:text-slate-50",
+            ],
+            content:
+                "absolute left-0 top-0 w-full p-2 animate-in fade-in zoom-in-95 duration-200",
+            viewport:
+                "relative mt-1.5 h-(--kb-navigation-menu-viewport-height) w-(--kb-navigation-menu-viewport-width) origin-[top_center] overflow-hidden rounded-md border bg-white shadow-xl dark:bg-slate-950 dark:border-slate-800 transition-[width,height] duration-300",
+        },
+    },
+    {
+        twMerge: true,
+    },
+);
+
+const { root, trigger, content, viewport } = navStyles();
+
+interface NavItem {
+    title: string;
+    href?: string;
+    content?: JSX.Element;
+}
+
+export interface NavigationMenuProps
+    extends ComponentProps<typeof KNavigationMenu> {
+    items: NavItem[];
+}
+
+export const NavigationMenu = (props: NavigationMenuProps) => {
+    const [local, others] = splitProps(props, ["items", "class"]);
+
+    return (
+        <KNavigationMenu class={root({ class: local.class })} {...others}>
+            <For each={local.items}>
+                {(item) => (
+                    <KNavigationMenu.Menu>
+                        <Show
+                            when={item.content}
+                            fallback={
+                                <KNavigationMenu.Trigger
+                                    as="a"
+                                    href={item.href}
+                                    class={trigger()}
+                                >
+                                    {item.title}
+                                </KNavigationMenu.Trigger>
+                            }
+                        >
+                            <KNavigationMenu.Trigger class={trigger()}>
+                                {item.title}
+                                <svg
+                                    class="ml-1 h-3 w-3 transition-transform duration-200 group-data-[state=open]:rotate-180"
+                                    fill="none"
+                                    viewBox="0 0 24 24"
+                                    stroke="currentColor"
+                                >
+                                    <path
+                                        stroke-linecap="round"
+                                        stroke-linejoin="round"
+                                        stroke-width="2"
+                                        d="M19 9l-7 7-7-7"
+                                    />
+                                </svg>
+                            </KNavigationMenu.Trigger>
+                            <KNavigationMenu.Portal>
+                                <KNavigationMenu.Content class={content()}>
+                                    {item.content}
+                                </KNavigationMenu.Content>
+                            </KNavigationMenu.Portal>
+                        </Show>
+                    </KNavigationMenu.Menu>
+                )}
+            </For>
+            <KNavigationMenu.Viewport class={viewport()}>
+                <KNavigationMenu.Arrow />
+            </KNavigationMenu.Viewport>
+        </KNavigationMenu>
+    );
+};

package/src/number-field/number-field.tsx

@@ -0,0 +1,80 @@
+import { NumberField as KNumberField } from "@kobalte/core/number-field";
+import { splitProps, type ComponentProps, Show } from "solid-js";
+import { tv, type VariantProps } from "tailwind-variants";
+import { ChevronUp, ChevronDown } from "lucide-solid";
+
+const numberFieldStyles = tv(
+    {
+        slots: {
+            root: "flex flex-col gap-1.5 w-full antialiased",
+            label: "text-sm font-medium text-slate-700 dark:text-slate-300 ml-1",
+            container: [
+                "relative flex items-center rounded-md border border-slate-200 bg-white transition-shadow shadow-sm",
+                "focus-within:ring-2 focus-within:ring-blue-500/20 focus-within:border-blue-500",
+                "dark:bg-slate-950 dark:border-slate-800",
+            ],
+            input: "flex-1 bg-transparent px-3 py-2 text-sm outline-none placeholder:text-slate-400 disabled:cursor-not-allowed",
+            controls:
+                "flex flex-col border-l border-slate-200 dark:border-slate-800",
+            stepper: [
+                "flex h-1/2 w-8 items-center justify-center transition-colors hover:bg-slate-50 active:bg-slate-100",
+                "dark:hover:bg-slate-900 dark:active:bg-slate-800 disabled:opacity-30 disabled:pointer-events-none",
+            ],
+            errorMessage: "text-xs text-red-500 font-medium ml-1 mt-1",
+        },
+    },
+    {
+        twMerge: true,
+    },
+);
+
+type NumberFieldVariants = VariantProps<typeof numberFieldStyles>;
+
+export interface NumberFieldProps
+    extends Omit<ComponentProps<typeof KNumberField>, "class">,
+        NumberFieldVariants {
+    label?: string;
+    description?: string;
+    class?: string;
+}
+
+export const NumberField = (props: NumberFieldProps) => {
+    // 严格处理属性，防止 TS 报错“已声明但未使用”
+    const [local, others] = splitProps(props, [
+        "label",
+        "description",
+        "class",
+    ]);
+    const s = numberFieldStyles();
+
+    return (
+        <KNumberField class={s.root({ class: local.class })} {...others}>
+            <Show when={local.label}>
+                <KNumberField.Label class={s.label()}>
+                    {local.label}
+                </KNumberField.Label>
+            </Show>
+
+            <div class={s.container()}>
+                <KNumberField.Input class={s.input()} />
+                <div class={s.controls()}>
+                    <KNumberField.IncrementTrigger class={s.stepper()}>
+                        <ChevronUp size={14} />
+                    </KNumberField.IncrementTrigger>
+                    <KNumberField.DecrementTrigger
+                        class={s.stepper({
+                            class: "border-t border-slate-200 dark:border-slate-800",
+                        })}
+                    >
+                        <ChevronDown size={14} />
+                    </KNumberField.DecrementTrigger>
+                </div>
+            </div>
+
+            <Show when={local.description}>
+                <KNumberField.Description class="text-xs text-slate-500 ml-1 mt-1" />
+            </Show>
+            <KNumberField.ErrorMessage class={s.errorMessage()} />
+        </KNumberField>
+    );
+};

package/src/pagination/pagination.tsx

@@ -0,0 +1,68 @@
+import { Pagination as KPagination } from "@kobalte/core/pagination";
+import { splitProps, type ComponentProps } from "solid-js";
+import { tv } from "tailwind-variants";
+import { ChevronLeft, ChevronRight, Ellipsis } from "lucide-solid";
+
+
+// FIXME 样式修改，
+
+const paginationStyles = tv(
+    {
+        slots: {
+            root: "flex w-full justify-center antialiased",
+            itemsContainer: "flex items-center gap-1",
+            item: [
+                "inline-flex h-9 w-9 items-center justify-center rounded-md text-sm font-medium transition-colors",
+                "hover:bg-slate-100 hover:text-slate-900",
+                "data-[selected]:bg-slate-900 data-[selected]:text-slate-50",
+                "dark:hover:bg-slate-800 dark:hover:text-slate-50 dark:data-[selected]:bg-slate-50 dark:data-[selected]:text-slate-900",
+                "disabled:pointer-events-none disabled:opacity-50",
+            ],
+            ellipsis: "flex h-9 w-9 items-center justify-center text-slate-400",
+            trigger:
+                "inline-flex h-9 w-9 items-center justify-center rounded-md border border-slate-200 bg-transparent hover:bg-slate-100 dark:border-slate-800 dark:hover:bg-slate-800",
+        },
+    },
+    {
+        twMerge: true,
+    },
+);
+
+const s = paginationStyles();
+
+export interface PaginationProps extends ComponentProps<typeof KPagination> {}
+
+export const Pagination = (props: PaginationProps) => {
+    // 显式提取 count 以满足类型约束，同时清理 others
+    const [local, others] = splitProps(props, ["class", "count"]);
+
+    return (
+        <KPagination
+            class={s.root({ class: local.class })}
+            count={local.count}
+            {...others}
+            itemComponent={(p) => (
+                <KPagination.Item page={p.page} class={s.item()}>
+                    {p.page}
+                </KPagination.Item>
+            )}
+            ellipsisComponent={() => (
+                <KPagination.Ellipsis class={s.ellipsis()}>
+                    <Ellipsis size={16} />
+                </KPagination.Ellipsis>
+            )}
+        >
+            <div class={s.itemsContainer()}>
+                <KPagination.Previous class={s.trigger()}>
+                    <ChevronLeft size={16} />
+                </KPagination.Previous>
+
+                <KPagination.Items />
+
+                <KPagination.Next class={s.trigger()}>
+                    <ChevronRight size={16} />
+                </KPagination.Next>
+            </div>
+        </KPagination>
+    );
+};

package/src/popover/popover.tsx

@@ -0,0 +1,59 @@
+import { Popover as KPopover } from "@kobalte/core/popover";
+import { CrossIcon } from "lucide-solid";
+import { splitProps, type ComponentProps, type JSX } from "solid-js";
+import { tv } from "tailwind-variants";
+
+// FIXME 与其他的气泡样式不统一的问题
+// Description，而不是内敛。
+// trigger用内部，而其他放在标签属性
+
+const popoverStyles = tv(
+    {
+        slots: {
+            content: [
+                "z-50 w-72 rounded-md border bg-white p-4 shadow-md outline-none antialiased",
+                "dark:bg-slate-950 dark:border-slate-800 dark:text-slate-50",
+                "data-[expanded]:animate-in data-[closed]:animate-out",
+            ],
+            arrow: "fill-white stroke-slate-200 dark:fill-slate-950 dark:stroke-slate-800",
+        },
+    },
+    {
+        twMerge: true,
+    },
+);
+
+const {content, arrow} = popoverStyles();
+
+export interface PopoverProps extends ComponentProps<typeof KPopover> {
+    trigger: JSX.Element;
+    title: string;
+}
+
+export const Popover = (props: PopoverProps) => {
+    const [local, others] = splitProps(props, ["trigger", "children", "title"]);
+
+    return (
+        <KPopover {...others}>
+            <KPopover.Trigger class="inline-flex">
+                {local.trigger}
+            </KPopover.Trigger>
+
+            <KPopover.Portal>
+                <KPopover.Content class={content()}>
+                    <KPopover.Arrow class={arrow()} />
+
+                    <div class="flex">
+                        <KPopover.Title>{local.title}</KPopover.Title>
+                        <KPopover.CloseButton>
+                            <CrossIcon />
+                        </KPopover.CloseButton>
+                    </div>
+                    <KPopover.Description>
+                        {local.children}
+                    </KPopover.Description>
+                </KPopover.Content>
+            </KPopover.Portal>
+        </KPopover>
+    );
+};

package/src/progress/progress.tsx

@@ -0,0 +1,83 @@
+import { Progress as KProgress } from "@kobalte/core/progress";
+import { splitProps, type ComponentProps, Show } from "solid-js";
+import { tv, type VariantProps } from "tailwind-variants";
+
+// FIXME  进度条问题，value 直接占满
+
+const progressStyles = tv(
+    {
+        slots: {
+            root: "flex flex-col gap-2 w-full antialiased",
+            labelContainer:
+                "flex justify-between items-center text-sm font-medium text-slate-700 dark:text-slate-300",
+            track: "h-2 w-full rounded-full bg-slate-100 dark:bg-slate-800 overflow-hidden",
+            fill: "h-full bg-blue-600 transition-all duration-300 ease-in-out data-[indeterminate]:animate-progress-indeterminate",
+        },
+        variants: {
+            size: {
+                sm: { track: "h-1" },
+                md: { track: "h-2" },
+                lg: { track: "h-3" },
+            },
+            radius: {
+                none: { track: "rounded-none", fill: "rounded-none" },
+                sm: { track: "rounded-sm", fill: "rounded-sm" },
+                md: { track: "rounded-md", fill: "rounded-md" },
+                lg: { track: "rounded-lg", fill: "rounded-lg" },
+                full: { track: "rounded-full", fill: "rounded-full" },
+            },
+        },
+        defaultVariants: {
+            size: "md",
+            radius: "full",
+        },
+    },
+    {
+        twMerge: true,
+    },
+);
+
+type ProgressVariants = VariantProps<typeof progressStyles>;
+
+export interface ProgressProps
+    extends Omit<ComponentProps<typeof KProgress>, "children">,
+        ProgressVariants {
+    label?: string;
+    showValue?: boolean;
+}
+
+
+export const Progress = (props: ProgressProps) => {
+    const [local, variantProps, others] = splitProps(
+        props,
+        ["label", "showValue", "class"],
+        ["size", "radius"]
+    );
+
+    const { root, labelContainer, track, fill } = progressStyles({
+        size: variantProps.size,
+        radius: variantProps.radius,
+    });
+
+    return (
+        <KProgress class={root({ class: local.class })} {...others}>
+            <Show when={local.label || local.showValue}>
+                <div class={labelContainer()}>
+                    <Show when={local.label}>
+                        <KProgress.Label>{local.label}</KProgress.Label>
+                    </Show>
+                    <Show when={local.showValue}>
+                        <KProgress.ValueLabel class="text-xs text-slate-500" />
+                    </Show>
+                </div>
+            </Show>
+
+            <KProgress.Track class={track()}>
+                <KProgress.Fill
+                    class={fill()}
+                    style={{ width: "var(--kb-progress-fill-width)" }}
+                />
+            </KProgress.Track>
+        </KProgress>
+    );
+};

package/src/radio-group/radio-group.tsx

@@ -0,0 +1,94 @@
+import { RadioGroup as KRadioGroup } from "@kobalte/core/radio-group";
+import { splitProps, type ComponentProps, For, Show } from "solid-js";
+import { tv, type VariantProps } from "tailwind-variants";
+
+const radioStyles = tv(
+    {
+        slots: {
+            root: "flex flex-col gap-3 antialiased",
+            label: "text-sm font-semibold text-slate-900 dark:text-slate-100 mb-1",
+            item: "group flex items-center gap-3 cursor-pointer disabled:cursor-not-allowed",
+            control: [
+                "flex h-5 w-5 shrink-0 items-center justify-center rounded-full border border-slate-300 bg-white transition-all shadow-sm",
+                "group-hover:border-slate-400 group-data-[checked]:border-blue-600 group-data-[checked]:bg-blue-600",
+                "group-focus-visible:ring-2 group-focus-visible:ring-blue-500/20",
+                "dark:bg-slate-950 dark:border-slate-700 dark:group-data-[checked]:bg-blue-600 dark:group-data-[checked]:border-blue-600",
+            ],
+            indicator: "h-2 w-2 rounded-full bg-white shadow-sm",
+            itemLabel:
+                "text-sm font-medium text-slate-700 dark:text-slate-300 group-data-[disabled]:opacity-50",
+        },
+        variants: {
+            orientation: {
+                horizontal: { root: "flex-row flex-wrap gap-6" },
+                vertical: { root: "flex-col" },
+            },
+        },
+        defaultVariants: {
+            orientation: "vertical",
+        },
+    },
+    {
+        twMerge: true,
+    },
+);
+
+type RadioVariants = VariantProps<typeof radioStyles>;
+
+export interface RadioOption {
+    label: string;
+    value: string;
+    disabled?: boolean;
+}
+
+export interface RadioGroupProps
+    extends Omit<ComponentProps<typeof KRadioGroup>, "children" | "class">,
+        RadioVariants {
+    label?: string;
+    options: RadioOption[];
+    class?: string;
+}
+
+/**
+ * RadioGroup 高度封装版
+ * 自动处理循环渲染、选中指示器以及水平/垂直布局
+ */
+export const RadioGroup = (props: RadioGroupProps) => {
+    const [local, variantProps, others] = splitProps(
+        props,
+        ["label", "options", "class"],
+        ["orientation"]
+    );
+
+    const s = () => radioStyles({ orientation: variantProps.orientation });
+
+    return (
+        <KRadioGroup class={s().root({ class: local.class })} {...others}>
+            <Show when={local.label}>
+                <KRadioGroup.Label class={s().label()}>
+                    {local.label}
+                </KRadioGroup.Label>
+            </Show>
+
+            <For each={local.options}>
+                {(option) => (
+                    <KRadioGroup.Item
+                        value={option.value}
+                        disabled={option.disabled}
+                        class={s().item()}
+                    >
+                        <KRadioGroup.ItemInput />
+                        <KRadioGroup.ItemControl class={s().control()}>
+                            <KRadioGroup.ItemIndicator
+                                class={s().indicator()}
+                            />
+                        </KRadioGroup.ItemControl>
+                        <KRadioGroup.ItemLabel class={s().itemLabel()}>
+                            {option.label}
+                        </KRadioGroup.ItemLabel>
+                    </KRadioGroup.Item>
+                )}
+            </For>
+        </KRadioGroup>
+    );
+};

package/src/rating-group/rating-group.tsx

@@ -0,0 +1,101 @@
+// import { RatingGroup as KRatingGroup } from "@kobalte/core/rating-group";
+// import { splitProps, type ComponentProps, For, Show } from "solid-js";
+// import { tv, type VariantProps } from "tailwind-variants";
+// import { Star } from "lucide-solid";
+
+// const ratingStyles = tv({
+//     slots: {
+//         root: "flex flex-col gap-1.5 antialiased",
+//         label: "text-sm font-medium text-slate-700 dark:text-slate-300",
+//         control: "flex items-center gap-0.5",
+//         item: "relative cursor-pointer transition-transform active:scale-90 focus-visible:outline-none",
+//         itemIndicator: "flex items-center justify-center transition-colors",
+//     },
+//     variants: {
+//         color: {
+//             yellow: {
+//                 itemIndicator:
+//                     "text-amber-400 fill-transparent data-[highlighted]:fill-amber-400 data-[highlighted]:text-amber-400",
+//             },
+//             blue: {
+//                 itemIndicator:
+//                     "text-blue-500 fill-transparent data-[highlighted]:fill-blue-500 data-[highlighted]:text-blue-500",
+//             },
+//             red: {
+//                 itemIndicator:
+//                     "text-red-500 fill-transparent data-[highlighted]:fill-red-500 data-[highlighted]:text-red-500",
+//             },
+//         },
+//         size: {
+//             sm: { itemIndicator: "h-4 w-4" },
+//             md: { itemIndicator: "h-6 w-6" },
+//             lg: { itemIndicator: "h-8 w-8" },
+//         },
+//     },
+//     defaultVariants: {
+//         color: "yellow",
+//         size: "md",
+//     },
+// });
+
+// type RatingVariants = VariantProps<typeof ratingStyles>;
+
+// export interface RatingGroupProps
+//     extends Omit<ComponentProps<typeof KRatingGroup>, "children" | "class">,
+//         RatingVariants {
+//     label?: string;
+//     count?: number; // 星星总数，默认为 5
+//     class?: string;
+// }
+
+// /**
+//  * RatingGroup 高度封装版
+//  * 自动处理星星循环、高亮逻辑及表单集成
+//  */
+// export const RatingGroup = (props: RatingGroupProps) => {
+//     const [local, variantProps, others] = splitProps(
+//         props,
+//         ["label", "count", "class"],
+//         ["color", "size"]
+//     );
+
+//     const s = () =>
+//         ratingStyles({
+//             color: variantProps.color,
+//             size: variantProps.size,
+//         });
+
+//     const maxCount = () => local.count ?? 5;
+
+//     return (
+//         <KProgress class={s().root({ class: local.class })} {...others}>
+//             <Show when={local.label}>
+//                 <KRatingGroup.Label class={s().label()}>
+//                     {local.label}
+//                 </KRatingGroup.Label>
+//             </Show>
+
+//             <KRatingGroup.Control class={s().control()}>
+//                 <KRatingGroup.HiddenInput />
+//                 <KRatingGroup.Context>
+//                     {(state) => (
+//                         <For each={state.items}>
+//                             {(index) => (
+//                                 <KRatingGroup.Item
+//                                     index={index}
+//                                     class={s().item()}
+//                                 >
+//                                     <KRatingGroup.ItemIndicator
+//                                         class={s().itemIndicator()}
+//                                     >
+//                                         <Star />
+//                                     </KRatingGroup.ItemIndicator>
+//                                 </KRatingGroup.Item>
+//                             )}
+//                         </For>
+//                     )}
+//                 </KRatingGroup.Context>
+//             </KRatingGroup.Control>
+//         </KProgress>
+//     );
+// };