NEXT Dependency Bump - December 4, 2024

.github/workflows/ci.yml

@@ -17,7 +17,7 @@ jobs:
       - uses: pnpm/action-setup@v4
       - uses: actions/setup-node@v4
         with:
-          node-version: 18
+          node-version: 22
           cache: pnpm
 
       - name: Install dependencies
@@ -37,7 +37,7 @@ jobs:
       - uses: pnpm/action-setup@v4
       - uses: actions/setup-node@v4
         with:
-          node-version: 18
+          node-version: 22
           cache: pnpm
 
       - name: Install dependencies
@@ -54,7 +54,7 @@ jobs:
       - uses: pnpm/action-setup@v4
       - uses: actions/setup-node@v4
         with:
-          node-version: 18
+          node-version: 22
           cache: pnpm
 
       - name: Install dependencies
@@ -71,7 +71,7 @@ jobs:
       - uses: pnpm/action-setup@v4
       - uses: actions/setup-node@v4
         with:
-          node-version: 18
+          node-version: 22
           cache: pnpm
 
       - name: Install dependencies

.github/workflows/release-next.yaml

@@ -20,10 +20,10 @@ jobs:
       - name: Use PNPM
         uses: pnpm/action-setup@v4
 
-      - name: Use Node v18
+      - name: Use Node v22
         uses: actions/setup-node@v4
         with:
-          node-version: 18
+          node-version: 22
           cache: pnpm
 
       - name: Install dependencies

packages/skeleton-react/package.json

@@ -57,24 +57,24 @@
 	"devDependencies": {
 		"@skeletonlabs/skeleton": "workspace:*",
 		"@tailwindcss/forms": "^0.5.9",
-		"@testing-library/jest-dom": "^6.6.2",
+		"@testing-library/jest-dom": "^6.6.3",
 		"@testing-library/react": "^16.0.1",
 		"@testing-library/user-event": "^14.5.2",
-		"@types/react": "^18.3.12",
+		"@types/react": "^18.3.13",
 		"@types/react-dom": "^18.3.1",
-		"@vitejs/plugin-react": "^4.3.3",
+		"@vitejs/plugin-react": "^4.3.4",
 		"autoprefixer": "^10.4.20",
 		"jsdom": "^25.0.1",
-		"lucide-react": "^0.453.0",
-		"postcss": "^8.4.47",
+		"lucide-react": "^0.465.0",
+		"postcss": "^8.4.49",
 		"react": "^18.3.1",
 		"react-dom": "^18.3.1",
-		"react-router-dom": "^6.27.0",
-		"tailwindcss": "^3.4.14",
+		"react-router-dom": "^7.0.2",
+		"tailwindcss": "^3.4.16",
 		"typescript": "catalog:",
-		"vite": "^5.4.10",
+		"vite": "^6.0.2",
 		"vite-plugin-remix-router": "^2.0.0",
 		"vite-plugin-tw-plugin-watcher": "workspace:*",
-		"vitest": "^2.1.3"
+		"vitest": "^2.1.8"
 	}
 }

packages/skeleton-react/src/lib/components/Accordion/Accordion.tsx

@@ -1,28 +1,14 @@
 'use client';
 
-import { createContext, useContext, useId } from 'react';
+import { useContext, useId } from 'react';
 import type { FC } from 'react';
 import * as accordion from '@zag-js/accordion';
 import { useMachine, normalizeProps } from '@zag-js/react';
 
-import type { AccordionContextState, AccordionControlProps, AccordionItemProps, AccordionPanelProps, AccordionProps } from './types.js';
+import type { AccordionControlProps, AccordionItemProps, AccordionPanelProps, AccordionProps } from './types.js';
+import { AccordionContext, AccordionItemContext } from './contexts.js';
 import { noop } from '../../internal/noop.js';
 
-// Contexts ---
-
-export const AccordionContext = createContext<AccordionContextState>({
-	animDuration: 0.2,
-	iconOpen: '-',
-	iconClosed: '+',
-	api: {} as ReturnType<typeof accordion.connect>
-});
-export const AccordionItemContext = createContext<accordion.ItemProps>({
-	value: '',
-	disabled: false
-});
-
-// Components ---
-
 const AccordionRoot: FC<AccordionProps> = ({
 	animDuration = 0.2,
 	// Root

packages/skeleton-react/src/lib/components/Accordion/contexts.ts

@@ -0,0 +1,16 @@
+// Accordion Contexts
+
+import { createContext } from 'react';
+import { AccordionContextState } from './types';
+import * as accordion from '@zag-js/accordion';
+
+export const AccordionContext = createContext<AccordionContextState>({
+	animDuration: 0.2,
+	iconOpen: '-',
+	iconClosed: '+',
+	api: {} as ReturnType<typeof accordion.connect>
+});
+export const AccordionItemContext = createContext<accordion.ItemProps>({
+	value: '',
+	disabled: false
+});

packages/skeleton-react/src/lib/components/Navigation/Navigation.tsx

@@ -1,18 +1,8 @@
 'use client';
 
-import React, { createContext, useContext } from 'react';
+import React, { useContext } from 'react';
 import { NavContextState, NavRailProps, NavBarProps, NavTileProps } from './types.js';
-
-// Contexts ---
-
-export const NavContext = createContext<NavContextState>({
-	parent: 'none',
-	value: '',
-	expanded: false,
-	onSelectionHandler: () => {}
-});
-
-// Components ---
+import { NavContext } from './contexts.js';
 
 export const NavRail: React.FC<NavRailProps> = ({
 	value = '',

packages/skeleton-react/src/lib/components/Navigation/contexts.ts

@@ -0,0 +1,9 @@
+import { createContext } from 'react';
+import { NavContextState } from './types';
+
+export const NavContext = createContext<NavContextState>({
+	parent: 'none',
+	value: '',
+	expanded: false,
+	onSelectionHandler: () => {}
+});

packages/skeleton-react/src/lib/components/Segment/Segment.tsx

@@ -1,20 +1,12 @@
 'use client';
 
-import { FC, createContext, useContext, useId } from 'react';
+import { FC, useContext, useId } from 'react';
 import * as radio from '@zag-js/radio-group';
 import { useMachine, normalizeProps } from '@zag-js/react';
-import type { SegmentContextState, SegmentProps, SegmentItemsProps } from './types.js';
+import type { SegmentProps, SegmentItemsProps } from './types.js';
+import { SegmentContext } from './contexts.js';
 import { noop } from '../../internal/noop.js';
 
-// Contexts ---
-
-export const SegmentContext = createContext<SegmentContextState>({
-	api: {} as ReturnType<typeof radio.connect>,
-	indicatorText: ''
-});
-
-// Components ---
-
 const SegmentRoot: FC<SegmentProps> = ({
 	orientation = 'horizontal',
 	// Root

packages/skeleton-react/src/lib/components/Segment/contexts.ts

@@ -0,0 +1,8 @@
+import { createContext } from 'react';
+import { SegmentContextState } from './types';
+import * as radio from '@zag-js/radio-group';
+
+export const SegmentContext = createContext<SegmentContextState>({
+	api: {} as ReturnType<typeof radio.connect>,
+	indicatorText: ''
+});

packages/skeleton-react/src/lib/components/Tabs/Tabs.tsx

@@ -1,20 +1,12 @@
 'use client';
 
-import { createContext, FC, useContext, useId } from 'react';
+import { FC, useContext, useId } from 'react';
 import * as tabs from '@zag-js/tabs';
 import { useMachine, normalizeProps } from '@zag-js/react';
-import { TabsContextState, TabsRootProps, TabsListProps, TabsControlProps, TabsContentProps, TabsPanelProps } from './types.js';
+import { TabsRootProps, TabsListProps, TabsControlProps, TabsContentProps, TabsPanelProps } from './types.js';
+import { TabsContext } from './contexts.js';
 import { noop } from '../../internal/noop.js';
 
-// Context ---
-
-export const TabsContext = createContext<TabsContextState>({
-	fluid: false,
-	api: {} as ReturnType<typeof tabs.connect>
-});
-
-// Components ---
-
 const TabsRoot: FC<TabsRootProps> = ({
 	fluid = false,
 	// Root

packages/skeleton-react/src/lib/components/Tabs/contexts.ts

@@ -0,0 +1,8 @@
+import { createContext } from 'react';
+import { TabsContextState } from './types';
+import * as tabs from '@zag-js/tabs';
+
+export const TabsContext = createContext<TabsContextState>({
+	fluid: false,
+	api: {} as ReturnType<typeof tabs.connect>
+});

packages/skeleton-svelte/package.json

@@ -54,27 +54,27 @@
 	},
 	"devDependencies": {
 		"@skeletonlabs/skeleton": "workspace:*",
-		"@sveltejs/adapter-auto": "^3.2.2",
-		"@sveltejs/kit": "^2.5.18",
-		"@sveltejs/package": "^2.3.2",
-		"@sveltejs/vite-plugin-svelte": "^4.0.0-next.6",
-		"@tailwindcss/forms": "^0.5.7",
-		"@testing-library/jest-dom": "^6.6.2",
-		"@testing-library/svelte": "^5.2.4",
-		"autoprefixer": "^10.4.19",
+		"@sveltejs/adapter-auto": "^3.3.1",
+		"@sveltejs/kit": "^2.9.0",
+		"@sveltejs/package": "^2.3.7",
+		"@sveltejs/vite-plugin-svelte": "^5.0.1",
+		"@tailwindcss/forms": "^0.5.9",
+		"@testing-library/jest-dom": "^6.6.3",
+		"@testing-library/svelte": "^5.2.6",
+		"autoprefixer": "^10.4.20",
 		"jsdom": "^25.0.1",
-		"lucide-svelte": "^0.436.0",
-		"postcss": "^8.4.39",
-		"postcss-load-config": "^5.1.0",
-		"publint": "^0.1.16",
-		"svelte": "^5.0.5",
-		"svelte-check": "^3.8.4",
-		"tailwindcss": "^3.4.6",
-		"tslib": "^2.6.3",
+		"lucide-svelte": "^0.465.0",
+		"postcss": "^8.4.49",
+		"postcss-load-config": "^6.0.1",
+		"publint": "^0.2.12",
+		"svelte": "^5.6.2",
+		"svelte-check": "^4.1.1",
+		"tailwindcss": "^3.4.16",
+		"tslib": "^2.8.1",
 		"typescript": "catalog:",
-		"vite": "^5.3.4",
+		"vite": "^6.0.2",
 		"vite-plugin-tw-plugin-watcher": "workspace:*",
-		"vitest": "^2.1.5"
+		"vitest": "^2.1.8"
 	},
 	"type": "module"
 }

packages/skeleton-svelte/vite.config.ts

@@ -7,7 +7,12 @@ import path from 'node:path';
 
 export default defineConfig({
 	plugins: [
+		// NOTE: confirmed the following with @CokaKola on the Skeleton Discord after the Vite 6 upgrade:
+		// There is a known Vitest issue where they reverted their peer dep of vite 6 so the types are now mismatched.
+		// He advised reverting back to Vitest 2.1.6 or adding an ignore comment, with emphasis on the latter.
+		// @ts-expect-error due to vitest peer dependency issue per Vite 6 update
 		sveltekit(),
+		// @ts-expect-error due to vitest peer dependency issue per Vite 6 update
 		svelteTesting(),
 		skeletonPluginWatcher(path.resolve(path.join('..', '..', 'packages', 'skeleton', 'src', 'plugin')))
 	],

packages/skeleton/package.json

@@ -32,11 +32,11 @@
 	"homepage": "https://skeleton.dev/",
 	"devDependencies": {
 		"@types/postcss-import": "^14.0.3",
-		"postcss": "8.4.47",
+		"postcss": "8.4.49",
 		"postcss-import": "16.1.0",
 		"postcss-load-config": "6.0.1",
-		"tailwindcss": "3.4.14",
-		"tslib": "2.8.0",
+		"tailwindcss": "3.4.16",
+		"tslib": "2.8.1",
 		"tsup": "^8.3.0",
 		"tsx": "^4.19.1",
 		"typescript": "catalog:"