@bluxcc/react 0.1.2 → 0.1.4

package/README.md

@@ -5,9 +5,9 @@ Blux is a **comprehensive authentication and wallet connect kit** designed for S
 ## Features
 
 - **Multi-Wallet Support**: Easily integrate Stellar wallets such as **Rabet, xBull, Lobstr, Freighter, and Albedo**.
-- **OAuth & Social Login** *(Coming Soon)*: Support for **Apple, Meta, Google, and more**.
-- **Email & Phone Authentication** *(Coming Soon)*: Securely onboard users with non-crypto credentials.
-- **Customizable UI**: Adjust themes, fonts, backgrounds, logos, cover images, corner radius, and text colors.
+- **OAuth & Social Login** _(Coming Soon)_: Support for **Apple, Meta, Google, and more**.
+- **Email & Phone Authentication** _(Coming Soon)_: Securely onboard users with non-crypto credentials.
+- **Customizable UI**: Adjust themes, fonts, backgrounds, logos, corner radius, and text colors.
 - **Configurable Networks**: Set up and modify network preferences via API keys.
 - **Future-Proof**: More wallets and authentication methods will be added based on community feedback.
 
@@ -30,7 +30,7 @@ yarn add @bluxcc/react
 Import Blux and set up the authentication flow:
 
 ```tsx
-import { BluxProvider, useBlux } from "@bluxcc/react";
+import { BluxProvider, useBlux } from '@bluxcc/react';
 
 const ConnectButton = () => {
   const { connect } = useBlux();
@@ -39,7 +39,7 @@ const ConnectButton = () => {
 
 const App = () => {
   return (
-    <BluxProvider config={{ appName: "YourApp", network: "testnet" }}>
+    <BluxProvider config={{ appName: 'YourApp', network: 'testnet' }}>
       <ConnectButton />
     </BluxProvider>
   );
@@ -53,7 +53,7 @@ export default App;
 Developers can customize various UI elements:
 
 - **Themes & Fonts**
-- **Backgrounds, Logos, and Cover Images**
+- **Backgrounds, Logos**
 - **Corner Radius & Text Colors**
 - **Authentication Limits** (Free tier supports 500-1000 accounts per auth method)
 

package/dist/assets/Icons.d.ts

@@ -2,16 +2,38 @@ import React from 'react';
 export declare const InfoIcon: ({ fill }: {
     fill?: string;
 }) => React.JSX.Element;
-export declare const ArrowRight: () => React.JSX.Element;
-export declare const ArrowLeft: () => React.JSX.Element;
-export declare const Close: () => React.JSX.Element;
-export declare const Loading: () => React.JSX.Element;
+export declare const ArrowRight: ({ fill }: {
+    fill?: string;
+}) => React.JSX.Element;
+export declare const ArrowLeft: ({ fill }: {
+    fill?: string;
+}) => React.JSX.Element;
+export declare const Close: ({ fill }: {
+    fill?: string;
+}) => React.JSX.Element;
+export declare const Loading: ({ fill }: {
+    fill?: string;
+}) => React.JSX.Element;
 export declare const GreenCheck: () => React.JSX.Element;
 export declare const LogOut: () => React.JSX.Element;
 export declare const Copy: () => React.JSX.Element;
-export declare const History: () => React.JSX.Element;
-export declare const Send: () => React.JSX.Element;
-export declare const ArrowDropUp: () => React.JSX.Element;
+export declare const History: ({ fill }: {
+    fill?: string;
+}) => React.JSX.Element;
+export declare const Send: ({ fill }: {
+    fill?: string;
+}) => React.JSX.Element;
+export declare const ArrowDropUp: ({ fill }: {
+    fill?: string;
+}) => React.JSX.Element;
 export declare const RedAlert: () => React.JSX.Element;
 export declare const Upstream: () => React.JSX.Element;
+export declare const MultiOperation: () => React.JSX.Element;
+export declare const Downstream: () => React.JSX.Element;
 export declare const Globe: () => React.JSX.Element;
+export declare const SmallEmailIcon: ({ fill }: {
+    fill?: string;
+}) => React.JSX.Element;
+export declare const EmailIcon: ({ fill }: {
+    fill?: string;
+}) => React.JSX.Element;

package/dist/assets/logos.d.ts

@@ -1,12 +1,13 @@
 import React from 'react';
-export declare const AlbedoIcon: () => React.JSX.Element;
-export declare const RabetIcon: () => React.JSX.Element;
-export declare const FreighterIcon: () => React.JSX.Element;
-export declare const XBullIcon: () => React.JSX.Element;
-export declare const LobstrIcon: () => React.JSX.Element;
-export declare const StellarIcon: ({ fill }: {
+export declare const AlbedoLogo: () => React.JSX.Element;
+export declare const RabetLogo: () => React.JSX.Element;
+export declare const FreighterLogo: () => React.JSX.Element;
+export declare const XBullLogo: () => React.JSX.Element;
+export declare const LobstrLogo: () => React.JSX.Element;
+export declare const StellarLogo: ({ fill }: {
     fill?: string;
 }) => React.JSX.Element;
-export declare const StellarSmallIcon: ({ fill }: {
+export declare const StellarSmallLogo: ({ fill }: {
     fill?: string;
 }) => React.JSX.Element;
+export declare const GoogleLogo: () => React.JSX.Element;

package/dist/components/CardItem/index.d.ts

@@ -1,10 +1,14 @@
 import React from 'react';
 type CardItemProps = {
-    variant?: 'social' | 'default';
+    variant?: 'social' | 'default' | 'input';
     startIcon: React.ReactNode;
     endArrow?: boolean;
-    label: string;
+    label?: string;
     onClick?: () => void;
+    onChange?: (value: string) => void;
+    onEnter?: (value: string) => void;
+    onSubmit?: (value: string) => void;
+    inputType?: 'text' | 'password' | 'number' | 'email' | string;
 };
-declare const CardItem: React.FC<CardItemProps>;
+declare const CardItem: ({ variant, startIcon, endArrow, label, onClick, onChange, onEnter, onSubmit, inputType, }: CardItemProps) => React.JSX.Element;
 export default CardItem;

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

@@ -1,3 +1,8 @@
 import React from 'react';
-declare const OTPInput: React.FC;
+interface OTPInputProps {
+    otp: string[];
+    setOtp: (otp: string[]) => void;
+    error?: boolean;
+}
+declare const OTPInput: React.FC<OTPInputProps>;
 export default OTPInput;

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

@@ -2,8 +2,8 @@ import React from 'react';
 type InputFieldProps = {
     label?: string;
     placeholder?: string;
-    error?: boolean;
-    helperText?: string;
+    error?: string;
+    type?: 'text' | 'password' | 'number';
     iconRight?: React.ReactNode;
     iconLeft?: React.ReactNode;
     button?: string | React.ReactNode;
@@ -12,5 +12,5 @@ type InputFieldProps = {
     onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
     customLabel?: React.ReactNode;
 };
-declare const InputField: ({ label, placeholder, error, helperText, iconRight, iconLeft, button, onButtonClick, customLabel, value, onChange, }: InputFieldProps) => React.JSX.Element;
+declare const InputField: ({ label, type, placeholder, error, iconRight, iconLeft, button, onButtonClick, customLabel, value, onChange, }: InputFieldProps) => React.JSX.Element;
 export default InputField;

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

@@ -8,7 +8,6 @@ interface ModalProps {
     onInfo?: () => void;
     closeButton?: boolean;
     title: string;
-    initialHeight: number;
 }
-declare const Modal: ({ isOpen, onClose, onBack, onInfo, children, title, icon, initialHeight, closeButton, }: ModalProps) => React.JSX.Element | null;
+declare const Modal: ({ isOpen, onClose, onBack, onInfo, children, title, icon, closeButton, }: ModalProps) => React.JSX.Element | null;
 export default Modal;

package/dist/constants/index.d.ts

@@ -1,6 +1,4 @@
-import { ModalHeights } from '../types';
 import { IAppearance } from '../types';
-export declare const MODAL_HEIGHTS: ModalHeights;
 export declare const HORIZON_SERVERS: {
     public: string;
     testnet: string;

package/dist/containers/Pages/ConfirmCode/index.d.ts

@@ -1,3 +1,3 @@
 import React from 'react';
-declare const ConfirmCode: () => React.JSX.Element;
+declare const ConfirmCode: React.FC;
 export default ConfirmCode;

package/dist/context/provider.d.ts

@@ -1,10 +1,11 @@
 import React from 'react';
-import { ContextState, IProviderConfig, IAppearance } from '../types';
+import { ContextState, IProviderConfig } from '../types';
 export declare const ProviderContext: React.Context<ContextState | null>;
-export declare const BluxProvider: ({ config, isDemo, appearance, children, }: {
+type BluxProviderProps = {
     isDemo?: boolean;
-    appearance?: IAppearance;
     config: IProviderConfig;
     children: React.ReactNode;
-}) => React.JSX.Element;
+};
+export declare const BluxProvider: ({ config, isDemo, children }: BluxProviderProps) => React.JSX.Element;
 export declare const useProvider: () => ContextState;
+export {};