@cupra/ui-react 0.0.2-placeholder → 1.0.0-canary.1

package/README.md

@@ -1,27 +1,164 @@
-# @cupra/ui-react · Placeholder Package
+# UI React (React Components)
 
 ## Overview
-This package represents a **placeholder release** for the `@cupra/ui-react` module of the **DS-UI Design System**.  
-It has been published to establish the package namespace and to support configuration processes within the continuous integration and release infrastructure.
+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.
 
-No functional implementation or production assets are included in this version.
+## Audience
+Use `@cupra/ui-react` if your application is built with **React** and you want:
 
-## Purpose
-- Reserve the `@cupra/ui-react` package name under the SeatCode organization.
-- Facilitate configuration and validation of the associated build and release systems.
-- Provide an initial reference point for future official releases of the React components library.
+- 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
 
-## Contents
-This release includes:
-- `package.json` metadata
-- `LICENSE.md`
-- `README.md`
+If you need a **framework-agnostic** solution, consider `@cupra/ui-kit` (Web Components).
 
-No source code, compiled output, or runtime components are distributed at this stage.
+## Requirements & Compatibility
 
-## Future Releases
-Subsequent versions will deliver the complete implementation of the DS-UI React components library, developed with **React** and **TypeScript**, following the principles of **Semantic Versioning 2.0.0**.
+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`
+
+### Registry configuration (only if needed)
+
+**.npmrc**
+
+```ini
+@cupra:registry=https://registry.npmjs.org
+```
+
+**.yarnrc.yml**
+
+```yaml
+npmScopes:
+cupra:
+npmRegistryServer: "https://registry.npmjs.org"
+```
+
+---
+
+## Versioning and Release Channels
+
+This package is distributed through npm using **two release channels**.
+
+### Stable Releases (`latest`)
+Production-ready versions:
+
+- Follow Semantic Versioning
+- Include only validated changes
+- Recommended for all production apps
+
+Install:
+
+```bash
+npm install @cupra/ui-react
+```
+
+Specific version:
+
+```bash
+npm install @cupra/ui-react@0.1.3
+```
+
+---
+
+### Canary Releases (`canary`)
+Early-access versions published after each merge into `main`.
+
+Use canary releases if you:
+
+- Want to preview upcoming changes
+- Are validating new features
+- Accept small instability or rapid iteration
+
+Latest canary:
+
+```bash
+npm install @cupra/ui-react@canary
+```
+
+Specific canary version:
+
+```bash
+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
+```
+
+---
+
+## Usage
+
+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>
+        </>
+    );
+}
+```
+
+### Option B — Provider loads assets automatically
+
+```tsx
+import { ThemeProvider, Button } from '@cupra/ui-react';
+
+export function App() {
+    return (
+        <ThemeProvider theme="cupra" loadFonts={true} loadStyles={true}>
+            <Button variant="primary">Button</Button>
+        </ThemeProvider>
+    );
+}
+```
+
+---
 
 ## License
-**SEE LICENSE IN LICENSE.md**  
-This package is distributed under the SEAT S.A. Library EULA.
+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`.
+
+## 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/Accordion.d.ts

@@ -0,0 +1,17 @@
+import { DsAccordionAttrs } from '@cupra/ui-kit/react/types/ds-accordion';
+import '@cupra/ui-kit/react';
+import { type ReactElement } from 'react';
+type Children = JSX.Element | JSX.Element[] | string;
+interface AccordionProps extends DsAccordionAttrs {
+    children: Children;
+}
+export declare const Accordion: {
+    ({ children, ...restProps }: AccordionProps): ReactElement;
+    Title: ({ children }: {
+        children: Children;
+    }) => ReactElement;
+    Content: ({ children }: {
+        children: Children;
+    }) => ReactElement;
+};
+export {};

package/dist/components/Accordion/Accordion.js

@@ -0,0 +1,8 @@
+import { jsx as o } from "react/jsx-runtime";
+import "../../packages/ui-kit/dist-react/index.js";
+const n = ({ children: t, ...r }) => /* @__PURE__ */ o("ds-accordion-react", { ...r, children: t }), e = ({ children: t }) => /* @__PURE__ */ o("div", { slot: "title", children: t }), c = ({ children: t }) => /* @__PURE__ */ o("div", { slot: "content", children: t });
+n.Title = e;
+n.Content = c;
+export {
+  n as Accordion
+};

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

@@ -0,0 +1,9 @@
+import type { ReactElement, ReactNode } from 'react';
+import '@cupra/ui-kit/react';
+import type { DsAvatarAttrs } from '@cupra/ui-kit/react/types/ds-avatar';
+export type AvatarProps = DsAvatarAttrs & {
+    className?: string;
+    onClick?: (event: CustomEvent) => void;
+    image?: ReactNode | null;
+};
+export declare function Avatar(props: AvatarProps): ReactElement;

package/dist/components/Avatar/Avatar.js

@@ -0,0 +1,11 @@
+import { jsx as s } from "react/jsx-runtime";
+import { isValidElement as i, cloneElement as m } from "react";
+import { useHandleEvent as c } from "../../hooks/useHandleEvent.js";
+import "../../packages/ui-kit/dist-react/index.js";
+function v(t) {
+  const { className: e, onClick: r, image: o, ...a } = t, { ref: l } = c({ click: r }), n = o && i(o) ? m(o, { slot: "media", ...o.props }) : null;
+  return /* @__PURE__ */ s("ds-avatar-react", { ref: l, class: e, ...a, children: n });
+}
+export {
+  v as Avatar
+};

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

@@ -0,0 +1,7 @@
+import { DsBulletsAttrs } from '@cupra/ui-kit/react/types/ds-bullets';
+import '@cupra/ui-kit/react';
+import { type ReactElement } from 'react';
+export interface BulletsProps extends DsBulletsAttrs {
+    className?: string;
+}
+export declare const Bullets: ({ className, ...rest }: BulletsProps) => ReactElement;

package/dist/components/Bullets/Bullets.js

@@ -0,0 +1,6 @@
+import { jsx as s } from "react/jsx-runtime";
+import "../../packages/ui-kit/dist-react/index.js";
+const o = ({ className: t, ...r }) => /* @__PURE__ */ s("ds-bullets-react", { class: t, ...r });
+export {
+  o as Bullets
+};

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

@@ -0,0 +1,10 @@
+import type { ReactElement } from 'react';
+import '@cupra/ui-kit/react';
+import type { DsButtonAttrs } from '@cupra/ui-kit/react/types/ds-button';
+type ButtonProps = DsButtonAttrs & {
+    className?: string;
+    children: JSX.Element | JSX.Element[] | string;
+    onClick?: (event: CustomEvent) => void;
+};
+export declare function Button(props: ButtonProps): ReactElement;
+export {};

package/dist/components/Button/Button.js

@@ -0,0 +1,20 @@
+import { jsx as c } from "react/jsx-runtime";
+import "react";
+import { useHandleEvent as m } from "../../hooks/useHandleEvent.js";
+import "../../packages/ui-kit/dist-react/index.js";
+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/CarouselIndicator.d.ts

@@ -0,0 +1,8 @@
+import { DsCarouselIndicatorAttrs } from '@cupra/ui-kit/react/types/ds-carousel-indicator';
+import { type ReactElement } from 'react';
+import '@cupra/ui-kit/react';
+type CarouselIndicatorProps = DsCarouselIndicatorAttrs & {
+    className?: string;
+};
+export declare function CarouselIndicator(props: CarouselIndicatorProps): ReactElement;
+export {};

package/dist/components/CarouselIndicator/CarouselIndicator.js

@@ -0,0 +1,9 @@
+import { jsx as t } from "react/jsx-runtime";
+import "../../packages/ui-kit/dist-react/index.js";
+function i(r) {
+  const { className: o, children: c, ...s } = r;
+  return /* @__PURE__ */ t("ds-carousel-indicator-react", { class: o, ...s });
+}
+export {
+  i as CarouselIndicator
+};

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

@@ -0,0 +1,9 @@
+import { type ReactElement } from 'react';
+import '@cupra/ui-kit/react';
+import { DsCheckboxAttrs } from '@cupra/ui-kit/react/types/ds-checkbox';
+interface CheckboxProps extends DsCheckboxAttrs {
+    onChange?: (event: CustomEvent) => void;
+    children: JSX.Element | JSX.Element[] | string;
+}
+export declare function Checkbox({ onChange, children, ...rest }: CheckboxProps): ReactElement;
+export {};

package/dist/components/Checkbox/Checkbox.js

@@ -0,0 +1,11 @@
+import { jsx as c } from "react/jsx-runtime";
+import "react";
+import { useHandleEvent as n } from "../../hooks/useHandleEvent.js";
+import "../../packages/ui-kit/dist-react/index.js";
+function s({ onChange: o, children: r, ...e }) {
+  const { ref: t } = n({ change: o });
+  return /* @__PURE__ */ c("ds-checkbox-react", { ref: t, ...e, children: r });
+}
+export {
+  s as Checkbox
+};

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

@@ -0,0 +1,9 @@
+import { DsChipAttrs } from '@cupra/ui-kit/react/types/ds-chip';
+import { type ReactElement } from 'react';
+import '@cupra/ui-kit/react';
+type ChipProps = DsChipAttrs & {
+    className?: string;
+    children: JSX.Element | JSX.Element[] | string;
+};
+export declare function Chip(props: ChipProps): ReactElement;
+export {};

package/dist/components/Chip/Chip.js

@@ -0,0 +1,9 @@
+import { jsx as c } from "react/jsx-runtime";
+import "../../packages/ui-kit/dist-react/index.js";
+function p(r) {
+  const { className: o, children: s, ...t } = r;
+  return /* @__PURE__ */ c("ds-chip-react", { class: o, ...t, children: s });
+}
+export {
+  p as Chip
+};

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

@@ -0,0 +1,10 @@
+import { type DsChipsAttrs } from '@cupra/ui-kit/react/types/ds-chips';
+import { type ReactElement } from 'react';
+import '@cupra/ui-kit/react';
+type ChipsProps = DsChipsAttrs & {
+    className?: string;
+    children: JSX.Element | JSX.Element[] | string;
+    onChange?: (event: CustomEvent) => void;
+};
+export declare function Chips(props: ChipsProps): ReactElement;
+export {};

package/dist/components/Chips/Chips.js

@@ -0,0 +1,13 @@
+import { jsx as c } from "react/jsx-runtime";
+import "../../packages/ui-kit/dist-react/index.js";
+import "react";
+import { useHandleEvent as i } from "../../hooks/useHandleEvent.js";
+function d(r) {
+  const { className: s, children: o, onChange: e, ...t } = r, { ref: n } = i({
+    "ds-chips:change": e
+  });
+  return /* @__PURE__ */ c("ds-chips-react", { ref: n, class: s, ...t, children: o });
+}
+export {
+  d as Chips
+};

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

@@ -0,0 +1,8 @@
+import { type ReactElement } from 'react';
+import '@cupra/ui-kit/react';
+import { DsCurrencyAttrs } from '@cupra/ui-kit/react/types/ds-currency';
+type CurrencyProps = DsCurrencyAttrs & {
+    className?: string;
+};
+export declare function Currency(props: CurrencyProps): ReactElement;
+export {};

package/dist/components/Currency/Currency.js

@@ -0,0 +1,9 @@
+import { jsx as s } from "react/jsx-runtime";
+import "../../packages/ui-kit/dist-react/index.js";
+function n(r) {
+  const { className: c, ...o } = r;
+  return /* @__PURE__ */ s("ds-currency-react", { class: c, ...o });
+}
+export {
+  n as Currency
+};

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

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

package/dist/components/Dialog/Dialog.js

@@ -0,0 +1,15 @@
+import { jsx as t } from "react/jsx-runtime";
+import "../../packages/ui-kit/dist-react/index.js";
+import "react";
+import { useHandleEvent as c } from "../../hooks/useHandleEvent.js";
+function u(e) {
+  const { className: n, children: l, onClose: s, withPortal: i, ...o } = e, { ref: a } = c({
+    "ds-dialog:close": s
+  });
+  if (!o.open) return null;
+  const r = /* @__PURE__ */ t("ds-dialog-react", { ref: a, class: n, ...o, children: l });
+  return i ? /* @__PURE__ */ t("ds-portal-react", { style: { display: "none" }, children: r }) : r;
+}
+export {
+  u as Dialog
+};

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

@@ -0,0 +1,9 @@
+import { DsDialogBodyAttrs } from '@cupra/ui-kit/react/types/ds-dialog-body';
+import { type ReactElement } from 'react';
+import '@cupra/ui-kit/react';
+type DialogBodyProps = DsDialogBodyAttrs & {
+    className?: string;
+    children?: JSX.Element | JSX.Element[] | string;
+};
+export declare function DialogBody(props: DialogBodyProps): ReactElement;
+export {};

package/dist/components/DialogBody/DialogBody.js

@@ -0,0 +1,9 @@
+import { jsx as a } from "react/jsx-runtime";
+import "../../packages/ui-kit/dist-react/index.js";
+function i(o) {
+  const { className: r, children: s, ...t } = o;
+  return /* @__PURE__ */ a("ds-dialog-body-react", { class: r, ...t, children: s });
+}
+export {
+  i as DialogBody
+};

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;