@cupra/ui-react 1.0.0-canary.16 → 1.0.0-canary.17

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

package/dist/components/Tooltip/Tooltip.js

@@ -1,13 +1,14 @@
 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 "../../packages/ui-kit/dist-react/index.js";
-const l = p.div`
+import "@cupra/ui-kit/react/ds-tooltip";
+const m = p.div`
     display: flex;
     align-items: center;
 `;
-function u({
+function x({
   children: o,
   onClickCancelButton: r,
   onClickConfirmButton: i,
@@ -17,8 +18,8 @@ function u({
     "click-cancel-button": r,
     "click-confirm-button": i
   });
-  return /* @__PURE__ */ t("ds-tooltip-react", { ref: n, ...e, children: /* @__PURE__ */ t(l, { children: o }) });
+  return /* @__PURE__ */ t("ds-tooltip-react", { ref: n, ...e, children: /* @__PURE__ */ t(m, { children: o }) });
 }
 export {
-  u as Tooltip
+  x as Tooltip
 };

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/package.json

@@ -1,12 +1,23 @@
 {
   "name": "@cupra/ui-react",
-  "version": "1.0.0-canary.16",
+  "version": "1.0.0-canary.17",
   "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",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    },
+    "./*": {
+      "import": "./dist/components/*/*.js",
+      "types": "./dist/components/*/*.d.ts"
+    },
+    "./hooks/*": "./dist/hooks/*.js"
+  },
   "files": [
     "LICENSE",
     "THIRD_PARTY_LICENSES.MD",
@@ -32,11 +43,11 @@
   ],
   "peerDependencies": {
     "react": ">= 18.3.1 < 20",
-    "react-dom": ">= 18.3.1 < 20"
+    "react-dom": ">= 18.3.1 < 20",
+    "@cupra/ui-kit": "1.0.0-canary.10"
   },
   "dependencies": {
-    "styled-components": "^6.1.16",
-    "@cupra/ui-kit": "1.0.0-canary.9"
+    "styled-components": "^6.1.16"
   },
   "devDependencies": {
     "@storybook/addon-docs": "^8.6.14",
@@ -54,7 +65,8 @@
     "shadow-dom-testing-library": "^1.0.0",
     "storybook": "^8.6.14",
     "typescript": "^5.8.2",
-    "vite": "^6.4.1"
+    "vite": "^6.4.1",
+    "@cupra/ui-kit": "1.0.0-canary.10"
   },
   "scripts": {
     "build": "rm -rf dist && tsc --declaration --emitDeclarationOnly && vite build --emptyOutDir false",