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

package/dist/components/Tabs/Tabs.js

@@ -0,0 +1,19 @@
+import { jsx as n } from "react/jsx-runtime";
+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 }) {
+  const { ref: a } = i({ change: e });
+  return /* @__PURE__ */ n("ds-tabs-react", { ref: a, ...o, children: t });
+}
+function l({ children: t }) {
+  return /* @__PURE__ */ n("div", { role: "tab", slot: "tab", children: t });
+}
+function s({ children: t }) {
+  return /* @__PURE__ */ n("div", { role: "tabpanel", slot: "panel", children: t });
+}
+r.Tab = l;
+r.Panel = s;
+export {
+  r as Tabs
+};

package/dist/components/Tag/Tag.js

@@ -0,0 +1,11 @@
+import { jsx as s } from "react/jsx-runtime";
+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 });
+}
+export {
+  f as Tag
+};

package/dist/components/Text/Text.js

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

package/dist/components/TextInput/TextInput.js

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

package/dist/components/Textarea/Textarea.js

@@ -0,0 +1,57 @@
+import { jsxs as E, jsx as r } from "react/jsx-runtime";
+import "../../packages/ui-kit/dist-react/index.js";
+import "react";
+import { useHandleEvent as j } from "../../hooks/useHandleEvent.js";
+function C(t) {
+  const {
+    className: o,
+    children: I,
+    onChange: a,
+    onInput: n,
+    textareaId: e,
+    placeholder: l,
+    value: i,
+    label: d,
+    required: s,
+    disabled: c,
+    minLength: h,
+    maxLength: p,
+    rows: m,
+    cols: x,
+    forcedError: u,
+    helperText: f,
+    invalidError: g,
+    ...v
+  } = t, { ref: b } = j({ change: a, input: n });
+  return /* @__PURE__ */ E(
+    "ds-textarea-react",
+    {
+      ref: b,
+      class: o,
+      "forced-error": u,
+      "helper-text": f,
+      "invalid-error": g,
+      ...v,
+      children: [
+        /* @__PURE__ */ r("label", { htmlFor: e, children: d }),
+        /* @__PURE__ */ r(
+          "textarea",
+          {
+            id: e,
+            placeholder: l,
+            value: i,
+            required: s,
+            disabled: c,
+            minLength: h,
+            maxLength: p,
+            rows: m,
+            cols: x
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  C as Textarea
+};

package/dist/components/ThemeProvider/ThemeProvider.js

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

package/dist/components/Toast/Toast.js

@@ -0,0 +1,16 @@
+import { jsx as a } from "react/jsx-runtime";
+import "../../packages/ui-kit/dist-react/index.js";
+function e(t) {
+  const { className: o, ...s } = t;
+  return /* @__PURE__ */ a("ds-toast-react", { class: o, ...s });
+}
+e.add = (t) => {
+  window.dispatchEvent(
+    new CustomEvent("toast:add", {
+      detail: t
+    })
+  );
+};
+export {
+  e as Toast
+};

package/dist/components/ToastMessage/ToastMessage.js

@@ -0,0 +1,13 @@
+import { jsx as m } from "react/jsx-runtime";
+import "../../packages/ui-kit/dist-react/index.js";
+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
+  });
+  return /* @__PURE__ */ m("ds-toast-message-react", { ref: a, class: s, ...r, children: e });
+}
+export {
+  f as ToastMessage
+};

package/dist/components/ToggleButton/ToggleButton.js

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

package/dist/components/ToggleSwitch/ToggleSwitch.js

@@ -0,0 +1,22 @@
+import { jsxs as f, jsx as t } from "react/jsx-runtime";
+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 }) {
+  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 }),
+    o.children
+  ] });
+}
+function l({ children: n }) {
+  return /* @__PURE__ */ t("div", { slot: "off", children: n });
+}
+function s({ children: n }) {
+  return /* @__PURE__ */ t("div", { slot: "on", children: n });
+}
+r.Off = l;
+r.On = s;
+export {
+  r as ToggleSwitch
+};

package/dist/components/Tooltip/Tooltip.js

@@ -0,0 +1,24 @@
+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 }) });
+}
+export {
+  u as Tooltip
+};

package/dist/hooks/useBreakpoint.js

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