@cupra/ui-react 0.0.2-placeholder → 0.1.0-canary.0

package/README.md

@@ -1,27 +1,193 @@
-# @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 to provide a seamless React developer experience.
 
-No functional implementation or production assets are included in this version.
+## Audience
+React developers who want to use DS-UI components natively in React applications.
 
-## 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.
+## Installation
+- npm: `npm install @cupra/ui-react`
+- pnpm: `pnpm add @cupra/ui-react`
+- yarn: `yarn add @cupra/ui-react`
 
-## Contents
-This release includes:
-- `package.json` metadata
-- `LICENSE.md`
-- `README.md`
+Access to the @cupra registry is required (see Requirements).
 
-No source code, compiled output, or runtime components are distributed at this stage.
+## Usage
 
-## 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**.
+<details><summary>View usage instructions</summary>
+
+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.
+
+### Loading the CSS
+
+You can load the CSS directly with a `<link>`, which is the most performant option. Specify the theme and version in the URL:
+
+```html
+<link rel='stylesheet' href='https://ds-assets.cupra.com/[version]/styles/[theme]/theme.css'>
+```
+
+- **[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.
+
+Additionally, the `ThemeProvider` **is necessary** for the proper loading of **icons** and **fonts**.
+
+Example:
+
+```javascript
+import { Button, ThemeProvider, Icon, Modal, Tag, Input } from '@cupra/ui-react';
+
+function App() {
+  const [count, setCount] = useState(0);
+
+  return (
+    <ThemeProvider theme="cupra">
+      <Button variant="destructive" icon-name="filters-background">Click me!</Button>
+      <Icon icon-name="filters-background"></Icon>
+    </ThemeProvider>
+  );
+}
+```
+</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)
+
+## Versioning
+This package follows semantic versioning. See repository releases for changes.
+Note: @cupra/ui-react depends on @cupra/ui-kit.
 
 ## 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 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.
+
+---
+
+## Toast System
+
+<details><summary>Toast</summary>
+
+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.
+
+> **Note:**  
+> The recommended behavior is to let toasts close automatically after `duration` or by user interaction.  
+> Programmatic removal should only be used when necessary.
+
+### Basic Setup
+
+```jsx
+import { Toast } from '@cupra/ui-react';
+
+export function AppRoot() {
+  return (
+    <>
+      {/* Place this once near the root of your app */}
+      <Toast position="top-right" />
+      {/* ...rest of your app */}
+    </>
+  );
+}
+```
+
+### Showing a Toast with `Toast.add`
+
+```jsx
+import { Toast } from '@cupra/ui-react';
+
+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
+    });
+  };
+
+  return <button onClick={handleClick}>Show toast</button>;
+}
+```
+
+### 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:
+
+```jsx
+Toast.add({ referenceId: 'custom-template', duration: 8000 });
+```
+
+### Removing a Toast (Optional)
+
+It’s preferable to let toasts close automatically or via user interaction.  
+If you need to close one programmatically:
+
+- 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' } }));
+```
+
+### 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).
+
+</details>

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/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/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,11 @@
+import { jsx as s } from "react/jsx-runtime";
+import "react";
+import { useHandleEvent as i } 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 });
+}
+export {
+  u as Button
+};

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

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

package/dist/components/DialogFooter/DialogFooter.js

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

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

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

package/dist/components/DialogHeader/DialogHeader.js

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

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

@@ -0,0 +1,7 @@
+import { DsDividerAttrs } from '@cupra/ui-kit/react/types/ds-divider';
+import { type ReactElement } from 'react';
+import '@cupra/ui-kit/react';
+export interface DividerProps extends DsDividerAttrs {
+    className?: string;
+}
+export declare function Divider({ className, ...rest }: DividerProps): ReactElement;

package/dist/components/Divider/Divider.js

@@ -0,0 +1,8 @@
+import { jsx as t } from "react/jsx-runtime";
+import "../../packages/ui-kit/dist-react/index.js";
+function d({ className: r, ...i }) {
+  return /* @__PURE__ */ t("ds-divider-react", { class: r, ...i });
+}
+export {
+  d as Divider
+};

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

@@ -0,0 +1,8 @@
+import { type ReactElement } from 'react';
+import '@cupra/ui-kit/react';
+import { DsHyperlinkAttrs } from '@cupra/ui-kit/react/types/ds-hyperlink';
+export type HyperlinkProps = DsHyperlinkAttrs & {
+    children: JSX.Element | JSX.Element[] | string;
+    onClick?: (event: CustomEvent) => void;
+};
+export declare function Hyperlink({ children, onClick, ...rest }: HyperlinkProps): ReactElement;

package/dist/components/Hyperlink/Hyperlink.js

@@ -0,0 +1,11 @@
+import { jsx as i } from "react/jsx-runtime";
+import "../../packages/ui-kit/dist-react/index.js";
+import "react";
+import { useHandleEvent as n } from "../../hooks/useHandleEvent.js";
+function l({ children: r, onClick: t, ...e }) {
+  const { ref: o } = n({ click: t });
+  return /* @__PURE__ */ i("ds-hyperlink-react", { ref: o, ...e, children: r });
+}
+export {
+  l as Hyperlink
+};

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

@@ -0,0 +1,7 @@
+import { DsIconAttrs } from '@cupra/ui-kit/react/types/ds-icon';
+import { type ReactElement } from 'react';
+import '@cupra/ui-kit/react';
+export interface IconProps extends DsIconAttrs {
+    className?: string;
+}
+export declare function Icon(props: IconProps): ReactElement;

package/dist/components/Icon/Icon.js

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

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

@@ -0,0 +1,9 @@
+import { type ReactElement } from 'react';
+import '@cupra/ui-kit/react';
+import { type DsIconButtonAttrs } from '@cupra/ui-kit/react/types/ds-icon-button';
+type IconButtonProps = DsIconButtonAttrs & {
+    className?: string;
+    onClick?: (event: CustomEvent) => void;
+};
+export declare function IconButton(props: IconButtonProps): ReactElement;
+export {};

package/dist/components/IconButton/IconButton.js

@@ -0,0 +1,11 @@
+import { jsx as s } from "react/jsx-runtime";
+import "../../packages/ui-kit/dist-react/index.js";
+import "react";
+import { useHandleEvent as e } 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 });
+}
+export {
+  l as IconButton
+};

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

@@ -0,0 +1,11 @@
+import { DsInputAttrs } from '@cupra/ui-kit/react/types/ds-input';
+import '@cupra/ui-kit/react';
+import { ChangeEvent, FormEvent, ForwardRefExoticComponent, KeyboardEvent, RefAttributes } from 'react';
+type InputProps = DsInputAttrs & {
+    className?: string;
+    onInput?: (event: FormEvent<HTMLInputElement>) => void;
+    onKeyDown?: (event: KeyboardEvent<HTMLInputElement>) => void;
+    onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
+};
+export declare const Input: ForwardRefExoticComponent<InputProps & RefAttributes<HTMLElement>>;
+export {};

package/dist/components/Input/Input.js

@@ -0,0 +1,14 @@
+import { jsx as m } from "react/jsx-runtime";
+import "../../packages/ui-kit/dist-react/index.js";
+import { useHandleEvent as s } from "../../hooks/useHandleEvent.js";
+import { forwardRef as i, useImperativeHandle as u } from "react";
+const c = i(
+  ({ className: e, onInput: t, onKeyDown: n, onChange: o, ...p }, a) => {
+    const { ref: r } = s({ input: t, keydown: n, change: o });
+    return u(a, () => r.current, []), /* @__PURE__ */ m("ds-input-react", { ref: r, class: e, ...p });
+  }
+);
+c.displayName = "Input";
+export {
+  c as Input
+};

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

@@ -0,0 +1,9 @@
+import { type ReactElement } from 'react';
+import '@cupra/ui-kit/react';
+import { DsLinkButtonAttrs } from '@cupra/ui-kit/react/types/ds-link-button';
+type LinkButtonProps = DsLinkButtonAttrs & {
+    children: JSX.Element | JSX.Element[] | string;
+    onClick?: (event: CustomEvent) => void;
+};
+export declare function LinkButton({ children, onClick, ...rest }: LinkButtonProps): ReactElement;
+export {};

package/dist/components/LinkButton/LinkButton.js

@@ -0,0 +1,11 @@
+import { jsx as i } from "react/jsx-runtime";
+import "../../packages/ui-kit/dist-react/index.js";
+import "react";
+import { useHandleEvent as e } from "../../hooks/useHandleEvent.js";
+function f({ children: t, onClick: o, ...r }) {
+  const { ref: n } = e({ click: o });
+  return /* @__PURE__ */ i("ds-link-button-react", { ref: n, ...r, children: t });
+}
+export {
+  f as LinkButton
+};