New badges, updated components and code

- Add Latest and Maintenance badges
- Add a tooltip for explaining what badges mean
- Update shadcn components for faster dev mode
- Code improvements

package.json

@@ -18,6 +18,7 @@
 		"@tailwindcss/typography": "^0.5.10",
 		"@total-typescript/ts-reset": "^0.5.1",
 		"@types/eslint": "^8.56.2",
+		"@types/semver": "^7.5.7",
 		"@typescript-eslint/eslint-plugin": "^6.21.0",
 		"@typescript-eslint/parser": "^6.21.0",
 		"@vercel/speed-insights": "^1.0.9",
@@ -35,6 +36,7 @@
 		"prettier": "^3.2.5",
 		"prettier-plugin-svelte": "^3.1.2",
 		"prettier-plugin-tailwindcss": "^0.5.11",
+		"semver": "^7.6.0",
 		"svelte": "^4.2.10",
 		"svelte-check": "^3.6.4",
 		"svelte-exmarkdown": "^3.0.3",

src/lib/components/ui/accordion/accordion-content.svelte

@@ -8,7 +8,7 @@
 	let className: $$Props["class"] = undefined;
 	export let transition: $$Props["transition"] = slide;
 	export let transitionConfig: $$Props["transitionConfig"] = {
-		duration: 200
+		duration: 200,
 	};
 	export { className as class };
 </script>

src/lib/components/ui/accordion/accordion-trigger.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { Accordion as AccordionPrimitive } from "bits-ui";
-	import { ChevronDown } from "lucide-svelte";
+	import ChevronDown from "lucide-svelte/icons/chevron-down";
 	import { cn } from "$lib/utils";
 
 	type $$Props = AccordionPrimitive.TriggerProps;

src/lib/components/ui/accordion/index.ts

@@ -13,5 +13,5 @@ export {
 	Root as Accordion,
 	Content as AccordionContent,
 	Item as AccordionItem,
-	Trigger as AccordionTrigger
+	Trigger as AccordionTrigger,
 };

src/lib/components/ui/badge/index.ts

@@ -10,12 +10,12 @@ export const badgeVariants = tv({
 				"bg-secondary hover:bg-secondary/80 border-transparent text-secondary-foreground",
 			destructive:
 				"bg-destructive hover:bg-destructive/80 border-transparent text-destructive-foreground",
-			outline: "text-foreground"
-		}
+			outline: "text-foreground",
+		},
 	},
 	defaultVariants: {
-		variant: "default"
-	}
+		variant: "default",
+	},
 });
 
 export type Variant = VariantProps<typeof badgeVariants>["variant"];

src/lib/components/ui/button/index.ts

@@ -12,19 +12,19 @@ const buttonVariants = tv({
 				"border border-input bg-background hover:bg-accent hover:text-accent-foreground",
 			secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
 			ghost: "hover:bg-accent hover:text-accent-foreground",
-			link: "text-primary underline-offset-4 hover:underline"
+			link: "text-primary underline-offset-4 hover:underline",
 		},
 		size: {
 			default: "h-10 px-4 py-2",
 			sm: "h-9 rounded-md px-3",
 			lg: "h-11 rounded-md px-8",
-			icon: "h-10 w-10"
-		}
+			icon: "h-10 w-10",
+		},
 	},
 	defaultVariants: {
 		variant: "default",
-		size: "default"
-	}
+		size: "default",
+	},
 });
 
 type Variant = VariantProps<typeof buttonVariants>["variant"];
@@ -45,5 +45,5 @@ export {
 	Root as Button,
 	type Props as ButtonProps,
 	type Events as ButtonEvents,
-	buttonVariants
+	buttonVariants,
 };

src/lib/components/ui/checkbox/checkbox.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { Checkbox as CheckboxPrimitive } from "bits-ui";
-	import { Check, Minus } from "lucide-svelte";
+	import Check from "lucide-svelte/icons/check";
+	import Minus from "lucide-svelte/icons/minus";
 	import { cn } from "$lib/utils";
 
 	type $$Props = CheckboxPrimitive.Props;
@@ -13,15 +14,15 @@
 
 <CheckboxPrimitive.Root
 	class={cn(
-		"box-content peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground data-[disabled=true]:cursor-not-allowed data-[disabled=true]:opacity-50",
+		"peer box-content h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[disabled=true]:cursor-not-allowed data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground data-[disabled=true]:opacity-50",
 		className
 	)}
 	bind:checked
 	{...$$restProps}
 	on:click
 >
 	<CheckboxPrimitive.Indicator
-		class={cn("flex items-center justify-center text-current h-4 w-4")}
+		class={cn("flex h-4 w-4 items-center justify-center text-current")}
 		let:isChecked
 		let:isIndeterminate
 	>

src/lib/components/ui/checkbox/index.ts

@@ -2,5 +2,5 @@ import Root from "./checkbox.svelte";
 export {
 	Root,
 	//
-	Root as Checkbox
+	Root as Checkbox,
 };

src/lib/components/ui/dropdown-menu/dropdown-menu-checkbox-item.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
+	import Check from "lucide-svelte/icons/check";
 	import { cn } from "$lib/utils";
-	import { Check } from "lucide-svelte";
 
 	type $$Props = DropdownMenuPrimitive.CheckboxItemProps;
 	type $$Events = DropdownMenuPrimitive.CheckboxItemEvents;
@@ -14,7 +14,7 @@
 <DropdownMenuPrimitive.CheckboxItem
 	bind:checked
 	class={cn(
-		"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+		"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:opacity-50",
 		className
 	)}
 	{...$$restProps}

src/lib/components/ui/dropdown-menu/dropdown-menu-item.svelte

@@ -14,7 +14,7 @@
 
 <DropdownMenuPrimitive.Item
 	class={cn(
-		"relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+		"relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled]:pointer-events-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:opacity-50",
 		inset && "pl-8",
 		className
 	)}

src/lib/components/ui/dropdown-menu/dropdown-menu-radio-item.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
+	import Circle from "lucide-svelte/icons/circle";
 	import { cn } from "$lib/utils";
-	import { Circle } from "lucide-svelte";
 
 	type $$Props = DropdownMenuPrimitive.RadioItemProps;
 	type $$Events = DropdownMenuPrimitive.RadioItemEvents;
@@ -13,7 +13,7 @@
 
 <DropdownMenuPrimitive.RadioItem
 	class={cn(
-		"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+		"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:opacity-50",
 		className
 	)}
 	{value}

src/lib/components/ui/dropdown-menu/dropdown-menu-sub-content.svelte

@@ -9,7 +9,7 @@
 	export let transition: $$Props["transition"] = flyAndScale;
 	export let transitionConfig: $$Props["transitionConfig"] = {
 		x: -10,
-		y: 0
+		y: 0,
 	};
 	export { className as class };
 </script>

src/lib/components/ui/dropdown-menu/dropdown-menu-sub-trigger.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
+	import ChevronRight from "lucide-svelte/icons/chevron-right";
 	import { cn } from "$lib/utils";
-	import { ChevronRight } from "lucide-svelte";
 
 	type $$Props = DropdownMenuPrimitive.SubTriggerProps & {
 		inset?: boolean;

src/lib/components/ui/dropdown-menu/index.ts

@@ -44,5 +44,5 @@ export {
 	RadioGroup as DropdownMenuRadioGroup,
 	SubContent as DropdownMenuSubContent,
 	SubTrigger as DropdownMenuSubTrigger,
-	CheckboxItem as DropdownMenuCheckboxItem
+	CheckboxItem as DropdownMenuCheckboxItem,
 };

src/lib/components/ui/label/index.ts

@@ -3,5 +3,5 @@ import Root from "./label.svelte";
 export {
 	Root,
 	//
-	Root as Label
+	Root as Label,
 };

src/lib/components/ui/tabs/index.ts

@@ -14,5 +14,5 @@ export {
 	Root as Tabs,
 	Content as TabsContent,
 	List as TabsList,
-	Trigger as TabsTrigger
+	Trigger as TabsTrigger,
 };

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

@@ -19,5 +19,5 @@ export {
 	Item,
 	//
 	Root as ToggleGroup,
-	Item as ToggleGroupItem
+	Item as ToggleGroupItem,
 };

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

@@ -20,7 +20,7 @@
 	class={cn(
 		toggleVariants({
 			variant: ctx.variant || variant,
-			size: ctx.size || size
+			size: ctx.size || size,
 		}),
 		className
 	)}

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

@@ -16,7 +16,7 @@
 
 	setToggleGroupCtx({
 		variant,
-		size
+		size,
 	});
 </script>
 

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

@@ -7,18 +7,18 @@ export const toggleVariants = tv({
 		variant: {
 			default: "bg-transparent",
 			outline:
-				"bg-transparent border border-input hover:bg-accent hover:text-accent-foreground"
+				"bg-transparent border border-input hover:bg-accent hover:text-accent-foreground",
 		},
 		size: {
 			default: "h-10 px-3",
 			sm: "h-9 px-2.5",
-			lg: "h-11 px-5"
-		}
+			lg: "h-11 px-5",
+		},
 	},
 	defaultVariants: {
 		variant: "default",
-		size: "default"
-	}
+		size: "default",
+	},
 });
 
 export type Variant = VariantProps<typeof toggleVariants>["variant"];
@@ -27,5 +27,5 @@ export type Size = VariantProps<typeof toggleVariants>["size"];
 export {
 	Root,
 	//
-	Root as Toggle
+	Root as Toggle,
 };

src/lib/components/ui/tooltip/index.ts

@@ -0,0 +1,15 @@
+import { Tooltip as TooltipPrimitive } from "bits-ui";
+import Content from "./tooltip-content.svelte";
+
+const Root = TooltipPrimitive.Root;
+const Trigger = TooltipPrimitive.Trigger;
+
+export {
+	Root,
+	Trigger,
+	Content,
+	//
+	Root as Tooltip,
+	Content as TooltipContent,
+	Trigger as TooltipTrigger,
+};