@getpara/react-common 0.1.0

package/dist/components/UserIdentifier.js

@@ -0,0 +1,65 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CpslAvatar, CpslIcon, CpslText } from '@getpara/react-components';
+import parsePhoneNumberFromString from 'libphonenumber-js';
+import styled from 'styled-components';
+function defaultDisplayName(authType, identifier) {
+    switch (authType) {
+        case 'email':
+            return identifier.toLowerCase();
+        case 'phone':
+            const parsed = parsePhoneNumberFromString(identifier);
+            return `+${parsed.countryCallingCode} ${parsed.formatNational()}`;
+        case 'farcasterUsername':
+            return `@${identifier}`;
+        case 'telegramUserId':
+            return `Telegram User @${identifier}`;
+        default:
+            return null;
+    }
+}
+export const UserIdentifier = ({ identifier, authType, displayName, pfpUrl }) => {
+    let icon;
+    switch (authType) {
+        case 'email':
+            icon = 'mail';
+            break;
+        case 'phone':
+            icon = 'phone';
+            break;
+        case 'farcaster':
+            icon = 'farcasterBrand';
+            break;
+        case 'telegram':
+            icon = 'telegramBrand';
+            break;
+    }
+    return (_jsxs(Container, { children: [_jsx(IconContainer, { children: pfpUrl ? (_jsx(Avatar, { src: pfpUrl, size: "20px" })) : (_jsx(Icon, { icon: icon, size: authType === 'telegram' ? '20px' : '13px' })) }), _jsx(IdentifierText, { variant: "bodyS", weight: "medium", children: displayName || defaultDisplayName(authType, identifier) })] }));
+};
+const Container = styled.div `
+  padding: 8px 12px 8px 8px;
+  border-radius: 1000px;
+  background-color: var(--cpsl-color-background-4);
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 4px;
+`;
+const IdentifierText = styled(CpslText) `
+  --color-override: var(--cpsl-color-background-96);
+`;
+const IconContainer = styled.div `
+  display: flex;
+  background: var(--cpsl-color-background-0);
+  align-items: center;
+  justify-content: center;
+  border-radius: 1000px;
+  width: 20px;
+  height: 20px;
+`;
+const Icon = styled(CpslIcon) `
+  --icon-color: var(--cpsl-color-text-primary);
+`;
+const Avatar = styled(CpslAvatar) `
+  --container-border-width: 0;
+  --container-padding: 0;
+`;

package/dist/components/common.d.ts

@@ -0,0 +1,9 @@
+import { CpslInput, CpslText } from '@getpara/react-components';
+export declare const SpinnerContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const CenteredColumnContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const FilledDisabledInput: typeof CpslInput;
+export declare const FullWidthFilledDisabledInput: typeof CpslInput;
+export declare const CenteredText: typeof CpslText;
+export declare const HeaderButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("@getpara/core-components").JSX.CpslButton & Omit<import("react").HTMLAttributes<HTMLCpslButtonElement>, "style"> & import("@getpara/react-components/dist/types/components/stencil-generated/react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLCpslButtonElement>, "ref"> & {
+    ref?: import("react").Ref<HTMLCpslButtonElement>;
+}, never>> & string & Omit<import("react").ForwardRefExoticComponent<import("@getpara/core-components").JSX.CpslButton & Omit<import("react").HTMLAttributes<HTMLCpslButtonElement>, "style"> & import("@getpara/react-components/dist/types/components/stencil-generated/react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLCpslButtonElement>>, keyof import("react").Component<any, {}, any>>;

package/dist/components/common.js

@@ -0,0 +1,44 @@
+import { CpslButton, CpslInput, CpslText } from '@getpara/react-components';
+import styled from 'styled-components';
+export const SpinnerContainer = styled.div `
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+export const CenteredColumnContainer = styled.div `
+  width: 100%;
+  height: 100%;
+  align-self: center;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+`;
+export const FilledDisabledInput = styled(CpslInput) `
+  --container-border-color: var(--cpsl-color-input-border-placeholder);
+  --container-background-color: var(--cpsl-color-background-0);
+  --input-background-color: transparent;
+  --input-font-weight: 500;
+  --input-color: var(--cpsl-color-text-secondary) !important;
+`;
+export const FullWidthFilledDisabledInput = styled(FilledDisabledInput) `
+  width: 100%;
+`;
+export const CenteredText = styled(CpslText) `
+  width: 100%;
+  text-align: center;
+`;
+export const HeaderButton = styled(CpslButton) `
+  flex: 0;
+  --button-padding-top: 2px;
+  --button-padding-bottom: 2px;
+  --button-padding-start: 2px;
+  --button-padding-end: 2px;
+  --button-border-radius: 1000px;
+  --button-background-color: var(--cpsl-color-background-4);
+
+  cpsl-icon {
+    --height: 20px;
+    --width: 20px;
+  }
+`;

package/dist/components/index.d.ts

@@ -0,0 +1,8 @@
+export * from './MoonPayEmbed.js';
+export * from './RampEmbed.js';
+export * from './StripeEmbed.js';
+export * from './common.js';
+export * from './HeroSpinner.js';
+export * from './KnownDevices.js';
+export * from './QRCode.js';
+export * from './UserIdentifier.js';

package/dist/components/index.js

@@ -0,0 +1,8 @@
+export * from './MoonPayEmbed.js';
+export * from './RampEmbed.js';
+export * from './StripeEmbed.js';
+export * from './common.js';
+export * from './HeroSpinner.js';
+export * from './KnownDevices.js';
+export * from './QRCode.js';
+export * from './UserIdentifier.js';

package/dist/constants/aaguiMetadata.d.ts

@@ -0,0 +1,140 @@
+export declare const aaguidMetadata: {
+    'ea9b8d66-4d01-1d21-3ce4-b6b48cb575d4': {
+        name: string;
+        icon_dark: string;
+        icon_light: string;
+    };
+    'adce0002-35bc-c60a-648b-0b25f1f05503': {
+        name: string;
+        icon_dark: string;
+        icon_light: string;
+    };
+    '08987058-cadc-4b81-b6e1-30de50dcbe96': {
+        name: string;
+        icon_dark: string;
+        icon_light: string;
+    };
+    '9ddd1817-af5a-4672-a2b9-3e3dd95000a9': {
+        name: string;
+        icon_dark: string;
+        icon_light: string;
+    };
+    '6028b017-b1d4-4c02-b4b3-afcdafc96bb2': {
+        name: string;
+        icon_dark: string;
+        icon_light: string;
+    };
+    'dd4ec289-e01d-41c9-bb89-70fa845d4bf2': {
+        name: string;
+        icon_dark: string;
+        icon_light: string;
+    };
+    '531126d6-e717-415c-9320-3d9aa6981239': {
+        name: string;
+        icon_dark: string;
+        icon_light: string;
+    };
+    'bada5566-a7aa-401f-bd96-45619a55120d': {
+        name: string;
+        icon_dark: string;
+        icon_light: string;
+    };
+    'b84e4048-15dc-4dd0-8640-f4f60813c8af': {
+        name: string;
+        icon_dark: string;
+        icon_light: string;
+    };
+    '0ea242b4-43c4-4a1b-8b17-dd6d0b6baec6': {
+        name: string;
+        icon_dark: string;
+        icon_light: string;
+    };
+    '891494da-2c90-4d31-a9cd-4eab0aed1309': {
+        name: string;
+        icon_dark: string;
+        icon_light: string;
+    };
+    'f3809540-7f14-49c1-a8b3-8f813b225541': {
+        name: string;
+        icon_dark: string;
+        icon_light: string;
+    };
+    'b5397666-4885-aa6b-cebf-e52262a439a2': {
+        name: string;
+    };
+    '771b48fd-d3d4-4f74-9232-fc157ab0507a': {
+        name: string;
+        icon_dark: string;
+        icon_light: string;
+    };
+    '39a5647e-1853-446c-a1f6-a79bae9f5bc7': {
+        name: string;
+        icon_dark: string;
+        icon_light: string;
+    };
+    'd548826e-79b4-db40-a3d8-11116f7e8349': {
+        name: string;
+        icon_dark: string;
+        icon_light: string;
+    };
+    'fbfc3007-154e-4ecc-8c0b-6e020557d7bd': {
+        name: string;
+        icon_dark: string;
+        icon_light: string;
+    };
+    '53414d53-554e-4700-0000-000000000000': {
+        name: string;
+        icon_dark: string;
+        icon_light: string;
+    };
+    '66a0ccb3-bd6a-191f-ee06-e375c50b9846': {
+        name: string;
+        icon_dark: string;
+        icon_light: string;
+    };
+    '8836336a-f590-0921-301d-46427531eee6': {
+        name: string;
+        icon_dark: string;
+        icon_light: string;
+    };
+    'cd69adb5-3c7a-deb9-3177-6800ea6cb72a': {
+        name: string;
+        icon_dark: string;
+        icon_light: string;
+    };
+    '17290f1e-c212-34d0-1423-365d729f09d9': {
+        name: string;
+        icon_dark: string;
+        icon_light: string;
+    };
+    '50726f74-6f6e-5061-7373-50726f746f6e': {
+        name: string;
+        icon_dark: string;
+        icon_light: string;
+    };
+    'fdb141b2-5d84-443e-8a35-4698c205a502': {
+        name: string;
+        icon_dark: string;
+        icon_light: string;
+    };
+    'cc45f64e-52a2-451b-831a-4edd8022a202': {
+        name: string;
+        icon_dark: string;
+        icon_light: string;
+    };
+    'bfc748bb-3429-4faa-b9f9-7cfa9f3b76d0': {
+        name: string;
+        icon_dark: string;
+        icon_light: string;
+    };
+    'b35a26b2-8f6e-4697-ab1d-d44db4da28c6': {
+        name: string;
+        icon_dark: string;
+        icon_light: string;
+    };
+    'b78a0a55-6ef8-d246-a042-ba0f6d55050c': {
+        name: string;
+        icon_dark: string;
+        icon_light: string;
+    };
+};