@cupra/ui-react 2.0.0-canary.186 → 2.0.0-canary.188

package/dist/esm/components/List/List.js

@@ -1,15 +1,6 @@
-import "react";
-import { VERSION_TAG_SUFFIX as e } from "@cupra/ui-kit/react/utils/version";
-import { jsx as t } from "react/jsx-runtime";
+import { createDsComponent as e } from "../../core/createDsComponent.js";
 import "@cupra/ui-kit/react/ds-list";
 //#region src/components/List/List.tsx
-var n = `ds-list${e}`;
-function r({ className: e, children: r, ...i }) {
-	return /* @__PURE__ */ t(n, {
-		class: e,
-		...i,
-		children: r
-	});
-}
+var t = e("ds-list");
 //#endregion
-export { r as List };
+export { t as List };

package/dist/esm/components/Logo/Logo.js

@@ -1,15 +1,6 @@
-import "react";
-import { VERSION_TAG_SUFFIX as e } from "@cupra/ui-kit/react/utils/version";
-import { jsx as t } from "react/jsx-runtime";
+import { createDsComponent as e } from "../../core/createDsComponent.js";
 import "@cupra/ui-kit/react/ds-logo";
 //#region src/components/Logo/Logo.tsx
-var n = `ds-logo${e}`;
-function r(e) {
-	let { className: r, children: i, ...a } = e;
-	return /* @__PURE__ */ t(n, {
-		class: r,
-		...a
-	});
-}
+var t = e("ds-logo");
 //#endregion
-export { r as Logo };
+export { t as Logo };

package/dist/esm/components/MapPin/MapPin.js

@@ -1,16 +1,6 @@
-import { useHandleEvent as e } from "../../hooks/useHandleEvent.js";
-import "react";
-import { VERSION_TAG_SUFFIX as t } from "@cupra/ui-kit/react/utils/version";
-import { jsx as n } from "react/jsx-runtime";
+import { createDsComponent as e } from "../../core/createDsComponent.js";
 import "@cupra/ui-kit/react/ds-map-pin";
 //#region src/components/MapPin/MapPin.tsx
-var r = `ds-map-pin${t}`;
-function i({ onChange: t, ...i }) {
-	let { ref: a } = e({ change: t });
-	return /* @__PURE__ */ n(r, {
-		ref: a,
-		...i
-	});
-}
+var t = e("ds-map-pin", { events: ["change"] });
 //#endregion
-export { i as MapPin };
+export { t as MapPin };

package/dist/esm/components/NavigationControls/NavigationControls.js

@@ -1,16 +1,6 @@
-import "react";
-import { VERSION_TAG_SUFFIX as e } from "@cupra/ui-kit/react/utils/version";
-import { jsx as t } from "react/jsx-runtime";
+import { createDsComponent as e } from "../../core/createDsComponent.js";
 import "@cupra/ui-kit/react/ds-navigation-controls";
 //#region src/components/NavigationControls/NavigationControls.tsx
-var n = `ds-navigation-controls${e}`;
-function r(e) {
-	let { className: r, children: i, ...a } = e;
-	return /* @__PURE__ */ t(n, {
-		class: r,
-		...a,
-		children: i
-	});
-}
+var t = e("ds-navigation-controls");
 //#endregion
-export { r as NavigationControls };
+export { t as NavigationControls };

package/dist/esm/components/ProgressBar/ProgressBar.js

@@ -1,15 +1,6 @@
-import "react";
-import { VERSION_TAG_SUFFIX as e } from "@cupra/ui-kit/react/utils/version";
-import { jsx as t } from "react/jsx-runtime";
+import { createDsComponent as e } from "../../core/createDsComponent.js";
 import "@cupra/ui-kit/react/ds-progress-bar";
 //#region src/components/ProgressBar/ProgressBar.tsx
-var n = `ds-progress-bar${e}`;
-function r(e) {
-	let { className: r, ...i } = e;
-	return /* @__PURE__ */ t(n, {
-		class: r,
-		...i
-	});
-}
+var t = e("ds-progress-bar");
 //#endregion
-export { r as ProgressBar };
+export { t as ProgressBar };

package/dist/esm/components/RadioButton/RadioButton.js

@@ -1,18 +1,6 @@
-import { useHandleEvent as e } from "../../hooks/useHandleEvent.js";
-import "react";
-import { VERSION_TAG_SUFFIX as t } from "@cupra/ui-kit/react/utils/version";
-import { jsx as n } from "react/jsx-runtime";
+import { createDsComponent as e } from "../../core/createDsComponent.js";
 import "@cupra/ui-kit/react/ds-radio-button";
 //#region src/components/RadioButton/RadioButton.tsx
-var r = `ds-radio-button${t}`;
-function i(t) {
-	let { className: i, children: a, onChange: o, ...s } = t, { ref: c } = e({ change: o });
-	return /* @__PURE__ */ n(r, {
-		ref: c,
-		class: i,
-		...s,
-		children: a
-	});
-}
+var t = e("ds-radio-button", { events: ["change"] });
 //#endregion
-export { i as RadioButton };
+export { t as RadioButton };

package/dist/esm/components/Rating/Rating.js

@@ -1,15 +1,6 @@
-import "react";
-import { VERSION_TAG_SUFFIX as e } from "@cupra/ui-kit/react/utils/version";
-import { jsx as t } from "react/jsx-runtime";
+import { createDsComponent as e } from "../../core/createDsComponent.js";
 import "@cupra/ui-kit/react/ds-rating";
 //#region src/components/Rating/Rating.tsx
-var n = `ds-rating${e}`;
-function r(e) {
-	let { className: r, ...i } = e;
-	return /* @__PURE__ */ t(n, {
-		class: r,
-		...i
-	});
-}
+var t = e("ds-rating");
 //#endregion
-export { r as Rating };
+export { t as Rating };

package/dist/esm/components/Selection/Selection.js

@@ -1,15 +1,6 @@
-import "react";
-import { VERSION_TAG_SUFFIX as e } from "@cupra/ui-kit/react/utils/version";
-import { jsx as t } from "react/jsx-runtime";
+import { createDsComponent as e } from "../../core/createDsComponent.js";
 import "@cupra/ui-kit/react/ds-selection";
 //#region src/components/Selection/Selection.tsx
-var n = `ds-selection${e}`;
-function r(e) {
-	let { className: r, children: i, ...a } = e;
-	return /* @__PURE__ */ t(n, {
-		class: r,
-		...a
-	});
-}
+var t = e("ds-selection");
 //#endregion
-export { r as Selection };
+export { t as Selection };

package/dist/esm/components/Skeleton/Skeleton.js

@@ -1,14 +1,6 @@
-import "react";
-import { VERSION_TAG_SUFFIX as e } from "@cupra/ui-kit/react/utils/version";
-import { jsx as t } from "react/jsx-runtime";
+import { createDsComponent as e } from "../../core/createDsComponent.js";
 import "@cupra/ui-kit/react/ds-skeleton";
 //#region src/components/Skeleton/Skeleton.tsx
-var n = `ds-skeleton${e}`;
-function r({ className: e, ...r }) {
-	return /* @__PURE__ */ t(n, {
-		class: e,
-		...r
-	});
-}
+var t = e("ds-skeleton");
 //#endregion
-export { r as Skeleton };
+export { t as Skeleton };

package/dist/esm/components/Stepper/Stepper.js

@@ -1,11 +1,6 @@
-import "react";
-import { VERSION_TAG_SUFFIX as e } from "@cupra/ui-kit/react/utils/version";
-import { jsx as t } from "react/jsx-runtime";
+import { createDsComponent as e } from "../../core/createDsComponent.js";
 import "@cupra/ui-kit/react/ds-stepper";
 //#region src/components/Stepper/Stepper.tsx
-var n = `ds-stepper${e}`, r = ({ className: e, ...r }) => /* @__PURE__ */ t(n, {
-	class: e,
-	...r
-});
+var t = e("ds-stepper");
 //#endregion
-export { r as Stepper };
+export { t as Stepper };

package/dist/esm/components/Table/Table.js

@@ -1,16 +1,6 @@
-import "react";
-import { VERSION_TAG_SUFFIX as e } from "@cupra/ui-kit/react/utils/version";
-import { jsx as t } from "react/jsx-runtime";
+import { createDsComponent as e } from "../../core/createDsComponent.js";
 import "@cupra/ui-kit/react/ds-table";
 //#region src/components/Table/Table.tsx
-var n = `ds-table${e}`;
-function r(e) {
-	let { children: r, className: i, ...a } = e;
-	return /* @__PURE__ */ t(n, {
-		class: i,
-		...a,
-		children: r
-	});
-}
+var t = e("ds-table");
 //#endregion
-export { r as Table };
+export { t as Table };

package/dist/esm/components/TableCell/TableCell.js

@@ -1,16 +1,6 @@
-import "react";
-import { VERSION_TAG_SUFFIX as e } from "@cupra/ui-kit/react/utils/version";
-import { jsx as t } from "react/jsx-runtime";
+import { createDsComponent as e } from "../../core/createDsComponent.js";
 import "@cupra/ui-kit/react/ds-table-cell";
 //#region src/components/TableCell/TableCell.tsx
-var n = `ds-table-cell${e}`;
-function r(e) {
-	let { children: r, className: i, ...a } = e;
-	return /* @__PURE__ */ t(n, {
-		class: i,
-		...a,
-		children: r
-	});
-}
+var t = e("ds-table-cell");
 //#endregion
-export { r as TableCell };
+export { t as TableCell };

package/dist/esm/components/TableRow/TableRow.js

@@ -1,16 +1,6 @@
-import "react";
-import { VERSION_TAG_SUFFIX as e } from "@cupra/ui-kit/react/utils/version";
-import { jsx as t } from "react/jsx-runtime";
+import { createDsComponent as e } from "../../core/createDsComponent.js";
 import "@cupra/ui-kit/react/ds-table-row";
 //#region src/components/TableRow/TableRow.tsx
-var n = `ds-table-row${e}`;
-function r(e) {
-	let { children: r, className: i, ...a } = e;
-	return /* @__PURE__ */ t(n, {
-		class: i,
-		...a,
-		children: r
-	});
-}
+var t = e("ds-table-row");
 //#endregion
-export { r as TableRow };
+export { t as TableRow };

package/dist/esm/components/Text/Text.js

@@ -1,16 +1,6 @@
-import "react";
-import { VERSION_TAG_SUFFIX as e } from "@cupra/ui-kit/react/utils/version";
-import { jsx as t } from "react/jsx-runtime";
+import { createDsComponent as e } from "../../core/createDsComponent.js";
 import "@cupra/ui-kit/react/ds-text";
 //#region src/components/Text/Text.tsx
-var n = `ds-text${e}`;
-function r(e) {
-	let { className: r, children: i, ...a } = e;
-	return /* @__PURE__ */ t(n, {
-		class: r,
-		...a,
-		children: i
-	});
-}
+var t = e("ds-text");
 //#endregion
-export { r as Text };
+export { t as Text };

package/dist/esm/components/ThemeProvider/ThemeProvider.js

@@ -1,11 +1,6 @@
-import "react";
-import { VERSION_TAG_SUFFIX as e } from "@cupra/ui-kit/react/utils/version";
-import { jsx as t } from "react/jsx-runtime";
+import { createDsComponent as e } from "../../core/createDsComponent.js";
 import "@cupra/ui-kit/react/ds-theme-provider";
 //#region src/components/ThemeProvider/ThemeProvider.tsx
-var n = `ds-theme-provider${e}`, r = ({ children: e, ...r }) => /* @__PURE__ */ t(n, {
-	...r,
-	children: e
-});
+var t = e("ds-theme-provider");
 //#endregion
-export { r as ThemeProvider };
+export { t as ThemeProvider };

package/dist/esm/components/ThemeSwitch/ThemeSwitch.js

@@ -1,16 +1,6 @@
-import "react";
-import { VERSION_TAG_SUFFIX as e } from "@cupra/ui-kit/react/utils/version";
-import { jsx as t } from "react/jsx-runtime";
+import { createDsComponent as e } from "../../core/createDsComponent.js";
 import "@cupra/ui-kit/react/ds-theme-switch";
 //#region src/components/ThemeSwitch/ThemeSwitch.tsx
-var n = `ds-theme-switch${e}`;
-function r(e) {
-	let { children: r, className: i, ...a } = e;
-	return /* @__PURE__ */ t(n, {
-		class: i,
-		...a,
-		children: r
-	});
-}
+var t = e("ds-theme-switch");
 //#endregion
-export { r as ThemeSwitch };
+export { t as ThemeSwitch };

package/dist/esm/components/ToggleButton/ToggleButton.js

@@ -1,16 +1,6 @@
-import { useHandleEvent as e } from "../../hooks/useHandleEvent.js";
-import "react";
-import { VERSION_TAG_SUFFIX as t } from "@cupra/ui-kit/react/utils/version";
-import { jsx as n } from "react/jsx-runtime";
+import { createDsComponent as e } from "../../core/createDsComponent.js";
 import "@cupra/ui-kit/react/ds-toggle-button";
 //#region src/components/ToggleButton/ToggleButton.tsx
-var r = `ds-toggle-button${t}`;
-function i({ onChange: t, ...i }) {
-	let { ref: a } = e({ change: t });
-	return /* @__PURE__ */ n(r, {
-		ref: a,
-		...i
-	});
-}
+var t = e("ds-toggle-button", { events: ["change"] });
 //#endregion
-export { i as ToggleButton };
+export { t as ToggleButton };

package/dist/esm/core/createDsComponent.js

@@ -0,0 +1,35 @@
+import { useHandleEvent as e } from "../hooks/useHandleEvent.js";
+import { forwardRef as t, useCallback as n } from "react";
+import { VERSION_TAG_SUFFIX as r } from "@cupra/ui-kit/react/utils/version";
+import { jsx as i } from "react/jsx-runtime";
+//#region src/core/createDsComponent.tsx
+function a(a, o) {
+	let s = o?.events ?? [];
+	return t((t, c) => {
+		let { className: l, children: u, ...d } = t, f = {};
+		for (let e of s) {
+			let t = `on${e.charAt(0).toUpperCase()}${e.slice(1)}`, n = d[t];
+			delete d[t], n && (f[e] = n);
+		}
+		let { ref: p } = e(f), m = n((e) => {
+			p.current = e, typeof c == "function" ? c(e) : c && (c.current = e);
+		}, [c, p]);
+		if (o?.render) {
+			let e = {
+				Tag: `${a}${r}`,
+				props: d,
+				ref: m,
+				children: u
+			};
+			return o.render(e);
+		}
+		return /* @__PURE__ */ i(`${a}${r}`, {
+			ref: m,
+			class: l,
+			...d,
+			children: u
+		});
+	});
+}
+//#endregion
+export { a as createDsComponent };

package/dist/esm/index.js

@@ -1,6 +1,6 @@
 import { Accordion as e } from "./components/Accordion/Accordion.js";
-import { Badge as t } from "./components/Badge/Badge.js";
-import { useHandleEvent as n } from "./hooks/useHandleEvent.js";
+import { useHandleEvent as t } from "./hooks/useHandleEvent.js";
+import { Badge as n } from "./components/Badge/Badge.js";
 import { BasicCard as r } from "./components/BasicCard/BasicCard.js";
 import { BasicCardImage as i } from "./components/BasicCardImage/BasicCardImage.js";
 import { BasicCardHeader as a } from "./components/BasicCardHeader/BasicCardHeader.js";
@@ -80,4 +80,4 @@ import { InteractiveCard as Te } from "./components/InteractiveCard/InteractiveC
 import { SidebarNavigation as Ee } from "./components/SidebarNavigation/SidebarNavigation.js";
 import { IconButtonGroup as De } from "./components/IconButtonGroup/IconButtonGroup.js";
 import { NavigationControls as Oe } from "./components/NavigationControls/NavigationControls.js";
-export { e as Accordion, Se as Avatar, t as Badge, r as BasicCard, a as BasicCardHeader, i as BasicCardImage, o as BasicCardSection, s as Breadcrumbs, c as BreadcrumbsItem, l as Bullets, p as Button, m as Calendar, h as CarouselIndicator, g as Checkbox, _ as CheckboxGroup, v as Chip, y as Chips, b as Currency, x as DatePicker, S as Dialog, C as DialogBody, w as DialogFooter, T as DialogFullscreen, E as DialogHeader, D as Divider, O as Drawer, k as FavouriteAction, A as Hyperlink, j as Icon, M as IconButton, De as IconButtonGroup, xe as InlineAlert, N as Input, Te as InteractiveCard, I as LinkButton, P as List, F as ListItem, L as Loader, R as LoaderLogo, z as Logo, B as MainTitle, V as MapPin, H as MediaControl, U as Modal, Oe as NavigationControls, W as PasswordInput, G as PickerItem, K as ProgressBar, q as Radio, J as RadioButton, Y as RadioButtonGroup, X as Rating, Z as Search, Q as SearchInput, $ as SecondaryNavigation, ee as SegmentedControl, te as Select, ne as Selection, Ee as SidebarNavigation, re as Skeleton, ie as Slider, Ce as StaticBox, we as Stepper, ae as Table, oe as TableCell, se as TableRow, ce as Tabs, le as Tag, ue as Text, de as TextInput, fe as Textarea, pe as ThemeProvider, me as ThemeSwitch, ye as Toast, be as ToastMessage, he as ToggleButton, ge as ToggleSwitch, _e as Tooltip, ve as ValueUnit, u as useBreakpoint, d as useEventListeners, n as useHandleEvent, f as useResizeObserver };
+export { e as Accordion, Se as Avatar, n as Badge, r as BasicCard, a as BasicCardHeader, i as BasicCardImage, o as BasicCardSection, s as Breadcrumbs, c as BreadcrumbsItem, l as Bullets, p as Button, m as Calendar, h as CarouselIndicator, g as Checkbox, _ as CheckboxGroup, v as Chip, y as Chips, b as Currency, x as DatePicker, S as Dialog, C as DialogBody, w as DialogFooter, T as DialogFullscreen, E as DialogHeader, D as Divider, O as Drawer, k as FavouriteAction, A as Hyperlink, j as Icon, M as IconButton, De as IconButtonGroup, xe as InlineAlert, N as Input, Te as InteractiveCard, I as LinkButton, P as List, F as ListItem, L as Loader, R as LoaderLogo, z as Logo, B as MainTitle, V as MapPin, H as MediaControl, U as Modal, Oe as NavigationControls, W as PasswordInput, G as PickerItem, K as ProgressBar, q as Radio, J as RadioButton, Y as RadioButtonGroup, X as Rating, Z as Search, Q as SearchInput, $ as SecondaryNavigation, ee as SegmentedControl, te as Select, ne as Selection, Ee as SidebarNavigation, re as Skeleton, ie as Slider, Ce as StaticBox, we as Stepper, ae as Table, oe as TableCell, se as TableRow, ce as Tabs, le as Tag, ue as Text, de as TextInput, fe as Textarea, pe as ThemeProvider, me as ThemeSwitch, ye as Toast, be as ToastMessage, he as ToggleButton, ge as ToggleSwitch, _e as Tooltip, ve as ValueUnit, u as useBreakpoint, d as useEventListeners, t as useHandleEvent, f as useResizeObserver };

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

@@ -1,7 +1,9 @@
 import type { DsBadgeAttrs } from '@cupra/ui-kit/react/types/ds-badge';
-import { type ReactElement } from 'react';
 import '@cupra/ui-kit/react/ds-badge';
-export interface BadgeProps extends DsBadgeAttrs {
+import type { DsComponentProps } from '@core/types';
+export type BadgeProps = DsComponentProps<DsBadgeAttrs>;
+export declare const Badge: import("react").ForwardRefExoticComponent<DsBadgeAttrs & {
     className?: string;
-}
-export declare function Badge({ className, ...rest }: BadgeProps): ReactElement;
+    ref?: React.Ref<HTMLElement>;
+    children?: import("react").ReactNode;
+} & {} & import("react").RefAttributes<HTMLElement>>;

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

@@ -1,8 +1,5 @@
 import type { DsBasicCardImageAttrs } from '@cupra/ui-kit/react/types/ds-basic-card-image';
-import { type ReactElement, type ReactNode } from 'react';
 import '@cupra/ui-kit/react/ds-basic-card-image';
-export interface BasicCardImageProps extends DsBasicCardImageAttrs {
-    className?: string;
-    children: ReactNode;
-}
-export declare function BasicCardImage(props: BasicCardImageProps): ReactElement;
+import type { DsComponent, DsComponentProps } from '@core/types';
+export type BasicCardImageProps = DsComponentProps<DsBasicCardImageAttrs>;
+export declare const BasicCardImage: DsComponent<DsBasicCardImageAttrs>;

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

@@ -1,8 +1,5 @@
 import type { DsBasicCardSectionAttrs } from '@cupra/ui-kit/react/types/ds-basic-card-section';
-import { type ReactElement, type ReactNode } from 'react';
 import '@cupra/ui-kit/react/ds-basic-card-section';
-export interface BasicCardSectionProps extends DsBasicCardSectionAttrs {
-    className?: string;
-    children: ReactNode;
-}
-export declare function BasicCardSection(props: BasicCardSectionProps): ReactElement;
+import type { DsComponent, DsComponentProps } from '@core/types';
+export type BasicCardSectionProps = DsComponentProps<DsBasicCardSectionAttrs>;
+export declare const BasicCardSection: DsComponent<DsBasicCardSectionAttrs>;

package/dist/types/components/Breadcrumbs/Breadcrumbs.d.ts

@@ -1,8 +1,5 @@
-import { type ReactElement, type ReactNode } from 'react';
-import '@cupra/ui-kit/react/ds-breadcrumbs';
 import type { DsBreadcrumbsAttrs } from '@cupra/ui-kit/react/types/ds-breadcrumbs';
-export type BreadcrumbsProps = DsBreadcrumbsAttrs & {
-    className?: string;
-    children: ReactNode;
-};
-export declare const Breadcrumbs: (props: BreadcrumbsProps) => ReactElement;
+import '@cupra/ui-kit/react/ds-breadcrumbs';
+import type { DsComponent, DsComponentProps } from '@core/types';
+export type BreadcrumbsProps = DsComponentProps<DsBreadcrumbsAttrs>;
+export declare const Breadcrumbs: DsComponent<DsBreadcrumbsAttrs>;

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

@@ -1,7 +1,9 @@
-import { DsBulletsAttrs } from '@cupra/ui-kit/react/types/ds-bullets';
-import { type ReactElement } from 'react';
+import type { DsBulletsAttrs } from '@cupra/ui-kit/react/types/ds-bullets';
 import '@cupra/ui-kit/react/ds-bullets';
-export interface BulletsProps extends DsBulletsAttrs {
+import type { DsComponentProps } from '@core/types';
+export type BulletsProps = DsComponentProps<DsBulletsAttrs>;
+export declare const Bullets: import("react").ForwardRefExoticComponent<DsBulletsAttrs & {
     className?: string;
-}
-export declare const Bullets: ({ className, ...rest }: BulletsProps) => ReactElement;
+    ref?: React.Ref<HTMLElement>;
+    children?: import("react").ReactNode;
+} & {} & import("react").RefAttributes<HTMLElement>>;

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

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

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

@@ -1,9 +1,15 @@
-import { type ReactElement, type ReactNode } from 'react';
+import type { DsCheckboxAttrs } from '@cupra/ui-kit/react/types/ds-checkbox';
 import '@cupra/ui-kit/react/ds-checkbox';
-import { DsCheckboxAttrs } from '@cupra/ui-kit/react/types/ds-checkbox';
-interface CheckboxProps extends DsCheckboxAttrs {
-    onChange?: (event: CustomEvent) => void;
-    children: ReactNode;
-}
-export declare function Checkbox({ onChange, children, ...rest }: CheckboxProps): ReactElement;
-export {};
+import type { DsComponentProps } from '@core/types';
+export type CheckboxProps = DsComponentProps<DsCheckboxAttrs, {
+    change: CustomEvent;
+}> & {
+    children: React.ReactNode;
+};
+export declare const Checkbox: import("react").ForwardRefExoticComponent<DsCheckboxAttrs & {
+    className?: string;
+    ref?: React.Ref<HTMLElement>;
+    children?: import("react").ReactNode;
+} & {
+    onChange?: (event: CustomEvent<any>) => void;
+} & import("react").RefAttributes<HTMLElement>>;

package/dist/types/components/CheckboxGroup/CheckboxGroup.d.ts

@@ -1,16 +1,9 @@
 import type { DsCheckboxGroupAttrs } from '@cupra/ui-kit/react/types/ds-checkbox-group';
-import { type ReactElement, type ReactNode } from 'react';
 import '@cupra/ui-kit/react/ds-checkbox-group';
-export type CheckboxGroupProps = DsCheckboxGroupAttrs & {
-    onChange?: (event: CustomEvent) => void;
-    className?: string;
-    children?: ReactNode;
-};
-/**
- * CheckboxGroup
- * Wraps the ds-checkbox-group web component. Slots:
- * - slot="title" for the group title
- * - slot="description" for the group description
- * Children: one or more <Checkbox> (or ds-checkbox) elements.
- */
-export declare function CheckboxGroup(props: CheckboxGroupProps): ReactElement;
+import type { DsComponent, DsComponentProps } from '@core/types';
+export type CheckboxGroupProps = DsComponentProps<DsCheckboxGroupAttrs, {
+    change: CustomEvent;
+}>;
+export declare const CheckboxGroup: DsComponent<DsCheckboxGroupAttrs, {
+    change: CustomEvent;
+}>;

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

@@ -1,9 +1,5 @@
-import { DsChipAttrs } from '@cupra/ui-kit/react/types/ds-chip';
-import { type ReactElement, type ReactNode } from 'react';
+import type { DsChipAttrs } from '@cupra/ui-kit/react/types/ds-chip';
 import '@cupra/ui-kit/react/ds-chip';
-type ChipProps = DsChipAttrs & {
-    className?: string;
-    children: ReactNode;
-};
-export declare function Chip(props: ChipProps): ReactElement;
-export {};
+import type { DsComponent, DsComponentProps } from '@core/types';
+export type ChipProps = DsComponentProps<DsChipAttrs>;
+export declare const Chip: DsComponent<DsChipAttrs>;

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

@@ -1,9 +1,9 @@
-import { type ReactElement, type ReactNode } from 'react';
+import type { DsCurrencyAttrs } from '@cupra/ui-kit/react/types/ds-currency';
 import '@cupra/ui-kit/react/ds-currency';
-import { DsCurrencyAttrs } from '@cupra/ui-kit/react/types/ds-currency';
-type CurrencyProps = {
+import type { DsComponentProps } from '@core/types';
+export type CurrencyProps = DsComponentProps<DsCurrencyAttrs>;
+export declare const Currency: import("react").ForwardRefExoticComponent<(DsCurrencyAttrs & {
     className?: string;
-    children?: ReactNode;
-} & DsCurrencyAttrs;
-export declare function Currency(props: CurrencyProps): ReactElement;
-export {};
+    ref?: React.Ref<HTMLElement>;
+    children?: import("react").ReactNode;
+}) & {} & import("react").RefAttributes<HTMLElement>>;

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

@@ -1,9 +1,5 @@
-import { DsDialogBodyAttrs } from '@cupra/ui-kit/react/types/ds-dialog-body';
-import { type ReactElement, type ReactNode } from 'react';
+import type { DsDialogBodyAttrs } from '@cupra/ui-kit/react/types/ds-dialog-body';
 import '@cupra/ui-kit/react/ds-dialog-body';
-type DialogBodyProps = DsDialogBodyAttrs & {
-    className?: string;
-    children?: ReactNode;
-};
-export declare function DialogBody(props: DialogBodyProps): ReactElement;
-export {};
+import type { DsComponent, DsComponentProps } from '@core/types';
+export type DialogBodyProps = DsComponentProps<DsDialogBodyAttrs>;
+export declare const DialogBody: DsComponent<DsDialogBodyAttrs>;

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

@@ -1,9 +1,5 @@
-import { DsDialogFooterAttrs } from '@cupra/ui-kit/react/types/ds-dialog-footer';
-import { type ReactElement, type ReactNode } from 'react';
+import type { DsDialogFooterAttrs } from '@cupra/ui-kit/react/types/ds-dialog-footer';
 import '@cupra/ui-kit/react/ds-dialog-footer';
-type DialogFooterProps = DsDialogFooterAttrs & {
-    className?: string;
-    children?: ReactNode;
-};
-export declare function DialogFooter(props: DialogFooterProps): ReactElement;
-export {};
+import type { DsComponent, DsComponentProps } from '@core/types';
+export type DialogFooterProps = DsComponentProps<DsDialogFooterAttrs>;
+export declare const DialogFooter: DsComponent<DsDialogFooterAttrs>;

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

@@ -1,9 +1,5 @@
-import { DsDialogHeaderAttrs } from '@cupra/ui-kit/react/types/ds-dialog-header';
-import { type ReactElement, type ReactNode } from 'react';
+import type { DsDialogHeaderAttrs } from '@cupra/ui-kit/react/types/ds-dialog-header';
 import '@cupra/ui-kit/react/ds-dialog-header';
-type DialogHeaderProps = DsDialogHeaderAttrs & {
-    className?: string;
-    children?: ReactNode;
-};
-export declare function DialogHeader(props: DialogHeaderProps): ReactElement;
-export {};
+import type { DsComponent, DsComponentProps } from '@core/types';
+export type DialogHeaderProps = DsComponentProps<DsDialogHeaderAttrs>;
+export declare const DialogHeader: DsComponent<DsDialogHeaderAttrs>;

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

@@ -1,7 +1,9 @@
-import { DsDividerAttrs } from '@cupra/ui-kit/react/types/ds-divider';
-import { type ReactElement } from 'react';
+import type { DsDividerAttrs } from '@cupra/ui-kit/react/types/ds-divider';
 import '@cupra/ui-kit/react/ds-divider';
-export interface DividerProps extends DsDividerAttrs {
+import type { DsComponentProps } from '@core/types';
+export type DividerProps = DsComponentProps<DsDividerAttrs>;
+export declare const Divider: import("react").ForwardRefExoticComponent<DsDividerAttrs & {
     className?: string;
-}
-export declare function Divider({ className, ...rest }: DividerProps): ReactElement;
+    ref?: React.Ref<HTMLElement>;
+    children?: import("react").ReactNode;
+} & {} & import("react").RefAttributes<HTMLElement>>;