feat(eds-core-react): ✨ implement Next (EDS 2.0) architecture with Input component

- Create src/components/next/ folder structure for EDS 2.0 components
- Add dual entry points: index.ts (stable) and index.next.ts (next)
- Configure subpath exports for @equinor/eds-core-react/next
- Migrate Input component to next/ folder with vanilla CSS
- Set up centralized CSS bundling in index.css
- Add Next (EDS 2.0) section in Storybook with Introduction
- Update rollup config for dual builds
- Configure Storybook ordering to show Introduction first
- Remove old Input.new files
- Update CSS_ARCHITECTURE.md documentation

Author: millus

packages/eds-core-react/.storybook/preview.mjs

@@ -19,6 +19,8 @@ const preview = {
           'Icons',
           ['Introduction', 'Preview', 'Icon'],
           '*',
+          'Next (EDS 2.0)',
+          ['Introduction', '*'],
           'Playground',
         ],
       },

packages/eds-core-react/CSS_ARCHITECTURE.md

@@ -2,53 +2,62 @@
 
 ## Overview
 
-Component CSS is centralized in `src/index.css` to prevent duplicate imports and enable automatic tree-shaking.
+Next EDS 2.0 components use vanilla CSS with EDS 2.0 tokens. Component CSS is centralized in `src/index.css` to prevent duplicate imports and enable automatic tree-shaking.
+
+**Important:** Only Next EDS 2.0 components (in `src/components/next/`) use vanilla CSS. Stable components use styled-components and don't need CSS files.
 
 ## Structure
 
 ```
 src/
-├── index.css           # Imports all component CSS
-├── index.ts            # Imports index.css once
+├── index.css              # Imports all next/ component CSS
+├── index.ts               # Stable components (no CSS import)
+├── index.next.ts          # Imports index.css + exports next components
 └── components/
-    └── Input/
-        ├── Input.new.tsx     # No CSS import
-        └── input.new.css     # Styles defined here
+    ├── Button/            # Stable component (styled-components)
+    │   └── Button.tsx
+    └── next/              # Next EDS 2.0 components (vanilla CSS)
+        └── Input/
+            ├── Input.tsx       # No CSS import
+            └── input.css       # Styles defined here
 ```
 
 ## How It Works
 
-1. Component CSS files contain the styles
-2. `src/index.css` imports all component CSS with `@import`
-3. `src/index.ts` imports `index.css` once
-4. Users get all CSS automatically when importing components
+1. Component CSS files contain the styles (e.g., `input.css`)
+2. `src/index.css` imports all next/ component CSS with `@import`
+3. `src/index.next.ts` imports `index.css` once
+4. Users importing from `@equinor/eds-core-react/next` get all CSS automatically
 
-## Adding Components
+## Adding Next EDS 2.0 Components
 
-When creating a component with CSS:
+When creating a new component in `components/next/`:
 
-1. Create `button.new.css` in component directory
+1. Create `input.css` in component directory (lowercase with hyphens)
 2. Add to `src/index.css`:
    ```css
-   @import './components/Button/button.new.css';
+   @import './components/next/Input/input.css';
    ```
 3. **Never** import CSS in `.tsx` files
+4. Export component from `src/index.next.ts`
 
 ## Build
 
 Rollup builds CSS with PostCSS to bundle all `@import` statements:
 
 - **Input**: `src/index.css`
 - **Output**:
-  - `build/index.css` (3.5KB formatted)
-  - `build/index.min.css` (2.1KB minified)
+  - `build/index.css` (formatted)
+  - `build/index.min.css` (minified)
 
 ## Usage
 
-Import components normally -- CSS is included automatically:
+### Next EDS 2.0 Components
+
+Import from the `/next` subpath -- CSS is included automatically:
 
 ```tsx
-import { InputNew } from '@equinor/eds-core-react'
+import { Input } from '@equinor/eds-core-react/next'
 ```
 
 Or import CSS separately if needed:
@@ -58,16 +67,40 @@ import '@equinor/eds-core-react/index.css' // Development
 import '@equinor/eds-core-react/index.min.css' // Production
 ```
 
+### Stable Components
+
+Import normally from the main package (no CSS needed):
+
+```tsx
+import { Button, Typography } from '@equinor/eds-core-react'
+```
+
 ## Configuration
 
 **package.json**:
 
 - `"sideEffects": ["**/*.css"]` -- Preserves CSS during tree-shaking
 - `"files": ["dist/*", "build/*"]` -- Publishes JS and CSS
-- Exports CSS at `./index.css` and `./index.min.css`
+- Exports:
+  - `.` -- Stable components (main package)
+  - `./next` -- Next EDS 2.0 components (with CSS)
+  - `./index.css` and `./index.min.css` -- Next component styles
+
+**rollup.config.js**:
+
+Two entry points are built:
+
+1. `src/index.ts` → `dist/eds-core-react.cjs` (stable components)
+2. `src/index.next.ts` → `dist/next.cjs` (next components with CSS)
 
 **Storybook** (`.storybook/preview.mjs`):
 
 ```javascript
-import '../src/index.css' // Global component styles
+import '../src/index.css' // Next component styles
 ```
+
+## Naming Conventions
+
+- **CSS files:** lowercase with hyphens (e.g., `input.css`, `text-field.css`)
+- **Component files:** PascalCase (e.g., `Input.tsx`, `TextField.tsx`)
+- **Folder:** PascalCase matching component name (e.g., `Input/`, `TextField/`)

packages/eds-core-react/build/index.css

@@ -1,6 +1,4 @@
-/* Global styles for @equinor/eds-core-react */
-
-/* Component styles */
+/* Styles for Next EDS 2.0 Components (vanilla CSS) */
 
 @layer eds-components {
   /* Container - use neutral appearance by default */
@@ -68,7 +66,7 @@
 
   /* 
    * Disabled field - override browser defaults for consistent styling
-   * Safari applies default opacity and color to disabled inputs, so we need
+   * Safari applies a default opacity and color to disabled inputs, so we need
    * to explicitly set opacity: 1 and use -webkit-text-fill-color
    * Note: We don't rely on inherited color context, so this works consistently
    */

packages/eds-core-react/package.json

@@ -32,6 +32,11 @@
       "import": "./dist/esm/index.js",
       "require": "./dist/eds-core-react.cjs"
     },
+    "./next": {
+      "types": "./dist/types/index.next.d.ts",
+      "import": "./dist/esm/index.next.js",
+      "require": "./dist/next.cjs"
+    },
     "./index.css": "./build/index.css",
     "./index.min.css": "./build/index.min.css"
   },

packages/eds-core-react/rollup.config.js

@@ -57,6 +57,46 @@ export default [
       { file: './dist/eds-core-react.cjs', format: 'cjs', interop: 'auto' },
     ],
   },
+  {
+    input: ['./src/index.next.ts'],
+    external: [
+      /@babel\/runtime/,
+      'react/jsx-runtime',
+      ...Object.keys({
+        ...pkg.peerDependencies,
+        ...pkg.dependencies,
+      }),
+    ],
+    watch: {
+      clearScreen: true,
+      include: ['./src/**', './../tokens/**'],
+    },
+    plugins: [
+      preserveDirective(),
+      resolve({ extensions }),
+      commonjs(),
+      postcss({
+        extensions: ['.css'],
+        extract: false,
+        inject: false,
+      }),
+      babel({
+        babelHelpers: 'runtime',
+        extensions,
+        rootMode: 'upward',
+      }),
+    ],
+    output: [
+      {
+        dir: 'dist/esm',
+        preserveModules: true,
+        preserveModulesRoot: 'src',
+        format: 'es',
+        sourcemap: isDevelopment,
+      },
+      { file: './dist/next.cjs', format: 'cjs', interop: 'auto' },
+    ],
+  },
   {
     input: './src/index.css',
     plugins: [

packages/eds-core-react/src/components/Input/Input.new.docs.mdx

@@ -1,2 +1 @@
 export * from './Input'
-export { Input as InputNew } from './Input.new'