@cupra/ui-react 2.0.0-canary.3 → 2.0.0-canary.30

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

@@ -0,0 +1,9 @@
+import { DsInlineAlertAttrs } from '@cupra/ui-kit/react/types/ds-inline-alert';
+import { type ReactNode } from 'react';
+import '@cupra/ui-kit/react/ds-inline-alert';
+export type InlineAlertProps = DsInlineAlertAttrs & {
+    className?: string;
+    children?: ReactNode;
+    onClose?: (event: CustomEvent) => void;
+};
+export declare function InlineAlert(props: InlineAlertProps): ReactNode;

package/dist/types/components/InlineAlert/stories/CupraDiagonal.stories.d.ts

@@ -0,0 +1,11 @@
+import type { Meta, StoryObj } from '@storybook/react';
+declare const meta: Meta;
+export default meta;
+type Story = StoryObj;
+export declare const DefaultStatus: Story;
+export declare const SuccessStatus: Story;
+export declare const ErrorStatus: Story;
+export declare const WarningStatus: Story;
+export declare const InfoStatus: Story;
+export declare const WithCustomContent: Story;
+export declare const WithoutLink: Story;

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

@@ -0,0 +1,9 @@
+import type { DsListAttrs } from '@cupra/ui-kit/react/types/ds-list';
+import { type ReactElement, ReactNode } from 'react';
+import '@cupra/ui-kit/react/ds-list';
+export interface ListProps extends Partial<DsListAttrs> {
+    className?: string;
+    children?: ReactNode;
+    size?: 'small' | 'medium';
+}
+export declare function List({ className, children, ...rest }: ListProps): ReactElement;

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

@@ -0,0 +1,21 @@
+import type { Meta, StoryObj } from '@storybook/react';
+type ListArgs = {
+    size: 'small' | 'medium';
+};
+declare const meta: Meta<ListArgs>;
+export default meta;
+type Story = StoryObj<ListArgs>;
+export declare const SelectionListCheckboxMedium: Story;
+export declare const SelectionListCheckboxSmall: Story;
+export declare const SelectionListRadioButtonMedium: Story;
+export declare const SelectionListRadioButtonSmall: Story;
+export declare const SelectionListSwitchMedium: Story;
+export declare const SelectionListSwitchSmall: Story;
+export declare const ActionListIconMedium: Story;
+export declare const ActionListIconSmall: Story;
+export declare const ActionListImageSquareMedium: Story;
+export declare const ActionListImageSquareSmall: Story;
+export declare const ActionListImageWideMedium: Story;
+export declare const ActionListImageWideSmall: Story;
+export declare const InfoListMedium: Story;
+export declare const InfoListSmall: Story;

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

@@ -0,0 +1,10 @@
+import type { DsListItemAttrs } from '@cupra/ui-kit/react/types/ds-list-item';
+import { type ReactElement, type ReactNode } from 'react';
+import '@cupra/ui-kit/react/ds-list-item';
+export interface ListItemProps extends DsListItemAttrs {
+    className?: string;
+    children?: ReactNode;
+    selected?: boolean;
+    disabled?: boolean;
+}
+export declare function ListItem({ className, children, selected, disabled, variant, ...rest }: ListItemProps): ReactElement;

package/dist/types/components/ListItem/stories/CupraDiagonal.stories.d.ts

@@ -0,0 +1,23 @@
+import type { Meta, StoryObj } from '@storybook/react';
+type ListItemArgs = {
+    variant: 'selection' | 'action' | 'info';
+    size?: 'small' | 'medium';
+    selected?: boolean;
+    disabled?: boolean;
+};
+declare const meta: Meta<ListItemArgs>;
+export default meta;
+type Story = StoryObj<ListItemArgs>;
+export declare const ListItemDefault: Story;
+export declare const SelectionRadioListItemMedium: Story;
+export declare const SelectionRadioListItemSmall: Story;
+export declare const SelectionSwitchListItemMedium: Story;
+export declare const SelectionSwitchListItemSmall: Story;
+export declare const ActionIconListItemMedium: Story;
+export declare const ActionIconListItemSmall: Story;
+export declare const ActionImageSquareListItemMedium: Story;
+export declare const ActionImageSquareListItemSmall: Story;
+export declare const ActionImageWideListItemMedium: Story;
+export declare const ActionImageWideListItemSmall: Story;
+export declare const InfoListItemMedium: Story;
+export declare const InfoListItemSmall: Story;

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

@@ -0,0 +1,10 @@
+import type { ReactElement } from 'react';
+import '@cupra/ui-kit/react/ds-media-control';
+import type { DsMediaControlAttrs } from '@cupra/ui-kit/react/types/ds-media-control';
+type MediaControlProps = DsMediaControlAttrs & {
+    className?: string;
+    onPlay?: (event: CustomEvent) => void;
+    onPause?: (event: CustomEvent) => void;
+};
+export declare function MediaControl(props: MediaControlProps): ReactElement;
+export {};

package/dist/types/components/MediaControl/stories/CupraDiagonal.stories.d.ts

@@ -0,0 +1,6 @@
+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 Sizes: Story;

package/dist/types/components/SidebarNavigation/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/types/components/Slider/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/types/components/Text/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 → types/components}/index.d.ts

@@ -1,5 +1,9 @@
 export * from './Accordion/Accordion';
 export * from './Badge/Badge';
+export * from './BasicCard/BasicCard';
+export * from './BasicCardImage/BasicCardImage';
+export * from './BasicCardHeader/BasicCardHeader';
+export * from './BasicCardSection/BasicCardSection';
 export * from './Bullets/Bullets';
 export * from './Button/Button';
 export * from './CarouselIndicator/CarouselIndicator';
@@ -10,6 +14,7 @@ export * from './Currency/Currency';
 export * from './Dialog/Dialog';
 export * from './DialogBody/DialogBody';
 export * from './DialogFooter/DialogFooter';
+export * from './DialogFullscreen/DialogFullscreen';
 export * from './DialogHeader/DialogHeader';
 export * from './Divider/Divider';
 export * from './Drawer/Drawer';
@@ -17,11 +22,14 @@ export * from './Hyperlink/Hyperlink';
 export * from './Icon/Icon';
 export * from './IconButton/IconButton';
 export * from './Input/Input';
+export * from './List/List';
+export * from './ListItem/ListItem';
 export * from './LinkButton/LinkButton';
 export * from './Loader/Loader';
 export * from './Logo/Logo';
 export * from './MainTitle/MainTitle';
 export * from './MapPin/MapPin';
+export * from './MediaControl/MediaControl';
 export * from './Modal/Modal';
 export * from './PasswordInput/PasswordInput';
 export * from './PickerItem/PickerItem';
@@ -47,8 +55,10 @@ export * from './ToggleSwitch/ToggleSwitch';
 export * from './Tooltip/Tooltip';
 export * from './Toast/Toast';
 export * from './ToastMessage/ToastMessage';
+export * from './InlineAlert/InlineAlert';
 export * from './Avatar/Avatar';
 export * from './StaticBox/StaticBox';
 export * from './Stepper/Stepper';
 export * from './InteractiveCard/InteractiveCard';
 export * from './SidebarNavigation/SidebarNavigation';
+export * from './MediaControl/MediaControl';

package/package.json

@@ -1,22 +1,29 @@
 {
   "name": "@cupra/ui-react",
-  "version": "2.0.0-canary.3",
+  "version": "2.0.0-canary.30",
   "description": "React components library",
   "author": "SEAT S.A.",
   "license": "SEAT S.A. Library EULA 1.0",
   "type": "module",
-  "main": "dist/index.js",
-  "types": "dist/index.d.ts",
+  "main": "dist/cjs/index.cjs",
+  "module": "dist/esm/index.js",
+  "types": "dist/types/index.d.ts",
   "exports": {
     ".": {
-      "import": "./dist/index.js",
-      "types": "./dist/index.d.ts"
+      "types": "./dist/types/index.d.ts",
+      "import": "./dist/esm/index.js",
+      "require": "./dist/cjs/index.cjs"
     },
     "./*": {
-      "import": "./dist/components/*/*.js",
-      "types": "./dist/components/*/*.d.ts"
+      "types": "./dist/types/components/*/*.d.ts",
+      "import": "./dist/esm/components/*/*.js",
+      "require": "./dist/cjs/components/*/*.cjs"
     },
-    "./hooks/*": "./dist/hooks/*.js"
+    "./hooks/*": {
+      "types": "./dist/types/hooks/*.d.ts",
+      "import": "./dist/esm/hooks/*.js",
+      "require": "./dist/cjs/hooks/*.cjs"
+    }
   },
   "files": [
     "LICENSE",
@@ -44,7 +51,8 @@
   "peerDependencies": {
     "react": ">= 18.3.1 < 20",
     "react-dom": ">= 18.3.1 < 20",
-    "@cupra/ui-kit": "1.1.0-canary.3"
+    "@cupra/ui-kit": "2.0.0-canary.23",
+    "typescript": ">=5.0.0"
   },
   "dependencies": {
     "styled-components": "^6.1.16"
@@ -66,13 +74,13 @@
     "storybook": "^8.6.15",
     "typescript": "^5.8.2",
     "vite": "^6.4.1",
-    "@cupra/ui-kit": "1.1.0-canary.3"
+    "@cupra/ui-kit": "2.0.0-canary.23"
   },
   "scripts": {
-    "build": "rm -rf dist && tsc --declaration --emitDeclarationOnly && vite build --emptyOutDir false",
+    "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",
     "test": "npx vitest run",
     "generate-licenses": "npx generate-license-file --input package.json --output THIRD_PARTY_LICENSES.MD --overwrite --ci",
-    "storybook": "storybook dev -p 6006",
+    "storybook": "pnpm --filter ui-kit build:react:dev && storybook dev -p 6006",
     "build-storybook:cupra-diagonal": "storybook build --output-dir dist-storybook/cupra-diagonal"
   }
 }

package/dist/index.js

@@ -1,120 +0,0 @@
-import { Accordion as t } from "./components/Accordion/Accordion.js";
-import { Badge as x } from "./components/Badge/Badge.js";
-import { Bullets as f } from "./components/Bullets/Bullets.js";
-import { Button as i } from "./components/Button/Button.js";
-import { CarouselIndicator as d } from "./components/CarouselIndicator/CarouselIndicator.js";
-import { Checkbox as s } from "./components/Checkbox/Checkbox.js";
-import { Chip as g } from "./components/Chip/Chip.js";
-import { Chips as T } from "./components/Chips/Chips.js";
-import { Currency as S } from "./components/Currency/Currency.js";
-import { Dialog as I } from "./components/Dialog/Dialog.js";
-import { DialogBody as C } from "./components/DialogBody/DialogBody.js";
-import { DialogFooter as L } from "./components/DialogFooter/DialogFooter.js";
-import { DialogHeader as R } from "./components/DialogHeader/DialogHeader.js";
-import { Divider as y } from "./components/Divider/Divider.js";
-import { Drawer as P } from "./components/Drawer/Drawer.js";
-import { Hyperlink as H } from "./components/Hyperlink/Hyperlink.js";
-import { Icon as E } from "./components/Icon/Icon.js";
-import { IconButton as z } from "./components/IconButton/IconButton.js";
-import { Input as G } from "./components/Input/Input.js";
-import { LinkButton as j } from "./components/LinkButton/LinkButton.js";
-import { Loader as J, LoaderLogo as K } from "./components/Loader/Loader.js";
-import { Logo as U } from "./components/Logo/Logo.js";
-import { MainTitle as W } from "./components/MainTitle/MainTitle.js";
-import { MapPin as Y } from "./components/MapPin/MapPin.js";
-import { Modal as _ } from "./components/Modal/Modal.js";
-import { PasswordInput as oo } from "./components/PasswordInput/PasswordInput.js";
-import { PickerItem as eo } from "./components/PickerItem/PickerItem.js";
-import { Radio as po } from "./components/Radio/Radio.js";
-import { RadioButton as mo } from "./components/RadioButton/RadioButton.js";
-import { RadioButtonGroup as ao } from "./components/RadioButtonGroup/RadioButtonGroup.js";
-import { Rating as no } from "./components/Rating/Rating.js";
-import { Search as so } from "./components/Search/Search.js";
-import { SearchInput as go } from "./components/SearchInput/SearchInput.js";
-import { SecondaryNavigation as To } from "./components/SecondaryNavigation/SecondaryNavigation.js";
-import { SegmentedControl as So } from "./components/SegmentedControl/SegmentedControl.js";
-import { Select as Io } from "./components/Select/Select.js";
-import { Selection as Co } from "./components/Selection/Selection.js";
-import { Slider as Lo } from "./components/Slider/Slider.js";
-import { Tabs as Ro } from "./components/Tabs/Tabs.js";
-import { Tag as yo } from "./components/Tag/Tag.js";
-import { Text as Po } from "./components/Text/Text.js";
-import { TextInput as Ho } from "./components/TextInput/TextInput.js";
-import { Textarea as Eo } from "./components/Textarea/Textarea.js";
-import { ThemeProvider as zo } from "./components/ThemeProvider/ThemeProvider.js";
-import { ToggleButton as Go } from "./components/ToggleButton/ToggleButton.js";
-import { ToggleSwitch as jo } from "./components/ToggleSwitch/ToggleSwitch.js";
-import { Tooltip as Jo } from "./components/Tooltip/Tooltip.js";
-import { Toast as Qo } from "./components/Toast/Toast.js";
-import { ToastMessage as Vo } from "./components/ToastMessage/ToastMessage.js";
-import { Avatar as Xo } from "./components/Avatar/Avatar.js";
-import { StaticBox as Zo } from "./components/StaticBox/StaticBox.js";
-import { Stepper as $o } from "./components/Stepper/Stepper.js";
-import { InteractiveCard as rr } from "./components/InteractiveCard/InteractiveCard.js";
-import { SidebarNavigation as tr } from "./components/SidebarNavigation/SidebarNavigation.js";
-import { useBreakpoint as xr } from "./hooks/useBreakpoint.js";
-import { useEventListeners as fr } from "./hooks/useEventListeners.js";
-import { useHandleEvent as ir } from "./hooks/useHandleEvent.js";
-import "react";
-import { useResizeObserver as dr } from "./hooks/useResizeObserver/useResizeObserver.js";
-export {
-  t as Accordion,
-  Xo as Avatar,
-  x as Badge,
-  f as Bullets,
-  i as Button,
-  d as CarouselIndicator,
-  s as Checkbox,
-  g as Chip,
-  T as Chips,
-  S as Currency,
-  I as Dialog,
-  C as DialogBody,
-  L as DialogFooter,
-  R as DialogHeader,
-  y as Divider,
-  P as Drawer,
-  H as Hyperlink,
-  E as Icon,
-  z as IconButton,
-  G as Input,
-  rr as InteractiveCard,
-  j as LinkButton,
-  J as Loader,
-  K as LoaderLogo,
-  U as Logo,
-  W as MainTitle,
-  Y as MapPin,
-  _ as Modal,
-  oo as PasswordInput,
-  eo as PickerItem,
-  po as Radio,
-  mo as RadioButton,
-  ao as RadioButtonGroup,
-  no as Rating,
-  so as Search,
-  go as SearchInput,
-  To as SecondaryNavigation,
-  So as SegmentedControl,
-  Io as Select,
-  Co as Selection,
-  tr as SidebarNavigation,
-  Lo as Slider,
-  Zo as StaticBox,
-  $o as Stepper,
-  Ro as Tabs,
-  yo as Tag,
-  Po as Text,
-  Ho as TextInput,
-  Eo as Textarea,
-  zo as ThemeProvider,
-  Qo as Toast,
-  Vo as ToastMessage,
-  Go as ToggleButton,
-  jo as ToggleSwitch,
-  Jo as Tooltip,
-  xr as useBreakpoint,
-  fr as useEventListeners,
-  ir as useHandleEvent,
-  dr as useResizeObserver
-};