aria.lgbt
Keep track of ICE and police locations in your city. Very much a work-in-progress and not ready yet, stay tuned I guess?
1<script lang="ts" module>
2 import { type VariantProps, tv } from "tailwind-variants";
3
4 export const toggleVariants = tv({
5 base: "hover:bg-muted hover:text-muted-foreground data-[state=on]:bg-accent data-[state=on]:text-accent-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium outline-none transition-[color,box-shadow] focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
6 variants: {
7 variant: {
8 default: "bg-transparent",
9 outline:
10 "border-input shadow-xs hover:bg-accent hover:text-accent-foreground border bg-transparent",
11 },
12 size: {
13 default: "h-9 min-w-9 px-2",
14 sm: "h-8 min-w-8 px-1.5",
15 lg: "h-10 min-w-10 px-2.5",
16 },
17 },
18 defaultVariants: {
19 variant: "default",
20 size: "default",
21 },
22 });
23
24 export type ToggleVariant = VariantProps<typeof toggleVariants>["variant"];
25 export type ToggleSize = VariantProps<typeof toggleVariants>["size"];
26 export type ToggleVariants = VariantProps<typeof toggleVariants>;
27</script>
28
29<script lang="ts">
30 import { Toggle as TogglePrimitive } from "bits-ui";
31 import { cn } from "$lib/utils/cn.js";
32
33 let {
34 ref = $bindable(null),
35 pressed = $bindable(false),
36 class: className,
37 size = "default",
38 variant = "default",
39 ...restProps
40 }: TogglePrimitive.RootProps & {
41 variant?: ToggleVariant;
42 size?: ToggleSize;
43 } = $props();
44</script>
45
46<TogglePrimitive.Root
47 bind:ref
48 bind:pressed
49 data-slot="toggle"
50 class={cn(toggleVariants({ variant, size }), className)}
51 {...restProps}
52/>