@cupra/ui-react 2.0.0-canary.5 → 2.0.0-canary.7

package/README.md

@@ -1,10 +1,14 @@
 # UI React (React Components)
 
 ## Overview
+
 React components and wrappers built on top of the DS-UI Web Components, providing a seamless and idiomatic developer experience for React.  
 This package exposes React-friendly APIs (props, JSX, typed events) while preserving the DS-UI theming, styling, and asset resolution model.
 
+---
+
 ## Audience
+
 Use `@cupra/ui-react` if your application is built with **React** and you want:
 
 - First-class React ergonomics with DS-UI components
@@ -14,6 +18,8 @@ Use `@cupra/ui-react` if your application is built with **React** and you want:
 
 If you need a **framework-agnostic** solution, consider `@cupra/ui-kit` (Web Components).
 
+---
+
 ## Requirements & Compatibility
 
 This library currently provides **official support for React 18**.
@@ -22,36 +28,116 @@ This library currently provides **official support for React 18**.
 
 Projects using other React versions may still install and use the library, but behaviour is not guaranteed until official support is released.
 
-## Installation
+---
+
+## TypeScript and module resolution
+
+This library is **bundler-first**.
+
+### Subpath imports (recommended)
+
+Importing components via subpaths (for example `@cupra/ui-react/Accordion`) requires
+TypeScript to use **bundler-based module resolution**:
+
+- **TypeScript ≥ 5**
+- `"moduleResolution": "bundler"`
+
+This matches how modern bundlers resolve modules and enables the best developer experience,
+including proper tree-shaking and code-splitting.
+
+Minimal required `tsconfig.json` setting:
+
+```
+    {
+      "compilerOptions": {
+        "moduleResolution": "bundler"
+      }
+    }
+```
+
+Other compiler options (`target`, `module`, `lib`, etc.) are project-specific and can be configured as needed.
+
+---
+
+### Root imports (compatibility mode)
+
+If your project cannot use `moduleResolution: "bundler"`, you can still consume the library using **root imports**:
+
+```
+    import { Accordion, IconButton } from "@cupra/ui-react";
+```
+
+This mode works with legacy or constrained TypeScript setups, but has the following trade-offs:
+
+- Subpath imports are not available
+- Reduced tree-shaking and chunking opportunities
+- All components are imported from the package entry point
+
+Root imports are supported as a fallback, but **subpath imports are recommended whenever possible**.
+
+---
+
+### Notes
+
+- Subpath imports are intentionally designed for bundler-based environments.
+- The library does not attempt to enforce Node-style module resolution.
+- No additional runtime configuration is required when using a modern bundler.
+
+---
+
+## Getting started
+
+### Installation
 
-### Install the package
-- npm: `npm install @cupra/ui-react`
-- pnpm: `pnpm add @cupra/ui-react`
-- yarn: `yarn add @cupra/ui-react`
+`@cupra/ui-react` is a React wrapper around the Web Components provided by
+`@cupra/ui-kit`.
 
-### Registry configuration (only if needed)
+For this reason, **both packages must be installed** in your project.
 
-**.npmrc**
+Using npm:
 
-```ini
-@cupra:registry=https://registry.npmjs.org
+```
+    npm install @cupra/ui-react @cupra/ui-kit
+```
+
+Using pnpm:
+
+```
+    pnpm add @cupra/ui-react @cupra/ui-kit
 ```
 
-**.yarnrc.yml**
+Using yarn:
 
-```yaml
-npmScopes:
-cupra:
-npmRegistryServer: "https://registry.npmjs.org"
 ```
+    yarn add @cupra/ui-react @cupra/ui-kit
+```
+
+---
+
+### About peer dependencies
+
+`@cupra/ui-kit` is declared as a **peer dependency** of `@cupra/ui-react`.
+
+This means:
+
+- `@cupra/ui-react` does not bundle or ship the Web Components itself
+- the consuming project must provide a compatible version of `@cupra/ui-kit`
+- only a single instance of the design system is expected at runtime
+
+Some package managers (such as npm ≥ 7 or pnpm with compatible settings) may install
+peer dependencies automatically. Others (such as Yarn) require installing them explicitly.
+
+If you encounter missing-module or runtime errors after installing `@cupra/ui-react`,
+make sure that `@cupra/ui-kit` is also installed in your project.
 
 ---
 
 ## Documentation & Live Playground
 
-You can explore all `ui-react` Components, their APIs, theming options and live examples in the online documentation and playground:
+You can explore all `ui-react` components, their APIs, theming options and live examples
+in the online documentation and playground:
 
-[https://diagonal.cupra.com/ui-react/index.html](https://diagonal.cupra.com/ui-react/index.html)
+https://diagonal.cupra.com/ui-react/index.html
 
 ---
 
@@ -59,7 +145,8 @@ You can explore all `ui-react` Components, their APIs, theming options and live
 
 This package is distributed through npm using **two release channels**.
 
-### Stable Releases (`latest`)
+### Stable releases (`latest`)
+
 Production-ready versions:
 
 - Follow Semantic Versioning
@@ -68,19 +155,20 @@ Production-ready versions:
 
 Install:
 
-```bash
-npm install @cupra/ui-react
+```
+    npm install @cupra/ui-react
 ```
 
 Specific version:
 
-```bash
-npm install @cupra/ui-react@0.1.3
+```
+    npm install @cupra/ui-react@0.1.3
 ```
 
 ---
 
-### Canary Releases (`canary`)
+### Canary releases (`canary`)
+
 Early-access versions published after each merge into `main`.
 
 Use canary releases if you:
@@ -91,87 +179,99 @@ Use canary releases if you:
 
 Latest canary:
 
-```bash
-npm install @cupra/ui-react@canary
+```
+    npm install @cupra/ui-react@canary
 ```
 
 Specific canary version:
 
-```bash
-npm install @cupra/ui-react@0.1.4-canary.2
+```
+    npm install @cupra/ui-react@0.1.4-canary.2
 ```
 
 ---
 
 ## Recommended usage
 
-- **Production:** use **stable versions (e.g. `@cupra/ui-react@1.1.3`)**
-- **Internal testing / preview:** use **`canary`** (e.g. `@cupra/ui-react@canary` or `@cupra/ui-react@0.1.4-canary.2`)
-
-```bash
-npm install @cupra/ui-react@0.1.4-canary.2
-```
+- **Production:** use **stable versions** (for example `@cupra/ui-react@1.1.3`)
+- **Internal testing / preview:** use **canary** versions
 
 ---
 
 ## Usage
 
-Import components via subpaths. Do not import from the package index:
-- @cupra/ui-react → React wrappers built on top of the Web Components (e.g. `import { Button } from '@cupra/ui-react/Button'`)
+When possible, import components via subpaths:
+
+```
+    import { Button } from "@cupra/ui-react/Button";
+```
+
+If your TypeScript setup does not support bundler-based module resolution, use root imports instead:
+
+```
+    import { Button } from "@cupra/ui-react";
+```
+
+Wrap your React application with `ThemeProvider`.
 
-Wrap your React app with `ThemeProvider`.  
 The provider requires **three props**:
 
-| Prop       | Type    | Required | Description                                   |
-|------------|---------|----------|-----------------------------------------------|
-| `theme`    | string  | Yes      | Visual theme identifier (e.g. cupra-diagonal) |
-| `loadFonts` | boolean | Yes     | Auto-load DS-UI font files                    |
-| `loadStyles` | boolean | Yes    | Auto-load DS-UI CSS                           |
+| Prop        | Type    | Required | Description                                   |
+|-------------|---------|----------|-----------------------------------------------|
+| `theme`     | string  | Yes      | Visual theme identifier (e.g. cupra-diagonal) |
+| `loadFonts` | boolean | Yes      | Auto-load DS-UI font files                    |
+| `loadStyles`| boolean | Yes      | Auto-load DS-UI CSS                           |
 
-If `loadFonts` or `loadStyles` are `false`, you must manually include `<link>` tags in your HTML.
+If `loadFonts` or `loadStyles` are `false`, you must manually include the corresponding `<link>` tags.
 
 ### Option A — Manual CSS and font links
 
-```tsx
-import { ThemeProvider } from '@cupra/ui-react/ThemeProvider';
-import { Button } from '@cupra/ui-react/Button';
-import { Icon } from '@cupra/ui-react/Icon';
+```
+    import { ThemeProvider } from "@cupra/ui-react/ThemeProvider";
+    import { Button } from "@cupra/ui-react/Button";
+    import { Icon } from "@cupra/ui-react/Icon";
 
-export function App() {
-    return (
+    export function App() {
+      return (
         <>
-            <link rel="preload" as="style" href="https://ds-assets.cupra.com/[version]/styles/cupra/theme.css" />
-            <link rel="stylesheet" href="https://ds-assets.cupra.com/[version]/styles/cupra/theme.css" />
-            <ThemeProvider theme="cupra-diagonal" loadFonts={false} loadStyles={false}>
-                <Button variant="destructive" icon-name="filters-background">Click me</Button>
-                <Icon icon-name="filters-background" />
-            </ThemeProvider>
+          <link rel="preload" as="style" href="https://ds-assets.cupra.com/[version]/styles/cupra/theme.css" />
+          <link rel="stylesheet" href="https://ds-assets.cupra.com/[version]/styles/cupra/theme.css" />
+          <ThemeProvider theme="cupra-diagonal" loadFonts={false} loadStyles={false}>
+            <Button variant="destructive" icon-name="filters-background">
+              Click me
+            </Button>
+            <Icon icon-name="filters-background" />
+          </ThemeProvider>
         </>
-    );
-}
+      );
+    }
 ```
 
 ### Option B — Provider loads assets automatically
 
-```tsx
-import { ThemeProvider } from '@cupra/ui-react/ThemeProvider';
-import { Button } from '@cupra/ui-react/Button';
+```
+    import { ThemeProvider } from "@cupra/ui-react/ThemeProvider";
+    import { Button } from "@cupra/ui-react/Button";
 
-export function App() {
-    return (
+    export function App() {
+      return (
         <ThemeProvider theme="cupra-diagonal" loadFonts={true} loadStyles={true}>
-            <Button variant="primary">Button</Button>
+          <Button variant="primary">Button</Button>
         </ThemeProvider>
-    );
-}
+      );
+    }
 ```
 
 ---
 
 ## License
-License: SEAT S.A. Library EULA 1.0  
+
+SEAT S.A. Library EULA 1.0  
 See `LICENSE.md` in this package for the full text.  
 Third-party attributions may appear in `THIRD_PARTY_LICENSES.md`.
 
+---
+
 ## Support
+
 For help and support, contact: **ds.support@seat.es**

package/dist/components/index.d.ts

@@ -1,56 +1,56 @@
-export * from './Accordion/index';
-export * from './Badge/index';
-export * from './BasicCard/index';
-export * from './BasicCardSection/index';
-export * from './Bullets/index';
-export * from './Button/index';
-export * from './CarouselIndicator/index';
-export * from './Checkbox/index';
-export * from './Chip/index';
-export * from './Chips/index';
-export * from './Currency/index';
-export * from './Dialog/index';
-export * from './DialogBody/index';
-export * from './DialogFooter/index';
-export * from './DialogHeader/index';
-export * from './Divider/index';
-export * from './Drawer/index';
-export * from './Hyperlink/index';
-export * from './Icon/index';
-export * from './IconButton/index';
-export * from './Input/index';
-export * from './LinkButton/index';
-export * from './Loader/index';
-export * from './Logo/index';
-export * from './MainTitle/index';
-export * from './MapPin/index';
-export * from './Modal/index';
-export * from './PasswordInput/index';
-export * from './PickerItem/index';
-export * from './Radio/index';
-export * from './RadioButton/index';
-export * from './RadioButtonGroup/index';
-export * from './Rating/index';
-export * from './Search/index';
-export * from './SearchInput/index';
-export * from './SecondaryNavigation/index';
-export * from './SegmentedControl/index';
-export * from './Select/index';
-export * from './Selection/index';
-export * from './Slider/index';
-export * from './Tabs/index';
-export * from './Tag/index';
-export * from './Text/index';
-export * from './TextInput/index';
-export * from './Textarea/index';
-export * from './ThemeProvider/index';
-export * from './ToggleButton/index';
-export * from './ToggleSwitch/index';
-export * from './Tooltip/index';
-export * from './Toast/index';
-export * from './ToastMessage/index';
-export * from './Avatar/index';
-export * from './StaticBox/index';
-export * from './Stepper/index';
-export * from './InteractiveCard/index';
-export * from './SidebarNavigation/index';
+export * from './Accordion/Accordion';
+export * from './Badge/Badge';
+export * from './BasicCard/BasicCard';
+export * from './BasicCardSection/BasicCardSection';
+export * from './Bullets/Bullets';
+export * from './Button/Button';
+export * from './CarouselIndicator/CarouselIndicator';
+export * from './Checkbox/Checkbox';
+export * from './Chip/Chip';
+export * from './Chips/Chips';
+export * from './Currency/Currency';
+export * from './Dialog/Dialog';
+export * from './DialogBody/DialogBody';
+export * from './DialogFooter/DialogFooter';
+export * from './DialogHeader/DialogHeader';
+export * from './Divider/Divider';
+export * from './Drawer/Drawer';
+export * from './Hyperlink/Hyperlink';
+export * from './Icon/Icon';
+export * from './IconButton/IconButton';
+export * from './Input/Input';
+export * from './LinkButton/LinkButton';
+export * from './Loader/Loader';
+export * from './Logo/Logo';
+export * from './MainTitle/MainTitle';
+export * from './MapPin/MapPin';
+export * from './Modal/Modal';
+export * from './PasswordInput/PasswordInput';
+export * from './PickerItem/PickerItem';
+export * from './Radio/Radio';
+export * from './RadioButton/RadioButton';
+export * from './RadioButtonGroup/RadioButtonGroup';
+export * from './Rating/Rating';
+export * from './Search/Search';
+export * from './SearchInput/SearchInput';
+export * from './SecondaryNavigation/SecondaryNavigation';
+export * from './SegmentedControl/SegmentedControl';
+export * from './Select/Select';
+export * from './Selection/Selection';
+export * from './Slider/Slider';
+export * from './Tabs/Tabs';
+export * from './Tag/Tag';
+export * from './Text/Text';
+export * from './TextInput/TextInput';
+export * from './Textarea/Textarea';
+export * from './ThemeProvider/ThemeProvider';
+export * from './ToggleButton/ToggleButton';
+export * from './ToggleSwitch/ToggleSwitch';
+export * from './Tooltip/Tooltip';
+export * from './Toast/Toast';
+export * from './ToastMessage/ToastMessage';
+export * from './Avatar/Avatar';
+export * from './StaticBox/StaticBox';
+export * from './Stepper/Stepper';
+export * from './InteractiveCard/InteractiveCard';
+export * from './SidebarNavigation/SidebarNavigation';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cupra/ui-react",
-  "version": "2.0.0-canary.5",
+  "version": "2.0.0-canary.7",
   "description": "React components library",
   "author": "SEAT S.A.",
   "license": "SEAT S.A. Library EULA 1.0",
@@ -13,30 +13,14 @@
       "types": "./dist/index.d.ts"
     },
     "./*": {
-      "import": "./dist/components/*/index.js",
-      "types": "./dist/components/*/index.d.ts"
+      "import": "./dist/components/*/*.js",
+      "types": "./dist/components/*/*.d.ts"
     },
     "./hooks/*": {
       "import": "./dist/hooks/*.js",
       "types": "./dist/hooks/*.d.ts"
     }
   },
-  "typesVersions": {
-    "*": {
-      "": [
-        "dist/index.d.ts"
-      ],
-      "index": [
-        "dist/index.d.ts"
-      ],
-      "*": [
-        "dist/components/*/index.d.ts"
-      ],
-      "hooks/*": [
-        "dist/hooks/*.d.ts"
-      ]
-    }
-  },
   "files": [
     "LICENSE",
     "THIRD_PARTY_LICENSES.MD",

package/dist/components/Accordion/index.d.ts

@@ -1 +0,0 @@
-export * from './Accordion';

package/dist/components/Avatar/index.d.ts

@@ -1 +0,0 @@
-export * from './Avatar';

package/dist/components/Badge/index.d.ts

@@ -1 +0,0 @@
-export * from './Badge';

package/dist/components/BasicCard/index.d.ts

@@ -1 +0,0 @@
-export * from './BasicCard';

package/dist/components/BasicCardHeader/index.d.ts

@@ -1 +0,0 @@
-export * from './BasicCardHeader';

package/dist/components/BasicCardImage/index.d.ts

@@ -1 +0,0 @@
-export * from './BasicCardImage';

package/dist/components/BasicCardSection/index.d.ts

@@ -1 +0,0 @@
-export * from './BasicCardSection';

package/dist/components/Bullets/index.d.ts

@@ -1 +0,0 @@
-export * from './Bullets';

package/dist/components/Button/index.d.ts

@@ -1 +0,0 @@
-export * from './Button';

package/dist/components/CarouselIndicator/index.d.ts

@@ -1 +0,0 @@
-export * from './CarouselIndicator';

package/dist/components/Checkbox/index.d.ts

@@ -1 +0,0 @@
-export * from './Checkbox';

package/dist/components/Chip/index.d.ts

@@ -1 +0,0 @@
-export * from './Chip';

package/dist/components/Chips/index.d.ts

@@ -1 +0,0 @@
-export * from './Chips';

package/dist/components/Currency/index.d.ts

@@ -1 +0,0 @@
-export * from './Currency';

package/dist/components/Dialog/index.d.ts

@@ -1 +0,0 @@
-export * from './Dialog';

package/dist/components/DialogBody/index.d.ts

@@ -1 +0,0 @@
-export * from './DialogBody';

package/dist/components/DialogFooter/index.d.ts

@@ -1 +0,0 @@
-export * from './DialogFooter';

package/dist/components/DialogFullscreen/index.d.ts

@@ -1 +0,0 @@
-export * from './DialogFullscreen';

package/dist/components/DialogHeader/index.d.ts

@@ -1 +0,0 @@
-export * from './DialogHeader';

package/dist/components/Divider/index.d.ts

@@ -1 +0,0 @@
-export * from './Divider';

package/dist/components/Drawer/index.d.ts

@@ -1 +0,0 @@
-export * from './Drawer';

package/dist/components/Hyperlink/index.d.ts

@@ -1 +0,0 @@
-export * from './Hyperlink';

package/dist/components/Icon/index.d.ts

@@ -1 +0,0 @@
-export * from './Icon';

package/dist/components/IconButton/index.d.ts

@@ -1 +0,0 @@
-export * from './IconButton';

package/dist/components/Input/index.d.ts

@@ -1 +0,0 @@
-export * from './Input';

package/dist/components/InteractiveCard/index.d.ts

@@ -1 +0,0 @@
-export * from './InteractiveCard';

package/dist/components/LinkButton/index.d.ts

@@ -1 +0,0 @@
-export * from './LinkButton';

package/dist/components/Loader/index.d.ts

@@ -1 +0,0 @@
-export * from './Loader';

package/dist/components/Logo/index.d.ts

@@ -1 +0,0 @@
-export * from './Logo';

package/dist/components/MainTitle/index.d.ts

@@ -1 +0,0 @@
-export * from './MainTitle';

package/dist/components/MapPin/index.d.ts

@@ -1 +0,0 @@
-export * from './MapPin';

package/dist/components/Modal/index.d.ts

@@ -1 +0,0 @@
-export * from './Modal';

package/dist/components/PasswordInput/index.d.ts

@@ -1 +0,0 @@
-export * from './PasswordInput';

package/dist/components/PickerItem/index.d.ts

@@ -1 +0,0 @@
-export * from './PickerItem';

package/dist/components/Radio/index.d.ts

@@ -1 +0,0 @@
-export * from './Radio';

package/dist/components/RadioButton/index.d.ts

@@ -1 +0,0 @@
-export * from './RadioButton';

package/dist/components/RadioButtonGroup/index.d.ts

@@ -1 +0,0 @@
-export * from './RadioButtonGroup';

package/dist/components/Rating/index.d.ts

@@ -1 +0,0 @@
-export * from './Rating';

package/dist/components/Search/index.d.ts

@@ -1 +0,0 @@
-export * from './Search';

package/dist/components/SearchInput/index.d.ts

@@ -1 +0,0 @@
-export * from './SearchInput';

package/dist/components/SecondaryNavigation/index.d.ts

@@ -1 +0,0 @@
-export * from './SecondaryNavigation';

package/dist/components/SegmentedControl/index.d.ts

@@ -1 +0,0 @@
-export * from './SegmentedControl';

package/dist/components/Select/index.d.ts

@@ -1 +0,0 @@
-export * from './Select';

package/dist/components/Selection/index.d.ts

@@ -1 +0,0 @@
-export * from './Selection';

package/dist/components/SidebarNavigation/index.d.ts

@@ -1 +0,0 @@
-export * from './SidebarNavigation';

package/dist/components/Slider/index.d.ts

@@ -1 +0,0 @@
-export * from './Slider';

package/dist/components/StaticBox/index.d.ts

@@ -1 +0,0 @@
-export * from './StaticBox';

package/dist/components/Stepper/index.d.ts

@@ -1 +0,0 @@
-export * from './Stepper';

package/dist/components/Tabs/index.d.ts

@@ -1 +0,0 @@
-export * from './Tabs';

package/dist/components/Tag/index.d.ts

@@ -1 +0,0 @@
-export * from './Tag';

package/dist/components/Text/index.d.ts

@@ -1 +0,0 @@
-export * from './Text';

package/dist/components/TextInput/index.d.ts

@@ -1 +0,0 @@
-export * from './TextInput';

package/dist/components/Textarea/index.d.ts

@@ -1 +0,0 @@
-export * from './Textarea';

package/dist/components/ThemeProvider/index.d.ts

@@ -1 +0,0 @@
-export * from './ThemeProvider';

package/dist/components/Toast/index.d.ts

@@ -1 +0,0 @@
-export * from './Toast';

package/dist/components/ToastMessage/index.d.ts

@@ -1 +0,0 @@
-export * from './ToastMessage';

package/dist/components/ToggleButton/index.d.ts

@@ -1 +0,0 @@
-export * from './ToggleButton';

package/dist/components/ToggleSwitch/index.d.ts

@@ -1 +0,0 @@
-export * from './ToggleSwitch';

package/dist/components/Tooltip/index.d.ts

@@ -1 +0,0 @@
-export * from './Tooltip';