@cupra/ui-react 2.0.0-canary.19 → 2.0.0-canary.190

package/dist/esm/components/StaticBox/StaticBox.js

@@ -1,21 +1,19 @@
-import { jsx as n } from "react/jsx-runtime";
-import "@cupra/ui-kit/react/utils/breakpoints";
+import { useHandleEvent as e } from "../../hooks/useHandleEvent.js";
 import "react";
-import { useHandleEvent as c } from "../../hooks/useHandleEvent.js";
+import { VERSION_TAG_SUFFIX as t } from "@cupra/ui-kit/react/utils/version";
+import { jsx as n } from "react/jsx-runtime";
 import "@cupra/ui-kit/react/ds-static-box";
-function x(r) {
-  const { className: o, children: s, size: t, ...i } = r, { ref: e } = c({});
-  return /* @__PURE__ */ n(
-    "ds-static-box-react",
-    {
-      ref: e,
-      size: typeof t == "string" ? t : JSON.stringify(t),
-      class: o,
-      ...i,
-      children: s
-    }
-  );
+//#region src/components/StaticBox/StaticBox.tsx
+var r = `ds-static-box${t}`;
+function i(t) {
+	let { className: i, children: a, size: o, ...s } = t, { ref: c } = e({});
+	return /* @__PURE__ */ n(r, {
+		ref: c,
+		size: typeof o == "string" ? o : JSON.stringify(o),
+		class: i,
+		...s,
+		children: a
+	});
 }
-export {
-  x as StaticBox
-};
+//#endregion
+export { i as StaticBox };

package/dist/esm/components/Stepper/Stepper.js

@@ -1,6 +1,6 @@
-import { jsx as e } from "react/jsx-runtime";
+import { createDsComponent as e } from "../../core/createDsComponent.js";
 import "@cupra/ui-kit/react/ds-stepper";
-const o = ({ className: r, ...t }) => /* @__PURE__ */ e("ds-stepper-react", { class: r, ...t });
-export {
-  o as Stepper
-};
+//#region src/components/Stepper/Stepper.tsx
+var t = e("ds-stepper");
+//#endregion
+export { t as Stepper };

package/dist/esm/components/Table/Table.js

@@ -0,0 +1,6 @@
+import { createDsComponent as e } from "../../core/createDsComponent.js";
+import "@cupra/ui-kit/react/ds-table";
+//#region src/components/Table/Table.tsx
+var t = e("ds-table");
+//#endregion
+export { t as Table };

package/dist/esm/components/TableCell/TableCell.js

@@ -0,0 +1,6 @@
+import { createDsComponent as e } from "../../core/createDsComponent.js";
+import "@cupra/ui-kit/react/ds-table-cell";
+//#region src/components/TableCell/TableCell.tsx
+var t = e("ds-table-cell");
+//#endregion
+export { t as TableCell };

package/dist/esm/components/TableRow/TableRow.js

@@ -0,0 +1,6 @@
+import { createDsComponent as e } from "../../core/createDsComponent.js";
+import "@cupra/ui-kit/react/ds-table-row";
+//#region src/components/TableRow/TableRow.tsx
+var t = e("ds-table-row");
+//#endregion
+export { t as TableRow };

package/dist/esm/components/Tabs/Tabs.js

@@ -1,20 +1,32 @@
-import { jsx as r } from "react/jsx-runtime";
-import "@cupra/ui-kit/react/utils/breakpoints";
+import { useHandleEvent as e } from "../../hooks/useHandleEvent.js";
 import "react";
-import { useHandleEvent as i } from "../../hooks/useHandleEvent.js";
+import { VERSION_TAG_SUFFIX as t } from "@cupra/ui-kit/react/utils/version";
+import { jsx as n } from "react/jsx-runtime";
 import "@cupra/ui-kit/react/ds-tabs";
-function n({ children: t, onChange: e, ...o }) {
-  const { ref: a } = i({ change: e });
-  return /* @__PURE__ */ r("ds-tabs-react", { ref: a, ...o, children: t });
+//#region src/components/Tabs/Tabs.tsx
+var r = `ds-tabs${t}`;
+function i({ children: t, onChange: i, ...a }) {
+	let { ref: o } = e({ change: i });
+	return /* @__PURE__ */ n(r, {
+		ref: o,
+		...a,
+		children: t
+	});
 }
-function l({ children: t }) {
-  return /* @__PURE__ */ r("div", { role: "tab", slot: "tab", children: t });
+function a({ children: e }) {
+	return /* @__PURE__ */ n("div", {
+		role: "tab",
+		slot: "tab",
+		children: e
+	});
 }
-function p({ children: t }) {
-  return /* @__PURE__ */ r("div", { role: "tabpanel", slot: "panel", children: t });
+function o({ children: e }) {
+	return /* @__PURE__ */ n("div", {
+		role: "tabpanel",
+		slot: "panel",
+		children: e
+	});
 }
-n.Tab = l;
-n.Panel = p;
-export {
-  n as Tabs
-};
+i.Tab = a, i.Panel = o;
+//#endregion
+export { i as Tabs };

package/dist/esm/components/Tag/Tag.js

@@ -1,12 +1,18 @@
-import { jsx as i } from "react/jsx-runtime";
-import "@cupra/ui-kit/react/utils/breakpoints";
+import { useHandleEvent as e } from "../../hooks/useHandleEvent.js";
 import "react";
-import { useHandleEvent as s } from "../../hooks/useHandleEvent.js";
+import { VERSION_TAG_SUFFIX as t } from "@cupra/ui-kit/react/utils/version";
+import { jsx as n } from "react/jsx-runtime";
 import "@cupra/ui-kit/react/ds-tag";
-function d(o) {
-  const { children: r, onClickIcon: t, className: c, ...n } = o, { ref: e } = s({ clickicon: t });
-  return /* @__PURE__ */ i("ds-tag-react", { ref: e, class: c, ...n, children: r });
+//#region src/components/Tag/Tag.tsx
+var r = `ds-tag${t}`;
+function i(t) {
+	let { children: i, onClickIcon: a, className: o, ...s } = t, { ref: c } = e({ clickicon: a });
+	return /* @__PURE__ */ n(r, {
+		ref: c,
+		class: o,
+		...s,
+		children: i
+	});
 }
-export {
-  d as Tag
-};
+//#endregion
+export { i as Tag };

package/dist/esm/components/Text/Text.js

@@ -1,9 +1,6 @@
-import { jsx as s } from "react/jsx-runtime";
+import { createDsComponent as e } from "../../core/createDsComponent.js";
 import "@cupra/ui-kit/react/ds-text";
-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
-};
+//#region src/components/Text/Text.tsx
+var t = e("ds-text");
+//#endregion
+export { t as Text };

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

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

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

@@ -1,58 +1,38 @@
-import { jsxs as E, jsx as r } from "react/jsx-runtime";
-import "@cupra/ui-kit/react/ds-textarea";
-import "@cupra/ui-kit/react/utils/breakpoints";
+import { useHandleEvent as e } from "../../hooks/useHandleEvent.js";
 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
-          }
-        )
-      ]
-    }
-  );
+import { VERSION_TAG_SUFFIX as t } from "@cupra/ui-kit/react/utils/version";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+import "@cupra/ui-kit/react/ds-textarea";
+//#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,6 @@
-import { jsx as o } from "react/jsx-runtime";
+import { createDsComponent as e } from "../../core/createDsComponent.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
-};
+//#region src/components/ThemeProvider/ThemeProvider.tsx
+var t = e("ds-theme-provider");
+//#endregion
+export { t as ThemeProvider };

package/dist/esm/components/ThemeSwitch/ThemeSwitch.js

@@ -0,0 +1,6 @@
+import { createDsComponent as e } from "../../core/createDsComponent.js";
+import "@cupra/ui-kit/react/ds-theme-switch";
+//#region src/components/ThemeSwitch/ThemeSwitch.tsx
+var t = e("ds-theme-switch");
+//#endregion
+export { t as ThemeSwitch };

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

@@ -1,16 +1,18 @@
-import { jsx as a } from "react/jsx-runtime";
+import "react";
+import { VERSION_TAG_SUFFIX as e } from "@cupra/ui-kit/react/utils/version";
+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 "@cupra/ui-kit/react/ds-toast-message";
-import "@cupra/ui-kit/react/utils/breakpoints";
+import { useHandleEvent as e } from "../../hooks/useHandleEvent.js";
 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 });
+import { VERSION_TAG_SUFFIX as t } from "@cupra/ui-kit/react/utils/version";
+import { jsx as n } from "react/jsx-runtime";
+import "@cupra/ui-kit/react/ds-toast-message";
+//#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,6 @@
-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 { createDsComponent as e } from "../../core/createDsComponent.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
-};
+//#region src/components/ToggleButton/ToggleButton.tsx
+var t = e("ds-toggle-button", { events: ["change"] });
+//#endregion
+export { t 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 { useHandleEvent as e } from "../../hooks/useHandleEvent.js";
 import "react";
-import { useHandleEvent as c } from "../../hooks/useHandleEvent.js";
+import { VERSION_TAG_SUFFIX as t } from "@cupra/ui-kit/react/utils/version";
+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,29 @@
-import { jsx as e } from "react/jsx-runtime";
+import { IconButton as e } from "../IconButton/IconButton.js";
+import "react";
+import { VERSION_TAG_SUFFIX as t } from "@cupra/ui-kit/react/utils/version";
+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,22 @@
+import "react";
+import { VERSION_TAG_SUFFIX as e } from "@cupra/ui-kit/react/utils/version";
+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/core/createDsComponent.js

@@ -0,0 +1,35 @@
+import { useHandleEvent as e } from "../hooks/useHandleEvent.js";
+import { forwardRef as t, useCallback as n } from "react";
+import { VERSION_TAG_SUFFIX as r } from "@cupra/ui-kit/react/utils/version";
+import { jsx as i } from "react/jsx-runtime";
+//#region src/core/createDsComponent.tsx
+function a(a, o) {
+	let s = o?.events ?? [];
+	return t((t, c) => {
+		let { className: l, children: u, ...d } = t, f = {};
+		for (let e of s) {
+			let t = `on${e.charAt(0).toUpperCase()}${e.slice(1)}`, n = d[t];
+			delete d[t], n && (f[e] = n);
+		}
+		let { ref: p } = e(f), m = n((e) => {
+			p.current = e, typeof c == "function" ? c(e) : c && (c.current = e);
+		}, [c, p]);
+		if (o?.render) {
+			let e = {
+				Tag: `${a}${r}`,
+				props: d,
+				ref: m,
+				children: u
+			};
+			return o.render(e);
+		}
+		return /* @__PURE__ */ i(`${a}${r}`, {
+			ref: m,
+			class: l,
+			...d,
+			children: u
+		});
+	});
+}
+//#endregion
+export { a as createDsComponent };