@sphereon/ui-components.ssi-react-native 0.1.1-next.18

package/dist/components/assets/badges/SSICheckmarkBadge/index.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import { View } from 'react-native';
+import Svg, { Circle, Path } from 'react-native-svg';
+import { fontColors, statusColors } from '@sphereon/ui-components.core';
+const SSICheckmarkBadge = (props) => {
+    const { size = 15, color = fontColors.light, backgroundColor = statusColors.valid } = props;
+    return (<View style={{ width: size, aspectRatio: 1 }}>
+      <Svg width="100%" height="100%" viewBox="0 0 15 15" fill="none">
+        <Circle cx="7.5" cy="7.5" r="7.5" fill={backgroundColor}/>
+        <Path d="M5.91233 11.0361H5.9092C5.84998 11.0357 5.79144 11.0236 5.73697 11.0005C5.6825 10.9774 5.63319 10.9437 5.59192 10.9015L3.13412 8.38546C3.09155 8.34399 3.05776 8.29447 3.03473 8.23981C3.0117 8.18516 2.99989 8.12647 3 8.06722C3.00011 8.00796 3.01214 7.94932 3.03538 7.89475C3.05862 7.84018 3.09259 7.79079 3.13531 7.74947C3.17803 7.70815 3.22863 7.67575 3.28412 7.65417C3.33962 7.63259 3.3989 7.62226 3.45847 7.6238C3.51804 7.62534 3.5767 7.63871 3.63099 7.66312C3.68529 7.68754 3.73413 7.72251 3.77463 7.76597L5.91665 9.95833L10.9927 4.91088C11.077 4.82993 11.1898 4.78514 11.307 4.78615C11.4242 4.78716 11.5363 4.8339 11.6191 4.91629C11.702 4.99869 11.749 5.11015 11.75 5.22667C11.751 5.34319 11.706 5.45544 11.6246 5.53926L6.22827 10.9059C6.14448 10.9893 6.03084 11.0361 5.91233 11.0361Z" fill={color}/>
+      </Svg>
+    </View>);
+};
+export default SSICheckmarkBadge;

package/dist/components/assets/badges/SSIExclamationMarkBadge/index.d.ts

@@ -0,0 +1,9 @@
+import { FC } from 'react';
+import { ColorValue } from 'react-native';
+type Props = {
+    size?: number;
+    color?: ColorValue;
+    backgroundColor?: ColorValue;
+};
+declare const SSIExclamationMarkBadge: FC<Props>;
+export default SSIExclamationMarkBadge;

package/dist/components/assets/badges/SSIExclamationMarkBadge/index.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import { View } from 'react-native';
+import Svg, { Circle, Path } from 'react-native-svg';
+import { fontColors, statusColors } from '@sphereon/ui-components.core';
+const SSIExclamationMarkBadge = (props) => {
+    const { size = 15, color = fontColors.light, backgroundColor = statusColors.error } = props;
+    return (<View style={{ width: size, aspectRatio: 1 }}>
+      <Svg width="100%" height="100%" viewBox="0 0 15 15" fill="none">
+        <Circle cx="7.5" cy="7.5" r="7.5" fill={backgroundColor}/>
+        <Path fill-rule="evenodd" clip-rule="evenodd" d="M6.78571 3.48218C6.78571 3.33429 6.94559 3.21429 7.14279 3.21429H7.8572C8.05439 3.21429 8.21428 3.33429 8.21428 3.48218V9.37504C8.21428 9.52293 8.05439 9.64283 7.8572 9.64283H7.14279C6.94559 9.64283 6.78571 9.52292 6.78571 9.37504V3.48218ZM6.78571 10.9822C6.78571 10.8342 6.94559 10.7143 7.14279 10.7143H7.8572C8.05439 10.7143 8.21428 10.8342 8.21428 10.9822V11.5178C8.21428 11.6657 8.05439 11.7857 7.8572 11.7857H7.14279C6.94559 11.7857 6.78571 11.6657 6.78571 11.5178V10.9822Z" fill={color}/>
+      </Svg>
+    </View>);
+};
+export default SSIExclamationMarkBadge;

package/dist/components/assets/logos/SSILogo/index.d.ts

@@ -0,0 +1,11 @@
+import { ImageAttributes } from '@sphereon/ui-components.core';
+import { FC } from 'react';
+import { ColorValue, ViewStyle } from 'react-native';
+type Props = {
+    logo?: ImageAttributes;
+    size?: number;
+    color?: ColorValue;
+    style?: ViewStyle;
+};
+declare const SSILogo: FC<Props>;
+export default SSILogo;

package/dist/components/assets/logos/SSILogo/index.js

@@ -0,0 +1,13 @@
+import { calculateAspectRatio, logoColors } from '@sphereon/ui-components.core';
+import React from 'react';
+import FastImage from 'react-native-fast-image';
+import SSIPlaceholderLogo from '../SSIPlaceholderLogo';
+const SSILogo = (props) => {
+    const { logo, color = logoColors.default, size = 32, style } = props;
+    return logo ? (<FastImage style={{
+            ...style,
+            aspectRatio: logo?.dimensions && calculateAspectRatio(logo?.dimensions.width, logo?.dimensions.height),
+            height: 32,
+        }} source={logo}/>) : (<SSIPlaceholderLogo style={style} size={size} color={color}/>);
+};
+export default SSILogo;

package/dist/components/assets/logos/SSIPlaceholderLogo/index.d.ts

@@ -0,0 +1,9 @@
+import { FC } from 'react';
+import { ColorValue, ViewStyle } from 'react-native';
+type Props = {
+    size?: number;
+    color?: ColorValue;
+    style?: ViewStyle;
+};
+declare const SSIPlaceholderLogo: FC<Props>;
+export default SSIPlaceholderLogo;

package/dist/components/assets/logos/SSIPlaceholderLogo/index.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import { View } from 'react-native';
+import Svg, { Path } from 'react-native-svg';
+import { logoColors } from '@sphereon/ui-components.core';
+const SSIPlaceholderLogo = (props) => {
+    const { color = logoColors.default, size = 32, style } = props;
+    return (<View style={[style, { width: size, aspectRatio: 1 }]}>
+      <Svg width="100%" height="100%" viewBox="0 0 32 32" fill="none">
+        <Path d="M15.9997 31.9999C11.7563 31.9999 7.68645 30.3141 4.68603 27.3136C1.68548 24.313 0 20.2435 0 15.9999C0 11.7563 1.68548 7.68669 4.68603 4.68627C7.68657 1.68572 11.7561 0 15.9997 0C20.2433 0 24.3129 1.68572 27.3133 4.68627C30.3139 7.68657 31.9994 11.7563 31.9994 15.9999C31.9947 20.2419 30.3075 24.3089 27.3079 27.3082C24.3083 30.3077 20.2415 31.9949 15.9997 31.9999ZM15.9997 0.914927V0.914691C11.9987 0.914691 8.16186 2.50412 5.33238 5.33317C2.50339 8.1624 0.9139 11.9997 0.9139 16.0005C0.9139 20.0015 2.50333 23.8383 5.33238 26.6678C8.16137 29.4968 11.9983 31.0863 15.9997 31.0863C20.0011 31.0863 23.8375 29.4968 26.667 26.6678C29.496 23.8388 31.0855 20.0018 31.0855 16.0005C31.081 12.0009 29.4901 8.16627 26.662 5.33861C23.834 2.51059 19.9997 0.919705 16.0002 0.915174L15.9997 0.914927Z" fill={color}/>
+        <Path d="M30.1659 10.0545C30.0927 10.0545 30.0205 10.0368 29.9556 10.0028C26.3647 8.13584 21.2781 7.06476 15.9997 7.06476C10.7214 7.06476 5.63448 8.13578 2.04387 10.0028C1.93604 10.0625 1.80862 10.0762 1.6904 10.0405C1.57241 10.0049 1.47355 9.92327 1.41668 9.81378C1.35981 9.70429 1.34966 9.5764 1.38836 9.45936C1.42706 9.34232 1.51154 9.24581 1.62244 9.19177C5.39433 7.23065 10.4993 6.15039 16 6.15039C21.5006 6.15039 26.6056 7.23065 30.3775 9.19177C30.5643 9.28899 30.6604 9.50136 30.6104 9.70594C30.5603 9.91052 30.377 10.0545 30.1663 10.0545L30.1659 10.0545Z" fill={color}/>
+        <Path d="M15.9996 25.848C10.4929 25.848 5.38486 24.7664 1.61726 22.8022C1.39333 22.6856 1.30626 22.4095 1.42282 22.1856C1.53963 21.9617 1.8157 21.8746 2.03964 21.9912C5.62728 23.8614 10.7147 24.9339 15.9997 24.9339C21.2848 24.9339 26.3722 23.8614 29.9598 21.9914V21.9912C30.1838 21.8746 30.4598 21.9617 30.5766 22.1856C30.6932 22.4096 30.6061 22.6856 30.3822 22.8022C26.6146 24.7666 21.5066 25.8481 15.9999 25.8481L15.9996 25.848Z" fill={color}/>
+        <Path d="M15.9995 32.0001C11.3852 32.0001 7.77148 24.9717 7.77148 16.0007C7.77148 7.02959 11.3855 0.0012207 15.9995 0.0012207C20.6136 0.0012207 24.2276 7.02899 24.2276 16.0007C24.2276 24.9723 20.6136 32.0001 15.9995 32.0001ZM15.9995 0.915181C11.9666 0.915181 8.68545 7.68078 8.68545 16.0007C8.68545 24.3205 11.9668 31.0861 15.9995 31.0861C20.0323 31.0861 23.3136 24.3205 23.3136 16.0007C23.3136 7.68078 20.0323 0.915181 15.9995 0.915181Z" fill={color}/>
+        <Path d="M16 31.9998C15.7476 31.9998 15.543 31.795 15.543 31.5425V0.457553C15.543 0.205069 15.7476 0.000488281 16 0.000488281C16.2525 0.000488281 16.4571 0.205069 16.4571 0.457553V31.5425C16.4571 31.6638 16.409 31.7801 16.3233 31.8658C16.2377 31.9514 16.1213 31.9998 16 31.9998V31.9998Z" fill={color}/>
+        <Path d="M31.542 16.4571H0.457065C0.204581 16.4571 0 16.2525 0 16C0 15.7476 0.204581 15.543 0.457065 15.543H31.542C31.7945 15.543 31.9991 15.7476 31.9991 16C31.9991 16.2525 31.7945 16.4571 31.542 16.4571Z" fill={color}/>
+      </Svg>
+    </View>);
+};
+export default SSIPlaceholderLogo;

package/dist/components/labels/SSIStatusLabel/index.d.ts

@@ -0,0 +1,11 @@
+import { FC } from 'react';
+import { ColorValue, ViewStyle } from 'react-native';
+import { LabelStatus } from '@sphereon/ui-components.core';
+type Props = {
+    status: LabelStatus;
+    showIcon?: boolean;
+    color?: ColorValue;
+    style?: ViewStyle;
+};
+declare const SSIStatusLabel: FC<Props>;
+export default SSIStatusLabel;

package/dist/components/labels/SSIStatusLabel/index.js

@@ -0,0 +1,29 @@
+import React from 'react';
+import { CredentialStatus, IssuerStatus, statusColors, getStatusTranslation } from '@sphereon/ui-components.core';
+import { SSIStatusLabelBadgeContainer as BadgeContainer, SSIStatusLabelContainerStyled as Container, SSIStatusLabelStatusCaptionStyled as StatusCaption, } from '../../../styles/components';
+import SSICheckmarkBadge from '../../../components/assets/badges/SSICheckmarkBadge';
+import SSIExclamationMarkBadge from '../../../components/assets/badges/SSIExclamationMarkBadge';
+const SSIStatusLabel = (props) => {
+    const { status, color = statusColors[status], style, showIcon = false } = props;
+    return (<Container style={[style, { borderColor: color }]}>
+      {showIcon && <BadgeContainer>{getStatusBadge(status, color)}</BadgeContainer>}
+      <StatusCaption style={{ color }}>{getStatusTranslation(status)}</StatusCaption>
+    </Container>);
+};
+const getStatusBadge = (status, backgroundColor) => {
+    switch (status) {
+        case IssuerStatus.VERIFIED:
+            return <SSICheckmarkBadge backgroundColor={backgroundColor}/>;
+        case IssuerStatus.UNVERIFIED:
+            return <SSIExclamationMarkBadge backgroundColor={backgroundColor}/>;
+        case CredentialStatus.VALID:
+            return <SSICheckmarkBadge backgroundColor={backgroundColor}/>;
+        case CredentialStatus.EXPIRED:
+            return <SSIExclamationMarkBadge backgroundColor={backgroundColor}/>;
+        case CredentialStatus.REVOKED:
+            throw new Error(`${status} not yet implemented`);
+        default:
+            throw new Error(`${status} not supported`);
+    }
+};
+export default SSIStatusLabel;

package/dist/components/views/SSICardView/index.d.ts

@@ -0,0 +1,33 @@
+import { FC } from 'react';
+import { ColorValue } from 'react-native';
+import { CredentialStatus, ImageAttributes } from '@sphereon/ui-components.core';
+type CardProperty = {
+    name: string;
+    value: string;
+};
+type CardHeader = {
+    credentialTitle?: string;
+    credentialSubtitle?: string;
+    logo?: ImageAttributes;
+};
+type CardBody = {
+    issuerName?: string;
+    properties?: Array<CardProperty>;
+};
+type CardFooter = {
+    expirationDate?: number;
+    credentialStatus?: CredentialStatus;
+};
+type CardDisplay = {
+    backgroundColor?: ColorValue;
+    backgroundImage?: ImageAttributes;
+    textColor?: ColorValue;
+};
+type Props = {
+    header?: CardHeader;
+    body?: CardBody;
+    footer?: CardFooter;
+    display?: CardDisplay;
+};
+declare const SSICardView: FC<Props>;
+export default SSICardView;

package/dist/components/views/SSICardView/index.js

@@ -0,0 +1,63 @@
+import React from 'react';
+import { View } from 'react-native';
+import FastImage from 'react-native-fast-image';
+import { backgroundColors, credentialCardColors, Localization, toLocalDateString, } from '@sphereon/ui-components.core';
+import { SSIAlphaContainerStyled as AlphaContainer, SSIBlurredContainerStyled as BlurredView, SSICardViewContainerStyled as Container, SSICardViewContentMainContainerStyled as ContentMainContainer, SSICardViewContentSubContainerStyled as ContentSubContainer, SSICardViewSSICredentialStatusStyled as CredentialStatusContainer, SSICardViewCredentialSubtitleTextStyled as CredentialSubtitleText, SSICardViewCredentialTitleTextStyled as CredentialTitleText, SSITextH5LightStyled as ExpirationDateText, SSICardViewFooterContainerStyled as FooterContainer, SSICardViewFooterContentContainerStyled as FooterContentContainer, SSITextH4LightStyled as H4Text, SSICardViewHeaderContainerStyled as HeaderContainer, SSICardViewContentIssueNameContainerStyled as IssueNameContainer, SSICardViewHeaderLogoContainerStyled as LogoContainer, SSICardViewContentPropertiesContainerStyled as PropertiesContainer, SSITextH6LightStyled as PropertyValueText, SSICardViewHeaderTitleContainerStyled as TitleContainer, } from '../../../styles/components';
+import SSILogo from '../../assets/logos/SSILogo';
+import SSIStatusLabel from '../../labels/SSIStatusLabel';
+const SSICardView = (props) => {
+    const { header, body, footer } = props;
+    const { credentialTitle, credentialSubtitle, logo } = props.header ?? {};
+    const { issuerName, properties } = props.body ?? {};
+    const { credentialStatus, expirationDate } = props.footer ?? {};
+    const { backgroundColor = credentialCardColors.default, backgroundImage = { uri: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=' }, textColor = backgroundColors.primaryLight, } = props.display ?? {};
+    const getPropertyElementsFrom = (properties) => {
+        return properties.slice(0, 2).map((property, index) => (<View key={index} style={{
+                ...(properties.length > 1 && { width: 140 }),
+                ...(index > 0 && { marginLeft: 10 }),
+            }}>
+        <H4Text style={{ color: textColor }}>{property.name}</H4Text>
+        <PropertyValueText style={{ color: textColor }}>{property.value}</PropertyValueText>
+      </View>));
+    };
+    return (<Container style={{ backgroundColor }}>
+      <FastImage style={{ flex: 1 }} source={backgroundImage} resizeMode="cover">
+        <AlphaContainer>
+          {header && (<HeaderContainer>
+              <LogoContainer>
+                <SSILogo logo={logo} color={textColor}/>
+              </LogoContainer>
+              {credentialTitle && (<TitleContainer>
+                  <CredentialTitleText style={{ color: textColor }} numberOfLines={2}>
+                    {credentialTitle}
+                  </CredentialTitleText>
+                  {credentialSubtitle && <CredentialSubtitleText style={{ color: textColor }}>{credentialSubtitle}</CredentialSubtitleText>}
+                </TitleContainer>)}
+            </HeaderContainer>)}
+          {body && (<ContentMainContainer>
+              <ContentSubContainer>
+                {issuerName && (<IssueNameContainer>
+                    <H4Text style={{ color: textColor }}>{issuerName}</H4Text>
+                  </IssueNameContainer>)}
+                {properties && <PropertiesContainer>{getPropertyElementsFrom(properties)}</PropertiesContainer>}
+              </ContentSubContainer>
+            </ContentMainContainer>)}
+          {footer && (<FooterContainer>
+              <BlurredView>
+                <FooterContentContainer>
+                  <ExpirationDateText style={{ color: textColor }}>
+                    {expirationDate
+                ? `${Localization.translate('credential_card_expires_message')} ${toLocalDateString(expirationDate)}`
+                : Localization.translate('credential_status_never_expires_date_label')}
+                  </ExpirationDateText>
+                  {credentialStatus && (<CredentialStatusContainer>
+                      {credentialStatus && <SSIStatusLabel status={credentialStatus} color={textColor}/>}
+                    </CredentialStatusContainer>)}
+                </FooterContentContainer>
+              </BlurredView>
+            </FooterContainer>)}
+        </AlphaContainer>
+      </FastImage>
+    </Container>);
+};
+export default SSICardView;

package/dist/index.d.ts

@@ -0,0 +1,7 @@
+import SSIStatusLabel from './components/labels/SSIStatusLabel';
+import SSICardView from './components/views/SSICardView';
+import SSICheckmarkBadge from './components/assets/badges/SSICheckmarkBadge';
+import SSIExclamationMarkBadge from './components/assets/badges/SSIExclamationMarkBadge';
+import SSIPlaceholderLogo from './components/assets/logos/SSIPlaceholderLogo';
+import SSILogo from './components/assets/logos/SSILogo';
+export { SSICardView, SSIStatusLabel, SSICheckmarkBadge, SSIExclamationMarkBadge, SSIPlaceholderLogo, SSILogo };

package/dist/index.js

@@ -0,0 +1,7 @@
+import SSIStatusLabel from './components/labels/SSIStatusLabel';
+import SSICardView from './components/views/SSICardView';
+import SSICheckmarkBadge from './components/assets/badges/SSICheckmarkBadge';
+import SSIExclamationMarkBadge from './components/assets/badges/SSIExclamationMarkBadge';
+import SSIPlaceholderLogo from './components/assets/logos/SSIPlaceholderLogo';
+import SSILogo from './components/assets/logos/SSILogo';
+export { SSICardView, SSIStatusLabel, SSICheckmarkBadge, SSIExclamationMarkBadge, SSIPlaceholderLogo, SSILogo };

package/dist/styles/components/components/SSICardView/index.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="styled-components-react-native" />
+export declare const SSICardViewContainerStyled: import("styled-components").StyledComponent<typeof import("react-native").View, any, {}, never>;
+export declare const SSICardViewHeaderContainerStyled: import("styled-components").StyledComponent<typeof import("react-native").View, any, {}, never>;
+export declare const SSICardViewHeaderLogoContainerStyled: import("styled-components").StyledComponent<typeof import("react-native").View, import("styled-components").DefaultTheme, {}, never>;
+export declare const SSICardViewHeaderTitleContainerStyled: import("styled-components").StyledComponent<typeof import("react-native").View, import("styled-components").DefaultTheme, {}, never>;
+export declare const SSICardViewContentMainContainerStyled: import("styled-components").StyledComponent<typeof import("react-native").View, import("styled-components").DefaultTheme, {}, never>;
+export declare const SSICardViewContentSubContainerStyled: import("styled-components").StyledComponent<typeof import("react-native").View, import("styled-components").DefaultTheme, {}, never>;
+export declare const SSICardViewContentIssueNameContainerStyled: import("styled-components").StyledComponent<typeof import("react-native").View, import("styled-components").DefaultTheme, {}, never>;
+export declare const SSICardViewContentPropertiesContainerStyled: import("styled-components").StyledComponent<typeof import("react-native").View, any, {}, never>;
+export declare const SSICardViewFooterContentContainerStyled: import("styled-components").StyledComponent<typeof import("react-native").View, any, {}, never>;
+export declare const SSICardViewFooterContainerStyled: import("styled-components").StyledComponent<typeof import("react-native").View, import("styled-components").DefaultTheme, {}, never>;
+export declare const SSICardViewCredentialTitleTextStyled: import("styled-components").StyledComponent<typeof import("react-native").Text, any, {}, never>;
+export declare const SSICardViewCredentialSubtitleTextStyled: import("styled-components").StyledComponent<typeof import("react-native").Text, any, {}, never>;
+export declare const SSICardViewSSICredentialStatusStyled: import("styled-components").StyledComponent<typeof import("react-native").View, import("styled-components").DefaultTheme, {}, never>;

package/dist/styles/components/components/SSICardView/index.js

@@ -0,0 +1,52 @@
+import styled from 'styled-components/native';
+import { SSIFlexDirectionRowViewStyled, SSIRoundedContainerStyled } from '../../containers';
+import { SSITextH4SemiBoldLightStyled, SSITextH5LightStyled } from '../../fonts';
+export const SSICardViewContainerStyled = styled(SSIRoundedContainerStyled) `
+  width: 327px;
+  height: 186px;
+`;
+export const SSICardViewHeaderContainerStyled = styled(SSIFlexDirectionRowViewStyled) `
+  height: 32px;
+  margin-top: 16px;
+`;
+export const SSICardViewHeaderLogoContainerStyled = styled.View `
+  margin-left: 9px;
+  margin-right: 12px;
+`;
+export const SSICardViewHeaderTitleContainerStyled = styled.View `
+  flex: 1;
+  margin: 0px 13px 0px auto;
+`;
+export const SSICardViewContentMainContainerStyled = styled.View `
+  flex: 1;
+`;
+export const SSICardViewContentSubContainerStyled = styled.View `
+  margin-top: auto;
+`;
+export const SSICardViewContentIssueNameContainerStyled = styled.View `
+  padding: 2px 9px 2px 12px;
+`;
+export const SSICardViewContentPropertiesContainerStyled = styled(SSIFlexDirectionRowViewStyled) `
+  justify-content: flex-start;
+  margin: 1px 0px 1px 0px;
+  padding: 2px 9px 4px 12px;
+`;
+export const SSICardViewFooterContentContainerStyled = styled(SSIFlexDirectionRowViewStyled) `
+  padding: 11px 12px 11px 12px;
+  background-color: transparent;
+`;
+export const SSICardViewFooterContainerStyled = styled.View `
+  height: 39px; // 39
+  margin-top: auto;
+  overflow: hidden;
+`;
+export const SSICardViewCredentialTitleTextStyled = styled(SSITextH4SemiBoldLightStyled) `
+  flex: 1;
+  text-align: right;
+`;
+export const SSICardViewCredentialSubtitleTextStyled = styled(SSITextH5LightStyled) `
+  text-align: right;
+`;
+export const SSICardViewSSICredentialStatusStyled = styled.View `
+  margin-left: auto;
+`;

package/dist/styles/components/components/SSIStatusLabel/index.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="styled-components-react-native" />
+export declare const SSIStatusLabelContainerStyled: import("styled-components").StyledComponent<typeof import("react-native").View, any, {}, never>;
+export declare const SSIStatusLabelStatusCaptionStyled: import("styled-components").StyledComponent<typeof import("react-native").Text, any, {}, never>;
+export declare const SSIStatusLabelBadgeContainer: import("styled-components").StyledComponent<typeof import("react-native").View, import("styled-components").DefaultTheme, {}, never>;

package/dist/styles/components/components/SSIStatusLabel/index.js

@@ -0,0 +1,15 @@
+import styled from 'styled-components/native';
+import { SSIFlexDirectionRowViewStyled } from '../../containers';
+import { SSITextH5LightStyled } from '../../fonts';
+export const SSIStatusLabelContainerStyled = styled(SSIFlexDirectionRowViewStyled) `
+  border-radius: 9px;
+  border-width: 1px;
+`;
+export const SSIStatusLabelStatusCaptionStyled = styled(SSITextH5LightStyled) `
+  margin-left: 7px;
+  margin-right: 7px;
+`;
+export const SSIStatusLabelBadgeContainer = styled.View `
+  margin-top: auto;
+  margin-bottom: auto;
+`;

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

@@ -0,0 +1,2 @@
+export * from './SSICardView';
+export * from './SSIStatusLabel';

package/dist/styles/components/components/index.js

@@ -0,0 +1,2 @@
+export * from './SSICardView';
+export * from './SSIStatusLabel';

package/dist/styles/components/containers/index.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="styled-components-react-native" />
+/// <reference types="react" />
+export declare const SSIAlphaContainerStyled: import("styled-components").StyledComponent<typeof import("react-native").View, import("styled-components").DefaultTheme, {}, never>;
+export declare const SSIBlurredContainerStyled: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@react-native-community/blur").BlurViewProps & import("react").RefAttributes<import("react-native").View>>, any, {
+    blurType: "light";
+    blurAmount: 3;
+}, "blurType" | "blurAmount">;
+export declare const SSIFlexDirectionRowViewStyled: import("styled-components").StyledComponent<typeof import("react-native").View, import("styled-components").DefaultTheme, {}, never>;
+export declare const SSIRoundedContainerStyled: import("styled-components").StyledComponent<typeof import("react-native").View, import("styled-components").DefaultTheme, {}, never>;

package/dist/styles/components/containers/index.js

@@ -0,0 +1,21 @@
+import { BlurView } from '@react-native-community/blur';
+import styled from 'styled-components/native';
+import { SSIRoundedEdgesCss } from '@sphereon/ui-components.core';
+export const SSIAlphaContainerStyled = styled.View `
+  flex: 1;
+  background-color: rgba(0, 0, 0, 0.2);
+`;
+export const SSIBlurredContainerStyled = styled(BlurView).attrs({
+    blurType: 'light',
+    blurAmount: 3,
+}) `
+  flex: 1;
+  background-color: rgba(255, 255, 255, 0.25);
+`;
+export const SSIFlexDirectionRowViewStyled = styled.View `
+  flex-direction: row;
+`;
+export const SSIRoundedContainerStyled = styled.View `
+  ${SSIRoundedEdgesCss};
+  overflow: hidden;
+`;

package/dist/styles/components/fonts/index.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="styled-components-react-native" />
+export declare const SSITextH4Styled: import("styled-components").StyledComponent<typeof import("react-native").Text, import("styled-components").DefaultTheme, {}, never>;
+export declare const SSITextH4SemiBoldStyled: import("styled-components").StyledComponent<typeof import("react-native").Text, import("styled-components").DefaultTheme, {}, never>;
+export declare const SSITextH4LightStyled: import("styled-components").StyledComponent<typeof import("react-native").Text, any, {}, never>;
+export declare const SSITextH4SemiBoldLightStyled: import("styled-components").StyledComponent<typeof import("react-native").Text, any, {}, never>;
+export declare const SSITextH5Styled: import("styled-components").StyledComponent<typeof import("react-native").Text, import("styled-components").DefaultTheme, {}, never>;
+export declare const SSITextH5LightStyled: import("styled-components").StyledComponent<typeof import("react-native").Text, any, {}, never>;
+export declare const SSITextH6Styled: import("styled-components").StyledComponent<typeof import("react-native").Text, import("styled-components").DefaultTheme, {}, never>;
+export declare const SSITextH6LightStyled: import("styled-components").StyledComponent<typeof import("react-native").Text, any, {}, never>;

package/dist/styles/components/fonts/index.js

@@ -0,0 +1,43 @@
+import styled from 'styled-components/native';
+import { fontColors } from '@sphereon/ui-components.core';
+import { fontStyle } from '../../typography';
+export const SSITextH4Styled = styled.Text `
+  font-family: ${fontStyle.h4Regular.fontFamily};
+  font-size: ${fontStyle.h4Regular.fontSize}px;
+  font-weight: ${fontStyle.h4Regular.fontWeight};
+  line-height: ${fontStyle.h4Regular.lineHeight}px;
+  height: auto;
+`;
+export const SSITextH4SemiBoldStyled = styled.Text `
+  font-family: ${fontStyle.h4SemiBold.fontFamily};
+  font-size: ${fontStyle.h4SemiBold.fontSize}px;
+  font-weight: ${fontStyle.h4SemiBold.fontWeight};
+  line-height: ${fontStyle.h4SemiBold.lineHeight}px;
+  height: auto;
+`;
+export const SSITextH4LightStyled = styled(SSITextH4Styled) `
+  color: ${fontColors.light};
+`;
+export const SSITextH4SemiBoldLightStyled = styled(SSITextH4SemiBoldStyled) `
+  color: ${fontColors.light};
+`;
+export const SSITextH5Styled = styled.Text `
+  font-family: ${fontStyle.h5Regular.fontFamily};
+  font-size: ${fontStyle.h5Regular.fontSize}px;
+  font-weight: ${fontStyle.h5Regular.fontWeight};
+  line-height: ${fontStyle.h5Regular.lineHeight}px;
+  height: auto;
+`;
+export const SSITextH5LightStyled = styled(SSITextH5Styled) `
+  color: ${fontColors.light};
+`;
+export const SSITextH6Styled = styled.Text `
+  font-family: ${fontStyle.h6.fontFamily};
+  font-size: ${fontStyle.h6.fontSize}px;
+  font-weight: ${fontStyle.h6.fontWeight};
+  line-height: ${fontStyle.h6.lineHeight}px;
+  height: auto;
+`;
+export const SSITextH6LightStyled = styled(SSITextH6Styled) `
+  color: ${fontColors.light};
+`;

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

@@ -0,0 +1,3 @@
+export * from './containers';
+export * from './components';
+export * from './fonts';

package/dist/styles/components/index.js

@@ -0,0 +1,3 @@
+export * from './containers';
+export * from './components';
+export * from './fonts';

package/dist/styles/typography.d.ts

@@ -0,0 +1,4 @@
+import { FontStyle, FontSize } from '@sphereon/ui-components.core';
+import { TextStyle } from 'react-native';
+export declare const fontSize: Record<FontSize, number>;
+export declare const fontStyle: Record<FontStyle, TextStyle>;

package/dist/styles/typography.js

@@ -0,0 +1,86 @@
+import { fontSize as fontSizes, fontWeight, lineHeight } from '@sphereon/ui-components.core';
+import { moderateScale } from 'react-native-size-matters';
+export const fontSize = {
+    100: moderateScale(fontSizes['100']),
+    200: moderateScale(fontSizes['200']),
+    300: moderateScale(fontSizes['300']),
+    400: moderateScale(fontSizes['400']),
+    500: moderateScale(fontSizes['500']),
+    600: moderateScale(fontSizes['600']),
+    700: moderateScale(fontSizes['700']),
+    800: moderateScale(fontSizes['800']),
+};
+export const fontStyle = {
+    h0SemiBold: {
+        fontFamily: 'Poppins-SemiBold',
+        fontSize: fontSize[800],
+        fontWeight: fontWeight[600],
+        lineHeight: lineHeight[800],
+    },
+    h1SemiBold: {
+        fontFamily: 'Poppins-SemiBold',
+        fontSize: fontSize[700],
+        fontWeight: fontWeight[600],
+        lineHeight: lineHeight[700],
+    },
+    h2Regular: {
+        fontFamily: 'Poppins-Regular',
+        fontSize: fontSize[600],
+        fontWeight: fontWeight[400],
+        lineHeight: lineHeight[600],
+    },
+    h2SemiBold: {
+        fontFamily: 'Poppins-SemiBold',
+        fontSize: fontSize[600],
+        fontWeight: fontWeight[600],
+        lineHeight: lineHeight[600],
+    },
+    h3Regular: {
+        fontFamily: 'Poppins-Regular',
+        fontSize: fontSize[500],
+        fontWeight: fontWeight[400],
+        lineHeight: lineHeight[500],
+    },
+    h3SemiBold: {
+        fontFamily: 'Poppins-SemiBold',
+        fontSize: fontSize[500],
+        fontWeight: fontWeight[600],
+        lineHeight: lineHeight[500],
+    },
+    h4Regular: {
+        fontFamily: 'Poppins-Regular',
+        fontSize: fontSize[300],
+        fontWeight: fontWeight[400],
+        lineHeight: lineHeight[300],
+    },
+    h4SemiBold: {
+        fontFamily: 'Poppins-SemiBold',
+        fontSize: fontSize[300],
+        fontWeight: fontWeight[400],
+        lineHeight: lineHeight[300],
+    },
+    h5Regular: {
+        fontFamily: 'Poppins-Regular',
+        fontSize: fontSize[200],
+        fontWeight: fontWeight[400],
+        lineHeight: lineHeight[200],
+    },
+    h5SemiBold: {
+        fontFamily: 'Poppins-SemiBold',
+        fontSize: fontSize[200],
+        fontWeight: fontWeight[600],
+        lineHeight: lineHeight[200],
+    },
+    h6: {
+        fontFamily: 'Poppins',
+        fontSize: fontSize[100],
+        fontWeight: fontWeight[400],
+        lineHeight: lineHeight[100],
+    },
+    h7SemiBold: {
+        fontFamily: 'Poppins-SemiBold',
+        fontSize: fontSize[400],
+        fontWeight: fontWeight[600],
+        lineHeight: lineHeight[400],
+    },
+};

package/package.json

@@ -0,0 +1,50 @@
+{
+  "name": "@sphereon/ui-components.ssi-react-native",
+  "private": false,
+  "version": "0.1.1-next.18+45ffd0a",
+  "description": "SSI UI components for React-Native",
+  "repository": "git@github.com:Sphereon-Opensource/UI-Components.git",
+  "author": "Sphereon <dev@sphereon.com>",
+  "license": "Apache-2.0",
+  "keywords": [
+    "Frontend",
+    "User interface",
+    "React-Native",
+    "Self-sovereign identity (SSI)"
+  ],
+  "scripts": {
+    "build": "tsc",
+    "build:clean": "tsc --build --clean && tsc --build"
+  },
+  "source": "src/index.ts",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist/**/*",
+    "README.md",
+    "LICENSE"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@react-native-community/blur": "^4.3.0",
+    "@sphereon/ui-components.core": "0.1.1-next.18+45ffd0a",
+    "react-native-fast-image": "^8.6.3",
+    "react-native-size-matters": "^0.4.0",
+    "react-native-svg": "13.4.0",
+    "styled-components": "^5.3.3"
+  },
+  "devDependencies": {
+    "@types/react": "~18.0.14",
+    "@types/react-native": "0.71.3",
+    "@types/styled-components": "^5.1.15",
+    "@types/styled-components-react-native": "^5.1.2",
+    "typescript": "4.9.5"
+  },
+  "peerDependencies": {
+    "react": ">= 16.8.0",
+    "react-native": ">= 0.64.0"
+  },
+  "gitHead": "45ffd0a1f2d1aa4dbb492141b681c21db7d8a3a8"
+}