@startupjs-ui/avatar 0.1.13 → 0.1.19

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.
Files changed (3) hide show
  1. package/CHANGELOG.md +16 -0
  2. package/README.mdx +11 -6
  3. package/package.json +5 -5
package/CHANGELOG.md CHANGED
@@ -3,6 +3,22 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ ## [0.1.19](https://github.com/startupjs/startupjs-ui/compare/v0.1.18...v0.1.19) (2026-03-17)
7
+
8
+ **Note:** Version bump only for package @startupjs-ui/avatar
9
+
10
+
11
+
12
+
13
+
14
+ ## [0.1.16](https://github.com/startupjs/startupjs-ui/compare/v0.1.15...v0.1.16) (2026-02-10)
15
+
16
+ **Note:** Version bump only for package @startupjs-ui/avatar
17
+
18
+
19
+
20
+
21
+
6
22
  ## [0.1.13](https://github.com/startupjs/startupjs-ui/compare/v0.1.12...v0.1.13) (2026-02-03)
7
23
 
8
24
  **Note:** Version bump only for package @startupjs-ui/avatar
package/README.mdx CHANGED
@@ -8,7 +8,9 @@ import { Sandbox } from '@startupjs-ui/docs'
8
8
 
9
9
  # Avatar
10
10
 
11
- Avatars can be used to represent people. When used with a specific logo, avatars can also be used to represent a brand. They also can be a placeholder when there is no image or image can't be loaded by some reason to be shown, showing an alternative in this case.
11
+ Avatars represent people or brands. They display a user's photo when a `src` URL is provided, and fall back to showing initials (derived from the `children` string) or a `?` placeholder when no image is available or the image fails to load.
12
+
13
+ The component also supports a `style` prop for custom styles, a `shape` prop to control the avatar's shape (defaults to `'circle'`), and a `disabled` prop to disable interactions.
12
14
 
13
15
  ```js
14
16
  import { Avatar } from 'startupjs-ui'
@@ -23,7 +25,8 @@ return pug`
23
25
  ```
24
26
 
25
27
  ## Sizes
26
- Size is `m` by default. It can be changed by changing the `size` property by setting it to one of the values ​​('s', 'm', 'l') or by specifying the size in pixels.
28
+
29
+ The default size is `'m'`. You can change it by setting the `size` prop to one of the preset values (`'s'`, `'m'`, `'l'`) or to a specific number of pixels.
27
30
 
28
31
  ```jsx example
29
32
  return pug`
@@ -52,7 +55,8 @@ return pug`
52
55
  ```
53
56
 
54
57
  ## User status
55
- Avatars can be used to display user online status. It can be set by passing string `online` or `away` to property `status`.
58
+
59
+ Avatars can display a user's online status. Set the `status` prop to `'online'` or `'away'` to show a built-in status indicator.
56
60
 
57
61
  ```jsx example
58
62
  return pug`
@@ -70,7 +74,7 @@ return pug`
70
74
  `
71
75
  ```
72
76
 
73
- Also you can provide custom components for the status icon using `statusComponents` prop.
77
+ You can also provide custom components for status indicators using the `statusComponents` prop. Pass an object mapping status names to components, then use that status name in the `status` prop.
74
78
 
75
79
  ```jsx example
76
80
  const AbsentStatus = useCallback(({ style }) => (
@@ -109,7 +113,8 @@ styl`
109
113
  ```
110
114
 
111
115
  ## Fallback string
112
- If `url` prop is not provided or if there is an error loading the avatar image, the component using an alternative. The alternative is initials of two first words of `children` string if provided and `?` if not. In the example below alternative is 'John Doe' therefore 'JD' will be displayed.
116
+
117
+ If the `src` prop is not provided or if the image fails to load, the avatar displays a fallback instead. The fallback shows the initials of the first two words of the `children` string. If no `children` are provided, it displays `?`. In the example below, the fallback text is "John Doe", so "JD" is displayed.
113
118
 
114
119
  ```jsx example
115
120
  return pug`
@@ -125,7 +130,7 @@ return pug`
125
130
 
126
131
  ## Actions
127
132
 
128
- Passed handler to `onPress` property will be called when the user taps the component.
133
+ Pass a handler to the `onPress` prop to respond when the user taps the avatar.
129
134
 
130
135
  ```jsx example
131
136
  const [counter, setCounter] = useState(0)
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@startupjs-ui/avatar",
3
- "version": "0.1.13",
3
+ "version": "0.1.19",
4
4
  "publishConfig": {
5
5
  "access": "public"
6
6
  },
@@ -8,9 +8,9 @@
8
8
  "types": "index.d.ts",
9
9
  "type": "module",
10
10
  "dependencies": {
11
- "@startupjs-ui/core": "^0.1.11",
12
- "@startupjs-ui/div": "^0.1.13",
13
- "@startupjs-ui/span": "^0.1.13",
11
+ "@startupjs-ui/core": "^0.1.19",
12
+ "@startupjs-ui/div": "^0.1.19",
13
+ "@startupjs-ui/span": "^0.1.19",
14
14
  "randomcolor": "^0.5.4"
15
15
  },
16
16
  "peerDependencies": {
@@ -18,5 +18,5 @@
18
18
  "react-native": "*",
19
19
  "startupjs": "*"
20
20
  },
21
- "gitHead": "5cfdccf2bdae3873e968289a3e6b938fad02101a"
21
+ "gitHead": "bfcca786dc363f42a09b6eef4feb7ca8139302fc"
22
22
  }