feat(desktop): add shadcn-svelte config and Toggle/ToggleGroup components

desktop/components.json

@@ -0,0 +1,16 @@
+{
+  "$schema": "https://shadcn-svelte.com/schema.json",
+  "tailwind": {
+    "css": "src/renderer/src/app.css",
+    "baseColor": "zinc"
+  },
+  "aliases": {
+    "lib": "$lib",
+    "utils": "$lib/utils",
+    "components": "$lib/components",
+    "ui": "$lib/components/ui",
+    "hooks": "$lib/hooks"
+  },
+  "typescript": true,
+  "registry": "https://shadcn-svelte.com/registry"
+}

desktop/src/renderer/src/lib/components/ui/toggle-group/index.ts

@@ -0,0 +1,10 @@
+import Root, { type ToggleGroupContext } from "./toggle-group.svelte"
+import Item from "./toggle-group-item.svelte"
+
+export {
+  Item,
+  Item as ToggleGroupItem,
+  Root,
+  Root as ToggleGroup,
+  type ToggleGroupContext,
+}

desktop/src/renderer/src/lib/components/ui/toggle-group/toggle-group-item.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">
+	import { ToggleGroup as ToggleGroupPrimitive } from "bits-ui";
+	import { getContext } from "svelte";
+	import { toggleVariants } from "../toggle/index.js";
+	import {
+		type ToggleGroupContext,
+		TOGGLE_GROUP_CONTEXT,
+	} from "./toggle-group.svelte";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		variant,
+		size,
+		...restProps
+	}: ToggleGroupPrimitive.ItemProps & ToggleGroupContext = $props();
+
+	const ctx = getContext<ToggleGroupContext>(TOGGLE_GROUP_CONTEXT);
+</script>
+
+<ToggleGroupPrimitive.Item
+	bind:ref
+	data-slot="toggle-group-item"
+	data-variant={ctx?.variant ?? variant}
+	data-size={ctx?.size ?? size}
+	class={cn(
+		toggleVariants({ variant: ctx?.variant ?? variant, size: ctx?.size ?? size }),
+		"min-w-0 flex-1 shrink-0 rounded-none shadow-none first:rounded-l-md last:rounded-r-md focus:z-10 focus-visible:z-10 data-[variant=outline]:border-l-0 data-[variant=outline]:first:border-l",
+		className
+	)}
+	{...restProps}
+/>

desktop/src/renderer/src/lib/components/ui/toggle-group/toggle-group.svelte

@@ -0,0 +1,48 @@
+<script lang="ts" module>
+import type { VariantProps } from "tailwind-variants"
+import type { toggleVariants } from "../toggle/index.js"
+
+export type ToggleGroupContext = VariantProps<typeof toggleVariants>
+
+export const TOGGLE_GROUP_CONTEXT = Symbol("toggle-group")
+</script>
+
+<script lang="ts">
+	import { ToggleGroup as ToggleGroupPrimitive } from "bits-ui";
+	import { setContext } from "svelte";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		value = $bindable(),
+		size = "default",
+		variant = "default",
+		children,
+		...restProps
+	}: ToggleGroupPrimitive.RootProps & ToggleGroupContext = $props();
+
+	setContext<ToggleGroupContext>(TOGGLE_GROUP_CONTEXT, {
+		get variant() {
+			return variant;
+		},
+		get size() {
+			return size;
+		},
+	});
+</script>
+
+<ToggleGroupPrimitive.Root
+	bind:ref
+	bind:value={value as never}
+	data-slot="toggle-group"
+	data-variant={variant}
+	data-size={size}
+	class={cn(
+		"group/toggle-group flex w-fit items-center rounded-md data-[variant=outline]:shadow-xs",
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</ToggleGroupPrimitive.Root>

desktop/src/renderer/src/lib/components/ui/toggle/index.ts

@@ -0,0 +1,15 @@
+import Root, {
+  type ToggleSize,
+  type ToggleVariant,
+  type ToggleVariants,
+  toggleVariants,
+} from "./toggle.svelte"
+
+export {
+  Root,
+  Root as Toggle,
+  type ToggleSize,
+  type ToggleVariant,
+  type ToggleVariants,
+  toggleVariants,
+}

desktop/src/renderer/src/lib/components/ui/toggle/toggle.svelte

@@ -0,0 +1,52 @@
+<script lang="ts" module>
+import { type VariantProps, tv } from "tailwind-variants"
+
+export const toggleVariants = tv({
+  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 rounded-md text-sm font-medium whitespace-nowrap transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+  variants: {
+    variant: {
+      default: "bg-transparent",
+      outline:
+        "border-input hover:bg-accent hover:text-accent-foreground border bg-transparent shadow-xs",
+    },
+    size: {
+      default: "h-9 min-w-9 px-2",
+      sm: "h-8 min-w-8 px-1.5",
+      lg: "h-10 min-w-10 px-2.5",
+    },
+  },
+  defaultVariants: {
+    variant: "default",
+    size: "default",
+  },
+})
+
+export type ToggleVariant = VariantProps<typeof toggleVariants>["variant"]
+export type ToggleSize = VariantProps<typeof toggleVariants>["size"]
+export type ToggleVariants = VariantProps<typeof toggleVariants>
+</script>
+
+<script lang="ts">
+	import { Toggle as TogglePrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		variant = "default",
+		size = "default",
+		class: className,
+		pressed = $bindable(false),
+		...restProps
+	}: TogglePrimitive.RootProps & {
+		variant?: ToggleVariant;
+		size?: ToggleSize;
+	} = $props();
+</script>
+
+<TogglePrimitive.Root
+	bind:ref
+	bind:pressed
+	data-slot="toggle"
+	class={cn(toggleVariants({ variant, size }), className)}
+	{...restProps}
+/>

desktop/tsconfig.json

@@ -6,7 +6,12 @@
     "esModuleInterop": true,
     "strict": true,
     "skipLibCheck": true,
-    "outDir": "dist"
+    "outDir": "dist",
+    "paths": {
+      "$lib": ["./src/renderer/src/lib"],
+      "$lib/*": ["./src/renderer/src/lib/*"],
+      "$shared/*": ["./src/shared/*"]
+    }
   },
   "include": ["src/main/**/*", "src/preload/**/*", "src/shared/**/*"]
 }