@inlaylab/opaline-svelte 1.0.0 → 1.1.1

package/README.md

@@ -17,6 +17,12 @@ npm i @inlaylab/opaline-svelte
 
 Props: `seed`, `look`, `size`, `src`, `alt`, and every core option.
 
+Groups: `AvatarGroup` overlaps avatars and adds a `+N` chip past `max`.
+
+```svelte
+<AvatarGroup look={clay} members={[user.email, { seed: 'grace', src, alt: 'Grace' }]} max={4} />
+```
+
 Same seed, same avatar: from 1.0, the same seed and options give a byte-identical SVG in every 1.x release.
 
 [Playground and docs](https://inlaylab.github.io/Opaline/) · [GitHub](https://github.com/Inlaylab/Opaline) · MIT for code and art.

package/dist/AvatarGroup.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+  import { avatarGroup } from '@inlaylab/opaline'
+  import Avatar from './Avatar.svelte'
+  import type { AvatarGroupProps } from './types.js'
+
+  let { members, max, alt, size = 40, ...options }: AvatarGroupProps = $props()
+  const g = $derived(avatarGroup(members, { max, size, shape: options.shape }))
+</script>
+
+<span data-opaline-group="" role="group" aria-label={alt || undefined} style={g.css.root}>
+  {#each g.shown as m, i (i)}
+    <span data-opaline-member="" style={i ? g.css.member : g.css.first}>
+      <Avatar {...options} {size} seed={m.seed} src={m.src} alt={m.alt} />
+    </span>
+  {/each}
+  {#if g.rest}
+    <span data-opaline-more="" role="img" aria-label="{g.rest} more" style={g.css.more}
+      >+{g.rest}</span
+    >
+  {/if}
+</span>

package/dist/AvatarGroup.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { AvatarGroupProps } from './types.js';
+declare const AvatarGroup: import("svelte").Component<AvatarGroupProps, {}, "">;
+type AvatarGroup = ReturnType<typeof AvatarGroup>;
+export default AvatarGroup;

package/dist/index.d.ts

@@ -1,2 +1,3 @@
 export { default as Avatar } from './Avatar.svelte';
-export type { AvatarProps } from './types.js';
+export { default as AvatarGroup } from './AvatarGroup.svelte';
+export type { AvatarGroupProps, AvatarProps } from './types.js';

package/dist/index.js

@@ -1 +1,2 @@
 export { default as Avatar } from './Avatar.svelte';
+export { default as AvatarGroup } from './AvatarGroup.svelte';

package/dist/types.d.ts

@@ -1,4 +1,4 @@
-import type { AuraOptions, ClayOptions, Style } from '@inlaylab/opaline';
+import type { AuraOptions, ClayOptions, GroupMember, InitialsOptions, Style } from '@inlaylab/opaline';
 export type AvatarProps = {
     seed: string | number | null | undefined;
     /** The style object, e.g. `morph` from `@inlaylab/opaline/morph`. */
@@ -8,4 +8,12 @@ export type AvatarProps = {
     src?: string;
     /** Accessible name. Without it the avatar is decorative and hidden from assistive tech. */
     alt?: string;
-} & ClayOptions & AuraOptions;
+} & ClayOptions & AuraOptions & InitialsOptions;
+export type AvatarGroupProps = Omit<AvatarProps, 'seed' | 'src' | 'alt'> & {
+    /** Seeds, or `{ seed, src, alt }` for a photo and an accessible name. */
+    members: readonly GroupMember[];
+    /** Show at most this many avatars, then a `+N` chip. Shows everyone when unset. */
+    max?: number;
+    /** Accessible name for the whole group, e.g. "Project members". */
+    alt?: string;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inlaylab/opaline-svelte",
-  "version": "1.0.0",
+  "version": "1.1.1",
   "description": "Seeded avatars for Svelte 5: an SSR-safe Avatar component.",
   "keywords": [
     "avatar",
@@ -45,7 +45,7 @@
     "svelte": ">=5.20"
   },
   "dependencies": {
-    "@inlaylab/opaline": "1.0.0"
+    "@inlaylab/opaline": "1.1.1"
   },
   "devDependencies": {
     "@inlaylab/opaline-contract": "0.0.0",