@cupra/ui-react 2.0.0-canary.7 → 2.0.0-canary.8

package/dist/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/components/MediaControl/MediaControl.js

@@ -0,0 +1,12 @@
+import { jsx as n } from "react/jsx-runtime";
+import "@cupra/ui-kit/react/utils/breakpoints";
+import "react";
+import { useHandleEvent as m } from "../../hooks/useHandleEvent.js";
+import "@cupra/ui-kit/react/ds-media-control";
+function u(o) {
+  const { className: r, onPlay: t, onPause: e, ...s } = o, { ref: a } = m({ "ds-media-control:play": t, "ds-media-control:pause": e });
+  return /* @__PURE__ */ n("ds-media-control-react", { ref: a, class: r, ...s });
+}
+export {
+  u as MediaControl
+};

package/dist/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/components/index.d.ts

@@ -24,6 +24,7 @@ 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';
@@ -54,3 +55,4 @@ export * from './StaticBox/StaticBox';
 export * from './Stepper/Stepper';
 export * from './InteractiveCard/InteractiveCard';
 export * from './SidebarNavigation/SidebarNavigation';
+export * from './MediaControl/MediaControl';

package/dist/index.js

@@ -7,11 +7,11 @@ import { Button as c } from "./components/Button/Button.js";
 import { CarouselIndicator as u } from "./components/CarouselIndicator/CarouselIndicator.js";
 import { Checkbox as B } from "./components/Checkbox/Checkbox.js";
 import { Chip as T } from "./components/Chip/Chip.js";
-import { Chips as C } from "./components/Chips/Chips.js";
+import { Chips as v } from "./components/Chips/Chips.js";
 import { Currency as h } from "./components/Currency/Currency.js";
 import { Dialog as L } from "./components/Dialog/Dialog.js";
-import { DialogBody as R } from "./components/DialogBody/DialogBody.js";
-import { DialogFooter as y } from "./components/DialogFooter/DialogFooter.js";
+import { DialogBody as M } from "./components/DialogBody/DialogBody.js";
+import { DialogFooter as b } from "./components/DialogFooter/DialogFooter.js";
 import { DialogHeader as P } from "./components/DialogHeader/DialogHeader.js";
 import { Divider as H } from "./components/Divider/Divider.js";
 import { Drawer as E } from "./components/Drawer/Drawer.js";
@@ -24,44 +24,45 @@ import { Loader as V, LoaderLogo as W } from "./components/Loader/Loader.js";
 import { Logo as Y } from "./components/Logo/Logo.js";
 import { MainTitle as _ } from "./components/MainTitle/MainTitle.js";
 import { MapPin as oo } from "./components/MapPin/MapPin.js";
-import { Modal as eo } from "./components/Modal/Modal.js";
-import { PasswordInput as po } from "./components/PasswordInput/PasswordInput.js";
-import { PickerItem as mo } from "./components/PickerItem/PickerItem.js";
-import { Radio as ao } from "./components/Radio/Radio.js";
-import { RadioButton as no } from "./components/RadioButton/RadioButton.js";
-import { RadioButtonGroup as co } from "./components/RadioButtonGroup/RadioButtonGroup.js";
-import { Rating as uo } from "./components/Rating/Rating.js";
-import { Search as Bo } from "./components/Search/Search.js";
-import { SearchInput as To } from "./components/SearchInput/SearchInput.js";
-import { SecondaryNavigation as Co } from "./components/SecondaryNavigation/SecondaryNavigation.js";
-import { SegmentedControl as ho } from "./components/SegmentedControl/SegmentedControl.js";
-import { Select as Lo } from "./components/Select/Select.js";
-import { Selection as Ro } from "./components/Selection/Selection.js";
-import { Slider as yo } from "./components/Slider/Slider.js";
-import { Tabs as Po } from "./components/Tabs/Tabs.js";
-import { Tag as Ho } from "./components/Tag/Tag.js";
-import { Text as Eo } from "./components/Text/Text.js";
-import { TextInput as zo } from "./components/TextInput/TextInput.js";
-import { Textarea as Go } from "./components/Textarea/Textarea.js";
-import { ThemeProvider as jo } from "./components/ThemeProvider/ThemeProvider.js";
-import { ToggleButton as Jo } from "./components/ToggleButton/ToggleButton.js";
-import { ToggleSwitch as Qo } from "./components/ToggleSwitch/ToggleSwitch.js";
-import { Tooltip as Vo } from "./components/Tooltip/Tooltip.js";
-import { Toast as Xo } from "./components/Toast/Toast.js";
-import { ToastMessage as Zo } from "./components/ToastMessage/ToastMessage.js";
-import { Avatar as $o } from "./components/Avatar/Avatar.js";
-import { StaticBox as rr } from "./components/StaticBox/StaticBox.js";
-import { Stepper as tr } from "./components/Stepper/Stepper.js";
-import { InteractiveCard as xr } from "./components/InteractiveCard/InteractiveCard.js";
-import { SidebarNavigation as fr } from "./components/SidebarNavigation/SidebarNavigation.js";
-import { useBreakpoint as ir } from "./hooks/useBreakpoint.js";
-import { useEventListeners as dr } from "./hooks/useEventListeners.js";
-import { useHandleEvent as cr } from "./hooks/useHandleEvent.js";
+import { MediaControl as eo } from "./components/MediaControl/MediaControl.js";
+import { Modal as po } from "./components/Modal/Modal.js";
+import { PasswordInput as mo } from "./components/PasswordInput/PasswordInput.js";
+import { PickerItem as ao } from "./components/PickerItem/PickerItem.js";
+import { Radio as no } from "./components/Radio/Radio.js";
+import { RadioButton as co } from "./components/RadioButton/RadioButton.js";
+import { RadioButtonGroup as uo } from "./components/RadioButtonGroup/RadioButtonGroup.js";
+import { Rating as Bo } from "./components/Rating/Rating.js";
+import { Search as To } from "./components/Search/Search.js";
+import { SearchInput as vo } from "./components/SearchInput/SearchInput.js";
+import { SecondaryNavigation as ho } from "./components/SecondaryNavigation/SecondaryNavigation.js";
+import { SegmentedControl as Lo } from "./components/SegmentedControl/SegmentedControl.js";
+import { Select as Mo } from "./components/Select/Select.js";
+import { Selection as bo } from "./components/Selection/Selection.js";
+import { Slider as Po } from "./components/Slider/Slider.js";
+import { Tabs as Ho } from "./components/Tabs/Tabs.js";
+import { Tag as Eo } from "./components/Tag/Tag.js";
+import { Text as zo } from "./components/Text/Text.js";
+import { TextInput as Go } from "./components/TextInput/TextInput.js";
+import { Textarea as jo } from "./components/Textarea/Textarea.js";
+import { ThemeProvider as Jo } from "./components/ThemeProvider/ThemeProvider.js";
+import { ToggleButton as Qo } from "./components/ToggleButton/ToggleButton.js";
+import { ToggleSwitch as Vo } from "./components/ToggleSwitch/ToggleSwitch.js";
+import { Tooltip as Xo } from "./components/Tooltip/Tooltip.js";
+import { Toast as Zo } from "./components/Toast/Toast.js";
+import { ToastMessage as $o } from "./components/ToastMessage/ToastMessage.js";
+import { Avatar as rr } from "./components/Avatar/Avatar.js";
+import { StaticBox as tr } from "./components/StaticBox/StaticBox.js";
+import { Stepper as xr } from "./components/Stepper/Stepper.js";
+import { InteractiveCard as fr } from "./components/InteractiveCard/InteractiveCard.js";
+import { SidebarNavigation as ir } from "./components/SidebarNavigation/SidebarNavigation.js";
+import { useBreakpoint as dr } from "./hooks/useBreakpoint.js";
+import { useEventListeners as cr } from "./hooks/useEventListeners.js";
+import { useHandleEvent as ur } from "./hooks/useHandleEvent.js";
 import "react";
-import { useResizeObserver as ur } from "./hooks/useResizeObserver/useResizeObserver.js";
+import { useResizeObserver as Br } from "./hooks/useResizeObserver/useResizeObserver.js";
 export {
   t as Accordion,
-  $o as Avatar,
+  rr as Avatar,
   x as Badge,
   f as BasicCard,
   i as BasicCardSection,
@@ -70,11 +71,11 @@ export {
   u as CarouselIndicator,
   B as Checkbox,
   T as Chip,
-  C as Chips,
+  v as Chips,
   h as Currency,
   L as Dialog,
-  R as DialogBody,
-  y as DialogFooter,
+  M as DialogBody,
+  b as DialogFooter,
   P as DialogHeader,
   H as Divider,
   E as Drawer,
@@ -82,43 +83,44 @@ export {
   G as Icon,
   j as IconButton,
   J as Input,
-  xr as InteractiveCard,
+  fr as InteractiveCard,
   Q as LinkButton,
   V as Loader,
   W as LoaderLogo,
   Y as Logo,
   _ as MainTitle,
   oo as MapPin,
-  eo as Modal,
-  po as PasswordInput,
-  mo as PickerItem,
-  ao as Radio,
-  no as RadioButton,
-  co as RadioButtonGroup,
-  uo as Rating,
-  Bo as Search,
-  To as SearchInput,
-  Co as SecondaryNavigation,
-  ho as SegmentedControl,
-  Lo as Select,
-  Ro as Selection,
-  fr as SidebarNavigation,
-  yo as Slider,
-  rr as StaticBox,
-  tr as Stepper,
-  Po as Tabs,
-  Ho as Tag,
-  Eo as Text,
-  zo as TextInput,
-  Go as Textarea,
-  jo as ThemeProvider,
-  Xo as Toast,
-  Zo as ToastMessage,
-  Jo as ToggleButton,
-  Qo as ToggleSwitch,
-  Vo as Tooltip,
-  ir as useBreakpoint,
-  dr as useEventListeners,
-  cr as useHandleEvent,
-  ur as useResizeObserver
+  eo as MediaControl,
+  po as Modal,
+  mo as PasswordInput,
+  ao as PickerItem,
+  no as Radio,
+  co as RadioButton,
+  uo as RadioButtonGroup,
+  Bo as Rating,
+  To as Search,
+  vo as SearchInput,
+  ho as SecondaryNavigation,
+  Lo as SegmentedControl,
+  Mo as Select,
+  bo as Selection,
+  ir as SidebarNavigation,
+  Po as Slider,
+  tr as StaticBox,
+  xr as Stepper,
+  Ho as Tabs,
+  Eo as Tag,
+  zo as Text,
+  Go as TextInput,
+  jo as Textarea,
+  Jo as ThemeProvider,
+  Zo as Toast,
+  $o as ToastMessage,
+  Qo as ToggleButton,
+  Vo as ToggleSwitch,
+  Xo as Tooltip,
+  dr as useBreakpoint,
+  cr as useEventListeners,
+  ur as useHandleEvent,
+  Br as useResizeObserver
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cupra/ui-react",
-  "version": "2.0.0-canary.7",
+  "version": "2.0.0-canary.8",
   "description": "React components library",
   "author": "SEAT S.A.",
   "license": "SEAT S.A. Library EULA 1.0",
@@ -47,7 +47,7 @@
   "peerDependencies": {
     "react": ">= 18.3.1 < 20",
     "react-dom": ">= 18.3.1 < 20",
-    "@cupra/ui-kit": "1.1.0-canary.4",
+    "@cupra/ui-kit": "1.1.0-canary.5",
     "typescript": ">=5.0.0"
   },
   "dependencies": {
@@ -70,13 +70,13 @@
     "storybook": "^8.6.15",
     "typescript": "^5.8.2",
     "vite": "^6.4.1",
-    "@cupra/ui-kit": "1.1.0-canary.4"
+    "@cupra/ui-kit": "1.1.0-canary.5"
   },
   "scripts": {
     "build": "rm -rf dist && tsc --declaration --emitDeclarationOnly && 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 --mode development && storybook dev -p 6006",
     "build-storybook:cupra-diagonal": "storybook build --output-dir dist-storybook/cupra-diagonal"
   }
 }