@diwacopilot/components-react 1.0.0

package/README.md

@@ -0,0 +1,19 @@
+# @diwacopilot/components-react
+
+React wrappers for `@diwacopilot/components`.
+
+## Install
+
+```bash
+npm install @diwacopilot/components @diwacopilot/components-react
+```
+
+## Usage
+
+```tsx
+import { DButton } from "@diwacopilot/components-react";
+
+export function App() {
+  return <DButton label="Continue" />;
+}
+```

package/dist/components.d.ts

@@ -0,0 +1,58 @@
+export declare const DiwaAccordion: import("react").ForwardRefExoticComponent<any>;
+export declare const DiwaBadge: import("react").ForwardRefExoticComponent<any>;
+export declare const DiwaButton: import("react").ForwardRefExoticComponent<any>;
+export declare const DiwaButtonPure: import("react").ForwardRefExoticComponent<any>;
+export declare const DiwaCheckbox: import("react").ForwardRefExoticComponent<any>;
+export declare const DiwaDivider: import("react").ForwardRefExoticComponent<any>;
+export declare const DiwaFlyout: import("react").ForwardRefExoticComponent<any>;
+export declare const DiwaIcon: import("react").ForwardRefExoticComponent<any>;
+export declare const DiwaInlineNotification: import("react").ForwardRefExoticComponent<any>;
+export declare const DiwaInput: import("react").ForwardRefExoticComponent<any>;
+export declare const DiwaInputDate: import("react").ForwardRefExoticComponent<any>;
+export declare const DiwaInputEmail: import("react").ForwardRefExoticComponent<any>;
+export declare const DiwaInputMonth: import("react").ForwardRefExoticComponent<any>;
+export declare const DiwaInputNumber: import("react").ForwardRefExoticComponent<any>;
+export declare const DiwaInputPassword: import("react").ForwardRefExoticComponent<any>;
+export declare const DiwaInputSearch: import("react").ForwardRefExoticComponent<any>;
+export declare const DiwaInputTel: import("react").ForwardRefExoticComponent<any>;
+export declare const DiwaInputText: import("react").ForwardRefExoticComponent<any>;
+export declare const DiwaInputTime: import("react").ForwardRefExoticComponent<any>;
+export declare const DiwaInputUrl: import("react").ForwardRefExoticComponent<any>;
+export declare const DiwaInputWeek: import("react").ForwardRefExoticComponent<any>;
+export declare const DiwaLink: import("react").ForwardRefExoticComponent<any>;
+export declare const DiwaLinkPure: import("react").ForwardRefExoticComponent<any>;
+export declare const DiwaModal: import("react").ForwardRefExoticComponent<any>;
+export declare const DiwaMultiSelect: import("react").ForwardRefExoticComponent<any>;
+export declare const DiwaMultiSelectOption: import("react").ForwardRefExoticComponent<any>;
+export declare const DiwaPagination: import("react").ForwardRefExoticComponent<any>;
+export declare const DiwaPinCode: import("react").ForwardRefExoticComponent<any>;
+export declare const DiwaPopover: import("react").ForwardRefExoticComponent<any>;
+export declare const DiwaRadioGroup: import("react").ForwardRefExoticComponent<any>;
+export declare const DiwaRadioGroupItem: import("react").ForwardRefExoticComponent<any>;
+export declare const DiwaScroller: import("react").ForwardRefExoticComponent<any>;
+export declare const DiwaSegmentedControl: import("react").ForwardRefExoticComponent<any>;
+export declare const DiwaSegmentedControlItem: import("react").ForwardRefExoticComponent<any>;
+export declare const DiwaSelect: import("react").ForwardRefExoticComponent<any>;
+export declare const DiwaSelectOption: import("react").ForwardRefExoticComponent<any>;
+export declare const DiwaSpinner: import("react").ForwardRefExoticComponent<any>;
+export declare const DiwaStepperHorizontal: import("react").ForwardRefExoticComponent<any>;
+export declare const DiwaStepperHorizontalItem: import("react").ForwardRefExoticComponent<any>;
+export declare const DiwaSwitch: import("react").ForwardRefExoticComponent<any>;
+export declare const DiwaTable: import("react").ForwardRefExoticComponent<any>;
+export declare const DiwaTableBody: import("react").ForwardRefExoticComponent<any>;
+export declare const DiwaTableCell: import("react").ForwardRefExoticComponent<any>;
+export declare const DiwaTableHead: import("react").ForwardRefExoticComponent<any>;
+export declare const DiwaTableHeadCell: import("react").ForwardRefExoticComponent<any>;
+export declare const DiwaTableRow: import("react").ForwardRefExoticComponent<any>;
+export declare const DiwaTabs: import("react").ForwardRefExoticComponent<any>;
+export declare const DiwaTabsBar: import("react").ForwardRefExoticComponent<any>;
+export declare const DiwaTabsItem: import("react").ForwardRefExoticComponent<any>;
+export declare const DiwaTag: import("react").ForwardRefExoticComponent<any>;
+export declare const DiwaTagDismissible: import("react").ForwardRefExoticComponent<any>;
+export declare const DiwaText: import("react").ForwardRefExoticComponent<any>;
+export declare const DiwaTextList: import("react").ForwardRefExoticComponent<any>;
+export declare const DiwaTextListItem: import("react").ForwardRefExoticComponent<any>;
+export declare const DiwaTextarea: import("react").ForwardRefExoticComponent<any>;
+export declare const DiwaToast: import("react").ForwardRefExoticComponent<any>;
+export declare const DiwaToastItem: import("react").ForwardRefExoticComponent<any>;
+//# sourceMappingURL=components.d.ts.map

package/dist/components.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"components.d.ts","sourceRoot":"","sources":["../src/components.ts"],"names":[],"mappings":"AAUA,eAAO,MAAM,aAAa,gDAAmG,CAAC;AAC9H,eAAO,MAAM,SAAS,gDAAuF,CAAC;AAC9G,eAAO,MAAM,UAAU,gDAA0F,CAAC;AAClH,eAAO,MAAM,cAAc,gDAAuG,CAAC;AACnI,eAAO,MAAM,YAAY,gDAAgG,CAAC;AAC1H,eAAO,MAAM,WAAW,gDAA6F,CAAC;AACtH,eAAO,MAAM,UAAU,gDAA0F,CAAC;AAClH,eAAO,MAAM,QAAQ,gDAAoF,CAAC;AAC1G,eAAO,MAAM,sBAAsB,gDAA+H,CAAC;AACnK,eAAO,MAAM,SAAS,gDAAuF,CAAC;AAC9G,eAAO,MAAM,aAAa,gDAAoG,CAAC;AAC/H,eAAO,MAAM,cAAc,gDAAuG,CAAC;AACnI,eAAO,MAAM,cAAc,gDAAuG,CAAC;AACnI,eAAO,MAAM,eAAe,gDAA0G,CAAC;AACvI,eAAO,MAAM,iBAAiB,gDAAgH,CAAC;AAC/I,eAAO,MAAM,eAAe,gDAA0G,CAAC;AACvI,eAAO,MAAM,YAAY,gDAAiG,CAAC;AAC3H,eAAO,MAAM,aAAa,gDAAoG,CAAC;AAC/H,eAAO,MAAM,aAAa,gDAAoG,CAAC;AAC/H,eAAO,MAAM,YAAY,gDAAiG,CAAC;AAC3H,eAAO,MAAM,aAAa,gDAAoG,CAAC;AAC/H,eAAO,MAAM,QAAQ,gDAAoF,CAAC;AAC1G,eAAO,MAAM,YAAY,gDAAiG,CAAC;AAC3H,eAAO,MAAM,SAAS,gDAAuF,CAAC;AAC9G,eAAO,MAAM,eAAe,gDAA0G,CAAC;AACvI,eAAO,MAAM,qBAAqB,gDAA6H,CAAC;AAChK,eAAO,MAAM,cAAc,gDAAsG,CAAC;AAClI,eAAO,MAAM,WAAW,gDAA8F,CAAC;AACvH,eAAO,MAAM,WAAW,gDAA6F,CAAC;AACtH,eAAO,MAAM,cAAc,gDAAuG,CAAC;AACnI,eAAO,MAAM,kBAAkB,gDAAoH,CAAC;AACpJ,eAAO,MAAM,YAAY,gDAAgG,CAAC;AAC1H,eAAO,MAAM,oBAAoB,gDAAyH,CAAC;AAC3J,eAAO,MAAM,wBAAwB,gDAAsI,CAAC;AAC5K,eAAO,MAAM,UAAU,gDAA0F,CAAC;AAClH,eAAO,MAAM,gBAAgB,gDAA6G,CAAC;AAC3I,eAAO,MAAM,WAAW,gDAA6F,CAAC;AACtH,eAAO,MAAM,qBAAqB,gDAA4H,CAAC;AAC/J,eAAO,MAAM,yBAAyB,gDAAyI,CAAC;AAChL,eAAO,MAAM,UAAU,gDAA0F,CAAC;AAClH,eAAO,MAAM,SAAS,gDAAuF,CAAC;AAC9G,eAAO,MAAM,aAAa,gDAAoG,CAAC;AAC/H,eAAO,MAAM,aAAa,gDAAoG,CAAC;AAC/H,eAAO,MAAM,aAAa,gDAAoG,CAAC;AAC/H,eAAO,MAAM,iBAAiB,gDAAiH,CAAC;AAChJ,eAAO,MAAM,YAAY,gDAAiG,CAAC;AAC3H,eAAO,MAAM,QAAQ,gDAAoF,CAAC;AAC1G,eAAO,MAAM,WAAW,gDAA8F,CAAC;AACvH,eAAO,MAAM,YAAY,gDAAiG,CAAC;AAC3H,eAAO,MAAM,OAAO,gDAAiF,CAAC;AACtG,eAAO,MAAM,kBAAkB,gDAAmH,CAAC;AACnJ,eAAO,MAAM,QAAQ,gDAAoF,CAAC;AAC1G,eAAO,MAAM,YAAY,gDAAiG,CAAC;AAC3H,eAAO,MAAM,gBAAgB,gDAA8G,CAAC;AAC5I,eAAO,MAAM,YAAY,gDAAgG,CAAC;AAC1H,eAAO,MAAM,SAAS,gDAAuF,CAAC;AAC9G,eAAO,MAAM,aAAa,gDAAoG,CAAC"}

package/dist/components.js

@@ -0,0 +1,63 @@
+/* eslint-disable */
+/* tslint:disable */
+/* auto-generated react proxies */
+import { createReactComponent } from './react-component-lib';
+import { defineCustomElements } from '@diwacopilot/components/loader';
+defineCustomElements();
+export const DiwaAccordion = /*@__PURE__*/ createReactComponent('diwa-accordion');
+export const DiwaBadge = /*@__PURE__*/ createReactComponent('diwa-badge');
+export const DiwaButton = /*@__PURE__*/ createReactComponent('diwa-button');
+export const DiwaButtonPure = /*@__PURE__*/ createReactComponent('diwa-button-pure');
+export const DiwaCheckbox = /*@__PURE__*/ createReactComponent('diwa-checkbox');
+export const DiwaDivider = /*@__PURE__*/ createReactComponent('diwa-divider');
+export const DiwaFlyout = /*@__PURE__*/ createReactComponent('diwa-flyout');
+export const DiwaIcon = /*@__PURE__*/ createReactComponent('diwa-icon');
+export const DiwaInlineNotification = /*@__PURE__*/ createReactComponent('diwa-inline-notification');
+export const DiwaInput = /*@__PURE__*/ createReactComponent('diwa-input');
+export const DiwaInputDate = /*@__PURE__*/ createReactComponent('diwa-input-date');
+export const DiwaInputEmail = /*@__PURE__*/ createReactComponent('diwa-input-email');
+export const DiwaInputMonth = /*@__PURE__*/ createReactComponent('diwa-input-month');
+export const DiwaInputNumber = /*@__PURE__*/ createReactComponent('diwa-input-number');
+export const DiwaInputPassword = /*@__PURE__*/ createReactComponent('diwa-input-password');
+export const DiwaInputSearch = /*@__PURE__*/ createReactComponent('diwa-input-search');
+export const DiwaInputTel = /*@__PURE__*/ createReactComponent('diwa-input-tel');
+export const DiwaInputText = /*@__PURE__*/ createReactComponent('diwa-input-text');
+export const DiwaInputTime = /*@__PURE__*/ createReactComponent('diwa-input-time');
+export const DiwaInputUrl = /*@__PURE__*/ createReactComponent('diwa-input-url');
+export const DiwaInputWeek = /*@__PURE__*/ createReactComponent('diwa-input-week');
+export const DiwaLink = /*@__PURE__*/ createReactComponent('diwa-link');
+export const DiwaLinkPure = /*@__PURE__*/ createReactComponent('diwa-link-pure');
+export const DiwaModal = /*@__PURE__*/ createReactComponent('diwa-modal');
+export const DiwaMultiSelect = /*@__PURE__*/ createReactComponent('diwa-multi-select');
+export const DiwaMultiSelectOption = /*@__PURE__*/ createReactComponent('diwa-multi-select-option');
+export const DiwaPagination = /*@__PURE__*/ createReactComponent('diwa-pagination');
+export const DiwaPinCode = /*@__PURE__*/ createReactComponent('diwa-pin-code');
+export const DiwaPopover = /*@__PURE__*/ createReactComponent('diwa-popover');
+export const DiwaRadioGroup = /*@__PURE__*/ createReactComponent('diwa-radio-group');
+export const DiwaRadioGroupItem = /*@__PURE__*/ createReactComponent('diwa-radio-group-item');
+export const DiwaScroller = /*@__PURE__*/ createReactComponent('diwa-scroller');
+export const DiwaSegmentedControl = /*@__PURE__*/ createReactComponent('diwa-segmented-control');
+export const DiwaSegmentedControlItem = /*@__PURE__*/ createReactComponent('diwa-segmented-control-item');
+export const DiwaSelect = /*@__PURE__*/ createReactComponent('diwa-select');
+export const DiwaSelectOption = /*@__PURE__*/ createReactComponent('diwa-select-option');
+export const DiwaSpinner = /*@__PURE__*/ createReactComponent('diwa-spinner');
+export const DiwaStepperHorizontal = /*@__PURE__*/ createReactComponent('diwa-stepper-horizontal');
+export const DiwaStepperHorizontalItem = /*@__PURE__*/ createReactComponent('diwa-stepper-horizontal-item');
+export const DiwaSwitch = /*@__PURE__*/ createReactComponent('diwa-switch');
+export const DiwaTable = /*@__PURE__*/ createReactComponent('diwa-table');
+export const DiwaTableBody = /*@__PURE__*/ createReactComponent('diwa-table-body');
+export const DiwaTableCell = /*@__PURE__*/ createReactComponent('diwa-table-cell');
+export const DiwaTableHead = /*@__PURE__*/ createReactComponent('diwa-table-head');
+export const DiwaTableHeadCell = /*@__PURE__*/ createReactComponent('diwa-table-head-cell');
+export const DiwaTableRow = /*@__PURE__*/ createReactComponent('diwa-table-row');
+export const DiwaTabs = /*@__PURE__*/ createReactComponent('diwa-tabs');
+export const DiwaTabsBar = /*@__PURE__*/ createReactComponent('diwa-tabs-bar');
+export const DiwaTabsItem = /*@__PURE__*/ createReactComponent('diwa-tabs-item');
+export const DiwaTag = /*@__PURE__*/ createReactComponent('diwa-tag');
+export const DiwaTagDismissible = /*@__PURE__*/ createReactComponent('diwa-tag-dismissible');
+export const DiwaText = /*@__PURE__*/ createReactComponent('diwa-text');
+export const DiwaTextList = /*@__PURE__*/ createReactComponent('diwa-text-list');
+export const DiwaTextListItem = /*@__PURE__*/ createReactComponent('diwa-text-list-item');
+export const DiwaTextarea = /*@__PURE__*/ createReactComponent('diwa-textarea');
+export const DiwaToast = /*@__PURE__*/ createReactComponent('diwa-toast');
+export const DiwaToastItem = /*@__PURE__*/ createReactComponent('diwa-toast-item');

package/dist/index.d.ts

@@ -0,0 +1,6 @@
+export * from './components';
+export { DiwaBadge as DBadge } from './components';
+export { DiwaButton as DButton } from './components';
+export { DiwaInput as DInput } from './components';
+export { DiwaSpinner as DSpinner } from './components';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,cAAc,cAAc,CAAC;AAI7B,OAAO,EAAE,SAAS,IAAI,MAAM,EAAE,MAAM,cAAc,CAAC;AACnD,OAAO,EAAE,UAAU,IAAI,OAAO,EAAE,MAAM,cAAc,CAAC;AACrD,OAAO,EAAE,SAAS,IAAI,MAAM,EAAE,MAAM,cAAc,CAAC;AACnD,OAAO,EAAE,WAAW,IAAI,QAAQ,EAAE,MAAM,cAAc,CAAC"}

package/dist/index.js

@@ -0,0 +1,8 @@
+// Re-export everything from the Stencil-generated proxies.
+export * from './components';
+// D* aliases — the public API name consumers should use.
+// The Diwa* variants remain available for backwards compatibility.
+export { DiwaBadge as DBadge } from './components';
+export { DiwaButton as DButton } from './components';
+export { DiwaInput as DInput } from './components';
+export { DiwaSpinner as DSpinner } from './components';

package/dist/react-component-lib/createComponent.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+export interface HTMLStencilElement extends HTMLElement {
+    componentOnReady(): Promise<this>;
+}
+interface StencilReactInternalProps<ElementType> extends React.HTMLAttributes<ElementType> {
+    forwardedRef: React.RefObject<ElementType>;
+    ref?: React.Ref<any>;
+}
+export declare const createReactComponent: <PropType, ElementType extends HTMLStencilElement, ContextStateType = {}, ExpandedPropsTypes = {}>(tagName: string, ReactComponentContext?: React.Context<ContextStateType>, manipulatePropsFunction?: (originalProps: StencilReactInternalProps<ElementType>, propsToPass: any) => ExpandedPropsTypes, defineCustomElement?: () => void) => React.ForwardRefExoticComponent<React.PropsWithoutRef<import("./utils").StencilReactExternalProps<PropType, ElementType>> & React.RefAttributes<ElementType>>;
+export {};
+//# sourceMappingURL=createComponent.d.ts.map

package/dist/react-component-lib/createComponent.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"createComponent.d.ts","sourceRoot":"","sources":["../../src/react-component-lib/createComponent.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAwB,MAAM,OAAO,CAAC;AAI7C,MAAM,WAAW,kBAAmB,SAAQ,WAAW;IACrD,gBAAgB,IAAI,OAAO,CAAC,IAAI,CAAC,CAAC;CACnC;AAED,UAAU,yBAAyB,CAAC,WAAW,CAAE,SAAQ,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC;IACxF,YAAY,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC;IAC3C,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;CACtB;AAED,eAAO,MAAM,oBAAoB,GAC/B,QAAQ,EACR,WAAW,SAAS,kBAAkB,EACtC,gBAAgB,GAAG,EAAE,EACrB,kBAAkB,GAAG,EAAE,EAEvB,SAAS,MAAM,EACf,wBAAwB,KAAK,CAAC,OAAO,CAAC,gBAAgB,CAAC,EACvD,0BAA0B,CACxB,aAAa,EAAE,yBAAyB,CAAC,WAAW,CAAC,EACrD,WAAW,EAAE,GAAG,KACb,kBAAkB,EACvB,sBAAsB,MAAM,IAAI,kKAgFjC,CAAC"}

package/dist/react-component-lib/createComponent.js

@@ -0,0 +1,67 @@
+import React, { createElement } from 'react';
+import { attachProps, camelToDashCase, createForwardRef, dashToPascalCase, isCoveredByReact, mergeRefs } from './utils';
+export const createReactComponent = (tagName, ReactComponentContext, manipulatePropsFunction, defineCustomElement) => {
+    if (defineCustomElement !== undefined) {
+        defineCustomElement();
+    }
+    const displayName = dashToPascalCase(tagName);
+    const ReactComponent = class extends React.Component {
+        constructor(props) {
+            super(props);
+            this.setComponentElRef = (element) => {
+                this.componentEl = element;
+            };
+        }
+        componentDidMount() {
+            this.componentDidUpdate(this.props);
+        }
+        componentDidUpdate(prevProps) {
+            attachProps(this.componentEl, this.props, prevProps);
+        }
+        render() {
+            const { children, forwardedRef, style, className, ref, ...cProps } = this.props;
+            let propsToPass = Object.keys(cProps).reduce((acc, name) => {
+                const value = cProps[name];
+                if (name.indexOf('on') === 0 && name[2] === name[2].toUpperCase()) {
+                    const eventName = name.substring(2).toLowerCase();
+                    if (typeof document !== 'undefined' && isCoveredByReact(eventName)) {
+                        acc[name] = value;
+                    }
+                }
+                else {
+                    // we should only render strings, booleans, and numbers as attrs in html.
+                    // objects, functions, arrays etc get synced via properties on mount.
+                    const type = typeof value;
+                    if (type === 'string' || type === 'boolean' || type === 'number') {
+                        acc[camelToDashCase(name)] = value;
+                    }
+                }
+                return acc;
+            }, {});
+            if (manipulatePropsFunction) {
+                propsToPass = manipulatePropsFunction(this.props, propsToPass);
+            }
+            const newProps = {
+                ...propsToPass,
+                ref: mergeRefs(forwardedRef, this.setComponentElRef),
+                style,
+            };
+            /**
+             * We use createElement here instead of
+             * React.createElement to work around a
+             * bug in Vite (https://github.com/vitejs/vite/issues/6104).
+             * React.createElement causes all elements to be rendered
+             * as <tagname> instead of the actual Web Component.
+             */
+            return createElement(tagName, newProps, children);
+        }
+        static get displayName() {
+            return displayName;
+        }
+    };
+    // If context was passed to createReactComponent then conditionally add it to the Component Class
+    if (ReactComponentContext) {
+        ReactComponent.contextType = ReactComponentContext;
+    }
+    return createForwardRef(ReactComponent, displayName);
+};

package/dist/react-component-lib/createOverlayComponent.d.ts

@@ -0,0 +1,22 @@
+import React from 'react';
+import { OverlayEventDetail } from './interfaces';
+import { StencilReactForwardedRef } from './utils';
+interface OverlayElement extends HTMLElement {
+    present: () => Promise<void>;
+    dismiss: (data?: any, role?: string | undefined) => Promise<boolean>;
+}
+export interface ReactOverlayProps {
+    children?: React.ReactNode;
+    isOpen: boolean;
+    onDidDismiss?: (event: CustomEvent<OverlayEventDetail>) => void;
+    onDidPresent?: (event: CustomEvent<OverlayEventDetail>) => void;
+    onWillDismiss?: (event: CustomEvent<OverlayEventDetail>) => void;
+    onWillPresent?: (event: CustomEvent<OverlayEventDetail>) => void;
+}
+export declare const createOverlayComponent: <OverlayComponent extends object, OverlayType extends OverlayElement>(tagName: string, controller: {
+    create: (options: any) => Promise<OverlayType>;
+}, customElement?: any) => React.ForwardRefExoticComponent<React.PropsWithoutRef<OverlayComponent & ReactOverlayProps & {
+    forwardedRef?: StencilReactForwardedRef<OverlayType>;
+}> & React.RefAttributes<OverlayType>>;
+export {};
+//# sourceMappingURL=createOverlayComponent.d.ts.map

package/dist/react-component-lib/createOverlayComponent.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"createOverlayComponent.d.ts","sourceRoot":"","sources":["../../src/react-component-lib/createOverlayComponent.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAE,kBAAkB,EAAE,MAAM,cAAc,CAAC;AAClD,OAAO,EAAE,wBAAwB,EAA8D,MAAM,SAAS,CAAC;AAE/G,UAAU,cAAe,SAAQ,WAAW;IAC1C,OAAO,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IAC7B,OAAO,EAAE,CAAC,IAAI,CAAC,EAAE,GAAG,EAAE,IAAI,CAAC,EAAE,MAAM,GAAG,SAAS,KAAK,OAAO,CAAC,OAAO,CAAC,CAAC;CACtE;AAED,MAAM,WAAW,iBAAiB;IAChC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,MAAM,EAAE,OAAO,CAAC;IAChB,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,CAAC,kBAAkB,CAAC,KAAK,IAAI,CAAC;IAChE,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,CAAC,kBAAkB,CAAC,KAAK,IAAI,CAAC;IAChE,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,CAAC,kBAAkB,CAAC,KAAK,IAAI,CAAC;IACjE,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,CAAC,kBAAkB,CAAC,KAAK,IAAI,CAAC;CAClE;AAED,eAAO,MAAM,sBAAsB,GAAI,gBAAgB,SAAS,MAAM,EAAE,WAAW,SAAS,cAAc,EACxG,SAAS,MAAM,EACf,YAAY;IAAE,MAAM,EAAE,CAAC,OAAO,EAAE,GAAG,KAAK,OAAO,CAAC,WAAW,CAAC,CAAA;CAAE,EAC9D,gBAAgB,GAAG;mBAYA,wBAAwB,CAAC,WAAW,CAAC;sCA0GzD,CAAC"}

package/dist/react-component-lib/createOverlayComponent.js

@@ -0,0 +1,97 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+// @ts-nocheck
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { attachProps, dashToPascalCase, defineCustomElement, setRef } from './utils';
+export const createOverlayComponent = (tagName, controller, customElement) => {
+    defineCustomElement(tagName, customElement);
+    const displayName = dashToPascalCase(tagName);
+    const didDismissEventName = `on${displayName}DidDismiss`;
+    const didPresentEventName = `on${displayName}DidPresent`;
+    const willDismissEventName = `on${displayName}WillDismiss`;
+    const willPresentEventName = `on${displayName}WillPresent`;
+    let isDismissing = false;
+    class Overlay extends React.Component {
+        constructor(props) {
+            super(props);
+            if (typeof document !== 'undefined') {
+                this.el = document.createElement('div');
+            }
+            this.handleDismiss = this.handleDismiss.bind(this);
+        }
+        static get displayName() {
+            return displayName;
+        }
+        componentDidMount() {
+            if (this.props.isOpen) {
+                this.present();
+            }
+        }
+        componentWillUnmount() {
+            if (this.overlay) {
+                this.overlay.dismiss();
+            }
+        }
+        handleDismiss(event) {
+            if (this.props.onDidDismiss) {
+                this.props.onDidDismiss(event);
+            }
+            setRef(this.props.forwardedRef, null);
+        }
+        shouldComponentUpdate(nextProps) {
+            // Check if the overlay component is about to dismiss
+            if (this.overlay && nextProps.isOpen !== this.props.isOpen && nextProps.isOpen === false) {
+                isDismissing = true;
+            }
+            return true;
+        }
+        async componentDidUpdate(prevProps) {
+            if (this.overlay) {
+                attachProps(this.overlay, this.props, prevProps);
+            }
+            if (prevProps.isOpen !== this.props.isOpen && this.props.isOpen === true) {
+                this.present(prevProps);
+            }
+            if (this.overlay && prevProps.isOpen !== this.props.isOpen && this.props.isOpen === false) {
+                await this.overlay.dismiss();
+                isDismissing = false;
+                /**
+                 * Now that the overlay is dismissed
+                 * we need to render again so that any
+                 * inner components will be unmounted
+                 */
+                this.forceUpdate();
+            }
+        }
+        async present(prevProps) {
+            const { children, isOpen, onDidDismiss, onDidPresent, onWillDismiss, onWillPresent, ...cProps } = this.props;
+            const elementProps = {
+                ...cProps,
+                ref: this.props.forwardedRef,
+                [didDismissEventName]: this.handleDismiss,
+                [didPresentEventName]: (e) => this.props.onDidPresent && this.props.onDidPresent(e),
+                [willDismissEventName]: (e) => this.props.onWillDismiss && this.props.onWillDismiss(e),
+                [willPresentEventName]: (e) => this.props.onWillPresent && this.props.onWillPresent(e),
+            };
+            this.overlay = await controller.create({
+                ...elementProps,
+                component: this.el,
+                componentProps: {},
+            });
+            setRef(this.props.forwardedRef, this.overlay);
+            attachProps(this.overlay, elementProps, prevProps);
+            await this.overlay.present();
+        }
+        render() {
+            /**
+             * Continue to render the component even when
+             * overlay is dismissing otherwise component
+             * will be hidden before animation is done.
+             */
+            return ReactDOM.createPortal(this.props.isOpen || isDismissing ? this.props.children : null, this.el);
+        }
+    }
+    return React.forwardRef((props, ref) => {
+        return _jsx(Overlay, { ...props, forwardedRef: ref });
+    });
+};

package/dist/react-component-lib/index.d.ts

@@ -0,0 +1,3 @@
+export { createReactComponent } from './createComponent';
+export { createOverlayComponent } from './createOverlayComponent';
+//# sourceMappingURL=index.d.ts.map

package/dist/react-component-lib/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/react-component-lib/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,mBAAmB,CAAC;AACzD,OAAO,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAC"}

package/dist/react-component-lib/index.js

@@ -0,0 +1,2 @@
+export { createReactComponent } from './createComponent';
+export { createOverlayComponent } from './createOverlayComponent';

package/dist/react-component-lib/interfaces.d.ts

@@ -0,0 +1,30 @@
+export interface EventEmitter<T = any> {
+    emit: (data?: T) => CustomEvent<T>;
+}
+export interface StyleReactProps {
+    class?: string;
+    className?: string;
+    style?: {
+        [key: string]: any;
+    };
+}
+export interface OverlayEventDetail<T = any> {
+    data?: T;
+    role?: string;
+}
+export interface OverlayInterface {
+    el: HTMLElement;
+    animated: boolean;
+    keyboardClose: boolean;
+    overlayIndex: number;
+    presented: boolean;
+    enterAnimation?: any;
+    leaveAnimation?: any;
+    didPresent: EventEmitter<void>;
+    willPresent: EventEmitter<void>;
+    willDismiss: EventEmitter<OverlayEventDetail>;
+    didDismiss: EventEmitter<OverlayEventDetail>;
+    present(): Promise<void>;
+    dismiss(data?: any, role?: string): Promise<boolean>;
+}
+//# sourceMappingURL=interfaces.d.ts.map

package/dist/react-component-lib/interfaces.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../src/react-component-lib/interfaces.ts"],"names":[],"mappings":"AACA,MAAM,WAAW,YAAY,CAAC,CAAC,GAAG,GAAG;IACnC,IAAI,EAAE,CAAC,IAAI,CAAC,EAAE,CAAC,KAAK,WAAW,CAAC,CAAC,CAAC,CAAC;CACpC;AAED,MAAM,WAAW,eAAe;IAC9B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;KAAE,CAAC;CAChC;AAED,MAAM,WAAW,kBAAkB,CAAC,CAAC,GAAG,GAAG;IACzC,IAAI,CAAC,EAAE,CAAC,CAAC;IACT,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,gBAAgB;IAC/B,EAAE,EAAE,WAAW,CAAC;IAChB,QAAQ,EAAE,OAAO,CAAC;IAClB,aAAa,EAAE,OAAO,CAAC;IACvB,YAAY,EAAE,MAAM,CAAC;IACrB,SAAS,EAAE,OAAO,CAAC;IAEnB,cAAc,CAAC,EAAE,GAAG,CAAC;IACrB,cAAc,CAAC,EAAE,GAAG,CAAC;IAErB,UAAU,EAAE,YAAY,CAAC,IAAI,CAAC,CAAC;IAC/B,WAAW,EAAE,YAAY,CAAC,IAAI,CAAC,CAAC;IAChC,WAAW,EAAE,YAAY,CAAC,kBAAkB,CAAC,CAAC;IAC9C,UAAU,EAAE,YAAY,CAAC,kBAAkB,CAAC,CAAC;IAE7C,OAAO,IAAI,OAAO,CAAC,IAAI,CAAC,CAAC;IACzB,OAAO,CAAC,IAAI,CAAC,EAAE,GAAG,EAAE,IAAI,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC,OAAO,CAAC,CAAC;CACtD"}

package/dist/react-component-lib/interfaces.js

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

package/dist/react-component-lib/utils/attachProps.d.ts

@@ -0,0 +1,17 @@
+export declare const attachProps: (node: HTMLElement, newProps: any, oldProps?: any) => void;
+export declare const getClassName: (classList: DOMTokenList, newProps: any, oldProps: any) => string;
+/**
+ * Transforms a React event name to a browser event name.
+ */
+export declare const transformReactEventName: (eventNameSuffix: string) => string;
+/**
+ * Checks if an event is supported in the current execution environment.
+ * @license Modernizr 3.0.0pre (Custom Build) | MIT
+ */
+export declare const isCoveredByReact: (eventNameSuffix: string) => boolean;
+export declare const syncEvent: (node: Element & {
+    __events?: {
+        [key: string]: ((e: Event) => any) | undefined;
+    };
+}, eventName: string, newEventHandler?: (e: Event) => any) => void;
+//# sourceMappingURL=attachProps.d.ts.map

package/dist/react-component-lib/utils/attachProps.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"attachProps.d.ts","sourceRoot":"","sources":["../../../src/react-component-lib/utils/attachProps.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,WAAW,GAAI,MAAM,WAAW,EAAE,UAAU,GAAG,EAAE,WAAU,GAAQ,SAoC/E,CAAC;AAEF,eAAO,MAAM,YAAY,GAAI,WAAW,YAAY,EAAE,UAAU,GAAG,EAAE,UAAU,GAAG,WAsBjF,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,uBAAuB,GAAI,iBAAiB,MAAM,WAM9D,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,gBAAgB,GAAI,iBAAiB,MAAM,YAevD,CAAC;AAEF,eAAO,MAAM,SAAS,GACpB,MAAM,OAAO,GAAG;IAAE,QAAQ,CAAC,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,CAAC,CAAC,CAAC,EAAE,KAAK,KAAK,GAAG,CAAC,GAAG,SAAS,CAAA;KAAE,CAAA;CAAE,EACjF,WAAW,MAAM,EACjB,kBAAkB,CAAC,CAAC,EAAE,KAAK,KAAK,GAAG,SAmBpC,CAAC"}

package/dist/react-component-lib/utils/attachProps.js

@@ -0,0 +1,107 @@
+import { camelToDashCase } from './case';
+export const attachProps = (node, newProps, oldProps = {}) => {
+    // some test frameworks don't render DOM elements, so we test here to make sure we are dealing with DOM first
+    if (node instanceof Element) {
+        // add any classes in className to the class list
+        const className = getClassName(node.classList, newProps, oldProps);
+        if (className !== '') {
+            node.className = className;
+        }
+        Object.keys(newProps).forEach((name) => {
+            if (name === 'children' ||
+                name === 'style' ||
+                name === 'ref' ||
+                name === 'class' ||
+                name === 'className' ||
+                name === 'forwardedRef') {
+                return;
+            }
+            if (name.indexOf('on') === 0 && name[2] === name[2].toUpperCase()) {
+                const eventName = name.substring(2);
+                const eventNameLc = eventName[0].toLowerCase() + eventName.substring(1);
+                if (!isCoveredByReact(eventNameLc)) {
+                    syncEvent(node, eventNameLc, newProps[name]);
+                }
+            }
+            else {
+                node[name] = newProps[name];
+                const propType = typeof newProps[name];
+                if (propType === 'string') {
+                    node.setAttribute(camelToDashCase(name), newProps[name]);
+                }
+            }
+        });
+    }
+};
+export const getClassName = (classList, newProps, oldProps) => {
+    const newClassProp = newProps.className || newProps.class;
+    const oldClassProp = oldProps.className || oldProps.class;
+    // map the classes to Maps for performance
+    const currentClasses = arrayToMap(classList);
+    const incomingPropClasses = arrayToMap(newClassProp ? newClassProp.split(' ') : []);
+    const oldPropClasses = arrayToMap(oldClassProp ? oldClassProp.split(' ') : []);
+    const finalClassNames = [];
+    // loop through each of the current classes on the component
+    // to see if it should be a part of the classNames added
+    currentClasses.forEach((currentClass) => {
+        if (incomingPropClasses.has(currentClass)) {
+            // add it as its already included in classnames coming in from newProps
+            finalClassNames.push(currentClass);
+            incomingPropClasses.delete(currentClass);
+        }
+        else if (!oldPropClasses.has(currentClass)) {
+            // add it as it has NOT been removed by user
+            finalClassNames.push(currentClass);
+        }
+    });
+    incomingPropClasses.forEach((s) => finalClassNames.push(s));
+    return finalClassNames.join(' ');
+};
+/**
+ * Transforms a React event name to a browser event name.
+ */
+export const transformReactEventName = (eventNameSuffix) => {
+    switch (eventNameSuffix) {
+        case 'doubleclick':
+            return 'dblclick';
+    }
+    return eventNameSuffix;
+};
+/**
+ * Checks if an event is supported in the current execution environment.
+ * @license Modernizr 3.0.0pre (Custom Build) | MIT
+ */
+export const isCoveredByReact = (eventNameSuffix) => {
+    if (typeof document === 'undefined') {
+        return true;
+    }
+    else {
+        const eventName = 'on' + transformReactEventName(eventNameSuffix);
+        let isSupported = eventName in document;
+        if (!isSupported) {
+            const element = document.createElement('div');
+            element.setAttribute(eventName, 'return;');
+            isSupported = typeof element[eventName] === 'function';
+        }
+        return isSupported;
+    }
+};
+export const syncEvent = (node, eventName, newEventHandler) => {
+    const eventStore = node.__events || (node.__events = {});
+    const oldEventHandler = eventStore[eventName];
+    // Remove old listener so they don't double up.
+    if (oldEventHandler) {
+        node.removeEventListener(eventName, oldEventHandler);
+    }
+    // Bind new listener.
+    node.addEventListener(eventName, (eventStore[eventName] = function handler(e) {
+        if (newEventHandler) {
+            newEventHandler.call(this, e);
+        }
+    }));
+};
+const arrayToMap = (arr) => {
+    const map = new Map();
+    arr.forEach((s) => map.set(s, s));
+    return map;
+};

package/dist/react-component-lib/utils/case.d.ts

@@ -0,0 +1,3 @@
+export declare const dashToPascalCase: (str: string) => string;
+export declare const camelToDashCase: (str: string) => string;
+//# sourceMappingURL=case.d.ts.map

package/dist/react-component-lib/utils/case.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"case.d.ts","sourceRoot":"","sources":["../../../src/react-component-lib/utils/case.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,gBAAgB,GAAI,KAAK,MAAM,WAK/B,CAAC;AACd,eAAO,MAAM,eAAe,GAAI,KAAK,MAAM,WAAqE,CAAC"}

package/dist/react-component-lib/utils/case.js

@@ -0,0 +1,6 @@
+export const dashToPascalCase = (str) => str
+    .toLowerCase()
+    .split('-')
+    .map((segment) => segment.charAt(0).toUpperCase() + segment.slice(1))
+    .join('');
+export const camelToDashCase = (str) => str.replace(/([A-Z])/g, (m) => `-${m[0].toLowerCase()}`);

package/dist/react-component-lib/utils/dev.d.ts

@@ -0,0 +1,3 @@
+export declare const isDevMode: () => boolean;
+export declare const deprecationWarning: (key: string, message: string) => void;
+//# sourceMappingURL=dev.d.ts.map

package/dist/react-component-lib/utils/dev.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dev.d.ts","sourceRoot":"","sources":["../../../src/react-component-lib/utils/dev.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,SAAS,eAErB,CAAC;AAIF,eAAO,MAAM,kBAAkB,GAAI,KAAK,MAAM,EAAE,SAAS,MAAM,SAO9D,CAAC"}

package/dist/react-component-lib/utils/dev.js

@@ -0,0 +1,12 @@
+export const isDevMode = () => {
+    return process && process.env && process.env.NODE_ENV === 'development';
+};
+const warnings = {};
+export const deprecationWarning = (key, message) => {
+    if (isDevMode()) {
+        if (!warnings[key]) {
+            console.warn(message);
+            warnings[key] = true;
+        }
+    }
+};

package/dist/react-component-lib/utils/index.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import type { StyleReactProps } from '../interfaces';
+export type StencilReactExternalProps<PropType, ElementType> = PropType & Omit<React.HTMLAttributes<ElementType>, 'style'> & StyleReactProps;
+export type StencilReactForwardedRef<T> = ((instance: T | null) => void) | React.MutableRefObject<T | null> | null;
+export declare const setRef: (ref: StencilReactForwardedRef<any> | React.Ref<any> | undefined, value: any) => void;
+export declare const mergeRefs: (...refs: (StencilReactForwardedRef<any> | React.Ref<any> | undefined)[]) => React.RefCallback<any>;
+export declare const createForwardRef: <PropType, ElementType>(ReactComponent: any, displayName: string) => React.ForwardRefExoticComponent<React.PropsWithoutRef<StencilReactExternalProps<PropType, ElementType>> & React.RefAttributes<ElementType>>;
+export declare const defineCustomElement: (tagName: string, customElement: any) => void;
+export * from './attachProps';
+export * from './case';
+//# sourceMappingURL=index.d.ts.map

package/dist/react-component-lib/utils/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/react-component-lib/utils/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAErD,MAAM,MAAM,yBAAyB,CAAC,QAAQ,EAAE,WAAW,IAAI,QAAQ,GACrE,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,OAAO,CAAC,GAChD,eAAe,CAAC;AAGlB,MAAM,MAAM,wBAAwB,CAAC,CAAC,IAAI,CAAC,CAAC,QAAQ,EAAE,CAAC,GAAG,IAAI,KAAK,IAAI,CAAC,GAAG,KAAK,CAAC,gBAAgB,CAAC,CAAC,GAAG,IAAI,CAAC,GAAG,IAAI,CAAC;AAEnH,eAAO,MAAM,MAAM,GAAI,KAAK,wBAAwB,CAAC,GAAG,CAAC,GAAG,KAAK,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,SAAS,EAAE,OAAO,GAAG,SAOjG,CAAC;AAEF,eAAO,MAAM,SAAS,GACpB,GAAG,MAAM,CAAC,wBAAwB,CAAC,GAAG,CAAC,GAAG,KAAK,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,SAAS,CAAC,EAAE,KACtE,KAAK,CAAC,WAAW,CAAC,GAAG,CAMvB,CAAC;AAEF,eAAO,MAAM,gBAAgB,GAAI,QAAQ,EAAE,WAAW,EAAE,gBAAgB,GAAG,EAAE,aAAa,MAAM,gJAU/F,CAAC;AAEF,eAAO,MAAM,mBAAmB,GAAI,SAAS,MAAM,EAAE,eAAe,GAAG,SAItE,CAAC;AAEF,cAAc,eAAe,CAAC;AAC9B,cAAc,QAAQ,CAAC"}

package/dist/react-component-lib/utils/index.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+// @ts-nocheck
+import React from 'react';
+export const setRef = (ref, value) => {
+    if (typeof ref === 'function') {
+        ref(value);
+    }
+    else if (ref != null) {
+        // Cast as a MutableRef so we can assign current
+        ref.current = value;
+    }
+};
+export const mergeRefs = (...refs) => {
+    return (value) => {
+        refs.forEach((ref) => {
+            setRef(ref, value);
+        });
+    };
+};
+export const createForwardRef = (ReactComponent, displayName) => {
+    const forwardRef = (props, ref) => {
+        return _jsx(ReactComponent, { ...props, forwardedRef: ref });
+    };
+    forwardRef.displayName = displayName;
+    return React.forwardRef(forwardRef);
+};
+export const defineCustomElement = (tagName, customElement) => {
+    if (customElement !== undefined && typeof customElements !== 'undefined' && !customElements.get(tagName)) {
+        customElements.define(tagName, customElement);
+    }
+};
+export * from './attachProps';
+export * from './case';

package/package.json

@@ -0,0 +1,48 @@
+{
+  "name": "@diwacopilot/components-react",
+  "version": "1.0.0",
+  "description": "React wrapper package for Diwa Web Components.",
+  "license": "MIT",
+  "type": "module",
+  "main": "dist/index.js",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    }
+  },
+  "scripts": {
+    "build": "node scripts/patch-generated-react-lib.cjs && tsc -p tsconfig.json",
+    "prepack": "npm run build"
+  },
+  "peerDependencies": {
+    "@diwacopilot/components": "^1.0.0",
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0"
+  },
+  "devDependencies": {
+    "@diwacopilot/components": "file:../diwa-components",
+    "@types/react": "^19.2.2",
+    "@types/react-dom": "^19.2.2",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "typescript": "^5.7.2"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/jortega0033/diwa-design-system.git",
+    "directory": "diwa-components-react"
+  },
+  "bugs": {
+    "url": "https://github.com/jortega0033/diwa-design-system/issues"
+  },
+  "homepage": "https://github.com/jortega0033/diwa-design-system#readme"
+}