@cupra/ui-react 1.0.0-canary.8 → 1.0.0

package/dist/components/Tabs/Tabs.js

@@ -1,19 +1,20 @@
-import { jsx as n } from "react/jsx-runtime";
+import { jsx as r } from "react/jsx-runtime";
+import "@cupra/ui-kit/react/utils/breakpoints";
 import "react";
 import { useHandleEvent as i } from "../../hooks/useHandleEvent.js";
-import "../../packages/ui-kit/dist-react/index.js";
-function r({ children: t, onChange: e, ...o }) {
+import "@cupra/ui-kit/react/ds-tabs";
+function n({ children: t, onChange: e, ...o }) {
   const { ref: a } = i({ change: e });
-  return /* @__PURE__ */ n("ds-tabs-react", { ref: a, ...o, children: t });
+  return /* @__PURE__ */ r("ds-tabs-react", { ref: a, ...o, children: t });
 }
 function l({ children: t }) {
-  return /* @__PURE__ */ n("div", { role: "tab", slot: "tab", children: t });
+  return /* @__PURE__ */ r("div", { role: "tab", slot: "tab", children: t });
 }
-function s({ children: t }) {
-  return /* @__PURE__ */ n("div", { role: "tabpanel", slot: "panel", children: t });
+function p({ children: t }) {
+  return /* @__PURE__ */ r("div", { role: "tabpanel", slot: "panel", children: t });
 }
-r.Tab = l;
-r.Panel = s;
+n.Tab = l;
+n.Panel = p;
 export {
-  r as Tabs
+  n as Tabs
 };

package/dist/components/Tag/Tag.d.ts

@@ -1,5 +1,5 @@
 import { type ReactElement } from 'react';
-import '@cupra/ui-kit/react';
+import '@cupra/ui-kit/react/ds-tag';
 import { DsTagAttrs } from '@cupra/ui-kit/react/types/ds-tag';
 type Children = JSX.Element | JSX.Element[] | string;
 interface TabsProps extends DsTagAttrs {

package/dist/components/Tag/Tag.js

@@ -1,11 +1,12 @@
-import { jsx as s } from "react/jsx-runtime";
+import { jsx as i } from "react/jsx-runtime";
+import "@cupra/ui-kit/react/utils/breakpoints";
 import "react";
-import { useHandleEvent as i } from "../../hooks/useHandleEvent.js";
-import "../../packages/ui-kit/dist-react/index.js";
-function f(o) {
-  const { children: r, onClickIcon: t, className: c, ...n } = o, { ref: e } = i({ clickicon: t });
-  return /* @__PURE__ */ s("ds-tag-react", { ref: e, class: c, ...n, children: r });
+import { useHandleEvent as s } from "../../hooks/useHandleEvent.js";
+import "@cupra/ui-kit/react/ds-tag";
+function d(o) {
+  const { children: r, onClickIcon: t, className: c, ...n } = o, { ref: e } = s({ clickicon: t });
+  return /* @__PURE__ */ i("ds-tag-react", { ref: e, class: c, ...n, children: r });
 }
 export {
-  f as Tag
+  d as Tag
 };

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

@@ -1,6 +1,6 @@
 import { DsTextAttrs } from '@cupra/ui-kit/react/types/ds-text';
 import { type ReactElement } from 'react';
-import '@cupra/ui-kit/react';
+import '@cupra/ui-kit/react/ds-text';
 type TextProps = DsTextAttrs & {
     className?: string;
     children: JSX.Element | JSX.Element[] | string;

package/dist/components/Text/Text.js

@@ -1,5 +1,5 @@
 import { jsx as s } from "react/jsx-runtime";
-import "../../packages/ui-kit/dist-react/index.js";
+import "@cupra/ui-kit/react/ds-text";
 function a(t) {
   const { className: r, children: e, ...o } = t;
   return /* @__PURE__ */ s("ds-text-react", { class: r, ...o, children: e });

package/dist/components/TextInput/TextInput.d.ts

@@ -1,6 +1,6 @@
 import { DsTextInputAttrs } from '@cupra/ui-kit/react/types/ds-text-input';
 import { ChangeEvent, FormEvent, KeyboardEvent, type ReactElement } from 'react';
-import '@cupra/ui-kit/react';
+import '@cupra/ui-kit/react/ds-text-input';
 type TextInputProps = DsTextInputAttrs & {
     type?: 'text' | 'email' | 'number' | 'url' | 'tel';
     className?: string;

package/dist/components/TextInput/TextInput.js

@@ -1,26 +1,27 @@
 import { jsxs as y, jsx as t } from "react/jsx-runtime";
-import "../../packages/ui-kit/dist-react/index.js";
+import "@cupra/ui-kit/react/ds-text-input";
+import "@cupra/ui-kit/react/utils/breakpoints";
 import "react";
 import { useHandleEvent as b } from "../../hooks/useHandleEvent.js";
-function L(n) {
+function k(n) {
   const {
     className: r,
     children: I,
     onChange: o,
-    onInput: l,
-    onKeyDown: p,
+    onInput: p,
+    onKeyDown: i,
     inputId: e,
-    placeHolder: i,
+    placeHolder: l,
     type: a,
     value: d,
     label: s,
     required: c,
-    disabled: u,
-    pattern: h,
-    maxLength: m,
+    disabled: m,
+    pattern: u,
+    maxLength: h,
     minLength: x,
     ...f
-  } = n, { ref: g } = b({ change: o, input: l, keydown: p });
+  } = n, { ref: g } = b({ change: o, input: p, keydown: i });
   return /* @__PURE__ */ y("ds-text-input-react", { ref: g, class: r, ...f, children: [
     /* @__PURE__ */ t("label", { htmlFor: e, children: s }),
     /* @__PURE__ */ t(
@@ -28,17 +29,17 @@ function L(n) {
       {
         id: e,
         type: a || "text",
-        placeholder: i,
+        placeholder: l,
         value: d,
         required: c,
-        disabled: u,
+        disabled: m,
         minLength: x,
-        maxLength: m,
-        pattern: h
+        maxLength: h,
+        pattern: u
       }
     )
   ] });
 }
 export {
-  L as TextInput
+  k as TextInput
 };

package/dist/components/Textarea/Textarea.d.ts

@@ -1,6 +1,6 @@
 import { DsTextareaAttrs } from '@cupra/ui-kit/react/types/ds-textarea';
 import { type ReactElement } from 'react';
-import '@cupra/ui-kit/react';
+import '@cupra/ui-kit/react/ds-textarea';
 type TextareaProps = DsTextareaAttrs & {
     className?: string;
     onChange?: (event: typeof InputEvent) => void;

package/dist/components/Textarea/Textarea.js

@@ -1,8 +1,9 @@
 import { jsxs as E, jsx as r } from "react/jsx-runtime";
-import "../../packages/ui-kit/dist-react/index.js";
+import "@cupra/ui-kit/react/ds-textarea";
+import "@cupra/ui-kit/react/utils/breakpoints";
 import "react";
 import { useHandleEvent as j } from "../../hooks/useHandleEvent.js";
-function C(t) {
+function F(t) {
   const {
     className: o,
     children: I,
@@ -53,5 +54,5 @@ function C(t) {
   );
 }
 export {
-  C as Textarea
+  F as Textarea
 };

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

@@ -1,4 +1,4 @@
-import '@cupra/ui-kit/react';
+import '@cupra/ui-kit/react/ds-theme-provider';
 import { DsThemeProviderAttrs } from '@cupra/ui-kit/react/types/ds-theme-provider';
 import { type ReactElement } from 'react';
 type Children = JSX.Element | JSX.Element[] | string;

package/dist/components/ThemeProvider/ThemeProvider.js

@@ -1,5 +1,5 @@
 import { jsx as o } from "react/jsx-runtime";
-import "../../packages/ui-kit/dist-react/index.js";
+import "@cupra/ui-kit/react/ds-theme-provider";
 const i = ({ children: r, ...e }) => /* @__PURE__ */ o("ds-theme-provider-react", { ...e, children: r });
 export {
   i as ThemeProvider

package/dist/components/Toast/Toast.d.ts

@@ -1,6 +1,6 @@
 import type { DsToastAttrs, ToastOptions } from '@cupra/ui-kit/react/types/ds-toast';
 import { type ReactNode } from 'react';
-import '@cupra/ui-kit/react';
+import '@cupra/ui-kit/react/ds-toast';
 type ToastProps = DsToastAttrs & {
     className?: string;
 };

package/dist/components/Toast/Toast.js

@@ -1,5 +1,5 @@
 import { jsx as a } from "react/jsx-runtime";
-import "../../packages/ui-kit/dist-react/index.js";
+import "@cupra/ui-kit/react/ds-toast";
 function e(t) {
   const { className: o, ...s } = t;
   return /* @__PURE__ */ a("ds-toast-react", { class: o, ...s });

package/dist/components/ToastMessage/ToastMessage.d.ts

@@ -1,6 +1,6 @@
 import { DsToastMessageAttrs } from '@cupra/ui-kit/react/types/ds-toast-message';
 import { type ReactNode } from 'react';
-import '@cupra/ui-kit/react';
+import '@cupra/ui-kit/react/ds-toast-message';
 export type ToastMessageProps = DsToastMessageAttrs & {
     className?: string;
     children?: ReactNode;

package/dist/components/ToastMessage/ToastMessage.js

@@ -1,13 +1,14 @@
 import { jsx as m } from "react/jsx-runtime";
-import "../../packages/ui-kit/dist-react/index.js";
+import "@cupra/ui-kit/react/ds-toast-message";
+import "@cupra/ui-kit/react/utils/breakpoints";
 import "react";
 import { useHandleEvent as n } from "../../hooks/useHandleEvent.js";
-function f(o) {
-  const { className: s, children: e, onClose: t, ...r } = o, { ref: a } = n({
-    "toast:remove": t
+function d(o) {
+  const { className: s, children: t, onClose: e, ...r } = o, { ref: a } = n({
+    "toast:remove": e
   });
-  return /* @__PURE__ */ m("ds-toast-message-react", { ref: a, class: s, ...r, children: e });
+  return /* @__PURE__ */ m("ds-toast-message-react", { ref: a, class: s, ...r, children: t });
 }
 export {
-  f as ToastMessage
+  d as ToastMessage
 };

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

@@ -1,5 +1,5 @@
 import { type ReactElement } from 'react';
-import '@cupra/ui-kit/react';
+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;

package/dist/components/ToggleButton/ToggleButton.js

@@ -1,11 +1,12 @@
 import { jsx as e } from "react/jsx-runtime";
+import "@cupra/ui-kit/react/utils/breakpoints";
 import "react";
 import { useHandleEvent as n } from "../../hooks/useHandleEvent.js";
-import "../../packages/ui-kit/dist-react/index.js";
-function u({ onChange: t, ...o }) {
+import "@cupra/ui-kit/react/ds-toggle-button";
+function c({ onChange: t, ...o }) {
   const { ref: r } = n({ change: t });
   return /* @__PURE__ */ e("ds-toggle-button-react", { ref: r, ...o });
 }
 export {
-  u as ToggleButton
+  c as ToggleButton
 };

package/dist/components/ToggleSwitch/ToggleSwitch.d.ts

@@ -1,5 +1,5 @@
 import { type ChangeEvent, type ReactElement } from 'react';
-import '@cupra/ui-kit/react';
+import '@cupra/ui-kit/react/ds-toggle-switch';
 import { DsToggleSwitchAttrs } from '@cupra/ui-kit/react/types/ds-toggle-switch';
 type Children = JSX.Element | JSX.Element[] | string;
 interface ToggleSwitchProps extends DsToggleSwitchAttrs {

package/dist/components/ToggleSwitch/ToggleSwitch.js

@@ -1,19 +1,20 @@
-import { jsxs as f, jsx as t } from "react/jsx-runtime";
+import { jsxs as f, jsx as n } from "react/jsx-runtime";
+import "@cupra/ui-kit/react/utils/breakpoints";
 import "react";
 import { useHandleEvent as c } from "../../hooks/useHandleEvent.js";
-import "../../packages/ui-kit/dist-react/index.js";
-function r({ label: n, onChange: i, ...o }) {
+import "@cupra/ui-kit/react/ds-toggle-switch";
+function r({ label: t, onChange: i, ...o }) {
   const { ref: e } = c({ change: i });
   return /* @__PURE__ */ f("ds-toggle-switch-react", { ref: e, ...o, children: [
-    n && /* @__PURE__ */ t("div", { slot: "label", children: n }),
+    t && /* @__PURE__ */ n("div", { slot: "label", children: t }),
     o.children
   ] });
 }
-function l({ children: n }) {
-  return /* @__PURE__ */ t("div", { slot: "off", children: n });
+function l({ children: t }) {
+  return /* @__PURE__ */ n("div", { slot: "off", children: t });
 }
-function s({ children: n }) {
-  return /* @__PURE__ */ t("div", { slot: "on", children: n });
+function s({ children: t }) {
+  return /* @__PURE__ */ n("div", { slot: "on", children: t });
 }
 r.Off = l;
 r.On = s;

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

@@ -1,11 +1,31 @@
-import { type ReactElement } from 'react';
-import '@cupra/ui-kit/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;
-}
-export declare function Tooltip({ children, onClickCancelButton, onClickConfirmButton, ...restProps }: TooltipProps): ReactElement;
-export {};
+import { type IconButtonProps } from '../IconButton/IconButton';
+export type TooltipProps = DsTooltipAttrs & {
+    children: ReactNode;
+};
+export type CloseButtonProps = Omit<IconButtonProps, 'icon-name'>;
+export declare const Tooltip: {
+    ({ children, ...restProps }: TooltipProps): ReactElement;
+    Header: {
+        ({ children, ...props }: {
+            children?: ReactNode;
+        } & HTMLAttributes<HTMLDivElement>): JSX.Element;
+        displayName: string;
+    };
+    CloseButton: {
+        (props: CloseButtonProps): ReactElement;
+        displayName: string;
+    };
+    Content: {
+        ({ children, ...props }: {
+            children?: ReactNode;
+        } & HTMLAttributes<HTMLDivElement>): JSX.Element;
+        displayName: string;
+    };
+    Img: {
+        ({ alt, ...props }: ImgHTMLAttributes<HTMLImageElement>): ReactElement;
+        displayName: string;
+    };
+};

package/dist/components/Tooltip/Tooltip.js

@@ -1,24 +1,15 @@
-import { jsx as t } from "react/jsx-runtime";
-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 "../../packages/ui-kit/dist-react/index.js";
-const l = p.div`
-    display: flex;
-    align-items: center;
-`;
-function u({
-  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(l, { children: o }) });
-}
+import { jsx as e } from "react/jsx-runtime";
+import "@cupra/ui-kit/react/ds-tooltip";
+import { IconButton as a } from "../IconButton/IconButton.js";
+const n = ({ children: t, ...o }) => /* @__PURE__ */ e("ds-tooltip-react", { ...o, children: t }), r = ({ children: t, ...o }) => /* @__PURE__ */ e("div", { slot: "header", ...o, children: t }), s = (t) => /* @__PURE__ */ e(a, { slot: "close-button", "icon-name": "cross", ...t }), l = ({ children: t, ...o }) => /* @__PURE__ */ e("div", { slot: "content", ...o, children: t }), i = ({ alt: t, ...o }) => /* @__PURE__ */ e("img", { alt: t ?? "", slot: "image", ...o });
+n.Header = r;
+n.CloseButton = s;
+n.Content = l;
+n.Img = i;
+r.displayName = "Tooltip.Header";
+s.displayName = "Tooltip.CloseButton";
+l.displayName = "Tooltip.Content";
+i.displayName = "Tooltip.Img";
 export {
-  u as Tooltip
+  n 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

@@ -1,4 +1,5 @@
 export * from './Accordion/Accordion';
+export * from './Badge/Badge';
 export * from './Bullets/Bullets';
 export * from './Button/Button';
 export * from './CarouselIndicator/CarouselIndicator';
@@ -18,6 +19,7 @@ export * from './Input/Input';
 export * from './LinkButton/LinkButton';
 export * from './Loader/Loader';
 export * from './Logo/Logo';
+export * from './MainTitle/MainTitle';
 export * from './MapPin/MapPin';
 export * from './Modal/Modal';
 export * from './PasswordInput/PasswordInput';
@@ -25,6 +27,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/hooks/useBreakpoint.js

@@ -1,20 +1,20 @@
-import { breakpoints as o } from "../packages/ui-kit/dist-react/utils/breakpoints.js";
+import { breakpoints as a } from "@cupra/ui-kit/react/utils/breakpoints";
 import { useState as m, useLayoutEffect as d } from "react";
-const a = ["xs", "s", "m", "l", "xl", "xxl"];
+const o = ["xs", "s", "m", "l", "xl", "xxl"];
 function c() {
-  const s = {};
-  return a.forEach((n, t) => {
-    const r = `(min-width: ${o[n]}px)`;
+  const n = {};
+  return o.forEach((s, t) => {
+    const r = `(min-width: ${a[s]}px)`;
     let e = "";
-    if (t < a.length - 1) {
-      const i = a[t + 1];
-      e = ` and (max-width: ${o[i] - 1}px)`;
+    if (t < o.length - 1) {
+      const i = o[t + 1];
+      e = ` and (max-width: ${a[i] - 1}px)`;
     }
-    s[n] = window.matchMedia(r + e);
-  }), s;
+    n[s] = window.matchMedia(r + e);
+  }), n;
 }
 const p = () => {
-  const [s, n] = m(() => {
+  const [n, s] = m(() => {
     const t = c();
     let r = "";
     return Object.keys(t).forEach((e) => {
@@ -24,7 +24,7 @@ const p = () => {
   return d(() => {
     const t = c(), r = Object.keys(t).map((e) => {
       const i = (u) => {
-        u.matches && n(e);
+        u.matches && s(e);
       };
       return t[e].addListener(i), () => {
         t[e].removeListener(i);
@@ -35,7 +35,7 @@ const p = () => {
         e();
       });
     };
-  }, []), s;
+  }, []), n;
 };
 export {
   p as useBreakpoint

package/dist/hooks/useHandleEvent.js

@@ -1,24 +1,24 @@
-import { useRef as u, useEffect as l } from "react";
-function d(e) {
-  const o = u(null), n = u(e);
+import { useRef as f, useEffect as l } from "react";
+function d(n) {
+  const t = f(null), e = f(n);
   return l(() => {
-    n.current = e;
-  }, [e]), l(() => {
-    const t = o.current;
-    if (!t) return;
-    const c = {};
-    return Object.keys(n.current).forEach((r) => {
-      const s = (i) => {
-        const f = n.current[r];
-        f && f(i);
+    e.current = n;
+  }, [n]), l(() => {
+    const c = t.current;
+    if (!c) return;
+    const o = {};
+    return Object.keys(e.current).forEach((r) => {
+      const u = (i) => {
+        const s = e.current[r];
+        s && s(i);
       };
-      c[r] = s, t.addEventListener(r, s);
+      o[r] = u, c.addEventListener(r, u);
     }), () => {
-      Object.keys(c).forEach((r) => {
-        t.removeEventListener(r, c[r]);
+      Object.keys(o).forEach((r) => {
+        c.removeEventListener(r, o[r]);
       });
     };
-  }, []), { ref: o };
+  }, [t.current, e.current]), { ref: t };
 }
 export {
   d as useHandleEvent