Bump the development-dependencies group with 9 updates

eslint.config.mjs

@@ -51,6 +51,7 @@ export default tseslint.config(
     files: ["**/routes/**/*.{ts,tsx}"],
     rules: {
       "perfectionist/sort-objects": "off",
+      "react-refresh/only-export-components": "off",
     },
   },
   {

package.json

@@ -43,30 +43,30 @@
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.2",
     "@types/eslint__js": "^9.14.0",
-    "@types/node": "^25.0.9",
+    "@types/node": "^25.2.0",
     "@types/react": "^19.2.8",
     "@types/react-dom": "^19.2.3",
     "@vitejs/plugin-react-swc": "^4.2.2",
     "concurrently": "^9.2.1",
     "eslint": "^9.39.2",
     "eslint-config-prettier": "^10.1.8",
-    "eslint-plugin-perfectionist": "^5.3.1",
+    "eslint-plugin-perfectionist": "^5.4.0",
     "eslint-plugin-react-hooks": "^7.0.1",
-    "eslint-plugin-react-refresh": "^0.4.26",
-    "eslint-plugin-storybook": "^10.1.11",
+    "eslint-plugin-react-refresh": "^0.5.0",
+    "eslint-plugin-storybook": "^10.2.3",
     "fishery": "^2.4.0",
-    "globals": "^17.0.0",
+    "globals": "^17.3.0",
     "jsdom": "^27.4.0",
-    "prettier": "^3.8.0",
+    "prettier": "^3.8.1",
     "prettier-plugin-tailwindcss": "^0.7.2",
     "storybook": "^10.2.3",
     "tailwind-csstree": "^0.1.0",
     "tailwindcss": "^4.1.8",
     "typescript": "^5.9.3",
-    "typescript-eslint": "^8.53.1",
+    "typescript-eslint": "^8.54.0",
     "vite": "^7.3.1",
-    "vite-tsconfig-paths": "^6.0.4",
-    "vitest": "^4.0.17"
+    "vite-tsconfig-paths": "^6.0.5",
+    "vitest": "^4.0.18"
   },
   "overrides": {
     "storybook": "$storybook"

src/components/Badge.colors.ts

@@ -0,0 +1,53 @@
+export const BadgeColors = [
+  "amber",
+  "blue",
+  "cyan",
+  "emerald",
+  "fuchsia",
+  "green",
+  "indigo",
+  "light",
+  "lime",
+  "orange",
+  "pink",
+  "purple",
+  "red",
+  "rose",
+  "sky",
+  "teal",
+  "violet",
+  "yellow",
+  "zinc",
+] as const;
+
+export const badgeColors = {
+  amber:
+    "bg-amber-400/20 text-amber-700 group-data-hover:bg-amber-400/30 dark:bg-amber-400/10 dark:text-amber-400 dark:group-data-hover:bg-amber-400/15",
+  blue: "bg-blue-500/15 text-blue-700 group-data-hover:bg-blue-500/25 dark:text-blue-400 dark:group-data-hover:bg-blue-500/25",
+  cyan: "bg-cyan-400/20 text-cyan-700 group-data-hover:bg-cyan-400/30 dark:bg-cyan-400/10 dark:text-cyan-300 dark:group-data-hover:bg-cyan-400/15",
+  emerald:
+    "bg-emerald-500/15 text-emerald-700 group-data-hover:bg-emerald-500/25 dark:bg-emerald-500/10 dark:text-emerald-400 dark:group-data-hover:bg-emerald-500/20",
+  fuchsia:
+    "bg-fuchsia-400/15 text-fuchsia-700 group-data-hover:bg-fuchsia-400/25 dark:bg-fuchsia-400/10 dark:text-fuchsia-400 dark:group-data-hover:bg-fuchsia-400/20",
+  green:
+    "bg-green-500/15 text-green-700 group-data-hover:bg-green-500/25 dark:bg-green-500/10 dark:text-green-400 dark:group-data-hover:bg-green-500/20",
+  indigo:
+    "bg-indigo-500/15 text-indigo-700 group-data-hover:bg-indigo-500/25 dark:text-indigo-400 dark:group-data-hover:bg-indigo-500/20",
+  light:
+    "bg-slate-50 text-slate-600 dark:bg-slate-900 dark:text-white ring-1 ring-inset ring-slate-200 dark:ring-slate-700 group-data-hover:bg-slate-50 dark:group-data-hover:bg-slate-800 dark:group-data-hover:text-slate-100",
+  lime: "bg-lime-400/20 text-lime-700 group-data-hover:bg-lime-400/30 dark:bg-lime-400/10 dark:text-lime-300 dark:group-data-hover:bg-lime-400/15",
+  orange:
+    "bg-orange-500/15 text-orange-700 group-data-hover:bg-orange-500/25 dark:bg-orange-500/10 dark:text-orange-400 dark:group-data-hover:bg-orange-500/20",
+  pink: "bg-pink-400/15 text-pink-700 group-data-hover:bg-pink-400/25 dark:bg-pink-400/10 dark:text-pink-400 dark:group-data-hover:bg-pink-400/20",
+  purple:
+    "bg-purple-500/15 text-purple-700 group-data-hover:bg-purple-500/25 dark:text-purple-400 dark:group-data-hover:bg-purple-500/20",
+  red: "bg-red-500/15 text-red-700 group-data-hover:bg-red-500/25 dark:bg-red-500/10 dark:text-red-400 dark:group-data-hover:bg-red-500/20",
+  rose: "bg-rose-400/15 text-rose-700 group-data-hover:bg-rose-400/25 dark:bg-rose-400/10 dark:text-rose-400 dark:group-data-hover:bg-rose-400/20",
+  sky: "bg-sky-500/15 text-sky-700 group-data-hover:bg-sky-500/25 dark:bg-sky-500/10 dark:text-sky-300 dark:group-data-hover:bg-sky-500/20",
+  teal: "bg-teal-500/15 text-teal-700 group-data-hover:bg-teal-500/25 dark:bg-teal-500/10 dark:text-teal-300 dark:group-data-hover:bg-teal-500/20",
+  violet:
+    "bg-violet-500/15 text-violet-700 group-data-hover:bg-violet-500/25 dark:text-violet-400 dark:group-data-hover:bg-violet-500/20",
+  yellow:
+    "bg-yellow-400/20 text-yellow-700 group-data-hover:bg-yellow-400/30 dark:bg-yellow-400/10 dark:text-yellow-300 dark:group-data-hover:bg-yellow-400/15",
+  zinc: "bg-zinc-600/10 text-zinc-700 group-data-hover:bg-zinc-600/20 dark:bg-white/5 dark:text-zinc-400 dark:group-data-hover:bg-white/10",
+} as const;

src/components/Badge.stories.tsx

@@ -1,6 +1,7 @@
 import type { Meta, StoryObj } from "@storybook/react-vite";
 
-import { Badge, BadgeButton, BadgeColors } from "./Badge";
+import { Badge, BadgeButton } from "./Badge";
+import { BadgeColors } from "./Badge.colors";
 
 const meta: Meta<typeof Badge> = {
   component: Badge,

src/components/Badge.tsx

@@ -2,67 +2,12 @@ import * as Headless from "@headlessui/react";
 import clsx from "clsx";
 import React from "react";
 
+import { badgeColors } from "./Badge.colors";
 import { TouchTarget } from "./Button";
 import { HeadlessLink } from "./HeadlessLink";
+export type BadgeColor = keyof typeof badgeColors;
 
-// List of available badge colors
-export const BadgeColors = [
-  "amber",
-  "blue",
-  "cyan",
-  "emerald",
-  "fuchsia",
-  "green",
-  "indigo",
-  "light",
-  "lime",
-  "orange",
-  "pink",
-  "purple",
-  "red",
-  "rose",
-  "sky",
-  "teal",
-  "violet",
-  "yellow",
-  "zinc",
-] as const;
-
-const colors = {
-  amber:
-    "bg-amber-400/20 text-amber-700 group-data-hover:bg-amber-400/30 dark:bg-amber-400/10 dark:text-amber-400 dark:group-data-hover:bg-amber-400/15",
-  blue: "bg-blue-500/15 text-blue-700 group-data-hover:bg-blue-500/25 dark:text-blue-400 dark:group-data-hover:bg-blue-500/25",
-  cyan: "bg-cyan-400/20 text-cyan-700 group-data-hover:bg-cyan-400/30 dark:bg-cyan-400/10 dark:text-cyan-300 dark:group-data-hover:bg-cyan-400/15",
-  emerald:
-    "bg-emerald-500/15 text-emerald-700 group-data-hover:bg-emerald-500/25 dark:bg-emerald-500/10 dark:text-emerald-400 dark:group-data-hover:bg-emerald-500/20",
-  fuchsia:
-    "bg-fuchsia-400/15 text-fuchsia-700 group-data-hover:bg-fuchsia-400/25 dark:bg-fuchsia-400/10 dark:text-fuchsia-400 dark:group-data-hover:bg-fuchsia-400/20",
-  green:
-    "bg-green-500/15 text-green-700 group-data-hover:bg-green-500/25 dark:bg-green-500/10 dark:text-green-400 dark:group-data-hover:bg-green-500/20",
-  indigo:
-    "bg-indigo-500/15 text-indigo-700 group-data-hover:bg-indigo-500/25 dark:text-indigo-400 dark:group-data-hover:bg-indigo-500/20",
-  light:
-    "bg-slate-50 text-slate-600 dark:bg-slate-900 dark:text-white ring-1 ring-inset ring-slate-200 dark:ring-slate-700 group-data-hover:bg-slate-50 dark:group-data-hover:bg-slate-800 dark:group-data-hover:text-slate-100",
-  lime: "bg-lime-400/20 text-lime-700 group-data-hover:bg-lime-400/30 dark:bg-lime-400/10 dark:text-lime-300 dark:group-data-hover:bg-lime-400/15",
-  orange:
-    "bg-orange-500/15 text-orange-700 group-data-hover:bg-orange-500/25 dark:bg-orange-500/10 dark:text-orange-400 dark:group-data-hover:bg-orange-500/20",
-  pink: "bg-pink-400/15 text-pink-700 group-data-hover:bg-pink-400/25 dark:bg-pink-400/10 dark:text-pink-400 dark:group-data-hover:bg-pink-400/20",
-  purple:
-    "bg-purple-500/15 text-purple-700 group-data-hover:bg-purple-500/25 dark:text-purple-400 dark:group-data-hover:bg-purple-500/20",
-  red: "bg-red-500/15 text-red-700 group-data-hover:bg-red-500/25 dark:bg-red-500/10 dark:text-red-400 dark:group-data-hover:bg-red-500/20",
-  rose: "bg-rose-400/15 text-rose-700 group-data-hover:bg-rose-400/25 dark:bg-rose-400/10 dark:text-rose-400 dark:group-data-hover:bg-rose-400/20",
-  sky: "bg-sky-500/15 text-sky-700 group-data-hover:bg-sky-500/25 dark:bg-sky-500/10 dark:text-sky-300 dark:group-data-hover:bg-sky-500/20",
-  teal: "bg-teal-500/15 text-teal-700 group-data-hover:bg-teal-500/25 dark:bg-teal-500/10 dark:text-teal-300 dark:group-data-hover:bg-teal-500/20",
-  violet:
-    "bg-violet-500/15 text-violet-700 group-data-hover:bg-violet-500/25 dark:text-violet-400 dark:group-data-hover:bg-violet-500/20",
-  yellow:
-    "bg-yellow-400/20 text-yellow-700 group-data-hover:bg-yellow-400/30 dark:bg-yellow-400/10 dark:text-yellow-300 dark:group-data-hover:bg-yellow-400/15",
-  zinc: "bg-zinc-600/10 text-zinc-700 group-data-hover:bg-zinc-600/20 dark:bg-white/5 dark:text-zinc-400 dark:group-data-hover:bg-white/10",
-};
-
-export type BadgeColor = keyof typeof colors;
-
-type BadgeProps = { color?: keyof typeof colors };
+type BadgeProps = { color?: BadgeColor };
 
 export function Badge({
   className,
@@ -75,7 +20,7 @@ export function Badge({
       className={clsx(
         "inline-flex items-center gap-x-1.5 rounded-md px-1.5 py-0.5 text-sm/5 font-medium sm:text-xs/5 forced-colors:outline",
         className,
-        colors[color],
+        badgeColors[color],
       )}
     />
   );

src/components/TagInput.stories.ts

@@ -1,6 +1,7 @@
 import type { Meta, StoryObj } from "@storybook/react-vite";
 
-import { type BadgeColor, BadgeColors } from "./Badge";
+import { type BadgeColor } from "./Badge";
+import { BadgeColors } from "./Badge.colors";
 import TagInput from "./TagInput";
 
 const meta: Meta<typeof TagInput> = {

src/routeTree.gen.ts

@@ -93,9 +93,9 @@ export interface FileRoutesByFullPath {
   "/queues/$name": typeof QueuesNameRoute
   "/workflows/$workflowId": typeof WorkflowsWorkflowIdRoute
   "/jobs/": typeof JobsIndexRoute
-  "/periodic-jobs": typeof PeriodicJobsIndexRoute
+  "/periodic-jobs/": typeof PeriodicJobsIndexRoute
   "/queues/": typeof QueuesIndexRoute
-  "/workflows": typeof WorkflowsIndexRoute
+  "/workflows/": typeof WorkflowsIndexRoute
 }
 export interface FileRoutesByTo {
   "/": typeof IndexRoute
@@ -136,9 +136,9 @@ export interface FileRouteTypes {
     | "/queues/$name"
     | "/workflows/$workflowId"
     | "/jobs/"
-    | "/periodic-jobs"
+    | "/periodic-jobs/"
     | "/queues/"
-    | "/workflows"
+    | "/workflows/"
   fileRoutesByTo: FileRoutesByTo
   to:
     | "/"
@@ -211,7 +211,7 @@ declare module "@tanstack/react-router" {
     "/workflows/": {
       id: "/workflows/"
       path: "/workflows"
-      fullPath: "/workflows"
+      fullPath: "/workflows/"
       preLoaderRoute: typeof WorkflowsIndexRouteImport
       parentRoute: typeof rootRouteImport
     }
@@ -225,7 +225,7 @@ declare module "@tanstack/react-router" {
     "/periodic-jobs/": {
       id: "/periodic-jobs/"
       path: "/periodic-jobs"
-      fullPath: "/periodic-jobs"
+      fullPath: "/periodic-jobs/"
       preLoaderRoute: typeof PeriodicJobsIndexRouteImport
       parentRoute: typeof rootRouteImport
     }