@cupra/ui-react 2.0.0-canary.100 → 2.0.0-canary.102

package/dist/esm/components/MediaControl/MediaControl.js

@@ -1,12 +1,18 @@
-import { jsx as n } from "react/jsx-runtime";
-import "@cupra/ui-kit/react/utils/breakpoints";
-import "react";
-import { useHandleEvent as m } 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-media-control";
-function u(o) {
-  const { className: r, onPlay: t, onPause: e, ...s } = o, { ref: a } = m({ "ds-media-control:play": t, "ds-media-control:pause": e });
-  return /* @__PURE__ */ n("ds-media-control-react", { ref: a, class: r, ...s });
+//#region src/components/MediaControl/MediaControl.tsx
+function n(n) {
+	let { className: r, onPlay: i, onPause: a, ...o } = n, { ref: s } = e({
+		"ds-media-control:play": i,
+		"ds-media-control:pause": a
+	});
+	return /* @__PURE__ */ t("ds-media-control-react", {
+		ref: s,
+		class: r,
+		...o
+	});
 }
-export {
-  u as MediaControl
-};
+//#endregion
+export { n as MediaControl };

package/dist/esm/components/Modal/Modal.js

@@ -1,13 +1,12 @@
+import { useHandleEvent as e } from "../../hooks/useHandleEvent.js";
+import "../../hooks/index.js";
+import { dt as t } 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 { jsx as n } from "react/jsx-runtime";
-import "@cupra/ui-kit/react/utils/breakpoints";
-import "react";
-import { useHandleEvent as f } 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 { createPortal as r } from "react-dom";
 import "@cupra/ui-kit/react/ds-modal";
-import { createPortal as C } from "react-dom";
-function e() {
-}
-const k = p.div`
+//#region src/components/Modal/Modal.tsx
+function i() {}
+var a = t.div`
     margin: 0;
     width: 100%;
     height: 100%;
@@ -16,36 +15,40 @@ const k = p.div`
     left: 50%;
     transform: translate(-50%, -50%);
 `;
-function l(t) {
-  const {
-    children: o,
-    onClickCloseButton: i = e,
-    onClickConfirmButton: s = e,
-    onClickCancelButton: u = e,
-    className: m,
-    withPortal: a,
-    ...r
-  } = t, { ref: d } = f({
-    "click-close-button": i,
-    "click-confirm-button": s,
-    "click-cancel-button": u
-  });
-  if (!r.open) return null;
-  const c = /* @__PURE__ */ n("ds-modal-react", { ref: d, class: m, ...r, children: o });
-  return a ? C(c, document.body) : c;
+function o(t) {
+	let { children: a, onClickCloseButton: o = i, onClickConfirmButton: s = i, onClickCancelButton: c = i, className: l, withPortal: u, ...d } = t, { ref: f } = e({
+		"click-close-button": o,
+		"click-confirm-button": s,
+		"click-cancel-button": c
+	});
+	if (!d.open) return null;
+	let p = /* @__PURE__ */ n("ds-modal-react", {
+		ref: f,
+		class: l,
+		...d,
+		children: a
+	});
+	return u ? r(p, document.body) : p;
 }
-function b({ children: t }) {
-  return /* @__PURE__ */ n("div", { slot: "title", children: t });
+function s({ children: e }) {
+	return /* @__PURE__ */ n("div", {
+		slot: "title",
+		children: e
+	});
 }
-function h({ className: t = "", children: o }) {
-  return /* @__PURE__ */ n("div", { slot: "content", className: `ds-scroll ${t}`.trim(), children: o });
+function c({ className: e = "", children: t }) {
+	return /* @__PURE__ */ n("div", {
+		slot: "content",
+		className: `ds-scroll ${e}`.trim(),
+		children: t
+	});
 }
-function v({ children: t }) {
-  return /* @__PURE__ */ n(k, { slot: "content", children: t });
+function l({ children: e }) {
+	return /* @__PURE__ */ n(a, {
+		slot: "content",
+		children: e
+	});
 }
-l.Title = b;
-l.Content = h;
-l.FullScreenContent = v;
-export {
-  l as Modal
-};
+o.Title = s, o.Content = c, o.FullScreenContent = l;
+//#endregion
+export { o as Modal };

package/dist/esm/components/NavigationControls/NavigationControls.js

@@ -1,9 +1,13 @@
-import { jsx as s } from "react/jsx-runtime";
+import { jsx as e } from "react/jsx-runtime";
 import "@cupra/ui-kit/react/ds-navigation-controls";
-function c(o) {
-  const { className: r, children: t, ...n } = o;
-  return /* @__PURE__ */ s("ds-navigation-controls-react", { class: r, ...n, children: t });
+//#region src/components/NavigationControls/NavigationControls.tsx
+function t(t) {
+	let { className: n, children: r, ...i } = t;
+	return /* @__PURE__ */ e("ds-navigation-controls-react", {
+		class: n,
+		...i,
+		children: r
+	});
 }
-export {
-  c as NavigationControls
-};
+//#endregion
+export { t as NavigationControls };

package/dist/esm/components/PasswordInput/PasswordInput.js

@@ -1,40 +1,32 @@
-import { jsxs as x, jsx as i } 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-password-input";
-import "@cupra/ui-kit/react/utils/breakpoints";
-import "react";
-import { useHandleEvent as b } from "../../hooks/useHandleEvent.js";
-function L(l) {
-  const {
-    className: d,
-    children: w,
-    onChange: c,
-    onInput: u,
-    inputId: e,
-    placeHolder: r,
-    value: t,
-    label: m,
-    required: n,
-    disabled: o,
-    pattern: p,
-    maxLength: s,
-    minLength: a,
-    ...h
-  } = l, { ref: f } = b({ change: c, input: u }), g = {
-    type: "password",
-    ...!!e && { id: e },
-    ...!!r && { placeholder: r },
-    ...!!t && { value: t },
-    ...!!n && { required: n },
-    ...!!o && { disabled: o },
-    ...!!a && { minLength: a },
-    ...!!s && { maxLength: s },
-    ...!!p && { pattern: p }
-  };
-  return /* @__PURE__ */ x("ds-password-input-react", { ref: f, class: d, ...h, children: [
-    /* @__PURE__ */ i("label", { htmlFor: e, children: m }),
-    /* @__PURE__ */ i("input", { ...g })
-  ] });
+//#region src/components/PasswordInput/PasswordInput.tsx
+function r(r) {
+	let { className: i, children: a, onChange: o, onInput: s, inputId: c, placeHolder: l, value: u, label: d, required: f, disabled: p, pattern: m, maxLength: h, minLength: g, ..._ } = r, { ref: v } = e({
+		change: o,
+		input: s
+	}), y = {
+		type: "password",
+		...!!c && { id: c },
+		...!!l && { placeholder: l },
+		...!!u && { value: u },
+		...!!f && { required: f },
+		...!!p && { disabled: p },
+		...!!g && { minLength: g },
+		...!!h && { maxLength: h },
+		...!!m && { pattern: m }
+	};
+	return /* @__PURE__ */ n("ds-password-input-react", {
+		ref: v,
+		class: i,
+		..._,
+		children: [/* @__PURE__ */ t("label", {
+			htmlFor: c,
+			children: d
+		}), /* @__PURE__ */ t("input", { ...y })]
+	});
 }
-export {
-  L as PasswordInput
-};
+//#endregion
+export { r as PasswordInput };

package/dist/esm/components/PickerItem/PickerItem.js

@@ -1,21 +1,16 @@
-import { jsx as n } from "react/jsx-runtime";
+import { useHandleEvent as e } from "../../hooks/useHandleEvent.js";
+import { jsx as t } from "react/jsx-runtime";
 import "@cupra/ui-kit/react/ds-picker-item";
-import { useHandleEvent as m } from "../../hooks/useHandleEvent.js";
-function a(r) {
-  const { className: i, children: t, onClick: s, size: e, ...c } = r, { ref: o } = m({
-    "ds-picker-item:click": s
-  });
-  return /* @__PURE__ */ n(
-    "ds-picker-item-react",
-    {
-      ref: o,
-      size: typeof e == "string" ? e : JSON.stringify(e),
-      class: i,
-      ...c,
-      children: t
-    }
-  );
+//#region src/components/PickerItem/PickerItem.tsx
+function n(n) {
+	let { className: r, children: i, onClick: a, size: o, ...s } = n, { ref: c } = e({ "ds-picker-item:click": a });
+	return /* @__PURE__ */ t("ds-picker-item-react", {
+		ref: c,
+		size: typeof o == "string" ? o : JSON.stringify(o),
+		class: r,
+		...s,
+		children: i
+	});
 }
-export {
-  a as PickerItem
-};
+//#endregion
+export { n as PickerItem };

package/dist/esm/components/Radio/Radio.js

@@ -1,15 +1,22 @@
-import { jsx as s } from "react/jsx-runtime";
-import "@cupra/ui-kit/react/utils/breakpoints";
-import "react";
 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-radio";
-const i = ({ children: o, onChange: r, className: t, ...a }) => {
-  const { ref: n } = e({ change: r });
-  return /* @__PURE__ */ s("ds-radio-group-react", { ref: n, class: t, ...a, children: o });
-}, c = ({ children: o, className: r, ...t }) => /* @__PURE__ */ s("ds-radio-react", { class: r, ...t, children: o }), l = {
-  Group: i,
-  Button: c
-};
-export {
-  l as Radio
+var n = {
+	Group: ({ children: n, onChange: r, className: i, ...a }) => {
+		let { ref: o } = e({ change: r });
+		return /* @__PURE__ */ t("ds-radio-group-react", {
+			ref: o,
+			class: i,
+			...a,
+			children: n
+		});
+	},
+	Button: ({ children: e, className: n, ...r }) => /* @__PURE__ */ t("ds-radio-react", {
+		class: n,
+		...r,
+		children: e
+	})
 };
+//#endregion
+export { n as Radio };

package/dist/esm/components/RadioButton/RadioButton.js

@@ -1,10 +1,15 @@
-import { jsx as a } from "react/jsx-runtime";
+import { useHandleEvent as e } from "../../hooks/useHandleEvent.js";
+import { jsx as t } from "react/jsx-runtime";
 import "@cupra/ui-kit/react/ds-radio-button";
-import { useHandleEvent as c } from "../../hooks/useHandleEvent.js";
-function p(o) {
-  const { className: t, children: r, onChange: n, ...e } = o, { ref: s } = c({ change: n });
-  return /* @__PURE__ */ a("ds-radio-button-react", { ref: s, class: t, ...e, children: r });
+//#region src/components/RadioButton/RadioButton.tsx
+function n(n) {
+	let { className: r, children: i, onChange: a, ...o } = n, { ref: s } = e({ change: a });
+	return /* @__PURE__ */ t("ds-radio-button-react", {
+		ref: s,
+		class: r,
+		...o,
+		children: i
+	});
 }
-export {
-  p as RadioButton
-};
+//#endregion
+export { n as RadioButton };

package/dist/esm/components/RadioButtonGroup/RadioButtonGroup.js

@@ -1,10 +1,15 @@
-import { jsx as a } from "react/jsx-runtime";
+import { useHandleEvent as e } from "../../hooks/useHandleEvent.js";
+import { jsx as t } from "react/jsx-runtime";
 import "@cupra/ui-kit/react/ds-radio-button-group";
-import { useHandleEvent as c } from "../../hooks/useHandleEvent.js";
-function m(o) {
-  const { className: r, children: t, onChange: n, ...e } = o, { ref: s } = c({ change: n });
-  return /* @__PURE__ */ a("ds-radio-button-group-react", { ref: s, class: r, ...e, children: t });
+//#region src/components/RadioButtonGroup/RadioButtonGroup.tsx
+function n(n) {
+	let { className: r, children: i, onChange: a, ...o } = n, { ref: s } = e({ change: a });
+	return /* @__PURE__ */ t("ds-radio-button-group-react", {
+		ref: s,
+		class: r,
+		...o,
+		children: i
+	});
 }
-export {
-  m as RadioButtonGroup
-};
+//#endregion
+export { n as RadioButtonGroup };

package/dist/esm/components/Rating/Rating.js

@@ -1,9 +1,12 @@
-import { jsx as s } from "react/jsx-runtime";
+import { jsx as e } from "react/jsx-runtime";
 import "@cupra/ui-kit/react/ds-rating";
-function c(r) {
-  const { className: t, ...o } = r;
-  return /* @__PURE__ */ s("ds-rating-react", { class: t, ...o });
+//#region src/components/Rating/Rating.tsx
+function t(t) {
+	let { className: n, ...r } = t;
+	return /* @__PURE__ */ e("ds-rating-react", {
+		class: n,
+		...r
+	});
 }
-export {
-  c as Rating
-};
+//#endregion
+export { t as Rating };

package/dist/esm/components/Search/Search.js

@@ -1,8 +1,13 @@
-import { jsx as s } from "react/jsx-runtime";
+import { jsx as e } from "react/jsx-runtime";
 import { forwardRef as t } from "react";
 import "@cupra/ui-kit/react/ds-search";
-const c = t(({ onInput: r, className: a, ...e }, o) => /* @__PURE__ */ s("ds-search-react", { ref: o, class: a, onInput: r, ...e }));
-c.displayName = "Search";
-export {
-  c as Search
-};
+//#region src/components/Search/Search.tsx
+var n = t(({ onInput: t, className: n, ...r }, i) => /* @__PURE__ */ e("ds-search-react", {
+	ref: i,
+	class: n,
+	onInput: t,
+	...r
+}));
+n.displayName = "Search";
+//#endregion
+export { n as Search };

package/dist/esm/components/SearchInput/SearchInput.js

@@ -1,47 +1,31 @@
+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-search-input";
-import "@cupra/ui-kit/react/utils/breakpoints";
-import "react";
-import { useHandleEvent as g } from "../../hooks/useHandleEvent.js";
-function I(e) {
-  const {
-    className: n,
-    children: x,
-    onChange: r,
-    onInput: o,
-    onClickPositionButton: i,
-    placeHolder: p,
-    type: P,
-    value: a,
-    label: c,
-    required: l,
-    disabled: s,
-    pattern: u,
-    maxLength: h,
-    minLength: d,
-    inputProps: m,
-    ...b
-  } = e, { ref: f } = g({
-    change: r,
-    input: o,
-    "ds-search-input:click-position-button": i
-  });
-  return /* @__PURE__ */ t("ds-search-input-react", { ref: f, class: n, ...b, children: /* @__PURE__ */ t(
-    "input",
-    {
-      type: "text",
-      "aria-label": c,
-      placeholder: p,
-      value: a,
-      required: l,
-      disabled: s,
-      minLength: d,
-      maxLength: h,
-      pattern: u,
-      ...m
-    }
-  ) });
+//#region src/components/SearchInput/SearchInput.tsx
+function n(n) {
+	let { className: r, children: i, onChange: a, onInput: o, onClickPositionButton: s, placeHolder: c, type: l, value: u, label: d, required: f, disabled: p, pattern: m, maxLength: h, minLength: g, inputProps: _, ...v } = n, { ref: y } = e({
+		change: a,
+		input: o,
+		"ds-search-input:click-position-button": s
+	});
+	return /* @__PURE__ */ t("ds-search-input-react", {
+		ref: y,
+		class: r,
+		...v,
+		children: /* @__PURE__ */ t("input", {
+			type: "text",
+			"aria-label": d,
+			placeholder: c,
+			value: u,
+			required: f,
+			disabled: p,
+			minLength: g,
+			maxLength: h,
+			pattern: m,
+			..._
+		})
+	});
 }
-export {
-  I as SearchInput
-};
+//#endregion
+export { n as SearchInput };

package/dist/esm/components/SecondaryNavigation/SecondaryNavigation.js

@@ -1,17 +1,25 @@
-import { jsx as o, Fragment as a } from "react/jsx-runtime";
-import { Children as m } from "react";
+import { useHandleEvent as e } from "../../hooks/useHandleEvent.js";
+import "../../hooks/index.js";
+import { Fragment as t, jsx as n } from "react/jsx-runtime";
+import { Children as r } from "react";
 import "@cupra/ui-kit/react/ds-secondary-navigation";
-import "@cupra/ui-kit/react/utils/breakpoints";
-import { useHandleEvent as d } from "../../hooks/useHandleEvent.js";
-function e(t) {
-  const { className: n, children: r, onSelect: s, ...i } = t, { ref: c } = d({
-    "ds-secondary-navigation:select": s
-  });
-  return /* @__PURE__ */ o("ds-secondary-navigation-react", { ref: c, class: n, ...i, children: r });
+//#region src/components/SecondaryNavigation/SecondaryNavigation.tsx
+function i(t) {
+	let { className: r, children: i, onSelect: a, ...o } = t, { ref: s } = e({ "ds-secondary-navigation:select": a });
+	return /* @__PURE__ */ n("ds-secondary-navigation-react", {
+		ref: s,
+		class: r,
+		...o,
+		children: i
+	});
 }
-const l = ({ children: t, ...n }) => /* @__PURE__ */ o("a", { slot: "items", ...n, children: t }), p = ({ children: t }) => /* @__PURE__ */ o(a, { children: m.map(t, (n, r) => /* @__PURE__ */ o("div", { slot: "actions", children: n }, r)) });
-e.Item = l;
-e.Actions = p;
-export {
-  e as SecondaryNavigation
-};
+i.Item = ({ children: e, ...t }) => /* @__PURE__ */ n("a", {
+	slot: "items",
+	...t,
+	children: e
+}), i.Actions = ({ children: e }) => /* @__PURE__ */ n(t, { children: r.map(e, (e, t) => /* @__PURE__ */ n("div", {
+	slot: "actions",
+	children: e
+}, t)) });
+//#endregion
+export { i as SecondaryNavigation };

package/dist/esm/components/SegmentedControl/SegmentedControl.js

@@ -1,12 +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-segmented-control";
-import "@cupra/ui-kit/react/utils/breakpoints";
-import "react";
-import { useHandleEvent as c } from "../../hooks/useHandleEvent.js";
-function f(e) {
-  const { onChange: o, className: r, children: t, ...n } = e, { ref: s } = c({ change: o });
-  return /* @__PURE__ */ m("ds-segmented-control-react", { ref: s, class: r, ...n, children: t });
+//#region src/components/SegmentedControl/SegmentedControl.tsx
+function n(n) {
+	let { onChange: r, className: i, children: a, ...o } = n, { ref: s } = e({ change: r });
+	return /* @__PURE__ */ t("ds-segmented-control-react", {
+		ref: s,
+		class: i,
+		...o,
+		children: a
+	});
 }
-export {
-  f as SegmentedControl
-};
+//#endregion
+export { n as SegmentedControl };

package/dist/esm/components/Select/Select.js

@@ -1,6 +1,9 @@
-import { jsx as r } from "react/jsx-runtime";
+import { jsx as e } from "react/jsx-runtime";
 import "@cupra/ui-kit/react/ds-select";
-const s = ({ children: t, ...e }) => /* @__PURE__ */ r("ds-select-react", { ...e, children: t });
-export {
-  s as Select
-};
+//#region src/components/Select/Select.tsx
+var t = ({ children: t, ...n }) => /* @__PURE__ */ e("ds-select-react", {
+	...n,
+	children: t
+});
+//#endregion
+export { t as Select };

package/dist/esm/components/Selection/Selection.js

@@ -1,9 +1,12 @@
-import { jsx as t } from "react/jsx-runtime";
+import { jsx as e } from "react/jsx-runtime";
 import "@cupra/ui-kit/react/ds-selection";
-function i(e) {
-  const { className: o, children: s, ...r } = e;
-  return /* @__PURE__ */ t("ds-selection-react", { class: o, ...r });
+//#region src/components/Selection/Selection.tsx
+function t(t) {
+	let { className: n, children: r, ...i } = t;
+	return /* @__PURE__ */ e("ds-selection-react", {
+		class: n,
+		...i
+	});
 }
-export {
-  i as Selection
-};
+//#endregion
+export { t as Selection };

package/dist/esm/components/SidebarNavigation/SidebarNavigation.js

@@ -1,15 +1,29 @@
 import { jsx as e } from "react/jsx-runtime";
 import "@cupra/ui-kit/react/ds-sidebar-navigation";
-function s(t) {
-  const { className: i, children: r, ...n } = t;
-  return /* @__PURE__ */ e("ds-sidebar-navigation-react", { class: i, ...n, children: r });
+//#region src/components/SidebarNavigation/SidebarNavigation.tsx
+function t(t) {
+	let { className: n, children: r, ...i } = t;
+	return /* @__PURE__ */ e("ds-sidebar-navigation-react", {
+		class: n,
+		...i,
+		children: r
+	});
 }
-const o = ({ children: t }) => /* @__PURE__ */ e("div", { slot: "aside-text", children: t }), a = ({ children: t }) => /* @__PURE__ */ e("div", { slot: "aside-icon", children: t }), d = ({ children: t }) => /* @__PURE__ */ e("div", { slot: "aside-helper-text", children: t }), c = ({ children: t }) => /* @__PURE__ */ e("div", { slot: "main-cta", children: t }), l = ({ children: t }) => /* @__PURE__ */ e("div", { slot: "ctas", children: t });
-s.AsideText = o;
-s.AsideIcon = a;
-s.AsideHelperText = d;
-s.MainCta = c;
-s.Ctas = l;
-export {
-  s as SidebarNavigation
-};
+t.AsideText = ({ children: t }) => /* @__PURE__ */ e("div", {
+	slot: "aside-text",
+	children: t
+}), t.AsideIcon = ({ children: t }) => /* @__PURE__ */ e("div", {
+	slot: "aside-icon",
+	children: t
+}), t.AsideHelperText = ({ children: t }) => /* @__PURE__ */ e("div", {
+	slot: "aside-helper-text",
+	children: t
+}), t.MainCta = ({ children: t }) => /* @__PURE__ */ e("div", {
+	slot: "main-cta",
+	children: t
+}), t.Ctas = ({ children: t }) => /* @__PURE__ */ e("div", {
+	slot: "ctas",
+	children: t
+});
+//#endregion
+export { t as SidebarNavigation };

package/dist/esm/components/Skeleton/Skeleton.js

@@ -1,8 +1,11 @@
-import { jsx as o } from "react/jsx-runtime";
+import { jsx as e } from "react/jsx-runtime";
 import "@cupra/ui-kit/react/ds-skeleton";
-function s({ className: t, ...e }) {
-  return /* @__PURE__ */ o("ds-skeleton-react", { class: t, ...e });
+//#region src/components/Skeleton/Skeleton.tsx
+function t({ className: t, ...n }) {
+	return /* @__PURE__ */ e("ds-skeleton-react", {
+		class: t,
+		...n
+	});
 }
-export {
-  s as Skeleton
-};
+//#endregion
+export { t as Skeleton };