feat: add data-slots to every components

.changeset/eager-lamps-occur.md

@@ -0,0 +1,5 @@
+---
+'@vapor-ui/core': minor
+---
+
+add data-slots for all components

apps/storybook/.storybook/main.ts

@@ -1,5 +1,6 @@
 import type { StorybookConfig } from '@storybook/react-vite';
 import { vanillaExtractPlugin } from '@vanilla-extract/vite-plugin';
+import { readFile } from 'node:fs/promises';
 import { createRequire } from 'node:module';
 import path, { dirname, join } from 'node:path';
 import { mergeConfig } from 'vite';
@@ -31,6 +32,26 @@ const tildeAlias = {
     },
 };
 
+const coreDistCssPassthrough = {
+    name: 'vapor-core-dist-css-passthrough',
+    enforce: 'pre' as const,
+
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    async resolveId(this: any, source: string, importer: string | undefined) {
+        if (!source.endsWith('.vanilla.css')) return null;
+        const resolved = await this.resolve(source, importer, { skipSelf: true });
+        if (!resolved) return null;
+        if (resolved.id.includes('/packages/core/dist/')) return resolved.id;
+        return null;
+    },
+
+    async load(id: string) {
+        if (!id.endsWith('.vanilla.css')) return null;
+        if (!id.includes('/packages/core/dist/')) return null;
+        return await readFile(id.split('?')[0], 'utf-8');
+    },
+};
+
 const config: StorybookConfig = {
     stories: ['../../../packages/**!(node_modules|dist)/src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
     addons: [getAbsolutePath('@storybook/addon-docs')],
@@ -55,14 +76,11 @@ const config: StorybookConfig = {
             ...config,
             resolve: {
                 ...config.resolve,
-                alias: [
-                    tildeAlias,
-                    { find: '@vapor-ui/core', replacement: CORE_SRC },
-                    { find: '@vapor-ui/composites', replacement: COMPOSITES_SRC },
-                ],
+                alias: [tildeAlias],
             },
 
             plugins: [
+                coreDistCssPassthrough,
                 vanillaExtractPlugin({
                     identifiers: ({ hash, filePath, debugId }) => {
                         const componentName = path.basename(filePath, '.css.ts');

packages/core/package.json

@@ -102,7 +102,7 @@
         "react": "catalog:",
         "react-dom": "catalog:",
         "rimraf": "^6.1.3",
-        "rolldown": "^1.2.6",
+        "rolldown": "catalog:",
         "rolldown-plugin-dts": "^0.27.14",
         "rollup-plugin-node-externals": "^8.1.2",
         "typescript": "catalog:",

packages/core/rolldown.config.ts

@@ -1,6 +1,7 @@
 import { bundle, generateInputs } from '@repo/rolldown-config';
 import {
     cleanLayerDeclaration,
+    dataSlots,
     depsExternal,
     dts,
     identifiers,
@@ -40,19 +41,28 @@ const resolve = {
     extensions: ['.ts', '.tsx', '.js', '.jsx', '.json'],
 };
 
+const replaceFileName = (name: string, ext: string) => {
+    return `${name.replace(/\.css$/, '.css.vanilla')}.${ext}`;
+};
+
 export default defineConfig([
     // ESM Build
     bundle({
         input: inputs,
         resolve,
-        plugins: [depsExternal(), vanillaExtractPlugin({ identifiers }), cleanLayerDeclaration()],
+        plugins: [
+            depsExternal(),
+            dataSlots(),
+            vanillaExtractPlugin({ identifiers }),
+            cleanLayerDeclaration(),
+        ],
         output: {
             format: 'esm',
             strict: true,
             exports: 'named',
 
             // e.g., 'styles/tailwind-preset.css' -> 'styles/tailwind-preset.css.vanilla.js'
-            entryFileNames: ({ name }) => `${name.replace(/\.css$/, '.css.vanilla')}.mjs`,
+            entryFileNames: ({ name }) => replaceFileName(name, 'mjs'),
             assetFileNames,
         },
     }),
@@ -61,13 +71,18 @@ export default defineConfig([
     bundle({
         input: inputs,
         resolve,
-        plugins: [depsExternal(), vanillaExtractPlugin({ identifiers }), cleanLayerDeclaration()],
+        plugins: [
+            depsExternal(),
+            dataSlots(),
+            vanillaExtractPlugin({ identifiers }),
+            cleanLayerDeclaration(),
+        ],
         output: {
             format: 'cjs',
             strict: true,
             exports: 'named',
 
-            entryFileNames: ({ name }) => `${name.replace(/\.css$/, '.css.vanilla')}.cjs`,
+            entryFileNames: ({ name }) => replaceFileName(name, 'cjs'),
             assetFileNames,
         },
     }),
@@ -78,7 +93,7 @@ export default defineConfig([
         resolve,
         plugins: [depsExternal(), dts()],
         output: {
-            entryFileNames: ({ name }) => `${name.replace(/\.css\.d$/, '.css.vanilla.d')}.mts`,
+            entryFileNames: ({ name }) => replaceFileName(name, 'mts'),
         },
     }),
 
@@ -87,7 +102,7 @@ export default defineConfig([
         resolve,
         plugins: [depsExternal(), dts()],
         output: {
-            entryFileNames: ({ name }) => `${name.replace(/\.css\.d$/, '.css.vanilla.d')}.cts`,
+            entryFileNames: ({ name }) => replaceFileName(name, 'cts'),
         },
     }),
 ]);

packages/core/src/components/pagination/pagination.tsx

@@ -120,7 +120,7 @@ export const PaginationRootPrimitive = forwardRef<HTMLElement, PaginationRootPri
         return <PaginationProvider value={context}>{element}</PaginationProvider>;
     },
 );
-PaginationRootPrimitive.displayName = 'PaginationRootPrimitive.Root';
+PaginationRootPrimitive.displayName = 'Pagination.RootPrimitive';
 
 /* -------------------------------------------------------------------------------------------------
  * Pagination.ListPrimitive

packages/core/src/components/sheet/sheet.tsx

@@ -120,33 +120,35 @@ SheetRoot.displayName = 'Sheet.Root';
  * Sheet.Trigger
  * -----------------------------------------------------------------------------------------------*/
 
-export const SheetTrigger = Dialog.Trigger;
+export const SheetTrigger = forwardRef<HTMLButtonElement, SheetTrigger.Props>((props, ref) => (
+    <Dialog.Trigger ref={ref} {...props} />
+));
 SheetTrigger.displayName = 'Sheet.Trigger';
 
 /* -------------------------------------------------------------------------------------------------
  * Sheet.Close
  * -----------------------------------------------------------------------------------------------*/
 
-export const SheetClose = Dialog.Close;
+export const SheetClose = forwardRef<HTMLButtonElement, SheetClose.Props>((props, ref) => (
+    <Dialog.Close ref={ref} {...props} />
+));
 SheetClose.displayName = 'Sheet.Close';
 
 /* -------------------------------------------------------------------------------------------------
  * Sheet.OverlayPrimitive
  * -----------------------------------------------------------------------------------------------*/
 
-export const SheetOverlayPrimitive = Dialog.OverlayPrimitive;
+export const SheetOverlayPrimitive = forwardRef<HTMLDivElement, SheetOverlayPrimitive.Props>(
+    (props, ref) => <Dialog.OverlayPrimitive ref={ref} {...props} />,
+);
 SheetOverlayPrimitive.displayName = 'Sheet.OverlayPrimitive';
 
 /* -------------------------------------------------------------------------------------------------
  * Sheet.PortalPrimitive
  * -----------------------------------------------------------------------------------------------*/
 
 export const SheetPortalPrimitive = forwardRef<HTMLDivElement, SheetPortalPrimitive.Props>(
-    (props, ref) => {
-        const componentProps = resolveStyles(props);
-
-        return <Dialog.PortalPrimitive ref={ref} {...componentProps} />;
-    },
+    (props, ref) => <Dialog.PortalPrimitive ref={ref} {...props} />,
 );
 SheetPortalPrimitive.displayName = 'Sheet.PortalPrimitive';
 
@@ -388,14 +390,18 @@ SheetFooter.displayName = 'Sheet.Footer';
  * Sheet.Title
  * -----------------------------------------------------------------------------------------------*/
 
-export const SheetTitle = Dialog.Title;
+export const SheetTitle = forwardRef<HTMLHeadingElement, SheetTitle.Props>((props, ref) => (
+    <Dialog.Title ref={ref} {...props} />
+));
 SheetTitle.displayName = 'Sheet.Title';
 
 /* -------------------------------------------------------------------------------------------------
  * Sheet.Description
  * -----------------------------------------------------------------------------------------------*/
 
-export const SheetDescription = Dialog.Description;
+export const SheetDescription = forwardRef<HTMLParagraphElement, SheetDescription.Props>(
+    (props, ref) => <Dialog.Description ref={ref} {...props} />,
+);
 SheetDescription.displayName = 'Sheet.Description';
 
 /* -----------------------------------------------------------------------------------------------*/

packages/rolldown-config/package.json

@@ -20,15 +20,17 @@
         "lint": "eslint ./src"
     },
     "dependencies": {
-        "rolldown-plugin-dts": "^0.27.1",
+        "magic-string": "^1.2.3",
+        "rolldown-plugin-dts": "^0.27.14",
         "rollup-plugin-node-externals": "^8.1.2"
     },
     "devDependencies": {
+        "@oxc-project/types": "catalog:",
         "@repo/eslint-config": "workspace:*",
         "@repo/typescript-config": "workspace:*",
         "eslint": "catalog:",
         "rimraf": "^6.1.3",
-        "rolldown": "^1.2.6",
+        "rolldown": "catalog:",
         "rollup": "^4.62.4",
         "tinyglobby": "^0.2.17",
         "typescript": "catalog:"