@wordpress/components 32.2.1-next.v.202602191100.0 → 32.2.1

package/build-module/avatar-group/index.mjs.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../src/avatar-group/index.ts"],
-  "sourcesContent": ["export { default } from './component';"],
-  "mappings": ";AAAA,SAAS,WAAAA,gBAAe;",
-  "names": ["default"]
-}

package/build-module/avatar-group/types.mjs

@@ -1 +0,0 @@
-//# sourceMappingURL=types.mjs.map

package/build-module/avatar-group/types.mjs.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": [],
-  "sourcesContent": [],
-  "mappings": "",
-  "names": []
-}

package/build-types/avatar/component.d.ts

@@ -1,5 +0,0 @@
-import type { AvatarProps } from './types';
-import type { WordPressComponentProps } from '../context';
-declare function Avatar({ className, src, name, label, badge, size, borderColor, status, statusIndicator, style, ...props }: WordPressComponentProps<AvatarProps, 'div', false>): import("react").JSX.Element;
-export default Avatar;
-//# sourceMappingURL=component.d.ts.map

package/build-types/avatar/component.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"component.d.ts","sourceRoot":"","sources":["../../src/avatar/component.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAC3C,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,YAAY,CAAC;AAE1D,iBAAS,MAAM,CAAE,EAChB,SAAS,EACT,GAAG,EACH,IAAI,EACJ,KAAK,EACL,KAAa,EACb,IAAgB,EAChB,WAAW,EACX,MAAM,EACN,eAAe,EACf,KAAK,EACL,GAAG,KAAK,EACR,EAAE,uBAAuB,CAAE,WAAW,EAAE,KAAK,EAAE,KAAK,CAAE,+BAsDtD;AAED,eAAe,MAAM,CAAC"}

package/build-types/avatar/index.d.ts

@@ -1,3 +0,0 @@
-export { default } from './component';
-export type { AvatarProps } from './types';
-//# sourceMappingURL=index.d.ts.map

package/build-types/avatar/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/avatar/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AACtC,YAAY,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC"}

package/build-types/avatar/types.d.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;
-};
-//# sourceMappingURL=types.d.ts.map

package/build-types/avatar/types.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/avatar/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AAExC,MAAM,MAAM,WAAW,GAAG;IACzB;;;;OAIG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;;OAKG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB;;;;;;;OAOG;IACH,IAAI,CAAC,EAAE,SAAS,GAAG,OAAO,CAAC;IAC3B;;;;;OAKG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;;OAIG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;;;;;OAOG;IACH,eAAe,CAAC,EAAE,QAAQ,GAAG,IAAI,CAAC;CAClC,CAAC"}

package/build-types/avatar-group/component.d.ts

@@ -1,8 +0,0 @@
-/**
- * Internal dependencies
- */
-import type { AvatarGroupProps } from './types';
-import type { WordPressComponentProps } from '../context';
-declare function AvatarGroup({ className, max, children, ...props }: WordPressComponentProps<AvatarGroupProps, 'div', false>): import("react").JSX.Element;
-export default AvatarGroup;
-//# sourceMappingURL=component.d.ts.map

package/build-types/avatar-group/component.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"component.d.ts","sourceRoot":"","sources":["../../src/avatar-group/component.tsx"],"names":[],"mappings":"AAUA;;GAEG;AACH,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAChD,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,YAAY,CAAC;AAE1D,iBAAS,WAAW,CAAE,EACrB,SAAS,EACT,GAAO,EACP,QAAQ,EACR,GAAG,KAAK,EACR,EAAE,uBAAuB,CAAE,gBAAgB,EAAE,KAAK,EAAE,KAAK,CAAE,+BAsB3D;AAED,eAAe,WAAW,CAAC"}

package/build-types/avatar-group/index.d.ts

@@ -1,3 +0,0 @@
-export { default } from './component';
-export type { AvatarGroupProps } from './types';
-//# sourceMappingURL=index.d.ts.map

package/build-types/avatar-group/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/avatar-group/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AACtC,YAAY,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC"}

package/build-types/avatar-group/types.d.ts

@@ -1,14 +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;
-};
-//# sourceMappingURL=types.d.ts.map

package/build-types/avatar-group/types.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/avatar-group/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,gBAAgB,GAAG;IAC9B;;;;;OAKG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC1B,CAAC"}

package/src/avatar/component.tsx

@@ -1,82 +0,0 @@
-/**
- * External dependencies
- */
-import clsx from 'clsx';
-
-/**
- * Internal dependencies
- */
-import Icon from '../icon';
-import Tooltip from '../tooltip';
-import type { AvatarProps } from './types';
-import type { WordPressComponentProps } from '../context';
-
-function Avatar( {
-	className,
-	src,
-	name,
-	label,
-	badge = false,
-	size = 'default',
-	borderColor,
-	status,
-	statusIndicator,
-	style,
-	...props
-}: WordPressComponentProps< AvatarProps, 'div', false > ) {
-	const showBadge = badge && !! name;
-	const initials = name
-		? name
-				.split( /\s+/ )
-				.slice( 0, 2 )
-				.map( ( word ) => word[ 0 ] )
-				.join( '' )
-				.toUpperCase()
-		: undefined;
-	const customProperties = {
-		...style,
-		...( src ? { '--components-avatar-url': `url(${ src })` } : {} ),
-		...( borderColor
-			? { '--components-avatar-outline-color': borderColor }
-			: {} ),
-	} as React.CSSProperties;
-
-	const avatar = (
-		<div
-			className={ clsx( 'components-avatar', className, {
-				'has-avatar-border-color': !! borderColor,
-				'has-src': !! src,
-				'has-badge': showBadge,
-				'is-small': size === 'small',
-				'has-status': !! status,
-				[ `is-${ status }` ]: !! status,
-			} ) }
-			style={ customProperties }
-			role="img"
-			aria-label={ name }
-			{ ...props }
-		>
-			<span className="components-avatar__image">
-				{ ! src && initials }
-				{ !! status && !! statusIndicator && (
-					<span className="components-avatar__status-indicator">
-						<Icon icon={ statusIndicator } />
-					</span>
-				) }
-			</span>
-			{ showBadge && (
-				<span className="components-avatar__name">
-					{ label || name }
-				</span>
-			) }
-		</div>
-	);
-
-	if ( name && ( ! showBadge || label ) ) {
-		return <Tooltip text={ name }>{ avatar }</Tooltip>;
-	}
-
-	return avatar;
-}
-
-export default Avatar;

package/src/avatar/index.ts

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

package/src/avatar/styles.scss

@@ -1,152 +0,0 @@
-@use "@wordpress/base-styles/colors" as *;
-@use "@wordpress/base-styles/variables" as *;
-@use "../utils/theme-variables" as *;
-
-.components-avatar {
-	display: inline-flex;
-	align-items: center;
-	border-radius: $radius-full;
-	overflow: clip;
-	flex-shrink: 0;
-	background-color: $components-color-accent;
-	box-shadow: 0 0 0 var(--wp-admin-border-width-focus) $white, $elevation-x-small;
-}
-
-.components-avatar__image {
-	box-sizing: border-box;
-	position: relative;
-	width: $button-size-compact;
-	height: $button-size-compact;
-	border-radius: $radius-full;
-	border: 0;
-	background-color: $components-color-accent;
-	overflow: clip;
-	flex-shrink: 0;
-	font-size: 0;
-	color: $white;
-
-	.is-small > & {
-		width: $button-size-small;
-		height: $button-size-small;
-	}
-
-	.has-src > & {
-		background-image: var(--components-avatar-url);
-		background-size: cover;
-		background-position: center;
-	}
-
-	.has-avatar-border-color > & {
-		border: var(--wp-admin-border-width-focus) solid var(--components-avatar-outline-color);
-		box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) $white;
-		background-clip: padding-box;
-	}
-}
-
-// Initials fallback: show name characters when no image.
-.components-avatar:not(.has-src) > .components-avatar__image {
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	font-size: $font-size-x-small;
-	font-weight: $font-weight-medium;
-	border: 0;
-	box-shadow: none;
-	background-clip: border-box;
-}
-
-.components-avatar:not(.has-src).has-avatar-border-color > .components-avatar__image {
-	background-color: var(--components-avatar-outline-color);
-}
-
-.components-avatar__name {
-	font-size: $font-size-medium;
-	line-height: $font-line-height-small;
-	color: $white;
-	min-width: 0;
-	padding-bottom: calc($grid-unit-05 / 2);
-	overflow: hidden;
-	opacity: 0;
-	white-space: nowrap;
-	transition: opacity 0.15s cubic-bezier(0.15, 0, 0.15, 1);
-}
-
-// Badge mode: use grid so the name column animates from 0 to natural width.
-// Spacing is on the container (column-gap + padding-inline-end) so it
-// transitions alongside grid-template-columns instead of causing a bump.
-.components-avatar.has-badge {
-	display: inline-grid;
-	grid-template-columns: min-content 0fr;
-	column-gap: 0;
-	padding-inline-end: 0;
-	transition:
-		grid-template-columns 0.3s cubic-bezier(0.15, 0, 0.15, 1),
-		column-gap 0.3s cubic-bezier(0.15, 0, 0.15, 1),
-		padding-inline-end 0.3s cubic-bezier(0.15, 0, 0.15, 1);
-
-	&:hover {
-		grid-template-columns: min-content 1fr;
-		column-gap: $grid-unit-05;
-		padding-inline-end: $grid-unit-10;
-		transition-timing-function: cubic-bezier(0.85, 0, 0.85, 1);
-	}
-
-	&:hover .components-avatar__name {
-		opacity: 1;
-		transition-timing-function: cubic-bezier(0.85, 0, 0.85, 1);
-	}
-}
-
-.components-avatar.has-badge.has-avatar-border-color {
-	background-color: var(--components-avatar-outline-color);
-}
-
-// Status: dim and desaturate content so the background color shows through.
-// Images: move to ::before with luminosity blend over the solid bg color.
-// Initials: reduce text opacity.
-.components-avatar.has-status.has-src > .components-avatar__image {
-	background-image: none;
-
-	&::before {
-		content: "";
-		position: absolute;
-		inset: 0;
-		border-radius: inherit;
-		background-image: var(--components-avatar-url);
-		background-size: cover;
-		background-position: center;
-		mix-blend-mode: luminosity;
-		opacity: 0.3;
-	}
-}
-
-.components-avatar.has-status:not(.has-src) > .components-avatar__image {
-	color: rgba($white, 0.3);
-}
-
-.components-avatar.has-status.has-avatar-border-color > .components-avatar__image {
-	background-color: var(--components-avatar-outline-color);
-}
-
-.components-avatar__status-indicator {
-	position: absolute;
-	inset: 0;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	z-index: 1;
-	color: $white;
-	fill: $white;
-
-	svg {
-		width: 75%;
-		height: 75%;
-	}
-}
-
-@media (prefers-reduced-motion: reduce) {
-	.components-avatar.has-badge,
-	.components-avatar__name {
-		transition: none;
-	}
-}

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;
-};