@urbicon-ui/blocks 6.37.2 → 6.38.0

package/dist/components/AvatarGroup/AvatarGroup.svelte

@@ -0,0 +1,60 @@
+<script lang="ts">
+  import { useBlocksI18n } from '../..';
+  import { Avatar } from '../../primitives/Avatar';
+  import { getBlocksConfig, resolveSlotClasses } from '../../provider';
+  import { avatarGroupVariants } from './avatar-group.variants';
+  import type { AvatarGroupProps } from './index';
+
+  let {
+    items,
+    size = 'md',
+    max,
+    spacing = 'normal',
+    borderColor = 'var(--color-surface-base)',
+    class: className = '',
+    unstyled: unstyledProp = false,
+    slotClasses: slotClassesProp = {},
+    preset,
+    ...restProps
+  }: AvatarGroupProps = $props();
+
+  const bt = useBlocksI18n();
+  const blocksConfig = getBlocksConfig();
+  const unstyled = $derived(unstyledProp || blocksConfig?.unstyled || false);
+
+  const styles = $derived(unstyled ? null : avatarGroupVariants({ spacing }));
+  const slotClasses = $derived(
+    resolveSlotClasses(blocksConfig, 'AvatarGroup', preset, { spacing, size }, slotClassesProp)
+  );
+
+  // When `max` is set and exceeded, show (max - 1) avatars + one "+N" chip so the
+  // total rendered count is exactly `max`.
+  const capped = $derived(typeof max === 'number' && max > 0 && items.length > max);
+  const shown = $derived(capped ? items.slice(0, (max as number) - 1) : items);
+  const overflow = $derived(capped ? items.length - ((max as number) - 1) : 0);
+
+  const baseClass = $derived(
+    [styles?.base(), slotClasses?.base, className].filter(Boolean).join(' ') || undefined
+  );
+  const overflowClass = $derived(
+    [styles?.overflow(), slotClasses?.overflow].filter(Boolean).join(' ') || undefined
+  );
+</script>
+
+<div class={baseClass} role="group" aria-label={bt('accessibility.avatarGroup')} {...restProps}>
+  {#each shown as avatar, i (`${avatar.name ?? avatar.src ?? ''}-${i}`)}
+    <Avatar {...avatar} {size} ring ringColor={borderColor} />
+  {/each}
+  {#if overflow > 0}
+    <Avatar
+      {size}
+      ring
+      ringColor={borderColor}
+      intent="neutral"
+      class={overflowClass}
+      aria-label={`+${overflow}`}
+    >
+      {#snippet children()}+{overflow}{/snippet}
+    </Avatar>
+  {/if}
+</div>

package/dist/components/AvatarGroup/AvatarGroup.svelte.d.ts

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

package/dist/components/AvatarGroup/avatar-group.variants.d.ts

@@ -0,0 +1,20 @@
+import { type SlotNames, type VariantProps } from '../../utils/variants.js';
+export declare const avatarGroupVariants: ((props?: {
+    spacing?: "normal" | "tight" | "loose" | undefined;
+} | undefined) => {
+    base: (props?: ({
+        spacing?: "normal" | "tight" | "loose" | undefined;
+    } & {
+        class?: string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | /*elided*/ any | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined;
+    }) | undefined) => string;
+    overflow: (props?: ({
+        spacing?: "normal" | "tight" | "loose" | undefined;
+    } & {
+        class?: string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | /*elided*/ any | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined;
+    }) | undefined) => string;
+}) & {
+    readonly config: import("../../utils/variants.js").TVConfig;
+};
+export type AvatarGroupVariants = VariantProps<typeof avatarGroupVariants>;
+/** Slot names derived from the `tv()` config above — single source of truth for `slotClasses`. */
+export type AvatarGroupSlots = SlotNames<typeof avatarGroupVariants>;

package/dist/components/AvatarGroup/avatar-group.variants.js

@@ -0,0 +1,21 @@
+import { tv } from '../../utils/variants.js';
+// AvatarGroup stacks avatars with a controlled overlap and an optional "+N"
+// overflow chip. It composes the public Avatar for each entry (and the chip),
+// so per-avatar sizing/shape/ring come from Avatar — these variants own only the
+// row layout (overlap amount) and a light emphasis on the overflow chip.
+export const avatarGroupVariants = tv({
+    slots: {
+        base: ['inline-flex items-center'],
+        overflow: ['font-medium']
+    },
+    variants: {
+        spacing: {
+            tight: { base: '-space-x-4' },
+            normal: { base: '-space-x-3' },
+            loose: { base: '-space-x-2' }
+        }
+    },
+    defaultVariants: {
+        spacing: 'normal'
+    }
+});

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

@@ -0,0 +1,57 @@
+import type { HTMLAttributes } from 'svelte/elements';
+import type { AvatarProps } from '../../primitives/Avatar/index.js';
+import type { AvatarGroupSlots, AvatarGroupVariants } from './avatar-group.variants.js';
+/**
+ * @description Stacks avatars into an overlapping row with an optional "+N" overflow chip —
+ * the canonical way to show a set of collaborators, assignees or participants compactly.
+ * Data-driven: pass an `items` array of Avatar props; the group propagates a shared `size`
+ * and a cut-out ring so the stack reads cleanly on any surface.
+ *
+ * @tag display
+ * @related Avatar
+ * @stability beta
+ *
+ * @example
+ * ```svelte
+ * <AvatarGroup items={[{ name: 'Ada Lovelace' }, { name: 'Alan Turing' }]} />
+ * ```
+ *
+ * @example
+ * ```svelte
+ * <AvatarGroup items={team} max={4} size="lg" />
+ * ```
+ */
+export interface AvatarGroupProps extends AvatarGroupVariants, Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'class'> {
+    /** The avatars to stack. Each entry is a full set of Avatar props (src, name, status, …). */
+    items: AvatarProps[];
+    /** Shared size applied to every avatar and the overflow chip — xs, sm, md (default), lg, xl, 2xl. */
+    size?: AvatarProps['size'];
+    /**
+     * Maximum avatars to render. When `items` exceeds it, `max - 1` avatars are shown plus a
+     * single "+N" overflow chip — where N is the count of hidden avatars — so the total rendered
+     * count is exactly `max`. Unset (or `0`/negative) shows every avatar with no chip; use `≥ 2`
+     * so the chip sits alongside at least one visible face.
+     */
+    max?: number;
+    /** Overlap amount between avatars — tight, normal (default), loose. */
+    spacing?: 'tight' | 'normal' | 'loose';
+    /**
+     * Ring colour drawn around each avatar so the overlap reads as a cut-out. Any CSS colour;
+     * defaults to the base surface so the stack looks punched out of the page.
+     * @default 'var(--color-surface-base)'
+     */
+    borderColor?: string;
+    /** Additional CSS class merged onto the root row. */
+    class?: string;
+    /** Strip all default styles; combine with slotClasses to rebuild from scratch. */
+    unstyled?: boolean;
+    /** Per-slot class overrides. Slots: base | overflow */
+    slotClasses?: Partial<Record<AvatarGroupSlots, string>>;
+    /**
+     * Apply a named preset registered via `<BlocksProvider presets={{ AvatarGroup: {...} }}>`.
+     * Prefer this over `class` overrides when the requested look falls outside the semantic palette.
+     */
+    preset?: string;
+}
+export { default as AvatarGroup } from './AvatarGroup.svelte';
+export { type AvatarGroupVariants, avatarGroupVariants } from './avatar-group.variants.js';

package/dist/components/AvatarGroup/index.js

@@ -0,0 +1,2 @@
+export { default as AvatarGroup } from './AvatarGroup.svelte';
+export { avatarGroupVariants } from './avatar-group.variants.js';