@cupra/ui-react 0.0.2-placeholder → 1.0.0-canary.1

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/TextInput/stories/CupraDiagonal.stories.d.ts

@@ -0,0 +1,8 @@
+import type { Meta, StoryObj } from '@storybook/react';
+declare const meta: Meta;
+export default meta;
+type Story = StoryObj;
+export declare const Default: Story;
+export declare const WithValue: Story;
+export declare const Required: Story;
+export declare const Disabled: Story;

package/dist/components/Textarea/Textarea.d.ts

@@ -0,0 +1,20 @@
+import { DsTextareaAttrs } from '@cupra/ui-kit/react/types/ds-textarea';
+import { type ReactElement } from 'react';
+import '@cupra/ui-kit/react';
+type TextareaProps = DsTextareaAttrs & {
+    className?: string;
+    onChange?: (event: typeof InputEvent) => void;
+    onInput?: (event: typeof InputEvent) => void;
+    textareaId: string;
+    placeholder?: string;
+    value?: string;
+    label: string;
+    required?: boolean;
+    disabled?: boolean;
+    minLength?: number;
+    maxLength?: number;
+    rows?: number;
+    cols?: number;
+};
+export declare function Textarea(props: TextareaProps): ReactElement;
+export {};

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/Textarea/stories/CupraDiagonal.stories.d.ts

@@ -0,0 +1,11 @@
+import type { Meta, StoryObj } from '@storybook/react';
+declare const meta: Meta;
+export default meta;
+type Story = StoryObj;
+export declare const Small: Story;
+export declare const WithValue: Story;
+export declare const WithError: Story;
+export declare const Disabled: Story;
+export declare const Required: Story;
+export declare const WithMaxLength: Story;
+export declare const WithMoreRows: Story;

package/dist/components/ThemeProvider/ThemeProvider.d.ts

@@ -0,0 +1,9 @@
+import '@cupra/ui-kit/react';
+import { DsThemeProviderAttrs } from '@cupra/ui-kit/react/types/ds-theme-provider';
+import { type ReactElement } from 'react';
+type Children = JSX.Element | JSX.Element[] | string;
+type ThemeProviderProps = DsThemeProviderAttrs & {
+    children: Children;
+};
+export declare const ThemeProvider: ({ children, ...restProps }: ThemeProviderProps) => ReactElement;
+export {};

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.d.ts

@@ -0,0 +1,11 @@
+import type { DsToastAttrs, ToastOptions } from '@cupra/ui-kit/react/types/ds-toast';
+import { type ReactNode } from 'react';
+import '@cupra/ui-kit/react';
+type ToastProps = DsToastAttrs & {
+    className?: string;
+};
+export declare function Toast(props: ToastProps): ReactNode;
+export declare namespace Toast {
+    var add: (options: ToastOptions) => void;
+}
+export {};

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/Toast/stories/CupraDiagonal.stories.d.ts

@@ -0,0 +1,10 @@
+import type { Meta, StoryObj } from '@storybook/react';
+declare const meta: Meta;
+export default meta;
+type Story = StoryObj;
+export declare const TopRight: Story;
+export declare const TopLeft: Story;
+export declare const BottomRight: Story;
+export declare const BottomLeft: Story;
+export declare const CustomSpacing: Story;
+export declare const WithTemplateReference: Story;

package/dist/components/ToastMessage/ToastMessage.d.ts

@@ -0,0 +1,9 @@
+import { DsToastMessageAttrs } from '@cupra/ui-kit/react/types/ds-toast-message';
+import { type ReactNode } from 'react';
+import '@cupra/ui-kit/react';
+export type ToastMessageProps = DsToastMessageAttrs & {
+    className?: string;
+    children?: ReactNode;
+    onClose?: (event: CustomEvent) => void;
+};
+export declare function ToastMessage(props: ToastMessageProps): ReactNode;

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/ToastMessage/stories/CupraDiagonal.stories.d.ts

@@ -0,0 +1,12 @@
+import type { Meta, StoryObj } from '@storybook/react';
+declare const meta: Meta;
+export default meta;
+type Story = StoryObj;
+export declare const DefaultStatus: Story;
+export declare const SuccessStatus: Story;
+export declare const ErrorStatus: Story;
+export declare const WarningStatus: Story;
+export declare const InfoStatus: Story;
+export declare const WithCustomContent: Story;
+export declare const WithoutLink: Story;
+export declare const WithLongContent: Story;

package/dist/components/ToggleButton/ToggleButton.d.ts

@@ -0,0 +1,8 @@
+import { type ReactElement } from 'react';
+import '@cupra/ui-kit/react';
+import { type DsToggleButtonAttrs } from '@cupra/ui-kit/react/types/ds-toggle-button';
+type ToggleButtonProps = DsToggleButtonAttrs & {
+    onChange?: (event: CustomEvent) => void;
+};
+export declare function ToggleButton({ onChange, ...rest }: ToggleButtonProps): ReactElement;
+export {};

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.d.ts

@@ -0,0 +1,17 @@
+import { type ChangeEvent, type ReactElement } from 'react';
+import '@cupra/ui-kit/react';
+import { DsToggleSwitchAttrs } from '@cupra/ui-kit/react/types/ds-toggle-switch';
+type Children = JSX.Element | JSX.Element[] | string;
+interface ToggleSwitchProps extends DsToggleSwitchAttrs {
+    onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
+}
+export declare function ToggleSwitch({ label, onChange, ...rest }: ToggleSwitchProps): ReactElement;
+export declare namespace ToggleSwitch {
+    var Off: ({ children }: {
+        children: Children;
+    }) => ReactElement;
+    var On: ({ children }: {
+        children: Children;
+    }) => ReactElement;
+}
+export {};

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/ToggleSwitch/stories/CupraDiagonal.stories.d.ts

@@ -0,0 +1,10 @@
+import type { Meta, StoryObj } from '@storybook/react';
+declare const meta: Meta;
+export default meta;
+type Story = StoryObj;
+export declare const Medium: Story;
+export declare const MediumDisabled: Story;
+export declare const MediumDisabledChecked: Story;
+export declare const Small: Story;
+export declare const SmallDisabled: Story;
+export declare const SmallDisabledChecked: Story;

package/dist/components/Tooltip/Tooltip.d.ts

@@ -0,0 +1,11 @@
+import { type ReactElement } from 'react';
+import '@cupra/ui-kit/react';
+import { DsTooltipAttrs } from '@cupra/ui-kit/react/types/ds-tooltip';
+type Children = JSX.Element | JSX.Element[] | string;
+interface TooltipProps extends DsTooltipAttrs {
+    children: Children;
+    onClickCancelButton?: (event: CustomEvent) => void;
+    onClickConfirmButton?: (event: CustomEvent) => void;
+}
+export declare function Tooltip({ children, onClickCancelButton, onClickConfirmButton, ...restProps }: TooltipProps): ReactElement;
+export {};

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/components/index.d.ts

@@ -0,0 +1,50 @@
+export * from './Accordion/Accordion';
+export * from './Bullets/Bullets';
+export * from './Button/Button';
+export * from './CarouselIndicator/CarouselIndicator';
+export * from './Checkbox/Checkbox';
+export * from './Chip/Chip';
+export * from './Chips/Chips';
+export * from './Currency/Currency';
+export * from './Dialog/Dialog';
+export * from './DialogBody/DialogBody';
+export * from './DialogFooter/DialogFooter';
+export * from './DialogHeader/DialogHeader';
+export * from './Divider/Divider';
+export * from './Hyperlink/Hyperlink';
+export * from './Icon/Icon';
+export * from './IconButton/IconButton';
+export * from './Input/Input';
+export * from './LinkButton/LinkButton';
+export * from './Loader/Loader';
+export * from './Logo/Logo';
+export * from './MapPin/MapPin';
+export * from './Modal/Modal';
+export * from './PasswordInput/PasswordInput';
+export * from './PickerItem/PickerItem';
+export * from './Radio/Radio';
+export * from './RadioButton/RadioButton';
+export * from './RadioButtonGroup/RadioButtonGroup';
+export * from './Search/Search';
+export * from './SearchInput/SearchInput';
+export * from './SecondaryNavigation/SecondaryNavigation';
+export * from './SegmentedControl/SegmentedControl';
+export * from './Select/Select';
+export * from './Selection/Selection';
+export * from './Slider/Slider';
+export * from './Tabs/Tabs';
+export * from './Tag/Tag';
+export * from './Text/Text';
+export * from './TextInput/TextInput';
+export * from './Textarea/Textarea';
+export * from './ThemeProvider/ThemeProvider';
+export * from './ToggleButton/ToggleButton';
+export * from './ToggleSwitch/ToggleSwitch';
+export * from './Tooltip/Tooltip';
+export * from './Toast/Toast';
+export * from './ToastMessage/ToastMessage';
+export * from './Avatar/Avatar';
+export * from './StaticBox/StaticBox';
+export * from './Stepper/Stepper';
+export * from './InteractiveCard/InteractiveCard';
+export * from './SidebarNavigation/SidebarNavigation';

package/dist/hooks/index.d.ts

@@ -0,0 +1,5 @@
+export * from './useBreakpoint';
+export * from './useEventListeners';
+export * from './useHandleEvent';
+export * from './useLoadScript';
+export * from './useResizeObserver/useResizeObserver';

package/dist/hooks/useBreakpoint.d.ts

@@ -0,0 +1,3 @@
+type Breakpoint = 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl';
+export declare const useBreakpoint: () => Breakpoint | string;
+export {};

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.d.ts

@@ -0,0 +1,9 @@
+interface EventHandler {
+    eventName: string;
+    handler: (event: MouseEvent | TouchEvent) => void;
+    options?: AddEventListenerOptions;
+    dependencies?: any[];
+    target?: EventTarget;
+}
+export declare const useEventListeners: (eventHandlers: EventHandler[]) => void;
+export {};

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.d.ts

@@ -0,0 +1,5 @@
+type UseHandleEventProps = Record<string, any>;
+export declare function useHandleEvent(eventsMap: UseHandleEventProps): {
+    ref: any;
+};
+export {};

package/dist/hooks/useHandleEvent.js

@@ -0,0 +1,23 @@
+import { useRef as d, useEffect as f } from "react";
+function s(o) {
+  const r = d(null);
+  return f(() => {
+    const n = {};
+    return Object.keys(o).forEach((c) => {
+      var l;
+      const t = (E) => {
+        var u;
+        (u = o[c]) == null || u.call(o, E);
+      };
+      n[c] = t, (l = r == null ? void 0 : r.current) == null || l.addEventListener(c, t);
+    }), () => {
+      Object.keys(n).forEach((c) => {
+        var t;
+        (t = r == null ? void 0 : r.current) == null || t.removeEventListener(c, n[c]);
+      });
+    };
+  }, [r, o]), { ref: r };
+}
+export {
+  s as useHandleEvent
+};

package/dist/hooks/useLoadScript.d.ts

@@ -0,0 +1,2 @@
+declare const useLoadScript: (src: string) => (() => void);
+export default useLoadScript;

package/dist/hooks/useResizeObserver/useResizeObserver.d.ts

@@ -0,0 +1,6 @@
+interface UseResizeObserverFn {
+    callback: () => void;
+    element?: HTMLElement;
+}
+export declare function useResizeObserver(params: UseResizeObserverFn): void;
+export {};

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

@@ -0,0 +1,2 @@
+export * from './components';
+export * from './hooks';