@cupra/ui-react 1.0.0-canary.2 → 1.0.0-canary.21

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,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/dist/hooks/useHandleEvent.js

@@ -1,23 +1,25 @@
-import { useRef as d, useEffect as f } from "react";
-function s(o) {
-  const r = d(null);
-  return f(() => {
-    const n = {};
-    return Object.keys(o).forEach((c) => {
-      var l;
-      const t = (E) => {
-        var u;
-        (u = o[c]) == null || u.call(o, E);
+import { useRef as f, useEffect as l } from "react";
+function d(n) {
+  const t = f(null), e = f(n);
+  return l(() => {
+    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);
       };
-      n[c] = t, (l = r == null ? void 0 : r.current) == null || l.addEventListener(c, t);
+      o[r] = u, c.addEventListener(r, u);
     }), () => {
-      Object.keys(n).forEach((c) => {
-        var t;
-        (t = r == null ? void 0 : r.current) == null || t.removeEventListener(c, n[c]);
+      Object.keys(o).forEach((r) => {
+        c.removeEventListener(r, o[r]);
       });
     };
-  }, [r, o]), { ref: r };
+  }, [t.current, e.current]), { ref: t };
 }
 export {
-  s as useHandleEvent
+  d as useHandleEvent
 };

package/package.json

@@ -1,15 +1,26 @@
 {
   "name": "@cupra/ui-react",
-  "version": "1.0.0-canary.2",
+  "version": "1.0.0-canary.21",
   "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",
+    "THIRD_PARTY_LICENSES.MD",
     "README.md",
     "dist"
   ],
@@ -31,12 +42,12 @@
     }
   ],
   "peerDependencies": {
-    "react": ">= 18.3.1 < 19",
-    "react-dom": ">= 18.3.1 < 19"
+    "react": ">= 18.3.1 < 20",
+    "react-dom": ">= 18.3.1 < 20",
+    "@cupra/ui-kit": "1.0.0-canary.12"
   },
   "dependencies": {
-    "styled-components": "^6.1.16",
-    "@cupra/ui-kit": "1.0.0-canary.2"
+    "styled-components": "^6.1.16"
   },
   "devDependencies": {
     "@storybook/addon-docs": "^8.6.14",
@@ -49,18 +60,18 @@
     "@testing-library/user-event": "^14.6.1",
     "@types/react": "^18.3.20",
     "@types/react-dom": "^18.3.5",
-    "generate-license-file": "^4.1.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "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.12"
   },
   "scripts": {
     "build": "rm -rf dist && tsc --declaration --emitDeclarationOnly && vite build --emptyOutDir false",
     "test": "npx vitest run",
-    "generate-licenses": "pnpm generate-license-file --input package.json --output THIRD_PARTY_LICENSES.MD --overwrite --ci",
+    "generate-licenses": "npx generate-license-file --input package.json --output THIRD_PARTY_LICENSES.MD --overwrite --ci",
     "storybook": "storybook dev -p 6006",
     "build-storybook:cupra-diagonal": "storybook build --output-dir dist-storybook/cupra-diagonal"
   }