@cupra/ui-react 0.1.0-canary.0 → 1.0.0-canary.2

package/README.md

@@ -1,193 +1,164 @@
 # UI React (React Components)
 
 ## Overview
-React components and wrappers built on top of the DS-UI Web Components to provide a seamless React developer experience.
+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
-React developers who want to use DS-UI components natively in React applications.
+Use `@cupra/ui-react` if your application is built with **React** and you want:
+
+- First-class React ergonomics with DS-UI components
+- Automatic integration with the underlying Web Components
+- Full theming support with minimal configuration
+- A smooth adoption path inside existing React codebases
+
+If you need a **framework-agnostic** solution, consider `@cupra/ui-kit` (Web Components).
+
+## Requirements & Compatibility
+
+This library currently provides **official support for React 18**.
+
+- **Supported React versions:** `>=18.3.1 <19`
+- **React 19:** not officially supported yet. Work is in progress to add full support.
+
+Projects using React 19 may still install and use the library, but behaviour is not guaranteed until official support is released.
 
 ## Installation
+
+### Install the package
 - npm: `npm install @cupra/ui-react`
 - pnpm: `pnpm add @cupra/ui-react`
 - yarn: `yarn add @cupra/ui-react`
 
-Access to the @cupra registry is required (see Requirements).
-
-## Usage
-
-<details><summary>View usage instructions</summary>
+### Registry configuration (only if needed)
 
-In React, the components can be imported from the `@cupra/ui-react` package. Each component has isolated styling and will not conflict with other versions of the library that may be loaded on the same page.
+**.npmrc**
 
-### Loading the CSS
+```ini
+@cupra:registry=https://registry.npmjs.org
+```
 
-You can load the CSS directly with a `<link>`, which is the most performant option. Specify the theme and version in the URL:
+**.yarnrc.yml**
 
-```html
-<link rel='stylesheet' href='https://ds-assets.cupra.com/[version]/styles/[theme]/theme.css'>
+```yaml
+npmScopes:
+cupra:
+npmRegistryServer: "https://registry.npmjs.org"
 ```
 
-- **[theme]**: Specify the theme name (e.g., `cupra`).
-- **[version]**: Use the fixed version, such as `1.0`, `1.1.1`, etc.
+---
 
-Alternatively, you can use the `ThemeProvider` component to load the theme directly in your React application by setting the `theme` attribute. This approach eliminates the need to include a separate `<link>` tag for the stylesheet. However, from a performance perspective, using a `<link>` to load the CSS is generally more efficient.
+## Versioning and Release Channels
 
-Additionally, the `ThemeProvider` **is necessary** for the proper loading of **icons** and **fonts**.
+This package is distributed through npm using **two release channels**.
 
-Example:
+### Stable Releases (`latest`)
+Production-ready versions:
 
-```javascript
-import { Button, ThemeProvider, Icon, Modal, Tag, Input } from '@cupra/ui-react';
+- Follow Semantic Versioning
+- Include only validated changes
+- Recommended for all production apps
 
-function App() {
-  const [count, setCount] = useState(0);
+Install:
 
-  return (
-    <ThemeProvider theme="cupra">
-      <Button variant="destructive" icon-name="filters-background">Click me!</Button>
-      <Icon icon-name="filters-background"></Icon>
-    </ThemeProvider>
-  );
-}
+```bash
+npm install @cupra/ui-react
 ```
-</details>
 
-## Requirements
-- Node.js per .nvmrc
-- pnpm 9.4.0 or compatible
-- Access to GitHub Packages for @cupra (configure .npmrc or .yarnrc.yml with your token)
+Specific version:
 
-## Versioning
-This package follows semantic versioning. See repository releases for changes.
-Note: @cupra/ui-react depends on @cupra/ui-kit.
-
-## License
-License: SEAT S.A. Library EULA 1.0
-See LICENSE.md in this package for the full text. Third-party license attributions (if any) may be provided in THIRD_PARTY_LICENSES.md.
-
-## Support
-Please open issues in the repository issue tracker.
-
-For contributing and monorepo details, see the root CONTRIBUTING.md.
+```bash
+npm install @cupra/ui-react@0.1.3
+```
 
 ---
 
-## Toast System
+### Canary Releases (`canary`)
+Early-access versions published after each merge into `main`.
 
-<details><summary>Toast</summary>
+Use canary releases if you:
 
-React exposes:
-- **`<Toast />`** — container that renders toast messages.
-- **`<ToastMessage />`** — reusable toast message template.
-- **`Toast.add(options)`** — utility function to **add** a toast from anywhere in your app. Returns the `id` of the created toast.
+- Want to preview upcoming changes
+- Are validating new features
+- Accept small instability or rapid iteration
 
-> **Note:**  
-> The recommended behavior is to let toasts close automatically after `duration` or by user interaction.  
-> Programmatic removal should only be used when necessary.
+Latest canary:
 
-### Basic Setup
+```bash
+npm install @cupra/ui-react@canary
+```
 
-```jsx
-import { Toast } from '@cupra/ui-react';
+Specific canary version:
 
-export function AppRoot() {
-  return (
-    <>
-      {/* Place this once near the root of your app */}
-      <Toast position="top-right" />
-      {/* ...rest of your app */}
-    </>
-  );
-}
+```bash
+npm install @cupra/ui-react@0.1.4-canary.2
 ```
 
-### Showing a Toast with `Toast.add`
+---
 
-```jsx
-import { Toast } from '@cupra/ui-react';
+## Recommended usage
 
-function Example() {
-  const handleClick = () => {
-    Toast.add({
-      title: 'Success',
-      text: 'Operation completed successfully',
-      status: 'success',
-      duration: 5000, // Optional (ms). Default: 10000
-      // id: 'custom-id-optional',       // Optional custom ID
-      // referenceId: 'my-template-id',  // Optional template reference
-    });
-  };
+- **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`)
 
-  return <button onClick={handleClick}>Show toast</button>;
-}
+```bash
+npm install @cupra/ui-react@0.1.4-canary.2
 ```
 
-### Using Custom Templates with `<ToastMessage />`
-
-```jsx
-import { Toast, ToastMessage } from '@cupra/ui-react';
-
-export function Templates() {
-  return (
-    <>
-      <Toast position="top-right" />
-
-      {/* Reusable template */}
-      <ToastMessage
-        data-id="custom-template"
-        title="Custom Toast"
-        text="You can put custom content here"
-        onClose={() => console.log('Template toast closed')}
-      >
-        <button>Action</button>
-      </ToastMessage>
-    </>
-  );
-}
-```
+---
 
-Trigger a toast using that template:
+## Usage
 
-```jsx
-Toast.add({ referenceId: 'custom-template', duration: 8000 });
+Wrap your React app with the `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                           |
+
+If `loadFonts` or `loadStyles` are `false`, you must manually include `<link>` tags in your HTML.
+
+### Option A — Manual CSS and font links
+
+```tsx
+import { ThemeProvider, Button, Icon } from '@cupra/ui-react';
+
+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" loadFonts={false} loadStyles={false}>
+                <Button variant="destructive" icon-name="filters-background">Click me</Button>
+                <Icon icon-name="filters-background" />
+            </ThemeProvider>
+        </>
+    );
+}
 ```
 
-### Removing a Toast (Optional)
+### Option B — Provider loads assets automatically
 
-It’s preferable to let toasts close automatically or via user interaction.  
-If you need to close one programmatically:
+```tsx
+import { ThemeProvider, Button } from '@cupra/ui-react';
 
-- By **`id`**: each toast has a unique ID (auto-generated unless provided manually).
-- By **`referenceId`**: refers to a template; if several toasts share the same template ID, only one (the oldest) will be removed.
-
-```javascript
-// Remove by ID
-window.dispatchEvent(new CustomEvent('toast:remove', { detail: { id: 'my-toast-id' } }));
-
-// Remove by referenceId (template)
-window.dispatchEvent(new CustomEvent('toast:remove', { detail: { referenceId: 'custom-template' } }));
+export function App() {
+    return (
+        <ThemeProvider theme="cupra" loadFonts={true} loadStyles={true}>
+            <Button variant="primary">Button</Button>
+        </ThemeProvider>
+    );
+}
 ```
 
-### API for `Toast.add(options)`
-
-| Option | Type | Description |
-|--------|------|-------------|
-| **id** | `string` | Optional custom identifier. If not provided, a unique one is auto-generated. |
-| **title** | `string` | Title text for the toast. |
-| **text** | `string` | Body content of the toast. |
-| **status** | `string` | One of `'success'`, `'error'`, `'warning'`, `'info'`, `'default'`. Controls the visual style. |
-| **duration** | `number` | Time in milliseconds before auto-dismiss. Defaults to `10000`. |
-| **referenceId** | `string` | ID of a `<ToastMessage />` template. If set, `title`, `text`, and `status` are ignored. |
-
-### Component Props
-
-**`<Toast />`**
-- `position`: `'top-right' | 'top-left' | 'bottom-right' | 'bottom-left'` (default: `'top-right'`).
+---
 
-**`<ToastMessage />`**
-- `data-id`: template identifier.
-- `data-template`: (default = `true`) marks it as a template.
-- `title`, `text`, `status`: same meaning as in `Toast.add`.
-- `onClose`: callback triggered when the toast closes (auto, user, or removal event).
+## License
+License: 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`.
 
-</details>
+## Support
+For help and support, contact: **ds.support@seat.es**

package/THIRD-PARTY-LICENSES.MD

@@ -0,0 +1,81 @@
+This file was generated with the generate-license-file npm package!
+https://www.npmjs.com/package/generate-license-file
+
+The following npm package may be included in this product:
+
+ - @cupra/ui-kit@16.0.1
+
+This package contains the following license:
+
+# SEAT, S.A. Library EULA
+
+SEAT, S.A.U. (hereinafter, “SEAT”) is a Spanish entity domiciled in Martorell (Barcelona), Autovía A-2, Km. 585, with a Tax Identification Number (C.I.F.) A-28.049.161, duly registered in the Mercantile Registry of Barcelona in Volume 23.662, folio 1, page number B-56.855 and whose contact email is [*].
+SEAT releases this End-User License Agreement (“EULA”) to specify the rights and obligations when using a library or package applicable to this EULA (“Library”).
+
+## Library Specification
+The specification of the Library does not form part of this EULA and is instead provided separately thought appropriate documentation accompanying the aforementioned Library. The Library is intended solely to support SEAT´s internal development projects.
+
+## License Grant
+SEAT hereby declares that all source code, files, fonts and other associated assets comprising the Library are the exclusive property of SEAT and/or its licensors.
+Subject to the terms and conditions of this EULA, SEAT grants you a limited, non-exclusive, non-transferable, and revocable license to download, install and use the Library strictly in accordance with this EULA.
+Any breach of the limitations or restrictions set forth herein shall result in the immediate and automatic termination of the license granted. Any use of the Library beyond the scope of the license shall constitute an infringement of SEAT´s intellectual property rights and a material breach of this EULA.  In the event of any such violation, the license shall automatically and immediately terminate without prior notice.
+ If you violate any of these limitations or restrictions, the license grant will automatically and immediately expire. Any usage of the Library outside the scope of the applicable license constitutes an infringement of SEAT´s intellectual property rights as well as a material breach of this EULA.
+
+## Restrictions on Use
+You agree that you shall not, and shall not permit any third party to:
+
+1. license, sell, rent, lease, assign, distribute, transmit, host, outsource, disclose or otherwise commercially exploit the Library, or make the Library available to any third party in any manner;
+2. provide, disclose, or otherwise make accessible any features, functionalities, or components of the Library to any individual or entity outside your organization;
+3. Modify, reverse engineer, decompile or disassemble, or otherwise attempt to derive the source code, algorithms, methods or techniques of the Library;
+4. Remove, alter or obscure any proprietary notices, trademarks, labels or other intellectual property markings contained in or affixed to the Library;
+5. translate, adapt, arrange, or create derivative works based on the Library, or otherwise modify the Library, except as expressly permitted under this EULA;
+6. Use the Library in any manner that exceeds or is inconsistent with the rights granted under this EULA. The Library may be used solely for the purpose or in any context outside the scope of your business relationship with SEAT.
+
+## Copyright and ownership
+SEAT and its licensors retain all right, title, and interest in and to the Library, including without limitation, all associated copyrights, trademarks, trade secrets, patents, and other intellectual property rights.
+You are granted only the limited rights expressly set forth in the EULA. You acknowledge and agree that the Library is licensed, not sold, and that no ownership rights are transferred to you under this Agreement. All rights not expressly granted herein are reserved by SEAT and its licensors.
+
+## Modifications and availability
+SEAT reserves the right, at its sole discretion, to modify, suspend, or discontinue temporarily or permanently, the Library or any related services, with or without prior notice, and without incurring any liability to you or any third party.
+You acknowledge that the Library is not subject to regular maintenance or updates. Any updates, enhancements, or modifications shall be provided solely at SEAT´s discretion and without any obligation to do so.
+
+## Limitation of Liability
+To the maximum extent permitted by applicable law, SEAT and its licensors shall not be liable for any indirect, incidental, special, consequential, or punitive damages, including but not limited to loss of profits, data, or business opportunities, arising out of or in connection with the use or inability to use the Library, even if SEAT has been advised of the possibility of such damages. SEAT´s total liability under this EULA shall in no event exceed the amount paid by you (if any) for the use of the Library.
+
+## Governing Law and Dispute resolution
+This EULA shall be governed by and construed in accordance with the common laws of Spain, without regard to its conflict of law principles. Any dispute, controversy, or claim arising out of or in connection with this EULA shall be submitted to the exclusive jurisdiction of the courts of the city of Barcelona (Spain).
+
+-----------
+
+The following npm package may be included in this product:
+
+ - styled-components@6.1.19
+
+This package contains the following license:
+
+MIT License
+
+Copyright (c) 2016-present Glen Maddern and Maximilian Stoiber
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+-----------
+
+This file was generated with the generate-license-file npm package!
+https://www.npmjs.com/package/generate-license-file

package/dist/components/Accordion/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/Avatar/stories/CupraDiagonal.stories.d.ts

@@ -0,0 +1,8 @@
+import type { Meta, StoryObj } from '@storybook/react';
+declare const meta: Meta;
+export default meta;
+type Story = StoryObj;
+export declare const DefaultIcon: Story;
+export declare const WithInitials: Story;
+export declare const WithImage: Story;
+export declare const Disabled: Story;

package/dist/components/Button/Button.js

@@ -1,10 +1,19 @@
-import { jsx as s } from "react/jsx-runtime";
+import { jsx as c } from "react/jsx-runtime";
 import "react";
-import { useHandleEvent as i } from "../../hooks/useHandleEvent.js";
+import { useHandleEvent as m } from "../../hooks/useHandleEvent.js";
 import "../../packages/ui-kit/dist-react/index.js";
-function u(t) {
-  const { className: o, children: r, onClick: n, ...c } = t, { ref: e } = i({ click: n });
-  return /* @__PURE__ */ s("ds-button-react", { ref: e, class: o, ...c, children: r });
+function u(o) {
+  const { className: r, children: s, onClick: e, size: t, ...i } = o, { ref: n } = m({ click: e });
+  return /* @__PURE__ */ c(
+    "ds-button-react",
+    {
+      ref: n,
+      size: typeof t == "string" ? t : JSON.stringify(t),
+      class: r,
+      ...i,
+      children: s
+    }
+  );
 }
 export {
   u as Button

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

@@ -0,0 +1,19 @@
+import type { Meta, StoryObj } from '@storybook/react';
+declare const meta: Meta;
+export default meta;
+type Story = StoryObj;
+export declare const Primary: Story;
+export declare const Secondary: Story;
+export declare const Tertiary: Story;
+export declare const Text: Story;
+export declare const PrimaryDestructive: Story;
+export declare const SecondaryDestructive: Story;
+export declare const TextDestructive: Story;
+export declare const PrimaryDisabled: Story;
+export declare const SecondaryDisabled: Story;
+export declare const TertiaryDisabled: Story;
+export declare const TextDisabled: Story;
+export declare const Medium: Story;
+export declare const Small: Story;
+export declare const CustomWithAnchorChildren: Story;
+export declare const CustomWithButtonChildren: Story;

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

@@ -0,0 +1,8 @@
+import type { Meta, StoryObj } from '@storybook/react';
+declare const meta: Meta;
+export default meta;
+type Story = StoryObj;
+export declare const InfiniteStart: Story;
+export declare const InfiniteCenter: Story;
+export declare const InfiniteEnd: Story;
+export declare const NotInfinite: Story;

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

@@ -0,0 +1,20 @@
+import type { Meta, StoryObj } from '@storybook/react';
+declare const meta: Meta;
+export default meta;
+type Story = StoryObj;
+export declare const Unchecked: Story;
+export declare const Checked: Story;
+export declare const Indeterminate: Story;
+export declare const DisabledUnchecked: Story;
+export declare const DisabledChecked: Story;
+export declare const DisabledIndeterminate: Story;
+export declare const Invalid: Story;
+export declare const RequiredChecked: Story;
+export declare const WithHelperText: Story;
+export declare const WithInfoText: Story;
+export declare const ForcedError: Story;
+export declare const CheckedForcedError: Story;
+export declare const SmallLeftDefault: Story;
+export declare const SmallRightDefault: Story;
+export declare const MediumLeftDefault: Story;
+export declare const MediumRightDefault: Story;

package/dist/components/Chip/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 Default: Story;
+export declare const Selected: Story;
+export declare const DeselectableSelected: Story;

package/dist/components/Chips/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/Currency/stories/CupraDiagonal.stories.d.ts

@@ -0,0 +1,13 @@
+import type { Meta, StoryObj } from '@storybook/react';
+declare const meta: Meta;
+export default meta;
+type Story = StoryObj;
+export declare const Colossal: Story;
+export declare const Huge: Story;
+export declare const Big: Story;
+export declare const Large: Story;
+export declare const Medium: Story;
+export declare const Small: Story;
+export declare const Tiny: Story;
+export declare const Micro: Story;
+export declare const Nano: Story;

package/dist/components/Dialog/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/DialogBody/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/DialogFooter/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/DialogHeader/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/Divider/stories/CupraDiagonal.stories.d.ts

@@ -0,0 +1,8 @@
+import type { Meta, StoryObj } from '@storybook/react';
+declare const meta: Meta;
+export default meta;
+type Story = StoryObj;
+export declare const PrimaryHorizontal: Story;
+export declare const SecondaryHorizontal: Story;
+export declare const PrimaryVertical: Story;
+export declare const SecondaryVertical: Story;

package/dist/components/Icon/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/IconButton/IconButton.js

@@ -1,10 +1,18 @@
-import { jsx as s } from "react/jsx-runtime";
+import { jsx as e } from "react/jsx-runtime";
 import "../../packages/ui-kit/dist-react/index.js";
 import "react";
-import { useHandleEvent as e } from "../../hooks/useHandleEvent.js";
+import { useHandleEvent as c } from "../../hooks/useHandleEvent.js";
 function l(o) {
-  const { className: t, onClick: r, ...n } = o, { ref: c } = e({ click: r });
-  return /* @__PURE__ */ s("ds-icon-button-react", { ref: c, class: t, ...n });
+  const { className: r, onClick: n, size: t, ...s } = o, { ref: i } = c({ click: n });
+  return /* @__PURE__ */ e(
+    "ds-icon-button-react",
+    {
+      ref: i,
+      size: typeof t == "string" ? t : JSON.stringify(t),
+      class: r,
+      ...s
+    }
+  );
 }
 export {
   l as IconButton

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

@@ -0,0 +1,13 @@
+import type { Meta, StoryObj } from '@storybook/react';
+declare const meta: Meta;
+export default meta;
+type Story = StoryObj;
+export declare const Primary: Story;
+export declare const Secondary: Story;
+export declare const Tertiary: Story;
+export declare const Quaternary: Story;
+export declare const Standard: Story;
+export declare const Rounded: Story;
+export declare const Disabled: Story;
+export declare const Medium: Story;
+export declare const Small: Story;

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

@@ -0,0 +1,55 @@
+import type { ReactElement } from 'react';
+import '@cupra/ui-kit/react';
+import type { DsInteractiveCardAttrs } from '@cupra/ui-kit/react/types/ds-interactive-card';
+type Children = JSX.Element | JSX.Element[] | string;
+type InteractiveCardProps = DsInteractiveCardAttrs & {
+    className?: string;
+    children?: Children;
+    onClick?: (event: CustomEvent) => void;
+};
+export declare function InteractiveCard(props: InteractiveCardProps): ReactElement;
+export declare namespace InteractiveCard {
+    var Title: {
+        ({ children }: {
+            children: Children;
+        }): ReactElement;
+        displayName: string;
+    };
+    var Subtitle: {
+        ({ children }: {
+            children: Children;
+        }): ReactElement;
+        displayName: string;
+    };
+    var Meta: {
+        ({ children }: {
+            children: Children;
+        }): ReactElement;
+        displayName: string;
+    };
+    var Content: {
+        ({ children }: {
+            children: Children;
+        }): ReactElement;
+        displayName: string;
+    };
+    var Cta: {
+        ({ children }: {
+            children: Children;
+        }): ReactElement;
+        displayName: string;
+    };
+    var ErrorTitle: {
+        ({ children }: {
+            children: Children;
+        }): ReactElement;
+        displayName: string;
+    };
+    var ErrorText: {
+        ({ children }: {
+            children: Children;
+        }): ReactElement;
+        displayName: string;
+    };
+}
+export {};