@cupra/ui-react 2.0.0-canary.14 → 2.0.0-canary.141

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

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

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

@@ -1,6 +1,10 @@
-import { jsx as o } from "react/jsx-runtime";
+import { VERSION_TAG_SUFFIX as e } from "@cupra/ui-kit";
+import { jsx as t } 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 n = `ds-theme-provider${e}`, r = ({ children: e, ...r }) => /* @__PURE__ */ t(n, {
+	...r,
+	children: e
+});
+//#endregion
+export { r as ThemeProvider };

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

@@ -1,16 +1,17 @@
-import { jsx as a } from "react/jsx-runtime";
+import { VERSION_TAG_SUFFIX as e } from "@cupra/ui-kit";
+import { jsx as t } 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
+var n = `ds-toast${e}`;
+function r(e) {
+	let { className: r, ...i } = e;
+	return /* @__PURE__ */ t(n, {
+		class: r,
+		...i
+	});
 }
-e.add = (t) => {
-  window.dispatchEvent(
-    new CustomEvent("toast:add", {
-      detail: t
-    })
-  );
-};
-export {
-  e as Toast
+r.add = (e) => {
+	window.dispatchEvent(new CustomEvent("toast:add", { detail: e }));
 };
+//#endregion
+export { r as Toast };

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

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

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

@@ -1,12 +1,16 @@
-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 { VERSION_TAG_SUFFIX as t } from "@cupra/ui-kit";
+import { jsx as n } 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
+var r = `ds-toggle-button${t}`;
+function i({ onChange: t, ...i }) {
+	let { ref: a } = e({ change: t });
+	return /* @__PURE__ */ n(r, {
+		ref: a,
+		...i
+	});
 }
-export {
-  c as ToggleButton
-};
+//#endregion
+export { i as ToggleButton };

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

@@ -1,23 +1,33 @@
-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 { VERSION_TAG_SUFFIX as t } from "@cupra/ui-kit";
+import { jsx as n, jsxs as r } 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
+var i = `ds-toggle-switch${t}`;
+function a({ label: t, onChange: a, ...o }) {
+	let { ref: s } = e({ change: a });
+	return /* @__PURE__ */ r(i, {
+		ref: s,
+		...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 o({ children: e }) {
+	return /* @__PURE__ */ n("div", {
+		slot: "off",
+		children: e
+	});
 }
-function s({ children: t }) {
-  return /* @__PURE__ */ n("div", { slot: "on", children: t });
+function s({ children: e }) {
+	return /* @__PURE__ */ n("div", {
+		slot: "on",
+		children: e
+	});
 }
-r.Off = l;
-r.On = s;
-export {
-  r as ToggleSwitch
-};
+a.Off = o, a.On = s;
+//#endregion
+export { a as ToggleSwitch };

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

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

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

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

package/dist/esm/hooks/useHandleEvent.js

@@ -1,25 +1,25 @@
-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);
-      };
-      o[r] = u, c.addEventListener(r, u);
-    }), () => {
-      Object.keys(o).forEach((r) => {
-        c.removeEventListener(r, o[r]);
-      });
-    };
-  }, [t.current, e.current]), { ref: t };
+import { useEffect as e, useRef as t } from "react";
+//#region src/hooks/useHandleEvent.ts
+function n(n) {
+	let r = t(null), i = t(n);
+	return e(() => {
+		i.current = n;
+	}, [n]), e(() => {
+		let e = r.current;
+		if (!e) return;
+		let t = {};
+		return Object.keys(i.current).forEach((n) => {
+			let r = (e) => {
+				let t = i.current[n];
+				t && t(e);
+			};
+			t[n] = r, e.addEventListener(n, r);
+		}), () => {
+			Object.keys(t).forEach((n) => {
+				e.removeEventListener(n, t[n]);
+			});
+		};
+	}, [r.current, i.current]), { ref: r };
 }
-export {
-  d as useHandleEvent
-};
+//#endregion
+export { n as useHandleEvent };

package/dist/esm/hooks/useLoadScript.js

@@ -0,0 +1 @@
+import "react";

package/dist/esm/hooks/useResizeObserver/useResizeObserver.js

@@ -1,14 +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]);
+import { useEffect as e } from "react";
+//#region src/hooks/useResizeObserver/useResizeObserver.ts
+function t(t) {
+	let { callback: n, element: r } = t;
+	e(() => {
+		if (!r) return;
+		let e = new ResizeObserver(n);
+		return e.observe(r), () => {
+			e?.disconnect();
+		};
+	}, [r, n]);
 }
-export {
-  o as useResizeObserver
-};
+//#endregion
+export { t as useResizeObserver };