Blame view

美国版/Food Labeling Management Platform/src/components/ui/toggle.tsx 1.7 KB
884054fb   “wangming”   项目初始化
1
2
3
4
5
6
7
8
9
  "use client";
  
  import * as React from "react";
  import * as TogglePrimitive from "@radix-ui/react-toggle@1.1.2";
  import { cva, type VariantProps } from "class-variance-authority@0.7.1";
  
  import { cn } from "./utils";
  
  const toggleVariants = cva(
ef6b3255   杨鑫   修改BUG
10
    "inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium hover:bg-muted hover:text-muted-foreground disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] outline-none transition-[color,box-shadow] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive whitespace-nowrap",
884054fb   “wangming”   项目初始化
11
12
13
    {
      variants: {
        variant: {
ef6b3255   杨鑫   修改BUG
14
15
16
          default:
            "bg-transparent data-[state=on]:bg-accent data-[state=on]:text-accent-foreground",
          /** outline 的选中底/字色由业务 className 控制(如 Button Appearance 蓝色),不在基础层写 on 态避免盖过业务样式 */
884054fb   “wangming”   项目初始化
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
          outline:
            "border border-input bg-transparent hover:bg-accent hover:text-accent-foreground",
        },
        size: {
          default: "h-9 px-2 min-w-9",
          sm: "h-8 px-1.5 min-w-8",
          lg: "h-10 px-2.5 min-w-10",
        },
      },
      defaultVariants: {
        variant: "default",
        size: "default",
      },
    },
  );
  
  function Toggle({
    className,
    variant,
    size,
    ...props
  }: React.ComponentProps<typeof TogglePrimitive.Root> &
    VariantProps<typeof toggleVariants>) {
    return (
      <TogglePrimitive.Root
        data-slot="toggle"
        className={cn(toggleVariants({ variant, size, className }))}
        {...props}
      />
    );
  }
  
  export { Toggle, toggleVariants };