Toggle

1import { ToggleButton as KobalteToggle } from "@kobalte/core/toggle-button";
2import { type VariantProps, cva } from "class-variance-authority";
3import type { Component, ComponentProps } from "solid-js";
4import { splitProps } from "solid-js";
5import { cn } from "~/lib/utils";
6 
7export const toggleVariants = cva(
8  [
9    "inline-flex items-center justify-center rounded-md text-sm font-medium",
10    "ring-offset-background transition-colors",
11    "hover:bg-muted hover:text-muted-foreground",
12    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
13    "disabled:pointer-events-none disabled:opacity-50",
14    "data-[pressed]:bg-accent data-[pressed]:text-accent-foreground",
15  ],
16  {
17    variants: {
18      variant: {
19        default: "bg-transparent",
20        outline: "border border-input bg-transparent hover:bg-accent hover:text-accent-foreground",
21      },
22      size: {
23        default: "h-10 px-3",
24        sm: "h-9 px-2.5",
25        lg: "h-11 px-5",
26      },
27    },
28    defaultVariants: {
29      variant: "default",
30      size: "default",
31    },
32  },
33);
34 
35export type ToggleProps = ComponentProps<typeof KobalteToggle> &
36  VariantProps<typeof toggleVariants> & {
37    class?: string;
38  };
39 
40export const Toggle: Component<ToggleProps> = (props) => {
41  const [local, variants, rest] = splitProps(props, ["class"], ["variant", "size"]);
42  return <KobalteToggle class={cn(toggleVariants(variants), local.class)} {...rest} />;
43};