@ornikar/bumper 3.13.0 → 3.14.0

package/src/system/dataDisplays/Avatar/components/AvatarInitial.tsx

@@ -0,0 +1,30 @@
+import { styled } from '@tamagui/core';
+import type { ReactNode } from 'react';
+import type { TypographyTextProps } from '../../../content/typography/Typography';
+import { InternalTypography } from '../../../content/typography/Typography';
+import type { PropsToTamaguiVariants } from '../../../types';
+import type { AvatarProps, AvatarSize } from '../Avatar';
+import { context } from '../context';
+
+export type AvatarInitialProps = Required<Pick<AvatarProps, 'firstname' | 'lastname'>>;
+
+export function extractInitial({ firstname, lastname }: AvatarInitialProps): string {
+  return `${firstname[0]}${lastname[0]}`.toUpperCase();
+}
+
+const StyledAvatarInitial = styled(InternalTypography, {
+  context,
+  variants: {
+    size: (size: AvatarSize) => ({
+      variant: size === 'small' ? 'label-m' : 'label-l',
+    }),
+    disabled: {
+      true: { color: '$content.disabled.onContrasted' },
+      false: { color: '$content.accent' },
+    },
+  } as const satisfies PropsToTamaguiVariants<AvatarProps, TypographyTextProps>,
+});
+
+export function AvatarInitial(props: AvatarInitialProps): ReactNode {
+  return <StyledAvatarInitial>{extractInitial(props)}</StyledAvatarInitial>;
+}

package/src/system/dataDisplays/Avatar/context.ts

@@ -0,0 +1,10 @@
+import { createStyledContext } from '@tamagui/core';
+import type { AvatarProps } from './Avatar';
+
+type AvatarContextProps = Required<Pick<AvatarProps, 'disabled' | 'size' | 'shape'>>;
+
+export const context = createStyledContext<AvatarContextProps>({
+  size: 'large',
+  shape: 'square',
+  disabled: false,
+});