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

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

@@ -1,8 +1,13 @@
-import { type ReactElement, type ReactNode } from 'react';
+import type { DsHyperlinkAttrs } from '@cupra/ui-kit/react/types/ds-hyperlink';
 import '@cupra/ui-kit/react/ds-hyperlink';
-import { DsHyperlinkAttrs } from '@cupra/ui-kit/react/types/ds-hyperlink';
-export type HyperlinkProps = DsHyperlinkAttrs & {
-    children: ReactNode;
-    onClick?: (event: CustomEvent) => void;
-};
-export declare function Hyperlink({ children, onClick, ...rest }: HyperlinkProps): ReactElement;
+import type { DsComponentProps } from '@core/types';
+export type HyperlinkProps = DsComponentProps<DsHyperlinkAttrs, {
+    click: CustomEvent;
+}>;
+export declare const Hyperlink: import("react").ForwardRefExoticComponent<(DsHyperlinkAttrs & {
+    className?: string;
+    ref?: React.Ref<HTMLElement>;
+    children?: import("react").ReactNode;
+}) & {
+    onClick?: (event: CustomEvent<any>) => void;
+} & import("react").RefAttributes<HTMLElement>>;

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

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

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

@@ -1,9 +1,13 @@
-import { type ReactElement, type ReactNode } from 'react';
+import type { DsLinkButtonAttrs } from '@cupra/ui-kit/react/types/ds-link-button';
 import '@cupra/ui-kit/react/ds-link-button';
-import { DsLinkButtonAttrs } from '@cupra/ui-kit/react/types/ds-link-button';
-type LinkButtonProps = DsLinkButtonAttrs & {
-    children: ReactNode;
-    onClick?: (event: CustomEvent) => void;
-};
-export declare function LinkButton({ children, onClick, ...rest }: LinkButtonProps): ReactElement;
-export {};
+import type { DsComponentProps } from '@core/types';
+export type LinkButtonProps = DsComponentProps<DsLinkButtonAttrs, {
+    click: CustomEvent;
+}>;
+export declare const LinkButton: import("react").ForwardRefExoticComponent<(DsLinkButtonAttrs & {
+    className?: string;
+    ref?: React.Ref<HTMLElement>;
+    children?: import("react").ReactNode;
+}) & {
+    onClick?: (event: CustomEvent<any>) => void;
+} & import("react").RefAttributes<HTMLElement>>;

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

@@ -1,9 +1,9 @@
 import type { DsListAttrs } from '@cupra/ui-kit/react/types/ds-list';
-import { ReactNode, type ReactElement } from 'react';
 import '@cupra/ui-kit/react/ds-list';
-export interface ListProps extends Partial<DsListAttrs> {
+import type { DsComponentProps } from '@core/types';
+export type ListProps = DsComponentProps<DsListAttrs>;
+export declare const List: import("react").ForwardRefExoticComponent<DsListAttrs & {
     className?: string;
-    children?: ReactNode;
-    size?: 'medium' | 'large';
-}
-export declare function List({ className, children, ...rest }: ListProps): ReactElement;
+    ref?: React.Ref<HTMLElement>;
+    children?: import("react").ReactNode;
+} & {} & import("react").RefAttributes<HTMLElement>>;

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

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

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

@@ -1,8 +1,13 @@
-import { type ReactElement } from 'react';
+import type { DsMapPinAttrs } from '@cupra/ui-kit/react/types/ds-map-pin';
 import '@cupra/ui-kit/react/ds-map-pin';
-import { type DsMapPinAttrs } from '@cupra/ui-kit/react/types/ds-map-pin';
-type MapPinProps = DsMapPinAttrs & {
-    onChange?: (event: CustomEvent) => void;
-};
-export declare function MapPin({ onChange, ...rest }: MapPinProps): ReactElement;
-export {};
+import type { DsComponentProps } from '@core/types';
+export type MapPinProps = DsComponentProps<DsMapPinAttrs, {
+    change: CustomEvent;
+}>;
+export declare const MapPin: import("react").ForwardRefExoticComponent<DsMapPinAttrs & {
+    className?: string;
+    ref?: React.Ref<HTMLElement>;
+    children?: import("react").ReactNode;
+} & {
+    onChange?: (event: CustomEvent<any>) => void;
+} & import("react").RefAttributes<HTMLElement>>;

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

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

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

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

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

@@ -1,10 +1,9 @@
 import type { DsRadioButtonAttrs } from '@cupra/ui-kit/react/types/ds-radio-button';
-import { type ReactElement, type ReactNode } from 'react';
 import '@cupra/ui-kit/react/ds-radio-button';
-type RadioButtonProps = DsRadioButtonAttrs & {
-    onChange?: (event: CustomEvent) => void;
-    className?: string;
-    children: ReactNode;
-};
-export declare function RadioButton(props: RadioButtonProps): ReactElement;
-export {};
+import type { DsComponent, DsComponentProps } from '@core/types';
+export type RadioButtonProps = DsComponentProps<DsRadioButtonAttrs, {
+    change: CustomEvent;
+}>;
+export declare const RadioButton: DsComponent<DsRadioButtonAttrs, {
+    change: CustomEvent;
+}>;

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

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

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

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

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

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

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

@@ -1,8 +1,5 @@
-import { type ReactElement } from 'react';
-import '@cupra/ui-kit/react/ds-stepper';
 import type { DsStepperAttrs } from '@cupra/ui-kit/react/types/ds-stepper';
-type StepperProps = DsStepperAttrs & {
-    className?: string;
-};
-export declare const Stepper: ({ className, ...restProps }: StepperProps) => ReactElement;
-export {};
+import '@cupra/ui-kit/react/ds-stepper';
+import type { DsComponent, DsComponentProps } from '@core/types';
+export type StepperProps = DsComponentProps<DsStepperAttrs>;
+export declare const Stepper: DsComponent<DsStepperAttrs>;

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

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

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

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

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

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

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

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

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

@@ -1,8 +1,9 @@
-import { type ReactElement, type ReactNode } from 'react';
+import type { DsThemeProviderAttrs } from '@cupra/ui-kit/react/types/ds-theme-provider';
 import '@cupra/ui-kit/react/ds-theme-provider';
-import { DsThemeProviderAttrs } from '@cupra/ui-kit/react/types/ds-theme-provider';
-type ThemeProviderProps = DsThemeProviderAttrs & {
-    children: ReactNode;
-};
-export declare const ThemeProvider: ({ children, ...restProps }: ThemeProviderProps) => ReactElement;
-export {};
+import type { DsComponentProps } from '@core/types';
+export type ThemeProviderProps = DsComponentProps<DsThemeProviderAttrs>;
+export declare const ThemeProvider: import("react").ForwardRefExoticComponent<DsThemeProviderAttrs & {
+    className?: string;
+    ref?: React.Ref<HTMLElement>;
+    children?: import("react").ReactNode;
+} & {} & import("react").RefAttributes<HTMLElement>>;

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

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

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

@@ -1,8 +1,13 @@
-import { type ReactElement } from 'react';
+import type { DsToggleButtonAttrs } from '@cupra/ui-kit/react/types/ds-toggle-button';
 import '@cupra/ui-kit/react/ds-toggle-button';
-import { type DsToggleButtonAttrs } from '@cupra/ui-kit/react/types/ds-toggle-button';
-type ToggleButtonProps = DsToggleButtonAttrs & {
-    onChange?: (event: CustomEvent) => void;
-};
-export declare function ToggleButton({ onChange, ...rest }: ToggleButtonProps): ReactElement;
-export {};
+import type { DsComponentProps } from '@core/types';
+export type ToggleButtonProps = DsComponentProps<DsToggleButtonAttrs, {
+    change: CustomEvent;
+}>;
+export declare const ToggleButton: import("react").ForwardRefExoticComponent<DsToggleButtonAttrs & {
+    className?: string;
+    ref?: React.Ref<HTMLElement>;
+    children?: import("react").ReactNode;
+} & {
+    onChange?: (event: CustomEvent<any>) => void;
+} & import("react").RefAttributes<HTMLElement>>;

package/dist/types/core/createDsComponent.d.ts

@@ -0,0 +1,3 @@
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
+import type { CreateDsComponentOptions, DsComponentProps } from './types';
+export declare function createDsComponent<Attrs extends Record<string, any> = Record<string, unknown>, Events = {}>(tagName: string, options?: CreateDsComponentOptions<Attrs, Events>): ForwardRefExoticComponent<DsComponentProps<Attrs, Events> & RefAttributes<HTMLElement>>;

package/dist/types/core/types.d.ts

@@ -0,0 +1,19 @@
+import type { ForwardRefExoticComponent, ReactNode, RefAttributes } from 'react';
+export interface DsComponentRenderProps<Attrs, _Events = unknown> {
+    Tag: string;
+    props: Attrs;
+    ref: React.Ref<HTMLElement>;
+    children?: ReactNode;
+}
+export interface CreateDsComponentOptions<Attrs, Events = {}> {
+    events?: string[];
+    render?: (props: DsComponentRenderProps<Attrs, Events>) => React.ReactElement;
+}
+export type DsComponentProps<Attrs extends Record<string, any>, Events = {}> = Attrs & {
+    className?: string;
+    ref?: React.Ref<HTMLElement>;
+    children?: ReactNode;
+} & {
+    [K in keyof Events as K extends string ? `on${Capitalize<K>}` : never]?: (event: Events[K]) => void;
+};
+export type DsComponent<Attrs extends Record<string, any>, Events = {}> = ForwardRefExoticComponent<DsComponentProps<Attrs, Events> & RefAttributes<HTMLElement>>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cupra/ui-react",
-  "version": "2.0.0-canary.186",
+  "version": "2.0.0-canary.187",
   "description": "React components library",
   "author": "SEAT S.A.",
   "license": "SEAT S.A. Library EULA 1.0",
@@ -52,7 +52,7 @@
   "peerDependencies": {
     "react": ">= 18.3.1 < 20",
     "react-dom": ">= 18.3.1 < 20",
-    "@cupra/ui-kit": "2.0.0-canary.172",
+    "@cupra/ui-kit": "2.0.0-canary.173",
     "typescript": ">=5.0.0"
   },
   "devDependencies": {
@@ -74,7 +74,7 @@
     "storybook": "^10.3.3",
     "typescript": "^5.8.2",
     "vite": "^8.0.16",
-    "@cupra/ui-kit": "2.0.0-canary.172"
+    "@cupra/ui-kit": "2.0.0-canary.173"
   },
   "scripts": {
     "build": "rm -rf dist && pnpm --filter @cupra/ui-kit build:react && tsc --declaration --emitDeclarationOnly && BUILD_FORMAT=esm vite build --emptyOutDir false && BUILD_FORMAT=cjs vite build --emptyOutDir false",