@flipdish/ui-library 0.13.2 → 0.14.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/atoms/Avatar/avatar.utils.cjs +17 -0
- package/dist/components/atoms/Avatar/avatar.utils.cjs.map +1 -0
- package/dist/components/atoms/Avatar/avatar.utils.js +15 -0
- package/dist/components/atoms/Avatar/avatar.utils.js.map +1 -0
- package/dist/components/atoms/Avatar/index.cjs +2 -0
- package/dist/components/atoms/Avatar/index.cjs.map +1 -1
- package/dist/components/atoms/Avatar/index.d.ts +1 -0
- package/dist/components/atoms/Avatar/index.d.ts.map +1 -1
- package/dist/components/atoms/Avatar/index.js +1 -0
- package/dist/components/atoms/Avatar/index.js.map +1 -1
- package/dist/native/components/atoms/Avatar/avatar.utils.d.ts +10 -0
- package/dist/native/components/atoms/Avatar/avatar.utils.d.ts.map +1 -0
- package/dist/native/components/atoms/Avatar/avatar.utils.js +15 -0
- package/dist/native/components/atoms/Avatar/avatar.utils.js.map +1 -0
- package/dist/native/components/atoms/Avatar/index.d.ts +18 -7
- package/dist/native/components/atoms/Avatar/index.d.ts.map +1 -1
- package/dist/native/components/atoms/Avatar/index.js +53 -5
- package/dist/native/components/atoms/Avatar/index.js.map +1 -1
- package/package.json +2 -2
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
/**
|
|
4
|
+
* Extracts the initials from a full name.
|
|
5
|
+
*
|
|
6
|
+
* @param name - The full name from which to extract initials.
|
|
7
|
+
* @returns The initials of the provided name. If the name contains only one word,
|
|
8
|
+
* it returns the first character of that word. If the name contains two words,
|
|
9
|
+
* it returns the first character of each word.
|
|
10
|
+
*/
|
|
11
|
+
const getInitials = (name) => {
|
|
12
|
+
const [firstName = '', lastName] = name.trim().split(/\s+/);
|
|
13
|
+
return firstName.charAt(0) + (lastName ? lastName.charAt(0) : '');
|
|
14
|
+
};
|
|
15
|
+
|
|
16
|
+
exports.getInitials = getInitials;
|
|
17
|
+
//# sourceMappingURL=avatar.utils.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"avatar.utils.cjs","sources":["../../../../src/components/atoms/Avatar/avatar.utils.ts"],"sourcesContent":[null],"names":[],"mappings":";;AAAA;;;;;;;AAOG;AACI,MAAM,WAAW,GAAG,CAAC,IAAY,KAAI;AAC1C,IAAA,MAAM,CAAC,SAAS,GAAG,EAAE,EAAE,QAAQ,CAAC,GAAG,IAAI,CAAC,IAAI,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC;IAC3D,OAAO,SAAS,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,QAAQ,GAAG,QAAQ,CAAC,MAAM,CAAC,CAAC,CAAC,GAAG,EAAE,CAAC;AACnE;;;;"}
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Extracts the initials from a full name.
|
|
3
|
+
*
|
|
4
|
+
* @param name - The full name from which to extract initials.
|
|
5
|
+
* @returns The initials of the provided name. If the name contains only one word,
|
|
6
|
+
* it returns the first character of that word. If the name contains two words,
|
|
7
|
+
* it returns the first character of each word.
|
|
8
|
+
*/
|
|
9
|
+
const getInitials = (name) => {
|
|
10
|
+
const [firstName = '', lastName] = name.trim().split(/\s+/);
|
|
11
|
+
return firstName.charAt(0) + (lastName ? lastName.charAt(0) : '');
|
|
12
|
+
};
|
|
13
|
+
|
|
14
|
+
export { getInitials };
|
|
15
|
+
//# sourceMappingURL=avatar.utils.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"avatar.utils.js","sources":["../../../../src/components/atoms/Avatar/avatar.utils.ts"],"sourcesContent":[null],"names":[],"mappings":"AAAA;;;;;;;AAOG;AACI,MAAM,WAAW,GAAG,CAAC,IAAY,KAAI;AAC1C,IAAA,MAAM,CAAC,SAAS,GAAG,EAAE,EAAE,QAAQ,CAAC,GAAG,IAAI,CAAC,IAAI,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC;IAC3D,OAAO,SAAS,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,QAAQ,GAAG,QAAQ,CAAC,MAAM,CAAC,CAAC,CAAC,GAAG,EAAE,CAAC;AACnE;;;;"}
|
|
@@ -9,6 +9,7 @@ var Avatar_styles = require('./Avatar.styles.cjs');
|
|
|
9
9
|
var avatarCount = require('./components/avatar-count.cjs');
|
|
10
10
|
var avatarOnlineIndicator = require('./components/avatar-online-indicator.cjs');
|
|
11
11
|
var verifiedTick = require('./components/verified-tick.cjs');
|
|
12
|
+
var avatar_utils = require('./avatar.utils.cjs');
|
|
12
13
|
var avatarAddButton = require('./components/avatar-add-button.cjs');
|
|
13
14
|
var avatarLabelGroup = require('./components/avatar-label-group.cjs');
|
|
14
15
|
|
|
@@ -58,6 +59,7 @@ const Avatar = ({ size = 'md', src, alt, initials, placeholder, placeholderIcon:
|
|
|
58
59
|
'before:absolute before:inset-0 before:rounded-[inherit] before:border before:border-white/32 before:mask-[linear-gradient(to_bottom,black_0%,transparent_25%,transparent_75%,black_100%)]', contentClassName), children: renderMainContent() }), renderBadgeContent()] }));
|
|
59
60
|
};
|
|
60
61
|
|
|
62
|
+
exports.getInitials = avatar_utils.getInitials;
|
|
61
63
|
exports.AvatarAddButton = avatarAddButton.AvatarAddButton;
|
|
62
64
|
exports.AvatarLabelGroup = avatarLabelGroup.AvatarLabelGroup;
|
|
63
65
|
exports.Avatar = Avatar;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.cjs","sources":["../../../../src/components/atoms/Avatar/index.tsx"],"sourcesContent":[null],"names":["useState","useResolvedTestId","_jsx","joinTestId","cx","styles","User01","AvatarOnlineIndicator","VerifiedTick","AvatarCount","_jsxs"],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.cjs","sources":["../../../../src/components/atoms/Avatar/index.tsx"],"sourcesContent":[null],"names":["useState","useResolvedTestId","_jsx","joinTestId","cx","styles","User01","AvatarOnlineIndicator","VerifiedTick","AvatarCount","_jsxs"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/atoms/Avatar/index.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,KAAK,EAAE,EAAE,KAAK,SAAS,EAAY,MAAM,OAAO,CAAC;AAM1D,OAAO,EAAE,eAAe,EAAE,MAAM,gCAAgC,CAAC;AACjE,OAAO,EAAE,gBAAgB,EAAE,MAAM,iCAAiC,CAAC;AAEnE,MAAM,WAAW,WAAW;IAC1B,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK,CAAC;IAChD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,GAAG,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACpB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;OAEG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;OAEG;IACH,MAAM,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;IAC9B;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;OAEG;IACH,eAAe,CAAC,EAAE,EAAE,CAAC;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IAC7C;;OAEG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC;IAExB;;;;;OAKG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;OAGG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED;;;;;;GAMG;AACH,eAAO,MAAM,MAAM,GAAI,kMAiBpB,WAAW,gCAsFb,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/atoms/Avatar/index.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,KAAK,EAAE,EAAE,KAAK,SAAS,EAAY,MAAM,OAAO,CAAC;AAM1D,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAC7C,OAAO,EAAE,eAAe,EAAE,MAAM,gCAAgC,CAAC;AACjE,OAAO,EAAE,gBAAgB,EAAE,MAAM,iCAAiC,CAAC;AAEnE,MAAM,WAAW,WAAW;IAC1B,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK,CAAC;IAChD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,GAAG,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACpB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;OAEG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;OAEG;IACH,MAAM,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;IAC9B;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;OAEG;IACH,eAAe,CAAC,EAAE,EAAE,CAAC;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IAC7C;;OAEG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC;IAExB;;;;;OAKG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;OAGG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED;;;;;;GAMG;AACH,eAAO,MAAM,MAAM,GAAI,kMAiBpB,WAAW,gCAsFb,CAAC"}
|
|
@@ -7,6 +7,7 @@ import { styles } from './Avatar.styles.js';
|
|
|
7
7
|
import { AvatarCount } from './components/avatar-count.js';
|
|
8
8
|
import { AvatarOnlineIndicator } from './components/avatar-online-indicator.js';
|
|
9
9
|
import { VerifiedTick } from './components/verified-tick.js';
|
|
10
|
+
export { getInitials } from './avatar.utils.js';
|
|
10
11
|
export { AvatarAddButton } from './components/avatar-add-button.js';
|
|
11
12
|
export { AvatarLabelGroup } from './components/avatar-label-group.js';
|
|
12
13
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../../../src/components/atoms/Avatar/index.tsx"],"sourcesContent":[null],"names":["_jsx","_jsxs"],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../../src/components/atoms/Avatar/index.tsx"],"sourcesContent":[null],"names":["_jsx","_jsxs"],"mappings":"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"}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Extracts the initials from a full name.
|
|
3
|
+
*
|
|
4
|
+
* @param name - The full name from which to extract initials.
|
|
5
|
+
* @returns The initials of the provided name. If the name contains only one word,
|
|
6
|
+
* it returns the first character of that word. If the name contains two words,
|
|
7
|
+
* it returns the first character of each word.
|
|
8
|
+
*/
|
|
9
|
+
export declare const getInitials: (name: string) => string;
|
|
10
|
+
//# sourceMappingURL=avatar.utils.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"avatar.utils.d.ts","sourceRoot":"","sources":["../../../../../src/components/atoms/Avatar/avatar.utils.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AACH,eAAO,MAAM,WAAW,GAAI,MAAM,MAAM,WAGvC,CAAC"}
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Extracts the initials from a full name.
|
|
3
|
+
*
|
|
4
|
+
* @param name - The full name from which to extract initials.
|
|
5
|
+
* @returns The initials of the provided name. If the name contains only one word,
|
|
6
|
+
* it returns the first character of that word. If the name contains two words,
|
|
7
|
+
* it returns the first character of each word.
|
|
8
|
+
*/
|
|
9
|
+
const getInitials = (name) => {
|
|
10
|
+
const [firstName = '', lastName] = name.trim().split(/\s+/);
|
|
11
|
+
return firstName.charAt(0) + (lastName ? lastName.charAt(0) : '');
|
|
12
|
+
};
|
|
13
|
+
|
|
14
|
+
export { getInitials };
|
|
15
|
+
//# sourceMappingURL=avatar.utils.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"avatar.utils.js","sources":["../../../../../../src/components/atoms/Avatar/avatar.utils.ts"],"sourcesContent":[null],"names":[],"mappings":"AAAA;;;;;;;AAOG;AACI,MAAM,WAAW,GAAG,CAAC,IAAY,KAAI;AAC1C,IAAA,MAAM,CAAC,SAAS,GAAG,EAAE,EAAE,QAAQ,CAAC,GAAG,IAAI,CAAC,IAAI,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC;IAC3D,OAAO,SAAS,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,QAAQ,GAAG,QAAQ,CAAC,MAAM,CAAC,CAAC,CAAC,GAAG,EAAE,CAAC;AACnE;;;;"}
|
|
@@ -1,19 +1,30 @@
|
|
|
1
|
+
export { getInitials } from './avatar.utils';
|
|
1
2
|
/**
|
|
2
|
-
* React Native pilot for `Avatar` —
|
|
3
|
-
*
|
|
4
|
-
*
|
|
5
|
-
*
|
|
3
|
+
* React Native pilot for `Avatar` — renders initials, or a fallback person icon when
|
|
4
|
+
* no initials are available, inside a solid-colour circle.
|
|
5
|
+
*
|
|
6
|
+
* Deliberately narrower than the web prop surface: no `src`, `badge`, `status`,
|
|
7
|
+
* `verified`, or `count` yet. Nothing in the app needs an image avatar (no photo field
|
|
8
|
+
* exists in the account API this pilot consumes) or the badge slots, so this stays a
|
|
9
|
+
* minimal, verified surface rather than a guess at future needs.
|
|
6
10
|
*/
|
|
7
11
|
export interface AvatarProps {
|
|
8
12
|
size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
|
|
9
13
|
className?: string;
|
|
14
|
+
/**
|
|
15
|
+
* The initials of the user to display. Compute via `getInitials(name)` (re-exported
|
|
16
|
+
* above) — matches the web `Avatar`'s `initials` prop, which also takes a
|
|
17
|
+
* pre-computed string rather than a raw name.
|
|
18
|
+
*/
|
|
19
|
+
initials?: string;
|
|
10
20
|
/** Overrides the generated `testID` (defaults to `fd-avatar`). */
|
|
11
21
|
'data-testid'?: string;
|
|
12
22
|
}
|
|
13
23
|
/**
|
|
14
|
-
* Minimal React Native `Avatar` — a solid-coloured, fully rounded circle
|
|
24
|
+
* Minimal React Native `Avatar` — a solid-coloured, fully rounded circle showing
|
|
25
|
+
* initials or a fallback person icon.
|
|
15
26
|
*
|
|
16
|
-
* @summary displays a user or entity
|
|
27
|
+
* @summary displays a user or entity with initials or an icon fallback (React Native)
|
|
17
28
|
*/
|
|
18
|
-
export declare const Avatar: ({ size, className, "data-testid": dataTestId }: AvatarProps) => import("react").JSX.Element;
|
|
29
|
+
export declare const Avatar: ({ size, className, initials, "data-testid": dataTestId }: AvatarProps) => import("react").JSX.Element;
|
|
19
30
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/atoms/Avatar/index.native.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/atoms/Avatar/index.native.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAE7C;;;;;;;;GAQG;AACH,MAAM,WAAW,WAAW;IAC1B,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK,CAAC;IAChD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,kEAAkE;IAClE,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAkDD;;;;;GAKG;AACH,eAAO,MAAM,MAAM,GAAI,0DAAiE,WAAW,gCAelG,CAAC"}
|
|
@@ -1,17 +1,65 @@
|
|
|
1
1
|
import { jsx } from 'react/jsx-runtime';
|
|
2
|
+
import { User01 } from '@flipdish/ui-icons';
|
|
2
3
|
import { cx } from '../../../utilities/cx/index.js';
|
|
3
4
|
import { useResolvedTestId } from '../../../utilities/testIdUtils/index.js';
|
|
4
|
-
import { View } from 'react-native';
|
|
5
|
+
import { View, Text } from 'react-native';
|
|
5
6
|
import { styles } from './Avatar.styles.js';
|
|
7
|
+
export { getInitials } from './avatar.utils.js';
|
|
6
8
|
|
|
7
9
|
/**
|
|
8
|
-
*
|
|
10
|
+
* `styles[size].icon` gives the fallback icon's Tailwind `size-N` class for each size
|
|
11
|
+
* (see `Avatar.styles.ts`), but the RN icon component takes a numeric pixel `size`,
|
|
12
|
+
* not a className. `size-N` is `N * 4px` on Tailwind's default scale, so this mirrors
|
|
13
|
+
* that scale numerically rather than re-deriving it from the className string.
|
|
14
|
+
*/
|
|
15
|
+
const ICON_PIXEL_SIZE = {
|
|
16
|
+
xs: 16,
|
|
17
|
+
sm: 20,
|
|
18
|
+
md: 24,
|
|
19
|
+
lg: 28,
|
|
20
|
+
xl: 32,
|
|
21
|
+
'2xl': 32,
|
|
22
|
+
};
|
|
23
|
+
/**
|
|
24
|
+
* Initials text styling, applied via a plain RN `style` prop rather than
|
|
25
|
+
* `styles[size].initials`'s Tailwind classes (used on web).
|
|
26
|
+
*
|
|
27
|
+
* Confirmed on-device: `className`-driven styles apply correctly to this
|
|
28
|
+
* component's own `View` (the circle's background/layout render fine), but
|
|
29
|
+
* silently fail to apply to `Text` at all — neither a semantic colour token
|
|
30
|
+
* nor a plain Tailwind colour utility rendered, while an identical plain
|
|
31
|
+
* `style` prop worked immediately. This is a `react-native-css` bug specific
|
|
32
|
+
* to this preview version's `Text` support, not a token or component-logic
|
|
33
|
+
* issue. Revisit once upstream fixes it — this workaround can be dropped
|
|
34
|
+
* without any change to the props Avatar exposes.
|
|
35
|
+
*
|
|
36
|
+
* Values mirror `Avatar.styles.ts`'s `initials` field (Tailwind's default
|
|
37
|
+
* text-size scale + `font-semibold` = 600), hand-resolved since className
|
|
38
|
+
* can't be used here. Only `xl` has been verified on-device (the only size
|
|
39
|
+
* consumed anywhere in the app so far) — spot-check the others against
|
|
40
|
+
* design before using a different size.
|
|
41
|
+
*/
|
|
42
|
+
const INITIALS_TEXT_SIZE = {
|
|
43
|
+
xs: { fontSize: 12, lineHeight: 16 },
|
|
44
|
+
sm: { fontSize: 14, lineHeight: 20 },
|
|
45
|
+
md: { fontSize: 16, lineHeight: 24 },
|
|
46
|
+
lg: { fontSize: 18, lineHeight: 28 },
|
|
47
|
+
xl: { fontSize: 20, lineHeight: 28 },
|
|
48
|
+
'2xl': { fontSize: 24, lineHeight: 32 },
|
|
49
|
+
};
|
|
50
|
+
// `text-quaternary` resolves to neutral-500 (light) / neutral-400 (dark) per
|
|
51
|
+
// tokens.css. Hardcoded to the light-mode value: className can't resolve it
|
|
52
|
+
// dynamically here, and the app doesn't support dark mode elsewhere yet.
|
|
53
|
+
const INITIALS_TEXT_COLOR = '#737373';
|
|
54
|
+
/**
|
|
55
|
+
* Minimal React Native `Avatar` — a solid-coloured, fully rounded circle showing
|
|
56
|
+
* initials or a fallback person icon.
|
|
9
57
|
*
|
|
10
|
-
* @summary displays a user or entity
|
|
58
|
+
* @summary displays a user or entity with initials or an icon fallback (React Native)
|
|
11
59
|
*/
|
|
12
|
-
const Avatar = ({ size = 'md', className, 'data-testid': dataTestId }) => {
|
|
60
|
+
const Avatar = ({ size = 'md', className, initials, 'data-testid': dataTestId }) => {
|
|
13
61
|
const avatarTestId = useResolvedTestId({ testId: dataTestId, segment: 'avatar', rootName: 'avatar' });
|
|
14
|
-
return jsx(View, { testID: avatarTestId, className: cx('shrink-0 rounded-full bg-tertiary', styles[size].root, className) });
|
|
62
|
+
return (jsx(View, { testID: avatarTestId, className: cx('shrink-0 items-center justify-center overflow-hidden rounded-full bg-tertiary', styles[size].root, className), children: initials ? (jsx(Text, { style: { color: INITIALS_TEXT_COLOR, fontWeight: '600', ...INITIALS_TEXT_SIZE[size] }, children: initials })) : (jsx(User01, { size: ICON_PIXEL_SIZE[size] })) }));
|
|
15
63
|
};
|
|
16
64
|
|
|
17
65
|
export { Avatar };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../../../../../src/components/atoms/Avatar/index.native.tsx"],"sourcesContent":[null],"names":["_jsx"],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../../../../src/components/atoms/Avatar/index.native.tsx"],"sourcesContent":[null],"names":["_jsx"],"mappings":";;;;;;;;AA8BA;;;;;AAKG;AACH,MAAM,eAAe,GAAqD;AACxE,IAAA,EAAE,EAAE,EAAE;AACN,IAAA,EAAE,EAAE,EAAE;AACN,IAAA,EAAE,EAAE,EAAE;AACN,IAAA,EAAE,EAAE,EAAE;AACN,IAAA,EAAE,EAAE,EAAE;AACN,IAAA,KAAK,EAAE,EAAE;CACV;AAED;;;;;;;;;;;;;;;;;;AAkBG;AACH,MAAM,kBAAkB,GAAuF;IAC7G,EAAE,EAAE,EAAE,QAAQ,EAAE,EAAE,EAAE,UAAU,EAAE,EAAE,EAAE;IACpC,EAAE,EAAE,EAAE,QAAQ,EAAE,EAAE,EAAE,UAAU,EAAE,EAAE,EAAE;IACpC,EAAE,EAAE,EAAE,QAAQ,EAAE,EAAE,EAAE,UAAU,EAAE,EAAE,EAAE;IACpC,EAAE,EAAE,EAAE,QAAQ,EAAE,EAAE,EAAE,UAAU,EAAE,EAAE,EAAE;IACpC,EAAE,EAAE,EAAE,QAAQ,EAAE,EAAE,EAAE,UAAU,EAAE,EAAE,EAAE;IACpC,KAAK,EAAE,EAAE,QAAQ,EAAE,EAAE,EAAE,UAAU,EAAE,EAAE,EAAE;CACxC;AAED;AACA;AACA;AACA,MAAM,mBAAmB,GAAG,SAAS;AAErC;;;;;AAKG;AACI,MAAM,MAAM,GAAG,CAAC,EAAE,IAAI,GAAG,IAAI,EAAE,SAAS,EAAE,QAAQ,EAAE,aAAa,EAAE,UAAU,EAAe,KAAI;AACrG,IAAA,MAAM,YAAY,GAAG,iBAAiB,CAAC,EAAE,MAAM,EAAE,UAAU,EAAE,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAE,CAAC;AAErG,IAAA,QACEA,GAAA,CAAC,IAAI,EAAA,EACH,MAAM,EAAE,YAAY,EACpB,SAAS,EAAE,EAAE,CAAC,+EAA+E,EAAE,MAAM,CAAC,IAAI,CAAC,CAAC,IAAI,EAAE,SAAS,CAAC,EAAA,QAAA,EAE3H,QAAQ,IACPA,GAAA,CAAC,IAAI,EAAA,EAAC,KAAK,EAAE,EAAE,KAAK,EAAE,mBAAmB,EAAE,UAAU,EAAE,KAAK,EAAE,GAAG,kBAAkB,CAAC,IAAI,CAAC,EAAE,EAAA,QAAA,EAAG,QAAQ,EAAA,CAAQ,KAE9GA,GAAA,CAAC,MAAM,IAAC,IAAI,EAAE,eAAe,CAAC,IAAI,CAAC,EAAA,CAAI,CACxC,EAAA,CACI;AAEX;;;;"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@flipdish/ui-library",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.14.0",
|
|
4
4
|
"description": "Flipdish Design System — atomic-design component library (Tailwind v4 + UntitledUI + React Aria).",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"sideEffects": [
|
|
@@ -95,7 +95,7 @@
|
|
|
95
95
|
"react-error-boundary": "^4.1.2",
|
|
96
96
|
"tailwindcss-animate": "^1.0.7",
|
|
97
97
|
"tailwindcss-react-aria-components": "^2.1.1",
|
|
98
|
-
"@flipdish/ui-icons": "^0.
|
|
98
|
+
"@flipdish/ui-icons": "^0.4.0"
|
|
99
99
|
},
|
|
100
100
|
"peerDependencies": {
|
|
101
101
|
"@expo/metro-config": ">=54.0.0",
|