@warp-ds/elements 2.9.1-next.5 → 2.9.1-next.6

package/dist/packages/expandable/react.d.ts

@@ -1,2 +1,8 @@
+import React from 'react';
 import { WarpExpandable } from './expandable.js';
-export declare const Expandable: import("@lit/react").ReactWebComponent<WarpExpandable, {}>;
+export declare const Expandable: React.ForwardRefExoticComponent<Omit<Omit<Omit<React.HTMLAttributes<WarpExpandable>, "renderRoot" | "isUpdatePending" | "hasUpdated" | "addController" | "removeController" | "connectedCallback" | "disconnectedCallback" | "attributeChangedCallback" | "requestUpdate" | "updateComplete" | "updated" | "firstUpdated" | "render" | "renderOptions" | "buttonClass" | "bleed" | "expanded" | "box" | "contentClass" | "noChevron" | "animated" | "headingLevel" | "_hasTitle" | "_showChevronUp" | "_expandableSlot"> & {} & Partial<Omit<WarpExpandable, keyof HTMLElement>> & React.RefAttributes<WarpExpandable>, "ref">, "button-class" | "content-class" | "no-chevron" | "heading-level"> & {
+    buttonClass?: string;
+    contentClass?: string;
+    noChevron?: boolean;
+    headingLevel?: number;
+} & React.RefAttributes<WarpExpandable>>;

package/dist/packages/expandable/react.js

@@ -4,8 +4,17 @@ import React from 'react';
 // decouple from CDN by providing a dummy class
 class Component extends LitElement {
 }
-export const Expandable = createComponent({
+const BaseExpandable = createComponent({
     tagName: 'w-expandable',
     elementClass: Component,
     react: React,
 });
+export const Expandable = React.forwardRef(({ buttonClass, contentClass, noChevron, headingLevel, ...props }, ref) => React.createElement(BaseExpandable, {
+    ...props,
+    ...(buttonClass !== undefined ? { 'button-class': buttonClass } : {}),
+    ...(contentClass !== undefined ? { 'content-class': contentClass } : {}),
+    ...(noChevron ? { 'no-chevron': true } : {}),
+    ...(headingLevel !== undefined ? { 'heading-level': headingLevel } : {}),
+    ref,
+}));
+Expandable.displayName = 'Expandable';

package/dist/packages/link/link.react.stories.d.ts

@@ -3,8 +3,12 @@ import React from 'react';
 import { Link } from './react';
 declare const _default: {
     title: string;
-    render(args: Omit<React.HTMLAttributes<import("./link").WarpLink>, "small" | "disabled" | "renderRoot" | "isUpdatePending" | "hasUpdated" | "addController" | "removeController" | "connectedCallback" | "disconnectedCallback" | "attributeChangedCallback" | "requestUpdate" | "updateComplete" | "firstUpdated" | "render" | "renderOptions" | "target" | "rel" | "variant" | "href" | "fullWidth"> & {} & Partial<Omit<import("./link").WarpLink, keyof HTMLElement>> & React.RefAttributes<import("./link").WarpLink>): React.JSX.Element;
-    component: import("@lit/react").ReactWebComponent<import("./link").WarpLink, {}>;
+    render(args: Omit<Omit<Omit<React.HTMLAttributes<import("./link").WarpLink>, "small" | "disabled" | "renderRoot" | "isUpdatePending" | "hasUpdated" | "addController" | "removeController" | "connectedCallback" | "disconnectedCallback" | "attributeChangedCallback" | "requestUpdate" | "updateComplete" | "firstUpdated" | "render" | "renderOptions" | "target" | "rel" | "variant" | "href" | "fullWidth"> & {} & Partial<Omit<import("./link").WarpLink, keyof HTMLElement>> & React.RefAttributes<import("./link").WarpLink>, "ref">, "full-width"> & {
+        fullWidth?: boolean;
+    } & React.RefAttributes<import("./link").WarpLink>): React.JSX.Element;
+    component: React.ForwardRefExoticComponent<Omit<Omit<Omit<React.HTMLAttributes<import("./link").WarpLink>, "small" | "disabled" | "renderRoot" | "isUpdatePending" | "hasUpdated" | "addController" | "removeController" | "connectedCallback" | "disconnectedCallback" | "attributeChangedCallback" | "requestUpdate" | "updateComplete" | "firstUpdated" | "render" | "renderOptions" | "target" | "rel" | "variant" | "href" | "fullWidth"> & {} & Partial<Omit<import("./link").WarpLink, keyof HTMLElement>> & React.RefAttributes<import("./link").WarpLink>, "ref">, "full-width"> & {
+        fullWidth?: boolean;
+    } & React.RefAttributes<import("./link").WarpLink>>;
 };
 export default _default;
 export type Story = StoryObj<typeof Link>;

package/dist/packages/link/link.react.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/packages/link/link.react.test.js

@@ -0,0 +1,3 @@
+import { describeReactSsrAttributeMapping } from '../../tests/react-ssr-attributes';
+import { Link } from './react.js';
+describeReactSsrAttributeMapping('Link', Link, [{ propName: 'fullWidth', attrName: 'full-width' }]);

package/dist/packages/link/react.d.ts

@@ -1,2 +1,5 @@
+import React from 'react';
 import { WarpLink } from './link.js';
-export declare const Link: import("@lit/react").ReactWebComponent<WarpLink, {}>;
+export declare const Link: React.ForwardRefExoticComponent<Omit<Omit<Omit<React.HTMLAttributes<WarpLink>, "small" | "disabled" | "renderRoot" | "isUpdatePending" | "hasUpdated" | "addController" | "removeController" | "connectedCallback" | "disconnectedCallback" | "attributeChangedCallback" | "requestUpdate" | "updateComplete" | "firstUpdated" | "render" | "renderOptions" | "target" | "rel" | "variant" | "href" | "fullWidth"> & {} & Partial<Omit<WarpLink, keyof HTMLElement>> & React.RefAttributes<WarpLink>, "ref">, "full-width"> & {
+    fullWidth?: boolean;
+} & React.RefAttributes<WarpLink>>;

package/dist/packages/link/react.js

@@ -4,8 +4,14 @@ import React from 'react';
 // decouple from CDN by providing a dummy class
 class Component extends LitElement {
 }
-export const Link = createComponent({
+const BaseLink = createComponent({
     tagName: 'w-link',
     elementClass: Component,
     react: React,
 });
+export const Link = React.forwardRef(({ fullWidth, ...props }, ref) => React.createElement(BaseLink, {
+    ...props,
+    ...(fullWidth ? { 'full-width': true } : {}),
+    ref,
+}));
+Link.displayName = 'Link';

package/dist/packages/modal/modal.react.stories.d.ts

@@ -1,13 +1,17 @@
 import { StoryObj } from '@storybook/react';
+import React from 'react';
 import { Modal } from './react';
 declare const _default: {
     title: string;
-    component: import("@lit/react").ReactWebComponent<import("./modal").ModalMain, {
-        onShown: string;
-        onshown: string;
-        onHidden: string;
-        onhidden: string;
-    }>;
+    component: React.ForwardRefExoticComponent<Omit<Omit<Omit<React.HTMLAttributes<import("./modal").ModalMain>, "open" | "renderRoot" | "isUpdatePending" | "hasUpdated" | "addController" | "removeController" | "connectedCallback" | "disconnectedCallback" | "attributeChangedCallback" | "requestUpdate" | "updateComplete" | "updated" | "render" | "renderOptions" | "show" | "close" | "contentId" | "ignoreBackdropClicks" | "dialogEl" | "dialogInnerEl" | "contentEl" | "onShown" | "onshown" | "onHidden" | "onhidden" | "handleListeners" | "eventPreventer" | "closeOnBackdropClick" | "interceptEscape" | "modifyBorderRadius" | "handleSlotChange"> & {
+        onShown?: (e: Event) => void;
+        onshown?: (e: Event) => void;
+        onHidden?: (e: Event) => void;
+        onhidden?: (e: Event) => void;
+    } & Partial<Omit<import("./modal").ModalMain, keyof HTMLElement>> & React.RefAttributes<import("./modal").ModalMain>, "ref">, "content-id" | "ignore-backdrop-clicks"> & {
+        contentId?: string;
+        ignoreBackdropClicks?: boolean;
+    } & React.RefAttributes<import("./modal").ModalMain>>;
 };
 export default _default;
 export type Story = StoryObj<typeof Modal>;

package/dist/packages/modal/modal.react.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/packages/modal/modal.react.test.js

@@ -0,0 +1,6 @@
+import { describeReactSsrAttributeMapping } from '../../tests/react-ssr-attributes';
+import { Modal } from './react.js';
+describeReactSsrAttributeMapping('Modal', Modal, [
+    { propName: 'contentId', attrName: 'content-id', value: 'modal-content' },
+    { propName: 'ignoreBackdropClicks', attrName: 'ignore-backdrop-clicks' },
+]);

package/dist/packages/modal/react.d.ts

@@ -1,9 +1,13 @@
+import React from 'react';
 import { ModalMain as WarpModal } from './modal.js';
 export { ModalFooter } from '../modal-footer/react.js';
 export { ModalHeader } from '../modal-header/react.js';
-export declare const Modal: import("@lit/react").ReactWebComponent<WarpModal, {
-    onShown: string;
-    onshown: string;
-    onHidden: string;
-    onhidden: string;
-}>;
+export declare const Modal: React.ForwardRefExoticComponent<Omit<Omit<Omit<React.HTMLAttributes<WarpModal>, "open" | "renderRoot" | "isUpdatePending" | "hasUpdated" | "addController" | "removeController" | "connectedCallback" | "disconnectedCallback" | "attributeChangedCallback" | "requestUpdate" | "updateComplete" | "updated" | "render" | "renderOptions" | "show" | "close" | "contentId" | "ignoreBackdropClicks" | "dialogEl" | "dialogInnerEl" | "contentEl" | "onShown" | "onshown" | "onHidden" | "onhidden" | "handleListeners" | "eventPreventer" | "closeOnBackdropClick" | "interceptEscape" | "modifyBorderRadius" | "handleSlotChange"> & {
+    onShown?: (e: Event) => void;
+    onshown?: (e: Event) => void;
+    onHidden?: (e: Event) => void;
+    onhidden?: (e: Event) => void;
+} & Partial<Omit<WarpModal, keyof HTMLElement>> & React.RefAttributes<WarpModal>, "ref">, "content-id" | "ignore-backdrop-clicks"> & {
+    contentId?: string;
+    ignoreBackdropClicks?: boolean;
+} & React.RefAttributes<WarpModal>>;

package/dist/packages/modal/react.js

@@ -7,7 +7,7 @@ export { ModalHeader } from '../modal-header/react.js';
 // decouple from CDN by providing a dummy class
 class Component extends LitElement {
 }
-export const Modal = createComponent({
+const BaseModal = createComponent({
     tagName: 'w-modal',
     elementClass: Component,
     react: React,
@@ -18,3 +18,10 @@ export const Modal = createComponent({
         onhidden: 'hidden',
     },
 });
+export const Modal = React.forwardRef(({ contentId, ignoreBackdropClicks, ...props }, ref) => React.createElement(BaseModal, {
+    ...props,
+    ...(contentId !== undefined ? { 'content-id': contentId } : {}),
+    ...(ignoreBackdropClicks ? { 'ignore-backdrop-clicks': true } : {}),
+    ref,
+}));
+Modal.displayName = 'Modal';

package/dist/packages/modal-header/modal-header.react.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/packages/modal-header/modal-header.react.test.js

@@ -0,0 +1,3 @@
+import { describeReactSsrAttributeMapping } from '../../tests/react-ssr-attributes';
+import { ModalHeader } from './react.js';
+describeReactSsrAttributeMapping('ModalHeader', ModalHeader, [{ propName: 'noClose', attrName: 'no-close' }]);

package/dist/packages/modal-header/react.d.ts

@@ -1,5 +1,8 @@
+import React from 'react';
 import { ModalHeader as WarpModalHeader } from './modal-header.js';
-export declare const ModalHeader: import("@lit/react").ReactWebComponent<WarpModalHeader, {
-    onBackClicked: string;
-    onbackClicked: string;
-}>;
+export declare const ModalHeader: React.ForwardRefExoticComponent<Omit<Omit<Omit<React.HTMLAttributes<WarpModalHeader>, "renderRoot" | "isUpdatePending" | "hasUpdated" | "addController" | "removeController" | "connectedCallback" | "disconnectedCallback" | "attributeChangedCallback" | "requestUpdate" | "updateComplete" | "render" | "renderOptions" | "close" | "back" | "noClose" | "titleEl" | "willUpdate" | "titleClasses" | "backButton" | "closeButton" | "emitBack" | "handleTopSlotChange" | "onBackClicked" | "onbackClicked"> & {
+    onBackClicked?: (e: Event) => void;
+    onbackClicked?: (e: Event) => void;
+} & Partial<Omit<WarpModalHeader, keyof HTMLElement>> & React.RefAttributes<WarpModalHeader>, "ref">, "no-close"> & {
+    noClose?: boolean;
+} & React.RefAttributes<WarpModalHeader>>;

package/dist/packages/modal-header/react.js

@@ -4,7 +4,7 @@ import React from 'react';
 // decouple from CDN by providing a dummy class
 class Component extends LitElement {
 }
-export const ModalHeader = createComponent({
+const BaseModalHeader = createComponent({
     tagName: 'w-modal-header',
     elementClass: Component,
     react: React,
@@ -13,3 +13,9 @@ export const ModalHeader = createComponent({
         onbackClicked: 'backClicked',
     },
 });
+export const ModalHeader = React.forwardRef(({ noClose, ...props }, ref) => React.createElement(BaseModalHeader, {
+    ...props,
+    ...(noClose ? { 'no-close': true } : {}),
+    ref,
+}));
+ModalHeader.displayName = 'ModalHeader';

package/dist/packages/page-indicator/page-indicator.react.stories.d.ts

@@ -3,8 +3,14 @@ import React from 'react';
 import { PageIndicator } from './react';
 declare const _default: {
     title: string;
-    render: ({ pageCount, selectedPage }: Omit<React.HTMLAttributes<import("./page-indicator").WarpPageIndicator>, "renderRoot" | "isUpdatePending" | "hasUpdated" | "addController" | "removeController" | "connectedCallback" | "disconnectedCallback" | "attributeChangedCallback" | "requestUpdate" | "updateComplete" | "render" | "renderOptions" | "selectedPage" | "pageCount"> & {} & Partial<Omit<import("./page-indicator").WarpPageIndicator, keyof HTMLElement>> & React.RefAttributes<import("./page-indicator").WarpPageIndicator>) => React.JSX.Element;
-    component: import("@lit/react").ReactWebComponent<import("./page-indicator").WarpPageIndicator, {}>;
+    render: ({ pageCount, selectedPage }: Omit<Omit<Omit<React.HTMLAttributes<import("./page-indicator").WarpPageIndicator>, "renderRoot" | "isUpdatePending" | "hasUpdated" | "addController" | "removeController" | "connectedCallback" | "disconnectedCallback" | "attributeChangedCallback" | "requestUpdate" | "updateComplete" | "render" | "renderOptions" | "selectedPage" | "pageCount"> & {} & Partial<Omit<import("./page-indicator").WarpPageIndicator, keyof HTMLElement>> & React.RefAttributes<import("./page-indicator").WarpPageIndicator>, "ref">, "selected-page" | "page-count"> & {
+        selectedPage?: number;
+        pageCount?: number;
+    } & React.RefAttributes<import("./page-indicator").WarpPageIndicator>) => React.JSX.Element;
+    component: React.ForwardRefExoticComponent<Omit<Omit<Omit<React.HTMLAttributes<import("./page-indicator").WarpPageIndicator>, "renderRoot" | "isUpdatePending" | "hasUpdated" | "addController" | "removeController" | "connectedCallback" | "disconnectedCallback" | "attributeChangedCallback" | "requestUpdate" | "updateComplete" | "render" | "renderOptions" | "selectedPage" | "pageCount"> & {} & Partial<Omit<import("./page-indicator").WarpPageIndicator, keyof HTMLElement>> & React.RefAttributes<import("./page-indicator").WarpPageIndicator>, "ref">, "selected-page" | "page-count"> & {
+        selectedPage?: number;
+        pageCount?: number;
+    } & React.RefAttributes<import("./page-indicator").WarpPageIndicator>>;
 };
 export default _default;
 export type Story = StoryObj<typeof PageIndicator>;

package/dist/packages/page-indicator/page-indicator.react.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/packages/page-indicator/page-indicator.react.test.js

@@ -0,0 +1,6 @@
+import { describeReactSsrAttributeMapping } from '../../tests/react-ssr-attributes';
+import { PageIndicator } from './react.js';
+describeReactSsrAttributeMapping('PageIndicator', PageIndicator, [
+    { propName: 'selectedPage', attrName: 'selected-page', value: 1 },
+    { propName: 'pageCount', attrName: 'page-count', value: 5 },
+]);

package/dist/packages/page-indicator/react.d.ts

@@ -1,2 +1,6 @@
+import React from 'react';
 import { WarpPageIndicator } from './page-indicator.js';
-export declare const PageIndicator: import("@lit/react").ReactWebComponent<WarpPageIndicator, {}>;
+export declare const PageIndicator: React.ForwardRefExoticComponent<Omit<Omit<Omit<React.HTMLAttributes<WarpPageIndicator>, "renderRoot" | "isUpdatePending" | "hasUpdated" | "addController" | "removeController" | "connectedCallback" | "disconnectedCallback" | "attributeChangedCallback" | "requestUpdate" | "updateComplete" | "render" | "renderOptions" | "selectedPage" | "pageCount"> & {} & Partial<Omit<WarpPageIndicator, keyof HTMLElement>> & React.RefAttributes<WarpPageIndicator>, "ref">, "selected-page" | "page-count"> & {
+    selectedPage?: number;
+    pageCount?: number;
+} & React.RefAttributes<WarpPageIndicator>>;

package/dist/packages/page-indicator/react.js

@@ -4,8 +4,15 @@ import React from 'react';
 // decouple from CDN by providing a dummy class
 class Component extends LitElement {
 }
-export const PageIndicator = createComponent({
+const BasePageIndicator = createComponent({
     tagName: 'w-page-indicator',
     elementClass: Component,
     react: React,
 });
+export const PageIndicator = React.forwardRef(({ selectedPage, pageCount, ...props }, ref) => React.createElement(BasePageIndicator, {
+    ...props,
+    ...(selectedPage !== undefined ? { 'selected-page': selectedPage } : {}),
+    ...(pageCount !== undefined ? { 'page-count': pageCount } : {}),
+    ref,
+}));
+PageIndicator.displayName = 'PageIndicator';

package/dist/packages/pagination/pagination.react.stories.d.ts

@@ -3,14 +3,22 @@ import React from 'react';
 import { Pagination } from './react';
 declare const _default: {
     title: string;
-    render(args: Omit<React.HTMLAttributes<import("./pagination").WarpPagination>, "renderRoot" | "isUpdatePending" | "hasUpdated" | "addController" | "removeController" | "connectedCallback" | "disconnectedCallback" | "attributeChangedCallback" | "requestUpdate" | "updateComplete" | "render" | "renderOptions" | "baseUrl" | "pages" | "currentPageNumber" | "visiblePages" | "onPageClick" | "onpage-click" | "_currentPage" | "_visiblePages" | "shouldShowShowFirstPageButton" | "shouldShowPreviousPageButton" | "shouldShowNextPageButton" | "currentPageIndex" | "visiblePageNumbers"> & {
+    render(args: Omit<Omit<Omit<React.HTMLAttributes<import("./pagination").WarpPagination>, "renderRoot" | "isUpdatePending" | "hasUpdated" | "addController" | "removeController" | "connectedCallback" | "disconnectedCallback" | "attributeChangedCallback" | "requestUpdate" | "updateComplete" | "render" | "renderOptions" | "baseUrl" | "pages" | "currentPageNumber" | "visiblePages" | "onPageClick" | "onpage-click" | "_currentPage" | "_visiblePages" | "shouldShowShowFirstPageButton" | "shouldShowPreviousPageButton" | "shouldShowNextPageButton" | "currentPageIndex" | "visiblePageNumbers"> & {
         onPageClick?: (e: Event) => void;
         'onpage-click'?: (e: Event) => void;
-    } & Partial<Omit<import("./pagination").WarpPagination, keyof HTMLElement>> & React.RefAttributes<import("./pagination").WarpPagination>): React.JSX.Element;
-    component: import("@lit/react").ReactWebComponent<import("./pagination").WarpPagination, {
-        onPageClick: string;
-        'onpage-click': string;
-    }>;
+    } & Partial<Omit<import("./pagination").WarpPagination, keyof HTMLElement>> & React.RefAttributes<import("./pagination").WarpPagination>, "ref">, "base-url" | "current-page" | "visible-pages"> & {
+        baseUrl?: string;
+        currentPageNumber?: number;
+        visiblePages?: number;
+    } & React.RefAttributes<import("./pagination").WarpPagination>): React.JSX.Element;
+    component: React.ForwardRefExoticComponent<Omit<Omit<Omit<React.HTMLAttributes<import("./pagination").WarpPagination>, "renderRoot" | "isUpdatePending" | "hasUpdated" | "addController" | "removeController" | "connectedCallback" | "disconnectedCallback" | "attributeChangedCallback" | "requestUpdate" | "updateComplete" | "render" | "renderOptions" | "baseUrl" | "pages" | "currentPageNumber" | "visiblePages" | "onPageClick" | "onpage-click" | "_currentPage" | "_visiblePages" | "shouldShowShowFirstPageButton" | "shouldShowPreviousPageButton" | "shouldShowNextPageButton" | "currentPageIndex" | "visiblePageNumbers"> & {
+        onPageClick?: (e: Event) => void;
+        'onpage-click'?: (e: Event) => void;
+    } & Partial<Omit<import("./pagination").WarpPagination, keyof HTMLElement>> & React.RefAttributes<import("./pagination").WarpPagination>, "ref">, "base-url" | "current-page" | "visible-pages"> & {
+        baseUrl?: string;
+        currentPageNumber?: number;
+        visiblePages?: number;
+    } & React.RefAttributes<import("./pagination").WarpPagination>>;
 };
 export default _default;
 export type Story = StoryObj<typeof Pagination>;

package/dist/packages/pagination/pagination.react.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/packages/pagination/pagination.react.test.js

@@ -0,0 +1,7 @@
+import { describeReactSsrAttributeMapping } from '../../tests/react-ssr-attributes';
+import { Pagination } from './react.js';
+describeReactSsrAttributeMapping('Pagination', Pagination, [
+    { propName: 'baseUrl', attrName: 'base-url', value: '/search?page=' },
+    { propName: 'currentPageNumber', attrName: 'current-page', value: 2 },
+    { propName: 'visiblePages', attrName: 'visible-pages', value: 5 },
+]);

package/dist/packages/pagination/react.d.ts

@@ -1,5 +1,10 @@
+import React from 'react';
 import { WarpPagination } from './pagination.js';
-export declare const Pagination: import("@lit/react").ReactWebComponent<WarpPagination, {
-    onPageClick: string;
-    'onpage-click': string;
-}>;
+export declare const Pagination: React.ForwardRefExoticComponent<Omit<Omit<Omit<React.HTMLAttributes<WarpPagination>, "renderRoot" | "isUpdatePending" | "hasUpdated" | "addController" | "removeController" | "connectedCallback" | "disconnectedCallback" | "attributeChangedCallback" | "requestUpdate" | "updateComplete" | "render" | "renderOptions" | "baseUrl" | "pages" | "currentPageNumber" | "visiblePages" | "onPageClick" | "onpage-click" | "_currentPage" | "_visiblePages" | "shouldShowShowFirstPageButton" | "shouldShowPreviousPageButton" | "shouldShowNextPageButton" | "currentPageIndex" | "visiblePageNumbers"> & {
+    onPageClick?: (e: Event) => void;
+    'onpage-click'?: (e: Event) => void;
+} & Partial<Omit<WarpPagination, keyof HTMLElement>> & React.RefAttributes<WarpPagination>, "ref">, "base-url" | "current-page" | "visible-pages"> & {
+    baseUrl?: string;
+    currentPageNumber?: number;
+    visiblePages?: number;
+} & React.RefAttributes<WarpPagination>>;

package/dist/packages/pagination/react.js

@@ -4,7 +4,7 @@ import React from 'react';
 // decouple from CDN by providing a dummy class
 class Component extends LitElement {
 }
-export const Pagination = createComponent({
+const BasePagination = createComponent({
     tagName: 'w-pagination',
     elementClass: Component,
     react: React,
@@ -13,3 +13,11 @@ export const Pagination = createComponent({
         'onpage-click': 'page-click',
     },
 });
+export const Pagination = React.forwardRef(({ baseUrl, currentPageNumber, visiblePages, ...props }, ref) => React.createElement(BasePagination, {
+    ...props,
+    ...(baseUrl !== undefined ? { 'base-url': baseUrl } : {}),
+    ...(currentPageNumber !== undefined ? { 'current-page': currentPageNumber } : {}),
+    ...(visiblePages !== undefined ? { 'visible-pages': visiblePages } : {}),
+    ref,
+}));
+Pagination.displayName = 'Pagination';

package/dist/packages/pill/pill.react.stories.d.ts

@@ -3,18 +3,30 @@ import React from 'react';
 import { Pill } from './react';
 declare const _default: {
     title: string;
-    render(args: Omit<React.HTMLAttributes<import("./pill").WarpPill>, "renderRoot" | "isUpdatePending" | "hasUpdated" | "addController" | "removeController" | "connectedCallback" | "disconnectedCallback" | "attributeChangedCallback" | "requestUpdate" | "updateComplete" | "onclick" | "onclose" | "render" | "renderOptions" | "onClick" | "canClose" | "onClose" | "suggestion" | "openSrLabel" | "openAriaLabel" | "closeSrLabel" | "closeAriaLabel" | "openFilterSrText" | "removeFilterSrText" | "_labelClasses" | "_closeClasses" | "_onClick" | "_onClose"> & {
+    render(args: Omit<Omit<Omit<React.HTMLAttributes<import("./pill").WarpPill>, "renderRoot" | "isUpdatePending" | "hasUpdated" | "addController" | "removeController" | "connectedCallback" | "disconnectedCallback" | "attributeChangedCallback" | "requestUpdate" | "updateComplete" | "onclick" | "onclose" | "render" | "renderOptions" | "onClick" | "canClose" | "onClose" | "suggestion" | "openSrLabel" | "openAriaLabel" | "closeSrLabel" | "closeAriaLabel" | "openFilterSrText" | "removeFilterSrText" | "_labelClasses" | "_closeClasses" | "_onClick" | "_onClose"> & {
         onClick?: (e: Event) => void;
         onclick?: (e: Event) => void;
         onClose?: (e: Event) => void;
         onclose?: (e: Event) => void;
-    } & Partial<Omit<import("./pill").WarpPill, keyof HTMLElement>> & React.RefAttributes<import("./pill").WarpPill>): React.JSX.Element;
-    component: import("@lit/react").ReactWebComponent<import("./pill").WarpPill, {
-        onClick: string;
-        onclick: string;
-        onClose: string;
-        onclose: string;
-    }>;
+    } & Partial<Omit<import("./pill").WarpPill, keyof HTMLElement>> & React.RefAttributes<import("./pill").WarpPill>, "ref">, "can-close" | "open-sr-label" | "open-aria-label" | "close-sr-label" | "close-aria-label"> & {
+        canClose?: boolean;
+        openSrLabel?: string;
+        openAriaLabel?: string;
+        closeSrLabel?: string;
+        closeAriaLabel?: string;
+    } & React.RefAttributes<import("./pill").WarpPill>): React.JSX.Element;
+    component: React.ForwardRefExoticComponent<Omit<Omit<Omit<React.HTMLAttributes<import("./pill").WarpPill>, "renderRoot" | "isUpdatePending" | "hasUpdated" | "addController" | "removeController" | "connectedCallback" | "disconnectedCallback" | "attributeChangedCallback" | "requestUpdate" | "updateComplete" | "onclick" | "onclose" | "render" | "renderOptions" | "onClick" | "canClose" | "onClose" | "suggestion" | "openSrLabel" | "openAriaLabel" | "closeSrLabel" | "closeAriaLabel" | "openFilterSrText" | "removeFilterSrText" | "_labelClasses" | "_closeClasses" | "_onClick" | "_onClose"> & {
+        onClick?: (e: Event) => void;
+        onclick?: (e: Event) => void;
+        onClose?: (e: Event) => void;
+        onclose?: (e: Event) => void;
+    } & Partial<Omit<import("./pill").WarpPill, keyof HTMLElement>> & React.RefAttributes<import("./pill").WarpPill>, "ref">, "can-close" | "open-sr-label" | "open-aria-label" | "close-sr-label" | "close-aria-label"> & {
+        canClose?: boolean;
+        openSrLabel?: string;
+        openAriaLabel?: string;
+        closeSrLabel?: string;
+        closeAriaLabel?: string;
+    } & React.RefAttributes<import("./pill").WarpPill>>;
 };
 export default _default;
 export type Story = StoryObj<typeof Pill>;

package/dist/packages/pill/pill.react.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/packages/pill/pill.react.test.js

@@ -0,0 +1,9 @@
+import { describeReactSsrAttributeMapping } from '../../tests/react-ssr-attributes';
+import { Pill } from './react.js';
+describeReactSsrAttributeMapping('Pill', Pill, [
+    { propName: 'canClose', attrName: 'can-close' },
+    { propName: 'openSrLabel', attrName: 'open-sr-label', value: 'Open' },
+    { propName: 'openAriaLabel', attrName: 'open-aria-label', value: 'Open' },
+    { propName: 'closeSrLabel', attrName: 'close-sr-label', value: 'Close' },
+    { propName: 'closeAriaLabel', attrName: 'close-aria-label', value: 'Close' },
+]);

package/dist/packages/pill/react.d.ts

@@ -1,7 +1,14 @@
+import React from 'react';
 import { WarpPill } from './pill.js';
-export declare const Pill: import("@lit/react").ReactWebComponent<WarpPill, {
-    onClick: string;
-    onclick: string;
-    onClose: string;
-    onclose: string;
-}>;
+export declare const Pill: React.ForwardRefExoticComponent<Omit<Omit<Omit<React.HTMLAttributes<WarpPill>, "renderRoot" | "isUpdatePending" | "hasUpdated" | "addController" | "removeController" | "connectedCallback" | "disconnectedCallback" | "attributeChangedCallback" | "requestUpdate" | "updateComplete" | "onclick" | "onclose" | "render" | "renderOptions" | "onClick" | "canClose" | "onClose" | "suggestion" | "openSrLabel" | "openAriaLabel" | "closeSrLabel" | "closeAriaLabel" | "openFilterSrText" | "removeFilterSrText" | "_labelClasses" | "_closeClasses" | "_onClick" | "_onClose"> & {
+    onClick?: (e: Event) => void;
+    onclick?: (e: Event) => void;
+    onClose?: (e: Event) => void;
+    onclose?: (e: Event) => void;
+} & Partial<Omit<WarpPill, keyof HTMLElement>> & React.RefAttributes<WarpPill>, "ref">, "can-close" | "open-sr-label" | "open-aria-label" | "close-sr-label" | "close-aria-label"> & {
+    canClose?: boolean;
+    openSrLabel?: string;
+    openAriaLabel?: string;
+    closeSrLabel?: string;
+    closeAriaLabel?: string;
+} & React.RefAttributes<WarpPill>>;

package/dist/packages/pill/react.js

@@ -4,7 +4,7 @@ import React from 'react';
 // decouple from CDN by providing a dummy class
 class Component extends LitElement {
 }
-export const Pill = createComponent({
+const BasePill = createComponent({
     tagName: 'w-pill',
     elementClass: Component,
     react: React,
@@ -15,3 +15,13 @@ export const Pill = createComponent({
         onclose: 'w-pill-close',
     },
 });
+export const Pill = React.forwardRef(({ canClose, openSrLabel, openAriaLabel, closeSrLabel, closeAriaLabel, ...props }, ref) => React.createElement(BasePill, {
+    ...props,
+    ...(canClose ? { 'can-close': true } : {}),
+    ...(openSrLabel !== undefined ? { 'open-sr-label': openSrLabel } : {}),
+    ...(openAriaLabel !== undefined ? { 'open-aria-label': openAriaLabel } : {}),
+    ...(closeSrLabel !== undefined ? { 'close-sr-label': closeSrLabel } : {}),
+    ...(closeAriaLabel !== undefined ? { 'close-aria-label': closeAriaLabel } : {}),
+    ref,
+}));
+Pill.displayName = 'Pill';

package/dist/packages/radio-group/radio-group.react.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/packages/radio-group/radio-group.react.test.js

@@ -0,0 +1,5 @@
+import { describeReactSsrAttributeMapping } from '../../tests/react-ssr-attributes';
+import { RadioGroup } from './react.js';
+describeReactSsrAttributeMapping('RadioGroup', RadioGroup, [
+    { propName: 'helpText', attrName: 'help-text', value: 'Help text' },
+]);

package/dist/packages/radio-group/react.d.ts

@@ -1,7 +1,10 @@
+import React from 'react';
 import { WRadioGroup } from './radio-group.js';
-export declare const RadioGroup: import("@lit/react").ReactWebComponent<WRadioGroup, {
-    onInput: string;
-    oninput: string;
-    onChange: string;
-    onchange: string;
-}>;
+export declare const RadioGroup: React.ForwardRefExoticComponent<Omit<Omit<Omit<React.HTMLAttributes<WRadioGroup>, "form" | "label" | "name" | "disabled" | "invalid" | "helpText" | "required" | "renderRoot" | "isUpdatePending" | "hasUpdated" | "addController" | "removeController" | "connectedCallback" | "disconnectedCallback" | "attributeChangedCallback" | "requestUpdate" | "updateComplete" | "onchange" | "oninput" | "updated" | "resetFormControl" | "render" | "validationTarget" | "internals" | "showError" | "validationMessage" | "validity" | "validationComplete" | "checkValidity" | "formResetCallback" | "valueChangedCallback" | "validityCallback" | "validationMessageCallback" | "setValue" | "shouldFormValueUpdate" | "renderOptions" | "onChange" | "onInput" | "reportValidity" | "optional" | "hasInteracted"> & {
+    onInput?: (e: Event) => void;
+    oninput?: (e: Event) => void;
+    onChange?: (e: Event) => void;
+    onchange?: (e: Event) => void;
+} & Partial<Omit<WRadioGroup, keyof HTMLElement>> & React.RefAttributes<WRadioGroup>, "ref">, "help-text"> & {
+    helpText?: string;
+} & React.RefAttributes<WRadioGroup>>;

package/dist/packages/radio-group/react.js

@@ -4,7 +4,7 @@ import React from 'react';
 // decouple from CDN by providing a dummy class
 class Component extends LitElement {
 }
-export const RadioGroup = createComponent({
+const BaseRadioGroup = createComponent({
     tagName: 'w-radio-group',
     elementClass: Component,
     react: React,
@@ -15,3 +15,9 @@ export const RadioGroup = createComponent({
         onchange: 'change',
     },
 });
+export const RadioGroup = React.forwardRef(({ helpText, ...props }, ref) => React.createElement(BaseRadioGroup, {
+    ...props,
+    ...(helpText !== undefined ? { 'help-text': helpText } : {}),
+    ref,
+}));
+RadioGroup.displayName = 'RadioGroup';

package/dist/packages/select/react.d.ts

@@ -1,6 +1,11 @@
+import React from 'react';
 import { WarpSelect } from './select.js';
-export declare const Select: import("@lit/react").ReactWebComponent<WarpSelect, {
-    onChange: string;
-    onchange: string;
-}>;
+export declare const Select: React.ForwardRefExoticComponent<Omit<Omit<Omit<React.HTMLAttributes<WarpSelect>, "value" | "form" | "label" | "name" | "disabled" | "invalid" | "helpText" | "readOnly" | "readonly" | "renderRoot" | "isUpdatePending" | "hasUpdated" | "addController" | "removeController" | "connectedCallback" | "disconnectedCallback" | "attributeChangedCallback" | "requestUpdate" | "updateComplete" | "onchange" | "updated" | "firstUpdated" | "resetFormControl" | "render" | "validationTarget" | "internals" | "showError" | "validationMessage" | "validity" | "validationComplete" | "checkValidity" | "formResetCallback" | "valueChangedCallback" | "validityCallback" | "validationMessageCallback" | "setValue" | "shouldFormValueUpdate" | "renderOptions" | "autoFocus" | "onChange" | "hint" | "optional" | "willUpdate" | "formStateRestoreCallback" | "always" | "_options" | "_setValue" | "handleKeyDown"> & {
+    onChange?: (e: Event) => void;
+    onchange?: (e: Event) => void;
+} & Partial<Omit<WarpSelect, keyof HTMLElement>> & React.RefAttributes<WarpSelect>, "ref">, "help-text" | "read-only" | "auto-focus"> & {
+    autoFocus?: boolean;
+    helpText?: string;
+    readOnly?: boolean;
+} & React.RefAttributes<WarpSelect>>;
 export declare const Option: import("@lit/react").ReactWebComponent<HTMLOptionElement, {}>;

package/dist/packages/select/react.js

@@ -4,7 +4,7 @@ import React from 'react';
 // decouple from CDN by providing a dummy class
 class Component extends LitElement {
 }
-export const Select = createComponent({
+const BaseSelect = createComponent({
     tagName: 'w-select',
     elementClass: Component,
     react: React,
@@ -13,6 +13,14 @@ export const Select = createComponent({
         onchange: 'change',
     },
 });
+export const Select = React.forwardRef(({ autoFocus, helpText, readOnly, ...props }, ref) => React.createElement(BaseSelect, {
+    ...props,
+    ...(autoFocus ? { 'auto-focus': true } : {}),
+    ...(helpText !== undefined ? { 'help-text': helpText } : {}),
+    ...(readOnly ? { 'read-only': true } : {}),
+    ref,
+}));
+Select.displayName = 'Select';
 export const Option = createComponent({
     tagName: 'w-option',
     elementClass: Component,

package/dist/packages/select/select.react.stories.d.ts

@@ -3,14 +3,22 @@ import React from 'react';
 import { Select } from './react';
 declare const _default: {
     title: string;
-    render(args: Omit<React.HTMLAttributes<import("./select").WarpSelect>, "value" | "form" | "label" | "name" | "disabled" | "invalid" | "helpText" | "readOnly" | "readonly" | "renderRoot" | "isUpdatePending" | "hasUpdated" | "addController" | "removeController" | "connectedCallback" | "disconnectedCallback" | "attributeChangedCallback" | "requestUpdate" | "updateComplete" | "onchange" | "updated" | "firstUpdated" | "resetFormControl" | "render" | "validationTarget" | "internals" | "showError" | "validationMessage" | "validity" | "validationComplete" | "checkValidity" | "formResetCallback" | "valueChangedCallback" | "validityCallback" | "validationMessageCallback" | "setValue" | "shouldFormValueUpdate" | "renderOptions" | "autoFocus" | "onChange" | "hint" | "optional" | "willUpdate" | "formStateRestoreCallback" | "always" | "_options" | "_setValue" | "handleKeyDown"> & {
+    render(args: Omit<Omit<Omit<React.HTMLAttributes<import("./select").WarpSelect>, "value" | "form" | "label" | "name" | "disabled" | "invalid" | "helpText" | "readOnly" | "readonly" | "renderRoot" | "isUpdatePending" | "hasUpdated" | "addController" | "removeController" | "connectedCallback" | "disconnectedCallback" | "attributeChangedCallback" | "requestUpdate" | "updateComplete" | "onchange" | "updated" | "firstUpdated" | "resetFormControl" | "render" | "validationTarget" | "internals" | "showError" | "validationMessage" | "validity" | "validationComplete" | "checkValidity" | "formResetCallback" | "valueChangedCallback" | "validityCallback" | "validationMessageCallback" | "setValue" | "shouldFormValueUpdate" | "renderOptions" | "autoFocus" | "onChange" | "hint" | "optional" | "willUpdate" | "formStateRestoreCallback" | "always" | "_options" | "_setValue" | "handleKeyDown"> & {
         onChange?: (e: Event) => void;
         onchange?: (e: Event) => void;
-    } & Partial<Omit<import("./select").WarpSelect, keyof HTMLElement>> & React.RefAttributes<import("./select").WarpSelect>): React.JSX.Element;
-    component: import("@lit/react").ReactWebComponent<import("./select").WarpSelect, {
-        onChange: string;
-        onchange: string;
-    }>;
+    } & Partial<Omit<import("./select").WarpSelect, keyof HTMLElement>> & React.RefAttributes<import("./select").WarpSelect>, "ref">, "help-text" | "read-only" | "auto-focus"> & {
+        autoFocus?: boolean;
+        helpText?: string;
+        readOnly?: boolean;
+    } & React.RefAttributes<import("./select").WarpSelect>): React.JSX.Element;
+    component: React.ForwardRefExoticComponent<Omit<Omit<Omit<React.HTMLAttributes<import("./select").WarpSelect>, "value" | "form" | "label" | "name" | "disabled" | "invalid" | "helpText" | "readOnly" | "readonly" | "renderRoot" | "isUpdatePending" | "hasUpdated" | "addController" | "removeController" | "connectedCallback" | "disconnectedCallback" | "attributeChangedCallback" | "requestUpdate" | "updateComplete" | "onchange" | "updated" | "firstUpdated" | "resetFormControl" | "render" | "validationTarget" | "internals" | "showError" | "validationMessage" | "validity" | "validationComplete" | "checkValidity" | "formResetCallback" | "valueChangedCallback" | "validityCallback" | "validationMessageCallback" | "setValue" | "shouldFormValueUpdate" | "renderOptions" | "autoFocus" | "onChange" | "hint" | "optional" | "willUpdate" | "formStateRestoreCallback" | "always" | "_options" | "_setValue" | "handleKeyDown"> & {
+        onChange?: (e: Event) => void;
+        onchange?: (e: Event) => void;
+    } & Partial<Omit<import("./select").WarpSelect, keyof HTMLElement>> & React.RefAttributes<import("./select").WarpSelect>, "ref">, "help-text" | "read-only" | "auto-focus"> & {
+        autoFocus?: boolean;
+        helpText?: string;
+        readOnly?: boolean;
+    } & React.RefAttributes<import("./select").WarpSelect>>;
 };
 export default _default;
 export type Story = StoryObj<typeof Select>;

package/dist/packages/select/select.react.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/packages/select/select.react.test.js

@@ -0,0 +1,7 @@
+import { describeReactSsrAttributeMapping } from '../../tests/react-ssr-attributes';
+import { Select } from './react.js';
+describeReactSsrAttributeMapping('Select', Select, [
+    { propName: 'autoFocus', attrName: 'auto-focus' },
+    { propName: 'helpText', attrName: 'help-text', value: 'Help text' },
+    { propName: 'readOnly', attrName: 'read-only' },
+]);