solid-element-ui 0.2.4 → 0.2.6

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,132 @@
+import { Toast as KToast, toaster } from "@kobalte/core/toast";
+
+import { isServer } from "solid-js/web";
+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 opacity-0 transition-opacity hover:text-main",
+                "focus:opacity-100 focus:outline-none focus:ring-2 group-hover:opacity-100",
+            ],
+            content: "flex flex-col gap-1 flex-1",
+            icon: "h-5 w-5 shrink-0 mt-0.5", // 稍微下移一点对齐文字
+        },
+        variants: {
+            variant: {
+                info: {
+                    root: "bg-app border-light text-main",
+                    icon: "text-primary",
+                },
+                success: {
+                    root: "bg-success/50 border-success text-success",
+                    icon: "text-success",
+                },
+                warning: {
+                    root: "bg-warning/50 border-warning text-warning",
+                    icon: "text-warning",
+                },
+                error: {
+                    root: "bg-danger/50 border-danger text-danger",
+                    icon: "text-danger",
+                },
+            },
+        },
+        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 断言增强类型推导
+
+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">) => {
+    if (isServer) {
+        return { toastId: () => "server-id" }; // 给个假实现，不报错就行
+    }
+    return toaster.show((data) => <Toast toastId={data.toastId} {...props} />);
+};

package/src/toggle-button/toggle-button.tsx

@@ -0,0 +1,69 @@
+import { ToggleButton as KToggle } from "@kobalte/core/toggle-button";
+import { splitProps, type JSX, type ComponentProps } from "solid-js";
+import { tv, type VariantProps } from "tailwind-variants";
+
+// TODO 切换样式问题
+
+const toggleStyles = tv(
+    {
+        base: [
+            "inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors",
+            "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-slate-400 focus-visible:ring-offset-1",
+            "disabled:pointer-events-none disabled:opacity-50 select-none cursor-pointer",
+        ],
+        variants: {
+            variant: {
+                solid: "bg-foreground text-main hover:bg-foreground/80 data-[pressed]:bg-reversal-bg data-[pressed]:text-reversal",
+                outline:
+                    "border border-light bg-transparent hover:bg-slate-100 data-[pressed]:bg-slate-900 data-[pressed]:text-white dark:hover:bg-slate-800 dark:data-[pressed]:bg-slate-50 dark:data-[pressed]:text-slate-900",
+            },
+            size: {
+                sm: "h-8 px-3 text-xs",
+                md: "h-10 px-4 text-sm",
+                lg: "h-12 px-6 text-base",
+                icon: "h-10 w-10",
+            },
+        },
+        defaultVariants: {
+            variant: "solid",
+            size: "md",
+        },
+    },
+    {
+        twMerge: true,
+    },
+);
+
+type ToggleVariants = VariantProps<typeof toggleStyles>;
+
+export interface ToggleButtonProps
+    extends Omit<ComponentProps<typeof KToggle>, "class">,
+        ToggleVariants {
+    class?: string;
+    children?: JSX.Element;
+}
+
+export const ToggleButton = (props: ToggleButtonProps) => {
+    const [local, variantProps, others] = splitProps(
+        props,
+        ["class", "children"],
+        ["variant", "size"]
+    );
+
+    return (
+        <KToggle
+            class={toggleStyles({
+                variant: variantProps.variant,
+                size: variantProps.size,
+                class: local.class,
+            })}
+            {...others}
+        >
+            {(state) =>
+                typeof local.children === "function"
+                    ? (local.children as any)(state)
+                    : local.children
+            }
+        </KToggle>
+    );
+};

package/src/toggle-group/toggle-group.tsx

@@ -0,0 +1,85 @@
+import { ToggleGroup as KToggleGroup } from "@kobalte/core/toggle-group";
+import { splitProps, For, type ComponentProps, type JSX } from "solid-js";
+import { tv, type VariantProps } from "tailwind-variants";
+
+
+// TODO 单选，多选出现问题
+
+const toggleGroupStyles = tv(
+    {
+        slots: {
+            root: "inline-flex items-center justify-center rounded-md border border-light bg-transparent p-1",
+            item: [
+                "inline-flex items-center justify-center rounded-sm 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",
+                "disabled:pointer-events-none disabled:opacity-50",
+                "hover:bg-foreground/80 hover:text-muted/80",
+            ],
+        }, 
+        variants: {
+            variant: {
+                default: {
+                    root: "bg-transparent",
+                    item: "data-[pressed]:bg-foreground data-[pressed]:text-main",
+                },
+                outline: {
+                    root: "border border-light",
+                    item: "border-r last:border-r-0 border-light rounded-none first:rounded-l-md last:rounded-r-md",
+                },
+            },
+            size: {
+                sm: { item: "h-8 px-2.5 text-xs" },
+                md: { item: "h-10 px-3 text-sm" },
+                lg: { item: "h-12 px-5 text-base" },
+            },
+        },
+        defaultVariants: {
+            variant: "default",
+            size: "md",
+        },
+    },
+    {
+        twMerge: true,
+    },
+);
+
+type ToggleGroupVariants = VariantProps<typeof toggleGroupStyles>;
+
+interface Option {
+    label: string | JSX.Element;
+    value: string;
+    disabled?: boolean;
+}
+
+export interface ToggleGroupProps
+    extends Omit<ComponentProps<typeof KToggleGroup>, "class">,
+        ToggleGroupVariants {
+    options: Option[];
+    class?: string;
+}
+
+export const ToggleGroup = (props: ToggleGroupProps) => {
+    const [local, variantProps, others] = splitProps(
+        props,
+        ["options", "class"],
+        ["size", "variant"]
+    );
+
+    const styles = toggleGroupStyles(variantProps);
+
+    return (
+        <KToggleGroup class={styles.root({ class: local.class })} {...others}>
+            <For each={local.options}>
+                {(option) => (
+                    <KToggleGroup.Item
+                        value={option.value}
+                        disabled={option.disabled}
+                        class={styles.item()}
+                    >
+                        {option.label}
+                    </KToggleGroup.Item>
+                )}
+            </For>
+        </KToggleGroup>
+    );
+};

package/src/tooltip/tooltip.tsx

@@ -0,0 +1,73 @@
+import { Tooltip as KTooltip } from "@kobalte/core/tooltip";
+import { splitProps, type JSX, type ComponentProps } from "solid-js";
+import { tv, type VariantProps } from "tailwind-variants";
+
+const tooltipStyles = tv(
+    {
+        slots: {
+            content: [
+                "z-50 rounded-md px-4 py-1.5 text-xs shadow-md",
+                "animate-in zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
+            ],
+            arrow: "",
+        },
+        variants: {
+            variant: {
+                default: {
+                    content:
+                        "bg-reversal-bg text-reversal ",
+                    arrow: "fill-muted",
+                },
+                danger: {
+                    content: "bg-danger text-white",
+                    arrow: "fill-danger",
+                },
+            },
+        },
+        defaultVariants: {
+            variant: "default",
+        },
+    },
+    {
+        twMerge: true,
+    },
+);
+
+type TooltipVariants = VariantProps<typeof tooltipStyles>;
+
+export interface TooltipProps
+    extends Omit<ComponentProps<typeof KTooltip>, "class">, TooltipVariants {
+    content: JSX.Element;
+    children: JSX.Element;
+}
+
+export const Tooltip = (props: TooltipProps) => {
+    // 1. 分离属性
+    const [local, variantProps, others] = splitProps(
+        props,
+        ["children", "content"],
+        ["variant"]
+    );
+
+    // 2. 生成样式
+    const styles = tooltipStyles(variantProps);
+
+    return (
+        <KTooltip
+            gutter={4} 
+            openDelay={200}
+            {...others}
+        >
+            <KTooltip.Trigger class="block">
+                {local.children}
+            </KTooltip.Trigger>
+
+            <KTooltip.Portal>
+                <KTooltip.Content class={styles.content()}>
+                    <KTooltip.Arrow class={styles.arrow()}  />
+                    {local.content}
+                </KTooltip.Content>
+            </KTooltip.Portal>
+        </KTooltip>
+    );
+};