solid-element-ui 0.2.3 → 0.2.5

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

@@ -0,0 +1,68 @@
+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";
+
+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-2 focus-visible:ring-slate-400 focus-visible:ring-offset-2",
+            "disabled:pointer-events-none disabled:opacity-50 select-none cursor-pointer",
+        ],
+        variants: {
+            variant: {
+                solid: "bg-slate-100 text-slate-900 hover:bg-slate-200 data-[pressed]:bg-blue-600 data-[pressed]:text-white dark:bg-slate-800 dark:text-slate-100 dark:hover:bg-slate-700 dark:data-[pressed]:bg-blue-500",
+                outline:
+                    "border border-slate-200 bg-transparent hover:bg-slate-100 data-[pressed]:bg-slate-900 data-[pressed]:text-white dark:border-slate-800 dark:hover:bg-slate-800 dark:data-[pressed]:bg-slate-50 dark:data-[pressed]:text-slate-900",
+                ghost: "bg-transparent hover:bg-slate-100 data-[pressed]:bg-slate-200 dark:hover:bg-slate-800 dark:data-[pressed]:bg-slate-800",
+            },
+            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,86 @@
+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-slate-200 bg-transparent p-1 dark:border-slate-800",
+            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-slate-100 hover:text-slate-500 dark:hover:bg-slate-800 dark:hover:text-slate-400",
+                "data-[pressed]:bg-slate-100 data-[pressed]:text-slate-900 dark:data-[pressed]:bg-slate-800 dark:data-[pressed]:text-slate-50",
+            ],
+        },
+        variants: {
+            variant: {
+                default: {
+                    root: "bg-transparent",
+                    item: "data-[pressed]:bg-slate-200 dark:data-[pressed]:bg-slate-700",
+                },
+                outline: {
+                    root: "border border-slate-200 dark:border-slate-800",
+                    item: "border-r last:border-r-0 border-slate-200 dark:border-slate-800 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,78 @@
+import { Tooltip as KTooltip } from "@kobalte/core/tooltip";
+import { splitProps, type JSX, type ComponentProps } from "solid-js";
+import { tv, type VariantProps } from "tailwind-variants";
+
+// FIXME 为什么没有箭头
+
+const tooltipStyles = tv(
+    {
+        slots: {
+            content: [
+                "z-50 overflow-hidden rounded-md px-3 py-1.5 text-xs shadow-md",
+                "animate-in fade-in-0 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-slate-900 text-slate-50 dark:bg-slate-50 dark:text-slate-900",
+                    arrow: "text-slate-900 dark:text-slate-50",
+                },
+                danger: {
+                    content: "bg-red-600 text-white",
+                    arrow: "text-red-600",
+                },
+            },
+        },
+        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()}>
+                    {/* size={8} 确保箭头有物理尺寸
+                        fill="currentColor" 配合 styles.arrow() 里的 text 颜色实现变体同步 
+                    */}
+                    <KTooltip.Arrow class={styles.arrow()} size={8} />
+                    {local.content}
+                </KTooltip.Content>
+            </KTooltip.Portal>
+        </KTooltip>
+    );
+};