@cupra/ui-react 2.0.0-canary.1 → 2.0.0-canary.10

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/BasicCard/BasicCard.d.ts

@@ -0,0 +1,19 @@
+import type { DsBasicCardAttrs } from '@cupra/ui-kit/react/types/ds-basic-card';
+import { type ReactElement } from 'react';
+import '@cupra/ui-kit/react/ds-basic-card';
+type Children = JSX.Element | JSX.Element[] | string;
+export interface BasicCardProps extends DsBasicCardAttrs {
+    className?: string;
+    children: Children;
+    onClick?: (event: CustomEvent) => void;
+}
+export declare function BasicCard(props: BasicCardProps): ReactElement;
+export declare namespace BasicCard {
+    var FeaturedText: {
+        ({ children }: {
+            children: Children;
+        }): ReactElement;
+        displayName: string;
+    };
+}
+export {};

package/dist/components/BasicCard/BasicCard.js

@@ -0,0 +1,15 @@
+import { jsx as r } from "react/jsx-runtime";
+import "@cupra/ui-kit/react/ds-basic-card";
+import { useHandleEvent as i } from "../../hooks/useHandleEvent.js";
+function n(e) {
+  const { className: a, children: s, onClick: c, ...d } = e, { ref: o } = i({
+    "ds-basic-card:click": c
+  });
+  return /* @__PURE__ */ r("ds-basic-card-react", { ref: o, class: a, ...d, children: s });
+}
+const t = ({ children: e }) => /* @__PURE__ */ r("div", { slot: "featured-text", children: e });
+n.FeaturedText = t;
+t.displayName = "BasicCard.FeaturedText";
+export {
+  n as BasicCard
+};

package/dist/components/BasicCard/stories/CupraDiagonal.stories.d.ts

@@ -0,0 +1,7 @@
+import type { Meta, StoryObj } from '@storybook/react';
+declare const meta: Meta;
+export default meta;
+type Story = StoryObj;
+export declare const Basic: Story;
+export declare const Featured: Story;
+export declare const CardGrid: Story;

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

@@ -0,0 +1,36 @@
+import type { DsBasicCardHeaderAttrs } from '@cupra/ui-kit/react/types/ds-basic-card-header';
+import '@cupra/ui-kit/react/ds-basic-card-header';
+import { type ReactElement } from 'react';
+type Children = JSX.Element | JSX.Element[] | string;
+export interface BasicCardHeaderProps extends DsBasicCardHeaderAttrs {
+    className?: string;
+    children: JSX.Element | JSX.Element[] | string;
+}
+export declare function BasicCardHeader(props: BasicCardHeaderProps): ReactElement;
+export declare namespace BasicCardHeader {
+    var Title: {
+        ({ children }: {
+            children: Children;
+        }): ReactElement;
+        displayName: string;
+    };
+    var Description: {
+        ({ children }: {
+            children: Children;
+        }): ReactElement;
+        displayName: string;
+    };
+    var Meta: {
+        ({ children }: {
+            children: Children;
+        }): ReactElement;
+        displayName: string;
+    };
+    var SubHeader: {
+        ({ children }: {
+            children: Children;
+        }): ReactElement;
+        displayName: string;
+    };
+}
+export {};

package/dist/components/BasicCardHeader/stories/CupraDiagonal.stories.d.ts

@@ -0,0 +1,5 @@
+import type { Meta, StoryObj } from '@storybook/react';
+declare const meta: Meta;
+export default meta;
+type Story = StoryObj;
+export declare const Default: Story;

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

@@ -0,0 +1,8 @@
+import type { DsBasicCardImageAttrs } from '@cupra/ui-kit/react/types/ds-basic-card-image';
+import '@cupra/ui-kit/react/ds-basic-card-image';
+import { type ReactElement } from 'react';
+export interface BasicCardImageProps extends DsBasicCardImageAttrs {
+    className?: string;
+    children: JSX.Element | JSX.Element[] | string;
+}
+export declare function BasicCardImage(props: BasicCardImageProps): ReactElement;

package/dist/components/BasicCardImage/stories/CupraDiagonal.stories.d.ts

@@ -0,0 +1,5 @@
+import type { Meta, StoryObj } from '@storybook/react';
+declare const meta: Meta;
+export default meta;
+type Story = StoryObj;
+export declare const Default: Story;

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

@@ -0,0 +1,8 @@
+import type { DsBasicCardSectionAttrs } from '@cupra/ui-kit/react/types/ds-basic-card-section';
+import '@cupra/ui-kit/react/ds-basic-card-section';
+import { type ReactElement } from 'react';
+export interface BasicCardSectionProps extends DsBasicCardSectionAttrs {
+    className?: string;
+    children: JSX.Element | JSX.Element[] | string;
+}
+export declare function BasicCardSection(props: BasicCardSectionProps): ReactElement;

package/dist/components/BasicCardSection/BasicCardSection.js

@@ -0,0 +1,9 @@
+import { jsx as t } from "react/jsx-runtime";
+import "@cupra/ui-kit/react/ds-basic-card-section";
+function i(r) {
+  const { className: c, children: s, ...o } = r;
+  return /* @__PURE__ */ t("ds-basic-card-section-react", { class: c, ...o, children: s });
+}
+export {
+  i as BasicCardSection
+};

package/dist/components/BasicCardSection/stories/CupraDiagonal.stories.d.ts

@@ -0,0 +1,5 @@
+import type { Meta, StoryObj } from '@storybook/react';
+declare const meta: Meta;
+export default meta;
+type Story = StoryObj;
+export declare const Default: Story;

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

@@ -0,0 +1,11 @@
+import { DsDialogFullscreenAttrs } from '@cupra/ui-kit/types/ds-dialog-fullscreen';
+import { type ReactNode } from 'react';
+import '@cupra/ui-kit/react/ds-dialog-fullscreen';
+type DialogFullscreenProps = DsDialogFullscreenAttrs & {
+    className?: string;
+    withPortal?: boolean;
+    children: JSX.Element | JSX.Element[] | string;
+    onClose?: (event: CustomEvent) => void;
+};
+export declare function DialogFullscreen(props: DialogFullscreenProps): ReactNode;
+export {};

package/dist/components/DialogFullscreen/stories/CupraDiagonal.stories.d.ts

@@ -0,0 +1,5 @@
+import type { Meta, StoryObj } from '@storybook/react';
+declare const meta: Meta;
+export default meta;
+type Story = StoryObj;
+export declare const Default: Story;

package/dist/components/MediaControl/MediaControl.d.ts

@@ -0,0 +1,10 @@
+import type { ReactElement } from 'react';
+import '@cupra/ui-kit/react/ds-media-control';
+import type { DsMediaControlAttrs } from '@cupra/ui-kit/react/types/ds-media-control';
+type MediaControlProps = DsMediaControlAttrs & {
+    className?: string;
+    onPlay?: (event: CustomEvent) => void;
+    onPause?: (event: CustomEvent) => void;
+};
+export declare function MediaControl(props: MediaControlProps): ReactElement;
+export {};

package/dist/components/MediaControl/MediaControl.js

@@ -0,0 +1,12 @@
+import { jsx as n } from "react/jsx-runtime";
+import "@cupra/ui-kit/react/utils/breakpoints";
+import "react";
+import { useHandleEvent as m } from "../../hooks/useHandleEvent.js";
+import "@cupra/ui-kit/react/ds-media-control";
+function u(o) {
+  const { className: r, onPlay: t, onPause: e, ...s } = o, { ref: a } = m({ "ds-media-control:play": t, "ds-media-control:pause": e });
+  return /* @__PURE__ */ n("ds-media-control-react", { ref: a, class: r, ...s });
+}
+export {
+  u as MediaControl
+};

package/dist/components/MediaControl/stories/CupraDiagonal.stories.d.ts

@@ -0,0 +1,6 @@
+import type { Meta, StoryObj } from '@storybook/react';
+declare const meta: Meta;
+export default meta;
+type Story = StoryObj;
+export declare const Default: Story;
+export declare const Sizes: Story;

package/dist/components/index.d.ts

@@ -1,5 +1,7 @@
 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';
@@ -22,6 +24,7 @@ export * from './Loader/Loader';
 export * from './Logo/Logo';
 export * from './MainTitle/MainTitle';
 export * from './MapPin/MapPin';
+export * from './MediaControl/MediaControl';
 export * from './Modal/Modal';
 export * from './PasswordInput/PasswordInput';
 export * from './PickerItem/PickerItem';
@@ -52,3 +55,4 @@ export * from './StaticBox/StaticBox';
 export * from './Stepper/Stepper';
 export * from './InteractiveCard/InteractiveCard';
 export * from './SidebarNavigation/SidebarNavigation';
+export * from './MediaControl/MediaControl';

package/dist/index.js

@@ -1,120 +1,126 @@
 import { Accordion as t } from "./components/Accordion/Accordion.js";
 import { Badge as x } from "./components/Badge/Badge.js";
-import { Bullets as f } from "./components/Bullets/Bullets.js";
-import { Button as i } from "./components/Button/Button.js";
-import { CarouselIndicator as d } from "./components/CarouselIndicator/CarouselIndicator.js";
-import { Checkbox as s } from "./components/Checkbox/Checkbox.js";
-import { Chip as g } from "./components/Chip/Chip.js";
-import { Chips as T } from "./components/Chips/Chips.js";
-import { Currency as S } from "./components/Currency/Currency.js";
-import { Dialog as I } from "./components/Dialog/Dialog.js";
-import { DialogBody as C } from "./components/DialogBody/DialogBody.js";
-import { DialogFooter as L } from "./components/DialogFooter/DialogFooter.js";
-import { DialogHeader as R } from "./components/DialogHeader/DialogHeader.js";
-import { Divider as y } from "./components/Divider/Divider.js";
-import { Drawer as P } from "./components/Drawer/Drawer.js";
-import { Hyperlink as H } from "./components/Hyperlink/Hyperlink.js";
-import { Icon as E } from "./components/Icon/Icon.js";
-import { IconButton as z } from "./components/IconButton/IconButton.js";
-import { Input as G } from "./components/Input/Input.js";
-import { LinkButton as j } from "./components/LinkButton/LinkButton.js";
-import { Loader as J, LoaderLogo as K } from "./components/Loader/Loader.js";
-import { Logo as U } from "./components/Logo/Logo.js";
-import { MainTitle as W } from "./components/MainTitle/MainTitle.js";
-import { MapPin as Y } from "./components/MapPin/MapPin.js";
-import { Modal as _ } from "./components/Modal/Modal.js";
-import { PasswordInput as oo } from "./components/PasswordInput/PasswordInput.js";
-import { PickerItem as eo } from "./components/PickerItem/PickerItem.js";
-import { Radio as po } from "./components/Radio/Radio.js";
-import { RadioButton as mo } from "./components/RadioButton/RadioButton.js";
-import { RadioButtonGroup as ao } from "./components/RadioButtonGroup/RadioButtonGroup.js";
-import { Rating as no } from "./components/Rating/Rating.js";
-import { Search as so } from "./components/Search/Search.js";
-import { SearchInput as go } from "./components/SearchInput/SearchInput.js";
-import { SecondaryNavigation as To } from "./components/SecondaryNavigation/SecondaryNavigation.js";
-import { SegmentedControl as So } from "./components/SegmentedControl/SegmentedControl.js";
-import { Select as Io } from "./components/Select/Select.js";
-import { Selection as Co } from "./components/Selection/Selection.js";
-import { Slider as Lo } from "./components/Slider/Slider.js";
-import { Tabs as Ro } from "./components/Tabs/Tabs.js";
-import { Tag as yo } from "./components/Tag/Tag.js";
-import { Text as Po } from "./components/Text/Text.js";
-import { TextInput as Ho } from "./components/TextInput/TextInput.js";
-import { Textarea as Eo } from "./components/Textarea/Textarea.js";
-import { ThemeProvider as zo } from "./components/ThemeProvider/ThemeProvider.js";
-import { ToggleButton as Go } from "./components/ToggleButton/ToggleButton.js";
-import { ToggleSwitch as jo } from "./components/ToggleSwitch/ToggleSwitch.js";
-import { Tooltip as Jo } from "./components/Tooltip/Tooltip.js";
-import { Toast as Qo } from "./components/Toast/Toast.js";
-import { ToastMessage as Vo } from "./components/ToastMessage/ToastMessage.js";
-import { Avatar as Xo } from "./components/Avatar/Avatar.js";
-import { StaticBox as Zo } from "./components/StaticBox/StaticBox.js";
-import { Stepper as $o } from "./components/Stepper/Stepper.js";
-import { InteractiveCard as rr } from "./components/InteractiveCard/InteractiveCard.js";
-import { SidebarNavigation as tr } from "./components/SidebarNavigation/SidebarNavigation.js";
-import { useBreakpoint as xr } from "./hooks/useBreakpoint.js";
-import { useEventListeners as fr } from "./hooks/useEventListeners.js";
-import { useHandleEvent as ir } from "./hooks/useHandleEvent.js";
+import { BasicCard as f } from "./components/BasicCard/BasicCard.js";
+import { BasicCardSection as i } from "./components/BasicCardSection/BasicCardSection.js";
+import { Bullets as d } from "./components/Bullets/Bullets.js";
+import { Button as c } from "./components/Button/Button.js";
+import { CarouselIndicator as u } from "./components/CarouselIndicator/CarouselIndicator.js";
+import { Checkbox as B } from "./components/Checkbox/Checkbox.js";
+import { Chip as T } from "./components/Chip/Chip.js";
+import { Chips as v } from "./components/Chips/Chips.js";
+import { Currency as h } from "./components/Currency/Currency.js";
+import { Dialog as L } from "./components/Dialog/Dialog.js";
+import { DialogBody as M } from "./components/DialogBody/DialogBody.js";
+import { DialogFooter as b } from "./components/DialogFooter/DialogFooter.js";
+import { DialogHeader as P } from "./components/DialogHeader/DialogHeader.js";
+import { Divider as H } from "./components/Divider/Divider.js";
+import { Drawer as E } from "./components/Drawer/Drawer.js";
+import { Hyperlink as z } from "./components/Hyperlink/Hyperlink.js";
+import { Icon as G } from "./components/Icon/Icon.js";
+import { IconButton as j } from "./components/IconButton/IconButton.js";
+import { Input as J } from "./components/Input/Input.js";
+import { LinkButton as Q } from "./components/LinkButton/LinkButton.js";
+import { Loader as V, LoaderLogo as W } from "./components/Loader/Loader.js";
+import { Logo as Y } from "./components/Logo/Logo.js";
+import { MainTitle as _ } from "./components/MainTitle/MainTitle.js";
+import { MapPin as oo } from "./components/MapPin/MapPin.js";
+import { MediaControl as eo } from "./components/MediaControl/MediaControl.js";
+import { Modal as po } from "./components/Modal/Modal.js";
+import { PasswordInput as mo } from "./components/PasswordInput/PasswordInput.js";
+import { PickerItem as ao } from "./components/PickerItem/PickerItem.js";
+import { Radio as no } from "./components/Radio/Radio.js";
+import { RadioButton as co } from "./components/RadioButton/RadioButton.js";
+import { RadioButtonGroup as uo } from "./components/RadioButtonGroup/RadioButtonGroup.js";
+import { Rating as Bo } from "./components/Rating/Rating.js";
+import { Search as To } from "./components/Search/Search.js";
+import { SearchInput as vo } from "./components/SearchInput/SearchInput.js";
+import { SecondaryNavigation as ho } from "./components/SecondaryNavigation/SecondaryNavigation.js";
+import { SegmentedControl as Lo } from "./components/SegmentedControl/SegmentedControl.js";
+import { Select as Mo } from "./components/Select/Select.js";
+import { Selection as bo } from "./components/Selection/Selection.js";
+import { Slider as Po } from "./components/Slider/Slider.js";
+import { Tabs as Ho } from "./components/Tabs/Tabs.js";
+import { Tag as Eo } from "./components/Tag/Tag.js";
+import { Text as zo } from "./components/Text/Text.js";
+import { TextInput as Go } from "./components/TextInput/TextInput.js";
+import { Textarea as jo } from "./components/Textarea/Textarea.js";
+import { ThemeProvider as Jo } from "./components/ThemeProvider/ThemeProvider.js";
+import { ToggleButton as Qo } from "./components/ToggleButton/ToggleButton.js";
+import { ToggleSwitch as Vo } from "./components/ToggleSwitch/ToggleSwitch.js";
+import { Tooltip as Xo } from "./components/Tooltip/Tooltip.js";
+import { Toast as Zo } from "./components/Toast/Toast.js";
+import { ToastMessage as $o } from "./components/ToastMessage/ToastMessage.js";
+import { Avatar as rr } from "./components/Avatar/Avatar.js";
+import { StaticBox as tr } from "./components/StaticBox/StaticBox.js";
+import { Stepper as xr } from "./components/Stepper/Stepper.js";
+import { InteractiveCard as fr } from "./components/InteractiveCard/InteractiveCard.js";
+import { SidebarNavigation as ir } from "./components/SidebarNavigation/SidebarNavigation.js";
+import { useBreakpoint as dr } from "./hooks/useBreakpoint.js";
+import { useEventListeners as cr } from "./hooks/useEventListeners.js";
+import { useHandleEvent as ur } from "./hooks/useHandleEvent.js";
 import "react";
-import { useResizeObserver as dr } from "./hooks/useResizeObserver/useResizeObserver.js";
+import { useResizeObserver as Br } from "./hooks/useResizeObserver/useResizeObserver.js";
 export {
   t as Accordion,
-  Xo as Avatar,
+  rr as Avatar,
   x as Badge,
-  f as Bullets,
-  i as Button,
-  d as CarouselIndicator,
-  s as Checkbox,
-  g as Chip,
-  T as Chips,
-  S as Currency,
-  I as Dialog,
-  C as DialogBody,
-  L as DialogFooter,
-  R as DialogHeader,
-  y as Divider,
-  P as Drawer,
-  H as Hyperlink,
-  E as Icon,
-  z as IconButton,
-  G as Input,
-  rr as InteractiveCard,
-  j as LinkButton,
-  J as Loader,
-  K as LoaderLogo,
-  U as Logo,
-  W as MainTitle,
-  Y as MapPin,
-  _ as Modal,
-  oo as PasswordInput,
-  eo as PickerItem,
-  po as Radio,
-  mo as RadioButton,
-  ao as RadioButtonGroup,
-  no as Rating,
-  so as Search,
-  go as SearchInput,
-  To as SecondaryNavigation,
-  So as SegmentedControl,
-  Io as Select,
-  Co as Selection,
-  tr as SidebarNavigation,
-  Lo as Slider,
-  Zo as StaticBox,
-  $o as Stepper,
-  Ro as Tabs,
-  yo as Tag,
-  Po as Text,
-  Ho as TextInput,
-  Eo as Textarea,
-  zo as ThemeProvider,
-  Qo as Toast,
-  Vo as ToastMessage,
-  Go as ToggleButton,
-  jo as ToggleSwitch,
-  Jo as Tooltip,
-  xr as useBreakpoint,
-  fr as useEventListeners,
-  ir as useHandleEvent,
-  dr as useResizeObserver
+  f as BasicCard,
+  i as BasicCardSection,
+  d as Bullets,
+  c as Button,
+  u as CarouselIndicator,
+  B as Checkbox,
+  T as Chip,
+  v as Chips,
+  h as Currency,
+  L as Dialog,
+  M as DialogBody,
+  b as DialogFooter,
+  P as DialogHeader,
+  H as Divider,
+  E as Drawer,
+  z as Hyperlink,
+  G as Icon,
+  j as IconButton,
+  J as Input,
+  fr as InteractiveCard,
+  Q as LinkButton,
+  V as Loader,
+  W as LoaderLogo,
+  Y as Logo,
+  _ as MainTitle,
+  oo as MapPin,
+  eo as MediaControl,
+  po as Modal,
+  mo as PasswordInput,
+  ao as PickerItem,
+  no as Radio,
+  co as RadioButton,
+  uo as RadioButtonGroup,
+  Bo as Rating,
+  To as Search,
+  vo as SearchInput,
+  ho as SecondaryNavigation,
+  Lo as SegmentedControl,
+  Mo as Select,
+  bo as Selection,
+  ir as SidebarNavigation,
+  Po as Slider,
+  tr as StaticBox,
+  xr as Stepper,
+  Ho as Tabs,
+  Eo as Tag,
+  zo as Text,
+  Go as TextInput,
+  jo as Textarea,
+  Jo as ThemeProvider,
+  Zo as Toast,
+  $o as ToastMessage,
+  Qo as ToggleButton,
+  Vo as ToggleSwitch,
+  Xo as Tooltip,
+  dr as useBreakpoint,
+  cr as useEventListeners,
+  ur as useHandleEvent,
+  Br as useResizeObserver
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cupra/ui-react",
-  "version": "2.0.0-canary.1",
+  "version": "2.0.0-canary.10",
   "description": "React components library",
   "author": "SEAT S.A.",
   "license": "SEAT S.A. Library EULA 1.0",
@@ -16,7 +16,10 @@
       "import": "./dist/components/*/*.js",
       "types": "./dist/components/*/*.d.ts"
     },
-    "./hooks/*": "./dist/hooks/*.js"
+    "./hooks/*": {
+      "import": "./dist/hooks/*.js",
+      "types": "./dist/hooks/*.d.ts"
+    }
   },
   "files": [
     "LICENSE",
@@ -44,7 +47,8 @@
   "peerDependencies": {
     "react": ">= 18.3.1 < 20",
     "react-dom": ">= 18.3.1 < 20",
-    "@cupra/ui-kit": "1.1.0-canary.1"
+    "@cupra/ui-kit": "1.1.0-canary.7",
+    "typescript": ">=5.0.0"
   },
   "dependencies": {
     "styled-components": "^6.1.16"
@@ -66,13 +70,13 @@
     "storybook": "^8.6.15",
     "typescript": "^5.8.2",
     "vite": "^6.4.1",
-    "@cupra/ui-kit": "1.1.0-canary.1"
+    "@cupra/ui-kit": "1.1.0-canary.7"
   },
   "scripts": {
     "build": "rm -rf dist && tsc --declaration --emitDeclarationOnly && vite build --emptyOutDir false",
     "test": "npx vitest run",
     "generate-licenses": "npx generate-license-file --input package.json --output THIRD_PARTY_LICENSES.MD --overwrite --ci",
-    "storybook": "storybook dev -p 6006",
+    "storybook": "pnpm --filter ui-kit build:react --mode development && storybook dev -p 6006",
     "build-storybook:cupra-diagonal": "storybook build --output-dir dist-storybook/cupra-diagonal"
   }
 }