@globalpayments-private/gpds-pattern-web-react 0.0.0-stage → 0.1.28

package/dist/composition/resource.d.ts

@@ -0,0 +1,36 @@
+import { type ReactElement, type ReactNode } from 'react';
+import type { UdsAdminResource } from '@globalpayments-private/gpds-pattern-web';
+/**
+ * `Resource`: a thin rename of `gp-resource` (ADR 0012), named after real
+ * react-admin's `<Resource name="posts" list={PostList} />`
+ * (https://marmelab.com/react-admin/Tutorial.html). See
+ * `docs/specs/north-star-composition.md` §9 and §11.
+ *
+ * Unlike `Admin`, `Resource`'s children are **not** forwarded — they are a
+ * marker tree (a `<List>` and/or a `<SimpleForm>`), read once into a
+ * `UdsAdminResource.list` / `.record` / `.perPage` set and discarded.
+ * `gp-resource` has no slot for them; forwarding would just mount
+ * `null`-returning components for no reason.
+ *
+ * Written with `createElement` rather than JSX — see `admin.tsx`'s comment.
+ */
+export interface ResourceProps {
+    name: string;
+    label?: string;
+    icon?: string;
+    children?: ReactNode;
+}
+export declare function Resource({ name, label, icon, children }: ResourceProps): ReactElement;
+/**
+ * Pure: builds the `list`/`record`/`perPage` members of a `UdsAdminResource`
+ * from a `<Resource>`'s children, in any order, any of them present.
+ *
+ * Four kinds of child are read. A `<List>` gives the list config and
+ * `perPage`. A `<Show>`/`<Edit>`/`<Create>` gives the record config
+ * (`record.tsx`). A bare `<SimpleForm>` gives the same thing unwrapped — the
+ * shorter spelling this layer shipped before the wrappers existed, kept
+ * working because it is a published API and because react-admin's own
+ * `<SimpleForm>` is likewise usable wherever a form is. A
+ * `<ReferenceManyField>` replaces the list with a related panel.
+ */
+export declare function resourceConfigFromChildren(children: ReactNode): Pick<UdsAdminResource, 'list' | 'record' | 'perPage'>;

package/dist/composition/resource.js

@@ -0,0 +1,52 @@
+import { createElement } from 'react';
+// Relative, not the `./react` package subpath — see `admin.tsx`'s comment.
+import { GpResource } from '@globalpayments-private/gpds-pattern-web-react';
+import { List, listConfigFromChildren } from './list';
+import { SimpleForm, fieldsFromChildren } from './simple-form';
+import { recordConfigFromChildren } from './record';
+import { findReferenceManyField, relatedListConfigFrom } from './reference-many';
+import { reactChildrenToArray } from './children';
+export function Resource({ name, label, icon, children }) {
+    const config = { name, label, icon, ...resourceConfigFromChildren(children) };
+    return createElement(GpResource, { name, label, icon, config });
+}
+/**
+ * Pure: builds the `list`/`record`/`perPage` members of a `UdsAdminResource`
+ * from a `<Resource>`'s children, in any order, any of them present.
+ *
+ * Four kinds of child are read. A `<List>` gives the list config and
+ * `perPage`. A `<Show>`/`<Edit>`/`<Create>` gives the record config
+ * (`record.tsx`). A bare `<SimpleForm>` gives the same thing unwrapped — the
+ * shorter spelling this layer shipped before the wrappers existed, kept
+ * working because it is a published API and because react-admin's own
+ * `<SimpleForm>` is likewise usable wherever a form is. A
+ * `<ReferenceManyField>` replaces the list with a related panel.
+ */
+export function resourceConfigFromChildren(children) {
+    const config = {};
+    reactChildrenToArray(children).forEach((child) => {
+        if (isListElement(child)) {
+            const { perPage, filters, children: listChildren } = child.props;
+            config.list = { ...listConfigFromChildren(listChildren), filters };
+            config.perPage = perPage;
+        }
+        else if (isSimpleFormElement(child)) {
+            config.record = { fields: fieldsFromChildren(child.props.children) };
+        }
+    });
+    const record = recordConfigFromChildren(children);
+    if (record) {
+        config.record = record;
+    }
+    const related = findReferenceManyField(children);
+    if (related) {
+        config.list = relatedListConfigFrom(related);
+    }
+    return config;
+}
+function isListElement(node) {
+    return typeof node === 'object' && node !== null && 'type' in node && node.type === List;
+}
+function isSimpleFormElement(node) {
+    return (typeof node === 'object' && node !== null && 'type' in node && node.type === SimpleForm);
+}

package/dist/composition/simple-form.d.ts

@@ -0,0 +1,96 @@
+import type { ReactNode } from 'react';
+import type { UdsReference, UdsRecordField } from '@globalpayments-private/gpds-pattern-web';
+/**
+ * `SimpleForm` and its input markers: non-rendering marker components read by
+ * `Resource` (`resource.tsx`) to build a `UdsAdminRecordConfig.fields` before
+ * anything reaches `gp-resource`/`gp-pattern-record`.
+ *
+ * Named after real react-admin's own tutorial form
+ * (https://marmelab.com/react-admin/Tutorial.html#editing-records):
+ *
+ * ```tsx
+ * <Edit>
+ *   <SimpleForm>
+ *     <TextInput source="title" />
+ *     <ReferenceInput source="userId" reference="users" />
+ *   </SimpleForm>
+ * </Edit>
+ * ```
+ *
+ * ## Why `<SimpleForm>` is still usable bare, now that `<Edit>`/`<Create>` exist
+ *
+ * `<Show>`, `<Edit>` and `<Create>` ship in `record.tsx` (ADR 0030) and may
+ * carry genuinely different field sets, merged into the shell's one
+ * `UdsRecordConfig.fields` array and gated per mode by `UdsRecordField.modes`
+ * (ADR 0031). A bare `<SimpleForm>` under `<Resource>` remains supported and
+ * unchanged: it declares one field set used by all three modes, which is both
+ * the simplest thing to author and what every tree written before the
+ * wrappers existed does. Reach for the wrappers when the modes differ; reach
+ * for `<SimpleForm>` alone when they do not. See
+ * `docs/specs/north-star-composition.md` §11 and §14.
+ *
+ * ## Why these never render
+ *
+ * Same reasoning as `list.tsx`'s marker components: each input is called with
+ * its props at read time (`fieldsFromChildren`, below) and the resulting
+ * `UdsRecordField[]` is handed to `<GpResource config>` — the same public
+ * prop a hand-written consumer uses. None of these functions is ever invoked
+ * by React; they only need a stable function identity.
+ */
+interface BaseInputProps {
+    field: string;
+    label: string;
+    required?: boolean;
+    placeholder?: string;
+    /**
+     * Shows the value without offering to change it, mirroring react-admin's
+     * own [`readOnly`](https://marmelab.com/react-admin/Inputs.html#readonly)
+     * on every input.
+     *
+     * Needed for the same reason react-admin needs it: a detail view is mostly
+     * fields the application does not let you edit, and an `<Edit>` of nothing
+     * but writable fields is not the same screen. Without it a composition-
+     * authored resource could show a form or nothing, which is why this landed
+     * with the actions work (ADR 0032) rather than separately — merchant-ops
+     * has one writable field across four resources.
+     */
+    readOnly?: boolean;
+}
+export interface TextInputProps extends BaseInputProps {
+    /** Mirrors react-admin's own `multiline` — renders as `UdsRecordInput: 'textarea'`. */
+    multiline?: boolean;
+    /** `{ resource: 'merchants' }` shorthand — defaults the referenced field to `'name'`. */
+    reference?: string | UdsReference;
+}
+/** Marker component for a plain text field. Never rendered — see the module doc. */
+export declare function TextInput(_props: TextInputProps): null;
+export type NumberInputProps = BaseInputProps;
+/** Marker component for a number field. Never rendered. */
+export declare function NumberInput(_props: NumberInputProps): null;
+export type BooleanInputProps = BaseInputProps;
+/** Marker component for a checkbox field. Never rendered. */
+export declare function BooleanInput(_props: BooleanInputProps): null;
+export type DateInputProps = BaseInputProps;
+/** Marker component for a date field. Never rendered. */
+export declare function DateInput(_props: DateInputProps): null;
+export interface SelectInputProps extends BaseInputProps {
+    options: UdsRecordField['options'];
+}
+/** Marker component for a `<select>`-backed field. Never rendered. */
+export declare function SelectInput(_props: SelectInputProps): null;
+export interface ReferenceInputProps extends BaseInputProps {
+    reference: string | UdsReference;
+}
+/** Marker component for a single foreign-key field. Never rendered. */
+export declare function ReferenceInput(_props: ReferenceInputProps): null;
+export interface SimpleFormProps {
+    children?: ReactNode;
+}
+/** Marker component for the record form. Never rendered — see the module doc. */
+export declare function SimpleForm(_props: SimpleFormProps): null;
+/**
+ * Reads a `<SimpleForm>` element's children into a `UdsRecordField[]` — the
+ * exact shape `GpResource`'s `config.record.fields` takes.
+ */
+export declare function fieldsFromChildren(formChildren: ReactNode): UdsRecordField[];
+export {};

package/dist/composition/simple-form.js

@@ -0,0 +1,82 @@
+import { resolveReference } from './reference';
+import { reactChildrenToArray } from './children';
+/** Marker component for a plain text field. Never rendered — see the module doc. */
+export function TextInput(_props) {
+    return null;
+}
+/** Marker component for a number field. Never rendered. */
+export function NumberInput(_props) {
+    return null;
+}
+/** Marker component for a checkbox field. Never rendered. */
+export function BooleanInput(_props) {
+    return null;
+}
+/** Marker component for a date field. Never rendered. */
+export function DateInput(_props) {
+    return null;
+}
+/** Marker component for a `<select>`-backed field. Never rendered. */
+export function SelectInput(_props) {
+    return null;
+}
+/** Marker component for a single foreign-key field. Never rendered. */
+export function ReferenceInput(_props) {
+    return null;
+}
+/** Marker component for the record form. Never rendered — see the module doc. */
+export function SimpleForm(_props) {
+    return null;
+}
+function fieldFrom(element) {
+    const { type, props } = element;
+    const { field, label, required, placeholder, readOnly } = props;
+    const base = { field, label, required, placeholder, readOnly };
+    if (type === TextInput) {
+        const { multiline, reference } = props;
+        return { ...base, input: multiline ? 'textarea' : 'text', reference: resolveReference(reference) };
+    }
+    if (type === NumberInput) {
+        return { ...base, input: 'number' };
+    }
+    if (type === BooleanInput) {
+        return { ...base, input: 'checkbox' };
+    }
+    if (type === DateInput) {
+        return { ...base, input: 'date' };
+    }
+    if (type === SelectInput) {
+        return { ...base, input: 'select', options: props.options };
+    }
+    // ReferenceInput: `gp-pattern-record` renders the search control for any
+    // field with `reference` set (`vm.searchable`, see `record-field-renderer.tsx`)
+    // regardless of `input` — so a plain field carrying `reference` is enough.
+    return { ...base, reference: resolveReference(props.reference) };
+}
+/**
+ * Reads a `<SimpleForm>` element's children into a `UdsRecordField[]` — the
+ * exact shape `GpResource`'s `config.record.fields` takes.
+ */
+export function fieldsFromChildren(formChildren) {
+    const nodes = [];
+    reactChildrenToArray(formChildren).forEach((child) => {
+        if (isInputElement(child)) {
+            nodes.push(child);
+        }
+    });
+    return nodes.map(fieldFrom);
+}
+const INPUT_TYPES = new Set([
+    TextInput,
+    NumberInput,
+    BooleanInput,
+    DateInput,
+    SelectInput,
+    ReferenceInput,
+]);
+function isInputElement(node) {
+    return (typeof node === 'object' &&
+        node !== null &&
+        'type' in node &&
+        INPUT_TYPES.has(node.type));
+}

package/dist/gp-admin.d.ts

@@ -0,0 +1,9 @@
+import type { Components } from '@globalpayments-private/gpds-pattern-web/dist/components';
+import { GpAdmin as GpAdminElement } from '@globalpayments-private/gpds-pattern-web/dist/components/gp-admin.js';
+import type { UdsAdminRouteChangeDetail, UdsAdminSignOutDetail, GpAdminCustomEvent } from '@globalpayments-private/gpds-pattern-web';
+import type { StencilReactComponent, EventName } from '@stencil/react-output-target/runtime';
+export type GpAdminEvents = {
+    onGpAdminRouteChange: EventName<GpAdminCustomEvent<UdsAdminRouteChangeDetail>>;
+    onGpAdminSignOut: EventName<GpAdminCustomEvent<UdsAdminSignOutDetail>>;
+};
+export declare const GpAdmin: StencilReactComponent<GpAdminElement, GpAdminEvents, Components.GpAdmin>;

package/dist/gp-admin.js

@@ -0,0 +1,20 @@
+'use client';
+/**
+ * This file was automatically generated by the Stencil React Output Target.
+ * Changes to this file may cause incorrect behavior and will be lost if the code is regenerated.
+ */
+/* eslint-disable */
+import React from 'react';
+import { createComponent } from '@stencil/react-output-target/runtime';
+import { GpAdmin as GpAdminElement, defineCustomElement as defineGpAdmin } from '@globalpayments-private/gpds-pattern-web/dist/components/gp-admin.js';
+export const GpAdmin = /*@__PURE__*/ createComponent({
+    tagName: 'gp-admin',
+    elementClass: GpAdminElement,
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
+    react: React,
+    events: {
+        onGpAdminRouteChange: 'gpAdminRouteChange',
+        onGpAdminSignOut: 'gpAdminSignOut'
+    },
+    defineCustomElement: defineGpAdmin,
+});

package/dist/gp-pattern-list.d.ts

@@ -0,0 +1,11 @@
+import type { Components } from '@globalpayments-private/gpds-pattern-web/dist/components';
+import { GpPatternList as GpPatternListElement } from '@globalpayments-private/gpds-pattern-web/dist/components/gp-pattern-list.js';
+import type { UdsListRowClickDetail, UdsListCreateDetail, UdsListErrorDetail, UdsListSelectionChangeDetail, GpPatternListCustomEvent } from '@globalpayments-private/gpds-pattern-web';
+import type { StencilReactComponent, EventName } from '@stencil/react-output-target/runtime';
+export type GpPatternListEvents = {
+    onGpListRowClick: EventName<GpPatternListCustomEvent<UdsListRowClickDetail>>;
+    onGpListCreate: EventName<GpPatternListCustomEvent<UdsListCreateDetail>>;
+    onGpListError: EventName<GpPatternListCustomEvent<UdsListErrorDetail>>;
+    onGpListSelectionChange: EventName<GpPatternListCustomEvent<UdsListSelectionChangeDetail>>;
+};
+export declare const GpPatternList: StencilReactComponent<GpPatternListElement, GpPatternListEvents, Components.GpPatternList, 'resource'>;

package/dist/gp-pattern-list.js

@@ -0,0 +1,22 @@
+'use client';
+/**
+ * This file was automatically generated by the Stencil React Output Target.
+ * Changes to this file may cause incorrect behavior and will be lost if the code is regenerated.
+ */
+/* eslint-disable */
+import React from 'react';
+import { createComponent } from '@stencil/react-output-target/runtime';
+import { GpPatternList as GpPatternListElement, defineCustomElement as defineGpPatternList } from '@globalpayments-private/gpds-pattern-web/dist/components/gp-pattern-list.js';
+export const GpPatternList = /*@__PURE__*/ createComponent({
+    tagName: 'gp-pattern-list',
+    elementClass: GpPatternListElement,
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
+    react: React,
+    events: {
+        onGpListRowClick: 'gpListRowClick',
+        onGpListCreate: 'gpListCreate',
+        onGpListError: 'gpListError',
+        onGpListSelectionChange: 'gpListSelectionChange'
+    },
+    defineCustomElement: defineGpPatternList,
+});

package/dist/gp-pattern-record.d.ts

@@ -0,0 +1,12 @@
+import type { Components } from '@globalpayments-private/gpds-pattern-web/dist/components';
+import { GpPatternRecord as GpPatternRecordElement } from '@globalpayments-private/gpds-pattern-web/dist/components/gp-pattern-record.js';
+import type { UdsRecordSaveDetail, UdsRecordDeleteDetail, UdsRecordCancelDetail, UdsRecordDirtyChangeDetail, UdsRecordErrorDetail, GpPatternRecordCustomEvent } from '@globalpayments-private/gpds-pattern-web';
+import type { StencilReactComponent, EventName } from '@stencil/react-output-target/runtime';
+export type GpPatternRecordEvents = {
+    onGpRecordSave: EventName<GpPatternRecordCustomEvent<UdsRecordSaveDetail>>;
+    onGpRecordDelete: EventName<GpPatternRecordCustomEvent<UdsRecordDeleteDetail>>;
+    onGpRecordCancel: EventName<GpPatternRecordCustomEvent<UdsRecordCancelDetail>>;
+    onGpRecordDirtyChange: EventName<GpPatternRecordCustomEvent<UdsRecordDirtyChangeDetail>>;
+    onGpRecordError: EventName<GpPatternRecordCustomEvent<UdsRecordErrorDetail>>;
+};
+export declare const GpPatternRecord: StencilReactComponent<GpPatternRecordElement, GpPatternRecordEvents, Components.GpPatternRecord, 'resource'>;

package/dist/gp-pattern-record.js

@@ -0,0 +1,23 @@
+'use client';
+/**
+ * This file was automatically generated by the Stencil React Output Target.
+ * Changes to this file may cause incorrect behavior and will be lost if the code is regenerated.
+ */
+/* eslint-disable */
+import React from 'react';
+import { createComponent } from '@stencil/react-output-target/runtime';
+import { GpPatternRecord as GpPatternRecordElement, defineCustomElement as defineGpPatternRecord } from '@globalpayments-private/gpds-pattern-web/dist/components/gp-pattern-record.js';
+export const GpPatternRecord = /*@__PURE__*/ createComponent({
+    tagName: 'gp-pattern-record',
+    elementClass: GpPatternRecordElement,
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
+    react: React,
+    events: {
+        onGpRecordSave: 'gpRecordSave',
+        onGpRecordDelete: 'gpRecordDelete',
+        onGpRecordCancel: 'gpRecordCancel',
+        onGpRecordDirtyChange: 'gpRecordDirtyChange',
+        onGpRecordError: 'gpRecordError'
+    },
+    defineCustomElement: defineGpPatternRecord,
+});

package/dist/gp-pattern-reference-input.d.ts

@@ -0,0 +1,8 @@
+import type { Components } from '@globalpayments-private/gpds-pattern-web/dist/components';
+import { GpPatternReferenceInput as GpPatternReferenceInputElement } from '@globalpayments-private/gpds-pattern-web/dist/components/gp-pattern-reference-input.js';
+import type { UdsReferenceChangeDetail, GpPatternReferenceInputCustomEvent } from '@globalpayments-private/gpds-pattern-web';
+import type { StencilReactComponent, EventName } from '@stencil/react-output-target/runtime';
+export type GpPatternReferenceInputEvents = {
+    onGpReferenceChange: EventName<GpPatternReferenceInputCustomEvent<UdsReferenceChangeDetail>>;
+};
+export declare const GpPatternReferenceInput: StencilReactComponent<GpPatternReferenceInputElement, GpPatternReferenceInputEvents, Components.GpPatternReferenceInput>;

package/dist/gp-pattern-reference-input.js

@@ -0,0 +1,19 @@
+'use client';
+/**
+ * This file was automatically generated by the Stencil React Output Target.
+ * Changes to this file may cause incorrect behavior and will be lost if the code is regenerated.
+ */
+/* eslint-disable */
+import React from 'react';
+import { createComponent } from '@stencil/react-output-target/runtime';
+import { GpPatternReferenceInput as GpPatternReferenceInputElement, defineCustomElement as defineGpPatternReferenceInput } from '@globalpayments-private/gpds-pattern-web/dist/components/gp-pattern-reference-input.js';
+export const GpPatternReferenceInput = /*@__PURE__*/ createComponent({
+    tagName: 'gp-pattern-reference-input',
+    elementClass: GpPatternReferenceInputElement,
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
+    react: React,
+    events: {
+        onGpReferenceChange: 'gpReferenceChange'
+    },
+    defineCustomElement: defineGpPatternReferenceInput,
+});

package/dist/gp-pattern-wizard.d.ts

@@ -0,0 +1,11 @@
+import type { Components } from '@globalpayments-private/gpds-pattern-web/dist/components';
+import { GpPatternWizard as GpPatternWizardElement } from '@globalpayments-private/gpds-pattern-web/dist/components/gp-pattern-wizard.js';
+import type { UdsWizardStepChangeDetail, UdsWizardCompleteDetail, UdsWizardErrorDetail, UdsWizardValuesChangeDetail, GpPatternWizardCustomEvent } from '@globalpayments-private/gpds-pattern-web';
+import type { StencilReactComponent, EventName } from '@stencil/react-output-target/runtime';
+export type GpPatternWizardEvents = {
+    onGpWizardStepChange: EventName<GpPatternWizardCustomEvent<UdsWizardStepChangeDetail>>;
+    onGpWizardComplete: EventName<GpPatternWizardCustomEvent<UdsWizardCompleteDetail>>;
+    onGpWizardError: EventName<GpPatternWizardCustomEvent<UdsWizardErrorDetail>>;
+    onGpWizardValuesChange: EventName<GpPatternWizardCustomEvent<UdsWizardValuesChangeDetail>>;
+};
+export declare const GpPatternWizard: StencilReactComponent<GpPatternWizardElement, GpPatternWizardEvents, Components.GpPatternWizard>;

package/dist/gp-pattern-wizard.js

@@ -0,0 +1,22 @@
+'use client';
+/**
+ * This file was automatically generated by the Stencil React Output Target.
+ * Changes to this file may cause incorrect behavior and will be lost if the code is regenerated.
+ */
+/* eslint-disable */
+import React from 'react';
+import { createComponent } from '@stencil/react-output-target/runtime';
+import { GpPatternWizard as GpPatternWizardElement, defineCustomElement as defineGpPatternWizard } from '@globalpayments-private/gpds-pattern-web/dist/components/gp-pattern-wizard.js';
+export const GpPatternWizard = /*@__PURE__*/ createComponent({
+    tagName: 'gp-pattern-wizard',
+    elementClass: GpPatternWizardElement,
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
+    react: React,
+    events: {
+        onGpWizardStepChange: 'gpWizardStepChange',
+        onGpWizardComplete: 'gpWizardComplete',
+        onGpWizardError: 'gpWizardError',
+        onGpWizardValuesChange: 'gpWizardValuesChange'
+    },
+    defineCustomElement: defineGpPatternWizard,
+});

package/dist/gp-resource.d.ts

@@ -0,0 +1,5 @@
+import type { Components } from '@globalpayments-private/gpds-pattern-web/dist/components';
+import { GpResource as GpResourceElement } from '@globalpayments-private/gpds-pattern-web/dist/components/gp-resource.js';
+import type { StencilReactComponent } from '@stencil/react-output-target/runtime';
+export type GpResourceEvents = NonNullable<unknown>;
+export declare const GpResource: StencilReactComponent<GpResourceElement, GpResourceEvents, Components.GpResource, 'name'>;

package/dist/gp-resource.js

@@ -0,0 +1,17 @@
+'use client';
+/**
+ * This file was automatically generated by the Stencil React Output Target.
+ * Changes to this file may cause incorrect behavior and will be lost if the code is regenerated.
+ */
+/* eslint-disable */
+import React from 'react';
+import { createComponent } from '@stencil/react-output-target/runtime';
+import { GpResource as GpResourceElement, defineCustomElement as defineGpResource } from '@globalpayments-private/gpds-pattern-web/dist/components/gp-resource.js';
+export const GpResource = /*@__PURE__*/ createComponent({
+    tagName: 'gp-resource',
+    elementClass: GpResourceElement,
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
+    react: React,
+    events: {},
+    defineCustomElement: defineGpResource,
+});

package/dist/uds-pattern-login-card.d.ts

@@ -0,0 +1,13 @@
+import type { Components } from '@globalpayments-private/gpds-pattern-web/dist/components';
+import { UdsPatternLoginCard as UdsPatternLoginCardElement } from '@globalpayments-private/gpds-pattern-web/dist/components/uds-pattern-login-card.js';
+import type { UdsSession, UdsLoginStepChangeDetail, UdsLoginErrorDetail, UdsLoginActionDetail, UdsPatternLoginCardCustomEvent } from '@globalpayments-private/gpds-pattern-web';
+import type { StencilReactComponent, EventName } from '@stencil/react-output-target/runtime';
+export type UdsPatternLoginCardEvents = {
+    onUdsLoginSuccess: EventName<UdsPatternLoginCardCustomEvent<{
+        session?: UdsSession;
+    }>>;
+    onUdsLoginStepChange: EventName<UdsPatternLoginCardCustomEvent<UdsLoginStepChangeDetail>>;
+    onUdsLoginError: EventName<UdsPatternLoginCardCustomEvent<UdsLoginErrorDetail>>;
+    onUdsLoginAction: EventName<UdsPatternLoginCardCustomEvent<UdsLoginActionDetail>>;
+};
+export declare const UdsPatternLoginCard: StencilReactComponent<UdsPatternLoginCardElement, UdsPatternLoginCardEvents, Components.UdsPatternLoginCard>;

package/dist/uds-pattern-login-card.js

@@ -0,0 +1,22 @@
+'use client';
+/**
+ * This file was automatically generated by the Stencil React Output Target.
+ * Changes to this file may cause incorrect behavior and will be lost if the code is regenerated.
+ */
+/* eslint-disable */
+import React from 'react';
+import { createComponent } from '@stencil/react-output-target/runtime';
+import { UdsPatternLoginCard as UdsPatternLoginCardElement, defineCustomElement as defineUdsPatternLoginCard } from '@globalpayments-private/gpds-pattern-web/dist/components/uds-pattern-login-card.js';
+export const UdsPatternLoginCard = /*@__PURE__*/ createComponent({
+    tagName: 'uds-pattern-login-card',
+    elementClass: UdsPatternLoginCardElement,
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
+    react: React,
+    events: {
+        onUdsLoginSuccess: 'udsLoginSuccess',
+        onUdsLoginStepChange: 'udsLoginStepChange',
+        onUdsLoginError: 'udsLoginError',
+        onUdsLoginAction: 'udsLoginAction'
+    },
+    defineCustomElement: defineUdsPatternLoginCard,
+});

package/dist/uds-pattern-login-page.d.ts

@@ -0,0 +1,5 @@
+import type { Components } from '@globalpayments-private/gpds-pattern-web/dist/components';
+import { UdsPatternLoginPage as UdsPatternLoginPageElement } from '@globalpayments-private/gpds-pattern-web/dist/components/uds-pattern-login-page.js';
+import type { StencilReactComponent } from '@stencil/react-output-target/runtime';
+export type UdsPatternLoginPageEvents = NonNullable<unknown>;
+export declare const UdsPatternLoginPage: StencilReactComponent<UdsPatternLoginPageElement, UdsPatternLoginPageEvents, Components.UdsPatternLoginPage>;

package/dist/uds-pattern-login-page.js

@@ -0,0 +1,17 @@
+'use client';
+/**
+ * This file was automatically generated by the Stencil React Output Target.
+ * Changes to this file may cause incorrect behavior and will be lost if the code is regenerated.
+ */
+/* eslint-disable */
+import React from 'react';
+import { createComponent } from '@stencil/react-output-target/runtime';
+import { UdsPatternLoginPage as UdsPatternLoginPageElement, defineCustomElement as defineUdsPatternLoginPage } from '@globalpayments-private/gpds-pattern-web/dist/components/uds-pattern-login-page.js';
+export const UdsPatternLoginPage = /*@__PURE__*/ createComponent({
+    tagName: 'uds-pattern-login-page',
+    elementClass: UdsPatternLoginPageElement,
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
+    react: React,
+    events: {},
+    defineCustomElement: defineUdsPatternLoginPage,
+});

package/package.json

@@ -1,6 +1,56 @@
 {
   "name": "@globalpayments-private/gpds-pattern-web-react",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.1.28",
+  "description": "React bindings for GPDS pattern library for Web — typed component wrappers and the JSX composition surface.",
+  "license": "UNLICENSED",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/globalpayments-internal/gpds-pattern-web.git",
+    "directory": "packages/react"
+  },
+  "homepage": "https://github.com/globalpayments-internal/gpds-pattern-web#readme",
+  "bugs": {
+    "url": "https://github.com/globalpayments-internal/gpds-pattern-web/issues"
+  },
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "type": "module",
+  "sideEffects": false,
+  "main": "dist/components.js",
+  "module": "dist/components.js",
+  "types": "dist/components.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/components.d.ts",
+      "import": "./dist/components.js"
+    },
+    "./composition": {
+      "types": "./dist/composition/index.d.ts",
+      "import": "./dist/composition/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "dist/"
+  ],
+  "scripts": {
+    "build": "tsc -p tsconfig.json && tsc -p tsconfig.composition.json",
+    "test": "jest",
+    "test:coverage": "jest --coverage",
+    "prepack": "npm run build"
+  },
+  "dependencies": {
+    "@stencil/react-output-target": "^1.8.1"
+  },
+  "peerDependencies": {
+    "@globalpayments-private/gpds-pattern-web": "0.1.28",
+    "react": ">=19",
+    "react-dom": ">=19"
+  },
+  "devDependencies": {
+    "@stencil/core": "^4.45.2",
+    "jest": "^29.7.0"
+  }
+}

package/README.md

@@ -1,3 +0,0 @@
-# Temporary Holding Version
-
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.