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

package/dist/components/DialogFooter/DialogFooter.d.ts

@@ -0,0 +1,9 @@
+import { DsDialogFooterAttrs } from '@cupra/ui-kit/react/types/ds-dialog-footer';
+import { type ReactElement } from 'react';
+import '@cupra/ui-kit/react';
+type DialogFooterProps = DsDialogFooterAttrs & {
+    className?: string;
+    children?: JSX.Element | JSX.Element[] | string;
+};
+export declare function DialogFooter(props: DialogFooterProps): ReactElement;
+export {};

package/dist/components/DialogFooter/DialogFooter.js

@@ -0,0 +1,9 @@
+import { jsx as s } from "react/jsx-runtime";
+import "../../packages/ui-kit/dist-react/index.js";
+function i(o) {
+  const { className: r, children: t, ...e } = o;
+  return /* @__PURE__ */ s("ds-dialog-footer-react", { class: r, ...e, children: t });
+}
+export {
+  i as DialogFooter
+};

package/dist/components/DialogFooter/stories/CupraDiagonal.stories.d.ts

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

package/dist/components/DialogHeader/DialogHeader.d.ts

@@ -0,0 +1,9 @@
+import { DsDialogHeaderAttrs } from '@cupra/ui-kit/react/types/ds-dialog-header';
+import { type ReactElement } from 'react';
+import '@cupra/ui-kit/react';
+type DialogHeaderProps = DsDialogHeaderAttrs & {
+    className?: string;
+    children?: JSX.Element | JSX.Element[] | string;
+};
+export declare function DialogHeader(props: DialogHeaderProps): ReactElement;
+export {};

package/dist/components/DialogHeader/DialogHeader.js

@@ -0,0 +1,9 @@
+import { jsx as s } from "react/jsx-runtime";
+import "../../packages/ui-kit/dist-react/index.js";
+function i(r) {
+  const { className: e, children: o, ...a } = r;
+  return /* @__PURE__ */ s("ds-dialog-header-react", { class: e, ...a, children: o });
+}
+export {
+  i as DialogHeader
+};

package/dist/components/DialogHeader/stories/CupraDiagonal.stories.d.ts

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

package/dist/components/Divider/Divider.d.ts

@@ -0,0 +1,7 @@
+import { DsDividerAttrs } from '@cupra/ui-kit/react/types/ds-divider';
+import { type ReactElement } from 'react';
+import '@cupra/ui-kit/react';
+export interface DividerProps extends DsDividerAttrs {
+    className?: string;
+}
+export declare function Divider({ className, ...rest }: DividerProps): ReactElement;

package/dist/components/Divider/Divider.js

@@ -0,0 +1,8 @@
+import { jsx as t } from "react/jsx-runtime";
+import "../../packages/ui-kit/dist-react/index.js";
+function d({ className: r, ...i }) {
+  return /* @__PURE__ */ t("ds-divider-react", { class: r, ...i });
+}
+export {
+  d as Divider
+};

package/dist/components/Divider/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 PrimaryHorizontal: Story;
+export declare const SecondaryHorizontal: Story;
+export declare const PrimaryVertical: Story;
+export declare const SecondaryVertical: Story;

package/dist/components/Hyperlink/Hyperlink.d.ts

@@ -0,0 +1,8 @@
+import { type ReactElement } from 'react';
+import '@cupra/ui-kit/react';
+import { DsHyperlinkAttrs } from '@cupra/ui-kit/react/types/ds-hyperlink';
+export type HyperlinkProps = DsHyperlinkAttrs & {
+    children: JSX.Element | JSX.Element[] | string;
+    onClick?: (event: CustomEvent) => void;
+};
+export declare function Hyperlink({ children, onClick, ...rest }: HyperlinkProps): ReactElement;

package/dist/components/Hyperlink/Hyperlink.js

@@ -0,0 +1,11 @@
+import { jsx as i } from "react/jsx-runtime";
+import "../../packages/ui-kit/dist-react/index.js";
+import "react";
+import { useHandleEvent as n } from "../../hooks/useHandleEvent.js";
+function l({ children: r, onClick: t, ...e }) {
+  const { ref: o } = n({ click: t });
+  return /* @__PURE__ */ i("ds-hyperlink-react", { ref: o, ...e, children: r });
+}
+export {
+  l as Hyperlink
+};

package/dist/components/Icon/Icon.d.ts

@@ -0,0 +1,7 @@
+import { DsIconAttrs } from '@cupra/ui-kit/react/types/ds-icon';
+import { type ReactElement } from 'react';
+import '@cupra/ui-kit/react';
+export interface IconProps extends DsIconAttrs {
+    className?: string;
+}
+export declare function Icon(props: IconProps): ReactElement;

package/dist/components/Icon/Icon.js

@@ -0,0 +1,9 @@
+import { jsx as e } from "react/jsx-runtime";
+import "../../packages/ui-kit/dist-react/index.js";
+function a(o) {
+  const { "icon-name": n, className: c, ...r } = o;
+  return /* @__PURE__ */ e("ds-icon-react", { "icon-name": n, class: c, ...r });
+}
+export {
+  a as Icon
+};

package/dist/components/Icon/stories/CupraDiagonal.stories.d.ts

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

package/dist/components/IconButton/IconButton.d.ts

@@ -0,0 +1,9 @@
+import { type ReactElement } from 'react';
+import '@cupra/ui-kit/react';
+import { type DsIconButtonAttrs } from '@cupra/ui-kit/react/types/ds-icon-button';
+type IconButtonProps = DsIconButtonAttrs & {
+    className?: string;
+    onClick?: (event: CustomEvent) => void;
+};
+export declare function IconButton(props: IconButtonProps): ReactElement;
+export {};

package/dist/components/IconButton/IconButton.js

@@ -0,0 +1,19 @@
+import { jsx as e } from "react/jsx-runtime";
+import "../../packages/ui-kit/dist-react/index.js";
+import "react";
+import { useHandleEvent as c } from "../../hooks/useHandleEvent.js";
+function l(o) {
+  const { className: r, onClick: n, size: t, ...s } = o, { ref: i } = c({ click: n });
+  return /* @__PURE__ */ e(
+    "ds-icon-button-react",
+    {
+      ref: i,
+      size: typeof t == "string" ? t : JSON.stringify(t),
+      class: r,
+      ...s
+    }
+  );
+}
+export {
+  l as IconButton
+};

package/dist/components/IconButton/stories/CupraDiagonal.stories.d.ts

@@ -0,0 +1,13 @@
+import type { Meta, StoryObj } from '@storybook/react';
+declare const meta: Meta;
+export default meta;
+type Story = StoryObj;
+export declare const Primary: Story;
+export declare const Secondary: Story;
+export declare const Tertiary: Story;
+export declare const Quaternary: Story;
+export declare const Standard: Story;
+export declare const Rounded: Story;
+export declare const Disabled: Story;
+export declare const Medium: Story;
+export declare const Small: Story;

package/dist/components/Input/Input.d.ts

@@ -0,0 +1,11 @@
+import { DsInputAttrs } from '@cupra/ui-kit/react/types/ds-input';
+import '@cupra/ui-kit/react';
+import { ChangeEvent, FormEvent, ForwardRefExoticComponent, KeyboardEvent, RefAttributes } from 'react';
+type InputProps = DsInputAttrs & {
+    className?: string;
+    onInput?: (event: FormEvent<HTMLInputElement>) => void;
+    onKeyDown?: (event: KeyboardEvent<HTMLInputElement>) => void;
+    onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
+};
+export declare const Input: ForwardRefExoticComponent<InputProps & RefAttributes<HTMLElement>>;
+export {};

package/dist/components/Input/Input.js

@@ -0,0 +1,14 @@
+import { jsx as m } from "react/jsx-runtime";
+import "../../packages/ui-kit/dist-react/index.js";
+import { useHandleEvent as s } from "../../hooks/useHandleEvent.js";
+import { forwardRef as i, useImperativeHandle as u } from "react";
+const c = i(
+  ({ className: e, onInput: t, onKeyDown: n, onChange: o, ...p }, a) => {
+    const { ref: r } = s({ input: t, keydown: n, change: o });
+    return u(a, () => r.current, []), /* @__PURE__ */ m("ds-input-react", { ref: r, class: e, ...p });
+  }
+);
+c.displayName = "Input";
+export {
+  c as Input
+};

package/dist/components/InteractiveCard/InteractiveCard.d.ts

@@ -0,0 +1,55 @@
+import type { ReactElement } from 'react';
+import '@cupra/ui-kit/react';
+import type { DsInteractiveCardAttrs } from '@cupra/ui-kit/react/types/ds-interactive-card';
+type Children = JSX.Element | JSX.Element[] | string;
+type InteractiveCardProps = DsInteractiveCardAttrs & {
+    className?: string;
+    children?: Children;
+    onClick?: (event: CustomEvent) => void;
+};
+export declare function InteractiveCard(props: InteractiveCardProps): ReactElement;
+export declare namespace InteractiveCard {
+    var Title: {
+        ({ children }: {
+            children: Children;
+        }): ReactElement;
+        displayName: string;
+    };
+    var Subtitle: {
+        ({ children }: {
+            children: Children;
+        }): ReactElement;
+        displayName: string;
+    };
+    var Meta: {
+        ({ children }: {
+            children: Children;
+        }): ReactElement;
+        displayName: string;
+    };
+    var Content: {
+        ({ children }: {
+            children: Children;
+        }): ReactElement;
+        displayName: string;
+    };
+    var Cta: {
+        ({ children }: {
+            children: Children;
+        }): ReactElement;
+        displayName: string;
+    };
+    var ErrorTitle: {
+        ({ children }: {
+            children: Children;
+        }): ReactElement;
+        displayName: string;
+    };
+    var ErrorText: {
+        ({ children }: {
+            children: Children;
+        }): ReactElement;
+        displayName: string;
+    };
+}
+export {};

package/dist/components/InteractiveCard/InteractiveCard.js

@@ -0,0 +1,26 @@
+import { jsx as r } from "react/jsx-runtime";
+import "react";
+import { useHandleEvent as p } from "../../hooks/useHandleEvent.js";
+import "../../packages/ui-kit/dist-react/index.js";
+function e(t) {
+  const { className: d, children: v, onClick: m, ...C } = t, { ref: u } = p({ click: m });
+  return /* @__PURE__ */ r("ds-interactive-card-react", { ref: u, class: d, ...C, children: v });
+}
+const a = ({ children: t }) => /* @__PURE__ */ r("div", { slot: "title", children: t }), i = ({ children: t }) => /* @__PURE__ */ r("div", { slot: "subtitle", children: t }), n = ({ children: t }) => /* @__PURE__ */ r("div", { slot: "meta", children: t }), o = ({ children: t }) => /* @__PURE__ */ r("div", { slot: "content", children: t }), l = ({ children: t }) => /* @__PURE__ */ r("div", { slot: "cta", children: t }), s = ({ children: t }) => /* @__PURE__ */ r("div", { slot: "error-title", children: t }), c = ({ children: t }) => /* @__PURE__ */ r("div", { slot: "error-text", children: t });
+e.Title = a;
+e.Subtitle = i;
+e.Meta = n;
+e.Content = o;
+e.Cta = l;
+e.ErrorTitle = s;
+e.ErrorText = c;
+a.displayName = "InteractiveCard.Title";
+i.displayName = "InteractiveCard.Subtitle";
+n.displayName = "InteractiveCard.Meta";
+o.displayName = "InteractiveCard.Content";
+l.displayName = "InteractiveCard.Cta";
+s.displayName = "InteractiveCard.ErrorTitle";
+c.displayName = "InteractiveCard.ErrorText";
+export {
+  e as InteractiveCard
+};

package/dist/components/InteractiveCard/stories/CupraDiagonal.stories.d.ts

@@ -0,0 +1,9 @@
+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 WithError: Story;
+export declare const Large: Story;
+export declare const Selected: Story;
+export declare const WithCustomContent: Story;

package/dist/components/LinkButton/LinkButton.d.ts

@@ -0,0 +1,9 @@
+import { type ReactElement } from 'react';
+import '@cupra/ui-kit/react';
+import { DsLinkButtonAttrs } from '@cupra/ui-kit/react/types/ds-link-button';
+type LinkButtonProps = DsLinkButtonAttrs & {
+    children: JSX.Element | JSX.Element[] | string;
+    onClick?: (event: CustomEvent) => void;
+};
+export declare function LinkButton({ children, onClick, ...rest }: LinkButtonProps): ReactElement;
+export {};

package/dist/components/LinkButton/LinkButton.js

@@ -0,0 +1,11 @@
+import { jsx as i } from "react/jsx-runtime";
+import "../../packages/ui-kit/dist-react/index.js";
+import "react";
+import { useHandleEvent as e } from "../../hooks/useHandleEvent.js";
+function f({ children: t, onClick: o, ...r }) {
+  const { ref: n } = e({ click: o });
+  return /* @__PURE__ */ i("ds-link-button-react", { ref: n, ...r, children: t });
+}
+export {
+  f as LinkButton
+};

package/dist/components/LinkButton/stories/CupraDiagonal.stories.d.ts

@@ -0,0 +1,9 @@
+import type { Meta, StoryObj } from '@storybook/react';
+declare const meta: Meta;
+export default meta;
+type Story = StoryObj;
+export declare const Large: Story;
+export declare const Medium: Story;
+export declare const Underline: Story;
+export declare const Disabled: Story;
+export declare const IconLeft: Story;

package/dist/components/Loader/Loader.d.ts

@@ -0,0 +1,20 @@
+import { type ReactElement } from 'react';
+import '@cupra/ui-kit/react';
+import { DsLoaderBarsAttrs } from '@cupra/ui-kit/react/types/ds-loader-bar';
+import { DsLoaderDotsAttrs } from '@cupra/ui-kit/react/types/ds-loader-dots';
+import { DsLoaderLogoAttrs } from '@cupra/ui-kit/react/types/ds-loader-logo';
+import { DsLoaderSpinnerAttrs } from '@cupra/ui-kit/react/types/ds-loader-spinner';
+export declare function LoaderLogo(props: DsLoaderLogoAttrs): ReactElement;
+declare function LoaderBar(props: DsLoaderBarsAttrs): ReactElement;
+declare function LoaderDots(props: DsLoaderDotsAttrs): ReactElement;
+interface DsLoaderSpinnerProps extends DsLoaderSpinnerAttrs {
+    text?: string;
+}
+declare function LoaderSpinner(props: DsLoaderSpinnerProps): ReactElement;
+export declare const Loader: {
+    Logo: typeof LoaderLogo;
+    Bar: typeof LoaderBar;
+    Dots: typeof LoaderDots;
+    Spinner: typeof LoaderSpinner;
+};
+export {};

package/dist/components/Loader/Loader.js

@@ -0,0 +1,24 @@
+import { jsx as e } from "react/jsx-runtime";
+import "../../packages/ui-kit/dist-react/index.js";
+function o(r) {
+  return /* @__PURE__ */ e("ds-loader-logo-react", { ...r });
+}
+function t(r) {
+  return /* @__PURE__ */ e("ds-loader-bar-react", { ...r });
+}
+function n(r) {
+  return /* @__PURE__ */ e("ds-loader-dots-react", { ...r });
+}
+function d(r) {
+  return /* @__PURE__ */ e("ds-loader-spinner-react", { ...r, children: r.text && /* @__PURE__ */ e("div", { slot: "text", children: r.text }) });
+}
+const c = {
+  Logo: o,
+  Bar: t,
+  Dots: n,
+  Spinner: d
+};
+export {
+  c as Loader,
+  o as LoaderLogo
+};

package/dist/components/Logo/Logo.d.ts

@@ -0,0 +1,8 @@
+import { DsLogoAttrs } from '@cupra/ui-kit/react/types/ds-logo';
+import { type ReactElement } from 'react';
+import '@cupra/ui-kit/react';
+type LogoProps = DsLogoAttrs & {
+    className?: string;
+};
+export declare function Logo(props: LogoProps): ReactElement;
+export {};

package/dist/components/Logo/Logo.js

@@ -0,0 +1,9 @@
+import { jsx as t } from "react/jsx-runtime";
+import "../../packages/ui-kit/dist-react/index.js";
+function a(o) {
+  const { className: r, children: c, ...s } = o;
+  return /* @__PURE__ */ t("ds-logo-react", { class: r, ...s });
+}
+export {
+  a as Logo
+};

package/dist/components/Logo/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 XLarge: Story;
+export declare const Large: Story;
+export declare const Medium: Story;
+export declare const Small: Story;
+export declare const XSmall: Story;
+export declare const XXSmall: Story;

package/dist/components/MapPin/MapPin.d.ts

@@ -0,0 +1,8 @@
+import { type ReactElement } from 'react';
+import '@cupra/ui-kit/react';
+import { type DsMapPinAttrs } from '@cupra/ui-kit/react/types/ds-map-pin';
+type MapPinProps = DsMapPinAttrs & {
+    onChange?: (event: CustomEvent) => void;
+};
+export declare function MapPin({ onChange, ...rest }: MapPinProps): ReactElement;
+export {};

package/dist/components/MapPin/MapPin.js

@@ -0,0 +1,11 @@
+import { jsx as o } from "react/jsx-runtime";
+import "react";
+import { useHandleEvent as e } from "../../hooks/useHandleEvent.js";
+import "../../packages/ui-kit/dist-react/index.js";
+function c({ onChange: r, ...t }) {
+  const { ref: n } = e({ change: r });
+  return /* @__PURE__ */ o("ds-map-pin-react", { ref: n, ...t });
+}
+export {
+  c as MapPin
+};

package/dist/components/MapPin/stories/CupraDiagonal.stories.d.ts

@@ -0,0 +1,7 @@
+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 Checked: Story;
+export declare const Cluster: Story;

package/dist/components/Modal/Modal.d.ts

@@ -0,0 +1,26 @@
+import { type ReactElement } from 'react';
+import '@cupra/ui-kit/react';
+import { DsModalAttrs } from '@cupra/ui-kit/react/types/ds-modal';
+type Children = JSX.Element | JSX.Element[] | string;
+interface ModalProps extends DsModalAttrs {
+    children: Children;
+    withPortal?: boolean;
+    className?: string;
+    onClickCloseButton?: (event: CustomEvent) => void;
+    onClickConfirmButton?: (event: CustomEvent) => void;
+    onClickCancelButton?: (event: CustomEvent) => void;
+}
+export declare function Modal(props: Readonly<ModalProps>): ReactElement | null;
+export declare namespace Modal {
+    var Title: ({ children }: {
+        children: Children;
+    }) => ReactElement;
+    var Content: ({ className, children }: {
+        className?: string;
+        children: Children;
+    }) => ReactElement;
+    var FullScreenContent: ({ children }: {
+        children: Children;
+    }) => ReactElement;
+}
+export {};

package/dist/components/Modal/Modal.js

@@ -0,0 +1,49 @@
+import { jsx as n } from "react/jsx-runtime";
+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 "../../packages/ui-kit/dist-react/index.js";
+function e() {
+}
+const C = p.div`
+    margin: 0;
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+`;
+function l(t) {
+  const {
+    children: o,
+    onClickCloseButton: i = e,
+    onClickConfirmButton: s = e,
+    onClickCancelButton: u = e,
+    className: a,
+    withPortal: m,
+    ...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: a, ...r, children: o });
+  return m ? /* @__PURE__ */ n("ds-portal-react", { style: { display: "none" }, children: c }) : c;
+}
+function h({ children: t }) {
+  return /* @__PURE__ */ n("div", { slot: "title", children: t });
+}
+function k({ className: t = "", children: o }) {
+  return /* @__PURE__ */ n("div", { slot: "content", className: `ds-scroll ${t}`.trim(), children: o });
+}
+function b({ children: t }) {
+  return /* @__PURE__ */ n(C, { slot: "content", children: t });
+}
+l.Title = h;
+l.Content = k;
+l.FullScreenContent = b;
+export {
+  l as Modal
+};

package/dist/components/PasswordInput/PasswordInput.d.ts

@@ -0,0 +1,19 @@
+import { DsPasswordInputAttrs } from '@cupra/ui-kit/react/types/ds-password-input';
+import { type ReactElement } from 'react';
+import '@cupra/ui-kit/react';
+type PasswordInputProps = DsPasswordInputAttrs & {
+    className?: string;
+    onChange?: (event: typeof InputEvent) => void;
+    onInput?: (event: typeof InputEvent) => void;
+    inputId: string;
+    placeHolder?: string;
+    value?: string;
+    label: string;
+    required?: boolean;
+    disabled?: boolean;
+    minLength?: number;
+    maxLength?: number;
+    pattern?: string;
+};
+export declare function PasswordInput(props: PasswordInputProps): ReactElement;
+export {};

package/dist/components/PasswordInput/PasswordInput.js

@@ -0,0 +1,42 @@
+import { jsxs as g, jsx as r } from "react/jsx-runtime";
+import "../../packages/ui-kit/dist-react/index.js";
+import "react";
+import { useHandleEvent as x } from "../../hooks/useHandleEvent.js";
+function H(n) {
+  const {
+    className: t,
+    children: b,
+    onChange: o,
+    onInput: s,
+    inputId: e,
+    placeHolder: a,
+    value: p,
+    label: l,
+    required: i,
+    disabled: d,
+    pattern: c,
+    maxLength: u,
+    minLength: h,
+    ...m
+  } = n, { ref: f } = x({ change: o, input: s });
+  return /* @__PURE__ */ g("ds-password-input-react", { ref: f, class: t, ...m, children: [
+    /* @__PURE__ */ r("label", { htmlFor: e, children: l }),
+    /* @__PURE__ */ r(
+      "input",
+      {
+        id: e,
+        type: "password",
+        placeholder: a,
+        value: p,
+        required: i,
+        disabled: d,
+        minLength: h,
+        maxLength: u,
+        pattern: c
+      }
+    )
+  ] });
+}
+export {
+  H as PasswordInput
+};

package/dist/components/PasswordInput/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 WithForcedError: Story;
+export declare const Disabled: Story;
+export declare const Required: Story;
+export declare const WithMaxLength: Story;
+export declare const WithPattern: Story;

package/dist/components/PickerItem/PickerItem.d.ts

@@ -0,0 +1,10 @@
+import type { ReactElement } from 'react';
+import '@cupra/ui-kit/react';
+import type { DsPickerItemAttrs } from '@cupra/ui-kit/react/types/ds-picker-item';
+type PickerItemProps = DsPickerItemAttrs & {
+    className?: string;
+    children: JSX.Element | JSX.Element[] | string;
+    onClick?: (event: CustomEvent) => void;
+};
+export declare function PickerItem(props: PickerItemProps): ReactElement;
+export {};

package/dist/components/PickerItem/PickerItem.js

@@ -0,0 +1,21 @@
+import { jsx as n } from "react/jsx-runtime";
+import "../../packages/ui-kit/dist-react/index.js";
+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
+    }
+  );
+}
+export {
+  a as PickerItem
+};

package/dist/components/PickerItem/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 WithBorder: Story;
+export declare const WithoutBorder: Story;
+export declare const SmallWithBorder: Story;
+export declare const MediumWithBorder: Story;
+export declare const SmallWithoutBorder: Story;
+export declare const MediumWithoutBorder: Story;
+export declare const ResponsiveSize: Story;
+export declare const Selected: Story;