rebill-web-components-sdk 1.8.18 → 1.8.20

package/dist/types/index.d.ts

@@ -8,6 +8,7 @@
  * to consume components of this package as outlined in the `README.md`.
  */
 export type * from './components.d.ts';
+import './jsx.d.ts';
 export { initializeRebillSDK, RebillSDK, type Environment, type RebillSDKConfig, } from './initialize';
 export { getAPIConfig, getCurrentEnvironment, isDebugMode, type APIConfig } from './api/config';
 export { getAssetURL, setAssetsURL } from './utils/assets';

package/dist/types/jsx.d.ts

@@ -0,0 +1,73 @@
+/**
+ * Declaraciones de tipos para usar los web components de Rebill en React/JSX
+ *
+ * Este archivo extiende el namespace JSX.IntrinsicElements para incluir
+ * todos los custom elements del SDK de Rebill.
+ *
+ * Los clientes pueden referenciar este archivo en su tsconfig.json:
+ *
+ * ```json
+ * {
+ *   "compilerOptions": {
+ *     "types": ["rebill-web-components-sdk/jsx"]
+ *   }
+ * }
+ * ```
+ */
+
+import { JSX as LocalJSX } from './components';
+
+type StencilToReact<T> = {
+  [P in keyof T]?: T[P] extends ((...args: any[]) => any) ? T[P] :
+                   T[P] extends object ? Partial<T[P]> :
+                   T[P];
+};
+
+type HTMLAttributesBase = {
+  className?: string;
+  class?: string;
+  style?: any;
+  id?: string;
+  key?: string | number;
+  ref?: any;
+  [key: string]: any;
+};
+
+declare global {
+  export namespace JSX {
+    interface IntrinsicElements {
+      'rebill-checkout': StencilToReact<LocalJSX.RebillCheckout> & HTMLAttributesBase;
+      'rebill-checkout-form': StencilToReact<LocalJSX.RebillCheckoutForm> & HTMLAttributesBase;
+      'rebill-checkout-single-column': StencilToReact<LocalJSX.RebillCheckoutSingleColumn> & HTMLAttributesBase;
+      'rebill-renewal': StencilToReact<LocalJSX.RebillRenewal> & HTMLAttributesBase;
+      'rebill-button': StencilToReact<LocalJSX.RebillButton> & HTMLAttributesBase;
+      'rebill-card': StencilToReact<LocalJSX.RebillCard> & HTMLAttributesBase;
+      'rebill-icon': StencilToReact<LocalJSX.RebillIcon> & HTMLAttributesBase;
+      'rebill-input-text': StencilToReact<LocalJSX.RebillInputText> & HTMLAttributesBase;
+      'rebill-input-select': StencilToReact<LocalJSX.RebillInputSelect> & HTMLAttributesBase;
+      'rebill-input-checkbox': StencilToReact<LocalJSX.RebillInputCheckbox> & HTMLAttributesBase;
+      'rebill-input-phone': StencilToReact<LocalJSX.RebillInputPhone> & HTMLAttributesBase;
+      'rebill-input-combo': StencilToReact<LocalJSX.RebillInputCombo> & HTMLAttributesBase;
+      'rebill-typography': StencilToReact<LocalJSX.RebillTypography> & HTMLAttributesBase;
+      'rebill-container': StencilToReact<LocalJSX.RebillContainer> & HTMLAttributesBase;
+      'rebill-flex-container': StencilToReact<LocalJSX.RebillFlexContainer> & HTMLAttributesBase;
+      'rebill-grid-container': StencilToReact<LocalJSX.RebillGridContainer> & HTMLAttributesBase;
+      'rebill-divider': StencilToReact<LocalJSX.RebillDivider> & HTMLAttributesBase;
+      'rebill-vertical-divider': StencilToReact<LocalJSX.RebillVerticalDivider> & HTMLAttributesBase;
+      'rebill-summary': StencilToReact<LocalJSX.RebillSummary> & HTMLAttributesBase;
+      'rebill-modal-overlay': StencilToReact<LocalJSX.RebillModalOverlay> & HTMLAttributesBase;
+      'rebill-footer': StencilToReact<LocalJSX.RebillFooter> & HTMLAttributesBase;
+      'rebill-form': StencilToReact<LocalJSX.RebillForm> & HTMLAttributesBase;
+      'rebill-bank-selector': StencilToReact<LocalJSX.RebillBankSelector> & HTMLAttributesBase;
+      'rebill-card-carousel': StencilToReact<LocalJSX.RebillCardCarousel> & HTMLAttributesBase;
+      'rebill-card-icon': StencilToReact<LocalJSX.RebillCardIcon> & HTMLAttributesBase;
+      'rebill-installments': StencilToReact<LocalJSX.RebillInstallments> & HTMLAttributesBase;
+      'rebill-processing-payment': StencilToReact<LocalJSX.RebillProcessingPayment> & HTMLAttributesBase;
+      'rebill-mode-sandbox': StencilToReact<LocalJSX.RebillModeSandbox> & HTMLAttributesBase;
+      'rebill-mode-sandbox-mobile': StencilToReact<LocalJSX.RebillModeSandboxMobile> & HTMLAttributesBase;
+      'rebill-timeline-debit-day': StencilToReact<LocalJSX.RebillTimelineDebitDay> & HTMLAttributesBase;
+      'rebill-timeline-free-trial': StencilToReact<LocalJSX.RebillTimelineFreeTrial> & HTMLAttributesBase;
+    }
+  }
+}
+

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rebill-web-components-sdk",
-  "version": "1.8.18",
+  "version": "1.8.20",
   "description": "Stencil Component Starter",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",
@@ -15,7 +15,7 @@
   "exports": {
     ".": {
       "import": "./dist/components/rebill-checkout.js",
-      "types": "./dist/components/rebill-checkout.d.ts"
+      "types": "./dist/types/index.d.ts"
     },
     "./config": {
       "import": "./dist/index.js",
@@ -24,12 +24,15 @@
     },
     "./rebill-checkout": {
       "import": "./dist/components/rebill-checkout.js",
-      "types": "./dist/components/rebill-checkout.d.ts"
+      "types": "./dist/types/index.d.ts"
     },
     "./components": {
       "import": "./dist/components/index.js",
       "types": "./dist/components/index.d.ts"
     },
+    "./jsx": {
+      "types": "./dist/types/jsx.d.ts"
+    },
     "./loader": {
       "import": "./loader/index.js",
       "require": "./loader/index.cjs.js",

package/readme.md

@@ -53,6 +53,28 @@ pnpm install
 pnpm run dev
 ```
 
+## 📘 TypeScript / JSX Support
+
+**TypeScript support is now automatic!** 🎉
+
+If you were experiencing this error:
+
+```
+Property 'rebill-checkout' does not exist on type 'JSX.IntrinsicElements'.
+```
+
+Just update to the latest version and import from the SDK:
+
+```typescript
+import { initializeRebillSDK } from 'rebill-web-components-sdk/config';
+// or
+import { defineCustomElements } from 'rebill-web-components-sdk/loader';
+```
+
+The JSX types will load automatically. **No `tsconfig.json` configuration needed!**
+
+**See the [TypeScript JSX Setup Guide](./TYPESCRIPT_JSX_SETUP.md) for more details and alternative solutions.**
+
 ```typescript
 // Or programmatically
 import { defineCustomElements } from 'rebill-web-components-sdk/loader';