perf: monorepo improvements

package.json

@@ -7,14 +7,15 @@
 		"dev:themes": "pnpm --parallel --filter @skeletonlabs/skeleton --filter @skeletonlabs/themes.skeleton.dev dev",
 		"dev:svelte": "pnpm --parallel --filter @skeletonlabs/skeleton --filter @skeletonlabs/skeleton-svelte --filter @skeletonlabs/skeleton-common --filter @skeletonlabs/playground-skeleton-svelte dev",
 		"dev:react": "pnpm --parallel --filter @skeletonlabs/skeleton --filter @skeletonlabs/skeleton-react --filter @skeletonlabs/skeleton-common --filter @skeletonlabs/playground-skeleton-react dev",
-		"test": "pnpm --recursive --aggregate-output --reporter=append-only --parallel test",
+		"test": "vitest run",
 		"check": "pnpm --recursive --aggregate-output --reporter=append-only --parallel check",
 		"format": "prettier . --cache --write --list-different --ignore-unknown",
 		"format:check": "prettier . --cache --check --ignore-unknown",
 		"lint": "oxlint --fix",
 		"lint:check": "oxlint",
 		"changeset:publish": "changeset publish",
 		"changeset:version": "changeset version && pnpm format",
+		"sync": "pnpm exec playwright install",
 		"postinstall": "pnpm --recursive --parallel sync"
 	},
 	"devDependencies": {
@@ -24,7 +25,9 @@
 		"oxlint": "catalog:",
 		"prettier": "catalog:",
 		"prettier-plugin-astro": "catalog:",
-		"prettier-plugin-svelte": "catalog:"
+		"prettier-plugin-svelte": "catalog:",
+		"vite": "catalog:",
+		"vitest": "catalog:"
 	},
 	"engines": {
 		"node": "22.21.1",

packages/cli/package.json

@@ -22,7 +22,6 @@
 	"scripts": {
 		"dev": "tsdown --watch",
 		"build": "tsdown",
-		"test": "vitest run",
 		"check": "tsc",
 		"sync": "pnpm build"
 	},
@@ -33,8 +32,7 @@
 		"tsdown": "catalog:",
 		"type-fest": "catalog:",
 		"typescript": "catalog:",
-		"vite": "catalog:",
-		"vitest": "catalog:"
+		"vite": "catalog:"
 	},
 	"dependencies": {
 		"@clack/prompts": "catalog:",

packages/skeleton-react/package.json

@@ -11,7 +11,6 @@
 	"scripts": {
 		"dev": "tsdown --watch",
 		"build": "tsdown",
-		"test": "vitest run",
 		"check": "tsc",
 		"sync": "pnpm build"
 	},
@@ -60,18 +59,16 @@
 		"react-dom": "^18.0.0 || ^19.0.0"
 	},
 	"devDependencies": {
-		"@testing-library/jest-dom": "catalog:",
-		"@testing-library/react": "catalog:",
 		"@types/react": "catalog:",
 		"@types/react-dom": "catalog:",
 		"@vitejs/plugin-react": "catalog:",
-		"jsdom": "catalog:",
+		"@vitest/browser-playwright": "catalog:",
 		"react": "catalog:",
 		"react-dom": "catalog:",
 		"tsdown": "catalog:",
 		"typescript": "catalog:",
 		"vite": "catalog:",
-		"vitest": "catalog:"
+		"vitest-browser-react": "catalog:"
 	},
 	"license": "MIT",
 	"type": "module"

packages/skeleton-react/src/components/accordion/anatomy/item-content.tsx

@@ -1,7 +1,7 @@
+import type { HTMLAttributes } from '../../../internal/html-attributes.js';
+import type { PropsWithElement } from '../../../internal/props-with-element.js';
 import { ItemContext } from '../modules/item-context.js';
 import { RootContext } from '../modules/root-context.js';
-import type { HTMLAttributes } from '@/internal/html-attributes.js';
-import type { PropsWithElement } from '@/internal/props-with-element.js';
 import { classesAccordion } from '@skeletonlabs/skeleton-common';
 import { mergeProps } from '@zag-js/react';
 import { use } from 'react';

packages/skeleton-react/src/components/accordion/anatomy/item-indicator.tsx

@@ -1,7 +1,7 @@
+import type { HTMLAttributes } from '../../../internal/html-attributes.js';
+import type { PropsWithElement } from '../../../internal/props-with-element.js';
 import { ItemContext } from '../modules/item-context.js';
 import { RootContext } from '../modules/root-context.js';
-import type { HTMLAttributes } from '@/internal/html-attributes.js';
-import type { PropsWithElement } from '@/internal/props-with-element.js';
 import { classesAccordion } from '@skeletonlabs/skeleton-common';
 import { mergeProps } from '@zag-js/react';
 import { use } from 'react';

packages/skeleton-react/src/components/accordion/anatomy/item-trigger.tsx

@@ -1,7 +1,7 @@
+import type { HTMLAttributes } from '../../../internal/html-attributes.js';
+import type { PropsWithElement } from '../../../internal/props-with-element.js';
 import { ItemContext } from '../modules/item-context.js';
 import { RootContext } from '../modules/root-context.js';
-import type { HTMLAttributes } from '@/internal/html-attributes.js';
-import type { PropsWithElement } from '@/internal/props-with-element.js';
 import { classesAccordion } from '@skeletonlabs/skeleton-common';
 import { mergeProps } from '@zag-js/react';
 import { use } from 'react';

packages/skeleton-react/src/components/accordion/anatomy/item.tsx

@@ -1,7 +1,7 @@
+import type { HTMLAttributes } from '../../../internal/html-attributes.js';
+import type { PropsWithElement } from '../../../internal/props-with-element.js';
 import { ItemContext } from '../modules/item-context.js';
 import { RootContext } from '../modules/root-context.js';
-import type { HTMLAttributes } from '@/internal/html-attributes.js';
-import type { PropsWithElement } from '@/internal/props-with-element.js';
 import { classesAccordion } from '@skeletonlabs/skeleton-common';
 import { splitItemProps } from '@zag-js/accordion';
 import type { ItemProps } from '@zag-js/accordion';

packages/skeleton-react/src/components/accordion/anatomy/root-provider.tsx

@@ -1,7 +1,7 @@
+import type { HTMLAttributes } from '../../../internal/html-attributes.js';
+import type { PropsWithElement } from '../../../internal/props-with-element.js';
 import type { useAccordion } from '../modules/provider.js';
 import { RootContext } from '../modules/root-context.js';
-import type { HTMLAttributes } from '@/internal/html-attributes.js';
-import type { PropsWithElement } from '@/internal/props-with-element.js';
 import { classesAccordion } from '@skeletonlabs/skeleton-common';
 import { mergeProps } from '@zag-js/react';
 

packages/skeleton-react/src/components/accordion/anatomy/root.tsx

@@ -1,7 +1,7 @@
+import type { HTMLAttributes } from '../../../internal/html-attributes.js';
+import type { PropsWithElement } from '../../../internal/props-with-element.js';
 import { useAccordion } from '../modules/provider.js';
 import { RootContext } from '../modules/root-context.js';
-import type { HTMLAttributes } from '@/internal/html-attributes.js';
-import type { PropsWithElement } from '@/internal/props-with-element.js';
 import { classesAccordion } from '@skeletonlabs/skeleton-common';
 import { splitProps } from '@zag-js/accordion';
 import type { Props } from '@zag-js/accordion';

packages/skeleton-react/src/components/accordion/modules/item-context.ts

@@ -1,4 +1,4 @@
-import { createContext } from '@/internal/create-context.js';
+import { createContext } from '../../../internal/create-context.js';
 import type { ItemProps } from '@zag-js/accordion';
 
 export const ItemContext = createContext<ItemProps>();

packages/skeleton-react/src/components/accordion/modules/root-context.ts

@@ -1,4 +1,4 @@
+import { createContext } from '../../../internal/create-context.js';
 import { useAccordion } from './provider.js';
-import { createContext } from '@/internal/create-context.js';
 
 export const RootContext = createContext<ReturnType<typeof useAccordion>>();

packages/skeleton-react/src/components/app-bar/anatomy/headline.tsx

@@ -1,5 +1,5 @@
-import type { HTMLAttributes } from '@/internal/html-attributes.js';
-import type { PropsWithElement } from '@/internal/props-with-element.js';
+import type { HTMLAttributes } from '../../../internal/html-attributes.js';
+import type { PropsWithElement } from '../../../internal/props-with-element.js';
 import { classesAppBar } from '@skeletonlabs/skeleton-common';
 import { mergeProps } from '@zag-js/react';
 

packages/skeleton-react/src/components/app-bar/anatomy/lead.tsx

@@ -1,5 +1,5 @@
-import type { HTMLAttributes } from '@/internal/html-attributes.js';
-import type { PropsWithElement } from '@/internal/props-with-element.js';
+import type { HTMLAttributes } from '../../../internal/html-attributes.js';
+import type { PropsWithElement } from '../../../internal/props-with-element.js';
 import { classesAppBar } from '@skeletonlabs/skeleton-common';
 import { mergeProps } from '@zag-js/react';
 

packages/skeleton-react/src/components/app-bar/anatomy/root.tsx

@@ -1,5 +1,5 @@
-import type { HTMLAttributes } from '@/internal/html-attributes.js';
-import type { PropsWithElement } from '@/internal/props-with-element.js';
+import type { HTMLAttributes } from '../../../internal/html-attributes.js';
+import type { PropsWithElement } from '../../../internal/props-with-element.js';
 import { classesAppBar } from '@skeletonlabs/skeleton-common';
 import { mergeProps } from '@zag-js/react';
 

packages/skeleton-react/src/components/app-bar/anatomy/toolbar.tsx

@@ -1,5 +1,5 @@
-import type { HTMLAttributes } from '@/internal/html-attributes.js';
-import type { PropsWithElement } from '@/internal/props-with-element.js';
+import type { HTMLAttributes } from '../../../internal/html-attributes.js';
+import type { PropsWithElement } from '../../../internal/props-with-element.js';
 import { classesAppBar } from '@skeletonlabs/skeleton-common';
 import { mergeProps } from '@zag-js/react';
 

packages/skeleton-react/src/components/app-bar/anatomy/trail.tsx

@@ -1,5 +1,5 @@
-import type { HTMLAttributes } from '@/internal/html-attributes.js';
-import type { PropsWithElement } from '@/internal/props-with-element.js';
+import type { HTMLAttributes } from '../../../internal/html-attributes.js';
+import type { PropsWithElement } from '../../../internal/props-with-element.js';
 import { classesAppBar } from '@skeletonlabs/skeleton-common';
 import { mergeProps } from '@zag-js/react';
 

packages/skeleton-react/src/components/avatar/anatomy/fallback.tsx

@@ -1,6 +1,6 @@
+import type { HTMLAttributes } from '../../../internal/html-attributes.js';
+import type { PropsWithElement } from '../../../internal/props-with-element.js';
 import { RootContext } from '../modules/root-context.js';
-import type { HTMLAttributes } from '@/internal/html-attributes.js';
-import type { PropsWithElement } from '@/internal/props-with-element.js';
 import { classesAvatar } from '@skeletonlabs/skeleton-common';
 import { mergeProps } from '@zag-js/react';
 import { use } from 'react';

packages/skeleton-react/src/components/avatar/anatomy/image.tsx

@@ -1,6 +1,6 @@
+import type { HTMLAttributes } from '../../../internal/html-attributes.js';
+import type { PropsWithElement } from '../../../internal/props-with-element.js';
 import { RootContext } from '../modules/root-context.js';
-import type { HTMLAttributes } from '@/internal/html-attributes.js';
-import type { PropsWithElement } from '@/internal/props-with-element.js';
 import { classesAvatar } from '@skeletonlabs/skeleton-common';
 import { mergeProps } from '@zag-js/react';
 import { use } from 'react';

packages/skeleton-react/src/components/avatar/anatomy/root-provider.tsx

@@ -1,7 +1,7 @@
+import type { HTMLAttributes } from '../../../internal/html-attributes.js';
+import type { PropsWithElement } from '../../../internal/props-with-element.js';
 import type { useAvatar } from '../modules/provider.js';
 import { RootContext } from '../modules/root-context.js';
-import type { HTMLAttributes } from '@/internal/html-attributes.js';
-import type { PropsWithElement } from '@/internal/props-with-element.js';
 import { classesAvatar } from '@skeletonlabs/skeleton-common';
 import { mergeProps } from '@zag-js/react';
 

packages/skeleton-react/src/components/avatar/anatomy/root.tsx

@@ -1,7 +1,7 @@
+import type { HTMLAttributes } from '../../../internal/html-attributes.js';
+import type { PropsWithElement } from '../../../internal/props-with-element.js';
 import { useAvatar } from '../modules/provider.js';
 import { RootContext } from '../modules/root-context.js';
-import type { HTMLAttributes } from '@/internal/html-attributes.js';
-import type { PropsWithElement } from '@/internal/props-with-element.js';
 import { classesAvatar } from '@skeletonlabs/skeleton-common';
 import { splitProps } from '@zag-js/avatar';
 import type { Props } from '@zag-js/avatar';

packages/skeleton-react/src/components/avatar/modules/root-context.ts

@@ -1,4 +1,4 @@
+import { createContext } from '../../../internal/create-context.js';
 import type { useAvatar } from './provider.js';
-import { createContext } from '@/internal/create-context.js';
 
 export const RootContext = createContext<ReturnType<typeof useAvatar>>();

packages/skeleton-react/src/components/collapsible/anatomy/content.tsx

@@ -1,6 +1,6 @@
+import type { HTMLAttributes } from '../../../internal/html-attributes.js';
+import type { PropsWithElement } from '../../../internal/props-with-element.js';
 import { RootContext } from '../modules/root-context.js';
-import type { HTMLAttributes } from '@/internal/html-attributes.js';
-import type { PropsWithElement } from '@/internal/props-with-element.js';
 import { classesCollapsible } from '@skeletonlabs/skeleton-common';
 import { mergeProps } from '@zag-js/react';
 import { use } from 'react';

packages/skeleton-react/src/components/collapsible/anatomy/indicator.tsx

@@ -1,6 +1,6 @@
+import type { HTMLAttributes } from '../../../internal/html-attributes.js';
+import type { PropsWithElement } from '../../../internal/props-with-element.js';
 import { RootContext } from '../modules/root-context.js';
-import type { HTMLAttributes } from '@/internal/html-attributes.js';
-import type { PropsWithElement } from '@/internal/props-with-element.js';
 import { classesCollapsible } from '@skeletonlabs/skeleton-common';
 import { mergeProps } from '@zag-js/react';
 import { use } from 'react';

packages/skeleton-react/src/components/collapsible/anatomy/root-provider.tsx

@@ -1,7 +1,7 @@
+import type { HTMLAttributes } from '../../../internal/html-attributes.js';
+import type { PropsWithElement } from '../../../internal/props-with-element.js';
 import type { useCollapsible } from '../modules/provider.js';
 import { RootContext } from '../modules/root-context.js';
-import type { HTMLAttributes } from '@/internal/html-attributes.js';
-import type { PropsWithElement } from '@/internal/props-with-element.js';
 import { classesCollapsible } from '@skeletonlabs/skeleton-common';
 import { mergeProps } from '@zag-js/react';
 

packages/skeleton-react/src/components/collapsible/anatomy/root.tsx

@@ -1,7 +1,7 @@
+import type { HTMLAttributes } from '../../../internal/html-attributes.js';
+import type { PropsWithElement } from '../../../internal/props-with-element.js';
 import { useCollapsible } from '../modules/provider.js';
 import { RootContext } from '../modules/root-context.js';
-import type { HTMLAttributes } from '@/internal/html-attributes.js';
-import type { PropsWithElement } from '@/internal/props-with-element.js';
 import { classesCollapsible } from '@skeletonlabs/skeleton-common';
 import { splitProps } from '@zag-js/collapsible';
 import type { Props } from '@zag-js/collapsible';

packages/skeleton-react/src/components/collapsible/anatomy/trigger.tsx

@@ -1,6 +1,6 @@
+import type { HTMLAttributes } from '../../../internal/html-attributes.js';
+import type { PropsWithElement } from '../../../internal/props-with-element.js';
 import { RootContext } from '../modules/root-context.js';
-import type { HTMLAttributes } from '@/internal/html-attributes.js';
-import type { PropsWithElement } from '@/internal/props-with-element.js';
 import { classesCollapsible } from '@skeletonlabs/skeleton-common';
 import { mergeProps } from '@zag-js/react';
 import { use } from 'react';

packages/skeleton-react/src/components/collapsible/modules/root-context.ts

@@ -1,4 +1,4 @@
+import { createContext } from '../../../internal/create-context.js';
 import type { useCollapsible } from './provider.js';
-import { createContext } from '@/internal/create-context.js';
 
 export const RootContext = createContext<ReturnType<typeof useCollapsible>>();

packages/skeleton-react/src/components/combobox/anatomy/content.tsx

@@ -1,6 +1,6 @@
+import type { HTMLAttributes } from '../../../internal/html-attributes.js';
+import type { PropsWithElement } from '../../../internal/props-with-element.js';
 import { RootContext } from '../modules/root-context.js';
-import type { HTMLAttributes } from '@/internal/html-attributes.js';
-import type { PropsWithElement } from '@/internal/props-with-element.js';
 import { classesCombobox } from '@skeletonlabs/skeleton-common';
 import { mergeProps } from '@zag-js/react';
 import { use } from 'react';

packages/skeleton-react/src/components/combobox/anatomy/control.tsx

@@ -1,6 +1,6 @@
+import type { HTMLAttributes } from '../../../internal/html-attributes.js';
+import type { PropsWithElement } from '../../../internal/props-with-element.js';
 import { RootContext } from '../modules/root-context.js';
-import type { HTMLAttributes } from '@/internal/html-attributes.js';
-import type { PropsWithElement } from '@/internal/props-with-element.js';
 import { classesCombobox } from '@skeletonlabs/skeleton-common';
 import { mergeProps } from '@zag-js/react';
 import { use } from 'react';

packages/skeleton-react/src/components/combobox/anatomy/input.tsx

@@ -1,6 +1,6 @@
+import type { HTMLAttributes } from '../../../internal/html-attributes.js';
+import type { PropsWithElement } from '../../../internal/props-with-element.js';
 import { RootContext } from '../modules/root-context.js';
-import type { HTMLAttributes } from '@/internal/html-attributes.js';
-import type { PropsWithElement } from '@/internal/props-with-element.js';
 import { classesCombobox } from '@skeletonlabs/skeleton-common';
 import { mergeProps } from '@zag-js/react';
 import { use } from 'react';

packages/skeleton-react/src/components/combobox/anatomy/item-group-label.tsx

@@ -1,7 +1,7 @@
+import type { HTMLAttributes } from '../../../internal/html-attributes.js';
+import type { PropsWithElement } from '../../../internal/props-with-element.js';
 import { ItemGroupContext } from '../modules/item-group-context.js';
 import { RootContext } from '../modules/root-context.js';
-import type { HTMLAttributes } from '@/internal/html-attributes.js';
-import type { PropsWithElement } from '@/internal/props-with-element.js';
 import { classesCombobox } from '@skeletonlabs/skeleton-common';
 import { type ItemGroupLabelProps, splitItemGroupLabelProps } from '@zag-js/combobox';
 import { mergeProps } from '@zag-js/react';

packages/skeleton-react/src/components/combobox/anatomy/item-group.tsx

@@ -1,7 +1,7 @@
+import type { HTMLAttributes } from '../../../internal/html-attributes.js';
+import type { PropsWithElement } from '../../../internal/props-with-element.js';
 import { ItemGroupContext } from '../modules/item-group-context.js';
 import { RootContext } from '../modules/root-context.js';
-import type { HTMLAttributes } from '@/internal/html-attributes.js';
-import type { PropsWithElement } from '@/internal/props-with-element.js';
 import { classesCombobox } from '@skeletonlabs/skeleton-common';
 import { type ItemGroupProps, splitItemGroupProps } from '@zag-js/combobox';
 import { mergeProps } from '@zag-js/react';

packages/skeleton-react/src/components/combobox/anatomy/item-indicator.tsx

@@ -1,8 +1,8 @@
+import Check from '../../../internal/components/check.jsx';
+import type { HTMLAttributes } from '../../../internal/html-attributes.js';
+import type { PropsWithElement } from '../../../internal/props-with-element.js';
 import { ItemContext } from '../modules/item-context.js';
 import { RootContext } from '../modules/root-context.js';
-import Check from '@/internal/components/check.jsx';
-import type { HTMLAttributes } from '@/internal/html-attributes.js';
-import type { PropsWithElement } from '@/internal/props-with-element.js';
 import { classesCombobox } from '@skeletonlabs/skeleton-common';
 import { mergeProps } from '@zag-js/react';
 import { use } from 'react';

packages/skeleton-react/src/components/combobox/anatomy/item-text.tsx

@@ -1,7 +1,7 @@
+import type { HTMLAttributes } from '../../../internal/html-attributes.js';
+import type { PropsWithElement } from '../../../internal/props-with-element.js';
 import { ItemContext } from '../modules/item-context.js';
 import { RootContext } from '../modules/root-context.js';
-import type { HTMLAttributes } from '@/internal/html-attributes.js';
-import type { PropsWithElement } from '@/internal/props-with-element.js';
 import { classesCombobox } from '@skeletonlabs/skeleton-common';
 import { mergeProps } from '@zag-js/react';
 import { use } from 'react';

packages/skeleton-react/src/components/combobox/anatomy/item.tsx

@@ -1,7 +1,7 @@
+import type { HTMLAttributes } from '../../../internal/html-attributes.js';
+import type { PropsWithElement } from '../../../internal/props-with-element.js';
 import { ItemContext } from '../modules/item-context.js';
 import { RootContext } from '../modules/root-context.js';
-import type { HTMLAttributes } from '@/internal/html-attributes.js';
-import type { PropsWithElement } from '@/internal/props-with-element.js';
 import { classesCombobox } from '@skeletonlabs/skeleton-common';
 import { type ItemProps, splitItemProps } from '@zag-js/combobox';
 import { mergeProps } from '@zag-js/react';

packages/skeleton-react/src/components/combobox/anatomy/label.tsx

@@ -1,6 +1,6 @@
+import type { HTMLAttributes } from '../../../internal/html-attributes.js';
+import type { PropsWithElement } from '../../../internal/props-with-element.js';
 import { RootContext } from '../modules/root-context.js';
-import type { HTMLAttributes } from '@/internal/html-attributes.js';
-import type { PropsWithElement } from '@/internal/props-with-element.js';
 import { classesCombobox } from '@skeletonlabs/skeleton-common';
 import { mergeProps } from '@zag-js/react';
 import { use } from 'react';

packages/skeleton-react/src/components/combobox/anatomy/positioner.tsx

@@ -1,6 +1,6 @@
+import type { HTMLAttributes } from '../../../internal/html-attributes.js';
+import type { PropsWithElement } from '../../../internal/props-with-element.js';
 import { RootContext } from '../modules/root-context.js';
-import type { HTMLAttributes } from '@/internal/html-attributes.js';
-import type { PropsWithElement } from '@/internal/props-with-element.js';
 import { classesCombobox } from '@skeletonlabs/skeleton-common';
 import { mergeProps } from '@zag-js/react';
 import { use } from 'react';