@wordpress/components 32.3.1-next.v.202602271551.0 → 32.4.0

package/src/avatar/types.ts

@@ -1,59 +0,0 @@
-import type { IconType } from '../icon';
-
-export type AvatarProps = {
-	/**
-	 * URL of the avatar image.
-	 *
-	 * When not provided, initials derived from `name` are shown.
-	 */
-	src?: string;
-	/**
-	 * Name of the user. Used as an accessible label and to generate
-	 * initials when no image is provided.
-	 */
-	name?: string;
-	/**
-	 * Visible text shown in the hover badge. When not provided, `name`
-	 * is used instead. Use this to provide contextual labels like "You"
-	 * without affecting the accessible name or initials.
-	 */
-	label?: string;
-	/**
-	 * Whether to show the hover-expand badge that reveals the user's
-	 * name (or `label`) on hover. Requires `name` to be set.
-	 *
-	 * @default false
-	 */
-	badge?: boolean;
-	/**
-	 * Size of the avatar.
-	 *
-	 * - `'default'`: 32px
-	 * - `'small'`: 24px
-	 *
-	 * @default 'default'
-	 */
-	size?: 'default' | 'small';
-	/**
-	 * CSS color value for an accent border ring around the avatar.
-	 *
-	 * When not provided, no border is rendered and the hover badge
-	 * and avatar status uses the admin theme color as its background.
-	 */
-	borderColor?: string;
-	/**
-	 * A status string applied to the avatar. When set, the image is
-	 * dimmed to indicate a non-default state. A corresponding
-	 * `is-{status}` class is added for custom styling.
-	 */
-	status?: string;
-	/**
-	 * An icon or custom component rendered as a centered overlay on the
-	 * avatar image. Only visible when `status` is set.
-	 *
-	 * Accepts any value supported by the `Icon` component: an icon from
-	 * `@wordpress/icons`, a Dashicon name string, a component, or a
-	 * JSX element.
-	 */
-	statusIndicator?: IconType | null;
-};

package/src/avatar-group/component.tsx

@@ -1,46 +0,0 @@
-/**
- * External dependencies
- */
-import clsx from 'clsx';
-
-/**
- * WordPress dependencies
- */
-import { Children } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import type { AvatarGroupProps } from './types';
-import type { WordPressComponentProps } from '../context';
-
-function AvatarGroup( {
-	className,
-	max = 3,
-	children,
-	...props
-}: WordPressComponentProps< AvatarGroupProps, 'div', false > ) {
-	const childArray = Children.toArray( children );
-	const visible = childArray.slice( 0, max );
-	const overflowCount = childArray.length - max;
-
-	return (
-		<div
-			role="group"
-			className={ clsx( 'components-avatar-group', className ) }
-			{ ...props }
-		>
-			{ visible }
-			{ overflowCount > 0 && (
-				<span
-					className="components-avatar-group__overflow"
-					aria-label={ `${ overflowCount } more` }
-				>
-					{ `+${ overflowCount }` }
-				</span>
-			) }
-		</div>
-	);
-}
-
-export default AvatarGroup;

package/src/avatar-group/index.ts

@@ -1,2 +0,0 @@
-export { default } from './component';
-export type { AvatarGroupProps } from './types';

package/src/avatar-group/styles.scss

@@ -1,32 +0,0 @@
-@use "@wordpress/base-styles/colors" as *;
-@use "@wordpress/base-styles/variables" as *;
-
-.components-avatar-group {
-	display: flex;
-	align-items: center;
-
-	// Overlap subsequent avatars.
-	> .components-avatar + .components-avatar {
-		margin-inline-start: -$grid-unit-10;
-	}
-
-	// Stack earlier avatars on top of later ones so the overlap
-	// is visually correct, and elevate on hover for badge expansion.
-	> .components-avatar {
-		position: relative;
-
-		@for $i from 1 through 10 {
-			&:nth-child(#{$i}) {
-				z-index: #{11 - $i};
-			}
-		}
-	}
-}
-
-.components-avatar-group__overflow {
-	margin-inline-start: $grid-unit-05;
-	font-size: $font-size-small;
-	line-height: $font-line-height-small;
-	color: $gray-900;
-	white-space: nowrap;
-}

package/src/avatar-group/types.ts

@@ -1,13 +0,0 @@
-export type AvatarGroupProps = {
-	/**
-	 * Maximum number of avatars to display before showing an
-	 * overflow indicator.
-	 *
-	 * @default 3
-	 */
-	max?: number;
-	/**
-	 * Avatar elements to display in the group.
-	 */
-	children: React.ReactNode;
-};