NEXT: Update components to use Zag.js (#2778)

Co-authored-by: endigo9740 <[email protected]>

.changeset/sixty-jeans-drop.md

@@ -0,0 +1,7 @@
+---
+"@skeletonlabs/skeleton-svelte": minor
+"@skeletonlabs/skeleton-react": minor
+"@skeletonlabs/skeleton": patch
+---
+
+All Skeleton components have been updated to integrate Zag.js. This contains a number of breaking component API changes. Updates all documentation. And includes new CSS animations in the Tailwind plugin. ([More Information](https://github.com/skeletonlabs/skeleton/discussions/2784))

package.json

@@ -35,12 +35,14 @@
 		"check": "pnpm -r check",
 		"clean": "node ./scripts/rimraf.js",
 		"dev": "pnpm -F next.skeleton.dev dev",
+		"dev:svelte": "pnpm -F @skeletonlabs/skeleton-svelte dev",
+		"dev:react": "pnpm -F @skeletonlabs/skeleton-react dev",
 		"format": "prettier -w .",
 		"format:check": "prettier . --check",
 		"lint": "eslint . --ignore-path .gitignore",
 		"lint:fix": "eslint . --fix --ignore-path .gitignore",
 		"postinstall": "pnpm -r sync",
-		"test": "pnpm -F '@skeletonlabs/*' test"
+		"test": "pnpm -F \"@skeletonlabs/*\" test"
 	},
 	"devDependencies": {
 		"@changesets/cli": "^2.26.1",

packages/skeleton-react/package.json

@@ -52,6 +52,14 @@
 		"@types/react": "^18.3.3",
 		"@types/react-dom": "^18.3.0",
 		"@vitejs/plugin-react": "^4.3.1",
+		"@zag-js/accordion": "^0.65.0",
+		"@zag-js/avatar": "^0.65.0",
+		"@zag-js/progress": "^0.65.0",
+		"@zag-js/radio-group": "^0.65.0",
+		"@zag-js/rating-group": "^0.65.0",
+		"@zag-js/react": "^0.65.0",
+		"@zag-js/switch": "^0.65.0",
+		"@zag-js/tabs": "^0.65.0",
 		"autoprefixer": "^10.4.19",
 		"jsdom": "^24.1.1",
 		"lucide-react": "^0.341.0",
@@ -64,8 +72,5 @@
 		"vite-plugin-remix-router": "^2.0.0",
 		"vite-plugin-tw-plugin-watcher": "workspace:*",
 		"vitest": "^1.6.0"
-	},
-	"peerDependencies": {
-		"framer-motion": "^11.0.24"
 	}
 }

packages/skeleton-react/src/App.tsx

@@ -20,19 +20,16 @@ function App() {
 					skeleton-react
 				</a>
 				<hr className="hr" />
-				{/* eslint-disable-next-line jsx-a11y/label-has-associated-control */}
-				<label className="label flex items-center justify-between gap-4">
-					<p>Set Mode</p>
-					<Switch
-						id="mode"
-						name="mode"
-						stateActive="bg-surface-200"
-						checked={lightswitch}
-						onChange={onModeChange}
-						inactiveChild={<IconMoon size="14" />}
-						activeChild={<IconSun size="14" />}
-					/>
-				</label>
+				<Switch
+					name="mode"
+					controlActive="bg-surface-200"
+					checked={lightswitch}
+					onCheckedChange={onModeChange}
+					inactiveChild={<IconMoon size="14" />}
+					activeChild={<IconSun size="14" />}
+				>
+					<p>Toggle Mode</p>
+				</Switch>
 				<hr className="hr" />
 				{/* Components */}
 				<div className="space-y-8">
@@ -50,6 +47,9 @@ function App() {
 						<a className="anchor" href="/components/navigation">
 							Navigation
 						</a>
+						<a className="anchor" href="/components/ratings">
+							Ratings
+						</a>
 						<a className="anchor" href="/components/progress">
 							Progress
 						</a>
@@ -65,9 +65,6 @@ function App() {
 						<a className="anchor" href="/components/tabs">
 							Tabs
 						</a>
-						<a className="anchor" href="/components/ratings">
-							Ratings
-						</a>
 					</nav>
 				</div>
 			</div>