toggle additional data on elevation profile

website/src/lib/components/ui/toggle-group/index.ts

@@ -0,0 +1,23 @@
+import type { VariantProps } from "tailwind-variants";
+import { getContext, setContext } from "svelte";
+import Root from "./toggle-group.svelte";
+import Item from "./toggle-group-item.svelte";
+import type { toggleVariants } from "$lib/components/ui/toggle/index.js";
+
+export type ToggleVariants = VariantProps<typeof toggleVariants>;
+
+export function setToggleGroupCtx(props: ToggleVariants) {
+	setContext("toggleGroup", props);
+}
+
+export function getToggleGroupCtx() {
+	return getContext<ToggleVariants>("toggleGroup");
+}
+
+export {
+	Root,
+	Item,
+	//
+	Root as ToggleGroup,
+	Item as ToggleGroupItem,
+};

website/src/lib/components/ui/toggle-group/toggle-group-item.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+	import { ToggleGroup as ToggleGroupPrimitive } from "bits-ui";
+	import { type ToggleVariants, getToggleGroupCtx } from "./index.js";
+	import { cn } from "$lib/utils.js";
+	import { toggleVariants } from "$lib/components/ui/toggle/index.js";
+
+	type $$Props = ToggleGroupPrimitive.ItemProps & ToggleVariants;
+
+	let className: string | undefined | null = undefined;
+
+	export { className as class };
+	export let variant: $$Props["variant"] = "default";
+	export let size: $$Props["size"] = "default";
+	export let value: $$Props["value"];
+
+	const ctx = getToggleGroupCtx();
+</script>
+
+<ToggleGroupPrimitive.Item
+	class={cn(
+		toggleVariants({
+			variant: ctx.variant || variant,
+			size: ctx.size || size,
+		}),
+		className
+	)}
+	{value}
+	{...$$restProps}
+>
+	<slot />
+</ToggleGroupPrimitive.Item>

website/src/lib/components/ui/toggle-group/toggle-group.svelte

@@ -0,0 +1,30 @@
+<script lang="ts">
+	import type { VariantProps } from "tailwind-variants";
+	import { ToggleGroup as ToggleGroupPrimitive } from "bits-ui";
+	import { setToggleGroupCtx } from "./index.js";
+	import type { toggleVariants } from "$lib/components/ui/toggle/index.js";
+	import { cn } from "$lib/utils.js";
+
+	type T = $$Generic<"single" | "multiple">;
+	type $$Props = ToggleGroupPrimitive.Props<T> & VariantProps<typeof toggleVariants>;
+
+	let className: string | undefined | null = undefined;
+	export { className as class };
+	export let variant: $$Props["variant"] = "default";
+	export let size: $$Props["size"] = "default";
+	export let value: $$Props["value"] = undefined;
+
+	setToggleGroupCtx({
+		variant,
+		size,
+	});
+</script>
+
+<ToggleGroupPrimitive.Root
+	class={cn("flex items-center justify-center gap-1", className)}
+	bind:value
+	{...$$restProps}
+	let:builder
+>
+	<slot {builder} />
+</ToggleGroupPrimitive.Root>

website/src/lib/components/ui/toggle/index.ts

@@ -0,0 +1,31 @@
+import { type VariantProps, tv } from "tailwind-variants";
+import Root from "./toggle.svelte";
+
+export const toggleVariants = tv({
+	base: "inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground",
+	variants: {
+		variant: {
+			default: "bg-transparent",
+			outline:
+				"border border-input bg-transparent hover:bg-accent hover:text-accent-foreground",
+		},
+		size: {
+			default: "h-10 px-3",
+			sm: "h-9 px-2.5",
+			lg: "h-11 px-5",
+		},
+	},
+	defaultVariants: {
+		variant: "default",
+		size: "default",
+	},
+});
+
+export type Variant = VariantProps<typeof toggleVariants>["variant"];
+export type Size = VariantProps<typeof toggleVariants>["size"];
+
+export {
+	Root,
+	//
+	Root as Toggle,
+};

website/src/lib/components/ui/toggle/toggle.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+	import { Toggle as TogglePrimitive } from "bits-ui";
+	import { type Size, type Variant, toggleVariants } from "./index.js";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = TogglePrimitive.Props & {
+		variant?: Variant;
+		size?: Size;
+	};
+	type $$Events = TogglePrimitive.Events;
+
+	let className: $$Props["class"] = undefined;
+	export let variant: $$Props["variant"] = "default";
+	export let size: $$Props["size"] = "default";
+	export let pressed: $$Props["pressed"] = undefined;
+	export { className as class };
+</script>
+
+<TogglePrimitive.Root
+	bind:pressed
+	class={cn(toggleVariants({ variant, size, className }))}
+	{...$$restProps}
+	on:click
+>
+	<slot />
+</TogglePrimitive.Root>