Update shadcn components

Author: hhvrc

package.json

@@ -20,6 +20,7 @@
 		"@changesets/cli": "^2.29.4",
 		"@eslint/compat": "^1.2.9",
 		"@eslint/js": "^9.28.0",
+		"@internationalized/date": "^3.8.1",
 		"@lucide/svelte": "^0.511.0",
 		"@microsoft/signalr": "^8.0.7",
 		"@playwright/test": "^1.52.0",

pnpm-lock.yaml

@@ -1,59 +1,45 @@
 ## Post-Update Checklist for shadcn Components
 
-After updating your `shadcn` components with the CLI, complete the following steps to ensure everything integrates correctly:
+After running the shadcn CLI to update your components, follow these steps to ensure everything integrates correctly.
+This process helps you isolate and address any changes the CLI made, then reapply your custom modifications.
 
-### Modifications
+### Steps to Follow
 
-##### `sidebar.svelte`
-Change `ease-linear` for the sidebar to `ease-in-out` and increase the duration from 200ms to 300ms (`duration-300`)
+To start off, we want to eliminate the bulk of the changes that the CLI made, this will make it easier to see what actual changes were made by inspecting the git diff.
 
-1. **Update `sonner` component if modified**
+To do this we will first migrate all the tailwindcss classes to tailwindcss v4, then format all the code to our code style.
 
-   If the `sonner` component was modified by the CLI, it most likely went back to using the `svelte-sonner` package.
-   * Update it to use our own `ColorSchemeStore` implementation instead of the one from the `svelte-sonner` package.
-   * Remove `svelte-sonner` from `package.json`
-
-2. **Redirect utility imports**
-
-   * Replace every instance of
-
-     ```js
-     import ... from '$lib/utils.js'
-     ```
-
-     with:
-
-     ```js
-     import ... from '$lib/utils/shadcn'
-     ```
-
-     This can be done easily with a search and replace tool in your code editor.
+```bash
+pnpx @tailwindcss/upgrade --force
+pnpm run format
+```
 
-3. **Replace `shadcn` utils file if CLI generated one**
+Now it should be easier to see what the CLI actually changed, and we can now proceed with the following steps:
 
-   * If the CLI created `src/lib/utils.ts`, overwrite your existing `src/lib/utils/shadcn.ts` with it.
+1. **Update `sidebar` component if modified**
 
-4. **Run tailwindcss migration utility**
+   If the `sidebar` component was modified by the CLI, it most likely went back to using `ease-linear` and `duration-200`.
+   * Change `ease-linear` for the sidebar to `ease-in-out`.
+   * Increase the duration from `duration-200` to `duration-300`.
 
-   * Shadcn-svelte still hasnt migrated to tailwindcss v4, so we need to run the migration utility to ensure everything is up to date.
+2. **Update `sonner` component if modified**
 
-     ```bash
-     pnpx @tailwindcss/upgrade --force
-     ```
+   If the `sonner` component was modified by the CLI, it most likely went back to using the `svelte-sonner` package.
+   * Update it to use our own `ColorSchemeStore` implementation instead of the one from the `svelte-sonner` package.
+   * Remove `svelte-sonner` from `package.json`
 
-5. **Apply consistent styling**
+3. **Run code formatting again**
 
-   * Run the following command to apply consistent styling:
+   Now we need to run the code formatting again to ensure everything is consistent after the changes made in steps 1 and 2.
 
-     ```bash
-     pnpm run format
-     ```
+   ```bash
+   pnpm run format
+   ```
 
-6. **Check code for any issues**
+4. **Check code for any issues**
 
    * Run the following commands to check for any issues:
 
      ```bash
-     pnpm run lint
      pnpm run check
      ```

src/lib/components/ui/README.md

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { Accordion as AccordionPrimitive } from "bits-ui";
-	import { cn, type WithoutChild } from "$lib/utils/shadcn";
+	import { cn, type WithoutChild } from "$lib/utils/shadcn.js";
 
 	let {
 		ref = $bindable(null),

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

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { Accordion as AccordionPrimitive } from "bits-ui";
-	import { cn } from "$lib/utils/shadcn";
+	import { cn } from "$lib/utils/shadcn.js";
 
 	let {
 		ref = $bindable(null),

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

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { Accordion as AccordionPrimitive } from "bits-ui";
 	import ChevronDownIcon from "@lucide/svelte/icons/chevron-down";
-	import { cn, type WithoutChild } from "$lib/utils/shadcn";
+	import { cn, type WithoutChild } from "$lib/utils/shadcn.js";
 
 	let {
 		ref = $bindable(null),

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

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { Avatar as AvatarPrimitive } from "bits-ui";
-	import { cn } from "$lib/utils/shadcn";
+	import { cn } from "$lib/utils/shadcn.js";
 
 	let {
 		ref = $bindable(null),

src/lib/components/ui/avatar/avatar-fallback.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { Avatar as AvatarPrimitive } from "bits-ui";
-	import { cn } from "$lib/utils/shadcn";
+	import { cn } from "$lib/utils/shadcn.js";
 
 	let {
 		ref = $bindable(null),

src/lib/components/ui/avatar/avatar-image.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { Avatar as AvatarPrimitive } from "bits-ui";
-	import { cn } from "$lib/utils/shadcn";
+	import { cn } from "$lib/utils/shadcn.js";
 
 	let {
 		ref = $bindable(null),

src/lib/components/ui/avatar/avatar.svelte

@@ -24,7 +24,7 @@
 
 <script lang="ts">
 	import type { HTMLAnchorAttributes } from "svelte/elements";
-	import { cn, type WithElementRef } from "$lib/utils/shadcn";
+	import { cn, type WithElementRef } from "$lib/utils/shadcn.js";
 
 	let {
 		ref = $bindable(null),