@cupra/ui-react 1.0.0-canary.23 → 1.0.0-canary.25

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

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

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

@@ -0,0 +1,8 @@
+import type { 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 {};

package/dist/components/Rating/Rating.js

@@ -0,0 +1,9 @@
+import { jsx as s } from "react/jsx-runtime";
+import "@cupra/ui-kit/react/ds-rating";
+function c(r) {
+  const { className: t, ...o } = r;
+  return /* @__PURE__ */ s("ds-rating-react", { class: t, ...o });
+}
+export {
+  c as Rating
+};

package/dist/components/Rating/stories/CupraDiagonal.stories.d.ts

@@ -0,0 +1,10 @@
+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 FullFive: Story;
+export declare const RoundDownExample: Story;
+export declare const HalfStarExample: Story;
+export declare const NoRatingText: Story;
+export declare const Disabled: Story;

package/dist/components/SecondaryNavigation/SecondaryNavigation.d.ts

@@ -1,5 +1,5 @@
 import { DsSecondaryNavigationAttrs } from '@cupra/ui-kit/react/types/ds-secondary-navigation';
-import { type ReactElement, type ReactNode } from 'react';
+import { type AnchorHTMLAttributes, type ReactElement, type ReactNode } from 'react';
 import '@cupra/ui-kit/react/ds-secondary-navigation';
 type SecondaryNavigationProps = DsSecondaryNavigationAttrs & {
     className?: string;
@@ -8,11 +8,12 @@ type SecondaryNavigationProps = DsSecondaryNavigationAttrs & {
 };
 export declare function SecondaryNavigation(props: SecondaryNavigationProps): ReactElement;
 export declare namespace SecondaryNavigation {
-    var Items: ({ children }: {
-        children: ReactNode;
-    }) => ReactElement;
+    var Item: ({ children, ...rest }: ItemProps) => ReactElement;
     var Actions: ({ children }: {
         children: ReactNode;
     }) => ReactElement;
 }
+type ItemProps = AnchorHTMLAttributes<HTMLAnchorElement> & {
+    children: ReactNode;
+};
 export {};

package/dist/components/SecondaryNavigation/SecondaryNavigation.js

@@ -1,17 +1,17 @@
-import { jsx as o } from "react/jsx-runtime";
+import { jsx as n } from "react/jsx-runtime";
 import "@cupra/ui-kit/react/ds-secondary-navigation";
 import "@cupra/ui-kit/react/utils/breakpoints";
 import "react";
 import { useHandleEvent as a } from "../../hooks/useHandleEvent.js";
-function n(t) {
-  const { className: s, children: e, onSelect: r, ...i } = t, { ref: c } = a({
-    "ds-secondary-navigation:select": r
+function e(t) {
+  const { className: o, children: r, onSelect: s, ...i } = t, { ref: c } = a({
+    "ds-secondary-navigation:select": s
   });
-  return /* @__PURE__ */ o("ds-secondary-navigation-react", { ref: c, class: s, ...i, children: e });
+  return /* @__PURE__ */ n("ds-secondary-navigation-react", { ref: c, class: o, ...i, children: r });
 }
-const m = ({ children: t }) => /* @__PURE__ */ o("div", { slot: "items", children: t }), d = ({ children: t }) => /* @__PURE__ */ o("div", { slot: "actions", children: t });
-n.Items = m;
-n.Actions = d;
+const m = ({ children: t, ...o }) => /* @__PURE__ */ n("a", { slot: "items", ...o, children: t }), d = ({ children: t }) => /* @__PURE__ */ n("div", { slot: "actions", children: t });
+e.Item = m;
+e.Actions = d;
 export {
-  n as SecondaryNavigation
+  e as SecondaryNavigation
 };

package/dist/components/Tooltip/Tooltip.d.ts

@@ -1,11 +1,19 @@
-import { type ReactElement } from 'react';
+import { type HTMLAttributes, type ImgHTMLAttributes, type ReactElement, type ReactNode } from 'react';
 import '@cupra/ui-kit/react/ds-tooltip';
 import { DsTooltipAttrs } from '@cupra/ui-kit/react/types/ds-tooltip';
-type Children = JSX.Element | JSX.Element[] | string;
-interface TooltipProps extends DsTooltipAttrs {
-    children: Children;
-    onClickCancelButton?: (event: CustomEvent) => void;
-    onClickConfirmButton?: (event: CustomEvent) => void;
+import { type IconButtonProps } from '../IconButton/IconButton';
+export type TooltipProps = DsTooltipAttrs & {
+    children: ReactNode;
+};
+export type CloseButtonProps = Omit<IconButtonProps, 'icon-name'>;
+export declare function Tooltip({ children, ...restProps }: TooltipProps): ReactElement;
+export declare namespace Tooltip {
+    var Header: ({ children, ...props }: {
+        children?: ReactNode;
+    } & HTMLAttributes<HTMLDivElement>) => JSX.Element;
+    var CloseButton: (props: CloseButtonProps) => ReactElement;
+    var Content: ({ children, ...props }: {
+        children?: ReactNode;
+    } & HTMLAttributes<HTMLDivElement>) => JSX.Element;
+    var Img: (props: ImgHTMLAttributes<HTMLImageElement>) => ReactElement;
 }
-export declare function Tooltip({ children, onClickCancelButton, onClickConfirmButton, ...restProps }: TooltipProps): ReactElement;
-export {};

package/dist/components/Tooltip/Tooltip.js

@@ -1,25 +1,30 @@
-import { jsx as t } from "react/jsx-runtime";
-import "@cupra/ui-kit/react/utils/breakpoints";
-import "react";
-import { useHandleEvent as c } from "../../hooks/useHandleEvent.js";
-import p from "../../node_modules/.pnpm/styled-components@6.1.19_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/styled-components/dist/styled-components.browser.esm.js";
+import { jsx as o } from "react/jsx-runtime";
+import e from "../../node_modules/.pnpm/styled-components@6.1.19_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/styled-components/dist/styled-components.browser.esm.js";
 import "@cupra/ui-kit/react/ds-tooltip";
-const m = p.div`
+import { IconButton as i } from "../IconButton/IconButton.js";
+const c = e.div`
     display: flex;
     align-items: center;
 `;
-function x({
-  children: o,
-  onClickCancelButton: r,
-  onClickConfirmButton: i,
-  ...e
-}) {
-  const { ref: n } = c({
-    "click-cancel-button": r,
-    "click-confirm-button": i
-  });
-  return /* @__PURE__ */ t("ds-tooltip-react", { ref: n, ...e, children: /* @__PURE__ */ t(m, { children: o }) });
+function r({ children: t, ...n }) {
+  return /* @__PURE__ */ o("ds-tooltip-react", { ...n, children: /* @__PURE__ */ o(c, { children: t }) });
 }
+function m({ children: t, ...n }) {
+  return /* @__PURE__ */ o("div", { slot: "header", ...n, children: t });
+}
+function u(t) {
+  return /* @__PURE__ */ o(i, { "icon-name": "cross", ...t });
+}
+function s({ children: t, ...n }) {
+  return /* @__PURE__ */ o("div", { slot: "content", ...n, children: t });
+}
+function l(t) {
+  return /* @__PURE__ */ o("img", { slot: "image", ...t });
+}
+r.Header = m;
+r.CloseButton = u;
+r.Content = s;
+r.Img = l;
 export {
-  x as Tooltip
+  r as Tooltip
 };

package/dist/components/Tooltip/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 Primary: Story;

package/dist/components/index.d.ts

@@ -25,6 +25,7 @@ export * from './PickerItem/PickerItem';
 export * from './Radio/Radio';
 export * from './RadioButton/RadioButton';
 export * from './RadioButtonGroup/RadioButtonGroup';
+export * from './Rating/Rating';
 export * from './Search/Search';
 export * from './SearchInput/SearchInput';
 export * from './SecondaryNavigation/SecondaryNavigation';

package/dist/index.js

@@ -10,8 +10,8 @@ import { Dialog as B } from "./components/Dialog/Dialog.js";
 import { DialogBody as I } from "./components/DialogBody/DialogBody.js";
 import { DialogFooter as C } from "./components/DialogFooter/DialogFooter.js";
 import { DialogHeader as k } from "./components/DialogHeader/DialogHeader.js";
-import { Divider as b } from "./components/Divider/Divider.js";
-import { Hyperlink as P } from "./components/Hyperlink/Hyperlink.js";
+import { Divider as R } from "./components/Divider/Divider.js";
+import { Hyperlink as y } from "./components/Hyperlink/Hyperlink.js";
 import { Icon as H } from "./components/Icon/Icon.js";
 import { IconButton as w } from "./components/IconButton/IconButton.js";
 import { Input as E } from "./components/Input/Input.js";
@@ -25,37 +25,38 @@ import { PickerItem as Y } from "./components/PickerItem/PickerItem.js";
 import { Radio as _ } from "./components/Radio/Radio.js";
 import { RadioButton as oo } from "./components/RadioButton/RadioButton.js";
 import { RadioButtonGroup as eo } from "./components/RadioButtonGroup/RadioButtonGroup.js";
-import { Search as po } from "./components/Search/Search.js";
-import { SearchInput as mo } from "./components/SearchInput/SearchInput.js";
-import { SecondaryNavigation as ao } from "./components/SecondaryNavigation/SecondaryNavigation.js";
-import { SegmentedControl as no } from "./components/SegmentedControl/SegmentedControl.js";
-import { Select as uo } from "./components/Select/Select.js";
-import { Selection as co } from "./components/Selection/Selection.js";
-import { Slider as So } from "./components/Slider/Slider.js";
-import { Tabs as Bo } from "./components/Tabs/Tabs.js";
-import { Tag as Io } from "./components/Tag/Tag.js";
-import { Text as Co } from "./components/Text/Text.js";
-import { TextInput as ko } from "./components/TextInput/TextInput.js";
-import { Textarea as bo } from "./components/Textarea/Textarea.js";
-import { ThemeProvider as Po } from "./components/ThemeProvider/ThemeProvider.js";
-import { ToggleButton as Ho } from "./components/ToggleButton/ToggleButton.js";
-import { ToggleSwitch as wo } from "./components/ToggleSwitch/ToggleSwitch.js";
-import { Tooltip as Eo } from "./components/Tooltip/Tooltip.js";
-import { Toast as zo } from "./components/Toast/Toast.js";
-import { ToastMessage as Go } from "./components/ToastMessage/ToastMessage.js";
-import { Avatar as jo } from "./components/Avatar/Avatar.js";
-import { StaticBox as Jo } from "./components/StaticBox/StaticBox.js";
-import { Stepper as Qo } from "./components/Stepper/Stepper.js";
-import { InteractiveCard as Vo } from "./components/InteractiveCard/InteractiveCard.js";
-import { SidebarNavigation as Xo } from "./components/SidebarNavigation/SidebarNavigation.js";
-import { useBreakpoint as Zo } from "./hooks/useBreakpoint.js";
-import { useEventListeners as $o } from "./hooks/useEventListeners.js";
-import { useHandleEvent as rr } from "./hooks/useHandleEvent.js";
+import { Rating as po } from "./components/Rating/Rating.js";
+import { Search as mo } from "./components/Search/Search.js";
+import { SearchInput as ao } from "./components/SearchInput/SearchInput.js";
+import { SecondaryNavigation as no } from "./components/SecondaryNavigation/SecondaryNavigation.js";
+import { SegmentedControl as uo } from "./components/SegmentedControl/SegmentedControl.js";
+import { Select as co } from "./components/Select/Select.js";
+import { Selection as So } from "./components/Selection/Selection.js";
+import { Slider as Bo } from "./components/Slider/Slider.js";
+import { Tabs as Io } from "./components/Tabs/Tabs.js";
+import { Tag as Co } from "./components/Tag/Tag.js";
+import { Text as ko } from "./components/Text/Text.js";
+import { TextInput as Ro } from "./components/TextInput/TextInput.js";
+import { Textarea as yo } from "./components/Textarea/Textarea.js";
+import { ThemeProvider as Ho } from "./components/ThemeProvider/ThemeProvider.js";
+import { ToggleButton as wo } from "./components/ToggleButton/ToggleButton.js";
+import { ToggleSwitch as Eo } from "./components/ToggleSwitch/ToggleSwitch.js";
+import { Tooltip as zo } from "./components/Tooltip/Tooltip.js";
+import { Toast as Go } from "./components/Toast/Toast.js";
+import { ToastMessage as jo } from "./components/ToastMessage/ToastMessage.js";
+import { Avatar as Jo } from "./components/Avatar/Avatar.js";
+import { StaticBox as Qo } from "./components/StaticBox/StaticBox.js";
+import { Stepper as Vo } from "./components/Stepper/Stepper.js";
+import { InteractiveCard as Xo } from "./components/InteractiveCard/InteractiveCard.js";
+import { SidebarNavigation as Zo } from "./components/SidebarNavigation/SidebarNavigation.js";
+import { useBreakpoint as $o } from "./hooks/useBreakpoint.js";
+import { useEventListeners as rr } from "./hooks/useEventListeners.js";
+import { useHandleEvent as tr } from "./hooks/useHandleEvent.js";
 import "react";
-import { useResizeObserver as tr } from "./hooks/useResizeObserver/useResizeObserver.js";
+import { useResizeObserver as xr } from "./hooks/useResizeObserver/useResizeObserver.js";
 export {
   t as Accordion,
-  jo as Avatar,
+  Jo as Avatar,
   x as Bullets,
   f as Button,
   i as CarouselIndicator,
@@ -67,12 +68,12 @@ export {
   I as DialogBody,
   C as DialogFooter,
   k as DialogHeader,
-  b as Divider,
-  P as Hyperlink,
+  R as Divider,
+  y as Hyperlink,
   H as Icon,
   w as IconButton,
   E as Input,
-  Vo as InteractiveCard,
+  Xo as InteractiveCard,
   z as LinkButton,
   G as Loader,
   O as LoaderLogo,
@@ -84,29 +85,30 @@ export {
   _ as Radio,
   oo as RadioButton,
   eo as RadioButtonGroup,
-  po as Search,
-  mo as SearchInput,
-  ao as SecondaryNavigation,
-  no as SegmentedControl,
-  uo as Select,
-  co as Selection,
-  Xo as SidebarNavigation,
-  So as Slider,
-  Jo as StaticBox,
-  Qo as Stepper,
-  Bo as Tabs,
-  Io as Tag,
-  Co as Text,
-  ko as TextInput,
-  bo as Textarea,
-  Po as ThemeProvider,
-  zo as Toast,
-  Go as ToastMessage,
-  Ho as ToggleButton,
-  wo as ToggleSwitch,
-  Eo as Tooltip,
-  Zo as useBreakpoint,
-  $o as useEventListeners,
-  rr as useHandleEvent,
-  tr as useResizeObserver
+  po as Rating,
+  mo as Search,
+  ao as SearchInput,
+  no as SecondaryNavigation,
+  uo as SegmentedControl,
+  co as Select,
+  So as Selection,
+  Zo as SidebarNavigation,
+  Bo as Slider,
+  Qo as StaticBox,
+  Vo as Stepper,
+  Io as Tabs,
+  Co as Tag,
+  ko as Text,
+  Ro as TextInput,
+  yo as Textarea,
+  Ho as ThemeProvider,
+  Go as Toast,
+  jo as ToastMessage,
+  wo as ToggleButton,
+  Eo as ToggleSwitch,
+  zo as Tooltip,
+  $o as useBreakpoint,
+  rr as useEventListeners,
+  tr as useHandleEvent,
+  xr as useResizeObserver
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cupra/ui-react",
-  "version": "1.0.0-canary.23",
+  "version": "1.0.0-canary.25",
   "description": "React components library",
   "author": "SEAT S.A.",
   "license": "SEAT S.A. Library EULA 1.0",
@@ -44,7 +44,7 @@
   "peerDependencies": {
     "react": ">= 18.3.1 < 20",
     "react-dom": ">= 18.3.1 < 20",
-    "@cupra/ui-kit": "1.0.0-canary.13"
+    "@cupra/ui-kit": "1.0.0-canary.15"
   },
   "dependencies": {
     "styled-components": "^6.1.16"
@@ -66,7 +66,7 @@
     "storybook": "^8.6.14",
     "typescript": "^5.8.2",
     "vite": "^6.4.1",
-    "@cupra/ui-kit": "1.0.0-canary.13"
+    "@cupra/ui-kit": "1.0.0-canary.15"
   },
   "scripts": {
     "build": "rm -rf dist && tsc --declaration --emitDeclarationOnly && vite build --emptyOutDir false",