@cupra/ui-react 2.0.0-canary.12 → 2.0.0-canary.120

package/dist/esm/components/TextInput/TextInput.js

@@ -1,45 +1,34 @@
-import { jsxs as y, jsx as t } from "react/jsx-runtime";
+import { useHandleEvent as e } from "../../hooks/useHandleEvent.js";
+import "../../hooks/index.js";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
 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 k(n) {
-  const {
-    className: r,
-    children: I,
-    onChange: o,
-    onInput: p,
-    onKeyDown: i,
-    inputId: e,
-    placeHolder: l,
-    type: a,
-    value: d,
-    label: s,
-    required: c,
-    disabled: m,
-    pattern: u,
-    maxLength: h,
-    minLength: x,
-    ...f
-  } = 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(
-      "input",
-      {
-        id: e,
-        type: a || "text",
-        placeholder: l,
-        value: d,
-        required: c,
-        disabled: m,
-        minLength: x,
-        maxLength: h,
-        pattern: u
-      }
-    )
-  ] });
+//#region src/components/TextInput/TextInput.tsx
+function r(r) {
+	let { className: i, children: a, onChange: o, onInput: s, onKeyDown: c, inputId: l, placeHolder: u, type: d, value: f, label: p, required: m, disabled: h, readOnly: g, pattern: _, maxLength: v, minLength: y, ...b } = r, { ref: x } = e({
+		change: o,
+		input: s,
+		keydown: c
+	});
+	return /* @__PURE__ */ n("ds-text-input-react", {
+		ref: x,
+		class: i,
+		...b,
+		children: [/* @__PURE__ */ t("label", {
+			htmlFor: l,
+			children: p
+		}), /* @__PURE__ */ t("input", {
+			id: l,
+			type: d || "text",
+			placeholder: u,
+			value: f,
+			required: m,
+			disabled: h,
+			readOnly: g,
+			minLength: y,
+			maxLength: v,
+			pattern: _
+		})]
+	});
 }
-export {
-  k as TextInput
-};
+//#endregion
+export { r as TextInput };

package/dist/esm/components/Textarea/Textarea.js

@@ -1,58 +1,36 @@
-import { jsxs as E, jsx as r } from "react/jsx-runtime";
+import { useHandleEvent as e } from "../../hooks/useHandleEvent.js";
+import "../../hooks/index.js";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
 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 F(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
-          }
-        )
-      ]
-    }
-  );
+//#region src/components/Textarea/Textarea.tsx
+function r(r) {
+	let { className: i, children: a, onChange: o, onInput: s, textareaId: c, placeholder: l, value: u, label: d, required: f, disabled: p, readOnly: m, minLength: h, maxLength: g, rows: _, cols: v, forcedError: y, helperText: b, invalidError: x, ...S } = r, { ref: C } = e({
+		change: o,
+		input: s
+	});
+	return /* @__PURE__ */ n("ds-textarea-react", {
+		ref: C,
+		class: i,
+		"forced-error": y,
+		"helper-text": b,
+		"invalid-error": x,
+		...S,
+		children: [/* @__PURE__ */ t("label", {
+			htmlFor: c,
+			children: d
+		}), /* @__PURE__ */ t("textarea", {
+			id: c,
+			placeholder: l,
+			value: u,
+			required: f,
+			disabled: p,
+			readOnly: m,
+			minLength: h,
+			maxLength: g,
+			rows: _,
+			cols: v
+		})]
+	});
 }
-export {
-  F as Textarea
-};
+//#endregion
+export { r as Textarea };

package/dist/esm/components/ThemeProvider/ThemeProvider.js

@@ -1,6 +1,9 @@
-import { jsx as o } from "react/jsx-runtime";
+import { jsx as e } from "react/jsx-runtime";
 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
-};
+//#region src/components/ThemeProvider/ThemeProvider.tsx
+var t = ({ children: t, ...n }) => /* @__PURE__ */ e("ds-theme-provider-react", {
+	...n,
+	children: t
+});
+//#endregion
+export { t as ThemeProvider };

package/dist/esm/components/Toast/Toast.js

@@ -1,16 +1,15 @@
-import { jsx as a } from "react/jsx-runtime";
+import { jsx as e } from "react/jsx-runtime";
 import "@cupra/ui-kit/react/ds-toast";
-function e(t) {
-  const { className: o, ...s } = t;
-  return /* @__PURE__ */ a("ds-toast-react", { class: o, ...s });
+//#region src/components/Toast/Toast.tsx
+function t(t) {
+	let { className: n, ...r } = t;
+	return /* @__PURE__ */ e("ds-toast-react", {
+		class: n,
+		...r
+	});
 }
-e.add = (t) => {
-  window.dispatchEvent(
-    new CustomEvent("toast:add", {
-      detail: t
-    })
-  );
-};
-export {
-  e as Toast
+t.add = (e) => {
+	window.dispatchEvent(new CustomEvent("toast:add", { detail: e }));
 };
+//#endregion
+export { t as Toast };

package/dist/esm/components/ToastMessage/ToastMessage.js

@@ -1,14 +1,16 @@
-import { jsx as m } from "react/jsx-runtime";
+import { useHandleEvent as e } from "../../hooks/useHandleEvent.js";
+import "../../hooks/index.js";
+import { jsx as t } 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 });
+//#region src/components/ToastMessage/ToastMessage.tsx
+function n(n) {
+	let { className: r, children: i, onClose: a, ...o } = n, { ref: s } = e({ "toast:remove": a });
+	return /* @__PURE__ */ t("ds-toast-message-react", {
+		ref: s,
+		class: r,
+		...o,
+		children: i
+	});
 }
-export {
-  d as ToastMessage
-};
+//#endregion
+export { n as ToastMessage };

package/dist/esm/components/ToggleButton/ToggleButton.js

@@ -1,12 +1,14 @@
-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 { useHandleEvent as e } from "../../hooks/useHandleEvent.js";
+import "../../hooks/index.js";
+import { jsx as t } from "react/jsx-runtime";
 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 });
+//#region src/components/ToggleButton/ToggleButton.tsx
+function n({ onChange: n, ...r }) {
+	let { ref: i } = e({ change: n });
+	return /* @__PURE__ */ t("ds-toggle-button-react", {
+		ref: i,
+		...r
+	});
 }
-export {
-  c as ToggleButton
-};
+//#endregion
+export { n as ToggleButton };

package/dist/esm/components/ToggleSwitch/ToggleSwitch.js

@@ -1,23 +1,31 @@
-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 { useHandleEvent as e } from "../../hooks/useHandleEvent.js";
+import "../../hooks/index.js";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
 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
-  ] });
+//#region src/components/ToggleSwitch/ToggleSwitch.tsx
+function r({ label: r, onChange: i, ...a }) {
+	let { ref: o } = e({ change: i });
+	return /* @__PURE__ */ n("ds-toggle-switch-react", {
+		ref: o,
+		...a,
+		children: [r && /* @__PURE__ */ t("div", {
+			slot: "label",
+			children: r
+		}), a.children]
+	});
 }
-function l({ children: t }) {
-  return /* @__PURE__ */ n("div", { slot: "off", children: t });
+function i({ children: e }) {
+	return /* @__PURE__ */ t("div", {
+		slot: "off",
+		children: e
+	});
 }
-function s({ children: t }) {
-  return /* @__PURE__ */ n("div", { slot: "on", children: t });
+function a({ children: e }) {
+	return /* @__PURE__ */ t("div", {
+		slot: "on",
+		children: e
+	});
 }
-r.Off = l;
-r.On = s;
-export {
-  r as ToggleSwitch
-};
+r.Off = i, r.On = a;
+//#endregion
+export { r as ToggleSwitch };

package/dist/esm/components/Tooltip/Tooltip.js

@@ -1,15 +1,27 @@
-import { jsx as e } from "react/jsx-runtime";
+import { IconButton as e } from "../IconButton/IconButton.js";
+import { jsx as t } 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 {
-  n as Tooltip
-};
+//#region src/components/Tooltip/Tooltip.tsx
+var n = ({ children: e, ...n }) => /* @__PURE__ */ t("ds-tooltip-react", {
+	...n,
+	children: e
+}), r = ({ children: e, ...n }) => /* @__PURE__ */ t("div", {
+	slot: "header",
+	...n,
+	children: e
+}), i = (n) => /* @__PURE__ */ t(e, {
+	slot: "close-button",
+	"icon-name": "cross",
+	...n
+}), a = ({ children: e, ...n }) => /* @__PURE__ */ t("div", {
+	slot: "content",
+	...n,
+	children: e
+}), o = ({ alt: e, ...n }) => /* @__PURE__ */ t("img", {
+	alt: e ?? "",
+	slot: "image",
+	...n
+});
+n.Header = r, n.CloseButton = i, n.Content = a, n.Img = o, r.displayName = "Tooltip.Header", i.displayName = "Tooltip.CloseButton", a.displayName = "Tooltip.Content", o.displayName = "Tooltip.Img";
+//#endregion
+export { n as Tooltip };

package/dist/esm/components/ValueUnit/ValueUnit.js

@@ -0,0 +1,19 @@
+import { jsx as e, jsxs as t } from "react/jsx-runtime";
+import "@cupra/ui-kit/react/ds-value-unit";
+//#region src/components/ValueUnit/ValueUnit.tsx
+function n(n) {
+	let { className: r, value: i, unit: a, ...o } = n;
+	return /* @__PURE__ */ t("ds-value-unit-react", {
+		class: r,
+		...o,
+		children: [/* @__PURE__ */ e("span", {
+			slot: "value",
+			children: i
+		}), /* @__PURE__ */ e("span", {
+			slot: "unit",
+			children: a
+		})]
+	});
+}
+//#endregion
+export { n as ValueUnit };

package/dist/esm/components/index.js

@@ -0,0 +1,76 @@
+import "./Accordion/Accordion.js";
+import "./Badge/Badge.js";
+import "./BasicCard/BasicCard.js";
+import "./BasicCardImage/BasicCardImage.js";
+import "./BasicCardHeader/BasicCardHeader.js";
+import "./BasicCardSection/BasicCardSection.js";
+import "./Breadcrumbs/Breadcrumbs.js";
+import "./BreadcrumbsItem/BreadcrumbsItem.js";
+import "./Bullets/Bullets.js";
+import "./Button/Button.js";
+import "./Calendar/Calendar.js";
+import "./CarouselIndicator/CarouselIndicator.js";
+import "./Checkbox/Checkbox.js";
+import "./CheckboxGroup/CheckboxGroup.js";
+import "./Chip/Chip.js";
+import "./Chips/Chips.js";
+import "./Currency/Currency.js";
+import "./DatePicker/DatePicker.js";
+import "./Dialog/Dialog.js";
+import "./DialogBody/DialogBody.js";
+import "./DialogFooter/DialogFooter.js";
+import "./DialogFullscreen/DialogFullscreen.js";
+import "./DialogHeader/DialogHeader.js";
+import "./Divider/Divider.js";
+import "./Drawer/Drawer.js";
+import "./FavouriteAction/FavouriteAction.js";
+import "./Hyperlink/Hyperlink.js";
+import "./Icon/Icon.js";
+import "./IconButton/IconButton.js";
+import "./Input/Input.js";
+import "./List/List.js";
+import "./ListItem/ListItem.js";
+import "./LinkButton/LinkButton.js";
+import "./Loader/Loader.js";
+import "./Logo/Logo.js";
+import "./MainTitle/MainTitle.js";
+import "./MapPin/MapPin.js";
+import "./MediaControl/MediaControl.js";
+import "./Modal/Modal.js";
+import "./PasswordInput/PasswordInput.js";
+import "./PickerItem/PickerItem.js";
+import "./Radio/Radio.js";
+import "./RadioButton/RadioButton.js";
+import "./RadioButtonGroup/RadioButtonGroup.js";
+import "./Rating/Rating.js";
+import "./Search/Search.js";
+import "./SearchInput/SearchInput.js";
+import "./SecondaryNavigation/SecondaryNavigation.js";
+import "./SegmentedControl/SegmentedControl.js";
+import "./Select/Select.js";
+import "./Selection/Selection.js";
+import "./Skeleton/Skeleton.js";
+import "./Slider/Slider.js";
+import "./Table/Table.js";
+import "./TableCell/TableCell.js";
+import "./TableRow/TableRow.js";
+import "./Tabs/Tabs.js";
+import "./Tag/Tag.js";
+import "./Text/Text.js";
+import "./TextInput/TextInput.js";
+import "./Textarea/Textarea.js";
+import "./ThemeProvider/ThemeProvider.js";
+import "./ToggleButton/ToggleButton.js";
+import "./ToggleSwitch/ToggleSwitch.js";
+import "./Tooltip/Tooltip.js";
+import "./ValueUnit/ValueUnit.js";
+import "./Toast/Toast.js";
+import "./ToastMessage/ToastMessage.js";
+import "./InlineAlert/InlineAlert.js";
+import "./Avatar/Avatar.js";
+import "./StaticBox/StaticBox.js";
+import "./Stepper/Stepper.js";
+import "./InteractiveCard/InteractiveCard.js";
+import "./SidebarNavigation/SidebarNavigation.js";
+import "./IconButtonGroup/IconButtonGroup.js";
+import "./NavigationControls/NavigationControls.js";

package/dist/esm/hooks/index.js

@@ -0,0 +1,5 @@
+import "./useHandleEvent.js";
+import "./useBreakpoint.js";
+import "./useEventListeners.js";
+import "./useLoadScript.js";
+import "./useResizeObserver/useResizeObserver.js";

package/dist/esm/hooks/useBreakpoint.js

@@ -1,42 +1,43 @@
-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;
+import { useLayoutEffect as e, useState as t } from "react";
+import { breakpoints as n } from "@cupra/ui-kit/react/utils/breakpoints";
+//#region src/hooks/useBreakpoint.ts
+var r = [
+	"xs",
+	"s",
+	"m",
+	"l",
+	"xl",
+	"xxl"
+];
+function i() {
+	let e = {};
+	return r.forEach((t, i) => {
+		let a = `(min-width: ${n[t]}px)`, o = "";
+		i < r.length - 1 && (o = ` and (max-width: ${n[r[i + 1]] - 1}px)`), e[t] = window.matchMedia(a + o);
+	}), e;
 }
-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
+var a = () => {
+	let [n, r] = t(() => {
+		let e = i(), t = "";
+		return Object.keys(e).forEach((n) => {
+			e[n].matches && (t = n);
+		}), t;
+	});
+	return e(() => {
+		let e = i(), t = Object.keys(e).map((t) => {
+			let n = (e) => {
+				e.matches && r(t);
+			};
+			return e[t].addListener(n), () => {
+				e[t].removeListener(n);
+			};
+		});
+		return () => {
+			t.forEach((e) => {
+				e();
+			});
+		};
+	}, []), n;
 };
+//#endregion
+export { a as useBreakpoint };

package/dist/esm/hooks/useEventListeners.js

@@ -1,26 +1,21 @@
-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
+import { useEffect as e } from "react";
+//#region src/hooks/useEventListeners.ts
+var t = (t) => {
+	e(() => {
+		let e = [];
+		return t.forEach((t) => {
+			let { eventName: n, handler: r, options: i, target: a = document } = t, o = (e) => {
+				r(e);
+			};
+			a.addEventListener(n, o, i), e.push(() => {
+				a.removeEventListener(n, o, i);
+			});
+		}), () => {
+			e.forEach((e) => {
+				e();
+			});
+		};
+	}, t.flatMap(({ dependencies: e }) => e ?? []));
 };
+//#endregion
+export { t as useEventListeners };