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

package/dist/components/ToastMessage/ToastMessage.js

@@ -0,0 +1,14 @@
+import { jsx as m } from "react/jsx-runtime";
+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 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: t });
+}
+export {
+  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

@@ -0,0 +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 "@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 {
+  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

@@ -0,0 +1,23 @@
+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 "@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: [
+    t && /* @__PURE__ */ n("div", { slot: "label", children: t }),
+    o.children
+  ] });
+}
+function l({ children: t }) {
+  return /* @__PURE__ */ n("div", { slot: "off", children: t });
+}
+function s({ children: t }) {
+  return /* @__PURE__ */ n("div", { slot: "on", children: t });
+}
+r.Off = l;
+r.On = s;
+export {
+  r as ToggleSwitch
+};

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

@@ -0,0 +1,25 @@
+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 "@cupra/ui-kit/react/ds-tooltip";
+const m = p.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 }) });
+}
+export {
+  x as Tooltip
+};

package/dist/hooks/useBreakpoint.js

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

package/dist/hooks/useEventListeners.js

@@ -0,0 +1,26 @@
+import { useEffect as p } from "react";
+const E = (n) => {
+  p(
+    () => {
+      const e = [];
+      return n.forEach((t) => {
+        const { eventName: o, handler: a, options: r, target: s = document } = t, c = (i) => {
+          a(i);
+        };
+        s.addEventListener(o, c, r);
+        const u = () => {
+          s.removeEventListener(o, c, r);
+        };
+        e.push(u);
+      }), () => {
+        e.forEach((t) => {
+          t();
+        });
+      };
+    },
+    n.flatMap(({ dependencies: e }) => e ?? [])
+  );
+};
+export {
+  E as useEventListeners
+};

package/dist/hooks/useHandleEvent.js

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

package/dist/hooks/useResizeObserver/useResizeObserver.js

@@ -0,0 +1,14 @@
+import { useEffect as s } from "react";
+function o(t) {
+  const { callback: r, element: n } = t;
+  s(() => {
+    if (!n) return;
+    const e = new ResizeObserver(r);
+    return e.observe(n), () => {
+      e == null || e.disconnect();
+    };
+  }, [n, r]);
+}
+export {
+  o as useResizeObserver
+};

package/dist/index.d.ts

@@ -1,4 +1,2 @@
 export * from './components';
 export * from './hooks';
-export declare const CupraUiReact: Record<string, any>;
-export default CupraUiReact;